diff --git a/MINTLIFY_PORT.md b/MINTLIFY_PORT.md
new file mode 100644
index 000000000..af0058a7b
--- /dev/null
+++ b/MINTLIFY_PORT.md
@@ -0,0 +1,38 @@
+# Mintlify documentation port
+
+This fork includes a community-maintained Mintlify port of the current TanStack documentation in [`mintlify/`](./mintlify). It is not an official TanStack deployment.
+
+## Scope
+
+- 16 public TanStack products represented with Mintlify's product switcher
+- 2,720 Markdown/MDX pages copied from pinned upstream `main` commits
+- all assets found under each upstream documentation directory
+- navigation recreated from each product's `docs/config.json`
+- generated compatibility pages for examples and API references that TanStack.com builds dynamically
+- MIT license copies and commit-level provenance in `mintlify/attribution.mdx`
+
+Historical version branches are not duplicated; the canonical TanStack site remains the source for archived versions.
+
+## Validate locally
+
+```sh
+cd mintlify
+npx mint@latest validate
+npx mint@latest broken-links
+npx mint@latest dev
+```
+
+## Regenerate
+
+The generator expects current TanStack product repositories in a sibling `upstreams/` directory by default. Override that location with `TANSTACK_SOURCE_ROOT`.
+
+```sh
+TANSTACK_SOURCE_ROOT=/path/to/upstreams node scripts/port-to-mintlify.mjs
+```
+
+The source mapping and pinned commit SHAs live at the top of `scripts/port-to-mintlify.mjs`. Regeneration is deterministic for a matching set of source checkouts.
+
+## Deploy
+
+Connect this repository to Mintlify, enable **Set up as monorepo**, and set the documentation path to `/mintlify`.
+
diff --git a/README.md b/README.md
index f168f491e..94ef81f27 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,9 @@ The home of the TanStack ecosystem. Built with [TanStack Router](https://tanstac
 
 ## Development
 
+> [!NOTE]
+> This fork also contains a community [Mintlify documentation port](./MINTLIFY_PORT.md) under `mintlify/`.
+
 ### Quick Start
 
 From your terminal:
diff --git a/mintlify/ai/adapters/acp-compatible.md b/mintlify/ai/adapters/acp-compatible.md
new file mode 100644
index 000000000..c2c7539a4
--- /dev/null
+++ b/mintlify/ai/adapters/acp-compatible.md
@@ -0,0 +1,286 @@
+---
+title: ACP-Compatible Harness
+id: acp-compatible-harness
+description: "Plug any Agent Client Protocol (ACP) coding agent into a TanStack AI sandbox with one generic harness adapter — no dedicated package required."
+keywords:
+  - tanstack ai
+  - acp
+  - agent client protocol
+  - coding agent
+  - harness
+  - sandbox
+  - custom adapter
+---
+
+Coding-agent CLIs that speak the [Agent Client Protocol](https://agentclientprotocol.com) (ACP) — `grok`, `gemini --acp`, and others — expose a long-lived JSON-RPC session you can drive from a sandbox. Instead of a dedicated package per agent, `acpCompatible` builds a `chat()` adapter for **any** ACP-compliant CLI: configure how to launch it once, select a model per call, and pass it into a sandbox.
+
+It is the harness equivalent of the [OpenAI-Compatible adapter](/ai/adapters/openai-compatible). Use it when your agent speaks ACP but has no `@tanstack/ai-*` package. If a dedicated harness adapter exists ([Grok Build](/ai/adapters/grok-build), and others), prefer it — those carry curated per-model metadata and vendor-specific behavior.
+
+## Installation
+
+`acpCompatible` ships in `@tanstack/ai-acp`. You drive it inside a sandbox, so install the sandbox package and a provider too:
+
+```bash
+npm install @tanstack/ai-acp @tanstack/ai @tanstack/ai-sandbox @tanstack/ai-sandbox-docker
+```
+
+## Basic Usage
+
+Configure the harness once with `acpCompatible({ name, command })`, then select a model per call. `command` builds the shell command that launches the agent's ACP server over **stdio** inside the sandbox:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { acpCompatible } from '@tanstack/ai-acp'
+import {
+  createSecrets,
+  defineSandbox,
+  defineWorkspace,
+  githubRepo,
+  withSandbox,
+} from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { messages } from './chat-context'
+
+// Configure the "pi" agent harness once:
+const pi = acpCompatible({
+  name: 'pi',
+  command: ({ model, harnessCwd }) => `pi --acp -m ${model} --cwd ${harnessCwd}`,
+  authMethodId: 'pi-api-key', // when the harness advertises an ACP auth method
+  refusalMessage: 'Pi refused the request.',
+})
+
+const sandbox = defineSandbox({
+  id: 'pi-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['npm install -g pi-cli'], // install the agent CLI into the image
+    secrets: createSecrets({ PI_API_KEY: process.env.PI_API_KEY ?? '' }),
+  }),
+})
+
+const stream = chat({
+  adapter: pi('pi-fast'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+You get the full ACP flow for free: sandbox resolution, `chat()`-tool → MCP bridging, session resume, permission handling, abort, and AG-UI event translation.
+
+## One-Shot Usage
+
+For a single model, skip the harness-factory and build the adapter inline with `acpCompatibleText`:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { acpCompatibleText } from '@tanstack/ai-acp'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { sandbox } from './sandbox'
+import { messages } from './chat-context'
+
+const stream = chat({
+  adapter: acpCompatibleText('pi-fast', {
+    name: 'pi',
+    command: ({ model }) => `pi --acp -m ${model}`,
+  }),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+## Typed models & options
+
+Like `openaiCompatible`, you can declare the harness's **models** and its
+per-call **options** so the whole thing is type-checked. `models` constrains the
+factory's argument; `modelOptions` is a type-only brand (`{} as { … }`, unused at
+runtime) describing what `chat({ modelOptions })` accepts. Declared options are
+merged with the base ACP options and handed to `command` / `openTransport` as
+`ctx.modelOptions`, so you can turn them into CLI flags:
+
+```ts
+import { acpCompatible } from '@tanstack/ai-acp'
+
+const pi = acpCompatible({
+  name: 'pi',
+  models: ['pi-fast', 'pi-pro'],
+  modelOptions: {} as { reasoningEffort?: 'low' | 'high' },
+  command: ({ model, harnessCwd, modelOptions }) =>
+    `pi --acp -m ${model} --cwd ${harnessCwd}` +
+    (modelOptions?.reasoningEffort ? ` --effort ${modelOptions.reasoningEffort}` : ''),
+})
+
+pi('pi-pro') // ok
+// pi('pi-ultra') // type error — not in `models`
+```
+
+```ts
+import { chat } from '@tanstack/ai'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { pi } from './pi-harness'
+import { sandbox } from './sandbox'
+import { messages } from './chat-context'
+
+const stream = chat({
+  adapter: pi('pi-pro'),
+  modelOptions: { reasoningEffort: 'high' }, // typed against the declared options
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+The base options are always available on `modelOptions` regardless of what you
+declare: `sessionId` (resume), `cwd`, `authMethodId`, and `permissionMode`.
+
+## Configuration
+
+| Field | Purpose |
+| --- | --- |
+| `name` (required) | Harness label, log prefix, and the `<name>.session-id` CUSTOM event name. |
+| `models` | The model ids this harness accepts — declaring them makes `harness('id')` type-safe (unknown ids are rejected). Omit to accept any string. |
+| `modelOptions` | Type-only brand for the per-call options accepted via `chat({ modelOptions })`. Declare with `{} as { … }`; merged with the base options and exposed on `ctx.modelOptions` in `command` / `openTransport`. |
+| `command` | Build the **stdio** launch command from `{ model, cwd, harnessCwd, sandbox, env, modelOptions, signal }`. Required unless `openTransport` is given. |
+| `skillsDir` | The harness's skills directory (relative to the workspace root, e.g. `'.pi/skills'`) — its native convention, like Claude Code's `.claude/skills`. `withSandbox` workspace `gitSkill`s are linked here. Omit and gitSkills are left unlinked (warned). |
+| `openTransport` | Open any `AcpSessionTransport` yourself (e.g. boot a `serve` process and connect over WebSocket). Overrides `command`. |
+| `cwd` | Working directory inside the sandbox (default `/workspace`). |
+| `env` | Extra environment variables for the harness process. |
+| `authMethodId` | ACP auth method to select before the session starts. |
+| `permissionMode` | `'default'` \| `'acceptEdits'` \| `'bypassPermissions'` (default). |
+| `permissions` | `'headless'` (auto-resolve, default) or `'interactive'` (emit approval-requested events for `ask` prompts). |
+| `onPermissionRequest` | Custom permission handler; overrides `permissions`/`permissionMode`. |
+| `refusalMessage` | `RUN_ERROR` message when the harness refuses a request. |
+| `planEventName` | Emit ACP `plan` updates as a CUSTOM event under this name. |
+| `emitDiff` | Emit the post-run `git diff` of `cwd` as a `file.changed` CUSTOM event (off by default). |
+| `onExtNotification` | Handle vendor `_x/…` JSON-RPC notifications. |
+| `buildPrompt` | Override how chat history maps to the harness prompt. |
+
+## WebSocket and Custom Transports
+
+Some harnesses run an ACP server you reach over WebSocket rather than stdio (the `grok agent serve` pattern). Open the transport yourself with `openTransport` — it receives the same context and returns an `AcpSessionTransport`. Put all teardown in the returned transport's `dispose`:
+
+```ts
+import { acpCompatible, startAcpServerInSandbox } from '@tanstack/ai-acp'
+
+const myAgent = acpCompatible({
+  name: 'my-agent',
+  openTransport: async ({ sandbox, model, harnessCwd, signal }) => {
+    const server = await startAcpServerInSandbox(sandbox, {
+      port: 9100,
+      cwd: harnessCwd,
+      command: `my-agent serve --bind 0.0.0.0:9100 -m ${model}`,
+      readyMarker: 'listening',
+      buildWsUrl: ({ channel, port }) =>
+        `${channel.url.replace(/^http/i, 'ws')}:${port}`,
+      ...(signal ? { signal } : {}),
+    })
+    const ws = await server.connect(signal)
+    return {
+      kind: 'stream',
+      stream: ws.stream,
+      dispose: async () => {
+        ws.close()
+        await server.dispose()
+      },
+    }
+  },
+})
+```
+
+## Permissions
+
+Inside a sandbox the sandbox itself is the security boundary, so the default `'headless'` strategy with `permissionMode: 'bypassPermissions'` lets the agent edit files and run commands without prompting. To surface tool approvals to a client instead, switch to `'interactive'`:
+
+```ts
+import { acpCompatible } from '@tanstack/ai-acp'
+
+const pi = acpCompatible({
+  name: 'pi',
+  command: ({ model }) => `pi --acp -m ${model}`,
+  permissions: 'interactive', // emit approval-requested events for `ask` prompts
+  permissionMode: 'acceptEdits', // still auto-approve file edits
+})
+```
+
+`chat()`-provided tools bridged into the agent are always auto-approved, regardless of mode.
+
+## Session Resume
+
+On every run the adapter emits the harness session id as a CUSTOM event named `<name>.session-id` (e.g. `pi.session-id`). Thread that id back through `modelOptions.sessionId` on the next call and the harness resumes the session — only the trailing user message is sent, since the agent already holds the prior context:
+
+```ts
+import { chat, chatParamsFromRequest, toServerSentEventsResponse } from '@tanstack/ai'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { pi } from './pi-harness' // the configured `acpCompatible(...)` factory
+import { sandbox } from './sandbox'
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request)
+  const sessionId =
+    typeof params.forwardedProps.sessionId === 'string'
+      ? params.forwardedProps.sessionId
+      : undefined
+
+  const stream = chat({
+    adapter: pi('pi-fast'),
+    messages: params.messages,
+    middleware: [withSandbox(sandbox)],
+    modelOptions: { sessionId },
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+## Workspace skills
+
+When you provision a [workspace](/ai/sandbox/workspace) via `withSandbox`,
+`acpCompatible` projects its skills into the harness — each kind lands where that
+harness expects it:
+
+| Workspace input | How `acpCompatible` projects it |
+| --- | --- |
+| `mcpSkill(name, config)` | Passed to the agent over **ACP natively** via `newSession`'s `mcpServers` (secrets/bearer headers resolved). No config file — that's the ACP advantage over file-based harnesses. |
+| `gitSkill({ repo })` | Cloned during bootstrap, then linked into your declared [`skillsDir`](#configuration) (e.g. `.pi/skills`). Omit `skillsDir` and it's left unlinked (with a warning). |
+| `fileSkill({ path, content })` | Written into the workspace root during bootstrap (provider-agnostic). |
+| `instructions` | Written to `AGENTS.md` (and symlinks) during bootstrap. |
+| `agentSkill(name)`, `plugins` | No generic ACP primitive — warned and skipped. Provide a `gitSkill` or MCP server instead. |
+
+`secrets` declared on the workspace are injected into the agent's environment at
+create/resume (never persisted to snapshots), so the harness CLI picks them up
+like any env var.
+
+## Protocol coverage
+
+`acpCompatible` implements the **client / orchestration** side of ACP — enough to
+drive an agent through a full prompt turn, not the entire protocol surface. It is
+a compliant *minimal* client: everything it doesn't implement is either
+capability-gated (so advertising non-support is the spec-defined behavior) or a
+rendering choice, never a violation.
+
+**Covered:**
+
+- `initialize` handshake — sends `clientInfo` + the protocol version, negotiates the version, advertises capabilities.
+- `authenticate` (when the agent advertises auth methods), `session/new`, `session/load` (resume), `session/prompt`, `session/cancel`.
+- `session/request_permission` with all four option kinds, mapped by [permission mode](#permissions).
+- All streamed `session/update`s that carry turn output: `agent_message_chunk`, `agent_thought_chunk` (→ reasoning), `tool_call` / `tool_call_update`, `plan`.
+- All five stop reasons (`end_turn`, `max_tokens`, `max_turn_requests`, `refusal`, `cancelled`).
+
+**Surfaced as `CUSTOM` stream events** (the AG-UI chat-event protocol has no
+first-class event for non-text assistant output, so these ride on `CUSTOM`):
+
+- `<name>.session-id` — the harness session id, for [resume](#session-resume).
+- `<name>.message-content` — non-text agent content (`image` / `audio` / `resource` / `resource_link` blocks). Its `value` is `{ content: <ACP content block> }`. Non-text **tool** content (diffs, terminal, images) is preserved inside the `TOOL_CALL_RESULT` payload.
+- the plan event, when you set `planEventName`.
+
+**Not implemented (by design):**
+
+- `fs/read_text_file`, `fs/write_text_file`, `terminal/*` — advertised as unsupported. The agent runs inside the sandbox with direct filesystem and shell access, so it never delegates these back to the client.
+- Sending **multimodal prompts** — prompts are sent as text. (Agent multimodal *output* is surfaced via `message-content` above.)
+- Incremental `usage_update` (final turn usage is reported instead), `available_commands_update`, `current_mode_update`, and experimental features (elicitation, NES, providers, session modes/config).
+
+## Next Steps
+
+- [Sandbox Overview](/ai/sandbox/overview) — how harnesses run inside a sandbox
+- [Grok Build Adapter](/ai/adapters/grok-build) — a first-class ACP harness adapter
+- [Sandbox Tools](/ai/sandbox/tools) — bridge your app's tools into the agent
+- [OpenAI-Compatible Adapter](/ai/adapters/openai-compatible) — the same idea for model providers
diff --git a/mintlify/ai/adapters/anthropic.md b/mintlify/ai/adapters/anthropic.md
new file mode 100644
index 000000000..1d003ee37
--- /dev/null
+++ b/mintlify/ai/adapters/anthropic.md
@@ -0,0 +1,511 @@
+---
+title: Anthropic
+id: anthropic-adapter
+order: 2
+description: "Use Anthropic Claude models with TanStack AI — Claude Fable 5, Claude Sonnet 5, Claude Opus, and more via the @tanstack/ai-anthropic adapter."
+keywords:
+  - tanstack ai
+  - anthropic
+  - claude
+  - claude fable 5
+  - claude sonnet 5
+  - claude opus
+  - adapter
+  - llm
+---
+
+The Anthropic adapter provides access to Claude models, including Claude Fable 5, Claude Sonnet 5, Claude Opus 4.8, and more.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-anthropic
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createAnthropicChat } from "@tanstack/ai-anthropic";
+
+const adapter = createAnthropicChat("claude-sonnet-4-6", process.env.ANTHROPIC_API_KEY!, {
+  // ... your config options
+});
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createAnthropicChat, type AnthropicTextConfig } from "@tanstack/ai-anthropic";
+
+const config: Omit<AnthropicTextConfig, "apiKey"> = {
+  baseURL: "https://api.anthropic.com", // Optional, for custom endpoints
+};
+
+const adapter = createAnthropicChat("claude-sonnet-4-6", process.env.ANTHROPIC_API_KEY!, config);
+```
+ 
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: anthropicText("claude-sonnet-4-6"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { z } from "zod";
+
+const searchDatabaseDef = toolDefinition({
+  name: "search_database",
+  description: "Search the database",
+  inputSchema: z.object({
+    query: z.string(),
+  }),
+});
+
+const searchDatabase = searchDatabaseDef.server(async ({ query }) => {
+  // Search database
+  return { results: [] };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: anthropicText("claude-sonnet-4-6"),
+    messages,
+    tools: [searchDatabase],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Model Options
+
+Anthropic supports various provider-specific options. Sampling parameters live here too — `temperature`, `top_p`, and `max_tokens` — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    max_tokens: 4096,
+    temperature: 0.7,
+    top_p: 0.9,
+    top_k: 40,
+    stop_sequences: ["END"],
+  },
+});
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+#### `max_tokens` default
+
+Anthropic's Messages API _requires_ `max_tokens` on every request, so the adapter always sends a value. When you don't set `modelOptions.max_tokens`, it defaults to the selected model's full output ceiling (`max_output_tokens` from the model metadata — e.g. 64K for Sonnet, 128K for Opus), falling back to a safe constant for unrecognized models. `max_tokens` is a ceiling, not a reservation — billing is on tokens actually generated — so this default costs nothing extra and avoids the silent mid-response truncation (`stop_reason: "max_tokens"`) that a low default would cause. Set `max_tokens` explicitly only when you want to _cap_ output below the model ceiling. If a response is truncated while using the default cap, the adapter logs a warning (visible with [debug logging](/ai/advanced/debug-logging) enabled).
+
+One exception: structured output (`chat({ outputSchema })`) on models that use the non-streaming finalization path clamps this default to ~21K tokens. The Anthropic SDK rejects a non-streaming request whose `max_tokens` could exceed its 10-minute timeout, so the full ceiling can't be used there. Streaming chat is unaffected. To raise the structured-output ceiling toward a model's true max, stream the response.
+
+### Thinking (Extended Thinking)
+
+Enable extended thinking with a token budget. This allows Claude to show its reasoning process, which is streamed as `thinking` chunks:
+
+```typescript ignore
+modelOptions: {
+  thinking: {
+    type: "enabled",
+    budget_tokens: 2048, // Maximum tokens for thinking
+  },
+}
+```
+
+**Note:** `budget_tokens` must be less than `modelOptions.max_tokens` — set `max_tokens` high enough to leave room for the visible response alongside the thinking budget, or the request is rejected.
+
+### Adaptive Thinking (Claude 4.6+, Sonnet 5, Fable 5)
+
+Newer Claude models use adaptive thinking — the model decides when and how
+much to think, and depth is tuned with `output_config.effort` instead of a
+token budget:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-5"),
+  messages: [{ role: "user", content: "Plan a database migration." }],
+  modelOptions: {
+    thinking: { type: "adaptive", display: "summarized" },
+    output_config: { effort: "xhigh" },
+    max_tokens: 64_000,
+  },
+});
+```
+
+Per-model rules (enforced by the adapter's types):
+
+- **`claude-sonnet-5`, `claude-opus-4-8`, `claude-opus-4-7`** — adaptive
+  thinking with an explicit `{ type: "disabled" }` opt-out. The manual
+  `{ type: "enabled", budget_tokens }` shape is rejected with a 400, and
+  the sampling parameters (`temperature`, `top_p`, `top_k`) are not
+  accepted (on Sonnet 5 the API rejects non-default values; on Opus
+  4.7/4.8 the parameters are removed entirely).
+- **`claude-fable-5`** — thinking is always on. The only accepted explicit
+  config is `{ type: "adaptive" }` (both `disabled` and `budget_tokens`
+  return a 400), and sampling parameters are rejected.
+- **`claude-opus-4-6` / `claude-sonnet-4-6`** — accept
+  `{ type: "adaptive" }` alongside the deprecated
+  `{ type: "enabled", budget_tokens }` shape, and still accept sampling
+  parameters.
+- **`display`** defaults to `"omitted"` on Opus 4.7+ and the 5-generation
+  models — set `"summarized"` to stream the reasoning text.
+- **`effort`** accepts `"low" | "medium" | "high" | "xhigh" | "max"`;
+  `"xhigh"` is available on Claude Opus 4.7+, Claude Sonnet 5, and
+  Claude Fable 5.
+
+### Prompt Caching
+
+Cache prompts for better performance and reduced costs:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [
+    {
+      role: "user",
+      content: [
+        {
+          type: "text",
+          content: "What is the capital of France?",
+          metadata: {
+            cache_control: {
+              type: "ephemeral",
+            },
+          },
+        },
+      ],
+    },
+  ],
+});
+```
+
+## Summarization
+
+Anthropic supports text summarization:
+
+```typescript
+import { summarize } from "@tanstack/ai";
+import { anthropicSummarize } from "@tanstack/ai-anthropic";
+
+const result = await summarize({
+  adapter: anthropicSummarize("claude-sonnet-4-6"),
+  text: "Your long text to summarize...",
+  maxLength: 100,
+  style: "concise", // "concise" | "bullet-points" | "paragraph"
+});
+
+console.log(result.summary);
+```
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+## API Reference
+
+Every factory pair follows the same shape: the short factory (`anthropicText`, `anthropicSummarize`) reads `ANTHROPIC_API_KEY` from the environment, while `createAnthropicChat` / `createAnthropicSummarize` take an explicit API key. Both take `model` as the first argument.
+
+### `anthropicText(model, config?)` / `createAnthropicChat(model, apiKey, config?)`
+
+Creates an Anthropic chat adapter.
+
+**Parameters:**
+
+- `model` - Claude model id (e.g. `"claude-sonnet-5"`, `"claude-fable-5"`, `"claude-opus-4-8"`)
+- `config?.baseURL` - Custom base URL (optional)
+
+### `anthropicSummarize(model, config?)` / `createAnthropicSummarize(model, apiKey, config?)`
+
+Creates an Anthropic summarization adapter.
+
+## Limitations
+
+- **Image Generation**: Anthropic does not support image generation. Use OpenAI or Gemini for image generation.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
+
+## Provider Tools
+
+Anthropic exposes several native tools beyond user-defined function calls.
+Import them from `@tanstack/ai-anthropic/tools` and pass them into
+`chat({ tools: [...] })`.
+
+> For the full concept, a comparison matrix, and type-gating details, see
+> [Provider Tools](/ai/tools/provider-tools).
+
+### `webSearchTool`
+
+Enables Claude to run Anthropic's native web search with inline citations.
+Scope the search with `allowed_domains` or `blocked_domains` (mutually
+exclusive); set `max_uses` to cap per-turn cost.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { webSearchTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-opus-4-7"),
+  messages: [{ role: "user", content: "What's new in AI this week?" }],
+  tools: [
+    webSearchTool({
+      name: "web_search",
+      type: "web_search_20250305",
+      max_uses: 2,
+    }),
+  ],
+});
+```
+
+**Supported models:** every registered Claude model. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `webFetchTool`
+
+Lets Claude fetch the contents of a URL directly, useful when you want the
+model to read a specific page rather than run a search. Takes no required
+arguments — pass an optional config object to override defaults.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { webFetchTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Summarise https://example.com" }],
+  tools: [webFetchTool()],
+});
+```
+
+**Supported models:** Claude Sonnet 4.x and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `codeExecutionTool`
+
+Gives Claude a sandboxed code-execution environment so it can run Python
+snippets, analyse data, and return results inline. Choose the version string
+that matches your desired API revision.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { codeExecutionTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Plot a histogram of [1,2,2,3,3,3]" }],
+  tools: [
+    codeExecutionTool({ name: "code_execution", type: "code_execution_20250825" }),
+  ],
+});
+```
+
+**Supported models:** Claude Sonnet 4.x and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+#### Attaching hosted skills
+
+Pass a `skills` array as the second argument to load provider-managed skill
+bundles into the sandbox. The adapter auto-lifts them into the API's
+`container.skills` param and adds the required beta headers for you.
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { codeExecutionTool } from "@tanstack/ai-anthropic/tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: anthropicText("claude-sonnet-4-5"),
+    messages,
+    tools: [
+      codeExecutionTool(
+        { type: "code_execution_20250825", name: "code_execution" },
+        {
+          skills: [{ type: "anthropic", skill_id: "pptx", version: "latest" }],
+        },
+      ),
+    ],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+For the full reference — skill shape, constraints, scope, and the OpenAI
+equivalent — see [Provider Skills](/ai/tools/provider-skills).
+
+### `computerUseTool`
+
+Allows Claude to observe a virtual desktop (screenshots) and interact with it
+via keyboard and mouse events. Provide the screen resolution so Claude can
+calculate accurate coordinates.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { computerUseTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Open the browser and go to example.com" }],
+  tools: [
+    computerUseTool({
+      type: "computer_20250124",
+      name: "computer",
+      display_width_px: 1024,
+      display_height_px: 768,
+    }),
+  ],
+});
+```
+
+**Supported models:** Claude Sonnet 3.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `bashTool`
+
+Provides Claude with a persistent bash shell session, letting it run arbitrary
+commands, install packages, or manipulate files on the host. Choose the type
+string that matches your API revision.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { bashTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "List all TypeScript files in src/" }],
+  tools: [bashTool({ name: "bash", type: "bash_20250124" })],
+});
+```
+
+**Supported models:** Claude Sonnet 3.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `textEditorTool`
+
+Gives Claude a structured text-editor interface for viewing and modifying files
+using `str_replace`, `create`, `view`, and `undo_edit` commands. Choose the
+type string for the API revision you target.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { textEditorTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Fix the bug in src/index.ts" }],
+  tools: [
+    textEditorTool({ type: "text_editor_20250124", name: "str_replace_editor" }),
+  ],
+});
+```
+
+**Supported models:** Claude Sonnet 3.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `memoryTool`
+
+Enables Claude to store and retrieve information across conversation turns
+using Anthropic's managed memory service. Call with no arguments to use
+default configuration.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { memoryTool } from "@tanstack/ai-anthropic/tools";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Remember that I prefer metric units" }],
+  tools: [memoryTool()],
+});
+```
+
+**Supported models:** Claude Sonnet 4.x and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `customTool`
+
+Creates a tool with an inline JSON Schema input definition instead of going
+through `toolDefinition()`. Useful when you need fine-grained control over the
+schema shape or want to add `cache_control`. Unlike branded provider tools,
+`customTool` returns a plain `Tool` and is accepted by any chat model.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { customTool } from "@tanstack/ai-anthropic/tools";
+import { z } from "zod";
+
+const stream = chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Look up user 42" }],
+  tools: [
+    customTool(
+      "lookup_user",
+      "Look up a user by ID and return their profile",
+      z.object({ userId: z.number() }),
+    ),
+  ],
+});
+```
+
+**Supported models:** all current Claude models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
diff --git a/mintlify/ai/adapters/bedrock.md b/mintlify/ai/adapters/bedrock.md
new file mode 100644
index 000000000..5e8efc39b
--- /dev/null
+++ b/mintlify/ai/adapters/bedrock.md
@@ -0,0 +1,256 @@
+---
+title: Amazon Bedrock
+id: bedrock-adapter
+order: 7
+description: "Use Amazon Bedrock with TanStack AI — the Converse API is the default, reaching Claude, Nova, Llama, Mistral, DeepSeek, and more. Opt into OpenAI-compatible Chat Completions or Responses for open-weight and gpt-oss models. Supports streaming, tools, reasoning, and API-key or SigV4 auth."
+keywords:
+  - tanstack ai
+  - amazon bedrock
+  - aws
+  - bedrock
+  - converse api
+  - openai compatible
+  - chat completions
+  - responses api
+  - sigv4
+  - claude
+  - nova
+  - llama
+  - adapter
+---
+
+The Bedrock adapter connects TanStack AI to [Amazon Bedrock](https://aws.amazon.com/bedrock/) with three API paths:
+
+- **Converse** (default) — Bedrock's model-agnostic API built on `@aws-sdk/client-bedrock-runtime`. Reaches the broad chat catalog including Anthropic Claude, Amazon Nova, Meta Llama, Mistral, DeepSeek, Cohere, AI21, and OpenAI gpt-oss models.
+- **Chat Completions** (`api: 'chat'`) — Bedrock's OpenAI-compatible Chat Completions endpoint. Reaches open-weight models only (gpt-oss, DeepSeek V3.x, Gemma, Qwen, Mistral open models, GLM, etc.). Does NOT reach Claude, Nova, or Llama.
+- **Responses** (`api: 'responses'`) — Bedrock's OpenAI-compatible Responses API, mantle-only. Currently the OpenAI gpt-oss family.
+
+All paths support streaming and client-side tool calling. Reasoning output is
+surfaced when the model emits it (e.g. DeepSeek R1, gpt-oss); on the Converse
+path, request-side enablement of extended thinking (e.g. a Claude thinking
+budget) is not yet wired, so only models that reason by default surface it.
+
+## Installation
+
+```bash
+pnpm add @tanstack/ai-bedrock
+```
+
+No additional packages are required. SigV4 authentication is handled by `@aws-sdk/client-bedrock-runtime`, which is a direct dependency.
+
+## Quick Start (Converse — default)
+
+The default `bedrockText` call uses the Converse API and reaches the broad model catalog:
+
+```typescript ignore
+// ignore: iterating a chat() stream and reading chunk.type/chunk.delta needs the
+// AG-UI base event fields, which come from @ag-ui/core. It's a transitive dep of
+// @tanstack/ai, so kiira (resolving @tanstack/ai from source under the dist->src
+// heuristic) can't follow it and those base fields drop off StreamChunk. The code
+// is correct (the same pattern is used throughout ai-client); see
+// getting-started/quick-start-server for the type-checked consumption shape.
+import { bedrockText } from '@tanstack/ai-bedrock'
+import { chat } from '@tanstack/ai'
+
+const adapter = bedrockText('us.anthropic.claude-haiku-4-5-20251001-v1:0', {
+  region: 'us-east-1',
+})
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: 'user', content: 'What is the capital of France?' }],
+})) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') process.stdout.write(chunk.delta ?? '')
+}
+```
+
+Equivalent to passing `{ api: 'converse' }` explicitly. Returns a `bedrock-converse` adapter.
+
+## Authentication
+
+Bedrock supports two authentication modes.
+
+### API Key
+
+Bedrock issues API keys from the AWS Console. See the [Bedrock API keys guide](https://docs.aws.amazon.com/bedrock/latest/userguide/api-keys.html) for instructions.
+
+Set one of the following environment variables and the adapter picks it up automatically:
+
+```bash
+BEDROCK_API_KEY=your-bedrock-api-key
+# or the legacy name:
+AWS_BEARER_TOKEN_BEDROCK=your-bedrock-api-key
+```
+
+### SigV4 (AWS credential chain)
+
+For workloads using IAM roles, instance profiles, or `~/.aws/credentials`, set `auth: 'sigv4'` (or leave it as `'auto'` with no API key in the environment). SigV4 works out of the box via `@aws-sdk/client-bedrock-runtime` — no additional packages required.
+
+```bash
+AWS_ACCESS_KEY_ID=...
+AWS_SECRET_ACCESS_KEY=...
+AWS_SESSION_TOKEN=...   # optional, for temporary credentials
+```
+
+### Auth resolution order (`auth: 'auto'`, the default)
+
+1. Explicit `apiKey` passed to the factory
+2. `BEDROCK_API_KEY` environment variable
+3. `AWS_BEARER_TOKEN_BEDROCK` environment variable
+4. SigV4 via the standard AWS credential chain
+
+## Configuration
+
+`BedrockClientConfig` accepts the following options:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `api` | `'converse' \| 'chat' \| 'responses'` | `'converse'` | Bedrock API to use |
+| `region` | `string` | `'us-east-1'` | AWS region string (e.g. `'us-west-2'`) |
+| `auth` | `'apikey' \| 'sigv4' \| 'auto'` | `'auto'` | Authentication mode |
+| `apiKey` | `string` | — | Explicit API key (overrides env vars) |
+| `baseURL` | `string` | — | Override the computed base URL entirely |
+| `endpoint` | `'runtime' \| 'mantle'` | `'runtime'` | Bedrock endpoint to target (Chat Completions path only) |
+
+The `endpoint` option only applies when `api: 'chat'`. The `runtime` endpoint (`bedrock-runtime`) hosts the broad open-weight catalog; `mantle` is an alternative. The Responses API always targets mantle.
+
+## Converse API (default)
+
+`bedrockText(model)` or `bedrockText(model, { api: 'converse' })` returns a `bedrock-converse` adapter backed by `@aws-sdk/client-bedrock-runtime`. This is Bedrock's model-agnostic conversational API and is the recommended path for most use cases.
+
+**Model scope:** Anthropic Claude, Amazon Nova, Meta Llama, Mistral, DeepSeek, Cohere, AI21, OpenAI gpt-oss, and other models accessible in your account. See [Model availability](#model-availability) below.
+
+```typescript
+import { bedrockText } from '@tanstack/ai-bedrock'
+import { chat } from '@tanstack/ai'
+
+// Claude via Converse
+const claudeAdapter = bedrockText('us.anthropic.claude-haiku-4-5-20251001-v1:0', {
+  region: 'us-east-1',
+})
+
+// Amazon Nova via Converse
+const novaAdapter = bedrockText('us.amazon.nova-pro-v1:0', {
+  region: 'us-east-1',
+})
+
+// Meta Llama via Converse
+const llamaAdapter = bedrockText('us.meta.llama4-maverick-17b-instruct-v1:0', {
+  region: 'us-east-1',
+})
+```
+
+### Explicit API key (Converse)
+
+```typescript
+import { createBedrockText } from '@tanstack/ai-bedrock'
+
+const adapter = createBedrockText(
+  'us.anthropic.claude-haiku-4-5-20251001-v1:0',
+  'your-bedrock-api-key',
+  { region: 'us-west-2' },
+)
+```
+
+## Chat Completions API (`api: 'chat'`)
+
+Set `api: 'chat'` to use Bedrock's OpenAI-compatible Chat Completions endpoint. Returns a `bedrock` adapter.
+
+**Model scope:** Open-weight models only — gpt-oss, DeepSeek V3.x, Gemma, Qwen, Mistral open models, GLM, and similar. Claude, Nova, and Llama are NOT available on this endpoint. See the [AWS API compatibility matrix](https://docs.aws.amazon.com/bedrock/latest/userguide/models-api-compatibility.html) for the current list.
+
+```typescript ignore
+// ignore: see the Converse quick-start above — iterating a chat() stream and
+// reading chunk.type/chunk.delta needs @ag-ui/core base fields kiira can't
+// resolve transitively through @tanstack/ai source.
+import { bedrockText } from '@tanstack/ai-bedrock'
+import { chat } from '@tanstack/ai'
+
+const adapter = bedrockText('openai.gpt-oss-20b-1:0', {
+  region: 'us-east-1',
+  api: 'chat',
+})
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: 'user', content: 'What is the capital of France?' }],
+})) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') process.stdout.write(chunk.delta ?? '')
+}
+```
+
+## Responses API (`api: 'responses'`)
+
+Set `api: 'responses'` to use Bedrock's OpenAI-compatible Responses API. Returns a `bedrock-responses` adapter. This API is mantle-only.
+
+**Model scope:** Currently the OpenAI gpt-oss family. The Responses API is stateful — pass `previous_response_id` and `store` through `modelOptions` to continue a conversation server-side.
+
+```typescript ignore
+// ignore: see the Converse quick-start above — iterating a chat() stream and
+// reading chunk.type/chunk.delta needs @ag-ui/core base fields kiira can't
+// resolve transitively through @tanstack/ai source.
+import { bedrockText } from '@tanstack/ai-bedrock'
+import { chat } from '@tanstack/ai'
+
+const adapter = bedrockText('openai.gpt-oss-120b-1:0', {
+  region: 'us-east-1',
+  api: 'responses',
+})
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: 'user', content: 'Summarize the Bedrock pricing page.' }],
+})) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') process.stdout.write(chunk.delta ?? '')
+}
+```
+
+## Model Availability
+
+The adapter ships with a hand-seeded snapshot catalog (`src/model-catalog.generated.ts`) of confirmed model IDs. This catalog can be refreshed by the maintainer script `scripts/fetch-bedrock-models.ts`, which calls `ListFoundationModels` with AWS credentials.
+
+**Actual model availability depends on your AWS account's model access configuration and the region you are targeting.** Enable model access in the [Amazon Bedrock console](https://console.aws.amazon.com/bedrock/home#/modelaccess) before use.
+
+For the full list of models and which API endpoints they support, see the [AWS API compatibility matrix](https://docs.aws.amazon.com/bedrock/latest/userguide/models-api-compatibility.html).
+
+## Supported Capabilities
+
+- Streaming chat completions
+- Client-side tool calling
+- Reasoning output (extended thinking surfaced when the model emits it; request-side enablement on Converse is not yet wired)
+- Multimodal input (text, images, documents — model-dependent)
+- JSON schema / structured output
+
+## API Reference
+
+### `bedrockText(model, config?)`
+
+Creates a Bedrock adapter using environment-variable auth.
+
+- `model` — Model ID (e.g. `'us.anthropic.claude-haiku-4-5-20251001-v1:0'`)
+- `config.api` — `'converse'` (default), `'chat'`, or `'responses'`
+- `config.region` — AWS region string (default `'us-east-1'`)
+- `config.auth` — `'auto'` (default), `'apikey'`, or `'sigv4'`
+- `config.apiKey` — Explicit API key (overrides env vars)
+- `config.baseURL` — Override base URL
+- `config.endpoint` — `'runtime'` (default) or `'mantle'` (Chat Completions path only)
+
+Returns a chat adapter for use with `chat()` or `generate()`.
+
+| `api` value | Adapter name | Underlying SDK |
+|---|---|---|
+| `'converse'` (default) | `bedrock-converse` | `@aws-sdk/client-bedrock-runtime` |
+| `'chat'` | `bedrock` | `openai` (OpenAI-compatible) |
+| `'responses'` | `bedrock-responses` | `openai` (OpenAI-compatible) |
+
+### `createBedrockText(model, apiKey, config?)`
+
+Creates a Bedrock adapter with an explicit API key, bypassing the environment-variable lookup.
+
+## Next Steps
+
+- [Amazon Bedrock API keys](https://docs.aws.amazon.com/bedrock/latest/userguide/api-keys.html) — Create and manage API keys
+- [Amazon Bedrock model access](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) — Enable models in your account
+- [AWS API compatibility matrix](https://docs.aws.amazon.com/bedrock/latest/userguide/models-api-compatibility.html) — Which models work with which APIs
+- [Converse API reference](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_Converse.html) — Native Converse API docs
+- [Streaming Guide](/ai/chat/streaming) — Learn about streaming responses
+- [Tools Guide](/ai/tools/tools) — Learn about tool calling
diff --git a/mintlify/ai/adapters/claude-code.md b/mintlify/ai/adapters/claude-code.md
new file mode 100644
index 000000000..302b54ba7
--- /dev/null
+++ b/mintlify/ai/adapters/claude-code.md
@@ -0,0 +1,181 @@
+---
+title: Claude Code
+id: claude-code-adapter
+order: 11
+description: "Use Claude Code as a chat backend in TanStack AI — agent harness with local tool execution, stateful coding sessions, and tool bridging via @tanstack/ai-claude-code."
+keywords:
+  - tanstack ai
+  - claude code
+  - claude agent sdk
+  - anthropic
+  - harness
+  - agent
+  - coding agent
+  - adapter
+---
+
+The Claude Code adapter runs [Claude Code](https://docs.anthropic.com/en/docs/claude-code) (via the `@anthropic-ai/claude-agent-sdk`) as a chat backend. Unlike HTTP provider adapters, this is a **harness adapter**: Claude Code runs its own agent loop and executes its own tools — bash, file reads and edits, glob/grep search, web search — locally on your server. Each `chat()` call runs one full harness turn; the harness's tool activity streams back as already-resolved tool-call events your UI can render.
+
+> **Server-only.** The harness spawns the Claude Code runtime as a subprocess, so this adapter only works in a Node.js server environment — never in the browser. Treat it like giving Claude a shell on the machine it runs on, and configure permissions accordingly.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-claude-code
+```
+
+A runnable demo lives at [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — switch the harness (Claude Code, Codex, OpenCode, Grok Build) and sandbox provider per run, with session resume, the harness tool timeline, permission modes, and tool bridging, wired into a TanStack Start app.
+
+## Authentication
+
+The harness resolves credentials the same way Claude Code does:
+
+- `ANTHROPIC_API_KEY` in the server's environment (or the `apiKey` config option), or
+- an existing Claude subscription login on the machine (`claude login`).
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { claudeCodeText } from "@tanstack/ai-claude-code";
+
+const stream = chat({
+  adapter: claudeCodeText("claude-opus-4-8", {
+    cwd: "/path/to/project",
+    permissionMode: "acceptEdits",
+  }),
+  messages: [{ role: "user", content: "Fix the failing test in utils.test.ts" }],
+});
+```
+
+## Configuration
+
+| Option                       | Description                                                                                                                                       |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cwd`                        | Working directory for the harness session. Defaults to `process.cwd()`.                                                                            |
+| `permissionMode`             | Claude Code permission mode (`'default'`, `'acceptEdits'`, `'bypassPermissions'`, `'plan'`, `'dontAsk'`, `'auto'`). See the permissions note below. |
+| `allowedTools`               | Built-in tools the harness may use without prompting (e.g. `['Read', 'Grep', 'Bash(npm test:*)']`).                                                |
+| `disallowedTools`            | Built-in tools removed from the harness entirely.                                                                                                  |
+| `maxTurns`                   | Maximum harness-internal turns per run.                                                                                                            |
+| `systemPromptMode`           | `'append'` (default) keeps Claude Code's preset system prompt and appends your `systemPrompts`; `'replace'` sends yours as the entire prompt.       |
+| `mcpServers`                 | Extra MCP servers passed through to the harness untouched.                                                                                         |
+| `apiKey`                     | Anthropic API key for the harness subprocess.                                                                                                       |
+| `env`                        | Extra environment variables for the harness subprocess.                                                                                            |
+| `pathToClaudeCodeExecutable` | Use a specific Claude Code executable instead of the SDK's bundled one.                                                                             |
+| `streamPartials`             | Emit true token-level text deltas (default `true`).                                                                                                 |
+| `canUseTool`                 | Custom permission handler; replaces the adapter's default handler.                                                                                  |
+| `settingSources`             | Claude Code settings tiers to load. Default `['project']`: the `cwd`'s CLAUDE.md and project settings apply, but user-level config on the host (`~/.claude` plugins, hooks, skills) is ignored. Pass `['user', 'project', 'local']` for CLI-equivalent behavior, or `[]` for full isolation. |
+
+**Permissions on headless servers.** Without an explicit `permissionMode` or `canUseTool`, the adapter installs a safe default handler: bridged TanStack tools always run, and any built-in tool call that would normally prompt a human is denied with guidance instead of hanging the request. To let the harness edit files or run commands, set `permissionMode: 'acceptEdits'` / `'bypassPermissions'`, or enumerate `allowedTools`.
+
+## Stateful Sessions
+
+Claude Code sessions are stateful — the harness keeps the full working context (files read, commands run, conclusions reached) between turns. The adapter surfaces the session id of every run as a custom stream event named `claude-code.session-id`; thread it back via `modelOptions.sessionId` to resume the session. When resuming, only the latest user message is sent — the harness already holds the prior context.
+
+Server endpoint:
+
+```typescript
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from "@tanstack/ai";
+import { claudeCodeText } from "@tanstack/ai-claude-code";
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request);
+
+  // Extra fields the client puts in the connection `body` arrive here.
+  const sessionId =
+    typeof params.forwardedProps.sessionId === "string"
+      ? params.forwardedProps.sessionId
+      : undefined;
+
+  const stream = chat({
+    adapter: claudeCodeText("claude-opus-4-8", {
+      cwd: "/path/to/project",
+      permissionMode: "acceptEdits",
+    }),
+    messages: params.messages,
+    modelOptions: { sessionId },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Client (React) — capture the session id from the custom event and send it back on subsequent requests:
+
+```typescript
+import { useState } from "react";
+import { useChat } from "@tanstack/ai-react";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+function CodingAssistant() {
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat", () => ({
+      body: { sessionId },
+    })),
+    onCustomEvent: (name, value) => {
+      if (
+        name === "claude-code.session-id" &&
+        typeof value === "object" &&
+        value !== null &&
+        "sessionId" in value &&
+        typeof value.sessionId === "string"
+      ) {
+        setSessionId(value.sessionId);
+      }
+    },
+  });
+
+  // ... render messages; harness tool activity (Bash, Edit, Read, ...)
+  // arrives as regular tool-call parts with their results attached.
+}
+```
+
+Sessions are stored on the machine that ran them (`~/.claude/projects/`), so resuming only works on the same server instance. Pass `modelOptions: { forkSession: true }` alongside `sessionId` to branch a session instead of continuing it.
+
+## Tools
+
+Two kinds of tools flow through this adapter:
+
+1. **Built-in harness tools** (`Bash`, `Read`, `Write`, `Edit`, `Glob`, `Grep`, `WebSearch`, ...) are executed by Claude Code itself. Their activity streams back as tool-call events with results already attached, so `useChat` UIs render them with no extra wiring — but your code never executes them.
+
+2. **Your TanStack tools** are bridged *into* the harness as an in-process MCP server. Define them as usual with `toolDefinition().server()`; the model sees them as `mcp__tanstack__<name>` and the adapter strips the prefix on the way back out, so events match the names you registered.
+
+```typescript
+import { z } from "zod";
+import { chat, toolDefinition } from "@tanstack/ai";
+import { claudeCodeText } from "@tanstack/ai-claude-code";
+
+const lookupTicket = toolDefinition({
+  name: "lookup_ticket",
+  description: "Look up an issue ticket by id",
+  inputSchema: z.object({ ticketId: z.string() }),
+}).server(async ({ ticketId }) => {
+  return { ticketId, status: "open", title: "Crash on startup" };
+});
+
+const stream = chat({
+  adapter: claudeCodeText("claude-opus-4-8"),
+  messages: [{ role: "user", content: "What's the status of ticket T-123?" }],
+  tools: [lookupTicket],
+});
+```
+
+**Client-side and approval-gated tools are not supported.** The harness executes tools inside a live subprocess, which cannot pause across HTTP requests to wait for a browser round-trip or a human approval. Passing a tool without a server `execute()` implementation — or one marked `needsApproval` — fails fast with a descriptive error. Run those tools outside the harness with a regular provider adapter.
+
+## Structured Output
+
+`structuredOutput()` uses the harness's native JSON-schema output format in a one-shot run (single turn, no tools). It works for finalization after a chat, but a plain provider adapter (e.g. `@tanstack/ai-anthropic`) is the better choice when structured extraction is the primary job — it's faster and doesn't spawn a subprocess.
+
+## Limitations
+
+- **Server-only (Node).** The harness spawns a subprocess; Windows support is untested.
+- **The harness owns the agent loop.** TanStack's agent-loop strategies and per-iteration middleware don't apply inside a harness turn; `maxTurns` is the equivalent control.
+- **No sampling controls.** `temperature`-style options don't exist here.
+- **Sessions are machine-local.** Resume requires hitting the same server instance.
+- **Cold starts.** Each call spawns a harness turn; expect higher first-token latency than HTTP adapters.
diff --git a/mintlify/ai/adapters/codex.md b/mintlify/ai/adapters/codex.md
new file mode 100644
index 000000000..c84ff31e2
--- /dev/null
+++ b/mintlify/ai/adapters/codex.md
@@ -0,0 +1,182 @@
+---
+title: Codex
+id: codex-adapter
+order: 12
+description: "Use OpenAI Codex as a chat backend in TanStack AI — agent harness with local tool execution, stateful coding sessions, and tool bridging via @tanstack/ai-codex."
+keywords:
+  - tanstack ai
+  - codex
+  - codex sdk
+  - openai
+  - harness
+  - agent
+  - coding agent
+  - adapter
+---
+
+The Codex adapter runs [OpenAI Codex](https://developers.openai.com/codex) (via the `@openai/codex-sdk`) as a chat backend. Unlike HTTP provider adapters, this is a **harness adapter**: Codex runs its own agent loop and executes its own tools — shell commands, file changes, web search — locally on your server, inside its sandbox. Each `chat()` call runs one full harness turn; the harness's tool activity streams back as already-resolved tool-call events your UI can render.
+
+> **Server-only.** The harness spawns the Codex runtime (bundled with the SDK) as a subprocess, so this adapter only works in a Node.js server environment — never in the browser. The sandbox mode is the safety boundary; configure it deliberately.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-codex
+```
+
+A runnable demo lives at [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — switch the harness (Claude Code, Codex, OpenCode, Grok Build) and sandbox provider per run, with session resume, the harness tool timeline, sandbox modes, and tool bridging, wired into a TanStack Start app.
+
+## Authentication
+
+The harness resolves credentials the same way the Codex CLI does:
+
+- the `apiKey` config option (exported to the subprocess as `CODEX_API_KEY`; usage-based billing), or
+- an existing ChatGPT login on the machine (`codex login`).
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { codexText } from "@tanstack/ai-codex";
+
+const stream = chat({
+  adapter: codexText("gpt-5.1-codex", {
+    cwd: "/path/to/project",
+    sandboxMode: "workspace-write",
+  }),
+  messages: [{ role: "user", content: "Fix the failing test in utils.test.ts" }],
+});
+```
+
+## Configuration
+
+| Option                 | Description                                                                                                                                  |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cwd`                  | Working directory for the harness session. Defaults to `process.cwd()`.                                                                       |
+| `sandboxMode`          | Codex sandbox: `'read-only'` (harness default), `'workspace-write'`, or `'danger-full-access'`. This is the safety boundary on a server.       |
+| `approvalPolicy`       | Codex approval policy. Defaults to `'never'` — headless runs have no approval UI, so anything else can stall a turn.                           |
+| `modelReasoningEffort` | `'minimal'` \| `'low'` \| `'medium'` \| `'high'` \| `'xhigh'`.                                                                                 |
+| `skipGitRepoCheck`     | Skip the harness's git-repo safety check. Defaults to `true` (server adapters routinely point at scratch directories).                         |
+| `networkAccessEnabled` | Allow network access inside the `workspace-write` sandbox.                                                                                     |
+| `webSearchMode`        | `'disabled'` \| `'cached'` \| `'live'`.                                                                                                        |
+| `additionalDirectories`| Extra writable directories beyond `cwd`.                                                                                                       |
+| `apiKey`               | OpenAI API key for the harness subprocess.                                                                                                     |
+| `baseUrl`              | Override the Codex backend base URL.                                                                                                           |
+| `codexPathOverride`    | Use a specific codex executable instead of the SDK's bundled binary.                                                                           |
+| `env`                  | Environment variables for the subprocess. When set, `process.env` is **not** inherited (Codex SDK semantics).                                  |
+| `config`               | Extra `--config key=value` overrides passed to the Codex CLI (e.g. additional `mcp_servers` entries).                                          |
+
+Per-call overrides — `sessionId`, `sandboxMode`, `approvalPolicy`, `modelReasoningEffort`, `workingDirectory`, `skipGitRepoCheck` — go through `modelOptions`.
+
+## Stateful Sessions
+
+Codex threads are stateful — the harness keeps the full working context (files read, commands run, conclusions reached) between turns. The adapter surfaces the thread id of every fresh run as a custom stream event named `codex.session-id`; thread it back via `modelOptions.sessionId` to resume. When resuming, only the latest user message is sent — the harness already holds the prior context.
+
+Server endpoint:
+
+```typescript
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from "@tanstack/ai";
+import { codexText } from "@tanstack/ai-codex";
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request);
+
+  // Extra fields the client puts in the connection `body` arrive here.
+  const sessionId =
+    typeof params.forwardedProps.sessionId === "string"
+      ? params.forwardedProps.sessionId
+      : undefined;
+
+  const stream = chat({
+    adapter: codexText("gpt-5.1-codex", {
+      cwd: "/path/to/project",
+      sandboxMode: "workspace-write",
+    }),
+    messages: params.messages,
+    modelOptions: { sessionId },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Client (React) — capture the session id from the custom event and send it back on subsequent requests:
+
+```typescript
+import { useState } from "react";
+import { useChat } from "@tanstack/ai-react";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+function CodingAssistant() {
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat", () => ({
+      body: { sessionId },
+    })),
+    onCustomEvent: (name, value) => {
+      if (
+        name === "codex.session-id" &&
+        typeof value === "object" &&
+        value !== null &&
+        "sessionId" in value &&
+        typeof value.sessionId === "string"
+      ) {
+        setSessionId(value.sessionId);
+      }
+    },
+  });
+
+  // ... render messages; harness tool activity (command_execution,
+  // file_change, ...) arrives as regular tool-call parts with results.
+}
+```
+
+Sessions are stored on the machine that ran them (`~/.codex/sessions/`), so resuming only works on the same server instance.
+
+## Tools
+
+Two kinds of tools flow through this adapter:
+
+1. **Built-in harness tools** are executed by Codex itself and stream back as tool-call events with results already attached: `command_execution` (shell), `file_change` (patches), `web_search`, and `todo_list` (the agent's running plan). Your code never executes them.
+
+2. **Your TanStack tools** are bridged *into* the harness: the adapter starts a short-lived Streamable-HTTP MCP server on `127.0.0.1` for the duration of the turn and points Codex at it. Define tools as usual with `toolDefinition().server()`; tool-call events come back under the names you registered.
+
+```typescript
+import { z } from "zod";
+import { chat, toolDefinition } from "@tanstack/ai";
+import { codexText } from "@tanstack/ai-codex";
+
+const lookupTicket = toolDefinition({
+  name: "lookup_ticket",
+  description: "Look up an issue ticket by id",
+  inputSchema: z.object({ ticketId: z.string() }),
+}).server(async ({ ticketId }) => {
+  return { ticketId, status: "open", title: "Crash on startup" };
+});
+
+const stream = chat({
+  adapter: codexText("gpt-5.1-codex"),
+  messages: [{ role: "user", content: "What's the status of ticket T-123?" }],
+  tools: [lookupTicket],
+});
+```
+
+**Client-side and approval-gated tools are not supported.** The harness executes tools inside a live subprocess, which cannot pause across HTTP requests to wait for a browser round-trip or a human approval. Passing a tool without a server `execute()` implementation — or one marked `needsApproval` — fails fast with a descriptive error. Run those tools outside the harness with a regular provider adapter.
+
+## Structured Output
+
+`structuredOutput()` uses Codex's native `outputSchema` support in a fresh, read-only, one-shot thread whose final message is a JSON string conforming to your schema. It works for finalization after a chat, but a plain provider adapter (e.g. `@tanstack/ai-openai`) is the better choice when structured extraction is the primary job — it's faster and doesn't spawn a subprocess.
+
+## Limitations
+
+- **No token-level text streaming.** The Codex SDK reports assistant text and reasoning only as completed items, so text arrives message-at-a-time. Tool activity (commands starting/finishing) still streams live, which keeps the UI feeling alive during long turns.
+- **Server-only (Node).** The harness spawns a subprocess.
+- **The harness owns the agent loop.** TanStack's agent-loop strategies and per-iteration middleware don't apply inside a harness turn.
+- **No sampling controls.** `temperature`-style options don't exist here.
+- **Sessions are machine-local.** Resume requires hitting the same server instance.
+- **Cold starts.** Each call spawns a harness turn; expect higher first-token latency than HTTP adapters.
diff --git a/mintlify/ai/adapters/elevenlabs.md b/mintlify/ai/adapters/elevenlabs.md
new file mode 100644
index 000000000..739d12038
--- /dev/null
+++ b/mintlify/ai/adapters/elevenlabs.md
@@ -0,0 +1,375 @@
+---
+title: ElevenLabs
+id: elevenlabs-adapter
+order: 9
+description: "Build realtime voice-to-voice conversational AI with ElevenLabs agents in TanStack AI via the @tanstack/ai-elevenlabs adapter."
+keywords:
+  - tanstack ai
+  - elevenlabs
+  - realtime voice ai
+  - conversational ai
+  - voice chat
+  - voice agents
+  - adapter
+---
+
+The ElevenLabs adapter is **voice-focused**. It exposes four capabilities:
+
+- **Realtime voice agents** (`elevenlabsRealtime` / `elevenlabsRealtimeToken`) — full-duplex voice-to-voice conversations powered by ElevenLabs Conversational AI agents.
+- **Text-to-speech** (`elevenlabsSpeech`) — one-shot speech generation via `generateSpeech()`.
+- **Music & sound effects** (`elevenlabsAudio`) — one-shot audio generation via `generateAudio()`.
+- **Transcription** (`elevenlabsTranscription`) — speech-to-text via `generateTranscription()`.
+
+It does not support text `chat()` or `summarize()` — use OpenAI, Anthropic, or Gemini for those.
+
+The realtime adapter uses an **agent-based architecture** where you configure your conversational AI agent in the [ElevenLabs dashboard](https://elevenlabs.io/) (voice, personality, knowledge base, tools) and then connect to it at runtime. The adapter wraps the `@elevenlabs/client` SDK for seamless integration with `useRealtimeChat` and `RealtimeClient`.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-elevenlabs
+```
+
+Peer dependencies:
+
+```bash
+npm install @tanstack/ai @tanstack/ai-client
+```
+
+## Server Setup
+
+The server generates a **signed WebSocket URL** so your API key never reaches the client. The signed URL is valid for 30 minutes.
+
+```typescript group=elevenlabs-1
+import { realtimeToken } from '@tanstack/ai'
+import { elevenlabsRealtimeToken } from '@tanstack/ai-elevenlabs'
+
+// In your API route (Express, Hono, TanStack Start, etc.)
+export async function POST() {
+  const token = await realtimeToken({
+    adapter: elevenlabsRealtimeToken({
+      agentId: process.env.ELEVENLABS_AGENT_ID!,
+    }),
+  })
+
+  return Response.json(token)
+}
+```
+
+### With Overrides
+
+You can override agent settings at token generation time without changing your dashboard configuration:
+
+```typescript group=elevenlabs-1
+const token = await realtimeToken({
+  adapter: elevenlabsRealtimeToken({
+    agentId: process.env.ELEVENLABS_AGENT_ID!,
+    overrides: {
+      voiceId: 'custom-voice-id',
+      systemPrompt: 'You are a helpful voice assistant.',
+      firstMessage: 'Hello! How can I help you today?',
+      language: 'en',
+    },
+  }),
+})
+```
+
+## Client Setup
+
+### React (useRealtimeChat)
+
+```tsx
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+
+function VoiceChat() {
+  const {
+    status,
+    mode,
+    messages,
+    connect,
+    disconnect,
+    pendingUserTranscript,
+    pendingAssistantTranscript,
+    inputLevel,
+    outputLevel,
+  } = useRealtimeChat({
+    getToken: () =>
+      fetch('/api/realtime-token', { method: 'POST' }).then((r) => r.json()),
+    adapter: elevenlabsRealtime(),
+  })
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      <p>Mode: {mode}</p>
+      <button onClick={status === 'idle' ? connect : disconnect}>
+        {status === 'idle' ? 'Start Conversation' : 'End Conversation'}
+      </button>
+      {pendingUserTranscript && <p>You: {pendingUserTranscript}...</p>}
+      {pendingAssistantTranscript && (
+        <p>AI: {pendingAssistantTranscript}...</p>
+      )}
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          <strong>{msg.role}:</strong>
+          {msg.parts.map((part, i) => (
+            <span key={i}>
+              {part.type === 'text' ? part.content : null}
+              {part.type === 'audio' ? part.transcript : null}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+### Non-React (RealtimeClient)
+
+```typescript
+import { RealtimeClient } from '@tanstack/ai-client'
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+
+const client = new RealtimeClient({
+  getToken: () =>
+    fetch('/api/realtime-token', { method: 'POST' }).then((r) => r.json()),
+  adapter: elevenlabsRealtime(),
+  onMessage: (message) => {
+    console.log(`${message.role}:`, message.parts)
+  },
+  onStatusChange: (status) => {
+    console.log('Status:', status)
+  },
+  onModeChange: (mode) => {
+    console.log('Mode:', mode)
+  },
+})
+
+await client.connect()
+```
+
+## Client Tools
+
+ElevenLabs supports client-side tools that execute in the browser. Define tools using the standard `toolDefinition()` API:
+
+```typescript
+import { toolDefinition } from '@tanstack/ai'
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+import { z } from 'zod'
+
+const getWeatherDef = toolDefinition({
+  name: 'getWeather',
+  description: 'Get weather for a location',
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+  }),
+})
+
+const getWeather = getWeatherDef.client(async ({ location }) => {
+  const res = await fetch(`/api/weather?location=${location}`)
+  return res.json()
+})
+
+// Pass tools to the hook
+const chat = useRealtimeChat({
+  getToken: () =>
+    fetch('/api/realtime-token', { method: 'POST' }).then((r) => r.json()),
+  adapter: elevenlabsRealtime(),
+  tools: [getWeather],
+})
+```
+
+Tool results are automatically serialized to strings and returned to the ElevenLabs agent. The adapter converts TanStack tool definitions into the `@elevenlabs/client` clientTools format internally.
+
+## Configuration
+
+### `elevenlabsRealtimeToken` Options
+
+Used on the **server** to generate a signed WebSocket URL.
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `agentId` | `string` | No\* | Agent ID configured in the ElevenLabs dashboard. \*Falls back to `ELEVENLABS_AGENT_ID`; required only if that env var is unset |
+| `overrides.voiceId` | `string` | No | Custom voice ID to override the agent's default voice |
+| `overrides.systemPrompt` | `string` | No | Custom system prompt to override the agent's default |
+| `overrides.firstMessage` | `string` | No | First message the agent speaks when the session starts |
+| `overrides.language` | `string` | No | Language code (e.g., `'en'`, `'es'`, `'fr'`) |
+
+### `elevenlabsRealtime` Options
+
+Used on the **client** to establish the connection.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `connectionMode` | `'websocket' \| 'webrtc'` | auto-detect | Transport protocol for the connection |
+| `debug` | `boolean \| DebugConfig` | `false` | Enable debug logging — pass `true` for all categories, or a `DebugConfig` to select categories/sink |
+
+## Differences from OpenAI Realtime
+
+ElevenLabs and OpenAI take different approaches to realtime voice:
+
+| | ElevenLabs | OpenAI |
+|---|---|---|
+| **Configuration** | Agent-based. Configure voice, personality, and knowledge in the ElevenLabs dashboard or via `overrides` at token time. | Session-based. Configure `instructions`, `voice`, `temperature`, etc. per session via `useRealtimeChat` options. |
+| **Token type** | Signed WebSocket URL (valid 30 minutes) | Ephemeral API token (valid ~10 minutes) |
+| **Transport** | WebSocket (default) or WebRTC | WebRTC |
+| **Audio handling** | `@elevenlabs/client` SDK manages audio capture and playback automatically | TanStack AI manages WebRTC peer connection and audio tracks |
+| **VAD** | Handled by ElevenLabs server-side | Supports `server`, `semantic`, and `manual` modes |
+| **Runtime updates** | Session config is set at creation time and cannot be changed mid-session | Supports `updateSession()` for mid-session config changes |
+| **Image input** | Not supported | Supported via `sendImage()` |
+| **Time domain data** | Not available from the SDK | Available for waveform visualizations |
+
+## Audio Visualization
+
+The ElevenLabs adapter provides audio visualization data through the same interface as other realtime adapters:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+
+const {
+  inputLevel, // 0-1 normalized microphone volume
+  outputLevel, // 0-1 normalized speaker volume
+  getInputFrequencyData, // Uint8Array frequency spectrum
+  getOutputFrequencyData,
+} = useRealtimeChat({
+  getToken: () =>
+    fetch('/api/realtime-token', { method: 'POST' }).then((r) => r.json()),
+  adapter: elevenlabsRealtime(),
+})
+```
+
+**Note:** ElevenLabs provides volume levels and frequency data but does not expose time-domain data. The `getInputTimeDomainData()` and `getOutputTimeDomainData()` methods return static placeholder arrays. The default audio sample rate is 16kHz.
+
+## Environment Variables
+
+Set these in your server environment:
+
+```bash
+ELEVENLABS_API_KEY=your-elevenlabs-api-key
+ELEVENLABS_AGENT_ID=your-agent-id
+```
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `ELEVENLABS_API_KEY` | Yes | Your ElevenLabs API key, used server-side for generating signed URLs |
+| `ELEVENLABS_AGENT_ID` | No | Default agent ID. Can also be passed directly to `elevenlabsRealtimeToken()` |
+
+Get your API key from the [ElevenLabs dashboard](https://elevenlabs.io/). Create and configure agents in the **Conversational AI** section of the dashboard.
+
+## Text-to-Speech
+
+For one-shot speech generation (not realtime), use `elevenlabsSpeech` with `generateSpeech()`:
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { elevenlabsSpeech } from "@tanstack/ai-elevenlabs";
+
+const result = await generateSpeech({
+  adapter: elevenlabsSpeech("eleven_v3"),
+  text: "Hello from ElevenLabs!",
+  voice: "Rachel",
+  format: "mp3",
+});
+
+console.log(result.audio); // Base64-encoded audio
+```
+
+## Music & Sound Effects
+
+`elevenlabsAudio` covers both music generation and sound effects depending on the model:
+
+```typescript
+import { generateAudio } from "@tanstack/ai";
+import { elevenlabsAudio } from "@tanstack/ai-elevenlabs";
+
+// Music generation
+const music = await generateAudio({
+  adapter: elevenlabsAudio("music_v1"),
+  prompt: "An upbeat synthwave track for a product launch",
+});
+
+// Sound effects
+const sfx = await generateAudio({
+  adapter: elevenlabsAudio("eleven_text_to_sound_v2"),
+  prompt: "A glass shattering on concrete",
+});
+```
+
+## Transcription
+
+Transcribe audio with `elevenlabsTranscription`:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { elevenlabsTranscription } from "@tanstack/ai-elevenlabs";
+import { audioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: elevenlabsTranscription("scribe_v1"),
+  audio: audioFile,
+});
+
+console.log(result.text);
+```
+
+## API Reference
+
+### `elevenlabsRealtimeToken(options)`
+
+Creates an ElevenLabs realtime token adapter for server-side use with `realtimeToken()`.
+
+**Parameters:**
+
+- `options.agentId` - Agent ID from the ElevenLabs dashboard
+- `options.overrides?.voiceId` - Custom voice ID
+- `options.overrides?.systemPrompt` - Custom system prompt
+- `options.overrides?.firstMessage` - First message the agent speaks
+- `options.overrides?.language` - Language code
+
+**Returns:** A `RealtimeTokenAdapter` for use with `realtimeToken()`.
+
+### `elevenlabsRealtime(options?)`
+
+Creates an ElevenLabs realtime client adapter for use with `useRealtimeChat` or `RealtimeClient`.
+
+**Parameters:**
+
+- `options.connectionMode?` - `'websocket'` or `'webrtc'` (default: auto-detect)
+- `options.debug?` - Enable debug logging
+
+**Returns:** A `RealtimeAdapter` for use with `useRealtimeChat()` or `RealtimeClient`.
+
+### `elevenlabsSpeech(model, config?)` / `createElevenLabsSpeech(model, apiKey, config?)`
+
+Creates an ElevenLabs text-to-speech adapter for use with `generateSpeech()`.
+
+### `elevenlabsAudio(model, config?)` / `createElevenLabsAudio(model, apiKey, config?)`
+
+Creates an ElevenLabs audio adapter that covers both music generation and sound effects (selected via the model id) for use with `generateAudio()`.
+
+### `elevenlabsTranscription(model, config?)` / `createElevenLabsTranscription(model, apiKey, config?)`
+
+Creates an ElevenLabs transcription adapter for use with `generateTranscription()`.
+
+## Limitations
+
+- **No text chat support** -- Use OpenAI, Anthropic, Gemini, or another text adapter for `chat()`.
+- **No summarization** -- Use a text adapter for `summarize()`.
+- **No image input** (realtime) -- ElevenLabs realtime does not support sending images during a conversation.
+- **No runtime session updates** (realtime) -- Session configuration is fixed at connection time.
+- **No time-domain audio data** (realtime) -- Frequency data and volume levels are available, but waveform data is not.
+- **Agent required** (realtime) -- You must create and configure an agent in the ElevenLabs dashboard before using the realtime adapter.
+
+## Next Steps
+
+- [Realtime Voice Chat Guide](/ai/media/realtime-chat) - Complete guide to building realtime voice applications
+- [OpenAI Adapter](/ai/adapters/openai) - Alternative realtime voice provider with WebRTC
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
diff --git a/mintlify/ai/adapters/fal.md b/mintlify/ai/adapters/fal.md
new file mode 100644
index 000000000..6fab4b262
--- /dev/null
+++ b/mintlify/ai/adapters/fal.md
@@ -0,0 +1,494 @@
+---
+title: fal.ai
+id: fal-adapter
+description: "Generate images and videos with 600+ models on fal.ai using TanStack AI — Nano Banana Pro, FLUX, and more via the @tanstack/ai-fal adapter."
+keywords:
+  - tanstack ai
+  - fal.ai
+  - fal
+  - image generation
+  - video generation
+  - flux
+  - nano banana
+  - adapter
+---
+
+The fal.ai adapter provides access to 600+ models on the fal.ai platform for image, video, audio, speech, and transcription. Unlike text-focused adapters, the fal adapter is **media-focused** — it supports `generateImage()`, `generateVideo()`, `generateAudio()`, `generateSpeech()`, and `generateTranscription()` but does not support `chat()` or tools.
+
+For a full working example, see the [fal.ai example app](https://github.com/TanStack/ai/tree/main/examples/ts-react-media).
+
+## Installation
+
+```bash
+npm install @tanstack/ai-fal
+```
+
+## Type Safety with String Literals
+
+The fal adapter provides full type safety when you pass the model ID as a **string literal**. This gives you autocomplete for `size` and `modelOptions` specific to that model. Always use string literals — not variables — when creating adapters:
+
+```typescript
+import { falImage } from "@tanstack/ai-fal";
+
+// Good — full type safety and autocomplete
+const adapter = falImage("fal-ai/z-image/turbo");
+```
+
+```typescript
+import { falImage } from "@tanstack/ai-fal";
+
+// Bad — no type inference for model-specific options
+const modelId = "fal-ai/z-image/turbo";
+const adapter = falImage(modelId);
+```
+
+You can also pass any string for new models that fal.ai hasn't provided types for yet — you just won't get type safety on those endpoints.
+
+## Basic Usage
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { falImage } from "@tanstack/ai-fal";
+
+const result = await generateImage({
+  adapter: falImage("fal-ai/flux/dev"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+});
+
+console.log(result.images);
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { falImage } from "@tanstack/ai-fal";
+
+const adapter = falImage("fal-ai/flux/dev", {
+  apiKey: process.env.FAL_KEY!,
+});
+
+const result = await generateImage({
+  adapter,
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+});
+```
+
+## Configuration
+
+```typescript
+import { falImage, type FalClientConfig } from "@tanstack/ai-fal";
+
+// Direct API key
+const adapter = falImage("fal-ai/flux/dev", {
+  apiKey: "your-api-key",
+});
+
+// Using a proxy URL (for client-side usage)
+const proxiedAdapter = falImage("fal-ai/flux/dev", {
+  apiKey: "your-api-key",
+  proxyUrl: "https://your-server.com/api/fal/proxy",
+});
+```
+
+## Example: Image Generation
+
+From the [fal.ai example app](https://github.com/TanStack/ai/tree/main/examples/ts-react-media):
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { falImage } from "@tanstack/ai-fal";
+
+// Use string literals for the model to get full type safety
+const result = await generateImage({
+  adapter: falImage("fal-ai/nano-banana-pro"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+  size: "16:9_4K",
+  modelOptions: {
+    output_format: "jpeg",
+  },
+});
+```
+
+## Example: Image with Model Options
+
+Each fal.ai model has its own type-safe options. The adapter uses fal.ai's types to provide autocomplete and type checking for model-specific parameters. There are 1000s of combinations. If you provide the proper model endpoint id as as string literal, you will then only be able to provide `size` and `modelOptions` that the model supports.
+
+_IMPORTANT_: It is possible to pass strings and new endpoint ids that Fal has not provided types for. You just won't get type safety on those endpoints. You'll find this happens for very new models.
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { falImage } from "@tanstack/ai-fal";
+
+// Model-specific options are type-safe
+const result = await generateImage({
+  adapter: falImage("fal-ai/z-image/turbo"),
+  prompt: "A serene mountain landscape",
+  numberOfImages: 1,
+  size: "landscape_16_9",
+  modelOptions: {
+    acceleration: "high",
+    enable_prompt_expansion: true,
+  },
+});
+```
+
+## Image Size Options
+
+The fal adapter supports a flexible `size` paramater that maps either to `image_size` or to `aspect_ratio` and `resolution` parameters:
+
+|  | `size` | Maps To |
+|--------|---------|---------|
+| named | `"landscape_16_9"` | `image_size: "landscape_16_9"` |
+| width x height (OpenAI) | `"1536x1024"` | | `image_size: "1536x1024"` |
+| aspect ratio & resolution | `"16:9_4K"` | `aspect_ratio: "16:9"`, `resolution: "4K"` |
+| aspect ratio only | `"16:9"` | `aspect_ratio: "16:9"` |
+
+```typescript ignore
+// Aspect ratio only
+size: "16:9"
+
+// Aspect ratio with resolution
+size: "16:9_4K"
+
+// Named size (model-specific)
+size: "landscape_16_9"
+```
+
+## Video Generation (Experimental)
+
+> **Note:** Video generation is an experimental feature and may change in future releases. In particular, this version of the adapter does not map the duration paramater
+
+Video generation uses a queue-based workflow: submit a job, poll for status, then retrieve the video URL when complete.
+
+```typescript
+import { generateVideo, getVideoJobStatus } from "@tanstack/ai";
+import { falVideo } from "@tanstack/ai-fal";
+```
+
+## Example: Text-to-Video
+
+From the [fal.ai example app](https://github.com/TanStack/ai/tree/main/examples/ts-react-media):
+
+```typescript
+import { generateVideo, getVideoJobStatus } from "@tanstack/ai";
+import { falVideo } from "@tanstack/ai-fal";
+
+// 1. Submit the video generation job
+const adapter = falVideo("fal-ai/kling-video/v2.6/pro/text-to-video");
+
+const job = await generateVideo({
+  adapter,
+  prompt: "A timelapse of a flower blooming",
+  size: "16:9",
+  modelOptions: {
+    duration: "5",
+  },
+});
+
+// 2. Poll for status
+const status = await getVideoJobStatus({
+  adapter,
+  jobId: job.jobId,
+});
+
+console.log(status.status); // "pending" | "processing" | "completed"
+```
+
+## Example: Image-to-Video
+
+```typescript
+import { generateVideo } from "@tanstack/ai";
+import { falVideo } from "@tanstack/ai-fal";
+
+const job = await generateVideo({
+  adapter: falVideo("fal-ai/kling-video/v2.6/pro/image-to-video"),
+  prompt: "Animate this scene with gentle wind",
+  modelOptions: {
+    start_image_url: "https://example.com/image.jpg",
+    generate_audio: true,
+    duration: "5",
+  },
+});
+```
+
+## Text-to-Speech
+
+Text-to-speech uses `falSpeech()` with the `generateSpeech()` activity. The adapter fetches the generated audio from fal's CDN and returns it as base64-encoded data to match the `TTSResult` contract.
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { falSpeech } from "@tanstack/ai-fal";
+
+const result = await generateSpeech({
+  adapter: falSpeech("fal-ai/kokoro/american-english"),
+  text: "Hello from fal!",
+  voice: "af_heart",
+  speed: 1.0,
+});
+
+// result.audio is a base64-encoded string
+console.log(result.format); // e.g. "wav"
+console.log(result.contentType); // e.g. "audio/wav"
+```
+
+### Google Gemini 3.1 Flash TTS
+
+Google's newest TTS model (`fal-ai/gemini-3.1-flash-tts`) supports 80+ languages and introduces **granular audio tags** for expressive control — you can embed speaker tags and style cues directly in the text.
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { falSpeech } from "@tanstack/ai-fal";
+
+const result = await generateSpeech({
+  adapter: falSpeech("fal-ai/gemini-3.1-flash-tts"),
+  text: "[warm, enthusiastic] Welcome to TanStack AI! [pause] Let's build something great.",
+  voice: "Kore",
+});
+```
+
+> **Note:** This model is newer than `@fal-ai/client@1.9.1`'s type map, so `modelOptions` won't autocomplete. The call still works — the fal adapter accepts any model ID as a string. Type-safe autocomplete will land when fal's SDK types catch up.
+
+### ElevenLabs v3
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { falSpeech } from "@tanstack/ai-fal";
+
+const result = await generateSpeech({
+  adapter: falSpeech("fal-ai/elevenlabs/tts/eleven-v3"),
+  text: "Welcome to TanStack AI.",
+  modelOptions: {
+    voice: "Rachel",
+    stability: 0.5,
+  },
+});
+```
+
+## Transcription
+
+Speech-to-text uses `falTranscription()` with the `generateTranscription()` activity. The `audio` input accepts a URL string, `Blob`, `File`, or `ArrayBuffer` — `ArrayBuffer` is automatically wrapped in a `Blob` for upload.
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { falTranscription } from "@tanstack/ai-fal";
+
+const result = await generateTranscription({
+  adapter: falTranscription("fal-ai/whisper"),
+  audio: "https://example.com/recording.mp3",
+  language: "en",
+});
+
+console.log(result.text);
+console.log(result.language);
+
+// When the model returns word/segment timestamps, they're mapped to result.segments
+for (const segment of result.segments ?? []) {
+  console.log(`[${segment.start}s → ${segment.end}s] ${segment.text}`);
+}
+```
+
+## Audio Generation (Music & Sound Effects)
+
+Music and sound-effect generation uses `falAudio()` with the `generateAudio()` activity. Unlike TTS, the result is returned as a URL in `result.audio.url` (you can fetch it yourself if you need raw bytes).
+
+```typescript
+import { generateAudio } from "@tanstack/ai";
+import { falAudio } from "@tanstack/ai-fal";
+
+// Music generation with MiniMax Music 2.6 (latest)
+const music = await generateAudio({
+  adapter: falAudio("fal-ai/minimax-music/v2.6"),
+  prompt: "City Pop, 80s retro, groovy synth bass, warm female vocal, 104 BPM, nostalgic urban night",
+});
+
+console.log(music.audio.url);
+```
+
+```typescript
+import { generateAudio } from "@tanstack/ai";
+import { falAudio } from "@tanstack/ai-fal";
+
+// DiffRhythm with explicit lyrics
+const lyrical = await generateAudio({
+  adapter: falAudio("fal-ai/diffrhythm"),
+  prompt: "An upbeat electronic track with synths",
+  modelOptions: {
+    lyrics: "[verse]\nHello world\n[chorus]\nLa la la",
+  },
+});
+```
+
+```typescript
+import { generateAudio } from "@tanstack/ai";
+import { falAudio } from "@tanstack/ai-fal";
+
+// Sound effects
+const sfx = await generateAudio({
+  adapter: falAudio("fal-ai/elevenlabs/sound-effects/v2"),
+  prompt: "Thunderclap with rain",
+  duration: 5,
+});
+```
+
+## Popular Models
+
+### Image Models
+
+| Model | Description |
+|-------|-------------|
+| `fal-ai/nano-banana-pro` | Fast, high-quality image generation (4K) |
+| `fal-ai/flux-2/klein/9b` | Enhanced realism, crisp text generation |
+| `fal-ai/z-image/turbo` | Super fast 6B parameter model |
+| `xai/grok-imagine-image` | xAI highly aesthetic images with prompt enhancement |
+
+### Video Models
+
+| Model | Mode | Description |
+|-------|------|-------------|
+| `fal-ai/kling-video/v2.6/pro/text-to-video` | Text-to-Video | High-quality text-to-video |
+| `fal-ai/kling-video/v2.6/pro/image-to-video` | Image-to-Video | Animate images with Kling |
+| `fal-ai/veo3.1` | Text-to-Video | Google Veo text-to-video |
+| `fal-ai/veo3.1/image-to-video` | Image-to-Video | Google Veo image-to-video |
+| `xai/grok-imagine-video/text-to-video` | Text-to-Video | xAI video from text |
+| `xai/grok-imagine-video/image-to-video` | Image-to-Video | xAI animate images to video |
+| `fal-ai/ltx-2/text-to-video/fast` | Text-to-Video | Fast text-to-video |
+| `fal-ai/ltx-2/image-to-video/fast` | Image-to-Video | Fast image-to-video animation |
+
+### Text-to-Speech Models
+
+| Model | Description |
+|-------|-------------|
+| `fal-ai/gemini-3.1-flash-tts` | **New** — Google's flagship TTS with 80+ languages and expressive audio tags |
+| `fal-ai/elevenlabs/tts/eleven-v3` | ElevenLabs v3 expressive multi-voice TTS |
+| `fal-ai/elevenlabs/tts/turbo-v2.5` | Low-latency ElevenLabs TTS |
+| `fal-ai/minimax/speech-2.6-hd` | MiniMax HD speech synthesis |
+| `fal-ai/minimax/speech-2.6-turbo` | MiniMax low-latency variant |
+| `fal-ai/kokoro/american-english` | Kokoro multilingual TTS — also `british-english`, `french`, `spanish`, `italian`, `japanese`, `mandarin-chinese`, `hindi`, `brazilian-portuguese` |
+| `fal-ai/inworld-tts` | Inworld TTS-1.5 Max |
+| `fal-ai/chatterbox/text-to-speech/multilingual` | Chatterbox multilingual TTS |
+| `fal-ai/dia-tts` | Dia expressive dialogue TTS |
+| `fal-ai/orpheus-tts` | Orpheus open-source TTS |
+| `fal-ai/f5-tts` | F5-TTS voice cloning |
+| `fal-ai/vibevoice/7b` | VibeVoice 7B conversational TTS |
+
+### Transcription Models
+
+| Model | Description |
+|-------|-------------|
+| `fal-ai/whisper` | OpenAI Whisper on fal infra |
+| `fal-ai/wizper` | Faster-whisper variant with word-level timestamps |
+| `fal-ai/speech-to-text/turbo` | Turbo STT with diarization |
+| `fal-ai/elevenlabs/speech-to-text` | ElevenLabs STT |
+
+### Audio / Music Models
+
+| Model | Mode | Description |
+|-------|------|-------------|
+| `fal-ai/minimax-music/v2.6` | Music | **New** — MiniMax Music 2.6, full vocal + instrumental compositions from a prompt |
+| `fal-ai/minimax-music/v2.5` | Music | MiniMax Music 2.5 |
+| `fal-ai/minimax-music/v2` | Music | MiniMax Music v2 — supports `lyrics_prompt` |
+| `fal-ai/diffrhythm` | Music | DiffRhythm — prompt + lyrics |
+| `fal-ai/lyria2` | Music | Google Lyria 2 high-fidelity music |
+| `fal-ai/stable-audio-25/text-to-audio` | Music / Audio | Stability AI Stable Audio 2.5 |
+| `fal-ai/mmaudio-v2/text-to-audio` | Audio | MMAudio v2 text-to-audio |
+| `fal-ai/elevenlabs/sound-effects/v2` | SFX | ElevenLabs sound-effect generation |
+| `fal-ai/beatoven/sound-effect-generation` | SFX | Beatoven professional sound effects |
+| `fal-ai/thinksound` | Audio | Thinksound reasoning-based audio generation |
+
+> **Very new models** (e.g. `gemini-3.1-flash-tts`, `minimax-music/v2.6`, `beatoven/sound-effect-generation`) may not yet appear in `@fal-ai/client`'s type map — they still work as plain string model IDs, you just won't get autocomplete for their `modelOptions`.
+
+## Environment Variables
+
+Create an API key at [fal.ai](https://fal.ai) and set it in your environment:
+
+```bash
+FAL_KEY=your-fal-api-key
+```
+
+## API Reference
+
+### `falImage(model, config?)`
+
+Creates a fal.ai image adapter using the `FAL_KEY` environment variable or an explicit config.
+
+**Parameters:**
+
+- `model` - The fal.ai model ID (e.g., `"fal-ai/flux/dev"`)
+- `config.apiKey?` - Your fal.ai API key (falls back to `FAL_KEY` env var)
+- `config.proxyUrl?` - Proxy URL for client-side usage
+
+**Returns:** A `FalImageAdapter` instance for use with `generateImage()`.
+
+### `falVideo(model, config?)`
+
+Creates a fal.ai video adapter using the `FAL_KEY` environment variable or an explicit config.
+
+**Parameters:**
+
+- `model` - The fal.ai model ID (e.g., `"fal-ai/kling-video/v2.6/pro/text-to-video"`)
+- `config.apiKey?` - Your fal.ai API key (falls back to `FAL_KEY` env var)
+- `config.proxyUrl?` - Proxy URL for client-side usage
+
+**Returns:** A `FalVideoAdapter` instance for use with `generateVideo()` and `getVideoJobStatus()`.
+
+### `falSpeech(model, config?)`
+
+Creates a fal.ai text-to-speech adapter.
+
+**Parameters:**
+
+- `model` - The fal.ai TTS model ID (e.g., `"fal-ai/kokoro/american-english"`)
+- `config.apiKey?` - Your fal.ai API key (falls back to `FAL_KEY` env var)
+- `config.proxyUrl?` - Proxy URL for client-side usage
+
+**Returns:** A `FalSpeechAdapter` instance for use with `generateSpeech()`. The adapter fetches the generated audio URL from fal and returns it as base64 in `result.audio`.
+
+### `falTranscription(model, config?)`
+
+Creates a fal.ai transcription (speech-to-text) adapter.
+
+**Parameters:**
+
+- `model` - The fal.ai STT model ID (e.g., `"fal-ai/whisper"`)
+- `config.apiKey?` - Your fal.ai API key (falls back to `FAL_KEY` env var)
+- `config.proxyUrl?` - Proxy URL for client-side usage
+
+**Returns:** A `FalTranscriptionAdapter` instance for use with `generateTranscription()`.
+
+### `falAudio(model, config?)`
+
+Creates a fal.ai audio generation adapter (music and sound effects).
+
+**Parameters:**
+
+- `model` - The fal.ai audio model ID (e.g., `"fal-ai/diffrhythm"`, `"fal-ai/minimax-music/v2"`)
+- `config.apiKey?` - Your fal.ai API key (falls back to `FAL_KEY` env var)
+- `config.proxyUrl?` - Proxy URL for client-side usage
+
+**Returns:** A `FalAudioAdapter` instance for use with `generateAudio()`. The result contains a URL at `result.audio.url`.
+
+### `getFalApiKeyFromEnv()`
+
+Reads the `FAL_KEY` environment variable. Throws if not set.
+
+**Returns:** The API key string.
+
+### `configureFalClient(config?)`
+
+Configures the underlying `@fal-ai/client`. Called automatically by adapter constructors. Uses `proxyUrl` if provided, otherwise sets credentials from the API key.
+
+## Limitations
+
+- **No text/chat support** — Use OpenAI, Anthropic, Gemini, or another text adapter for `chat()`
+- **No tools support** — Tool definitions are not applicable to media generation
+- **No summarization** — Use a text adapter for `summarize()`
+- **Video is experimental** — The video generation API may change in future releases
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
diff --git a/mintlify/ai/adapters/gemini.md b/mintlify/ai/adapters/gemini.md
new file mode 100644
index 000000000..47865804c
--- /dev/null
+++ b/mintlify/ai/adapters/gemini.md
@@ -0,0 +1,746 @@
+---
+title: Google Gemini
+id: gemini-adapter
+order: 3
+description: "Use Google Gemini with TanStack AI — text, image generation via Imagen and Gemini native (NanoBanana), and experimental TTS via @tanstack/ai-gemini."
+keywords:
+  - tanstack ai
+  - gemini
+  - google gemini
+  - imagen
+  - nano banana
+  - image generation
+  - adapter
+  - google ai
+---
+
+The Google Gemini adapter provides access to Google's Gemini models, including text generation, image generation with both Imagen and Gemini native image models (NanoBanana), and experimental text-to-speech.
+
+For a full working example with image generation, see the [media generation example app](https://github.com/TanStack/ai/tree/main/examples/ts-react-media).
+
+## Installation
+
+```bash
+npm install @tanstack/ai-gemini
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createGeminiChat } from "@tanstack/ai-gemini";
+
+const adapter = createGeminiChat("gemini-3.1-pro-preview", process.env.GEMINI_API_KEY!, {
+  // ... your config options
+});
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createGeminiChat, type GeminiTextConfig } from "@tanstack/ai-gemini";
+
+const config: Omit<GeminiTextConfig, "apiKey"> = {
+  httpOptions: {
+    baseUrl: "https://generativelanguage.googleapis.com/v1beta", // Optional
+  },
+};
+
+const adapter = createGeminiChat("gemini-3.1-pro-preview", process.env.GEMINI_API_KEY!, config);
+```
+  
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: geminiText("gemini-3.1-pro-preview"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { z } from "zod";
+
+const getCalendarEventsDef = toolDefinition({
+  name: "get_calendar_events",
+  description: "Get calendar events for a date",
+  inputSchema: z.object({
+    date: z.string(),
+  }),
+});
+
+const getCalendarEvents = getCalendarEventsDef.server(async ({ date }) => {
+  // Fetch calendar events
+  return { events: [] };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: geminiText("gemini-3.1-pro-preview"),
+    messages,
+    tools: [getCalendarEvents],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Stateful Conversations — Interactions API (Experimental)
+
+Gemini's [Interactions API](https://ai.google.dev/gemini-api/docs/interactions) (currently in Beta) offers server-side conversation state — the Gemini equivalent of OpenAI's Responses API. Instead of replaying the full message history on every turn, you pass a `previous_interaction_id` and the server retains the transcript. This also improves cache hit rates for repeated prefixes.
+
+The `geminiTextInteractions` adapter routes through `client.interactions.create` and surfaces the server-assigned interaction id via an AG-UI `CUSTOM` event (`name: 'gemini.interactionId'`) emitted just before `RUN_FINISHED`, so you can chain turns.
+
+> **⚠️ Experimental.** Google marks the Interactions API as Beta and explicitly flags possible breaking changes until it reaches general availability. The adapter is exported from the `@tanstack/ai-gemini/experimental` subpath so the experimental status is load-bearing in your editor and bundle. Text output, function tools, and the built-in tools `google_search`, `code_execution`, `url_context`, `file_search`, and `computer_use` are supported. `google_search_retrieval`, `google_maps`, and `mcp_server` still throw on this adapter — use `geminiText()` for those or wait for follow-up work.
+
+### Basic Usage
+
+```typescript ignore
+import { chat } from "@tanstack/ai";
+import { geminiTextInteractions } from "@tanstack/ai-gemini/experimental";
+
+// Turn 1: introduce yourself, capture the interaction id.
+let interactionId: string | undefined;
+
+for await (const chunk of chat({
+  adapter: geminiTextInteractions("gemini-3.5-flash"),
+  messages: [{ role: "user", content: "Hi, my name is Amir." }],
+})) {
+  if (
+    chunk.type === "CUSTOM" &&
+    chunk.name === "gemini.interactionId" &&
+    chunk.value &&
+    typeof chunk.value === "object" &&
+    "interactionId" in chunk.value
+  ) {
+    interactionId = String(chunk.value.interactionId);
+  }
+}
+
+// Turn 2: only send the new turn's content — the server has the history.
+for await (const chunk of chat({
+  adapter: geminiTextInteractions("gemini-3.5-flash"),
+  messages: [{ role: "user", content: "What is my name?" }],
+  modelOptions: {
+    previous_interaction_id: interactionId,
+  },
+})) {
+  // ...stream "Your name is Amir." back to the client.
+}
+```
+
+### Wiring with `useChat` (React)
+
+The Interactions API is stateful and **does not accept multi-turn history without a `previous_interaction_id`** — if a chat client sends `[user, assistant, user]` to a fresh interaction the adapter throws `cannot send prior conversation history on a fresh interaction`. To make `useChat` work, persist the server-assigned id and send it back on the next turn:
+
+**Server route** (e.g. TanStack Start handler):
+
+```typescript
+import {
+  chat,
+  chatParamsFromRequestBody,
+  toServerSentEventsResponse,
+} from "@tanstack/ai";
+import { geminiTextInteractions } from "@tanstack/ai-gemini/experimental";
+
+export async function POST({ request }: { request: Request }) {
+  const params = await chatParamsFromRequestBody(await request.json());
+
+  // The client sends body.previousInteractionId; AG-UI maps `body` into
+  // `forwardedProps` on the wire.
+  const previousInteractionId =
+    typeof params.forwardedProps.previousInteractionId === "string"
+      ? params.forwardedProps.previousInteractionId
+      : undefined;
+
+  const stream = chat({
+    adapter: geminiTextInteractions("gemini-3.5-flash"),
+    messages: params.messages,
+    modelOptions: {
+      previous_interaction_id: previousInteractionId,
+      store: true, // required for chaining on the next turn
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+**React client**:
+
+```tsx
+import { useEffect, useMemo, useState } from "react";
+import { fetchServerSentEvents, useChat } from "@tanstack/ai-react";
+
+function GeminiChat() {
+  const [interactionId, setInteractionId] = useState<string | undefined>();
+
+  const body = useMemo(
+    () => (interactionId ? { previousInteractionId: interactionId } : {}),
+    [interactionId],
+  );
+
+  const { messages, setMessages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    body,
+    onCustomEvent: (eventType, data) => {
+      if (
+        eventType === "gemini.interactionId" &&
+        typeof data === "object" &&
+        data !== null &&
+        "interactionId" in data
+      ) {
+        setInteractionId(String(data.interactionId));
+      }
+    },
+  });
+
+  // Switching provider/model resets the server-side chain — drop the id
+  // AND the local message history together, otherwise the next turn
+  // ships multi-turn messages with no previous_interaction_id and the
+  // adapter errors out.
+  const [provider, setProvider] = useState("gemini-interactions");
+  useEffect(() => {
+    setInteractionId(undefined);
+    setMessages([]);
+  }, [provider]);
+
+  // ...render messages, call sendMessage(input)
+}
+```
+
+The full working example is in [`examples/ts-react-chat`](https://github.com/TanStack/ai/tree/main/examples/ts-react-chat) — see `src/routes/index.tsx` for the client and `src/routes/api.tanchat.ts` for the route.
+
+### How it differs from `geminiText`
+
+| Concern | `geminiText` | `geminiTextInteractions` |
+| --- | --- | --- |
+| Underlying endpoint | `models:generateContent` | `interactions:create` |
+| Conversation state | Stateless — send full history each turn | Stateful — server retains transcript via `previous_interaction_id` |
+| Provider options shape | camelCase (`stopSequences`, `responseModalities`, `safetySettings`) | snake_case (`generation_config`, `response_modalities`, `previous_interaction_id`) |
+| Built-in tools | `google_search`, `code_execution`, `url_context`, `file_search`, `google_maps`, `google_search_retrieval`, `computer_use` | `google_search`, `code_execution`, `url_context`, `file_search`, `computer_use` (only the first four stream `CUSTOM` event activity; `computer_use` is accepted in the request but does not currently emit per-delta events) |
+| Stability | GA | Experimental (Google Beta) |
+
+### Provider Options
+
+The adapter exposes Interactions-specific options on `modelOptions`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiTextInteractions } from "@tanstack/ai-gemini/experimental";
+
+const stream = chat({
+  adapter: geminiTextInteractions("gemini-3.5-flash"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    // Stateful chaining — passed only on turn 2+.
+    previous_interaction_id: "int_abc123",
+
+    // Persist the interaction server-side (default true). Must be true for
+    // previous_interaction_id to work on the *next* turn.
+    store: true,
+
+    // Per-request system instruction (interaction-scoped — re-specify each turn).
+    system_instruction: "You are a helpful assistant.",
+
+    // snake_case generation config distinct from geminiText's camelCase one.
+    generation_config: {
+      thinking_level: "low",
+      thinking_summaries: "auto",
+      stop_sequences: ["<done>"],
+    },
+
+    response_modalities: ["text"],
+  },
+});
+```
+
+### Reading the interaction id
+
+The server's interaction id arrives as an AG-UI `CUSTOM` event emitted just before `RUN_FINISHED`:
+
+```typescript ignore
+for await (const chunk of stream) {
+  if (
+    chunk.type === "CUSTOM" &&
+    chunk.name === "gemini.interactionId" &&
+    typeof chunk.value === "object" &&
+    chunk.value !== null &&
+    "interactionId" in chunk.value
+  ) {
+    const id = String(chunk.value.interactionId);
+    // Persist `id` wherever you store per-user conversation pointers —
+    // pass it back on the next turn as `previous_interaction_id`.
+  }
+}
+```
+
+### Caveats
+
+- **Multi-turn history requires `previous_interaction_id`.** The Interactions API has no stateless replay path — sending more than one message in `messages` without a `previous_interaction_id` throws. Chat UIs that maintain local history must capture the server-assigned id and chain (see [Wiring with `useChat`](#wiring-with-usechat-react)). On provider/model switch, also clear the local message buffer.
+- **Tools, `system_instruction`, and `generation_config` are interaction-scoped.** Per Google's docs these are NOT inherited from a prior interaction via `previous_interaction_id` — pass them again on every turn you need them.
+- `store: false` is incompatible with `previous_interaction_id` (no state to recall) and with `background: true`.
+- Retention (as of the time of writing): **55 days on the Paid Tier, 1 day on the Free Tier.** See [Google's Interactions API docs](https://ai.google.dev/gemini-api/docs/interactions) for current retention policy.
+- Built-in tools in scope (`google_search`, `code_execution`, `url_context`, `file_search`, `computer_use`) are wired through as request tools. Per-delta activity for the four search/exec tools streams back as AG-UI `CUSTOM` events — `gemini.googleSearchCall` / `gemini.googleSearchResult` (and the matching `codeExecutionCall`/`Result`, `urlContextCall`/`Result`, `fileSearchCall`/`Result`) — carrying the raw Interactions delta. `computer_use` is accepted in the request but the Interactions API does not currently emit per-delta `CUSTOM` events for it. Function-tool `TOOL_CALL_*` events are unchanged, and `finishReason` stays `stop` when only built-in tools ran.
+- `google_search_retrieval`, `google_maps`, and `mcp_server` still throw a targeted error on this adapter. Use `geminiText()` for the first two, or wait for a dedicated follow-up for `mcp_server`.
+- Image and audio output via Interactions aren't routed through this adapter yet — it's text-only. Use `geminiImage` / `geminiSpeech` for non-text generation for now.
+
+## Model Options
+
+Gemini supports various model-specific options. Sampling parameters live here too — `temperature`, `topP`, and `maxOutputTokens` — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    maxOutputTokens: 2048,
+    temperature: 0.7,
+    topP: 0.9,
+    topK: 40,
+    stopSequences: ["END"],
+  },
+});
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+### Thinking
+
+Enable thinking for models that support it:
+
+```typescript ignore
+modelOptions: {
+  thinking: {
+    includeThoughts: true,
+  },
+}
+```
+
+### Structured Output
+
+Configure structured output format:
+
+```typescript ignore
+modelOptions: {
+  responseMimeType: "application/json",
+}
+```
+
+## Summarization
+
+Summarize long text content:
+
+```typescript
+import { summarize } from "@tanstack/ai";
+import { geminiSummarize } from "@tanstack/ai-gemini";
+
+const result = await summarize({
+  adapter: geminiSummarize("gemini-3.1-pro-preview"),
+  text: "Your long text to summarize...",
+  maxLength: 100,
+  style: "concise", // "concise" | "bullet-points" | "paragraph"
+});
+
+console.log(result.summary);
+```
+
+## Image Generation
+
+The Gemini adapter supports two types of image generation:
+
+- **Gemini native image models** (NanoBanana) — Use the `generateContent` API with models like `gemini-3.1-flash-image-preview`. These support extended resolution tiers (1K, 2K, 4K) and aspect ratio control.
+- **Imagen models** — Use the `generateImages` API with models like `imagen-4.0-generate-001`. These are dedicated image generation models with WIDTHxHEIGHT sizing.
+
+The adapter automatically routes to the correct API based on the model name — models starting with `gemini-` use `generateContent`, while `imagen-` models use `generateImages`.
+
+### Example: Gemini Native Image Generation (NanoBanana)
+
+From the [media generation example app](https://github.com/TanStack/ai/tree/main/examples/ts-react-media):
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { geminiImage } from "@tanstack/ai-gemini";
+
+const result = await generateImage({
+  adapter: geminiImage("gemini-3.1-flash-image-preview"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+  size: "16:9_4K",
+});
+
+console.log(result.images);
+```
+
+### Example: Imagen
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { geminiImage } from "@tanstack/ai-gemini";
+
+const result = await generateImage({
+  adapter: geminiImage("imagen-4.0-generate-001"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+});
+
+console.log(result.images);
+```
+
+### Image Size Options
+
+#### Gemini Native Models (NanoBanana)
+
+Gemini native image models use a template literal size format combining aspect ratio and resolution tier:
+
+```typescript ignore
+// Format: "aspectRatio_resolution"
+size: "16:9_4K"
+size: "1:1_2K"
+size: "9:16_1K"
+```
+
+| Component | Values |
+|-----------|--------|
+| Aspect Ratio | `1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `9:16`, `16:9`, `21:9` |
+| Resolution | `1K`, `2K`, `4K` |
+
+#### Imagen Models
+
+Imagen models use WIDTHxHEIGHT format, which maps to aspect ratios internally:
+
+| Size | Aspect Ratio |
+|------|-------------|
+| `1024x1024` | 1:1 |
+| `1920x1080` | 16:9 |
+| `1080x1920` | 9:16 |
+
+Alternatively, you can specify the aspect ratio directly in Model Options:
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { geminiImage } from "@tanstack/ai-gemini";
+
+const result = await generateImage({
+  adapter: geminiImage("imagen-4.0-generate-001"),
+  prompt: "A landscape photo",
+  modelOptions: {
+    aspectRatio: "16:9",
+  },
+});
+```
+
+### Image Model Options
+
+```typescript ignore
+import { generateImage } from "@tanstack/ai";
+import { geminiImage } from "@tanstack/ai-gemini";
+
+const result = await generateImage({
+  adapter: geminiImage("imagen-4.0-generate-001"),
+  prompt: "...",
+  modelOptions: {
+    aspectRatio: "16:9", // "1:1" | "3:4" | "4:3" | "9:16" | "16:9"
+    personGeneration: "DONT_ALLOW", // Control person generation
+    safetyFilterLevel: "BLOCK_SOME", // Safety filtering
+  },
+});
+```
+
+## Text-to-Speech (Experimental)
+
+> **Note:** Gemini TTS is experimental and may require the Live API for full functionality.
+
+Generate speech from text:
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { geminiSpeech } from "@tanstack/ai-gemini";
+
+const result = await generateSpeech({
+  adapter: geminiSpeech("gemini-3.1-flash-tts-preview"),
+  text: "Hello from Gemini TTS!",
+});
+
+console.log(result.audio); // Base64 encoded audio
+```
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+GEMINI_API_KEY=your-api-key-here
+# or
+GOOGLE_API_KEY=your-api-key-here
+```
+
+## Getting an API Key
+
+1. Go to [Google AI Studio](https://aistudio.google.com/apikey)
+2. Create a new API key
+3. Add it to your environment variables
+
+## Popular Image Models
+
+### Gemini Native Image Models (NanoBanana)
+
+These models use the `generateContent` API and support resolution tiers (1K, 2K, 4K).
+
+| Model | Description |
+|-------|-------------|
+| `gemini-3.1-flash-image-preview` | Latest and fastest Gemini native image generation |
+| `gemini-3.1-flash-lite-image` | Nano Banana 2 Lite — ultra-low-latency, low-cost image generation |
+| `gemini-3-pro-image-preview` | Higher quality Gemini native image generation |
+| `gemini-2.5-flash-image` | Gemini 2.5 Flash with image generation |
+
+### Imagen Models
+
+These models use the dedicated `generateImages` API.
+
+| Model | Description |
+|-------|-------------|
+| `imagen-4.0-ultra-generate-001` | Best quality Imagen image generation |
+| `imagen-4.0-generate-001` | High quality Imagen image generation |
+| `imagen-4.0-fast-generate-001` | Fast Imagen image generation |
+
+## API Reference
+
+Every factory pair follows the same shape: the short factory (`geminiText`, `geminiImage`, …) reads `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) from the environment, while the `create*` variant takes an explicit API key. Both take `model` as the first argument.
+
+### `geminiText(model, config?)` / `createGeminiChat(model, apiKey, config?)`
+
+Creates a Gemini text/chat adapter.
+
+**Parameters:**
+
+- `model` - Gemini chat model id (e.g. `"gemini-3.1-pro-preview"`)
+- `config?.baseURL` - Custom base URL (optional)
+
+### `geminiTextInteractions(model, config?)` / `createGeminiTextInteractions(model, apiKey, config?)` (experimental)
+
+Creates a Gemini Interactions API text adapter. Backs the stateful conversation pattern via `previous_interaction_id`. Exported from `@tanstack/ai-gemini/experimental`.
+
+**Parameters:**
+
+- `model` - Gemini chat model id (e.g. `"gemini-3.5-flash"`)
+- `config?.baseURL` - Custom base URL (optional)
+
+### `geminiSummarize(model, config?)` / `createGeminiSummarize(model, apiKey, config?)`
+
+Creates a Gemini summarization adapter.
+
+### `geminiImage(model, config?)` / `createGeminiImage(model, apiKey, config?)`
+
+Creates a Gemini image adapter. Automatically routes to the correct API based on the model name — `gemini-*` models use `generateContent`, `imagen-*` models use `generateImages`.
+
+### `geminiSpeech(model, config?)` / `createGeminiSpeech(model, apiKey, config?)`
+
+Creates a Gemini text-to-speech adapter. _Experimental._
+
+### `geminiAudio(model, config?)` / `createGeminiAudio(model, apiKey, config?)`
+
+Creates a Gemini Lyria music generation adapter. _Experimental._
+
+## Next Steps
+
+- [Image Generation Guide](/ai/media/image-generation) - Learn more about image generation
+- [Media Generation Example](https://github.com/TanStack/ai/tree/main/examples/ts-react-media) - Full working example with Gemini and fal.ai
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
+
+## Provider Tools
+
+Google Gemini exposes several native tools beyond user-defined function calls.
+Import them from `@tanstack/ai-gemini/tools` and pass them into
+`chat({ tools: [...] })`.
+
+> For the full concept, a comparison matrix, and type-gating details, see
+> [Provider Tools](/ai/tools/provider-tools).
+
+### `codeExecutionTool`
+
+Enables Gemini to execute Python code in a sandboxed environment and return
+results inline. Takes no arguments — include it in the `tools` array to
+activate code execution.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { codeExecutionTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Calculate the first 10 Fibonacci numbers" }],
+  tools: [codeExecutionTool()],
+});
+```
+
+**Supported models:** Gemini 1.5 Pro, Gemini 2.x, Gemini 2.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `fileSearchTool`
+
+Searches files that have been uploaded to the Gemini File API. Pass a
+`FileSearch` config object with the corpus and file IDs to scope the search.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { fileSearchTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Find the quarterly revenue figures" }],
+  tools: [
+    fileSearchTool({
+      fileSearchStoreNames: ["fileSearchStores/my-file-search-store-123"],
+    }),
+  ],
+});
+```
+
+**Supported models:** Gemini 2.x and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `googleSearchTool`
+
+Enables Gemini to query Google Search and incorporate grounded search results
+into its response. Pass an optional `GoogleSearch` config or call with no
+arguments to use defaults.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { googleSearchTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "What's the weather in Tokyo right now?" }],
+  tools: [googleSearchTool()],
+});
+```
+
+**Supported models:** Gemini 1.5 Pro, Gemini 2.x, Gemini 2.5. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `googleSearchRetrievalTool`
+
+A retrieval-augmented variant of Google Search that returns ranked passages
+from the web with configurable dynamic retrieval mode. Pass an optional
+`GoogleSearchRetrieval` config.
+
+```typescript ignore
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { googleSearchRetrievalTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Explain the latest JavaScript proposals" }],
+  tools: [
+    googleSearchRetrievalTool({
+      dynamicRetrievalConfig: { mode: "MODE_DYNAMIC", dynamicThreshold: 0.7 },
+    }),
+  ],
+});
+```
+
+**Supported models:** Gemini 1.5 Pro and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `googleMapsTool`
+
+Connects Gemini to the Google Maps API for location-aware queries such as
+directions, place search, and geocoding. Pass an optional `GoogleMaps` config
+or call with no arguments.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { googleMapsTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-2.5-pro"),
+  messages: [{ role: "user", content: "Find coffee shops near Union Square, SF" }],
+  tools: [googleMapsTool()],
+});
+```
+
+**Supported models:** Gemini 2.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `urlContextTool`
+
+Fetches and includes the content of URLs mentioned in the conversation so
+Gemini can reason over live web pages. Takes no arguments.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { urlContextTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Summarise https://example.com/article" }],
+  tools: [urlContextTool()],
+});
+```
+
+**Supported models:** Gemini 2.x and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `computerUseTool`
+
+Allows Gemini to observe a virtual desktop via screenshots and interact with
+it using predefined computer-use functions. Provide the `environment` and
+optionally restrict callable functions via `excludedPredefinedFunctions`.
+
+```typescript ignore
+import { chat } from "@tanstack/ai";
+import { geminiText } from "@tanstack/ai-gemini";
+import { computerUseTool } from "@tanstack/ai-gemini/tools";
+
+const stream = chat({
+  adapter: geminiText("gemini-3.1-pro-preview"),
+  messages: [{ role: "user", content: "Navigate to example.com in the browser" }],
+  tools: [
+    computerUseTool({
+      environment: "browser",
+    }),
+  ],
+});
+```
+
+**Supported models:** Gemini 2.5 and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
diff --git a/mintlify/ai/adapters/grok-build.md b/mintlify/ai/adapters/grok-build.md
new file mode 100644
index 000000000..0e60f4041
--- /dev/null
+++ b/mintlify/ai/adapters/grok-build.md
@@ -0,0 +1,178 @@
+---
+title: Grok Build
+id: grok-build-adapter
+order: 15
+description: "Use xAI's Grok Build coding agent as a chat backend in TanStack AI — a sandbox harness that runs the grok CLI against a real workspace, with tool bridging via @tanstack/ai-grok-build."
+keywords:
+  - tanstack ai
+  - grok
+  - grok build
+  - xai
+  - harness
+  - agent
+  - coding agent
+  - adapter
+---
+
+The Grok Build adapter runs xAI's **Grok Build** coding agent as a chat backend.
+Unlike HTTP provider adapters, this is a **harness adapter**: Grok Build runs
+its own agent loop and executes its own tools — shell commands, file edits,
+search — by spawning the `grok` CLI **inside a sandbox**. Each `chat()` call runs
+one full harness turn; the harness's tool activity streams back as
+already-resolved tool-call events your UI can render.
+
+> **Requires a sandbox.** `grok-build` declares `requires: [SandboxCapability]`,
+> so `chat()` errors at the call site unless you provide a sandbox with
+> `withSandbox(...)` middleware. The sandbox — your laptop, a Docker container,
+> or a cloud VM — is the filesystem and safety boundary the agent runs in. See
+> the [Sandboxes overview](/ai/sandbox/overview) for the full picture.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-grok-build @tanstack/ai-sandbox
+```
+
+You also need a sandbox provider (e.g. `@tanstack/ai-sandbox-docker`) and the
+`grok` CLI available inside the sandbox image.
+
+## Authentication
+
+Grok Build resolves credentials the same way the `grok` CLI does:
+
+- the `XAI_API_KEY` environment variable (headless / sandbox — inject it as a
+  workspace secret), or
+- an existing grok.com browser login on the machine (local dev).
+
+The two auth modes expose the model under slightly different ids; the adapter
+maps the short alias for you (see [Models](#models)).
+
+## Basic Usage
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import {
+  createSecrets,
+  defineSandbox,
+  defineWorkspace,
+  githubRepo,
+  withSandbox,
+} from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { messages, threadId } from './chat-context'
+
+const sandbox = defineSandbox({
+  id: 'grok-build-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['corepack enable', 'pnpm install'],
+    secrets: createSecrets({ XAI_API_KEY: process.env.XAI_API_KEY ?? '' }),
+  }),
+})
+
+const stream = chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+## Models
+
+Grok Build accepts any xAI model id its backend supports; the known ids get
+autocomplete (any string is allowed):
+
+| Model id | Notes |
+| --- | --- |
+| `grok-build` | The short alias. With a grok.com browser login the CLI lists it under this name. |
+| `grok-build-0.1` | The fully-qualified id the CLI lists when authenticated with `XAI_API_KEY`. |
+| `composer-2.5` | Also runnable through the Grok Build harness. |
+
+Pass any of these to `grokBuildText(...)` — the adapter resolves `grok-build` to
+the CLI's `grok-build-0.1` automatically, so the same code works under both auth
+modes.
+
+## Configuration
+
+Adapter config (second argument to `grokBuildText`):
+
+| Option           | Description                                                                 |
+| ---------------- | --------------------------------------------------------------------------- |
+| `cwd`            | Working directory inside the sandbox. Defaults to `/workspace`.             |
+| `grokExecutable` | Path/name of the `grok` executable inside the sandbox. Defaults to `grok`.  |
+| `env`            | Extra environment variables for the `grok` process inside the sandbox.      |
+| `emitDiff`       | Emit a `file.changed` CUSTOM event with the working-tree `git diff` after the run. Defaults to `true`. |
+| `extraArgs`      | Extra raw CLI flags appended verbatim (advanced).                           |
+
+Per-call overrides go through `modelOptions`:
+
+| `modelOptions`  | Description                                                  |
+| --------------- | ------------------------------------------------------------ |
+| `sessionId`     | Resume an existing Grok Build session (see below).           |
+| `cwd`           | Per-call override of the harness working directory.          |
+| `maxTurns`      | Per-call cap on the number of harness turns.                 |
+
+## Stateful Sessions
+
+Grok Build sessions are stateful — the harness keeps the working context (files
+read, commands run, conclusions reached) between turns. The adapter surfaces the
+session id of every fresh run as a custom stream event named
+`grok-build.session-id`; thread it back via `modelOptions.sessionId` to resume.
+When resuming, only the latest user message is sent — the harness already holds
+the prior context.
+
+```ts
+import { chat, chatParamsFromRequest, toServerSentEventsResponse } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { sandbox } from './sandbox'
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request)
+  const sessionId =
+    typeof params.forwardedProps.sessionId === 'string'
+      ? params.forwardedProps.sessionId
+      : undefined
+
+  const stream = chat({
+    adapter: grokBuildText('grok-build'),
+    messages: params.messages,
+    middleware: [withSandbox(sandbox)],
+    modelOptions: { sessionId },
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+## Tools
+
+Two kinds of tools flow through this adapter:
+
+1. **Built-in harness tools** are executed by Grok Build itself (shell, file
+   edits, search) and stream back as tool-call events with results already
+   attached. Your code never executes them.
+2. **Your TanStack tools** are bridged *into* the harness over an authenticated
+   MCP tool-proxy: define them with `toolDefinition().server()` and pass them to
+   `chat({ tools })`. Tool-call events come back under the names you registered.
+   Because the harness runs in a sandbox, see [Sandbox tools](/ai/sandbox/tools)
+   for how the bridge reaches your host across providers (local/Docker vs cloud).
+
+**Client-side and approval-gated tools are not supported** — the harness runs
+tools inside a live process and can't pause across an HTTP round-trip. A tool
+without a server `execute()` (or marked `needsApproval`) fails fast; run those
+with a regular provider adapter.
+
+## Limitations
+
+- **Requires a sandbox.** Always run it under `withSandbox(...)`; see the
+  [Sandboxes overview](/ai/sandbox/overview).
+- **Server-only (Node).** The harness spawns the `grok` CLI in a sandbox.
+- **The harness owns the agent loop.** TanStack's agent-loop strategies and
+  per-iteration middleware don't apply inside a harness turn.
+- **No sampling controls.** `temperature`-style options don't exist here.
+- **Cold starts.** Each call runs a full harness turn; expect higher first-token
+  latency than HTTP adapters.
diff --git a/mintlify/ai/adapters/grok.md b/mintlify/ai/adapters/grok.md
new file mode 100644
index 000000000..afa37e698
--- /dev/null
+++ b/mintlify/ai/adapters/grok.md
@@ -0,0 +1,422 @@
+---
+title: Grok (xAI)
+id: grok-adapter
+order: 5
+description: "Use xAI Grok models with TanStack AI — Grok 4.3, Grok Build 0.1, Grok Imagine image generation, and Grok Imagine video generation via @tanstack/ai-grok."
+keywords:
+  - tanstack ai
+  - grok
+  - xai
+  - grok 4.3
+  - grok build
+  - image generation
+  - video generation
+  - grok imagine
+  - adapter
+---
+
+The Grok text and summarization adapters provide access to xAI's Responses API for `grok-4.3` and `grok-build-0.1`, plus Grok Imagine image generation and Grok Imagine video generation.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-grok
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { grokText } from "@tanstack/ai-grok";
+
+const stream = chat({
+  adapter: grokText("grok-build-0.1"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createGrokText } from "@tanstack/ai-grok";
+
+const adapter = createGrokText("grok-build-0.1", process.env.XAI_API_KEY!);
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createGrokText, type GrokTextConfig } from "@tanstack/ai-grok";
+
+const config: Omit<GrokTextConfig, "apiKey"> = {
+  baseURL: "https://api.x.ai/v1", // Optional, this is the default
+};
+
+const adapter = createGrokText("grok-build-0.1", process.env.XAI_API_KEY!, config);
+```
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { grokText } from "@tanstack/ai-grok";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: grokText("grok-build-0.1"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { grokText } from "@tanstack/ai-grok";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather",
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  // Fetch weather data
+  return { temperature: 72, conditions: "sunny" };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: grokText("grok-build-0.1"),
+    messages,
+    tools: [getWeather],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Model Options
+
+Grok supports xAI Responses API options. Sampling parameters live here too — `temperature`, `top_p`, and `max_output_tokens` — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { grokText } from "@tanstack/ai-grok";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: grokText("grok-build-0.1"),
+    messages,
+    modelOptions: {
+      temperature: 0.7,
+      top_p: 0.9,
+      max_output_tokens: 1024,
+      store: false,
+      include: ["reasoning.encrypted_content"],
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+## Summarization
+
+Summarize long text content:
+
+
+
+
+```typescript ignore
+import { summarize } from "@tanstack/ai";
+import { grokSummarize } from "@tanstack/ai-grok";
+
+const result = await summarize({
+  adapter: grokSummarize("grok-4.3"),
+  text: "Your long text to summarize...",
+  maxLength: 100,
+  style: "concise", // "concise" | "bullet-points" | "paragraph"
+});
+
+console.log(result.summary);
+```
+
+## Image Generation
+
+Generate images with Grok 2 Image:
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { grokImage } from "@tanstack/ai-grok";
+
+const result = await generateImage({
+  adapter: grokImage("grok-2-image-1212"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+});
+
+console.log(result.images);
+```
+
+The grok-imagine models (`grok-imagine-image`, `grok-imagine-image-quality`)
+are aspect-ratio sized — `size` takes an `aspectRatio_resolution` template
+like `"16:9_2k"` (the `_2k` suffix is optional):
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { grokImage } from "@tanstack/ai-grok";
+
+const result = await generateImage({
+  adapter: grokImage("grok-imagine-image"),
+  prompt: "A futuristic cityscape at sunset",
+  size: "16:9_2k",
+});
+```
+
+### Image Editing (image-to-image)
+
+The grok-imagine models accept image prompt parts for image-conditioned
+generation via xAI's `/v1/images/edits` endpoint — up to 3 source images,
+addressed by xAI in the order they appear in the prompt. Per xAI's docs
+there is no in-prompt referencing syntax; write the prompt naturally and
+your text is sent verbatim:
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { grokImage } from "@tanstack/ai-grok";
+
+const result = await generateImage({
+  adapter: grokImage("grok-imagine-image"),
+  prompt: [
+    {
+      type: "text",
+      content: "Render the product in the style of the second image",
+    },
+    {
+      type: "image",
+      source: { type: "url", value: "https://example.com/product.png" },
+    },
+    {
+      type: "image",
+      source: { type: "url", value: "https://example.com/style.png" },
+    },
+  ],
+});
+```
+
+URL sources are fetched by xAI's servers, so they must be publicly
+reachable; use a `data` source for private images. `grok-2-image-1212` is
+text-to-image only — image prompt parts are a compile-time type error and
+throw at runtime.
+
+## Video Generation (Experimental)
+
+Generate short video clips (1–15 seconds, with audio) with the Grok Imagine video models via xAI's asynchronous jobs/polling API.
+
+Available models:
+
+- `grok-imagine-video` (v1.0) — text-to-video and image-to-video, $0.05 per second of video.
+- `grok-imagine-video-1.5` — **image-to-video only**, $0.08 per second of video. A text-only prompt is rejected by the API; the adapter fails fast with a clear error telling you to add a starting-frame image or use `grok-imagine-video`.
+
+Text-to-video with the base `grok-imagine-video` model:
+
+```typescript
+import { generateVideo, getVideoJobStatus } from "@tanstack/ai";
+import { grokVideo } from "@tanstack/ai-grok";
+
+const adapter = grokVideo("grok-imagine-video");
+
+// 1. Create the job
+const { jobId } = await generateVideo({
+  adapter,
+  prompt: "A red panda balancing on a bamboo stalk in the rain",
+  size: "16:9_720p", // "aspectRatio" or "aspectRatio_resolution"
+  duration: 5, // integer seconds, 1–15
+});
+
+// 2. Poll until complete, then read the video URL
+let status = await getVideoJobStatus({ adapter, jobId });
+while (status.status !== "completed" && status.status !== "failed") {
+  await new Promise((r) => setTimeout(r, 5000));
+  status = await getVideoJobStatus({ adapter, jobId });
+}
+
+console.log(status.url); // hosted .mp4 URL
+```
+
+For image-to-video (required for `grok-imagine-video-1.5`, optional for `grok-imagine-video`), include an `image` prompt part as the starting frame and describe the desired motion in the text part. URL sources are fetched by xAI's servers (so they must be publicly reachable); use a `data` source for a base64 starting frame:
+
+```typescript
+import { generateVideo } from "@tanstack/ai";
+import { grokVideo } from "@tanstack/ai-grok";
+
+const { jobId } = await generateVideo({
+  adapter: grokVideo("grok-imagine-video-1.5"),
+  prompt: [
+    {
+      type: "text",
+      content: "Make the waterfall crash down and slowly pan out the camera",
+    },
+    {
+      type: "image",
+      source: { type: "url", value: "https://example.com/waterfall-still.png" },
+    },
+  ],
+  size: "16:9_720p",
+  duration: 10,
+});
+```
+
+Like the Grok Imagine image models, sizing is aspect-ratio based: the `size` option takes an `aspectRatio_resolution` template. Supported aspect ratios are `1:1`, `16:9`, `9:16`, `4:3`, `3:4`, `3:2`, and `2:3`; supported resolutions are `480p`, `720p`, and `1080p` (e.g. `"9:16_1080p"`). The resolution suffix is optional.
+
+When the job completes, the adapter reports usage on the result: `usage.unitsBilled` carries the billed seconds of video and `usage.cost` the exact cost in USD, both as returned by the xAI API.
+
+See [Video Generation](/ai/media/video-generation) for the full jobs/polling flow, streaming mode, and the `useGenerateVideo` hook.
+
+## Text-to-Speech
+
+Generate speech with Grok TTS:
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { grokSpeech } from "@tanstack/ai-grok";
+
+const result = await generateSpeech({
+  adapter: grokSpeech("grok-tts"),
+  text: "Hello from Grok!",
+  voice: "default",
+  format: "mp3",
+});
+
+console.log(result.audio); // Base64-encoded audio
+```
+
+## Transcription
+
+Transcribe audio with Grok STT:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { grokTranscription } from "@tanstack/ai-grok";
+import { audioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: grokTranscription("grok-stt"),
+  audio: audioFile,
+});
+
+console.log(result.text);
+```
+
+## Realtime Voice
+
+Grok also exposes a Realtime voice adapter (`grokRealtime`) and a token issuer (`grokRealtimeToken`) for low-latency voice conversations. See [Realtime Voice Chat](/ai/media/realtime-chat) for the end-to-end flow.
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+XAI_API_KEY=xai-...
+```
+
+## Implementation Notes
+
+### Responses API
+
+The Grok text and summarize adapters use xAI's **Responses API** (`/v1/responses`). Requests default to `store: false` and include encrypted reasoning content with `include: ["reasoning.encrypted_content"]`; both can be overridden through `modelOptions`.
+
+The shared Responses implementation supports streaming text, reasoning events, structured output via `text.format`, and user-defined function tools.
+
+## API Reference
+
+### `grokText(model, config?)`
+
+Creates a Grok text adapter using environment variables.
+
+**Parameters:**
+
+- `model` - The model name (`'grok-4.3'` or `'grok-build-0.1'`)
+- `config.baseURL?` - Custom base URL (optional)
+
+**Returns:** A Grok text adapter instance.
+
+### `createGrokText(model, apiKey, config?)`
+
+Creates a Grok text adapter with an explicit API key.
+
+**Parameters:**
+
+- `model` - The model name
+- `apiKey` - Your xAI API key
+- `config.baseURL?` - Custom base URL (optional)
+
+**Returns:** A Grok text adapter instance.
+
+### `grokSummarize(model, config?)`
+
+Creates a Grok summarization adapter using environment variables.
+
+**Returns:** A Grok summarize adapter instance.
+
+### `createGrokSummarize(model, apiKey, config?)`
+
+Creates a Grok summarization adapter with an explicit API key.
+
+**Returns:** A Grok summarize adapter instance.
+
+### `grokImage(model, config?)` / `createGrokImage(model, apiKey, config?)`
+
+Creates a Grok image generation adapter.
+
+### `grokVideo(model, config?)` / `createGrokVideo(model, apiKey, config?)`
+
+Creates a Grok video generation adapter (experimental) for the Grok Imagine video models (`'grok-imagine-video'`, `'grok-imagine-video-1.5'`).
+
+### `grokSpeech(model, config?)` / `createGrokSpeech(model, apiKey, config?)`
+
+Creates a Grok text-to-speech adapter.
+
+### `grokTranscription(model, config?)` / `createGrokTranscription(model, apiKey, config?)`
+
+Creates a Grok speech-to-text adapter.
+
+### `grokRealtime(...)` / `grokRealtimeToken(...)`
+
+Realtime voice adapter and token issuer. See [Realtime Voice Chat](/ai/media/realtime-chat) for usage.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
+
+## Provider Tools
+
+Grok does not currently expose provider-specific tool factories.
+Define your own tools with `toolDefinition()` from `@tanstack/ai`.
+
+See [Tools](/ai/tools/tools) for the general tool-definition flow, or
+[Provider Tools](/ai/tools/provider-tools) for other providers'
+native-tool offerings.
diff --git a/mintlify/ai/adapters/groq.md b/mintlify/ai/adapters/groq.md
new file mode 100644
index 000000000..5d89484b8
--- /dev/null
+++ b/mintlify/ai/adapters/groq.md
@@ -0,0 +1,255 @@
+---
+title: Groq
+id: groq-adapter
+order: 6
+description: "Use Groq's fast inference API with TanStack AI for low-latency LLM responses and Whisper transcription — Llama and other open-weight models via @tanstack/ai-groq."
+keywords:
+  - tanstack ai
+  - groq
+  - fast inference
+  - llama
+  - low latency
+  - adapter
+  - llm
+  - whisper
+  - transcription
+---
+
+The Groq adapter provides access to Groq's fast inference API, featuring the world's fastest LLM inference and Whisper-based audio transcription.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-groq
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { groqText } from "@tanstack/ai-groq";
+
+const stream = chat({
+  adapter: groqText("llama-3.3-70b-versatile"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createGroqText } from "@tanstack/ai-groq";
+
+const adapter = createGroqText("llama-3.3-70b-versatile", process.env.GROQ_API_KEY!, {
+  // ... your config options
+});
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createGroqText, type GroqTextConfig } from "@tanstack/ai-groq";
+
+const config: Omit<GroqTextConfig, 'apiKey'> = {
+  baseURL: "https://api.groq.com/openai/v1", // Optional, for custom endpoints
+};
+
+const adapter = createGroqText("llama-3.3-70b-versatile", process.env.GROQ_API_KEY!, config);
+```
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { groqText } from "@tanstack/ai-groq";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: groqText("llama-3.3-70b-versatile"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toolDefinition, type ModelMessage } from "@tanstack/ai";
+import { groqText } from "@tanstack/ai-groq";
+import { z } from "zod";
+
+const searchDatabaseDef = toolDefinition({
+  name: "search_database",
+  description: "Search the database",
+  inputSchema: z.object({
+    query: z.string(),
+  }),
+});
+
+const searchDatabase = searchDatabaseDef.server(async ({ query }) => {
+  // Search database
+  return { results: [] };
+});
+
+const messages: Array<ModelMessage> = [{ role: "user", content: "Search for something" }];
+
+const stream = chat({
+  adapter: groqText("llama-3.3-70b-versatile"),
+  messages,
+  tools: [searchDatabase],
+});
+```
+
+## Transcription
+
+Groq exposes Whisper-based speech-to-text via `groqTranscription()` and the `generateTranscription()` activity. The `audio` input accepts a `File`, `Blob`, `ArrayBuffer`, base64 string, data URL, or an `https://` URL (forwarded directly to Groq without re-uploading).
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { groqTranscription } from "@tanstack/ai-groq";
+
+const result = await generateTranscription({
+  adapter: groqTranscription("whisper-large-v3-turbo"),
+  audio: "https://example.com/recording.mp3",
+  language: "en",
+});
+
+console.log(result.text);
+
+// verbose_json (the default) populates language, duration, and timestamped segments
+for (const segment of result.segments ?? []) {
+  console.log(`[${segment.start}s → ${segment.end}s] ${segment.text}`);
+}
+```
+
+Supported models: `whisper-large-v3-turbo`, `whisper-large-v3`. Supported `responseFormat` values: `json`, `text`, `verbose_json` (default). `srt` and `vtt` are not supported by Groq.
+
+See [Transcription](/ai/media/transcription) for the full API.
+
+## Model Options
+
+Groq supports various provider-specific options. Sampling parameters live here too — `temperature`, `top_p`, and `max_completion_tokens` (Groq's token-limit key) — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { groqText } from "@tanstack/ai-groq";
+
+const stream = chat({
+  adapter: groqText("llama-3.3-70b-versatile"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    temperature: 0.7,
+    max_completion_tokens: 1024,
+    top_p: 0.9,
+  },
+});
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+### Reasoning
+
+Enable reasoning for models that support it (e.g., `openai/gpt-oss-120b`, `qwen/qwen3-32b`). This allows the model to show its reasoning process, which is streamed as `thinking` chunks:
+
+```typescript ignore
+modelOptions: {
+  reasoning_effort: "medium", // "none" | "default" | "low" | "medium" | "high"
+}
+```
+
+## Supported Models
+
+Groq offers a diverse selection of models from multiple providers:
+
+### Meta Llama
+
+- `llama-3.3-70b-versatile` - Fast, capable model with 128K context
+- `llama-3.1-8b-instant` - Fast, cost-effective model
+- `meta-llama/llama-4-maverick-17b-128e-instruct` - Latest Llama 4 with vision support
+- `meta-llama/llama-4-scout-17b-16e-instruct` - Efficient Llama 4 model
+
+### Security Models
+
+- `meta-llama/llama-guard-4-12b` - Content moderation
+- `meta-llama/llama-prompt-guard-2-86m` - Prompt injection detection
+- `meta-llama/llama-prompt-guard-2-22m` - Lightweight prompt guard
+
+### OpenAI GPT-OSS Models
+
+- `openai/gpt-oss-120b` - Large OSS model with reasoning support
+- `openai/gpt-oss-20b` - Efficient OSS model
+- `openai/gpt-oss-safeguard-20b` - Safety-tuned OSS model
+
+### Other Providers
+
+- `moonshotai/kimi-k2-instruct-0905` - Kimi K2 with 256K context
+- `qwen/qwen3-32b` - Qwen 3 with reasoning support
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+GROQ_API_KEY=gsk_...
+```
+
+## API Reference
+
+### `groqText(model, config?)`
+
+Creates a Groq chat adapter using environment variables.
+
+**Parameters:**
+
+- `model` - The model name (e.g., `llama-3.3-70b-versatile`)
+- `config` (optional) - Optional configuration object. Supports the same options as `createGroqText` except `apiKey`, which is auto-detected from `GROQ_API_KEY` environment variable. Common options:
+  - `baseURL` - Custom base URL for API requests (optional)
+
+**Returns:** A Groq chat adapter instance.
+
+### `createGroqText(model, apiKey, config?)`
+
+Creates a Groq chat adapter with an explicit API key.
+
+**Parameters:**
+
+- `model` - The model name (e.g., `llama-3.3-70b-versatile`)
+- `apiKey` - Your Groq API key
+- `config` (optional) - Optional configuration object:
+  - `baseURL` - Custom base URL for API requests (optional)
+
+**Returns:** A Groq chat adapter instance.
+
+### `groqTranscription(model, config?)` / `createGroqTranscription(model, apiKey, config?)`
+
+Creates a Groq transcription (speech-to-text) adapter. The short form reads `GROQ_API_KEY` from the environment; the `create*` form takes an explicit API key. Supported models: `whisper-large-v3-turbo`, `whisper-large-v3`.
+
+## Limitations
+
+- **Text-to-Speech**: Groq does not currently expose a TTS adapter. Use OpenAI, Gemini, ElevenLabs, or fal for speech generation.
+- **Image Generation**: Groq does not support image generation. Use OpenAI, Gemini, or fal for image generation.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
+
+## Provider Tools
+
+Groq does not currently expose provider-specific tool factories.
+Define your own tools with `toolDefinition()` from `@tanstack/ai`.
+
+See [Tools](/ai/tools/tools) for the general tool-definition flow, or
+[Provider Tools](/ai/tools/provider-tools) for other providers'
+native-tool offerings.
diff --git a/mintlify/ai/adapters/mistral.md b/mintlify/ai/adapters/mistral.md
new file mode 100644
index 000000000..94839a631
--- /dev/null
+++ b/mintlify/ai/adapters/mistral.md
@@ -0,0 +1,352 @@
+---
+title: Mistral
+id: mistral-adapter
+order: 7
+description: "Use Mistral models with TanStack AI — Mistral Large, Mistral Medium, Pixtral vision models, Magistral reasoning models, and Codestral via @tanstack/ai-mistral."
+keywords:
+  - tanstack ai
+  - mistral
+  - mistral large
+  - pixtral
+  - magistral
+  - codestral
+  - adapter
+  - llm
+---
+
+The Mistral adapter provides access to Mistral's chat models, including Mistral Large, the multimodal Pixtral family, the Magistral reasoning models, and the Codestral code-specialized model.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-mistral
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+const stream = chat({
+  adapter: mistralText("mistral-large-latest"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createMistralText } from "@tanstack/ai-mistral";
+
+const adapter = createMistralText(
+  "mistral-large-latest",
+  process.env.MISTRAL_API_KEY!,
+);
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import {
+  createMistralText,
+  type MistralTextConfig,
+} from "@tanstack/ai-mistral";
+
+const config: Omit<MistralTextConfig, "apiKey"> = {
+  serverURL: "https://api.mistral.ai", // Optional, this is the default
+  defaultHeaders: {
+    "X-Custom-Header": "value",
+  },
+};
+
+const adapter = createMistralText(
+  "mistral-large-latest",
+  process.env.MISTRAL_API_KEY!,
+  config,
+);
+```
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: mistralText("mistral-large-latest"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toolDefinition } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather for a location",
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  return { temperature: 72, conditions: "sunny" };
+});
+
+const stream = chat({
+  adapter: mistralText("mistral-large-latest"),
+  messages: [{ role: "user", content: "What's the weather in Paris?" }],
+  tools: [getWeather],
+});
+```
+
+## Example: Multimodal (Vision)
+
+Use a vision-capable model — `pixtral-large-latest`, `pixtral-12b-2409`, `mistral-medium-latest`, or `mistral-small-latest` — to send images alongside text:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+const stream = chat({
+  adapter: mistralText("pixtral-large-latest"),
+  messages: [
+    {
+      role: "user",
+      content: [
+        { type: "text", content: "What's in this image?" },
+        {
+          type: "image",
+          source: {
+            type: "url",
+            value: "https://example.com/photo.jpg",
+          },
+        },
+      ],
+    },
+  ],
+});
+```
+
+For data-URL or base64 images, set `source.type` to `"data"` and provide `mimeType`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+const base64String = "..."; // your base64-encoded image bytes
+
+const stream = chat({
+  adapter: mistralText("pixtral-large-latest"),
+  messages: [
+    {
+      role: "user",
+      content: [
+        { type: "text", content: "What's in this image?" },
+        {
+          type: "image",
+          source: {
+            type: "data",
+            mimeType: "image/png",
+            value: base64String,
+          },
+        },
+      ],
+    },
+  ],
+});
+```
+
+See [Multimodal Content](/ai/advanced/multimodal-content) for the full content-part shape.
+
+## Example: Reasoning (Magistral)
+
+Magistral models (`magistral-medium-latest`, `magistral-small-latest`) stream their reasoning as separate events before the final answer. The adapter emits AG-UI `REASONING_*` chunks for the thinking content and `TEXT_MESSAGE_*` chunks for the answer:
+
+```typescript ignore
+// ignore: narrowing the raw AG-UI stream by `chunk.type` relies on @ag-ui/core's
+// discriminated-union `type` field, which kiira can't resolve in a source-only
+// check. The runtime behaviour is exactly as shown.
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+const stream = chat({
+  adapter: mistralText("magistral-medium-latest"),
+  messages: [{ role: "user", content: "Why is the sky blue?" }],
+});
+
+for await (const chunk of stream) {
+  if (chunk.type === "REASONING_MESSAGE_CONTENT") {
+    process.stdout.write(`[thinking] ${chunk.delta}`);
+  } else if (chunk.type === "TEXT_MESSAGE_CONTENT") {
+    process.stdout.write(chunk.delta);
+  }
+}
+```
+
+Reasoning events are always closed before any text or tool output begins, so consumers see a complete `REASONING_START → REASONING_MESSAGE_START → REASONING_MESSAGE_CONTENT* → REASONING_MESSAGE_END → REASONING_END` sequence first.
+
+See [Thinking & Reasoning](/ai/chat/thinking-content) for the cross-provider event spec.
+
+## Example: Structured Output
+
+Generate JSON that conforms to a Zod schema using Mistral's `json_schema` response format:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+import { z } from "zod";
+
+const recipeSchema = z.object({
+  name: z.string(),
+  ingredients: z.array(z.string()),
+  steps: z.array(z.string()),
+});
+
+const recipe = await chat({
+  adapter: mistralText("mistral-large-latest"),
+  messages: [
+    { role: "user", content: "Give me a chocolate chip cookie recipe." },
+  ],
+  outputSchema: recipeSchema,
+});
+
+console.log(recipe.name); // typed as z.infer<typeof recipeSchema>
+```
+
+See [Structured Outputs](/ai/chat/structured-outputs) for the full guide.
+
+## Model Options
+
+Mistral exposes provider-specific options via `modelOptions`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { mistralText } from "@tanstack/ai-mistral";
+
+const stream = chat({
+  adapter: mistralText("mistral-large-latest"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    temperature: 0.7,
+    top_p: 0.9,
+    max_tokens: 1024,
+    random_seed: 42,
+    stop: ["END"],
+    safe_prompt: true,
+    frequency_penalty: 0.5,
+    presence_penalty: 0.5,
+    parallel_tool_calls: true,
+    tool_choice: "auto",
+  },
+});
+```
+
+> All sampling parameters — including `temperature`, `top_p`, and `max_tokens` —
+> go inside `modelOptions` using Mistral's native (snake_case) names.
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+MISTRAL_API_KEY=...
+```
+
+Get a key from the [Mistral Console](https://console.mistral.ai/).
+
+## Supported Models
+
+### Chat
+
+- `mistral-large-latest` — Flagship general-purpose model (128k context)
+- `mistral-medium-latest` — Multimodal mid-tier model with vision
+- `mistral-small-latest` — Fast, affordable multimodal model with vision
+- `ministral-8b-latest` — 8B edge model
+- `ministral-3b-latest` — 3B edge model
+- `open-mistral-nemo` — Open 12B model
+
+### Code
+
+- `codestral-latest` — Code-specialized model (256k context)
+
+### Vision
+
+- `pixtral-large-latest` — Large vision model
+- `pixtral-12b-2409` — 12B vision model
+
+### Reasoning
+
+Reasoning content is streamed as `REASONING_*` events before the final answer.
+
+- `magistral-medium-latest` — Mid-tier reasoning model
+- `magistral-small-latest` — Small reasoning model
+
+See [Mistral's model comparison](https://docs.mistral.ai/getting-started/models/compare) for full details.
+
+## API Reference
+
+### `mistralText(model, config?)`
+
+Creates a Mistral text adapter using the `MISTRAL_API_KEY` environment variable.
+
+**Parameters:**
+
+- `model` — The model name (e.g., `'mistral-large-latest'`)
+- `config.serverURL?` — Custom base URL (optional)
+- `config.defaultHeaders?` — Headers to attach to every request (optional)
+
+**Returns:** A Mistral text adapter instance.
+
+### `createMistralText(model, apiKey, config?)`
+
+Creates a Mistral text adapter with an explicit API key.
+
+**Parameters:**
+
+- `model` — The model name
+- `apiKey` — Your Mistral API key
+- `config.serverURL?` — Custom base URL (optional)
+- `config.defaultHeaders?` — Headers to attach to every request (optional)
+
+**Returns:** A Mistral text adapter instance.
+
+## Limitations
+
+- **Embeddings**: Use the [Mistral SDK](https://github.com/mistralai/client-ts) directly for `mistral-embed`.
+- **Image / Audio / Video Generation**: Mistral does not provide these endpoints. Use OpenAI, Gemini, or fal.ai.
+- **Text-to-Speech / Transcription**: Not supported. Use OpenAI or ElevenLabs.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) — Learn the basics
+- [Tools Guide](/ai/tools/tools) — Define and call tools
+- [Structured Outputs](/ai/chat/structured-outputs) — Generate typed JSON
+- [Multimodal Content](/ai/advanced/multimodal-content) — Send images and other modalities
+- [Other Adapters](/ai/adapters/openai) — Explore other providers
+
+## Provider Tools
+
+Mistral does not currently expose provider-specific tool factories.
+Define your own tools with `toolDefinition()` from `@tanstack/ai`.
+
+See [Tools](/ai/tools/tools) for the general tool-definition flow, or
+[Provider Tools](/ai/tools/provider-tools) for other providers'
+native-tool offerings.
diff --git a/mintlify/ai/adapters/ollama.md b/mintlify/ai/adapters/ollama.md
new file mode 100644
index 000000000..4ac91b4bc
--- /dev/null
+++ b/mintlify/ai/adapters/ollama.md
@@ -0,0 +1,312 @@
+---
+title: Ollama
+id: ollama-adapter
+order: 4
+description: "Run local LLMs with Ollama in TanStack AI for private, no-cost AI on your own hardware via the @tanstack/ai-ollama adapter."
+keywords:
+  - tanstack ai
+  - ollama
+  - local llm
+  - self-hosted
+  - privacy
+  - llama
+  - offline ai
+  - adapter
+---
+
+The Ollama adapter provides access to local models running via Ollama, allowing you to run AI models on your own infrastructure with full privacy and no API costs.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-ollama
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { ollamaText } from "@tanstack/ai-ollama";
+
+const stream = chat({
+  adapter: ollamaText("llama3"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Basic Usage - Custom Host
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createOllamaChat } from "@tanstack/ai-ollama";
+
+const adapter = createOllamaChat("llama3", "http://your-server:11434");
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createOllamaChat } from "@tanstack/ai-ollama";
+
+// Custom host (URL string)
+const adapter = createOllamaChat("llama3", "http://your-server:11434");
+
+// Custom client config (e.g., custom headers, fetch)
+const adapter2 = createOllamaChat("llama3", {
+  host: "http://your-server:11434",
+  headers: { Authorization: "Bearer ..." },
+});
+```
+
+## Available Models
+
+To see available models on your Ollama instance:
+
+```bash
+ollama list
+```
+
+### Popular Models
+
+- `llama3` / `llama3.1` / `llama3.2` - Meta's Llama models
+- `mistral` / `mistral:7b` - Mistral AI models
+- `mixtral` - Mixtral MoE model
+- `codellama` - Code-focused Llama
+- `phi3` - Microsoft's Phi models
+- `gemma` / `gemma2` - Google's Gemma models
+- `qwen2` / `qwen2.5` - Alibaba's Qwen models
+- `deepseek-coder` - DeepSeek coding model
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { ollamaText } from "@tanstack/ai-ollama";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: ollamaText("llama3"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { ollamaText } from "@tanstack/ai-ollama";
+import { z } from "zod";
+
+const getLocalDataDef = toolDefinition({
+  name: "get_local_data",
+  description: "Get data from local storage",
+  inputSchema: z.object({
+    key: z.string(),
+  }),
+});
+
+const getLocalData = getLocalDataDef.server(async ({ key }) => {
+  // Access local data
+  return { data: "..." };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: ollamaText("llama3"),
+    messages,
+    tools: [getLocalData],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+**Note:** Tool support varies by model. Models like `llama3`, `mistral`, and `qwen2` generally have good tool calling support.
+
+## Model Options
+
+Ollama supports various provider-specific options. Unlike the other providers, Ollama nests its sampling and runner parameters inside an `options` object **within** `modelOptions` — `temperature`, `top_p`, and `num_predict` (the token-limit key) all live under `modelOptions.options`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { ollamaText } from "@tanstack/ai-ollama";
+
+const stream = chat({
+  adapter: ollamaText("llama3:latest"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    options: {
+      temperature: 0.7,
+      top_p: 0.9,
+      top_k: 40,
+      num_predict: 1000, // Max tokens to generate
+      repeat_penalty: 1.1,
+      num_ctx: 4096, // Context window size
+      num_gpu: -1, // GPU layers (-1 = auto)
+    },
+  },
+});
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, note that for Ollama they map to `modelOptions.options.temperature`, `modelOptions.options.top_p`, and `modelOptions.options.num_predict`. See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+### Advanced Options
+
+All sampling and runner parameters are nested under `modelOptions.options`:
+
+```typescript ignore
+modelOptions: {
+  options: {
+    // Sampling
+    temperature: 0.7,
+    top_p: 0.9,
+    top_k: 40,
+    min_p: 0.05,
+    typical_p: 1.0,
+
+    // Generation
+    num_predict: 1000,
+    repeat_penalty: 1.1,
+    repeat_last_n: 64,
+    penalize_newline: false,
+
+    // Performance
+    num_ctx: 4096,
+    num_batch: 512,
+    num_gpu: -1,
+    num_thread: 0, // 0 = auto
+
+    // Memory
+    use_mmap: true,
+    use_mlock: false,
+
+    // Mirostat sampling
+    mirostat: 0, // 0 = disabled, 1 = Mirostat, 2 = Mirostat 2.0
+    mirostat_tau: 5.0,
+    mirostat_eta: 0.1,
+  },
+}
+```
+
+## Summarization
+
+Summarize long text content locally:
+
+```typescript ignore
+import { summarize } from "@tanstack/ai";
+import { ollamaSummarize } from "@tanstack/ai-ollama";
+
+const result = await summarize({
+  adapter: ollamaSummarize("llama3"),
+  text: "Your long text to summarize...",
+  maxLength: 100,
+  style: "concise", // "concise" | "bullet-points" | "paragraph"
+});
+
+console.log(result.summary);
+```
+
+## Setting Up Ollama
+
+### 1. Install Ollama
+
+```bash
+# macOS
+brew install ollama
+
+# Linux
+curl -fsSL https://ollama.com/install.sh | sh
+
+# Windows
+# Download from https://ollama.com
+```
+
+### 2. Pull a Model
+
+```bash
+ollama pull llama3
+```
+
+### 3. Start Ollama Server
+
+```bash
+ollama serve
+```
+
+The server runs on `http://localhost:11434` by default.
+
+## Running on a Remote Server
+
+```typescript
+import { createOllamaChat } from "@tanstack/ai-ollama";
+
+const adapter = createOllamaChat("llama3", "http://your-server:11434");
+```
+
+To expose Ollama on a network interface:
+
+```bash
+OLLAMA_HOST=0.0.0.0:11434 ollama serve
+```
+
+## Environment Variables
+
+Optionally set the host in environment variables:
+
+```bash
+OLLAMA_HOST=http://localhost:11434
+```
+
+## API Reference
+
+### `ollamaText(model)`
+
+Creates an Ollama text/chat adapter using `OLLAMA_HOST` from the environment (defaults to `http://localhost:11434`).
+
+**Parameters:**
+
+- `model` - Model name (e.g. `"llama3"`, `"mistral:7b"`)
+
+### `createOllamaChat(model, hostOrConfig?)`
+
+Creates an Ollama text/chat adapter with an explicit host or client config.
+
+**Parameters:**
+
+- `model` - Model name
+- `hostOrConfig?` - Either an `OLLAMA_HOST`-style URL string, or an `OllamaClientConfig` object (e.g. `{ host, headers, fetch }`).
+
+### `ollamaSummarize(model)` / `createOllamaSummarize(model, hostOrConfig?)`
+
+Creates an Ollama summarization adapter — same signature shape as the chat adapter.
+
+## Benefits of Ollama
+
+- ✅ **Privacy** - Data stays on your infrastructure
+- ✅ **Cost** - No API costs after hardware
+- ✅ **Customization** - Use any compatible model
+- ✅ **Offline** - Works without internet
+- ✅ **Speed** - No network latency for local deployment
+
+## Limitations
+
+- **Image Generation**: Ollama does not support image generation. Use OpenAI or Gemini for image generation.
+- **Performance**: Depends on your hardware (GPU recommended for larger models)
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/openai) - Explore other providers
diff --git a/mintlify/ai/adapters/openai-compatible.md b/mintlify/ai/adapters/openai-compatible.md
new file mode 100644
index 000000000..2513c44aa
--- /dev/null
+++ b/mintlify/ai/adapters/openai-compatible.md
@@ -0,0 +1,243 @@
+---
+title: OpenAI-Compatible Adapter
+id: openai-compatible-adapter
+description: "Use any OpenAI-compatible provider (DeepSeek, Moonshot/Kimi, Together, Fireworks, Cerebras, Qwen, Perplexity, local servers, and more) in TanStack AI with one generic adapter."
+keywords:
+  - tanstack ai
+  - openai compatible
+  - deepseek
+  - moonshot
+  - kimi
+  - together
+  - fireworks
+  - cerebras
+  - qwen
+  - perplexity
+  - lm studio
+  - vllm
+  - adapter
+---
+
+Many providers expose the OpenAI **Chat Completions** API (`/chat/completions`) — DeepSeek, Moonshot/Kimi, Together, Fireworks, Cerebras, Alibaba Qwen, Perplexity, NVIDIA NIM, and local servers like LM Studio, Ollama, and vLLM. Instead of a dedicated package per provider, TanStack AI ships one generic adapter: point it at any compatible `baseURL`, give it your models, and you get the same type-safe `chat()` experience as the first-class adapters.
+
+Use this when your provider speaks the OpenAI Chat Completions wire format but doesn't have its own `@tanstack/ai-*` package. If a dedicated adapter exists (OpenAI, Grok, Groq, OpenRouter), prefer it — those carry curated per-model metadata.
+
+## Installation
+
+The adapter ships inside `@tanstack/ai-openai` under the `/compatible` subpath — no extra install:
+
+```bash
+npm install @tanstack/ai-openai
+```
+
+## Basic Usage
+
+Configure the provider once with `openaiCompatible({ baseURL, apiKey, models })`, then select a model per call. The returned model name is a type-safe union of the models you declared:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+
+const deepseek = openaiCompatible({
+  name: "deepseek", // optional label shown in devtools/errors (default: "openai-compatible")
+  baseURL: "https://api.deepseek.com/v1",
+  apiKey: process.env.DEEPSEEK_API_KEY!,
+  models: ["deepseek-chat", "deepseek-reasoner"],
+});
+
+const stream = chat({
+  adapter: deepseek("deepseek-chat"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+`deepseek("deepseek-reasoner")` is valid; `deepseek("gpt-4o")` is a type error — only declared models are accepted.
+
+## One-Shot Usage
+
+For a single model, skip the provider-factory and build the adapter inline with `openaiCompatibleText`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiCompatibleText } from "@tanstack/ai-openai/compatible";
+
+const stream = chat({
+  adapter: openaiCompatibleText("deepseek-chat", {
+    baseURL: "https://api.deepseek.com/v1",
+    apiKey: process.env.DEEPSEEK_API_KEY!,
+  }),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Declaring Models
+
+The `models` array accepts two forms, which you can mix:
+
+- **A bare string** — gets optimistic defaults: `text` + `image` input, with `streaming`, `function_calling`, and `structured_outputs` support. Good for mainstream chat models.
+- **A `createModel(name, capabilities)` definition** — declares precise per-model capabilities so the types match reality (e.g. a reasoning model with no image input).
+
+```typescript
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+import { createModel } from "@tanstack/ai";
+
+const provider = openaiCompatible({
+  baseURL: "https://api.deepseek.com/v1",
+  apiKey: process.env.DEEPSEEK_API_KEY!,
+  models: [
+    "deepseek-chat", // string → optimistic defaults
+    createModel("deepseek-reasoner", {
+      input: ["text"], // text only
+      features: ["reasoning", "structured_outputs"],
+    }),
+  ],
+});
+```
+
+> Capabilities are enforced at the type level. If a provider rejects a feature at runtime (e.g. tools on a model that doesn't support them), declare that model with `createModel` and omit the unsupported feature so the types stop you from calling it.
+
+## Configuration
+
+`openaiCompatible` accepts every OpenAI SDK `ClientOptions` field besides `apiKey`/`baseURL` (which are required and promoted to the top level). The most useful are `defaultHeaders` and `defaultQuery`, for providers that need extra auth or routing parameters:
+
+```typescript
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+
+const provider = openaiCompatible({
+  baseURL: "https://api.example.com/v1",
+  apiKey: process.env.EXAMPLE_API_KEY!,
+  models: ["some-model"],
+  defaultHeaders: { "X-Custom-Header": "value" },
+  defaultQuery: { "api-version": "2026-01-01" },
+});
+```
+
+## Chat Completions vs Responses
+
+By default the adapter targets the **Chat Completions** API (`/chat/completions`) — the surface virtually every compatible provider implements. For the rare provider that also implements OpenAI's **Responses** API (e.g. Azure OpenAI), opt in with `api: "responses"`:
+
+```typescript
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+
+const provider = openaiCompatible({
+  baseURL: "https://my-resource.openai.azure.com/openai/v1",
+  apiKey: process.env.AZURE_OPENAI_API_KEY!,
+  models: ["gpt-4o"],
+  api: "responses", // default is "chat-completions"
+});
+```
+
+## Supported Providers
+
+Any provider implementing the OpenAI Chat Completions API works. Common ones are below — **verify the `baseURL` and model ids against each provider's current docs**, since they change over time. Set the API key via the provider's own environment variable and pass it as `apiKey`.
+
+| Provider | `baseURL` | Example model |
+| --- | --- | --- |
+| DeepSeek | `https://api.deepseek.com/v1` | `deepseek-chat`, `deepseek-reasoner` |
+| Moonshot / Kimi | `https://api.moonshot.ai/v1` | `kimi-k2-0711-preview` |
+| Alibaba Qwen (DashScope, intl) | `https://dashscope-intl.aliyuncs.com/compatible-mode/v1` | `qwen-max`, `qwen-plus` |
+| Alibaba Qwen (DashScope, China) | `https://dashscope.aliyuncs.com/compatible-mode/v1` | `qwen-max` |
+| Together AI | `https://api.together.xyz/v1` | `meta-llama/Llama-3.3-70B-Instruct-Turbo` |
+| Fireworks AI | `https://api.fireworks.ai/inference/v1` | `accounts/fireworks/models/llama-v3p3-70b-instruct` |
+| Cerebras | `https://api.cerebras.ai/v1` | `llama-3.3-70b` |
+| DeepInfra | `https://api.deepinfra.com/v1/openai` | `meta-llama/Llama-3.3-70B-Instruct` |
+| Perplexity | `https://api.perplexity.ai` | `sonar`, `sonar-pro` |
+| Requesty | `https://router.requesty.ai/v1` | `openai/gpt-4o-mini` |
+| Mistral | `https://api.mistral.ai/v1` | `mistral-large-latest` |
+| Nebius | `https://api.studio.nebius.ai/v1` | `meta-llama/Llama-3.3-70B-Instruct` |
+| Z.AI (GLM) | `https://api.z.ai/api/paas/v4` | `glm-4.6` |
+| Baseten | `https://inference.baseten.co/v1` | model-dependent |
+| Hugging Face (router) | `https://router.huggingface.co/v1` | `meta-llama/Llama-3.3-70B-Instruct` |
+| NVIDIA NIM | `https://integrate.api.nvidia.com/v1` | `meta/llama-3.3-70b-instruct` |
+
+## Local & Self-Hosted Servers
+
+Point the adapter at any local OpenAI-compatible server. The API key is usually a placeholder:
+
+```typescript
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+
+// LM Studio
+const lmstudio = openaiCompatible({
+  name: "lmstudio",
+  baseURL: "http://localhost:1234/v1",
+  apiKey: "lm-studio",
+  models: ["local-model"],
+});
+
+// vLLM
+const vllm = openaiCompatible({
+  name: "vllm",
+  baseURL: "http://localhost:8000/v1",
+  apiKey: "not-needed",
+  models: ["meta-llama/Llama-3.3-70B-Instruct"],
+});
+
+// Ollama's OpenAI-compatible endpoint
+const ollama = openaiCompatible({
+  name: "ollama",
+  baseURL: "http://localhost:11434/v1",
+  apiKey: "ollama",
+  models: ["llama3.3"],
+});
+```
+
+> Ollama also has a dedicated adapter, [`@tanstack/ai-ollama`](/ai/adapters/ollama), which understands its native API. Use `openaiCompatible` only if you specifically want Ollama's OpenAI-compatible surface.
+
+## Azure OpenAI
+
+Azure uses a resource-scoped URL and a separate API-version. Use the `/openai/v1` endpoint with `defaultQuery` for the version and `defaultHeaders` for the `api-key` header:
+
+```typescript
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+
+const azure = openaiCompatible({
+  name: "azure",
+  baseURL: "https://YOUR_RESOURCE.openai.azure.com/openai/v1",
+  apiKey: process.env.AZURE_OPENAI_API_KEY!, // also sent as Bearer; Azure accepts the api-key header below
+  models: ["gpt-4o"], // your Azure deployment name
+  defaultQuery: { "api-version": "2026-01-01-preview" },
+  defaultHeaders: { "api-key": process.env.AZURE_OPENAI_API_KEY! },
+});
+```
+
+> Confirm the current `api-version` and endpoint shape in Azure's documentation — Azure's API surface evolves independently of OpenAI's.
+
+## Example: With Tools
+
+Tools work exactly as they do with any other adapter, for models that support function calling:
+
+```typescript
+import { chat, toolDefinition } from "@tanstack/ai";
+import { openaiCompatible } from "@tanstack/ai-openai/compatible";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather",
+  inputSchema: z.object({ location: z.string() }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  return { temperature: 72, conditions: "sunny" };
+});
+
+const deepseek = openaiCompatible({
+  baseURL: "https://api.deepseek.com/v1",
+  apiKey: process.env.DEEPSEEK_API_KEY!,
+  models: ["deepseek-chat"],
+});
+
+const stream = chat({
+  adapter: deepseek("deepseek-chat"),
+  messages: [{ role: "user", content: "What's the weather in Tokyo?" }],
+  tools: [getWeather],
+});
+```
+
+## Next Steps
+
+- [OpenAI Adapter](/ai/adapters/openai) - The first-class OpenAI adapter
+- [OpenRouter Adapter](/ai/adapters/openrouter) - Access 300+ models through one gateway
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Extending Adapters](/ai/advanced/extend-adapter) - Add custom models to any adapter
diff --git a/mintlify/ai/adapters/openai.md b/mintlify/ai/adapters/openai.md
new file mode 100644
index 000000000..02b638455
--- /dev/null
+++ b/mintlify/ai/adapters/openai.md
@@ -0,0 +1,717 @@
+---
+title: OpenAI
+id: openai-adapter
+order: 1
+description: "Use OpenAI models with TanStack AI — GPT-4o, GPT-5, DALL-E image generation, TTS, and Whisper transcription via @tanstack/ai-openai."
+keywords:
+  - tanstack ai
+  - openai
+  - gpt-4o
+  - gpt-5
+  - dall-e
+  - whisper
+  - openai tts
+  - adapter
+  - chatgpt
+---
+
+The OpenAI adapter provides access to OpenAI's models, including GPT-4o, GPT-5, image generation (DALL-E), text-to-speech (TTS), and audio transcription (Whisper).
+
+> Using a third-party provider that speaks the OpenAI API (DeepSeek, Moonshot/Kimi, Together, Fireworks, a local LM Studio/vLLM server, …)? See the [OpenAI-Compatible Adapter](/ai/adapters/openai-compatible) for a generic `openaiCompatible({ baseURL, apiKey, models })` factory.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-openai
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Chat Completions API
+
+`@tanstack/ai-openai` ships two text adapters that hit different OpenAI endpoints. `openaiText` (default) calls the Responses API (`/v1/responses`). `openaiChatCompletions` calls the older Chat Completions API (`/v1/chat/completions`).
+
+Pick whichever fits your wire format and feature needs:
+
+| | `openaiText` (Responses) | `openaiChatCompletions` (Chat Completions) |
+|---|---|---|
+| Endpoint | `/v1/responses` | `/v1/chat/completions` |
+| Reasoning summaries | Yes — set `modelOptions.reasoning.summary: 'auto'` to surface reasoning text via `REASONING_*` events | No — reasoning tokens are still consumed but cannot be exposed |
+| Wire-format compatibility | OpenAI-only | Matches the older de-facto industry shape (Grok, Groq, OpenRouter, many local model servers) |
+| Structured output streaming | `text.format: { type: 'json_schema', strict: true }` + `stream: true` | `response_format: { type: 'json_schema', strict: true }` + `stream: true` |
+
+Use `openaiText` when you want reasoning-summary streaming or OpenAI-specific Responses features. Use `openaiChatCompletions` when you're migrating off a Chat-Completions-style provider, share request-building code with other Chat-Completions adapters in your stack, or want the more battle-tested wire format.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiChatCompletions } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiChatCompletions("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+With an explicit API key:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createOpenaiChatCompletions } from "@tanstack/ai-openai";
+
+const adapter = createOpenaiChatCompletions("gpt-5.2", process.env.OPENAI_API_KEY!, {
+  // organization, baseURL, headers — all optional
+});
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+Both adapters work identically with [Structured Outputs](/ai/structured-outputs/overview) — including `stream: true` — and accept the same `modelOptions` (temperature, top_p, max_tokens, stop, …). The reasoning section below applies to `openaiText`; `openaiChatCompletions` accepts `modelOptions.reasoning.effort` but cannot stream summary text.
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createOpenaiChat } from "@tanstack/ai-openai";
+
+const adapter = createOpenaiChat("gpt-5.2", process.env.OPENAI_API_KEY!, {
+  // ... your config options
+});
+
+const stream = chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+## Configuration
+
+```typescript
+import { createOpenaiChat, type OpenAITextConfig } from "@tanstack/ai-openai";
+
+const config: Omit<OpenAITextConfig, "apiKey"> = {
+  organization: "org-...", // Optional
+  baseURL: "https://api.openai.com/v1", // Optional, for custom endpoints
+};
+
+const adapter = createOpenaiChat("gpt-5.2", process.env.OPENAI_API_KEY!, config);
+```
+ 
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.2"),
+    messages,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather",
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  // Fetch weather data
+  return { temperature: 72, conditions: "sunny" };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.2"),
+    messages,
+    tools: [getWeather],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Model Options
+
+OpenAI supports various provider-specific options. Sampling parameters live here too — `temperature`, `top_p`, and `max_output_tokens` (the Responses API token-limit key) — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+  modelOptions: {
+    temperature: 0.7,
+    max_output_tokens: 1000,
+    top_p: 0.9,
+  },
+});
+```
+
+> The `openaiChatCompletions` adapter targets `/v1/chat/completions`, where the token-limit key is `max_tokens` (not `max_output_tokens`). If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+### Reasoning
+
+Enable reasoning for models that support it (e.g., GPT-5, O3). This allows the model to show its reasoning process, which is streamed as `thinking` chunks:
+
+```typescript ignore
+modelOptions: {
+  reasoning: {
+    effort: "medium", // "none" | "minimal" | "low" | "medium" | "high"
+    summary: "detailed", // "auto" | "detailed" (optional)
+  },
+}
+```
+
+When reasoning is enabled, the model's reasoning process is streamed separately from the response text and appears as a collapsible thinking section in the UI.
+
+## Summarization
+
+Summarize long text content:
+
+```typescript
+import { summarize } from "@tanstack/ai";
+import { openaiSummarize } from "@tanstack/ai-openai";
+
+const result = await summarize({
+  adapter: openaiSummarize("gpt-5-mini"),
+  text: "Your long text to summarize...",
+  maxLength: 100,
+  style: "concise", // "concise" | "bullet-points" | "paragraph"
+});
+
+console.log(result.summary);
+```
+
+## Image Generation
+
+Generate images with DALL-E:
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { openaiImage } from "@tanstack/ai-openai";
+
+const result = await generateImage({
+  adapter: openaiImage("gpt-image-1"),
+  prompt: "A futuristic cityscape at sunset",
+  numberOfImages: 1,
+  size: "1024x1024",
+});
+
+console.log(result.images);
+```
+
+### Image Model Options
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { openaiImage } from "@tanstack/ai-openai";
+
+const result = await generateImage({
+  adapter: openaiImage("gpt-image-1"),
+  prompt: "...",
+  modelOptions: {
+    quality: "high", // "high" | "medium" | "low" | "auto"
+  },
+});
+```
+
+## Text-to-Speech
+
+Generate speech from text:
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { openaiSpeech } from "@tanstack/ai-openai";
+
+const result = await generateSpeech({
+  adapter: openaiSpeech("tts-1"),
+  text: "Hello, welcome to TanStack AI!",
+  voice: "alloy",
+  format: "mp3",
+});
+
+// result.audio contains base64-encoded audio
+console.log(result.format); // "mp3"
+```
+
+### TTS Voices
+
+Available voices: `alloy`, `echo`, `fable`, `onyx`, `nova`, `shimmer`, `ash`, `ballad`, `coral`, `sage`, `verse`
+
+### TTS Model Options
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { openaiSpeech } from "@tanstack/ai-openai";
+
+const result = await generateSpeech({
+  adapter: openaiSpeech("tts-1-hd"),
+  text: "High quality speech",
+  modelOptions: {
+    instructions: "Speak slowly and clearly.", // voice instructions (not supported by tts-1/tts-1-hd)
+  },
+});
+```
+
+## Transcription
+
+Transcribe audio to text:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { openaiTranscription } from "@tanstack/ai-openai";
+import { audioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: openaiTranscription("whisper-1"),
+  audio: audioFile, // File object or base64 string
+  language: "en",
+});
+
+console.log(result.text); // Transcribed text
+```
+
+### Transcription Model Options
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { openaiTranscription } from "@tanstack/ai-openai";
+import { audioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: openaiTranscription("whisper-1"),
+  audio: audioFile,
+  responseFormat: "verbose_json",
+  prompt: "Technical terms: API, SDK",
+  modelOptions: {
+    temperature: 0,
+    timestamp_granularities: ["word", "segment"],
+  },
+});
+
+// Access the transcribed text
+console.log(result.text);
+```
+
+### Speaker Diarization
+
+Use `gpt-4o-transcribe-diarize` for speaker-labeled transcripts:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { openaiTranscription } from "@tanstack/ai-openai";
+import { meetingAudioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: openaiTranscription("gpt-4o-transcribe-diarize"),
+  audio: meetingAudioFile,
+  modelOptions: {
+    known_speaker_names: ["agent", "customer"],
+    known_speaker_references: [
+      "data:audio/wav;base64,...",
+      "data:audio/wav;base64,...",
+    ],
+  },
+});
+
+for (const segment of result.segments ?? []) {
+  console.log(segment.speaker, segment.start, segment.end, segment.text);
+}
+```
+
+When no response format is specified, `gpt-4o-transcribe-diarize` requests default to `response_format: "diarized_json"` and `chunking_strategy: "auto"`; passing a top-level `responseFormat` of `"json"` or `"text"` opts out of speaker segments. `known_speaker_names` and `known_speaker_references` must be provided together (up to 4, matching lengths). OpenAI does not support `prompt`, `include`, or `timestamp_granularities` with diarized transcription.
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+OPENAI_API_KEY=sk-...
+```
+
+## API Reference
+
+Every factory pair follows the same shape: the short factory (`openaiText`, `openaiImage`, …) reads `OPENAI_API_KEY` from the environment, while the `create*` variant takes an explicit API key. Both take `model` as the first argument.
+
+### `openaiText(model, config?)`
+
+Creates an OpenAI text adapter against the Responses API (`/v1/responses`) using `OPENAI_API_KEY` from the environment.
+
+**Parameters:**
+
+- `model` - OpenAI chat model id (e.g. `"gpt-5.2"`, `"gpt-4o-mini"`)
+- `config?.organization` - Organization ID (optional)
+- `config?.baseURL` - Custom base URL (optional)
+
+### `createOpenaiChat(model, apiKey, config?)`
+
+Creates an OpenAI text adapter (Responses API) with an explicit API key.
+
+### `openaiChatCompletions(model, config?)`
+
+Creates an OpenAI text adapter that targets `/v1/chat/completions` instead of the Responses API. See [Chat Completions API](#chat-completions-api) for when to use this over `openaiText`.
+
+### `createOpenaiChatCompletions(model, apiKey, config?)`
+
+Creates an OpenAI chat-completions adapter with an explicit API key.
+
+### `openaiSummarize(model, config?)` / `createOpenaiSummarize(model, apiKey, config?)`
+
+Creates an OpenAI summarization adapter.
+
+### `openaiImage(model, config?)` / `createOpenaiImage(model, apiKey, config?)`
+
+Creates an OpenAI image generation adapter (DALL-E, gpt-image).
+
+### `openaiSpeech(model, config?)` / `createOpenaiSpeech(model, apiKey, config?)`
+
+Creates an OpenAI text-to-speech adapter.
+
+### `openaiTranscription(model, config?)` / `createOpenaiTranscription(model, apiKey, config?)`
+
+Creates an OpenAI transcription adapter for Whisper, GPT-4o transcription, and GPT-4o diarized transcription models.
+
+### `openaiVideo(model, config?)` / `createOpenaiVideo(model, apiKey, config?)`
+
+Creates an OpenAI video generation adapter (Sora). _Experimental._
+
+### `openaiRealtime(...)` / `openaiRealtimeToken(...)`
+
+Realtime voice adapters. See [Realtime Voice Chat](/ai/media/realtime-chat) for usage.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Other Adapters](/ai/adapters/anthropic) - Explore other providers
+
+## Provider Tools
+
+OpenAI exposes several native tools beyond user-defined function calls.
+Import them from `@tanstack/ai-openai/tools` and pass them into
+`chat({ tools: [...] })`.
+
+> For the full concept, a comparison matrix, and type-gating details, see
+> [Provider Tools](/ai/tools/provider-tools).
+
+### `webSearchTool`
+
+Enables the model to run a web search and return grounded results with
+citations. Pass a `WebSearchToolConfig` object (typed from the OpenAI SDK)
+to configure the tool.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { webSearchTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "What's new in AI this week?" }],
+  tools: [webSearchTool({ type: "web_search" })],
+});
+```
+
+**Supported models:** GPT-4o, GPT-5, and Responses API-capable models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `webSearchPreviewTool`
+
+The preview variant of web search with additional options for controlling
+search context size and user location. Use this when you want fine-grained
+control over the search context sent to the model.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { webSearchPreviewTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Latest news about TypeScript" }],
+  tools: [
+    webSearchPreviewTool({
+      type: "web_search_preview_2025_03_11",
+      search_context_size: "high",
+    }),
+  ],
+});
+```
+
+**Supported models:** GPT-4o and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `fileSearchTool`
+
+Searches OpenAI vector stores that you have pre-populated, letting the model
+retrieve relevant document chunks. Provide the `vector_store_ids` to search
+and optionally limit results with `max_num_results` (1–50).
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { fileSearchTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "What does the handbook say about PTO?" }],
+  tools: [
+    fileSearchTool({
+      type: "file_search",
+      vector_store_ids: ["vs_abc123"],
+      max_num_results: 5,
+    }),
+  ],
+});
+```
+
+**Supported models:** GPT-4o and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `imageGenerationTool`
+
+Allows the model to generate images inline during a conversation using
+DALL-E/GPT-Image. Pass quality, size, and style options via the config object.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { imageGenerationTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Draw a logo for my app" }],
+  tools: [
+    imageGenerationTool({
+      quality: "high",
+      size: "1024x1024",
+    }),
+  ],
+});
+```
+
+**Supported models:** GPT-5 and GPT-Image-capable models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `codeInterpreterTool`
+
+Gives the model a sandboxed Python execution environment. The `container`
+field configures the execution environment; pass the full
+`CodeInterpreterToolConfig` object.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { codeInterpreterTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Analyse this CSV and plot a chart" }],
+  tools: [
+    codeInterpreterTool({ type: "code_interpreter", container: { type: "auto" } }),
+  ],
+});
+```
+
+**Supported models:** GPT-4o and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `mcpTool`
+
+Connects the model to a remote MCP (Model Context Protocol) server, exposing
+all its capabilities as callable tools. Provide either `server_url` or
+`connector_id` — not both.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { mcpTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "List my GitHub issues" }],
+  tools: [
+    mcpTool({
+      server_url: "https://mcp.example.com",
+      server_label: "github",
+    }),
+  ],
+});
+```
+
+**Supported models:** GPT-4o and above. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `computerUseTool`
+
+Lets the model observe a virtual desktop via screenshots and interact with
+it using keyboard and mouse events. Provide the display dimensions and the
+execution environment type.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { computerUseTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("computer-use-preview"),
+  messages: [{ role: "user", content: "Open Chrome and navigate to example.com" }],
+  tools: [
+    computerUseTool({
+      type: "computer_use_preview",
+      display_width: 1024,
+      display_height: 768,
+      environment: "browser",
+    }),
+  ],
+});
+```
+
+**Supported models:** `computer-use-preview`. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `localShellTool`
+
+Provides the model with a local shell for executing system commands. Takes no
+arguments — the tool is enabled simply by including it in the `tools` array.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { localShellTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Run the test suite and summarise failures" }],
+  tools: [localShellTool()],
+});
+```
+
+**Supported models:** GPT-5.x and other agent-capable models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `shellTool`
+
+A function-style shell tool that exposes shell execution as a structured
+function call. Pass an `environment` object to attach container config and
+hosted skills.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { shellTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Count lines in all JS files" }],
+  tools: [shellTool()],
+});
+```
+
+**Supported models:** GPT-5.x and other agent-capable models. Responses API
+only — Chat Completions does not support the shell tool. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+#### Attaching hosted skills
+
+Pass `environment.skills` to load provider-managed skill bundles into the
+shell's container (Responses API only).
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { shellTool } from "@tanstack/ai-openai/tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.2"),
+    messages,
+    tools: [
+      shellTool({
+        environment: {
+          type: "container_auto",
+          skills: [
+            { type: "skill_reference", skill_id: "skill_abc", version: "2" },
+          ],
+        },
+      }),
+    ],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+For the full reference — skill shape, `version` string format, and the
+Anthropic equivalent — see [Provider Skills](/ai/tools/provider-skills).
+
+### `applyPatchTool`
+
+Lets the model apply unified-diff patches to modify files directly. Takes no
+arguments — include it in the `tools` array to enable patch application.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { applyPatchTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Fix the import paths in src/index.ts" }],
+  tools: [applyPatchTool()],
+});
+```
+
+**Supported models:** GPT-5.x and other agent-capable models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `customTool`
+
+Defines a custom Responses API tool with an explicit name, description, and
+format. Use this when none of the structured tool types fits your use case.
+Unlike branded provider tools, `customTool` returns a plain `Tool` and is
+accepted by any chat model.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { customTool } from "@tanstack/ai-openai/tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Look up order #1234" }],
+  tools: [
+    customTool({
+      type: "custom",
+      name: "lookup_order",
+      description: "Look up the status of a customer order by order ID",
+    }),
+  ],
+});
+```
+
+**Supported models:** all Responses API models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
diff --git a/mintlify/ai/adapters/opencode.md b/mintlify/ai/adapters/opencode.md
new file mode 100644
index 000000000..0ea49d540
--- /dev/null
+++ b/mintlify/ai/adapters/opencode.md
@@ -0,0 +1,186 @@
+---
+title: OpenCode
+id: opencode-adapter
+order: 14
+description: "Use OpenCode as a chat backend in TanStack AI — agent harness with local tool execution, token-level streaming, stateful sessions, and tool bridging via @tanstack/ai-opencode."
+keywords:
+  - tanstack ai
+  - opencode
+  - opencode sdk
+  - harness
+  - agent
+  - coding agent
+  - adapter
+---
+
+The OpenCode adapter runs [OpenCode](https://opencode.ai) as a chat backend, driving it over its local HTTP server (`@opencode-ai/sdk`). Unlike HTTP provider adapters, this is a **harness adapter**: OpenCode runs its own agent loop and executes its own tools — shell commands, file reads and edits, search — locally on your server. Each `chat()` call runs one full harness turn; assistant text and reasoning stream as true token-level deltas, and the harness's tool activity streams back as already-resolved tool-call events your UI can render.
+
+> **Server-only.** The adapter spawns (or attaches to) an `opencode serve` process, so it only works in a Node.js server environment — never in the browser. Treat it like giving OpenCode a shell on the machine it runs on, and configure permissions accordingly.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-opencode
+```
+
+The `opencode` CLI must be installed and its providers authenticated on the host:
+
+```bash
+npm install -g opencode-ai
+opencode auth login
+```
+
+A runnable demo lives at [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — switch the harness (Claude Code, Codex, OpenCode, Grok Build) and sandbox provider per run, with session resume, the harness tool timeline, permission modes, and tool bridging, wired into a TanStack Start app.
+
+## Models
+
+OpenCode is provider-agnostic: it resolves any `provider/model` id its configured providers support. Address models as `provider/model` (the adapter splits on the first `/`):
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { opencodeText } from "@tanstack/ai-opencode";
+
+const stream = chat({
+  adapter: opencodeText("anthropic/claude-sonnet-4-5", {
+    directory: "/path/to/project",
+    permissionMode: "acceptEdits",
+  }),
+  messages: [{ role: "user", content: "Fix the failing test in utils.test.ts" }],
+});
+```
+
+## Configuration
+
+| Option                | Description                                                                                                                                                  |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `directory`           | Working directory for the harness session. Defaults to `process.cwd()`.                                                                                      |
+| `baseUrl`             | Attach to an already-running `opencode serve` (e.g. `http://127.0.0.1:4096`) instead of spawning a new server per turn.                                       |
+| `hostname`            | Hostname for the spawned server. Defaults to the SDK default (`127.0.0.1`).                                                                                   |
+| `port`                | Port for the spawned server. Defaults to the SDK default (`4096`).                                                                                           |
+| `permissionMode`      | `'default'` (bridged tools run, everything else that prompts is rejected), `'acceptEdits'` (also auto-approves file edits), or `'bypassPermissions'` (allow all). |
+| `onPermissionRequest` | Custom permission handler; replaces the default policy entirely.                                                                                             |
+| `config`              | Extra OpenCode config merged with the adapter's MCP and permission config.                                                                                    |
+
+Per-call overrides — `sessionId`, `permissionMode`, `directory` — go through `modelOptions`.
+
+## Permissions
+
+OpenCode asks for permission before mutating files or running commands. A headless server has no one to answer those prompts, so the adapter applies a policy automatically — it never hangs a turn:
+
+- **`'default'`** — bridged TanStack tools run; anything else that would prompt (edits, shell, web fetch) is rejected.
+- **`'acceptEdits'`** — additionally auto-approves file-mutation requests (edit / write / patch).
+- **`'bypassPermissions'`** — approves everything. Only use this against a sandbox or scratch directory.
+
+Provide `onPermissionRequest` to implement your own policy (e.g. allow-list specific commands).
+
+## Stateful Sessions
+
+OpenCode sessions are stateful — the harness keeps the full working context (files read, commands run, conclusions reached) between turns. The adapter surfaces the session id of every fresh run as a custom stream event named `opencode.session-id`; thread it back via `modelOptions.sessionId` to resume. When resuming, only the latest user message is sent — the harness already holds the prior context.
+
+Server endpoint:
+
+```typescript
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from "@tanstack/ai";
+import { opencodeText } from "@tanstack/ai-opencode";
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request);
+
+  // Extra fields the client puts in the connection `body` arrive here.
+  const sessionId =
+    typeof params.forwardedProps.sessionId === "string"
+      ? params.forwardedProps.sessionId
+      : undefined;
+
+  const stream = chat({
+    adapter: opencodeText("anthropic/claude-sonnet-4-5", {
+      directory: "/path/to/project",
+      permissionMode: "acceptEdits",
+    }),
+    messages: params.messages,
+    modelOptions: { sessionId },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Client (React) — capture the session id from the custom event and send it back on subsequent requests:
+
+```typescript
+import { useState } from "react";
+import { useChat } from "@tanstack/ai-react";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+function CodingAssistant() {
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat", () => ({
+      body: { sessionId },
+    })),
+    onCustomEvent: (name, value) => {
+      if (
+        name === "opencode.session-id" &&
+        typeof value === "object" &&
+        value !== null &&
+        "sessionId" in value &&
+        typeof value.sessionId === "string"
+      ) {
+        setSessionId(value.sessionId);
+      }
+    },
+  });
+
+  // ... render messages; harness tool activity (bash, edit, read, ...)
+  // arrives as regular tool-call parts with results.
+}
+```
+
+Sessions live on the server that ran them, so resuming only works against the same server instance (or a shared `baseUrl`).
+
+## Tools
+
+Two kinds of tools flow through this adapter:
+
+1. **Built-in harness tools** are executed by OpenCode itself and stream back as tool-call events with results already attached: `bash`, `edit`, `write`, `read`, `grep`, and the agent's running todo plan (surfaced as an `opencode.todo` custom event). Your code never executes them.
+
+2. **Your TanStack tools** are bridged *into* the harness: the adapter starts a short-lived Streamable-HTTP MCP server on `127.0.0.1` for the duration of the turn and registers it with OpenCode. Define tools as usual with `toolDefinition().server()`; tool-call events come back under the names you registered (OpenCode prefixes MCP tools `tanstack_…` internally, which the adapter strips).
+
+```typescript
+import { z } from "zod";
+import { chat, toolDefinition } from "@tanstack/ai";
+import { opencodeText } from "@tanstack/ai-opencode";
+
+const lookupTicket = toolDefinition({
+  name: "lookup_ticket",
+  description: "Look up an issue ticket by id",
+  inputSchema: z.object({ ticketId: z.string() }),
+}).server(async ({ ticketId }) => {
+  return { ticketId, status: "open", title: "Crash on startup" };
+});
+
+const stream = chat({
+  adapter: opencodeText("anthropic/claude-sonnet-4-5"),
+  messages: [{ role: "user", content: "What's the status of ticket T-123?" }],
+  tools: [lookupTicket],
+});
+```
+
+**Client-side and approval-gated tools are not supported.** The harness executes tools inside a live process, which cannot pause across HTTP requests to wait for a browser round-trip or a human approval. Passing a tool without a server `execute()` implementation — or one marked `needsApproval` — fails fast with a descriptive error. Run those tools outside the harness with a regular provider adapter.
+
+## Structured Output
+
+`structuredOutput()` is best-effort: OpenCode's prompt API has no native JSON-schema channel, so the schema is embedded as a prompt instruction in a fresh, one-shot session and the final text is parsed (markdown fences are stripped when present). It works for finalization after a chat, but a plain provider adapter (e.g. `@tanstack/ai-openai`) is the better choice when structured extraction is the primary job — it's faster, deterministic, and doesn't spawn a harness.
+
+## Limitations
+
+- **Server-only (Node).** The adapter spawns or attaches to an `opencode serve` process.
+- **The harness owns the agent loop.** TanStack's agent-loop strategies and per-iteration middleware don't apply inside a harness turn.
+- **No sampling controls.** `temperature`-style options don't exist here.
+- **Sessions are server-local.** Resume requires hitting the same server instance (or a shared `baseUrl`).
+- **Cold starts.** Spawning a server per turn adds first-token latency; point the adapter at a long-lived `baseUrl` to avoid it.
diff --git a/mintlify/ai/adapters/openrouter.md b/mintlify/ai/adapters/openrouter.md
new file mode 100644
index 000000000..6845fc582
--- /dev/null
+++ b/mintlify/ai/adapters/openrouter.md
@@ -0,0 +1,334 @@
+---
+title: OpenRouter Adapter
+id: openrouter-adapter
+description: "Access 300+ LLMs from OpenAI, Anthropic, Google, Meta, Mistral, and more through a single API with OpenRouter in TanStack AI."
+keywords:
+  - tanstack ai
+  - openrouter
+  - multi-provider
+  - unified api
+  - llm gateway
+  - 300 models
+  - adapter
+---
+
+OpenRouter is TanStack AI's first official AI partner and the recommended starting point for most projects. It provides access to 300+ models from OpenAI, Anthropic, Google, Meta, Mistral, and many more — all through a single API key and unified interface.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-openrouter
+```
+
+## Basic Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+ 
+const stream = chat({
+  adapter: openRouterText("openai/gpt-5"),
+  messages: [{ role: "user", content: "Hello!" }], 
+});
+```
+
+## Configuration
+
+```typescript
+import { createOpenRouterText } from "@tanstack/ai-openrouter";
+
+const adapter = createOpenRouterText(
+  "openai/gpt-5",
+  process.env.OPENROUTER_API_KEY!,
+  {
+    serverURL: "https://openrouter.ai/api/v1", // Optional
+    httpReferer: "https://your-app.com", // Optional, for rankings
+    appTitle: "Your App Name", // Optional, for rankings
+  },
+);
+```
+
+## Available Models
+
+OpenRouter provides access to 300+ models from various providers. Models use the format `provider/model-name`:
+
+```text
+model: "openai/gpt-5.1"
+model: "anthropic/claude-sonnet-4.5"
+model: "google/gemini-3.1-pro-preview"
+model: "meta-llama/llama-4-maverick"
+model: "deepseek/deepseek-v3.2"
+```
+
+See the full list at [openrouter.ai/models](https://openrouter.ai/models).
+
+## Example: Chat Completion
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+ 
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openRouterText("openai/gpt-5"),
+    messages, 
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Example: With Tools
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather",
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  return { temperature: 72, conditions: "sunny" };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openRouterText("openai/gpt-5"),
+    messages,
+    tools: [getWeather],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+ 
+ 
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+OPENROUTER_API_KEY=sk-or-...
+```
+
+## Model Routing
+
+OpenRouter can automatically route requests to the best available provider:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openRouterText("openrouter/auto"),
+    messages,
+    modelOptions: {
+      models: [
+        "openai/gpt-5.5",
+        "anthropic/claude-sonnet-4.5",
+        "google/gemini-3.1-pro-preview",
+      ],
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Model Options
+
+OpenRouter supports various provider-specific options. Sampling parameters live here too — `temperature`, `topP`, and `maxCompletionTokens` (OpenRouter's token-limit key for the chat adapter) — rather than as root-level props on `chat()`:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openRouterText("anthropic/claude-sonnet-4.5"),
+    messages,
+    modelOptions: {
+      temperature: 0.7,
+      topP: 0.9,
+      maxCompletionTokens: 1024,
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+> If you previously passed `temperature` / `topP` / `maxTokens` at the root of `chat()`, see [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+## Chat Completions vs Responses (beta)
+
+OpenRouter exposes two OpenAI-compatible wire formats, and the adapter
+package ships one of each:
+
+| Adapter                    | Endpoint                  | Status   | When to use                                                                  |
+| -------------------------- | ------------------------- | -------- | ---------------------------------------------------------------------------- |
+| `openRouterText`           | `/v1/chat/completions`    | Stable   | Default for almost everything. Broadest model + tool support.                |
+| `openRouterResponsesText`  | `/v1/responses`           | Beta     | OpenAI Responses-shaped request/response; richer multi-turn state on OpenAI-style models. |
+
+Both adapters route to any underlying model OpenRouter supports
+(`anthropic/...`, `google/...`, `meta-llama/...`, etc.) — the wire format
+describes how your client talks to OpenRouter, not which provider answers.
+`/v1/responses` is OpenAI's newer API surface; OpenRouter implements it so
+clients that prefer that wire format can use it across the same 300+
+model catalogue.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openRouterResponsesText } from "@tanstack/ai-openrouter";
+
+const stream = chat({
+  adapter: openRouterResponsesText("anthropic/claude-sonnet-4.5"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+```
+
+Caveats while the Responses adapter is in beta:
+
+- Function tools are supported; OpenRouter's branded server-tools (web
+  search, file search, …) are not yet wired through this path — use
+  `openRouterText` if you need those.
+- If in doubt, prefer `openRouterText`. The Chat Completions endpoint has
+  broader provider coverage and feature parity today.
+
+## Cost Tracking
+
+OpenRouter reports the actual cost of each request inline on the streamed
+response. When present, the adapter forwards it on the terminal `RUN_FINISHED`
+event under `usage.cost`, with OpenRouter's per-request breakdown under
+`usage.costDetails`. This is the cost OpenRouter itself reports for the
+request — it is **not** computed locally from token counts, so it already
+accounts for routing, fallback providers, BYOK, and cached-token pricing. See
+OpenRouter's [Usage Accounting](https://openrouter.ai/docs/use-cases/usage-accounting)
+docs for the meaning and units of these fields.
+
+```typescript ignore
+import { chat, type RunFinishedEvent, type StreamChunk } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+
+function isRunFinished(chunk: StreamChunk): chunk is RunFinishedEvent {
+  return "finishReason" in chunk;
+}
+
+for await (const chunk of chat({
+  adapter: openRouterText("openai/gpt-5"),
+  messages: [{ role: "user", content: "Hello!" }],
+})) {
+  if (isRunFinished(chunk)) {
+    console.log("cost:", chunk.usage?.cost);
+    console.log("breakdown:", chunk.usage?.costDetails);
+  }
+}
+```
+
+The same `usage` (including `cost` / `costDetails`) is passed to middleware via
+the `onUsage` and `onFinish` hooks. When OpenRouter does not report a cost, the
+fields are simply absent and the stream completes normally. Both
+`openRouterText` and `openRouterResponsesText` populate cost when OpenRouter
+returns it.
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+
+## Provider Tools
+
+> **Migrated from `createWebSearchTool`?** This factory was renamed to
+> `webSearchTool` and moved to the `/tools` subpath in this release.
+> See [Migration Guide §6](/ai/migration/migration#6-provider-tools-moved-to-tools-subpath)
+> for the exact before/after.
+
+OpenRouter's gateway exposes web search via a plugin that works across
+any proxied chat model. Import it from `@tanstack/ai-openrouter/tools`.
+
+> For the full concept, a comparison matrix, and type-gating details, see
+> [Provider Tools](/ai/tools/provider-tools).
+
+### `webSearchTool`
+
+Adds web search capability to any OpenRouter-proxied chat model. The factory
+accepts OpenRouter's `WebSearchConfig` directly — pick the `engine`
+(`auto`, `native`, `exa`, `firecrawl`, or `parallel`), cap results with
+`maxResults` / `maxTotalResults`, restrict which sites can appear in results
+with `allowedDomains` / `excludedDomains`, and optionally pass
+`searchContextSize` or `userLocation` for finer control.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+import { webSearchTool } from "@tanstack/ai-openrouter/tools";
+
+const stream = chat({
+  adapter: openRouterText("openai/gpt-5"),
+  messages: [{ role: "user", content: "What's new in AI this week?" }],
+  tools: [
+    webSearchTool({
+      engine: "exa",
+      maxResults: 5,
+      allowedDomains: ["arxiv.org", "openai.com"],
+    }),
+  ],
+});
+```
+
+**Supported models:** all OpenRouter chat models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
+### `webFetchTool`
+
+Lets any OpenRouter-proxied chat model fetch the full contents of a URL the
+model chooses, instead of running a search. The factory accepts OpenRouter's
+`WebFetchServerToolConfig` directly — pick the fetch `engine` (`auto` — the
+default, `native`, `openrouter`, `exa`, or `firecrawl`), cap how much page
+content the model receives with `maxContentTokens`, cap how many fetches the
+model can make per request with `maxUses`, and restrict which URLs the model
+can fetch with `allowedDomains` / `blockedDomains`.
+
+> The `native` engine routes to the underlying provider's own fetch (for
+> example, Anthropic's `web_fetch` on Claude models). Native fetch
+> capabilities vary, so `allowedDomains` and `blockedDomains` may be
+> ignored. Use `openrouter`, `exa`, or `firecrawl` if you need consistent
+> behaviour across models.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openRouterText } from "@tanstack/ai-openrouter";
+import { webFetchTool } from "@tanstack/ai-openrouter/tools";
+
+const stream = chat({
+  adapter: openRouterText("openai/gpt-5"),
+  messages: [
+    { role: "user", content: "Summarize https://example.com/article" },
+  ],
+  tools: [
+    webFetchTool({
+      engine: "openrouter",
+      maxContentTokens: 4000,
+      allowedDomains: ["example.com"],
+    }),
+  ],
+});
+```
+
+**Supported models:** all OpenRouter chat models. See [Provider Tools](/ai/tools/provider-tools#which-models-support-which-tools).
+
diff --git a/mintlify/ai/advanced/built-in-middleware.md b/mintlify/ai/advanced/built-in-middleware.md
new file mode 100644
index 000000000..7c9bf1cb1
--- /dev/null
+++ b/mintlify/ai/advanced/built-in-middleware.md
@@ -0,0 +1,247 @@
+---
+title: Built-in Middleware
+id: built-in-middleware
+order: 2
+description: "Ready-made TanStack AI chat() middleware — toolCacheMiddleware for caching tool results, contentGuardMiddleware for redacting streamed text, and otelMiddleware for OpenTelemetry tracing."
+keywords:
+  - tanstack ai
+  - middleware
+  - built-in middleware
+  - tool cache
+  - content guard
+  - redaction
+  - opentelemetry
+---
+
+TanStack AI ships ready-made middleware so you don't have to hand-roll the common cases. Each one is an ordinary [`ChatMiddleware`](/ai/advanced/middleware) — drop it into the `middleware` array of any `chat()` call. This page documents every built-in.
+
+| Middleware | Import | What it does |
+|------------|--------|--------------|
+| `toolCacheMiddleware` | `@tanstack/ai/middlewares` | Cache tool-call results by name + arguments |
+| `contentGuardMiddleware` | `@tanstack/ai/middlewares` | Redact / transform / block streamed text content |
+| `otelMiddleware` | `@tanstack/ai/middlewares/otel` | Emit OpenTelemetry spans + GenAI metrics |
+
+> `toolCacheMiddleware` and `contentGuardMiddleware` are exported from the main `@tanstack/ai/middlewares` barrel. `otelMiddleware` lives on its own subpath (`@tanstack/ai/middlewares/otel`) so that importing the barrel never eagerly pulls in `@opentelemetry/api` (an optional peer dependency).
+
+## toolCacheMiddleware
+
+Caches tool call results based on tool name and arguments. When a tool is called with the same name and arguments as a previous call, the cached result is returned immediately without re-executing the tool.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { toolCacheMiddleware } from "@tanstack/ai/middlewares";
+import { weatherTool, stockTool } from "./tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "What's the weather in Paris?" }],
+  tools: [weatherTool, stockTool],
+  middleware: [
+    toolCacheMiddleware({
+      ttl: 60_000, // Cache entries expire after 60 seconds
+      maxSize: 50, // Keep at most 50 entries (LRU eviction)
+      toolNames: ["getWeather"], // Only cache specific tools
+    }),
+  ],
+});
+```
+
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `maxSize` | `number` | `100` | Maximum cache entries. Oldest evicted first (LRU). Only applies to the default in-memory storage. |
+| `ttl` | `number` | `Infinity` | Time-to-live in milliseconds. Expired entries are not served. |
+| `toolNames` | `string[]` | All tools | Only cache these tools. Others pass through. |
+| `keyFn` | `(toolName, args) => string` | `JSON.stringify([toolName, args])` | Custom cache key derivation. |
+| `storage` | `ToolCacheStorage` | In-memory Map | Custom storage backend. When provided, `maxSize` is ignored — the storage manages its own capacity. |
+
+**Behaviors:**
+
+- Only successful tool calls are cached — errors are never stored
+- Cache hits trigger `{ type: 'skip', result }` via `onBeforeToolCall`
+- LRU eviction: when `maxSize` is reached, the oldest entry is removed (default storage only)
+- Cache hits refresh the entry's LRU position (moved to most-recently-used)
+
+**Custom key function** — useful when you want to ignore certain arguments:
+
+```typescript
+import { toolCacheMiddleware } from "@tanstack/ai/middlewares";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+toolCacheMiddleware({
+  keyFn: (toolName, args) => {
+    // Ignore pagination, cache by query only. `args` is `unknown`, so
+    // narrow it with a type guard before destructuring.
+    if (!isRecord(args)) return JSON.stringify([toolName, args]);
+    const { page, ...rest } = args;
+    return JSON.stringify([toolName, rest]);
+  },
+});
+```
+
+### Custom Storage
+
+By default the cache lives in-memory and is scoped to a single `toolCacheMiddleware()` instance. Pass a `storage` option to use an external backend like Redis, localStorage, or a database. This also enables **sharing a cache across multiple `chat()` calls**.
+
+The storage interface:
+
+```typescript
+import { type ToolCacheEntry, type ToolCacheStorage } from "@tanstack/ai/middlewares";
+
+// Implement this interface (exported from `@tanstack/ai/middlewares`):
+interface MyStorage extends ToolCacheStorage {
+  getItem: (key: string) => ToolCacheEntry | undefined | Promise<ToolCacheEntry | undefined>;
+  setItem: (key: string, value: ToolCacheEntry) => void | Promise<void>;
+  deleteItem: (key: string) => void | Promise<void>;
+}
+
+// ToolCacheEntry is { result: unknown; timestamp: number }
+```
+
+All methods may return a `Promise` for async backends. The middleware handles TTL checking — your storage just needs to store and retrieve entries.
+
+**Redis example:**
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { createClient } from "redis";
+import { toolCacheMiddleware, type ToolCacheStorage } from "@tanstack/ai/middlewares";
+import { adapter, messages } from "./server";
+import { weatherTool } from "./tools";
+
+const redis = createClient();
+
+const redisStorage: ToolCacheStorage = {
+  getItem: async (key) => {
+    const raw = await redis.get(`tool-cache:${key}`);
+    return raw ? JSON.parse(raw) : undefined;
+  },
+  setItem: async (key, value) => {
+    await redis.set(`tool-cache:${key}`, JSON.stringify(value));
+  },
+  deleteItem: async (key) => {
+    await redis.del(`tool-cache:${key}`);
+  },
+};
+
+const stream = chat({
+  adapter,
+  messages,
+  tools: [weatherTool],
+  middleware: [toolCacheMiddleware({ storage: redisStorage, ttl: 60_000 })],
+});
+```
+
+**Sharing a cache across requests:**
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { toolCacheMiddleware, type ToolCacheStorage } from "@tanstack/ai/middlewares";
+import { globalCache, app, adapter } from "./server";
+import { weatherTool } from "./tools";
+
+// Create storage once, reuse across chat() calls
+const sharedStorage: ToolCacheStorage = {
+  getItem: (key) => globalCache.get(key),
+  setItem: (key, value) => { globalCache.set(key, value); },
+  deleteItem: (key) => { globalCache.delete(key); },
+};
+
+// Both requests share the same cache
+app.post("/api/chat", async (req: { body: { messages: unknown[] } }) => {
+  const stream = chat({
+    adapter,
+    messages: req.body.messages,
+    tools: [weatherTool],
+    middleware: [toolCacheMiddleware({ storage: sharedStorage })],
+  });
+  return toServerSentEventsResponse(stream);
+});
+```
+
+## contentGuardMiddleware
+
+Filters or transforms streamed text content as it flows through `onChunk`. Use it to redact sensitive data (SSNs, emails, API keys), enforce a profanity filter, or rewrite text on the fly. Rules are applied to `TEXT_MESSAGE_CONTENT` chunks; all other chunk types pass through untouched.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { contentGuardMiddleware } from "@tanstack/ai/middlewares";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Tell me about customer 123-45-6789" }],
+  middleware: [
+    contentGuardMiddleware({
+      rules: [
+        // Regex + replacement
+        { pattern: /\b\d{3}-\d{2}-\d{4}\b/g, replacement: "[SSN REDACTED]" },
+        // Custom transform function
+        { fn: (text) => text.replaceAll("badword", "****") },
+      ],
+      strategy: "buffered",
+    }),
+  ],
+});
+```
+
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `rules` | `ContentGuardRule[]` | — | **Required.** Applied in order; each rule receives the previous rule's output. A rule is either `{ pattern: RegExp; replacement: string }` or `{ fn: (text: string) => string }`. |
+| `strategy` | `'delta' \| 'buffered'` | `'buffered'` | How content is matched. See below. |
+| `bufferSize` | `number` | `50` | (Buffered only) Characters held back before emitting, so patterns spanning chunk boundaries still match. Set it ≥ the longest pattern you expect. Flushed at stream end. |
+| `blockOnMatch` | `boolean` | `false` | When `true`, drop the entire chunk if any rule changes the content (instead of emitting the filtered version). |
+| `onFiltered` | `(info: ContentFilteredInfo) => void` | — | Callback fired whenever a rule changes content. Receives `{ messageId, original, filtered, strategy }`. |
+
+**Matching strategies:**
+
+- **`'buffered'` (default)** — Accumulates content and applies rules to the settled portion, holding back a `bufferSize` look-behind window so a pattern split across two chunks (`"...123-45"` then `"-6789..."`) is still caught. The buffer is flushed when the message or run ends. Use this for anything that can span deltas — which is most redaction.
+- **`'delta'`** — Applies rules to each delta in isolation as it arrives. Fastest and lowest-latency, but a pattern split across a chunk boundary may slip through. Use only when your patterns are guaranteed to fit within a single delta.
+
+**Behaviors:**
+
+- Only `TEXT_MESSAGE_CONTENT` chunks are inspected; every other chunk type passes through.
+- A rule that doesn't change the text is a no-op — the chunk passes through unchanged.
+- With `blockOnMatch: true`, a matched chunk is dropped entirely (returns `null` from `onChunk`) rather than emitting the redacted text.
+- The `onFiltered` callback is for observability/audit — it fires with the before/after text but does not alter what is emitted.
+
+## otelMiddleware
+
+Emits vendor-neutral OpenTelemetry traces and metrics for every `chat()` call — a root span per call, a child span per agent-loop iteration, and a grandchild span per tool execution, all tagged with [GenAI semantic-convention attributes](https://opentelemetry.io/docs/specs/semconv/gen-ai/).
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { otelMiddleware } from "@tanstack/ai/middlewares/otel";
+import { trace, metrics } from "@opentelemetry/api";
+import { messages } from "./server";
+
+const otel = otelMiddleware({
+  tracer: trace.getTracer("my-app"),
+  meter: metrics.getMeter("my-app"), // optional — enables GenAI histograms
+});
+
+const result = await chat({
+  adapter: openaiText("gpt-5.5"),
+  messages,
+  middleware: [otel],
+});
+```
+
+`otelMiddleware` has its own configuration surface (content capture, redaction, span-name formatting, attribute enrichment, lifecycle callbacks) and requires the optional `@opentelemetry/api` peer dependency. See the dedicated [OpenTelemetry](/ai/advanced/otel) guide for full setup, the span/metric catalogue, and all options.
+
+## Writing your own
+
+These built-ins are just `ChatMiddleware` objects — nothing about them is privileged. To build your own, see the [Middleware](/ai/advanced/middleware) guide for the full hook reference, the context object, and composition rules.
+
+## Next Steps
+
+- [Middleware](/ai/advanced/middleware) — the full lifecycle and hook reference
+- [OpenTelemetry](/ai/advanced/otel) — `otelMiddleware` in depth
\ No newline at end of file
diff --git a/mintlify/ai/advanced/debug-logging.md b/mintlify/ai/advanced/debug-logging.md
new file mode 100644
index 000000000..d08ae49b1
--- /dev/null
+++ b/mintlify/ai/advanced/debug-logging.md
@@ -0,0 +1,198 @@
+---
+title: Debug Logging
+id: debug-logging
+order: 3
+description: "Turn on structured, category-toggleable debug logging to see every chunk, middleware transform, and tool call inside TanStack AI."
+keywords:
+  - tanstack ai
+  - debug
+  - logging
+  - logger
+  - pino
+  - troubleshooting
+  - chunks
+  - middleware debugging
+---
+
+# Debug Logging
+
+You have a `chat()` that isn't behaving as expected — a missing chunk, a middleware that doesn't seem to fire, a tool call with wrong args. By the end of this guide, you'll have turned on debug logging and will see every chunk, middleware transform, and tool call flowing through your call.
+
+## Turn it on
+
+Add `debug: true` to any activity call:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  debug: true,
+});
+```
+
+Every internal event now prints to the console with a `[tanstack-ai:<category>]` prefix:
+
+```
+[tanstack-ai:request] activity=chat provider=openai model=gpt-5.5 messages=1 tools=0 stream=true
+[tanstack-ai:agentLoop] run started
+[tanstack-ai:provider] provider=openai type=response.output_text.delta
+[tanstack-ai:output] type=TEXT_MESSAGE_CONTENT
+...
+```
+
+## Narrow what's printed
+
+Pass a `DebugConfig` object instead of `true`. Every unspecified category defaults to `true`, so toggle by setting specific flags to `false`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  debug: { middleware: false }, // everything except middleware
+});
+```
+
+If you want to see ONLY a specific set of categories, set the rest to `false` explicitly. Errors default to `true` — keep them on unless you really want total silence:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  debug: {
+    provider: true,
+    output: true,
+    middleware: false,
+    tools: false,
+    agentLoop: false,
+    config: false,
+    errors: true,         // keep errors on — they're cheap and important
+    request: false,
+  },
+});
+```
+
+## Pipe into your own logger
+
+Pass a `Logger` implementation and all debug output flows through it instead of `console`:
+
+```typescript
+import { chat, type Logger } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import pino from "pino";
+import { messages } from "./server";
+
+const pinoLogger = pino();
+const logger: Logger = {
+  debug: (msg, meta) => pinoLogger.debug(meta, msg),
+  info:  (msg, meta) => pinoLogger.info(meta, msg),
+  warn:  (msg, meta) => pinoLogger.warn(meta, msg),
+  error: (msg, meta) => pinoLogger.error(meta, msg),
+};
+
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages,
+  debug: { logger }, // all categories on, piped to pino
+});
+```
+
+The default logger is exported as `ConsoleLogger` if you want to wrap it:
+
+```typescript
+import { ConsoleLogger } from "@tanstack/ai";
+```
+
+### Your `Logger` is wrapped in a try/catch
+
+If your `Logger` implementation throws — a cyclic-meta `JSON.stringify`, a transport that rejects synchronously, a typo in a bound `this` — the exception is swallowed so it never masks the real error that triggered the log call (for example, a provider SDK failure inside the chat stream). You won't see the log line, but the pipeline error still surfaces through thrown exceptions and `RUN_ERROR` chunks.
+
+If you need to know when your own logger is failing, guard inside your implementation:
+
+```typescript
+import { type Logger } from "@tanstack/ai";
+import pino from "pino";
+
+const pinoLogger = pino();
+const logger: Logger = {
+  debug: (msg, meta) => {
+    try {
+      pinoLogger.debug(meta, msg);
+    } catch (err) {
+      // surface to wherever you track infra errors
+      process.stderr.write(`logger failed: ${String(err)}\n`);
+    }
+  },
+  info:  (msg, meta) => pinoLogger.info(meta, msg),
+  warn:  (msg, meta) => pinoLogger.warn(meta, msg),
+  error: (msg, meta) => pinoLogger.error(meta, msg),
+};
+```
+
+## Categories reference
+
+| Category | Logs | Applies to |
+|----------|------|------------|
+| `request` | Outgoing call to a provider (model, message count, tool count) | All activities |
+| `provider` | Every raw chunk/frame received from a provider SDK | Streaming activities (`chat`, `realtime`, and streaming `generateAudio`/`generateSpeech`/`generateTranscription`) |
+| `output` | Every chunk or result yielded to the caller | All activities |
+| `middleware` | Inputs and outputs around every middleware hook | `chat()` only |
+| `tools` | Before/after tool call execution | `chat()` only |
+| `agentLoop` | Agent-loop iterations and phase transitions | `chat()` only |
+| `config` | Config transforms returned by middleware `onConfig` hooks | `chat()` only |
+| `errors` | Every caught error anywhere in the pipeline | All activities |
+
+## Errors are always logged
+
+Errors flow through the logger unconditionally — even when you omit `debug`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { adapter } from "./server";
+
+chat({ adapter, messages: [{ role: "user", content: "Hello" }] }); // still prints [tanstack-ai:errors] ... on failure
+```
+
+To fully silence (including errors), set `debug: false` or `debug: { errors: false }`. Errors also always reach the caller via thrown exceptions or `RUN_ERROR` stream chunks — the logger is additive, not the only surface.
+
+## Non-chat activities
+
+The same `debug` option works on every activity:
+
+```typescript
+import {
+  summarize,
+  generateImage,
+  generateSpeech,
+  generateAudio,
+  generateTranscription,
+  type Logger,
+} from "@tanstack/ai";
+import { adapter } from "./server";
+import { logger } from "./logger";
+
+const text = "Long article to summarize...";
+const audio = new File([""], "recording.mp3", { type: "audio/mpeg" });
+
+summarize({ adapter, text, debug: true });
+generateImage({ adapter, prompt: "a cat", debug: { logger } });
+generateSpeech({ adapter, text, debug: { request: true } });
+generateAudio({ adapter, prompt: "ambient piano", debug: true });
+generateTranscription({ adapter, audio, debug: { provider: true } });
+```
+
+When streaming any of these (`generateAudio`, `generateSpeech`, `generateTranscription` with `stream: true`), the `provider` category emits the raw SDK chunks and `output` emits the AG-UI-shaped chunks yielded to the caller — useful when a media pipeline looks stuck or the bytes arriving don't match what you expected.
+
+The chat-only categories (`middleware`, `tools`, `agentLoop`, `config`) simply never fire for these activities because those concepts don't exist in their pipelines.
+
+## Related
+
+If you're building middleware and want to see chunks flow through it, `debug: { middleware: true }` is faster than writing a logging middleware. See [Middleware](/ai/advanced/middleware) for writing your own middleware.
diff --git a/mintlify/ai/advanced/extend-adapter.md b/mintlify/ai/advanced/extend-adapter.md
new file mode 100644
index 000000000..bad7fc136
--- /dev/null
+++ b/mintlify/ai/advanced/extend-adapter.md
@@ -0,0 +1,213 @@
+---
+title: Extend Adapter
+id: extend-adapter
+order: 8
+description: "Extend TanStack AI adapter factories with custom model IDs and fine-tuned models while keeping full type safety for input modalities and provider options."
+keywords:
+  - tanstack ai
+  - extendAdapter
+  - custom models
+  - fine-tuned models
+  - createModel
+  - type safety
+  - adapter factory
+---
+
+# Extending Adapters with Custom Models
+
+The `extendAdapter` utility allows you to extend existing adapter factories (like `openaiText`, `anthropicText`) with custom model names while maintaining full type safety for input modalities and provider options.
+
+## Basic Usage
+
+```typescript
+import { createModel, extendAdapter } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Define your custom models using createModel helper
+const myOpenaiModel = createModel('my-fine-tuned-gpt4',['text', 'image']);
+const myOpenaiModelButCooler = createModel('my-fine-tuned-gpt5',['text', 'image']);
+ 
+
+// Create an extended adapter factory - simple API, no type parameters needed
+const myOpenai = extendAdapter(openaiText, [
+  myOpenaiModel,
+  myOpenaiModelButCooler 
+])
+
+// Use with original models - full type inference preserved
+const gpt5Adapter = myOpenai('gpt-5.5')
+
+// Use with custom models - your custom types are applied
+const customAdapter = myOpenai('my-fine-tuned-gpt4')
+
+// Works seamlessly with chat()
+import { chat } from '@tanstack/ai'
+
+const stream = chat({
+  adapter: myOpenai('my-fine-tuned-gpt4'),
+  messages: [{ role: 'user', content: 'Hello!' }]
+})
+```
+
+## The `createModel` Helper
+
+The `createModel` function provides a clean way to define custom models with full type inference:
+
+```typescript
+import { createModel } from '@tanstack/ai'
+
+// Arguments define name and input modalities
+const model = createModel(
+  'my-model',      // model name (literal type inferred)
+  ['text', 'image'] // input modalities (tuple type inferred)
+)
+```
+ 
+ 
+## Model Definition Structure
+
+A custom model definition (`ExtendedModelDef`) has the required properties `name`, `input`, and `modelOptions`, plus optional `features` and `tools`. The two `createModel` overloads let you fill these in two ways.
+
+### Defining Input Modalities
+
+The positional form takes a model name and an `input` array specifying which content types your model supports:
+
+```typescript
+import { createModel } from '@tanstack/ai'
+
+const models = [
+  createModel('text-only-model', ['text']),
+  createModel('multimodal-model', ['text', 'image', 'audio']),
+] as const
+```
+
+Available modalities: `'text'`, `'image'`, `'audio'`, `'video'`, `'document'`
+
+### Capabilities-object form
+
+To attach typed `modelOptions`, declared `features`, or provider `tools` to a custom model, use the second `createModel` overload, which takes a capabilities object as its second argument:
+
+```typescript
+import { createModel } from '@tanstack/ai'
+import type { OpenAITextProviderOptions } from '@tanstack/ai-openai'
+
+// Type brand for provider options — the value is unused at runtime.
+const modelOptions: OpenAITextProviderOptions = {}
+
+const reasoner = createModel('my-reasoner', {
+  input: ['text'],
+  features: ['reasoning', 'structured_outputs'],
+  tools: ['web_search'],
+  modelOptions,
+})
+```
+
+- `input` — supported input modalities (same as the positional form).
+- `features` — declared feature flags (e.g. `'reasoning'`, `'structured_outputs'`).
+- `tools` — declared provider tools (e.g. `'web_search'`).
+- `modelOptions` — a type brand for the provider options accepted by this model; the value is unused at runtime, so declare an empty object typed as the provider options (e.g. `const modelOptions: OpenAITextProviderOptions = {}`).
+ 
+## Preserving Original Factory Behavior
+
+`extendAdapter` fully preserves the original factory's signature, including any configuration parameters:
+
+```typescript
+import { createModel, extendAdapter } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const customModels = [createModel('my-fine-tuned-gpt4', ['text', 'image'])] as const
+
+const myOpenai = extendAdapter(openaiText, customModels)
+
+// Config parameter is preserved
+const adapter = myOpenai('my-fine-tuned-gpt4', {
+  baseURL: 'https://my-proxy.com/v1',
+  timeout: 30000
+})
+```
+
+## Type Safety
+
+The extended adapter provides full type safety:
+
+```typescript ignore
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const myOpenai = extendAdapter(openaiText, [createModel('custom-model', ['text'])])
+
+// ✅ Original models work with their original types
+const a1 = myOpenai('gpt-5.5')
+
+// ✅ Custom models work with your defined types
+const a2 = myOpenai('custom-model')
+
+// ❌ Type error: invalid model name
+// Note: Type checking works when you assign the result to a variable
+const invalid = myOpenai('nonexistent-model') // TypeScript error!
+```
+ 
+
+## Runtime Behavior
+
+At runtime, `extendAdapter` simply passes through to the original factory:
+
+- No validation is performed on custom model names
+- The original factory receives exactly what you pass
+- This allows the original provider's API to handle the model name
+
+This design is intentional - it allows you to:
+- Use fine-tuned model names that the provider accepts but TypeScript doesn't know about
+- Proxy requests to different backends that accept custom model identifiers
+- Add type safety without runtime overhead
+
+## Example: OpenAI-Compatible Proxy
+
+A common use case is typing models for an OpenAI-compatible proxy:
+
+```typescript
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Models available through your proxy
+const proxyModels = [
+  createModel(
+    'llama-3.1-70b',
+    ['text']
+  ),
+  createModel(
+    'mixtral-8x7b',
+    ['text']
+  ),
+] as const
+
+const proxyAdapter = extendAdapter(openaiText, proxyModels)
+
+// Use with your proxy's base URL
+const adapter = proxyAdapter('llama-3.1-70b', {
+  baseURL: 'https://my-llm-proxy.com/v1'
+})
+```
+
+## Example: Fine-tuned Models
+
+Adding type safety for your fine-tuned models:
+
+```typescript
+import { chat, createModel, extendAdapter } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+
+const fineTunedModels = [
+  createModel(
+    'ft:claude-3-opus:my-org:custom-task:abc123',
+    ['text', 'image']
+  ),
+] as const
+
+const myAnthropic = extendAdapter(anthropicText, fineTunedModels)
+
+chat({
+  adapter: myAnthropic('ft:claude-3-opus:my-org:custom-task:abc123'),
+  messages: [{ role: 'user', content: 'Analyze this...' }]
+})
+```
diff --git a/mintlify/ai/advanced/middleware.md b/mintlify/ai/advanced/middleware.md
new file mode 100644
index 000000000..b619e5632
--- /dev/null
+++ b/mintlify/ai/advanced/middleware.md
@@ -0,0 +1,919 @@
+---
+title: Middleware
+id: middleware
+order: 1
+description: "Hook into every stage of TanStack AI's chat() lifecycle with middleware — logging, analytics, stream transforms, tool interception, and side effects."
+keywords:
+  - tanstack ai
+  - middleware
+  - chat middleware
+  - lifecycle hooks
+  - observability
+  - logging
+  - tool interception
+  - stream transform
+---
+
+Middleware lets you hook into every stage of the `chat()` lifecycle — from configuration to streaming, tool execution, usage tracking, and completion. You can observe, transform, or short-circuit behavior at each stage without modifying your adapter or tool implementations.
+
+Common use cases include:
+
+- **Logging and observability** — track token usage, tool execution timing, errors
+- **Configuration transforms** — inject system prompts, adjust temperature per iteration, filter tools
+- **Stream processing** — redact sensitive content, transform chunks, drop unwanted events
+- **Tool call interception** — validate arguments, cache results, abort on dangerous calls
+- **Side effects** — send analytics, update databases, trigger notifications
+
+## Quick Start
+
+Pass an array of middleware to the `chat()` function:
+
+```typescript
+import { chat, type ChatMiddleware } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const logger: ChatMiddleware = {
+  name: "logger",
+  onStart: (ctx) => {
+    console.log(`[${ctx.requestId}] Chat started`);
+  },
+  onFinish: (ctx, info) => {
+    console.log(`[${ctx.requestId}] Finished in ${info.duration}ms`);
+  },
+};
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  middleware: [logger],
+});
+```
+
+> **Just want to see chunks flowing through your middleware during development?**
+> Use `debug: { middleware: true }` on your `chat()` call — no custom middleware required. See [Debug Logging](/ai/advanced/debug-logging).
+
+## Lifecycle Overview
+
+Every `chat()` invocation follows a predictable lifecycle. Middleware hooks fire at specific phases:
+
+```mermaid
+graph TD
+    A["chat() called"] --> B["onConfig (phase: init)"]
+    B --> C[onStart]
+    C --> D["onConfig (phase: beforeModel)"]
+    D --> E["Adapter streams response"]
+    E --> F["onChunk (for each chunk)"]
+    F --> G{Tool calls?}
+    G -->|No| H[onUsage]
+    G -->|Yes| I[onBeforeToolCall]
+    I --> J[Tool executes]
+    J --> K[onAfterToolCall]
+    K --> L{Continue loop?}
+    L -->|Yes| D
+    L -->|No| H
+    H --> SO{outputSchema?}
+    SO -->|No| M{Outcome}
+    SO -->|Yes| SOC[onStructuredOutputConfig]
+    SOC --> SOM["onConfig (phase: structuredOutput)"]
+    SOM --> SOS["Structured-output finalization (onChunk, onUsage)"]
+    SOS --> M
+    M -->|Success| N[onFinish]
+    M -->|Abort| O[onAbort]
+    M -->|Error| P[onError]
+
+    style I fill:#e1f5ff
+    style J fill:#ffe1e1
+    style SOC fill:#e1f5ff
+    style SOM fill:#e1f5ff
+    style SOS fill:#e1f5ff
+    style N fill:#e1ffe1
+    style O fill:#fff4e1
+    style P fill:#ffe1e1
+```
+
+### Phase Transitions
+
+The context's `phase` field tracks where you are in the lifecycle:
+
+| Phase | When | Hooks Called |
+|-------|------|-------------|
+| `init` | Once at startup | `onConfig` |
+| `beforeModel` | Before each model call (per iteration) | `onConfig` |
+| `modelStream` | While adapter streams chunks | `onChunk`, `onUsage` |
+| `beforeTools` | Before tool execution | `onBeforeToolCall` |
+| `afterTools` | After tool execution | `onAfterToolCall` |
+| `structuredOutput` | During the final structured-output adapter call (when `outputSchema` is set **and** the adapter does not declare `supportsCombinedToolsAndSchema()`). Chunks from `adapter.structuredOutputStream` (or the synthesized non-streaming fallback) flow through `onChunk` with this phase, and `onUsage` fires for the final call's tokens. **Does not fire** for adapters that natively combine tools + schema in one streaming call (modern OpenAI Chat Completions, OpenAI Responses, Claude 4.5+, Gemini 3.x, Grok 4.x family — see issue #605); on that path middleware observes the run through `beforeModel` / `modelStream` as usual. | `onStructuredOutputConfig`, `onConfig`, `onChunk`, `onUsage` |
+
+## Hooks Reference
+
+### onConfig
+
+Called once during `init` (startup) and once per iteration during `beforeModel` (before each model call). When `chat()` was invoked with `outputSchema`, `onConfig` additionally re-fires at the structured-output boundary with `ctx.phase === 'structuredOutput'`, receiving the post-`onStructuredOutputConfig` view of the config — so a single-iteration run with `outputSchema` fires `onConfig` three times (`init` + `beforeModel` + `structuredOutput`). Use it to transform the configuration that the model receives.
+
+Return a **partial** config object with only the fields you want to change — they are shallow-merged with the current config automatically. No need to spread the existing config.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const dynamicTemperature: ChatMiddleware = {
+  name: "dynamic-temperature",
+  onConfig: (ctx, config) => {
+    if (ctx.phase === "init") {
+      // Add a system prompt at startup — only systemPrompts is overwritten
+      return {
+        systemPrompts: [
+          ...config.systemPrompts,
+          "You are a helpful assistant.",
+        ],
+      };
+    }
+
+    if (ctx.phase === "beforeModel" && ctx.iteration > 0) {
+      // Increase temperature on retries. Sampling params live in the
+      // provider-native modelOptions object — `temperature` is universal,
+      // so it's the same key across providers. Spread the existing
+      // modelOptions so other model options stay unchanged.
+      const current =
+        typeof config.modelOptions?.temperature === "number"
+          ? config.modelOptions.temperature
+          : 0.7;
+      return {
+        modelOptions: {
+          ...config.modelOptions,
+          temperature: Math.min(current + 0.1, 1.0),
+        },
+      };
+    }
+  },
+};
+```
+
+> Sampling parameters (`temperature`, `top_p` / `topP`, the various `max*Tokens` keys) live inside `modelOptions` under each provider's native name — they are no longer root config fields. `temperature` happens to be spelled the same across every provider, so the example above is provider-agnostic; if you mutate a token limit instead, use the provider-native key (e.g. `max_output_tokens` for OpenAI, `num_predict` nested under `modelOptions.options` for Ollama). See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options).
+
+**Config fields you can transform:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `messages` | `ModelMessage[]` | Conversation history |
+| `systemPrompts` | `string[]` | System prompts |
+| `tools` | `Tool[]` | Available tools |
+| `metadata` | `Record<string, unknown>` | Request metadata |
+| `modelOptions` | `Record<string, unknown>` | Provider-native options — this is where sampling params (`temperature`, `top_p` / `topP`, the provider's `max*Tokens` key) now live, alongside every other model-specific knob. See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options). |
+
+When multiple middleware define `onConfig`, the config is **piped** through them in order — each receives the merged config from the previous middleware.
+
+### onStructuredOutputConfig
+
+Called once at the start of the final structured-output adapter call — only when `chat()` was invoked with `outputSchema` **and** the adapter takes the legacy finalization path (i.e. does not declare `supportsCombinedToolsAndSchema()`). Pipes through middleware in order, like `onConfig`, but with access to the **JSON Schema** being sent to the provider. Use this hook when you need to transform the schema (e.g., inject `$defs`, strip vendor-incompatible keywords) or apply structured-output-specific behavior (e.g., suppress system prompts on the final call).
+
+> Native-combined adapters (modern OpenAI, Claude 4.5+, Gemini 3.x, Grok 4.x — see issue #605) skip the separate finalization call and never invoke this hook. If you need to mutate the schema for a native-combined adapter, do it in `onConfig` (the schema is on `config.modelOptions` / the request — adapter-specific).
+
+Return a **partial** `StructuredOutputMiddlewareConfig` with only the fields you want to change — they are shallow-merged with the current config. Return `void` to pass through.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+import { sharedDefs } from "./defs";
+
+const injectDefs: ChatMiddleware = {
+  name: "inject-defs",
+  onStructuredOutputConfig: (_ctx, config) => {
+    // `config.outputSchema` is the JSON Schema being sent to the provider
+    return {
+      outputSchema: {
+        ...config.outputSchema,
+        $defs: { ...sharedDefs },
+      },
+    };
+  },
+};
+```
+
+**Config fields you can transform:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `messages` | `ModelMessage[]` | Conversation history sent to the final call |
+| `systemPrompts` | `SystemPrompt[]` | System prompts on the final call |
+| `metadata` | `Record<string, unknown>` | Request metadata |
+| `modelOptions` | `Record<string, unknown>` | Provider-native options — this is where sampling params (`temperature`, `top_p` / `topP`, the provider's `max*Tokens` key) now live, alongside every other model-specific knob. See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options). |
+| `outputSchema` | `JSONSchema` | JSON Schema being sent to the provider for structured output |
+
+**Ordering at the structured-output boundary:**
+
+1. `onStructuredOutputConfig` fires first, piping through every middleware in array order.
+2. `onConfig` then re-fires at the same boundary with `ctx.phase === 'structuredOutput'`, receiving the post-`onStructuredOutputConfig` view of the config (minus `outputSchema`). Use `onConfig` for general-purpose transforms that apply to every adapter call; use `onStructuredOutputConfig` when you need access to the schema.
+
+When multiple middleware define `onStructuredOutputConfig`, the config is **piped** through them in order — each receives the merged config from the previous middleware.
+
+### onStart
+
+Called once after the initial `onConfig` completes. Use it for setup tasks like initializing timers or logging.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const timer: ChatMiddleware = {
+  name: "timer",
+  onStart: (ctx) => {
+    console.log(`Request ${ctx.requestId} started at iteration ${ctx.iteration}`);
+  },
+};
+```
+
+### onChunk
+
+Called for every chunk streamed from the adapter. You can observe, transform, expand, or drop chunks.
+
+```typescript ignore
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const redactor: ChatMiddleware = {
+  name: "redactor",
+  onChunk: (ctx, chunk) => {
+    if (chunk.type === "TEXT_MESSAGE_CONTENT") {
+      // Transform: redact sensitive content
+      return {
+        ...chunk,
+        delta: chunk.delta.replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[REDACTED]"),
+      };
+    }
+    // Return void to pass through unchanged
+  },
+};
+```
+
+**Return values:**
+
+| Return | Effect |
+|--------|--------|
+| `void` / `undefined` | Chunk passes through unchanged |
+| `StreamChunk` | Replaces the original chunk |
+| `StreamChunk[]` | Expands into multiple chunks |
+| `null` | Drops the chunk entirely |
+
+When multiple middleware define `onChunk`, chunks flow through them in order. If one middleware drops a chunk (returns `null`), subsequent middleware never see it.
+
+#### Chunk types you'll see
+
+`onChunk` receives every [AG-UI event](https://docs.ag-ui.com/introduction) the run produces — not just text. Narrow on `chunk.type` (a discriminated union) before reading type-specific fields. The common ones:
+
+| `chunk.type` | Meaning | Key fields |
+|--------------|---------|-----------|
+| `RUN_STARTED` / `RUN_FINISHED` / `RUN_ERROR` | Run lifecycle boundaries | `runId`, `finishReason`, `usage` (on finish), `message` (on error) |
+| `TEXT_MESSAGE_START` / `TEXT_MESSAGE_CONTENT` / `TEXT_MESSAGE_END` | Assistant text streaming | `messageId`, `delta` (content) |
+| `TOOL_CALL_START` / `TOOL_CALL_ARGS` / `TOOL_CALL_END` | Tool invocation streaming | `toolCallId`, `toolCallName`, `delta` (args), result on end |
+| `STEP_STARTED` / `STEP_FINISHED` | Thinking / reasoning steps | `delta`, `signature` |
+| `STATE_SNAPSHOT` / `STATE_DELTA` | Agent state sync | `snapshot`, `delta` |
+| `CUSTOM` | Extensibility events (incl. structured-output — see below) | `name`, `value` |
+
+See the [AG-UI protocol docs](https://docs.ag-ui.com/introduction) for the full event catalogue and exact field shapes.
+
+#### Transforming structured-output chunks
+
+There is **no separate `onStructuredOutputChunk` hook** — and you don't need one. When `chat()` is invoked with `outputSchema`, the structured-output chunks (the JSON `TEXT_MESSAGE_CONTENT` deltas, plus the `structured-output.start` / `structured-output.complete` CUSTOM events and any finalization `RUN_ERROR`) flow through the **same `onChunk` hook** as everything else. You transform, expand, or drop them exactly like any other chunk.
+
+How you distinguish them depends on which finalization path the adapter takes:
+
+- **Separate-finalization adapters** (the legacy path — adapters that don't declare `supportsCombinedToolsAndSchema()`): `ctx.phase === 'structuredOutput'` during the finalization call. Discriminate on the phase.
+- **Native-combined adapters** (modern OpenAI Chat Completions / Responses, Claude 4.5+, Gemini 3.x, Grok 4.x — see issue #605): the schema-constrained JSON is produced on the model's natural final turn, so **`ctx.phase` stays `'modelStream'`** — the `'structuredOutput'` phase never fires. Discriminate on the CUSTOM event name (`structured-output.start` / `structured-output.complete`) instead.
+
+```typescript ignore
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const redactStructuredOutput: ChatMiddleware = {
+  name: "redact-structured-output",
+  onChunk: (ctx, chunk) => {
+    // Separate-finalization path: the JSON streams as TEXT_MESSAGE_CONTENT
+    // during the 'structuredOutput' phase. Transform the delta like any
+    // other text chunk — here, redact anything that looks like an SSN before
+    // it reaches the client.
+    if (
+      ctx.phase === "structuredOutput" &&
+      chunk.type === "TEXT_MESSAGE_CONTENT"
+    ) {
+      return {
+        ...chunk,
+        delta: chunk.delta.replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[REDACTED]"),
+      };
+    }
+
+    // Both paths: the validated object arrives as a CUSTOM
+    // `structured-output.complete` event. On the native-combined path this is
+    // your only signal (ctx.phase never flips to 'structuredOutput'), so key
+    // off the event name, not the phase. `chunk.value` carries { object, raw }.
+    if (chunk.type === "CUSTOM" && chunk.name === "structured-output.complete") {
+      console.log("final structured output:", chunk.value);
+    }
+
+    // Return void to pass everything else through unchanged.
+  },
+};
+```
+
+> Why is there `onStructuredOutputConfig` but no `onStructuredOutputChunk`? Because the **config** shape genuinely differs at the structured-output boundary — it carries an `outputSchema` field that plain `ChatMiddlewareConfig` doesn't (see [onStructuredOutputConfig](#onstructuredoutputconfig)). **Chunks** are all just `StreamChunk` regardless of phase, so one `onChunk` plus `ctx.phase` (or the CUSTOM event name) covers every case — a parallel chunk hook would be redundant.
+
+### onBeforeToolCall
+
+Called before each tool executes. The first middleware that returns a non-void decision short-circuits — remaining middleware are skipped for that tool call.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null;
+}
+
+const guard: ChatMiddleware = {
+  name: "guard",
+  onBeforeToolCall: (ctx, hookCtx) => {
+    // Block dangerous tools
+    if (hookCtx.toolName === "deleteDatabase") {
+      return { type: "abort", reason: "Dangerous operation blocked" };
+    }
+
+    // Validate and transform arguments
+    if (hookCtx.toolName === "search" && isRecord(hookCtx.args) && !hookCtx.args.limit) {
+      return {
+        type: "transformArgs",
+        args: { ...hookCtx.args, limit: 10 },
+      };
+    }
+  },
+};
+```
+
+**Decision types:**
+
+| Decision | Effect |
+|----------|--------|
+| `void` / `undefined` | Continue normally, next middleware can decide |
+| `{ type: 'transformArgs', args }` | Replace tool arguments before execution |
+| `{ type: 'skip', result }` | Skip execution entirely, use provided result |
+| `{ type: 'abort', reason? }` | Abort the entire chat run |
+
+The `hookCtx` provides:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `toolCall` | `ToolCall` | Raw tool call object |
+| `tool` | `Tool \| undefined` | Resolved tool definition |
+| `args` | `unknown` | Parsed arguments |
+| `toolName` | `string` | Tool name |
+| `toolCallId` | `string` | Tool call ID |
+
+### onAfterToolCall
+
+Called after each tool execution (or skip). All middleware run — there is no short-circuiting.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const toolLogger: ChatMiddleware = {
+  name: "tool-logger",
+  onAfterToolCall: (ctx, info) => {
+    if (info.ok) {
+      console.log(`${info.toolName} completed in ${info.duration}ms`);
+    } else {
+      console.error(`${info.toolName} failed:`, info.error);
+    }
+  },
+};
+```
+
+The `info` object provides:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `toolCall` | `ToolCall` | Raw tool call object |
+| `tool` | `Tool \| undefined` | Resolved tool definition |
+| `toolName` | `string` | Tool name |
+| `toolCallId` | `string` | Tool call ID |
+| `ok` | `boolean` | Whether execution succeeded |
+| `duration` | `number` | Execution time in milliseconds |
+| `result` | `unknown` | Result (when `ok` is true) |
+| `error` | `unknown` | Error (when `ok` is false) |
+
+### onUsage
+
+Called once per model iteration when the `RUN_FINISHED` chunk includes usage data. Receives the usage object directly.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const usageTracker: ChatMiddleware = {
+  name: "usage-tracker",
+  onUsage: (ctx, usage) => {
+    console.log(
+      `Iteration ${ctx.iteration}: ${usage.totalTokens} tokens`
+    );
+  },
+};
+```
+
+The `usage` object:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `promptTokens` | `number` | Input tokens |
+| `completionTokens` | `number` | Output tokens |
+| `totalTokens` | `number` | Total tokens |
+
+### Terminal Hooks: onFinish, onAbort, onError
+
+Exactly **one** terminal hook fires per `chat()` invocation. They are mutually exclusive:
+
+| Hook | When it fires |
+|------|--------------|
+| `onFinish` | Run completed normally |
+| `onAbort` | Run was aborted (via `ctx.abort()`, an external `AbortSignal`, or a `{ type: 'abort' }` decision from `onBeforeToolCall`) |
+| `onError` | An unhandled error occurred |
+
+> **Structured-output lifecycle ordering:** When `chat()` is invoked with `outputSchema`, `onFinish` fires **after** the structured-output finalization call completes — not at the end of the agent loop. `onIteration` does **not** fire for the finalization step; it only fires for agent-loop iterations.
+>
+> **`onFinish` info fields and structured-output runs:** the `info` object reflects the **agent loop's** terminal state — finalization state is intentionally segregated to keep agent-loop semantics clean.
+>
+> - `info.content` — the agent loop's accumulated text. Finalization JSON deltas are **not** included here. The structured-output result is delivered via the `structured-output.complete` CUSTOM event, which middleware observes via `onChunk` (with `ctx.phase === 'structuredOutput'`).
+> - `info.usage` — the agent loop's last `RUN_FINISHED.usage`. For a tools-less structured-output run (no agent-loop iteration produces `RUN_FINISHED`), this is `undefined`. To capture finalization tokens, use `onUsage` — that hook fires for **every** `RUN_FINISHED` carrying usage, including the finalization call.
+> - `info.finishReason` — the agent loop's last `finishReason`. `null` when no agent-loop iteration produced `RUN_FINISHED` (e.g. a tools-less structured-output run).
+> - `info.duration` — wall-clock duration of the entire `chat()` invocation, including finalization.
+>
+> To aggregate usage across the whole run, accumulate from `onUsage` callbacks rather than relying on `info.usage`.
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const terminal: ChatMiddleware = {
+  name: "terminal",
+  onFinish: (ctx, info) => {
+    console.log(`Finished: ${info.finishReason}, ${info.duration}ms`);
+    console.log(`Content: ${info.content}`);
+    if (info.usage) {
+      console.log(`Tokens: ${info.usage.totalTokens}`);
+    }
+  },
+  onAbort: (ctx, info) => {
+    console.log(`Aborted: ${info.reason}, ${info.duration}ms`);
+  },
+  onError: (ctx, info) => {
+    console.error(`Error after ${info.duration}ms:`, info.error);
+  },
+};
+```
+
+The `info` object for `onFinish` (`FinishInfo`):
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `finishReason` | `string \| null` | The agent loop's last `finishReason`. `null` when no agent-loop iteration produced `RUN_FINISHED` (e.g. a tools-less `chat({ outputSchema })` run). |
+| `duration` | `number` | Total run duration in milliseconds, including any structured-output finalization. |
+| `content` | `string` | The agent loop's accumulated text content. Does **not** include finalization JSON deltas — for that, observe the `structured-output.complete` CUSTOM event via `onChunk`. |
+| `usage` | `{ promptTokens; completionTokens; totalTokens } \| undefined` | **Optional.** The agent loop's last `RUN_FINISHED.usage`. **Does not include finalization tokens** — use `onUsage` to observe those. Always guard with `if (info.usage)` or `info.usage?.`. |
+
+## Context Object
+
+Every hook receives a `ChatMiddlewareContext` as its first argument. It provides request-scoped information and control functions:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `requestId` | `string` | Unique ID for this chat request |
+| `streamId` | `string` | Unique ID for this stream |
+| `threadId` | `string` | AG-UI thread identifier. Resolves to caller-provided `threadId` (or legacy `conversationId`), or an auto-generated value if neither is supplied. Use this for event correlation. |
+| `conversationId` | `string \| undefined` | **Deprecated** alias of `threadId`. Always equals `ctx.threadId`; retained so middleware written before the AG-UI rename keeps working. New middleware should read `ctx.threadId`. |
+| `phase` | `ChatMiddlewarePhase` | Current lifecycle phase |
+| `iteration` | `number` | Agent loop iteration (0-indexed) |
+| `chunkIndex` | `number` | Running count of chunks yielded |
+| `signal` | `AbortSignal \| undefined` | External abort signal |
+| `abort(reason?)` | `function` | Abort the run from within middleware |
+| `context` | `TContext` | User-provided runtime context value |
+| `defer(promise)` | `function` | Register a non-blocking side-effect |
+
+## Typed Runtime Context
+
+`ChatMiddleware` accepts a context generic. This lets reusable middleware declared outside `chat()` access the same typed runtime context as your tools.
+
+```typescript
+import { chat, type ChatMiddleware } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { session, audit } from "./server";
+
+type AppContext = {
+  userId: string;
+  audit: {
+    write(event: { userId: string; requestId: string }): Promise<void>;
+  };
+};
+
+export const auditMiddleware: ChatMiddleware<AppContext> = {
+  name: "audit",
+  onStart(ctx) {
+    ctx.defer(
+      ctx.context.audit.write({
+        userId: ctx.context.userId,
+        requestId: ctx.requestId,
+      })
+    );
+  },
+};
+
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  middleware: [auditMiddleware],
+  context: {
+    userId: session.user.id,
+    audit,
+  },
+});
+```
+
+When typed middleware or typed tools are present, `chat()` checks that the provided `context` matches the required shape. Existing middleware typed as plain `ChatMiddleware` still works; its `ctx.context` remains `unknown` and does not force a `context` option.
+
+Runtime context is process-local application state. It is separate from AG-UI `RunAgentInput.context`, which is protocol metadata parsed by `chatParamsFromRequest`. See [Runtime Context](/ai/advanced/runtime-context) for server, client, and client-to-server handoff patterns.
+
+### Aborting from Middleware
+
+Call `ctx.abort()` to gracefully stop the run. This triggers the `onAbort` terminal hook:
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const timeout: ChatMiddleware = {
+  name: "timeout",
+  onChunk: (ctx) => {
+    if (ctx.chunkIndex > 1000) {
+      ctx.abort("Too many chunks");
+    }
+  },
+};
+```
+
+### Deferred Side Effects
+
+Use `ctx.defer()` to register promises that run after the terminal hook without blocking the stream:
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const analytics: ChatMiddleware = {
+  name: "analytics",
+  onFinish: (ctx, info) => {
+    ctx.defer(
+      fetch("/api/analytics", {
+        method: "POST",
+        body: JSON.stringify({
+          requestId: ctx.requestId,
+          duration: info.duration,
+          tokens: info.usage?.totalTokens,
+        }),
+      })
+    );
+  },
+};
+```
+
+## Composing Multiple Middleware
+
+Middleware execute in array order. The ordering matters for hooks that pipe or short-circuit:
+
+```typescript
+import { chat, type ChatMiddleware } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { authMiddleware, loggingMiddleware, cachingMiddleware } from "./middleware";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  middleware: [authMiddleware, loggingMiddleware, cachingMiddleware],
+});
+```
+
+### Composition Rules
+
+| Hook | Composition | Effect of Order |
+|------|------------|----------------|
+| `onConfig` | **Piped** — each receives previous output | Earlier middleware transforms first |
+| `onStructuredOutputConfig` | **Piped** — each receives previous output | Earlier middleware transforms first |
+| `onStart` | Sequential | All run in order |
+| `onChunk` | **Piped** — chunks flow through each middleware | If first drops a chunk, later middleware never see it |
+| `onBeforeToolCall` | **First-win** — first non-void decision wins | Earlier middleware has priority |
+| `onAfterToolCall` | Sequential | All run in order |
+| `onUsage` | Sequential | All run in order |
+| `onFinish/onAbort/onError` | Sequential | All run in order |
+
+## Capabilities
+
+Middleware often need to **share state**. A provider middleware sets something up (a database handle, a per-request counter, a sandbox), and a consumer middleware reads it back later in the same run. Capabilities make that hand-off **type-safe and order-checked**: the consumer declares what it needs, the provider declares what it offers, and `chat()` refuses to run (at compile time _and_ at runtime) if a required capability was never provided.
+
+### Creating a capability
+
+A capability is created with `createCapability<TValue>()('name')` — a **curried** call:
+
+```typescript
+import { createCapability } from "@tanstack/ai";
+
+const counterCapability = createCapability<{ value: number }>()("counter");
+const [getCounter, provideCounter] = counterCapability;
+```
+
+The currying is deliberate: you supply the **value type** explicitly (`<{ value: number }>`) while the **name literal** is inferred from the argument (`"counter"`). A single `createCapability<T>('name')` call can't do both — supplying `T` explicitly stops TypeScript inferring the name, collapsing it to `string` and defeating the compile-time coverage check that keys on the literal name.
+
+The returned `counterCapability` is a hybrid value:
+
+- It **destructures to `[get, provide]`** — the two accessors you use inside hooks.
+- It **is itself the identity** you list in `requires` / `provides`. There is no separate token to import.
+
+The accessors:
+
+| Accessor | Behavior |
+|----------|----------|
+| `getCounter(ctx)` | Returns the value. **Throws** if the capability was never provided. |
+| `getCounter(ctx, { optional: true })` | Returns `TValue \| undefined` — no throw when absent. |
+| `provideCounter(ctx, value)` | Sets the value for this run. Call it from `setup`. |
+
+Equivalently, the context exposes `ctx.get(capability)`, `ctx.getOptional(capability)`, and `ctx.provide(capability, value)` — pass the capability handle directly. These are typed by the handle you pass (`ctx.get(counterCapability)` returns the value type), so `getCounter(ctx)` and `ctx.get(counterCapability)` are interchangeable — use whichever reads better in your hook.
+
+> **Capability names must be unique across your app.** The compile-time coverage check keys on the name literal (runtime keys on the handle reference), so two capabilities sharing a name will conflate in the type-level check.
+
+### The `setup` hook
+
+Provisioning happens in a dedicated `setup(ctx)` hook. It **runs first** — before any `onConfig` (init), across all middleware in array order — so that by the time the rest of the lifecycle begins, every capability is in place. `setup` receives the stable `ChatMiddlewareContext` (not the mutable config), and may be async.
+
+### `requires` / `provides` / `optionalRequires`
+
+Three array fields on a middleware declare its capability contract. Each is a `ReadonlyArray<CapabilityHandle>` — you list the capability handles themselves:
+
+| Field | Meaning |
+|-------|---------|
+| `provides` | Capabilities this middleware sets up. Each one **must** be `provide`d inside `setup`, or `chat()` throws after the setup phase. |
+| `requires` | Capabilities this middleware reads. `chat()` validates (compile time + runtime) that some earlier middleware provides each one. |
+| `optionalRequires` | Capabilities used **if present** but not required. Non-gating — never causes a validation error. Read with `getX(ctx, { optional: true })`. |
+
+### Array example
+
+Author middleware with `defineChatMiddleware` — it sharpens the `requires` / `provides` tuple types so the coverage check and builder can read them precisely. Here a **provider** sets up a counter in `setup`, and a **consumer** reads it in a hook:
+
+```typescript
+import {
+  chat,
+  createCapability,
+  createChatMiddleware,
+  defineChatMiddleware,
+} from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const counterCapability = createCapability<{ value: number }>()("counter");
+const [getCounter, provideCounter] = counterCapability;
+
+// Provider: declares `provides` and provisions the value in `setup`.
+const withCounter = defineChatMiddleware({
+  name: "with-counter",
+  provides: [counterCapability],
+  setup(ctx) {
+    provideCounter(ctx, { value: 0 });
+  },
+});
+
+// Consumer: declares `requires` and reads the value via `get` in a hook.
+const countsChunks = defineChatMiddleware({
+  name: "counts-chunks",
+  requires: [counterCapability],
+  onChunk(ctx) {
+    getCounter(ctx).value++;
+  },
+  onFinish(ctx) {
+    console.log(`Saw ${getCounter(ctx).value} chunks`);
+  },
+});
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  // Provider must come before the consumer.
+  middleware: [withCounter, countsChunks],
+});
+```
+
+If you drop `withCounter` from the array, `chat()` reports a compile-time error at the `middleware` option naming the missing `"counter"` capability — and throws at runtime before the adapter is ever called.
+
+### Builder example
+
+`createChatMiddleware()` builds the array through chained `.use()` calls and enforces **provider-before-consumer ordering at compile time**: each `.use()` requires that the middleware's `requires` are already covered by capabilities provided by earlier `.use()` calls.
+
+```typescript
+import { chat, createChatMiddleware } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { withCounter, countsChunks } from "./counter-middleware";
+
+const middleware = createChatMiddleware()
+  .use(withCounter) // provides "counter"
+  .use(countsChunks) // requires "counter" — OK, already provided above
+  .build();
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+  middleware,
+});
+```
+
+Swap the two `.use()` calls (`.use(countsChunks).use(withCounter)`) and the builder rejects it at the `.use(countsChunks)` line — the consumer is ordered before its provider, so `"counter"` isn't in the provided set yet.
+
+### Validation guarantees
+
+The capability system fails loudly and early:
+
+- **Compile-time coverage.** A required capability that nothing provides surfaces as a type error at the `middleware` option. This is enforced two ways: an **array coverage check** on `middleware: [...]`, and the order-aware **`createChatMiddleware()` builder** (which additionally enforces ordering).
+- **Runtime coverage.** Even if types are bypassed, `chat()` validates coverage and **throws before the adapter runs** if a required capability is missing.
+- **Post-`setup` assertion.** If a middleware declares a capability in `provides` but never calls its `provide` accessor during `setup`, `chat()` throws after the setup phase — you can't silently forget to provision.
+- **Duplicate provide → last-wins + warning.** If two middleware provide the same capability, the last write wins and a development warning is emitted.
+- **Unique names.** Capability `name`s must be unique across your app; the compile-time coverage check keys on the name literal (runtime keys on the handle reference).
+
+## Built-in Middleware
+
+TanStack AI ships ready-made middleware for common cases — caching tool results, redacting streamed text, and OpenTelemetry tracing:
+
+| Middleware | Import | What it does |
+|------------|--------|--------------|
+| `toolCacheMiddleware` | `@tanstack/ai/middlewares` | Cache tool-call results by name + arguments |
+| `contentGuardMiddleware` | `@tanstack/ai/middlewares` | Redact / transform / block streamed text content |
+| `otelMiddleware` | `@tanstack/ai/middlewares/otel` | Emit OpenTelemetry spans + GenAI metrics |
+
+See [Built-in Middleware](/ai/advanced/built-in-middleware) for full options and examples for each. The recipes below show how to build your own.
+
+## Recipes
+
+### Rate Limiting
+
+Limit the number of tool calls per request:
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+function rateLimitMiddleware(maxCalls: number): ChatMiddleware {
+  let toolCallCount = 0;
+  return {
+    name: "rate-limit",
+    onBeforeToolCall: (ctx, hookCtx) => {
+      toolCallCount++;
+      if (toolCallCount > maxCalls) {
+        return {
+          type: "abort",
+          reason: `Rate limit: exceeded ${maxCalls} tool calls`,
+        };
+      }
+    },
+  };
+}
+```
+
+### Audit Trail
+
+Log every action for compliance:
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+import { db } from "./db";
+
+const auditTrail: ChatMiddleware = {
+  name: "audit-trail",
+  onStart: (ctx) => {
+    ctx.defer(
+      db.auditLog.create({
+        requestId: ctx.requestId,
+        event: "chat_started",
+        timestamp: Date.now(),
+      })
+    );
+  },
+  onAfterToolCall: (ctx, info) => {
+    ctx.defer(
+      db.auditLog.create({
+        requestId: ctx.requestId,
+        event: "tool_executed",
+        toolName: info.toolName,
+        success: info.ok,
+        duration: info.duration,
+        timestamp: Date.now(),
+      })
+    );
+  },
+  onFinish: (ctx, info) => {
+    ctx.defer(
+      db.auditLog.create({
+        requestId: ctx.requestId,
+        event: "chat_finished",
+        duration: info.duration,
+        tokens: info.usage?.totalTokens,
+        timestamp: Date.now(),
+      })
+    );
+  },
+};
+```
+
+### Per-Iteration Tool Swapping
+
+Expose different tools at different stages of the agent loop:
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+
+const toolSwapper: ChatMiddleware = {
+  name: "tool-swapper",
+  onConfig: (ctx, config) => {
+    if (ctx.phase !== "beforeModel") return;
+
+    if (ctx.iteration === 0) {
+      // First iteration: only allow search
+      return {
+        tools: config.tools.filter((t) => t.name === "search"),
+      };
+    }
+    // Later iterations: allow all tools
+  },
+};
+```
+
+### Content Filtering
+
+Drop or transform chunks before they reach the consumer:
+
+```typescript ignore
+import { type ChatMiddleware } from "@tanstack/ai";
+import { containsProfanity } from "./filters";
+
+const contentFilter: ChatMiddleware = {
+  name: "content-filter",
+  onChunk: (ctx, chunk) => {
+    if (chunk.type === "TEXT_MESSAGE_CONTENT") {
+      if (containsProfanity(chunk.delta)) {
+        // Drop the chunk entirely
+        return null;
+      }
+    }
+  },
+};
+```
+
+### Error Recovery with Retry Logging
+
+```typescript
+import { type ChatMiddleware } from "@tanstack/ai";
+import { alertService } from "./services";
+
+const errorRecovery: ChatMiddleware = {
+  name: "error-recovery",
+  onError: (ctx, info) => {
+    ctx.defer(
+      alertService.send({
+        level: "error",
+        message: `Chat ${ctx.requestId} failed after ${info.duration}ms`,
+        error: String(info.error),
+      })
+    );
+  },
+};
+```
+
+## TypeScript Types
+
+The core middleware types are exported from `@tanstack/ai`:
+
+```typescript
+import type {
+  ChatMiddleware,
+  ChatMiddlewareContext,
+  ChatMiddlewarePhase,
+  ChatMiddlewareConfig,
+  StructuredOutputMiddlewareConfig,
+  ToolCallHookContext,
+  BeforeToolCallDecision,
+  AfterToolCallInfo,
+  IterationInfo,
+  ToolPhaseCompleteInfo,
+  UsageInfo,
+  FinishInfo,
+  AbortInfo,
+  ErrorInfo,
+} from "@tanstack/ai";
+```
+
+The option/type surfaces for the [built-in middleware](/ai/advanced/built-in-middleware) are exported from the `@tanstack/ai/middlewares` subpath (not the main barrel):
+
+```typescript
+import type {
+  ToolCacheMiddlewareOptions,
+  ToolCacheStorage,
+  ToolCacheEntry,
+  ContentGuardMiddlewareOptions,
+  ContentGuardRule,
+  ContentFilteredInfo,
+} from "@tanstack/ai/middlewares";
+```
+
+## Next Steps
+
+- [Built-in Middleware](/ai/advanced/built-in-middleware) — `toolCacheMiddleware`, `contentGuardMiddleware`, `otelMiddleware`
+- [OpenTelemetry](/ai/advanced/otel) — emit traces and metrics via `otelMiddleware`- [Tools](/ai/tools/tools) — Learn about the isomorphic tool system
+- [Agentic Cycle](/ai/chat/agentic-cycle) — Understand the multi-step agent loop
+- [Streaming](/ai/chat/streaming) — How streaming works in TanStack AI
diff --git a/mintlify/ai/advanced/multimodal-content.md b/mintlify/ai/advanced/multimodal-content.md
new file mode 100644
index 000000000..0bea1a795
--- /dev/null
+++ b/mintlify/ai/advanced/multimodal-content.md
@@ -0,0 +1,515 @@
+---
+title: Multimodal Content
+id: multimodal-content
+order: 4
+description: "Send images, audio, video, and documents alongside text in TanStack AI messages with typed ContentPart primitives for multimodal models."
+keywords:
+  - tanstack ai
+  - multimodal
+  - vision
+  - images
+  - audio
+  - video
+  - documents
+  - ContentPart
+  - ImagePart
+---
+
+TanStack AI supports multimodal content in messages, allowing you to send images, audio, video, and documents alongside text to AI models that support these modalities.
+
+When sending messages to AI models, you can include different types of content:
+- **Text** - Plain text messages
+- **Images** - JPEG, PNG, GIF, WebP images
+- **Audio** - Audio files (model-dependent support)
+- **Video** - Video files (model-dependent support)
+- **Documents** - PDFs and other document types
+
+## Content Parts
+
+Multimodal messages use the `ContentPart` type to represent different content types:
+
+```typescript
+import type { ContentPart, ImagePart, TextPart } from '@tanstack/ai'
+
+// Text content
+const textPart: TextPart = {
+  type: 'text',
+  content: 'What do you see in this image?'
+}
+
+// Image from base64 data (mimeType is required for data sources)
+const imagePart: ImagePart = {
+  type: 'image',
+  source: {
+    type: 'data',
+    value: 'base64EncodedImageData...',
+    mimeType: 'image/jpeg' // Required for data sources
+  },
+  metadata: {
+    // Provider-specific metadata
+    detail: 'high' // OpenAI detail level
+  }
+}
+
+// Image from URL (mimeType is optional for URL sources)
+const imageUrlPart: ImagePart = {
+  type: 'image',
+  source: {
+    type: 'url',
+    value: 'https://example.com/image.jpg',
+    mimeType: 'image/jpeg' // Optional hint for URL sources
+  }
+}
+```
+
+## Using Multimodal Content in Messages
+
+Messages can have `content` as either a string or an array of `ContentPart`:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const response = await chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [
+    {
+      role: 'user',
+      content: [
+        { type: 'text', content: 'What is in this image?' },
+        {
+          type: 'image',
+          source: {
+            type: 'url',
+            value: 'https://example.com/photo.jpg'
+          }
+        }
+      ]
+    }
+  ]
+})
+```
+
+## Provider Support
+
+### OpenAI
+
+OpenAI supports images and audio in their vision and audio models:
+
+```typescript
+import { openaiText } from '@tanstack/ai-openai'
+import { imageBase64 } from './data'
+
+const adapter = openaiText('gpt-5.5')
+
+// Image with detail level metadata
+const message = {
+  role: 'user' ,
+  content: [
+    { type: 'text' , content: 'Describe this image' },
+    {
+      type: 'image' ,
+      source: { type: 'data' , value: imageBase64, mimeType: 'image/jpeg' },
+      metadata: { detail: 'high' } // 'auto' | 'low' | 'high'
+    }
+  ]
+}
+```
+
+**Supported modalities by model:**
+- `gpt-5.2`, `gpt-5-mini`: text, image
+- `gpt-4o-audio`: text, audio
+
+### Anthropic
+
+Anthropic's Claude models support images and PDF documents:
+
+```typescript
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { imageBase64, pdfBase64 } from './data'
+
+const adapter = anthropicText('claude-sonnet-4-6')
+
+// Image with mimeType in source
+const imageMessage = {
+  role: 'user' ,
+  content: [
+    { type: 'text' , content: 'What do you see?' },
+    {
+      type: 'image' ,
+      source: { type: 'data' , value: imageBase64, mimeType: 'image/jpeg' }
+    }
+  ]
+}
+
+// PDF document
+const docMessage = {
+  role: 'user',
+  content: [
+    { type: 'text', content: 'Summarize this document' },
+    {
+      type: 'document',
+      source: { type: 'data', value: pdfBase64, mimeType: 'application/pdf' }
+    }
+  ]
+}
+```
+
+**Supported modalities:**
+- All Claude models (e.g. `claude-haiku-4-5`, `claude-sonnet-5`, `claude-opus-4-8`, `claude-fable-5`): text, image, and document (PDF)
+
+Check each model's `supports.input` in `@tanstack/ai-anthropic`'s `model-meta.ts` for the authoritative per-model list.
+
+### Gemini
+
+Google's Gemini models support a wide range of modalities:
+
+```typescript
+import { geminiText } from '@tanstack/ai-gemini'
+import { imageBase64 } from './data'
+
+const adapter = geminiText('gemini-3-flash-preview')
+
+// Image with mimeType in source
+const message = {
+  role: 'user',
+  content: [
+    { type: 'text', content: 'Analyze this image' },
+    {
+      type: 'image',
+      source: { type: 'data', value: imageBase64, mimeType: 'image/png' }
+    }
+  ]
+}
+```
+
+**Supported modalities:**
+- `gemini-2.5-flash`: text, image, audio, video
+
+### Ollama
+
+Ollama supports images in compatible models:
+
+```typescript
+import { ollamaText } from '@tanstack/ai-ollama'
+import { imageBase64 } from './data'
+
+// `ollamaText(model)` takes a model name. The host is read from the
+// `OLLAMA_HOST` environment variable (defaults to http://localhost:11434).
+const adapter = ollamaText('llama3.2-vision')
+
+// Image as base64
+const message = {
+  role: 'user',
+  content: [
+    { type: 'text', content: 'What is in this image?' },
+    {
+      type: 'image',
+      source: { type: 'data', value: imageBase64, mimeType: 'image/jpeg' }
+    }
+  ]
+}
+```
+
+**Note:** Ollama support varies by model. Check the specific model documentation for multimodal capabilities.
+
+## Source Types
+
+Content can be provided as either inline data or a URL:
+
+### Data (Base64)
+
+Use `type: 'data'` for inline base64-encoded content. **The `mimeType` field is required** to ensure providers receive proper content type information:
+
+```typescript
+const imagePart = {
+  type: 'image',
+  source: {
+    type: 'data',
+    value: 'iVBORw0KGgoAAAANSUhEUgAAAAUA...', // Base64 string
+    mimeType: 'image/png' // Required for data sources
+  }
+}
+
+const audioPart = {
+  type: 'audio',
+  source: {
+    type: 'data',
+    value: 'base64AudioData...',
+    mimeType: 'audio/mp3' // Required for data sources
+  }
+}
+```
+
+### URL
+
+Use `type: 'url'` for content hosted at a URL. The `mimeType` field is **optional** as providers can often infer it from the URL or response headers:
+
+```typescript
+const imagePart = {
+  type: 'image' ,
+  source: {
+    type: 'url' ,
+    value: 'https://example.com/image.jpg',
+    mimeType: 'image/jpeg' // Optional hint
+  }
+}
+```
+
+**Note:** Not all providers support URL-based content for all modalities. Check provider documentation for specifics.
+
+## Backward Compatibility
+
+String content continues to work as before:
+
+```typescript
+// This still works
+const message = {
+  role: 'user',
+  content: 'Hello, world!'
+}
+
+// And this works for multimodal
+const multimodalMessage = {
+  role: 'user',
+  content: [
+    { type: 'text', content: 'Hello, world!' },
+    { type: 'image', source: { type: 'url', value: '...' } }
+  ]
+}
+```
+
+## Type Safety
+
+The multimodal types are fully typed. Provider-specific metadata types are available:
+
+```typescript
+import type { 
+  ContentPart,
+  ImagePart,
+  DocumentPart,
+  AudioPart,
+  VideoPart,
+  TextPart 
+} from '@tanstack/ai'
+
+// Provider-specific metadata types
+import type { OpenAIImageMetadata } from '@tanstack/ai-openai'
+import type { AnthropicImageMetadata } from '@tanstack/ai-anthropic'
+import type { GeminiImageMetadata } from '@tanstack/ai-gemini'
+```
+
+### Validating Dynamic Messages
+
+When receiving messages from external sources (like `request.json()`), the data is typed as `any`. TanStack AI does not ship a runtime message validator — define a schema with your preferred Standard-Schema library (Zod, Valibot, ArkType, …) and parse the body before handing it to `chat()`.
+
+```typescript ignore
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+const ContentPartSchema = z.discriminatedUnion('type', [
+  z.object({ type: z.literal('text'), content: z.string() }),
+  z.object({
+    type: z.literal('image'),
+    source: z.object({ type: z.enum(['url', 'data']), value: z.string() }),
+  }),
+])
+
+const MessageSchema = z.object({
+  // `ModelMessage.role` is 'user' | 'assistant' | 'tool' — there is no
+  // 'system' role. System instructions are passed separately via the
+  // `systemPrompts` option on `chat()`, not as messages.
+  role: z.enum(['user', 'assistant', 'tool']),
+  content: z.union([z.string(), z.array(ContentPartSchema)]),
+})
+
+const BodySchema = z.object({ messages: z.array(MessageSchema) })
+
+// In an API route handler
+const { messages } = BodySchema.parse(await request.json())
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+})
+```
+
+The TypeScript types on `chat()` still constrain anything you append at the call site to the modalities supported by the selected model.
+
+## Best Practices
+
+1. **Use appropriate source type**: Use `data` for small content or when you need to include content inline. Use `url` for large files or when the content is already hosted.
+
+2. **Include metadata**: Provide relevant metadata (like `mimeType` or `detail`) to help the model process the content correctly.
+
+3. **Check model support**: Not all models support all modalities. Verify the model you're using supports the content types you want to send.
+
+4. **Handle errors gracefully**: When a model doesn't support a particular modality, it may throw an error. Handle these cases in your application.
+
+## Client-Side Multimodal Messages
+
+When using the `ChatClient` from `@tanstack/ai-client`, you can send multimodal messages directly from your UI using the `sendMessage` method.
+
+### Basic Usage
+
+The `sendMessage` method accepts either a simple string or a `MultimodalContent` object:
+
+```typescript
+import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'
+
+const client = new ChatClient({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+// Simple text message
+await client.sendMessage('Hello!')
+
+// Multimodal message with image
+await client.sendMessage({
+  content: [
+    { type: 'text', content: 'What is in this image?' },
+    {
+      type: 'image',
+      source: { type: 'url', value: 'https://example.com/photo.jpg' }
+    }
+  ]
+})
+```
+
+### Custom Message ID
+
+You can provide a custom ID for the message:
+
+```typescript
+import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'
+
+const client = new ChatClient({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+await client.sendMessage({
+  content: 'Hello!',
+  id: 'custom-message-id-123'
+})
+```
+
+### Per-Message Forwarded Props
+
+The second parameter allows you to pass additional `forwardedProps` for that specific request. These are shallow-merged with the client's base `forwardedProps` configuration, with per-message values taking priority:
+
+```typescript
+import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'
+
+const client = new ChatClient({
+  connection: fetchServerSentEvents('/api/chat'),
+  forwardedProps: { model: 'gpt-5' }, // Base forwarded props
+})
+
+// Override model for this specific message
+await client.sendMessage('Analyze this complex problem', {
+  model: 'gpt-5',
+  temperature: 0.2,
+})
+```
+
+> **Note:** The legacy `body` constructor option is still supported but deprecated. New code should use `forwardedProps`. Both populate the same wire field.
+
+### React Example
+
+Here's how to use multimodal messages in a React component:
+
+```tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+import { useState } from 'react'
+
+function ChatWithImages() {
+  const [imageUrl, setImageUrl] = useState('')
+  const { sendMessage, messages } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const handleSendWithImage = () => {
+    if (imageUrl) {
+      sendMessage({
+        content: [
+          { type: 'text', content: 'What do you see in this image?' },
+          { type: 'image', source: { type: 'url', value: imageUrl } }
+        ]
+      })
+    }
+  }
+
+  return (
+    <div>
+      <input
+        type="url"
+        placeholder="Image URL"
+        value={imageUrl}
+        onChange={(e) => setImageUrl(e.target.value)}
+      />
+      <button onClick={handleSendWithImage}>Send with Image</button>
+    </div>
+  )
+}
+```
+
+### File Upload Example
+
+Here's how to handle file uploads and send them as multimodal content:
+
+```tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+function ChatWithFileUpload() {
+  const { sendMessage } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const handleFileUpload = async (file: File) => {
+    // Convert file to base64
+    const base64 = await new Promise<string>((resolve) => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        const result = reader.result as string
+        // Remove data URL prefix (e.g., "data:image/png;base64,")
+        resolve(result.split(',')[1]!)
+      }
+      reader.readAsDataURL(file)
+    })
+
+    // Determine content type based on file type
+    const type = file.type.startsWith('image/')
+      ? 'image'
+      : file.type.startsWith('audio/')
+        ? 'audio'
+        : file.type.startsWith('video/')
+          ? 'video'
+          : 'document'
+
+    await sendMessage({
+      content: [
+        { type: 'text', content: `Please analyze this ${type}` },
+        {
+          type,
+          source: { type: 'data', value: base64, mimeType: file.type }
+        }
+      ]
+    })
+  }
+
+  return (
+    <input
+      type="file"
+      accept="image/*,audio/*,video/*,.pdf"
+      onChange={(e) => {
+        const file = e.target.files?.[0]
+        if (file) handleFileUpload(file)
+      }}
+    />
+  )
+}
+```
+
diff --git a/mintlify/ai/advanced/otel.md b/mintlify/ai/advanced/otel.md
new file mode 100644
index 000000000..810879b52
--- /dev/null
+++ b/mintlify/ai/advanced/otel.md
@@ -0,0 +1,241 @@
+---
+title: OpenTelemetry
+id: otel
+order: 3
+description: "Emit vendor-neutral OpenTelemetry traces and metrics from every TanStack AI chat() call, following the OTel GenAI semantic conventions."
+keywords:
+  - tanstack ai
+  - opentelemetry
+  - otel
+  - observability
+  - tracing
+  - metrics
+  - gen_ai
+  - semantic conventions
+---
+
+The `otelMiddleware` factory wires TanStack AI into your existing OpenTelemetry setup. Every `chat()` call produces a root span, one child span per agent-loop iteration, and one grandchild span per tool call — all with [GenAI semantic-convention attributes](https://opentelemetry.io/docs/specs/semconv/gen-ai/). It also records GenAI token and duration histograms when a `Meter` is provided.
+
+## Setup
+
+Install `@opentelemetry/api` — it's an optional peer dependency of `@tanstack/ai`:
+
+```bash
+pnpm add @opentelemetry/api
+```
+
+Wire up your OTel SDK however you already do (e.g. `@opentelemetry/sdk-node`). Then pass a `Tracer` (and optionally a `Meter`) into the middleware. The OTel middleware lives on its own subpath — importing it never affects users who don't need OTel:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { openaiText } from '@tanstack/ai-openai'
+import { trace, metrics } from '@opentelemetry/api'
+
+const otel = otelMiddleware({
+  tracer: trace.getTracer('my-app'),
+  meter: metrics.getMeter('my-app'),
+})
+
+const result = await chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'hi' }],
+  middleware: [otel],
+  stream: false,
+})
+```
+
+## What gets emitted
+
+### Spans
+
+```text
+chat gpt-5.5              (root, kind: INTERNAL)
+├── chat gpt-5.5 #0       (iteration, kind: CLIENT)
+│   ├── execute_tool get_weather
+│   └── execute_tool get_time
+└── chat gpt-5.5 #1       (iteration, kind: CLIENT)
+```
+
+Iteration spans are numbered (`#0`, `#1`, ...) so distinct iterations of the same chat are easy to pick apart in trace viewers.
+
+### Attribute reference
+
+| Level | Attribute | Value |
+| --- | --- | --- |
+| root / iteration | `gen_ai.system` | `openai`, `anthropic`, ... |
+| iteration | `gen_ai.operation.name` | `chat` |
+| root / iteration | `gen_ai.request.model` | requested model |
+| iteration | `gen_ai.response.model` | actual model |
+| iteration | `gen_ai.request.temperature` | from config |
+| iteration | `gen_ai.request.top_p` | from config |
+| iteration | `gen_ai.request.max_tokens` | from config |
+| iteration | `gen_ai.usage.input_tokens` | per iteration |
+| iteration | `gen_ai.usage.output_tokens` | per iteration |
+| root / iteration | `gen_ai.usage.total_tokens` | provider-reported total |
+| root / iteration | `gen_ai.usage.cost` | provider-reported cost, when available |
+| root / iteration | `gen_ai.usage.cache_read.input_tokens` | cached prompt tokens, when reported |
+| root / iteration | `gen_ai.usage.cache_creation.input_tokens` | cache-write prompt tokens, when reported |
+| root / iteration | `gen_ai.usage.reasoning.output_tokens` | reasoning/thinking tokens, when reported |
+| root / iteration | `tanstack.ai.usage.duration_seconds` | duration-based billing (e.g. transcription), when reported |
+| root / iteration | `tanstack.ai.usage.upstream_cost` | gateway upstream cost (e.g. OpenRouter), when reported |
+| root / iteration | `tanstack.ai.usage.upstream_input_cost` | upstream input cost split, when reported |
+| root / iteration | `tanstack.ai.usage.upstream_output_cost` | upstream output cost split, when reported |
+| iteration | `gen_ai.response.finish_reasons` | `[stop]`, `[tool_calls]`, ... |
+| root | `gen_ai.usage.input_tokens` | rolled up |
+| root | `gen_ai.usage.output_tokens` | rolled up |
+| root | `tanstack.ai.iterations` | iteration count |
+| tool | `gen_ai.tool.name` | tool name |
+| tool | `gen_ai.tool.call.id` | tool call id |
+| tool | `gen_ai.tool.type` | `function` |
+| tool | `tanstack.ai.tool.outcome` | `success` / `error` |
+
+Usage attributes beyond input/output tokens are emitted only when the provider reports them, so spans stay clean otherwise. Cache and reasoning breakdowns use the official GenAI semconv names; `gen_ai.usage.cost` and `gen_ai.usage.total_tokens` are de-facto extensions consumed directly by backends like PostHog — without them, backends re-derive cost from their own price tables and lose cache discounts and gateway markup. Fields with no established convention (duration-based billing, the upstream cost split) are TanStack-namespaced.
+
+### Metrics
+
+Two GenAI-standard histograms:
+
+- `gen_ai.client.operation.duration` (seconds) — recorded **once per `chat()` call**, covering all agent-loop iterations and tool execution. On error or abort the record carries an `error.type` attribute (the thrown error's `name`, or `"cancelled"` for aborts).
+- `gen_ai.client.token.usage` (tokens) — recorded **once per iteration** (two records: input and output), tagged with `gen_ai.token.type`.
+
+Both `gen_ai.response.id` and `gen_ai.response.model` are deliberately excluded from metric attributes to keep cardinality low (per-request custom-model names and request IDs would blow up the series set).
+
+## Privacy: capturing prompts and completions
+
+By default, only metadata lands on spans. To record prompt and completion content, set `captureContent: true`. Content is captured as OTel span events following the GenAI convention:
+
+- `gen_ai.user.message`, `gen_ai.system.message`, `gen_ai.assistant.message`, `gen_ai.tool.message`, `gen_ai.choice`
+
+Pass a `redact` function to strip PII before anything is recorded:
+
+```ts
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { trace } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('my-app')
+
+otelMiddleware({
+  tracer,
+  captureContent: true,
+  redact: (text) => text.replace(/\b\d{3}-\d{2}-\d{4}\b/g, '[SSN]'),
+})
+```
+
+If `redact` throws, the middleware writes the literal sentinel `"[redaction_failed]"` into the span event and logs a warning — it never falls back to the raw content. This is the load-bearing invariant for users who ship traces to third-party backends: a broken redactor should shut off capture, not leak prompts.
+
+Accumulated assistant text (the `gen_ai.choice` event) is capped at `maxContentLength` characters (default `100 000`); longer completions are truncated with a trailing `"…"` marker.
+
+Multimodal content (images, audio, video, documents) is represented as placeholder strings (`[image]`, `[audio]`, ...) to preserve message order without dumping binary data onto spans. Use `onSpanEnd` if you need richer multimodal capture.
+
+Prompt/system/user message events fire from `onConfig` at the start of every iteration, which means the full conversation history (as the adapter will re-send it) is re-emitted on each iteration span. This mirrors what the provider actually sees on the wire.
+
+## Extension points
+
+All four extensions are optional. Each wraps user code in try/catch — a thrown callback becomes a log line, never a broken chat.
+
+### `spanNameFormatter(info)`
+
+Override default span names. `info.kind` is `'chat' | 'iteration' | 'tool'`.
+
+```ts
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { trace } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('my-app')
+
+otelMiddleware({
+  tracer,
+  spanNameFormatter: (info) =>
+    info.kind === 'tool' ? `tool:${info.toolName}` : `chat:${info.ctx.model}`,
+})
+```
+
+### `attributeEnricher(info)`
+
+Add custom attributes to every span. Fires once per span.
+
+```ts
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { trace } from '@opentelemetry/api'
+import { getCurrentTenant } from './context'
+
+const tracer = trace.getTracer('my-app')
+
+otelMiddleware({
+  tracer,
+  attributeEnricher: () => ({
+    'tenant.id': getCurrentTenant(),
+  }),
+})
+```
+
+### `onBeforeSpanStart(info, options)`
+
+Mutate `SpanOptions` immediately before `tracer.startSpan(...)`. Useful for adding links, custom start times, or extra default attributes.
+
+### `onSpanEnd(info, span)`
+
+Fires just before every `span.end()`. Common uses: record custom events, emit per-tool metrics via your own `Meter`.
+
+```ts
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { trace, metrics } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('my-app')
+const meter = metrics.getMeter('my-app')
+
+const toolDuration = meter.createHistogram('tool.duration')
+otelMiddleware({
+  tracer,
+  onSpanEnd: (info, span) => {
+    if (info.kind === 'tool') {
+      // span is still recording; read timestamps from your own store if needed
+      toolDuration.record(1, { 'tool.name': info.toolName })
+    }
+  },
+})
+```
+
+## Beyond chat: media activities
+
+`otelMiddleware` is not chat-only. The media activities — `generateImage`, `generateVideo`, `generateAudio`, `generateSpeech`, and `generateTranscription` — accept the **same** `otelMiddleware` value on their `middleware` option. Each is a single request → response (or submit → poll for video), so the middleware emits one span per call instead of the chat span tree:
+
+```ts
+import { generateImage } from '@tanstack/ai'
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { openaiImage } from '@tanstack/ai-openai'
+import { trace, metrics } from '@opentelemetry/api'
+
+const otel = otelMiddleware({
+  tracer: trace.getTracer('my-app'),
+  meter: metrics.getMeter('my-app'),
+})
+
+const result = await generateImage({
+  adapter: openaiImage('gpt-image-2'),
+  prompt: 'A serene mountain landscape at sunset',
+  middleware: [otel],
+})
+```
+
+The same `otel` value can be passed to `chat()` and to any media activity — its shared lifecycle hooks (`onStart` / `onUsage` / `onFinish` / `onAbort` / `onError`) are authored against the activity-agnostic `GenerationMiddlewareContext`, so the one instance works everywhere.
+
+Each media call produces one `CLIENT` span tagged with the activity's `gen_ai.operation.name`:
+
+| Activity | `gen_ai.operation.name` |
+| --- | --- |
+| `generateImage` | `image_generation` |
+| `generateVideo` | `video_generation` |
+| `generateAudio` | `audio_generation` |
+| `generateSpeech` | `text_to_speech` |
+| `generateTranscription` | `transcription` |
+
+The span carries `gen_ai.system` and `gen_ai.request.model` at start and, on finish, the same `gen_ai.usage.*` / `tanstack.ai.usage.*` attributes documented above — including `tanstack.ai.usage.units_billed` for unit-billed media. When a `Meter` is supplied it records the `gen_ai.client.operation.duration` histogram, tagged per activity. For streaming video the span covers the full create → poll → complete lifecycle; for non-streaming `generateVideo` it covers job submission. If a streaming video consumer abandons the stream before completion, the span is ended via `onAbort` (status `ERROR`, `tanstack.ai.completion.reason = cancelled`) rather than leaked.
+
+`otelMiddleware` applies the same `spanNameFormatter`, `attributeEnricher`, `onBeforeSpanStart`, and `onSpanEnd` extension points to media spans — the span info is discriminated by `kind`, where media spans report `kind: 'generation'`. For a custom backend, implement the base `GenerationMiddleware` contract directly; its hooks (`onStart` / `onUsage` / `onFinish` / `onAbort` / `onError`) receive the `GenerationMiddlewareContext` and fire for every activity, chat included. The `GenerationMiddleware` types are exported from the package root, while the `otelMiddleware` value lives on the `@tanstack/ai/middlewares/otel` subpath so importing `@tanstack/ai` never requires the optional `@opentelemetry/api` peer.
+
+## Related
+
+- [Middleware](/ai/advanced/middleware) — the lifecycle this middleware hooks into
+- [Debug Logging](/ai/advanced/debug-logging) — quick console-output diagnostics, complementary to OTel
\ No newline at end of file
diff --git a/mintlify/ai/advanced/per-model-type-safety.md b/mintlify/ai/advanced/per-model-type-safety.md
new file mode 100644
index 000000000..bd9d3c00e
--- /dev/null
+++ b/mintlify/ai/advanced/per-model-type-safety.md
@@ -0,0 +1,82 @@
+---
+title: Per-Model Type Safety
+id: per-model-type-safety
+order: 5
+description: "TanStack AI narrows modelOptions and content types to the specific model you select, enforcing capabilities at compile time."
+keywords:
+  - tanstack ai
+  - type safety
+  - per-model types
+  - modelOptions
+  - typescript
+  - autocomplete
+  - compile-time
+---
+
+The AI SDK provides **model-specific type safety** for `modelOptions`. Each model's capabilities determine which model options are allowed, and TypeScript will enforce this at compile time.
+
+> **Tip:** For structured outputs, most users should prefer the first-class `chat({ outputSchema })` option over the raw provider `text` option shown below — it works across providers and validates the result for you. The raw `text` option is for when you need provider-specific control.
+
+## How It Works
+
+Each adapter factory captures the model literal as a type parameter — `openaiText<TModel>(model)` — so the adapter carries the exact model you selected at the type level.
+
+The `modelOptions` you pass are then resolved against a per-model map (`ResolveProviderOptions<TModel>`). Each model's entry declares only the options that model actually supports. A model without a structured-output capability simply has no `text` property in its resolved options type, so TypeScript's excess-property checking rejects `text` for that model — at compile time, with zero runtime cost.
+
+This is the same mechanism described in [Typed Pre-Configured Options](/ai/advanced/typed-options) (which captures these resolved options in a reusable object) and [Extend Adapter](/ai/advanced/extend-adapter) (which lets you attach the same typed `modelOptions` to custom models).
+
+## Usage Examples
+
+### ✅ Correct Usage
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+// ✅ gpt-5 supports structured outputs - `text` is allowed
+const validCall = chat({
+  adapter: openaiText("gpt-5"),
+  messages: [],
+  modelOptions: {
+    // OK - text is included for gpt-5
+    text: {
+      format: {
+        type: "json_schema",
+        name: "my_schema",
+        schema: {
+          /* JSON Schema object */
+        },
+      },
+    },
+  },
+});
+```
+
+### ❌ Incorrect Usage
+
+```typescript ignore
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+// ❌ gpt-4-turbo does NOT support structured outputs - `text` is rejected
+const invalidCall = chat({
+  adapter: openaiText("gpt-4-turbo"),
+  messages: [],
+  modelOptions: {
+    text: {}, // ❌ TypeScript error: 'text' does not exist in type
+  },
+});
+```
+
+TypeScript will produce:
+
+```
+error TS2353: Object literal may only specify known properties, and 'text' does not exist in type ...'.
+```
+ 
+## Benefits
+
+- **Compile-time safety**: Catch incorrect model options before deployment
+- **Better IDE experience**: Autocomplete shows only valid options for each model
+- **Self-documenting**: Model capabilities are explicit in the type system
+- **Zero runtime overhead**: All type checking happens at compile time
diff --git a/mintlify/ai/advanced/runtime-adapter-switching.md b/mintlify/ai/advanced/runtime-adapter-switching.md
new file mode 100644
index 000000000..cc63a2e2c
--- /dev/null
+++ b/mintlify/ai/advanced/runtime-adapter-switching.md
@@ -0,0 +1,239 @@
+---
+title: Runtime Adapter Switching
+id: runtime-adapter-switching
+order: 6
+description: "Let users switch between LLM providers at runtime in TanStack AI while keeping full TypeScript type safety for each adapter's model options."
+keywords:
+  - tanstack ai
+  - runtime switching
+  - multi-provider
+  - adapter factory
+  - type safety
+  - dynamic adapter
+---
+
+# Runtime Adapter Switching with Type Safety
+
+Learn how to build interfaces where users can switch between LLM providers at runtime while maintaining full TypeScript type safety.
+
+## The Simple Approach
+
+With TanStack AI, the model is passed directly to the adapter factory function. This gives you full type safety and autocomplete at the point of definition:
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+
+type Provider = 'openai' | 'anthropic'
+
+// Define adapters with their models - autocomplete works here!
+const adapters = {
+  anthropic: () => anthropicText('claude-sonnet-4-6'),  // ✅ Autocomplete!
+  openai: () => openaiText('gpt-5.5'),  // ✅ Autocomplete!
+}
+
+async function handleRequest(request: Request) {
+  // In your request handler:
+  const body = await request.json()
+  const provider: Provider = body.forwardedProps?.provider || 'openai'
+
+  const stream = chat({
+    adapter: adapters[provider](),
+    messages: body.messages,
+  })
+}
+```
+
+## Why This Works
+
+Each adapter factory function accepts a model name as its first argument and returns a fully typed adapter:
+
+```typescript
+import { openaiText, OpenAITextAdapter } from '@tanstack/ai-openai'
+
+// These are equivalent:
+const adapter1 = openaiText('gpt-5.5')
+const adapter2 = new OpenAITextAdapter({ apiKey: process.env.OPENAI_API_KEY! }, 'gpt-5.5')
+
+// The model is stored on the adapter
+console.log(adapter1.model) // 'gpt-5.5'
+```
+
+When you pass an adapter to `chat()`, it uses the model from `adapter.model`. This means:
+
+- **Full autocomplete** - When typing the model name, TypeScript knows valid options
+- **Type validation** - Invalid model names cause compile errors
+- **Clean code** - No separate `model` parameter needed
+
+## Full Example
+
+Here's a complete example showing a multi-provider chat API:
+
+```typescript ignore
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { geminiText } from '@tanstack/ai-gemini'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+type Provider = 'openai' | 'anthropic' | 'gemini' | 'ollama'
+
+// Define adapters with their models
+const adapters = {
+  anthropic: () => anthropicText('claude-sonnet-4-6'),
+  gemini: () => geminiText('gemini-3-flash-preview'),
+  ollama: () => ollamaText('mistral:7b'),
+  openai: () => openaiText('gpt-5.5'),
+}
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const abortController = new AbortController()
+        const body = await request.json()
+        // `forwardedProps` is the AG-UI field set by `useChat({ forwardedProps })`.
+        // The legacy `body.data.provider` access still works (mirrored on the
+        // wire for backward compatibility) but `forwardedProps` is preferred.
+        const provider: Provider = body.forwardedProps?.provider || 'openai'
+
+        const stream = chat({
+          adapter: adapters[provider](),
+          tools: [...],
+          systemPrompts: [...],
+          messages: body.messages,
+          abortController,
+        })
+
+        return toServerSentEventsResponse(stream, { abortController })
+      },
+    },
+  },
+})
+```
+
+## Using with Image Adapters
+
+The same pattern works for image generation:
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+type ImageProvider = 'openai' | 'gemini'
+
+const imageAdapters: Record<ImageProvider, () => ReturnType<typeof openaiImage | typeof geminiImage>> = {
+  openai: () => openaiImage('gpt-image-1'),
+  gemini: () => geminiImage('gemini-3.1-flash-image-preview'),
+}
+
+export async function POST(request: Request) {
+  const body = await request.json()
+  const provider: ImageProvider = body.provider ?? 'openai'
+
+  const result = await generateImage({
+    adapter: imageAdapters[provider](),
+    prompt: 'A beautiful sunset over mountains',
+    size: '1024x1024',
+  })
+
+  return Response.json(result)
+}
+```
+
+## Using with Summarize Adapters
+
+And for summarization:
+
+```typescript
+import { summarize } from '@tanstack/ai'
+import { openaiSummarize } from '@tanstack/ai-openai'
+import { anthropicSummarize } from '@tanstack/ai-anthropic'
+
+type SummarizeProvider = 'openai' | 'anthropic'
+
+const summarizeAdapters: Record<SummarizeProvider, () => ReturnType<typeof openaiSummarize | typeof anthropicSummarize>> = {
+  openai: () => openaiSummarize('gpt-5.4-mini'),
+  anthropic: () => anthropicSummarize('claude-sonnet-4-6'),
+}
+
+export async function POST(request: Request) {
+  const body = await request.json()
+  const provider: SummarizeProvider = body.provider ?? 'openai'
+  const longDocument: string = body.text
+
+  const result = await summarize({
+    adapter: summarizeAdapters[provider](),
+    text: longDocument,
+    maxLength: 100,
+    style: 'concise',
+  })
+
+  return Response.json(result)
+}
+```
+
+## Migration from Switch Statements
+
+If you have existing code using switch statements, here's how to migrate:
+
+### Before
+
+```typescript ignore
+let adapter
+let model
+
+switch (provider) {
+  case 'anthropic':
+    adapter = anthropicText()
+    model = 'claude-sonnet-4-6'
+    break
+  case 'openai':
+  default:
+    adapter = openaiText()
+    model = 'gpt-5.5'
+    break
+}
+
+const stream = chat({
+  adapter: adapter as any,
+  model: model as any,
+  messages,
+})
+```
+
+### After
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+
+type AfterProvider = 'openai' | 'anthropic'
+
+const adapters = {
+  anthropic: () => anthropicText('claude-sonnet-4-6'),
+  openai: () => openaiText('gpt-5.5'),
+}
+
+export async function POST(request: Request) {
+  const body = await request.json()
+  const provider: AfterProvider = body.forwardedProps?.provider ?? 'openai'
+
+  const stream = chat({
+    adapter: adapters[provider](),
+    messages: body.messages,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+The key changes:
+
+1. Replace the switch statement with an object of factory functions
+2. Each factory function creates an adapter with the model included
+3. No more `as any` casts - full type safety!
diff --git a/mintlify/ai/advanced/runtime-context.md b/mintlify/ai/advanced/runtime-context.md
new file mode 100644
index 000000000..18c703fb7
--- /dev/null
+++ b/mintlify/ai/advanced/runtime-context.md
@@ -0,0 +1,319 @@
+---
+title: Runtime Context
+id: runtime-context
+order: 2
+description: "Pass typed runtime dependencies to TanStack AI tools and middleware without serializing them to the model or AG-UI protocol context."
+keywords:
+  - tanstack ai
+  - runtime context
+  - typed context
+  - tools context
+  - middleware context
+  - ag-ui context
+---
+
+Runtime context is application state you pass to tool implementations and middleware. Use it for request-scoped or client-local dependencies such as authenticated users, database clients, tenancy, feature flags, audit loggers, or browser services.
+
+Runtime context is not prompt context and is not the AG-UI `RunAgentInput.context` field. It is never sent to the model automatically.
+
+## How Type Safety Works
+
+Runtime context is checked from the point of view of the code that consumes it. Tools and middleware declare the context shape they need, and `chat()`, `ChatClient`, and framework hooks check that the `context` value you pass satisfies those requirements.
+
+The source of truth is:
+
+- `toolDefinition(...).server<TContext>(...)` for server tools.
+- `toolDefinition(...).client<TContext>(...)` for client tools.
+- `ChatMiddleware<TContext>` for middleware.
+
+This means the context value is the implementation detail you provide at runtime, while tools and middleware are the contract. TanStack AI infers the required context from every typed tool and middleware in the call, merges those requirements, and checks your `context` option against the result.
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition, type ChatMiddleware } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+type UserContext = {
+  userId: string;
+};
+
+type TenantContext = {
+  tenantId: string;
+};
+
+const currentUserTool = toolDefinition({
+  name: "current_user",
+  description: "Read the current user",
+}).server<UserContext>((_input, ctx) => {
+  return { userId: ctx.context.userId };
+});
+
+const tenantMiddleware: ChatMiddleware<TenantContext> = {
+  name: "tenant",
+  onStart(ctx) {
+    console.log(ctx.context.tenantId);
+  },
+};
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [currentUserTool],
+    middleware: [tenantMiddleware],
+    context: {
+      userId: "user_123",
+      tenantId: "tenant_456",
+    },
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+In this example, the tool requires `UserContext` and the middleware requires `TenantContext`, so the `context` value must satisfy both. If you remove `tenantId`, TypeScript reports an error because `tenantMiddleware` declared that it needs it.
+
+This is intentional. The `context` object alone should not decide what tools and middleware are allowed to read. The consumers define their requirements, and the call site proves that it supplied them. Untyped tools and middleware still work; they receive `unknown` context and do not force a `context` option.
+
+This inference also works when reusable tools or middleware are declared outside the `chat()` call and passed in as arrays. A consumer can opt into optional runtime context by declaring `TContext | undefined`; then the `context` option can be omitted when all typed consumers accept `undefined`. If a context value is provided, it still has to satisfy every typed consumer.
+
+The same rule applies on the client:
+
+```typescript
+import { clientTools } from "@tanstack/ai-client";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { toolDefinition } from "@tanstack/ai";
+
+type ClientRuntimeContext = {
+  currentTabId: string;
+};
+
+const inspectClientContext = toolDefinition({
+  name: "inspect_client_context",
+  description: "Inspect local browser context",
+}).client<ClientRuntimeContext & { mode: "debug" }>((_input, ctx) => {
+  return {
+    tabId: ctx.context.currentTabId,
+    mode: ctx.context.mode,
+  };
+});
+
+useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(inspectClientContext),
+  context: {
+    currentTabId: "settings",
+    mode: "debug",
+  },
+});
+```
+
+Because the client tool declares `ClientRuntimeContext & { mode: "debug" }`, `useChat()` requires a `context` value with both `currentTabId` and the literal `mode: "debug"`.
+
+## Server Runtime Context
+
+Define the context type once, use it in server tools and middleware, then pass the matching `context` value to `chat()`.
+
+```typescript
+import {
+  chat,
+  toServerSentEventsResponse,
+  toolDefinition,
+  type ChatMiddleware,
+} from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { requireUser, db } from "./auth";
+
+type AppContext = {
+  userId: string;
+  tenantId: string;
+  db: {
+    notes: {
+      findMany(args: { userId: string; tenantId: string }): Promise<Array<{ title: string }>>;
+    };
+  };
+};
+
+const listNotes = toolDefinition({
+  name: "list_notes",
+  description: "List notes for the current user",
+  inputSchema: z.object({}),
+  outputSchema: z.array(z.object({ title: z.string() })),
+}).server<AppContext>(async (_input, ctx) => {
+  return ctx.context.db.notes.findMany({
+    userId: ctx.context.userId,
+    tenantId: ctx.context.tenantId,
+  });
+});
+
+const auditMiddleware: ChatMiddleware<AppContext> = {
+  name: "audit",
+  onStart(ctx) {
+    console.log("chat started", {
+      requestId: ctx.requestId,
+      userId: ctx.context.userId,
+      tenantId: ctx.context.tenantId,
+    });
+  },
+};
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const user = await requireUser(request);
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [listNotes],
+    middleware: [auditMiddleware],
+    context: {
+      userId: user.id,
+      tenantId: user.tenantId,
+      db,
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+When any tool or middleware in a `chat()` call declares a concrete context type, TypeScript checks the `context` value against that type. Existing untyped tools and middleware continue to work; their `ctx.context` type remains `unknown`.
+
+## Client Runtime Context
+
+Client runtime context is local to `ChatClient` and framework hooks. It is passed to client tool implementations and is not serialized to the server.
+
+```typescript
+import { createChatClientOptions, clientTools } from "@tanstack/ai-client";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { toolDefinition } from "@tanstack/ai";
+
+type ClientContext = {
+  currentTabId: string;
+  toast(message: string): void;
+};
+
+const notifyUser = toolDefinition({
+  name: "notify_user",
+  description: "Show a notification in the current browser tab",
+}).client<ClientContext>((_input, ctx) => {
+  ctx.context.toast(`Updated tab ${ctx.context.currentTabId}`);
+  return { ok: true };
+});
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(notifyUser),
+  context: {
+    currentTabId: "settings",
+    toast: (message) => window.alert(message),
+  },
+});
+
+const chat = useChat(chatOptions);
+```
+
+Use client context for local dependencies only. Do not put values there expecting the server to receive them.
+
+## Client-to-Server Handoff
+
+To send serializable client data to the server, use `forwardedProps`, validate it in your route, and explicitly map it into the server runtime context.
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { clientTools } from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+
+type ClientContext = {
+  currentTabId: string;
+  toast(message: string): void;
+};
+
+const notifyUser = toolDefinition({
+  name: "notify_user",
+  description: "Show a notification in the current browser tab",
+}).client<ClientContext>((_input, ctx) => {
+  ctx.context.toast(`Updated tab ${ctx.context.currentTabId}`);
+  return { ok: true };
+});
+
+// Client
+useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(notifyUser),
+  forwardedProps: {
+    tenantId: "tenant_456",
+  },
+  context: {
+    currentTabId: "settings",
+    toast: (message) => window.alert(message),
+  },
+});
+```
+
+```typescript
+// Server
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { requireUser } from "./auth";
+import { serverTools } from "./tools";
+
+type AppContext = {
+  userId: string;
+  tenantId: string;
+};
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request);
+  const user = await requireUser(request);
+
+  const tenantId =
+    typeof params.forwardedProps.tenantId === "string"
+      ? params.forwardedProps.tenantId
+      : user.defaultTenantId;
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: params.messages,
+    tools: serverTools,
+    context: {
+      userId: user.id,
+      tenantId,
+    } satisfies AppContext,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Treat `forwardedProps` as client-controlled input. Validate and allowlist every field before using it to build server runtime context.
+
+## AG-UI Context
+
+AG-UI also defines `RunAgentInput.context`, usually as protocol-level context entries for interoperable agents. TanStack AI surfaces that field through `chatParamsFromRequest`, but it is separate from `chat({ context })`.
+
+TanStack AI does not automatically copy AG-UI `params.aguiContext` into runtime context. If you want to use AG-UI context values, validate and map them yourself. `params.context` is a deprecated alias of `params.aguiContext` kept for backward compatibility.
+
+```typescript
+import { chat, chatParamsFromRequest, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { buildRuntimeContextFrom } from "./context";
+import { serverTools } from "./tools";
+
+export async function POST(request: Request) {
+  const params = await chatParamsFromRequest(request);
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: params.messages,
+    tools: serverTools,
+    context: buildRuntimeContextFrom(params.aguiContext),
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
diff --git a/mintlify/ai/advanced/tree-shaking.md b/mintlify/ai/advanced/tree-shaking.md
new file mode 100644
index 000000000..49328e199
--- /dev/null
+++ b/mintlify/ai/advanced/tree-shaking.md
@@ -0,0 +1,300 @@
+---
+title: Tree-Shaking
+id: tree-shaking
+order: 7
+description: "TanStack AI's tree-shakeable architecture — import only the activities and adapters you use for minimal bundle size across chat, image, and speech."
+keywords:
+  - tanstack ai
+  - tree-shaking
+  - bundle size
+  - modular imports
+  - performance
+  - tree-shakeable
+---
+
+# Tree-Shaking & Bundle Optimization
+
+TanStack AI is designed from the ground up for maximum tree-shakeability. The entire system—from activity functions to adapters—uses a functional, modular architecture that ensures you only bundle the code you actually use.
+
+## Design Philosophy
+
+Instead of a monolithic API that includes everything, TanStack AI provides:
+
+- **Individual activity functions** - Import only the activities you need (`chat`, `summarize`, etc.)
+- **Individual adapter functions** - Import only the adapters you need (`openaiText`, `openaiSummarize`, etc.)
+- **Functional API design** - Pure functions that can be easily eliminated by bundlers
+- **Separate modules** - Each activity and adapter lives in its own module
+
+This design means that if you only use `chat` with OpenAI, you won't bundle code for summarization, image generation, or other providers.
+
+## Activity Functions
+
+Each AI activity is exported as a separate function from `@tanstack/ai`:
+
+```ts
+// Import only the activities you need
+import { chat } from '@tanstack/ai'              // Chat/text generation
+import { summarize } from '@tanstack/ai'          // Summarization
+import { generateImage } from '@tanstack/ai'      // Image generation
+import { generateSpeech } from '@tanstack/ai'     // Text-to-speech
+import { generateTranscription } from '@tanstack/ai' // Audio transcription
+import { generateVideo } from '@tanstack/ai'       // Video generation
+```
+
+### Example: Chat Only
+
+If you only need chat functionality:
+
+```ts
+// Only chat code is bundled
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+```
+
+Your bundle will **not** include:
+- Summarization logic
+- Image generation logic
+- Other activity implementations
+
+## Adapter Functions
+
+Each provider package exports individual adapter functions for each activity type:
+
+### OpenAI
+
+```ts
+import {
+  openaiText,       // Chat/text generation
+  openaiSummarize,  // Summarization
+  openaiImage,      // Image generation
+  openaiSpeech,     // Text-to-speech
+  openaiTranscription, // Audio transcription
+  openaiVideo,      // Video generation
+} from '@tanstack/ai-openai'
+```
+
+### Anthropic
+
+```ts
+import {
+  anthropicText,       // Chat/text generation
+  anthropicSummarize,  // Summarization
+} from '@tanstack/ai-anthropic'
+```
+
+### Gemini
+
+```ts
+import {
+  geminiText,       // Chat/text generation
+  geminiSummarize,  // Summarization
+  geminiImage,      // Image generation
+  geminiSpeech,     // Text-to-speech (experimental)
+} from '@tanstack/ai-gemini'
+```
+
+### Ollama
+
+```ts
+import {
+  ollamaText,       // Chat/text generation
+  ollamaSummarize,  // Summarization
+} from '@tanstack/ai-ollama'
+```
+
+## Complete Example
+
+Here's how the tree-shakeable design works in practice:
+
+```ts
+// Only import what you need
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Chat generation - returns AsyncIterable<StreamChunk>
+const chatResult = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+
+for await (const chunk of chatResult) {
+  console.log(chunk)
+}
+```
+
+**What gets bundled:**
+- ✅ `chat` function and its dependencies
+- ✅ `openaiText` adapter and its dependencies
+- ✅ Chat-specific streaming and tool handling logic
+
+**What doesn't get bundled:**
+- ❌ `summarize` function
+- ❌ `generateImage` function
+- ❌ Other adapter implementations (Anthropic, Gemini, etc.)
+- ❌ Other activity implementations
+
+## Using Multiple Activities
+
+If you need multiple activities, import only what you use:
+
+```ts
+import { chat, summarize } from '@tanstack/ai'
+import {
+  openaiText,
+  openaiSummarize
+} from '@tanstack/ai-openai'
+
+// Each activity is independent
+const chatResult = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+
+const summarizeResult = await summarize({
+  adapter: openaiSummarize('gpt-5.4-mini'),
+  text: 'Long text to summarize...',
+})
+```
+
+Each activity is in its own module, so bundlers can eliminate unused ones.
+
+## Type Safety
+
+The tree-shakeable design doesn't sacrifice type safety. Each adapter provides full type safety for its supported models:
+
+```ts ignore
+import { openaiText, type OpenAIChatModel } from '@tanstack/ai-openai'
+
+const adapter = openaiText('gpt-5.5')
+
+// TypeScript knows the exact models supported
+const model: OpenAIChatModel = 'gpt-5.5' // ✓ Valid
+const model2: OpenAIChatModel = 'invalid' // ✗ Type error
+```
+
+## Create Options Functions
+
+The `create___Options` functions are also tree-shakeable:
+
+```ts
+import {
+  createChatOptions,
+  createImageOptions
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Only import what you need
+const chatOptions = createChatOptions({
+  adapter: openaiText('gpt-5.5'),
+})
+```
+
+## Bundle Size Benefits
+
+The functional, modular design provides significant bundle size benefits:
+
+### Importing Everything (Less Efficient)
+
+```ts
+// ❌ Importing more than needed
+import * as ai from '@tanstack/ai'
+import * as openai from '@tanstack/ai-openai'
+
+// This bundles all exports from both packages
+```
+
+### Importing Only What You Need (Recommended)
+
+```ts
+// ✅ Only what you use gets bundled
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// You only get:
+// - Chat activity implementation
+// - OpenAI text adapter
+// - Chat-specific dependencies
+```
+
+### Real-World Impact
+
+For a typical chat application, importing a single activity and one adapter pulls in substantially less code than bundling every activity and every provider adapter. Because each activity and adapter lives in its own side-effect-free module, your bundler drops everything you don't reference — so the more providers and activities the library supports, the larger the difference between a focused import and a namespace import.
+
+## How It Works
+
+The tree-shakeability is achieved through:
+
+1. **ES Module exports** - Each function is a named export, not a default export
+2. **Separate modules** - Each activity and adapter lives in its own file
+3. **No side effects** - Functions are pure and don't have module-level side effects
+4. **Functional composition** - Functions compose together, allowing dead code elimination
+5. **Type-only imports** - Type imports are stripped at build time
+
+Modern bundlers (Vite, Webpack, Rollup, esbuild) can easily eliminate unused code because:
+
+- Functions are statically analyzable
+- No dynamic imports of unused code
+- No module-level side effects
+- Clear dependency graphs
+
+## Best Practices
+
+1. **Import only what you need** - Don't import entire namespaces
+2. **Use specific adapter functions** - Import `openaiText` not `openai`
+3. **Separate activities by route** - Different API routes can use different activities
+4. **Lazy load when possible** - Use dynamic imports for code-split routes
+5. **Keep mobile chat bundles client-only** - React Native and Expo chat screens
+   should import `useChat` and chat connection adapters, not provider SDKs,
+   server response helpers, React DOM UI, devtools UI, or other framework
+   packages. See [Quick Start: React Native](/ai/getting-started/quick-start-react-native)
+   for the server-only provider boundary and mobile transport setup.
+
+```ts
+// ✅ Good - Only imports chat
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// ❌ Bad - Imports everything
+import * as ai from '@tanstack/ai'
+import * as openai from '@tanstack/ai-openai'
+```
+
+## Adapter Types
+
+Each adapter type implements a specific interface:
+
+- `ChatAdapter` - Provides `chatStream()` method for streaming chat responses
+- `SummarizeAdapter` - Provides `summarize()` method for text summarization
+- `ImageAdapter` - Provides `generateImage()` method for image generation
+- `TTSAdapter` - Provides `generateSpeech()` method for text-to-speech
+- `TranscriptionAdapter` - Provides `generateTranscription()` method for audio transcription
+- `VideoAdapter` - Provides `generateVideo()` method for video generation
+
+All adapters have a `kind` property that indicates their type:
+
+```ts
+import { openaiText, openaiSummarize } from '@tanstack/ai-openai'
+
+const chatAdapter = openaiText('gpt-5.5')
+console.log(chatAdapter.kind) // 'text'
+
+const summarizeAdapter = openaiSummarize('gpt-5.4-mini')
+console.log(summarizeAdapter.kind) // 'summarize'
+```
+
+## Summary
+
+TanStack AI's tree-shakeable design means:
+
+- ✅ **Smaller bundles** - Only include code you actually use
+- ✅ **Faster load times** - Less JavaScript to download and parse
+- ✅ **Better performance** - Less code means faster execution
+- ✅ **Type safety** - Full TypeScript support without runtime overhead
+- ✅ **Flexibility** - Mix and match activities and adapters as needed
+
+The functional, modular architecture ensures that modern bundlers can eliminate unused code effectively, resulting in optimal bundle sizes for your application.
diff --git a/mintlify/ai/advanced/typed-options.md b/mintlify/ai/advanced/typed-options.md
new file mode 100644
index 000000000..b9e85fd83
--- /dev/null
+++ b/mintlify/ai/advanced/typed-options.md
@@ -0,0 +1,163 @@
+---
+title: Typed Pre-Configured Options
+id: typed-options
+order: 11
+description: "Define typed, reusable option objects for chat, summarize, image, video, audio, speech, and transcription with createChatOptions and friends — share configuration across routes without losing per-model type safety."
+keywords:
+  - tanstack ai
+  - createChatOptions
+  - createSummarizeOptions
+  - createImageOptions
+  - createSpeechOptions
+  - createTranscriptionOptions
+  - createAudioOptions
+  - createVideoOptions
+  - typed options
+  - shared configuration
+---
+
+You have a `chat()` (or `generateImage()`, `generateSpeech()`, …) configuration you want to reuse — across multiple routes, between a server function and its caller, or simply factored out of a handler for clarity. By the end of this guide, you'll have a single typed options object that infers the adapter's model, modalities, and provider options, and that you can spread into any call site without losing type safety.
+
+## The pattern
+
+Every activity in `@tanstack/ai` ships a paired `createXxxOptions` helper that takes the exact same options object as the activity itself and returns it unchanged — at runtime it's the identity function. The point is **type inference**: the returned object carries the adapter's full type, so when you spread it into the activity, TypeScript still narrows `modelOptions`, content modalities, and `outputSchema` to the adapter you chose.
+
+```typescript
+import { chat, createChatOptions } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const chatOptions = createChatOptions({
+  adapter: openaiText('gpt-5.5'),
+  // modelOptions, systemPrompts, tools — all type-checked against the
+  // adapter+model pair above. Sampling params (temperature, top_p,
+  // max_output_tokens, …) live inside modelOptions, under each provider's
+  // native key.
+  modelOptions: {
+    temperature: 0.3,
+    reasoning: { effort: 'medium' },
+  },
+})
+
+// Later, anywhere in your codebase:
+const stream = chat({ ...chatOptions, messages: [{ role: 'user', content: 'Hello' }] })
+```
+
+Without the helper you'd have to either inline the configuration at every call site, or hand-write the full chat options type with its adapter/model generics resolved manually — `createChatOptions` does that for you.
+
+## When to reach for it
+
+- **Sharing a configuration across multiple routes** — define once, spread into each handler.
+- **Passing options through a layer** (a server function, a wrapper, a test fixture) without erasing the adapter's model-specific types.
+- **Branching on a runtime value while keeping types intact** — build different options objects and choose between them, instead of weaving conditionals into a single `chat({...})` call.
+- **Co-locating tools, system prompts, and middleware** with the adapter they target.
+
+If you only call an activity once at one site, you don't need this helper. Inline the options.
+
+## Available helpers
+
+Each helper mirrors the activity it pairs with. Same options, same return type.
+
+| Helper | Activity | Adapter |
+|---|---|---|
+| `createChatOptions` | `chat()` | text adapter (e.g. `openaiText`, `anthropicText`) |
+| `createSummarizeOptions` | `summarize()` | summarize adapter (e.g. `openaiSummarize`) |
+| `createImageOptions` | `generateImage()` | image adapter (e.g. `openaiImage`, `falImage`) |
+| `createAudioOptions` | `generateAudio()` | audio adapter (e.g. `falAudio`, `geminiAudio`) |
+| `createVideoOptions` | `generateVideo()` / `getVideoJobStatus()` | video adapter (e.g. `falVideo`, `openaiVideo`) |
+| `createSpeechOptions` | `generateSpeech()` | speech adapter (e.g. `openaiSpeech`, `elevenlabsSpeech`) |
+| `createTranscriptionOptions` | `generateTranscription()` | transcription adapter (e.g. `openaiTranscription`, `falTranscription`) |
+
+All helpers are exported from `@tanstack/ai`.
+
+## Example: shared chat configuration across routes
+
+Suppose you have several routes that all hit the same model with the same provider options and tool set. Factor the configuration out once:
+
+```typescript
+// lib/ai/chat-options.ts
+import { createChatOptions, toolDefinition } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+import { db } from './db'
+
+const lookupOrderDef = toolDefinition({
+  name: 'lookupOrder',
+  description: 'Look up a customer order by ID',
+  inputSchema: z.object({ orderId: z.string() }),
+})
+
+const lookupOrder = lookupOrderDef.server(async ({ orderId }) => {
+  return db.orders.findUnique({ where: { id: orderId } })
+})
+
+export const supportChatOptions = createChatOptions({
+  adapter: openaiText('gpt-5.5'),
+  systemPrompts: ['You are a customer-support assistant for Acme Corp.'],
+  tools: [lookupOrder],
+  modelOptions: {
+    reasoning: { effort: 'medium' },
+  },
+})
+```
+
+```typescript ignore
+// routes/api/support/chat.ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { supportChatOptions } from '@/lib/ai/chat-options'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({ ...supportChatOptions, messages })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+```typescript ignore
+// routes/api/support/draft-reply.ts — same adapter+tools, different schema
+import { chat } from '@tanstack/ai'
+import { supportChatOptions } from '@/lib/ai/chat-options'
+import { z } from 'zod'
+
+export async function POST(request: Request) {
+  const { ticket } = await request.json()
+  const draft = await chat({
+    ...supportChatOptions,
+    messages: [{ role: 'user', content: `Draft a reply to: ${ticket}` }],
+    outputSchema: z.object({ subject: z.string(), body: z.string() }),
+    stream: false,
+  })
+  return Response.json(draft)
+}
+```
+
+Both routes share the adapter, system prompt, tools, and reasoning settings; each adds what it needs. Override or omit any field at the call site — the spread wins on the right.
+
+## Example: typed pre-configured image generation
+
+```typescript
+import { createImageOptions, generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+const heroImageOptions = createImageOptions({
+  adapter: openaiImage('gpt-image-1'),
+  prompt: 'A glass sphere refracting a sunset over a calm sea',
+  size: '1536x1024',
+  numberOfImages: 1,
+})
+
+const result = await generateImage(heroImageOptions)
+```
+
+The same pattern works for `createVideoOptions`, `createSpeechOptions`, `createTranscriptionOptions`, `createAudioOptions`, and `createSummarizeOptions` — the adapter is captured in the typed options object and every downstream call is narrowed to it.
+
+## What the helper does NOT do
+
+- **No runtime behavior.** `createChatOptions(opts)` is `opts`. There is no validation, freezing, cloning, or memoization. If you mutate the returned object after creation, the next call sees the mutation. Treat the result as immutable by convention.
+- **No partial typing.** The helper expects the full options shape it'll be spread into. If you need to build options up incrementally, type the intermediate state yourself (a `Partial<>` of the full chat options shape) and only call the helper at the boundary where the shape is complete.
+- **No request execution.** The helper does not call the model. Only the activity function (`chat`, `generateImage`, …) makes the request.
+
+## Related
+
+- [Per-Model Type Safety](/ai/advanced/per-model-type-safety) — how the adapter+model pair drives `modelOptions` inference.
+- [Tree-Shaking](/ai/advanced/tree-shaking) — why each adapter is exported separately, and how the typed-options pattern keeps your bundle small.
+- [Extend Adapter](/ai/advanced/extend-adapter) — when you need to add custom models to an adapter without losing the same typed-options ergonomics.
diff --git a/mintlify/ai/api/ai-angular.md b/mintlify/ai/api/ai-angular.md
new file mode 100644
index 000000000..d1f6ff1d4
--- /dev/null
+++ b/mintlify/ai/api/ai-angular.md
@@ -0,0 +1,581 @@
+---
+title: "@tanstack/ai-angular"
+id: ai-angular
+order: 6
+description: "API reference for @tanstack/ai-angular — Angular signal-based injectables including injectChat for streaming chat with full type safety."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-angular"
+  - angular
+  - signals
+  - injectChat
+  - injectables
+  - api reference
+---
+
+Angular signal-based bindings for TanStack AI, providing convenient Angular bindings for the headless client.
+
+> **Injection context requirement:** Every `inject*` function in this package calls Angular's `inject()` internally. They **must** be called within an Angular injection context — a component or directive class field initializer, the constructor, or inside `runInInjectionContext`. Calling them outside an injection context will throw a runtime error.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-angular
+```
+
+## `injectChat(options?)`
+
+Main injectable for managing chat state in Angular with full type safety.
+
+```typescript
+import { Component } from "@angular/core";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+
+@Component({
+  selector: "app-chat",
+  standalone: true,
+  template: `...`,
+})
+export class ChatComponent {
+  // injectChat is called in a field initializer — valid injection context.
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+}
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client` (minus internal state callbacks):
+
+- `connection` - Connection adapter (required, or use `fetcher`)
+- `fetcher?` - Direct async function for one-shot generation (alternative to `connection`)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field. Reactive — accepts a plain value, an Angular `Signal`, or a zero-arg getter; changes sync automatically via `effect`
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire. Reactive (same forms as `forwardedProps`)
+- `context?` - Typed client-local runtime context passed to client tool implementations. Reactive (same forms). This value is not serialized to the server
+- `live?` - Enable live subscription mode (auto-subscribes/unsubscribes). Reactive (same forms)
+- `outputSchema?` - Standard-schema-compatible schema (Zod, Valibot, ArkType, or JSON Schema). When provided, adds typed `partial` and `final` signals to the return value
+- `persistence?` - Persistence configuration
+- `devtools?` - Display options for TanStack AI Devtools
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `onCustomEvent?` - Callback for custom stream events
+- `streamProcessor?` - Stream processing configuration
+
+**Reactive options** (`body`, `forwardedProps`, `context`, `live`) accept a `ReactiveOption<T>`, which is one of:
+
+```typescript
+import type { Signal } from "@angular/core";
+
+type ReactiveOption<T> = T | Signal<T> | (() => T);
+```
+
+A plain value becomes a constant; a `Signal` is read directly; a zero-arg getter is wrapped in `computed` so any signals read inside it are tracked.
+
+**Note:** Client tools are automatically executed — no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { Signal } from "@angular/core";
+import type {
+  UIMessage,
+  MultimodalContent,
+  DeepPartial,
+} from "@tanstack/ai-angular";
+import type { ModelMessage, InferSchemaType } from "@tanstack/ai/client";
+import type { ChatClientState, ConnectionStatus } from "@tanstack/ai-client";
+type TSchema = any;
+
+interface InjectChatResult {
+  messages: Signal<UIMessage[]>;
+  sendMessage: (content: string | MultimodalContent) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  clear: () => void;
+  setMessages: (messages: UIMessage[]) => void;
+  isLoading: Signal<boolean>;
+  error: Signal<Error | undefined>;
+  status: Signal<ChatClientState>;
+  isSubscribed: Signal<boolean>;
+  connectionStatus: Signal<ConnectionStatus>;
+  sessionGenerating: Signal<boolean>;
+  // Only present when outputSchema is supplied:
+  partial: Signal<DeepPartial<InferSchemaType<TSchema>>>;
+  final: Signal<InferSchemaType<TSchema> | null>;
+}
+```
+
+**Note:** All reactive state (`messages`, `isLoading`, `error`, `status`, `isSubscribed`, `connectionStatus`, `sessionGenerating`) is exposed as read-only Angular `Signal`s. Read them by calling them as functions (e.g., `chat.messages()`, `chat.isLoading()`). Cleanup is automatic via `DestroyRef.onDestroy`.
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  xhrServerSentEvents,
+  xhrHttpStream,
+  stream,
+  rpcStream,
+  type ConnectionAdapter,
+} from "@tanstack/ai-angular";
+```
+
+## Example: Basic Chat
+
+```typescript
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+
+@Component({
+  selector: "app-chat",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <ul>
+      @for (message of chat.messages(); track message.id) {
+        <li>
+          <strong>{{ message.role }}:</strong>
+          @for (part of message.parts; track $index) {
+            @if (part.type === 'thinking') {
+              <em>Thinking: {{ part.content }}</em>
+            } @else if (part.type === 'text') {
+              <span>{{ part.content }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+    <input #input placeholder="Type a message..." />
+    <button
+      (click)="chat.sendMessage(input.value); input.value = ''"
+      [disabled]="chat.isLoading()"
+    >
+      Send
+    </button>
+    @if (chat.isLoading()) {
+      <p>Thinking...</p>
+    }
+  `,
+})
+export class ChatComponent {
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+}
+```
+
+## Example: Tool Approval
+
+```typescript
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+
+@Component({
+  selector: "app-approval-chat",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @for (message of chat.messages(); track message.id) {
+      @for (part of message.parts; track $index) {
+        @if (
+          part.type === 'tool-call' &&
+          part.state === 'approval-requested' &&
+          part.approval
+        ) {
+          <div>
+            <p>Approve: {{ part.name }}</p>
+            <button (click)="chat.addToolApprovalResponse({ id: part.approval!.id, approved: true })">
+              Approve
+            </button>
+            <button (click)="chat.addToolApprovalResponse({ id: part.approval!.id, approved: false })">
+              Deny
+            </button>
+          </div>
+        }
+      }
+    }
+  `,
+})
+export class ApprovalChatComponent {
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+}
+```
+
+## Example: Client Tools with Type Safety
+
+```typescript
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string(), type: z.string() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save a value to localStorage",
+  inputSchema: z.object({ key: z.string(), value: z.string() }),
+});
+
+@Component({
+  selector: "app-typed-chat",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @for (message of chat.messages(); track message.id) {
+      @for (part of message.parts; track $index) {
+        @if (part.type === 'tool-call' && part.name === 'updateUI') {
+          <div>Tool executed: {{ part.name }}</div>
+        }
+      }
+    }
+  `,
+})
+export class TypedChatComponent {
+  // Create client implementations
+  private updateUI = updateUIDef.client((input) => {
+    // input is fully typed!
+    return { success: true };
+  });
+
+  private saveToStorage = saveToStorageDef.client((input) => {
+    localStorage.setItem(input.key, input.value);
+    return { saved: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  private tools = clientTools(this.updateUI, this.saveToStorage);
+
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools: this.tools, // Automatic execution, full type safety
+  });
+}
+```
+
+## Example: Reactive Options with Signals
+
+```typescript
+import { Component, signal } from "@angular/core";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+
+@Component({
+  selector: "app-reactive-chat",
+  standalone: true,
+  template: `
+    <button (click)="toggleLanguage()">Toggle Language</button>
+    @for (message of chat.messages(); track message.id) {
+      <p>{{ message.role }}: {{ message.parts[0]?.content }}</p>
+    }
+  `,
+})
+export class ReactiveChatComponent {
+  language = signal("en");
+
+  // forwardedProps is reactive — the signal is read on every request
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    forwardedProps: () => ({ language: this.language() }),
+  });
+
+  toggleLanguage() {
+    this.language.set(this.language() === "en" ? "fr" : "en");
+  }
+}
+```
+
+## Example: Structured Output
+
+```typescript
+import { Component } from "@angular/core";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+import { z } from "zod";
+
+const recipeSchema = z.object({
+  title: z.string(),
+  ingredients: z.array(z.string()),
+  steps: z.array(z.string()),
+});
+
+@Component({
+  selector: "app-recipe-chat",
+  standalone: true,
+  template: `
+    <button (click)="chat.sendMessage('Give me a pasta recipe')">Ask</button>
+    @if (chat.partial().title) {
+      <h2>{{ chat.partial().title }}</h2>
+    }
+    @if (chat.final()) {
+      <ul>
+        @for (step of chat.final()!.steps; track $index) {
+          <li>{{ step }}</li>
+        }
+      </ul>
+    }
+  `,
+})
+export class RecipeChatComponent {
+  chat = injectChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    outputSchema: recipeSchema,
+  });
+}
+```
+
+## Generation Injectables
+
+Angular injectables for one-shot generation tasks (images, audio, speech, transcription, summarization, video). All share the same pattern: provide a `connection` or `fetcher`, call `generate()`, and read reactive signals.
+
+### `injectGeneration(options)`
+
+Base injectable for custom generation types. All specialized injectables below are built on this.
+
+```typescript
+import { Component } from "@angular/core";
+import { injectGeneration } from "@tanstack/ai-angular";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+@Component({ selector: "app-custom", standalone: true, template: `...` })
+export class CustomGenerationComponent {
+  gen = injectGeneration({
+    connection: fetchServerSentEvents("/api/generate/custom"),
+  });
+
+  // Call gen.generate(input), read gen.result(), gen.isLoading(), etc.
+}
+```
+
+**Options:** `connection?`, `fetcher?`, `id?`, `body?` (reactive), `devtools?`, `onResult?`, `onError?`, `onProgress?`, `onChunk?`
+
+**Returns:** `generate`, `result`, `isLoading`, `error`, `status`, `stop`, `reset` — all reactive state is a read-only `Signal<T>`.
+
+### `injectGenerateImage(options)`
+
+Image generation injectable. `generate()` accepts `ImageGenerateInput`, result is `ImageGenerationResult`.
+
+```typescript
+import { Component } from "@angular/core";
+import { injectGenerateImage } from "@tanstack/ai-angular";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+@Component({
+  selector: "app-image",
+  standalone: true,
+  template: `
+    <button (click)="gen.generate({ prompt: 'A mountain at sunset' })" [disabled]="gen.isLoading()">
+      Generate
+    </button>
+    @if (gen.result()) {
+      <img [src]="gen.result()!.images[0]!.url" alt="Generated image" />
+    }
+  `,
+})
+export class ImageComponent {
+  gen = injectGenerateImage({
+    connection: fetchServerSentEvents("/api/generate/image"),
+  });
+}
+```
+
+### `injectGenerateAudio(options)`
+
+Audio generation injectable (music, sound effects). `generate()` accepts `AudioGenerateInput`, result is `AudioGenerationResult`.
+
+```typescript
+import { Component } from "@angular/core";
+import { injectGenerateAudio } from "@tanstack/ai-angular";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+@Component({
+  selector: "app-audio",
+  standalone: true,
+  template: `
+    <button (click)="gen.generate({ prompt: 'An upbeat electronic track', duration: 10 })" [disabled]="gen.isLoading()">
+      Generate
+    </button>
+    @if (gen.result()) {
+      <audio [src]="gen.result()!.audio.url" controls></audio>
+    }
+  `,
+})
+export class AudioComponent {
+  gen = injectGenerateAudio({
+    connection: fetchServerSentEvents("/api/generate/audio"),
+  });
+}
+```
+
+### `injectGenerateSpeech(options)`
+
+Text-to-speech injectable. `generate()` accepts `SpeechGenerateInput`, result is `TTSResult`.
+
+### `injectTranscription(options)`
+
+Audio transcription injectable. `generate()` accepts `TranscriptionGenerateInput`, result is `TranscriptionResult`.
+
+### `injectSummarize(options)`
+
+Text summarization injectable. `generate()` accepts `SummarizeGenerateInput`, result is `SummarizationResult`.
+
+### `injectGenerateVideo(options)`
+
+Video generation injectable with job polling. Returns additional `jobId` and `videoStatus` signals. Accepts extra `onJobCreated?` and `onStatusUpdate?` callbacks.
+
+```typescript
+import { Component } from "@angular/core";
+import { injectGenerateVideo } from "@tanstack/ai-angular";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+@Component({
+  selector: "app-video",
+  standalone: true,
+  template: `
+    <button (click)="gen.generate({ prompt: 'A time-lapse of a sunset' })" [disabled]="gen.isLoading()">
+      Generate
+    </button>
+    @if (gen.videoStatus()) {
+      <p>Status: {{ gen.videoStatus()!.status }}</p>
+    }
+    @if (gen.result()) {
+      <video [src]="gen.result()!.url" controls></video>
+    }
+  `,
+})
+export class VideoComponent {
+  gen = injectGenerateVideo({
+    connection: fetchServerSentEvents("/api/generate/video"),
+    onJobCreated: (jobId) => console.log("Job created:", jobId),
+  });
+}
+```
+
+**Additional returns (video only):**
+- `jobId: Signal<string | null>` — The polling job ID, once the server creates it
+- `videoStatus: Signal<VideoStatusInfo | null>` — Real-time status updates from the polling loop
+
+All generation injectables automatically clean up via `DestroyRef.onDestroy`.
+
+## Injection Context
+
+Angular's DI system requires that `inject()` is called during component construction. Every `inject*` function in this package calls `inject()` internally. Valid call sites:
+
+```typescript
+import { inject, runInInjectionContext, Injector } from "@angular/core";
+import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
+
+const injector = inject(Injector);
+
+// Field initializer (recommended)
+export class MyComponent {
+  chat = injectChat({ connection: fetchServerSentEvents("/api/chat") });
+}
+
+// Constructor
+export class MyComponentAlt {
+  chat: ReturnType<typeof injectChat>;
+  constructor() {
+    this.chat = injectChat({ connection: fetchServerSentEvents("/api/chat") });
+  }
+}
+
+// Inside runInInjectionContext
+const chat = runInInjectionContext(injector, () =>
+  injectChat({ connection: fetchServerSentEvents("/api/chat") }),
+);
+```
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { fetchServerSentEvents } from "@tanstack/ai-angular";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-angular` (sourced from `@tanstack/ai-client`):
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `InjectChatOptions<TTools, TSchema, TContext>` - Chat injectable options
+- `InjectChatResult<TTools, TSchema>` - Chat injectable return type
+- `ReactiveOption<T>` - Union of `T | Signal<T> | (() => T)` for reactive option fields
+- `DeepPartial<T>` - Recursive partial; used to type the in-flight `partial` value
+- `ChatRequestBody` - Request body type
+- `MultimodalContent` - Multimodal content type for `sendMessage`
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+- `GenerationClientState` - Generation lifecycle state
+- `ImageGenerateInput` - Image generation input type
+- `AudioGenerateInput` - Audio generation input type
+- `SpeechGenerateInput` - Speech generation input type
+- `TranscriptionGenerateInput` - Transcription input type
+- `SummarizeGenerateInput` - Summarization input type
+- `VideoGenerateInput` - Video generation input type
+- `VideoGenerateResult` - Video generation result type
+- `VideoStatusInfo` - Video job status info
+
+Tool authoring types — import directly from `@tanstack/ai` (not re-exported by `@tanstack/ai-angular`):
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai-client.md b/mintlify/ai/api/ai-client.md
new file mode 100644
index 000000000..950c7d9f6
--- /dev/null
+++ b/mintlify/ai/api/ai-client.md
@@ -0,0 +1,520 @@
+---
+title: "@tanstack/ai-client"
+slug: /api/ai-client
+order: 2
+description: "API reference for @tanstack/ai-client — the framework-agnostic headless client for managing chat state and streaming transports."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-client"
+  - headless client
+  - ChatClient
+  - chat state
+  - connection adapters
+  - api reference
+---
+
+Framework-agnostic headless client for managing chat state and streaming.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-client
+```
+
+## `ChatClient`
+
+The main client class for managing chat state.
+
+```typescript
+import {
+  ChatClient,
+  clientTools,
+  fetchServerSentEvents,
+  type UIMessage,
+} from "@tanstack/ai-client";
+import { myClientTool } from "./tools";
+
+const client = new ChatClient({
+  connection: fetchServerSentEvents("/api/chat"),
+  initialMessages: [],
+  tools: clientTools(myClientTool),
+  onMessagesChange: (messages: UIMessage[]) => {
+    console.log("Messages updated:", messages);
+  },
+});
+```
+
+### Constructor Options
+
+- `connection` - Connection adapter for streaming
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works — values are merged into `forwardedProps` on the wire and mirrored under the legacy `data` field for backward compatibility
+- `context?` - Typed client-local runtime context passed to client tool implementations. This value is not serialized to the server
+- `tools?` - Registered `.client()` tool implementations. The client automatically executes matching tools when the model calls them
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `onMessagesChange?` - Callback when messages change
+- `onLoadingChange?` - Callback when loading state changes
+- `onErrorChange?` - Callback when error state changes
+- `streamProcessor?` - Stream processing configuration
+
+### Methods
+
+#### `sendMessage(content: string)`
+
+Sends a user message and gets a response.
+
+```typescript
+import { client } from "./client";
+
+await client.sendMessage("Hello!");
+```
+
+#### `append(message: ModelMessage | UIMessage)`
+
+Appends a message to the conversation.
+
+```typescript
+import { client } from "./client";
+
+await client.append({
+  role: "user",
+  content: "Additional context",
+});
+```
+
+#### `reload()`
+
+Reloads the last assistant message.
+
+```typescript
+import { client } from "./client";
+
+await client.reload();
+```
+
+#### `stop()`
+
+Stops the current response generation.
+
+```typescript
+import { client } from "./client";
+
+client.stop();
+```
+
+#### `clear()`
+
+Clears all messages.
+
+```typescript
+import { client } from "./client";
+
+client.clear();
+```
+
+#### `setMessagesManually(messages: UIMessage[])`
+
+Manually sets the messages array.
+
+```typescript
+import { client } from "./client";
+import type { UIMessage } from "@tanstack/ai-client";
+
+const newMessages: UIMessage[] = [];
+client.setMessagesManually([...newMessages]);
+```
+
+#### `addToolResult(result)`
+
+Adds the result of a client-side tool execution.
+
+```typescript
+import { client } from "./client";
+
+await client.addToolResult({
+  toolCallId: "call_123",
+  tool: "toolName",
+  output: { result: "..." },
+  state: "output-available",
+});
+```
+
+#### `addToolApprovalResponse(response)`
+
+Responds to a tool approval request.
+
+```typescript
+import { client } from "./client";
+
+await client.addToolApprovalResponse({
+  id: "approval_123",
+  approved: true,
+});
+```
+
+### Properties
+
+- `messages: UIMessage[]` - Current messages
+- `isLoading: boolean` - Whether a response is being generated
+- `error: Error | undefined` - Current error, if any
+
+## Connection Adapters
+
+For a complete transport walkthrough, see
+[Connection Adapters](/ai/chat/connection-adapters). For React Native and Expo,
+see [Quick Start: React Native](/ai/getting-started/quick-start-react-native).
+
+### `fetchServerSentEvents(url, options?)`
+
+Creates an SSE connection adapter.
+
+```typescript
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+const adapter = fetchServerSentEvents("/api/chat", {
+  headers: {
+    Authorization: "Bearer token",
+  },
+});
+```
+
+### `fetchHttpStream(url, options?)`
+
+Creates a newline-delimited JSON HTTP stream connection adapter. Pair it with
+`toHttpResponse()` on the server.
+
+```typescript
+import { fetchHttpStream } from "@tanstack/ai-client";
+
+const adapter = fetchHttpStream("/api/chat");
+```
+
+`fetchHttpStream()` requires a runtime with streaming `fetch`,
+`Response.body.getReader()`, and `TextDecoder`. If the runtime cannot expose an
+incremental response body, it throws `UnsupportedResponseStreamError`; use the
+XHR adapters in React Native or Expo.
+
+### `xhrHttpStream(url, options?)`
+
+Creates an `XMLHttpRequest`-backed newline-delimited JSON stream adapter. This
+is the recommended default for React Native and Expo chat screens. Pair it with
+`toHttpResponse()` on the server.
+
+```typescript
+import { xhrHttpStream } from "@tanstack/ai-client";
+
+const adapter = xhrHttpStream("http://192.168.1.10:8787/chat/http", {
+  headers: { Authorization: "Bearer token" },
+  withCredentials: true,
+});
+```
+
+### `xhrServerSentEvents(url, options?)`
+
+Creates an `XMLHttpRequest`-backed SSE adapter for runtimes where XHR progress
+events are more reliable than streaming `fetch`. Pair it with
+`toServerSentEventsResponse()` on the server.
+
+```typescript
+import { xhrServerSentEvents } from "@tanstack/ai-client";
+
+const adapter = xhrServerSentEvents("http://192.168.1.10:8787/chat/sse");
+```
+
+### Adapter options
+
+Fetch adapters accept:
+
+- `headers?: Record<string, string> | Headers`
+- `credentials?: RequestCredentials`
+- `signal?: AbortSignal`
+- `body?: Record<string, any>`
+- `fetchClient?: typeof globalThis.fetch`
+
+XHR adapters accept:
+
+- `headers?: Record<string, string> | Headers`
+- `withCredentials?: boolean`
+- `signal?: AbortSignal`
+- `body?: Record<string, any>`
+- `xhrFactory?: () => XMLHttpRequest`
+
+`body` is merged into the AG-UI `forwardedProps` payload. Values from
+`forwardedProps` on the client and per-message `sendMessage(..., data)` calls
+override static adapter `body` values.
+
+### Stream errors
+
+- `UnsupportedResponseStreamError` - thrown by fetch-based adapters when
+  `Response.body`, `Response.body.getReader()`, or `TextDecoder` is missing.
+- `StreamTruncatedError` - thrown when an SSE or NDJSON stream ends with
+  unterminated trailing data, usually because the server, proxy, or network cut
+  the connection mid-line.
+
+### `stream(connectFn)`
+
+Creates a custom connection adapter.
+
+```typescript ignore
+import { stream } from "@tanstack/ai-client";
+
+const adapter = stream(async (messages, data, signal) => {
+  // `data` here carries the merged forwardedProps. The fetch-based
+  // adapters serialize it as the AG-UI `RunAgentInput.forwardedProps`
+  // field on the wire (with a backward-compat `data` mirror).
+  const response = await fetch("/api/chat", {
+    method: "POST",
+    body: JSON.stringify({ messages, forwardedProps: data }),
+    signal,
+  });
+  return processStream(response);
+});
+```
+
+## Helper Functions
+
+### `clientTools(...tools)`
+
+Creates a typed array of client tools with proper type inference. This eliminates the need for `as const` when defining tool arrays and enables proper discriminated union type narrowing.
+
+```typescript
+import {
+  clientTools,
+  createChatClientOptions,
+  fetchServerSentEvents,
+  type UIMessage,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const messages: UIMessage[] = [];
+
+const myTool1 = toolDefinition({
+  name: "myTool1",
+  description: "First tool",
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.object({ result: z.string() }),
+});
+
+const myTool2 = toolDefinition({
+  name: "myTool2",
+  description: "Second tool",
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.object({ result: z.string() }),
+});
+
+// Create client implementations
+const tool1Client = myTool1.client((input) => {
+  // Implementation
+  return { result: input.query };
+});
+
+const tool2Client = myTool2.client((input) => {
+  // Implementation
+  return { result: input.query };
+});
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1Client, tool2Client);
+
+// Now when you use these tools in chat options:
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools, // Fully typed with literal tool names
+});
+
+// In your component:
+messages.forEach((message) => {
+  message.parts.forEach((part) => {
+    if (part.type === "tool-call" && part.name === "myTool1") {
+      // ✅ TypeScript knows part.name is literally "myTool1"
+      // ✅ part.input is typed from myTool1's input schema
+      // ✅ part.output is typed from myTool1's output schema
+    }
+  });
+});
+```
+
+### `createChatClientOptions(options)`
+
+Helper function to create typed chat client options with proper type inference.
+
+```typescript
+import {
+  createChatClientOptions,
+  clientTools,
+  fetchServerSentEvents,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { tool1, tool2 } from "./tools";
+
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+// Use InferChatMessages to extract message types
+type ChatMessages = InferChatMessages<typeof chatOptions>;
+```
+
+`createChatClientOptions` also preserves typed client runtime context:
+
+```typescript
+import {
+  createChatClientOptions,
+  clientTools,
+  fetchServerSentEvents,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+type ClientContext = {
+  activeProjectId: string;
+};
+
+const projectTool = toolDefinition({
+  name: "projectAction",
+  description: "Run a project action",
+  inputSchema: z.object({ action: z.string() }),
+  outputSchema: z.object({ ok: z.boolean() }),
+});
+
+const tool = projectTool.client<ClientContext>((input, ctx: { context: ClientContext }) => {
+  console.log(ctx.context.activeProjectId, input.action);
+  return { ok: true };
+});
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(tool),
+  context: {
+    activeProjectId: "project_123",
+  },
+});
+```
+
+Client runtime context is local to the client instance. Use `forwardedProps` for explicit client-to-server handoff of serializable values, then validate and map those values into server `chat({ context })`.
+
+## Types
+
+### `UIMessage`
+
+```typescript ignore
+interface UIMessage {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+  createdAt?: Date;
+}
+```
+
+### `MessagePart`
+
+```typescript ignore
+type MessagePart = TextPart | ThinkingPart | ToolCallPart | ToolResultPart;
+```
+
+### `TextPart`
+
+```typescript
+interface TextPart {
+  type: "text";
+  content: string;
+}
+```
+
+### `ThinkingPart`
+
+```typescript
+interface ThinkingPart {
+  type: "thinking";
+  content: string;
+}
+```
+
+Thinking parts represent the model's internal reasoning process. They are typically displayed in a collapsible format and automatically collapse when the response text appears. Thinking parts are UI-only and are not sent back to the model in subsequent requests.
+
+**Note:** Thinking parts are only available when using models that support reasoning/thinking (e.g., Anthropic Claude with thinking enabled, OpenAI GPT-5 with reasoning enabled).
+
+### `ToolCallPart`
+
+```typescript ignore
+interface ToolCallPart {
+  type: "tool-call";
+  id: string;
+  name: string;
+  arguments: string; // JSON string (may be incomplete during streaming)
+  input?: any; // Parsed tool input (typed from tool's inputSchema)
+  state: ToolCallState;
+  approval?: ApprovalRequest;
+  output?: any; // Tool execution output (typed from tool's outputSchema)
+}
+```
+
+When using typed tools with `clientTools()` and `createChatClientOptions()`, the `input` and `output` fields are automatically typed based on your tool's Zod schemas, and `name` becomes a discriminated union enabling type narrowing.
+
+### `ToolResultPart`
+
+```typescript ignore
+interface ToolResultPart {
+  type: "tool-result";
+  toolCallId: string;
+  content: string;
+  state: ToolResultState;
+  error?: string;
+}
+```
+
+### `ToolCallState`
+
+```typescript ignore
+type ToolCallState =
+  | "awaiting-input"
+  | "input-streaming"
+  | "input-complete"
+  | "approval-requested"
+  | "approval-responded"
+  | "complete";
+```
+
+### `ToolResultState`
+
+```typescript ignore
+type ToolResultState =
+  | "streaming"
+  | "complete"
+  | "error";
+```
+
+## Stream Processing
+
+Configure stream processing with chunk strategies:
+
+```typescript
+import {
+  ChatClient,
+  ImmediateStrategy,
+  fetchServerSentEvents,
+} from "@tanstack/ai-client";
+
+const client = new ChatClient({
+  connection: fetchServerSentEvents("/api/chat"),
+  streamProcessor: {
+    chunkStrategy: new ImmediateStrategy(), // Emit every chunk
+  },
+});
+```
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Connection Adapters](/ai/chat/connection-adapters) - Learn about adapters
+- [@tanstack/ai-react API](/ai/api/ai-react) - React hooks wrapper
diff --git a/mintlify/ai/api/ai-preact.md b/mintlify/ai/api/ai-preact.md
new file mode 100644
index 000000000..062d40b4f
--- /dev/null
+++ b/mintlify/ai/api/ai-preact.md
@@ -0,0 +1,357 @@
+---
+title: "@tanstack/ai-preact"
+slug: /api/ai-preact
+order: 5
+description: "API reference for @tanstack/ai-preact — Preact hooks including useChat for streaming chat with full type safety in Preact apps."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-preact"
+  - preact
+  - useChat
+  - preact hooks
+  - api reference
+---
+
+Preact hooks for TanStack AI, providing convenient Preact bindings for the headless client.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-preact
+```
+
+## `useChat(options?)`
+
+Main hook for managing chat state in Preact with full type safety.
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { useState } from "preact/hooks";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string() }),
+});
+
+function ChatComponent() {
+  const [, setNotification] = useState<string | null>(null);
+  // Create client tool implementations
+  const updateUI = updateUIDef.client((input) => {
+    setNotification(input.message);
+    return { success: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI);
+
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools,
+  });
+
+  // Fully typed messages!
+  type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+  const { messages, sendMessage, isLoading, error, addToolApprovalResponse } =
+    useChat(chatOptions);
+
+  return <div>{/* Chat UI with typed messages */}</div>;
+}
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client`:
+
+- `connection` - Connection adapter (required)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field (e.g., `{ provider: 'openai', model: 'gpt-4o' }`)
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire
+- `context?` - Typed client-local runtime context passed to client tool implementations. This value is not serialized to the server
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `streamProcessor?` - Stream processing configuration
+
+**Note:** Client tools are now automatically executed - no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { UIMessage } from "@tanstack/ai-preact";
+import type { ModelMessage } from "@tanstack/ai/client";
+
+interface UseChatReturn {
+  messages: UIMessage[];
+  sendMessage: (content: string) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  isLoading: boolean;
+  error: Error | undefined;
+  setMessages: (messages: UIMessage[]) => void;
+  clear: () => void;
+}
+```
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  stream,
+  type ConnectionAdapter,
+} from "@tanstack/ai-preact";
+```
+
+## Example: Basic Chat
+
+```tsx
+import { useState } from "preact/hooks";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
+
+export function Chat() {
+  const [input, setInput] = useState("");
+
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (input.trim() && !isLoading) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        {messages.map((message) => (
+          <div key={message.id}>
+            <strong>{message.role}:</strong>
+            {message.parts.map((part, idx) => {
+              if (part.type === "thinking") {
+                return (
+                  <div key={idx} class="text-sm text-gray-500 italic">
+                    💭 Thinking: {part.content}
+                  </div>
+                );
+              }
+              if (part.type === "text") {
+                return <span key={idx}>{part.content}</span>;
+              }
+              return null;
+            })}
+          </div>
+        ))}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onInput={(e) => setInput(e.currentTarget.value)}
+          disabled={isLoading}
+        />
+        <button type="submit" disabled={isLoading}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+```
+
+## Example: Tool Approval
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
+
+export function ChatWithApproval() {
+  const { messages, sendMessage, addToolApprovalResponse } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  return (
+    <div>
+      {messages.map((message) =>
+        message.parts.map((part) => {
+          if (
+            part.type === "tool-call" &&
+            part.state === "approval-requested" &&
+            part.approval
+          ) {
+            return (
+              <div key={part.id}>
+                <p>Approve: {part.name}</p>
+                <button
+                  onClick={() =>
+                    addToolApprovalResponse({
+                      id: part.approval!.id,
+                      approved: true,
+                    })
+                  }
+                >
+                  Approve
+                </button>
+                <button
+                  onClick={() =>
+                    addToolApprovalResponse({
+                      id: part.approval!.id,
+                      approved: false,
+                    })
+                  }
+                >
+                  Deny
+                </button>
+              </div>
+            );
+          }
+          return null;
+        })
+      )}
+    </div>
+  );
+}
+```
+
+## Example: Client Tools with Type Safety
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { useState } from "preact/hooks";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string(), type: z.string() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save a value to localStorage",
+  inputSchema: z.object({ key: z.string(), value: z.string() }),
+});
+
+export function ChatWithClientTools() {
+  const [notification, setNotification] = useState<{ message: string; type: string } | null>(null);
+
+  // Create client implementations
+  const updateUI = updateUIDef.client((input) => {
+    // ✅ input is fully typed!
+    setNotification({ message: input.message, type: input.type });
+    return { success: true };
+  });
+
+  const saveToStorage = saveToStorageDef.client((input) => {
+    localStorage.setItem(input.key, input.value);
+    return { saved: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI, saveToStorage);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools, // ✅ Automatic execution, full type safety
+  });
+
+  return (
+    <div>
+      {messages.map((message) =>
+        message.parts.map((part) => {
+          if (part.type === "tool-call" && part.name === "updateUI") {
+            // ✅ part.input and part.output are fully typed!
+            return <div>Tool executed: {part.name}</div>;
+          }
+          return null;
+        })
+      )}
+    </div>
+  );
+}
+```
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { fetchServerSentEvents } from "@tanstack/ai-preact";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-client`:
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `MessagePart<TTools>` - Message part with tool type parameter
+- `TextPart` - Text content part
+- `ThinkingPart` - Thinking content part
+- `ToolCallPart<TTools>` - Tool call part (discriminated union)
+- `ToolResultPart` - Tool result part
+- `ChatClientOptions<TTools, TContext>` - Chat client options with typed client runtime context
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+
+Re-exported from `@tanstack/ai`:
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai-react.md b/mintlify/ai/api/ai-react.md
new file mode 100644
index 000000000..a095e4ae3
--- /dev/null
+++ b/mintlify/ai/api/ai-react.md
@@ -0,0 +1,394 @@
+---
+title: "@tanstack/ai-react"
+slug: /api/ai-react
+order: 3
+description: "API reference for @tanstack/ai-react — React hooks including useChat for streaming chat with full type safety in React apps."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-react"
+  - react
+  - useChat
+  - react hooks
+  - api reference
+---
+
+React hooks for TanStack AI, providing convenient React bindings for the headless client.
+For React Native, the documented support surface is narrow: `useChat` with chat
+connection adapters. React DOM-specific UI packages and TanStack AI devtools UI
+are not part of the React Native support surface.
+
+For a complete native journey, see
+[Quick Start: React Native](/ai/getting-started/quick-start-react-native).
+
+## Installation
+
+```bash
+npm install @tanstack/ai-react
+```
+
+## `useChat(options?)`
+
+Main hook for managing chat state in React with full type safety.
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { useState } from "react";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Update the UI with a notification",
+  inputSchema: z.object({
+    message: z.string(),
+  }),
+  outputSchema: z.object({ success: z.boolean() }),
+});
+
+function ChatComponent() {
+  const [notification, setNotification] = useState<string | null>(null);
+
+  // Create client tool implementations
+  const updateUI = updateUIDef.client((input) => {
+    setNotification(input.message);
+    return { success: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI);
+
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools,
+  });
+
+  // Fully typed messages!
+  type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+  const { messages, sendMessage, isLoading, error, addToolApprovalResponse } =
+    useChat(chatOptions);
+
+  return <div>{/* Chat UI with typed messages */}</div>;
+}
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client`:
+
+- `connection` - Connection adapter (required)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field (e.g., `{ provider: 'openai', model: 'gpt-4o' }`)
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire
+- `context?` - Typed client-local runtime context passed to client tool implementations. This value is not serialized to the server
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `streamProcessor?` - Stream processing configuration
+
+**Note:** Client tools are now automatically executed - no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { UIMessage } from "@tanstack/ai-react";
+import type { ModelMessage } from "@tanstack/ai";
+
+interface UseChatReturn {
+  messages: UIMessage[];
+  sendMessage: (content: string) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  isLoading: boolean;
+  error: Error | undefined;
+  setMessages: (messages: UIMessage[]) => void;
+  clear: () => void;
+}
+```
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  xhrServerSentEvents,
+  xhrHttpStream,
+  stream,
+  type ConnectionAdapter,
+  type FetchConnectionOptions,
+  type XhrConnectionOptions,
+} from "@tanstack/ai-react";
+```
+
+For React Native or Expo chat screens, use an absolute server URL and prefer
+`xhrHttpStream()` with a server route that returns `toHttpResponse()`. Use
+`xhrServerSentEvents()` with `toServerSentEventsResponse()` when you want SSE.
+Use `fetchHttpStream()` only when the runtime supports streaming `fetch`,
+`Response.body.getReader()`, and `TextDecoder`; otherwise it throws
+`UnsupportedResponseStreamError`.
+
+XHR adapter options include `headers`, `withCredentials`, `signal`, `body`, and
+`xhrFactory`. Fetch adapter options include `headers`, `credentials`, `signal`,
+`body`, and `fetchClient`. Both option objects may be provided directly or as a
+function that resolves per request.
+
+For error narrowing, import `UnsupportedResponseStreamError` and
+`StreamTruncatedError` from `@tanstack/ai-client`.
+
+## Example: Basic Chat
+
+```tsx
+import { useState } from "react";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+export function Chat() {
+  const [input, setInput] = useState("");
+
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim() && !isLoading) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        {messages.map((message) => (
+          <div key={message.id}>
+            <strong>{message.role}:</strong>
+            {message.parts.map((part, idx) => {
+              if (part.type === "thinking") {
+                return (
+                  <div key={idx} className="text-sm text-gray-500 italic">
+                    💭 Thinking: {part.content}
+                  </div>
+                );
+              }
+              if (part.type === "text") {
+                return <span key={idx}>{part.content}</span>;
+              }
+              return null;
+            })}
+          </div>
+        ))}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          disabled={isLoading}
+        />
+        <button type="submit" disabled={isLoading}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+```
+
+## Example: Tool Approval
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+export function ChatWithApproval() {
+  const { messages, sendMessage, addToolApprovalResponse } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  return (
+    <div>
+      {messages.map((message) =>
+        message.parts.map((part) => {
+          if (
+            part.type === "tool-call" &&
+            part.state === "approval-requested" &&
+            part.approval
+          ) {
+            return (
+              <div key={part.id}>
+                <p>Approve: {part.name}</p>
+                <button
+                  onClick={() =>
+                    addToolApprovalResponse({
+                      id: part.approval!.id,
+                      approved: true,
+                    })
+                  }
+                >
+                  Approve
+                </button>
+                <button
+                  onClick={() =>
+                    addToolApprovalResponse({
+                      id: part.approval!.id,
+                      approved: false,
+                    })
+                  }
+                >
+                  Deny
+                </button>
+              </div>
+            );
+          }
+          return null;
+        })
+      )}
+    </div>
+  );
+}
+```
+
+## Example: Client Tools with Type Safety
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { useState } from "react";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Update the UI with a notification",
+  inputSchema: z.object({
+    message: z.string(),
+    type: z.string(),
+  }),
+  outputSchema: z.object({ success: z.boolean() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save a value to storage",
+  inputSchema: z.object({
+    key: z.string(),
+    value: z.string(),
+  }),
+  outputSchema: z.object({ saved: z.boolean() }),
+});
+
+export function ChatWithClientTools() {
+  const [notification, setNotification] = useState<{ message: string; type: string } | null>(null);
+
+  // Create client implementations
+  const updateUI = updateUIDef.client((input) => {
+    // ✅ input is fully typed!
+    setNotification({ message: input.message, type: input.type });
+    return { success: true };
+  });
+
+  const saveToStorage = saveToStorageDef.client((input) => {
+    localStorage.setItem(input.key, input.value);
+    return { saved: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI, saveToStorage);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools, // ✅ Automatic execution, full type safety
+  });
+
+  return (
+    <div>
+      {messages.map((message) =>
+        message.parts.map((part) => {
+          if (part.type === "tool-call" && part.name === "updateUI") {
+            // ✅ part.input and part.output are fully typed!
+            return <div key={part.id}>Tool executed: {part.name}</div>;
+          }
+          return null;
+        })
+      )}
+    </div>
+  );
+}
+```
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  fetchServerSentEvents,
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-client`:
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `MessagePart<TTools>` - Message part with tool type parameter
+- `TextPart` - Text content part
+- `ThinkingPart` - Thinking content part
+- `ToolCallPart<TTools>` - Tool call part (discriminated union)
+- `ToolResultPart` - Tool result part
+- `ChatClientOptions<TTools, TContext>` - Chat client options with typed client runtime context
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+
+Re-exported from `@tanstack/ai`:
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai-solid.md b/mintlify/ai/api/ai-solid.md
new file mode 100644
index 000000000..251c4448e
--- /dev/null
+++ b/mintlify/ai/api/ai-solid.md
@@ -0,0 +1,375 @@
+---
+title: "@tanstack/ai-solid"
+slug: /api/ai-solid
+order: 4
+description: "API reference for @tanstack/ai-solid — SolidJS primitives including useChat for streaming chat with full type safety."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-solid"
+  - solidjs
+  - solid
+  - useChat
+  - solid primitives
+  - api reference
+---
+
+SolidJS primitives for TanStack AI, providing convenient SolidJS bindings for the headless client.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-solid
+```
+
+## `useChat(options?)`
+
+Main primitive for managing chat state in SolidJS with full type safety.
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { createSignal } from "solid-js";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string() }),
+});
+
+function ChatComponent() {
+  const [, setNotification] = createSignal<string | null>(null);
+  // Create client tool implementations
+  const updateUI = updateUIDef.client((input) => {
+    setNotification(input.message);
+    return { success: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI);
+
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools,
+  });
+
+  // Fully typed messages!
+  type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+  const { messages, sendMessage, isLoading, error, addToolApprovalResponse } =
+    useChat(chatOptions);
+
+  return <div>{/* Chat UI with typed messages */}</div>;
+}
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client`:
+
+- `connection` - Connection adapter (required)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field (e.g., `{ provider: 'openai', model: 'gpt-4o' }`)
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire
+- `context?` - Typed client-local runtime context passed to client tool implementations. This value is not serialized to the server
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `streamProcessor?` - Stream processing configuration
+
+**Note:** Client tools are now automatically executed - no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { Accessor } from "solid-js";
+import type { UIMessage } from "@tanstack/ai-solid";
+import type { ModelMessage } from "@tanstack/ai/client";
+
+interface UseChatReturn {
+  messages: Accessor<UIMessage[]>;
+  sendMessage: (content: string) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  isLoading: Accessor<boolean>;
+  error: Accessor<Error | undefined>;
+  setMessages: (messages: UIMessage[]) => void;
+  clear: () => void;
+}
+```
+
+**Note:** Unlike React, `messages`, `isLoading`, and `error` are SolidJS `Accessor` functions, so you need to call them to get their values (e.g., `messages()` instead of just `messages`).
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  stream,
+  type ConnectionAdapter,
+} from "@tanstack/ai-solid";
+```
+
+## Example: Basic Chat
+
+```tsx
+import { createSignal, For } from "solid-js";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
+
+export function Chat() {
+  const [input, setInput] = createSignal("");
+
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (input().trim() && !isLoading()) {
+      sendMessage(input());
+      setInput("");
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <For each={messages()}>
+          {(message) => (
+            <div>
+              <strong>{message.role}:</strong>
+              <For each={message.parts}>
+                {(part) => {
+                  if (part.type === "thinking") {
+                    return (
+                      <div class="text-sm text-gray-500 italic">
+                        💭 Thinking: {part.content}
+                      </div>
+                    );
+                  }
+                  if (part.type === "text") {
+                    return <span>{part.content}</span>;
+                  }
+                  return null;
+                }}
+              </For>
+            </div>
+          )}
+        </For>
+      </div>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input()}
+          onInput={(e) => setInput(e.currentTarget.value)}
+          disabled={isLoading()}
+        />
+        <button type="submit" disabled={isLoading()}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+```
+
+## Example: Tool Approval
+
+```tsx
+import { For, Show } from "solid-js";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
+
+export function ChatWithApproval() {
+  const { messages, sendMessage, addToolApprovalResponse } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  return (
+    <div>
+      <For each={messages()}>
+        {(message) => (
+          <For each={message.parts}>
+            {(part) => {
+              if (
+                part.type === "tool-call" &&
+                part.state === "approval-requested" &&
+                part.approval
+              ) {
+                return (
+                  <div>
+                    <p>Approve: {part.name}</p>
+                    <button
+                      onClick={() =>
+                        addToolApprovalResponse({
+                          id: part.approval!.id,
+                          approved: true,
+                        })
+                      }
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() =>
+                        addToolApprovalResponse({
+                          id: part.approval!.id,
+                          approved: false,
+                        })
+                      }
+                    >
+                      Deny
+                    </button>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          </For>
+        )}
+      </For>
+    </div>
+  );
+}
+```
+
+## Example: Client Tools with Type Safety
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { createSignal, For } from "solid-js";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string(), type: z.string() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save a value to localStorage",
+  inputSchema: z.object({ key: z.string(), value: z.string() }),
+});
+
+export function ChatWithClientTools() {
+  const [notification, setNotification] = createSignal<{ message: string; type: string } | null>(null);
+
+  // Create client implementations
+  const updateUI = updateUIDef.client((input) => {
+    // ✅ input is fully typed!
+    setNotification({ message: input.message, type: input.type });
+    return { success: true };
+  });
+
+  const saveToStorage = saveToStorageDef.client((input) => {
+    localStorage.setItem(input.key, input.value);
+    return { saved: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI, saveToStorage);
+
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools, // ✅ Automatic execution, full type safety
+  });
+
+  return (
+    <div>
+      <For each={messages()}>
+        {(message) => (
+          <For each={message.parts}>
+            {(part) => {
+              if (part.type === "tool-call" && part.name === "updateUI") {
+                // ✅ part.input and part.output are fully typed!
+                return <div>Tool executed: {part.name}</div>;
+              }
+              return null;
+            }}
+          </For>
+        )}
+      </For>
+    </div>
+  );
+}
+```
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { fetchServerSentEvents } from "@tanstack/ai-solid";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-client`:
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `MessagePart<TTools>` - Message part with tool type parameter
+- `TextPart` - Text content part
+- `ThinkingPart` - Thinking content part
+- `ToolCallPart<TTools>` - Tool call part (discriminated union)
+- `ToolResultPart` - Tool result part
+- `ChatClientOptions<TTools, TContext>` - Chat client options with typed client runtime context
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+- `ChatRequestBody` - Request body type
+
+Re-exported from `@tanstack/ai`:
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai-svelte.md b/mintlify/ai/api/ai-svelte.md
new file mode 100644
index 000000000..ab5cd145b
--- /dev/null
+++ b/mintlify/ai/api/ai-svelte.md
@@ -0,0 +1,386 @@
+---
+title: "@tanstack/ai-svelte"
+id: ai-svelte
+order: 6
+description: "API reference for @tanstack/ai-svelte — Svelte 5 reactive factory functions for streaming chat built on runes."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-svelte"
+  - svelte
+  - svelte 5
+  - createChat
+  - runes
+  - api reference
+---
+
+Svelte 5 bindings for TanStack AI, providing reactive factory functions for the headless client using Svelte runes.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-svelte
+```
+
+## `createChat(options)`
+
+Factory function for managing chat state in Svelte 5 with full type safety.
+
+```typescript
+import { createChat, fetchServerSentEvents } from "@tanstack/ai-svelte";
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Update the UI with a notification",
+  inputSchema: z.object({
+    message: z.string(),
+  }),
+  outputSchema: z.object({ success: z.boolean() }),
+});
+
+// In <script> block
+let notification = "";
+
+const updateUI = updateUIDef.client((input) => {
+  notification = input.message;
+  return { success: true };
+});
+
+const tools = clientTools(updateUI);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+// Fully typed messages!
+type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+const chat = createChat(chatOptions);
+// Access: chat.messages, chat.sendMessage, chat.isLoading, chat.error
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client` (minus internal state callbacks):
+
+- `connection` - Connection adapter (required)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field (e.g., `{ provider: 'openai', model: 'gpt-4o' }`)
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire
+- `context?` - Typed client-local runtime context passed to client tool implementations. This value is not serialized to the server
+- `live?` - Enable live subscription mode (subscribes on creation)
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `onCustomEvent?` - Callback for custom stream events
+- `streamProcessor?` - Stream processing configuration
+
+**Note:** Client tools are now automatically executed - no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { UIMessage, MultimodalContent, ChatClientState, ConnectionStatus } from "@tanstack/ai-client";
+import type { ModelMessage } from "@tanstack/ai";
+
+interface CreateChatReturn<TContext = unknown> {
+  readonly messages: UIMessage[];
+  sendMessage: (content: string | MultimodalContent) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  readonly isLoading: boolean;
+  readonly error: Error | undefined;
+  readonly status: ChatClientState;
+  readonly isSubscribed: boolean;
+  readonly connectionStatus: ConnectionStatus;
+  readonly sessionGenerating: boolean;
+  setMessages: (messages: UIMessage[]) => void;
+  clear: () => void;
+  /** @deprecated Use `updateForwardedProps` instead. */
+  updateBody: (body: Record<string, any>) => void;
+  updateForwardedProps: (forwardedProps: Record<string, any>) => void;
+  updateContext: (context: TContext) => void;
+}
+```
+
+**Key differences from React/Vue:**
+
+- **`create*` naming** -- factory functions, not hooks. Call outside of any lifecycle.
+- **Reactive getters** -- state properties (`messages`, `isLoading`, `error`, `status`, `isSubscribed`, `connectionStatus`, `sessionGenerating`) are Svelte 5 `$state` via getters. Access directly (e.g., `chat.messages`, not `chat.messages.value`).
+- **No automatic cleanup** -- unlike React/Vue/Solid, `createChat` does not auto-dispose. Call `chat.stop()` manually when the component unmounts (e.g., in `onDestroy` or an `$effect` return).
+- **`updateForwardedProps()`** -- update AG-UI `forwardedProps` dynamically (e.g., for model selection). In Vue, changes to the `forwardedProps` option are synced via `watch`; in Svelte, call this method explicitly. The legacy `updateBody()` is still available but deprecated.
+- **`.svelte.ts` files** -- source files use the `.svelte.ts` extension for Svelte 5 rune support.
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  stream,
+  type ConnectionAdapter,
+} from "@tanstack/ai-svelte";
+```
+
+## Example: Basic Chat
+
+```svelte
+<script lang="ts">
+  import { createChat, fetchServerSentEvents } from "@tanstack/ai-svelte";
+
+  let input = $state("");
+
+  const chat = createChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (input.trim() && !chat.isLoading) {
+      chat.sendMessage(input);
+      input = "";
+    }
+  };
+</script>
+
+<div>
+  <div>
+    {#each chat.messages as message (message.id)}
+      <div>
+        <strong>{message.role}:</strong>
+        {#each message.parts as part, idx}
+          {#if part.type === "thinking"}
+            <div class="text-sm text-gray-500 italic">
+              Thinking: {part.content}
+            </div>
+          {:else if part.type === "text"}
+            <span>{part.content}</span>
+          {/if}
+        {/each}
+      </div>
+    {/each}
+  </div>
+  <form onsubmit={handleSubmit}>
+    <input bind:value={input} disabled={chat.isLoading} />
+    <button type="submit" disabled={chat.isLoading}>Send</button>
+  </form>
+</div>
+```
+
+## Example: Tool Approval
+
+```svelte
+<script lang="ts">
+  import { createChat, fetchServerSentEvents } from "@tanstack/ai-svelte";
+
+  const chat = createChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+</script>
+
+<div>
+  {#each chat.messages as message (message.id)}
+    {#each message.parts as part}
+      {#if part.type === "tool-call" && part.state === "approval-requested" && part.approval}
+        <div>
+          <p>Approve: {part.name}</p>
+          <button
+            onclick={() =>
+              chat.addToolApprovalResponse({
+                id: part.approval.id,
+                approved: true,
+              })}
+          >
+            Approve
+          </button>
+          <button
+            onclick={() =>
+              chat.addToolApprovalResponse({
+                id: part.approval.id,
+                approved: false,
+              })}
+          >
+            Deny
+          </button>
+        </div>
+      {/if}
+    {/each}
+  {/each}
+</div>
+```
+
+## Example: Client Tools with Type Safety
+
+```svelte
+<script lang="ts">
+  import { createChat, fetchServerSentEvents } from "@tanstack/ai-svelte";
+  import {
+    clientTools,
+    createChatClientOptions,
+    type InferChatMessages,
+  } from "@tanstack/ai-client";
+  import { updateUIDef, saveToStorageDef } from "./tool-definitions";
+
+  let notification = $state(null);
+
+  // Create client implementations
+  const updateUI = updateUIDef.client((input) => {
+    // input is fully typed!
+    notification = { message: input.message, type: input.type };
+    return { success: true };
+  });
+
+  const saveToStorage = saveToStorageDef.client((input) => {
+    localStorage.setItem(input.key, input.value);
+    return { saved: true };
+  });
+
+  // Create typed tools array (no 'as const' needed!)
+  const tools = clientTools(updateUI, saveToStorage);
+
+  const chat = createChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    tools, // Automatic execution, full type safety
+  });
+</script>
+
+<div>
+  {#each chat.messages as message (message.id)}
+    {#each message.parts as part}
+      {#if part.type === "tool-call" && part.name === "updateUI"}
+        <div>Tool executed: {part.name}</div>
+      {/if}
+    {/each}
+  {/each}
+</div>
+```
+
+## Generation Functions
+
+Factory functions for one-shot generation tasks (images, speech, transcription, summarization, video). All share the same pattern: provide a `connection` or `fetcher`, call `generate()`, and read reactive state.
+
+### `createGeneration(options)`
+
+Base factory for custom generation types. All specialized functions below are built on this.
+
+```typescript
+import { createGeneration, fetchServerSentEvents } from "@tanstack/ai-svelte";
+
+const gen = createGeneration({
+  connection: fetchServerSentEvents("/api/generate/custom"),
+});
+
+// gen.generate({ prompt: 'Hello' })
+// gen.result, gen.isLoading, gen.error, gen.status
+```
+
+**Options:** `connection?`, `fetcher?`, `id?`, `body?`, `onResult?`, `onError?`, `onProgress?`, `onChunk?`
+
+**Returns:** `generate`, `result`, `isLoading`, `error`, `status`, `stop`, `reset`, `updateBody` -- all state properties are reactive getters.
+
+### `createGenerateImage(options)`
+
+Image generation factory. `generate()` accepts `ImageGenerateInput`, result is `ImageGenerationResult`.
+
+### `createGenerateSpeech(options)`
+
+Text-to-speech factory. `generate()` accepts `SpeechGenerateInput`, result is `TTSResult`.
+
+### `createTranscription(options)`
+
+Audio transcription factory. `generate()` accepts `TranscriptionGenerateInput`, result is `TranscriptionResult`.
+
+### `createSummarize(options)`
+
+Text summarization factory. `generate()` accepts `SummarizeGenerateInput`, result is `SummarizationResult`.
+
+### `createGenerateVideo(options)`
+
+Video generation factory with job polling. Returns additional `jobId` and `videoStatus` reactive getters. Accepts extra `onJobCreated?` and `onStatusUpdate?` callbacks.
+
+No generation function includes automatic cleanup. Call `.stop()` manually when done.
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import {
+  clientTools,
+  createChatClientOptions,
+  fetchServerSentEvents,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-client`:
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `MessagePart<TTools>` - Message part with tool type parameter
+- `TextPart` - Text content part
+- `ThinkingPart` - Thinking content part
+- `ToolCallPart<TTools>` - Tool call part (discriminated union)
+- `ToolResultPart` - Tool result part
+- `ChatClientOptions<TTools, TContext>` - Chat client options with typed client runtime context
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+- `ChatRequestBody` - Request body type
+- `GenerationClientState` - Generation lifecycle state
+- `ImageGenerateInput` - Image generation input type
+- `SpeechGenerateInput` - Speech generation input type
+- `TranscriptionGenerateInput` - Transcription input type
+- `SummarizeGenerateInput` - Summarization input type
+- `VideoGenerateInput` - Video generation input type
+- `VideoGenerateResult` - Video generation result type
+- `VideoStatusInfo` - Video job status info
+
+Re-exported from `@tanstack/ai`:
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai-vue.md b/mintlify/ai/api/ai-vue.md
new file mode 100644
index 000000000..68a3a72c2
--- /dev/null
+++ b/mintlify/ai/api/ai-vue.md
@@ -0,0 +1,403 @@
+---
+title: "@tanstack/ai-vue"
+id: ai-vue
+order: 5
+description: "API reference for @tanstack/ai-vue — Vue 3 composables including useChat for streaming chat with full type safety."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai-vue"
+  - vue
+  - vue 3
+  - useChat
+  - composables
+  - api reference
+---
+
+Vue composables for TanStack AI, providing convenient Vue 3 bindings for the headless client.
+
+## Installation
+
+```bash
+npm install @tanstack/ai-vue
+```
+
+## `useChat(options?)`
+
+Main composable for managing chat state in Vue with full type safety.
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-vue";
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { ref } from "vue";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string() }),
+});
+
+const notification = ref<string | null>(null);
+
+// In <script setup>
+const updateUI = updateUIDef.client((input) => {
+  notification.value = input.message;
+  return { success: true };
+});
+
+const tools = clientTools(updateUI);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+// Fully typed messages!
+type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+const { messages, sendMessage, isLoading, error, addToolApprovalResponse } =
+  useChat(chatOptions);
+```
+
+### Options
+
+Extends `ChatClientOptions` from `@tanstack/ai-client` (minus internal state callbacks):
+
+- `connection` - Connection adapter (required)
+- `tools?` - Array of client tool implementations (with `.client()` method)
+- `initialMessages?` - Initial messages array
+- `id?` - Unique identifier for this chat instance
+- `threadId?` - Thread ID for AG-UI run correlation. Persists across sends; auto-generated if omitted
+- `forwardedProps?` - Arbitrary client-controlled JSON forwarded to the server in the AG-UI `RunAgentInput.forwardedProps` field (reactive -- changes are synced automatically via `watch`)
+- `body?` - **Deprecated.** Use `forwardedProps` instead. Still works for backward compatibility; values are merged into `forwardedProps` on the wire (reactive)
+- `context?` - Typed client-local runtime context passed to client tool implementations (reactive). This value is not serialized to the server
+- `live?` - Enable live subscription mode (auto-subscribes/unsubscribes)
+- `onResponse?` - Callback when response is received
+- `onChunk?` - Callback when stream chunk is received
+- `onFinish?` - Callback when response finishes
+- `onError?` - Callback when error occurs
+- `onCustomEvent?` - Callback for custom stream events
+- `streamProcessor?` - Stream processing configuration
+
+**Note:** Client tools are now automatically executed - no `onToolCall` callback needed!
+
+### Returns
+
+```typescript
+import type { DeepReadonly, ShallowRef } from "vue";
+import type { UIMessage } from "@tanstack/ai-vue";
+import type { ModelMessage } from "@tanstack/ai/client";
+import type {
+  MultimodalContent,
+  ChatClientState,
+  ConnectionStatus,
+} from "@tanstack/ai-client";
+
+interface UseChatReturn {
+  messages: DeepReadonly<ShallowRef<UIMessage[]>>;
+  sendMessage: (content: string | MultimodalContent) => Promise<void>;
+  append: (message: ModelMessage | UIMessage) => Promise<void>;
+  addToolResult: (result: {
+    toolCallId: string;
+    tool: string;
+    output: any;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => Promise<void>;
+  addToolApprovalResponse: (response: {
+    id: string;
+    approved: boolean;
+  }) => Promise<void>;
+  reload: () => Promise<void>;
+  stop: () => void;
+  isLoading: DeepReadonly<ShallowRef<boolean>>;
+  error: DeepReadonly<ShallowRef<Error | undefined>>;
+  status: DeepReadonly<ShallowRef<ChatClientState>>;
+  isSubscribed: DeepReadonly<ShallowRef<boolean>>;
+  connectionStatus: DeepReadonly<ShallowRef<ConnectionStatus>>;
+  sessionGenerating: DeepReadonly<ShallowRef<boolean>>;
+  setMessages: (messages: UIMessage[]) => void;
+  clear: () => void;
+}
+```
+
+**Note:** Reactive state (`messages`, `isLoading`, `error`, `status`, `isSubscribed`, `connectionStatus`, `sessionGenerating`) is wrapped in `DeepReadonly<ShallowRef<T>>`. In `<script setup>` read the underlying value with `.value` (e.g., `messages.value`); in `<template>` Vue auto-unwraps the ref, so use the bare name (e.g., `v-for="m in messages"`). Cleanup is automatic via `onScopeDispose`.
+
+## Connection Adapters
+
+Re-exported from `@tanstack/ai-client` for convenience:
+
+```typescript
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  stream,
+  type ConnectionAdapter,
+} from "@tanstack/ai-vue";
+```
+
+## Example: Basic Chat
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-vue";
+
+const input = ref("");
+
+const { messages, sendMessage, isLoading } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+
+const handleSubmit = () => {
+  if (input.value.trim() && !isLoading.value) {
+    sendMessage(input.value);
+    input.value = "";
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <div v-for="message in messages" :key="message.id">
+        <strong>{{ message.role }}:</strong>
+        <template v-for="(part, idx) in message.parts" :key="idx">
+          <div
+            v-if="part.type === 'thinking'"
+            class="text-sm text-gray-500 italic"
+          >
+            Thinking: {{ part.content }}
+          </div>
+          <span v-else-if="part.type === 'text'">{{ part.content }}</span>
+        </template>
+      </div>
+    </div>
+    <form @submit.prevent="handleSubmit">
+      <input v-model="input" :disabled="isLoading" />
+      <button type="submit" :disabled="isLoading">Send</button>
+    </form>
+  </div>
+</template>
+```
+
+## Example: Tool Approval
+
+```vue
+<script setup lang="ts">
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-vue";
+
+const { messages, sendMessage, addToolApprovalResponse } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+</script>
+
+<template>
+  <div>
+    <template v-for="message in messages" :key="message.id">
+      <template v-for="part in message.parts" :key="part.id">
+        <div
+          v-if="
+            part.type === 'tool-call' &&
+            part.state === 'approval-requested' &&
+            part.approval
+          "
+        >
+          <p>Approve: {{ part.name }}</p>
+          <button
+            @click="
+              addToolApprovalResponse({
+                id: part.approval!.id,
+                approved: true,
+              })
+            "
+          >
+            Approve
+          </button>
+          <button
+            @click="
+              addToolApprovalResponse({
+                id: part.approval!.id,
+                approved: false,
+              })
+            "
+          >
+            Deny
+          </button>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+```
+
+## Example: Client Tools with Type Safety
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-vue";
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Show a notification in the UI",
+  inputSchema: z.object({ message: z.string(), type: z.string() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save a value to localStorage",
+  inputSchema: z.object({ key: z.string(), value: z.string() }),
+});
+
+const notification = ref<{ message: string; type: string } | null>(null);
+
+// Create client implementations
+const updateUI = updateUIDef.client((input) => {
+  // input is fully typed!
+  notification.value = { message: input.message, type: input.type };
+  return { success: true };
+});
+
+const saveToStorage = saveToStorageDef.client((input) => {
+  localStorage.setItem(input.key, input.value);
+  return { saved: true };
+});
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(updateUI, saveToStorage);
+
+const { messages, sendMessage } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools, // Automatic execution, full type safety
+});
+</script>
+
+<template>
+  <div>
+    <template v-for="message in messages" :key="message.id">
+      <template v-for="(part, idx) in message.parts" :key="idx">
+        <div v-if="part.type === 'tool-call' && part.name === 'updateUI'">
+          Tool executed: {{ part.name }}
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+```
+
+## Generation Composables
+
+Vue composables for one-shot generation tasks (images, speech, transcription, summarization, video). All share the same pattern: provide a `connection` or `fetcher`, call `generate()`, and read reactive state.
+
+### `useGeneration(options)`
+
+Base composable for custom generation types. All specialized composables below are built on this.
+
+```typescript
+import { useGeneration } from "@tanstack/ai-vue";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+const { generate, result, isLoading, error, status, stop, reset } =
+  useGeneration({
+    connection: fetchServerSentEvents("/api/generate/custom"),
+  });
+```
+
+**Options:** `connection?`, `fetcher?`, `id?`, `body?`, `onResult?`, `onError?`, `onProgress?`, `onChunk?`
+
+**Returns:** `generate`, `result`, `isLoading`, `error`, `status`, `stop`, `reset` -- all reactive state is `DeepReadonly<ShallowRef<T>>`.
+
+### `useGenerateImage(options)`
+
+Image generation composable. `generate()` accepts `ImageGenerateInput`, result is `ImageGenerationResult`.
+
+### `useGenerateSpeech(options)`
+
+Text-to-speech composable. `generate()` accepts `SpeechGenerateInput`, result is `TTSResult`.
+
+### `useTranscription(options)`
+
+Audio transcription composable. `generate()` accepts `TranscriptionGenerateInput`, result is `TranscriptionResult`.
+
+### `useSummarize(options)`
+
+Text summarization composable. `generate()` accepts `SummarizeGenerateInput`, result is `SummarizationResult`.
+
+### `useGenerateVideo(options)`
+
+Video generation composable with job polling. Returns additional `jobId` and `videoStatus` refs. Accepts extra `onJobCreated?` and `onStatusUpdate?` callbacks.
+
+All generation composables automatically clean up via `onScopeDispose`.
+
+## `createChatClientOptions(options)`
+
+Helper to create typed chat options (re-exported from `@tanstack/ai-client`).
+
+```typescript
+import {
+  clientTools,
+  createChatClientOptions,
+  type InferChatMessages,
+} from "@tanstack/ai-client";
+import { fetchServerSentEvents } from "@tanstack/ai-vue";
+import { tool1, tool2 } from "./tools";
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(tool1, tool2);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+type Messages = InferChatMessages<typeof chatOptions>;
+```
+
+## Types
+
+Re-exported from `@tanstack/ai-client`:
+
+- `UIMessage<TTools>` - Message type with tool type parameter
+- `MessagePart<TTools>` - Message part with tool type parameter
+- `TextPart` - Text content part
+- `ThinkingPart` - Thinking content part
+- `ToolCallPart<TTools>` - Tool call part (discriminated union)
+- `ToolResultPart` - Tool result part
+- `ChatClientOptions<TTools, TContext>` - Chat client options with typed client runtime context
+- `ConnectionAdapter` - Connection adapter interface
+- `InferChatMessages<T>` - Extract message type from options
+- `ChatRequestBody` - Request body type
+- `GenerationClientState` - Generation lifecycle state
+- `ImageGenerateInput` - Image generation input type
+- `SpeechGenerateInput` - Speech generation input type
+- `TranscriptionGenerateInput` - Transcription input type
+- `SummarizeGenerateInput` - Summarization input type
+- `VideoGenerateInput` - Video generation input type
+- `VideoGenerateResult` - Video generation result type
+- `VideoStatusInfo` - Video job status info
+
+Re-exported from `@tanstack/ai`:
+
+- `toolDefinition()` - Create isomorphic tool definition
+- `ToolDefinitionInstance` - Tool definition type
+- `ClientTool` - Client tool type
+- `ServerTool` - Server tool type
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tools
diff --git a/mintlify/ai/api/ai.md b/mintlify/ai/api/ai.md
new file mode 100644
index 000000000..65a3dad53
--- /dev/null
+++ b/mintlify/ai/api/ai.md
@@ -0,0 +1,551 @@
+---
+title: "@tanstack/ai"
+id: tanstack-ai-api
+order: 1
+description: "API reference for @tanstack/ai — the core TanStack AI library providing chat(), generateImage(), toolDefinition(), and streaming utilities."
+keywords:
+  - tanstack ai
+  - "@tanstack/ai"
+  - api reference
+  - chat
+  - toolDefinition
+  - generateImage
+  - core library
+---
+
+The core AI library for TanStack AI.
+
+## Installation
+
+```bash
+npm install @tanstack/ai
+```
+
+## `chat(options)`
+
+Creates a streaming chat response.
+
+```typescript
+import { chat, maxIterations } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { myTool } from "./tools";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+  tools: [myTool],
+  systemPrompts: ["You are a helpful assistant"],
+  agentLoopStrategy: maxIterations(20),
+});
+```
+
+### Parameters
+
+- `adapter` - An AI adapter instance with model (e.g., `openaiText('gpt-5.2')`, `anthropicText('claude-sonnet-4-5')`)
+- `messages` - Array of chat messages. Accepts mixed `UIMessage | ModelMessage` arrays — internal conversion handles AG-UI fan-out dedup, drops `reasoning`/`activity`, and collapses `developer` → `system`
+- `tools?` - Array of tools for function calling
+- `context?` - Typed runtime context passed to server tools and middleware. If a tool or middleware declares a concrete context type, `chat()` requires a compatible value here
+- `systemPrompts?` - System prompts to prepend to messages
+- `agentLoopStrategy?` - Strategy for agent loops (default: `maxIterations(5)`)
+- `abortController?` - AbortController for cancellation
+- `modelOptions?` - Provider-native model options. This is where sampling parameters live — `temperature`, `top_p`/`topP`, and the provider's token-limit key (`max_output_tokens`, `max_tokens`, `maxOutputTokens`, …) — under each provider's canonical name, rather than as generic root-level props. See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options). (Renamed from `providerOptions`.)
+- `threadId?` - AG-UI thread identifier propagated into `RUN_STARTED` events for run correlation
+- `runId?` - AG-UI run identifier (auto-generated if omitted)
+- `parentRunId?` - AG-UI parent run identifier for nested runs
+
+### Returns
+
+An async iterable of `StreamChunk`.
+
+## `summarize(options)`
+
+Creates a text summarization.
+
+```typescript
+import { summarize } from "@tanstack/ai";
+import { openaiSummarize } from "@tanstack/ai-openai";
+
+const result = await summarize({
+  adapter: openaiSummarize("gpt-5.2"),
+  text: "Long text to summarize...",
+  maxLength: 100,
+  style: "concise",
+});
+```
+
+### Parameters
+
+- `adapter` - An AI adapter instance with model
+- `text` - Text to summarize
+- `maxLength?` - Maximum length of summary
+- `style?` - Summary style ("concise" | "detailed")
+- `modelOptions?` - Model-specific options
+
+### Returns
+
+A `SummarizationResult` with the summary text.
+
+## `toolDefinition(config)`
+
+Creates an isomorphic tool definition that can be instantiated for server or client execution.
+
+```typescript
+import { chat, toolDefinition } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const myToolDef = toolDefinition({
+  name: "my_tool",
+  description: "Tool description",
+  inputSchema: z.object({
+    param: z.string(),
+  }),
+  outputSchema: z.object({
+    result: z.string(),
+  }),
+  needsApproval: false, // Optional
+});
+
+// Or create client implementation
+const myClientTool = myToolDef.client(async ({ param }) => {
+  // Client-side implementation
+  return { result: "..." };
+});
+
+// Use directly in chat() (server-side, no execute)
+chat({
+  adapter: openaiText("gpt-5.2"),
+  tools: [myToolDef],
+  messages: [{ role: "user", content: "..." }],
+});
+
+// Or create server implementation
+const myServerTool = myToolDef.server(async ({ param }) => {
+  // Server-side implementation
+  return { result: "..." };
+});
+
+// Use directly in chat() (server-side, no execute)
+chat({
+  adapter: openaiText("gpt-5.2"),
+  tools: [myServerTool],
+  messages: [{ role: "user", content: "..." }],
+});
+```
+
+Tools can declare typed runtime context for request-scoped dependencies:
+
+```typescript
+import { chat, toolDefinition, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { session, db } from "./app";
+
+type AppContext = {
+  userId: string;
+  db: { users: { findName(id: string): Promise<string> } };
+};
+
+const currentUser = toolDefinition({
+  name: "current_user",
+  description: "Get the current user",
+}).server<AppContext>(async (_input: unknown, ctx) => {
+  return { name: await ctx.context.db.users.findName(ctx.context.userId) };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.2"),
+    messages,
+    tools: [currentUser],
+    context: { userId: session.user.id, db },
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### Parameters
+
+- `name` - Tool name (must be unique)
+- `description` - Tool description for the model
+- `inputSchema` - Zod schema for input validation
+- `outputSchema?` - Zod schema for output validation
+- `needsApproval?` - Whether tool requires user approval
+- `metadata?` - Additional metadata
+
+### Returns
+
+A `ToolDefinition` object with `.server()` and `.client()` methods for creating concrete implementations.
+
+## `toServerSentEventsStream(stream, abortController?)`
+
+Converts a stream to a ReadableStream in Server-Sent Events format.
+
+```typescript
+import { chat, toServerSentEventsStream } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+const readableStream = toServerSentEventsStream(stream);
+```
+
+### Parameters
+
+- `stream` - Async iterable of `StreamChunk`
+- `abortController?` - Optional AbortController to abort when stream is cancelled
+
+### Returns
+
+A `ReadableStream<Uint8Array>` in Server-Sent Events format. Each chunk is:
+- Prefixed with `"data: "`
+- Followed by `"\n\n"`
+- Stream ends with `"data: [DONE]\n\n"`
+
+## `toServerSentEventsResponse(stream, init?)`
+
+Converts a stream to an HTTP Response with proper SSE headers.
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+async function POST() {
+  const stream = chat({
+    adapter: openaiText("gpt-5.2"),
+    messages: [{ role: "user", content: "Hello!" }],
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### Parameters
+
+- `stream` - Async iterable of `StreamChunk`
+- `init?` - Optional ResponseInit options (including `abortController`)
+
+### Returns
+
+A `Response` object suitable for HTTP endpoints with SSE headers (`Content-Type: text/event-stream`, `Cache-Control: no-cache`, `Connection: keep-alive`).
+
+## `chatParamsFromRequest(req)`
+
+Reads an HTTP `Request`, parses its JSON body, and validates it against AG-UI `RunAgentInputSchema`. Returns parsed chat parameters ready to spread into `chat()`. On a malformed body, **throws a 400 `Response`** that frameworks like TanStack Start, SolidStart, Remix, and React Router 7 return to the client automatically.
+
+```typescript
+import { chat, chatParamsFromRequest, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { serverTools } from "./tools";
+
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req);
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: params.messages,
+    tools: serverTools,
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### Parameters
+
+- `req` - An incoming `Request` whose JSON body conforms to AG-UI `RunAgentInput`
+
+### Returns
+
+A promise resolving to `{ messages, threadId, runId, parentRunId?, tools, forwardedProps, state, aguiContext, context }`.
+
+The returned `aguiContext` is the AG-UI protocol `RunAgentInput.context` field. It is not the same as TanStack AI runtime `chat({ context })`; validate and map it explicitly if you want those values available to tools or middleware.
+
+The returned `context` field is a deprecated alias of `aguiContext` kept for backward compatibility. Prefer `aguiContext` in new code.
+
+> **Framework note.** Next.js Route Handlers, SvelteKit, Hono, and raw Node do not auto-handle thrown `Response` objects. In those, wrap with try/catch or use `chatParamsFromRequestBody(await req.json())` directly.
+
+## `chatParamsFromRequestBody(body)`
+
+Lower-level variant of `chatParamsFromRequest` that validates an already-parsed body. Rejects with an `AGUIError` on malformed input. Use this when you need explicit error handling control.
+
+```typescript
+import { chatParamsFromRequestBody } from "@tanstack/ai";
+
+async function handler(req: Request): Promise<Response> {
+  const body = await req.json();
+  try {
+    const params = await chatParamsFromRequestBody(body);
+    // ...
+    return new Response("ok");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return new Response(message, { status: 400 });
+  }
+}
+```
+
+## `mergeAgentTools(serverTools, clientTools)`
+
+Merges a server-side tool registry with the AG-UI client-declared tools received in the request payload. Server tools win on name collision; client-only tools become no-execute stubs that the runtime dispatches via `ClientToolRequest` events.
+
+```typescript
+import { chat, chatParamsFromRequest, mergeAgentTools } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { serverTools } from "./tools";
+
+async function handler(req: Request) {
+  const params = await chatParamsFromRequest(req);
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: params.messages,
+    tools: mergeAgentTools(serverTools, params.tools),
+  });
+}
+```
+
+### Parameters
+
+- `serverTools` - The server's `toolDefinition().server(...)` registry, keyed by tool name
+- `clientTools` - The `tools` array from `chatParamsFromRequest`'s return value
+
+### Returns
+
+A merged tool record suitable for `chat({ tools })`.
+
+## `maxIterations(count)`
+
+Creates an agent loop strategy that limits iterations.
+
+```typescript
+import { chat, maxIterations } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+  agentLoopStrategy: maxIterations(20),
+});
+```
+
+### Parameters
+
+- `count` - Maximum number of tool execution iterations
+
+### Returns
+
+An `AgentLoopStrategy` object.
+
+## Types
+
+### `ModelMessage`
+
+```typescript
+interface ModelMessage {
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  toolCallId?: string;
+}
+```
+
+### `StreamChunk`
+
+```typescript ignore
+type StreamChunk =
+  | ContentStreamChunk
+  | ThinkingStreamChunk
+  | ToolCallStreamChunk
+  | ToolResultStreamChunk
+  | DoneStreamChunk
+  | ErrorStreamChunk;
+
+interface ThinkingStreamChunk {
+  type: "thinking";
+  id: string;
+  model: string;
+  timestamp: number;
+  delta?: string; // Incremental thinking token
+  content: string; // Accumulated thinking content
+}
+```
+
+Stream chunks represent different types of data in the stream:
+
+- **Content chunks** - Text content being generated
+- **Thinking chunks** - Model's reasoning process (when supported by the model)
+- **Tool call chunks** - When the model calls a tool
+- **Tool result chunks** - Results from tool execution
+- **Done chunks** - Stream completion
+- **Error chunks** - Stream errors
+
+### `Tool`
+
+```typescript
+import type { SchemaInput, ToolExecutionContext } from "@tanstack/ai";
+
+interface Tool<TContext = unknown> {
+  name: string;
+  description: string;
+  inputSchema?: SchemaInput;
+  outputSchema?: SchemaInput;
+  execute?: (
+    args: any,
+    context?: ToolExecutionContext<TContext>
+  ) => Promise<any> | any;
+  needsApproval?: boolean;
+  lazy?: boolean;
+  metadata?: Record<string, any>;
+}
+```
+
+### `ToolExecutionContext<TContext>`
+
+```typescript ignore
+type ToolExecutionContext<TContext = unknown> = {
+  toolCallId?: string;
+  emitCustomEvent: (eventName: string, value: Record<string, any>) => void;
+} & (unknown extends TContext ? { context?: TContext } : { context: TContext });
+```
+
+`context` is the runtime value from `chat({ context })` for server tools, or from `ChatClient` / framework hook options for client tools. It is required when a tool declares a concrete `TContext` and optional for untyped tools where the context type is `unknown`.
+
+### `ChatMiddleware<TContext>`
+
+```typescript
+import type {
+  StreamChunk,
+  ChatMiddlewarePhase,
+  ToolCallHookContext,
+  BeforeToolCallDecision,
+  AfterToolCallInfo,
+  FinishInfo,
+  AbortInfo,
+  ErrorInfo,
+} from "@tanstack/ai";
+
+interface ChatMiddlewareContext<TContext = unknown> {
+  requestId: string;
+  streamId: string;
+  threadId: string;
+  phase: ChatMiddlewarePhase;
+  iteration: number;
+  context: TContext;
+  abort(reason?: string): void;
+  defer(promise: Promise<unknown>): void;
+}
+
+interface ChatMiddleware<TContext = unknown> {
+  name?: string;
+  onStart?: (ctx: ChatMiddlewareContext<TContext>) => void | Promise<void>;
+  onChunk?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    chunk: StreamChunk
+  ) => void | StreamChunk | StreamChunk[] | null | Promise<void | StreamChunk | StreamChunk[] | null>;
+  onBeforeToolCall?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    hookCtx: ToolCallHookContext
+  ) => BeforeToolCallDecision | Promise<BeforeToolCallDecision>;
+  onAfterToolCall?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    info: AfterToolCallInfo
+  ) => void | Promise<void>;
+  onFinish?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    info: FinishInfo
+  ) => void | Promise<void>;
+  onAbort?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    info: AbortInfo
+  ) => void | Promise<void>;
+  onError?: (
+    ctx: ChatMiddlewareContext<TContext>,
+    info: ErrorInfo
+  ) => void | Promise<void>;
+}
+```
+
+See [Runtime Context](/ai/advanced/runtime-context) for the recommended context patterns.
+
+## Usage Examples
+
+```typescript
+import { chat, summarize, generateImage, toolDefinition } from "@tanstack/ai";
+import {
+  openaiText,
+  openaiSummarize,
+  openaiImage,
+} from "@tanstack/ai-openai";
+import { z } from "zod";
+
+// --- Streaming chat
+const stream = chat({
+  adapter: openaiText("gpt-5.2"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+
+// --- Structured response with tools
+const weatherTool = toolDefinition({
+  name: "getWeather",
+  description: "Get the current weather for a city",
+  inputSchema: z.object({
+    city: z.string(),
+  }),
+}).server(async ({ city }) => {
+  // Implementation that fetches weather info
+  return JSON.stringify({ temperature: 72, condition: "Sunny" });
+});
+
+async function examples() {
+  // --- One-shot chat response (stream: false)
+  const response = await chat({
+    adapter: openaiText("gpt-5.2"),
+    messages: [{ role: "user", content: "What's the capital of France?" }],
+    stream: false, // Returns a Promise<string> instead of AsyncIterable
+  });
+
+  // --- Structured response with outputSchema
+  const parsed = await chat({
+    adapter: openaiText("gpt-5.2"),
+    messages: [{ role: "user", content: "Summarize this text in JSON with keys 'summary' and 'keywords': ... " }],
+    outputSchema: z.object({
+      summary: z.string(),
+      keywords: z.array(z.string()),
+    }),
+  });
+
+  const toolResult = await chat({
+    adapter: openaiText("gpt-5.2"),
+    messages: [
+      { role: "user", content: "What's the weather in Paris?" }
+    ],
+    tools: [weatherTool],
+    outputSchema: z.object({
+      answer: z.string(),
+      weather: z.object({
+        temperature: z.number(),
+        condition: z.string(),
+      }),
+    }),
+  });
+
+  // --- Summarization
+  const summary = await summarize({
+    adapter: openaiSummarize("gpt-5.2"),
+    text: "Long text to summarize...",
+    maxLength: 100,
+  });
+
+  // --- Image generation
+  const image = await generateImage({
+    adapter: openaiImage("dall-e-3"),
+    prompt: "A futuristic city skyline at sunset",
+    numberOfImages: 1,
+    size: "1024x1024",
+  });
+}
+```
+
+## Next Steps
+
+- [Getting Started](/ai/getting-started/quick-start) - Learn the basics
+- [Tools Guide](/ai/tools/tools) - Learn about tools
+- [Adapters](/ai/adapters/openai) - Explore adapter options
diff --git a/mintlify/ai/architecture/approval-flow-processing.md b/mintlify/ai/architecture/approval-flow-processing.md
new file mode 100644
index 000000000..04632bbe6
--- /dev/null
+++ b/mintlify/ai/architecture/approval-flow-processing.md
@@ -0,0 +1,448 @@
+---
+title: Approval Flow Processing Architecture
+id: approval-flow-processing
+description: "Internal architecture of TanStack AI's tool approval system — state machine, streaming protocol, concurrency control, and chained approval mechanics."
+keywords:
+  - tanstack ai
+  - approval flow
+  - tool approval
+  - architecture
+  - state machine
+  - streaming protocol
+  - internals
+  - concurrency
+---
+
+# Approval Flow Processing Architecture
+
+> Internal architecture reference for the tool approval system in TanStack AI.
+> Covers the full lifecycle from stream event to continuation, with emphasis on
+> concurrency control and the chained approval mechanism.
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Component Responsibilities](#component-responsibilities)
+3. [Type System](#type-system)
+4. [State Machine](#state-machine)
+5. [Single Approval Lifecycle](#single-approval-lifecycle)
+6. [Chained Approvals and Continuation Control](#chained-approvals-and-continuation-control)
+7. [Stream Event Protocol](#stream-event-protocol)
+8. [Key Source Files](#key-source-files)
+
+---
+
+## Overview
+
+The approval flow allows tools marked with `needsApproval: true` to pause
+execution until the user explicitly approves or denies the action. This
+creates a human-in-the-loop checkpoint for sensitive operations (sending
+emails, making purchases, deleting data).
+
+The flow spans three layers:
+
+```mermaid
+flowchart TD
+    A[Server - TextEngine]
+    B[StreamProcessor]
+    C[ChatClient]
+
+    A -- "AG-UI stream · SSE / HTTP" --> B
+    B -- "events" --> C
+```
+
+| Layer | Responsibility |
+|-------|----------------|
+| **Server (TextEngine)** | `chat()` detects `needsApproval` → emits CUSTOM `approval-requested` instead of executing the tool |
+| **StreamProcessor** | Receives CUSTOM chunk → `updateToolCallApproval()` → fires `onApprovalRequest` callback |
+| **ChatClient** | Exposes `addToolApprovalResponse()` → updates message state → triggers `checkForContinuation()` → sends new stream |
+
+Framework hooks (`useChat` in React, Solid, Vue, Svelte) delegate to
+`ChatClient`, which owns all concurrency and continuation logic.
+
+---
+
+## Component Responsibilities
+
+### TextEngine (server)
+
+- Runs the agent loop: calls the LLM adapter, accumulates tool calls, executes
+  tools, and re-invokes the adapter with results.
+- When a tool has `needsApproval: true`, the engine emits a
+  `CUSTOM { name: "approval-requested" }` event instead of executing the tool.
+- The stream ends with `RUN_FINISHED { finishReason: "tool_calls" }` so the
+  client knows tools are pending.
+
+### StreamProcessor (`packages/ai/src/activities/chat/stream/processor.ts`)
+
+- Single source of truth for `UIMessage[]` state.
+- On `approval-requested` custom event:
+  1. Calls `updateToolCallApproval()` to set the tool-call part's state to
+     `approval-requested` and attach approval metadata.
+  2. Fires `onApprovalRequest` so the ChatClient can emit devtools events.
+- On `addToolApprovalResponse(approvalId, approved)`:
+  1. Calls `updateToolCallApprovalResponse()` to set state to
+     `approval-responded` and record `approval.approved`.
+- Provides `areAllToolsComplete()` which the ChatClient uses to decide whether
+  to auto-continue the conversation.
+
+### ChatClient (`packages/ai-client/src/chat-client.ts`)
+
+- Owns the streaming lifecycle (`streamResponse`), post-stream action queue,
+  and continuation control flags.
+- Exposes `addToolApprovalResponse()` as the public API for responding to
+  approval requests.
+- Manages two critical flags for continuation:
+  - `continuationPending` — prevents concurrent `streamResponse` calls.
+  - `continuationSkipped` — detects when a queued continuation check was
+    suppressed by `continuationPending` and needs re-evaluation.
+
+### Framework Hooks (React `useChat`, Solid `useChat`, etc.)
+
+- Wrap `ChatClient` methods in framework-specific reactive primitives.
+- Expose `addToolApprovalResponse` directly to the component.
+- No approval-specific logic beyond delegation.
+
+---
+
+## Type System
+
+### ToolCallState
+
+```typescript group=approval-flow-processing
+type ToolCallState =
+  | 'awaiting-input'       // TOOL_CALL_START received, no arguments yet
+  | 'input-streaming'      // Partial arguments being received
+  | 'input-complete'       // All arguments received (TOOL_CALL_END)
+  | 'approval-requested'   // Waiting for user approval
+  | 'approval-responded'   // User has approved or denied
+```
+
+### ToolCallPart (approval-relevant fields)
+
+```typescript group=approval-flow-processing
+interface ToolCallPart {
+  type: 'tool-call'
+  id: string               // Unique tool call ID
+  name: string             // Tool name
+  arguments: string        // JSON string of arguments
+  state: ToolCallState
+
+  approval?: {
+    id: string             // Unique approval ID (NOT the toolCallId)
+    needsApproval: boolean // Always true when present
+    approved?: boolean     // undefined until user responds
+  }
+
+  output?: any             // Set after execution (client tools)
+}
+```
+
+### Key distinction: approval ID vs tool call ID
+
+The `approval.id` is a separate identifier generated per approval request.
+All user-facing APIs (`addToolApprovalResponse`) use the **approval ID**,
+not the tool call ID. This allows the system to correlate approval responses
+even when multiple tools share similar call IDs across different messages.
+
+---
+
+## State Machine
+
+```mermaid
+flowchart TD
+    S1[awaiting-input]
+    S2[input-streaming]
+    S3[input-complete]
+    S4[approval-requested]
+    S5([execute directly])
+    S6[approval-responded]
+    S7([execute tool])
+    S8([cancelled])
+
+    S1 -- "TOOL_CALL_START" --> S2
+    S2 -- "TOOL_CALL_ARGS" --> S3
+    S3 -- "TOOL_CALL_END · needsApproval: true" --> S4
+    S3 -- "TOOL_CALL_END · needsApproval: false" --> S5
+    S4 -- "addToolApprovalResponse()" --> S6
+    S6 -- "approved: true" --> S7
+    S6 -- "approved: false" --> S8
+```
+
+### Terminal states for `areAllToolsComplete()`
+
+A tool call is considered complete (and eligible for auto-continuation) when
+any of the following is true:
+
+1. `state === 'approval-responded'` — user approved or denied
+2. `output !== undefined && !approval` — client tool finished (no approval flow)
+3. A corresponding `tool-result` part exists — server tool finished
+
+---
+
+## Single Approval Lifecycle
+
+Step-by-step flow for a single tool requiring approval:
+
+### 1. Server emits approval request during stream
+
+```
+TOOL_CALL_START   { toolCallId: "tc-1", toolName: "send_email" }
+TOOL_CALL_ARGS    { toolCallId: "tc-1", delta: '{"to":"..."}' }
+TOOL_CALL_END     { toolCallId: "tc-1" }
+CUSTOM            { name: "approval-requested", value: {
+                      toolCallId: "tc-1",
+                      toolName: "send_email",
+                      input: { to: "..." },
+                      approval: { id: "appr-1", needsApproval: true }
+                  }}
+RUN_FINISHED      { finishReason: "tool_calls" }
+```
+
+### 2. StreamProcessor processes the CUSTOM chunk
+
+```
+handleCustomEvent():
+  1. updateToolCallApproval(messages, messageId, "tc-1", "appr-1")
+     → Sets part.state = "approval-requested"
+     → Sets part.approval = { id: "appr-1", needsApproval: true }
+  2. emitMessagesChange()
+  3. fires onApprovalRequest({ toolCallId, toolName, input, approvalId })
+```
+
+### 3. Stream ends, ChatClient processes
+
+```
+streamResponse() finally block:
+  1. setIsLoading(false)
+  2. drainPostStreamActions() → (nothing queued)
+  3. streamCompletedSuccessfully check:
+     lastPart is tool-call (not tool-result) → no auto-continue
+  → Returns to caller (sendMessage resolves)
+```
+
+The conversation is now paused. The UI renders the approval prompt.
+
+### 4. User approves
+
+```
+addToolApprovalResponse({ id: "appr-1", approved: true }):
+  1. processor.addToolApprovalResponse("appr-1", true)
+     → updateToolCallApprovalResponse():
+       part.approval.approved = true
+       part.state = "approval-responded"
+  2. isLoading is false → call checkForContinuation() directly
+```
+
+### 5. Continuation
+
+```
+checkForContinuation():
+  1. continuationPending = false, isLoading = false → proceed
+  2. shouldAutoSend() → areAllToolsComplete():
+     part.state === "approval-responded" → true
+  3. continuationPending = true
+  4. streamResponse() → new stream to server with approval in messages
+  5. Server sees approval, executes tool, returns result + LLM response
+  6. continuationPending = false
+```
+
+---
+
+## Chained Approvals and Continuation Control
+
+The most complex scenario: a continuation stream produces **another** tool call
+that also needs approval, and the user responds to it while the stream is still
+active.
+
+### The Problem
+
+```
+Timeline:
+─────────────────────────────────────────────────────────────
+
+1. User approves tool A
+   └─ checkForContinuation() sets continuationPending = true
+   └─ streamResponse() starts (stream 2)
+
+2. Stream 2 produces tool B needing approval
+   └─ approval-requested chunk processed
+   └─ UI shows approval prompt for tool B
+
+3. User approves tool B WHILE stream 2 is still active
+   └─ addToolApprovalResponse():
+      └─ processor state updated (approval-responded)
+      └─ isLoading is true → queues checkForContinuation
+
+4. Stream 2 ends
+   └─ streamResponse() finally block:
+      └─ setIsLoading(false)
+      └─ drainPostStreamActions():
+         └─ Runs queued checkForContinuation()
+         └─ BUT continuationPending is STILL TRUE (from step 1)
+         └─ *** EARLY RETURN — approval swallowed ***
+   └─ Returns to step 1's checkForContinuation()
+   └─ continuationPending = false
+
+5. Nobody re-checks → tool B's approval is lost
+```
+
+### The Solution: `continuationSkipped` Flag
+
+Two flags work together to handle this:
+
+- **`continuationPending`** — prevents concurrent `streamResponse()` calls.
+  Set to `true` when entering `checkForContinuation`'s streaming path, cleared
+  in the `finally` block.
+
+- **`continuationSkipped`** — set to `true` whenever `checkForContinuation()`
+  returns early due to `continuationPending` or `isLoading` being true.
+  Checked after `continuationPending` is cleared to trigger a re-evaluation.
+
+```typescript
+class ChatClient {
+  private continuationPending = false
+  private continuationSkipped = false
+  private isLoading = false
+
+  private shouldAutoSend(): boolean { return false }
+  private async streamResponse(): Promise<void> {}
+
+  private async checkForContinuation(): Promise<void> {
+    if (this.continuationPending || this.isLoading) {
+      this.continuationSkipped = true   // ← Mark that a check was suppressed
+      return
+    }
+
+    if (this.shouldAutoSend()) {
+      this.continuationPending = true
+      this.continuationSkipped = false  // ← Reset before entering stream
+      try {
+        await this.streamResponse()
+      } finally {
+        this.continuationPending = false
+      }
+      // If a check was skipped during the stream, re-evaluate now
+      if (this.continuationSkipped) {
+        this.continuationSkipped = false
+        await this.checkForContinuation()  // ← Recurse safely
+      }
+    }
+  }
+}
+```
+
+### Why the recursion is safe
+
+The recursion terminates because:
+
+1. **`continuationSkipped` is only set when a real check was suppressed.** After
+   the final stream (e.g., a text-only response), no new approvals arrive, so
+   `continuationSkipped` stays `false` and the recursion stops.
+
+2. **`shouldAutoSend()` returns `false` when tools are still pending approval.**
+   If a new approval arrives that hasn't been responded to yet, `areAllToolsComplete()`
+   returns `false` and the method exits without streaming.
+
+3. **Each recursion level sets `continuationPending = true`**, preventing any
+   concurrent checks from entering the streaming path.
+
+### Corrected Timeline
+
+```
+Timeline (with fix):
+─────────────────────────────────────────────────────────────
+
+1. User approves tool A
+   └─ checkForContinuation() [OUTER]
+   └─ continuationPending = true, continuationSkipped = false
+   └─ streamResponse() starts (stream 2)
+
+2. Stream 2 produces tool B, user approves during stream
+   └─ Queues checkForContinuation as post-stream action
+
+3. Stream 2 ends
+   └─ drainPostStreamActions():
+      └─ checkForContinuation(): continuationPending is true
+         └─ continuationSkipped = true  ← MARKED
+         └─ returns early
+   └─ Back in OUTER: continuationPending = false
+
+4. OUTER checks continuationSkipped → true
+   └─ continuationSkipped = false
+   └─ Recurses into checkForContinuation() [INNER]
+   └─ shouldAutoSend() → true (tool B is approval-responded)
+   └─ continuationPending = true
+   └─ streamResponse() → stream 3 (final text response)
+   └─ continuationPending = false
+   └─ continuationSkipped is false → no further recursion
+
+5. Done. All three streams completed correctly.
+```
+
+---
+
+## Stream Event Protocol
+
+### Approval-related AG-UI events
+
+These are `CUSTOM` events emitted by the TextEngine, not by adapters directly.
+
+#### `approval-requested`
+
+Emitted when a tool with `needsApproval: true` has its arguments finalized.
+
+```typescript ignore
+{
+  type: 'CUSTOM',
+  name: 'approval-requested',
+  value: {
+    toolCallId: string,    // ID of the tool call
+    toolName: string,      // Name of the tool
+    input: any,            // Parsed arguments
+    approval: {
+      id: string,          // Unique approval ID
+      needsApproval: true
+    }
+  }
+}
+```
+
+**Processor handling:** `handleCustomEvent()` → `updateToolCallApproval()` →
+`onApprovalRequest` callback.
+
+#### Relation to other tool events
+
+A complete approval tool call in the stream looks like:
+
+```
+TOOL_CALL_START     → creates tool-call part (state: awaiting-input)
+TOOL_CALL_ARGS*     → accumulates arguments (state: input-streaming)
+TOOL_CALL_END       → finalizes arguments (state: input-complete)
+CUSTOM              → approval-requested (state: approval-requested)
+RUN_FINISHED        → finishReason: "tool_calls"
+```
+
+After the stream ends and the user responds, the ChatClient:
+1. Updates the tool-call part (state: `approval-responded`)
+2. Sends a new stream request with the full conversation (including approval)
+3. The server sees the approval and either executes or cancels the tool
+
+---
+
+## Key Source Files
+
+| File | Role |
+|------|------|
+| `packages/ai/src/types.ts` | `ToolCallState`, `ToolCallPart`, tool approval types |
+| `packages/ai/src/activities/chat/stream/processor.ts` | `handleCustomEvent()` (approval-requested), `areAllToolsComplete()`, `addToolApprovalResponse()` |
+| `packages/ai/src/activities/chat/stream/message-updaters.ts` | `updateToolCallApproval()`, `updateToolCallApprovalResponse()` |
+| `packages/ai-client/src/chat-client.ts` | `addToolApprovalResponse()`, `checkForContinuation()`, continuation flags |
+| `packages/ai-react/src/use-chat.ts` | React hook: exposes `addToolApprovalResponse` |
+| `packages/ai-solid/src/use-chat.ts` | Solid hook: exposes `addToolApprovalResponse` |
+| `packages/ai-vue/src/use-chat.ts` | Vue composable: exposes `addToolApprovalResponse` |
+| `packages/ai-svelte/src/create-chat.svelte.ts` | Svelte: exposes `addToolApprovalResponse` |
+| `packages/ai-client/tests/chat-client.test.ts` | Chained approval test (`describe('chained tool approvals')`) |
+| `packages/ai/docs/chat-architecture.md` | Internal stream processing architecture |
diff --git a/mintlify/ai/chat/agentic-cycle.md b/mintlify/ai/chat/agentic-cycle.md
new file mode 100644
index 000000000..95de0303b
--- /dev/null
+++ b/mintlify/ai/chat/agentic-cycle.md
@@ -0,0 +1,205 @@
+---
+title: Agentic Cycle
+id: agentic-cycle
+order: 1
+description: "The agentic cycle in TanStack AI — how the LLM loops through tool calls, results, and reasoning until it produces a final answer."
+keywords:
+  - tanstack ai
+  - agentic cycle
+  - agent loop
+  - tool calling
+  - multi-step reasoning
+  - ai agents
+---
+
+The agentic cycle is the pattern where the LLM repeatedly calls tools, receives results, and continues reasoning until it can provide a final answer. This enables complex multi-step operations.
+
+> **Tip:** Code Mode can reduce agent loop iterations by letting the LLM write a program that calls multiple tools in a single execution. See [Code Mode](/ai/code-mode/code-mode).
+
+```mermaid
+graph TD
+    A[User sends message] --> B[LLM analyzes request]
+    B --> C{Does task need tools?}
+    C -->|No| D[Generate text response]
+    C -->|Yes| E[Call appropriate tool]
+    E --> F{Where does<br/>tool execute?}
+    F -->|Server| G[Execute on server]
+    F -->|Client| H[Execute on client]
+    G --> I[Tool returns result]
+    H --> I
+    I --> J[Add result to conversation]
+    J --> K[LLM analyzes result]
+    K --> L{Task complete?}
+    L -->|No| E
+    L -->|Yes| D
+    D --> M[Stream response to user]
+    M --> N[Done]
+    
+    style E fill:#e1f5ff
+    style G fill:#ffe1e1
+    style H fill:#ffe1e1
+    style L fill:#fff4e1
+```
+
+### Detailed Agentic Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Client
+    participant Server
+    participant LLM
+    participant Tools
+    
+    User->>Client: "What's the weather in SF and LA?"
+    Client->>Server: Send message
+    Server->>LLM: Message + tool definitions
+    
+    Note over LLM: Cycle 1: Call first tool
+    
+    LLM->>Server: tool_call: get_weather(SF)
+    Server->>Tools: Execute get_weather
+    Tools-->>Server: {temp: 65, conditions: "sunny"}
+    Server->>LLM: tool_result
+    
+    Note over LLM: Cycle 2: Call second tool
+    
+    LLM->>Server: tool_call: get_weather(LA)
+    Server->>Tools: Execute get_weather
+    Tools-->>Server: {temp: 75, conditions: "clear"}
+    Server->>LLM: tool_result
+    
+    Note over LLM: Cycle 3: Generate answer
+    
+    LLM-->>Server: content: "SF is 65°F..."
+    Server-->>Client: Stream response
+    Client->>User: Display answer
+```
+
+### Multi-Step Example
+
+Here's a real-world example of the agentic cycle:
+
+**User**: "Find me flights to Paris under $500 and book the cheapest one"
+
+**Cycle 1**: LLM calls `searchFlights({destination: "Paris", maxPrice: 500})`
+- Tool returns: `[{id: "F1", price: 450}, {id: "F2", price: 480}]`
+
+**Cycle 2**: LLM analyzes results and calls `bookFlight({flightId: "F1"})`
+- Tool requires approval (sensitive operation) — see [Tool Approval](/ai/tools/tool-approval)
+- User approves
+- Tool returns: `{bookingId: "B123", confirmed: true}`
+
+**Cycle 3**: LLM generates final response
+- "I found 2 flights under $500. I've booked the cheapest one (Flight F1) for $450. Your booking ID is B123."
+
+### Code Example: Agentic Weather Assistant
+
+```typescript
+import { chat, toolDefinition, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+// Tool definitions
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get current weather for a city",
+  inputSchema: z.object({
+    city: z.string(),
+  }),
+});
+
+const getClothingAdviceDef = toolDefinition({
+  name: "get_clothing_advice",
+  description: "Get clothing recommendations based on weather",
+  inputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+  }),
+});
+
+// Server implementations
+const getWeather = getWeatherDef.server(async ({ city }) => {
+  const response = await fetch(`https://api.weather.com/v1/${city}`);
+  return await response.json();
+});
+
+const getClothingAdvice = getClothingAdviceDef.server(async ({ temperature, conditions }) => {
+  // Business logic for clothing recommendations
+  if (temperature < 50) {
+    return { recommendation: "Wear a warm jacket" };
+  }
+  return { recommendation: "Light clothing is fine" };
+});
+
+// Server route
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getWeather, getClothingAdvice],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+**User**: "What should I wear in San Francisco today?"
+
+**Agentic Cycle**:
+1. LLM calls `get_weather({city: "San Francisco"})` → Returns `{temp: 62, conditions: "cloudy"}`
+2. LLM calls `get_clothing_advice({temperature: 62, conditions: "cloudy"})` → Returns `{recommendation: "Light jacket recommended"}`
+3. LLM generates: "The weather in San Francisco is 62°F and cloudy. I recommend wearing a light jacket."
+
+The loop continues only while the model's finish reason is `tool_calls` (with pending tool calls) **and** the agent loop strategy permits another iteration; it ends as soon as the model returns a normal `stop` finish reason.
+
+### Controlling the loop
+
+By default the loop is bounded by `maxIterations(5)` — after five iterations it stops even if the model would keep calling tools. Override this with the `agentLoopStrategy` option:
+
+```typescript
+import { chat, maxIterations, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { getWeather, getClothingAdvice } from "./tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getWeather, getClothingAdvice],
+    agentLoopStrategy: maxIterations(3), // default is 5
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Other built-in strategies:
+
+- **`untilFinishReason([...])`** — continue until the model returns one of the given finish reasons (e.g. `untilFinishReason(["stop", "length"])`).
+- **`combineStrategies([...])`** — combine multiple strategies with AND logic; the loop continues only while every strategy agrees.
+
+A strategy is just a function that receives `{ iterationCount, finishReason, messages }` and returns `true` to allow another iteration or `false` to stop, so you can also write your own:
+
+```typescript
+import { chat, combineStrategies, maxIterations, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import type { AgentLoopState } from "@tanstack/ai";
+import { getWeather, getClothingAdvice } from "./tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getWeather, getClothingAdvice],
+    agentLoopStrategy: combineStrategies([
+      maxIterations(10),
+      ({ messages }: AgentLoopState) => messages.length < 100,
+    ]),
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
diff --git a/mintlify/ai/chat/connection-adapters.md b/mintlify/ai/chat/connection-adapters.md
new file mode 100644
index 000000000..e44400ace
--- /dev/null
+++ b/mintlify/ai/chat/connection-adapters.md
@@ -0,0 +1,533 @@
+---
+title: Connection Adapters
+id: connection-adapters
+order: 3
+description: "Connection adapters bridge your client and server in TanStack AI — SSE, HTTP streaming, server functions, RPC, and persistent transports like WebSockets via subscribe/send."
+keywords:
+  - tanstack ai
+  - connection adapters
+  - sse
+  - server-sent events
+  - http stream
+  - websocket
+  - rpc
+  - server functions
+  - fetcher
+  - streaming transport
+  - fetchServerSentEvents
+  - subscribe send
+---
+
+A **connection adapter** is the piece that decides _how_ chunks get from your server to the `ChatClient` (and through it, to your framework's `useChat`). Everything else in TanStack AI — chunk processing, message reassembly, tool calls, UI updates — is transport-agnostic. The adapter is the only thing that touches the network.
+
+This page covers every supported transport, when to pick which, and how to build a custom one.
+
+## Pick a Transport
+
+| You have… | Use |
+| --- | --- |
+| A normal HTTP server and want the default | [`fetchServerSentEvents`](#server-sent-events-sse) |
+| An environment that blocks SSE (some edge runtimes, strict proxies) | [`fetchHttpStream`](#http-streaming-ndjson) |
+| React Native or Expo | [`xhrHttpStream`](#react-native-and-expo) by default, [`xhrServerSentEvents`](#react-native-and-expo) for SSE, or [`fetchHttpStream`](#http-streaming-ndjson) only when streaming `fetch` is available |
+| Code that **synchronously** returns an `AsyncIterable<StreamChunk>` (in-process `chat()`, an RSC stream, tests) | [`stream`](#server-functions-and-direct-async-iterables) |
+| An **async** call — a TanStack Start server function or any `Promise`-returning function — resolving to a `Response` or an `AsyncIterable<StreamChunk>` | [`fetcher`](#server-functions-via-fetcher) |
+| An RPC framework like Cap'n Web, gRPC-Web, or tRPC | [`rpcStream`](#rpc-streams) |
+| A single long-lived WebSocket (or BroadcastChannel, postMessage, shared worker) serving many runs | [Custom `subscribe` / `send` adapter](#persistent-transports-websockets-and-friends) |
+| Standard SSE but with custom fetch wrapping (auth refresh, retries) | [`fetchServerSentEvents` with `fetchClient`](#custom-fetch-client) |
+| Something else entirely (HTTP/3, Server-Sent Events over a different protocol, etc.) | [Custom `connect` adapter](#custom-request-scoped-adapters) |
+
+All adapters produce the same `StreamChunk` events ([AG-UI Protocol](/ai/migration/ag-ui-compliance)) — the choice is purely about transport.
+
+## Server-Sent Events (SSE)
+
+The default. SSE is well-supported across browsers, transparent through most proxies, and easy to debug. Pair it with `toServerSentEventsResponse()` on the server.
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages, sendMessage } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+```
+
+**Dynamic URL and headers.** Pass functions when the value depends on per-request state (current user, fresh token):
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { currentUserId, getToken } from "./auth";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents(
+    () => `/api/chat?user=${currentUserId}`,
+    () => ({
+      headers: { Authorization: `Bearer ${getToken()}` },
+    }),
+  ),
+});
+```
+
+**Static body.** Anything in `options.body` is merged into the AG-UI `forwardedProps` payload sent to your server. Per-message data passed to `sendMessage` wins over this:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat", {
+    body: { provider: "openai", model: "gpt-5.1" },
+  }),
+});
+```
+
+> **Tip:** `body` and `forwardedProps` populate the same wire field. Use `body` for static defaults, the `forwardedProps` constructor option (or per-`sendMessage` `data`) for dynamic values. Runtime values always win.
+
+## HTTP Streaming (NDJSON)
+
+For environments that don't speak SSE — some edge runtimes, certain mobile WebViews, or anywhere a proxy strips `text/event-stream` — use raw newline-delimited JSON. The wire format is one JSON `StreamChunk` per line:
+
+```typescript
+import { useChat, fetchHttpStream } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchHttpStream("/api/chat"),
+});
+```
+
+Server-side, write each chunk as `JSON.stringify(chunk) + "\n"` to the response body. Options (`url`, `headers`, `body`, `fetchClient`, dynamic functions) match `fetchServerSentEvents` exactly.
+
+## React Native and Expo
+
+You have a native app that needs to call your own backend rather than a
+same-origin browser route. Use `useChat` from `@tanstack/ai-react` with an
+explicit chat transport and an absolute URL. By the end of this section, the
+client adapter and server response helper will be paired correctly for React
+Native or Expo.
+
+```typescript
+const baseUrl =
+  process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ??
+  'http://127.0.0.1:8787'
+const httpUrl = `${baseUrl}/chat/http`
+const sseUrl = `${baseUrl}/chat/sse`
+```
+
+Use the URL your runtime can reach. iOS simulators can often use `localhost` or
+`127.0.0.1`, Android emulators commonly use `10.0.2.2` to reach the host
+machine, and physical devices need a LAN or tunneled URL.
+
+Prefer `xhrHttpStream()` for Expo and React Native. It pairs with
+`toHttpResponse()` and reads newline-delimited JSON through incremental XHR
+progress events:
+
+```typescript
+import { useChat, xhrHttpStream } from "@tanstack/ai-react";
+
+const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
+const httpUrl = `${baseUrl}/chat/http`;
+
+const chat = useChat({
+  connection: xhrHttpStream(httpUrl),
+});
+```
+
+Use `xhrServerSentEvents()` when your server returns `text/event-stream` via
+`toServerSentEventsResponse()`:
+
+```typescript
+import { useChat, xhrServerSentEvents } from "@tanstack/ai-react";
+
+const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
+const sseUrl = `${baseUrl}/chat/sse`;
+
+const chat = useChat({
+  connection: xhrServerSentEvents(sseUrl),
+});
+```
+
+Only use `fetchHttpStream()` if your exact React Native runtime exposes
+streaming `fetch` responses, `Response.body.getReader()`, and `TextDecoder`.
+The server still returns newline-delimited JSON with `toHttpResponse()`:
+
+```typescript
+import { useChat, fetchHttpStream } from "@tanstack/ai-react";
+
+const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
+const httpUrl = `${baseUrl}/chat/http`;
+
+const chat = useChat({
+  connection: fetchHttpStream(httpUrl),
+});
+```
+
+If one of those fetch-streaming APIs is missing, `fetchHttpStream()` throws
+`UnsupportedResponseStreamError`. A polyfill that buffers the response does not
+make fetch streaming compatible; the adapter needs incremental bytes. Switch to
+`xhrHttpStream()` or `xhrServerSentEvents()` instead.
+
+Keep provider SDKs and server helpers on your backend. The React Native bundle
+should import hooks and connection adapters, not OpenAI/Anthropic/Gemini SDKs,
+React DOM UI, devtools UI, or other framework packages. For a complete mobile
+walkthrough, see [Quick Start: React Native](/ai/getting-started/quick-start-react-native).
+
+## Server Functions and Direct Async Iterables
+
+When your client can call into your server without going over HTTP — RSC streams, in-process tests, a direct in-process `chat()` call — skip the transport entirely. `stream()` takes a factory that returns an `AsyncIterable<StreamChunk>` **synchronously** and wires it straight into the client. (A [TanStack Start](https://tanstack.com/start) server function returns a `Promise`, so it needs [`fetcher`](#server-functions-via-fetcher), not `stream()` — see the next section.)
+
+```typescript
+import { useChat, stream } from "@tanstack/ai-react";
+import { chatServerFn } from "./server/chat.server";
+
+// `chatServerFn` is an in-process server-side function that synchronously
+// returns an AsyncIterable<StreamChunk> — e.g. the result of
+// `chat({ adapter, model, messages })` on the server.
+const { messages } = useChat({
+  connection: stream((messages, data) => chatServerFn({ messages, ...data })),
+});
+```
+
+The factory receives the conversation messages plus any per-request `data` you passed to `sendMessage`. Return any async iterable that yields `StreamChunk` objects — a generator, the output of `chat()` on the server, a transformed stream, anything.
+
+> **Tip:** `stream()` is **request-scoped**. The factory is invoked once per `sendMessage`, the iterable runs to completion, and the connection closes. If you need a single long-lived channel that multiplexes many sends — for example a WebSocket — use [`subscribe` / `send`](#persistent-transports-websockets-and-friends) instead.
+
+## Server Functions via `fetcher`
+
+When you call into your server with an **async** function — the universal case for a [TanStack Start](https://tanstack.com/start) server function, which always returns a `Promise` — use the top-level `fetcher` option instead of a connection adapter. `fetcher` is a sibling of `connection` (provide exactly one), and it accepts a plain async function. It mirrors the `fetcher` option on the [generation hooks](/ai/media/generation-hooks). The most common shape is a handler that ends with `toServerSentEventsResponse(...)` and resolves to a `Response`:
+
+```typescript ignore
+// server/chat.server.ts
+import { createServerFn } from "@tanstack/react-start";
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import type { UIMessage } from "@tanstack/ai";
+
+export const chatFn = createServerFn({ method: "POST" })
+  .inputValidator((data: { messages: Array<UIMessage> }) => data)
+  .handler(({ data }) =>
+    toServerSentEventsResponse(
+      chat({ adapter: openaiText("gpt-5.1"), messages: data.messages }),
+    ),
+  );
+```
+
+```typescript
+import { useChat } from "@tanstack/ai-react";
+import { chatFn } from "./server/chat.server";
+
+const { messages, sendMessage } = useChat({
+  fetcher: ({ messages }, { signal }) => chatFn({ data: { messages }, signal }),
+});
+```
+
+The fetcher receives `{ messages, data, threadId, runId }` plus an `AbortSignal` (triggered by `stop()` or when a send is superseded). Return a `Response` — whose SSE body the chat client parses for you — **or** an `AsyncIterable<StreamChunk>`, which is yielded directly. If your server function returns the stream itself (instead of wrapping it in a `Response`), the fetcher handles that too. Sync and `Promise`-wrapped returns are both accepted.
+
+> **Tip:** The choice between `fetcher` and [`stream()`](#server-functions-and-direct-async-iterables) is about **async vs sync**, not `Response`-vs-iterable — both can yield an `AsyncIterable<StreamChunk>`. `stream()`'s factory must return that iterable **synchronously**, so a server-function call (which returns a `Promise`) won't typecheck there — that's the gap `fetcher` fills ([issue #509](https://github.com/TanStack/ai/issues/509)). Use `stream()` when you can hand back an async iterable synchronously (in-process `chat()`, an RPC client, tests); use `fetcher` for anything you have to `await`. Both normalize to the same request-scoped adapter, so `stop()`/abort, error handling, and tool calls behave identically.
+
+## RPC Streams
+
+`rpcStream()` is identical in behavior to `stream()` but reads better at call sites that hand off to an RPC client. Use it when integrating with Cap'n Web, gRPC-Web, tRPC subscriptions, or any RPC framework that already returns an async iterable:
+
+```typescript
+import { useChat, rpcStream } from "@tanstack/ai-react";
+import { api } from "./rpc-client";
+
+// `api.chat.stream` is your RPC method; it must return an AsyncIterable<StreamChunk>.
+const { messages } = useChat({
+  connection: rpcStream((messages, data) =>
+    api.chat.stream({ messages, ...data }),
+  ),
+});
+```
+
+## Persistent Transports (WebSockets and Friends)
+
+A persistent transport — WebSocket, BroadcastChannel, postMessage between iframes, a shared worker — is fundamentally different from request/response. You open the channel **once**, then send and receive over it for the lifetime of the client. `stream()`/`connect()` can't model this cleanly because they assume one async iterable per request.
+
+For these cases, implement the `SubscribeConnectionAdapter` interface directly. The shape (full definition in [The Adapter Interface](#the-adapter-interface)):
+
+```typescript
+import type { SubscribeConnectionAdapter } from "@tanstack/ai-react";
+
+// subscribe(abortSignal?): AsyncIterable<StreamChunk>   — long-lived
+// send(messages, data?, abortSignal?, runContext?): Promise<void> — one per user message
+```
+
+- `subscribe()` is called **once** by the `ChatClient` and returns a long-lived async iterable of every chunk the channel produces.
+- `send()` is called **once per user message** to push a request frame onto the channel. It returns when the frame has been written — chunks arrive separately through `subscribe()`.
+
+The runtime correlates them: chunks emitted on the subscription queue between `send()` and the next terminal event (`RUN_FINISHED` / `RUN_ERROR`) are attributed to that run.
+
+### WebSocket example
+
+```typescript
+import { useChat, type SubscribeConnectionAdapter } from "@tanstack/ai-react";
+import type { StreamChunk } from "@tanstack/ai";
+
+function websocketConnection(url: string): SubscribeConnectionAdapter {
+  const ws = new WebSocket(url);
+  const queue: Array<StreamChunk> = [];
+  let pending: ((chunk: StreamChunk | null) => void) | null = null;
+  let closed = false;
+
+  const ready = new Promise<void>((resolve) => {
+    ws.addEventListener("open", () => resolve(), { once: true });
+  });
+
+  function deliver(chunk: StreamChunk | null) {
+    const resolve = pending;
+    if (resolve) {
+      pending = null;
+      resolve(chunk);
+    } else if (chunk !== null) {
+      queue.push(chunk);
+    }
+  }
+
+  ws.addEventListener("message", (event) => {
+    const chunk: StreamChunk = JSON.parse(event.data);
+    deliver(chunk);
+  });
+  ws.addEventListener("close", () => {
+    closed = true;
+    deliver(null);
+  });
+
+  return {
+    async *subscribe(abortSignal) {
+      while (!abortSignal?.aborted && !closed) {
+        const buffered = queue.shift();
+        if (buffered !== undefined) {
+          yield buffered;
+          continue;
+        }
+        const chunk = await new Promise<StreamChunk | null>((resolve) => {
+          pending = resolve;
+          abortSignal?.addEventListener("abort", () => resolve(null), {
+            once: true,
+          });
+        });
+        if (chunk === null) return;
+        yield chunk;
+      }
+    },
+
+    async send(messages, data, _abortSignal, runContext) {
+      await ready;
+      ws.send(
+        JSON.stringify({
+          threadId: runContext?.threadId,
+          runId: runContext?.runId,
+          messages,
+          data,
+        }),
+      );
+    },
+  };
+}
+
+const { messages } = useChat({
+  connection: websocketConnection("wss://example.com/chat"),
+});
+```
+
+> **Tip:** Your server is responsible for emitting `RUN_FINISHED` (or `RUN_ERROR`) at the end of each run. Without it, the client will not know the assistant turn has ended and will wait indefinitely. See [Streaming](/ai/chat/streaming) for the full event lifecycle.
+
+### When to choose persistent over request-scoped
+
+Pick `subscribe` / `send` when **any** of these are true:
+
+- A single connection multiplexes many runs (chat thread keeps the socket open across messages).
+- The server pushes chunks outside of a request (presence updates, server-initiated tool calls, broadcast notifications).
+- You want to share one connection across multiple tabs (BroadcastChannel) or workers.
+
+Otherwise, prefer `fetchServerSentEvents` or `stream()` — they're simpler and require no connection lifecycle management.
+
+## Custom Fetch Client
+
+If you're keeping SSE or HTTP streaming but need to wrap `fetch` — for auth refresh, retries, logging, or routing through an edge proxy — pass a `fetchClient`:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { refreshToken } from "./auth";
+
+async function authedFetch(input: RequestInfo | URL, init?: RequestInit) {
+  let response = await fetch(input, init);
+  if (response.status === 401) {
+    await refreshToken();
+    response = await fetch(input, init);
+  }
+  return response;
+}
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat", {
+    fetchClient: authedFetch,
+  }),
+});
+```
+
+The `fetchClient` must satisfy the standard `fetch` signature. `fetchHttpStream` accepts the same option.
+
+## Custom Request-Scoped Adapters
+
+When none of the built-ins fit but the transport is still request-scoped (one request per user message), implement `ConnectConnectionAdapter` directly. This is the lowest-level escape hatch short of going persistent:
+
+```typescript
+import { useChat, type ConnectConnectionAdapter } from "@tanstack/ai-react";
+import type { StreamChunk } from "@tanstack/ai";
+
+const myAdapter: ConnectConnectionAdapter = {
+  async *connect(messages, data, abortSignal, runContext) {
+    const response = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        threadId: runContext?.threadId,
+        runId: runContext?.runId,
+        messages,
+        ...data,
+      }),
+      ...(abortSignal ? { signal: abortSignal } : {}),
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    if (!response.body) throw new Error("Response has no body");
+
+    // Example: newline-delimited JSON. Replace this loop with whatever
+    // framing your wire format uses, yielding one `StreamChunk` per event.
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        if (line.trim()) {
+          const chunk: StreamChunk = JSON.parse(line);
+          yield chunk;
+        }
+      }
+    }
+  },
+};
+
+const { messages } = useChat({ connection: myAdapter });
+```
+
+`runContext` carries `threadId`, `runId`, `clientTools`, and `forwardedProps`. Include them in your request payload so the server can build an AG-UI-compliant response. If your `connect` stream completes without emitting `RUN_FINISHED`, the runtime synthesizes one for you; if it throws, a `RUN_ERROR` is synthesized.
+
+## The Adapter Interface
+
+A `ConnectionAdapter` is a union — provide **either** `connect`, **or** both `subscribe` and `send`. Never both modes.
+
+```typescript
+import type { UIMessage } from "@tanstack/ai-client";
+import type { ModelMessage, StreamChunk } from "@tanstack/ai";
+
+export interface RunAgentInputContext {
+  threadId: string;
+  runId: string;
+  parentRunId?: string;
+  clientTools?: Array<{ name: string; description: string; parameters: unknown }>;
+  forwardedProps?: Record<string, unknown>;
+}
+
+export interface ConnectConnectionAdapter {
+  connect(
+    messages: UIMessage[] | ModelMessage[],
+    data?: Record<string, any>,
+    abortSignal?: AbortSignal,
+    runContext?: RunAgentInputContext,
+  ): AsyncIterable<StreamChunk>;
+}
+
+export interface SubscribeConnectionAdapter {
+  subscribe(abortSignal?: AbortSignal): AsyncIterable<StreamChunk>;
+  send(
+    messages: UIMessage[] | ModelMessage[],
+    data?: Record<string, any>,
+    abortSignal?: AbortSignal,
+    runContext?: RunAgentInputContext,
+  ): Promise<void>;
+}
+
+export type ConnectionAdapter =
+  | ConnectConnectionAdapter
+  | SubscribeConnectionAdapter;
+```
+
+Internally, `ChatClient` normalizes both shapes to a single `subscribe`/`send` pair via `normalizeConnectionAdapter()`. If you provide `connect`, it gets wrapped in an async queue; if you provide `subscribe` + `send` natively, they're used as-is.
+
+## Authentication
+
+Static headers go in `options.headers`:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { token } from "./auth";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat", {
+    headers: { Authorization: `Bearer ${token}` },
+  }),
+});
+```
+
+For tokens that change per request (refresh tokens, short-lived JWTs), pass a function — it's called on every send, so the header always reflects the latest token:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { getToken } from "./auth";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat", () => ({
+    headers: { Authorization: `Bearer ${getToken()}` },
+  })),
+});
+```
+
+Cookies are sent automatically when `credentials` is `"same-origin"` (default) or `"include"`.
+
+## Cancellation
+
+Every adapter — built-in or custom — receives an `AbortSignal`. Built-ins propagate it to `fetch`; custom adapters must honor it themselves. `useChat`'s `stop()` aborts the current run by triggering the signal:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { stop } = useChat({ connection: fetchServerSentEvents("/api/chat") });
+stop(); // aborts the active stream
+```
+
+For `SubscribeConnectionAdapter`, the signal in `subscribe()` ends the entire subscription (component unmount); the signal in `send()` ends just the in-flight send.
+
+## Error Handling
+
+Adapters should throw on transport errors (HTTP non-2xx, parse failures, dropped sockets). The `ChatClient` catches the throw, emits a `RUN_ERROR` chunk if none has been emitted yet, and surfaces it via `onError` / the `error` state:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { error } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  onError: (err) => console.error("Chat failed:", err),
+});
+```
+
+Don't swallow `AbortError` — let it propagate so the client knows the abort succeeded.
+
+## Best Practices
+
+- **Default to SSE.** It's the most compatible and the easiest to debug. Switch only when something blocks it.
+- **Use `stream()` when you can.** If you control both sides and don't need HTTP semantics, server functions are faster to wire up than building a custom adapter.
+- **Reach for `subscribe`/`send` only when you need persistence.** WebSockets are powerful but require you to handle reconnection, run correlation, and lifecycle yourself.
+- **Always honor `abortSignal`.** It's how the client cleans up on unmount and on `stop()`.
+- **Emit `RUN_FINISHED` from the server.** Without it, the client never knows the turn ended.
+
+## Next Steps
+
+- [Streaming](/ai/chat/streaming) — the full event lifecycle and `StreamChunk` types
+- [AG-UI Client Compliance](/ai/migration/ag-ui-compliance) — the wire protocol your server emits
+- [Cloudflare Adapter](/ai/community-adapters/cloudflare) — example of a custom `fetchClient` in production
+- [API Reference: `@tanstack/ai-client`](/ai/api/ai-client) — full type signatures
diff --git a/mintlify/ai/chat/persistence.md b/mintlify/ai/chat/persistence.md
new file mode 100644
index 000000000..985c8aa2d
--- /dev/null
+++ b/mintlify/ai/chat/persistence.md
@@ -0,0 +1,153 @@
+---
+title: Persistence
+id: chat-persistence
+order: 5
+description: "Persist chat conversations on the client with TanStack AI — hydrate on load, save on change, and clear on reset using a simple getItem/setItem/removeItem adapter."
+keywords:
+  - tanstack ai
+  - persistence
+  - chat history
+  - localStorage
+  - indexeddb
+  - offline
+  - hydration
+---
+
+By default a `ChatClient` (and every framework `useChat`/`createChat` wrapper) keeps messages in memory only — reload the page or navigate away and the conversation is gone. The optional **persistence adapter** wires the client to a storage backend so conversations survive reloads, with no manual `initialMessages` + `onFinish` boilerplate.
+
+This is especially useful for SPAs, Electron apps, and offline-first setups where the client is the source of truth and there's no server managing conversation state.
+
+## The adapter interface
+
+A persistence adapter is any object with three methods — the same `getItem`/`setItem`/`removeItem` shape used elsewhere in TanStack AI. Each method may be synchronous or return a `Promise`:
+
+```typescript
+import type { UIMessage } from "@tanstack/ai-client";
+
+interface ChatClientPersistence {
+  getItem: (
+    id: string,
+  ) =>
+    | Array<UIMessage>
+    | null
+    | undefined
+    | Promise<Array<UIMessage> | null | undefined>;
+  setItem: (id: string, messages: Array<UIMessage>) => void | Promise<void>;
+  removeItem: (id: string) => void | Promise<void>;
+}
+```
+
+The `id` passed to each method is the client's `id` option. Provide a stable `id` per conversation so the right history is loaded back:
+
+```typescript
+import { ChatClient } from "@tanstack/ai-client";
+import { adapter, myPersistenceAdapter } from "./chat-setup";
+
+const client = new ChatClient({
+  id: "conversation-123",
+  connection: adapter,
+  persistence: myPersistenceAdapter,
+});
+```
+
+## What the client does for you
+
+When a `persistence` adapter is provided, `ChatClient`:
+
+- **Hydrates on construction** — calls `getItem(id)`. If it returns an array, those messages populate the client (overriding `initialMessages`). Async adapters hydrate as soon as the promise resolves, unless you've already started a new conversation in the meantime.
+- **Saves on every change** — calls `setItem(id, messages)` whenever the message list changes (new user message, streamed assistant content, tool calls/results, approval responses). Writes are queued so they never overlap or land out of order.
+- **Clears on `clear()`** — calls `removeItem(id)` and discards any in-flight stream so a cleared conversation doesn't get repopulated by late chunks.
+
+When `persistence` is omitted, nothing changes — the client behaves exactly as before. The option is fully backwards compatible.
+
+Persistence is **best-effort**: if an adapter method throws or rejects, the error is swallowed so storage problems never break the chat. Handle and surface errors inside your adapter if you need to react to them.
+
+## Framework usage
+
+Every framework wrapper accepts the same `persistence` option and forwards it to the underlying `ChatClient`:
+
+```tsx
+// React / Preact
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { myPersistenceAdapter } from "./persistence";
+
+const chat = useChat({
+  id: "conversation-123",
+  connection: fetchServerSentEvents("/api/chat"),
+  persistence: myPersistenceAdapter,
+});
+```
+
+```ts
+// Solid / Vue — same option
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
+import { myPersistenceAdapter } from "./persistence";
+
+const chat = useChat({
+  id: "conversation-123",
+  connection: fetchServerSentEvents("/api/chat"),
+  persistence: myPersistenceAdapter,
+});
+```
+
+```ts ignore
+// Svelte
+const chat = createChat({
+  id: "conversation-123",
+  connection: fetchServerSentEvents("/api/chat"),
+  persistence: myPersistenceAdapter,
+});
+```
+
+## Example: `localStorage`
+
+A synchronous adapter backed by `localStorage`. Note that `UIMessage.createdAt` is a `Date`, which `JSON.stringify` turns into a string — revive it on read if you depend on it:
+
+```typescript
+import type { ChatClientPersistence, UIMessage } from "@tanstack/ai-client";
+
+const localStoragePersistence: ChatClientPersistence = {
+  getItem: (id) => {
+    const raw = window.localStorage.getItem(id);
+    if (!raw) return null;
+    const stored: Array<UIMessage> = JSON.parse(raw);
+    return stored.map((message) => ({
+      ...message,
+      createdAt:
+        typeof message.createdAt === "string"
+          ? new Date(message.createdAt)
+          : message.createdAt,
+    }));
+  },
+  setItem: (id, messages) => {
+    window.localStorage.setItem(id, JSON.stringify(messages));
+  },
+  removeItem: (id) => {
+    window.localStorage.removeItem(id);
+  },
+};
+```
+
+## Example: IndexedDB (async)
+
+For larger histories or structured queries, back the adapter with an async store such as IndexedDB. The client awaits async methods automatically:
+
+```typescript
+import type { ChatClientPersistence } from "@tanstack/ai-client";
+import { db } from "./db";
+
+const indexedDbPersistence: ChatClientPersistence = {
+  getItem: async (id) => {
+    const record = await db.conversations.get(id);
+    return record?.messages;
+  },
+  setItem: async (id, messages) => {
+    await db.conversations.put({ id, messages, updatedAt: Date.now() });
+  },
+  removeItem: async (id) => {
+    await db.conversations.delete(id);
+  },
+};
+```
+
+Any backend works — IndexedDB, SQLite (Electron/Tauri), a remote database, or an in-memory `Map` for tests — as long as it implements the three methods.
diff --git a/mintlify/ai/chat/streaming.md b/mintlify/ai/chat/streaming.md
new file mode 100644
index 000000000..bcfc3118d
--- /dev/null
+++ b/mintlify/ai/chat/streaming.md
@@ -0,0 +1,217 @@
+---
+title: Streaming
+id: streaming-responses
+order: 2
+description: "Stream AI responses in real time with TanStack AI — async iterable chunks, chunk strategies, and partial JSON for responsive chat UIs."
+keywords:
+  - tanstack ai
+  - streaming
+  - streaming responses
+  - real-time ai
+  - async iterable
+  - chunks
+  - partial json
+---
+
+TanStack AI supports streaming responses for real-time chat experiences. Streaming allows you to display responses as they're generated, rather than waiting for the complete response.
+
+## How Streaming Works
+
+When you use `chat()`, it returns an async iterable stream of chunks:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello!" }],
+});
+
+// Stream contains chunks as they arrive
+for await (const chunk of stream) {
+  console.log(chunk); // Process each chunk
+}
+```
+
+## Server-Side Streaming
+
+Convert the stream to an HTTP response using `toServerSentEventsResponse`:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+  });
+
+  // Convert to HTTP response with proper headers
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Client-Side Streaming
+
+The `useChat` hook automatically handles streaming:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages, sendMessage, isLoading } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+
+// Messages update in real-time as chunks arrive
+messages.forEach((message) => {
+  // Message content updates incrementally
+});
+```
+
+## Stream Events (AG-UI Protocol)
+
+TanStack AI implements the [AG-UI Protocol](https://docs.ag-ui.com/introduction) for streaming. Stream events contain different types of data:
+
+### AG-UI Events
+
+- **RUN_STARTED** - Emitted when a run begins
+- **TEXT_MESSAGE_START/CONTENT/END** - Text content streaming lifecycle
+- **TOOL_CALL_START/ARGS/END** - Tool invocation lifecycle
+- **STEP_STARTED/STEP_FINISHED** - Thinking/reasoning steps
+- **CUSTOM** - Namespaced extension events (sandbox file changes, Code Mode progress, structured-output completion, and your own `emitCustomEvent` calls) — see the [Custom Events Reference](/ai/protocol/custom-events) for the full typed taxonomy and how to narrow `chunk.value` with a plain `if`
+- **RUN_FINISHED** - Run completion with finish reason and usage
+- **RUN_ERROR** - Error occurred during the run
+
+> **Tip:** Some models expose their internal reasoning as thinking content that streams before the response. See [Thinking & Reasoning](/ai/chat/thinking-content).
+
+### Thinking Chunks
+
+Adapters emit reasoning as both the canonical `REASONING_MESSAGE_*` events and the older `STEP_STARTED` / `STEP_FINISHED` events. Rather than parsing those raw events yourself, read the reconciled `ThinkingPart` from `message.parts` — the stream processor merges both event families into a single part for you:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+
+for (const message of messages) {
+  for (const part of message.parts) {
+    if (part.type === "thinking") {
+      console.log("Thinking:", part.content); // Accumulated thinking content
+    }
+  }
+}
+```
+
+Thinking content is automatically converted to `ThinkingPart` in `UIMessage` objects. It is UI-only and excluded from messages sent back to the model. See [Thinking & Reasoning](/ai/chat/thinking-content) for the full rendering pattern.
+
+## Connection Adapters
+
+TanStack AI provides connection adapters for different streaming protocols:
+
+### Server-Sent Events (SSE)
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+```
+
+### HTTP Stream
+
+```typescript
+import { useChat, fetchHttpStream } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchHttpStream("/api/chat"),
+});
+```
+
+### Custom Stream
+
+For a fully custom request, use the `fetcher` transport. The fetcher receives the request input plus an `AbortSignal`, and returns a `Response` (whose SSE body the client parses) or an `AsyncIterable<StreamChunk>`. It may return that value synchronously, as a `Promise`, or as an `async function*`:
+
+```typescript
+import { useChat } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  fetcher: ({ messages, data }, { signal }) =>
+    fetch("/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages, ...data }),
+      signal,
+    }),
+});
+```
+
+> **Note:** The lower-level `stream()` connection adapter takes a factory that must return an `AsyncIterable<StreamChunk>` **synchronously** (e.g. a generator) — it does not accept an `async (...) => {...}` function that returns a `Promise`. Prefer the `fetcher` transport above unless you specifically need the connection adapter.
+
+## Monitoring Stream Progress
+
+You can monitor stream progress with callbacks:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  onChunk: (chunk) => {
+    console.log("Received chunk:", chunk);
+  },
+  onFinish: (message) => {
+    console.log("Stream finished:", message);
+  },
+});
+```
+
+## Cancelling Streams
+
+Cancel ongoing streams:
+
+```typescript
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const { stop } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+
+// Cancel the current stream
+stop();
+```
+
+Calling `stop()` aborts the underlying fetch; the resulting `AbortError` is expected and normal. This differs from a connection being cut mid-line: a truncated stream throws a `StreamTruncatedError` and moves the client into its `error` state. See [Connection Adapters](/ai/chat/connection-adapters) for the underlying behavior.
+
+On the server, pass an `AbortController` to `toServerSentEventsResponse(stream, { abortController })` so the chat run is cancelled when the client disconnects:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({ adapter: openaiText("gpt-5.5"), messages });
+
+  const abortController = new AbortController();
+  return toServerSentEventsResponse(stream, { abortController });
+}
+```
+
+## Best Practices
+
+1. **Handle loading states** - Use `isLoading` to show loading indicators
+2. **Handle errors** - Check `error` state for stream failures
+3. **Cancel on unmount** - Clean up streams when components unmount
+4. **Optimize rendering** - Batch updates if needed for performance
+5. **Show progress** - Display partial content as it streams
+
+## Next Steps
+
+- [Connection Adapters](/ai/chat/connection-adapters) - Learn about different connection types
+- [API Reference](/ai/api/ai) - Explore streaming APIs
diff --git a/mintlify/ai/chat/structured-outputs.md b/mintlify/ai/chat/structured-outputs.md
new file mode 100644
index 000000000..dccea9154
--- /dev/null
+++ b/mintlify/ai/chat/structured-outputs.md
@@ -0,0 +1,21 @@
+---
+title: Structured Outputs (Moved)
+id: structured-outputs
+order: 4
+description: "Structured outputs documentation has moved to its own top-level Structured Outputs section, with separate guides for one-shot extraction, streaming UIs, multi-turn chat, and combining with tools."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - moved
+  - redirect
+---
+
+The structured-outputs guide has moved to its own top-level section, split by what you're building. Pick the journey that fits:
+
+- **[Overview](/ai/structured-outputs/overview)** — what structured output is, schema library options, provider support, and "which page do I read?"
+- **[One-Shot Extraction](/ai/structured-outputs/one-shot)** — single prompt in, single typed object out. Use this when you don't need streaming or chat history.
+- **[Streaming UIs](/ai/structured-outputs/streaming)** — `useChat({ outputSchema })` with `partial` and `final` populating a UI field by field.
+- **[Multi-Turn Chat](/ai/structured-outputs/multi-turn)** — every assistant turn carries its own typed `StructuredOutputPart`, history stays renderable, and `messages[i].parts.find(p => p.type === "structured-output").data` is typed by your schema.
+- **[With Tools](/ai/structured-outputs/with-tools)** — combining `outputSchema` with the agent loop, including pause/resume for server-tool approvals and client-tool invocations.
+
+> **Note:** This URL is kept for backward compatibility. New content lives under `/structured-outputs/*` — update existing bookmarks when you can.
diff --git a/mintlify/ai/chat/thinking-content.md b/mintlify/ai/chat/thinking-content.md
new file mode 100644
index 000000000..9e39ad320
--- /dev/null
+++ b/mintlify/ai/chat/thinking-content.md
@@ -0,0 +1,157 @@
+---
+title: Thinking & Reasoning
+id: thinking-content
+order: 5
+description: "Render reasoning tokens from thinking models (Claude extended thinking, OpenAI o-series) as streamed ThinkingPart in TanStack AI chat UIs."
+keywords:
+  - tanstack ai
+  - thinking
+  - reasoning
+  - extended thinking
+  - claude thinking
+  - o-series
+  - chain of thought
+  - ThinkingPart
+---
+
+Some models expose their internal reasoning as "thinking" content -- Claude with extended thinking, OpenAI o-series models with reasoning, and others. TanStack AI captures this as `ThinkingPart` in messages, streamed to your UI in real-time alongside text and tool calls.
+
+Thinking content is **UI-only**. It is never sent back to the model in subsequent requests.
+
+## How It Works
+
+When a model emits reasoning tokens, the adapter emits AG-UI events for them. Adapters emit `REASONING_MESSAGE_*` events (the preferred, canonical form) **and** the older `STEP_STARTED` / `STEP_FINISHED` events. The stream processor reconciles both into a single `ThinkingPart` on the assistant's `UIMessage`, deduplicating overlapping content. You should rely on the `ThinkingPart` in `message.parts` rather than hand-parsing the raw events:
+
+```typescript
+interface ThinkingPart {
+  type: "thinking";
+  content: string;
+  stepId?: string;
+  signature?: string;
+}
+```
+
+The `ThinkingPart` appears in `UIMessage.parts` alongside `TextPart` and `ToolCallPart` entries. As reasoning tokens arrive, its `content` accumulates token by token.
+
+## Enabling Thinking
+
+How you enable thinking depends on the provider.
+
+### Anthropic (Extended Thinking)
+
+Pass the `thinking` option in `modelOptions` with `type: "enabled"` and a `budget_tokens` (minimum 1024). Keep `budget_tokens` below `modelOptions.max_tokens` so there is room for the visible response in addition to the thinking budget:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: anthropicText("claude-sonnet-4-6"),
+    messages,
+    modelOptions: {
+      max_tokens: 32000,
+      // budget_tokens must be at least 1024 and below max_tokens
+      thinking: { type: "enabled", budget_tokens: 10000 },
+    },
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### OpenAI (Reasoning Models)
+
+OpenAI o-series models (o1, o3, o3-mini, o3-pro) perform reasoning automatically. You can control the depth with the `reasoning` option:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("o3-mini"),
+    messages,
+    modelOptions: {
+      reasoning: {
+        effort: "medium", // 'none' | 'minimal' | 'low' | 'medium' | 'high'
+        summary: "auto", // 'auto' | 'detailed'
+      },
+    },
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+When `reasoning.summary` is set, the adapter streams reasoning summary text as thinking content. Without it, reasoning tokens are still used internally but may not be surfaced depending on the model.
+
+GPT-5 and later models also support reasoning. Their `reasoning.effort` accepts `"none" | "minimal" | "low" | "medium" | "high"`, and reasoning activates on any non-`none` value:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    modelOptions: {
+      reasoning: { effort: "high" },
+    },
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Rendering in React
+
+Thinking parts appear in `message.parts` just like text and tool calls. A common pattern is to render them in a collapsible element so they don't dominate the UI:
+
+```tsx
+import type { UIMessage } from "@tanstack/ai-react";
+
+function MessageContent({ message }: { message: UIMessage }) {
+  return (
+    <div>
+      {message.parts.map((part, idx) => {
+        if (part.type === "thinking") {
+          return (
+            <details key={idx}>
+              <summary>Thinking...</summary>
+              <pre style={{ whiteSpace: "pre-wrap" }}>{part.content}</pre>
+            </details>
+          );
+        }
+        if (part.type === "text") {
+          return <p key={idx}>{part.content}</p>;
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+```
+
+The [Quick Start](/ai/getting-started/quick-start) guide shows a simpler inline pattern where thinking is rendered as italic text above the response.
+
+## Streaming Behavior
+
+Thinking content streams **before** the final text response. As reasoning tokens arrive, `ThinkingPart.content` accumulates token by token, the same way `TextPart.content` does for the response text.
+
+The typical streaming order is:
+
+1. The reasoning block begins (`REASONING_MESSAGE_START`, plus a legacy `STEP_STARTED`)
+2. Reasoning tokens stream in (`REASONING_MESSAGE_CONTENT`, plus legacy `STEP_FINISHED` events), accumulating into `ThinkingPart.content`
+3. `TEXT_MESSAGE_START` -- the model begins its visible response
+4. `TEXT_MESSAGE_CONTENT` (repeated) -- the response text streams in
+
+Adapters emit both the canonical `REASONING_MESSAGE_*` events and the older `STEP_*` events; the stream processor reconciles them into one `ThinkingPart` so you never have to hand-parse the raw events. If you use `useChat` from `@tanstack/ai-react` (or the Solid/Vue/Svelte equivalents), your `messages` array updates automatically with both thinking and text parts as they arrive.
+
+## Next Steps
+
+- [Streaming](/ai/chat/streaming) -- Connection adapters and stream events
+- [Agentic Cycle](/ai/chat/agentic-cycle) -- How thinking interacts with tool-calling loops
+- [Anthropic Adapter](/ai/adapters/anthropic) -- Full Anthropic provider options
+- [OpenAI Adapter](/ai/adapters/openai) -- Full OpenAI provider options
diff --git a/mintlify/ai/code-mode/client-integration.md b/mintlify/ai/code-mode/client-integration.md
new file mode 100644
index 000000000..db4e156f9
--- /dev/null
+++ b/mintlify/ai/code-mode/client-integration.md
@@ -0,0 +1,286 @@
+---
+title: Showing Code Mode in the UI
+id: code-mode-client-integration
+order: 2
+description: "Stream Code Mode execution events to your React app — console output, external calls, and results as they happen, via onCustomEvent."
+keywords:
+  - tanstack ai
+  - code mode
+  - react ui
+  - custom events
+  - onCustomEvent
+  - streaming ui
+  - execution progress
+---
+
+You have [Code Mode](/ai/code-mode/code-mode) working on your server — the LLM writes and executes TypeScript, and you get results back. But your users see nothing while the sandbox runs. By the end of this guide, your React app will show real-time execution progress: console output, external function calls, and final results as they stream in.
+
+## How events reach the client
+
+When code runs inside the sandbox, Code Mode emits **custom events** through the AG-UI streaming protocol. These events travel alongside normal chat chunks (text, tool calls) and arrive in your client via the `onCustomEvent` callback.
+
+The events emitted during each `execute_typescript` call:
+
+| Event | When | Key fields |
+|-------|------|------------|
+| `code_mode:execution_started` | Sandbox begins executing | `timestamp`, `codeLength` |
+| `code_mode:console` | Each `console.log/error/warn/info` | `level`, `message`, `timestamp` |
+| `code_mode:external_call` | Before an `external_*` function runs | `function`, `args`, `timestamp` |
+| `code_mode:external_result` | After a successful `external_*` call | `function`, `result`, `duration` |
+| `code_mode:external_error` | When an `external_*` call fails | `function`, `error`, `duration` |
+
+Every event includes a `toolCallId` that ties it to the specific `execute_typescript` tool call, so you can render events alongside the right message.
+
+## Listening to events with useChat
+
+Pass an `onCustomEvent` callback to `useChat`. The callback receives the event type, payload, and a context object with the `toolCallId`:
+
+```tsx group=code-mode-client
+import { useCallback, useRef, useState } from "react";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+interface VMEvent {
+  id: string;
+  eventType: string;
+  data: unknown;
+  timestamp: number;
+}
+
+export function CodeModeChat() {
+  const [toolCallEvents, setToolCallEvents] = useState<
+    Map<string, Array<VMEvent>>
+  >(new Map());
+  const eventIdCounter = useRef(0);
+
+  const handleCustomEvent = useCallback(
+    (
+      eventType: string,
+      data: unknown,
+      context: { toolCallId?: string },
+    ) => {
+      const { toolCallId } = context;
+      if (!toolCallId) return;
+
+      const event: VMEvent = {
+        id: `event-${eventIdCounter.current++}`,
+        eventType,
+        data,
+        timestamp: Date.now(),
+      };
+
+      setToolCallEvents((prev) => {
+        const next = new Map(prev);
+        const events = next.get(toolCallId) || [];
+        next.set(toolCallId, [...events, event]);
+        return next;
+      });
+    },
+    [],
+  );
+
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+    onCustomEvent: handleCustomEvent,
+  });
+
+  // Render messages with events — see next section
+}
+```
+
+Events are keyed by `toolCallId` so each `execute_typescript` call gets its own event timeline.
+
+## Rendering execution progress
+
+When rendering messages, check for `execute_typescript` tool calls and display their events:
+
+```tsx group=code-mode-client
+function MessageList({
+  messages,
+  toolCallEvents,
+}: {
+  messages: Array<{ id: string; role: string; parts: Array<any> }>;
+  toolCallEvents: Map<string, Array<VMEvent>>;
+}) {
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part) => {
+            if (part.type === "text") {
+              return <p key={part.id}>{part.content}</p>;
+            }
+
+            if (
+              part.type === "tool-call" &&
+              part.name === "execute_typescript"
+            ) {
+              const events = toolCallEvents.get(part.id) || [];
+              const result = part.output;
+
+              return (
+                <div key={part.id}>
+                  <CodeExecutionPanel
+                    code={part.input?.typescriptCode}
+                    events={events}
+                    result={result}
+                    isRunning={!result}
+                  />
+                </div>
+              );
+            }
+
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Building an execution panel
+
+Here's a complete `CodeExecutionPanel` component that shows the generated code, live event stream, and final result:
+
+```tsx group=code-mode-client
+function CodeExecutionPanel({
+  code,
+  events,
+  result,
+  isRunning,
+}: {
+  code?: string;
+  events: Array<VMEvent>;
+  result?: { success: boolean; result?: unknown; logs?: string[]; error?: { message: string } };
+  isRunning: boolean;
+}) {
+  return (
+    <div className="border rounded-lg overflow-hidden my-2">
+      {/* Generated code */}
+      {code && (
+        <details open>
+          <summary className="px-3 py-2 bg-gray-100 font-mono text-sm cursor-pointer">
+            TypeScript code
+          </summary>
+          <pre className="p-3 text-sm overflow-x-auto bg-gray-50">
+            <code>{code}</code>
+          </pre>
+        </details>
+      )}
+
+      {/* Live event stream */}
+      {events.length > 0 && (
+        <div className="border-t px-3 py-2">
+          <div className="text-xs font-semibold text-gray-500 mb-1">
+            Execution log
+          </div>
+          <div className="space-y-1 font-mono text-xs">
+            {events.map((event) => (
+              <EventLine key={event.id} event={event} />
+            ))}
+            {isRunning && (
+              <div className="text-blue-500 animate-pulse">Running...</div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Final result */}
+      {result && (
+        <div
+          className={`border-t px-3 py-2 text-sm ${
+            result.success ? "bg-green-50" : "bg-red-50"
+          }`}
+        >
+          {result.error && (
+            <div className="text-red-700">Error: {result.error.message}</div>
+          )}
+          {result.logs && result.logs.length > 0 && (
+            <pre className="text-gray-600 text-xs mt-1">
+              {result.logs.join("\n")}
+            </pre>
+          )}
+          {result.success && result.result !== undefined && (
+            <pre className="text-green-800 text-xs mt-1">
+              {JSON.stringify(result.result, null, 2)}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function EventLine({ event }: { event: VMEvent }) {
+  if (!isRecord(event.data)) return null;
+  const data = event.data;
+
+  switch (event.eventType) {
+    case "code_mode:console":
+      return (
+        <div
+          className={
+            data.level === "error"
+              ? "text-red-600"
+              : data.level === "warn"
+                ? "text-yellow-600"
+                : "text-gray-600"
+          }
+        >
+          [{String(data.level)}] {String(data.message)}
+        </div>
+      );
+
+    case "code_mode:external_call":
+      return (
+        <div className="text-amber-600">
+          → {String(data.function)}(
+          {JSON.stringify(data.args)})
+        </div>
+      );
+
+    case "code_mode:external_result":
+      return (
+        <div className="text-green-600">
+          ← {String(data.function)} ({String(data.duration)}ms)
+        </div>
+      );
+
+    case "code_mode:external_error":
+      return (
+        <div className="text-red-600">
+          ✗ {String(data.function)}: {String(data.error)}
+        </div>
+      );
+
+    case "code_mode:execution_started":
+      return <div className="text-cyan-600">▶ Execution started</div>;
+
+    default:
+      return (
+        <div className="text-gray-400">
+          {event.eventType}: {JSON.stringify(data)}
+        </div>
+      );
+  }
+}
+```
+
+This gives you:
+- A collapsible code block showing the TypeScript the model wrote
+- A live event log showing console output, external function calls with arguments, results with durations, and errors
+- A status-colored result panel with logs and the return value
+
+## Adapting for other frameworks
+
+The `onCustomEvent` callback is available through `ChatClient` from `@tanstack/ai-client`, which all framework integrations use under the hood. In Solid, Vue, or Svelte, pass `onCustomEvent` in the same way you pass it to `useChat` in React — the callback signature is identical:
+
+```typescript ignore
+(eventType: string, data: unknown, context: { toolCallId?: string }) => void
+```
+
+See [Code Mode](/ai/code-mode/code-mode) for setting up the server side, and [Code Mode with Skills](/ai/code-mode/code-mode-with-skills) for adding persistent skill libraries.
diff --git a/mintlify/ai/code-mode/code-mode-isolates.md b/mintlify/ai/code-mode/code-mode-isolates.md
new file mode 100644
index 000000000..65413458b
--- /dev/null
+++ b/mintlify/ai/code-mode/code-mode-isolates.md
@@ -0,0 +1,221 @@
+---
+title: Code Mode Isolate Drivers
+id: code-mode-isolates
+order: 4
+description: "Compare Code Mode sandbox drivers — Node isolated-vm, QuickJS WASM, and Cloudflare Workers — and choose the right runtime for your deployment."
+keywords:
+  - tanstack ai
+  - code mode
+  - isolate driver
+  - isolated-vm
+  - quickjs
+  - cloudflare workers
+  - sandbox
+  - secure execution
+---
+
+Isolate drivers provide the secure sandbox runtimes that [Code Mode](/ai/code-mode/code-mode) uses to execute generated TypeScript. All drivers implement the same `IsolateDriver` interface, so you can swap them without changing any other code.
+
+## Choosing a Driver
+
+| | Node (`isolated-vm`) | QuickJS (WASM) | Cloudflare Workers |
+|---|---|---|---|
+| **Best for** | Server-side Node.js apps | Browsers, edge, portability | Edge deployments on Cloudflare |
+| **Performance** | Fast (V8 JIT) | Slower (interpreted) | Fast (V8 on Cloudflare edge) |
+| **Native deps** | Yes (C++ addon) | None | None |
+| **Browser support** | No | Yes | N/A |
+| **Memory limit** | Configurable | Configurable | N/A |
+| **Stack size limit** | N/A | Configurable | N/A |
+| **Setup** | `pnpm add` | `pnpm add` | Deploy a Worker first |
+
+---
+
+## Node.js Driver (`@tanstack/ai-isolate-node`)
+
+Uses V8 isolates via the [`isolated-vm`](https://github.com/laverdet/isolated-vm) native addon. This is the fastest option for server-side Node.js applications because generated code runs in the same V8 engine as the host, under JIT compilation, with no serialization overhead beyond tool call boundaries.
+
+### Installation
+
+```bash
+pnpm add @tanstack/ai-isolate-node
+```
+
+`isolated-vm` is a native C++ addon and must be compiled for your platform. It requires Node.js 18 or later.
+
+### Usage
+
+```typescript
+import { createNodeIsolateDriver } from '@tanstack/ai-isolate-node'
+
+const driver = createNodeIsolateDriver({
+  memoryLimit: 128,   // MB
+  timeout: 30_000,    // ms
+})
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `memoryLimit` | `number` | `128` | Maximum heap size for the V8 isolate, in megabytes. Execution is terminated if this limit is exceeded. |
+| `timeout` | `number` | `30000` | Maximum wall-clock time per execution, in milliseconds. |
+
+### How it works
+
+Each `execute_typescript` call creates a fresh V8 isolate. Your tools are bridged into the isolate as async reference functions — when generated code calls `external_myTool(...)`, the call crosses the isolate boundary back into the host Node.js process, executes your tool implementation, and returns the result. Console output (`log`, `error`, `warn`, `info`) is captured and returned in the execution result. The isolate is destroyed after each call.
+
+---
+
+## QuickJS Driver (`@tanstack/ai-isolate-quickjs`)
+
+Uses [QuickJS](https://bellard.org/quickjs/) compiled to WebAssembly via Emscripten. Because the sandbox is a WASM module, it has no native dependencies and runs anywhere JavaScript runs: Node.js, browsers, Deno, Bun, and Cloudflare Workers (without deploying a separate Worker).
+
+### Installation
+
+```bash
+pnpm add @tanstack/ai-isolate-quickjs
+```
+
+### Usage
+
+```typescript
+import { createQuickJSIsolateDriver } from '@tanstack/ai-isolate-quickjs'
+
+const driver = createQuickJSIsolateDriver({
+  memoryLimit: 128,     // MB
+  timeout: 30_000,      // ms
+  maxStackSize: 524288, // bytes (512 KiB)
+})
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `memoryLimit` | `number` | `128` | Maximum heap memory for the QuickJS VM, in megabytes. |
+| `timeout` | `number` | `30000` | Maximum wall-clock time per execution, in milliseconds. |
+| `maxStackSize` | `number` | `524288` | Maximum call stack size in bytes (default: 512 KiB). Increase for deeply recursive code; decrease to catch runaway recursion sooner. |
+
+### How it works
+
+QuickJS WASM uses an asyncified execution model — the WASM module can pause while awaiting host async functions (your tools). Executions are serialized through a global queue to prevent concurrent WASM calls, which the asyncify model does not support. Fatal errors (memory exhaustion, stack overflow) are detected, the VM is disposed, and a structured error is returned. Console output is captured and returned with the result.
+
+> **Performance note:** QuickJS interprets JavaScript rather than JIT-compiling it, so compute-heavy scripts run slower than with the Node driver. For typical LLM-generated scripts that are mostly waiting on `external_*` tool calls, this difference is not significant.
+
+---
+
+## Cloudflare Workers Driver (`@tanstack/ai-isolate-cloudflare`)
+
+Runs generated code inside a [Cloudflare Worker](https://workers.cloudflare.com/) at the edge. Your application server sends code and tool schemas to the Worker via HTTP; the Worker executes the code and calls back when it needs a tool result. This keeps your tool implementations on your server while sandboxed execution happens on Cloudflare's global network.
+
+### Installation
+
+```bash
+pnpm add @tanstack/ai-isolate-cloudflare
+```
+
+### Usage
+
+```typescript
+import { createCloudflareIsolateDriver } from '@tanstack/ai-isolate-cloudflare'
+
+const driver = createCloudflareIsolateDriver({
+  workerUrl: 'https://my-code-mode-worker.my-account.workers.dev',
+  authorization: process.env.CODE_MODE_WORKER_SECRET,
+  timeout: 30_000,
+  maxToolRounds: 10,
+})
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `workerUrl` | `string` | — | **Required.** Full URL of the deployed Cloudflare Worker. |
+| `authorization` | `string` | — | Optional value sent as the `Authorization` header on every request. Use this to prevent unauthorized access to your Worker. |
+| `timeout` | `number` | `30000` | Maximum wall-clock time for the entire execution (including all tool round-trips), in milliseconds. |
+| `maxToolRounds` | `number` | `10` | Maximum number of tool-call/result cycles per execution. Prevents infinite loops when generated code calls tools in a loop. |
+
+### Deploying the Worker
+
+The package exports a ready-made Worker handler at `@tanstack/ai-isolate-cloudflare/worker`. Create a `wrangler.toml` and a worker entry file:
+
+```toml
+# wrangler.toml
+name = "code-mode-worker"
+main = "src/worker.ts"
+compatibility_date = "2024-01-01"
+
+[unsafe]
+bindings = [{ name = "eval", type = "eval" }]
+```
+
+```typescript
+// src/worker.ts
+export { default } from '@tanstack/ai-isolate-cloudflare/worker'
+```
+
+Deploy:
+
+```bash
+wrangler deploy
+```
+
+### How it works
+
+The driver implements a request/response loop for tool execution:
+
+```
+Driver (your server)              Worker (Cloudflare edge)
+─────────────────────             ─────────────────────────
+Send: code + tool schemas  ──────▶  Execute code
+                           ◀──────  Return: needs tool X with args Y
+Execute tool X locally
+Send: tool result          ──────▶  Resume execution
+                           ◀──────  Return: final result / needs tool Z
+...repeat until done...
+```
+
+Each round-trip adds network latency, so the `maxToolRounds` limit both prevents runaway scripts and caps the maximum number of cross-continent hops. Console output from all rounds is aggregated and returned in the final result.
+
+> **Security:** The Worker requires `UNSAFE_EVAL` (local dev) or the `eval` unsafe binding (production) to execute arbitrary code. Restrict access using the `authorization` option or Cloudflare Access policies.
+
+---
+
+## The `IsolateDriver` Interface
+
+All three drivers satisfy this interface, exported from `@tanstack/ai-code-mode`:
+
+```typescript
+import type { ToolBinding, NormalizedError } from "@tanstack/ai-code-mode";
+
+interface IsolateDriver {
+  createContext(config: IsolateConfig): Promise<IsolateContext>
+}
+
+interface IsolateConfig {
+  bindings: Record<string, ToolBinding>
+  timeout?: number
+  memoryLimit?: number
+}
+
+interface IsolateContext {
+  execute(code: string): Promise<ExecutionResult>
+  dispose(): Promise<void>
+}
+
+interface ExecutionResult<T = unknown> {
+  success: boolean
+  value?: T
+  logs: Array<string>
+  error?: NormalizedError
+}
+```
+
+You can implement this interface to build a custom driver — for example, a Docker-based sandbox or a Deno subprocess.
+
+## Next Steps
+
+- [Code Mode](/ai/code-mode/code-mode) — Core setup, API reference, and getting started guide
+- [Showing Code Mode in the UI](/ai/code-mode/client-integration) — Display execution progress in your React app
+- [Code Mode with Skills](/ai/code-mode/code-mode-with-skills) — Add persistent, reusable skill libraries
diff --git a/mintlify/ai/code-mode/code-mode-with-skills.md b/mintlify/ai/code-mode/code-mode-with-skills.md
new file mode 100644
index 000000000..5cd6531e0
--- /dev/null
+++ b/mintlify/ai/code-mode/code-mode-with-skills.md
@@ -0,0 +1,368 @@
+---
+title: Code Mode with Skills
+id: code-mode-with-skills
+order: 3
+description: "Teach Code Mode to save and reuse working code as named skills backed by persistent storage — faster follow-up requests and composable agent memory."
+keywords:
+  - tanstack ai
+  - code mode
+  - skills
+  - skill library
+  - register_skill
+  - reusable snippets
+  - agent memory
+  - skill storage
+---
+
+Skills extend [Code Mode](/ai/code-mode/code-mode) with a persistent library of reusable TypeScript snippets. When the LLM writes a useful piece of code — say, a function that fetches and ranks NPM packages — it can save that code as a _skill_. On future requests, relevant skills are loaded from storage and made available as first-class tools the LLM can call without re-writing the logic.
+
+> **Different from agent-authoring skills.** The skills on this page are _runtime_ snippets the chat LLM saves and reuses. If you're looking to teach your coding assistant (Claude Code, Cursor, etc.) how TanStack AI itself works, see [Agent Skills (TanStack Intent)](/ai/getting-started/agent-skills).
+
+## Overview
+
+The skills system has two integration paths:
+
+| Approach | Entry point | Skill selection | Best for |
+|----------|-------------|----------------|----------|
+| **High-level** | `codeModeWithSkills()` | Automatic (LLM-based) | New projects, turnkey setup |
+| **Manual** | Individual functions (`skillsToTools`, `createSkillManagementTools`, etc.) | You decide which skills to load | Full control, existing setups |
+
+Both paths share the same storage, trust, and execution primitives — they differ only in how skills are selected and assembled.
+
+## How It Works
+
+A request with skills enabled goes through these stages:
+
+```
+┌─────────────────────────────────────────────────────┐
+│ 1. Load skill index (metadata only, no code)        │
+├─────────────────────────────────────────────────────┤
+│ 2. Select relevant skills (LLM call — fast model)   │
+├─────────────────────────────────────────────────────┤
+│ 3. Build tool registry                              │
+│    ├── execute_typescript (Code Mode sandbox)        │
+│    ├── search_skills / get_skill / register_skill   │
+│    └── skill tools (one per selected skill)         │
+├─────────────────────────────────────────────────────┤
+│ 4. Generate system prompt                           │
+│    ├── Code Mode type stubs                         │
+│    └── Skill library documentation                  │
+├─────────────────────────────────────────────────────┤
+│ 5. Main chat() call (strong model)                  │
+│    ├── Can call skill tools directly                │
+│    ├── Can write code via execute_typescript         │
+│    └── Can register new skills for future use       │
+└─────────────────────────────────────────────────────┘
+```
+
+### LLM calls
+
+There are **two** LLM interactions per request when using the high-level API:
+
+1. **Skill selection** (`selectRelevantSkills`) — A single chat call using the adapter you provide. It sends the last 5 conversation messages plus a catalog of skill names/descriptions, and asks the model to return a JSON array of relevant skill names. This should be a cheap/fast model (e.g., `gpt-4o-mini`, `claude-haiku-4-5`).
+
+2. **Main chat** — The primary `chat()` call with your full model. This is where the LLM reasons, calls tools, writes code, and registers skills.
+
+The selection call is lightweight — it only sees skill metadata (names, descriptions, usage hints), not full code. If there are no skills in storage or no messages, it short-circuits and skips the LLM call entirely.
+
+## High-Level API: `codeModeWithSkills()`
+
+### Installation
+
+```bash
+pnpm add @tanstack/ai-code-mode-skills
+```
+
+### Usage
+
+```typescript
+import { chat, maxIterations, toServerSentEventsStream } from '@tanstack/ai'
+import { createNodeIsolateDriver } from '@tanstack/ai-isolate-node'
+import { codeModeWithSkills } from '@tanstack/ai-code-mode-skills'
+import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
+import { openaiText } from '@tanstack/ai-openai'
+import { myTool1, myTool2 } from './tools'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const storage = createFileSkillStorage({ directory: './.skills' })
+const driver = createNodeIsolateDriver()
+
+const { toolsRegistry, systemPrompt, selectedSkills } = await codeModeWithSkills({
+  config: {
+    driver,
+    tools: [myTool1, myTool2],
+    timeout: 60_000,
+    memoryLimit: 128,
+  },
+  adapter: openaiText('gpt-5-mini'),  // cheap model for skill selection
+  skills: {
+    storage,
+    maxSkillsInContext: 5,
+  },
+  messages,  // current conversation
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),  // strong model for reasoning
+  tools: toolsRegistry.getTools(),
+  messages,
+  systemPrompts: ['You are a helpful assistant.', systemPrompt],
+  agentLoopStrategy: maxIterations(15),
+})
+```
+
+`codeModeWithSkills` returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `toolsRegistry` | `ToolRegistry` | Mutable registry containing all tools. Pass to `chat()` via `tools: toolsRegistry.getTools()`. |
+| `systemPrompt` | `string` | Combined Code Mode + skill library documentation. |
+| `selectedSkills` | `Array<Skill>` | Skills the selection model chose for this conversation. |
+
+### What goes into the registry
+
+The registry is populated with:
+
+- **`execute_typescript`** — The Code Mode sandbox tool. Inside the sandbox, skills are also available as `skill_*` functions (loaded dynamically at execution time).
+- **`search_skills`** — Search the skill library by query. Returns matching skill metadata.
+- **`get_skill`** — Retrieve full details (including code) for a specific skill.
+- **`register_skill`** — Save working code as a new skill. Newly registered skills are immediately added to the registry as callable tools.
+- **One tool per selected skill** — Each selected skill becomes a direct tool (prefixed with `[SKILL]` in its description) that the LLM can call without going through `execute_typescript`.
+
+## Manual API
+
+If you want full control — for example, loading all skills instead of using LLM-based selection — use the lower-level functions directly. This is the approach used in the `ts-code-mode-web` example.
+
+```typescript
+import { chat, maxIterations } from '@tanstack/ai'
+import { createCodeMode } from '@tanstack/ai-code-mode'
+import { createNodeIsolateDriver } from '@tanstack/ai-isolate-node'
+import {
+  createAlwaysTrustedStrategy,
+  createSkillManagementTools,
+  createSkillsSystemPrompt,
+  skillsToTools,
+} from '@tanstack/ai-code-mode-skills'
+import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
+import { openaiText } from '@tanstack/ai-openai'
+import { myTool1, myTool2, BASE_PROMPT } from './tools'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const trustStrategy = createAlwaysTrustedStrategy()
+const storage = createFileSkillStorage({
+  directory: './.skills',
+  trustStrategy,
+})
+const driver = createNodeIsolateDriver()
+
+// 1. Create Code Mode tool + prompt
+const { tool: codeModeTool, systemPrompt: codeModePrompt } =
+  createCodeMode({
+    driver,
+    tools: [myTool1, myTool2],
+    timeout: 60_000,
+    memoryLimit: 128,
+  })
+
+// 2. Load all skills and convert to tools
+const allSkills = await storage.loadAll()
+const skillIndex = await storage.loadIndex()
+
+const skillTools = allSkills.length > 0
+  ? skillsToTools({
+      skills: allSkills,
+      driver,
+      tools: [myTool1, myTool2],
+      storage,
+      timeout: 60_000,
+      memoryLimit: 128,
+    })
+  : []
+
+// 3. Create management tools
+const managementTools = createSkillManagementTools({
+  storage,
+  trustStrategy,
+})
+
+// 4. Generate skill library prompt
+const skillsPrompt = createSkillsSystemPrompt({
+  selectedSkills: allSkills,
+  totalSkillCount: skillIndex.length,
+  skillsAsTools: true,
+})
+
+// 5. Assemble and call chat()
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  tools: [codeModeTool, ...managementTools, ...skillTools],
+  messages,
+  systemPrompts: [BASE_PROMPT, codeModePrompt, skillsPrompt],
+  agentLoopStrategy: maxIterations(15),
+})
+```
+
+This approach skips the selection LLM call entirely — you load whichever skills you want and pass them in directly.
+
+## Skill Storage
+
+Skills are persisted through the `SkillStorage` interface. Two implementations are provided:
+
+### File storage (production)
+
+`createFileSkillStorage` is Node-only — it imports `node:fs` / `node:path` — so
+it lives behind the `/storage` subpath rather than the package root. This keeps
+the root export safe to bundle for Cloudflare Workers and browser builds; only
+reach for the subpath in a Node runtime.
+
+```typescript
+import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
+import { createDefaultTrustStrategy } from '@tanstack/ai-code-mode-skills'
+
+const trustStrategy = createDefaultTrustStrategy()
+const storage = createFileSkillStorage({
+  directory: './.skills',
+  trustStrategy,  // optional, defaults to createDefaultTrustStrategy()
+})
+```
+
+Creates a directory structure:
+
+```
+.skills/
+  _index.json              # Lightweight catalog for fast loading
+  fetch_github_stats/
+    meta.json              # Description, schemas, hints, stats
+    code.ts                # TypeScript source
+  compare_npm_packages/
+    meta.json
+    code.ts
+```
+
+### Memory storage (testing & edge runtimes)
+
+```typescript
+import { createMemorySkillStorage } from '@tanstack/ai-code-mode-skills'
+
+const storage = createMemorySkillStorage()
+```
+
+Keeps everything in memory — no `node:fs` dependency, so it is re-exported from
+the package root and is safe to use in Workers and browsers. Useful for tests,
+demos, and edge deployments. (It is also available from the `/storage` subpath.)
+
+### Storage interface
+
+Both implementations satisfy this interface:
+
+| Method | Description |
+|--------|-------------|
+| `loadIndex()` | Load lightweight metadata for all skills (no code) |
+| `loadAll()` | Load all skills with full details including code |
+| `get(name)` | Get a single skill by name |
+| `save(skill)` | Create or update a skill |
+| `delete(name)` | Remove a skill |
+| `search(query, options?)` | Search skills by text query |
+| `updateStats(name, success)` | Record an execution result for trust tracking |
+
+## Trust Strategies
+
+Skills start untrusted and earn trust through successful executions. The trust level is metadata only — it does not currently gate execution. Four built-in strategies are available:
+
+```typescript group=code-mode-with-skills
+import {
+  createDefaultTrustStrategy,
+  createAlwaysTrustedStrategy,
+  createRelaxedTrustStrategy,
+  createCustomTrustStrategy,
+} from '@tanstack/ai-code-mode-skills'
+```
+
+| Strategy | Initial level | Provisional | Trusted |
+|----------|--------------|-------------|---------|
+| **Default** | `untrusted` | 10+ runs, ≥90% success | 100+ runs, ≥95% success |
+| **Relaxed** | `untrusted` | 3+ runs, ≥80% success | 10+ runs, ≥90% success |
+| **Always trusted** | `trusted` | — | — |
+| **Custom** | Configurable | Configurable | Configurable |
+
+```typescript group=code-mode-with-skills
+const strategy = createCustomTrustStrategy({
+  initialLevel: 'untrusted',
+  provisionalThreshold: { executions: 5, successRate: 0.85 },
+  trustedThreshold: { executions: 50, successRate: 0.95 },
+})
+```
+
+## Skill Lifecycle
+
+### Registration
+
+When the LLM produces useful code via `execute_typescript`, the system prompt instructs it to call `register_skill` with:
+
+- `name` — snake_case identifier (becomes the tool name)
+- `description` — what the skill does
+- `code` — TypeScript source that receives an `input` variable
+- `inputSchema` / `outputSchema` — JSON Schema strings
+- `usageHints` — when to use this skill
+- `dependsOn` — other skills this one calls
+
+The skill is saved to storage and (if a `ToolRegistry` was provided) immediately added as a callable tool in the current session.
+
+### Execution
+
+When a skill tool is called, the system:
+
+1. Wraps the skill code with `const input = <serialized input>;`
+2. Strips TypeScript syntax to plain JavaScript
+3. Creates a fresh sandbox context with `external_*` bindings
+4. Executes the code and returns the result
+5. Updates execution stats (success/failure count) asynchronously
+
+### Selection (high-level API only)
+
+On each new request, `selectRelevantSkills`:
+
+1. Takes the last 5 conversation messages as context
+2. Builds a catalog from the skill index (name + description + first usage hint)
+3. Asks the adapter to return a JSON array of relevant skill names (max `maxSkillsInContext`)
+4. Loads full skill data for the selected names
+
+If parsing fails or the model returns invalid JSON, it falls back to an empty selection — the request proceeds without pre-loaded skills, but the LLM can still search and use skills via the management tools.
+
+## Skills as Tools vs. Sandbox Bindings
+
+The `skillsAsTools` option (default: `true`) controls how skills are exposed:
+
+| Mode | How the LLM calls a skill | Pros | Cons |
+|------|--------------------------|------|------|
+| **As tools** (`true`) | Direct tool call: `skill_name({ ... })` | Simpler for the LLM, shows in tool-call UI, proper input validation | One tool per skill in the tool list |
+| **As bindings** (`false`) | Inside `execute_typescript`: `await skill_fetch_data({ ... })` | Skills composable in code, fewer top-level tools | LLM must write code to use them |
+
+When `skillsAsTools` is enabled, the system prompt documents each skill with its schema, usage hints, and example calls. When disabled, skills appear as typed `skill_*` functions in the sandbox type stubs.
+
+## Custom Events
+
+Skill execution emits events through the TanStack AI event system:
+
+| Event | When | Payload |
+|-------|------|---------|
+| `code_mode:skill_call` | Skill tool invoked | `{ skill, input, timestamp }` |
+| `code_mode:skill_result` | Skill completed successfully | `{ skill, result, duration, timestamp }` |
+| `code_mode:skill_error` | Skill execution failed | `{ skill, error, duration, timestamp }` |
+| `skill:registered` | New skill saved via `register_skill` | `{ id, name, description, timestamp }` |
+
+To render these events in your React app alongside Code Mode execution events, see [Showing Code Mode in the UI](/ai/code-mode/client-integration).
+
+## Tips
+
+- **Use a cheap model for selection.** The selection call only needs to match skill names to conversation context — `gpt-4o-mini` or `claude-haiku-4-5` work well.
+- **Start without skills.** Get Code Mode working first, then add `@tanstack/ai-code-mode-skills` once you have tools that produce reusable patterns.
+- **Monitor the skill count.** As the library grows, consider increasing `maxSkillsInContext` or switching to the manual API where you control which skills load.
+- **Newly registered skills are available on the next message,** not in the current turn's tool list (unless using `ToolRegistry` with the high-level API, which adds them immediately).
+- **Skills can call other skills.** Inside the sandbox, both `external_*` and `skill_*` functions are available. Set `dependsOn` when registering to document these relationships.
+
+## Next Steps
+
+- [Code Mode](/ai/code-mode/code-mode) — Core Code Mode setup and API reference
+- [Showing Code Mode in the UI](/ai/code-mode/client-integration) — Display execution progress in your React app
+- [Isolate Drivers](/ai/code-mode/code-mode-isolates) — Compare sandbox runtimes
diff --git a/mintlify/ai/code-mode/code-mode.md b/mintlify/ai/code-mode/code-mode.md
new file mode 100644
index 000000000..acd5c8cad
--- /dev/null
+++ b/mintlify/ai/code-mode/code-mode.md
@@ -0,0 +1,295 @@
+---
+title: Code Mode
+id: code-mode
+order: 1
+description: "Let LLMs write and execute TypeScript programs that orchestrate tools in a secure sandbox with TanStack AI Code Mode — fewer loops, richer logic."
+keywords:
+  - tanstack ai
+  - code mode
+  - sandbox
+  - typescript execution
+  - tool orchestration
+  - execute_typescript
+  - ai agents
+---
+
+Code Mode lets an LLM write and execute TypeScript programs inside a secure sandbox. Instead of making one tool call at a time, the model writes a short script that orchestrates multiple tools with loops, conditionals, `Promise.all`, and data transformations — then returns a single result.
+
+You already have a chat app that uses [tools](/ai/tools/tools). By the end of this guide, you'll have Code Mode set up so the LLM can compose those tools in TypeScript and execute them in a single sandbox call.
+
+## Why Code Mode?
+
+### Reduced context window usage
+
+In a traditional agentic loop, every tool call adds a round-trip of messages: the model's tool-call request, the tool result, then the model's next reasoning step. A task that touches five tools can easily consume thousands of tokens in back-and-forth.
+
+With Code Mode the model emits one `execute_typescript` call containing a complete program. The five tool invocations happen inside the sandbox, and only the final result comes back — one request, one response.
+
+### The LLM decides how to interpret tool output
+
+When tools are called individually, the model must decide what to do with each result in a new turn. With Code Mode, the model writes the logic up front: filter, aggregate, compare, branch. It can `Promise.all` ten API calls, pick the best result, and return a summary — all in a single execution.
+
+### Type-safe tool execution
+
+Tools you pass to Code Mode are converted to typed function stubs that appear in the system prompt. The model sees exact input/output types, so it generates correct calls without guessing parameter names or shapes. TypeScript annotations in the generated code are stripped automatically before execution.
+
+### Secure sandboxing
+
+Generated code runs in an isolated environment (V8 isolate, QuickJS WASM, or Cloudflare Worker) with no access to the host file system, network, or process. The sandbox has configurable timeouts and memory limits.
+
+## Getting Started
+
+### 1. Install packages
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-code-mode zod
+```
+
+Pick an isolate driver:
+
+```bash
+# Node.js — fastest, uses V8 isolates (requires native compilation)
+pnpm add @tanstack/ai-isolate-node
+
+# QuickJS WASM — no native deps, works in browsers and edge runtimes
+pnpm add @tanstack/ai-isolate-quickjs
+
+# Cloudflare Workers — run on the edge
+pnpm add @tanstack/ai-isolate-cloudflare
+```
+
+### 2. Define tools
+
+Define your tools with `toolDefinition()` and provide a server-side implementation with `.server()`. These become the `external_*` functions available inside the sandbox.
+
+```typescript group=code-mode
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const fetchWeather = toolDefinition({
+  name: "fetchWeather",
+  description: "Get current weather for a city",
+  inputSchema: z.object({ location: z.string() }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    condition: z.string(),
+  }),
+}).server(async ({ location }) => {
+  const res = await fetch(`https://api.weather.example/v1?city=${location}`);
+  return res.json();
+});
+```
+
+### 3. Create the Code Mode tool and system prompt
+
+```typescript group=code-mode
+import { createCodeMode } from "@tanstack/ai-code-mode";
+import { createNodeIsolateDriver } from "@tanstack/ai-isolate-node";
+
+const { tool, systemPrompt } = createCodeMode({
+  driver: createNodeIsolateDriver(),
+  tools: [fetchWeather],
+  timeout: 30_000,
+});
+```
+
+### 4. Use with `chat()`
+
+```typescript group=code-mode
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const result = await chat({
+  adapter: openaiText("gpt-5.5"),
+  systemPrompts: [
+    "You are a helpful weather assistant.",
+    systemPrompt,
+  ],
+  tools: [tool],
+  messages: [
+    {
+      role: "user",
+      content: "Compare the weather in Tokyo, Paris, and New York City",
+    },
+  ],
+});
+```
+
+The model will generate something like:
+
+```typescript ignore
+const cities = ["Tokyo", "Paris", "New York City"];
+const results = await Promise.all(
+  cities.map((city) => external_fetchWeather({ location: city }))
+);
+
+const warmest = results.reduce((prev, curr) =>
+  curr.temperature > prev.temperature ? curr : prev
+);
+
+return {
+  comparison: results.map((r, i) => ({
+    city: cities[i],
+    temperature: r.temperature,
+    condition: r.condition,
+  })),
+  warmest: cities[results.indexOf(warmest)],
+};
+```
+
+All three API calls happen in parallel inside the sandbox. The model receives one structured result instead of three separate tool-call round-trips.
+
+## API Reference
+
+### `createCodeMode(config)`
+
+Creates both the `execute_typescript` tool and its matching system prompt from a single config object. This is the recommended entry point.
+
+```typescript ignore
+const { tool, systemPrompt } = createCodeMode({
+  driver,          // IsolateDriver — required
+  tools,           // Array<ServerTool | ToolDefinition> — required, at least one
+  timeout,         // number — execution timeout in ms (default: 30000)
+  memoryLimit,     // number — memory limit in MB (default: 128, Node + QuickJS drivers)
+  getSkillBindings, // () => Promise<Record<string, ToolBinding>> — optional dynamic bindings
+});
+```
+
+**Config properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `driver` | `IsolateDriver` | The sandbox runtime to execute code in |
+| `tools` | `Array<ServerTool \| ToolDefinition>` | Tools exposed as `external_*` functions. Must have `.server()` implementations |
+| `timeout` | `number` | Execution timeout in milliseconds (default: 30000) |
+| `memoryLimit` | `number` | Memory limit in MB (default: 128). Supported by Node and QuickJS drivers |
+| `getSkillBindings` | `() => Promise<Record<string, ToolBinding>>` | Optional function returning additional bindings at execution time |
+
+The tool returns a `CodeModeToolResult`:
+
+```typescript
+interface CodeModeToolResult {
+  success: boolean;
+  result?: unknown;    // Return value from the executed code
+  logs?: Array<string>; // Captured console output
+  error?: {
+    message: string;
+    name?: string;
+    line?: number;
+  };
+}
+```
+
+### `createCodeModeTool(config)` / `createCodeModeSystemPrompt(config)`
+
+Lower-level functions if you need only the tool or only the prompt. `createCodeMode` calls both internally.
+
+```typescript
+import { createCodeModeTool, createCodeModeSystemPrompt } from "@tanstack/ai-code-mode";
+import { config } from "./config";
+
+const tool = createCodeModeTool(config);
+const prompt = createCodeModeSystemPrompt(config);
+```
+
+### `IsolateDriver`
+
+The interface that sandbox runtimes implement. You do not implement this yourself — pick one of the provided drivers:
+
+```typescript
+import type { IsolateConfig, IsolateContext } from "@tanstack/ai-code-mode";
+
+interface IsolateDriver {
+  createContext(config: IsolateConfig): Promise<IsolateContext>;
+}
+```
+
+**Available drivers:**
+
+| Package | Factory function | Environment |
+|---------|-----------------|-------------|
+| `@tanstack/ai-isolate-node` | `createNodeIsolateDriver()` | Node.js |
+| `@tanstack/ai-isolate-quickjs` | `createQuickJSIsolateDriver()` | Node.js, browser, edge |
+| `@tanstack/ai-isolate-cloudflare` | `createCloudflareIsolateDriver()` | Cloudflare Workers |
+
+For full configuration options for each driver, see [Isolate Drivers](/ai/code-mode/code-mode-isolates).
+
+### Advanced
+
+These utilities are used internally and are exported for custom pipelines:
+
+- **`stripTypeScript(code)`** — Strips TypeScript syntax using sucrase (edge-safe, no native binary), converting to plain JavaScript.
+- **`toolsToBindings(tools, prefix?)`** — Converts TanStack AI tools into `Record<string, ToolBinding>` for sandbox injection.
+- **`generateTypeStubs(bindings, options?)`** — Generates TypeScript type declarations from tool bindings for system prompts.
+
+## Choosing a Driver
+
+For a full comparison of drivers with all configuration options, see [Isolate Drivers](/ai/code-mode/code-mode-isolates).
+
+In brief: use the **Node driver** for server-side Node.js (fastest, V8 JIT), **QuickJS** for browsers or portable edge deployments (no native deps), and the **Cloudflare driver** when you deploy to Cloudflare Workers.
+
+## Custom Events
+
+Code Mode emits custom events during execution that you can observe through the TanStack AI event system. These are useful for building UIs that show execution progress, debugging, or logging.
+
+| Event | When | Payload |
+|-------|------|---------|
+| `code_mode:execution_started` | Code execution begins | `{ timestamp, codeLength }` |
+| `code_mode:console` | Each `console.log/error/warn/info` call | `{ level, message, timestamp }` |
+| `code_mode:external_call` | Before an `external_*` function runs | `{ function, args, timestamp }` |
+| `code_mode:external_result` | After a successful `external_*` call | `{ function, result, duration }` |
+| `code_mode:external_error` | When an `external_*` call fails | `{ function, error, duration }` |
+
+To display these events in your React app, see [Showing Code Mode in the UI](/ai/code-mode/client-integration).
+
+## Model Compatibility
+
+Code Mode asks the model to write valid TypeScript that calls your tools through the sandbox bridge. Not every model handles this equally — many small or older models mishandle the `external_*` calling conventions even when the system prompt is explicit. We track a single multi-step benchmark (joining three tables, filtering customers who bought from every product category, aggregating spend per category) against a gold reference. The full harness lives at `packages/ai-code-mode/models-eval/`.
+
+| Rank | Model | Stars | Acc | Comp | TS | CME | Latency | Tokens |
+|------|-------|:-----:|:---:|:----:|:--:|:---:|--------:|-------:|
+| 1 | `grok:grok-4-1-fast-non-reasoning` | ★★★ | 10 | 9 | 6 | 10 | 7.0s | — |
+| 2 | `ollama:gpt-oss:20b` | ★★★ | 10 | 8 | 6 | 5 | 45.1s | 23.6k |
+| 3 | `anthropic:claude-haiku-4-5` | ★★★ | 10 | 10 | 7 | 10 | 9.4s | 8.5k |
+| 4 | `gemini:gemini-2.5-flash` | ★★★ | 10 | 7 | 5 | 9 | 7.3s | 6.9k |
+| 5 | `ollama:nemotron-cascade-2` | ★★★ | 10 | 9 | 5 | 5 | 60.4s | 11.7k |
+| 6 | `openai:gpt-4o-mini` | ★★☆ | 10 | 8 | 8 | 10 | 19.2s | 8.7k |
+| 7 | `ollama:gemma4:31b` | ★★☆ | 10 | 8 | 4 | 5 | 264.2s | 6.4k |
+
+**Columns**
+
+- **Stars** — overall weighted rating (1-3) combining accuracy, comprehensiveness, code quality, code-mode efficiency, speed, token efficiency, and stability.
+- **Acc / Comp / TS / CME** — Anthropic-judged subscores out of 10: accuracy vs gold, comprehensiveness, TypeScript quality, code-mode efficiency (fewer wasted attempts is better).
+- **Latency** — wall-clock time for the full agentic loop.
+- **Tokens** — total prompt + completion tokens. Grok's adapter does not report usage.
+
+**Takeaways**
+
+- **Strongest cloud picks:** Grok 4.1 Fast, Claude Haiku 4.5, and Gemini 2.5 Flash all finish under 10s and handle the multi-step task cleanly. Claude Haiku 4.5 has the highest comprehensiveness score (10/10).
+- **Strongest local pick:** `ollama:gpt-oss:20b` is the best local performer at 45s with zero compilation failures. `ollama:nemotron-cascade-2` is a close second.
+- **Avoid:** the smaller `gemma4` (9.6 GB) and the other local models commented out at the top of `eval-config.ts` (`granite4:3b`, `ministral-3`, `mistral:7b`, `qwen3:8b`, etc.) — they either ignore the `external_queryTable` shape, hallucinate results, or refuse to invoke `execute_typescript`.
+- **Caveat:** this is a single‑prompt benchmark. Local model results can vary noticeably between runs; use these as a rough capability filter rather than a definitive ranking.
+
+Reproduce locally:
+
+```bash
+cd packages/ai-code-mode/models-eval
+pnpm install
+pnpm eval                    # full suite (needs cloud API keys + Anthropic for judging)
+pnpm eval -- --ollama-only   # local models only
+pnpm eval -- --no-judge      # skip Anthropic-based judging
+```
+
+## Tips
+
+- **Start simple.** Give the model 2-3 tools and a clear task. Code Mode works best when the model has a focused set of capabilities.
+- **Prefer `Promise.all` tasks.** Code Mode shines when the model can parallelize work that would otherwise be sequential tool calls.
+- **Use `console.log` for debugging.** Logs are captured and returned in the result, making it easy to see what happened inside the sandbox.
+- **Keep tools focused.** Each tool should do one thing well. The model will compose them in code.
+- **Check the system prompt.** Call `createCodeModeSystemPrompt(config)` and inspect the output to see exactly what the model will see, including generated type stubs.
+
+## Next Steps
+
+- [Showing Code Mode in the UI](/ai/code-mode/client-integration) — Display execution progress in your React app
+- [Code Mode with Skills](/ai/code-mode/code-mode-with-skills) — Add persistent, reusable skill libraries
+- [Isolate Drivers](/ai/code-mode/code-mode-isolates) — Compare Node, QuickJS, and Cloudflare sandbox runtimes
diff --git a/mintlify/ai/code-mode/lazy-tools.md b/mintlify/ai/code-mode/lazy-tools.md
new file mode 100644
index 000000000..ee158b2dd
--- /dev/null
+++ b/mintlify/ai/code-mode/lazy-tools.md
@@ -0,0 +1,206 @@
+---
+title: Lazy Tools
+id: lazy-tools
+order: 5
+description: "Keep large tool catalogs out of the Code Mode system prompt with lazy tools — the model fetches TypeScript signatures on demand via a discover_tools call."
+keywords:
+  - tanstack ai
+  - code mode
+  - lazy tools
+  - discover_tools
+  - progressive disclosure
+  - prompt size
+  - tool catalog
+---
+
+Large tool catalogs bloat the `execute_typescript` system prompt. Every tool you pass to `createCodeMode` becomes a full TypeScript type stub in that prompt — and at 50+ tools, those stubs can push the effective prompt into the tens of thousands of tokens before the model has even seen your user message.
+
+Lazy tools fix this with **progressive disclosure**: mark rarely-used tools `lazy: true` and they are withheld from the initial system prompt. The model sees only their names in a short "Discoverable APIs" catalog. When it needs one, it calls the `discover_tools` sibling tool to fetch the TypeScript signature on demand, then uses it inside `execute_typescript`. All sandbox bindings are always injected — lazy only defers _documentation_, not callability.
+
+## Marking a Tool Lazy
+
+Add `lazy: true` to the `toolDefinition` config for any tool you want to defer:
+
+```typescript group=lazy-tools
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+// Always eager — documented upfront
+const fetchWeather = toolDefinition({
+  name: "fetchWeather",
+  description: "Get current weather for a city",
+  inputSchema: z.object({ location: z.string() }),
+  outputSchema: z.object({ temperature: z.number(), condition: z.string() }),
+}).server(async ({ location }) => {
+  const res = await fetch(`https://api.weather.example/v1?city=${location}`);
+  return res.json();
+});
+
+// Lazy — kept out of the system prompt until discovered
+const fetchArchive = toolDefinition({
+  name: "fetchArchive",
+  description: "Retrieve historical weather archive data for a date range",
+  inputSchema: z.object({
+    location: z.string(),
+    from: z.string(),
+    to: z.string(),
+  }),
+  outputSchema: z.array(z.object({ date: z.string(), temperature: z.number() })),
+  lazy: true,
+}).server(async ({ location, from, to }) => {
+  const res = await fetch(
+    `https://api.weather.example/v1/archive?city=${location}&from=${from}&to=${to}`
+  );
+  return res.json();
+});
+```
+
+Eager tools continue to receive full type stubs in the system prompt. Lazy tools appear only by name.
+
+## Server Setup
+
+Pass both eager and lazy tools to `createCodeMode`. When at least one tool is lazy, `createCodeMode` also returns a `discover_tools` sibling tool — include it in the `tools` array you pass to `chat()`:
+
+```typescript group=lazy-tools
+// server/route.ts
+import { chat, maxIterations, toServerSentEventsStream } from "@tanstack/ai";
+import { createCodeMode } from "@tanstack/ai-code-mode";
+import { createNodeIsolateDriver } from "@tanstack/ai-isolate-node";
+import { openaiText } from "@tanstack/ai-openai";
+
+const { tools, systemPrompt } = createCodeMode({
+  driver: createNodeIsolateDriver(),
+  tools: [fetchWeather, fetchArchive], // fetchArchive is lazy
+});
+
+// tools is [execute_typescript, discover_tools]
+// — discover_tools is included automatically because fetchArchive is lazy
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    systemPrompts: ["You are a helpful weather assistant.", systemPrompt],
+    tools: [...tools],
+    messages,
+    agentLoopStrategy: maxIterations(10),
+  });
+
+  return toServerSentEventsStream(stream);
+}
+```
+
+`createCodeMode` returns `{ tool, discoveryTool, tools, systemPrompt }`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `tool` | `ServerTool` | The `execute_typescript` tool (backward compatible) |
+| `discoveryTool` | `ServerTool \| null` | The `discover_tools` tool, or `null` when there are no lazy tools |
+| `tools` | `Array<ServerTool>` | `[tool]` or `[tool, discoveryTool]` — spread into `chat({ tools })` |
+| `systemPrompt` | `string` | The matching system prompt |
+
+If no tools are lazy, `discoveryTool` is `null` and `tools` contains only `execute_typescript`.
+
+## The `discover_tools` Flow
+
+When the model encounters a task that requires a lazy tool, it:
+
+1. Calls `discover_tools` with the tool name (bare name, no `external_` prefix).
+2. Receives the TypeScript type stub and description for that tool.
+3. Writes `execute_typescript` code using the now-documented `external_fetchArchive(...)` call.
+
+The bindings are always injected into the sandbox — discovering a tool only retrieves documentation, it does not enable the binding. The model could call `external_fetchArchive` without discovering it first, but it would be writing blind without the type signature.
+
+## Tuning the Discoverable APIs Catalog
+
+By default, lazy tools appear in the system prompt as bare names with no description:
+
+```text
+### Discoverable APIs
+
+- external_fetchArchive
+- external_runReport
+- external_exportData
+```
+
+If you want the model to have a hint about what each tool does before deciding whether to discover it, use `lazyToolsConfig.includeDescription`:
+
+```typescript
+import { createCodeMode } from "@tanstack/ai-code-mode";
+import { createNodeIsolateDriver } from "@tanstack/ai-isolate-node";
+import {
+  fetchWeather,
+  fetchArchive,
+  runReport,
+  exportData,
+} from "./tools";
+
+const { tools, systemPrompt } = createCodeMode({
+  driver: createNodeIsolateDriver(),
+  tools: [fetchWeather, fetchArchive, runReport, exportData],
+  lazyToolsConfig: {
+    includeDescription: "first-sentence", // 'none' | 'first-sentence' | 'full'
+  },
+});
+```
+
+With `'first-sentence'` the catalog becomes:
+
+```text
+### Discoverable APIs
+
+- external_fetchArchive — Retrieve historical weather archive data for a date range.
+- external_runReport — Generate a summary report for a given time period.
+- external_exportData — Export query results to CSV or JSON format.
+```
+
+| Value | Effect |
+|-------|--------|
+| `'none'` (default) | Bare names only — smallest possible prompt addition |
+| `'first-sentence'` | Name plus the first sentence of the tool's description |
+| `'full'` | Name plus the complete description |
+
+The full type stub and input/output schema are always returned on discovery — `includeDescription` only affects the pre-discovery catalog.
+
+## Lazy Tools with Plain `chat()`
+
+The same `lazyToolsConfig` option works for lazy tools used directly with `chat()`, outside of Code Mode. Tools marked `lazy: true` are withheld from the `__lazy__tool__discovery__` catalog description until the model calls for them. Pass `lazyToolsConfig` directly to `chat()`:
+
+```typescript
+import { chat, maxIterations, toServerSentEventsStream } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { fetchWeather, fetchArchive, runReport } from "./tools";
+
+// Non-code-mode: lazy tools in a regular chat agent
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [fetchWeather, fetchArchive, runReport],
+    lazyToolsConfig: {
+      includeDescription: "first-sentence",
+    },
+    agentLoopStrategy: maxIterations(10),
+  });
+
+  return toServerSentEventsStream(stream);
+}
+```
+
+The `includeDescription` behavior is identical — `'none'` lists bare tool names, `'first-sentence'` appends the first sentence, `'full'` appends the complete description.
+
+## Tips
+
+- **Start with `'none'`.** The bare-names catalog is enough for models that reason well about tool names. Add `'first-sentence'` only if the model frequently discovers irrelevant tools.
+- **Lazy tools are always callable.** Their `external_*` bindings are injected into the sandbox regardless of whether the model has called `discover_tools`. Discovery only reveals documentation.
+- **Use `discoveryTool` for observability.** You can inspect `discoveryTool.name` (`"discover_tools"`) to confirm the tool is wired up, or log its calls for analytics.
+- **Partition by frequency, not capability.** Mark tools lazy when they are rarely needed for a typical request. Core tools that most requests use should stay eager.
+
+## Next Steps
+
+- [Code Mode](/ai/code-mode/code-mode) — Core Code Mode setup and API reference
+- [Code Mode with Skills](/ai/code-mode/code-mode-with-skills) — Persistent reusable skill libraries
+- [Isolate Drivers](/ai/code-mode/code-mode-isolates) — Compare Node, QuickJS, and Cloudflare sandbox runtimes
diff --git a/mintlify/ai/community-adapters/cencori.md b/mintlify/ai/community-adapters/cencori.md
new file mode 100644
index 000000000..dc6f52c9e
--- /dev/null
+++ b/mintlify/ai/community-adapters/cencori.md
@@ -0,0 +1,206 @@
+---
+title: Cencori
+id: cencori-adapter
+order: 3
+description: "Access 14+ AI providers (OpenAI, Anthropic, Google, xAI, and more) through Cencori's unified interface with built-in security, observability, and cost tracking in TanStack AI."
+keywords:
+  - tanstack ai
+  - cencori
+  - multi-provider
+  - observability
+  - cost tracking
+  - security
+  - community adapter
+---
+
+The Cencori adapter provides access to 14+ AI providers (OpenAI, Anthropic, Google, xAI, and more) through a unified interface with built-in security, observability, and cost tracking.
+
+## Installation
+
+```bash
+npm install @cencori/ai-sdk
+```
+
+## Basic Usage
+
+```typescript ignore
+// ignore: @cencori/ai-sdk/tanstack is a subpath export; kiira's paths["*"] wildcard maps it
+// to a flat directory lookup and does not consult the package.json exports field,
+// so the subpath cannot be resolved until kiira.config.ts adds an explicit path entry.
+import { chat } from "@tanstack/ai";
+import { cencori } from "@cencori/ai-sdk/tanstack";
+
+const adapter = cencori("o1");
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: "user", content: "Hello!" }],
+})) {
+  if (chunk.type === "TEXT_MESSAGE_CONTENT") {
+    console.log(chunk.delta);
+  }
+}
+```
+
+## Configuration
+
+```typescript ignore
+// ignore: @cencori/ai-sdk/tanstack subpath not resolvable via kiira's paths["*"] wildcard.
+import { createCencori } from "@cencori/ai-sdk/tanstack";
+
+const myCencori = createCencori({
+  apiKey: process.env.CENCORI_API_KEY!,
+  baseUrl: "https://cencori.com", // Optional
+});
+
+const adapter = myCencori("o1");
+```
+
+## Streaming
+
+```typescript ignore
+// ignore: @cencori/ai-sdk/tanstack subpath not resolvable via kiira's paths["*"] wildcard.
+import { chat } from "@tanstack/ai";
+import { cencori } from "@cencori/ai-sdk/tanstack";
+
+const adapter = cencori("claude-3-5-sonnet");
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: "user", content: "Tell me a story" }],
+})) {
+  if (chunk.type === "TEXT_MESSAGE_CONTENT") {
+    process.stdout.write(chunk.delta);
+  } else if (chunk.type === "RUN_FINISHED") {
+    console.log("\nDone");
+  }
+}
+```
+
+
+## Tool Calling
+
+```typescript ignore
+// ignore: @cencori/ai-sdk/tanstack subpath not resolvable via kiira's paths["*"] wildcard.
+import { chat, toolDefinition } from "@tanstack/ai";
+import { cencori } from "@cencori/ai-sdk/tanstack";
+import { z } from "zod";
+
+const adapter = cencori("o1");
+
+const getWeatherDef = toolDefinition({
+  name: "getWeather",
+  description: "Get weather for a location",
+  inputSchema: z.object({ location: z.string() }),
+});
+
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  // Look up the weather for `location`
+  return { temperature: 72, conditions: "Sunny" };
+});
+
+for await (const chunk of chat({
+  adapter,
+  messages: [{ role: "user", content: "What's the weather in NYC?" }],
+  tools: [getWeather],
+})) {
+  if (chunk.type === "TOOL_CALL_START") {
+    console.log("Tool call:", chunk.toolCallName);
+  } else if (chunk.type === "TOOL_CALL_END") {
+    console.log("Tool call finished:", chunk.toolCallId);
+  }
+}
+```
+
+
+## Multi-Provider Support
+
+Switch between providers with a single parameter:
+
+```typescript ignore
+// ignore: @cencori/ai-sdk/tanstack subpath not resolvable via kiira's paths["*"] wildcard.
+import { cencori } from "@cencori/ai-sdk/tanstack";
+
+// OpenAI-compatible
+const openaiCompat = cencori("o1");
+
+// Anthropic
+const anthropic = cencori("claude-3-5-sonnet");
+
+// Google
+const google = cencori("gemini-2.5-flash");
+
+// xAI
+const grok = cencori("grok-3");
+
+// DeepSeek
+const deepseek = cencori("deepseek-v3.2");
+```
+
+All responses use the same unified format regardless of provider.
+
+## Supported Models
+
+| Provider | Models |
+|----------|--------|
+| OpenAI | `gpt-5`, `gpt-4o`, `gpt-4o-mini`, `o3`, `o1` |
+| Anthropic | `claude-opus-4`, `claude-sonnet-4`, `claude-3-5-sonnet` |
+| Google | `gemini-3-pro`, `gemini-2.5-flash`, `gemini-2.0-flash` |
+| xAI | `grok-4`, `grok-3` |
+| Mistral | `mistral-large`, `codestral`, `devstral` |
+| DeepSeek | `deepseek-v3.2`, `deepseek-reasoner` |
+| + More | Groq, Cohere, Perplexity, Together, Qwen, OpenRouter |
+
+> **Note:** Cencori is an external package and its catalogue changes over time. Verify the model ids above against [Cencori's current catalogue](https://cencori.com/docs) before relying on them.
+
+## Environment Variables
+
+```bash
+CENCORI_API_KEY=csk_your_api_key_here
+```
+
+## Getting an API Key
+
+1. Go to [Cencori](https://cencori.com)
+2. Create an account and generate an API key
+3. Add it to your environment variables
+
+## Why Cencori?
+
+- **🔒 Security** — PII filtering, jailbreak detection, content moderation
+- **📊 Observability** — Request logs, latency metrics, cost tracking
+- **💰 Cost Control** — Budgets, alerts, per-route analytics
+- **🔌 Multi-Provider** — One API key for 14+ AI providers
+- **🛠️ Tool Calling** — Full support for function calling across providers
+- **🔄 Failover** — Automatic retry and fallback to alternative providers
+
+## API Reference
+
+### `cencori(model)`
+
+Creates a Cencori adapter using environment variables.
+
+**Parameters:**
+
+- `model` - Model name (e.g., `"gpt-4o"`, `"claude-3-5-sonnet"`, `"gemini-2.5-flash"`)
+
+**Returns:** A Cencori TanStack AI adapter instance.
+
+### `createCencori(config)`
+
+Creates a custom Cencori adapter factory.
+
+**Parameters:**
+
+- `config.apiKey` - Your Cencori API key
+- `config.baseUrl?` - Custom base URL (optional)
+
+**Returns:** A function that creates adapter instances for specific models.
+
+## Next Steps
+
+- [Cencori Dashboard](https://cencori.com) — View analytics, logs, and costs
+- [Documentation](https://cencori.com/docs) — Complete API reference
+- [GitHub Repository](https://github.com/cencori/cencori) — SDK source code
+- [Streaming Guide](/ai/chat/streaming) — Learn about streaming responses
+- [Tools Guide](/ai/tools/tools) — Learn about tool calling
diff --git a/mintlify/ai/community-adapters/cloudflare.md b/mintlify/ai/community-adapters/cloudflare.md
new file mode 100644
index 000000000..b37f35ceb
--- /dev/null
+++ b/mintlify/ai/community-adapters/cloudflare.md
@@ -0,0 +1,319 @@
+---
+title: Cloudflare
+id: cloudflare-adapter
+order: 3
+description: "Use Cloudflare Workers AI and AI Gateway with TanStack AI for edge inference, caching, rate limiting, and unified billing across providers."
+keywords:
+  - tanstack ai
+  - cloudflare
+  - workers ai
+  - ai gateway
+  - edge inference
+  - caching
+  - rate limiting
+  - community adapter
+---
+
+The Cloudflare adapter provides access to [Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/) models and [AI Gateway](https://developers.cloudflare.com/ai-gateway/) for routing requests to OpenAI, Anthropic, Gemini, Grok, and OpenRouter with caching, rate limiting, and unified billing.
+
+## Installation
+
+```bash
+npm install @cloudflare/tanstack-ai @tanstack/ai
+```
+
+For AI Gateway with third-party providers, install the provider SDKs you need:
+
+```bash
+npm install @tanstack/ai-openai       # For OpenAI via Gateway
+npm install @tanstack/ai-anthropic    # For Anthropic via Gateway
+npm install @tanstack/ai-gemini       # For Gemini via Gateway
+npm install @tanstack/ai-grok         # For Grok via Gateway
+npm install @tanstack/ai-openrouter   # For OpenRouter via Gateway
+```
+
+## Basic Usage
+
+```typescript
+import { chat, toHttpResponse } from "@tanstack/ai";
+import { createWorkersAiChat } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createWorkersAiChat(
+  "@cf/meta/llama-4-scout-17b-16e-instruct",
+  { binding: env.AI },
+);
+
+const response = chat({
+  adapter,
+  stream: true,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+
+const httpResponse = toHttpResponse(response);
+```
+
+## Workers AI
+
+The simplest way to use AI in a Cloudflare Worker. No API keys needed when using the `env.AI` binding.
+
+### Chat
+
+```typescript
+import { chat, toHttpResponse } from "@tanstack/ai";
+import { createWorkersAiChat } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createWorkersAiChat(
+  "@cf/meta/llama-4-scout-17b-16e-instruct",
+  { binding: env.AI },
+);
+
+const response = chat({
+  adapter,
+  stream: true,
+  messages: [{ role: "user", content: "Hello!" }],
+});
+
+const httpResponse = toHttpResponse(response);
+```
+
+### Chat with REST Credentials
+
+If you're not running inside a Worker, use account ID and API key instead:
+
+```typescript
+import { createWorkersAiChat } from "@cloudflare/tanstack-ai";
+
+const adapter = createWorkersAiChat(
+  "@cf/meta/llama-4-scout-17b-16e-instruct",
+  {
+    accountId: "your-account-id",
+    apiKey: "your-api-key",
+  },
+);
+```
+
+### Image Generation
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { createWorkersAiImage } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createWorkersAiImage(
+  "@cf/stabilityai/stable-diffusion-xl-base-1.0",
+  { binding: env.AI },
+);
+
+const result = await generateImage({
+  adapter,
+  prompt: "a cat in space",
+});
+
+console.log(result.images[0]?.b64Json);
+```
+
+### Transcription (Speech-to-Text)
+
+Supports Whisper and Deepgram models:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { createWorkersAiTranscription } from "@cloudflare/tanstack-ai";
+import { env, audioArrayBuffer } from "./env";
+
+const adapter = createWorkersAiTranscription(
+  "@cf/openai/whisper-large-v3-turbo",
+  { binding: env.AI },
+);
+
+const result = await generateTranscription({
+  adapter,
+  audio: audioArrayBuffer,
+});
+
+console.log(result.text);
+console.log(result.segments);
+```
+
+Supported transcription models: `@cf/openai/whisper`, `@cf/openai/whisper-tiny-en`, `@cf/openai/whisper-large-v3-turbo`, `@cf/deepgram/nova-3`
+
+### Text-to-Speech
+
+```typescript
+import { generateSpeech } from "@tanstack/ai";
+import { createWorkersAiTts } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createWorkersAiTts("@cf/deepgram/aura-2-en", {
+  binding: env.AI,
+});
+
+const result = await generateSpeech({
+  adapter,
+  text: "Hello world",
+});
+
+console.log(result.audio);
+```
+
+### Summarization
+
+```typescript
+import { summarize, type AnySummarizeAdapter } from "@tanstack/ai";
+import { createWorkersAiSummarize } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter: AnySummarizeAdapter = createWorkersAiSummarize("@cf/facebook/bart-large-cnn", {
+  binding: env.AI,
+});
+
+const result = await summarize({
+  adapter,
+  text: "Long article here...",
+});
+
+console.log(result.summary);
+```
+
+## AI Gateway
+
+Route AI requests through Cloudflare's AI Gateway for caching, rate limiting, and unified billing. Supports both Workers AI and third-party providers.
+
+### Workers AI through Gateway
+
+```typescript
+import { createWorkersAiChat } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createWorkersAiChat(
+  "@cf/meta/llama-4-scout-17b-16e-instruct",
+  {
+    binding: env.AI.gateway("my-gateway-id"),
+    apiKey: env.WORKERS_AI_TOKEN,
+  },
+);
+```
+
+### Third-Party Providers through Gateway
+
+Use the binding approach (recommended for Cloudflare Workers):
+
+```typescript
+import {
+  createOpenAiChat,
+  createAnthropicChat,
+  createGeminiChat,
+  createGrokChat,
+  createOpenRouterChat,
+} from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const openai = createOpenAiChat("gpt-4o", {
+  binding: env.AI.gateway("my-gateway-id"),
+});
+
+const anthropic = createAnthropicChat("claude-sonnet-4-5", {
+  binding: env.AI.gateway("my-gateway-id"),
+});
+
+const grok = createGrokChat("grok-4.3", {
+  binding: env.AI.gateway("my-gateway-id"),
+});
+
+const openrouter = createOpenRouterChat("openai/gpt-4o", {
+  binding: env.AI.gateway("my-gateway-id"),
+});
+```
+
+Or use credentials for non-Worker environments:
+
+```typescript
+import { createOpenAiChat } from "@cloudflare/tanstack-ai";
+
+const adapter = createOpenAiChat("gpt-4o", {
+  accountId: "your-account-id",
+  gatewayId: "your-gateway-id",
+  cfApiKey: "your-cf-api-key",
+  apiKey: "provider-api-key",
+});
+```
+
+### Cache Options
+
+Both binding and credentials modes support cache configuration:
+
+```typescript
+import { createOpenAiChat } from "@cloudflare/tanstack-ai";
+import { env } from "./env";
+
+const adapter = createOpenAiChat("gpt-4o", {
+  binding: env.AI.gateway("my-gateway-id"),
+  skipCache: false,
+  cacheTtl: 3600,
+  customCacheKey: "my-key",
+  metadata: { user: "test" },
+});
+```
+
+## Configuration Modes
+
+Workers AI supports four configuration modes:
+
+| Mode | Config | Description |
+|------|--------|-------------|
+| Plain binding | `{ binding: env.AI }` | Direct access, no gateway |
+| Plain REST | `{ accountId, apiKey }` | REST API, no gateway |
+| Gateway binding | `{ binding: env.AI.gateway(id) }` | Through AI Gateway via binding |
+| Gateway REST | `{ accountId, gatewayId, ... }` | Through AI Gateway via REST |
+
+Third-party providers (OpenAI, Anthropic, Gemini, Grok, OpenRouter) only support the gateway modes.
+
+## Supported Capabilities
+
+| Provider | Chat | Summarize | Image Gen | Transcription | TTS |
+|----------|------|-----------|-----------|---------------|-----|
+| **Workers AI** | ✅ | ✅ | ✅ | ✅ | ✅ |
+| **OpenAI** | ✅ | ✅ | ✅ | ✅ | ✅ |
+| **Anthropic** | ✅ | ✅ | ❌ | ❌ | ❌ |
+| **Gemini** | ✅ | ✅ | ✅ | ❌ | ✅ |
+| **Grok** | ✅ | ✅ | ✅ | ❌ | ❌ |
+| **OpenRouter** | ✅ | ✅ | ✅ | ❌ | ❌ |
+
+## Environment Variables
+
+For the REST credential path (outside of Cloudflare Workers):
+
+```bash
+CLOUDFLARE_ACCOUNT_ID=your-account-id
+CLOUDFLARE_API_KEY=your-api-key
+```
+
+When using the `env.AI` binding inside a Worker, no environment variables are needed.
+
+## API Reference
+
+### Workers AI
+
+- `createWorkersAiChat(model, config)` — Chat and structured output
+- `createWorkersAiImage(model, config)` — Image generation
+- `createWorkersAiTranscription(model, config)` — Speech-to-text (Whisper, Deepgram)
+- `createWorkersAiTts(model, config)` — Text-to-speech (Deepgram Aura)
+- `createWorkersAiSummarize(model, config)` — Summarization (BART-large-CNN)
+
+### Gateway Providers
+
+- `createOpenAiChat(model, config)` / `createOpenAiSummarize` / `createOpenAiImage` / `createOpenAiTranscription` / `createOpenAiTts`
+- `createAnthropicChat(model, config)` / `createAnthropicSummarize`
+- `createGeminiChat(model, config)` / `createGeminiSummarize` / `createGeminiImage` / `createGeminiTts`
+- `createGrokChat(model, config)` / `createGrokSummarize` / `createGrokImage`
+- `createOpenRouterChat(model, config)` / `createOpenRouterSummarize` / `createOpenRouterImage`
+
+## Next Steps
+
+- [Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/) — Workers AI documentation
+- [Cloudflare AI Gateway](https://developers.cloudflare.com/ai-gateway/) — AI Gateway documentation
+- [GitHub Repository](https://github.com/cloudflare/ai) — Source code and issues
+- [Streaming Guide](/ai/chat/streaming) — Learn about streaming responses
+- [Tools Guide](/ai/tools/tools) — Learn about tool calling
diff --git a/mintlify/ai/community-adapters/decart.md b/mintlify/ai/community-adapters/decart.md
new file mode 100644
index 000000000..f5db63f7d
--- /dev/null
+++ b/mintlify/ai/community-adapters/decart.md
@@ -0,0 +1,262 @@
+---
+title: Decart
+id: decart-adapter
+order: 2
+description: "Generate images and videos with Decart's AI models in TanStack AI via the Decart community adapter."
+keywords:
+  - tanstack ai
+  - decart
+  - image generation
+  - video generation
+  - community adapter
+---
+
+The Decart adapter provides access to Decart's image and video generation models.
+
+## Installation
+
+```bash
+npm install @decartai/tanstack-ai-adapter
+```
+
+## Basic Usage
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { decartImage } from "@decartai/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: decartImage("lucy-pro-t2i"),
+  prompt: "A serene mountain landscape at sunset",
+});
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { createDecartImage } from "@decartai/tanstack-ai-adapter";
+
+const adapter = createDecartImage("lucy-pro-t2i", process.env.DECART_API_KEY!);
+
+const result = await generateImage({
+  adapter,
+  prompt: "A serene mountain landscape at sunset",
+});
+```
+
+## Configuration
+
+```typescript
+import { createDecartImage, type DecartImageConfig } from "@decartai/tanstack-ai-adapter";
+
+const config: Omit<DecartImageConfig, "apiKey"> = {
+  baseUrl: "https://api.decart.ai", // Optional, for custom endpoints
+};
+
+const adapter = createDecartImage("lucy-pro-t2i", process.env.DECART_API_KEY!, config);
+```
+
+## Image Generation
+
+Generate images with `lucy-pro-t2i`:
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { decartImage } from "@decartai/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: decartImage("lucy-pro-t2i"),
+  prompt: "A futuristic cityscape at night",
+});
+
+console.log(result.images[0]?.b64Json);
+```
+
+### Image Model Options
+
+```typescript
+import { generateImage } from "@tanstack/ai";
+import { decartImage } from "@decartai/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: decartImage("lucy-pro-t2i"),
+  prompt: "A portrait of a robot artist",
+  modelOptions: {
+    resolution: "720p",
+    orientation: "portrait",
+    seed: 42,
+  },
+});
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `resolution` | `"720p"` | `"720p"` | Output resolution |
+| `orientation` | `"portrait" \| "landscape"` | `"landscape"` | Image orientation |
+| `seed` | `number` | - | Seed for reproducible generation |
+
+## Video Generation
+
+Video generation uses an async job/polling architecture.
+
+### Creating a Video Job
+
+```typescript
+import { generateVideo } from "@tanstack/ai";
+import { decartVideo } from "@decartai/tanstack-ai-adapter";
+
+const { jobId } = await generateVideo({
+  adapter: decartVideo("lucy-pro-t2v"),
+  prompt: "A cat playing with a ball of yarn",
+});
+
+console.log("Job started:", jobId);
+```
+
+### Polling for Status
+
+```typescript
+import { getVideoJobStatus } from "@tanstack/ai";
+import { decartVideo } from "@decartai/tanstack-ai-adapter";
+
+const jobId = "example-job-id";
+const status = await getVideoJobStatus({
+  adapter: decartVideo("lucy-pro-t2v"),
+  jobId,
+});
+
+console.log("Status:", status.status); // "pending" | "processing" | "completed" | "failed"
+
+if (status.status === "completed" && status.url) {
+  console.log("Video URL:", status.url);
+}
+```
+
+### Complete Example with Polling
+
+```typescript
+import { generateVideo, getVideoJobStatus } from "@tanstack/ai";
+import { decartVideo } from "@decartai/tanstack-ai-adapter";
+
+async function createVideo(prompt: string) {
+  const adapter = decartVideo("lucy-pro-t2v");
+
+  // Create the job
+  const { jobId } = await generateVideo({ adapter, prompt });
+  console.log("Job created:", jobId);
+
+  // Poll for completion
+  let status = "pending";
+  while (status !== "completed" && status !== "failed") {
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    const result = await getVideoJobStatus({ adapter, jobId });
+    status = result.status;
+    console.log(`Status: ${status}`);
+
+    if (result.status === "failed") {
+      throw new Error("Video generation failed");
+    }
+
+    if (result.status === "completed" && result.url) {
+      return result.url;
+    }
+  }
+}
+
+const videoUrl = await createVideo("A drone shot over a tropical beach");
+```
+
+### Video Model Options
+
+```typescript
+import { generateVideo } from "@tanstack/ai";
+import { decartVideo } from "@decartai/tanstack-ai-adapter";
+
+const { jobId } = await generateVideo({
+  adapter: decartVideo("lucy-pro-t2v"),
+  prompt: "A timelapse of a blooming flower",
+  modelOptions: {
+    resolution: "720p",
+    orientation: "landscape",
+    seed: 42,
+  },
+});
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `resolution` | `"720p" \| "480p"` | `"720p"` | Output resolution |
+| `orientation` | `"portrait" \| "landscape"` | `"landscape"` | Video orientation |
+| `seed` | `number` | - | Seed for reproducible generation |
+
+## Environment Variables
+
+Set your API key in environment variables:
+
+```bash
+DECART_API_KEY=your-api-key-here
+```
+
+## Getting an API Key
+
+1. Go to [Decart Platform](https://platform.decart.ai)
+2. Create an account and generate an API key
+3. Add it to your environment variables
+
+## API Reference
+
+### `decartImage(model, config?)`
+
+Creates a Decart image adapter using environment variables.
+
+**Parameters:**
+
+- `model` - Model name (`"lucy-pro-t2i"`)
+- `config.baseUrl?` - Custom base URL (optional)
+
+**Returns:** A Decart image adapter instance.
+
+### `createDecartImage(model, apiKey, config?)`
+
+Creates a Decart image adapter with an explicit API key.
+
+**Parameters:**
+
+- `model` - Model name (`"lucy-pro-t2i"`)
+- `apiKey` - Your Decart API key
+- `config.baseUrl?` - Custom base URL (optional)
+
+**Returns:** A Decart image adapter instance.
+
+### `decartVideo(model, config?)`
+
+Creates a Decart video adapter using environment variables.
+
+**Parameters:**
+
+- `model` - Model name (`"lucy-pro-t2v"`)
+- `config.baseUrl?` - Custom base URL (optional)
+
+**Returns:** A Decart video adapter instance.
+
+### `createDecartVideo(model, apiKey, config?)`
+
+Creates a Decart video adapter with an explicit API key.
+
+**Parameters:**
+
+- `model` - Model name (`"lucy-pro-t2v"`)
+- `apiKey` - Your Decart API key
+- `config.baseUrl?` - Custom base URL (optional)
+
+**Returns:** A Decart video adapter instance.
+
+## Next Steps
+
+- [Decart Platform](https://platform.decart.ai) - Visit Decart's platform to generate API keys
+- [API Documentation](https://docs.platform.decart.ai) - View complete API reference
+- [GitHub Repository](https://github.com/decartai/tanstack-ai) - Explore the adapter source code
+- [Image Generation Guide](/ai/media/image-generation) - Learn about image generation
+- [Video Generation Guide](/ai/media/video-generation) - Learn about video generation
diff --git a/mintlify/ai/community-adapters/guide.md b/mintlify/ai/community-adapters/guide.md
new file mode 100644
index 000000000..7690cb09a
--- /dev/null
+++ b/mintlify/ai/community-adapters/guide.md
@@ -0,0 +1,217 @@
+---
+title: "Community Adapters Guide"
+slug: /community-adapters/guide
+order: 1
+description: "Build and publish a community adapter for TanStack AI — package conventions, implementing the adapter interface, and publishing to npm."
+keywords:
+  - tanstack ai
+  - community adapters
+  - build adapter
+  - custom adapter
+  - provider integration
+  - adapter authoring
+  - contribute
+---
+
+# Community Adapters Guide
+
+This guide explains how to create and contribute community adapters for the TanStack AI ecosystem.
+
+Community adapters extend TanStack AI by integrating external services, APIs, or custom model logic. They are authored and maintained by the community and can be reused across projects.
+
+## What is a Community Adapter?
+
+A community adapter is a reusable module that connects TanStack AI to an external provider or system.
+
+Common use cases include:
+- Integrating third-party AI model providers
+- Implementing custom inference or routing logic
+- Exposing provider-specific tools or capabilities
+- Connecting to non-LLM AI services (e.g. images, embeddings, video)
+
+Community adapters are **not maintained by the core TanStack AI team**, and can be reused across different projects.
+
+## Creating a Community Adapter
+
+Follow the steps below to build a well-structured, type-safe adapter.
+
+### 1. Set up your project
+
+Start by reviewing the [existing internal adapter implementations in the TanStack AI GitHub repository](https://github.com/tanstack/ai/tree/main/packages). These define the expected structure, conventions, and integration patterns.
+
+For a complete, detailed reference, use the [OpenAI adapter](https://github.com/tanstack/ai/tree/main/packages/ai-openai), which is the most fully featured implementation.
+
+### 2. Define model metadata
+
+Model metadata describes each model’s capabilities and constraints and is used by TanStack AI for compatibility checks and feature selection.
+
+Your metadata should define, at a minimum:
+
+- Model name and identifier
+- Supported input and output modalities
+- Supported features (e.g. streaming, tools, structured output)
+- Pricing or cost information (if available)
+- Any provider-specific notes or limitations
+
+Refer to the [OpenAI adapter’s model metadata](https://github.com/TanStack/ai/blob/main/packages/ai-openai/src/model-meta.ts) for a concrete example.
+
+### 3. Define model capability arrays 
+
+After defining metadata, group models by supported functionality using exported arrays. These arrays allow TanStack AI to automatically select compatible models for a given task.
+
+Example:
+```typescript ignore
+export const OPENAI_CHAT_MODELS = [
+  // Frontier models
+  GPT5_2.name,
+  GPT5_2_PRO.name,
+  GPT5_2_CHAT.name,
+  GPT5_1.name,
+  GPT5_1_CODEX.name,
+  GPT5.name,
+  GPT5_MINI.name,
+  GPT5_NANO.name,
+  GPT5_PRO.name,
+  GPT5_CODEX.name,
+  // ...other models
+] as const
+export const OPENAI_IMAGE_MODELS = [
+  GPT_IMAGE_1.name,
+  GPT_IMAGE_1_MINI.name,
+  DALL_E_3.name,
+  DALL_E_2.name,
+] as const
+
+export const OPENAI_VIDEO_MODELS = [SORA2.name, SORA2_PRO.name] as const
+```
+Each array should only include models that fully support the associated functionality.
+
+### 4. Define model provider options
+
+Each model exposes a different set of configurable options. These options must be typed per model name so that users only see valid configuration options.
+
+Example:
+```typescript ignore
+export type OpenAIChatModelProviderOptionsByName = {
+  [GPT5_2.name]: OpenAIBaseOptions &
+    OpenAIReasoningOptions &
+    OpenAIStructuredOutputOptions &
+    OpenAIToolsOptions &
+    OpenAIStreamingOptions &
+    OpenAIMetadataOptions
+  [GPT5_2_CHAT.name]: OpenAIBaseOptions &
+    OpenAIReasoningOptions &
+    OpenAIStructuredOutputOptions &
+    OpenAIToolsOptions &
+    OpenAIStreamingOptions &
+    OpenAIMetadataOptions
+  // ... repeat for each model
+}
+
+```
+This ensures strict type safety and feature correctness at compile time.
+
+### 5. Define supported input modalities
+
+Models typically support different input modalities (e.g. text, images, audio). These must be defined per model to prevent invalid usage.
+
+Example:
+```typescript ignore
+export type OpenAIModelInputModalitiesByName = {
+  [GPT5_2.name]: typeof GPT5_2.supports.input
+  [GPT5_2_PRO.name]: typeof GPT5_2_PRO.supports.input
+  [GPT5_2_CHAT.name]: typeof GPT5_2_CHAT.supports.input
+  //  ... repeat for each model
+}
+```
+
+### 6. Define model option fragments
+
+Model options should be composed from reusable fragments rather than duplicated per model.
+
+A common pattern is:
+- Base options shared by all models
+- Feature fragments that are stitched together per model
+
+Example (based on [OpenAI models](https://github.com/TanStack/ai/blob/main/packages/ai-openai/src/text/text-provider-options.ts)):
+```typescript
+export interface OpenAIBaseOptions {
+  // base options that every chat model supports
+}
+
+// Feature fragments that can be stitched per-model 
+
+/**
+ * Reasoning options for models  
+ */
+export interface OpenAIReasoningOptions {
+   //...
+}
+ 
+/**
+ * Structured output options for models.
+ */
+export interface OpenAIStructuredOutputOptions {
+  //...
+}
+```
+
+
+Models can then opt into only the features they support:
+
+```typescript ignore
+export type OpenAIChatModelProviderOptionsByName = {
+  [GPT5_2.name]: OpenAIBaseOptions &
+    OpenAIReasoningOptions &
+    OpenAIStructuredOutputOptions &
+    OpenAIToolsOptions &
+    OpenAIStreamingOptions &
+    OpenAIMetadataOptions
+}
+```
+
+There is no single correct composition; this structure should reflect the capabilities of the provider you are integrating.
+
+### 7. Implement adapter logic
+
+Finally, implement the adapter’s runtime logic.
+
+This includes:
+- Sending requests to the external service
+- Handling streaming and non-streaming responses
+- Mapping provider responses to TanStack AI types
+- Enforcing model-specific options and constraints
+
+Adapters are implemented per capability, so only implement what your provider supports:
+
+- Text adapter
+- Chat adapter
+- Image adapter
+- Embeddings adapter
+- Video adapter
+
+Refer to the [OpenAI adapter](https://github.com/TanStack/ai/blob/main/packages/ai-openai/src/adapters/text.ts) for a complete, end-to-end implementation example.
+
+### 8. Publish and submit a PR
+
+Once your adapter is complete:
+1. Publish it as an npm package
+2. Open a PR to the [TanStack AI repository](https://github.com/TanStack/ai/pulls)
+3. Add your adapter to the [Community Adapters list in the documentation](https://github.com/TanStack/ai/tree/main/docs/community-adapters)
+
+### 9. Sync documentation configuration
+
+After adding your adapter, run the  `pnpm run sync-docs-config` in the root of the TanStack AI monorepo. This ensures your adapter appears correctly in the documentation navigation. Open a PR with the generated changes.
+
+### 10. Maintain your adapter
+
+As a community adapter author, you are responsible for ongoing maintenance.
+
+This includes:
+
+- Tracking upstream provider API changes
+- Keeping compatibility with TanStack AI releases
+- Addressing issues and feedback from users
+- Updating documentation when features change
+
+If you add new features or breaking changes, open a follow-up PR to keep the docs in sync.
\ No newline at end of file
diff --git a/mintlify/ai/community-adapters/mynth.md b/mintlify/ai/community-adapters/mynth.md
new file mode 100644
index 000000000..5686bc87c
--- /dev/null
+++ b/mintlify/ai/community-adapters/mynth.md
@@ -0,0 +1,303 @@
+---
+title: Mynth
+id: mynth-adapter
+description: "Generate images with Mynth models like Flux, Recraft, Gemini, Qwen, Seedream, Wan, and Grok Imagine in TanStack AI via the Mynth community adapter."
+keywords:
+  - tanstack ai
+  - mynth
+  - image generation
+  - flux
+  - recraft
+  - qwen
+  - seedream
+  - community adapter
+---
+
+# Mynth
+
+The Mynth adapter gives you access to Mynth image generation models through TanStack AI. It is a community adapter for `generateImage()` with typed model IDs, normalized image results, image-to-image support, and Mynth-specific request options through `modelOptions`.
+
+Mynth is image-only in this package. Reach for it when you want TanStack AI's image generation workflow with Mynth models such as Flux, Recraft, Gemini, Qwen, Seedream, Wan, and Grok Imagine.
+
+Quick note: Mynth is in public beta, so the model lineup and a few request options are still settling. The adapter tracks the Mynth SDK closely, and we welcome feedback on the API and integration experience.
+
+## Installation
+
+```sh
+# bun
+bun add @mynthio/tanstack-ai-adapter @tanstack/ai
+
+# pnpm
+pnpm add @mynthio/tanstack-ai-adapter @tanstack/ai
+
+# npm
+npm install @mynthio/tanstack-ai-adapter @tanstack/ai
+```
+
+The adapter targets `@tanstack/ai` 0.34 and newer.
+
+## Authentication
+
+Set your Mynth API key in the environment:
+
+```sh
+MYNTH_API_KEY=mak_...
+```
+
+Keep `MYNTH_API_KEY` on the server only. Never expose it in browser code or public client environment variables, or it may end up in a client bundle.
+
+You can also pass `apiKey` directly in the adapter config. `baseUrl` is optional and useful for proxies, tests, or custom deployments.
+
+If you need a key, create one in the [Mynth API keys dashboard](https://mynth.io/dashboard/keys).
+
+## Quick Start
+
+```ts
+import { generateImage } from "@tanstack/ai";
+import { mynthImage } from "@mynthio/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: mynthImage("black-forest-labs/flux.2-dev"),
+  prompt: "Editorial product photo of a ceramic mug on a linen tablecloth",
+  numberOfImages: 1,
+  size: "square",
+});
+
+console.log(result.id);
+console.log(result.model);
+console.log(result.images[0]?.url);
+```
+
+TanStack AI adapters are model-bound, so you choose the Mynth model when you create the adapter.
+
+## Reusable Provider
+
+Use `createMynthImage()` when you want to share config across multiple adapters:
+
+```ts
+import { generateImage } from "@tanstack/ai";
+import { createMynthImage } from "@mynthio/tanstack-ai-adapter";
+
+const mynth = createMynthImage({
+  apiKey: process.env.MYNTH_API_KEY!,
+  baseUrl: "https://api.mynth.io",
+});
+
+const result = await generateImage({
+  adapter: mynth("google/gemini-3.1-flash-image"),
+  prompt: "A playful paper-cut illustration of a city park in spring",
+});
+
+console.log(result.images[0]?.url);
+```
+
+You can still override shared config per adapter:
+
+```ts
+import { createMynthImage } from "@mynthio/tanstack-ai-adapter";
+
+const mynth = createMynthImage();
+
+const adapter = mynth("auto", {
+  baseUrl: "https://proxy.example.com",
+});
+```
+
+## Model Options
+
+Use TanStack's top-level fields for common options such as `prompt`, `numberOfImages`, and shorthand `size`. Use `modelOptions` for Mynth-specific options:
+
+```ts
+import { generateImage } from "@tanstack/ai";
+import { mynthImage } from "@mynthio/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: mynthImage("recraft/recraft-v4"),
+  prompt: "Modern poster design for a jazz festival",
+  numberOfImages: 2,
+  size: "portrait",
+  modelOptions: {
+    negativePrompt: "watermark, blurry text",
+    magicPrompt: true,
+    size: {
+      type: "aspect_ratio",
+      aspectRatio: "4:5",
+      scale: "4k",
+    },
+    output: {
+      format: "png",
+      quality: 90,
+    },
+    rating: true,
+    metadata: {
+      requestId: "req_123",
+    },
+  },
+});
+```
+
+Notes:
+
+- `modelOptions.negativePrompt` maps to Mynth's `negative_prompt`, and `modelOptions.magicPrompt` maps to `magic_prompt`
+- `modelOptions.rating` configures content rating on the result. The older `contentRating` name still works as an alias
+- `modelOptions.promptStructured` is still supported for compatibility and expands into `prompt`, `negative_prompt`, and `magic_prompt`. When set, its `positive` overrides the plain `prompt`
+- `modelOptions.size` overrides the top-level `size`. Use it when you need structured Mynth size objects, including aspect ratios and an optional `scale: "4k"`
+- Top-level `size` is for shorthand values such as `"auto"` and preset strings like `"square"` or `"landscape"`
+- `modelOptions.destination` delivers the generation to a configured Mynth destination, overriding any adapter-level or env default
+
+## Image Inputs (image-to-image)
+
+Models that accept image inputs work with TanStack AI's content-part prompts, so you can mix instruction text with reference images for image-to-image, reference-guided, edit, and try-on flows. The adapter maps the image parts onto Mynth's `inputs`:
+
+```ts
+import { generateImage } from "@tanstack/ai";
+import { mynthImage } from "@mynthio/tanstack-ai-adapter";
+
+const result = await generateImage({
+  adapter: mynthImage("black-forest-labs/flux.2-dev"),
+  prompt: [
+    { type: "text", content: "Restyle this scene as a watercolor painting" },
+    {
+      type: "image",
+      source: { type: "url", value: "https://example.com/photo.jpg" },
+    },
+  ],
+});
+```
+
+A few things worth knowing:
+
+- Only models in `MYNTH_IMAGE_INPUT_MODELS` accept image parts. Passing image parts to a text-only model is a compile-time error
+- Both URL sources (`{ type: "url", value }`) and inline data sources (`{ type: "data", value, mimeType }`, encoded as a data URI) are supported
+- A part's `metadata.role` maps to Mynth's input intent. TanStack's `"character"` maps directly, and the other generic roles fall back to Mynth's automatic detection
+- For Mynth's finer-grained intents (`person`, `garment`, `pose`, `style`, `background`, `product`, `object`), pass `modelOptions.inputs` with an explicit `as`
+- Image parts from the prompt and entries in `modelOptions.inputs` are combined, with prompt parts first
+
+## Available Models
+
+The adapter exports a runtime list and a type union for supported image models:
+
+```ts
+import { MYNTH_IMAGE_MODELS, type MynthImageModel } from "@mynthio/tanstack-ai-adapter";
+
+const defaultModel: MynthImageModel = "auto";
+
+for (const model of MYNTH_IMAGE_MODELS) {
+  console.log(model);
+}
+```
+
+This is handy for model selectors, validation, and keeping client and server code in sync. There is a matching `MYNTH_IMAGE_INPUT_MODELS` list (and `MynthImageInputModel` type) for the subset that accepts image inputs.
+
+Mynth supports model IDs across multiple providers, including `auto`, Flux, Recraft, Gemini, Qwen, Seedream, Imagine, Wan, Grok Imagine, and try-on models. The exported list is a fixed snapshot for type safety. For the live catalog with pricing, use the models endpoint below.
+
+### Models endpoint
+
+Mynth exposes a public catalog at `https://api.mynth.io/models`. It does not require an API key, and it carries pricing today with room for more metadata over time. This is the source of truth if you want to render a picker with live pricing rather than the static exported list.
+
+```ts
+const response = await fetch("https://api.mynth.io/models");
+const { data } = await response.json();
+
+for (const model of data) {
+  console.log(model.id, model.displayName, model.pricing);
+}
+```
+
+Each entry looks roughly like this:
+
+```jsonc
+{
+  "id": "black-forest-labs/flux.2-dev",
+  "displayName": "FLUX.2 Dev",
+  "pricing": {
+    "perImage": { "base": "0.01", "4k": "0.04" },
+    "perInput": "0.002",
+  },
+}
+```
+
+If you already use the Mynth SDK, the same data is available through `new Mynth().models.list()`.
+
+## Streaming Example
+
+This adapter also works with TanStack AI's streaming image workflow:
+
+```ts
+import { generateImage, toServerSentEventsResponse } from "@tanstack/ai";
+import { mynthImage } from "@mynthio/tanstack-ai-adapter";
+
+export async function POST(request: Request) {
+  const { prompt, model } = await request.json();
+
+  const stream = generateImage({
+    adapter: mynthImage(model ?? "auto"),
+    prompt,
+    numberOfImages: 1,
+    stream: true,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+For a full example using `useGenerateImage()`, see the [TanStack Start + Mynth adapter demo](https://github.com/mynthio/oss/tree/main/examples/tanstack-start-ai-mynth-adapter).
+
+## Supported Capabilities
+
+- Image generation with `generateImage()`
+- Image-to-image with content-part prompts on input-capable models
+- Streaming image generation with `stream: true`
+- Typed model IDs through `MYNTH_IMAGE_MODELS` and `MynthImageModel`
+- Mynth-specific request options through `modelOptions`
+
+The adapter returns TanStack AI's normalized image result shape:
+
+- `id`: the Mynth task id
+- `model`: the resolved model returned by Mynth, or the requested model as a fallback
+- `images`: only successful images are included
+- `images[*].revisedPrompt`: included when Mynth enhances the prompt
+
+## API Reference
+
+### `mynthImage(model, config?)`
+
+Creates a Mynth image adapter directly.
+
+- `model`: a `MynthImageModel`
+- `config.apiKey?`: optional override for `MYNTH_API_KEY`
+- `config.baseUrl?`: optional base URL override
+- `config.destination?`: optional default destination for generated images
+
+Returns a `MynthImageAdapter` for use with `generateImage()`.
+
+### `createMynthImage(config?)`
+
+Creates a reusable provider factory that returns model-bound adapters.
+
+### `MYNTH_IMAGE_MODELS`
+
+Readonly array of supported Mynth image model IDs.
+
+### `MynthImageModel`
+
+Type union of supported Mynth image model IDs.
+
+### `MYNTH_IMAGE_INPUT_MODELS`
+
+Readonly array of model IDs that accept image inputs (image-to-image, try-on).
+
+### `MynthImageInputModel`
+
+Type union of the model IDs that accept image inputs.
+
+## Limitations
+
+- This package only provides an image adapter for `generateImage()`
+- It does not provide chat or text-generation adapters
+
+## Next Steps
+
+- [Mynth SDK README](https://github.com/mynthio/oss/tree/main/packages/sdk)
+- [TanStack Start + Mynth adapter demo](https://github.com/mynthio/oss/tree/main/examples/tanstack-start-ai-mynth-adapter)
+- [Mynth](https://mynth.io)
diff --git a/mintlify/ai/community-adapters/soniox.md b/mintlify/ai/community-adapters/soniox.md
new file mode 100644
index 000000000..eab0b8c30
--- /dev/null
+++ b/mintlify/ai/community-adapters/soniox.md
@@ -0,0 +1,257 @@
+---
+title: Soniox
+id: soniox-adapter
+order: 3
+description: "Transcribe audio with Soniox speech-to-text models in TanStack AI via the Soniox community adapter."
+keywords:
+  - tanstack ai
+  - soniox
+  - transcription
+  - speech-to-text
+  - asr
+  - community adapter
+---
+
+The Soniox adapter provides access to Soniox transcription models.
+
+## Installation
+
+```bash
+npm install @soniox/tanstack-ai-adapter
+```
+
+## Authentication
+
+Set `SONIOX_API_KEY` in your environment or pass `apiKey` when creating the adapter. Get your API key from the [Soniox Console](https://console.soniox.com).
+
+## Basic Usage
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audioFile } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio: audioFile,
+  modelOptions: {
+    enableLanguageIdentification: true,
+    enableSpeakerDiarization: true,
+  },
+});
+
+console.log(result.text);
+console.log(result.segments);
+```
+
+## Basic Usage - Custom API Key
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { createSonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audioFile } from "./audio";
+
+const adapter = createSonioxTranscription("stt-async-v3", process.env.SONIOX_API_KEY!);
+
+const result = await generateTranscription({
+  adapter,
+  audio: audioFile,
+});
+```
+
+## Adapter Configuration
+
+Use `createSonioxTranscription` to customize the adapter instance:
+
+```typescript
+import { createSonioxTranscription } from "@soniox/tanstack-ai-adapter";
+
+const adapter = createSonioxTranscription("stt-async-v3", process.env.SONIOX_API_KEY!, {
+  baseUrl: "https://api.soniox.com",
+  pollingIntervalMs: 1000,
+  timeout: 180000,
+});
+```
+
+Options:
+
+- `apiKey` - Override `SONIOX_API_KEY` (required when using `createSonioxTranscription`)
+- `baseUrl` - Custom API base URL. Default is `https://api.soniox.com`
+- `headers` - Additional request headers
+- `timeout` - Transcription timeout in milliseconds (default: 180000)
+- `pollingIntervalMs` - Transcription polling interval in milliseconds (default: 1000)
+
+See the [Soniox regional endpoints](https://soniox.com/docs/stt/data-residency#regional-endpoints) if you need data residency.
+
+## Transcription Options
+
+Per-request options are passed via `modelOptions`:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audio } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    languageHints: ["en", "es"],
+    enableLanguageIdentification: true,
+    enableSpeakerDiarization: true,
+    context: {
+      terms: ["Soniox", "TanStack"],
+    },
+  },
+});
+```
+
+Available options:
+
+- `languageHints` - Array of ISO language codes to bias recognition
+- `languageHintsStrict` - When true, rely more heavily on language hints (not supported by all models)
+- `enableLanguageIdentification` - Automatically detect spoken language
+- `enableSpeakerDiarization` - Identify and separate different speakers
+- `context` - Additional context to improve accuracy
+- `clientReferenceId` - Optional client-defined reference ID
+- `webhookUrl` - Webhook URL for completion notifications
+- `webhookAuthHeaderName` - Webhook authentication header name
+- `webhookAuthHeaderValue` - Webhook authentication header value
+- `translation` - Translation configuration
+
+Check the [Soniox API reference](https://soniox.com/docs/stt/api-reference/transcriptions/create_transcription) for more details.
+
+## Language Hints
+
+Soniox automatically detects and transcribes speech in [60+ languages](https://soniox.com/docs/stt/concepts/supported-languages). When you know which languages are likely to appear in your audio, provide `languageHints` to improve accuracy by biasing recognition toward those languages.
+
+Language hints do not restrict recognition. If you pass the TanStack `language` option, this adapter merges it into `languageHints`.
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audio } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    languageHints: ["en", "es"],
+  },
+});
+```
+
+For more details, see the [Soniox language hints documentation](https://soniox.com/docs/stt/concepts/language-hints).
+
+## Context
+
+Provide custom context to improve transcription and translation accuracy. Context helps the model understand your domain, recognize important terms, and apply custom vocabulary.
+
+The `context` object supports four optional sections:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audio } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    context: {
+      general: [
+        { key: "domain", value: "Healthcare" },
+        { key: "topic", value: "Diabetes management consultation" },
+        { key: "doctor", value: "Dr. Martha Smith" },
+      ],
+      text: "The patient has a history of...",
+      terms: ["Celebrex", "Zyrtec", "Xanax"],
+      translationTerms: [
+        { source: "Mr. Smith", target: "Sr. Smith" },
+        { source: "MRI", target: "RM" },
+      ],
+    },
+  },
+});
+```
+
+For more details, see the [Soniox context documentation](https://soniox.com/docs/stt/concepts/context).
+
+## Translation
+
+Configure translation for your transcriptions:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audio } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    translation: {
+      type: "one_way",
+      targetLanguage: "es",
+    },
+  },
+});
+```
+
+For two-way translation:
+
+```typescript
+import { generateTranscription } from "@tanstack/ai";
+import { sonioxTranscription } from "@soniox/tanstack-ai-adapter";
+import { audio } from "./audio";
+
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    translation: {
+      type: "two_way",
+      languageA: "en",
+      languageB: "es",
+    },
+  },
+});
+```
+
+When using translation, the API returns both transcription tokens and translation tokens. The `segments` array always includes only transcription tokens. To access translation tokens, use `providerMetadata` and filter by `translation_status === "translation"`.
+
+### Accessing Raw Tokens
+
+When using translation or working with multilingual audio, you may need access to raw tokens with per-token language information and translation status. The adapter attaches a non-standard `providerMetadata` field at runtime:
+
+```typescript ignore
+// ignore: providerMetadata is a non-standard runtime extension not on TranscriptionResult;
+// accessing it requires a cast that cannot be expressed without `as`.
+const result = await generateTranscription({
+  adapter: sonioxTranscription("stt-async-v3"),
+  audio,
+  modelOptions: {
+    translation: { type: "one_way", targetLanguage: "es" },
+  },
+});
+
+const rawTokens = (result as any).providerMetadata?.soniox?.tokens;
+
+if (rawTokens) {
+  rawTokens.forEach((token) => {
+    // token.text - token text
+    // token.start_ms - start time in milliseconds
+    // token.end_ms - end time in milliseconds
+    // token.language - detected language for this token
+    // token.translation_status - translation status (if translation enabled)
+    // token.speaker - speaker identifier
+    // token.confidence - confidence score
+  });
+}
+```
+
+## Next Steps
+
+- [Soniox Console](https://console.soniox.com) - Manage API keys and projects
+- [Soniox API docs](https://soniox.com/docs) - Complete Soniox API reference
+- [Transcription Guide](/ai/media/transcription) - Learn about transcription in TanStack AI
diff --git a/mintlify/ai/comparison/vercel-ai-sdk.md b/mintlify/ai/comparison/vercel-ai-sdk.md
new file mode 100644
index 000000000..7a04e5100
--- /dev/null
+++ b/mintlify/ai/comparison/vercel-ai-sdk.md
@@ -0,0 +1,755 @@
+---
+title: TanStack AI vs Vercel AI SDK
+id: vercel-ai-sdk
+order: 1
+description: "How TanStack AI compares to the Vercel AI SDK — feature matrix, philosophy, type safety, tool calling, streaming, and framework support."
+keywords:
+  - tanstack ai
+  - vercel ai sdk
+  - comparison
+  - ai sdk
+  - alternatives
+  - typescript ai sdk
+  - tool calling
+  - llm
+---
+
+Both TanStack AI and Vercel AI SDK are open-source TypeScript toolkits for building AI-powered applications. They share common ground - streaming chat, tool calling, multi-provider support, and deploy-anywhere flexibility - but they approach the problem from fundamentally different directions.
+
+TanStack AI treats AI as a **library composition problem**. Every piece - adapters, tools, agent loops, transport, UI - is a composable building block. You import what you need, compose it how you want, and ship it wherever you want. No platform layer, no gateway abstraction, no implicit associations.
+
+Vercel AI SDK treats AI as a **full-stack platform problem**. It provides a broad surface area of primitives with optional platform integration for gateway routing, observability, and deployment optimization.
+
+This article compares the two SDKs from TanStack AI's perspective, with honest acknowledgment of where each excels.
+
+## Feature Comparison
+
+Versions referenced below: TanStack AI as of this writing; Vercel AI SDK `ai@6.x` (v6.0.0 shipped December 2025; v7 is in pre-release at the time of writing).
+
+| Feature | TanStack AI | Vercel AI SDK |
+|---------|------------|---------------|
+| License | MIT | Apache 2.0 |
+| Hosting | Works anywhere | Works anywhere |
+| Providers | 9 official + community; OpenRouter routes to 100s of models and the `openaiCompatible` adapter connects to any OpenAI-compatible endpoint | ~38 first-party provider packages (plus community providers); 100+ models via AI Gateway |
+| Framework Hooks | React, Solid, Svelte, Vue, Preact (+ React Native) | React, Vue, Svelte, Angular (Solid is community-maintained) |
+| Generation UI Hooks | One hook per activity: chat, structured output, image, audio, speech, transcription, summarize, video, realtime | `useChat`, `useCompletion`, `useObject` |
+| Wire Protocol | Native AG-UI events end to end | Proprietary UI Message Stream; AG-UI via external translation layer |
+| Streaming | Built-in with configurable chunk strategies | Built-in with progressive delivery |
+| Tool Calling | Isomorphic `.server()` / `.client()` system | `tool()` objects; client execution via `onToolCall` |
+| Agent Loop Control | Composable strategy functions `(state) => boolean` | `stopWhen` conditions + `Agent` (`ToolLoopAgent`) class |
+| Tool Approval | Per-tool `needsApproval` with batched approval flow | Per-tool `needsApproval` (human-in-the-loop) |
+| Type Safety | Per-model type narrowing | Per-provider types |
+| Tree-Shaking | Separate adapter per activity (text, image, speech, etc.) | Monolithic provider packages |
+| Lazy Tool Discovery | Built-in - works across every provider | Anthropic-only tool search with `deferLoading` (provider-hosted) |
+| Connection Adapters | SSE, HTTP stream, XHR (SSE/stream), RPC, direct async iterables, `fetcher`, custom | SSE-based data stream protocol (`ChatTransport`) |
+| Middleware | App-level lifecycle hooks (config, iterations, chunks, tool calls, usage, errors) | Model-level wrapping via `wrapLanguageModel()` |
+| Extend Adapter | Add custom/fine-tuned models with per-model type narrowing | `customProvider()` / `createProviderRegistry()` (string model ids) |
+| Structured Outputs | Typed `StructuredOutputPart`, streamed alongside tools and preserved per turn in message history | `generateObject()` / `streamObject()` / `Output` API (per-call; no structured-output message part) |
+| Image Generation | Stable API with per-model type safety (OpenAI, Gemini, Grok, OpenRouter, fal.ai) | `generateImage()` (stable) |
+| Video Generation | Stable API with async job lifecycle (OpenAI, fal.ai) | `experimental_generateVideo()` |
+| Text-to-Speech | Stable API, 6 output formats, speed control (OpenAI, Gemini, Grok, ElevenLabs, fal.ai) | `generateSpeech()` (experimental) |
+| Transcription | Stable API with word timestamps and diarization (OpenAI, Grok, ElevenLabs, fal.ai) | `transcribe()` (experimental) |
+| Audio / Music Generation | `generateAudio()` for music & sound effects (Gemini, ElevenLabs, fal.ai) | - |
+| Summarization | Dedicated `summarize()` with streaming and style options | - |
+| Code Execution | Node.js, Cloudflare Workers, QuickJS sandboxes you run yourself | Provider-hosted code-execution tools (Anthropic, xAI, OpenAI) |
+| Code Mode Skills | LLM-writable persistent skill library | - |
+| Coding Agent Sandboxes | First-party Grok Build, Claude Code, Codex, OpenCode harnesses **+ any ACP agent** via `acpCompatible`; runs on local-process, Docker, Daytona, Vercel, Sprites, or Cloudflare | `HarnessAgent` (experimental) — Claude Code, Codex, Pi, OpenCode, Deep Agents; centered on Vercel Sandbox |
+| Realtime Voice | OpenAI, Grok, and ElevenLabs with VAD modes and tool support | - |
+| DevTools | Isomorphic in-app panel via TanStack DevTools (all frameworks, media previews) | `devToolsMiddleware` + local inspector (server-side, dev-only) |
+| Debug Logging | One flag, per-category toggles, pluggable logger | Warning logs + experimental telemetry hooks |
+| MCP Client | Standalone host-side client (`@tanstack/ai-mcp`) + provider-routed `mcpTool()` | Built-in (`@ai-sdk/mcp`, stable) |
+| MCP Apps (Interactive Widgets) | `ui://` widgets via `@mcp-ui/client`; React + Preact + framework-agnostic bridge; multi-server routing, pluggable session store, link-scheme hardening | `experimental_MCPAppRenderer` (React only); model-vs-app tool split; iframe sandbox + allowlist |
+| Platform Association | None - pure library | Optional Vercel integration |
+
+## Where TanStack AI Excels
+
+### Per-Model Type Safety
+
+When you select a provider and model, TypeScript narrows the exact options, capabilities, and input modalities available for that specific model - not a union of everything the provider supports.
+
+Each provider adapter contains a comprehensive `model-meta.ts` that maps every model to its capabilities: supported input modalities, context windows, and provider-specific options. When you write `openaiText('gpt-5.5')`, the type system knows exactly what that model can do.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// TypeScript knows gpt-5.5 supports text + image input
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{
+    role: 'user',
+    content: [
+      { type: 'text', content: 'What is in this image?' },
+      { type: 'image', source: { type: 'url', value: 'https://example.com/photo.jpg' } },
+    ],
+  }],
+})
+```
+
+If you pass an image content part to a text-only model, TypeScript catches it at compile time.
+
+### Tree-Shakeable Adapters
+
+Every AI activity - chat, summarization, image generation, speech, transcription, video - is a separate import. Every provider exposes separate adapter functions per activity. If your app only uses chat, image generation code never enters your bundle.
+
+```ts ignore
+// Only chat code is bundled - nothing else
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// vs. importing activities you actually need
+import { chat, generateImage } from '@tanstack/ai'
+import { openaiText, openaiImage } from '@tanstack/ai-openai'
+```
+
+This is architectural, not incidental. Each adapter implements a specific interface (`TextAdapter`, `ImageAdapter`, `TTSAdapter`, etc.) and lives in its own module. Modern bundlers eliminate everything you don't import.
+
+### Isomorphic Tools
+
+`toolDefinition()` creates a shared contract - name, description, input schema, output schema - that can be implemented for different runtimes. `.server()` adds a server-side implementation with access to databases and APIs. `.client()` adds a client-side implementation that runs in the browser.
+
+```ts
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+import { db } from './db'
+
+// Define once - shared validation contract
+const addToCartDef = toolDefinition({
+  name: 'addToCart',
+  description: 'Add an item to the shopping cart',
+  inputSchema: z.object({
+    itemId: z.string(),
+    quantity: z.number(),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    cartId: z.string(),
+  }),
+})
+
+// Server implementation - database access
+const addToCartServer = addToCartDef.server(async ({ itemId, quantity }) => {
+  const cart = await db.carts.addItem(itemId, quantity)
+  return { success: true, cartId: cart.id }
+})
+
+// Client implementation - runs in the browser
+const addToCartClient = addToCartDef.client(async ({ itemId, quantity }) => {
+  const res = await fetch(`/api/cart`, {
+    method: 'POST',
+    body: JSON.stringify({ itemId, quantity }),
+  })
+  return res.json()
+})
+```
+
+The same schema validates inputs and outputs on both sides. The type system tracks whether a tool is a `ServerTool` or `ClientTool` at compile time.
+
+Vercel AI SDK defines tools with a `tool()` helper and does support client-side execution - a tool with no `execute` function is handled in the browser via the UI hook's `onToolCall` callback, with the result returned through `addToolOutput` (renamed from `addToolResult` in v6). What it doesn't have is a single shared contract that produces separate `.server()` and `.client()` implementations: server and client tool code are declared independently rather than derived from one definition.
+
+### Composable Agent Loop Strategies
+
+TanStack AI provides agent loop control as composable pure functions. Each strategy is `(state) => boolean` - return `true` to continue, `false` to stop.
+
+```ts
+import { chat, maxIterations, untilFinishReason, combineStrategies } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { tools } from './tools'
+
+const messages = [{ role: 'user' as const, content: 'Help me plan a trip.' }]
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  tools,
+  agentLoopStrategy: combineStrategies([
+    maxIterations(10),
+    untilFinishReason(['stop', 'length']),
+  ]),
+})
+```
+
+`combineStrategies` composes them with AND logic - all strategies must agree to continue. You can add custom strategies alongside built-in ones:
+
+```ts
+import { maxIterations, untilFinishReason, combineStrategies } from '@tanstack/ai'
+import { estimatedCost, budget } from './cost'
+
+combineStrategies([
+  maxIterations(10),
+  untilFinishReason(['stop']),
+  // Custom: stop if budget exceeded
+  ({ iterationCount }) => estimatedCost(iterationCount) < budget,
+])
+```
+
+Vercel AI SDK (v5+) controls agent loops via `stopWhen`, which accepts composable stopping conditions like `stepCountIs(n)` and `hasToolCall(name)` (the default is `stepCountIs(20)`), and v6 adds a dedicated `Agent` abstraction (the `ToolLoopAgent` class) that bundles model, tools, instructions, and loop settings into a reusable object. The remaining difference is in the composition model: TanStack AI's strategies are arbitrary `(state) => boolean` predicates you write inline and combine with `combineStrategies`, so a stopping condition can encode any business logic (token budgets, cost ceilings, custom state checks) without waiting for a built-in condition to exist. Vercel's `stopWhen` also accepts custom functions, so the gap here is smaller than it once was.
+
+### Lazy Tool Discovery
+
+When your application has dozens of tools, sending all their schemas to the LLM on every request wastes tokens. TanStack AI solves this with lazy tool discovery.
+
+Mark tools as `lazy: true` and they won't be sent to the LLM initially. Instead, a synthetic discovery tool is injected that lets the LLM request tool schemas on demand:
+
+```ts
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+const searchProducts = toolDefinition({
+  name: 'searchProducts',
+  description: 'Search the product catalog',
+  lazy: true, // Not sent to LLM initially
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
+})
+```
+
+The LLM sees a lightweight `__lazy__tool__discovery__` tool listing available tool names. When it needs one, it calls the discovery tool to get the full schema, then uses the real tool. For applications with large tool inventories, this significantly reduces per-request token costs.
+
+Vercel AI SDK 6 added a provider-specific analogue for Anthropic: the tool search provider tool (`toolSearchBm25` / `toolSearchRegex`) with per-tool `deferLoading`, where deferred tools are excluded from the initial prompt and discovered on demand. It's Anthropic-only and runs provider-side; TanStack AI's lazy discovery works across every provider and runs in your own agent loop.
+
+### Model Context Protocol (MCP)
+
+TanStack AI connects to MCP servers two ways, and you can mix them in a single `chat()` run:
+
+- **Host-side client** (`@tanstack/ai-mcp`) - your server connects directly to any MCP server. `createMCPClient` (single server) and `createMCPClients` (multi-server pool) discover and execute tools, read resources, and fetch prompts over Streamable HTTP, SSE, or stdio transports, with OAuth 2.1 (`authProvider`) and static-token auth.
+- **Provider-routed** (`mcpTool()`) - the *provider* connects to the MCP server on your behalf (OpenAI Responses API, Anthropic), so no MCP traffic flows through your server at all.
+
+The host-side client goes beyond basic discovery:
+
+- **Managed lifecycle** - hand clients to `chat()` via the `mcp` option and it discovers tools and closes connections when the run ends - no `try/finally` per route.
+- **Multi-server pools** - `createMCPClients` connects to many servers in parallel, auto-prefixing each server's tools to prevent name collisions.
+- **Three modes of type safety** - untyped auto-discovery, `toolDefinition()`-typed allowlists with Zod validation, or fully generated per-server types via the `tanstack-ai-mcp` CLI.
+- **Lazy discovery** - `tools({ lazy: true })` defers sending tool schemas to the LLM, plugging into TanStack AI's lazy tool discovery to cut token usage on tool-heavy servers.
+- **Resources & prompts** - inject MCP resources and prompts into a run with `mcpResourceToContentPart` and `mcpPromptToMessages`.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'What tools are available?' }]
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: 'https://my-mcp-server.example.com/mcp' },
+})
+
+// chat() discovers the tools and closes the client when the run ends
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: { clients: [mcp] },
+})
+```
+
+Vercel AI SDK's `@ai-sdk/mcp` (`createMCPClient`) is a stable host-side client with HTTP/SSE transports, OAuth, resource reading, and prompt templates. TanStack AI's `@tanstack/ai-mcp` matches that surface and adds generated end-to-end types, multi-server pools, lazy discovery, a managed `chat()` lifecycle, and the provider-routed `mcpTool()` alternative.
+
+### MCP Apps (Interactive Widgets)
+
+Both SDKs implement [MCP Apps](https://modelcontextprotocol.io) — the ratified MCP extension (standardized 2026-01-26) where a server returns a `ui://` resource so a tool result renders as an interactive widget in a sandboxed iframe instead of raw JSON. Both keep the widget HTML out of model input and render it in a sandboxed iframe with a tool allowlist and safe link handling. TanStack AI's implementation is more built out along three axes:
+
+- **More than one framework.** Widgets render via `@tanstack/ai-react/mcp-apps` and `@tanstack/ai-preact/mcp-apps`, and the bridge that routes widget actions (`createMcpAppBridge`) lives in the framework-agnostic `@tanstack/ai-client`, so a new framework only needs a thin renderer. Vercel's `experimental_MCPAppRenderer` and its bridge live in `@ai-sdk/react` — React only.
+- **Multi-server routing.** Each `UIResourcePart` carries a `serverId` (the pool prefix from `createMCPClients`), and interactive calls route back to the exact server that produced the widget — automatically when you run a multi-server pool. The call handler also enforces an unconditional same-server exposure check (`toolName` must be a tool that server actually exposes) with an optional `allowTool` restriction AND-ed on top.
+- **Session persistence & serverless-safety.** The call handler reconnects per call from a transport descriptor (stateless, serverless-safe by default), and stateful transports opt into a pluggable `McpSessionStore` — an `inMemoryMcpSessionStore` ships, and SQL/KV backends drop in behind the same interface.
+
+```tsx
+import { useChat, useMcpAppBridge } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+import { MCPAppResource } from '@tanstack/ai-react/mcp-apps'
+
+export function Chat() {
+  const { messages, sendMessage } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  // Routes widget tool-calls to /api/mcp-apps/call by serverId; only http/https/mailto links pass through.
+  const bridge = useMcpAppBridge({
+    threadId: 'weather-chat',
+    callEndpoint: '/api/mcp-apps/call',
+    chat: { sendMessage: async (content) => void sendMessage({ content }) },
+    onLink: (url) => window.open(url, '_blank', 'noopener'),
+  })
+
+  return (
+    <>
+      {messages.map((m) =>
+        m.parts.map((part, i) =>
+          part.type === 'ui-resource' ? (
+            <MCPAppResource
+              key={i}
+              part={part}
+              bridge={bridge}
+              sandbox={{ url: new URL('https://your-app.example.com/mcp-sandbox.html') }}
+            />
+          ) : null,
+        ),
+      )}
+    </>
+  )
+}
+```
+
+Vercel AI SDK 7 covers the core flow and adds one thing TanStack AI doesn't: `splitMCPAppTools`, which separates *model-visible* tools from *app-only* tools the widget can call but the model never sees. Both implementations are new — Vercel marks its renderer `experimental_`, and TanStack AI's writeback of widget tool-calls into chat history is still out of scope. See the [MCP Apps guide](/ai/mcp/apps) for the full API.
+
+### Headless Client Architecture
+
+`ChatClient` is a framework-agnostic class that manages the entire chat lifecycle - streaming, message state, tool execution, approval flows, and connection management. Every framework integration wraps this single client:
+
+- `@tanstack/ai-react` - `useChat` hook wraps `ChatClient`
+- `@tanstack/ai-solid` - `useChat` hook wraps `ChatClient`
+- `@tanstack/ai-vue` - `useChat` composable wraps `ChatClient`
+- `@tanstack/ai-svelte` - `createChat` wraps `ChatClient` (Svelte 5 runes)
+- `@tanstack/ai-preact` - `useChat` hook wraps `ChatClient`
+
+No framework-specific logic in the core. If a new framework emerges, it only needs a thin reactive wrapper.
+
+`ChatClient` also accepts a persistence adapter (`ChatClientPersistence`) for saving and restoring conversations client-side, and a typed runtime `context` that flows through to tools and middleware.
+
+### Connection Adapters
+
+TanStack AI ships six built-in connection adapters plus a custom adapter interface:
+
+```ts
+import {
+  fetchServerSentEvents,
+  fetchHttpStream,
+  xhrServerSentEvents,
+  xhrHttpStream,
+  stream,
+  rpcStream,
+} from '@tanstack/ai-client'
+import { chatOnServer } from './server'
+import { api } from './api'
+
+// Server-Sent Events (standard)
+fetchServerSentEvents('/api/chat')
+
+// Raw HTTP streaming (newline-delimited JSON)
+fetchHttpStream('/api/chat')
+
+// XHR-based SSE / HTTP streaming (React Native / Expo, where fetch streaming is unavailable)
+xhrServerSentEvents('/api/chat')
+xhrHttpStream('/api/chat')
+
+// Direct async iterables (TanStack Start server functions)
+stream((messages) => chatOnServer({ messages }))
+
+// RPC-based transport
+rpcStream((messages, data) => api.streamResponse(messages, data))
+
+// Or implement your own ConnectionAdapter
+```
+
+Each adapter accepts static or dynamic (function-based) URLs and options. There's also a lighter-weight `fetcher` option on `ChatClient` / `useChat` for wiring a server function directly without a full adapter. Swap transport without changing application code. Vercel AI SDK centers on its SSE-based data stream protocol and a `ChatTransport` interface for extensibility, but doesn't ship the same breadth of built-in adapters - notably the XHR variants for React Native.
+
+### Extend Adapter
+
+When you use fine-tuned models, OpenAI-compatible proxies, or custom model endpoints, `extendAdapter()` lets you add them to any provider adapter with full type safety:
+
+```ts
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const customModels = [
+  createModel('my-fine-tuned-gpt4', ['text', 'image']),
+  createModel('company-internal-llm', ['text']),
+] as const
+
+const myOpenai = extendAdapter(openaiText, customModels)
+
+// Full autocomplete - original models + custom models
+const adapter = myOpenai('my-fine-tuned-gpt4')
+```
+
+Your custom models appear in autocomplete alongside official ones. Vercel AI SDK covers the registration half of this with the now-stable `customProvider()` (custom and aliased model ids, settings overrides) and `createProviderRegistry()`; the difference is type-safety depth - registry model ids are plain strings, while `extendAdapter()` gives custom models the same literal-type narrowing and per-model option gating as official ones.
+
+### Middleware
+
+TanStack AI's middleware system hooks into every stage of the `chat()` lifecycle: configuration, streaming, tool execution, usage tracking, and completion. Each middleware is a plain object with named hooks that fire at specific phases.
+
+```ts
+import { chat, EventType, type ChatMiddleware, type StreamChunk } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const logger: ChatMiddleware = {
+  name: 'logger',
+  onStart: (ctx) => {
+    console.log(`[${ctx.requestId}] Chat started`)
+  },
+  onChunk: (ctx, chunk) => {
+    // Transform, expand, or drop chunks
+    if ('delta' in chunk && 'messageId' in chunk) {
+      return { ...chunk, delta: chunk.delta!.replace(/\b\d{3}-\d{2}-\d{4}\b/g, '[REDACTED]') }
+    }
+  },
+  onBeforeToolCall: (ctx, hookCtx) => {
+    // Intercept tool calls: transform args, skip, or abort
+    if (hookCtx.toolName === 'deleteDatabase') {
+      return { type: 'abort', reason: 'Dangerous operation blocked' }
+    }
+  },
+  onAfterToolCall: (ctx, info) => {
+    console.log(`${info.toolName}: ${info.ok ? 'success' : 'failed'} in ${info.duration}ms`)
+  },
+  onFinish: (ctx, info) => {
+    console.log(`Done in ${info.duration}ms, ${info.usage?.totalTokens} tokens`)
+  },
+}
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  middleware: [logger],
+})
+```
+
+The available hooks cover the full lifecycle:
+
+| Hook | Purpose |
+|------|---------|
+| `onConfig` | Transform messages, tools, temperature, system prompts per iteration |
+| `onStructuredOutputConfig` | Transform the structured-output schema/config before the call |
+| `onStart` | Setup tasks (timers, logging) |
+| `onIteration` | Observe each agent-loop iteration |
+| `onChunk` | Transform, expand, or drop individual stream chunks |
+| `onBeforeToolCall` | Intercept tool calls: transform args, skip execution, or abort the run |
+| `onAfterToolCall` | Observe tool results, timing, and errors |
+| `onToolPhaseComplete` | Observe the full batch of tool results for an iteration (e.g. aggregate approval state) |
+| `onUsage` | Track token usage per iteration |
+| `onFinish` / `onAbort` / `onError` | Terminal hooks (exactly one fires per run) |
+
+Middleware compose naturally. `onConfig` pipes through each middleware in order. `onChunk` pipes chunks through each middleware (if one drops a chunk, later middleware never see it). `onBeforeToolCall` uses first-win semantics: the first middleware that returns a decision short-circuits the rest.
+
+TanStack AI ships several built-in middleware. `toolCacheMiddleware` and `contentGuardMiddleware` come from the `@tanstack/ai/middlewares` subpath, and `otelMiddleware` from `@tanstack/ai/middlewares/otel` (kept on its own subpath so `@opentelemetry/api` stays an optional peer). `toolCacheMiddleware` caches tool results by name and arguments with configurable TTL, LRU eviction, and pluggable storage backends (Redis, localStorage, etc.).
+
+```ts
+import { toolCacheMiddleware, contentGuardMiddleware } from '@tanstack/ai/middlewares'
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+```
+
+Vercel AI SDK takes a different approach: `wrapLanguageModel()` wraps a model instance with middleware that can intercept and transform calls (and v6 adds `wrapEmbeddingModel()`). It ships several built-in middleware (`extractReasoningMiddleware`, `simulateStreamingMiddleware`, `defaultSettingsMiddleware`, and the new `devToolsMiddleware`), but these all operate at the model level rather than the application level. v6 also exposes per-call options that cover slices of this surface: `experimental_transform` for stream transforms, `experimental_onToolCallStart` / `experimental_onToolCallFinish` callbacks, `prepareStep` for per-step config changes, and `experimental_repairToolCall`. What it doesn't have is a unified middleware system at the application level - named, reusable middleware objects whose hooks span the whole lifecycle, compose in order, and can short-circuit tool calls with first-win semantics.
+
+### No Platform Association
+
+TanStack AI is a pure library. There's no optional platform layer, no gateway abstraction, no hosting-specific features, and no deployment-specific optimizations. Your AI code carries no implicit association with any deployment platform.
+
+This isn't just philosophical - it means no accidental dependencies on platform-specific features, no gateway abstractions that subtly encourage vendor adoption, and no marketing surface embedded in your technical stack.
+
+### Code Execution Sandboxes
+
+TanStack AI provides three isolate drivers for safe code execution in AI workflows:
+
+- **`@tanstack/ai-isolate-node`** - Node.js sandbox via `isolated-vm`
+- **`@tanstack/ai-isolate-cloudflare`** - Cloudflare Workers sandbox
+- **`@tanstack/ai-isolate-quickjs`** - QuickJS lightweight sandbox
+
+All three implement the same `IsolateDriver` interface, so you can swap execution environments without changing application code. This powers TanStack AI's code mode - where the LLM writes and executes code as part of the agent loop. A companion `@tanstack/ai-code-mode-skills` package lets you give code mode a persistent, reusable library of runtime skills. Skills are LLM-writable: the model can save working TypeScript snippets, list and reuse them across sessions, with trust strategies controlling what gets promoted to a first-class tool. The closest AI SDK analogues - Anthropic's provider-hosted code execution and developer-uploaded skills, or pre-authored file skills loaded into a sandbox - are provider-specific and static; none give the model a persistent, provider-agnostic skill library it builds itself.
+
+Vercel AI SDK does not provide built-in code execution sandboxes (though some providers expose their own server-side code execution as provider-executed tools).
+
+### Coding Agent Sandboxes
+
+Separately from the JS isolates above, TanStack AI can put a full **coding-agent CLI** — Claude Code, Codex, Grok Build, OpenCode, or any ACP-compliant agent — inside an isolated sandbox with a real filesystem, shell, and a cloned repo, and stream its work back through `chat()` like any other run. A sandboxed run composes three swappable pieces: a **provider** (where it runs), a **workspace** (what the agent sees), and a **harness adapter** (which agent runs). The sandbox is a `chat()` middleware, so the agent's edits and commands arrive as the same AG-UI stream every `useChat` UI already renders.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { defineSandbox, defineWorkspace, githubRepo, withSandbox } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { messages, threadId } from './chat-context'
+
+const sandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'TanStack/ai' }),
+    packageManager: 'pnpm',
+  }),
+})
+
+const stream = chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+Two axes are open where the AI SDK's is narrower:
+
+- **Any agent, not a fixed list.** Grok Build, Claude Code, Codex, and OpenCode ship as first-party harness packages, and `acpCompatible` (from `@tanstack/ai-acp`) turns *any* [Agent Client Protocol](https://agentclientprotocol.com) agent — `pi`, `gemini --acp`, and [dozens of others](https://agentclientprotocol.com/get-started/agents) — into a harness by describing how to launch it. Adding an agent doesn't require a dedicated adapter to exist.
+- **Any sandbox, not one cloud.** The same run executes on `localProcessSandbox` (host dev loop), `dockerSandbox` (real container isolation), Daytona, Vercel Sandbox, Sprites, or Cloudflare — swap the provider without touching the harness or workspace. Providers declare their `capabilities()` (`fs`, `exec`, `ports`, `snapshots`, `fork`, `durableFilesystem`, …) so code degrades gracefully across them.
+
+Vercel AI SDK 7 added a `HarnessAgent` API for the same idea — running a coding-agent harness in a sandbox and returning AI SDK-compatible `generate()` / `stream()` results. It's marked experimental, ships harnesses for Claude Code, Codex, Pi, OpenCode, and Deep Agents, and the documented path runs them in Vercel Sandbox. There's no generic ACP-compatible escape hatch (each supported harness is its own dedicated package), and sandbox support centers on Vercel's own microVM rather than a provider-swappable contract.
+
+### Media Generation
+
+TanStack AI provides stable, dedicated APIs for every media generation activity - image, video, speech, transcription, and summarization. Each is a separate, tree-shakeable function with its own adapter per provider.
+
+Vercel AI SDK has added several of these capabilities. As of v6, `generateImage()` is stable; video generation is still experimental (`experimental_generateVideo()`); and `generateSpeech()` / `transcribe()` are exported without the `experimental_` prefix but are still documented as experimental features. TanStack AI's media APIs are stable across the board and go further in several areas:
+
+**Image generation** - `generateImage()` with per-model type safety. TypeScript knows that `gpt-image-2` and `dall-e-3` expose different size constraints. Five providers ship adapters: OpenAI (GPT Image, DALL-E), Gemini (Imagen), Grok, OpenRouter, and fal.ai (600+ community models including Flux, SDXL, and more).
+
+```ts
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+const result = await generateImage({
+  adapter: openaiImage('gpt-image-2'),
+  prompt: 'A sunset over mountains',
+  size: '1536x1024',
+  numberOfImages: 1,
+})
+```
+
+**Video generation** - `generateVideo()` handles the full async job lifecycle automatically. Video generation APIs are inherently asynchronous - you submit a job, poll for status, and eventually get a result. TanStack AI manages this entire lifecycle with configurable polling intervals and timeouts, streaming status updates back to the client.
+
+```ts
+import { generateVideo } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+const stream = generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A cat playing piano',
+  size: '1280x720',
+  duration: 8,
+  stream: true,          // Stream job lifecycle events
+  pollingInterval: 2000, // Poll every 2 seconds
+})
+
+for await (const chunk of stream) {
+  // Receive: job created → status updates → final video URL
+}
+```
+
+Vercel AI SDK's `experimental_generateVideo()` returns the video directly without exposing the job lifecycle or streaming status updates.
+
+**Text-to-speech** - `generateSpeech()` supports 6 audio output formats (mp3, opus, aac, flac, wav, pcm), speed control (0.25x to 4x), and five providers: OpenAI (11 voices), Gemini (30+ voices with language hints), Grok, ElevenLabs, and fal.ai.
+
+```ts
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1-hd'),
+  text: 'Hello, world!',
+  voice: 'nova',
+  format: 'opus',
+  speed: 1.2,
+})
+```
+
+**Transcription** - `generateTranscription()` supports common output formats (json, text, srt, verbose_json, vtt), word-level timestamps with confidence scores, and four providers (OpenAI, Grok, ElevenLabs, fal.ai), with speaker diarization via OpenAI's `gpt-4o-transcribe-diarize` model.
+
+```ts
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { audioFile } from './audio'
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('gpt-4o-transcribe'),
+  audio: audioFile,
+  responseFormat: 'verbose_json', // Includes word-level timestamps
+})
+
+// result.words → [{ word: 'Hello', start: 0.0, end: 0.42 }, ...]
+```
+
+**Audio & music generation** - `generateAudio()` generates music and sound effects across Gemini (Lyria), ElevenLabs (music + sound effects), and fal.ai. Vercel AI SDK has no equivalent.
+
+**Summarization** - `summarize()` is a dedicated activity with style control (`bullet-points`, `paragraph`, `concise`), focus topics, and streaming support. Vercel AI SDK has no equivalent - summarization requires calling `generateText()` with a prompt.
+
+**Realtime voice** - `realtimeToken()` enables bidirectional audio streaming with Voice Activity Detection modes (server, semantic, manual), tool calling during voice sessions, and simultaneous audio + text output. Three providers ship realtime adapters: OpenAI (Realtime API), Grok, and ElevenLabs. Vercel AI SDK has no realtime/bidirectional voice primitive - its audio support is batch-only (`generateSpeech` and `transcribe`).
+
+All media activities follow the same adapter pattern as chat - tree-shakeable imports, per-model type safety, and streaming support. If your app only uses chat, none of this media code enters your bundle.
+
+### Native AG-UI Protocol
+
+The events TanStack AI streams between server and client are [AG-UI](https://docs.ag-ui.com/) events (`RUN_STARTED`, `TEXT_MESSAGE_*`, `TOOL_CALL_*`, `RUN_FINISHED`), imported directly from `@ag-ui/core` - not a bespoke format with an AG-UI export bolted on. Anything that speaks AG-UI can sit on either side of the wire: AG-UI-compliant agent frameworks behind a TanStack AI frontend, or a TanStack AI client in front of an agent server written in another language entirely.
+
+Vercel AI SDK streams its own proprietary UI Message Stream protocol. AG-UI interop requires an external translation layer (`@ag-ui/vercel-ai-sdk`, built and maintained by the AG-UI project), and native support remains an open feature request on the AI SDK repo.
+
+### Hooks for Every Activity
+
+Chat isn't the only activity with a hook. Every activity ships one - `useGeneration` (streaming structured output), `useGenerateImage`, `useGenerateAudio`, `useGenerateSpeech`, `useTranscription`, `useSummarize`, `useGenerateVideo`, and `useRealtimeChat` - with the same connection-adapter wiring and devtools integration as `useChat`, across React, Solid, Vue, Svelte, and Preact.
+
+Vercel AI SDK's UI layer has three hooks: `useChat`, `useCompletion`, and `useObject`. Its media functions (`generateImage()`, `experimental_generateVideo()`, speech, transcription) are server-side only - surfacing them in a UI means hand-rolling your own routes and client state.
+
+### Multi-Turn Structured Output
+
+Structured output in TanStack AI is part of the conversation, not a separate call. Pass `outputSchema` to `useChat` and every assistant turn carries its own typed `StructuredOutputPart` - streamed as a `partial`, validated as a `final`, preserved in message history, with the schema generic threading all the way down to `messages[i].parts[j].data`.
+
+Vercel AI SDK's structured output (`generateObject` / `streamObject` / `Output`) is per-call: the typed object lives on the call result, the message-part union has no structured-output type, and combining `useChat` with typed structured output means manually parsing model text into custom data parts.
+
+### Debug Logging
+
+Set `debug: true` on any activity and the pipeline prints itself: raw provider chunks, post-middleware output, middleware hook inputs and outputs, tool execution, agent-loop iterations, config transforms, and request metadata - each category individually toggleable, with a pluggable `logger` for structured output. Vercel AI SDK's built-in logging covers provider warnings; richer observability goes through experimental telemetry hooks or the dev-only DevTools recorder rather than a debug log you can flip on anywhere.
+
+### Community Adapter Ecosystem
+
+TanStack AI publishes an open adapter specification. The community has already built adapters for Decart, Cencori, Cloudflare, Soniox, and Mynth - with a [guide for building your own](/ai/community-adapters/guide). The adapter interface is simple enough that adding a new provider is a focused, self-contained task.
+
+## Where Vercel AI SDK Excels
+
+**Provider breadth.** Vercel AI SDK ships ~38 first-party, individually typed provider packages, plus a large community list. If you want a specific provider as a dedicated, maintained package without writing an adapter, their coverage is broader today. Raw model *count* is not the differentiator, though - TanStack AI's OpenRouter adapter reaches OpenRouter's full catalog (several hundred models), and the `openaiCompatible` adapter connects to any OpenAI-compatible endpoint.
+
+**Angular support.** Vercel AI SDK has an official Angular integration. TanStack AI supports React, Solid, Svelte, Vue, and Preact, but not Angular. (Solid now cuts the other way: AI SDK's Solid package is community-maintained and pinned to an older SDK major, while TanStack AI ships an official, current Solid integration.)
+
+**Agent abstraction.** Vercel AI SDK v6 ships a dedicated `Agent` abstraction (the `ToolLoopAgent` class) that packages a model, tools, instructions, and loop settings into a reusable object with `.generate()` and `.stream()` methods, plus `InferAgentUIMessage` for end-to-end type safety. TanStack AI composes these pieces per call rather than offering a single agent class.
+
+**AI Gateway.** Vercel's optional AI Gateway adds centralized provider management - failover routing, caching, and a single key across providers - integrated with the Vercel platform (and used by default when no provider is configured). TanStack AI ships no gateway of its own; for the same centralized routing across a large model catalog, it recommends its first-class OpenRouter adapter, with no platform association attached.
+
+**React Server Components.** Vercel AI SDK has an RSC integration via `@ai-sdk/rsc` (`AIState`, `StreamableValue`, `streamUI`). Note that Vercel documents this as experimental and recommends AI SDK UI for production - so it's an option for Next.js RSC apps rather than the primary path.
+
+## Side-by-Side: Key Differences
+
+### Tool Definition
+
+**TanStack AI** - Isomorphic definitions with separate runtime implementations:
+
+```ts
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+import { weatherApi } from './weather'
+
+const getWeather = toolDefinition({
+  name: 'getWeather',
+  description: 'Get current weather for a location',
+  inputSchema: z.object({ city: z.string() }),
+  outputSchema: z.object({ temp: z.number(), condition: z.string() }),
+})
+
+// Server implementation
+const getWeatherServer = getWeather.server(async ({ city }) => {
+  const data = await weatherApi.get(city)
+  return { temp: data.temperature, condition: data.condition }
+})
+
+// Client implementation
+const getWeatherClient = getWeather.client(async ({ city }) => {
+  const res = await fetch(`/api/weather?city=${city}`)
+  return res.json()
+})
+```
+
+**Vercel AI SDK** - Tool objects via the `tool()` helper:
+
+```ts
+import { generateText, tool } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { z } from 'zod'
+import { weatherApi } from './weather'
+
+const result = await generateText({
+  model: openai('gpt-5.5'),
+  tools: {
+    getWeather: tool({
+      description: 'Get current weather for a location',
+      inputSchema: z.object({ city: z.string() }),
+      execute: async ({ city }) => {
+        const data = await weatherApi.get(city)
+        return { temp: data.temperature, condition: data.condition }
+      },
+    }),
+  },
+  prompt: "What's the weather in Tokyo?",
+})
+```
+
+The TanStack approach separates the tool contract from its implementation, making tools reusable across server and client contexts.
+
+### Agent Loop Control
+
+**TanStack AI** - Composable strategies:
+
+```ts
+import { chat, combineStrategies, maxIterations, untilFinishReason } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { tools } from './tools'
+import { estimatedTokens } from './cost'
+
+const messages = [{ role: 'user' as const, content: 'Help me plan a trip.' }]
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  tools,
+  agentLoopStrategy: combineStrategies([
+    maxIterations(10),
+    untilFinishReason(['stop']),
+    ({ iterationCount }) => estimatedTokens(iterationCount) < 50_000,
+  ]),
+})
+```
+
+**Vercel AI SDK** - `stopWhen` conditions (v5+):
+
+```ts
+import { generateText, stepCountIs } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { tools } from './tools'
+
+const result = await generateText({
+  model: openai('gpt-5.5'),
+  tools,
+  stopWhen: stepCountIs(10), // also: hasToolCall('name'), or a custom function
+  prompt: 'Help me plan a trip.',
+})
+```
+
+Both let you compose multiple stopping conditions - `stopWhen` accepts an array of conditions including custom functions, and v6 adds a reusable `Agent` class. The remaining nuance is ergonomic: TanStack AI's strategies are plain `(state) => boolean` predicates combined with `combineStrategies`, so token budgets and custom business logic are first-class without reaching for a built-in condition.
+
+### Tree-Shaking
+
+**TanStack AI** - Separate adapters per activity:
+
+```ts
+// Only bundles chat + OpenAI text adapter
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+```
+
+**Vercel AI SDK** - Single provider import:
+
+```ts
+// Provider package includes all model types
+import { openai } from '@ai-sdk/openai'
+```
+
+In TanStack AI, each activity (chat, image, speech, video, transcription, summarization) is a separate adapter function. You import `openaiText` for chat and `openaiImage` for image generation - they're independent modules. Vercel AI SDK's provider packages are more monolithic.
+
+## When to Choose TanStack AI
+
+- **Bundle size matters** - Tree-shakeable adapters per activity mean smaller bundles
+- **AG-UI native** - The wire protocol is AG-UI end to end; interoperate with the agent-UI ecosystem and non-TypeScript agent servers without a translation layer
+- **Solid, Preact, or React Native** - One headless core covers React, Solid, Vue, Svelte, Preact, and React Native (via XHR adapters), all officially maintained
+- **Hooks beyond chat** - `useGeneration`, `useGenerateImage`, `useSummarize`, and the rest of the generation hook family across every supported framework
+- **Isomorphic tools** - Define a tool once and derive `.server()` / `.client()` implementations from one contract
+- **App-level middleware** - Lifecycle hooks for chunks, tool calls, usage, and errors - not just model wrapping
+- **Realtime voice** - Bidirectional audio across OpenAI, Grok, and ElevenLabs
+- **No vendor association** - Pure library with no platform layer
+- **Per-model type safety** - TypeScript narrows options per model, not per provider
+- **Code execution** - Built-in sandboxed execution environments
+- **Coding agent sandboxes** - Run Claude Code, Codex, Grok Build, OpenCode, or any ACP agent in a swappable sandbox (local, Docker, Daytona, Vercel, Sprites, Cloudflare), streamed through `chat()`
+- **Flexible transport** - SSE, HTTP streams, XHR, RPC, direct iterables, or custom adapters
+- **MCP, two ways** - A standalone host-side client (`@tanstack/ai-mcp`) with pools, codegen, and managed `chat()` lifecycle, plus a provider-routed `mcpTool()`
+
+## When to Choose Vercel AI SDK
+
+- **Need a first-party package for a specific provider** - ~38 dedicated, individually typed provider packages today (TanStack reaches comparable model breadth via OpenRouter + `openaiCompatible`)
+- **Angular support** - Official Angular integration
+- **Agent abstraction** - A reusable `Agent` (`ToolLoopAgent`) class with end-to-end UI message types
+- **Vercel platform** - AI Gateway, observability, and deployment optimization
+- **React Server Components** - RSC primitives via `@ai-sdk/rsc` (experimental; AI SDK UI is the recommended production path)
+
+## Getting Started
+
+```bash
+npm install @tanstack/ai @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-openai
+```
+
+See the [Quick Start Guide](/ai/getting-started/quick-start) to build your first chat application, or explore the [full documentation](/ai/getting-started/overview).
diff --git a/mintlify/ai/getting-started/agent-skills.md b/mintlify/ai/getting-started/agent-skills.md
new file mode 100644
index 000000000..b1aeede80
--- /dev/null
+++ b/mintlify/ai/getting-started/agent-skills.md
@@ -0,0 +1,109 @@
+---
+title: Agent Skills (TanStack Intent)
+id: agent-skills
+order: 6
+description: "Use TanStack Intent to wire TanStack AI's bundled Agent Skills into Claude Code, Cursor, GitHub Copilot, and other AI coding assistants."
+keywords:
+  - tanstack ai
+  - tanstack intent
+  - agent skills
+  - claude code
+  - cursor
+  - github copilot
+  - ai coding agents
+  - SKILL.md
+  - AGENTS.md
+---
+
+You're building with TanStack AI and using an AI coding agent — Claude Code, Cursor, GitHub Copilot, or similar. The agent keeps suggesting Vercel-AI-SDK patterns like `streamText()` or `createOpenAI()`, or it wires streams manually instead of using `toServerSentEventsResponse()`. By the end of this guide, your agent will load TanStack AI's bundled skills automatically whenever you work on AI code — and those skills will stay in sync with whichever `@tanstack/ai` version your project installs.
+
+> **Looking for runtime skills inside Code Mode?** Those are a different feature — see [Code Mode with Skills](/ai/code-mode/code-mode-with-skills). This page is about _agent-authoring_ skills: markdown files that teach your coding assistant how TanStack AI works.
+
+## What are Agent Skills?
+
+Agent Skills are markdown documents (`SKILL.md`) that ship inside npm packages and tell AI coding agents how to use a library correctly — which functions to use, which patterns to avoid, and when to reach for which module. The format is an open standard supported by Claude Code, Cursor, GitHub Copilot, Codex, and others.
+
+TanStack AI publishes skills inside its packages so the guidance travels with `npm update` instead of being pinned in a model's training data or copy-pasted into `CLAUDE.md` manually.
+
+## Skills Shipped by TanStack AI
+
+| Package | Skill | What it teaches |
+|---------|-------|-----------------|
+| `@tanstack/ai` | `ai-core` | Chat experience, tool calling, adapters, middleware, structured outputs, media generation, AG-UI protocol, custom backends |
+| `@tanstack/ai-code-mode` | `ai-code-mode` | Setting up Code Mode with a sandbox driver and registering server tools |
+
+Each skill lives under `node_modules/<package>/skills/<skill-name>/SKILL.md` once the package is installed.
+
+## Step 1: Install TanStack AI
+
+If you haven't already, install `@tanstack/ai` plus any adapter packages you need. See the [Quick Start](/ai/getting-started/quick-start) for a full walkthrough.
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openai
+```
+
+## Step 2: Run `intent install`
+
+From the root of your project, run:
+
+```bash
+npx @tanstack/intent@latest install
+```
+
+The CLI walks your agent through the setup. It scans `node_modules` for every package that ships skills (any package with the `tanstack-intent` keyword), asks your agent to propose task-to-skill mappings that match your codebase, and writes them into your agent's config file.
+
+By default the mappings land in `AGENTS.md`. The CLI can also target:
+
+- `CLAUDE.md` — Claude Code
+- `.cursorrules` — Cursor
+- any other agent config file you point it at
+
+## Step 3: Review the Generated Mappings
+
+The install command appends (or creates) an `intent-skills` block that looks like this:
+
+```yaml
+<!-- intent-skills:start -->
+# Skill mappings — when working in these areas, load the linked skill file into context.
+skills:
+  - task: "Building chat, tool calling, adapters, or streaming with TanStack AI"
+    load: "node_modules/@tanstack/ai/skills/ai-core/SKILL.md"
+  - task: "Setting up Code Mode with TanStack AI"
+    load: "node_modules/@tanstack/ai-code-mode/skills/ai-code-mode/SKILL.md"
+<!-- intent-skills:end -->
+```
+
+Check that the `task:` descriptions match areas you actually work in. Tighten or reword them if needed — they're how your agent decides when to pull the skill into context.
+
+## Step 4: Confirm It's Wired Up
+
+Open a fresh session in your coding agent and ask it to build something with TanStack AI — for example: _"Add a streaming chat endpoint using `@tanstack/ai` and the OpenAI adapter."_
+
+You should see:
+
+- The agent uses `chat()`, not `streamText()`.
+- The adapter is imported as `openaiText()` from `@tanstack/ai-openai`, not `createOpenAI()`.
+- The response is wrapped with `toServerSentEventsResponse()` instead of manual SSE wiring.
+- Middleware is used for lifecycle events (no `onFinish` callback on `chat()`).
+
+If the agent still falls back to other-SDK patterns, re-open its config file and confirm the `intent-skills` block is present and the `task:` descriptions clearly cover the area you're asking about.
+
+## Keeping Skills Current
+
+Skills are versioned with the package. When you bump `@tanstack/ai`, the `SKILL.md` files under `node_modules` update with it — no CLI re-run needed. Re-run `npx @tanstack/intent@latest install` only when you _add_ a new intent-enabled package (for example, adding `@tanstack/ai-code-mode` later) or want to refresh the task mappings.
+
+## Using Skills Without the CLI
+
+If you'd rather wire skills in yourself, you can reference them directly from `node_modules` in any agent config file. The minimum your agent needs is a pointer to the file:
+
+```markdown
+When working on TanStack AI code, read and follow:
+node_modules/@tanstack/ai/skills/ai-core/SKILL.md
+```
+
+The CLI is recommended because it discovers packages automatically and stays consistent with the agent-skills standard, but the underlying file paths are stable.
+
+## Learn More
+
+- [TanStack Intent documentation](/intent/overview) — the CLI's full reference, including `scaffold`, `validate`, and CI setup for library maintainers.
+- [Agent Skills registry](https://tanstack.com/intent/registry) — browse other intent-enabled packages.
diff --git a/mintlify/ai/getting-started/devtools.md b/mintlify/ai/getting-started/devtools.md
new file mode 100644
index 000000000..259363da6
--- /dev/null
+++ b/mintlify/ai/getting-started/devtools.md
@@ -0,0 +1,145 @@
+---
+title: Devtools
+id: devtools
+order: 3
+description: "Inspect and debug TanStack AI apps with the TanStack Devtools panel — live chat messages, tool call inputs and outputs, state, and errors."
+keywords:
+  - tanstack ai
+  - devtools
+  - debugging
+  - tool inspection
+  - chat inspector
+  - react devtools
+  - observability
+---
+
+TanStack Devtools is a unified devtools panel for inspecting and debugging TanStack libraries, including TanStack AI. It provides real-time insights into AI interactions, tool calls, and state changes, making it easier to develop and troubleshoot AI-powered applications.
+
+## Features
+- **Hook dashboard** - Discover every active TanStack AI hook on the page, including chat, structured output, image, video, audio, speech, transcription, and summarize hooks.
+- **Run timeline** - Inspect user turns, linked runs, stream events, client snapshots, and server-only events by `threadId` and `runId`.
+- **Real-time Monitoring** - View live chat messages, tool invocations, and AI responses.
+- **Tool Call Inspection** - Inspect input and output of tool calls.
+- **Tool Fixture Replay** - Build tool payloads from a tool's standard-schema input, append the result into chat messages, and save fixtures in localStorage for repeated UI iteration.
+- **State Visualization** - Visualize chat state and message history.
+- **Error Tracking** - Monitor errors and exceptions in AI interactions.
+
+## Hook Dashboard
+
+The AI devtools panel listens for active TanStack AI clients and shows them in the left sidebar. Hooks register when they are created, emit a snapshot immediately, and respond again whenever the devtools panel opens or requests state. This keeps hooks discoverable even when the panel is opened after the app has already rendered.
+
+Each hook entry includes its type, lifecycle, message count, run count, and the latest linked `threadId`. Selecting a hook opens the full timeline for that hook. Chat hooks keep the current turn-based view: a user message wraps every run and event that happened while answering that turn. The details view also includes lightweight client/server state snapshots between runs so you can see exactly what changed.
+
+### Naming Hooks
+
+When a page has more than one AI hook, pass `devtools.name` to give each hook a user-facing label in the dashboard. The configured name is display-only; hook type, framework, thread id, and run correlation still come from the TanStack AI client.
+
+```tsx
+import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
+
+export function SupportChat() {
+  const chat = useChat({
+    id: 'support-chat',
+    connection: fetchServerSentEvents('/api/chat'),
+    devtools: {
+      name: 'Support Chat',
+    },
+  })
+
+  // render your chat UI with `chat.messages`, `chat.sendMessage`, etc.
+}
+```
+
+The same display option works for specialized generation hooks:
+
+```tsx
+import { fetchServerSentEvents, useGenerateImage } from '@tanstack/ai-react'
+
+export function ImageStudio() {
+  const image = useGenerateImage({
+    id: 'generation-hooks:useGenerateImage',
+    connection: fetchServerSentEvents('/api/image'),
+    devtools: {
+      name: 'Image Studio',
+    },
+  })
+
+  // render your image generation UI with `image.generate` and `image.result`
+}
+```
+
+## Tool Fixtures
+
+When a `useChat` hook receives tools, the devtools panel lists those tools and their schemas. For standard-schema-compatible inputs, the panel renders a small form from the input schema so you can create a tool call payload without hand-writing JSON.
+
+Applying a tool fixture appends the tool call and result into the real chat messages for that hook. Saved fixtures are stored in browser localStorage under the AI devtools namespace so they are available the next time you open the panel.
+
+## Event Sources
+
+Client-visible state is emitted by the headless client. Server-only details, such as middleware and provider stream events that never exist on the client, are emitted from the server counterpart. Events include a source descriptor and stable envelope id so the panel can link related events and avoid displaying duplicates.
+
+## Installation
+To use TanStack Devtools with TanStack AI, install the `@tanstack/react-ai-devtools` package:
+
+```bash
+npm install -D @tanstack/react-ai-devtools @tanstack/react-devtools
+```
+
+Or the `@tanstack/solid-ai-devtools` package for SolidJS:
+```bash
+npm install -D @tanstack/solid-ai-devtools @tanstack/solid-devtools
+```
+
+Or the `@tanstack/preact-ai-devtools` package for Preact:
+```bash
+npm install -D @tanstack/preact-ai-devtools @tanstack/preact-devtools
+```
+
+## Usage
+
+Import and include the TanStackDevtools component in your application:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { aiDevtoolsPlugin } from '@tanstack/react-ai-devtools'
+
+const App = () => {
+  return (
+    <>
+       <TanStackDevtools 
+          plugins={[
+            // ... other plugins
+            aiDevtoolsPlugin(),
+          ]}
+          // this config is important to connect to the server event bus
+          eventBusConfig={{
+            connectToServerBus: true,
+          }}
+        />
+    </>
+  )
+}
+```
+
+## Using with Next.js (or without a Vite plugin)
+
+`connectToServerBus: true` relies on a WebSocket/SSE server on port 4206 that is normally started by `@tanstack/devtools-vite`. If you're using Next.js (or any non-Vite bundler), you need to start `ServerEventBus` manually at server boot.
+
+In Next.js, do this in `instrumentation.ts`:
+
+```ts ignore
+export async function register() {
+     if (
+         process.env["NEXT_RUNTIME"] === "nodejs" &&
+         process.env.NODE_ENV === "development"
+     ) {
+         const { ServerEventBus } = await import(
+             "@tanstack/devtools-event-bus/server"
+         );
+         const bus = new ServerEventBus();
+         await bus.start();
+     }
+}
+```
+
+This sets globalThis.__TANSTACK_EVENT_TARGET__ so the server-side devtoolsMiddleware (which runs automatically inside every chat() call) can emit tool call events to the bus, which then forwards them to the devtools panel.
diff --git a/mintlify/ai/getting-started/overview.md b/mintlify/ai/getting-started/overview.md
new file mode 100644
index 000000000..85f7d1ad7
--- /dev/null
+++ b/mintlify/ai/getting-started/overview.md
@@ -0,0 +1,123 @@
+---
+title: Overview
+id: overview
+order: 1
+description: "TanStack AI is a type-safe, provider-agnostic TypeScript SDK for building streaming chat, tool calling, and AI features that work across any framework."
+keywords:
+  - tanstack ai
+  - ai sdk
+  - typescript ai
+  - streaming chat
+  - tool calling
+  - isomorphic tools
+  - framework agnostic
+  - llm sdk
+---
+
+TanStack AI is a lightweight, type-safe SDK for building production-ready AI experiences. Its framework-agnostic core provides type-safe tool/function calling, streaming responses, and first-class React and Solid integrations, with adapters for multiple LLM providers — enabling predictable, composable, and testable AI features across any stack.
+
+## Key Features
+
+- ✅ **Type-Safe** - Full TypeScript support with Zod schema inference
+- ✅ **Streaming** - Built-in streaming support for real-time responses
+- ✅ **Isomorphic Tools** - Define once with `toolDefinition()`, implement with `.server()` or `.client()`
+- ✅ **Framework Agnostic** - Core library works anywhere
+- ✅ **Multiple Providers** - OpenRouter, OpenAI, Anthropic, Gemini, Ollama, and more
+- ✅ **Approval Flow** - Built-in support for tool approval workflows
+- ✅ **Automatic Execution** - Both server and client tools execute automatically
+
+## Framework Agnostic
+
+The framework-agnostic core of TanStack AI provides the building blocks for creating AI experiences in any environment, including:
+
+- **Next.js** - API routes and App Router
+- **TanStack Start** - React Start or Solid Start (recommended!)
+- **React Native / Expo** - Native chat screens with `useChat`, absolute server URLs, and XHR streaming transports
+- **Express** - Node.js server
+- **React Router v7** - Loaders and actions
+
+TanStack AI lets you define a tool once and provide environment-specific implementations. Using `toolDefinition()` to declare the tool's input/output types and the server behavior with `.server()` (or a client implementation with `.client()`). These isomorphic tools can be invoked from the AI runtime regardless of framework.
+
+```typescript
+import { chat, toolDefinition } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+import { db } from './db'
+
+// Define a tool
+const getProductsDef = toolDefinition({
+  name: 'getProducts',
+  description: 'Search for products by query',
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
+})
+
+// Create server implementation
+const getProducts = getProductsDef.server(async ({ query }) => {
+  return await db.products.search(query)
+})
+
+// Use in AI chat
+chat({
+  adapter: openaiText('gpt-5.2'),
+  messages: [{ role: 'user', content: 'Find products' }],
+  tools: [getProducts]
+})
+```
+
+## Core Packages
+
+The TanStack AI ecosystem consists of several packages:
+
+### `@tanstack/ai`
+The core AI library that provides:
+- AI adapter interface for connecting to LLM providers
+- Chat completion and streaming
+- Isomorphic tool/function calling system
+- Agent loop strategies
+- Type-safe tool definitions with `toolDefinition()`
+- Type-safe Model Options based on adapter & model selection
+- Type-safe content modalities (text, image, audio, video, document) based on model capabilities
+
+### `@tanstack/ai-client`
+A framework-agnostic headless client for managing chat state:
+- Message management with full type safety
+- Streaming support
+- Connection adapters (SSE, HTTP stream, custom)
+- Automatic tool execution (server and client)
+- Tool approval flow handling
+
+### `@tanstack/ai-react`
+React hooks for TanStack AI:
+- `useChat` hook for chat interfaces
+- Automatic state management
+- Tool approval flow support
+- Type-safe message handling with `InferChatMessages`
+
+### `@tanstack/ai-solid`
+Solid hooks for TanStack AI:
+- `useChat` hook for chat interfaces
+- Automatic state management
+- Tool approval flow support
+- Type-safe message handling with `InferChatMessages`
+
+## Adapters
+
+With the help of adapters, TanStack AI can connect to various LLM providers. Available adapters include:
+
+- **@tanstack/ai-openrouter** - OpenRouter (300+ models via a single API key — recommended)
+- **@tanstack/ai-openai** - OpenAI (GPT series)
+- **@tanstack/ai-anthropic** - Anthropic (Claude)
+- **@tanstack/ai-gemini** - Google Gemini
+- **@tanstack/ai-ollama** - Ollama (local models)
+- **@tanstack/ai-groq** - Groq
+- **@tanstack/ai-grok** - xAI Grok
+- **@tanstack/ai-bedrock** - Amazon Bedrock (Claude, Nova, Llama, and more via AWS)
+- **@tanstack/ai-fal** - fal (image & video generation)
+
+## Next Steps
+
+- [Quick Start Guide](/ai/getting-started/quick-start) - Get up and running in minutes
+- [Quick Start: React Native](/ai/getting-started/quick-start-react-native) - Add mobile chat with Expo and a server-owned provider boundary
+- [Tools Guide](/ai/tools/tools) - Learn about the isomorphic tool system
+- [API Reference](/ai/api/ai) - Explore the full API
diff --git a/mintlify/ai/getting-started/quick-start-angular.md b/mintlify/ai/getting-started/quick-start-angular.md
new file mode 100644
index 000000000..92e14292d
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start-angular.md
@@ -0,0 +1,224 @@
+---
+title: "Quick Start: Angular"
+id: quick-start-angular
+order: 4
+description: "Build a streaming TanStack AI chat component in an Angular app using the injectChat function and the OpenAI adapter."
+keywords:
+  - tanstack ai
+  - angular
+  - quick start
+  - injectChat
+  - streaming chat
+  - openai
+  - signals
+---
+
+You have an Angular app and want to add AI chat. By the end of this guide, you'll have a streaming chat component powered by TanStack AI and OpenAI.
+
+> **Tip:** If you'd prefer not to sign up with individual AI providers, [OpenRouter](/ai/adapters/openrouter) gives you access to 300+ models with a single API key and is the easiest way to get started.
+
+## Installation
+
+```bash
+npm install @tanstack/ai @tanstack/ai-angular @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-angular @tanstack/ai-openai
+# or
+yarn add @tanstack/ai @tanstack/ai-angular @tanstack/ai-openai
+```
+
+## Server Setup
+
+Angular apps typically use a separate backend. Here's an Express server that streams chat responses:
+
+```typescript ignore
+import express from 'express'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const app = express()
+app.use(express.json())
+
+app.post('/api/chat', async (req, res) => {
+  const { messages } = req.body
+
+  if (!process.env.OPENAI_API_KEY) {
+    res.status(500).json({ error: 'OPENAI_API_KEY not configured' })
+    return
+  }
+
+  try {
+    // `chat()` uses the AG-UI `threadId` for devtools correlation
+    // when available — no need to plumb `conversationId` manually.
+    const stream = chat({
+      adapter: openaiText('gpt-5.5'),
+      messages,
+    })
+
+    const response = toServerSentEventsResponse(stream)
+    res.writeHead(response.status, Object.fromEntries(response.headers))
+
+    const body = response.body
+    if (body) {
+      const reader = body.getReader()
+      const pump = async () => {
+        const { done, value } = await reader.read()
+        if (done) {
+          res.end()
+          return
+        }
+        res.write(value)
+        await pump()
+      }
+      await pump()
+    }
+  } catch (error) {
+    res.status(500).json({
+      error: error instanceof Error ? error.message : 'An error occurred',
+    })
+  }
+})
+
+app.listen(3000, () => console.log('Server running on port 3000'))
+```
+
+> **Tip:** Any backend that returns the TanStack AI SSE format works — you can use Fastify, Hono, Nitro, or any other Node.js framework.
+
+## Client Setup
+
+Create a standalone `ChatComponent` using the `injectChat` function:
+
+```typescript group=quick-start-angular
+import { Component, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { injectChat } from '@tanstack/ai-angular'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+@Component({
+  selector: 'app-chat',
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <div class="chat">
+      <div class="messages">
+        @for (message of chat.messages(); track message.id) {
+          <div [class]="message.role">
+            <strong>{{ message.role === 'assistant' ? 'Assistant' : 'You' }}</strong>
+            @for (part of message.parts; track $index) {
+              @if (part.type === 'text') {
+                <p>{{ part.content }}</p>
+              }
+            }
+          </div>
+        }
+      </div>
+
+      <form (ngSubmit)="handleSubmit()">
+        <input
+          [(ngModel)]="input"
+          name="input"
+          placeholder="Type a message..."
+          [disabled]="chat.isLoading()"
+        />
+        <button
+          type="submit"
+          [disabled]="!input().trim() || chat.isLoading()"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  `,
+})
+export class ChatComponent {
+  // injectChat is called in a field initializer — this is a valid injection context.
+  chat = injectChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  input = signal('')
+
+  handleSubmit() {
+    const text = this.input().trim()
+    if (text && !this.chat.isLoading()) {
+      this.chat.sendMessage(text)
+      this.input.set('')
+    }
+  }
+}
+```
+
+## Environment Variables
+
+Create a `.env` file (or `.env.local` depending on your setup) with your API key:
+
+```bash
+# OpenRouter (recommended — access 300+ models with one key)
+OPENROUTER_API_KEY=sk-or-...
+
+# OpenAI
+OPENAI_API_KEY=your-openai-api-key
+```
+
+Your server reads this key at runtime. Never expose it to the browser.
+
+## Angular-Specific Notes
+
+**State is exposed as Angular `Signal`s.** The `injectChat` function returns state wrapped in read-only `Signal`s. Read them by calling them as functions:
+
+```typescript ignore
+// In component class
+if (this.chat.isLoading()) { /* ... */ }
+const count = this.chat.messages().length
+
+// In template — same syntax, no .value needed
+```
+
+```html
+<!-- In template, call the signal as a function -->
+@if (chat.isLoading()) {
+  <p>Thinking...</p>
+}
+<span>{{ chat.messages().length }} messages</span>
+```
+
+**`injectChat` must be called in an injection context.** Angular's dependency injection requires that `inject()` is called during component construction. The recommended approach is a field initializer (shown above). You can also call it in the constructor or inside `runInInjectionContext`:
+
+```typescript
+import { injectChat } from '@tanstack/ai-angular'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+// Field initializer (recommended)
+export class MyComponentA {
+  chat = injectChat({ connection: fetchServerSentEvents('/api/chat') })
+}
+
+// Constructor
+export class MyComponentB {
+  chat: ReturnType<typeof injectChat>
+  constructor() {
+    this.chat = injectChat({ connection: fetchServerSentEvents('/api/chat') })
+  }
+}
+```
+
+Calling `injectChat` outside an injection context — for example, in a lifecycle hook like `ngOnInit` — will throw a runtime error.
+
+**Automatic cleanup.** The function subscribes to `DestroyRef` internally, so in-flight requests are stopped when the component is destroyed. No manual cleanup needed.
+
+**Same API shape as React and Vue.** If you're coming from `@tanstack/ai-react` or `@tanstack/ai-vue`, `injectChat` returns the same properties (`messages`, `sendMessage`, `isLoading`, `error`, `status`, `stop`, `reload`, `clear`). The only difference is that each property is an Angular `Signal` rather than a React state value or a Vue `ShallowRef`.
+
+## That's It!
+
+You now have a working Angular chat application. The `injectChat` function handles:
+
+- Message state management
+- Streaming responses
+- Loading states
+- Error handling
+
+## Next Steps
+
+- Learn about [Tools](/ai/tools/tools) to add function calling
+- Check out the [Adapters](/ai/adapters/openai) to connect to different providers
+- See the [React Quick Start](/ai/getting-started/quick-start) if you're comparing frameworks
diff --git a/mintlify/ai/getting-started/quick-start-react-native.md b/mintlify/ai/getting-started/quick-start-react-native.md
new file mode 100644
index 000000000..36e16051b
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start-react-native.md
@@ -0,0 +1,305 @@
+---
+title: "Quick Start: React Native"
+id: quick-start-react-native
+order: 3
+description: "Build a React Native or Expo chat screen with TanStack AI's useChat hook, a server-only OpenAI backend, and mobile-compatible streaming transports."
+keywords:
+  - tanstack ai
+  - react native
+  - expo
+  - mobile
+  - useChat
+  - streaming
+  - xhrHttpStream
+  - openai
+---
+
+You have a React Native or Expo app and you want to add streaming AI chat
+without putting provider SDKs or API keys in the native bundle. By the end of
+this guide, your app will call a server-owned Hono route with `useChat` from
+`@tanstack/ai-react`, stream responses over a mobile-compatible transport, and
+keep `OPENAI_API_KEY` / `OPENAI_MODEL` on the server.
+
+> **Coming from the web quick start?** The hook is the same, but the URL and
+> transport are different. React Native needs an absolute backend URL, not
+> `/api/chat`, and most Expo runtimes should start with `xhrHttpStream()`.
+
+## 1. Install packages
+
+If you are starting from scratch, create an Expo app first:
+
+```bash
+npx create-expo-app@latest my-ai-chat
+```
+
+Install TanStack AI, the React hook package, the OpenAI adapter for your
+server, and Hono for the example backend:
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai hono @hono/node-server zod
+```
+
+If your Expo app lives in a workspace, run the command from the app package or
+use your workspace filter.
+
+## 2. Keep OpenAI on the server
+
+Create a Hono route that owns the model, API key, and response format. The
+native app sends chat messages to this route; it never imports
+`@tanstack/ai-openai` and never receives `OPENAI_API_KEY`.
+
+```ts
+// server.ts
+import { serve } from '@hono/node-server'
+import { chat, toHttpResponse, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { Hono } from 'hono'
+import { model } from './config'
+
+const app = new Hono()
+
+function requireOpenAIKey() {
+  if (!process.env.OPENAI_API_KEY) {
+    throw new Error('OPENAI_API_KEY is not configured on the server')
+  }
+}
+
+app.get('/health', (c) => c.json({ ok: true }))
+
+app.post('/chat/http', async (c) => {
+  requireOpenAIKey()
+  const body = await c.req.json()
+  const stream = chat({
+    adapter: openaiText(model),
+    messages: body.messages,
+  })
+
+  return toHttpResponse(stream, {
+    headers: {
+      'Content-Type': 'application/x-ndjson',
+      'Cache-Control': 'no-cache',
+    },
+  })
+})
+
+app.post('/chat/sse', async (c) => {
+  requireOpenAIKey()
+  const body = await c.req.json()
+  const stream = chat({
+    adapter: openaiText(model),
+    messages: body.messages,
+  })
+
+  return toServerSentEventsResponse(stream)
+})
+
+serve({
+  fetch: app.fetch,
+  hostname: '0.0.0.0',
+  port: Number(process.env.PORT ?? 8787),
+})
+```
+
+Set server-only environment variables where the Hono process runs:
+
+```env
+OPENAI_API_KEY=sk-...
+OPENAI_MODEL=gpt-5.2
+```
+
+Run the Hono server before starting the native app. For a TypeScript-only
+example, install `tsx` and add a script:
+
+```bash
+pnpm add -D tsx
+pnpm pkg set scripts.dev:server="tsx server.ts"
+pnpm dev:server
+```
+
+> **Route pairing matters:** `xhrHttpStream()` and `fetchHttpStream()` expect
+> the newline-delimited JSON response from `toHttpResponse()`.
+> `xhrServerSentEvents()` expects the `text/event-stream` response from
+> `toServerSentEventsResponse()`.
+
+## 3. Configure a native-reachable URL
+
+React Native is not served from your backend origin, so `/api/chat` cannot work
+as a default. Expose the backend URL to Expo with a public variable:
+
+```env
+EXPO_PUBLIC_TANSTACK_AI_BASE_URL=http://192.168.1.10:8787
+```
+
+Use the address your device can reach:
+
+- iOS simulator: `http://127.0.0.1:8787` often works.
+- Android emulator: use `http://10.0.2.2:8787`.
+- Physical device: use your computer's LAN IP, for example
+  `http://192.168.1.10:8787`, or a tunneled HTTPS URL.
+
+Only `EXPO_PUBLIC_*` values are bundled into the app. Keep provider keys as
+plain server variables such as `OPENAI_API_KEY`.
+
+## 4. Use `useChat` in your native screen
+
+Start with `xhrHttpStream()` for Expo and React Native. It reads the same
+newline-delimited JSON produced by `toHttpResponse()` and relies on XHR progress
+events, which are usually more reliable on phone runtimes than streaming
+`fetch`.
+
+```tsx
+// ChatScreen.tsx
+import { useState } from 'react'
+import { Button, ScrollView, Text, TextInput, View } from 'react-native'
+import { useChat, xhrHttpStream } from '@tanstack/ai-react'
+
+const baseUrl =
+  process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787'
+
+export function ChatScreen() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, isLoading, error } = useChat({
+    connection: xhrHttpStream(`${baseUrl}/chat/http`),
+  })
+
+  async function send() {
+    const text = input.trim()
+    if (!text || isLoading) return
+    setInput('')
+    await sendMessage(text)
+  }
+
+  return (
+    <View style={{ flex: 1, padding: 24, gap: 12 }}>
+      <ScrollView style={{ flex: 1 }}>
+        {messages.map((message) => (
+          <View key={message.id} style={{ marginBottom: 16 }}>
+            <Text style={{ fontWeight: '700' }}>{message.role}</Text>
+            {message.parts.map((part, index) =>
+              part.type === 'text' ? (
+                <Text key={index}>{part.content}</Text>
+              ) : null,
+            )}
+          </View>
+        ))}
+      </ScrollView>
+
+      {error ? <Text style={{ color: 'crimson' }}>{error.message}</Text> : null}
+
+      <TextInput
+        value={input}
+        onChangeText={setInput}
+        editable={!isLoading}
+        placeholder="Ask for a recipe..."
+        style={{ borderWidth: 1, borderRadius: 8, padding: 12 }}
+      />
+      <Button title={isLoading ? 'Streaming...' : 'Send'} onPress={send} />
+    </View>
+  )
+}
+```
+
+You now have a native chat screen that calls your server endpoint, streams
+assistant text, and keeps provider credentials outside the app.
+
+## 5. Choose a transport deliberately
+
+Use the transport that matches your server route and runtime:
+
+| Native runtime | Client adapter | Server response |
+| --- | --- | --- |
+| Most Expo / React Native apps | `xhrHttpStream(url)` with `/chat/http` | `toHttpResponse(stream)` |
+| SSE-compatible native runtime or proxy path | `xhrServerSentEvents(url)` with `/chat/sse` | `toServerSentEventsResponse(stream)` |
+| Runtime with streaming `fetch` support | `fetchHttpStream(url)` with `/chat/http` | `toHttpResponse(stream)` |
+
+Only use `fetchHttpStream()` when your exact runtime supports all of:
+
+- `Response.body`
+- `Response.body.getReader()`
+- `TextDecoder`
+
+If any of those are missing, the adapter throws
+`UnsupportedResponseStreamError`. A polyfilled `fetch` that buffers the whole
+response is not enough; TanStack AI needs incremental response bytes to update
+the chat while the model is streaming.
+
+For deeper adapter options such as headers, credentials, `withCredentials`, and
+dynamic URLs, see [Connection Adapters](/ai/chat/connection-adapters).
+
+## 6. Try the Expo recipe example
+
+If you are evaluating React Native support, use the included Expo app. It runs a
+local Hono/OpenAI server, shows a transport selector, and streams structured
+recipe cards so you can verify native chat and structured output behavior
+together.
+
+Create `examples/ts-react-native-chat/.env`:
+
+```env
+OPENAI_API_KEY=sk-...
+OPENAI_MODEL=gpt-5.2
+```
+
+Run the example:
+
+```bash
+pnpm --filter ts-react-native-chat dev
+```
+
+The command starts:
+
+- Hono on `0.0.0.0:8787`
+- Expo/Metro in LAN mode
+- `EXPO_PUBLIC_TANSTACK_AI_BASE_URL=http://<lan-ip>:8787` when a LAN address is detected
+
+Scan the Expo Go QR code from a phone on the same Wi-Fi network. In the app,
+use the Testing mode panel to switch between Fetch HTTP, XHR HTTP, and XHR SSE.
+The main recipe card streams structured fields such as title, ingredients,
+steps, tips, warnings, and revision across follow-up prompts.
+
+For example-specific commands and network overrides, see
+`examples/ts-react-native-chat/README.md`.
+
+## Troubleshooting
+
+### `http://localhost:8081` shows JSON
+
+That is normal. Port `8081` is Metro's manifest and bundle server, not a web UI.
+Launch the app from Expo Go, an Android emulator, or an iOS simulator instead.
+
+### A physical device cannot reach the backend
+
+Open `http://<lan-ip>:8787/health` from the phone browser. If it does not return
+`{"ok":true}`, confirm the phone and computer are on the same Wi-Fi network,
+client isolation is disabled, and your firewall allows Node.js on the Hono port
+and Metro port `8081`.
+
+### Android emulator cannot reach `127.0.0.1`
+
+Use `http://10.0.2.2:8787` for
+`EXPO_PUBLIC_TANSTACK_AI_BASE_URL`. Android emulators map `10.0.2.2` to the
+host machine.
+
+### Expo prints Android SDK or `adb` warnings
+
+This is an Android tooling issue, not a TanStack AI transport issue. Confirm
+Android Studio installed the SDK, an emulator exists in Device Manager, and
+`adb` is on `PATH`. On Windows, check
+`%LOCALAPPDATA%\Android\Sdk\platform-tools\adb.exe`.
+
+### The phone logs `UnsupportedResponseStreamError`
+
+Your runtime does not expose streaming `fetch`, `Response.body.getReader()`, or
+`TextDecoder`. Switch from `fetchHttpStream()` to `xhrHttpStream()` or
+`xhrServerSentEvents()`. Do not rely on fetch polyfills unless they provide a
+real incremental readable stream.
+
+### XHR reports a server error
+
+Check the Hono server terminal first. Common causes are missing
+`OPENAI_API_KEY`, an unsupported `OPENAI_MODEL`, or pointing
+`xhrServerSentEvents()` at `/chat/http` instead of `/chat/sse` (or the reverse).
+
+You now have the full React Native path: a server-owned provider boundary, a
+native-reachable URL, a mobile-compatible transport, and an Expo example that
+proves the setup on a real device.
diff --git a/mintlify/ai/getting-started/quick-start-server.md b/mintlify/ai/getting-started/quick-start-server.md
new file mode 100644
index 000000000..bf11cbe43
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start-server.md
@@ -0,0 +1,179 @@
+---
+title: "Quick Start: Server Only"
+id: quick-start-server
+order: 5
+description: "Add a streaming AI chat endpoint to a Node.js backend with TanStack AI — no UI framework required."
+keywords:
+  - tanstack ai
+  - node.js
+  - server
+  - backend
+  - quick start
+  - streaming chat
+  - openai
+  - sse
+---
+
+You have a Node.js backend and want to add AI capabilities. By the end of this guide, you'll have a working chat endpoint powered by TanStack AI and OpenAI -- no UI framework required.
+
+> **Tip:** If you'd prefer not to sign up with individual AI providers, [OpenRouter](/ai/adapters/openrouter) gives you access to 300+ models with a single API key and is the easiest way to get started.
+
+## Installation
+
+```bash
+npm install @tanstack/ai @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-openai
+# or
+yarn add @tanstack/ai @tanstack/ai-openai
+```
+
+## Basic Chat
+
+The simplest way to get a response -- call `chat()` and collect the text:
+
+```typescript
+import { chat, streamToText } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+
+const text = await streamToText(stream)
+console.log(text)
+```
+
+`chat()` returns an `AsyncIterable<StreamChunk>`. `streamToText` consumes it and returns the accumulated text content.
+
+## HTTP Endpoint
+
+Here's an Express server that exposes a streaming chat endpoint using Server-Sent Events:
+
+```typescript ignore
+import express from 'express'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const app = express()
+app.use(express.json())
+
+app.post('/api/chat', async (req, res) => {
+  const { messages } = req.body
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+  })
+
+  const response = toServerSentEventsResponse(stream)
+  res.writeHead(response.status, Object.fromEntries(response.headers))
+
+  const body = response.body
+  if (body) {
+    const reader = body.getReader()
+    const pump = async () => {
+      const { done, value } = await reader.read()
+      if (done) {
+        res.end()
+        return
+      }
+      res.write(value)
+      await pump()
+    }
+    await pump()
+  }
+})
+
+app.listen(3000, () => console.log('Server running on port 3000'))
+```
+
+> **Tip:** Any backend that returns the TanStack AI SSE format works -- you can use Fastify, Hono, or any other Node.js framework.
+
+This endpoint is compatible with TanStack AI's client-side `useChat` hooks (`@tanstack/ai-react`, `@tanstack/ai-vue`, `@tanstack/ai-svelte`), so you can pair it with any frontend later.
+
+## With Tools
+
+Define a server tool with `toolDefinition` and pass it to `chat()`. The agent loop automatically calls your tool and feeds the result back to the model:
+
+```typescript
+import { chat, toolDefinition, streamToText } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+const getWeather = toolDefinition({
+  name: 'getWeather',
+  description: 'Get weather for a city',
+  inputSchema: z.object({ city: z.string() }),
+  outputSchema: z.object({ temp: z.number(), condition: z.string() }),
+}).server(async ({ city }) => {
+  return { temp: 22, condition: 'sunny' }
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Weather in Tokyo?' }],
+  tools: [getWeather],
+})
+
+const text = await streamToText(stream)
+console.log(text)
+```
+
+The model decides when to call `getWeather`, receives the result, and incorporates it into its response -- all within a single `chat()` call.
+
+## Alternative Response Formats
+
+TanStack AI ships several ways to return a stream over HTTP:
+
+**`toHttpResponse()`** returns a `Response` using newline-delimited JSON instead of SSE. Pair it with `fetchHttpStream` on the client:
+
+```typescript
+import { chat, toHttpResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+  })
+  return toHttpResponse(stream)
+}
+```
+
+**Raw stream consumption** -- iterate the `AsyncIterable` directly with `for await`:
+
+```typescript
+import { stream } from './stream'
+
+for await (const chunk of stream) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') {
+    process.stdout.write(chunk.delta ?? '')
+  }
+}
+```
+
+This gives you full control over every chunk type (text deltas, tool calls, run lifecycle events, etc.).
+
+## Environment Variables
+
+Create a `.env` file with your API key:
+
+```bash
+# OpenRouter (recommended — access 300+ models with one key)
+OPENROUTER_API_KEY=sk-or-...
+
+# OpenAI
+OPENAI_API_KEY=your-openai-api-key
+```
+
+The adapter reads `OPENAI_API_KEY` at runtime. Never expose it to the browser.
+
+## Next Steps
+
+- Learn about [Tools](/ai/tools/tools) to add function calling and agent loops
+- Explore [StreamProcessor](/ai/reference/classes/StreamProcessor) for fine-grained stream control
+- Check out the [Adapters](/ai/adapters/openai) to connect to different providers
+- See the [React Quick Start](/ai/getting-started/quick-start) to add a frontend
diff --git a/mintlify/ai/getting-started/quick-start-svelte.md b/mintlify/ai/getting-started/quick-start-svelte.md
new file mode 100644
index 000000000..1f25c34bf
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start-svelte.md
@@ -0,0 +1,165 @@
+---
+title: "Quick Start: Svelte"
+id: quick-start-svelte
+order: 4
+description: "Add a streaming TanStack AI chat component to a SvelteKit app using Svelte 5 runes and the OpenAI adapter."
+keywords:
+  - tanstack ai
+  - svelte
+  - sveltekit
+  - svelte 5
+  - quick start
+  - streaming chat
+  - openai
+  - runes
+---
+
+You have a SvelteKit app and want to add AI chat. By the end of this guide, you'll have a streaming chat component powered by TanStack AI and OpenAI.
+
+> **Tip:** If you'd prefer not to sign up with individual AI providers, [OpenRouter](/ai/adapters/openrouter) gives you access to 300+ models with a single API key and is the easiest way to get started.
+
+## Installation
+
+```bash
+npm install @tanstack/ai @tanstack/ai-svelte @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-svelte @tanstack/ai-openai
+# or
+yarn add @tanstack/ai @tanstack/ai-svelte @tanstack/ai-openai
+```
+
+## Server Setup
+
+Create a SvelteKit API route that streams chat responses:
+
+```typescript ignore
+// src/routes/api/chat/+server.ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import type { RequestHandler } from './$types'
+
+export const POST: RequestHandler = async ({ request }) => {
+  if (!process.env.OPENAI_API_KEY) {
+    return new Response(
+      JSON.stringify({ error: 'OPENAI_API_KEY not configured' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+
+  const body = await request.json()
+
+  try {
+    // `chat()` uses the AG-UI `threadId` for devtools correlation
+    // when available — no need to plumb `conversationId` manually.
+    const stream = chat({
+      adapter: openaiText('gpt-4o'),
+      messages: body.messages,
+    })
+
+    return toServerSentEventsResponse(stream)
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : 'An error occurred',
+      }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+}
+```
+
+> **Tip:** `toServerSentEventsResponse` returns a standard `Response`, so it works with any server that speaks the Web Response API -- SvelteKit, Hono, Cloudflare Workers, etc.
+
+## Client Setup
+
+Create a Svelte 5 component using `createChat`:
+
+```svelte
+<!-- src/routes/+page.svelte -->
+<script lang="ts">
+import { createChat, fetchServerSentEvents } from '@tanstack/ai-svelte'
+
+let input = $state('')
+
+const chat = createChat({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+function handleSubmit() {
+  if (input.trim() && !chat.isLoading) {
+    chat.sendMessage(input)
+    input = ''
+  }
+}
+</script>
+
+<div>
+  {#each chat.messages as message (message.id)}
+    <div>
+      <strong>{message.role === 'assistant' ? 'Assistant' : 'You'}</strong>
+      {#each message.parts as part}
+        {#if part.type === 'text'}
+          <p>{part.content}</p>
+        {/if}
+      {/each}
+    </div>
+  {/each}
+
+  <form onsubmit={handleSubmit}>
+    <input bind:value={input} placeholder="Type a message..." disabled={chat.isLoading} />
+    <button type="submit" disabled={!input.trim() || chat.isLoading}>Send</button>
+  </form>
+</div>
+```
+
+## Environment Variables
+
+Create a `.env` file with your API key:
+
+```bash
+# OpenRouter (recommended -- access 300+ models with one key)
+OPENROUTER_API_KEY=sk-or-...
+
+# OpenAI
+OPENAI_API_KEY=your-openai-api-key
+```
+
+Your SvelteKit server reads this key at runtime. Never expose it to the browser.
+
+## Svelte-Specific Notes
+
+**`createChat`, not `useChat`.** The Svelte integration uses `createChat` instead of `useChat` to follow Svelte's naming conventions. The returned object has the same properties as the React and Vue versions (`messages`, `sendMessage`, `isLoading`, `error`, `status`, `stop`, `reload`, `clear`).
+
+**Svelte 5 runes.** The examples above use Svelte 5 runes (`$state`). The `createChat` return object uses reactive getters internally, so `chat.messages` and `chat.isLoading` are reactive without any extra wrappers -- no `.value` like Vue, no signals to unwrap.
+
+**No automatic cleanup.** Unlike the React and Vue integrations, `createChat` does not register automatic cleanup. If your component can unmount while a response is streaming, call `chat.stop()` in an `onDestroy` callback:
+
+```svelte
+<script lang="ts">
+import { onDestroy } from 'svelte'
+import { createChat, fetchServerSentEvents } from '@tanstack/ai-svelte'
+
+const chat = createChat({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+onDestroy(() => {
+  chat.stop()
+})
+</script>
+```
+
+## That's It!
+
+You now have a working SvelteKit chat application. The `createChat` function handles:
+
+- Message state management
+- Streaming responses
+- Loading states
+- Error handling
+
+## Next Steps
+
+- Learn about [Tools](/ai/tools/tools) to add function calling
+- Check out the [Adapters](/ai/adapters/openai) to connect to different providers
+- See the [React Quick Start](/ai/getting-started/quick-start) if you're comparing frameworks
diff --git a/mintlify/ai/getting-started/quick-start-vue.md b/mintlify/ai/getting-started/quick-start-vue.md
new file mode 100644
index 000000000..15671d1c4
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start-vue.md
@@ -0,0 +1,189 @@
+---
+title: "Quick Start: Vue"
+id: quick-start-vue
+order: 3
+description: "Build a streaming TanStack AI chat component in a Vue 3 app using the useChat composable and the OpenAI adapter."
+keywords:
+  - tanstack ai
+  - vue
+  - vue 3
+  - quick start
+  - useChat
+  - streaming chat
+  - openai
+  - composable
+---
+
+You have a Vue 3 app and want to add AI chat. By the end of this guide, you'll have a streaming chat component powered by TanStack AI and OpenAI.
+
+> **Tip:** If you'd prefer not to sign up with individual AI providers, [OpenRouter](/ai/adapters/openrouter) gives you access to 300+ models with a single API key and is the easiest way to get started.
+
+## Installation
+
+```bash
+npm install @tanstack/ai @tanstack/ai-vue @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-vue @tanstack/ai-openai
+# or
+yarn add @tanstack/ai @tanstack/ai-vue @tanstack/ai-openai
+```
+
+## Server Setup
+
+Vue apps typically use a separate backend. Here's an Express server that streams chat responses:
+
+```typescript ignore
+import express from 'express'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const app = express()
+app.use(express.json())
+
+app.post('/api/chat', async (req, res) => {
+  const { messages } = req.body
+
+  if (!process.env.OPENAI_API_KEY) {
+    res.status(500).json({ error: 'OPENAI_API_KEY not configured' })
+    return
+  }
+
+  try {
+    // `chat()` uses the AG-UI `threadId` for devtools correlation
+    // when available — no need to plumb `conversationId` manually.
+    const stream = chat({
+      adapter: openaiText('gpt-5.5'),
+      messages,
+    })
+
+    const response = toServerSentEventsResponse(stream)
+    res.writeHead(response.status, Object.fromEntries(response.headers))
+
+    const body = response.body
+    if (body) {
+      const reader = body.getReader()
+      const pump = async () => {
+        const { done, value } = await reader.read()
+        if (done) {
+          res.end()
+          return
+        }
+        res.write(value)
+        await pump()
+      }
+      await pump()
+    }
+  } catch (error) {
+    res.status(500).json({
+      error: error instanceof Error ? error.message : 'An error occurred',
+    })
+  }
+})
+
+app.listen(3000, () => console.log('Server running on port 3000'))
+```
+
+> **Tip:** Any backend that returns the TanStack AI SSE format works -- you can use Fastify, Hono, Nitro, or any other Node.js framework.
+
+## Client Setup
+
+Create a `Chat.vue` component using the `useChat` composable:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-vue'
+
+const input = ref('')
+
+const { messages, sendMessage, isLoading } = useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+function handleSubmit() {
+  if (input.value.trim() && !isLoading.value) {
+    sendMessage(input.value)
+    input.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="chat">
+    <div class="messages">
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        :class="message.role"
+      >
+        <strong>{{ message.role === 'assistant' ? 'Assistant' : 'You' }}</strong>
+        <div v-for="(part, idx) in message.parts" :key="idx">
+          <p v-if="part.type === 'text'">{{ part.content }}</p>
+        </div>
+      </div>
+    </div>
+
+    <form @submit.prevent="handleSubmit">
+      <input
+        v-model="input"
+        placeholder="Type a message..."
+        :disabled="isLoading"
+      />
+      <button type="submit" :disabled="!input.trim() || isLoading">
+        Send
+      </button>
+    </form>
+  </div>
+</template>
+```
+
+## Environment Variables
+
+Create a `.env` file (or `.env.local` depending on your setup) with your API key:
+
+```bash
+# OpenRouter (recommended — access 300+ models with one key)
+OPENROUTER_API_KEY=sk-or-...
+
+# OpenAI
+OPENAI_API_KEY=your-openai-api-key
+```
+
+Your server reads this key at runtime. Never expose it to the browser.
+
+## Vue-Specific Notes
+
+**Reactive state uses `ShallowRef`.** The `useChat` composable returns state wrapped in `DeepReadonly<ShallowRef<>>`. In `<script setup>` you must read the underlying value with `.value`. In `<template>` Vue auto-unwraps the ref, so use the bare name:
+
+```vue
+<script setup lang="ts">
+// In script, use .value
+if (isLoading.value) { /* ... */ }
+const count = messages.value.length
+</script>
+
+<template>
+  <!-- In template, Vue unwraps the ref automatically — no .value -->
+  <span v-if="isLoading">Loading...</span>
+  <span>{{ messages.length }} messages</span>
+</template>
+```
+
+**Automatic cleanup.** The composable calls `onScopeDispose` internally, so in-flight requests are stopped when the component unmounts. No manual cleanup needed.
+
+**Same API shape as React.** If you're coming from `@tanstack/ai-react`, the Vue composable returns the same properties (`messages`, `sendMessage`, `isLoading`, `error`, `status`, `stop`, `reload`, `clear`). The only difference is the `ShallowRef` wrapper.
+
+## That's It!
+
+You now have a working Vue chat application. The `useChat` composable handles:
+
+- Message state management
+- Streaming responses
+- Loading states
+- Error handling
+
+## Next Steps
+
+- Learn about [Tools](/ai/tools/tools) to add function calling
+- Check out the [Adapters](/ai/adapters/openai) to connect to different providers
+- See the [React Quick Start](/ai/getting-started/quick-start) if you're comparing frameworks
diff --git a/mintlify/ai/getting-started/quick-start.md b/mintlify/ai/getting-started/quick-start.md
new file mode 100644
index 000000000..39270cda2
--- /dev/null
+++ b/mintlify/ai/getting-started/quick-start.md
@@ -0,0 +1,291 @@
+---
+title: "Quick Start: React"
+id: quick-start
+order: 2
+description: "Add a streaming TanStack AI chat to a React app in minutes using the useChat hook and the OpenAI adapter."
+keywords:
+  - tanstack ai
+  - react
+  - quick start
+  - useChat
+  - streaming chat
+  - openai
+  - tutorial
+  - ai chatbot
+---
+
+Get started with TanStack AI in minutes. This guide will walk you through creating a simple chat application using the React integration and OpenAI adapter.
+
+> **Using a different framework?** See quick-starts for [Vue](/ai/getting-started/quick-start-vue), [Svelte](/ai/getting-started/quick-start-svelte), or [server-only Node.js](/ai/getting-started/quick-start-server).
+
+> **React Native or Expo app?** Use the headless React hooks with an absolute
+> server URL and a mobile-compatible transport. See
+> [Quick Start: React Native](/ai/getting-started/quick-start-react-native).
+
+> **Tip:** If you'd prefer not to sign up with individual AI providers, [OpenRouter](/ai/adapters/openrouter) gives you access to 300+ models with a single API key and is the easiest way to get started.
+
+## Installation
+
+```bash
+npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
+# or
+pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
+#or
+yarn add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
+```
+
+## Server Setup
+
+First, create an API route that handles chat requests. Here's a simplified example:
+
+### TanStack Start
+
+```typescript ignore
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/api/chat")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        // Check for API key
+        if (!process.env.OPENAI_API_KEY) {
+          return new Response(
+            JSON.stringify({
+              error: "OPENAI_API_KEY not configured",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+
+        const body = await request.json();
+
+        try {
+          // Create a streaming chat response. `chat()` reads the AG-UI
+          // `threadId` for devtools correlation when available.
+          const stream = chat({
+            adapter: openaiText("gpt-5.5"),
+            messages: body.messages,
+          });
+
+          // Convert stream to HTTP response
+          return toServerSentEventsResponse(stream);
+        } catch (error) {
+          return new Response(
+            JSON.stringify({
+              error:
+                error instanceof Error ? error.message : "An error occurred",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+      },
+    },
+  },
+});
+```
+
+### Next.js
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+export async function POST(request: Request) {
+  // Check for API key
+  if (!process.env.OPENAI_API_KEY) {
+    return new Response(
+      JSON.stringify({
+        error: "OPENAI_API_KEY not configured",
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+
+  const body = await request.json();
+
+  try {
+    // Create a streaming chat response. `chat()` reads the AG-UI
+    // `threadId` for devtools correlation when available.
+    const stream = chat({
+      adapter: openaiText("gpt-5.5"),
+      messages: body.messages,
+    });
+
+    // Convert stream to HTTP response
+    return toServerSentEventsResponse(stream);
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "An error occurred",
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+}
+```
+
+## Client Setup
+
+To use the chat API from your React frontend, create a `Chat` component:
+
+```tsx
+// components/Chat.tsx
+import { useState } from "react";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+export function Chat() {
+  const [input, setInput] = useState("");
+
+  const { messages, sendMessage, isLoading, error } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim() && !isLoading) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`mb-4 ${
+              message.role === "assistant" ? "text-blue-600" : "text-gray-800"
+            }`}
+          >
+            <div className="font-semibold mb-1">
+              {message.role === "assistant" ? "Assistant" : "You"}
+            </div>
+            <div>
+              {message.parts.map((part, idx) => {
+                if (part.type === "thinking") {
+                  return (
+                    <div
+                      key={idx}
+                      className="text-sm text-gray-500 italic mb-2"
+                    >
+                      💭 Thinking: {part.content}
+                    </div>
+                  );
+                }
+                if (part.type === "text") {
+                  return <div key={idx}>{part.content}</div>;
+                }
+                return null;
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Error */}
+      {error && (
+        <p role="alert" className="px-4 text-red-600">
+          {error.message}
+        </p>
+      )}
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} className="p-4 border-t">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type a message..."
+            className="flex-1 px-4 py-2 border rounded-lg"
+            disabled={isLoading}
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || isLoading}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+```
+
+## Environment Variables
+
+To connect to AI providers, set your API keys in your environment variables. Create a `.env.local` file (or `.env` depending on your setup):
+```bash
+# OpenRouter (recommended — access 300+ models with one key)
+OPENROUTER_API_KEY=sk-or-...
+
+# OpenAI
+OPENAI_API_KEY=your-openai-api-key
+
+# Anthropic
+ANTHROPIC_API_KEY=your-anthropic-api-key
+
+# Google Gemini
+GEMINI_API_KEY=your-gemini-api-key
+```
+
+## That's It!
+
+You now have a working chat application. The `useChat` hook handles:
+
+- Message state management
+- Streaming responses
+- Loading states
+- Error handling
+
+## Using Tools
+
+Since TanStack AI is framework-agnostic, you can define and use tools in any environment. Here's a quick example of defining a tool and using it in a chat:
+
+```typescript
+import { chat, toolDefinition } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+import { db } from './db'
+
+const getProductsDef = toolDefinition({
+  name: 'getProducts',
+  description: 'Search the product catalog',
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
+})
+
+const getProducts = getProductsDef.server(async ({ query }) => {
+  return await db.products.search(query)
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: 'Find products' }],
+  tools: [getProducts],
+})
+```
+
+## Next Steps
+
+- Learn about [Tools](/ai/tools/tools) to add function calling
+- Check out [Client Tools](/ai/tools/client-tools) for frontend operations
+- See the [API Reference](/ai/api/ai) for more options
diff --git a/mintlify/ai/index.mdx b/mintlify/ai/index.mdx
new file mode 100644
index 000000000..47de358a4
--- /dev/null
+++ b/mintlify/ai/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack AI"
+description: "Type-safe, provider-agnostic AI SDK. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Type-safe, provider-agnostic AI SDK.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/ai/getting-started/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/ai">
+    Visit the canonical TanStack AI website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/ai">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/ai/mcp/apps.md b/mintlify/ai/mcp/apps.md
new file mode 100644
index 000000000..80ea623b0
--- /dev/null
+++ b/mintlify/ai/mcp/apps.md
@@ -0,0 +1,473 @@
+---
+title: MCP Apps
+id: mcp-apps
+order: 12
+description: "Render interactive ui:// widget resources returned by MCP servers — static display via UIResourcePart and full interactivity via createMcpAppCallHandler and createMcpAppBridge."
+keywords:
+  - tanstack ai
+  - mcp
+  - mcp apps
+  - ui resource
+  - UIResourcePart
+  - MCPAppResource
+  - createMcpAppCallHandler
+  - createMcpAppBridge
+  - useMcpAppBridge
+  - interactive widgets
+---
+
+**MCP Apps** is a ratified MCP extension (standardized 2026-01-26) that lets MCP servers return interactive `ui://` resource widgets alongside normal tool results. Instead of the model receiving raw JSON, the server embeds a resource URI that TanStack AI fetches and streams to the client as a `UIResourcePart` — ready to render as a full interactive iframe widget.
+
+There are two levels of MCP Apps support:
+
+- **Static** — the MCP tool result contains a `ui://` resource. TanStack AI reads it during the `chat()` run and surfaces it as a `UIResourcePart` on the assistant `UIMessage`. No extra routes needed; render it with `MCPAppResource`.
+- **Interactive** — the widget's iframe posts tool-call or prompt actions back. You mount a server handler (`createMcpAppCallHandler`) at a route and wire a client bridge (`createMcpAppBridge`) so those actions reach the right MCP server.
+
+## Static Widgets
+
+When an MCP tool's result carries a `ui://` resource, TanStack AI emits a `UIResourcePart` on the assistant `UIMessage`. The part is added to the message's `parts` array **alongside** the normal `ToolResultPart` — it never enters model input.
+
+### The `UIResourcePart` shape
+
+```ts
+import type { UIResourcePart } from '@tanstack/ai'
+
+// Arrives on the assistant UIMessage alongside ToolCallPart / ToolResultPart:
+// {
+//   type: 'ui-resource'
+//   resource: { uri: string; mimeType: string; text?: string; blob?: string }
+//   serverId?: string     // pool prefix / config key — routes interactive calls
+//   toolCallId: string    // links to the originating tool call
+//   toolName: string      // MCP tool name whose UI this resource renders
+//   meta?: Record<string, unknown>  // reserved — currently always undefined
+// }
+```
+
+No server-side changes are needed beyond connecting an MCP server that returns `ui://` resources. The resource is read eagerly during the chat run. If the read fails (network error, missing resource), the tool result still flows to the model — the widget is simply absent (**fail-soft**).
+
+### Server route
+
+```ts ignore
+// src/routes/api.chat.ts  (TanStack Start)
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        const mcp = await createMCPClient({
+          transport: {
+            type: 'http',
+            url: process.env.MCP_URL!,
+          },
+        })
+
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages,
+          mcp: { clients: [mcp] },
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+### React client — rendering a static widget
+
+Install the optional peer dependency:
+
+```bash
+pnpm add @mcp-ui/client
+```
+
+Then render each `ui-resource` part from the assistant message.
+
+> **What is `sandbox`?** `sandbox.url` points to a small static **sandbox-proxy HTML page that you host** (e.g. `mcp-sandbox.html` on your own origin). `AppRenderer` loads that page in an isolated iframe and renders the widget inside it — it's the security boundary, so it's a **deploy-time constant, the same for every widget**. It is *not* the widget's address: the widget's identity and HTML come from the message part (`part.resource`, a `ui://…` resource). See [`@mcp-ui/client`](https://mcpui.dev) for the proxy page.
+
+```tsx
+// src/components/Chat.tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+import { MCPAppResource } from '@tanstack/ai-react/mcp-apps'
+import type { UIResourcePart } from '@tanstack/ai'
+
+export function Chat() {
+  const { messages, sendMessage, status } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          {m.parts.map((part, i) => {
+            if (part.type === 'text') {
+              return <p key={i}>{part.content}</p>
+            }
+            if (part.type === 'ui-resource') {
+              return (
+                <MCPAppResource
+                  key={i}
+                  part={part}
+                  // your hosted sandbox-proxy page (a host constant, not the widget URL)
+                  sandbox={{ url: new URL('https://your-app.example.com/mcp-sandbox.html') }}
+                />
+              )
+            }
+            return null
+          })}
+        </div>
+      ))}
+      <button
+        onClick={() => sendMessage({ content: 'Show me the weather widget' })}
+        disabled={status === 'streaming'}
+      >
+        Send
+      </button>
+    </div>
+  )
+}
+```
+
+`MCPAppResource` is powered by `@mcp-ui/client`'s `AppRenderer` under the hood. Without a `bridge` prop the widget renders in display-only mode — user interactions inside the iframe that trigger tool calls or prompts are ignored.
+
+> **Framework support:** React and Preact are shipped (`@tanstack/ai-react/mcp-apps` and `@tanstack/ai-preact/mcp-apps`). Preact requires a `preact/compat` alias. Solid, Vue, Svelte, and Angular wrappers are deferred — `@mcp-ui/client` v7's `AppRenderer` is React-only and a framework-agnostic renderer SDK is future work.
+
+## Interactive Widgets
+
+For widgets that need to call tools or send prompts back to the model, you wire two extra pieces:
+
+1. **Server** — mount `createMcpAppCallHandler` at a POST route. The widget's iframe calls this route.
+2. **Client** — create a `createMcpAppBridge` and pass it to `MCPAppResource`. The bridge routes the iframe's actions (tool calls, prompts, links) to the correct handler.
+
+### Installation
+
+```bash
+pnpm add @tanstack/ai-mcp @tanstack/ai-client @mcp-ui/client
+```
+
+### Server — the call handler route
+
+`createMcpAppCallHandler` from `@tanstack/ai-mcp/apps` accepts the MCP client(s) you already created (a single `MCPClient`, an `MCPClients` pool, or an array of either) and returns a request handler that:
+
+- Resolves each client's transport descriptor via `client.getInfo()` / `pool.getServers()` (pure config — no live socket needed).
+- Reconnects to the MCP server per call using that descriptor (stateless; serverless-safe by default).
+- Checks that the requested `toolName` is actually exposed by that server (same-server allowlist).
+- Calls the tool and returns `{ ok: true, result }` or `{ ok: false, error }`.
+
+```ts ignore
+// src/routes/api.mcp-apps-call.ts  (TanStack Start)
+import { createFileRoute } from '@tanstack/react-router'
+import { createMCPClients } from '@tanstack/ai-mcp'
+import { createMcpAppCallHandler } from '@tanstack/ai-mcp/apps'
+
+// Reuse the same pool you pass to chat({ mcp: { clients: [mcp] } }).
+const mcp = await createMCPClients({
+  weather: {
+    transport: {
+      type: 'http',
+      url: process.env.WEATHER_MCP_URL!,
+      headers: { Authorization: `Bearer ${process.env.WEATHER_MCP_TOKEN ?? ''}` },
+    },
+  },
+})
+
+// clients: a single MCPClient, an MCPClients pool, or an array of either.
+// The handler reads each client's transport descriptor via getInfo()/getServers()
+// and reconnects per call — works in long-lived servers and serverless alike.
+const handler = createMcpAppCallHandler({ clients: mcp })
+
+export const Route = createFileRoute('/api/mcp-apps/call')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        // body: { threadId, serverId, toolName, args?, messageId? }
+        const result = await handler(body)
+        return new Response(JSON.stringify(result), {
+          headers: { 'Content-Type': 'application/json' },
+        })
+      },
+    },
+  },
+})
+```
+
+> **`link` actions need an `onLink` handler.** If the widget emits a `link` action and no `onLink` handler is wired in the bridge, the bridge drops the link (logging a warning) and `openLink` returns `{ isError: true }` — the call does not hang, and the widget cannot open arbitrary URLs in the host page. Pass `onLink` explicitly to opt in.
+>
+> Even with an `onLink` handler, the bridge only forwards `http:`, `https:`, and `mailto:` URLs. Unsafe schemes (`javascript:`, `data:`, `file:`, …) are **always rejected** before your handler runs, so a sandboxed widget can't smuggle a script-executing or local-resource URL through.
+
+#### Same-server allowlist
+
+`createMcpAppCallHandler` always verifies that `toolName` is in the list of tools the target server actually exposes. A request for a tool the server does not know about returns `{ ok: false, error: "Tool not allowed: <name>" }` without ever executing it. This server-exposure check is unconditional and cannot be bypassed.
+
+Use the `allowTool` option to add a further restriction on top. A request must satisfy **both** the server-exposure check and `allowTool` — it is AND-ed, not a replacement for the server check:
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+import { createMcpAppCallHandler } from '@tanstack/ai-mcp/apps'
+
+const mcp = await createMCPClients({
+  weather: { transport: { type: 'http', url: process.env.MCP_URL ?? '' } },
+})
+
+const handler = createMcpAppCallHandler({
+  clients: mcp,
+  // Additional restriction: even if the server exposes more tools,
+  // only allow this specific one through the call handler.
+  allowTool: (req) => req.toolName === 'place_order',
+})
+```
+
+### Chat route — wire the `serverId`
+
+The `serverId` on a `UIResourcePart` comes from the `prefix` you gave the MCP client. Use the same key in both places:
+
+> **Multi-server routing:** interactive calls route by `serverId`, which is each client's `prefix`. `createMCPClients` defaults every server's prefix to its config key, so routing works out of the box. If you pass multiple servers and disable prefixing on one (`prefix: ''`), that server has no `serverId` and its widgets can't make interactive calls — give each interactive server a distinct prefix (the default is fine).
+
+
+```ts ignore
+// src/routes/api.chat.ts
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+
+        // The pool key "weather" becomes the serverId on every UIResourcePart
+        // emitted by this server — must match the key used when constructing
+        // the pool passed to createMcpAppCallHandler.
+        const pool = await createMCPClients({
+          weather: {
+            transport: { type: 'http', url: process.env.WEATHER_MCP_URL! },
+          },
+        })
+
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages: body.messages,
+          mcp: { clients: [pool] },
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+### Client — bridge + interactive render
+
+`createMcpAppBridge` from `@tanstack/ai-client` returns an action handler you pass to `MCPAppResource`. It routes:
+
+- `tool` actions → POST to `callEndpoint` with the tool call payload.
+- `prompt` actions → `chat.sendMessage(prompt)`.
+- `link` actions → `onLink(url)` if provided; dropped (with a warning) otherwise.
+
+In React (or Preact), use the `useMcpAppBridge` hook — it returns a **stable**
+bridge for the given `threadId`/`callEndpoint` and always calls your latest
+`sendMessage`/`onLink`, so you don't hand-write `useMemo` or fight
+`exhaustive-deps`. (The underlying `createMcpAppBridge` from
+`@tanstack/ai-client` is framework-agnostic if you need it directly.)
+
+```tsx
+// src/components/Chat.tsx
+import { useChat, useMcpAppBridge } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+import { MCPAppResource } from '@tanstack/ai-react/mcp-apps'
+
+export function Chat() {
+  // A stable id correlating widget calls back to this conversation.
+  const threadId = 'weather-chat'
+  const { messages, sendMessage, status } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const bridge = useMcpAppBridge({
+    threadId,
+    callEndpoint: '/api/mcp-apps/call',
+    chat: { sendMessage: async (content) => void sendMessage({ content }) },
+    // Opt in to link navigation — absent means links are blocked.
+    onLink: (url) => window.open(url, '_blank', 'noopener'),
+  })
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          {m.parts.map((part, i) => {
+            if (part.type === 'text') {
+              return <p key={i}>{part.content}</p>
+            }
+            if (part.type === 'ui-resource') {
+              return (
+                <MCPAppResource
+                  key={i}
+                  part={part}
+                  bridge={bridge}
+                  // your hosted sandbox-proxy page (a host constant, not the widget URL)
+                  sandbox={{ url: new URL('https://your-app.example.com/mcp-sandbox.html') }}
+                />
+              )
+            }
+            return null
+          })}
+        </div>
+      ))}
+      <button
+        onClick={() => sendMessage({ content: 'Show me the weather widget' })}
+        disabled={status === 'streaming'}
+      >
+        Send
+      </button>
+    </div>
+  )
+}
+```
+
+> **Writeback is client-side.** Widget tool calls do **not** append to the thread's chat history by default. The conversation state writeback path is out of scope for the current release. Each widget interaction is self-contained.
+
+## Session Persistence
+
+The call handler reconnects to the MCP server on every widget action using the transport descriptor it reads from `client.getInfo()` / `pool.getServers()` (**reconnect-per-call** — stateless, serverless-safe). For stateful MCP transports that require a persistent session, opt in to an in-memory session store:
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+import {
+  createMcpAppCallHandler,
+  inMemoryMcpSessionStore,
+} from '@tanstack/ai-mcp/apps'
+
+const mcp = await createMCPClients({
+  weather: { transport: { type: 'http', url: process.env.MCP_URL ?? '' } },
+})
+
+// In-memory store: one Node.js process, no cross-instance sharing.
+// Shape matches the McpSessionStore interface — SQL / KV stores
+// can be dropped in later with no API change.
+const store = inMemoryMcpSessionStore({ ttlMs: 30 * 60_000 })
+
+const handler = createMcpAppCallHandler({ clients: mcp, store })
+```
+
+> **Current limitation:** `inMemoryMcpSessionStore` is single-instance (one Node.js process). It does not survive serverless restarts or scale across replicas. The `McpSessionStore` interface is the persistence extension point — persistent backends (database, KV store) can be dropped in without any API changes.
+
+## API Reference
+
+### `createMcpAppCallHandler` (`@tanstack/ai-mcp/apps`)
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+import { createMcpAppCallHandler } from '@tanstack/ai-mcp/apps'
+import type { McpAppCallHandlerOptions } from '@tanstack/ai-mcp/apps'
+
+const mcp = await createMCPClients({
+  weather: { transport: { type: 'http', url: process.env.MCP_URL ?? '' } },
+})
+
+const options: McpAppCallHandlerOptions = {
+  // Pass the MCP client(s) you already created:
+  //   - a single MCPClient
+  //   - an MCPClients pool  (pool key = serverId on UIResourcePart)
+  //   - an array of either
+  // The handler reads each client's transport descriptor via
+  // client.getInfo() / pool.getServers() (pure config, no live socket)
+  // and reconnects per call — serverless-safe by default.
+  clients: mcp,
+
+  // Dynamic session store (opt-in for stateful transports)
+  // store: inMemoryMcpSessionStore(),
+
+  // Custom tool allowlist — default: server's own exposed tools only
+  // AND-ed on top of the always-on same-server exposure check.
+  allowTool: (req) => req.toolName === 'get_weather',
+}
+
+// Returns: (req) => Promise<{ ok: true; result: unknown } | { ok: false; error: string }>
+const handler = createMcpAppCallHandler(options)
+```
+
+### `inMemoryMcpSessionStore` (`@tanstack/ai-mcp/apps`)
+
+```ts
+import { inMemoryMcpSessionStore } from '@tanstack/ai-mcp/apps'
+
+const store = inMemoryMcpSessionStore({
+  ttlMs: 30 * 60_000, // optional; default: 30 minutes
+})
+```
+
+### `createMcpAppBridge` (`@tanstack/ai-client`)
+
+```ts
+import { createMcpAppBridge } from '@tanstack/ai-client'
+import type { CreateMcpAppBridgeOptions } from '@tanstack/ai-client'
+
+const options: CreateMcpAppBridgeOptions = {
+  threadId: 'weather-chat', // identifies the thread for the call handler
+  callEndpoint: '/api/mcp-apps/call', // POST route mounting createMcpAppCallHandler
+  chat: { sendMessage: async (text) => console.log(text) }, // prompt-intent path
+  fetchImpl: fetch, // optional; injectable for testing
+  onLink: (url) => window.open(url, '_blank'), // absent → link is dropped (warned), openLink returns { isError: true }
+}
+
+// Returns an McpAppBridge with callTool / sendPrompt / openLink methods.
+const bridge = createMcpAppBridge(options)
+```
+
+### `useMcpAppBridge` (`@tanstack/ai-react` / `@tanstack/ai-preact`)
+
+The React/Preact wrapper around `createMcpAppBridge`. Returns a bridge that is
+**stable** for a given `threadId`/`callEndpoint` (so it won't churn `MCPAppResource`
+on every render) while always invoking the latest `chat.sendMessage`/`onLink`.
+Takes the same options as `createMcpAppBridge`.
+
+```tsx
+import { useChat, useMcpAppBridge } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+function useBridge(threadId: string) {
+  const { sendMessage } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+  return useMcpAppBridge({
+    threadId,
+    callEndpoint: '/api/mcp-apps/call',
+    chat: { sendMessage: async (content) => void sendMessage({ content }) },
+    onLink: (url) => window.open(url, '_blank', 'noopener'),
+  })
+}
+```
+
+### `MCPAppResource` (`@tanstack/ai-react/mcp-apps`)
+
+```tsx
+import { MCPAppResource } from '@tanstack/ai-react/mcp-apps'
+// `part` is a UIResourcePart from the assistant message; `bridge` is a
+// createMcpAppBridge result — both supplied by your component (see examples above).
+import { part, bridge } from './chat-context'
+
+const widget = (
+  <MCPAppResource
+    part={part} // UIResourcePart from the assistant message (carries the toolName)
+    sandbox={{ url: new URL('https://your-app.example.com/mcp-sandbox.html') }} // your hosted sandbox-proxy page (host constant; not the widget's ui:// URL)
+    bridge={bridge} // omit for static, display-only rendering
+    toolInput={{ city: 'Brooklyn' }} // optional tool input for the renderer context
+  />
+)
+```
+
+Preact: identical API from `@tanstack/ai-preact/mcp-apps` (requires `preact/compat` alias).
diff --git a/mintlify/ai/media/audio-generation.md b/mintlify/ai/media/audio-generation.md
new file mode 100644
index 000000000..d49b8e7c5
--- /dev/null
+++ b/mintlify/ai/media/audio-generation.md
@@ -0,0 +1,245 @@
+---
+title: Audio Generation
+id: audio-generation
+order: 15
+---
+
+# Audio Generation
+
+TanStack AI's `generateAudio()` activity produces audio content — music, soundscapes, or sound effects — from a text prompt. It's distinct from [Text-to-Speech](/ai/media/text-to-speech), which is optimized for spoken-word synthesis.
+
+## Overview
+
+Audio generation is handled by audio adapters that follow the same tree-shakeable architecture as other adapters in TanStack AI.
+
+Currently supported:
+
+- **Google Gemini**: Lyria 3 Pro and Lyria 3 Clip music generation
+- **fal.ai**: MiniMax Music, DiffRhythm, Google Lyria 2, Stable Audio 2.5, MMAudio, ElevenLabs sound effects, Thinksound, and more
+
+## Basic Usage
+
+### Google Lyria (Music)
+
+Google's Lyria models generate full-length songs with vocals and instrumentation. `lyria-3-pro-preview` handles multi-verse compositions, while `lyria-3-clip-preview` produces 30-second clips.
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { geminiAudio } from '@tanstack/ai-gemini'
+
+const result = await generateAudio({
+  adapter: geminiAudio('lyria-3-pro-preview'),
+  prompt: 'Uplifting indie pop with layered vocals and jangly guitars',
+})
+
+console.log(result.audio.b64Json) // Base64-encoded audio bytes (Gemini)
+console.log(result.audio.contentType) // e.g. "audio/mpeg"
+```
+
+### fal.ai
+
+fal.ai gives access to a broad catalogue of music, SFX, and general audio models through a single `falAudio` adapter.
+
+#### Music Generation (MiniMax Music 2.6)
+
+MiniMax's latest music model creates full compositions — vocals, backing music, and arrangements — from a single prompt.
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/minimax-music/v2.6'),
+  prompt: 'City Pop, 80s retro, groovy synth bass, warm female vocal, 104 BPM',
+})
+
+console.log(result.audio.url) // URL to the generated audio file
+console.log(result.audio.contentType) // e.g. "audio/wav"
+```
+
+#### Music with Explicit Lyrics (DiffRhythm)
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/diffrhythm'),
+  prompt: 'An upbeat electronic track with synths',
+  modelOptions: {
+    lyrics: '[verse]\nHello world\n[chorus]\nLa la la',
+  },
+})
+```
+
+#### Sound Effects
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/elevenlabs/sound-effects/v2'),
+  prompt: 'Thunderclap followed by heavy rain',
+  duration: 5,
+})
+```
+
+#### MiniMax Music v2 (lyrics_prompt)
+
+Earlier MiniMax variants use a `lyrics_prompt` field for lyric guidance.
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/minimax-music/v2'),
+  prompt: 'A dreamy pop ballad in the style of the 80s',
+  modelOptions: {
+    lyrics_prompt: '[instrumental]',
+  },
+})
+```
+
+If a request doesn't return the audio you expected — a model silently truncates, a provider rejects a prompt, or the response shape looks off — pass `debug: true` to see every chunk the provider SDK emits. See [Debug Logging](/ai/advanced/debug-logging).
+
+## Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `adapter` | `AudioAdapter` | The adapter created via `falAudio()` (required) |
+| `prompt` | `string` | Text description of the audio to generate (required) |
+| `duration` | `number` | Desired duration in seconds (model-dependent) |
+| `modelOptions` | `object` | Provider-specific options (fully typed when the model ID is passed as a string literal) |
+| `debug` | `DebugOption` | Enable per-category debug logging (`true`, `false`, or a `DebugConfig` — see [Debug Logging](/ai/advanced/debug-logging)) |
+
+## Result Shape
+
+```typescript
+import type { TokenUsage } from '@tanstack/ai'
+
+interface AudioGenerationResult {
+  id: string
+  model: string
+  audio: {
+    url?: string
+    b64Json?: string
+    contentType?: string
+    duration?: number
+  }
+  // Canonical TokenUsage (same shape as chat), present when the provider
+  // reports it (e.g. Gemini Lyria via generateContent). Usage-billed providers
+  // (fal) instead surface `usage.unitsBilled` — the real billed quantity read
+  // from fal's `x-fal-billable-units` result header. Multiply by the endpoint's
+  // unit price (fal pricing API) for the exact cost.
+  usage?: TokenUsage
+}
+```
+
+Gemini returns base64-encoded bytes in `result.audio.b64Json`. The fal adapter returns a URL in `result.audio.url` — if you need raw bytes, `fetch()` the URL yourself:
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/diffrhythm'),
+  prompt: 'An upbeat electronic track',
+})
+
+const bytes = new Uint8Array(
+  await (await fetch(result.audio.url!)).arrayBuffer()
+)
+```
+
+## Client Hook (`useGenerateAudio`)
+
+For client-side usage, framework integrations expose a `useGenerateAudio`
+hook (or `createGenerateAudio` in Svelte) that wraps the same generation
+flow. It mirrors the API of `useGenerateSpeech`, `useGenerateImage`, and
+other media hooks — see [Generation Hooks](/ai/media/generation-hooks) for the full
+shape.
+
+### Server (streaming SSE route)
+
+```typescript
+// routes/api/generate/audio.ts
+import { generateAudio, toServerSentEventsResponse } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+export async function POST(req: Request) {
+  const { prompt, duration } = await req.json()
+
+  return toServerSentEventsResponse(
+    generateAudio({
+      adapter: falAudio('fal-ai/diffrhythm'),
+      prompt,
+      duration,
+      stream: true,
+    }),
+  )
+}
+```
+
+### Client (React)
+
+```tsx
+import { useGenerateAudio } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+function AudioGenerator() {
+  const { generate, result, isLoading, error, reset } = useGenerateAudio({
+    connection: fetchServerSentEvents('/api/generate/audio'),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          generate({ prompt: 'An upbeat electronic track', duration: 10 })
+        }
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate'}
+      </button>
+      {error && <p>Error: {error.message}</p>}
+      {result?.audio.url && <audio src={result.audio.url} controls />}
+      {result && <button onClick={reset}>Clear</button>}
+    </div>
+  )
+}
+```
+
+Use the `fetcher` option instead of `connection` when calling a TanStack
+Start server function directly.
+
+## Differences vs Text-to-Speech
+
+| | `generateAudio()` | `generateSpeech()` |
+|---|---|---|
+| Purpose | Music, soundscapes, SFX | Spoken-word TTS |
+| Result | `result.audio.url` or `result.audio.b64Json` | Base64 in `result.audio` |
+| Primary input | `prompt` | `text` |
+| Voice/speed controls | No | Yes (`voice`, `speed`) |
+
+Use `generateSpeech()` when you want a spoken voice, and `generateAudio()` when you want non-speech audio.
+
+## Environment Variables
+
+Each provider reads its own API key from the environment by default:
+
+```bash
+GOOGLE_API_KEY=your-google-api-key
+FAL_KEY=your-fal-api-key
+```
+
+Or pass it explicitly to the adapter:
+
+```typescript
+import { createGeminiAudio } from '@tanstack/ai-gemini'
+import { falAudio } from '@tanstack/ai-fal'
+
+createGeminiAudio('lyria-3-pro-preview', 'your-key')
+falAudio('fal-ai/diffrhythm', { apiKey: 'your-key' })
+```
diff --git a/mintlify/ai/media/audio-recording.md b/mintlify/ai/media/audio-recording.md
new file mode 100644
index 000000000..0836b40f2
--- /dev/null
+++ b/mintlify/ai/media/audio-recording.md
@@ -0,0 +1,271 @@
+---
+title: Audio Recording
+id: audio-recording
+description: "Record microphone audio in the browser with useAudioRecorder and send it to a chat or transcription as a ready-to-use content part, with an optional transform."
+keywords:
+  - tanstack ai
+  - audio recording
+  - useAudioRecorder
+  - createAudioRecorder
+  - injectAudioRecorder
+  - voice input
+  - MediaRecorder
+---
+
+# Audio Recording
+
+You have a chat or generation UI and you want users to talk instead of type. By
+the end of this guide you'll capture microphone audio in the browser with
+`useAudioRecorder`, read the latest recording reactively, and send it straight
+into a chat message or a transcription request — with no transcoding and no
+extra dependencies.
+
+`useAudioRecorder` wraps the browser's `getUserMedia` / `MediaRecorder` and
+returns the recorder's native output (`audio/webm` or `audio/mp4`).
+
+## Record audio
+
+Start with a button; end with a working recorder that toggles capture and hands
+you the result.
+
+```tsx group=audio-recording
+import { useAudioRecorder } from '@tanstack/ai-react'
+
+function RecordButton() {
+  const { isRecording, isSupported, start, stop } = useAudioRecorder({
+    onError: (error) => console.error(error),
+  })
+
+  if (!isSupported) return <p>Recording is not supported in this browser.</p>
+
+  return (
+    <button onClick={() => (isRecording ? void stop() : void start())}>
+      {isRecording ? 'Stop' : 'Record'}
+    </button>
+  )
+}
+```
+
+`stop()` resolves to an `AudioRecording`:
+
+| Field        | Type        | Description                                                                  |
+| ------------ | ----------- | ---------------------------------------------------------------------------- |
+| `part`       | `AudioPart` | Ready-to-use content part: `{ type: 'audio', source: { type: 'data', value, mimeType } }` |
+| `base64`     | `string`    | Raw base64 of the recorded bytes                                             |
+| `blob`       | `Blob`      | The raw recorded blob                                                        |
+| `mimeType`   | `string`    | Native recorder type, e.g. `audio/webm;codecs=opus`                          |
+| `durationMs` | `number`    | Recording length in milliseconds                                             |
+
+## Handling errors
+
+Failures reach you through **two** channels — pick one, don't handle both:
+
+- `onError(error)` fires for permission denial and recorder errors.
+- `start()` and `stop()` also **reject**. `start()` rejects on permission
+  denial; `stop()` rejects on a recorder error or with `Recording cancelled` if
+  the recording is cancelled while a stop is in flight (for example when the
+  component unmounts mid-recording).
+
+So if you `await start()` / `await stop()`, wrap them in `try`/`catch` rather
+than discarding the promise with `void`. The recorder's native `mimeType` may
+differ from a requested `mimeType` (browsers ignore unsupported types), so read
+`recording.mimeType` if a downstream step requires a specific format.
+
+## Read the latest recording reactively
+
+The same value is also exposed as the reactive `recording` field, so you can
+render a preview without capturing `stop()`'s return value yourself. It's `null`
+until the first `stop()`:
+
+```tsx group=audio-recording
+function Preview() {
+  const { recording, isRecording, start, stop } = useAudioRecorder()
+  // recording is AudioRecording | null
+}
+```
+
+> Across frameworks `recording` follows the same shape as the other reactive
+> fields: an accessor in Solid (`recording()`), a readonly ref in Vue
+> (`recording.value`), a getter in Svelte (`recorder.recording`), and a
+> `Signal` in Angular (`recording()`).
+
+## Transform the recording
+
+Pass `onComplete` to turn the raw recording into whatever your app needs — a URL
+after upload, an encoded blob, or a custom object. Both `stop()` and the
+reactive `recording` field then resolve to your transformed value, and the
+transform can be `async`:
+
+```tsx group=audio-recording
+function Uploader() {
+  const { recording, stop } = useAudioRecorder({
+    onComplete: async (rec) => {
+      const res = await fetch('/api/upload', { method: 'POST', body: rec.blob })
+      const { url } = await res.json()
+      return url // `recording` and `stop()` now resolve to string
+    },
+  })
+}
+```
+
+Return nothing (`undefined`) to keep the raw `AudioRecording`; any returned
+value — including `null` — is used as-is and re-types `stop()` and `recording`.
+This is similar to the `onResult` transform on the
+[generation hooks](/ai/media/generation-hooks), but is async-capable. (Unlike
+`onResult`, where `null` means "keep the previous value," only `undefined` keeps
+the raw recording here.)
+
+## Send a recording in chat
+
+The recording's `part` is already a chat content part, so it drops straight into
+`sendMessage`:
+
+```tsx
+import {
+  useAudioRecorder,
+  useChat,
+  fetchServerSentEvents,
+} from '@tanstack/ai-react'
+
+function VoiceComposer() {
+  const { isRecording, start, stop } = useAudioRecorder()
+  const { sendMessage } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const toggle = async () => {
+    try {
+      if (!isRecording) {
+        await start()
+        return
+      }
+      const rec = await stop()
+      await sendMessage({ content: [rec.part] })
+    } catch (error) {
+      // start()/stop() reject on permission denial, recorder error, or cancel.
+      console.error(error)
+    }
+  }
+
+  return (
+    <button onClick={() => void toggle()}>
+      {isRecording ? 'Send' : 'Record'}
+    </button>
+  )
+}
+```
+
+## Transcribe a recording
+
+Wrap the recording as a `data:` URL so the provider receives the recorder's
+native content type — passing raw `base64` makes the transcription adapter
+assume `audio/mpeg` and mislabel the webm/mp4 bytes. See
+[Transcription](/ai/media/transcription) for the matching server route.
+
+```tsx
+import {
+  useAudioRecorder,
+  useTranscription,
+  fetchServerSentEvents,
+} from '@tanstack/ai-react'
+
+function Transcriber() {
+  const { isRecording, start, stop } = useAudioRecorder()
+  const { generate, result } = useTranscription({
+    connection: fetchServerSentEvents('/api/transcribe'),
+  })
+
+  const toggle = async () => {
+    try {
+      if (!isRecording) {
+        await start()
+        return
+      }
+      const rec = await stop()
+      // Wrap as a data URL so the provider gets the recorder's real content
+      // type. Passing raw base64 makes the transcription adapter assume
+      // `audio/mpeg`, which mislabels the native webm/mp4 bytes. Strip the
+      // `;codecs=...` parameter for a clean type.
+      const mimeType = rec.mimeType.split(';')[0]
+      await generate({ audio: `data:${mimeType};base64,${rec.base64}` })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={() => void toggle()}>
+        {isRecording ? 'Stop' : 'Record'}
+      </button>
+      {result ? <p>{result.text}</p> : null}
+    </div>
+  )
+}
+```
+
+## Other frameworks
+
+The same recorder ships for every framework with idiomatic reactivity. Svelte
+uses the `createAudioRecorder` factory; because Svelte 5 runes can't register
+automatic teardown, call `cancel()` from your component cleanup if a recording
+may still be active:
+
+```svelte
+<script lang="ts">
+  import {
+    createAudioRecorder,
+    createChat,
+    fetchServerSentEvents,
+  } from '@tanstack/ai-svelte'
+
+  const recorder = createAudioRecorder()
+  const chat = createChat({ connection: fetchServerSentEvents('/api/chat') })
+
+  async function toggle() {
+    if (!recorder.isRecording) {
+      await recorder.start()
+      return
+    }
+    const rec = await recorder.stop()
+    await chat.sendMessage({ content: [rec.part] })
+  }
+</script>
+
+<button onclick={toggle}>{recorder.isRecording ? 'Send' : 'Record'}</button>
+```
+
+| Framework | Import                  | Function             | Reactive fields                                      |
+| --------- | ----------------------- | -------------------- | ---------------------------------------------------- |
+| React     | `@tanstack/ai-react`    | `useAudioRecorder`   | `isRecording`, `recording` (values)                  |
+| Solid     | `@tanstack/ai-solid`    | `useAudioRecorder`   | `isRecording()`, `recording()` (accessors)           |
+| Vue       | `@tanstack/ai-vue`      | `useAudioRecorder`   | `isRecording.value`, `recording.value` (readonly refs) |
+| Svelte    | `@tanstack/ai-svelte`   | `createAudioRecorder`| `recorder.isRecording`, `recorder.recording` (getters) |
+| Angular   | `@tanstack/ai-angular`  | `injectAudioRecorder`| `isRecording()`, `recording()` (signals; call in an injection context) |
+
+## Hook API
+
+`useAudioRecorder(options?)` — and the `createAudioRecorder` /
+`injectAudioRecorder` equivalents — accept:
+
+| Option       | Type                                                | Description                                                                                          |
+| ------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `onComplete` | `(recording: AudioRecording) => T \| Promise<T>`    | Optional transform. Its (awaited) return re-types `stop()` and `recording`. Return nothing to keep the raw recording |
+| `onError`    | `(error: Error) => void`                            | Called on permission denial or recorder error                                                       |
+| `audio`      | `MediaTrackConstraints \| boolean`                  | Passed to `getUserMedia({ audio })`. Defaults to `true`                                             |
+| `mimeType`   | `string`                                            | Preferred recorder mime type; falls back to the browser default if unsupported                      |
+
+And return:
+
+| Property      | Type                  | Description                                                          |
+| ------------- | --------------------- | ------------------------------------------------------------------- |
+| `recording`   | `T \| null`           | Latest recording (transformed if `onComplete` provided), reactive   |
+| `isRecording` | `boolean`             | Whether capture is currently active                                 |
+| `isSupported` | `boolean`             | Whether the browser supports recording                              |
+| `start`       | `() => Promise<void>` | Acquire the mic and begin recording                                 |
+| `stop`        | `() => Promise<T>`    | Stop, and resolve with the recording (transformed if applicable)    |
+| `cancel`      | `() => void`          | Discard the in-progress recording and release the mic               |
+
+> Reactive shapes (`recording`, `isRecording`) vary per framework — see the
+> table in [Other frameworks](#other-frameworks). `T` is `AudioRecording`
+> unless an `onComplete` transform changes it.
diff --git a/mintlify/ai/media/generation-hooks.md b/mintlify/ai/media/generation-hooks.md
new file mode 100644
index 000000000..860656fe9
--- /dev/null
+++ b/mintlify/ai/media/generation-hooks.md
@@ -0,0 +1,453 @@
+---
+title: Generation Hooks
+id: generation-hooks
+order: 7
+description: "Framework hooks for every TanStack AI media generation type — useGenerateImage, useGenerateAudio, useGenerateSpeech, useTranscription, useSummarize, useGenerateVideo."
+keywords:
+  - tanstack ai
+  - generation hooks
+  - useGenerateImage
+  - useGenerateAudio
+  - useGenerateSpeech
+  - useTranscription
+  - useSummarize
+  - useGenerateVideo
+  - react hooks
+---
+
+# Generation Hooks
+
+TanStack AI provides framework hooks for every generation type: image, audio, speech, transcription, summarization, and video. Each hook connects to a server endpoint and manages loading, error, and result state for you.
+
+## Overview
+
+Generation hooks share a consistent API across all media types:
+
+| Hook | Input | Result Type |
+|------|-------|-------------|
+| `useGenerateImage` | `ImageGenerateInput` | `ImageGenerationResult` |
+| `useGenerateAudio` | `AudioGenerateInput` | `AudioGenerationResult` |
+| `useGenerateSpeech` | `SpeechGenerateInput` | `TTSResult` |
+| `useTranscription` | `TranscriptionGenerateInput` | `TranscriptionResult` |
+| `useSummarize` | `SummarizeGenerateInput` | `SummarizationResult` |
+| `useGenerateVideo` | `VideoGenerateInput` | `VideoGenerateResult` |
+| `useGeneration` | Generic `TInput` | Generic `TResult` |
+
+Every hook returns the same core shape: `generate`, `result`, `isLoading`, `error`, `status`, `stop`, and `reset`. You provide either a `connection` (streaming transport) or a `fetcher` (direct async call).
+
+## Server Setup
+
+Before using hooks on the client, you need a server endpoint that runs the generation and returns the result as SSE. Here's a minimal image generation endpoint:
+
+```typescript
+// routes/api/generate/image.ts
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export async function POST(req: Request) {
+  const { prompt, size, numberOfImages } = await req.json()
+
+  const stream = generateImage({
+    adapter: openaiImage('dall-e-3'),
+    prompt,
+    size,
+    numberOfImages,
+    stream: true,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+The same pattern applies to all generation types -- swap `generateImage` for `generateSpeech`, `generateTranscription`, `summarize`, or `generateVideo`. See the individual media guides for server-side details.
+
+## useGenerateImage
+
+Trigger image generation and render the results.
+
+```tsx
+import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
+import { useState } from 'react'
+
+function ImageGenerator() {
+  const [prompt, setPrompt] = useState('')
+  const { generate, result, isLoading, error, reset } = useGenerateImage({
+    connection: fetchServerSentEvents('/api/generate/image'),
+  })
+
+  return (
+    <div>
+      <input
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        placeholder="Describe an image..."
+      />
+      <button
+        onClick={() => generate({ prompt })}
+        disabled={isLoading || !prompt.trim()}
+      >
+        {isLoading ? 'Generating...' : 'Generate'}
+      </button>
+
+      {error && <p>Error: {error.message}</p>}
+
+      {result?.images.map((img, i) => (
+        <img
+          key={i}
+          src={img.url || `data:image/png;base64,${img.b64Json}`}
+          alt={img.revisedPrompt || 'Generated image'}
+        />
+      ))}
+
+      {result && <button onClick={reset}>Clear</button>}
+    </div>
+  )
+}
+```
+
+The `generate` function accepts an `ImageGenerateInput`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `prompt` | `string` | Text description of the desired image (required) |
+| `numberOfImages` | `number` | Number of images to generate |
+| `size` | `string` | Image size in WIDTHxHEIGHT format (e.g., `"1024x1024"`) |
+| `modelOptions` | `Record<string, any>` | Model-specific options |
+
+## useGenerateSpeech
+
+Convert text to speech and play it back.
+
+```tsx
+import { useGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-react'
+import { useRef } from 'react'
+
+function SpeechGenerator() {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const { generate, result, isLoading, error } = useGenerateSpeech({
+    connection: fetchServerSentEvents('/api/generate/speech'),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ text: 'Hello, welcome to TanStack AI!', voice: 'alloy' })}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate Speech'}
+      </button>
+
+      {error && <p>Error: {error.message}</p>}
+
+      {result && (
+        <audio
+          ref={audioRef}
+          src={`data:audio/${result.format};base64,${result.audio}`}
+          controls
+          autoPlay
+        />
+      )}
+    </div>
+  )
+}
+```
+
+The `generate` function accepts a `SpeechGenerateInput`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `text` | `string` | The text to convert to speech (required) |
+| `voice` | `string` | The voice to use (e.g., `"alloy"`, `"echo"`) |
+| `format` | `'mp3' \| 'opus' \| 'aac' \| 'flac' \| 'wav' \| 'pcm'` | Output audio format |
+| `speed` | `number` | Audio speed (0.25 to 4.0) |
+| `modelOptions` | `Record<string, any>` | Model-specific options |
+
+The `TTSResult` contains `audio` (base64-encoded), `format`, and optionally `duration` and `contentType`.
+
+## useTranscription
+
+Transcribe audio files to text.
+
+```tsx
+import { useTranscription, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function Transcriber() {
+  const { generate, result, isLoading, error } = useTranscription({
+    connection: fetchServerSentEvents('/api/transcribe'),
+  })
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = () => {
+        generate({ audio: reader.result as string, language: 'en' })
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  return (
+    <div>
+      <input type="file" accept="audio/*" onChange={handleFile} />
+
+      {isLoading && <p>Transcribing...</p>}
+      {error && <p>Error: {error.message}</p>}
+
+      {result && (
+        <div>
+          <h3>Transcription</h3>
+          <p>{result.text}</p>
+          {result.language && <p>Language: {result.language}</p>}
+          {result.duration && <p>Duration: {result.duration}s</p>}
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+The `generate` function accepts a `TranscriptionGenerateInput`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `audio` | `string \| File \| Blob \| ArrayBuffer` | Audio data -- base64 string, File, Blob, or ArrayBuffer (required) |
+| `language` | `string` | Language in ISO-639-1 format (e.g., `"en"`) |
+| `prompt` | `string` | Optional prompt to guide the transcription |
+| `responseFormat` | `'json' \| 'text' \| 'srt' \| 'verbose_json' \| 'vtt'` | Common output format |
+| `modelOptions` | `Record<string, any>` | Model-specific options |
+
+## useSummarize
+
+Summarize long text with configurable output styles.
+
+```tsx
+import { useSummarize, fetchServerSentEvents } from '@tanstack/ai-react'
+import { useState } from 'react'
+
+function Summarizer() {
+  const [text, setText] = useState('')
+  const { generate, result, isLoading, error } = useSummarize({
+    connection: fetchServerSentEvents('/api/summarize'),
+  })
+
+  return (
+    <div>
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Paste text to summarize..."
+        rows={8}
+      />
+      <button
+        onClick={() => generate({ text, style: 'bullet-points', maxLength: 200 })}
+        disabled={isLoading || !text.trim()}
+      >
+        {isLoading ? 'Summarizing...' : 'Summarize'}
+      </button>
+
+      {error && <p>Error: {error.message}</p>}
+
+      {result && (
+        <div>
+          <h3>Summary</h3>
+          <p>{result.summary}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+The `generate` function accepts a `SummarizeGenerateInput`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `text` | `string` | The text to summarize (required) |
+| `maxLength` | `number` | Maximum length of the summary |
+| `style` | `'bullet-points' \| 'paragraph' \| 'concise'` | Summary style |
+| `focus` | `Array<string>` | Topics to focus on |
+| `modelOptions` | `Record<string, any>` | Model-specific options |
+
+## useGenerateVideo
+
+Video generation is asynchronous -- a job is created on the server, then polled for status until completion. The hook manages the full lifecycle and exposes `jobId` and `videoStatus` so you can show progress.
+
+```tsx
+import { useGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function VideoGenerator() {
+  const { generate, result, jobId, videoStatus, isLoading, error } =
+    useGenerateVideo({
+      connection: fetchServerSentEvents('/api/generate/video'),
+      onStatusUpdate: (status) => {
+        console.log(`Video ${status.jobId}: ${status.status} (${status.progress}%)`)
+      },
+    })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ prompt: 'A flying car over a city', duration: 5 })}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate Video'}
+      </button>
+
+      {isLoading && videoStatus && (
+        <div>
+          <p>Job: {jobId}</p>
+          <p>Status: {videoStatus.status}</p>
+          {videoStatus.progress != null && (
+            <progress value={videoStatus.progress} max={100} />
+          )}
+        </div>
+      )}
+
+      {error && <p>Error: {error.message}</p>}
+
+      {result && (
+        <video src={result.url} controls autoPlay style={{ maxWidth: '100%' }} />
+      )}
+    </div>
+  )
+}
+```
+
+The `generate` function accepts a `VideoGenerateInput`:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `prompt` | `string` | Text description of the desired video (required) |
+| `size` | `string` | Video size -- format depends on provider (e.g., `"16:9"`, `"1280x720"`) |
+| `duration` | `number` | Video duration in seconds |
+| `modelOptions` | `Record<string, any>` | Model-specific options |
+
+`useGenerateVideo` returns two extra properties beyond the standard set:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `jobId` | `string \| null` | The current job ID, set when the server creates a video job |
+| `videoStatus` | `VideoStatusInfo \| null` | Live status updates with `status`, `progress`, and `jobId` |
+
+The `VideoStatusInfo` type:
+
+```typescript
+interface VideoStatusInfo {
+  jobId: string
+  status: 'pending' | 'processing' | 'completed' | 'failed'
+  progress?: number     // 0-100
+  url?: string          // Set when completed
+  error?: string        // Set when failed
+}
+```
+
+The hook also accepts `onJobCreated` and `onStatusUpdate` callbacks for fine-grained tracking.
+
+## Base Hook: useGeneration
+
+All specialized hooks are built on `useGeneration`. Use it directly when you have a custom generation type that doesn't fit the built-in hooks.
+
+```tsx
+import { useGeneration, fetchServerSentEvents } from '@tanstack/ai-react'
+
+interface EmbeddingInput {
+  text: string
+  model?: string
+}
+
+interface EmbeddingResult {
+  embedding: Array<number>
+  model: string
+  usage: { totalTokens: number }
+}
+
+function EmbeddingGenerator() {
+  const { generate, result, isLoading, error } = useGeneration<
+    EmbeddingInput,
+    EmbeddingResult
+  >({
+    connection: fetchServerSentEvents('/api/generate/embedding'),
+  })
+
+  return (
+    <div>
+      <button onClick={() => generate({ text: 'Hello world' })} disabled={isLoading}>
+        Generate Embedding
+      </button>
+      {result && <p>Dimensions: {result.embedding.length}</p>}
+    </div>
+  )
+}
+```
+
+### Options
+
+`UseGenerationOptions<TInput, TResult>` accepts:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `GenerationFetcher<TInput, TResult>` | Direct async function (no streaming protocol needed) |
+| `id` | `string` | Unique identifier for this generation instance |
+| `body` | `Record<string, any>` | Additional body parameters sent with connection requests |
+| `onResult` | `(result: TResult) => TOutput \| null \| void` | Transform or react to results |
+| `onError` | `(error: Error) => void` | Error callback |
+| `onProgress` | `(progress: number, message?: string) => void` | Progress updates (0-100) |
+| `onChunk` | `(chunk: StreamChunk) => void` | Per-chunk callback (connection mode only) |
+
+### Return Value
+
+`UseGenerationReturn<TOutput>` provides:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `generate` | `(input: TInput) => Promise<void>` | Trigger a generation request |
+| `result` | `TOutput \| null` | The generation result, or null |
+| `isLoading` | `boolean` | Whether a generation is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current generation |
+| `reset` | `() => void` | Clear result, error, and return to idle |
+
+### Result Transforms
+
+The `onResult` callback can transform what gets stored in `result`:
+
+```tsx
+import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
+import type { ImageGenerationResult } from '@tanstack/ai'
+
+const { result } = useGenerateImage({
+  connection: fetchServerSentEvents('/api/generate/image'),
+  onResult: (raw: ImageGenerationResult) => raw.images.map((img) => img.url || img.b64Json),
+})
+// result is now string[] instead of ImageGenerationResult
+```
+
+## Framework Variants
+
+All generation hooks are available across React, Vue, and Svelte with the same capabilities. The API shapes are identical -- only the naming convention and reactive primitives differ.
+
+| Generation Type | React (`@tanstack/ai-react`) | Vue (`@tanstack/ai-vue`) | Svelte (`@tanstack/ai-svelte`) |
+|----------------|------------------------------|--------------------------|-------------------------------|
+| Image | `useGenerateImage` | `useGenerateImage` | `createGenerateImage` |
+| Speech | `useGenerateSpeech` | `useGenerateSpeech` | `createGenerateSpeech` |
+| Transcription | `useTranscription` | `useTranscription` | `createTranscription` |
+| Summarization | `useSummarize` | `useSummarize` | `createSummarize` |
+| Video | `useGenerateVideo` | `useGenerateVideo` | `createGenerateVideo` |
+| Base (generic) | `useGeneration` | `useGeneration` | `createGeneration` |
+
+All three packages re-export `fetchServerSentEvents`, `fetchHttpStream`, and `stream` from `@tanstack/ai-client` for convenience.
+
+**Vue note:** Return values are wrapped in `DeepReadonly<ShallowRef<>>` -- access them with `.value` in both `<script>` and `<template>`.
+
+**Svelte note:** Functions use the `create*` naming convention and return Svelte 5 reactive state via `$state`.
+
+## Next Steps
+
+- [Image Generation](/ai/media/image-generation) -- Provider-specific options, sizes, and model availability
+- [Text-to-Speech](/ai/media/text-to-speech) -- Voice options, audio formats, and streaming audio
+- [Transcription](/ai/media/transcription) -- File formats, language detection, and word-level timestamps
+- [Video Generation](/ai/media/video-generation) -- Job lifecycle, polling, and provider setup
+- [Generations Overview](/ai/media/generations) -- Architecture and server-side streaming patterns
diff --git a/mintlify/ai/media/generations.md b/mintlify/ai/media/generations.md
new file mode 100644
index 000000000..f6591d591
--- /dev/null
+++ b/mintlify/ai/media/generations.md
@@ -0,0 +1,266 @@
+---
+title: Generations
+id: generations
+order: 1
+description: "The unified pattern for non-chat activities in TanStack AI — image generation, text-to-speech, transcription, summarization, and video."
+keywords:
+  - tanstack ai
+  - generations
+  - media generation
+  - image generation
+  - transcription
+  - tts
+  - summarization
+  - video generation
+---
+
+# Generations
+
+TanStack AI provides a unified pattern for non-chat AI activities: **image generation**, **text-to-speech**, **transcription**, **summarization**, and **video generation**. These are collectively called "generations" — single request/response operations (as opposed to multi-turn chat).
+
+All generations follow the same architecture, making it easy to learn one and apply it to the rest.
+
+## Architecture
+
+```mermaid
+flowchart TB
+  subgraph Server ["Server"]
+    direction TB
+    activities["generateImage({ ..., stream: true })
+generateSpeech({ ..., stream: true })
+generateTranscription({ ..., stream: true })
+summarize({ ..., stream: true })
+generateVideo({ ..., stream: true })"]
+    transport["toServerSentEventsResponse()"]
+    activities --> transport
+  end
+
+  transport -- "StreamChunks via SSE
+RUN_STARTED → generation:result → RUN_FINISHED" --> adapter
+
+  subgraph Client ["Client"]
+    direction TB
+    adapter["fetchServerSentEvents('/api/...')"]
+    gc["GenerationClient
+(state machine)"]
+    hooks["Framework Hooks
+useGenerateImage() · useGenerateSpeech()
+useGenerateVideo() · useSummarize()
+useTranscription()"]
+    adapter --> gc
+    gc -- "result, isLoading, error, status" --> hooks
+  end
+```
+
+The key insight: **every generation activity on the server is just an async function that returns a result**. By passing `stream: true`, the function returns a `StreamChunk` iterable instead of a plain result, which the client already knows how to consume.
+
+## Three Transport Modes
+
+### Streaming Mode (Connection Adapter)
+
+The server passes `stream: true` to the generation function and sends the result as SSE. The client uses `fetchServerSentEvents()` to consume the stream.
+
+**Server:**
+
+```typescript ignore
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+// In your API route handler
+const stream = generateImage({
+  adapter: openaiImage('dall-e-3'),
+  prompt: 'A sunset over mountains',
+  stream: true,
+})
+
+return toServerSentEventsResponse(stream)
+```
+
+**Client:**
+
+```tsx
+import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
+
+const { generate, result, isLoading } = useGenerateImage({
+  connection: fetchServerSentEvents('/api/generate/image'),
+})
+```
+
+### Direct Mode (Fetcher)
+
+The client calls a server function directly and receives the result as JSON. No streaming protocol needed.
+
+**Server:**
+
+```typescript ignore
+import { createServerFn } from '@tanstack/react-start'
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export const generateImageFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string }) => data)
+  .handler(async ({ data }) => {
+    return generateImage({
+      adapter: openaiImage('dall-e-3'),
+      prompt: data.prompt,
+    })
+  })
+```
+
+**Client:**
+
+```tsx
+import { useGenerateImage } from '@tanstack/ai-react'
+import { generateImageFn } from '../lib/server-functions'
+
+const { generate, result, isLoading } = useGenerateImage({
+  fetcher: (input) => generateImageFn({ data: input }),
+})
+```
+
+### Server Function Streaming (Fetcher + Response)
+
+Combines the best of both: **type-safe input** from the fetcher pattern with **streaming** from a server function that returns an SSE `Response`. When the fetcher returns a `Response` object (instead of a plain result), the client automatically parses it as an SSE stream.
+
+**Server:**
+
+```typescript ignore
+import { createServerFn } from '@tanstack/react-start'
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export const generateImageStreamFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string }) => data)
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateImage({
+        adapter: openaiImage('dall-e-3'),
+        prompt: data.prompt,
+        stream: true,
+      }),
+    )
+  })
+```
+
+**Client:**
+
+```tsx
+import { useGenerateImage } from '@tanstack/ai-react'
+import { generateImageStreamFn } from '../lib/server-functions'
+
+const { generate, result, isLoading } = useGenerateImage({
+  fetcher: (input) => generateImageStreamFn({ data: input }),
+})
+```
+
+This is the recommended approach when using TanStack Start server functions — the input is fully typed (e.g., `ImageGenerateInput`), and the streaming protocol is handled transparently.
+
+## How Streaming Works
+
+When you pass `stream: true` to any generation function, it returns an async iterable of `StreamChunk` events instead of a plain result:
+
+```
+1. RUN_STARTED          → Client sets status to 'generating'
+2. CUSTOM               → Client receives the result
+   name: 'generation:result'
+   value: <your result>
+3. RUN_FINISHED         → Client sets status to 'success'
+```
+
+If the function throws, a `RUN_ERROR` event is emitted instead:
+
+```
+1. RUN_STARTED          → Client sets status to 'generating'
+2. RUN_ERROR            → Client sets error + status to 'error'
+   error: { message: '...' }
+```
+
+This is the same event protocol used by chat streaming, so the same transport layer (`toServerSentEventsResponse`, `fetchServerSentEvents`) works for both.
+
+When the server emits `RUN_ERROR`, the client surfaces it on `error` (and sets `status` to `'error'`). Use the `onError` callback to react, and render `error?.message` in your UI:
+
+```tsx
+import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function ImageGenerator() {
+  const { generate, result, error, status } = useGenerateImage({
+    connection: fetchServerSentEvents('/api/generate/image'),
+    onError: (err) => console.error('Generation failed:', err.message),
+  })
+
+  return (
+    <div>
+      <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>
+        Generate
+      </button>
+      {status === 'error' && <p role="alert">Error: {error?.message}</p>}
+      {result?.images.map((img, i) => (
+        <img key={i} src={img.url || `data:image/png;base64,${img.b64Json}`} />
+      ))}
+    </div>
+  )
+}
+```
+
+## Common Hook API
+
+All generation hooks share the same interface:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `(input) => Promise<Result \| Response>` | Direct async function, or server function returning an SSE `Response` |
+| `id` | `string` | Unique identifier for this instance |
+| `body` | `Record<string, any>` | Additional body parameters (connection mode) |
+| `onResult` | `(result) => T \| null \| void` | Transform or react to the result |
+| `onError` | `(error) => void` | Error callback |
+| `onProgress` | `(progress, message?) => void` | Progress updates (0-100) |
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `generate` | `(input) => Promise<void>` | Trigger generation |
+| `result` | `T \| null` | The result (optionally transformed), or null |
+| `isLoading` | `boolean` | Whether generation is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current generation |
+| `reset` | `() => void` | Clear all state, return to idle |
+
+### Result Transform
+
+The `onResult` callback can optionally transform the stored result:
+
+- Return a **non-null value** — replaces the stored result with the transformed value
+- Return **`null`** — keeps the previous result unchanged (useful for filtering)
+- Return **nothing** (`void`) — stores the raw result as-is
+
+TypeScript automatically infers the result type from your `onResult` return value — no explicit generic parameter needed.
+
+```tsx
+import { useGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-react'
+import type { TTSResult } from '@tanstack/ai'
+
+function SpeechPlayer() {
+  const { result } = useGenerateSpeech({
+    connection: fetchServerSentEvents('/api/generate/speech'),
+    onResult: (raw: TTSResult) => ({
+      audioUrl: `data:${raw.contentType};base64,${raw.audio}`,
+      duration: raw.duration,
+    }),
+  })
+  // result is typed as { audioUrl: string; duration?: number } | null
+}
+```
+
+## Available Generations
+
+| Activity | Server Function | Client Hook (React) | Guide |
+|----------|----------------|---------------------|-------|
+| Image generation | `generateImage()` | `useGenerateImage()` | [Image Generation](/ai/media/image-generation) |
+| Audio generation | `generateAudio()` | `useGenerateAudio()` | [Audio Generation](/ai/media/audio-generation) |
+| Text-to-speech | `generateSpeech()` | `useGenerateSpeech()` | [Text-to-Speech](/ai/media/text-to-speech) |
+| Transcription | `generateTranscription()` | `useTranscription()` | [Transcription](/ai/media/transcription) |
+| Summarization | `summarize()` | `useSummarize()` | - |
+| Video generation | `generateVideo()` | `useGenerateVideo()` | [Video Generation](/ai/media/video-generation) |
+
+> **Note:** Video generation uses a jobs/polling architecture. The `useGenerateVideo` hook additionally exposes `jobId`, `videoStatus`, `onJobCreated`, and `onStatusUpdate` for tracking the polling lifecycle. See the [Video Generation](/ai/media/video-generation) guide for details.
diff --git a/mintlify/ai/media/image-generation.md b/mintlify/ai/media/image-generation.md
new file mode 100644
index 000000000..d36403975
--- /dev/null
+++ b/mintlify/ai/media/image-generation.md
@@ -0,0 +1,695 @@
+---
+title: Image Generation
+id: image-generation
+order: 5
+description: "Generate images with OpenAI DALL-E, Gemini NanoBanana and Imagen, and fal.ai models via TanStack AI's unified generateImage() API."
+keywords:
+  - tanstack ai
+  - image generation
+  - generateImage
+  - dall-e
+  - imagen
+  - nano banana
+  - flux
+  - fal.ai
+---
+
+# Image Generation
+
+TanStack AI provides support for image generation through dedicated image adapters. This guide covers how to use the image generation functionality with OpenAI and Gemini providers.
+
+## Overview
+
+Image generation is handled by image adapters that follow the same tree-shakeable architecture as other adapters in TanStack AI. The image adapters support:
+
+- **OpenAI**: DALL-E 2, DALL-E 3, GPT-Image-1, GPT-Image-1-Mini, and GPT-Image-2 models
+- **Gemini**: Gemini native image models (NanoBanana) and Imagen 3/4 models
+- **fal.ai**: 600+ models including Nano Banana Pro, FLUX, and more
+
+## Basic Usage
+
+### OpenAI Image Generation
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+// Generate an image (the adapter uses OPENAI_API_KEY from environment)
+const result = await generateImage({
+  adapter: openaiImage('dall-e-3'),
+  prompt: 'A beautiful sunset over mountains',
+})
+
+console.log(result.images[0]?.url) // URL to the generated image
+```
+
+### Gemini Image Generation
+
+Gemini supports two types of image generation: Gemini native models (NanoBanana) and Imagen models. The adapter automatically routes to the correct API based on the model name.
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+// Gemini native model (NanoBanana) — uses generateContent API
+const result = await generateImage({
+  adapter: geminiImage('gemini-3.1-flash-image-preview'),
+  prompt: 'A futuristic cityscape at night',
+  size: '16:9_4K',
+})
+
+// Imagen model — uses generateImages API
+const result2 = await generateImage({
+  adapter: geminiImage('imagen-4.0-generate-001'),
+  prompt: 'A futuristic cityscape at night',
+})
+
+console.log(result.images[0]?.b64Json) // Base64 encoded image
+```
+
+## Options
+
+### Common Options
+
+All image adapters support these common options:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `adapter` | `ImageAdapter` | Image adapter instance with model (required) |
+| `prompt` | `string \| MediaPromptPart[]` | Description of the image to generate (required). A plain string, or — on models that support image-conditioned generation — an ordered array of content parts interleaving text with image inputs. See [Image-Conditioned Generation](#image-conditioned-generation) below. |
+| `numberOfImages` | `number` | Number of images to generate |
+| `size` | `string` | Size of the generated image in WIDTHxHEIGHT format |
+| `modelOptions?` | `object` | Model-specific options (renamed from `providerOptions`) |
+
+### Size Options
+
+#### OpenAI Models
+
+| Model | Supported Sizes |
+|-------|----------------|
+| `gpt-image-2` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` |
+| `gpt-image-1` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` |
+| `gpt-image-1-mini` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` |
+| `dall-e-3` | `1024x1024`, `1792x1024`, `1024x1792` |
+| `dall-e-2` | `256x256`, `512x512`, `1024x1024` |
+
+#### Gemini Native Models (NanoBanana)
+
+Gemini native image models use a template literal size format: `"aspectRatio_resolution"`.
+
+| Aspect Ratios | Resolutions |
+|---------------|-------------|
+| `1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `9:16`, `16:9`, `21:9` | `1K`, `2K`, `4K` |
+
+```typescript ignore
+// Examples
+size: "16:9_4K"   // Widescreen at 4K resolution
+size: "1:1_2K"    // Square at 2K resolution
+size: "9:16_1K"   // Portrait at 1K resolution
+```
+
+#### Gemini Imagen Models
+
+Imagen models accept WIDTHxHEIGHT format, which maps to aspect ratios internally:
+
+| Size | Aspect Ratio |
+|------|-------------|
+| `1024x1024` | 1:1 |
+| `1920x1080` | 16:9 |
+| `1080x1920` | 9:16 |
+
+Alternatively, you can specify the aspect ratio directly in Model Options:
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+const result = await generateImage({
+  adapter: geminiImage('imagen-4.0-generate-001'),
+  prompt: 'A landscape photo',
+  modelOptions: {
+    aspectRatio: '16:9'
+  }
+})
+```
+
+## Image-Conditioned Generation
+
+For image-to-image, reference-guided, multi-reference, and edit / inpaint
+flows, pass the `prompt` as an ordered array of content parts — the same
+`TextPart` / `ImagePart` shapes used elsewhere for multimodal content:
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+await generateImage({
+  adapter: openaiImage('gpt-image-2'),
+  prompt: [
+    { type: 'text', content: 'Turn this into a cinematic product photo' },
+    {
+      type: 'image',
+      source: { type: 'url', value: 'https://example.com/product.png' },
+    },
+  ],
+})
+```
+
+Part order is meaningful. Providers with natively multimodal prompts
+(Gemini image models, OpenRouter) receive the parts exactly as written, so
+text can refer to its neighbouring images:
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+import { badExampleUrl, goodExampleUrl } from './urls'
+
+await generateImage({
+  adapter: geminiImage('gemini-3.1-flash-image-preview'),
+  prompt: [
+    { type: 'text', content: 'Not like this' },
+    { type: 'image', source: { type: 'url', value: badExampleUrl } },
+    { type: 'text', content: 'more like this' },
+    { type: 'image', source: { type: 'url', value: goodExampleUrl } },
+  ],
+})
+```
+
+Providers with named request fields (OpenAI, fal, xAI) extract the image
+parts and flatten the text (text parts are joined verbatim, paragraph
+separated).
+
+The accepted part types are narrowed **per model at compile time**: passing
+an image part to a text-only model (e.g. `dall-e-3`, Imagen) is a type
+error, not just a runtime throw.
+
+### Referencing images from your prompt
+
+**Your prompt text is always sent verbatim — the SDK never injects or
+rewrites referencing markers.** When you want the text to refer to specific
+input images, write the provider's own convention yourself:
+
+| Provider | Convention | Example |
+| -------- | ---------- | ------- |
+| **OpenAI** (gpt-image) | Indexed prose, per OpenAI's prompting guide | `"apply the style of image 2 to image 1"` |
+| **FLUX.2 on fal / BFL** | Indexed prose (BFL's docs parse `image N`) | `"subject from image 1, style from image 2"` |
+| **Gemini** (native image models) | Describe the reference by content/role | `"using the attached fabric sample as the texture"` |
+| **fal Kling / Seedance endpoints** | `@`-tags, 1-indexed by input order | `"Put @Image1 in the style of @Image2"` |
+| **xAI grok-imagine** | No in-prompt syntax — images addressed in request order | `"render the product in the style of the second image"` |
+
+To keep track of which part you meant by "image 2" or `@Image2`, you can
+label parts with the informational `metadata.tag` field — the SDK ignores
+it, but it keeps your code self-documenting:
+
+```typescript ignore
+prompt: [
+  { type: 'text', content: 'Put @Image1 in the style of @Image2' },
+  { type: 'image', source: { type: 'url', value: productUrl },
+    metadata: { tag: 'product' } },
+  { type: 'image', source: { type: 'url', value: styleUrl },
+    metadata: { tag: 'style' } },
+]
+```
+
+### Source format
+
+`ImagePart.source` is a discriminated union supporting both URLs and inline
+base64 data — pass whichever you have:
+
+```typescript ignore
+// URL source
+{ type: 'image', source: { type: 'url', value: 'https://example.com/img.png' } }
+
+// Inline base64 data (mimeType required)
+{ type: 'image', source: { type: 'data', value: base64String, mimeType: 'image/png' } }
+```
+
+OpenAI's edit endpoint requires file uploads; the adapter fetches URL sources
+and converts base64 to a `File` automatically.
+
+### Role hints via `metadata.role`
+
+When a generation has multiple inputs with different roles (mask vs reference
+vs start/end frame), set `metadata.role` on each part. Adapters route by role
+to the provider-specific field; parts without a role fall back to positional
+mapping.
+
+| Role            | Maps to                                                                                |
+| --------------- | -------------------------------------------------------------------------------------- |
+| `'reference'`   | fal `reference_image_urls`; Gemini multimodal part; positional fallback                |
+| `'character'`   | Same as `'reference'`; Veo `referenceImages` slot (planned — no Veo adapter yet)       |
+| `'mask'`        | OpenAI `mask` (gpt-image-2, gpt-image-1, dall-e-2); fal `mask_url`                     |
+| `'control'`     | fal `control_image_url` (ControlNet / depth / pose conditioning)                       |
+| `'start_frame'` | fal `start_image_url`; Veo `image` (planned) (used by `generateVideo`)                 |
+| `'end_frame'`   | fal `end_image_url`; Veo `lastFrame` (planned) (used by `generateVideo`)               |
+
+#### Inpaint / edit with a mask
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+import { photoUrl, maskUrl } from './urls'
+
+await generateImage({
+  adapter: openaiImage('gpt-image-2'),
+  prompt: [
+    { type: 'text', content: 'Replace the masked region with a tree' },
+    {
+      type: 'image',
+      source: { type: 'url', value: photoUrl },
+    },
+    {
+      type: 'image',
+      source: { type: 'url', value: maskUrl },
+      metadata: { role: 'mask' },
+    },
+  ],
+})
+```
+
+#### Multi-reference composition
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+await generateImage({
+  adapter: geminiImage('gemini-3.1-flash-image-preview'),
+  prompt: [
+    {
+      type: 'text',
+      content:
+        'Generate a new image of the product using the style of the second reference',
+    },
+    {
+      type: 'image',
+      source: { type: 'url', value: 'https://example.com/product.png' },
+    },
+    {
+      type: 'image',
+      source: { type: 'url', value: 'https://example.com/style.png' },
+    },
+  ],
+})
+```
+
+### Provider support
+
+| Provider     | Behavior                                                                                                  |
+| ------------ | --------------------------------------------------------------------------------------------------------- |
+| **OpenAI**   | `gpt-image-2` / `gpt-image-1` / `gpt-image-1-mini` → routes to `images.edit()`, up to 16 source images plus optional mask.<br />`dall-e-2` → `images.edit()` with 1 source image only.<br />`dall-e-3` → throws (no edit support). |
+| **Gemini**   | Native models (`gemini-*-flash-image`, "nano-banana", etc.) → prompt parts map 1:1 onto multimodal `contents`, preserving interleaved order. Up to ~14 input images (provider limit, not enforced by the SDK).<br />Imagen models → throws (text-to-image only). |
+| **fal.ai**   | Field names resolve per endpoint from a map generated from the fal SDK's endpoint types (e.g. nano-banana edit gets `image_urls`, Fooocus masks get `mask_image_url`). Defaults for unknown endpoints: 1 input → `image_url`; multiple → `image_urls`; `role: 'mask'` → `mask_url`; `role: 'control'` → `control_image_url`; `role: 'reference'` / `'character'` → `reference_image_urls`. Override with `modelOptions` for endpoint-specific fields. |
+| **Grok**     | grok-imagine models → xAI's `/v1/images/edits` (up to 3 source images, addressed by xAI in request order; prompt sent verbatim). `role: 'mask'` / `'control'` throw (no Imagine API equivalent). `grok-2-image-1212` throws (text-to-image only). |
+| **OpenRouter** | Prompt parts map 1:1 onto multimodal `image_url` / `text` content parts, preserving interleaved order, and are forwarded to the underlying image model.                                                                                    |
+| **Anthropic** | n/a — no image generation API.                                                                                                                                                                          |
+
+Adapters that don't support image-conditioned generation throw a clear
+runtime error so calls fail fast rather than silently dropping the inputs.
+
+## Model Options
+
+### OpenAI Model Options
+
+OpenAI models support model-specific Model Options:
+
+#### GPT-Image-2 / GPT-Image-1 / GPT-Image-1-Mini
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+const result = await generateImage({
+  adapter: openaiImage('gpt-image-2'),
+  prompt: 'A cat wearing a hat',
+  modelOptions: {
+    quality: 'high', // 'high' | 'medium' | 'low' | 'auto'
+    background: 'transparent', // 'transparent' | 'opaque' | 'auto'
+    output_format: 'png', // 'png' | 'jpeg' | 'webp'
+    moderation: 'low', // 'low' | 'auto'
+  }
+})
+```
+
+#### DALL-E 3
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+const result = await generateImage({
+  adapter: openaiImage('dall-e-3'),
+  prompt: 'A futuristic car',
+  modelOptions: {
+    quality: 'hd', // 'hd' | 'standard'
+    style: 'vivid', // 'vivid' | 'natural'
+  }
+})
+```
+
+### Gemini Imagen Model Options
+
+```typescript ignore
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+const result = await generateImage({
+  adapter: geminiImage('imagen-4.0-generate-001'),
+  prompt: 'A beautiful garden',
+  modelOptions: {
+    aspectRatio: '16:9',
+    // personGeneration accepts PersonGeneration enum values: 'DONT_ALLOW' | 'ALLOW_ADULT' | 'ALLOW_ALL'
+    personGeneration: 'ALLOW_ADULT',
+    negativePrompt: 'blurry, low quality',
+    addWatermark: true,
+    outputMimeType: 'image/png', // 'image/png' | 'image/jpeg' | 'image/webp'
+  }
+})
+```
+
+### Gemini Native Model Options (NanoBanana)
+
+Gemini native image models accept `GenerateContentConfig` options directly in `modelOptions`:
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { geminiImage } from '@tanstack/ai-gemini'
+
+const result = await generateImage({
+  adapter: geminiImage('gemini-3.1-flash-image-preview'),
+  prompt: 'A beautiful garden',
+  size: '16:9_4K',
+})
+```
+
+## Response Format
+
+The image generation result includes:
+
+```typescript
+import type { TokenUsage } from '@tanstack/ai'
+
+interface ImageGenerationResult {
+  id: string // Unique identifier for this generation
+  model: string // The model used
+  images: GeneratedImage[] // Array of generated images
+  // Canonical TokenUsage (same shape as chat). Token-billed models also surface
+  // a per-modality breakdown on `promptTokensDetails` (e.g. text vs image input
+  // tokens for gpt-image-1). Usage-billed providers (fal) instead surface
+  // `usage.unitsBilled` — see the note below.
+  usage?: TokenUsage
+}
+
+interface GeneratedImage {
+  b64Json?: string // Base64 encoded image data
+  url?: string // URL to the image (OpenAI only)
+  revisedPrompt?: string // Revised prompt (OpenAI only)
+}
+```
+
+> **Cost tracking (fal):** fal bills by usage-based units rather than tokens. The
+> fal image adapter surfaces the real billed quantity as `usage.unitsBilled`
+> (read from fal's `x-fal-billable-units` result header). Multiply it by the
+> endpoint's unit price from
+> `GET https://api.fal.ai/v1/models/pricing?endpoint_id=…` for the exact cost —
+> no `fetch` interceptor needed.
+
+```typescript
+import { generateImage } from '@tanstack/ai'
+import { falImage } from '@tanstack/ai-fal'
+import { unitPrice } from './pricing'
+
+const result = await generateImage({
+  adapter: falImage('fal-ai/flux/dev'),
+  prompt: 'a serene mountain lake',
+})
+
+if (result.usage?.unitsBilled != null) {
+  const cost = result.usage.unitsBilled * unitPrice // unitPrice from fal pricing API
+  console.log(`Billed ${result.usage.unitsBilled} units (~$${cost})`)
+}
+```
+
+## Model Availability
+
+### OpenAI Models
+
+| Model | Images per Request |
+|-------|-------------------|
+| `gpt-image-2` | 1-10 |
+| `gpt-image-1` | 1-10 |
+| `gpt-image-1-mini` | 1-10 |
+| `dall-e-3` | 1 |
+| `dall-e-2` | 1-10 |
+
+### Gemini Native Models (NanoBanana)
+
+| Model | Description |
+|-------|-------------|
+| `gemini-3.1-flash-image-preview` | Latest and fastest Gemini native image generation |
+| `gemini-3.1-flash-lite-image` | Nano Banana 2 Lite — ultra-low-latency, low-cost image generation |
+| `gemini-3-pro-image-preview` | Higher quality Gemini native image generation |
+| `gemini-2.5-flash-image` | Gemini 2.5 Flash with image generation |
+
+### Gemini Imagen Models
+
+| Model | Images per Request |
+|-------|-------------------|
+| `imagen-4.0-ultra-generate-001` | 1-4 |
+| `imagen-4.0-generate-001` | 1-4 |
+| `imagen-4.0-fast-generate-001` | 1-4 |
+
+## Error Handling
+
+Image generation can fail for various reasons. The adapters validate inputs before making API calls:
+
+```typescript ignore
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+try {
+  const result = await generateImage({
+    adapter: openaiImage('dall-e-3'),
+    prompt: 'A cat',
+    size: '512x512', // Invalid size for DALL-E 3 — throws at runtime
+  })
+} catch (error) {
+  if (error instanceof Error) {
+    console.error(error.message)
+    // "Size "512x512" is not supported by model "dall-e-3". 
+    //  Supported sizes: 1024x1024, 1792x1024, 1024x1792"
+  }
+}
+```
+
+## Full-Stack Usage
+
+TanStack AI provides React hooks and server-side streaming helpers to build full-stack image generation with minimal boilerplate.
+
+### Streaming Mode (Server Route + Client Hook)
+
+**Server** — Create an API route that wraps `generateImage` as a streaming response:
+
+```typescript ignore
+// routes/api/generate/image.ts
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/generate/image')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const { prompt, size, model, numberOfImages } = body.data
+
+        const stream = generateImage({
+          adapter: openaiImage(model ?? 'dall-e-3'),
+          prompt,
+          size,
+          numberOfImages,
+          stream: true,
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+**Client** — Use the `useGenerateImage` hook with a connection adapter:
+
+```tsx
+import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function ImageGenerator() {
+  const { generate, result, isLoading, error, reset } = useGenerateImage({
+    connection: fetchServerSentEvents('/api/generate/image'),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ prompt: 'A sunset over mountains' })}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate'}
+      </button>
+      {error && <p>Error: {error.message}</p>}
+      {result?.images.map((img, i) => (
+        <img
+          key={i}
+          src={img.url || `data:image/png;base64,${img.b64Json}`}
+          alt={img.revisedPrompt || 'Generated image'}
+        />
+      ))}
+      {result && <button onClick={reset}>Clear</button>}
+    </div>
+  )
+}
+```
+
+### Direct Mode (Server Function + Fetcher)
+
+For non-streaming usage with TanStack Start server functions:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export const generateImageFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string; model?: string }) => data)
+  .handler(async ({ data }) => {
+    return generateImage({
+      adapter: openaiImage(data.model ?? 'dall-e-3'),
+      prompt: data.prompt,
+    })
+  })
+```
+
+```tsx
+// components/ImageGenerator.tsx
+import { useGenerateImage } from '@tanstack/ai-react'
+import { generateImageFn } from '../lib/server-functions'
+
+function ImageGenerator() {
+  const { generate, result, isLoading } = useGenerateImage({
+    fetcher: (data) => generateImageFn({ data }),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ prompt: 'A sunset over mountains' })}
+        disabled={isLoading}
+      >
+        Generate
+      </button>
+      {result?.images.map((img, i) => (
+        <img key={i} src={img.url || `data:image/png;base64,${img.b64Json}`} />
+      ))}
+    </div>
+  )
+}
+```
+
+### Server Function Streaming (Fetcher + Response)
+
+For TanStack Start server functions that stream results. The fetcher receives type-safe input and returns an SSE `Response` — the client parses it automatically:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export const generateImageStreamFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string; model?: string }) => data)
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateImage({
+        adapter: openaiImage(data.model ?? 'dall-e-3'),
+        prompt: data.prompt,
+        stream: true,
+      }),
+    )
+  })
+```
+
+```tsx
+import { useGenerateImage } from '@tanstack/ai-react'
+import { generateImageStreamFn } from '../lib/server-functions'
+
+function ImageGenerator() {
+  const { generate, result, isLoading } = useGenerateImage({
+    fetcher: (input) => generateImageStreamFn({ data: input }),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ prompt: 'A sunset over mountains' })}
+        disabled={isLoading}
+      >
+        Generate
+      </button>
+      {result?.images.map((img, i) => (
+        <img key={i} src={img.url || `data:image/png;base64,${img.b64Json}`} />
+      ))}
+    </div>
+  )
+}
+```
+
+### Hook API
+
+The `useGenerateImage` hook accepts:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `(input) => Promise<ImageGenerationResult \| Response>` | Direct async function, or server function returning an SSE `Response` |
+| `id` | `string` | Unique identifier for this instance |
+| `body` | `Record<string, any>` | Additional body parameters (connection mode) |
+| `onResult` | `(result) => TOutput \| null \| void` | Callback when images are generated. Optionally return a transformed value to store as `result` |
+| `onError` | `(error) => void` | Callback on error |
+| `onProgress` | `(progress, message?) => void` | Progress updates (0-100) |
+
+And returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `generate` | `(input: ImageGenerateInput) => Promise<void>` | Trigger generation |
+| `result` | `ImageGenerationResult \| null` | The result, or null |
+| `isLoading` | `boolean` | Whether generation is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current generation |
+| `reset` | `() => void` | Clear result, error, and return to idle |
+
+> **Tip:** To trigger image generation from your React, Vue, or Svelte app with loading states and error handling, see [Generation Hooks](/ai/media/generation-hooks).
+
+## Environment Variables
+
+The image adapters use the same environment variables as the text adapters:
+
+- **OpenAI**: `OPENAI_API_KEY`
+- **Gemini** (including NanoBanana): `GOOGLE_API_KEY` or `GEMINI_API_KEY`
+
+## Explicit API Keys
+
+For production use or when you need explicit control:
+
+```typescript
+import { createOpenaiImage } from '@tanstack/ai-openai'
+import { createGeminiImage } from '@tanstack/ai-gemini'
+
+// OpenAI
+const openaiAdapter = createOpenaiImage('dall-e-3', 'your-openai-api-key')
+
+// Gemini
+const geminiAdapter = createGeminiImage('imagen-4.0-generate-001', 'your-google-api-key')
+```
diff --git a/mintlify/ai/media/realtime-chat.md b/mintlify/ai/media/realtime-chat.md
new file mode 100644
index 000000000..e51726f7e
--- /dev/null
+++ b/mintlify/ai/media/realtime-chat.md
@@ -0,0 +1,543 @@
+---
+title: Realtime Voice Chat
+id: realtime-chat
+order: 2
+description: "Build realtime voice-to-voice AI chat with TanStack AI — WebRTC and WebSocket, voice activity detection, interruptions, and multimodal input."
+keywords:
+  - tanstack ai
+  - realtime voice
+  - voice chat
+  - webrtc
+  - websocket
+  - vad
+  - voice ai
+  - multimodal
+  - useRealtimeChat
+---
+
+TanStack AI provides a complete realtime voice chat system for building voice-to-voice AI interactions. The realtime API supports multiple providers (OpenAI, ElevenLabs), automatic tool execution, audio visualization, and multimodal input including images.
+
+## Overview
+
+Realtime voice chat differs from text-based chat in several key ways:
+
+- **Bidirectional audio** - Users speak into a microphone, and the AI responds with synthesized voice
+- **Voice Activity Detection (VAD)** - Automatically detects when the user starts and stops speaking
+- **Interruptions** - Users can interrupt the AI mid-response
+- **Low latency** - Uses WebRTC or WebSocket connections for near-instant communication
+- **Multimodal** - Supports text input, image input, and tool calling alongside voice
+
+The realtime system follows the same adapter architecture as the rest of TanStack AI:
+
+1. **Server** generates ephemeral tokens using `realtimeToken()` with a provider-specific token adapter
+2. **Client** connects using `RealtimeClient` (or `useRealtimeChat` in React) with a provider-specific connection adapter
+3. **Provider adapters** handle the protocol differences between OpenAI WebRTC, ElevenLabs WebSocket, etc.
+
+## Quick Start
+
+### 1. Set Up the Server Token Endpoint
+
+The server generates short-lived tokens so your API keys never reach the client:
+
+```typescript ignore
+import { realtimeToken } from '@tanstack/ai'
+import { openaiRealtimeToken } from '@tanstack/ai-openai'
+import { createServerFn } from '@tanstack/react-start'
+
+const getRealtimeToken = createServerFn({ method: 'POST' })
+  .handler(async () => {
+    return realtimeToken({
+      adapter: openaiRealtimeToken({
+        model: 'gpt-realtime',
+      }),
+    })
+  })
+```
+
+> **Note:** The `realtimeToken()` function works with any server framework. The example above uses TanStack Start, but you can use Express, Hono, Fastify, or any other framework that can handle HTTP requests.
+
+### 2. Connect from the Client (React)
+
+```tsx
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+
+function VoiceChat() {
+  const {
+    status,
+    mode,
+    messages,
+    connect,
+    disconnect,
+    pendingUserTranscript,
+    pendingAssistantTranscript,
+    inputLevel,
+    outputLevel,
+  } = useRealtimeChat({
+    getToken: () => fetch('/api/realtime-token', { method: 'POST' }).then(r => r.json()),
+    adapter: openaiRealtime(),
+    instructions: 'You are a helpful voice assistant.',
+    voice: 'alloy',
+  })
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      <p>Mode: {mode}</p>
+      <button onClick={status === 'idle' ? connect : disconnect}>
+        {status === 'idle' ? 'Start Conversation' : 'End Conversation'}
+      </button>
+      {pendingUserTranscript && <p>You: {pendingUserTranscript}...</p>}
+      {pendingAssistantTranscript && <p>AI: {pendingAssistantTranscript}...</p>}
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          <strong>{msg.role}:</strong>
+          {msg.parts.map((part, i) => (
+            <span key={i}>
+              {part.type === 'text' ? part.content : null}
+              {part.type === 'audio' ? part.transcript : null}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+## Providers
+
+### OpenAI Realtime
+
+OpenAI's realtime API uses WebRTC for low-latency voice communication.
+
+**Server (token generation):**
+
+```typescript
+import { realtimeToken } from '@tanstack/ai'
+import { openaiRealtimeToken } from '@tanstack/ai-openai'
+
+const token = await realtimeToken({
+  adapter: openaiRealtimeToken({
+    model: 'gpt-realtime',
+  }),
+})
+```
+
+**Client (connection):**
+
+```typescript
+import { openaiRealtime } from '@tanstack/ai-openai'
+
+const adapter = openaiRealtime()
+```
+
+**Environment variables:** `OPENAI_API_KEY`
+
+**Available models:**
+
+| Model | Description |
+|-------|-------------|
+| `gpt-realtime` | Full realtime model |
+| `gpt-realtime-mini` | Smaller, faster realtime model |
+
+**Available voices:** `alloy`, `ash`, `ballad`, `coral`, `echo`, `sage`, `shimmer`, `verse`, `marin`, `cedar`
+
+### ElevenLabs Realtime
+
+ElevenLabs uses WebSocket connections and requires an agent configured in their dashboard.
+
+**Server (token generation):**
+
+```typescript
+import { realtimeToken } from '@tanstack/ai'
+import { elevenlabsRealtimeToken } from '@tanstack/ai-elevenlabs'
+
+const token = await realtimeToken({
+  adapter: elevenlabsRealtimeToken({
+    agentId: 'your-agent-id',
+  }),
+})
+```
+
+**Client (connection):**
+
+```typescript
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+
+const adapter = elevenlabsRealtime()
+```
+
+**Environment variables:** `ELEVENLABS_API_KEY`, `ELEVENLABS_AGENT_ID` (optional)
+
+## Voice Activity Detection (VAD)
+
+VAD controls when the system detects that you've started and stopped speaking. Three modes are available:
+
+| Mode | How it works | Best for |
+|------|-------------|----------|
+| `server` | The provider detects speech server-side using audio energy levels | Default — simple, low client complexity |
+| `semantic` | Detects end-of-utterance using semantic cues like pauses and sentence completion | Natural conversation — avoids cutting you off mid-sentence |
+| `manual` | You call `startListening()` / `stopListening()` explicitly | Push-to-talk interfaces |
+
+Set the VAD mode when creating the hook:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+
+const { startListening, stopListening, vadMode, setVADMode } = useRealtimeChat({
+  getToken,
+  adapter: openaiRealtime(),
+  vadMode: 'manual', // or 'server' or 'semantic'
+})
+```
+
+With `manual` VAD mode, use push-to-talk style interactions:
+
+```tsx ignore
+<button onMouseDown={startListening} onMouseUp={stopListening}>
+  Hold to talk
+</button>
+```
+
+You can switch VAD mode at runtime without reconnecting:
+
+```typescript ignore
+setVADMode('semantic')
+```
+
+For semantic VAD, configure eagerness to control how long the model waits before deciding you've finished speaking:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+
+const chat = useRealtimeChat({
+  getToken,
+  adapter: openaiRealtime(),
+  vadMode: 'semantic',
+  semanticEagerness: 'low', // waits longer before detecting end-of-speech
+})
+```
+
+## Tools
+
+Realtime sessions support client-side tools. Define tools using the standard `toolDefinition()` API and pass their client implementations:
+
+```typescript
+import { toolDefinition } from '@tanstack/ai'
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+import { z } from 'zod'
+
+const getWeatherDef = toolDefinition({
+  name: 'getWeather',
+  description: 'Get weather for a location',
+  inputSchema: z.object({
+    location: z.string().meta({ description: 'City name' }),
+  }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+  }),
+})
+
+const getWeather = getWeatherDef.client(async ({ location }) => {
+  const res = await fetch(`/api/weather?location=${location}`)
+  return res.json()
+})
+
+// Pass tools to the hook
+const chat = useRealtimeChat({
+  getToken,
+  adapter: openaiRealtime(),
+  tools: [getWeather],
+})
+```
+
+The realtime client automatically executes tool calls and sends results back to the provider. Tool calls appear as `tool-call` and `tool-result` parts in messages.
+
+## Text and Image Input
+
+In addition to voice, you can send text messages and images:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+import { base64ImageData } from './assets'
+
+const { sendText, sendImage } = useRealtimeChat({ getToken, adapter: openaiRealtime() })
+
+// Send a text message
+sendText('What is the weather like today?')
+
+// Send an image (base64 data or URL)
+sendImage(base64ImageData, 'image/png')
+```
+
+## Audio Visualization
+
+`useRealtimeChat` exposes audio analysis data for building level meters, waveforms, and spectrum analyzers.
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+
+const {
+  inputLevel,    // 0–1 normalized microphone level
+  outputLevel,   // 0–1 normalized speaker level
+  getInputFrequencyData,   // Uint8Array — FFT bins for spectrum analyzer
+  getOutputFrequencyData,
+  getInputTimeDomainData,  // Uint8Array — waveform samples for oscilloscope
+  getOutputTimeDomainData,
+} = useRealtimeChat({ getToken, adapter: openaiRealtime() })
+```
+
+The `inputLevel` and `outputLevel` values update on every animation frame while connected, making them suitable for driving CSS animations or canvas visualizations.
+
+**Simple level meter:**
+
+```tsx ignore
+<div style={{ width: `${inputLevel * 100}%`, height: 4, background: 'green' }} />
+```
+
+**Pulsing audio indicator:**
+
+```tsx
+function AudioIndicator({ level }: { level: number }) {
+  return (
+    <div
+      style={{
+        width: 40,
+        height: 40,
+        borderRadius: '50%',
+        transform: `scale(${1 + level * 0.5})`,
+        backgroundColor: `rgba(59, 130, 246, ${0.3 + level * 0.7})`,
+        transition: 'transform 0.1s ease',
+      }}
+    />
+  )
+}
+```
+
+**Spectrum analyzer using canvas:**
+
+```typescript ignore
+function drawSpectrum(canvas: HTMLCanvasElement) {
+  const ctx = canvas.getContext('2d')!
+  const draw = () => {
+    const data = getInputFrequencyData()
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    const barWidth = canvas.width / data.length
+    data.forEach((value, i) => {
+      const height = (value / 255) * canvas.height
+      ctx.fillRect(i * barWidth, canvas.height - height, barWidth - 1, height)
+    })
+    requestAnimationFrame(draw)
+  }
+  draw()
+}
+```
+
+## Session Configuration
+
+Configure the realtime session through the hook options:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `getToken` | `() => Promise<RealtimeToken>` | required | Function to fetch a token from the server |
+| `adapter` | `RealtimeAdapter` | required | Provider adapter (`openaiRealtime()`, `elevenlabsRealtime()`) |
+| `instructions` | `string` | — | System instructions for the assistant |
+| `voice` | `string` | — | Voice to use for audio output |
+| `tools` | `AnyClientTool[]` | — | Client-side tools with execution logic |
+| `vadMode` | `'server' \| 'semantic' \| 'manual'` | `'server'` | Voice activity detection mode |
+| `semanticEagerness` | `'low' \| 'medium' \| 'high'` | — | Eagerness for semantic VAD |
+| `autoPlayback` | `boolean` | `true` | Auto-play assistant audio |
+| `autoCapture` | `boolean` | `true` | Request microphone on connect |
+| `outputModalities` | `Array<'audio' \| 'text'>` | — | Response modalities |
+| `temperature` | `number` | — | Generation temperature |
+| `maxOutputTokens` | `number \| 'inf'` | — | Max tokens in a response |
+
+## Connection Lifecycle
+
+The realtime client manages a connection lifecycle with these statuses:
+
+| Status | Description |
+|--------|-------------|
+| `idle` | Not connected |
+| `connecting` | Establishing connection |
+| `connected` | Active session |
+| `reconnecting` | Reconnecting after interruption |
+| `error` | Connection error occurred |
+
+And these modes while connected:
+
+| Mode | Description |
+|------|-------------|
+| `idle` | Connected but not actively interacting |
+| `listening` | Capturing user audio input |
+| `thinking` | Processing user input |
+| `speaking` | AI is generating a response |
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+import { useEffect } from 'react'
+
+const { status, mode, error, connect, disconnect } = useRealtimeChat({ getToken, adapter: openaiRealtime() })
+
+// Handle connection
+useEffect(() => {
+  if (status === 'error' && error) {
+    console.error('Connection error:', error.message)
+  }
+}, [status, error])
+```
+
+## Interruptions
+
+Users can interrupt the AI while it's speaking:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+
+const { interrupt, mode } = useRealtimeChat({ getToken, adapter: openaiRealtime() })
+
+// Programmatically interrupt
+if (mode === 'speaking') {
+  interrupt()
+}
+```
+
+With server or semantic VAD, interruptions happen automatically when the user starts speaking. Interrupted messages are marked with `interrupted: true` in the messages array.
+
+## Using RealtimeClient Directly
+
+For non-React applications or more control, use `RealtimeClient` directly:
+
+```typescript
+import { RealtimeClient } from '@tanstack/ai-client'
+import { openaiRealtime } from '@tanstack/ai-openai'
+
+const client = new RealtimeClient({
+  getToken: () => fetch('/api/realtime-token', { method: 'POST' }).then(r => r.json()),
+  adapter: openaiRealtime(),
+  instructions: 'You are a helpful assistant.',
+  voice: 'alloy',
+  onMessage: (message) => {
+    console.log(`${message.role}:`, message.parts)
+  },
+  onStatusChange: (status) => {
+    console.log('Status:', status)
+  },
+  onModeChange: (mode) => {
+    console.log('Mode:', mode)
+  },
+})
+
+// Connect
+await client.connect()
+
+// Send text
+client.sendText('Hello!')
+
+// Subscribe to state changes
+const unsub = client.onStateChange((state) => {
+  console.log('Messages:', state.messages.length)
+})
+
+// Disconnect when done
+await client.disconnect()
+
+// Clean up
+client.destroy()
+```
+
+## Message Structure
+
+Realtime messages use a `parts`-based structure similar to `UIMessage`:
+
+```typescript
+import type { RealtimeMessagePart } from '@tanstack/ai'
+
+interface RealtimeMessage {
+  id: string
+  role: 'user' | 'assistant'
+  timestamp: number
+  parts: Array<RealtimeMessagePart>
+  interrupted?: boolean
+}
+```
+
+Each part can be one of:
+
+| Part Type | Fields | Description |
+|-----------|--------|-------------|
+| `text` | `content` | Text content from `sendText()` |
+| `audio` | `transcript`, `durationMs` | Transcribed voice content |
+| `tool-call` | `id`, `name`, `arguments`, `input`, `output` | Tool invocation |
+| `tool-result` | `toolCallId`, `content` | Tool execution result |
+| `image` | `data`, `mimeType` | Image sent via `sendImage()` |
+
+## Error Handling
+
+Handle errors through the `onError` callback or the `error` state:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+import { getToken } from './token'
+
+const { error } = useRealtimeChat({
+  getToken,
+  adapter: openaiRealtime(),
+  onError: (err: Error) => {
+    if (err.message.includes('Permission denied')) {
+      alert('Microphone access is required for voice chat.')
+    } else {
+      console.error('Realtime error:', err)
+    }
+  },
+})
+```
+
+## Best Practices
+
+1. **Token security** - Always generate tokens server-side. Never expose API keys to the client.
+2. **Microphone permissions** - Handle the case where the user denies microphone access gracefully.
+3. **Cleanup** - Always disconnect when unmounting components. The `useRealtimeChat` hook handles this automatically.
+4. **Instructions** - Keep voice assistant instructions concise. Remind the model it's in a voice interface so responses stay conversational.
+5. **Tool design** - Keep tool descriptions clear and tool outputs small, since results are processed in real time.
+6. **Error recovery** - Implement retry logic for transient connection failures.
+
+## Using ElevenLabs
+
+TanStack AI supports [ElevenLabs](/ai/adapters/elevenlabs) as an alternative realtime voice provider. The client API is identical — swap the adapter and token function:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+
+const { status, messages, connect, disconnect } = useRealtimeChat({
+  getToken: () => fetch('/api/elevenlabs-token').then(r => r.json()),
+  adapter: elevenlabsRealtime(),
+})
+```
+
+> **Note:** ElevenLabs uses agent-based configuration — voice and system prompt are set in the ElevenLabs dashboard or via token overrides. See the [ElevenLabs adapter page](/ai/adapters/elevenlabs) for setup details.
+
+## Next Steps
+
+- [Tools](/ai/tools/tools) - Learn about the isomorphic tool system
+- [Text-to-Speech](/ai/media/text-to-speech) - Non-realtime speech generation
+- [Multimodal Content](/ai/advanced/multimodal-content) - Working with images, audio, and video
+- [ElevenLabs Adapter](/ai/adapters/elevenlabs) - ElevenLabs realtime voice provider setup and configuration
diff --git a/mintlify/ai/media/text-to-speech.md b/mintlify/ai/media/text-to-speech.md
new file mode 100644
index 000000000..f99664fb3
--- /dev/null
+++ b/mintlify/ai/media/text-to-speech.md
@@ -0,0 +1,538 @@
+---
+title: Text-to-Speech
+id: text-to-speech
+order: 3
+description: "Convert text to spoken audio with OpenAI TTS and Gemini voice models via TanStack AI's generateSpeech() API."
+keywords:
+  - tanstack ai
+  - text-to-speech
+  - tts
+  - generateSpeech
+  - openai tts
+  - voice synthesis
+  - speech generation
+---
+
+# Text-to-Speech (TTS)
+
+TanStack AI provides support for text-to-speech generation through dedicated TTS adapters. This guide covers how to convert text into spoken audio using OpenAI and Gemini providers.
+
+## Overview
+
+Text-to-speech (TTS) is handled by TTS adapters that follow the same tree-shakeable architecture as other adapters in TanStack AI. The TTS adapters support:
+
+- **OpenAI**: TTS-1, TTS-1-HD, and audio-capable GPT-4o models
+- **Gemini**: Gemini 2.5 Flash TTS (experimental)
+- **fal.ai**: Kokoro, ElevenLabs, MiniMax, Chatterbox, Dia, Orpheus, F5-TTS, VibeVoice, and more
+
+## Basic Usage
+
+### OpenAI Text-to-Speech
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+// Generate speech from text (uses OPENAI_API_KEY from environment)
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1'),
+  text: 'Hello, welcome to TanStack AI!',
+  voice: 'alloy',
+})
+
+// result.audio contains base64-encoded audio data
+console.log(result.format) // 'mp3'
+console.log(result.contentType) // 'audio/mpeg'
+```
+
+### Gemini Text-to-Speech (Experimental)
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { geminiSpeech } from '@tanstack/ai-gemini'
+
+// Generate speech from text (uses GOOGLE_API_KEY or GEMINI_API_KEY from environment)
+const result = await generateSpeech({
+  adapter: geminiSpeech('gemini-3.1-flash-tts-preview'),
+  text: 'Hello from Gemini TTS!',
+})
+
+console.log(result.audio) // Base64 encoded audio
+```
+
+### fal.ai Text-to-Speech
+
+fal.ai offers a broad selection of TTS models — Google's brand-new `gemini-3.1-flash-tts`, ElevenLabs v3, MiniMax 2.6 HD, Kokoro's multilingual voices, and more. Pass the model ID as a string literal for fully typed `modelOptions`.
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { falSpeech } from '@tanstack/ai-fal'
+
+// Google Gemini 3.1 Flash TTS — 80+ languages, expressive audio tags
+const result = await generateSpeech({
+  adapter: falSpeech('fal-ai/gemini-3.1-flash-tts'),
+  text: '[warm, enthusiastic] Welcome to TanStack AI!',
+  voice: 'Kore',
+})
+```
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { falSpeech } from '@tanstack/ai-fal'
+
+// Kokoro multilingual
+const result = await generateSpeech({
+  adapter: falSpeech('fal-ai/kokoro/american-english'),
+  text: 'Hello from fal!',
+  voice: 'af_heart',
+  speed: 1.0,
+})
+
+console.log(result.audio) // Base64 encoded audio
+console.log(result.format) // e.g. "wav"
+```
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { falSpeech } from '@tanstack/ai-fal'
+
+// ElevenLabs v3 with model-specific options
+const result = await generateSpeech({
+  adapter: falSpeech('fal-ai/elevenlabs/tts/eleven-v3'),
+  text: 'Welcome to TanStack AI.',
+  // The fal adapter maps top-level `voice`/`speed` into the model input;
+  // `modelOptions` is reserved for model-specific keys.
+  voice: 'Rachel',
+  modelOptions: {
+    stability: 0.5,
+  },
+})
+```
+
+## Options
+
+### Common Options
+
+All TTS adapters support these common options:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `text` | `string` | The text to convert to speech (required) |
+| `voice` | `string` | The voice to use for generation |
+| `format` | `string` | Output audio format (e.g., "mp3", "wav") |
+
+### OpenAI Voice Options
+
+OpenAI provides several distinct voices:
+
+| Voice | Description |
+|-------|-------------|
+| `alloy` | Neutral, balanced voice |
+| `echo` | Warm, conversational voice |
+| `fable` | Expressive, storytelling voice |
+| `onyx` | Deep, authoritative voice |
+| `nova` | Friendly, upbeat voice |
+| `shimmer` | Clear, gentle voice |
+| `ash` | Calm, measured voice |
+| `ballad` | Melodic, flowing voice |
+| `coral` | Bright, energetic voice |
+| `sage` | Wise, thoughtful voice |
+| `verse` | Poetic, rhythmic voice |
+
+### OpenAI Format Options
+
+| Format | Description |
+|--------|-------------|
+| `mp3` | MP3 audio (default) |
+| `opus` | Opus audio (good for streaming) |
+| `aac` | AAC audio |
+| `flac` | FLAC audio (lossless) |
+| `wav` | WAV audio (uncompressed) |
+| `pcm` | Raw PCM audio |
+
+## Model Options
+
+### OpenAI Model Options
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1-hd'),
+  text: 'High quality speech synthesis',
+  voice: 'nova',
+  format: 'mp3',
+  speed: 1.0, // top-level option, 0.25 to 4.0
+  modelOptions: {
+    instructions: 'Speak in a calm, measured tone', // GPT-4o audio models only
+  },
+})
+```
+
+> **Note:** `voice`, `format`, and `speed` are top-level `generateSpeech` options, not `modelOptions` keys.
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `instructions` | `string` | Voice style instructions (GPT-4o audio models only) |
+
+> **Note:** The `instructions` and `stream_format` options are only available with the `gpt-4o-audio-preview` model, not with `tts-1` or `tts-1-hd`.
+
+## Response Format
+
+The TTS result includes:
+
+```typescript ignore
+interface TTSResult {
+  id: string        // Unique identifier for this generation
+  model: string     // The model used
+  audio: string     // Base64-encoded audio data
+  format: string    // Audio format (e.g., "mp3")
+  contentType: string // MIME type (e.g., "audio/mpeg")
+  duration?: number // Duration in seconds (if available)
+}
+```
+
+## Playing Audio in the Browser
+
+```typescript ignore
+// Convert base64 to audio and play
+function playAudio(result: TTSResult) {
+  const audioData = atob(result.audio)
+  const bytes = new Uint8Array(audioData.length)
+  for (let i = 0; i < audioData.length; i++) {
+    bytes[i] = audioData.charCodeAt(i)
+  }
+  
+  const blob = new Blob([bytes], { type: result.contentType })
+  const url = URL.createObjectURL(blob)
+  
+  const audio = new Audio(url)
+  audio.play()
+  
+  // Clean up when done
+  audio.onended = () => URL.revokeObjectURL(url)
+}
+```
+
+## Saving Audio to File (Node.js)
+
+```typescript ignore
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+import { writeFile } from 'fs/promises'
+
+async function saveAudio(result: TTSResult, filename: string) {
+  const audioBuffer = Buffer.from(result.audio, 'base64')
+  await writeFile(filename, audioBuffer)
+  console.log(`Saved to ${filename}`)
+}
+
+// Usage
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1'),
+  text: 'Hello world!',
+})
+
+await saveAudio(result, 'output.mp3')
+```
+
+## Full-Stack Usage
+
+TanStack AI provides React hooks and server-side streaming helpers to build full-stack text-to-speech with minimal boilerplate.
+
+### Streaming Mode (Server Route + Client Hook)
+
+**Server** — Create an API route that wraps `generateSpeech` as a streaming response:
+
+```typescript ignore
+// routes/api/generate/speech.ts
+import { generateSpeech, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/generate/speech')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const { text, voice, format, model } = body.data
+
+        const stream = generateSpeech({
+          adapter: openaiSpeech(model ?? 'tts-1'),
+          text,
+          voice,
+          format,
+          stream: true,
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+**Client** — Use the `useGenerateSpeech` hook with a connection adapter:
+
+```tsx
+import { useGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function SpeechGenerator() {
+  const { generate, result, isLoading, error } = useGenerateSpeech({
+    connection: fetchServerSentEvents('/api/generate/speech'),
+  })
+
+  const playAudio = () => {
+    if (!result) return
+    const audioData = atob(result.audio)
+    const bytes = new Uint8Array(audioData.length)
+    for (let i = 0; i < audioData.length; i++) {
+      bytes[i] = audioData.charCodeAt(i)
+    }
+    const blob = new Blob([bytes], { type: result.contentType })
+    const url = URL.createObjectURL(blob)
+    const audio = new Audio(url)
+    audio.play()
+    audio.onended = () => URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ text: 'Hello, welcome to TanStack AI!' })}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate Speech'}
+      </button>
+      {error && <p>Error: {error.message}</p>}
+      {result && <button onClick={playAudio}>Play Audio</button>}
+    </div>
+  )
+}
+```
+
+### Direct Mode (Server Function + Fetcher)
+
+For non-streaming usage with TanStack Start server functions:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+export const generateSpeechFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { text: string; voice?: string }) => data)
+  .handler(async ({ data }) => {
+    return generateSpeech({
+      adapter: openaiSpeech('tts-1'),
+      text: data.text,
+      voice: data.voice,
+    })
+  })
+```
+
+```tsx
+import { useGenerateSpeech } from '@tanstack/ai-react'
+import { generateSpeechFn } from '../lib/server-functions'
+
+function SpeechGenerator() {
+  const { generate, result, isLoading } = useGenerateSpeech({
+    fetcher: (input) => generateSpeechFn({ data: input }),
+  })
+  // ... same UI as above
+}
+```
+
+### Server Function Streaming (Fetcher + Response)
+
+For TanStack Start server functions that stream results. The fetcher receives type-safe input and returns an SSE `Response` — the client parses it automatically:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateSpeech, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+export const generateSpeechStreamFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { text: string; voice?: string }) => data)
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateSpeech({
+        adapter: openaiSpeech('tts-1'),
+        text: data.text,
+        voice: data.voice,
+        stream: true,
+      }),
+    )
+  })
+```
+
+```tsx
+import { useGenerateSpeech } from '@tanstack/ai-react'
+import { generateSpeechStreamFn } from '../lib/server-functions'
+
+function SpeechGenerator() {
+  const { generate, result, isLoading } = useGenerateSpeech({
+    fetcher: (input) => generateSpeechStreamFn({ data: input }),
+  })
+  // ... same UI as above
+}
+```
+
+### Hook API
+
+The `useGenerateSpeech` hook accepts:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `(input) => Promise<TTSResult \| Response>` | Direct async function, or server function returning an SSE `Response` |
+| `onResult` | `(result) => TOutput \| null \| void` | Callback when audio is generated. Optionally return a transformed value (see [Result Transform](#result-transform)) |
+| `onError` | `(error) => void` | Callback on error |
+| `onProgress` | `(progress, message?) => void` | Progress updates (0-100) |
+
+And returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `generate` | `(input: SpeechGenerateInput) => Promise<void>` | Trigger generation |
+| `result` | `TOutput \| null` | The result (or transformed result), or null |
+| `isLoading` | `boolean` | Whether generation is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current generation |
+| `reset` | `() => void` | Clear result, error, and return to idle |
+
+### Result Transform
+
+The `onResult` callback can optionally return a transformed value that replaces the stored `result`. This is useful for converting raw API responses into a more convenient format for your components.
+
+**Transform behavior:**
+- Return a **non-null value** to replace the stored result with the transformed value
+- Return **`null`** to keep the previous result unchanged (useful for filtering)
+- Return **nothing** (`void`) to store the raw result as-is (backward compatible)
+
+**Example: Convert base64 audio to a playable Audio element**
+
+```tsx
+import { useGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-react'
+import type { TTSResult } from '@tanstack/ai'
+
+function SpeechPlayer() {
+  const { generate, result, isLoading } = useGenerateSpeech({
+    connection: fetchServerSentEvents('/api/generate/speech'),
+    onResult: (raw: TTSResult) => {
+      const audioData = atob(raw.audio)
+      const bytes = new Uint8Array(audioData.length)
+      for (let i = 0; i < audioData.length; i++) {
+        bytes[i] = audioData.charCodeAt(i)
+      }
+      const blob = new Blob([bytes], { type: raw.contentType })
+      const url = URL.createObjectURL(blob)
+      return {
+        audio: new Audio(url),
+        duration: raw.duration,
+      }
+    },
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => generate({ text: 'Hello world!', voice: 'alloy' })}
+        disabled={isLoading}
+      >
+        Generate
+      </button>
+      {result && (
+        <button onClick={() => result.audio.play()}>
+          Play Audio
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+TypeScript automatically infers the result type from your `onResult` return value — no explicit generic parameter needed. In this example, `result` is inferred as `{ audio: HTMLAudioElement; duration?: number } | null`, so `result.audio.play()` is fully type-safe.
+
+## Model Availability
+
+### OpenAI Models
+
+| Model | Quality | Speed | Use Case |
+|-------|---------|-------|----------|
+| `tts-1` | Standard | Fast | Real-time applications |
+| `tts-1-hd` | High | Slower | Production audio |
+| `gpt-4o-audio-preview` | Highest | Variable | Advanced voice control |
+
+### Gemini Models
+
+| Model | Status | Notes |
+|-------|--------|-------|
+| `gemini-2.5-flash-preview-tts` | Experimental | May require Live API for full features |
+
+## Error Handling
+
+```typescript
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+try {
+  const result = await generateSpeech({
+    adapter: openaiSpeech('tts-1'),
+    text: 'Hello!',
+  })
+} catch (error) {
+  if (error instanceof Error) {
+    if (error.message.includes('exceeds maximum length')) {
+      console.error('Text is too long (max 4096 characters)')
+    } else if (error.message.includes('Speed must be between')) {
+      console.error('Invalid speed value')
+    } else {
+      console.error('TTS error:', error.message)
+    }
+  }
+}
+```
+
+> **Tip:** To trigger speech generation from your frontend with loading states, see [Generation Hooks](/ai/media/generation-hooks).
+
+> **Debugging:** When a TTS request fails or produces unexpected output, pass `debug: true` on `generateSpeech({...})` to log the outgoing request, every raw provider chunk, and any caught error. See [Debug Logging](/ai/advanced/debug-logging).
+
+## Environment Variables
+
+The TTS adapters use the same environment variables as other adapters:
+
+- **OpenAI**: `OPENAI_API_KEY`
+- **Gemini**: `GOOGLE_API_KEY` or `GEMINI_API_KEY`
+
+## Explicit API Keys
+
+For production use or when you need explicit control:
+
+```typescript
+import { createOpenaiSpeech } from '@tanstack/ai-openai'
+import { createGeminiSpeech } from '@tanstack/ai-gemini'
+
+// OpenAI
+const openaiAdapter = createOpenaiSpeech('tts-1', 'your-openai-api-key')
+
+// Gemini
+const geminiAdapter = createGeminiSpeech('gemini-3.1-flash-tts-preview', 'your-google-api-key')
+```
+
+## Best Practices
+
+1. **Text Length**: OpenAI TTS supports up to 4096 characters per request. For longer content, split into chunks.
+
+2. **Voice Selection**: Choose voices appropriate for your content—use `onyx` for authoritative content, `nova` for friendly interactions.
+
+3. **Format Selection**: Use `mp3` for general use, `opus` for streaming, `wav` for further processing.
+
+4. **Caching**: Cache generated audio to avoid regenerating the same content.
+
+5. **Error Handling**: Always handle errors gracefully, especially for user-facing applications.
+
diff --git a/mintlify/ai/media/transcription.md b/mintlify/ai/media/transcription.md
new file mode 100644
index 000000000..494d14c25
--- /dev/null
+++ b/mintlify/ai/media/transcription.md
@@ -0,0 +1,633 @@
+---
+title: Transcription
+id: transcription
+order: 4
+description: "Transcribe audio to text with OpenAI Whisper and GPT-4o transcription models (including speaker diarization), Groq Whisper, and fal.ai STT models via TanStack AI's generateTranscription() API."
+keywords:
+  - tanstack ai
+  - transcription
+  - speech-to-text
+  - asr
+  - whisper
+  - generateTranscription
+  - openai
+  - groq
+  - fal
+---
+
+# Audio Transcription
+
+TanStack AI provides support for audio transcription (speech-to-text) through dedicated transcription adapters. This guide covers how to convert spoken audio into text using OpenAI's Whisper and GPT-4o transcription models, Groq's hosted Whisper models, and fal.ai STT models.
+
+## Overview
+
+Audio transcription is handled by transcription adapters that follow the same tree-shakeable architecture as other adapters in TanStack AI.
+
+Currently supported:
+- **OpenAI**: Whisper-1, GPT-4o-transcribe, GPT-4o-mini-transcribe, GPT-4o-transcribe-diarize
+- **Groq**: whisper-large-v3-turbo, whisper-large-v3
+- **fal.ai**: Whisper, Wizper, speech-to-text turbo, ElevenLabs speech-to-text
+
+## Basic Usage
+
+### OpenAI Transcription
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { audioBuffer } from './audio'
+
+// Transcribe audio from a file (the adapter uses OPENAI_API_KEY from environment)
+const audioFile = new File([audioBuffer], 'audio.mp3', { type: 'audio/mpeg' })
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: audioFile,
+  language: 'en',
+})
+
+console.log(result.text) // The transcribed text
+```
+
+### Using Base64 Audio
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { readFile } from 'fs/promises'
+
+// Read audio file as base64
+const audioBuffer = await readFile('recording.mp3')
+const base64Audio = audioBuffer.toString('base64')
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: base64Audio,
+})
+
+console.log(result.text)
+```
+
+### Using Data URLs
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { base64AudioData } from './audio'
+
+const dataUrl = `data:audio/mpeg;base64,${base64AudioData}`
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: dataUrl,
+})
+```
+
+### Groq Transcription
+
+Groq hosts Whisper large-v3 and large-v3-turbo on its fast inference stack. The `audio` input accepts a `File`, `Blob`, `ArrayBuffer`, base64 string, data URL, or an `https://` URL (which is forwarded to Groq without re-uploading).
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { groqTranscription } from '@tanstack/ai-groq'
+
+const result = await generateTranscription({
+  adapter: groqTranscription('whisper-large-v3-turbo'),
+  audio: 'https://example.com/recording.mp3',
+  language: 'en',
+})
+
+console.log(result.text)
+console.log(result.language)
+
+// verbose_json is the default — segments carry segment-level start/end timestamps
+for (const segment of result.segments ?? []) {
+  console.log(`[${segment.start}s → ${segment.end}s] ${segment.text}`)
+}
+```
+
+> **Note:** Groq supports `responseFormat` values `json`, `text`, and `verbose_json` (default). `srt` and `vtt` are not supported — passing them throws. Provider-specific `modelOptions` are `temperature` and `timestamp_granularities` (`['word']`, `['segment']`, or both).
+
+### fal.ai Transcription
+
+fal.ai offers Whisper, Wizper, and other STT models. The `audio` input accepts a URL, `File`, `Blob`, or `ArrayBuffer` (auto-wrapped in a `Blob`).
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { falTranscription } from '@tanstack/ai-fal'
+
+const result = await generateTranscription({
+  adapter: falTranscription('fal-ai/whisper'),
+  audio: 'https://example.com/recording.mp3',
+  language: 'en',
+})
+
+console.log(result.text)
+console.log(result.language)
+
+// Models that return word/chunk timestamps populate result.segments
+for (const segment of result.segments ?? []) {
+  console.log(`[${segment.start}s → ${segment.end}s] ${segment.text}`)
+}
+```
+
+## Options
+
+### Common Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `audio` | `File \| string` | Audio data (File object or base64 string) - required |
+| `language` | `string` | Language code (e.g., "en", "es", "fr") |
+| `prompt` | `string` | Optional prompt to guide transcription style or terms. Not supported with `gpt-4o-transcribe-diarize`. |
+| `responseFormat` | `'json' \| 'text' \| 'srt' \| 'verbose_json' \| 'vtt'` | Common output format |
+
+### Supported Languages
+
+Whisper supports many languages. Common codes include:
+
+| Code | Language |
+|------|----------|
+| `en` | English |
+| `es` | Spanish |
+| `fr` | French |
+| `de` | German |
+| `it` | Italian |
+| `pt` | Portuguese |
+| `ja` | Japanese |
+| `ko` | Korean |
+| `zh` | Chinese |
+| `ru` | Russian |
+
+> **Tip:** Providing the correct language code improves accuracy and reduces latency.
+
+## Model Options
+
+### OpenAI Model Options
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { audioFile } from './audio'
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: audioFile,
+  responseFormat: 'verbose_json', // Top-level: detailed output with timestamps
+  prompt: 'Technical terms: API, SDK, CLI', // Top-level: guide transcription
+  modelOptions: {
+    temperature: 0, // Lower = more deterministic (provider option)
+    timestamp_granularities: ['word', 'segment'],
+  },
+})
+```
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `temperature` | `number` | Sampling temperature (0 to 1) |
+| `timestamp_granularities` | `Array<'word' \| 'segment'>` | Timestamp granularity to populate (`whisper-1` only; requires top-level `responseFormat: 'verbose_json'`) |
+| `include` | `string[]` | Additional values to include in the response (e.g., `logprobs`) |
+| `response_format` | `'json' \| 'text' \| 'srt' \| 'verbose_json' \| 'vtt' \| 'diarized_json'` | Raw OpenAI response format. Use `diarized_json` here for speaker-labeled diarization output. |
+| `chunking_strategy` | `'auto' \| { type: 'server_vad', ... } \| null` | Audio chunking strategy (any model; unset transcribes the audio as a single block). Required by OpenAI for `gpt-4o-transcribe-diarize` inputs longer than 30 seconds — the adapter defaults it to `'auto'` for that model |
+| `known_speaker_names` | `string[]` | Up to four speaker labels for diarization |
+| `known_speaker_references` | `string[]` | 2-10 second data URL audio samples matching `known_speaker_names` |
+
+> `responseFormat` and `prompt` are **top-level** options on `generateTranscription`, not `modelOptions` keys.
+
+### Response Formats
+
+| Format | Description |
+|--------|-------------|
+| `json` | Simple JSON with text |
+| `text` | Plain text only |
+| `srt` | SubRip subtitle format |
+| `verbose_json` | Detailed JSON with timestamps and segments |
+| `vtt` | WebVTT subtitle format |
+
+OpenAI's `gpt-4o-transcribe-diarize` also supports `modelOptions.response_format: 'diarized_json'` for speaker-labeled segments.
+
+### Speaker Diarization
+
+Use `gpt-4o-transcribe-diarize` when you need speaker labels. When no response format is specified, TanStack AI defaults the request to `response_format: 'diarized_json'` and sends `chunking_strategy: 'auto'` unless you provide a chunking strategy yourself. Passing a top-level `responseFormat: 'json'` or `'text'` opts out of speaker segments.
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { meetingAudioFile } from './audio'
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('gpt-4o-transcribe-diarize'),
+  audio: meetingAudioFile,
+  modelOptions: {
+    known_speaker_names: ['agent', 'customer'],
+    known_speaker_references: [
+      'data:audio/wav;base64,...',
+      'data:audio/wav;base64,...',
+    ],
+  },
+})
+
+for (const segment of result.segments ?? []) {
+  console.log(segment.speaker, segment.start, segment.end, segment.text)
+}
+```
+
+OpenAI accepts up to four known speaker references; `known_speaker_names` and `known_speaker_references` must be provided together with matching lengths. The diarization model does not support `prompt`, `include`, or `timestamp_granularities`; the adapter rejects those combinations before making the API request.
+
+## Response Format
+
+The transcription result includes:
+
+```typescript
+interface TranscriptionResult {
+  id: string           // Unique identifier
+  model: string        // Model used
+  text: string         // Full transcribed text
+  language?: string    // Detected/specified language
+  duration?: number    // Audio duration in seconds
+  segments?: Array<{   // Timestamped segments
+    id: number         // Segment identifier
+    start: number      // Start time in seconds
+    end: number        // End time in seconds
+    text: string       // Segment text
+    confidence?: number // Confidence score (0-1), if available
+    speaker?: string    // Speaker identifier, if diarization is enabled
+  }>
+  words?: Array<{      // Word-level timestamps (top-level)
+    word: string
+    start: number
+    end: number
+  }>
+}
+```
+
+## Complete Example
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { readFile } from 'fs/promises'
+
+async function transcribeAudio(filepath: string) {
+  // Read the audio file
+  const audioBuffer = await readFile(filepath)
+  const audioFile = new File(
+    [audioBuffer], 
+    filepath.split('/').pop()!, 
+    { type: 'audio/mpeg' }
+  )
+
+  // Transcribe with detailed output
+  const result = await generateTranscription({
+    adapter: openaiTranscription('whisper-1'),
+    audio: audioFile,
+    language: 'en',
+    responseFormat: 'verbose_json',
+    modelOptions: {
+      timestamp_granularities: ['segment', 'word'],
+    },
+  })
+
+  console.log('Full text:', result.text)
+  console.log('Duration:', result.duration, 'seconds')
+  
+  // Print segments with timestamps
+  if (result.segments) {
+    for (const segment of result.segments) {
+      console.log(`[${segment.start.toFixed(2)}s - ${segment.end.toFixed(2)}s]: ${segment.text}`)
+    }
+  }
+
+  return result
+}
+
+// Usage
+await transcribeAudio('./meeting-recording.mp3')
+```
+
+## Model Availability
+
+### OpenAI Models
+
+| Model | Description | Use Case |
+|-------|-------------|----------|
+| `whisper-1` | Whisper large-v2 | General transcription |
+| `gpt-4o-transcribe` | GPT-4o-based transcription | Higher accuracy |
+| `gpt-4o-transcribe-diarize` | With speaker diarization | Multi-speaker audio |
+| `gpt-4o-mini-transcribe` | Faster, lighter model | Cost-effective |
+
+### Supported Audio Formats
+
+OpenAI supports these audio formats:
+
+- `mp3` - MPEG Audio Layer 3
+- `mp4` - MPEG-4 Audio
+- `mpeg` - MPEG Audio
+- `mpga` - MPEG Audio
+- `m4a` - MPEG-4 Audio
+- `wav` - Waveform Audio
+- `webm` - WebM Audio
+- `flac` - Free Lossless Audio Codec
+- `ogg` - Ogg Vorbis
+
+> **Note:** Maximum file size is 25 MB.
+
+## Browser Usage
+
+### Recording and Transcribing
+
+```typescript
+async function recordAndTranscribe() {
+  // Request microphone access
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+  const mediaRecorder = new MediaRecorder(stream)
+  const chunks: Blob[] = []
+
+  mediaRecorder.ondataavailable = (e) => chunks.push(e.data)
+  
+  mediaRecorder.onstop = async () => {
+    const audioBlob = new Blob(chunks, { type: 'audio/webm' })
+    const audioFile = new File([audioBlob], 'recording.webm', { type: 'audio/webm' })
+    
+    // Send to your API endpoint for transcription
+    const formData = new FormData()
+    formData.append('audio', audioFile)
+    
+    const response = await fetch('/api/transcribe', {
+      method: 'POST',
+      body: formData,
+    })
+    
+    const result = await response.json()
+    console.log('Transcription:', result.text)
+  }
+
+  // Start recording
+  mediaRecorder.start()
+  
+  // Stop after 10 seconds
+  setTimeout(() => mediaRecorder.stop(), 10000)
+}
+```
+
+### Server API Endpoint
+
+```typescript ignore
+// api/transcribe.ts
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const audioFile = formData.get('audio')
+  if (!(audioFile instanceof File)) {
+    throw new Error('Expected an audio file under "audio"')
+  }
+
+  const result = await generateTranscription({
+    adapter: openaiTranscription('whisper-1'),
+    audio: audioFile,
+  })
+
+  return Response.json(result)
+}
+```
+
+## Full-Stack Usage
+
+TanStack AI provides React hooks and server-side streaming helpers to build full-stack audio transcription with minimal boilerplate.
+
+### Streaming Mode (Server Route + Client Hook)
+
+**Server** — Create an API route that wraps `generateTranscription` as a streaming response:
+
+```typescript ignore
+// routes/api/transcribe.ts
+import {
+  generateTranscription,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/transcribe')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const { audio, language, model } = body.data
+
+        const stream = generateTranscription({
+          adapter: openaiTranscription(model ?? 'whisper-1'),
+          audio,
+          language,
+          stream: true,
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+> **Note:** For browser-recorded audio, you'll typically send the audio as a base64 string in the JSON body. For file uploads, use a FormData-based endpoint instead (see [Browser Usage](#browser-usage) above).
+
+**Client** — Use the `useTranscription` hook with a connection adapter:
+
+```tsx
+import { useTranscription, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function AudioTranscriber() {
+  const { generate, result, isLoading, error } = useTranscription({
+    connection: fetchServerSentEvents('/api/transcribe'),
+  })
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    // Convert to base64 for JSON transport
+    const buffer = await file.arrayBuffer()
+    const base64 = btoa(
+      new Uint8Array(buffer).reduce((s, b) => s + String.fromCharCode(b), ''),
+    )
+    const dataUrl = `data:${file.type};base64,${base64}`
+
+    await generate({ audio: dataUrl, language: 'en' })
+  }
+
+  return (
+    <div>
+      <input type="file" accept="audio/*" onChange={handleFileUpload} />
+      {isLoading && <p>Transcribing...</p>}
+      {error && <p>Error: {error.message}</p>}
+      {result && (
+        <div>
+          <p>{result.text}</p>
+          {result.duration && <p>Duration: {result.duration}s</p>}
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Direct Mode (Server Function + Fetcher)
+
+For non-streaming usage with TanStack Start server functions:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+export const transcribeFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { audio: string; language?: string }) => data)
+  .handler(async ({ data }) => {
+    return generateTranscription({
+      adapter: openaiTranscription('whisper-1'),
+      audio: data.audio,
+      language: data.language,
+    })
+  })
+```
+
+```tsx
+import { useTranscription } from '@tanstack/ai-react'
+import { transcribeFn } from '../lib/server-functions'
+
+function AudioTranscriber() {
+  const { generate, result, isLoading } = useTranscription({
+    fetcher: (input) => transcribeFn({ data: input }),
+  })
+  // ... same UI as above
+}
+```
+
+### Server Function Streaming (Fetcher + Response)
+
+For TanStack Start server functions that stream results. The fetcher receives type-safe input and returns an SSE `Response` — the client parses it automatically:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateTranscription, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+export const transcribeStreamFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { audio: string; language?: string }) => data)
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateTranscription({
+        adapter: openaiTranscription('whisper-1'),
+        audio: data.audio,
+        language: data.language,
+        stream: true,
+      }),
+    )
+  })
+```
+
+```tsx
+import { useTranscription } from '@tanstack/ai-react'
+import { transcribeStreamFn } from '../lib/server-functions'
+
+function AudioTranscriber() {
+  const { generate, result, isLoading } = useTranscription({
+    fetcher: (input) => {
+      if (typeof input.audio !== 'string') {
+        throw new Error('Expected base64 or data URL audio')
+      }
+      return transcribeStreamFn({
+        data: { ...input, audio: input.audio },
+      })
+    },
+  })
+  // ... same UI as above
+}
+```
+
+### Hook API
+
+The `useTranscription` hook accepts:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `(input) => Promise<TranscriptionResult \| Response>` | Direct async function, or server function returning an SSE `Response` |
+| `onResult` | `(result) => TOutput \| null \| void` | Callback when transcription completes. Optionally return a transformed value to store as `result` |
+| `onError` | `(error) => void` | Callback on error |
+| `onProgress` | `(progress, message?) => void` | Progress updates (0-100) |
+
+And returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `generate` | `(input: TranscriptionGenerateInput) => Promise<void>` | Trigger transcription |
+| `result` | `TranscriptionResult \| null` | The result with text and segments, or null |
+| `isLoading` | `boolean` | Whether transcription is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current transcription |
+| `reset` | `() => void` | Clear result, error, and return to idle |
+
+## Error Handling
+
+```typescript
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+import { audioFile } from './audio'
+
+try {
+  const result = await generateTranscription({
+    adapter: openaiTranscription('whisper-1'),
+    audio: audioFile,
+  })
+} catch (error) {
+  if (error instanceof Error) {
+    if (error.message.includes('Invalid file format')) {
+      console.error('Unsupported audio format')
+    } else if (error.message.includes('File too large')) {
+      console.error('Audio file exceeds 25 MB limit')
+    } else if (error.message.includes('Audio file is too short')) {
+      console.error('Audio must be at least 0.1 seconds')
+    } else {
+      console.error('Transcription error:', error.message)
+    }
+  }
+}
+```
+
+> **Debugging:** When a transcription returns garbage, empty segments, or the provider rejects your audio format, pass `debug: true` on `generateTranscription({...})` to log the outgoing request and every raw provider chunk. See [Debug Logging](/ai/advanced/debug-logging).
+
+## Environment Variables
+
+The transcription adapter uses:
+
+- `OPENAI_API_KEY`: Your OpenAI API key
+
+## Explicit API Keys
+
+```typescript
+import { createOpenaiTranscription } from '@tanstack/ai-openai'
+
+const adapter = createOpenaiTranscription('whisper-1', 'your-openai-api-key')
+```
+
+## Best Practices
+
+1. **Audio Quality**: Better audio quality leads to more accurate transcriptions. Reduce background noise when possible.
+
+2. **Language Specification**: Always specify the language if known—this improves accuracy and speed.
+
+3. **File Size**: Keep audio files under 25 MB. For longer recordings, split into chunks.
+
+4. **Format Selection**: MP3 offers a good balance of quality and size. Use WAV or FLAC for highest quality.
+
+5. **Prompting**: Use the `prompt` option to provide context or expected vocabulary (e.g., technical terms, names).
+
+6. **Timestamps**: Request `responseFormat: 'verbose_json'` and set `modelOptions.timestamp_granularities` when you need timing information for captions or synchronization.
+
+7. **Diarization**: Use `gpt-4o-transcribe-diarize` with `modelOptions.response_format: 'diarized_json'` output for multi-speaker audio. Keep `chunking_strategy: 'auto'` unless you need custom VAD tuning.
diff --git a/mintlify/ai/media/video-generation.md b/mintlify/ai/media/video-generation.md
new file mode 100644
index 000000000..bf25e2f41
--- /dev/null
+++ b/mintlify/ai/media/video-generation.md
@@ -0,0 +1,793 @@
+---
+title: Video Generation
+id: video-generation
+order: 6
+description: "Generate video from text prompts with OpenAI Sora, Google Veo, xAI Grok Imagine, or fal.ai using TanStack AI's experimental generateVideo() jobs/polling API."
+keywords:
+  - tanstack ai
+  - video generation
+  - sora
+  - veo
+  - gemini
+  - grok imagine
+  - fal
+  - generateVideo
+  - jobs api
+  - experimental
+  - text-to-video
+---
+
+# Video Generation (Experimental)
+
+> **⚠️ EXPERIMENTAL FEATURE WARNING**
+>
+> Video generation is an **experimental feature** that is subject to significant changes. Please read the caveats below carefully before using this feature.
+>
+> **Key Caveats:**
+> - The API may change without notice in future versions
+> - OpenAI's Sora API is in limited availability and may require organization verification
+> - Video generation uses a jobs/polling architecture, which differs from other synchronous activities
+> - Pricing, rate limits, and quotas may vary and are subject to change
+> - Not all features described here may be available in your OpenAI account
+
+## Overview
+
+TanStack AI provides experimental support for video generation through dedicated video adapters. Unlike image generation, video generation is an **asynchronous operation** that uses a jobs/polling pattern:
+
+1. **Create a job** - Submit a prompt and receive a job ID
+2. **Poll for status** - Check the job status until it's complete
+3. **Retrieve the video** - Get the URL to download/view the generated video
+
+Currently supported:
+- **OpenAI**: Sora-2 and Sora-2-Pro models (when available)
+- **Google Gemini**: Veo 3.1, Veo 3, and Veo 2 models (via the long-running operations API)
+- **Grok (xAI)**: grok-imagine-video (text-to-video + image-to-video) and grok-imagine-video-1.5 (image-to-video only) models
+- **fal.ai**: MiniMax, Luma, Kling, Hunyuan, and other hosted video models
+
+## Basic Usage
+
+### Creating a Video Job
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+// Start a video generation job (the adapter uses OPENAI_API_KEY from environment)
+const { jobId, model } = await generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A golden retriever puppy playing in a field of sunflowers',
+})
+
+console.log('Job started:', jobId)
+```
+
+### Polling for Status
+
+```typescript
+import { generateVideo, getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+const { jobId } = await generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A golden retriever puppy playing in a field of sunflowers',
+})
+
+// Check the status of the job
+const status = await getVideoJobStatus({
+  adapter: openaiVideo('sora-2'),
+  jobId,
+})
+
+console.log('Status:', status.status) // 'pending' | 'processing' | 'completed' | 'failed'
+console.log('Progress:', status.progress) // 0-100 (if available)
+
+if (status.status === 'failed') {
+  console.error('Error:', status.error)
+}
+```
+
+### Getting the Video URL
+
+```typescript
+import { getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+import { jobId } from './job'
+
+// Only call this after status is 'completed'
+const result = await getVideoJobStatus({
+  adapter: openaiVideo('sora-2'),
+  jobId,
+})
+
+if (result.status === 'completed' && result.url) {
+  console.log('Video URL:', result.url)
+}
+```
+
+### Complete Example with Polling Loop
+
+```typescript
+import { generateVideo, getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+async function createAndAwaitVideo(prompt: string) {
+  // 1. Create the job
+  const { jobId } = await generateVideo({
+    adapter: openaiVideo('sora-2'),
+    prompt,
+    size: '1280x720',
+    duration: 8, // 4, 8, or 12 seconds
+  })
+
+  console.log('Job created:', jobId)
+
+  // 2. Poll for completion
+  let status = 'pending'
+  while (status !== 'completed' && status !== 'failed') {
+    // Wait 5 seconds between polls
+    await new Promise((resolve) => setTimeout(resolve, 5000))
+
+    const result = await getVideoJobStatus({
+      adapter: openaiVideo('sora-2'),
+      jobId,
+    })
+
+    status = result.status
+    console.log(`Status: ${status}${result.progress ? ` (${result.progress}%)` : ''}`)
+
+    if (result.status === 'failed') {
+      throw new Error(result.error || 'Video generation failed')
+    }
+  }
+
+  // 3. Get the video URL
+  const result = await getVideoJobStatus({
+    adapter: openaiVideo('sora-2'),
+    jobId,
+  })
+
+  if (result.status === 'completed' && result.url) {
+    return result.url
+  }
+
+  throw new Error('Video generation failed or URL not available')
+}
+
+// Usage
+const videoUrl = await createAndAwaitVideo('A cat playing piano in a jazz bar')
+console.log('Video ready:', videoUrl)
+```
+
+## Full-Stack Usage
+
+TanStack AI's `generateVideo` function supports a `stream: true` flag that handles the job creation and polling loop server-side, streaming status updates to the client in real-time.
+
+### Streaming Mode (Server Route + Client Hook)
+
+**Server** — The server handles the entire polling lifecycle and streams events to the client:
+
+```typescript ignore
+// routes/api/generate/video.ts
+import { generateVideo, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/generate/video')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const { prompt, size, duration, model } = body.data
+
+        const stream = generateVideo({
+          adapter: openaiVideo(model ?? 'sora-2'),
+          prompt,
+          size,
+          duration,
+          stream: true,
+          pollingInterval: 3000, // Check status every 3 seconds
+          maxDuration: 600_000, // Timeout after 10 minutes
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+**Client** — Use the `useGenerateVideo` hook which tracks job status automatically:
+
+```tsx
+import { useGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-react'
+
+function VideoGenerator() {
+  const {
+    generate,
+    result,
+    jobId,
+    videoStatus,
+    isLoading,
+    error,
+    stop,
+    reset,
+  } = useGenerateVideo({
+    connection: fetchServerSentEvents('/api/generate/video'),
+    onJobCreated: (id) => console.log('Job created:', id),
+    onStatusUpdate: (status) => console.log('Status:', status.status),
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          generate({ prompt: 'A golden retriever playing in sunflowers' })
+        }
+        disabled={isLoading}
+      >
+        {isLoading ? 'Generating...' : 'Generate Video'}
+      </button>
+
+      {isLoading && (
+        <div>
+          {jobId && <p>Job: {jobId}</p>}
+          {videoStatus?.progress != null && (
+            <progress value={videoStatus.progress} max={100} />
+          )}
+          <p>Status: {videoStatus?.status ?? 'starting...'}</p>
+          <button onClick={stop}>Cancel</button>
+        </div>
+      )}
+
+      {error && <p>Error: {error.message}</p>}
+
+      {result && (
+        <div>
+          <video src={result.url} controls width={640} />
+          <button onClick={reset}>Clear</button>
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Direct Mode (Server Function + Fetcher)
+
+For cases where the server handles the full polling loop and returns a completed result:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateVideo, getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+export const generateVideoFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string }) => data)
+  .handler(async ({ data }) => {
+    const adapter = openaiVideo('sora-2')
+
+    // Create the job
+    const { jobId } = await generateVideo({
+      adapter,
+      prompt: data.prompt,
+    })
+
+    // Poll until complete
+    let status = await getVideoJobStatus({ adapter, jobId })
+    while (status.status !== 'completed' && status.status !== 'failed') {
+      await new Promise((r) => setTimeout(r, 5000))
+      status = await getVideoJobStatus({ adapter, jobId })
+    }
+
+    if (status.status === 'failed') {
+      throw new Error(status.error || 'Video generation failed')
+    }
+
+    return {
+      jobId,
+      status: 'completed' as const,
+      url: status.url!,
+    }
+  })
+```
+
+```tsx
+import { useGenerateVideo } from '@tanstack/ai-react'
+import { generateVideoFn } from '../lib/server-functions'
+
+function VideoGenerator() {
+  const { generate, result, isLoading } = useGenerateVideo({
+    fetcher: (input) => generateVideoFn({ data: input }),
+  })
+  // ... same UI as above (note: jobId and videoStatus won't update in fetcher mode)
+}
+```
+
+> **Note:** In direct fetcher mode, `jobId` and `videoStatus` won't receive real-time updates since there's no streaming. Use the streaming connection mode or server function streaming for progress tracking.
+
+### Server Function Streaming (Fetcher + Response)
+
+For TanStack Start server functions that stream results. The fetcher receives type-safe input and returns an SSE `Response` — the client parses it automatically. This gives you both type safety and real-time `jobId`/`videoStatus` updates:
+
+```typescript ignore
+// lib/server-functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { generateVideo, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+export const generateVideoStreamFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: { prompt: string; size?: string; duration?: number }) => data)
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateVideo({
+        adapter: openaiVideo('sora-2'),
+        prompt: data.prompt,
+        size: data.size as any,
+        duration: data.duration,
+        stream: true,
+      }),
+    )
+  })
+```
+
+```tsx
+import { useGenerateVideo } from '@tanstack/ai-react'
+import { generateVideoStreamFn } from '../lib/server-functions'
+
+function VideoGenerator() {
+  const { generate, result, jobId, videoStatus, isLoading } = useGenerateVideo({
+    fetcher: (input) => generateVideoStreamFn({ data: input }),
+  })
+  // ... same UI as streaming mode (jobId and videoStatus update in real-time)
+}
+```
+
+### Hook API
+
+The `useGenerateVideo` hook accepts all common options plus video-specific callbacks:
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connection` | `ConnectionAdapter` | Streaming transport (SSE, HTTP stream, custom) |
+| `fetcher` | `(input) => Promise<VideoGenerateResult \| Response>` | Direct async function, or server function returning an SSE `Response` |
+| `onResult` | `(result) => TOutput \| null \| void` | Callback when video is ready. Optionally return a transformed value to store as `result` |
+| `onError` | `(error) => void` | Callback on error |
+| `onProgress` | `(progress, message?) => void` | Progress updates (0-100) |
+| `onJobCreated` | `(jobId: string) => void` | Callback when the job is created |
+| `onStatusUpdate` | `(status: VideoStatusInfo) => void` | Callback on each polling update |
+
+And returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `generate` | `(input: VideoGenerateInput) => Promise<void>` | Trigger generation |
+| `result` | `VideoGenerateResult \| null` | The result with video URL, or null |
+| `jobId` | `string \| null` | The current job ID |
+| `videoStatus` | `VideoStatusInfo \| null` | Latest polling status (progress, status) |
+| `isLoading` | `boolean` | Whether generation is in progress |
+| `error` | `Error \| undefined` | Current error, if any |
+| `status` | `GenerationClientState` | `'idle'` \| `'generating'` \| `'success'` \| `'error'` |
+| `stop` | `() => void` | Abort the current generation |
+| `reset` | `() => void` | Clear all state and return to idle |
+
+## Options
+
+### Job Creation Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `adapter` | `VideoAdapter` | Video adapter instance with model (required) |
+| `prompt` | `string \| MediaPromptPart[]` | Description of the video to generate (required). A plain string, or — on models that support conditioned generation — an ordered array of content parts interleaving text with image / video / audio inputs. See [Image-to-Video](#image-to-video) below. |
+| `size` | `string` | Video resolution in WIDTHxHEIGHT format |
+| `duration` | `number` | Video duration in seconds (maps to `seconds` parameter in API) |
+| `modelOptions?` | `object` | Model-specific options (renamed from `providerOptions`) |
+
+## Image-to-Video
+
+For starting-frame, ending-frame, and reference-image conditioned video
+generation, pass the `prompt` as an array of content parts:
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+import { base64Image } from './assets'
+
+const { jobId } = await generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: [
+    {
+      type: 'text',
+      content:
+        'Animate this still into a slow cinematic push-in with subtle motion',
+    },
+    {
+      type: 'image',
+      source: {
+        type: 'data',
+        value: base64Image,
+        mimeType: 'image/png',
+      },
+    },
+  ],
+})
+```
+
+The accepted part types are narrowed **per model at compile time** — fal
+endpoints, for example, only admit image / video / audio parts that their
+SDK input type actually declares fields for.
+
+Prompt text is always sent **verbatim** — the SDK never injects or rewrites
+in-prompt referencing markers. Some fal video endpoints have their own
+referencing syntax you can write directly in your text (e.g. Kling v3
+elements as `@Element1`, Seedance 2.0 reference-to-video as `@Image1` /
+`@Video1` / `@Audio1`, 1-indexed by input order); Veo and Sora take
+reference images as plain inputs with naturally written prompts. See
+[Referencing images from your prompt](/ai/media/image-generation#referencing-images-from-your-prompt)
+for the per-provider table.
+
+### Role hints
+
+Each `ImagePart` can carry an optional `metadata.role` hint that the
+adapter uses to route the input to the provider-specific field:
+
+| Role            | Maps to                                                       |
+| --------------- | ------------------------------------------------------------- |
+| `'start_frame'` | fal `start_image_url`, Veo input `image` (positional default for the first input) |
+| `'end_frame'`   | fal `end_image_url`, Veo `lastFrame`                          |
+| `'reference'`   | fal `reference_image_urls`, Veo `referenceImages`             |
+| `'character'`   | Same as `'reference'` — character consistency images                    |
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { falVideo } from '@tanstack/ai-fal'
+import { firstFrameUrl, lastFrameUrl } from './assets'
+
+await generateVideo({
+  adapter: falVideo('fal-ai/kling-video/v3/pro/image-to-video'),
+  prompt: [
+    { type: 'image', source: { type: 'url', value: firstFrameUrl } },
+    { type: 'text', content: 'Slow cinematic push-in then a hard cut' },
+    {
+      type: 'image',
+      source: { type: 'url', value: lastFrameUrl },
+      metadata: { role: 'end_frame' },
+    },
+  ],
+})
+```
+
+### Provider support
+
+| Provider     | Image-to-Video Behavior                                                                                  |
+| ------------ | -------------------------------------------------------------------------------------------------------- |
+| **OpenAI**   | Sora-2 / Sora-2-Pro → the image part goes to `input_reference`; flattened text is the prompt. Single image only — throws if more than one. |
+| **fal.ai**   | Field names resolve per endpoint from a map generated from the fal SDK's endpoint types — e.g. `role: 'start_frame'` lands on `image_url` for Kling/Veo image-to-video, `first_frame_url` for first-last-frame endpoints, and `start_image_url` otherwise. Defaults: single input → `image_url` (start frame); `role: 'end_frame'` → `end_image_url`; `role: 'reference'` / `'character'` → `reference_image_urls`. Override per-endpoint via `modelOptions` — the media-conditioning fields are typed optional there (even when the endpoint requires them) since they usually arrive as prompt parts. |
+| **Gemini**   | Veo → the first un-roled / `'start_frame'` image becomes the input image; `'end_frame'` → `lastFrame`; `'reference'` / `'character'` → `referenceImages` (asset references, Veo 3.1). Throws on multiple starting images. |
+
+Adapters whose underlying API can't accept image inputs throw a clear
+runtime error so calls fail fast.
+
+### Supported Sizes
+
+Based on [OpenAI API docs](https://platform.openai.com/docs/api-reference/videos/create):
+
+| Size | Description |
+|------|-------------|
+| `1280x720` | 720p landscape (16:9) - default |
+| `720x1280` | 720p portrait (9:16) |
+| `1792x1024` | Wide landscape |
+| `1024x1792` | Tall portrait |
+
+### Supported Durations
+
+The API uses the `seconds` parameter. Allowed values:
+
+- `4` seconds
+- `8` seconds (default)
+- `12` seconds
+
+## Model Options
+
+### OpenAI Model Options
+
+Based on the [OpenAI Sora API](https://platform.openai.com/docs/api-reference/videos/create):
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+const { jobId } = await generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A beautiful sunset over the ocean',
+  size: '1280x720',      // '1280x720', '720x1280', '1792x1024', '1024x1792'
+  duration: 8,           // 4, 8, or 12 seconds
+  modelOptions: {
+    size: '1280x720',    // Alternative way to specify size
+    seconds: '8',        // Alternative way to specify duration ('4' | '8' | '12')
+  }
+})
+```
+
+### Google Veo (Gemini) Model Options
+
+Veo runs on Google's long-running operations API. The adapter starts the
+operation, and `getVideoJobStatus` polls it until the video is ready:
+
+```typescript ignore
+import { generateVideo } from '@tanstack/ai'
+import { geminiVideo } from '@tanstack/ai-gemini'
+
+const { jobId } = await generateVideo({
+  adapter: geminiVideo('veo-3.1-generate-preview'),
+  prompt: 'A close-up of a luthier carving a guitar neck',
+  size: '16:9', // aspect ratio: '16:9' or '9:16'
+  duration: 8, // typed per model — see below
+  modelOptions: {
+    resolution: '1080p', // '720p' (default), '1080p', '4k' (Veo 3.1 only)
+    negativePrompt: 'cartoon, low quality',
+    generateAudio: true, // Veo 3+ generates synchronized audio
+  },
+})
+```
+
+#### Typed durations
+
+Each Veo model accepts a fixed set of durations, enforced at compile time on
+the `duration` option:
+
+| Model | `duration` values (seconds) |
+|-------|------------------------------|
+| `veo-3.1-generate-preview` | `4`, `6`, `8` |
+| `veo-3.1-fast-generate-preview` | `4`, `6`, `8` |
+| `veo-3.1-lite-generate-preview` | `4`, `6`, `8` |
+
+If you have raw seconds (for example from a UI slider), coerce them with
+`snapDuration`, or inspect the full set with `availableDurations`:
+
+```typescript ignore
+import { generateVideo } from '@tanstack/ai'
+import { geminiVideo } from '@tanstack/ai-gemini'
+
+const adapter = geminiVideo('veo-3.1-lite-generate-preview')
+
+adapter.availableDurations() // { kind: 'discrete', values: [4, 6, 8] }
+adapter.snapDuration(7) // 6 — closest valid duration
+
+await generateVideo({
+  adapter,
+  prompt: 'A timelapse of a city skyline at dusk',
+  duration: adapter.snapDuration(7),
+})
+```
+
+Adapters that haven't declared a per-model duration map keep the plain
+`duration?: number` typing, return `{ kind: 'none' }` from
+`availableDurations()`, and return `undefined` from `snapDuration()`.
+
+> **Note:** The video URL returned for Veo jobs is served by the Gemini
+> Files API and requires your API key to download (send it as an
+> `x-goog-api-key` header or `key` query parameter).
+
+### Grok (xAI Imagine) Model Options
+
+Based on the [xAI video generation API](https://docs.x.ai/docs/guides/video-generations). Two models are available: `grok-imagine-video` (v1.0) supports **text-to-video and image-to-video**, while `grok-imagine-video-1.5` is **image-to-video only** (a text-only prompt is rejected by the API; the adapter throws a clear error pointing you at `grok-imagine-video`). Both are aspect-ratio sized — the generic `size` option takes an `aspectRatio_resolution` template (like the Grok Imagine image models), and clips can be 1–15 seconds long.
+
+Text-to-video with the base model:
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { grokVideo } from '@tanstack/ai-grok'
+
+const { jobId } = await generateVideo({
+  adapter: grokVideo('grok-imagine-video'),
+  prompt: 'A beautiful sunset over the ocean',
+  size: '16:9_720p',  // aspect ratio: '1:1' | '16:9' | '9:16' | '4:3' | '3:4' | '3:2' | '2:3'
+                      // resolution (optional suffix): '480p' | '720p' | '1080p'
+  duration: 5,        // integer seconds, 1-15
+  modelOptions: {
+    aspect_ratio: '16:9',  // Alternative way to specify the aspect ratio
+    resolution: '720p',    // Alternative way to specify the resolution
+    duration: 5,           // Alternative way to specify the duration
+  },
+})
+```
+
+Image-to-video (required for `grok-imagine-video-1.5`) — include an `image` prompt part as the starting frame. URL sources are fetched by xAI's servers (so they must be publicly reachable); use a `data` source for a base64 starting frame:
+
+```typescript
+import { generateVideo } from '@tanstack/ai'
+import { grokVideo } from '@tanstack/ai-grok'
+
+const { jobId } = await generateVideo({
+  adapter: grokVideo('grok-imagine-video-1.5'),
+  prompt: [
+    { type: 'text', content: 'Slowly pan out as the waves roll in' },
+    {
+      type: 'image',
+      source: { type: 'url', value: 'https://example.com/still.png' },
+    },
+  ],
+  size: '16:9_720p',
+  duration: 5,
+})
+```
+
+Both models accept any whole second in the **1–15** range. A raw `duration` is coerced into that range rather than rejected — values are clamped to `[1, 15]` and rounded to the nearest second. Inspect or pre-snap the range the same way as Veo:
+
+```typescript
+import { grokVideo } from '@tanstack/ai-grok'
+
+const adapter = grokVideo('grok-imagine-video')
+
+adapter.availableDurations() // { kind: 'range', min: 1, max: 15, step: 1, unit: 'seconds' }
+adapter.snapDuration(2.5) // 3 — clamped/rounded into range
+adapter.snapDuration(99) // 15
+```
+
+Generated clips include an audio track. When the job completes, the adapter reports `usage.unitsBilled` (billed seconds of video) and `usage.cost` (exact USD cost as returned by the API) on the result.
+
+## Response Types
+
+> **Note:** The interfaces below are the underlying adapter-level types. The `getVideoJobStatus()` helper returns a single merged object, `{ status, progress?, url?, error?, usage? }` — it does not return `jobId` or `expiresAt`.
+
+### VideoJobResult (from create)
+
+```typescript
+interface VideoJobResult {
+  jobId: string    // Unique job identifier for polling
+  model: string    // Model used for generation
+}
+```
+
+### VideoStatusResult (from status)
+
+```typescript
+interface VideoStatusResult {
+  jobId: string
+  status: 'pending' | 'processing' | 'completed' | 'failed'
+  progress?: number  // 0-100, if available
+  error?: string     // Error message if failed
+}
+```
+
+### VideoUrlResult (from url)
+
+```typescript
+import type { TokenUsage } from '@tanstack/ai'
+
+interface VideoUrlResult {
+  jobId: string
+  url: string        // URL to download/stream the video
+  expiresAt?: Date   // When the URL expires
+  // Usage for the completed generation, when the adapter reports it. fal
+  // populates `usage.unitsBilled` from its `x-fal-billable-units` header.
+  usage?: TokenUsage
+}
+```
+
+> **Cost tracking (fal):** fal bills media generation by usage-based units
+> rather than tokens. The fal adapters surface the real billed quantity as
+> `usage.unitsBilled` (denominated in the endpoint's priced unit). Combine it
+> with the endpoint's unit price from
+> `GET https://api.fal.ai/v1/models/pricing?endpoint_id=…` to compute the exact
+> cost (`unitsBilled * unitPrice`). The same `usage.unitsBilled` is surfaced
+> on image, audio, speech, and transcription results.
+
+## Model Variants
+
+| Model | Description | Use Case |
+|-------|-------------|----------|
+| `sora-2` | Faster generation, good quality | Rapid iteration, prototyping |
+| `sora-2-pro` | Higher quality, slower | Production-quality output |
+
+## Error Handling
+
+Video generation can fail for various reasons. Always implement proper error handling:
+
+```typescript
+import { generateVideo, getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+try {
+  const { jobId } = await generateVideo({
+    adapter: openaiVideo('sora-2'),
+    prompt: 'A scene',
+  })
+
+  // Poll for status...
+  const status = await getVideoJobStatus({
+    adapter: openaiVideo('sora-2'),
+    jobId,
+  })
+
+  if (status.status === 'failed') {
+    console.error('Generation failed:', status.error)
+    // Handle failure (e.g., retry, notify user)
+  }
+} catch (error) {
+  if (error instanceof Error) {
+    if (error.message.includes('Video generation API is not available')) {
+      console.error('Sora API access may be required. Check your OpenAI account.')
+    } else if (error.message.includes('rate limit')) {
+      console.error('Rate limited. Please wait before trying again.')
+    } else {
+      console.error('Unexpected error:', error)
+    }
+  }
+}
+```
+
+## Rate Limits and Quotas
+
+> **⚠️ Note:** Rate limits and quotas for video generation are subject to change and may vary by account tier.
+
+Typical considerations:
+- Video generation is computationally expensive
+- Concurrent job limits may apply
+- Monthly generation quotas may exist
+- Longer/higher-quality videos consume more quota
+
+Check the [OpenAI documentation](https://platform.openai.com/docs) for current limits.
+
+## Environment Variables
+
+The video adapters use the same environment variables as the other adapters
+for their provider:
+
+- `OPENAI_API_KEY`: Your OpenAI API key (Sora)
+- `GOOGLE_API_KEY` or `GEMINI_API_KEY`: Your Google API key (Veo)
+
+## Explicit API Keys
+
+For production use or when you need explicit control:
+
+```typescript
+import { createOpenaiVideo } from '@tanstack/ai-openai'
+
+const adapter = createOpenaiVideo('sora-2', 'your-openai-api-key')
+```
+
+## Differences from Image Generation
+
+| Aspect | Image Generation | Video Generation |
+|--------|-----------------|------------------|
+| API Type | Synchronous | Jobs/Polling |
+| Return Type | `ImageGenerationResult` | `VideoJobResult` → `VideoStatusResult` → `VideoUrlResult` |
+| Wait Time | Seconds | Minutes |
+| Multiple Outputs | `numberOfImages` option | Not supported |
+| Options Field | `prompt`, `size`, `numberOfImages` | `prompt`, `size`, `duration` |
+
+## Known Limitations
+
+> **⚠️ These limitations are subject to change as the feature evolves.**
+
+1. **API Availability**: The Sora API may not be available in all OpenAI accounts
+2. **Generation Time**: Video generation can take several minutes
+3. **URL Expiration**: Generated video URLs may expire after a certain period
+4. **No Real-time Progress**: Progress updates may be limited or delayed
+5. **Audio Limitations**: Audio generation support may be limited
+6. **Prompt Length**: Long prompts may be truncated
+
+## Best Practices
+
+1. **Implement Timeouts**: Set reasonable timeouts for the polling loop
+2. **Handle Failures Gracefully**: Have fallback behavior for failed generations
+3. **Cache URLs**: Store video URLs and check expiration before re-fetching
+4. **User Feedback**: Show clear progress indicators during generation
+5. **Validate Prompts**: Check prompt length and content before submission
+6. **Monitor Usage**: Track generation usage to avoid hitting quotas
+
+## Future Considerations
+
+This feature is experimental. Future versions may include:
+
+- Additional video models and providers
+- Streaming progress updates
+- Video editing and manipulation
+- Audio track generation
+- Batch video generation
+- Custom style/aesthetic controls
+
+Stay tuned to the [TanStack AI changelog](https://github.com/TanStack/ai/blob/main/CHANGELOG.md) for updates.
+
diff --git a/mintlify/ai/migration/ag-ui-compliance.md b/mintlify/ai/migration/ag-ui-compliance.md
new file mode 100644
index 000000000..c135ff288
--- /dev/null
+++ b/mintlify/ai/migration/ag-ui-compliance.md
@@ -0,0 +1,352 @@
+---
+title: Migrating to AG-UI Client-to-Server Compliance
+---
+
+# Migrating to AG-UI Client-to-Server Compliance
+
+> **TL;DR:** This release is fully backward compatible. Upgrade `@tanstack/ai` and `@tanstack/ai-client` together and existing code keeps working — both the legacy `body` client option and the legacy `data` server-side wire field continue to function unchanged. The HTTP wire format gained AG-UI `RunAgentInput` fields (`threadId`, `runId`, `tools`, `forwardedProps`, etc.) for full AG-UI compliance, and the legacy fields are emitted alongside them as a deprecation bridge. New helpers (`chatParamsFromRequest`, `mergeAgentTools`) are available for opt-in conveniences. Migrate to the new names when convenient — both `body` (client) and `data` (wire) will be removed in a future major release.
+
+## What changed
+
+`@tanstack/ai-client` now POSTs an AG-UI 0.0.52 `RunAgentInput` request body. The previous fields (`messages`, `data`) are emitted alongside the new AG-UI fields so existing servers and clients keep working without code changes.
+
+### Old wire shape
+
+```json
+{
+  "messages": [...],
+  "data": {...}
+}
+```
+
+### New wire shape (with deprecation bridge)
+
+```json
+{
+  "threadId": "thread-...",
+  "runId": "run-...",
+  "state": {},
+  "messages": [...],
+  "tools": [...],
+  "context": [],
+  "forwardedProps": {...},
+  "data": {...}
+}
+```
+
+`forwardedProps` and `data` carry the same content. New servers should read `forwardedProps`; legacy servers reading `data` keep working unchanged. The `data` field will be removed in a future major release.
+
+The `messages` array carries TanStack `UIMessage` anchors with `parts` intact, plus AG-UI mirror fields (`content`, `toolCalls`) so strict AG-UI servers can parse it. Tool results and thinking parts are additionally emitted as separate `{role:'tool',...}` and `{role:'reasoning',...}` fan-out messages alongside the anchors.
+
+## Backward compatibility & deprecation timeline
+
+This release introduces three compatibility bridges:
+
+| Surface | Before | After (deprecated, still works) | Recommended |
+|---|---|---|---|
+| Client option (`useChat`, `ChatClient`) | `body: { ... }` | `body: { ... }` | `forwardedProps: { ... }` |
+| Server wire field | `body.data.X` | `body.data.X` (emitted as a mirror of `forwardedProps`) | `body.forwardedProps.X`, or `params.forwardedProps.X` via `chatParamsFromRequest` |
+| Server `chat()` option | `conversationId` | `conversationId` (still accepted) | `threadId` (or rely on `chatParamsFromRequest`) |
+
+All three bridges will be removed in the next major release. Until then, you can mix old and new freely — if both `body` and `forwardedProps` are passed to `useChat`, they are merged with `forwardedProps` winning on key collision.
+
+### Automated codemod
+
+A jscodeshift codemod is available for the client-side renames. Run it against your codebase to flip every `useChat({ body })`, `new ChatClient({ body })`, `updateOptions({ body })`, Svelte `updateBody(...)`, and `chat({ conversationId })` to its canonical name in one pass:
+
+```bash
+npx jscodeshift \
+  --parser=tsx \
+  -t https://raw.githubusercontent.com/TanStack/ai/main/codemods/ag-ui-compliance/transform.ts \
+  "src/**/*.{ts,tsx}"
+```
+
+Add `--dry --print` to preview changes first. The codemod is import-source–gated, so files that don't import from `@tanstack/ai*` packages are left untouched. See [`codemods/ag-ui-compliance/README.md`](https://github.com/TanStack/ai/blob/main/codemods/ag-ui-compliance/index) for the full transform list, conflict-handling rules, and limitations.
+
+> **Server-side `body.data.X` rewrites are not automated.** Detecting whether a given `body.data.foo` read belongs to a TanStack AI route handler vs. unrelated code is unreliable in a syntactic codemod. Migrate those by hand using the Tier 2 / Tier 3 recipes below.
+
+### `conversationId` → `threadId`
+
+`conversationId` was the pre-AG-UI name for "a stable identifier for this conversation, used to correlate client and server devtools events." AG-UI's `threadId` is the same concept under the standard name. **`conversationId` is now a deprecated alias of `threadId` throughout the API** — passing either name resolves to the same internal value.
+
+**What changed on the wire:** the client no longer auto-emits `forwardedProps.conversationId`. It now sends only the AG-UI top-level `threadId` field. Anyone who explicitly sets `useChat({ forwardedProps: { conversationId } })` (or the legacy `body`) still has their value passed through unchanged.
+
+**What this means for server code:**
+
+- **Server code that doesn't reference `conversationId` is unaffected.** When `chat({ conversationId })` is omitted, the runtime auto-generates a stable `threadId` per request and uses it for devtools event correlation.
+- **`chat({ conversationId: 'foo' })` still works** — `conversationId` is now a deprecated alias for `threadId`, resolved internally. No code change required.
+- **`chat({ threadId: 'foo' })` is the canonical form** — prefer it in new code. If both are passed, `threadId` wins.
+- **`TextOptions.conversationId` is `@deprecated`** in JSDoc and will be removed in a future major release.
+
+> **One real behavior change to verify.** If your server reads `body.forwardedProps?.conversationId` (or the legacy `body.data?.conversationId`) and threads it into `chat({ conversationId })`, the value will now be `undefined` for any client running the upgraded `@tanstack/ai-client`, because the client no longer auto-emits `conversationId`. The fall-back to an auto-generated `threadId` keeps devtools correlation working *within* a single request, but **threadId stability across requests now depends on the client sending its own `threadId`** (which `ChatClient` does — see the AG-UI top-level `threadId` field surfaced via `params.threadId`). To restore the prior cross-request stable identifier, switch the server to read `params.threadId` and pass it to `chat({ threadId: params.threadId })`, or rely on the auto-fallback if cross-request stability is not required.
+
+**Custom middleware:** `ChatMiddlewareContext` now exposes both `ctx.threadId` (canonical) and `ctx.conversationId` (deprecated alias, always equal to `ctx.threadId`). New middleware should read `ctx.threadId`; existing middleware reading `ctx.conversationId` keeps working.
+
+```ts ignore
+// Before — explicit conversationId plumbing
+const params = await chatParamsFromRequest(req)
+chat({
+  messages: params.messages,
+  conversationId: params.forwardedProps.conversationId, // ← auto-emitted by old client
+})
+
+// After — drop the plumbing entirely
+const params = await chatParamsFromRequest(req)
+chat({ messages: params.messages })
+// devtools correlation auto-uses the resolved threadId
+```
+
+## Server endpoint upgrade — choose your tier
+
+The upgrade is **opt-in**: pick the tier that matches the features you use. Most servers fall into Tier 1 and need no code changes.
+
+### Tier 1 — Minimum (no changes for most servers)
+
+Keep reading `body.messages` and pass it through. `chat()` accepts mixed `UIMessage | ModelMessage` arrays and handles all AG-UI message-shape quirks internally — fan-out tool dedup, dropping `reasoning`/`activity`, collapsing `developer` → `system`.
+
+```ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { serverTools } from './tools'
+
+export async function POST(req: Request) {
+  const body = await req.json()
+  const provider = body.data?.provider // ← still works (legacy mirror)
+  // or, equivalently and recommended:
+  // const provider = body.forwardedProps?.provider
+
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages: body.messages, // AG-UI mixed shape — works directly
+    tools: serverTools,
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+If your existing endpoint reads `body.data.X`, **leave it as-is** — the wire emits a `data` field that mirrors `forwardedProps` exactly until the next major release. Migrate to `body.forwardedProps.X` (or Tier 2's `params.forwardedProps.X`) at your convenience.
+
+### Tier 2 — Recommended for production
+
+Adopt `chatParamsFromRequest` when you want any of:
+
+- **Clean 400 responses** for malformed bodies (Zod validation against `RunAgentInputSchema`).
+- **Access to `forwardedProps`** for client-driven options (provider, model, temperature, etc.).
+- **Access to AG-UI metadata** like `threadId`, `runId`, and `parentRunId` for observability, logging, or downstream forwarding (the runtime auto-generates these when not supplied; you only need to read them off `params` if you have a use for them).
+
+```ts
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { serverTools } from './tools'
+
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req)
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages: params.messages,
+    tools: serverTools,
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+`chatParamsFromRequest` reads `req.json()`, validates against AG-UI `RunAgentInputSchema`, and on failure **throws a 400 `Response`** that frameworks like TanStack Start, SolidStart, Remix, and React Router 7 return to the client automatically.
+
+> **Framework note.** Next.js Route Handlers, SvelteKit, Hono, and raw Node do not auto-handle thrown `Response` objects. In those, either wrap the call with try/catch and return the caught Response, or use `chatParamsFromRequestBody(await req.json())` directly with your own error handling.
+
+### Tier 3 — Optional: let the client advertise its tools
+
+`mergeAgentTools` lets the client declare its tools in the request payload (`RunAgentInput.tools`) and have them registered server-side on a per-request basis. **This is purely a convenience over the existing pattern**, not a migration requirement.
+
+If you were already registering client-side tools in your server's `tools` array — even ones without a `.server()` implementation — that pattern still works exactly as before. The runtime treats tools without `execute` as client-side and emits `ClientToolRequest` events; whether the registration came from a static array or `mergeAgentTools` is irrelevant.
+
+Adopt this tier only if you want the client to drive tool advertisement (e.g., your client surfaces different tools per session and you'd rather not keep the server's static registry in sync). The only delta from Tier 2 is the `tools` line — wrap `serverTools` with `mergeAgentTools(serverTools, params.tools)`:
+
+```ts
+import {
+  chat,
+  chatParamsFromRequest,
+  mergeAgentTools,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { serverTools } from './tools'
+
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req)
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages: params.messages,
+    tools: mergeAgentTools(serverTools, params.tools), // ← merges client-declared tools
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+`mergeAgentTools` registers client-declared tools as no-execute stubs server-side. The runtime emits a `ClientToolRequest` event when the model calls one; the client executes via its registered handler and posts the result back.
+
+## `forwardedProps` security (Tier 2+ only)
+
+Skip this section if you're on Tier 1. `forwardedProps` is only surfaced when you opt into `chatParamsFromRequest` (or `chatParamsFromRequestBody`).
+
+`forwardedProps` is arbitrary client-controlled JSON. **Do not** spread it directly into `chat({...})`:
+
+```ts ignore
+// 🚫 UNSAFE — a client could override `adapter`, `model`, `tools`, system prompts, anything
+chat({
+  adapter: openaiText('gpt-4o'),
+  ...params,
+  ...params.forwardedProps,
+})
+```
+
+Always destructure the specific fields you intend to forward:
+
+```ts
+import {
+  chat,
+  chatParamsFromRequest,
+  mergeAgentTools,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { serverTools } from './tools'
+
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req)
+
+  // ✅ SAFE — explicit allowlist. Sampling params live in modelOptions under
+  // each provider's native key (OpenAI: temperature / max_output_tokens).
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages: params.messages,
+    tools: mergeAgentTools(serverTools, params.tools),
+    modelOptions: {
+      temperature:
+        typeof params.forwardedProps.temperature === 'number'
+          ? params.forwardedProps.temperature
+          : undefined,
+      max_output_tokens:
+        typeof params.forwardedProps.maxTokens === 'number'
+          ? params.forwardedProps.maxTokens
+          : undefined,
+    },
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Mapping forwarded values into runtime context
+
+TanStack AI's `chat({ context })` is typed runtime context for tools and middleware. It is separate from AG-UI `RunAgentInput.context` and is not populated automatically from protocol fields.
+
+If a client value should become available to server tools or middleware, validate it from `forwardedProps` and build the runtime context explicitly:
+
+```ts
+import {
+  chat,
+  chatParamsFromRequest,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { serverTools } from './tools'
+import { session, defaultTenantId, req } from './context'
+
+const params = await chatParamsFromRequest(req)
+
+const tenantId =
+  typeof params.forwardedProps.tenantId === 'string'
+    ? params.forwardedProps.tenantId
+    : defaultTenantId
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  messages: params.messages,
+  tools: serverTools,
+  context: {
+    userId: session.user.id,
+    tenantId,
+  },
+})
+```
+
+## Client-side: nothing required, one rename recommended
+
+`useChat` and the connection adapters (`fetchServerSentEvents`, `fetchHttpStream`) handle the new wire format internally. Existing `UIMessage` state is unchanged. `clientTools(...)` declarations are now automatically advertised to the server in the request payload.
+
+### `body` → `forwardedProps` (recommended)
+
+The `body` option on `useChat` / `ChatClient` is now `@deprecated` in favor of `forwardedProps`. Both are accepted, both populate the same wire field. Migrate at your convenience:
+
+```ts
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+// Before — still works, but deprecated
+useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+  body: { provider: 'openai', model: 'gpt-4o' },
+})
+
+// After — recommended
+useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+  forwardedProps: { provider: 'openai', model: 'gpt-4o' },
+})
+```
+
+If both are passed during a partial migration, `forwardedProps` wins on key collision so stale `body` values don't shadow new ones.
+
+The Svelte equivalent renames `updateBody` → `updateForwardedProps`. The legacy `updateBody` is retained and marked `@deprecated`.
+
+### Optional: explicit thread control
+
+If you instantiated a `ChatClient` directly and want to control the thread identifier, pass `threadId` via the constructor options:
+
+```ts
+import { ChatClient } from '@tanstack/ai-client'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+const client = new ChatClient({
+  threadId: 'persistent-thread-from-storage',
+  connection: fetchServerSentEvents('/api/chat'),
+})
+```
+
+If you don't pass `threadId`, one is generated automatically and persists for the lifetime of the `ChatClient` instance. A fresh `runId` is generated for every send.
+
+## Tool-merge semantics
+
+- **Server tools win on name collision.** A tool registered server-side via `toolDefinition().server(...)` always executes server-side.
+- **Client-only tools become no-execute stubs** in `chat()` (when registered via `mergeAgentTools`). The runtime emits a `ClientToolRequest` event back to the client; the client's registered handler (via `clientTools(...)`) executes locally and posts the result.
+- **Dual-handler (both have it):** server executes, then `chat-client.ts`'s `onToolCall` fires the client's handler as a UI side-effect when the streamed tool result event arrives. The server's result is authoritative for the conversation.
+
+## Talking to a foreign AG-UI server
+
+A `@tanstack/ai-client` request hitting a foreign AG-UI server:
+
+- ✅ Single-turn user messages work — content is mirrored to AG-UI's `content` field.
+- ✅ Server-emitted events stream and render correctly.
+- ✅ Multi-turn history that includes tool results from prior turns: the foreign server reads them via the AG-UI fan-out duplicates we send (separate `{role:'tool',...}` messages).
+- ⚠️ Client-only tools are sent in the AG-UI `tools` field; whether the foreign server actually invokes them depends on its tool-calling logic.
+
+## Talking to a TanStack server from a foreign AG-UI client
+
+Pure AG-UI `RunAgentInput` payloads (no TanStack `parts` field) work end-to-end:
+
+- Tool messages pass through as `ModelMessage` entries with `role: 'tool'`.
+- `reasoning` messages are dropped (no LLM-replay equivalent today).
+- `activity` messages are dropped (no TanStack equivalent).
+- `developer` messages are collapsed to `system` role.
+
+## `@ag-ui/core` bump
+
+`@tanstack/ai` now depends on `@ag-ui/core@^0.0.52`. If your code imports types from `@tanstack/ai` that re-export AG-UI types, you may need minor type adjustments — see the changeset for specifics.
+
+## Out of scope (existing behavior preserved)
+
+- **Reasoning replay to LLM providers.** TanStack still drops `ThinkingPart` at the `UIMessage`→`ModelMessage` boundary (pre-existing behavior). Providers like Anthropic that require thinking blocks to be replayed for extended thinking continuation remain a separate concern, tracked outside this migration.
+- **AG-UI `state` and `context` fields.** Surfaced on `chatParamsFromRequestBody`'s return value as `state` and `aguiContext`, with `context` kept as a deprecated alias of `aguiContext` for backward compatibility. They are protocol-level fields available for your endpoint to inspect/forward. TanStack AI's typed runtime context is the separate `chat({ context })` option; validate and map AG-UI values into it yourself if you want tools or middleware to read them.
diff --git a/mintlify/ai/migration/migration-from-vercel-ai.md b/mintlify/ai/migration/migration-from-vercel-ai.md
new file mode 100644
index 000000000..717be50bc
--- /dev/null
+++ b/mintlify/ai/migration/migration-from-vercel-ai.md
@@ -0,0 +1,1587 @@
+---
+title: Migration from Vercel AI SDK
+id: migration-from-vercel-ai
+order: 2
+description: "Port an app from the Vercel AI SDK (ai / @ai-sdk/*) to TanStack AI — option-by-option mapping of streamText, generateText, generateObject, useChat, tools, middleware, structured output, and the agent loop."
+keywords:
+  - tanstack ai
+  - vercel ai sdk
+  - migration
+  - streamText
+  - generateText
+  - generateObject
+  - useChat
+  - ai sdk v5
+  - ai sdk v6
+  - middleware
+  - agent loop
+---
+
+# Migration from Vercel AI SDK
+
+This guide helps you migrate from the Vercel AI SDK (`ai` + `@ai-sdk/*`) to TanStack AI. Both libraries cover the same problem space — LLM calls, streaming, tool use, structured output, framework hooks — but TanStack AI uses a different architecture with enhanced type safety, tree-shakeable adapters, an isomorphic tool system, and a first-class middleware pipeline.
+
+The "Before" examples target **AI SDK v5 and v6**. Older v4 naming is called out inline where it differs.
+
+## Why Migrate?
+
+TanStack AI provides several advantages:
+
+- **Tree-shakeable adapters** - Import only what you need, reducing bundle size
+- **Isomorphic tools** - Define tools once, implement for server and client separately
+- **Per-model type safety** - TypeScript knows exact options available for each model
+- **Framework agnostic** - Works with React, Vue, Solid, Svelte, and vanilla JS
+- **Full streaming type safety** - Typed stream chunks and message parts
+
+## Quick Reference
+
+| Vercel AI SDK | TanStack AI |
+|--------------|-------------|
+| `ai` | `@tanstack/ai` |
+| `@ai-sdk/openai` | `@tanstack/ai-openai` |
+| `@ai-sdk/anthropic` | `@tanstack/ai-anthropic` |
+| `@ai-sdk/google` | `@tanstack/ai-gemini` |
+| `@ai-sdk/react` | `@tanstack/ai-react` |
+| `@ai-sdk/vue` | `@tanstack/ai-vue` |
+| `@ai-sdk/solid` | `@tanstack/ai-solid` |
+| `@ai-sdk/svelte` | `@tanstack/ai-svelte` |
+
+> **Note:** Since AI SDK v5, framework hooks moved from `ai/react` (v4) to dedicated packages like `@ai-sdk/react`. If you are on v4, swap the old subpaths for their v5 equivalents.
+
+## Installation
+
+### Before (Vercel AI SDK)
+
+```bash
+# v5+ (framework hook lives in @ai-sdk/react)
+npm install ai @ai-sdk/react @ai-sdk/openai @ai-sdk/anthropic
+```
+
+### After (TanStack AI)
+
+```bash
+npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai @tanstack/ai-anthropic
+```
+
+## Server-Side Migration
+
+### Basic Text Generation
+
+#### Before (Vercel AI SDK)
+
+```typescript
+import { streamText, convertToModelMessages } from 'ai'
+import { openai } from '@ai-sdk/openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const result = streamText({
+    model: openai('gpt-4o'),
+    messages: await convertToModelMessages(messages),
+  })
+
+  return result.toUIMessageStreamResponse()
+  // (v4: result.toDataStreamResponse())
+}
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Key Differences
+
+| Vercel AI SDK | TanStack AI | Notes |
+|--------------|-------------|-------|
+| `streamText()` | `chat()` | Main text generation function |
+| `generateText()` | `chat({ stream: false })` | Returns `Promise<string>` |
+| `generateObject()` / `streamObject()` / `Output.object()` | `chat({ outputSchema })` | Returns `Promise<T>` — see [Structured Output](#structured-output) |
+| `openai('gpt-4o')` | `openaiText('gpt-4o')` | Activity-specific adapters |
+| `result.toUIMessageStreamResponse()` / `.toTextStreamResponse()` | `toServerSentEventsResponse(stream)` / `toHttpResponse(stream)` | Separate utility functions |
+| `model` parameter | `adapter` parameter | Model baked into adapter |
+
+### Full `streamText` → `chat()` Option Mapping
+
+Options accepted by `streamText` as of AI SDK v6, and where each lives in TanStack AI's `chat()`. Options that exist on both sides keep the same semantics unless noted.
+
+| `streamText` option | `chat()` equivalent | Notes |
+|--------------------|--------------------|-------|
+| `model: openai('gpt-4o')` | `adapter: openaiText('gpt-4o')` | Activity-specific adapters |
+| `prompt: 'Hello'` | `messages: [{ role: 'user', content: 'Hello' }]` | TanStack is messages-only |
+| `messages` | `messages` | Same concept; content parts differ (see [Multimodal](#multimodal-content)) |
+| `system: 'You are…'` | `systemPrompts: ['You are…']` | Root-level `string[]` |
+| `tools: { name: tool({…}) }` | `tools: [toolInstance, …]` | Array of tool instances instead of a keyed object |
+| `toolChoice: 'auto' \| 'required' \| 'none' \| { type, toolName }` | `modelOptions.toolChoice` (provider-specific) | Not a top-level option — set on the adapter's `modelOptions` |
+| `activeTools: string[]` | Filter `tools` yourself, or use `prepareStep` equivalent via middleware | No dedicated option — see [Middleware](#middleware) for dynamic tool filtering |
+| `maxOutputTokens` | `maxTokens` | Renamed to match the original OpenAI naming |
+| `temperature` | `temperature` | Same |
+| `topP` | `topP` | Same |
+| `topK` | `modelOptions.topK` (where the provider supports it) | Lives under typed `modelOptions` |
+| `presencePenalty` | `modelOptions.presencePenalty` | Lives under typed `modelOptions` |
+| `frequencyPenalty` | `modelOptions.frequencyPenalty` | Lives under typed `modelOptions` |
+| `seed` | `modelOptions.seed` | Lives under typed `modelOptions` |
+| `stopSequences` | `modelOptions.stop` (provider-specific) | Lives under typed `modelOptions` |
+| `maxRetries` | Wrap your fetch/adapter, or add a retry `middleware` | Not built into `chat()` |
+| `timeout` | Combine `abortController` + `AbortSignal.timeout(ms)` | Not built into `chat()` |
+| `abortSignal: controller.signal` | `abortController: controller` | Pass the controller itself, not just the signal |
+| `headers` | Configure on the adapter (e.g., `openaiText({ headers })`) | Not a per-call option |
+| `providerOptions: { openai: { … } }` | `modelOptions: { … }` | Flat; the adapter already knows which provider it is. Typed per model |
+| `stopWhen: stepCountIs(5)` | `agentLoopStrategy: maxIterations(5)` | See [Agent Loop Control](#agent-loop-control) |
+| `stopWhen: hasToolCall('x')` | Custom `AgentLoopStrategy` that inspects `messages` | No built-in "stop on specific tool" preset yet — one-liner custom strategy; see [Agent Loop Control](#agent-loop-control) |
+| `stopWhen: [a, b]` | `agentLoopStrategy: combineStrategies([a, b])` | Multiple conditions, AND semantics |
+| `prepareStep` | `middleware` with `onConfig`/`onIteration` | See [Middleware](#middleware) |
+| `experimental_transform` | `middleware.onChunk` (transform / drop / expand chunks) | See [Middleware](#middleware) |
+| `experimental_context` | `context` (root-level) | Typed runtime context passed to middleware hooks and tool implementations |
+| `experimental_telemetry` | `middleware` + your tracer of choice | See [Observability](#observability-logging-metrics-tracing) |
+| `experimental_repairToolCall` | `middleware.onBeforeToolCall` | Return transformed args or a decision |
+| `experimental_download` | Preprocess your `messages` before calling `chat()` | No built-in hook |
+| `onChunk` (streamText) | `middleware.onChunk` | Also reachable by consuming the returned iterable |
+| `onError` | `middleware.onError` | Terminal hook |
+| `onStepFinish` | `middleware.onIteration` / `onToolPhaseComplete` / `onUsage` | Split into finer-grained hooks |
+| `onFinish` | `middleware.onFinish` | Terminal hook |
+| `onAbort` | `middleware.onAbort` | Terminal hook |
+| `output: Output.object({ schema })` | `outputSchema` | See [Structured Output](#structured-output) |
+| — | `conversationId` / `threadId` / `runId` | TanStack-only, for correlating requests across your system and AG-UI |
+
+### `streamText` result → TanStack AI equivalents
+
+`streamText` returns an object with accessor promises; TanStack AI returns the stream directly. Everything you can pull off that object is available via stream consumption, middleware, or response helpers.
+
+| `streamText` result member | TanStack AI equivalent |
+|---------------------------|------------------------|
+| `result.textStream` | Filter the async iterable: `for await (const c of stream) if (c.type === 'text-delta') …` |
+| `result.fullStream` | The `stream` returned by `chat()` **is** the full stream (`AsyncIterable<StreamChunk>`) |
+| `result.text` | `await streamToText(stream)` or `chat({ …, stream: false })` |
+| `result.content` | Accumulate parts in `middleware.onChunk`, or read the final `UIMessage` in `onFinish` |
+| `result.toolCalls` / `result.toolResults` | Read from chunks in `middleware.onChunk` / `onAfterToolCall` |
+| `result.usage` / `result.totalUsage` | `middleware.onUsage(ctx, usage)` |
+| `result.finishReason` | `middleware.onFinish(ctx, info)` |
+| `result.steps` | Accumulate via `middleware.onIteration` / `onToolPhaseComplete` |
+| `result.toUIMessageStreamResponse()` | `toServerSentEventsResponse(stream)` |
+| `result.toTextStreamResponse()` | Collect with `streamToText(stream)` and return a plain `Response`, **or** pair with the client's `fetchHttpStream` via `toHttpResponse(stream)` |
+| `result.pipeUIMessageStreamToResponse(res)` | `toServerSentEventsStream(stream).pipeTo(…)` |
+| `result.consumeStream()` | `for await (const _ of stream) {}` |
+
+### Generation Options
+
+TanStack AI promotes a small, cross-provider set of options to the top level (`temperature`, `topP`, `maxTokens`) and pushes everything provider-specific into a single typed `modelOptions` bag. There's no `providerOptions: { openai: {…} }` nesting — the adapter already knows which provider it is, so `modelOptions` is flat and typed against the selected model.
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript
+import { streamText } from 'ai'
+import { openai } from '@ai-sdk/openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const result = streamText({
+  model: openai('gpt-4o'),
+  messages,
+  temperature: 0.7,
+  maxOutputTokens: 1000, // (v5+); `maxTokens` on v4
+  topP: 0.9,
+  topK: 40,
+  presencePenalty: 0.1,
+  frequencyPenalty: 0.1,
+  seed: 42,
+  stopSequences: ['\n\nUser:'],
+  // Provider-specific options (v5+)
+  providerOptions: {
+    openai: {
+      responseFormat: { type: 'json_object' },
+    },
+  },
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  // Provider-specific options typed for gpt-4o specifically
+  modelOptions: {
+    temperature: 0.7,
+    max_output_tokens: 1000,
+    top_p: 0.9,
+    service_tier: 'default',
+    store: true,
+    parallel_tool_calls: false,
+  },
+})
+```
+
+> Autocomplete in `modelOptions` reflects the **exact** adapter and model you passed. Swap `openaiText('gpt-4o')` for `anthropicText('claude-sonnet-4-5')` and the shape changes to match Anthropic's options.
+
+### System Messages
+
+TanStack AI accepts system prompts at the **root level** via the `systemPrompts` option. You pass an array of strings, and each adapter merges them into whatever format the provider expects. You don't manually prepend a `system` message to the `messages` array.
+
+#### Before (Vercel AI SDK)
+
+```typescript
+import { streamText } from 'ai'
+import { openai } from '@ai-sdk/openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const result = streamText({
+  model: openai('gpt-4o'),
+  system: 'You are a helpful assistant.',
+  messages,
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  systemPrompts: ['You are a helpful assistant.'],
+  messages,
+})
+```
+
+Multiple system prompts are supported — useful for composing persona, policies, and tool-usage guidance without string concatenation:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  systemPrompts: [
+    'You are a helpful assistant.',
+    'Respond in concise, plain English.',
+    'Never fabricate citations.',
+  ],
+  messages,
+})
+```
+
+## Client-Side Migration
+
+### Basic useChat Hook
+
+#### Before (Vercel AI SDK v5+)
+
+```tsx
+import { useChat } from '@ai-sdk/react'
+import { DefaultChatTransport } from 'ai'
+import { useState } from 'react'
+
+export function Chat() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, status } = useChat({
+    transport: new DefaultChatTransport({ api: '/api/chat' }),
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (input.trim() && status !== 'streaming') {
+      sendMessage({ text: input })
+      setInput('')
+    }
+  }
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          {m.role}:{' '}
+          {m.parts.map((p, i) => (p.type === 'text' ? <span key={i}>{p.text}</span> : null))}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={(e) => setInput(e.target.value)} />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+#### After (TanStack AI)
+
+```tsx
+import { useState } from 'react'
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
+
+export function Chat() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (input.trim() && !isLoading) {
+      sendMessage(input)
+      setInput('')
+    }
+  }
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.role}:{' '}
+          {message.parts.map((part, idx) =>
+            part.type === 'text' ? <span key={idx}>{part.content}</span> : null
+          )}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={(e) => setInput(e.target.value)} />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+### useChat API Differences
+
+Vercel AI SDK v5+ already moved away from the magic `input`/`handleInputChange`/`handleSubmit` of v4 and now expects you to manage your own input state. TanStack AI follows that same philosophy — the hook is headless and gives you building blocks instead of form glue.
+
+| Vercel AI SDK (v5+) | TanStack AI | Notes |
+|--------------------|-------------|-------|
+| `transport: new DefaultChatTransport({ api: '/api/chat' })` | `connection: fetchServerSentEvents('/api/chat')` | Pluggable connection adapter |
+| `sendMessage({ text })` | `sendMessage(text)` | Accepts plain string; pass `UIMessage` objects via `append()` |
+| `status` (`'submitted' \| 'streaming' \| 'ready' \| 'error'`) | `isLoading` (boolean) | Coarser in TanStack; full stream state available via events |
+| `regenerate()` | `reload()` | Re-runs the last assistant turn |
+| `stop()` | `stop()` | Cancel the in-flight stream |
+| `setMessages(messages)` | `setMessages(messages)` | Direct message replacement |
+| `addToolOutput({ tool, toolCallId, output })` (v6; was `addToolResult` in v5) | `addToolResult({ tool, toolCallId, output })` | Resolve a client-side tool call |
+| `addToolApprovalResponse({ id, approved })` (v6) | `addToolApprovalResponse({ id, approved })` | First-class user-approval flow for tools |
+| `m.parts` (typed union) | `message.parts` (typed union) | Both render via structured parts |
+
+### Message Structure
+
+#### Before (Vercel AI SDK)
+
+```typescript ignore
+interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  toolInvocations?: ToolInvocation[]
+}
+```
+
+#### After (TanStack AI)
+
+These are the `@tanstack/ai-client` shapes (what `useChat` gives you). The core `@tanstack/ai` message types are similar, but `input` (parsed tool input) is a client-layer projection — server-side code reads the raw JSON from `arguments` directly.
+
+```typescript ignore
+interface UIMessage<TTools extends ReadonlyArray<AnyClientTool> = any> {
+  id: string
+  role: 'system' | 'user' | 'assistant'
+  parts: Array<MessagePart<TTools>>
+  createdAt?: Date
+}
+
+type MessagePart<TTools> =
+  | TextPart
+  | ToolCallPart<TTools>
+  | ToolResultPart
+  | ThinkingPart
+
+interface TextPart {
+  type: 'text'
+  content: string
+}
+
+interface ThinkingPart {
+  type: 'thinking'
+  content: string
+}
+
+interface ToolCallPart {
+  type: 'tool-call'
+  id: string
+  name: string
+  arguments: string          // Raw JSON string (may be partial while streaming)
+  input?: unknown            // Parsed input (typed when tools are typed)
+  output?: unknown           // Execution output once available
+  state: ToolCallState
+  approval?: {
+    id: string               // Approval request ID
+    needsApproval: boolean
+    approved?: boolean       // undefined until the user responds
+  }
+}
+
+interface ToolResultPart {
+  type: 'tool-result'
+  toolCallId: string
+  content: string
+  state: ToolResultState
+  error?: string             // Present when state is 'error'
+}
+
+type ToolCallState =
+  | 'awaiting-input'
+  | 'input-streaming'
+  | 'input-complete'
+  | 'approval-requested'
+  | 'approval-responded'
+
+type ToolResultState = 'streaming' | 'complete' | 'error'
+```
+
+> TanStack AI does not have separate `reasoning`, `source-url`, `source-document`, or `file` part types that you may have seen in other SDKs. Provider-specific reasoning traces arrive as `thinking` parts; citations and inline files are surfaced through `metadata` on text parts or through your tool outputs.
+
+### Rendering Messages
+
+#### Before (Vercel AI SDK)
+
+```tsx ignore
+{messages.map((m) => (
+  <div key={m.id}>
+    {m.role}: {m.content}
+    {m.toolInvocations?.map((tool) => (
+      <div key={tool.toolCallId}>
+        Tool: {tool.toolName} - {JSON.stringify(tool.result)}
+      </div>
+    ))}
+  </div>
+))}
+```
+
+#### After (TanStack AI)
+
+```tsx ignore
+{messages.map((message) => (
+  <div key={message.id}>
+    {message.role}:{' '}
+    {message.parts.map((part, idx) => {
+      if (part.type === 'text') {
+        return <span key={idx}>{part.content}</span>
+      }
+      if (part.type === 'thinking') {
+        return <em key={idx}>Thinking: {part.content}</em>
+      }
+      if (part.type === 'tool-call') {
+        return (
+          <div key={part.id}>
+            Tool: {part.name} - {JSON.stringify(part.output)}
+          </div>
+        )
+      }
+      return null
+    })}
+  </div>
+))}
+```
+
+## Tools / Function Calling
+
+TanStack AI uses an isomorphic tool system where you define the schema once and implement it separately for server and client.
+
+### Basic Tool Definition
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript
+import { streamText, tool } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { z } from 'zod'
+import { fetchWeather } from './weather'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const result = streamText({
+  model: openai('gpt-4o'),
+  messages,
+  tools: {
+    getWeather: tool({
+      description: 'Get weather for a location',
+      inputSchema: z.object({ // renamed from `parameters` in v5
+        location: z.string(),
+      }),
+      execute: async ({ location }) => {
+        const weather = await fetchWeather(location)
+        return weather
+      },
+    }),
+  },
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { chat, toolDefinition, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+import { fetchWeather } from './weather'
+
+// Step 1: Define the tool schema
+const getWeatherDef = toolDefinition({
+  name: 'getWeather',
+  description: 'Get weather for a location',
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+  }),
+})
+
+// Step 2: Create server implementation
+const getWeather = getWeatherDef.server(async ({ location }) => {
+  const weather = await fetchWeather(location)
+  return weather
+})
+
+// Step 3: Use in chat
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages,
+    tools: [getWeather],
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Tool Schema Differences
+
+| Vercel AI SDK | TanStack AI |
+|--------------|-------------|
+| `parameters` (v4) / `inputSchema` (v5+) | `inputSchema` |
+| N/A | `outputSchema` (optional — enables end-to-end type safety) |
+| `execute` inline on the server | `.server()` or `.client()` methods (isomorphic definition) |
+| Object with tool names as keys | Array of tool instances |
+
+### Client-Side Tools
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript
+import { DefaultChatTransport } from 'ai'
+import { useChat } from '@ai-sdk/react'
+
+const { messages, addToolOutput } = useChat({
+  transport: new DefaultChatTransport({ api: '/api/chat' }),
+  onToolCall: async ({ toolCall }) => {
+    if (toolCall.toolName === 'showNotification') {
+      // v6: addToolOutput (was addToolResult in v5)
+      addToolOutput({
+        tool: 'showNotification',
+        toolCallId: toolCall.toolCallId,
+        output: { success: true },
+      })
+    }
+  },
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
+import { clientTools } from '@tanstack/ai-client'
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+import { toast } from './toast'
+
+// Define once (can be shared with server)
+const showNotificationDef = toolDefinition({
+  name: 'showNotification',
+  description: 'Show a toast notification in the browser',
+  inputSchema: z.object({ message: z.string() }),
+  outputSchema: z.object({ success: z.boolean() }),
+})
+
+// Client implementation
+const showNotification = showNotificationDef.client(({ message }) => {
+  toast(message)
+  return { success: true }
+})
+
+// Use in component — `clientTools()` wires each client tool's `.client(...)`
+// handler to run automatically when the server-side agent calls it; you don't
+// need an onToolCall handler or an addToolOutput/addToolResult call.
+const { messages } = useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+  tools: clientTools(showNotification),
+})
+```
+
+### Tool Approval Flow
+
+Both libraries expose first-class human-in-the-loop approval. The shapes are similar — a tool opts in with `needsApproval: true`, the client renders UI on an `approval-requested` state, and you call `addToolApprovalResponse` with the approval ID.
+
+#### Before (Vercel AI SDK v6)
+
+```typescript
+// Tool definition (server)
+import { tool, DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai'
+import { useChat } from '@ai-sdk/react'
+import { z } from 'zod'
+import { bookingService } from './booking'
+
+const bookFlight = tool({
+  description: 'Book a flight',
+  inputSchema: z.object({ flightId: z.string() }),
+  needsApproval: true, // v6: first-class approval
+  execute: async ({ flightId }) => bookingService.book(flightId),
+})
+
+// Client
+const { messages, addToolApprovalResponse } = useChat({
+  transport: new DefaultChatTransport({ api: '/api/chat' }),
+  sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+})
+```
+
+#### After (TanStack AI)
+
+```tsx ignore
+// Built-in approval support
+const bookFlightDef = toolDefinition({
+  name: 'bookFlight',
+  description: 'Book a flight on behalf of the user',
+  inputSchema: z.object({ flightId: z.string() }),
+  needsApproval: true, // Request user approval
+})
+
+// In component
+const { messages, addToolApprovalResponse } = useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+// Render approval UI
+{message.parts.map((part, idx) => {
+  if (
+    part.type === 'tool-call' &&
+    part.state === 'approval-requested' &&
+    part.approval
+  ) {
+    return (
+      <div key={idx}>
+        <p>Approve booking flight {part.input?.flightId}?</p>
+        <button
+          onClick={() => addToolApprovalResponse({ id: part.approval!.id, approved: true })}
+        >
+          Approve
+        </button>
+        <button
+          onClick={() => addToolApprovalResponse({ id: part.approval!.id, approved: false })}
+        >
+          Deny
+        </button>
+      </div>
+    )
+  }
+  return null
+})}
+```
+
+> `part.input` is the **parsed** tool input (typed when your tools are typed via `clientTools()` + `InferChatMessages`). The raw streaming JSON is available as `part.arguments` if you need to show progress before input parsing completes.
+
+## Structured Output
+
+This section covers the `generateObject` / `streamObject` / `Output.object(...)` migration path. In AI SDK v6, structured generation lives on `generateText` / `streamText` via the `output:` parameter (e.g. `Output.object({ schema })`). The dedicated `generateObject` / `streamObject` functions are deprecated but still present. TanStack AI follows the same "one function" philosophy — pass `outputSchema` to `chat()` and it runs the full agentic loop (tools, retries, loop strategy) and returns a typed, validated value.
+
+### Before (Vercel AI SDK v6)
+
+```typescript
+import { generateText, Output } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { z } from 'zod'
+
+const { output } = await generateText({
+  model: openai('gpt-4o'),
+  prompt: 'Extract the user profile from this bio…',
+  output: Output.object({
+    schema: z.object({
+      name: z.string(),
+      age: z.number(),
+      interests: z.array(z.string()),
+    }),
+  }),
+})
+// output is typed as { name: string; age: number; interests: string[] }
+```
+
+### After (TanStack AI)
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+const profile = await chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'Extract the user profile from this bio…' }],
+  outputSchema: z.object({
+    name: z.string(),
+    age: z.number(),
+    interests: z.array(z.string()),
+  }),
+})
+// profile: { name: string; age: number; interests: string[] }
+```
+
+### Notes
+
+- `outputSchema` accepts any **Standard Schema**-compatible library: **Zod v4.2+**, **ArkType v2.1.28+**, **Valibot v1.2+** (via `toStandardJsonSchema()`), or a plain JSON Schema object (which loses TS inference and falls back to `unknown`).
+- When `outputSchema` is set, `chat()` always returns a `Promise<T>` — the `stream` flag is ignored, because the value only makes sense once the schema has validated the final output.
+- Adapters implement structured output the best way for their provider: OpenAI uses `response_format: json_schema`, Anthropic uses tool-based extraction, Gemini uses `responseSchema`, Ollama uses JSON mode. You don't need to pick the strategy.
+- Arrays are just `z.array(z.object({ … }))`. TanStack AI does not yet stream partial objects the way `streamObject().elementStream` does on the Vercel side — if that's load-bearing, stay on `streamText` for now and migrate the object case when partial streaming lands.
+
+## Agent Loop Control
+
+Both SDKs let the model call tools in a loop. The shape of the control knob is different:
+
+| Vercel AI SDK v6 | TanStack AI |
+|------------------|-------------|
+| `stopWhen: stepCountIs(5)` | `agentLoopStrategy: maxIterations(5)` |
+| `stopWhen: hasToolCall('bookFlight')` | Custom `AgentLoopStrategy` that inspects `messages` for the tool name |
+| `stopWhen: untilFinishReason(['stop'])` (custom condition) | `agentLoopStrategy: untilFinishReason(['stop'])` |
+| `stopWhen: [stepCountIs(20), hasToolCall('done')]` | `agentLoopStrategy: combineStrategies([maxIterations(20), /* your hasToolCall */ ])` |
+| `prepareStep({ stepNumber, messages, steps, model })` | `middleware.onConfig(ctx, config)` + `middleware.onIteration(ctx, info)` |
+
+Default loop budget: TanStack AI defaults to `maxIterations(5)` if you don't pass a strategy.
+
+### Before (Vercel AI SDK v6)
+
+```typescript
+import { streamText, stepCountIs } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { getWeather } from './tools'
+
+const messages = [{ role: 'user' as const, content: 'What is the weather?' }]
+
+const result = streamText({
+  model: openai('gpt-4o'),
+  messages,
+  tools: { getWeather },
+  stopWhen: stepCountIs(10),
+  prepareStep: async ({ stepNumber, messages: stepMessages }) => {
+    // log/rewrite messages between steps, filter tools, etc.
+    if (stepNumber > 0) return {}
+    return {}
+  },
+})
+```
+
+### After (TanStack AI)
+
+```typescript
+import {
+  chat,
+  combineStrategies,
+  maxIterations,
+  untilFinishReason,
+  toServerSentEventsResponse,
+  type ChatMiddleware,
+  type ChatMiddlewareContext,
+  type ChatMiddlewareConfig,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { getWeather } from './tools'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages,
+    tools: [getWeather],
+    agentLoopStrategy: combineStrategies([
+      maxIterations(10),
+      untilFinishReason(['stop']), // stop when the model says it's done
+    ]),
+    middleware: [
+      {
+        // `prepareStep` analogue: inspect/rewrite config at the start of each iteration
+        onConfig: (ctx: ChatMiddlewareContext, config: ChatMiddlewareConfig) => {
+          if (ctx.iteration > 0) {
+            // e.g. return a Partial<ChatMiddlewareConfig> to filter tools, trim
+            // messages, or change modelOptions for this iteration
+            return undefined
+          }
+        },
+      } satisfies ChatMiddleware,
+    ],
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+#### Mid-loop model switching
+
+`prepareStep` in AI SDK v6 lets you return a different `model` per step. TanStack AI doesn't support swapping the adapter inside a single `chat()` run — `modelOptions` is typed per adapter, which is what gives you compile-time model safety. The equivalent is to end the current loop (via an `agentLoopStrategy`) and start a new `chat()` with a different adapter, feeding it the in-progress messages:
+
+```typescript
+import { chat, maxIterations } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { getWeather } from './tools'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// Stage 1: heavy model for the opening turn
+const firstPass = await chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  agentLoopStrategy: maxIterations(1),
+  stream: false,
+})
+
+// Stage 2: cheaper model for the rest
+const followUp = chat({
+  adapter: openaiText('gpt-4o-mini'),
+  messages: [...messages, { role: 'assistant' as const, content: firstPass }],
+  tools: [getWeather],
+})
+```
+
+## Middleware
+
+AI SDK v6 has two middleware-ish extension points:
+
+1. **`wrapLanguageModel({ model, middleware })`** — provider-level interception (`transformParams`, `wrapGenerate`, `wrapStream`) for logging, caching, guardrails, RAG.
+2. **`experimental_transform`** on `streamText` — transforms the stream of chunks.
+
+TanStack AI collapses both into a single first-class `middleware: ChatMiddleware[]` option on `chat()`. It hooks into the full lifecycle, not just the model call or the chunk stream, and is the recommended place for logging, tracing, caching, redaction, and tool interception.
+
+### Before (Vercel AI SDK v6)
+
+```typescript
+import { wrapLanguageModel, streamText, type LanguageModelMiddleware } from 'ai'
+import { openai } from '@ai-sdk/openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const loggingMiddleware = {
+  specificationVersion: 'v3' as const,
+  wrapGenerate: async ({ doGenerate, params }) => {
+    console.log('params', params)
+    const result = await doGenerate()
+    console.log('content', result.content)
+    return result
+  },
+  wrapStream: async ({ doStream, params }) => doStream(),
+  transformParams: async ({ params }) => params,
+} satisfies LanguageModelMiddleware
+
+const wrapped = wrapLanguageModel({
+  model: openai('gpt-4o'),
+  middleware: [loggingMiddleware],
+})
+
+const result = streamText({ model: wrapped, messages })
+```
+
+### After (TanStack AI)
+
+```typescript
+import { chat, toServerSentEventsResponse, type ChatMiddleware } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+type AppContext = { userId: string }
+
+const loggingMiddleware: ChatMiddleware<AppContext> = {
+  onStart: (ctx) => console.log('start', { requestId: ctx.requestId, userId: ctx.context.userId }),
+  onConfig: (ctx, config) => console.log('config', config),
+  onChunk:  (ctx, chunk) => { /* observe or transform; return null to drop */ },
+  onUsage:  (ctx, usage) => console.log('usage', usage),
+  onFinish: (ctx, info)  => console.log('finish', info),
+  onError:  (ctx, err)   => console.error('error', err),
+}
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages,
+    middleware: [loggingMiddleware],
+    context: { userId: 'u_123' }, // passed to every hook as typed ctx.context
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Full hook inventory
+
+Each middleware is a plain object. Every hook is optional, so pick what you need.
+
+| Hook | Called when | Can transform? |
+|------|-------------|----------------|
+| `onStart(ctx)` | Chat run starts | — |
+| `onConfig(ctx, config)` | Init + before each model call | Return `Partial<ChatMiddlewareConfig>` to mutate messages, systemPrompts, tools, temperature, etc. |
+| `onIteration(ctx, info)` | Start of each agent-loop iteration | — |
+| `onChunk(ctx, chunk)` | Every yielded `StreamChunk` | Return a chunk / array of chunks / `null` to drop |
+| `onBeforeToolCall(ctx, hookCtx)` | Before a tool executes | Return a `BeforeToolCallDecision` to rewrite args, skip, or abort |
+| `onAfterToolCall(ctx, info)` | After a tool executes (success or failure) | — |
+| `onToolPhaseComplete(ctx, info)` | All tools in an iteration done | — |
+| `onUsage(ctx, usage)` | Provider reports token usage | — |
+| `onFinish(ctx, info)` | Run finished normally (terminal) | — |
+| `onAbort(ctx, info)` | Run aborted (terminal) | — |
+| `onError(ctx, info)` | Unhandled error (terminal) | — |
+
+`ctx` carries `requestId`, `streamId`, `threadId`, `iteration`, `model`, `provider`, `systemPrompts`, `toolNames`, `messages`, `context` (your typed runtime value), `abort(reason)`, `defer(promise)`, `createId(prefix)`, and more. See [the middleware guide](/ai/advanced/middleware) and [runtime context guide](/ai/advanced/runtime-context) for the full reference.
+
+### Built-in: tool-call cache
+
+TanStack AI ships a `toolCacheMiddleware` that memoizes tool results by `name + args`. There's no direct Vercel equivalent — on the Vercel side you'd compose it yourself in `wrapGenerate` or inside each tool's `execute`. Example:
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { toolCacheMiddleware } from '@tanstack/ai/middlewares'
+import { openaiText } from '@tanstack/ai-openai'
+import { searchDocs, getWeather } from './tools'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages,
+    tools: [searchDocs, getWeather],
+    middleware: [
+      toolCacheMiddleware({
+        maxSize: 100,
+        ttl: 5 * 60_000, // 5 minutes
+        toolNames: ['searchDocs'], // only cache these
+        // storage: redisStorage, // plug in Redis / localStorage / custom
+      }),
+    ],
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Mapping common Vercel patterns to TanStack middleware
+
+| Vercel pattern | TanStack middleware hook |
+|----------------|--------------------------|
+| `experimental_transform` (chunk transform) | `onChunk` |
+| `experimental_repairToolCall` | `onBeforeToolCall` |
+| `prepareStep` (dynamic model/tools/messages) | `onConfig` + `onIteration` |
+| `wrapLanguageModel` logging | `onStart` + `onConfig` + `onFinish` |
+| Custom caching in `wrapGenerate` | `toolCacheMiddleware` or your own `onBeforeToolCall`/`onAfterToolCall` |
+| `experimental_telemetry` | Any terminal hook (`onFinish`/`onAbort`/`onError`) + your tracer |
+
+## Observability (logging, metrics, tracing)
+
+Both libraries leave the wire to your tracer of choice (OpenTelemetry, Sentry, Datadog, …). The plug point differs:
+
+- **Vercel AI SDK**: `experimental_telemetry` on `streamText` + the lifecycle callbacks (`onChunk`, `onStepFinish`, `onFinish`, `onError`).
+- **TanStack AI**: a middleware with the hooks you need. `onStart` + `onFinish`/`onAbort`/`onError` covers request-level spans; `onChunk` + `onUsage` gives you fine-grained timing; `onBeforeToolCall`/`onAfterToolCall` for tool spans.
+
+Because `ctx.requestId` and `ctx.streamId` are stable across hooks, you get one trace per request without threading IDs manually.
+
+## Provider Adapters
+
+TanStack AI uses activity-specific adapters for optimal tree-shaking.
+
+### OpenAI
+
+#### Before (Vercel AI SDK)
+
+```typescript ignore
+import { openai } from '@ai-sdk/openai'
+
+// Chat
+streamText({ model: openai('gpt-4o'), ... })
+
+// Embeddings
+embed({ model: openai.embedding('text-embedding-3-small'), ... })
+
+// Image generation
+generateImage({ model: openai.image('dall-e-3'), ... })
+```
+
+#### After (TanStack AI)
+
+```typescript ignore
+import { openaiText, openaiImage, openaiSpeech } from '@tanstack/ai-openai'
+
+// Chat
+chat({ adapter: openaiText('gpt-4o'), ... })
+
+// Image generation
+generateImage({ adapter: openaiImage('dall-e-3'), ... })
+
+// Text to speech
+generateSpeech({ adapter: openaiSpeech('tts-1'), ... })
+
+// Embeddings: Use OpenAI SDK directly or your vector DB's built-in support
+```
+
+### Anthropic
+
+#### Before (Vercel AI SDK)
+
+```typescript ignore
+import { anthropic } from '@ai-sdk/anthropic'
+
+streamText({ model: anthropic('claude-sonnet-4-5-20250514'), ... })
+```
+
+#### After (TanStack AI)
+
+```typescript ignore
+import { anthropicText } from '@tanstack/ai-anthropic'
+
+chat({ adapter: anthropicText('claude-sonnet-4-5-20250514'), ... })
+```
+
+### Google (Gemini)
+
+#### Before (Vercel AI SDK)
+
+```typescript ignore
+import { google } from '@ai-sdk/google'
+
+streamText({ model: google('gemini-1.5-pro'), ... })
+```
+
+#### After (TanStack AI)
+
+```typescript ignore
+import { geminiText } from '@tanstack/ai-gemini'
+
+chat({ adapter: geminiText('gemini-2.5-flash'), ... })
+```
+
+## Streaming Responses
+
+### Server Response Formats
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript ignore
+// UI message stream (default, for useChat)
+return result.toUIMessageStreamResponse()
+
+// Plain text stream
+return result.toTextStreamResponse()
+```
+
+#### After (TanStack AI)
+
+```typescript
+import {
+  chat,
+  toServerSentEventsResponse,
+  toServerSentEventsStream,
+  toHttpResponse,
+  toHttpStream,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const abortController = new AbortController()
+const traceId = 'trace-123'
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+async function handler() {
+  const stream = chat({ adapter: openaiText('gpt-4o'), messages })
+
+  // SSE response (recommended; pairs with fetchServerSentEvents on the client).
+  // Both response helpers accept a ResponseInit with an optional abortController
+  // — merge custom headers, status, or cancellation without unwrapping the helper.
+  return toServerSentEventsResponse(stream, {
+    abortController,
+    status: 200,
+    headers: { 'X-Trace-Id': traceId },
+  })
+}
+
+async function handler2() {
+  const stream = chat({ adapter: openaiText('gpt-4o'), messages })
+
+  // Newline-delimited JSON response (pairs with fetchHttpStream on the client).
+  return toHttpResponse(stream, { abortController })
+}
+
+// Or grab the raw ReadableStream if you need to pipe it somewhere else
+// (writing to a Node ServerResponse, wrapping in a transform, etc.).
+const stream2 = chat({ adapter: openaiText('gpt-4o'), messages })
+const sseStream = toServerSentEventsStream(stream2, abortController)
+const ndjsonStream = toHttpStream(stream2, abortController)
+```
+
+### Client Connection Adapters
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript
+import { DefaultChatTransport } from 'ai'
+import { useChat } from '@ai-sdk/react'
+
+useChat({
+  transport: new DefaultChatTransport({ api: '/api/chat' }),
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { useChat, fetchServerSentEvents, fetchHttpStream, stream } from '@tanstack/ai-react'
+import { customServerFn } from './server'
+
+// SSE (matches toServerSentEventsResponse)
+useChat({ connection: fetchServerSentEvents('/api/chat') })
+
+// HTTP stream (matches toHttpResponse / toHttpStream on the server)
+useChat({ connection: fetchHttpStream('/api/chat') })
+
+// Custom adapter: return an AsyncIterable<StreamChunk>, e.g. from a TanStack
+// Start server function or an RPC client
+useChat({
+  connection: stream((messages, data) => customServerFn({ messages, data })),
+})
+```
+
+## AbortController / Cancellation
+
+### Before (Vercel AI SDK)
+
+```typescript ignore
+const result = streamText({
+  model: openai('gpt-4o'),
+  messages,
+  abortSignal: controller.signal,
+})
+```
+
+### After (TanStack AI)
+
+TanStack AI takes an `AbortController` (not a bare signal) so helpers like `toServerSentEventsStream` can wire cancellation into the response stream for you.
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const abortController = new AbortController()
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  abortController,
+})
+
+// Cancel the stream
+abortController.abort()
+```
+
+## Callbacks and Events
+
+### Stream Callbacks
+
+#### Before (Vercel AI SDK v5+)
+
+```typescript
+import { DefaultChatTransport } from 'ai'
+import { useChat } from '@ai-sdk/react'
+
+const { messages } = useChat({
+  transport: new DefaultChatTransport({ api: '/api/chat' }),
+  onFinish: ({ message }) => console.log('Finished:', message),
+  onError: (error) => console.error('Error:', error),
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
+
+const { messages } = useChat({
+  connection: fetchServerSentEvents('/api/chat'),
+  onResponse: (response) => console.log('Response started'),
+  onChunk: (chunk) => console.log('Chunk received:', chunk),
+  onFinish: (message) => console.log('Finished:', message),
+  onError: (error) => console.error('Error:', error),
+})
+```
+
+TanStack AI also lets you hook into the **server-side** stream lifecycle by subscribing to the async iterable returned from `chat()`, which preserves the full typed `StreamChunk` union — useful for logging, analytics, or sending custom SSE events alongside the response.
+
+## Multimodal Content
+
+### Image Inputs
+
+#### Before (Vercel AI SDK)
+
+```typescript
+import { streamText } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { imageUrl } from './images'
+
+streamText({
+  model: openai('gpt-4o'),
+  messages: [
+    {
+      role: 'user',
+      content: [
+        { type: 'text', text: 'Describe this image' },
+        { type: 'image', image: imageUrl },
+      ],
+    },
+  ],
+})
+```
+
+#### After (TanStack AI)
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { imageUrl, imageData } from './images'
+
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [
+    {
+      role: 'user',
+      content: [
+        { type: 'text', content: 'Describe this image' },
+        { type: 'image', source: { type: 'url', value: imageUrl } },
+        // Or inline base64 data
+        { type: 'image', source: { type: 'data', value: imageData, mimeType: 'image/png' } },
+      ],
+    },
+  ],
+})
+```
+
+> The source discriminant is `'url'` or `'data'`. Both carry the payload on `value` (a URL or base64 string). `mimeType` is required for `'data'` and optional for `'url'`.
+
+## Dynamic Provider Switching
+
+### Before (Vercel AI SDK)
+
+```typescript
+import { streamText } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { anthropic } from '@ai-sdk/anthropic'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const providers = {
+  openai: openai('gpt-4o'),
+  anthropic: anthropic('claude-sonnet-4-5-20250514'),
+}
+
+const selectedProvider: keyof typeof providers = 'openai'
+
+streamText({
+  model: providers[selectedProvider],
+  messages,
+})
+```
+
+### After (TanStack AI)
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const adapters = {
+  openai: () => openaiText('gpt-4o'),
+  anthropic: () => anthropicText('claude-sonnet-4-5'),
+} as const
+
+const selectedProvider: keyof typeof adapters = 'openai'
+
+chat({
+  adapter: adapters[selectedProvider](),
+  messages,
+})
+```
+
+## Type Safety Enhancements
+
+TanStack AI provides enhanced type safety that Vercel AI SDK doesn't offer:
+
+### Typed Message Parts
+
+```typescript
+import { createChatClientOptions, clientTools, type InferChatMessages } from '@tanstack/ai-client'
+import { fetchServerSentEvents } from '@tanstack/ai-react'
+import { updateUI, saveData } from './tools'
+
+const tools = clientTools(updateUI, saveData)
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/chat'),
+  tools,
+})
+
+// Infer fully typed messages
+type ChatMessages = InferChatMessages<typeof chatOptions>
+
+// Now TypeScript knows:
+// - Exact tool names available
+// - Input types for each tool
+// - Output types for each tool
+```
+
+### Per-Model Type Safety
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const adapter = openaiText('gpt-4o')
+
+chat({
+  adapter,
+  messages,
+  modelOptions: {
+    // TypeScript autocompletes options specific to gpt-4o
+    service_tier: 'default',
+    store: true,
+  },
+})
+```
+
+## Non-streaming Generation (`generateText`)
+
+TanStack AI doesn't ship a separate `generateText` function — the same `chat()` covers both modes. Pass `stream: false` and the return type flips from `AsyncIterable<StreamChunk>` to `Promise<string>`:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const text = await chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'Summarize TanStack AI in one sentence.' }],
+  stream: false,
+})
+// text: string
+```
+
+If you already have a stream for another reason, `streamToText(stream)` collects it into a string:
+
+```typescript
+import { chat, streamToText } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const stream = chat({ adapter: openaiText('gpt-4o'), messages })
+const text = await streamToText(stream)
+```
+
+For structured (non-streaming) output — the `generateObject` equivalent — pass `outputSchema` instead; see [Structured Output](#structured-output).
+
+## Features Not Yet Covered
+
+A few AI SDK features don't have direct TanStack AI equivalents today:
+
+### Embeddings
+
+TanStack AI doesn't include embeddings. Use your provider's SDK directly, or the built-in embedding support most vector DBs already offer:
+
+```typescript
+import OpenAI from 'openai'
+
+const openaiClient = new OpenAI()
+const result = await openaiClient.embeddings.create({
+  model: 'text-embedding-3-small',
+  input: 'Hello, world!',
+})
+```
+
+### Partial object streaming (`streamObject().elementStream` / `partialObjectStream`)
+
+TanStack AI's `outputSchema` always returns a `Promise<T>` once the full response has validated. If you need to render partial JSON as it streams, stay on `streamText` + `onChunk` for that specific case (or parse from TanStack's raw stream with your own incremental JSON parser).
+
+### Built-in retries and timeouts
+
+Vercel's `maxRetries` / `timeout` options have no direct `chat()` equivalent. Use `AbortSignal.timeout(ms)` via `abortController`, and add retries in a custom middleware or in your fetch layer.
+
+## Complete Migration Example
+
+> On the Vercel side, the v5+ server handler runs incoming UI messages through `convertToModelMessages(messages)` before handing them to `streamText`. TanStack AI's `chat()` accepts the UI-message shape directly — its adapters do the conversion internally — so the equivalent line simply disappears on the After side.
+
+### Before (Vercel AI SDK v5+)
+
+```tsx
+// server/api/chat.ts
+import { streamText, tool, convertToModelMessages, DefaultChatTransport } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { useChat } from '@ai-sdk/react'
+import { z } from 'zod'
+import { fetchWeather } from './weather'
+import { useState } from 'react'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const result = streamText({
+    model: openai('gpt-4o'),
+    system: 'You are a helpful assistant.',
+    messages: await convertToModelMessages(messages),
+    temperature: 0.7,
+    tools: {
+      getWeather: tool({
+        description: 'Get weather',
+        inputSchema: z.object({ city: z.string() }),
+        execute: async ({ city }) => fetchWeather(city),
+      }),
+    },
+  })
+
+  return result.toUIMessageStreamResponse()
+}
+
+// components/Chat.tsx
+export function Chat() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, status } = useChat({
+    transport: new DefaultChatTransport({ api: '/api/chat' }),
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (input.trim() && status !== 'streaming') {
+      sendMessage({ text: input })
+      setInput('')
+    }
+  }
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          {m.parts.map((p, i) => (p.type === 'text' ? <span key={i}>{p.text}</span> : null))}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          disabled={status === 'streaming'}
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+### After (TanStack AI)
+
+```tsx ignore
+// server/api/chat.ts
+import { chat, toServerSentEventsResponse, toolDefinition } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+import { fetchWeather } from './weather'
+
+const getWeatherDef = toolDefinition({
+  name: 'getWeather',
+  description: 'Get weather',
+  inputSchema: z.object({ city: z.string() }),
+  outputSchema: z.object({ temp: z.number(), conditions: z.string() }),
+})
+
+const getWeather = getWeatherDef.server(async ({ city }) => fetchWeather(city))
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    systemPrompts: ['You are a helpful assistant.'],
+    messages,
+    temperature: 0.7,
+    tools: [getWeather],
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+
+// components/Chat.tsx
+import { useState } from 'react'
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
+
+export function Chat() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (input.trim() && !isLoading) {
+      sendMessage(input)
+      setInput('')
+    }
+  }
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part, idx) =>
+            part.type === 'text' ? <span key={idx}>{part.content}</span> : null
+          )}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          disabled={isLoading}
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+## Need Help?
+
+If you hit something that isn't covered here, the deep-dive docs pick up where this guide stops:
+
+1. [Quick Start](/ai/getting-started/quick-start) — minimal working setup
+2. [Tools](/ai/tools/tools), [Tool Architecture](/ai/tools/tool-architecture), and [Tool Approval](/ai/tools/tool-approval) — the isomorphic tool system
+3. [Agentic Cycle](/ai/chat/agentic-cycle) — agent loop internals and strategy composition
+4. [Structured Outputs](/ai/structured-outputs/overview) — `outputSchema`, provider implementations, schema libraries
+5. [Middleware](/ai/advanced/middleware) — full hook reference, context object, built-in middleware
+6. [Connection Adapters](/ai/chat/connection-adapters) — SSE, HTTP stream, custom transports
+7. [Per-Model Type Safety](/ai/advanced/per-model-type-safety) — how `modelOptions` is typed
+8. [API Reference](/ai/api/ai) — every exported symbol
diff --git a/mintlify/ai/migration/migration.md b/mintlify/ai/migration/migration.md
new file mode 100644
index 000000000..8c5741e24
--- /dev/null
+++ b/mintlify/ai/migration/migration.md
@@ -0,0 +1,505 @@
+---
+title: Migration Guide
+id: migration
+order: 1
+description: "Migrate existing TanStack AI code to the latest version — adapter function splits, flattened options, renamed modelOptions, and removed embeddings."
+keywords:
+  - tanstack ai
+  - migration
+  - upgrade
+  - breaking changes
+  - tree-shaking
+  - modelOptions
+  - toServerSentEventsStream
+---
+
+# Migration Guide
+
+This guide helps you migrate from the previous version of TanStack AI to the latest version. The major changes focus on improved tree-shaking, clearer API naming, and simplified configuration.
+
+## Overview of Changes
+
+The main breaking changes in this release are:
+
+1. **Adapter functions split** - Adapters are now split into activity-specific functions for optimal tree-shaking
+2. **Common options flattened** - Options are now flattened in the config instead of nested
+3. **`providerOptions` renamed** - Now called `modelOptions` for clarity
+4. **`toResponseStream` renamed** - Now called `toServerSentEventsStream` for clarity
+5. **Embeddings removed** - Embeddings support has been removed (most vector DB services have built-in support)
+
+## 1. Adapter Functions Split
+
+Adapters have been split into activity-specific functions to enable optimal tree-shaking. Instead of importing a monolithic adapter, you now import specific functions for each activity type.
+
+### Before
+
+```typescript ignore
+import { chat } from '@tanstack/ai'
+import { openai } from '@tanstack/ai-openai'
+
+const stream = chat({
+  adapter: openai(),
+  model: 'gpt-5.2',
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+```
+
+### After
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const stream = chat({
+  adapter: openaiText('gpt-5.2'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+```
+
+### Key Changes
+
+- **Model is passed to adapter factory** - The model name is now passed directly to the adapter function (e.g., `openaiText('gpt-5.2')`)
+- **No separate `model` parameter** - The model is stored on the adapter, so you don't need to pass it separately to `chat()`
+- **Activity-specific imports** - Import only what you need (e.g., `openaiText`, `openaiSummarize`, `openaiImage`)
+
+### All Adapter Functions
+
+Each provider package now exports activity-specific functions:
+
+#### OpenAI
+
+```typescript
+import {
+  openaiText,          // Chat/text generation
+  openaiSummarize,     // Summarization
+  openaiImage,         // Image generation
+  openaiSpeech,        // Text-to-speech
+  openaiTranscription, // Audio transcription
+  openaiVideo,         // Video generation
+} from '@tanstack/ai-openai'
+```
+
+#### Anthropic
+
+```typescript
+import {
+  anthropicText,       // Chat/text generation
+  anthropicSummarize,  // Summarization
+} from '@tanstack/ai-anthropic'
+```
+
+#### Gemini
+
+```typescript
+import {
+  geminiText,       // Chat/text generation
+  geminiSummarize,  // Summarization
+  geminiImage,      // Image generation
+  geminiSpeech,     // Text-to-speech (experimental)
+} from '@tanstack/ai-gemini'
+```
+
+#### Ollama
+
+```typescript
+import {
+  ollamaText,       // Chat/text generation
+  ollamaSummarize,  // Summarization
+} from '@tanstack/ai-ollama'
+```
+
+### Migration Example
+
+Here's a complete example of migrating adapter usage:
+
+#### Before
+
+```typescript ignore
+import { chat } from '@tanstack/ai'
+import { openai } from '@tanstack/ai-openai'
+import { anthropic } from '@tanstack/ai-anthropic'
+
+type Provider = 'openai' | 'anthropic'
+
+function getAdapter(provider: Provider) {
+  switch (provider) {
+    case 'openai':
+      return openai()
+    case 'anthropic':
+      return anthropic()
+  }
+}
+
+const stream = chat({
+  adapter: getAdapter(provider),
+  model: provider === 'openai' ? 'gpt-5.2' : 'claude-sonnet-4-5',
+  messages,
+})
+```
+
+#### After
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+
+type Provider = 'openai' | 'anthropic'
+
+const messages = [{ role: 'user' as const, content: 'Hello!' }]
+
+const adapters = {
+  openai: () => openaiText('gpt-5.2'),
+  anthropic: () => anthropicText('claude-sonnet-4-5'),
+}
+
+const provider: Provider = 'openai'
+
+const stream = chat({
+  adapter: adapters[provider](),
+  messages,
+})
+```
+
+## 2. Common Options Flattened
+
+Common options that were previously nested in an `options` object are now flattened directly in the config.
+
+### Before
+
+```typescript ignore
+const stream = chat({
+  adapter: openai(),
+  model: 'gpt-5.2',
+  messages,
+  options: {
+    temperature: 0.7,
+    maxTokens: 1000,
+    topP: 0.9,
+  },
+})
+```
+
+### After
+
+```typescript ignore
+const stream = chat({
+  adapter: openaiText('gpt-5.2'),
+  messages,
+  temperature: 0.7,
+  maxTokens: 1000,
+  topP: 0.9,
+})
+```
+
+### Available Options
+
+These options are now available at the top level:
+
+- `temperature` - Controls randomness (0.0 to 2.0)
+- `topP` - Nucleus sampling parameter
+- `maxTokens` - Maximum tokens to generate
+- `metadata` - Additional metadata to attach
+
+> **Heads up — sampling has since moved (breaking).** In a later release, the sampling props (`temperature`, `topP`, `maxTokens`) were removed from the root of `chat()` and now live in provider-native `modelOptions`. Passing them at the root no longer type-checks or takes effect. See [Moving Sampling Options into modelOptions](/ai/migration/sampling-options-to-model-options) for the codemod and provider-native key names. `metadata` stays at the root.
+
+## 3. `providerOptions` → `modelOptions`
+
+The `providerOptions` parameter has been renamed to `modelOptions` for clarity. This parameter contains model-specific options that vary by provider and model.
+
+### Before
+
+```typescript ignore
+const stream = chat({
+  adapter: openai(),
+  model: 'gpt-5.2',
+  messages,
+  providerOptions: {
+    // OpenAI-specific options
+    responseFormat: { type: 'json_object' },
+    logitBias: { '123': 1.0 },
+  },
+})
+```
+
+### After
+
+```typescript ignore
+const stream = chat({
+  adapter: openaiText('gpt-5.2'),
+  messages,
+  modelOptions: {
+    // OpenAI-specific options
+    responseFormat: { type: 'json_object' },
+    logitBias: { '123': 1.0 },
+  },
+})
+```
+
+### Type Safety
+
+`modelOptions` is fully typed based on the adapter and model you're using:
+
+```typescript ignore
+import { openaiText } from '@tanstack/ai-openai'
+
+const adapter = openaiText('gpt-5.2')
+
+// TypeScript knows the exact modelOptions type for gpt-5.2
+const stream = chat({
+  adapter,
+  messages,
+  modelOptions: {
+    // Autocomplete and type checking for gpt-5.2 options
+    responseFormat: { type: 'json_object' },
+  },
+})
+```
+
+## 4. `toResponseStream` → `toServerSentEventsStream`
+
+The `toResponseStream` function has been renamed to `toServerSentEventsStream` to better reflect its purpose. Additionally, the API has changed slightly.
+
+### Before
+
+```typescript ignore
+import { chat, toResponseStream } from '@tanstack/ai'
+import { openai } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const abortController = new AbortController()
+
+  const stream = chat({
+    adapter: openai(),
+    model: 'gpt-5.2',
+    messages,
+    abortController,
+  })
+
+  return toResponseStream(stream, { abortController })
+}
+```
+
+### After
+
+```typescript
+import { chat, toServerSentEventsStream } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const abortController = new AbortController()
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+    abortController,
+  })
+
+  const readableStream = toServerSentEventsStream(stream, abortController)
+  return new Response(readableStream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}
+```
+
+### Key Changes
+
+- **Function renamed** - `toResponseStream` → `toServerSentEventsStream`
+- **Returns ReadableStream** - Now returns a `ReadableStream` instead of a `Response`
+- **Manual Response creation** - You create the `Response` object yourself with appropriate headers
+- **AbortController parameter** - Passed as a separate parameter instead of in options
+
+### Alternative: HTTP Stream Format
+
+If you need HTTP stream format (newline-delimited JSON) instead of SSE, use `toHttpStream`:
+
+```typescript ignore
+import { toHttpStream } from '@tanstack/ai'
+
+const readableStream = toHttpStream(stream, abortController)
+return new Response(readableStream, {
+  headers: {
+    'Content-Type': 'application/x-ndjson',
+  },
+})
+```
+
+## 5. Embeddings Removed
+
+Embeddings support has been removed from TanStack AI. Most vector database services (like Pinecone, Weaviate, Qdrant, etc.) have built-in support for embeddings, and most applications pick an embedding model and stick with it.
+
+### Before
+
+```typescript ignore
+import { embedding } from '@tanstack/ai'
+import { openaiEmbed } from '@tanstack/ai-openai'
+
+const result = await embedding({
+  adapter: openaiEmbed(),
+  model: 'text-embedding-3-small',
+  input: 'Hello, world!',
+})
+```
+
+### After
+
+Use your vector database service's built-in embedding support, or call the provider's API directly:
+
+```typescript
+// Example with OpenAI SDK directly
+import OpenAI from 'openai'
+
+const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
+
+const result = await openai.embeddings.create({
+  model: 'text-embedding-3-small',
+  input: 'Hello, world!',
+})
+```
+
+### Why This Change?
+
+- **Vector DB services handle it** - Most vector databases have native embedding support
+- **Simpler API** - Reduces API surface area and complexity
+- **Direct provider access** - You can use the provider SDK directly for embeddings
+- **Focused scope** - TanStack AI focuses on chat, tools, and agentic workflows
+
+## 6. Provider Tools Moved to `/tools` Subpath
+
+Provider-specific tools (web search, code execution, computer use, etc.) are now
+exported from a dedicated `/tools` subpath on every adapter package. This keeps
+tool imports tree-shakeable and avoids name collisions between providers.
+
+The only breaking change is in `@tanstack/ai-openrouter`:
+`createWebSearchTool` has been removed from the package root, renamed to
+`webSearchTool`, and moved to `@tanstack/ai-openrouter/tools`. Every other
+provider tool (Anthropic, OpenAI, Gemini) is newly exported — no existing
+import breaks.
+
+### Before
+
+```typescript ignore
+import { createWebSearchTool } from '@tanstack/ai-openrouter'
+
+const tools = [
+  createWebSearchTool({ engine: 'native', maxResults: 5 }),
+]
+```
+
+### After
+
+```typescript
+import { webSearchTool } from '@tanstack/ai-openrouter/tools'
+
+const tools = [
+  webSearchTool({ engine: 'native', maxResults: 5 }),
+]
+```
+
+### Key Changes
+
+- **Import path is now `/tools`** — matches the existing `/adapters` subpath
+  pattern used elsewhere in each provider package.
+- **Factory renamed** — `createWebSearchTool` → `webSearchTool`. The `create*`
+  prefix has been dropped to align with every other provider
+  (`webSearchTool` in `@tanstack/ai-anthropic/tools`,
+  `@tanstack/ai-openai/tools`, etc.).
+- **Runtime behavior is unchanged** — the factory accepts the same config
+  object and returns a tool that works identically in `chat({ tools: [...] })`.
+- **Type-level gating is new** — if you pass a provider tool to a model that
+  doesn't support it (per the model's `supports.tools` array), you now get a
+  type error on the `tools` array. User-defined `toolDefinition()` tools are
+  unaffected.
+
+For the full list of available provider tools and which models support each
+one, see [Provider Tools](/ai/tools/provider-tools).
+
+## Complete Migration Example
+
+Here's a complete example showing all the changes together:
+
+### Before
+
+```typescript ignore
+import { chat, toResponseStream } from '@tanstack/ai'
+import { openai } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const abortController = new AbortController()
+
+  const stream = chat({
+    adapter: openai(),
+    model: 'gpt-5.2',
+    messages,
+    options: {
+      temperature: 0.7,
+      maxTokens: 1000,
+    },
+    providerOptions: {
+      responseFormat: { type: 'json_object' },
+    },
+    abortController,
+  })
+
+  return toResponseStream(stream, { abortController })
+}
+```
+
+### After
+
+```typescript ignore
+import { chat, toServerSentEventsStream } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const abortController = new AbortController()
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+    // Sampling now lives in provider-native `modelOptions` (OpenAI Responses
+    // keys: `temperature`, `max_output_tokens`). `metadata` stays at the root.
+    modelOptions: {
+      temperature: 0.7,
+      max_output_tokens: 1000,
+      responseFormat: { type: 'json_object' },
+    },
+    abortController,
+  })
+
+  const readableStream = toServerSentEventsStream(stream, abortController)
+  return new Response(readableStream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}
+```
+
+## Benefits of These Changes
+
+1. **Better Tree-Shaking** - Import only what you need, resulting in smaller bundle sizes
+2. **Clearer API** - Function names clearly indicate their purpose
+3. **Type Safety** - Model-specific options are fully typed
+4. **Simpler Configuration** - Flattened options are easier to work with
+5. **Focused Scope** - Removed features that are better handled elsewhere
+
+## Need Help?
+
+If you encounter issues during migration:
+
+1. Check the [Tree-Shaking Guide](/ai/advanced/tree-shaking) for details on the new adapter structure
+2. Review the [API Reference](/ai/api/ai) for complete function signatures
+3. Look at the [examples](/ai/getting-started/quick-start) for working code samples
+
+
diff --git a/mintlify/ai/migration/sampling-options-to-model-options.md b/mintlify/ai/migration/sampling-options-to-model-options.md
new file mode 100644
index 000000000..fba5350b6
--- /dev/null
+++ b/mintlify/ai/migration/sampling-options-to-model-options.md
@@ -0,0 +1,245 @@
+---
+title: Moving Sampling Options into modelOptions
+---
+
+# Moving Sampling Options into `modelOptions`
+
+> **TL;DR:** This is a **breaking change**. The root-level convenience sampling props on `chat()` / `ai()` / `generate()` — `temperature`, `topP`, and `maxTokens` — have been **removed** and now live inside provider-native `modelOptions` instead. Passing them at the root no longer type-checks and has no effect at runtime. Move each one into `modelOptions` under its provider's canonical name (e.g. OpenAI's `max_output_tokens`, Anthropic's `max_tokens`, Gemini's `maxOutputTokens`, Ollama's nested `options.num_predict`). A provider-aware codemod does the rewrite for you. `metadata` is unaffected and stays at the root.
+
+## What changed
+
+Previously, `chat()` accepted three generic sampling props directly at the root of its options:
+
+```typescript ignore
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  temperature: 0.3,
+  topP: 0.9,
+  maxTokens: 100,
+})
+```
+
+These were a convenience layer that the runtime mapped onto whatever the underlying provider expected. That generic mapping is now gone. Sampling parameters live where every other model-specific knob already lives — inside the provider-native `modelOptions` object — under each provider's own canonical key name.
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  modelOptions: {
+    temperature: 0.3,
+    top_p: 0.9,
+    max_output_tokens: 100,
+  },
+})
+```
+
+## Why it changed
+
+- **Provider-native, single source of truth.** Every provider names these parameters differently — OpenAI's Responses API wants `max_output_tokens`, Anthropic wants `max_tokens`, Gemini wants `maxOutputTokens`, Ollama nests them under `options`. A single generic `maxTokens` prop had to guess the target per provider. Putting them in `modelOptions` means there is exactly one place sampling lives, and it matches the provider's own API surface.
+- **Typed.** `modelOptions` is already typed per adapter+model, so moving sampling there gives you autocomplete and compile-time checking for the exact keys a given model accepts — instead of three loosely-typed root props.
+- **No generic mapping.** Reasoning models in particular do not treat these parameters uniformly (some ignore `temperature`, some reject `max_tokens` below the thinking budget, etc.). A generic root-level mapping papered over those differences; provider-native `modelOptions` lets each adapter handle them honestly.
+
+## Before / after by provider
+
+The root prop names are the same everywhere (`temperature`, `topP`, `maxTokens`). The `modelOptions` target key differs per provider — use the exact key your provider expects.
+
+### OpenAI
+
+```typescript ignore
+// Before
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  temperature: 0.3,
+  topP: 0.9,
+  maxTokens: 100,
+})
+```
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// After
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  modelOptions: {
+    temperature: 0.3,
+    top_p: 0.9,
+    max_output_tokens: 100,
+  },
+})
+```
+
+### Anthropic
+
+```typescript ignore
+// Before
+chat({
+  adapter: anthropicText('claude-sonnet-4-5'),
+  messages,
+  temperature: 0.3,
+  topP: 0.9,
+  maxTokens: 1024,
+})
+```
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// After
+chat({
+  adapter: anthropicText('claude-sonnet-4-5'),
+  messages,
+  modelOptions: {
+    temperature: 0.3,
+    top_p: 0.9,
+    max_tokens: 1024,
+  },
+})
+```
+
+### Gemini
+
+```typescript ignore
+// Before
+chat({
+  adapter: geminiText('gemini-3.1-pro-preview'),
+  messages,
+  temperature: 0.3,
+  topP: 0.9,
+  maxTokens: 2048,
+})
+```
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { geminiText } from '@tanstack/ai-gemini'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// After
+chat({
+  adapter: geminiText('gemini-3.1-pro-preview'),
+  messages,
+  modelOptions: {
+    temperature: 0.3,
+    topP: 0.9,
+    maxOutputTokens: 2048,
+  },
+})
+```
+
+### Ollama (nested under `options`)
+
+Ollama is the one provider where sampling parameters are **nested** inside an `options` object within `modelOptions`, and the token limit is named `num_predict`:
+
+```typescript ignore
+// Before
+chat({
+  adapter: ollamaText('llama3'),
+  messages,
+  temperature: 0.3,
+  topP: 0.9,
+  maxTokens: 1000,
+})
+```
+
+```typescript ignore
+import { chat } from '@tanstack/ai'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+// After
+chat({
+  adapter: ollamaText('llama3'),
+  messages,
+  modelOptions: {
+    options: {
+      temperature: 0.3,
+      top_p: 0.9,
+      num_predict: 1000,
+    },
+  },
+})
+```
+
+## Provider key reference
+
+| Root prop     | OpenAI              | Anthropic    | Gemini            | Grok         | Groq                    | OpenRouter            | Ollama (nested under `options`) |
+| ------------- | ------------------- | ------------ | ----------------- | ------------ | ----------------------- | --------------------- | ------------------------------- |
+| `temperature` | `temperature`       | `temperature`| `temperature`     | `temperature`| `temperature`           | `temperature`         | `options.temperature`           |
+| `topP`        | `top_p`             | `top_p`      | `topP`            | `top_p`      | `top_p`                 | `topP`                | `options.top_p`                 |
+| `maxTokens`   | `max_output_tokens` | `max_tokens` | `maxOutputTokens` | `max_tokens` | `max_completion_tokens` | `maxCompletionTokens` | `options.num_predict`           |
+
+## Automated codemod
+
+A jscodeshift codemod moves the root sampling props into `modelOptions` for you, renaming each one to the correct provider-native key. It resolves the provider from the `adapter:` factory call (e.g. `openaiText('gpt-4o')` → OpenAI), so the rewrite is provider-aware. Run it from the repo:
+
+```bash
+pnpm codemod:move-sampling-to-model-options "src/**/*.{ts,tsx}"
+```
+
+Or run the published transform directly — no clone needed:
+
+```bash
+npx jscodeshift \
+  --parser=tsx \
+  -t https://raw.githubusercontent.com/TanStack/ai/main/codemods/move-sampling-to-model-options/transform.ts \
+  "src/**/*.{ts,tsx}"
+```
+
+Add `--dry --print` to preview the rewrite without modifying files.
+
+**What it does:**
+
+- Targets `chat()`, `ai()`, `generate()`, and `createChatOptions()` calls imported from `@tanstack/ai`.
+- Resolves the provider from the `adapter:` factory call and renames each present root prop to that provider's canonical key.
+- For Ollama, nests the renamed keys inside `modelOptions.options`.
+- Merges into an existing `modelOptions` object literal when present; preserves the original value expressions and expands shorthand props (`{ temperature }` → `temperature: temperature`).
+
+**Report + skip (never partial):** the codemod never partially transforms a call. It leaves the call untouched and emits an `api.report(...)` message when it can't safely proceed:
+
+- **Unresolvable adapter** — no `adapter` prop, the adapter isn't a recognized provider-factory call (e.g. `makeAdapter()`), or it's dynamic/spread.
+- **`modelOptions` is not a plain object literal** — e.g. a spread or an identifier reference.
+- **Key conflict** — a target renamed key already exists in `modelOptions` (or in `modelOptions.options` for Ollama). Resolve these by hand.
+
+See [`codemods/move-sampling-to-model-options/README.md`](https://github.com/TanStack/ai/blob/main/codemods/move-sampling-to-model-options/index) for the full transform details and limitations.
+
+## What stays at the root
+
+`metadata` is **not** a sampling parameter and is unaffected — it stays at the root of `chat()`:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+chat({
+  adapter: openaiText('gpt-4o'),
+  messages,
+  metadata: { requestId: 'abc-123' }, // ← still at the root
+  modelOptions: {
+    temperature: 0.3,
+    max_output_tokens: 100,
+  },
+})
+```
+
+## Need Help?
+
+- [Per-Model Type Safety](/ai/advanced/per-model-type-safety) — how the adapter+model pair drives `modelOptions` inference.
+- [API Reference](/ai/api/ai) — complete `chat()` signature.
+- See your provider's adapter page ([OpenAI](/ai/adapters/openai), [Anthropic](/ai/adapters/anthropic), [Gemini](/ai/adapters/gemini), [Ollama](/ai/adapters/ollama)) for the full list of `modelOptions` it accepts.
diff --git a/mintlify/ai/protocol/custom-events.md b/mintlify/ai/protocol/custom-events.md
new file mode 100644
index 000000000..cf4ac0887
--- /dev/null
+++ b/mintlify/ai/protocol/custom-events.md
@@ -0,0 +1,174 @@
+---
+title: Custom Events Reference
+id: custom-events
+order: 1
+description: "Every CUSTOM event TanStack AI itself emits, unified as KnownCustomEvent, and the ChatStream type that lets a plain `if (chunk.name === '…')` narrow chunk.value — no helper, no cast."
+keywords:
+  - tanstack ai
+  - custom events
+  - KnownCustomEvent
+  - ChatStream
+  - ag-ui protocol
+  - CUSTOM event
+  - stream narrowing
+---
+
+You're reading a `chat()` stream and you've hit a `CUSTOM` event — maybe
+[`sandbox.file.diff`](/ai/sandbox/events), maybe a Code Mode progress event,
+maybe `structured-output.complete`. Each feature page documents its own
+events in context. This page is the map: every `CUSTOM` event TanStack AI
+itself emits, in one table, plus the type mechanism that lets you read any of
+them with a plain `if` — no helper function, no cast.
+
+## The type: `ChatStream`
+
+`chat()` returns `ChatStream` by default (no `outputSchema`, `stream` not
+explicitly `false`):
+
+```ts
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import type { ChatStream } from "@tanstack/ai";
+
+const stream: ChatStream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+});
+```
+
+`ChatStream` is defined as:
+
+```ts ignore
+type ChatStream = AsyncIterable<Exclude<StreamChunk, CustomEvent> | KnownCustomEvent>
+```
+
+`StreamChunk` (the raw AG-UI event union) has exactly one `CUSTOM`-shaped
+member: the generic `CustomEvent` interface, with `name: string` and
+`value: any`. Left in the union unchanged, that single `any` "poisons" every
+narrow — even `if (chunk.type === 'CUSTOM' && chunk.name === 'sandbox.file')`
+would still leave `chunk.value` typed `any`, because TypeScript can't
+distinguish the generic member from a specific one once they're merged.
+`ChatStream` fixes this in two steps: `Exclude<StreamChunk, CustomEvent>`
+removes that generic member, and `| KnownCustomEvent` adds back a
+discriminated union of every event TanStack AI actually emits — each with a
+literal `name` and a concrete `value`. The result is a stream where `CUSTOM`
+events narrow like anything else.
+
+## Reading events: the plain narrowing pattern
+
+Check `chunk.type === 'CUSTOM'`, then compare `chunk.name` to a literal
+string. That's the entire client-side API — there is no `isCustomEvent` or
+`isSandboxEvent` guard to import:
+
+```ts ignore
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Hello" }],
+});
+
+for await (const chunk of stream) {
+  if (chunk.type === "CUSTOM" && chunk.name === "sandbox.file.diff") {
+    console.log(chunk.value.path, chunk.value.diff); // typed, no helper, no cast
+  } else if (chunk.type === "CUSTOM" && chunk.name === "structured-output.complete") {
+    console.log(chunk.value.object); // typed, no helper, no cast
+  }
+}
+```
+
+## Full taxonomy
+
+Every interface below extends the base `CustomEvent` (`type: 'CUSTOM'`, plus
+an optional `model?`) with a literal `name` and a concrete `value`. All are
+unioned as `KnownCustomEvent`, exported from `@tanstack/ai` alongside each
+individual interface.
+
+| Interface | `name` | `value` | Emitted when |
+| --- | --- | --- | --- |
+| `SandboxFileCustomEvent` | `sandbox.file` | `{ type: 'create' \| 'change' \| 'delete'; path: string; timestamp: number }` | per file create/change/delete in an active [sandbox](/ai/sandbox/events) |
+| `SandboxFileDiffEvent` | `sandbox.file.diff` | `{ path: string; diff: string }` | per file change, opt-in via `fileEvents: { diff: true }` |
+| `FileChangedEvent` | `file.changed` | `{ path: string; diff: string }` | a harness adapter (Grok Build, Claude Code, …), once after the run completes |
+| `SessionIdEvent` | `` `${string}.session-id` `` | `{ sessionId: string }` | a harness adapter, once when its in-sandbox session is created or resumed |
+| `CodeModeExecutionStartedEvent` | `code_mode:execution_started` | `{ timestamp: number; codeLength: number }` | [Code Mode](/ai/code-mode/code-mode), when sandbox execution begins |
+| `CodeModeConsoleEvent` | `code_mode:console` | `{ level: 'log' \| 'warn' \| 'error' \| 'info'; message: string; timestamp: number }` | Code Mode, per `console.*` call inside the sandbox |
+| `CodeModeExternalCallEvent` | `code_mode:external_call` | `{ function: string; args: unknown; timestamp: number }` | Code Mode, before a bound `external_*` function runs |
+| `CodeModeExternalResultEvent` | `code_mode:external_result` | `{ function: string; result: unknown; duration: number }` | Code Mode, after a successful `external_*` call |
+| `CodeModeExternalErrorEvent` | `code_mode:external_error` | `{ function: string; error: string; duration: number }` | Code Mode, when an `external_*` call throws |
+| `CodeModeSkillCallEvent` | `code_mode:skill_call` | `{ skill: string; input: unknown; timestamp: number }` | [Code Mode with Skills](/ai/code-mode/code-mode-with-skills), before a skill runs |
+| `CodeModeSkillResultEvent` | `code_mode:skill_result` | `{ skill: string; result: unknown; duration: number; timestamp: number }` | Code Mode with Skills, after a successful skill run |
+| `CodeModeSkillErrorEvent` | `code_mode:skill_error` | `{ skill: string; error: string; duration: number; timestamp: number }` | Code Mode with Skills, when a skill throws |
+| `SkillRegisteredEvent` | `skill:registered` | `{ id: string; name: string; description: string; timestamp: number }` | when a skill is registered into the tool registry |
+| `StructuredOutputStartEvent` | `structured-output.start` | `{ messageId: string }` | [`chat({ outputSchema, stream: true })`](/ai/structured-outputs/streaming), once per structured message |
+| `StructuredOutputCompleteEvent<T>` | `structured-output.complete` | `{ object: T; raw: string; reasoning?: string }` | structured-output streaming, once with the validated object |
+| `ApprovalRequestedEvent` | `approval-requested` | `{ toolCallId: string; toolName: string; input: unknown; approval: { id: string; needsApproval: true } }` | a server tool needs approval — the run pauses; see [Tool Approval Flow](/ai/tools/tool-approval) |
+| `ToolInputAvailableEvent` | `tool-input-available` | `{ toolCallId: string; toolName: string; input: unknown }` | a client tool is invoked — the run pauses; see [Client Tools](/ai/tools/client-tools) |
+| `UIResourceEvent` | `ui-resource` | `{ resource; serverId?: string; toolCallId: string; toolName: string; meta?: Record<string, unknown> }` | an MCP tool returns a `ui://` resource ([MCP Apps](/ai/mcp/apps)) |
+
+## Your own custom events aren't in this union
+
+Tools can emit arbitrary, application-defined events through the
+`emitCustomEvent` context API:
+
+```ts
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const importRows = toolDefinition({
+  name: "importRows",
+  description: "Import rows into the dataset, reporting progress as it runs",
+  inputSchema: z.object({ rows: z.array(z.string()) }),
+}).server(async ({ rows }, context) => {
+  for (let i = 0; i < rows.length; i++) {
+    context?.emitCustomEvent("my-app:progress", {
+      done: i + 1,
+      total: rows.length,
+    });
+  }
+  return { imported: rows.length };
+});
+```
+
+These flow over the wire exactly like the built-in events — same `CUSTOM`
+chunk shape, same runtime behavior. But `'my-app:progress'` isn't one of the
+literal names in `KnownCustomEvent`, so it's intentionally absent from
+`ChatStream`'s type. This is the same tradeoff `StructuredOutputStream`
+already made: including a generic fallback member would reintroduce the
+`value: any` poison for every other event on the stream.
+
+To read your own event's `value`, don't rely on `ChatStream`'s narrowed
+union for that branch — annotate the stream as the wider `StreamChunk` type
+instead, where the generic `CUSTOM` member's `value: any` needs no cast:
+
+```ts ignore
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import type { StreamChunk } from "@tanstack/ai";
+import { importRows } from "./tools";
+
+const stream: AsyncIterable<StreamChunk> = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Import these rows" }],
+  tools: [importRows],
+});
+
+for await (const chunk of stream) {
+  if (chunk.type === "CUSTOM" && chunk.name === "my-app:progress") {
+    console.log(chunk.value.done, chunk.value.total); // value: any — your event, your shape
+  }
+}
+```
+
+The event still arrives at runtime either way — this only changes what
+TypeScript will let you write. `ChatStream` is the right default for reading
+TanStack AI's own events with full type safety; fall back to `StreamChunk`
+for the branches that read your own.
+
+## Related
+
+- [Sandbox Events](/ai/sandbox/events) — the sandbox- and harness-specific rows of this table, in context, plus `sandbox.file.diff`'s opt-in.
+- [Observability](/ai/sandbox/observability) — the server-side hook accessors (`before()`/`after()`/`diff()`) that back `sandbox.file.diff`.
+- [Showing Code Mode in the UI](/ai/code-mode/client-integration) — rendering the `code_mode:*` events live.
+- [Streaming UIs](/ai/structured-outputs/streaming) — reading `structured-output.complete` end to end.
+- [Streaming](/ai/chat/streaming) — the standard AG-UI `StreamChunk` lifecycle this union extends.
diff --git a/mintlify/ai/reference/classes/BaseAdapter.md b/mintlify/ai/reference/classes/BaseAdapter.md
new file mode 100644
index 000000000..41f2a6f9c
--- /dev/null
+++ b/mintlify/ai/reference/classes/BaseAdapter.md
@@ -0,0 +1,12 @@
+---
+title: "BaseAdapter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/classes/BaseAdapter)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/classes/BatchStrategy.md b/mintlify/ai/reference/classes/BatchStrategy.md
new file mode 100644
index 000000000..986f92c1f
--- /dev/null
+++ b/mintlify/ai/reference/classes/BatchStrategy.md
@@ -0,0 +1,87 @@
+---
+id: BatchStrategy
+title: BatchStrategy
+---
+
+# Class: BatchStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L34)
+
+Batch Strategy - emit every N chunks
+Useful for reducing UI update frequency
+
+## Implements
+
+- [`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)
+
+## Constructors
+
+### Constructor
+
+```ts
+new BatchStrategy(batchSize): BatchStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:37](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L37)
+
+#### Parameters
+
+##### batchSize
+
+`number` = `5`
+
+#### Returns
+
+`BatchStrategy`
+
+## Methods
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:48](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L48)
+
+Optional: Reset strategy state (called when streaming starts)
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`reset`](/ai/reference/interfaces/ChunkStrategy#reset)
+
+***
+
+### shouldEmit()
+
+```ts
+shouldEmit(_chunk, _accumulated): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:39](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L39)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### \_chunk
+
+`string`
+
+##### \_accumulated
+
+`string`
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`shouldEmit`](/ai/reference/interfaces/ChunkStrategy#shouldemit)
diff --git a/mintlify/ai/reference/classes/CompositeStrategy.md b/mintlify/ai/reference/classes/CompositeStrategy.md
new file mode 100644
index 000000000..681c4b43d
--- /dev/null
+++ b/mintlify/ai/reference/classes/CompositeStrategy.md
@@ -0,0 +1,91 @@
+---
+id: CompositeStrategy
+title: CompositeStrategy
+---
+
+# Class: CompositeStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:68](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L68)
+
+Composite Strategy - combine multiple strategies (OR logic)
+Emits if ANY strategy says to emit
+
+## Implements
+
+- [`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CompositeStrategy(strategies): CompositeStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:69](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L69)
+
+#### Parameters
+
+##### strategies
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)[]
+
+#### Returns
+
+`CompositeStrategy`
+
+## Methods
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:75](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L75)
+
+Optional: Reset strategy state (called when streaming starts)
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`reset`](/ai/reference/interfaces/ChunkStrategy#reset)
+
+***
+
+### shouldEmit()
+
+```ts
+shouldEmit(chunk, accumulated): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:71](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L71)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### chunk
+
+`string`
+
+The new chunk of text (delta)
+
+##### accumulated
+
+`string`
+
+All text accumulated so far
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`shouldEmit`](/ai/reference/interfaces/ChunkStrategy#shouldemit)
diff --git a/mintlify/ai/reference/classes/ConsoleLogger.md b/mintlify/ai/reference/classes/ConsoleLogger.md
new file mode 100644
index 000000000..9e8f1f70d
--- /dev/null
+++ b/mintlify/ai/reference/classes/ConsoleLogger.md
@@ -0,0 +1,160 @@
+---
+id: ConsoleLogger
+title: ConsoleLogger
+---
+
+# Class: ConsoleLogger
+
+Defined in: [packages/ai/src/logger/console-logger.ts:101](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/console-logger.ts#L101)
+
+Default `Logger` implementation that routes each level to the matching
+`console` method:
+
+- `debug` → `console.debug`
+- `info` → `console.info`
+- `warn` → `console.warn`
+- `error` → `console.error`
+
+When a `meta` object is supplied it is rendered with the strategy that
+actually surfaces it on the current runtime (see MetaStrategy):
+depth-unlimited `console.dir` on Node, circular-safe JSON on Cloudflare
+Workers, and an extra console argument everywhere else.
+
+This is the logger used when `debug` is enabled on any activity and no
+custom `logger` is supplied via `debug: { logger }`.
+
+## Implements
+
+- [`Logger`](/ai/reference/interfaces/Logger)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ConsoleLogger(): ConsoleLogger;
+```
+
+#### Returns
+
+`ConsoleLogger`
+
+## Methods
+
+### debug()
+
+```ts
+debug(message, meta?): void;
+```
+
+Defined in: [packages/ai/src/logger/console-logger.ts:103](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/console-logger.ts#L103)
+
+Log a debug-level message; forwards to `console.debug`.
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`Logger`](/ai/reference/interfaces/Logger).[`debug`](/ai/reference/interfaces/Logger#debug)
+
+***
+
+### error()
+
+```ts
+error(message, meta?): void;
+```
+
+Defined in: [packages/ai/src/logger/console-logger.ts:118](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/console-logger.ts#L118)
+
+Log an error-level message; forwards to `console.error`.
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`Logger`](/ai/reference/interfaces/Logger).[`error`](/ai/reference/interfaces/Logger#error)
+
+***
+
+### info()
+
+```ts
+info(message, meta?): void;
+```
+
+Defined in: [packages/ai/src/logger/console-logger.ts:108](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/console-logger.ts#L108)
+
+Log an info-level message; forwards to `console.info`.
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`Logger`](/ai/reference/interfaces/Logger).[`info`](/ai/reference/interfaces/Logger#info)
+
+***
+
+### warn()
+
+```ts
+warn(message, meta?): void;
+```
+
+Defined in: [packages/ai/src/logger/console-logger.ts:113](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/console-logger.ts#L113)
+
+Log a warning-level message; forwards to `console.warn`.
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`Logger`](/ai/reference/interfaces/Logger).[`warn`](/ai/reference/interfaces/Logger#warn)
diff --git a/mintlify/ai/reference/classes/ImmediateStrategy.md b/mintlify/ai/reference/classes/ImmediateStrategy.md
new file mode 100644
index 000000000..b13f2cd35
--- /dev/null
+++ b/mintlify/ai/reference/classes/ImmediateStrategy.md
@@ -0,0 +1,58 @@
+---
+id: ImmediateStrategy
+title: ImmediateStrategy
+---
+
+# Class: ImmediateStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L12)
+
+Immediate Strategy - emit on every chunk (default behavior)
+
+## Implements
+
+- [`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ImmediateStrategy(): ImmediateStrategy;
+```
+
+#### Returns
+
+`ImmediateStrategy`
+
+## Methods
+
+### shouldEmit()
+
+```ts
+shouldEmit(_chunk, _accumulated): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:13](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L13)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### \_chunk
+
+`string`
+
+##### \_accumulated
+
+`string`
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`shouldEmit`](/ai/reference/interfaces/ChunkStrategy#shouldemit)
diff --git a/mintlify/ai/reference/classes/MCPDuplicateToolNameError.md b/mintlify/ai/reference/classes/MCPDuplicateToolNameError.md
new file mode 100644
index 000000000..079717efc
--- /dev/null
+++ b/mintlify/ai/reference/classes/MCPDuplicateToolNameError.md
@@ -0,0 +1,48 @@
+---
+id: MCPDuplicateToolNameError
+title: MCPDuplicateToolNameError
+---
+
+# Class: MCPDuplicateToolNameError
+
+Defined in: [packages/ai/src/activities/chat/mcp/manager.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/manager.ts#L31)
+
+## Extends
+
+- `Error`
+
+## Constructors
+
+### Constructor
+
+```ts
+new MCPDuplicateToolNameError(toolName): MCPDuplicateToolNameError;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/manager.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/manager.ts#L32)
+
+#### Parameters
+
+##### toolName
+
+`string`
+
+#### Returns
+
+`MCPDuplicateToolNameError`
+
+#### Overrides
+
+```ts
+Error.constructor
+```
+
+## Properties
+
+### toolName
+
+```ts
+readonly toolName: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/manager.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/manager.ts#L32)
diff --git a/mintlify/ai/reference/classes/PartialJSONParser.md b/mintlify/ai/reference/classes/PartialJSONParser.md
new file mode 100644
index 000000000..66059ccda
--- /dev/null
+++ b/mintlify/ai/reference/classes/PartialJSONParser.md
@@ -0,0 +1,57 @@
+---
+id: PartialJSONParser
+title: PartialJSONParser
+---
+
+# Class: PartialJSONParser
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:25](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L25)
+
+Partial JSON Parser implementation using the partial-json library
+This parser can handle incomplete JSON strings during streaming
+
+## Implements
+
+- [`JSONParser`](/ai/reference/interfaces/JSONParser)
+
+## Constructors
+
+### Constructor
+
+```ts
+new PartialJSONParser(): PartialJSONParser;
+```
+
+#### Returns
+
+`PartialJSONParser`
+
+## Methods
+
+### parse()
+
+```ts
+parse(jsonString): any;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L31)
+
+Parse a potentially incomplete JSON string
+
+#### Parameters
+
+##### jsonString
+
+`string`
+
+The JSON string to parse (may be incomplete)
+
+#### Returns
+
+`any`
+
+The parsed object, or undefined if parsing fails
+
+#### Implementation of
+
+[`JSONParser`](/ai/reference/interfaces/JSONParser).[`parse`](/ai/reference/interfaces/JSONParser#parse)
diff --git a/mintlify/ai/reference/classes/PunctuationStrategy.md b/mintlify/ai/reference/classes/PunctuationStrategy.md
new file mode 100644
index 000000000..b1bcec663
--- /dev/null
+++ b/mintlify/ai/reference/classes/PunctuationStrategy.md
@@ -0,0 +1,61 @@
+---
+id: PunctuationStrategy
+title: PunctuationStrategy
+---
+
+# Class: PunctuationStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:22](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L22)
+
+Punctuation Strategy - emit when chunk contains punctuation
+Useful for natural text flow in UI
+
+## Implements
+
+- [`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)
+
+## Constructors
+
+### Constructor
+
+```ts
+new PunctuationStrategy(): PunctuationStrategy;
+```
+
+#### Returns
+
+`PunctuationStrategy`
+
+## Methods
+
+### shouldEmit()
+
+```ts
+shouldEmit(chunk, _accumulated): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:25](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L25)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### chunk
+
+`string`
+
+The new chunk of text (delta)
+
+##### \_accumulated
+
+`string`
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`shouldEmit`](/ai/reference/interfaces/ChunkStrategy#shouldemit)
diff --git a/mintlify/ai/reference/classes/RealtimeClient.md b/mintlify/ai/reference/classes/RealtimeClient.md
new file mode 100644
index 000000000..38aa67072
--- /dev/null
+++ b/mintlify/ai/reference/classes/RealtimeClient.md
@@ -0,0 +1,12 @@
+---
+title: "RealtimeClient"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/classes/RealtimeClient)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/classes/StandardSchemaValidationError.md b/mintlify/ai/reference/classes/StandardSchemaValidationError.md
new file mode 100644
index 000000000..ebb8f5ec5
--- /dev/null
+++ b/mintlify/ai/reference/classes/StandardSchemaValidationError.md
@@ -0,0 +1,68 @@
+---
+id: StandardSchemaValidationError
+title: StandardSchemaValidationError
+---
+
+# Class: StandardSchemaValidationError
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:418](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L418)
+
+Error thrown when Standard Schema validation fails. Carries the original
+`issues` array so consumers (middleware `onError`, callers catching from
+`chat({ outputSchema })`) can programmatically inspect each failure.
+
+## Extends
+
+- `Error`
+
+## Constructors
+
+### Constructor
+
+```ts
+new StandardSchemaValidationError(issues): StandardSchemaValidationError;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:422](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L422)
+
+#### Parameters
+
+##### issues
+
+readonly `Issue`[]
+
+#### Returns
+
+`StandardSchemaValidationError`
+
+#### Overrides
+
+```ts
+Error.constructor
+```
+
+## Properties
+
+### issues
+
+```ts
+readonly issues: readonly Issue[];
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:420](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L420)
+
+***
+
+### name
+
+```ts
+readonly name: "StandardSchemaValidationError" = 'StandardSchemaValidationError';
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:419](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L419)
+
+#### Overrides
+
+```ts
+Error.name
+```
diff --git a/mintlify/ai/reference/classes/StreamProcessor.md b/mintlify/ai/reference/classes/StreamProcessor.md
new file mode 100644
index 000000000..33fdb5dfc
--- /dev/null
+++ b/mintlify/ai/reference/classes/StreamProcessor.md
@@ -0,0 +1,497 @@
+---
+id: StreamProcessor
+title: StreamProcessor
+---
+
+# Class: StreamProcessor
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:156](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L156)
+
+StreamProcessor - State machine for processing AI response streams
+
+Manages the full UIMessage[] conversation and emits events on changes.
+Trusts the adapter contract: adapters emit clean AG-UI events in the
+correct order.
+
+State tracking:
+- Full message array
+- Per-message stream state (text, tool calls, thinking)
+- Multiple concurrent message streams
+- Tool call completion via TOOL_CALL_END events
+
+## See
+
+ - docs/chat-architecture.md#streamprocessor-internal-state — State field reference
+ - docs/chat-architecture.md#adapter-contract — What this class expects from adapters
+
+## Constructors
+
+### Constructor
+
+```ts
+new StreamProcessor(options): StreamProcessor;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:193](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L193)
+
+#### Parameters
+
+##### options
+
+[`StreamProcessorOptions`](/ai/reference/interfaces/StreamProcessorOptions) = `{}`
+
+#### Returns
+
+`StreamProcessor`
+
+## Methods
+
+### addToolApprovalResponse()
+
+```ts
+addToolApprovalResponse(approvalId, approved): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:351](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L351)
+
+Add an approval response (called by client after handling onApprovalRequest)
+
+#### Parameters
+
+##### approvalId
+
+`string`
+
+##### approved
+
+`boolean`
+
+#### Returns
+
+`void`
+
+***
+
+### addToolResult()
+
+```ts
+addToolResult(
+   toolCallId, 
+   output, 
+   error?): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:307](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L307)
+
+Add a tool result (called by client after handling onToolCall)
+
+#### Parameters
+
+##### toolCallId
+
+`string`
+
+##### output
+
+`any`
+
+##### error?
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### addUserMessage()
+
+```ts
+addUserMessage(content, id?): UIMessage;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:240](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L240)
+
+Add a user message to the conversation.
+Supports both simple string content and multimodal content arrays.
+
+#### Parameters
+
+##### content
+
+The message content (string or array of content parts)
+
+`string` | [`ContentPart`](/ai/reference/type-aliases/ContentPart)[]
+
+##### id?
+
+`string`
+
+Optional custom message ID (generated if not provided)
+
+#### Returns
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)
+
+The created UIMessage
+
+#### Example
+
+```ts
+// Simple text message
+processor.addUserMessage('Hello!')
+
+// Multimodal message with image
+processor.addUserMessage([
+  { type: 'text', content: 'What is in this image?' },
+  { type: 'image', source: { type: 'url', value: 'https://example.com/photo.jpg' } }
+])
+
+// With custom ID
+processor.addUserMessage('Hello!', 'custom-id-123')
+```
+
+***
+
+### areAllToolsComplete()
+
+```ts
+areAllToolsComplete(): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:382](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L382)
+
+Check if all tool calls in the last assistant message are complete
+Useful for auto-continue logic
+
+#### Returns
+
+`boolean`
+
+***
+
+### clearMessages()
+
+```ts
+clearMessages(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:454](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L454)
+
+Clear all messages
+
+#### Returns
+
+`void`
+
+***
+
+### finalizeStream()
+
+```ts
+finalizeStream(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2027](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2027)
+
+Finalize the stream — complete all pending operations.
+
+Called when the async iterable ends (stream closed). Acts as the final
+safety net: completes any remaining tool calls, flushes un-emitted text,
+and fires onStreamEnd.
+
+#### Returns
+
+`void`
+
+#### See
+
+docs/chat-architecture.md#single-shot-text-response — Finalization step
+
+***
+
+### getCurrentAssistantMessageId()
+
+```ts
+getCurrentAssistantMessageId(): string | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:291](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L291)
+
+Get the current assistant message ID (if one has been created).
+Returns null if prepareAssistantMessage() was called but no content
+has arrived yet.
+
+#### Returns
+
+`string` \| `null`
+
+***
+
+### getMessages()
+
+```ts
+getMessages(): UIMessage<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:374](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L374)
+
+Get current messages
+
+#### Returns
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>[]
+
+***
+
+### getRecording()
+
+```ts
+getRecording(): ChunkRecording | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2191](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2191)
+
+Get the current recording
+
+#### Returns
+
+[`ChunkRecording`](/ai/reference/interfaces/ChunkRecording) \| `null`
+
+***
+
+### getState()
+
+```ts
+getState(): ProcessorState;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2148](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2148)
+
+Get current processor state (aggregated across all messages)
+
+#### Returns
+
+[`ProcessorState`](/ai/reference/interfaces/ProcessorState)
+
+***
+
+### prepareAssistantMessage()
+
+```ts
+prepareAssistantMessage(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:270](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L270)
+
+Prepare for a new assistant message stream.
+Does NOT create the message immediately -- the message is created lazily
+when the first content-bearing chunk arrives via ensureAssistantMessage().
+This prevents empty assistant messages from flickering in the UI when
+auto-continuation produces no content.
+
+#### Returns
+
+`void`
+
+***
+
+### process()
+
+```ts
+process(stream): Promise<ProcessorResult>;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:472](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L472)
+
+Process a stream and emit events through handlers
+
+#### Parameters
+
+##### stream
+
+`AsyncIterable`\&lt;`any`\>
+
+#### Returns
+
+`Promise`\&lt;[`ProcessorResult`](/ai/reference/interfaces/ProcessorResult)\>
+
+***
+
+### processChunk()
+
+```ts
+processChunk(chunk): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:506](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L506)
+
+Process a single chunk from the stream.
+
+Central dispatch for all AG-UI events. Each event type maps to a specific
+handler. Events not listed in the switch are intentionally ignored
+(STEP_STARTED, STATE_SNAPSHOT, STATE_DELTA).
+
+#### Parameters
+
+##### chunk
+
+[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)
+
+#### Returns
+
+`void`
+
+#### See
+
+docs/chat-architecture.md#adapter-contract — Expected event types and ordering
+
+***
+
+### removeMessagesAfter()
+
+```ts
+removeMessagesAfter(index): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:422](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L422)
+
+Remove messages after a certain index (for reload/retry)
+
+#### Parameters
+
+##### index
+
+`number`
+
+#### Returns
+
+`void`
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2216](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2216)
+
+Full reset (including messages)
+
+#### Returns
+
+`void`
+
+***
+
+### setMessages()
+
+```ts
+setMessages(messages): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:212](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L212)
+
+Set the messages array (e.g., from persisted state)
+
+#### Parameters
+
+##### messages
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>[]
+
+#### Returns
+
+`void`
+
+***
+
+### ~~startAssistantMessage()~~
+
+```ts
+startAssistantMessage(messageId?): string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:279](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L279)
+
+#### Parameters
+
+##### messageId?
+
+`string`
+
+#### Returns
+
+`string`
+
+#### Deprecated
+
+Use prepareAssistantMessage() instead. This eagerly creates
+an assistant message which can cause empty message flicker.
+
+***
+
+### startRecording()
+
+```ts
+startRecording(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2178](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2178)
+
+Start recording chunks
+
+#### Returns
+
+`void`
+
+***
+
+### toModelMessages()
+
+```ts
+toModelMessages(): ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:363](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L363)
+
+Get the conversation as ModelMessages (for sending to LLM)
+
+#### Returns
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>[]
+
+***
+
+### replay()
+
+```ts
+static replay(recording, options?): Promise<ProcessorResult>;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2235](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2235)
+
+Replay a recording through the processor
+
+#### Parameters
+
+##### recording
+
+[`ChunkRecording`](/ai/reference/interfaces/ChunkRecording)
+
+##### options?
+
+[`StreamProcessorOptions`](/ai/reference/interfaces/StreamProcessorOptions)
+
+#### Returns
+
+`Promise`\&lt;[`ProcessorResult`](/ai/reference/interfaces/ProcessorResult)\>
diff --git a/mintlify/ai/reference/classes/ToolCallManager.md b/mintlify/ai/reference/classes/ToolCallManager.md
new file mode 100644
index 000000000..d094b71f2
--- /dev/null
+++ b/mintlify/ai/reference/classes/ToolCallManager.md
@@ -0,0 +1,222 @@
+---
+id: ToolCallManager
+title: ToolCallManager
+---
+
+# Class: ToolCallManager\&lt;TToolsOrContext, TContext\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:210](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L210)
+
+Manages tool call accumulation and execution for the chat() method's automatic tool execution loop.
+
+Responsibilities:
+- Accumulates streaming tool call events (ID, name, arguments)
+- Validates tool calls (filters out incomplete ones)
+- Executes tool `execute` functions with parsed arguments
+- Emits `TOOL_CALL_END` events for client visibility
+- Returns tool result messages for conversation history
+
+This class is used internally by the AI.chat() method to handle the automatic
+tool execution loop. It can also be used independently for custom tool execution logic.
+
+## Example
+
+```typescript
+const manager = new ToolCallManager(tools);
+
+// During streaming, accumulate tool calls
+for await (const chunk of stream) {
+  if (chunk.type === 'TOOL_CALL_START') {
+    manager.addToolCallStartEvent(chunk);
+  } else if (chunk.type === 'TOOL_CALL_ARGS') {
+    manager.addToolCallArgsEvent(chunk);
+  }
+}
+
+// After stream completes, execute tools
+if (manager.hasToolCalls()) {
+  const toolResults = yield* manager.executeTools(finishEvent);
+  messages = [...messages, ...toolResults];
+  manager.clear();
+}
+```
+
+## Type Parameters
+
+### TToolsOrContext
+
+`TToolsOrContext` = `ReadonlyArray`\&lt;[`AnyTool`](/ai/reference/type-aliases/AnyTool)\>
+
+### TContext
+
+`TContext` = `TToolsOrContext` *extends* `ReadonlyArray`\&lt;[`AnyTool`](/ai/reference/type-aliases/AnyTool)\> ? `ContextFromTools`\&lt;`TToolsOrContext`\> : `TToolsOrContext`
+
+## Constructors
+
+### Constructor
+
+```ts
+new ToolCallManager<TToolsOrContext, TContext>(tools): ToolCallManager<TToolsOrContext, TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:221](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L221)
+
+#### Parameters
+
+##### tools
+
+`TToolsOrContext` *extends* readonly [`AnyTool`](/ai/reference/type-aliases/AnyTool)[] ? `TToolsOrContext`\&lt;`TToolsOrContext`\> : readonly [`AnyTool`](/ai/reference/type-aliases/AnyTool)[]
+
+#### Returns
+
+`ToolCallManager`\&lt;`TToolsOrContext`, `TContext`\>
+
+## Methods
+
+### addToolCallArgsEvent()
+
+```ts
+addToolCallArgsEvent(event): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:251](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L251)
+
+Add a TOOL_CALL_ARGS event to accumulate arguments (AG-UI)
+
+#### Parameters
+
+##### event
+
+[`ToolCallArgsEvent`](/ai/reference/interfaces/ToolCallArgsEvent)
+
+#### Returns
+
+`void`
+
+***
+
+### addToolCallStartEvent()
+
+```ts
+addToolCallStartEvent(event): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:232](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L232)
+
+Add a TOOL_CALL_START event to begin tracking a tool call (AG-UI)
+
+#### Parameters
+
+##### event
+
+[`ToolCallStartEvent`](/ai/reference/interfaces/ToolCallStartEvent)
+
+#### Returns
+
+`void`
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:411](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L411)
+
+Clear the tool calls map for the next iteration
+
+#### Returns
+
+`void`
+
+***
+
+### completeToolCall()
+
+```ts
+completeToolCall(event): void;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:265](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L265)
+
+Complete a tool call with its final input
+Called when TOOL_CALL_END is received
+
+#### Parameters
+
+##### event
+
+[`ToolCallEndEvent`](/ai/reference/interfaces/ToolCallEndEvent)
+
+#### Returns
+
+`void`
+
+***
+
+### executeTools()
+
+```ts
+executeTools(finishEvent, ...contextArgs): AsyncGenerator<ToolCallEndEvent, ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+| null>[], void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:300](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L300)
+
+Execute all tool calls and return tool result messages
+Yields TOOL_CALL_END events for streaming
+
+#### Parameters
+
+##### finishEvent
+
+[`RunFinishedEvent`](/ai/reference/interfaces/RunFinishedEvent)
+
+RUN_FINISHED event from the stream
+
+##### contextArgs
+
+...`ExecuteToolsContextArgs`\&lt;`TContext`\>
+
+#### Returns
+
+`AsyncGenerator`\&lt;[`ToolCallEndEvent`](/ai/reference/interfaces/ToolCallEndEvent), [`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>[], `void`\>
+
+***
+
+### getToolCalls()
+
+```ts
+getToolCalls(): ToolCall<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:289](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L289)
+
+Get all complete tool calls (filtered for valid ID and name)
+
+#### Returns
+
+[`ToolCall`](/ai/reference/interfaces/ToolCall)\&lt;`unknown`\>[]
+
+***
+
+### hasToolCalls()
+
+```ts
+hasToolCalls(): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-calls.ts:282](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-calls.ts#L282)
+
+Check if there are any complete tool calls to execute
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/ai/reference/classes/WordBoundaryStrategy.md b/mintlify/ai/reference/classes/WordBoundaryStrategy.md
new file mode 100644
index 000000000..c4d6dcd2d
--- /dev/null
+++ b/mintlify/ai/reference/classes/WordBoundaryStrategy.md
@@ -0,0 +1,61 @@
+---
+id: WordBoundaryStrategy
+title: WordBoundaryStrategy
+---
+
+# Class: WordBoundaryStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:57](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L57)
+
+Word Boundary Strategy - emit at word boundaries
+Prevents cutting words in half
+
+## Implements
+
+- [`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy)
+
+## Constructors
+
+### Constructor
+
+```ts
+new WordBoundaryStrategy(): WordBoundaryStrategy;
+```
+
+#### Returns
+
+`WordBoundaryStrategy`
+
+## Methods
+
+### shouldEmit()
+
+```ts
+shouldEmit(chunk, _accumulated): boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/strategies.ts:58](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/strategies.ts#L58)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### chunk
+
+`string`
+
+The new chunk of text (delta)
+
+##### \_accumulated
+
+`string`
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
+
+#### Implementation of
+
+[`ChunkStrategy`](/ai/reference/interfaces/ChunkStrategy).[`shouldEmit`](/ai/reference/interfaces/ChunkStrategy#shouldemit)
diff --git a/mintlify/ai/reference/functions/brandProviderTool.md b/mintlify/ai/reference/functions/brandProviderTool.md
new file mode 100644
index 000000000..c365c34d4
--- /dev/null
+++ b/mintlify/ai/reference/functions/brandProviderTool.md
@@ -0,0 +1,35 @@
+---
+id: brandProviderTool
+title: brandProviderTool
+---
+
+# Function: brandProviderTool()
+
+```ts
+function brandProviderTool<T>(tool): T;
+```
+
+Defined in: [packages/ai/src/tools/provider-tool.ts:35](https://github.com/TanStack/ai/blob/main/packages/ai/src/tools/provider-tool.ts#L35)
+
+Attach the `ProviderTool` phantom brand to a plain `Tool`-shaped object.
+
+The brand fields (`'~provider'`, `'~toolKind'`) exist only in the type
+system and are never assigned at runtime, so this is a single audited
+type-only assertion. Use it inside adapter `xxxTool()` factories instead
+of `as unknown as` — the cast collapses to one named site.
+
+## Type Parameters
+
+### T
+
+`T` *extends* [`ProviderTool`](/ai/reference/interfaces/ProviderTool)\&lt;`string`, `string`\>
+
+## Parameters
+
+### tool
+
+`Omit`\&lt;`T`, `"~provider"` \| `"~toolKind"`\>
+
+## Returns
+
+`T`
diff --git a/mintlify/ai/reference/functions/buildBaseUsage.md b/mintlify/ai/reference/functions/buildBaseUsage.md
new file mode 100644
index 000000000..5d632a726
--- /dev/null
+++ b/mintlify/ai/reference/functions/buildBaseUsage.md
@@ -0,0 +1,46 @@
+---
+id: buildBaseUsage
+title: buildBaseUsage
+---
+
+# Function: buildBaseUsage()
+
+```ts
+function buildBaseUsage<TProviderDetails>(input): TokenUsage<TProviderDetails>;
+```
+
+Defined in: [packages/ai/src/utilities/usage.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/usage.ts#L33)
+
+Builds the base TokenUsage object with core fields.
+Provider-specific functions should use this and then add their own details.
+
+## Type Parameters
+
+### TProviderDetails
+
+`TProviderDetails` = `ProviderUsageDetails`
+
+## Parameters
+
+### input
+
+[`BaseUsageInput`](/ai/reference/interfaces/BaseUsageInput)
+
+The base token counts
+
+## Returns
+
+`TokenUsage`\&lt;`TProviderDetails`\>
+
+A TokenUsage object with promptTokens, completionTokens, totalTokens
+
+## Example
+
+```typescript
+const base = buildBaseUsage({
+  promptTokens: 100,
+  completionTokens: 50,
+  totalTokens: 150
+});
+// Returns: { promptTokens: 100, completionTokens: 50, totalTokens: 150 }
+```
diff --git a/mintlify/ai/reference/functions/chat.md b/mintlify/ai/reference/functions/chat.md
new file mode 100644
index 000000000..dabbb13cb
--- /dev/null
+++ b/mintlify/ai/reference/functions/chat.md
@@ -0,0 +1,114 @@
+---
+id: chat
+title: chat
+---
+
+# Function: chat()
+
+```ts
+function chat<TAdapter, TSchema, TStream, TTools, TMiddleware>(options): TextActivityResult<TSchema, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/chat/index.ts:2666](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/index.ts#L2666)
+
+Text activity - handles agentic text generation, one-shot text generation, and agentic structured output.
+
+This activity supports four modes:
+1. **Streaming agentic text**: Stream responses with automatic tool execution
+2. **Streaming one-shot text**: Simple streaming request/response without tools
+3. **Non-streaming text**: Returns collected text as a string (stream: false)
+4. **Agentic structured output**: Run tools, then return structured data
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`AnyTextAdapter`](/ai/reference/type-aliases/AnyTextAdapter)
+
+### TSchema
+
+`TSchema` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) \| `undefined` = `undefined`
+
+### TStream
+
+`TStream` *extends* `boolean` = `boolean`
+
+### TTools
+
+`TTools` *extends* 
+  \| (
+  \| `Omit`\&lt;[`Tool`](/ai/reference/interfaces/Tool)\&lt;`any`, `any`, `any`, `any`\>, `"execute"`\> & `object` & `object`
+  \| [`ProviderTool`](/ai/reference/interfaces/ProviderTool)\&lt;`string`, `TAdapter`\[`"~types"`\]\[`"toolCapabilities"`\]\[`number`\]\>)[]
+  \| `undefined` = 
+  \| (
+  \| `Omit`\&lt;[`Tool`](/ai/reference/interfaces/Tool)\&lt;`any`, `any`, `any`, `any`\>, `"execute"`\> & `object` & `object`
+  \| [`ProviderTool`](/ai/reference/interfaces/ProviderTool)\&lt;`string`, `TAdapter`\[`"~types"`\]\[`"toolCapabilities"`\]\[`number`\]\>)[]
+  \| `undefined`
+
+### TMiddleware
+
+`TMiddleware` *extends* 
+  \| [`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`any`\>[]
+  \| `undefined` = 
+  \| [`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`any`\>[]
+  \| `undefined`
+
+## Parameters
+
+### options
+
+`TextActivityOptionsWithContext`\&lt;`TAdapter`, `TSchema`, `TStream`, `TTools`, `TMiddleware`\>
+
+## Returns
+
+`TextActivityResult`\&lt;`TSchema`, `TStream`\>
+
+## Examples
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+for await (const chunk of chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'What is the weather?' }],
+  tools: [weatherTool]
+})) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') {
+    console.log(chunk.delta)
+  }
+}
+```
+
+```ts
+for await (const chunk of chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'Hello!' }]
+})) {
+  console.log(chunk)
+}
+```
+
+```ts
+const text = await chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+  stream: false
+})
+// text is a string with the full response
+```
+
+```ts
+import { z } from 'zod'
+
+const result = await chat({
+  adapter: openaiText('gpt-4o'),
+  messages: [{ role: 'user', content: 'Research and summarize the topic' }],
+  tools: [researchTool, analyzeTool],
+  outputSchema: z.object({
+    summary: z.string(),
+    keyPoints: z.array(z.string())
+  })
+})
+// result is { summary: string, keyPoints: string[] }
+```
diff --git a/mintlify/ai/reference/functions/chatParamsFromRequest.md b/mintlify/ai/reference/functions/chatParamsFromRequest.md
new file mode 100644
index 000000000..4535aeedb
--- /dev/null
+++ b/mintlify/ai/reference/functions/chatParamsFromRequest.md
@@ -0,0 +1,78 @@
+---
+id: chatParamsFromRequest
+title: chatParamsFromRequest
+---
+
+# Function: chatParamsFromRequest()
+
+```ts
+function chatParamsFromRequest(req): Promise<{
+  aguiContext: object[];
+  context: object[];
+  forwardedProps: Record<string, unknown>;
+  messages: (
+     | ModelMessage<
+     | string
+     | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+     | null>
+    | UIMessage<unknown>)[];
+  parentRunId?: string;
+  runId: string;
+  state: unknown;
+  threadId: string;
+  tools: object[];
+}>;
+```
+
+Defined in: [packages/ai/src/utilities/chat-params.ts:134](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/chat-params.ts#L134)
+
+Read an HTTP `Request`, parse its JSON body, and validate it as an
+AG-UI `RunAgentInput` — collapsing the standard `req.json()` +
+`chatParamsFromRequestBody(...)` pair into a single call.
+
+On a malformed body or invalid AG-UI shape, this **throws a
+`Response`** with status 400 and a migration-pointing message in the
+body. Frameworks that natively handle thrown `Response` objects
+(TanStack Start, SolidStart, Remix, React Router 7) will return the
+400 to the client automatically, so the handler reduces to:
+
+```ts
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req)
+  // ...use params
+}
+```
+
+In frameworks that do not auto-handle thrown `Response` objects
+(Next.js Route Handlers, SvelteKit, Hono, raw Node), wrap the call
+with try/catch and return the caught Response yourself, or use
+`chatParamsFromRequestBody` directly with your own JSON-parsing.
+
+## Parameters
+
+### req
+
+`Request`
+
+## Returns
+
+`Promise`\&lt;\&#123;
+  `aguiContext`: `object`[];
+  `context`: `object`[];
+  `forwardedProps`: `Record`\&lt;`string`, `unknown`\>;
+  `messages`: (
+     \| [`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+     \| `string`
+     \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+     \| `null`\>
+    \| [`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>)[];
+  `parentRunId?`: `string`;
+  `runId`: `string`;
+  `state`: `unknown`;
+  `threadId`: `string`;
+  `tools`: `object`[];
+\&#125;\>
+
+## Throws
+
+400 on malformed JSON or invalid AG-UI shape.
diff --git a/mintlify/ai/reference/functions/chatParamsFromRequestBody.md b/mintlify/ai/reference/functions/chatParamsFromRequestBody.md
new file mode 100644
index 000000000..56fc3c504
--- /dev/null
+++ b/mintlify/ai/reference/functions/chatParamsFromRequestBody.md
@@ -0,0 +1,65 @@
+---
+id: chatParamsFromRequestBody
+title: chatParamsFromRequestBody
+---
+
+# Function: chatParamsFromRequestBody()
+
+```ts
+function chatParamsFromRequestBody(body): Promise<{
+  aguiContext: object[];
+  context: object[];
+  forwardedProps: Record<string, unknown>;
+  messages: (
+     | ModelMessage<
+     | string
+     | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+     | null>
+    | UIMessage<unknown>)[];
+  parentRunId?: string;
+  runId: string;
+  state: unknown;
+  threadId: string;
+  tools: object[];
+}>;
+```
+
+Defined in: [packages/ai/src/utilities/chat-params.ts:44](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/chat-params.ts#L44)
+
+Parse and validate an HTTP request body as an AG-UI `RunAgentInput`.
+
+Returns a spread-friendly object whose `messages` field is suitable for
+passing directly to `chat({ messages })`. The existing
+`convertMessagesToModelMessages` handles AG-UI fan-out dedup and
+reasoning/activity/developer-role normalization internally.
+
+## Parameters
+
+### body
+
+`unknown`
+
+## Returns
+
+`Promise`\&lt;\&#123;
+  `aguiContext`: `object`[];
+  `context`: `object`[];
+  `forwardedProps`: `Record`\&lt;`string`, `unknown`\>;
+  `messages`: (
+     \| [`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+     \| `string`
+     \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+     \| `null`\>
+    \| [`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>)[];
+  `parentRunId?`: `string`;
+  `runId`: `string`;
+  `state`: `unknown`;
+  `threadId`: `string`;
+  `tools`: `object`[];
+\&#125;\>
+
+## Throws
+
+An error with a migration-pointing message when the body does
+  not conform to AG-UI 0.0.52 `RunAgentInputSchema`. Surface this as a
+  400 Bad Request to the client.
diff --git a/mintlify/ai/reference/functions/combineStrategies.md b/mintlify/ai/reference/functions/combineStrategies.md
new file mode 100644
index 000000000..0e04ddda7
--- /dev/null
+++ b/mintlify/ai/reference/functions/combineStrategies.md
@@ -0,0 +1,44 @@
+---
+id: combineStrategies
+title: combineStrategies
+---
+
+# Function: combineStrategies()
+
+```ts
+function combineStrategies(strategies): AgentLoopStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/agent-loop-strategies.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/agent-loop-strategies.ts#L79)
+
+Creates a strategy that combines multiple strategies with AND logic
+All strategies must return true to continue
+
+## Parameters
+
+### strategies
+
+[`AgentLoopStrategy`](/ai/reference/type-aliases/AgentLoopStrategy)[]
+
+Array of strategies to combine
+
+## Returns
+
+[`AgentLoopStrategy`](/ai/reference/type-aliases/AgentLoopStrategy)
+
+AgentLoopStrategy that continues only if all strategies return true
+
+## Example
+
+```typescript
+const stream = chat({
+  adapter: openaiText(),
+  model: "gpt-4o",
+  messages: [...],
+  tools: [weatherTool],
+  agentLoopStrategy: combineStrategies([
+    maxIterations(10),
+    ({ messages }) => messages.length < 100,
+  ]),
+});
+```
diff --git a/mintlify/ai/reference/functions/convertMessagesToModelMessages.md b/mintlify/ai/reference/functions/convertMessagesToModelMessages.md
new file mode 100644
index 000000000..a04a8dd37
--- /dev/null
+++ b/mintlify/ai/reference/functions/convertMessagesToModelMessages.md
@@ -0,0 +1,35 @@
+---
+id: convertMessagesToModelMessages
+title: convertMessagesToModelMessages
+---
+
+# Function: convertMessagesToModelMessages()
+
+```ts
+function convertMessagesToModelMessages(messages): ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:81](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L81)
+
+Convert UIMessages or ModelMessages to ModelMessages
+
+## Parameters
+
+### messages
+
+(
+  \| [`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>
+  \| [`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>)[]
+
+## Returns
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>[]
diff --git a/mintlify/ai/reference/functions/convertSchemaToJsonSchema.md b/mintlify/ai/reference/functions/convertSchemaToJsonSchema.md
new file mode 100644
index 000000000..c4d9bb52e
--- /dev/null
+++ b/mintlify/ai/reference/functions/convertSchemaToJsonSchema.md
@@ -0,0 +1,88 @@
+---
+id: convertSchemaToJsonSchema
+title: convertSchemaToJsonSchema
+---
+
+# Function: convertSchemaToJsonSchema()
+
+```ts
+function convertSchemaToJsonSchema(schema, options): JSONSchema | undefined;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:324](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L324)
+
+Converts a Standard JSON Schema compliant schema or plain JSONSchema to JSON Schema format
+compatible with LLM providers.
+
+Supports any schema library that implements the Standard JSON Schema spec (v1):
+- Zod v4+ (natively supports StandardJSONSchemaV1)
+- ArkType (natively supports StandardJSONSchemaV1)
+- Valibot (via `toStandardJsonSchema()` from `@valibot/to-json-schema`)
+
+If the input is already a plain JSONSchema object, it is returned as-is.
+
+## Parameters
+
+### schema
+
+Standard JSON Schema compliant schema or plain JSONSchema object to convert
+
+[`SchemaInput`](/ai/reference/type-aliases/SchemaInput) | `undefined`
+
+### options
+
+`ConvertSchemaOptions` = `{}`
+
+Conversion options
+
+## Returns
+
+[`JSONSchema`](/ai/reference/interfaces/JSONSchema) \| `undefined`
+
+JSON Schema object that can be sent to LLM providers
+
+## Example
+
+```typescript
+// Using Zod v4+ (natively supports Standard JSON Schema)
+import * as z from 'zod';
+
+const zodSchema = z.object({
+  location: z.string().describe('City name'),
+  unit: z.enum(['celsius', 'fahrenheit']).optional()
+});
+
+const jsonSchema = convertSchemaToJsonSchema(zodSchema);
+
+@example
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+
+const arkSchema = type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+});
+
+const jsonSchema = convertSchemaToJsonSchema(arkSchema);
+
+@example
+// Using Valibot (via toStandardJsonSchema)
+import * as v from 'valibot';
+import { toStandardJsonSchema } from '@valibot/to-json-schema';
+
+const valibotSchema = toStandardJsonSchema(v.object({
+  location: v.string(),
+  unit: v.optional(v.picklist(['celsius', 'fahrenheit']))
+}));
+
+const jsonSchema = convertSchemaToJsonSchema(valibotSchema);
+
+@example
+// Using JSONSchema directly (passes through unchanged)
+const rawSchema = {
+  type: 'object',
+  properties: { location: { type: 'string' } },
+  required: ['location']
+};
+const result = convertSchemaToJsonSchema(rawSchema);
+```
diff --git a/mintlify/ai/reference/functions/convertZodToJsonSchema.md b/mintlify/ai/reference/functions/convertZodToJsonSchema.md
new file mode 100644
index 000000000..b53f790c0
--- /dev/null
+++ b/mintlify/ai/reference/functions/convertZodToJsonSchema.md
@@ -0,0 +1,12 @@
+---
+title: "convertZodToJsonSchema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/functions/convertZodToJsonSchema)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/functions/createAudioOptions.md b/mintlify/ai/reference/functions/createAudioOptions.md
new file mode 100644
index 000000000..82d86102f
--- /dev/null
+++ b/mintlify/ai/reference/functions/createAudioOptions.md
@@ -0,0 +1,34 @@
+---
+id: createAudioOptions
+title: createAudioOptions
+---
+
+# Function: createAudioOptions()
+
+```ts
+function createAudioOptions<TAdapter, TStream>(options): AudioActivityOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/index.ts:261](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/index.ts#L261)
+
+Create typed options for the generateAudio() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`AudioAdapter`](/ai/reference/interfaces/AudioAdapter)\&lt;`string`, `AudioProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`AudioActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`AudioActivityOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/createCapability.md b/mintlify/ai/reference/functions/createCapability.md
new file mode 100644
index 000000000..a5c10dbc3
--- /dev/null
+++ b/mintlify/ai/reference/functions/createCapability.md
@@ -0,0 +1,75 @@
+---
+id: createCapability
+title: createCapability
+---
+
+# Function: createCapability()
+
+```ts
+function createCapability<TValue>(): <TName>(name) => Capability<TValue, TName>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:114](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L114)
+
+Create a capability. Returns a hybrid handle that destructures to
+`[get, provide]` and is itself the identity for `requires`/`provides`.
+
+Curried so the value type is supplied explicitly while the name literal is
+INFERRED from the argument: `createCapability<T>()('name')`. (A single call
+`createCapability<T>('name')` cannot work — supplying `T` explicitly stops
+TypeScript inferring the name, collapsing it to `string` and defeating the
+compile-time coverage check that keys on the literal name.)
+
+## Type Parameters
+
+### TValue
+
+`TValue` = `unknown`
+
+## Returns
+
+```ts
+<TName>(name): Capability<TValue, TName>;
+```
+
+### Type Parameters
+
+#### TName
+
+`TName` *extends* `string`
+
+### Parameters
+
+#### name
+
+`TName`
+
+### Returns
+
+[`Capability`](/ai/reference/type-aliases/Capability)\&lt;`TValue`, `TName`\>
+
+## Example
+
+```ts
+const counterCapability = createCapability<{ value: number }>()('counter')
+const [getCounter, provideCounter] = counterCapability
+
+const withCounter = defineChatMiddleware({
+  name: 'counter',
+  provides: [counterCapability],
+  setup(ctx) { provideCounter(ctx, { value: 0 }) },
+})
+
+const readsCounter = defineChatMiddleware({
+  name: 'reads-counter',
+  requires: [counterCapability],
+  onChunk(ctx) { getCounter(ctx).value++ },
+})
+
+chat({ adapter, messages, middleware: [withCounter, readsCounter] })
+```
+
+## Remarks
+
+Capability `name`s must be unique across your app: compile-time
+coverage tracking keys on the name literal (runtime keys on reference).
diff --git a/mintlify/ai/reference/functions/createChatMiddleware.md b/mintlify/ai/reference/functions/createChatMiddleware.md
new file mode 100644
index 000000000..6ceb30fd5
--- /dev/null
+++ b/mintlify/ai/reference/functions/createChatMiddleware.md
@@ -0,0 +1,18 @@
+---
+id: createChatMiddleware
+title: createChatMiddleware
+---
+
+# Function: createChatMiddleware()
+
+```ts
+function createChatMiddleware(): ChatMiddlewareBuilder<readonly [], never>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/builder.ts:89](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/builder.ts#L89)
+
+Create an order-aware middleware builder.
+
+## Returns
+
+`ChatMiddlewareBuilder`\&lt;readonly \[\], `never`\>
diff --git a/mintlify/ai/reference/functions/createChatOptions.md b/mintlify/ai/reference/functions/createChatOptions.md
new file mode 100644
index 000000000..1c01975db
--- /dev/null
+++ b/mintlify/ai/reference/functions/createChatOptions.md
@@ -0,0 +1,69 @@
+---
+id: createChatOptions
+title: createChatOptions
+---
+
+# Function: createChatOptions()
+
+```ts
+function createChatOptions<TAdapter, TSchema, TStream, TTools, TMiddleware>(options): TextActivityOptions<TAdapter, TSchema, TStream, InferredContext<TTools, TMiddleware>>;
+```
+
+Defined in: [packages/ai/src/activities/chat/index.ts:340](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/index.ts#L340)
+
+Create typed options for the chat() function without executing.
+This is useful for pre-defining configurations with full type inference.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`AnyTextAdapter`](/ai/reference/type-aliases/AnyTextAdapter)
+
+### TSchema
+
+`TSchema` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) \| `undefined` = `undefined`
+
+### TStream
+
+`TStream` *extends* `boolean` = `true`
+
+### TTools
+
+`TTools` *extends* 
+  \| (
+  \| `Omit`\&lt;[`Tool`](/ai/reference/interfaces/Tool)\&lt;`any`, `any`, `any`, `any`\>, `"execute"`\> & `object` & `object`
+  \| [`ProviderTool`](/ai/reference/interfaces/ProviderTool)\&lt;`string`, `TAdapter`\[`"~types"`\]\[`"toolCapabilities"`\]\[`number`\]\>)[]
+  \| `undefined` = 
+  \| (
+  \| `Omit`\&lt;[`Tool`](/ai/reference/interfaces/Tool)\&lt;`any`, `any`, `any`, `any`\>, `"execute"`\> & `object` & `object`
+  \| [`ProviderTool`](/ai/reference/interfaces/ProviderTool)\&lt;`string`, `TAdapter`\[`"~types"`\]\[`"toolCapabilities"`\]\[`number`\]\>)[]
+  \| `undefined`
+
+### TMiddleware
+
+`TMiddleware` *extends* 
+  \| [`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`any`\>[]
+  \| `undefined` = 
+  \| [`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`any`\>[]
+  \| `undefined`
+
+## Parameters
+
+### options
+
+`TextActivityOptionsWithContext`\&lt;`TAdapter`, `TSchema`, `TStream`, `TTools`, `TMiddleware`\>
+
+## Returns
+
+`TextActivityOptions`\&lt;`TAdapter`, `TSchema`, `TStream`, `InferredContext`\&lt;`TTools`, `TMiddleware`\>\>
+
+## Example
+
+```ts
+const chatOptions = createChatOptions({
+  adapter: anthropicText('claude-sonnet-4-5'),
+})
+
+const stream = chat({ ...chatOptions, messages })
+```
diff --git a/mintlify/ai/reference/functions/createFrozenRegistry.md b/mintlify/ai/reference/functions/createFrozenRegistry.md
new file mode 100644
index 000000000..50711c34e
--- /dev/null
+++ b/mintlify/ai/reference/functions/createFrozenRegistry.md
@@ -0,0 +1,37 @@
+---
+id: createFrozenRegistry
+title: createFrozenRegistry
+---
+
+# Function: createFrozenRegistry()
+
+```ts
+function createFrozenRegistry<TTool>(tools): ToolRegistry<TTool>;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:119](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L119)
+
+Create a frozen (immutable) tool registry from a tools array.
+
+This is used internally to wrap static `tools` arrays for backward compatibility.
+Add and remove operations are no-ops on frozen registries.
+
+## Type Parameters
+
+### TTool
+
+`TTool` *extends* [`AnyTool`](/ai/reference/type-aliases/AnyTool) = [`AnyTool`](/ai/reference/type-aliases/AnyTool)
+
+## Parameters
+
+### tools
+
+`TTool`[] = `[]`
+
+The static array of tools
+
+## Returns
+
+[`ToolRegistry`](/ai/reference/interfaces/ToolRegistry)\&lt;`TTool`\>
+
+A frozen ToolRegistry
diff --git a/mintlify/ai/reference/functions/createImageOptions.md b/mintlify/ai/reference/functions/createImageOptions.md
new file mode 100644
index 000000000..d490d949b
--- /dev/null
+++ b/mintlify/ai/reference/functions/createImageOptions.md
@@ -0,0 +1,34 @@
+---
+id: createImageOptions
+title: createImageOptions
+---
+
+# Function: createImageOptions()
+
+```ts
+function createImageOptions<TAdapter, TStream>(options): ImageActivityOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/index.ts:360](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/index.ts#L360)
+
+Create typed options for the generateImage() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`ImageAdapter`](/ai/reference/interfaces/ImageAdapter)\&lt;`string`, `any`, `any`, `any`, [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName)\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`ImageActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`ImageActivityOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/createModel.md b/mintlify/ai/reference/functions/createModel.md
new file mode 100644
index 000000000..c16ca7d1f
--- /dev/null
+++ b/mintlify/ai/reference/functions/createModel.md
@@ -0,0 +1,144 @@
+---
+id: createModel
+title: createModel
+---
+
+# Function: createModel()
+
+## Call Signature
+
+```ts
+function createModel<TName, TInput>(name, input): ExtendedModelDef<TName, TInput>;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:91](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L91)
+
+Creates a custom model definition for use with `extendAdapter`.
+
+This is a helper function that provides proper type inference without
+requiring manual `as const` casts on individual properties.
+
+### Type Parameters
+
+#### TName
+
+`TName` *extends* `string`
+
+The model name (inferred from argument)
+
+#### TInput
+
+`TInput` *extends* readonly [`Modality`](/ai/reference/type-aliases/Modality)[]
+
+The input modalities array (inferred from argument)
+
+### Parameters
+
+#### name
+
+`TName`
+
+The model name identifier (literal string)
+
+#### input
+
+`TInput`
+
+Array of supported input modalities
+
+### Returns
+
+[`ExtendedModelDef`](/ai/reference/interfaces/ExtendedModelDef)\&lt;`TName`, `TInput`\>
+
+A properly typed model definition for use with `extendAdapter`
+
+### Examples
+
+```typescript
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Define custom models with full type inference
+const customModels = [
+  createModel('my-fine-tuned-gpt4', ['text', 'image']),
+  createModel('local-llama', ['text']),
+] as const
+
+const myOpenai = extendAdapter(openaiText, customModels)
+```
+
+```typescript
+// Capabilities object form - declare features and provider tools
+const reasoner = createModel('reasoner', {
+  input: ['text'],
+  features: ['reasoning', 'structured_outputs'],
+  tools: ['web_search'],
+})
+```
+
+## Call Signature
+
+```ts
+function createModel<TName, TCaps>(name, capabilities): ExtendedModelDef<TName, TCaps["input"] extends readonly Modality[] ? any[any] : readonly Modality[], TCaps["modelOptions"], TCaps["features"] extends readonly string[] ? any[any] : readonly string[], TCaps["tools"] extends readonly string[] ? any[any] : readonly string[]>;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:96](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L96)
+
+Creates a custom model definition for use with `extendAdapter`.
+
+This is a helper function that provides proper type inference without
+requiring manual `as const` casts on individual properties.
+
+### Type Parameters
+
+#### TName
+
+`TName` *extends* `string`
+
+The model name (inferred from argument)
+
+#### TCaps
+
+`TCaps` *extends* [`ModelCapabilities`](/ai/reference/interfaces/ModelCapabilities)\&lt;readonly [`Modality`](/ai/reference/type-aliases/Modality)[], readonly `string`[], readonly `string`[], `unknown`\>
+
+### Parameters
+
+#### name
+
+`TName`
+
+The model name identifier (literal string)
+
+#### capabilities
+
+`TCaps`
+
+### Returns
+
+[`ExtendedModelDef`](/ai/reference/interfaces/ExtendedModelDef)\&lt;`TName`, `TCaps`\[`"input"`\] *extends* readonly [`Modality`](/ai/reference/type-aliases/Modality)[] ? `any`\[`any`\] : readonly [`Modality`](/ai/reference/type-aliases/Modality)[], `TCaps`\[`"modelOptions"`\], `TCaps`\[`"features"`\] *extends* readonly `string`[] ? `any`\[`any`\] : readonly `string`[], `TCaps`\[`"tools"`\] *extends* readonly `string`[] ? `any`\[`any`\] : readonly `string`[]\>
+
+A properly typed model definition for use with `extendAdapter`
+
+### Examples
+
+```typescript
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Define custom models with full type inference
+const customModels = [
+  createModel('my-fine-tuned-gpt4', ['text', 'image']),
+  createModel('local-llama', ['text']),
+] as const
+
+const myOpenai = extendAdapter(openaiText, customModels)
+```
+
+```typescript
+// Capabilities object form - declare features and provider tools
+const reasoner = createModel('reasoner', {
+  input: ['text'],
+  features: ['reasoning', 'structured_outputs'],
+  tools: ['web_search'],
+})
+```
diff --git a/mintlify/ai/reference/functions/createReplayStream.md b/mintlify/ai/reference/functions/createReplayStream.md
new file mode 100644
index 000000000..b0f2a7780
--- /dev/null
+++ b/mintlify/ai/reference/functions/createReplayStream.md
@@ -0,0 +1,24 @@
+---
+id: createReplayStream
+title: createReplayStream
+---
+
+# Function: createReplayStream()
+
+```ts
+function createReplayStream(recording): AsyncIterable<AGUIEvent>;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:2247](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L2247)
+
+Create an async iterable from a recording
+
+## Parameters
+
+### recording
+
+[`ChunkRecording`](/ai/reference/interfaces/ChunkRecording)
+
+## Returns
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
diff --git a/mintlify/ai/reference/functions/createSpeechOptions.md b/mintlify/ai/reference/functions/createSpeechOptions.md
new file mode 100644
index 000000000..e95b66ea3
--- /dev/null
+++ b/mintlify/ai/reference/functions/createSpeechOptions.md
@@ -0,0 +1,34 @@
+---
+id: createSpeechOptions
+title: createSpeechOptions
+---
+
+# Function: createSpeechOptions()
+
+```ts
+function createSpeechOptions<TAdapter, TStream>(options): TTSActivityOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/index.ts:274](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/index.ts#L274)
+
+Create typed options for the generateSpeech() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`TTSAdapter`](/ai/reference/interfaces/TTSAdapter)\&lt;`string`, `TTSProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`TTSActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`TTSActivityOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/createSummarizeOptions.md b/mintlify/ai/reference/functions/createSummarizeOptions.md
new file mode 100644
index 000000000..5dc5eeb0e
--- /dev/null
+++ b/mintlify/ai/reference/functions/createSummarizeOptions.md
@@ -0,0 +1,34 @@
+---
+id: createSummarizeOptions
+title: createSummarizeOptions
+---
+
+# Function: createSummarizeOptions()
+
+```ts
+function createSummarizeOptions<TAdapter, TStream>(options): SummarizeActivityOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/summarize/index.ts:298](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/index.ts#L298)
+
+Create typed options for the summarize() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`SummarizeAdapter`](/ai/reference/interfaces/SummarizeAdapter)\&lt;`string`, `object`\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`SummarizeActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`SummarizeActivityOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/createToolRegistry.md b/mintlify/ai/reference/functions/createToolRegistry.md
new file mode 100644
index 000000000..4db48a7d3
--- /dev/null
+++ b/mintlify/ai/reference/functions/createToolRegistry.md
@@ -0,0 +1,52 @@
+---
+id: createToolRegistry
+title: createToolRegistry
+---
+
+# Function: createToolRegistry()
+
+```ts
+function createToolRegistry<TTool>(initialTools): ToolRegistry<TTool>;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:78](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L78)
+
+Create a mutable tool registry for dynamic tool scenarios.
+
+Tools can be added and removed during chat execution, and the
+changes will be reflected in subsequent agent loop iterations.
+
+## Type Parameters
+
+### TTool
+
+`TTool` *extends* [`AnyTool`](/ai/reference/type-aliases/AnyTool) = [`AnyTool`](/ai/reference/type-aliases/AnyTool)
+
+## Parameters
+
+### initialTools
+
+`TTool`[] = `[]`
+
+Optional initial set of tools
+
+## Returns
+
+[`ToolRegistry`](/ai/reference/interfaces/ToolRegistry)\&lt;`TTool`\>
+
+A mutable ToolRegistry
+
+## Example
+
+```typescript
+const registry = createToolRegistry([toolA, toolB])
+
+const stream = chat({
+  adapter,
+  messages,
+  toolRegistry: registry,
+})
+
+// Later, during tool execution:
+registry.add(newTool)  // Immediately available to LLM
+```
diff --git a/mintlify/ai/reference/functions/createTranscriptionOptions.md b/mintlify/ai/reference/functions/createTranscriptionOptions.md
new file mode 100644
index 000000000..4e89510ab
--- /dev/null
+++ b/mintlify/ai/reference/functions/createTranscriptionOptions.md
@@ -0,0 +1,34 @@
+---
+id: createTranscriptionOptions
+title: createTranscriptionOptions
+---
+
+# Function: createTranscriptionOptions()
+
+```ts
+function createTranscriptionOptions<TAdapter, TStream>(options): TranscriptionActivityOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/index.ts:292](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/index.ts#L292)
+
+Create typed options for the generateTranscription() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`TranscriptionAdapter`](/ai/reference/interfaces/TranscriptionAdapter)\&lt;`string`, `TranscriptionProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`TranscriptionActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`TranscriptionActivityOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/createVideoOptions.md b/mintlify/ai/reference/functions/createVideoOptions.md
new file mode 100644
index 000000000..84ec1fef9
--- /dev/null
+++ b/mintlify/ai/reference/functions/createVideoOptions.md
@@ -0,0 +1,34 @@
+---
+id: createVideoOptions
+title: createVideoOptions
+---
+
+# Function: createVideoOptions()
+
+```ts
+function createVideoOptions<TAdapter, TStream>(options): VideoCreateOptions<TAdapter, TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/index.ts:694](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/index.ts#L694)
+
+Create typed options for the generateVideo() function without executing.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`VideoAdapter`](/ai/reference/interfaces/VideoAdapter)\&lt;`string`, `any`, `any`, `any`, [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName), `Record`\&lt;`string`, `number`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`VideoCreateOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`VideoCreateOptions`\&lt;`TAdapter`, `TStream`\>
diff --git a/mintlify/ai/reference/functions/defineChatMiddleware.md b/mintlify/ai/reference/functions/defineChatMiddleware.md
new file mode 100644
index 000000000..0e78e0057
--- /dev/null
+++ b/mintlify/ai/reference/functions/defineChatMiddleware.md
@@ -0,0 +1,41 @@
+---
+id: defineChatMiddleware
+title: defineChatMiddleware
+---
+
+# Function: defineChatMiddleware()
+
+```ts
+function defineChatMiddleware<TContext, TRequires, TProvides>(middleware): DefinedChatMiddleware<TContext, TRequires, TProvides>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/define.ts:23](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/define.ts#L23)
+
+Identity helper for authoring middleware with precise capability inference.
+Returns the middleware unchanged at runtime; only sharpens its type so the
+`chat()` array coverage check and `createChatMiddleware` builder can read the
+exact `requires`/`provides`.
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+### TRequires
+
+`TRequires` *extends* readonly [`CapabilityHandle`](/ai/reference/type-aliases/CapabilityHandle)[] = readonly \[\]
+
+### TProvides
+
+`TProvides` *extends* readonly [`CapabilityHandle`](/ai/reference/type-aliases/CapabilityHandle)[] = readonly \[\]
+
+## Parameters
+
+### middleware
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`TContext`\> & `object`
+
+## Returns
+
+[`DefinedChatMiddleware`](/ai/reference/interfaces/DefinedChatMiddleware)\&lt;`TContext`, `TRequires`, `TProvides`\>
diff --git a/mintlify/ai/reference/functions/detectImageMimeType.md b/mintlify/ai/reference/functions/detectImageMimeType.md
new file mode 100644
index 000000000..92e1e3a38
--- /dev/null
+++ b/mintlify/ai/reference/functions/detectImageMimeType.md
@@ -0,0 +1,39 @@
+---
+id: detectImageMimeType
+title: detectImageMimeType
+---
+
+# Function: detectImageMimeType()
+
+```ts
+function detectImageMimeType(base64Data): "image/png" | "image/jpeg" | "image/gif" | "image/webp" | undefined;
+```
+
+Defined in: [packages/ai/src/utils.ts:17](https://github.com/TanStack/ai/blob/main/packages/ai/src/utils.ts#L17)
+
+Detect image mime type from base64 data using magic bytes.
+Returns undefined if the format cannot be detected.
+
+This function analyzes the first few bytes of base64-encoded image data
+to determine the image format based on file signature (magic bytes).
+
+## Parameters
+
+### base64Data
+
+`string`
+
+The base64-encoded image data
+
+## Returns
+
+`"image/png"` \| `"image/jpeg"` \| `"image/gif"` \| `"image/webp"` \| `undefined`
+
+The detected mime type, or undefined if unrecognized
+
+## Example
+
+```ts
+const mimeType = detectImageMimeType(imageBase64)
+// Returns 'image/jpeg', 'image/png', 'image/gif', 'image/webp', or undefined
+```
diff --git a/mintlify/ai/reference/functions/embedding.md b/mintlify/ai/reference/functions/embedding.md
new file mode 100644
index 000000000..1f47f72ba
--- /dev/null
+++ b/mintlify/ai/reference/functions/embedding.md
@@ -0,0 +1,12 @@
+---
+title: "embedding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/functions/embedding)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/functions/extendAdapter.md b/mintlify/ai/reference/functions/extendAdapter.md
new file mode 100644
index 000000000..89e998877
--- /dev/null
+++ b/mintlify/ai/reference/functions/extendAdapter.md
@@ -0,0 +1,79 @@
+---
+id: extendAdapter
+title: extendAdapter
+---
+
+# Function: extendAdapter()
+
+```ts
+function extendAdapter<TFactory, TDefs>(factory, _customModels): ExtendedFactory<TFactory, TDefs>;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:247](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L247)
+
+Extends an existing adapter factory with additional custom models.
+
+The extended adapter accepts both original models (with full original type inference)
+and custom models (with types from your definitions).
+
+At runtime, this simply passes through to the original factory - no validation is performed.
+The original factory's signature is fully preserved, including any config parameters.
+
+## Type Parameters
+
+### TFactory
+
+`TFactory` *extends* `AnyAdapterFactory`
+
+### TDefs
+
+`TDefs` *extends* readonly [`ExtendedModelDef`](/ai/reference/interfaces/ExtendedModelDef)\&lt;`string`, readonly [`Modality`](/ai/reference/type-aliases/Modality)[], `unknown`, readonly `string`[], readonly `string`[]\>[]
+
+## Parameters
+
+### factory
+
+`TFactory`
+
+The original adapter factory function (e.g., `openaiText`, `anthropicText`)
+
+### \_customModels
+
+`TDefs`
+
+## Returns
+
+`ExtendedFactory`\&lt;`TFactory`, `TDefs`\>
+
+A new factory function that accepts both original and custom models
+
+## Example
+
+```typescript
+import { extendAdapter, createModel } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+// Define custom models
+const customModels = [
+  createModel('my-fine-tuned-gpt4', ['text', 'image']),
+  createModel('local-llama', ['text']),
+] as const
+
+// Create extended adapter
+const myOpenai = extendAdapter(openaiText, customModels)
+
+// Use with original models - full type inference preserved
+const gpt4 = myOpenai('gpt-4o')
+
+// Use with custom models
+const custom = myOpenai('my-fine-tuned-gpt4')
+
+// Type error: 'invalid-model' is not a valid model
+// myOpenai('invalid-model')
+
+// Works with chat()
+chat({
+  adapter: myOpenai('my-fine-tuned-gpt4'),
+  messages: [...]
+})
+```
diff --git a/mintlify/ai/reference/functions/firstSentence.md b/mintlify/ai/reference/functions/firstSentence.md
new file mode 100644
index 000000000..4c91f5cf0
--- /dev/null
+++ b/mintlify/ai/reference/functions/firstSentence.md
@@ -0,0 +1,26 @@
+---
+id: firstSentence
+title: firstSentence
+---
+
+# Function: firstSentence()
+
+```ts
+function firstSentence(text): string;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/lazy-tools.ts:8](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/lazy-tools.ts#L8)
+
+Extract the first sentence of a description (up to the first ., !, or ?
+followed by whitespace or end-of-string). Falls back to the whole trimmed
+string when there is no sentence terminator.
+
+## Parameters
+
+### text
+
+`string`
+
+## Returns
+
+`string`
diff --git a/mintlify/ai/reference/functions/generateAudio.md b/mintlify/ai/reference/functions/generateAudio.md
new file mode 100644
index 000000000..00a551e78
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateAudio.md
@@ -0,0 +1,51 @@
+---
+id: generateAudio
+title: generateAudio
+---
+
+# Function: generateAudio()
+
+```ts
+function generateAudio<TAdapter, TStream>(options): AudioActivityResult<TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/index.ts:130](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/index.ts#L130)
+
+Audio generation activity - generates audio from text prompts.
+
+Uses AI models to create music, sound effects, and other audio content.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`AudioAdapter`](/ai/reference/interfaces/AudioAdapter)\&lt;`string`, `AudioProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`AudioActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`AudioActivityResult`\&lt;`TStream`\>
+
+## Example
+
+```ts
+import { generateAudio } from '@tanstack/ai'
+import { falAudio } from '@tanstack/ai-fal'
+
+const result = await generateAudio({
+  adapter: falAudio('fal-ai/diffrhythm'),
+  prompt: 'An upbeat electronic track with synths',
+  duration: 10
+})
+
+console.log(result.audio.url) // URL to generated audio
+```
diff --git a/mintlify/ai/reference/functions/generateImage.md b/mintlify/ai/reference/functions/generateImage.md
new file mode 100644
index 000000000..5677dbf70
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateImage.md
@@ -0,0 +1,75 @@
+---
+id: generateImage
+title: generateImage
+---
+
+# Function: generateImage()
+
+```ts
+function generateImage<TAdapter, TStream>(options): ImageActivityResult<TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/index.ts:221](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/index.ts#L221)
+
+Image activity - generates images from text prompts.
+
+Uses AI image generation models to create images based on natural language descriptions.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`ImageAdapter`](/ai/reference/interfaces/ImageAdapter)\&lt;`string`, `any`, `any`, `any`, [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName)\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`ImageActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`ImageActivityResult`\&lt;`TStream`\>
+
+## Examples
+
+```ts
+import { generateImage } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+const result = await generateImage({
+  adapter: openaiImage('dall-e-3'),
+  prompt: 'A serene mountain landscape at sunset'
+})
+
+console.log(result.images[0].url)
+```
+
+```ts
+const result = await generateImage({
+  adapter: openaiImage('dall-e-2'),
+  prompt: 'A cute robot mascot',
+  numberOfImages: 4,
+  size: '512x512'
+})
+
+result.images.forEach((image, i) => {
+  console.log(`Image ${i + 1}: ${image.url}`)
+})
+```
+
+```ts
+const result = await generateImage({
+  adapter: openaiImage('dall-e-3'),
+  prompt: 'A professional headshot photo',
+  size: '1024x1024',
+  modelOptions: {
+    quality: 'hd',
+    style: 'natural'
+  }
+})
+```
diff --git a/mintlify/ai/reference/functions/generateMessageId.md b/mintlify/ai/reference/functions/generateMessageId.md
new file mode 100644
index 000000000..0e7c16bb1
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateMessageId.md
@@ -0,0 +1,18 @@
+---
+id: generateMessageId
+title: generateMessageId
+---
+
+# Function: generateMessageId()
+
+```ts
+function generateMessageId(): string;
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:659](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L659)
+
+Generate a unique message ID
+
+## Returns
+
+`string`
diff --git a/mintlify/ai/reference/functions/generateSpeech.md b/mintlify/ai/reference/functions/generateSpeech.md
new file mode 100644
index 000000000..5147937f7
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateSpeech.md
@@ -0,0 +1,61 @@
+---
+id: generateSpeech
+title: generateSpeech
+---
+
+# Function: generateSpeech()
+
+```ts
+function generateSpeech<TAdapter, TStream>(options): TTSActivityResult<TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/index.ts:142](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/index.ts#L142)
+
+TTS activity - generates speech from text.
+
+Uses AI text-to-speech models to create audio from natural language text.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`TTSAdapter`](/ai/reference/interfaces/TTSAdapter)\&lt;`string`, `TTSProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`TTSActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`TTSActivityResult`\&lt;`TStream`\>
+
+## Examples
+
+```ts
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1-hd'),
+  text: 'Hello, welcome to TanStack AI!',
+  voice: 'nova'
+})
+
+console.log(result.audio) // base64-encoded audio
+```
+
+```ts
+const result = await generateSpeech({
+  adapter: openaiSpeech('tts-1'),
+  text: 'This is slower speech.',
+  voice: 'alloy',
+  format: 'wav',
+  speed: 0.8
+})
+```
diff --git a/mintlify/ai/reference/functions/generateTranscription.md b/mintlify/ai/reference/functions/generateTranscription.md
new file mode 100644
index 000000000..6bc32e954
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateTranscription.md
@@ -0,0 +1,73 @@
+---
+id: generateTranscription
+title: generateTranscription
+---
+
+# Function: generateTranscription()
+
+```ts
+function generateTranscription<TAdapter, TStream>(options): TranscriptionActivityResult<TStream>;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/index.ts:160](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/index.ts#L160)
+
+Transcription activity - converts audio to text.
+
+Uses AI speech-to-text models to transcribe audio content.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`TranscriptionAdapter`](/ai/reference/interfaces/TranscriptionAdapter)\&lt;`string`, `TranscriptionProviderOptions`\&lt;`TAdapter`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`TranscriptionActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`TranscriptionActivityResult`\&lt;`TStream`\>
+
+## Examples
+
+```ts
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: audioFile, // File, Blob, or base64 string
+  language: 'en'
+})
+
+console.log(result.text)
+```
+
+```ts
+const result = await generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: audioFile,
+  responseFormat: 'verbose_json'
+})
+
+result.segments?.forEach(segment => {
+  console.log(`[${segment.start}s - ${segment.end}s]: ${segment.text}`)
+})
+```
+
+```ts
+for await (const chunk of generateTranscription({
+  adapter: openaiTranscription('whisper-1'),
+  audio: audioFile,
+  stream: true
+})) {
+  console.log(chunk)
+}
+```
diff --git a/mintlify/ai/reference/functions/generateVideo.md b/mintlify/ai/reference/functions/generateVideo.md
new file mode 100644
index 000000000..ae58fdcbd
--- /dev/null
+++ b/mintlify/ai/reference/functions/generateVideo.md
@@ -0,0 +1,73 @@
+---
+id: generateVideo
+title: generateVideo
+---
+
+# Function: generateVideo()
+
+```ts
+function generateVideo<TAdapter, TStream>(options): TStream extends true ? AsyncIterable<AGUIEvent, any, any> : Promise<VideoJobResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/index.ts:298](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/index.ts#L298)
+
+**`Experimental`**
+
+Generate video - creates a video generation job from a text prompt.
+
+Uses AI video generation models to create videos based on natural language descriptions.
+Unlike image generation, video generation is asynchronous and requires polling for completion.
+
+When `stream: true` is passed, handles the full job lifecycle automatically:
+create job → poll for status → stream updates → yield final result.
+
+ Video generation is an experimental feature and may change.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`VideoAdapter`](/ai/reference/interfaces/VideoAdapter)\&lt;`string`, `any`, `any`, `any`, [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName), `Record`\&lt;`string`, `number`\>\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`VideoCreateOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`TStream` *extends* `true` ? `AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent), `any`, `any`\> : `Promise`\&lt;[`VideoJobResult`](/ai/reference/interfaces/VideoJobResult)\>
+
+## Examples
+
+```ts
+import { generateVideo } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+// Start a video generation job
+const { jobId } = await generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A cat chasing a dog in a sunny park'
+})
+
+console.log('Job started:', jobId)
+```
+
+```ts
+import { generateVideo, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+const stream = generateVideo({
+  adapter: openaiVideo('sora-2'),
+  prompt: 'A cat chasing a dog in a sunny park',
+  stream: true,
+  pollingInterval: 3000,
+})
+
+return toServerSentEventsResponse(stream)
+```
diff --git a/mintlify/ai/reference/functions/getProviderExecutedMetadata.md b/mintlify/ai/reference/functions/getProviderExecutedMetadata.md
new file mode 100644
index 000000000..09ea2ed21
--- /dev/null
+++ b/mintlify/ai/reference/functions/getProviderExecutedMetadata.md
@@ -0,0 +1,34 @@
+---
+id: getProviderExecutedMetadata
+title: getProviderExecutedMetadata
+---
+
+# Function: getProviderExecutedMetadata()
+
+```ts
+function getProviderExecutedMetadata(toolCall): 
+  | ProviderExecutedToolMetadata
+  | null;
+```
+
+Defined in: [packages/ai/src/utilities/provider-executed.ts:9](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/provider-executed.ts#L9)
+
+Narrow a tool call's opaque `metadata` to the provider-executed convention.
+Returns the typed metadata when the call is provider-executed, else `null`.
+
+## Parameters
+
+### toolCall
+
+\&#123;
+`metadata?`: `unknown`;
+\&#125; | `null` | `undefined`
+
+## Returns
+
+  \| [`ProviderExecutedToolMetadata`](/ai/reference/interfaces/ProviderExecutedToolMetadata)
+  \| `null`
+
+## See
+
+ProviderExecutedToolMetadata
diff --git a/mintlify/ai/reference/functions/getVideoJobStatus.md b/mintlify/ai/reference/functions/getVideoJobStatus.md
new file mode 100644
index 000000000..c2c958d93
--- /dev/null
+++ b/mintlify/ai/reference/functions/getVideoJobStatus.md
@@ -0,0 +1,73 @@
+---
+id: getVideoJobStatus
+title: getVideoJobStatus
+---
+
+# Function: getVideoJobStatus()
+
+```ts
+function getVideoJobStatus<TAdapter>(options): Promise<{
+  error?: string;
+  progress?: number;
+  status: "pending" | "processing" | "completed" | "failed";
+  url?: string;
+  usage?: TokenUsage<ProviderUsageDetails>;
+}>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/index.ts:584](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/index.ts#L584)
+
+**`Experimental`**
+
+Get video job status - returns the current status, progress, and URL if available.
+
+This function combines status checking and URL retrieval. If the job is completed,
+it will automatically fetch and include the video URL.
+
+ Video generation is an experimental feature and may change.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`VideoAdapter`](/ai/reference/interfaces/VideoAdapter)\&lt;`string`, `any`, `any`, `any`, [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName), `Record`\&lt;`string`, `number`\>\>
+
+## Parameters
+
+### options
+
+#### adapter
+
+`TAdapter` & `object`
+
+#### jobId
+
+`string`
+
+## Returns
+
+`Promise`\&lt;\&#123;
+  `error?`: `string`;
+  `progress?`: `number`;
+  `status`: `"pending"` \| `"processing"` \| `"completed"` \| `"failed"`;
+  `url?`: `string`;
+  `usage?`: `TokenUsage`\&lt;`ProviderUsageDetails`\>;
+\&#125;\>
+
+## Example
+
+```ts
+import { getVideoJobStatus } from '@tanstack/ai'
+import { openaiVideo } from '@tanstack/ai-openai'
+
+const result = await getVideoJobStatus({
+  adapter: openaiVideo('sora-2'),
+  jobId: 'job-123'
+})
+
+console.log('Status:', result.status)
+console.log('Progress:', result.progress)
+if (result.url) {
+  console.log('Video URL:', result.url)
+}
+```
diff --git a/mintlify/ai/reference/functions/isContentPart.md b/mintlify/ai/reference/functions/isContentPart.md
new file mode 100644
index 000000000..c13d96815
--- /dev/null
+++ b/mintlify/ai/reference/functions/isContentPart.md
@@ -0,0 +1,26 @@
+---
+id: isContentPart
+title: isContentPart
+---
+
+# Function: isContentPart()
+
+```ts
+function isContentPart(value): value is ContentPart;
+```
+
+Defined in: [packages/ai/src/utilities/tool-result.ts:16](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/tool-result.ts#L16)
+
+Structural check for a single `ContentPart`. A text part must carry a string
+`content`; every other modality must carry a `source` with `type` of
+`'url' | 'data'` and a string `value`.
+
+## Parameters
+
+### value
+
+`unknown`
+
+## Returns
+
+`value is ContentPart`
diff --git a/mintlify/ai/reference/functions/isContentPartArray.md b/mintlify/ai/reference/functions/isContentPartArray.md
new file mode 100644
index 000000000..288bff2ad
--- /dev/null
+++ b/mintlify/ai/reference/functions/isContentPartArray.md
@@ -0,0 +1,27 @@
+---
+id: isContentPartArray
+title: isContentPartArray
+---
+
+# Function: isContentPartArray()
+
+```ts
+function isContentPartArray(value): value is ContentPart[];
+```
+
+Defined in: [packages/ai/src/utilities/tool-result.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/tool-result.ts#L42)
+
+True iff `value` is a NON-EMPTY array whose every element is a valid
+`ContentPart`. Empty arrays and mixed arrays return false so they continue
+to be treated as ordinary (stringified) data — this keeps the auto-detection
+footgun narrow.
+
+## Parameters
+
+### value
+
+`unknown`
+
+## Returns
+
+`value is ContentPart[]`
diff --git a/mintlify/ai/reference/functions/isProviderExecutedToolCall.md b/mintlify/ai/reference/functions/isProviderExecutedToolCall.md
new file mode 100644
index 000000000..dc0acf733
--- /dev/null
+++ b/mintlify/ai/reference/functions/isProviderExecutedToolCall.md
@@ -0,0 +1,28 @@
+---
+id: isProviderExecutedToolCall
+title: isProviderExecutedToolCall
+---
+
+# Function: isProviderExecutedToolCall()
+
+```ts
+function isProviderExecutedToolCall(toolCall): boolean;
+```
+
+Defined in: [packages/ai/src/utilities/provider-executed.ts:28](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/provider-executed.ts#L28)
+
+True when a tool call was executed by the provider (e.g. Anthropic
+`web_search` / `web_fetch` server tools) rather than the agent loop. Such
+calls must not be routed to client-side execution and are already "complete".
+
+## Parameters
+
+### toolCall
+
+\&#123;
+`metadata?`: `unknown`;
+\&#125; | `null` | `undefined`
+
+## Returns
+
+`boolean`
diff --git a/mintlify/ai/reference/functions/isStandardSchema.md b/mintlify/ai/reference/functions/isStandardSchema.md
new file mode 100644
index 000000000..3e8860b46
--- /dev/null
+++ b/mintlify/ai/reference/functions/isStandardSchema.md
@@ -0,0 +1,25 @@
+---
+id: isStandardSchema
+title: isStandardSchema
+---
+
+# Function: isStandardSchema()
+
+```ts
+function isStandardSchema(schema): schema is StandardSchemaV1<unknown, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:73](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L73)
+
+Check if a value is a Standard Schema compliant schema (for validation).
+Standard Schema compliant libraries implement the '~standard' property with a validate function.
+
+## Parameters
+
+### schema
+
+`unknown`
+
+## Returns
+
+`schema is StandardSchemaV1<unknown, unknown>`
diff --git a/mintlify/ai/reference/functions/maxIterations.md b/mintlify/ai/reference/functions/maxIterations.md
new file mode 100644
index 000000000..ff3f7d264
--- /dev/null
+++ b/mintlify/ai/reference/functions/maxIterations.md
@@ -0,0 +1,40 @@
+---
+id: maxIterations
+title: maxIterations
+---
+
+# Function: maxIterations()
+
+```ts
+function maxIterations(max): AgentLoopStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/agent-loop-strategies.ts:20](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/agent-loop-strategies.ts#L20)
+
+Creates a strategy that continues for a maximum number of iterations
+
+## Parameters
+
+### max
+
+`number`
+
+Maximum number of iterations to allow
+
+## Returns
+
+[`AgentLoopStrategy`](/ai/reference/type-aliases/AgentLoopStrategy)
+
+AgentLoopStrategy that stops after max iterations
+
+## Example
+
+```typescript
+const stream = chat({
+  adapter: openaiText(),
+  model: "gpt-4o",
+  messages: [...],
+  tools: [weatherTool],
+  agentLoopStrategy: maxIterations(3), // Max 3 iterations
+});
+```
diff --git a/mintlify/ai/reference/functions/mergeAgentTools.md b/mintlify/ai/reference/functions/mergeAgentTools.md
new file mode 100644
index 000000000..32f95bf69
--- /dev/null
+++ b/mintlify/ai/reference/functions/mergeAgentTools.md
@@ -0,0 +1,54 @@
+---
+id: mergeAgentTools
+title: mergeAgentTools
+---
+
+# Function: mergeAgentTools()
+
+```ts
+function mergeAgentTools<TContext>(serverTools, clientTools): Tool<SchemaInput, SchemaInput, string, TContext>[];
+```
+
+Defined in: [packages/ai/src/utilities/chat-params.ts:187](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/chat-params.ts#L187)
+
+Merge a server-side tool array with the AG-UI client-declared tools
+received in the request body.
+
+Rules:
+- Server tools win on name collision. The client's declaration is
+  ignored if the server already has a tool with that name. The client's
+  UI-side handler still fires when the streamed tool-result event comes
+  through (see `chat-client.ts` `onToolCall`), giving the
+  "after server execution the client also handles" semantic for free.
+- Client-only tools (name not in `serverTools`) become no-execute
+  entries: the runtime's existing `ClientToolRequest` path handles
+  them — server emits a tool-call request, client executes via its
+  registered handler, client posts back the result.
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Parameters
+
+### serverTools
+
+readonly [`Tool`](/ai/reference/interfaces/Tool)\&lt;[`SchemaInput`](/ai/reference/type-aliases/SchemaInput), [`SchemaInput`](/ai/reference/type-aliases/SchemaInput), `string`, `TContext`\>[]
+
+The server's tool array (e.g. from
+  `[myToolDef.server(...)]`). Pass directly to `chat({ tools })`.
+
+### clientTools
+
+readonly `object`[]
+
+The `tools` array received from
+  `chatParamsFromRequest(...)` / `chatParamsFromRequestBody(...)`.
+
+## Returns
+
+[`Tool`](/ai/reference/interfaces/Tool)\&lt;[`SchemaInput`](/ai/reference/type-aliases/SchemaInput), [`SchemaInput`](/ai/reference/type-aliases/SchemaInput), `string`, `TContext`\>[]
+
+A merged array suitable for `chat({ tools })`.
diff --git a/mintlify/ai/reference/functions/messages.md b/mintlify/ai/reference/functions/messages.md
new file mode 100644
index 000000000..99f4874db
--- /dev/null
+++ b/mintlify/ai/reference/functions/messages.md
@@ -0,0 +1,12 @@
+---
+title: "messages"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/functions/messages)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/functions/modelMessageToUIMessage.md b/mintlify/ai/reference/functions/modelMessageToUIMessage.md
new file mode 100644
index 000000000..69b1d7a52
--- /dev/null
+++ b/mintlify/ai/reference/functions/modelMessageToUIMessage.md
@@ -0,0 +1,39 @@
+---
+id: modelMessageToUIMessage
+title: modelMessageToUIMessage
+---
+
+# Function: modelMessageToUIMessage()
+
+```ts
+function modelMessageToUIMessage(modelMessage, id?): UIMessage;
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:402](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L402)
+
+Convert a ModelMessage to UIMessage
+
+This conversion creates a parts-based structure:
+- content field → TextPart
+- toolCalls array → ToolCallPart[]
+- role="tool" messages should be converted separately and merged
+
+## Parameters
+
+### modelMessage
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)
+
+The ModelMessage to convert
+
+### id?
+
+`string`
+
+Optional ID for the UIMessage (generated if not provided)
+
+## Returns
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)
+
+A UIMessage with parts
diff --git a/mintlify/ai/reference/functions/modelMessagesToUIMessages.md b/mintlify/ai/reference/functions/modelMessagesToUIMessages.md
new file mode 100644
index 000000000..7e3bb5f91
--- /dev/null
+++ b/mintlify/ai/reference/functions/modelMessagesToUIMessages.md
@@ -0,0 +1,33 @@
+---
+id: modelMessagesToUIMessages
+title: modelMessagesToUIMessages
+---
+
+# Function: modelMessagesToUIMessages()
+
+```ts
+function modelMessagesToUIMessages(modelMessages): UIMessage<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:575](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L575)
+
+Convert an array of ModelMessages to UIMessages
+
+This handles merging tool result messages with their corresponding assistant messages
+
+## Parameters
+
+### modelMessages
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>[]
+
+Array of ModelMessages to convert
+
+## Returns
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>[]
+
+Array of UIMessages
diff --git a/mintlify/ai/reference/functions/normalizeSystemPrompts.md b/mintlify/ai/reference/functions/normalizeSystemPrompts.md
new file mode 100644
index 000000000..7351cd87f
--- /dev/null
+++ b/mintlify/ai/reference/functions/normalizeSystemPrompts.md
@@ -0,0 +1,40 @@
+---
+id: normalizeSystemPrompts
+title: normalizeSystemPrompts
+---
+
+# Function: normalizeSystemPrompts()
+
+```ts
+function normalizeSystemPrompts<TMetadata>(prompts): NormalizedSystemPrompt<TMetadata>[];
+```
+
+Defined in: [packages/ai/src/system-prompts.ts:70](https://github.com/TanStack/ai/blob/main/packages/ai/src/system-prompts.ts#L70)
+
+Normalise the public `systemPrompts` shape (`Array<string | { content, metadata? }>`)
+to a homogenous `Array<{ content, metadata? }>`. Adapters use this so they
+don't have to type-narrow string vs object inline.
+
+Returns an empty array (never `undefined`) so callers can chain `.map` /
+`.join` without an extra null check.
+
+Throws a `TypeError` (naming the offending index) if an object-form entry's
+`content` isn't a string. Public API boundary — callers reaching this
+function through `as any` / external JS would otherwise stream a literal
+`"undefined"` into the model's system prompt with no signal.
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Parameters
+
+### prompts
+
+readonly [`SystemPrompt`](/ai/reference/type-aliases/SystemPrompt)\&lt;`unknown`\>[] | `undefined`
+
+## Returns
+
+[`NormalizedSystemPrompt`](/ai/reference/interfaces/NormalizedSystemPrompt)\&lt;`TMetadata`\>[]
diff --git a/mintlify/ai/reference/functions/normalizeToUIMessage.md b/mintlify/ai/reference/functions/normalizeToUIMessage.md
new file mode 100644
index 000000000..31202d75c
--- /dev/null
+++ b/mintlify/ai/reference/functions/normalizeToUIMessage.md
@@ -0,0 +1,38 @@
+---
+id: normalizeToUIMessage
+title: normalizeToUIMessage
+---
+
+# Function: normalizeToUIMessage()
+
+```ts
+function normalizeToUIMessage(message, generateId): UIMessage;
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:636](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L636)
+
+Normalize a message (UIMessage or ModelMessage) to a UIMessage
+Ensures the message has an ID and createdAt timestamp
+
+## Parameters
+
+### message
+
+Either a UIMessage or ModelMessage
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+\| `string`
+\| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+\| `null`\> | [`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>
+
+### generateId
+
+() => `string`
+
+Function to generate a message ID if needed
+
+## Returns
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)
+
+A UIMessage with guaranteed id and createdAt
diff --git a/mintlify/ai/reference/functions/normalizeToolResult.md b/mintlify/ai/reference/functions/normalizeToolResult.md
new file mode 100644
index 000000000..a37187984
--- /dev/null
+++ b/mintlify/ai/reference/functions/normalizeToolResult.md
@@ -0,0 +1,27 @@
+---
+id: normalizeToolResult
+title: normalizeToolResult
+---
+
+# Function: normalizeToolResult()
+
+```ts
+function normalizeToolResult(result): string | ContentPart[];
+```
+
+Defined in: [packages/ai/src/utilities/tool-result.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/tool-result.ts#L54)
+
+Normalize a tool's return value for transport:
+- string            → unchanged
+- ContentPart array → unchanged (multimodal, passed through to the adapter)
+- anything else     → `JSON.stringify`
+
+## Parameters
+
+### result
+
+`unknown`
+
+## Returns
+
+`string` \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)[]
diff --git a/mintlify/ai/reference/functions/parsePartialJSON.md b/mintlify/ai/reference/functions/parsePartialJSON.md
new file mode 100644
index 000000000..cfef20773
--- /dev/null
+++ b/mintlify/ai/reference/functions/parsePartialJSON.md
@@ -0,0 +1,28 @@
+---
+id: parsePartialJSON
+title: parsePartialJSON
+---
+
+# Function: parsePartialJSON()
+
+```ts
+function parsePartialJSON(jsonString): any;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:56](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L56)
+
+Parse partial JSON string (convenience function)
+
+## Parameters
+
+### jsonString
+
+`string`
+
+The JSON string to parse (may be incomplete)
+
+## Returns
+
+`any`
+
+The parsed object, or undefined if parsing fails
diff --git a/mintlify/ai/reference/functions/parseWithStandardSchema.md b/mintlify/ai/reference/functions/parseWithStandardSchema.md
new file mode 100644
index 000000000..152910f60
--- /dev/null
+++ b/mintlify/ai/reference/functions/parseWithStandardSchema.md
@@ -0,0 +1,47 @@
+---
+id: parseWithStandardSchema
+title: parseWithStandardSchema
+---
+
+# Function: parseWithStandardSchema()
+
+```ts
+function parseWithStandardSchema<T>(schema, data): T;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/schema-converter.ts:443](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/schema-converter.ts#L443)
+
+Synchronously validates data against a Standard Schema compliant schema.
+Note: Some Standard Schema implementations may only support async validation.
+In those cases, this function will throw.
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### schema
+
+`unknown`
+
+Standard Schema compliant schema
+
+### data
+
+`unknown`
+
+Data to validate
+
+## Returns
+
+`T`
+
+Parsed/validated data
+
+## Throws
+
+StandardSchemaValidationError if validation fails; Error if the
+        schema only supports async validation.
diff --git a/mintlify/ai/reference/functions/realtimeToken.md b/mintlify/ai/reference/functions/realtimeToken.md
new file mode 100644
index 000000000..8c4be9bf1
--- /dev/null
+++ b/mintlify/ai/reference/functions/realtimeToken.md
@@ -0,0 +1,48 @@
+---
+id: realtimeToken
+title: realtimeToken
+---
+
+# Function: realtimeToken()
+
+```ts
+function realtimeToken(options): Promise<RealtimeToken>;
+```
+
+Defined in: [packages/ai/src/realtime/index.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/index.ts#L31)
+
+Generate a realtime token using the provided adapter.
+
+This function is used on the server to generate ephemeral tokens
+that clients can use to establish realtime connections.
+
+## Parameters
+
+### options
+
+[`RealtimeTokenOptions`](/ai/reference/interfaces/RealtimeTokenOptions)
+
+Token generation options including the adapter
+
+## Returns
+
+`Promise`\&lt;[`RealtimeToken`](/ai/reference/interfaces/RealtimeToken)\>
+
+Promise resolving to a RealtimeToken
+
+## Example
+
+```typescript
+import { realtimeToken } from '@tanstack/ai'
+import { openaiRealtimeToken } from '@tanstack/ai-openai'
+
+// Server function (TanStack Start example)
+export const getRealtimeToken = createServerFn()
+  .handler(async () => {
+    return realtimeToken({
+      adapter: openaiRealtimeToken({
+        model: 'gpt-realtime',
+      }),
+    })
+  })
+```
diff --git a/mintlify/ai/reference/functions/renderLazyCatalogEntry.md b/mintlify/ai/reference/functions/renderLazyCatalogEntry.md
new file mode 100644
index 000000000..eb4dda57c
--- /dev/null
+++ b/mintlify/ai/reference/functions/renderLazyCatalogEntry.md
@@ -0,0 +1,39 @@
+---
+id: renderLazyCatalogEntry
+title: renderLazyCatalogEntry
+---
+
+# Function: renderLazyCatalogEntry()
+
+```ts
+function renderLazyCatalogEntry(
+   name, 
+   description, 
+   includeDescription): string;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/lazy-tools.ts:22](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/lazy-tools.ts#L22)
+
+Render one entry in a lazy-tool catalog according to `includeDescription`.
+- 'none' (default) → bare name (preserves legacy chat behavior)
+- 'first-sentence' → `name — <first sentence>`
+- 'full' → `name — <full description>`
+Falls back to the bare name when there is no description.
+
+## Parameters
+
+### name
+
+`string`
+
+### description
+
+`string`
+
+### includeDescription
+
+`"full"` | `"first-sentence"` | `"none"` | `undefined`
+
+## Returns
+
+`string`
diff --git a/mintlify/ai/reference/functions/resolveMediaPrompt.md b/mintlify/ai/reference/functions/resolveMediaPrompt.md
new file mode 100644
index 000000000..af8353668
--- /dev/null
+++ b/mintlify/ai/reference/functions/resolveMediaPrompt.md
@@ -0,0 +1,27 @@
+---
+id: resolveMediaPrompt
+title: resolveMediaPrompt
+---
+
+# Function: resolveMediaPrompt()
+
+```ts
+function resolveMediaPrompt(prompt): ResolvedMediaPrompt;
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:45](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L45)
+
+Decompose a [MediaPrompt](/ai/reference/type-aliases/MediaPrompt) into flattened text and per-modality part
+buckets, preserving prompt order everywhere. This is the single downrev
+point from the canonical interleaved prompt shape to the named-field
+request shapes most providers expose.
+
+## Parameters
+
+### prompt
+
+[`MediaPrompt`](/ai/reference/type-aliases/MediaPrompt)
+
+## Returns
+
+[`ResolvedMediaPrompt`](/ai/reference/interfaces/ResolvedMediaPrompt)
diff --git a/mintlify/ai/reference/functions/streamToText.md b/mintlify/ai/reference/functions/streamToText.md
new file mode 100644
index 000000000..8a35a5811
--- /dev/null
+++ b/mintlify/ai/reference/functions/streamToText.md
@@ -0,0 +1,43 @@
+---
+id: streamToText
+title: streamToText
+---
+
+# Function: streamToText()
+
+```ts
+function streamToText(stream): Promise<string>;
+```
+
+Defined in: [packages/ai/src/stream-to-response.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/stream-to-response.ts#L24)
+
+Collect all text content from a StreamChunk async iterable and return as a string.
+
+This function consumes the entire stream, accumulating content from TEXT_MESSAGE_CONTENT events,
+and returns the final concatenated text.
+
+## Parameters
+
+### stream
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+AsyncIterable of StreamChunks from chat()
+
+## Returns
+
+`Promise`\&lt;`string`\>
+
+Promise&lt;string&gt; - The accumulated text content
+
+## Example
+
+```typescript
+const stream = chat({
+  adapter: openaiText(),
+  model: 'gpt-4o',
+  messages: [{ role: 'user', content: 'Hello!' }]
+});
+const text = await streamToText(stream);
+console.log(text); // "Hello! How can I help you today?"
+```
diff --git a/mintlify/ai/reference/functions/summarize.md b/mintlify/ai/reference/functions/summarize.md
new file mode 100644
index 000000000..b043ef515
--- /dev/null
+++ b/mintlify/ai/reference/functions/summarize.md
@@ -0,0 +1,79 @@
+---
+id: summarize
+title: summarize
+---
+
+# Function: summarize()
+
+```ts
+function summarize<TAdapter, TStream>(options): SummarizeActivityResult<TStream>;
+```
+
+Defined in: [packages/ai/src/activities/summarize/index.ts:152](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/index.ts#L152)
+
+Summarize activity - generates summaries from text.
+
+Supports both streaming and non-streaming modes.
+
+## Type Parameters
+
+### TAdapter
+
+`TAdapter` *extends* [`SummarizeAdapter`](/ai/reference/interfaces/SummarizeAdapter)\&lt;`string`, `object`\>
+
+### TStream
+
+`TStream` *extends* `boolean` = `false`
+
+## Parameters
+
+### options
+
+`SummarizeActivityOptions`\&lt;`TAdapter`, `TStream`\>
+
+## Returns
+
+`SummarizeActivityResult`\&lt;`TStream`\>
+
+## Examples
+
+```ts
+import { summarize } from '@tanstack/ai'
+import { openaiSummarize } from '@tanstack/ai-openai'
+
+const result = await summarize({
+  adapter: openaiSummarize('gpt-4o-mini'),
+  text: 'Long article text here...'
+})
+
+console.log(result.summary)
+```
+
+```ts
+const result = await summarize({
+  adapter: openaiSummarize('gpt-4o-mini'),
+  text: 'Long article text here...',
+  style: 'bullet-points',
+  maxLength: 100
+})
+```
+
+```ts
+const result = await summarize({
+  adapter: openaiSummarize('gpt-4o-mini'),
+  text: 'Long technical document...',
+  focus: ['key findings', 'methodology']
+})
+```
+
+```ts
+for await (const chunk of summarize({
+  adapter: openaiSummarize('gpt-4o-mini'),
+  text: 'Long article text here...',
+  stream: true
+})) {
+  if (chunk.type === 'content') {
+    process.stdout.write(chunk.delta)
+  }
+}
+```
diff --git a/mintlify/ai/reference/functions/text.md b/mintlify/ai/reference/functions/text.md
new file mode 100644
index 000000000..cda16db70
--- /dev/null
+++ b/mintlify/ai/reference/functions/text.md
@@ -0,0 +1,12 @@
+---
+title: "text"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/functions/text)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/functions/textOptions.md b/mintlify/ai/reference/functions/textOptions.md
new file mode 100644
index 000000000..0eb68eddd
--- /dev/null
+++ b/mintlify/ai/reference/functions/textOptions.md
@@ -0,0 +1,12 @@
+---
+title: "textOptions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/functions/textOptions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/functions/toHttpResponse.md b/mintlify/ai/reference/functions/toHttpResponse.md
new file mode 100644
index 000000000..1eb98628b
--- /dev/null
+++ b/mintlify/ai/reference/functions/toHttpResponse.md
@@ -0,0 +1,47 @@
+---
+id: toHttpResponse
+title: toHttpResponse
+---
+
+# Function: toHttpResponse()
+
+```ts
+function toHttpResponse(stream, init?): Response;
+```
+
+Defined in: [packages/ai/src/stream-to-response.ts:240](https://github.com/TanStack/ai/blob/main/packages/ai/src/stream-to-response.ts#L240)
+
+Convert a StreamChunk async iterable to a Response in HTTP stream format (newline-delimited JSON)
+
+This creates a Response that emits chunks in HTTP stream format:
+- Each chunk is JSON.stringify'd and followed by "\n"
+- No SSE formatting (no "data: " prefix)
+
+This format is compatible with `fetchHttpStream` connection adapter.
+
+## Parameters
+
+### stream
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+AsyncIterable of StreamChunks from chat()
+
+### init?
+
+`ResponseInit` & `object`
+
+Optional Response initialization options (including `abortController`)
+
+## Returns
+
+`Response`
+
+Response in HTTP stream format (newline-delimited JSON)
+
+## Example
+
+```typescript
+const stream = chat({ adapter: openaiText(), model: "gpt-4o", messages: [...] });
+return toHttpResponse(stream, { abortController });
+```
diff --git a/mintlify/ai/reference/functions/toHttpStream.md b/mintlify/ai/reference/functions/toHttpStream.md
new file mode 100644
index 000000000..8aee560af
--- /dev/null
+++ b/mintlify/ai/reference/functions/toHttpStream.md
@@ -0,0 +1,51 @@
+---
+id: toHttpStream
+title: toHttpStream
+---
+
+# Function: toHttpStream()
+
+```ts
+function toHttpStream(stream, abortController?): ReadableStream<Uint8Array<ArrayBufferLike>>;
+```
+
+Defined in: [packages/ai/src/stream-to-response.ts:171](https://github.com/TanStack/ai/blob/main/packages/ai/src/stream-to-response.ts#L171)
+
+Convert a StreamChunk async iterable to a ReadableStream in HTTP stream format (newline-delimited JSON)
+
+This creates a ReadableStream that emits chunks as newline-delimited JSON:
+- Each chunk is JSON.stringify'd and followed by "\n"
+- No SSE formatting (no "data: " prefix)
+
+This format is compatible with `fetchHttpStream` connection adapter.
+
+## Parameters
+
+### stream
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+AsyncIterable of StreamChunks from chat()
+
+### abortController?
+
+`AbortController`
+
+Optional AbortController to abort when stream is cancelled
+
+## Returns
+
+`ReadableStream`\&lt;`Uint8Array`\&lt;`ArrayBufferLike`\>\>
+
+ReadableStream in HTTP stream format (newline-delimited JSON)
+
+## Example
+
+```typescript
+const stream = chat({ adapter: openaiText(), model: "gpt-4o", messages: [...] });
+const readableStream = toHttpStream(stream);
+// Use with Response for HTTP streaming (not SSE)
+return new Response(readableStream, {
+  headers: { 'Content-Type': 'application/x-ndjson' }
+});
+```
diff --git a/mintlify/ai/reference/functions/toServerSentEventsResponse.md b/mintlify/ai/reference/functions/toServerSentEventsResponse.md
new file mode 100644
index 000000000..3d0997a8e
--- /dev/null
+++ b/mintlify/ai/reference/functions/toServerSentEventsResponse.md
@@ -0,0 +1,46 @@
+---
+id: toServerSentEventsResponse
+title: toServerSentEventsResponse
+---
+
+# Function: toServerSentEventsResponse()
+
+```ts
+function toServerSentEventsResponse(stream, init?): Response;
+```
+
+Defined in: [packages/ai/src/stream-to-response.ts:120](https://github.com/TanStack/ai/blob/main/packages/ai/src/stream-to-response.ts#L120)
+
+Convert a StreamChunk async iterable to a Response in Server-Sent Events format
+
+This creates a Response that emits chunks in SSE format:
+- Each chunk is prefixed with "data: "
+- Each chunk is followed by "\n\n"
+- Stream ends when the underlying iterable is exhausted (RUN_FINISHED is the terminal event)
+
+## Parameters
+
+### stream
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+AsyncIterable of StreamChunks from chat()
+
+### init?
+
+`ResponseInit` & `object`
+
+Optional Response initialization options (including `abortController`)
+
+## Returns
+
+`Response`
+
+Response in Server-Sent Events format
+
+## Example
+
+```typescript
+const stream = chat({ adapter: openaiText(), model: "gpt-4o", messages: [...] });
+return toServerSentEventsResponse(stream, { abortController });
+```
diff --git a/mintlify/ai/reference/functions/toServerSentEventsStream.md b/mintlify/ai/reference/functions/toServerSentEventsStream.md
new file mode 100644
index 000000000..418065c37
--- /dev/null
+++ b/mintlify/ai/reference/functions/toServerSentEventsStream.md
@@ -0,0 +1,39 @@
+---
+id: toServerSentEventsStream
+title: toServerSentEventsStream
+---
+
+# Function: toServerSentEventsStream()
+
+```ts
+function toServerSentEventsStream(stream, abortController?): ReadableStream<Uint8Array<ArrayBufferLike>>;
+```
+
+Defined in: [packages/ai/src/stream-to-response.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/stream-to-response.ts#L50)
+
+Convert a StreamChunk async iterable to a ReadableStream in Server-Sent Events format
+
+This creates a ReadableStream that emits chunks in SSE format:
+- Each chunk is prefixed with "data: "
+- Each chunk is followed by "\n\n"
+- Stream ends when the underlying iterable is exhausted (RUN_FINISHED is the terminal event)
+
+## Parameters
+
+### stream
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+AsyncIterable of StreamChunks from chat()
+
+### abortController?
+
+`AbortController`
+
+Optional AbortController to abort when stream is cancelled
+
+## Returns
+
+`ReadableStream`\&lt;`Uint8Array`\&lt;`ArrayBufferLike`\>\>
+
+ReadableStream in Server-Sent Events format
diff --git a/mintlify/ai/reference/functions/toolDefinition.md b/mintlify/ai/reference/functions/toolDefinition.md
new file mode 100644
index 000000000..c4dd2241d
--- /dev/null
+++ b/mintlify/ai/reference/functions/toolDefinition.md
@@ -0,0 +1,91 @@
+---
+id: toolDefinition
+title: toolDefinition
+---
+
+# Function: toolDefinition()
+
+```ts
+function toolDefinition<TInput, TOutput, TName>(config): ToolDefinition<TInput, TOutput, TName>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:191](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L191)
+
+Create an isomorphic tool definition that can be used directly or instantiated for server/client
+
+The definition contains all tool metadata (name, description, schemas) and can be:
+1. Used directly in chat() on the server (as a tool definition without execute)
+2. Instantiated as a server tool with .server()
+3. Instantiated as a client tool with .client()
+
+Supports any Standard JSON Schema compliant library (Zod v4+, ArkType, Valibot, etc.)
+or plain JSON Schema objects.
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+## Parameters
+
+### config
+
+[`ToolDefinitionConfig`](/ai/reference/interfaces/ToolDefinitionConfig)\&lt;`TInput`, `TOutput`, `TName`\>
+
+## Returns
+
+[`ToolDefinition`](/ai/reference/interfaces/ToolDefinition)\&lt;`TInput`, `TOutput`, `TName`\>
+
+## Example
+
+```typescript
+import { toolDefinition } from '@tanstack/ai';
+import { z } from 'zod';
+
+// Using Zod (natively supports Standard JSON Schema)
+const addToCartTool = toolDefinition({
+  name: 'addToCart',
+  description: 'Add a guitar to the shopping cart (requires approval)',
+  needsApproval: true,
+  inputSchema: z.object({
+    guitarId: z.string(),
+    quantity: z.number(),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    cartId: z.string(),
+    totalItems: z.number(),
+  }),
+});
+
+// Use directly in chat (server-side, no execute function)
+chat({
+  tools: [addToCartTool],
+  // ...
+});
+
+// Or create server-side implementation
+const addToCartServer = addToCartTool.server(async (args) => {
+  // args is typed as { guitarId: string; quantity: number }
+  return {
+    success: true,
+    cartId: 'CART_' + Date.now(),
+    totalItems: args.quantity,
+  };
+});
+
+// Or create client-side implementation
+const addToCartClient = addToCartTool.client(async (args) => {
+  // Client-specific logic (e.g., localStorage)
+  return { success: true, cartId: 'local', totalItems: 1 };
+});
+```
diff --git a/mintlify/ai/reference/functions/uiMessageToModelMessages.md b/mintlify/ai/reference/functions/uiMessageToModelMessages.md
new file mode 100644
index 000000000..803ec4175
--- /dev/null
+++ b/mintlify/ai/reference/functions/uiMessageToModelMessages.md
@@ -0,0 +1,47 @@
+---
+id: uiMessageToModelMessages
+title: uiMessageToModelMessages
+---
+
+# Function: uiMessageToModelMessages()
+
+```ts
+function uiMessageToModelMessages(uiMessage): ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/messages.ts:156](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/messages.ts#L156)
+
+Convert a UIMessage to ModelMessage(s)
+
+Walks the parts array IN ORDER to preserve the interleaving of text,
+tool calls, and tool results. This is critical for multi-round tool
+flows where the model generates text, calls a tool, gets the result,
+then generates more text and calls another tool.
+
+The output preserves the sequential structure:
+  text1 → toolCall1 → toolResult1 → text2 → toolCall2 → toolResult2
+becomes:
+  assistant: &#123;content: "text1", toolCalls: [toolCall1]&#125;
+  tool: toolResult1
+  assistant: &#123;content: "text2", toolCalls: [toolCall2]&#125;
+  tool: toolResult2
+
+## Parameters
+
+### uiMessage
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)
+
+The UIMessage to convert
+
+## Returns
+
+[`ModelMessage`](/ai/reference/interfaces/ModelMessage)\&lt;
+  \| `string`
+  \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)\&lt;`unknown`, `unknown`, `unknown`, `unknown`, `unknown`\>[]
+  \| `null`\>[]
+
+An array of ModelMessages preserving part ordering
diff --git a/mintlify/ai/reference/functions/uiMessagesToWire.md b/mintlify/ai/reference/functions/uiMessagesToWire.md
new file mode 100644
index 000000000..5a0265434
--- /dev/null
+++ b/mintlify/ai/reference/functions/uiMessagesToWire.md
@@ -0,0 +1,30 @@
+---
+id: uiMessagesToWire
+title: uiMessagesToWire
+---
+
+# Function: uiMessagesToWire()
+
+```ts
+function uiMessagesToWire(messages): WireMessage[];
+```
+
+Defined in: [packages/ai/src/utilities/ag-ui-wire.ts:47](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/ag-ui-wire.ts#L47)
+
+Serialize TanStack `UIMessage`s into the AG-UI `RunAgentInput.messages`
+wire shape. Each anchor (system/user/assistant) carries the canonical
+`parts` array verbatim plus AG-UI mirror fields (`content`, `toolCalls`)
+so AG-UI Zod parsing succeeds. Tool results and thinking parts on
+assistant messages are additionally emitted as fan-out
+`{role:'tool',...}` and `{role:'reasoning',...}` entries for strict
+AG-UI server consumers.
+
+## Parameters
+
+### messages
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>[]
+
+## Returns
+
+[`WireMessage`](/ai/reference/type-aliases/WireMessage)[]
diff --git a/mintlify/ai/reference/functions/untilFinishReason.md b/mintlify/ai/reference/functions/untilFinishReason.md
new file mode 100644
index 000000000..b2c3d7f9c
--- /dev/null
+++ b/mintlify/ai/reference/functions/untilFinishReason.md
@@ -0,0 +1,40 @@
+---
+id: untilFinishReason
+title: untilFinishReason
+---
+
+# Function: untilFinishReason()
+
+```ts
+function untilFinishReason(stopReasons): AgentLoopStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/agent-loop-strategies.ts:41](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/agent-loop-strategies.ts#L41)
+
+Creates a strategy that continues until a specific finish reason is encountered
+
+## Parameters
+
+### stopReasons
+
+`string`[]
+
+Finish reasons that should stop the loop
+
+## Returns
+
+[`AgentLoopStrategy`](/ai/reference/type-aliases/AgentLoopStrategy)
+
+AgentLoopStrategy that stops on specific finish reasons
+
+## Example
+
+```typescript
+const stream = chat({
+  adapter: openaiText(),
+  model: "gpt-4o",
+  messages: [...],
+  tools: [weatherTool],
+  agentLoopStrategy: untilFinishReason(["stop", "length"]),
+});
+```
diff --git a/mintlify/ai/reference/index.md b/mintlify/ai/reference/index.md
new file mode 100644
index 000000000..f3d2476e4
--- /dev/null
+++ b/mintlify/ai/reference/index.md
@@ -0,0 +1,298 @@
+---
+id: "@tanstack/ai"
+title: "@tanstack/ai"
+---
+
+# @tanstack/ai
+
+## Classes
+
+- [BatchStrategy](/ai/reference/classes/BatchStrategy)
+- [CompositeStrategy](/ai/reference/classes/CompositeStrategy)
+- [ConsoleLogger](/ai/reference/classes/ConsoleLogger)
+- [ImmediateStrategy](/ai/reference/classes/ImmediateStrategy)
+- [MCPDuplicateToolNameError](/ai/reference/classes/MCPDuplicateToolNameError)
+- [PartialJSONParser](/ai/reference/classes/PartialJSONParser)
+- [PunctuationStrategy](/ai/reference/classes/PunctuationStrategy)
+- [StandardSchemaValidationError](/ai/reference/classes/StandardSchemaValidationError)
+- [StreamProcessor](/ai/reference/classes/StreamProcessor)
+- [ToolCallManager](/ai/reference/classes/ToolCallManager)
+- [WordBoundaryStrategy](/ai/reference/classes/WordBoundaryStrategy)
+
+## Interfaces
+
+- [AbortInfo](/ai/reference/interfaces/AbortInfo)
+- [AfterToolCallInfo](/ai/reference/interfaces/AfterToolCallInfo)
+- [AgentLoopState](/ai/reference/interfaces/AgentLoopState)
+- [ApprovalRequestedEvent](/ai/reference/interfaces/ApprovalRequestedEvent)
+- [AudioAdapter](/ai/reference/interfaces/AudioAdapter)
+- [AudioGenerationOptions](/ai/reference/interfaces/AudioGenerationOptions)
+- [AudioGenerationResult](/ai/reference/interfaces/AudioGenerationResult)
+- [AudioPart](/ai/reference/interfaces/AudioPart)
+- [AudioVisualization](/ai/reference/interfaces/AudioVisualization)
+- [BaseAGUIEvent](/ai/reference/interfaces/BaseAGUIEvent)
+- [BaseUsageInput](/ai/reference/interfaces/BaseUsageInput)
+- [CapabilityContext](/ai/reference/interfaces/CapabilityContext)
+- [CapabilityGetter](/ai/reference/interfaces/CapabilityGetter)
+- [ChatMCPOptions](/ai/reference/interfaces/ChatMCPOptions)
+- [ChatMiddleware](/ai/reference/interfaces/ChatMiddleware)
+- [ChatMiddlewareConfig](/ai/reference/interfaces/ChatMiddlewareConfig)
+- [ChatMiddlewareContext](/ai/reference/interfaces/ChatMiddlewareContext)
+- [ChatSandboxHooks](/ai/reference/interfaces/ChatSandboxHooks)
+- [ChunkRecording](/ai/reference/interfaces/ChunkRecording)
+- [ChunkStrategy](/ai/reference/interfaces/ChunkStrategy)
+- [ClientTool](/ai/reference/interfaces/ClientTool)
+- [ContentPartDataSource](/ai/reference/interfaces/ContentPartDataSource)
+- [ContentPartUrlSource](/ai/reference/interfaces/ContentPartUrlSource)
+- [CustomEvent](/ai/reference/interfaces/CustomEvent)
+- [DebugCategories](/ai/reference/interfaces/DebugCategories)
+- [DebugConfig](/ai/reference/interfaces/DebugConfig)
+- [DefaultMessageMetadataByModality](/ai/reference/interfaces/DefaultMessageMetadataByModality)
+- [DefinedChatMiddleware](/ai/reference/interfaces/DefinedChatMiddleware)
+- [DocumentPart](/ai/reference/interfaces/DocumentPart)
+- [ErrorInfo](/ai/reference/interfaces/ErrorInfo)
+- [ExtendedModelDef](/ai/reference/interfaces/ExtendedModelDef)
+- [FinishInfo](/ai/reference/interfaces/FinishInfo)
+- [GenerationAbortInfo](/ai/reference/interfaces/GenerationAbortInfo)
+- [GenerationErrorInfo](/ai/reference/interfaces/GenerationErrorInfo)
+- [GenerationFinishInfo](/ai/reference/interfaces/GenerationFinishInfo)
+- [GenerationMiddleware](/ai/reference/interfaces/GenerationMiddleware)
+- [GenerationMiddlewareContext](/ai/reference/interfaces/GenerationMiddlewareContext)
+- [GenerationUsageInfo](/ai/reference/interfaces/GenerationUsageInfo)
+- [ImageAdapter](/ai/reference/interfaces/ImageAdapter)
+- [ImageGenerationOptions](/ai/reference/interfaces/ImageGenerationOptions)
+- [ImageGenerationResult](/ai/reference/interfaces/ImageGenerationResult)
+- [ImagePart](/ai/reference/interfaces/ImagePart)
+- [InternalToolCallState](/ai/reference/interfaces/InternalToolCallState)
+- [IterationInfo](/ai/reference/interfaces/IterationInfo)
+- [JSONParser](/ai/reference/interfaces/JSONParser)
+- [JSONSchema](/ai/reference/interfaces/JSONSchema)
+- [LazyToolsConfig](/ai/reference/interfaces/LazyToolsConfig)
+- [Logger](/ai/reference/interfaces/Logger)
+- [MCPToolSource](/ai/reference/interfaces/MCPToolSource)
+- [MediaInputMetadata](/ai/reference/interfaces/MediaInputMetadata)
+- [MessagesSnapshotEvent](/ai/reference/interfaces/MessagesSnapshotEvent)
+- [ModelCapabilities](/ai/reference/interfaces/ModelCapabilities)
+- [ModelMessage](/ai/reference/interfaces/ModelMessage)
+- [NormalizedSystemPrompt](/ai/reference/interfaces/NormalizedSystemPrompt)
+- [ProcessorResult](/ai/reference/interfaces/ProcessorResult)
+- [ProcessorState](/ai/reference/interfaces/ProcessorState)
+- [ProviderExecutedToolMetadata](/ai/reference/interfaces/ProviderExecutedToolMetadata)
+- [ProviderTool](/ai/reference/interfaces/ProviderTool)
+- [RealtimeAdapter](/ai/reference/interfaces/RealtimeAdapter)
+- [RealtimeAudioPart](/ai/reference/interfaces/RealtimeAudioPart)
+- [RealtimeConnection](/ai/reference/interfaces/RealtimeConnection)
+- [RealtimeError](/ai/reference/interfaces/RealtimeError)
+- [RealtimeEventPayloads](/ai/reference/interfaces/RealtimeEventPayloads)
+- [RealtimeImagePart](/ai/reference/interfaces/RealtimeImagePart)
+- [RealtimeMessage](/ai/reference/interfaces/RealtimeMessage)
+- [RealtimeSessionConfig](/ai/reference/interfaces/RealtimeSessionConfig)
+- [RealtimeTextPart](/ai/reference/interfaces/RealtimeTextPart)
+- [RealtimeToken](/ai/reference/interfaces/RealtimeToken)
+- [RealtimeTokenAdapter](/ai/reference/interfaces/RealtimeTokenAdapter)
+- [RealtimeTokenOptions](/ai/reference/interfaces/RealtimeTokenOptions)
+- [RealtimeToolCallPart](/ai/reference/interfaces/RealtimeToolCallPart)
+- [RealtimeToolResultPart](/ai/reference/interfaces/RealtimeToolResultPart)
+- [ReasoningEncryptedValueEvent](/ai/reference/interfaces/ReasoningEncryptedValueEvent)
+- [ReasoningEndEvent](/ai/reference/interfaces/ReasoningEndEvent)
+- [ReasoningMessageContentEvent](/ai/reference/interfaces/ReasoningMessageContentEvent)
+- [ReasoningMessageEndEvent](/ai/reference/interfaces/ReasoningMessageEndEvent)
+- [ReasoningMessageStartEvent](/ai/reference/interfaces/ReasoningMessageStartEvent)
+- [ReasoningStartEvent](/ai/reference/interfaces/ReasoningStartEvent)
+- [ResolvedMediaPrompt](/ai/reference/interfaces/ResolvedMediaPrompt)
+- [ResponseFormat](/ai/reference/interfaces/ResponseFormat)
+- [RunErrorEvent](/ai/reference/interfaces/RunErrorEvent)
+- [RunFinishedEvent](/ai/reference/interfaces/RunFinishedEvent)
+- [RunStartedEvent](/ai/reference/interfaces/RunStartedEvent)
+- [SandboxFileEvent](/ai/reference/interfaces/SandboxFileEvent)
+- [ServerTool](/ai/reference/interfaces/ServerTool)
+- [StateDeltaEvent](/ai/reference/interfaces/StateDeltaEvent)
+- [StateSnapshotEvent](/ai/reference/interfaces/StateSnapshotEvent)
+- [StepFinishedEvent](/ai/reference/interfaces/StepFinishedEvent)
+- [StepStartedEvent](/ai/reference/interfaces/StepStartedEvent)
+- [StreamProcessorEvents](/ai/reference/interfaces/StreamProcessorEvents)
+- [StreamProcessorOptions](/ai/reference/interfaces/StreamProcessorOptions)
+- [StructuredOutputCompleteEvent](/ai/reference/interfaces/StructuredOutputCompleteEvent)
+- [StructuredOutputMiddlewareConfig](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)
+- [StructuredOutputPart](/ai/reference/interfaces/StructuredOutputPart)
+- [StructuredOutputStartEvent](/ai/reference/interfaces/StructuredOutputStartEvent)
+- [SummarizationOptions](/ai/reference/interfaces/SummarizationOptions)
+- [SummarizationResult](/ai/reference/interfaces/SummarizationResult)
+- [SummarizeAdapter](/ai/reference/interfaces/SummarizeAdapter)
+- [TextAdapter](/ai/reference/interfaces/TextAdapter)
+- [TextCompletionChunk](/ai/reference/interfaces/TextCompletionChunk)
+- [TextMessageContentEvent](/ai/reference/interfaces/TextMessageContentEvent)
+- [TextMessageEndEvent](/ai/reference/interfaces/TextMessageEndEvent)
+- [TextMessageStartEvent](/ai/reference/interfaces/TextMessageStartEvent)
+- [TextOptions](/ai/reference/interfaces/TextOptions)
+- [TextPart](/ai/reference/interfaces/TextPart)
+- [ThinkingPart](/ai/reference/interfaces/ThinkingPart)
+- [Tool](/ai/reference/interfaces/Tool)
+- [ToolCall](/ai/reference/interfaces/ToolCall)
+- [ToolCallArgsEvent](/ai/reference/interfaces/ToolCallArgsEvent)
+- [ToolCallEndEvent](/ai/reference/interfaces/ToolCallEndEvent)
+- [ToolCallHookContext](/ai/reference/interfaces/ToolCallHookContext)
+- [ToolCallPart](/ai/reference/interfaces/ToolCallPart)
+- [ToolCallResultEvent](/ai/reference/interfaces/ToolCallResultEvent)
+- [ToolCallStartEvent](/ai/reference/interfaces/ToolCallStartEvent)
+- [ToolConfig](/ai/reference/interfaces/ToolConfig)
+- [ToolDefinition](/ai/reference/interfaces/ToolDefinition)
+- [ToolDefinitionConfig](/ai/reference/interfaces/ToolDefinitionConfig)
+- [ToolDefinitionInstance](/ai/reference/interfaces/ToolDefinitionInstance)
+- [ToolInputAvailableEvent](/ai/reference/interfaces/ToolInputAvailableEvent)
+- [ToolPhaseCompleteInfo](/ai/reference/interfaces/ToolPhaseCompleteInfo)
+- [ToolRegistry](/ai/reference/interfaces/ToolRegistry)
+- [ToolResultPart](/ai/reference/interfaces/ToolResultPart)
+- [TranscriptionAdapter](/ai/reference/interfaces/TranscriptionAdapter)
+- [TranscriptionOptions](/ai/reference/interfaces/TranscriptionOptions)
+- [TranscriptionResult](/ai/reference/interfaces/TranscriptionResult)
+- [TranscriptionSegment](/ai/reference/interfaces/TranscriptionSegment)
+- [TranscriptionWord](/ai/reference/interfaces/TranscriptionWord)
+- [TTSAdapter](/ai/reference/interfaces/TTSAdapter)
+- [TTSOptions](/ai/reference/interfaces/TTSOptions)
+- [TTSResult](/ai/reference/interfaces/TTSResult)
+- [UIMessage](/ai/reference/interfaces/UIMessage)
+- [UIResourceEvent](/ai/reference/interfaces/UIResourceEvent)
+- [UIResourcePart](/ai/reference/interfaces/UIResourcePart)
+- [UsageInfo](/ai/reference/interfaces/UsageInfo)
+- [VADConfig](/ai/reference/interfaces/VADConfig)
+- [VideoAdapter](/ai/reference/interfaces/VideoAdapter)
+- [VideoGenerationOptions](/ai/reference/interfaces/VideoGenerationOptions)
+- [VideoJobResult](/ai/reference/interfaces/VideoJobResult)
+- [VideoPart](/ai/reference/interfaces/VideoPart)
+- [VideoStatusResult](/ai/reference/interfaces/VideoStatusResult)
+- [VideoUrlResult](/ai/reference/interfaces/VideoUrlResult)
+
+## Type Aliases
+
+- [AgentLoopStrategy](/ai/reference/type-aliases/AgentLoopStrategy)
+- [AGUIEvent](/ai/reference/type-aliases/AGUIEvent)
+- [~~AGUIEventType~~](/ai/reference/type-aliases/AGUIEventType)
+- [AIAdapter](/ai/reference/type-aliases/AIAdapter)
+- [AnyAudioAdapter](/ai/reference/type-aliases/AnyAudioAdapter)
+- [AnyChatMiddleware](/ai/reference/type-aliases/AnyChatMiddleware)
+- [AnyClientTool](/ai/reference/type-aliases/AnyClientTool)
+- [AnyGenerationMiddleware](/ai/reference/type-aliases/AnyGenerationMiddleware)
+- [AnyImageAdapter](/ai/reference/type-aliases/AnyImageAdapter)
+- [AnySummarizeAdapter](/ai/reference/type-aliases/AnySummarizeAdapter)
+- [AnyTextAdapter](/ai/reference/type-aliases/AnyTextAdapter)
+- [AnyTool](/ai/reference/type-aliases/AnyTool)
+- [AnyTranscriptionAdapter](/ai/reference/type-aliases/AnyTranscriptionAdapter)
+- [AnyTTSAdapter](/ai/reference/type-aliases/AnyTTSAdapter)
+- [AnyVideoAdapter](/ai/reference/type-aliases/AnyVideoAdapter)
+- [BeforeToolCallDecision](/ai/reference/type-aliases/BeforeToolCallDecision)
+- [Capability](/ai/reference/type-aliases/Capability)
+- [CapabilityHandle](/ai/reference/type-aliases/CapabilityHandle)
+- [CapabilityProvider](/ai/reference/type-aliases/CapabilityProvider)
+- [ChatMiddlewarePhase](/ai/reference/type-aliases/ChatMiddlewarePhase)
+- [ConstrainedContent](/ai/reference/type-aliases/ConstrainedContent)
+- [ConstrainedModelMessage](/ai/reference/type-aliases/ConstrainedModelMessage)
+- [ContentPart](/ai/reference/type-aliases/ContentPart)
+- [ContentPartForInputModalitiesTypes](/ai/reference/type-aliases/ContentPartForInputModalitiesTypes)
+- [ContentPartSource](/ai/reference/type-aliases/ContentPartSource)
+- [DebugOption](/ai/reference/type-aliases/DebugOption)
+- [DeepPartial](/ai/reference/type-aliases/DeepPartial)
+- [GeneratedAudio](/ai/reference/type-aliases/GeneratedAudio)
+- [GeneratedImage](/ai/reference/type-aliases/GeneratedImage)
+- [GeneratedMediaSource](/ai/reference/type-aliases/GeneratedMediaSource)
+- [GenerationActivity](/ai/reference/type-aliases/GenerationActivity)
+- [InferSchemaType](/ai/reference/type-aliases/InferSchemaType)
+- [InferToolInput](/ai/reference/type-aliases/InferToolInput)
+- [InferToolName](/ai/reference/type-aliases/InferToolName)
+- [InferToolOutput](/ai/reference/type-aliases/InferToolOutput)
+- [InputModalitiesTypes](/ai/reference/type-aliases/InputModalitiesTypes)
+- [MCPConnectionPolicy](/ai/reference/type-aliases/MCPConnectionPolicy)
+- [MediaInputRole](/ai/reference/type-aliases/MediaInputRole)
+- [MediaPrompt](/ai/reference/type-aliases/MediaPrompt)
+- [MediaPromptFor](/ai/reference/type-aliases/MediaPromptFor)
+- [MediaPromptModality](/ai/reference/type-aliases/MediaPromptModality)
+- [MediaPromptPart](/ai/reference/type-aliases/MediaPromptPart)
+- [MessagePart](/ai/reference/type-aliases/MessagePart)
+- [ModalitiesArrayToUnion](/ai/reference/type-aliases/ModalitiesArrayToUnion)
+- [Modality](/ai/reference/type-aliases/Modality)
+- [ModelInputModalitiesByName](/ai/reference/type-aliases/ModelInputModalitiesByName)
+- [RealtimeErrorCode](/ai/reference/type-aliases/RealtimeErrorCode)
+- [RealtimeEvent](/ai/reference/type-aliases/RealtimeEvent)
+- [RealtimeEventHandler](/ai/reference/type-aliases/RealtimeEventHandler)
+- [RealtimeMessagePart](/ai/reference/type-aliases/RealtimeMessagePart)
+- [RealtimeMode](/ai/reference/type-aliases/RealtimeMode)
+- [RealtimeStatus](/ai/reference/type-aliases/RealtimeStatus)
+- [SchemaInput](/ai/reference/type-aliases/SchemaInput)
+- [StreamChunk](/ai/reference/type-aliases/StreamChunk)
+- [~~StreamChunkType~~](/ai/reference/type-aliases/StreamChunkType)
+- [StructuredOutputStream](/ai/reference/type-aliases/StructuredOutputStream)
+- [SystemPrompt](/ai/reference/type-aliases/SystemPrompt)
+- [ToolCallState](/ai/reference/type-aliases/ToolCallState)
+- [ToolExecuteFunction](/ai/reference/type-aliases/ToolExecuteFunction)
+- [ToolExecutionContext](/ai/reference/type-aliases/ToolExecutionContext)
+- [ToolOutputState](/ai/reference/type-aliases/ToolOutputState)
+- [ToolResultState](/ai/reference/type-aliases/ToolResultState)
+- [~~UsageTotals~~](/ai/reference/type-aliases/UsageTotals)
+- [WireMessage](/ai/reference/type-aliases/WireMessage)
+
+## Variables
+
+- [defaultJSONParser](/ai/reference/variables/defaultJSONParser)
+- [DISCOVERY\_TOOL\_NAME](/ai/reference/variables/DISCOVERY_TOOL_NAME)
+
+## Functions
+
+- [brandProviderTool](/ai/reference/functions/brandProviderTool)
+- [buildBaseUsage](/ai/reference/functions/buildBaseUsage)
+- [chat](/ai/reference/functions/chat)
+- [chatParamsFromRequest](/ai/reference/functions/chatParamsFromRequest)
+- [chatParamsFromRequestBody](/ai/reference/functions/chatParamsFromRequestBody)
+- [combineStrategies](/ai/reference/functions/combineStrategies)
+- [convertMessagesToModelMessages](/ai/reference/functions/convertMessagesToModelMessages)
+- [convertSchemaToJsonSchema](/ai/reference/functions/convertSchemaToJsonSchema)
+- [createAudioOptions](/ai/reference/functions/createAudioOptions)
+- [createCapability](/ai/reference/functions/createCapability)
+- [createChatMiddleware](/ai/reference/functions/createChatMiddleware)
+- [createChatOptions](/ai/reference/functions/createChatOptions)
+- [createFrozenRegistry](/ai/reference/functions/createFrozenRegistry)
+- [createImageOptions](/ai/reference/functions/createImageOptions)
+- [createModel](/ai/reference/functions/createModel)
+- [createReplayStream](/ai/reference/functions/createReplayStream)
+- [createSpeechOptions](/ai/reference/functions/createSpeechOptions)
+- [createSummarizeOptions](/ai/reference/functions/createSummarizeOptions)
+- [createToolRegistry](/ai/reference/functions/createToolRegistry)
+- [createTranscriptionOptions](/ai/reference/functions/createTranscriptionOptions)
+- [createVideoOptions](/ai/reference/functions/createVideoOptions)
+- [defineChatMiddleware](/ai/reference/functions/defineChatMiddleware)
+- [detectImageMimeType](/ai/reference/functions/detectImageMimeType)
+- [extendAdapter](/ai/reference/functions/extendAdapter)
+- [firstSentence](/ai/reference/functions/firstSentence)
+- [generateAudio](/ai/reference/functions/generateAudio)
+- [generateImage](/ai/reference/functions/generateImage)
+- [generateMessageId](/ai/reference/functions/generateMessageId)
+- [generateSpeech](/ai/reference/functions/generateSpeech)
+- [generateTranscription](/ai/reference/functions/generateTranscription)
+- [generateVideo](/ai/reference/functions/generateVideo)
+- [getProviderExecutedMetadata](/ai/reference/functions/getProviderExecutedMetadata)
+- [getVideoJobStatus](/ai/reference/functions/getVideoJobStatus)
+- [isContentPart](/ai/reference/functions/isContentPart)
+- [isContentPartArray](/ai/reference/functions/isContentPartArray)
+- [isProviderExecutedToolCall](/ai/reference/functions/isProviderExecutedToolCall)
+- [isStandardSchema](/ai/reference/functions/isStandardSchema)
+- [maxIterations](/ai/reference/functions/maxIterations)
+- [mergeAgentTools](/ai/reference/functions/mergeAgentTools)
+- [modelMessagesToUIMessages](/ai/reference/functions/modelMessagesToUIMessages)
+- [modelMessageToUIMessage](/ai/reference/functions/modelMessageToUIMessage)
+- [normalizeSystemPrompts](/ai/reference/functions/normalizeSystemPrompts)
+- [normalizeToolResult](/ai/reference/functions/normalizeToolResult)
+- [normalizeToUIMessage](/ai/reference/functions/normalizeToUIMessage)
+- [parsePartialJSON](/ai/reference/functions/parsePartialJSON)
+- [parseWithStandardSchema](/ai/reference/functions/parseWithStandardSchema)
+- [realtimeToken](/ai/reference/functions/realtimeToken)
+- [renderLazyCatalogEntry](/ai/reference/functions/renderLazyCatalogEntry)
+- [resolveMediaPrompt](/ai/reference/functions/resolveMediaPrompt)
+- [streamToText](/ai/reference/functions/streamToText)
+- [summarize](/ai/reference/functions/summarize)
+- [toHttpResponse](/ai/reference/functions/toHttpResponse)
+- [toHttpStream](/ai/reference/functions/toHttpStream)
+- [toolDefinition](/ai/reference/functions/toolDefinition)
+- [toServerSentEventsResponse](/ai/reference/functions/toServerSentEventsResponse)
+- [toServerSentEventsStream](/ai/reference/functions/toServerSentEventsStream)
+- [uiMessagesToWire](/ai/reference/functions/uiMessagesToWire)
+- [uiMessageToModelMessages](/ai/reference/functions/uiMessageToModelMessages)
+- [untilFinishReason](/ai/reference/functions/untilFinishReason)
diff --git a/mintlify/ai/reference/interfaces/AIAdapter.md b/mintlify/ai/reference/interfaces/AIAdapter.md
new file mode 100644
index 000000000..a11fef464
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AIAdapter.md
@@ -0,0 +1,12 @@
+---
+title: "AIAdapter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/AIAdapter)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/AIAdapterConfig.md b/mintlify/ai/reference/interfaces/AIAdapterConfig.md
new file mode 100644
index 000000000..9d2e3cbbe
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AIAdapterConfig.md
@@ -0,0 +1,12 @@
+---
+title: "AIAdapterConfig"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/AIAdapterConfig)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/AbortInfo.md b/mintlify/ai/reference/interfaces/AbortInfo.md
new file mode 100644
index 000000000..f2ed377c5
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AbortInfo.md
@@ -0,0 +1,34 @@
+---
+id: AbortInfo
+title: AbortInfo
+---
+
+# Interface: AbortInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:358](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L358)
+
+Information passed to onAbort.
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:362](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L362)
+
+Duration until abort in milliseconds
+
+***
+
+### reason?
+
+```ts
+optional reason: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:360](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L360)
+
+The reason for the abort, if provided
diff --git a/mintlify/ai/reference/interfaces/AfterToolCallInfo.md b/mintlify/ai/reference/interfaces/AfterToolCallInfo.md
new file mode 100644
index 000000000..827703f37
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AfterToolCallInfo.md
@@ -0,0 +1,106 @@
+---
+id: AfterToolCallInfo
+title: AfterToolCallInfo
+---
+
+# Interface: AfterToolCallInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:258](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L258)
+
+Outcome information provided to onAfterToolCall.
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:270](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L270)
+
+Duration of tool execution in milliseconds
+
+***
+
+### error?
+
+```ts
+optional error: unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:273](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L273)
+
+***
+
+### ok
+
+```ts
+ok: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:268](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L268)
+
+Whether the execution succeeded
+
+***
+
+### result?
+
+```ts
+optional result: unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:272](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L272)
+
+The result (if ok) or error (if not ok)
+
+***
+
+### tool
+
+```ts
+tool: 
+  | Tool<SchemaInput, SchemaInput, string, unknown>
+  | undefined;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:262](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L262)
+
+The resolved tool definition
+
+***
+
+### toolCall
+
+```ts
+toolCall: ToolCall;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:260](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L260)
+
+The tool call that was executed
+
+***
+
+### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:266](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L266)
+
+ID of the tool call
+
+***
+
+### toolName
+
+```ts
+toolName: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:264](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L264)
+
+Name of the tool
diff --git a/mintlify/ai/reference/interfaces/AgentLoopState.md b/mintlify/ai/reference/interfaces/AgentLoopState.md
new file mode 100644
index 000000000..961393756
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AgentLoopState.md
@@ -0,0 +1,49 @@
+---
+id: AgentLoopState
+title: AgentLoopState
+---
+
+# Interface: AgentLoopState
+
+Defined in: [packages/ai/src/types.ts:824](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L824)
+
+State passed to agent loop strategy for determining whether to continue
+
+## Properties
+
+### finishReason
+
+```ts
+finishReason: string | null;
+```
+
+Defined in: [packages/ai/src/types.ts:830](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L830)
+
+Finish reason from the last response
+
+***
+
+### iterationCount
+
+```ts
+iterationCount: number;
+```
+
+Defined in: [packages/ai/src/types.ts:826](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L826)
+
+Current iteration count (0-indexed)
+
+***
+
+### messages
+
+```ts
+messages: ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/types.ts:828](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L828)
+
+Current messages array
diff --git a/mintlify/ai/reference/interfaces/ApprovalRequestedEvent.md b/mintlify/ai/reference/interfaces/ApprovalRequestedEvent.md
new file mode 100644
index 000000000..7aca64677
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ApprovalRequestedEvent.md
@@ -0,0 +1,108 @@
+---
+id: ApprovalRequestedEvent
+title: ApprovalRequestedEvent
+---
+
+# Interface: ApprovalRequestedEvent
+
+Defined in: [packages/ai/src/types.ts:1346](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1346)
+
+Emitted when a server tool requires approval before execution. The agent
+loop yields this and pauses — `structured-output.complete` will not fire
+for that run. The shape is fixed by the orchestrator's tool-approval flow
+(the agent-loop branch of `runStreamingStructuredOutputImpl` in
+`activities/chat/index.ts` forwards CUSTOM events from `TextEngine.run()`).
+
+## Extends
+
+- [`CustomEvent`](/ai/reference/interfaces/CustomEvent)
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
+
+#### Inherited from
+
+[`CustomEvent`](/ai/reference/interfaces/CustomEvent).[`model`](/ai/reference/interfaces/CustomEvent#model)
+
+***
+
+### name
+
+```ts
+name: "approval-requested";
+```
+
+Defined in: [packages/ai/src/types.ts:1347](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1347)
+
+#### Overrides
+
+```ts
+CustomEvent.name
+```
+
+***
+
+### value
+
+```ts
+value: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1348](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1348)
+
+#### approval
+
+```ts
+approval: object;
+```
+
+##### approval.id
+
+```ts
+id: string;
+```
+
+##### approval.needsApproval
+
+```ts
+needsApproval: true;
+```
+
+#### input
+
+```ts
+input: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+#### Overrides
+
+```ts
+CustomEvent.value
+```
diff --git a/mintlify/ai/reference/interfaces/ApprovalRequestedStreamChunk.md b/mintlify/ai/reference/interfaces/ApprovalRequestedStreamChunk.md
new file mode 100644
index 000000000..195a0fe7f
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ApprovalRequestedStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ApprovalRequestedStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ApprovalRequestedStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/AudioAdapter.md b/mintlify/ai/reference/interfaces/AudioAdapter.md
new file mode 100644
index 000000000..c8d1d40fa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AudioAdapter.md
@@ -0,0 +1,105 @@
+---
+id: AudioAdapter
+title: AudioAdapter
+---
+
+# Interface: AudioAdapter\&lt;TModel, TProviderOptions\>
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L24)
+
+Audio generation adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'fal-ai/diffrhythm')
+- TProviderOptions: Provider-specific options (already resolved)
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L38)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### generateAudio()
+
+```ts
+generateAudio: (options) => Promise<AudioGenerationResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:45](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L45)
+
+Generate audio from a text prompt
+
+#### Parameters
+
+##### options
+
+[`AudioGenerationOptions`](/ai/reference/interfaces/AudioGenerationOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`Promise`\&lt;[`AudioGenerationResult`](/ai/reference/interfaces/AudioGenerationResult)\>
+
+***
+
+### kind
+
+```ts
+readonly kind: "audio";
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L29)
+
+Discriminator for adapter kind - used to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L33)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L31)
+
+Adapter name identifier
diff --git a/mintlify/ai/reference/interfaces/AudioGenerationOptions.md b/mintlify/ai/reference/interfaces/AudioGenerationOptions.md
new file mode 100644
index 000000000..8c31f41c8
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AudioGenerationOptions.md
@@ -0,0 +1,79 @@
+---
+id: AudioGenerationOptions
+title: AudioGenerationOptions
+---
+
+# Interface: AudioGenerationOptions\&lt;TProviderOptions\>
+
+Defined in: [packages/ai/src/types.ts:1742](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1742)
+
+Options for audio generation (music, sound effects, etc.).
+These are the common options supported across providers.
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `object`
+
+## Properties
+
+### duration?
+
+```ts
+optional duration: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1750](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1750)
+
+Desired duration in seconds
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1758](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1758)
+
+Internal logger threaded from the generateAudio() entry point. Adapters
+must call logger.request() before the SDK call and logger.errors() in
+catch blocks.
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1746](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1746)
+
+The model to use for audio generation
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1752](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1752)
+
+Model-specific options for audio generation
+
+***
+
+### prompt
+
+```ts
+prompt: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1748](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1748)
+
+Text description of the desired audio
diff --git a/mintlify/ai/reference/interfaces/AudioGenerationResult.md b/mintlify/ai/reference/interfaces/AudioGenerationResult.md
new file mode 100644
index 000000000..545099c52
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AudioGenerationResult.md
@@ -0,0 +1,58 @@
+---
+id: AudioGenerationResult
+title: AudioGenerationResult
+---
+
+# Interface: AudioGenerationResult
+
+Defined in: [packages/ai/src/types.ts:1774](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1774)
+
+Result of audio generation
+
+## Properties
+
+### audio
+
+```ts
+audio: GeneratedAudio;
+```
+
+Defined in: [packages/ai/src/types.ts:1780](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1780)
+
+The generated audio
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1776](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1776)
+
+Unique identifier for the generation
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1778](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1778)
+
+Model used for generation
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1782](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1782)
+
+Token usage information (if available)
diff --git a/mintlify/ai/reference/interfaces/AudioPart.md b/mintlify/ai/reference/interfaces/AudioPart.md
new file mode 100644
index 000000000..ee6f2bfe9
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AudioPart.md
@@ -0,0 +1,52 @@
+---
+id: AudioPart
+title: AudioPart
+---
+
+# Interface: AudioPart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:260](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L260)
+
+Audio content part for multimodal messages.
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+Provider-specific metadata type
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:265](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L265)
+
+Provider-specific metadata (e.g., format, sample rate)
+
+***
+
+### source
+
+```ts
+source: ContentPartSource;
+```
+
+Defined in: [packages/ai/src/types.ts:263](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L263)
+
+Source of the audio content
+
+***
+
+### type
+
+```ts
+type: "audio";
+```
+
+Defined in: [packages/ai/src/types.ts:261](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L261)
diff --git a/mintlify/ai/reference/interfaces/AudioVisualization.md b/mintlify/ai/reference/interfaces/AudioVisualization.md
new file mode 100644
index 000000000..0286b45df
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/AudioVisualization.md
@@ -0,0 +1,178 @@
+---
+id: AudioVisualization
+title: AudioVisualization
+---
+
+# Interface: AudioVisualization
+
+Defined in: [packages/ai/src/realtime/types.ts:202](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L202)
+
+Interface for accessing audio visualization data
+
+## Properties
+
+### getInputFrequencyData()
+
+```ts
+getInputFrequencyData: () => Uint8Array;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:209](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L209)
+
+Get frequency data for input audio visualization
+
+#### Returns
+
+`Uint8Array`
+
+***
+
+### getInputTimeDomainData()
+
+```ts
+getInputTimeDomainData: () => Uint8Array;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:214](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L214)
+
+Get time domain data for input waveform
+
+#### Returns
+
+`Uint8Array`
+
+***
+
+### getOutputFrequencyData()
+
+```ts
+getOutputFrequencyData: () => Uint8Array;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:211](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L211)
+
+Get frequency data for output audio visualization
+
+#### Returns
+
+`Uint8Array`
+
+***
+
+### getOutputTimeDomainData()
+
+```ts
+getOutputTimeDomainData: () => Uint8Array;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:216](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L216)
+
+Get time domain data for output waveform
+
+#### Returns
+
+`Uint8Array`
+
+***
+
+### inputLevel
+
+```ts
+readonly inputLevel: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:204](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L204)
+
+Input volume level (0-1 normalized)
+
+***
+
+### inputSampleRate
+
+```ts
+readonly inputSampleRate: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:219](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L219)
+
+Input sample rate
+
+***
+
+### onInputAudio()?
+
+```ts
+optional onInputAudio: (callback) => () => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:224](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L224)
+
+Subscribe to raw input audio samples
+
+#### Parameters
+
+##### callback
+
+(`samples`, `sampleRate`) => `void`
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### onOutputAudio()?
+
+```ts
+optional onOutputAudio: (callback) => () => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:228](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L228)
+
+Subscribe to raw output audio samples
+
+#### Parameters
+
+##### callback
+
+(`samples`, `sampleRate`) => `void`
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### outputLevel
+
+```ts
+readonly outputLevel: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:206](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L206)
+
+Output volume level (0-1 normalized)
+
+***
+
+### outputSampleRate
+
+```ts
+readonly outputSampleRate: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:221](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L221)
+
+Output sample rate
diff --git a/mintlify/ai/reference/interfaces/BaseAGUIEvent.md b/mintlify/ai/reference/interfaces/BaseAGUIEvent.md
new file mode 100644
index 000000000..4ade7f29c
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/BaseAGUIEvent.md
@@ -0,0 +1,36 @@
+---
+id: BaseAGUIEvent
+title: BaseAGUIEvent
+---
+
+# Interface: BaseAGUIEvent
+
+Defined in: [packages/ai/src/types.ts:1024](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1024)
+
+Base structure for AG-UI events.
+Extends @ag-ui/core BaseEvent with TanStack AI additions.
+
+@ag-ui/core provides: `type`, `timestamp?`, `rawEvent?`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `BaseEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1026](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1026)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/BaseStreamChunk.md b/mintlify/ai/reference/interfaces/BaseStreamChunk.md
new file mode 100644
index 000000000..9b73810d7
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/BaseStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "BaseStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/BaseStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/BaseUsageInput.md b/mintlify/ai/reference/interfaces/BaseUsageInput.md
new file mode 100644
index 000000000..f16c8d1e7
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/BaseUsageInput.md
@@ -0,0 +1,47 @@
+---
+id: BaseUsageInput
+title: BaseUsageInput
+---
+
+# Interface: BaseUsageInput
+
+Defined in: [packages/ai/src/utilities/usage.ts:7](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/usage.ts#L7)
+
+Input parameters for building base TokenUsage.
+Provider functions should extract these from their SDK's response.
+
+## Properties
+
+### completionTokens
+
+```ts
+completionTokens: number;
+```
+
+Defined in: [packages/ai/src/utilities/usage.ts:11](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/usage.ts#L11)
+
+Total output/completion tokens
+
+***
+
+### promptTokens
+
+```ts
+promptTokens: number;
+```
+
+Defined in: [packages/ai/src/utilities/usage.ts:9](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/usage.ts#L9)
+
+Total input/prompt tokens
+
+***
+
+### totalTokens
+
+```ts
+totalTokens: number;
+```
+
+Defined in: [packages/ai/src/utilities/usage.ts:13](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/usage.ts#L13)
+
+Total tokens (prompt + completion)
diff --git a/mintlify/ai/reference/interfaces/CapabilityContext.md b/mintlify/ai/reference/interfaces/CapabilityContext.md
new file mode 100644
index 000000000..76d1834fa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/CapabilityContext.md
@@ -0,0 +1,22 @@
+---
+id: CapabilityContext
+title: CapabilityContext
+---
+
+# Interface: CapabilityContext
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L12)
+
+The minimal context shape a capability accessor needs. The full
+`ChatMiddlewareContext` satisfies this (it has `capabilities`), so accessors
+accept any middleware context without referencing `any`.
+
+## Properties
+
+### capabilities
+
+```ts
+capabilities: CapabilityRegistry;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:13](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L13)
diff --git a/mintlify/ai/reference/interfaces/CapabilityGetter.md b/mintlify/ai/reference/interfaces/CapabilityGetter.md
new file mode 100644
index 000000000..e336da330
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/CapabilityGetter.md
@@ -0,0 +1,62 @@
+---
+id: CapabilityGetter
+title: CapabilityGetter
+---
+
+# Interface: CapabilityGetter()\&lt;TValue\>
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:17](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L17)
+
+Reads a capability value off a context. Overloaded so the flag narrows the return.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Call Signature
+
+```ts
+CapabilityGetter(ctx): TValue;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:18](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L18)
+
+Reads a capability value off a context. Overloaded so the flag narrows the return.
+
+### Parameters
+
+#### ctx
+
+[`CapabilityContext`](/ai/reference/interfaces/CapabilityContext)
+
+### Returns
+
+`TValue`
+
+## Call Signature
+
+```ts
+CapabilityGetter(ctx, opts): TValue | undefined;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:19](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L19)
+
+Reads a capability value off a context. Overloaded so the flag narrows the return.
+
+### Parameters
+
+#### ctx
+
+[`CapabilityContext`](/ai/reference/interfaces/CapabilityContext)
+
+#### opts
+
+##### optional
+
+`true`
+
+### Returns
+
+`TValue` \| `undefined`
diff --git a/mintlify/ai/reference/interfaces/ChatMCPOptions.md b/mintlify/ai/reference/interfaces/ChatMCPOptions.md
new file mode 100644
index 000000000..7f7d2fd41
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChatMCPOptions.md
@@ -0,0 +1,83 @@
+---
+id: ChatMCPOptions
+title: ChatMCPOptions
+---
+
+# Interface: ChatMCPOptions
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:55](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L55)
+
+Options controlling MCP tool discovery and lifecycle for a `chat()` call.
+
+## Properties
+
+### clients
+
+```ts
+clients: MCPToolSource[];
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:59](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L59)
+
+The MCP clients or client pools to discover tools from and manage.
+
+***
+
+### connection?
+
+```ts
+optional connection: MCPConnectionPolicy;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:66](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L66)
+
+Connection lifecycle policy applied to all clients when the run ends.
+
+Defaults to `'close'`.
+
+***
+
+### lazyTools?
+
+```ts
+optional lazyTools: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L74)
+
+When `true`, tool schemas are fetched lazily (forwarded to
+`tools({ lazy: true })`).
+
+Defaults to `false`.
+
+***
+
+### onDiscoveryError()?
+
+```ts
+optional onDiscoveryError: (error, source) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:85](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L85)
+
+Called when tool discovery fails for a single source.
+
+- Throw (or re-throw) from this handler to fail the entire chat call fast.
+- Return normally to skip that source and continue with remaining clients.
+- Omit this handler entirely to rethrow the error (fail-fast by default).
+
+Async handlers are awaited, so a rejected promise also fails fast.
+
+#### Parameters
+
+##### error
+
+`unknown`
+
+##### source
+
+[`MCPToolSource`](/ai/reference/interfaces/MCPToolSource)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
diff --git a/mintlify/ai/reference/interfaces/ChatMiddleware.md b/mintlify/ai/reference/interfaces/ChatMiddleware.md
new file mode 100644
index 000000000..0319846de
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChatMiddleware.md
@@ -0,0 +1,511 @@
+---
+id: ChatMiddleware
+title: ChatMiddleware
+---
+
+# Interface: ChatMiddleware\&lt;TContext\>
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:408](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L408)
+
+Chat middleware interface.
+
+All hooks are optional. Middleware is composed in array order:
+- `onConfig`: config piped through middlewares in order (first transform influences later)
+- `onChunk`: each output chunk is fed into the next middleware in order
+
+## Examples
+
+```ts
+const loggingMiddleware: ChatMiddleware = {
+  name: 'logging',
+  onStart(ctx) { console.log('Chat started', ctx.requestId) },
+  onChunk(ctx, chunk) { console.log('Chunk:', chunk.type) },
+  onFinish(ctx, info) { console.log('Done:', info.duration, 'ms') },
+}
+```
+
+```ts
+const redactionMiddleware: ChatMiddleware = {
+  name: 'redaction',
+  onChunk(ctx, chunk) {
+    if (chunk.type === 'TEXT_MESSAGE_CONTENT') {
+      return { ...chunk, delta: redact(chunk.delta) }
+    }
+  },
+}
+```
+
+## Extended by
+
+- [`DefinedChatMiddleware`](/ai/reference/interfaces/DefinedChatMiddleware)
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:410](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L410)
+
+Optional name for debugging and identification
+
+***
+
+### onAbort()?
+
+```ts
+optional onAbort: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:560](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L560)
+
+Called when the chat run is aborted.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`AbortInfo`](/ai/reference/interfaces/AbortInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onAfterToolCall()?
+
+```ts
+optional onAfterToolCall: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:524](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L524)
+
+Called after a tool execution completes (success or failure).
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`AfterToolCallInfo`](/ai/reference/interfaces/AfterToolCallInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onBeforeToolCall()?
+
+```ts
+optional onBeforeToolCall: (ctx, hookCtx) => 
+  | BeforeToolCallDecision
+| Promise<BeforeToolCallDecision>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:516](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L516)
+
+Called before a tool is executed.
+Can observe, transform args, skip execution, or abort the run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### hookCtx
+
+[`ToolCallHookContext`](/ai/reference/interfaces/ToolCallHookContext)
+
+#### Returns
+
+  \| [`BeforeToolCallDecision`](/ai/reference/type-aliases/BeforeToolCallDecision)
+  \| `Promise`\&lt;[`BeforeToolCallDecision`](/ai/reference/type-aliases/BeforeToolCallDecision)\>
+
+***
+
+### onChunk()?
+
+```ts
+optional onChunk: (ctx, chunk) => 
+  | void
+  | AGUIEvent
+  | AGUIEvent[]
+  | Promise<void | AGUIEvent | AGUIEvent[] | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:502](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L502)
+
+Called for every chunk yielded by chat().
+Can observe, transform, expand, or drop chunks.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### chunk
+
+[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)
+
+#### Returns
+
+  \| `void`
+  \| [`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)
+  \| [`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)[]
+  \| `Promise`\&lt;void \| AGUIEvent \| AGUIEvent\[\] \| null\&gt;
+  \| `null`
+
+void (pass through), chunk (replace), chunk[] (expand), null (drop)
+
+***
+
+### onConfig()?
+
+```ts
+optional onConfig: (ctx, config) => 
+  | void
+  | Partial<ChatMiddlewareConfig>
+  | Promise<
+  | void
+  | Partial<ChatMiddlewareConfig>
+  | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:449](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L449)
+
+Called to observe or transform the chat configuration.
+Called at init and at the beginning of each agent iteration.
+
+Return a partial config to merge with the current config, or void to pass through.
+Only the fields you return are overwritten — everything else is preserved.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### config
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)
+
+#### Returns
+
+  \| `void`
+  \| `Partial`\&lt;[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)\>
+  \| `Promise`\&lt;
+  \| `void`
+  \| `Partial`\&lt;[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)\>
+  \| `null`\>
+  \| `null`
+
+***
+
+### onError()?
+
+```ts
+optional onError: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:569](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L569)
+
+Called when the chat run encounters an unhandled error.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`ErrorInfo`](/ai/reference/interfaces/ErrorInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onFinish()?
+
+```ts
+optional onFinish: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:551](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L551)
+
+Called when the chat run completes normally.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`FinishInfo`](/ai/reference/interfaces/FinishInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onIteration()?
+
+```ts
+optional onIteration: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:491](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L491)
+
+Called at the start of each agent loop iteration, after a new assistant message ID
+is created. Use this to observe iteration boundaries.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`IterationInfo`](/ai/reference/interfaces/IterationInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onStart()?
+
+```ts
+optional onStart: (ctx) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:485](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L485)
+
+Called when the chat run starts (after initial onConfig).
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onStructuredOutputConfig()?
+
+```ts
+optional onStructuredOutputConfig: (ctx, config) => 
+  | void
+  | Partial<StructuredOutputMiddlewareConfig>
+  | Promise<
+  | void
+  | Partial<StructuredOutputMiddlewareConfig>
+  | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:473](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L473)
+
+Called at the start of the final structured-output call (when the chat
+was invoked with outputSchema). Pipes through middleware in order, like
+onConfig, but with access to the JSON Schema being sent to the provider.
+
+Return a partial to shallow-merge into the current config, or void to
+pass through.
+
+Fires BEFORE onConfig at the structured-output boundary. onConfig also
+re-fires at the same boundary with ctx.phase === 'structuredOutput',
+receiving the post-onStructuredOutputConfig view of the config (minus
+outputSchema). Use onConfig for general-purpose transforms that apply
+to every adapter call; use this hook when you need to transform the
+outputSchema or apply structured-output-specific behavior.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### config
+
+[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)
+
+#### Returns
+
+  \| `void`
+  \| `Partial`\&lt;[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)\>
+  \| `Promise`\&lt;
+  \| `void`
+  \| `Partial`\&lt;[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)\>
+  \| `null`\>
+  \| `null`
+
+***
+
+### onToolPhaseComplete()?
+
+```ts
+optional onToolPhaseComplete: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:533](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L533)
+
+Called after all tool calls in an iteration have been processed.
+Provides aggregate data about tool execution results, approvals, and client tools.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`ToolPhaseCompleteInfo`](/ai/reference/interfaces/ToolPhaseCompleteInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onUsage()?
+
+```ts
+optional onUsage: (ctx, usage) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:542](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L542)
+
+Called when usage data is available from a RUN_FINISHED chunk.
+Called once per model iteration that reports usage.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### usage
+
+[`UsageInfo`](/ai/reference/interfaces/UsageInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### optionalRequires?
+
+```ts
+optional optionalRequires: readonly CapabilityHandle[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:432](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L432)
+
+Capabilities this middleware uses if present but does not require.
+Non-gating: never causes a validation error. Read with
+`getX(ctx, { optional: true })`.
+
+***
+
+### provides?
+
+```ts
+optional provides: readonly CapabilityHandle[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:425](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L425)
+
+Capabilities this middleware provides. Each declared capability MUST be
+provided (via its `provide` accessor) inside `setup`, or `chat()` throws
+after the setup phase.
+
+***
+
+### requires?
+
+```ts
+optional requires: readonly CapabilityHandle[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:418](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L418)
+
+Capabilities this middleware requires. `chat()` validates that some
+middleware (or the adapter) provides each one; unsatisfied requirements are
+a compile-time error (array coverage / builder) and a runtime error before
+the adapter runs.
+
+***
+
+### sandbox?
+
+```ts
+optional sandbox: ChatSandboxHooks<TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:578](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L578)
+
+Sandbox file-event hooks. Fire when a sandbox provided by `withSandbox` is
+active during the run and a file is created/changed/deleted. Server-side.
+
+***
+
+### setup()?
+
+```ts
+optional setup: (ctx) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:440](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L440)
+
+Provisioning hook. Runs FIRST — before `onConfig` (init) — across all
+middleware in array order. Use it to call `provide` accessors so later
+middleware (`onConfig` onward) can consume the capabilities. Receives the
+stable context; does NOT receive the mutable config.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
diff --git a/mintlify/ai/reference/interfaces/ChatMiddlewareConfig.md b/mintlify/ai/reference/interfaces/ChatMiddlewareConfig.md
new file mode 100644
index 000000000..f93c7a7aa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChatMiddlewareConfig.md
@@ -0,0 +1,65 @@
+---
+id: ChatMiddlewareConfig
+title: ChatMiddlewareConfig
+---
+
+# Interface: ChatMiddlewareConfig
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:194](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L194)
+
+Chat configuration that middleware can observe or transform.
+This is a subset of the chat engine's effective configuration
+that middleware is allowed to modify.
+
+## Properties
+
+### messages
+
+```ts
+messages: ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:195](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L195)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:198](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L198)
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:199](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L199)
+
+***
+
+### systemPrompts
+
+```ts
+systemPrompts: SystemPrompt[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:196](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L196)
+
+***
+
+### tools
+
+```ts
+tools: Tool<SchemaInput, SchemaInput, string, unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:197](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L197)
diff --git a/mintlify/ai/reference/interfaces/ChatMiddlewareContext.md b/mintlify/ai/reference/interfaces/ChatMiddlewareContext.md
new file mode 100644
index 000000000..f33c17421
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChatMiddlewareContext.md
@@ -0,0 +1,492 @@
+---
+id: ChatMiddlewareContext
+title: ChatMiddlewareContext
+---
+
+# Interface: ChatMiddlewareContext\&lt;TContext\>
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:73](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L73)
+
+Stable context object passed to all middleware hooks.
+Created once per chat() invocation and shared across all hooks.
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### abort()
+
+```ts
+abort: (reason?) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:102](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L102)
+
+Abort the chat run with a reason
+
+#### Parameters
+
+##### reason?
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### accumulatedContent
+
+```ts
+accumulatedContent: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:153](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L153)
+
+Accumulated text content for the current iteration
+
+***
+
+### activity
+
+```ts
+activity: "chat";
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:120](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L120)
+
+Which activity this context describes — always `'chat'`. Present so the
+chat context structurally satisfies the base `GenerationMiddlewareContext`,
+letting an observe-only middleware authored against the base (e.g.
+`otelMiddleware`) run on both chat and media activities.
+
+***
+
+### capabilities
+
+```ts
+capabilities: CapabilityRegistry;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:167](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L167)
+
+Capability bookkeeping for this request. Populated by middleware `setup`
+hooks (via `provide` accessors) and read by later middleware (via `get`
+accessors). Prefer the accessors returned by `createCapability` over using
+this directly. Orthogonal to `context` (the user runtime context).
+
+***
+
+### chunkIndex
+
+```ts
+chunkIndex: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:98](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L98)
+
+Running count of chunks yielded so far
+
+***
+
+### context
+
+```ts
+context: TContext;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L104)
+
+Runtime context provided by chat() options
+
+***
+
+### ~~conversationId?~~
+
+```ts
+optional conversationId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:92](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L92)
+
+#### Deprecated
+
+Use `threadId` instead. Retained as an alias of
+`threadId` so middleware written before the AG-UI rename keeps
+working unchanged. Will be removed in a future major release.
+
+***
+
+### createId()
+
+```ts
+createId: (prefix) => string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:160](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L160)
+
+Generate a unique ID with the given prefix
+
+#### Parameters
+
+##### prefix
+
+`string`
+
+#### Returns
+
+`string`
+
+***
+
+### currentMessageId
+
+```ts
+currentMessageId: string | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:151](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L151)
+
+Current assistant message ID (changes per iteration)
+
+***
+
+### defer()
+
+```ts
+defer: (promise) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:110](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L110)
+
+Defer a non-blocking side-effect promise.
+Deferred promises do not block streaming and are awaited
+after the terminal hook (onFinish/onAbort/onError).
+
+#### Parameters
+
+##### promise
+
+`Promise`\&lt;`unknown`\>
+
+#### Returns
+
+`void`
+
+***
+
+### get()
+
+```ts
+get: <TValue>(capability) => TValue;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:172](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L172)
+
+Read a provided capability by its handle. Equivalent to the handle's own
+`get` accessor (`getX(ctx)`); throws if the capability was never provided.
+
+#### Type Parameters
+
+##### TValue
+
+`TValue`
+
+#### Parameters
+
+##### capability
+
+[`Capability`](/ai/reference/type-aliases/Capability)\&lt;`TValue`\>
+
+#### Returns
+
+`TValue`
+
+***
+
+### getOptional()
+
+```ts
+getOptional: <TValue>(capability) => TValue | undefined;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:177](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L177)
+
+Read a capability by its handle, returning `undefined` if it was never
+provided (never throws).
+
+#### Type Parameters
+
+##### TValue
+
+`TValue`
+
+#### Parameters
+
+##### capability
+
+[`Capability`](/ai/reference/type-aliases/Capability)\&lt;`TValue`\>
+
+#### Returns
+
+`TValue` \| `undefined`
+
+***
+
+### hasTools
+
+```ts
+hasTools: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:146](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L146)
+
+Whether tools are configured
+
+***
+
+### iteration
+
+```ts
+iteration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:96](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L96)
+
+Current agent loop iteration (0-indexed)
+
+***
+
+### messageCount
+
+```ts
+messageCount: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:144](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L144)
+
+Number of messages at the start of the request
+
+***
+
+### messages
+
+```ts
+messages: readonly ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:158](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L158)
+
+Current messages array (read-only view)
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:124](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L124)
+
+Model identifier (e.g., 'gpt-4o')
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:139](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L139)
+
+Provider-specific model options
+
+***
+
+### options?
+
+```ts
+optional options: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:137](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L137)
+
+Flattened generation options (metadata)
+
+***
+
+### phase
+
+```ts
+phase: ChatMiddlewarePhase;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:94](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L94)
+
+Current lifecycle phase
+
+***
+
+### provide()
+
+```ts
+provide: <TValue>(capability, value) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:182](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L182)
+
+Provide a capability value. Equivalent to the handle's own `provide`
+accessor (`provideX(ctx, value)`). Typically called from `setup`.
+
+#### Type Parameters
+
+##### TValue
+
+`TValue`
+
+#### Parameters
+
+##### capability
+
+[`Capability`](/ai/reference/type-aliases/Capability)\&lt;`TValue`\>
+
+##### value
+
+`TValue`
+
+#### Returns
+
+`void`
+
+***
+
+### provider
+
+```ts
+provider: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:122](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L122)
+
+Provider name (e.g., 'openai', 'anthropic')
+
+***
+
+### requestId
+
+```ts
+requestId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:75](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L75)
+
+Unique identifier for this chat request
+
+***
+
+### runId
+
+```ts
+runId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L79)
+
+AG-UI run identifier for correlating client and server events
+
+***
+
+### signal?
+
+```ts
+optional signal: AbortSignal;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:100](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L100)
+
+Abort signal from the chat request
+
+***
+
+### source
+
+```ts
+source: "server" | "client";
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:126](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L126)
+
+Source of the chat invocation — always 'server' for server-side chat
+
+***
+
+### streamId
+
+```ts
+streamId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L77)
+
+Unique identifier for this stream
+
+***
+
+### streaming
+
+```ts
+streaming: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:128](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L128)
+
+Whether the chat is streaming
+
+***
+
+### systemPrompts
+
+```ts
+systemPrompts: SystemPrompt[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:133](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L133)
+
+System prompts configured for this chat
+
+***
+
+### threadId
+
+```ts
+threadId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:86](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L86)
+
+AG-UI thread identifier — a stable per-conversation ID used to
+correlate client and server devtools events. Resolves to the
+caller-provided `threadId` (or legacy `conversationId`), or an
+auto-generated value when neither is supplied.
+
+***
+
+### toolNames?
+
+```ts
+optional toolNames: string[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:135](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L135)
+
+Names of configured tools, if any
diff --git a/mintlify/ai/reference/interfaces/ChatSandboxHooks.md b/mintlify/ai/reference/interfaces/ChatSandboxHooks.md
new file mode 100644
index 000000000..2f901bd50
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChatSandboxHooks.md
@@ -0,0 +1,113 @@
+---
+id: ChatSandboxHooks
+title: ChatSandboxHooks
+---
+
+# Interface: ChatSandboxHooks\&lt;TContext\>
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:28](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L28)
+
+Sandbox file-event hooks a chat middleware can declare. Fire server-side for
+every file create/change/delete observed in the sandbox during the run.
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### onFile()?
+
+```ts
+optional onFile: (ctx, e) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L29)
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### e
+
+[`SandboxFileEvent`](/ai/reference/interfaces/SandboxFileEvent)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onFileChange()?
+
+```ts
+optional onFileChange: (ctx, e) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:37](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L37)
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### e
+
+[`SandboxFileEvent`](/ai/reference/interfaces/SandboxFileEvent)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onFileCreate()?
+
+```ts
+optional onFileCreate: (ctx, e) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L33)
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### e
+
+[`SandboxFileEvent`](/ai/reference/interfaces/SandboxFileEvent)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onFileDelete()?
+
+```ts
+optional onFileDelete: (ctx, e) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:41](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L41)
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### e
+
+[`SandboxFileEvent`](/ai/reference/interfaces/SandboxFileEvent)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
diff --git a/mintlify/ai/reference/interfaces/ChunkRecording.md b/mintlify/ai/reference/interfaces/ChunkRecording.md
new file mode 100644
index 000000000..45df932cf
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChunkRecording.md
@@ -0,0 +1,88 @@
+---
+id: ChunkRecording
+title: ChunkRecording
+---
+
+# Interface: ChunkRecording
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:100](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L100)
+
+Recording format for replay testing
+
+## Properties
+
+### chunks
+
+```ts
+chunks: object[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:105](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L105)
+
+#### chunk
+
+```ts
+chunk: AGUIEvent;
+```
+
+#### index
+
+```ts
+index: number;
+```
+
+#### timestamp
+
+```ts
+timestamp: number;
+```
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:103](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L103)
+
+***
+
+### provider?
+
+```ts
+optional provider: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L104)
+
+***
+
+### result?
+
+```ts
+optional result: ProcessorResult;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:110](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L110)
+
+***
+
+### timestamp
+
+```ts
+timestamp: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:102](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L102)
+
+***
+
+### version
+
+```ts
+version: "1.0";
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:101](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L101)
diff --git a/mintlify/ai/reference/interfaces/ChunkStrategy.md b/mintlify/ai/reference/interfaces/ChunkStrategy.md
new file mode 100644
index 000000000..3305e5995
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ChunkStrategy.md
@@ -0,0 +1,58 @@
+---
+id: ChunkStrategy
+title: ChunkStrategy
+---
+
+# Interface: ChunkStrategy
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L38)
+
+Strategy for determining when to emit text updates
+
+## Properties
+
+### reset()?
+
+```ts
+optional reset: () => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L50)
+
+Optional: Reset strategy state (called when streaming starts)
+
+#### Returns
+
+`void`
+
+***
+
+### shouldEmit()
+
+```ts
+shouldEmit: (chunk, accumulated) => boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:45](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L45)
+
+Called for each text chunk received
+
+#### Parameters
+
+##### chunk
+
+`string`
+
+The new chunk of text (delta)
+
+##### accumulated
+
+`string`
+
+All text accumulated so far
+
+#### Returns
+
+`boolean`
+
+true if an update should be emitted now
diff --git a/mintlify/ai/reference/interfaces/ClientTool.md b/mintlify/ai/reference/interfaces/ClientTool.md
new file mode 100644
index 000000000..2a4587de5
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ClientTool.md
@@ -0,0 +1,118 @@
+---
+id: ClientTool
+title: ClientTool
+---
+
+# Interface: ClientTool\&lt;TInput, TOutput, TName, TContext\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L24)
+
+Marker type for client-side tools
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### \_\_toolSide
+
+```ts
+__toolSide: "client";
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:30](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L30)
+
+***
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L32)
+
+***
+
+### execute?
+
+```ts
+optional execute: ToolExecuteFunction<TInput, TOutput, TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:43](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L43)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L38)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:41](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L41)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L42)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L31)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:40](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L40)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:39](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L39)
diff --git a/mintlify/ai/reference/interfaces/ContentPartDataSource.md b/mintlify/ai/reference/interfaces/ContentPartDataSource.md
new file mode 100644
index 000000000..01b7b115c
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ContentPartDataSource.md
@@ -0,0 +1,48 @@
+---
+id: ContentPartDataSource
+title: ContentPartDataSource
+---
+
+# Interface: ContentPartDataSource
+
+Defined in: [packages/ai/src/types.ts:201](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L201)
+
+Source specification for inline data content (base64).
+Requires a mimeType to ensure providers receive proper content type information.
+
+## Properties
+
+### mimeType
+
+```ts
+mimeType: string;
+```
+
+Defined in: [packages/ai/src/types.ts:214](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L214)
+
+The MIME type of the content (e.g., 'image/png', 'audio/wav').
+Required for data sources to ensure proper handling by providers.
+
+***
+
+### type
+
+```ts
+type: "data";
+```
+
+Defined in: [packages/ai/src/types.ts:205](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L205)
+
+Indicates this is inline data content.
+
+***
+
+### value
+
+```ts
+value: string;
+```
+
+Defined in: [packages/ai/src/types.ts:209](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L209)
+
+The base64-encoded content value.
diff --git a/mintlify/ai/reference/interfaces/ContentPartSource.md b/mintlify/ai/reference/interfaces/ContentPartSource.md
new file mode 100644
index 000000000..931e5f44b
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ContentPartSource.md
@@ -0,0 +1,12 @@
+---
+title: "ContentPartSource"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ContentPartSource)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/ContentPartUrlSource.md b/mintlify/ai/reference/interfaces/ContentPartUrlSource.md
new file mode 100644
index 000000000..a96de875c
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ContentPartUrlSource.md
@@ -0,0 +1,47 @@
+---
+id: ContentPartUrlSource
+title: ContentPartUrlSource
+---
+
+# Interface: ContentPartUrlSource
+
+Defined in: [packages/ai/src/types.ts:221](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L221)
+
+Source specification for URL-based content.
+mimeType is optional as it can often be inferred from the URL or response headers.
+
+## Properties
+
+### mimeType?
+
+```ts
+optional mimeType: string;
+```
+
+Defined in: [packages/ai/src/types.ts:233](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L233)
+
+Optional MIME type hint for cases where providers can't infer it from the URL.
+
+***
+
+### type
+
+```ts
+type: "url";
+```
+
+Defined in: [packages/ai/src/types.ts:225](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L225)
+
+Indicates this is URL-referenced content.
+
+***
+
+### value
+
+```ts
+value: string;
+```
+
+Defined in: [packages/ai/src/types.ts:229](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L229)
+
+HTTP(S) URL or data URI pointing to the content.
diff --git a/mintlify/ai/reference/interfaces/ContentStreamChunk.md b/mintlify/ai/reference/interfaces/ContentStreamChunk.md
new file mode 100644
index 000000000..abd7e4274
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ContentStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ContentStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ContentStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/CustomEvent.md b/mintlify/ai/reference/interfaces/CustomEvent.md
new file mode 100644
index 000000000..dc0b40ed1
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/CustomEvent.md
@@ -0,0 +1,43 @@
+---
+id: CustomEvent
+title: CustomEvent
+---
+
+# Interface: CustomEvent
+
+Defined in: [packages/ai/src/types.ts:1296](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1296)
+
+Custom event for extensibility.
+
+@ag-ui/core provides: `name`, `value`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `CustomEvent`
+
+## Extended by
+
+- [`StructuredOutputCompleteEvent`](/ai/reference/interfaces/StructuredOutputCompleteEvent)
+- [`StructuredOutputStartEvent`](/ai/reference/interfaces/StructuredOutputStartEvent)
+- [`ApprovalRequestedEvent`](/ai/reference/interfaces/ApprovalRequestedEvent)
+- [`ToolInputAvailableEvent`](/ai/reference/interfaces/ToolInputAvailableEvent)
+- [`UIResourceEvent`](/ai/reference/interfaces/UIResourceEvent)
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/DebugCategories.md b/mintlify/ai/reference/interfaces/DebugCategories.md
new file mode 100644
index 000000000..971e31d73
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DebugCategories.md
@@ -0,0 +1,123 @@
+---
+id: DebugCategories
+title: DebugCategories
+---
+
+# Interface: DebugCategories
+
+Defined in: [packages/ai/src/logger/types.ts:30](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L30)
+
+Per-category toggles for debug logging. Each flag enables or disables one class of log message. Unspecified flags default to `true` when `DebugConfig` is partially specified; `undefined` on the `debug` option defaults all flags to `false` except `errors`.
+
+## Extended by
+
+- [`DebugConfig`](/ai/reference/interfaces/DebugConfig)
+
+## Properties
+
+### agentLoop?
+
+```ts
+optional agentLoop: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L50)
+
+Iteration markers and phase transitions in the chat agent loop. Chat-only.
+
+***
+
+### config?
+
+```ts
+optional config: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L54)
+
+Config transforms returned by middleware `onConfig` hooks. Chat-only.
+
+***
+
+### errors?
+
+```ts
+optional errors: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:58](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L58)
+
+Caught errors throughout the pipeline. Unlike other categories, defaults to `true` even when `debug` is unspecified. Explicitly set `errors: false` or `debug: false` to silence.
+
+***
+
+### middleware?
+
+```ts
+optional middleware: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L42)
+
+Inputs and outputs around each middleware hook invocation. Chat-only.
+
+***
+
+### output?
+
+```ts
+optional output: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L38)
+
+Chunks/results yielded to the consumer after all middleware. For streaming activities this fires per chunk; for non-streaming activities it fires once per result.
+
+***
+
+### provider?
+
+```ts
+optional provider: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L34)
+
+Raw chunks/frames received from a provider SDK (OpenAI, Anthropic, Gemini, Ollama, Grok, Groq, OpenRouter, fal, ElevenLabs). Emitted inside every streaming adapter's chunk loop.
+
+***
+
+### request?
+
+```ts
+optional request: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:62](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L62)
+
+Outgoing call metadata (provider, model, message/tool counts) emitted before each adapter SDK call.
+
+***
+
+### sandbox?
+
+```ts
+optional sandbox: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:67](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L67)
+
+Sandbox internals: watcher start/stop + mechanism, file events, sandbox
+hook dispatch, ensure/bootstrap and lifecycle transitions. Chat-only.
+
+***
+
+### tools?
+
+```ts
+optional tools: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:46](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L46)
+
+Before/after tool-call execution in the chat agent loop. Chat-only.
diff --git a/mintlify/ai/reference/interfaces/DebugConfig.md b/mintlify/ai/reference/interfaces/DebugConfig.md
new file mode 100644
index 000000000..158e4dc35
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DebugConfig.md
@@ -0,0 +1,171 @@
+---
+id: DebugConfig
+title: DebugConfig
+---
+
+# Interface: DebugConfig
+
+Defined in: [packages/ai/src/logger/types.ts:73](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L73)
+
+Granular debug configuration combining per-category toggles with an optional custom logger. Any unspecified category flag defaults to `true`.
+
+## Extends
+
+- [`DebugCategories`](/ai/reference/interfaces/DebugCategories)
+
+## Properties
+
+### agentLoop?
+
+```ts
+optional agentLoop: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L50)
+
+Iteration markers and phase transitions in the chat agent loop. Chat-only.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`agentLoop`](/ai/reference/interfaces/DebugCategories#agentloop)
+
+***
+
+### config?
+
+```ts
+optional config: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L54)
+
+Config transforms returned by middleware `onConfig` hooks. Chat-only.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`config`](/ai/reference/interfaces/DebugCategories#config)
+
+***
+
+### errors?
+
+```ts
+optional errors: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:58](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L58)
+
+Caught errors throughout the pipeline. Unlike other categories, defaults to `true` even when `debug` is unspecified. Explicitly set `errors: false` or `debug: false` to silence.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`errors`](/ai/reference/interfaces/DebugCategories#errors)
+
+***
+
+### logger?
+
+```ts
+optional logger: Logger;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L77)
+
+Custom `Logger` implementation. When omitted, a default `ConsoleLogger` routes output to `console.debug`/`info`/`warn`/`error`.
+
+***
+
+### middleware?
+
+```ts
+optional middleware: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L42)
+
+Inputs and outputs around each middleware hook invocation. Chat-only.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`middleware`](/ai/reference/interfaces/DebugCategories#middleware)
+
+***
+
+### output?
+
+```ts
+optional output: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L38)
+
+Chunks/results yielded to the consumer after all middleware. For streaming activities this fires per chunk; for non-streaming activities it fires once per result.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`output`](/ai/reference/interfaces/DebugCategories#output)
+
+***
+
+### provider?
+
+```ts
+optional provider: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L34)
+
+Raw chunks/frames received from a provider SDK (OpenAI, Anthropic, Gemini, Ollama, Grok, Groq, OpenRouter, fal, ElevenLabs). Emitted inside every streaming adapter's chunk loop.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`provider`](/ai/reference/interfaces/DebugCategories#provider)
+
+***
+
+### request?
+
+```ts
+optional request: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:62](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L62)
+
+Outgoing call metadata (provider, model, message/tool counts) emitted before each adapter SDK call.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`request`](/ai/reference/interfaces/DebugCategories#request)
+
+***
+
+### sandbox?
+
+```ts
+optional sandbox: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:67](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L67)
+
+Sandbox internals: watcher start/stop + mechanism, file events, sandbox
+hook dispatch, ensure/bootstrap and lifecycle transitions. Chat-only.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`sandbox`](/ai/reference/interfaces/DebugCategories#sandbox)
+
+***
+
+### tools?
+
+```ts
+optional tools: boolean;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:46](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L46)
+
+Before/after tool-call execution in the chat agent loop. Chat-only.
+
+#### Inherited from
+
+[`DebugCategories`](/ai/reference/interfaces/DebugCategories).[`tools`](/ai/reference/interfaces/DebugCategories#tools)
diff --git a/mintlify/ai/reference/interfaces/DefaultMessageMetadataByModality.md b/mintlify/ai/reference/interfaces/DefaultMessageMetadataByModality.md
new file mode 100644
index 000000000..3146b3879
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DefaultMessageMetadataByModality.md
@@ -0,0 +1,61 @@
+---
+id: DefaultMessageMetadataByModality
+title: DefaultMessageMetadataByModality
+---
+
+# Interface: DefaultMessageMetadataByModality
+
+Defined in: [packages/ai/src/types.ts:2012](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2012)
+
+Default metadata type for adapters that don't define custom metadata.
+Uses unknown for all modalities.
+
+## Properties
+
+### audio
+
+```ts
+audio: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:2015](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2015)
+
+***
+
+### document
+
+```ts
+document: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:2017](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2017)
+
+***
+
+### image
+
+```ts
+image: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:2014](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2014)
+
+***
+
+### text
+
+```ts
+text: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:2013](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2013)
+
+***
+
+### video
+
+```ts
+video: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:2016](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2016)
diff --git a/mintlify/ai/reference/interfaces/DefinedChatMiddleware.md b/mintlify/ai/reference/interfaces/DefinedChatMiddleware.md
new file mode 100644
index 000000000..4c11c5d71
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DefinedChatMiddleware.md
@@ -0,0 +1,566 @@
+---
+id: DefinedChatMiddleware
+title: DefinedChatMiddleware
+---
+
+# Interface: DefinedChatMiddleware\&lt;TContext, TRequires, TProvides\>
+
+Defined in: [packages/ai/src/activities/chat/middleware/define.ts:8](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/define.ts#L8)
+
+A middleware whose `requires`/`provides` tuple types are captured precisely
+(via `const` inference) for the array coverage check and the builder.
+
+## Extends
+
+- [`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware)\&lt;`TContext`\>
+
+## Type Parameters
+
+### TContext
+
+`TContext`
+
+### TRequires
+
+`TRequires` *extends* `ReadonlyArray`\&lt;[`CapabilityHandle`](/ai/reference/type-aliases/CapabilityHandle)\>
+
+### TProvides
+
+`TProvides` *extends* `ReadonlyArray`\&lt;[`CapabilityHandle`](/ai/reference/type-aliases/CapabilityHandle)\>
+
+## Properties
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:410](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L410)
+
+Optional name for debugging and identification
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`name`](/ai/reference/interfaces/ChatMiddleware#name)
+
+***
+
+### onAbort()?
+
+```ts
+optional onAbort: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:560](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L560)
+
+Called when the chat run is aborted.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`AbortInfo`](/ai/reference/interfaces/AbortInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onAbort`](/ai/reference/interfaces/ChatMiddleware#onabort)
+
+***
+
+### onAfterToolCall()?
+
+```ts
+optional onAfterToolCall: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:524](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L524)
+
+Called after a tool execution completes (success or failure).
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`AfterToolCallInfo`](/ai/reference/interfaces/AfterToolCallInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onAfterToolCall`](/ai/reference/interfaces/ChatMiddleware#onaftertoolcall)
+
+***
+
+### onBeforeToolCall()?
+
+```ts
+optional onBeforeToolCall: (ctx, hookCtx) => 
+  | BeforeToolCallDecision
+| Promise<BeforeToolCallDecision>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:516](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L516)
+
+Called before a tool is executed.
+Can observe, transform args, skip execution, or abort the run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### hookCtx
+
+[`ToolCallHookContext`](/ai/reference/interfaces/ToolCallHookContext)
+
+#### Returns
+
+  \| [`BeforeToolCallDecision`](/ai/reference/type-aliases/BeforeToolCallDecision)
+  \| `Promise`\&lt;[`BeforeToolCallDecision`](/ai/reference/type-aliases/BeforeToolCallDecision)\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onBeforeToolCall`](/ai/reference/interfaces/ChatMiddleware#onbeforetoolcall)
+
+***
+
+### onChunk()?
+
+```ts
+optional onChunk: (ctx, chunk) => 
+  | void
+  | AGUIEvent
+  | AGUIEvent[]
+  | Promise<void | AGUIEvent | AGUIEvent[] | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:502](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L502)
+
+Called for every chunk yielded by chat().
+Can observe, transform, expand, or drop chunks.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### chunk
+
+[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)
+
+#### Returns
+
+  \| `void`
+  \| [`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)
+  \| [`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)[]
+  \| `Promise`\&lt;void \| AGUIEvent \| AGUIEvent\[\] \| null\&gt;
+  \| `null`
+
+void (pass through), chunk (replace), chunk[] (expand), null (drop)
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onChunk`](/ai/reference/interfaces/ChatMiddleware#onchunk)
+
+***
+
+### onConfig()?
+
+```ts
+optional onConfig: (ctx, config) => 
+  | void
+  | Partial<ChatMiddlewareConfig>
+  | Promise<
+  | void
+  | Partial<ChatMiddlewareConfig>
+  | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:449](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L449)
+
+Called to observe or transform the chat configuration.
+Called at init and at the beginning of each agent iteration.
+
+Return a partial config to merge with the current config, or void to pass through.
+Only the fields you return are overwritten — everything else is preserved.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### config
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)
+
+#### Returns
+
+  \| `void`
+  \| `Partial`\&lt;[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)\>
+  \| `Promise`\&lt;
+  \| `void`
+  \| `Partial`\&lt;[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig)\>
+  \| `null`\>
+  \| `null`
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onConfig`](/ai/reference/interfaces/ChatMiddleware#onconfig)
+
+***
+
+### onError()?
+
+```ts
+optional onError: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:569](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L569)
+
+Called when the chat run encounters an unhandled error.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`ErrorInfo`](/ai/reference/interfaces/ErrorInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onError`](/ai/reference/interfaces/ChatMiddleware#onerror)
+
+***
+
+### onFinish()?
+
+```ts
+optional onFinish: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:551](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L551)
+
+Called when the chat run completes normally.
+Exactly one of onFinish/onAbort/onError will be called per run.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`FinishInfo`](/ai/reference/interfaces/FinishInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onFinish`](/ai/reference/interfaces/ChatMiddleware#onfinish)
+
+***
+
+### onIteration()?
+
+```ts
+optional onIteration: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:491](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L491)
+
+Called at the start of each agent loop iteration, after a new assistant message ID
+is created. Use this to observe iteration boundaries.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`IterationInfo`](/ai/reference/interfaces/IterationInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onIteration`](/ai/reference/interfaces/ChatMiddleware#oniteration)
+
+***
+
+### onStart()?
+
+```ts
+optional onStart: (ctx) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:485](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L485)
+
+Called when the chat run starts (after initial onConfig).
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onStart`](/ai/reference/interfaces/ChatMiddleware#onstart)
+
+***
+
+### onStructuredOutputConfig()?
+
+```ts
+optional onStructuredOutputConfig: (ctx, config) => 
+  | void
+  | Partial<StructuredOutputMiddlewareConfig>
+  | Promise<
+  | void
+  | Partial<StructuredOutputMiddlewareConfig>
+  | null>
+  | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:473](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L473)
+
+Called at the start of the final structured-output call (when the chat
+was invoked with outputSchema). Pipes through middleware in order, like
+onConfig, but with access to the JSON Schema being sent to the provider.
+
+Return a partial to shallow-merge into the current config, or void to
+pass through.
+
+Fires BEFORE onConfig at the structured-output boundary. onConfig also
+re-fires at the same boundary with ctx.phase === 'structuredOutput',
+receiving the post-onStructuredOutputConfig view of the config (minus
+outputSchema). Use onConfig for general-purpose transforms that apply
+to every adapter call; use this hook when you need to transform the
+outputSchema or apply structured-output-specific behavior.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### config
+
+[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)
+
+#### Returns
+
+  \| `void`
+  \| `Partial`\&lt;[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)\>
+  \| `Promise`\&lt;
+  \| `void`
+  \| `Partial`\&lt;[`StructuredOutputMiddlewareConfig`](/ai/reference/interfaces/StructuredOutputMiddlewareConfig)\>
+  \| `null`\>
+  \| `null`
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onStructuredOutputConfig`](/ai/reference/interfaces/ChatMiddleware#onstructuredoutputconfig)
+
+***
+
+### onToolPhaseComplete()?
+
+```ts
+optional onToolPhaseComplete: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:533](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L533)
+
+Called after all tool calls in an iteration have been processed.
+Provides aggregate data about tool execution results, approvals, and client tools.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`ToolPhaseCompleteInfo`](/ai/reference/interfaces/ToolPhaseCompleteInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onToolPhaseComplete`](/ai/reference/interfaces/ChatMiddleware#ontoolphasecomplete)
+
+***
+
+### onUsage()?
+
+```ts
+optional onUsage: (ctx, usage) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:542](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L542)
+
+Called when usage data is available from a RUN_FINISHED chunk.
+Called once per model iteration that reports usage.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+##### usage
+
+[`UsageInfo`](/ai/reference/interfaces/UsageInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`onUsage`](/ai/reference/interfaces/ChatMiddleware#onusage)
+
+***
+
+### optionalRequires?
+
+```ts
+optional optionalRequires: readonly CapabilityHandle[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:432](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L432)
+
+Capabilities this middleware uses if present but does not require.
+Non-gating: never causes a validation error. Read with
+`getX(ctx, { optional: true })`.
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`optionalRequires`](/ai/reference/interfaces/ChatMiddleware#optionalrequires)
+
+***
+
+### provides?
+
+```ts
+optional provides: TProvides;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/define.ts:14](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/define.ts#L14)
+
+Capabilities this middleware provides. Each declared capability MUST be
+provided (via its `provide` accessor) inside `setup`, or `chat()` throws
+after the setup phase.
+
+#### Overrides
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`provides`](/ai/reference/interfaces/ChatMiddleware#provides)
+
+***
+
+### requires?
+
+```ts
+optional requires: TRequires;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/define.ts:13](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/define.ts#L13)
+
+Capabilities this middleware requires. `chat()` validates that some
+middleware (or the adapter) provides each one; unsatisfied requirements are
+a compile-time error (array coverage / builder) and a runtime error before
+the adapter runs.
+
+#### Overrides
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`requires`](/ai/reference/interfaces/ChatMiddleware#requires)
+
+***
+
+### sandbox?
+
+```ts
+optional sandbox: ChatSandboxHooks<TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:578](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L578)
+
+Sandbox file-event hooks. Fire when a sandbox provided by `withSandbox` is
+active during the run and a file is created/changed/deleted. Server-side.
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`sandbox`](/ai/reference/interfaces/ChatMiddleware#sandbox)
+
+***
+
+### setup()?
+
+```ts
+optional setup: (ctx) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:440](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L440)
+
+Provisioning hook. Runs FIRST — before `onConfig` (init) — across all
+middleware in array order. Use it to call `provide` accessors so later
+middleware (`onConfig` onward) can consume the capabilities. Receives the
+stable context; does NOT receive the mutable config.
+
+#### Parameters
+
+##### ctx
+
+[`ChatMiddlewareContext`](/ai/reference/interfaces/ChatMiddlewareContext)\&lt;`TContext`\>
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`ChatMiddleware`](/ai/reference/interfaces/ChatMiddleware).[`setup`](/ai/reference/interfaces/ChatMiddleware#setup)
diff --git a/mintlify/ai/reference/interfaces/DocumentPart.md b/mintlify/ai/reference/interfaces/DocumentPart.md
new file mode 100644
index 000000000..2c6740f85
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DocumentPart.md
@@ -0,0 +1,52 @@
+---
+id: DocumentPart
+title: DocumentPart
+---
+
+# Interface: DocumentPart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:284](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L284)
+
+Document content part for multimodal messages (e.g., PDFs).
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+Provider-specific metadata type (e.g., Anthropic's media_type)
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:289](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L289)
+
+Provider-specific metadata (e.g., media_type for PDFs)
+
+***
+
+### source
+
+```ts
+source: ContentPartSource;
+```
+
+Defined in: [packages/ai/src/types.ts:287](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L287)
+
+Source of the document content
+
+***
+
+### type
+
+```ts
+type: "document";
+```
+
+Defined in: [packages/ai/src/types.ts:285](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L285)
diff --git a/mintlify/ai/reference/interfaces/DoneStreamChunk.md b/mintlify/ai/reference/interfaces/DoneStreamChunk.md
new file mode 100644
index 000000000..33f3c2437
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/DoneStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "DoneStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/DoneStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/EmbeddingOptions.md b/mintlify/ai/reference/interfaces/EmbeddingOptions.md
new file mode 100644
index 000000000..f976affc4
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/EmbeddingOptions.md
@@ -0,0 +1,12 @@
+---
+title: "EmbeddingOptions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/EmbeddingOptions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/EmbeddingResult.md b/mintlify/ai/reference/interfaces/EmbeddingResult.md
new file mode 100644
index 000000000..a7d508db6
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/EmbeddingResult.md
@@ -0,0 +1,12 @@
+---
+title: "EmbeddingResult"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/EmbeddingResult)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/ErrorInfo.md b/mintlify/ai/reference/interfaces/ErrorInfo.md
new file mode 100644
index 000000000..8d512c08f
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ErrorInfo.md
@@ -0,0 +1,34 @@
+---
+id: ErrorInfo
+title: ErrorInfo
+---
+
+# Interface: ErrorInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:368](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L368)
+
+Information passed to onError.
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:372](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L372)
+
+Duration until error in milliseconds
+
+***
+
+### error
+
+```ts
+error: unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:370](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L370)
+
+The error that caused the failure
diff --git a/mintlify/ai/reference/interfaces/ErrorStreamChunk.md b/mintlify/ai/reference/interfaces/ErrorStreamChunk.md
new file mode 100644
index 000000000..6676874be
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ErrorStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ErrorStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ErrorStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/ExtendedModelDef.md b/mintlify/ai/reference/interfaces/ExtendedModelDef.md
new file mode 100644
index 000000000..9db9b7360
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ExtendedModelDef.md
@@ -0,0 +1,106 @@
+---
+id: ExtendedModelDef
+title: ExtendedModelDef
+---
+
+# Interface: ExtendedModelDef\&lt;TName, TInput, TOptions, TFeatures, TTools\>
+
+Defined in: [packages/ai/src/extend-adapter.ts:21](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L21)
+
+Definition for a custom model to add to an adapter.
+
+## Example
+
+```typescript
+const customModels = [
+  createModel('my-custom-model', ['text', 'image']),
+] as const
+```
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+The model name as a literal string type
+
+### TInput
+
+`TInput` *extends* `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\> = `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\>
+
+Array of supported input modalities
+
+### TOptions
+
+`TOptions` = `unknown`
+
+Provider options type for this model
+
+### TFeatures
+
+`TFeatures` *extends* `ReadonlyArray`\&lt;`string`\> = `ReadonlyArray`\&lt;`string`\>
+
+### TTools
+
+`TTools` *extends* `ReadonlyArray`\&lt;`string`\> = `ReadonlyArray`\&lt;`string`\>
+
+## Properties
+
+### features?
+
+```ts
+optional features: TFeatures;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:35](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L35)
+
+Optional declared features (e.g. 'reasoning', 'structured_outputs')
+
+***
+
+### input
+
+```ts
+input: TInput;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L31)
+
+Supported input modalities for this model
+
+***
+
+### modelOptions
+
+```ts
+modelOptions: TOptions;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L33)
+
+Type brand for provider options - use `{} as YourOptionsType`
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L29)
+
+The model name identifier
+
+***
+
+### tools?
+
+```ts
+optional tools: TTools;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:37](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L37)
+
+Optional declared provider tools (e.g. 'web_search')
diff --git a/mintlify/ai/reference/interfaces/FinishInfo.md b/mintlify/ai/reference/interfaces/FinishInfo.md
new file mode 100644
index 000000000..dd0fb210e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/FinishInfo.md
@@ -0,0 +1,58 @@
+---
+id: FinishInfo
+title: FinishInfo
+---
+
+# Interface: FinishInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:344](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L344)
+
+Information passed to onFinish.
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:350](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L350)
+
+Final accumulated text content
+
+***
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:348](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L348)
+
+Total duration of the chat run in milliseconds
+
+***
+
+### finishReason
+
+```ts
+finishReason: string | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:346](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L346)
+
+The finish reason from the last model response
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:352](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L352)
+
+Final usage totals, if available (optionally including provider-reported cost)
diff --git a/mintlify/ai/reference/interfaces/GenerationAbortInfo.md b/mintlify/ai/reference/interfaces/GenerationAbortInfo.md
new file mode 100644
index 000000000..3a0f1ff05
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationAbortInfo.md
@@ -0,0 +1,34 @@
+---
+id: GenerationAbortInfo
+title: GenerationAbortInfo
+---
+
+# Interface: GenerationAbortInfo
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:97](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L97)
+
+Information passed to [GenerationMiddleware.onAbort](/ai/reference/interfaces/GenerationMiddleware#onabort).
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:101](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L101)
+
+Wall-clock duration until the abort, in milliseconds.
+
+***
+
+### reason?
+
+```ts
+optional reason: string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:99](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L99)
+
+The reason for the abort, if provided.
diff --git a/mintlify/ai/reference/interfaces/GenerationErrorInfo.md b/mintlify/ai/reference/interfaces/GenerationErrorInfo.md
new file mode 100644
index 000000000..0b779fe16
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationErrorInfo.md
@@ -0,0 +1,34 @@
+---
+id: GenerationErrorInfo
+title: GenerationErrorInfo
+---
+
+# Interface: GenerationErrorInfo
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:105](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L105)
+
+Information passed to [GenerationMiddleware.onError](/ai/reference/interfaces/GenerationMiddleware#onerror).
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:109](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L109)
+
+Wall-clock duration until the failure, in milliseconds.
+
+***
+
+### error
+
+```ts
+error: unknown;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:107](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L107)
+
+The thrown value (typically an `Error`).
diff --git a/mintlify/ai/reference/interfaces/GenerationFinishInfo.md b/mintlify/ai/reference/interfaces/GenerationFinishInfo.md
new file mode 100644
index 000000000..14a27b2db
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationFinishInfo.md
@@ -0,0 +1,34 @@
+---
+id: GenerationFinishInfo
+title: GenerationFinishInfo
+---
+
+# Interface: GenerationFinishInfo
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:89](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L89)
+
+Information passed to [GenerationMiddleware.onFinish](/ai/reference/interfaces/GenerationMiddleware#onfinish).
+
+## Properties
+
+### duration
+
+```ts
+duration: number;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:91](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L91)
+
+Wall-clock duration of the activity call, in milliseconds.
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:93](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L93)
+
+Unified usage, when the provider reported it.
diff --git a/mintlify/ai/reference/interfaces/GenerationMiddleware.md b/mintlify/ai/reference/interfaces/GenerationMiddleware.md
new file mode 100644
index 000000000..821db1149
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationMiddleware.md
@@ -0,0 +1,181 @@
+---
+id: GenerationMiddleware
+title: GenerationMiddleware
+---
+
+# Interface: GenerationMiddleware\&lt;TContext\>
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:145](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L145)
+
+Activity-agnostic, observe-only middleware.
+
+A thin lifecycle observer registerable on any activity via its `middleware`
+option. Unlike `ChatMiddleware` (which can also rewrite config, chunks, and
+tool calls), these hooks only observe — the right fit for the single
+request → response shape of media activities. Pass `otelMiddleware()` for
+OpenTelemetry, or implement the hooks directly for a custom backend.
+
+Hooks are awaited in registration order. A hook that throws PROPAGATES and
+fails the activity — matching `chat()` middleware semantics. Keep them cheap;
+they run inline with the request.
+
+Exactly one of `onFinish` / `onAbort` / `onError` fires per call.
+
+## Example
+
+```ts
+import { generateImage } from '@tanstack/ai'
+import { otelMiddleware } from '@tanstack/ai/middlewares/otel'
+import { openaiImage } from '@tanstack/ai-openai'
+import { trace } from '@opentelemetry/api'
+
+await generateImage({
+  adapter: openaiImage('gpt-image-1'),
+  prompt: 'A serene mountain landscape at sunset',
+  middleware: [otelMiddleware({ tracer: trace.getTracer('my-app') })],
+})
+```
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:147](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L147)
+
+Optional name, surfaced in diagnostics.
+
+***
+
+### onAbort()?
+
+```ts
+optional onAbort: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:161](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L161)
+
+Called when the activity is aborted (e.g. an abandoned stream).
+
+#### Parameters
+
+##### ctx
+
+[`GenerationMiddlewareContext`](/ai/reference/interfaces/GenerationMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`GenerationAbortInfo`](/ai/reference/interfaces/GenerationAbortInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onError()?
+
+```ts
+optional onError: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:166](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L166)
+
+Called when the activity throws before completing.
+
+#### Parameters
+
+##### ctx
+
+[`GenerationMiddlewareContext`](/ai/reference/interfaces/GenerationMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`GenerationErrorInfo`](/ai/reference/interfaces/GenerationErrorInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onFinish()?
+
+```ts
+optional onFinish: (ctx, info) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:156](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L156)
+
+Called after the activity completes successfully.
+
+#### Parameters
+
+##### ctx
+
+[`GenerationMiddlewareContext`](/ai/reference/interfaces/GenerationMiddlewareContext)\&lt;`TContext`\>
+
+##### info
+
+[`GenerationFinishInfo`](/ai/reference/interfaces/GenerationFinishInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onStart()?
+
+```ts
+optional onStart: (ctx) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:149](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L149)
+
+Called before the adapter request begins.
+
+#### Parameters
+
+##### ctx
+
+[`GenerationMiddlewareContext`](/ai/reference/interfaces/GenerationMiddlewareContext)\&lt;`TContext`\>
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+***
+
+### onUsage()?
+
+```ts
+optional onUsage: (ctx, usage) => void | Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:151](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L151)
+
+Called when the provider reports usage, before `onFinish`.
+
+#### Parameters
+
+##### ctx
+
+[`GenerationMiddlewareContext`](/ai/reference/interfaces/GenerationMiddlewareContext)\&lt;`TContext`\>
+
+##### usage
+
+[`GenerationUsageInfo`](/ai/reference/interfaces/GenerationUsageInfo)
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
diff --git a/mintlify/ai/reference/interfaces/GenerationMiddlewareContext.md b/mintlify/ai/reference/interfaces/GenerationMiddlewareContext.md
new file mode 100644
index 000000000..f0f7ea0b3
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationMiddlewareContext.md
@@ -0,0 +1,131 @@
+---
+id: GenerationMiddlewareContext
+title: GenerationMiddlewareContext
+---
+
+# Interface: GenerationMiddlewareContext\&lt;TContext\>
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:51](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L51)
+
+Stable context passed to every [GenerationMiddleware](/ai/reference/interfaces/GenerationMiddleware) hook. Created
+once per activity call and shared across the hooks of that call.
+
+Carries only fields every activity can honor. `ChatMiddlewareContext`
+structurally includes all of these plus chat-only state (messages,
+iteration, capabilities, …), which is why a chat middleware that reads those
+extra fields is not assignable to `GenerationMiddleware`.
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### activity
+
+```ts
+activity: GenerationActivity;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:58](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L58)
+
+Which activity this call is. Discriminates media from chat.
+
+***
+
+### context
+
+```ts
+context: TContext;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L74)
+
+Runtime context provided by the activity options, if any.
+
+***
+
+### createId()
+
+```ts
+createId: (prefix) => string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:72](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L72)
+
+Generate a unique id with the given prefix.
+
+#### Parameters
+
+##### prefix
+
+`string`
+
+#### Returns
+
+`string`
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:62](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L62)
+
+Model id. Emitted as `gen_ai.request.model`.
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: unknown;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:68](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L68)
+
+Provider-specific options passed to the activity, if any. Typed `unknown`
+because each activity's options are strongly typed per model; a supertype
+of `ChatMiddlewareContext`'s `modelOptions`.
+
+***
+
+### provider
+
+```ts
+provider: string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:60](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L60)
+
+Provider/adapter name (e.g. `"openai"`). Emitted as `gen_ai.system`.
+
+***
+
+### requestId
+
+```ts
+requestId: string;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:56](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L56)
+
+Stable id correlating the `onStart` / `onFinish` / `onError` / `onAbort`
+hooks of a single activity call.
+
+***
+
+### source
+
+```ts
+source: "server" | "client";
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:70](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L70)
+
+Where the call originates. Always `'server'` for media activities.
diff --git a/mintlify/ai/reference/interfaces/GenerationUsageInfo.md b/mintlify/ai/reference/interfaces/GenerationUsageInfo.md
new file mode 100644
index 000000000..0a9072edc
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/GenerationUsageInfo.md
@@ -0,0 +1,16 @@
+---
+id: GenerationUsageInfo
+title: GenerationUsageInfo
+---
+
+# Interface: GenerationUsageInfo
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:86](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L86)
+
+Token usage passed to [GenerationMiddleware.onUsage](/ai/reference/interfaces/GenerationMiddleware#onusage). Kept as an
+interface extending `TokenUsage` to preserve declaration merging for this
+publicly exported type.
+
+## Extends
+
+- `TokenUsage`
diff --git a/mintlify/ai/reference/interfaces/ImageAdapter.md b/mintlify/ai/reference/interfaces/ImageAdapter.md
new file mode 100644
index 000000000..2ab379400
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ImageAdapter.md
@@ -0,0 +1,139 @@
+---
+id: ImageAdapter
+title: ImageAdapter
+---
+
+# Interface: ImageAdapter\&lt;TModel, TProviderOptions, TModelProviderOptionsByName, TModelSizeByName, TModelInputModalitiesByName\>
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:39](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L39)
+
+Image adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'dall-e-3')
+- TProviderOptions: Base provider-specific options (already resolved)
+- TModelProviderOptionsByName: Map from model name to its specific provider options
+- TModelSizeByName: Map from model name to its supported sizes
+- TModelInputModalitiesByName: Map from model name to the non-text prompt
+  modalities it accepts (constrains the `prompt` part types at compile time)
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TModelProviderOptionsByName
+
+`TModelProviderOptionsByName` *extends* `Record`\&lt;`string`, `any`\> = `Record`\&lt;`string`, `any`\>
+
+### TModelSizeByName
+
+`TModelSizeByName` *extends* `Record`\&lt;`string`, `string` \| `undefined`\> = `Record`\&lt;`string`, `string`\>
+
+### TModelInputModalitiesByName
+
+`TModelInputModalitiesByName` *extends* [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName) = [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName)
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:60](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L60)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### modelInputModalitiesByName
+
+```ts
+modelInputModalitiesByName: TModelInputModalitiesByName;
+```
+
+#### modelProviderOptionsByName
+
+```ts
+modelProviderOptionsByName: TModelProviderOptionsByName;
+```
+
+#### modelSizeByName
+
+```ts
+modelSizeByName: TModelSizeByName;
+```
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### generateImages()
+
+```ts
+generateImages: (options) => Promise<ImageGenerationResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:70](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L70)
+
+Generate images from a prompt
+
+#### Parameters
+
+##### options
+
+[`ImageGenerationOptions`](/ai/reference/interfaces/ImageGenerationOptions)\&lt;`TProviderOptions`, `TModelSizeByName`\[`TModel`\]\>
+
+#### Returns
+
+`Promise`\&lt;[`ImageGenerationResult`](/ai/reference/interfaces/ImageGenerationResult)\>
+
+***
+
+### kind
+
+```ts
+readonly kind: "image";
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:51](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L51)
+
+Discriminator for adapter kind - used by generate() to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:55](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L55)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:53](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L53)
+
+Adapter name identifier
diff --git a/mintlify/ai/reference/interfaces/ImageGenerationOptions.md b/mintlify/ai/reference/interfaces/ImageGenerationOptions.md
new file mode 100644
index 000000000..1709fc3ea
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ImageGenerationOptions.md
@@ -0,0 +1,100 @@
+---
+id: ImageGenerationOptions
+title: ImageGenerationOptions
+---
+
+# Interface: ImageGenerationOptions\&lt;TProviderOptions, TSize\>
+
+Defined in: [packages/ai/src/types.ts:1665](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1665)
+
+Options for image generation.
+These are the common options supported across providers.
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `object`
+
+### TSize
+
+`TSize` *extends* `string` \| `undefined` = `string`
+
+## Properties
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1691](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1691)
+
+Internal logger threaded from the generateImage() entry point. Adapters must
+call logger.request() before the SDK call and logger.errors() in catch blocks.
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1670](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1670)
+
+The model to use for image generation
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1686](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1686)
+
+Model-specific options for image generation
+
+***
+
+### numberOfImages?
+
+```ts
+optional numberOfImages: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1682](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1682)
+
+Number of images to generate (default: 1)
+
+***
+
+### prompt
+
+```ts
+prompt: MediaPrompt;
+```
+
+Defined in: [packages/ai/src/types.ts:1680](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1680)
+
+Description of the desired image(s): a plain string, or an ordered array
+of content parts for image-conditioned generation (image-to-image,
+reference-guided, edit, multi-reference). Media parts may carry
+`metadata.role` to disambiguate intent (mask, control, reference, …).
+Adapters map parts onto the provider-native request — e.g. Gemini
+multimodal `contents`, OpenAI `images.edit()`, fal `image_url` /
+`mask_url` — and throw a clear runtime error for unsupported modalities.
+
+***
+
+### size?
+
+```ts
+optional size: TSize;
+```
+
+Defined in: [packages/ai/src/types.ts:1684](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1684)
+
+Image size in WIDTHxHEIGHT format (e.g., "1024x1024")
diff --git a/mintlify/ai/reference/interfaces/ImageGenerationResult.md b/mintlify/ai/reference/interfaces/ImageGenerationResult.md
new file mode 100644
index 000000000..511d7cc5a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ImageGenerationResult.md
@@ -0,0 +1,58 @@
+---
+id: ImageGenerationResult
+title: ImageGenerationResult
+---
+
+# Interface: ImageGenerationResult
+
+Defined in: [packages/ai/src/types.ts:1723](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1723)
+
+Result of image generation
+
+## Properties
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1725](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1725)
+
+Unique identifier for the generation
+
+***
+
+### images
+
+```ts
+images: GeneratedImage[];
+```
+
+Defined in: [packages/ai/src/types.ts:1729](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1729)
+
+Array of generated images
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1727](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1727)
+
+Model used for generation
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1731](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1731)
+
+Token usage information (if available)
diff --git a/mintlify/ai/reference/interfaces/ImagePart.md b/mintlify/ai/reference/interfaces/ImagePart.md
new file mode 100644
index 000000000..d23476e0a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ImagePart.md
@@ -0,0 +1,52 @@
+---
+id: ImagePart
+title: ImagePart
+---
+
+# Interface: ImagePart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:248](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L248)
+
+Image content part for multimodal messages.
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+Provider-specific metadata type (e.g., OpenAI's detail level)
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:253](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L253)
+
+Provider-specific metadata (e.g., OpenAI's detail: 'auto' | 'low' | 'high')
+
+***
+
+### source
+
+```ts
+source: ContentPartSource;
+```
+
+Defined in: [packages/ai/src/types.ts:251](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L251)
+
+Source of the image content
+
+***
+
+### type
+
+```ts
+type: "image";
+```
+
+Defined in: [packages/ai/src/types.ts:249](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L249)
diff --git a/mintlify/ai/reference/interfaces/InternalToolCallState.md b/mintlify/ai/reference/interfaces/InternalToolCallState.md
new file mode 100644
index 000000000..94d218cad
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/InternalToolCallState.md
@@ -0,0 +1,85 @@
+---
+id: InternalToolCallState
+title: InternalToolCallState
+---
+
+# Interface: InternalToolCallState
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:21](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L21)
+
+Internal state for a tool call being tracked
+
+## Properties
+
+### arguments
+
+```ts
+arguments: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L24)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:22](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L22)
+
+***
+
+### index
+
+```ts
+index: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:27](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L27)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L32)
+
+Provider-specific metadata that round-trips with the tool call
+(e.g. Gemini's `thoughtSignature`). Untyped at this layer because
+the stream processor is provider-agnostic; adapters narrow it
+via their `TToolCallMetadata` generic.
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:23](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L23)
+
+***
+
+### parsedArguments?
+
+```ts
+optional parsedArguments: any;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:26](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L26)
+
+***
+
+### state
+
+```ts
+state: ToolCallState;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:25](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L25)
diff --git a/mintlify/ai/reference/interfaces/IterationInfo.md b/mintlify/ai/reference/interfaces/IterationInfo.md
new file mode 100644
index 000000000..ea5edabe5
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/IterationInfo.md
@@ -0,0 +1,34 @@
+---
+id: IterationInfo
+title: IterationInfo
+---
+
+# Interface: IterationInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:283](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L283)
+
+Information passed to onIteration at the start of each agent loop iteration.
+
+## Properties
+
+### iteration
+
+```ts
+iteration: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:285](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L285)
+
+0-based iteration index
+
+***
+
+### messageId
+
+```ts
+messageId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:287](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L287)
+
+The assistant message ID created for this iteration
diff --git a/mintlify/ai/reference/interfaces/JSONParser.md b/mintlify/ai/reference/interfaces/JSONParser.md
new file mode 100644
index 000000000..d85be3f70
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/JSONParser.md
@@ -0,0 +1,36 @@
+---
+id: JSONParser
+title: JSONParser
+---
+
+# Interface: JSONParser
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L12)
+
+JSON Parser interface - allows for custom parser implementations
+
+## Properties
+
+### parse()
+
+```ts
+parse: (jsonString) => any;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:18](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L18)
+
+Parse a JSON string (may be incomplete/partial)
+
+#### Parameters
+
+##### jsonString
+
+`string`
+
+The JSON string to parse
+
+#### Returns
+
+`any`
+
+The parsed object, or undefined if parsing fails
diff --git a/mintlify/ai/reference/interfaces/JSONSchema.md b/mintlify/ai/reference/interfaces/JSONSchema.md
new file mode 100644
index 000000000..76656a719
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/JSONSchema.md
@@ -0,0 +1,387 @@
+---
+id: JSONSchema
+title: JSONSchema
+---
+
+# Interface: JSONSchema
+
+Defined in: [packages/ai/src/types.ts:71](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L71)
+
+JSON Schema type for defining tool input/output schemas as raw JSON Schema objects.
+This allows tools to be defined without schema libraries when you have JSON Schema definitions available.
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### $defs?
+
+```ts
+optional $defs: Record<string, JSONSchema>;
+```
+
+Defined in: [packages/ai/src/types.ts:81](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L81)
+
+***
+
+### $ref?
+
+```ts
+optional $ref: string;
+```
+
+Defined in: [packages/ai/src/types.ts:80](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L80)
+
+***
+
+### additionalItems?
+
+```ts
+optional additionalItems: boolean | JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:102](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L102)
+
+***
+
+### additionalProperties?
+
+```ts
+optional additionalProperties: boolean | JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:101](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L101)
+
+***
+
+### allOf?
+
+```ts
+optional allOf: JSONSchema[];
+```
+
+Defined in: [packages/ai/src/types.ts:83](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L83)
+
+***
+
+### anyOf?
+
+```ts
+optional anyOf: JSONSchema[];
+```
+
+Defined in: [packages/ai/src/types.ts:84](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L84)
+
+***
+
+### const?
+
+```ts
+optional const: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L77)
+
+***
+
+### default?
+
+```ts
+optional default: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L79)
+
+***
+
+### definitions?
+
+```ts
+optional definitions: Record<string, JSONSchema>;
+```
+
+Defined in: [packages/ai/src/types.ts:82](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L82)
+
+***
+
+### description?
+
+```ts
+optional description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:78](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L78)
+
+***
+
+### else?
+
+```ts
+optional else: JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:89](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L89)
+
+***
+
+### enum?
+
+```ts
+optional enum: unknown[];
+```
+
+Defined in: [packages/ai/src/types.ts:76](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L76)
+
+***
+
+### examples?
+
+```ts
+optional examples: unknown[];
+```
+
+Defined in: [packages/ai/src/types.ts:108](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L108)
+
+***
+
+### exclusiveMaximum?
+
+```ts
+optional exclusiveMaximum: number;
+```
+
+Defined in: [packages/ai/src/types.ts:93](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L93)
+
+***
+
+### exclusiveMinimum?
+
+```ts
+optional exclusiveMinimum: number;
+```
+
+Defined in: [packages/ai/src/types.ts:92](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L92)
+
+***
+
+### format?
+
+```ts
+optional format: string;
+```
+
+Defined in: [packages/ai/src/types.ts:97](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L97)
+
+***
+
+### if?
+
+```ts
+optional if: JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:87](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L87)
+
+***
+
+### items?
+
+```ts
+optional items: JSONSchema | JSONSchema[];
+```
+
+Defined in: [packages/ai/src/types.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L74)
+
+***
+
+### maximum?
+
+```ts
+optional maximum: number;
+```
+
+Defined in: [packages/ai/src/types.ts:91](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L91)
+
+***
+
+### maxItems?
+
+```ts
+optional maxItems: number;
+```
+
+Defined in: [packages/ai/src/types.ts:99](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L99)
+
+***
+
+### maxLength?
+
+```ts
+optional maxLength: number;
+```
+
+Defined in: [packages/ai/src/types.ts:95](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L95)
+
+***
+
+### maxProperties?
+
+```ts
+optional maxProperties: number;
+```
+
+Defined in: [packages/ai/src/types.ts:106](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L106)
+
+***
+
+### minimum?
+
+```ts
+optional minimum: number;
+```
+
+Defined in: [packages/ai/src/types.ts:90](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L90)
+
+***
+
+### minItems?
+
+```ts
+optional minItems: number;
+```
+
+Defined in: [packages/ai/src/types.ts:98](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L98)
+
+***
+
+### minLength?
+
+```ts
+optional minLength: number;
+```
+
+Defined in: [packages/ai/src/types.ts:94](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L94)
+
+***
+
+### minProperties?
+
+```ts
+optional minProperties: number;
+```
+
+Defined in: [packages/ai/src/types.ts:105](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L105)
+
+***
+
+### not?
+
+```ts
+optional not: JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:86](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L86)
+
+***
+
+### oneOf?
+
+```ts
+optional oneOf: JSONSchema[];
+```
+
+Defined in: [packages/ai/src/types.ts:85](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L85)
+
+***
+
+### pattern?
+
+```ts
+optional pattern: string;
+```
+
+Defined in: [packages/ai/src/types.ts:96](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L96)
+
+***
+
+### patternProperties?
+
+```ts
+optional patternProperties: Record<string, JSONSchema>;
+```
+
+Defined in: [packages/ai/src/types.ts:103](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L103)
+
+***
+
+### properties?
+
+```ts
+optional properties: Record<string, JSONSchema>;
+```
+
+Defined in: [packages/ai/src/types.ts:73](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L73)
+
+***
+
+### propertyNames?
+
+```ts
+optional propertyNames: JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L104)
+
+***
+
+### required?
+
+```ts
+optional required: string[];
+```
+
+Defined in: [packages/ai/src/types.ts:75](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L75)
+
+***
+
+### then?
+
+```ts
+optional then: JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:88](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L88)
+
+***
+
+### title?
+
+```ts
+optional title: string;
+```
+
+Defined in: [packages/ai/src/types.ts:107](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L107)
+
+***
+
+### type?
+
+```ts
+optional type: string | string[];
+```
+
+Defined in: [packages/ai/src/types.ts:72](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L72)
+
+***
+
+### uniqueItems?
+
+```ts
+optional uniqueItems: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:100](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L100)
diff --git a/mintlify/ai/reference/interfaces/LazyToolsConfig.md b/mintlify/ai/reference/interfaces/LazyToolsConfig.md
new file mode 100644
index 000000000..1b9a76679
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/LazyToolsConfig.md
@@ -0,0 +1,33 @@
+---
+id: LazyToolsConfig
+title: LazyToolsConfig
+---
+
+# Interface: LazyToolsConfig
+
+Defined in: [packages/ai/src/types.ts:712](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L712)
+
+Configuration for the lazy-tool discovery catalog, shared by chat() and
+Code Mode. Optional in both — lazy behavior is triggered purely by tools
+marked `lazy: true`; this only tunes how much of each lazy tool's
+description appears in the pre-discovery catalog. The post-discovery payload
+always returns the full description + schema.
+
+## Properties
+
+### includeDescription?
+
+```ts
+optional includeDescription: "full" | "first-sentence" | "none";
+```
+
+Defined in: [packages/ai/src/types.ts:718](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L718)
+
+How much of each lazy tool's description appears in the pre-discovery
+catalog (the names list shown before the model discovers the tool).
+
+#### Default
+
+```ts
+'none'
+```
diff --git a/mintlify/ai/reference/interfaces/Logger.md b/mintlify/ai/reference/interfaces/Logger.md
new file mode 100644
index 000000000..e5f5c5a05
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/Logger.md
@@ -0,0 +1,122 @@
+---
+id: Logger
+title: Logger
+---
+
+# Interface: Logger
+
+Defined in: [packages/ai/src/logger/types.ts:4](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L4)
+
+Pluggable logger interface consumed by every `@tanstack/ai` activity when `debug` is enabled. Supply a custom implementation via `debug: { logger }` on `chat()`, `summarize()`, `generateImage()`, etc. The four methods correspond to log levels: use `debug` for chunk-level diagnostic output, `info`/`warn` for notable events, `error` for caught exceptions.
+
+## Properties
+
+### debug()
+
+```ts
+debug: (message, meta?) => void;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:9](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L9)
+
+Called for chunk-level diagnostic output (raw provider chunks, per-chunk output, agent-loop iteration markers).
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+Structured data forwarded to the underlying logger. Loggers like pino will preserve this as a structured record; the default `ConsoleLogger` renders it with a runtime-appropriate strategy (depth-unlimited `console.dir` on Node, JSON appended to the message on Cloudflare Workers, a second `console.<level>` argument elsewhere).
+
+#### Returns
+
+`void`
+
+***
+
+### error()
+
+```ts
+error: (message, meta?) => void;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L24)
+
+Called for caught exceptions throughout the pipeline.
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+Structured data forwarded to the underlying logger. Loggers like pino will preserve this as a structured record; the default `ConsoleLogger` renders it with a runtime-appropriate strategy (depth-unlimited `console.dir` on Node, JSON appended to the message on Cloudflare Workers, a second `console.<level>` argument elsewhere).
+
+#### Returns
+
+`void`
+
+***
+
+### info()
+
+```ts
+info: (message, meta?) => void;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:14](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L14)
+
+Called for notable informational events (outgoing requests, tool invocations, middleware transitions).
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+Structured data forwarded to the underlying logger. Loggers like pino will preserve this as a structured record; the default `ConsoleLogger` renders it with a runtime-appropriate strategy (depth-unlimited `console.dir` on Node, JSON appended to the message on Cloudflare Workers, a second `console.<level>` argument elsewhere).
+
+#### Returns
+
+`void`
+
+***
+
+### warn()
+
+```ts
+warn: (message, meta?) => void;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:19](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L19)
+
+Called for notable warnings that don't halt execution (deprecations, recoverable anomalies).
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### meta?
+
+`Record`\&lt;`string`, `unknown`\>
+
+Structured data forwarded to the underlying logger. Loggers like pino will preserve this as a structured record; the default `ConsoleLogger` renders it with a runtime-appropriate strategy (depth-unlimited `console.dir` on Node, JSON appended to the message on Cloudflare Workers, a second `console.<level>` argument elsewhere).
+
+#### Returns
+
+`void`
diff --git a/mintlify/ai/reference/interfaces/MCPToolSource.md b/mintlify/ai/reference/interfaces/MCPToolSource.md
new file mode 100644
index 000000000..584128faf
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/MCPToolSource.md
@@ -0,0 +1,76 @@
+---
+id: MCPToolSource
+title: MCPToolSource
+---
+
+# Interface: MCPToolSource
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:25](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L25)
+
+Minimal structural shape that `chat({ mcp })` needs from an MCP client.
+
+`@tanstack/ai-mcp`'s `MCPClient` and `MCPClients` satisfy this interface by
+shape — the core `@tanstack/ai` package does NOT import `@tanstack/ai-mcp`
+(ai-mcp depends on ai, not the reverse).
+
+## Properties
+
+### close()
+
+```ts
+close: () => Promise<void>;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:30](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L30)
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### readResource()?
+
+```ts
+optional readResource: (uri) => Promise<McpResourceReadResult>;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L38)
+
+Reads an MCP resource by URI. Used by the chat manager to eagerly fetch
+`ui://` resource widgets (MCP Apps) after a tool result resolves.
+
+Optional — sources that do not serve `ui://` resources need not implement
+this method. `ai-mcp`'s `MCPClient` satisfies this structurally.
+
+#### Parameters
+
+##### uri
+
+`string`
+
+#### Returns
+
+`Promise`\&lt;`McpResourceReadResult`\>
+
+***
+
+### tools()
+
+```ts
+tools: (options?) => Promise<ServerTool<SchemaInput, SchemaInput, string, unknown>[]>;
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L29)
+
+#### Parameters
+
+##### options?
+
+###### lazy?
+
+`boolean`
+
+#### Returns
+
+`Promise`\&lt;[`ServerTool`](/ai/reference/interfaces/ServerTool)\&lt;[`SchemaInput`](/ai/reference/type-aliases/SchemaInput), [`SchemaInput`](/ai/reference/type-aliases/SchemaInput), `string`, `unknown`\>[]\>
diff --git a/mintlify/ai/reference/interfaces/MediaInputMetadata.md b/mintlify/ai/reference/interfaces/MediaInputMetadata.md
new file mode 100644
index 000000000..5d93f9842
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/MediaInputMetadata.md
@@ -0,0 +1,41 @@
+---
+id: MediaInputMetadata
+title: MediaInputMetadata
+---
+
+# Interface: MediaInputMetadata
+
+Defined in: [packages/ai/src/types.ts:1588](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1588)
+
+Metadata convention for image / video / audio inputs to media generation.
+Carried on `ImagePart.metadata` / `VideoPart.metadata` / `AudioPart.metadata`
+when used as conditioning inputs to `generateImage()` or `generateVideo()`.
+
+## Properties
+
+### role?
+
+```ts
+optional role: MediaInputRole;
+```
+
+Defined in: [packages/ai/src/types.ts:1590](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1590)
+
+Optional role hint disambiguating the part's intent for the adapter
+
+***
+
+### tag?
+
+```ts
+optional tag: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1599](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1599)
+
+Optional user-defined label for this input (e.g. `'woman-in-red-dress'`).
+**Informational only** — adapters never read it and the SDK never
+rewrites prompt text based on it. Use it to correlate parts with the
+references you write in your prompt using the provider's own syntax
+(fal's `@Image1`, OpenAI's "image 1", etc.), or for your own
+bookkeeping/logging.
diff --git a/mintlify/ai/reference/interfaces/MessagesSnapshotEvent.md b/mintlify/ai/reference/interfaces/MessagesSnapshotEvent.md
new file mode 100644
index 000000000..5585c9708
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/MessagesSnapshotEvent.md
@@ -0,0 +1,41 @@
+---
+id: MessagesSnapshotEvent
+title: MessagesSnapshotEvent
+---
+
+# Interface: MessagesSnapshotEvent
+
+Defined in: [packages/ai/src/types.ts:1258](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1258)
+
+Emitted to provide a snapshot of all messages in a conversation.
+
+Unlike StateSnapshot (which carries arbitrary application state),
+MessagesSnapshot specifically delivers the conversation transcript.
+
+@ag-ui/core provides: `messages` (as @ag-ui/core Message[])
+TanStack AI adds: `model?`
+
+Note: The `messages` field uses the @ag-ui/core Message type.
+Use converters to transform to/from TanStack UIMessage format.
+
+## Extends
+
+- `MessagesSnapshotEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1260](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1260)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ModelCapabilities.md b/mintlify/ai/reference/interfaces/ModelCapabilities.md
new file mode 100644
index 000000000..6263a3cfa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ModelCapabilities.md
@@ -0,0 +1,68 @@
+---
+id: ModelCapabilities
+title: ModelCapabilities
+---
+
+# Interface: ModelCapabilities\&lt;TInput, TFeatures, TTools, TOptions\>
+
+Defined in: [packages/ai/src/extend-adapter.ts:41](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L41)
+
+Capability bag accepted by the object form of `createModel`.
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\> = `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\>
+
+### TFeatures
+
+`TFeatures` *extends* `ReadonlyArray`\&lt;`string`\> = `ReadonlyArray`\&lt;`string`\>
+
+### TTools
+
+`TTools` *extends* `ReadonlyArray`\&lt;`string`\> = `ReadonlyArray`\&lt;`string`\>
+
+### TOptions
+
+`TOptions` = `unknown`
+
+## Properties
+
+### features?
+
+```ts
+optional features: TFeatures;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:48](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L48)
+
+***
+
+### input?
+
+```ts
+optional input: TInput;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:47](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L47)
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TOptions;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L50)
+
+***
+
+### tools?
+
+```ts
+optional tools: TTools;
+```
+
+Defined in: [packages/ai/src/extend-adapter.ts:49](https://github.com/TanStack/ai/blob/main/packages/ai/src/extend-adapter.ts#L49)
diff --git a/mintlify/ai/reference/interfaces/ModelMessage.md b/mintlify/ai/reference/interfaces/ModelMessage.md
new file mode 100644
index 000000000..ea916b4fa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ModelMessage.md
@@ -0,0 +1,86 @@
+---
+id: ModelMessage
+title: ModelMessage
+---
+
+# Interface: ModelMessage\&lt;TContent\>
+
+Defined in: [packages/ai/src/types.ts:347](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L347)
+
+## Type Parameters
+
+### TContent
+
+`TContent` *extends* `string` \| `null` \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)[] = `string` \| `null` \| [`ContentPart`](/ai/reference/type-aliases/ContentPart)[]
+
+## Properties
+
+### content
+
+```ts
+content: TContent;
+```
+
+Defined in: [packages/ai/src/types.ts:354](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L354)
+
+***
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/ai/src/types.ts:355](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L355)
+
+***
+
+### role
+
+```ts
+role: "user" | "assistant" | "tool";
+```
+
+Defined in: [packages/ai/src/types.ts:353](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L353)
+
+***
+
+### thinking?
+
+```ts
+optional thinking: object[];
+```
+
+Defined in: [packages/ai/src/types.ts:358](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L358)
+
+#### content
+
+```ts
+content: string;
+```
+
+#### signature?
+
+```ts
+optional signature: string;
+```
+
+***
+
+### toolCallId?
+
+```ts
+optional toolCallId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:357](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L357)
+
+***
+
+### toolCalls?
+
+```ts
+optional toolCalls: ToolCall<unknown>[];
+```
+
+Defined in: [packages/ai/src/types.ts:356](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L356)
diff --git a/mintlify/ai/reference/interfaces/NormalizedSystemPrompt.md b/mintlify/ai/reference/interfaces/NormalizedSystemPrompt.md
new file mode 100644
index 000000000..f85c99bef
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/NormalizedSystemPrompt.md
@@ -0,0 +1,39 @@
+---
+id: NormalizedSystemPrompt
+title: NormalizedSystemPrompt
+---
+
+# Interface: NormalizedSystemPrompt\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/system-prompts.ts:52](https://github.com/TanStack/ai/blob/main/packages/ai/src/system-prompts.ts#L52)
+
+Normalised shape adapters see after the chat layer turns string entries
+into `{ content }` objects. Adapters call `normalizeSystemPrompts` once at
+the top of their option-mapping pipeline so the rest of the code only has
+to handle one shape.
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/system-prompts.ts:53](https://github.com/TanStack/ai/blob/main/packages/ai/src/system-prompts.ts#L53)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/system-prompts.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/system-prompts.ts#L54)
diff --git a/mintlify/ai/reference/interfaces/ProcessorResult.md b/mintlify/ai/reference/interfaces/ProcessorResult.md
new file mode 100644
index 000000000..a48bc8f6b
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ProcessorResult.md
@@ -0,0 +1,50 @@
+---
+id: ProcessorResult
+title: ProcessorResult
+---
+
+# Interface: ProcessorResult
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:78](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L78)
+
+Result from processing a stream
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L79)
+
+***
+
+### finishReason?
+
+```ts
+optional finishReason: string | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:82](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L82)
+
+***
+
+### thinking?
+
+```ts
+optional thinking: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:80](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L80)
+
+***
+
+### toolCalls?
+
+```ts
+optional toolCalls: ToolCall<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:81](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L81)
diff --git a/mintlify/ai/reference/interfaces/ProcessorState.md b/mintlify/ai/reference/interfaces/ProcessorState.md
new file mode 100644
index 000000000..ad055a5aa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ProcessorState.md
@@ -0,0 +1,70 @@
+---
+id: ProcessorState
+title: ProcessorState
+---
+
+# Interface: ProcessorState
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:88](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L88)
+
+Current state of the processor
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:89](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L89)
+
+***
+
+### done
+
+```ts
+done: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:94](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L94)
+
+***
+
+### finishReason
+
+```ts
+finishReason: string | null;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:93](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L93)
+
+***
+
+### thinking
+
+```ts
+thinking: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:90](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L90)
+
+***
+
+### toolCallOrder
+
+```ts
+toolCallOrder: string[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:92](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L92)
+
+***
+
+### toolCalls
+
+```ts
+toolCalls: Map<string, InternalToolCallState>;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/types.ts:91](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/types.ts#L91)
diff --git a/mintlify/ai/reference/interfaces/ProviderExecutedToolMetadata.md b/mintlify/ai/reference/interfaces/ProviderExecutedToolMetadata.md
new file mode 100644
index 000000000..1e8fd1476
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ProviderExecutedToolMetadata.md
@@ -0,0 +1,38 @@
+---
+id: ProviderExecutedToolMetadata
+title: ProviderExecutedToolMetadata
+---
+
+# Interface: ProviderExecutedToolMetadata
+
+Defined in: [packages/ai/src/types.ts:178](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L178)
+
+Convention for tool-call `metadata` that marks a call as **provider-executed**
+— run by the provider's own infrastructure (e.g. Anthropic `web_search` /
+`web_fetch` server tools) rather than by the agent loop. Adapters set
+`providerExecuted: true` so that:
+
+1. The agent loop never tries to execute the call client-side (see
+   [isProviderExecutedToolCall](/ai/reference/functions/isProviderExecutedToolCall) usage in the chat engine), and
+2. The adapter can stash the raw provider result alongside it so the call —
+   and its evidence — round-trips into the next turn's request.
+
+Provider-specific payloads live under a namespaced key (e.g. `anthropic`),
+keeping this convention opaque to the framework core. The index signature
+preserves those per-adapter fields.
+
+## Indexable
+
+```ts
+[key: string]: unknown
+```
+
+## Properties
+
+### providerExecuted?
+
+```ts
+optional providerExecuted: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:179](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L179)
diff --git a/mintlify/ai/reference/interfaces/ProviderTool.md b/mintlify/ai/reference/interfaces/ProviderTool.md
new file mode 100644
index 000000000..75b027d07
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ProviderTool.md
@@ -0,0 +1,297 @@
+---
+id: ProviderTool
+title: ProviderTool
+---
+
+# Interface: ProviderTool\&lt;TProvider, TKind\>
+
+Defined in: [packages/ai/src/tools/provider-tool.ts:19](https://github.com/TanStack/ai/blob/main/packages/ai/src/tools/provider-tool.ts#L19)
+
+A provider-specific tool produced by an adapter-package factory
+(e.g. `webSearchTool` from `@tanstack/ai-anthropic/tools`).
+
+The two `~`-prefixed fields are type-only phantom brands — they are never
+assigned at runtime. They allow the core type system to match a factory's
+output against the selected model's `supports.tools` list and surface a
+compile-time error when the combination is unsupported.
+
+User-defined tools (via `toolDefinition()`) remain plain `Tool` and stay
+assignable to any model.
+
+## Extends
+
+- [`Tool`](/ai/reference/interfaces/Tool)
+
+## Type Parameters
+
+### TProvider
+
+`TProvider` *extends* `string`
+
+Provider identifier (e.g. `'anthropic'`, `'openai'`).
+
+### TKind
+
+`TKind` *extends* `string`
+
+Canonical tool-kind string matching the provider's
+  `supports.tools` entries (e.g. `'web_search'`, `'code_execution'`).
+
+## Properties
+
+### ~provider
+
+```ts
+readonly ~provider: TProvider;
+```
+
+Defined in: [packages/ai/src/tools/provider-tool.ts:23](https://github.com/TanStack/ai/blob/main/packages/ai/src/tools/provider-tool.ts#L23)
+
+***
+
+### ~toolKind
+
+```ts
+readonly ~toolKind: TKind;
+```
+
+Defined in: [packages/ai/src/tools/provider-tool.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/tools/provider-tool.ts#L24)
+
+***
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:613](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L613)
+
+Clear description of what the tool does.
+
+This is crucial - the model uses this to decide when to call the tool.
+Be specific about what the tool does, what parameters it needs, and what it returns.
+
+#### Example
+
+```ts
+"Get the current weather in a given location. Returns temperature, conditions, and forecast."
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`description`](/ai/reference/interfaces/Tool#description)
+
+***
+
+### execute()?
+
+```ts
+optional execute: (args, context?) => any;
+```
+
+Defined in: [packages/ai/src/types.ts:693](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L693)
+
+Optional function to execute when the model calls this tool.
+
+If provided, the SDK will automatically execute the function with the model's arguments
+and feed the result back to the model. This enables autonomous tool use loops.
+
+Can return any value - will be automatically stringified if needed.
+
+#### Parameters
+
+##### args
+
+`any`
+
+The arguments parsed from the model's tool call (validated against inputSchema)
+
+##### context?
+
+[`ToolExecutionContext`](/ai/reference/type-aliases/ToolExecutionContext)\&lt;`unknown`\>
+
+#### Returns
+
+`any`
+
+Result to send back to the model (validated against outputSchema if provided)
+
+#### Example
+
+```ts
+execute: async (args) => {
+  const weather = await fetchWeather(args.location);
+  return weather; // Can return object or string
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`execute`](/ai/reference/interfaces/Tool#execute)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: SchemaInput;
+```
+
+Defined in: [packages/ai/src/types.ts:653](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L653)
+
+Schema describing the tool's input parameters.
+
+Can be any Standard JSON Schema compliant schema (Zod, ArkType, Valibot, etc.) or a plain JSON Schema object.
+Defines the structure and types of arguments the tool accepts.
+The model will generate arguments matching this schema.
+Standard JSON Schema compliant schemas are converted to JSON Schema for LLM providers.
+
+#### See
+
+ - https://standardschema.dev/json-schema
+ - https://json-schema.org/
+
+#### Examples
+
+```ts
+// Using Zod v4+ schema (natively supports Standard JSON Schema)
+import { z } from 'zod';
+z.object({
+  location: z.string().describe("City name or coordinates"),
+  unit: z.enum(["celsius", "fahrenheit"]).optional()
+})
+```
+
+```ts
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+})
+```
+
+```ts
+// Using plain JSON Schema
+{
+  type: 'object',
+  properties: {
+    location: { type: 'string', description: 'City name or coordinates' },
+    unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
+  },
+  required: ['location']
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`inputSchema`](/ai/reference/interfaces/Tool#inputschema)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:699](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L699)
+
+If true, this tool is lazy and will only be sent to the LLM after being discovered via the lazy tool discovery mechanism. Works with both chat() (the synthetic discovery tool) and Code Mode (kept out of the system prompt and revealed via discover_tools).
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`lazy`](/ai/reference/interfaces/Tool#lazy)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:702](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L702)
+
+Additional metadata for adapters or custom extensions
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`metadata`](/ai/reference/interfaces/Tool#metadata)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/ai/src/types.ts:603](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L603)
+
+Unique name of the tool (used by the model to call it).
+
+Should be descriptive and follow naming conventions (e.g., snake_case or camelCase).
+Must be unique within the tools array.
+
+#### Example
+
+```ts
+"get_weather", "search_database", "sendEmail"
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`name`](/ai/reference/interfaces/Tool#name)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:696](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L696)
+
+If true, tool execution requires user approval before running. Works with both server and client tools.
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`needsApproval`](/ai/reference/interfaces/Tool#needsapproval)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: SchemaInput;
+```
+
+Defined in: [packages/ai/src/types.ts:674](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L674)
+
+Optional schema for validating tool output.
+
+Can be any Standard JSON Schema compliant schema or a plain JSON Schema object.
+If provided with a Standard Schema compliant schema, tool results will be validated
+against this schema before being sent back to the model. This catches bugs in tool
+implementations and ensures consistent output formatting.
+
+Note: This is client-side validation only - not sent to LLM providers.
+Note: Plain JSON Schema output validation is not performed at runtime.
+
+#### Example
+
+```ts
+// Using Zod
+z.object({
+  temperature: z.number(),
+  conditions: z.string(),
+  forecast: z.array(z.string()).optional()
+})
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`outputSchema`](/ai/reference/interfaces/Tool#outputschema)
diff --git a/mintlify/ai/reference/interfaces/RealtimeAdapter.md b/mintlify/ai/reference/interfaces/RealtimeAdapter.md
new file mode 100644
index 000000000..06beeba21
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeAdapter.md
@@ -0,0 +1,61 @@
+---
+id: RealtimeAdapter
+title: RealtimeAdapter
+---
+
+# Interface: RealtimeAdapter
+
+Defined in: [packages/ai/src/realtime/types.ts:312](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L312)
+
+Adapter interface for connecting to realtime providers.
+Each provider (OpenAI, ElevenLabs, etc.) implements this interface.
+
+Defined here in `@tanstack/ai` — the shared layer that both provider adapter
+packages and the client runtime (`@tanstack/ai-client`) already depend on —
+so a provider package can describe its realtime adapter without taking a
+dependency on the client-only `@tanstack/ai-client`. `@tanstack/ai-client`
+re-exports this type for backwards compatibility.
+
+## Properties
+
+### connect()
+
+```ts
+connect: (token, clientTools?) => Promise<RealtimeConnection>;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:322](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L322)
+
+Create a connection using the provided token
+
+#### Parameters
+
+##### token
+
+[`RealtimeToken`](/ai/reference/interfaces/RealtimeToken)
+
+The ephemeral token from the server
+
+##### clientTools?
+
+readonly [`AnyClientTool`](/ai/reference/type-aliases/AnyClientTool)[]
+
+Optional client-side tools to register with the provider
+
+#### Returns
+
+`Promise`\&lt;[`RealtimeConnection`](/ai/reference/interfaces/RealtimeConnection)\>
+
+A connection instance
+
+***
+
+### provider
+
+```ts
+provider: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:314](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L314)
+
+Provider identifier
diff --git a/mintlify/ai/reference/interfaces/RealtimeAudioPart.md b/mintlify/ai/reference/interfaces/RealtimeAudioPart.md
new file mode 100644
index 000000000..ba763a1d0
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeAudioPart.md
@@ -0,0 +1,56 @@
+---
+id: RealtimeAudioPart
+title: RealtimeAudioPart
+---
+
+# Interface: RealtimeAudioPart
+
+Defined in: [packages/ai/src/realtime/types.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L104)
+
+Audio content part in a realtime message
+
+## Properties
+
+### audioData?
+
+```ts
+optional audioData: ArrayBuffer;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:109](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L109)
+
+Raw audio data (optional, if stored)
+
+***
+
+### durationMs?
+
+```ts
+optional durationMs: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:111](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L111)
+
+Duration of the audio in milliseconds
+
+***
+
+### transcript
+
+```ts
+transcript: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:107](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L107)
+
+Transcription of the audio
+
+***
+
+### type
+
+```ts
+type: "audio";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:105](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L105)
diff --git a/mintlify/ai/reference/interfaces/RealtimeClientOptions.md b/mintlify/ai/reference/interfaces/RealtimeClientOptions.md
new file mode 100644
index 000000000..f801bd603
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeClientOptions.md
@@ -0,0 +1,12 @@
+---
+title: "RealtimeClientOptions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/RealtimeClientOptions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/RealtimeConnection.md b/mintlify/ai/reference/interfaces/RealtimeConnection.md
new file mode 100644
index 000000000..6218d8aba
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeConnection.md
@@ -0,0 +1,225 @@
+---
+id: RealtimeConnection
+title: RealtimeConnection
+---
+
+# Interface: RealtimeConnection
+
+Defined in: [packages/ai/src/realtime/types.ts:332](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L332)
+
+Connection interface representing an active realtime session.
+Handles audio I/O, events, and session management.
+
+## Properties
+
+### disconnect()
+
+```ts
+disconnect: () => Promise<void>;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:335](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L335)
+
+Disconnect from the realtime session
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### getAudioVisualization()
+
+```ts
+getAudioVisualization: () => AudioVisualization;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:370](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L370)
+
+Get audio visualization data
+
+#### Returns
+
+[`AudioVisualization`](/ai/reference/interfaces/AudioVisualization)
+
+***
+
+### interrupt()
+
+```ts
+interrupt: () => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:359](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L359)
+
+Interrupt the current response
+
+#### Returns
+
+`void`
+
+***
+
+### on()
+
+```ts
+on: <TEvent>(event, handler) => () => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:363](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L363)
+
+Subscribe to connection events
+
+#### Type Parameters
+
+##### TEvent
+
+`TEvent` *extends* [`RealtimeEvent`](/ai/reference/type-aliases/RealtimeEvent)
+
+#### Parameters
+
+##### event
+
+`TEvent`
+
+##### handler
+
+[`RealtimeEventHandler`](/ai/reference/type-aliases/RealtimeEventHandler)\&lt;`TEvent`\>
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### sendImage()
+
+```ts
+sendImage: (imageData, mimeType) => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:349](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L349)
+
+Send an image to the conversation
+
+#### Parameters
+
+##### imageData
+
+`string`
+
+##### mimeType
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### sendText()
+
+```ts
+sendText: (text) => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:345](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L345)
+
+Send a text message (fallback for when voice isn't available)
+
+#### Parameters
+
+##### text
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### sendToolResult()
+
+```ts
+sendToolResult: (callId, result) => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:353](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L353)
+
+Send a tool execution result back to the provider
+
+#### Parameters
+
+##### callId
+
+`string`
+
+##### result
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### startAudioCapture()
+
+```ts
+startAudioCapture: () => Promise<void>;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:339](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L339)
+
+Start capturing audio from the microphone
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### stopAudioCapture()
+
+```ts
+stopAudioCapture: () => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:341](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L341)
+
+Stop capturing audio
+
+#### Returns
+
+`void`
+
+***
+
+### updateSession()
+
+```ts
+updateSession: (config) => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:357](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L357)
+
+Update session configuration
+
+#### Parameters
+
+##### config
+
+`Partial`\&lt;[`RealtimeSessionConfig`](/ai/reference/interfaces/RealtimeSessionConfig)\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/ai/reference/interfaces/RealtimeError.md b/mintlify/ai/reference/interfaces/RealtimeError.md
new file mode 100644
index 000000000..65cd43abf
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeError.md
@@ -0,0 +1,44 @@
+---
+id: RealtimeError
+title: RealtimeError
+---
+
+# Interface: RealtimeError
+
+Defined in: [packages/ai/src/realtime/types.ts:292](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L292)
+
+Extended error with realtime-specific information
+
+## Extends
+
+- `Error`
+
+## Properties
+
+### code
+
+```ts
+code: RealtimeErrorCode;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:293](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L293)
+
+***
+
+### details?
+
+```ts
+optional details: unknown;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:295](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L295)
+
+***
+
+### provider?
+
+```ts
+optional provider: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:294](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L294)
diff --git a/mintlify/ai/reference/interfaces/RealtimeEventPayloads.md b/mintlify/ai/reference/interfaces/RealtimeEventPayloads.md
new file mode 100644
index 000000000..338862d96
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeEventPayloads.md
@@ -0,0 +1,168 @@
+---
+id: RealtimeEventPayloads
+title: RealtimeEventPayloads
+---
+
+# Interface: RealtimeEventPayloads
+
+Defined in: [packages/ai/src/realtime/types.ts:253](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L253)
+
+Event payloads for realtime events
+
+## Properties
+
+### audio\_chunk
+
+```ts
+audio_chunk: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:261](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L261)
+
+#### data
+
+```ts
+data: ArrayBuffer;
+```
+
+#### sampleRate
+
+```ts
+sampleRate: number;
+```
+
+***
+
+### error
+
+```ts
+error: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:265](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L265)
+
+#### error
+
+```ts
+error: Error;
+```
+
+***
+
+### interrupted
+
+```ts
+interrupted: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:264](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L264)
+
+#### messageId?
+
+```ts
+optional messageId: string;
+```
+
+***
+
+### message\_complete
+
+```ts
+message_complete: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:263](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L263)
+
+#### message
+
+```ts
+message: RealtimeMessage;
+```
+
+***
+
+### mode\_change
+
+```ts
+mode_change: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:255](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L255)
+
+#### mode
+
+```ts
+mode: RealtimeMode;
+```
+
+***
+
+### status\_change
+
+```ts
+status_change: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:254](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L254)
+
+#### status
+
+```ts
+status: RealtimeStatus;
+```
+
+***
+
+### tool\_call
+
+```ts
+tool_call: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:262](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L262)
+
+#### input
+
+```ts
+input: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+***
+
+### transcript
+
+```ts
+transcript: object;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:256](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L256)
+
+#### isFinal
+
+```ts
+isFinal: boolean;
+```
+
+#### role
+
+```ts
+role: "user" | "assistant";
+```
+
+#### transcript
+
+```ts
+transcript: string;
+```
diff --git a/mintlify/ai/reference/interfaces/RealtimeImagePart.md b/mintlify/ai/reference/interfaces/RealtimeImagePart.md
new file mode 100644
index 000000000..ffbbc2f1b
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeImagePart.md
@@ -0,0 +1,44 @@
+---
+id: RealtimeImagePart
+title: RealtimeImagePart
+---
+
+# Interface: RealtimeImagePart
+
+Defined in: [packages/ai/src/realtime/types.ts:138](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L138)
+
+Image content part in a realtime message
+
+## Properties
+
+### data
+
+```ts
+data: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:141](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L141)
+
+Base64-encoded image data or a URL
+
+***
+
+### mimeType
+
+```ts
+mimeType: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:143](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L143)
+
+MIME type of the image (e.g., 'image/png', 'image/jpeg')
+
+***
+
+### type
+
+```ts
+type: "image";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:139](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L139)
diff --git a/mintlify/ai/reference/interfaces/RealtimeMessage.md b/mintlify/ai/reference/interfaces/RealtimeMessage.md
new file mode 100644
index 000000000..ca34029bf
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeMessage.md
@@ -0,0 +1,94 @@
+---
+id: RealtimeMessage
+title: RealtimeMessage
+---
+
+# Interface: RealtimeMessage
+
+Defined in: [packages/ai/src/realtime/types.ts:159](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L159)
+
+A message in a realtime conversation
+
+## Properties
+
+### audioId?
+
+```ts
+optional audioId: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:171](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L171)
+
+Reference to audio buffer if stored
+
+***
+
+### durationMs?
+
+```ts
+optional durationMs: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:173](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L173)
+
+Duration of the audio in milliseconds
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:161](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L161)
+
+Unique message identifier
+
+***
+
+### interrupted?
+
+```ts
+optional interrupted: boolean;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:169](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L169)
+
+Whether this message was interrupted
+
+***
+
+### parts
+
+```ts
+parts: RealtimeMessagePart[];
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:167](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L167)
+
+Content parts of the message
+
+***
+
+### role
+
+```ts
+role: "user" | "assistant";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:163](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L163)
+
+Message role
+
+***
+
+### timestamp
+
+```ts
+timestamp: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:165](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L165)
+
+Timestamp when the message was created
diff --git a/mintlify/ai/reference/interfaces/RealtimeSessionConfig.md b/mintlify/ai/reference/interfaces/RealtimeSessionConfig.md
new file mode 100644
index 000000000..ee9c47357
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeSessionConfig.md
@@ -0,0 +1,142 @@
+---
+id: RealtimeSessionConfig
+title: RealtimeSessionConfig
+---
+
+# Interface: RealtimeSessionConfig
+
+Defined in: [packages/ai/src/realtime/types.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L32)
+
+Configuration for a realtime session
+
+## Properties
+
+### instructions?
+
+```ts
+optional instructions: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L38)
+
+System instructions for the assistant
+
+***
+
+### maxOutputTokens?
+
+```ts
+optional maxOutputTokens: number | "inf";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L50)
+
+Maximum number of tokens in a response
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L34)
+
+Model to use for the session
+
+***
+
+### outputModalities?
+
+```ts
+optional outputModalities: ("text" | "audio")[];
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:46](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L46)
+
+Output modalities for responses (e.g., ['audio', 'text'], ['text'])
+
+***
+
+### providerOptions?
+
+```ts
+optional providerOptions: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L54)
+
+Provider-specific options
+
+***
+
+### semanticEagerness?
+
+```ts
+optional semanticEagerness: "high" | "low" | "medium";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:52](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L52)
+
+Eagerness level for semantic VAD ('low', 'medium', 'high')
+
+***
+
+### temperature?
+
+```ts
+optional temperature: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:48](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L48)
+
+Temperature for generation (provider-specific range, e.g., 0.6-1.2 for OpenAI)
+
+***
+
+### tools?
+
+```ts
+optional tools: RealtimeToolConfig[];
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:40](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L40)
+
+Tools available in the session
+
+***
+
+### vadConfig?
+
+```ts
+optional vadConfig: VADConfig;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:44](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L44)
+
+VAD configuration
+
+***
+
+### vadMode?
+
+```ts
+optional vadMode: "server" | "manual" | "semantic";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L42)
+
+VAD mode
+
+***
+
+### voice?
+
+```ts
+optional voice: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:36](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L36)
+
+Voice to use for audio output
diff --git a/mintlify/ai/reference/interfaces/RealtimeTextPart.md b/mintlify/ai/reference/interfaces/RealtimeTextPart.md
new file mode 100644
index 000000000..e3ade5a1a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeTextPart.md
@@ -0,0 +1,30 @@
+---
+id: RealtimeTextPart
+title: RealtimeTextPart
+---
+
+# Interface: RealtimeTextPart
+
+Defined in: [packages/ai/src/realtime/types.ts:96](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L96)
+
+Text content part in a realtime message
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:98](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L98)
+
+***
+
+### type
+
+```ts
+type: "text";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:97](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L97)
diff --git a/mintlify/ai/reference/interfaces/RealtimeToken.md b/mintlify/ai/reference/interfaces/RealtimeToken.md
new file mode 100644
index 000000000..1a34e839a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeToken.md
@@ -0,0 +1,58 @@
+---
+id: RealtimeToken
+title: RealtimeToken
+---
+
+# Interface: RealtimeToken
+
+Defined in: [packages/ai/src/realtime/types.ts:60](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L60)
+
+Token returned by the server for client authentication
+
+## Properties
+
+### config
+
+```ts
+config: RealtimeSessionConfig;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:68](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L68)
+
+Session configuration embedded in the token
+
+***
+
+### expiresAt
+
+```ts
+expiresAt: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:66](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L66)
+
+Token expiration timestamp (ms since epoch)
+
+***
+
+### provider
+
+```ts
+provider: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:62](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L62)
+
+Provider identifier
+
+***
+
+### token
+
+```ts
+token: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:64](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L64)
+
+The ephemeral token value
diff --git a/mintlify/ai/reference/interfaces/RealtimeTokenAdapter.md b/mintlify/ai/reference/interfaces/RealtimeTokenAdapter.md
new file mode 100644
index 000000000..7f78a22cb
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeTokenAdapter.md
@@ -0,0 +1,38 @@
+---
+id: RealtimeTokenAdapter
+title: RealtimeTokenAdapter
+---
+
+# Interface: RealtimeTokenAdapter
+
+Defined in: [packages/ai/src/realtime/types.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L74)
+
+Adapter interface for generating provider-specific tokens
+
+## Properties
+
+### generateToken()
+
+```ts
+generateToken: () => Promise<RealtimeToken>;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:78](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L78)
+
+Generate an ephemeral token for client use
+
+#### Returns
+
+`Promise`\&lt;[`RealtimeToken`](/ai/reference/interfaces/RealtimeToken)\>
+
+***
+
+### provider
+
+```ts
+provider: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:76](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L76)
+
+Provider identifier
diff --git a/mintlify/ai/reference/interfaces/RealtimeTokenOptions.md b/mintlify/ai/reference/interfaces/RealtimeTokenOptions.md
new file mode 100644
index 000000000..b733d552e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeTokenOptions.md
@@ -0,0 +1,22 @@
+---
+id: RealtimeTokenOptions
+title: RealtimeTokenOptions
+---
+
+# Interface: RealtimeTokenOptions
+
+Defined in: [packages/ai/src/realtime/types.ts:84](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L84)
+
+Options for the realtimeToken function
+
+## Properties
+
+### adapter
+
+```ts
+adapter: RealtimeTokenAdapter;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:86](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L86)
+
+The token adapter to use
diff --git a/mintlify/ai/reference/interfaces/RealtimeToolCallPart.md b/mintlify/ai/reference/interfaces/RealtimeToolCallPart.md
new file mode 100644
index 000000000..9219e1ba6
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeToolCallPart.md
@@ -0,0 +1,70 @@
+---
+id: RealtimeToolCallPart
+title: RealtimeToolCallPart
+---
+
+# Interface: RealtimeToolCallPart
+
+Defined in: [packages/ai/src/realtime/types.ts:117](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L117)
+
+Tool call part in a realtime message
+
+## Properties
+
+### arguments
+
+```ts
+arguments: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:121](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L121)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:119](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L119)
+
+***
+
+### input?
+
+```ts
+optional input: unknown;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:122](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L122)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:120](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L120)
+
+***
+
+### output?
+
+```ts
+optional output: unknown;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:123](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L123)
+
+***
+
+### type
+
+```ts
+type: "tool-call";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:118](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L118)
diff --git a/mintlify/ai/reference/interfaces/RealtimeToolResultPart.md b/mintlify/ai/reference/interfaces/RealtimeToolResultPart.md
new file mode 100644
index 000000000..40c2b8166
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RealtimeToolResultPart.md
@@ -0,0 +1,40 @@
+---
+id: RealtimeToolResultPart
+title: RealtimeToolResultPart
+---
+
+# Interface: RealtimeToolResultPart
+
+Defined in: [packages/ai/src/realtime/types.ts:129](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L129)
+
+Tool result part in a realtime message
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:132](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L132)
+
+***
+
+### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:131](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L131)
+
+***
+
+### type
+
+```ts
+type: "tool-result";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:130](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L130)
diff --git a/mintlify/ai/reference/interfaces/ReasoningEncryptedValueEvent.md b/mintlify/ai/reference/interfaces/ReasoningEncryptedValueEvent.md
new file mode 100644
index 000000000..8dad6e2ce
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningEncryptedValueEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningEncryptedValueEvent
+title: ReasoningEncryptedValueEvent
+---
+
+# Interface: ReasoningEncryptedValueEvent
+
+Defined in: [packages/ai/src/types.ts:1487](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1487)
+
+Emitted for encrypted reasoning values.
+
+@ag-ui/core provides: `subtype`, `entityId`, `encryptedValue`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningEncryptedValueEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1489](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1489)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ReasoningEndEvent.md b/mintlify/ai/reference/interfaces/ReasoningEndEvent.md
new file mode 100644
index 000000000..eca7ff62e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningEndEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningEndEvent
+title: ReasoningEndEvent
+---
+
+# Interface: ReasoningEndEvent
+
+Defined in: [packages/ai/src/types.ts:1476](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1476)
+
+Emitted when reasoning ends for a message.
+
+@ag-ui/core provides: `messageId`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningEndEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1478](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1478)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ReasoningMessageContentEvent.md b/mintlify/ai/reference/interfaces/ReasoningMessageContentEvent.md
new file mode 100644
index 000000000..bd999781a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningMessageContentEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningMessageContentEvent
+title: ReasoningMessageContentEvent
+---
+
+# Interface: ReasoningMessageContentEvent
+
+Defined in: [packages/ai/src/types.ts:1454](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1454)
+
+Emitted when reasoning message content is generated.
+
+@ag-ui/core provides: `messageId`, `delta`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningMessageContentEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1456](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1456)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ReasoningMessageEndEvent.md b/mintlify/ai/reference/interfaces/ReasoningMessageEndEvent.md
new file mode 100644
index 000000000..d912eb0dc
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningMessageEndEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningMessageEndEvent
+title: ReasoningMessageEndEvent
+---
+
+# Interface: ReasoningMessageEndEvent
+
+Defined in: [packages/ai/src/types.ts:1465](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1465)
+
+Emitted when a reasoning message ends.
+
+@ag-ui/core provides: `messageId`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningMessageEndEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1467](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1467)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ReasoningMessageStartEvent.md b/mintlify/ai/reference/interfaces/ReasoningMessageStartEvent.md
new file mode 100644
index 000000000..a43e05d0b
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningMessageStartEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningMessageStartEvent
+title: ReasoningMessageStartEvent
+---
+
+# Interface: ReasoningMessageStartEvent
+
+Defined in: [packages/ai/src/types.ts:1443](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1443)
+
+Emitted when a reasoning message starts.
+
+@ag-ui/core provides: `messageId`, `role` ("reasoning")
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningMessageStartEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1445](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1445)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ReasoningStartEvent.md b/mintlify/ai/reference/interfaces/ReasoningStartEvent.md
new file mode 100644
index 000000000..68c4672a7
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ReasoningStartEvent.md
@@ -0,0 +1,35 @@
+---
+id: ReasoningStartEvent
+title: ReasoningStartEvent
+---
+
+# Interface: ReasoningStartEvent
+
+Defined in: [packages/ai/src/types.ts:1432](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1432)
+
+Emitted when reasoning starts for a message.
+
+@ag-ui/core provides: `messageId`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ReasoningStartEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1434](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1434)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ResolvedMediaPrompt.md b/mintlify/ai/reference/interfaces/ResolvedMediaPrompt.md
new file mode 100644
index 000000000..cff707cb2
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ResolvedMediaPrompt.md
@@ -0,0 +1,80 @@
+---
+id: ResolvedMediaPrompt
+title: ResolvedMediaPrompt
+---
+
+# Interface: ResolvedMediaPrompt
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:23](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L23)
+
+A [MediaPrompt](/ai/reference/type-aliases/MediaPrompt) decomposed into the views adapters consume.
+
+Adapters with native multimodal prompts (Gemini `contents`, OpenRouter
+chat content parts) consume `parts` to preserve interleaving; named-field
+providers (fal, OpenAI) consume `text` plus the typed media buckets.
+
+Prompt text is **never rewritten**: text parts are concatenated verbatim.
+Providers that support referencing inputs from the prompt (e.g. fal's
+`@Image1`, OpenAI's "image 1" prose) expect the user to write that syntax
+themselves — the SDK does not inject or substitute markers.
+
+## Properties
+
+### audios
+
+```ts
+audios: AudioPart<MediaInputMetadata>[];
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:36](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L36)
+
+Audio parts in prompt order.
+
+***
+
+### images
+
+```ts
+images: ImagePart<MediaInputMetadata>[];
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:32](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L32)
+
+Image parts in prompt order.
+
+***
+
+### parts
+
+```ts
+parts: MediaPromptPart[];
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:30](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L30)
+
+The prompt as ordered parts; a string prompt becomes one text part.
+
+***
+
+### text
+
+```ts
+text: string;
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:28](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L28)
+
+Text parts concatenated verbatim (paragraph-separated). Empty string
+for media-only prompts.
+
+***
+
+### videos
+
+```ts
+videos: VideoPart<MediaInputMetadata>[];
+```
+
+Defined in: [packages/ai/src/utilities/media-prompt.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/media-prompt.ts#L34)
+
+Video parts in prompt order.
diff --git a/mintlify/ai/reference/interfaces/ResponseFormat.md b/mintlify/ai/reference/interfaces/ResponseFormat.md
new file mode 100644
index 000000000..c40918694
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ResponseFormat.md
@@ -0,0 +1,151 @@
+---
+id: ResponseFormat
+title: ResponseFormat
+---
+
+# Interface: ResponseFormat\&lt;TData\>
+
+Defined in: [packages/ai/src/types.ts:740](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L740)
+
+Structured output format specification.
+
+Constrains the model's output to match a specific JSON structure.
+Useful for extracting structured data, form filling, or ensuring consistent response formats.
+
+## See
+
+ - https://platform.openai.com/docs/guides/structured-outputs
+ - https://sdk.vercel.ai/docs/ai-sdk-core/structured-outputs
+
+## Type Parameters
+
+### TData
+
+`TData` = `any`
+
+TypeScript type of the expected data structure (for type safety)
+
+## Properties
+
+### \_\_data?
+
+```ts
+optional __data: TData;
+```
+
+Defined in: [packages/ai/src/types.ts:818](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L818)
+
+**`Internal`**
+
+Type-only property to carry the inferred data type.
+
+This is never set at runtime - it only exists for TypeScript type inference.
+Allows the SDK to know what type to expect when parsing the response.
+
+***
+
+### json\_schema?
+
+```ts
+optional json_schema: object;
+```
+
+Defined in: [packages/ai/src/types.ts:757](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L757)
+
+JSON schema specification (required when type is "json_schema").
+
+Defines the exact structure the model's output must conform to.
+OpenAI's structured outputs will guarantee the output matches this schema.
+
+#### description?
+
+```ts
+optional description: string;
+```
+
+Optional description of what the schema represents.
+
+Helps document the purpose of this structured output.
+
+##### Example
+
+```ts
+"User profile information including name, email, and preferences"
+```
+
+#### name
+
+```ts
+name: string;
+```
+
+Unique name for the schema.
+
+Used to identify the schema in logs and debugging.
+Should be descriptive (e.g., "user_profile", "search_results").
+
+#### schema
+
+```ts
+schema: Record<string, any>;
+```
+
+JSON Schema definition for the expected output structure.
+
+Must be a valid JSON Schema (draft 2020-12 or compatible).
+The model's output will be validated against this schema.
+
+##### See
+
+https://json-schema.org/
+
+##### Example
+
+```ts
+{
+     *   type: "object",
+     *   properties: {
+     *     name: { type: "string" },
+     *     age: { type: "number" },
+     *     email: { type: "string", format: "email" }
+     *   },
+     *   required: ["name", "email"],
+     *   additionalProperties: false
+     * }
+```
+
+#### strict?
+
+```ts
+optional strict: boolean;
+```
+
+Whether to enforce strict schema validation.
+
+When true (recommended), the model guarantees output will match the schema exactly.
+When false, the model will "best effort" match the schema.
+
+Default: true (for providers that support it)
+
+##### See
+
+https://platform.openai.com/docs/guides/structured-outputs#strict-mode
+
+***
+
+### type
+
+```ts
+type: "json_object" | "json_schema";
+```
+
+Defined in: [packages/ai/src/types.ts:749](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L749)
+
+Type of structured output.
+
+- "json_object": Forces the model to output valid JSON (any structure)
+- "json_schema": Validates output against a provided JSON Schema (strict structure)
+
+#### See
+
+https://platform.openai.com/docs/api-reference/chat/create#chat-create-response_format
diff --git a/mintlify/ai/reference/interfaces/RunErrorEvent.md b/mintlify/ai/reference/interfaces/RunErrorEvent.md
new file mode 100644
index 000000000..9f66fbaed
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RunErrorEvent.md
@@ -0,0 +1,62 @@
+---
+id: RunErrorEvent
+title: RunErrorEvent
+---
+
+# Interface: RunErrorEvent
+
+Defined in: [packages/ai/src/types.ts:1083](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1083)
+
+Emitted when an error occurs during a run.
+
+@ag-ui/core provides: `message`, `code?`
+TanStack AI adds: `model?`, `error?` (deprecated nested form)
+
+## Extends
+
+- `RunErrorEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### ~~error?~~
+
+```ts
+optional error: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1090](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1090)
+
+#### ~~code?~~
+
+```ts
+optional code: string;
+```
+
+#### ~~message~~
+
+```ts
+message: string;
+```
+
+#### Deprecated
+
+Use top-level `message` and `code` fields instead.
+Kept for backward compatibility.
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1085](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1085)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/RunFinishedEvent.md b/mintlify/ai/reference/interfaces/RunFinishedEvent.md
new file mode 100644
index 000000000..350491fa5
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RunFinishedEvent.md
@@ -0,0 +1,59 @@
+---
+id: RunFinishedEvent
+title: RunFinishedEvent
+---
+
+# Interface: RunFinishedEvent
+
+Defined in: [packages/ai/src/types.ts:1068](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1068)
+
+Emitted when a run completes successfully.
+
+@ag-ui/core provides: `threadId`, `runId`, `result?`
+TanStack AI adds: `model?`, `finishReason?`, `usage?`
+
+## Extends
+
+- `RunFinishedEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### finishReason?
+
+```ts
+optional finishReason: "length" | "stop" | "content_filter" | "tool_calls" | null;
+```
+
+Defined in: [packages/ai/src/types.ts:1072](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1072)
+
+Why the generation stopped
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1070](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1070)
+
+Model identifier for multi-model support
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1074](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1074)
+
+Token usage statistics with optional detailed breakdowns and provider-reported cost.
diff --git a/mintlify/ai/reference/interfaces/RunStartedEvent.md b/mintlify/ai/reference/interfaces/RunStartedEvent.md
new file mode 100644
index 000000000..9c3ad590f
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/RunStartedEvent.md
@@ -0,0 +1,36 @@
+---
+id: RunStartedEvent
+title: RunStartedEvent
+---
+
+# Interface: RunStartedEvent
+
+Defined in: [packages/ai/src/types.ts:1040](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1040)
+
+Emitted when a run starts.
+This is the first event in any streaming response.
+
+@ag-ui/core provides: `threadId`, `runId`, `parentRunId?`, `input?`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `RunStartedEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1042](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1042)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/SandboxFileEvent.md b/mintlify/ai/reference/interfaces/SandboxFileEvent.md
new file mode 100644
index 000000000..0d0ef7e52
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/SandboxFileEvent.md
@@ -0,0 +1,42 @@
+---
+id: SandboxFileEvent
+title: SandboxFileEvent
+---
+
+# Interface: SandboxFileEvent
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:17](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L17)
+
+A file change observed inside a sandbox during a chat run.
+
+## Properties
+
+### path
+
+```ts
+path: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:20](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L20)
+
+Absolute path inside the sandbox (under the workspace root).
+
+***
+
+### timestamp
+
+```ts
+timestamp: number;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:21](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L21)
+
+***
+
+### type
+
+```ts
+type: "change" | "create" | "delete";
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:18](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L18)
diff --git a/mintlify/ai/reference/interfaces/ServerTool.md b/mintlify/ai/reference/interfaces/ServerTool.md
new file mode 100644
index 000000000..15615d478
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ServerTool.md
@@ -0,0 +1,271 @@
+---
+id: ServerTool
+title: ServerTool
+---
+
+# Interface: ServerTool\&lt;TInput, TOutput, TName, TContext\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L12)
+
+Marker type for server-side tools
+
+## Extends
+
+- [`Tool`](/ai/reference/interfaces/Tool)\&lt;`TInput`, `TOutput`, `TName`, `TContext`\>
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### \_\_toolSide
+
+```ts
+__toolSide: "server";
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:18](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L18)
+
+***
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:613](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L613)
+
+Clear description of what the tool does.
+
+This is crucial - the model uses this to decide when to call the tool.
+Be specific about what the tool does, what parameters it needs, and what it returns.
+
+#### Example
+
+```ts
+"Get the current weather in a given location. Returns temperature, conditions, and forecast."
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`description`](/ai/reference/interfaces/Tool#description)
+
+***
+
+### execute?
+
+```ts
+optional execute: ToolExecuteFunction<TInput, TOutput, TContext>;
+```
+
+Defined in: [packages/ai/src/types.ts:693](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L693)
+
+Optional function to execute when the model calls this tool.
+
+If provided, the SDK will automatically execute the function with the model's arguments
+and feed the result back to the model. This enables autonomous tool use loops.
+
+Can return any value - will be automatically stringified if needed.
+
+#### Param
+
+The arguments parsed from the model's tool call (validated against inputSchema)
+
+#### Returns
+
+Result to send back to the model (validated against outputSchema if provided)
+
+#### Example
+
+```ts
+execute: async (args) => {
+  const weather = await fetchWeather(args.location);
+  return weather; // Can return object or string
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`execute`](/ai/reference/interfaces/Tool#execute)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/types.ts:653](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L653)
+
+Schema describing the tool's input parameters.
+
+Can be any Standard JSON Schema compliant schema (Zod, ArkType, Valibot, etc.) or a plain JSON Schema object.
+Defines the structure and types of arguments the tool accepts.
+The model will generate arguments matching this schema.
+Standard JSON Schema compliant schemas are converted to JSON Schema for LLM providers.
+
+#### See
+
+ - https://standardschema.dev/json-schema
+ - https://json-schema.org/
+
+#### Examples
+
+```ts
+// Using Zod v4+ schema (natively supports Standard JSON Schema)
+import { z } from 'zod';
+z.object({
+  location: z.string().describe("City name or coordinates"),
+  unit: z.enum(["celsius", "fahrenheit"]).optional()
+})
+```
+
+```ts
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+})
+```
+
+```ts
+// Using plain JSON Schema
+{
+  type: 'object',
+  properties: {
+    location: { type: 'string', description: 'City name or coordinates' },
+    unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
+  },
+  required: ['location']
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`inputSchema`](/ai/reference/interfaces/Tool#inputschema)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:699](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L699)
+
+If true, this tool is lazy and will only be sent to the LLM after being discovered via the lazy tool discovery mechanism. Works with both chat() (the synthetic discovery tool) and Code Mode (kept out of the system prompt and revealed via discover_tools).
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`lazy`](/ai/reference/interfaces/Tool#lazy)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:702](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L702)
+
+Additional metadata for adapters or custom extensions
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`metadata`](/ai/reference/interfaces/Tool#metadata)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/types.ts:603](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L603)
+
+Unique name of the tool (used by the model to call it).
+
+Should be descriptive and follow naming conventions (e.g., snake_case or camelCase).
+Must be unique within the tools array.
+
+#### Example
+
+```ts
+"get_weather", "search_database", "sendEmail"
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`name`](/ai/reference/interfaces/Tool#name)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:696](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L696)
+
+If true, tool execution requires user approval before running. Works with both server and client tools.
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`needsApproval`](/ai/reference/interfaces/Tool#needsapproval)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/types.ts:674](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L674)
+
+Optional schema for validating tool output.
+
+Can be any Standard JSON Schema compliant schema or a plain JSON Schema object.
+If provided with a Standard Schema compliant schema, tool results will be validated
+against this schema before being sent back to the model. This catches bugs in tool
+implementations and ensures consistent output formatting.
+
+Note: This is client-side validation only - not sent to LLM providers.
+Note: Plain JSON Schema output validation is not performed at runtime.
+
+#### Example
+
+```ts
+// Using Zod
+z.object({
+  temperature: z.number(),
+  conditions: z.string(),
+  forecast: z.array(z.string()).optional()
+})
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`outputSchema`](/ai/reference/interfaces/Tool#outputschema)
diff --git a/mintlify/ai/reference/interfaces/StateDeltaEvent.md b/mintlify/ai/reference/interfaces/StateDeltaEvent.md
new file mode 100644
index 000000000..65a2e3ba8
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StateDeltaEvent.md
@@ -0,0 +1,35 @@
+---
+id: StateDeltaEvent
+title: StateDeltaEvent
+---
+
+# Interface: StateDeltaEvent
+
+Defined in: [packages/ai/src/types.ts:1285](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1285)
+
+Emitted to provide an incremental state update.
+
+@ag-ui/core provides: `delta` (any[] - JSON Patch RFC 6902)
+TanStack AI adds: `model?`
+
+## Extends
+
+- `StateDeltaEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1287](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1287)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/StateSnapshotEvent.md b/mintlify/ai/reference/interfaces/StateSnapshotEvent.md
new file mode 100644
index 000000000..6cf06d8cd
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StateSnapshotEvent.md
@@ -0,0 +1,50 @@
+---
+id: StateSnapshotEvent
+title: StateSnapshotEvent
+---
+
+# Interface: StateSnapshotEvent
+
+Defined in: [packages/ai/src/types.ts:1269](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1269)
+
+Emitted to provide a full state snapshot.
+
+@ag-ui/core provides: `snapshot` (any)
+TanStack AI adds: `model?`, `state?` (deprecated alias for snapshot)
+
+## Extends
+
+- `StateSnapshotEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1271](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1271)
+
+Model identifier for multi-model support
+
+***
+
+### ~~state?~~
+
+```ts
+optional state: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/types.ts:1276](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1276)
+
+#### Deprecated
+
+Use `snapshot` instead (from @ag-ui/core spec).
+Kept for backward compatibility.
diff --git a/mintlify/ai/reference/interfaces/StepFinishedEvent.md b/mintlify/ai/reference/interfaces/StepFinishedEvent.md
new file mode 100644
index 000000000..520ded2ce
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StepFinishedEvent.md
@@ -0,0 +1,86 @@
+---
+id: StepFinishedEvent
+title: StepFinishedEvent
+---
+
+# Interface: StepFinishedEvent
+
+Defined in: [packages/ai/src/types.ts:1230](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1230)
+
+Emitted when a thinking/reasoning step finishes.
+
+@ag-ui/core provides: `stepName`
+TanStack AI adds: `model?`, `stepId?` (deprecated alias), `delta?`, `content?`
+
+## Extends
+
+- `StepFinishedEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### content?
+
+```ts
+optional content: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1241](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1241)
+
+Full accumulated thinking content (TanStack AI internal)
+
+***
+
+### delta?
+
+```ts
+optional delta: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1239](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1239)
+
+Incremental thinking content (TanStack AI internal)
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1232](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1232)
+
+Model identifier for multi-model support
+
+***
+
+### signature?
+
+```ts
+optional signature: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1243](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1243)
+
+Provider signature for the thinking block
+
+***
+
+### ~~stepId?~~
+
+```ts
+optional stepId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1237](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1237)
+
+#### Deprecated
+
+Use `stepName` instead (from @ag-ui/core spec).
+Kept for backward compatibility.
diff --git a/mintlify/ai/reference/interfaces/StepStartedEvent.md b/mintlify/ai/reference/interfaces/StepStartedEvent.md
new file mode 100644
index 000000000..a52e026c3
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StepStartedEvent.md
@@ -0,0 +1,62 @@
+---
+id: StepStartedEvent
+title: StepStartedEvent
+---
+
+# Interface: StepStartedEvent
+
+Defined in: [packages/ai/src/types.ts:1212](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1212)
+
+Emitted when a thinking/reasoning step starts.
+
+@ag-ui/core provides: `stepName`
+TanStack AI adds: `model?`, `stepId?` (deprecated alias), `stepType?`
+
+## Extends
+
+- `StepStartedEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1214](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1214)
+
+Model identifier for multi-model support
+
+***
+
+### ~~stepId?~~
+
+```ts
+optional stepId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1219](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1219)
+
+#### Deprecated
+
+Use `stepName` instead (from @ag-ui/core spec).
+Kept for backward compatibility.
+
+***
+
+### stepType?
+
+```ts
+optional stepType: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1221](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1221)
+
+Type of step (e.g., 'thinking', 'planning')
diff --git a/mintlify/ai/reference/interfaces/StreamProcessorEvents.md b/mintlify/ai/reference/interfaces/StreamProcessorEvents.md
new file mode 100644
index 000000000..f929f5bee
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StreamProcessorEvents.md
@@ -0,0 +1,316 @@
+---
+id: StreamProcessorEvents
+title: StreamProcessorEvents
+---
+
+# Interface: StreamProcessorEvents
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:67](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L67)
+
+Events emitted by the StreamProcessor
+
+## Properties
+
+### onApprovalRequest()?
+
+```ts
+optional onApprovalRequest: (args) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:82](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L82)
+
+#### Parameters
+
+##### args
+
+###### approvalId
+
+`string`
+
+###### input
+
+`any`
+
+###### toolCallId
+
+`string`
+
+###### toolName
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### onCustomEvent()?
+
+```ts
+optional onCustomEvent: (eventType, data, context) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:90](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L90)
+
+#### Parameters
+
+##### eventType
+
+`string`
+
+##### data
+
+`unknown`
+
+##### context
+
+###### toolCallId?
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L74)
+
+#### Parameters
+
+##### error
+
+`Error`
+
+#### Returns
+
+`void`
+
+***
+
+### onMessagesChange()?
+
+```ts
+optional onMessagesChange: (messages) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:69](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L69)
+
+#### Parameters
+
+##### messages
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)\&lt;`unknown`\>[]
+
+#### Returns
+
+`void`
+
+***
+
+### onStreamEnd()?
+
+```ts
+optional onStreamEnd: (message) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:73](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L73)
+
+#### Parameters
+
+##### message
+
+[`UIMessage`](/ai/reference/interfaces/UIMessage)
+
+#### Returns
+
+`void`
+
+***
+
+### onStreamStart()?
+
+```ts
+optional onStreamStart: () => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:72](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L72)
+
+#### Returns
+
+`void`
+
+***
+
+### onStructuredOutputChange()?
+
+```ts
+optional onStructuredOutputChange: (args) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:109](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L109)
+
+#### Parameters
+
+##### args
+
+###### data?
+
+`unknown`
+
+###### delta?
+
+`string`
+
+###### errorMessage?
+
+`string`
+
+###### messageId
+
+`string`
+
+###### partial?
+
+`unknown`
+
+###### phase
+
+`"error"` \| `"complete"` \| `"start"` \| `"update"`
+
+###### raw
+
+`string`
+
+###### reasoning?
+
+`string`
+
+###### status
+
+`"error"` \| `"complete"` \| `"streaming"`
+
+#### Returns
+
+`void`
+
+***
+
+### onTextUpdate()?
+
+```ts
+optional onTextUpdate: (messageId, content) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:97](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L97)
+
+#### Parameters
+
+##### messageId
+
+`string`
+
+##### content
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### onThinkingUpdate()?
+
+```ts
+optional onThinkingUpdate: (messageId, stepId, content) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L104)
+
+#### Parameters
+
+##### messageId
+
+`string`
+
+##### stepId
+
+`string`
+
+##### content
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### onToolCall()?
+
+```ts
+optional onToolCall: (args) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L77)
+
+#### Parameters
+
+##### args
+
+###### input
+
+`any`
+
+###### toolCallId
+
+`string`
+
+###### toolName
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### onToolCallStateChange()?
+
+```ts
+optional onToolCallStateChange: (messageId, toolCallId, state, args) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:98](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L98)
+
+#### Parameters
+
+##### messageId
+
+`string`
+
+##### toolCallId
+
+`string`
+
+##### state
+
+[`ToolCallState`](/ai/reference/type-aliases/ToolCallState)
+
+##### args
+
+`string`
+
+#### Returns
+
+`void`
diff --git a/mintlify/ai/reference/interfaces/StreamProcessorHandlers.md b/mintlify/ai/reference/interfaces/StreamProcessorHandlers.md
new file mode 100644
index 000000000..5336f76db
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StreamProcessorHandlers.md
@@ -0,0 +1,12 @@
+---
+title: "StreamProcessorHandlers"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/StreamProcessorHandlers)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/StreamProcessorOptions.md b/mintlify/ai/reference/interfaces/StreamProcessorOptions.md
new file mode 100644
index 000000000..e7fe7dd5d
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StreamProcessorOptions.md
@@ -0,0 +1,82 @@
+---
+id: StreamProcessorOptions
+title: StreamProcessorOptions
+---
+
+# Interface: StreamProcessorOptions
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:125](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L125)
+
+Options for StreamProcessor
+
+## Properties
+
+### chunkStrategy?
+
+```ts
+optional chunkStrategy: ChunkStrategy;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:126](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L126)
+
+***
+
+### events?
+
+```ts
+optional events: StreamProcessorEvents;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:128](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L128)
+
+Event-driven handlers
+
+***
+
+### initialMessages?
+
+```ts
+optional initialMessages: UIMessage<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:135](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L135)
+
+Initial messages to populate the processor
+
+***
+
+### jsonParser?
+
+```ts
+optional jsonParser: object;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:129](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L129)
+
+#### parse()
+
+```ts
+parse: (jsonString) => any;
+```
+
+##### Parameters
+
+###### jsonString
+
+`string`
+
+##### Returns
+
+`any`
+
+***
+
+### recording?
+
+```ts
+optional recording: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/processor.ts:133](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/processor.ts#L133)
+
+Enable recording for replay testing
diff --git a/mintlify/ai/reference/interfaces/StructuredOutputCompleteEvent.md b/mintlify/ai/reference/interfaces/StructuredOutputCompleteEvent.md
new file mode 100644
index 000000000..56feec60f
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StructuredOutputCompleteEvent.md
@@ -0,0 +1,107 @@
+---
+id: StructuredOutputCompleteEvent
+title: StructuredOutputCompleteEvent
+---
+
+# Interface: StructuredOutputCompleteEvent\&lt;T\>
+
+Defined in: [packages/ai/src/types.ts:1319](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1319)
+
+Final event of a streaming structured-output run. Carries the validated
+`object` (typed as `T` after the orchestrator runs Standard Schema parsing),
+the `raw` JSON text that produced it, and — for thinking/reasoning models —
+the accumulated reasoning text. Adapters emit this with `T = unknown`; the
+chat orchestrator narrows to the schema's inferred type after validation.
+
+`reasoning` is `undefined` when the model produced none (most non-thinking
+models) and when the underlying adapter doesn't expose reasoning streams.
+
+`name` is a string literal so consumers can narrow directly:
+
+```ts
+if (chunk.type === 'CUSTOM' && chunk.name === 'structured-output.complete') {
+  chunk.value.object // typed as T
+}
+```
+
+## Extends
+
+- [`CustomEvent`](/ai/reference/interfaces/CustomEvent)
+
+## Type Parameters
+
+### T
+
+`T` = `unknown`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
+
+#### Inherited from
+
+[`CustomEvent`](/ai/reference/interfaces/CustomEvent).[`model`](/ai/reference/interfaces/CustomEvent#model)
+
+***
+
+### name
+
+```ts
+name: "structured-output.complete";
+```
+
+Defined in: [packages/ai/src/types.ts:1322](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1322)
+
+#### Overrides
+
+```ts
+CustomEvent.name
+```
+
+***
+
+### value
+
+```ts
+value: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1323](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1323)
+
+#### object
+
+```ts
+object: T;
+```
+
+#### raw
+
+```ts
+raw: string;
+```
+
+#### reasoning?
+
+```ts
+optional reasoning: string;
+```
+
+#### Overrides
+
+```ts
+CustomEvent.value
+```
diff --git a/mintlify/ai/reference/interfaces/StructuredOutputMiddlewareConfig.md b/mintlify/ai/reference/interfaces/StructuredOutputMiddlewareConfig.md
new file mode 100644
index 000000000..77d132faa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StructuredOutputMiddlewareConfig.md
@@ -0,0 +1,92 @@
+---
+id: StructuredOutputMiddlewareConfig
+title: StructuredOutputMiddlewareConfig
+---
+
+# Interface: StructuredOutputMiddlewareConfig
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:212](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L212)
+
+Config passed to onStructuredOutputConfig.
+
+Mirrors ChatMiddlewareConfig minus `tools` (the final structured-output call
+is a single typed-response request, not an agentic loop — tools cannot be
+forwarded to it), plus the `outputSchema` being sent to the provider.
+Middleware may transform the schema (e.g., inject $defs, strip
+vendor-incompatible keywords) by returning a partial that includes
+`outputSchema`.
+
+## Extends
+
+- `Omit`\&lt;[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig), `"tools"`\>
+
+## Properties
+
+### messages
+
+```ts
+messages: ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:195](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L195)
+
+#### Inherited from
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig).[`messages`](/ai/reference/interfaces/ChatMiddlewareConfig#messages)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:198](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L198)
+
+#### Inherited from
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig).[`metadata`](/ai/reference/interfaces/ChatMiddlewareConfig#metadata)
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:199](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L199)
+
+#### Inherited from
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig).[`modelOptions`](/ai/reference/interfaces/ChatMiddlewareConfig#modeloptions)
+
+***
+
+### outputSchema
+
+```ts
+outputSchema: JSONSchema;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:217](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L217)
+
+JSON Schema being sent to the provider for structured output.
+
+***
+
+### systemPrompts
+
+```ts
+systemPrompts: SystemPrompt[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:196](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L196)
+
+#### Inherited from
+
+[`ChatMiddlewareConfig`](/ai/reference/interfaces/ChatMiddlewareConfig).[`systemPrompts`](/ai/reference/interfaces/ChatMiddlewareConfig#systemprompts)
diff --git a/mintlify/ai/reference/interfaces/StructuredOutputPart.md b/mintlify/ai/reference/interfaces/StructuredOutputPart.md
new file mode 100644
index 000000000..8b23d7399
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StructuredOutputPart.md
@@ -0,0 +1,100 @@
+---
+id: StructuredOutputPart
+title: StructuredOutputPart
+---
+
+# Interface: StructuredOutputPart\&lt;TData\>
+
+Defined in: [packages/ai/src/types.ts:427](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L427)
+
+StructuredOutputPart — a typed structured response attached to the assistant
+message that produced it. Generic over the schema-inferred data type so
+consumers can thread `useChat({ outputSchema })`'s schema all the way down
+to `messages[i].parts[j].data`. Defaults to `unknown` so untyped consumers
+(e.g. internal codepaths that don't know about TSchema) keep working.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+## Properties
+
+### data?
+
+```ts
+optional data: TData;
+```
+
+Defined in: [packages/ai/src/types.ts:433](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L433)
+
+Validated final object — only set when `status === 'complete'`.
+
+***
+
+### errorMessage?
+
+```ts
+optional errorMessage: string;
+```
+
+Defined in: [packages/ai/src/types.ts:439](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L439)
+
+Populated when `status === 'error'`.
+
+***
+
+### partial?
+
+```ts
+optional partial: DeepPartial<TData>;
+```
+
+Defined in: [packages/ai/src/types.ts:431](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L431)
+
+Progressive parse of `raw` via parsePartialJSON — populated while streaming and after complete.
+
+***
+
+### raw
+
+```ts
+raw: string;
+```
+
+Defined in: [packages/ai/src/types.ts:435](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L435)
+
+Accumulating JSON buffer. Source of truth for wire round-trip.
+
+***
+
+### reasoning?
+
+```ts
+optional reasoning: string;
+```
+
+Defined in: [packages/ai/src/types.ts:437](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L437)
+
+Optional chain-of-thought surfaced by reasoning models alongside the structured output.
+
+***
+
+### status
+
+```ts
+status: "error" | "complete" | "streaming";
+```
+
+Defined in: [packages/ai/src/types.ts:429](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L429)
+
+***
+
+### type
+
+```ts
+type: "structured-output";
+```
+
+Defined in: [packages/ai/src/types.ts:428](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L428)
diff --git a/mintlify/ai/reference/interfaces/StructuredOutputStartEvent.md b/mintlify/ai/reference/interfaces/StructuredOutputStartEvent.md
new file mode 100644
index 000000000..9253ec23e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/StructuredOutputStartEvent.md
@@ -0,0 +1,79 @@
+---
+id: StructuredOutputStartEvent
+title: StructuredOutputStartEvent
+---
+
+# Interface: StructuredOutputStartEvent
+
+Defined in: [packages/ai/src/types.ts:1334](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1334)
+
+Emitted at the start of a streaming structured-output run, before the JSON
+deltas. Tells consumers that the upcoming `TEXT_MESSAGE_CONTENT` deltas
+belong to a structured response so they can route those bytes into a
+`StructuredOutputPart` instead of building a `TextPart`. Carries the
+`messageId` the deltas will be tagged with so the routing decision can be
+made per-message rather than globally.
+
+## Extends
+
+- [`CustomEvent`](/ai/reference/interfaces/CustomEvent)
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
+
+#### Inherited from
+
+[`CustomEvent`](/ai/reference/interfaces/CustomEvent).[`model`](/ai/reference/interfaces/CustomEvent#model)
+
+***
+
+### name
+
+```ts
+name: "structured-output.start";
+```
+
+Defined in: [packages/ai/src/types.ts:1335](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1335)
+
+#### Overrides
+
+```ts
+CustomEvent.name
+```
+
+***
+
+### value
+
+```ts
+value: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1336](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1336)
+
+#### messageId
+
+```ts
+messageId: string;
+```
+
+#### Overrides
+
+```ts
+CustomEvent.value
+```
diff --git a/mintlify/ai/reference/interfaces/SummarizationOptions.md b/mintlify/ai/reference/interfaces/SummarizationOptions.md
new file mode 100644
index 000000000..c174294b3
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/SummarizationOptions.md
@@ -0,0 +1,89 @@
+---
+id: SummarizationOptions
+title: SummarizationOptions
+---
+
+# Interface: SummarizationOptions\&lt;TProviderOptions\>
+
+Defined in: [packages/ai/src/types.ts:1540](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1540)
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### focus?
+
+```ts
+optional focus: string[];
+```
+
+Defined in: [packages/ai/src/types.ts:1547](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1547)
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1554](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1554)
+
+Internal logger threaded from the summarize() entry point. Adapters must
+call logger.request() before the SDK call and logger.errors() in catch blocks.
+
+***
+
+### maxLength?
+
+```ts
+optional maxLength: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1545](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1545)
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1543](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1543)
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1549](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1549)
+
+Provider-specific options forwarded by the summarize() activity.
+
+***
+
+### style?
+
+```ts
+optional style: "bullet-points" | "paragraph" | "concise";
+```
+
+Defined in: [packages/ai/src/types.ts:1546](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1546)
+
+***
+
+### text
+
+```ts
+text: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1544](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1544)
diff --git a/mintlify/ai/reference/interfaces/SummarizationResult.md b/mintlify/ai/reference/interfaces/SummarizationResult.md
new file mode 100644
index 000000000..3e301ac0e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/SummarizationResult.md
@@ -0,0 +1,48 @@
+---
+id: SummarizationResult
+title: SummarizationResult
+---
+
+# Interface: SummarizationResult
+
+Defined in: [packages/ai/src/types.ts:1557](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1557)
+
+## Properties
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1558](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1558)
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1559](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1559)
+
+***
+
+### summary
+
+```ts
+summary: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1560](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1560)
+
+***
+
+### usage
+
+```ts
+usage: TokenUsage;
+```
+
+Defined in: [packages/ai/src/types.ts:1561](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1561)
diff --git a/mintlify/ai/reference/interfaces/SummarizeAdapter.md b/mintlify/ai/reference/interfaces/SummarizeAdapter.md
new file mode 100644
index 000000000..415490332
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/SummarizeAdapter.md
@@ -0,0 +1,129 @@
+---
+id: SummarizeAdapter
+title: SummarizeAdapter
+---
+
+# Interface: SummarizeAdapter\&lt;TModel, TProviderOptions\>
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:28](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L28)
+
+Summarize adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'gpt-4o')
+- TProviderOptions: Provider-specific options (already resolved)
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:42](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L42)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### kind
+
+```ts
+readonly kind: "summarize";
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L33)
+
+Discriminator for adapter kind - used by generate() to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:37](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L37)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:35](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L35)
+
+Adapter name identifier
+
+***
+
+### summarize()
+
+```ts
+summarize: (options) => Promise<SummarizationResult>;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:49](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L49)
+
+Summarize the given text
+
+#### Parameters
+
+##### options
+
+[`SummarizationOptions`](/ai/reference/interfaces/SummarizationOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`Promise`\&lt;[`SummarizationResult`](/ai/reference/interfaces/SummarizationResult)\>
+
+***
+
+### summarizeStream()?
+
+```ts
+optional summarizeStream: (options) => AsyncIterable<AGUIEvent>;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:58](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L58)
+
+Stream summarization of the given text.
+Optional - if not implemented, the activity layer will fall back to
+non-streaming summarize and yield the result as a single chunk.
+
+#### Parameters
+
+##### options
+
+[`SummarizationOptions`](/ai/reference/interfaces/SummarizationOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
diff --git a/mintlify/ai/reference/interfaces/TTSAdapter.md b/mintlify/ai/reference/interfaces/TTSAdapter.md
new file mode 100644
index 000000000..7d63815aa
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TTSAdapter.md
@@ -0,0 +1,105 @@
+---
+id: TTSAdapter
+title: TTSAdapter
+---
+
+# Interface: TTSAdapter\&lt;TModel, TProviderOptions\>
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L24)
+
+TTS adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'tts-1')
+- TProviderOptions: Provider-specific options (already resolved)
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L38)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### generateSpeech()
+
+```ts
+generateSpeech: (options) => Promise<TTSResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:45](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L45)
+
+Generate speech from text
+
+#### Parameters
+
+##### options
+
+[`TTSOptions`](/ai/reference/interfaces/TTSOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`Promise`\&lt;[`TTSResult`](/ai/reference/interfaces/TTSResult)\>
+
+***
+
+### kind
+
+```ts
+readonly kind: "tts";
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L29)
+
+Discriminator for adapter kind - used to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L33)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L31)
+
+Adapter name identifier
diff --git a/mintlify/ai/reference/interfaces/TTSOptions.md b/mintlify/ai/reference/interfaces/TTSOptions.md
new file mode 100644
index 000000000..32f5b3f41
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TTSOptions.md
@@ -0,0 +1,103 @@
+---
+id: TTSOptions
+title: TTSOptions
+---
+
+# Interface: TTSOptions\&lt;TProviderOptions\>
+
+Defined in: [packages/ai/src/types.ts:1884](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1884)
+
+Options for text-to-speech generation.
+These are the common options supported across providers.
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `object`
+
+## Properties
+
+### format?
+
+```ts
+optional format: "mp3" | "opus" | "aac" | "flac" | "wav" | "pcm";
+```
+
+Defined in: [packages/ai/src/types.ts:1892](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1892)
+
+The output audio format
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1902](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1902)
+
+Internal logger threaded from the generateSpeech() entry point. Adapters
+must call logger.request() before the SDK call and logger.errors() in
+catch blocks.
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1886](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1886)
+
+The model to use for TTS generation
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1896](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1896)
+
+Model-specific options for TTS generation
+
+***
+
+### speed?
+
+```ts
+optional speed: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1894](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1894)
+
+The speed of the generated audio (0.25 to 4.0)
+
+***
+
+### text
+
+```ts
+text: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1888](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1888)
+
+The text to convert to speech
+
+***
+
+### voice?
+
+```ts
+optional voice: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1890](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1890)
+
+The voice to use for generation
diff --git a/mintlify/ai/reference/interfaces/TTSResult.md b/mintlify/ai/reference/interfaces/TTSResult.md
new file mode 100644
index 000000000..09753a1ea
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TTSResult.md
@@ -0,0 +1,94 @@
+---
+id: TTSResult
+title: TTSResult
+---
+
+# Interface: TTSResult
+
+Defined in: [packages/ai/src/types.ts:1908](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1908)
+
+Result of text-to-speech generation.
+
+## Properties
+
+### audio
+
+```ts
+audio: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1914](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1914)
+
+Base64-encoded audio data
+
+***
+
+### contentType?
+
+```ts
+optional contentType: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1920](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1920)
+
+Content type of the audio (e.g., 'audio/mp3')
+
+***
+
+### duration?
+
+```ts
+optional duration: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1918](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1918)
+
+Duration of the audio in seconds, if available
+
+***
+
+### format
+
+```ts
+format: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1916](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1916)
+
+Audio format of the generated audio
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1910](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1910)
+
+Unique identifier for the generation
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1912](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1912)
+
+Model used for generation
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1922](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1922)
+
+Token usage information (if provided by the adapter)
diff --git a/mintlify/ai/reference/interfaces/TextAdapter.md b/mintlify/ai/reference/interfaces/TextAdapter.md
new file mode 100644
index 000000000..35d6b66ce
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextAdapter.md
@@ -0,0 +1,277 @@
+---
+id: TextAdapter
+title: TextAdapter
+---
+
+# Interface: TextAdapter\&lt;TModel, TProviderOptions, TInputModalities, TMessageMetadataByModality, TToolCapabilities, TToolCallMetadata, TSystemPromptMetadata\>
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:67](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L67)
+
+Text adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'gpt-4o')
+- TProviderOptions: Provider-specific options for this model (already resolved)
+- TInputModalities: Supported input modalities for this model (already resolved)
+- TMessageMetadata: Metadata types for content parts (already resolved)
+- TToolCapabilities: Tuple of tool-kind strings supported by this model, resolved from `supports.tools`
+- TToolCallMetadata: Metadata type that round-trips with tool calls (e.g. Gemini's `thoughtSignature`)
+- TSystemPromptMetadata: Provider-typed metadata accepted on each
+  `systemPrompts[i]` entry (e.g. Anthropic `cache_control`). Defaults to
+  `never` — adapters without per-prompt metadata reject the `metadata`
+  field at the call site.
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `Record`\&lt;`string`, `any`\>
+
+### TInputModalities
+
+`TInputModalities` *extends* `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\>
+
+### TMessageMetadataByModality
+
+`TMessageMetadataByModality` *extends* [`DefaultMessageMetadataByModality`](/ai/reference/interfaces/DefaultMessageMetadataByModality)
+
+### TToolCapabilities
+
+`TToolCapabilities` *extends* `ReadonlyArray`\&lt;`string`\> = `ReadonlyArray`\&lt;`string`\>
+
+### TToolCallMetadata
+
+`TToolCallMetadata` = `unknown`
+
+### TSystemPromptMetadata
+
+`TSystemPromptMetadata` = `never`
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:95](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L95)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### inputModalities
+
+```ts
+inputModalities: TInputModalities;
+```
+
+#### messageMetadataByModality
+
+```ts
+messageMetadataByModality: TMessageMetadataByModality;
+```
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+#### systemPromptMetadata
+
+```ts
+systemPromptMetadata: TSystemPromptMetadata;
+```
+
+#### toolCallMetadata
+
+```ts
+toolCallMetadata: TToolCallMetadata;
+```
+
+#### toolCapabilities
+
+```ts
+toolCapabilities: TToolCapabilities;
+```
+
+***
+
+### chatStream()
+
+```ts
+chatStream: (options) => AsyncIterable<AGUIEvent>;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:107](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L107)
+
+Stream text completions from the model
+
+#### Parameters
+
+##### options
+
+[`TextOptions`](/ai/reference/interfaces/TextOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+***
+
+### kind
+
+```ts
+readonly kind: "text";
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L77)
+
+Discriminator for adapter kind
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:81](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L81)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L79)
+
+Provider name identifier (e.g., 'openai', 'anthropic')
+
+***
+
+### requires?
+
+```ts
+readonly optional requires: readonly CapabilityHandle[];
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:90](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L90)
+
+Capabilities this adapter requires at runtime. `chat()` validates that the
+configured middleware provides each one. Model adapters omit this; harness
+adapters (e.g. a future `claudeCode()`) declare e.g. `[sandboxCapability]`.
+Runtime access to capabilities from inside the adapter is not yet wired —
+this is the declaration/validation surface only.
+
+***
+
+### structuredOutput()
+
+```ts
+structuredOutput: (options) => Promise<StructuredOutputResult<unknown>>;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:119](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L119)
+
+Generate structured output using the provider's native structured output API.
+This method uses stream: false and sends the JSON schema to the provider
+to ensure the response conforms to the expected structure.
+
+#### Parameters
+
+##### options
+
+`StructuredOutputOptions`\&lt;`TProviderOptions`\>
+
+Structured output options containing chat options and JSON schema
+
+#### Returns
+
+`Promise`\&lt;`StructuredOutputResult`\&lt;`unknown`\>\>
+
+Promise with the raw data (validation is done in the chat function)
+
+***
+
+### structuredOutputStream()?
+
+```ts
+optional structuredOutputStream: (options) => AsyncIterable<AGUIEvent>;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:136](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L136)
+
+Stream structured output using the provider's native streaming structured
+output API (stream + response_format json_schema in a single request).
+
+Optional — adapters without native streaming JSON omit this method and the
+activity layer synthesizes a stream around the non-streaming
+`structuredOutput` call.
+
+Implementations must emit standard AG-UI lifecycle events (RUN_STARTED,
+TEXT_MESSAGE_*, RUN_FINISHED) carrying raw JSON text deltas, plus a final
+`CUSTOM` event named `structured-output.complete` whose `value` is
+`{ object, raw, reasoning? }`.
+
+#### Parameters
+
+##### options
+
+`StructuredOutputOptions`\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`AsyncIterable`\&lt;[`AGUIEvent`](/ai/reference/type-aliases/AGUIEvent)\>
+
+***
+
+### supportsCombinedToolsAndSchema()?
+
+```ts
+optional supportsCombinedToolsAndSchema: (modelOptions?) => boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:159](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L159)
+
+Declares whether the adapter supports combining `tools` and a
+schema-constrained final answer in a single streaming request.
+
+When `true`, the engine wires `outputSchema` into the regular
+`chatStream()` call and skips the separate `runStructuredFinalization`
+round-trip. The model's natural final turn carries the
+schema-constrained JSON text and the engine harvests it from the agent
+loop's accumulated content.
+
+When `false`, `undefined`, or the method is omitted, the engine runs
+the agent loop without `outputSchema` and then issues a separate
+`structuredOutput` / `structuredOutputStream` call against the JSON
+schema for finalization (the legacy path).
+
+The method receives the per-call `modelOptions` so providers whose
+support depends on the resolved upstream model (e.g. OpenRouter) can
+answer per-request. Most adapters can return a constant.
+
+#### Parameters
+
+##### modelOptions?
+
+`TProviderOptions`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/ai/reference/interfaces/TextCompletionChunk.md b/mintlify/ai/reference/interfaces/TextCompletionChunk.md
new file mode 100644
index 000000000..8be614b33
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextCompletionChunk.md
@@ -0,0 +1,68 @@
+---
+id: TextCompletionChunk
+title: TextCompletionChunk
+---
+
+# Interface: TextCompletionChunk
+
+Defined in: [packages/ai/src/types.ts:1531](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1531)
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1534](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1534)
+
+***
+
+### finishReason?
+
+```ts
+optional finishReason: "length" | "stop" | "content_filter" | null;
+```
+
+Defined in: [packages/ai/src/types.ts:1536](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1536)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1532](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1532)
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1533](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1533)
+
+***
+
+### role?
+
+```ts
+optional role: "assistant";
+```
+
+Defined in: [packages/ai/src/types.ts:1535](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1535)
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1537](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1537)
diff --git a/mintlify/ai/reference/interfaces/TextMessageContentEvent.md b/mintlify/ai/reference/interfaces/TextMessageContentEvent.md
new file mode 100644
index 000000000..f8beaa88a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextMessageContentEvent.md
@@ -0,0 +1,47 @@
+---
+id: TextMessageContentEvent
+title: TextMessageContentEvent
+---
+
+# Interface: TextMessageContentEvent
+
+Defined in: [packages/ai/src/types.ts:1115](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1115)
+
+Emitted when text content is generated (streaming tokens).
+
+@ag-ui/core provides: `messageId`, `delta`
+TanStack AI adds: `model?`, `content?` (accumulated)
+
+## Extends
+
+- `TextMessageContentEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### content?
+
+```ts
+optional content: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1119](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1119)
+
+Full accumulated content so far (TanStack AI internal, for debugging)
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1117](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1117)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/TextMessageEndEvent.md b/mintlify/ai/reference/interfaces/TextMessageEndEvent.md
new file mode 100644
index 000000000..05c55db20
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextMessageEndEvent.md
@@ -0,0 +1,35 @@
+---
+id: TextMessageEndEvent
+title: TextMessageEndEvent
+---
+
+# Interface: TextMessageEndEvent
+
+Defined in: [packages/ai/src/types.ts:1128](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1128)
+
+Emitted when a text message completes.
+
+@ag-ui/core provides: `messageId`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `TextMessageEndEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1130](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1130)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/TextMessageStartEvent.md b/mintlify/ai/reference/interfaces/TextMessageStartEvent.md
new file mode 100644
index 000000000..5ca1151e5
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextMessageStartEvent.md
@@ -0,0 +1,35 @@
+---
+id: TextMessageStartEvent
+title: TextMessageStartEvent
+---
+
+# Interface: TextMessageStartEvent
+
+Defined in: [packages/ai/src/types.ts:1104](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1104)
+
+Emitted when a text message starts.
+
+@ag-ui/core provides: `messageId`, `role?`, `name?`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `TextMessageStartEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1106](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1106)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/TextOptions.md b/mintlify/ai/reference/interfaces/TextOptions.md
new file mode 100644
index 000000000..907acbd94
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextOptions.md
@@ -0,0 +1,325 @@
+---
+id: TextOptions
+title: TextOptions
+---
+
+# Interface: TextOptions\&lt;TProviderOptionsSuperset, TProviderOptionsForModel, TContext\>
+
+Defined in: [packages/ai/src/types.ts:850](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L850)
+
+Options passed into the SDK and further piped to the AI provider.
+
+## Type Parameters
+
+### TProviderOptionsSuperset
+
+`TProviderOptionsSuperset` *extends* `Record`\&lt;`string`, `any`\> = `Record`\&lt;`string`, `any`\>
+
+### TProviderOptionsForModel
+
+`TProviderOptionsForModel` = `TProviderOptionsSuperset`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### abortController?
+
+```ts
+optional abortController: AbortController;
+```
+
+Defined in: [packages/ai/src/types.ts:947](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L947)
+
+AbortController for request cancellation.
+
+Allows you to cancel an in-progress request using an AbortController.
+Useful for implementing timeouts or user-initiated cancellations.
+
+#### Example
+
+```ts
+const abortController = new AbortController();
+setTimeout(() => abortController.abort(), 5000); // Cancel after 5 seconds
+await chat({ ..., abortController });
+```
+
+#### See
+
+https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+
+***
+
+### agentLoopStrategy?
+
+```ts
+optional agentLoopStrategy: AgentLoopStrategy;
+```
+
+Defined in: [packages/ai/src/types.ts:878](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L878)
+
+***
+
+### approvals?
+
+```ts
+optional approvals: ReadonlyMap<string, boolean>;
+```
+
+Defined in: [packages/ai/src/types.ts:990](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L990)
+
+Client approval decisions for this run, keyed by approval id. The engine
+populates this from approvals carried on the incoming messages. Harness
+adapters consult it to resolve `ask`-policy permission requests (the agent
+pauses on a risky action; the client re-runs with a decision recorded
+here). Undefined for direct adapter usage outside the chat engine.
+
+***
+
+### capabilities?
+
+```ts
+optional capabilities: CapabilityContext;
+```
+
+Defined in: [packages/ai/src/types.ts:981](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L981)
+
+Middleware capability context for this run. The engine populates it with
+the live middleware context so harness adapters that declare
+`requires: [SomeCapability]` can read provided capabilities from inside
+`chatStream` — e.g. `getSandbox(options.capabilities)`. Capabilities are
+provisioned by middleware `setup` before the adapter runs. Undefined for
+direct adapter usage outside the chat engine.
+
+***
+
+### context?
+
+```ts
+optional context: TContext;
+```
+
+Defined in: [packages/ai/src/types.ts:862](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L862)
+
+Runtime context provided by the caller and passed to middleware and
+server-side tool implementations.
+
+***
+
+### ~~conversationId?~~
+
+```ts
+optional conversationId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:933](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L933)
+
+#### Deprecated
+
+Use `threadId` instead. `conversationId` is the legacy
+pre-AG-UI name for the same concept (a stable per-conversation
+identifier used to correlate client/server devtools events). When
+`conversationId` is omitted, the runtime falls back to `threadId`
+automatically, so most callers can simply pass `threadId` (or rely
+on `chatParamsFromRequest`, which surfaces it on `params`).
+
+Will be removed in a future major release.
+
+***
+
+### lazyToolsConfig?
+
+```ts
+optional lazyToolsConfig: LazyToolsConfig;
+```
+
+Defined in: [packages/ai/src/types.ts:884](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L884)
+
+Optional configuration for lazy-tool discovery (tools marked `lazy: true`).
+Tunes how much of each lazy tool's description appears in the discovery
+catalog. Optional — defaults to `{ includeDescription: 'none' }`.
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:954](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L954)
+
+Internal logger threaded from the chat entry point. Adapter implementations
+must call `logger.request()` before SDK calls, `logger.provider()` for each
+chunk received, and `logger.errors()` in catch blocks.
+
+***
+
+### messages
+
+```ts
+messages: ModelMessage<
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[]
+  | null>[];
+```
+
+Defined in: [packages/ai/src/types.ts:856](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L856)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:895](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L895)
+
+Observability metadata attached to this call. Surfaced to middleware,
+devtools, and the event client; values may be arbitrarily structured
+(objects, arrays). Adapters never forward this field onto the provider
+wire request.
+
+To send provider-side request metadata, use the provider's
+`modelOptions` field instead, where the provider supports one (e.g.
+OpenAI's and OpenRouter's `metadata` are both Record&lt;string, string>).
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:855](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L855)
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptionsForModel;
+```
+
+Defined in: [packages/ai/src/types.ts:896](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L896)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: SchemaInput;
+```
+
+Defined in: [packages/ai/src/types.ts:922](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L922)
+
+Schema for structured output.
+
+**Two distinct use sites:**
+
+1. **User-facing (activity layer):** accepts any
+   [SchemaInput](/ai/reference/type-aliases/SchemaInput) — Zod, ArkType, Valibot, or a raw JSON Schema.
+   The activity layer converts to JSON Schema before handing off.
+
+2. **Adapter-facing (`chatStream` call):** the engine populates this with
+   a pre-converted JSON Schema **only** when the adapter declared
+   `supportsCombinedToolsAndSchema(modelOptions) === true`. The adapter
+   should then wire the schema into the upstream request (e.g.
+   `response_format: { type: 'json_schema', ... }`, `text.format`,
+   `output_format`) alongside any `tools`. The model's natural final
+   turn carries the schema-constrained JSON text and the engine
+   harvests it from the agent loop without a separate finalization
+   round-trip.
+
+   Adapters that did NOT declare the capability never see this field
+   populated — the engine instead invokes `structuredOutput` /
+   `structuredOutputStream` after the agent loop.
+
+***
+
+### parentRunId?
+
+```ts
+optional parentRunId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:971](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L971)
+
+Parent run ID for AG-UI protocol nested run correlation.
+Surfaced for observability/middleware; not consumed by the LLM call.
+
+***
+
+### request?
+
+```ts
+optional request: Request | RequestInit;
+```
+
+Defined in: [packages/ai/src/types.ts:897](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L897)
+
+***
+
+### runId?
+
+```ts
+optional runId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:966](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L966)
+
+Run ID for AG-UI protocol run correlation.
+When provided, this will be used in RunStartedEvent and RunFinishedEvent.
+If not provided, a unique ID will be generated.
+
+***
+
+### systemPrompts?
+
+```ts
+optional systemPrompts: SystemPrompt[];
+```
+
+Defined in: [packages/ai/src/types.ts:877](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L877)
+
+System prompts to include with the request.
+
+Accepts plain strings (the common case) or `{ content, metadata }`
+objects that let providers attach typed metadata (e.g. Anthropic
+`cache_control` for prompt caching) per prompt. At the chat call site
+the adapter narrows `metadata`'s type via `~types['systemPromptMetadata']`
+— providers that don't declare one default to `never`, which makes the
+field carry no meaningful value (TypeScript will only accept
+`undefined` there). Provider-foreign metadata that reaches an adapter
+via JS / `as any` is silently dropped, never written to the wire.
+
+#### See
+
+SystemPrompt
+
+***
+
+### threadId?
+
+```ts
+optional threadId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:960](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L960)
+
+Thread ID for AG-UI protocol run correlation.
+When provided, this will be used in RunStartedEvent and RunFinishedEvent.
+
+***
+
+### tools?
+
+```ts
+optional tools: AnyTool[];
+```
+
+Defined in: [packages/ai/src/types.ts:857](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L857)
diff --git a/mintlify/ai/reference/interfaces/TextPart.md b/mintlify/ai/reference/interfaces/TextPart.md
new file mode 100644
index 000000000..213080bd2
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TextPart.md
@@ -0,0 +1,46 @@
+---
+id: TextPart
+title: TextPart
+---
+
+# Interface: TextPart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:364](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L364)
+
+Message parts - building blocks of UIMessage
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/types.ts:366](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L366)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:367](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L367)
+
+***
+
+### type
+
+```ts
+type: "text";
+```
+
+Defined in: [packages/ai/src/types.ts:365](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L365)
diff --git a/mintlify/ai/reference/interfaces/ThinkingPart.md b/mintlify/ai/reference/interfaces/ThinkingPart.md
new file mode 100644
index 000000000..fedb61692
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ThinkingPart.md
@@ -0,0 +1,48 @@
+---
+id: ThinkingPart
+title: ThinkingPart
+---
+
+# Interface: ThinkingPart
+
+Defined in: [packages/ai/src/types.ts:399](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L399)
+
+## Properties
+
+### content
+
+```ts
+content: string;
+```
+
+Defined in: [packages/ai/src/types.ts:401](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L401)
+
+***
+
+### signature?
+
+```ts
+optional signature: string;
+```
+
+Defined in: [packages/ai/src/types.ts:403](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L403)
+
+***
+
+### stepId?
+
+```ts
+optional stepId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:402](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L402)
+
+***
+
+### type
+
+```ts
+type: "thinking";
+```
+
+Defined in: [packages/ai/src/types.ts:400](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L400)
diff --git a/mintlify/ai/reference/interfaces/ThinkingStreamChunk.md b/mintlify/ai/reference/interfaces/ThinkingStreamChunk.md
new file mode 100644
index 000000000..85bd82808
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ThinkingStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ThinkingStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ThinkingStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/Tool.md b/mintlify/ai/reference/interfaces/Tool.md
new file mode 100644
index 000000000..e7bfcf0fe
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/Tool.md
@@ -0,0 +1,243 @@
+---
+id: Tool
+title: Tool
+---
+
+# Interface: Tool\&lt;TInput, TOutput, TName, TContext\>
+
+Defined in: [packages/ai/src/types.ts:589](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L589)
+
+Tool/Function definition for function calling.
+
+Tools allow the model to interact with external systems, APIs, or perform computations.
+The model will decide when to call tools based on the user's request and the tool descriptions.
+
+Tools can use any Standard JSON Schema compliant library (Zod, ArkType, Valibot, etc.)
+or plain JSON Schema objects for runtime validation and type safety.
+
+## See
+
+ - https://platform.openai.com/docs/guides/function-calling
+ - https://docs.anthropic.com/claude/docs/tool-use
+ - https://standardschema.dev/json-schema
+
+## Extended by
+
+- [`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance)
+- [`ServerTool`](/ai/reference/interfaces/ServerTool)
+- [`ProviderTool`](/ai/reference/interfaces/ProviderTool)
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:613](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L613)
+
+Clear description of what the tool does.
+
+This is crucial - the model uses this to decide when to call the tool.
+Be specific about what the tool does, what parameters it needs, and what it returns.
+
+#### Example
+
+```ts
+"Get the current weather in a given location. Returns temperature, conditions, and forecast."
+```
+
+***
+
+### execute?
+
+```ts
+optional execute: ToolExecuteFunction<TInput, TOutput, TContext>;
+```
+
+Defined in: [packages/ai/src/types.ts:693](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L693)
+
+Optional function to execute when the model calls this tool.
+
+If provided, the SDK will automatically execute the function with the model's arguments
+and feed the result back to the model. This enables autonomous tool use loops.
+
+Can return any value - will be automatically stringified if needed.
+
+#### Param
+
+The arguments parsed from the model's tool call (validated against inputSchema)
+
+#### Returns
+
+Result to send back to the model (validated against outputSchema if provided)
+
+#### Example
+
+```ts
+execute: async (args) => {
+  const weather = await fetchWeather(args.location);
+  return weather; // Can return object or string
+}
+```
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/types.ts:653](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L653)
+
+Schema describing the tool's input parameters.
+
+Can be any Standard JSON Schema compliant schema (Zod, ArkType, Valibot, etc.) or a plain JSON Schema object.
+Defines the structure and types of arguments the tool accepts.
+The model will generate arguments matching this schema.
+Standard JSON Schema compliant schemas are converted to JSON Schema for LLM providers.
+
+#### See
+
+ - https://standardschema.dev/json-schema
+ - https://json-schema.org/
+
+#### Examples
+
+```ts
+// Using Zod v4+ schema (natively supports Standard JSON Schema)
+import { z } from 'zod';
+z.object({
+  location: z.string().describe("City name or coordinates"),
+  unit: z.enum(["celsius", "fahrenheit"]).optional()
+})
+```
+
+```ts
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+})
+```
+
+```ts
+// Using plain JSON Schema
+{
+  type: 'object',
+  properties: {
+    location: { type: 'string', description: 'City name or coordinates' },
+    unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
+  },
+  required: ['location']
+}
+```
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:699](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L699)
+
+If true, this tool is lazy and will only be sent to the LLM after being discovered via the lazy tool discovery mechanism. Works with both chat() (the synthetic discovery tool) and Code Mode (kept out of the system prompt and revealed via discover_tools).
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:702](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L702)
+
+Additional metadata for adapters or custom extensions
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/types.ts:603](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L603)
+
+Unique name of the tool (used by the model to call it).
+
+Should be descriptive and follow naming conventions (e.g., snake_case or camelCase).
+Must be unique within the tools array.
+
+#### Example
+
+```ts
+"get_weather", "search_database", "sendEmail"
+```
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:696](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L696)
+
+If true, tool execution requires user approval before running. Works with both server and client tools.
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/types.ts:674](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L674)
+
+Optional schema for validating tool output.
+
+Can be any Standard JSON Schema compliant schema or a plain JSON Schema object.
+If provided with a Standard Schema compliant schema, tool results will be validated
+against this schema before being sent back to the model. This catches bugs in tool
+implementations and ensures consistent output formatting.
+
+Note: This is client-side validation only - not sent to LLM providers.
+Note: Plain JSON Schema output validation is not performed at runtime.
+
+#### Example
+
+```ts
+// Using Zod
+z.object({
+  temperature: z.number(),
+  conditions: z.string(),
+  forecast: z.array(z.string()).optional()
+})
+```
diff --git a/mintlify/ai/reference/interfaces/ToolCall.md b/mintlify/ai/reference/interfaces/ToolCall.md
new file mode 100644
index 000000000..a9dcd1323
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCall.md
@@ -0,0 +1,70 @@
+---
+id: ToolCall
+title: ToolCall
+---
+
+# Interface: ToolCall\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:150](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L150)
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Properties
+
+### function
+
+```ts
+function: object;
+```
+
+Defined in: [packages/ai/src/types.ts:153](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L153)
+
+#### arguments
+
+```ts
+arguments: string;
+```
+
+#### name
+
+```ts
+name: string;
+```
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:151](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L151)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:160](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L160)
+
+Provider-specific metadata to carry through the tool call lifecycle.
+Typed per-adapter via `TToolCallMetadata`. For example,
+`@tanstack/ai-gemini` sets this to `{ thoughtSignature?: string }`.
+
+***
+
+### type
+
+```ts
+type: "function";
+```
+
+Defined in: [packages/ai/src/types.ts:152](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L152)
diff --git a/mintlify/ai/reference/interfaces/ToolCallArgsEvent.md b/mintlify/ai/reference/interfaces/ToolCallArgsEvent.md
new file mode 100644
index 000000000..9de72c683
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallArgsEvent.md
@@ -0,0 +1,47 @@
+---
+id: ToolCallArgsEvent
+title: ToolCallArgsEvent
+---
+
+# Interface: ToolCallArgsEvent
+
+Defined in: [packages/ai/src/types.ts:1162](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1162)
+
+Emitted when tool call arguments are streaming.
+
+@ag-ui/core provides: `toolCallId`, `delta`
+TanStack AI adds: `model?`, `args?` (accumulated)
+
+## Extends
+
+- `ToolCallArgsEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### args?
+
+```ts
+optional args: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1166](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1166)
+
+Full accumulated arguments so far (TanStack AI internal)
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1164](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1164)
+
+Model identifier for multi-model support
diff --git a/mintlify/ai/reference/interfaces/ToolCallEndEvent.md b/mintlify/ai/reference/interfaces/ToolCallEndEvent.md
new file mode 100644
index 000000000..9e1ac1d75
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallEndEvent.md
@@ -0,0 +1,100 @@
+---
+id: ToolCallEndEvent
+title: ToolCallEndEvent
+---
+
+# Interface: ToolCallEndEvent
+
+Defined in: [packages/ai/src/types.ts:1175](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1175)
+
+Emitted when a tool call completes.
+
+@ag-ui/core provides: `toolCallId`
+TanStack AI adds: `model?`, `toolCallName?`, `toolName?` (deprecated), `input?`, `result?`
+
+## Extends
+
+- `ToolCallEndEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### input?
+
+```ts
+optional input: unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:1186](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1186)
+
+Final parsed input arguments (TanStack AI internal)
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1177](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1177)
+
+Model identifier for multi-model support
+
+***
+
+### result?
+
+```ts
+optional result: 
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[];
+```
+
+Defined in: [packages/ai/src/types.ts:1188](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1188)
+
+Tool execution result (TanStack AI internal)
+
+***
+
+### state?
+
+```ts
+optional state: ToolOutputState;
+```
+
+Defined in: [packages/ai/src/types.ts:1190](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1190)
+
+Tool execution output state (TanStack AI internal)
+
+***
+
+### toolCallName?
+
+```ts
+optional toolCallName: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1179](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1179)
+
+Name of the tool that completed
+
+***
+
+### ~~toolName?~~
+
+```ts
+optional toolName: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1184](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1184)
+
+#### Deprecated
+
+Use `toolCallName` instead.
+Kept for backward compatibility.
diff --git a/mintlify/ai/reference/interfaces/ToolCallHookContext.md b/mintlify/ai/reference/interfaces/ToolCallHookContext.md
new file mode 100644
index 000000000..d5017e0fb
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallHookContext.md
@@ -0,0 +1,72 @@
+---
+id: ToolCallHookContext
+title: ToolCallHookContext
+---
+
+# Interface: ToolCallHookContext
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:227](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L227)
+
+Context provided to tool call hooks (onBeforeToolCall / onAfterToolCall).
+
+## Properties
+
+### args
+
+```ts
+args: unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:233](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L233)
+
+Parsed arguments for the tool call
+
+***
+
+### tool
+
+```ts
+tool: 
+  | Tool<SchemaInput, SchemaInput, string, unknown>
+  | undefined;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:231](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L231)
+
+The resolved tool definition, if found
+
+***
+
+### toolCall
+
+```ts
+toolCall: ToolCall;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:229](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L229)
+
+The tool call being executed
+
+***
+
+### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:237](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L237)
+
+ID of the tool call
+
+***
+
+### toolName
+
+```ts
+toolName: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:235](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L235)
+
+Name of the tool
diff --git a/mintlify/ai/reference/interfaces/ToolCallPart.md b/mintlify/ai/reference/interfaces/ToolCallPart.md
new file mode 100644
index 000000000..c7449c91f
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallPart.md
@@ -0,0 +1,121 @@
+---
+id: ToolCallPart
+title: ToolCallPart
+---
+
+# Interface: ToolCallPart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:370](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L370)
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Properties
+
+### approval?
+
+```ts
+optional approval: object;
+```
+
+Defined in: [packages/ai/src/types.ts:377](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L377)
+
+Approval metadata if tool requires user approval
+
+#### approved?
+
+```ts
+optional approved: boolean;
+```
+
+#### id
+
+```ts
+id: string;
+```
+
+#### needsApproval
+
+```ts
+needsApproval: boolean;
+```
+
+***
+
+### arguments
+
+```ts
+arguments: string;
+```
+
+Defined in: [packages/ai/src/types.ts:374](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L374)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:372](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L372)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:388](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L388)
+
+Provider-specific metadata that round-trips with the tool call.
+Typed per-adapter via `TToolCallMetadata`. May follow the
+[ProviderExecutedToolMetadata](/ai/reference/interfaces/ProviderExecutedToolMetadata) convention to mark provider-executed
+server tools (e.g. Anthropic `web_search`).
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/ai/src/types.ts:373](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L373)
+
+***
+
+### output?
+
+```ts
+optional output: any;
+```
+
+Defined in: [packages/ai/src/types.ts:383](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L383)
+
+Tool execution output (for client tools or after approval)
+
+***
+
+### state
+
+```ts
+state: ToolCallState;
+```
+
+Defined in: [packages/ai/src/types.ts:375](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L375)
+
+***
+
+### type
+
+```ts
+type: "tool-call";
+```
+
+Defined in: [packages/ai/src/types.ts:371](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L371)
diff --git a/mintlify/ai/reference/interfaces/ToolCallResultEvent.md b/mintlify/ai/reference/interfaces/ToolCallResultEvent.md
new file mode 100644
index 000000000..191aa41b1
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallResultEvent.md
@@ -0,0 +1,47 @@
+---
+id: ToolCallResultEvent
+title: ToolCallResultEvent
+---
+
+# Interface: ToolCallResultEvent
+
+Defined in: [packages/ai/src/types.ts:1199](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1199)
+
+Emitted when a tool call result is available.
+
+@ag-ui/core provides: `messageId`, `toolCallId`, `content`, `role?`
+TanStack AI adds: `model?`
+
+## Extends
+
+- `ToolCallResultEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1201](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1201)
+
+Model identifier for multi-model support
+
+***
+
+### state?
+
+```ts
+optional state: ToolOutputState;
+```
+
+Defined in: [packages/ai/src/types.ts:1203](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1203)
+
+Tool execution output state (TanStack AI internal)
diff --git a/mintlify/ai/reference/interfaces/ToolCallStartEvent.md b/mintlify/ai/reference/interfaces/ToolCallStartEvent.md
new file mode 100644
index 000000000..4ac02e0e9
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallStartEvent.md
@@ -0,0 +1,77 @@
+---
+id: ToolCallStartEvent
+title: ToolCallStartEvent
+---
+
+# Interface: ToolCallStartEvent
+
+Defined in: [packages/ai/src/types.ts:1139](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1139)
+
+Emitted when a tool call starts.
+
+@ag-ui/core provides: `toolCallId`, `toolCallName`, `parentMessageId?`
+TanStack AI adds: `model?`, `toolName` (deprecated alias), `index?`, `metadata?`
+
+## Extends
+
+- `ToolCallStartEvent`
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### index?
+
+```ts
+optional index: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1148](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1148)
+
+Index for parallel tool calls
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/types.ts:1153](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1153)
+
+Provider-specific metadata to carry into the ToolCall.
+Untyped at the event layer because events flow through a discriminated
+union that does not survive generics; adapters cast it to their typed
+`TToolCallMetadata` shape when emitting.
+
+***
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1141](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1141)
+
+Model identifier for multi-model support
+
+***
+
+### ~~toolName~~
+
+```ts
+toolName: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1146](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1146)
+
+#### Deprecated
+
+Use `toolCallName` instead (from @ag-ui/core spec).
+Kept for backward compatibility.
diff --git a/mintlify/ai/reference/interfaces/ToolCallStreamChunk.md b/mintlify/ai/reference/interfaces/ToolCallStreamChunk.md
new file mode 100644
index 000000000..8a4c6f473
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolCallStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ToolCallStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ToolCallStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/ToolConfig.md b/mintlify/ai/reference/interfaces/ToolConfig.md
new file mode 100644
index 000000000..15e188b2b
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolConfig.md
@@ -0,0 +1,14 @@
+---
+id: ToolConfig
+title: ToolConfig
+---
+
+# Interface: ToolConfig
+
+Defined in: [packages/ai/src/types.ts:725](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L725)
+
+## Indexable
+
+```ts
+[key: string]: Tool<SchemaInput, SchemaInput, string, unknown>
+```
diff --git a/mintlify/ai/reference/interfaces/ToolDefinition.md b/mintlify/ai/reference/interfaces/ToolDefinition.md
new file mode 100644
index 000000000..d2f0d0840
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolDefinition.md
@@ -0,0 +1,340 @@
+---
+id: ToolDefinition
+title: ToolDefinition
+---
+
+# Interface: ToolDefinition\&lt;TInput, TOutput, TName\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:116](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L116)
+
+Tool definition builder that allows creating server or client tools from a shared definition
+
+## Extends
+
+- [`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance)\&lt;`TInput`, `TOutput`, `TName`\>
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+## Properties
+
+### \_\_toolSide
+
+```ts
+__toolSide: "definition";
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:55](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L55)
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`__toolSide`](/ai/reference/interfaces/ToolDefinitionInstance#__toolside)
+
+***
+
+### client()
+
+```ts
+client: <TContext>(execute?) => ClientTool<TInput, TOutput, TName, TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:131](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L131)
+
+Create a client-side tool with optional execute function
+
+#### Type Parameters
+
+##### TContext
+
+`TContext` = `unknown`
+
+#### Parameters
+
+##### execute?
+
+[`ToolExecuteFunction`](/ai/reference/type-aliases/ToolExecuteFunction)\&lt;`TInput`, `TOutput`, `TContext`\>
+
+#### Returns
+
+[`ClientTool`](/ai/reference/interfaces/ClientTool)\&lt;`TInput`, `TOutput`, `TName`, `TContext`\>
+
+***
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:613](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L613)
+
+Clear description of what the tool does.
+
+This is crucial - the model uses this to decide when to call the tool.
+Be specific about what the tool does, what parameters it needs, and what it returns.
+
+#### Example
+
+```ts
+"Get the current weather in a given location. Returns temperature, conditions, and forecast."
+```
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`description`](/ai/reference/interfaces/ToolDefinitionInstance#description)
+
+***
+
+### execute()?
+
+```ts
+optional execute: (args, context?) => 
+  | InferSchemaType<TOutput>
+| Promise<InferSchemaType<TOutput>>;
+```
+
+Defined in: [packages/ai/src/types.ts:693](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L693)
+
+Optional function to execute when the model calls this tool.
+
+If provided, the SDK will automatically execute the function with the model's arguments
+and feed the result back to the model. This enables autonomous tool use loops.
+
+Can return any value - will be automatically stringified if needed.
+
+#### Parameters
+
+##### args
+
+[`InferSchemaType`](/ai/reference/type-aliases/InferSchemaType)\&lt;`TInput`\>
+
+The arguments parsed from the model's tool call (validated against inputSchema)
+
+##### context?
+
+[`ToolExecutionContext`](/ai/reference/type-aliases/ToolExecutionContext)\&lt;`unknown`\>
+
+#### Returns
+
+  \| [`InferSchemaType`](/ai/reference/type-aliases/InferSchemaType)\&lt;`TOutput`\>
+  \| `Promise`\&lt;[`InferSchemaType`](/ai/reference/type-aliases/InferSchemaType)\&lt;`TOutput`\>\>
+
+Result to send back to the model (validated against outputSchema if provided)
+
+#### Example
+
+```ts
+execute: async (args) => {
+  const weather = await fetchWeather(args.location);
+  return weather; // Can return object or string
+}
+```
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`execute`](/ai/reference/interfaces/ToolDefinitionInstance#execute)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/types.ts:653](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L653)
+
+Schema describing the tool's input parameters.
+
+Can be any Standard JSON Schema compliant schema (Zod, ArkType, Valibot, etc.) or a plain JSON Schema object.
+Defines the structure and types of arguments the tool accepts.
+The model will generate arguments matching this schema.
+Standard JSON Schema compliant schemas are converted to JSON Schema for LLM providers.
+
+#### See
+
+ - https://standardschema.dev/json-schema
+ - https://json-schema.org/
+
+#### Examples
+
+```ts
+// Using Zod v4+ schema (natively supports Standard JSON Schema)
+import { z } from 'zod';
+z.object({
+  location: z.string().describe("City name or coordinates"),
+  unit: z.enum(["celsius", "fahrenheit"]).optional()
+})
+```
+
+```ts
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+})
+```
+
+```ts
+// Using plain JSON Schema
+{
+  type: 'object',
+  properties: {
+    location: { type: 'string', description: 'City name or coordinates' },
+    unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
+  },
+  required: ['location']
+}
+```
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`inputSchema`](/ai/reference/interfaces/ToolDefinitionInstance#inputschema)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:699](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L699)
+
+If true, this tool is lazy and will only be sent to the LLM after being discovered via the lazy tool discovery mechanism. Works with both chat() (the synthetic discovery tool) and Code Mode (kept out of the system prompt and revealed via discover_tools).
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`lazy`](/ai/reference/interfaces/ToolDefinitionInstance#lazy)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:702](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L702)
+
+Additional metadata for adapters or custom extensions
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`metadata`](/ai/reference/interfaces/ToolDefinitionInstance#metadata)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/types.ts:603](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L603)
+
+Unique name of the tool (used by the model to call it).
+
+Should be descriptive and follow naming conventions (e.g., snake_case or camelCase).
+Must be unique within the tools array.
+
+#### Example
+
+```ts
+"get_weather", "search_database", "sendEmail"
+```
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`name`](/ai/reference/interfaces/ToolDefinitionInstance#name)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:696](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L696)
+
+If true, tool execution requires user approval before running. Works with both server and client tools.
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`needsApproval`](/ai/reference/interfaces/ToolDefinitionInstance#needsapproval)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/types.ts:674](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L674)
+
+Optional schema for validating tool output.
+
+Can be any Standard JSON Schema compliant schema or a plain JSON Schema object.
+If provided with a Standard Schema compliant schema, tool results will be validated
+against this schema before being sent back to the model. This catches bugs in tool
+implementations and ensures consistent output formatting.
+
+Note: This is client-side validation only - not sent to LLM providers.
+Note: Plain JSON Schema output validation is not performed at runtime.
+
+#### Example
+
+```ts
+// Using Zod
+z.object({
+  temperature: z.number(),
+  conditions: z.string(),
+  forecast: z.array(z.string()).optional()
+})
+```
+
+#### Inherited from
+
+[`ToolDefinitionInstance`](/ai/reference/interfaces/ToolDefinitionInstance).[`outputSchema`](/ai/reference/interfaces/ToolDefinitionInstance#outputschema)
+
+***
+
+### server()
+
+```ts
+server: <TContext>(execute) => ServerTool<TInput, TOutput, TName, TContext>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:124](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L124)
+
+Create a server-side tool with execute function
+
+#### Type Parameters
+
+##### TContext
+
+`TContext` = `unknown`
+
+#### Parameters
+
+##### execute
+
+[`ToolExecuteFunction`](/ai/reference/type-aliases/ToolExecuteFunction)\&lt;`TInput`, `TOutput`, `TContext`\>
+
+#### Returns
+
+[`ServerTool`](/ai/reference/interfaces/ServerTool)\&lt;`TInput`, `TOutput`, `TName`, `TContext`\>
diff --git a/mintlify/ai/reference/interfaces/ToolDefinitionConfig.md b/mintlify/ai/reference/interfaces/ToolDefinitionConfig.md
new file mode 100644
index 000000000..a9b1aeb41
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolDefinitionConfig.md
@@ -0,0 +1,94 @@
+---
+id: ToolDefinitionConfig
+title: ToolDefinitionConfig
+---
+
+# Interface: ToolDefinitionConfig\&lt;TInput, TOutput, TName\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:99](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L99)
+
+Tool definition configuration
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+## Properties
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:105](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L105)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:106](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L106)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:109](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L109)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:110](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L110)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:104](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L104)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:108](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L108)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:107](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L107)
diff --git a/mintlify/ai/reference/interfaces/ToolDefinitionInstance.md b/mintlify/ai/reference/interfaces/ToolDefinitionInstance.md
new file mode 100644
index 000000000..255e2ee7e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolDefinitionInstance.md
@@ -0,0 +1,275 @@
+---
+id: ToolDefinitionInstance
+title: ToolDefinitionInstance
+---
+
+# Interface: ToolDefinitionInstance\&lt;TInput, TOutput, TName, TContext\>
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:49](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L49)
+
+Tool definition that can be used directly or instantiated for server/client
+
+## Extends
+
+- [`Tool`](/ai/reference/interfaces/Tool)\&lt;`TInput`, `TOutput`, `TName`, `TContext`\>
+
+## Extended by
+
+- [`ToolDefinition`](/ai/reference/interfaces/ToolDefinition)
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Properties
+
+### \_\_toolSide
+
+```ts
+__toolSide: "definition";
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:55](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L55)
+
+***
+
+### description
+
+```ts
+description: string;
+```
+
+Defined in: [packages/ai/src/types.ts:613](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L613)
+
+Clear description of what the tool does.
+
+This is crucial - the model uses this to decide when to call the tool.
+Be specific about what the tool does, what parameters it needs, and what it returns.
+
+#### Example
+
+```ts
+"Get the current weather in a given location. Returns temperature, conditions, and forecast."
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`description`](/ai/reference/interfaces/Tool#description)
+
+***
+
+### execute?
+
+```ts
+optional execute: ToolExecuteFunction<TInput, TOutput, TContext>;
+```
+
+Defined in: [packages/ai/src/types.ts:693](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L693)
+
+Optional function to execute when the model calls this tool.
+
+If provided, the SDK will automatically execute the function with the model's arguments
+and feed the result back to the model. This enables autonomous tool use loops.
+
+Can return any value - will be automatically stringified if needed.
+
+#### Param
+
+The arguments parsed from the model's tool call (validated against inputSchema)
+
+#### Returns
+
+Result to send back to the model (validated against outputSchema if provided)
+
+#### Example
+
+```ts
+execute: async (args) => {
+  const weather = await fetchWeather(args.location);
+  return weather; // Can return object or string
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`execute`](/ai/reference/interfaces/Tool#execute)
+
+***
+
+### inputSchema?
+
+```ts
+optional inputSchema: TInput;
+```
+
+Defined in: [packages/ai/src/types.ts:653](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L653)
+
+Schema describing the tool's input parameters.
+
+Can be any Standard JSON Schema compliant schema (Zod, ArkType, Valibot, etc.) or a plain JSON Schema object.
+Defines the structure and types of arguments the tool accepts.
+The model will generate arguments matching this schema.
+Standard JSON Schema compliant schemas are converted to JSON Schema for LLM providers.
+
+#### See
+
+ - https://standardschema.dev/json-schema
+ - https://json-schema.org/
+
+#### Examples
+
+```ts
+// Using Zod v4+ schema (natively supports Standard JSON Schema)
+import { z } from 'zod';
+z.object({
+  location: z.string().describe("City name or coordinates"),
+  unit: z.enum(["celsius", "fahrenheit"]).optional()
+})
+```
+
+```ts
+// Using ArkType (natively supports Standard JSON Schema)
+import { type } from 'arktype';
+type({
+  location: 'string',
+  unit: "'celsius' | 'fahrenheit'"
+})
+```
+
+```ts
+// Using plain JSON Schema
+{
+  type: 'object',
+  properties: {
+    location: { type: 'string', description: 'City name or coordinates' },
+    unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
+  },
+  required: ['location']
+}
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`inputSchema`](/ai/reference/interfaces/Tool#inputschema)
+
+***
+
+### lazy?
+
+```ts
+optional lazy: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:699](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L699)
+
+If true, this tool is lazy and will only be sent to the LLM after being discovered via the lazy tool discovery mechanism. Works with both chat() (the synthetic discovery tool) and Code Mode (kept out of the system prompt and revealed via discover_tools).
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`lazy`](/ai/reference/interfaces/Tool#lazy)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, any>;
+```
+
+Defined in: [packages/ai/src/types.ts:702](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L702)
+
+Additional metadata for adapters or custom extensions
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`metadata`](/ai/reference/interfaces/Tool#metadata)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/ai/src/types.ts:603](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L603)
+
+Unique name of the tool (used by the model to call it).
+
+Should be descriptive and follow naming conventions (e.g., snake_case or camelCase).
+Must be unique within the tools array.
+
+#### Example
+
+```ts
+"get_weather", "search_database", "sendEmail"
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`name`](/ai/reference/interfaces/Tool#name)
+
+***
+
+### needsApproval?
+
+```ts
+optional needsApproval: boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:696](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L696)
+
+If true, tool execution requires user approval before running. Works with both server and client tools.
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`needsApproval`](/ai/reference/interfaces/Tool#needsapproval)
+
+***
+
+### outputSchema?
+
+```ts
+optional outputSchema: TOutput;
+```
+
+Defined in: [packages/ai/src/types.ts:674](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L674)
+
+Optional schema for validating tool output.
+
+Can be any Standard JSON Schema compliant schema or a plain JSON Schema object.
+If provided with a Standard Schema compliant schema, tool results will be validated
+against this schema before being sent back to the model. This catches bugs in tool
+implementations and ensures consistent output formatting.
+
+Note: This is client-side validation only - not sent to LLM providers.
+Note: Plain JSON Schema output validation is not performed at runtime.
+
+#### Example
+
+```ts
+// Using Zod
+z.object({
+  temperature: z.number(),
+  conditions: z.string(),
+  forecast: z.array(z.string()).optional()
+})
+```
+
+#### Inherited from
+
+[`Tool`](/ai/reference/interfaces/Tool).[`outputSchema`](/ai/reference/interfaces/Tool#outputschema)
diff --git a/mintlify/ai/reference/interfaces/ToolInputAvailableEvent.md b/mintlify/ai/reference/interfaces/ToolInputAvailableEvent.md
new file mode 100644
index 000000000..8d02ed727
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolInputAvailableEvent.md
@@ -0,0 +1,89 @@
+---
+id: ToolInputAvailableEvent
+title: ToolInputAvailableEvent
+---
+
+# Interface: ToolInputAvailableEvent
+
+Defined in: [packages/ai/src/types.ts:1362](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1362)
+
+Emitted when a client tool is invoked. The agent loop yields this and
+pauses to let the caller run the tool client-side — `structured-output.complete`
+will not fire for that run. Shape fixed by the agent-loop forwarding in
+`runStreamingStructuredOutputImpl` in `activities/chat/index.ts`.
+
+## Extends
+
+- [`CustomEvent`](/ai/reference/interfaces/CustomEvent)
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
+
+#### Inherited from
+
+[`CustomEvent`](/ai/reference/interfaces/CustomEvent).[`model`](/ai/reference/interfaces/CustomEvent#model)
+
+***
+
+### name
+
+```ts
+name: "tool-input-available";
+```
+
+Defined in: [packages/ai/src/types.ts:1363](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1363)
+
+#### Overrides
+
+```ts
+CustomEvent.name
+```
+
+***
+
+### value
+
+```ts
+value: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1364](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1364)
+
+#### input
+
+```ts
+input: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+#### Overrides
+
+```ts
+CustomEvent.value
+```
diff --git a/mintlify/ai/reference/interfaces/ToolInputAvailableStreamChunk.md b/mintlify/ai/reference/interfaces/ToolInputAvailableStreamChunk.md
new file mode 100644
index 000000000..9f01f3dd3
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolInputAvailableStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ToolInputAvailableStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ToolInputAvailableStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/ToolPhaseCompleteInfo.md b/mintlify/ai/reference/interfaces/ToolPhaseCompleteInfo.md
new file mode 100644
index 000000000..bb3ac0d80
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolPhaseCompleteInfo.md
@@ -0,0 +1,125 @@
+---
+id: ToolPhaseCompleteInfo
+title: ToolPhaseCompleteInfo
+---
+
+# Interface: ToolPhaseCompleteInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:298](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L298)
+
+Aggregate information passed to onToolPhaseComplete after all tool calls
+in an iteration have been processed.
+
+## Properties
+
+### needsApproval
+
+```ts
+needsApproval: object[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:309](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L309)
+
+Tools that need user approval
+
+#### approvalId
+
+```ts
+approvalId: string;
+```
+
+#### input
+
+```ts
+input: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+***
+
+### needsClientExecution
+
+```ts
+needsClientExecution: object[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:316](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L316)
+
+Tools that need client-side execution
+
+#### input
+
+```ts
+input: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+***
+
+### results
+
+```ts
+results: object[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:302](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L302)
+
+Completed tool results
+
+#### duration?
+
+```ts
+optional duration: number;
+```
+
+#### result
+
+```ts
+result: unknown;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+***
+
+### toolCalls
+
+```ts
+toolCalls: ToolCall<unknown>[];
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:300](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L300)
+
+Tool calls that were assigned to the assistant message
diff --git a/mintlify/ai/reference/interfaces/ToolRegistry.md b/mintlify/ai/reference/interfaces/ToolRegistry.md
new file mode 100644
index 000000000..171692b3a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolRegistry.md
@@ -0,0 +1,151 @@
+---
+id: ToolRegistry
+title: ToolRegistry
+---
+
+# Interface: ToolRegistry\&lt;TTool\>
+
+Defined in: [packages/ai/src/tool-registry.ts:9](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L9)
+
+A registry that holds tools and allows dynamic tool management.
+
+The registry can be either mutable (allowing additions/removals during execution)
+or frozen (static tool list, for backward compatibility with tools arrays).
+
+## Type Parameters
+
+### TTool
+
+`TTool` *extends* [`AnyTool`](/ai/reference/type-aliases/AnyTool) = [`AnyTool`](/ai/reference/type-aliases/AnyTool)
+
+## Properties
+
+### add()
+
+```ts
+add: (tool) => void;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:22](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L22)
+
+Add a tool to the registry dynamically.
+For frozen registries, this is a no-op.
+
+#### Parameters
+
+##### tool
+
+`TTool`
+
+The tool to add
+
+#### Returns
+
+`void`
+
+***
+
+### get()
+
+```ts
+get: (name) => TTool | undefined;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:46](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L46)
+
+Get a tool by name.
+
+#### Parameters
+
+##### name
+
+`string`
+
+The name of the tool to get
+
+#### Returns
+
+`TTool` \| `undefined`
+
+The tool if found, undefined otherwise
+
+***
+
+### getTools()
+
+```ts
+getTools: () => TTool[];
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:14](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L14)
+
+Get all current tools in the registry.
+Called each agent loop iteration to get the latest tool list.
+
+#### Returns
+
+`TTool`[]
+
+***
+
+### has()
+
+```ts
+has: (name) => boolean;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L38)
+
+Check if a tool exists in the registry.
+
+#### Parameters
+
+##### name
+
+`string`
+
+The name of the tool to check
+
+#### Returns
+
+`boolean`
+
+***
+
+### isFrozen
+
+```ts
+readonly isFrozen: boolean;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:52](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L52)
+
+Whether this registry is frozen (immutable).
+Frozen registries don't allow add/remove operations.
+
+***
+
+### remove()
+
+```ts
+remove: (name) => boolean;
+```
+
+Defined in: [packages/ai/src/tool-registry.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/tool-registry.ts#L31)
+
+Remove a tool from the registry by name.
+For frozen registries, this always returns false.
+
+#### Parameters
+
+##### name
+
+`string`
+
+The name of the tool to remove
+
+#### Returns
+
+`boolean`
+
+true if the tool was removed, false if not found or frozen
diff --git a/mintlify/ai/reference/interfaces/ToolResultPart.md b/mintlify/ai/reference/interfaces/ToolResultPart.md
new file mode 100644
index 000000000..ec32c563e
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolResultPart.md
@@ -0,0 +1,60 @@
+---
+id: ToolResultPart
+title: ToolResultPart
+---
+
+# Interface: ToolResultPart
+
+Defined in: [packages/ai/src/types.ts:391](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L391)
+
+## Properties
+
+### content
+
+```ts
+content: 
+  | string
+  | ContentPart<unknown, unknown, unknown, unknown, unknown>[];
+```
+
+Defined in: [packages/ai/src/types.ts:394](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L394)
+
+***
+
+### error?
+
+```ts
+optional error: string;
+```
+
+Defined in: [packages/ai/src/types.ts:396](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L396)
+
+***
+
+### state
+
+```ts
+state: ToolResultState;
+```
+
+Defined in: [packages/ai/src/types.ts:395](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L395)
+
+***
+
+### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:393](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L393)
+
+***
+
+### type
+
+```ts
+type: "tool-result";
+```
+
+Defined in: [packages/ai/src/types.ts:392](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L392)
diff --git a/mintlify/ai/reference/interfaces/ToolResultStreamChunk.md b/mintlify/ai/reference/interfaces/ToolResultStreamChunk.md
new file mode 100644
index 000000000..e5ec80983
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/ToolResultStreamChunk.md
@@ -0,0 +1,12 @@
+---
+title: "ToolResultStreamChunk"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/interfaces/ToolResultStreamChunk)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/interfaces/TranscriptionAdapter.md b/mintlify/ai/reference/interfaces/TranscriptionAdapter.md
new file mode 100644
index 000000000..715198c03
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TranscriptionAdapter.md
@@ -0,0 +1,105 @@
+---
+id: TranscriptionAdapter
+title: TranscriptionAdapter
+---
+
+# Interface: TranscriptionAdapter\&lt;TModel, TProviderOptions\>
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:24](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L24)
+
+Transcription adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'whisper-1')
+- TProviderOptions: Provider-specific options (already resolved)
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:38](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L38)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### kind
+
+```ts
+readonly kind: "transcription";
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:29](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L29)
+
+Discriminator for adapter kind - used to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L33)
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:31](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L31)
+
+Adapter name identifier
+
+***
+
+### transcribe()
+
+```ts
+transcribe: (options) => Promise<TranscriptionResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:45](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L45)
+
+Transcribe audio to text
+
+#### Parameters
+
+##### options
+
+[`TranscriptionOptions`](/ai/reference/interfaces/TranscriptionOptions)\&lt;`TProviderOptions`\>
+
+#### Returns
+
+`Promise`\&lt;[`TranscriptionResult`](/ai/reference/interfaces/TranscriptionResult)\>
diff --git a/mintlify/ai/reference/interfaces/TranscriptionOptions.md b/mintlify/ai/reference/interfaces/TranscriptionOptions.md
new file mode 100644
index 000000000..3cba9a3dd
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TranscriptionOptions.md
@@ -0,0 +1,103 @@
+---
+id: TranscriptionOptions
+title: TranscriptionOptions
+---
+
+# Interface: TranscriptionOptions\&lt;TProviderOptions\>
+
+Defined in: [packages/ai/src/types.ts:1933](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1933)
+
+Options for audio transcription.
+These are the common options supported across providers.
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `object`
+
+## Properties
+
+### audio
+
+```ts
+audio: string | File | Blob | ArrayBuffer;
+```
+
+Defined in: [packages/ai/src/types.ts:1939](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1939)
+
+The audio data to transcribe - can be base64 string, File, Blob, or Buffer
+
+***
+
+### language?
+
+```ts
+optional language: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1941](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1941)
+
+The language of the audio in ISO-639-1 format (e.g., 'en')
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1953](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1953)
+
+Internal logger threaded from the generateTranscription() entry point.
+Adapters must call logger.request() before the SDK call and logger.errors()
+in catch blocks.
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1937](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1937)
+
+The model to use for transcription
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1947](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1947)
+
+Model-specific options for transcription
+
+***
+
+### prompt?
+
+```ts
+optional prompt: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1943](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1943)
+
+An optional prompt to guide the transcription
+
+***
+
+### responseFormat?
+
+```ts
+optional responseFormat: "text" | "json" | "srt" | "verbose_json" | "vtt";
+```
+
+Defined in: [packages/ai/src/types.ts:1945](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1945)
+
+The format of the transcription output
diff --git a/mintlify/ai/reference/interfaces/TranscriptionResult.md b/mintlify/ai/reference/interfaces/TranscriptionResult.md
new file mode 100644
index 000000000..c02f6ad07
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TranscriptionResult.md
@@ -0,0 +1,106 @@
+---
+id: TranscriptionResult
+title: TranscriptionResult
+---
+
+# Interface: TranscriptionResult
+
+Defined in: [packages/ai/src/types.ts:1989](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1989)
+
+Result of audio transcription.
+
+## Properties
+
+### duration?
+
+```ts
+optional duration: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1999](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1999)
+
+Duration of the audio in seconds
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1991](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1991)
+
+Unique identifier for the transcription
+
+***
+
+### language?
+
+```ts
+optional language: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1997](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1997)
+
+Language detected or specified
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1993](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1993)
+
+Model used for transcription
+
+***
+
+### segments?
+
+```ts
+optional segments: TranscriptionSegment[];
+```
+
+Defined in: [packages/ai/src/types.ts:2001](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2001)
+
+Detailed segments with timing, if available
+
+***
+
+### text
+
+```ts
+text: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1995](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1995)
+
+The full transcribed text
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:2005](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2005)
+
+Token usage information (if provided by the adapter)
+
+***
+
+### words?
+
+```ts
+optional words: TranscriptionWord[];
+```
+
+Defined in: [packages/ai/src/types.ts:2003](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L2003)
+
+Word-level timestamps, if available
diff --git a/mintlify/ai/reference/interfaces/TranscriptionSegment.md b/mintlify/ai/reference/interfaces/TranscriptionSegment.md
new file mode 100644
index 000000000..832929045
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TranscriptionSegment.md
@@ -0,0 +1,82 @@
+---
+id: TranscriptionSegment
+title: TranscriptionSegment
+---
+
+# Interface: TranscriptionSegment
+
+Defined in: [packages/ai/src/types.ts:1959](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1959)
+
+A single segment of transcribed audio with timing information.
+
+## Properties
+
+### confidence?
+
+```ts
+optional confidence: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1969](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1969)
+
+Confidence score (0-1), if available
+
+***
+
+### end
+
+```ts
+end: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1965](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1965)
+
+End time of the segment in seconds
+
+***
+
+### id
+
+```ts
+id: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1961](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1961)
+
+Unique identifier for the segment
+
+***
+
+### speaker?
+
+```ts
+optional speaker: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1971](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1971)
+
+Speaker identifier, if diarization is enabled
+
+***
+
+### start
+
+```ts
+start: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1963](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1963)
+
+Start time of the segment in seconds
+
+***
+
+### text
+
+```ts
+text: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1967](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1967)
+
+Transcribed text for this segment
diff --git a/mintlify/ai/reference/interfaces/TranscriptionWord.md b/mintlify/ai/reference/interfaces/TranscriptionWord.md
new file mode 100644
index 000000000..13810c8e6
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/TranscriptionWord.md
@@ -0,0 +1,46 @@
+---
+id: TranscriptionWord
+title: TranscriptionWord
+---
+
+# Interface: TranscriptionWord
+
+Defined in: [packages/ai/src/types.ts:1977](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1977)
+
+A single word with timing information.
+
+## Properties
+
+### end
+
+```ts
+end: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1983](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1983)
+
+End time in seconds
+
+***
+
+### start
+
+```ts
+start: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1981](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1981)
+
+Start time in seconds
+
+***
+
+### word
+
+```ts
+word: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1979](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1979)
+
+The transcribed word
diff --git a/mintlify/ai/reference/interfaces/UIMessage.md b/mintlify/ai/reference/interfaces/UIMessage.md
new file mode 100644
index 000000000..4539cc127
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/UIMessage.md
@@ -0,0 +1,60 @@
+---
+id: UIMessage
+title: UIMessage
+---
+
+# Interface: UIMessage\&lt;TData\>
+
+Defined in: [packages/ai/src/types.ts:478](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L478)
+
+UIMessage - Domain-specific message format optimized for building chat UIs
+Contains parts that can be text, tool calls, or tool results. Generic over
+the structured-output data type so `useChat({ outputSchema })`'s schema
+narrows `parts.find(p => p.type === 'structured-output').data` on the
+consumer side without manual casts.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+## Properties
+
+### createdAt?
+
+```ts
+optional createdAt: Date;
+```
+
+Defined in: [packages/ai/src/types.ts:482](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L482)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/ai/src/types.ts:479](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L479)
+
+***
+
+### parts
+
+```ts
+parts: MessagePart<TData>[];
+```
+
+Defined in: [packages/ai/src/types.ts:481](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L481)
+
+***
+
+### role
+
+```ts
+role: "user" | "assistant" | "system";
+```
+
+Defined in: [packages/ai/src/types.ts:480](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L480)
diff --git a/mintlify/ai/reference/interfaces/UIResourceEvent.md b/mintlify/ai/reference/interfaces/UIResourceEvent.md
new file mode 100644
index 000000000..328f060e2
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/UIResourceEvent.md
@@ -0,0 +1,123 @@
+---
+id: UIResourceEvent
+title: UIResourceEvent
+---
+
+# Interface: UIResourceEvent
+
+Defined in: [packages/ai/src/types.ts:1373](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1373)
+
+Emitted when an MCP tool returns a ui:// resource (MCP Apps). Reconciled into
+ a UIResourcePart on the assistant UIMessage. Never enters model input.
+
+## Extends
+
+- [`CustomEvent`](/ai/reference/interfaces/CustomEvent)
+
+## Indexable
+
+```ts
+[k: string]: unknown
+```
+
+## Properties
+
+### model?
+
+```ts
+optional model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1298](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1298)
+
+Model identifier for multi-model support
+
+#### Inherited from
+
+[`CustomEvent`](/ai/reference/interfaces/CustomEvent).[`model`](/ai/reference/interfaces/CustomEvent#model)
+
+***
+
+### name
+
+```ts
+name: "ui-resource";
+```
+
+Defined in: [packages/ai/src/types.ts:1374](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1374)
+
+#### Overrides
+
+```ts
+CustomEvent.name
+```
+
+***
+
+### value
+
+```ts
+value: object;
+```
+
+Defined in: [packages/ai/src/types.ts:1375](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1375)
+
+#### meta?
+
+```ts
+optional meta: Record<string, unknown>;
+```
+
+#### resource
+
+```ts
+resource: object;
+```
+
+##### resource.blob?
+
+```ts
+optional blob: string;
+```
+
+##### resource.mimeType
+
+```ts
+mimeType: string;
+```
+
+##### resource.text?
+
+```ts
+optional text: string;
+```
+
+##### resource.uri
+
+```ts
+uri: string;
+```
+
+#### serverId?
+
+```ts
+optional serverId: string;
+```
+
+#### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+#### toolName
+
+```ts
+toolName: string;
+```
+
+#### Overrides
+
+```ts
+CustomEvent.value
+```
diff --git a/mintlify/ai/reference/interfaces/UIResourcePart.md b/mintlify/ai/reference/interfaces/UIResourcePart.md
new file mode 100644
index 000000000..9af1db15d
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/UIResourcePart.md
@@ -0,0 +1,105 @@
+---
+id: UIResourcePart
+title: UIResourcePart
+---
+
+# Interface: UIResourcePart
+
+Defined in: [packages/ai/src/types.ts:442](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L442)
+
+## Properties
+
+### meta?
+
+```ts
+optional meta: Record<string, unknown>;
+```
+
+Defined in: [packages/ai/src/types.ts:456](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L456)
+
+Reserved for future passthrough of the resource/tool `_meta.ui` (e.g. frame-size hints).
+ Currently always `undefined` — nothing populates this field yet.
+
+***
+
+### resource
+
+```ts
+resource: object;
+```
+
+Defined in: [packages/ai/src/types.ts:445](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L445)
+
+The ui:// resource object in MCP-native shape — fed straight to the renderer.
+
+#### blob?
+
+```ts
+optional blob: string;
+```
+
+#### mimeType
+
+```ts
+mimeType: string;
+```
+
+#### text?
+
+```ts
+optional text: string;
+```
+
+#### uri
+
+```ts
+uri: string;
+```
+
+***
+
+### serverId?
+
+```ts
+optional serverId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:447](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L447)
+
+Pool prefix / config key — routes interactive calls to the right MCP server.
+
+***
+
+### toolCallId
+
+```ts
+toolCallId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:450](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L450)
+
+Links the widget to the originating tool call — correlates it with the
+ sibling ToolCallPart/ToolResultPart in the same message.
+
+***
+
+### toolName
+
+```ts
+toolName: string;
+```
+
+Defined in: [packages/ai/src/types.ts:453](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L453)
+
+Server-native (unprefixed) MCP tool name whose UI this resource renders.
+ Required by the renderer (`@mcp-ui/client`'s `AppRenderer` `toolName` prop).
+
+***
+
+### type
+
+```ts
+type: "ui-resource";
+```
+
+Defined in: [packages/ai/src/types.ts:443](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L443)
diff --git a/mintlify/ai/reference/interfaces/UsageInfo.md b/mintlify/ai/reference/interfaces/UsageInfo.md
new file mode 100644
index 000000000..b1868e367
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/UsageInfo.md
@@ -0,0 +1,19 @@
+---
+id: UsageInfo
+title: UsageInfo
+---
+
+# Interface: UsageInfo
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:335](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L335)
+
+Token usage statistics passed to the onUsage hook.
+Extracted from the RUN_FINISHED chunk when usage data is present.
+
+Includes optional provider-reported `cost`/`costDetails` (see TokenUsage).
+Kept as an interface extending `TokenUsage` to preserve declaration merging for
+this publicly exported type.
+
+## Extends
+
+- `TokenUsage`
diff --git a/mintlify/ai/reference/interfaces/VADConfig.md b/mintlify/ai/reference/interfaces/VADConfig.md
new file mode 100644
index 000000000..e4c0e08e7
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VADConfig.md
@@ -0,0 +1,46 @@
+---
+id: VADConfig
+title: VADConfig
+---
+
+# Interface: VADConfig
+
+Defined in: [packages/ai/src/realtime/types.ts:10](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L10)
+
+Voice activity detection configuration
+
+## Properties
+
+### prefixPaddingMs?
+
+```ts
+optional prefixPaddingMs: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:14](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L14)
+
+Audio to include before speech detection (ms)
+
+***
+
+### silenceDurationMs?
+
+```ts
+optional silenceDurationMs: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:16](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L16)
+
+Silence duration to end turn (ms)
+
+***
+
+### threshold?
+
+```ts
+optional threshold: number;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L12)
+
+Sensitivity threshold (0.0-1.0)
diff --git a/mintlify/ai/reference/interfaces/VideoAdapter.md b/mintlify/ai/reference/interfaces/VideoAdapter.md
new file mode 100644
index 000000000..1d1a4cbb3
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoAdapter.md
@@ -0,0 +1,259 @@
+---
+id: VideoAdapter
+title: VideoAdapter
+---
+
+# Interface: VideoAdapter\&lt;TModel, TProviderOptions, TModelProviderOptionsByName, TModelSizeByName, TModelInputModalitiesByName, TModelDurationByName\>
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:60](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L60)
+
+**`Experimental`**
+
+Video adapter interface with pre-resolved generics.
+
+An adapter is created by a provider function: `provider('model')` → `adapter`
+All type resolution happens at the provider call site, not in this interface.
+
+ Video generation is an experimental feature and may change.
+
+Generic parameters:
+- TModel: The specific model name (e.g., 'sora-2')
+- TProviderOptions: Provider-specific options (already resolved)
+- TModelProviderOptionsByName: Map from model name to its specific provider options
+- TModelSizeByName: Map from model name to its supported sizes
+- TModelInputModalitiesByName: Map from model name to the non-text prompt
+  modalities it accepts (constrains the `prompt` part types at compile time)
+- TModelDurationByName: Map from model name to its supported duration
+  union. Defaults to `Record<string, number>` so adapters that haven't
+  declared a map keep today's `duration?: number` typing.
+
+## Type Parameters
+
+### TModel
+
+`TModel` *extends* `string` = `string`
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TModelProviderOptionsByName
+
+`TModelProviderOptionsByName` *extends* `Record`\&lt;`string`, `any`\> = `Record`\&lt;`string`, `any`\>
+
+### TModelSizeByName
+
+`TModelSizeByName` *extends* `Record`\&lt;`string`, `string` \| `undefined`\> = `Record`\&lt;`string`, `string`\>
+
+### TModelInputModalitiesByName
+
+`TModelInputModalitiesByName` *extends* [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName) = [`ModelInputModalitiesByName`](/ai/reference/type-aliases/ModelInputModalitiesByName)
+
+### TModelDurationByName
+
+`TModelDurationByName` *extends* `Record`\&lt;`string`, `string` \| `number` \| `undefined`\> = `Record`\&lt;`string`, `number`\>
+
+## Properties
+
+### ~types
+
+```ts
+~types: object;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:83](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L83)
+
+**`Internal`**
+
+Type-only properties for inference. Not assigned at runtime.
+
+#### modelDurationByName
+
+```ts
+modelDurationByName: TModelDurationByName;
+```
+
+#### modelInputModalitiesByName
+
+```ts
+modelInputModalitiesByName: TModelInputModalitiesByName;
+```
+
+#### modelProviderOptionsByName
+
+```ts
+modelProviderOptionsByName: TModelProviderOptionsByName;
+```
+
+#### modelSizeByName
+
+```ts
+modelSizeByName: TModelSizeByName;
+```
+
+#### providerOptions
+
+```ts
+providerOptions: TProviderOptions;
+```
+
+***
+
+### availableDurations()
+
+```ts
+availableDurations: () => DurationOptions<TModelDurationByName[TModel]>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:119](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L119)
+
+**`Experimental`**
+
+Describe the durations this adapter's model accepts. Returns a tagged
+union so consumers can render UI / coerce input without provider-specific
+knowledge.
+
+#### Returns
+
+`DurationOptions`\&lt;`TModelDurationByName`\[`TModel`\]\>
+
+***
+
+### createVideoJob()
+
+```ts
+createVideoJob: (options) => Promise<VideoJobResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:95](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L95)
+
+**`Experimental`**
+
+Create a new video generation job.
+Returns a job ID that can be used to poll for status and retrieve the video.
+
+#### Parameters
+
+##### options
+
+[`VideoGenerationOptions`](/ai/reference/interfaces/VideoGenerationOptions)\&lt;`TProviderOptions`, `TModelSizeByName`\[`TModel`\], `TModelDurationByName`\[`TModel`\]\>
+
+#### Returns
+
+`Promise`\&lt;[`VideoJobResult`](/ai/reference/interfaces/VideoJobResult)\>
+
+***
+
+### getVideoStatus()
+
+```ts
+getVideoStatus: (jobId) => Promise<VideoStatusResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:106](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L106)
+
+**`Experimental`**
+
+Get the current status of a video generation job.
+
+#### Parameters
+
+##### jobId
+
+`string`
+
+#### Returns
+
+`Promise`\&lt;[`VideoStatusResult`](/ai/reference/interfaces/VideoStatusResult)\>
+
+***
+
+### getVideoUrl()
+
+```ts
+getVideoUrl: (jobId) => Promise<VideoUrlResult>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:112](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L112)
+
+**`Experimental`**
+
+Get the URL to download/view the generated video.
+Should only be called after status is 'completed'.
+
+#### Parameters
+
+##### jobId
+
+`string`
+
+#### Returns
+
+`Promise`\&lt;[`VideoUrlResult`](/ai/reference/interfaces/VideoUrlResult)\>
+
+***
+
+### kind
+
+```ts
+readonly kind: "video";
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:74](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L74)
+
+**`Experimental`**
+
+Discriminator for adapter kind - used to determine API shape
+
+***
+
+### model
+
+```ts
+readonly model: TModel;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:78](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L78)
+
+**`Experimental`**
+
+The model this adapter is configured for
+
+***
+
+### name
+
+```ts
+readonly name: string;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:76](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L76)
+
+**`Experimental`**
+
+Adapter name identifier
+
+***
+
+### snapDuration()
+
+```ts
+snapDuration: (seconds) => TModelDurationByName[TModel] | undefined;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:125](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L125)
+
+**`Experimental`**
+
+Coerce a raw seconds value to the closest valid duration for this model.
+Returns `undefined` for models with no duration field.
+
+#### Parameters
+
+##### seconds
+
+`number`
+
+#### Returns
+
+`TModelDurationByName`\[`TModel`\] \| `undefined`
diff --git a/mintlify/ai/reference/interfaces/VideoGenerationOptions.md b/mintlify/ai/reference/interfaces/VideoGenerationOptions.md
new file mode 100644
index 000000000..321aede83
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoGenerationOptions.md
@@ -0,0 +1,121 @@
+---
+id: VideoGenerationOptions
+title: VideoGenerationOptions
+---
+
+# Interface: VideoGenerationOptions\&lt;TProviderOptions, TSize, TDuration\>
+
+Defined in: [packages/ai/src/types.ts:1795](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1795)
+
+**`Experimental`**
+
+Options for video generation.
+These are the common options supported across providers.
+
+ Video generation is an experimental feature and may change.
+
+## Type Parameters
+
+### TProviderOptions
+
+`TProviderOptions` *extends* `object` = `object`
+
+### TSize
+
+`TSize` *extends* `string` \| `undefined` = `string`
+
+### TDuration
+
+`TDuration` *extends* `string` \| `number` \| `undefined` = `number`
+
+## Properties
+
+### duration?
+
+```ts
+optional duration: TDuration;
+```
+
+Defined in: [packages/ai/src/types.ts:1818](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1818)
+
+**`Experimental`**
+
+Video duration in seconds. Adapters that declare a per-model duration
+map narrow this to the model's valid union; use
+`adapter.snapDuration(seconds)` to coerce raw seconds to a valid value.
+
+***
+
+### logger
+
+```ts
+logger: InternalLogger;
+```
+
+Defined in: [packages/ai/src/types.ts:1825](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1825)
+
+**`Experimental`**
+
+Internal logger threaded from the generateVideo() entry point. Adapters must
+call logger.request() before the SDK call and logger.errors() in catch blocks.
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1801](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1801)
+
+**`Experimental`**
+
+The model to use for video generation
+
+***
+
+### modelOptions?
+
+```ts
+optional modelOptions: TProviderOptions;
+```
+
+Defined in: [packages/ai/src/types.ts:1820](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1820)
+
+**`Experimental`**
+
+Model-specific options for video generation
+
+***
+
+### prompt
+
+```ts
+prompt: MediaPrompt;
+```
+
+Defined in: [packages/ai/src/types.ts:1810](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1810)
+
+**`Experimental`**
+
+Description of the desired video: a plain string, or an ordered array of
+content parts for image-conditioned generation. Image parts may carry
+`metadata.role` (`'start_frame' | 'end_frame' | 'reference' |
+'character'`) to disambiguate intent; adapters route them onto the
+provider-native request (e.g. OpenAI Sora `input_reference`, fal
+`image_url` / `end_image_url`) and throw at runtime if unsupported.
+
+***
+
+### size?
+
+```ts
+optional size: TSize;
+```
+
+Defined in: [packages/ai/src/types.ts:1812](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1812)
+
+**`Experimental`**
+
+Video size — format depends on the provider (e.g., "16:9", "1280x720")
diff --git a/mintlify/ai/reference/interfaces/VideoJobResult.md b/mintlify/ai/reference/interfaces/VideoJobResult.md
new file mode 100644
index 000000000..50177c8ee
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoJobResult.md
@@ -0,0 +1,42 @@
+---
+id: VideoJobResult
+title: VideoJobResult
+---
+
+# Interface: VideoJobResult
+
+Defined in: [packages/ai/src/types.ts:1833](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1833)
+
+**`Experimental`**
+
+Result of creating a video generation job.
+
+ Video generation is an experimental feature and may change.
+
+## Properties
+
+### jobId
+
+```ts
+jobId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1835](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1835)
+
+**`Experimental`**
+
+Unique job identifier for polling status
+
+***
+
+### model
+
+```ts
+model: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1837](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1837)
+
+**`Experimental`**
+
+Model used for generation
diff --git a/mintlify/ai/reference/interfaces/VideoPart.md b/mintlify/ai/reference/interfaces/VideoPart.md
new file mode 100644
index 000000000..f7daed29a
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoPart.md
@@ -0,0 +1,52 @@
+---
+id: VideoPart
+title: VideoPart
+---
+
+# Interface: VideoPart\&lt;TMetadata\>
+
+Defined in: [packages/ai/src/types.ts:272](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L272)
+
+Video content part for multimodal messages.
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+Provider-specific metadata type
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: TMetadata;
+```
+
+Defined in: [packages/ai/src/types.ts:277](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L277)
+
+Provider-specific metadata (e.g., duration, resolution)
+
+***
+
+### source
+
+```ts
+source: ContentPartSource;
+```
+
+Defined in: [packages/ai/src/types.ts:275](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L275)
+
+Source of the video content
+
+***
+
+### type
+
+```ts
+type: "video";
+```
+
+Defined in: [packages/ai/src/types.ts:273](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L273)
diff --git a/mintlify/ai/reference/interfaces/VideoStatusResult.md b/mintlify/ai/reference/interfaces/VideoStatusResult.md
new file mode 100644
index 000000000..9cf6ff8b4
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoStatusResult.md
@@ -0,0 +1,70 @@
+---
+id: VideoStatusResult
+title: VideoStatusResult
+---
+
+# Interface: VideoStatusResult
+
+Defined in: [packages/ai/src/types.ts:1845](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1845)
+
+**`Experimental`**
+
+Status of a video generation job.
+
+ Video generation is an experimental feature and may change.
+
+## Properties
+
+### error?
+
+```ts
+optional error: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1853](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1853)
+
+**`Experimental`**
+
+Error message if status is 'failed'
+
+***
+
+### jobId
+
+```ts
+jobId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1847](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1847)
+
+**`Experimental`**
+
+Job identifier
+
+***
+
+### progress?
+
+```ts
+optional progress: number;
+```
+
+Defined in: [packages/ai/src/types.ts:1851](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1851)
+
+**`Experimental`**
+
+Progress percentage (0-100), if available
+
+***
+
+### status
+
+```ts
+status: "pending" | "processing" | "completed" | "failed";
+```
+
+Defined in: [packages/ai/src/types.ts:1849](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1849)
+
+**`Experimental`**
+
+Current status of the job
diff --git a/mintlify/ai/reference/interfaces/VideoUrlResult.md b/mintlify/ai/reference/interfaces/VideoUrlResult.md
new file mode 100644
index 000000000..cff708b59
--- /dev/null
+++ b/mintlify/ai/reference/interfaces/VideoUrlResult.md
@@ -0,0 +1,72 @@
+---
+id: VideoUrlResult
+title: VideoUrlResult
+---
+
+# Interface: VideoUrlResult
+
+Defined in: [packages/ai/src/types.ts:1861](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1861)
+
+**`Experimental`**
+
+Result containing the URL to a generated video.
+
+ Video generation is an experimental feature and may change.
+
+## Properties
+
+### expiresAt?
+
+```ts
+optional expiresAt: Date;
+```
+
+Defined in: [packages/ai/src/types.ts:1867](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1867)
+
+**`Experimental`**
+
+When the URL expires, if applicable
+
+***
+
+### jobId
+
+```ts
+jobId: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1863](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1863)
+
+**`Experimental`**
+
+Job identifier
+
+***
+
+### url
+
+```ts
+url: string;
+```
+
+Defined in: [packages/ai/src/types.ts:1865](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1865)
+
+**`Experimental`**
+
+URL to the generated video
+
+***
+
+### usage?
+
+```ts
+optional usage: TokenUsage<ProviderUsageDetails>;
+```
+
+Defined in: [packages/ai/src/types.ts:1873](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1873)
+
+**`Experimental`**
+
+Usage information for the completed generation, when the adapter can report
+it. For usage-based providers (e.g. fal) this carries `unitsBilled` — the
+real billed quantity — so consumers can compute exact cost.
diff --git a/mintlify/ai/reference/type-aliases/AGUIEvent.md b/mintlify/ai/reference/type-aliases/AGUIEvent.md
new file mode 100644
index 000000000..9ab767228
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AGUIEvent.md
@@ -0,0 +1,36 @@
+---
+id: AGUIEvent
+title: AGUIEvent
+---
+
+# Type Alias: AGUIEvent
+
+```ts
+type AGUIEvent = 
+  | RunStartedEvent
+  | RunFinishedEvent
+  | RunErrorEvent
+  | TextMessageStartEvent
+  | TextMessageContentEvent
+  | TextMessageEndEvent
+  | ToolCallStartEvent
+  | ToolCallArgsEvent
+  | ToolCallEndEvent
+  | ToolCallResultEvent
+  | StepStartedEvent
+  | StepFinishedEvent
+  | MessagesSnapshotEvent
+  | StateSnapshotEvent
+  | StateDeltaEvent
+  | CustomEvent
+  | ReasoningStartEvent
+  | ReasoningMessageStartEvent
+  | ReasoningMessageContentEvent
+  | ReasoningMessageEndEvent
+  | ReasoningEndEvent
+  | ReasoningEncryptedValueEvent;
+```
+
+Defined in: [packages/ai/src/types.ts:1499](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1499)
+
+Union of all AG-UI events.
diff --git a/mintlify/ai/reference/type-aliases/AGUIEventType.md b/mintlify/ai/reference/type-aliases/AGUIEventType.md
new file mode 100644
index 000000000..59ceed477
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AGUIEventType.md
@@ -0,0 +1,23 @@
+---
+id: AGUIEventType
+title: AGUIEventType
+---
+
+# ~~Type Alias: AGUIEventType~~
+
+```ts
+type AGUIEventType = `${EventType}`;
+```
+
+Defined in: [packages/ai/src/types.ts:1009](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1009)
+
+AG-UI Protocol event types.
+
+## Deprecated
+
+Use `EventType` enum from `@ag-ui/core` instead. This type alias
+is kept for backward compatibility but will be removed in a future version.
+
+## See
+
+https://docs.ag-ui.com/concepts/events
diff --git a/mintlify/ai/reference/type-aliases/AIAdapter.md b/mintlify/ai/reference/type-aliases/AIAdapter.md
new file mode 100644
index 000000000..8e60e3c96
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AIAdapter.md
@@ -0,0 +1,21 @@
+---
+id: AIAdapter
+title: AIAdapter
+---
+
+# Type Alias: AIAdapter
+
+```ts
+type AIAdapter = 
+  | AnyTextAdapter
+  | AnySummarizeAdapter
+  | AnyImageAdapter
+  | AnyAudioAdapter
+  | AnyVideoAdapter
+  | AnyTTSAdapter
+  | AnyTranscriptionAdapter;
+```
+
+Defined in: [packages/ai/src/activities/index.ts:178](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/index.ts#L178)
+
+Union of all adapter types that can be passed to chat()
diff --git a/mintlify/ai/reference/type-aliases/AgentLoopStrategy.md b/mintlify/ai/reference/type-aliases/AgentLoopStrategy.md
new file mode 100644
index 000000000..636814e6f
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AgentLoopStrategy.md
@@ -0,0 +1,35 @@
+---
+id: AgentLoopStrategy
+title: AgentLoopStrategy
+---
+
+# Type Alias: AgentLoopStrategy()
+
+```ts
+type AgentLoopStrategy = (state) => boolean;
+```
+
+Defined in: [packages/ai/src/types.ts:845](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L845)
+
+Strategy function that determines whether the agent loop should continue
+
+## Parameters
+
+### state
+
+[`AgentLoopState`](/ai/reference/interfaces/AgentLoopState)
+
+Current state of the agent loop
+
+## Returns
+
+`boolean`
+
+true to continue looping, false to stop
+
+## Example
+
+```typescript
+// Continue for up to 5 iterations
+const strategy: AgentLoopStrategy = ({ iterationCount }) => iterationCount < 5;
+```
diff --git a/mintlify/ai/reference/type-aliases/AnyAudioAdapter.md b/mintlify/ai/reference/type-aliases/AnyAudioAdapter.md
new file mode 100644
index 000000000..a63acbc75
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyAudioAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyAudioAdapter
+title: AnyAudioAdapter
+---
+
+# Type Alias: AnyAudioAdapter
+
+```ts
+type AnyAudioAdapter = AudioAdapter<any, any>;
+```
+
+Defined in: [packages/ai/src/activities/generateAudio/adapter.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateAudio/adapter.ts#L54)
+
+An AudioAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnyChatMiddleware.md b/mintlify/ai/reference/type-aliases/AnyChatMiddleware.md
new file mode 100644
index 000000000..03c965e03
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyChatMiddleware.md
@@ -0,0 +1,14 @@
+---
+id: AnyChatMiddleware
+title: AnyChatMiddleware
+---
+
+# Type Alias: AnyChatMiddleware
+
+```ts
+type AnyChatMiddleware = ChatMiddleware<any>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:582](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L582)
+
+A `ChatMiddleware` with a permissive context — for use as a constraint.
diff --git a/mintlify/ai/reference/type-aliases/AnyClientTool.md b/mintlify/ai/reference/type-aliases/AnyClientTool.md
new file mode 100644
index 000000000..b630df0ad
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyClientTool.md
@@ -0,0 +1,16 @@
+---
+id: AnyClientTool
+title: AnyClientTool
+---
+
+# Type Alias: AnyClientTool
+
+```ts
+type AnyClientTool = 
+  | Omit<ClientTool<any, any, string, any>, "execute"> & object
+  | Omit<ToolDefinitionInstance<any, any, string, any>, "execute"> & object;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:61](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L61)
+
+Union type for any kind of client-side tool (client tool or definition)
diff --git a/mintlify/ai/reference/type-aliases/AnyGenerationMiddleware.md b/mintlify/ai/reference/type-aliases/AnyGenerationMiddleware.md
new file mode 100644
index 000000000..8d2d7f8c3
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyGenerationMiddleware.md
@@ -0,0 +1,14 @@
+---
+id: AnyGenerationMiddleware
+title: AnyGenerationMiddleware
+---
+
+# Type Alias: AnyGenerationMiddleware
+
+```ts
+type AnyGenerationMiddleware = GenerationMiddleware<any>;
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:173](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L173)
+
+A `GenerationMiddleware` with a permissive context — for use as a constraint.
diff --git a/mintlify/ai/reference/type-aliases/AnyImageAdapter.md b/mintlify/ai/reference/type-aliases/AnyImageAdapter.md
new file mode 100644
index 000000000..adee912c6
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyImageAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyImageAdapter
+title: AnyImageAdapter
+---
+
+# Type Alias: AnyImageAdapter
+
+```ts
+type AnyImageAdapter = ImageAdapter<any, any, any, any, any>;
+```
+
+Defined in: [packages/ai/src/activities/generateImage/adapter.ts:79](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateImage/adapter.ts#L79)
+
+An ImageAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnySummarizeAdapter.md b/mintlify/ai/reference/type-aliases/AnySummarizeAdapter.md
new file mode 100644
index 000000000..762dbac00
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnySummarizeAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnySummarizeAdapter
+title: AnySummarizeAdapter
+---
+
+# Type Alias: AnySummarizeAdapter
+
+```ts
+type AnySummarizeAdapter = SummarizeAdapter<any, any>;
+```
+
+Defined in: [packages/ai/src/activities/summarize/adapter.ts:67](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/summarize/adapter.ts#L67)
+
+A SummarizeAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnyTTSAdapter.md b/mintlify/ai/reference/type-aliases/AnyTTSAdapter.md
new file mode 100644
index 000000000..2a0dc63c3
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyTTSAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyTTSAdapter
+title: AnyTTSAdapter
+---
+
+# Type Alias: AnyTTSAdapter
+
+```ts
+type AnyTTSAdapter = TTSAdapter<any, any>;
+```
+
+Defined in: [packages/ai/src/activities/generateSpeech/adapter.ts:52](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateSpeech/adapter.ts#L52)
+
+A TTSAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnyTextAdapter.md b/mintlify/ai/reference/type-aliases/AnyTextAdapter.md
new file mode 100644
index 000000000..fff9ac9a9
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyTextAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyTextAdapter
+title: AnyTextAdapter
+---
+
+# Type Alias: AnyTextAdapter
+
+```ts
+type AnyTextAdapter = TextAdapter<any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/ai/src/activities/chat/adapter.ts:168](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/adapter.ts#L168)
+
+A TextAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnyTool.md b/mintlify/ai/reference/type-aliases/AnyTool.md
new file mode 100644
index 000000000..24b77739d
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyTool.md
@@ -0,0 +1,34 @@
+---
+id: AnyTool
+title: AnyTool
+---
+
+# Type Alias: AnyTool
+
+```ts
+type AnyTool = Omit<Tool<any, any, any, any>, "execute"> & object;
+```
+
+Defined in: [packages/ai/src/types.ts:721](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L721)
+
+## Type Declaration
+
+### execute()?
+
+```ts
+optional execute: (args, context?) => any;
+```
+
+#### Parameters
+
+##### args
+
+`any`
+
+##### context?
+
+`any`
+
+#### Returns
+
+`any`
diff --git a/mintlify/ai/reference/type-aliases/AnyTranscriptionAdapter.md b/mintlify/ai/reference/type-aliases/AnyTranscriptionAdapter.md
new file mode 100644
index 000000000..e47d462d1
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyTranscriptionAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyTranscriptionAdapter
+title: AnyTranscriptionAdapter
+---
+
+# Type Alias: AnyTranscriptionAdapter
+
+```ts
+type AnyTranscriptionAdapter = TranscriptionAdapter<any, any>;
+```
+
+Defined in: [packages/ai/src/activities/generateTranscription/adapter.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateTranscription/adapter.ts#L54)
+
+A TranscriptionAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/AnyVideoAdapter.md b/mintlify/ai/reference/type-aliases/AnyVideoAdapter.md
new file mode 100644
index 000000000..45aa1ebdf
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/AnyVideoAdapter.md
@@ -0,0 +1,15 @@
+---
+id: AnyVideoAdapter
+title: AnyVideoAdapter
+---
+
+# Type Alias: AnyVideoAdapter
+
+```ts
+type AnyVideoAdapter = VideoAdapter<any, any, any, any, any, any>;
+```
+
+Defined in: [packages/ai/src/activities/generateVideo/adapter.ts:132](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/generateVideo/adapter.ts#L132)
+
+A VideoAdapter with any/unknown type parameters.
+Useful as a constraint in generic functions and interfaces.
diff --git a/mintlify/ai/reference/type-aliases/BeforeToolCallDecision.md b/mintlify/ai/reference/type-aliases/BeforeToolCallDecision.md
new file mode 100644
index 000000000..d6f18ab8c
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/BeforeToolCallDecision.md
@@ -0,0 +1,33 @@
+---
+id: BeforeToolCallDecision
+title: BeforeToolCallDecision
+---
+
+# Type Alias: BeforeToolCallDecision
+
+```ts
+type BeforeToolCallDecision = 
+  | void
+  | undefined
+  | null
+  | {
+  args: unknown;
+  type: "transformArgs";
+}
+  | {
+  result: unknown;
+  type: "skip";
+}
+  | {
+  reason?: string;
+  type: "abort";
+};
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:247](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L247)
+
+Decision returned from onBeforeToolCall.
+- undefined/void: continue with normal execution
+- &#123; type: 'transformArgs', args &#125;: replace args used for execution
+- &#123; type: 'skip', result &#125;: skip execution, use provided result
+- &#123; type: 'abort', reason &#125;: abort the entire chat run
diff --git a/mintlify/ai/reference/type-aliases/Capability.md b/mintlify/ai/reference/type-aliases/Capability.md
new file mode 100644
index 000000000..219095cb5
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/Capability.md
@@ -0,0 +1,57 @@
+---
+id: Capability
+title: Capability
+---
+
+# Type Alias: Capability\&lt;TValue, TName\>
+
+```ts
+type Capability<TValue, TName> = readonly [CapabilityGetter<TValue>, CapabilityProvider<TValue>] & object;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:36](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L36)
+
+A capability handle. It is BOTH a `[get, provide]` tuple (array-destructurable)
+AND the identity used in middleware `requires`/`provides` declarations.
+
+Runtime identity is this object's reference. The `capabilityName` literal is
+used for diagnostics and COMPILE-TIME tracking only — capability names MUST be
+unique across an app or the type-level coverage check conflates them.
+
+## Type Declaration
+
+### capabilityName
+
+```ts
+readonly capabilityName: TName;
+```
+
+### has()
+
+```ts
+has: (ctx) => boolean;
+```
+
+**`Internal`**
+
+Presence check for the post-setup assertion.
+
+#### Parameters
+
+##### ctx
+
+[`CapabilityContext`](/ai/reference/interfaces/CapabilityContext)
+
+#### Returns
+
+`boolean`
+
+## Type Parameters
+
+### TValue
+
+`TValue` = `unknown`
+
+### TName
+
+`TName` *extends* `string` = `string`
diff --git a/mintlify/ai/reference/type-aliases/CapabilityHandle.md b/mintlify/ai/reference/type-aliases/CapabilityHandle.md
new file mode 100644
index 000000000..2d4dde523
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/CapabilityHandle.md
@@ -0,0 +1,17 @@
+---
+id: CapabilityHandle
+title: CapabilityHandle
+---
+
+# Type Alias: CapabilityHandle
+
+```ts
+type CapabilityHandle = Capability<any, string>;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:54](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L54)
+
+A capability handle with permissive value/name — for use as a constraint in
+`requires`/`provides` arrays. Concentrates `any` in one named alias (same
+convention as `AnyTextAdapter`/`AnyTool`); needed so `Capability<SpecificT>`
+is assignable to the handle-array element type.
diff --git a/mintlify/ai/reference/type-aliases/CapabilityProvider.md b/mintlify/ai/reference/type-aliases/CapabilityProvider.md
new file mode 100644
index 000000000..06ec9c68f
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/CapabilityProvider.md
@@ -0,0 +1,34 @@
+---
+id: CapabilityProvider
+title: CapabilityProvider
+---
+
+# Type Alias: CapabilityProvider()\&lt;TValue\>
+
+```ts
+type CapabilityProvider<TValue> = (ctx, value) => void;
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/capabilities.ts:23](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/capabilities.ts#L23)
+
+Writes a capability value onto a context.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### ctx
+
+[`CapabilityContext`](/ai/reference/interfaces/CapabilityContext)
+
+### value
+
+`TValue`
+
+## Returns
+
+`void`
diff --git a/mintlify/ai/reference/type-aliases/ChatMiddlewarePhase.md b/mintlify/ai/reference/type-aliases/ChatMiddlewarePhase.md
new file mode 100644
index 000000000..00df1462d
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ChatMiddlewarePhase.md
@@ -0,0 +1,27 @@
+---
+id: ChatMiddlewarePhase
+title: ChatMiddlewarePhase
+---
+
+# Type Alias: ChatMiddlewarePhase
+
+```ts
+type ChatMiddlewarePhase = 
+  | "init"
+  | "beforeModel"
+  | "modelStream"
+  | "beforeTools"
+  | "afterTools"
+  | "structuredOutput";
+```
+
+Defined in: [packages/ai/src/activities/chat/middleware/types.ts:61](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/middleware/types.ts#L61)
+
+Phase of the chat middleware lifecycle.
+- 'init': Initial config transform before the chat engine starts
+- 'beforeModel': Before each adapter chatStream call (per agent iteration)
+- 'modelStream': During model streaming
+- 'beforeTools': Before tool execution phase
+- 'afterTools': After tool execution phase
+- 'structuredOutput': During the final structured-output adapter call (set
+  for chunks from adapter.structuredOutputStream or the synthesized fallback)
diff --git a/mintlify/ai/reference/type-aliases/ConstrainedContent.md b/mintlify/ai/reference/type-aliases/ConstrainedContent.md
new file mode 100644
index 000000000..5c964610e
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ConstrainedContent.md
@@ -0,0 +1,24 @@
+---
+id: ConstrainedContent
+title: ConstrainedContent
+---
+
+# Type Alias: ConstrainedContent\&lt;TInputModalitiesTypes\>
+
+```ts
+type ConstrainedContent<TInputModalitiesTypes> = 
+  | string
+  | null
+  | ContentPartForInputModalitiesTypes<TInputModalitiesTypes>[];
+```
+
+Defined in: [packages/ai/src/types.ts:340](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L340)
+
+Type for message content constrained by supported modalities.
+When modalities is ['text', 'image'], only TextPart and ImagePart are allowed in the array.
+
+## Type Parameters
+
+### TInputModalitiesTypes
+
+`TInputModalitiesTypes` *extends* [`InputModalitiesTypes`](/ai/reference/type-aliases/InputModalitiesTypes)
diff --git a/mintlify/ai/reference/type-aliases/ConstrainedModelMessage.md b/mintlify/ai/reference/type-aliases/ConstrainedModelMessage.md
new file mode 100644
index 000000000..a5e70992c
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ConstrainedModelMessage.md
@@ -0,0 +1,29 @@
+---
+id: ConstrainedModelMessage
+title: ConstrainedModelMessage
+---
+
+# Type Alias: ConstrainedModelMessage\&lt;TInputModalitiesTypes\>
+
+```ts
+type ConstrainedModelMessage<TInputModalitiesTypes> = Omit<ModelMessage, "content"> & object;
+```
+
+Defined in: [packages/ai/src/types.ts:494](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L494)
+
+A ModelMessage with content constrained to only allow content parts
+matching the specified input modalities.
+
+## Type Declaration
+
+### content
+
+```ts
+content: ConstrainedContent<TInputModalitiesTypes>;
+```
+
+## Type Parameters
+
+### TInputModalitiesTypes
+
+`TInputModalitiesTypes` *extends* [`InputModalitiesTypes`](/ai/reference/type-aliases/InputModalitiesTypes)
diff --git a/mintlify/ai/reference/type-aliases/ContentPart.md b/mintlify/ai/reference/type-aliases/ContentPart.md
new file mode 100644
index 000000000..3c4bfff53
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ContentPart.md
@@ -0,0 +1,49 @@
+---
+id: ContentPart
+title: ContentPart
+---
+
+# Type Alias: ContentPart\&lt;TTextMeta, TImageMeta, TAudioMeta, TVideoMeta, TDocumentMeta\>
+
+```ts
+type ContentPart<TTextMeta, TImageMeta, TAudioMeta, TVideoMeta, TDocumentMeta> = 
+  | TextPart<TTextMeta>
+  | ImagePart<TImageMeta>
+  | AudioPart<TAudioMeta>
+  | VideoPart<TVideoMeta>
+| DocumentPart<TDocumentMeta>;
+```
+
+Defined in: [packages/ai/src/types.ts:299](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L299)
+
+Union type for all multimodal content parts.
+
+## Type Parameters
+
+### TTextMeta
+
+`TTextMeta` = `unknown`
+
+### TImageMeta
+
+`TImageMeta` = `unknown`
+
+Provider-specific image metadata type
+
+### TAudioMeta
+
+`TAudioMeta` = `unknown`
+
+Provider-specific audio metadata type
+
+### TVideoMeta
+
+`TVideoMeta` = `unknown`
+
+Provider-specific video metadata type
+
+### TDocumentMeta
+
+`TDocumentMeta` = `unknown`
+
+Provider-specific document metadata type
diff --git a/mintlify/ai/reference/type-aliases/ContentPartForInputModalitiesTypes.md b/mintlify/ai/reference/type-aliases/ContentPartForInputModalitiesTypes.md
new file mode 100644
index 000000000..70bb2f03e
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ContentPartForInputModalitiesTypes.md
@@ -0,0 +1,23 @@
+---
+id: ContentPartForInputModalitiesTypes
+title: ContentPartForInputModalitiesTypes
+---
+
+# Type Alias: ContentPartForInputModalitiesTypes\&lt;TInputModalitiesTypes\>
+
+```ts
+type ContentPartForInputModalitiesTypes<TInputModalitiesTypes> = Extract<ContentPart<TInputModalitiesTypes["messageMetadataByModality"]["text"], TInputModalitiesTypes["messageMetadataByModality"]["image"], TInputModalitiesTypes["messageMetadataByModality"]["audio"], TInputModalitiesTypes["messageMetadataByModality"]["video"], TInputModalitiesTypes["messageMetadataByModality"]["document"]>, {
+  type: TInputModalitiesTypes["inputModalities"][number];
+}>;
+```
+
+Defined in: [packages/ai/src/types.ts:316](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L316)
+
+Helper type to filter ContentPart union to only include specific modalities.
+Used to constrain message content based on model capabilities.
+
+## Type Parameters
+
+### TInputModalitiesTypes
+
+`TInputModalitiesTypes` *extends* [`InputModalitiesTypes`](/ai/reference/type-aliases/InputModalitiesTypes)
diff --git a/mintlify/ai/reference/type-aliases/ContentPartForModalities.md b/mintlify/ai/reference/type-aliases/ContentPartForModalities.md
new file mode 100644
index 000000000..5e277d218
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ContentPartForModalities.md
@@ -0,0 +1,12 @@
+---
+title: "ContentPartForModalities"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/type-aliases/ContentPartForModalities)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/type-aliases/ContentPartSource.md b/mintlify/ai/reference/type-aliases/ContentPartSource.md
new file mode 100644
index 000000000..6e0130489
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ContentPartSource.md
@@ -0,0 +1,19 @@
+---
+id: ContentPartSource
+title: ContentPartSource
+---
+
+# Type Alias: ContentPartSource
+
+```ts
+type ContentPartSource = 
+  | ContentPartDataSource
+  | ContentPartUrlSource;
+```
+
+Defined in: [packages/ai/src/types.ts:242](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L242)
+
+Source specification for multimodal content.
+Discriminated union supporting both inline data (base64) and URL-based content.
+- For 'data' sources: mimeType is required
+- For 'url' sources: mimeType is optional
diff --git a/mintlify/ai/reference/type-aliases/DebugOption.md b/mintlify/ai/reference/type-aliases/DebugOption.md
new file mode 100644
index 000000000..30a333cc5
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/DebugOption.md
@@ -0,0 +1,14 @@
+---
+id: DebugOption
+title: DebugOption
+---
+
+# Type Alias: DebugOption
+
+```ts
+type DebugOption = boolean | DebugConfig;
+```
+
+Defined in: [packages/ai/src/logger/types.ts:83](https://github.com/TanStack/ai/blob/main/packages/ai/src/logger/types.ts#L83)
+
+The shape accepted by the `debug` option on every `@tanstack/ai` activity. Pass `true` to enable all categories with the default console logger; `false` to silence everything including errors; an object for granular control.
diff --git a/mintlify/ai/reference/type-aliases/DeepPartial.md b/mintlify/ai/reference/type-aliases/DeepPartial.md
new file mode 100644
index 000000000..482e2db41
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/DeepPartial.md
@@ -0,0 +1,24 @@
+---
+id: DeepPartial
+title: DeepPartial
+---
+
+# Type Alias: DeepPartial\&lt;T\>
+
+```ts
+type DeepPartial<T> = T extends ReadonlyArray<infer U> ? DeepPartial<U>[] : T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T;
+```
+
+Defined in: [packages/ai/src/types.ts:413](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L413)
+
+Recursive `Partial` — every nested field becomes optional. Used as the
+`partial` type on a streaming structured-output part since the progressive
+JSON parse hands back objects whose fields are only filled in as bytes
+arrive. Defaulted in `DeepPartial<unknown>` → `unknown` so untyped parts
+keep their existing shape.
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/ai/reference/type-aliases/ExtractModalitiesForModel.md b/mintlify/ai/reference/type-aliases/ExtractModalitiesForModel.md
new file mode 100644
index 000000000..0d5084641
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ExtractModalitiesForModel.md
@@ -0,0 +1,12 @@
+---
+title: "ExtractModalitiesForModel"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/type-aliases/ExtractModalitiesForModel)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/type-aliases/ExtractModelsFromAdapter.md b/mintlify/ai/reference/type-aliases/ExtractModelsFromAdapter.md
new file mode 100644
index 000000000..25567a46c
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ExtractModelsFromAdapter.md
@@ -0,0 +1,12 @@
+---
+title: "ExtractModelsFromAdapter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/type-aliases/ExtractModelsFromAdapter)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/type-aliases/GeneratedAudio.md b/mintlify/ai/reference/type-aliases/GeneratedAudio.md
new file mode 100644
index 000000000..6343fe07a
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/GeneratedAudio.md
@@ -0,0 +1,32 @@
+---
+id: GeneratedAudio
+title: GeneratedAudio
+---
+
+# Type Alias: GeneratedAudio
+
+```ts
+type GeneratedAudio = GeneratedMediaSource & object;
+```
+
+Defined in: [packages/ai/src/types.ts:1764](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1764)
+
+A single generated audio output
+
+## Type Declaration
+
+### contentType?
+
+```ts
+optional contentType: string;
+```
+
+Content type of the audio (e.g., 'audio/wav', 'audio/mp3')
+
+### duration?
+
+```ts
+optional duration: number;
+```
+
+Duration of the generated audio in seconds
diff --git a/mintlify/ai/reference/type-aliases/GeneratedImage.md b/mintlify/ai/reference/type-aliases/GeneratedImage.md
new file mode 100644
index 000000000..356b3c404
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/GeneratedImage.md
@@ -0,0 +1,24 @@
+---
+id: GeneratedImage
+title: GeneratedImage
+---
+
+# Type Alias: GeneratedImage
+
+```ts
+type GeneratedImage = GeneratedMediaSource & object;
+```
+
+Defined in: [packages/ai/src/types.ts:1715](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1715)
+
+A single generated image
+
+## Type Declaration
+
+### revisedPrompt?
+
+```ts
+optional revisedPrompt: string;
+```
+
+Revised prompt used by the model (if applicable)
diff --git a/mintlify/ai/reference/type-aliases/GeneratedMediaSource.md b/mintlify/ai/reference/type-aliases/GeneratedMediaSource.md
new file mode 100644
index 000000000..e2b857619
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/GeneratedMediaSource.md
@@ -0,0 +1,69 @@
+---
+id: GeneratedMediaSource
+title: GeneratedMediaSource
+---
+
+# Type Alias: GeneratedMediaSource
+
+```ts
+type GeneratedMediaSource = 
+  | {
+  b64Json?: never;
+  url: string;
+}
+  | {
+  b64Json: string;
+  url?: never;
+};
+```
+
+Defined in: [packages/ai/src/types.ts:1700](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1700)
+
+Source of a generated media asset. Exactly one of `url` or `b64Json` is
+present; the other is absent. Modeled as a mutually-exclusive union so the
+type rejects `{}` and `{ url, b64Json }` together at compile time while
+preserving the flat `.url` / `.b64Json` access patterns.
+
+## Type Declaration
+
+```ts
+{
+  b64Json?: never;
+  url: string;
+}
+```
+
+### b64Json?
+
+```ts
+optional b64Json: never;
+```
+
+### url
+
+```ts
+url: string;
+```
+
+URL to the generated asset (may be temporary)
+
+```ts
+{
+  b64Json: string;
+  url?: never;
+}
+```
+
+### b64Json
+
+```ts
+b64Json: string;
+```
+
+Base64-encoded asset data
+
+### url?
+
+```ts
+optional url: never;
+```
diff --git a/mintlify/ai/reference/type-aliases/GenerationActivity.md b/mintlify/ai/reference/type-aliases/GenerationActivity.md
new file mode 100644
index 000000000..85b003530
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/GenerationActivity.md
@@ -0,0 +1,20 @@
+---
+id: GenerationActivity
+title: GenerationActivity
+---
+
+# Type Alias: GenerationActivity
+
+```ts
+type GenerationActivity = "chat" | "image" | "video" | "audio" | "tts" | "transcription";
+```
+
+Defined in: [packages/ai/src/activities/middleware/types.ts:34](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/middleware/types.ts#L34)
+
+The activity an observability event describes.
+
+Mirrors the public surface a caller reaches for: `'chat'` for `chat()`, and
+the media kinds for the `generate*` activities. `'tts'` matches the speech
+adapter's kind (the public discriminator avoids inventing a parallel
+`'speech'`/`'text'` vocabulary). `otelMiddleware` maps each to its
+`gen_ai.operation.name`.
diff --git a/mintlify/ai/reference/type-aliases/InferSchemaType.md b/mintlify/ai/reference/type-aliases/InferSchemaType.md
new file mode 100644
index 000000000..b2d7f9e5e
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/InferSchemaType.md
@@ -0,0 +1,25 @@
+---
+id: InferSchemaType
+title: InferSchemaType
+---
+
+# Type Alias: InferSchemaType\&lt;T\>
+
+```ts
+type InferSchemaType<T> = T extends StandardJSONSchemaV1<infer TInput, unknown> ? TInput : T extends StandardSchemaV1<infer TInput, unknown> ? TInput : unknown;
+```
+
+Defined in: [packages/ai/src/types.ts:143](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L143)
+
+Infer the TypeScript type from a schema.
+For Standard JSON Schema compliant schemas, extracts the input type.
+For Standard Schema validators (e.g. Zod's `~standard` surface), extracts
+the input type from the `StandardSchemaV1` shape.
+For plain JSONSchema, returns `unknown` since we can't infer types from
+JSON Schema at compile time.
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/ai/reference/type-aliases/InferToolInput.md b/mintlify/ai/reference/type-aliases/InferToolInput.md
new file mode 100644
index 000000000..1c53943c4
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/InferToolInput.md
@@ -0,0 +1,20 @@
+---
+id: InferToolInput
+title: InferToolInput
+---
+
+# Type Alias: InferToolInput\&lt;T\>
+
+```ts
+type InferToolInput<T> = T extends object ? TInput extends StandardJSONSchemaV1<infer TInferred, unknown> ? TInferred : TInput extends JSONSchema ? unknown : unknown : unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:77](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L77)
+
+Extract the input type from a tool (inferred from Standard JSON Schema, or `unknown` for plain JSONSchema)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/ai/reference/type-aliases/InferToolName.md b/mintlify/ai/reference/type-aliases/InferToolName.md
new file mode 100644
index 000000000..ff6f0f2d3
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/InferToolName.md
@@ -0,0 +1,20 @@
+---
+id: InferToolName
+title: InferToolName
+---
+
+# Type Alias: InferToolName\&lt;T\>
+
+```ts
+type InferToolName<T> = T extends object ? N : never;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:72](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L72)
+
+Extract the tool name as a literal type
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/ai/reference/type-aliases/InferToolOutput.md b/mintlify/ai/reference/type-aliases/InferToolOutput.md
new file mode 100644
index 000000000..d79de18c6
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/InferToolOutput.md
@@ -0,0 +1,20 @@
+---
+id: InferToolOutput
+title: InferToolOutput
+---
+
+# Type Alias: InferToolOutput\&lt;T\>
+
+```ts
+type InferToolOutput<T> = T extends object ? TOutput extends StandardJSONSchemaV1<infer TInferred, unknown> ? TInferred : TOutput extends JSONSchema ? unknown : unknown : unknown;
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/tool-definition.ts:88](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/tool-definition.ts#L88)
+
+Extract the output type from a tool (inferred from Standard JSON Schema, or `unknown` for plain JSONSchema)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/ai/reference/type-aliases/InputModalitiesTypes.md b/mintlify/ai/reference/type-aliases/InputModalitiesTypes.md
new file mode 100644
index 000000000..5bcf59644
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/InputModalitiesTypes.md
@@ -0,0 +1,32 @@
+---
+id: InputModalitiesTypes
+title: InputModalitiesTypes
+---
+
+# Type Alias: InputModalitiesTypes
+
+```ts
+type InputModalitiesTypes = object;
+```
+
+Defined in: [packages/ai/src/types.ts:485](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L485)
+
+## Properties
+
+### inputModalities
+
+```ts
+inputModalities: ReadonlyArray<Modality>;
+```
+
+Defined in: [packages/ai/src/types.ts:486](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L486)
+
+***
+
+### messageMetadataByModality
+
+```ts
+messageMetadataByModality: DefaultMessageMetadataByModality;
+```
+
+Defined in: [packages/ai/src/types.ts:487](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L487)
diff --git a/mintlify/ai/reference/type-aliases/MCPConnectionPolicy.md b/mintlify/ai/reference/type-aliases/MCPConnectionPolicy.md
new file mode 100644
index 000000000..63b408f6e
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MCPConnectionPolicy.md
@@ -0,0 +1,20 @@
+---
+id: MCPConnectionPolicy
+title: MCPConnectionPolicy
+---
+
+# Type Alias: MCPConnectionPolicy
+
+```ts
+type MCPConnectionPolicy = "close" | "keep-alive";
+```
+
+Defined in: [packages/ai/src/activities/chat/mcp/types.ts:50](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/mcp/types.ts#L50)
+
+Controls what happens to MCP connections when the chat run ends.
+
+- `'close'` (default) — `chat()` closes each connection when the run ends
+  (after the agent loop completes and the stream is drained), so tools can
+  still execute throughout the run.
+- `'keep-alive'` — `chat()` never closes the connections; the caller owns
+  their lifecycle (e.g. keep them warm across requests).
diff --git a/mintlify/ai/reference/type-aliases/MediaInputRole.md b/mintlify/ai/reference/type-aliases/MediaInputRole.md
new file mode 100644
index 000000000..7295b883c
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MediaInputRole.md
@@ -0,0 +1,24 @@
+---
+id: MediaInputRole
+title: MediaInputRole
+---
+
+# Type Alias: MediaInputRole
+
+```ts
+type MediaInputRole = 
+  | "reference"
+  | "mask"
+  | "control"
+  | "start_frame"
+  | "end_frame"
+  | "character";
+```
+
+Defined in: [packages/ai/src/types.ts:1575](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1575)
+
+Optional role hint on a media input part (image / video / audio). Adapters
+read `metadata.role` to route the part to the provider-specific request
+field — e.g. `'mask'` → OpenAI `mask` / fal `mask_url`, `'end_frame'` → fal
+`end_image_url`, `'reference'` → fal `reference_image_urls`. When omitted
+the adapter falls back to positional routing.
diff --git a/mintlify/ai/reference/type-aliases/MediaPrompt.md b/mintlify/ai/reference/type-aliases/MediaPrompt.md
new file mode 100644
index 000000000..077283a37
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MediaPrompt.md
@@ -0,0 +1,23 @@
+---
+id: MediaPrompt
+title: MediaPrompt
+---
+
+# Type Alias: MediaPrompt
+
+```ts
+type MediaPrompt = string | MediaPromptPart[];
+```
+
+Defined in: [packages/ai/src/types.ts:1626](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1626)
+
+Prompt accepted by `generateImage()` / `generateVideo()`: a plain string,
+or an ordered array of content parts for image-conditioned generation
+("not like this *(image)*, more like this *(image)*"). Part order is
+meaningful — adapters with native multimodal prompts (Gemini, OpenRouter)
+preserve the interleaving; named-field providers (fal, OpenAI, xAI)
+extract the media parts and flatten the text. Text is always sent
+verbatim: to reference inputs from the prompt, write the provider's own
+syntax yourself (e.g. fal's `@Image1`, OpenAI's "image 1"). An array may
+be media-only (e.g. upscalers or pure img2img endpoints that take no
+instruction text).
diff --git a/mintlify/ai/reference/type-aliases/MediaPromptFor.md b/mintlify/ai/reference/type-aliases/MediaPromptFor.md
new file mode 100644
index 000000000..58e52283c
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MediaPromptFor.md
@@ -0,0 +1,28 @@
+---
+id: MediaPromptFor
+title: MediaPromptFor
+---
+
+# Type Alias: MediaPromptFor\&lt;TModalities\>
+
+```ts
+type MediaPromptFor<TModalities> = 
+  | string
+  | (
+  | TextPart
+  | MediaPartByModality[TModalities])[];
+```
+
+Defined in: [packages/ai/src/types.ts:1647](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1647)
+
+Prompt type narrowed to the modalities a specific model supports.
+`MediaPromptFor<never>` (a text-only model) is `string | Array<TextPart>`;
+`MediaPromptFor<'image'>` additionally admits image parts, etc. Used by
+the activity option types together with the adapter's per-model input
+modality map so unsupported parts fail at compile time.
+
+## Type Parameters
+
+### TModalities
+
+`TModalities` *extends* [`MediaPromptModality`](/ai/reference/type-aliases/MediaPromptModality) = `never`
diff --git a/mintlify/ai/reference/type-aliases/MediaPromptModality.md b/mintlify/ai/reference/type-aliases/MediaPromptModality.md
new file mode 100644
index 000000000..1af417bad
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MediaPromptModality.md
@@ -0,0 +1,14 @@
+---
+id: MediaPromptModality
+title: MediaPromptModality
+---
+
+# Type Alias: MediaPromptModality
+
+```ts
+type MediaPromptModality = "image" | "video" | "audio";
+```
+
+Defined in: [packages/ai/src/types.ts:1631](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1631)
+
+Non-text modalities a media-generation model can accept in its prompt.
diff --git a/mintlify/ai/reference/type-aliases/MediaPromptPart.md b/mintlify/ai/reference/type-aliases/MediaPromptPart.md
new file mode 100644
index 000000000..67a5b318e
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MediaPromptPart.md
@@ -0,0 +1,21 @@
+---
+id: MediaPromptPart
+title: MediaPromptPart
+---
+
+# Type Alias: MediaPromptPart
+
+```ts
+type MediaPromptPart = 
+  | TextPart
+  | ImagePart<MediaInputMetadata>
+  | VideoPart<MediaInputMetadata>
+| AudioPart<MediaInputMetadata>;
+```
+
+Defined in: [packages/ai/src/types.ts:1608](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1608)
+
+A single part of a multimodal media-generation prompt. Reuses the chat
+content-part shapes: text parts carry the instruction, image / video /
+audio parts carry conditioning inputs (with an optional
+`metadata.role` hint — see [MediaInputRole](/ai/reference/type-aliases/MediaInputRole)).
diff --git a/mintlify/ai/reference/type-aliases/MessagePart.md b/mintlify/ai/reference/type-aliases/MessagePart.md
new file mode 100644
index 000000000..bfa29d6ac
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/MessagePart.md
@@ -0,0 +1,28 @@
+---
+id: MessagePart
+title: MessagePart
+---
+
+# Type Alias: MessagePart\&lt;TData\>
+
+```ts
+type MessagePart<TData> = 
+  | TextPart
+  | ImagePart
+  | AudioPart
+  | VideoPart
+  | DocumentPart
+  | ToolCallPart
+  | ToolResultPart
+  | ThinkingPart
+  | StructuredOutputPart<TData>
+  | UIResourcePart;
+```
+
+Defined in: [packages/ai/src/types.ts:459](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L459)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
diff --git a/mintlify/ai/reference/type-aliases/ModalitiesArrayToUnion.md b/mintlify/ai/reference/type-aliases/ModalitiesArrayToUnion.md
new file mode 100644
index 000000000..5a4f36a25
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ModalitiesArrayToUnion.md
@@ -0,0 +1,21 @@
+---
+id: ModalitiesArrayToUnion
+title: ModalitiesArrayToUnion
+---
+
+# Type Alias: ModalitiesArrayToUnion\&lt;T\>
+
+```ts
+type ModalitiesArrayToUnion<T> = T[number];
+```
+
+Defined in: [packages/ai/src/types.ts:333](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L333)
+
+Helper type to convert a readonly array of modalities to a union type.
+e.g., readonly ['text', 'image'] -> 'text' | 'image'
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ReadonlyArray`\&lt;[`Modality`](/ai/reference/type-aliases/Modality)\>
diff --git a/mintlify/ai/reference/type-aliases/Modality.md b/mintlify/ai/reference/type-aliases/Modality.md
new file mode 100644
index 000000000..bbeb71d16
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/Modality.md
@@ -0,0 +1,19 @@
+---
+id: Modality
+title: Modality
+---
+
+# Type Alias: Modality
+
+```ts
+type Modality = "text" | "image" | "audio" | "video" | "document";
+```
+
+Defined in: [packages/ai/src/types.ts:195](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L195)
+
+Supported input modality types for multimodal content.
+- 'text': Plain text content
+- 'image': Image content (base64 or URL)
+- 'audio': Audio content (base64 or URL)
+- 'video': Video content (base64 or URL)
+- 'document': Document content like PDFs (base64 or URL)
diff --git a/mintlify/ai/reference/type-aliases/ModelInputModalitiesByName.md b/mintlify/ai/reference/type-aliases/ModelInputModalitiesByName.md
new file mode 100644
index 000000000..d40171052
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ModelInputModalitiesByName.md
@@ -0,0 +1,16 @@
+---
+id: ModelInputModalitiesByName
+title: ModelInputModalitiesByName
+---
+
+# Type Alias: ModelInputModalitiesByName
+
+```ts
+type ModelInputModalitiesByName = Record<string, ReadonlyArray<MediaPromptModality>>;
+```
+
+Defined in: [packages/ai/src/types.ts:1656](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1656)
+
+Per-model map from model name to the prompt modalities it accepts, used as
+an adapter type parameter (`TModelInputModalitiesByName`). Models absent
+from the map fall back to the unconstrained [MediaPrompt](/ai/reference/type-aliases/MediaPrompt).
diff --git a/mintlify/ai/reference/type-aliases/RealtimeErrorCode.md b/mintlify/ai/reference/type-aliases/RealtimeErrorCode.md
new file mode 100644
index 000000000..6454c93de
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeErrorCode.md
@@ -0,0 +1,19 @@
+---
+id: RealtimeErrorCode
+title: RealtimeErrorCode
+---
+
+# Type Alias: RealtimeErrorCode
+
+```ts
+type RealtimeErrorCode = 
+  | "TOKEN_EXPIRED"
+  | "CONNECTION_FAILED"
+  | "PERMISSION_DENIED"
+  | "PROVIDER_ERROR"
+  | "UNKNOWN";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:282](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L282)
+
+Error codes for realtime errors
diff --git a/mintlify/ai/reference/type-aliases/RealtimeEvent.md b/mintlify/ai/reference/type-aliases/RealtimeEvent.md
new file mode 100644
index 000000000..07000d135
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeEvent.md
@@ -0,0 +1,22 @@
+---
+id: RealtimeEvent
+title: RealtimeEvent
+---
+
+# Type Alias: RealtimeEvent
+
+```ts
+type RealtimeEvent = 
+  | "status_change"
+  | "mode_change"
+  | "transcript"
+  | "audio_chunk"
+  | "tool_call"
+  | "message_complete"
+  | "interrupted"
+  | "error";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:240](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L240)
+
+Events emitted by the realtime connection
diff --git a/mintlify/ai/reference/type-aliases/RealtimeEventHandler.md b/mintlify/ai/reference/type-aliases/RealtimeEventHandler.md
new file mode 100644
index 000000000..7ec9588dc
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeEventHandler.md
@@ -0,0 +1,30 @@
+---
+id: RealtimeEventHandler
+title: RealtimeEventHandler
+---
+
+# Type Alias: RealtimeEventHandler()\&lt;TEvent\>
+
+```ts
+type RealtimeEventHandler<TEvent> = (payload) => void;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:271](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L271)
+
+Handler type for realtime events
+
+## Type Parameters
+
+### TEvent
+
+`TEvent` *extends* [`RealtimeEvent`](/ai/reference/type-aliases/RealtimeEvent)
+
+## Parameters
+
+### payload
+
+[`RealtimeEventPayloads`](/ai/reference/interfaces/RealtimeEventPayloads)\[`TEvent`\]
+
+## Returns
+
+`void`
diff --git a/mintlify/ai/reference/type-aliases/RealtimeMessagePart.md b/mintlify/ai/reference/type-aliases/RealtimeMessagePart.md
new file mode 100644
index 000000000..27062f5d1
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeMessagePart.md
@@ -0,0 +1,19 @@
+---
+id: RealtimeMessagePart
+title: RealtimeMessagePart
+---
+
+# Type Alias: RealtimeMessagePart
+
+```ts
+type RealtimeMessagePart = 
+  | RealtimeTextPart
+  | RealtimeAudioPart
+  | RealtimeToolCallPart
+  | RealtimeToolResultPart
+  | RealtimeImagePart;
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:149](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L149)
+
+Union of all realtime message parts
diff --git a/mintlify/ai/reference/type-aliases/RealtimeMode.md b/mintlify/ai/reference/type-aliases/RealtimeMode.md
new file mode 100644
index 000000000..4235cc6c7
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeMode.md
@@ -0,0 +1,14 @@
+---
+id: RealtimeMode
+title: RealtimeMode
+---
+
+# Type Alias: RealtimeMode
+
+```ts
+type RealtimeMode = "idle" | "listening" | "thinking" | "speaking";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:193](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L193)
+
+Current mode of the realtime session
diff --git a/mintlify/ai/reference/type-aliases/RealtimeStatus.md b/mintlify/ai/reference/type-aliases/RealtimeStatus.md
new file mode 100644
index 000000000..ba09488d7
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/RealtimeStatus.md
@@ -0,0 +1,14 @@
+---
+id: RealtimeStatus
+title: RealtimeStatus
+---
+
+# Type Alias: RealtimeStatus
+
+```ts
+type RealtimeStatus = "idle" | "connecting" | "connected" | "reconnecting" | "error";
+```
+
+Defined in: [packages/ai/src/realtime/types.ts:183](https://github.com/TanStack/ai/blob/main/packages/ai/src/realtime/types.ts#L183)
+
+Connection status of the realtime client
diff --git a/mintlify/ai/reference/type-aliases/SchemaInput.md b/mintlify/ai/reference/type-aliases/SchemaInput.md
new file mode 100644
index 000000000..61b584ecc
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/SchemaInput.md
@@ -0,0 +1,33 @@
+---
+id: SchemaInput
+title: SchemaInput
+---
+
+# Type Alias: SchemaInput
+
+```ts
+type SchemaInput = 
+  | StandardJSONSchemaV1<any, any>
+  | StandardSchemaV1<any, any>
+  | JSONSchema;
+```
+
+Defined in: [packages/ai/src/types.ts:130](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L130)
+
+Union type for schema input - can be any Standard Schema compliant validator,
+any Standard JSON Schema compliant schema, or a plain JSONSchema object.
+
+Standard JSON Schema compliant libraries (carry the JSON-schema converter):
+- Zod v4.2+ (natively supports StandardJSONSchemaV1)
+- ArkType v2.1.28+ (natively supports StandardJSONSchemaV1)
+- Valibot v1.2+ (via `toStandardJsonSchema()` from `@valibot/to-json-schema`)
+
+StandardSchemaV1 covers libraries whose published types only expose the
+validator surface — Zod's core `$ZodType['~standard']` is currently typed
+as `StandardSchemaV1.Props` even though the runtime attaches the
+`jsonSchema` converter, so this branch is what makes `InferSchemaType`
+recover the inferred type for callers using `z.ZodType<T>`.
+
+## See
+
+https://standardschema.dev/json-schema
diff --git a/mintlify/ai/reference/type-aliases/StreamChunk.md b/mintlify/ai/reference/type-aliases/StreamChunk.md
new file mode 100644
index 000000000..282225e83
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/StreamChunk.md
@@ -0,0 +1,15 @@
+---
+id: StreamChunk
+title: StreamChunk
+---
+
+# Type Alias: StreamChunk
+
+```ts
+type StreamChunk = AGUIEvent;
+```
+
+Defined in: [packages/ai/src/types.ts:1527](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1527)
+
+Chunk returned by the SDK during streaming chat completions.
+Uses the AG-UI protocol event format.
diff --git a/mintlify/ai/reference/type-aliases/StreamChunkType.md b/mintlify/ai/reference/type-aliases/StreamChunkType.md
new file mode 100644
index 000000000..f6265c1ef
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/StreamChunkType.md
@@ -0,0 +1,18 @@
+---
+id: StreamChunkType
+title: StreamChunkType
+---
+
+# ~~Type Alias: StreamChunkType~~
+
+```ts
+type StreamChunkType = AGUIEventType;
+```
+
+Defined in: [packages/ai/src/types.ts:1015](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1015)
+
+Stream chunk/event types (AG-UI protocol).
+
+## Deprecated
+
+Use `EventType` enum instead.
diff --git a/mintlify/ai/reference/type-aliases/StructuredOutputStream.md b/mintlify/ai/reference/type-aliases/StructuredOutputStream.md
new file mode 100644
index 000000000..1d7f19d18
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/StructuredOutputStream.md
@@ -0,0 +1,52 @@
+---
+id: StructuredOutputStream
+title: StructuredOutputStream
+---
+
+# Type Alias: StructuredOutputStream\&lt;T\>
+
+```ts
+type StructuredOutputStream<T> = AsyncIterable<
+  | Exclude<StreamChunk, CustomEvent>
+  | StructuredOutputStartEvent
+  | StructuredOutputCompleteEvent<T>
+  | ApprovalRequestedEvent
+| ToolInputAvailableEvent>;
+```
+
+Defined in: [packages/ai/src/types.ts:1414](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1414)
+
+Public type for streams returned by `chat({ outputSchema, stream: true })`.
+
+Yields all standard `StreamChunk` lifecycle events plus the three tagged
+`CUSTOM` events the orchestrator can emit through this path:
+- `structured-output.complete` — terminal event with typed `value.object: T`
+- `approval-requested` — server tool needs approval (pauses the run)
+- `tool-input-available` — client tool invocation (pauses the run)
+
+Each variant has a literal `name`, so a single discriminated narrow gives
+you a typed `value` with no helper or cast:
+
+```ts
+for await (const chunk of stream) {
+  if (chunk.type === 'CUSTOM' && chunk.name === 'structured-output.complete') {
+    chunk.value.object // typed as T
+  } else if (chunk.type === 'CUSTOM' && chunk.name === 'approval-requested') {
+    chunk.value.toolCallId // typed as string
+  }
+}
+```
+
+Caveat: tools can emit arbitrary user-defined custom events via the
+`emitCustomEvent(name, value)` context API. Those flow through this stream
+at runtime but are intentionally absent from this type — including a bare
+`CustomEvent` (whose `value: any` would poison the union) would collapse
+`chunk.value` back to `any` after the narrow. If you rely on
+`emitCustomEvent` plus `outputSchema + stream: true`, branch on `CUSTOM`
+outside the literal-`name` narrows or cast explicitly.
+
+## Type Parameters
+
+### T
+
+`T` = `unknown`
diff --git a/mintlify/ai/reference/type-aliases/SystemPrompt.md b/mintlify/ai/reference/type-aliases/SystemPrompt.md
new file mode 100644
index 000000000..5eb1f22a2
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/SystemPrompt.md
@@ -0,0 +1,64 @@
+---
+id: SystemPrompt
+title: SystemPrompt
+---
+
+# Type Alias: SystemPrompt\&lt;TMetadata\>
+
+```ts
+type SystemPrompt<TMetadata> = 
+  | string
+  | {
+  content: string;
+  metadata?: TMetadata;
+};
+```
+
+Defined in: [packages/ai/src/system-prompts.ts:39](https://github.com/TanStack/ai/blob/main/packages/ai/src/system-prompts.ts#L39)
+
+A single entry in `chat({ systemPrompts: [...] })`.
+
+Accepts a plain string (the common case) or a structured object that lets
+providers attach typed metadata to the prompt — e.g. Anthropic
+`cache_control` for prompt caching, future per-prompt safety overrides for
+Gemini, etc.
+
+At the chat call site, `metadata` is narrowed by the adapter via
+`~types['systemPromptMetadata']`. Providers that don't declare one inherit
+the default `never`, which makes the field carry no meaningful value: TS
+only accepts `undefined` there, and provider-foreign metadata that reaches
+an adapter via JS / `as any` is silently dropped, never written to the
+wire. For type-safe per-provider metadata, refer to the provider's
+`<Provider>SystemPromptMetadata` interface (e.g. `AnthropicSystemPromptMetadata`).
+
+## Type Parameters
+
+### TMetadata
+
+`TMetadata` = `unknown`
+
+## Examples
+
+```ts
+// The 90% case — plain strings work everywhere.
+  systemPrompts: ['Be concise.', 'Cite sources.']
+```
+
+```ts
+// Provider-specific metadata via the object form. No `satisfies` cast
+  // is needed — the adapter narrows the `metadata` field's type at the
+  // call site so users get autocomplete and structural checking
+  // automatically.
+  import { anthropicText } from '@tanstack/ai-anthropic'
+
+  chat({
+    adapter: anthropicText(),
+    systemPrompts: [
+      {
+        content: 'Stable instructions — cache me.',
+        metadata: { cache_control: { type: 'ephemeral' } },
+      },
+      'Volatile per-request instruction.',
+    ],
+  })
+```
diff --git a/mintlify/ai/reference/type-aliases/TextStreamOptionsForModel.md b/mintlify/ai/reference/type-aliases/TextStreamOptionsForModel.md
new file mode 100644
index 000000000..5eb88e4a5
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/TextStreamOptionsForModel.md
@@ -0,0 +1,12 @@
+---
+title: "TextStreamOptionsForModel"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/type-aliases/TextStreamOptionsForModel)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/type-aliases/TextStreamOptionsUnion.md b/mintlify/ai/reference/type-aliases/TextStreamOptionsUnion.md
new file mode 100644
index 000000000..bb9c49888
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/TextStreamOptionsUnion.md
@@ -0,0 +1,12 @@
+---
+title: "TextStreamOptionsUnion"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/type-aliases/TextStreamOptionsUnion)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/type-aliases/ToolCallState.md b/mintlify/ai/reference/type-aliases/ToolCallState.md
new file mode 100644
index 000000000..8491b029d
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ToolCallState.md
@@ -0,0 +1,21 @@
+---
+id: ToolCallState
+title: ToolCallState
+---
+
+# Type Alias: ToolCallState
+
+```ts
+type ToolCallState = 
+  | "awaiting-input"
+  | "input-streaming"
+  | "input-complete"
+  | "approval-requested"
+  | "approval-responded"
+  | "complete"
+  | "error";
+```
+
+Defined in: [packages/ai/src/types.ts:48](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L48)
+
+Tool call states - track the lifecycle of a tool call
diff --git a/mintlify/ai/reference/type-aliases/ToolExecuteFunction.md b/mintlify/ai/reference/type-aliases/ToolExecuteFunction.md
new file mode 100644
index 000000000..47fd715bd
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ToolExecuteFunction.md
@@ -0,0 +1,30 @@
+---
+id: ToolExecuteFunction
+title: ToolExecuteFunction
+---
+
+# Type Alias: ToolExecuteFunction\&lt;TInput, TOutput, TContext\>
+
+```ts
+type ToolExecuteFunction<TInput, TOutput, TContext> = undefined extends TContext ? (args, context?) => 
+  | Promise<InferSchemaType<TOutput>>
+  | InferSchemaType<TOutput> : (args, context) => 
+  | Promise<InferSchemaType<TOutput>>
+| InferSchemaType<TOutput>;
+```
+
+Defined in: [packages/ai/src/types.ts:562](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L562)
+
+## Type Parameters
+
+### TInput
+
+`TInput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TOutput
+
+`TOutput` *extends* [`SchemaInput`](/ai/reference/type-aliases/SchemaInput) = [`SchemaInput`](/ai/reference/type-aliases/SchemaInput)
+
+### TContext
+
+`TContext` = `unknown`
diff --git a/mintlify/ai/reference/type-aliases/ToolExecutionContext.md b/mintlify/ai/reference/type-aliases/ToolExecutionContext.md
new file mode 100644
index 000000000..c9f4f3a34
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ToolExecutionContext.md
@@ -0,0 +1,80 @@
+---
+id: ToolExecutionContext
+title: ToolExecutionContext
+---
+
+# Type Alias: ToolExecutionContext\&lt;TContext\>
+
+```ts
+type ToolExecutionContext<TContext> = RuntimeContextField<TContext> & object;
+```
+
+Defined in: [packages/ai/src/types.ts:531](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L531)
+
+Context passed to tool execute functions, providing capabilities like
+emitting custom events during execution.
+
+## Type Declaration
+
+### abortSignal?
+
+```ts
+optional abortSignal: AbortSignal;
+```
+
+Abort signal for the current chat run. Aborts when the run's
+`abortController` fires (or middleware aborts). Long-running tools —
+e.g. MCP `callTool` — should forward this to cancel in-flight work.
+
+### emitCustomEvent()
+
+```ts
+emitCustomEvent: (eventName, value) => void;
+```
+
+Emit a custom event during tool execution.
+Events are streamed to the client in real-time as AG-UI CUSTOM events.
+
+#### Parameters
+
+##### eventName
+
+`string`
+
+Name of the custom event
+
+##### value
+
+`Record`\&lt;`string`, `any`\>
+
+Event payload value
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const tool = toolDefinition({ ... }).server(async (args, context) => {
+  context?.emitCustomEvent('progress', { step: 1, total: 3 })
+  // ... do work ...
+  context?.emitCustomEvent('progress', { step: 2, total: 3 })
+  // ... do more work ...
+  return result
+})
+```
+
+### toolCallId?
+
+```ts
+optional toolCallId: string;
+```
+
+The ID of the tool call being executed
+
+## Type Parameters
+
+### TContext
+
+`TContext` = `unknown`
diff --git a/mintlify/ai/reference/type-aliases/ToolOutputState.md b/mintlify/ai/reference/type-aliases/ToolOutputState.md
new file mode 100644
index 000000000..acf8d8424
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ToolOutputState.md
@@ -0,0 +1,12 @@
+---
+id: ToolOutputState
+title: ToolOutputState
+---
+
+# Type Alias: ToolOutputState
+
+```ts
+type ToolOutputState = "output-available" | "output-error";
+```
+
+Defined in: [packages/ai/src/types.ts:65](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L65)
diff --git a/mintlify/ai/reference/type-aliases/ToolResultState.md b/mintlify/ai/reference/type-aliases/ToolResultState.md
new file mode 100644
index 000000000..9530b7a5a
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/ToolResultState.md
@@ -0,0 +1,14 @@
+---
+id: ToolResultState
+title: ToolResultState
+---
+
+# Type Alias: ToolResultState
+
+```ts
+type ToolResultState = "streaming" | "complete" | "error";
+```
+
+Defined in: [packages/ai/src/types.ts:60](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L60)
+
+Tool result states - track the lifecycle of a tool result
diff --git a/mintlify/ai/reference/type-aliases/UsageTotals.md b/mintlify/ai/reference/type-aliases/UsageTotals.md
new file mode 100644
index 000000000..12e88f9f3
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/UsageTotals.md
@@ -0,0 +1,18 @@
+---
+id: UsageTotals
+title: UsageTotals
+---
+
+# ~~Type Alias: UsageTotals~~
+
+```ts
+type UsageTotals = TokenUsage;
+```
+
+Defined in: [packages/ai/src/types.ts:1060](https://github.com/TanStack/ai/blob/main/packages/ai/src/types.ts#L1060)
+
+## Deprecated
+
+Renamed to TokenUsage. Kept as an alias for backward
+compatibility with `@tanstack/ai@0.23` and earlier; will be removed in a
+future release.
diff --git a/mintlify/ai/reference/type-aliases/WireMessage.md b/mintlify/ai/reference/type-aliases/WireMessage.md
new file mode 100644
index 000000000..9c7d3e239
--- /dev/null
+++ b/mintlify/ai/reference/type-aliases/WireMessage.md
@@ -0,0 +1,12 @@
+---
+id: WireMessage
+title: WireMessage
+---
+
+# Type Alias: WireMessage
+
+```ts
+type WireMessage = WireAnchorMessage | AGUIToolMessage | AGUIReasoningMessage;
+```
+
+Defined in: [packages/ai/src/utilities/ag-ui-wire.ts:33](https://github.com/TanStack/ai/blob/main/packages/ai/src/utilities/ag-ui-wire.ts#L33)
diff --git a/mintlify/ai/reference/variables/DISCOVERY_TOOL_NAME.md b/mintlify/ai/reference/variables/DISCOVERY_TOOL_NAME.md
new file mode 100644
index 000000000..b0371eea9
--- /dev/null
+++ b/mintlify/ai/reference/variables/DISCOVERY_TOOL_NAME.md
@@ -0,0 +1,18 @@
+---
+id: DISCOVERY_TOOL_NAME
+title: DISCOVERY_TOOL_NAME
+---
+
+# Variable: DISCOVERY\_TOOL\_NAME
+
+```ts
+const DISCOVERY_TOOL_NAME: "__lazy__tool__discovery__" = '__lazy__tool__discovery__';
+```
+
+Defined in: [packages/ai/src/activities/chat/tools/lazy-tool-manager.ts:12](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/tools/lazy-tool-manager.ts#L12)
+
+Name of the synthetic tool the LLM calls to discover lazy tools.
+
+Exported so callers building custom message-compaction / history-trimming
+logic can reference the discovery tool by constant instead of hard-coding
+the string (which is an internal contract that could change).
diff --git a/mintlify/ai/reference/variables/aiEventClient.md b/mintlify/ai/reference/variables/aiEventClient.md
new file mode 100644
index 000000000..2ba51a98e
--- /dev/null
+++ b/mintlify/ai/reference/variables/aiEventClient.md
@@ -0,0 +1,12 @@
+---
+title: "aiEventClient"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ai/latest/docs/reference/variables/aiEventClient)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ai/reference/variables/defaultJSONParser.md b/mintlify/ai/reference/variables/defaultJSONParser.md
new file mode 100644
index 000000000..802454221
--- /dev/null
+++ b/mintlify/ai/reference/variables/defaultJSONParser.md
@@ -0,0 +1,14 @@
+---
+id: defaultJSONParser
+title: defaultJSONParser
+---
+
+# Variable: defaultJSONParser
+
+```ts
+const defaultJSONParser: PartialJSONParser;
+```
+
+Defined in: [packages/ai/src/activities/chat/stream/json-parser.ts:49](https://github.com/TanStack/ai/blob/main/packages/ai/src/activities/chat/stream/json-parser.ts#L49)
+
+Default parser instance
diff --git a/mintlify/ai/sandbox/cloudflare.md b/mintlify/ai/sandbox/cloudflare.md
new file mode 100644
index 000000000..b4e171193
--- /dev/null
+++ b/mintlify/ai/sandbox/cloudflare.md
@@ -0,0 +1,208 @@
+---
+title: Cloudflare (Edge)
+id: cloudflare
+order: 11
+description: "Run a coding-agent harness and a live preview at the edge with @tanstack/ai-sandbox-cloudflare — Workers, Containers, and Durable Objects in one deploy."
+---
+
+You want your coding agent to run **at the edge** — UI, agent loop, and the
+sandbox container all in one Cloudflare Worker — and to hand users a **live
+preview URL** of whatever the agent builds. `@tanstack/ai-sandbox-cloudflare`
+provides the `cloudflareSandbox` provider plus a ready-made agent coordinator so
+you don't hand-roll the Worker ↔ container plumbing.
+
+This page covers the edge-specific concerns. For the provider-agnostic basics
+(workspace, tools, policy, lifecycle) start at the [Overview](/ai/sandbox/overview).
+
+## Two execution models
+
+Where the harness loop and its [tool bridge](/ai/sandbox/tools) run is a deployment
+choice. The Cloudflare layer supports two shapes.
+
+### DO-drives-container (default)
+
+The orchestrator (a Durable Object) runs `chat()` and the tool-bridge; the
+container only runs the agent CLI. The bridge is served from the orchestrator's
+own `fetch` handler — no raw TCP listener — and the agent reaches it across the
+container → orchestrator boundary, so the **whole MCP protocol** crosses that
+boundary. The `examples/sandbox-cloudflare` TanStack Start app demonstrates this:
+UI, agent, Durable Objects, and the container in one Worker.
+
+### Co-located (in-container)
+
+The harness loop **and** the tool-bridge run inside the container — the
+in-container sandbox is just `localProcessSandbox()`, with native stdin and a
+localhost `node:http` bridge. The only thing that still crosses back to the
+orchestrator is host **tool execution**: a `chat()` tool's `execute()` closure
+(your DB, secrets, app state) lives on the orchestrator, not in the container.
+The public surface shrinks from the whole MCP protocol to a single authenticated
+tool-exec call.
+
+Enable it with `createCloudflareSandboxAgent({ mode: 'colocated' })` plus a
+`runInContainerHarness` container program from
+`@tanstack/ai-sandbox-cloudflare/runner`. The seam is four exports from
+`@tanstack/ai-sandbox`: the orchestrator serializes its tools with
+`toolDescriptors(tools)` and ships the descriptors in; the container rebuilds
+them with `remoteToolStubs(descriptors, executor)`, where each stub's `execute()`
+delegates to a `RemoteToolExecutor` (`httpRemoteToolExecutor(url, token)` POSTs
+`{ name, args }` back); the orchestrator answers that one call with
+`executeHostTool(tools, name, args)`.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import {
+  defineSandbox,
+  defineWorkspace,
+  httpRemoteToolExecutor,
+  remoteToolStubs,
+  withSandbox,
+} from '@tanstack/ai-sandbox'
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+import { request } from './run-request'
+
+// Inside the container: the orchestrator POSTed `{ messages, toolDescriptors,
+// toolExecUrl, toolExecToken }`. Rebuild its tools as stubs whose execute()
+// POSTs back; the adapter bridges them over the in-container localhost MCP
+// transport, and only that one tool-exec call leaves the container.
+chat({
+  threadId: request.threadId,
+  adapter: grokBuildText('grok-build'),
+  messages: request.messages,
+  tools: remoteToolStubs(
+    request.toolDescriptors,
+    httpRemoteToolExecutor(request.toolExecUrl, request.toolExecToken),
+  ),
+  // The in-container sandbox is just local-process (native stdin + a localhost
+  // node:http bridge).
+  middleware: [
+    withSandbox(
+      defineSandbox({
+        id: 'in-container',
+        provider: localProcessSandbox(),
+        workspace: defineWorkspace({ source: { type: 'none' } }),
+      }),
+    ),
+  ],
+})
+```
+
+## Callback hosts: bridge vs preview
+
+In both models the container is **off-isolate compute** — it can't use a service
+binding or an in-process call to reach the Worker, only the network. So the
+container's callback URLs need real hosts. There are **two distinct surfaces**
+with different reachers and therefore different correct values, resolved by
+`resolveBridgeOrigin` and `resolvePreviewHost` (both from
+`@tanstack/ai-sandbox-cloudflare/agent`).
+
+- **Bridge / tool-exec** (container → Worker: `/_bridge`, `/tool-exec`). Just
+  needs to *reach* the Worker. `PUBLIC_HOSTNAME` is optional — when unset, the
+  host is derived from the `POST /runs` trigger request, so a `*.workers.dev`
+  deploy works with **zero config**, and **local dev uses
+  `host.docker.internal`** (the Docker host gateway, over `http`) — no tunnel.
+
+  > Request-derivation is safe **on Cloudflare**, where it would be unsafe on a
+  > generic Node server: the edge dispatches a request to your Worker only when
+  > its hostname matches a route you own, so the request `Host` is always one of
+  > your own hostnames — never attacker-chosen — and the per-run bearer token
+  > that rides the URL can't be steered off-domain. On plain Node the `Host`
+  > header is attacker-controlled, which is why request-derivation there would be
+  > a token-exfil / SSRF vector. (See [Tools](/ai/sandbox/tools) for the non-edge bridge.)
+
+- **Preview** (browser → Worker → container: `exposePort`). Needs **wildcard
+  DNS**, so `PREVIEW_HOSTNAME` is a *separate* knob. **Local** uses `*.localhost`
+  (browsers resolve it to loopback with zero setup — previews work locally with
+  no tunnel). **Deployed** needs a **custom domain** with a `*.<domain>` route:
+  `*.workers.dev` has no wildcard subdomains, so the SDK's `exposePort` rejects
+  it and `resolvePreviewHost` throws a clear error pointing at `PREVIEW_HOSTNAME`
+  instead of failing deep in a run.
+
+## Exposing a live preview
+
+The package ships the browser-preview wiring so you don't hand-roll it — both
+exported from `@tanstack/ai-sandbox-cloudflare/agent`:
+
+- **`exposePreviewTool(input, env)`** — a ready-made `chat()` server tool (the
+  agent sees it as `exposePreview`). It addresses the run's container by
+  `threadId` and opens a **Cloudflare quick tunnel** to the dev server's port
+  (`sandbox.tunnels.get(port)`), returning a
+  `https://<name>.trycloudflare.com` URL.
+- **`PREVIEW_GUIDANCE`** — a system prompt that tells the agent how to start a
+  dev server whose tunnel preview works. App-agnostic on purpose.
+
+The factory is **harness-agnostic about auth**: it binds no API key of its own.
+Your app declares the key its harness needs (`XAI_API_KEY` for Grok Build,
+`ANTHROPIC_API_KEY` for Claude Code, `CODEX_API_KEY` for Codex, …) on its own env
+type and supplies it as a [workspace secret](/ai/sandbox/provisioning) — the coordinator
+injects each declared secret into the sandbox env by name.
+
+```ts
+import {
+  PREVIEW_GUIDANCE,
+  createCloudflareSandboxAgent,
+  exposePreviewTool,
+  resolvePreviewHost,
+} from '@tanstack/ai-sandbox-cloudflare/agent'
+import { cloudflareSandbox } from '@tanstack/ai-sandbox-cloudflare'
+import { createSecrets, defineSandbox, defineWorkspace } from '@tanstack/ai-sandbox'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import type { SandboxAgentEnv } from '@tanstack/ai-sandbox-cloudflare/agent'
+
+// Extend the package's harness-agnostic env with the key YOUR harness needs.
+interface AppEnv extends SandboxAgentEnv {
+  XAI_API_KEY: string
+}
+
+export const agent = createCloudflareSandboxAgent<AppEnv>({
+  adapter: () => grokBuildText('grok-build'),
+  systemPrompts: [PREVIEW_GUIDANCE],
+  tools: (input, env) => [exposePreviewTool(input, env)],
+  // Supply the harness's auth here — the package binds no key. The `sandbox`
+  // resolver receives the Worker `env` per run, so the secret VALUE is read from
+  // it. A different harness declares its own, e.g. `ANTHROPIC_API_KEY` for Claude
+  // Code or `CODEX_API_KEY` for Codex.
+  sandbox: (input, env) =>
+    defineSandbox({
+      id: 'cf-edge-agent',
+      provider: cloudflareSandbox({
+        binding: env.Sandbox,
+        previewHostname: resolvePreviewHost(env, input),
+      }),
+      workspace: defineWorkspace({
+        source: { type: 'none' },
+        secrets: createSecrets({ XAI_API_KEY: env.XAI_API_KEY }),
+      }),
+      lifecycle: { reuse: 'thread' },
+    }),
+})
+```
+
+> The runnable example lives at
+> [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare):
+> one app that runs Claude Code, Codex, or Grok Build — pick the harness in the
+> UI (or via the `HARNESS` var). Same edge topology, different adapter + key.
+
+### Why a quick tunnel, not `exposePort`
+
+`exposePort` + `proxyToSandbox` routes the preview through the Worker's own
+origin. In local dev that origin is your Vite dev server, and Vite's middleware
+then serves the preview's module/asset requests (`/@vite/client`, `/src/*`,
+`/@fs/*`) from your **host** instead of the container — the page loads the wrong
+code and breaks.
+
+A quick tunnel is served by `cloudflared` **inside** the sandbox (`cloudflared`
+ships in the `cloudflare/sandbox` base image), so it bypasses the Vite port
+entirely, needs **no custom domain** on a deploy, and forwards WebSockets — so
+the app's HMR works. The one requirement, which `PREVIEW_GUIDANCE` instructs, is
+that the dev server **accept the tunnel hostname** (servers reject unknown
+hosts): Vite `server: { host: true, allowedHosts: true }`, webpack-dev-server
+`allowedHosts: 'all'`. (`exposePort` + `resolvePreviewHost` remain available for
+apps that want the Worker to front the request on a custom domain.)
+
+> **Transport:** `sandbox.tunnels` exists only on the SDK's **RPC** transport —
+> on the default `http` it throws *"requires the RPC transport"*. So
+> `cloudflareSandbox` defaults to `transport: 'rpc'` (and the example also sets
+> `SANDBOX_TRANSPORT=rpc` for the Sandbox DO). The transport must match on every
+> `getSandbox()` for an id, so a custom provider must pass `{ transport: 'rpc' }`
+> too. Override to `'http'` only if you don't use tunnel previews.
diff --git a/mintlify/ai/sandbox/events.md b/mintlify/ai/sandbox/events.md
new file mode 100644
index 000000000..0dcff9186
--- /dev/null
+++ b/mintlify/ai/sandbox/events.md
@@ -0,0 +1,150 @@
+---
+title: Events
+id: events
+order: 9
+description: "Everything a harness agent does inside a sandbox — text, tool calls, reasoning, session ids, and file edits — streams back as AG-UI chunks plus namespaced CUSTOM events."
+---
+
+When a harness adapter runs inside a [sandbox](/ai/sandbox/overview), everything it does is
+observable on the `chat()` stream: the same AG-UI `StreamChunk`s any `chat()` run
+produces, plus namespaced `CUSTOM` events for sandbox- and harness-specifics.
+
+This page is about the **stream the client reads**. To run server-side callbacks
+on file changes, or to log sandbox internals, see [Observability](/ai/sandbox/observability).
+
+## The stream
+
+A harness run produces standard AG-UI `StreamChunk`s:
+
+- **Text** — incremental assistant output.
+- **Tool calls** — including bridged [tools](/ai/sandbox/tools), which surface as ordinary
+  tool-call chunks the moment the in-sandbox agent invokes them.
+- **Reasoning** — the agent's thinking, where the harness exposes it.
+- **Run lifecycle** — run started / finished and related boundaries.
+
+## Custom events
+
+On top of the standard chunks, the sandbox and harness layers emit `CUSTOM`
+events (`chunk.type === 'CUSTOM'`), each with a `name` and a `value`:
+
+| Event `name` | Emitted by | When | `value` |
+| --- | --- | --- | --- |
+| `grok-build.session-id` | Grok Build adapter | once, when the in-sandbox session is created or resumed | the resumable harness session id |
+| `claude-code.session-id` | Claude Code adapter | once, when the in-sandbox session is created or resumed | the resumable harness session id |
+| `codex.session-id` | Codex adapter | once, when the session is created or resumed | the resumable harness session id |
+| `opencode.session-id` | OpenCode adapter | once, when the session is created or resumed | the resumable harness session id |
+| `file.changed` | harness adapter (e.g. Grok Build, Claude Code) | after the run completes | `{ path: string; diff: string }` — the whole working-tree `git diff` (`path` is always `'.'`, the tree root) |
+| `sandbox.file` | the engine, automatically | per file create / change / delete while a sandbox is active | `{ type: 'create' \| 'change' \| 'delete'; path: string; timestamp: number }` |
+| `sandbox.file.diff` | the engine, opt-in via `fileEvents: { diff: true }` | per file create / change / delete, after the matching `sandbox.file` | `{ path: string; diff: string }` — a unified patch of that one file vs the session's git baseline |
+
+The `*.session-id` event lets you resume a harness session on a follow-up run
+(pass it back via the adapter's `modelOptions.sessionId`). `sandbox.file` is
+emitted automatically whenever a sandbox is active and file watching is on —
+no hooks required. `sandbox.file.diff` is off by default (computing a diff on
+every change has a cost); turn it on with `fileEvents: { diff: true }` on
+`defineSandbox` when the client needs to render the change itself, not just
+know it happened:
+
+```ts
+import { defineSandbox } from "@tanstack/ai-sandbox";
+import { dockerSandbox } from "@tanstack/ai-sandbox-docker";
+
+const repoSandbox = defineSandbox({
+  id: "repo-agent",
+  provider: dockerSandbox({ image: "node:22" }),
+  fileEvents: { diff: true }, // also emit sandbox.file.diff per change
+});
+```
+
+See [Observability](/ai/sandbox/observability) to also handle file changes server-side
+via hooks (which get the same diff, plus `before()`/`after()`), or to turn
+the watcher off entirely.
+
+> **Bridged tools emit their own events too.** A `chat()` tool that runs through
+> the [tool bridge](/ai/sandbox/tools) can stream `CUSTOM` events back mid-execution. Code
+> mode, for example, emits `code_mode:execution_started` and `code_mode:console`
+> (plus `code_mode:external_call` / `…_result` / `…_error`) so you can show its
+> progress live. Read them with the same pattern below.
+
+## Reading CUSTOM events on the client
+
+Every `CUSTOM` event TanStack AI itself emits — `sandbox.file`,
+`sandbox.file.diff`, `file.changed`, the `*.session-id` events, and more — has
+a fixed `name` and a concrete `value` shape, unified as `KnownCustomEvent`.
+`chat()`'s return type narrows accordingly: check `chunk.type === 'CUSTOM'`
+and then compare `chunk.name` to a literal string. No helper, no cast — the
+plain `if` types `chunk.value` for you:
+
+```ts
+import { stream } from "./my-run";
+
+for await (const chunk of stream) {
+  if (chunk.type === "CUSTOM" && chunk.name === "sandbox.file") {
+    console.log(chunk.value.type, chunk.value.path); // typed, no cast
+  } else if (chunk.type === "CUSTOM" && chunk.name === "sandbox.file.diff") {
+    console.log(chunk.value.path, chunk.value.diff); // typed, no cast
+  } else if (chunk.type === "CUSTOM" && chunk.name === "file.changed") {
+    console.log(chunk.value.diff); // typed, no cast
+  }
+}
+```
+
+### Session-id events aren't one literal name
+
+`*.session-id` is emitted per-adapter (`claude-code.session-id`,
+`codex.session-id`, `grok-build.session-id`, `opencode.session-id`), so its
+type is the template-literal name `` `${string}.session-id` ``, not a single
+string. If you know which adapter you're running, compare the exact literal
+— it narrows `chunk.value` the same as any other event:
+
+```ts
+import { resumeSession } from "./session";
+import { stream } from "./my-run";
+
+for await (const chunk of stream) {
+  if (chunk.type === "CUSTOM" && chunk.name === "claude-code.session-id") {
+    resumeSession(chunk.value.sessionId); // typed as string, no cast
+  }
+}
+```
+
+> **`chunk.name.endsWith('.session-id')` does *not* narrow.** It's a plain
+> boolean expression, not something TypeScript can attach to a type — so
+> `chunk.value` stays whatever it was before the check (effectively
+> `unknown`), even though the check happens to be correct at runtime. If you
+> need to handle *any* adapter's session id without listing every adapter's
+> literal name, write a small type predicate instead:
+>
+> ```ts
+> import type &#123; KnownCustomEvent, SessionIdEvent &#125; from "@tanstack/ai";
+> import &#123; resumeSession &#125; from "./session";
+> import &#123; stream &#125; from "./my-run";
+>
+> function isSessionIdEvent(
+>   chunk: KnownCustomEvent,
+> ): chunk is SessionIdEvent &#123;
+>   return chunk.name.endsWith(".session-id");
+> &#125;
+>
+> for await (const chunk of stream) &#123;
+>   if (chunk.type === "CUSTOM" && isSessionIdEvent(chunk)) &#123;
+>     resumeSession(chunk.value.sessionId); // typed as string, no cast
+>   &#125;
+> &#125;
+> ```
+>
+> This predicate is something you write yourself when you need it — TanStack
+> AI doesn't ship a guard API. Plain literal-`name` narrowing (as above) is
+> the primary, no-helper pattern; reach for a predicate only for this
+> "any adapter" case.
+
+See [Custom Events Reference](/ai/protocol/custom-events) for the full typed
+event taxonomy, the `ChatStream` type this narrowing relies on, and the
+tradeoff for your own `emitCustomEvent` calls.
+
+## Related
+
+- [Observability](/ai/sandbox/observability) — server-side file-event hooks (with `before()`/`after()`/`diff()`), debug logging, and the low-level watcher.
+- [Custom Events Reference](/ai/protocol/custom-events) — the full `KnownCustomEvent` taxonomy and the `ChatStream` type.
+- [Tools](/ai/sandbox/tools) — bridged host tools that surface as tool-call (and CUSTOM) chunks.
+- [Quick Start](/ai/sandbox/quick-start) — read the `file.changed` diff end to end.
diff --git a/mintlify/ai/sandbox/harnesses.md b/mintlify/ai/sandbox/harnesses.md
new file mode 100644
index 000000000..649e00acd
--- /dev/null
+++ b/mintlify/ai/sandbox/harnesses.md
@@ -0,0 +1,72 @@
+---
+title: Harnesses
+id: sandbox-harnesses
+description: "Pick which coding agent runs inside a TanStack AI sandbox — Grok Build, Claude Code, Codex, OpenCode, or any ACP-compliant agent via acpCompatible."
+---
+
+A **harness adapter** is the second axis of a sandboxed run: it decides _which
+coding agent runs_ and translates that agent's work back into `chat()` stream
+chunks. The [provider](/ai/sandbox/providers) decides _where_ the agent runs; the harness
+decides _what_ runs. Both sit behind the same `chat()` + `withSandbox()` wiring,
+so you can swap a harness without touching your provider or [workspace](/ai/sandbox/workspace).
+
+Every harness adapter declares `requires: [SandboxCapability]`, so `chat()` fails
+fast at the call site unless a sandbox is provided via `withSandbox(...)`.
+
+## Built-in harness adapters
+
+Each agent has its own package with curated per-model metadata. Pass the adapter
+to `chat({ adapter })` and run it under any provider.
+
+| Harness | Package | Adapter | Auth env |
+| --- | --- | --- | --- |
+| [Grok Build](/ai/adapters/grok-build) | `@tanstack/ai-grok-build` | `grokBuildText` | `XAI_API_KEY` (or grok.com login on local-process) |
+| [Claude Code](/ai/adapters/claude-code) | `@tanstack/ai-claude-code` | `claudeCodeText` | `ANTHROPIC_API_KEY` (or `claude login`) |
+| [Codex](/ai/adapters/codex) | `@tanstack/ai-codex` | `codexText` | `CODEX_API_KEY` (or `OPENAI_API_KEY`) |
+| [OpenCode](/ai/adapters/opencode) | `@tanstack/ai-opencode` | `opencodeText` | `OPENAI_API_KEY` (model-dependent) |
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { sandbox } from './sandbox'
+import { messages } from './chat-context'
+
+const stream = chat({
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+## Any ACP agent (`acpCompatible`)
+
+Many coding agents speak the [Agent Client Protocol](https://agentclientprotocol.com)
+(ACP) — `pi`, `gemini --acp`, and [dozens of others](https://agentclientprotocol.com/get-started/agents).
+For any of them that doesn't have a dedicated package, `acpCompatible` (from
+`@tanstack/ai-acp`) builds a harness adapter on the spot — the harness equivalent
+of `openaiCompatible`. Configure how to launch it once, then run it under any
+provider like the built-in adapters:
+
+```ts
+import { acpCompatible } from '@tanstack/ai-acp'
+
+const pi = acpCompatible({
+  name: 'pi',
+  models: ['pi-fast', 'pi-pro'],
+  command: ({ model, harnessCwd }) => `pi --acp -m ${model} --cwd ${harnessCwd}`,
+  authMethodId: 'pi-api-key',
+})
+```
+
+See the [ACP-Compatible Harness](/ai/adapters/acp-compatible) guide for the full
+config (typed models, per-call `modelOptions`, WebSocket transports, permissions,
+and protocol coverage). For which agents you can plug in, browse the official
+**[ACP agents list](https://agentclientprotocol.com/get-started/agents)** and the
+**[ACP registry](https://agentclientprotocol.com/get-started/registry)**.
+
+## Where to go next
+
+- **[Providers](/ai/sandbox/providers)** — where the harness runs (local, Docker, Daytona, Vercel, Sprites).
+- **[Tools](/ai/sandbox/tools)** — bridge your app's own tools into the in-sandbox agent.
+- **[Events & File Hooks](/ai/sandbox/events)** — stream the agent's edits and activity to a UI.
diff --git a/mintlify/ai/sandbox/lifecycle.md b/mintlify/ai/sandbox/lifecycle.md
new file mode 100644
index 000000000..db40dcd8e
--- /dev/null
+++ b/mintlify/ai/sandbox/lifecycle.md
@@ -0,0 +1,117 @@
+---
+title: Lifecycle & Snapshots
+id: lifecycle
+order: 8
+description: "Control sandbox reuse, snapshot the bootstrapped workspace after setup, and resume across runs to cut cold-start cost."
+---
+
+Bootstrapping a sandbox — cloning the repo, installing dependencies, running
+`setup` — is the expensive part of a run. The lifecycle config lets you pay that
+cost once and reuse the result: keep one sandbox per thread, snapshot it after
+setup, and resume instead of re-bootstrapping on the next run.
+
+```ts
+import { defineSandbox, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const sandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['corepack enable', 'pnpm install'],
+  }),
+  lifecycle: {
+    reuse: 'thread',          // one sandbox per threadId ('none' = fresh per run)
+    snapshot: 'after-setup',  // snapshot once bootstrapped (provider-permitting)
+    keepAlive: '30m',         // hint to keep the sandbox warm between runs
+    destroyOnComplete: false, // keep it for the next run
+  },
+})
+```
+
+## The lifecycle object
+
+| Field               | What it controls                                                                            |
+| ------------------- | ------------------------------------------------------------------------------------------- |
+| `reuse`             | `'thread'` keeps one sandbox per `threadId`; `'none'` provisions a fresh sandbox per run.    |
+| `snapshot`          | `'after-setup'` snapshots the workspace once bootstrap finishes, on snapshot-capable providers. |
+| `keepAlive`         | Duration hint (e.g. `'30m'`) to keep the sandbox warm between runs instead of tearing it down. |
+| `destroyOnComplete` | When `false`, the sandbox survives the run so the next one can resume it.                    |
+| `snapshotMaxAge`    | Duration (e.g. `'24h'`) after which a stored snapshot is treated as stale and re-created.   |
+
+## Snapshot after setup
+
+When the provider supports snapshots (e.g. [Docker](/ai/sandbox/providers)), bootstrap
+automatically takes a snapshot after `setup` completes. The snapshot caches the
+fully bootstrapped [workspace](/ai/sandbox/workspace) — the cloned repo with dependencies
+installed — so subsequent runs resume from it instead of re-running the setup
+steps, which dramatically reduces cold-start time.
+
+`snapshot: 'after-setup'` is the default whenever the provider reports snapshot
+support, so you usually do not set it explicitly. Providers without snapshot
+support (e.g. `localProcessSandbox`) skip the snapshot step silently.
+
+```ts
+import { defineSandbox, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const sandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['corepack enable', 'pnpm install'],
+  }),
+  lifecycle: {
+    reuse: 'thread',
+    // 'after-setup' is the default when the provider supports snapshots.
+    snapshot: 'after-setup',
+    // Optional: re-create (re-bootstrap) when the snapshot is older than this.
+    snapshotMaxAge: '24h',
+  },
+})
+```
+
+### Stale snapshots
+
+`snapshotMaxAge` accepts a duration string (`'24h'`, `'30m'`, etc.). When the
+stored snapshot is older than the limit, the sandbox treats it as stale and
+re-creates from scratch — re-running setup and capturing a new snapshot. Leave
+it unset to keep snapshots indefinitely.
+
+## The sandbox instance key
+
+A sandbox is keyed by a compound `sandboxInstanceKey`:
+
+```txt
+sandboxInstanceKey = hash(threadId + sandbox.id + provider + workspaceHash + tenant?)
+```
+
+Because the key folds in the workspace hash, the provider, and an optional
+tenant, changing any input that would invalidate a cached environment — the
+repo, the `setup` steps, the provider image, or the tenant — produces a
+different key. That means you safely start a **fresh** sandbox rather than
+resuming a stale one whose snapshot no longer matches your config. Keep those
+inputs stable across runs to keep hitting the same warm sandbox.
+
+## Ensure order
+
+When a run needs a sandbox, the layer resolves it in this order:
+
+1. **Resume the running sandbox** — if a live sandbox already exists for the key.
+2. **Restore the latest snapshot** — recreate from the most recent snapshot,
+   skipping setup.
+3. **Create fresh and bootstrap** — clone, install, run `setup`, then snapshot.
+
+Each step falls through to the next only when the prior one is unavailable. This
+is what turns a warm thread into a near-instant start, and a cold one into a
+full bootstrap.
+
+> Which providers support durable disk, snapshots, and resume-by-id is listed on
+> [Providers](/ai/sandbox/providers).
+
+Providers without durable disk or snapshots (e.g. ephemeral containers)
+re-create and re-bootstrap under the same identity: the `sandboxInstanceKey`
+stays stable, but every run pays the bootstrap cost because there is nothing
+durable to resume.
diff --git a/mintlify/ai/sandbox/observability.md b/mintlify/ai/sandbox/observability.md
new file mode 100644
index 000000000..be3d7cc2a
--- /dev/null
+++ b/mintlify/ai/sandbox/observability.md
@@ -0,0 +1,211 @@
+---
+title: Observability
+id: observability
+order: 10
+description: "Run server-side hooks on every file the agent touches, log sandbox internals, and watch a workspace outside a chat() run."
+---
+
+The [events stream](/ai/sandbox/events) is what a *client* reads. This page is the
+*server-side* half: hooks that fire on every file the agent touches, sandbox
+debug logging, and the low-level watcher you can drive outside a `chat()` run.
+
+## File-event hooks
+
+Listen to files being created, changed, or deleted inside a sandbox — for
+example to watch what the agent edits as it works. The watcher is
+provider-agnostic: it uses native OS watching where the provider supports it
+(local-process) and falls back to a portable `find` poll everywhere else (Docker
+and other exec-only providers), with no extra dependencies or image changes.
+
+There are two places to declare these hooks, with different scopes.
+
+### Sandbox-scoped hooks
+
+Declared directly on `defineSandbox({ hooks })`. They fire **once per file
+event**, regardless of how many runs share the sandbox, alongside the sandbox's
+own lifecycle callbacks:
+
+```ts
+import { defineSandbox } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const repoSandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  hooks: {
+    // catch-all: fires for every event
+    onFile: (e) => console.log(`[${e.type}] ${e.path}`),
+    // type-specific variants
+    onFileCreate: (e) => console.log('created', e.path),
+    onFileChange: (e) => console.log('changed', e.path),
+    onFileDelete: (e) => console.log('deleted', e.path),
+    // lifecycle
+    onReady: (handle) => console.log('sandbox ready', handle.id),
+    onError: (err) => console.error('sandbox error', err),
+    onDestroy: () => console.log('sandbox destroyed'),
+  },
+})
+```
+
+### Run-scoped hooks
+
+To handle file events inside a middleware (for example per-request audit
+logging), use the `sandbox` hook group on `defineChatMiddleware`. These fire
+**per-run**, and each handler receives the current run's `ChatMiddlewareContext`:
+
+```ts
+import { defineChatMiddleware } from '@tanstack/ai'
+import { db } from './db'
+
+const auditMiddleware = defineChatMiddleware({
+  name: 'audit',
+  // ctx is the ChatMiddlewareContext for the current run
+  sandbox: {
+    onFile: (ctx, e) => console.log(ctx.runId, e.type, e.path),
+    onFileCreate: (ctx, e) => db.log({ run: ctx.runId, event: e }),
+  },
+})
+```
+
+Both hook groups fire **server-side** and are independent of the stream: the
+engine automatically emits one `CUSTOM` [`sandbox.file`](/ai/sandbox/events#custom-events)
+event per change regardless of whether you register any hooks — so the client
+can react to the same edits without extra middleware.
+
+## Reading content and diffs in hooks
+
+The event every hook receives isn't just `{ type, path, timestamp }` — it also
+carries lazy, git-backed accessors for the file's content:
+
+```ts
+interface SandboxFileHookEvent {
+  type: "create" | "change" | "delete";
+  path: string;
+  timestamp: number;
+  before(): Promise<string>; // content at the session baseline ('' if new / non-git)
+  after(): Promise<string>; // current content ('' if deleted)
+  diff(): Promise<string>; // unified patch vs the baseline
+}
+```
+
+Reach for `diff()` to show what the agent changed — no need to hand-roll a
+`git diff` yourself:
+
+```ts
+import { defineSandbox } from "@tanstack/ai-sandbox";
+import { dockerSandbox } from "@tanstack/ai-sandbox-docker";
+
+const repoSandbox = defineSandbox({
+  id: "repo-agent",
+  provider: dockerSandbox({ image: "node:22" }),
+  hooks: {
+    onFileChange: async (e) => {
+      const patch = await e.diff();
+      console.log(`${e.path} changed:\n${patch}`);
+    },
+  },
+});
+```
+
+The same accessors are available on run-scoped hooks, where `e` is the
+second argument:
+
+```ts
+import { defineChatMiddleware } from "@tanstack/ai";
+import { db } from "./db";
+
+const auditMiddleware = defineChatMiddleware({
+  name: "audit",
+  sandbox: {
+    onFileChange: async (ctx, e) => {
+      const [before, after] = await Promise.all([e.before(), e.after()]);
+      db.log({ run: ctx.runId, path: e.path, before, after });
+    },
+  },
+});
+```
+
+**Lazy — path-only hooks pay nothing.** `before()`, `after()`, and `diff()`
+are methods, not fields: each one only reads the file or shells out to `git`
+when you call it. A hook that only reads `e.path` / `e.type` (like the
+catch-all logger in [Sandbox-scoped hooks](#sandbox-scoped-hooks) above)
+never touches the filesystem or spawns a process.
+
+**Git session baseline.** At `onReady`, the sandbox snapshots
+`git rev-parse HEAD` once, as the session's baseline commit (empty if the
+workspace isn't a git repo, or has no commits yet). Every `before()` and
+`diff()` call for the rest of the session diffs against that same fixed
+baseline, so `onFileChange` always reports the file's **cumulative** change
+since the run started — not just the delta since the watcher's last poll.
+`after()` always reads the file's current on-disk content, independent of
+the baseline. None of the three accessors throw: a deleted file resolves
+`after()` to `''` (it still has `before()`); a new file resolves `before()`
+to `''` (it still has `after()`); a non-git workspace resolves **both**
+`before()` and `after()` to `''` and makes `diff()` fall back to a
+synthesized add-patch built from `after()` — except for a `delete` event in
+a non-git workspace, where there's nothing to synthesize and `diff()`
+resolves to `''`.
+
+## Disabling file watching
+
+To stop the watcher and suppress `sandbox.file` events for a sandbox entirely,
+set `fileEvents: false`:
+
+```ts
+import { defineSandbox } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const sandbox = defineSandbox({
+  id: 'quiet-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  fileEvents: false, // watcher not started; no sandbox.file events emitted
+})
+```
+
+## Debugging
+
+To log sandbox internals — watcher start/stop, event dispatch, lifecycle
+transitions — pass the `sandbox` debug category to `chat()`:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { repoSandbox } from './sandbox'
+import { messages } from './chat-context'
+
+chat({
+  threadId: 'thread-1',
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(repoSandbox)],
+  debug: { sandbox: true }, // or `debug: true` for all categories
+})
+```
+
+## Low-level: `watchWorkspace()`
+
+`watchWorkspace()` is the building block the hooks are built on. Reach for it
+when you want the watcher **outside** a `chat()` run:
+
+```ts
+import { watchWorkspace } from '@tanstack/ai-sandbox'
+import { repoSandbox } from './sandbox'
+
+const handle = await repoSandbox.ensure({ threadId: 'thread-1', runId: 'run-1' })
+const watcher = await watchWorkspace(handle, {
+  onEvent: (event) => {
+    // event.type is 'create' | 'change' | 'delete'
+    console.log(`${event.type} ${event.path}`)
+  },
+  ignore: ['.git', 'node_modules'], // default
+})
+// …do work outside a chat run…
+await watcher.stop()
+```
+
+## Related
+
+- [Events](/ai/sandbox/events) — the `CUSTOM` event stream the client reads.
+- [Lifecycle & Snapshots](/ai/sandbox/lifecycle) — when sandboxes are created and torn down.
+- [Tools](/ai/sandbox/tools) — bridged host tools that surface as tool-call chunks.
diff --git a/mintlify/ai/sandbox/overview.md b/mintlify/ai/sandbox/overview.md
new file mode 100644
index 000000000..a46237d13
--- /dev/null
+++ b/mintlify/ai/sandbox/overview.md
@@ -0,0 +1,139 @@
+---
+id: overview
+order: 1
+title: Sandboxes Overview
+description: "Run coding-agent CLIs (Grok Build, Claude Code, Codex, OpenCode) inside an isolated sandbox with a real filesystem and a cloned repo, and stream their work back through chat()."
+---
+
+A **sandbox** gives a coding agent a real computer to work in: a filesystem, a
+shell, processes, and a cloned repository. You point a **harness adapter** (a
+coding-agent CLI like Grok Build) at it through `chat()`, and the agent's work —
+edits, commands, tool calls — streams back to you like any other chat run.
+
+The same code runs on your laptop, in CI, in a Docker container, or on the edge.
+Only the **provider** changes.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import {
+  createSecrets,
+  defineSandbox,
+  defineWorkspace,
+  githubRepo,
+  withSandbox,
+} from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { messages, threadId } from './chat-context'
+
+const repoSandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'TanStack/ai' }),
+    packageManager: 'pnpm',
+    setup: ['corepack enable', 'pnpm install'],
+    scripts: { test: 'pnpm test', typecheck: 'pnpm test:types' },
+    secrets: createSecrets({
+      XAI_API_KEY: process.env.XAI_API_KEY ?? '',
+    }),
+  }),
+  lifecycle: { reuse: 'thread', snapshot: 'after-setup', keepAlive: '30m' },
+})
+
+chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(repoSandbox)],
+})
+```
+
+## The three moving parts
+
+A sandboxed run is the composition of three independent pieces. You can change
+any one without touching the others.
+
+| Part | What it is | You pick it with |
+| --- | --- | --- |
+| **Provider** | The isolation primitive — *where* the agent runs (your host, a container, a cloud VM). | A provider package (`dockerSandbox`, `localProcessSandbox`, …) |
+| **Workspace** | *What the agent sees* — the source repo, package manager, setup commands, secrets. | `defineWorkspace({ … })` |
+| **Harness adapter** | *Which agent runs* and how its output is translated to chat chunks. | `grokBuildText`, `claudeCodeText`, `codexText`, `opencodeText`, or `acpCompatible` for [any ACP agent](/ai/sandbox/harnesses) |
+
+`defineSandbox()` binds a provider + workspace (+ optional policy, lifecycle, and
+hooks) into a reusable definition. `withSandbox(definition)` is the `chat()`
+middleware that turns it on for a run.
+
+### How a run executes
+
+```txt
+chat({ adapter: grokBuildText(), middleware: [withSandbox(repoSandbox)] })
+  │
+  ├─ withSandbox.setup    → ensure the sandbox: resume → restore snapshot → create + bootstrap
+  ├─ adapter.chatStream   → spawn `grok` INSIDE the sandbox; stream its events back as AG-UI chunks
+  └─ withSandbox.onFinish → snapshot / destroy per the lifecycle
+```
+
+A harness adapter declares `requires: [SandboxCapability]`, so `chat()` fails
+fast at the call site if no middleware provides a sandbox — you can't
+accidentally run a coding agent with nowhere to run it.
+
+## When to use a sandbox
+
+Reach for a sandbox whenever you want an agent to **act on a real codebase**,
+not just talk about one. A few shapes this takes:
+
+- **CI issue triage / bug-fix bots.** On a new issue, clone the repo into a
+  sandbox, let the agent reproduce and root-cause it, and post the findings (or
+  a draft fix) back.
+- **PR review automation.** Check out a branch, run the test/lint scripts, and
+  have the agent comment on what it found.
+- **Build-and-preview.** Ask the agent to scaffold or modify an app, run the dev
+  server inside the sandbox, and hand the user a live preview URL — see the
+  [Cloudflare guide](/ai/sandbox/cloudflare) and the `examples/sandbox-*-web` apps.
+- **Eval / benchmark harnesses.** Run a coding agent against a fixture repo with
+  a known bug and assert on the resulting diff — reproducibly, in isolation.
+- **Interactive coding copilots** that need to actually execute code, edit
+  files, and run commands rather than only suggest them.
+
+If you only need the model to read code you already have in memory, you don't
+need a sandbox — a normal `chat()` with [tools](/ai/tools/server-tools) is
+enough. The sandbox earns its keep the moment the agent needs a filesystem and a
+shell.
+
+## Where to go next
+
+Start with the [Quick Start](/ai/sandbox/quick-start) to get an agent fixing a bug in a
+sandbox on your laptop. Then dive into the piece you need:
+
+- **[Quick Start](/ai/sandbox/quick-start)** — from a `chat()` app to an agent fixing a bug, in minutes.
+- **[Providers](/ai/sandbox/providers)** — local process, Docker, Daytona, Vercel, Sprites: isolation, auth, and capabilities.
+- **[Harnesses](/ai/sandbox/harnesses)** — which agent runs: Grok Build, Claude Code, Codex, OpenCode, or any ACP agent via `acpCompatible`.
+- **[Workspace](/ai/sandbox/workspace)** — the source repo, clone depth, and serial/parallel setup.
+- **[Provisioning](/ai/sandbox/provisioning)** — secrets, skills, MCP servers, plugins, and `AGENTS.md`.
+- **[Tools](/ai/sandbox/tools)** — bridge your app's own host tools into the in-sandbox agent.
+- **[Policy](/ai/sandbox/policy)** — allow / ask / deny guardrails on what the agent may run.
+- **[Lifecycle & Snapshots](/ai/sandbox/lifecycle)** — reuse, snapshot-after-setup, and resume.
+- **[Events & File Hooks](/ai/sandbox/events)** — stream the agent's edits and activity to a UI.
+- **[Cloudflare (edge)](/ai/sandbox/cloudflare)** — run the agent and a live preview at the edge.
+
+## Try it
+
+A runnable end-to-end demo lives at
+[`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web):
+a "build me an app" agent you can point at any harness (Claude Code, Codex,
+OpenCode, Grok Build) and any provider (Docker, local-process, Vercel, Daytona)
+per run from the UI — it scaffolds an app inside the sandbox, runs the dev server,
+and hands back a live preview URL, streaming the agent's output and the resulting
+diff. For a coding agent running at the edge, see
+[`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare).
+
+For a **web** chat where the agent builds and runs an app inside a sandbox and
+hands back a live preview URL, see `examples/sandbox-web` — one app with harness
+(Claude Code / Codex / OpenCode / Grok) and provider (Docker / local / Vercel /
+Daytona) pickers.
+
+> **Persistence-ready:** the sandbox layer ships with in-memory stores for
+> resume bookkeeping. A future persistence package can provide durable
+> `SandboxStore` / `LockStore` implementations (and event-log replay) by
+> supplying those optional capabilities — no changes to the sandbox layer.
diff --git a/mintlify/ai/sandbox/policy.md b/mintlify/ai/sandbox/policy.md
new file mode 100644
index 000000000..2baeb6cbf
--- /dev/null
+++ b/mintlify/ai/sandbox/policy.md
@@ -0,0 +1,204 @@
+---
+title: Policy
+id: policy
+order: 7
+description: "Set allow/ask/deny guardrails over the commands and capabilities the in-sandbox agent may run, ask about, or never run — one portable description each harness maps onto its native permissions."
+---
+
+A policy is your guardrail layer: it decides which commands and capabilities the
+in-sandbox agent may run outright, must ask about first, or can never run.
+`defineSandboxPolicy()` describes those rules once, portably, and each
+[provider](/ai/sandbox/providers)'s harness adapter maps them onto its own native
+permission system. You attach a policy to a sandbox via
+[`defineSandbox({ policy })`](/ai/sandbox/providers), where it guards the commands the
+[workspace](/ai/sandbox/workspace) setup and bridged [tools](/ai/sandbox/tools) run.
+
+```ts
+import { defineSandboxPolicy, defineSandbox } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const policy = defineSandboxPolicy({
+  commands: {
+    allow: ['pnpm test', 'pnpm typecheck', 'git diff'],
+    ask: ['pnpm install', 'curl *'],
+    deny: ['sudo *', 'rm -rf *'],
+  },
+  capabilities: { fileWrite: 'allow', network: 'ask' },
+  default: 'ask',
+})
+
+const sandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  policy,
+})
+```
+
+## Decisions
+
+Every command or capability resolves to one of three decisions:
+
+| Decision | Meaning |
+| --- | --- |
+| `allow` | The agent runs it without interruption. |
+| `ask`   | The agent pauses; the harness emits an approval request the client answers before the action proceeds. |
+| `deny`  | The action is blocked outright — the agent cannot run it. |
+
+## Commands
+
+`commands` holds three lists of command patterns — `allow`, `ask`, and `deny`.
+A pattern matches against the command the agent is about to run:
+
+```ts
+import { defineSandboxPolicy } from '@tanstack/ai-sandbox'
+
+const policy = defineSandboxPolicy({
+  commands: {
+    allow: ['pnpm test', 'pnpm typecheck', 'git diff'],
+    ask: ['pnpm install', 'curl *'],
+    deny: ['sudo *', 'rm -rf *'],
+  },
+})
+```
+
+### Glob patterns
+
+Patterns support `*` globs, so you can gate a whole family of commands with one
+entry. `curl *` matches any `curl` invocation; `sudo *` matches anything run
+through `sudo`. An exact string like `pnpm test` matches only that command.
+Prefer the named [workspace scripts](/ai/sandbox/workspace) (`pnpm test`, `pnpm build`)
+in your `allow` list — they give the policy stable names to match rather than
+freeform shell.
+
+## Capabilities
+
+`capabilities` applies the same `allow` / `ask` / `deny` decisions to
+coarse-grained abilities rather than individual commands — for example
+filesystem writes or outbound network access:
+
+```ts
+import { defineSandboxPolicy } from '@tanstack/ai-sandbox'
+
+const policy = defineSandboxPolicy({
+  capabilities: {
+    fileWrite: 'allow', // let the agent edit the working tree freely
+    network: 'ask',     // pause for approval before any outbound request
+  },
+})
+```
+
+This is the broad backstop: even if a specific network command isn't in your
+`commands` lists, `network: 'ask'` still forces an approval for anything that
+reaches out.
+
+## Precedence: deny > ask > allow
+
+When more than one rule could match an action, the strictest wins. The order is
+**`deny` > `ask` > `allow`**:
+
+- If any matching rule says `deny`, the action is blocked — no other rule
+  overrides it.
+- Otherwise, if any matching rule says `ask`, the action requires approval.
+- Otherwise, if a rule says `allow`, it runs.
+- If nothing matches, the `default` decision applies.
+
+```ts
+import { defineSandboxPolicy } from '@tanstack/ai-sandbox'
+
+const policy = defineSandboxPolicy({
+  commands: {
+    // `curl` is allowed broadly…
+    allow: ['curl *'],
+    // …but `deny` wins, so this specific host is always blocked.
+    deny: ['curl * internal.example.com*'],
+  },
+  default: 'deny',
+})
+```
+
+This means you can paint with a broad `allow` and carve exceptions out with
+narrower `ask` / `deny` patterns, confident the exceptions take priority.
+
+## The default
+
+`default` is the decision for anything none of your rules match. Set it to the
+posture you want at the edges:
+
+- `default: 'allow'` — permissive: only the things you explicitly `ask` about or
+  `deny` are gated. Reasonable for trusted dev loops.
+- `default: 'ask'` — cautious: unknown actions pause for approval. A good middle
+  ground.
+- `default: 'deny'` — locked down: the agent can only run what you explicitly
+  `allow`. Strongest posture for untrusted or production runs.
+
+When omitted, treat the default as `ask` so unforeseen actions surface rather
+than silently running.
+
+## How `ask` surfaces
+
+An `ask` decision is not a guess the SDK makes — it's a question routed back to
+you. When the agent attempts an `ask`-gated action, the harness pauses it and
+emits an **approval request** into the run stream. Your client answers that
+request (approve or reject), and the harness either lets the action proceed or
+blocks it based on the answer. Until the client responds, the action is held.
+
+This is why `ask` is the right choice for actions that are usually fine but
+occasionally dangerous (`pnpm install` pulling a new dependency, an outbound
+`curl`): the human stays in the loop without you having to enumerate every safe
+command up front.
+
+## How adapters map a policy
+
+A policy is portable. Each harness adapter translates the same
+`allow` / `ask` / `deny` description into its own native permission system:
+
+- A Grok Build harness maps it onto the `grok` CLI's permission flags.
+- A Claude Code harness maps it onto Claude Code's permission rules
+  (allowed/ask/denied tool and command rules).
+- A Codex harness maps it onto Codex's approval and sandbox settings.
+- Other harnesses map it onto whatever native gate they expose.
+
+Where a harness can't express a particular rule, it degrades rather than
+failing the run — the unsupported rule is skipped (with a warning) instead of
+throwing. Because the mapping is the adapter's job, you write the policy once
+and it behaves consistently no matter which provider or harness runs the
+sandbox.
+
+## Wiring it on
+
+A policy does nothing on its own — it takes effect when you attach it to a
+sandbox. Pass it as `policy` on [`defineSandbox`](/ai/sandbox/providers); from there it
+guards every run that uses that sandbox, including the [workspace](/ai/sandbox/workspace)
+setup commands and any host [tools](/ai/sandbox/tools) bridged into the agent.
+
+```ts
+import { defineSandboxPolicy, defineSandbox, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const policy = defineSandboxPolicy({
+  commands: {
+    allow: ['pnpm test', 'pnpm typecheck', 'git diff'],
+    ask: ['pnpm install', 'curl *'],
+    deny: ['sudo *', 'rm -rf *'],
+  },
+  capabilities: { fileWrite: 'allow', network: 'ask' },
+  default: 'ask',
+})
+
+const sandbox = defineSandbox({
+  id: 'repo-agent',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['corepack enable', 'pnpm install'],
+  }),
+  policy,
+})
+```
+
+## Next steps
+
+- [Providers](/ai/sandbox/providers) — attach the policy via `defineSandbox`.
+- [Workspace](/ai/sandbox/workspace) — the setup commands and scripts the policy guards.
+- [Tools](/ai/sandbox/tools) — host tools bridged into the agent run under the same policy.
+- [Lifecycle](/ai/sandbox/lifecycle) — how a guarded sandbox resumes and tears down.
diff --git a/mintlify/ai/sandbox/providers.md b/mintlify/ai/sandbox/providers.md
new file mode 100644
index 000000000..3e425f3e5
--- /dev/null
+++ b/mintlify/ai/sandbox/providers.md
@@ -0,0 +1,206 @@
+---
+title: Providers
+id: providers
+order: 3
+description: "Pick and configure where a TanStack AI sandbox runs — local process, Docker, Daytona, or Vercel — and understand the capabilities each one exposes."
+---
+
+A provider owns the isolation primitive: where the harness actually runs. Every
+provider implements the same `SandboxProvider` / `SandboxHandle` contract, so the
+[workspace](/ai/sandbox/workspace) you hand the agent and the [policy](/ai/sandbox/policy) that guards
+it are provider-agnostic. Pick a provider for the isolation, auth, and
+snapshot/resume behaviour you need; the rest of your sandbox definition stays the
+same.
+
+> The provider is _where_ the agent runs. For _which_ agent runs — Grok Build,
+> Claude Code, Codex, OpenCode, or any ACP agent via `acpCompatible` — see
+> [Harnesses](/ai/sandbox/harnesses).
+
+## Choosing a provider
+
+| Provider | Package | Isolation | Notes |
+| --- | --- | --- | --- |
+| Local process | `@tanstack/ai-sandbox-local-process` | none (host) | The fast, no-Docker dev loop. Trusted/dev use only. |
+| Docker | `@tanstack/ai-sandbox-docker` | container | Real isolation; commit-based snapshots, fork, resume-by-id. |
+| Daytona | `@tanstack/ai-sandbox-daytona` | cloud sandbox | Managed [Daytona](https://www.daytona.io/) sandboxes; port preview links, resume-by-id. Needs `DAYTONA_API_KEY`. |
+| Vercel | `@tanstack/ai-sandbox-vercel` | microVM | Managed [Vercel Sandbox](https://vercel.com/docs/sandbox) microVMs; exposed-port domains, resume-by-id (persistent). Needs `VERCEL_TOKEN` + team/project. |
+| Sprites | `@tanstack/ai-sandbox-sprites` | stateful sandbox | Managed [Sprites](https://sprites.dev) (Fly.io) sandboxes; durable filesystem, in-place checkpoints, single proxied public-URL port, resume-by-id. Needs `SPRITES_API_KEY`. |
+
+Each provider is its own package, and the constructor is the only thing that
+differs between them:
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { daytonaSandbox } from '@tanstack/ai-sandbox-daytona'
+import { vercelSandbox } from '@tanstack/ai-sandbox-vercel'
+
+const dev = localProcessSandbox() // runs on your host
+const isolated = dockerSandbox({ image: 'node:22' }) // runs in a container
+const daytona = daytonaSandbox({ apiKey: process.env.DAYTONA_API_KEY }) // managed cloud sandbox
+const vercel = vercelSandbox({ runtime: 'node24' }) // managed Vercel microVM
+```
+
+> Cloud providers (Daytona, Vercel) run as remote VMs. When you drive them from
+> your laptop, [tools](/ai/sandbox/tools) bridged from `chat()` can't dial your machine's
+> `localhost` — you need the bridge tunnel. See the [tools guide](/ai/sandbox/tools) for the
+> ngrok subpath, and the [Cloudflare guide](/ai/sandbox/cloudflare) for the edge-native
+> co-located model.
+
+## Local process
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+
+const dev = localProcessSandbox()
+```
+
+- **Isolation:** none. The harness runs directly on your host, inheriting your
+  host environment. Use it for trusted/dev work only — there is no boundary
+  between the agent and your machine.
+- **Auth / env:** inherits the host environment. No API key injection is required
+  if your host CLI is already logged in.
+- **Snapshot / resume:** no snapshots and no durable resume-by-id; each run
+  re-creates and re-bootstraps under the same identity. The snapshot step is
+  skipped silently (see [Capabilities](#capabilities)).
+
+### Use a host CLI's own auth (`scrubEnv`)
+
+Because `localProcessSandbox` runs the harness on your host, it inherits your host
+environment — including any API keys exported there. Use `scrubEnv` to remove
+variables before spawning, so the host CLI falls back to its own logged-in
+session instead of billing the API. For example, drop `XAI_API_KEY` so Grok Build
+uses your **grok.com login** (the same trick works for Claude Code with
+`ANTHROPIC_API_KEY` → `claude login`):
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+
+const hostLogin = localProcessSandbox({ scrubEnv: ['XAI_API_KEY'] })
+```
+
+> Only local-process can do this — it is the only provider that runs your host
+> CLI. Isolated and cloud providers have no host login, so they always use an
+> injected API key (supplied as a workspace secret).
+
+## Docker
+
+```ts
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const isolated = dockerSandbox({ image: 'node:22' })
+```
+
+- **Isolation:** a real container boundary between the agent and your host.
+- **Auth / env:** no host login; provide credentials as workspace secrets, which
+  are injected into the container env at create/resume. The agent reaches host
+  tools over `host.docker.internal` (see [tools](/ai/sandbox/tools)).
+- **Snapshot / resume:** full commit-based snapshots, `fork`, and resume-by-id.
+  Bootstrap snapshots after `setup` completes, so subsequent runs resume from the
+  snapshot instead of re-running setup.
+
+## Daytona
+
+```ts
+import { daytonaSandbox } from '@tanstack/ai-sandbox-daytona'
+
+const daytona = daytonaSandbox({ apiKey: process.env.DAYTONA_API_KEY })
+```
+
+- **Isolation:** a managed cloud sandbox — a remote VM you don't run yourself.
+- **Auth / env:** needs `DAYTONA_API_KEY`. Harness credentials are injected as
+  workspace secrets; there is no host login to fall back on.
+- **Snapshot / resume:** no snapshots; resume-by-id reconnects to a still-running
+  sandbox (not a restored point-in-time snapshot), plus port preview links for
+  live previews.
+- **Bridge:** the sandbox is remote, so a [bridged tool](/ai/sandbox/tools) call can't reach
+  your laptop's `localhost`. In local dev, tunnel the bridge (see [tools](/ai/sandbox/tools));
+  a deployed orchestrator is reachable out of the box.
+
+## Vercel
+
+```ts
+import { vercelSandbox } from '@tanstack/ai-sandbox-vercel'
+
+const vercel = vercelSandbox({ runtime: 'node24' })
+```
+
+- **Isolation:** a managed microVM (Vercel Sandbox).
+- **Auth / env:** needs `VERCEL_TOKEN` plus a team/project. Harness credentials
+  are injected as workspace secrets.
+- **Snapshot / resume:** persistent resume-by-id with a durable filesystem, plus
+  exposed-port domains for previews.
+- **Bridge:** like Daytona, a remote VM — bridged tools need the tunnel in local
+  dev (see [tools](/ai/sandbox/tools)).
+
+## Sprites
+
+```ts
+import { spritesSandbox } from '@tanstack/ai-sandbox-sprites'
+
+const sprites = spritesSandbox({ apiKey: process.env.SPRITES_API_KEY })
+```
+
+- **Isolation:** a managed [Sprites](https://sprites.dev) stateful sandbox
+  (Fly.io) — a remote VM you don't run yourself.
+- **Auth / env:** needs `SPRITES_API_KEY` (token form
+  `org/projectNumber/tokenId/secret`); override the control-plane URL with
+  `apiUrl` / `SPRITES_API_URL`. Harness credentials are injected as workspace
+  secrets.
+- **Snapshot / resume:** resume-by-id reconnects to the named Sprite (its
+  filesystem is durable across idle suspend/resume). `snapshot()` creates a
+  Sprite **checkpoint** (a save point of the writable overlay); restore is
+  **in-place** on the same Sprite via the handle's `restoreCheckpoint()` /
+  `listCheckpoints()`. A checkpoint does not survive Sprite deletion, so the
+  provider intentionally does **not** implement the reconstruct-after-gone
+  `restoreSnapshot` — when a Sprite is gone the framework degrades to a fresh
+  create instead. Restore restarts the environment and can take minutes;
+  `restoreCheckpoint()` polls the workspace until it is listable again before
+  resolving. Note that immediately after a restore the overlay can be listable
+  while individual file reads briefly return an I/O error as it settles — retry
+  reads if you act on the filesystem the instant restore returns.
+- **Ports:** a Sprite proxies a single internal HTTP port (default `8080`,
+  configurable via `httpPort`) to its always-on public URL. `ports.connect(8080)`
+  switches the URL to `public` auth and returns it; other ports are not exposed.
+- **Bridge:** like Daytona/Vercel, a remote VM — bridged tools need the tunnel in
+  local dev (see [tools](/ai/sandbox/tools)).
+
+## Capabilities
+
+Providers declare what they support via `capabilities()`. The flags are:
+
+| Capability | Meaning |
+| --- | --- |
+| `fs` | Read/write the sandbox filesystem. |
+| `exec` | Run commands. |
+| `env` | Inject environment variables. |
+| `ports` | Expose/forward ports (preview URLs). |
+| `backgroundProcesses` | Keep long-running processes alive between calls. |
+| `writableStdin` | A spawned process exposes a writable host→process stdin. `true` for local-process and Docker; `false` on remote/edge providers (Daytona, Vercel, Cloudflare), where stdin-fed harnesses deliver the prompt via a file + shell redirection instead. |
+| `snapshots` | Capture and restore point-in-time snapshots. |
+| `networkPolicy` | Enforce network allow/deny rules. |
+| `durableFilesystem` | Disk that survives across resumes. |
+| `fork` | Branch a sandbox from an existing one. |
+
+Code that uses an **optional** capability checks the flag first and degrades
+gracefully — for example, bootstrap only snapshots when `snapshots` is supported,
+so `localProcessSandbox` simply skips the step. Calling an unsupported optional
+method directly (instead of checking the flag) throws an
+`UnsupportedCapabilityError`:
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+
+const provider = localProcessSandbox()
+const caps = provider.capabilities()
+
+if (caps.snapshots) {
+  // safe to take a snapshot
+} else {
+  // degrade gracefully — local-process has no snapshots
+}
+```
+
+Use the flags to write provider-agnostic code: branch on the capability rather
+than the concrete provider, and your sandbox definition keeps working when you
+swap one provider for another.
diff --git a/mintlify/ai/sandbox/provisioning.md b/mintlify/ai/sandbox/provisioning.md
new file mode 100644
index 000000000..381f2a571
--- /dev/null
+++ b/mintlify/ai/sandbox/provisioning.md
@@ -0,0 +1,241 @@
+---
+title: Provisioning
+id: provisioning
+order: 5
+description: "Give the in-sandbox agent secrets, skill repos, MCP servers, plugins, and instructions with one portable definition that each harness projects into its own native format."
+---
+
+Provisioning is how you hand the in-sandbox agent everything beyond the working
+tree: typed secrets, skill repos, MCP servers, plugins, and a universal
+instruction file. You declare it all on [`defineWorkspace()`](/ai/sandbox/workspace), and
+each harness adapter projects it into its own native format at bootstrap — so
+the same definition works whether the agent is Grok Build, Claude Code, Codex, or OpenCode.
+
+```ts
+import {
+  bearer,
+  createSecrets,
+  defineWorkspace,
+  fileSkill,
+  gitSkill,
+  githubRepo,
+  mcpSkill,
+} from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({
+  GH: process.env.GH_TOKEN ?? '',
+  SENTRY: process.env.SENTRY_TOKEN ?? '',
+})
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo', ref: 'main' }),
+  secrets,
+  skills: [
+    gitSkill({ repo: 'owner/tanstack-skills' }),
+    gitSkill({ repo: 'owner/private-skills', secret: secrets.GH }),
+    mcpSkill('my-mcp', {
+      url: 'https://mcp.example.com',
+      headers: { Authorization: bearer(secrets.SENTRY) },
+    }),
+    fileSkill({ path: '.agent-hints.md', content: '# Hints\nPrefer pnpm.' }),
+  ],
+  plugins: ['@anthropic/plugin-foo'],
+  instructions: 'Always run `pnpm test` before proposing a change.',
+})
+```
+
+## Type-safe secrets
+
+`createSecrets` turns plain environment values into opaque `SecretRef` tokens.
+You pass the refs around your config; the underlying strings stay out of every
+serializable surface.
+
+```ts
+import { createSecrets, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({
+  GH: process.env.GH_TOKEN ?? '',
+  SENTRY: process.env.SENTRY_TOKEN ?? '',
+})
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo', ref: 'main' }),
+  secrets,
+})
+```
+
+`secrets` is [declared on the workspace](/ai/sandbox/workspace), and the values are
+injected into the sandbox env at create/resume time.
+
+### Why the values never leak
+
+The real strings are held in a **non-enumerable, symbol-keyed registry** on the
+object `createSecrets` returns. Each property you access (`secrets.GH`) is a
+`SecretRef` token, not the string. Because the registry is symbol-keyed and
+non-enumerable:
+
+- `Object.keys(secrets)`, spreads, and `JSON.stringify(secrets)` never expose
+  the values.
+- The values are **never written to snapshots, the sandbox store, or the event
+  log** — only resolved at the moment the sandbox env is built.
+
+This is what makes the workspace definition safe to hash, persist, and replay
+for resume bookkeeping without ever persisting a credential.
+
+### Passing a secret where a `SecretRef` is accepted
+
+Hand a ref directly to any field that takes one. The clearest example is
+`gitSkill` auth — pass `secret: secrets.GH` and the token is resolved only when
+the repo is cloned:
+
+```ts
+import { createSecrets, defineWorkspace, gitSkill, githubRepo } from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({ GH: process.env.GH_TOKEN ?? '' })
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo' }),
+  secrets,
+  skills: [gitSkill({ repo: 'owner/private-skills', secret: secrets.GH })],
+})
+```
+
+### `bearer(ref)` for header values
+
+In MCP header values you can use a ref directly, or wrap it with `bearer(ref)`
+to produce a `Bearer <value>` string at resolution time:
+
+```ts
+import { bearer, createSecrets, mcpSkill } from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({
+  GH: process.env.GH_TOKEN ?? '',
+  SENTRY: process.env.SENTRY_TOKEN ?? '',
+})
+
+mcpSkill('my-mcp', {
+  url: 'https://mcp.example.com',
+  headers: {
+    Authorization: bearer(secrets.SENTRY), // resolves to "Bearer <value>"
+    'X-Token': secrets.GH, // resolves to the raw token value
+  },
+})
+```
+
+## Skills, plugins, and MCP servers
+
+`skills` is an array of skill values that provision capabilities into the
+agent's environment. There are four builders, each describing a different kind
+of capability:
+
+| Builder      | What it provisions                                                                 |
+| ------------ | ---------------------------------------------------------------------------------- |
+| `agentSkill` | A named public skill (portable placeholder; Claude Code warns and skips — use `gitSkill` instead). |
+| `gitSkill`   | A skill repo cloned into the workspace, with optional auth and clone path.         |
+| `mcpSkill`   | A third-party MCP server, with URL and headers.                                    |
+| `fileSkill`  | An arbitrary file written into the workspace.                                      |
+
+```ts
+import {
+  bearer,
+  createSecrets,
+  defineWorkspace,
+  fileSkill,
+  gitSkill,
+  githubRepo,
+  mcpSkill,
+} from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({
+  GH: process.env.GH_TOKEN ?? '',
+  SENTRY: process.env.SENTRY_TOKEN ?? '',
+})
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo' }),
+  secrets,
+  skills: [
+    // Clone a public skill repo (preferred over agentSkill on Claude Code).
+    gitSkill({ repo: 'owner/tanstack-skills' }),
+    // Clone a private skill repo; `secret` is resolved from the secrets registry.
+    gitSkill({ repo: 'owner/private-skills', secret: secrets.GH }),
+    // Wire an MCP server with a resolved bearer token in the Authorization header.
+    mcpSkill('my-mcp', {
+      url: 'https://mcp.example.com',
+      headers: { Authorization: bearer(secrets.SENTRY) },
+    }),
+    // Write an arbitrary file into the workspace.
+    fileSkill({ path: '.agent-hints.md', content: '# Hints\nPrefer pnpm.' }),
+  ],
+  plugins: ['@anthropic/plugin-foo'],
+})
+```
+
+### `gitSkill` clone path
+
+`gitSkill` takes an optional `into` field — an **absolute path inside the
+sandbox** — controlling where the repo is cloned. It defaults to
+`.tanstack-skills/<repo-basename>`:
+
+```ts
+import { createSecrets, defineWorkspace, gitSkill, githubRepo } from '@tanstack/ai-sandbox'
+
+const secrets = createSecrets({ GH: process.env.GH_TOKEN ?? '' })
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo' }),
+  secrets,
+  skills: [
+    gitSkill({
+      repo: 'owner/private-skills',
+      secret: secrets.GH,
+      into: '/workspace/.skills/private',
+    }),
+  ],
+})
+```
+
+### Per-harness projection
+
+At bootstrap each harness projector maps these values into its CLI's native
+format:
+
+| Harness     | MCP servers projected to |
+| ----------- | ------------------------ |
+| Claude Code | `.mcp.json`              |
+| Codex       | `.codex/config.toml`     |
+| OpenCode    | `opencode.json`          |
+
+A concept a given CLI lacks — for example, `plugins` on Codex — **emits a
+warning and is silently skipped** rather than throwing. The same applies to
+`agentSkill` on Claude Code: there is no reliable primitive to install a public
+skill by bare name, so the projector warns and skips it. Prefer `gitSkill` (or a
+`plugins` entry) when you need that skill on Claude Code. That keeps one
+portable definition usable across harnesses: you declare everything once, and
+each agent takes the parts it understands.
+
+> These MCP servers are third-party services you point the agent at. Bridging
+> your **own app's host tools** into the agent (a `chat()` server tool whose
+> `execute()` runs back on the host) is a different mechanism — see
+> [Tools](/ai/sandbox/tools).
+
+## `AGENTS.md` and per-harness symlinks
+
+`instructions` is a string written to `AGENTS.md` at the workspace root during
+bootstrap. Harness-specific counterparts — `CLAUDE.md`, `GEMINI.md` — are
+created as **symlinks** to it; if the sandbox process layer cannot symlink, they
+are written as copies instead. Either way the instruction content is read
+natively by every supported CLI without extra config.
+
+```ts
+import { defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/repo' }),
+  instructions: 'Always run `pnpm test` before proposing a change.',
+})
+```
+
+> Use `instructions` for guidance you want the agent to always follow. To
+> constrain what it is *allowed* to do — which commands and capabilities are
+> allowed, asked about, or denied — reach for [Policy](/ai/sandbox/policy) instead.
diff --git a/mintlify/ai/sandbox/quick-start.md b/mintlify/ai/sandbox/quick-start.md
new file mode 100644
index 000000000..bd6cd7ab6
--- /dev/null
+++ b/mintlify/ai/sandbox/quick-start.md
@@ -0,0 +1,170 @@
+---
+title: Quick Start
+id: quick-start
+order: 2
+description: "Run a Grok Build coding agent inside a sandbox, fix a bug in a cloned repo, and stream the diff — in minutes."
+---
+
+You have an app that already calls `chat()`, and you have an `XAI_API_KEY` (or
+you've logged in on grok.com). By the end of this guide a Grok Build agent will
+clone a repo into a Docker sandbox, fix a bug, and stream the resulting `git diff`
+back to you.
+
+If you only want concepts first, read the [Overview](/ai/sandbox/overview). Otherwise, start
+here.
+
+## 1. Install the packages
+
+```bash
+npm i @tanstack/ai @tanstack/ai-grok-build @tanstack/ai-sandbox @tanstack/ai-sandbox-docker
+```
+
+- `@tanstack/ai` — the core `chat()` pipeline.
+- `@tanstack/ai-grok-build` — the Grok Build **harness adapter**.
+- `@tanstack/ai-sandbox` — `defineSandbox`, `defineWorkspace`, `withSandbox`.
+- `@tanstack/ai-sandbox-docker` — the Docker **provider** that runs the agent in a
+  container.
+
+You'll also need Docker running locally, and the **`grok` CLI available in your
+sandbox image** (the Grok Build harness spawns it inside the sandbox). No Docker?
+See [the local-process alternative](#no-docker-run-on-your-host) below.
+
+## 2. Define the sandbox
+
+A sandbox bundles three things: a **provider** (the isolation primitive — here,
+Docker), a **workspace** (what the agent sees — here, a cloned git repo plus a
+setup step), and a **lifecycle** (when to reuse, snapshot, and tear it down).
+
+```ts
+import {
+  createSecrets,
+  defineSandbox,
+  defineWorkspace,
+  githubRepo,
+} from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+export const repoSandbox = defineSandbox({
+  id: 'bug-fixer',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    // Where the working tree comes from (shallow clone by default).
+    source: githubRepo({ repo: 'owner/buggy-app' }),
+    packageManager: 'pnpm',
+    // Commands that run once during bootstrap.
+    setup: ['corepack enable', 'pnpm install'],
+    // Injected into the sandbox env at create/resume — never persisted to
+    // snapshots, the sandbox store, or the event log.
+    secrets: createSecrets({
+      XAI_API_KEY: process.env.XAI_API_KEY ?? '',
+    }),
+  }),
+  lifecycle: { reuse: 'thread', snapshot: 'after-setup', keepAlive: '30m' },
+})
+```
+
+`snapshot: 'after-setup'` (the default when the provider supports snapshots) means
+the next run resumes from a post-`pnpm install` snapshot instead of re-cloning and
+re-installing — so only the first run pays the cold-start cost.
+
+For everything `defineWorkspace()` can describe — package manager auto-detection,
+parallel setup groups, clone depth — see [Workspace](/ai/sandbox/workspace).
+
+## 3. Call `chat()` with the harness adapter
+
+The Grok Build adapter declares that it `requires` a sandbox capability.
+`withSandbox(...)` is the middleware that **provides** it: it resumes-or-creates
+the sandbox, bootstraps the workspace, and tears it down per the lifecycle.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { messages, threadId } from './chat-context'
+import { repoSandbox } from './sandbox'
+
+const stream = chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(repoSandbox)],
+})
+```
+
+Here `messages` is your conversation (e.g. a user turn asking the agent to fix the
+bug), and `threadId` keys the sandbox so the same thread reuses the same container.
+Spawning `grok` happens **inside** the sandbox; its events stream back as normal
+`chat()` chunks.
+
+## 4. Stream the result and read the diff
+
+Harness runs emit standard AG-UI chunks (text, tool calls, reasoning) plus a
+namespaced `CUSTOM` event. When the run finishes, the Grok Build adapter emits a
+`file.changed` event carrying the working-tree `git diff`:
+
+```ts
+import { stream } from './my-run'
+
+for await (const chunk of stream) {
+  if (chunk.type === 'TEXT_MESSAGE_CONTENT') {
+    process.stdout.write(chunk.delta)
+  }
+
+  if (chunk.type === 'CUSTOM' && chunk.name === 'file.changed') {
+    const value = chunk.value
+    if (value !== null && typeof value === 'object' && 'diff' in value) {
+      console.log('\n--- diff ---\n')
+      console.log(value.diff)
+    }
+  }
+}
+```
+
+That `diff` is point B: the agent cloned the repo, found the bug, edited the files,
+and you printed the change it made — all without the agent touching your host
+filesystem.
+
+## No Docker? Run on your host
+
+Swap the provider for the local-process one to skip Docker entirely. It runs the
+agent directly on your host (no isolation), which makes for the fastest dev loop:
+
+```bash
+npm i @tanstack/ai-sandbox-local-process
+```
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+import { defineSandbox, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+export const repoSandbox = defineSandbox({
+  id: 'bug-fixer',
+  provider: localProcessSandbox(),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/buggy-app' }),
+    setup: ['corepack enable', 'pnpm install'],
+  }),
+  lifecycle: { reuse: 'thread' },
+})
+```
+
+Because local-process inherits your host environment, you can drop the
+`XAI_API_KEY` secret and let Grok Build fall back to your grok.com login. For that
+(and for Daytona, Vercel, Sprites, and Cloudflare runtimes), see [Providers](/ai/sandbox/providers).
+
+## Run the working example
+
+A complete, runnable app ships at
+[`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web)
+— a "build me an app" agent where you pick the harness (Claude Code, Codex,
+OpenCode, Grok Build) and provider (Docker, local-process, Vercel, Daytona) per
+run from the UI; it scaffolds an app in the sandbox, runs the dev server, and
+streams back a live preview URL and the diff. For a coding agent running at the
+edge, see
+[`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare).
+
+From here:
+
+- Give the agent your own server-side tools (DB lookups, secrets) — see [Tools](/ai/sandbox/tools).
+- Lock down what the agent is allowed to run — see [Policy](/ai/sandbox/policy).
+- Watch every file the agent touches as it works — see [Events](/ai/sandbox/events).
diff --git a/mintlify/ai/sandbox/tools.md b/mintlify/ai/sandbox/tools.md
new file mode 100644
index 000000000..eee391683
--- /dev/null
+++ b/mintlify/ai/sandbox/tools.md
@@ -0,0 +1,127 @@
+---
+title: Tools
+id: tools
+order: 6
+description: "Bridge your app's host tools — with their DB, secrets, and closures — into the in-sandbox agent over an authenticated MCP tool-proxy."
+---
+
+The agent inside the sandbox always has its own **native tools**: Bash, file
+edits, and search, running directly on the sandbox filesystem. That covers
+everything the agent does locally to the working tree.
+
+What it can't do on its own is reach back into _your_ app — your database, your
+secrets, the closures you captured when you defined a tool. For that, the
+`chat()`-provided **server tools** are **bridged** into the sandbox.
+
+> This page is about your own host tools, bridged back to the orchestrator. If
+> instead you want to give the agent third-party MCP servers it talks to
+> directly (no host round-trip), those are declared on the workspace — see
+> [Provisioning](/ai/sandbox/provisioning). For server tools in general, see the main
+> [server tools](/ai/tools/server-tools) doc.
+
+## Native vs bridged tools
+
+When you pass `tools` to `chat()` with a sandbox in the middleware, each tool is
+exposed to the in-sandbox agent over a **host-side MCP tool-proxy**:
+
+1. The agent calls the tool by name, as it would any MCP tool.
+2. The call is proxied back across the sandbox boundary to the host.
+3. The tool's `execute()` runs **on the host** — keeping its DB handle, secrets,
+   and any closures it captured.
+4. The result is returned into the sandbox as the tool-call output.
+
+So `execute()` never ships into the sandbox; only the call and its result cross
+the boundary. The tool keeps running where it was defined.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { repoSandbox } from './sandbox'
+import { messages, threadId } from './chat-context'
+import { getTodos } from './tools'
+import { db } from './db'
+
+chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  // `execute()` closes over `db` and runs on the host — never in the sandbox.
+  tools: [
+    getTodos.server(async ({ userId }: { userId: string }) =>
+      db.todos.find({ userId }),
+    ),
+  ],
+  middleware: [withSandbox(repoSandbox)],
+})
+```
+
+The bridge is gated by a **random per-run bearer token**, so the proxy endpoint
+is not an open door — only the agent for this run, holding that token, can
+invoke your tools.
+
+## Reaching the bridge
+
+The bridge is an HTTP endpoint the **sandbox calls back to**. For bridged tools
+to work, the sandbox has to be able to open a connection to your orchestrator.
+That holds in two cases and breaks in a third.
+
+| Topology | Host the sandbox dials | Setup |
+| --- | --- | --- |
+| Local process / Docker | `localhost` / `host.docker.internal` | None — works out of the box. |
+| Deployed orchestrator (production) | Your public host, derived from the request | None — works out of the box. |
+| Remote cloud sandbox, driven from your laptop | Your laptop, which has no public URL | Tunnel the bridge with `withNgrokBridge`. |
+
+### Local process / Docker
+
+The orchestrator is the same machine as the sandbox, reached on `localhost`
+(local-process) or `host.docker.internal` (Docker). Bridged tools work with no
+extra configuration.
+
+### A deployed orchestrator (production)
+
+A deployed orchestrator already has a public URL, so the bridge is reachable out
+of the box. The provisioner advertises your public host — derived from the
+incoming request — instead of `localhost`, and every call is still gated by the
+per-run bearer token, so exposing the endpoint publicly is safe. This is the
+same path the edge/Cloudflare deployment uses; see [Cloudflare](/ai/sandbox/cloudflare).
+
+### A remote cloud sandbox, driven from your laptop
+
+With a cloud provider (Daytona, Vercel, Sprites) in **local dev**, the sandbox is a remote
+VM. It **cannot dial your machine's `localhost`**, and your laptop has no public
+URL, so bridged tools can't reach the host until you expose the bridge.
+
+The `@tanstack/ai-sandbox/ngrok` subpath tunnels the loopback bridge through
+[ngrok](https://ngrok.com) so a remote sandbox can reach it. Set
+`NGROK_AUTHTOKEN`, then add `withNgrokBridge` **after** `withSandbox(...)`:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import { withSandbox } from '@tanstack/ai-sandbox'
+import { withNgrokBridge } from '@tanstack/ai-sandbox/ngrok'
+import { repoSandbox } from './sandbox'
+import { messages, threadId } from './chat-context'
+import { getTodos } from './tools'
+import { db } from './db'
+
+chat({
+  threadId,
+  adapter: grokBuildText('grok-build'),
+  messages,
+  tools: [
+    getTodos.server(async ({ userId }: { userId: string }) =>
+      db.todos.find({ userId }),
+    ),
+  ],
+  // Cloud provider in local dev → tunnel the host bridge so the remote sandbox
+  // can reach it. Local process / Docker don't need this.
+  middleware: [withSandbox(repoSandbox), withNgrokBridge],
+})
+```
+
+`@ngrok/ngrok` is an **optional peer dependency** — install it alongside the
+subpath (`npm i @ngrok/ngrok`). `withNgrokBridge` is purely a local-dev
+convenience: in production your deployed orchestrator is already reachable, so
+you ship without it.
diff --git a/mintlify/ai/sandbox/workspace.md b/mintlify/ai/sandbox/workspace.md
new file mode 100644
index 000000000..62be3cca2
--- /dev/null
+++ b/mintlify/ai/sandbox/workspace.md
@@ -0,0 +1,163 @@
+---
+title: Workspace
+id: workspace
+order: 4
+description: "Describe what the agent sees inside the sandbox — source repo, package manager, setup commands, and named scripts — with one portable, harness-agnostic definition."
+---
+
+The workspace is what the agent boots into: a cloned, installed repo with the
+commands you want it to run. `defineWorkspace()` describes that working tree
+once, portably — each harness adapter projects it into its own native format,
+and it runs inside whichever [provider](/ai/sandbox/providers) you chose. This page covers
+the working tree itself: `source`, `packageManager`, `setup`, and `scripts`.
+Secrets, skills, and MCP servers live on [Provisioning](/ai/sandbox/provisioning).
+
+```ts
+import { createSecrets, defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+defineWorkspace({
+  // Where the working tree comes from.
+  source: githubRepo({ repo: 'owner/repo', ref: 'main' }),
+  // Package manager (auto-detected from the lockfile when omitted).
+  packageManager: 'pnpm',
+  // Commands run once during bootstrap.
+  setup: ['corepack enable', 'pnpm install'],
+  // Named commands the agent can run.
+  scripts: { test: 'pnpm test', build: 'pnpm build' },
+  // Injected into the sandbox env at create/resume — never persisted.
+  secrets: createSecrets({ XAI_API_KEY: process.env.XAI_API_KEY ?? '' }),
+})
+```
+
+The fields:
+
+| Field            | What it sets                                                              |
+| ---------------- | ------------------------------------------------------------------------- |
+| `source`         | Where the working tree comes from (git repo, local path, or nothing).     |
+| `packageManager` | `npm` / `pnpm` / `yarn` / `bun` / `auto`. Defaults to `auto`.              |
+| `setup`          | Commands run once during bootstrap (serial array or serial/parallel groups). |
+| `scripts`        | Named commands the agent and user can invoke by name.                     |
+| `secrets`        | Typed secret refs injected into the env. See [Provisioning](/ai/sandbox/provisioning). |
+
+> `defineWorkspace()` also takes `skills`, `plugins`, and `instructions` for
+> provisioning the agent environment — those are covered on
+> [Provisioning](/ai/sandbox/provisioning) rather than duplicated here.
+
+## Source
+
+`source` is where the working tree comes from. Five shapes:
+
+```ts
+import { defineWorkspace, githubRepo, gitSource } from '@tanstack/ai-sandbox'
+
+// Shorthand for a GitHub repo (owner/repo or a full URL).
+defineWorkspace({ source: githubRepo({ repo: 'owner/repo', ref: 'main' }) })
+
+// Any git URL.
+defineWorkspace({ source: gitSource({ url: 'https://git.example.com/owner/repo.git' }) })
+
+// The same as gitSource, written out as a plain object.
+defineWorkspace({ source: { type: 'git', url: 'https://github.com/owner/repo', ref: 'main' } })
+
+// An existing directory on the host (e.g. local-process dev loop).
+defineWorkspace({ source: { type: 'local', path: '/abs/path/to/repo' } })
+
+// No working tree — the agent starts in an empty workspace.
+defineWorkspace({ source: { type: 'none' } })
+```
+
+`githubRepo` is a convenience wrapper over `gitSource`: a short `owner/repo`
+expands to `https://github.com/owner/repo.git`, while a full URL is used as-is.
+Both produce a `{ type: 'git' }` source, so you can also write that object
+literal directly when you want full control.
+
+### Shallow clone by default
+
+`githubRepo` and `gitSource` default to a shallow single-branch clone
+(`--depth 1 --single-branch`) so cold starts stay fast. Pass a `depth` number
+for a specific history depth, or `'full'` to fetch everything:
+
+```ts
+import { defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+// Shallow clone (depth 1) — the default.
+defineWorkspace({ source: githubRepo({ repo: 'owner/app' }) })
+
+// Explicit depth — fetches the last 10 commits.
+defineWorkspace({ source: githubRepo({ repo: 'owner/app', depth: 10 }) })
+
+// Full history — disables the depth flag entirely.
+defineWorkspace({ source: githubRepo({ repo: 'owner/app', depth: 'full' }) })
+```
+
+## Package manager
+
+`packageManager` is `'npm'`, `'pnpm'`, `'yarn'`, `'bun'`, or `'auto'`. It
+defaults to `'auto'`, which detects the manager from the lockfile after the
+source lands. Set it explicitly when you want to pin the choice rather than
+infer it.
+
+## Setup
+
+`setup` runs once during bootstrap to turn a freshly cloned repo into an
+installed one. It accepts either a plain string array — every step runs
+serially — or a builder callback that records serial and parallel groups.
+
+The simplest form is the array, equivalent to all-serial:
+
+```ts
+import { defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/app' }),
+  setup: ['corepack enable', 'pnpm install'],
+})
+```
+
+The callback runs over a **persistent shell**: the working directory and
+environment carry over between steps, so a `cd` or `export` in a serial step is
+visible to the next one. Use `parallel([...])` to launch independent commands
+concurrently — they inherit the shell's cwd and env, and the next serial step
+waits for all of them to finish:
+
+```ts
+import { defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/app' }),
+  setup: ({ serial, parallel }) => {
+    // Runs in order on the persistent shell; cwd/env carry over.
+    serial('corepack enable')
+    serial('pnpm install')
+    // Both commands launch concurrently, inheriting cwd + env from the shell.
+    parallel(['pnpm build', 'pnpm typecheck'])
+    // Runs after both parallel steps complete.
+    serial('echo bootstrap done')
+  },
+})
+```
+
+> When the provider supports snapshots, bootstrap caches the result after
+> `setup` so subsequent runs skip it. See
+> [Lifecycle &amp; snapshots](/ai/sandbox/lifecycle).
+
+## Scripts
+
+`scripts` is a map of named commands the agent and user can invoke by name,
+without restating the full command line each time:
+
+```ts
+import { defineWorkspace, githubRepo } from '@tanstack/ai-sandbox'
+
+defineWorkspace({
+  source: githubRepo({ repo: 'owner/app' }),
+  scripts: {
+    test: 'pnpm test',
+    build: 'pnpm build',
+    typecheck: 'pnpm test:types',
+  },
+})
+```
+
+These are surfaced as named commands rather than freeform shell, which also
+gives [Policy](/ai/sandbox/policy) a stable name to allow, ask about, or deny.
diff --git a/mintlify/ai/structured-outputs/multi-turn.md b/mintlify/ai/structured-outputs/multi-turn.md
new file mode 100644
index 000000000..14e5394d1
--- /dev/null
+++ b/mintlify/ai/structured-outputs/multi-turn.md
@@ -0,0 +1,227 @@
+---
+title: Multi-Turn Structured Chat
+id: structured-outputs-multi-turn
+order: 4
+description: "Build a chat where users iterate on a typed object across multiple turns — every assistant turn produces its own validated object, history stays renderable, and messages[i].parts.find(p => p.type === 'structured-output') is typed by your schema."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - multi-turn
+  - structured chat
+  - StructuredOutputPart
+  - typed message parts
+  - UIMessage
+  - recipe builder
+---
+
+You want users to iterate on a structured object across turns. "Give me a pasta recipe under $15" → recipe card lands. "Now make it vegan" → a new recipe card lands; the old one stays visible in history. "Add a salad and make it gluten-free" → third card lands; the first two are still there to compare against.
+
+This is the shape of a structured-output chat: every assistant turn produces its own validated object, every old turn stays renderable, and the type of `messages[i].parts.find(p => p.type === 'structured-output').data` is your schema's inferred type — not `unknown`.
+
+By the end of this guide you'll have a chat UI that walks `messages` directly, renders one typed card per assistant turn, and keeps history across `sendMessage()` calls.
+
+> **Note:** If you only need a single round-trip (one prompt → one object), use [One-Shot Extraction](/ai/structured-outputs/one-shot). If you have one turn that streams progressively but no history, use [Streaming UIs](/ai/structured-outputs/streaming) — its `partial` / `final` sugar is the right surface. This page is for the case where history matters.
+
+> **React Native recipe app:** The Expo example streams this same multi-turn
+> recipe pattern into native cards with an XHR transport selector. See
+> [Quick Start: React Native](/ai/getting-started/quick-start-react-native) to
+> run it on Expo Go.
+
+## How it lands on the message
+
+When `useChat({ outputSchema })` receives the server's `structured-output.complete` for an assistant turn, the runtime attaches a typed `structured-output` `MessagePart` to that assistant's `UIMessage`. The part looks like this:
+
+```typescript
+import type { DeepPartial } from "@tanstack/ai";
+
+type StructuredOutputPart<TData> = {
+  type: "structured-output";
+  status: "streaming" | "complete" | "error";
+  /** Progressive parse of `raw` — populated while streaming and after complete. */
+  partial?: DeepPartial<TData>;
+  /** Validated final object — set when `status === "complete"`. */
+  data?: TData;
+  /** Accumulating JSON text. Round-trip source of truth for the next turn. */
+  raw: string;
+  /** Optional reasoning tokens surfaced by thinking models. */
+  reasoning?: string;
+  /** Set when `status === "error"`. */
+  errorMessage?: string;
+};
+```
+
+`TData` flows from `useChat({ outputSchema })` through the framework-package message types (`UIMessage<TTools, TData>` and `MessagePart<TTools, TData>` in `@tanstack/ai-client`, which the React / Vue / Solid / Svelte hooks re-export) down to the structured-output variant. The result: when you call `useChat({ outputSchema: RecipeSchema })`, `messages[i].parts.find(p => p.type === "structured-output")` returns `StructuredOutputPart<Recipe>` — `data` is typed as `Recipe`, `partial` as `DeepPartial<Recipe>`. No manual cast.
+
+> **Note:** The core `@tanstack/ai` package defines `MessagePart<TData>` and `UIMessage<TData>` with a single generic (no `TTools`) — the tools generic lives in `@tanstack/ai-client` and the framework hook packages. If you're building UI, you almost always want to import from your framework package (`@tanstack/ai-react` / `-vue` / `-solid` / `-svelte`) or from `@tanstack/ai-client` — those carry both generics. The core types come into play only if you're working at the adapter layer below the client.
+
+When the next turn streams in, it lands on a **new** assistant message with its **own** structured-output part. The old turn stays untouched. That's what makes "show history" trivial.
+
+## Server endpoint
+
+The server side is the same as a single-turn streaming endpoint. `chat({ outputSchema, stream: true })` happens to be multi-turn safe out of the box because the server sees the full conversation history on every request and emits one structured-output run per request.
+
+```typescript
+// app/api/structured-chat/route.ts
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+export const RecipeSchema = z.object({
+  title: z.string(),
+  cuisine: z.string(),
+  servings: z.number(),
+  estimatedCostUsd: z.number(),
+  ingredients: z.array(
+    z.object({ item: z.string(), amount: z.string() }),
+  ),
+  steps: z.array(z.string()),
+  tips: z.array(z.string()),
+});
+
+export type Recipe = z.infer<typeof RecipeSchema>;
+
+const SYSTEM_PROMPT = `You are a chef assistant. Always respond with a single recipe matching the JSON schema. When the user asks for modifications, produce a new recipe in the same shape that reflects the change.`;
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    systemPrompts: [SYSTEM_PROMPT],
+    outputSchema: RecipeSchema,
+    stream: true,
+  });
+  return toServerSentEventsResponse(stream);
+}
+```
+
+Behind the scenes, when the client sends turn N, the previous N-1 assistant turns are serialized back into the request body — each assistant's `structured-output` part is serialized as its `raw` JSON content so the model sees its own prior responses verbatim. Multi-turn coherence is preserved without you doing anything special.
+
+## Client: walk the messages
+
+Here's the shape you want. `useChat` exposes `messages` (typed, schema-aware), `sendMessage`, and the hook-level `partial` / `final` sugar for the latest turn. To render history, walk `messages` directly:
+
+```tsx ignore
+import { useState } from "react";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import type { StructuredOutputPart } from "@tanstack/ai-client";
+import { RecipeSchema, type Recipe } from "./api/structured-chat";
+import { UserBubble } from "./components";
+
+// The schema-typed structured-output part. Pulled out so the find()
+// predicate below stays readable.
+type RecipePart = StructuredOutputPart<Recipe>;
+
+function StructuredChatPage() {
+  const [input, setInput] = useState("");
+
+  const { messages, sendMessage, isLoading } = useChat({
+    outputSchema: RecipeSchema,
+    connection: fetchServerSentEvents("/api/structured-chat"),
+  });
+
+  return (
+    <div>
+      {messages.map((m) => {
+        if (m.role === "user") {
+          const text = m.parts
+            .filter((p) => p.type === "text")
+            .map((p) => p.content)
+            .join("");
+          return <UserBubble key={m.id} text={text} />;
+        }
+        if (m.role === "assistant") {
+          // `data` is typed as `Recipe` because the schema generic flows
+          // all the way from useChat through messages[i].parts.
+          const recipePart = m.parts.find(
+            (p): p is RecipePart => p.type === "structured-output",
+          );
+          if (!recipePart) return null;
+          return <RecipeCard key={m.id} part={recipePart} />;
+        }
+        return null;
+      })}
+
+      <input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        disabled={isLoading}
+      />
+      <button
+        onClick={() => {
+          sendMessage(input);
+          setInput("");
+        }}
+        disabled={isLoading}
+      >
+        Send
+      </button>
+    </div>
+  );
+}
+
+function RecipeCard({ part }: { part: RecipePart }) {
+  // `data` is `Recipe` once status === 'complete'. `partial` is
+  // DeepPartial<Recipe> while the model is still streaming the JSON.
+  // Read whichever is freshest — they converge on complete.
+  const recipe = part.data ?? part.partial;
+
+  return (
+    <article>
+      <h3>{recipe?.title ?? "Plating up…"}</h3>
+      {recipe?.cuisine && <p>{recipe?.cuisine}</p>}
+      {recipe?.ingredients?.map((ing, i) => (
+        <li key={i}>
+          {ing?.amount} {ing?.item}
+        </li>
+      ))}
+      {part.status === "error" && (
+        <p>Failed: {part.errorMessage ?? "Stream failed"}</p>
+      )}
+    </article>
+  );
+}
+```
+
+That's it. The render loop above produces a card per assistant turn. When the user sends a follow-up, a new assistant message arrives with its own structured-output part — the old card stays exactly as it was.
+
+> **See the full pattern in code:** the example app at `examples/ts-react-chat/src/routes/generations.structured-chat.tsx` ships a polished version of this exact recipe-builder UI — empty state, streaming placeholder, cuisine-aware hero banner, ingredients grid, numbered method, chef's tips block. Use it as a reference for visual layout; the data wiring matches what's shown above.
+
+## Streaming the latest turn
+
+Every assistant `structured-output` part transitions through `streaming` → `complete` (or `streaming` → `error`). The `data` field only populates on `complete` — while the model is still emitting JSON, only `partial` and `raw` are filled in. Render against `part.data ?? part.partial` and the UI fills in field by field as bytes arrive, then snaps to the validated object on the terminal event.
+
+The hook-level `partial` and `final` are still available. They're derived from the latest assistant message's structured-output part — the same part the render loop above already finds. `partial` returns `{}` between `sendMessage()` and the first chunk (because no assistant message exists yet to derive from), and `final` returns `null` until the latest turn lands its `complete` event. Use them for sticky-summary widgets ("Latest recipe title: …"); use the `messages` walk for the full history view.
+
+## Type-safe access without a named alias
+
+The example above pulls `type RecipePart = StructuredOutputPart<Recipe>` out for readability. If you'd rather not name it, you can narrow inline with `Extract`:
+
+```tsx ignore
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { RecipeSchema, type Recipe } from "./api/structured-chat";
+
+const { messages } = useChat({
+  outputSchema: RecipeSchema,
+  connection: fetchServerSentEvents("/api/structured-chat"),
+});
+
+for (const m of messages) {
+  const recipePart = m.parts.find(
+    (p): p is Extract<typeof p, { type: "structured-output" }> =>
+      p.type === "structured-output",
+  );
+  // `recipePart` is `StructuredOutputPart<Recipe> | undefined`.
+  // `recipePart.data` is `Recipe | undefined`.
+}
+```
+
+Both forms produce the same typed result. Pick whichever you find more readable.
+
+## What about the round-trip?
+
+When turn N+1 fires, the client sends the previous N turns back to the server. Each assistant message's `structured-output` part is serialized as `{ role: "assistant", content: raw }` — the model receives its own prior recipe as the assistant content of the prior turn. Streaming or errored parts are dropped from the round-trip (you don't want to feed an incomplete JSON fragment back to the LLM).
+
+If `raw` is empty (rare — a terminal-only complete event arrived before any deltas, then the runtime couldn't serialize the `data` either), the entire turn is dropped from history rather than shipping an empty assistant turn. This is intentional fail-quiet — better to drop one turn than to confuse the model with a blank assistant message.
+
+> **Combining with tools?** Multi-turn structured chats compose with the agent loop the same way single-turn streams do — each turn runs tools first, then snaps the structured-output part. See [With Tools](/ai/structured-outputs/with-tools) for tool-approval gating and client-tool invocations inside a structured-chat run.
diff --git a/mintlify/ai/structured-outputs/one-shot.md b/mintlify/ai/structured-outputs/one-shot.md
new file mode 100644
index 000000000..32b0df980
--- /dev/null
+++ b/mintlify/ai/structured-outputs/one-shot.md
@@ -0,0 +1,306 @@
+---
+title: One-Shot Extraction
+id: structured-outputs-one-shot
+order: 2
+description: "Extract a single typed object from a prompt with chat({ outputSchema }). Field descriptions, nested schemas, plain JSON Schema, error handling — everything you need for a single round-trip from text in to typed data out."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - one-shot extraction
+  - chat outputSchema
+  - zod
+  - json schema
+  - type inference
+---
+
+You have unstructured input — a paragraph of text, a freeform user prompt, the body of an email — and you want exactly one typed object back. No streaming, no history, no agent loop: one prompt in, one validated object out.
+
+By the end of this guide you'll have a working `chat({ outputSchema })` call returning a fully-typed result, know how to describe fields so the model fills them correctly, and have a pattern for handling validation errors.
+
+> **Note:** If you want to stream the result field-by-field into a UI, you want [Streaming UIs](/ai/structured-outputs/streaming) instead. If you want users to iterate on the object across multiple turns, you want [Multi-Turn Chat](/ai/structured-outputs/multi-turn). This page is for the single-extraction case.
+
+## Basic Usage
+
+Define a schema and pass it as `outputSchema`. The return type follows from the schema — no cast needed.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string().meta({ description: "The person's full name" }),
+  age: z.number().meta({ description: "The person's age in years" }),
+  email: z.string().email().meta({ description: "The person's email address" }),
+});
+
+const person = await chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [
+    {
+      role: "user",
+      content:
+        "Extract the person info: John Doe is 30 years old, email john@example.com",
+    },
+  ],
+  outputSchema: PersonSchema,
+});
+
+person.name;  // string
+person.age;   // number
+person.email; // string
+```
+
+## Type Inference
+
+The return type of `chat()` switches on the combination of `outputSchema` and `stream`:
+
+| Configuration | Return type |
+|---|---|
+| No `outputSchema`, `stream: false` | `Promise<string>` |
+| No `outputSchema`, `stream: true` (default for plain chat) | `AsyncIterable<StreamChunk>` |
+| With `outputSchema` (this page — implicitly non-streaming) | `Promise<InferSchemaType<TSchema>>` |
+| With `outputSchema` and `stream: true` | `StructuredOutputStream<InferSchemaType<TSchema>>` (see [Streaming UIs](/ai/structured-outputs/streaming)) |
+
+The TypeScript type of `person` above is `{ name: string; age: number; email: string }` — derived from `PersonSchema`. No runtime cast, no `as`, no separate type definition.
+
+## Field Descriptions
+
+Field descriptions tell the model what data to extract. They become part of the JSON Schema sent to the provider — the model sees them as hints. In Zod v4.2+ use `.meta()`:
+
+```typescript
+import { z } from "zod";
+
+const ProductSchema = z.object({
+  name: z.string().meta({ description: "The product name" }),
+  price: z.number().meta({ description: "Price in USD" }),
+  inStock: z.boolean().meta({
+    description: "Whether the product is currently available",
+  }),
+  categories: z
+    .array(z.string())
+    .meta({
+      description:
+        "Product categories like 'electronics', 'clothing', etc.",
+    }),
+});
+```
+
+Descriptions earn their keep when:
+- The field name is ambiguous (`price` — in what currency?)
+- The expected unit isn't obvious (`duration` — seconds or minutes?)
+- The schema is being applied to text where the same concept could be phrased many ways
+
+## Complex Nested Schemas
+
+Schemas can nest arbitrarily. The inferred type follows the structure.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+import { z } from "zod";
+
+const CompanySchema = z.object({
+  name: z.string(),
+  founded: z.number().meta({ description: "Year the company was founded" }),
+  headquarters: z.object({
+    city: z.string(),
+    country: z.string(),
+    address: z.string().optional(),
+  }),
+  employees: z.array(
+    z.object({
+      name: z.string(),
+      role: z.string(),
+      department: z.string(),
+    }),
+  ),
+  financials: z
+    .object({
+      revenue: z.number().meta({ description: "Annual revenue in millions USD" }),
+      profitable: z.boolean(),
+    })
+    .optional(),
+});
+
+const company = await chat({
+  adapter: anthropicText("claude-sonnet-4-6"),
+  messages: [{ role: "user", content: "Extract company info from this article: ..." }],
+  outputSchema: CompanySchema,
+});
+
+company.headquarters.city; // string
+company.employees[0]!.role; // string
+company.financials?.profitable; // boolean | undefined
+```
+
+## Using Plain JSON Schema
+
+If you don't want a schema library, pass a JSON Schema object directly. The trade-off: TypeScript can't infer the return type, so the result is `unknown` and you take responsibility for the runtime shape.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import type { JSONSchema } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+
+const schema: JSONSchema = {
+  type: "object",
+  properties: {
+    name: { type: "string", description: "The person's name" },
+    age: { type: "number", description: "The person's age" },
+  },
+  required: ["name", "age"],
+};
+
+const result = await chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Extract: John is 25 years old" }],
+  outputSchema: schema,
+});
+
+// `result` is `unknown` — a raw JSON Schema gives no compile-time type.
+// Validate it (e.g. with a Standard Schema library) before use.
+```
+
+Prefer a schema library when you can — type inference is worth it.
+
+## Error Handling
+
+If the model's response doesn't satisfy your schema, `chat()` throws a validation error. The message includes the failing fields.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { MySchema } from "./schemas";
+
+try {
+  const result = await chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: [{ role: "user", content: "..." }],
+    outputSchema: MySchema,
+  });
+} catch (error) {
+  if (error instanceof Error) {
+    console.error("Structured output failed:", error.message);
+    // The message names which fields failed validation.
+  }
+}
+```
+
+Provider-level errors (auth failure, rate limit, network) throw the same way — wrap the call in `try` / `catch` to handle both.
+
+## Consuming the result on the client
+
+The `await chat({ outputSchema })` call above returns a `Promise<T>` — ideal for a server route, a script, or a CLI. There are two ways that typed object reaches a browser.
+
+### As plain JSON (no hook)
+
+If the client only needs the finished object and you don't want progressive UI, resolve the promise on the server and return it as JSON. The browser fetches it like any other endpoint — no TanStack client API, no `partial` / `final`:
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+});
+
+// server route
+export async function POST(request: Request) {
+  const { text } = await request.json();
+  const person = await chat({
+    adapter: openaiText("gpt-5.5"),
+    messages: [{ role: "user", content: `Extract the person info: ${text}` }],
+    outputSchema: PersonSchema,
+  });
+  return Response.json(person); // typed object → JSON
+}
+```
+
+```typescript
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+});
+
+// client
+const text = "John Doe, 30, john@example.com";
+const res = await fetch("/api/extract-person", {
+  method: "POST",
+  body: JSON.stringify({ text }),
+});
+const person = PersonSchema.parse(await res.json()); // validated + typed
+```
+
+This is the most literal one-shot shape: one request, one object back. You own the fetch and the typing; the hook isn't involved.
+
+### With `useChat` — typed `final` (and optional `partial`)
+
+When you want the hook ergonomics — managed `isLoading` state, a schema-typed result, optional field-by-field fill — read `final` off `useChat({ outputSchema })`. Because `useChat` consumes a stream, the server switches to the streaming shape (`stream: true` + `toServerSentEventsResponse`); the client still treats it as "one object, when it's ready":
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { z } from "zod";
+import { PersonCard } from "./PersonCard";
+
+const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+});
+
+function PersonExtractor() {
+  // `final` is `z.infer<typeof PersonSchema> | null`.
+  // `partial` is `DeepPartial<z.infer<typeof PersonSchema>>`.
+  const { sendMessage, isLoading, final, partial } = useChat({
+    connection: fetchServerSentEvents("/api/extract-person"),
+    outputSchema: PersonSchema,
+  });
+
+  return (
+    <div>
+      <button
+        disabled={isLoading}
+        onClick={() => sendMessage("Extract: John Doe, 30, john@example.com")}
+      >
+        Extract
+      </button>
+
+      {/* One-shot UI: just render the validated object when it lands. */}
+      {final && <PersonCard person={final} />}
+    </div>
+  );
+}
+```
+
+- **`final`** — `T | null`. The validated terminal object, populated when the run completes. For a one-shot UI, render off `final` and you're done.
+- **`partial`** — `DeepPartial<T>`. The same object filling in field by field as the JSON streams. Ignore it if you only care about the finished result; reach for it when you want a progressive form. The [Streaming UIs](/ai/structured-outputs/streaming) guide covers that pattern in depth.
+- **The schema on `useChat`** is for client-side TypeScript inference (and progressive parsing of `partial`). Validation still runs on the server against the schema you pass to `chat({ outputSchema })`.
+
+For non-streaming adapters (Anthropic, Gemini, Ollama), the object arrives as a single event — `partial` stays `{}` and `final` snaps in one step. The consumer code above is identical regardless of adapter.
+
+> Want the result to fill in field-by-field, or to keep a history of objects across turns? Those are the [Streaming UIs](/ai/structured-outputs/streaming) and [Multi-Turn Chat](/ai/structured-outputs/multi-turn) journeys — both build on this same `useChat({ outputSchema })` surface.
+
+## Best Practices
+
+1. **Use descriptive field names and descriptions.** The model uses them as hints.
+2. **Keep schemas focused.** Extract only what you need — smaller schemas produce more reliable results.
+3. **Mark fields optional when they really are.** Don't force the model to invent a value just because the schema demands one.
+4. **Use enums for constrained values.**
+
+   ```typescript
+   import { z } from "zod";
+
+   const schema = z.object({
+     status: z.enum(["pending", "approved", "rejected"]),
+     priority: z.enum(["low", "medium", "high"]),
+   });
+   ```
+
+5. **Test edge cases.** Empty inputs, ambiguous inputs, inputs with extra fields — make sure the schema handles them the way you expect.
diff --git a/mintlify/ai/structured-outputs/overview.md b/mintlify/ai/structured-outputs/overview.md
new file mode 100644
index 000000000..5bb72e96d
--- /dev/null
+++ b/mintlify/ai/structured-outputs/overview.md
@@ -0,0 +1,156 @@
+---
+title: Structured Outputs Overview
+id: structured-outputs-overview
+order: 1
+description: "Constrain TanStack AI responses to a JSON Schema so the model returns typed, predictable objects. Pick the journey that matches what you're building — one-shot extraction, a streaming UI, or a multi-turn structured chat."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - json schema
+  - zod
+  - valibot
+  - standard schema
+  - type-safe llm
+  - outputSchema
+---
+
+Structured outputs constrain model responses to match a JSON Schema you control. You get back a typed object — not a string you have to parse, not a "mostly-JSON" blob you have to guess at, not a regex match. The model either returns something that fits your schema or you get a typed error.
+
+You wire this in once with `outputSchema`. The runtime takes care of the rest: it converts your schema to JSON Schema, hands it to the provider's native structured-output API, validates the response, and infers the TypeScript type from your schema definition.
+
+```typescript
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const Person = z.object({ name: z.string(), age: z.number() });
+
+const person = await chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "John Doe, 30" }],
+  outputSchema: Person,
+});
+
+person.name; // string — fully typed, no cast
+person.age;  // number
+```
+
+## Schema Libraries
+
+TanStack AI accepts any library that implements [Standard JSON Schema](https://standardschema.dev/json-schema):
+
+- [Zod](https://zod.dev/) (v4.2+)
+- [ArkType](https://arktype.io/)
+- [Valibot](https://valibot.dev/) (via `@valibot/to-json-schema`)
+- Plain JSON Schema objects (loses TypeScript type inference — see [One-Shot Extraction](/ai/structured-outputs/one-shot#using-plain-json-schema))
+
+Refer to your schema library's docs for field descriptions, refinements, and enums. TanStack AI converts the schema to JSON Schema automatically.
+
+## Provider Support
+
+Every adapter handles structured output through its provider's native API:
+
+| Provider | Implementation |
+|---|---|
+| OpenAI | `response_format` with `json_schema` |
+| Anthropic | Tool-based extraction |
+| Google Gemini | `responseSchema` |
+| Ollama | JSON mode with schema |
+| OpenRouter / Grok / Groq | `response_format` with `json_schema` |
+
+The provider-specific details are handled for you — the same `chat({ outputSchema })` call works across all of them.
+
+### Anthropic schema complexity limits
+
+Anthropic compiles a structured-output schema into a grammar and rejects schemas it considers too large or too complex with a 400 error — typically `Schema is too complex for compilation` or `output_config.format.schema: Invalid schema: The compiled grammar is too large`. This affects Claude models directly and `anthropic/*` models routed through OpenRouter, even when every other provider accepts the same schema.
+
+If you hit one of these errors, simplify the schema. Complexity is driven less by overall size than by constructs that multiply the grammar's branching — common offenders:
+
+- `.optional()` fields you don't strictly need
+- `.catch()` / `.default()` wrappers (they widen the accepted input)
+- Union types and deeply nested objects
+- Unconstrained optional strings — tighten with enums or formats where possible
+
+Anthropic's exact limits change over time and aren't all published, so we deliberately don't reproduce the numbers here — see Anthropic's [structured outputs documentation](https://docs.claude.com/en/docs/build-with-claude/structured-outputs) for the current limits and reduction strategies.
+
+## Which page do I read?
+
+Pick the journey that matches what you're building. The four guides under "Structured Outputs" cover non-overlapping use cases — read the one that fits, not all of them.
+
+| You want to… | Read |
+|---|---|
+| Extract one structured object from a single prompt — and consume it server-side (script, endpoint, CLI) or in a browser via `final` | [One-Shot Extraction](/ai/structured-outputs/one-shot) |
+| Build a UI that fills in field-by-field as the model streams (progressive form, live card, typewriter preview) | [Streaming UIs](/ai/structured-outputs/streaming) |
+| Let users iterate on a structured object across multiple turns — each turn produces a new typed object and history stays renderable | [Multi-Turn Chat](/ai/structured-outputs/multi-turn) |
+| Combine structured output with tool calls (agent loop that runs tools first, then returns a typed object) | [With Tools](/ai/structured-outputs/with-tools) |
+
+The streaming and multi-turn paths both build on `useChat({ outputSchema })`. The "with tools" path layers on top of either. Pick the one that describes your shipping shape — start there, follow the cross-links when you need a piece of another story.
+
+> **Note:** Server-side validation is **path-dependent**. For the non-streaming agentic path (`await chat({ outputSchema })`), the engine runs Standard Schema validation inside the finalization step and routes failures through `onError` (the awaited promise rejects). For the streaming path (`chat({ outputSchema, stream: true })`), Standard Schema _validation_ is deliberately deferred to the consumer — consumers read the object from the `structured-output.complete` event's `value.object` field (or call `parseWithStandardSchema` themselves on the raw text). The schema you pass to `useChat({ outputSchema })` on the client is used for TypeScript inference and (in `useChat`) for client-side `parsePartialJSON`-based progressive parsing — the typed-object guarantee comes from the server-side path you pick.
+>
+> On **both** paths the engine normalizes the captured object before it reaches you: to satisfy strict providers, optional fields are widened to `required` + nullable, so the provider returns `null` for an absent optional. The engine undoes exactly that widening — an `.optional()` field that came back `null` reads back as **absent** (matching `T | undefined`), while a genuine `.nullable()` field's `null` is **preserved**. So `value.object` (streaming) and the awaited result (non-streaming) both carry the un-widened shape your schema describes.
+
+## Middleware integration
+
+Middleware configured on `chat()` now observes the final structured-output
+provider call in addition to the agent loop. Chunks from the structured-output
+adapter are attributed to `ctx.phase === 'structuredOutput'`; `onFinish` fires
+exactly once at the end of the entire run.
+
+> **Path-dependent:** Adapters that natively combine `tools` + a schema-
+> constrained final answer in one streaming call do **not** issue a separate
+> finalization round-trip. The engine wires `outputSchema` into the regular
+> `chatStream` request and harvests the structured result from the agent
+> loop's final-turn text. On this path the `'structuredOutput'` middleware
+> phase does **not** fire — middleware sees the run through `'beforeModel'`
+> / `'modelStream'` as usual, and `onStructuredOutputConfig` is not invoked.
+>
+> **Native combined providers:**
+> - Modern OpenAI (Chat Completions + Responses)
+> - Anthropic Claude 4.5+
+> - Gemini 3.x
+> - Grok 4.x family
+>
+> **Adapters without native combined-mode support** (Anthropic 4.4-, Gemini
+> 2.x, Grok 2/3, Groq, Ollama, OpenRouter) keep the legacy finalization
+> path and the `'structuredOutput'` phase fires as before.
+
+### Observing structured-output chunks
+
+```ts
+import { chat } from "@tanstack/ai";
+import type { ChatMiddleware } from "@tanstack/ai";
+import { span } from "./span";
+
+const tracing: ChatMiddleware = {
+  name: "tracing",
+  onChunk(ctx, chunk) {
+    // Fires for chunks from the agent loop AND the final structured-output call
+    // chunk.type narrows inside a conditional — use a discriminant check first:
+    if ("type" in chunk) {
+      span.addEvent("chunk", { phase: ctx.phase, type: chunk.type });
+    }
+  },
+};
+```
+
+### Transforming the JSON Schema before the provider call
+
+Use the `onStructuredOutputConfig` hook when you need to mutate the schema:
+
+```ts
+import type { ChatMiddleware } from "@tanstack/ai";
+import { sharedDefs } from "./schema-defs";
+
+const injectDefs: ChatMiddleware = {
+  name: "inject-defs",
+  onStructuredOutputConfig(_ctx, config) {
+    return {
+      outputSchema: { ...config.outputSchema, $defs: { ...sharedDefs } },
+    };
+  },
+};
+```
+
+See [Advanced: Middleware](/ai/advanced/middleware) for the full hook
+reference.
diff --git a/mintlify/ai/structured-outputs/streaming.md b/mintlify/ai/structured-outputs/streaming.md
new file mode 100644
index 000000000..e3fc25c3c
--- /dev/null
+++ b/mintlify/ai/structured-outputs/streaming.md
@@ -0,0 +1,204 @@
+---
+title: Streaming Structured Output UIs
+id: structured-outputs-streaming
+order: 3
+description: "Build a UI that fills in field by field as the model streams structured JSON. chat({ outputSchema, stream: true }) on the server, useChat({ outputSchema }) on the client — progressive partial state plus a validated terminal object."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - streaming
+  - useChat outputSchema
+  - partial
+  - final
+  - DeepPartial
+  - progressive ui
+---
+
+You have an existing chat-style endpoint and you want the structured response to populate a UI _while_ the model is generating — a form filling in field by field, a card whose ingredients list grows as JSON streams in, a typewriter preview of a JSON-typed report. Blocking on `await chat({ outputSchema })` would leave the UI dark until the whole object is ready; this guide is the alternative.
+
+By the end you'll have a server endpoint streaming structured JSON as Server-Sent Events, and a client that reads a typed `partial` (progressive object) and `final` (validated terminal object) from `useChat`.
+
+> **Note:** This is the streaming counterpart of [One-Shot Extraction](/ai/structured-outputs/one-shot). If you don't need progressive UI updates, the one-shot path is simpler. If you want users to iterate on the object across multiple turns and keep history, see [Multi-Turn Chat](/ai/structured-outputs/multi-turn).
+
+## Server endpoint
+
+```typescript
+// app/api/extract-person/route.ts (or your framework's equivalent)
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string().meta({ description: "The person's full name" }),
+  age: z.number().meta({ description: "The person's age in years" }),
+  email: z.string().email(),
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    outputSchema: PersonSchema,
+    stream: true,
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+That's the entire server side. `chat({ outputSchema, stream: true })` returns a `StructuredOutputStream<InferSchemaType<typeof PersonSchema>>` — an `AsyncIterable` of standard streaming events plus a terminal `structured-output.complete` event carrying the validated object. `toServerSentEventsResponse` knows what to do with it.
+
+## Client with `useChat`
+
+Pass the same schema to `useChat`. The hook gives you a progressively-parsed `partial` and a validated `final`:
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+});
+
+function PersonExtractor() {
+  const { sendMessage, isLoading, partial, final } = useChat({
+    connection: fetchServerSentEvents("/api/extract-person"),
+    outputSchema: PersonSchema,
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage("Extract: John Doe, 30, john@example.com");
+      }}
+    >
+      <button disabled={isLoading}>Extract</button>
+      {/* `partial` fills in field by field as JSON streams in. */}
+      <p>Name: {partial.name ?? "…"}</p>
+      <p>Age: {partial.age ?? "…"}</p>
+      <p>Email: {partial.email ?? "…"}</p>
+      {final && <pre>Validated: {JSON.stringify(final, null, 2)}</pre>}
+    </form>
+  );
+}
+```
+
+What the hook does for you:
+
+- **`partial`** is `DeepPartial<z.infer<typeof PersonSchema>>` — every property optional, every nested array element optional. Updated from `TEXT_MESSAGE_CONTENT` deltas via the runtime's partial-JSON parser. The hook derives it from the latest assistant message's `structured-output` part (see [Multi-Turn Chat](/ai/structured-outputs/multi-turn) for why that distinction matters), so it reads `{}` between `sendMessage()` and the first chunk without any extra reset state.
+- **`final`** is `z.infer<typeof PersonSchema> | null` — the validated terminal payload from the `structured-output.complete` event. `null` until the run completes successfully.
+- **`outputSchema`** is used purely for client-side TypeScript inference. Validation still runs on the server against the schema you pass to `chat({ outputSchema })` on the server route — the client doesn't re-validate.
+- The same shape works for **non-streaming adapters too**. If an adapter (Anthropic, Gemini, Ollama) returns a single `structured-output.complete` event with no incremental deltas, `partial` stays `{}` and `final` populates when the event arrives. Same consumer code.
+
+`outputSchema` is optional: omit it and `useChat` returns its standard shape without `partial` / `final`.
+
+## Rendering reasoning and tool calls
+
+`partial` / `final` cover the structured payload. Reasoning tokens and tool calls land where they would in any other chat — on `messages[…].parts`:
+
+| Chunk type | Where it lands on `messages[i].parts` |
+|---|---|
+| `REASONING_MESSAGE_CONTENT` | `ThinkingPart` on the assistant message |
+| `TOOL_CALL_START` / `_ARGS` / `_END` | `ToolCallPart` on the assistant message |
+| `TOOL_CALL_RESULT` | `ToolResultPart` on the tool message |
+| `TEXT_MESSAGE_CONTENT` (with `outputSchema` set) | `StructuredOutputPart` on the assistant message — the JSON deltas accumulate into `part.raw` and the progressive parse populates `part.partial` |
+| `TEXT_MESSAGE_CONTENT` (no `outputSchema`) | `TextPart` on the assistant message |
+
+So render reasoning and tool calls the same way you'd render them in a normal chat UI:
+
+```tsx ignore
+const last = messages.at(-1);
+
+return (
+  <>
+    {last?.parts.map((part, i) => {
+      if (part.type === "thinking") return <ReasoningView key={i} text={part.content} />;
+      if (part.type === "tool-call") return <ToolCallView key={i} part={part} />;
+      // The structured-output part is rendered separately via the
+      // `partial` / `final` sugar below — no need to walk it here.
+      return null;
+    })}
+
+    <StructuredView data={final ?? partial} />
+  </>
+);
+```
+
+> **Migration note:** Earlier versions of TanStack AI routed structured JSON deltas through a `TextPart` and required you to filter that part out of your renderer. That hack is gone — `TEXT_MESSAGE_CONTENT` on a structured-output run now routes into a dedicated `StructuredOutputPart` (with `raw`, `partial`, `data`, `status`, optional `errorMessage`). If your render loop still has an explicit `if (part.type === "text") return null;` line specifically for hiding structured JSON, you can remove it.
+
+> **Going lower-level?** `useChat` still exposes `onChunk` if you want to observe individual chunks alongside the managed `partial` / `final` state (e.g. to drive a custom progress UI). Internal partial/final tracking runs first, then your `onChunk` callback fires with the same chunk — the two paths compose.
+
+`useChat` (React, Vue, Solid) and `createChat` (Svelte) all accept the same `outputSchema` option and expose `partial` / `final` with the same semantics — only the reactivity primitive differs (React state, Vue `shallowRef`, Solid `Accessor`, Svelte reactive getter). See your framework's quick-start for the local idioms.
+
+## What the stream contains
+
+`chat({ outputSchema, stream: true })` returns a `StructuredOutputStream<T>` — the standard `StreamChunk` lifecycle plus a terminal `CUSTOM` event named `structured-output.complete`:
+
+```typescript ignore
+{
+  type: "CUSTOM",
+  name: "structured-output.complete",
+  value: {
+    object: T;          // validated, parsed, typed
+    raw: string;        // full accumulated JSON text
+    reasoning?: string; // present only for thinking/reasoning models
+  },
+  // ...standard event fields (timestamp, model, …)
+}
+```
+
+A `structured-output.start` event fires once at the beginning of the run carrying `{ messageId }`. Its job is to tell the client "the next batch of `TEXT_MESSAGE_CONTENT` deltas belongs to the assistant message with this id — route them into a `StructuredOutputPart` instead of building a free-form `TextPart`." The runtime also attaches the same `messageId` to the terminal `structured-output.complete` event's `value` so the client snaps the right assistant message's part on the way out — that extra field isn't on the public `StructuredOutputCompleteEvent<T>` shape (since consumer code typically doesn't need it; the start event already carries it), but you can read it off `value` at runtime if you need to.
+
+## Adapter coverage
+
+Streaming structured output works with **every adapter**, but only some support a true single-request streaming wire format:
+
+| Adapter | Behavior with `outputSchema` + `stream: true` |
+|---|---|
+| `@tanstack/ai-openai` | Native single-request stream (Responses API, `text.format: json_schema`) |
+| `@tanstack/ai-openrouter` | Native single-request stream (`response_format: json_schema`) |
+| `@tanstack/ai-grok` | Native single-request stream (Chat Completions, `response_format: json_schema`) |
+| `@tanstack/ai-groq` | Native single-request stream (Chat Completions, `response_format: json_schema`) |
+| Other adapters (anthropic, gemini, ollama, …) | Fallback: runs non-streaming `structuredOutput` and emits the final object as one `structured-output.complete` event |
+
+The fallback path keeps the consumer code identical across providers — you always read the final object off `structured-output.complete` — but you won't see incremental deltas unless the adapter implements `structuredOutputStream` natively.
+
+## Advanced: iterating the stream directly
+
+When you don't need the SSE-over-HTTP boundary — Node scripts, CLIs, server endpoints that respond with a final JSON object instead of a stream, or tests — consume `chat({ outputSchema, stream: true })` as a plain async iterable:
+
+```typescript ignore
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+});
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Extract: John Doe is 30, john@example.com" }],
+  outputSchema: PersonSchema,
+  stream: true,
+});
+
+for await (const chunk of stream) {
+  if (chunk.type === "CUSTOM" && chunk.name === "structured-output.complete") {
+    // Validated and typed against PersonSchema.
+    console.log(chunk.value.object.name);
+    console.log(chunk.value.object.age);
+  }
+}
+```
+
+This is the same `StructuredOutputStream<T>` the server endpoint above hands to `toServerSentEventsResponse`. Pick this shape when you're a single process end-to-end; use the server-endpoint-plus-`useChat` shape when there's a network in the middle.
+
+> **Combining with tools?** When `outputSchema`, `stream: true`, and `tools` are all set, the agent loop runs first and the structured stream emits its terminal event only after every tool completes. Tool-approval gates and client-tool invocations work the same as in a normal chat — see [With Tools](/ai/structured-outputs/with-tools) for the full pause/resume pattern.
diff --git a/mintlify/ai/structured-outputs/with-tools.md b/mintlify/ai/structured-outputs/with-tools.md
new file mode 100644
index 000000000..74f35cc1c
--- /dev/null
+++ b/mintlify/ai/structured-outputs/with-tools.md
@@ -0,0 +1,170 @@
+---
+title: Structured Outputs With Tools
+id: structured-outputs-with-tools
+order: 5
+description: "Combine outputSchema with tools so the agent loop runs first (calling tools as needed) and then returns a validated typed object. Includes the pause / resume flow for tool-approval gates and client-tool invocations inside a structured run."
+keywords:
+  - tanstack ai
+  - structured outputs
+  - tools
+  - agent loop
+  - tool approval
+  - client tools
+  - outputSchema tools
+---
+
+You want the agent to use tools to gather information, then return a structured object summarizing what it found. "Recommend a product for a developer" → the loop calls `getProductPrice`, hits an inventory API, then returns `{ productName, currentPrice, reason }` validated against your schema. The structured response only fires after every tool resolves.
+
+This page covers the combined `outputSchema` + `tools` shape, including the pause/resume points (server-tool approval prompts, client-tool invocations) that can land mid-run before the structured object arrives.
+
+> **Note:** If you're not yet familiar with how tools work in TanStack AI, read [Tool Architecture](/ai/tools/tool-architecture) and [Server Tools](/ai/tools/server-tools) first. The patterns here build on the regular agent-loop flow — `outputSchema` just adds a final terminal event.
+
+## Non-streaming: tools first, then structured object
+
+The simplest shape: `await chat({ tools, outputSchema })`. The agent loop runs to completion (every tool resolved, every approval responded to), then the model produces the structured object. The promise resolves with the validated, typed result.
+
+```typescript
+import { chat, toolDefinition } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const getProductPrice = toolDefinition({
+  name: "get_product_price",
+  description: "Get the current price of a product",
+  inputSchema: z.object({ productId: z.string() }),
+}).server(async ({ productId }) => {
+  return { price: 29.99, currency: "USD" };
+});
+
+const RecommendationSchema = z.object({
+  productName: z.string(),
+  currentPrice: z.number(),
+  reason: z.string(),
+});
+
+const recommendation = await chat({
+  adapter: openaiText("gpt-5.5"),
+  messages: [{ role: "user", content: "Recommend a product for a developer" }],
+  tools: [getProductPrice],
+  outputSchema: RecommendationSchema,
+});
+
+recommendation.productName;  // string — fully typed
+recommendation.currentPrice; // number
+recommendation.reason;       // string
+```
+
+The agent decides when to call `get_product_price`, executes the tool, integrates the result into its reasoning, and only then produces the final structured response. You see the validated object; the tool calls happen behind the scenes.
+
+## Streaming: lifecycle events before the structured payload
+
+Pass `stream: true` and the wire format changes — the client now sees tool-call events as they happen, _then_ the structured-output stream emits its terminal event. The lifecycle ordering is:
+
+1. `RUN_STARTED`
+2. (Agent loop) `TOOL_CALL_START` → `TOOL_CALL_ARGS` → `TOOL_CALL_END` → `TOOL_CALL_RESULT`, possibly repeating for multiple tool calls or iterations
+3. `structured-output.start` (once the model begins emitting the JSON response)
+4. `TEXT_MESSAGE_CONTENT` deltas (the JSON itself)
+5. `structured-output.complete` (validated payload)
+6. `RUN_FINISHED`
+
+`useChat`'s `partial` stays `{}` and `final` stays `null` while step 2 is running — the structured stream hasn't started yet. Once step 3 fires, `partial` begins filling in; on step 5, `final` snaps.
+
+The tool-call parts land on the assistant message exactly as they would in a normal streaming chat. Render them however you'd render tool calls outside a structured-output run.
+
+## Server tools that need approval
+
+A server tool registered with `needsApproval: true` doesn't execute automatically — the agent loop pauses, the queued tool-call lands on the assistant message as a `ToolCallPart` with `state === "approval-requested"`, and the loop waits for you to call `addToolApprovalResponse({ id, approved })` from the hook return. The structured-output stream only takes over once approval is granted (or denied and the loop resumes).
+
+```tsx ignore
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { RecommendationSchema } from "./api/recommend";
+import { sendEmail } from "./tools";
+
+const { messages, sendMessage, partial, final, addToolApprovalResponse } =
+  useChat({
+    connection: fetchServerSentEvents("/api/recommend"),
+    outputSchema: RecommendationSchema,
+    tools: [sendEmail], // server tool with needsApproval: true
+  });
+
+const last = messages.at(-1);
+
+return (
+  <>
+    {last?.parts.map((part, i) => {
+      // Surface approval prompts inline.
+      if (
+        part.type === "tool-call" &&
+        part.state === "approval-requested" &&
+        part.approval
+      ) {
+        return (
+          <ApprovalPrompt
+            key={i}
+            part={part}
+            onApprove={() =>
+              addToolApprovalResponse({ id: part.approval!.id, approved: true })
+            }
+            onDeny={() =>
+              addToolApprovalResponse({ id: part.approval!.id, approved: false })
+            }
+          />
+        );
+      }
+      if (part.type === "thinking") return <ReasoningView key={i} text={part.content} />;
+      if (part.type === "tool-call") return <ToolCallView key={i} part={part} />;
+      return null;
+    })}
+
+    {/* The structured payload — fills in once tools resolve. */}
+    <StructuredView data={final ?? partial} />
+  </>
+);
+```
+
+While the approval is pending, `partial` stays at its last value (which is `{}` on a first run) and `final` stays `null`. As soon as the user approves (or denies and the loop continues), the agent loop resumes, the structured stream runs, and `partial` / `final` populate.
+
+The full server-tool approval pattern lives in [Tool Approval Flow](/ai/tools/tool-approval). The only structured-output-specific note: the approval can land **before** the structured stream starts. That's why `partial` reads `{}` while you're staring at an approval prompt — there's no JSON yet.
+
+## Client tools mid-run
+
+Client tools — defined with `.client((input) => ...)` on the tool definition — execute automatically when the model calls them. The runtime sees the queued `tool-input-available` custom event, looks up the registered `.client()` implementation, runs it, and posts the result back. The agent loop continues to the structured-output stream once every client tool resolves. There's no `onToolCall` option to wire up on the hook side.
+
+```tsx
+import { toolDefinition } from "@tanstack/ai";
+import { clientTools } from "@tanstack/ai-client";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { z } from "zod";
+import { runLookupOnClient } from "./client-utils";
+import { RecommendationSchema } from "./api/recommend";
+
+const lookupContactDef = toolDefinition({
+  name: "lookup_contact",
+  description: "Find a contact by name",
+  inputSchema: z.object({ name: z.string() }),
+  outputSchema: z.object({ email: z.string(), phone: z.string() }),
+});
+
+// `.client()` registers the browser-side implementation. Calls land here
+// automatically when the model invokes the tool.
+const lookupContact = lookupContactDef.client((input) => {
+  // Look up in local state, IndexedDB, an in-process address book, etc.
+  return runLookupOnClient(input);
+});
+
+const { messages, sendMessage, partial, final } = useChat({
+  outputSchema: RecommendationSchema,
+  tools: clientTools(lookupContact),
+  connection: fetchServerSentEvents("/api/recommend"),
+});
+```
+
+While the client tool runs, the agent loop is paused and the structured-output stream hasn't started — `partial` stays `{}` and `final` stays `null`. As soon as the `.client()` implementation returns, the loop resumes, the structured stream takes over, and `partial` / `final` populate.
+
+See [Client Tools](/ai/tools/client-tools) for the full pattern (typed inputs / outputs, multiple client tools, mixing with server tools, surfacing tool calls in the message renderer).
+
+## Multi-turn + tools + structured output
+
+Composes naturally. Every turn runs the agent loop (with any tool gates), then snaps a structured-output part on that turn's assistant message. The next turn sees the prior recipe (or recommendation, or report) as assistant content and can iterate on it.
+
+The only thing to be careful of: between `sendMessage()` and the first structured-output event, the latest turn has no `structured-output` part yet — your render loop's `m.parts.find(p => p.type === "structured-output")` returns `undefined`. Render a "streaming…" placeholder when `isLoading && messages[last]?.role === "user"` to cover that gap. See [Multi-Turn Chat](/ai/structured-outputs/multi-turn) for the full pattern.
diff --git a/mintlify/ai/tools/client-tools.md b/mintlify/ai/tools/client-tools.md
new file mode 100644
index 000000000..5b257bc5a
--- /dev/null
+++ b/mintlify/ai/tools/client-tools.md
@@ -0,0 +1,405 @@
+---
+title: Client Tools
+id: client-tools
+order: 4
+description: "Client tools in TanStack AI run in the browser for UI updates, localStorage, and browser API access with automatic execution."
+keywords:
+  - tanstack ai
+  - client tools
+  - browser tools
+  - ui tools
+  - automatic execution
+  - clientTools
+  - localStorage
+---
+
+Client tools execute in the browser, enabling UI updates, local storage access, and browser API interactions. Unlike server tools, client tools don't have an `execute` function in their server definition.
+
+```mermaid
+sequenceDiagram
+    participant LLM Service
+    participant Server
+    participant Browser
+    participant ClientTool
+    
+    LLM Service->>Server: tool_call chunk<br/>{name: "updateUI", args: {...}}
+    Server->>Server: Check if tool has<br/>server execute
+    
+    Note over Server: No execute function<br/>= client tool
+    
+    Server->>Browser: Forward tool-input-available<br/>chunk via SSE/HTTP
+    Browser->>Browser: Find registered<br/>client tool
+    Browser->>ClientTool: execute(args)
+    ClientTool->>ClientTool: Update UI,<br/>localStorage, etc.
+    ClientTool-->>Browser: Return result
+    Browser->>Server: POST tool result
+    Server->>LLM Service: Add tool_result<br/>to conversation
+    
+    Note over LLM Service: Model uses result<br/>to continue
+    
+    LLM Service-->>Server: Stream response
+    Server-->>Browser: Forward chunks
+```
+
+## When to Use Client Tools
+
+- **UI Updates**: Show notifications, update forms, toggle visibility
+- **Local Storage**: Save user preferences, cache data
+- **Browser APIs**: Access geolocation, camera, clipboard
+- **State Management**: Update React/Vue/Solid state
+- **Navigation**: Change routes, scroll to sections
+
+## How It Works
+
+1. **Tool Call from LLM**: LLM decides to call a client tool
+2. **Server Detection**: Server sees the tool has no `execute` function
+3. **Client Notification**: Server sends a `tool-input-available` chunk to the browser
+4. **Client Execution**: The browser finds the registered `.client()` implementation by tool name and runs it with the parsed input
+5. **Result Return**: Client executes the tool and returns the result
+6. **Server Update**: Result is sent back to the server and added to the conversation
+7. **LLM Continuation**: LLM receives the result and continues the conversation
+
+## Defining Client Tools
+
+Client tools use the same `toolDefinition()` API but with the `.client()` method:
+
+```typescript
+// tools/definitions.ts - Shared between server and client
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+export const updateUIDef = toolDefinition({
+  name: "update_ui",
+  description: "Update the UI with new information",
+  inputSchema: z.object({
+    message: z.string().meta({ description: "Message to display" }),
+    type: z.enum(["success", "error", "info"]).meta({ description: "Message type" }),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+  }),
+});
+
+export const saveToLocalStorageDef = toolDefinition({
+  name: "save_to_local_storage",
+  description: "Save data to browser local storage",
+  inputSchema: z.object({
+    key: z.string().meta({ description: "Storage key" }),
+    value: z.string().meta({ description: "Value to store" }),
+  }),
+  outputSchema: z.object({
+    saved: z.boolean(),
+  }),
+});
+```
+
+## Using Client Tools
+
+### Server-Side
+
+To give the LLM access to client tools, pass the tool definitions (not implementations) to the server when creating the chat:
+
+```typescript
+// api/chat/route.ts
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { updateUIDef, saveToLocalStorageDef } from "./tools/definitions";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [updateUIDef, saveToLocalStorageDef], // Pass definitions
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### Client-Side
+
+Create client implementations with automatic execution and full type safety:
+
+```tsx
+// app/chat.tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages,
+  type ToolCallPart,
+  type MessagePart,
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const updateUIDef = toolDefinition({
+  name: "update_ui",
+  description: "Update the UI with new information",
+  inputSchema: z.object({
+    message: z.string().meta({ description: "Message to display" }),
+    type: z.enum(["success", "error", "info"]).meta({ description: "Message type" }),
+  }),
+  outputSchema: z.object({ success: z.boolean() }),
+});
+
+const saveToLocalStorageDef = toolDefinition({
+  name: "save_to_local_storage",
+  description: "Save data to browser local storage",
+  inputSchema: z.object({
+    key: z.string().meta({ description: "Storage key" }),
+    value: z.string().meta({ description: "Value to store" }),
+  }),
+  outputSchema: z.object({ saved: z.boolean() }),
+});
+
+// Step 1: Create client implementations (module scope)
+const updateUI = updateUIDef.client((input) => {
+  // Update UI state - fully typed!
+  console.log(input.message, input.type);
+  return { success: true };
+});
+
+const saveToLocalStorage = saveToLocalStorageDef.client((input) => {
+  localStorage.setItem(input.key, input.value);
+  return { saved: true };
+});
+
+// Step 2: Create typed tools array (no 'as const' needed!)
+const tools = clientTools(updateUI, saveToLocalStorage);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+// Step 3: Infer message types for full type safety
+type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+function ChatComponent() {
+  const { messages, sendMessage, isLoading } = useChat(chatOptions);
+
+  // Step 4: Render with full type safety
+  return (
+    <div>
+      {messages.map((message) => (
+        <MessageComponent key={message.id} message={message} />
+      ))}
+    </div>
+  );
+}
+
+// Messages component with full type safety
+function MessageComponent({ message }: { message: ChatMessages[number] }) {
+  return (
+    <div>
+      {message.parts.map((part: MessagePart) => {
+        if (part.type === "text") {
+          return <p>{part.content}</p>;
+        }
+        
+        if (part.type === "tool-call") {
+          // ✅ part.name is narrowed to specific tool names
+          if (part.name === "update_ui") {
+            // ✅ part.input is typed as { message: string, type: "success" | "error" | "info" }
+            // ✅ part.output is typed as { success: boolean } | undefined
+            return (
+              <div>
+                Tool: {part.name}
+                {part.output && <span>✓ Success</span>}
+              </div>
+            );
+          }
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+```
+
+## Automatic Execution
+
+Client tools are **automatically executed** when the model calls them. The flow is:
+
+1. LLM calls a client tool
+2. Server sends `tool-input-available` chunk to browser
+3. Client automatically executes the matching tool implementation
+4. Result is sent back to server
+5. Conversation continues with the result
+
+## Client Runtime Context
+
+Client tools can receive typed runtime context as their second argument. This context is local to the `ChatClient` or framework hook instance and is not serialized to the server.
+
+```typescript
+import { createChatClientOptions, clientTools } from "@tanstack/ai-client";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { toolDefinition } from "@tanstack/ai";
+import { toast } from "./toast";
+
+const activeProjectId = "";
+
+type ClientContext = {
+  activeProjectId: string;
+  toast(message: string): void;
+};
+
+const showToast = toolDefinition({
+  name: "show_toast",
+  description: "Show a browser notification",
+}).client<ClientContext>((_input, ctx) => {
+  ctx.context.toast(`Project ${ctx.context.activeProjectId} updated`);
+  return { ok: true };
+});
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(showToast),
+  context: {
+    activeProjectId,
+    toast: (message) => toast(message),
+  },
+});
+
+const chat = useChat(chatOptions);
+```
+
+Use `context` for local browser dependencies. If the server also needs a value from the client, send it with `forwardedProps`, validate it in your route, and map it into server `chat({ context })` explicitly. See [Runtime Context](/ai/advanced/runtime-context) for the full pattern.
+
+## Type Safety Benefits
+
+The isomorphic architecture provides complete end-to-end type safety:
+
+```typescript
+import type { UIMessage } from "@tanstack/ai-client";
+
+const messages: UIMessage[] = [];
+
+messages.forEach((message) => {
+  message.parts.forEach((part) => {
+    if (part.type === "tool-call" && part.name === "update_ui") {
+      // ✅ TypeScript knows part.name is literally "update_ui"
+      // ✅ part.input is typed as { message: string, type: "success" | "error" | "info" }
+      // ✅ part.output is typed as { success: boolean } | undefined
+      
+      console.log(part.input.message); // ✅ Fully typed!
+      
+      if (part.output) {
+        console.log(part.output.success); // ✅ Fully typed!
+      }
+    }
+  });
+});
+```
+
+## Tool States
+
+A `tool-call` part moves through a small set of observable `ToolCallState` values you can surface in the UI to indicate progress:
+
+- `awaiting-input` — the model intends to call the tool but arguments haven't arrived yet.
+- `input-streaming` — the model is streaming the tool arguments (partial input may be available).
+- `input-complete` — all arguments have been received and the tool can run.
+- `approval-requested` — the tool is waiting for user approval before it can run.
+- `approval-responded` — the user has approved or denied the tool call.
+
+The `ToolCallState` union includes a `complete` value, but the runtime never transitions a tool-call part to it — a finished call settles at `input-complete`. Once the tool runs, the result appears two ways: `part.output` becomes populated on the tool-call part, and a sibling `tool-result` part is emitted whose own `state` is `complete` or `error` (the `error` case carries `part.error`). Use the tool-call states for loading/streaming progress and the tool-result part for final success/error feedback.
+
+```tsx
+import type { ToolCallPart } from "@tanstack/ai-client";
+
+function ToolCallDisplay({ part }: { part: ToolCallPart }) {
+  if (part.state === "awaiting-input") {
+    return <div>🔄 Waiting for arguments...</div>;
+  }
+  
+  if (part.state === "input-streaming") {
+    return <div>📥 Receiving arguments...</div>;
+  }
+  
+  if (part.state === "input-complete") {
+    return <div>✓ Arguments received, running tool...</div>;
+  }
+
+  // Completion shows up as a populated `part.output` (and as a sibling
+  // `tool-result` part whose state is `complete` / `error`).
+  if (part.output) {
+    return <div>✅ Tool complete</div>;
+  }
+  
+  return null;
+}
+```
+
+## Hybrid Tools
+
+Tools can be implemented for both server and client, enabling flexible execution:
+
+```typescript
+import { toolDefinition, chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { db } from "./db";
+
+// Define once
+const addToCartDef = toolDefinition({
+  name: "add_to_cart",
+  description: "Add item to shopping cart",
+  inputSchema: z.object({
+    itemId: z.string(),
+    quantity: z.number(),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    cartId: z.string(),
+  }),
+});
+
+// Server implementation - Store in database
+const addToCartServer = addToCartDef.server(async (input) => {
+  const cart = await db.carts.create({
+    data: { itemId: input.itemId, quantity: input.quantity },
+  });
+  return { success: true, cartId: cart.id };
+});
+
+// Client implementation - Update local wishlist
+const addToCartClient = addToCartDef.client((input) => {
+  const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+  wishlist.push(input.itemId);
+  localStorage.setItem("wishlist", JSON.stringify(wishlist));
+  return { success: true, cartId: "local" };
+});
+
+// Server: Pass definition for client execution
+chat({ adapter: openaiText('gpt-5.5'), messages: [], tools: [addToCartDef] }); // Client will execute
+
+// Or pass server implementation for server execution
+chat({ adapter: openaiText('gpt-5.5'), messages: [], tools: [addToCartServer] }); // Server will execute
+```
+
+## Best Practices
+
+- **Keep client tools simple** - Since client tools run in the browser, avoid heavy computations or large dependencies that could bloat your bundle size.
+- **Handle errors gracefully** - Define clear error handling in your tool implementations and return meaningful error messages in your output schema.
+- **Update UI reactively** - Use your framework's state management (eg. React/Vue/Solid) to update the UI in response to tool executions.
+- **Secure sensitive data** - Never store sensitive data (like API keys or personal info) in local storage or expose it via client tools.
+- **Provide feedback** - Use tool states to inform users about ongoing operations and results of client tool executions (loading spinners, success messages, error alerts).
+- **Type everything** - Leverage TypeScript and Zod schemas for full type safety from tool definitions to implementations to usage.
+
+## Common Use Cases
+
+- **UI Updates** - Show notifications, update forms, toggle visibility
+- **Local Storage** - Save user preferences, cache data
+- **Browser APIs** - Access geolocation, camera, clipboard
+- **State Management** - Update React/Vue/Solid state
+- **Navigation** - Change routes, scroll to sections
+- **Analytics** - Track user interactions
+
+## Next Steps
+
+- [How Tools Work](/ai/tools/tool-architecture) - Deep dive into the tool architecture
+- [Server Tools](/ai/tools/server-tools) - Learn about server-side tool execution
+- [Tool Approval Flow](/ai/tools/tool-approval) - Add approval workflows for sensitive operations
diff --git a/mintlify/ai/tools/lazy-tool-discovery.md b/mintlify/ai/tools/lazy-tool-discovery.md
new file mode 100644
index 000000000..32103ed5e
--- /dev/null
+++ b/mintlify/ai/tools/lazy-tool-discovery.md
@@ -0,0 +1,278 @@
+---
+title: Lazy Tool Discovery
+id: lazy-tool-discovery
+order: 6
+description: "Reduce token cost in tool-heavy TanStack AI apps with lazy tool discovery — the LLM discovers only the tools it needs for the current task."
+keywords:
+  - tanstack ai
+  - lazy tools
+  - tool discovery
+  - token optimization
+  - context optimization
+  - performance
+  - large tool sets
+---
+
+When an application has many tools, sending all tool definitions to the LLM on every request wastes tokens and can degrade response quality. Lazy tool discovery lets the LLM selectively discover only the tools it needs for the current task.
+
+## How It Works
+
+Tools marked with `lazy: true` are **not** sent to the LLM upfront. Instead, a synthetic `__lazy__tool__discovery__` tool is created whose description lists all available lazy tool names. The LLM can call this discovery tool with the names of tools it wants to learn about, and receives their full descriptions and argument schemas in return.
+
+Once discovered, lazy tools are dynamically injected as normal tools — the LLM calls them directly like any other tool.
+
+```mermaid
+sequenceDiagram
+    participant LLM
+    participant Server
+    participant Discovery Tool
+    participant Lazy Tool
+
+    Note over LLM: Sees __lazy__tool__discovery__<br/>with available tool names
+
+    LLM->>Server: Call __lazy__tool__discovery__<br/>{toolNames: ["searchProducts"]}
+    Server->>Discovery Tool: Execute discovery
+    Discovery Tool-->>Server: Return description + schema
+    Server-->>LLM: Tool result with schema
+
+    Note over LLM: searchProducts now available<br/>as a normal tool
+
+    LLM->>Server: Call searchProducts<br/>{query: "red shoes"}
+    Server->>Lazy Tool: Execute searchProducts
+    Lazy Tool-->>Server: Return results
+    Server-->>LLM: Tool result
+```
+
+## Marking Tools as Lazy
+
+Add `lazy: true` to any tool definition:
+
+```typescript group=lazy-intro
+import { toolDefinition, chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { db } from "./db";
+import { getProducts, compareProducts } from "./tools";
+
+const searchProductsDef = toolDefinition({
+  name: "searchProducts",
+  description: "Search products by keyword in name or description",
+  inputSchema: z.object({
+    query: z.string().describe("Search keyword or phrase"),
+  }),
+  outputSchema: z.object({
+    results: z.array(
+      z.object({
+        id: z.number(),
+        name: z.string(),
+        price: z.number(),
+      })
+    ),
+  }),
+  lazy: true, // This tool won't be sent to the LLM upfront
+});
+
+const searchProducts = searchProductsDef.server(async ({ query }) => {
+  const results = await db.products.search(query);
+  return { results };
+});
+```
+
+Then pass it to `chat()` alongside your other tools:
+
+```typescript group=lazy-intro
+async function handleRequest(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [
+      getProducts, // Normal tool — sent to LLM immediately
+      searchProducts, // Lazy tool — discovered on demand
+      compareProducts, // Lazy tool — discovered on demand
+    ],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Controlling the Discovery Catalog
+
+By default, the `__lazy__tool__discovery__` tool's description lists only the
+**names** of available lazy tools. The optional `lazyToolsConfig` on `chat()`
+controls how much of each lazy tool's description appears in that pre-discovery
+catalog:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { getProducts, searchProducts, compareProducts } from "./tools";
+
+async function handleRequest(request: Request) {
+  const { messages } = await request.json();
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getProducts, searchProducts, compareProducts],
+    lazyToolsConfig: {
+      // 'none' (default) | 'first-sentence' | 'full'
+      includeDescription: "first-sentence",
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+| `includeDescription` | Catalog entry for `searchProducts`              |
+| -------------------- | ----------------------------------------------- |
+| `'none'` (default)   | `searchProducts`                                |
+| `'first-sentence'`   | `searchProducts — Search products by keyword.`  |
+| `'full'`             | `searchProducts — <full description>`           |
+
+This only affects the **pre-discovery** catalog. Regardless of the setting, the
+discovery tool's result always returns each tool's full description and argument
+schema — `includeDescription` just tunes how much the LLM sees before it
+decides what to discover. The default `'none'` keeps the catalog as lean as
+possible.
+
+`lazyToolsConfig` is optional and the same option is accepted by Code Mode's
+`createCodeMode()` — see [Code Mode Lazy Tools](/ai/code-mode/lazy-tools).
+
+## When to Use Lazy Tools
+
+Lazy tools are useful when:
+
+- **You have many tools** and want to reduce token usage per request
+- **Some tools are rarely needed** — secondary features like comparison, financing, or advanced search
+- **Tool descriptions are large** — lazy tools keep the initial prompt lean
+
+Tools that are called in most conversations should remain eager (the default).
+
+## Discovery Flow
+
+1. The LLM sees `__lazy__tool__discovery__` with a list of available tool names in its description
+2. Based on the user's request, the LLM decides which tools it needs and calls the discovery tool
+3. The discovery tool returns the full description and JSON Schema for each requested tool
+4. The discovered tools are injected as normal tools for the next iteration
+5. The LLM calls the discovered tools directly
+
+The LLM can discover one or many tools in a single call:
+
+```
+// LLM calls:
+__lazy__tool__discovery__({ toolNames: ["searchProducts", "compareProducts"] })
+```
+
+## Multi-Turn Conversations
+
+Lazy tool discovery works across multiple turns. When a tool is discovered in one turn, it remains available in subsequent turns within the same conversation — the LLM does not need to re-discover it.
+
+This is handled automatically by scanning the message history for previous discovery tool results on each `chat()` call.
+
+## Self-Correction
+
+If the LLM tries to call a lazy tool that hasn't been discovered yet, it receives an error message:
+
+```
+Error: Tool 'searchProducts' must be discovered first.
+Call __lazy__tool__discovery__ with toolNames: ['searchProducts'] to discover it.
+```
+
+The LLM then self-corrects by calling the discovery tool first, then retrying the original tool call.
+
+## Zero Overhead
+
+If none of your tools have `lazy: true`, no discovery tool is created and the behavior is identical to the default. There is no performance or token cost when lazy discovery is not in use.
+
+When all lazy tools have been discovered, the discovery tool is automatically removed from the active tool set.
+
+## Example
+
+Here's a complete example with a mix of eager and lazy tools:
+
+```typescript
+import { toolDefinition, chat, toServerSentEventsResponse, maxIterations } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { db } from "./db";
+
+// Eager tool — always available
+const getProductsDef = toolDefinition({
+  name: "getProducts",
+  description: "Get all products from the catalog",
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      price: z.number(),
+    })
+  ),
+});
+
+const getProducts = getProductsDef.server(async () => {
+  return await db.products.findMany();
+});
+
+// Lazy tool — discovered on demand
+const compareProductsDef = toolDefinition({
+  name: "compareProducts",
+  description: "Compare two or more products side by side",
+  inputSchema: z.object({
+    productIds: z.array(z.number()).min(2),
+  }),
+  lazy: true,
+});
+
+const compareProducts = compareProductsDef.server(async ({ productIds }) => {
+  const products = await db.products.findMany({
+    where: { id: { in: productIds } },
+  });
+  return { products };
+});
+
+// Lazy tool — discovered on demand
+const calculateFinancingDef = toolDefinition({
+  name: "calculateFinancing",
+  description: "Calculate monthly payment plans for a product",
+  inputSchema: z.object({
+    productId: z.number(),
+    months: z.number(),
+  }),
+  lazy: true,
+});
+
+const calculateFinancing = calculateFinancingDef.server(async ({ productId, months }) => {
+  const product = await db.products.findUnique({ where: { id: productId } });
+  const monthlyPayment = product.price / months;
+  return { monthlyPayment, totalPrice: product.price, months };
+});
+
+// Use in chat
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getProducts, compareProducts, calculateFinancing],
+    agentLoopStrategy: maxIterations(20),
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+With this setup:
+- The LLM always sees `getProducts` and `__lazy__tool__discovery__`
+- When a user asks to compare products, the LLM discovers `compareProducts` first, then calls it
+- When a user asks about financing, the LLM discovers `calculateFinancing` first, then calls it
+
+## Next Steps
+
+- [Tools Overview](/ai/tools/tools) - Basic tool concepts
+- [Server Tools](/ai/tools/server-tools) - Server-side tool execution
+- [Tool Architecture](/ai/tools/tool-architecture) - Deep dive into the tool system
+- [Agentic Cycle](/ai/chat/agentic-cycle) - How the agent loop works
diff --git a/mintlify/ai/tools/mcp-codegen.md b/mintlify/ai/tools/mcp-codegen.md
new file mode 100644
index 000000000..ef779ca6f
--- /dev/null
+++ b/mintlify/ai/tools/mcp-codegen.md
@@ -0,0 +1,122 @@
+---
+title: MCP Type Generation
+id: mcp-codegen
+order: 11
+description: "Generate per-server TypeScript interface types from a live MCP server and wire them into createMCPClient for typed tool names and compile-checked pool keys."
+keywords:
+  - tanstack ai
+  - mcp
+  - model context protocol
+  - codegen
+  - type safety
+  - mcp.config.ts
+  - defineConfig
+  - createMCPClient
+  - generated types
+---
+
+You have a running MCP server and you call its tools through [`createMCPClient`](/ai/tools/mcp), but nothing checks the tool names you reference at compile time. By the end of this guide you'll have generated per-server `interface` types from the live server and wired them into `createMCPClient`, narrowing discovered tool names to the server's literal names and compile-checking pool config keys — with zero runtime overhead. This is [Mode 3](/ai/tools/mcp#mode-3--generated-types-createmcpclientgeneratedserver) of MCP type safety. (Tool *arguments* stay untyped on the discovery path — for Zod-validated, TypeScript-typed arguments, combine with the [`tools([toolDefinition(...)])` overload](/ai/tools/mcp#mode-2--explicit-definitions-clienttoolsdefs).)
+
+The `generate` CLI introspects a live MCP server and emits TypeScript interface types that you pass as a generic to `createMCPClient` / `createMCPClients`.
+
+## 1. Create `mcp.config.ts`
+
+Declare each server you want to generate types for. The `defineConfig` helper gives the config file full type checking and autocomplete.
+
+```ts
+// mcp.config.ts
+import { defineConfig } from '@tanstack/ai-mcp'
+
+export default defineConfig({
+  servers: {
+    github: {
+      transport: { type: 'http', url: 'https://github-mcp.example.com/mcp' },
+    },
+    linear: {
+      transport: { type: 'http', url: 'https://linear-mcp.example.com/mcp' },
+      prefix: 'linear', // must match runtime createMCPClient({ prefix })
+    },
+  },
+  outFile: './mcp-types.generated.ts',
+})
+```
+
+## 2. Run the generator
+
+```bash
+npx @tanstack/ai-mcp generate
+```
+
+The CLI connects to each declared server, introspects its tools, resources, and prompts, and writes the result to `outFile`.
+
+## 3. Inspect the output
+
+The generator emits one interface per server plus a combined pool map:
+
+```ts
+// AUTO-GENERATED by `npx @tanstack/ai-mcp generate`. Do not edit.
+
+import type { ServerDescriptor } from '@tanstack/ai-mcp'
+
+export interface GithubServer extends ServerDescriptor {
+  tools: {
+    'search_repositories': { input: { query: string; limit?: number }; output: unknown }
+    'create_issue': { input: { repo: string; title: string; body?: string }; output: unknown }
+  }
+  resources: {}
+  prompts: {}
+  capabilities: { tools: {} } & Record<string, unknown>
+}
+
+export interface LinearServer extends ServerDescriptor {
+  tools: {
+    'linear_create_issue': { input: { title: string; teamId: string }; output: unknown }
+  }
+  resources: {}
+  prompts: {}
+  capabilities: { tools: {} } & Record<string, unknown>
+}
+
+export interface MCPServers extends Record<string, ServerDescriptor> {
+  'github': GithubServer
+  'linear': LinearServer
+}
+```
+
+## 4. Use generated types at runtime
+
+Pass the generated type as a generic to [`createMCPClient`](/ai/tools/mcp) (single server) or `createMCPClients` (pool). Tool names are narrowed to the literal types declared by the server, so a typo is a compile error.
+
+**Single server:**
+
+```ts
+import type { GithubServer } from './mcp-types.generated'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient<GithubServer>({
+  transport: { type: 'http', url: process.env.GITHUB_MCP_URL! },
+})
+
+const tools = await mcp.tools()
+// Each tool name is narrowed from GithubServer['tools']
+```
+
+**Multi-server pool:**
+
+```ts
+import type { MCPServers } from './mcp-types.generated'
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients<MCPServers>({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: {
+    transport: { type: 'http', url: process.env.LINEAR_MCP_URL! },
+    prefix: 'linear',
+  },
+})
+
+// Config keys are constrained to the declared servers — a typo is a compile error
+const tools = await pool.tools()
+```
+
+Now that tool names and pool keys are compile-checked, hand the generated client to `chat()`. See [Managed MCP with `chat()`](/ai/tools/mcp-managed) to let `chat()` own discovery and lifecycle.
diff --git a/mintlify/ai/tools/mcp-managed.md b/mintlify/ai/tools/mcp-managed.md
new file mode 100644
index 000000000..e7eb63faa
--- /dev/null
+++ b/mintlify/ai/tools/mcp-managed.md
@@ -0,0 +1,335 @@
+---
+title: Managed MCP with chat()
+id: mcp-managed
+order: 9
+description: "Hand live MCP clients and pools to chat() via the mcp option and let it own tool discovery and connection lifecycle for you."
+keywords:
+  - tanstack ai
+  - mcp
+  - model context protocol
+  - chat mcp
+  - mcp clients
+  - keep-alive
+  - lazyTools
+  - onDiscoveryError
+---
+
+You have one or more live [MCP clients](/ai/tools/mcp) (or pools) and you want the model to use their tools — without writing boilerplate `await client.tools()` calls and `try/finally close()` blocks for every route. By the end of this guide you'll hand those clients to `chat()` via the `mcp` option and let it handle both discovery and lifecycle for you.
+
+> **Managed (`mcp` prop) vs manual (`tools` spread)**
+>
+> - Use `mcp: { clients: [...] }` when you want **discovery + lifecycle** managed for you and you are happy with runtime-typed (`unknown`-argument) tools.
+> - Use `tools: [...await client.tools([toolDefinition(...)])]` when you need **fully-typed MCP tools** — the defs overload gives you Zod-validated, TypeScript-typed arguments. See [Manual MCP: typed tools, resources & prompts](/ai/tools/mcp-manual) and [Three Modes of Type Safety](/ai/tools/mcp#three-modes-of-type-safety).
+>
+> Both coexist in the same `chat()` call. Tools from `mcp.clients` are merged with any tools you pass explicitly via `tools`.
+
+## Hand a client to `chat()`
+
+The simplest path: create a client, hand it to `chat()`, and let the run clean it up. `connection` defaults to `'close'`, so the client is closed automatically once the run ends — on success, error, or abort.
+
+```ts ignore
+// src/routes/api.chat.ts
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        const mcpClient = await createMCPClient({
+          transport: {
+            type: 'http',
+            url: process.env.MCP_URL!,
+            headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
+          },
+        })
+
+        // chat() discovers mcpClient's tools and closes the connection when done.
+        // No try/finally needed.
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages,
+          mcp: {
+            clients: [mcpClient],
+            // connection: 'close' is the default — shown here for clarity
+            connection: 'close',
+          },
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+The examples below show only the part that changes — the client setup and the `chat()` call. They all drop into the same route handler shape as above.
+
+## Multiple servers and pools
+
+Pass any mix of `MCPClient` instances and `MCPClients` pools. Their tools are discovered in parallel and merged into one flat tool set. Pools auto-prefix each server's tools with the config key to prevent name collisions.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient, createMCPClients } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// A pool of two servers — their tools are prefixed "github_" and "linear_"
+const githubLinearPool = await createMCPClients({
+  github: {
+    transport: {
+      type: 'http',
+      url: process.env.GITHUB_MCP_URL!,
+      headers: { Authorization: `Bearer ${process.env.GITHUB_MCP_TOKEN}` },
+    },
+  },
+  linear: {
+    transport: {
+      type: 'http',
+      url: process.env.LINEAR_MCP_URL!,
+      headers: { Authorization: `Bearer ${process.env.LINEAR_MCP_TOKEN}` },
+    },
+  },
+})
+
+// A standalone client for an internal server
+const internalClient = await createMCPClient({
+  transport: { type: 'http', url: process.env.INTERNAL_MCP_URL! },
+})
+
+// All three servers' tools are merged: github_*, linear_*, plus internal tools
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [githubLinearPool, internalClient],
+    connection: 'close',
+  },
+})
+```
+
+## Keep connections warm
+
+Creating a new MCP connection on every request adds latency. For production routes with high request rates, create your pool once at module level and pass `connection: 'keep-alive'` so `chat()` never closes it. The pool stays ready for the next request. (Shown as a full route because the placement — module scope vs. handler scope — is the point.)
+
+**Server route (`src/routes/api.chat.ts`):**
+
+```ts ignore
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+// Created once when the module loads. Shared across all requests.
+const sharedPool = await createMCPClients({
+  github: {
+    transport: {
+      type: 'http',
+      url: process.env.GITHUB_MCP_URL!,
+      headers: { Authorization: `Bearer ${process.env.GITHUB_MCP_TOKEN}` },
+    },
+  },
+  linear: {
+    transport: {
+      type: 'http',
+      url: process.env.LINEAR_MCP_URL!,
+      headers: { Authorization: `Bearer ${process.env.LINEAR_MCP_TOKEN}` },
+    },
+  },
+})
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        // keep-alive: sharedPool is never closed by chat(); stays warm for next call
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages,
+          mcp: {
+            clients: [sharedPool],
+            connection: 'keep-alive',
+          },
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+**Client component (`src/components/Chat.tsx`):**
+
+```tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+const chatOptions = {
+  connection: fetchServerSentEvents('/api/chat'),
+}
+
+export function Chat() {
+  const { messages, sendMessage, status } = useChat(chatOptions)
+
+  return (
+    <div>
+      <ul>
+        {messages.map((m) => (
+          <li key={m.id}>
+            <strong>{m.role}:</strong>{' '}
+            {m.parts.find((p) => p.type === 'text')?.content}
+          </li>
+        ))}
+      </ul>
+      <button
+        onClick={() => sendMessage({ content: 'List my open GitHub issues' })}
+        disabled={status === 'streaming'}
+      >
+        Ask
+      </button>
+    </div>
+  )
+}
+```
+
+## Lazy tool discovery
+
+When your MCP server exposes dozens of tools, sending every schema to the model inflates prompt size and cost. Set `lazyTools: true` to defer sending tool schemas until the model explicitly requests them.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const mcpClient = await createMCPClient({
+  transport: { type: 'http', url: process.env.LARGE_MCP_URL! },
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [mcpClient],
+    connection: 'close',
+    // Tools are registered but schemas are withheld until the model asks
+    lazyTools: true,
+  },
+})
+```
+
+`lazyTools: true` is forwarded to each source's `tools({ lazy: true })` call. See [Lazy Tool Discovery](/ai/tools/lazy-tool-discovery) for how the model discovers and loads lazy tools at runtime, and [the standalone lazy discovery section](/ai/tools/mcp#lazy-tool-discovery) for using `{ lazy: true }` directly with `client.tools()`.
+
+## Handling discovery failures
+
+By default, if any source fails during discovery, `chat()` throws immediately (fail-fast). When `connection: 'close'`, any sources that did connect are cleaned up before the error propagates — no leaked connections.
+
+**Fail-fast (default):**
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const mcpClient = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+
+// If discovery fails, chat() throws before the first model call.
+// mcpClient is closed automatically (connection: 'close' default).
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [mcpClient],
+  },
+})
+```
+
+**Skip a flaky server and proceed:**
+
+Use `onDiscoveryError` to log the problem and return normally — the failing source is skipped and the run continues with the remaining clients' tools.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const primaryClient = await createMCPClient({
+  transport: { type: 'http', url: process.env.PRIMARY_MCP_URL! },
+})
+
+const optionalClient = await createMCPClient({
+  transport: { type: 'http', url: process.env.OPTIONAL_MCP_URL! },
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [primaryClient, optionalClient],
+    connection: 'close',
+    onDiscoveryError(error, source) {
+      // Log the failure but let the run proceed without this source's tools.
+      // Throw here (or re-throw `error`) to fail the whole run instead.
+      console.warn('MCP discovery failed for a source, skipping.', error)
+    },
+  },
+})
+```
+
+> Sources passed to `onDiscoveryError` may have already connected before discovery failed. When `connection: 'close'`, they are still closed at the end of the run — even if their tools were skipped.
+
+## Tool name collisions
+
+If two sources in `mcp.clients` expose a tool with the same name, the run fails with an `MCPDuplicateToolNameError` (exported from `@tanstack/ai`) after merging the discovered tools. Note that `chat()` runs lazily — discovery happens when the stream is first consumed, so the error surfaces **through the stream** (the SSE response errors), not as a synchronous throw you can `try/catch` at the `chat()` call site. The fix is to prevent the collision up front: assign a `prefix` to one of the clients, or use `createMCPClients` (which auto-prefixes using the config key).
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+// Both servers expose a tool called "search". Without prefixes the run
+// would fail with MCPDuplicateToolNameError. The prefix option resolves
+// the clash.
+const serverA = await createMCPClient({
+  transport: { type: 'http', url: process.env.SERVER_A_URL! },
+  prefix: 'alpha', // tools become "alpha_search", etc.
+})
+
+const serverB = await createMCPClient({
+  transport: { type: 'http', url: process.env.SERVER_B_URL! },
+  prefix: 'beta', // tools become "beta_search", etc.
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [serverA, serverB],
+    connection: 'close',
+  },
+})
+```
+
+For the standalone `pool.tools()` collision behavior and the general `prefix` strategy, see [Tool Name Collisions](/ai/tools/mcp#tool-name-collisions) and [Disable or override the prefix](/ai/tools/mcp#disable-or-override-the-prefix).
+
+## Going further
+
+> **Need fully-typed tools, resources, or prompts in the run?** The `mcp` prop gives you runtime-typed tools and discovery. To spread `toolDefinition`-typed MCP tools, inject MCP resources and prompts, or cancel in-flight MCP calls, see [Manual MCP: typed tools, resources & prompts](/ai/tools/mcp-manual).
diff --git a/mintlify/ai/tools/mcp-manual.md b/mintlify/ai/tools/mcp-manual.md
new file mode 100644
index 000000000..2bfa004bb
--- /dev/null
+++ b/mintlify/ai/tools/mcp-manual.md
@@ -0,0 +1,312 @@
+---
+title: "Manual MCP: typed tools, resources & prompts"
+id: mcp-manual
+order: 10
+description: "Spread fully-typed MCP tools into chat(), inject MCP resources and prompts as content and messages, and cancel in-flight MCP tool calls."
+keywords:
+  - tanstack ai
+  - mcp
+  - model context protocol
+  - mcp resources
+  - mcp prompts
+  - mcpResourceToContentPart
+  - mcpPromptToMessages
+  - cancellation
+  - abortController
+---
+
+You have a live [MCP client](/ai/tools/mcp) and want to do more than auto-discover tools: spread fully-typed tools into a `chat()` run, inject the server's resources and prompts into the conversation, and cancel in-flight MCP calls when the run aborts. By the end of this guide you'll have wired all of these into a single `chat()` call.
+
+> **Manual (`tools` spread) vs managed (`mcp` prop)**
+>
+> This page covers the **manual** path — you call `client.tools()` / `client.resources()` / `client.getPrompt()` yourself and own `close()`. If you only need runtime-typed tools with discovery and lifecycle handled for you, use the `mcp` prop instead — see [Managed MCP with `chat()`](/ai/tools/mcp-managed). Both paths build on the [`createMCPClient` basics](/ai/tools/mcp).
+
+## Fully-typed tools via the `tools` spread
+
+Pass `toolDefinition()` instances to `client.tools([...])` to get Zod-validated, TypeScript-typed arguments ([Mode 2](/ai/tools/mcp#mode-2--explicit-definitions-clienttoolsdefs)), then spread the result into `chat()`'s `tools` option. You own the client, so you must close it — but **not before the stream is consumed**: `chat()` executes tools lazily while the response streams, so closing in a `finally` around the `return` would kill in-flight tool calls. Close in a middleware terminal hook instead (exactly one of `onFinish`/`onAbort`/`onError` fires per run).
+
+```ts ignore
+// src/routes/api.chat.ts
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse, toolDefinition } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+import { z } from 'zod'
+
+const searchDef = toolDefinition({
+  name: 'search',
+  description: 'Search for items',
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), title: z.string() })),
+})
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        const mcp = await createMCPClient({
+          transport: { type: 'http', url: process.env.MCP_URL! },
+        })
+
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages,
+          // Fully-typed MCP tools, merged with any other tools you pass
+          tools: [...(await mcp.tools([searchDef]))],
+          // Close after the run ends — tools execute while the response streams.
+          middleware: [
+            {
+              name: 'mcp-close',
+              onFinish: () => mcp.close(),
+              onAbort: () => mcp.close(),
+              onError: () => mcp.close(),
+            },
+          ],
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+## Resources
+
+MCP resources are context documents (files, database records, web pages) the server exposes. Fetch them and inject them into `chat()` as content parts.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient, mcpResourceToContentPart } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+
+const resources = await mcp.resources()
+// resources: Array<{ uri: string; name: string; ... }>
+
+const readResult = await mcp.readResource(resources[0]!.uri)
+const parts = readResult.contents.map(mcpResourceToContentPart)
+
+// Inject as part of a user message
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [
+    {
+      role: 'user',
+      content: [
+        ...parts,
+        { type: 'text', content: 'Summarize the above document.' },
+      ],
+    },
+  ],
+})
+```
+
+`mcpResourceToContentPart` maps each MCP content block to a `ContentPart`:
+- `text` field present → `{ type: 'text', content: text }`
+- `blob` field present → `{ type: 'text', content: '[binary resource <uri>]' }`
+- otherwise → `{ type: 'text', content: JSON.stringify(content) }`
+
+### Resource templates
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+const templates = await mcp.resourceTemplates()
+// templates: Array<ResourceTemplate>
+```
+
+## Prompts
+
+MCP prompts are reusable message templates the server exposes. Fetch a prompt, convert it to `ModelMessage[]` with `mcpPromptToMessages`, and spread it into `chat()` to seed the conversation with server-defined context or instructions.
+
+```ts ignore
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient, mcpPromptToMessages } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        const mcp = await createMCPClient({
+          transport: { type: 'http', url: process.env.MCP_URL! },
+        })
+
+        try {
+          // List all available prompts on the server
+          const available = await mcp.prompts()
+          // available: Array<{ name: string; description?: string; arguments?: ... }>
+
+          // Fetch a specific prompt, optionally passing template arguments
+          const prompt = await mcp.getPrompt('summarize', { language: 'english' })
+
+          const stream = chat({
+            adapter: openaiText('gpt-5.5'),
+            messages: [
+              // Seed the conversation with the server-defined prompt messages
+              ...mcpPromptToMessages(prompt),
+              // Then append the user's own messages
+              ...messages,
+            ],
+          })
+
+          return toServerSentEventsResponse(stream)
+        } finally {
+          // Safe here: all MCP calls (prompts/getPrompt) completed before chat()
+          // started, and no MCP tools are passed to the run. If you also spread
+          // MCP tools into `tools`, close in a middleware terminal hook instead
+          // (see "Fully-typed tools via the `tools` spread" above).
+          await mcp.close()
+        }
+      },
+    },
+  },
+})
+```
+
+`mcpPromptToMessages` maps each MCP prompt message to a `ModelMessage`:
+- `role === 'assistant'` → `{ role: 'assistant', content: text }`
+- any other role → `{ role: 'user', content: text }`
+- non-text content → `content` is `JSON.stringify`'d
+
+`getPrompt(name, args?)` accepts an optional `args` parameter typed as `Record<string, string>` for filling in template variables declared by the prompt.
+
+## Cancellation
+
+When the chat run is cancelled (e.g. the user navigates away or an `AbortController` fires), in-flight MCP `callTool` requests are cancelled automatically. The abort signal from the chat run is threaded through `ToolExecutionContext.abortSignal` into each tool's execute function.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+const controller = new AbortController()
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  tools: await mcp.tools(),
+  abortController: controller,
+})
+
+// Cancel the run and all in-flight MCP tool calls:
+controller.abort()
+```
+
+## Full Server + Client Example
+
+Here is a complete TanStack Start API route that connects to two MCP servers and streams the response to the browser.
+
+**Server route (`src/routes/api.chat.ts`):**
+
+```ts ignore
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+
+        if (typeof body !== 'object' || body === null || !Array.isArray(body.messages)) {
+          return new Response('Bad request', { status: 400 })
+        }
+
+        const pool = await createMCPClients({
+          github: {
+            transport: {
+              type: 'http',
+              url: process.env.GITHUB_MCP_URL!,
+              headers: { Authorization: `Bearer ${process.env.GITHUB_MCP_TOKEN}` },
+            },
+          },
+          linear: {
+            transport: {
+              type: 'http',
+              url: process.env.LINEAR_MCP_URL!,
+              headers: { Authorization: `Bearer ${process.env.LINEAR_MCP_TOKEN}` },
+            },
+          },
+        })
+
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages: body.messages,
+          tools: await pool.tools(),
+          // Close after the run ends — tools execute while the response streams.
+          middleware: [
+            {
+              name: 'mcp-close',
+              onFinish: () => pool.close(),
+              onAbort: () => pool.close(),
+              onError: () => pool.close(),
+            },
+          ],
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+**Client component (`src/components/Chat.tsx`):**
+
+```tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+const chatOptions = {
+  connection: fetchServerSentEvents('/api/chat'),
+}
+
+export function Chat() {
+  const { messages, sendMessage, status } = useChat(chatOptions)
+
+  return (
+    <div>
+      <ul>
+        {messages.map((m) => (
+          <li key={m.id}>
+            <strong>{m.role}:</strong>{' '}
+            {m.parts.find((p) => p.type === 'text')?.content}
+          </li>
+        ))}
+      </ul>
+      <button
+        onClick={() => sendMessage({ content: 'List my open GitHub issues' })}
+        disabled={status === 'streaming'}
+      >
+        Ask
+      </button>
+    </div>
+  )
+}
+```
+
+## Going further
+
+> **Want `chat()` to discover tools and close clients for you?** If you don't need the manual `tools` spread, resources, or prompts, the `mcp` prop removes the close-middleware boilerplate entirely. See [Managed MCP with `chat()`](/ai/tools/mcp-managed).
+
+> **Want compile-checked tool names on the discovery path?** Generate per-server interface types from your live servers and pass them as a generic to `createMCPClient` — discovered tool names narrow to the server's literal names, with zero runtime overhead. See [MCP Type Generation](/ai/tools/mcp-codegen).
diff --git a/mintlify/ai/tools/mcp.md b/mintlify/ai/tools/mcp.md
new file mode 100644
index 000000000..9dd990839
--- /dev/null
+++ b/mintlify/ai/tools/mcp.md
@@ -0,0 +1,489 @@
+---
+title: MCP Server Tools
+id: mcp
+order: 8
+description: "Connect TanStack AI to any Model Context Protocol server with createMCPClient to discover and execute its tools."
+keywords:
+  - tanstack ai
+  - mcp
+  - model context protocol
+  - mcp tools
+  - mcp client
+  - server tools
+  - createMCPClient
+  - createMCPClients
+  - type safety
+---
+
+`@tanstack/ai-mcp` is a host-side [Model Context Protocol](https://modelcontextprotocol.io) client for TanStack AI. It connects your server route to any MCP-compliant server and makes that server's tools, resources, and prompts available inside `chat()`.
+
+> MCP tool execution is **server-side only**. The `createMCPClient` call lives in a server route (or serverless function) — never in browser code.
+
+## Installation
+
+```bash
+pnpm add @tanstack/ai-mcp @modelcontextprotocol/sdk
+```
+
+## Quick Start
+
+The simplest integration is the managed `mcp` option: hand the client to `chat()` and it discovers the tools and closes the connection when the run ends — no lifecycle code at all.
+
+```ts ignore
+// src/routes/api.chat.ts  (TanStack Start)
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { messages } = await request.json()
+
+        const mcp = await createMCPClient({
+          transport: {
+            type: 'http',
+            url: 'https://my-mcp-server.example.com/mcp',
+          },
+        })
+
+        // chat() discovers the tools and closes the client when the run ends.
+        const stream = chat({
+          adapter: openaiText('gpt-5.5'),
+          messages,
+          mcp: { clients: [mcp] },
+        })
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})
+```
+
+> Need fully-typed tool arguments, resources, prompts, or your own lifecycle? Spread tools manually instead — see [Manual MCP: typed tools, resources & prompts](/ai/tools/mcp-manual) and the [Lifecycle](#lifecycle) section below.
+
+On the client side, consume the stream with `useChat` exactly as you would any other TanStack AI endpoint:
+
+```tsx
+// src/components/Chat.tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+export function Chat() {
+  const { messages, sendMessage, status } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          <strong>{m.role}:</strong>{' '}
+          {m.parts.find((p) => p.type === 'text')?.content}
+        </div>
+      ))}
+      <button
+        onClick={() => sendMessage({ content: 'Hello' })}
+        disabled={status === 'streaming'}
+      >
+        Send
+      </button>
+    </div>
+  )
+}
+```
+
+## Transports
+
+### HTTP (Streamable HTTP)
+
+The preferred transport for remote servers. Uses the MCP Streamable HTTP protocol.
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: {
+    type: 'http',
+    url: 'https://my-mcp-server.example.com/mcp',
+    headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
+  },
+})
+```
+
+### SSE (Server-Sent Events)
+
+For servers that implement the legacy SSE transport.
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: {
+    type: 'sse',
+    url: 'https://my-mcp-server.example.com/sse',
+    headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
+  },
+})
+```
+
+### stdio (Node.js only)
+
+For spawning a local MCP process. Because stdio imports Node-native modules, it is isolated behind a subpath import so edge bundles stay clean.
+
+```ts
+import { stdioTransport } from '@tanstack/ai-mcp/stdio'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: stdioTransport({
+    command: 'node',
+    args: ['./my-mcp-server.js'],
+    env: { API_KEY: process.env.API_KEY ?? '' },
+  }),
+})
+```
+
+### Custom transport (escape hatch)
+
+Pass any `Transport` instance directly as the `transport` option. For in-process testing, `InMemoryTransport` is re-exported from `@tanstack/ai-mcp`:
+
+```ts
+import { createMCPClient, InMemoryTransport } from '@tanstack/ai-mcp'
+
+const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair()
+const mcp = await createMCPClient({ transport: clientTransport })
+```
+
+For a custom network transport, pass any SDK `Transport`-compatible instance:
+
+```ts ignore
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
+
+const transport = new StreamableHTTPClientTransport(new URL('https://example.com/mcp'))
+const mcp = await createMCPClient({ transport })
+```
+
+## Authentication
+
+### Static tokens (headers)
+
+For servers that take a pre-provisioned API key or bearer token, pass `headers` on the `http`/`sse` transport config — they are sent with every request:
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: {
+    type: 'http',
+    url: 'https://my-mcp-server.example.com/mcp',
+    headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
+  },
+})
+```
+
+### OAuth (`authProvider`)
+
+For servers implementing the [MCP authorization spec](https://modelcontextprotocol.io/specification/2025-06-18/basic/authorization) (OAuth 2.1), pass an `authProvider` on the `http`/`sse` transport config. It accepts any `OAuthClientProvider` from the official SDK (`@modelcontextprotocol/sdk/client/auth.js`); the SDK transport then handles attaching tokens, refreshing them, and retrying on 401 — no extra wiring in TanStack AI.
+
+```ts ignore
+import { createMCPClient } from '@tanstack/ai-mcp'
+import { OAuthClientProvider } from '@modelcontextprotocol/sdk/client/auth.js'
+import { myTokenStore } from './token-store'
+
+// Server-side: back the provider with tokens you persist (database, KV, ...).
+// `tokens()` returning a valid (or refreshable) token set is all the SDK
+// needs to authenticate requests.
+const myOAuthProvider: OAuthClientProvider = myTokenStore.provider()
+
+const mcp = await createMCPClient({
+  transport: {
+    type: 'http',
+    url: 'https://my-mcp-server.example.com/mcp',
+    authProvider: myOAuthProvider,
+  },
+})
+```
+
+> **Interactive authorization (redirect flows).** Completing an authorization-code
+> grant requires calling `finishAuth(code)` on the transport after the user is
+> redirected back — and `createMCPClient` constructs the transport internally,
+> so it cannot expose it. If you need the interactive flow, build the transport
+> yourself and pass it in (the escape hatch above): construct a
+> `StreamableHTTPClientTransport` with your `authProvider`, keep a reference,
+> call `transport.finishAuth(code)` in your OAuth callback route, then hand the
+> transport to `createMCPClient({ transport })`. For typical server-side use —
+> a provider backed by pre-provisioned or stored tokens with working refresh —
+> the config form shown above is all you need.
+
+## Three Modes of Type Safety
+
+### Mode 1 — Auto-discovery (`client.tools()`)
+
+Call `tools()` with no arguments to discover every tool the server exposes. This requires no extra setup. Tool argument types are `unknown` at compile time; the MCP JSON Schema is used for runtime validation.
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: 'https://my-mcp-server.example.com/mcp' },
+})
+const tools = await mcp.tools()
+// tools: ServerTool[]  — args typed unknown at compile time
+```
+
+> **Task-based tools are excluded.** Tools that declare
+> `execution.taskSupport: 'required'` (the experimental MCP tasks feature)
+> can only run through the SDK's `tasks/callToolStream` flow, which
+> `@tanstack/ai-mcp` does not support yet — plain `callTool` is rejected by
+> the server with `-32600`. Discovery skips them so the model is never
+> offered a tool that cannot succeed.
+
+### Mode 2 — Explicit definitions (`client.tools([...defs])`)
+
+Pass TanStack `toolDefinition()` instances to get full TypeScript types and Zod validation. Only the named tools are returned (allowlist). `MCPToolNotFoundError` is thrown if a name isn't on the server, and `MCPTaskRequiredToolError` if the named tool requires task-based execution (see the Mode 1 note).
+
+```ts
+import { toolDefinition } from '@tanstack/ai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+import { z } from 'zod'
+
+const searchDef = toolDefinition({
+  name: 'search',
+  description: 'Search for items',
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), title: z.string() })),
+})
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: 'https://my-mcp-server.example.com/mcp' },
+})
+const tools = await mcp.tools([searchDef])
+// tools[0].execute is typed: (args: { query: string }) => ...
+```
+
+### Mode 3 — Generated types (`createMCPClient<GeneratedServer>`)
+
+Run the CLI against a live server to generate per-server `interface` types, then pass the generated type as a generic — tool names are narrowed to the server's literal names and pool config keys are compile-checked, with zero runtime overhead. (Tool *arguments* stay untyped on the discovery path — combine with Mode 2 for typed args.)
+
+> See [MCP Type Generation](/ai/tools/mcp-codegen) for the full `mcp.config.ts` setup, the `generate` CLI, and how to wire the generated types into `createMCPClient` and `createMCPClients`.
+
+## Multi-Server Pool
+
+`createMCPClients` connects to many servers in parallel and merges their tools into one flat array. Each server's tools are automatically prefixed with the config key to prevent name collisions.
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: { transport: { type: 'http', url: process.env.LINEAR_MCP_URL! } },
+})
+
+// tools: [github_search_repos, github_create_issue, linear_create_issue, ...]
+const tools = await pool.tools()
+```
+
+`pool.tools()` collects all servers' tools and throws `DuplicateToolNameError` if any two names collide after prefixing.
+
+### Per-server access
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: { transport: { type: 'http', url: process.env.LINEAR_MCP_URL! } },
+})
+
+const linearTools = await pool.clients.linear!.tools()
+const resources = await pool.clients.github!.resources()
+```
+
+### Disable or override the prefix
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: {
+    transport: { type: 'http', url: process.env.GITHUB_MCP_URL! },
+    prefix: 'gh',           // override: "gh_search_repos"
+  },
+  internal: {
+    transport: { type: 'http', url: process.env.INTERNAL_MCP_URL! },
+    prefix: '',             // disable prefix entirely
+  },
+})
+```
+
+### Closing the pool
+
+```ts ignore
+await pool.close()
+// or
+await using pool = await createMCPClients({ /* server configs */ })
+```
+
+If any server fails to connect, already-connected clients are closed before the error is thrown — no leaks.
+
+## Lifecycle
+
+> **You can skip this entire section** by passing clients to `chat()` via the `mcp` option (as in the Quick Start) — `chat()` discovers tools and closes the connections when the run ends. See [Managed MCP with `chat()`](/ai/tools/mcp-managed). Read on only if you spread tools manually and own `close()` yourself.
+
+When you manage the client manually, it is **caller-owned**: `chat()` never closes it.
+
+Tools execute **lazily while the response stream is consumed**, so only close the client after the stream is fully drained. In a route handler that returns a streaming `Response`, a `try/finally` around the `return` (or `await using` at function scope) closes the client *before* the body streams — in-flight tool calls would fail. Close in a middleware terminal hook instead.
+
+### Streaming route handlers — close via middleware
+
+Exactly one of `onFinish`/`onAbort`/`onError` fires per run, after the agent loop ends:
+
+```ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const url = 'https://my-mcp-server.example.com/mcp'
+  const mcp = await createMCPClient({ transport: { type: 'http', url } })
+  const stream = chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+    tools: await mcp.tools(),
+    middleware: [
+      {
+        name: 'mcp-close',
+        onFinish: () => mcp.close(),
+        onAbort: () => mcp.close(),
+        onError: () => mcp.close(),
+      },
+    ],
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Manual close — when you consume the stream in scope
+
+`try/finally` is correct when the stream is drained before the scope exits:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const url = 'https://my-mcp-server.example.com/mcp'
+const mcp = await createMCPClient({ transport: { type: 'http', url } })
+try {
+  const stream = chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+    tools: await mcp.tools(),
+  })
+  for await (const chunk of stream) {
+    // handle chunks — the stream is fully consumed inside this block
+  }
+} finally {
+  await mcp.close()
+}
+```
+
+### `await using` (Explicit Resource Management)
+
+If your runtime supports `Symbol.asyncDispose` (Node 18.2+ with TypeScript `target: "es2022"` + `lib: ["esnext"]`), the same in-scope-consumption rule applies — the client closes when the block exits:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const messages = [{ role: 'user' as const, content: 'Hello' }]
+const url = 'https://my-mcp-server.example.com/mcp'
+await using mcp = await createMCPClient({ transport: { type: 'http', url } })
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  tools: await mcp.tools(),
+})
+for await (const chunk of stream) {
+  // handle chunks
+}
+// mcp.close() is called automatically when the block exits
+```
+
+## Tool Name Collisions
+
+When mixing tools from multiple sources, duplicate names throw `DuplicateToolNameError`:
+
+```ts
+import { createMCPClients, DuplicateToolNameError } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: { transport: { type: 'http', url: process.env.LINEAR_MCP_URL! } },
+})
+
+try {
+  const tools = await pool.tools()
+} catch (err) {
+  if (err instanceof DuplicateToolNameError) {
+    console.error('Conflicting tool name:', err.toolName)
+    // Fix: set a unique prefix on one of the clients
+  }
+}
+```
+
+Use a unique `prefix` on each client to avoid collisions — `createMCPClients` does this automatically using the config key.
+
+## Lazy Tool Discovery
+
+Pass `{ lazy: true }` to defer sending tool schemas to the LLM until it explicitly asks for them. This reduces token usage when working with tool-heavy servers.
+
+```ts
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: 'https://my-mcp-server.example.com/mcp' },
+})
+const tools = await mcp.tools({ lazy: true })
+// All tools are marked lazy: true
+```
+
+Works with the pool too:
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: { transport: { type: 'http', url: process.env.LINEAR_MCP_URL! } },
+})
+const tools = await pool.tools({ lazy: true })
+```
+
+See [Lazy Tool Discovery](/ai/tools/lazy-tool-discovery) for how the LLM discovers lazy tools at runtime.
+
+## Using MCP with `chat()`
+
+The Quick Start above hands tools to `chat()` manually via `tools: await mcp.tools()` and closes the client yourself. Two follow-on guides cover richer integrations:
+
+> **Let `chat()` own discovery and lifecycle.** Pass live clients and pools to `chat()` via the `mcp` option and it discovers tools and closes connections for you — no `try/finally` per route. See [Managed MCP with `chat()`](/ai/tools/mcp-managed).
+
+> **Resources, prompts, and fully-typed manual tools.** Inject MCP resources and prompts into a `chat()` run, cancel in-flight MCP calls, and spread `toolDefinition`-typed tools. See [Manual MCP: typed tools, resources & prompts](/ai/tools/mcp-manual).
+
+## Error Reference
+
+| Error class | When thrown |
+|---|---|
+| `MCPConnectionError` | `createMCPClient` fails to connect, or a method is called after `close()` |
+| `DuplicateToolNameError` | Two tools have the same name within one client or across the pool |
+| `MCPToolNotFoundError` | A `toolDefinition` name passed to `tools([...defs])` is not found on the server |
+| `MCPTaskRequiredToolError` | A `toolDefinition` passed to `tools([...defs])` names a tool that requires task-based execution (`execution.taskSupport: 'required'`) — such tools are also excluded from `tools()` auto-discovery |
+
+For the `MCPDuplicateToolNameError` thrown when merging tools from multiple sources inside a `chat({ mcp })` run, see [Managed MCP with `chat()`](/ai/tools/mcp-managed#tool-name-collisions).
diff --git a/mintlify/ai/tools/provider-skills.md b/mintlify/ai/tools/provider-skills.md
new file mode 100644
index 000000000..bb727ff16
--- /dev/null
+++ b/mintlify/ai/tools/provider-skills.md
@@ -0,0 +1,178 @@
+---
+title: Provider Skills
+id: provider-skills
+order: 3
+description: "Attach hosted, provider-managed skills to code execution and shell tools in TanStack AI so the model can produce documents, run specialised environments, and more."
+keywords:
+  - tanstack ai
+  - provider skills
+  - anthropic skills
+  - openai skills
+  - code execution skills
+  - shell tool skills
+  - hosted skills
+  - container skills
+---
+
+Provider Skills are hosted, provider-managed capability bundles that the model
+loads on demand and runs inside the provider's server-side sandbox. You
+reference them by a skill ID; the provider handles installation and execution.
+
+> **Not to be confused with `@tanstack/ai-code-mode-skills`**, which are
+> locally-generated TypeScript functions evaluated client-side. Provider Skills
+> run entirely on the provider's infrastructure.
+
+Skills are **inert without an execution tool**. The execution tool activates the
+sandbox; skills are additional bundles that run inside it:
+
+- **Anthropic**: skills attach to `codeExecutionTool` (`@tanstack/ai-anthropic/tools`).
+- **OpenAI**: skills nest inside `shellTool` (`@tanstack/ai-openai/tools`) and
+  require the Responses API.
+
+You already have a `chat()` call working. By the end of this page you will have
+attached a hosted skill to the right execution tool, with the provider handling
+the rest.
+
+---
+
+## Anthropic: skills via `codeExecutionTool`
+
+### 1. Install the package
+
+```bash
+npm install @tanstack/ai-anthropic
+```
+
+### 2. Add the `codeExecutionTool` with skills
+
+Import `codeExecutionTool` from `@tanstack/ai-anthropic/tools`, not from the
+adapter root. Pass a `skills` array as the second argument.
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { codeExecutionTool } from '@tanstack/ai-anthropic/tools'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const stream = chat({
+    adapter: anthropicText('claude-sonnet-4-5'),
+    messages,
+    tools: [
+      codeExecutionTool(
+        { type: 'code_execution_20250825', name: 'code_execution' },
+        {
+          skills: [{ type: 'anthropic', skill_id: 'pptx', version: 'latest' }],
+        },
+      ),
+    ],
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+The adapter automatically:
+
+- Lifts your skills into the request's top-level `container.skills` parameter
+  (the shape Anthropic's API requires).
+- Attaches the `code-execution-2025-08-25` beta header, plus the
+  `skills-2025-10-02` beta header when skills are present.
+
+You do not set beta headers manually.
+
+### Skill shape
+
+Each entry in the `skills` array is an `AnthropicContainerSkill`:
+
+| Field | Type | Required | Notes |
+|---|---|---|---|
+| `type` | `'anthropic' \| 'custom'` | yes | `'anthropic'` for Anthropic-hosted skills; `'custom'` for your own bundles. |
+| `skill_id` | `string` | yes | 1–64 characters. |
+| `version` | `string` | no | Specific version string, or `'latest'` (default when omitted). |
+
+Up to 8 skills per request. The factory throws at call time if you exceed this
+or supply an invalid `skill_id`.
+
+### Deprecation notice
+
+Setting skills via `modelOptions.container.skills` is deprecated. Use
+`codeExecutionTool(config, { skills })` instead — the legacy path bypasses the
+automatic beta-header wiring.
+
+---
+
+## OpenAI: skills via `shellTool` (Responses API only)
+
+The OpenAI `shellTool` accepts an `environment` object that can carry a
+`skills` array. This is **Responses API only**; the Chat Completions API does
+not support the shell tool.
+
+### 1. Install the package
+
+```bash
+npm install @tanstack/ai-openai
+```
+
+### 2. Add the `shellTool` with skills
+
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { shellTool } from '@tanstack/ai-openai/tools'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+    tools: [
+      shellTool({
+        environment: {
+          type: 'container_auto',
+          skills: [
+            { type: 'skill_reference', skill_id: 'skill_abc', version: '2' },
+          ],
+        },
+      }),
+    ],
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+### Skill shape
+
+Each entry in the `skills` array is a `SkillReference`:
+
+| Field | Type | Required | Notes |
+|---|---|---|---|
+| `type` | `'skill_reference'` | yes | Always `'skill_reference'` for OpenAI. |
+| `skill_id` | `string` | yes | The skill identifier provided by OpenAI. |
+| `version` | `string` | no | A positive integer as a string (e.g. `'2'`) or `'latest'`. |
+
+Note: `version` is a string, not a number.
+
+---
+
+## Scope
+
+Only **hosted, managed-by-id** skills are wired by these factories:
+
+- Anthropic: `type: 'anthropic'` or `type: 'custom'`
+- OpenAI: `type: 'skill_reference'`
+
+Inline bundles, local-path references, and upload-API skill creation are not
+handled by `codeExecutionTool` or `shellTool`.
+
+---
+
+## Related pages
+
+- [Provider Tools](/ai/tools/provider-tools) — all native provider tools and the
+  type-level guard that prevents pairing a tool with an unsupported model.
+- [Anthropic adapter → `codeExecutionTool`](/ai/adapters/anthropic#codeexecutiontool)
+- [OpenAI adapter → `shellTool`](/ai/adapters/openai#shelltool)
diff --git a/mintlify/ai/tools/provider-tools.md b/mintlify/ai/tools/provider-tools.md
new file mode 100644
index 000000000..0914394bf
--- /dev/null
+++ b/mintlify/ai/tools/provider-tools.md
@@ -0,0 +1,144 @@
+---
+title: Provider Tools
+id: provider-tools
+order: 2
+---
+
+Most providers expose native tools beyond user-defined function calls: web
+search, code execution, computer use, hosted retrieval, and more. TanStack AI
+exports each provider's native tools from a dedicated `/tools` subpath per
+adapter package.
+
+You have an adapter already wired up. You want to give the model access to a
+provider-native capability (e.g. Anthropic web search) and be sure you never
+pair a tool with a model that doesn't support it. By the end of this page,
+you'll have imported the factory, added it to `chat({ tools: [...] })`, and
+understood the compile-time guard that will catch unsupported combinations.
+
+## Import
+
+Every adapter ships provider tools on a `/tools` subpath:
+
+```typescript
+import { webSearchTool } from '@tanstack/ai-anthropic/tools'
+import { codeInterpreterTool } from '@tanstack/ai-openai/tools'
+import { googleSearchTool } from '@tanstack/ai-gemini/tools'
+```
+
+## Use in `chat({ tools })`
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { webSearchTool } from '@tanstack/ai-anthropic/tools'
+
+const stream = chat({
+  adapter: anthropicText('claude-opus-4-6'),
+  messages: [{ role: 'user', content: "Summarize today's AI news." }],
+  tools: [
+    webSearchTool({
+      name: 'web_search',
+      type: 'web_search_20250305',
+      max_uses: 3,
+    }),
+  ],
+})
+```
+
+## Multi-turn persistence
+
+Provider tools run on the provider's own infrastructure, so their results
+(e.g. Anthropic `web_search` sources, `web_fetch` page contents) come back
+embedded in the assistant turn rather than as a separate tool message. TanStack
+AI preserves those results on the assistant message, so when you feed the prior
+conversation back into the next `chat()` call the model still sees the earlier
+evidence — no special handling required:
+
+```typescript
+import { chat, StreamProcessor } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { webSearchTool } from '@tanstack/ai-anthropic/tools'
+
+const adapter = anthropicText('claude-opus-4-6')
+const tools = [webSearchTool({ name: 'web_search', type: 'web_search_20250305' })]
+
+const processor = new StreamProcessor()
+for await (const chunk of chat({
+  adapter,
+  tools,
+  messages: [{ role: 'user', content: 'Find two sources on the drone market.' }],
+})) {
+  processor.processChunk(chunk)
+}
+processor.finalizeStream()
+
+// The follow-up turn can still cite the previous search results.
+const followUp = chat({
+  adapter,
+  tools,
+  messages: [
+    ...processor.getMessages(),
+    { role: 'user', content: 'List the exact sources you used.' },
+  ],
+})
+```
+
+The search/fetch call surfaces as a provider-executed `tool-call` part on the
+assistant message; the agent loop never tries to run it client-side.
+
+## Type-level guard
+
+Every provider-specific tool factory (e.g. `webSearchTool`, `computerUseTool`)
+returns a `ProviderTool<TProvider, TKind>` brand. The adapter's
+`toolCapabilities` (derived from each model's `supports.tools` list) gates
+which brands are assignable to `tools`.
+
+Paste a `computerUseTool(...)` into a model that doesn't expose it, and
+TypeScript reports an error on that array element — not on the factory call,
+not at runtime. User-defined `toolDefinition()` tools stay unbranded and
+always assignable. The `customTool` factories exported from `ai-anthropic` and
+`ai-openai` also return a plain `Tool` (not a `ProviderTool` brand) and are
+therefore universally accepted by any chat model, just like `toolDefinition()`.
+
+## Available tools
+
+| Provider | Tools |
+|---|---|
+| Anthropic | `webSearchTool`, `webFetchTool`, `codeExecutionTool`, `computerUseTool`, `bashTool`, `textEditorTool`, `memoryTool` — see [Anthropic adapter](/ai/adapters/anthropic#provider-tools). |
+| OpenAI | `webSearchTool`, `webSearchPreviewTool`, `fileSearchTool`, `imageGenerationTool`, `codeInterpreterTool`, `mcpTool`, `computerUseTool`, `localShellTool`, `shellTool`, `applyPatchTool` — see [OpenAI adapter](/ai/adapters/openai#provider-tools). |
+| Gemini | `codeExecutionTool`, `fileSearchTool`, `googleSearchTool`, `googleSearchRetrievalTool`, `googleMapsTool`, `urlContextTool`, `computerUseTool` — see [Gemini adapter](/ai/adapters/gemini#provider-tools). |
+| OpenRouter | `webSearchTool`, `webFetchTool` — see [OpenRouter adapter](/ai/adapters/openrouter#provider-tools). |
+| Grok | function tools only (no provider-specific tools). |
+| Groq | function tools only (no provider-specific tools). |
+
+## Which models support which tools?
+
+Each adapter's `supports.tools` array is the source of truth. The comparison
+matrix is maintained alongside `model-meta.ts` and reflected here:
+
+- **Anthropic**: every registered model supports the full tool superset
+  (the retired Claude 3.x models with narrower support were removed).
+- **OpenAI**: GPT-5 family and reasoning models (O-series) support the full
+  superset. GPT-4-series supports web/file/image/code/mcp but not
+  preview/shell variants. GPT-3.5 and audio-focused models: none.
+- **Gemini**: 3.x Pro/Flash models support the full tool set. Lite and
+  image/video variants have narrower support.
+- **OpenRouter**: every chat model supports `webSearchTool` and
+  `webFetchTool` via the gateway.
+
+For the exact per-model list, open the adapter page or read the model's
+`supports.tools` array directly from `model-meta.ts`.
+
+## Provider Skills
+
+Anthropic and OpenAI support hosted, provider-managed skill bundles that run
+inside the provider's server-side sandbox. Skills attach to an execution tool
+(`codeExecutionTool` for Anthropic, `shellTool` for OpenAI) and are referenced
+by ID — the provider handles installation and execution.
+
+See [Provider Skills](/ai/tools/provider-skills) for full setup steps and examples.
+
+## Migrating from earlier versions
+
+If you were using `createWebSearchTool` from `@tanstack/ai-openrouter`, see
+[Migration Guide §6](/ai/migration/migration#6-provider-tools-moved-to-tools-subpath).
diff --git a/mintlify/ai/tools/server-tools.md b/mintlify/ai/tools/server-tools.md
new file mode 100644
index 000000000..6c844138c
--- /dev/null
+++ b/mintlify/ai/tools/server-tools.md
@@ -0,0 +1,393 @@
+---
+title: Server Tools
+id: server-tools
+order: 3
+description: "Server tools in TanStack AI execute automatically with full access to databases, APIs, and environment variables. Patterns, examples, and security."
+keywords:
+  - tanstack ai
+  - server tools
+  - function calling
+  - backend tools
+  - tool execute
+  - database access
+---
+
+Server tools execute automatically when called by the LLM. They have full access to server resources like databases, APIs, and environment variables.
+
+```mermaid
+sequenceDiagram
+    participant LLM Service
+    participant Server
+    participant Tool
+    participant Database/API
+    
+    LLM Service->>Server: tool_call chunk<br/>{name: "getUserData", args: {...}}
+    Server->>Server: Parse tool call<br/>arguments
+    Server->>Tool: execute(parsedArgs)
+    Tool->>Database/API: Query/Fetch data
+    Database/API-->>Tool: Return data
+    Tool-->>Server: Return result
+    Server->>Server: Create tool_result<br/>message
+    Server->>LLM Service: Continue chat with<br/>tool_result in history
+    
+    Note over LLM Service: Model uses result<br/>to generate response
+    
+    LLM Service-->>Server: Stream content chunks
+    Server-->>Server: Stream to client
+```
+
+## How It Works
+
+1. **Tool Call Received**: Server receives a `tool_call` chunk from the LLM
+2. **Argument Parsing**: The tool arguments (JSON string) are parsed and validated against the input schema
+3. **Execution**: The tool's `execute` function is called with the parsed arguments
+4. **Result Processing**: The result is:
+   - Validated against the output schema (if defined)
+   - Converted to a tool result message
+   - Added to the conversation history
+5. **Continuation**: The chat continues with the tool result, allowing the LLM to generate a response based on the result
+  
+## Automatic Execution and Approval Pauses
+
+**Automatic (Default):**
+- Server tools with an `execute` function run automatically
+- Results are added to the conversation immediately
+- No client-side handling required
+
+**Approval-gated:**
+- Tools marked `needsApproval: true` still execute automatically — but only *after* the user approves
+- The run pauses at the `approval-requested` state and resumes (executing the tool, or skipping it on denial) once the client sends an approval response
+- See [Tool Approval Flow](/ai/tools/tool-approval) for the full pattern
+
+## Server Tool Definition
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { db } from "./db";
+
+const getUserDataDef = toolDefinition({
+  name: "get_user_data",
+  description: "Get user information from the database",
+  inputSchema: z.object({
+    userId: z.string().meta({ description: "The user ID to look up" }),
+  }),
+  outputSchema: z.object({
+    name: z.string(),
+    email: z.string().email(),
+    createdAt: z.string(),
+  }),
+});
+
+const getUserData = getUserDataDef.server(async ({ userId }) => {
+  // This runs on the server - secure access to database
+  const user = await db.users.findUnique({ where: { id: userId } });
+  return {
+    name: user.name,
+    email: user.email,
+    createdAt: user.createdAt.toISOString(),
+  };
+});
+```
+
+## Defining Server Tools
+
+Server tools use the isomorphic `toolDefinition()` API with the `.server()` method:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { db } from "./db";
+
+// Step 1: Define the tool schema
+const getUserDataDef = toolDefinition({
+  name: "get_user_data",
+  description: "Get user information from the database",
+  inputSchema: z.object({
+    userId: z.string().meta({ description: "The user ID to look up" }),
+  }),
+  outputSchema: z.object({
+    name: z.string(),
+    email: z.string().email(),
+    createdAt: z.string(),
+  }),
+});
+
+// Step 2: Create server implementation
+const getUserData = getUserDataDef.server(async ({ userId }) => {
+  // This runs on the server - can access database, APIs, etc.
+  const user = await db.users.findUnique({ where: { id: userId } });
+  return {
+    name: user.name,
+    email: user.email,
+    createdAt: user.createdAt.toISOString(),
+  };
+});
+
+// Example: API call tool
+const searchProductsDef = toolDefinition({
+  name: "search_products",
+  description: "Search for products in the catalog",
+  inputSchema: z.object({
+    query: z.string().meta({ description: "Search query" }),
+    limit: z.number().optional().meta({ description: "Maximum number of results" }),
+  }),
+});
+
+const searchProducts = searchProductsDef.server(async ({ query, limit = 10 }) => {
+  const response = await fetch(
+    `https://api.example.com/products?q=${query}&limit=${limit}`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.API_KEY}`, // Server-only access
+      },
+    }
+  );
+  return await response.json();
+});
+```
+
+## Using Server Tools
+
+Pass tools to the `chat` function:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { getUserData, searchProducts } from "./tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getUserData, searchProducts],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Runtime Context
+
+Server tools can receive typed runtime context as their second argument. Use this for request-scoped dependencies like authenticated users, database clients, tenant IDs, or audit loggers.
+
+```typescript
+import { chat, toolDefinition, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { getSession, getDb } from "./auth";
+
+type AppContext = {
+  userId: string;
+  db: {
+    users: {
+      findUnique(args: { where: { id: string } }): Promise<{ name: string } | null>;
+    };
+  };
+};
+
+const getCurrentUser = toolDefinition({
+  name: "get_current_user",
+  description: "Get the current authenticated user",
+  inputSchema: z.object({}),
+  outputSchema: z.object({
+    name: z.string().nullable(),
+  }),
+}).server<AppContext>(async (_input, ctx) => {
+  const user = await ctx.context.db.users.findUnique({
+    where: { id: ctx.context.userId },
+  });
+
+  return { name: user?.name ?? null };
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  // `session` and `db` come from your own app setup (auth middleware,
+  // a DB client, etc.) — they are not provided by TanStack AI.
+  const session = await getSession(request);
+  const db = getDb();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getCurrentUser],
+    context: {
+      userId: session.user.id,
+      db,
+    },
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+If a server tool declares a context generic, `chat()` requires a compatible `context` value. Untyped tools keep working and receive `unknown` context.
+
+For middleware and client-to-server handoff patterns, see [Runtime Context](/ai/advanced/runtime-context).
+
+## Tool Organization Pattern
+
+For better organization, define tool schemas and implementations separately:
+
+```typescript ignore
+// tools/definitions.ts
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+export const getUserDataDef = toolDefinition({
+  name: "get_user_data",
+  description: "Get user information",
+  inputSchema: z.object({
+    userId: z.string(),
+  }),
+  outputSchema: z.object({
+    name: z.string(),
+    email: z.string(),
+  }),
+});
+
+export const searchProductsDef = toolDefinition({
+  name: "search_products",
+  description: "Search products",
+  inputSchema: z.object({
+    query: z.string(),
+  }),
+});
+
+// tools/server.ts
+import { getUserDataDef, searchProductsDef } from "./definitions";
+import { db } from "@/lib/db";
+
+export const getUserData = getUserDataDef.server(async ({ userId }) => {
+  const user = await db.users.findUnique({ where: { id: userId } });
+  return { name: user.name, email: user.email };
+});
+
+export const searchProducts = searchProductsDef.server(async ({ query }) => {
+  const products = await db.products.search(query);
+  return products;
+});
+
+// api/chat/route.ts
+import { chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { getUserData, searchProducts } from "@/tools/server";
+
+const stream = chat({
+  adapter: openaiText("gpt-5.5"),
+  messages,
+  tools: [getUserData, searchProducts],
+});
+```
+
+## Automatic Execution
+
+Server tools are automatically executed when the model calls them. The SDK:
+
+1. Receives the tool call from the model
+2. Executes the tool's `execute` function
+3. Adds the result to the conversation
+4. Continues the chat with the tool result
+
+You don't need to manually handle tool execution - it's automatic!
+
+## Error Handling
+
+Tools should handle errors gracefully:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { db } from "./db";
+
+const getUserDataDef = toolDefinition({
+  name: "get_user_data",
+  description: "Get user information",
+  inputSchema: z.object({
+    userId: z.string(),
+  }),
+  outputSchema: z.object({
+    name: z.string().optional(),
+    email: z.string().optional(),
+    error: z.string().optional(),
+  }),
+});
+
+const getUserData = getUserDataDef.server(async ({ userId }) => {
+  try {
+    const user = await db.users.findUnique({ where: { id: userId } });
+    if (!user) {
+      return { error: "User not found" };
+    }
+    return { name: user.name, email: user.email };
+  } catch {
+    return { error: "Failed to fetch user data" };
+  }
+});
+```
+
+**Throwing vs. returning an error:** if your `.server()` function throws, the SDK catches it and surfaces it as a tool-result *error* (the model sees the failure but you lose control over the message). Returning a structured `{ error }` shape keeps the model in control of how to recover and is usually preferable. Either way, when an `outputSchema` is defined the returned value is validated against it (Zod) before being added to the conversation — so include the `error` field in your `outputSchema` if you return it.
+
+## Using JSON Schema
+
+If you have existing JSON Schema definitions or prefer not to use Zod, you can define tool schemas using raw JSON Schema objects:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import type { JSONSchema } from "@tanstack/ai";
+import { db } from "./db";
+
+const inputSchema: JSONSchema = {
+  type: "object",
+  properties: {
+    userId: {
+      type: "string",
+      description: "The user ID to look up",
+    },
+  },
+  required: ["userId"],
+};
+
+const outputSchema: JSONSchema = {
+  type: "object",
+  properties: {
+    name: { type: "string" },
+    email: { type: "string" },
+  },
+  required: ["name", "email"],
+};
+
+const getUserDataDef = toolDefinition({
+  name: "get_user_data",
+  description: "Get user information from the database",
+  inputSchema,
+  outputSchema,
+});
+
+// With a raw JSON Schema, args is typed as `unknown` — narrow it before use
+const getUserData = getUserDataDef.server(async (args) => {
+  if (typeof args !== "object" || args === null || !("userId" in args)) {
+    throw new Error("Invalid input: expected a userId");
+  }
+  const user = await db.users.findUnique({ where: { id: String(args.userId) } });
+  return { name: user.name, email: user.email };
+});
+```
+
+> **Note:** JSON Schema tools skip runtime validation. Zod schemas are recommended for full type safety and validation.
+
+## Best Practices
+
+1. **Keep tools focused** - Each tool should do one thing well
+2. **Validate inputs** - Use Zod schemas to ensure type safety (JSON Schema skips validation)
+3. **Handle errors** - Return meaningful error messages
+4. **Use descriptions** - Clear descriptions help the model use tools correctly
+5. **Secure sensitive operations** - Never expose API keys or secrets to the client
+
+## Next Steps
+
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tool execution
+- [Tool Approval Flow](/ai/tools/tool-approval) - Add approval workflows for sensitive operations
diff --git a/mintlify/ai/tools/tool-approval.md b/mintlify/ai/tools/tool-approval.md
new file mode 100644
index 000000000..c6fa7a692
--- /dev/null
+++ b/mintlify/ai/tools/tool-approval.md
@@ -0,0 +1,298 @@
+---
+title: Tool Approval Flow
+id: tool-approval-flow
+order: 5
+description: "Require user approval before executing sensitive tools in TanStack AI — approval states, deny flows, and batched approvals with needsApproval."
+keywords:
+  - tanstack ai
+  - tool approval
+  - needsApproval
+  - user consent
+  - sensitive tools
+  - approval flow
+  - human-in-the-loop
+---
+
+The tool approval flow allows you to require user approval before executing sensitive tools, giving users control over actions like sending emails, making purchases, or deleting data. A tool call moves through the `ToolCallState` lifecycle:
+
+1. **`awaiting-input`** — Tool call started, no arguments yet
+2. **`input-streaming`** — Arguments arriving incrementally
+3. **`input-complete`** — All arguments received
+4. **`approval-requested`** — Waiting for user approval (only if `needsApproval: true`)
+5. **`approval-responded`** — User approved or denied
+
+After `approval-responded` the call executes (if approved). Although `complete` exists in the `ToolCallState` union, the runtime never transitions the tool-call part to it — the result surfaces as a populated `part.output` plus a sibling `tool-result` part whose own state is `complete` or `error`.
+
+When a tool requires approval, the typical flow is:
+
+1. Model calls the tool
+2. Tool execution is paused
+3. User is prompted to approve or deny
+4. Tool executes (if approved) or is cancelled (if denied)
+5. Conversation continues with the result
+
+## Enabling Approval
+
+Tools can be marked as requiring approval by setting `needsApproval: true` in the definition:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { emailService } from "./email-service";
+
+// Step 1: Define tool with approval requirement
+const sendEmailDef = toolDefinition({
+  name: "send_email",
+  description: "Send an email to a recipient",
+  inputSchema: z.object({
+    to: z.string().email(),
+    subject: z.string(),
+    body: z.string(),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    messageId: z.string(),
+  }),
+  needsApproval: true, // This tool requires approval
+});
+
+// Step 2: Create server implementation
+const sendEmail = sendEmailDef.server(async ({ to, subject, body }) => {
+  // Only executes if approved
+  await emailService.send({ to, subject, body });
+  return { success: true, messageId: "..." };
+});
+```
+
+## Server-Side Approval
+
+On the server, tools with `needsApproval: true` will pause execution and wait for approval:
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { sendEmail } from "./tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [sendEmail],
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+## Client-Side Approval Handling
+
+The client receives approval requests and can respond:
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+function ChatComponent() {
+  const { messages, sendMessage, addToolApprovalResponse } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part) => {
+            // Check for approval requests
+            if (
+              part.type === "tool-call" &&
+              part.state === "approval-requested" &&
+              part.approval
+            ) {
+              return (
+                <div key={part.id} className="approval-prompt">
+                  <p>Approve: {part.name}</p>
+                  <pre>{JSON.stringify(part.input, null, 2)}</pre>
+                  <button
+                    onClick={() =>
+                      addToolApprovalResponse({
+                        id: part.approval!.id,
+                        approved: true,
+                      })
+                    }
+                  >
+                    Approve
+                  </button>
+                  <button
+                    onClick={() =>
+                      addToolApprovalResponse({
+                        id: part.approval!.id,
+                        approved: false,
+                      })
+                    }
+                  >
+                    Deny
+                  </button>
+                </div>
+              );
+            }
+            // ... render other parts
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Approval UI Example
+
+Here's a more complete approval UI component:
+
+```tsx
+import type { ToolCallPart } from "@tanstack/ai-client";
+
+function ApprovalPrompt({
+  part,
+  onApprove,
+  onDeny,
+}: {
+  part: ToolCallPart;
+  onApprove: () => void;
+  onDeny: () => void;
+}) {
+  // When tools are passed via `clientTools(...)`, `part.input` is the
+  // parsed, fully-typed argument object. Otherwise parse `part.arguments`.
+  const args = part.input ?? JSON.parse(part.arguments);
+
+  return (
+    <div className="border border-yellow-500 rounded-lg p-4 bg-yellow-50">
+      <div className="font-semibold mb-2">
+        🔒 Approval Required: {part.name}
+      </div>
+      <div className="text-sm text-gray-600 mb-4">
+        <pre className="bg-gray-100 p-2 rounded text-xs overflow-x-auto">
+          {JSON.stringify(args, null, 2)}
+        </pre>
+      </div>
+      <div className="flex gap-2">
+        <button
+          onClick={onApprove}
+          className="px-4 py-2 bg-green-600 text-white rounded-lg"
+        >
+          ✓ Approve
+        </button>
+        <button
+          onClick={onDeny}
+          className="px-4 py-2 bg-red-600 text-white rounded-lg"
+        >
+          ✗ Deny
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+Wire it up from your message renderer. Note the `id` you pass is the **approval id** (`part.approval.id`), not the tool call id:
+
+```tsx ignore
+{part.type === "tool-call" &&
+  part.state === "approval-requested" &&
+  part.approval && (
+    <ApprovalPrompt
+      part={part}
+      onApprove={() =>
+        addToolApprovalResponse({ id: part.approval!.id, approved: true })
+      }
+      onDeny={() =>
+        addToolApprovalResponse({ id: part.approval!.id, approved: false })
+      }
+    />
+  )}
+```
+
+## Client Tools with Approval
+
+Client tools can also require approval:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { clientTools } from "@tanstack/ai-client";
+
+// tools/definitions.ts
+const deleteLocalDataDef = toolDefinition({
+  name: "delete_local_data",
+  description: "Delete data from local storage",
+  inputSchema: z.object({
+    key: z.string(),
+  }),
+  outputSchema: z.object({
+    deleted: z.boolean(),
+  }),
+  needsApproval: true, // Requires approval even on client
+});
+
+// Client: Create implementation
+const deleteLocalData = deleteLocalDataDef.client((input) => {
+  // This will only execute after approval
+  localStorage.removeItem(input.key);
+  return { deleted: true };
+});
+
+const { messages, addToolApprovalResponse } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+  // Wrap client tools in `clientTools(...)` so literal tool-name inference is
+  // preserved — this is what lets `part.name === "delete_local_data"` narrow
+  // `part.input` / `part.output` to this tool's types.
+  tools: clientTools(deleteLocalData), // Automatic execution after approval
+});
+```
+
+## Example: E-commerce Purchase
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { createOrder } from "./orders";
+
+// Define tool with approval requirement
+const purchaseItemDef = toolDefinition({
+  name: "purchase_item",
+  description: "Purchase an item from the store",
+  inputSchema: z.object({
+    itemId: z.string(),
+    quantity: z.number(),
+    price: z.number(),
+  }),
+  outputSchema: z.object({
+    orderId: z.string(),
+    total: z.number(),
+  }),
+  needsApproval: true,
+});
+
+// Create server implementation
+const purchaseItem = purchaseItemDef.server(async ({ itemId, quantity, price }) => {
+  const order = await createOrder({ itemId, quantity, price });
+  return { orderId: order.id, total: price * quantity };
+});
+```
+
+The user will see an approval prompt showing the item, quantity, and price before the purchase is made. The tool will only execute after the user approves.
+
+## Best Practices
+
+- **Use approval for sensitive operations** - Sending emails, making payments, deleting data
+- **Show clear information** - Display what the tool will do before approval
+- **Provide context** - Show tool arguments in a readable format
+- **Handle denial gracefully** - Don't break the conversation if a tool is denied
+- **Timeout handling** - Consider timeouts for approval requests
+
+## Next Steps
+
+- [Server Tools](/ai/tools/server-tools) - Learn about server-side tool execution
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tool execution
diff --git a/mintlify/ai/tools/tool-architecture.md b/mintlify/ai/tools/tool-architecture.md
new file mode 100644
index 000000000..30df68ef6
--- /dev/null
+++ b/mintlify/ai/tools/tool-architecture.md
@@ -0,0 +1,439 @@
+---
+title: Tool Architecture
+id: tool-architecture
+order: 2
+description: "The architecture behind TanStack AI's tool system — server tools, client tools, call states, approval flow, and the agentic cycle."
+keywords:
+  - tanstack ai
+  - tool architecture
+  - server tools
+  - client tools
+  - call states
+  - approval flow
+  - agentic cycle
+---
+
+The TanStack AI tool system provides a powerful, flexible architecture for enabling AI agents to interact with external systems:
+
+- [**Server Tools**](/ai/tools/server-tools) execute securely on the backend with automatic handling
+- [**Client Tools**](/ai/tools/client-tools) execute in the browser for UI updates and local operations
+- [**The Agentic Cycle**](/ai/chat/agentic-cycle) enables multi-step reasoning and complex workflows
+- [**Tool States**](#call-states) provide real-time feedback and enable robust UIs
+- [**Approval Flow**](#approval-flow) gives users control over sensitive operations
+This architecture enables building sophisticated AI applications that can:
+
+- Fetch data from APIs and databases
+- Perform calculations and transformations
+- Update UIs and manage state
+- Execute multi-step workflows
+- Require user approval for sensitive actions
+
+## Call Flow: Client to LLM Service
+
+When a user sends a message that requires tool usage, the following flow occurs:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Server
+    participant LLM Service
+    
+    User->>Browser: Types message
+    Browser->>Server: POST /api/chat<br/>{messages, ...}
+    Server->>Server: Build tool definitions<br/>from tool array
+    Server->>LLM Service: Send request with:<br/>- messages<br/>- tool definitions<br/>- model config
+    
+    Note over LLM Service: Model analyzes tools<br/>and decides to use one
+    
+    LLM Service-->>Server: Stream chunks:<br/>tool_call, content, done
+    Server-->>Browser: Forward chunks via SSE/HTTP
+    Browser->>Browser: Parse chunks &<br/>update UI
+    Browser->>User: Show response
+```
+
+### Step-by-Step Breakdown
+
+1. **User Input**: The user types a message in the chat interface
+2. **Client Request**: The browser sends a POST request to the server with:
+   - Current conversation history (`messages`)
+   - Optional data payload (`body`)
+3. **Server Processing**: The server:
+   - Receives the request
+   - Extracts messages from the request body
+   - Converts tool definitions into the LLM's expected format
+   - Sends the request to the LLM service (OpenAI, Anthropic, etc.)
+4. **LLM Decision**: The LLM service:
+   - Analyzes the conversation and available tools
+   - Decides whether to call a tool based on the user's request
+   - Generates tool calls with arguments
+5. **Streaming Response**: The LLM streams back chunks:
+   - `tool_call` chunks with tool name and arguments
+   - `content` chunks with text responses
+   - `done` chunk when complete
+6. **Client Updates**: The browser receives chunks and updates the UI in real-time
+
+### Code Example
+
+**Server (API Route):**
+
+```typescript
+import { chat, toServerSentEventsResponse } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { getWeather, sendEmail } from "./tools";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  // Create streaming chat with tools
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getWeather, sendEmail], // Tool definitions passed here
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+**Client (React Component):**
+
+```tsx
+import { useState } from "react";
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+
+function ChatComponent() {
+  const [input, setInput] = useState("");
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>{/* Render message */}</div>
+      ))}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          sendMessage(input);
+          setInput("");
+        }}
+      >
+        <input value={input} onChange={(e) => setInput(e.target.value)} />
+        <button type="submit" disabled={isLoading}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+```
+
+## States and Lifecycle
+
+Tools progress through different states during their lifecycle. Understanding these states helps build robust UIs and debug tool execution.
+
+> **Two parts, two state sets — this page is the canonical reference.** Call states (`awaiting-input`, `input-streaming`, `input-complete`, `approval-requested`, `approval-responded`) live on the **`tool-call`** part as `part.state`. There is no `complete`/`error`/`executing`/`cancelled` value on the call part. The *result* lives on a separate sibling **`tool-result`** part whose own `state` is `streaming`, `complete`, or `error`; the resolved value is also mirrored onto the call part's `part.output`.
+
+The diagram below is conceptual: the nodes after `approval-responded` (executing, success, error, cancelled) are **not** `ToolCallState` values — they correspond to the sibling `tool-result` part's state (`complete` / `error`) and the call part's `output` field.
+
+```mermaid
+stateDiagram-v2
+    state "tool-call part (ToolCallState)" as Call {
+        [*] --> AwaitingInput: tool_call received
+        AwaitingInput --> InputStreaming: partial arguments
+        InputStreaming --> InputComplete: all arguments received
+        InputComplete --> ApprovalRequested: needsApproval=true
+        ApprovalRequested --> ApprovalResponded: user approves / denies
+    }
+    InputComplete --> ResultComplete: needsApproval=false, success
+    ApprovalResponded --> ResultComplete: approved + success (output set)
+    ApprovalResponded --> ResultError: approved + error
+    ApprovalResponded --> Denied: user denied (no execution)
+    state "tool-result part" as Results {
+        ResultComplete: complete
+        ResultError: error
+    }
+    ResultComplete --> [*]
+    ResultError --> [*]
+    Denied --> [*]
+```
+
+### Call States
+
+| State | Description | Client Action |
+|-------|-------------|---------------|
+| `awaiting-input` | Tool call received, no arguments yet | Show loading |
+| `input-streaming` | Partial arguments being received | Show progress |
+| `input-complete` | All arguments received | Ready to execute |
+| `approval-requested` | Waiting for user approval | Show approval UI |
+| `approval-responded` | User has approved/denied | Execute or cancel |
+
+### Result States
+
+| State | Description | Client Action |
+|-------|-------------|---------------|
+| `streaming` | Result being streamed (future feature) | Show progress |
+| `complete` | Result is complete | Show result |
+| `error` | Error occurred during execution | Show error message |
+
+### Monitoring Tool States in React
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { clientTools, createChatClientOptions } from "@tanstack/ai-client";
+import { getWeather, sendEmail } from "./tools";
+import { ApprovalUI } from "./approval-ui";
+
+// Wiring `tools` is what lets `part.name` / `part.input` / `part.output`
+// narrow to each tool's types below.
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools: clientTools(getWeather, sendEmail),
+});
+
+function ChatComponent() {
+  const { messages } = useChat(chatOptions);
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part) => {
+            if (part.type === "tool-call") {
+              return (
+                <div key={part.id} className="tool-status">
+                  {/* Show state-specific UI */}
+                  {part.state === "awaiting-input" && (
+                    <div>🔄 Calling {part.name}...</div>
+                  )}
+                  {part.state === "input-streaming" && (
+                    <div>📥 Receiving arguments...</div>
+                  )}
+                  {part.state === "input-complete" && (
+                    <div>✓ Arguments ready</div>
+                  )}
+                  {part.state === "approval-requested" && (
+                    <ApprovalUI part={part} />
+                  )}
+                </div>
+              );
+            }
+            if (part.type === "tool-result") {
+              return (
+                <div key={part.toolCallId}>
+                  {part.state === "complete" && (
+                    <div>✓ Tool completed</div>
+                  )}
+                  {part.state === "error" && (
+                    <div>❌ Error: {part.error}</div>
+                  )}
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Approval Flow
+
+For sensitive operations, tools can require user approval before execution:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Client
+    participant Server
+    participant LLM
+    participant Tool
+    
+    LLM->>Server: tool_call: send_email
+    Server->>Server: Check needsApproval
+    Server->>Client: approval-requested chunk
+    Client->>Client: Show approval UI
+    User->>Client: Clicks "Approve"
+    Client->>Server: POST approval response
+    Server->>Tool: execute(args)
+    Tool-->>Server: result
+    Server->>LLM: tool_result
+    LLM-->>Client: Generate response
+```
+
+**Define tool with approval:**
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { emailService } from "./email-service";
+
+const sendEmailDef = toolDefinition({
+  name: "send_email",
+  description: "Send an email",
+  inputSchema: z.object({
+    to: z.string().email(),
+    subject: z.string(),
+    body: z.string(),
+  }),
+  needsApproval: true, // Requires user approval
+});
+
+const sendEmail = sendEmailDef.server(async ({ to, subject, body }) => {
+  await emailService.send({ to, subject, body });
+  return { success: true };
+});
+```
+
+**Handle approval in client:**
+
+```tsx ignore
+const { messages, addToolApprovalResponse } = useChat({
+  connection: fetchServerSentEvents("/api/chat"),
+});
+
+// In your render (guard `type` and `approval` so `part.approval.id` is safe):
+{part.type === "tool-call" &&
+  part.state === "approval-requested" &&
+  part.approval && (
+    <div>
+      <p>Approve sending email to {part.input.to}?</p>
+      <button
+        onClick={() =>
+          addToolApprovalResponse({
+            id: part.approval.id,
+            approved: true,
+          })
+        }
+      >
+        Approve
+      </button>
+      <button
+        onClick={() =>
+          addToolApprovalResponse({
+            id: part.approval.id,
+            approved: false,
+          })
+        }
+      >
+        Deny
+      </button>
+    </div>
+  )}
+```
+
+### Hybrid Tools (Server + Client)
+
+Some tools need to execute in both environments:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import { db } from "./db";
+import { i18n } from "./i18n";
+
+// Server: Fetch data from database
+const fetchUserPrefsDef = toolDefinition({
+  name: "fetch_user_preferences",
+  description: "Get user preferences from server",
+  inputSchema: z.object({
+    userId: z.string(),
+  }),
+});
+
+const fetchUserPreferences = fetchUserPrefsDef.server(async ({ userId }) => {
+  const prefs = await db.userPreferences.findUnique({ where: { userId } });
+  return prefs;
+});
+
+// Client: Apply preferences to UI
+const applyPrefsDef = toolDefinition({
+  name: "apply_preferences",
+  description: "Apply user preferences to the UI",
+  inputSchema: z.object({
+    theme: z.string(),
+    language: z.string(),
+  }),
+});
+
+// On client, create client implementation
+const applyPreferences = applyPrefsDef.client(async ({ theme, language }) => {
+  // Update UI state with preferences
+  document.body.className = theme;
+  i18n.changeLanguage(language);
+  return { applied: true };
+});
+
+// Usage: LLM can chain these together
+// 1. Call fetchUserPreferences (server)
+// 2. Call applyPreferences with the result (client)
+```
+
+### Parallel Tool Execution
+
+The LLM can call multiple tools in parallel for efficiency:
+
+```mermaid
+graph TD
+    A[LLM decides to call 3 tools] --> B[tool_call index: 0]
+    A --> C[tool_call index: 1]
+    A --> D[tool_call index: 2]
+    B --> E[Execute in parallel]
+    C --> E
+    D --> E
+    E --> F[Collect all results]
+    F --> G[Continue with results]
+```
+
+**Example:**
+
+```
+User: "Compare the weather in NYC, SF, and LA"
+
+LLM calls:
+- get_weather({city: "NYC"}) [index: 0]
+- get_weather({city: "SF"}) [index: 1]
+- get_weather({city: "LA"}) [index: 2]
+
+All execute simultaneously, then LLM generates comparison.
+```
+
+## Best Practices
+
+### Tool Design
+
+- **Single Responsibility**: Each tool should do one thing well
+- **Clear Descriptions**: Help the LLM understand when to use the tool
+- **Type Safety**: Use Zod schemas for input/output validation
+- **Error Handling**: Return meaningful error messages, don't throw
+- **Idempotency**: Tools should be safe to call multiple times
+
+### Security
+
+- **Server vs Client**: Put sensitive operations on the server
+- **Approval Flow**: Use `needsApproval` for destructive actions
+- **Input Validation**: Always validate tool inputs
+- **Rate Limiting**: Implement rate limits for expensive tools
+- **Audit Logs**: Log tool executions for debugging and security
+
+### Performance
+
+- **Caching**: Cache tool results when appropriate
+- **Parallel Execution**: Enable parallel tool calls when possible
+- **Streaming**: Use streaming for long-running operations
+- **Timeouts**: Set timeouts for external API calls
+- **Lazy Loading**: Load tools only when needed
+
+
+## Next Steps
+
+- [Tools Overview](/ai/tools/tools) - Basic tool concepts and examples
+- [Server Tools](/ai/tools/server-tools) - Deep dive into server-side tools
+- [Client Tools](/ai/tools/client-tools) - Deep dive into client-side tools
+- [Tool Approval Flow](/ai/tools/tool-approval) - Implementing approval workflows
+- [AG-UI protocol](https://docs.ag-ui.com/introduction) - Understanding the streaming protocol
+
diff --git a/mintlify/ai/tools/tools.md b/mintlify/ai/tools/tools.md
new file mode 100644
index 000000000..15df5d20d
--- /dev/null
+++ b/mintlify/ai/tools/tools.md
@@ -0,0 +1,453 @@
+---
+title: Tools
+id: tools
+order: 1
+description: "Define isomorphic AI tools in TanStack AI with toolDefinition() for type-safe server- and client-side function calling across any framework."
+keywords:
+  - tanstack ai
+  - tools
+  - function calling
+  - toolDefinition
+  - isomorphic tools
+  - server tools
+  - client tools
+  - type safety
+---
+
+Tools (also called "function calling") allow AI models to interact with external systems, APIs, or perform computations. TanStack AI provides an isomorphic tool system that enables type-safe, framework-agnostic tool definitions that work on both server and client.
+
+Tools enable your AI application to:
+
+- **Fetch data** from APIs or databases
+- **Perform calculations** or data transformations
+- **Interact with services** like email, calendars, or payment systems
+- **Execute client-side operations** like updating UI or local storage
+- **Create hybrid tools** that execute in both server and client contexts
+
+> Looking for provider-native tools like Anthropic web search, OpenAI code
+> interpreter, or Gemini URL context? See [Provider Tools](/ai/tools/provider-tools).
+
+## Framework Support
+
+TanStack AI works with **any** JavaScript framework:
+- TanStack Start, Next.js, Express, Remix, Fastify, etc.
+- React, Vue, Solid, Svelte, vanilla JS, etc.
+
+TanStack AI works with any JavaScript framework.
+
+## Isomorphic Tool Architecture
+
+TanStack AI uses a two-step tool definition process:
+
+1. **Define once** with `toolDefinition()` - Creates a shared tool schema
+2. **Implement** with `.server()` or `.client()` - Add execution logic for each environment
+
+This approach provides:
+
+- **Type Safety**: Full TypeScript inference from Zod schemas
+- **Code Reuse**: Define schemas once, use everywhere
+- **Flexibility**: Tools can execute on server, client, or both
+- **Schema Options**: Use Zod schemas or raw JSON Schema objects
+
+## Schema Options
+
+TanStack AI supports two ways to define tool schemas:
+
+### Option 1: Zod Schemas (Recommended)
+
+Zod schemas provide full TypeScript type inference and runtime validation:
+
+```typescript
+import { z } from "zod";
+
+const inputSchema = z.object({
+  location: z.string().meta({ description: "City name" }),
+  unit: z.enum(["celsius", "fahrenheit"]).optional(),
+});
+```
+
+### Option 2: JSON Schema Objects
+
+For cases where you already have JSON Schema definitions or prefer not to use Zod, you can pass raw JSON Schema objects directly:
+
+```typescript
+import type { JSONSchema } from "@tanstack/ai";
+
+const inputSchema: JSONSchema = {
+  type: "object",
+  properties: {
+    location: {
+      type: "string",
+      description: "City name",
+    },
+    unit: {
+      type: "string",
+      enum: ["celsius", "fahrenheit"],
+    },
+  },
+  required: ["location"],
+};
+```
+
+> **Note:** When using JSON Schema, TypeScript infers `unknown` for input/output types (it cannot derive types from a JSON Schema at compile time), so you must narrow or cast `args` before use. Zod schemas are recommended for full type safety.
+
+## Tool Definition
+
+Tools are defined using `toolDefinition()` from `@tanstack/ai`:
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+// Step 1: Define the tool schema
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather for a location",
+  inputSchema: z.object({
+    location: z.string().meta({ description: "The city and state, e.g. San Francisco, CA" }),
+    unit: z.enum(["celsius", "fahrenheit"]).optional(),
+  }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+    location: z.string(),
+  }),
+});
+
+// Step 2: Create a server implementation
+const getWeatherServer = getWeatherDef.server(async ({ location, unit }) => {
+  const response = await fetch(
+    `https://api.weather.com/v1/current?location=${location}&unit=${
+      unit || "fahrenheit"
+    }`
+  );
+  const data = await response.json();
+  return {
+    temperature: data.temperature,
+    conditions: data.conditions,
+    location: data.location,
+  };
+});
+```
+
+### Using JSON Schema
+
+If you prefer JSON Schema or have existing schema definitions:
+
+```typescript group=json-schema-tools
+import { toolDefinition } from "@tanstack/ai";
+import type { JSONSchema } from "@tanstack/ai";
+
+// Define schemas using JSON Schema
+const inputSchema: JSONSchema = {
+  type: "object",
+  properties: {
+    location: {
+      type: "string",
+      description: "The city and state, e.g. San Francisco, CA",
+    },
+    unit: {
+      type: "string",
+      enum: ["celsius", "fahrenheit"],
+    },
+  },
+  required: ["location"],
+};
+
+const outputSchema: JSONSchema = {
+  type: "object",
+  properties: {
+    temperature: { type: "number" },
+    conditions: { type: "string" },
+    location: { type: "string" },
+  },
+  required: ["temperature", "conditions", "location"],
+};
+
+// Create the tool definition
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather for a location",
+  inputSchema,
+  outputSchema,
+});
+
+// With a raw JSON Schema, `args` is `unknown` — narrow it before use
+// (prefer a Zod schema for automatic typing).
+const getWeatherServer = getWeatherDef.server(async (args) => {
+  if (typeof args !== "object" || args === null || !("location" in args)) {
+    throw new Error("Invalid input: expected a location");
+  }
+  const location = String(args.location);
+  const unit = "unit" in args ? String(args.unit) : "fahrenheit";
+  const response = await fetch(
+    `https://api.weather.com/v1/current?location=${location}&unit=${unit}`
+  );
+  return await response.json();
+});
+```
+
+## Using Tools in Chat
+
+### Server-Side
+
+```typescript
+import { chat, toServerSentEventsResponse, toolDefinition } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+
+const getWeatherDef = toolDefinition({
+  name: "get_weather",
+  description: "Get the current weather for a location",
+  inputSchema: z.object({
+    location: z.string().meta({ description: "The city and state, e.g. San Francisco, CA" }),
+    unit: z.enum(["celsius", "fahrenheit"]).optional(),
+  }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    conditions: z.string(),
+    location: z.string(),
+  }),
+});
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  // Create server implementation
+  const getWeather = getWeatherDef.server(async ({ location, unit }) => {
+    const response = await fetch(`https://api.weather.com/v1/current?...`);
+    return await response.json();
+  });
+
+  const stream = chat({
+    adapter: openaiText("gpt-5.5"),
+    messages,
+    tools: [getWeather], // Pass server tools
+  });
+
+  return toServerSentEventsResponse(stream);
+}
+```
+
+### Client-Side with Type Safety
+
+```tsx
+import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
+import { 
+  clientTools, 
+  createChatClientOptions, 
+  type InferChatMessages 
+} from "@tanstack/ai-client";
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+const updateUIDef = toolDefinition({
+  name: "updateUI",
+  description: "Update the UI with a notification message",
+  inputSchema: z.object({ message: z.string() }),
+  outputSchema: z.object({ success: z.boolean() }),
+});
+
+const saveToStorageDef = toolDefinition({
+  name: "saveToStorage",
+  description: "Save data to storage",
+  inputSchema: z.object({ key: z.string(), value: z.string() }),
+  outputSchema: z.object({ saved: z.boolean() }),
+});
+
+// Create client implementations
+const updateUI = updateUIDef.client((input) => {
+  // Update UI state
+  console.log(input.message);
+  return { success: true };
+});
+
+const saveToStorage = saveToStorageDef.client((input) => {
+  localStorage.setItem(input.key, input.value);
+  return { saved: true };
+});
+
+// Create typed tools array (no 'as const' needed!)
+const tools = clientTools(updateUI, saveToStorage);
+
+const textOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/chat"),
+  tools,
+});
+
+// Infer message types for full type safety
+type ChatMessages = InferChatMessages<typeof textOptions>;
+
+function ChatComponent() {
+  const { messages } = useChat(textOptions);
+  
+  // messages is now fully typed with tool names and outputs!
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>{m.role}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Hybrid Tools
+
+Tools can be implemented for both server and client, enabling flexible execution patterns:
+
+```typescript group=tools
+import { toolDefinition, chat } from "@tanstack/ai";
+import { openaiText } from "@tanstack/ai-openai";
+import { z } from "zod";
+import { db } from "./db";
+
+// Define once
+const addToCartDef = toolDefinition({
+  name: "add_to_cart",
+  description: "Add item to shopping cart",
+  inputSchema: z.object({
+    itemId: z.string(),
+    quantity: z.number(),
+  }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    cartId: z.string(),
+  }),
+  needsApproval: true,
+});
+
+// Server implementation - Store in database
+const addToCartServer = addToCartDef.server(async (input) => {
+  const cart = await db.carts.create({
+    data: { itemId: input.itemId, quantity: input.quantity },
+  });
+  return { success: true, cartId: cart.id };
+});
+
+// Client implementation - Update local wishlist
+const addToCartClient = addToCartDef.client((input) => {
+  const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+  wishlist.push(input.itemId);
+  localStorage.setItem("wishlist", JSON.stringify(wishlist));
+  return { success: true, cartId: "local" };
+});
+```
+
+On the server, pass either the definition (for client execution) or the server implementation — in separate `chat()` calls:
+
+```typescript group=tools
+const messages = [{ role: 'user' as const, content: 'Add item abc to my cart' }]
+
+// Pass the definition: the client will execute the tool
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages,
+  tools: [addToCartDef],
+});
+
+// Or pass the server implementation: the server will execute the tool
+chat({
+  adapter: openaiText("gpt-5.5"),
+  messages,
+  tools: [addToCartServer],
+});
+```
+
+## Type Safety Benefits
+
+The isomorphic architecture provides complete type safety:
+
+```tsx
+import { useChat } from "@tanstack/ai-react";
+import { fetchServerSentEvents } from "@tanstack/ai-client";
+
+function CartChat() {
+  const { messages: uiMessages } = useChat({
+    connection: fetchServerSentEvents("/api/chat"),
+  });
+
+  // In your React component
+  uiMessages.forEach((message) => {
+    message.parts.forEach((part) => {
+      if (part.type === 'tool-call' && part.name === 'add_to_cart') {
+        // ✅ TypeScript knows part.name is literally 'add_to_cart'
+        // ✅ part.input is typed as { itemId: string, quantity: number }
+        // ✅ part.output is typed as { success: boolean, cartId: string } | undefined
+        
+        if (part.output) {
+          console.log(part.output.cartId); // ✅ Fully typed!
+        }
+      }
+    });
+  });
+
+  return null;
+}
+```
+
+## Tool Execution Flow
+
+1. **Model decides to call a tool** - Based on user input and tool descriptions
+2. **Tool is identified** - Server or client implementation
+3. **Tool executes** - Automatically on server or client
+4. **Result is returned** - To the model as a tool result message
+5. **Model continues** - Uses the result to generate a response
+
+## Progress Events and Runtime Context
+
+A server tool's `.server()` implementation receives a second argument, the `ToolExecutionContext` — `{ context, toolCallId, emitCustomEvent }`. Use `emitCustomEvent` to stream typed progress to the client while the tool runs, and `context` to read request-scoped dependencies (auth, DB clients, etc.):
+
+```typescript
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+
+type ImportContext = {
+  db: {
+    read(source: string): Promise<unknown[]>;
+    write(rows: unknown[]): Promise<void>;
+  };
+};
+
+const importDataDef = toolDefinition({
+  name: "import_data",
+  description: "Import data from a source",
+  inputSchema: z.object({ source: z.string() }),
+  outputSchema: z.object({ imported: z.number() }),
+});
+
+const importData = importDataDef.server<ImportContext>(async (input, { context, emitCustomEvent }) => {
+  emitCustomEvent("progress", { step: 1, total: 3 });
+  const rows = await context.db.read(input.source);
+
+  emitCustomEvent("progress", { step: 2, total: 3 });
+  await context.db.write(rows);
+
+  emitCustomEvent("progress", { step: 3, total: 3 });
+  return { imported: rows.length };
+});
+```
+
+See [Server Tools](/ai/tools/server-tools) for the full runtime-context pattern.
+
+## Tool States
+
+Tools go through different states during execution:
+
+- `awaiting-input` - Tool call received, waiting for arguments
+- `input-streaming` - Partial arguments being streamed
+- `input-complete` - All arguments received
+- `approval-requested` - Tool requires user approval (if `needsApproval: true`)
+- `approval-responded` - User has approved/denied
+
+Once arguments (and approval, if required) are in, the result appears as `part.output` on the tool-call part and as a separate sibling `tool-result` part whose `state` is `complete` or `error`. See [Tool Architecture](/ai/tools/tool-architecture) for the full state model.
+
+> **Tip:** If your use case involves calling multiple tools with complex logic (filtering, aggregation, parallel calls), consider [Code Mode](/ai/code-mode/code-mode) — it lets the LLM write a TypeScript program that orchestrates tools in a single execution instead of one tool call at a time.
+
+## Next Steps
+
+- [Server Tools](/ai/tools/server-tools) - Learn about server-side tool execution
+- [Client Tools](/ai/tools/client-tools) - Learn about client-side tool execution
+- [Tool Approval Flow](/ai/tools/tool-approval) - Implement approval workflows
+- [How Tools Work](/ai/tools/tool-architecture) - Deep dive into the tool architecture
+- [MCP Server Tools](/ai/tools/mcp) - Connect to external MCP servers for additional tools
diff --git a/mintlify/attribution.mdx b/mintlify/attribution.mdx
new file mode 100644
index 000000000..418b61e75
--- /dev/null
+++ b/mintlify/attribution.mdx
@@ -0,0 +1,39 @@
+---
+title: "Attribution and provenance"
+description: "Source repositories, pinned commits, licenses, and scope for this TanStack documentation port."
+---
+
+This repository is a community port and is not affiliated with or endorsed by TanStack. The documentation content remains attributable to the TanStack contributors. Each source repository includes an MIT license; verbatim copies of those licenses are stored in the `licenses` directory of this Mintlify project.
+
+| Product | Canonical source | Pinned commit | License |
+| --- | --- | --- | --- |
+| TanStack Start | [TanStack/router](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/docs/start) | `a3e24c35a58d` | MIT |
+| TanStack Router | [TanStack/router](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/docs/router) | `a3e24c35a58d` | MIT |
+| TanStack Query | [TanStack/query](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/docs) | `bb68fa0aa147` | MIT |
+| TanStack Table | [TanStack/table](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/docs) | `d08af367e11c` | MIT |
+| TanStack Form | [TanStack/form](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/docs) | `6a73479f2c26` | MIT |
+| TanStack DB | [TanStack/db](https://github.com/TanStack/db/tree/18ba740bcbab78f5ae1c31c784ed42d1dae5ba38/docs) | `18ba740bcbab` | MIT |
+| TanStack AI | [TanStack/ai](https://github.com/TanStack/ai/tree/e3de949575eac8301c0449afa3a91ef450e9580b/docs) | `e3de949575ea` | MIT |
+| TanStack Intent | [TanStack/intent](https://github.com/TanStack/intent/tree/6039a2629c2505de8715746b33be93b2518ad40b/docs) | `6039a2629c25` | MIT |
+| TanStack Virtual | [TanStack/virtual](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/docs) | `850947a42dc3` | MIT |
+| TanStack Pacer | [TanStack/pacer](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/docs) | `cac705b14f7b` | MIT |
+| TanStack Hotkeys | [TanStack/hotkeys](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/docs) | `6adcc3a1b0a2` | MIT |
+| TanStack Store | [TanStack/store](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/docs) | `78e3f862196a` | MIT |
+| TanStack Ranger | [TanStack/ranger](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/docs) | `fef45175e2f3` | MIT |
+| TanStack Config | [TanStack/config](https://github.com/TanStack/config/tree/695e782edc39b6907f79e51f4d56dc15af97df60/docs) | `695e782edc39` | MIT |
+| TanStack Devtools | [TanStack/devtools](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/docs) | `92f69d014a98` | MIT |
+| TanStack CLI | [TanStack/cli](https://github.com/TanStack/cli/tree/12c31dfb429ec057af9ddc5f85f492b0b0b22979/docs) | `12c31dfb429e` | MIT |
+
+## Migration scope
+
+- 2,720 Markdown/MDX source pages copied from the current `main` branches.
+- 606 link pages generated for examples and API references that TanStack.com builds dynamically rather than storing as standalone Markdown.
+- 12 additional link-target pages generated to preserve cross-references emitted by upstream API documentation generators.
+- 3,326 pages represented in the Mintlify navigation.
+- Assets under each product's documentation directory copied with their relative paths intact.
+- Current documentation only. Historical version branches remain available on the [official TanStack site](https://tanstack.com/).
+- 606 upstream navigation targets were preserved as generated link pages and are recorded in `migration-report.json`.
+
+## Content fidelity
+
+TanStack's GitHub-flavored Markdown is retained as plain Markdown wherever possible. Internal links to current TanStack docs are rewritten to this Mintlify site's product paths. TanStack-specific comment directives remain in the source; their enclosed content is preserved even where Mintlify renders it as ordinary sequential Markdown instead of the original interactive widget.
diff --git a/mintlify/cli/add-ons.md b/mintlify/cli/add-ons.md
new file mode 100644
index 000000000..8d4e24a14
--- /dev/null
+++ b/mintlify/cli/add-ons.md
@@ -0,0 +1,31 @@
+---
+id: add-ons
+title: Add-ons
+---
+
+Add-ons extend your project with auth, databases, deployment, and more.
+
+```bash
+tanstack create my-app --add-ons tanstack-query,clerk,drizzle
+```
+
+## Discover Add-ons
+
+```bash
+# List all available add-ons
+tanstack create --list-add-ons
+
+# Show details for a specific add-on (dependencies, options, conflicts)
+tanstack create --addon-details clerk
+```
+
+## What Add-ons Provide
+
+- **Files**: Source code in `src/integrations/`, demo routes in `src/routes/demo/`
+- **Dependencies**: Merged into `package.json`
+- **Hooks**: Code injection (providers, Vite plugins, devtools)
+- **Env vars**: Added to `.env.example`
+
+## Create Custom Add-ons
+
+See [Creating Add-ons](/cli/creating-add-ons).
diff --git a/mintlify/cli/cli-reference.md b/mintlify/cli/cli-reference.md
new file mode 100644
index 000000000..a359c042c
--- /dev/null
+++ b/mintlify/cli/cli-reference.md
@@ -0,0 +1,313 @@
+---
+id: cli-reference
+title: CLI Reference
+---
+
+## tanstack create
+
+Create a new TanStack application. By default creates a TanStack Start app with SSR.
+
+```bash
+tanstack create [project-name] [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--add-ons <ids>` | Comma-separated add-on IDs |
+| `--template <url-or-id>` | Template URL/path or built-in template ID |
+| `--package-manager <pm>` | `npm`, `pnpm`, `yarn`, `bun`, `deno` |
+| `--framework <name>` | `React`, `Solid` |
+| `--router-only` | Create file-based Router-only app without TanStack Start (add-ons/deployment/template disabled) |
+| `--toolchain <id>` | Toolchain add-on (use `--list-add-ons` to see options) |
+| `--deployment <id>` | Deployment add-on (use `--list-add-ons` to see options) |
+| `--examples` / `--no-examples` | Include or exclude demo/example pages |
+| `--tailwind` / `--no-tailwind` | Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) |
+| `--no-git` | Skip git init |
+| `--no-install` | Skip dependency install |
+| `-y, --yes` | Use defaults, skip prompts |
+| `--interactive` | Force interactive mode |
+| `--target-dir <path>` | Custom output directory |
+| `-f, --force` | Overwrite existing directory |
+| `--list-add-ons` | List all available add-ons |
+| `--addon-details <id>` | Show details for specific add-on |
+| `--json` | Output machine-readable JSON for automation |
+| `--add-on-config <json>` | JSON string with add-on options |
+
+```bash
+# Examples
+tanstack create my-app -y
+tanstack create my-app --add-ons clerk,drizzle,tanstack-query
+tanstack create my-app --router-only --toolchain eslint --no-examples
+tanstack create my-app --template https://example.com/template.json
+tanstack create my-app --template ecommerce
+tanstack create --list-add-ons --framework React --json
+tanstack create --addon-details drizzle --framework React --json
+```
+
+### Programmatic generation
+
+Use `@tanstack/create/worker` in Cloudflare Workers and other edge SSR runtimes. It does not import the generated template manifest at module startup. Instead, provide a loader for the framework and add-on chunks your Worker supports.
+
+The default `@tanstack/create` export is still the Node/CLI path and scans framework templates from disk. `@tanstack/create/edge` remains the bundled in-memory manifest path; it is Worker-compatible at runtime, but it imports the full generated manifest and is not appropriate for size-constrained Worker bundles.
+
+```ts
+import {
+  createMemoryEnvironment,
+  createWorkerCreate,
+  createWorkerManifestLoader,
+} from '@tanstack/create/worker'
+import { manifestCatalog } from '@tanstack/create/worker-manifest/catalog'
+
+import type {
+  WorkerAddOnManifestModule,
+  WorkerFrameworkManifestModule,
+} from '@tanstack/create/worker'
+
+const frameworkLoaders: Record<
+  string,
+  () => Promise<WorkerFrameworkManifestModule>
+> = {
+  react: () => import('@tanstack/create/worker-manifest/frameworks/react'),
+}
+
+const addOnLoaders: Record<
+  string,
+  Record<string, () => Promise<WorkerAddOnManifestModule>>
+> = {
+  react: {
+    'tanstack-query': () =>
+      import(
+        '@tanstack/create/worker-manifest/frameworks/react/add-ons/tanstack-query'
+      ),
+    cloudflare: () =>
+      import(
+        '@tanstack/create/worker-manifest/frameworks/react/add-ons/cloudflare'
+      ),
+  },
+}
+
+const create = createWorkerCreate(
+  createWorkerManifestLoader({
+    loadCatalog: async () => manifestCatalog,
+    async loadFramework(frameworkId) {
+      const load = frameworkLoaders[frameworkId]
+      if (!load) throw new Error(`Unsupported framework: ${frameworkId}`)
+      return load()
+    },
+    async loadAddOn(frameworkId, addOnId) {
+      const load = addOnLoaders[frameworkId]?.[addOnId]
+      if (!load) throw new Error(`Unsupported add-on: ${addOnId}`)
+      return load()
+    },
+  }),
+)
+
+const framework = await create.getFrameworkById('react')
+const chosenAddOns = await create.finalizeAddOns(framework!, 'file-router', [
+  'tanstack-query',
+  'cloudflare',
+])
+const addOnOptions = create.populateAddOnOptionsDefaults(chosenAddOns)
+const { environment, output } = createMemoryEnvironment('/app')
+
+await create.createApp(environment, {
+  projectName: 'app',
+  targetDir: '/app',
+  framework: framework!,
+  mode: 'file-router',
+  typescript: true,
+  tailwind: true,
+  packageManager: 'pnpm',
+  git: false,
+  install: false,
+  intent: false,
+  chosenAddOns,
+  addOnOptions,
+})
+
+// output.files contains generated files for ZIP creation.
+```
+
+---
+
+## tanstack add
+
+Add add-ons to an existing project.
+
+```bash
+tanstack add [add-on...] [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--forced` | Force add-on installation even if conflicts exist |
+
+```bash
+# Examples
+tanstack add clerk drizzle
+tanstack add tanstack-query,tanstack-form
+```
+
+Visual setup is available at `https://tanstack.com/builder`.
+
+---
+
+## tanstack add-on
+
+Create and manage custom add-ons.
+
+### init
+
+Extract add-on from current project:
+
+```bash
+tanstack add-on init
+```
+
+Creates `.add-on/` folder with `info.json` and `assets/`.
+
+### compile
+
+Rebuild after changes:
+
+```bash
+tanstack add-on compile
+```
+
+See [Creating Add-ons](/cli/creating-add-ons) for full guide.
+
+---
+
+## tanstack template
+
+Create reusable project templates.
+
+### init
+
+```bash
+tanstack template init
+```
+
+Creates `template-info.json` and `template.json`.
+
+### compile
+
+```bash
+tanstack template compile
+```
+
+See [Templates](/cli/templates) for full guide.
+
+## tanstack libraries
+
+List TanStack libraries with optional group filtering.
+
+```bash
+tanstack libraries [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--group <group>` | Filter by group: `state`, `headlessUI`, `performance`, `tooling` |
+| `--json` | Output machine-readable JSON |
+
+```bash
+tanstack libraries
+tanstack libraries --group state --json
+```
+
+---
+
+## tanstack doc
+
+Fetch a TanStack documentation page by library and path.
+
+```bash
+tanstack doc <library> <path> [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--docs-version <version>` | Docs version (default: `latest`) |
+| `--json` | Output machine-readable JSON |
+
+```bash
+tanstack doc router framework/react/guide/data-loading
+tanstack doc query framework/react/overview --docs-version v5 --json
+```
+
+---
+
+## tanstack search-docs
+
+Search TanStack documentation.
+
+```bash
+tanstack search-docs <query> [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--library <id>` | Filter by library ID |
+| `--framework <name>` | Filter by framework |
+| `--limit <n>` | Max results (default `10`, max `50`) |
+| `--json` | Output machine-readable JSON |
+
+```bash
+tanstack search-docs "server functions" --library start
+tanstack search-docs loaders --library router --framework react --json
+```
+
+---
+
+## tanstack ecosystem
+
+List ecosystem partner recommendations.
+
+```bash
+tanstack ecosystem [options]
+```
+
+| Option | Description |
+|--------|-------------|
+| `--category <category>` | Filter by category |
+| `--library <id>` | Filter by TanStack library |
+| `--json` | Output machine-readable JSON |
+
+```bash
+tanstack ecosystem --category database
+tanstack ecosystem --library router --json
+```
+
+---
+
+## tanstack pin-versions
+
+Pin TanStack package versions to avoid conflicts.
+
+```bash
+tanstack pin-versions
+```
+
+Removes `^` from version ranges for TanStack packages and adds any missing peer dependencies.
+
+---
+
+## Configuration
+
+Projects include `.tanstack.json`:
+
+```json
+{
+  "version": 1,
+  "projectName": "my-app",
+  "framework": "react",
+  "mode": "file-router",
+  "typescript": true,
+  "tailwind": true,
+  "packageManager": "pnpm",
+  "chosenAddOns": ["tanstack-query", "clerk"]
+}
+```
+
+Used by `add-on init` and `template init` to detect changes.
diff --git a/mintlify/cli/creating-add-ons.md b/mintlify/cli/creating-add-ons.md
new file mode 100644
index 000000000..6be61388c
--- /dev/null
+++ b/mintlify/cli/creating-add-ons.md
@@ -0,0 +1,223 @@
+---
+id: creating-add-ons
+title: Creating Add-ons
+---
+
+Add-ons add files, dependencies, and code hooks to generated projects.
+
+Use this guide when you want to build and maintain your own add-on outside the built-in catalog.
+
+## Quick Start
+
+```bash
+# 1. Create base project
+tanstack create my-addon-dev -y
+
+# 2. Add your code
+#    - src/integrations/my-feature/
+#    - src/routes/demo/my-feature.tsx
+#    - Update package.json
+
+# 3. Extract add-on
+tanstack add-on init
+
+# 4. Edit .add-on/info.json
+
+# 5. Compile
+tanstack add-on compile
+
+# Optional: continuously rebuild while authoring
+tanstack add-on dev
+
+# 6. Test locally
+npx serve .add-on -l 9080
+tanstack create test --add-ons http://localhost:9080/info.json
+```
+
+## Structure
+
+```
+.add-on/
+├── info.json        # Metadata (required)
+├── package.json     # Dependencies (optional)
+└── assets/          # Files to copy
+    └── src/
+        ├── integrations/my-feature/
+        └── routes/demo/my-feature.tsx
+```
+
+Generated source of truth files in your project root:
+
+- `.add-on/info.json` - add-on metadata and integration config
+- `.add-on/package.json` - dependency/script additions merged into generated apps
+- `.add-on/assets/**` - template files copied into target apps
+
+## info.json
+
+Required fields:
+
+```json
+{
+  "name": "My Feature",
+  "version": "0.0.1",
+  "description": "What it does",
+  "type": "add-on",
+  "phase": "add-on",
+  "category": "tooling",
+  "modes": ["file-router"]
+}
+```
+
+| Field | Values |
+|-------|--------|
+| `version` | Semantic version for your add-on metadata (e.g. `0.0.1`) |
+| `type` | `add-on`, `toolchain`, `deployment`, `example` |
+| `phase` | `setup`, `add-on`, `example` |
+| `category` | `tanstack`, `auth`, `database`, `orm`, `deploy`, `tooling`, `monitoring`, `api`, `i18n`, `cms`, `other` |
+
+Optional fields:
+
+```json
+{
+  "dependsOn": ["tanstack-query"],
+  "conflicts": ["other-feature"],
+  "envVars": [{ "name": "API_KEY", "description": "...", "required": true }],
+  "gitignorePatterns": ["*.cache"]
+}
+```
+
+## Hooks (Integrations)
+
+Inject code into generated projects:
+
+```json
+{
+  "integrations": [
+    {
+      "type": "root-provider",
+      "jsName": "MyProvider",
+      "path": "src/integrations/my-feature/provider.tsx"
+    }
+  ]
+}
+```
+
+| Type | Location | Use |
+|------|----------|-----|
+| `root-provider` | Wraps app in `__root.tsx` | Context providers |
+| `provider` | Same, but simpler | Basic providers |
+| `vite-plugin` | `vite.config.ts` | Vite plugins |
+| `devtools` | After app in `__root.tsx` | Devtools |
+| `header-user` | Header component | User menu, auth UI |
+| `layout` | Layout wrapper | Dashboard layouts |
+
+## Demo Routes
+
+```json
+{
+  "routes": [
+    {
+      "url": "/demo/my-feature",
+      "name": "My Feature Demo",
+      "path": "src/routes/demo/my-feature.tsx",
+      "jsName": "MyFeatureDemo"
+    }
+  ]
+}
+```
+
+## Add-on Options
+
+Let users configure the add-on:
+
+```json
+{
+  "options": {
+    "database": {
+      "type": "select",
+      "label": "Database",
+      "options": [
+        { "value": "postgres", "label": "PostgreSQL" },
+        { "value": "sqlite", "label": "SQLite" }
+      ],
+      "default": "postgres"
+    }
+  }
+}
+```
+
+Access in EJS templates:
+
+```ejs
+<% if (addOnOption['my-feature']?.database === 'postgres') { %>
+// PostgreSQL code
+<% } %>
+```
+
+## EJS Templates
+
+Files ending in `.ejs` are processed. Available variables:
+
+| Variable | Type | Description |
+|----------|------|-------------|
+| `projectName` | string | Project name |
+| `typescript` | boolean | TS enabled |
+| `tailwind` | boolean | Tailwind enabled |
+| `addOnEnabled` | object | `{ [id]: boolean }` |
+| `addOnOption` | object | `{ [id]: options }` |
+
+File patterns:
+
+| Pattern | Result |
+|---------|--------|
+| `file.ts` | Copied as-is |
+| `file.ts.ejs` | EJS processed |
+| `_dot_gitignore` | Becomes `.gitignore` |
+| `file.ts.append` | Appended to existing |
+
+## Distribution
+
+Host on GitHub, npm, or any URL:
+
+```bash
+tanstack create my-app --add-ons https://example.com/my-addon/info.json
+```
+
+### Local Iteration Loop
+
+Fastest way to iterate on a custom add-on:
+
+```bash
+# in your add-on project
+tanstack add-on compile
+npx serve .add-on -l 9080
+
+# in another terminal
+tanstack create test-app --add-ons http://localhost:9080/info.json
+```
+
+If you are actively editing templates, run `tanstack add-on dev` to auto-refresh `.add-on` and `add-on.json` on file changes.
+
+### Publishing Tips
+
+- Keep add-on source in git (not just compiled output).
+- Re-run `tanstack add-on compile` after each metadata/template change.
+- Publish `.add-on` contents to a stable URL.
+- Prefer immutable/versioned URLs for production use.
+
+## Maintenance Checklist
+
+When you update a custom add-on:
+
+1. Update templates or metadata in your source project.
+2. Re-run `tanstack add-on compile`.
+3. Test with a clean scaffold (`tanstack create ... --add-ons <url>`).
+4. Verify install/build/lint in the generated app.
+5. Publish updated `.add-on` assets.
+
+## Troubleshooting
+
+- **Add-on not found**: Verify URL points directly to `info.json`.
+- **Template not applied**: Ensure file is in `.add-on/assets` and ends with `.ejs` if templated.
+- **Option not taking effect**: Confirm option key matches `addOnOption['<id>']` usage in template.
+- **Integration code not injected**: Check `integrations[].type`, `jsName`, and `path` in `.add-on/info.json`.
diff --git a/mintlify/cli/examples.md b/mintlify/cli/examples.md
new file mode 100644
index 000000000..b99a3792a
--- /dev/null
+++ b/mintlify/cli/examples.md
@@ -0,0 +1,76 @@
+---
+id: examples
+title: Examples
+---
+
+## Basic Usage
+
+```bash
+# TanStack Start app (default, with SSR)
+tanstack create my-app -y
+
+# Router-only SPA (no SSR)
+tanstack create my-app --router-only -y
+
+# Interactive mode to pick add-ons
+tanstack create my-app --interactive
+```
+
+For visual setup, use `https://tanstack.com/builder`.
+
+## Using Add-ons
+
+```bash
+# List available add-ons
+tanstack create --list-add-ons
+
+# See add-on details (dependencies, conflicts, options)
+tanstack create --addon-details <id>
+
+# Create with specific add-ons
+tanstack create my-app --add-ons <id1>,<id2>,<id3>
+
+# Add to existing project
+tanstack add <id1> <id2>
+```
+
+## Recipes
+
+### Full-Stack App
+
+```bash
+tanstack create my-app
+cd my-app
+cp .env.example .env
+# Edit .env with API keys
+pnpm dev
+```
+
+## CI/CD
+
+### GitHub Actions
+
+```yaml
+name: Create Project
+on:
+  workflow_dispatch:
+    inputs:
+      name:
+        required: true
+jobs:
+  create:
+    runs-on: ubuntu-latest
+    steps:
+      - run: npx @tanstack/cli create ${{ inputs.name }} -y
+```
+
+### Docker
+
+```dockerfile
+FROM node:20-slim
+RUN npm install -g @tanstack/cli pnpm
+RUN tanstack create app -y
+WORKDIR /app
+RUN pnpm install && pnpm build
+CMD ["pnpm", "start"]
+```
diff --git a/mintlify/cli/index.mdx b/mintlify/cli/index.mdx
new file mode 100644
index 000000000..18578031c
--- /dev/null
+++ b/mintlify/cli/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack CLI"
+description: "Project creation, add-ons, and ecosystem tooling. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Project creation, add-ons, and ecosystem tooling.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/cli/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/cli">
+    Visit the canonical TanStack CLI website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/cli">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/cli/installation.md b/mintlify/cli/installation.md
new file mode 100644
index 000000000..31fb1e5df
--- /dev/null
+++ b/mintlify/cli/installation.md
@@ -0,0 +1,23 @@
+---
+id: installation
+title: Installation
+---
+
+## npx (Recommended)
+
+```bash
+npx @tanstack/cli create my-app
+```
+
+## Global
+
+```bash
+npm install -g @tanstack/cli
+# or: pnpm add -g @tanstack/cli
+
+tanstack create my-app
+```
+
+## Requirements
+
+- Node.js 18+
diff --git a/mintlify/cli/mcp-migration.md b/mintlify/cli/mcp-migration.md
new file mode 100644
index 000000000..e0b1ab65f
--- /dev/null
+++ b/mintlify/cli/mcp-migration.md
@@ -0,0 +1,38 @@
+---
+id: mcp-migration
+title: MCP Migration
+---
+
+`tanstack mcp` has been removed from the CLI.
+
+Use direct CLI commands for agent introspection and automation.
+
+## Command Mapping
+
+| Old MCP Tool | New CLI Command |
+|---|---|
+| `listTanStackAddOns` | `tanstack create --list-add-ons --framework React --json` |
+| `getAddOnDetails` | `tanstack create --addon-details drizzle --framework React --json` |
+| `createTanStackApplication` | `tanstack create my-app --framework React --add-ons drizzle,clerk` |
+| `tanstack_list_libraries` | `tanstack libraries --json` |
+| `tanstack_doc` | `tanstack doc query framework/react/overview --json` |
+| `tanstack_search_docs` | `tanstack search-docs "server functions" --library start --json` |
+| `tanstack_ecosystem` | `tanstack ecosystem --category database --json` |
+
+## Recommended Agent Workflow
+
+Use JSON output for deterministic parsing:
+
+```bash
+tanstack create --list-add-ons --framework React --json
+tanstack create --addon-details tanstack-query --framework React --json
+tanstack libraries --json
+tanstack search-docs "loaders" --library router --framework react --json
+tanstack ecosystem --category auth --json
+```
+
+## Important Notes
+
+- The CLI MCP server is removed and will not be restored.
+- Existing MCP client configs pointing to `@tanstack/cli mcp` will break and should be removed.
+- The app-level `mcp` add-on is still available for projects that want to host their own MCP endpoints.
diff --git a/mintlify/cli/overview.md b/mintlify/cli/overview.md
new file mode 100644
index 000000000..06605a974
--- /dev/null
+++ b/mintlify/cli/overview.md
@@ -0,0 +1,22 @@
+---
+id: overview
+title: Overview
+---
+
+Scaffold TanStack Start & Router applications with add-ons for auth, databases, deployment, and more.
+
+```bash
+npx @tanstack/cli create my-app
+```
+
+## Features
+
+- **Add-ons** - Auth, database, deployment, monitoring ([full list](/cli/add-ons))
+- **Templates** - Reusable project templates ([docs](/cli/templates))
+- **CLI Introspection** - Discover add-ons, docs, libraries, and ecosystem data directly from CLI
+
+## Next Steps
+
+- [Quick Start](/cli/quick-start) - Create your first project
+- [CLI Reference](/cli/cli-reference) - All commands and options
+- [MCP Migration](/cli/mcp-migration) - Move MCP-based workflows to CLI commands
diff --git a/mintlify/cli/quick-start.md b/mintlify/cli/quick-start.md
new file mode 100644
index 000000000..2184297d8
--- /dev/null
+++ b/mintlify/cli/quick-start.md
@@ -0,0 +1,60 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+## Create a Project
+
+```bash
+npx @tanstack/cli create my-app
+```
+
+Interactive prompts guide you through project name, package manager, and add-on selection.
+
+## Non-Interactive
+
+```bash
+# Defaults only (TanStack Start + file-router)
+npx @tanstack/cli create my-app -y
+
+# With add-ons
+npx @tanstack/cli create my-app --add-ons tanstack-query,clerk,drizzle
+
+# Router-only SPA (no SSR)
+npx @tanstack/cli create my-app --router-only
+```
+
+## Run the Project
+
+```bash
+cd my-app
+pnpm dev
+# Open http://localhost:3000
+```
+
+## Environment Variables
+
+Some add-ons require API keys. After creation:
+
+```bash
+cp .env.example .env
+# Edit .env with your values
+```
+
+## Project Structure
+
+```
+my-app/
+├── src/
+│   ├── routes/          # File-based routing
+│   │   ├── __root.tsx   # Root layout
+│   │   └── index.tsx    # Home page
+│   └── integrations/    # Add-on integration code
+├── .tanstack.json       # CLI config
+└── .env.example         # Required env vars
+```
+
+## Next Steps
+
+- [CLI Reference](/cli/cli-reference) - All options
+- [Add-ons](/cli/add-ons) - Available add-ons
diff --git a/mintlify/cli/starters.md b/mintlify/cli/starters.md
new file mode 100644
index 000000000..9984c60e1
--- /dev/null
+++ b/mintlify/cli/starters.md
@@ -0,0 +1,6 @@
+---
+id: starters
+title: Starters (Legacy)
+---
+
+This page has moved to [Templates](/cli/templates).
diff --git a/mintlify/cli/templates.md b/mintlify/cli/templates.md
new file mode 100644
index 000000000..28bf827b5
--- /dev/null
+++ b/mintlify/cli/templates.md
@@ -0,0 +1,48 @@
+---
+id: templates
+title: Templates
+---
+
+Templates are reusable starting points for projects. They include source files and metadata, and can also declare add-on dependencies.
+
+## Use a Template
+
+```bash
+tanstack create my-app --template ecommerce
+tanstack create my-app --template https://example.com/template.json
+tanstack create my-app --template ./template.json
+```
+
+`--template` accepts both URL/path values and built-in template IDs.
+
+## Create a Template
+
+```bash
+# 1. Create a project with the shape you want
+tanstack create my-template --add-ons clerk,drizzle,sentry
+
+# 2. Initialize template metadata
+cd my-template
+tanstack template init
+
+# 3. Edit template-info.json, then compile the output JSON
+tanstack template compile
+
+# 4. Use or distribute the compiled template file
+tanstack create new-app --template ./template.json
+```
+
+## Maintain a Template
+
+When the source project changes:
+
+```bash
+cd my-template
+tanstack template compile
+```
+
+Then publish the updated `template.json` to the URL your team uses.
+
+## Registry Format
+
+Registry entries can expose templates under `templates` or `starters`.
diff --git a/mintlify/cli/troubleshooting.md b/mintlify/cli/troubleshooting.md
new file mode 100644
index 000000000..1baec8b3a
--- /dev/null
+++ b/mintlify/cli/troubleshooting.md
@@ -0,0 +1,104 @@
+---
+id: troubleshooting
+title: Troubleshooting
+---
+
+## Installation
+
+### Command not found
+
+```bash
+# Use npx instead
+npx @tanstack/cli create my-app
+
+# Or reinstall globally
+npm install -g @tanstack/cli
+```
+
+### Permission denied
+
+Use a Node version manager:
+
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+nvm install 20
+```
+
+### Node too old
+
+Requires Node.js 18+:
+
+```bash
+node --version  # Check
+nvm install 20  # Upgrade
+```
+
+## Project Creation
+
+### Directory exists
+
+```bash
+tanstack create my-app-v2              # Different name
+tanstack create my-app --target-dir ./new/path  # Different path
+tanstack create my-app -f              # Force overwrite
+```
+
+### Add-on fetch failed
+
+Check internet. Or use local:
+
+```bash
+git clone https://github.com/TanStack/cli.git
+cd cli && pnpm install && pnpm build
+node packages/cli/dist/index.js create my-app
+```
+
+### Conflicting add-ons
+
+Some add-ons conflict with each other (e.g., multiple ORMs, multiple auth providers). Use `--addon-details <id>` to see what conflicts with what:
+
+```bash
+tanstack create --addon-details clerk
+```
+
+## Runtime
+
+### Missing env vars
+
+```bash
+cp .env.example .env
+# Edit .env with your values
+pnpm dev  # Restart
+```
+
+### Tailwind not working
+
+Check `.tanstack.json` has `"tailwind": true` and `styles.css` imports `@import 'tailwindcss'`.
+
+## MCP Server Removal
+
+`tanstack mcp` has been removed from the CLI. Use the CLI introspection commands instead:
+
+```bash
+tanstack create --list-add-ons --json
+tanstack create --addon-details clerk --json
+tanstack libraries --json
+tanstack search-docs "server functions" --library start --json
+tanstack ecosystem --category database --json
+```
+
+If you need MCP in your generated app, keep using the `mcp` add-on during app creation.
+
+See [MCP Migration](/cli/mcp-migration) for command-by-command replacements.
+
+## Getting Help
+
+Include when reporting:
+- `npx @tanstack/cli --version`
+- `node --version`
+- OS and package manager
+- Full error message
+
+Links:
+- [GitHub Issues](https://github.com/TanStack/cli/issues)
+- [Discord](https://tlinz.com/discord)
diff --git a/mintlify/config/ci-cd.md b/mintlify/config/ci-cd.md
new file mode 100644
index 000000000..3f20b8ac1
--- /dev/null
+++ b/mintlify/config/ci-cd.md
@@ -0,0 +1,30 @@
+---
+id: ci-cd
+title: CI/CD
+---
+
+## GitHub Workflows
+
+- `pr.yml`:
+  - Runs tests for all pull requests
+  - Runs `nx affected`, which only executes tasks with invalidated cache
+  - Also uses `pkg-pr-new` to publish package previews and create links to our examples
+- `release.yml`:
+  - Runs tests for code merged into release branches
+  - Runs `nx run-many`, which executes all tasks and ensures the outputs are present (necessary for publishing builds)
+  - Uses [Changesets](https://github.com/changesets/changesets) to handle versioning and publishing
+
+## Nx
+
+The TanStack projects use Nx to enable rapid execution of our tests and builds. Tasks are parallelised and cached both locally and in CI. While Nx has an extensive plugin system, we only utilise Nx as an NPM script runner.
+
+### Config Files
+
+- `./nx.json`: Main config file, which defines task dependencies, inputs, and outputs
+- `./package.json`: Need to manually specify root-level scripts (e.g. `test:eslint`)
+- `./**/package.json`: Package-level scripts (e.g. `build`) are automatically detected
+
+### Nx Agents
+
+- Nx allows you to distribute your tasks across multiple CI machines, increasing the number of jobs that can be run in parallel
+- Please note that this does incur quite a significant startup delay
diff --git a/mintlify/config/dependencies.md b/mintlify/config/dependencies.md
new file mode 100644
index 000000000..62b4e530b
--- /dev/null
+++ b/mintlify/config/dependencies.md
@@ -0,0 +1,21 @@
+---
+id: dependencies
+title: Dependencies
+---
+
+We use 3 separate tools to help manage our dependencies and prevent us from unnecessarily bloating the `node_modules` directory.
+
+### Sherif
+
+- Sherif ensures that all references to a dependency throughout the monorepo are on the same version
+- This helps avoid pnpm resolution issues, such as type conflicts from having 2+ incompatible versions of the same dependency installed
+
+### Knip
+
+- Knip is able to detect unused dependencies within `package.json` files
+- This leads to fewer packages getting installed unnecessarily by developers
+
+### Renovate
+
+- Renovate is a bot which runs on GitHub to scan for outdated or insecure dependencies
+- This reduces the burden on maintainers by automatically submitting PRs
diff --git a/mintlify/config/eslint.md b/mintlify/config/eslint.md
new file mode 100644
index 000000000..16fb7b72d
--- /dev/null
+++ b/mintlify/config/eslint.md
@@ -0,0 +1,46 @@
+---
+id: eslint
+title: ESLint
+---
+
+## Purpose
+
+This package unifies the shared ESLint config used across all TanStack projects. It is designed to be framework-agnostic, and does not include any framework-specific plugins.
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+pnpm add -D @tanstack/eslint-config
+```
+
+## Setup
+
+### package.json
+
+- Make sure you have ESLint v9+ installed
+
+### eslint.config.js
+
+```js
+import { tanstackConfig } from '@tanstack/eslint-config'
+
+export default [
+  ...tanstackConfig,
+  {
+    // Custom rules go here
+  },
+]
+```
+
+## Plugins
+
+- [@eslint/js](https://github.com/eslint/eslint) - The core ESLint rules
+- [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) - Enables TypeScript support
+- [eslint-plugin-import-x](https://github.com/un-ts/eslint-plugin-import-x) - Lints imports and exports
+- [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) - Useful rules for Node.js
+
+## Rules
+
+You can inspect the enabled rules by running `pnpm dlx @eslint/config-inspector`, or by browsing the source [here](https://github.com/TanStack/config/tree/main/packages/eslint-config). Each rule has a comment explaining why it is included in the shared config.
diff --git a/mintlify/config/index.mdx b/mintlify/config/index.mdx
new file mode 100644
index 000000000..b6b11293e
--- /dev/null
+++ b/mintlify/config/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Config"
+description: "Shared conventions and tooling for TypeScript packages. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Shared conventions and tooling for TypeScript packages.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/config/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/config">
+    Visit the canonical TanStack Config website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/config">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/config/overview.md b/mintlify/config/overview.md
new file mode 100644
index 000000000..0c1e2826e
--- /dev/null
+++ b/mintlify/config/overview.md
@@ -0,0 +1,29 @@
+---
+id: overview
+title: Overview
+---
+
+TanStack Config is a collection of tools we currently use between our projects to simplify configuration.
+
+## Required Pre-Requisites
+
+The following tools are required to use these packages:
+
+- [Node.js v20.17.0+](https://nodejs.org/en/download/current/)
+- [Git CLI](https://git-scm.com/downloads)
+- [GitHub CLI](https://cli.github.com/) (pre-installed on GitHub Actions)
+- [pnpm v10+](https://pnpm.io/)
+
+> pnpm is the only supported package manager for TanStack Config.
+
+## Utilities
+
+- [ESLint](/config/eslint)
+- [Publish](/config/publish)
+- [Vite](/config/vite)
+
+## Conventions
+
+- [CI/CD](/config/ci-cd)
+- [Dependencies](/config/dependencies)
+- [Package Structure](/config/package-structure)
diff --git a/mintlify/config/package-structure.md b/mintlify/config/package-structure.md
new file mode 100644
index 000000000..5f0b3d42f
--- /dev/null
+++ b/mintlify/config/package-structure.md
@@ -0,0 +1,36 @@
+---
+id: package-structure
+title: Package Structure
+---
+
+The following structure ensures packages work optimally with our monorepo/Nx workflow.
+
+### `./package.json`
+
+- All TanStack projects have `"type": "module"` to set the default resolution of `.js` files to ESM; this does not have any impact on building for CJS
+- It is also essential to have an `"exports"` field
+- For legacy reasons, you should also include the `"main"`, `"module"`, and `"types"` fields
+- All packages have the following scripts which are cached by Nx: `"test:eslint"`, `"test:types"`, `"test:lib"`, `"build"`, `"test:build"`
+
+### `./tsconfig.json`
+
+- Extends the root-level tsconfig (e.g. `"extends": "../../tsconfig.json"`)
+- Add any framework-specific options and included files here
+
+### `./src`
+
+- This folder should only include code which gets built and shipped to users
+- Tests should not be placed in this folder, as they bloat the shipped code, and can unintentionally invalidate the Nx cache
+
+### `./tests`
+
+- This folder should include all test files
+- It should also include any test setup files required by that framework
+
+### `./tsdown.config.ts`
+
+- Defines `tsdown` config, including any framework-specific plugins.
+
+### `./vitest.config.ts`
+
+- Defines config for Vitest
diff --git a/mintlify/config/publish.md b/mintlify/config/publish.md
new file mode 100644
index 000000000..dda5eff0e
--- /dev/null
+++ b/mintlify/config/publish.md
@@ -0,0 +1,64 @@
+---
+id: publish
+title: Publish
+---
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+pnpm add -D @tanstack/publish-config
+```
+
+## Usage
+
+To use the TanStack Config programmatically, you can import the `publish` function:
+
+```ts
+import { publish } from '@tanstack/publish-config'
+
+publish({
+  branchConfigs: configOpts.branchConfigs,
+  packages: configOpts.packages,
+  rootDir: configOpts.rootDir,
+  branch: process.env.BRANCH,
+  tag: process.env.TAG,
+  ghToken: process.env.GH_TOKEN,
+})
+  .then(() => {
+    console.log('Successfully published packages!')
+  })
+  .catch(console.error)
+```
+
+> The programmatic usage is only available for ESM packages. To support this, you have to have:
+>
+> ```json
+> &#123;
+>   "type": "module"
+> &#125;
+> ```
+>
+> in your `package.json` file and use `import` instead of `require`.
+
+## Trusted Publishing
+
+Trusted publishing is the new npm strategy to allow publishing packages without npm tokens, using OIDC authentication. It currently requires you to set up for each package individually; however, once enabled, no further interaction is required!
+
+### Step 1
+
+- If the package already has a published version on npm, you can skip this step.
+- If the package has never been published, you can publish a "placeholder" package to do the setup process. This CLI tool streamlines this: [setup-npm-trusted-publish](https://github.com/azu/setup-npm-trusted-publish)
+
+### Step 2
+
+- If you're only setting up one package, you can skip this step. Otherwise, the tools below help dramatically when setting up 5+ packages all at once.
+- [open-packages-on-npm](https://github.com/antfu/open-packages-on-npm)
+- [sxzz's userscript](https://github.com/sxzz/userscripts/blob/main/src/npm-trusted-publisher.md)
+
+### Step 3
+
+- Fill in the fields on the package's settings page, similar to this. You will need to authenticate with MFA to save these settings.
+
+![Settings](https://raw.githubusercontent.com/TanStack/config/refs/heads/main/media/trusted-publisher.png)
diff --git a/mintlify/config/vite.md b/mintlify/config/vite.md
new file mode 100644
index 000000000..942086f02
--- /dev/null
+++ b/mintlify/config/vite.md
@@ -0,0 +1,91 @@
+---
+id: vite
+title: Vite
+---
+
+The Vite build setup was the result of several attempts to dual publish ESM and CJS for TanStack projects, while preserving compatibility with all Typescript module resolution options.
+
+## Do I need dual publishing?
+
+ES Modules (ESM) is the standard for writing JavaScript modules. However, due to the historical dependency on CommonJS (CJS), many ecosystem tools and projects were initially incompatible with ESM. It is becoming exceedingly rare for this to be the case, and I would urge you to consider whether it is necessary to distribute CJS code at all. Sindre Sorhus has a good summary on this issue [here](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+## Do I need this package?
+
+Many alternatives have bene created recently, with the most notable being [tsdown](https://github.com/rolldown/tsdown), built on top of `rolldown`. We will be adopting tsdown for future projects rather than continuing to use our custom Vite setup.
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+pnpm add -D @tanstack/vite-config
+```
+
+## Frameworks
+
+| Framework | Dual Types                    | ESM only                                                                             |
+| --------- | ----------------------------- | ------------------------------------------------------------------------------------ |
+| Vanilla   | [tsdown](https://tsdown.dev/) | [tsdown](https://tsdown.dev/) or [tsc](https://www.npmjs.com/package/typescript)     |
+| Angular   | Not required                  | [ng-packagr](https://www.npmjs.com/package/ng-packagr) (official tool)               |
+| React     | [tsdown](https://tsdown.dev/) | [tsdown](https://tsdown.dev/) or [tsc](https://www.npmjs.com/package/typescript)     |
+| Solid     | Not required                  | [tsc](https://www.npmjs.com/package/typescript) (preserves JSX, necessary for SSR)   |
+| Svelte    | Not required                  | [@sveltejs/package](https://www.npmjs.com/package/@sveltejs/package) (official tool) |
+| Vue       | [tsdown](https://tsdown.dev/) | [tsdown](https://tsdown.dev/) or [tsc](https://www.npmjs.com/package/typescript)     |
+
+## Legacy Setup
+
+The build config is opinionated, and was designed to work with our internal libraries. If you follow the below instructions, it _may_ work for your library too!
+
+### package.json
+
+- Ensure `"type": "module"` is set.
+- Ensure you have [Vite](https://www.npmjs.com/package/vite) installed. Installing [Publint](https://www.npmjs.com/package/publint) is also recommended.
+- Change your build script to `"build": "vite build && publint --strict"`
+- Ensure you have an `"exports"` field. We use this, but you might have different requirements:
+
+```json
+{
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  }
+}
+```
+
+### tsconfig.json
+
+- Ensure your `"include"` field includes `"vite.config.ts"`.
+- Set `"moduleResolution"` to `"bundler"`.
+
+### vite.config.ts
+
+- Import `mergeConfig` and `tanstackViteConfig`.
+- Merge your custom config first, followed by `tanstackViteConfig`.
+- Please avoid modifying `build` in your custom config.
+- See an example below:
+
+```ts
+import { defineConfig, mergeConfig } from 'vite'
+import { tanstackViteConfig } from '@tanstack/vite-config'
+
+const config = defineConfig({
+  // Framework plugins, vitest config, etc.
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: './src/index.ts',
+    srcDir: './src',
+  }),
+)
+```
diff --git a/mintlify/db/collections/electric-collection.md b/mintlify/db/collections/electric-collection.md
new file mode 100644
index 000000000..f5a475bb9
--- /dev/null
+++ b/mintlify/db/collections/electric-collection.md
@@ -0,0 +1,446 @@
+---
+title: Electric Collection
+---
+
+# Electric Collection
+
+Electric collections provide seamless integration between TanStack DB and ElectricSQL, enabling real-time data synchronization with your Postgres database through Electric's sync engine.
+
+## Overview
+
+The `@tanstack/electric-db-collection` package allows you to create collections that:
+- Automatically sync data from Postgres via Electric shapes
+- Support optimistic updates with transaction matching and automatic rollback on errors
+- Handle persistence through customizable mutation handlers
+
+## Installation
+
+```bash
+npm install @tanstack/electric-db-collection @tanstack/react-db
+```
+
+## Basic Usage
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { electricCollectionOptions } from '@tanstack/electric-db-collection'
+
+const todosCollection = createCollection(
+  electricCollectionOptions({
+    shapeOptions: {
+      url: '/api/todos',
+    },
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Configuration Options
+
+The `electricCollectionOptions` function accepts the following options:
+
+### Required Options
+
+- `shapeOptions`: Configuration for the ElectricSQL ShapeStream
+  - `url`: The URL of your proxy to Electric
+
+- `getKey`: Function to extract the unique key from an item
+
+### Optional
+
+- `id`: Unique identifier for the collection
+- `schema`: Schema for validating items. Any Standard Schema compatible schema
+- `sync`: Custom sync configuration
+
+### Persistence Handlers
+
+Handlers are called before mutations to persist changes to your backend:
+
+- `onInsert`: Handler called before insert operations
+- `onUpdate`: Handler called before update operations
+- `onDelete`: Handler called before delete operations
+
+Each handler should return `{ txid }` to wait for synchronization. For cases where your API can not return txids, use the `awaitMatch` utility function.
+
+## Persistence Handlers & Synchronization
+
+Handlers persist mutations to the backend and wait for Electric to sync the changes back. This prevents UI glitches where optimistic updates would be removed and then re-added. TanStack DB blocks sync data until the mutation is confirmed, ensuring smooth user experience.
+
+### 1. Using Txid (Recommended)
+
+The recommended approach uses PostgreSQL transaction IDs (txids) for precise matching. The backend returns a txid, and the client waits for that specific txid to appear in the Electric stream.
+
+```typescript
+const todosCollection = createCollection(
+  electricCollectionOptions({
+    id: 'todos',
+    schema: todoSchema,
+    getKey: (item) => item.id,
+    shapeOptions: {
+      url: '/api/todos',
+      params: { table: 'todos' },
+    },
+
+    onInsert: async ({ transaction }) => {
+      const newItem = transaction.mutations[0].modified
+      const response = await api.todos.create(newItem)
+
+      // Return txid to wait for sync
+      return { txid: response.txid }
+    },
+
+    onUpdate: async ({ transaction }) => {
+      const { original, changes } = transaction.mutations[0]
+      const response = await api.todos.update({
+        where: { id: original.id },
+        data: changes
+      })
+
+      return { txid: response.txid }
+    }
+  })
+)
+```
+
+### 2. Using Custom Match Functions
+
+For cases where txids aren't available, use the `awaitMatch` utility function to wait for synchronization with custom matching logic:
+
+```typescript
+import { isChangeMessage } from '@tanstack/electric-db-collection'
+
+const todosCollection = createCollection(
+  electricCollectionOptions({
+    id: 'todos',
+    getKey: (item) => item.id,
+    shapeOptions: {
+      url: '/api/todos',
+      params: { table: 'todos' },
+    },
+
+    onInsert: async ({ transaction, collection }) => {
+      const newItem = transaction.mutations[0].modified
+      await api.todos.create(newItem)
+
+      // Use awaitMatch utility for custom matching
+      await collection.utils.awaitMatch(
+        (message) => {
+          return isChangeMessage(message) &&
+                 message.headers.operation === 'insert' &&
+                 message.value.text === newItem.text
+        },
+        5000 // timeout in ms (optional, defaults to 3000)
+      )
+    }
+  })
+)
+```
+
+### 3. Using Simple Timeout
+
+For quick prototyping or when you're confident about timing, you can use a simple timeout. This is crude but works as almost always the data will be synced back in under 2 seconds:
+
+```typescript
+const todosCollection = createCollection(
+  electricCollectionOptions({
+    id: 'todos',
+    getKey: (item) => item.id,
+    shapeOptions: {
+      url: '/api/todos',
+      params: { table: 'todos' },
+    },
+
+    onInsert: async ({ transaction }) => {
+      const newItem = transaction.mutations[0].modified
+      await api.todos.create(newItem)
+
+      // Simple timeout approach
+      await new Promise(resolve => setTimeout(resolve, 2000))
+    }
+  })
+)
+```
+
+On the backend, you can extract the `txid` for a transaction by querying Postgres directly.
+
+```ts
+async function generateTxId(tx) {
+  // The ::xid cast strips off the epoch, giving you the raw 32-bit value
+  // that matches what PostgreSQL sends in logical replication streams
+  // (and then exposed through Electric which we'll match against
+  // in the client).
+  const result = await tx.execute(
+    sql`SELECT pg_current_xact_id()::xid::text as txid`
+  )
+  const txid = result.rows[0]?.txid
+
+  if (txid === undefined) {
+    throw new Error(`Failed to get transaction ID`)
+  }
+
+  return parseInt(txid as string, 10)
+}
+```
+
+### Electric Proxy Example
+
+Electric is typically deployed behind a proxy server that handles shape configuration, authentication and authorization. This provides better security and allows you to control what data users can access without exposing Electric to the client.
+
+
+Here is an example proxy implementation using TanStack Start:
+
+```typescript
+import { createServerFileRoute } from "@tanstack/react-start/server"
+import { ELECTRIC_PROTOCOL_QUERY_PARAMS } from "@electric-sql/client"
+
+// Electric URL
+const baseUrl = 'http://.../v1/shape'
+
+const serve = async ({ request }: { request: Request }) => {
+  // ...check user authorization  
+  const url = new URL(request.url)
+  const originUrl = new URL(baseUrl)
+
+  // passthrough parameters from electric client
+  url.searchParams.forEach((value, key) => {
+    if (ELECTRIC_PROTOCOL_QUERY_PARAMS.includes(key)) {
+      originUrl.searchParams.set(key, value)
+    }
+  })
+
+  // set shape parameters 
+  // full spec: https://github.com/electric-sql/electric/blob/main/website/electric-api.yaml
+  originUrl.searchParams.set("table", "todos")
+  // Where clause to filter rows in the table (optional).
+  // originUrl.searchParams.set("where", "completed = true")
+  
+  // Select the columns to sync (optional)
+  // originUrl.searchParams.set("columns", "id,text,completed")
+
+  const response = await fetch(originUrl)
+  const headers = new Headers(response.headers)
+  headers.delete("content-encoding")
+  headers.delete("content-length")
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  })
+}
+
+export const ServerRoute = createServerFileRoute("/api/todos").methods({
+  GET: serve,
+})
+```
+
+## Optimistic Updates with Explicit Transactions
+
+For more advanced use cases, you can create custom actions that can do multiple mutations across collections transactionally. You can use the utility methods to wait for synchronization with different strategies:
+
+### Using Txid Strategy
+
+```typescript
+const addTodoAction = createOptimisticAction({
+  onMutate: ({ text }) => {
+    // optimistically insert with a temporary ID
+    const tempId = crypto.randomUUID()
+    todosCollection.insert({
+      id: tempId,
+      text,
+      completed: false,
+      created_at: new Date(),
+    })
+    
+    // ... mutate other collections
+  },
+  
+  mutationFn: async ({ text }) => {
+    const response = await api.todos.create({
+      data: { text, completed: false }
+    })
+    
+    // Wait for the specific txid
+    await todosCollection.utils.awaitTxId(response.txid)
+  }
+})
+```
+
+### Using Custom Match Function
+
+```typescript
+import { isChangeMessage } from '@tanstack/electric-db-collection'
+
+const addTodoAction = createOptimisticAction({
+  onMutate: ({ text }) => {
+    const tempId = crypto.randomUUID()
+    todosCollection.insert({
+      id: tempId,
+      text,
+      completed: false,
+      created_at: new Date(),
+    })
+  },
+  
+  mutationFn: async ({ text }) => {
+    await api.todos.create({
+      data: { text, completed: false }
+    })
+    
+    // Wait for matching message
+    await todosCollection.utils.awaitMatch(
+      (message) => {
+        return isChangeMessage(message) && 
+               message.headers.operation === 'insert' &&
+               message.value.text === text
+      }
+    )
+  }
+})
+```
+
+## Utility Methods
+
+The collection provides these utility methods via `collection.utils`:
+
+### `awaitTxId(txid, timeout?)`
+
+Manually wait for a specific transaction ID to be synchronized:
+
+```typescript
+// Wait for specific txid
+await todosCollection.utils.awaitTxId(12345)
+
+// With custom timeout (default is 5 seconds)
+await todosCollection.utils.awaitTxId(12345, 10000)
+```
+
+This is useful when you need to ensure a mutation has been synchronized before proceeding with other operations.
+
+### `awaitMatch(matchFn, timeout?)`
+
+Manually wait for a custom match function to find a matching message:
+
+```typescript
+import { isChangeMessage } from '@tanstack/electric-db-collection'
+
+// Wait for a specific message pattern
+await todosCollection.utils.awaitMatch(
+  (message) => {
+    return isChangeMessage(message) &&
+           message.headers.operation === 'insert' &&
+           message.value.text === 'New Todo'
+  },
+  5000 // timeout in ms
+)
+```
+
+### Helper Functions
+
+The package exports helper functions for use in custom match functions:
+
+- `isChangeMessage(message)`: Check if a message is a data change (insert/update/delete)
+- `isControlMessage(message)`: Check if a message is a control message (up-to-date, must-refetch)
+
+```typescript
+import { isChangeMessage, isControlMessage } from '@tanstack/electric-db-collection'
+
+// Use in custom match functions
+const matchFn = (message) => {
+  if (isChangeMessage(message)) {
+    return message.headers.operation === 'insert'
+  }
+  return false
+}
+```
+
+## Debugging
+
+### Common Issue: awaitTxId Stalls or Times Out
+
+A frequent issue developers encounter is that `awaitTxId` (or the transaction's `isPersisted.promise`) stalls indefinitely, eventually timing out with no error messages. The data persists correctly to the database, but the optimistic mutation never resolves.
+
+**Root Cause:** This happens when the transaction ID (txid) returned from your API doesn't match the actual transaction ID of the mutation in Postgres. This mismatch occurs when you query `pg_current_xact_id()` **outside** the same transaction that performs the mutation.
+
+### Enable Debug Logging
+
+To diagnose txid issues, enable debug logging in your browser console:
+
+```javascript
+localStorage.debug = 'ts/db:electric'
+```
+
+This will show you when mutations start waiting for txids and when txids arrive from Electric's sync stream.
+
+This is powered by the [debug](https://www.npmjs.com/package/debug) package.
+
+**When txids DON'T match (common bug):**
+```
+ts/db:electric awaitTxId called with txid 124
+ts/db:electric new txids synced from pg [123]
+// Stalls forever - 124 never arrives!
+```
+
+In this example, the mutation happened in transaction 123, but you queried `pg_current_xact_id()` in a separate transaction (124) that ran after the mutation. The client waits for 124 which will never arrive.
+
+**When txids DO match (correct):**
+```
+ts/db:electric awaitTxId called with txid 123
+ts/db:electric new txids synced from pg [123]
+ts/db:electric awaitTxId found match for txid 123
+// Resolves immediately!
+```
+
+### The Solution: Query txid Inside the Transaction
+
+You **must** call `pg_current_xact_id()` inside the same transaction as your mutation:
+
+**❌ Wrong - txid queried outside transaction:**
+```typescript
+// DON'T DO THIS
+async function createTodo(data) {
+  const txid = await generateTxId(sql) // Wrong: separate transaction
+
+  await sql.begin(async (tx) => {
+    await tx`INSERT INTO todos ${tx(data)}`
+  })
+
+  return { txid } // This txid won't match!
+}
+```
+
+**✅ Correct - txid queried inside transaction:**
+```typescript
+// DO THIS
+async function createTodo(data) {
+  let txid!: Txid
+
+  const result = await sql.begin(async (tx) => {
+    // Call generateTxId INSIDE the transaction
+    txid = await generateTxId(tx)
+
+    const [todo] = await tx`
+      INSERT INTO todos ${tx(data)}
+      RETURNING *
+    `
+    return todo
+  })
+
+  return { todo: result, txid } // txid matches the mutation
+}
+
+async function generateTxId(tx: any): Promise<Txid> {
+  const result = await tx`SELECT pg_current_xact_id()::xid::text as txid`
+  const txid = result[0]?.txid
+
+  if (txid === undefined) {
+    throw new Error(`Failed to get transaction ID`)
+  }
+
+  return parseInt(txid, 10)
+}
+```
+
+See working examples in:
+- `examples/react/todo/src/routes/api/todos.ts`
+- `examples/react/todo/src/api/server.ts`
diff --git a/mintlify/db/collections/local-only-collection.md b/mintlify/db/collections/local-only-collection.md
new file mode 100644
index 000000000..49cc05897
--- /dev/null
+++ b/mintlify/db/collections/local-only-collection.md
@@ -0,0 +1,324 @@
+---
+title: LocalOnly Collection
+---
+
+# LocalOnly Collection
+
+LocalOnly collections are designed for in-memory client data or UI state that doesn't need to persist across browser sessions or sync across tabs.
+
+## Overview
+
+The `localOnlyCollectionOptions` allows you to create collections that:
+- Store data only in memory (no persistence)
+- Support optimistic updates with automatic rollback on errors
+- Provide optional initial data
+- Work perfectly for temporary UI state and session-only data
+- Automatically manage the transition from optimistic to confirmed state
+
+## Installation
+
+LocalOnly collections are included in the core TanStack DB package:
+
+```bash
+npm install @tanstack/react-db
+```
+
+## Basic Usage
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { localOnlyCollectionOptions } from '@tanstack/react-db'
+
+const uiStateCollection = createCollection(
+  localOnlyCollectionOptions({
+    id: 'ui-state',
+    getKey: (item) => item.id,
+  })
+)
+```
+
+### Direct Local Mutations
+
+**Important:** LocalOnly collections work differently than server-synced collections. With LocalOnly collections, you **directly mutate state** by calling methods like `collection.insert()`, `collection.update()`, and `collection.delete()` — that's all you need to do. The changes are immediately applied to your local in-memory data.
+
+This is different from collections that sync with a server (like Query Collection), where mutation handlers send data to a backend. With LocalOnly collections, everything stays local:
+
+```typescript
+// Just call the methods directly - no server sync involved
+uiStateCollection.insert({ id: 'theme', mode: 'dark' })
+uiStateCollection.update('theme', (draft) => { draft.mode = 'light' })
+uiStateCollection.delete('theme')
+```
+
+## Configuration Options
+
+The `localOnlyCollectionOptions` function accepts the following options:
+
+### Required Options
+
+- `id`: Unique identifier for the collection
+- `getKey`: Function to extract the unique key from an item
+
+### Optional Options
+
+- `schema`: [Standard Schema](https://standardschema.dev) compatible schema (e.g., Zod, Effect) for client-side validation
+- `initialData`: Array of items to populate the collection with on creation
+- `onInsert`: Optional handler function called before confirming inserts
+- `onUpdate`: Optional handler function called before confirming updates
+- `onDelete`: Optional handler function called before confirming deletes
+
+## Initial Data
+
+Populate the collection with initial data on creation:
+
+```typescript
+const uiStateCollection = createCollection(
+  localOnlyCollectionOptions({
+    id: 'ui-state',
+    getKey: (item) => item.id,
+    initialData: [
+      { id: 'sidebar', isOpen: false },
+      { id: 'theme', mode: 'light' },
+      { id: 'modal', visible: false },
+    ],
+  })
+)
+```
+
+## Mutation Handlers
+
+Mutation handlers are **completely optional**. When provided, they are called before the optimistic state is confirmed:
+
+```typescript
+const tempDataCollection = createCollection(
+  localOnlyCollectionOptions({
+    id: 'temp-data',
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      // Custom logic before confirming the insert
+      console.log('Inserting:', transaction.mutations[0].modified)
+    },
+    onUpdate: async ({ transaction }) => {
+      // Custom logic before confirming the update
+      const { original, modified } = transaction.mutations[0]
+      console.log('Updating from', original, 'to', modified)
+    },
+    onDelete: async ({ transaction }) => {
+      // Custom logic before confirming the delete
+      console.log('Deleting:', transaction.mutations[0].original)
+    },
+  })
+)
+```
+
+## Manual Transactions
+
+When using LocalOnly collections with manual transactions (created via `createTransaction`), you must call `utils.acceptMutations()` to persist the changes:
+
+```typescript
+import { createTransaction } from '@tanstack/react-db'
+
+const localData = createCollection(
+  localOnlyCollectionOptions({
+    id: 'form-draft',
+    getKey: (item) => item.id,
+  })
+)
+
+const serverCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['items'],
+    queryFn: async () => api.items.getAll(),
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.items.create(transaction.mutations[0].modified)
+    },
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle server collection mutations explicitly in mutationFn
+    await Promise.all(
+      transaction.mutations
+        .filter((m) => m.collection === serverCollection)
+        .map((m) => api.items.create(m.modified))
+    )
+
+    // After server mutations succeed, accept local collection mutations
+    localData.utils.acceptMutations(transaction)
+  },
+})
+
+// Apply mutations to both collections in one transaction
+tx.mutate(() => {
+  localData.insert({ id: 'draft-1', data: '...' })
+  serverCollection.insert({ id: '1', name: 'Item' })
+})
+
+await tx.commit()
+```
+
+## Complete Example: Modal State Management
+
+```typescript
+import { createCollection, eq } from '@tanstack/react-db'
+import { localOnlyCollectionOptions } from '@tanstack/react-db'
+import { useLiveQuery } from '@tanstack/react-db'
+import { z } from 'zod'
+
+// Define schema
+const modalStateSchema = z.object({
+  id: z.string(),
+  isOpen: z.boolean(),
+  data: z.any().optional(),
+})
+
+type ModalState = z.infer<typeof modalStateSchema>
+
+// Create collection
+export const modalStateCollection = createCollection(
+  localOnlyCollectionOptions({
+    id: 'modal-state',
+    getKey: (item) => item.id,
+    schema: modalStateSchema,
+    initialData: [
+      { id: 'user-profile', isOpen: false },
+      { id: 'settings', isOpen: false },
+      { id: 'confirm-delete', isOpen: false },
+    ],
+  })
+)
+
+// Use in component
+function UserProfileModal() {
+  const { data: modals } = useLiveQuery((q) =>
+    q.from({ modal: modalStateCollection })
+      .where(({ modal }) => eq(modal.id, 'user-profile'))
+  )
+
+  const modalState = modals[0]
+
+  const openModal = (data?: any) => {
+    modalStateCollection.update('user-profile', (draft) => {
+      draft.isOpen = true
+      draft.data = data
+    })
+  }
+
+  const closeModal = () => {
+    modalStateCollection.update('user-profile', (draft) => {
+      draft.isOpen = false
+      draft.data = undefined
+    })
+  }
+
+  if (!modalState?.isOpen) return null
+
+  return (
+    <div className="modal">
+      <h2>User Profile</h2>
+      <pre>{JSON.stringify(modalState.data, null, 2)}</pre>
+      <button onClick={closeModal}>Close</button>
+    </div>
+  )
+}
+```
+
+## Complete Example: Form Draft State
+
+```typescript
+import { createCollection, eq } from '@tanstack/react-db'
+import { localOnlyCollectionOptions } from '@tanstack/react-db'
+import { useLiveQuery } from '@tanstack/react-db'
+
+type FormDraft = {
+  id: string
+  formData: Record<string, any>
+  lastModified: Date
+}
+
+// Create collection for form drafts
+export const formDraftsCollection = createCollection(
+  localOnlyCollectionOptions({
+    id: 'form-drafts',
+    getKey: (item) => item.id,
+  })
+)
+
+// Use in component
+function CreatePostForm() {
+  const { data: drafts } = useLiveQuery((q) =>
+    q.from({ draft: formDraftsCollection })
+      .where(({ draft }) => eq(draft.id, 'new-post'))
+  )
+
+  const currentDraft = drafts[0]
+
+  const updateDraft = (field: string, value: any) => {
+    if (currentDraft) {
+      formDraftsCollection.update('new-post', (draft) => {
+        draft.formData[field] = value
+        draft.lastModified = new Date()
+      })
+    } else {
+      formDraftsCollection.insert({
+        id: 'new-post',
+        formData: { [field]: value },
+        lastModified: new Date(),
+      })
+    }
+  }
+
+  const clearDraft = () => {
+    if (currentDraft) {
+      formDraftsCollection.delete('new-post')
+    }
+  }
+
+  const submitForm = async () => {
+    if (!currentDraft) return
+
+    await api.posts.create(currentDraft.formData)
+    clearDraft()
+  }
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); submitForm() }}>
+      <input
+        value={currentDraft?.formData.title || ''}
+        onChange={(e) => updateDraft('title', e.target.value)}
+      />
+      <button type="submit">Publish</button>
+      <button type="button" onClick={clearDraft}>Clear Draft</button>
+    </form>
+  )
+}
+```
+
+## Use Cases
+
+LocalOnly collections are perfect for:
+- Temporary UI state (modals, sidebars, tooltips)
+- Form draft data during the current session
+- Client-side computed or derived data
+- Wizard/multi-step form state
+- Temporary filters or search state
+- In-memory caches
+
+## Comparison with LocalStorageCollection
+
+| Feature | LocalOnly | LocalStorage |
+|---------|-----------|--------------|
+| Persistence | None (in-memory only) | localStorage |
+| Cross-tab sync | No | Yes |
+| Survives page reload | No | Yes |
+| Performance | Fastest | Fast |
+| Size limits | Memory limits | ~5-10MB |
+| Best for | Temporary UI state | User preferences |
+
+## Learn More
+
+- [Optimistic Mutations](/db/guides/mutations)
+- [Live Queries](/db/guides/live-queries)
+- [LocalStorage Collection](/db/collections/local-storage-collection)
diff --git a/mintlify/db/collections/local-storage-collection.md b/mintlify/db/collections/local-storage-collection.md
new file mode 100644
index 000000000..a51846437
--- /dev/null
+++ b/mintlify/db/collections/local-storage-collection.md
@@ -0,0 +1,312 @@
+---
+title: LocalStorage Collection
+---
+
+# LocalStorage Collection
+
+LocalStorage collections store small amounts of local-only state that persists across browser sessions and syncs across browser tabs in real-time.
+
+## Overview
+
+The `localStorageCollectionOptions` allows you to create collections that:
+- Persist data to localStorage (or sessionStorage)
+- Automatically sync across browser tabs using storage events
+- Support optimistic updates with automatic rollback on errors
+- Store all data under a single localStorage key
+- Work with any storage API that matches the localStorage interface
+
+## Installation
+
+LocalStorage collections are included in the core TanStack DB package:
+
+```bash
+npm install @tanstack/react-db
+```
+
+## Basic Usage
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { localStorageCollectionOptions } from '@tanstack/react-db'
+
+const userPreferencesCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'user-preferences',
+    storageKey: 'app-user-prefs',
+    getKey: (item) => item.id,
+  })
+)
+```
+
+### Direct Local Mutations
+
+**Important:** LocalStorage collections work differently than server-synced collections. With LocalStorage collections, you **directly mutate state** by calling methods like `collection.insert()`, `collection.update()`, and `collection.delete()` — that's all you need to do. The changes are immediately applied to your local data and automatically persisted to localStorage.
+
+This is different from collections that sync with a server (like Query Collection), where mutation handlers send data to a backend. With LocalStorage collections, everything stays local:
+
+```typescript
+// Just call the methods directly - automatically persisted to localStorage
+userPreferencesCollection.insert({ id: 'theme', mode: 'dark' })
+userPreferencesCollection.update('theme', (draft) => { draft.mode = 'light' })
+userPreferencesCollection.delete('theme')
+```
+
+## Configuration Options
+
+The `localStorageCollectionOptions` function accepts the following options:
+
+### Required Options
+
+- `id`: Unique identifier for the collection
+- `storageKey`: The localStorage key where all collection data is stored
+- `getKey`: Function to extract the unique key from an item
+
+### Optional Options
+
+- `schema`: [Standard Schema](https://standardschema.dev) compatible schema (e.g., Zod, Effect) for client-side validation
+- `storage`: Custom storage implementation (defaults to `localStorage`). Can be `sessionStorage` or any object with the localStorage API
+- `storageEventApi`: Event API for subscribing to storage events (defaults to `window`). Enables custom cross-tab, cross-window, or cross-process synchronization
+- `onInsert`: Optional handler function called when items are inserted
+- `onUpdate`: Optional handler function called when items are updated
+- `onDelete`: Optional handler function called when items are deleted
+
+## Cross-Tab Synchronization
+
+LocalStorage collections automatically sync across browser tabs in real-time:
+
+```typescript
+const settingsCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'settings',
+    storageKey: 'app-settings',
+    getKey: (item) => item.id,
+  })
+)
+
+// Changes in one tab are automatically reflected in all other tabs
+// This works automatically via storage events
+```
+
+## Using SessionStorage
+
+You can use `sessionStorage` instead of `localStorage` for session-only persistence:
+
+```typescript
+const sessionCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'session-data',
+    storageKey: 'session-key',
+    storage: sessionStorage, // Use sessionStorage instead
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Custom Storage Backend
+
+Provide any storage implementation that matches the localStorage API:
+
+```typescript
+// Example: Custom storage wrapper with encryption
+const encryptedStorage = {
+  getItem(key: string) {
+    const encrypted = localStorage.getItem(key)
+    return encrypted ? decrypt(encrypted) : null
+  },
+  setItem(key: string, value: string) {
+    localStorage.setItem(key, encrypt(value))
+  },
+  removeItem(key: string) {
+    localStorage.removeItem(key)
+  },
+}
+
+const secureCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'secure-data',
+    storageKey: 'encrypted-key',
+    storage: encryptedStorage,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+### Cross-Tab Sync with Custom Storage
+
+The `storageEventApi` option (defaults to `window`) allows the collection to subscribe to storage events for cross-tab synchronization. A custom storage implementation can provide this API to enable custom cross-tab, cross-window, or cross-process sync:
+
+```typescript
+// Example: Custom storage event API for cross-process sync
+const customStorageEventApi = {
+  addEventListener(event: string, handler: (e: StorageEvent) => void) {
+    // Custom event subscription logic
+    // Could be IPC, WebSocket, or any other mechanism
+    myCustomEventBus.on('storage-change', handler)
+  },
+  removeEventListener(event: string, handler: (e: StorageEvent) => void) {
+    myCustomEventBus.off('storage-change', handler)
+  },
+}
+
+const syncedCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'synced-data',
+    storageKey: 'data-key',
+    storage: customStorage,
+    storageEventApi: customStorageEventApi, // Custom event API
+    getKey: (item) => item.id,
+  })
+)
+```
+
+This enables synchronization across different contexts beyond just browser tabs, such as:
+- Cross-process communication in Electron apps
+- WebSocket-based sync across multiple browser windows
+- Custom IPC mechanisms in desktop applications
+
+## Mutation Handlers
+
+Mutation handlers are **completely optional**. Data will persist to localStorage whether or not you provide handlers:
+
+```typescript
+const preferencesCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'preferences',
+    storageKey: 'user-prefs',
+    getKey: (item) => item.id,
+    // Optional: Add custom logic when preferences are updated
+    onUpdate: async ({ transaction }) => {
+      const { modified } = transaction.mutations[0]
+      console.log('Preference updated:', modified)
+      // Maybe send analytics or trigger other side effects
+    },
+  })
+)
+```
+
+## Manual Transactions
+
+When using LocalStorage collections with manual transactions (created via `createTransaction`), you must call `utils.acceptMutations()` to persist the changes:
+
+```typescript
+import { createTransaction } from '@tanstack/react-db'
+
+const localData = createCollection(
+  localStorageCollectionOptions({
+    id: 'form-draft',
+    storageKey: 'draft-data',
+    getKey: (item) => item.id,
+  })
+)
+
+const serverCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['items'],
+    queryFn: async () => api.items.getAll(),
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.items.create(transaction.mutations[0].modified)
+    },
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle server collection mutations explicitly in mutationFn
+    await Promise.all(
+      transaction.mutations
+        .filter((m) => m.collection === serverCollection)
+        .map((m) => api.items.create(m.modified))
+    )
+
+    // After server mutations succeed, persist local collection mutations
+    localData.utils.acceptMutations(transaction)
+  },
+})
+
+// Apply mutations to both collections in one transaction
+tx.mutate(() => {
+  localData.insert({ id: 'draft-1', data: '...' })
+  serverCollection.insert({ id: '1', name: 'Item' })
+})
+
+await tx.commit()
+```
+
+## Complete Example
+
+```typescript
+import { createCollection, eq } from '@tanstack/react-db'
+import { localStorageCollectionOptions } from '@tanstack/react-db'
+import { useLiveQuery } from '@tanstack/react-db'
+import { z } from 'zod'
+
+// Define schema
+const userPrefsSchema = z.object({
+  id: z.string(),
+  theme: z.enum(['light', 'dark', 'auto']),
+  language: z.string(),
+  notifications: z.boolean(),
+})
+
+type UserPrefs = z.infer<typeof userPrefsSchema>
+
+// Create collection
+export const userPreferencesCollection = createCollection(
+  localStorageCollectionOptions({
+    id: 'user-preferences',
+    storageKey: 'app-user-prefs',
+    getKey: (item) => item.id,
+    schema: userPrefsSchema,
+  })
+)
+
+// Use in component
+function SettingsPanel() {
+  const { data: prefs } = useLiveQuery((q) =>
+    q.from({ pref: userPreferencesCollection })
+      .where(({ pref }) => eq(pref.id, 'current-user'))
+  )
+
+  const currentPrefs = prefs[0]
+
+  const updateTheme = (theme: 'light' | 'dark' | 'auto') => {
+    if (currentPrefs) {
+      userPreferencesCollection.update(currentPrefs.id, (draft) => {
+        draft.theme = theme
+      })
+    } else {
+      userPreferencesCollection.insert({
+        id: 'current-user',
+        theme,
+        language: 'en',
+        notifications: true,
+      })
+    }
+  }
+
+  return (
+    <div>
+      <h2>Theme: {currentPrefs?.theme}</h2>
+      <button onClick={() => updateTheme('dark')}>Dark Mode</button>
+      <button onClick={() => updateTheme('light')}>Light Mode</button>
+    </div>
+  )
+}
+```
+
+## Use Cases
+
+LocalStorage collections are perfect for:
+- User preferences and settings
+- UI state that should persist across sessions
+- Form drafts
+- Recently viewed items
+- User-specific configurations
+- Small amounts of cached data
+
+## Learn More
+
+- [Optimistic Mutations](/db/guides/mutations)
+- [Live Queries](/db/guides/live-queries)
+- [LocalOnly Collection](/db/collections/local-only-collection)
diff --git a/mintlify/db/collections/powersync-collection.md b/mintlify/db/collections/powersync-collection.md
new file mode 100644
index 000000000..c8ddbabbb
--- /dev/null
+++ b/mintlify/db/collections/powersync-collection.md
@@ -0,0 +1,1102 @@
+---
+title: PowerSync Collection
+---
+
+# PowerSync Collection
+
+PowerSync collections provide seamless integration between TanStack DB and [PowerSync](https://powersync.com), enabling automatic synchronization between your in-memory TanStack DB collections and PowerSync's SQLite database. This gives you offline-ready persistence, real-time sync capabilities, and powerful conflict resolution.
+
+## Overview
+
+The `@tanstack/powersync-db-collection` package allows you to create collections that:
+
+- Automatically mirror the state of an underlying PowerSync SQLite database
+- Reactively update when PowerSync records change
+- Support query-driven sync, loading only the data relevant to active live queries
+- Support optimistic mutations with rollback on error
+- Provide persistence handlers to keep PowerSync in sync with TanStack DB transactions
+- Use PowerSync's efficient SQLite-based storage engine
+- Work with PowerSync's real-time sync features for offline-first scenarios
+- Leverage PowerSync's built-in conflict resolution and data consistency guarantees
+- Enable real-time synchronization with PostgreSQL, MongoDB and MySQL backends
+
+## 1. Installation
+
+Install the PowerSync collection package along with your preferred framework integration.
+PowerSync currently works with Web, React Native and Node.js. The examples below use the Web SDK.
+See the PowerSync quickstart [docs](https://docs.powersync.com/installation/quickstart-guide) for more details.
+
+```bash
+npm install @tanstack/powersync-db-collection @powersync/web @journeyapps/wa-sqlite
+```
+
+### 2. Create a PowerSync Database and Schema
+
+```ts
+import { Schema, Table, column } from "@powersync/web"
+
+// Define your schema
+const APP_SCHEMA = new Schema({
+  documents: new Table({
+    name: column.text,
+    author: column.text,
+    created_at: column.text,
+    archived: column.integer,
+  }),
+})
+
+// Initialize PowerSync database
+const db = new PowerSyncDatabase({
+  database: {
+    dbFilename: "app.sqlite",
+  },
+  schema: APP_SCHEMA,
+})
+```
+
+### 3. (optional) Configure Sync with a Backend
+
+```ts
+import {
+  AbstractPowerSyncDatabase,
+  PowerSyncBackendConnector,
+  PowerSyncCredentials,
+} from "@powersync/web"
+
+// TODO implement your logic here
+class Connector implements PowerSyncBackendConnector {
+  fetchCredentials: () => Promise<PowerSyncCredentials | null>
+
+  /** Upload local changes to the app backend.
+   *
+   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.
+   *
+   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).
+   */
+  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>
+}
+
+// Configure the client to connect to a PowerSync service and your backend
+db.connect(new Connector())
+```
+
+### 4. Create a TanStack DB Collection
+
+There are two main ways to create a collection: using type inference or using schema validation. Type inference will infer collection types from the underlying PowerSync SQLite tables. Schema validation can be used for additional input/output validations and type transforms.
+
+#### Option 1: Using Table Type Inference
+
+The collection types are automatically inferred from the PowerSync schema table definition. The table is used to construct a default standard schema validator which is used internally to validate collection operations.
+
+Collection mutations accept SQLite types and queries report data with SQLite types.
+
+```ts
+import { createCollection } from "@tanstack/react-db"
+import { powerSyncCollectionOptions } from "@tanstack/powersync-db-collection"
+
+const documentsCollection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+  })
+)
+
+/** Note: The types for input and output are defined as this */
+// Used for mutations like `insert` or `update`
+type DocumentCollectionInput = {
+  id: string
+  name: string | null
+  author: string | null
+  created_at: string | null // SQLite TEXT
+  archived: number | null // SQLite integer
+}
+// The type of query/data results
+type DocumentCollectionOutput = DocumentCollectionInput
+```
+
+The standard PowerSync SQLite types map to these TypeScript types:
+
+| PowerSync Column Type | TypeScript Type  | Description                                                          |
+| --------------------- | ---------------- | -------------------------------------------------------------------- |
+| `column.text`         | `string \| null` | Text values, commonly used for strings, JSON, dates (as ISO strings) |
+| `column.integer`      | `number \| null` | Integer values, also used for booleans (0/1)                         |
+| `column.real`         | `number \| null` | Floating point numbers                                               |
+
+Note: All PowerSync column types are nullable by default.
+
+#### Option 2: SQLite Types with Schema Validation
+
+Additional validations for collection mutations can be performed with a custom schema. The Schema below asserts that
+the `name`, `author` and `created_at` fields are required as input. `name` also has an additional string length check.
+
+Note: The input and output types specified in this example still satisfy the underlying SQLite types. An additional `deserializationSchema` is required if the typing differs. See the examples below for more details.
+
+The application logic (including the backend) should enforce that all incoming synced data passes validation with the `schema`. Failing to validate data will result in inconsistency of the collection data. This is a fatal error! An `onDeserializationError` handler must be provided to react to this case.
+
+```ts
+import { createCollection } from "@tanstack/react-db"
+import { powerSyncCollectionOptions } from "@tanstack/powersync-db-collection"
+import { z } from "zod"
+
+// Schema validates SQLite types but adds constraints
+const schema = z.object({
+  id: z.string(),
+  name: z.string().min(3, { message: "Should be at least 3 characters" }),
+  author: z.string(),
+  created_at: z.string(), // SQLite TEXT for dates
+  archived: z.number(),
+})
+
+const documentsCollection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+    schema,
+    onDeserializationError: (error) => {
+      // Present fatal error
+    },
+  })
+)
+
+/** Note: The types for input and output are defined as this */
+// Used for mutations like `insert` or `update`
+type DocumentCollectionInput = {
+  id: string
+  name: string
+  author: string
+  created_at: string // SQLite TEXT
+  archived: number // SQLite integer
+}
+// The type of query/data results
+type DocumentCollectionOutput = DocumentCollectionInput
+```
+
+#### Option 3: Transform SQLite Input Types to Rich Output Types
+
+You can transform SQLite types to richer types (like Date objects) while keeping SQLite-compatible input types:
+
+Note: The Transformed types are provided by TanStack DB to the PowerSync SQLite persister. These types need to be serialized in
+order to be persisted to SQLite. Most types are converted by default. For custom types, override the serialization by providing a
+`serializer` param.
+
+The example below uses `nullable` columns, this is not a requirement.
+
+The application logic (including the backend) should enforce that all incoming synced data passes validation with the `schema`. Failing to validate data will result in inconsistency of the collection data. This is a fatal error! An `onDeserializationError` handler must be provided to react to this case.
+
+```ts
+const schema = z.object({
+  id: z.string(),
+  name: z.string().nullable(),
+  created_at: z
+    .string()
+    .nullable()
+    .transform((val) => (val ? new Date(val) : null)), // Transform SQLite TEXT to Date
+  archived: z
+    .number()
+    .nullable()
+    .transform((val) => (val != null ? val > 0 : null)), // Transform SQLite INTEGER to boolean
+})
+
+const documentsCollection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+    schema,
+    onDeserializationError: (error) => {
+      // Present fatal error
+    },
+    // Optional: custom column serialization
+    serializer: {
+      // Dates are serialized by default, this is just an example
+      created_at: (value) => (value ? value.toISOString() : null),
+    },
+  })
+)
+
+/** Note: The types for input and output are defined as this */
+// Used for mutations like `insert` or `update`
+type DocumentCollectionInput = {
+  id: string
+  name: string | null
+  author: string | null
+  created_at: string | null // SQLite TEXT
+  archived: number | null
+}
+// The type of query/data results
+type DocumentCollectionOutput = {
+  id: string
+  name: string | null
+  author: string | null
+  created_at: Date | null // JS Date instance
+  archived: boolean | null // JS boolean
+}
+```
+
+#### Option 4: Custom Input/Output Types with Deserialization
+
+The input and output types can be completely decoupled from the internal SQLite types. This can be used to accept rich values for input mutations.
+We require an additional `deserializationSchema` in order to validate and transform incoming synced (SQLite) updates. This schema should convert the incoming SQLite update to the output type.
+
+The application logic (including the backend) should enforce that all incoming synced data passes validation with the `deserializationSchema`. Failing to validate data will result in inconsistency of the collection data. This is a fatal error! An `onDeserializationError` handler must be provided to react to this case.
+
+```ts
+// Our input/output types use Date and boolean
+const schema = z.object({
+  id: z.string(),
+  name: z.string(),
+  author: z.string(),
+  created_at: z.date(), // Accept Date objects as input
+  archived: z.boolean(), // Accept Booleans as input
+})
+
+// Schema to transform from SQLite types to our output types
+const deserializationSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  author: z.string(),
+  created_at: z
+    .string()
+    .transform((val) => (new Date(val))), // SQLite TEXT to Date
+  archived: z
+    .number()
+    .transform((val) => (val > 0), // SQLite INTEGER to Boolean
+})
+
+const documentsCollection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+    schema,
+    deserializationSchema,
+    onDeserializationError: (error) => {
+      // Present fatal error
+    },
+  })
+)
+
+/** Note: The types for input and output are defined as this */
+// Used for mutations like `insert` or `update`
+type DocumentCollectionInput = {
+  id: string
+  name: string
+  author: string
+  created_at: Date
+  archived: boolean
+}
+// The type of query/data results
+type DocumentCollectionOutput = DocumentCollectionInput
+```
+
+## Features
+
+### Offline-First
+
+PowerSync collections are offline-first by default. All data is stored locally in a SQLite database, allowing your app to work without an internet connection. Changes are automatically synced when connectivity is restored.
+
+### Real-Time Sync
+
+When connected to a PowerSync backend, changes are automatically synchronized in real-time across all connected clients. The sync process handles:
+
+- Bi-directional sync with the server
+- Conflict resolution
+- Queue management for offline changes
+- Automatic retries on connection loss
+
+### Query-Driven Sync
+Collections support an optional `on-demand` sync mode that loads only the rows your active live queries need, rather than syncing the full table into memory upfront. Useful for large datasets where most rows won't be accessed at a given time.
+
+### Working with Rich JavaScript Types
+
+PowerSync collections support rich JavaScript types like `Date`, `Boolean`, and custom objects while maintaining SQLite compatibility. The collection handles serialization and deserialization automatically:
+
+```typescript
+import { z } from "zod"
+import { Schema, Table, column } from "@powersync/web"
+import { createCollection } from "@tanstack/react-db"
+import { powerSyncCollectionOptions } from "@tanstack/powersync-db-collection"
+
+// Define PowerSync SQLite schema
+const APP_SCHEMA = new Schema({
+  tasks: new Table({
+    title: column.text,
+    due_date: column.text, // Stored as ISO string in SQLite
+    completed: column.integer, // Stored as 0/1 in SQLite
+    metadata: column.text, // Stored as JSON string in SQLite
+  }),
+})
+
+// Define rich types schema
+const taskSchema = z.object({
+  id: z.string(),
+  title: z.string().nullable(),
+  due_date: z
+    .string()
+    .nullable()
+    .transform((val) => (val ? new Date(val) : null)), // Convert to Date
+  completed: z
+    .number()
+    .nullable()
+    .transform((val) => (val != null ? val > 0 : null)), // Convert to boolean
+  metadata: z
+    .string()
+    .nullable()
+    .transform((val) => (val ? JSON.parse(val) : null)), // Parse JSON
+})
+
+// Create collection with rich types
+const tasksCollection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.tasks,
+    schema: taskSchema,
+  })
+)
+
+// Work with rich types in your code
+await tasksCollection.insert({
+  id: crypto.randomUUID(),
+  title: "Review PR",
+  due_date: "2025-10-30T10:00:00Z", // String input is automatically converted to Date
+  completed: 0, // Number input is automatically converted to boolean
+  metadata: JSON.stringify({ priority: "high" }),
+})
+
+// Query returns rich types
+const task = tasksCollection.get("task-1")
+console.log(task.due_date instanceof Date) // true
+console.log(typeof task.completed) // "boolean"
+console.log(task.metadata.priority) // "high"
+```
+
+### Type Safety with Rich Types
+
+The collection maintains type safety throughout:
+
+```typescript
+type TaskInput = {
+  id: string
+  title: string | null
+  due_date: string | null // Accept ISO string for mutations
+  completed: number | null // Accept 0/1 for mutations
+  metadata: string | null // Accept JSON string for mutations
+}
+
+type TaskOutput = {
+  id: string
+  title: string | null
+  due_date: Date | null // Get Date object in queries
+  completed: boolean | null // Get boolean in queries
+  metadata: {
+    priority: string
+    [key: string]: any
+  } | null
+}
+
+// TypeScript enforces correct types:
+tasksCollection.insert({
+  due_date: new Date(), // Error: Type 'Date' is not assignable to type 'string'
+})
+
+const task = tasksCollection.get("task-1")
+task.due_date.getTime() // OK - TypeScript knows this is a Date
+```
+
+### Optimistic Updates
+
+Updates to the collection are applied optimistically to the local state first, then synchronized with PowerSync and the backend. If an error occurs during sync, the changes are automatically rolled back.
+
+### Metadata Tracking
+
+Metadata tracking allows attaching custom metadata to collection operations (insert, update, delete). This metadata is persisted alongside the operation and available in PowerSync `CrudEntry` records during upload processing. This is useful for passing additional context about mutations to the backend, such as audit information, operation sources, or custom processing hints.
+
+#### Enabling Metadata Tracking
+
+Metadata tracking must be enabled on the PowerSync table:
+
+```typescript
+const APP_SCHEMA = new Schema({
+  documents: new Table(
+    {
+      name: column.text,
+      author: column.text,
+    },
+    {
+      // Enable metadata tracking on this table
+      trackMetadata: true,
+    }
+  ),
+})
+```
+
+#### Using Metadata in Operations
+
+Once enabled, metadata can be passed to any collection operation:
+
+```typescript
+const documents = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+  })
+)
+
+// Insert with metadata
+await documents.insert(
+  {
+    id: crypto.randomUUID(),
+    name: "Report Q4",
+    author: "Jane Smith",
+  },
+  {
+    metadata: {
+      source: "web-app",
+      userId: "user-123",
+      timestamp: Date.now(),
+    },
+  }
+).isPersisted.promise
+
+// Update with metadata
+await documents.update(
+  docId,
+  { metadata: { reason: "typo-fix", editor: "user-456" } },
+  (doc) => {
+    doc.name = "Report Q4 (Updated)"
+  }
+).isPersisted.promise
+
+// Delete with metadata
+await documents.delete(docId, {
+  metadata: { deletedBy: "user-789", reason: "duplicate" },
+}).isPersisted.promise
+```
+
+#### Accessing Metadata During Upload
+
+The metadata is available in PowerSync `CrudEntry` records when processing uploads in the connector:
+
+```typescript
+import { CrudEntry } from "@powersync/web"
+
+class Connector implements PowerSyncBackendConnector {
+  // ...
+
+  async uploadData(database: AbstractPowerSyncDatabase) {
+    const batch = await database.getCrudBatch()
+    if (!batch) return
+
+    for (const entry of batch.crud) {
+      console.log("Operation:", entry.op) // PUT, PATCH, DELETE
+      console.log("Table:", entry.table)
+      console.log("Data:", entry.opData)
+      console.log("Metadata:", entry.metadata) // Custom metadata (stringified)
+
+      // Parse metadata if needed
+      if (entry.metadata) {
+        const meta = JSON.parse(entry.metadata)
+        console.log("Source:", meta.source)
+        console.log("User ID:", meta.userId)
+      }
+
+      // Process the operation with the backend...
+    }
+
+    await batch.complete()
+  }
+}
+```
+
+**Note**: If metadata is provided to an operation but the table doesn't have `trackMetadata: true`, a warning will be logged and the metadata will be ignored.
+
+## Configuration Options
+
+The `powerSyncCollectionOptions` function accepts the following options:
+
+```ts
+interface PowerSyncCollectionConfig<TTable extends Table, TSchema> {
+  // Required options
+  database: PowerSyncDatabase
+  table: Table
+
+  // Schema validation and type transformation
+  schema?: StandardSchemaV1
+  deserializationSchema?: StandardSchemaV1 // Required for custom input types
+  onDeserializationError?: (error: StandardSchemaV1.FailureResult) => void // Required for custom input types
+
+  // Optional Custom serialization
+  serializer?: {
+    [Key in keyof TOutput]?: (value: TOutput[Key]) => SQLiteCompatibleType
+  }
+
+  // Performance tuning
+  syncBatchSize?: number // Control batch size for initial sync, defaults to 1000
+}
+```
+
+## Advanced Transactions
+
+When you need more control over transaction handling, such as batching multiple operations or handling complex transaction scenarios, you can use PowerSync's transaction system directly with TanStack DB transactions.
+
+```ts
+import { createTransaction } from "@tanstack/react-db"
+import { PowerSyncTransactor } from "@tanstack/powersync-db-collection"
+
+// Create a transaction that won't auto-commit
+const batchTx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    // Use PowerSyncTransactor to apply the transaction to PowerSync
+    await new PowerSyncTransactor({ database: db }).applyTransaction(
+      transaction
+    )
+  },
+})
+
+// Perform multiple operations in the transaction
+batchTx.mutate(() => {
+  // Add multiple documents in a single transaction
+  for (let i = 0; i < 5; i++) {
+    documentsCollection.insert({
+      id: crypto.randomUUID(),
+      name: `Document ${i}`,
+      content: `Content ${i}`,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    })
+  }
+})
+
+// Commit the transaction
+await batchTx.commit()
+
+// Wait for the changes to be persisted
+await batchTx.isPersisted.promise
+```
+
+This approach allows you to:
+
+- Batch multiple operations into a single transaction
+- Control when the transaction is committed
+- Ensure all operations are atomic
+- Wait for persistence confirmation
+- Handle complex transaction scenarios
+
+## On-demand Sync Mode (Query-Driven Sync)
+
+By default the PowerSync collection uses the `eager` sync mode, but you can opt to use `on-demand` sync mode instead. In on-demand mode, the collection is query-driven - it only loads data from SQLite that satisfies the predicates of your active live queries, rather than syncing everything and filtering afterwards.
+
+To understand how data flows under the hood, it helps to know that there are two independent dimensions at play:
+
+- **Sync mode** (`eager` vs `on-demand`) - controls how data moves from SQLite into the TanStack DB collection
+- **Sync Streams** (optional) - controls how data moves from the PowerSync Service into SQLite, using the `onLoad` or `onLoadSubset` hooks
+
+These dimensions compose independently, giving you six combinations covered below:
+
+| Example | Sync mode | Sync Streams | Parameters |
+|---|---|---|---|
+| 1 | Eager | No | - |
+| 2 | On-demand | No | - |
+| 3 | Eager | Yes | Hardcoded |
+| 4 | On-demand | Yes | Hardcoded |
+| 5 | On-demand | Yes | Dynamic - `extractSimpleComparisons` |
+| 6 | On-demand | Yes | Dynamic - `parseWhereExpression` |
+
+Examples 1 and 2 assume SQLite is already fully populated by PowerSync's sync mechanism. Examples 3–6 add Sync Streams, which let you control which data from the PowerSync Service reaches SQLite in the first place - useful when you only want a subset of data on-device.
+
+In examples 3 and 4, Sync Stream subscription parameters are hardcoded. Examples 5 and 6 show how to derive those parameters dynamically from the live query's predicates, so the subscription automatically adjusts as the query changes.
+
+
+### 1. Eager Mode
+
+In `eager` mode, all data from the SQLite database is synced into the TanStack DB collection. The live query then filters this full dataset to produce the final result. This means the collection holds all rows regardless of whether they match any active query.
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*Eager mode syncs all SQLite data to TanStack DB Collection*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*TanStack DB Query filters for list_id = 'list_1'*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'eager'
+  }),
+)
+
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(
+        ({ todo }) => eq(todo.list_id, 'list_id'),
+      )
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
+
+### 2. On-Demand Mode
+
+In `on-demand` mode, only data from the SQLite database that satisfies the predicates of active TanStack DB live queries is synced into the TanStack DB collection. This reduces the amount of data held in memory, since the collection only contains rows that are relevant to the queries currently registered against it.
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*On-demand mode only syncs data from SQLite to the TanStack DB collection if they satisfy any of the live queries: list_id = 'list_1'*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*TanStack DB Query filters for list_id = 'list_1'*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'on-demand'
+  }),
+)
+
+// live query that tells the collection what the data domain is
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(
+        ({ todo }) => eq(todo.list_id, 'list_id'),
+      )
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
+
+## Incorporating Sync Streams With OnLoad/OnLoadSubset Hooks
+Sync Streams can be used through the data loading hooks for both `eager` and `on-demand` sync modes that allow a user to call Sync Streams when a collection is defined (eager mode) or when a collection's data boundary changes based on the live queries predicates (on-demand).
+
+These examples assume the following Sync Stream definition exists:
+```
+config:
+  edition: 3
+
+streams:
+  lists:
+    query: SELECT * FROM lists WHERE owner_id = auth.user_id()
+    auto_subscribe: true
+  todos:
+    query: SELECT * FROM todos WHERE list_id = subscription.parameter('list') AND list_id IN (SELECT id FROM lists WHERE owner_id = auth.user_id())
+```
+
+### 3. Eager Mode with Sync Streams
+
+Use the `onLoad` hook to subscribe to a Sync Stream when the collection first loads, so SQLite is populated before the collection starts serving queries. In `eager` mode, all rows in SQLite are synced into the TanStack DB collection; live query filtering then runs against that full dataset. 
+The hook can optionally return a cleanup function where you can unsubscribe from the Sync Stream.
+
+This example starts with 4 todos in the PowerSync Service, only 2 of which get synced via the Sync Stream to the SQLite database. Because it's eager mode, both get synced from the SQLite database to the collection. Finally the TanStack DB query only returns the single todo that matches the live query predicate.
+
+**PS Service**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*Subscribe to Sync Stream, only sync where list_id = 'list_1'*
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*Eager mode syncs all SQLite data to TanStack DB Collection*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*TanStack DB Query filters for completed = 1*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'eager',
+    onLoad: async () => {
+      console.log('onLoad')
+      const subscription = await db
+        .syncStream('todos', { list: 'list_1' })
+        .subscribe()
+
+      await subscription.waitForFirstSync()
+
+      return () => {
+        console.log('onUnload')
+        subscription.unsubscribe()
+      }
+    },
+  }),
+) 
+
+// A live query that filters by the `completed` state.
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(({ todo }) => eq(todo.completed, 1))
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
+
+### 4. On-Demand Mode with Sync Streams
+
+Use the `onLoadSubset` hook to subscribe to a Sync Stream whenever the collection's data boundary changes (i.e. when the set of active live queries changes). In `on-demand` mode, only rows that satisfy the active live query predicates are synced from SQLite into the TanStack DB collection. 
+The hook can optionally return a cleanup function where you can unsubscribe from the Sync Stream when that subset is no longer needed.
+
+This example starts with 4 todos in the PowerSync Service, only 2 of which get synced via the Sync Stream to the SQLite database. Because it's on-demand mode, only 1 todo matches gets synced from the SQLite database to the collection. Finally the TanStack DB query only returns the single todo that matches the live query predicate.
+
+**PS Service**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*Subscribe to Sync Stream, only sync where list_id = 'list_1'*
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*On-demand mode only syncs data from SQLite to the TanStack DB collection if they satisfy any of the live queries: completed = 1*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+*TanStack DB Query filters for completed = 1*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'on-demand',
+    onLoadSubset: async (options) => {
+      console.log('onLoadSubset')
+      const subscription = await db
+        .syncStream('todos', { list: 'list_1' })
+        .subscribe()
+
+      await subscription.waitForFirstSync()
+
+      return () => {
+        console.log('onUnloadSubset')
+        subscription.unsubscribe()
+      }
+    },
+  }),
+)
+
+// A live query that filters by the `completed` state.
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(({ todo }) => eq(todo.completed, 1))
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
+
+### 5. On-Demand Mode with Simple Predicates
+
+In the previous example, the Sync Stream subscription parameters were hardcoded. In practice, you'll often want to derive those parameters dynamically from the live query's where clause. That way, changing the query automatically adjusts which data is synced from the PowerSync Service. `extractSimpleComparisons` is a convenience helper that parses the expression tree from `onLoadSubset` into a flat list of `{ field, operator, value }` objects. 
+
+Given a live query like:
+
+```
+.where(({ todo }) => eq(todo.list_id, selectedListId))
+```
+
+`onLoadSubset` receives options.where as an expression tree `for eq(list_id, '<uuid>')`.
+The `list_id` value is parsed from the expression tree and passed to `syncStream()`.
+
+Note: This example slightly differs from the previous two as it aims to illustrate `extractSimpleComparisons` usage.
+
+This example starts with 4 todos in the PowerSync Service, the Sync Stream subscription criteria (`list_id = "list_1"`) is derived from the live query registered against the collection. Only 2 todos get synced via the Sync Stream to the SQLite database. Two todos get synced from the SQLite database to the collection. Finally the TanStack DB query returns both todos as they both match `eq(todo.list_id, 'list_id')`.
+
+**PS Service**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*Derive the list_id criteria from live query, subscribe to Sync Stream, only sync where list = 'list_1'*
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*On-demand mode only syncs data from SQLite to the TanStack DB collection if they satisfy any of the live queries: list_id = 'list_1'*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+*TanStack DB Query filters for list_id = 'list_1'*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'on-demand',
+    onLoadSubset: async (options) => {
+      // Extract simple comparisons from the where expression
+      const comparisons = extractSimpleComparisons(options.where)
+      // comparisons = [{ field: ['todo', 'list_id'], operator: 'eq', value: '<uuid>' }]
+
+      // Find the list_id filter
+      const listIdFilter = comparisons.find(
+        (c) => c.field.includes('list_id') && c.operator === 'eq',
+      )
+
+      if (!listIdFilter) {
+        console.warn('No list_id filter found, skipping Sync Stream')
+        return
+      }
+
+      console.log(`Subscribing to todos for list: ${listIdFilter.value}`)
+
+      const subscription = await db
+        .syncStream('todos', { list: listIdFilter.value })
+        .subscribe()
+
+      await subscription.waitForFirstSync()
+
+      return () => {
+        console.log(`Unsubscribing from todos for list: ${listIdFilter.value}`)
+        subscription.unsubscribe()
+      }
+    },
+  }),
+)
+
+// Simple filter -> triggers `onLoadSubset` with `eq(list_id, '...')`
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(
+        ({ todo }) => eq(todo.list_id, 'list_id'), // or some listId variable
+      )
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
+
+### 6. On-Demand Mode with Complex Predicates
+
+While `extractSimpleComparisons` works well for simple, single-condition filters, live queries often combine multiple conditions using `and`, `or`, or other nested expressions. `parseWhereExpression` lets you provide custom handler functions for each operator (`eq`, `and`, etc.). This gives you full control over how a compound expression tree is unpacked and transformed into the parameters object passed to `syncStream()`. It's useful when your Sync Stream accepts multiple parameters and you need to extract all of them from a single composite where clause - for example, filtering by both `list_id` and `completed` status simultaneously.
+
+Assume a small adjustment to the Sync Stream definition of todos (adding the `completed` subscription parameter):
+```
+todos:
+    query: SELECT * FROM todos WHERE list_id = subscription.parameter('list') AND completed = subscription.parameter("completed") AND list_id IN (SELECT id FROM lists WHERE owner_id = auth.user_id())
+```
+
+The `list` parameter name is kept as-is (consistent with most examples), but must be mapped to `list_id` to work with the following example. Alternatively, it can be named `list_id` in the Sync Stream definition to skip the programmatic mapping step.
+
+This example starts with 4 todos in the PowerSync Service, the Sync Stream subscription criteria (`list_id = "list_1" and completed = 1`) is derived from the live query registered against the collection. Only 1 todo gets synced via the Sync Stream to the SQLite database. One todo gets synced from the SQLite database to the collection. Finally the TanStack DB query returns 1 todo that matches `eq(todo.list_id, 'list_id') and eq(todo.completed, 1)`.
+
+**PS Service**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 1  | list_1  |     0     |
+| 2  | list_1  |     1     |
+| 3  | list_2  |     0     |
+| 4  | list_2  |     1     |
+
+*Derive the list_id and completed criteria from live query, subscribe to Sync Stream where list = 'list_1' AND completed = 1*
+
+**SQLite**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+*On-demand mode only syncs data from SQLite to the TanStack DB collection if they satisfy any of the live queries: list = 'list_1' AND completed = 1*
+
+**Collection**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+*TanStack DB Query filters for list = 'list_1' AND completed = 1*
+
+**Result**
+
+| id | list_id | completed |
+|:--:|:-------:|:---------:|
+| 2  | list_1  |     1     |
+
+```typescript
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: AppSchema.props.todos,
+    syncMode: 'on-demand',
+    onLoadSubset: async (options) => {
+      // Parse the where into a flat params record using custom handlers
+      const streamParams = parseWhereExpression(options.where, {
+        handlers: {
+          eq: (field: Array<string>, value: unknown) => {
+            const mappedField = mapFields(field[field.length - 1]!)
+
+            return {
+              [mappedField]: value,
+            }
+          },
+          and: (...filters: Array<Record<string, unknown>>) =>
+            Object.assign({}, ...filters),
+        },
+        onUnknownOperator: (op, _args) => {
+          console.warn(`Ignoring unsupported operator in stream params: ${op}`)
+          return {}
+        },
+      })
+      // For a query like: where(({ todo }) => and(eq(todo.list_id, 'abc'), eq(todo.completed, 0)))
+      // streamParams = { list: 'abc', completed: 0 }
+
+      if (!streamParams || Object.keys(streamParams).length === 0) {
+        console.warn('No stream params extracted, skipping Sync Stream')
+        return
+      }
+
+      console.log(
+        `Subscribing to todos with params: ${JSON.stringify(streamParams)}`,
+      )
+
+      const subscription = await db
+        .syncStream('todos', streamParams)
+        .subscribe()
+
+      await subscription.waitForFirstSync()
+
+      return () => subscription.unsubscribe()
+    },
+  }),
+)
+
+// Compound filter -> triggers `onLoadSubset` with `and(eq(list_id, '...'), eq(completed, 1))`
+const liveQuery = createLiveQueryCollection({
+  query: (q) =>
+    q
+      .from({ todo: collection })
+      .where(({ todo }) =>
+        and(eq(todo.list_id, 'list_1'), eq(todo.completed, 1)),
+      )
+      .select(({ todo }) => ({
+        id: todo.id,
+        completed: todo.completed,
+      })),
+})
+```
\ No newline at end of file
diff --git a/mintlify/db/collections/query-collection.md b/mintlify/db/collections/query-collection.md
new file mode 100644
index 000000000..c5baaf3da
--- /dev/null
+++ b/mintlify/db/collections/query-collection.md
@@ -0,0 +1,914 @@
+---
+title: Query Collection
+---
+
+# Query Collection
+
+Query collections provide seamless integration between TanStack DB and TanStack Query, enabling automatic synchronization between your local database and remote data sources.
+
+## Overview
+
+The `@tanstack/query-db-collection` package allows you to create collections that:
+
+- Automatically fetch remote data via TanStack Query
+- Support optimistic updates with automatic rollback on errors
+- Handle persistence through customizable mutation handlers
+- Provide direct write capabilities for directly writing to the sync store
+
+## Installation
+
+```bash
+npm install @tanstack/query-db-collection @tanstack/query-core @tanstack/db
+```
+
+## Basic Usage
+
+```typescript
+import { QueryClient } from "@tanstack/query-core"
+import { createCollection } from "@tanstack/db"
+import { queryCollectionOptions } from "@tanstack/query-db-collection"
+
+const queryClient = new QueryClient()
+
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async () => {
+      const response = await fetch("/api/todos")
+      return response.json()
+    },
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Configuration Options
+
+The `queryCollectionOptions` function accepts the following options:
+
+### Required Options
+
+- `queryKey`: The query key for TanStack Query. Can be a static array or a function that receives `LoadSubsetOptions` and returns a key. When using a function, all returned keys must share the base key (`queryKey({})`) as a prefix — see [Query Key Prefix Convention](#query-key-prefix-convention).
+- `queryFn`: Function that fetches data from the server
+- `queryClient`: TanStack Query client instance
+- `getKey`: Function to extract the unique key from an item
+
+### Query Options
+
+- `select`: Function that lets extract array items when they're wrapped with metadata
+- `enabled`: Whether the query should automatically run (default: `true`)
+- `refetchInterval`: Refetch interval in milliseconds (default: 0 — set an interval to enable polling refetching)
+- `retry`: Retry configuration for failed queries
+- `retryDelay`: Delay between retries
+- `staleTime`: How long data is considered fresh
+- `meta`: Optional metadata that will be passed to the query function context
+
+### Using with `queryOptions(...)`
+
+If your app already uses TanStack Query's `queryOptions` helper (e.g. from `@tanstack/react-query`), you can spread those options into `queryCollectionOptions`. Note that `queryFn` must be explicitly provided since query collections require it both in types and at runtime:
+
+```typescript
+import { QueryClient } from "@tanstack/query-core"
+import { createCollection } from "@tanstack/db"
+import { queryCollectionOptions } from "@tanstack/query-db-collection"
+import { queryOptions } from "@tanstack/react-query"
+
+const queryClient = new QueryClient()
+
+const listOptions = queryOptions({
+  queryKey: ["todos"],
+  queryFn: async () => {
+    const response = await fetch("/api/todos")
+    return response.json() as Promise<Array<{ id: string; title: string }>>
+  },
+})
+
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    ...listOptions,
+    queryFn: (context) => listOptions.queryFn!(context),
+    queryClient,
+    getKey: (item) => item.id,
+  }),
+)
+```
+
+If `queryFn` is missing at runtime, `queryCollectionOptions` throws `QueryFnRequiredError`.
+
+### Collection Options
+
+- `id`: Unique identifier for the collection
+- `schema`: Schema for validating items
+- `sync`: Custom sync configuration
+- `startSync`: Whether to start syncing immediately (default: `true`)
+
+### Persistence Handlers
+
+- `onInsert`: Handler called before insert operations
+- `onUpdate`: Handler called before update operations
+- `onDelete`: Handler called before delete operations
+
+## Extending Meta with Custom Properties
+
+The `meta` option allows you to pass additional metadata to your query function. By default, Query Collections automatically include `loadSubsetOptions` in the meta object, which contains filtering, sorting, and pagination options for on-demand queries.
+
+### Type-Safe Meta Access
+
+The `ctx.meta.loadSubsetOptions` property is automatically typed as `LoadSubsetOptions` without requiring any additional imports or type assertions:
+
+```typescript
+import { parseLoadSubsetOptions } from "@tanstack/query-db-collection"
+
+const collection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["products"],
+    syncMode: "on-demand",
+    queryFn: async (ctx) => {
+      // ✅ Type-safe access - no @ts-ignore needed!
+      const options = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
+
+      // Use the parsed options to fetch only what you need
+      return api.getProducts(options)
+    },
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+### Adding Custom Meta Properties
+
+You can extend the meta type to include your own custom properties using TypeScript's module augmentation:
+
+```typescript
+// In a global type definition file (e.g., types.d.ts or global.d.ts)
+declare module "@tanstack/query-db-collection" {
+  interface QueryCollectionMeta {
+    // Add your custom properties here
+    userId?: string
+    includeDeleted?: boolean
+    cacheTTL?: number
+  }
+}
+```
+
+Once you've extended the interface, your custom properties are fully typed throughout your application:
+
+```typescript
+const collection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async (ctx) => {
+      // ✅ Both loadSubsetOptions and custom properties are typed
+      const { loadSubsetOptions, userId, includeDeleted } = ctx.meta
+
+      return api.getTodos({
+        ...parseLoadSubsetOptions(loadSubsetOptions),
+        userId,
+        includeDeleted,
+      })
+    },
+    queryClient,
+    getKey: (item) => item.id,
+    // Pass custom meta alongside Query Collection defaults
+    meta: {
+      userId: "user-123",
+      includeDeleted: false,
+    },
+  })
+)
+```
+
+### Important Notes
+
+- The module augmentation pattern follows TanStack Query's official approach for typing meta
+- `QueryCollectionMeta` is an interface (not a type alias), enabling proper TypeScript declaration merging
+- Your custom properties are merged with the base `loadSubsetOptions` property
+- All meta properties must be compatible with `Record<string, unknown>`
+- The augmentation should be done in a file that's included in your TypeScript compilation
+
+### Example: API Request Context
+
+A common use case is passing request context to your query function:
+
+```typescript
+// types.d.ts
+declare module "@tanstack/query-db-collection" {
+  interface QueryCollectionMeta {
+    authToken?: string
+    locale?: string
+    version?: string
+  }
+}
+
+// collections.ts
+const productsCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["products"],
+    queryFn: async (ctx) => {
+      const { loadSubsetOptions, authToken, locale, version } = ctx.meta
+
+      return api.getProducts({
+        ...parseLoadSubsetOptions(loadSubsetOptions),
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Accept-Language": locale,
+          "API-Version": version,
+        },
+      })
+    },
+    queryClient,
+    getKey: (item) => item.id,
+    meta: {
+      authToken: session.token,
+      locale: "en-US",
+      version: "v1",
+    },
+  })
+)
+```
+
+## Persistence Handlers
+
+You can define handlers that are called when mutations occur. These handlers can persist changes to your backend and control whether the query should refetch after the operation:
+
+```typescript
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+
+    onInsert: async ({ transaction }) => {
+      const newItems = transaction.mutations.map((m) => m.modified)
+      await api.createTodos(newItems)
+      // Returning nothing or { refetch: true } will trigger a refetch
+      // Return { refetch: false } to skip automatic refetch
+    },
+
+    onUpdate: async ({ transaction }) => {
+      const updates = transaction.mutations.map((m) => ({
+        id: m.key,
+        changes: m.changes,
+      }))
+      await api.updateTodos(updates)
+    },
+
+    onDelete: async ({ transaction }) => {
+      const ids = transaction.mutations.map((m) => m.key)
+      await api.deleteTodos(ids)
+    },
+  })
+)
+```
+
+### Controlling Refetch Behavior
+
+By default, after any persistence handler (`onInsert`, `onUpdate`, or `onDelete`) completes successfully, the query will automatically refetch to ensure the local state matches the server state.
+
+You can control this behavior by returning an object with a `refetch` property:
+
+```typescript
+onInsert: async ({ transaction }) => {
+  await api.createTodos(transaction.mutations.map((m) => m.modified))
+
+  // Skip the automatic refetch
+  return { refetch: false }
+}
+```
+
+This is useful when:
+
+- You're confident the server state matches what you sent
+- You want to avoid unnecessary network requests
+- You're handling state updates through other mechanisms (like WebSockets)
+
+## Utility Methods
+
+The collection provides these utility methods via `collection.utils`:
+
+- `refetch(opts?)`: Manually trigger a refetch of the query
+  - `opts.throwOnError`: Whether to throw an error if the refetch fails (default: `false`)
+  - Bypasses `enabled: false` to support imperative/manual refetching patterns (similar to hook `refetch()` behavior)
+  - Returns `QueryObserverResult` for inspecting the result
+
+## Direct Writes
+
+Direct writes are intended for scenarios where the normal query/mutation flow doesn't fit your needs. They allow you to write directly to the synced data store, bypassing the optimistic update system and query refetch mechanism.
+
+### Understanding the Data Stores
+
+Query Collections maintain two data stores:
+
+1. **Synced Data Store** - The authoritative state synchronized with the server via `queryFn`
+2. **Optimistic Mutations Store** - Temporary changes that are applied optimistically before server confirmation
+
+Normal collection operations (insert, update, delete) create optimistic mutations that are:
+
+- Applied immediately to the UI
+- Sent to the server via persistence handlers
+- Rolled back automatically if the server request fails
+- Replaced with server data when the query refetches
+
+Direct writes bypass this system entirely and write directly to the synced data store, making them ideal for handling real-time updates from alternative sources.
+
+### When to Use Direct Writes
+
+Direct writes should be used when:
+
+- You need to sync real-time updates from WebSockets or server-sent events
+- You're dealing with large datasets where refetching everything is too expensive
+- You receive incremental updates or server-computed field updates
+- You need to implement complex pagination or partial data loading scenarios
+
+### Individual Write Operations
+
+```typescript
+// Insert a new item directly to the synced data store
+todosCollection.utils.writeInsert({
+  id: "1",
+  text: "Buy milk",
+  completed: false,
+})
+
+// Update an existing item in the synced data store
+todosCollection.utils.writeUpdate({ id: "1", completed: true })
+
+// Delete an item from the synced data store
+todosCollection.utils.writeDelete("1")
+
+// Upsert (insert or update) in the synced data store
+todosCollection.utils.writeUpsert({
+  id: "1",
+  text: "Buy milk",
+  completed: false,
+})
+```
+
+These operations:
+
+- Write directly to the synced data store
+- Do NOT create optimistic mutations
+- Do NOT trigger automatic query refetches
+- Update the TanStack Query cache immediately
+- Are immediately visible in the UI
+
+### Batch Operations
+
+The `writeBatch` method allows you to perform multiple operations atomically. Any write operations called within the callback will be collected and executed as a single transaction:
+
+```typescript
+todosCollection.utils.writeBatch(() => {
+  todosCollection.utils.writeInsert({ id: "1", text: "Buy milk" })
+  todosCollection.utils.writeInsert({ id: "2", text: "Walk dog" })
+  todosCollection.utils.writeUpdate({ id: "3", completed: true })
+  todosCollection.utils.writeDelete("4")
+})
+```
+
+### Real-World Example: WebSocket Integration
+
+```typescript
+// Handle real-time updates from WebSocket without triggering full refetches
+ws.on("todos:update", (changes) => {
+  todosCollection.utils.writeBatch(() => {
+    changes.forEach((change) => {
+      switch (change.type) {
+        case "insert":
+          todosCollection.utils.writeInsert(change.data)
+          break
+        case "update":
+          todosCollection.utils.writeUpdate(change.data)
+          break
+        case "delete":
+          todosCollection.utils.writeDelete(change.id)
+          break
+      }
+    })
+  })
+})
+```
+
+### Example: Incremental Updates
+
+When the server returns computed fields (like server-generated IDs or timestamps), you can use the `onInsert` handler with `{ refetch: false }` to avoid unnecessary refetches while still syncing the server response:
+
+```typescript
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+
+    onInsert: async ({ transaction }) => {
+      const newItems = transaction.mutations.map((m) => m.modified)
+
+      // Send to server and get back items with server-computed fields
+      const serverItems = await api.createTodos(newItems)
+
+      // Sync server-computed fields (like server-generated IDs, timestamps, etc.)
+      // to the collection's synced data store
+      todosCollection.utils.writeBatch(() => {
+        serverItems.forEach((serverItem) => {
+          todosCollection.utils.writeInsert(serverItem)
+        })
+      })
+
+      // Skip automatic refetch since we've already synced the server response
+      // (optimistic state is automatically replaced when handler completes)
+      return { refetch: false }
+    },
+
+    onUpdate: async ({ transaction }) => {
+      const updates = transaction.mutations.map((m) => ({
+        id: m.key,
+        changes: m.changes,
+      }))
+      const serverItems = await api.updateTodos(updates)
+
+      // Sync server-computed fields from the update response
+      todosCollection.utils.writeBatch(() => {
+        serverItems.forEach((serverItem) => {
+          todosCollection.utils.writeUpdate(serverItem)
+        })
+      })
+
+      return { refetch: false }
+    },
+  })
+)
+
+// Usage is just like a regular collection
+todosCollection.insert({ text: "Buy milk", completed: false })
+```
+
+### Example: Large Dataset Pagination
+
+```typescript
+// Load additional pages without refetching existing data
+const loadMoreTodos = async (page) => {
+  const newTodos = await api.getTodos({ page, limit: 50 })
+
+  // Add new items without affecting existing ones
+  todosCollection.utils.writeBatch(() => {
+    newTodos.forEach((todo) => {
+      todosCollection.utils.writeInsert(todo)
+    })
+  })
+}
+```
+
+## Important Behaviors
+
+### Full State Sync
+
+The query collection treats the `queryFn` result as the **complete state** of the collection. This means:
+
+- Items present in the collection but not in the query result will be deleted
+- Items in the query result but not in the collection will be inserted
+- Items present in both will be updated if they differ
+
+This is important when the same entity type can be loaded from multiple REST
+endpoints. For example, do not point the same Query Collection at
+`/api/documents/preview` for one load and `/api/documents/deleted` for another
+unless each result represents the complete state for that collection
+scope. A narrower endpoint can otherwise remove rows that were loaded from a
+different endpoint.
+
+For multiple endpoint or subset-loading use cases, choose the pattern that
+matches your API semantics:
+
+- Use `syncMode: 'on-demand'` when one logical collection can serve different
+  subsets of data. In this mode, query predicates (`where`, `orderBy`, `limit`,
+  and `offset`) are passed to your `queryFn` via `ctx.meta.loadSubsetOptions`,
+  letting you translate them into API parameters.
+- Use separate Query Collections when endpoints represent distinct server scopes
+  whose results should not replace each other. Use `unionAll` to combine them
+  into a single query when you need a unified view across endpoints.
+- Use direct writes such as `writeUpsert`/`writeBatch` for lower-level
+  incremental loading when you intentionally want to merge server responses into
+  the synced store yourself.
+
+### Empty Array Behavior
+
+When `queryFn` returns an empty array, **all items in the collection will be deleted**. This is because the collection interprets an empty array as "the server has no items".
+
+```typescript
+// This will delete all items in the collection
+queryFn: async () => []
+```
+
+### Handling Partial/Incremental Fetches
+
+Since the query collection expects `queryFn` to return the complete state, you can handle partial fetches by merging new data with existing data:
+
+```typescript
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async ({ queryKey }) => {
+      // Get existing data from cache
+      const existingData = queryClient.getQueryData(queryKey) || []
+
+      // Fetch only new/updated items (e.g., changes since last sync)
+      const lastSyncTime = localStorage.getItem("todos-last-sync")
+      const newData = await fetch(`/api/todos?since=${lastSyncTime}`).then(
+        (r) => r.json()
+      )
+
+      // Merge new data with existing data
+      const existingMap = new Map(existingData.map((item) => [item.id, item]))
+
+      // Apply updates and additions
+      newData.forEach((item) => {
+        existingMap.set(item.id, item)
+      })
+
+      // Handle deletions if your API provides them
+      if (newData.deletions) {
+        newData.deletions.forEach((id) => existingMap.delete(id))
+      }
+
+      // Update sync time
+      localStorage.setItem("todos-last-sync", new Date().toISOString())
+
+      // Return the complete merged state
+      return Array.from(existingMap.values())
+    },
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+This pattern allows you to:
+
+- Fetch only incremental changes from your API
+- Merge those changes with existing data
+- Return the complete state that the collection expects
+- Avoid the performance overhead of fetching all data every time
+
+### Direct Writes and Query Sync
+
+Direct writes update the collection immediately and also update the TanStack Query cache. However, they do not prevent the normal query sync behavior. If your `queryFn` returns data that conflicts with your direct writes, the query data will take precedence.
+
+To handle this properly:
+
+1. Use `{ refetch: false }` in your persistence handlers when using direct writes
+2. Set appropriate `staleTime` to prevent unnecessary refetches
+3. Design your `queryFn` to be aware of incremental updates (e.g., only fetch new data)
+
+## Complete Direct Write API Reference
+
+All direct write methods are available on `collection.utils`:
+
+- `writeInsert(data)`: Insert one or more items directly
+- `writeUpdate(data)`: Update one or more items directly
+- `writeDelete(keys)`: Delete one or more items directly
+- `writeUpsert(data)`: Insert or update one or more items directly
+- `writeBatch(callback)`: Perform multiple operations atomically
+- `refetch(opts?)`: Manually trigger a refetch of the query
+
+## QueryFn and Predicate Push-Down
+
+When using `syncMode: 'on-demand'`, the collection automatically pushes down query predicates (where clauses, orderBy, limit, and offset) to your `queryFn`. This allows you to fetch only the data needed for each specific query, rather than fetching the entire dataset.
+
+### How LoadSubsetOptions Are Passed
+
+LoadSubsetOptions are passed to your `queryFn` via the query context's `meta` property:
+
+```typescript
+queryFn: async (ctx) => {
+  // Extract LoadSubsetOptions from the context
+  const { limit, offset, where, orderBy } = ctx.meta.loadSubsetOptions
+
+  // Use these to fetch only the data you need
+  // - where: filter expression (AST)
+  // - orderBy: sort expression (AST)
+  // - limit: maximum number of rows
+  // - offset: number of rows to skip (for pagination)
+  // ...
+}
+```
+
+The `where` and `orderBy` fields are expression trees (AST - Abstract Syntax Tree) that need to be parsed. TanStack DB provides helper functions to make this easy.
+
+### Expression Helpers
+
+```typescript
+import {
+  parseWhereExpression,
+  parseOrderByExpression,
+  extractSimpleComparisons,
+  parseLoadSubsetOptions,
+} from '@tanstack/db'
+// Or from '@tanstack/query-db-collection' (re-exported for convenience)
+```
+
+These helpers allow you to parse expression trees without manually traversing complex AST structures.
+
+### Quick Start: Simple REST API
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { queryCollectionOptions } from '@tanstack/query-db-collection'
+import { parseLoadSubsetOptions } from '@tanstack/db'
+import { QueryClient } from '@tanstack/query-core'
+
+const queryClient = new QueryClient()
+
+const productsCollection = createCollection(
+  queryCollectionOptions({
+    id: 'products',
+    queryKey: ['products'],
+    queryClient,
+    getKey: (item) => item.id,
+    syncMode: 'on-demand', // Enable predicate push-down
+
+    queryFn: async (ctx) => {
+      const { limit, offset, where, orderBy } = ctx.meta.loadSubsetOptions
+
+      // Parse the expressions into simple format
+      const parsed = parseLoadSubsetOptions({ where, orderBy, limit })
+
+      // Build query parameters from parsed filters
+      const params = new URLSearchParams()
+
+      // Add filters
+      parsed.filters.forEach(({ field, operator, value }) => {
+        const fieldName = field.join('.')
+        if (operator === 'eq') {
+          params.set(fieldName, String(value))
+        } else if (operator === 'lt') {
+          params.set(`${fieldName}_lt`, String(value))
+        } else if (operator === 'gt') {
+          params.set(`${fieldName}_gt`, String(value))
+        }
+      })
+
+      // Add sorting
+      if (parsed.sorts.length > 0) {
+        const sortParam = parsed.sorts
+          .map(s => `${s.field.join('.')}:${s.direction}`)
+          .join(',')
+        params.set('sort', sortParam)
+      }
+
+      // Add limit
+      if (parsed.limit) {
+        params.set('limit', String(parsed.limit))
+      }
+
+      // Add offset for pagination
+      if (offset) {
+        params.set('offset', String(offset))
+      }
+
+      const response = await fetch(`/api/products?${params}`)
+      return response.json()
+    },
+  })
+)
+
+// Usage with live queries
+import { createLiveQueryCollection } from '@tanstack/react-db'
+import { eq, lt, and } from '@tanstack/db'
+
+const affordableElectronics = createLiveQueryCollection({
+  query: (q) =>
+    q.from({ product: productsCollection })
+     .where(({ product }) => and(
+       eq(product.category, 'electronics'),
+       lt(product.price, 100)
+     ))
+     .orderBy(({ product }) => product.price, 'asc')
+     .limit(10)
+     .select(({ product }) => product)
+})
+
+// This triggers a queryFn call with:
+// GET /api/products?category=electronics&price_lt=100&sort=price:asc&limit=10
+// When paginating, offset is included: &offset=20
+```
+
+### Custom Handlers for Complex APIs
+
+For APIs with specific formats, use custom handlers:
+
+```typescript
+queryFn: async (ctx) => {
+  const { where, orderBy, limit } = ctx.meta.loadSubsetOptions
+
+  // Use custom handlers to match your API's format
+  const filters = parseWhereExpression(where, {
+    handlers: {
+      eq: (field, value) => ({
+        field: field.join('.'),
+        op: 'equals',
+        value
+      }),
+      lt: (field, value) => ({
+        field: field.join('.'),
+        op: 'lessThan',
+        value
+      }),
+      and: (...conditions) => ({
+        operator: 'AND',
+        conditions
+      }),
+      or: (...conditions) => ({
+        operator: 'OR',
+        conditions
+      }),
+    }
+  })
+
+  const sorts = parseOrderByExpression(orderBy)
+
+  return api.query({
+    filters,
+    sort: sorts.map(s => ({
+      field: s.field.join('.'),
+      order: s.direction.toUpperCase()
+    })),
+    limit
+  })
+}
+```
+
+### GraphQL Example
+
+```typescript
+queryFn: async (ctx) => {
+  const { where, orderBy, limit } = ctx.meta.loadSubsetOptions
+
+  // Convert to a GraphQL where clause format
+  const whereClause = parseWhereExpression(where, {
+    handlers: {
+      eq: (field, value) => ({
+        [field.join('_')]: { _eq: value }
+      }),
+      lt: (field, value) => ({
+        [field.join('_')]: { _lt: value }
+      }),
+      and: (...conditions) => ({ _and: conditions }),
+      or: (...conditions) => ({ _or: conditions }),
+    }
+  })
+
+  // Convert to a GraphQL order_by format
+  const sorts = parseOrderByExpression(orderBy)
+  const orderByClause = sorts.map(s => ({
+    [s.field.join('_')]: s.direction
+  }))
+
+  const { data } = await graphqlClient.query({
+    query: gql`
+      query GetProducts($where: product_bool_exp, $orderBy: [product_order_by!], $limit: Int) {
+        product(where: $where, order_by: $orderBy, limit: $limit) {
+          id
+          name
+          category
+          price
+        }
+      }
+    `,
+    variables: {
+      where: whereClause,
+      orderBy: orderByClause,
+      limit
+    }
+  })
+
+  return data.product
+}
+```
+
+### Expression Helper API Reference
+
+#### `parseLoadSubsetOptions(options)`
+
+Convenience function that parses all LoadSubsetOptions at once. Good for simple use cases.
+
+```typescript
+const { filters, sorts, limit, offset } = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
+// filters: [{ field: ['category'], operator: 'eq', value: 'electronics' }]
+// sorts: [{ field: ['price'], direction: 'asc', nulls: 'last' }]
+// limit: 10
+// offset: 20 (for pagination)
+```
+
+#### `parseWhereExpression(expr, options)`
+
+Parses a WHERE expression using custom handlers for each operator. Use this for complete control over the output format.
+
+```typescript
+const filters = parseWhereExpression(where, {
+  handlers: {
+    eq: (field, value) => ({ [field.join('.')]: value }),
+    lt: (field, value) => ({ [`${field.join('.')}_lt`]: value }),
+    and: (...filters) => Object.assign({}, ...filters)
+  },
+  onUnknownOperator: (operator, args) => {
+    console.warn(`Unsupported operator: ${operator}`)
+    return null
+  }
+})
+```
+
+#### `parseOrderByExpression(orderBy)`
+
+Parses an ORDER BY expression into a simple array.
+
+```typescript
+const sorts = parseOrderByExpression(orderBy)
+// Returns: [{ field: ['price'], direction: 'asc', nulls: 'last' }]
+```
+
+#### `extractSimpleComparisons(expr)`
+
+Extracts simple AND-ed comparisons from a WHERE expression. Note: Only works for simple AND conditions.
+
+```typescript
+const comparisons = extractSimpleComparisons(where)
+// Returns: [
+//   { field: ['category'], operator: 'eq', value: 'electronics' },
+//   { field: ['price'], operator: 'lt', value: 100 }
+// ]
+```
+
+### Supported Operators
+
+- `eq` - Equality (=)
+- `gt` - Greater than (>)
+- `gte` - Greater than or equal (>=)
+- `lt` - Less than (&lt;)
+- `lte` - Less than or equal (&lt;=)
+- `and` - Logical AND
+- `or` - Logical OR
+- `in` - IN clause
+
+### Using Query Key Builders
+
+Create different cache entries for different filter combinations:
+
+```typescript
+const productsCollection = createCollection(
+  queryCollectionOptions({
+    id: 'products',
+    // Dynamic query key based on filters
+    queryKey: (opts) => {
+      const parsed = parseLoadSubsetOptions(opts)
+      const cacheKey = ['products']
+
+      parsed.filters.forEach(f => {
+        cacheKey.push(`${f.field.join('.')}-${f.operator}-${f.value}`)
+      })
+
+      if (parsed.limit) {
+        cacheKey.push(`limit-${parsed.limit}`)
+      }
+
+      return cacheKey
+    },
+    queryClient,
+    getKey: (item) => item.id,
+    syncMode: 'on-demand',
+    queryFn: async (ctx) => { /* ... */ },
+  })
+)
+```
+
+#### Query Key Prefix Convention
+
+When using a function-based `queryKey`, all derived keys **must extend the base key as a prefix**. The base key is what your function returns when called with no options (`queryKey({})`).
+
+TanStack Query uses prefix matching for cache operations internally. The query collection relies on this to find all cache entries belonging to a collection — including stale entries from destroyed query observers that are still held in cache due to `gcTime`. If derived keys don't share the base prefix, cache updates may silently miss entries, leading to stale data.
+
+```typescript
+// ✅ Correct: base key ['products'] is a prefix of all derived keys
+queryKey: (opts) => {
+  if (opts.where) {
+    return ['products', JSON.stringify(opts.where)]
+  }
+  return ['products']
+}
+
+// ❌ Wrong: base key ['products-all'] is NOT a prefix of ['products-filtered', ...]
+queryKey: (opts) => {
+  if (opts.where) {
+    return ['products-filtered', JSON.stringify(opts.where)]
+  }
+  return ['products-all']
+}
+```
+
+### Tips
+
+1. **Start with `parseLoadSubsetOptions`** for simple use cases
+2. **Use custom handlers** via `parseWhereExpression` for APIs with specific formats
+3. **Handle unsupported operators** with the `onUnknownOperator` callback
+4. **Log parsed results** during development to verify correctness
diff --git a/mintlify/db/collections/rxdb-collection.md b/mintlify/db/collections/rxdb-collection.md
new file mode 100644
index 000000000..afef70fb1
--- /dev/null
+++ b/mintlify/db/collections/rxdb-collection.md
@@ -0,0 +1,167 @@
+---
+title: RxDB Collection
+---
+
+# RxDB Collection
+
+RxDB collections provide seamless integration between TanStack DB and [RxDB](https://rxdb.info), enabling automatic synchronization between your in-memory TanStack DB collections and RxDB's local-first database. Giving you offline-ready persistence, and powerful sync capabilities with a wide range of backends.
+
+
+## Overview
+
+The `@tanstack/rxdb-db-collection` package allows you to create collections that:
+- Automatically mirror the state of an underlying RxDB collection
+- Reactively update when RxDB documents change
+- Support optimistic mutations with rollback on error
+- Provide persistence handlers to keep RxDB in sync with TanStack DB transactions
+- Sync across browser tabs - changes in one tab are reflected in RxDB and TanStack DB collections in all tabs
+- Use one of RxDB's [storage engines](https://rxdb.info/rx-storage.html).
+- Work with RxDB's [replication features](https://rxdb.info/replication.html) for offline-first and sync scenarios
+- Leverage RxDB's [replication plugins](https://rxdb.info/replication.html) to sync with CouchDB, MongoDB, Supabase, REST APIs, GraphQL, WebRTC (P2P) and more.
+
+
+### 1. Installation
+
+Install the RxDB collection packages along with your preferred framework integration.
+
+```bash
+npm install @tanstack/rxdb-db-collection rxdb @tanstack/react-db
+```
+
+
+### 2. Create an RxDatabase and RxCollection
+
+```ts
+import { createRxDatabase, addRxPlugin } from 'rxdb/plugins/core'
+
+/**
+ * Here we use the localStorage based storage for RxDB.
+ * RxDB has a wide range of storages based on Dexie.js, IndexedDB, SQLite, and more.
+ */
+import { getRxStorageLocalstorage } from 'rxdb/plugins/storage-localstorage'
+
+// add json-schema validation (optional)
+import { wrappedValidateAjvStorage } from 'rxdb/plugins/validate-ajv';
+
+// Enable dev mode (optional, recommended during development)
+import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode'
+addRxPlugin(RxDBDevModePlugin)
+
+type Todo = { id: string; text: string; completed: boolean }
+
+const db = await createRxDatabase({
+  name: 'my-todos',
+  storage: wrappedValidateAjvStorage({
+    storage: getRxStorageLocalstorage()
+  })
+})
+
+await db.addCollections({
+  todos: {
+    schema: {
+      title: 'todos',
+      version: 0,
+      type: 'object',
+      primaryKey: 'id',
+      properties: {
+        id: { type: 'string', maxLength: 100 },
+        text: { type: 'string' },
+        completed: { type: 'boolean' },
+      },
+      required: ['id', 'text', 'completed'],
+    },
+  },
+})
+```
+
+
+### 3. (optional) sync with a backend
+```ts
+import { replicateRxCollection } from 'rxdb/plugins/replication'
+const replicationState = replicateRxCollection({
+  collection: db.todos,
+  pull: { handler: myPullHandler },
+  push: { handler: myPushHandler },
+})
+```
+
+### 4. Wrap the RxDB collection with TanStack DB
+
+```ts
+import { createCollection } from '@tanstack/react-db'
+import { rxdbCollectionOptions } from '@tanstack/rxdb-db-collection'
+
+const todosCollection = createCollection(
+  rxdbCollectionOptions({
+    rxCollection: db.todos,
+    startSync: true, // start ingesting RxDB data immediately
+  })
+)
+```
+
+
+Now `todosCollection` is a reactive TanStack DB collection driven by RxDB:
+
+- Writes via `todosCollection.insert/update/delete` persist to RxDB.
+- Direct writes in RxDB (or via replication) flow into the TanStack collection via change streams.
+
+
+
+## Configuration Options
+
+The `rxdbCollectionOptions` function accepts the following options:
+
+### Required
+
+- `rxCollection`: The underlying [RxDB collection](https://rxdb.info/rx-collection.html)
+
+### Optional
+
+- `id`: Unique identifier for the collection
+- `schema`: Schema for validating items. RxDB already has schema validation but having additional validation on the TanStack DB side can help to unify error handling between different TanStack collections.
+- `startSync`: Whether to start syncing immediately (default: true)
+- `onInsert, onUpdate, onDelete`: Override default persistence handlers. By default, TanStack DB writes are persisted to RxDB using bulkUpsert, patch, and bulkRemove.
+- `syncBatchSize`: The maximum number of documents fetched per batch during the initial sync from RxDB into TanStack DB (default: 1000). Larger values reduce round trips but use more memory; smaller values are lighter but may increase query calls. Note that this only affects the initial sync. Ongoing live updates are streamed one by one via RxDB's change feed.
+
+
+
+## Syncing with Backends
+
+Replication and sync in RxDB run independently of TanStack DB. You set up replication directly on your RxCollection using RxDB's replication plugins (for CouchDB, GraphQL, WebRTC, REST APIs, etc.).
+
+When replication runs, it pulls and pushes changes to the backend and applies them to the RxDB collection. Since the TanStack DB integration subscribes to the RxDB change stream, any changes applied by replication are automatically reflected in your TanStack DB collection.
+
+This separation of concerns means you configure replication entirely in RxDB, and TanStack DB automatically benefits: your TanStack collections always stay up to date with whatever sync strategy you choose.
+
+
+## FAQ
+
+### Do I still need RxDB schema indexes if I only query TanStack DB?
+
+Usually not, at least for TanStack DB queries themselves. TanStack DB queries run entirely in memory, so RxDB schema indexes do not affect the performance of TanStack DB's live queries. However, RxDB indexes may still be important if:
+- You run queries directly against RxDB (e.g. `rxCollection.find(...)`).
+- Your replication setup uses filtered queries or selectors.
+- You rely on RxDB to selectively load subsets of data instead of hydrating everything into memory.
+
+### Is data duplicated between RxDB and TanStack DB?
+
+Yes, intentionally. RxDB stores data durably on disk. TanStack DB stores data in memory for fast queries and reactivity. This duplication enables high-performance UI queries while retaining [local-first](https://rxdb.info/articles/local-first-future.html) persistence and sync.
+
+### How does backend ↔ RxDB ↔ TanStack DB synchronization work?
+
+Synchronization follows a clear separation of responsibilities between RxDB and TanStack DB.
+
+**RxDB** is responsible for persistence and networking. It stores data durably using a local storage engine (IndexedDB, SQLite, etc.) and handles all replication logic. Replication is configured directly on the RxDB collection and runs independently of TanStack DB. RxDB pulls changes from the backend, applies them locally, resolves conflicts, and pushes local changes back to the backend.
+
+**TanStack DB** sits on top as an in-memory, reactive query layer. It does not talk to the backend directly and does not participate in replication. Instead, it mirrors the current state of the RxDB collection in memory and provides fast live queries and optimistic mutations for the UI.
+
+This design intentionally forms two independent loops:
+- A durability and sync loop managed entirely by RxDB (backend to RxDB).
+- A reactive UI loop managed by TanStack DB (RxDB change stream to in-memory collections to live queries).
+
+## Learn More
+
+- [RxDB Documentation](https://rxdb.info/overview.html)
+- [RxDB Sync Engine](https://rxdb.info/replication.html)
+- [Tanstack DB Live Queries](/db/guides/live-queries)
+
diff --git a/mintlify/db/collections/trailbase-collection.md b/mintlify/db/collections/trailbase-collection.md
new file mode 100644
index 000000000..3a656a3ee
--- /dev/null
+++ b/mintlify/db/collections/trailbase-collection.md
@@ -0,0 +1,227 @@
+---
+title: TrailBase Collection
+---
+
+# TrailBase Collection
+
+TrailBase collections provide seamless integration between TanStack DB and [TrailBase](https://trailbase.io), enabling real-time data synchronization with TrailBase's self-hosted application backend.
+
+## Overview
+
+[TrailBase](https://trailbase.io) is an easy-to-self-host, single-executable application backend with built-in SQLite, a V8 JS runtime, auth, admin UIs and sync functionality.
+
+The `@tanstack/trailbase-db-collection` package allows you to create collections that:
+- Automatically sync data from TrailBase Record APIs
+- Support real-time subscriptions when `enable_subscriptions` is enabled
+- Handle optimistic updates with automatic rollback on errors
+- Provide parse/serialize functions for data transformation
+
+## Installation
+
+```bash
+npm install @tanstack/trailbase-db-collection @tanstack/react-db trailbase
+```
+
+## Basic Usage
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { trailBaseCollectionOptions } from '@tanstack/trailbase-db-collection'
+import { initClient } from 'trailbase'
+
+const trailBaseClient = initClient(`https://your-trailbase-instance.com`)
+
+const todosCollection = createCollection(
+  trailBaseCollectionOptions({
+    id: 'todos',
+    recordApi: trailBaseClient.records('todos'),
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Configuration Options
+
+The `trailBaseCollectionOptions` function accepts the following options:
+
+### Required Options
+
+- `id`: Unique identifier for the collection
+- `recordApi`: TrailBase Record API instance created via `trailBaseClient.records()`
+- `getKey`: Function to extract the unique key from an item
+
+### Optional Options
+
+- `schema`: [Standard Schema](https://standardschema.dev) compatible schema (e.g., Zod, Effect) for client-side validation
+- `parse`: Object mapping field names to parsing functions that transform data coming from TrailBase
+- `serialize`: Object mapping field names to serialization functions that transform data going to TrailBase
+- `onInsert`: Handler function called when items are inserted
+- `onUpdate`: Handler function called when items are updated
+- `onDelete`: Handler function called when items are deleted
+
+## Data Transformation
+
+TrailBase uses different data formats for storage (e.g., Unix timestamps). Use `parse` and `serialize` to handle these transformations:
+
+```typescript
+type SelectTodo = {
+  id: string
+  text: string
+  created_at: number // Unix timestamp from TrailBase
+  completed: boolean
+}
+
+type Todo = {
+  id: string
+  text: string
+  created_at: Date // JavaScript Date for app usage
+  completed: boolean
+}
+
+const todosCollection = createCollection<SelectTodo, Todo>(
+  trailBaseCollectionOptions({
+    id: 'todos',
+    recordApi: trailBaseClient.records('todos'),
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    // Transform TrailBase data to application format
+    parse: {
+      created_at: (ts) => new Date(ts * 1000),
+    },
+    // Transform application data to TrailBase format
+    serialize: {
+      created_at: (date) => Math.floor(date.valueOf() / 1000),
+    },
+  })
+)
+```
+
+## Real-time Subscriptions
+
+TrailBase supports real-time subscriptions when enabled on the server. The collection automatically subscribes to changes and updates in real-time:
+
+```typescript
+const todosCollection = createCollection(
+  trailBaseCollectionOptions({
+    id: 'todos',
+    recordApi: trailBaseClient.records('todos'),
+    getKey: (item) => item.id,
+    // Real-time updates work automatically when
+    // enable_subscriptions is set in TrailBase config
+  })
+)
+
+// Changes from other clients will automatically update
+// the collection in real-time
+```
+
+## Mutation Handlers
+
+Handle inserts, updates, and deletes by providing mutation handlers:
+
+```typescript
+const todosCollection = createCollection(
+  trailBaseCollectionOptions({
+    id: 'todos',
+    recordApi: trailBaseClient.records('todos'),
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      const newTodo = transaction.mutations[0].modified
+      // TrailBase handles the persistence automatically
+      // Add custom logic here if needed
+    },
+    onUpdate: async ({ transaction }) => {
+      const { original, modified } = transaction.mutations[0]
+      // TrailBase handles the persistence automatically
+      // Add custom logic here if needed
+    },
+    onDelete: async ({ transaction }) => {
+      const deletedTodo = transaction.mutations[0].original
+      // TrailBase handles the persistence automatically
+      // Add custom logic here if needed
+    },
+  })
+)
+```
+
+## Complete Example
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { not } from '@tanstack/db'
+import { trailBaseCollectionOptions } from '@tanstack/trailbase-db-collection'
+import { initClient } from 'trailbase'
+import { z } from 'zod'
+
+const trailBaseClient = initClient(`https://your-trailbase-instance.com`)
+
+// Define schema
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean(),
+  created_at: z.date(),
+})
+
+type SelectTodo = {
+  id: string
+  text: string
+  completed: boolean
+  created_at: number
+}
+
+type Todo = z.infer<typeof todoSchema>
+
+// Create collection
+export const todosCollection = createCollection<SelectTodo, Todo>(
+  trailBaseCollectionOptions({
+    id: 'todos',
+    recordApi: trailBaseClient.records('todos'),
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    parse: {
+      created_at: (ts) => new Date(ts * 1000),
+    },
+    serialize: {
+      created_at: (date) => Math.floor(date.valueOf() / 1000),
+    },
+    onInsert: async ({ transaction }) => {
+      const newTodo = transaction.mutations[0].modified
+      console.log('Todo created:', newTodo)
+    },
+  })
+)
+
+// Use in component
+function TodoList() {
+  const { data: todos } = useLiveQuery((q) =>
+    q.from({ todo: todosCollection })
+      .where(({ todo }) => not(todo.completed))
+      .orderBy(({ todo }) => todo.created_at, 'desc')
+  )
+
+  const addTodo = (text: string) => {
+    todosCollection.insert({
+      id: crypto.randomUUID(),
+      text,
+      completed: false,
+      created_at: new Date(),
+    })
+  }
+
+  return (
+    <div>
+      {todos.map((todo) => (
+        <div key={todo.id}>{todo.text}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+## Learn More
+
+- [TrailBase Documentation](https://trailbase.io/documentation/)
+- [TrailBase Record APIs](https://trailbase.io/documentation/apis_record/)
+- [Optimistic Mutations](/db/guides/mutations)
+- [Live Queries](/db/guides/live-queries)
diff --git a/mintlify/db/community/resources.md b/mintlify/db/community/resources.md
new file mode 100644
index 000000000..781c11963
--- /dev/null
+++ b/mintlify/db/community/resources.md
@@ -0,0 +1,52 @@
+---
+title: Community Resources
+id: community-resources
+---
+
+# Community Resources
+
+This page contains a curated list of community-created packages, tools, and resources that extend or complement TanStack DB.
+
+## Community Packages
+
+### Dexie.js Integration (Unofficial)
+- **[tanstack-dexie-db-collection](https://github.com/HimanshuKumarDutt094/tanstack-dexie-db-collection)** - Community-maintained Dexie.js adapter for TanStack DB
+  - Local persistence using [Dexie.js](https://dexie.org) (IndexedDB wrapper)
+  - Lightweight integration for browser-based storage
+  - Install: `npm install tanstack-dexie-db-collection`
+
+### PGLite Integration (Unofficial)
+- **[tanstack-db-pglite](https://github.com/letstri/tanstack-db-pglite)** - Community-maintained [PGLite](https://pglite.dev/) adapter for TanStack DB
+  - Use PostgreSQL-compatible databases in the browser via WebAssembly
+  - Install: `npm install tanstack-db-pglite`
+
+### Contributing Your Package
+
+Have you created a collection adapter or integration? We'd love to feature it here! [Submit a PR](https://github.com/TanStack/db/pulls) to add your package.
+
+## Examples & Templates
+
+### Starter Templates
+*Share your starter templates and boilerplates here*
+
+### Example Applications
+*Community-built example apps showcasing TanStack DB features*
+
+## Learning Resources
+
+### Tutorials & Guides
+*Community tutorials and blog posts about TanStack DB*
+
+### Videos & Courses
+*Video tutorials and online courses*
+
+## Contributing
+
+We welcome contributions to this community resources page! If you've created something useful for the TanStack DB ecosystem:
+
+1. Fork the repository
+2. Add your resource to the appropriate section
+3. Include a brief description and link
+4. Submit a pull request
+
+Please ensure all submissions are relevant to TanStack DB and provide value to the community.
diff --git a/mintlify/db/framework/angular/overview.md b/mintlify/db/framework/angular/overview.md
new file mode 100644
index 000000000..0016f3597
--- /dev/null
+++ b/mintlify/db/framework/angular/overview.md
@@ -0,0 +1,212 @@
+---
+title: TanStack DB Angular Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/angular-db
+```
+
+## Angular inject function
+
+See the [Angular Functions Reference](/db/framework/angular/reference/index) to see the full list of functions available in the Angular Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](/db/guides/live-queries).
+
+## Basic Usage
+
+### injectLiveQuery
+
+The `injectLiveQuery` function creates a live query that automatically updates your component when data changes. It returns an object containing Angular signals for reactive state management:
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `
+    @if (query.isLoading()) {
+      <div>Loading...</div>
+    } @else {
+      <ul>
+        @for (todo of query.data(); track todo.id) {
+          <li>{{ todo.text }}</li>
+        }
+      </ul>
+    }
+  `
+})
+export class TodoListComponent {
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+}
+```
+
+**Note:** All return values (`data`, `isLoading`, `status`, etc.) are Angular signals, so call them with `()` in your template: `query.data()`, `query.isLoading()`.
+
+> **Template Syntax:** Examples use Angular 17+ control flow (`@if`, `@for`). For Angular 16, use `*ngIf` and `*ngFor` instead.
+
+### Reactive Parameters
+
+For queries that depend on reactive values, use the `params` option to re-run the query when those values change:
+
+```typescript
+import { Component, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { gt } from '@tanstack/db'
+
+@Component({
+  selector: 'app-filtered-todos',
+  standalone: true,
+  template: `
+    <div>{{ query.data().length }} high-priority todos</div>
+  `
+})
+export class FilteredTodosComponent {
+  minPriority = signal(5)
+
+  query = injectLiveQuery({
+    params: () => ({ minPriority: this.minPriority() }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => gt(todos.priority, params.minPriority))
+  })
+}
+```
+
+#### When to Use Reactive Parameters
+
+Use the reactive `params` option when your query depends on:
+- Component signals
+- Input properties
+- Computed values
+- Other reactive state
+
+When any reactive value accessed in the `params` function changes, the query is recreated and re-executed.
+
+#### What Happens When Parameters Change
+
+When a parameter value changes:
+1. The previous live-query collection is disposed
+2. A new query is created with the updated parameter values
+3. `status()`/`isLoading()` reflect the new query's lifecycle
+4. `data()` updates automatically when the new results arrive
+
+#### Best Practices
+
+**Use reactive params for dynamic queries:**
+
+```typescript
+import { Component, Input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class TodoListComponent {
+  // Angular 16+ compatible input
+  @Input({ required: true }) userId!: number
+  status = signal('active')
+
+  // Good - reactive params track all dependencies
+  query = injectLiveQuery({
+    params: () => ({
+      userId: this.userId,
+      status: this.status()
+    }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => and(
+         eq(todos.userId, params.userId),
+         eq(todos.status, params.status)
+       ))
+  })
+}
+```
+
+**Using Angular 17+ signal inputs:**
+
+```typescript
+import { Component, input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class TodoListComponent {
+  // Angular 17+ signal-based input
+  userId = input.required<number>()
+  status = signal('active')
+
+  query = injectLiveQuery({
+    params: () => ({
+      userId: this.userId(),
+      status: this.status()
+    }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => and(
+         eq(todos.userId, params.userId),
+         eq(todos.status, params.status)
+       ))
+  })
+}
+```
+
+**Static queries don't need params:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+
+@Component({
+  selector: 'app-all-todos',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class AllTodosComponent {
+  // No reactive dependencies - query never changes
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+  )
+}
+```
+
+**Access multiple signals in template:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  template: `
+    <div>Status: {{ query.status() }}</div>
+    <div>Loading: {{ query.isLoading() }}</div>
+    <div>Ready: {{ query.isReady() }}</div>
+    <div>Total: {{ query.data().length }}</div>
+  `
+})
+export class TodosComponent {
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+  )
+}
+```
diff --git a/mintlify/db/framework/angular/reference/functions/injectLiveQuery.md b/mintlify/db/framework/angular/reference/functions/injectLiveQuery.md
new file mode 100644
index 000000000..bbf6717f2
--- /dev/null
+++ b/mintlify/db/framework/angular/reference/functions/injectLiveQuery.md
@@ -0,0 +1,210 @@
+---
+id: injectLiveQuery
+title: injectLiveQuery
+---
+
+# Function: injectLiveQuery()
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TContext, TParams>(options): InjectLiveQueryResult<TContext>;
+```
+
+Defined in: [index.ts:89](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L89)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+#### TParams
+
+`TParams` *extends* `unknown`
+
+### Parameters
+
+#### options
+
+##### params
+
+() => `TParams`
+
+##### query
+
+(`args`) => `QueryBuilder`\&lt;`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)\&lt;`TContext`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TContext, TParams>(options): InjectLiveQueryResult<TContext>;
+```
+
+Defined in: [index.ts:99](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L99)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+#### TParams
+
+`TParams` *extends* `unknown`
+
+### Parameters
+
+#### options
+
+##### params
+
+() => `TParams`
+
+##### query
+
+(`args`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+### Returns
+
+[`InjectLiveQueryResult`](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)\&lt;`TContext`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TContext>(queryFn): InjectLiveQueryResult<TContext>;
+```
+
+Defined in: [index.ts:109](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L109)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)\&lt;`TContext`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TContext>(queryFn): InjectLiveQueryResult<TContext>;
+```
+
+Defined in: [index.ts:112](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L112)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+### Returns
+
+[`InjectLiveQueryResult`](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)\&lt;`TContext`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TContext>(config): InjectLiveQueryResult<TContext>;
+```
+
+Defined in: [index.ts:117](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L117)
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\&lt;`TContext`\>
+
+### Returns
+
+[`InjectLiveQueryResult`](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)\&lt;`TContext`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): InjectLiveQueryResultWithCollection<TResult, TKey, TUtils>;
+```
+
+Defined in: [index.ts:121](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L121)
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+### Returns
+
+[`InjectLiveQueryResultWithCollection`](/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection)\&lt;`TResult`, `TKey`, `TUtils`\>
+
+## Call Signature
+
+```ts
+function injectLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): InjectLiveQueryResultWithSingleResultCollection<TResult, TKey, TUtils>;
+```
+
+Defined in: [index.ts:129](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L129)
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`
+
+### Returns
+
+[`InjectLiveQueryResultWithSingleResultCollection`](/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection)\&lt;`TResult`, `TKey`, `TUtils`\>
diff --git a/mintlify/db/framework/angular/reference/index.md b/mintlify/db/framework/angular/reference/index.md
new file mode 100644
index 000000000..a2a2d0b7a
--- /dev/null
+++ b/mintlify/db/framework/angular/reference/index.md
@@ -0,0 +1,16 @@
+---
+id: "@tanstack/angular-db"
+title: "@tanstack/angular-db"
+---
+
+# @tanstack/angular-db
+
+## Interfaces
+
+- [InjectLiveQueryResult](/db/framework/angular/reference/interfaces/InjectLiveQueryResult)
+- [InjectLiveQueryResultWithCollection](/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection)
+- [InjectLiveQueryResultWithSingleResultCollection](/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection)
+
+## Functions
+
+- [injectLiveQuery](/db/framework/angular/reference/functions/injectLiveQuery)
diff --git a/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResult.md b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResult.md
new file mode 100644
index 000000000..467852c98
--- /dev/null
+++ b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResult.md
@@ -0,0 +1,128 @@
+---
+id: InjectLiveQueryResult
+title: InjectLiveQueryResult
+---
+
+# Interface: InjectLiveQueryResult\&lt;TContext\>
+
+Defined in: [index.ts:32](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L32)
+
+The result of calling `injectLiveQuery`.
+Contains reactive signals for the query state and data.
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* `Context`
+
+## Properties
+
+### collection
+
+```ts
+collection: Signal<
+  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+| null>;
+```
+
+Defined in: [index.ts:38](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L38)
+
+A signal containing the underlying collection instance (null for disabled queries)
+
+***
+
+### data
+
+```ts
+data: Signal<InferResultType<TContext>>;
+```
+
+Defined in: [index.ts:36](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L36)
+
+A signal containing the results as an array, or single result for findOne queries
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: Signal<boolean>;
+```
+
+Defined in: [index.ts:54](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L54)
+
+A signal indicating whether the collection has been cleaned up
+
+***
+
+### isError
+
+```ts
+isError: Signal<boolean>;
+```
+
+Defined in: [index.ts:52](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L52)
+
+A signal indicating whether the collection has an error
+
+***
+
+### isIdle
+
+```ts
+isIdle: Signal<boolean>;
+```
+
+Defined in: [index.ts:50](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L50)
+
+A signal indicating whether the collection is idle
+
+***
+
+### isLoading
+
+```ts
+isLoading: Signal<boolean>;
+```
+
+Defined in: [index.ts:46](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L46)
+
+A signal indicating whether the collection is currently loading
+
+***
+
+### isReady
+
+```ts
+isReady: Signal<boolean>;
+```
+
+Defined in: [index.ts:48](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L48)
+
+A signal indicating whether the collection is ready
+
+***
+
+### state
+
+```ts
+state: Signal<Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>>;
+```
+
+Defined in: [index.ts:34](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L34)
+
+A signal containing the complete state map of results keyed by their ID
+
+***
+
+### status
+
+```ts
+status: Signal<CollectionStatus | "disabled">;
+```
+
+Defined in: [index.ts:44](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L44)
+
+A signal containing the current status of the collection
diff --git a/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection.md b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection.md
new file mode 100644
index 000000000..9a36987b5
--- /dev/null
+++ b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection.md
@@ -0,0 +1,115 @@
+---
+id: InjectLiveQueryResultWithCollection
+title: InjectLiveQueryResultWithCollection
+---
+
+# Interface: InjectLiveQueryResultWithCollection\&lt;TResult, TKey, TUtils\>
+
+Defined in: [index.ts:57](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L57)
+
+## Type Parameters
+
+### TResult
+
+`TResult` *extends* `object` = `any`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\> = \&#123;
+\&#125;
+
+## Properties
+
+### collection
+
+```ts
+collection: Signal<
+  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>
+| null>;
+```
+
+Defined in: [index.ts:64](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L64)
+
+***
+
+### data
+
+```ts
+data: Signal<TResult[]>;
+```
+
+Defined in: [index.ts:63](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L63)
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: Signal<boolean>;
+```
+
+Defined in: [index.ts:70](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L70)
+
+***
+
+### isError
+
+```ts
+isError: Signal<boolean>;
+```
+
+Defined in: [index.ts:69](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L69)
+
+***
+
+### isIdle
+
+```ts
+isIdle: Signal<boolean>;
+```
+
+Defined in: [index.ts:68](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L68)
+
+***
+
+### isLoading
+
+```ts
+isLoading: Signal<boolean>;
+```
+
+Defined in: [index.ts:66](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L66)
+
+***
+
+### isReady
+
+```ts
+isReady: Signal<boolean>;
+```
+
+Defined in: [index.ts:67](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L67)
+
+***
+
+### state
+
+```ts
+state: Signal<Map<TKey, TResult>>;
+```
+
+Defined in: [index.ts:62](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L62)
+
+***
+
+### status
+
+```ts
+status: Signal<CollectionStatus | "disabled">;
+```
+
+Defined in: [index.ts:65](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L65)
diff --git a/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection.md b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection.md
new file mode 100644
index 000000000..b9ded9e2c
--- /dev/null
+++ b/mintlify/db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection.md
@@ -0,0 +1,115 @@
+---
+id: InjectLiveQueryResultWithSingleResultCollection
+title: InjectLiveQueryResultWithSingleResultCollection
+---
+
+# Interface: InjectLiveQueryResultWithSingleResultCollection\&lt;TResult, TKey, TUtils\>
+
+Defined in: [index.ts:73](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L73)
+
+## Type Parameters
+
+### TResult
+
+`TResult` *extends* `object` = `any`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\> = \&#123;
+\&#125;
+
+## Properties
+
+### collection
+
+```ts
+collection: Signal<
+  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult
+| null>;
+```
+
+Defined in: [index.ts:80](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L80)
+
+***
+
+### data
+
+```ts
+data: Signal<TResult | undefined>;
+```
+
+Defined in: [index.ts:79](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L79)
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: Signal<boolean>;
+```
+
+Defined in: [index.ts:86](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L86)
+
+***
+
+### isError
+
+```ts
+isError: Signal<boolean>;
+```
+
+Defined in: [index.ts:85](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L85)
+
+***
+
+### isIdle
+
+```ts
+isIdle: Signal<boolean>;
+```
+
+Defined in: [index.ts:84](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L84)
+
+***
+
+### isLoading
+
+```ts
+isLoading: Signal<boolean>;
+```
+
+Defined in: [index.ts:82](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L82)
+
+***
+
+### isReady
+
+```ts
+isReady: Signal<boolean>;
+```
+
+Defined in: [index.ts:83](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L83)
+
+***
+
+### state
+
+```ts
+state: Signal<Map<TKey, TResult>>;
+```
+
+Defined in: [index.ts:78](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L78)
+
+***
+
+### status
+
+```ts
+status: Signal<CollectionStatus | "disabled">;
+```
+
+Defined in: [index.ts:81](https://github.com/TanStack/db/blob/main/packages/angular-db/src/index.ts#L81)
diff --git a/mintlify/db/framework/react/overview.md b/mintlify/db/framework/react/overview.md
new file mode 100644
index 000000000..591709ea3
--- /dev/null
+++ b/mintlify/db/framework/react/overview.md
@@ -0,0 +1,163 @@
+---
+title: TanStack DB React Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/react-db
+```
+
+## React Hooks
+
+See the [React Functions Reference](/db/framework/react/reference/index) to see the full list of hooks available in the React Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](/db/guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` hook creates a live query that automatically updates your component when data changes:
+
+```tsx
+import { useLiveQuery, eq } from '@tanstack/react-db'
+
+function TodoList() {
+  const { data, isLoading } = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  if (isLoading) return <div>Loading...</div>
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+```
+
+### Dependency Arrays
+
+All query hooks (`useLiveQuery`, `useLiveInfiniteQuery`, `useLiveSuspenseQuery`) accept an optional dependency array as their last parameter. This array works similarly to React's `useEffect` dependencies - when any value in the array changes, the query is recreated and re-executed.
+
+#### When to Use Dependency Arrays
+
+Use dependency arrays when your query depends on external reactive values (props, state, or other hooks):
+
+```tsx
+function FilteredTodos({ minPriority }: { minPriority: number }) {
+  const { data } = useLiveQuery(
+    (q) => q.from({ todos: todosCollection })
+           .where(({ todos }) => gt(todos.priority, minPriority)),
+    [minPriority] // Re-run when minPriority changes
+  )
+
+  return <div>{data.length} high-priority todos</div>
+}
+```
+
+#### What Happens When Dependencies Change
+
+When a dependency value changes:
+1. The previous live query collection is cleaned up
+2. A new query is created with the updated values
+3. The component re-renders with the new data
+4. The hook suspends (for `useLiveSuspenseQuery`) or shows loading state
+
+#### Best Practices
+
+**Include all external values used in the query:**
+
+```tsx
+// Good - all external values in deps
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => and(
+           eq(todos.userId, userId),
+           eq(todos.status, status)
+         )),
+  [userId, status]
+)
+
+// Bad - missing dependencies
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.userId, userId)),
+  [] // Missing userId!
+)
+```
+
+**Empty array for static queries:**
+
+```tsx
+// No external dependencies - query never changes
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection }),
+  []
+)
+```
+
+**Omit the array for queries with no external dependencies:**
+
+```tsx
+// Same as above - no deps needed
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+)
+```
+
+### useLiveInfiniteQuery
+
+For paginated data with live updates, use `useLiveInfiniteQuery`:
+
+```tsx
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+  (q) => q
+    .from({ posts: postsCollection })
+    .where(({ posts }) => eq(posts.category, category))
+    .orderBy(({ posts }) => posts.createdAt, 'desc'),
+  {
+    pageSize: 20,
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.length === 20 ? allPages.length : undefined
+  },
+  [category] // Re-run when category changes
+)
+```
+
+**Note:** The dependency array is only available when using the query function variant, not when passing a pre-created collection.
+
+### useLiveSuspenseQuery
+
+For React Suspense integration, use `useLiveSuspenseQuery`:
+
+```tsx
+function TodoList({ filter }: { filter: string }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) => q.from({ todos: todosCollection })
+           .where(({ todos }) => eq(todos.filter, filter)),
+    [filter] // Re-suspends when filter changes
+  )
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList filter="active" />
+    </Suspense>
+  )
+}
+```
+
+When dependencies change, `useLiveSuspenseQuery` will re-suspend, showing your Suspense fallback until the new data is ready.
diff --git a/mintlify/db/framework/react/reference/functions/useLiveInfiniteQuery.md b/mintlify/db/framework/react/reference/functions/useLiveInfiniteQuery.md
new file mode 100644
index 000000000..b9a384e3f
--- /dev/null
+++ b/mintlify/db/framework/react/reference/functions/useLiveInfiniteQuery.md
@@ -0,0 +1,217 @@
+---
+id: useLiveInfiniteQuery
+title: useLiveInfiniteQuery
+---
+
+# Function: useLiveInfiniteQuery()
+
+## Call Signature
+
+```ts
+function useLiveInfiniteQuery<TResult, TKey, TUtils>(liveQueryCollection, config): UseLiveInfiniteQueryReturn<any>;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:118](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L118)
+
+Create an infinite query using a query function with live updates
+
+Uses `utils.setWindow()` to dynamically adjust the limit/offset window
+without recreating the live query collection on each page change.
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+#### config
+
+[`UseLiveInfiniteQueryConfig`](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig)\&lt;`any`\>
+
+Configuration including pageSize and getNextPageParam
+
+### Returns
+
+[`UseLiveInfiniteQueryReturn`](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn)\&lt;`any`\>
+
+Object with pages, data, and pagination controls
+
+### Examples
+
+```ts
+// Basic infinite query
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+  (q) => q
+    .from({ posts: postsCollection })
+    .orderBy(({ posts }) => posts.createdAt, 'desc')
+    .select(({ posts }) => ({
+      id: posts.id,
+      title: posts.title
+    })),
+  {
+    pageSize: 20,
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.length === 20 ? allPages.length : undefined
+  }
+)
+```
+
+```ts
+// With dependencies
+const { pages, fetchNextPage } = useLiveInfiniteQuery(
+  (q) => q
+    .from({ posts: postsCollection })
+    .where(({ posts }) => eq(posts.category, category))
+    .orderBy(({ posts }) => posts.createdAt, 'desc'),
+  {
+    pageSize: 10,
+    getNextPageParam: (lastPage) =>
+      lastPage.length === 10 ? lastPage.length : undefined
+  },
+  [category]
+)
+```
+
+```ts
+// Router loader pattern with pre-created collection
+// In loader:
+const postsQuery = createLiveQueryCollection({
+  query: (q) => q
+    .from({ posts: postsCollection })
+    .orderBy(({ posts }) => posts.createdAt, 'desc')
+    .limit(20)
+})
+await postsQuery.preload()
+return { postsQuery }
+
+// In component:
+const { postsQuery } = useLoaderData()
+const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+  postsQuery,
+  {
+    pageSize: 20,
+    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
+  }
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveInfiniteQuery<TContext>(
+   queryFn, 
+   config, 
+deps?): UseLiveInfiniteQueryReturn<TContext>;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:128](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L128)
+
+Create an infinite query using a query function with live updates
+
+Uses `utils.setWindow()` to dynamically adjust the limit/offset window
+without recreating the live query collection on each page change.
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.
+
+#### config
+
+[`UseLiveInfiniteQueryConfig`](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig)\&lt;`TContext`\>
+
+Configuration including pageSize and getNextPageParam
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveInfiniteQueryReturn`](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn)\&lt;`TContext`\>
+
+Object with pages, data, and pagination controls
+
+### Examples
+
+```ts
+// Basic infinite query
+const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+  (q) => q
+    .from({ posts: postsCollection })
+    .orderBy(({ posts }) => posts.createdAt, 'desc')
+    .select(({ posts }) => ({
+      id: posts.id,
+      title: posts.title
+    })),
+  {
+    pageSize: 20,
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.length === 20 ? allPages.length : undefined
+  }
+)
+```
+
+```ts
+// With dependencies
+const { pages, fetchNextPage } = useLiveInfiniteQuery(
+  (q) => q
+    .from({ posts: postsCollection })
+    .where(({ posts }) => eq(posts.category, category))
+    .orderBy(({ posts }) => posts.createdAt, 'desc'),
+  {
+    pageSize: 10,
+    getNextPageParam: (lastPage) =>
+      lastPage.length === 10 ? lastPage.length : undefined
+  },
+  [category]
+)
+```
+
+```ts
+// Router loader pattern with pre-created collection
+// In loader:
+const postsQuery = createLiveQueryCollection({
+  query: (q) => q
+    .from({ posts: postsCollection })
+    .orderBy(({ posts }) => posts.createdAt, 'desc')
+    .limit(20)
+})
+await postsQuery.preload()
+return { postsQuery }
+
+// In component:
+const { postsQuery } = useLoaderData()
+const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
+  postsQuery,
+  {
+    pageSize: 20,
+    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
+  }
+)
+```
diff --git a/mintlify/db/framework/react/reference/functions/useLiveQuery.md b/mintlify/db/framework/react/reference/functions/useLiveQuery.md
new file mode 100644
index 000000000..f37c6674a
--- /dev/null
+++ b/mintlify/db/framework/react/reference/functions/useLiveQuery.md
@@ -0,0 +1,1251 @@
+---
+id: useLiveQuery
+title: useLiveQuery
+---
+
+# Function: useLiveQuery()
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:84](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L84)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext>;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:101](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L101)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: 
+  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext> | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: 
+  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:120](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L120)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => 
+  \| `LiveQueryCollectionConfig`\&lt;`TContext`, `RootQueryResult`\&lt;`TContext`\>\>
+  \| `null`
+  \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: 
+  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext> | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: 
+  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:139](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L139)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### queryFn
+
+(`q`) => 
+  \| `Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\>
+  \| `null`
+  \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: 
+  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>
+  | undefined;
+```
+
+#### data
+
+```ts
+data: TResult[] | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map<TKey, TResult> | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext, TResult, TKey, TUtils>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:162](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L162)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### queryFn
+
+(`q`) => 
+  \| `QueryBuilder`\&lt;`TContext`\>
+  \| `LiveQueryCollectionConfig`\&lt;`TContext`, `RootQueryResult`\&lt;`TContext`\>\>
+  \| `Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\>
+  \| `null`
+  \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: 
+  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>
+  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | undefined;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext> | TResult[] | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: boolean;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: 
+  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
+  | Map<TKey, TResult>
+  | undefined;
+```
+
+#### status
+
+```ts
+status: UseLiveQueryStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(config, deps?): object;
+```
+
+Defined in: [useLiveQuery.ts:230](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L230)
+
+Create a live query using configuration object
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\&lt;`TContext`\>
+
+Configuration object with query and options
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext>;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic config object usage
+const { data, status } = useLiveQuery({
+  query: (q) => q.from({ todos: todosCollection }),
+  gcTime: 60000
+})
+```
+
+```ts
+// With query builder and options
+const queryBuilder = new Query()
+  .from({ persons: collection })
+  .where(({ persons }) => gt(persons.age, 30))
+  .select(({ persons }) => ({ id: persons.id, name: persons.name }))
+
+const { data, isReady } = useLiveQuery({ query: queryBuilder })
+```
+
+```ts
+// Handle all states uniformly
+const { data, isLoading, isReady, isError } = useLiveQuery({
+  query: (q) => q.from({ items: itemCollection })
+})
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Something went wrong</div>
+if (!isReady) return <div>Preparing...</div>
+
+return <div>{data.length} items loaded</div>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
+```
+
+Defined in: [useLiveQuery.ts:276](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L276)
+
+Subscribe to an existing live query collection
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+Pre-created live query collection to subscribe to
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<TResult, TKey, TUtils>;
+```
+
+#### data
+
+```ts
+data: TResult[];
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map<TKey, TResult>;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Using pre-created live query collection
+const myLiveQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
+)
+const { data, collection } = useLiveQuery(myLiveQuery)
+```
+
+```ts
+// Access collection methods directly
+const { data, collection, isReady } = useLiveQuery(existingCollection)
+
+// Use collection for mutations
+const handleToggle = (id) => {
+  collection.update(id, draft => { draft.completed = !draft.completed })
+}
+```
+
+```ts
+// Handle states consistently
+const { data, isLoading, isError } = useLiveQuery(sharedCollection)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error loading data</div>
+
+return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
+```
+
+Defined in: [useLiveQuery.ts:296](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L296)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data, state, and status information
+
+#### collection
+
+```ts
+collection: Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult;
+```
+
+#### data
+
+```ts
+data: TResult | undefined;
+```
+
+#### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+#### isEnabled
+
+```ts
+isEnabled: true;
+```
+
+#### isError
+
+```ts
+isError: boolean;
+```
+
+#### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+#### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+#### isReady
+
+```ts
+isReady: boolean;
+```
+
+#### state
+
+```ts
+state: Map<TKey, TResult>;
+```
+
+#### status
+
+```ts
+status: CollectionStatus;
+```
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// Single result query
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+if (isLoading) return <div>Loading...</div>
+if (isError) return <div>Error: {status}</div>
+
+return (
+  <ul>
+    {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+  </ul>
+)
+```
diff --git a/mintlify/db/framework/react/reference/functions/useLiveQueryEffect.md b/mintlify/db/framework/react/reference/functions/useLiveQueryEffect.md
new file mode 100644
index 000000000..aebfb3ac1
--- /dev/null
+++ b/mintlify/db/framework/react/reference/functions/useLiveQueryEffect.md
@@ -0,0 +1,61 @@
+---
+id: useLiveQueryEffect
+title: useLiveQueryEffect
+---
+
+# Function: useLiveQueryEffect()
+
+```ts
+function useLiveQueryEffect<TRow, TKey>(config, deps): void;
+```
+
+Defined in: [useLiveQueryEffect.ts:30](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQueryEffect.ts#L30)
+
+React hook for creating a reactive effect that fires handlers when rows
+enter, exit, or update within a query result.
+
+The effect is created on mount and disposed on unmount. If `deps` change,
+the previous effect is disposed and a new one is created.
+
+## Type Parameters
+
+### TRow
+
+`TRow` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Parameters
+
+### config
+
+`EffectConfig`\&lt;`TRow`, `TKey`\>
+
+### deps
+
+`DependencyList` = `[]`
+
+## Returns
+
+`void`
+
+## Example
+
+```tsx
+function ChatComponent() {
+  useLiveQueryEffect(
+    {
+      query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),
+      skipInitial: true,
+      onEnter: async (event) => {
+        await generateResponse(event.value)
+      },
+    },
+    []
+  )
+
+  return <div>...</div>
+}
+```
diff --git a/mintlify/db/framework/react/reference/functions/useLiveSuspenseQuery.md b/mintlify/db/framework/react/reference/functions/useLiveSuspenseQuery.md
new file mode 100644
index 000000000..f8e34db13
--- /dev/null
+++ b/mintlify/db/framework/react/reference/functions/useLiveSuspenseQuery.md
@@ -0,0 +1,626 @@
+---
+id: useLiveSuspenseQuery
+title: useLiveSuspenseQuery
+---
+
+# Function: useLiveSuspenseQuery()
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery<TContext>(queryFn, deps?): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:109](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L109)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext>;
+```
+
+#### state
+
+```ts
+state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList />
+    </Suspense>
+  )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Error loading data</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <TodoList />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+### Remarks
+
+**Important:** This hook does NOT support disabled queries (returning undefined/null).
+Following TanStack Query's useSuspenseQuery design, the query callback must always
+return a valid query, collection, or config object.
+
+❌ **This will cause a type error:**
+```ts
+useLiveSuspenseQuery(
+  (q) => userId ? q.from({ users }) : undefined  // ❌ Error!
+)
+```
+
+✅ **Use conditional rendering instead:**
+```ts
+function Profile({ userId }: { userId: string }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) => q.from({ users }).where(({ users }) => eq(users.id, userId))
+  )
+  return <div>{data.name}</div>
+}
+
+// In parent component:
+{userId ? <Profile userId={userId} /> : <div>No user</div>}
+```
+
+✅ **Or use useLiveQuery for conditional queries:**
+```ts
+const { data, isEnabled } = useLiveQuery(
+  (q) => userId ? q.from({ users }) : undefined,  // ✅ Supported!
+  [userId]
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery<TContext>(config, deps?): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:119](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L119)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\&lt;`TContext`\>
+
+#### deps?
+
+`unknown`[]
+
+Array of dependencies that trigger query re-execution when changed
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}>;
+```
+
+#### data
+
+```ts
+data: InferResultType<TContext>;
+```
+
+#### state
+
+```ts
+state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList />
+    </Suspense>
+  )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Error loading data</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <TodoList />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+### Remarks
+
+**Important:** This hook does NOT support disabled queries (returning undefined/null).
+Following TanStack Query's useSuspenseQuery design, the query callback must always
+return a valid query, collection, or config object.
+
+❌ **This will cause a type error:**
+```ts
+useLiveSuspenseQuery(
+  (q) => userId ? q.from({ users }) : undefined  // ❌ Error!
+)
+```
+
+✅ **Use conditional rendering instead:**
+```ts
+function Profile({ userId }: { userId: string }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) => q.from({ users }).where(({ users }) => eq(users.id, userId))
+  )
+  return <div>{data.name}</div>
+}
+
+// In parent component:
+{userId ? <Profile userId={userId} /> : <div>No user</div>}
+```
+
+✅ **Or use useLiveQuery for conditional queries:**
+```ts
+const { data, isEnabled } = useLiveQuery(
+  (q) => userId ? q.from({ users }) : undefined,  // ✅ Supported!
+  [userId]
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:129](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L129)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<TResult, TKey, TUtils>;
+```
+
+#### data
+
+```ts
+data: TResult[];
+```
+
+#### state
+
+```ts
+state: Map<TKey, TResult>;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList />
+    </Suspense>
+  )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Error loading data</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <TodoList />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+### Remarks
+
+**Important:** This hook does NOT support disabled queries (returning undefined/null).
+Following TanStack Query's useSuspenseQuery design, the query callback must always
+return a valid query, collection, or config object.
+
+❌ **This will cause a type error:**
+```ts
+useLiveSuspenseQuery(
+  (q) => userId ? q.from({ users }) : undefined  // ❌ Error!
+)
+```
+
+✅ **Use conditional rendering instead:**
+```ts
+function Profile({ userId }: { userId: string }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) => q.from({ users }).where(({ users }) => eq(users.id, userId))
+  )
+  return <div>{data.name}</div>
+}
+
+// In parent component:
+{userId ? <Profile userId={userId} /> : <div>No user</div>}
+```
+
+✅ **Or use useLiveQuery for conditional queries:**
+```ts
+const { data, isEnabled } = useLiveQuery(
+  (q) => userId ? q.from({ users }) : undefined,  // ✅ Supported!
+  [userId]
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
+```
+
+Defined in: [useLiveSuspenseQuery.ts:142](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveSuspenseQuery.ts#L142)
+
+Create a live query with React Suspense support
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`
+
+### Returns
+
+`object`
+
+Object with reactive data and state - data is guaranteed to be defined
+
+#### collection
+
+```ts
+collection: Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult;
+```
+
+#### data
+
+```ts
+data: TResult | undefined;
+```
+
+#### state
+
+```ts
+state: Map<TKey, TResult>;
+```
+
+### Throws
+
+Promise when data is loading (caught by Suspense boundary)
+
+### Throws
+
+Error when collection fails (caught by Error boundary)
+
+### Examples
+
+```ts
+// Basic usage with Suspense
+function TodoList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList />
+    </Suspense>
+  )
+}
+```
+
+```ts
+// Single result query
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.id, 1))
+         .findOne()
+)
+// data is guaranteed to be the single item (or undefined if not found)
+```
+
+```ts
+// With dependencies that trigger re-suspension
+const { data } = useLiveSuspenseQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [minPriority] // Re-suspends when minPriority changes
+)
+```
+
+```ts
+// With Error boundary
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Error loading data</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <TodoList />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+### Remarks
+
+**Important:** This hook does NOT support disabled queries (returning undefined/null).
+Following TanStack Query's useSuspenseQuery design, the query callback must always
+return a valid query, collection, or config object.
+
+❌ **This will cause a type error:**
+```ts
+useLiveSuspenseQuery(
+  (q) => userId ? q.from({ users }) : undefined  // ❌ Error!
+)
+```
+
+✅ **Use conditional rendering instead:**
+```ts
+function Profile({ userId }: { userId: string }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) => q.from({ users }).where(({ users }) => eq(users.id, userId))
+  )
+  return <div>{data.name}</div>
+}
+
+// In parent component:
+{userId ? <Profile userId={userId} /> : <div>No user</div>}
+```
+
+✅ **Or use useLiveQuery for conditional queries:**
+```ts
+const { data, isEnabled } = useLiveQuery(
+  (q) => userId ? q.from({ users }) : undefined,  // ✅ Supported!
+  [userId]
+)
+```
diff --git a/mintlify/db/framework/react/reference/functions/usePacedMutations.md b/mintlify/db/framework/react/reference/functions/usePacedMutations.md
new file mode 100644
index 000000000..2de6f457b
--- /dev/null
+++ b/mintlify/db/framework/react/reference/functions/usePacedMutations.md
@@ -0,0 +1,131 @@
+---
+id: usePacedMutations
+title: usePacedMutations
+---
+
+# Function: usePacedMutations()
+
+```ts
+function usePacedMutations<TVariables, T>(config): (variables) => Transaction<T>;
+```
+
+Defined in: [usePacedMutations.ts:93](https://github.com/TanStack/db/blob/main/packages/react-db/src/usePacedMutations.ts#L93)
+
+React hook for managing paced mutations with timing strategies.
+
+Provides optimistic mutations with pluggable strategies like debouncing,
+queuing, or throttling. The optimistic updates are applied immediately via
+`onMutate`, and the actual persistence is controlled by the strategy.
+
+## Type Parameters
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Parameters
+
+### config
+
+`PacedMutationsConfig`\&lt;`TVariables`, `T`\>
+
+Configuration including onMutate, mutationFn and strategy
+
+## Returns
+
+A mutate function that accepts variables and returns Transaction objects
+
+```ts
+(variables): Transaction<T>;
+```
+
+### Parameters
+
+#### variables
+
+`TVariables`
+
+### Returns
+
+`Transaction`\&lt;`T`\>
+
+## Examples
+
+```tsx
+// Debounced auto-save
+function AutoSaveForm({ formId }: { formId: string }) {
+  const mutate = usePacedMutations<string>({
+    onMutate: (value) => {
+      // Apply optimistic update immediately
+      formCollection.update(formId, draft => {
+        draft.content = value
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.save(transaction.mutations)
+    },
+    strategy: debounceStrategy({ wait: 500 })
+  })
+
+  const handleChange = async (value: string) => {
+    const tx = mutate(value)
+
+    // Optional: await persistence or handle errors
+    try {
+      await tx.isPersisted.promise
+      console.log('Saved!')
+    } catch (error) {
+      console.error('Save failed:', error)
+    }
+  }
+
+  return <textarea onChange={e => handleChange(e.target.value)} />
+}
+```
+
+```tsx
+// Throttled slider updates
+function VolumeSlider() {
+  const mutate = usePacedMutations<number>({
+    onMutate: (volume) => {
+      settingsCollection.update('volume', draft => {
+        draft.value = volume
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.updateVolume(transaction.mutations)
+    },
+    strategy: throttleStrategy({ wait: 200 })
+  })
+
+  return <input type="range" onChange={e => mutate(+e.target.value)} />
+}
+```
+
+```tsx
+// Debounce with leading/trailing for color picker (persist first + final only)
+function ColorPicker() {
+  const mutate = usePacedMutations<string>({
+    onMutate: (color) => {
+      themeCollection.update('primary', draft => {
+        draft.color = color
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.updateTheme(transaction.mutations)
+    },
+    strategy: debounceStrategy({ wait: 0, leading: true, trailing: true })
+  })
+
+  return (
+    <input
+      type="color"
+      onChange={e => mutate(e.target.value)}
+    />
+  )
+}
+```
diff --git a/mintlify/db/framework/react/reference/index.md b/mintlify/db/framework/react/reference/index.md
new file mode 100644
index 000000000..835a20b42
--- /dev/null
+++ b/mintlify/db/framework/react/reference/index.md
@@ -0,0 +1,20 @@
+---
+id: "@tanstack/react-db"
+title: "@tanstack/react-db"
+---
+
+# @tanstack/react-db
+
+## Type Aliases
+
+- [UseLiveInfiniteQueryConfig](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig)
+- [UseLiveInfiniteQueryReturn](/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn)
+- [UseLiveQueryStatus](/db/framework/react/reference/type-aliases/UseLiveQueryStatus)
+
+## Functions
+
+- [useLiveInfiniteQuery](/db/framework/react/reference/functions/useLiveInfiniteQuery)
+- [useLiveQuery](/db/framework/react/reference/functions/useLiveQuery)
+- [useLiveQueryEffect](/db/framework/react/reference/functions/useLiveQueryEffect)
+- [useLiveSuspenseQuery](/db/framework/react/reference/functions/useLiveSuspenseQuery)
+- [usePacedMutations](/db/framework/react/reference/functions/usePacedMutations)
diff --git a/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig.md b/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig.md
new file mode 100644
index 000000000..26e25831e
--- /dev/null
+++ b/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig.md
@@ -0,0 +1,76 @@
+---
+id: UseLiveInfiniteQueryConfig
+title: UseLiveInfiniteQueryConfig
+---
+
+# Type Alias: UseLiveInfiniteQueryConfig\&lt;TContext\>
+
+```ts
+type UseLiveInfiniteQueryConfig<TContext> = object;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:23](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L23)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* `Context`
+
+## Properties
+
+### ~~getNextPageParam()?~~
+
+```ts
+optional getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => number | undefined;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:31](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L31)
+
+#### Parameters
+
+##### lastPage
+
+`InferResultType`\&lt;`TContext`\>\[`number`\][]
+
+##### allPages
+
+`InferResultType`\&lt;`TContext`\>\[`number`\][][]
+
+##### lastPageParam
+
+`number`
+
+##### allPageParams
+
+`number`[]
+
+#### Returns
+
+`number` \| `undefined`
+
+#### Deprecated
+
+This callback is not used by the current implementation.
+Pagination is determined internally via a peek-ahead strategy.
+Provided for API compatibility with TanStack Query conventions.
+
+***
+
+### initialPageParam?
+
+```ts
+optional initialPageParam: number;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:25](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L25)
+
+***
+
+### pageSize?
+
+```ts
+optional pageSize: number;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:24](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L24)
diff --git a/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn.md b/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn.md
new file mode 100644
index 000000000..03eaef01b
--- /dev/null
+++ b/mintlify/db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn.md
@@ -0,0 +1,60 @@
+---
+id: UseLiveInfiniteQueryReturn
+title: UseLiveInfiniteQueryReturn
+---
+
+# Type Alias: UseLiveInfiniteQueryReturn\&lt;TContext\>
+
+```ts
+type UseLiveInfiniteQueryReturn<TContext> = Omit<ReturnType<typeof useLiveQuery>, "data"> & object;
+```
+
+Defined in: [useLiveInfiniteQuery.ts:39](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveInfiniteQuery.ts#L39)
+
+## Type Declaration
+
+### data
+
+```ts
+data: InferResultType<TContext>;
+```
+
+### fetchNextPage()
+
+```ts
+fetchNextPage: () => void;
+```
+
+#### Returns
+
+`void`
+
+### hasNextPage
+
+```ts
+hasNextPage: boolean;
+```
+
+### isFetchingNextPage
+
+```ts
+isFetchingNextPage: boolean;
+```
+
+### pageParams
+
+```ts
+pageParams: number[];
+```
+
+### pages
+
+```ts
+pages: InferResultType<TContext>[number][][];
+```
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* `Context`
diff --git a/mintlify/db/framework/react/reference/type-aliases/UseLiveQueryStatus.md b/mintlify/db/framework/react/reference/type-aliases/UseLiveQueryStatus.md
new file mode 100644
index 000000000..93bbcd634
--- /dev/null
+++ b/mintlify/db/framework/react/reference/type-aliases/UseLiveQueryStatus.md
@@ -0,0 +1,12 @@
+---
+id: UseLiveQueryStatus
+title: UseLiveQueryStatus
+---
+
+# Type Alias: UseLiveQueryStatus
+
+```ts
+type UseLiveQueryStatus = CollectionStatus | "disabled";
+```
+
+Defined in: [useLiveQuery.ts:23](https://github.com/TanStack/db/blob/main/packages/react-db/src/useLiveQuery.ts#L23)
diff --git a/mintlify/db/framework/solid/overview.md b/mintlify/db/framework/solid/overview.md
new file mode 100644
index 000000000..0d74f07c0
--- /dev/null
+++ b/mintlify/db/framework/solid/overview.md
@@ -0,0 +1,189 @@
+---
+title: TanStack DB Solid Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/solid-db
+```
+
+## Solid Primitives
+
+See the [Solid Functions Reference](/db/framework/solid/reference/index) to see the full list of primitives available in the Solid Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](/db/guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` primitive creates a live query that automatically updates your component when data changes. It returns an object where `data` is a plain array and status fields (e.g. `isLoading()`, `status()`) are accessors:
+
+```tsx
+import { useLiveQuery } from '@tanstack/solid-db'
+import { eq } from '@tanstack/db'
+import { Show, For } from 'solid-js'
+
+function TodoList() {
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <Show when={!query.isLoading()} fallback={<div>Loading...</div>}>
+      <ul>
+        <For each={query.data}>
+          {(todo) => <li>{todo.text}</li>}
+        </For>
+      </ul>
+    </Show>
+  )
+}
+```
+
+**Note:** `query.data` returns an array directly (not a function), but status fields like `isLoading()`, `status()`, etc. are accessor functions.
+
+### Reactive Queries with Signals
+
+Solid uses fine-grained reactivity, which means queries automatically track and respond to signal changes. Simply call signals inside your query function, and Solid will automatically recompute when they change:
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function FilteredTodos(props: { minPriority: number }) {
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, props.minPriority))
+  )
+
+  return <div>{query.data.length} high-priority todos</div>
+}
+```
+
+When `props.minPriority` changes, Solid's reactivity system automatically:
+1. Detects the prop access inside the query function
+2. Cleans up the previous live query collection
+3. Creates a new query with the updated value
+4. Updates the component with the new data
+
+#### Using Signals from Component State
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { eq, and } from '@tanstack/db'
+
+function TodoList() {
+  const [userId, setUserId] = createSignal(1)
+  const [status, setStatus] = createSignal('active')
+
+  // Solid automatically tracks userId() and status() calls
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => and(
+       eq(todos.userId, userId()),
+       eq(todos.status, status())
+     ))
+  )
+
+  return (
+    <div>
+      <select onChange={(e) => setStatus(e.currentTarget.value)}>
+        <option value="active">Active</option>
+        <option value="completed">Completed</option>
+      </select>
+      <div>{query.data.length} todos</div>
+    </div>
+  )
+}
+```
+
+**Key Point:** Unlike React, you don't need dependency arrays. Solid's reactive system automatically tracks any signals, props, or stores accessed during query execution.
+
+#### Best Practices
+
+**Access signals inside the query function:**
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function TodoList() {
+  const [minPriority, setMinPriority] = createSignal(5)
+
+  // Good - signal accessed inside query function
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, minPriority()))
+  )
+
+  // Solid automatically tracks minPriority() and recomputes when it changes
+  return <div>{query.data.length} todos</div>
+}
+```
+
+**Don't read signals outside the query function:**
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function TodoList() {
+  const [minPriority, setMinPriority] = createSignal(5)
+
+  // Bad - reading signal outside query function
+  const currentPriority = minPriority()
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, currentPriority))
+  )
+  // Won't update when minPriority changes!
+
+  return <div>{query.data.length} todos</div>
+}
+```
+
+**Static queries need no special handling:**
+
+```tsx
+import { useLiveQuery } from '@tanstack/solid-db'
+
+function AllTodos() {
+  // No signals accessed - query never changes
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+  )
+
+  return <div>{query.data.length} todos</div>
+}
+```
+
+### Using Pre-created Collections
+
+You can also pass an existing collection to `useLiveQuery`. This is useful for sharing queries across components:
+
+```tsx
+import { createLiveQueryCollection } from '@tanstack/db'
+import { useLiveQuery } from '@tanstack/solid-db'
+
+// Create collection outside component
+const todosQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.active, true))
+)
+
+function TodoList() {
+  // Pass existing collection
+  const query = useLiveQuery(() => todosQuery)
+
+  return <div>{query.data.length} todos</div>
+}
+```
diff --git a/mintlify/db/framework/solid/reference/functions/useLiveQuery.md b/mintlify/db/framework/solid/reference/functions/useLiveQuery.md
new file mode 100644
index 000000000..9e2868745
--- /dev/null
+++ b/mintlify/db/framework/solid/reference/functions/useLiveQuery.md
@@ -0,0 +1,453 @@
+---
+id: useLiveQuery
+title: useLiveQuery
+---
+
+# Function: useLiveQuery()
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn): Accessor<InferResultType<TContext>> & object;
+```
+
+Defined in: [useLiveQuery.ts:102](https://github.com/TanStack/db/blob/main/packages/solid-db/src/useLiveQuery.ts#L102)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch
+
+### Returns
+
+Accessor that returns data with Suspense support, with state and status information as properties
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority())),
+)
+```
+
+```ts
+// Join pattern
+const personIssues = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Switch>
+    <Match when={todosQuery.isLoading}>
+      <div>Loading...</div>
+    </Match>
+    <Match when={todosQuery.isError}>
+      <div>Error: {todosQuery.status}</div>
+    </Match>
+    <Match when={todosQuery.isReady}>
+      <For each={todosQuery()}>
+        {(todo) => <li key={todo.id}>{todo.text}</li>}
+      </For>
+    </Match>
+  </Switch>
+)
+```
+
+```ts
+// Use Suspense boundaries
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Suspense fallback={<div>Loading...</div>}>
+    <For each={todosQuery()}>
+      {(todo) => <li key={todo.id}>{todo.text}</li>}
+    </For>
+  </Suspense>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn): Accessor<InferResultType<TContext>> & object;
+```
+
+Defined in: [useLiveQuery.ts:121](https://github.com/TanStack/db/blob/main/packages/solid-db/src/useLiveQuery.ts#L121)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+Query function that defines what data to fetch
+
+### Returns
+
+Accessor that returns data with Suspense support, with state and status information as properties
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority())),
+)
+```
+
+```ts
+// Join pattern
+const personIssues = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Switch>
+    <Match when={todosQuery.isLoading}>
+      <div>Loading...</div>
+    </Match>
+    <Match when={todosQuery.isError}>
+      <div>Error: {todosQuery.status}</div>
+    </Match>
+    <Match when={todosQuery.isReady}>
+      <For each={todosQuery()}>
+        {(todo) => <li key={todo.id}>{todo.text}</li>}
+      </For>
+    </Match>
+  </Switch>
+)
+```
+
+```ts
+// Use Suspense boundaries
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Suspense fallback={<div>Loading...</div>}>
+    <For each={todosQuery()}>
+      {(todo) => <li key={todo.id}>{todo.text}</li>}
+    </For>
+  </Suspense>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(config): Accessor<InferResultType<TContext>> & object;
+```
+
+Defined in: [useLiveQuery.ts:182](https://github.com/TanStack/db/blob/main/packages/solid-db/src/useLiveQuery.ts#L182)
+
+Create a live query using configuration object
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`Accessor`\&lt;`LiveQueryCollectionConfig`\&lt;`TContext`, `RootQueryResult`\&lt;`TContext`\>\>\>
+
+Configuration object with query and options
+
+### Returns
+
+Accessor that returns data with Suspense support, with state and status information as properties
+
+### Examples
+
+```ts
+// Basic config object usage
+const todosQuery = useLiveQuery(() => ({
+  query: (q) => q.from({ todos: todosCollection }),
+  gcTime: 60000
+}))
+```
+
+```ts
+// With query builder and options
+const queryBuilder = new Query()
+  .from({ persons: collection })
+  .where(({ persons }) => gt(persons.age, 30))
+  .select(({ persons }) => ({ id: persons.id, name: persons.name }))
+
+const personsQuery = useLiveQuery(() => ({ query: queryBuilder }))
+```
+
+```ts
+// Handle all states uniformly
+const itemsQuery = useLiveQuery(() => ({
+  query: (q) => q.from({ items: itemCollection })
+}))
+
+return (
+  <Switch fallback={<div>{itemsQuery().length} items loaded</div>}>
+    <Match when={itemsQuery.isLoading}>
+      <div>Loading...</div>
+    </Match>
+    <Match when={itemsQuery.isError}>
+      <div>Something went wrong</div>
+    </Match>
+    <Match when={!itemsQuery.isReady}>
+      <div>Preparing...</div>
+    </Match>
+  </Switch>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): Accessor<TResult[]> & object;
+```
+
+Defined in: [useLiveQuery.ts:236](https://github.com/TanStack/db/blob/main/packages/solid-db/src/useLiveQuery.ts#L236)
+
+Subscribe to an existing live query collection
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Accessor`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`\>
+
+Pre-created live query collection to subscribe to
+
+### Returns
+
+Accessor that returns data with Suspense support, with state and status information as properties
+
+### Examples
+
+```ts
+// Using pre-created live query collection
+const myLiveQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
+)
+const todosQuery = useLiveQuery(() => myLiveQuery)
+```
+
+```ts
+// Access collection methods directly
+const existingQuery = useLiveQuery(() => existingCollection)
+
+// Use collection for mutations
+const handleToggle = (id) => {
+  existingQuery.collection.update(id, draft => { draft.completed = !draft.completed })
+}
+```
+
+```ts
+// Handle states consistently
+const sharedQuery = useLiveQuery(() => sharedCollection)
+
+return (
+ <Switch fallback={<div><For each={sharedQuery()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>
+   <Match when={sharedQuery.isLoading}>
+     <div>Loading...</div>
+   </Match>
+   <Match when={sharedQuery.isError}>
+     <div>Error loading data</div>
+   </Match>
+ </Switch>
+)
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): Accessor<TResult | undefined> & object;
+```
+
+Defined in: [useLiveQuery.ts:261](https://github.com/TanStack/db/blob/main/packages/solid-db/src/useLiveQuery.ts#L261)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`Accessor`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`\>
+
+### Returns
+
+Accessor that returns data with Suspense support, with state and status information as properties
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With dependencies that trigger re-execution
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority())),
+)
+```
+
+```ts
+// Join pattern
+const personIssues = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Switch>
+    <Match when={todosQuery.isLoading}>
+      <div>Loading...</div>
+    </Match>
+    <Match when={todosQuery.isError}>
+      <div>Error: {todosQuery.status}</div>
+    </Match>
+    <Match when={todosQuery.isReady}>
+      <For each={todosQuery()}>
+        {(todo) => <li key={todo.id}>{todo.text}</li>}
+      </For>
+    </Match>
+  </Switch>
+)
+```
+
+```ts
+// Use Suspense boundaries
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+return (
+  <Suspense fallback={<div>Loading...</div>}>
+    <For each={todosQuery()}>
+      {(todo) => <li key={todo.id}>{todo.text}</li>}
+    </For>
+  </Suspense>
+)
+```
diff --git a/mintlify/db/framework/solid/reference/index.md b/mintlify/db/framework/solid/reference/index.md
new file mode 100644
index 000000000..916b76a2c
--- /dev/null
+++ b/mintlify/db/framework/solid/reference/index.md
@@ -0,0 +1,10 @@
+---
+id: "@tanstack/solid-db"
+title: "@tanstack/solid-db"
+---
+
+# @tanstack/solid-db
+
+## Functions
+
+- [useLiveQuery](/db/framework/solid/reference/functions/useLiveQuery)
diff --git a/mintlify/db/framework/svelte/overview.md b/mintlify/db/framework/svelte/overview.md
new file mode 100644
index 000000000..921237915
--- /dev/null
+++ b/mintlify/db/framework/svelte/overview.md
@@ -0,0 +1,169 @@
+---
+title: TanStack DB Svelte Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/svelte-db
+```
+
+## Svelte Utilities
+
+See the [Svelte Functions Reference](/db/framework/svelte/reference/index) to see the full list of utilities available in the Svelte Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](/db/guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` utility creates a live query that automatically updates your component when data changes. It returns reactive values powered by Svelte 5 runes:
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+  import { eq } from '@tanstack/db'
+
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+</script>
+
+{#if query.isLoading}
+  <div>Loading...</div>
+{:else}
+  <ul>
+    {#each query.data as todo (todo.id)}
+      <li>{todo.text}</li>
+    {/each}
+  </ul>
+{/if}
+```
+
+**Note:** With Svelte 5, `useLiveQuery` returns reactive values through getters. Access `query.data` and `query.isLoading` directly (no `$` prefix needed).
+
+### Dependency Arrays
+
+The `useLiveQuery` utility accepts an optional dependency array as its last parameter. When any value in the array changes, the query is recreated and re-executed.
+
+#### When to Use Dependency Arrays
+
+Use dependency arrays when your query depends on external reactive values (props or state):
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+  import { gt } from '@tanstack/db'
+
+  let { minPriority } = $props()
+
+  const query = useLiveQuery(
+    (q) => q.from({ todos: todosCollection })
+           .where(({ todos }) => gt(todos.priority, minPriority)),
+    [() => minPriority] // Re-run when minPriority changes
+  )
+</script>
+
+<div>{query.data.length} high-priority todos</div>
+```
+
+**Note:** When using props or reactive state in the query, wrap them in a function for the dependency array.
+
+#### What Happens When Dependencies Change
+
+When a dependency value changes:
+1. The previous live query collection is cleaned up
+2. A new query is created with the updated values
+3. The component re-renders with the new data
+4. The utility shows loading state again
+
+#### Best Practices
+
+**Include all external values used in the query:**
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+  import { eq, and } from '@tanstack/db'
+
+  let userId = $state(1)
+  let status = $state('active')
+
+  // Good - all external values in deps
+  const query = useLiveQuery(
+    (q) => q.from({ todos: todosCollection })
+           .where(({ todos }) => and(
+             eq(todos.userId, userId),
+             eq(todos.status, status)
+           )),
+    [() => userId, () => status]
+  )
+
+  // Bad - missing dependencies
+  const badQuery = useLiveQuery(
+    (q) => q.from({ todos: todosCollection })
+           .where(({ todos }) => eq(todos.userId, userId)),
+    [] // Missing userId!
+  )
+</script>
+
+<div>{query.data.length} todos</div>
+```
+
+**Empty array for static queries:**
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+
+  // No external dependencies - query never changes
+  const query = useLiveQuery(
+    (q) => q.from({ todos: todosCollection }),
+    []
+  )
+</script>
+
+<div>{query.data.length} todos</div>
+```
+
+**Omit the array for queries with no external dependencies:**
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+
+  // Same as above - no deps needed
+  const query = useLiveQuery(
+    (q) => q.from({ todos: todosCollection })
+  )
+</script>
+
+<div>{query.data.length} todos</div>
+```
+
+### Accessing Multiple Properties
+
+You can access all status properties directly on the query result:
+
+```svelte
+<script>
+  import { useLiveQuery } from '@tanstack/svelte-db'
+  import { eq } from '@tanstack/db'
+
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.active, true))
+  )
+</script>
+
+<div>
+  <div>Status: {query.status}</div>
+  <div>Loading: {query.isLoading}</div>
+  <div>Ready: {query.isReady}</div>
+  <div>Total: {query.data.length}</div>
+</div>
+```
diff --git a/mintlify/db/framework/svelte/reference/functions/useLiveQuery.md b/mintlify/db/framework/svelte/reference/functions/useLiveQuery.md
new file mode 100644
index 000000000..5c2fde0d8
--- /dev/null
+++ b/mintlify/db/framework/svelte/reference/functions/useLiveQuery.md
@@ -0,0 +1,540 @@
+---
+id: useLiveQuery
+title: useLiveQuery
+---
+
+# Function: useLiveQuery()
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, InferResultType<TContext>>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:160](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L160)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+() => `unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/svelte/reference/interfaces/UseLiveQueryReturn)\&lt;\&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125;, `InferResultType`\&lt;`TContext`\>\>
+
+Reactive object with query data, state, and status information
+
+### Remarks
+
+**IMPORTANT - Destructuring in Svelte 5:**
+Direct destructuring breaks reactivity. To destructure, wrap with `$derived`:
+
+❌ **Incorrect** - Loses reactivity:
+```ts
+const { data, isLoading } = useLiveQuery(...)
+```
+
+✅ **Correct** - Maintains reactivity:
+```ts
+// Option 1: Use dot notation (recommended)
+const query = useLiveQuery(...)
+// Access: query.data, query.isLoading
+
+// Option 2: Wrap with $derived for destructuring
+const query = useLiveQuery(...)
+const { data, isLoading } = $derived(query)
+```
+
+This is a fundamental Svelte 5 limitation, not a library bug. See:
+https://github.com/sveltejs/svelte/issues/11002
+
+### Examples
+
+```ts
+// Basic query with object syntax (recommended pattern)
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+// Access via: todosQuery.data, todosQuery.isLoading, etc.
+```
+
+```ts
+// With reactive dependencies
+let minPriority = $state(5)
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [() => minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Destructuring with $derived (if needed)
+const query = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+)
+const { data, isLoading, isError } = $derived(query)
+// Now data, isLoading, and isError maintain reactivity
+```
+
+```ts
+// Join pattern
+const issuesQuery = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// {#if todosQuery.isLoading}
+//   <div>Loading...</div>
+// {:else if todosQuery.isError}
+//   <div>Error: {todosQuery.status}</div>
+// {:else}
+//   <ul>
+//     {#each todosQuery.data as todo (todo.id)}
+//       <li>{todo.text}</li>
+//     {/each}
+//   </ul>
+// {/if}
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, InferResultType<TContext> | undefined>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:166](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L166)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+() => `unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/svelte/reference/interfaces/UseLiveQueryReturn)\&lt;\&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125;, `InferResultType`\&lt;`TContext`\> \| `undefined`\>
+
+Reactive object with query data, state, and status information
+
+### Remarks
+
+**IMPORTANT - Destructuring in Svelte 5:**
+Direct destructuring breaks reactivity. To destructure, wrap with `$derived`:
+
+❌ **Incorrect** - Loses reactivity:
+```ts
+const { data, isLoading } = useLiveQuery(...)
+```
+
+✅ **Correct** - Maintains reactivity:
+```ts
+// Option 1: Use dot notation (recommended)
+const query = useLiveQuery(...)
+// Access: query.data, query.isLoading
+
+// Option 2: Wrap with $derived for destructuring
+const query = useLiveQuery(...)
+const { data, isLoading } = $derived(query)
+```
+
+This is a fundamental Svelte 5 limitation, not a library bug. See:
+https://github.com/sveltejs/svelte/issues/11002
+
+### Examples
+
+```ts
+// Basic query with object syntax (recommended pattern)
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+// Access via: todosQuery.data, todosQuery.isLoading, etc.
+```
+
+```ts
+// With reactive dependencies
+let minPriority = $state(5)
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [() => minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Destructuring with $derived (if needed)
+const query = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+)
+const { data, isLoading, isError } = $derived(query)
+// Now data, isLoading, and isError maintain reactivity
+```
+
+```ts
+// Join pattern
+const issuesQuery = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// {#if todosQuery.isLoading}
+//   <div>Loading...</div>
+// {:else if todosQuery.isError}
+//   <div>Error: {todosQuery.status}</div>
+// {:else}
+//   <ul>
+//     {#each todosQuery.data as todo (todo.id)}
+//       <li>{todo.text}</li>
+//     {/each}
+//   </ul>
+// {/if}
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(config, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, InferResultType<TContext>>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:214](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L214)
+
+Create a live query using configuration object
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\&lt;`TContext`\>
+
+Configuration object with query and options
+
+#### deps?
+
+() => `unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/svelte/reference/interfaces/UseLiveQueryReturn)\&lt;\&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125;, `InferResultType`\&lt;`TContext`\>\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Basic config object usage
+const todosQuery = useLiveQuery({
+  query: (q) => q.from({ todos: todosCollection }),
+  gcTime: 60000
+})
+```
+
+```ts
+// With reactive dependencies
+let filter = $state('active')
+const todosQuery = useLiveQuery({
+  query: (q) => q.from({ todos: todosCollection })
+                 .where(({ todos }) => eq(todos.status, filter))
+}, [() => filter])
+```
+
+```ts
+// Handle all states uniformly
+const itemsQuery = useLiveQuery({
+  query: (q) => q.from({ items: itemCollection })
+})
+
+// In template:
+// {#if itemsQuery.isLoading}
+//   <div>Loading...</div>
+// {:else if itemsQuery.isError}
+//   <div>Something went wrong</div>
+// {:else if !itemsQuery.isReady}
+//   <div>Preparing...</div>
+// {:else}
+//   <div>{itemsQuery.data.length} items loaded</div>
+// {/if}
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils, TResult[]>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:263](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L263)
+
+Subscribe to an existing query collection (can be reactive)
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`MaybeGetter`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`\>
+
+Pre-created query collection to subscribe to (can be a getter)
+
+### Returns
+
+[`UseLiveQueryReturnWithCollection`](/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection)\&lt;`TResult`, `TKey`, `TUtils`, `TResult`[]\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Using pre-created query collection
+const myLiveQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
+)
+const queryResult = useLiveQuery(myLiveQuery)
+```
+
+```ts
+// Reactive query collection reference
+let selectedQuery = $state(todosQuery)
+const queryResult = useLiveQuery(() => selectedQuery)
+
+// Switch queries reactively
+selectedQuery = archiveQuery
+```
+
+```ts
+// Access query collection methods directly
+const queryResult = useLiveQuery(existingQuery)
+
+// Use underlying collection for mutations
+const handleToggle = (id) => {
+  queryResult.collection.update(id, draft => { draft.completed = !draft.completed })
+}
+```
+
+```ts
+// Handle states consistently
+const queryResult = useLiveQuery(sharedQuery)
+
+// In template:
+// {#if queryResult.isLoading}
+//   <div>Loading...</div>
+// {:else if queryResult.isError}
+//   <div>Error loading data</div>
+// {:else}
+//   {#each queryResult.data as item (item.id)}
+//     <Item {...item} />
+//   {/each}
+// {/if}
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils, TResult | undefined>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:274](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L274)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`MaybeGetter`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`\>
+
+### Returns
+
+[`UseLiveQueryReturnWithCollection`](/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection)\&lt;`TResult`, `TKey`, `TUtils`, `TResult` \| `undefined`\>
+
+Reactive object with query data, state, and status information
+
+### Remarks
+
+**IMPORTANT - Destructuring in Svelte 5:**
+Direct destructuring breaks reactivity. To destructure, wrap with `$derived`:
+
+❌ **Incorrect** - Loses reactivity:
+```ts
+const { data, isLoading } = useLiveQuery(...)
+```
+
+✅ **Correct** - Maintains reactivity:
+```ts
+// Option 1: Use dot notation (recommended)
+const query = useLiveQuery(...)
+// Access: query.data, query.isLoading
+
+// Option 2: Wrap with $derived for destructuring
+const query = useLiveQuery(...)
+const { data, isLoading } = $derived(query)
+```
+
+This is a fundamental Svelte 5 limitation, not a library bug. See:
+https://github.com/sveltejs/svelte/issues/11002
+
+### Examples
+
+```ts
+// Basic query with object syntax (recommended pattern)
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+// Access via: todosQuery.data, todosQuery.isLoading, etc.
+```
+
+```ts
+// With reactive dependencies
+let minPriority = $state(5)
+const todosQuery = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority)),
+  [() => minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Destructuring with $derived (if needed)
+const query = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+)
+const { data, isLoading, isError } = $derived(query)
+// Now data, isLoading, and isError maintain reactivity
+```
+
+```ts
+// Join pattern
+const issuesQuery = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const todosQuery = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// {#if todosQuery.isLoading}
+//   <div>Loading...</div>
+// {:else if todosQuery.isError}
+//   <div>Error: {todosQuery.status}</div>
+// {:else}
+//   <ul>
+//     {#each todosQuery.data as todo (todo.id)}
+//       <li>{todo.text}</li>
+//     {/each}
+//   </ul>
+// {/if}
+```
diff --git a/mintlify/db/framework/svelte/reference/index.md b/mintlify/db/framework/svelte/reference/index.md
new file mode 100644
index 000000000..e9e25c955
--- /dev/null
+++ b/mintlify/db/framework/svelte/reference/index.md
@@ -0,0 +1,15 @@
+---
+id: "@tanstack/svelte-db"
+title: "@tanstack/svelte-db"
+---
+
+# @tanstack/svelte-db
+
+## Interfaces
+
+- [UseLiveQueryReturn](/db/framework/svelte/reference/interfaces/UseLiveQueryReturn)
+- [UseLiveQueryReturnWithCollection](/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection)
+
+## Functions
+
+- [useLiveQuery](/db/framework/svelte/reference/functions/useLiveQuery)
diff --git a/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturn.md b/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturn.md
new file mode 100644
index 000000000..07a21b9ec
--- /dev/null
+++ b/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturn.md
@@ -0,0 +1,129 @@
+---
+id: UseLiveQueryReturn
+title: UseLiveQueryReturn
+---
+
+# Interface: UseLiveQueryReturn\&lt;T, TData\>
+
+Defined in: [useLiveQuery.svelte.ts:33](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L33)
+
+Return type for useLiveQuery hook
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+### TData
+
+`TData` = `T`[]
+
+## Properties
+
+### collection
+
+```ts
+collection: Collection<T, string | number, {
+}>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:36](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L36)
+
+The underlying query collection instance
+
+***
+
+### data
+
+```ts
+data: TData;
+```
+
+Defined in: [useLiveQuery.svelte.ts:35](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L35)
+
+Reactive array of query results in order, or single item when using findOne()
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:42](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L42)
+
+True when query has been cleaned up
+
+***
+
+### isError
+
+```ts
+isError: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:41](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L41)
+
+True when query encountered an error
+
+***
+
+### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:40](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L40)
+
+True when query hasn't started yet
+
+***
+
+### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:38](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L38)
+
+True while initial query data is loading
+
+***
+
+### isReady
+
+```ts
+isReady: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:39](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L39)
+
+True when query has received first data and is ready
+
+***
+
+### state
+
+```ts
+state: Map<string | number, T>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:34](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L34)
+
+Reactive Map of query results (key → item)
+
+***
+
+### status
+
+```ts
+status: CollectionStatus;
+```
+
+Defined in: [useLiveQuery.svelte.ts:37](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L37)
+
+Current query status
diff --git a/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection.md b/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection.md
new file mode 100644
index 000000000..bedbb1af4
--- /dev/null
+++ b/mintlify/db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection.md
@@ -0,0 +1,116 @@
+---
+id: UseLiveQueryReturnWithCollection
+title: UseLiveQueryReturnWithCollection
+---
+
+# Interface: UseLiveQueryReturnWithCollection\&lt;T, TKey, TUtils, TData\>
+
+Defined in: [useLiveQuery.svelte.ts:45](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L45)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### TData
+
+`TData` = `T`[]
+
+## Properties
+
+### collection
+
+```ts
+collection: Collection<T, TKey, TUtils>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:53](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L53)
+
+***
+
+### data
+
+```ts
+data: TData;
+```
+
+Defined in: [useLiveQuery.svelte.ts:52](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L52)
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:59](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L59)
+
+***
+
+### isError
+
+```ts
+isError: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:58](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L58)
+
+***
+
+### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:57](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L57)
+
+***
+
+### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:55](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L55)
+
+***
+
+### isReady
+
+```ts
+isReady: boolean;
+```
+
+Defined in: [useLiveQuery.svelte.ts:56](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L56)
+
+***
+
+### state
+
+```ts
+state: Map<TKey, T>;
+```
+
+Defined in: [useLiveQuery.svelte.ts:51](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L51)
+
+***
+
+### status
+
+```ts
+status: CollectionStatus;
+```
+
+Defined in: [useLiveQuery.svelte.ts:54](https://github.com/TanStack/db/blob/main/packages/svelte-db/src/useLiveQuery.svelte.ts#L54)
diff --git a/mintlify/db/framework/vue/overview.md b/mintlify/db/framework/vue/overview.md
new file mode 100644
index 000000000..177b733e1
--- /dev/null
+++ b/mintlify/db/framework/vue/overview.md
@@ -0,0 +1,215 @@
+---
+title: TanStack DB Vue Adapter
+id: adapter
+---
+
+## Installation
+
+```sh
+npm install @tanstack/vue-db
+```
+
+## Vue Composables
+
+See the [Vue Functions Reference](/db/framework/vue/reference/index) to see the full list of composables available in the Vue Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](/db/guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` composable creates a live query that automatically updates your component when data changes. It returns reactive computed refs:
+
+```vue
+<script setup>
+import { useLiveQuery } from '@tanstack/vue-db'
+import { eq } from '@tanstack/db'
+
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <ul v-else>
+    <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
+  </ul>
+</template>
+```
+
+**Note:** All return values (`data`, `isLoading`, `status`, etc.) are computed refs, so access them with `.value` in `<script>` but directly in `<template>`.
+
+### Dependency Arrays
+
+The `useLiveQuery` composable accepts an optional dependency array as its last parameter. When any reactive value in the array changes, the query is recreated and re-executed.
+
+#### When to Use Dependency Arrays
+
+Use dependency arrays when your query depends on external reactive values (refs, props, or reactive objects):
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useLiveQuery } from '@tanstack/vue-db'
+import { gt } from '@tanstack/db'
+
+const minPriority = ref(5)
+
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority.value)),
+  [minPriority] // Pass the ref directly, it will be unwrapped automatically
+)
+</script>
+
+<template>
+  <div>{{ data.length }} high-priority todos</div>
+</template>
+```
+
+**Important:** Pass refs directly in the dependency array, not as functions. Vue will automatically track them.
+
+#### What Happens When Dependencies Change
+
+When a dependency value changes:
+1. The previous live query collection is cleaned up
+2. A new query is created with the updated values
+3. The component re-renders with the new data
+4. The composable shows loading state again
+
+#### Best Practices
+
+**Include all external refs used in the query:**
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useLiveQuery } from '@tanstack/vue-db'
+import { eq, and } from '@tanstack/db'
+
+const userId = ref(1)
+const status = ref('active')
+
+// Good - all refs in deps array
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => and(
+           eq(todos.userId, userId.value),
+           eq(todos.status, status.value)
+         )),
+  [userId, status] // Pass refs directly
+)
+
+// Bad - missing dependencies
+const { data: badData } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.userId, userId.value)),
+  [] // Missing userId!
+)
+</script>
+
+<template>
+  <div>{{ data.length }} todos</div>
+</template>
+```
+
+**Using with props:**
+
+```vue
+<script setup>
+import { toRef } from 'vue'
+import { useLiveQuery } from '@tanstack/vue-db'
+import { eq } from '@tanstack/db'
+
+const props = defineProps<{ userId: number }>()
+
+// Option 1: Convert prop to ref
+const userIdRef = toRef(props, 'userId')
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.userId, userIdRef.value)),
+  [userIdRef]
+)
+
+// Option 2: Use a getter function for the prop
+const { data: data2 } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => eq(todos.userId, props.userId)),
+  [() => props.userId] // Getter function for non-ref values
+)
+</script>
+
+<template>
+  <div>{{ data.length }} todos</div>
+</template>
+```
+
+**Empty array for static queries:**
+
+```vue
+<script setup>
+import { useLiveQuery } from '@tanstack/vue-db'
+
+// No external dependencies - query never changes
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection }),
+  []
+)
+</script>
+
+<template>
+  <div>{{ data.length }} todos</div>
+</template>
+```
+
+**Omit the array for queries with no external dependencies:**
+
+```vue
+<script setup>
+import { useLiveQuery } from '@tanstack/vue-db'
+
+// Same as above - no deps needed
+const { data } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+)
+</script>
+
+<template>
+  <div>{{ data.length }} todos</div>
+</template>
+```
+
+### Using Pre-created Collections
+
+You can also pass an existing collection to `useLiveQuery`. This is useful for sharing queries across components:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { createLiveQueryCollection } from '@tanstack/db'
+import { useLiveQuery } from '@tanstack/vue-db'
+import { eq } from '@tanstack/db'
+
+// Create collection outside component or in a composable
+const todosQuery = createLiveQueryCollection({
+  query: (q) => q.from({ todos: todosCollection })
+               .where(({ todos }) => eq(todos.active, true)),
+  startSync: true
+})
+
+// Use the pre-created collection
+const { data, collection } = useLiveQuery(todosQuery)
+
+// Or use a reactive ref to switch between collections
+const currentQuery = ref(todosQuery)
+const { data: reactiveData } = useLiveQuery(currentQuery)
+</script>
+
+<template>
+  <div>{{ data.length }} todos</div>
+</template>
+```
diff --git a/mintlify/db/framework/vue/reference/functions/useLiveQuery.md b/mintlify/db/framework/vue/reference/functions/useLiveQuery.md
new file mode 100644
index 000000000..69967fc96
--- /dev/null
+++ b/mintlify/db/framework/vue/reference/functions/useLiveQuery.md
@@ -0,0 +1,411 @@
+---
+id: useLiveQuery
+title: useLiveQuery
+---
+
+# Function: useLiveQuery()
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<TContext>;
+```
+
+Defined in: [useLiveQuery.ts:134](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L134)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\>
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/vue/reference/interfaces/UseLiveQueryReturn)\&lt;`TContext`\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With reactive dependencies
+const minPriority = ref(5)
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority.value)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// <div v-if="isLoading">Loading...</div>
+// <div v-else-if="isError">Error: {{ status }}</div>
+// <ul v-else>
+//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
+// </ul>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<TContext>;
+```
+
+Defined in: [useLiveQuery.ts:140](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L140)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### queryFn
+
+(`q`) => `QueryBuilder`\&lt;`TContext`\> \| `null` \| `undefined`
+
+Query function that defines what data to fetch
+
+#### deps?
+
+`unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/vue/reference/interfaces/UseLiveQueryReturn)\&lt;`TContext`\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With reactive dependencies
+const minPriority = ref(5)
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority.value)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// <div v-if="isLoading">Loading...</div>
+// <div v-else-if="isError">Error: {{ status }}</div>
+// <ul v-else>
+//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
+// </ul>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TContext>(config, deps?): UseLiveQueryReturn<TContext>;
+```
+
+Defined in: [useLiveQuery.ts:180](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L180)
+
+Create a live query using configuration object
+
+### Type Parameters
+
+#### TContext
+
+`TContext` *extends* `Context`
+
+### Parameters
+
+#### config
+
+`LiveQueryCollectionConfig`\&lt;`TContext`\>
+
+Configuration object with query and options
+
+#### deps?
+
+`unknown`[]
+
+Array of reactive dependencies that trigger query re-execution when changed
+
+### Returns
+
+[`UseLiveQueryReturn`](/db/framework/vue/reference/interfaces/UseLiveQueryReturn)\&lt;`TContext`\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Basic config object usage
+const { data, status } = useLiveQuery({
+  query: (q) => q.from({ todos: todosCollection }),
+  gcTime: 60000
+})
+```
+
+```ts
+// With reactive dependencies
+const filter = ref('active')
+const { data, isReady } = useLiveQuery({
+  query: (q) => q.from({ todos: todosCollection })
+                 .where(({ todos }) => eq(todos.status, filter.value))
+}, [filter])
+```
+
+```ts
+// Handle all states uniformly
+const { data, isLoading, isReady, isError } = useLiveQuery({
+  query: (q) => q.from({ items: itemCollection })
+})
+
+// In template:
+// <div v-if="isLoading">Loading...</div>
+// <div v-else-if="isError">Something went wrong</div>
+// <div v-else-if="!isReady">Preparing...</div>
+// <div v-else>{{ data.length }} items loaded</div>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>;
+```
+
+Defined in: [useLiveQuery.ts:225](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L225)
+
+Subscribe to an existing query collection (can be reactive)
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`MaybeRefOrGetter`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `NonSingleResult`\>
+
+Pre-created query collection to subscribe to (can be a ref)
+
+### Returns
+
+[`UseLiveQueryReturnWithCollection`](/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection)\&lt;`TResult`, `TKey`, `TUtils`\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Using pre-created query collection
+const myLiveQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
+)
+const { data, collection } = useLiveQuery(myLiveQuery)
+```
+
+```ts
+// Reactive query collection reference
+const selectedQuery = ref(todosQuery)
+const { data, collection } = useLiveQuery(selectedQuery)
+
+// Switch queries reactively
+selectedQuery.value = archiveQuery
+```
+
+```ts
+// Access query collection methods directly
+const { data, collection, isReady } = useLiveQuery(existingQuery)
+
+// Use underlying collection for mutations
+const handleToggle = (id) => {
+  collection.value.update(id, draft => { draft.completed = !draft.completed })
+}
+```
+
+```ts
+// Handle states consistently
+const { data, isLoading, isError } = useLiveQuery(sharedQuery)
+
+// In template:
+// <div v-if="isLoading">Loading...</div>
+// <div v-else-if="isError">Error loading data</div>
+// <div v-else>
+//   <Item v-for="item in data" :key="item.id" v-bind="item" />
+// </div>
+```
+
+## Call Signature
+
+```ts
+function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithSingleResultCollection<TResult, TKey, TUtils>;
+```
+
+Defined in: [useLiveQuery.ts:236](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L236)
+
+Create a live query using a query function
+
+### Type Parameters
+
+#### TResult
+
+`TResult` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+#### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+### Parameters
+
+#### liveQueryCollection
+
+`MaybeRefOrGetter`\&lt;`Collection`\&lt;`TResult`, `TKey`, `TUtils`, `StandardSchemaV1`\&lt;`unknown`, `unknown`\>, `TResult`\> & `SingleResult`\>
+
+### Returns
+
+[`UseLiveQueryReturnWithSingleResultCollection`](/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection)\&lt;`TResult`, `TKey`, `TUtils`\>
+
+Reactive object with query data, state, and status information
+
+### Examples
+
+```ts
+// Basic query with object syntax
+const { data, isLoading } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+)
+```
+
+```ts
+// With reactive dependencies
+const minPriority = ref(5)
+const { data, state } = useLiveQuery(
+  (q) => q.from({ todos: todosCollection })
+         .where(({ todos }) => gt(todos.priority, minPriority.value)),
+  [minPriority] // Re-run when minPriority changes
+)
+```
+
+```ts
+// Join pattern
+const { data } = useLiveQuery((q) =>
+  q.from({ issues: issueCollection })
+   .join({ persons: personCollection }, ({ issues, persons }) =>
+     eq(issues.userId, persons.id)
+   )
+   .select(({ issues, persons }) => ({
+     id: issues.id,
+     title: issues.title,
+     userName: persons.name
+   }))
+)
+```
+
+```ts
+// Handle loading and error states in template
+const { data, isLoading, isError, status } = useLiveQuery((q) =>
+  q.from({ todos: todoCollection })
+)
+
+// In template:
+// <div v-if="isLoading">Loading...</div>
+// <div v-else-if="isError">Error: {{ status }}</div>
+// <ul v-else>
+//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
+// </ul>
+```
diff --git a/mintlify/db/framework/vue/reference/index.md b/mintlify/db/framework/vue/reference/index.md
new file mode 100644
index 000000000..73012ee8d
--- /dev/null
+++ b/mintlify/db/framework/vue/reference/index.md
@@ -0,0 +1,16 @@
+---
+id: "@tanstack/vue-db"
+title: "@tanstack/vue-db"
+---
+
+# @tanstack/vue-db
+
+## Interfaces
+
+- [UseLiveQueryReturn](/db/framework/vue/reference/interfaces/UseLiveQueryReturn)
+- [UseLiveQueryReturnWithCollection](/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection)
+- [UseLiveQueryReturnWithSingleResultCollection](/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection)
+
+## Functions
+
+- [useLiveQuery](/db/framework/vue/reference/functions/useLiveQuery)
diff --git a/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturn.md b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturn.md
new file mode 100644
index 000000000..6bd2bebda
--- /dev/null
+++ b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturn.md
@@ -0,0 +1,125 @@
+---
+id: UseLiveQueryReturn
+title: UseLiveQueryReturn
+---
+
+# Interface: UseLiveQueryReturn\&lt;TContext\>
+
+Defined in: [useLiveQuery.ts:40](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L40)
+
+Return type for useLiveQuery hook
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* `Context`
+
+## Properties
+
+### collection
+
+```ts
+collection: ComputedRef<Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
+}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>>;
+```
+
+Defined in: [useLiveQuery.ts:43](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L43)
+
+The underlying query collection instance
+
+***
+
+### data
+
+```ts
+data: ComputedRef<InferResultType<TContext>>;
+```
+
+Defined in: [useLiveQuery.ts:42](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L42)
+
+Reactive array of query results in order, or single result for findOne queries
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:49](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L49)
+
+True when query has been cleaned up
+
+***
+
+### isError
+
+```ts
+isError: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:48](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L48)
+
+True when query encountered an error
+
+***
+
+### isIdle
+
+```ts
+isIdle: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:47](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L47)
+
+True when query hasn't started yet
+
+***
+
+### isLoading
+
+```ts
+isLoading: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:45](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L45)
+
+True while initial query data is loading
+
+***
+
+### isReady
+
+```ts
+isReady: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:46](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L46)
+
+True when query has received first data and is ready
+
+***
+
+### state
+
+```ts
+state: ComputedRef<Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>>;
+```
+
+Defined in: [useLiveQuery.ts:41](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L41)
+
+Reactive Map of query results (key → item)
+
+***
+
+### status
+
+```ts
+status: ComputedRef<CollectionStatus>;
+```
+
+Defined in: [useLiveQuery.ts:44](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L44)
+
+Current query status
diff --git a/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection.md b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection.md
new file mode 100644
index 000000000..76e608ce7
--- /dev/null
+++ b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection.md
@@ -0,0 +1,112 @@
+---
+id: UseLiveQueryReturnWithCollection
+title: UseLiveQueryReturnWithCollection
+---
+
+# Interface: UseLiveQueryReturnWithCollection\&lt;T, TKey, TUtils\>
+
+Defined in: [useLiveQuery.ts:52](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L52)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+## Properties
+
+### collection
+
+```ts
+collection: ComputedRef<Collection<T, TKey, TUtils, StandardSchemaV1<unknown, unknown>, T>>;
+```
+
+Defined in: [useLiveQuery.ts:59](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L59)
+
+***
+
+### data
+
+```ts
+data: ComputedRef<T[]>;
+```
+
+Defined in: [useLiveQuery.ts:58](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L58)
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:65](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L65)
+
+***
+
+### isError
+
+```ts
+isError: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:64](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L64)
+
+***
+
+### isIdle
+
+```ts
+isIdle: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:63](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L63)
+
+***
+
+### isLoading
+
+```ts
+isLoading: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:61](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L61)
+
+***
+
+### isReady
+
+```ts
+isReady: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:62](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L62)
+
+***
+
+### state
+
+```ts
+state: ComputedRef<Map<TKey, T>>;
+```
+
+Defined in: [useLiveQuery.ts:57](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L57)
+
+***
+
+### status
+
+```ts
+status: ComputedRef<CollectionStatus>;
+```
+
+Defined in: [useLiveQuery.ts:60](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L60)
diff --git a/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection.md b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection.md
new file mode 100644
index 000000000..aab720df5
--- /dev/null
+++ b/mintlify/db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection.md
@@ -0,0 +1,112 @@
+---
+id: UseLiveQueryReturnWithSingleResultCollection
+title: UseLiveQueryReturnWithSingleResultCollection
+---
+
+# Interface: UseLiveQueryReturnWithSingleResultCollection\&lt;T, TKey, TUtils\>
+
+Defined in: [useLiveQuery.ts:68](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L68)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* `Record`\&lt;`string`, `any`\>
+
+## Properties
+
+### collection
+
+```ts
+collection: ComputedRef<Collection<T, TKey, TUtils, StandardSchemaV1<unknown, unknown>, T> & SingleResult>;
+```
+
+Defined in: [useLiveQuery.ts:75](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L75)
+
+***
+
+### data
+
+```ts
+data: ComputedRef<T | undefined>;
+```
+
+Defined in: [useLiveQuery.ts:74](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L74)
+
+***
+
+### isCleanedUp
+
+```ts
+isCleanedUp: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:81](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L81)
+
+***
+
+### isError
+
+```ts
+isError: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:80](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L80)
+
+***
+
+### isIdle
+
+```ts
+isIdle: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:79](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L79)
+
+***
+
+### isLoading
+
+```ts
+isLoading: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:77](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L77)
+
+***
+
+### isReady
+
+```ts
+isReady: ComputedRef<boolean>;
+```
+
+Defined in: [useLiveQuery.ts:78](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L78)
+
+***
+
+### state
+
+```ts
+state: ComputedRef<Map<TKey, T>>;
+```
+
+Defined in: [useLiveQuery.ts:73](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L73)
+
+***
+
+### status
+
+```ts
+status: ComputedRef<CollectionStatus>;
+```
+
+Defined in: [useLiveQuery.ts:76](https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts#L76)
diff --git a/mintlify/db/guides/collection-options-creator.md b/mintlify/db/guides/collection-options-creator.md
new file mode 100644
index 000000000..c7476fd6f
--- /dev/null
+++ b/mintlify/db/guides/collection-options-creator.md
@@ -0,0 +1,917 @@
+---
+title: Creating a Collection Options Creator
+id: guide/collection-options-creator
+---
+# Creating a Collection Options Creator
+
+A collection options creator is a factory function that generates configuration options for TanStack DB collections. It provides a standardized way to integrate different sync engines and data sources with TanStack DB's reactive sync-first architecture.
+
+## Overview
+
+Collection options creators follow a consistent pattern:
+1. Accept configuration specific to the sync engine
+2. Return an object that satisfies the `CollectionConfig` interface
+3. Handle sync initialization, data parsing, and transaction management
+4. Optionally provide utility functions specific to the sync engine
+
+## When to Create a Custom Collection
+
+You should create a custom collection when:
+- You have a dedicated sync engine (like ElectricSQL, Trailbase, Firebase, RxDB or a custom WebSocket solution)
+- You need specific sync behaviors that aren't covered by the query collection
+- You want to integrate with a backend that has its own sync protocol
+
+**Note**: If you're just hitting an API and returning data, use the query collection instead.
+
+## Core Requirements
+
+Every collection options creator must implement these key responsibilities:
+
+### 1. Configuration Interface
+
+Define a configuration interface that extends or includes standard collection properties:
+
+```typescript
+// Pattern A: User provides handlers (Query / ElectricSQL style)
+interface MyCollectionConfig<TItem extends object> {
+  // Your sync engine specific options
+  connectionUrl: string
+  apiKey?: string
+  
+  // Standard collection properties
+  id?: string
+  schema?: StandardSchemaV1
+  getKey: (item: TItem) => string | number
+  sync?: SyncConfig<TItem>
+  
+  rowUpdateMode?: 'partial' | 'full'
+  
+  // User provides mutation handlers
+  onInsert?: InsertMutationFn<TItem>
+  onUpdate?: UpdateMutationFn<TItem>
+  onDelete?: DeleteMutationFn<TItem>
+}
+
+// Pattern B: Built-in handlers (Trailbase style)
+interface MyCollectionConfig<TItem extends object> 
+  extends Omit<CollectionConfig<TItem>, 'onInsert' | 'onUpdate' | 'onDelete'> {
+  // Your sync engine specific options
+  recordApi: MyRecordApi<TItem>
+  connectionUrl: string
+  
+  rowUpdateMode?: 'partial' | 'full'
+  
+  // Note: onInsert/onUpdate/onDelete are implemented by your collection creator
+}
+```
+
+### 2. Sync Implementation
+
+The sync function is the heart of your collection. It must:
+
+The sync function must return a cleanup function for proper garbage collection:
+
+```typescript
+const sync: SyncConfig<T>['sync'] = (params) => {
+  const { begin, write, commit, markReady, collection } = params
+  
+  // 1. Initialize connection to your sync engine
+  const connection = initializeConnection(config)
+  
+  // 2. Set up real-time subscription FIRST (prevents race conditions)
+  const eventBuffer: Array<any> = []
+  let isInitialSyncComplete = false
+  
+  connection.subscribe((event) => {
+    if (!isInitialSyncComplete) {
+      // Buffer events during initial sync to prevent race conditions
+      eventBuffer.push(event)
+      return
+    }
+    
+    // Process real-time events
+    begin()
+    
+    switch (event.type) {
+      case 'insert':
+        write({ type: 'insert', value: event.data })
+        break
+      case 'update':
+        write({ type: 'update', value: event.data })
+        break
+      case 'delete':
+        write({ type: 'delete', value: event.data })
+        break
+    }
+    
+    commit()
+  })
+  
+  // 3. Perform initial data fetch
+  async function initialSync() {
+    try {
+      const data = await fetchInitialData()
+      
+      begin() // Start a transaction
+      
+      for (const item of data) {
+        write({
+          type: 'insert',
+          value: item
+        })
+      }
+      
+      commit() // Commit the transaction
+      
+      // 4. Process buffered events
+      isInitialSyncComplete = true
+      if (eventBuffer.length > 0) {
+        begin()
+        for (const event of eventBuffer) {
+          // Deduplicate if necessary based on your sync engine
+          write({ type: event.type, value: event.data })
+        }
+        commit()
+        eventBuffer.splice(0)
+      }
+      
+    } catch (error) {
+      console.error('Initial sync failed:', error)
+      throw error
+    } finally {
+      // ALWAYS call markReady, even on error
+      markReady()
+    }
+  }
+
+  initialSync()
+  
+  // 4. Return cleanup function
+  return () => {
+    connection.close()
+    // Clean up any timers, intervals, or other resources
+  }
+}
+```
+
+### 3. Transaction Lifecycle
+
+Understanding the transaction lifecycle is important for correct implementation.
+
+The sync process follows this lifecycle:
+
+1. **begin()** - Start collecting changes
+2. **write()** - Add changes to the pending transaction (buffered until commit)
+3. **commit()** - Apply all changes atomically to the collection state
+4. **markReady()** - Signal that initial sync is complete
+
+**Race Condition Prevention:**
+Many sync engines start real-time subscriptions before the initial sync completes. Your implementation MUST deduplicate events that arrive via subscription that represent the same data as the initial sync. Consider:
+- Starting the listener BEFORE initial fetch and buffering events
+- Tracking timestamps, sequence numbers, or document versions
+- Using read timestamps or other ordering mechanisms
+
+### 4. Data Parsing and Type Conversion
+
+If your sync engine returns data with different types, provide conversion functions for specific fields:
+
+```typescript
+interface MyCollectionConfig<TItem, TRecord> {
+  // ... other config
+  
+  // Only specify conversions for fields that need type conversion
+  parse: {
+    created_at: (ts: number) => new Date(ts * 1000),  // timestamp -> Date
+    updated_at: (ts: number) => new Date(ts * 1000),  // timestamp -> Date
+    metadata?: (str: string) => JSON.parse(str)       // JSON string -> object
+  }
+  
+  serialize: {
+    created_at: (date: Date) => Math.floor(date.valueOf() / 1000),  // Date -> timestamp
+    updated_at: (date: Date) => Math.floor(date.valueOf() / 1000),  // Date -> timestamp  
+    metadata?: (obj: object) => JSON.stringify(obj)                 // object -> JSON string
+  }
+}
+```
+
+**Type Conversion Examples:**
+```typescript
+// Firebase Timestamp to Date
+parse: {
+  createdAt: (timestamp) => timestamp?.toDate?.() || new Date(timestamp),
+  updatedAt: (timestamp) => timestamp?.toDate?.() || new Date(timestamp),
+}
+
+// PostGIS geometry to GeoJSON
+parse: {
+  location: (wkb: string) => parseWKBToGeoJSON(wkb)
+}
+
+// JSON string to object with error handling
+parse: {
+  metadata: (str: string) => {
+    try {
+      return JSON.parse(str)
+    } catch {
+      return {}
+    }
+  }
+}
+```
+
+### 5. Schemas and Type Transformations
+
+When building a custom collection, you need to decide how to handle the relationship between your backend's storage format and the client-side types users work with in their collections.
+
+#### Two Separate Concerns
+
+**Backend Format** - The types your storage layer uses (SQLite, Postgres, Firebase, etc.)
+- Examples: Unix timestamps, ISO strings, JSON strings, PostGIS geometries
+
+**Client Format** - The types users work with in their TanStack DB collections
+- Examples: Date objects, parsed JSON, GeoJSON
+
+Schemas in TanStack DB define the **client format** (TInput/TOutput for mutations). How you bridge between backend and client format depends on your integration design.
+
+#### Approach 1: Integration Provides Parse/Serialize Helpers
+
+For backends with specific storage formats, provide `parse`/`serialize` options that users configure:
+
+```typescript
+// TrailBase example: User specifies field conversions
+export function trailbaseCollectionOptions(config) {
+  return {
+    parse: config.parse,      // User provides field conversions
+    serialize: config.serialize,
+
+    onInsert: async ({ transaction }) => {
+      const serialized = transaction.mutations.map(m =>
+        serializeFields(m.modified, config.serialize)
+      )
+      await config.recordApi.createBulk(serialized)
+    }
+  }
+}
+
+// User explicitly configures conversions
+const collection = createCollection(
+  trailbaseCollectionOptions({
+    schema: todoSchema,
+    parse: {
+      created_at: (ts: number) => new Date(ts * 1000)  // Unix → Date
+    },
+    serialize: {
+      created_at: (date: Date) => Math.floor(date.valueOf() / 1000)  // Date → Unix
+    }
+  })
+)
+```
+
+**Benefits:** Explicit control over type conversions. Integration handles applying them consistently.
+
+#### Approach 2: User Handles Everything in QueryFn/Handlers
+
+For simple APIs or when users want full control, they handle parsing/serialization themselves:
+
+```typescript
+// Query Collection: User handles all transformations
+const collection = createCollection(
+  queryCollectionOptions({
+    schema: todoSchema,
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      const todos = await response.json()
+      // User manually parses to match their schema's TOutput
+      return todos.map(todo => ({
+        ...todo,
+        created_at: new Date(todo.created_at)  // ISO string → Date
+      }))
+    },
+    onInsert: async ({ transaction }) => {
+      // User manually serializes for their backend
+      await fetch('/api/todos', {
+        method: 'POST',
+        body: JSON.stringify({
+          ...transaction.mutations[0].modified,
+          created_at: transaction.mutations[0].modified.created_at.toISOString()  // Date → ISO string
+        })
+      })
+    }
+  })
+)
+```
+
+**Benefits:** Maximum flexibility, no abstraction overhead. Users see exactly what's happening.
+
+#### Approach 3: Automatic Serialization in Handlers
+
+If your backend has well-defined types, you can automatically serialize in mutation handlers:
+
+```typescript
+export function myCollectionOptions(config) {
+  return {
+    onInsert: async ({ transaction }) => {
+      // Automatically serialize known types for your backend
+      const serialized = transaction.mutations.map(m => ({
+        ...m.modified,
+        // Date objects → Unix timestamps for your backend
+        created_at: m.modified.created_at instanceof Date
+          ? Math.floor(m.modified.created_at.valueOf() / 1000)
+          : m.modified.created_at
+      }))
+      await backend.insert(serialized)
+    }
+  }
+}
+```
+
+**Benefits:** Least configuration for users. Integration handles backend format automatically.
+
+#### Key Design Principles
+
+1. **Schemas validate client mutations only** - They don't affect how backend data is parsed during sync
+2. **TOutput is the application-facing type** - This is what users work with in their app
+3. **Choose your approach based on backend constraints** - Fixed types → automatic serialization; varying types → user configuration
+4. **Document your backend format clearly** - Explain what types your storage uses and how to handle them
+
+For more on schemas from a user perspective, see the [Schemas guide](/db/guides/schemas).
+
+### 6. Mutation Handler Patterns
+
+There are two distinct patterns for handling mutations in collection options creators:
+
+#### Pattern A: User-Provided Handlers (ElectricSQL, Query)
+
+The user provides mutation handlers in the config. Your collection creator passes them through:
+
+```typescript
+interface MyCollectionConfig<TItem extends object> {
+  // ... other config
+  
+  // User provides these handlers
+  onInsert?: InsertMutationFn<TItem>
+  onUpdate?: UpdateMutationFn<TItem>
+  onDelete?: DeleteMutationFn<TItem>
+}
+
+export function myCollectionOptions<TItem extends object>(
+  config: MyCollectionConfig<TItem>
+) {
+  return {
+    // ... other options
+    rowUpdateMode: config.rowUpdateMode || 'partial',
+    
+    // Pass through user-provided handlers (possibly with additional logic)
+    onInsert: config.onInsert ? async (params) => {
+      const result = await config.onInsert!(params)
+      // Additional sync coordination logic
+      return result
+    } : undefined
+  }
+}
+```
+
+#### Pattern B: Built-in Handlers (Trailbase, WebSocket, Firebase)
+
+Your collection creator implements the handlers directly using the sync engine's APIs:
+
+```typescript
+interface MyCollectionConfig<TItem extends object> 
+  extends Omit<CollectionConfig<TItem>, 'onInsert' | 'onUpdate' | 'onDelete'> {
+  // ... sync engine specific config
+  // Note: onInsert/onUpdate/onDelete are NOT in the config
+}
+
+export function myCollectionOptions<TItem extends object>(
+  config: MyCollectionConfig<TItem>
+) {
+  return {
+    // ... other options
+    rowUpdateMode: config.rowUpdateMode || 'partial',
+    
+    // Implement handlers using sync engine APIs
+    onInsert: async ({ transaction }) => {
+      // Handle provider-specific batch limits (e.g., Firestore's 500 limit)
+      const chunks = chunkArray(transaction.mutations, PROVIDER_BATCH_LIMIT)
+      
+      for (const chunk of chunks) {
+        const ids = await config.recordApi.createBulk(
+          chunk.map(m => serialize(m.modified))
+        )
+        await awaitIds(ids)
+      }
+      
+      return transaction.mutations.map(m => m.key)
+    },
+    
+    onUpdate: async ({ transaction }) => {
+      const chunks = chunkArray(transaction.mutations, PROVIDER_BATCH_LIMIT)
+      
+      for (const chunk of chunks) {
+        await Promise.all(
+          chunk.map(m => 
+            config.recordApi.update(m.key, serialize(m.changes))
+          )
+        )
+      }
+      
+      await awaitIds(transaction.mutations.map(m => String(m.key)))
+    }
+  }
+}
+```
+
+Many providers have batch size limits (Firestore: 500, DynamoDB: 25, etc.) so chunk large transactions accordingly.
+
+Choose Pattern A when users need to provide their own APIs, and Pattern B when your sync engine handles writes directly.
+
+## Row Update Modes
+
+Collections support two update modes:
+
+- **`partial`** (default) - Updates are merged with existing data
+- **`full`** - Updates replace the entire row
+
+Configure this in your sync config:
+
+```typescript
+sync: {
+  sync: syncFn,
+  rowUpdateMode: 'full' // or 'partial'
+}
+```
+
+## Production Examples
+
+For complete, production-ready examples, see the collection packages in the TanStack DB repository:
+
+- **[@tanstack/query-collection](https://github.com/TanStack/db/tree/main/packages/query-collection)** - Pattern A: User-provided handlers with full refetch strategy
+- **[@tanstack/trailbase-collection](https://github.com/TanStack/db/tree/main/packages/trailbase-collection)** - Pattern B: Built-in handlers with ID-based tracking  
+- **[@tanstack/electric-collection](https://github.com/TanStack/db/tree/main/packages/electric-collection)** - Pattern A: Transaction ID tracking with complex sync protocols
+- **[@tanstack/rxdb-collection](https://github.com/TanStack/db/tree/main/packages/rxdb-collection)** - Pattern B: Built-in handlers that bridge [RxDB](https://rxdb.info) change streams into TanStack DB's sync lifecycle
+
+### Key Lessons from Production Collections
+
+**From Query Collection:**
+- Simplest approach: Full refetch after mutations
+- Best for: APIs without real-time sync
+- Pattern: User provides `onInsert/onUpdate/onDelete` handlers
+
+**From Trailbase Collection:**  
+- Shows ID-based optimistic state management
+- Handles provider batch limits (chunking large operations)
+- Pattern: Collection provides mutation handlers using record API
+
+**From Electric Collection:**
+- Complex transaction ID tracking for distributed sync
+- Demonstrates advanced deduplication techniques
+- Shows how to wrap user handlers with sync coordination
+
+**From RxDB Collection:**
+- Uses RxDB's built-in queries and change streams
+- Uses `RxCollection.$` to subscribe to inserts/updates/deletes and forward them to TanStack DB with begin-write-commit
+- Implements built-in mutation handlers (onInsert, onUpdate, onDelete) that call RxDB APIs (bulkUpsert, incrementalPatch, bulkRemove)
+
+## Complete Example: WebSocket Collection
+
+Here's a complete example of a WebSocket-based collection options creator that demonstrates the full round-trip flow:
+
+1. Client sends transaction with all mutations batched together
+2. Server processes the transaction and may modify the data (validation, timestamps, etc.)
+3. Server sends back acknowledgment and the actual processed data
+4. Client waits for this round-trip before dropping optimistic state
+
+```typescript
+import type {
+  CollectionConfig,
+  SyncConfig,
+  InsertMutationFnParams,
+  UpdateMutationFnParams,
+  DeleteMutationFnParams,
+  UtilsRecord
+} from '@tanstack/db'
+
+interface WebSocketMessage<T> {
+  type: 'insert' | 'update' | 'delete' | 'sync' | 'transaction' | 'ack'
+  data?: T | T[]
+  mutations?: Array<{
+    type: 'insert' | 'update' | 'delete'
+    data: T
+    id?: string
+  }>
+  transactionId?: string
+  id?: string
+}
+
+interface WebSocketCollectionConfig<TItem extends object>
+  extends Omit<CollectionConfig<TItem>, 'onInsert' | 'onUpdate' | 'onDelete' | 'sync'> {
+  url: string
+  reconnectInterval?: number
+  
+  // Note: onInsert/onUpdate/onDelete are handled by the WebSocket connection
+  // Users don't provide these handlers
+}
+
+interface WebSocketUtils extends UtilsRecord {
+  reconnect: () => void
+  getConnectionState: () => 'connected' | 'disconnected' | 'connecting'
+}
+
+export function webSocketCollectionOptions<TItem extends object>(
+  config: WebSocketCollectionConfig<TItem>
+): CollectionConfig<TItem> & { utils: WebSocketUtils } {
+  let ws: WebSocket | null = null
+  let reconnectTimer: NodeJS.Timeout | null = null
+  let connectionState: 'connected' | 'disconnected' | 'connecting' = 'disconnected'
+  
+  // Track pending transactions awaiting acknowledgment
+  const pendingTransactions = new Map<string, {
+    resolve: () => void
+    reject: (error: Error) => void
+    timeout: NodeJS.Timeout
+  }>()
+  
+  const sync: SyncConfig<TItem>['sync'] = (params) => {
+    const { begin, write, commit, markReady } = params
+    
+    function connect() {
+      connectionState = 'connecting'
+      ws = new WebSocket(config.url)
+      
+      ws.onopen = () => {
+        connectionState = 'connected'
+        // Request initial sync
+        ws.send(JSON.stringify({ type: 'sync' }))
+      }
+      
+      ws.onmessage = (event) => {
+        const message: WebSocketMessage<TItem> = JSON.parse(event.data)
+        
+        switch (message.type) {
+          case 'sync':
+            // Initial sync with array of items
+            begin()
+            if (Array.isArray(message.data)) {
+              for (const item of message.data) {
+                write({ type: 'insert', value: item })
+              }
+            }
+            commit()
+            markReady()
+            break
+            
+          case 'insert':
+          case 'update':
+          case 'delete':
+            // Real-time updates from other clients
+            begin()
+            write({ 
+              type: message.type, 
+              value: message.data as TItem 
+            })
+            commit()
+            break
+            
+          case 'ack':
+            // Server acknowledged our transaction
+            if (message.transactionId) {
+              const pending = pendingTransactions.get(message.transactionId)
+              if (pending) {
+                clearTimeout(pending.timeout)
+                pendingTransactions.delete(message.transactionId)
+                pending.resolve()
+              }
+            }
+            break
+            
+          case 'transaction':
+            // Server sending back the actual data after processing our transaction
+            if (message.mutations) {
+              begin()
+              for (const mutation of message.mutations) {
+                write({
+                  type: mutation.type,
+                  value: mutation.data
+                })
+              }
+              commit()
+            }
+            break
+        }
+      }
+      
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error)
+        connectionState = 'disconnected'
+      }
+      
+      ws.onclose = () => {
+        connectionState = 'disconnected'
+        // Auto-reconnect
+        if (!reconnectTimer) {
+          reconnectTimer = setTimeout(() => {
+            reconnectTimer = null
+            connect()
+          }, config.reconnectInterval || 5000)
+        }
+      }
+    }
+    
+    // Start connection
+    connect()
+    
+    // Return cleanup function
+    return () => {
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+        reconnectTimer = null
+      }
+      if (ws) {
+        ws.close()
+        ws = null
+      }
+    }
+  }
+  
+  // Helper function to send transaction and wait for server acknowledgment
+  const sendTransaction = async (
+    params: InsertMutationFnParams<TItem> | UpdateMutationFnParams<TItem> | DeleteMutationFnParams<TItem>
+  ): Promise<void> => {
+    if (ws?.readyState !== WebSocket.OPEN) {
+      throw new Error('WebSocket not connected')
+    }
+    
+    const transactionId = crypto.randomUUID()
+    
+    // Convert all mutations in the transaction to the wire format
+    const mutations = params.transaction.mutations.map(mutation => ({
+      type: mutation.type,
+      id: mutation.key,
+      data: mutation.type === 'delete' ? undefined : 
+           mutation.type === 'update' ? mutation.changes : 
+           mutation.modified
+    }))
+    
+    // Send the entire transaction at once
+    ws.send(JSON.stringify({
+      type: 'transaction',
+      transactionId,
+      mutations
+    }))
+    
+    // Wait for server acknowledgment
+    return new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        pendingTransactions.delete(transactionId)
+        reject(new Error(`Transaction ${transactionId} timed out`))
+      }, 10000) // 10 second timeout
+      
+      pendingTransactions.set(transactionId, {
+        resolve,
+        reject,
+        timeout
+      })
+    })
+  }
+  
+  // All mutation handlers use the same transaction sender
+  const onInsert = async (params: InsertMutationFnParams<TItem>) => {
+    await sendTransaction(params)
+  }
+  
+  const onUpdate = async (params: UpdateMutationFnParams<TItem>) => {
+    await sendTransaction(params)
+  }
+  
+  const onDelete = async (params: DeleteMutationFnParams<TItem>) => {
+    await sendTransaction(params)
+  }
+  
+  return {
+    id: config.id,
+    schema: config.schema,
+    getKey: config.getKey,
+    sync: { sync },
+    onInsert,
+    onUpdate,
+    onDelete,
+    utils: {
+      reconnect: () => {
+        if (ws) ws.close()
+        connect()
+      },
+      getConnectionState: () => connectionState
+    }
+  }
+}
+```
+
+## Usage Example
+
+```typescript
+import { createCollection } from '@tanstack/react-db'
+import { webSocketCollectionOptions } from './websocket-collection'
+
+const todos = createCollection(
+  webSocketCollectionOptions({
+    url: 'ws://localhost:8080/todos',
+    getKey: (todo) => todo.id,
+    schema: todoSchema
+    // Note: No onInsert/onUpdate/onDelete - handled by WebSocket automatically
+  })
+)
+
+// Use the collection
+todos.insert({ id: '1', text: 'Buy milk', completed: false })
+
+// Access utilities
+todos.utils.getConnectionState() // 'connected'
+todos.utils.reconnect() // Force reconnect
+```
+
+## Advanced: Managing Optimistic State
+
+A critical challenge in sync-first apps is knowing when to drop optimistic state. When a user makes a change:
+
+1. The UI updates immediately (optimistic update)
+2. A mutation is sent to the backend
+3. The backend processes and persists the change
+4. The change syncs back to the client
+5. The optimistic state should be dropped in favor of the synced data
+
+The key question is: **How do you know when step 4 is complete?**
+
+### Strategy 1: Built-in Provider Methods (Recommended)
+
+Many providers offer built-in methods to wait for sync completion:
+
+```typescript
+// Firebase
+await waitForPendingWrites(firestore)
+
+// Custom WebSocket
+await websocket.waitForAck(transactionId)
+```
+
+### Strategy 2: Transaction ID Tracking (ElectricSQL)
+
+ElectricSQL returns transaction IDs that you can track:
+
+```typescript
+// Track seen transaction IDs
+const seenTxids = new Store<Set<number>>(new Set())
+
+// In sync, track txids from incoming messages
+if (message.headers.txids) {
+  message.headers.txids.forEach(txid => {
+    seenTxids.setState(prev => new Set([...prev, txid]))
+  })
+}
+
+// Mutation handlers return txids and wait for them
+const wrappedOnInsert = async (params) => {
+  const result = await config.onInsert!(params)
+  
+  // Wait for the txid to appear in synced data
+  if (result.txid) {
+    await awaitTxId(result.txid)
+  }
+  
+  return result
+}
+
+// Utility function to wait for a txid
+const awaitTxId = (txId: number): Promise<boolean> => {
+  if (seenTxids.state.has(txId)) return Promise.resolve(true)
+  
+  return new Promise((resolve) => {
+    const unsubscribe = seenTxids.subscribe(() => {
+      if (seenTxids.state.has(txId)) {
+        unsubscribe()
+        resolve(true)
+      }
+    })
+  })
+}
+```
+
+### Strategy 3: ID-Based Tracking (Trailbase)
+
+Trailbase tracks when specific record IDs have been synced:
+
+```typescript
+// Track synced IDs with timestamps
+const seenIds = new Store(new Map<string, number>())
+
+// In sync, mark IDs as seen
+write({ type: 'insert', value: item })
+seenIds.setState(prev => new Map(prev).set(item.id, Date.now()))
+
+// Wait for specific IDs after mutations
+const wrappedOnInsert = async (params) => {
+  const ids = await config.recordApi.createBulk(items)
+  
+  // Wait for all IDs to be synced back
+  await awaitIds(ids)
+}
+
+const awaitIds = (ids: string[]): Promise<void> => {
+  const allSynced = ids.every(id => seenIds.state.has(id))
+  if (allSynced) return Promise.resolve()
+  
+  return new Promise((resolve) => {
+    const unsubscribe = seenIds.subscribe((state) => {
+      if (ids.every(id => state.has(id))) {
+        unsubscribe()
+        resolve()
+      }
+    })
+  })
+}
+```
+
+### Strategy 4: Version/Timestamp Tracking
+
+Track version numbers or timestamps to detect when data is fresh:
+
+```typescript
+// Track latest sync timestamp
+let lastSyncTime = 0
+
+// In mutations, record when the operation was sent
+const wrappedOnUpdate = async (params) => {
+  const mutationTime = Date.now()
+  await config.onUpdate(params)
+  
+  // Wait for sync to catch up
+  await waitForSync(mutationTime)
+}
+
+const waitForSync = (afterTime: number): Promise<void> => {
+  if (lastSyncTime > afterTime) return Promise.resolve()
+  
+  return new Promise((resolve) => {
+    const check = setInterval(() => {
+      if (lastSyncTime > afterTime) {
+        clearInterval(check)
+        resolve()
+      }
+    }, 100)
+  })
+}
+```
+
+### Strategy 5: Full Refetch (Query Collection)
+
+The query collection simply refetches all data after mutations:
+
+```typescript
+const wrappedOnInsert = async (params) => {
+  // Perform the mutation
+  await config.onInsert(params)
+  
+  // Refetch the entire collection
+  await refetch()
+  
+  // The refetch will trigger sync with fresh data,
+  // automatically dropping optimistic state
+}
+```
+
+### Choosing a Strategy
+
+- **Built-in Methods**: Best when your provider offers sync completion APIs
+- **Transaction IDs**: Best when your backend provides reliable transaction tracking
+- **ID-Based**: Good for systems where each mutation returns the affected IDs
+- **Full Refetch**: Simplest but least efficient; good for small datasets
+- **Version/Timestamp**: Works when your sync includes reliable ordering information
+
+### Implementation Tips
+
+1. **Always wait for sync** in your mutation handlers to ensure optimistic state is properly managed
+2. **Handle timeouts** - Don't wait forever for sync confirmation
+3. **Clean up tracking data** - Remove old txids/IDs to prevent memory leaks
+4. **Provide utilities** - Export functions like `awaitTxId` or `awaitSync` for advanced use cases
+
+## Best Practices
+
+1. **Always call markReady()** - This signals that the collection has initial data and is ready for use
+2. **Handle errors gracefully** - Call markReady() even on error to avoid blocking the app
+3. **Clean up resources** - Return a cleanup function from sync to prevent memory leaks
+4. **Batch operations** - Use begin/commit to batch multiple changes for better performance
+5. **Race Conditions** - Start listeners before initial fetch and buffer events
+6. **Type safety** - Use TypeScript generics to maintain type safety throughout
+7. **Provide utilities** - Export sync-engine-specific utilities for advanced use cases
+
+## Testing Your Collection
+
+Test your collection options creator with:
+
+1. **Unit tests** - Test sync logic, data transformations
+2. **Integration tests** - Test with real sync engine
+3. **Error scenarios** - Connection failures, invalid data
+4. **Performance** - Large datasets, frequent updates
+
+## Conclusion
+
+Creating a collection options creator allows you to integrate any sync engine with TanStack DB's powerful sync-first architecture. Follow the patterns shown here, and you'll have a robust, type-safe integration that provides excellent developer experience.
diff --git a/mintlify/db/guides/error-handling.md b/mintlify/db/guides/error-handling.md
new file mode 100644
index 000000000..927f0377b
--- /dev/null
+++ b/mintlify/db/guides/error-handling.md
@@ -0,0 +1,815 @@
+---
+title: Error Handling
+id: error-handling
+---
+
+# Error Handling
+
+TanStack DB provides comprehensive error handling capabilities to ensure robust data synchronization and state management. This guide covers the built-in error handling mechanisms and how to work with them effectively.
+
+## Error Types
+
+TanStack DB provides named error classes for better error handling and type safety. All error classes can be imported from `@tanstack/db` (or more commonly, the framework-specific package e.g. `@tanstack/react-db`):
+
+```ts
+import {
+  SchemaValidationError,
+  CollectionInErrorStateError,
+  DuplicateKeyError,
+  MissingHandlerError,
+  TransactionError,
+  // ... and many more
+} from "@tanstack/db"
+```
+
+### SchemaValidationError
+
+Thrown when data doesn't match the collection's schema during insert or update operations:
+
+```ts
+import { SchemaValidationError } from "@tanstack/db"
+
+try {
+  todoCollection.insert({ text: 123 }) // Invalid type
+} catch (error) {
+  if (error instanceof SchemaValidationError) {
+    console.log(error.type) // 'insert' or 'update'
+    console.log(error.issues) // Array of validation issues
+    // Example issue: { message: "Expected string, received number", path: ["text"] }
+  }
+}
+```
+
+The error includes:
+- `type`: Whether it was an 'insert' or 'update' operation
+- `issues`: Array of validation issues with messages and paths
+- `message`: A formatted error message listing all issues
+
+**When schema validation occurs:**
+
+Schema validation happens only for **client mutations** - when you explicitly insert or update data:
+
+1. **During inserts** - When `collection.insert()` is called
+2. **During updates** - When `collection.update()` is called
+
+Schemas do **not** validate data coming from your server or sync layer. That data is assumed to already be valid.
+
+```typescript
+const schema = z.object({
+  id: z.string(),
+  created_at: z.string().transform(val => new Date(val))
+  // TInput: string, TOutput: Date
+})
+
+// Validation happens here ✓
+collection.insert({
+  id: "1",
+  created_at: "2024-01-01"  // TInput: string
+})
+// If successful, stores: { created_at: Date }  // TOutput: Date
+```
+
+For more details on schema validation and type transformations, see the [Schemas guide](/db/guides/schemas).
+
+## Query Collection Error Tracking
+
+Query collections provide enhanced error tracking utilities through the `utils` object. These methods expose error state information and provide recovery mechanisms for failed queries:
+
+```tsx
+import { createCollection } from "@tanstack/db"
+import { queryCollectionOptions } from "@tanstack/query-db-collection"
+import { useLiveQuery } from "@tanstack/react-db"
+
+const syncedCollection = createCollection(
+  queryCollectionOptions({
+    queryClient,
+    queryKey: ['synced-data'],
+    queryFn: fetchData,
+    getKey: (item) => item.id,
+  })
+)
+
+// Component can check error state
+function DataList() {
+  const { data } = useLiveQuery((q) => q.from({ item: syncedCollection }))
+  const isError = syncedCollection.utils.isError
+  const errorCount = syncedCollection.utils.errorCount
+  
+  return (
+    <>
+      {isError && errorCount > 3 && (
+        <Alert>
+          Unable to sync. Showing cached data.
+          <button onClick={() => syncedCollection.utils.clearError()}>
+            Retry
+          </button>
+        </Alert>
+      )}
+      {/* Render data */}
+    </>
+  )
+}
+```
+
+Error tracking methods:
+- **`lastError`**: Returns the most recent error encountered by the query, or `undefined` if no errors have occurred:
+- **`isError`**: Returns a boolean indicating whether the collection is currently in an error state:
+- **`errorCount`**: Returns the number of consecutive sync failures. This counter is incremented only when queries fail completely (not per retry attempt) and is reset on successful queries:
+- **`clearError()`**: Clears the error state and triggers a refetch of the query. This method resets both `lastError` and `errorCount`:
+
+## Collection Status and Error States
+
+Collections track their status and transition between states:
+
+```tsx
+import { useLiveQuery } from "@tanstack/react-db"
+
+const TodoList = () => {
+  const { data, status, isError, isLoading, isReady } = useLiveQuery(
+    (query) => query.from({ todos: todoCollection })
+  )
+
+  if (isError) {
+    return <div>Collection is in error state</div>
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  return <div>{data?.map(todo => <div key={todo.id}>{todo.text}</div>)}</div>
+}
+```
+
+Collection status values:
+- `idle` - Not yet started
+- `loading` - Loading initial data
+- `initialCommit` - Processing initial data
+- `ready` - Ready for use
+- `error` - In error state
+- `cleaned-up` - Cleaned up and no longer usable
+
+### Using Suspense and Error Boundaries (React)
+
+For React applications, you can handle loading and error states with `useLiveSuspenseQuery`, React Suspense, and Error Boundaries:
+
+```tsx
+import { useLiveSuspenseQuery } from "@tanstack/react-db"
+import { Suspense } from "react"
+import { ErrorBoundary } from "react-error-boundary"
+
+const TodoList = () => {
+  // No need to check status - Suspense and ErrorBoundary handle it
+  const { data } = useLiveSuspenseQuery(
+    (query) => query.from({ todos: todoCollection })
+  )
+
+  // data is always defined here
+  return <div>{data.map(todo => <div key={todo.id}>{todo.text}</div>)}</div>
+}
+
+const App = () => (
+  <ErrorBoundary fallback={<div>Failed to load todos</div>}>
+    <Suspense fallback={<div>Loading...</div>}>
+      <TodoList />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+With this approach, loading states are handled by `<Suspense>` and error states are handled by `<ErrorBoundary>` instead of within your component logic. See the [React Suspense section in Live Queries](/db/guides/live-queries#using-with-react-suspense) for more details.
+
+## Transaction Error Handling
+
+When mutations fail, TanStack DB automatically rolls back optimistic updates:
+
+```ts
+const todoCollection = createCollection({
+  id: "todos",
+  onInsert: async ({ transaction }) => {
+    const response = await fetch("/api/todos", {
+      method: "POST",
+      body: JSON.stringify(transaction.mutations[0].modified),
+    })
+    
+    if (!response.ok) {
+      // Throwing an error will rollback the optimistic state
+      throw new Error(`HTTP Error: ${response.status}`)
+    }
+    
+    return response.json()
+  },
+})
+
+// Usage - optimistic update will be rolled back if the mutation fails
+try {
+  const tx = todoCollection.insert({
+    id: "1",
+    text: "New todo",
+    completed: false,
+  })
+  
+  await tx.isPersisted.promise
+} catch (error) {
+  // The optimistic update has been automatically rolled back
+  console.error("Failed to create todo:", error)
+}
+```
+
+### Transaction States and Error Information
+
+Transactions have the following states:
+- `pending` - Transaction is being processed
+- `persisting` - Currently executing the mutation function
+- `completed` - Transaction completed successfully
+- `failed` - Transaction failed and was rolled back
+
+Access transaction error information from collection operations:
+
+```ts
+const todoCollection = createCollection({
+  id: "todos",
+  onUpdate: async ({ transaction }) => {
+    const response = await fetch(`/api/todos/${transaction.mutations[0].key}`, {
+      method: "PUT",
+      body: JSON.stringify(transaction.mutations[0].modified),
+    })
+    
+    if (!response.ok) {
+      throw new Error(`Update failed: ${response.status}`)
+    }
+  },
+})
+
+try {
+  const tx = await todoCollection.update("todo-1", (draft) => {
+    draft.completed = true
+  })
+  
+  await tx.isPersisted.promise
+} catch (error) {
+  // Transaction has been rolled back
+  console.log(tx.state) // "failed"
+  console.log(tx.error) // { message: "Update failed: 500", error: Error }
+}
+```
+
+Or with manual transaction creation:
+
+```ts
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    throw new Error("API failed")
+  }
+})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Item" })
+})
+
+try {
+  await tx.commit()
+} catch (error) {
+  // Transaction has been rolled back
+  console.log(tx.state) // "failed"
+  console.log(tx.error) // { message: "API failed", error: Error }
+}
+```
+
+## Collection Operation Errors
+
+### Invalid Collection State
+
+Collections in an `error` state cannot perform operations and must be manually recovered:
+
+```ts
+import { CollectionInErrorStateError } from "@tanstack/db"
+
+try {
+  todoCollection.insert(newTodo)
+} catch (error) {
+  if (error instanceof CollectionInErrorStateError) {
+    // Collection needs to be cleaned up and restarted
+    await todoCollection.cleanup()
+    
+    // Now retry the operation
+    todoCollection.insert(newTodo)
+  }
+}
+```
+
+### Missing Mutation Handlers
+
+Direct mutations require handlers to be configured:
+
+```ts
+const todoCollection = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  // Missing onInsert handler
+})
+
+// This will throw an error
+todoCollection.insert(newTodo)
+// Error: Collection.insert called directly (not within an explicit transaction) but no 'onInsert' handler is configured
+```
+
+### Insert Operation Errors
+
+#### DuplicateKeyError
+
+Thrown when inserting items with existing keys:
+
+```ts
+import { DuplicateKeyError } from "@tanstack/db"
+
+try {
+  todoCollection.insert({ id: "existing-id", text: "Todo" })
+} catch (error) {
+  if (error instanceof DuplicateKeyError) {
+    console.log(`Duplicate key: ${error.message}`)
+    // Consider using update() instead, or check if item exists first
+  }
+}
+```
+
+#### UndefinedKeyError
+
+Thrown when an object is created without a defined key:
+
+```ts
+import { UndefinedKeyError } from "@tanstack/db"
+
+const collection = createCollection({
+  id: "todos",
+  getKey: (item) => item.id,
+})
+
+try {
+  collection.insert({ text: "Todo" }) // Missing 'id' field
+} catch (error) {
+  if (error instanceof UndefinedKeyError) {
+    console.log("Item is missing required key field")
+    // Ensure your items have the key field defined by getKey
+  }
+}
+```
+
+### Update Operation Errors
+
+#### UpdateKeyNotFoundError
+
+Thrown when trying to update a key that doesn't exist in the collection:
+
+```ts
+import { UpdateKeyNotFoundError } from "@tanstack/db"
+
+try {
+  todoCollection.update("nonexistent-key", draft => {
+    draft.completed = true
+  })
+} catch (error) {
+  if (error instanceof UpdateKeyNotFoundError) {
+    console.log("Key not found - item may have been deleted")
+    // Consider using insert() if the item doesn't exist
+  }
+}
+```
+
+#### KeyUpdateNotAllowedError
+
+Thrown when attempting to change an item's key (not allowed - delete and re-insert instead):
+
+```ts
+import { KeyUpdateNotAllowedError } from "@tanstack/db"
+
+try {
+  todoCollection.update("todo-1", draft => {
+    draft.id = "todo-2" // Not allowed!
+  })
+} catch (error) {
+  if (error instanceof KeyUpdateNotAllowedError) {
+    console.log("Cannot change item keys")
+    // Instead, delete the old item and insert a new one
+  }
+}
+```
+
+### Delete Operation Errors
+
+#### DeleteKeyNotFoundError
+
+Thrown when trying to delete a key that doesn't exist:
+
+```ts
+import { DeleteKeyNotFoundError } from "@tanstack/db"
+
+try {
+  todoCollection.delete("nonexistent-key")
+} catch (error) {
+  if (error instanceof DeleteKeyNotFoundError) {
+    console.log("Key not found - item may have already been deleted")
+    // This may be acceptable in some scenarios (idempotent deletes)
+  }
+}
+```
+
+## Sync Error Handling
+
+### Query Collection Sync Errors
+
+Query collections handle sync errors gracefully and mark the collection as ready even on error to avoid blocking applications:
+
+```ts
+import { queryCollectionOptions } from "@tanstack/query-db-collection"
+
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async () => {
+      const response = await fetch("/api/todos")
+      if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.status}`)
+      }
+      return response.json()
+    },
+    queryClient,
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    // Standard TanStack Query error handling options
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  })
+)
+```
+
+When sync errors occur:
+- Error is logged to console: `[QueryCollection] Error observing query...`
+- Collection is marked as ready to prevent blocking the application
+- Cached data remains available
+- Error tracking counters are updated (`lastError`, `errorCount`)
+
+### Sync Write Errors
+
+Sync functions must handle their own errors during write operations:
+
+```ts
+const collection = createCollection({
+  id: "todos",
+  sync: {
+    sync: ({ begin, write, commit }) => {
+      begin()
+      
+      try {
+        // Will throw if key already exists
+        write({ type: "insert", value: { id: "existing-id", text: "Todo" } })
+      } catch (error) {
+        // Error: Cannot insert document with key "existing-id" from sync because it already exists
+      }
+      
+      commit()
+    }
+  }
+})
+```
+
+### Cleanup Error Handling
+
+Cleanup errors are isolated to prevent blocking the cleanup process:
+
+```ts
+const collection = createCollection({
+  id: "todos",
+  sync: {
+    sync: ({ begin, commit }) => {
+      begin()
+      commit()
+      
+      // Return a cleanup function
+      return () => {
+        // If this throws, the error is re-thrown in a microtask
+        // but cleanup continues successfully
+        throw new Error("Sync cleanup failed")
+      }
+    },
+  },
+})
+
+// Cleanup completes even if the sync cleanup function throws
+await collection.cleanup() // Resolves successfully
+// Error is re-thrown asynchronously via queueMicrotask
+```
+
+## Error Recovery Patterns
+
+### Collection Cleanup and Restart
+
+Clean up collections in error states:
+
+```ts
+if (todoCollection.status === "error") {
+  // Cleanup will stop sync and reset the collection
+  await todoCollection.cleanup()
+  
+  // Collection will automatically restart on next access
+  todoCollection.preload() // Or any other operation
+}
+```
+
+### Graceful Degradation
+
+Collections continue to work with cached data even when sync fails:
+
+```tsx
+const TodoApp = () => {
+  const { data, isError } = useLiveQuery((query) => 
+    query.from({ todos: todoCollection })
+  )
+
+  return (
+    <div>
+      {isError && (
+        <div>Sync failed, but you can still view cached data</div>
+      )}
+      {data?.map(todo => <TodoItem key={todo.id} todo={todo} />)}
+    </div>
+  )
+}
+```
+
+### Transaction Rollback Cascading
+
+When a transaction fails, conflicting transactions are automatically rolled back:
+
+```ts
+const tx1 = createTransaction({ mutationFn: async () => {} })
+const tx2 = createTransaction({ mutationFn: async () => {} })
+
+tx1.mutate(() => collection.update("1", draft => { draft.value = "A" }))
+tx2.mutate(() => collection.update("1", draft => { draft.value = "B" })) // Same item
+
+// Rolling back tx1 will also rollback tx2 due to conflict
+tx1.rollback() // tx2 is automatically rolled back
+```
+
+### Transaction Lifecycle Errors
+
+Transactions validate their state before operations to prevent misuse. Here are the specific errors you may encounter:
+
+#### MissingMutationFunctionError
+
+Thrown when creating a transaction without a required `mutationFn`:
+
+```ts
+import { MissingMutationFunctionError } from "@tanstack/db"
+
+try {
+  const tx = createTransaction({}) // Missing mutationFn
+} catch (error) {
+  if (error instanceof MissingMutationFunctionError) {
+    console.log("mutationFn is required when creating a transaction")
+  }
+}
+```
+
+#### TransactionNotPendingMutateError
+
+Thrown when calling `mutate()` after a transaction is no longer pending:
+
+```ts
+import { TransactionNotPendingMutateError } from "@tanstack/db"
+
+const tx = createTransaction({ mutationFn: async () => {} })
+
+await tx.commit()
+
+try {
+  tx.mutate(() => {
+    collection.insert({ id: "1", text: "Item" })
+  })
+} catch (error) {
+  if (error instanceof TransactionNotPendingMutateError) {
+    console.log("Cannot mutate - transaction is no longer pending")
+  }
+}
+```
+
+#### TransactionNotPendingCommitError
+
+Thrown when calling `commit()` after a transaction is no longer pending:
+
+```ts
+import { TransactionNotPendingCommitError } from "@tanstack/db"
+
+const tx = createTransaction({ mutationFn: async () => {} })
+tx.mutate(() => collection.insert({ id: "1", text: "Item" }))
+
+await tx.commit()
+
+try {
+  await tx.commit() // Trying to commit again
+} catch (error) {
+  if (error instanceof TransactionNotPendingCommitError) {
+    console.log("Transaction already committed")
+  }
+}
+```
+
+#### TransactionAlreadyCompletedRollbackError
+
+Thrown when calling `rollback()` on a transaction that's already completed:
+
+```ts
+import { TransactionAlreadyCompletedRollbackError } from "@tanstack/db"
+
+const tx = createTransaction({ mutationFn: async () => {} })
+tx.mutate(() => collection.insert({ id: "1", text: "Item" }))
+
+await tx.commit()
+
+try {
+  tx.rollback() // Can't rollback after commit
+} catch (error) {
+  if (error instanceof TransactionAlreadyCompletedRollbackError) {
+    console.log("Cannot rollback - transaction already completed")
+  }
+}
+```
+
+### Sync Transaction Errors
+
+When working with sync transactions, these errors can occur:
+
+#### NoPendingSyncTransactionWriteError
+
+Thrown when calling `write()` without an active sync transaction:
+
+```ts
+const collection = createCollection({
+  id: "todos",
+  sync: {
+    sync: ({ write }) => {
+      // Calling write without begin() first
+      write({ type: "insert", value: { id: "1", text: "Todo" } })
+      // Error: No pending sync transaction to write to
+    }
+  }
+})
+```
+
+#### SyncTransactionAlreadyCommittedWriteError
+
+Thrown when calling `write()` after the sync transaction is already committed:
+
+```ts
+const collection = createCollection({
+  id: "todos",
+  sync: {
+    sync: ({ begin, write, commit }) => {
+      begin()
+      commit()
+
+      // Trying to write after commit
+      write({ type: "insert", value: { id: "1", text: "Todo" } })
+      // Error: The pending sync transaction is already committed
+    }
+  }
+})
+```
+
+#### NoPendingSyncTransactionCommitError
+
+Thrown when calling `commit()` without an active sync transaction.
+
+#### SyncTransactionAlreadyCommittedError
+
+Thrown when calling `commit()` on a sync transaction that's already committed.
+
+## Best Practices
+
+1. **Use instanceof checks** - Use `instanceof` instead of string matching for error handling:
+   ```ts
+   // ✅ Good - type-safe error handling
+   if (error instanceof SchemaValidationError) {
+     // Handle validation error
+   }
+   
+   // ❌ Avoid - brittle string matching  
+   if (error.message.includes("validation failed")) {
+     // Handle validation error
+   }
+   ```
+
+2. **Import specific error types** - Import only the error classes you need for better tree-shaking
+3. **Always handle SchemaValidationError** - Provide clear feedback for validation failures
+4. **Check collection status** - Use `isError`, `isLoading`, `isReady` flags in React components
+5. **Handle transaction promises** - Always handle `isPersisted.promise` rejections
+
+## Example: Complete Error Handling
+
+```tsx
+import {
+  createCollection,
+  SchemaValidationError,
+  DuplicateKeyError,
+  UpdateKeyNotFoundError,
+  DeleteKeyNotFoundError,
+  TransactionNotPendingCommitError,
+  createTransaction
+} from "@tanstack/db"
+import { useLiveQuery } from "@tanstack/react-db"
+
+const todoCollection = createCollection({
+  id: "todos",
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  onInsert: async ({ transaction }) => {
+    const response = await fetch("/api/todos", {
+      method: "POST",
+      body: JSON.stringify(transaction.mutations[0].modified),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+
+    return response.json()
+  },
+  sync: {
+    sync: ({ begin, write, commit }) => {
+      // Your sync implementation
+      begin()
+      // ... sync logic
+      commit()
+    }
+  }
+})
+
+const TodoApp = () => {
+  const { data, status, isError, isLoading } = useLiveQuery(
+    (query) => query.from({ todos: todoCollection })
+  )
+
+  const handleAddTodo = async (text: string) => {
+    try {
+      const tx = await todoCollection.insert({
+        id: crypto.randomUUID(),
+        text,
+        completed: false,
+      })
+      
+      // Wait for persistence
+      await tx.isPersisted.promise
+    } catch (error) {
+      if (error instanceof SchemaValidationError) {
+        alert(`Validation error: ${error.issues[0]?.message}`)
+      } else if (error instanceof DuplicateKeyError) {
+        alert("A todo with this ID already exists")
+      } else {
+        alert(`Failed to add todo: ${error.message}`)
+      }
+    }
+  }
+
+  const handleCleanup = async () => {
+    try {
+      await todoCollection.cleanup()
+      // Collection will restart on next access
+    } catch (error) {
+      console.error("Cleanup failed:", error)
+    }
+  }
+
+  if (isError) {
+    return (
+      <div>
+        <div>Collection error - data may be stale</div>
+        <button onClick={handleCleanup}>
+          Restart Collection
+        </button>
+      </div>
+    )
+  }
+
+  if (isLoading) {
+    return <div>Loading todos...</div>
+  }
+
+  return (
+    <div>
+      <button onClick={() => handleAddTodo("New todo")}>
+        Add Todo
+      </button>
+      {data?.map(todo => (
+        <div key={todo.id}>{todo.text}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+## See Also
+
+- [API Reference](/db/overview#api-reference) - Detailed API documentation
+- [Mutations Guide](/db/overview#making-optimistic-mutations) - Learn about optimistic updates and rollbacks
+- [TanStack Query Error Handling](/query/framework/react/guides/error-handling) - Query-specific error handling
diff --git a/mintlify/db/guides/live-queries.md b/mintlify/db/guides/live-queries.md
new file mode 100644
index 000000000..932a9d69f
--- /dev/null
+++ b/mintlify/db/guides/live-queries.md
@@ -0,0 +1,2886 @@
+---
+title: Live Queries
+id: live-queries
+---
+
+# TanStack DB Live Queries
+
+TanStack DB provides a powerful, type-safe query system that allows you to fetch, filter, transform, and aggregate data from collections using a SQL-like fluent API. All queries are **live** by default, meaning they automatically update when the underlying data changes.
+
+The query system is built around an API similar to SQL query builders like Kysely or Drizzle where you chain methods together to compose your query. The query builder doesn't perform operations in the order of method calls - instead, it composes your query into an optimal incremental pipeline that gets compiled and executed efficiently. Each method returns a new query builder, allowing you to chain operations together.
+
+Live queries resolve to collections that automatically update when their underlying data changes. You can subscribe to changes, iterate over results, and use all the standard collection methods.
+
+```ts
+import { createCollection, liveQueryCollectionOptions, eq } from '@tanstack/db'
+
+const activeUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+      .select(({ user }) => ({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+      }))
+}))
+```
+
+The result types are automatically inferred from your query structure, providing full TypeScript support. When you use a `select` clause, the result type matches your projection. Without `select`, you get the full schema with proper join optionality.
+
+## Virtual properties
+
+Live query results include computed, read-only virtual properties on every row:
+
+- `$synced`: `true` when the row is confirmed by sync; `false` when it is still optimistic.
+- `$origin`: `"local"` if the last confirmed change came from this client, otherwise `"remote"`.
+- `$key`: the row key for the result.
+- `$collectionId`: the source collection ID.
+
+These props can be used in `where`, `select`, and `orderBy` clauses. They are added to
+query outputs automatically and should not be persisted back to storage.
+
+## Table of Contents
+
+- [Creating Live Query Collections](#creating-live-query-collections)
+- [One-shot Queries with queryOnce](#one-shot-queries-with-queryonce)
+- [From Clause](#from-clause)
+- [Where Clauses](#where-clauses)
+- [Select Projections](#select)
+- [Joins](#joins)
+- [Subqueries](#subqueries)
+- [Includes](#includes)
+- [groupBy and Aggregations](#groupby-and-aggregations)
+- [findOne](#findone)
+- [Distinct](#distinct)
+- [Order By, Limit, and Offset](#order-by-limit-and-offset)
+- [Composable Queries](#composable-queries)
+- [Reactive Effects (createEffect)](#reactive-effects-createeffect)
+- [Expression Functions Reference](#expression-functions-reference)
+- [Functional Variants](#functional-variants)
+
+## Creating Live Query Collections
+
+To create a live query collection, you can use `liveQueryCollectionOptions` with `createCollection`, or use the convenience function `createLiveQueryCollection`.
+
+### Using liveQueryCollectionOptions
+
+The fundamental way to create a live query is using `liveQueryCollectionOptions` with `createCollection`:
+
+```ts
+import { createCollection, liveQueryCollectionOptions, eq } from '@tanstack/db'
+
+const activeUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+      .select(({ user }) => ({
+        id: user.id,
+        name: user.name,
+      }))
+}))
+```
+
+### Configuration Options
+
+For more control, you can specify additional options:
+
+```ts
+const activeUsers = createCollection(liveQueryCollectionOptions({
+  id: 'active-users', // Optional: auto-generated if not provided
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+      .select(({ user }) => ({
+        id: user.id,
+        name: user.name,
+      })),
+  getKey: (user) => user.id, // Optional: uses stream key if not provided
+  startSync: true, // Optional: starts sync immediately
+}))
+```
+| Option | Type | Description |
+|--------|------|-------------|
+| `id` | `string` (optional) | An optional unique identifier for the live query. If not provided, it will be auto-generated. This is useful for debugging and logging. |
+| `query` | `QueryBuilder` or function | The query definition, this is either a `Query` instance or a function that returns a `Query` instance. |
+| `getKey` | `(item) => string \| number` (optional) | A function that extracts a unique key from each row. If not provided, the stream's internal key will be used. For simple cases this is the key from the parent collection, but in the case of joins, the auto-generated key will be a composite of the parent keys. Using `getKey` is useful when you want to use a specific key from a parent collection for the resulting collection. |
+| `schema` | `Schema` (optional) | Optional schema for validation |
+| `startSync` | `boolean` (optional) | Whether to start syncing immediately. Defaults to `true`. |
+| `gcTime` | `number` (optional) | Garbage collection time in milliseconds. Defaults to `5000` (5 seconds). |
+
+### Convenience Function
+
+For simpler cases, you can use `createLiveQueryCollection` as a shortcut:
+
+```ts
+import { createLiveQueryCollection, eq } from '@tanstack/db'
+
+const activeUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+    }))
+)
+```
+
+## One-shot Queries with queryOnce
+
+If you need a one-time snapshot (no ongoing reactivity), use `queryOnce`. It
+creates a live query collection, preloads it, extracts the results, and cleans
+up automatically so you do not have to remember to call `cleanup()`.
+
+```ts
+import { eq, queryOnce } from '@tanstack/db'
+
+// Basic one-shot query
+const activeUsers = await queryOnce((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+    .select(({ user }) => ({ id: user.id, name: user.name }))
+)
+
+// Single result with findOne()
+const user = await queryOnce((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.id, userId))
+    .findOne()
+)
+```
+
+Use `queryOnce` for scripts, background tasks, data export, or AI/LLM context
+building. `findOne()` resolves to `undefined` when no rows match. For UI
+bindings and reactive updates, use live queries instead.
+
+### Using with Frameworks
+
+In React, you can use the `useLiveQuery` hook:
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+
+function UserList() {
+  const activeUsers = useLiveQuery((q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+  )
+
+  return (
+    <ul>
+      {activeUsers.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+In Angular, you can use the `injectLiveQuery` function:
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+
+@Component({
+  selector: 'user-list',
+  template: `
+    @for (user of activeUsers.data(); track user.id) {
+      <li>{{ user.name }}</li>
+    }
+  `
+})
+export class UserListComponent {
+  activeUsers = injectLiveQuery((q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+  )
+}
+```
+
+> **Note:** React hooks (`useLiveQuery`, `useLiveInfiniteQuery`, `useLiveSuspenseQuery`) accept an optional dependency array parameter to re-execute queries when values change, similar to React's `useEffect`. See the [React Adapter documentation](/db/framework/react/overview#dependency-arrays) for details on when and how to use dependency arrays.
+
+For more details on framework integration, see the [React](/db/framework/react/overview), [Vue](/db/framework/vue/overview), and [Angular](/db/framework/angular/overview) adapter documentation.
+
+### Using with React Suspense
+
+For React applications, you can use the `useLiveSuspenseQuery` hook to integrate with React Suspense boundaries. This hook suspends rendering while data loads initially, then streams updates without re-suspending.
+
+```tsx
+import { useLiveSuspenseQuery } from '@tanstack/react-db'
+import { Suspense } from 'react'
+
+function UserList() {
+  // This will suspend until data is ready
+  const { data } = useLiveSuspenseQuery((q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+  )
+
+  // data is always defined - no need for optional chaining
+  return (
+    <ul>
+      {data.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading users...</div>}>
+      <UserList />
+    </Suspense>
+  )
+}
+```
+
+#### Type Safety
+
+The key difference from `useLiveQuery` is that `data` is always defined (never `undefined`). The hook suspends during initial load, so by the time your component renders, data is guaranteed to be available:
+
+```tsx
+function UserStats() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ user: usersCollection })
+  )
+
+  // TypeScript knows data is Array<User>, not Array<User> | undefined
+  return <div>Total users: {data.length}</div>
+}
+```
+
+#### Error Handling
+
+Combine with Error Boundaries to handle loading errors:
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary'
+
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Failed to load users</div>}>
+      <Suspense fallback={<div>Loading users...</div>}>
+        <UserList />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+#### Reactive Updates
+
+After the initial load, data updates stream in without re-suspending:
+
+```tsx
+function UserList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ user: usersCollection })
+  )
+
+  // Suspends once during initial load
+  // After that, data updates automatically when users change
+  // UI never re-suspends for live updates
+  return (
+    <ul>
+      {data.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### Re-suspending on Dependency Changes
+
+When dependencies change, the hook re-suspends to load new data:
+
+```tsx
+function FilteredUsers({ minAge }: { minAge: number }) {
+  const { data } = useLiveSuspenseQuery(
+    (q) =>
+      q
+        .from({ user: usersCollection })
+        .where(({ user }) => gt(user.age, minAge)),
+    [minAge] // Re-suspend when minAge changes
+  )
+
+  return (
+    <ul>
+      {data.map(user => (
+        <li key={user.id}>{user.name} - {user.age}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### When to Use Which Hook
+
+- **Use `useLiveSuspenseQuery`** when:
+  - You want to use React Suspense for loading states
+  - You prefer handling loading/error states with `<Suspense>` and `<ErrorBoundary>` components
+  - You want guaranteed non-undefined data types
+  - The query always needs to run (not conditional)
+
+- **Use `useLiveQuery`** when:
+  - You need conditional/disabled queries
+  - You prefer handling loading/error states within your component
+  - You want to show loading states inline without Suspense
+  - You need access to `status` and `isLoading` flags
+  - **You're using a router with loaders** (React Router, TanStack Router, etc.) - preload in the loader and use `useLiveQuery` in the component
+
+```tsx
+// useLiveQuery - handle states in component
+function UserList() {
+  const { data, status, isLoading } = useLiveQuery((q) =>
+    q.from({ user: usersCollection })
+  )
+
+  if (isLoading) return <div>Loading...</div>
+  if (status === 'error') return <div>Error loading users</div>
+
+  return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>
+}
+
+// useLiveSuspenseQuery - handle states with Suspense/ErrorBoundary
+function UserList() {
+  const { data } = useLiveSuspenseQuery((q) =>
+    q.from({ user: usersCollection })
+  )
+
+  return <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>
+}
+
+// useLiveQuery with router loader - recommended pattern
+// In your route configuration:
+const route = {
+  path: '/users',
+  loader: async () => {
+    // Preload the collection in the loader
+    await usersCollection.preload()
+    return null
+  },
+  component: UserList,
+}
+
+// In your component:
+function UserList() {
+  // Collection is already loaded, so data is immediately available
+  const { data } = useLiveQuery((q) =>
+    q.from({ user: usersCollection })
+  )
+
+  return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>
+}
+```
+
+### Conditional Queries
+
+In React, you can conditionally disable a query by returning `undefined` or `null` from the `useLiveQuery` callback. When disabled, the hook returns a special state indicating the query is not active.
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+
+function TodoList({ userId }: { userId?: string }) {
+  const { data, isEnabled, status } = useLiveQuery((q) => {
+    // Disable the query when userId is not available
+    if (!userId) return undefined
+
+    return q
+      .from({ todos: todosCollection })
+      .where(({ todos }) => eq(todos.userId, userId))
+  }, [userId])
+
+  if (!isEnabled) {
+    return <div>Please select a user</div>
+  }
+
+  return (
+    <ul>
+      {data?.map(todo => (
+        <li key={todo.id}>{todo.text}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+When the query is disabled (callback returns `undefined` or `null`):
+- `status` is `'disabled'`
+- `data`, `state`, and `collection` are `undefined`
+- `isEnabled` is `false`
+- `isLoading`, `isReady`, `isIdle`, and `isError` are all `false`
+
+This pattern is useful for "wait until inputs exist" flows without needing to conditionally render the hook itself or manage an external enabled flag.
+
+### Alternative Callback Return Types
+
+The `useLiveQuery` callback can return different types depending on your use case:
+
+#### Returning a Query Builder (Standard)
+
+The most common pattern is to return a query builder:
+
+```tsx
+const { data } = useLiveQuery((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.completed, false))
+)
+```
+
+#### Returning a Pre-created Collection
+
+You can return an existing collection directly:
+
+```tsx
+const activeUsersCollection = createLiveQueryCollection((q) =>
+  q.from({ users: usersCollection })
+   .where(({ users }) => eq(users.active, true))
+)
+
+function UserList({ usePrebuilt }: { usePrebuilt: boolean }) {
+  const { data } = useLiveQuery((q) => {
+    // Toggle between pre-created collection and ad-hoc query
+    if (usePrebuilt) return activeUsersCollection
+
+    return q.from({ users: usersCollection })
+  }, [usePrebuilt])
+
+  return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>
+}
+```
+
+#### Returning a LiveQueryCollectionConfig
+
+You can return a configuration object to specify additional options like a custom ID:
+
+```tsx
+const { data } = useLiveQuery((q) => {
+  return {
+    query: q.from({ items: itemsCollection })
+             .select(({ items }) => ({ id: items.id })),
+    id: 'items-view', // Custom ID for debugging
+    gcTime: 10000 // Custom garbage collection time
+  }
+})
+```
+
+This is particularly useful when you need to:
+- Attach a stable ID for debugging or logging
+- Configure collection-specific options like `gcTime` or `getKey`
+- Conditionally switch between different collection configurations
+
+## From Clause
+
+The foundation of every query is the `from` method, which specifies the source collection or subquery. You can alias the source using object syntax.
+
+Use `from()` with a single source. To combine multiple independent sources
+without a join, use [`unionAll()`](#source-level-unionall) instead.
+
+### Method Signature
+
+```ts
+from({
+  [alias]: Collection | Query
+}): Query
+```
+
+**Parameters:**
+- `[alias]` - A Collection or Query instance.
+
+### Basic Usage
+
+Start with a basic query that selects all records from a collection:
+
+```ts
+const allUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) => q.from({ user: usersCollection })
+}))
+```
+
+The result contains all users with their full schema. You can iterate over the results or access them by key:
+
+```ts
+// Get all users as an array
+const users = allUsers.toArray
+
+// Get a specific user by ID
+const user = allUsers.get(1)
+
+// Check if a user exists
+const hasUser = allUsers.has(1)
+```
+
+Use aliases to make your queries more readable, especially when working with multiple collections:
+
+```ts
+const users = createCollection(liveQueryCollectionOptions({
+  query: (q) => q.from({ u: usersCollection })
+}))
+
+// Access fields using the alias
+const userNames = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ u: usersCollection })
+      .select(({ u }) => ({
+        name: u.name,
+        email: u.email,
+      }))
+}))
+```
+
+### `unionAll`
+
+Use `unionAll()` as a start method, in the same place you would use `from()`,
+to combine independent sources without a join. It has two forms:
+
+```ts
+unionAll({
+  [alias]: Collection | Query,
+  [alias2]: Collection | Query
+}): Query
+
+unionAll(branchQuery, branchQuery2, ...branchQueries): Query
+```
+
+#### Source-Level `unionAll`
+
+The object form combines collection or subquery sources. Conceptually, this
+behaves like `UNION ALL`: each raw result row comes from exactly one source
+alias, and inactive aliases are `undefined`.
+
+```ts
+import { coalesce, createLiveQueryCollection } from '@tanstack/db'
+
+const timeline = createLiveQueryCollection((q) =>
+  q
+    .unionAll({
+      message: messagesCollection,
+      toolCall: toolCallsCollection,
+    })
+    .orderBy(({ message, toolCall }) =>
+      coalesce(message.timestamp, toolCall.timestamp),
+    )
+)
+```
+
+Without `select()`, the result type is an exclusive union:
+
+```ts
+type TimelineRow =
+  | { message: Message; toolCall?: undefined }
+  | { message?: undefined; toolCall: ToolCall }
+```
+
+Use subqueries when each branch needs its own filtering or shaping before the
+sources are combined.
+
+If you project branch values with `select()`, you control the inactive branch
+shape. For example, `caseWhen()` projections use `null` when no branch matches
+unless you provide a default value.
+
+#### Query-Branch `unionAll`
+
+You can also pass built queries directly. This form unions the result rows from
+each branch query. Downstream clauses operate on that shared result shape, so
+ordering can reference shared fields directly instead of using `coalesce()`.
+A branch without `select()` keeps its normal query result shape; for example, a
+joined branch enters the union as a namespaced row.
+
+```ts
+const timeline = createLiveQueryCollection((q) => {
+  const messageRows = q
+    .from({ message: messagesCollection })
+    .select(({ message }) => ({
+      type: `message` as const,
+      id: message.id,
+      body: message.text,
+      timestamp: message.timestamp,
+    }))
+
+  const toolCallRows = q
+    .from({ toolCall: toolCallsCollection })
+    .select(({ toolCall }) => ({
+      type: `toolCall` as const,
+      id: toolCall.id,
+      body: toolCall.name,
+      timestamp: toolCall.timestamp,
+    }))
+
+  return q
+    .unionAll(messageRows, toolCallRows)
+    .orderBy(({ timestamp }) => timestamp)
+})
+```
+
+## Where Clauses
+
+Use `where` clauses to filter your data based on conditions. You can chain multiple `where` calls - they are combined with `and` logic.
+
+The `where` method takes a callback function that receives an object containing your table aliases and returns a boolean expression. You build these expressions using comparison functions like `eq()`, `gt()`, and logical operators like `and()` and `or()`. This declarative approach allows the query system to optimize your filters efficiently. These are described in more detail in the [Expression Functions Reference](#expression-functions-reference) section. This is very similar to how you construct queries using Kysely or Drizzle.
+
+It's important to note that the `where` method is not a function that is executed on each row or the results, its a way to describe the query that will be executed. This declarative approach works well for almost all use cases, but if you need to use a more complex condition, there is the functional variant as `fn.where` which is described in the [Functional Variants](#functional-variants) section.
+
+### Method Signature
+
+```ts
+where(
+  condition: (row: TRow) => Expression<boolean>
+): Query
+```
+
+**Parameters:**
+- `condition` - A callback function that receives the row object with table aliases and returns a boolean expression
+
+### Basic Filtering
+
+Filter users by a simple condition:
+
+```ts
+import { eq } from '@tanstack/db'
+
+const activeUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+}))
+```
+
+### Multiple Conditions
+
+Chain multiple `where` calls for AND logic:
+
+```ts
+import { eq, gt } from '@tanstack/db'
+
+const adultActiveUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+      .where(({ user }) => gt(user.age, 18))
+}))
+```
+
+### Complex Conditions
+
+Use logical operators to build complex conditions:
+
+```ts
+import { eq, gt, or, and } from '@tanstack/db'
+
+const specialUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => 
+      and(
+        eq(user.active, true),
+        or(
+          gt(user.age, 25),
+          eq(user.role, 'admin')
+        )
+      )
+    )
+)
+```
+
+### Available Operators
+
+The query system provides several comparison operators:
+
+```ts
+import { eq, gt, gte, lt, lte, like, ilike, inArray, and, or, not } from '@tanstack/db'
+
+// Equality
+eq(user.id, 1)
+
+// Comparisons
+gt(user.age, 18)    // greater than
+gte(user.age, 18)   // greater than or equal
+lt(user.age, 65)    // less than
+lte(user.age, 65)   // less than or equal
+
+// String matching
+like(user.name, 'John%')    // case-sensitive pattern matching
+ilike(user.name, 'john%')   // case-insensitive pattern matching
+
+// Array membership
+inArray(user.id, [1, 2, 3])
+
+// Logical operators
+and(condition1, condition2)
+or(condition1, condition2)
+not(condition)
+```
+
+For a complete reference of all available functions, see the [Expression Functions Reference](#expression-functions-reference) section.
+
+### Comparison semantics
+
+Comparisons follow SQL/PostgreSQL conventions rather than raw JavaScript:
+
+- **`null` / `undefined` use three-valued logic.** Any comparison involving `null` or `undefined` evaluates to `UNKNOWN`, so the row is not matched. For example `eq(user.score, null)` matches nothing — use a dedicated null check (e.g. `isUndefined`) to match missing values.
+- **`NaN` follows PostgreSQL float semantics.** `NaN` is treated as equal to itself and greater than every other (non-null) value. So `eq(row.value, NaN)` matches `NaN` rows, `gt(row.value, x)` includes `NaN`, and ordering by such a field places `NaN` last. (Invalid `Date` values, whose timestamp is `NaN`, behave the same way.) This differs from JavaScript, where `NaN === NaN` is `false`, and matches how PostgreSQL orders and indexes floating-point values.
+
+## Select
+
+Use `select` to specify which fields to include in your results and transform your data. Without `select`, you get the full schema.
+
+Similar to the `where` clause, the `select` method takes a callback function that receives an object containing your table aliases and returns an object with the fields you want to include in your results. These can be combined with functions from the [Expression Functions Reference](#expression-functions-reference) section to create computed fields. You can also use the spread operator to include all fields from a table.
+
+### Method Signature
+
+```ts
+select(
+  projection: (row: TRow) => Record<string, Expression>
+): Query
+```
+
+**Parameters:**
+- `projection` - A callback function that receives the row object with table aliases and returns the selected fields object
+
+### Basic Selects
+
+Select specific fields from your data:
+
+````ts
+const userNames = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+      email: user.email,
+    }))
+)
+
+/*
+Result type: { id: number, name: string, email: string }
+
+```ts
+for (const row of userNames) &#123;
+  console.log(row.name)
+&#125;
+```
+*/
+````
+
+### Field Renaming
+
+Rename fields in your results:
+
+```ts
+const userProfiles = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({
+      userId: user.id,
+      fullName: user.name,
+      contactEmail: user.email,
+    }))
+)
+```
+
+### Computed Fields
+
+Create computed fields using expressions:
+
+```ts
+import { gt, length } from '@tanstack/db'
+
+const userStats = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+      isAdult: gt(user.age, 18),
+      nameLength: length(user.name),
+    }))
+)
+```
+
+### Using Functions and Including All Fields
+
+Transform your data using built-in functions:
+
+````ts
+import { concat, upper, gt } from '@tanstack/db'
+
+const formattedUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .select(({ user }) => ({
+        ...user, // Include all user fields
+        displayName: upper(concat(user.firstName, ' ', user.lastName)),
+        isAdult: gt(user.age, 18),
+      }))
+}))
+
+/*
+Result type:
+{
+  id: number,
+  name: string,
+  email: string,
+  displayName: string,
+  isAdult: boolean,
+}
+*/
+````
+
+For a complete list of available functions, see the [Expression Functions Reference](#expression-functions-reference) section.
+
+## Joins
+
+Use `join` to combine data from multiple collections. Joins default to `left` join type and only support equality conditions.
+
+Joins in TanStack DB are a way to combine data from multiple collections, and are conceptually very similar to SQL joins. When two collections are joined, the result is a new collection that contains the combined data as single rows. The new collection is a live query collection, and will automatically update when the underlying data changes.
+
+A `join` without a `select` will return row objects that are namespaced with the aliases of the joined collections.
+
+The result type of a join will take into account the join type, with the optionality of the joined fields being determined by the join type.
+
+> [!TIP]
+> If you need hierarchical results instead of flat joined rows (e.g., each project with its nested issues), see [Includes](#includes) below.
+
+### Method Signature
+
+```ts
+join(
+  { [alias]: Collection | Query },
+  condition: (row: TRow) => Expression<boolean>, // Must be an `eq` condition
+  joinType?: 'left' | 'right' | 'inner' | 'full'
+): Query
+```
+
+**Parameters:**
+- `aliases` - An object where keys are alias names and values are collections or subqueries to join
+- `condition` - A callback function that receives the combined row object and returns an equality condition
+- `joinType` - Optional join type: `'left'` (default), `'right'`, `'inner'`, or `'full'`
+
+### Basic Joins
+
+Join users with their posts:
+
+````ts
+const userPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .join({ post: postsCollection }, ({ user, post }) => 
+      eq(user.id, post.userId)
+    )
+)
+
+/*
+Result type: 
+{ 
+  user: User,
+  post?: Post, // post is optional because it is a left join
+}
+
+```ts
+for (const row of userPosts) &#123;
+  console.log(row.user.name, row.post?.title)
+&#125;
+```
+*/
+````
+
+### Join Types
+
+Specify the join type as the third parameter:
+
+```ts
+const activeUserPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .join(
+      { post: postsCollection }, 
+      ({ user, post }) => eq(user.id, post.userId),
+      'inner', // `inner`, `left`, `right` or `full`
+    )
+)
+```
+
+Or using the aliases `leftJoin`, `rightJoin`, `innerJoin` and `fullJoin` methods:
+
+### Left Join
+```ts
+// Left join - all users, even without posts
+const allUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .leftJoin(
+      { post: postsCollection }, 
+      ({ user, post }) => eq(user.id, post.userId),
+    )
+)
+
+/*
+Result type:
+{
+  user: User,
+  post?: Post, // post is optional because it is a left join
+}
+*/
+```
+
+### Right Join
+
+```ts
+// Right join - all posts, even without users
+const allPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .rightJoin(
+      { post: postsCollection }, 
+      ({ user, post }) => eq(user.id, post.userId),
+    )
+)
+
+/*
+Result type:
+{
+  user?: User, // user is optional because it is a right join
+  post: Post,
+}
+*/
+```
+
+### Inner Join
+
+```ts
+// Inner join - only matching records
+const activeUserPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .innerJoin(
+      { post: postsCollection }, 
+      ({ user, post }) => eq(user.id, post.userId),
+    )
+)
+
+/*
+Result type:
+{
+  user: User,
+  post: Post,
+}
+*/
+```
+
+### Full Join
+
+```ts
+// Full join - all users and all posts
+const allUsersAndPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .fullJoin(
+      { post: postsCollection }, 
+      ({ user, post }) => eq(user.id, post.userId),
+    )
+)
+
+/*
+Result type:
+{
+  user?: User, // user is optional because it is a full join
+  post?: Post, // post is optional because it is a full join
+}
+*/
+```
+
+### Multiple Joins
+
+Chain multiple joins in a single query:
+
+```ts
+const userPostComments = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .join({ post: postsCollection }, ({ user, post }) => 
+      eq(user.id, post.userId)
+    )
+    .join({ comment: commentsCollection }, ({ post, comment }) => 
+      eq(post.id, comment.postId)
+    )
+    .select(({ user, post, comment }) => ({
+      userName: user.name,
+      postTitle: post.title,
+      commentText: comment.text,
+    }))
+)
+```
+
+## Subqueries
+
+Subqueries allow you to use the result of one query as input to another, they are embedded within the query itself and are compile to a single query pipeline. They are very similar to SQL subqueries that are executed as part of a single operation.
+
+Note that subqueries are not the same as using a live query result in a `from` or `join` clause in a new query. When you do that the intermediate result is fully computed and accessible to you, subqueries are internal to their parent query and not materialised to a collection themselves and so are more efficient.
+
+See the [Caching Intermediate Results](#caching-intermediate-results) section for more details on using live query results in a `from` or `join` clause in a new query.
+
+### Subqueries in `from` Clauses
+
+Use a subquery as the main source:
+
+```ts
+const activeUserPosts = createCollection(liveQueryCollectionOptions({
+  query: (q) => {
+    // Build the subquery first
+    const activeUsers = q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+    
+    // Use the subquery in the main query
+    return q
+      .from({ activeUser: activeUsers })
+      .join({ post: postsCollection }, ({ activeUser, post }) => 
+        eq(activeUser.id, post.userId)
+      )
+  }
+}))
+```
+
+### Subqueries in `join` Clauses
+
+Join with a subquery result:
+
+```ts
+const userRecentPosts = createCollection(liveQueryCollectionOptions({
+  query: (q) => {
+    // Build the subquery first
+    const recentPosts = q
+      .from({ post: postsCollection })
+      .where(({ post }) => gt(post.createdAt, '2024-01-01'))
+      .orderBy(({ post }) => post.createdAt, 'desc')
+      .limit(1)
+    
+    // Use the subquery in the main query
+    return q
+      .from({ user: usersCollection })
+      .join({ recentPost: recentPosts }, ({ user, recentPost }) => 
+        eq(user.id, recentPost.userId)
+      )
+  }
+}))
+```
+
+### Subquery deduplication  
+
+When the same subquery is used multiple times within a query, it's automatically deduplicated and executed only once:
+
+```ts
+const complexQuery = createCollection(liveQueryCollectionOptions({
+  query: (q) => {
+    // Build the subquery once
+    const activeUsers = q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.active, true))
+    
+    // Use the same subquery multiple times
+    return q
+      .from({ activeUser: activeUsers })
+      .join({ post: postsCollection }, ({ activeUser, post }) => 
+        eq(activeUser.id, post.userId)
+      )
+      .join({ comment: commentsCollection }, ({ activeUser, comment }) => 
+        eq(activeUser.id, comment.userId)
+      )
+  }
+}))
+```
+
+In this example, the `activeUsers` subquery is used twice but executed only once, improving performance.
+
+### Complex Nested Subqueries
+
+Build complex queries with multiple levels of nesting:
+
+```ts
+import { count } from '@tanstack/db'
+
+const topUsers = createCollection(liveQueryCollectionOptions({
+  query: (q) => {
+    // Build the post count subquery
+    const postCounts = q
+      .from({ post: postsCollection })
+      .groupBy(({ post }) => post.userId)
+      .select(({ post }) => ({
+        userId: post.userId,
+        count: count(post.id),
+      }))
+    
+    // Build the user stats subquery
+    const userStats = q
+      .from({ user: usersCollection })
+      .join({ postCount: postCounts }, ({ user, postCount }) => 
+        eq(user.id, postCount.userId)
+      )
+      .select(({ user, postCount }) => ({
+        id: user.id,
+        name: user.name,
+        postCount: postCount.count,
+      }))
+      .orderBy(({ userStats }) => userStats.postCount, 'desc')
+      .limit(10)
+    
+    // Use the user stats subquery in the main query
+    return q.from({ userStats })
+  }
+}))
+```
+
+## Includes
+
+Includes let you nest subqueries inside `.select()` to produce hierarchical results. Instead of joins that flatten 1:N relationships into repeated rows, each parent row gets a nested collection of its related items.
+
+```ts
+import { createLiveQueryCollection, eq } from '@tanstack/db'
+
+const projectsWithIssues = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: q
+      .from({ i: issuesCollection })
+      .where(({ i }) => eq(i.projectId, p.id))
+      .select(({ i }) => ({
+        id: i.id,
+        title: i.title,
+      })),
+  })),
+)
+```
+
+Each project's `issues` field is a live `Collection` that updates incrementally as the underlying data changes.
+
+### Correlation Condition
+
+The child query's `.where()` must contain an `eq()` that links a child field to a parent field — this is the **correlation condition**. It tells the system how children relate to parents.
+
+```ts
+// The correlation condition: links issues to their parent project
+.where(({ i }) => eq(i.projectId, p.id))
+```
+
+The correlation condition can appear as a standalone `.where()`, or inside an `and()`:
+
+```ts
+// Also valid — correlation is extracted from inside and()
+.where(({ i }) => and(eq(i.projectId, p.id), eq(i.status, 'open')))
+```
+
+The correlation field does not need to be included in the parent's `.select()`.
+
+### Additional Filters
+
+Child queries support additional `.where()` clauses beyond the correlation condition, including filters that reference parent fields:
+
+```ts
+q.from({ p: projectsCollection }).select(({ p }) => ({
+  id: p.id,
+  name: p.name,
+  issues: q
+    .from({ i: issuesCollection })
+    .where(({ i }) => eq(i.projectId, p.id))       // correlation
+    .where(({ i }) => eq(i.createdBy, p.createdBy)) // parent-referencing filter
+    .where(({ i }) => eq(i.status, 'open'))          // pure child filter
+    .select(({ i }) => ({
+      id: i.id,
+      title: i.title,
+    })),
+}))
+```
+
+Parent-referencing filters are fully reactive — if a parent's field changes, the child results update automatically.
+
+### Ordering and Limiting
+
+Child queries support `.orderBy()` and `.limit()`, applied per parent:
+
+```ts
+q.from({ p: projectsCollection }).select(({ p }) => ({
+  id: p.id,
+  name: p.name,
+  issues: q
+    .from({ i: issuesCollection })
+    .where(({ i }) => eq(i.projectId, p.id))
+    .orderBy(({ i }) => i.createdAt, 'desc')
+    .limit(5)
+    .select(({ i }) => ({
+      id: i.id,
+      title: i.title,
+    })),
+}))
+```
+
+Each project gets its own top-5 issues, not 5 issues shared across all projects.
+
+### toArray
+
+By default, each child result is a live `Collection`. If you want a plain array instead, wrap the child query with `toArray()`:
+
+```ts
+import { createLiveQueryCollection, eq, toArray } from '@tanstack/db'
+
+const projectsWithIssues = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: toArray(
+      q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({
+          id: i.id,
+          title: i.title,
+        })),
+    ),
+  })),
+)
+```
+
+With `toArray()`, the project row is re-emitted whenever its issues change. Without it, the child `Collection` updates independently.
+
+### materialize
+
+`materialize()` is a single helper that covers both multi-row and single-row includes:
+
+- When the wrapped subquery returns multiple rows, the parent receives `Array<T>` — same shape as `toArray()`.
+- When the wrapped subquery ends in `.findOne()`, the parent receives `T | undefined` — a single object, or `undefined` when no child matches.
+
+This spares callers from unwrapping a singleton array whenever they know the child query yields at most one row. Reactive semantics match `toArray()`: the parent row is re-emitted whenever the underlying children change, including insert / update / delete transitions and rows moving in or out of a match.
+
+```ts
+import { createLiveQueryCollection, eq, materialize } from '@tanstack/db'
+
+// Multi-row → issues: Array<Issue>
+const projectsWithIssues = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    ...p,
+    issues: materialize(
+      q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id)),
+    ),
+  })),
+)
+
+// Singleton → project: Project | undefined
+const issuesWithProject = createLiveQueryCollection((q) =>
+  q.from({ i: issuesCollection }).select(({ i }) => ({
+    ...i,
+    project: materialize(
+      q
+        .from({ p: projectsCollection })
+        .where(({ p }) => eq(p.id, i.projectId))
+        .findOne(),
+    ),
+  })),
+)
+```
+
+The singleton vs. array result type is inferred from whether the wrapped query ends in `.findOne()` — no extra type annotation is required.
+
+Like `toArray()`, `materialize()` is only valid as a top-level value in `.select()` — it cannot be nested inside expression helpers such as `coalesce()` or `eq()`.
+
+### Aggregates
+
+You can use aggregate functions in child queries. Aggregates are computed per parent:
+
+```ts
+import { createLiveQueryCollection, eq, count } from '@tanstack/db'
+
+const projectsWithCounts = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issueCount: q
+      .from({ i: issuesCollection })
+      .where(({ i }) => eq(i.projectId, p.id))
+      .select(({ i }) => ({ total: count(i.id) })),
+  })),
+)
+```
+
+Each project gets its own count. The count updates reactively as issues are added or removed.
+
+### Nested Includes
+
+Includes nest arbitrarily. For example, projects can include issues, which include comments:
+
+```ts
+const tree = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: q
+      .from({ i: issuesCollection })
+      .where(({ i }) => eq(i.projectId, p.id))
+      .select(({ i }) => ({
+        id: i.id,
+        title: i.title,
+        comments: q
+          .from({ c: commentsCollection })
+          .where(({ c }) => eq(c.issueId, i.id))
+          .select(({ c }) => ({
+            id: c.id,
+            body: c.body,
+          })),
+      })),
+  })),
+)
+```
+
+Each level updates independently and incrementally — adding a comment to an issue does not re-process other issues or projects.
+
+### Using Includes with React
+
+When using includes with React, each child `Collection` needs its own `useLiveQuery` subscription to receive reactive updates. Pass the child collection to a subcomponent that calls `useLiveQuery(childCollection)`:
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+function ProjectList() {
+  const { data: projects } = useLiveQuery((q) =>
+    q.from({ p: projectsCollection }).select(({ p }) => ({
+      id: p.id,
+      name: p.name,
+      issues: q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({
+          id: i.id,
+          title: i.title,
+        })),
+    })),
+  )
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>
+          {project.name}
+          {/* Pass the child collection to a subcomponent */}
+          <IssueList issuesCollection={project.issues} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function IssueList({ issuesCollection }) {
+  // Subscribe to the child collection for reactive updates
+  const { data: issues } = useLiveQuery(issuesCollection)
+
+  return (
+    <ul>
+      {issues.map((issue) => (
+        <li key={issue.id}>{issue.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+Each `IssueList` component independently subscribes to its project's issues. When an issue is added or removed, only the affected `IssueList` re-renders — the parent `ProjectList` does not.
+
+> [!NOTE]
+> You must pass the child collection to a subcomponent and subscribe with `useLiveQuery`. Reading `project.issues` directly in the parent without subscribing will give you the collection object, but the component won't re-render when the child data changes.
+
+## groupBy and Aggregations
+
+Use `groupBy` to group your data and apply aggregate functions. When you use aggregates in `select` without `groupBy`, the entire result set is treated as a single group.
+
+### Method Signature
+
+```ts
+groupBy(
+  grouper: (row: TRow) => Expression | Expression[]
+): Query
+```
+
+**Parameters:**
+- `grouper` - A callback function that receives the row object and returns the grouping key(s). Can return a single value or an array for multi-column grouping
+
+### Basic Grouping
+
+Group users by their department and count them:
+
+```ts
+import { count, avg } from '@tanstack/db'
+
+const departmentStats = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .groupBy(({ user }) => user.departmentId)
+      .select(({ user }) => ({
+        departmentId: user.departmentId,
+        userCount: count(user.id),
+        avgAge: avg(user.age),
+      }))
+}))
+```
+
+> [!NOTE]
+> In `groupBy` queries, the properties in your `select` clause must either be:
+> - An aggregate function (like `count`, `sum`, `avg`)
+> - A property that was used in the `groupBy` clause
+>
+> You cannot select properties that are neither aggregated nor grouped.
+
+> [!WARNING]
+> `fn.select()` cannot be used with `groupBy()`. The `groupBy` operator needs to statically analyze the `select` clause to discover which aggregate functions (`count`, `sum`, `max`, etc.) to compute for each group. Since `fn.select()` is an opaque JavaScript function, the compiler cannot inspect it. Use the standard `.select()` API when combining with `groupBy()`.
+
+### Multiple Column Grouping
+
+Group by multiple columns by returning an array from the callback:
+
+```ts
+const userStats = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .groupBy(({ user }) => [user.departmentId, user.role])
+      .select(({ user }) => ({
+        departmentId: user.departmentId,
+        role: user.role,
+        count: count(user.id),
+        avgSalary: avg(user.salary),
+      }))
+}))
+```
+
+### Aggregate Functions
+
+Use various aggregate functions to summarize your data:
+
+```ts
+import { count, sum, avg, min, max } from '@tanstack/db'
+
+const orderStats = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ order: ordersCollection })
+      .groupBy(({ order }) => order.customerId)
+      .select(({ order }) => ({
+        customerId: order.customerId,
+        totalOrders: count(order.id),
+        totalAmount: sum(order.amount),
+        avgOrderValue: avg(order.amount),
+        minOrder: min(order.amount),
+        maxOrder: max(order.amount),
+      }))
+}))
+```
+
+See the [Aggregate Functions](#aggregate-functions) section for a complete list of available aggregate functions.
+
+### Having Clauses
+
+Filter aggregated results using `having` - this is similar to the `where` clause, but is applied after the aggregation has been performed.
+
+#### Method Signature
+
+```ts
+having(
+  condition: (row: TRow) => Expression<boolean>
+): Query
+```
+
+**Parameters:**
+- `condition` - A callback function that receives table references (and `$selected` if the query contains a `select()` clause) and returns a boolean expression
+
+```ts
+// Using aggregate functions directly
+const highValueCustomers = createLiveQueryCollection((q) =>
+  q
+    .from({ order: ordersCollection })
+    .groupBy(({ order }) => order.customerId)
+    .having(({ order }) => gt(sum(order.amount), 1000))
+)
+
+// Using SELECT fields via $selected (recommended when select() is used)
+const highValueCustomersWithSelect = createLiveQueryCollection((q) =>
+  q
+    .from({ order: ordersCollection })
+    .groupBy(({ order }) => order.customerId)
+    .select(({ order }) => ({
+      customerId: order.customerId,
+      totalSpent: sum(order.amount),
+      orderCount: count(order.id),
+    }))
+    .having(({ $selected }) => gt($selected.totalSpent, 1000))
+)
+```
+
+### Implicit Single-Group Aggregation
+
+When you use aggregates without `groupBy`, the entire result set is grouped:
+
+```ts
+const overallStats = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({
+      totalUsers: count(user.id),
+      avgAge: avg(user.age),
+      maxSalary: max(user.salary),
+    }))
+)
+```
+
+This is equivalent to grouping the entire collection into a single group.
+
+### Accessing Grouped Data
+
+Grouped results can be accessed by the group key:
+
+```ts
+const deptStats = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .groupBy(({ user }) => user.departmentId)
+      .select(({ user }) => ({
+        departmentId: user.departmentId,
+        count: count(user.id),
+      }))
+}))
+
+// Access by department ID
+const engineeringStats = deptStats.get(1)
+```
+
+> **Note**: Grouped results are keyed differently based on the grouping:
+> - **Single column grouping**: Keyed by the actual value (e.g., `deptStats.get(1)`)
+> - **Multiple column grouping**: Keyed by a JSON string of the grouped values (e.g., `userStats.get('[1,"admin"]')`)
+
+## findOne
+
+Use `findOne` to return a single result instead of an array. This is useful when you expect to find at most one matching record, such as when querying by a unique identifier.
+
+The `findOne` method changes the return type from an array to a single object or `undefined`. When no matching record is found, the result is `undefined`.
+
+### Method Signature
+
+```ts
+findOne(): Query
+```
+
+### Basic Usage
+
+Find a specific user by ID:
+
+```ts
+const user = createLiveQueryCollection((q) =>
+  q
+    .from({ users: usersCollection })
+    .where(({ users }) => eq(users.id, 1))
+    .findOne()
+)
+
+// Result type: User | undefined
+// If user with id=1 exists: { id: 1, name: 'John', ... }
+// If not found: undefined
+```
+
+### With React Hooks
+
+Use `findOne` with `useLiveQuery` to get a single record:
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+function UserProfile({ userId }: { userId: string }) {
+  const { data: user, isLoading } = useLiveQuery((q) =>
+    q
+      .from({ users: usersCollection })
+      .where(({ users }) => eq(users.id, userId))
+      .findOne()
+  , [userId])
+
+  if (isLoading) return <div>Loading...</div>
+  if (!user) return <div>User not found</div>
+
+  return <div>{user.name}</div>
+}
+```
+
+### With Select
+
+Combine `findOne` with `select` to project specific fields:
+
+```ts
+const userEmail = createLiveQueryCollection((q) =>
+  q
+    .from({ users: usersCollection })
+    .where(({ users }) => eq(users.id, 1))
+    .select(({ users }) => ({
+      id: users.id,
+      email: users.email,
+    }))
+    .findOne()
+)
+
+// Result type: { id: number, email: string } | undefined
+```
+
+### Return Type Behavior
+
+The return type changes based on whether `findOne` is used:
+
+```ts
+// Without findOne - returns array
+const users = createLiveQueryCollection((q) =>
+  q.from({ users: usersCollection })
+)
+// Type: Array<User>
+
+// With findOne - returns single object or undefined
+const user = createLiveQueryCollection((q) =>
+  q.from({ users: usersCollection }).findOne()
+)
+// Type: User | undefined
+```
+
+### Best Practices
+
+**Use when:**
+- Querying by unique identifiers (ID, email, etc.)
+- You expect at most one result
+- You want type-safe single-record access without array indexing
+
+**Avoid when:**
+- You might have multiple matching records (use regular queries instead)
+- You need to iterate over results
+
+## Distinct
+
+Use `distinct` to remove duplicate rows from your query results based on the selected columns. The `distinct` operator ensures that each unique combination of selected values appears only once in the result set.
+
+> [!IMPORTANT]
+> The `distinct` operator requires a `select` clause. You cannot use `distinct` without specifying which columns to select.
+
+### Method Signature
+
+```ts
+distinct(): Query
+```
+
+### Basic Usage
+
+Get unique values from a single column:
+
+```ts
+const uniqueCountries = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({ country: user.country }))
+    .distinct()
+)
+
+// Result contains only unique countries
+// If you have users from USA, Canada, and UK, the result will have 3 items
+```
+
+### Multiple Column Distinct
+
+Get unique combinations of multiple columns:
+
+```ts
+const uniqueRoleSalaryPairs = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({
+      role: user.role,
+      salary: user.salary,
+    }))
+    .distinct()
+)
+
+// Result contains only unique role-salary combinations
+// e.g., Developer-75000, Developer-80000, Manager-90000
+```
+
+### Edge Cases
+
+#### Null Values
+
+Null values are treated as distinct values:
+
+```ts
+const uniqueValues = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(({ user }) => ({ department: user.department }))
+    .distinct()
+)
+
+// If some users have null departments, null will appear as a distinct value
+// Result might be: ['Engineering', 'Marketing', null]
+```
+
+## Order By, Limit, and Offset
+
+Use `orderBy`, `limit`, and `offset` to control the order and pagination of your results. Ordering is performed incrementally for optimal performance.
+
+### Method Signatures
+
+```ts
+orderBy(
+  selector: (row: TRow) => Expression,
+  direction?: 'asc' | 'desc'
+): Query
+
+limit(count: number): Query
+
+offset(count: number): Query
+```
+
+**Parameters:**
+- `selector` - A callback function that receives the row object and returns the value to sort by
+- `direction` - Sort direction: `'asc'` (default) or `'desc'`
+- `count` - Number of rows to limit or skip
+
+### Basic Ordering
+
+Sort results by a single column:
+
+```ts
+const sortedUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .orderBy(({ user }) => user.name)
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+    }))
+)
+```
+
+### Multiple Column Ordering
+
+Order by multiple columns:
+
+```ts
+const sortedUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .orderBy(({ user }) => user.departmentId, 'asc')
+    .orderBy(({ user }) => user.name, 'asc')
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+      departmentId: user.departmentId,
+    }))
+)
+```
+
+### `unionAll` Ordering
+
+When ordering a source-level `unionAll` query, use a combined expression such as
+`coalesce()` to produce one comparable value across branches. Query-branch
+`unionAll()` can instead order by shared selected fields, as shown in the
+[`unionAll()` examples](#unionall).
+
+If the order expression sorts strings and the branch collections have different
+default string collation settings, TanStack DB uses the first source collection's
+collation as the default. Pass explicit `orderBy` compare options when you need
+a specific string collation for the combined ordering:
+
+```ts
+const timeline = createLiveQueryCollection((q) =>
+  q
+    .unionAll({
+      message: messagesCollection,
+      toolCall: toolCallsCollection,
+    })
+    .select(({ message, toolCall }) => ({
+      label: coalesce(message.title, toolCall.name),
+    }))
+    .orderBy(({ $selected }) => $selected.label, {
+      stringSort: `locale`,
+      locale: `en-US`,
+    })
+)
+```
+
+### Ordering by SELECT Fields
+
+When you use `select()` with aggregates or computed values, you can order by those fields using the `$selected` namespace:
+
+```ts
+const topCustomers = createLiveQueryCollection((q) =>
+  q
+    .from({ order: ordersCollection })
+    .groupBy(({ order }) => order.customerId)
+    .select(({ order }) => ({
+      customerId: order.customerId,
+      totalSpent: sum(order.amount),
+      orderCount: count(order.id),
+      latestOrder: max(order.createdAt),
+    }))
+    .orderBy(({ $selected }) => $selected.totalSpent, 'desc')
+    .limit(10)
+)
+```
+
+### Descending Order
+
+Use `desc` for descending order:
+
+```ts
+const recentPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ post: postsCollection })
+    .orderBy(({ post }) => post.createdAt, 'desc')
+    .select(({ post }) => ({
+      id: post.id,
+      title: post.title,
+      createdAt: post.createdAt,
+    }))
+)
+```
+
+### Pagination with `limit` and `offset`
+
+Skip results using `offset`:
+
+```ts
+const page2Users = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .orderBy(({ user }) => user.name, 'asc')
+    .limit(20)
+    .offset(20) // Skip first 20 results
+    .select(({ user }) => ({
+      id: user.id,
+      name: user.name,
+    }))
+)
+```
+
+## Composable Queries
+
+Build complex queries by composing smaller, reusable parts. This approach makes your queries more maintainable and allows for better performance through caching.
+
+### Conditional Query Building
+
+Build queries based on runtime conditions:
+
+```ts
+import { Query, eq } from '@tanstack/db'
+
+function buildUserQuery(options: { activeOnly?: boolean; limit?: number }) {
+  let query = new Query().from({ user: usersCollection })
+  
+  if (options.activeOnly) {
+    query = query.where(({ user }) => eq(user.active, true))
+  }
+  
+  if (options.limit) {
+    query = query.limit(options.limit)
+  }
+  
+  return query.select(({ user }) => ({
+    id: user.id,
+    name: user.name,
+  }))
+}
+
+const activeUsers = createLiveQueryCollection(buildUserQuery({ activeOnly: true, limit: 10 }))
+```
+
+### Caching Intermediate Results
+
+The result of a live query collection is a collection itself, and will automatically update when the underlying data changes. This means that you can use the result of a live query collection as a source in another live query collection. This pattern is useful for building complex queries where you want to cache intermediate results to make further queries faster.
+
+```ts
+// Base query for active users
+const activeUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+)
+
+// Query that depends on active users
+const activeUserPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ user: activeUsers })
+    .join({ post: postsCollection }, ({ user, post }) => 
+      eq(user.id, post.userId)
+    )
+    .select(({ user, post }) => ({
+      userName: user.name,
+      postTitle: post.title,
+    }))
+)
+```
+
+### Reusable Query Definitions
+
+You can use the `Query` class to create reusable query definitions. This is useful for building complex queries where you want to reuse the same query builder instance multiple times throughout your application.
+
+```ts
+import { Query, eq } from '@tanstack/db'
+
+// Create a reusable query builder
+const userQuery = new Query()
+  .from({ user: usersCollection })
+  .where(({ user }) => eq(user.active, true))
+
+// Use it in different contexts
+const activeUsers = createLiveQueryCollection({
+  query: userQuery.select(({ user }) => ({
+    id: user.id,
+    name: user.name,
+  }))
+})
+
+// Or as a subquery
+const userPosts = createLiveQueryCollection((q) =>
+  q
+    .from({ activeUser: userQuery })
+    .join({ post: postsCollection }, ({ activeUser, post }) => 
+      eq(activeUser.id, post.userId)
+    )
+)
+```
+
+### Reusable Callback Functions
+
+Creating reusable query logic is a common pattern that improves code organization and maintainability. The recommended approach is to use callback functions with the `Ref<T>` type rather than trying to type `QueryBuilder` instances directly.
+
+#### The Recommended Pattern
+
+Use `Ref<MyType>` to create reusable filter and transform functions:
+
+```ts
+import type { Ref } from '@tanstack/db'
+import { eq, gt, and } from '@tanstack/db'
+
+// Create reusable filter callbacks
+const isActiveUser = ({ user }: { user: Ref<User> }) =>
+  eq(user.active, true)
+
+const isAdultUser = ({ user }: { user: Ref<User> }) =>
+  gt(user.age, 18)
+
+const isActiveAdult = ({ user }: { user: Ref<User> }) =>
+  and(isActiveUser({ user }), isAdultUser({ user }))
+
+// Use them in queries - they work seamlessly with .where()
+const activeAdults = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(isActiveUser)
+      .where(isAdultUser)
+      .select(({ user }) => ({
+        id: user.id,
+        name: user.name,
+        age: user.age,
+      }))
+}))
+```
+
+The callback signature `({ user }: { user: Ref<User> }) => Expression` matches exactly what `.where()` expects, making it type-safe and composable.
+
+#### Chaining Multiple Filters
+
+You can chain multiple reusable filters:
+
+```tsx
+import { useLiveQuery } from '@tanstack/react-db'
+
+const { data } = useLiveQuery((q) => {
+  return q
+    .from({ item: itemsCollection })
+    .where(({ item }) => eq(item.id, 1))
+    .where(activeItemFilter)      // Reusable filter 1
+    .where(verifiedItemFilter)     // Reusable filter 2
+    .select(({ item }) => ({ ...item }))
+}, [])
+```
+
+#### Using with Different Aliases
+
+The pattern works with any table alias:
+
+```ts
+const activeFilter = ({ item }: { item: Ref<Item> }) =>
+  eq(item.active, true)
+
+// Works with any alias name
+const query1 = new Query()
+  .from({ item: itemsCollection })
+  .where(activeFilter)
+
+const query2 = new Query()
+  .from({ i: itemsCollection })
+  .where(({ i }) => activeFilter({ item: i }))  // Map the alias
+```
+
+#### Callbacks with Multiple Tables
+
+For queries with joins, create callbacks that accept multiple refs:
+
+```ts
+const isHighValueCustomer = ({ user, order }: {
+  user: Ref<User>
+  order: Ref<Order>
+}) => and(
+  eq(user.active, true),
+  gt(order.amount, 1000)
+)
+
+// Use directly in where clause
+const highValueCustomers = createCollection(liveQueryCollectionOptions({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .join({ order: ordersCollection }, ({ user, order }) =>
+        eq(user.id, order.userId)
+      )
+      .where(isHighValueCustomer)
+      .select(({ user, order }) => ({
+        userName: user.name,
+        orderAmount: order.amount,
+      }))
+}))
+```
+
+#### Why Not Type QueryBuilder?
+
+You might be tempted to create functions that accept and return `QueryBuilder`:
+
+```ts
+// ❌ Not recommended - overly complex typing
+const applyFilters = <T extends QueryBuilder<unknown>>(query: T): T => {
+  return query.where(({ item }) => eq(item.active, true))
+}
+```
+
+This approach has several issues:
+
+1. **Complex Types**: `QueryBuilder<T>` generic represents the entire query context including base schema, current schema, joins, result types, etc.
+2. **Type Inference**: The type changes with every method call, making it impractical to type manually
+3. **Limited Flexibility**: Hard to compose multiple filters or use with different table aliases
+
+Instead, use callback functions that work with the `.where()`, `.select()`, and other query methods directly.
+
+#### Reusable Select Transformations
+
+You can also create reusable select projections:
+
+```ts
+const basicUserInfo = ({ user }: { user: Ref<User> }) => ({
+  id: user.id,
+  name: user.name,
+  email: user.email,
+})
+
+const userWithStats = ({ user }: { user: Ref<User> }) => ({
+  ...basicUserInfo({ user }),
+  isAdult: gt(user.age, 18),
+  isActive: eq(user.active, true),
+})
+
+const users = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .select(userWithStats)
+)
+```
+
+This approach makes your query logic more modular, testable, and reusable across your application.
+
+## Reactive Effects (createEffect)
+
+While live query collections materialise query results into a collection you can subscribe to and iterate over, **reactive effects** let you respond to query result *changes* without materialising the full result set. Effects fire callbacks when rows enter, exit, or update within a query result.
+
+This is useful for triggering side effects — sending notifications, syncing to external systems, generating AI responses, updating counters — whenever your data changes.
+
+### When to Use Effects vs Live Query Collections
+
+| Use case | Approach |
+|----------|----------|
+| Display query results in UI | Live query collection + `useLiveQuery` |
+| React to changes (side effects) | `createEffect` / `useLiveQueryEffect` |
+| Track new items entering a result set | `createEffect` with `onEnter` |
+| Monitor items leaving a result set | `createEffect` with `onExit` |
+| Respond to updates within a result set | `createEffect` with `onUpdate` |
+
+### Basic Usage
+
+```ts
+import { createEffect, eq } from '@tanstack/db'
+
+const effect = createEffect({
+  query: (q) =>
+    q
+      .from({ msg: messagesCollection })
+      .where(({ msg }) => eq(msg.role, 'user')),
+  onEnter: async (event) => {
+    console.log('New user message:', event.value)
+    await generateResponse(event.value)
+  },
+})
+
+// Later: stop the effect
+await effect.dispose()
+```
+
+### Configuration
+
+`createEffect` accepts an `EffectConfig` object:
+
+```ts
+const effect = createEffect({
+  id: 'my-effect',            // Optional: auto-generated if not provided
+  query: (q) => q.from(...), // Query to watch
+  onEnter: (event, ctx) => { ... },  // Per-enter callback
+  onUpdate: (event, ctx) => { ... }, // Per-update callback
+  onExit: (event, ctx) => { ... },   // Per-exit callback
+  onBatch: (events, ctx) => { ... }, // Full batch callback
+  onError: (error, event) => { ... }, // Callback error handler
+  onSourceError: (error) => { ... },  // Source collection error callback
+  skipInitial: false,          // Skip deltas during initial load
+})
+```
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `id` | `string` (optional) | Identifier for debugging/tracing. Auto-generated as `live-query-effect-{n}` if not provided. |
+| `query` | `QueryBuilder` or function | The query to watch. Accepts the same builder function or `QueryBuilder` instance as live query collections. |
+| `onEnter` | `(event, ctx) => void \| Promise<void>` (optional) | Called once for each row entering the query result. |
+| `onUpdate` | `(event, ctx) => void \| Promise<void>` (optional) | Called once for each row updating within the query result. |
+| `onExit` | `(event, ctx) => void \| Promise<void>` (optional) | Called once for each row exiting the query result. |
+| `onBatch` | `(events, ctx) => void \| Promise<void>` (optional) | Called once per graph run with the full unfiltered batch of delta events. |
+| `onError` | `(error, event) => void` (optional) | Called when `onEnter`, `onUpdate`, `onExit`, or `onBatch` throws or rejects. |
+| `onSourceError` | `(error) => void` (optional) | Called when a source collection enters an error or cleaned-up state. The effect is automatically disposed after this fires. If not provided, the error is logged to `console.error`. |
+| `skipInitial` | `boolean` (optional) | When `true`, deltas from the initial data load are suppressed. Only subsequent changes fire handlers. Defaults to `false`. |
+
+### Delta Events
+
+Each delta event describes a single row change within the query result:
+
+```ts
+interface DeltaEvent<TRow, TKey> {
+  type: 'enter' | 'exit' | 'update'
+  key: TKey
+  value: TRow
+  previousValue?: TRow  // Only present for 'update' events
+}
+```
+
+| Event type | Meaning | `value` | `previousValue` |
+|------------|---------|---------|------------------|
+| `enter` | Row entered the query result | The new row | — |
+| `exit` | Row left the query result | The exiting row | — |
+| `update` | Row changed but stayed in the result | The new row | The row before the change |
+
+### Named Callbacks
+
+Use the callback that matches the query-result transition you care about:
+
+```ts
+// Only new rows entering the result
+createEffect({ onEnter: (event) => { ... }, ... })
+
+// Only rows leaving the result
+createEffect({ onExit: (event) => { ... }, ... })
+
+// Only rows that changed but stayed in the result
+createEffect({ onUpdate: (event) => { ... }, ... })
+
+// Inspect the full mixed batch for a graph run
+createEffect({ onBatch: (events) => { ... }, ... })
+```
+
+### Per-Row Callbacks vs `onBatch`
+
+You can provide per-row callbacks, `onBatch`, or both:
+
+```ts
+createEffect({
+  query: (q) => q.from({ user: usersCollection }),
+
+  onEnter: (event, ctx) => {
+    console.log(`enter: ${event.key}`)
+  },
+
+  onExit: (event, ctx) => {
+    console.log(`exit: ${event.key}`)
+  },
+
+  onBatch: (events, ctx) => {
+    console.log(`Batch of ${events.length} events`)
+  },
+})
+```
+
+Both handlers receive an `EffectContext`:
+
+```ts
+interface EffectContext {
+  effectId: string   // The effect's ID
+  signal: AbortSignal // Aborted when effect.dispose() is called
+}
+```
+
+The `signal` is useful for cancelling in-flight async work when the effect is disposed:
+
+```ts
+createEffect({
+  query: (q) => q.from({ task: tasksCollection }),
+  onEnter: async (event, ctx) => {
+    const result = await fetch('/api/process', {
+      method: 'POST',
+      body: JSON.stringify(event.value),
+      signal: ctx.signal, // Cancelled on dispose
+    })
+    // ...
+  },
+})
+```
+
+### Skipping Initial Data
+
+By default, effects process all data including the initial load. Set `skipInitial: true` to only respond to changes that happen after the initial sync:
+
+```ts
+// Only react to NEW messages, not existing ones
+const effect = createEffect({
+  query: (q) =>
+    q.from({ msg: messagesCollection })
+     .where(({ msg }) => eq(msg.role, 'user')),
+  skipInitial: true,
+  onEnter: async (event) => {
+    await sendNotification(event.value)
+  },
+})
+```
+
+### Error Handling
+
+Errors thrown by `onEnter`, `onUpdate`, `onExit`, or `onBatch` (sync or async) are caught and routed to `onError`. If no `onError` is provided, they are logged to `console.error`:
+
+```ts
+createEffect({
+  query: (q) => q.from({ order: ordersCollection }),
+  onEnter: async (event) => {
+    await processOrder(event.value)
+  },
+  onError: (error, event) => {
+    console.error(`Failed to process order ${event.key}:`, error)
+    reportToErrorTracker(error)
+  },
+})
+```
+
+If a source collection enters an error or cleaned-up state, the effect automatically disposes itself. Use `onSourceError` to handle this:
+
+```ts
+createEffect({
+  query: (q) => q.from({ data: dataCollection }),
+  onBatch: (events) => { ... },
+  onSourceError: (error) => {
+    console.warn('Data source failed, effect disposed:', error.message)
+  },
+})
+```
+
+### Disposal
+
+`createEffect` returns an `Effect` handle with a `dispose()` method:
+
+```ts
+const effect = createEffect({ ... })
+
+// Check if disposed
+console.log(effect.disposed) // false
+
+// Dispose: unsubscribes from sources, aborts the signal,
+// and waits for in-flight async handlers to settle
+await effect.dispose()
+
+console.log(effect.disposed) // true
+```
+
+`dispose()` is idempotent — calling it multiple times is safe. It returns a promise that resolves when all in-flight async handlers have settled (via `Promise.allSettled`).
+
+### Query Features
+
+Effects support the full query system — everything you can do with live query collections works with effects:
+
+```ts
+// Joins
+createEffect({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .join({ post: postsCollection }, ({ user, post }) =>
+        eq(user.id, post.userId)
+      )
+      .select(({ user, post }) => ({
+        userName: user.name,
+        postTitle: post.title,
+      })),
+  onEnter: (event) => {
+    console.log(`${event.value.userName} published "${event.value.postTitle}"`)
+  },
+})
+
+// Filters
+createEffect({
+  query: (q) =>
+    q
+      .from({ user: usersCollection })
+      .where(({ user }) => eq(user.role, 'admin')),
+  onEnter: (event) => {
+    console.log(`New admin: ${event.value.name}`)
+  },
+})
+
+// OrderBy + Limit (top-K window)
+createEffect({
+  query: (q) =>
+    q
+      .from({ score: scoresCollection })
+      .orderBy(({ score }) => score.points, 'desc')
+      .limit(10),
+  onBatch: (events) => {
+    // Fires once per graph run with all enter/update/exit events
+    for (const event of events) {
+      console.log(`${event.type}: ${event.value.name} (${event.value.points} pts)`)
+    }
+  },
+})
+```
+
+When using `orderBy` with `limit`, effects track a top-K window. You receive `enter` events when items enter the window and `exit` events when they're displaced.
+
+### Transaction Coalescing
+
+When multiple changes occur within a single transaction, effects coalesce them into a single batch. This means your handlers are called once with all the changes from that transaction, not once per individual write:
+
+```ts
+createEffect({
+  query: (q) => q.from({ item: itemsCollection }),
+  onBatch: (events) => {
+    // If 3 items are inserted in one transaction,
+    // this fires once with all 3 events
+    console.log(`${events.length} items added`)
+  },
+})
+```
+
+### Using with React
+
+The `useLiveQueryEffect` hook manages the effect lifecycle automatically — creating on mount, disposing on unmount, and recreating when dependencies change:
+
+```tsx
+import { useLiveQueryEffect } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+function ChatComponent({ channelId }: { channelId: string }) {
+  useLiveQueryEffect(
+    {
+      query: (q) =>
+        q
+          .from({ msg: messagesCollection })
+          .where(({ msg }) => eq(msg.channelId, channelId)),
+      skipInitial: true,
+      onEnter: async (event) => {
+        await playNotificationSound()
+      },
+    },
+    [channelId] // Recreate effect when channelId changes
+  )
+
+  return <div>...</div>
+}
+```
+
+The second argument is a dependency array (like `useEffect`). When dependencies change, the old effect is disposed and a new one is created with the updated config.
+
+### Complete Example
+
+Here's a more complete example showing an effect that monitors order status changes and sends notifications:
+
+```ts
+import { createEffect, eq } from '@tanstack/db'
+
+const orderEffect = createEffect({
+  id: 'order-status-monitor',
+  query: (q) =>
+    q
+      .from({ order: ordersCollection })
+      .join({ customer: customersCollection }, ({ order, customer }) =>
+        eq(order.customerId, customer.id)
+      )
+      .where(({ order }) => eq(order.status, 'shipped'))
+      .select(({ order, customer }) => ({
+        orderId: order.id,
+        customerEmail: customer.email,
+        trackingNumber: order.trackingNumber,
+      })),
+  skipInitial: true,
+
+  onEnter: async (event, ctx) => {
+    await sendShipmentEmail({
+      to: event.value.customerEmail,
+      orderId: event.value.orderId,
+      tracking: event.value.trackingNumber,
+      signal: ctx.signal,
+    })
+  },
+
+  onError: (error, event) => {
+    console.error(`Failed to notify for order ${event.key}:`, error)
+  },
+
+  onSourceError: (error) => {
+    alertOpsTeam('Order monitoring effect failed', error)
+  },
+})
+
+// On application shutdown
+await orderEffect.dispose()
+```
+
+## Expression Functions Reference
+
+The query system provides a comprehensive set of functions for filtering, transforming, and aggregating data.
+
+### Comparison Operators
+
+#### `eq(left, right)`
+Equality comparison:
+```ts
+eq(user.id, 1)
+eq(user.name, 'John')
+```
+
+#### `gt(left, right)`, `gte(left, right)`, `lt(left, right)`, `lte(left, right)`
+Numeric, string and date comparisons:
+```ts
+gt(user.age, 18)
+gte(user.salary, 50000)
+lt(user.createdAt, new Date('2024-01-01'))
+lte(user.rating, 5)
+```
+
+#### `inArray(value, array)`
+Check if a value is in an array:
+```ts
+inArray(user.id, [1, 2, 3])
+inArray(user.role, ['admin', 'moderator'])
+```
+
+#### `like(value, pattern)`, `ilike(value, pattern)`
+String pattern matching:
+```ts
+like(user.name, 'John%')    // Case-sensitive
+ilike(user.email, '%@gmail.com')  // Case-insensitive
+```
+
+#### `isUndefined(value)`, `isNull(value)`
+Check for missing vs null values:
+```ts
+// Check if a property is missing/undefined
+isUndefined(user.profile)
+
+// Check if a value is explicitly null
+isNull(user.profile)
+```
+
+These functions are particularly important when working with joins and optional properties, as they distinguish between:
+- `undefined`: The property is absent or not present
+- `null`: The property exists but is explicitly set to null
+
+**Example with joins:**
+```ts
+// Find users without a matching profile (left join resulted in undefined)
+const usersWithoutProfiles = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .leftJoin(
+      { profile: profilesCollection },
+      ({ user, profile }) => eq(user.id, profile.userId)
+    )
+    .where(({ profile }) => isUndefined(profile))
+)
+
+// Find users with explicitly null bio field
+const usersWithNullBio = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => isNull(user.bio))
+)
+```
+
+### Logical Operators
+
+#### `and(...conditions)`
+Combine conditions with AND logic:
+```ts
+and(
+  eq(user.active, true),
+  gt(user.age, 18),
+  eq(user.role, 'user')
+)
+```
+
+#### `or(...conditions)`
+Combine conditions with OR logic:
+```ts
+or(
+  eq(user.role, 'admin'),
+  eq(user.role, 'moderator')
+)
+```
+
+#### `not(condition)`
+Negate a condition:
+```ts
+not(eq(user.active, false))
+```
+
+### String Functions
+
+#### `upper(value)`, `lower(value)`
+Convert case:
+```ts
+upper(user.name)  // 'JOHN'
+lower(user.email) // 'john@example.com'
+```
+
+#### `length(value)`
+Get string or array length:
+```ts
+length(user.name)     // String length
+length(user.tags)     // Array length
+```
+
+#### `concat(...values)`
+Concatenate strings:
+```ts
+concat(user.firstName, ' ', user.lastName)
+concat('User: ', user.name, ' (', user.id, ')')
+```
+
+### Mathematical Functions
+
+#### `add(left, right)`
+Add two numbers:
+```ts
+add(user.salary, user.bonus)
+```
+
+#### `subtract(left, right)`
+Subtract two numbers:
+```ts
+subtract(user.salary, user.deductions)
+```
+
+#### `multiply(left, right)`
+Multiply two numbers:
+```ts
+multiply(item.price, item.quantity)
+```
+
+#### `divide(left, right)`
+Divide two numbers (returns `null` on divide-by-zero):
+```ts
+divide(order.total, order.itemCount)
+```
+
+#### Computed Columns in orderBy
+
+You can use math functions directly in `orderBy` to sort by computed values. This is useful for ranking algorithms that combine multiple factors:
+
+```ts
+import { subtract, multiply, divide } from '@tanstack/db'
+
+// HN-style ranking: balance rating with recency
+// Date.now() is captured when this query is created. Recreate the query if
+// you need the recency score to advance as time passes.
+const rankedRecipes = createLiveQueryCollection((q) =>
+  q
+    .from({ r: recipesCollection })
+    .orderBy(
+      ({ r }) =>
+        subtract(
+          multiply(r.rating, r.timesMade), // weighted rating
+          divide(
+            subtract(Date.now(), r.lastMadeAt), // time since last made
+            3600000 * 24 // convert ms to days
+          )
+        ),
+      'desc'
+    )
+    .limit(20)
+)
+```
+
+> **Note:** When using computed expressions in `orderBy` with `limit()`, lazy loading optimization is skipped (all matching data is loaded first, then sorted). For large collections where this matters, consider pre-computing the ranking score as a stored field.
+
+### Utility Functions
+
+#### `coalesce(...values)`
+Return the first non-null/undefined value:
+```ts
+coalesce(user.displayName, user.name, 'Unknown')
+```
+
+This is useful for display fallbacks when the stored value is `null` or
+`undefined`:
+
+```ts
+.select(({ document }) => ({
+  ...document,
+  displayTitle: coalesce(document.title, 'Untitled document'),
+}))
+```
+
+If you also need to treat another value, such as an empty string, as missing,
+use `caseWhen` to express that condition explicitly.
+
+#### `caseWhen(condition, value, ...)`
+Return the value for the first matching condition, similar to SQL `CASE WHEN`.
+Arguments are provided as condition/value pairs followed by an optional default
+value:
+
+```ts
+caseWhen(gt(user.age, 65), 'senior', gt(user.age, 18), 'adult', 'minor')
+```
+
+If no condition matches and no default value is provided, scalar expressions
+return `null`.
+
+Use `caseWhen` when a computed field needs conditional logic that cannot be
+represented with `coalesce` alone. For example, to display a fallback for both
+`null`/`undefined` and empty-string titles:
+
+```ts
+.select(({ document }) => ({
+  ...document,
+  displayTitle: caseWhen(
+    eq(coalesce(document.title, ''), ''),
+    'Untitled document',
+    document.title,
+  ),
+}))
+```
+
+`caseWhen` can also be used in expression contexts such as `select`, `where`,
+`orderBy`, `groupBy`, `having`, and equality join operands.
+
+### Aggregate Functions
+
+#### `count(value)`
+Count non-null values:
+```ts
+count(user.id)        // Count all users
+count(user.postId)    // Count users with posts
+```
+
+#### `sum(value)`
+Sum numeric values:
+```ts
+sum(order.amount)
+sum(user.salary)
+```
+
+#### `avg(value)`
+Calculate average:
+```ts
+avg(user.salary)
+avg(order.amount)
+```
+
+#### `min(value)`, `max(value)`
+Find minimum and maximum values:
+```ts
+min(user.salary)
+max(order.amount)
+```
+
+### Function Composition
+
+Functions can be composed and chained:
+
+```ts
+// Complex condition
+and(
+  eq(user.active, true),
+  or(
+    gt(user.age, 25),
+    eq(user.role, 'admin')
+  ),
+  not(inArray(user.id, bannedUserIds))
+)
+
+// Complex transformation
+concat(
+  upper(user.firstName),
+  ' ',
+  upper(user.lastName),
+  ' (',
+  user.id,
+  ')'
+)
+
+// Complex aggregation
+avg(add(user.salary, coalesce(user.bonus, 0)))
+```
+
+## Functional Variants
+
+The functional variant API provides an alternative to the standard API, offering more flexibility for complex transformations. With functional variants, the callback functions contain actual code that gets executed to perform the operation, giving you the full power of JavaScript at your disposal.
+
+> [!WARNING]
+> The functional variant API cannot be optimized by the query optimizer or use collection indexes. It is intended for use in rare cases where the standard API is not sufficient.
+
+### Functional Select
+
+> [!WARNING]
+> `fn.select()` cannot be used with `groupBy()`. The `groupBy` operator needs to statically analyze the `select` clause to discover which aggregate functions to compute, which is not possible with an opaque JavaScript function. Use the standard `.select()` API for grouped queries.
+
+Use `fn.select()` for complex transformations with JavaScript logic:
+
+```ts
+const userProfiles = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .fn.select((row) => ({
+      id: row.user.id,
+      displayName: `${row.user.firstName} ${row.user.lastName}`,
+      salaryTier: row.user.salary > 100000 ? 'senior' : 'junior',
+      emailDomain: row.user.email.split('@')[1],
+      isHighEarner: row.user.salary > 75000,
+    }))
+)
+```
+
+### Functional Where
+
+Use `fn.where()` for complex filtering logic:
+
+```ts
+const specialUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .fn.where((row) => {
+      const user = row.user
+      return user.active && 
+             (user.age > 25 || user.role === 'admin') &&
+             user.email.includes('@company.com')
+    })
+)
+```
+
+### Functional Having
+
+Use `fn.having()` for complex aggregation filtering:
+
+```ts
+const highValueCustomers = createLiveQueryCollection((q) =>
+  q
+    .from({ order: ordersCollection })
+    .groupBy(({ order }) => order.customerId)
+    .select(({ order }) => ({
+      customerId: order.customerId,
+      totalSpent: sum(order.amount),
+      orderCount: count(order.id),
+    }))
+    .fn.having(({ $selected }) => {
+      return $selected.totalSpent > 1000 && $selected.orderCount >= 3
+    })
+)
+```
+
+### Complex Transformations
+
+Functional variants excel at complex data transformations:
+
+```ts
+const userProfiles = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .fn.select((row) => {
+      const user = row.user
+      const fullName = `${user.firstName} ${user.lastName}`.trim()
+      const emailDomain = user.email.split('@')[1]
+      const ageGroup = user.age < 25 ? 'young' : user.age < 50 ? 'adult' : 'senior'
+      
+      return {
+        userId: user.id,
+        displayName: fullName || user.name,
+        contactInfo: {
+          email: user.email,
+          domain: emailDomain,
+          isCompanyEmail: emailDomain === 'company.com'
+        },
+        demographics: {
+          age: user.age,
+          ageGroup: ageGroup,
+          isAdult: user.age >= 18
+        },
+        status: user.active ? 'active' : 'inactive',
+        profileStrength: fullName && user.email && user.age ? 'complete' : 'incomplete'
+      }
+    })
+)
+```
+
+### Type Inference
+
+Functional variants maintain full TypeScript support:
+
+```ts
+const processedUsers = createLiveQueryCollection((q) =>
+  q
+    .from({ user: usersCollection })
+    .fn.select((row): ProcessedUser => ({
+      id: row.user.id,
+      name: row.user.name.toUpperCase(),
+      age: row.user.age,
+      ageGroup: row.user.age < 25 ? 'young' : row.user.age < 50 ? 'adult' : 'senior',
+    }))
+)
+```
+
+### When to Use Functional Variants
+
+Use functional variants when you need:
+- Complex JavaScript logic that can't be expressed with built-in functions
+- Integration with external libraries or utilities
+- Full JavaScript power for custom operations
+
+The callbacks in functional variants are actual JavaScript functions that get executed, unlike the standard API which uses declarative expressions. This gives you complete control over the logic but comes with the trade-off of reduced optimization opportunities.
+
+However, prefer the standard API when possible, as it provides better performance and optimization opportunities.
diff --git a/mintlify/db/guides/mutations.md b/mintlify/db/guides/mutations.md
new file mode 100644
index 000000000..60f5dcea9
--- /dev/null
+++ b/mintlify/db/guides/mutations.md
@@ -0,0 +1,1682 @@
+---
+title: Mutations
+id: mutations
+---
+
+# TanStack DB Mutations
+
+TanStack DB provides a powerful mutation system that enables optimistic updates with automatic state management. This system is built around a pattern of **optimistic mutation → backend persistence → sync back → confirmed state**. This creates a highly responsive user experience while maintaining data consistency and being easy to reason about.
+
+Local changes are applied immediately as optimistic state, then persisted to your backend, and finally the optimistic state is replaced by the confirmed server state once it syncs back.
+
+```tsx
+// Define a collection with a mutation handler
+const todoCollection = createCollection({
+  id: "todos",
+  onUpdate: async ({ transaction }) => {
+    const mutation = transaction.mutations[0]
+    await api.todos.update(mutation.original.id, mutation.changes)
+  },
+})
+
+// Apply an optimistic update
+todoCollection.update(todo.id, (draft) => {
+  draft.completed = true
+})
+```
+
+This pattern extends the Redux/Flux unidirectional data flow beyond the client to include the server:
+
+<figure>
+  <a href="https://raw.githubusercontent.com/TanStack/db/main/docs/unidirectional-data-flow.lg.png" target="_blank">
+    <img src="https://raw.githubusercontent.com/TanStack/db/main/docs/unidirectional-data-flow.png" />
+  </a>
+</figure>
+
+With an instant inner loop of optimistic state, superseded in time by the slower outer loop of persisting to the server and syncing the updated server state back into the collection.
+
+### Simplified Mutations vs Traditional Approaches
+
+TanStack DB's mutation system eliminates much of the boilerplate required for optimistic updates in traditional approaches. Compare the difference:
+
+**Before (TanStack Query with manual optimistic updates):**
+
+```typescript
+const addTodoMutation = useMutation({
+  mutationFn: async (newTodo) => api.todos.create(newTodo),
+  onMutate: async (newTodo) => {
+    await queryClient.cancelQueries({ queryKey: ['todos'] })
+    const previousTodos = queryClient.getQueryData(['todos'])
+    queryClient.setQueryData(['todos'], (old) => [...(old || []), newTodo])
+    return { previousTodos }
+  },
+  onError: (err, newTodo, context) => {
+    queryClient.setQueryData(['todos'], context.previousTodos)
+  },
+  onSettled: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+```
+
+**After (TanStack DB):**
+
+```typescript
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => api.todos.getAll(),
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    onInsert: async ({ transaction }) => {
+      await Promise.all(
+        transaction.mutations.map((mutation) =>
+          api.todos.create(mutation.modified)
+        )
+      )
+    },
+  })
+)
+
+// Simple mutation - no boilerplate!
+todoCollection.insert({
+  id: crypto.randomUUID(),
+  text: '🔥 Make app faster',
+  completed: false,
+})
+```
+
+The benefits:
+- ✅ Automatic optimistic updates
+- ✅ Automatic rollback on error
+- ✅ No manual cache manipulation
+- ✅ Type-safe mutations
+
+## Table of Contents
+
+- [Mutation Approaches](#mutation-approaches)
+- [Mutation Lifecycle](#mutation-lifecycle)
+- [Collection Write Operations](#collection-write-operations)
+- [Operation Handlers](#operation-handlers)
+- [Creating Custom Actions](#creating-custom-actions)
+- [Manual Transactions](#manual-transactions)
+- [Paced Mutations](#paced-mutations)
+- [Mutation Merging](#mutation-merging)
+- [Controlling Optimistic Behavior](#controlling-optimistic-behavior)
+- [Transaction States](#transaction-states)
+- [Handling Temporary IDs](#handling-temporary-ids)
+
+## Mutation Approaches
+
+TanStack DB provides different approaches to mutations, each suited to different use cases:
+
+### Collection-Level Mutations
+
+Collection-level mutations (`insert`, `update`, `delete`) are designed for **direct state manipulation** of a single collection. These are the simplest way to make changes and work well for straightforward CRUD operations.
+
+```tsx
+// Direct state change
+todoCollection.update(todoId, (draft) => {
+  draft.completed = true
+  draft.completedAt = new Date()
+})
+```
+
+Use collection-level mutations when:
+- You're making simple CRUD operations on a single collection
+- The state changes are straightforward and match what the server will store
+
+You can use `metadata` to annotate these operations and customize behavior in your handlers:
+
+```tsx
+// Annotate with metadata
+todoCollection.update(
+  todoId,
+  { metadata: { intent: 'complete' } },
+  (draft) => {
+    draft.completed = true
+  }
+)
+
+// Use metadata in handler
+onUpdate: async ({ transaction }) => {
+  const mutation = transaction.mutations[0]
+
+  if (mutation.metadata?.intent === 'complete') {
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.todos.complete(mutation.original.id)
+      )
+    )
+  } else {
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.todos.update(mutation.original.id, mutation.changes)
+      )
+    )
+  }
+}
+```
+
+### Intent-Based Mutations with Custom Actions
+
+For more complex scenarios, use `createOptimisticAction` to create **intent-based mutations** that capture specific user actions.
+
+```tsx
+// Intent: "like this post"
+const likePost = createOptimisticAction<string>({
+  onMutate: (postId) => {
+    // Optimistic guess at the change
+    postCollection.update(postId, (draft) => {
+      draft.likeCount += 1
+      draft.likedByMe = true
+    })
+  },
+  mutationFn: async (postId) => {
+    // Send the intent to the server
+    await api.posts.like(postId)
+    // Server determines actual state changes
+    await postCollection.utils.refetch()
+  },
+})
+
+// Use it.
+likePost(postId)
+```
+
+Use custom actions when:
+- You need to mutate **multiple collections** in a single transaction
+- The optimistic change is a **guess** at how the server will transform the data
+- You want to send **user intent** to the backend rather than exact state changes
+- The server performs complex logic, calculations, or side effects
+- You want a clean, reusable mutation that captures a specific operation
+
+Custom actions provide the cleanest way to capture specific types of mutations as named operations in your application. While you can achieve similar results using metadata with collection-level mutations, custom actions make the intent explicit and keep related logic together.
+
+**When to use each:**
+
+- **Collection-level mutations** (`collection.update`): Simple CRUD operations on a single collection
+- **`createOptimisticAction`**: Intent-based operations, multi-collection mutations, immediately committed
+- **Bypass the mutation system**: Use your existing mutation logic without rewriting
+
+### Bypass the Mutation System
+
+If you already have mutation logic in an existing system and don't want to rewrite it, you can **completely bypass** TanStack DB's mutation system and use your existing patterns.
+
+With this approach, you write to the server like normal using your existing logic, then use your collection's mechanism for refetching or syncing data to await the server write. After the sync completes, the collection will have the updated server data and you can render the new state, hide loading indicators, show success messages, navigate to a new page, etc.
+
+```tsx
+// Call your backend directly with your existing logic
+const handleUpdateTodo = async (todoId, changes) => {
+  await api.todos.update(todoId, changes)
+
+  // Wait for the server change to load into the collection
+  await todoCollection.utils.refetch()
+
+  // Now you know the new data is loaded and can render it or hide loaders
+}
+
+// With Electric
+const handleUpdateTodo = async (todoId, changes) => {
+  const { txid } = await api.todos.update(todoId, changes)
+
+  // Wait for this specific transaction to sync into the collection
+  await todoCollection.utils.awaitTxId(txid)
+
+  // Now the server change is loaded and you can update UI accordingly
+}
+```
+
+Use this approach when:
+- You have existing mutation logic you don't want to rewrite
+- You're comfortable with your current mutation patterns
+- You want to use TanStack DB only for queries and state management
+
+How to sync changes back:
+- **QueryCollection**: Manually refetch with `collection.utils.refetch()` to reload data from the server
+- **ElectricCollection**: Use `collection.utils.awaitTxId(txid)` to wait for a specific transaction to sync
+- **Other sync systems**: Wait for your sync mechanism to update the collection
+
+## Mutation Lifecycle
+
+The mutation lifecycle follows a consistent pattern across all mutation types:
+
+1. **Optimistic state applied**: The mutation is immediately applied to the local collection as optimistic state
+2. **Handler invoked**: The appropriate handler — either `mutationFn` or a Collection handler (`onInsert`, `onUpdate`, or `onDelete`) — is called to persist the change
+3. **Backend persistence**: Your handler persists the data to your backend
+4. **Sync back**: The handler ensures server writes have synced back to the collection
+5. **Optimistic state dropped**: Once synced, the optimistic state is replaced by the confirmed server state
+
+```tsx
+// Step 1: Optimistic state applied immediately
+todoCollection.update(todo.id, (draft) => {
+  draft.completed = true
+})
+// UI updates instantly with optimistic state
+
+// Step 2-3: onUpdate handler persists to backend
+// Step 4: Handler waits for sync back
+// Step 5: Optimistic state replaced by server state
+```
+
+If the handler throws an error during persistence, the optimistic state is automatically rolled back.
+
+## Collection Write Operations
+
+Collections support three core write operations: `insert`, `update`, and `delete`. Each operation applies optimistic state immediately and triggers the corresponding operation handler.
+
+### Insert
+
+Add new items to a collection:
+
+```typescript
+// Insert a single item
+todoCollection.insert({
+  id: "1",
+  text: "Buy groceries",
+  completed: false
+})
+
+// Insert multiple items
+todoCollection.insert([
+  { id: "1", text: "Buy groceries", completed: false },
+  { id: "2", text: "Walk dog", completed: false },
+])
+
+// Insert with metadata
+todoCollection.insert(
+  { id: "1", text: "Custom item", completed: false },
+  { metadata: { source: "import" } }
+)
+
+// Insert without optimistic updates
+todoCollection.insert(
+  { id: "1", text: "Server-validated item", completed: false },
+  { optimistic: false }
+)
+```
+
+**Returns**: A `Transaction` object that you can use to track the mutation's lifecycle.
+
+### Update
+
+Modify existing items using an immutable draft pattern:
+
+```typescript
+// Update a single item
+todoCollection.update(todo.id, (draft) => {
+  draft.completed = true
+})
+
+// Update multiple items
+todoCollection.update([todo1.id, todo2.id], (drafts) => {
+  drafts.forEach((draft) => {
+    draft.completed = true
+  })
+})
+
+// Update with metadata
+todoCollection.update(
+  todo.id,
+  { metadata: { reason: "user update" } },
+  (draft) => {
+    draft.text = "Updated text"
+  }
+)
+
+// Update without optimistic updates
+todoCollection.update(
+  todo.id,
+  { optimistic: false },
+  (draft) => {
+    draft.status = "server-validated"
+  }
+)
+```
+
+**Parameters**:
+- `key` or `keys`: The item key(s) to update
+- `options` (optional): Configuration object with `metadata` and/or `optimistic` flags
+- `updater`: Function that receives a draft to mutate
+
+**Returns**: A `Transaction` object that you can use to track the mutation's lifecycle.
+
+> [!IMPORTANT]
+> The `updater` function uses an Immer-like pattern to capture changes as immutable updates. You must not reassign the draft parameter itself—only mutate its properties.
+
+### Delete
+
+Remove items from a collection:
+
+```typescript
+// Delete a single item
+todoCollection.delete(todo.id)
+
+// Delete multiple items
+todoCollection.delete([todo1.id, todo2.id])
+
+// Delete with metadata
+todoCollection.delete(todo.id, {
+  metadata: { reason: "completed" }
+})
+
+// Delete without optimistic updates
+todoCollection.delete(todo.id, { optimistic: false })
+```
+
+**Parameters**:
+- `key` or `keys`: The item key(s) to delete
+- `options` (optional): Configuration object with `metadata` and/or `optimistic` flags
+
+**Returns**: A `Transaction` object that you can use to track the mutation's lifecycle.
+
+## Operation Handlers
+
+Operation handlers are functions you provide when creating a collection that handle persisting mutations to your backend. Each collection can define three optional handlers: `onInsert`, `onUpdate`, and `onDelete`.
+
+### Handler Signature
+
+All operation handlers receive an object with the following properties:
+
+```typescript
+type OperationHandler = (params: {
+  transaction: Transaction
+  collection: Collection
+}) => Promise<any> | any
+```
+
+The `transaction` object contains:
+- `mutations`: Array of mutation objects, each with:
+  - `collection`: The collection being mutated
+  - `type`: The mutation type (`'insert'`, `'update'`, or `'delete'`)
+  - `original`: The original item (for updates and deletes)
+  - `modified`: The modified item (for inserts and updates)
+  - `changes`: The changes object (for updates)
+  - `key`: The item key
+  - `metadata`: Optional metadata attached to the mutation
+
+### Defining Operation Handlers
+
+Define handlers when creating a collection:
+
+```typescript
+const todoCollection = createCollection({
+  id: "todos",
+  // ... other options
+
+  onInsert: async ({ transaction }) => {
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.todos.create(mutation.modified)
+      )
+    )
+  },
+
+  onUpdate: async ({ transaction }) => {
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.todos.update(mutation.original.id, mutation.changes)
+      )
+    )
+  },
+
+  onDelete: async ({ transaction }) => {
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.todos.delete(mutation.original.id)
+      )
+    )
+  },
+})
+```
+
+> [!IMPORTANT]
+> Operation handlers must not resolve until the server changes have synced back to the collection. Different collection types provide different patterns to ensure this happens correctly.
+
+### Collection-Specific Handler Patterns
+
+Different collection types have specific patterns for their handlers:
+
+**QueryCollection** - automatically refetches after handler completes:
+```typescript
+onUpdate: async ({ transaction }) => {
+  await Promise.all(
+    transaction.mutations.map((mutation) =>
+      api.todos.update(mutation.original.id, mutation.changes)
+    )
+  )
+  // Automatic refetch happens after handler completes
+}
+```
+
+**ElectricCollection** - return txid(s) to track sync:
+```typescript
+onUpdate: async ({ transaction }) => {
+  const txids = await Promise.all(
+    transaction.mutations.map(async (mutation) => {
+      const response = await api.todos.update(mutation.original.id, mutation.changes)
+      return response.txid
+    })
+  )
+  return { txid: txids }
+}
+```
+
+### Generic Mutation Functions
+
+You can define a single mutation function for your entire app:
+
+```typescript
+import type { MutationFn } from "@tanstack/react-db"
+
+const mutationFn: MutationFn = async ({ transaction }) => {
+  const response = await api.mutations.batch(transaction.mutations)
+
+  if (!response.ok) {
+    throw new Error(`HTTP Error: ${response.status}`)
+  }
+}
+
+// Use in collections
+const todoCollection = createCollection({
+  id: "todos",
+  onInsert: mutationFn,
+  onUpdate: mutationFn,
+  onDelete: mutationFn,
+})
+```
+
+### Schema Validation in Mutation Handlers
+
+When a schema is configured for a collection, TanStack DB automatically validates and transforms data during mutations. The mutation handlers receive the **transformed data** (TOutput), not the raw input.
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  created_at: z.string().transform(val => new Date(val))  // TInput: string, TOutput: Date
+})
+
+const collection = createCollection({
+  schema: todoSchema,
+  onInsert: async ({ transaction }) => {
+    const item = transaction.mutations[0].modified
+
+    // item.created_at is already a Date object (TOutput)
+    console.log(item.created_at instanceof Date)  // true
+
+    // If your API needs a string, serialize it
+    await api.todos.create({
+      ...item,
+      created_at: item.created_at.toISOString()  // Date → string
+    })
+  }
+})
+
+// User provides string (TInput)
+collection.insert({
+  id: "1",
+  text: "Task",
+  created_at: "2024-01-01T00:00:00Z"
+})
+```
+
+**Key points:**
+- Schema validation happens **before** mutation handlers are called
+- Handlers receive **TOutput** (transformed data)
+- If your backend needs a different format, serialize in the handler
+- Schema validation errors throw `SchemaValidationError` before handlers run
+
+For comprehensive documentation on schema validation and transformations, see the [Schemas guide](/db/guides/schemas).
+
+## Creating Custom Actions
+
+For more complex mutation patterns, use `createOptimisticAction` to create custom actions with full control over the mutation lifecycle.
+
+### Basic Action
+
+Create an action that combines mutation logic with persistence:
+
+```tsx
+import { createOptimisticAction } from "@tanstack/react-db"
+
+const addTodo = createOptimisticAction<string>({
+  onMutate: (text) => {
+    // Apply optimistic state
+    todoCollection.insert({
+      id: crypto.randomUUID(),
+      text,
+      completed: false,
+    })
+  },
+  mutationFn: async (text, params) => {
+    // Persist to backend
+    const response = await fetch("/api/todos", {
+      method: "POST",
+      body: JSON.stringify({ text, completed: false }),
+    })
+    const result = await response.json()
+
+    // Wait for sync back
+    await todoCollection.utils.refetch()
+
+    return result
+  },
+})
+
+// Use in components
+const Todo = () => {
+  const handleClick = () => {
+    addTodo("🔥 Make app faster")
+  }
+
+  return <Button onClick={handleClick} />
+}
+```
+
+### Type-Safe Actions with Schema Validation
+
+For better type safety and runtime validation, you can use schema validation libraries like Zod, Valibot, or others. Here's an example using Zod:
+
+```tsx
+import { createOptimisticAction } from "@tanstack/react-db"
+import { z } from "zod"
+
+// Define a schema for the action parameters
+const addTodoSchema = z.object({
+  text: z.string().min(1, "Todo text cannot be empty"),
+  priority: z.enum(["low", "medium", "high"]).optional(),
+})
+
+// Use the schema's inferred type for the generic
+const addTodo = createOptimisticAction<z.infer<typeof addTodoSchema>>({
+  onMutate: (params) => {
+    // Validate parameters at runtime
+    const validated = addTodoSchema.parse(params)
+
+    // Apply optimistic state
+    todoCollection.insert({
+      id: crypto.randomUUID(),
+      text: validated.text,
+      priority: validated.priority ?? "medium",
+      completed: false,
+    })
+  },
+  mutationFn: async (params) => {
+    // Parameters are already validated
+    const validated = addTodoSchema.parse(params)
+
+    const response = await fetch("/api/todos", {
+      method: "POST",
+      body: JSON.stringify({
+        text: validated.text,
+        priority: validated.priority ?? "medium",
+        completed: false,
+      }),
+    })
+    const result = await response.json()
+
+    await todoCollection.utils.refetch()
+    return result
+  },
+})
+
+// Use with type-safe parameters
+const Todo = () => {
+  const handleClick = () => {
+    addTodo({
+      text: "🔥 Make app faster",
+      priority: "high",
+    })
+  }
+
+  return <Button onClick={handleClick} />
+}
+```
+
+This pattern works with any validation library (Zod, Valibot, Yup, etc.) and provides:
+- ✅ Runtime validation of parameters
+- ✅ Type safety from inferred types
+- ✅ Clear error messages for invalid inputs
+- ✅ Single source of truth for parameter shape
+
+### Complex Multi-Collection Actions
+
+Actions can mutate multiple collections:
+
+```tsx
+const createProject = createOptimisticAction<{
+  name: string
+  ownerId: string
+}>({
+  onMutate: ({ name, ownerId }) => {
+    const projectId = crypto.randomUUID()
+
+    // Insert project
+    projectCollection.insert({
+      id: projectId,
+      name,
+      ownerId,
+      createdAt: new Date(),
+    })
+
+    // Update user's project count
+    userCollection.update(ownerId, (draft) => {
+      draft.projectCount += 1
+    })
+  },
+  mutationFn: async ({ name, ownerId }) => {
+    const response = await api.projects.create({ name, ownerId })
+
+    // Wait for both collections to sync
+    await Promise.all([
+      projectCollection.utils.refetch(),
+      userCollection.utils.refetch(),
+    ])
+
+    return response
+  },
+})
+```
+
+### Action Parameters
+
+The `mutationFn` receives additional parameters for advanced use cases:
+
+```tsx
+const updateTodo = createOptimisticAction<{
+  id: string
+  changes: Partial<Todo>
+}>({
+  onMutate: ({ id, changes }) => {
+    todoCollection.update(id, (draft) => {
+      Object.assign(draft, changes)
+    })
+  },
+  mutationFn: async ({ id, changes }, params) => {
+    // params.transaction contains the transaction object
+    // params.signal is an AbortSignal for cancellation
+
+    const response = await api.todos.update(id, changes, {
+      signal: params.signal,
+    })
+
+    await todoCollection.utils.refetch()
+    return response
+  },
+})
+```
+
+## Manual Transactions
+
+For maximum control over transaction lifecycles, create transactions manually using `createTransaction`. This approach allows you to batch multiple mutations, implement custom commit workflows, or create transactions that span multiple user interactions.
+
+### Basic Manual Transaction
+
+```ts
+import { createTransaction } from "@tanstack/react-db"
+
+const addTodoTx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    // Persist all mutations to backend
+    await Promise.all(
+      transaction.mutations.map((mutation) =>
+        api.saveTodo(mutation.modified)
+      )
+    )
+  },
+})
+
+// Apply first change
+addTodoTx.mutate(() =>
+  todoCollection.insert({
+    id: "1",
+    text: "First todo",
+    completed: false
+  })
+)
+
+// User reviews change...
+
+// Apply another change
+addTodoTx.mutate(() =>
+  todoCollection.insert({
+    id: "2",
+    text: "Second todo",
+    completed: false
+  })
+)
+
+// User commits when ready (e.g., when they hit save)
+addTodoTx.commit()
+```
+
+### Transaction Configuration
+
+Manual transactions accept the following options:
+
+```typescript
+createTransaction({
+  id?: string,              // Optional unique identifier for the transaction
+  autoCommit?: boolean,     // Whether to automatically commit after mutate()
+  mutationFn: MutationFn,   // Function to persist mutations
+  metadata?: Record<string, unknown>, // Optional custom metadata
+})
+```
+
+**autoCommit**:
+- `true` (default): Transaction commits immediately after each `mutate()` call
+- `false`: Transaction waits for explicit `commit()` call
+
+### Transaction Methods
+
+Manual transactions provide several methods:
+
+```typescript
+// Apply mutations within a transaction
+tx.mutate(() => {
+  collection.insert(item)
+  collection.update(key, updater)
+})
+
+// Commit the transaction
+await tx.commit()
+
+// Manually rollback changes (e.g., user cancels a form)
+// Note: Rollback happens automatically if mutationFn throws an error
+tx.rollback()
+```
+
+When you call collection methods inside `tx.mutate()`, the mutations are
+captured by the manual transaction. The collection's `onInsert`, `onUpdate`, and
+`onDelete` handlers are not invoked for those mutations; the
+manual transaction's `mutationFn` is responsible for persisting
+`transaction.mutations`.
+
+This makes manual transactions a good fit for draft-style workflows where local
+state should update immediately, but persistence should wait for a later user
+action such as Save or Blur. Each `tx.mutate()` call updates the optimistic
+state instantly, so the UI reflects changes as the user types. When the user
+triggers Save, `tx.commit()` fires the `mutationFn` to persist all accumulated
+mutations in a single batch. If the user cancels instead, `tx.rollback()`
+discards the optimistic changes and reverts the UI.
+
+### Multi-Step Workflows
+
+Manual transactions excel at complex workflows:
+
+```ts
+const reviewTx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    await api.batchUpdate(transaction.mutations)
+  },
+})
+
+// Step 1: User makes initial changes
+reviewTx.mutate(() => {
+  todoCollection.update(id1, (draft) => {
+    draft.status = "reviewed"
+  })
+  todoCollection.update(id2, (draft) => {
+    draft.status = "reviewed"
+  })
+})
+
+// Step 2: Show preview to user...
+
+// Step 3: User confirms or makes additional changes
+reviewTx.mutate(() => {
+  todoCollection.update(id3, (draft) => {
+    draft.status = "reviewed"
+  })
+})
+
+// Step 4: User commits all changes at once
+await reviewTx.commit()
+// OR user cancels
+// reviewTx.rollback()
+```
+
+### Using with Local Collections
+
+LocalOnly and LocalStorage collections require special handling when used with manual transactions. Unlike server-synced collections that have `onInsert`, `onUpdate`, and `onDelete` handlers automatically invoked, local collections need you to manually accept mutations by calling `utils.acceptMutations()` in your transaction's `mutationFn`.
+
+#### Why This Is Needed
+
+Local collections (LocalOnly and LocalStorage) don't participate in the standard mutation handler flow for manual transactions. They need an explicit call to persist changes made during `tx.mutate()`.
+
+#### Basic Usage
+
+```ts
+import { createTransaction } from "@tanstack/react-db"
+import { localOnlyCollectionOptions } from "@tanstack/react-db"
+
+const formDraft = createCollection(
+  localOnlyCollectionOptions({
+    id: "form-draft",
+    getKey: (item) => item.id,
+  })
+)
+
+const tx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    // Make API call with the data first
+    const draftData = transaction.mutations
+      .filter((m) => m.collection === formDraft)
+      .map((m) => m.modified)
+
+    await api.saveDraft(draftData)
+
+    // After API succeeds, accept and persist local collection mutations
+    formDraft.utils.acceptMutations(transaction)
+  },
+})
+
+// Apply mutations
+tx.mutate(() => {
+  formDraft.insert({ id: "1", field: "value" })
+})
+
+// Commit when ready
+await tx.commit()
+```
+
+#### Combining Local and Server Collections
+
+You can mix local and server collections in the same transaction:
+
+```ts
+const localSettings = createCollection(
+  localStorageCollectionOptions({
+    id: "user-settings",
+    storageKey: "app-settings",
+    getKey: (item) => item.id,
+  })
+)
+
+const userProfile = createCollection(
+  queryCollectionOptions({
+    queryKey: ["profile"],
+    queryFn: async () => api.profile.get(),
+    getKey: (item) => item.id,
+    onUpdate: async ({ transaction }) => {
+      await api.profile.update(transaction.mutations[0].modified)
+    },
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle server collection mutations explicitly in mutationFn
+    await Promise.all(
+      transaction.mutations
+        .filter((m) => m.collection === userProfile)
+        .map((m) => api.profile.update(m.modified))
+    )
+
+    // After server mutations succeed, accept local collection mutations
+    localSettings.utils.acceptMutations(transaction)
+  },
+})
+
+// Update both local and server data in one transaction
+tx.mutate(() => {
+  localSettings.update("theme", (draft) => {
+    draft.mode = "dark"
+  })
+  userProfile.update("user-1", (draft) => {
+    draft.name = "Updated Name"
+  })
+})
+
+await tx.commit()
+```
+
+#### Transaction Ordering
+
+**When to call `acceptMutations`** matters for transaction semantics:
+
+**After API success (recommended for consistency):**
+```ts
+mutationFn: async ({ transaction }) => {
+  await api.save(data)  // API call first
+  localData.utils.acceptMutations(transaction)  // Persist after success
+}
+```
+
+✅ **Pros**: If the API fails, local changes roll back too (all-or-nothing semantics)
+❌ **Cons**: Local state won't reflect changes until API succeeds
+
+**Before API call (for independent local state):**
+```ts
+mutationFn: async ({ transaction }) => {
+  localData.utils.acceptMutations(transaction)  // Persist first
+  await api.save(data)  // Then API call
+}
+```
+
+✅ **Pros**: Local state persists immediately, regardless of API outcome
+❌ **Cons**: API failure leaves local changes persisted (divergent state)
+
+Choose based on whether your local data should be independent of or coupled to remote mutations.
+
+#### Best Practices
+
+- Always call `utils.acceptMutations()` for local collections in manual transactions
+- Call `acceptMutations` **after** API success if you want transactional consistency
+- Call `acceptMutations` **before** API calls if local state should persist regardless
+- Filter mutations by collection if you need to process them separately
+- Mix local and server collections freely in the same transaction
+
+### Listening to Transaction Lifecycle
+
+Monitor transaction state changes:
+
+```typescript
+const tx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    await api.persist(transaction.mutations)
+  },
+})
+
+// Wait for transaction to complete
+tx.isPersisted.promise.then(() => {
+  console.log("Transaction persisted!")
+})
+
+// Check current state
+console.log(tx.state) // 'pending', 'persisting', 'completed', or 'failed'
+```
+
+## Paced Mutations
+
+Paced mutations provide fine-grained control over **when and how** mutations are persisted to your backend. Instead of persisting every mutation immediately, you can use timing strategies to batch, delay, or queue mutations based on your application's needs.
+
+Powered by [TanStack Pacer](https://github.com/TanStack/pacer), paced mutations are ideal for scenarios like:
+- **Auto-save forms** that wait for the user to stop typing
+- **Slider controls** that need smooth updates without overwhelming the backend
+- **Sequential workflows** where order matters and every mutation must persist
+
+### Key Design
+
+The fundamental difference between strategies is how they handle transactions:
+
+**Debounce/Throttle**: Only one pending transaction (collecting mutations) and one persisting transaction (writing to backend) at a time. Multiple rapid mutations automatically merge together into a single transaction.
+
+**Queue**: Each mutation creates a separate transaction, guaranteed to run in the order they're made (FIFO by default, configurable to LIFO). All mutations are guaranteed to persist.
+
+### Available Strategies
+
+| Strategy | Behavior | Best For |
+|----------|----------|----------|
+| **`debounceStrategy`** | Wait for inactivity before persisting. Only final state is saved. | Auto-save forms, search-as-you-type |
+| **`throttleStrategy`** | Ensure minimum spacing between executions. Mutations between executions are merged. | Sliders, progress updates, analytics |
+| **`queueStrategy`** | Each mutation becomes a separate transaction, processed sequentially in order (FIFO by default, configurable to LIFO). All mutations guaranteed to persist. | Sequential workflows, file uploads, rate-limited APIs |
+
+### Debounce Strategy
+
+The debounce strategy waits for a period of inactivity before persisting. This is perfect for auto-save scenarios where you want to wait until the user stops typing before saving their work.
+
+```tsx
+import { usePacedMutations, debounceStrategy } from "@tanstack/react-db"
+
+function AutoSaveForm({ formId }: { formId: string }) {
+  const mutate = usePacedMutations<{ field: string; value: string }>({
+    onMutate: ({ field, value }) => {
+      // Apply optimistic update immediately
+      formCollection.update(formId, (draft) => {
+        draft[field] = value
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      // Persist the final merged state to the backend
+      await api.forms.save(transaction.mutations)
+    },
+    // Wait 500ms after the last change before persisting
+    strategy: debounceStrategy({ wait: 500 }),
+  })
+
+  const handleChange = (field: string, value: string) => {
+    // Multiple rapid changes merge into a single transaction
+    mutate({ field, value })
+  }
+
+  return (
+    <form>
+      <input onChange={(e) => handleChange('title', e.target.value)} />
+      <textarea onChange={(e) => handleChange('content', e.target.value)} />
+    </form>
+  )
+}
+```
+
+**Key characteristics**:
+- Timer resets on each mutation
+- Only the final merged state persists
+- Reduces backend writes significantly for rapid changes
+
+### Throttle Strategy
+
+The throttle strategy ensures a minimum spacing between executions. This is ideal for scenarios like sliders or progress updates where you want smooth, consistent updates without overwhelming your backend.
+
+```tsx
+import { usePacedMutations, throttleStrategy } from "@tanstack/react-db"
+
+function VolumeSlider() {
+  const mutate = usePacedMutations<number>({
+    onMutate: (volume) => {
+      // Apply optimistic update immediately
+      settingsCollection.update('volume', (draft) => {
+        draft.value = volume
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.settings.updateVolume(transaction.mutations)
+    },
+    // Persist at most once every 200ms
+    strategy: throttleStrategy({
+      wait: 200,
+      leading: true,   // Execute immediately on first call
+      trailing: true,  // Execute after wait period if there were mutations
+    }),
+  })
+
+  const handleVolumeChange = (volume: number) => {
+    mutate(volume)
+  }
+
+  return (
+    <input
+      type="range"
+      min={0}
+      max={100}
+      onChange={(e) => handleVolumeChange(Number(e.target.value))}
+    />
+  )
+}
+```
+
+**Key characteristics**:
+- Guarantees minimum spacing between persists
+- Can execute on leading edge, trailing edge, or both
+- Mutations between executions are merged
+
+### Queue Strategy
+
+The queue strategy creates a separate transaction for each mutation and processes them sequentially in order. Unlike debounce/throttle which may drop intermediate mutations, **every mutation is guaranteed to be attempted**, making it ideal for workflows where you can't skip any operations.
+
+```tsx
+import { usePacedMutations, queueStrategy } from "@tanstack/react-db"
+
+function FileUploader() {
+  const mutate = usePacedMutations<File>({
+    onMutate: (file) => {
+      // Apply optimistic update immediately
+      uploadCollection.insert({
+        id: crypto.randomUUID(),
+        file,
+        status: 'pending',
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      // Each file upload is its own transaction
+      const mutation = transaction.mutations[0]
+      await api.files.upload(mutation.modified)
+    },
+    // Process each upload sequentially with 500ms between them
+    strategy: queueStrategy({
+      wait: 500,
+      addItemsTo: 'back',    // FIFO: add to back of queue
+      getItemsFrom: 'front', // FIFO: process from front of queue
+    }),
+  })
+
+  const handleFileSelect = (files: FileList) => {
+    // Each file creates its own transaction, queued for sequential processing
+    Array.from(files).forEach((file) => {
+      mutate(file)
+    })
+  }
+
+  return <input type="file" multiple onChange={(e) => handleFileSelect(e.target.files!)} />
+}
+```
+
+**Key characteristics**:
+- Each mutation becomes its own transaction
+- Processes sequentially in order (FIFO by default)
+- Can configure to LIFO by setting `getItemsFrom: 'back'`
+- All mutations guaranteed to be attempted (unlike debounce/throttle which may skip intermediate mutations)
+- Waits for each transaction to complete before starting the next
+
+**Error handling**:
+- If a mutation fails, **it is not automatically retried** - the transaction transitions to "failed" state
+- Failed mutations surface their error via `transaction.isPersisted.promise` (which will reject)
+- **Subsequent mutations continue processing** - a single failure does not block the queue
+- Each mutation is independent; there is no all-or-nothing transaction semantics across multiple mutations
+- To implement retry logic, see [Retry Behavior](#retry-behavior)
+
+### Choosing a Strategy
+
+Use this guide to pick the right strategy for your use case:
+
+**Use `debounceStrategy` when:**
+- You want to wait for the user to finish their action
+- Only the final state matters (intermediate states can be discarded)
+- You want to minimize backend writes
+- Examples: auto-save forms, search-as-you-type, settings panels
+
+**Use `throttleStrategy` when:**
+- You want smooth, consistent updates at a controlled rate
+- Some intermediate states should persist, but not all
+- You need updates to feel responsive without overwhelming the backend
+- Examples: volume sliders, progress bars, analytics tracking, live cursor position
+
+**Use `queueStrategy` when:**
+- Every mutation must persist (no operations can be lost)
+- Order of operations matters
+- You're working with a rate-limited API
+- You need sequential processing with delays
+- Examples: file uploads, batch operations, audit trails, multi-step wizards
+
+### Using in React
+
+The `usePacedMutations` hook makes it easy to use paced mutations in React components:
+
+```tsx
+import { usePacedMutations, debounceStrategy } from "@tanstack/react-db"
+
+function MyComponent({ itemId }: { itemId: string }) {
+  const mutate = usePacedMutations<number>({
+    onMutate: (newValue) => {
+      // Apply optimistic update immediately
+      collection.update(itemId, (draft) => {
+        draft.value = newValue
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.save(transaction.mutations)
+    },
+    strategy: debounceStrategy({ wait: 500 }),
+  })
+
+  // Each mutate call returns a Transaction you can await
+  const handleSave = async (newValue: number) => {
+    const tx = mutate(newValue)
+
+    // Optionally wait for persistence
+    try {
+      await tx.isPersisted.promise
+      console.log('Saved successfully!')
+    } catch (error) {
+      console.error('Save failed:', error)
+    }
+  }
+
+  return <button onClick={() => handleSave(42)}>Save</button>
+}
+```
+
+The hook automatically memoizes the strategy and mutation function to prevent unnecessary recreations. You can also use `createPacedMutations` directly outside of React:
+
+```ts
+import { createPacedMutations, queueStrategy } from "@tanstack/db"
+
+const mutate = createPacedMutations<{ id: string; changes: Partial<Item> }>({
+  onMutate: ({ id, changes }) => {
+    // Apply optimistic update immediately
+    collection.update(id, (draft) => {
+      Object.assign(draft, changes)
+    })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: queueStrategy({ wait: 200 }),
+})
+
+// Use anywhere in your application
+mutate({ id: '123', changes: { name: 'New Name' } })
+```
+
+### Understanding Queues and Hook Instances
+
+**Each unique `usePacedMutations` hook call creates its own independent queue.** This is an important design decision that affects how you structure your mutations.
+
+If you have multiple components calling `usePacedMutations` separately, each will have its own isolated queue:
+
+```tsx
+function EmailDraftEditor1({ draftId }: { draftId: string }) {
+  // This creates Queue A
+  const mutate = usePacedMutations({
+    onMutate: (text) => {
+      draftCollection.update(draftId, (draft) => {
+        draft.text = text
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.saveDraft(transaction.mutations)
+    },
+    strategy: debounceStrategy({ wait: 500 }),
+  })
+
+  return <textarea onChange={(e) => mutate(e.target.value)} />
+}
+
+function EmailDraftEditor2({ draftId }: { draftId: string }) {
+  // This creates Queue B (separate from Queue A)
+  const mutate = usePacedMutations({
+    onMutate: (text) => {
+      draftCollection.update(draftId, (draft) => {
+        draft.text = text
+      })
+    },
+    mutationFn: async ({ transaction }) => {
+      await api.saveDraft(transaction.mutations)
+    },
+    strategy: debounceStrategy({ wait: 500 }),
+  })
+
+  return <textarea onChange={(e) => mutate(e.target.value)} />
+}
+```
+
+In this example, mutations from `EmailDraftEditor1` and `EmailDraftEditor2` will be queued and processed **independently**. They won't share the same debounce timer or queue.
+
+**To share the same queue across multiple components**, create a single `createPacedMutations` instance and use it everywhere:
+
+```tsx
+// Create a single shared instance
+import { createPacedMutations, debounceStrategy } from "@tanstack/db"
+
+export const mutateDraft = createPacedMutations<{ draftId: string; text: string }>({
+  onMutate: ({ draftId, text }) => {
+    draftCollection.update(draftId, (draft) => {
+      draft.text = text
+    })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.saveDraft(transaction.mutations)
+  },
+  strategy: debounceStrategy({ wait: 500 }),
+})
+
+// Now both components share the same queue
+function EmailDraftEditor1({ draftId }: { draftId: string }) {
+  return <textarea onChange={(e) => mutateDraft({ draftId, text: e.target.value })} />
+}
+
+function EmailDraftEditor2({ draftId }: { draftId: string }) {
+  return <textarea onChange={(e) => mutateDraft({ draftId, text: e.target.value })} />
+}
+```
+
+With this approach, all mutations from both components share the same debounce timer and queue, ensuring they're processed in the correct order with a single debounce implementation.
+
+**Key takeaways:**
+
+- Each `usePacedMutations()` call = unique queue
+- Each `createPacedMutations()` call = unique queue
+- To share a queue: create one instance and import it everywhere you need it
+- Shared queues ensure mutations from different places are ordered correctly
+
+## Mutation Merging
+
+When multiple mutations operate on the same item within a transaction, TanStack DB intelligently merges them to:
+- **Reduce network traffic**: Fewer mutations sent to the server
+- **Preserve user intent**: Final state matches what user expects
+- **Maintain UI consistency**: Local state always reflects user actions
+
+The merging behavior follows a truth table based on the mutation types:
+
+| Existing → New      | Result    | Description                                       |
+| ------------------- | --------- | ------------------------------------------------- |
+| **insert + update** | `insert`  | Keeps insert type, merges changes, empty original |
+| **insert + delete** | _removed_ | Mutations cancel each other out                   |
+| **update + delete** | `delete`  | Delete dominates                                  |
+| **update + update** | `update`  | Union changes, keep first original                |
+
+> [!NOTE]
+> Attempting to insert or delete the same item multiple times within a transaction will throw an error.
+
+## Controlling Optimistic Behavior
+
+By default, all mutations apply optimistic updates immediately to provide instant feedback. However, you can disable this behavior when you need to wait for server confirmation before applying changes locally.
+
+### When to Disable Optimistic Updates
+
+Consider using `optimistic: false` when:
+
+- **Complex server-side processing**: Operations that depend on server-side generation (e.g., cascading foreign keys, computed fields)
+- **Validation requirements**: Operations where backend validation might reject the change
+- **Confirmation workflows**: Deletes where UX should wait for confirmation before removing data
+- **Batch operations**: Large operations where optimistic rollback would be disruptive
+
+### Behavior Differences
+
+**`optimistic: true` (default)**:
+- Immediately applies mutation to the local store
+- Provides instant UI feedback
+- Requires rollback if server rejects the mutation
+- Best for simple, predictable operations
+
+**`optimistic: false`**:
+- Does not modify local store until server confirms
+- No immediate UI feedback, but no rollback needed
+- UI updates only after successful server response
+- Best for complex or validation-heavy operations
+
+### Using Non-Optimistic Mutations
+
+```typescript
+// Critical deletion that needs confirmation
+const handleDeleteAccount = () => {
+  userCollection.delete(userId, { optimistic: false })
+}
+
+// Server-generated data
+const handleCreateInvoice = () => {
+  // Server generates invoice number, tax calculations, etc.
+  invoiceCollection.insert(invoiceData, { optimistic: false })
+}
+
+// Mixed approach in same transaction
+tx.mutate(() => {
+  // Instant UI feedback for simple change
+  todoCollection.update(todoId, (draft) => {
+    draft.completed = true
+  })
+
+  // Wait for server confirmation for complex change
+  auditCollection.insert(auditRecord, { optimistic: false })
+})
+```
+
+### Waiting for Persistence
+
+A common pattern with `optimistic: false` is to wait for the mutation to complete before navigating or showing success feedback:
+
+```typescript
+const handleCreatePost = async (postData) => {
+  // Insert without optimistic updates
+  const tx = postsCollection.insert(postData, { optimistic: false })
+
+  try {
+    // Wait for write to server and sync back to complete
+    await tx.isPersisted.promise
+
+    // Server write and sync back were successful
+    navigate(`/posts/${postData.id}`)
+  } catch (error) {
+    // Show error notification
+    toast.error("Failed to create post: " + error.message)
+  }
+}
+
+// Works with updates and deletes too
+const handleUpdateTodo = async (todoId, changes) => {
+  const tx = todoCollection.update(
+    todoId,
+    { optimistic: false },
+    (draft) => Object.assign(draft, changes)
+  )
+
+  try {
+    await tx.isPersisted.promise
+    navigate("/todos")
+  } catch (error) {
+    toast.error("Failed to update todo: " + error.message)
+  }
+}
+```
+
+## Transaction States
+
+Transactions progress through the following states during their lifecycle:
+
+1. **`pending`**: Initial state when a transaction is created and optimistic mutations can be applied
+2. **`persisting`**: Transaction is being persisted to the backend
+3. **`completed`**: Transaction has been successfully persisted and any backend changes have been synced back
+4. **`failed`**: An error was thrown while persisting or syncing back the transaction
+
+### Monitoring Transaction State
+
+```typescript
+const tx = todoCollection.update(todoId, (draft) => {
+  draft.completed = true
+})
+
+// Check current state
+console.log(tx.state) // 'pending'
+
+// Wait for specific states
+await tx.isPersisted.promise
+console.log(tx.state) // 'completed' or 'failed'
+
+// Handle errors
+try {
+  await tx.isPersisted.promise
+  console.log("Success!")
+} catch (error) {
+  console.log("Failed:", error)
+}
+```
+
+### State Transitions
+
+The normal flow is: `pending` → `persisting` → `completed`
+
+If an error occurs: `pending` → `persisting` → `failed`
+
+Failed transactions automatically rollback their optimistic state.
+
+### Retry Behavior
+
+**Important:** TanStack DB does not automatically retry failed mutations. If a mutation fails (network error, server error, etc.), the transaction transitions to `failed` state and the optimistic state is rolled back. This is by design. Automatic retry logic varies significantly based on your use case (idempotency requirements, error types, backoff strategies, etc.).
+
+To implement retry logic, wrap your API calls in your `mutationFn`:
+
+```typescript
+// Simple retry helper
+async function withRetry<T>(
+  fn: () => Promise<T>,
+  maxRetries = 3,
+  delay = 1000
+): Promise<T> {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      return await fn()
+    } catch (error) {
+      if (attempt === maxRetries - 1) throw error
+      await new Promise(resolve => setTimeout(resolve, delay * (attempt + 1)))
+    }
+  }
+  throw new Error('Unreachable')
+}
+
+// Use in your collection
+const todoCollection = createCollection({
+  id: "todos",
+  onUpdate: async ({ transaction }) => {
+    const mutation = transaction.mutations[0]
+    // Retry up to 3 times with increasing delay
+    await withRetry(() =>
+      api.todos.update(mutation.original.id, mutation.changes)
+    )
+  },
+})
+```
+
+For more sophisticated retry strategies, consider using a library like [p-retry](https://github.com/sindresorhus/p-retry) which supports exponential backoff, custom retry conditions, and abort signals.
+
+## Handling Temporary IDs
+
+When inserting new items into collections where the server generates the final ID, you'll need to handle the transition from temporary to real IDs carefully to avoid UI issues and operation failures.
+
+### The Problem
+
+When you insert an item with a temporary ID, the optimistic object is eventually replaced by the synced object with its real server-generated ID. This can cause two issues:
+
+1. **UI Flicker**: Your UI framework may unmount and remount components when the key changes from temporary to real ID
+2. **Subsequent Operations**: Operations like delete may fail if they try to use the temporary ID before the real ID syncs back
+
+```tsx
+// Generate temporary ID (e.g., negative number)
+const tempId = -(Math.floor(Math.random() * 1000000) + 1)
+
+// Insert with temporary ID
+todoCollection.insert({
+  id: tempId,
+  text: "New todo",
+  completed: false
+})
+
+// Problem 1: UI may re-render when tempId is replaced with real ID
+// Problem 2: Trying to delete before sync completes will use tempId
+todoCollection.delete(tempId) // May 404 on backend
+```
+
+### Solution 1: Use Client-Generated UUIDs
+
+If your backend supports client-generated IDs, use UUIDs to eliminate the temporary ID problem entirely:
+
+```tsx
+// Generate UUID on client
+const id = crypto.randomUUID()
+
+todoCollection.insert({
+  id,
+  text: "New todo",
+  completed: false
+})
+
+// No flicker - the ID is stable
+// Subsequent operations work immediately
+todoCollection.delete(id) // Works with the same ID
+```
+
+This is the cleanest approach when your backend supports it, as the ID never changes.
+
+### Solution 2: Wait for Persistence or Use Non-Optimistic Inserts
+
+Wait for the mutation to persist before allowing subsequent operations, or use non-optimistic inserts to avoid showing the item until the real ID is available:
+
+```tsx
+const handleCreateTodo = async (text: string) => {
+  const tempId = -Math.floor(Math.random() * 1000000) + 1
+
+  const tx = todoCollection.insert({
+    id: tempId,
+    text,
+    completed: false
+  })
+
+  // Wait for persistence to complete
+  await tx.isPersisted.promise
+
+  // Now we have the real ID from the server
+  // Subsequent operations will use the real ID
+}
+
+// Disable delete buttons until persisted
+const TodoItem = ({ todo, isPersisted }: { todo: Todo, isPersisted: boolean }) => {
+  return (
+    <div>
+      {todo.text}
+      <button
+        onClick={() => todoCollection.delete(todo.id)}
+        disabled={!isPersisted}
+      >
+        Delete
+      </button>
+    </div>
+  )
+}
+```
+
+### Solution 3: Maintain a View Key Mapping
+
+To avoid UI flicker while keeping optimistic updates, maintain a separate mapping from IDs (both temporary and real) to stable view keys:
+
+```tsx
+// Create a mapping API
+const idToViewKey = new Map<number | string, string>()
+
+function getViewKey(id: number | string): string {
+  if (!idToViewKey.has(id)) {
+    idToViewKey.set(id, crypto.randomUUID())
+  }
+  return idToViewKey.get(id)!
+}
+
+function linkIds(tempId: number, realId: number) {
+  const viewKey = getViewKey(tempId)
+  idToViewKey.set(realId, viewKey)
+}
+
+// Configure collection to link IDs when real ID comes back
+const todoCollection = createCollection({
+  id: "todos",
+  // ... other options
+  onInsert: async ({ transaction }) => {
+    const mutation = transaction.mutations[0]
+    const tempId = mutation.modified.id
+
+    // Create todo on server and get real ID back
+    const response = await api.todos.create({
+      text: mutation.modified.text,
+      completed: mutation.modified.completed,
+    })
+    const realId = response.id
+
+    // Link temp ID to same view key as real ID
+    linkIds(tempId, realId)
+
+    // Wait for sync back
+    await todoCollection.utils.refetch()
+  },
+})
+
+// When inserting with temp ID
+const tempId = -Math.floor(Math.random() * 1000000) + 1
+const viewKey = getViewKey(tempId) // Creates and stores mapping
+
+todoCollection.insert({
+  id: tempId,
+  text: "New todo",
+  completed: false
+})
+
+// Use view key for rendering
+const TodoList = () => {
+  const { data: todos } = useLiveQuery((q) =>
+    q.from({ todo: todoCollection })
+  )
+
+  return (
+    <ul>
+      {todos.map((todo) => (
+        <li key={getViewKey(todo.id)}> {/* Stable key */}
+          {todo.text}
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+This pattern maintains a stable key throughout the temporary → real ID transition, preventing your UI framework from unmounting and remounting the component. The view key is stored outside the collection items, so you don't need to add extra fields to your data model.
+
+### Best Practices
+
+1. **Use UUIDs when possible**: Client-generated UUIDs eliminate the temporary ID problem
+2. **Generate temporary IDs deterministically**: Use negative numbers or a specific pattern to distinguish temporary IDs from real ones
+3. **Disable operations on temporary items**: Disable delete/update buttons until persistence completes
+4. **Maintain view key mappings**: Create a mapping between IDs and stable view keys for rendering
+
+> [!NOTE]
+> There's an [open issue](https://github.com/TanStack/db/issues/19) to add better built-in support for temporary ID handling in TanStack DB. This would automate the view key pattern and make it easier to work with server-generated IDs.
diff --git a/mintlify/db/guides/schemas.md b/mintlify/db/guides/schemas.md
new file mode 100644
index 000000000..9c2a3545f
--- /dev/null
+++ b/mintlify/db/guides/schemas.md
@@ -0,0 +1,1099 @@
+---
+title: Schemas
+id: schemas
+---
+
+# Schema Validation and Type Transformations
+
+TanStack DB uses schemas to ensure your data is valid and type-safe throughout your application.
+
+## What You'll Learn
+
+This guide covers:
+- How schema validation works in TanStack DB
+- Understanding TInput and TOutput types
+- Common patterns: validation, transformations, and defaults
+- Error handling and best practices
+
+## Quick Example
+
+Schemas catch invalid data from optimistic mutations before it enters your collection:
+
+```typescript
+import { z } from 'zod'
+import { createCollection } from '@tanstack/react-db'
+import { queryCollectionOptions } from '@tanstack/query-db-collection'
+
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string().min(1, "Text is required"),
+  completed: z.boolean(),
+  priority: z.number().min(0).max(5)
+})
+
+const collection = createCollection(
+  queryCollectionOptions({
+    schema: todoSchema,
+    queryKey: ['todos'],
+    queryFn: async () => api.todos.getAll(),
+    getKey: (item) => item.id,
+    // ...
+  })
+)
+
+// Invalid data throws SchemaValidationError
+collection.insert({
+  id: "1",
+  text: "",  // ❌ Too short
+  completed: "yes",  // ❌ Wrong type
+  priority: 10  // ❌ Out of range
+})
+// Error: Validation failed with 3 issues
+
+// Valid data works
+collection.insert({
+  id: "1",
+  text: "Buy groceries",  // ✅
+  completed: false,  // ✅
+  priority: 2  // ✅
+})
+```
+
+Schemas also enable advanced features like type transformations and defaults:
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string().min(1),
+  completed: z.boolean().default(false),  // Auto-fill missing values
+  created_at: z.string().transform(val => new Date(val))  // Convert types
+})
+
+collection.insert({
+  id: "1",
+  text: "Buy groceries",
+  created_at: "2024-01-01T00:00:00Z"  // String in
+  // completed auto-filled with false
+})
+
+const todo = collection.get("1")
+console.log(todo.created_at.getFullYear())  // Date object out!
+```
+
+## Supported Schema Libraries
+
+TanStack DB supports any [StandardSchema](https://standardschema.dev) compatible library:
+- [Zod](https://zod.dev)
+- [Valibot](https://valibot.dev)
+- [ArkType](https://arktype.io)
+- [Effect Schema](https://effect.website/docs/schema/introduction/)
+
+Examples in this guide use Zod, but patterns apply to all libraries.
+
+---
+
+## Core Concepts: TInput vs TOutput
+
+Understanding TInput and TOutput is key to working effectively with schemas in TanStack DB.
+
+> **Important:** Schemas validate **client changes only** - data you insert or update via `collection.insert()` and `collection.update()`. They do not automatically validate data loaded from your server or sync layer. If you need to validate server data, you must do so explicitly in your integration layer.
+
+### What are TInput and TOutput?
+
+When you define a schema with transformations, it has two types:
+
+- **TInput**: The type users provide when calling `insert()` or `update()`
+- **TOutput**: The type stored in the collection and returned from queries
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  created_at: z.string().transform(val => new Date(val))
+})
+
+// TInput type:  { id: string, text: string, created_at: string }
+// TOutput type: { id: string, text: string, created_at: Date }
+```
+
+The schema acts as a **boundary** that transforms TInput → TOutput.
+
+### Critical Design Principle: TInput Must Be a Superset of TOutput
+
+When using transformations, **TInput must accept all values that TOutput contains**. This is essential for updates to work correctly.
+
+Here's why: when you call `collection.update(id, (draft) => {...})`, the `draft` parameter is typed as `TInput` but contains data that's already been transformed to `TOutput`. For this to work without complex type gymnastics, your schema must accept both the input format AND the output format.
+
+```typescript
+// ❌ BAD: TInput only accepts strings
+const schema = z.object({
+  created_at: z.string().transform(val => new Date(val))
+})
+// TInput:  { created_at: string }
+// TOutput: { created_at: Date }
+// Problem: draft.created_at is a Date, but TInput only accepts string!
+
+// ✅ GOOD: TInput accepts both string and Date (superset of TOutput)
+const schema = z.object({
+  created_at: z.union([z.string(), z.date()])
+    .transform(val => typeof val === 'string' ? new Date(val) : val)
+})
+// TInput:  { created_at: string | Date }
+// TOutput: { created_at: Date }
+// Success: draft.created_at can be a Date because TInput accepts Date!
+```
+
+**Rule of thumb:** If your schema transforms type A to type B, use `z.union([A, B])` to ensure TInput accepts both.
+
+### Why This Matters
+
+**All data in your collection is TOutput:**
+- Data stored in the collection
+- Data returned from queries
+- Data in `PendingMutation.modified`
+- Data in mutation handlers
+
+```typescript
+const collection = createCollection({
+  schema: todoSchema,
+  onInsert: async ({ transaction }) => {
+    const item = transaction.mutations[0].modified
+
+    // item is TOutput
+    console.log(item.created_at instanceof Date)  // true
+
+    // If your API needs a string, serialize it
+    await api.todos.create({
+      ...item,
+      created_at: item.created_at.toISOString()  // Date → string
+    })
+  }
+})
+
+// User provides TInput
+collection.insert({
+  id: "1",
+  text: "Task",
+  created_at: "2024-01-01T00:00:00Z"  // string
+})
+
+// Collection stores and returns TOutput
+const todo = collection.get("1")
+console.log(todo.created_at.getFullYear())  // It's a Date!
+```
+
+---
+
+## Validation Patterns
+
+Schemas provide powerful validation to ensure data quality.
+
+### Basic Type Validation
+
+```typescript
+const userSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+  active: z.boolean()
+})
+
+collection.insert({
+  id: "1",
+  name: "Alice",
+  age: "25",  // ❌ Wrong type - expects number
+  email: "not-an-email",  // ❌ Invalid email format
+  active: true
+})
+// Throws SchemaValidationError
+```
+
+### String Constraints
+
+```typescript
+const productSchema = z.object({
+  id: z.string(),
+  name: z.string().min(3, "Name must be at least 3 characters"),
+  sku: z.string().length(8, "SKU must be exactly 8 characters"),
+  description: z.string().max(500, "Description too long"),
+  url: z.string().url("Must be a valid URL")
+})
+```
+
+### Number Constraints
+
+```typescript
+const orderSchema = z.object({
+  id: z.string(),
+  quantity: z.number()
+    .int("Must be a whole number")
+    .positive("Must be greater than 0"),
+  price: z.number()
+    .min(0.01, "Price must be at least $0.01")
+    .max(999999.99, "Price too high"),
+  discount: z.number()
+    .min(0)
+    .max(100)
+})
+```
+
+### Enum Validation
+
+```typescript
+const taskSchema = z.object({
+  id: z.string(),
+  status: z.enum(['todo', 'in-progress', 'done']),
+  priority: z.enum(['low', 'medium', 'high', 'urgent'])
+})
+
+collection.insert({
+  id: "1",
+  status: "completed",  // ❌ Not in enum
+  priority: "medium"  // ✅
+})
+```
+
+### Optional and Nullable Fields
+
+```typescript
+const personSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  nickname: z.string().optional(),  // Can be omitted
+  middleName: z.string().nullable(),  // Can be null
+  bio: z.string().optional().nullable()  // Can be omitted OR null
+})
+
+// All valid:
+collection.insert({ id: "1", name: "Alice" })  // nickname omitted
+collection.insert({ id: "2", name: "Bob", middleName: null })
+collection.insert({ id: "3", name: "Carol", bio: null })
+```
+
+### Array Validation
+
+```typescript
+const postSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  tags: z.array(z.string()).min(1, "At least one tag required"),
+  likes: z.array(z.number()).max(1000)
+})
+
+collection.insert({
+  id: "1",
+  title: "My Post",
+  tags: [],  // ❌ Need at least one
+  likes: [1, 2, 3]
+})
+```
+
+### Custom Validation
+
+```typescript
+const userSchema = z.object({
+  id: z.string(),
+  username: z.string()
+    .min(3)
+    .refine(
+      (val) => /^[a-zA-Z0-9_]+$/.test(val),
+      "Username can only contain letters, numbers, and underscores"
+    ),
+  password: z.string()
+    .min(8)
+    .refine(
+      (val) => /[A-Z]/.test(val) && /[0-9]/.test(val),
+      "Password must contain at least one uppercase letter and one number"
+    )
+})
+```
+
+### Cross-Field Validation
+
+```typescript
+const dateRangeSchema = z.object({
+  id: z.string(),
+  start_date: z.string(),
+  end_date: z.string()
+}).refine(
+  (data) => new Date(data.end_date) > new Date(data.start_date),
+  "End date must be after start date"
+)
+```
+
+---
+
+## Transformation Patterns
+
+Schemas can transform data as it enters your collection.
+
+### String to Date
+
+The most common transformation - convert ISO strings to Date objects:
+
+```typescript
+const eventSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  start_time: z.string().transform(val => new Date(val))
+})
+
+collection.insert({
+  id: "1",
+  name: "Conference",
+  start_time: "2024-06-15T10:00:00Z"  // TInput: string
+})
+
+const event = collection.get("1")
+console.log(event.start_time.getFullYear())  // TOutput: Date
+```
+
+### String to Number
+
+```typescript
+const formSchema = z.object({
+  id: z.string(),
+  quantity: z.string().transform(val => parseInt(val, 10)),
+  price: z.string().transform(val => parseFloat(val))
+})
+
+collection.insert({
+  id: "1",
+  quantity: "42",  // String from form input
+  price: "19.99"
+})
+
+const item = collection.get("1")
+console.log(typeof item.quantity)  // "number"
+```
+
+### JSON String to Object
+
+```typescript
+const configSchema = z.object({
+  id: z.string(),
+  settings: z.string().transform(val => JSON.parse(val))
+})
+
+collection.insert({
+  id: "1",
+  settings: '{"theme":"dark","notifications":true}'  // JSON string
+})
+
+const config = collection.get("1")
+console.log(config.settings.theme)  // "dark" (parsed object)
+```
+
+### Computed Fields
+
+```typescript
+const userSchema = z.object({
+  id: z.string(),
+  first_name: z.string(),
+  last_name: z.string()
+}).transform(data => ({
+  ...data,
+  full_name: `${data.first_name} ${data.last_name}`  // Computed
+}))
+
+collection.insert({
+  id: "1",
+  first_name: "John",
+  last_name: "Doe"
+})
+
+const user = collection.get("1")
+console.log(user.full_name)  // "John Doe"
+```
+
+### String to Enum
+
+```typescript
+const orderSchema = z.object({
+  id: z.string(),
+  status: z.string().transform(val =>
+    val.toUpperCase() as 'PENDING' | 'SHIPPED' | 'DELIVERED'
+  )
+})
+```
+
+### Sanitization
+
+```typescript
+const commentSchema = z.object({
+  id: z.string(),
+  text: z.string().transform(val => val.trim()),  // Remove whitespace
+  username: z.string().transform(val => val.toLowerCase())  // Normalize
+})
+```
+
+### Complex Transformations
+
+```typescript
+const productSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  price_cents: z.number()
+}).transform(data => ({
+  ...data,
+  price_dollars: data.price_cents / 100,  // Add computed field
+  display_price: `$${(data.price_cents / 100).toFixed(2)}`  // Formatted
+}))
+```
+
+---
+
+## Default Values
+
+Schemas can automatically provide default values for missing fields.
+
+### Literal Defaults
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean().default(false),
+  priority: z.number().default(0),
+  tags: z.array(z.string()).default([])
+})
+
+collection.insert({
+  id: "1",
+  text: "Buy groceries"
+  // completed, priority, and tags filled automatically
+})
+
+const todo = collection.get("1")
+console.log(todo.completed)  // false
+console.log(todo.priority)   // 0
+console.log(todo.tags)       // []
+```
+
+### Function Defaults
+
+Generate defaults dynamically:
+
+```typescript
+const postSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  created_at: z.date().default(() => new Date()),
+  view_count: z.number().default(0),
+  slug: z.string().default(() => crypto.randomUUID())
+})
+
+collection.insert({
+  id: "1",
+  title: "My First Post"
+  // created_at, view_count, and slug generated automatically
+})
+```
+
+### Conditional Defaults
+
+```typescript
+const userSchema = z.object({
+  id: z.string(),
+  username: z.string(),
+  role: z.enum(['user', 'admin']).default('user'),
+  permissions: z.array(z.string()).default(['read'])
+})
+```
+
+### Complex Defaults
+
+```typescript
+const eventSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  metadata: z.record(z.unknown()).default(() => ({
+    created_by: 'system',
+    version: 1
+  }))
+})
+```
+
+### Combining Defaults with Transformations
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean().default(false),
+  created_at: z.string()
+    .default(() => new Date().toISOString())
+    .transform(val => new Date(val))
+})
+
+collection.insert({
+  id: "1",
+  text: "Task"
+  // completed defaults to false
+  // created_at defaults to current time, then transforms to Date
+})
+```
+
+---
+
+## Handling Timestamps
+
+When working with timestamps, you typically want automatic creation dates rather than transforming user input.
+
+### Use Defaults for Timestamps
+
+For `created_at` and `updated_at` fields, use defaults to automatically generate timestamps:
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean().default(false),
+  created_at: z.date().default(() => new Date()),
+  updated_at: z.date().default(() => new Date())
+})
+
+// Timestamps generated automatically
+collection.insert({
+  id: "1",
+  text: "Buy groceries"
+  // created_at and updated_at filled automatically
+})
+
+// Update timestamps
+collection.update("1", (draft) => {
+  draft.text = "Buy groceries and milk"
+  draft.updated_at = new Date()
+})
+```
+
+### Accepting Date Input from External Sources
+
+If you're accepting date input from external sources (forms, APIs), you must use union types to accept both strings and Date objects. This ensures TInput is a superset of TOutput:
+
+```typescript
+const eventSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  scheduled_for: z.union([
+    z.string(),  // Accept ISO string from form input (part of TInput)
+    z.date()     // Accept Date from existing data (TOutput) or programmatic input
+  ]).transform(val =>
+    typeof val === 'string' ? new Date(val) : val
+  )
+})
+// TInput:  { scheduled_for: string | Date }
+// TOutput: { scheduled_for: Date }
+// ✅ TInput is a superset of TOutput (accepts both string and Date)
+
+// Works with string input (new data)
+collection.insert({
+  id: "1",
+  name: "Meeting",
+  scheduled_for: "2024-12-31T15:00:00Z"  // From form input
+})
+
+// Works with Date input (programmatic)
+collection.insert({
+  id: "2",
+  name: "Workshop",
+  scheduled_for: new Date()
+})
+
+// Updates work - scheduled_for is already a Date, and TInput accepts Date
+collection.update("1", (draft) => {
+  draft.name = "Updated Meeting"
+  // draft.scheduled_for is a Date and can be used or modified
+})
+```
+
+---
+
+## Error Handling
+
+When validation fails, TanStack DB throws a `SchemaValidationError` with detailed information.
+
+### Basic Error Handling
+
+```typescript
+import { SchemaValidationError } from '@tanstack/db'
+
+try {
+  collection.insert({
+    id: "1",
+    email: "not-an-email",
+    age: -5
+  })
+} catch (error) {
+  if (error instanceof SchemaValidationError) {
+    console.log(error.type)     // 'insert' or 'update'
+    console.log(error.message)  // "Validation failed with 2 issues"
+    console.log(error.issues)   // Array of validation issues
+  }
+}
+```
+
+### Error Structure
+
+```typescript
+error.issues = [
+  {
+    path: ['email'],
+    message: 'Invalid email address'
+  },
+  {
+    path: ['age'],
+    message: 'Number must be greater than 0'
+  }
+]
+```
+
+### Displaying Errors in UI
+
+```typescript
+const handleSubmit = async (data: unknown) => {
+  try {
+    collection.insert(data)
+  } catch (error) {
+    if (error instanceof SchemaValidationError) {
+      // Show errors by field
+      error.issues.forEach(issue => {
+        const fieldName = issue.path?.join('.') || 'unknown'
+        showFieldError(fieldName, issue.message)
+      })
+    }
+  }
+}
+```
+
+### React Example
+
+```tsx
+import { SchemaValidationError } from '@tanstack/db'
+
+function TodoForm() {
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrors({})
+
+    try {
+      todoCollection.insert({
+        id: crypto.randomUUID(),
+        text: e.currentTarget.text.value,
+        priority: parseInt(e.currentTarget.priority.value)
+      })
+    } catch (error) {
+      if (error instanceof SchemaValidationError) {
+        const newErrors: Record<string, string> = {}
+        error.issues.forEach(issue => {
+          const field = issue.path?.[0] || 'form'
+          newErrors[field] = issue.message
+        })
+        setErrors(newErrors)
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input name="text" />
+      {errors.text && <span className="error">{errors.text}</span>}
+
+      <input name="priority" type="number" />
+      {errors.priority && <span className="error">{errors.priority}</span>}
+
+      <button type="submit">Add Todo</button>
+    </form>
+  )
+}
+```
+
+---
+
+## Best Practices
+
+### Keep Transformations Simple
+
+> **Performance Note:** Schema validation is synchronous and runs on every optimistic mutation. For high-frequency updates, keep transformations simple.
+
+```typescript
+// ❌ Avoid expensive operations
+const schema = z.object({
+  data: z.string().transform(val => {
+    // Heavy computation on every mutation
+    return expensiveParsingOperation(val)
+  })
+})
+
+// ✅ Better: Validate only, process elsewhere
+const schema = z.object({
+  data: z.string()  // Simple validation
+})
+
+// Process in component or mutation handler when needed
+const processedData = expensiveParsingOperation(todo.data)
+```
+
+### Use Union Types for Transformations (Essential)
+
+When your schema transforms data to a different type, you **must** use union types to ensure TInput is a superset of TOutput. This is not optional - updates will fail without it.
+
+```typescript
+// ✅ REQUIRED: TInput accepts both string (new data) and Date (existing data)
+const schema = z.object({
+  created_at: z.union([z.string(), z.date()])
+    .transform(val => typeof val === 'string' ? new Date(val) : val)
+})
+// TInput: { created_at: string | Date }
+// TOutput: { created_at: Date }
+
+// ❌ WILL BREAK: Updates fail because draft contains Date but TInput only accepts string
+const schema = z.object({
+  created_at: z.string().transform(val => new Date(val))
+})
+// TInput: { created_at: string }
+// TOutput: { created_at: Date }
+// Problem: collection.update() passes a Date to a schema expecting string!
+```
+
+**Why this is required:** During `collection.update()`, the `draft` object contains TOutput data (already transformed). The schema must accept this data, which means TInput must be a superset of TOutput.
+
+### Validate at the Boundary
+
+Let the collection schema handle validation. Don't duplicate validation logic:
+
+```typescript
+// ❌ Avoid: Duplicate validation
+function addTodo(text: string) {
+  if (!text || text.length < 3) {
+    throw new Error("Text too short")
+  }
+  todoCollection.insert({ id: "1", text })
+}
+
+// ✅ Better: Let schema handle it
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string().min(3, "Text must be at least 3 characters")
+})
+```
+
+### Type Inference
+
+Let TypeScript infer types from your schema:
+
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean()
+})
+
+type Todo = z.infer<typeof todoSchema>  // Inferred type
+
+// ✅ Use the inferred type
+const collection = createCollection(
+  queryCollectionOptions({
+    schema: todoSchema,
+    // TypeScript knows the item type automatically
+    getKey: (item) => item.id  // item is Todo
+  })
+)
+```
+
+### Custom Error Messages
+
+Provide helpful error messages for users:
+
+```typescript
+const userSchema = z.object({
+  username: z.string()
+    .min(3, "Username must be at least 3 characters")
+    .max(20, "Username is too long (max 20 characters)")
+    .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores"),
+  email: z.string().email("Please enter a valid email address"),
+  age: z.number()
+    .int("Age must be a whole number")
+    .min(13, "You must be at least 13 years old")
+})
+```
+
+---
+
+## Full-Context Examples
+
+### Example 1: Todo App with Rich Types
+
+A complete todo application demonstrating validation, transformations, and defaults:
+
+```typescript
+import { z } from 'zod'
+import { createCollection } from '@tanstack/react-db'
+import { not } from '@tanstack/db'
+import { queryCollectionOptions } from '@tanstack/query-db-collection'
+
+// Schema with validation, transformations, and defaults
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string().min(1, "Todo text cannot be empty"),
+  completed: z.boolean().default(false),
+  priority: z.enum(['low', 'medium', 'high']).default('medium'),
+  due_date: z.union([
+    z.string(),
+    z.date()
+  ]).transform(val => typeof val === 'string' ? new Date(val) : val).optional(),
+  created_at: z.union([
+    z.string(),
+    z.date()
+  ]).transform(val => typeof val === 'string' ? new Date(val) : val)
+    .default(() => new Date()),
+  tags: z.array(z.string()).default([])
+})
+
+type Todo = z.infer<typeof todoSchema>
+
+// Collection setup
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      const todos = await response.json()
+      // Reuse schema to parse and transform API responses
+      return todos.map((todo: any) => todoSchema.parse(todo))
+    },
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    queryClient,
+
+    onInsert: async ({ transaction }) => {
+      const todo = transaction.mutations[0].modified
+
+      // Serialize dates for API
+      await fetch('/api/todos', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...todo,
+          due_date: todo.due_date?.toISOString(),
+          created_at: todo.created_at.toISOString()
+        })
+      })
+    },
+
+    onUpdate: async ({ transaction }) => {
+      await Promise.all(
+        transaction.mutations.map(async (mutation) => {
+          const { original, changes } = mutation
+
+          // Serialize any date fields in changes
+          const serialized = {
+            ...changes,
+            due_date: changes.due_date instanceof Date
+              ? changes.due_date.toISOString()
+              : changes.due_date
+          }
+
+          await fetch(`/api/todos/${original.id}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(serialized)
+          })
+        })
+      )
+    },
+
+    onDelete: async ({ transaction }) => {
+      await Promise.all(
+        transaction.mutations.map(async (mutation) => {
+          await fetch(`/api/todos/${mutation.original.id}`, {
+            method: 'DELETE'
+          })
+        })
+      )
+    }
+  })
+)
+
+// Component usage
+function TodoApp() {
+  const { data: todos } = useLiveQuery(q =>
+    q.from({ todo: todoCollection })
+      .where(({ todo }) => not(todo.completed))
+      .orderBy(({ todo }) => todo.created_at, 'desc')
+  )
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const addTodo = (text: string, priority: 'low' | 'medium' | 'high') => {
+    try {
+      todoCollection.insert({
+        id: crypto.randomUUID(),
+        text,
+        priority,
+        due_date: "2024-12-31T23:59:59Z"
+        // completed, created_at, tags filled automatically by defaults
+      })
+      setErrors({})
+    } catch (error) {
+      if (error instanceof SchemaValidationError) {
+        const newErrors: Record<string, string> = {}
+        error.issues.forEach(issue => {
+          const field = issue.path?.[0] || 'form'
+          newErrors[field] = issue.message
+        })
+        setErrors(newErrors)
+      }
+    }
+  }
+
+  const toggleComplete = (todo: Todo) => {
+    todoCollection.update(todo.id, (draft) => {
+      draft.completed = !draft.completed
+    })
+  }
+
+  return (
+    <div>
+      <h1>Todos</h1>
+
+      {errors.text && <div className="error">{errors.text}</div>}
+
+      <button onClick={() => addTodo("Buy groceries", "high")}>
+        Add Todo
+      </button>
+
+      <ul>
+        {todos?.map(todo => (
+          <li key={todo.id}>
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => toggleComplete(todo)}
+            />
+            <span>{todo.text}</span>
+            <span>Priority: {todo.priority}</span>
+            {todo.due_date && (
+              <span>Due: {todo.due_date.toLocaleDateString()}</span>
+            )}
+            <span>Created: {todo.created_at.toLocaleDateString()}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+### Example 2: E-commerce Product with Computed Fields
+
+```typescript
+import { z } from 'zod'
+
+// Schema with computed fields and transformations
+const productSchema = z.object({
+  id: z.string(),
+  name: z.string().min(3, "Product name must be at least 3 characters"),
+  description: z.string().max(500, "Description too long"),
+  base_price: z.number().positive("Price must be positive"),
+  tax_rate: z.number().min(0).max(1).default(0.1),
+  discount_percent: z.number().min(0).max(100).default(0),
+  stock: z.number().int().min(0).default(0),
+  category: z.enum(['electronics', 'clothing', 'food', 'other']),
+  tags: z.array(z.string()).default([]),
+  created_at: z.union([z.string(), z.date()])
+    .transform(val => typeof val === 'string' ? new Date(val) : val)
+    .default(() => new Date())
+}).transform(data => ({
+  ...data,
+  // Computed fields
+  final_price: data.base_price * (1 + data.tax_rate) * (1 - data.discount_percent / 100),
+  in_stock: data.stock > 0,
+  display_price: `$${(data.base_price * (1 + data.tax_rate) * (1 - data.discount_percent / 100)).toFixed(2)}`
+}))
+
+type Product = z.infer<typeof productSchema>
+
+const productCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['products'],
+    queryFn: async () => api.products.getAll(),
+    getKey: (item) => item.id,
+    schema: productSchema,
+    queryClient,
+
+    onInsert: async ({ transaction }) => {
+      const product = transaction.mutations[0].modified
+
+      // API only needs base fields, not computed ones
+      await api.products.create({
+        name: product.name,
+        description: product.description,
+        base_price: product.base_price,
+        tax_rate: product.tax_rate,
+        discount_percent: product.discount_percent,
+        stock: product.stock,
+        category: product.category,
+        tags: product.tags
+      })
+    }
+  })
+)
+
+// Usage
+function ProductList() {
+  const { data: products } = useLiveQuery(q =>
+    q.from({ product: productCollection })
+      .where(({ product }) => product.in_stock)  // Use computed field
+      .orderBy(({ product }) => product.final_price, 'asc')
+  )
+
+  const addProduct = () => {
+    productCollection.insert({
+      id: crypto.randomUUID(),
+      name: "Wireless Mouse",
+      description: "Ergonomic wireless mouse",
+      base_price: 29.99,
+      discount_percent: 10,
+      category: "electronics",
+      stock: 50
+      // tax_rate, tags, created_at filled by defaults
+      // final_price, in_stock, display_price computed automatically
+    })
+  }
+
+  return (
+    <div>
+      {products?.map(product => (
+        <div key={product.id}>
+          <h3>{product.name}</h3>
+          <p>{product.description}</p>
+          <p>Price: {product.display_price}</p>
+          <p>Stock: {product.in_stock ? `${product.stock} available` : 'Out of stock'}</p>
+          <p>Category: {product.category}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+---
+
+## For Integration Authors
+
+If you're building a custom collection (like Electric or TrailBase), you'll need to handle data parsing and serialization between your storage format and the in-memory collection format. This is separate from schema validation, which happens during client mutations.
+
+See the [Collection Options Creator Guide](/db/guides/collection-options-creator) for comprehensive documentation on creating custom collection integrations, including how to handle schemas, data parsing, and type transformations.
+
+---
+
+## Related Topics
+
+- **[Mutations Guide](/db/guides/mutations)** - Learn about optimistic mutations and how schemas validate mutation data
+- **[Error Handling Guide](/db/guides/error-handling)** - Comprehensive guide to handling `SchemaValidationError` and other errors
+- **[Collection Options Creator Guide](/db/guides/collection-options-creator)** - For integration authors: creating custom collection types with schema support
+- **[StandardSchema Specification](https://standardschema.dev)** - Full specification for StandardSchema v1
diff --git a/mintlify/db/index.mdx b/mintlify/db/index.mdx
new file mode 100644
index 000000000..3d38f2a52
--- /dev/null
+++ b/mintlify/db/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack DB"
+description: "Reactive client store for sync-first applications. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Reactive client store for sync-first applications.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/db/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/db">
+    Visit the canonical TanStack DB website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/db">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/db/installation.md b/mintlify/db/installation.md
new file mode 100644
index 000000000..98ad64b3b
--- /dev/null
+++ b/mintlify/db/installation.md
@@ -0,0 +1,128 @@
+---
+title: Installation
+id: installation
+---
+
+Each supported framework comes with its own package. Each framework package re-exports everything from the core `@tanstack/db` package.
+
+## React
+
+```sh
+npm install @tanstack/react-db
+```
+
+TanStack DB is compatible with React v16.8+
+
+## Solid
+
+```sh
+npm install @tanstack/solid-db
+```
+
+## Svelte
+
+```sh
+npm install @tanstack/svelte-db
+```
+
+## Vue
+
+```sh
+npm install @tanstack/vue-db
+```
+
+TanStack DB is compatible with Vue v3.3.0+
+
+## Angular
+
+```sh
+npm install @tanstack/angular-db
+```
+
+TanStack DB is compatible with Angular v16.0.0+
+
+## Vanilla JS
+
+```sh
+npm install @tanstack/db
+```
+
+Install the the core `@tanstack/db` package to use DB without a framework.
+
+## Collection Packages
+
+TanStack DB also provides specialized collection packages for different data sources and storage needs:
+
+### Query Collection
+
+For loading data using TanStack Query:
+
+```sh
+npm install @tanstack/query-db-collection
+```
+
+Use `queryCollectionOptions` to fetch data into collections using TanStack Query. This is perfect for REST APIs and existing TanStack Query setups.
+
+### Local Collections
+
+Local storage and in-memory collections are included with the framework packages:
+
+- **LocalStorageCollection** - For persistent local data that syncs across browser tabs
+- **LocalOnlyCollection** - For temporary in-memory data and UI state
+
+Both use `localStorageCollectionOptions` and `localOnlyCollectionOptions` respectively, available from your framework package (e.g., `@tanstack/react-db`).
+
+### Sync Engines
+
+#### Electric Collection
+
+For real-time sync with [ElectricSQL](https://electric-sql.com):
+
+```sh
+npm install @tanstack/electric-db-collection
+```
+
+Use `electricCollectionOptions` to sync data from Postgres databases through ElectricSQL shapes. Ideal for real-time, local-first applications.
+
+#### TrailBase Collection
+
+For syncing with [TrailBase](https://trailbase.io) backends:
+
+```sh
+npm install @tanstack/trailbase-db-collection
+```
+
+Use `trailBaseCollectionOptions` to sync records from TrailBase's Record APIs with built-in subscription support.
+
+#### PowerSync Collection
+
+For offline-first sync with [PowerSync](https://powersync.com):
+
+Use `powerSyncCollectionOptions` to sync data via PowerSync's SQLite-based database with real-time synchronization to PostgreSQL, MongoDB, and MySQL backends. Install the collection package plus the platform-specific PowerSync SDK and SQLite adapter:
+
+**Web**
+
+```sh
+npm install @tanstack/powersync-db-collection @powersync/web @journeyapps/wa-sqlite
+```
+
+**React Native**
+
+```sh
+npm install @tanstack/powersync-db-collection @powersync/react-native @powersync/op-sqlite @op-engineering/op-sqlite
+```
+
+Or use `@journeyapps/react-native-quick-sqlite` as an alternative SQLite adapter.
+
+See the [PowerSync Collection documentation](/db/collections/powersync-collection) for setup details.
+
+### RxDB Collection
+
+For offline-first apps and local persistence with [RxDB](https://rxdb.info):
+
+```sh
+npm install @tanstack/rxdb-db-collection
+```
+
+Use `rxdbCollectionOptions` to bridge an [RxDB collection](https://rxdb.info/rx-collection.html) into TanStack DB.
+This gives you reactive TanStack DB collections backed by RxDB's powerful local-first database, replication, and conflict handling features.
diff --git a/mintlify/db/overview.md b/mintlify/db/overview.md
new file mode 100644
index 000000000..bc346bc55
--- /dev/null
+++ b/mintlify/db/overview.md
@@ -0,0 +1,542 @@
+---
+title: Overview
+id: overview
+---
+
+# TanStack DB - Documentation
+
+Welcome to the TanStack DB documentation.
+
+TanStack DB is the reactive client store for your API. It solves the problems of building fast, modern apps, helping you:
+
+- avoid endpoint sprawl and network waterfalls by loading data into normalized collections
+- optimise client performance with sub-millisecond live queries and real-time reactivity
+- take the network off the interaction path with instant optimistic writes
+
+Data loading is optimized. Interactions feel instantaneous. Your backend stays simple and your app stays blazing fast. No matter how much data you load.
+
+## Remove the complexity from building fast, modern apps
+
+TanStack DB lets you query your data however your components need it, with a blazing-fast local query engine, real-time reactivity and instant optimistic updates.
+
+Instead of choosing between the least of two evils:
+
+1. **view-specific APIs** - complicating your backend and leading to network waterfalls
+2. **load everything and filter** - leading to slow loads and sluggish client performance
+
+TanStack DB enables a new way:
+
+3. **normalized collections** - keep your backend simple
+4. **query-driven sync** - optimizes your data loading
+5. **sub-millisecond live queries** - keep your app fast and responsive
+
+It extends TanStack Query with collections, live queries and optimistic mutations, working seamlessly with REST APIs, sync engines, or any data source.
+
+## Contents
+
+- [How it works](#how-it-works) &mdash; understand the TanStack DB development model and how the pieces fit together
+- [API reference](#api-reference) &mdash; for the primitives and function interfaces
+- [Usage examples](#usage-examples) &mdash; examples of common usage patterns
+- [More info](#more-info) &mdash; where to find support and more information
+
+## How it works
+
+TanStack DB works by:
+
+- [defining collections](#defining-collections) typed sets of objects that can be populated with data
+- [using live queries](#using-live-queries) to query data from/across collections
+- [making optimistic mutations](#making-optimistic-mutations) using transactional mutators
+
+```tsx
+// Define collections to load data into
+const todoCollection = createCollection({
+  // ...your config
+  onUpdate: updateMutationFn,
+})
+
+const Todos = () => {
+  // Bind data using live queries
+  const { data: todos } = useLiveQuery((q) =>
+    q.from({ todo: todoCollection }).where(({ todo }) => not(todo.completed))
+  )
+
+  const complete = (todo) => {
+    // Instantly applies optimistic state
+    todoCollection.update(todo.id, (draft) => {
+      draft.completed = true
+    })
+  }
+
+  return (
+    <ul>
+      {todos.map((todo) => (
+        <li key={todo.id} onClick={() => complete(todo)}>
+          {todo.text}
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+### Defining collections
+
+Collections are typed sets of objects that can be populated with data. They're designed to de-couple loading data into your app from binding data to your components.
+
+Collections can be populated in many ways, including:
+
+- fetching data, for example [from API endpoints using TanStack Query](https://tanstack.com/query)
+- syncing data, for example [using a sync engine like ElectricSQL](https://electric-sql.com/) or [PowerSync](https://powersync.com)
+- storing local data, for example [using localStorage for user preferences and settings](/db/collections/local-storage-collection) or [in-memory client data or UI state](/db/collections/local-only-collection)
+- from live collection queries, creating [derived collections as materialised views](#using-live-queries)
+
+Once you have your data in collections, you can query across them using live queries in your components.
+
+#### Sync Modes
+
+Collections support three sync modes to optimize data loading:
+
+- **Eager mode** (default): Loads entire collection upfront. Best for &lt;10k rows of mostly static data like user preferences or small reference tables.
+- **On-demand mode**: Loads only what queries request. Best for large datasets (>50k rows), search interfaces, and catalogs where most data won't be accessed.
+- **Progressive mode**: Loads query subset immediately, syncs full dataset in background. Best for collaborative apps needing instant first paint AND sub-millisecond queries.
+
+With on-demand mode, your component's query becomes the API call:
+
+```tsx
+const productsCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['products'],
+    queryFn: async (ctx) => {
+      // Query predicates passed automatically in ctx.meta
+      const params = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
+      return api.getProducts(params) // e.g., GET /api/products?category=electronics&price_lt=100
+    },
+    syncMode: 'on-demand', // ← Enable query-driven sync
+  })
+)
+```
+
+TanStack DB automatically collapses duplicate requests, performs delta loading when expanding queries, optimizes joins into minimal batched requests, and respects your TanStack Query cache policies. You often end up with _fewer_ network requests than custom view-specific APIs.
+
+See the [Query Collection documentation](/db/collections/query-collection#queryfn-and-predicate-push-down) for full predicate mapping details.
+
+### Using live queries
+
+Live queries are used to query data out of collections. Live queries are reactive: when the underlying data changes in a way that would affect the query result, the result is incrementally updated and returned from the query, triggering a re-render.
+
+TanStack DB live queries are implemented using [d2ts](https://github.com/electric-sql/d2ts), a TypeScript implementation of differential dataflow. This allows the query results to update _incrementally_ (rather than by re-running the whole query). This makes them blazing fast, usually sub-millisecond, even for highly complex queries.
+
+**Performance:** Updating one row in a sorted 100,000-item collection completes in ~0.7ms on an M1 Pro MacBook—fast enough that optimistic updates feel truly instantaneous, even with complex queries and large datasets.
+
+Live queries support joins across collections. This allows you to:
+
+1. load normalised data into collections and then de-normalise it through queries; simplifying your backend by avoiding the need for bespoke API endpoints that match your client
+2. join data from multiple sources; for example, syncing some data out of a database, fetching some other data from an external API and then joining these into a unified data model for your front-end code
+
+Every query returns another collection which can _also_ be queried.
+
+For more details on live queries, see the [Live Queries](/db/guides/live-queries) documentation.
+
+### Making optimistic mutations
+
+Collections support `insert`, `update` and `delete` operations. When called, by default they trigger the corresponding `onInsert`, `onUpdate`, `onDelete` handlers which are responsible for writing the mutation to the backend.
+
+```ts
+// Define collection with persistence handlers
+const todoCollection = createCollection({
+  id: "todos",
+  // ... other config
+  onUpdate: async ({ transaction }) => {
+    const { original, changes } = transaction.mutations[0]
+    await api.todos.update(original.id, changes)
+  },
+})
+
+// Immediately applies optimistic state
+todoCollection.update(todo.id, (draft) => {
+  draft.completed = true
+})
+```
+
+The collection maintains optimistic state separately from synced data. When live queries read from the collection, they see a local view that overlays the optimistic mutations on top of the immutable synced data.
+
+The optimistic state is held until the handler resolves, at which point the data is persisted to the server and synced back. If the handler throws an error, the optimistic state is rolled back.
+
+For more complex mutations, you can create custom actions with `createOptimisticAction` or custom transactions with `createTransaction`. See the [Mutations guide](/db/guides/mutations) for details.
+
+### Uni-directional data flow
+
+This combines to support a model of uni-directional data flow, extending the redux/flux style state management pattern beyond the client, to take in the server as well:
+
+<figure>
+  <a href="https://raw.githubusercontent.com/TanStack/db/main/docs/unidirectional-data-flow.lg.png" target="_blank">
+    <img src="https://raw.githubusercontent.com/TanStack/db/main/docs/unidirectional-data-flow.png" />
+  </a>
+</figure>
+
+With an instant inner loop of optimistic state, superseded in time by the slower outer loop of persisting to the server and syncing the updated server state back into the collection.
+
+## API reference
+
+### Collections
+
+TanStack DB provides several built-in collection types for different data sources and use cases. Each collection type has its own detailed documentation page:
+
+#### Built-in Collection Types
+
+**Fetch Collections**
+
+- **[QueryCollection](/db/collections/query-collection)** &mdash; Load data into collections using TanStack Query for REST APIs and data fetching.
+
+**Sync Collections**
+
+- **[ElectricCollection](/db/collections/electric-collection)** &mdash; Sync data into collections from Postgres using ElectricSQL's real-time sync engine.
+
+- **[TrailBaseCollection](/db/collections/trailbase-collection)** &mdash; Sync data into collections using TrailBase's self-hosted backend with real-time subscriptions.
+
+- **[RxDBCollection](/db/collections/rxdb-collection)** &mdash; Integrate with RxDB for offline-first local persistence with powerful replication and sync capabilities.
+
+- **[PowerSyncCollection](/db/collections/powersync-collection)** &mdash; Sync with PowerSync's SQLite-based database for offline-first persistence with real-time synchronization with PostgreSQL, MongoDB, and MySQL backends.
+
+**Local Collections**
+
+- **[LocalStorageCollection](/db/collections/local-storage-collection)** &mdash; Store small amounts of local-only state that persists across sessions and syncs across browser tabs.
+
+- **[LocalOnlyCollection](/db/collections/local-only-collection)** &mdash; Manage in-memory client data or UI state that doesn't need persistence or cross-tab sync.
+
+#### Collection Schemas
+
+All collections optionally (though strongly recommended) support adding a `schema`.
+
+If provided, this must be a [Standard Schema](https://standardschema.dev) compatible schema instance, such as [Zod](https://zod.dev), [Valibot](https://valibot.dev), [ArkType](https://arktype.io), or [Effect](https://effect.website/docs/schema/introduction/).
+
+**What schemas do:**
+
+1. **Runtime validation** - Ensures data meets your constraints before entering the collection
+2. **Type transformations** - Convert input types to rich output types (e.g., string → Date)
+3. **Default values** - Automatically populate missing fields
+4. **Type safety** - Infer TypeScript types from your schema
+
+**Example:**
+```typescript
+const todoSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  completed: z.boolean().default(false),
+  created_at: z.string().transform(val => new Date(val)),  // string → Date
+  priority: z.number().default(0)
+})
+
+const collection = createCollection(
+  queryCollectionOptions({
+    schema: todoSchema,
+    // ...
+  })
+)
+
+// Users provide simple inputs
+collection.insert({
+  id: "1",
+  text: "Buy groceries",
+  created_at: "2024-01-01T00:00:00Z"  // string
+  // completed and priority filled automatically
+})
+
+// Collection stores and returns rich types
+const todo = collection.get("1")
+console.log(todo.created_at.getFullYear())  // It's a Date!
+console.log(todo.completed)  // false (default)
+```
+
+The collection will use the schema for its type inference. If you provide a schema, you cannot also pass an explicit type parameter (e.g., `createCollection<Todo>()`).
+
+**Learn more:** See the [Schemas guide](/db/guides/schemas) for comprehensive documentation on schema validation, type transformations, and best practices.
+
+#### Creating Custom Collection Types
+
+You can create your own collection types by implementing the `Collection` interface found in [`../packages/db/src/collection/index.ts`](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts).
+
+See the existing implementations in [`../packages/db`](https://github.com/TanStack/db/tree/main/packages/db), [`../packages/query-db-collection`](https://github.com/TanStack/db/tree/main/packages/query-db-collection), [`../packages/electric-db-collection`](https://github.com/TanStack/db/tree/main/packages/electric-db-collection), [`../packages/trailbase-db-collection`](https://github.com/TanStack/db/tree/main/packages/trailbase-db-collection) and [`../packages/powersync-db-collection`](https://github.com/TanStack/db/tree/main/packages/powersync-db-collection) for reference. Also see the [Collection Options Creator guide](/db/guides/collection-options-creator) for a pattern to create reusable collection configuration factories.
+
+### Live queries
+
+#### `useLiveQuery` hook
+
+Use the `useLiveQuery` hook to assign live query results to a state variable in your React components:
+
+```ts
+import { useLiveQuery } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+const Todos = () => {
+  const { data: todos } = useLiveQuery((q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.completed, false))
+      .orderBy(({ todo }) => todo.created_at, 'asc')
+      .select(({ todo }) => ({
+        id: todo.id,
+        text: todo.text
+      }))
+  )
+
+  return <List items={ todos } />
+}
+```
+
+You can also query across collections with joins:
+
+```ts
+import { useLiveQuery } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+const Todos = () => {
+  const { data: todos } = useLiveQuery((q) =>
+    q
+      .from({ todos: todoCollection })
+      .join(
+        { lists: listCollection },
+        ({ todos, lists }) => eq(lists.id, todos.listId),
+        'inner'
+      )
+      .where(({ lists }) => eq(lists.active, true))
+      .select(({ todos, lists }) => ({
+        id: todos.id,
+        title: todos.title,
+        listName: lists.name
+      }))
+  )
+
+  return <List items={ todos } />
+}
+```
+
+#### `useLiveSuspenseQuery` hook
+
+For React Suspense support, use `useLiveSuspenseQuery`. This hook suspends rendering during initial data load and guarantees that `data` is always defined:
+
+```tsx
+import { useLiveSuspenseQuery } from '@tanstack/react-db'
+import { Suspense } from 'react'
+
+const Todos = () => {
+  // data is always defined - no need for optional chaining
+  const { data: todos } = useLiveSuspenseQuery((q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.completed, false))
+  )
+
+  return <List items={ todos } />
+}
+
+const App = () => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <Todos />
+  </Suspense>
+)
+```
+
+See the [React Suspense section in Live Queries](/db/guides/live-queries#using-with-react-suspense) for detailed usage patterns and when to use `useLiveSuspenseQuery` vs `useLiveQuery`.
+
+#### `queryBuilder`
+
+You can also build queries directly (outside of the component lifecycle) using the underlying `queryBuilder` API:
+
+```ts
+import { createLiveQueryCollection, eq } from "@tanstack/db"
+
+const completedTodos = createLiveQueryCollection({
+  startSync: true,
+  query: (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.completed, true)),
+})
+
+const results = completedTodos.toArray
+```
+
+Note also that:
+
+1. the query results [are themselves a collection](#derived-collections)
+2. the `useLiveQuery` automatically starts and stops live query subscriptions when you mount and unmount your components; if you're creating queries manually, you need to manually manage the subscription lifecycle yourself
+
+See the [Live Queries](/db/guides/live-queries) documentation for more details.
+
+### Transactional mutators
+
+For more complex mutations beyond simple CRUD operations, TanStack DB provides `createOptimisticAction` and `createTransaction` for creating custom mutations with full control over the mutation lifecycle.
+
+See the [Mutations guide](/db/guides/mutations) for comprehensive documentation on:
+
+- Creating custom actions with `createOptimisticAction`
+- Manual transactions with `createTransaction`
+- Mutation merging behavior
+- Controlling optimistic vs non-optimistic updates
+- Handling temporary IDs
+- Transaction lifecycle states
+
+## Usage examples
+
+Here we illustrate two common ways of using TanStack DB:
+
+1. [using TanStack Query](#1-tanstack-query) with an existing REST API
+2. [using a sync engine](#2-sync-engine) for real-time sync with your backend
+
+> [!TIP]
+> You can combine these patterns. One of the benefits of TanStack DB is that you can integrate different ways of loading data and handling mutations into the same app. Your components don't need to know where the data came from or goes.
+
+### 1. TanStack Query
+
+You can use TanStack DB with your existing REST API via TanStack Query.
+
+The steps are to:
+
+1. create [QueryCollection](/db/collections/query-collection)s that load data using TanStack Query
+2. implement mutation handlers that handle mutations by posting them to your API endpoints
+
+```tsx
+import { useLiveQuery, createCollection } from "@tanstack/react-db"
+import { queryCollectionOptions } from "@tanstack/query-db-collection"
+
+// Load data into collections using TanStack Query.
+// It's common to define these in a `collections` module.
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async () => fetch("/api/todos"),
+    getKey: (item) => item.id,
+    schema: todoSchema, // any standard schema
+    onInsert: async ({ transaction }) => {
+      const { changes: newTodo } = transaction.mutations[0]
+
+      // Handle the local write by sending it to your API.
+      await api.todos.create(newTodo)
+    },
+    // also add onUpdate, onDelete as needed.
+  })
+)
+const listCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todo-lists"],
+    queryFn: async () => fetch("/api/todo-lists"),
+    getKey: (item) => item.id,
+    schema: todoListSchema,
+    onInsert: async ({ transaction }) => {
+      const { changes: newTodo } = transaction.mutations[0]
+
+      // Handle the local write by sending it to your API.
+      await api.todoLists.create(newTodo)
+    },
+    // also add onUpdate, onDelete as needed.
+  })
+)
+
+const Todos = () => {
+  // Read the data using live queries. Here we show a live
+  // query that joins across two collections.
+  const { data: todos } = useLiveQuery((q) =>
+    q
+      .from({ todo: todoCollection })
+      .join(
+        { list: listCollection },
+        ({ todo, list }) => eq(list.id, todo.list_id),
+        "inner"
+      )
+      .where(({ list }) => eq(list.active, true))
+      .select(({ todo, list }) => ({
+        id: todo.id,
+        text: todo.text,
+        status: todo.status,
+        listName: list.name,
+      }))
+  )
+
+  // ...
+}
+```
+
+This pattern allows you to extend an existing TanStack Query application, or any application built on a REST API, with blazing fast, cross-collection live queries and local optimistic mutations with automatically managed optimistic state.
+
+### 2. Sync Engine
+
+One of the most powerful ways of using TanStack DB is with a sync engine, for a fully local-first experience with real-time sync. This allows you to incrementally adopt sync into an existing app, whilst still handling writes with your existing API.
+
+#### Why Sync Engines?
+
+While TanStack DB works great with REST APIs, sync engines provide powerful benefits:
+
+- **Easy real-time updates**: No WebSocket plumbing—write to your database and changes stream automatically to all clients
+- **Automatic side-effects**: When a mutation triggers cascading changes across tables, all affected data syncs automatically without manual cache invalidation
+- **Efficient delta updates**: Only changed rows cross the wire, making it practical to load large datasets client-side
+
+This pattern enables the "load everything once" approach that makes apps like Linear and Figma feel instant.
+
+Here, we illustrate this pattern using [ElectricSQL](https://electric-sql.com) as the sync engine, but this pattern also works with other sync engines like [PowerSync](https://www.powersync.com/?utm_source=tanstack&utm_campaign=tanstack_partner), [RxDB](https://rxdb.info/), and [TrailBase](https://trailbase.io/).
+
+```tsx
+import type { Collection } from "@tanstack/db"
+import type {
+  MutationFn,
+  PendingMutation,
+  createCollection,
+} from "@tanstack/react-db"
+import { electricCollectionOptions } from "@tanstack/electric-db-collection"
+
+export const todoCollection = createCollection(
+  electricCollectionOptions({
+    id: "todos",
+    schema: todoSchema,
+    // Electric syncs data using "shapes". These are filtered views
+    // on database tables that Electric keeps in sync for you.
+    shapeOptions: {
+      url: "https://api.electric-sql.cloud/v1/shape",
+      params: {
+        table: "todos",
+      },
+    },
+    getKey: (item) => item.id,
+    schema: todoSchema,
+    onInsert: async ({ transaction }) => {
+      const response = await api.todos.create(transaction.mutations[0].modified)
+
+      return { txid: response.txid }
+    },
+    // You can also implement onUpdate, onDelete as needed.
+  })
+)
+
+const AddTodo = () => {
+  return (
+    <Button
+      onClick={() => todoCollection.insert({ text: "🔥 Make app faster" })}
+    />
+  )
+}
+```
+
+## React Native
+
+When using TanStack DB with React Native, you need to install and configure a UUID generation library since React Native doesn't include crypto.randomUUID() by default.
+
+Install the `react-native-random-uuid` package:
+
+```bash
+npm install react-native-random-uuid
+```
+
+Then import it at the entry point of your React Native app (e.g., in your `App.js` or `index.js`):
+
+```javascript
+import "react-native-random-uuid"
+```
+
+This polyfill provides the `crypto.randomUUID()` function that TanStack DB uses internally for generating unique identifiers.
+
+## More info
+
+If you have questions / need help using TanStack DB, let us know on the Discord or start a GitHub discussion:
+
+- [`#db` channel in the TanStack discord](https://discord.gg/yjUNbvbraC)
+- [GitHub discussions](https://github.com/tanstack/db/discussions)
diff --git a/mintlify/db/quick-start.md b/mintlify/db/quick-start.md
new file mode 100644
index 000000000..8e4cef4a7
--- /dev/null
+++ b/mintlify/db/quick-start.md
@@ -0,0 +1,183 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+TanStack DB is the reactive client-first store for your API. Stop building custom endpoints for every view—query your data however your components need it. This example will show you how to:
+
+- **Load data** into collections using TanStack Query
+- **Query data** with blazing-fast live queries
+- **Mutate data** with instant optimistic updates
+
+```tsx
+import { createCollection, eq, useLiveQuery } from '@tanstack/react-db'
+import { queryCollectionOptions } from '@tanstack/query-db-collection'
+
+// Define a collection that loads data using TanStack Query
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json()
+    },
+    getKey: (item) => item.id,
+    onUpdate: async ({ transaction }) => {
+      const { original, modified } = transaction.mutations[0]
+      await fetch(`/api/todos/${original.id}`, {
+        method: 'PUT',
+        body: JSON.stringify(modified),
+      })
+    },
+  })
+)
+
+function Todos() {
+  // Live query that updates automatically when data changes
+  const { data: todos } = useLiveQuery((q) =>
+    q.from({ todo: todoCollection })
+     .where(({ todo }) => eq(todo.completed, false))
+     .orderBy(({ todo }) => todo.createdAt, 'desc')
+  )
+
+  const toggleTodo = (todo) => {
+    // Instantly applies optimistic state, then syncs to server
+    todoCollection.update(todo.id, (draft) => {
+      draft.completed = !draft.completed
+    })
+  }
+
+  return (
+    <ul>
+      {todos.map((todo) => (
+        <li key={todo.id} onClick={() => toggleTodo(todo)}>
+          {todo.text}
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+You now have collections, live queries, and optimistic mutations! Let's break this down further.
+
+## Installation
+
+```bash
+npm install @tanstack/react-db @tanstack/query-db-collection
+```
+
+## 1. Create a Collection
+
+Collections store your data and handle persistence. The `queryCollectionOptions` loads data using TanStack Query and defines mutation handlers for server sync:
+
+```tsx
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json()
+    },
+    getKey: (item) => item.id,
+    // Handle all CRUD operations
+    onInsert: async ({ transaction }) => {
+      const { modified: newTodo } = transaction.mutations[0]
+      await fetch('/api/todos', {
+        method: 'POST',
+        body: JSON.stringify(newTodo),
+      })
+    },
+    onUpdate: async ({ transaction }) => {
+      const { original, modified } = transaction.mutations[0]
+      await fetch(`/api/todos/${original.id}`, {
+        method: 'PUT', 
+        body: JSON.stringify(modified),
+      })
+    },
+    onDelete: async ({ transaction }) => {
+      const { original } = transaction.mutations[0]
+      await fetch(`/api/todos/${original.id}`, { method: 'DELETE' })
+    },
+  })
+)
+```
+
+## 2. Query with Live Queries
+
+Live queries reactively update when data changes. They support filtering, sorting, joins, and transformations:
+
+```tsx
+function TodoList() {
+  // Basic filtering and sorting
+  const { data: incompleteTodos } = useLiveQuery((q) =>
+    q.from({ todo: todoCollection })
+     .where(({ todo }) => eq(todo.completed, false))
+     .orderBy(({ todo }) => todo.createdAt, 'desc')
+  )
+
+  // Transform the data
+  const { data: todoSummary } = useLiveQuery((q) =>
+    q.from({ todo: todoCollection })
+     .select(({ todo }) => ({
+       id: todo.id,
+       summary: `${todo.text} (${todo.completed ? 'done' : 'pending'})`,
+       priority: todo.priority || 'normal'
+     }))
+  )
+
+  return <div>{/* Render todos */}</div>
+}
+```
+
+## 3. Optimistic Mutations
+
+Mutations apply instantly and sync to your server. If the server request fails, changes automatically roll back:
+
+```tsx
+function TodoActions({ todo }) {
+  const addTodo = () => {
+    todoCollection.insert({
+      id: crypto.randomUUID(),
+      text: 'New todo',
+      completed: false,
+      createdAt: new Date(),
+    })
+  }
+
+  const toggleComplete = () => {
+    todoCollection.update(todo.id, (draft) => {
+      draft.completed = !draft.completed
+    })
+  }
+
+  const updateText = (newText) => {
+    todoCollection.update(todo.id, (draft) => {
+      draft.text = newText
+    })
+  }
+
+  const deleteTodo = () => {
+    todoCollection.delete(todo.id)
+  }
+
+  return (
+    <div>
+      <button onClick={addTodo}>Add Todo</button>
+      <button onClick={toggleComplete}>Toggle</button>
+      <button onClick={() => updateText('Updated!')}>Edit</button>
+      <button onClick={deleteTodo}>Delete</button>
+    </div>
+  )
+}
+```
+
+## Next Steps
+
+You now understand the basics of TanStack DB! The collection loads and persists data, live queries provide reactive views, and mutations give instant feedback with automatic server sync.
+
+Explore the docs to learn more about:
+
+- **[Installation](/db/installation)** - All framework and collection packages
+- **[Overview](/db/overview)** - Complete feature overview and examples
+- **[Live Queries](/db/guides/live-queries)** - Advanced querying, joins, and aggregations
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/Aggregate.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Aggregate.md
new file mode 100644
index 000000000..87de40a6a
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Aggregate.md
@@ -0,0 +1,104 @@
+---
+id: Aggregate
+title: Aggregate
+---
+
+# Class: Aggregate\&lt;T\>
+
+Defined in: [packages/db/src/query/ir.ts:166](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L166)
+
+## Extends
+
+- `BaseExpression`\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Aggregate<T>(name, args): Aggregate<T>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:168](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L168)
+
+#### Parameters
+
+##### name
+
+`string`
+
+##### args
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`any`\>[]
+
+#### Returns
+
+`Aggregate`\&lt;`T`\>
+
+#### Overrides
+
+```ts
+BaseExpression<T>.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: T;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### args
+
+```ts
+args: BasicExpression<any>[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:170](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L170)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:169](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L169)
+
+***
+
+### type
+
+```ts
+type: "agg";
+```
+
+Defined in: [packages/db/src/query/ir.ts:167](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L167)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/CollectionRef.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/CollectionRef.md
new file mode 100644
index 000000000..1d09c44a5
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/CollectionRef.md
@@ -0,0 +1,98 @@
+---
+id: CollectionRef
+title: CollectionRef
+---
+
+# Class: CollectionRef
+
+Defined in: [packages/db/src/query/ir.ts:85](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L85)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionRef(collection, alias): CollectionRef;
+```
+
+Defined in: [packages/db/src/query/ir.ts:87](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L87)
+
+#### Parameters
+
+##### collection
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl)
+
+##### alias
+
+`string`
+
+#### Returns
+
+`CollectionRef`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### alias
+
+```ts
+alias: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:89](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L89)
+
+***
+
+### collection
+
+```ts
+collection: CollectionImpl;
+```
+
+Defined in: [packages/db/src/query/ir.ts:88](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L88)
+
+***
+
+### type
+
+```ts
+type: "collectionRef";
+```
+
+Defined in: [packages/db/src/query/ir.ts:86](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L86)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/ConditionalSelect.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/ConditionalSelect.md
new file mode 100644
index 000000000..bd206ee3a
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/ConditionalSelect.md
@@ -0,0 +1,98 @@
+---
+id: ConditionalSelect
+title: ConditionalSelect
+---
+
+# Class: ConditionalSelect
+
+Defined in: [packages/db/src/query/ir.ts:204](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L204)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new ConditionalSelect(branches, defaultValue?): ConditionalSelect;
+```
+
+Defined in: [packages/db/src/query/ir.ts:206](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L206)
+
+#### Parameters
+
+##### branches
+
+[`ConditionalSelectBranch`](/db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch)[]
+
+##### defaultValue?
+
+[`SelectValueExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression)
+
+#### Returns
+
+`ConditionalSelect`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### branches
+
+```ts
+branches: ConditionalSelectBranch[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:207](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L207)
+
+***
+
+### defaultValue?
+
+```ts
+optional defaultValue: SelectValueExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:208](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L208)
+
+***
+
+### type
+
+```ts
+type: "conditionalSelect";
+```
+
+Defined in: [packages/db/src/query/ir.ts:205](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L205)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/Func.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Func.md
new file mode 100644
index 000000000..b17a4a7ca
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Func.md
@@ -0,0 +1,104 @@
+---
+id: Func
+title: Func
+---
+
+# Class: Func\&lt;T\>
+
+Defined in: [packages/db/src/query/ir.ts:151](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L151)
+
+## Extends
+
+- `BaseExpression`\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Func<T>(name, args): Func<T>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:153](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L153)
+
+#### Parameters
+
+##### name
+
+`string`
+
+##### args
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`any`\>[]
+
+#### Returns
+
+`Func`\&lt;`T`\>
+
+#### Overrides
+
+```ts
+BaseExpression<T>.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: T;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### args
+
+```ts
+args: BasicExpression<any>[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:155](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L155)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:154](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L154)
+
+***
+
+### type
+
+```ts
+type: "func";
+```
+
+Defined in: [packages/db/src/query/ir.ts:152](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L152)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/IncludesSubquery.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/IncludesSubquery.md
new file mode 100644
index 000000000..50a0461e8
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/IncludesSubquery.md
@@ -0,0 +1,190 @@
+---
+id: IncludesSubquery
+title: IncludesSubquery
+---
+
+# Class: IncludesSubquery
+
+Defined in: [packages/db/src/query/ir.ts:176](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L176)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new IncludesSubquery(
+   query, 
+   correlationField, 
+   childCorrelationField, 
+   fieldName, 
+   parentFilters?, 
+   parentProjection?, 
+   materialization?, 
+   scalarField?): IncludesSubquery;
+```
+
+Defined in: [packages/db/src/query/ir.ts:178](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L178)
+
+#### Parameters
+
+##### query
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+##### correlationField
+
+[`PropRef`](/db/reference/@tanstack/namespaces/IR/classes/PropRef)
+
+##### childCorrelationField
+
+[`PropRef`](/db/reference/@tanstack/namespaces/IR/classes/PropRef)
+
+##### fieldName
+
+`string`
+
+##### parentFilters?
+
+[`Where`](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)[]
+
+##### parentProjection?
+
+[`PropRef`](/db/reference/@tanstack/namespaces/IR/classes/PropRef)\&lt;`any`\>[]
+
+##### materialization?
+
+[`IncludesMaterialization`](/db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization) = `...`
+
+##### scalarField?
+
+`string`
+
+#### Returns
+
+`IncludesSubquery`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### childCorrelationField
+
+```ts
+childCorrelationField: PropRef;
+```
+
+Defined in: [packages/db/src/query/ir.ts:181](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L181)
+
+***
+
+### correlationField
+
+```ts
+correlationField: PropRef;
+```
+
+Defined in: [packages/db/src/query/ir.ts:180](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L180)
+
+***
+
+### fieldName
+
+```ts
+fieldName: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:182](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L182)
+
+***
+
+### materialization
+
+```ts
+materialization: IncludesMaterialization;
+```
+
+Defined in: [packages/db/src/query/ir.ts:185](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L185)
+
+***
+
+### parentFilters?
+
+```ts
+optional parentFilters: Where[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:183](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L183)
+
+***
+
+### parentProjection?
+
+```ts
+optional parentProjection: PropRef<any>[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:184](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L184)
+
+***
+
+### query
+
+```ts
+query: QueryIR;
+```
+
+Defined in: [packages/db/src/query/ir.ts:179](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L179)
+
+***
+
+### scalarField?
+
+```ts
+optional scalarField: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:186](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L186)
+
+***
+
+### type
+
+```ts
+type: "includesSubquery";
+```
+
+Defined in: [packages/db/src/query/ir.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L177)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/PropRef.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/PropRef.md
new file mode 100644
index 000000000..c4cc33258
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/PropRef.md
@@ -0,0 +1,90 @@
+---
+id: PropRef
+title: PropRef
+---
+
+# Class: PropRef\&lt;T\>
+
+Defined in: [packages/db/src/query/ir.ts:133](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L133)
+
+## Extends
+
+- `BaseExpression`\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Constructors
+
+### Constructor
+
+```ts
+new PropRef<T>(path): PropRef<T>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:135](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L135)
+
+#### Parameters
+
+##### path
+
+`string`[]
+
+#### Returns
+
+`PropRef`\&lt;`T`\>
+
+#### Overrides
+
+```ts
+BaseExpression<T>.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: T;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### path
+
+```ts
+path: string[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:136](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L136)
+
+***
+
+### type
+
+```ts
+type: "ref";
+```
+
+Defined in: [packages/db/src/query/ir.ts:134](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L134)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/QueryRef.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/QueryRef.md
new file mode 100644
index 000000000..3de884f3b
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/QueryRef.md
@@ -0,0 +1,98 @@
+---
+id: QueryRef
+title: QueryRef
+---
+
+# Class: QueryRef
+
+Defined in: [packages/db/src/query/ir.ts:95](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L95)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryRef(query, alias): QueryRef;
+```
+
+Defined in: [packages/db/src/query/ir.ts:97](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L97)
+
+#### Parameters
+
+##### query
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+##### alias
+
+`string`
+
+#### Returns
+
+`QueryRef`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### alias
+
+```ts
+alias: string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:99](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L99)
+
+***
+
+### query
+
+```ts
+query: QueryIR;
+```
+
+Defined in: [packages/db/src/query/ir.ts:98](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L98)
+
+***
+
+### type
+
+```ts
+type: "queryRef";
+```
+
+Defined in: [packages/db/src/query/ir.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L96)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionAll.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionAll.md
new file mode 100644
index 000000000..106e9a908
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionAll.md
@@ -0,0 +1,105 @@
+---
+id: UnionAll
+title: UnionAll
+---
+
+# Class: UnionAll
+
+Defined in: [packages/db/src/query/ir.ts:116](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L116)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnionAll(queries): UnionAll;
+```
+
+Defined in: [packages/db/src/query/ir.ts:124](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L124)
+
+Result-level UNION ALL. Downstream query clauses see the union result row
+shape, not the branch source aliases. Optimizers may push safe operations
+into branches, but compiler phases should treat this as a derived relation
+unless they are explicitly handling branch lowering.
+
+#### Parameters
+
+##### queries
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)[]
+
+#### Returns
+
+`UnionAll`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### queries
+
+```ts
+queries: QueryIR[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:124](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L124)
+
+***
+
+### type
+
+```ts
+type: "unionAll";
+```
+
+Defined in: [packages/db/src/query/ir.ts:117](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L117)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
+
+## Accessors
+
+### alias
+
+#### Get Signature
+
+```ts
+get alias(): string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:128](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L128)
+
+##### Returns
+
+`string`
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionFrom.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionFrom.md
new file mode 100644
index 000000000..c6aec8581
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/UnionFrom.md
@@ -0,0 +1,100 @@
+---
+id: UnionFrom
+title: UnionFrom
+---
+
+# Class: UnionFrom
+
+Defined in: [packages/db/src/query/ir.ts:105](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L105)
+
+## Extends
+
+- `BaseExpression`
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnionFrom(sources): UnionFrom;
+```
+
+Defined in: [packages/db/src/query/ir.ts:107](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L107)
+
+#### Parameters
+
+##### sources
+
+([`CollectionRef`](/db/reference/@tanstack/namespaces/IR/classes/CollectionRef) \| [`QueryRef`](/db/reference/@tanstack/namespaces/IR/classes/QueryRef))[]
+
+#### Returns
+
+`UnionFrom`
+
+#### Overrides
+
+```ts
+BaseExpression.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### sources
+
+```ts
+sources: (CollectionRef | QueryRef)[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:107](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L107)
+
+***
+
+### type
+
+```ts
+type: "unionFrom";
+```
+
+Defined in: [packages/db/src/query/ir.ts:106](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L106)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
+
+## Accessors
+
+### alias
+
+#### Get Signature
+
+```ts
+get alias(): string;
+```
+
+Defined in: [packages/db/src/query/ir.ts:111](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L111)
+
+##### Returns
+
+`string`
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/classes/Value.md b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Value.md
new file mode 100644
index 000000000..a661f042e
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/classes/Value.md
@@ -0,0 +1,90 @@
+---
+id: Value
+title: Value
+---
+
+# Class: Value\&lt;T\>
+
+Defined in: [packages/db/src/query/ir.ts:142](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L142)
+
+## Extends
+
+- `BaseExpression`\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Value<T>(value): Value<T>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:144](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L144)
+
+#### Parameters
+
+##### value
+
+`T`
+
+#### Returns
+
+`Value`\&lt;`T`\>
+
+#### Overrides
+
+```ts
+BaseExpression<T>.constructor
+```
+
+## Properties
+
+### \_\_returnType
+
+```ts
+readonly __returnType: T;
+```
+
+Defined in: [packages/db/src/query/ir.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L82)
+
+**`Internal`**
+
+- Type brand for TypeScript inference
+
+#### Inherited from
+
+```ts
+BaseExpression.__returnType
+```
+
+***
+
+### type
+
+```ts
+type: "val";
+```
+
+Defined in: [packages/db/src/query/ir.ts:143](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L143)
+
+#### Overrides
+
+```ts
+BaseExpression.type
+```
+
+***
+
+### value
+
+```ts
+value: T;
+```
+
+Defined in: [packages/db/src/query/ir.ts:145](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L145)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/createResidualWhere.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/createResidualWhere.md
new file mode 100644
index 000000000..f46e8ce76
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/createResidualWhere.md
@@ -0,0 +1,24 @@
+---
+id: createResidualWhere
+title: createResidualWhere
+---
+
+# Function: createResidualWhere()
+
+```ts
+function createResidualWhere(expression): Where;
+```
+
+Defined in: [packages/db/src/query/ir.ts:296](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L296)
+
+Create a residual Where clause from an expression
+
+## Parameters
+
+### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Returns
+
+[`Where`](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/followRef.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/followRef.md
new file mode 100644
index 000000000..de9ebe501
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/followRef.md
@@ -0,0 +1,53 @@
+---
+id: followRef
+title: followRef
+---
+
+# Function: followRef()
+
+```ts
+function followRef(
+   query, 
+   ref, 
+   collection): 
+  | void
+  | {
+  alias?: string;
+  collection: Collection;
+  path: string[];
+};
+```
+
+Defined in: [packages/db/src/query/ir.ts:332](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L332)
+
+Follows the given reference in a query
+until its finds the root field the reference points to.
+
+## Parameters
+
+### query
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+### ref
+
+[`PropRef`](/db/reference/@tanstack/namespaces/IR/classes/PropRef)\&lt;`any`\>
+
+### collection
+
+[`Collection`](/db/reference/interfaces/Collection)
+
+## Returns
+
+  \| `void`
+  \| \&#123;
+  `alias?`: `string`;
+  `collection`: [`Collection`](/db/reference/interfaces/Collection);
+  `path`: `string`[];
+\&#125;
+
+The collection, its alias, and the path to the root field in this collection.
+`alias` is the alias under which the resolved collection is referenced in the
+query it was reached from (when the ref crosses into a joined source). It is
+left undefined when the ref simply resolves to a field on the passed-in
+`collection`, in which case the caller already knows the alias.
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/getHavingExpression.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/getHavingExpression.md
new file mode 100644
index 000000000..ea82eb46b
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/getHavingExpression.md
@@ -0,0 +1,28 @@
+---
+id: getHavingExpression
+title: getHavingExpression
+---
+
+# Function: getHavingExpression()
+
+```ts
+function getHavingExpression(having): 
+  | BasicExpression<any>
+| Aggregate<any>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:274](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L274)
+
+Extract the expression from a HAVING clause
+HAVING clauses can contain aggregates, unlike regular WHERE clauses
+
+## Parameters
+
+### having
+
+[`Where`](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)
+
+## Returns
+
+  \| [`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`any`\>
+  \| [`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`any`\>
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/getWhereExpression.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/getWhereExpression.md
new file mode 100644
index 000000000..c7319782a
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/getWhereExpression.md
@@ -0,0 +1,24 @@
+---
+id: getWhereExpression
+title: getWhereExpression
+---
+
+# Function: getWhereExpression()
+
+```ts
+function getWhereExpression(where): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:264](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L264)
+
+Extract the expression from a Where clause
+
+## Parameters
+
+### where
+
+[`Where`](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/isExpressionLike.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/isExpressionLike.md
new file mode 100644
index 000000000..5f158b4ab
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/isExpressionLike.md
@@ -0,0 +1,25 @@
+---
+id: isExpressionLike
+title: isExpressionLike
+---
+
+# Function: isExpressionLike()
+
+```ts
+function isExpressionLike(value): boolean;
+```
+
+Defined in: [packages/db/src/query/ir.ts:218](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L218)
+
+Runtime helper to detect IR expression-like objects.
+Prefer this over ad-hoc local implementations to keep behavior consistent.
+
+## Parameters
+
+### value
+
+`any`
+
+## Returns
+
+`boolean`
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/functions/isResidualWhere.md b/mintlify/db/reference/@tanstack/namespaces/IR/functions/isResidualWhere.md
new file mode 100644
index 000000000..37877e3ea
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/functions/isResidualWhere.md
@@ -0,0 +1,24 @@
+---
+id: isResidualWhere
+title: isResidualWhere
+---
+
+# Function: isResidualWhere()
+
+```ts
+function isResidualWhere(where): boolean;
+```
+
+Defined in: [packages/db/src/query/ir.ts:285](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L285)
+
+Check if a Where clause is marked as residual
+
+## Parameters
+
+### where
+
+[`Where`](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)
+
+## Returns
+
+`boolean`
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/index.md b/mintlify/db/reference/@tanstack/namespaces/IR/index.md
new file mode 100644
index 000000000..d03b1f2b1
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/index.md
@@ -0,0 +1,55 @@
+---
+id: IR
+title: IR
+---
+
+# IR
+
+## Classes
+
+- [Aggregate](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)
+- [CollectionRef](/db/reference/@tanstack/namespaces/IR/classes/CollectionRef)
+- [ConditionalSelect](/db/reference/@tanstack/namespaces/IR/classes/ConditionalSelect)
+- [Func](/db/reference/@tanstack/namespaces/IR/classes/Func)
+- [IncludesSubquery](/db/reference/@tanstack/namespaces/IR/classes/IncludesSubquery)
+- [PropRef](/db/reference/@tanstack/namespaces/IR/classes/PropRef)
+- [QueryRef](/db/reference/@tanstack/namespaces/IR/classes/QueryRef)
+- [UnionAll](/db/reference/@tanstack/namespaces/IR/classes/UnionAll)
+- [UnionFrom](/db/reference/@tanstack/namespaces/IR/classes/UnionFrom)
+- [Value](/db/reference/@tanstack/namespaces/IR/classes/Value)
+
+## Interfaces
+
+- [JoinClause](/db/reference/@tanstack/namespaces/IR/interfaces/JoinClause)
+- [QueryIR](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+## Type Aliases
+
+- [BasicExpression](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+- [ConditionalSelectBranch](/db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch)
+- [From](/db/reference/@tanstack/namespaces/IR/type-aliases/From)
+- [GroupBy](/db/reference/@tanstack/namespaces/IR/type-aliases/GroupBy)
+- [Having](/db/reference/@tanstack/namespaces/IR/type-aliases/Having)
+- [IncludesMaterialization](/db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization)
+- [Join](/db/reference/@tanstack/namespaces/IR/type-aliases/Join)
+- [Limit](/db/reference/@tanstack/namespaces/IR/type-aliases/Limit)
+- [Offset](/db/reference/@tanstack/namespaces/IR/type-aliases/Offset)
+- [OrderBy](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy)
+- [OrderByClause](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByClause)
+- [OrderByDirection](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+- [Select](/db/reference/@tanstack/namespaces/IR/type-aliases/Select)
+- [SelectValueExpression](/db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression)
+- [Where](/db/reference/@tanstack/namespaces/IR/type-aliases/Where)
+
+## Variables
+
+- [INCLUDES\_SCALAR\_FIELD](/db/reference/@tanstack/namespaces/IR/variables/INCLUDES_SCALAR_FIELD)
+
+## Functions
+
+- [createResidualWhere](/db/reference/@tanstack/namespaces/IR/functions/createResidualWhere)
+- [followRef](/db/reference/@tanstack/namespaces/IR/functions/followRef)
+- [getHavingExpression](/db/reference/@tanstack/namespaces/IR/functions/getHavingExpression)
+- [getWhereExpression](/db/reference/@tanstack/namespaces/IR/functions/getWhereExpression)
+- [isExpressionLike](/db/reference/@tanstack/namespaces/IR/functions/isExpressionLike)
+- [isResidualWhere](/db/reference/@tanstack/namespaces/IR/functions/isResidualWhere)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/JoinClause.md b/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/JoinClause.md
new file mode 100644
index 000000000..d41b72cac
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/JoinClause.md
@@ -0,0 +1,50 @@
+---
+id: JoinClause
+title: JoinClause
+---
+
+# Interface: JoinClause
+
+Defined in: [packages/db/src/query/ir.ts:49](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L49)
+
+## Properties
+
+### from
+
+```ts
+from: 
+  | CollectionRef
+  | QueryRef;
+```
+
+Defined in: [packages/db/src/query/ir.ts:50](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L50)
+
+***
+
+### left
+
+```ts
+left: BasicExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:52](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L52)
+
+***
+
+### right
+
+```ts
+right: BasicExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:53](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L53)
+
+***
+
+### type
+
+```ts
+type: "inner" | "left" | "right" | "full" | "outer" | "cross";
+```
+
+Defined in: [packages/db/src/query/ir.ts:51](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L51)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR.md b/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR.md
new file mode 100644
index 000000000..2deefca1e
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR.md
@@ -0,0 +1,178 @@
+---
+id: QueryIR
+title: QueryIR
+---
+
+# Interface: QueryIR
+
+Defined in: [packages/db/src/query/ir.ts:9](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L9)
+
+## Properties
+
+### distinct?
+
+```ts
+optional distinct: true;
+```
+
+Defined in: [packages/db/src/query/ir.ts:19](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L19)
+
+***
+
+### fnHaving?
+
+```ts
+optional fnHaving: (row) => any[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:25](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L25)
+
+#### Parameters
+
+##### row
+
+[`NamespacedRow`](/db/reference/type-aliases/NamespacedRow)
+
+#### Returns
+
+`any`
+
+***
+
+### fnSelect()?
+
+```ts
+optional fnSelect: (row) => any;
+```
+
+Defined in: [packages/db/src/query/ir.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L23)
+
+#### Parameters
+
+##### row
+
+[`NamespacedRow`](/db/reference/type-aliases/NamespacedRow)
+
+#### Returns
+
+`any`
+
+***
+
+### fnWhere?
+
+```ts
+optional fnWhere: (row) => any[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:24](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L24)
+
+#### Parameters
+
+##### row
+
+[`NamespacedRow`](/db/reference/type-aliases/NamespacedRow)
+
+#### Returns
+
+`any`
+
+***
+
+### from
+
+```ts
+from: From;
+```
+
+Defined in: [packages/db/src/query/ir.ts:10](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L10)
+
+***
+
+### groupBy?
+
+```ts
+optional groupBy: GroupBy;
+```
+
+Defined in: [packages/db/src/query/ir.ts:14](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L14)
+
+***
+
+### having?
+
+```ts
+optional having: Where[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L15)
+
+***
+
+### join?
+
+```ts
+optional join: Join;
+```
+
+Defined in: [packages/db/src/query/ir.ts:12](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L12)
+
+***
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [packages/db/src/query/ir.ts:17](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L17)
+
+***
+
+### offset?
+
+```ts
+optional offset: number;
+```
+
+Defined in: [packages/db/src/query/ir.ts:18](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L18)
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: OrderBy;
+```
+
+Defined in: [packages/db/src/query/ir.ts:16](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L16)
+
+***
+
+### select?
+
+```ts
+optional select: Select;
+```
+
+Defined in: [packages/db/src/query/ir.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L11)
+
+***
+
+### singleResult?
+
+```ts
+optional singleResult: true;
+```
+
+Defined in: [packages/db/src/query/ir.ts:20](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L20)
+
+***
+
+### where?
+
+```ts
+optional where: Where[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:13](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L13)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression.md
new file mode 100644
index 000000000..f979b0ada
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression.md
@@ -0,0 +1,21 @@
+---
+id: BasicExpression
+title: BasicExpression
+---
+
+# Type Alias: BasicExpression\&lt;T\>
+
+```ts
+type BasicExpression<T> = 
+  | PropRef<T>
+  | Value<T>
+| Func<T>;
+```
+
+Defined in: [packages/db/src/query/ir.ts:164](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L164)
+
+## Type Parameters
+
+### T
+
+`T` = `any`
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch.md
new file mode 100644
index 000000000..73c4f155d
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch.md
@@ -0,0 +1,32 @@
+---
+id: ConditionalSelectBranch
+title: ConditionalSelectBranch
+---
+
+# Type Alias: ConditionalSelectBranch
+
+```ts
+type ConditionalSelectBranch = object;
+```
+
+Defined in: [packages/db/src/query/ir.ts:192](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L192)
+
+## Properties
+
+### condition
+
+```ts
+condition: BasicExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:193](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L193)
+
+***
+
+### value
+
+```ts
+value: SelectValueExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:194](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L194)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/From.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/From.md
new file mode 100644
index 000000000..4b863b7a9
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/From.md
@@ -0,0 +1,16 @@
+---
+id: From
+title: From
+---
+
+# Type Alias: From
+
+```ts
+type From = 
+  | CollectionRef
+  | QueryRef
+  | UnionFrom
+  | UnionAll;
+```
+
+Defined in: [packages/db/src/query/ir.ts:36](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L36)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/GroupBy.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/GroupBy.md
new file mode 100644
index 000000000..e17b6a1c8
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/GroupBy.md
@@ -0,0 +1,12 @@
+---
+id: GroupBy
+title: GroupBy
+---
+
+# Type Alias: GroupBy
+
+```ts
+type GroupBy = BasicExpression[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:60](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L60)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Having.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Having.md
new file mode 100644
index 000000000..2f042ce4d
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Having.md
@@ -0,0 +1,12 @@
+---
+id: Having
+title: Having
+---
+
+# Type Alias: Having
+
+```ts
+type Having = Where;
+```
+
+Defined in: [packages/db/src/query/ir.ts:62](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L62)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization.md
new file mode 100644
index 000000000..578786d24
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization.md
@@ -0,0 +1,12 @@
+---
+id: IncludesMaterialization
+title: IncludesMaterialization
+---
+
+# Type Alias: IncludesMaterialization
+
+```ts
+type IncludesMaterialization = "collection" | "array" | "singleton" | "concat";
+```
+
+Defined in: [packages/db/src/query/ir.ts:28](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L28)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Join.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Join.md
new file mode 100644
index 000000000..0e6c1d1b9
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Join.md
@@ -0,0 +1,12 @@
+---
+id: Join
+title: Join
+---
+
+# Type Alias: Join
+
+```ts
+type Join = JoinClause[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:47](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L47)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Limit.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Limit.md
new file mode 100644
index 000000000..b571ea044
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Limit.md
@@ -0,0 +1,12 @@
+---
+id: Limit
+title: Limit
+---
+
+# Type Alias: Limit
+
+```ts
+type Limit = number;
+```
+
+Defined in: [packages/db/src/query/ir.ts:73](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L73)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Offset.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Offset.md
new file mode 100644
index 000000000..a95aa0251
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Offset.md
@@ -0,0 +1,12 @@
+---
+id: Offset
+title: Offset
+---
+
+# Type Alias: Offset
+
+```ts
+type Offset = number;
+```
+
+Defined in: [packages/db/src/query/ir.ts:75](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L75)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy.md
new file mode 100644
index 000000000..14ce76dc1
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy.md
@@ -0,0 +1,12 @@
+---
+id: OrderBy
+title: OrderBy
+---
+
+# Type Alias: OrderBy
+
+```ts
+type OrderBy = OrderByClause[];
+```
+
+Defined in: [packages/db/src/query/ir.ts:64](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L64)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByClause.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByClause.md
new file mode 100644
index 000000000..987cbf522
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByClause.md
@@ -0,0 +1,32 @@
+---
+id: OrderByClause
+title: OrderByClause
+---
+
+# Type Alias: OrderByClause
+
+```ts
+type OrderByClause = object;
+```
+
+Defined in: [packages/db/src/query/ir.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L66)
+
+## Properties
+
+### compareOptions
+
+```ts
+compareOptions: CompareOptions;
+```
+
+Defined in: [packages/db/src/query/ir.ts:68](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L68)
+
+***
+
+### expression
+
+```ts
+expression: BasicExpression;
+```
+
+Defined in: [packages/db/src/query/ir.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L67)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection.md
new file mode 100644
index 000000000..7466f4b26
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection.md
@@ -0,0 +1,12 @@
+---
+id: OrderByDirection
+title: OrderByDirection
+---
+
+# Type Alias: OrderByDirection
+
+```ts
+type OrderByDirection = "asc" | "desc";
+```
+
+Defined in: [packages/db/src/query/ir.ts:71](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L71)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Select.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Select.md
new file mode 100644
index 000000000..3833cf0ed
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Select.md
@@ -0,0 +1,23 @@
+---
+id: Select
+title: Select
+---
+
+# Type Alias: Select
+
+```ts
+type Select = object;
+```
+
+Defined in: [packages/db/src/query/ir.ts:38](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L38)
+
+## Index Signature
+
+```ts
+[alias: string]: 
+  | BasicExpression<any>
+  | Select
+  | Aggregate<any>
+  | IncludesSubquery
+  | ConditionalSelect
+```
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression.md
new file mode 100644
index 000000000..c8f003863
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression.md
@@ -0,0 +1,17 @@
+---
+id: SelectValueExpression
+title: SelectValueExpression
+---
+
+# Type Alias: SelectValueExpression
+
+```ts
+type SelectValueExpression = 
+  | BasicExpression
+  | Aggregate
+  | Select
+  | IncludesSubquery
+  | ConditionalSelect;
+```
+
+Defined in: [packages/db/src/query/ir.ts:197](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L197)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Where.md b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Where.md
new file mode 100644
index 000000000..f80a99c4e
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/type-aliases/Where.md
@@ -0,0 +1,17 @@
+---
+id: Where
+title: Where
+---
+
+# Type Alias: Where
+
+```ts
+type Where = 
+  | BasicExpression<boolean>
+  | {
+  expression: BasicExpression<boolean>;
+  residual?: boolean;
+};
+```
+
+Defined in: [packages/db/src/query/ir.ts:56](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L56)
diff --git a/mintlify/db/reference/@tanstack/namespaces/IR/variables/INCLUDES_SCALAR_FIELD.md b/mintlify/db/reference/@tanstack/namespaces/IR/variables/INCLUDES_SCALAR_FIELD.md
new file mode 100644
index 000000000..ea124c83e
--- /dev/null
+++ b/mintlify/db/reference/@tanstack/namespaces/IR/variables/INCLUDES_SCALAR_FIELD.md
@@ -0,0 +1,12 @@
+---
+id: INCLUDES_SCALAR_FIELD
+title: INCLUDES_SCALAR_FIELD
+---
+
+# Variable: INCLUDES\_SCALAR\_FIELD
+
+```ts
+const INCLUDES_SCALAR_FIELD: "__includes_scalar__";
+```
+
+Defined in: [packages/db/src/query/ir.ts:34](https://github.com/TanStack/db/blob/main/packages/db/src/query/ir.ts#L34)
diff --git a/mintlify/db/reference/classes/AggregateFunctionNotInSelectError.md b/mintlify/db/reference/classes/AggregateFunctionNotInSelectError.md
new file mode 100644
index 000000000..e0ffbb571
--- /dev/null
+++ b/mintlify/db/reference/classes/AggregateFunctionNotInSelectError.md
@@ -0,0 +1,220 @@
+---
+id: AggregateFunctionNotInSelectError
+title: AggregateFunctionNotInSelectError
+---
+
+# Class: AggregateFunctionNotInSelectError
+
+Defined in: [packages/db/src/errors.ts:639](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L639)
+
+## Extends
+
+- [`GroupByError`](/db/reference/classes/GroupByError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new AggregateFunctionNotInSelectError(functionName): AggregateFunctionNotInSelectError;
+```
+
+Defined in: [packages/db/src/errors.ts:640](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L640)
+
+#### Parameters
+
+##### functionName
+
+`string`
+
+#### Returns
+
+`AggregateFunctionNotInSelectError`
+
+#### Overrides
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`constructor`](/db/reference/classes/GroupByError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`cause`](/db/reference/classes/GroupByError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`message`](/db/reference/classes/GroupByError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`name`](/db/reference/classes/GroupByError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stack`](/db/reference/classes/GroupByError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stackTraceLimit`](/db/reference/classes/GroupByError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`captureStackTrace`](/db/reference/classes/GroupByError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`prepareStackTrace`](/db/reference/classes/GroupByError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/AggregateNotSupportedError.md b/mintlify/db/reference/classes/AggregateNotSupportedError.md
new file mode 100644
index 000000000..7fbbfdaa9
--- /dev/null
+++ b/mintlify/db/reference/classes/AggregateNotSupportedError.md
@@ -0,0 +1,216 @@
+---
+id: AggregateNotSupportedError
+title: AggregateNotSupportedError
+---
+
+# Class: AggregateNotSupportedError
+
+Defined in: [packages/db/src/errors.ts:755](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L755)
+
+Error thrown when aggregate expressions are used outside of a GROUP BY context.
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new AggregateNotSupportedError(): AggregateNotSupportedError;
+```
+
+Defined in: [packages/db/src/errors.ts:756](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L756)
+
+#### Returns
+
+`AggregateNotSupportedError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/BTreeIndex.md b/mintlify/db/reference/classes/BTreeIndex.md
new file mode 100644
index 000000000..a7ef29035
--- /dev/null
+++ b/mintlify/db/reference/classes/BTreeIndex.md
@@ -0,0 +1,963 @@
+---
+id: BTreeIndex
+title: BTreeIndex
+---
+
+# Class: BTreeIndex\&lt;TKey\>
+
+Defined in: [packages/db/src/indexes/btree-index.ts:35](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L35)
+
+B+Tree index for sorted data with range queries
+This maintains items in sorted order and provides efficient range operations
+
+## Extends
+
+- [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Constructors
+
+### Constructor
+
+```ts
+new BTreeIndex<TKey>(
+   id, 
+   expression, 
+   name?, 
+options?): BTreeIndex<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:55](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L55)
+
+#### Parameters
+
+##### id
+
+`number`
+
+##### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+##### name?
+
+`string`
+
+##### options?
+
+`any`
+
+#### Returns
+
+`BTreeIndex`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`constructor`](/db/reference/classes/BaseIndex#constructor)
+
+## Properties
+
+### compareOptions
+
+```ts
+protected compareOptions: CompareOptions;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L101)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`compareOptions`](/db/reference/classes/BaseIndex#compareoptions)
+
+***
+
+### expression
+
+```ts
+readonly expression: BasicExpression;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:95](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L95)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`expression`](/db/reference/classes/BaseIndex#expression)
+
+***
+
+### hasCustomComparator
+
+```ts
+protected hasCustomComparator: boolean = false;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:106](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L106)
+
+Set by subclasses when constructed with a user-supplied comparator, whose
+ordering may not match the WHERE evaluator's relational operators.
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`hasCustomComparator`](/db/reference/classes/BaseIndex#hascustomcomparator)
+
+***
+
+### id
+
+```ts
+readonly id: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:93](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L93)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`id`](/db/reference/classes/BaseIndex#id)
+
+***
+
+### lastUpdated
+
+```ts
+protected lastUpdated: Date;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:100](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L100)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lastUpdated`](/db/reference/classes/BaseIndex#lastupdated)
+
+***
+
+### lookupCount
+
+```ts
+protected lookupCount: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:98](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L98)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lookupCount`](/db/reference/classes/BaseIndex#lookupcount)
+
+***
+
+### name?
+
+```ts
+readonly optional name: string;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:94](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L94)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`name`](/db/reference/classes/BaseIndex#name)
+
+***
+
+### supportedOperations
+
+```ts
+readonly supportedOperations: Set<"eq" | "gt" | "gte" | "lt" | "lte" | "in" | "like" | "ilike">;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:38](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L38)
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supportedOperations`](/db/reference/classes/BaseIndex#supportedoperations)
+
+***
+
+### totalLookupTime
+
+```ts
+protected totalLookupTime: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:99](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L99)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`totalLookupTime`](/db/reference/classes/BaseIndex#totallookuptime)
+
+## Accessors
+
+### indexedKeysSet
+
+#### Get Signature
+
+```ts
+get indexedKeysSet(): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:410](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L410)
+
+##### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`indexedKeysSet`](/db/reference/classes/BaseIndex#indexedkeysset)
+
+***
+
+### keyCount
+
+#### Get Signature
+
+```ts
+get keyCount(): number;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:214](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L214)
+
+Gets the number of indexed keys
+
+##### Returns
+
+`number`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`keyCount`](/db/reference/classes/BaseIndex#keycount)
+
+***
+
+### orderedEntriesArray
+
+#### Get Signature
+
+```ts
+get orderedEntriesArray(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:414](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L414)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`orderedEntriesArray`](/db/reference/classes/BaseIndex#orderedentriesarray)
+
+***
+
+### orderedEntriesArrayReversed
+
+#### Get Signature
+
+```ts
+get orderedEntriesArrayReversed(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:423](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L423)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`orderedEntriesArrayReversed`](/db/reference/classes/BaseIndex#orderedentriesarrayreversed)
+
+***
+
+### supportsRangeOptimization
+
+#### Get Signature
+
+```ts
+get supportsRangeOptimization(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:161](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L161)
+
+Whether range lookups (gt/gte/lt/lte) on this index can be trusted to
+return every matching key. Range traversal relies on the index ordering, so
+it is unsafe when the index uses a custom comparator, whose order may not
+match the WHERE evaluator's relational operators. Callers must fall back to
+a full scan when this is `false`.
+
+##### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supportsRangeOptimization`](/db/reference/classes/BaseIndex#supportsrangeoptimization)
+
+***
+
+### valueMapData
+
+#### Get Signature
+
+```ts
+get valueMapData(): Map<any, Set<TKey>>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:430](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L430)
+
+##### Returns
+
+`Map`\&lt;`any`, `Set`\&lt;`TKey`\>\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`valueMapData`](/db/reference/classes/BaseIndex#valuemapdata)
+
+## Methods
+
+### add()
+
+```ts
+add(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L84)
+
+Adds a value to the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`add`](/db/reference/classes/BaseIndex#add)
+
+***
+
+### build()
+
+```ts
+build(entries): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:158](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L158)
+
+Builds the index from a collection of entries
+
+#### Parameters
+
+##### entries
+
+`Iterable`\&lt;\[`TKey`, `any`\]\>
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`build`](/db/reference/classes/BaseIndex#build)
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:169](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L169)
+
+Clears all data from the index
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`clear`](/db/reference/classes/BaseIndex#clear)
+
+***
+
+### equalityLookup()
+
+```ts
+equalityLookup(value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:223](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L223)
+
+Performs an equality lookup
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`equalityLookup`](/db/reference/classes/BaseIndex#equalitylookup)
+
+***
+
+### evaluateIndexExpression()
+
+```ts
+protected evaluateIndexExpression(item): any;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:212](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L212)
+
+#### Parameters
+
+##### item
+
+`any`
+
+#### Returns
+
+`any`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`evaluateIndexExpression`](/db/reference/classes/BaseIndex#evaluateindexexpression)
+
+***
+
+### getStats()
+
+```ts
+getStats(): IndexStats;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:200](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L200)
+
+#### Returns
+
+[`IndexStats`](/db/reference/interfaces/IndexStats)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`getStats`](/db/reference/classes/BaseIndex#getstats)
+
+***
+
+### inArrayLookup()
+
+```ts
+inArrayLookup(values): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:395](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L395)
+
+Performs an IN array lookup
+
+#### Parameters
+
+##### values
+
+`any`[]
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`inArrayLookup`](/db/reference/classes/BaseIndex#inarraylookup)
+
+***
+
+### initialize()
+
+```ts
+protected initialize(_options?): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:79](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L79)
+
+#### Parameters
+
+##### \_options?
+
+`BTreeIndexOptions`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`initialize`](/db/reference/classes/BaseIndex#initialize)
+
+***
+
+### lookup()
+
+```ts
+lookup(operation, value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:179](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L179)
+
+Performs a lookup operation
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lookup`](/db/reference/classes/BaseIndex#lookup)
+
+***
+
+### matchesCompareOptions()
+
+```ts
+matchesCompareOptions(compareOptions): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L177)
+
+Checks if the compare options match the index's compare options.
+The direction is ignored because the index can be reversed if the direction is different.
+
+#### Parameters
+
+##### compareOptions
+
+`CompareOptions`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesCompareOptions`](/db/reference/classes/BaseIndex#matchescompareoptions)
+
+***
+
+### matchesDirection()
+
+```ts
+matchesDirection(direction): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:196](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L196)
+
+Checks if the index matches the provided direction.
+
+#### Parameters
+
+##### direction
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesDirection`](/db/reference/classes/BaseIndex#matchesdirection)
+
+***
+
+### matchesField()
+
+```ts
+matchesField(fieldPath): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:165](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L165)
+
+#### Parameters
+
+##### fieldPath
+
+`string`[]
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesField`](/db/reference/classes/BaseIndex#matchesfield)
+
+***
+
+### rangeQuery()
+
+```ts
+rangeQuery(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:232](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L232)
+
+Performs a range query with options
+This is more efficient for compound queries like "WHERE a > 5 AND a &lt; 10"
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`rangeQuery`](/db/reference/classes/BaseIndex#rangequery)
+
+***
+
+### rangeQueryReversed()
+
+```ts
+rangeQueryReversed(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:279](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L279)
+
+Performs a reversed range query
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`rangeQueryReversed`](/db/reference/classes/BaseIndex#rangequeryreversed)
+
+***
+
+### remove()
+
+```ts
+remove(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:115](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L115)
+
+Removes a value from the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`remove`](/db/reference/classes/BaseIndex#remove)
+
+***
+
+### supports()
+
+```ts
+supports(operation): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L157)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supports`](/db/reference/classes/BaseIndex#supports)
+
+***
+
+### take()
+
+```ts
+take(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:341](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L341)
+
+Returns the next n items after the provided item.
+
+#### Parameters
+
+##### n
+
+`number`
+
+The number of items to return
+
+##### from
+
+`any`
+
+The item to start from (exclusive).
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+The next n items after the provided key.
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`take`](/db/reference/classes/BaseIndex#take)
+
+***
+
+### takeFromStart()
+
+```ts
+takeFromStart(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:354](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L354)
+
+Returns the first n items from the beginning.
+
+#### Parameters
+
+##### n
+
+`number`
+
+The number of items to return
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+Optional filter function
+
+#### Returns
+
+`TKey`[]
+
+The first n items
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeFromStart`](/db/reference/classes/BaseIndex#takefromstart)
+
+***
+
+### takeReversed()
+
+```ts
+takeReversed(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:366](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L366)
+
+Returns the next n items **before** the provided item (in descending order).
+
+#### Parameters
+
+##### n
+
+`number`
+
+The number of items to return
+
+##### from
+
+`any`
+
+The item to start from (exclusive). Required.
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+The next n items **before** the provided key.
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeReversed`](/db/reference/classes/BaseIndex#takereversed)
+
+***
+
+### takeReversedFromEnd()
+
+```ts
+takeReversedFromEnd(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:383](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L383)
+
+Returns the last n items from the end.
+
+#### Parameters
+
+##### n
+
+`number`
+
+The number of items to return
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+Optional filter function
+
+#### Returns
+
+`TKey`[]
+
+The last n items
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeReversedFromEnd`](/db/reference/classes/BaseIndex#takereversedfromend)
+
+***
+
+### trackLookup()
+
+```ts
+protected trackLookup(startTime): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L217)
+
+#### Parameters
+
+##### startTime
+
+`number`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`trackLookup`](/db/reference/classes/BaseIndex#tracklookup)
+
+***
+
+### update()
+
+```ts
+update(
+   key, 
+   oldItem, 
+   newItem): void;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:150](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L150)
+
+Updates a value in the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### oldItem
+
+`any`
+
+##### newItem
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`update`](/db/reference/classes/BaseIndex#update)
+
+***
+
+### updateTimestamp()
+
+```ts
+protected updateTimestamp(): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:223](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L223)
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`updateTimestamp`](/db/reference/classes/BaseIndex#updatetimestamp)
diff --git a/mintlify/db/reference/classes/BaseIndex.md b/mintlify/db/reference/classes/BaseIndex.md
new file mode 100644
index 000000000..03ea80e7a
--- /dev/null
+++ b/mintlify/db/reference/classes/BaseIndex.md
@@ -0,0 +1,856 @@
+---
+id: BaseIndex
+title: BaseIndex
+---
+
+# Abstract Class: BaseIndex\&lt;TKey\>
+
+Defined in: [packages/db/src/indexes/base-index.ts:90](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L90)
+
+Base abstract class that all index types extend
+
+## Extended by
+
+- [`BasicIndex`](/db/reference/classes/BasicIndex)
+- [`BTreeIndex`](/db/reference/classes/BTreeIndex)
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Implements
+
+- [`IndexInterface`](/db/reference/interfaces/IndexInterface)\&lt;`TKey`\>
+
+## Constructors
+
+### Constructor
+
+```ts
+new BaseIndex<TKey>(
+   id, 
+   expression, 
+   name?, 
+options?): BaseIndex<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:108](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L108)
+
+#### Parameters
+
+##### id
+
+`number`
+
+##### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+##### name?
+
+`string`
+
+##### options?
+
+`any`
+
+#### Returns
+
+`BaseIndex`\&lt;`TKey`\>
+
+## Properties
+
+### compareOptions
+
+```ts
+protected compareOptions: CompareOptions;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L101)
+
+***
+
+### expression
+
+```ts
+readonly expression: BasicExpression;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:95](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L95)
+
+***
+
+### hasCustomComparator
+
+```ts
+protected hasCustomComparator: boolean = false;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:106](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L106)
+
+Set by subclasses when constructed with a user-supplied comparator, whose
+ordering may not match the WHERE evaluator's relational operators.
+
+***
+
+### id
+
+```ts
+readonly id: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:93](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L93)
+
+***
+
+### lastUpdated
+
+```ts
+protected lastUpdated: Date;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:100](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L100)
+
+***
+
+### lookupCount
+
+```ts
+protected lookupCount: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:98](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L98)
+
+***
+
+### name?
+
+```ts
+readonly optional name: string;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:94](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L94)
+
+***
+
+### supportedOperations
+
+```ts
+abstract readonly supportedOperations: Set<"eq" | "gt" | "gte" | "lt" | "lte" | "in" | "like" | "ilike">;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L96)
+
+***
+
+### totalLookupTime
+
+```ts
+protected totalLookupTime: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:99](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L99)
+
+## Accessors
+
+### indexedKeysSet
+
+#### Get Signature
+
+```ts
+get abstract indexedKeysSet(): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:153](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L153)
+
+##### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`indexedKeysSet`](/db/reference/interfaces/IndexInterface#indexedkeysset)
+
+***
+
+### keyCount
+
+#### Get Signature
+
+```ts
+get abstract keyCount(): number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:146](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L146)
+
+##### Returns
+
+`number`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`keyCount`](/db/reference/interfaces/IndexInterface#keycount)
+
+***
+
+### orderedEntriesArray
+
+#### Get Signature
+
+```ts
+get abstract orderedEntriesArray(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:151](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L151)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`orderedEntriesArray`](/db/reference/interfaces/IndexInterface#orderedentriesarray)
+
+***
+
+### orderedEntriesArrayReversed
+
+#### Get Signature
+
+```ts
+get abstract orderedEntriesArrayReversed(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:152](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L152)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`orderedEntriesArrayReversed`](/db/reference/interfaces/IndexInterface#orderedentriesarrayreversed)
+
+***
+
+### supportsRangeOptimization
+
+#### Get Signature
+
+```ts
+get supportsRangeOptimization(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:161](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L161)
+
+Whether range lookups (gt/gte/lt/lte) on this index can be trusted to
+return every matching key. Range traversal relies on the index ordering, so
+it is unsafe when the index uses a custom comparator, whose order may not
+match the WHERE evaluator's relational operators. Callers must fall back to
+a full scan when this is `false`.
+
+##### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`supportsRangeOptimization`](/db/reference/interfaces/IndexInterface#supportsrangeoptimization)
+
+***
+
+### valueMapData
+
+#### Get Signature
+
+```ts
+get abstract valueMapData(): Map<any, Set<TKey>>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:154](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L154)
+
+##### Returns
+
+`Map`\&lt;`any`, `Set`\&lt;`TKey`\>\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`valueMapData`](/db/reference/interfaces/IndexInterface#valuemapdata)
+
+## Methods
+
+### add()
+
+```ts
+abstract add(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:122](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L122)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`add`](/db/reference/interfaces/IndexInterface#add)
+
+***
+
+### build()
+
+```ts
+abstract build(entries): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:125](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L125)
+
+#### Parameters
+
+##### entries
+
+`Iterable`\&lt;\[`TKey`, `any`\]\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`build`](/db/reference/interfaces/IndexInterface#build)
+
+***
+
+### clear()
+
+```ts
+abstract clear(): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:126](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L126)
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`clear`](/db/reference/interfaces/IndexInterface#clear)
+
+***
+
+### equalityLookup()
+
+```ts
+abstract equalityLookup(value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:147](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L147)
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`equalityLookup`](/db/reference/interfaces/IndexInterface#equalitylookup)
+
+***
+
+### evaluateIndexExpression()
+
+```ts
+protected evaluateIndexExpression(item): any;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:212](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L212)
+
+#### Parameters
+
+##### item
+
+`any`
+
+#### Returns
+
+`any`
+
+***
+
+### getStats()
+
+```ts
+getStats(): IndexStats;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:200](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L200)
+
+#### Returns
+
+[`IndexStats`](/db/reference/interfaces/IndexStats)
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`getStats`](/db/reference/interfaces/IndexInterface#getstats)
+
+***
+
+### inArrayLookup()
+
+```ts
+abstract inArrayLookup(values): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:148](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L148)
+
+#### Parameters
+
+##### values
+
+`any`[]
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`inArrayLookup`](/db/reference/interfaces/IndexInterface#inarraylookup)
+
+***
+
+### initialize()
+
+```ts
+abstract protected initialize(options?): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:210](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L210)
+
+#### Parameters
+
+##### options?
+
+`any`
+
+#### Returns
+
+`void`
+
+***
+
+### lookup()
+
+```ts
+abstract lookup(operation, value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:127](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L127)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`lookup`](/db/reference/interfaces/IndexInterface#lookup)
+
+***
+
+### matchesCompareOptions()
+
+```ts
+matchesCompareOptions(compareOptions): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L177)
+
+Checks if the compare options match the index's compare options.
+The direction is ignored because the index can be reversed if the direction is different.
+
+#### Parameters
+
+##### compareOptions
+
+`CompareOptions`
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesCompareOptions`](/db/reference/interfaces/IndexInterface#matchescompareoptions)
+
+***
+
+### matchesDirection()
+
+```ts
+matchesDirection(direction): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:196](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L196)
+
+Checks if the index matches the provided direction.
+
+#### Parameters
+
+##### direction
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesDirection`](/db/reference/interfaces/IndexInterface#matchesdirection)
+
+***
+
+### matchesField()
+
+```ts
+matchesField(fieldPath): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:165](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L165)
+
+#### Parameters
+
+##### fieldPath
+
+`string`[]
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesField`](/db/reference/interfaces/IndexInterface#matchesfield)
+
+***
+
+### rangeQuery()
+
+```ts
+abstract rangeQuery(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:149](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L149)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions)
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`rangeQuery`](/db/reference/interfaces/IndexInterface#rangequery)
+
+***
+
+### rangeQueryReversed()
+
+```ts
+abstract rangeQueryReversed(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:150](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L150)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions)
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`rangeQueryReversed`](/db/reference/interfaces/IndexInterface#rangequeryreversed)
+
+***
+
+### remove()
+
+```ts
+abstract remove(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:123](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L123)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`remove`](/db/reference/interfaces/IndexInterface#remove)
+
+***
+
+### supports()
+
+```ts
+supports(operation): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L157)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`supports`](/db/reference/interfaces/IndexInterface#supports)
+
+***
+
+### take()
+
+```ts
+abstract take(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:128](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L128)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`TKey`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`take`](/db/reference/interfaces/IndexInterface#take)
+
+***
+
+### takeFromStart()
+
+```ts
+abstract takeFromStart(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:133](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L133)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeFromStart`](/db/reference/interfaces/IndexInterface#takefromstart)
+
+***
+
+### takeReversed()
+
+```ts
+abstract takeReversed(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:137](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L137)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`TKey`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeReversed`](/db/reference/interfaces/IndexInterface#takereversed)
+
+***
+
+### takeReversedFromEnd()
+
+```ts
+abstract takeReversedFromEnd(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:142](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L142)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeReversedFromEnd`](/db/reference/interfaces/IndexInterface#takereversedfromend)
+
+***
+
+### trackLookup()
+
+```ts
+protected trackLookup(startTime): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L217)
+
+#### Parameters
+
+##### startTime
+
+`number`
+
+#### Returns
+
+`void`
+
+***
+
+### update()
+
+```ts
+abstract update(
+   key, 
+   oldItem, 
+   newItem): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:124](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L124)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### oldItem
+
+`any`
+
+##### newItem
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`update`](/db/reference/interfaces/IndexInterface#update)
+
+***
+
+### updateTimestamp()
+
+```ts
+protected updateTimestamp(): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:223](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L223)
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/classes/BaseQueryBuilder.md b/mintlify/db/reference/classes/BaseQueryBuilder.md
new file mode 100644
index 000000000..f08d0a8e1
--- /dev/null
+++ b/mintlify/db/reference/classes/BaseQueryBuilder.md
@@ -0,0 +1,1018 @@
+---
+id: BaseQueryBuilder
+title: BaseQueryBuilder
+---
+
+# Class: BaseQueryBuilder\&lt;TContext\>
+
+Defined in: [packages/db/src/query/builder/index.ts:78](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L78)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context) = [`Context`](/db/reference/interfaces/Context)
+
+## Constructors
+
+### Constructor
+
+```ts
+new BaseQueryBuilder<TContext>(query): BaseQueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:81](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L81)
+
+#### Parameters
+
+##### query
+
+`Partial`\&lt;[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)\> = `{}`
+
+#### Returns
+
+`BaseQueryBuilder`\&lt;`TContext`\>
+
+## Accessors
+
+### fn
+
+#### Get Signature
+
+```ts
+get fn(): object;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:850](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L850)
+
+Functional variants of the query builder
+These are imperative function that are called for ery row.
+Warning: that these cannot be optimized by the query compiler, and may prevent
+some type of optimizations being possible.
+
+##### Example
+
+```ts
+q.fn.select((row) => ({
+  name: row.user.name.toUpperCase(),
+  age: row.user.age + 1,
+}))
+```
+
+##### Returns
+
+###### having()
+
+```ts
+having(callback): QueryBuilder<TContext>;
+```
+
+Filter grouped rows using a function that operates on each aggregated row
+Warning: This cannot be optimized by the query compiler
+
+###### Parameters
+
+###### callback
+
+(`row`) => `any`
+
+A function that receives an aggregated row (with $selected when select() was called) and returns a boolean
+
+###### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with functional having filter applied
+
+###### Example
+
+```ts
+// Functional having (not optimized)
+query
+  .from({ posts: postsCollection })
+  .groupBy(({posts}) => posts.userId)
+  .select(({posts}) => ({ userId: posts.userId, count: count(posts.id) }))
+  .fn.having(({ $selected }) => $selected.count > 5)
+```
+
+###### select()
+
+```ts
+select<TFuncSelectResult>(callback): QueryBuilder<WithResult<TContext, TFuncSelectResult>>;
+```
+
+Select fields using a function that operates on each row
+Warning: This cannot be optimized by the query compiler
+
+###### Type Parameters
+
+###### TFuncSelectResult
+
+`TFuncSelectResult`
+
+###### Parameters
+
+###### callback
+
+(`row`) => `TFuncSelectResult`
+
+A function that receives a row and returns the selected value
+
+###### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`WithResult`](/db/reference/type-aliases/WithResult)\&lt;`TContext`, `TFuncSelectResult`\>\>
+
+A QueryBuilder with functional selection applied
+
+###### Example
+
+```ts
+// Functional select (not optimized)
+query
+  .from({ users: usersCollection })
+  .fn.select(row => ({
+    name: row.users.name.toUpperCase(),
+    age: row.users.age + 1,
+  }))
+```
+
+###### where()
+
+```ts
+where(callback): QueryBuilder<TContext>;
+```
+
+Filter rows using a function that operates on each row
+Warning: This cannot be optimized by the query compiler
+
+###### Parameters
+
+###### callback
+
+(`row`) => `any`
+
+A function that receives a row and returns a boolean
+
+###### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with functional filtering applied
+
+###### Example
+
+```ts
+// Functional where (not optimized)
+query
+  .from({ users: usersCollection })
+  .fn.where(row => row.users.name.startsWith('A'))
+```
+
+## Methods
+
+### \_getQuery()
+
+```ts
+_getQuery(): QueryIR;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:937](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L937)
+
+#### Returns
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+***
+
+### distinct()
+
+```ts
+distinct(): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:783](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L783)
+
+Specify that the query should return distinct rows.
+Deduplicates rows based on the selected columns.
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with distinct enabled
+
+#### Example
+
+```ts
+// Get countries our users are from
+query
+  .from({ users: usersCollection })
+  .select(({users}) => ({ country: users.country }))
+  .distinct()
+```
+
+***
+
+### findOne()
+
+```ts
+findOne(): QueryBuilder<TContext & SingleResult>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:803](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L803)
+
+Specify that the query should return a single result
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext` & [`SingleResult`](/db/reference/type-aliases/SingleResult)\>
+
+A QueryBuilder that returns the first result
+
+#### Example
+
+```ts
+// Get the user matching the query
+query
+  .from({ users: usersCollection })
+  .where(({users}) => eq(users.id, 1))
+  .findOne()
+```
+
+***
+
+### from()
+
+```ts
+from<TSource>(source): QueryBuilder<ContextFromSource<TSource>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:175](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L175)
+
+Specify the source table or subquery for the query
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+#### Parameters
+
+##### source
+
+[`SingleSource`](/db/reference/type-aliases/SingleSource)\&lt;`TSource`\>
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`ContextFromSource`](/db/reference/type-aliases/ContextFromSource)\&lt;`TSource`\>\>
+
+A QueryBuilder with the specified source
+
+#### Example
+
+```ts
+// Query from a collection
+query.from({ users: usersCollection })
+
+// Query from a subquery
+const activeUsers = query.from({ u: usersCollection }).where(({u}) => u.active)
+query.from({ activeUsers })
+```
+
+***
+
+### fullJoin()
+
+```ts
+fullJoin<TSource>(source, onCallback): QueryBuilder<MergeContextWithJoinType<TContext, SchemaFromSource<TSource>, "full">>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:410](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L410)
+
+Perform a FULL JOIN with another table or subquery
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+#### Parameters
+
+##### source
+
+`TSource`
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+##### onCallback
+
+[`JoinOnCallback`](/db/reference/type-aliases/JoinOnCallback)\&lt;[`MergeContextForJoinCallback`](/db/reference/type-aliases/MergeContextForJoinCallback)\&lt;`TContext`, \&#123; \[K in string \| number \| symbol\]: \&#123; \[K in string \| number \| symbol\]: TSource\[K\] extends CollectionImpl\&lt;any, any, any, any, any\> ? InferCollectionType\&lt;any\[any\]\> : TSource\[K\] extends QueryBuilder\&lt;TContext\> ? \&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125; : never \&#125;\[K\] \&#125;\>\>
+
+A function that receives table references and returns the join condition
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`MergeContextWithJoinType`](/db/reference/type-aliases/MergeContextWithJoinType)\&lt;`TContext`, [`SchemaFromSource`](/db/reference/type-aliases/SchemaFromSource)\&lt;`TSource`\>, `"full"`\>\>
+
+A QueryBuilder with the full joined table available
+
+#### Example
+
+```ts
+// Full join users with posts
+query
+  .from({ users: usersCollection })
+  .fullJoin({ posts: postsCollection }, ({users, posts}) => eq(users.id, posts.userId))
+```
+
+***
+
+### groupBy()
+
+```ts
+groupBy(callback): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:705](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L705)
+
+Group rows by one or more columns for aggregation
+
+#### Parameters
+
+##### callback
+
+[`GroupByCallback`](/db/reference/type-aliases/GroupByCallback)\&lt;`TContext`\>
+
+A function that receives table references and returns the field(s) to group by
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with grouping applied (enables aggregate functions in SELECT and HAVING)
+
+#### Example
+
+```ts
+// Group by a single column
+query
+  .from({ posts: postsCollection })
+  .groupBy(({posts}) => posts.userId)
+  .select(({posts, count}) => ({
+    userId: posts.userId,
+    postCount: count()
+  }))
+
+// Group by multiple columns
+query
+  .from({ sales: salesCollection })
+  .groupBy(({sales}) => [sales.region, sales.category])
+  .select(({sales, sum}) => ({
+    region: sales.region,
+    category: sales.category,
+    totalSales: sum(sales.amount)
+  }))
+```
+
+***
+
+### having()
+
+```ts
+having(callback): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:504](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L504)
+
+Filter grouped rows based on aggregate conditions
+
+#### Parameters
+
+##### callback
+
+[`WhereCallback`](/db/reference/type-aliases/WhereCallback)\&lt;`TContext`\>
+
+A function that receives table references and returns an expression
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with the having condition applied
+
+#### Example
+
+```ts
+// Filter groups by count
+query
+  .from({ posts: postsCollection })
+  .groupBy(({posts}) => posts.userId)
+  .having(({posts}) => gt(count(posts.id), 5))
+
+// Filter by average
+query
+  .from({ orders: ordersCollection })
+  .groupBy(({orders}) => orders.customerId)
+  .having(({orders}) => gt(avg(orders.total), 100))
+
+// Multiple having calls are ANDed together
+query
+  .from({ orders: ordersCollection })
+  .groupBy(({orders}) => orders.customerId)
+  .having(({orders}) => gt(count(orders.id), 5))
+  .having(({orders}) => gt(avg(orders.total), 100))
+```
+
+***
+
+### innerJoin()
+
+```ts
+innerJoin<TSource>(source, onCallback): QueryBuilder<MergeContextWithJoinType<TContext, SchemaFromSource<TSource>, "inner">>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:384](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L384)
+
+Perform an INNER JOIN with another table or subquery
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+#### Parameters
+
+##### source
+
+`TSource`
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+##### onCallback
+
+[`JoinOnCallback`](/db/reference/type-aliases/JoinOnCallback)\&lt;[`MergeContextForJoinCallback`](/db/reference/type-aliases/MergeContextForJoinCallback)\&lt;`TContext`, \&#123; \[K in string \| number \| symbol\]: \&#123; \[K in string \| number \| symbol\]: TSource\[K\] extends CollectionImpl\&lt;any, any, any, any, any\> ? InferCollectionType\&lt;any\[any\]\> : TSource\[K\] extends QueryBuilder\&lt;TContext\> ? \&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125; : never \&#125;\[K\] \&#125;\>\>
+
+A function that receives table references and returns the join condition
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`MergeContextWithJoinType`](/db/reference/type-aliases/MergeContextWithJoinType)\&lt;`TContext`, [`SchemaFromSource`](/db/reference/type-aliases/SchemaFromSource)\&lt;`TSource`\>, `"inner"`\>\>
+
+A QueryBuilder with the inner joined table available
+
+#### Example
+
+```ts
+// Inner join users with posts
+query
+  .from({ users: usersCollection })
+  .innerJoin({ posts: postsCollection }, ({users, posts}) => eq(users.id, posts.userId))
+```
+
+***
+
+### join()
+
+```ts
+join<TSource, TJoinType>(
+   source, 
+   onCallback, 
+type): QueryBuilder<MergeContextWithJoinType<TContext, SchemaFromSource<TSource>, TJoinType>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:262](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L262)
+
+Join another table or subquery to the current query
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+##### TJoinType
+
+`TJoinType` *extends* `"inner"` \| `"left"` \| `"right"` \| `"full"` = `"left"`
+
+#### Parameters
+
+##### source
+
+`TSource`
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+##### onCallback
+
+[`JoinOnCallback`](/db/reference/type-aliases/JoinOnCallback)\&lt;[`MergeContextForJoinCallback`](/db/reference/type-aliases/MergeContextForJoinCallback)\&lt;`TContext`, \&#123; \[K in string \| number \| symbol\]: \&#123; \[K in string \| number \| symbol\]: TSource\[K\] extends CollectionImpl\&lt;any, any, any, any, any\> ? InferCollectionType\&lt;any\[any\]\> : TSource\[K\] extends QueryBuilder\&lt;TContext\> ? \&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125; : never \&#125;\[K\] \&#125;\>\>
+
+A function that receives table references and returns the join condition
+
+##### type
+
+`TJoinType` = `...`
+
+The type of join: 'inner', 'left', 'right', or 'full' (defaults to 'left')
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`MergeContextWithJoinType`](/db/reference/type-aliases/MergeContextWithJoinType)\&lt;`TContext`, [`SchemaFromSource`](/db/reference/type-aliases/SchemaFromSource)\&lt;`TSource`\>, `TJoinType`\>\>
+
+A QueryBuilder with the joined table available
+
+#### Example
+
+```ts
+// Left join users with posts
+query
+  .from({ users: usersCollection })
+  .join({ posts: postsCollection }, ({users, posts}) => eq(users.id, posts.userId))
+
+// Inner join with explicit type
+query
+  .from({ u: usersCollection })
+  .join({ p: postsCollection }, ({u, p}) => eq(u.id, p.userId), 'inner')
+```
+
+// Join with a subquery
+const activeUsers = query.from(&#123; u: usersCollection &#125;).where((&#123;u&#125;) => u.active)
+query
+  .from(&#123; activeUsers &#125;)
+  .join(&#123; p: postsCollection &#125;, (&#123;u, p&#125;) => eq(u.id, p.userId))
+
+***
+
+### leftJoin()
+
+```ts
+leftJoin<TSource>(source, onCallback): QueryBuilder<MergeContextWithJoinType<TContext, SchemaFromSource<TSource>, "left">>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:332](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L332)
+
+Perform a LEFT JOIN with another table or subquery
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+#### Parameters
+
+##### source
+
+`TSource`
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+##### onCallback
+
+[`JoinOnCallback`](/db/reference/type-aliases/JoinOnCallback)\&lt;[`MergeContextForJoinCallback`](/db/reference/type-aliases/MergeContextForJoinCallback)\&lt;`TContext`, \&#123; \[K in string \| number \| symbol\]: \&#123; \[K in string \| number \| symbol\]: TSource\[K\] extends CollectionImpl\&lt;any, any, any, any, any\> ? InferCollectionType\&lt;any\[any\]\> : TSource\[K\] extends QueryBuilder\&lt;TContext\> ? \&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125; : never \&#125;\[K\] \&#125;\>\>
+
+A function that receives table references and returns the join condition
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`MergeContextWithJoinType`](/db/reference/type-aliases/MergeContextWithJoinType)\&lt;`TContext`, [`SchemaFromSource`](/db/reference/type-aliases/SchemaFromSource)\&lt;`TSource`\>, `"left"`\>\>
+
+A QueryBuilder with the left joined table available
+
+#### Example
+
+```ts
+// Left join users with posts
+query
+  .from({ users: usersCollection })
+  .leftJoin({ posts: postsCollection }, ({users, posts}) => eq(users.id, posts.userId))
+```
+
+***
+
+### limit()
+
+```ts
+limit(count): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:738](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L738)
+
+Limit the number of rows returned by the query
+`orderBy` is required for `limit`
+
+#### Parameters
+
+##### count
+
+`number`
+
+Maximum number of rows to return
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with the limit applied
+
+#### Example
+
+```ts
+// Get top 5 posts by likes
+query
+  .from({ posts: postsCollection })
+  .orderBy(({posts}) => posts.likes, 'desc')
+  .limit(5)
+```
+
+***
+
+### offset()
+
+```ts
+offset(count): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:762](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L762)
+
+Skip a number of rows before returning results
+`orderBy` is required for `offset`
+
+#### Parameters
+
+##### count
+
+`number`
+
+Number of rows to skip
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with the offset applied
+
+#### Example
+
+```ts
+// Get second page of results
+query
+  .from({ posts: postsCollection })
+  .orderBy(({posts}) => posts.createdAt, 'desc')
+  .offset(page * pageSize)
+  .limit(pageSize)
+```
+
+***
+
+### orderBy()
+
+```ts
+orderBy(callback, options): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:629](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L629)
+
+Sort the query results by one or more columns
+
+#### Parameters
+
+##### callback
+
+[`OrderByCallback`](/db/reference/type-aliases/OrderByCallback)\&lt;`TContext`\>
+
+A function that receives table references and returns the field to sort by
+
+##### options
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection) | `OrderByOptions`
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with the ordering applied
+
+#### Example
+
+```ts
+// Sort by a single column
+query
+  .from({ users: usersCollection })
+  .orderBy(({users}) => users.name)
+
+// Sort descending
+query
+  .from({ users: usersCollection })
+  .orderBy(({users}) => users.createdAt, 'desc')
+
+// Multiple sorts (chain orderBy calls)
+query
+  .from({ users: usersCollection })
+  .orderBy(({users}) => users.lastName)
+  .orderBy(({users}) => users.firstName)
+```
+
+***
+
+### rightJoin()
+
+```ts
+rightJoin<TSource>(source, onCallback): QueryBuilder<MergeContextWithJoinType<TContext, SchemaFromSource<TSource>, "right">>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:358](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L358)
+
+Perform a RIGHT JOIN with another table or subquery
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+#### Parameters
+
+##### source
+
+`TSource`
+
+An object with a single key-value pair where the key is the table alias and the value is a Collection or subquery
+
+##### onCallback
+
+[`JoinOnCallback`](/db/reference/type-aliases/JoinOnCallback)\&lt;[`MergeContextForJoinCallback`](/db/reference/type-aliases/MergeContextForJoinCallback)\&lt;`TContext`, \&#123; \[K in string \| number \| symbol\]: \&#123; \[K in string \| number \| symbol\]: TSource\[K\] extends CollectionImpl\&lt;any, any, any, any, any\> ? InferCollectionType\&lt;any\[any\]\> : TSource\[K\] extends QueryBuilder\&lt;TContext\> ? \&#123; \[K in string \| number \| symbol\]: ResultValue\&lt;TContext\>\[K\] \&#125; : never \&#125;\[K\] \&#125;\>\>
+
+A function that receives table references and returns the join condition
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`MergeContextWithJoinType`](/db/reference/type-aliases/MergeContextWithJoinType)\&lt;`TContext`, [`SchemaFromSource`](/db/reference/type-aliases/SchemaFromSource)\&lt;`TSource`\>, `"right"`\>\>
+
+A QueryBuilder with the right joined table available
+
+#### Example
+
+```ts
+// Right join users with posts
+query
+  .from({ users: usersCollection })
+  .rightJoin({ posts: postsCollection }, ({users, posts}) => eq(users.id, posts.userId))
+```
+
+***
+
+### select()
+
+#### Call Signature
+
+```ts
+select<TSelectObject>(callback): QueryBuilder<WithResult<TContext, ResultTypeFromSelect<TSelectObject>>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:570](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L570)
+
+Select specific columns or computed values from the query
+
+##### Type Parameters
+
+###### TSelectObject
+
+`TSelectObject` *extends* `SelectShape`
+
+##### Parameters
+
+###### callback
+
+(`refs`) => `NonScalarSelectObject`\&lt;`TSelectObject`\>
+
+A function that receives table references and returns an object with selected fields or expressions
+
+##### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`WithResult`](/db/reference/type-aliases/WithResult)\&lt;`TContext`, [`ResultTypeFromSelect`](/db/reference/type-aliases/ResultTypeFromSelect)\&lt;`TSelectObject`\>\>\>
+
+A QueryBuilder that returns only the selected fields
+
+##### Example
+
+```ts
+// Select specific columns
+query
+  .from({ users: usersCollection })
+  .select(({users}) => ({
+    name: users.name,
+    email: users.email
+  }))
+
+// Select with computed values
+query
+  .from({ users: usersCollection })
+  .select(({users}) => ({
+    fullName: concat(users.firstName, ' ', users.lastName),
+    ageInMonths: mul(users.age, 12)
+  }))
+
+// Select with aggregates (requires GROUP BY)
+query
+  .from({ posts: postsCollection })
+  .groupBy(({posts}) => posts.userId)
+  .select(({posts, count}) => ({
+    userId: posts.userId,
+    postCount: count(posts.id)
+  }))
+```
+
+#### Call Signature
+
+```ts
+select<TSelectValue>(callback): QueryBuilder<WithResult<TContext, ResultTypeFromSelectValue<TSelectValue>>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:575](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L575)
+
+Select specific columns or computed values from the query
+
+##### Type Parameters
+
+###### TSelectValue
+
+`TSelectValue` *extends* `ScalarSelectValue`
+
+##### Parameters
+
+###### callback
+
+(`refs`) => `TSelectValue`
+
+A function that receives table references and returns an object with selected fields or expressions
+
+##### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`WithResult`](/db/reference/type-aliases/WithResult)\&lt;`TContext`, `ResultTypeFromSelectValue`\&lt;`TSelectValue`\>\>\>
+
+A QueryBuilder that returns only the selected fields
+
+##### Example
+
+```ts
+// Select specific columns
+query
+  .from({ users: usersCollection })
+  .select(({users}) => ({
+    name: users.name,
+    email: users.email
+  }))
+
+// Select with computed values
+query
+  .from({ users: usersCollection })
+  .select(({users}) => ({
+    fullName: concat(users.firstName, ' ', users.lastName),
+    ageInMonths: mul(users.age, 12)
+  }))
+
+// Select with aggregates (requires GROUP BY)
+query
+  .from({ posts: postsCollection })
+  .groupBy(({posts}) => posts.userId)
+  .select(({posts, count}) => ({
+    userId: posts.userId,
+    postCount: count(posts.id)
+  }))
+```
+
+***
+
+### unionAll()
+
+#### Call Signature
+
+```ts
+unionAll<TSource>(source): QueryBuilder<ContextFromUnionSource<TSource>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:201](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L201)
+
+Union multiple independent source streams in one query.
+
+##### Type Parameters
+
+###### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+##### Parameters
+
+###### source
+
+`TSource`
+
+An object with one or more aliases mapped to collections or subqueries
+
+##### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`ContextFromUnionSource`](/db/reference/type-aliases/ContextFromUnionSource)\&lt;`TSource`\>\>
+
+A QueryBuilder with the unioned sources available
+
+##### Example
+
+```ts
+query
+  .unionAll({ message: messagesCollection, toolCall: toolCallsCollection })
+  .orderBy(({ message, toolCall }) =>
+    coalesce(message.timestamp, toolCall.timestamp)
+  )
+```
+
+#### Call Signature
+
+```ts
+unionAll<TBranches>(...branches): QueryBuilder<ContextFromUnionBranches<TBranches>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:204](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L204)
+
+Union multiple independent source streams in one query.
+
+##### Type Parameters
+
+###### TBranches
+
+`TBranches` *extends* readonly \[[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>, [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>\]
+
+##### Parameters
+
+###### branches
+
+...`TBranches`
+
+##### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;[`ContextFromUnionBranches`](/db/reference/type-aliases/ContextFromUnionBranches)\&lt;`TBranches`\>\>
+
+A QueryBuilder with the unioned sources available
+
+##### Example
+
+```ts
+query
+  .unionAll({ message: messagesCollection, toolCall: toolCallsCollection })
+  .orderBy(({ message, toolCall }) =>
+    coalesce(message.timestamp, toolCall.timestamp)
+  )
+```
+
+***
+
+### where()
+
+```ts
+where(callback): QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:449](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L449)
+
+Filter rows based on a condition
+
+#### Parameters
+
+##### callback
+
+[`WhereCallback`](/db/reference/type-aliases/WhereCallback)\&lt;`TContext`\>
+
+A function that receives table references and returns an expression
+
+#### Returns
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+A QueryBuilder with the where condition applied
+
+#### Example
+
+```ts
+// Simple condition
+query
+  .from({ users: usersCollection })
+  .where(({users}) => gt(users.age, 18))
+
+// Multiple conditions
+query
+  .from({ users: usersCollection })
+  .where(({users}) => and(
+    gt(users.age, 18),
+    eq(users.active, true)
+  ))
+
+// Multiple where calls are ANDed together
+query
+  .from({ users: usersCollection })
+  .where(({users}) => gt(users.age, 18))
+  .where(({users}) => eq(users.active, true))
+```
diff --git a/mintlify/db/reference/classes/BasicIndex.md b/mintlify/db/reference/classes/BasicIndex.md
new file mode 100644
index 000000000..15ddd5b07
--- /dev/null
+++ b/mintlify/db/reference/classes/BasicIndex.md
@@ -0,0 +1,944 @@
+---
+id: BasicIndex
+title: BasicIndex
+---
+
+# Class: BasicIndex\&lt;TKey\>
+
+Defined in: [packages/db/src/indexes/basic-index.ts:39](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L39)
+
+Basic index using Map + sorted Array.
+
+- Map for O(1) equality lookups
+- Sorted Array for O(log n) range queries via binary search
+- O(n) updates to maintain sort order
+
+Simpler and smaller than BTreeIndex, good for read-heavy workloads.
+Use BTreeIndex for write-heavy workloads with large collections.
+
+## Extends
+
+- [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Constructors
+
+### Constructor
+
+```ts
+new BasicIndex<TKey>(
+   id, 
+   expression, 
+   name?, 
+options?): BasicIndex<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:60](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L60)
+
+#### Parameters
+
+##### id
+
+`number`
+
+##### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+##### name?
+
+`string`
+
+##### options?
+
+`any`
+
+#### Returns
+
+`BasicIndex`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`constructor`](/db/reference/classes/BaseIndex#constructor)
+
+## Properties
+
+### compareOptions
+
+```ts
+protected compareOptions: CompareOptions;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L101)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`compareOptions`](/db/reference/classes/BaseIndex#compareoptions)
+
+***
+
+### expression
+
+```ts
+readonly expression: BasicExpression;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:95](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L95)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`expression`](/db/reference/classes/BaseIndex#expression)
+
+***
+
+### hasCustomComparator
+
+```ts
+protected hasCustomComparator: boolean = false;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:106](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L106)
+
+Set by subclasses when constructed with a user-supplied comparator, whose
+ordering may not match the WHERE evaluator's relational operators.
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`hasCustomComparator`](/db/reference/classes/BaseIndex#hascustomcomparator)
+
+***
+
+### id
+
+```ts
+readonly id: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:93](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L93)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`id`](/db/reference/classes/BaseIndex#id)
+
+***
+
+### lastUpdated
+
+```ts
+protected lastUpdated: Date;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:100](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L100)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lastUpdated`](/db/reference/classes/BaseIndex#lastupdated)
+
+***
+
+### lookupCount
+
+```ts
+protected lookupCount: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:98](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L98)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lookupCount`](/db/reference/classes/BaseIndex#lookupcount)
+
+***
+
+### name?
+
+```ts
+readonly optional name: string;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:94](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L94)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`name`](/db/reference/classes/BaseIndex#name)
+
+***
+
+### supportedOperations
+
+```ts
+readonly supportedOperations: Set<"eq" | "gt" | "gte" | "lt" | "lte" | "in" | "like" | "ilike">;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:42](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L42)
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supportedOperations`](/db/reference/classes/BaseIndex#supportedoperations)
+
+***
+
+### totalLookupTime
+
+```ts
+protected totalLookupTime: number = 0;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:99](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L99)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`totalLookupTime`](/db/reference/classes/BaseIndex#totallookuptime)
+
+## Accessors
+
+### indexedKeysSet
+
+#### Get Signature
+
+```ts
+get indexedKeysSet(): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:485](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L485)
+
+##### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`indexedKeysSet`](/db/reference/classes/BaseIndex#indexedkeysset)
+
+***
+
+### keyCount
+
+#### Get Signature
+
+```ts
+get keyCount(): number;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:239](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L239)
+
+Gets the number of indexed keys
+
+##### Returns
+
+`number`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`keyCount`](/db/reference/classes/BaseIndex#keycount)
+
+***
+
+### orderedEntriesArray
+
+#### Get Signature
+
+```ts
+get orderedEntriesArray(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:489](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L489)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`orderedEntriesArray`](/db/reference/classes/BaseIndex#orderedentriesarray)
+
+***
+
+### orderedEntriesArrayReversed
+
+#### Get Signature
+
+```ts
+get orderedEntriesArrayReversed(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:496](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L496)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`orderedEntriesArrayReversed`](/db/reference/classes/BaseIndex#orderedentriesarrayreversed)
+
+***
+
+### supportsRangeOptimization
+
+#### Get Signature
+
+```ts
+get supportsRangeOptimization(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:161](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L161)
+
+Whether range lookups (gt/gte/lt/lte) on this index can be trusted to
+return every matching key. Range traversal relies on the index ordering, so
+it is unsafe when the index uses a custom comparator, whose order may not
+match the WHERE evaluator's relational operators. Callers must fall back to
+a full scan when this is `false`.
+
+##### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supportsRangeOptimization`](/db/reference/classes/BaseIndex#supportsrangeoptimization)
+
+***
+
+### valueMapData
+
+#### Get Signature
+
+```ts
+get valueMapData(): Map<any, Set<TKey>>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:505](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L505)
+
+##### Returns
+
+`Map`\&lt;`any`, `Set`\&lt;`TKey`\>\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`valueMapData`](/db/reference/classes/BaseIndex#valuemapdata)
+
+## Methods
+
+### add()
+
+```ts
+add(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:79](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L79)
+
+Adds a value to the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`add`](/db/reference/classes/BaseIndex#add)
+
+***
+
+### build()
+
+```ts
+build(entries): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L157)
+
+Builds the index from a collection of entries
+
+#### Parameters
+
+##### entries
+
+`Iterable`\&lt;\[`TKey`, `any`\]\>
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`build`](/db/reference/classes/BaseIndex#build)
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:194](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L194)
+
+Clears all data from the index
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`clear`](/db/reference/classes/BaseIndex#clear)
+
+***
+
+### equalityLookup()
+
+```ts
+equalityLookup(value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:246](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L246)
+
+Performs an equality lookup - O(1)
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`equalityLookup`](/db/reference/classes/BaseIndex#equalitylookup)
+
+***
+
+### evaluateIndexExpression()
+
+```ts
+protected evaluateIndexExpression(item): any;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:212](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L212)
+
+#### Parameters
+
+##### item
+
+`any`
+
+#### Returns
+
+`any`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`evaluateIndexExpression`](/db/reference/classes/BaseIndex#evaluateindexexpression)
+
+***
+
+### getStats()
+
+```ts
+getStats(): IndexStats;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:200](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L200)
+
+#### Returns
+
+[`IndexStats`](/db/reference/interfaces/IndexStats)
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`getStats`](/db/reference/classes/BaseIndex#getstats)
+
+***
+
+### inArrayLookup()
+
+```ts
+inArrayLookup(values): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:470](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L470)
+
+Performs an IN array lookup - O(k) where k is values.length
+
+#### Parameters
+
+##### values
+
+`any`[]
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`inArrayLookup`](/db/reference/classes/BaseIndex#inarraylookup)
+
+***
+
+### initialize()
+
+```ts
+protected initialize(_options?): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:74](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L74)
+
+#### Parameters
+
+##### \_options?
+
+[`BasicIndexOptions`](/db/reference/interfaces/BasicIndexOptions)
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`initialize`](/db/reference/classes/BaseIndex#initialize)
+
+***
+
+### lookup()
+
+```ts
+lookup(operation, value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:204](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L204)
+
+Performs a lookup operation
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`lookup`](/db/reference/classes/BaseIndex#lookup)
+
+***
+
+### matchesCompareOptions()
+
+```ts
+matchesCompareOptions(compareOptions): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L177)
+
+Checks if the compare options match the index's compare options.
+The direction is ignored because the index can be reversed if the direction is different.
+
+#### Parameters
+
+##### compareOptions
+
+`CompareOptions`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesCompareOptions`](/db/reference/classes/BaseIndex#matchescompareoptions)
+
+***
+
+### matchesDirection()
+
+```ts
+matchesDirection(direction): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:196](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L196)
+
+Checks if the index matches the provided direction.
+
+#### Parameters
+
+##### direction
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesDirection`](/db/reference/classes/BaseIndex#matchesdirection)
+
+***
+
+### matchesField()
+
+```ts
+matchesField(fieldPath): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:165](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L165)
+
+#### Parameters
+
+##### fieldPath
+
+`string`[]
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`matchesField`](/db/reference/classes/BaseIndex#matchesfield)
+
+***
+
+### rangeQuery()
+
+```ts
+rangeQuery(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:254](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L254)
+
+Performs a range query using binary search - O(log n + m)
+
+#### Parameters
+
+##### options
+
+[`RangeQueryOptions`](/db/reference/interfaces/RangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`rangeQuery`](/db/reference/classes/BaseIndex#rangequery)
+
+***
+
+### rangeQueryReversed()
+
+```ts
+rangeQueryReversed(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:315](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L315)
+
+Performs a reversed range query
+
+#### Parameters
+
+##### options
+
+[`RangeQueryOptions`](/db/reference/interfaces/RangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`rangeQueryReversed`](/db/reference/classes/BaseIndex#rangequeryreversed)
+
+***
+
+### remove()
+
+```ts
+remove(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:115](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L115)
+
+Removes a value from the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`remove`](/db/reference/classes/BaseIndex#remove)
+
+***
+
+### supports()
+
+```ts
+supports(operation): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L157)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`supports`](/db/reference/classes/BaseIndex#supports)
+
+***
+
+### take()
+
+```ts
+take(
+   n, 
+   from?, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:340](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L340)
+
+Returns the next n items in sorted order
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from?
+
+`any`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`take`](/db/reference/classes/BaseIndex#take)
+
+***
+
+### takeFromStart()
+
+```ts
+takeFromStart(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:425](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L425)
+
+Returns the first n items in sorted order (from the start)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeFromStart`](/db/reference/classes/BaseIndex#takefromstart)
+
+***
+
+### takeReversed()
+
+```ts
+takeReversed(
+   n, 
+   from?, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:382](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L382)
+
+Returns the next n items in reverse sorted order
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from?
+
+`any`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeReversed`](/db/reference/classes/BaseIndex#takereversed)
+
+***
+
+### takeReversedFromEnd()
+
+```ts
+takeReversedFromEnd(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:444](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L444)
+
+Returns the first n items in reverse sorted order (from the end)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`takeReversedFromEnd`](/db/reference/classes/BaseIndex#takereversedfromend)
+
+***
+
+### trackLookup()
+
+```ts
+protected trackLookup(startTime): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L217)
+
+#### Parameters
+
+##### startTime
+
+`number`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`trackLookup`](/db/reference/classes/BaseIndex#tracklookup)
+
+***
+
+### update()
+
+```ts
+update(
+   key, 
+   oldItem, 
+   newItem): void;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:149](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L149)
+
+Updates a value in the index
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### oldItem
+
+`any`
+
+##### newItem
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Overrides
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`update`](/db/reference/classes/BaseIndex#update)
+
+***
+
+### updateTimestamp()
+
+```ts
+protected updateTimestamp(): void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:223](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L223)
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseIndex`](/db/reference/classes/BaseIndex).[`updateTimestamp`](/db/reference/classes/BaseIndex#updatetimestamp)
diff --git a/mintlify/db/reference/classes/CannotCombineEmptyExpressionListError.md b/mintlify/db/reference/classes/CannotCombineEmptyExpressionListError.md
new file mode 100644
index 000000000..a15c8e364
--- /dev/null
+++ b/mintlify/db/reference/classes/CannotCombineEmptyExpressionListError.md
@@ -0,0 +1,214 @@
+---
+id: CannotCombineEmptyExpressionListError
+title: CannotCombineEmptyExpressionListError
+---
+
+# Class: CannotCombineEmptyExpressionListError
+
+Defined in: [packages/db/src/errors.ts:718](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L718)
+
+## Extends
+
+- [`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CannotCombineEmptyExpressionListError(): CannotCombineEmptyExpressionListError;
+```
+
+Defined in: [packages/db/src/errors.ts:719](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L719)
+
+#### Returns
+
+`CannotCombineEmptyExpressionListError`
+
+#### Overrides
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`constructor`](/db/reference/classes/QueryOptimizerError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`cause`](/db/reference/classes/QueryOptimizerError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`message`](/db/reference/classes/QueryOptimizerError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`name`](/db/reference/classes/QueryOptimizerError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`stack`](/db/reference/classes/QueryOptimizerError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`stackTraceLimit`](/db/reference/classes/QueryOptimizerError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`captureStackTrace`](/db/reference/classes/QueryOptimizerError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`prepareStackTrace`](/db/reference/classes/QueryOptimizerError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionConfigurationError.md b/mintlify/db/reference/classes/CollectionConfigurationError.md
new file mode 100644
index 000000000..b286fa7cc
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionConfigurationError.md
@@ -0,0 +1,227 @@
+---
+id: CollectionConfigurationError
+title: CollectionConfigurationError
+---
+
+# Class: CollectionConfigurationError
+
+Defined in: [packages/db/src/errors.ts:71](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L71)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`CollectionRequiresConfigError`](/db/reference/classes/CollectionRequiresConfigError)
+- [`CollectionRequiresSyncConfigError`](/db/reference/classes/CollectionRequiresSyncConfigError)
+- [`InvalidSchemaError`](/db/reference/classes/InvalidSchemaError)
+- [`SchemaMustBeSynchronousError`](/db/reference/classes/SchemaMustBeSynchronousError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionConfigurationError(message): CollectionConfigurationError;
+```
+
+Defined in: [packages/db/src/errors.ts:72](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L72)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`CollectionConfigurationError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionImpl.md b/mintlify/db/reference/classes/CollectionImpl.md
new file mode 100644
index 000000000..275b9b30e
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionImpl.md
@@ -0,0 +1,1497 @@
+---
+id: CollectionImpl
+title: CollectionImpl
+---
+
+# Class: CollectionImpl\&lt;TOutput, TKey, TUtils, TSchema, TInput\>
+
+Defined in: [packages/db/src/collection/index.ts:273](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L273)
+
+## Extended by
+
+- [`Collection`](/db/reference/interfaces/Collection)
+
+## Type Parameters
+
+### TOutput
+
+`TOutput` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = \&#123;
+\&#125;
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `StandardSchemaV1`
+
+### TInput
+
+`TInput` *extends* `object` = `TOutput`
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionImpl<TOutput, TKey, TUtils, TSchema, TInput>(config): CollectionImpl<TOutput, TKey, TUtils, TSchema, TInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:319](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L319)
+
+Creates a new Collection instance
+
+#### Parameters
+
+##### config
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`TOutput`, `TKey`, `TSchema`\>
+
+Configuration object for the collection
+
+#### Returns
+
+`CollectionImpl`\&lt;`TOutput`, `TKey`, `TUtils`, `TSchema`, `TInput`\>
+
+#### Throws
+
+Error if sync config is missing
+
+## Properties
+
+### \_lifecycle
+
+```ts
+_lifecycle: CollectionLifecycleManager<TOutput, TKey, TSchema, TInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:290](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L290)
+
+***
+
+### \_state
+
+```ts
+_state: CollectionStateManager<TOutput, TKey, TSchema, TInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:302](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L302)
+
+***
+
+### \_sync
+
+```ts
+_sync: CollectionSyncManager<TOutput, TKey, TSchema, TInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:291](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L291)
+
+***
+
+### config
+
+```ts
+config: CollectionConfig<TOutput, TKey, TSchema>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:281](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L281)
+
+***
+
+### deferDataRefresh
+
+```ts
+deferDataRefresh: Promise<void> | null = null;
+```
+
+Defined in: [packages/db/src/collection/index.ts:309](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L309)
+
+When set, collection consumers should defer processing incoming data
+refreshes until this promise resolves. This prevents stale data from
+overwriting optimistic state while pending writes are being applied.
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/db/src/collection/index.ts:280](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L280)
+
+***
+
+### utils
+
+```ts
+utils: Record<string, Fn> = {};
+```
+
+Defined in: [packages/db/src/collection/index.ts:285](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L285)
+
+## Accessors
+
+### compareOptions
+
+#### Get Signature
+
+```ts
+get compareOptions(): StringCollationConfig;
+```
+
+Defined in: [packages/db/src/collection/index.ts:644](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L644)
+
+##### Returns
+
+[`StringCollationConfig`](/db/reference/type-aliases/StringCollationConfig)
+
+***
+
+### indexes
+
+#### Get Signature
+
+```ts
+get indexes(): Map<number, BaseIndex<TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:629](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L629)
+
+Get resolved indexes for query optimization
+
+##### Returns
+
+`Map`\&lt;`number`, [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>\>
+
+***
+
+### isLoadingSubset
+
+#### Get Signature
+
+```ts
+get isLoadingSubset(): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:457](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L457)
+
+Check if the collection is currently loading more data
+
+##### Returns
+
+`boolean`
+
+true if the collection has pending load more operations, false otherwise
+
+***
+
+### size
+
+#### Get Signature
+
+```ts
+get size(): number;
+```
+
+Defined in: [packages/db/src/collection/index.ts:494](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L494)
+
+Get the current size of the collection (cached)
+
+##### Returns
+
+`number`
+
+***
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): Map<TKey, WithVirtualProps<TOutput, TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:821](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L821)
+
+Gets the current state of the collection as a Map
+
+##### Example
+
+```ts
+const itemsMap = collection.state
+console.log(`Collection has ${itemsMap.size} items`)
+
+for (const [key, item] of itemsMap) {
+  console.log(`${key}: ${item.title}`)
+}
+
+// Check if specific item exists
+if (itemsMap.has("todo-1")) {
+  console.log("Todo 1 exists:", itemsMap.get("todo-1"))
+}
+```
+
+##### Returns
+
+`Map`\&lt;`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\>
+
+Map containing all items in the collection, with keys as identifiers
+
+***
+
+### status
+
+#### Get Signature
+
+```ts
+get status(): CollectionStatus;
+```
+
+Defined in: [packages/db/src/collection/index.ts:412](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L412)
+
+Gets the current status of the collection
+
+##### Returns
+
+[`CollectionStatus`](/db/reference/type-aliases/CollectionStatus)
+
+***
+
+### subscriberCount
+
+#### Get Signature
+
+```ts
+get subscriberCount(): number;
+```
+
+Defined in: [packages/db/src/collection/index.ts:419](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L419)
+
+Get the number of subscribers to the collection
+
+##### Returns
+
+`number`
+
+***
+
+### toArray
+
+#### Get Signature
+
+```ts
+get toArray(): WithVirtualProps<TOutput, TKey>[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:850](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L850)
+
+Gets the current state of the collection as an Array
+
+##### Returns
+
+[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>[]
+
+An Array containing all items in the collection
+
+## Methods
+
+### \[iterator\]()
+
+```ts
+iterator: IterableIterator<[TKey, WithVirtualProps<TOutput, TKey>]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:532](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L532)
+
+Get all entries (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\]\>
+
+***
+
+### cleanup()
+
+```ts
+cleanup(): Promise<void>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:989](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L989)
+
+Clean up the collection by stopping sync and clearing data
+This can be called manually or automatically by garbage collection
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### createIndex()
+
+```ts
+createIndex<TIndexType>(indexCallback, config): BaseIndex<TKey>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:598](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L598)
+
+Creates an index on a collection for faster queries.
+Indexes significantly improve query performance by allowing constant time lookups
+and logarithmic time range queries instead of full scans.
+
+#### Type Parameters
+
+##### TIndexType
+
+`TIndexType` *extends* [`IndexConstructor`](/db/reference/type-aliases/IndexConstructor)\&lt;`TKey`\>
+
+#### Parameters
+
+##### indexCallback
+
+(`row`) => `any`
+
+Function that extracts the indexed value from each item
+
+##### config
+
+[`IndexOptions`](/db/reference/interfaces/IndexOptions)\&lt;`TIndexType`\> = `{}`
+
+Configuration including index type and type-specific options
+
+#### Returns
+
+[`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+The created index
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+
+// Create an index with explicit type
+const ageIndex = collection.createIndex((row) => row.age, {
+  indexType: BasicIndex
+})
+
+// Create an index with collection's default type
+const nameIndex = collection.createIndex((row) => row.name)
+```
+
+***
+
+### currentStateAsChanges()
+
+```ts
+currentStateAsChanges(options): 
+  | void
+  | ChangeMessage<WithVirtualProps<TOutput, TKey>, string | number>[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:888](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L888)
+
+Returns the current state of the collection as an array of changes
+
+#### Parameters
+
+##### options
+
+[`CurrentStateAsChangesOptions`](/db/reference/interfaces/CurrentStateAsChangesOptions) = `{}`
+
+Options including optional where filter
+
+#### Returns
+
+  \| `void`
+  \| [`ChangeMessage`](/db/reference/interfaces/ChangeMessage)\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>, `string` \| `number`\>[]
+
+An array of changes
+
+#### Example
+
+```ts
+// Get all items as changes
+const allChanges = collection.currentStateAsChanges()
+
+// Get only items matching a condition
+const activeChanges = collection.currentStateAsChanges({
+  where: (row) => row.status === 'active'
+})
+
+// Get only items using a pre-compiled expression
+const activeChanges = collection.currentStateAsChanges({
+  whereExpression: eq(row.status, 'active')
+})
+```
+
+***
+
+### delete()
+
+```ts
+delete(keys, config?): Transaction<any>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:798](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L798)
+
+Deletes one or more items from the collection
+
+#### Parameters
+
+##### keys
+
+Single key or array of keys to delete
+
+`TKey` | `TKey`[]
+
+##### config?
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+Optional configuration including metadata
+
+#### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`any`\>
+
+A Transaction object representing the delete operation(s)
+
+#### Examples
+
+```ts
+// Delete a single item
+const tx = collection.delete("todo-1")
+await tx.isPersisted.promise
+```
+
+```ts
+// Delete multiple items
+const tx = collection.delete(["todo-1", "todo-2"])
+await tx.isPersisted.promise
+```
+
+```ts
+// Delete with metadata
+const tx = collection.delete("todo-1", { metadata: { reason: "completed" } })
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.delete("item-1")
+  await tx.isPersisted.promise
+  console.log('Delete successful')
+} catch (error) {
+  console.log('Delete failed:', error)
+}
+```
+
+***
+
+### entries()
+
+```ts
+entries(): IterableIterator<[TKey, WithVirtualProps<TOutput, TKey>]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:520](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L520)
+
+Get all entries (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\]\>
+
+***
+
+### forEach()
+
+```ts
+forEach(callbackfn): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:541](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L541)
+
+Execute a callback for each entry in the collection
+
+#### Parameters
+
+##### callbackfn
+
+(`value`, `key`, `index`) => `void`
+
+#### Returns
+
+`void`
+
+***
+
+### get()
+
+```ts
+get(key): 
+  | WithVirtualProps<TOutput, TKey>
+  | undefined;
+```
+
+Defined in: [packages/db/src/collection/index.ts:480](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L480)
+
+Get the current value for a key (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+  \| [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>
+  \| `undefined`
+
+***
+
+### getIndexMetadata()
+
+```ts
+getIndexMetadata(): CollectionIndexMetadata[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:622](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L622)
+
+Returns a snapshot of current index metadata sorted by indexId.
+Persistence wrappers can use this to bootstrap index state if indexes were
+created before event listeners were attached.
+
+#### Returns
+
+[`CollectionIndexMetadata`](/db/reference/interfaces/CollectionIndexMetadata)[]
+
+***
+
+### getKeyFromItem()
+
+```ts
+getKeyFromItem(item): TKey;
+```
+
+Defined in: [packages/db/src/collection/index.ts:572](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L572)
+
+#### Parameters
+
+##### item
+
+`TOutput`
+
+#### Returns
+
+`TKey`
+
+***
+
+### has()
+
+```ts
+has(key): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:487](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L487)
+
+Check if a key exists in the collection (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+`boolean`
+
+***
+
+### insert()
+
+```ts
+insert(data, config?): Transaction<Record<string, unknown>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:685](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L685)
+
+Inserts one or more items into the collection
+
+#### Parameters
+
+##### data
+
+`TInput` | `TInput`[]
+
+##### config?
+
+[`InsertConfig`](/db/reference/interfaces/InsertConfig)
+
+Optional configuration including metadata
+
+#### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`Record`\&lt;`string`, `unknown`\>\>
+
+A Transaction object representing the insert operation(s)
+
+#### Throws
+
+If the data fails schema validation
+
+#### Examples
+
+```ts
+// Insert a single todo (requires onInsert handler)
+const tx = collection.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Insert multiple todos at once
+const tx = collection.insert([
+  { id: "1", text: "Buy milk", completed: false },
+  { id: "2", text: "Walk dog", completed: true }
+])
+await tx.isPersisted.promise
+```
+
+```ts
+// Insert with metadata
+const tx = collection.insert({ id: "1", text: "Buy groceries" },
+  { metadata: { source: "mobile-app" } }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.insert({ id: "1", text: "New item" })
+  await tx.isPersisted.promise
+  console.log('Insert successful')
+} catch (error) {
+  console.log('Insert failed:', error)
+}
+```
+
+***
+
+### isReady()
+
+```ts
+isReady(): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:449](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L449)
+
+Check if the collection is ready for use
+Returns true if the collection has been marked as ready by its sync implementation
+
+#### Returns
+
+`boolean`
+
+true if the collection is ready, false otherwise
+
+#### Example
+
+```ts
+if (collection.isReady()) {
+  console.log('Collection is ready, data is available')
+  // Safe to access collection.state
+} else {
+  console.log('Collection is still loading')
+}
+```
+
+***
+
+### keys()
+
+```ts
+keys(): IterableIterator<TKey>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:501](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L501)
+
+Get all keys (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;`TKey`\>
+
+***
+
+### map()
+
+```ts
+map<U>(callbackfn): U[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:557](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L557)
+
+Create a new array with the results of calling a function for each entry in the collection
+
+#### Type Parameters
+
+##### U
+
+`U`
+
+#### Parameters
+
+##### callbackfn
+
+(`value`, `key`, `index`) => `U`
+
+#### Returns
+
+`U`[]
+
+***
+
+### off()
+
+```ts
+off<T>(event, callback): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:968](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L968)
+
+Unsubscribe from a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+`void`
+
+***
+
+### on()
+
+```ts
+on<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:948](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L948)
+
+Subscribe to a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### once()
+
+```ts
+once<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:958](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L958)
+
+Subscribe to a collection event once
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### onFirstReady()
+
+```ts
+onFirstReady(callback): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:433](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L433)
+
+Register a callback to be executed when the collection first becomes ready
+Useful for preloading collections
+
+#### Parameters
+
+##### callback
+
+() => `void`
+
+Function to call when the collection first becomes ready
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+collection.onFirstReady(() => {
+  console.log('Collection is ready for the first time')
+  // Safe to access collection.state now
+})
+```
+
+***
+
+### preload()
+
+```ts
+preload(): Promise<void>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:473](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L473)
+
+Preload the collection data by starting sync if not already started
+Multiple concurrent calls will share the same promise
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### removeIndex()
+
+```ts
+removeIndex(indexOrId): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:613](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L613)
+
+Removes an index created with createIndex.
+Returns true when an index existed and was removed.
+
+Best-effort semantics: removing an index guarantees it is detached from
+collection query planning. Existing index proxy references should be treated
+as invalid after removal.
+
+#### Parameters
+
+##### indexOrId
+
+`number` | [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+#### Returns
+
+`boolean`
+
+***
+
+### startSyncImmediate()
+
+```ts
+startSyncImmediate(): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:465](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L465)
+
+Start sync immediately - internal method for compiled queries
+This bypasses lazy loading for special cases like live query results
+
+#### Returns
+
+`void`
+
+***
+
+### stateWhenReady()
+
+```ts
+stateWhenReady(): Promise<Map<TKey, WithVirtualProps<TOutput, TKey>>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:835](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L835)
+
+Gets the current state of the collection as a Map, but only resolves when data is available
+Waits for the first sync commit to complete before resolving
+
+#### Returns
+
+`Promise`\&lt;`Map`\&lt;`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\>\>
+
+Promise that resolves to a Map containing all items in the collection
+
+***
+
+### subscribeChanges()
+
+```ts
+subscribeChanges(callback, options): CollectionSubscription;
+```
+
+Defined in: [packages/db/src/collection/index.ts:936](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L936)
+
+Subscribe to changes in the collection
+
+#### Parameters
+
+##### callback
+
+(`changes`) => `void`
+
+Function called when items change
+
+##### options
+
+[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions)\&lt;`TOutput`, `TKey`\> = `{}`
+
+Subscription options including includeInitialState and where filter
+
+#### Returns
+
+`CollectionSubscription`
+
+Unsubscribe function - Call this to stop listening for changes
+
+#### Examples
+
+```ts
+// Basic subscription
+const subscription = collection.subscribeChanges((changes) => {
+  changes.forEach(change => {
+    console.log(`${change.type}: ${change.key}`, change.value)
+  })
+})
+
+// Later: subscription.unsubscribe()
+```
+
+```ts
+// Include current state immediately
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, { includeInitialState: true })
+```
+
+```ts
+// Subscribe only to changes matching a condition using where callback
+import { eq } from "@tanstack/db"
+
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, {
+  includeInitialState: true,
+  where: (row) => eq(row.status, "active")
+})
+```
+
+```ts
+// Using multiple conditions with and()
+import { and, eq, gt } from "@tanstack/db"
+
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, {
+  where: (row) => and(eq(row.status, "active"), gt(row.priority, 5))
+})
+```
+
+***
+
+### toArrayWhenReady()
+
+```ts
+toArrayWhenReady(): Promise<WithVirtualProps<TOutput, TKey>[]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:860](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L860)
+
+Gets the current state of the collection as an Array, but only resolves when data is available
+Waits for the first sync commit to complete before resolving
+
+#### Returns
+
+`Promise`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>[]\>
+
+Promise that resolves to an Array containing all items in the collection
+
+***
+
+### update()
+
+#### Call Signature
+
+```ts
+update(key, callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:730](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L730)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### key
+
+`unknown`[]
+
+###### callback
+
+(`drafts`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+#### Call Signature
+
+```ts
+update(
+   keys, 
+   config, 
+   callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:736](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L736)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### keys
+
+`unknown`[]
+
+Single key or array of keys to update
+
+###### config
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+###### callback
+
+(`drafts`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+#### Call Signature
+
+```ts
+update(id, callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:743](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L743)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### id
+
+`unknown`
+
+###### callback
+
+(`draft`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+#### Call Signature
+
+```ts
+update(
+   id, 
+   config, 
+   callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:749](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L749)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### id
+
+`unknown`
+
+###### config
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+###### callback
+
+(`draft`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+***
+
+### validateData()
+
+```ts
+validateData(
+   data, 
+   type, 
+   key?): TOutput;
+```
+
+Defined in: [packages/db/src/collection/index.ts:636](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L636)
+
+Validates the data against the schema
+
+#### Parameters
+
+##### data
+
+`unknown`
+
+##### type
+
+`"insert"` | `"update"`
+
+##### key?
+
+`TKey`
+
+#### Returns
+
+`TOutput`
+
+***
+
+### values()
+
+```ts
+values(): IterableIterator<WithVirtualProps<TOutput, TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:508](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L508)
+
+Get all values (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\>
+
+***
+
+### waitFor()
+
+```ts
+waitFor<T>(event, timeout?): Promise<AllCollectionEvents[T]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:978](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L978)
+
+Wait for a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### timeout?
+
+`number`
+
+#### Returns
+
+`Promise`\&lt;`AllCollectionEvents`\[`T`\]\>
diff --git a/mintlify/db/reference/classes/CollectionInErrorStateError.md b/mintlify/db/reference/classes/CollectionInErrorStateError.md
new file mode 100644
index 000000000..f33ba4935
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionInErrorStateError.md
@@ -0,0 +1,224 @@
+---
+id: CollectionInErrorStateError
+title: CollectionInErrorStateError
+---
+
+# Class: CollectionInErrorStateError
+
+Defined in: [packages/db/src/errors.ts:110](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L110)
+
+## Extends
+
+- [`CollectionStateError`](/db/reference/classes/CollectionStateError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionInErrorStateError(operation, collectionId): CollectionInErrorStateError;
+```
+
+Defined in: [packages/db/src/errors.ts:111](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L111)
+
+#### Parameters
+
+##### operation
+
+`string`
+
+##### collectionId
+
+`string`
+
+#### Returns
+
+`CollectionInErrorStateError`
+
+#### Overrides
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`constructor`](/db/reference/classes/CollectionStateError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`cause`](/db/reference/classes/CollectionStateError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`message`](/db/reference/classes/CollectionStateError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`name`](/db/reference/classes/CollectionStateError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stack`](/db/reference/classes/CollectionStateError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stackTraceLimit`](/db/reference/classes/CollectionStateError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`captureStackTrace`](/db/reference/classes/CollectionStateError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`prepareStackTrace`](/db/reference/classes/CollectionStateError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionInputNotFoundError.md b/mintlify/db/reference/classes/CollectionInputNotFoundError.md
new file mode 100644
index 000000000..5ed5a6377
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionInputNotFoundError.md
@@ -0,0 +1,234 @@
+---
+id: CollectionInputNotFoundError
+title: CollectionInputNotFoundError
+---
+
+# Class: CollectionInputNotFoundError
+
+Defined in: [packages/db/src/errors.ts:499](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L499)
+
+Error thrown when a collection input stream is not found during query compilation.
+In self-joins, each alias (e.g., 'employee', 'manager') requires its own input stream.
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionInputNotFoundError(
+   alias, 
+   collectionId?, 
+   availableKeys?): CollectionInputNotFoundError;
+```
+
+Defined in: [packages/db/src/errors.ts:500](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L500)
+
+#### Parameters
+
+##### alias
+
+`string`
+
+##### collectionId?
+
+`string`
+
+##### availableKeys?
+
+`string`[]
+
+#### Returns
+
+`CollectionInputNotFoundError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionIsInErrorStateError.md b/mintlify/db/reference/classes/CollectionIsInErrorStateError.md
new file mode 100644
index 000000000..bf3ead1b1
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionIsInErrorStateError.md
@@ -0,0 +1,214 @@
+---
+id: CollectionIsInErrorStateError
+title: CollectionIsInErrorStateError
+---
+
+# Class: CollectionIsInErrorStateError
+
+Defined in: [packages/db/src/errors.ts:126](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L126)
+
+## Extends
+
+- [`CollectionStateError`](/db/reference/classes/CollectionStateError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionIsInErrorStateError(): CollectionIsInErrorStateError;
+```
+
+Defined in: [packages/db/src/errors.ts:127](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L127)
+
+#### Returns
+
+`CollectionIsInErrorStateError`
+
+#### Overrides
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`constructor`](/db/reference/classes/CollectionStateError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`cause`](/db/reference/classes/CollectionStateError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`message`](/db/reference/classes/CollectionStateError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`name`](/db/reference/classes/CollectionStateError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stack`](/db/reference/classes/CollectionStateError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stackTraceLimit`](/db/reference/classes/CollectionStateError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`captureStackTrace`](/db/reference/classes/CollectionStateError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`prepareStackTrace`](/db/reference/classes/CollectionStateError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionOperationError.md b/mintlify/db/reference/classes/CollectionOperationError.md
new file mode 100644
index 000000000..c2628139e
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionOperationError.md
@@ -0,0 +1,233 @@
+---
+id: CollectionOperationError
+title: CollectionOperationError
+---
+
+# Class: CollectionOperationError
+
+Defined in: [packages/db/src/errors.ts:139](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L139)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`UndefinedKeyError`](/db/reference/classes/UndefinedKeyError)
+- [`InvalidKeyError`](/db/reference/classes/InvalidKeyError)
+- [`DuplicateKeyError`](/db/reference/classes/DuplicateKeyError)
+- [`DuplicateKeySyncError`](/db/reference/classes/DuplicateKeySyncError)
+- [`MissingUpdateArgumentError`](/db/reference/classes/MissingUpdateArgumentError)
+- [`NoKeysPassedToUpdateError`](/db/reference/classes/NoKeysPassedToUpdateError)
+- [`UpdateKeyNotFoundError`](/db/reference/classes/UpdateKeyNotFoundError)
+- [`KeyUpdateNotAllowedError`](/db/reference/classes/KeyUpdateNotAllowedError)
+- [`NoKeysPassedToDeleteError`](/db/reference/classes/NoKeysPassedToDeleteError)
+- [`DeleteKeyNotFoundError`](/db/reference/classes/DeleteKeyNotFoundError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionOperationError(message): CollectionOperationError;
+```
+
+Defined in: [packages/db/src/errors.ts:140](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L140)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`CollectionOperationError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionRequiresConfigError.md b/mintlify/db/reference/classes/CollectionRequiresConfigError.md
new file mode 100644
index 000000000..91f70b608
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionRequiresConfigError.md
@@ -0,0 +1,214 @@
+---
+id: CollectionRequiresConfigError
+title: CollectionRequiresConfigError
+---
+
+# Class: CollectionRequiresConfigError
+
+Defined in: [packages/db/src/errors.ts:78](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L78)
+
+## Extends
+
+- [`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionRequiresConfigError(): CollectionRequiresConfigError;
+```
+
+Defined in: [packages/db/src/errors.ts:79](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L79)
+
+#### Returns
+
+`CollectionRequiresConfigError`
+
+#### Overrides
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`constructor`](/db/reference/classes/CollectionConfigurationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`cause`](/db/reference/classes/CollectionConfigurationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`message`](/db/reference/classes/CollectionConfigurationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`name`](/db/reference/classes/CollectionConfigurationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stack`](/db/reference/classes/CollectionConfigurationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stackTraceLimit`](/db/reference/classes/CollectionConfigurationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`captureStackTrace`](/db/reference/classes/CollectionConfigurationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`prepareStackTrace`](/db/reference/classes/CollectionConfigurationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionRequiresSyncConfigError.md b/mintlify/db/reference/classes/CollectionRequiresSyncConfigError.md
new file mode 100644
index 000000000..cbed7127c
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionRequiresSyncConfigError.md
@@ -0,0 +1,214 @@
+---
+id: CollectionRequiresSyncConfigError
+title: CollectionRequiresSyncConfigError
+---
+
+# Class: CollectionRequiresSyncConfigError
+
+Defined in: [packages/db/src/errors.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L84)
+
+## Extends
+
+- [`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionRequiresSyncConfigError(): CollectionRequiresSyncConfigError;
+```
+
+Defined in: [packages/db/src/errors.ts:85](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L85)
+
+#### Returns
+
+`CollectionRequiresSyncConfigError`
+
+#### Overrides
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`constructor`](/db/reference/classes/CollectionConfigurationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`cause`](/db/reference/classes/CollectionConfigurationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`message`](/db/reference/classes/CollectionConfigurationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`name`](/db/reference/classes/CollectionConfigurationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stack`](/db/reference/classes/CollectionConfigurationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stackTraceLimit`](/db/reference/classes/CollectionConfigurationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`captureStackTrace`](/db/reference/classes/CollectionConfigurationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`prepareStackTrace`](/db/reference/classes/CollectionConfigurationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/CollectionStateError.md b/mintlify/db/reference/classes/CollectionStateError.md
new file mode 100644
index 000000000..79c4aff45
--- /dev/null
+++ b/mintlify/db/reference/classes/CollectionStateError.md
@@ -0,0 +1,227 @@
+---
+id: CollectionStateError
+title: CollectionStateError
+---
+
+# Class: CollectionStateError
+
+Defined in: [packages/db/src/errors.ts:103](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L103)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`CollectionInErrorStateError`](/db/reference/classes/CollectionInErrorStateError)
+- [`InvalidCollectionStatusTransitionError`](/db/reference/classes/InvalidCollectionStatusTransitionError)
+- [`CollectionIsInErrorStateError`](/db/reference/classes/CollectionIsInErrorStateError)
+- [`NegativeActiveSubscribersError`](/db/reference/classes/NegativeActiveSubscribersError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new CollectionStateError(message): CollectionStateError;
+```
+
+Defined in: [packages/db/src/errors.ts:104](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L104)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`CollectionStateError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DeduplicatedLoadSubset.md b/mintlify/db/reference/classes/DeduplicatedLoadSubset.md
new file mode 100644
index 000000000..b65b1cc59
--- /dev/null
+++ b/mintlify/db/reference/classes/DeduplicatedLoadSubset.md
@@ -0,0 +1,120 @@
+---
+id: DeduplicatedLoadSubset
+title: DeduplicatedLoadSubset
+---
+
+# Class: DeduplicatedLoadSubset
+
+Defined in: [packages/db/src/query/subset-dedupe.ts:34](https://github.com/TanStack/db/blob/main/packages/db/src/query/subset-dedupe.ts#L34)
+
+Deduplicated wrapper for a loadSubset function.
+Tracks what data has been loaded and avoids redundant calls by applying
+subset logic to predicates.
+
+## Param
+
+The options for the DeduplicatedLoadSubset
+
+## Param
+
+The underlying loadSubset function to wrap
+
+## Param
+
+An optional callback function that is invoked when a loadSubset call is deduplicated.
+                             If the call is deduplicated because the requested data is being loaded by an inflight request,
+                             then this callback is invoked when the inflight request completes successfully and the data is fully loaded.
+                             This callback is useful if you need to track rows per query, in which case you can't ignore deduplicated calls
+                             because you need to know which rows were loaded for each query.
+
+## Example
+
+```ts
+const dedupe = new DeduplicatedLoadSubset({ loadSubset: myLoadSubset, onDeduplicate: (opts) => console.log(`Call was deduplicated:`, opts) })
+
+// First call - fetches data
+await dedupe.loadSubset({ where: gt(ref('age'), val(10)) })
+
+// Second call - subset of first, returns true immediately
+await dedupe.loadSubset({ where: gt(ref('age'), val(20)) })
+
+// Clear state to start fresh
+dedupe.reset()
+```
+
+## Constructors
+
+### Constructor
+
+```ts
+new DeduplicatedLoadSubset(opts): DeduplicatedLoadSubset;
+```
+
+Defined in: [packages/db/src/query/subset-dedupe.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/query/subset-dedupe.ts#L67)
+
+#### Parameters
+
+##### opts
+
+###### loadSubset
+
+(`options`) => `true` \| `Promise`\&lt;`void`\>
+
+###### onDeduplicate?
+
+(`options`) => `void`
+
+#### Returns
+
+`DeduplicatedLoadSubset`
+
+## Methods
+
+### loadSubset()
+
+```ts
+loadSubset(options): true | Promise<void>;
+```
+
+Defined in: [packages/db/src/query/subset-dedupe.ts:85](https://github.com/TanStack/db/blob/main/packages/db/src/query/subset-dedupe.ts#L85)
+
+Load a subset of data, with automatic deduplication based on previously
+loaded predicates and in-flight requests.
+
+This method is auto-bound, so it can be safely passed as a callback without
+losing its `this` context (e.g., `loadSubset: dedupe.loadSubset` in a sync config).
+
+#### Parameters
+
+##### options
+
+[`LoadSubsetOptions`](/db/reference/type-aliases/LoadSubsetOptions)
+
+The predicate options (where, orderBy, limit)
+
+#### Returns
+
+`true` \| `Promise`\&lt;`void`\>
+
+true if data is already loaded, or a Promise that resolves when data is loaded
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [packages/db/src/query/subset-dedupe.ts:194](https://github.com/TanStack/db/blob/main/packages/db/src/query/subset-dedupe.ts#L194)
+
+Reset all tracking state.
+Clears the history of loaded predicates and in-flight calls.
+Use this when you want to start fresh, for example after clearing the underlying data store.
+
+Note: Any in-flight requests will still complete, but they will not update the tracking
+state after the reset. This prevents old requests from repopulating cleared state.
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/classes/DeleteKeyNotFoundError.md b/mintlify/db/reference/classes/DeleteKeyNotFoundError.md
new file mode 100644
index 000000000..ea890a642
--- /dev/null
+++ b/mintlify/db/reference/classes/DeleteKeyNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: DeleteKeyNotFoundError
+title: DeleteKeyNotFoundError
+---
+
+# Class: DeleteKeyNotFoundError
+
+Defined in: [packages/db/src/errors.ts:245](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L245)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DeleteKeyNotFoundError(key): DeleteKeyNotFoundError;
+```
+
+Defined in: [packages/db/src/errors.ts:246](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L246)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`DeleteKeyNotFoundError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DistinctRequiresSelectError.md b/mintlify/db/reference/classes/DistinctRequiresSelectError.md
new file mode 100644
index 000000000..460eff247
--- /dev/null
+++ b/mintlify/db/reference/classes/DistinctRequiresSelectError.md
@@ -0,0 +1,214 @@
+---
+id: DistinctRequiresSelectError
+title: DistinctRequiresSelectError
+---
+
+# Class: DistinctRequiresSelectError
+
+Defined in: [packages/db/src/errors.ts:455](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L455)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DistinctRequiresSelectError(): DistinctRequiresSelectError;
+```
+
+Defined in: [packages/db/src/errors.ts:456](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L456)
+
+#### Returns
+
+`DistinctRequiresSelectError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DuplicateAliasInSubqueryError.md b/mintlify/db/reference/classes/DuplicateAliasInSubqueryError.md
new file mode 100644
index 000000000..0a5f1932f
--- /dev/null
+++ b/mintlify/db/reference/classes/DuplicateAliasInSubqueryError.md
@@ -0,0 +1,228 @@
+---
+id: DuplicateAliasInSubqueryError
+title: DuplicateAliasInSubqueryError
+---
+
+# Class: DuplicateAliasInSubqueryError
+
+Defined in: [packages/db/src/errors.ts:520](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L520)
+
+Error thrown when a subquery uses the same alias as its parent query.
+This causes issues because parent and subquery would share the same input streams,
+leading to empty results or incorrect data (aggregation cross-leaking).
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DuplicateAliasInSubqueryError(alias, parentAliases): DuplicateAliasInSubqueryError;
+```
+
+Defined in: [packages/db/src/errors.ts:521](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L521)
+
+#### Parameters
+
+##### alias
+
+`string`
+
+##### parentAliases
+
+`string`[]
+
+#### Returns
+
+`DuplicateAliasInSubqueryError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DuplicateDbInstanceError.md b/mintlify/db/reference/classes/DuplicateDbInstanceError.md
new file mode 100644
index 000000000..91717561d
--- /dev/null
+++ b/mintlify/db/reference/classes/DuplicateDbInstanceError.md
@@ -0,0 +1,214 @@
+---
+id: DuplicateDbInstanceError
+title: DuplicateDbInstanceError
+---
+
+# Class: DuplicateDbInstanceError
+
+Defined in: [packages/db/src/errors.ts:45](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L45)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DuplicateDbInstanceError(): DuplicateDbInstanceError;
+```
+
+Defined in: [packages/db/src/errors.ts:46](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L46)
+
+#### Returns
+
+`DuplicateDbInstanceError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DuplicateKeyError.md b/mintlify/db/reference/classes/DuplicateKeyError.md
new file mode 100644
index 000000000..1699c4b70
--- /dev/null
+++ b/mintlify/db/reference/classes/DuplicateKeyError.md
@@ -0,0 +1,220 @@
+---
+id: DuplicateKeyError
+title: DuplicateKeyError
+---
+
+# Class: DuplicateKeyError
+
+Defined in: [packages/db/src/errors.ts:163](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L163)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DuplicateKeyError(key): DuplicateKeyError;
+```
+
+Defined in: [packages/db/src/errors.ts:164](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L164)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`DuplicateKeyError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/DuplicateKeySyncError.md b/mintlify/db/reference/classes/DuplicateKeySyncError.md
new file mode 100644
index 000000000..5428322b8
--- /dev/null
+++ b/mintlify/db/reference/classes/DuplicateKeySyncError.md
@@ -0,0 +1,241 @@
+---
+id: DuplicateKeySyncError
+title: DuplicateKeySyncError
+---
+
+# Class: DuplicateKeySyncError
+
+Defined in: [packages/db/src/errors.ts:171](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L171)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DuplicateKeySyncError(
+   key, 
+   collectionId, 
+   options?): DuplicateKeySyncError;
+```
+
+Defined in: [packages/db/src/errors.ts:172](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L172)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+##### collectionId
+
+`string`
+
+##### options?
+
+###### hasCustomGetKey?
+
+`boolean`
+
+###### hasDistinct?
+
+`boolean`
+
+###### hasJoins?
+
+`boolean`
+
+#### Returns
+
+`DuplicateKeySyncError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/EmptyReferencePathError.md b/mintlify/db/reference/classes/EmptyReferencePathError.md
new file mode 100644
index 000000000..4b38cc908
--- /dev/null
+++ b/mintlify/db/reference/classes/EmptyReferencePathError.md
@@ -0,0 +1,214 @@
+---
+id: EmptyReferencePathError
+title: EmptyReferencePathError
+---
+
+# Class: EmptyReferencePathError
+
+Defined in: [packages/db/src/errors.ts:543](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L543)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new EmptyReferencePathError(): EmptyReferencePathError;
+```
+
+Defined in: [packages/db/src/errors.ts:544](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L544)
+
+#### Returns
+
+`EmptyReferencePathError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/FnSelectWithGroupByError.md b/mintlify/db/reference/classes/FnSelectWithGroupByError.md
new file mode 100644
index 000000000..0b29849f6
--- /dev/null
+++ b/mintlify/db/reference/classes/FnSelectWithGroupByError.md
@@ -0,0 +1,214 @@
+---
+id: FnSelectWithGroupByError
+title: FnSelectWithGroupByError
+---
+
+# Class: FnSelectWithGroupByError
+
+Defined in: [packages/db/src/errors.ts:461](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L461)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new FnSelectWithGroupByError(): FnSelectWithGroupByError;
+```
+
+Defined in: [packages/db/src/errors.ts:462](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L462)
+
+#### Returns
+
+`FnSelectWithGroupByError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/GroupByError.md b/mintlify/db/reference/classes/GroupByError.md
new file mode 100644
index 000000000..135b3f090
--- /dev/null
+++ b/mintlify/db/reference/classes/GroupByError.md
@@ -0,0 +1,227 @@
+---
+id: GroupByError
+title: GroupByError
+---
+
+# Class: GroupByError
+
+Defined in: [packages/db/src/errors.ts:618](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L618)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`NonAggregateExpressionNotInGroupByError`](/db/reference/classes/NonAggregateExpressionNotInGroupByError)
+- [`UnsupportedAggregateFunctionError`](/db/reference/classes/UnsupportedAggregateFunctionError)
+- [`AggregateFunctionNotInSelectError`](/db/reference/classes/AggregateFunctionNotInSelectError)
+- [`UnknownHavingExpressionTypeError`](/db/reference/classes/UnknownHavingExpressionTypeError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new GroupByError(message): GroupByError;
+```
+
+Defined in: [packages/db/src/errors.ts:619](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L619)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`GroupByError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/HavingRequiresGroupByError.md b/mintlify/db/reference/classes/HavingRequiresGroupByError.md
new file mode 100644
index 000000000..ee7a1ed28
--- /dev/null
+++ b/mintlify/db/reference/classes/HavingRequiresGroupByError.md
@@ -0,0 +1,214 @@
+---
+id: HavingRequiresGroupByError
+title: HavingRequiresGroupByError
+---
+
+# Class: HavingRequiresGroupByError
+
+Defined in: [packages/db/src/errors.ts:481](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L481)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new HavingRequiresGroupByError(): HavingRequiresGroupByError;
+```
+
+Defined in: [packages/db/src/errors.ts:482](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L482)
+
+#### Returns
+
+`HavingRequiresGroupByError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidCollectionStatusTransitionError.md b/mintlify/db/reference/classes/InvalidCollectionStatusTransitionError.md
new file mode 100644
index 000000000..201d7f284
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidCollectionStatusTransitionError.md
@@ -0,0 +1,231 @@
+---
+id: InvalidCollectionStatusTransitionError
+title: InvalidCollectionStatusTransitionError
+---
+
+# Class: InvalidCollectionStatusTransitionError
+
+Defined in: [packages/db/src/errors.ts:118](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L118)
+
+## Extends
+
+- [`CollectionStateError`](/db/reference/classes/CollectionStateError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidCollectionStatusTransitionError(
+   from, 
+   to, 
+   collectionId): InvalidCollectionStatusTransitionError;
+```
+
+Defined in: [packages/db/src/errors.ts:119](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L119)
+
+#### Parameters
+
+##### from
+
+`string`
+
+##### to
+
+`string`
+
+##### collectionId
+
+`string`
+
+#### Returns
+
+`InvalidCollectionStatusTransitionError`
+
+#### Overrides
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`constructor`](/db/reference/classes/CollectionStateError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`cause`](/db/reference/classes/CollectionStateError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`message`](/db/reference/classes/CollectionStateError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`name`](/db/reference/classes/CollectionStateError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stack`](/db/reference/classes/CollectionStateError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stackTraceLimit`](/db/reference/classes/CollectionStateError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`captureStackTrace`](/db/reference/classes/CollectionStateError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`prepareStackTrace`](/db/reference/classes/CollectionStateError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidJoinCondition.md b/mintlify/db/reference/classes/InvalidJoinCondition.md
new file mode 100644
index 000000000..0de96c4ac
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidJoinCondition.md
@@ -0,0 +1,214 @@
+---
+id: InvalidJoinCondition
+title: InvalidJoinCondition
+---
+
+# Class: InvalidJoinCondition
+
+Defined in: [packages/db/src/errors.ts:605](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L605)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidJoinCondition(): InvalidJoinCondition;
+```
+
+Defined in: [packages/db/src/errors.ts:606](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L606)
+
+#### Returns
+
+`InvalidJoinCondition`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidJoinConditionLeftSourceError.md b/mintlify/db/reference/classes/InvalidJoinConditionLeftSourceError.md
new file mode 100644
index 000000000..b98b33c86
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidJoinConditionLeftSourceError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidJoinConditionLeftSourceError
+title: InvalidJoinConditionLeftSourceError
+---
+
+# Class: InvalidJoinConditionLeftSourceError
+
+Defined in: [packages/db/src/errors.ts:589](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L589)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidJoinConditionLeftSourceError(sourceAlias): InvalidJoinConditionLeftSourceError;
+```
+
+Defined in: [packages/db/src/errors.ts:590](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L590)
+
+#### Parameters
+
+##### sourceAlias
+
+`string`
+
+#### Returns
+
+`InvalidJoinConditionLeftSourceError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidJoinConditionRightSourceError.md b/mintlify/db/reference/classes/InvalidJoinConditionRightSourceError.md
new file mode 100644
index 000000000..a2eb02b08
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidJoinConditionRightSourceError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidJoinConditionRightSourceError
+title: InvalidJoinConditionRightSourceError
+---
+
+# Class: InvalidJoinConditionRightSourceError
+
+Defined in: [packages/db/src/errors.ts:597](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L597)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidJoinConditionRightSourceError(sourceAlias): InvalidJoinConditionRightSourceError;
+```
+
+Defined in: [packages/db/src/errors.ts:598](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L598)
+
+#### Parameters
+
+##### sourceAlias
+
+`string`
+
+#### Returns
+
+`InvalidJoinConditionRightSourceError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidJoinConditionSameSourceError.md b/mintlify/db/reference/classes/InvalidJoinConditionSameSourceError.md
new file mode 100644
index 000000000..dace11fac
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidJoinConditionSameSourceError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidJoinConditionSameSourceError
+title: InvalidJoinConditionSameSourceError
+---
+
+# Class: InvalidJoinConditionSameSourceError
+
+Defined in: [packages/db/src/errors.ts:575](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L575)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidJoinConditionSameSourceError(sourceAlias): InvalidJoinConditionSameSourceError;
+```
+
+Defined in: [packages/db/src/errors.ts:576](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L576)
+
+#### Parameters
+
+##### sourceAlias
+
+`string`
+
+#### Returns
+
+`InvalidJoinConditionSameSourceError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidJoinConditionSourceMismatchError.md b/mintlify/db/reference/classes/InvalidJoinConditionSourceMismatchError.md
new file mode 100644
index 000000000..f5b73874d
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidJoinConditionSourceMismatchError.md
@@ -0,0 +1,214 @@
+---
+id: InvalidJoinConditionSourceMismatchError
+title: InvalidJoinConditionSourceMismatchError
+---
+
+# Class: InvalidJoinConditionSourceMismatchError
+
+Defined in: [packages/db/src/errors.ts:583](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L583)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidJoinConditionSourceMismatchError(): InvalidJoinConditionSourceMismatchError;
+```
+
+Defined in: [packages/db/src/errors.ts:584](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L584)
+
+#### Returns
+
+`InvalidJoinConditionSourceMismatchError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidKeyError.md b/mintlify/db/reference/classes/InvalidKeyError.md
new file mode 100644
index 000000000..909d829f9
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidKeyError.md
@@ -0,0 +1,224 @@
+---
+id: InvalidKeyError
+title: InvalidKeyError
+---
+
+# Class: InvalidKeyError
+
+Defined in: [packages/db/src/errors.ts:154](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L154)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidKeyError(key, item): InvalidKeyError;
+```
+
+Defined in: [packages/db/src/errors.ts:155](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L155)
+
+#### Parameters
+
+##### key
+
+`unknown`
+
+##### item
+
+`unknown`
+
+#### Returns
+
+`InvalidKeyError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidSchemaError.md b/mintlify/db/reference/classes/InvalidSchemaError.md
new file mode 100644
index 000000000..9d2372302
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidSchemaError.md
@@ -0,0 +1,214 @@
+---
+id: InvalidSchemaError
+title: InvalidSchemaError
+---
+
+# Class: InvalidSchemaError
+
+Defined in: [packages/db/src/errors.ts:90](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L90)
+
+## Extends
+
+- [`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidSchemaError(): InvalidSchemaError;
+```
+
+Defined in: [packages/db/src/errors.ts:91](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L91)
+
+#### Returns
+
+`InvalidSchemaError`
+
+#### Overrides
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`constructor`](/db/reference/classes/CollectionConfigurationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`cause`](/db/reference/classes/CollectionConfigurationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`message`](/db/reference/classes/CollectionConfigurationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`name`](/db/reference/classes/CollectionConfigurationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stack`](/db/reference/classes/CollectionConfigurationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stackTraceLimit`](/db/reference/classes/CollectionConfigurationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`captureStackTrace`](/db/reference/classes/CollectionConfigurationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`prepareStackTrace`](/db/reference/classes/CollectionConfigurationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidSourceError.md b/mintlify/db/reference/classes/InvalidSourceError.md
new file mode 100644
index 000000000..756400a88
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidSourceError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidSourceError
+title: InvalidSourceError
+---
+
+# Class: InvalidSourceError
+
+Defined in: [packages/db/src/errors.ts:380](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L380)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidSourceError(alias): InvalidSourceError;
+```
+
+Defined in: [packages/db/src/errors.ts:381](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L381)
+
+#### Parameters
+
+##### alias
+
+`string`
+
+#### Returns
+
+`InvalidSourceError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidSourceTypeError.md b/mintlify/db/reference/classes/InvalidSourceTypeError.md
new file mode 100644
index 000000000..a5abf35ee
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidSourceTypeError.md
@@ -0,0 +1,224 @@
+---
+id: InvalidSourceTypeError
+title: InvalidSourceTypeError
+---
+
+# Class: InvalidSourceTypeError
+
+Defined in: [packages/db/src/errors.ts:393](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L393)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidSourceTypeError(context, type): InvalidSourceTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:394](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L394)
+
+#### Parameters
+
+##### context
+
+[`SourceClauseContext`](/db/reference/type-aliases/SourceClauseContext)
+
+##### type
+
+`string`
+
+#### Returns
+
+`InvalidSourceTypeError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidStorageDataFormatError.md b/mintlify/db/reference/classes/InvalidStorageDataFormatError.md
new file mode 100644
index 000000000..3a8aad7c3
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidStorageDataFormatError.md
@@ -0,0 +1,224 @@
+---
+id: InvalidStorageDataFormatError
+title: InvalidStorageDataFormatError
+---
+
+# Class: InvalidStorageDataFormatError
+
+Defined in: [packages/db/src/errors.ts:683](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L683)
+
+## Extends
+
+- [`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidStorageDataFormatError(storageKey, key): InvalidStorageDataFormatError;
+```
+
+Defined in: [packages/db/src/errors.ts:684](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L684)
+
+#### Parameters
+
+##### storageKey
+
+`string`
+
+##### key
+
+`string`
+
+#### Returns
+
+`InvalidStorageDataFormatError`
+
+#### Overrides
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`constructor`](/db/reference/classes/LocalStorageCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`cause`](/db/reference/classes/LocalStorageCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`message`](/db/reference/classes/LocalStorageCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`name`](/db/reference/classes/LocalStorageCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stack`](/db/reference/classes/LocalStorageCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stackTraceLimit`](/db/reference/classes/LocalStorageCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`captureStackTrace`](/db/reference/classes/LocalStorageCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`prepareStackTrace`](/db/reference/classes/LocalStorageCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidStorageObjectFormatError.md b/mintlify/db/reference/classes/InvalidStorageObjectFormatError.md
new file mode 100644
index 000000000..818f68e22
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidStorageObjectFormatError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidStorageObjectFormatError
+title: InvalidStorageObjectFormatError
+---
+
+# Class: InvalidStorageObjectFormatError
+
+Defined in: [packages/db/src/errors.ts:691](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L691)
+
+## Extends
+
+- [`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidStorageObjectFormatError(storageKey): InvalidStorageObjectFormatError;
+```
+
+Defined in: [packages/db/src/errors.ts:692](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L692)
+
+#### Parameters
+
+##### storageKey
+
+`string`
+
+#### Returns
+
+`InvalidStorageObjectFormatError`
+
+#### Overrides
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`constructor`](/db/reference/classes/LocalStorageCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`cause`](/db/reference/classes/LocalStorageCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`message`](/db/reference/classes/LocalStorageCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`name`](/db/reference/classes/LocalStorageCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stack`](/db/reference/classes/LocalStorageCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stackTraceLimit`](/db/reference/classes/LocalStorageCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`captureStackTrace`](/db/reference/classes/LocalStorageCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`prepareStackTrace`](/db/reference/classes/LocalStorageCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/InvalidWhereExpressionError.md b/mintlify/db/reference/classes/InvalidWhereExpressionError.md
new file mode 100644
index 000000000..87ae0f8c7
--- /dev/null
+++ b/mintlify/db/reference/classes/InvalidWhereExpressionError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidWhereExpressionError
+title: InvalidWhereExpressionError
+---
+
+# Class: InvalidWhereExpressionError
+
+Defined in: [packages/db/src/errors.ts:424](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L424)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidWhereExpressionError(valueType): InvalidWhereExpressionError;
+```
+
+Defined in: [packages/db/src/errors.ts:425](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L425)
+
+#### Parameters
+
+##### valueType
+
+`string`
+
+#### Returns
+
+`InvalidWhereExpressionError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/JoinCollectionNotFoundError.md b/mintlify/db/reference/classes/JoinCollectionNotFoundError.md
new file mode 100644
index 000000000..4447c18ff
--- /dev/null
+++ b/mintlify/db/reference/classes/JoinCollectionNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: JoinCollectionNotFoundError
+title: JoinCollectionNotFoundError
+---
+
+# Class: JoinCollectionNotFoundError
+
+Defined in: [packages/db/src/errors.ts:555](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L555)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new JoinCollectionNotFoundError(collectionId): JoinCollectionNotFoundError;
+```
+
+Defined in: [packages/db/src/errors.ts:556](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L556)
+
+#### Parameters
+
+##### collectionId
+
+`string`
+
+#### Returns
+
+`JoinCollectionNotFoundError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/JoinConditionMustBeEqualityError.md b/mintlify/db/reference/classes/JoinConditionMustBeEqualityError.md
new file mode 100644
index 000000000..94849e6bc
--- /dev/null
+++ b/mintlify/db/reference/classes/JoinConditionMustBeEqualityError.md
@@ -0,0 +1,214 @@
+---
+id: JoinConditionMustBeEqualityError
+title: JoinConditionMustBeEqualityError
+---
+
+# Class: JoinConditionMustBeEqualityError
+
+Defined in: [packages/db/src/errors.ts:412](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L412)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new JoinConditionMustBeEqualityError(): JoinConditionMustBeEqualityError;
+```
+
+Defined in: [packages/db/src/errors.ts:413](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L413)
+
+#### Returns
+
+`JoinConditionMustBeEqualityError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/JoinError.md b/mintlify/db/reference/classes/JoinError.md
new file mode 100644
index 000000000..317f16f7b
--- /dev/null
+++ b/mintlify/db/reference/classes/JoinError.md
@@ -0,0 +1,230 @@
+---
+id: JoinError
+title: JoinError
+---
+
+# Class: JoinError
+
+Defined in: [packages/db/src/errors.ts:562](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L562)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`UnsupportedJoinTypeError`](/db/reference/classes/UnsupportedJoinTypeError)
+- [`InvalidJoinConditionSameSourceError`](/db/reference/classes/InvalidJoinConditionSameSourceError)
+- [`InvalidJoinConditionSourceMismatchError`](/db/reference/classes/InvalidJoinConditionSourceMismatchError)
+- [`InvalidJoinConditionLeftSourceError`](/db/reference/classes/InvalidJoinConditionLeftSourceError)
+- [`InvalidJoinConditionRightSourceError`](/db/reference/classes/InvalidJoinConditionRightSourceError)
+- [`InvalidJoinCondition`](/db/reference/classes/InvalidJoinCondition)
+- [`UnsupportedJoinSourceTypeError`](/db/reference/classes/UnsupportedJoinSourceTypeError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new JoinError(message): JoinError;
+```
+
+Defined in: [packages/db/src/errors.ts:563](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L563)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`JoinError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/KeyUpdateNotAllowedError.md b/mintlify/db/reference/classes/KeyUpdateNotAllowedError.md
new file mode 100644
index 000000000..4f9e6381f
--- /dev/null
+++ b/mintlify/db/reference/classes/KeyUpdateNotAllowedError.md
@@ -0,0 +1,224 @@
+---
+id: KeyUpdateNotAllowedError
+title: KeyUpdateNotAllowedError
+---
+
+# Class: KeyUpdateNotAllowedError
+
+Defined in: [packages/db/src/errors.ts:231](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L231)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new KeyUpdateNotAllowedError(originalKey, newKey): KeyUpdateNotAllowedError;
+```
+
+Defined in: [packages/db/src/errors.ts:232](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L232)
+
+#### Parameters
+
+##### originalKey
+
+`string` | `number`
+
+##### newKey
+
+`string` | `number`
+
+#### Returns
+
+`KeyUpdateNotAllowedError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/LimitOffsetRequireOrderByError.md b/mintlify/db/reference/classes/LimitOffsetRequireOrderByError.md
new file mode 100644
index 000000000..deed42fbf
--- /dev/null
+++ b/mintlify/db/reference/classes/LimitOffsetRequireOrderByError.md
@@ -0,0 +1,214 @@
+---
+id: LimitOffsetRequireOrderByError
+title: LimitOffsetRequireOrderByError
+---
+
+# Class: LimitOffsetRequireOrderByError
+
+Defined in: [packages/db/src/errors.ts:487](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L487)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new LimitOffsetRequireOrderByError(): LimitOffsetRequireOrderByError;
+```
+
+Defined in: [packages/db/src/errors.ts:488](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L488)
+
+#### Returns
+
+`LimitOffsetRequireOrderByError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/LocalStorageCollectionError.md b/mintlify/db/reference/classes/LocalStorageCollectionError.md
new file mode 100644
index 000000000..7c15b5669
--- /dev/null
+++ b/mintlify/db/reference/classes/LocalStorageCollectionError.md
@@ -0,0 +1,226 @@
+---
+id: LocalStorageCollectionError
+title: LocalStorageCollectionError
+---
+
+# Class: LocalStorageCollectionError
+
+Defined in: [packages/db/src/errors.ts:670](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L670)
+
+## Extends
+
+- [`StorageError`](/db/reference/classes/StorageError)
+
+## Extended by
+
+- [`StorageKeyRequiredError`](/db/reference/classes/StorageKeyRequiredError)
+- [`InvalidStorageDataFormatError`](/db/reference/classes/InvalidStorageDataFormatError)
+- [`InvalidStorageObjectFormatError`](/db/reference/classes/InvalidStorageObjectFormatError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new LocalStorageCollectionError(message): LocalStorageCollectionError;
+```
+
+Defined in: [packages/db/src/errors.ts:671](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L671)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`LocalStorageCollectionError`
+
+#### Overrides
+
+[`StorageError`](/db/reference/classes/StorageError).[`constructor`](/db/reference/classes/StorageError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`cause`](/db/reference/classes/StorageError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`message`](/db/reference/classes/StorageError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`name`](/db/reference/classes/StorageError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`stack`](/db/reference/classes/StorageError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`stackTraceLimit`](/db/reference/classes/StorageError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`captureStackTrace`](/db/reference/classes/StorageError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`prepareStackTrace`](/db/reference/classes/StorageError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingAliasInputsError.md b/mintlify/db/reference/classes/MissingAliasInputsError.md
new file mode 100644
index 000000000..ebdc09ca4
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingAliasInputsError.md
@@ -0,0 +1,223 @@
+---
+id: MissingAliasInputsError
+title: MissingAliasInputsError
+---
+
+# Class: MissingAliasInputsError
+
+Defined in: [packages/db/src/errors.ts:767](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L767)
+
+Internal error when the compiler returns aliases that don't have corresponding input streams.
+This should never happen since all aliases come from user declarations.
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingAliasInputsError(missingAliases): MissingAliasInputsError;
+```
+
+Defined in: [packages/db/src/errors.ts:768](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L768)
+
+#### Parameters
+
+##### missingAliases
+
+`string`[]
+
+#### Returns
+
+`MissingAliasInputsError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingDeleteHandlerError.md b/mintlify/db/reference/classes/MissingDeleteHandlerError.md
new file mode 100644
index 000000000..8b5c85cd6
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingDeleteHandlerError.md
@@ -0,0 +1,214 @@
+---
+id: MissingDeleteHandlerError
+title: MissingDeleteHandlerError
+---
+
+# Class: MissingDeleteHandlerError
+
+Defined in: [packages/db/src/errors.ts:277](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L277)
+
+## Extends
+
+- [`MissingHandlerError`](/db/reference/classes/MissingHandlerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingDeleteHandlerError(): MissingDeleteHandlerError;
+```
+
+Defined in: [packages/db/src/errors.ts:278](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L278)
+
+#### Returns
+
+`MissingDeleteHandlerError`
+
+#### Overrides
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`constructor`](/db/reference/classes/MissingHandlerError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`cause`](/db/reference/classes/MissingHandlerError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`message`](/db/reference/classes/MissingHandlerError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`name`](/db/reference/classes/MissingHandlerError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stack`](/db/reference/classes/MissingHandlerError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stackTraceLimit`](/db/reference/classes/MissingHandlerError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`captureStackTrace`](/db/reference/classes/MissingHandlerError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`prepareStackTrace`](/db/reference/classes/MissingHandlerError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingHandlerError.md b/mintlify/db/reference/classes/MissingHandlerError.md
new file mode 100644
index 000000000..a56e5b059
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingHandlerError.md
@@ -0,0 +1,226 @@
+---
+id: MissingHandlerError
+title: MissingHandlerError
+---
+
+# Class: MissingHandlerError
+
+Defined in: [packages/db/src/errors.ts:254](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L254)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`MissingInsertHandlerError`](/db/reference/classes/MissingInsertHandlerError)
+- [`MissingUpdateHandlerError`](/db/reference/classes/MissingUpdateHandlerError)
+- [`MissingDeleteHandlerError`](/db/reference/classes/MissingDeleteHandlerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingHandlerError(message): MissingHandlerError;
+```
+
+Defined in: [packages/db/src/errors.ts:255](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L255)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`MissingHandlerError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingInsertHandlerError.md b/mintlify/db/reference/classes/MissingInsertHandlerError.md
new file mode 100644
index 000000000..38ad261d5
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingInsertHandlerError.md
@@ -0,0 +1,214 @@
+---
+id: MissingInsertHandlerError
+title: MissingInsertHandlerError
+---
+
+# Class: MissingInsertHandlerError
+
+Defined in: [packages/db/src/errors.ts:261](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L261)
+
+## Extends
+
+- [`MissingHandlerError`](/db/reference/classes/MissingHandlerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingInsertHandlerError(): MissingInsertHandlerError;
+```
+
+Defined in: [packages/db/src/errors.ts:262](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L262)
+
+#### Returns
+
+`MissingInsertHandlerError`
+
+#### Overrides
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`constructor`](/db/reference/classes/MissingHandlerError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`cause`](/db/reference/classes/MissingHandlerError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`message`](/db/reference/classes/MissingHandlerError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`name`](/db/reference/classes/MissingHandlerError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stack`](/db/reference/classes/MissingHandlerError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stackTraceLimit`](/db/reference/classes/MissingHandlerError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`captureStackTrace`](/db/reference/classes/MissingHandlerError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`prepareStackTrace`](/db/reference/classes/MissingHandlerError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingMutationFunctionError.md b/mintlify/db/reference/classes/MissingMutationFunctionError.md
new file mode 100644
index 000000000..efbfdb83b
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingMutationFunctionError.md
@@ -0,0 +1,214 @@
+---
+id: MissingMutationFunctionError
+title: MissingMutationFunctionError
+---
+
+# Class: MissingMutationFunctionError
+
+Defined in: [packages/db/src/errors.ts:293](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L293)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingMutationFunctionError(): MissingMutationFunctionError;
+```
+
+Defined in: [packages/db/src/errors.ts:294](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L294)
+
+#### Returns
+
+`MissingMutationFunctionError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingUpdateArgumentError.md b/mintlify/db/reference/classes/MissingUpdateArgumentError.md
new file mode 100644
index 000000000..d5c84a608
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingUpdateArgumentError.md
@@ -0,0 +1,214 @@
+---
+id: MissingUpdateArgumentError
+title: MissingUpdateArgumentError
+---
+
+# Class: MissingUpdateArgumentError
+
+Defined in: [packages/db/src/errors.ts:211](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L211)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingUpdateArgumentError(): MissingUpdateArgumentError;
+```
+
+Defined in: [packages/db/src/errors.ts:212](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L212)
+
+#### Returns
+
+`MissingUpdateArgumentError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/MissingUpdateHandlerError.md b/mintlify/db/reference/classes/MissingUpdateHandlerError.md
new file mode 100644
index 000000000..dfb3cf612
--- /dev/null
+++ b/mintlify/db/reference/classes/MissingUpdateHandlerError.md
@@ -0,0 +1,214 @@
+---
+id: MissingUpdateHandlerError
+title: MissingUpdateHandlerError
+---
+
+# Class: MissingUpdateHandlerError
+
+Defined in: [packages/db/src/errors.ts:269](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L269)
+
+## Extends
+
+- [`MissingHandlerError`](/db/reference/classes/MissingHandlerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingUpdateHandlerError(): MissingUpdateHandlerError;
+```
+
+Defined in: [packages/db/src/errors.ts:270](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L270)
+
+#### Returns
+
+`MissingUpdateHandlerError`
+
+#### Overrides
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`constructor`](/db/reference/classes/MissingHandlerError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`cause`](/db/reference/classes/MissingHandlerError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`message`](/db/reference/classes/MissingHandlerError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`name`](/db/reference/classes/MissingHandlerError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stack`](/db/reference/classes/MissingHandlerError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`stackTraceLimit`](/db/reference/classes/MissingHandlerError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`captureStackTrace`](/db/reference/classes/MissingHandlerError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`MissingHandlerError`](/db/reference/classes/MissingHandlerError).[`prepareStackTrace`](/db/reference/classes/MissingHandlerError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NegativeActiveSubscribersError.md b/mintlify/db/reference/classes/NegativeActiveSubscribersError.md
new file mode 100644
index 000000000..7c9d39171
--- /dev/null
+++ b/mintlify/db/reference/classes/NegativeActiveSubscribersError.md
@@ -0,0 +1,214 @@
+---
+id: NegativeActiveSubscribersError
+title: NegativeActiveSubscribersError
+---
+
+# Class: NegativeActiveSubscribersError
+
+Defined in: [packages/db/src/errors.ts:132](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L132)
+
+## Extends
+
+- [`CollectionStateError`](/db/reference/classes/CollectionStateError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NegativeActiveSubscribersError(): NegativeActiveSubscribersError;
+```
+
+Defined in: [packages/db/src/errors.ts:133](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L133)
+
+#### Returns
+
+`NegativeActiveSubscribersError`
+
+#### Overrides
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`constructor`](/db/reference/classes/CollectionStateError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`cause`](/db/reference/classes/CollectionStateError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`message`](/db/reference/classes/CollectionStateError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`name`](/db/reference/classes/CollectionStateError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stack`](/db/reference/classes/CollectionStateError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`stackTraceLimit`](/db/reference/classes/CollectionStateError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`captureStackTrace`](/db/reference/classes/CollectionStateError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionStateError`](/db/reference/classes/CollectionStateError).[`prepareStackTrace`](/db/reference/classes/CollectionStateError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NoKeysPassedToDeleteError.md b/mintlify/db/reference/classes/NoKeysPassedToDeleteError.md
new file mode 100644
index 000000000..47c0853f0
--- /dev/null
+++ b/mintlify/db/reference/classes/NoKeysPassedToDeleteError.md
@@ -0,0 +1,214 @@
+---
+id: NoKeysPassedToDeleteError
+title: NoKeysPassedToDeleteError
+---
+
+# Class: NoKeysPassedToDeleteError
+
+Defined in: [packages/db/src/errors.ts:239](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L239)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NoKeysPassedToDeleteError(): NoKeysPassedToDeleteError;
+```
+
+Defined in: [packages/db/src/errors.ts:240](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L240)
+
+#### Returns
+
+`NoKeysPassedToDeleteError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NoKeysPassedToUpdateError.md b/mintlify/db/reference/classes/NoKeysPassedToUpdateError.md
new file mode 100644
index 000000000..709b05dac
--- /dev/null
+++ b/mintlify/db/reference/classes/NoKeysPassedToUpdateError.md
@@ -0,0 +1,214 @@
+---
+id: NoKeysPassedToUpdateError
+title: NoKeysPassedToUpdateError
+---
+
+# Class: NoKeysPassedToUpdateError
+
+Defined in: [packages/db/src/errors.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L217)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NoKeysPassedToUpdateError(): NoKeysPassedToUpdateError;
+```
+
+Defined in: [packages/db/src/errors.ts:218](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L218)
+
+#### Returns
+
+`NoKeysPassedToUpdateError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NoPendingSyncTransactionCommitError.md b/mintlify/db/reference/classes/NoPendingSyncTransactionCommitError.md
new file mode 100644
index 000000000..99b38717b
--- /dev/null
+++ b/mintlify/db/reference/classes/NoPendingSyncTransactionCommitError.md
@@ -0,0 +1,214 @@
+---
+id: NoPendingSyncTransactionCommitError
+title: NoPendingSyncTransactionCommitError
+---
+
+# Class: NoPendingSyncTransactionCommitError
+
+Defined in: [packages/db/src/errors.ts:346](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L346)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NoPendingSyncTransactionCommitError(): NoPendingSyncTransactionCommitError;
+```
+
+Defined in: [packages/db/src/errors.ts:347](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L347)
+
+#### Returns
+
+`NoPendingSyncTransactionCommitError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NoPendingSyncTransactionWriteError.md b/mintlify/db/reference/classes/NoPendingSyncTransactionWriteError.md
new file mode 100644
index 000000000..db0d29338
--- /dev/null
+++ b/mintlify/db/reference/classes/NoPendingSyncTransactionWriteError.md
@@ -0,0 +1,214 @@
+---
+id: NoPendingSyncTransactionWriteError
+title: NoPendingSyncTransactionWriteError
+---
+
+# Class: NoPendingSyncTransactionWriteError
+
+Defined in: [packages/db/src/errors.ts:332](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L332)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NoPendingSyncTransactionWriteError(): NoPendingSyncTransactionWriteError;
+```
+
+Defined in: [packages/db/src/errors.ts:333](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L333)
+
+#### Returns
+
+`NoPendingSyncTransactionWriteError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NonAggregateExpressionNotInGroupByError.md b/mintlify/db/reference/classes/NonAggregateExpressionNotInGroupByError.md
new file mode 100644
index 000000000..e4cc9564c
--- /dev/null
+++ b/mintlify/db/reference/classes/NonAggregateExpressionNotInGroupByError.md
@@ -0,0 +1,220 @@
+---
+id: NonAggregateExpressionNotInGroupByError
+title: NonAggregateExpressionNotInGroupByError
+---
+
+# Class: NonAggregateExpressionNotInGroupByError
+
+Defined in: [packages/db/src/errors.ts:625](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L625)
+
+## Extends
+
+- [`GroupByError`](/db/reference/classes/GroupByError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NonAggregateExpressionNotInGroupByError(alias): NonAggregateExpressionNotInGroupByError;
+```
+
+Defined in: [packages/db/src/errors.ts:626](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L626)
+
+#### Parameters
+
+##### alias
+
+`string`
+
+#### Returns
+
+`NonAggregateExpressionNotInGroupByError`
+
+#### Overrides
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`constructor`](/db/reference/classes/GroupByError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`cause`](/db/reference/classes/GroupByError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`message`](/db/reference/classes/GroupByError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`name`](/db/reference/classes/GroupByError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stack`](/db/reference/classes/GroupByError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stackTraceLimit`](/db/reference/classes/GroupByError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`captureStackTrace`](/db/reference/classes/GroupByError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`prepareStackTrace`](/db/reference/classes/GroupByError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/NonRetriableError.md b/mintlify/db/reference/classes/NonRetriableError.md
new file mode 100644
index 000000000..7bd0417f7
--- /dev/null
+++ b/mintlify/db/reference/classes/NonRetriableError.md
@@ -0,0 +1,220 @@
+---
+id: NonRetriableError
+title: NonRetriableError
+---
+
+# Class: NonRetriableError
+
+Defined in: [packages/db/src/errors.ts:10](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L10)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new NonRetriableError(message): NonRetriableError;
+```
+
+Defined in: [packages/db/src/errors.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L11)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`NonRetriableError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/OnMutateMustBeSynchronousError.md b/mintlify/db/reference/classes/OnMutateMustBeSynchronousError.md
new file mode 100644
index 000000000..6e01394a5
--- /dev/null
+++ b/mintlify/db/reference/classes/OnMutateMustBeSynchronousError.md
@@ -0,0 +1,214 @@
+---
+id: OnMutateMustBeSynchronousError
+title: OnMutateMustBeSynchronousError
+---
+
+# Class: OnMutateMustBeSynchronousError
+
+Defined in: [packages/db/src/errors.ts:299](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L299)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new OnMutateMustBeSynchronousError(): OnMutateMustBeSynchronousError;
+```
+
+Defined in: [packages/db/src/errors.ts:300](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L300)
+
+#### Returns
+
+`OnMutateMustBeSynchronousError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/OnlyOneSourceAllowedError.md b/mintlify/db/reference/classes/OnlyOneSourceAllowedError.md
new file mode 100644
index 000000000..7ccd212ed
--- /dev/null
+++ b/mintlify/db/reference/classes/OnlyOneSourceAllowedError.md
@@ -0,0 +1,220 @@
+---
+id: OnlyOneSourceAllowedError
+title: OnlyOneSourceAllowedError
+---
+
+# Class: OnlyOneSourceAllowedError
+
+Defined in: [packages/db/src/errors.ts:368](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L368)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new OnlyOneSourceAllowedError(context): OnlyOneSourceAllowedError;
+```
+
+Defined in: [packages/db/src/errors.ts:369](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L369)
+
+#### Parameters
+
+##### context
+
+`string`
+
+#### Returns
+
+`OnlyOneSourceAllowedError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/QueryBuilderError.md b/mintlify/db/reference/classes/QueryBuilderError.md
new file mode 100644
index 000000000..ad6f8ca6a
--- /dev/null
+++ b/mintlify/db/reference/classes/QueryBuilderError.md
@@ -0,0 +1,230 @@
+---
+id: QueryBuilderError
+title: QueryBuilderError
+---
+
+# Class: QueryBuilderError
+
+Defined in: [packages/db/src/errors.ts:361](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L361)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`OnlyOneSourceAllowedError`](/db/reference/classes/OnlyOneSourceAllowedError)
+- [`SubQueryMustHaveFromClauseError`](/db/reference/classes/SubQueryMustHaveFromClauseError)
+- [`InvalidSourceError`](/db/reference/classes/InvalidSourceError)
+- [`InvalidSourceTypeError`](/db/reference/classes/InvalidSourceTypeError)
+- [`JoinConditionMustBeEqualityError`](/db/reference/classes/JoinConditionMustBeEqualityError)
+- [`QueryMustHaveFromClauseError`](/db/reference/classes/QueryMustHaveFromClauseError)
+- [`InvalidWhereExpressionError`](/db/reference/classes/InvalidWhereExpressionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryBuilderError(message): QueryBuilderError;
+```
+
+Defined in: [packages/db/src/errors.ts:362](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L362)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`QueryBuilderError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/QueryCompilationError.md b/mintlify/db/reference/classes/QueryCompilationError.md
new file mode 100644
index 000000000..725e6daf6
--- /dev/null
+++ b/mintlify/db/reference/classes/QueryCompilationError.md
@@ -0,0 +1,240 @@
+---
+id: QueryCompilationError
+title: QueryCompilationError
+---
+
+# Class: QueryCompilationError
+
+Defined in: [packages/db/src/errors.ts:438](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L438)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`UnsafeAliasPathError`](/db/reference/classes/UnsafeAliasPathError)
+- [`DistinctRequiresSelectError`](/db/reference/classes/DistinctRequiresSelectError)
+- [`FnSelectWithGroupByError`](/db/reference/classes/FnSelectWithGroupByError)
+- [`UnsupportedRootScalarSelectError`](/db/reference/classes/UnsupportedRootScalarSelectError)
+- [`HavingRequiresGroupByError`](/db/reference/classes/HavingRequiresGroupByError)
+- [`LimitOffsetRequireOrderByError`](/db/reference/classes/LimitOffsetRequireOrderByError)
+- [`CollectionInputNotFoundError`](/db/reference/classes/CollectionInputNotFoundError)
+- [`DuplicateAliasInSubqueryError`](/db/reference/classes/DuplicateAliasInSubqueryError)
+- [`UnsupportedFromTypeError`](/db/reference/classes/UnsupportedFromTypeError)
+- [`UnknownExpressionTypeError`](/db/reference/classes/UnknownExpressionTypeError)
+- [`EmptyReferencePathError`](/db/reference/classes/EmptyReferencePathError)
+- [`UnknownFunctionError`](/db/reference/classes/UnknownFunctionError)
+- [`JoinCollectionNotFoundError`](/db/reference/classes/JoinCollectionNotFoundError)
+- [`SubscriptionNotFoundError`](/db/reference/classes/SubscriptionNotFoundError)
+- [`AggregateNotSupportedError`](/db/reference/classes/AggregateNotSupportedError)
+- [`MissingAliasInputsError`](/db/reference/classes/MissingAliasInputsError)
+- [`SetWindowRequiresOrderByError`](/db/reference/classes/SetWindowRequiresOrderByError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryCompilationError(message): QueryCompilationError;
+```
+
+Defined in: [packages/db/src/errors.ts:439](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L439)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`QueryCompilationError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/QueryMustHaveFromClauseError.md b/mintlify/db/reference/classes/QueryMustHaveFromClauseError.md
new file mode 100644
index 000000000..ce8f4e2cd
--- /dev/null
+++ b/mintlify/db/reference/classes/QueryMustHaveFromClauseError.md
@@ -0,0 +1,214 @@
+---
+id: QueryMustHaveFromClauseError
+title: QueryMustHaveFromClauseError
+---
+
+# Class: QueryMustHaveFromClauseError
+
+Defined in: [packages/db/src/errors.ts:418](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L418)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryMustHaveFromClauseError(): QueryMustHaveFromClauseError;
+```
+
+Defined in: [packages/db/src/errors.ts:419](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L419)
+
+#### Returns
+
+`QueryMustHaveFromClauseError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/QueryOptimizerError.md b/mintlify/db/reference/classes/QueryOptimizerError.md
new file mode 100644
index 000000000..867703262
--- /dev/null
+++ b/mintlify/db/reference/classes/QueryOptimizerError.md
@@ -0,0 +1,225 @@
+---
+id: QueryOptimizerError
+title: QueryOptimizerError
+---
+
+# Class: QueryOptimizerError
+
+Defined in: [packages/db/src/errors.ts:711](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L711)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`CannotCombineEmptyExpressionListError`](/db/reference/classes/CannotCombineEmptyExpressionListError)
+- [`WhereClauseConversionError`](/db/reference/classes/WhereClauseConversionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryOptimizerError(message): QueryOptimizerError;
+```
+
+Defined in: [packages/db/src/errors.ts:712](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L712)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`QueryOptimizerError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/ReverseIndex.md b/mintlify/db/reference/classes/ReverseIndex.md
new file mode 100644
index 000000000..5bc0b71b1
--- /dev/null
+++ b/mintlify/db/reference/classes/ReverseIndex.md
@@ -0,0 +1,661 @@
+---
+id: ReverseIndex
+title: ReverseIndex
+---
+
+# Class: ReverseIndex\&lt;TKey\>
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:6](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L6)
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+## Implements
+
+- [`IndexInterface`](/db/reference/interfaces/IndexInterface)\&lt;`TKey`\>
+
+## Constructors
+
+### Constructor
+
+```ts
+new ReverseIndex<TKey>(index): ReverseIndex<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L11)
+
+#### Parameters
+
+##### index
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface)\&lt;`TKey`\>
+
+#### Returns
+
+`ReverseIndex`\&lt;`TKey`\>
+
+## Accessors
+
+### indexedKeysSet
+
+#### Get Signature
+
+```ts
+get indexedKeysSet(): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:128](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L128)
+
+##### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`indexedKeysSet`](/db/reference/interfaces/IndexInterface#indexedkeysset)
+
+***
+
+### keyCount
+
+#### Get Signature
+
+```ts
+get keyCount(): number;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:116](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L116)
+
+##### Returns
+
+`number`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`keyCount`](/db/reference/interfaces/IndexInterface#keycount)
+
+***
+
+### orderedEntriesArray
+
+#### Get Signature
+
+```ts
+get orderedEntriesArray(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:62](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L62)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`orderedEntriesArray`](/db/reference/interfaces/IndexInterface#orderedentriesarray)
+
+***
+
+### orderedEntriesArrayReversed
+
+#### Get Signature
+
+```ts
+get orderedEntriesArrayReversed(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L66)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`orderedEntriesArrayReversed`](/db/reference/interfaces/IndexInterface#orderedentriesarrayreversed)
+
+***
+
+### supportsRangeOptimization
+
+#### Get Signature
+
+```ts
+get supportsRangeOptimization(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:76](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L76)
+
+Whether range lookups (gt/gte/lt/lte) on this index can be trusted to
+return every matching key. Range traversal relies on the index ordering, so
+it is unsafe when the index uses a custom comparator, whose order may not
+match the WHERE evaluator's relational operators. Callers must fall back to
+a full scan when this is `false`.
+
+##### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`supportsRangeOptimization`](/db/reference/interfaces/IndexInterface#supportsrangeoptimization)
+
+***
+
+### valueMapData
+
+#### Get Signature
+
+```ts
+get valueMapData(): Map<any, Set<TKey>>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:132](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L132)
+
+##### Returns
+
+`Map`\&lt;`any`, `Set`\&lt;`TKey`\>\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`valueMapData`](/db/reference/interfaces/IndexInterface#valuemapdata)
+
+## Methods
+
+### add()
+
+```ts
+add(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L96)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`add`](/db/reference/interfaces/IndexInterface#add)
+
+***
+
+### build()
+
+```ts
+build(entries): void;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:108](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L108)
+
+#### Parameters
+
+##### entries
+
+`Iterable`\&lt;\[`TKey`, `any`\]\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`build`](/db/reference/interfaces/IndexInterface#build)
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:112](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L112)
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`clear`](/db/reference/interfaces/IndexInterface#clear)
+
+***
+
+### equalityLookup()
+
+```ts
+equalityLookup(value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:120](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L120)
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`equalityLookup`](/db/reference/interfaces/IndexInterface#equalitylookup)
+
+***
+
+### getStats()
+
+```ts
+getStats(): IndexStats;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:92](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L92)
+
+#### Returns
+
+[`IndexStats`](/db/reference/interfaces/IndexStats)
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`getStats`](/db/reference/interfaces/IndexInterface#getstats)
+
+***
+
+### inArrayLookup()
+
+```ts
+inArrayLookup(values): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:124](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L124)
+
+#### Parameters
+
+##### values
+
+`any`[]
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`inArrayLookup`](/db/reference/interfaces/IndexInterface#inarraylookup)
+
+***
+
+### lookup()
+
+```ts
+lookup(operation, value): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:17](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L17)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`lookup`](/db/reference/interfaces/IndexInterface#lookup)
+
+***
+
+### matchesCompareOptions()
+
+```ts
+matchesCompareOptions(compareOptions): boolean;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L84)
+
+#### Parameters
+
+##### compareOptions
+
+`CompareOptions`
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesCompareOptions`](/db/reference/interfaces/IndexInterface#matchescompareoptions)
+
+***
+
+### matchesDirection()
+
+```ts
+matchesDirection(direction): boolean;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:88](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L88)
+
+#### Parameters
+
+##### direction
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesDirection`](/db/reference/interfaces/IndexInterface#matchesdirection)
+
+***
+
+### matchesField()
+
+```ts
+matchesField(fieldPath): boolean;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L80)
+
+#### Parameters
+
+##### fieldPath
+
+`string`[]
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`matchesField`](/db/reference/interfaces/IndexInterface#matchesfield)
+
+***
+
+### rangeQuery()
+
+```ts
+rangeQuery(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:31](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L31)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`rangeQuery`](/db/reference/interfaces/IndexInterface#rangequery)
+
+***
+
+### rangeQueryReversed()
+
+```ts
+rangeQueryReversed(options): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:35](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L35)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions) = `{}`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`rangeQueryReversed`](/db/reference/interfaces/IndexInterface#rangequeryreversed)
+
+***
+
+### remove()
+
+```ts
+remove(key, item): void;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:100](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L100)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`remove`](/db/reference/interfaces/IndexInterface#remove)
+
+***
+
+### supports()
+
+```ts
+supports(operation): boolean;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:72](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L72)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+#### Returns
+
+`boolean`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`supports`](/db/reference/interfaces/IndexInterface#supports)
+
+***
+
+### take()
+
+```ts
+take(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:39](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L39)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`any`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`take`](/db/reference/interfaces/IndexInterface#take)
+
+***
+
+### takeFromStart()
+
+```ts
+takeFromStart(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:43](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L43)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeFromStart`](/db/reference/interfaces/IndexInterface#takefromstart)
+
+***
+
+### takeReversed()
+
+```ts
+takeReversed(
+   n, 
+   from, 
+   filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:47](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L47)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`any`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeReversed`](/db/reference/interfaces/IndexInterface#takereversed)
+
+***
+
+### takeReversedFromEnd()
+
+```ts
+takeReversedFromEnd(n, filterFn?): TKey[];
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:55](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L55)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`takeReversedFromEnd`](/db/reference/interfaces/IndexInterface#takereversedfromend)
+
+***
+
+### update()
+
+```ts
+update(
+   key, 
+   oldItem, 
+   newItem): void;
+```
+
+Defined in: [packages/db/src/indexes/reverse-index.ts:104](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/reverse-index.ts#L104)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### oldItem
+
+`any`
+
+##### newItem
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+[`IndexInterface`](/db/reference/interfaces/IndexInterface).[`update`](/db/reference/interfaces/IndexInterface#update)
diff --git a/mintlify/db/reference/classes/SchemaMustBeSynchronousError.md b/mintlify/db/reference/classes/SchemaMustBeSynchronousError.md
new file mode 100644
index 000000000..05c1edf2d
--- /dev/null
+++ b/mintlify/db/reference/classes/SchemaMustBeSynchronousError.md
@@ -0,0 +1,214 @@
+---
+id: SchemaMustBeSynchronousError
+title: SchemaMustBeSynchronousError
+---
+
+# Class: SchemaMustBeSynchronousError
+
+Defined in: [packages/db/src/errors.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L96)
+
+## Extends
+
+- [`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SchemaMustBeSynchronousError(): SchemaMustBeSynchronousError;
+```
+
+Defined in: [packages/db/src/errors.ts:97](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L97)
+
+#### Returns
+
+`SchemaMustBeSynchronousError`
+
+#### Overrides
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`constructor`](/db/reference/classes/CollectionConfigurationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`cause`](/db/reference/classes/CollectionConfigurationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`message`](/db/reference/classes/CollectionConfigurationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`name`](/db/reference/classes/CollectionConfigurationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stack`](/db/reference/classes/CollectionConfigurationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`stackTraceLimit`](/db/reference/classes/CollectionConfigurationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`captureStackTrace`](/db/reference/classes/CollectionConfigurationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError).[`prepareStackTrace`](/db/reference/classes/CollectionConfigurationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SchemaValidationError.md b/mintlify/db/reference/classes/SchemaValidationError.md
new file mode 100644
index 000000000..d5d375b2c
--- /dev/null
+++ b/mintlify/db/reference/classes/SchemaValidationError.md
@@ -0,0 +1,251 @@
+---
+id: SchemaValidationError
+title: SchemaValidationError
+---
+
+# Class: SchemaValidationError
+
+Defined in: [packages/db/src/errors.ts:18](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L18)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SchemaValidationError(
+   type, 
+   issues, 
+   message?): SchemaValidationError;
+```
+
+Defined in: [packages/db/src/errors.ts:25](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L25)
+
+#### Parameters
+
+##### type
+
+`"insert"` | `"update"`
+
+##### issues
+
+readonly `object`[]
+
+##### message?
+
+`string`
+
+#### Returns
+
+`SchemaValidationError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### issues
+
+```ts
+issues: readonly object[];
+```
+
+Defined in: [packages/db/src/errors.ts:20](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L20)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### type
+
+```ts
+type: "insert" | "update";
+```
+
+Defined in: [packages/db/src/errors.ts:19](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L19)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SerializationError.md b/mintlify/db/reference/classes/SerializationError.md
new file mode 100644
index 000000000..4bf039542
--- /dev/null
+++ b/mintlify/db/reference/classes/SerializationError.md
@@ -0,0 +1,224 @@
+---
+id: SerializationError
+title: SerializationError
+---
+
+# Class: SerializationError
+
+Defined in: [packages/db/src/errors.ts:661](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L661)
+
+## Extends
+
+- [`StorageError`](/db/reference/classes/StorageError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SerializationError(operation, originalError): SerializationError;
+```
+
+Defined in: [packages/db/src/errors.ts:662](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L662)
+
+#### Parameters
+
+##### operation
+
+`string`
+
+##### originalError
+
+`string`
+
+#### Returns
+
+`SerializationError`
+
+#### Overrides
+
+[`StorageError`](/db/reference/classes/StorageError).[`constructor`](/db/reference/classes/StorageError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`cause`](/db/reference/classes/StorageError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`message`](/db/reference/classes/StorageError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`name`](/db/reference/classes/StorageError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`stack`](/db/reference/classes/StorageError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`stackTraceLimit`](/db/reference/classes/StorageError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`captureStackTrace`](/db/reference/classes/StorageError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`StorageError`](/db/reference/classes/StorageError).[`prepareStackTrace`](/db/reference/classes/StorageError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SetWindowRequiresOrderByError.md b/mintlify/db/reference/classes/SetWindowRequiresOrderByError.md
new file mode 100644
index 000000000..23666b083
--- /dev/null
+++ b/mintlify/db/reference/classes/SetWindowRequiresOrderByError.md
@@ -0,0 +1,216 @@
+---
+id: SetWindowRequiresOrderByError
+title: SetWindowRequiresOrderByError
+---
+
+# Class: SetWindowRequiresOrderByError
+
+Defined in: [packages/db/src/errors.ts:779](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L779)
+
+Error thrown when setWindow is called on a collection without an ORDER BY clause.
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SetWindowRequiresOrderByError(): SetWindowRequiresOrderByError;
+```
+
+Defined in: [packages/db/src/errors.ts:780](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L780)
+
+#### Returns
+
+`SetWindowRequiresOrderByError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SortedMap.md b/mintlify/db/reference/classes/SortedMap.md
new file mode 100644
index 000000000..626995947
--- /dev/null
+++ b/mintlify/db/reference/classes/SortedMap.md
@@ -0,0 +1,289 @@
+---
+id: SortedMap
+title: SortedMap
+---
+
+# Class: SortedMap\&lt;TKey, TValue\>
+
+Defined in: [packages/db/src/SortedMap.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L8)
+
+A Map implementation that keeps its entries sorted based on a comparator function
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of keys in the map (must be string | number)
+
+### TValue
+
+`TValue`
+
+The type of values in the map
+
+## Constructors
+
+### Constructor
+
+```ts
+new SortedMap<TKey, TValue>(comparator?): SortedMap<TKey, TValue>;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:19](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L19)
+
+Creates a new SortedMap instance
+
+#### Parameters
+
+##### comparator?
+
+(`a`, `b`) => `number`
+
+Optional function to compare values for sorting.
+                    If not provided, entries are sorted by key only.
+
+#### Returns
+
+`SortedMap`\&lt;`TKey`, `TValue`\>
+
+## Accessors
+
+### size
+
+#### Get Signature
+
+```ts
+get size(): number;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L157)
+
+Gets the number of key-value pairs in the map
+
+##### Returns
+
+`number`
+
+## Methods
+
+### \[iterator\]()
+
+```ts
+iterator: IterableIterator<[TKey, TValue]>;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:166](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L166)
+
+Default iterator that returns entries in sorted order
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, `TValue`\]\>
+
+An iterator for the map's entries
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:149](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L149)
+
+Removes all key-value pairs from the map
+
+#### Returns
+
+`void`
+
+***
+
+### delete()
+
+```ts
+delete(key): boolean;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:125](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L125)
+
+Removes a key-value pair from the map
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+The key to remove
+
+#### Returns
+
+`boolean`
+
+True if the key was found and removed, false otherwise
+
+***
+
+### entries()
+
+```ts
+entries(): IterableIterator<[TKey, TValue]>;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L177)
+
+Returns an iterator for the map's entries in sorted order
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, `TValue`\]\>
+
+An iterator for the map's entries
+
+***
+
+### forEach()
+
+```ts
+forEach(callbackfn): void;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:208](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L208)
+
+Executes a callback function for each key-value pair in the map in sorted order
+
+#### Parameters
+
+##### callbackfn
+
+(`value`, `key`, `map`) => `void`
+
+Function to execute for each entry
+
+#### Returns
+
+`void`
+
+***
+
+### get()
+
+```ts
+get(key): TValue | undefined;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:115](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L115)
+
+Gets a value by its key
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+The key to look up
+
+#### Returns
+
+`TValue` \| `undefined`
+
+The value associated with the key, or undefined if not found
+
+***
+
+### has()
+
+```ts
+has(key): boolean;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:142](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L142)
+
+Checks if a key exists in the map
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+The key to check
+
+#### Returns
+
+`boolean`
+
+True if the key exists, false otherwise
+
+***
+
+### keys()
+
+```ts
+keys(): IterableIterator<TKey>;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:186](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L186)
+
+Returns an iterator for the map's keys in sorted order
+
+#### Returns
+
+`IterableIterator`\&lt;`TKey`\>
+
+An iterator for the map's keys
+
+***
+
+### set()
+
+```ts
+set(key, value): this;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:92](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L92)
+
+Sets a key-value pair in the map and maintains sort order
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+The key to set
+
+##### value
+
+`TValue`
+
+The value to associate with the key
+
+#### Returns
+
+`this`
+
+This SortedMap instance for chaining
+
+***
+
+### values()
+
+```ts
+values(): IterableIterator<TValue>;
+```
+
+Defined in: [packages/db/src/SortedMap.ts:195](https://github.com/TanStack/db/blob/main/packages/db/src/SortedMap.ts#L195)
+
+Returns an iterator for the map's values in sorted order
+
+#### Returns
+
+`IterableIterator`\&lt;`TValue`\>
+
+An iterator for the map's values
diff --git a/mintlify/db/reference/classes/StorageError.md b/mintlify/db/reference/classes/StorageError.md
new file mode 100644
index 000000000..df562ed75
--- /dev/null
+++ b/mintlify/db/reference/classes/StorageError.md
@@ -0,0 +1,225 @@
+---
+id: StorageError
+title: StorageError
+---
+
+# Class: StorageError
+
+Defined in: [packages/db/src/errors.ts:654](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L654)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`SerializationError`](/db/reference/classes/SerializationError)
+- [`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new StorageError(message): StorageError;
+```
+
+Defined in: [packages/db/src/errors.ts:655](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L655)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`StorageError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/StorageKeyRequiredError.md b/mintlify/db/reference/classes/StorageKeyRequiredError.md
new file mode 100644
index 000000000..9fc35ba96
--- /dev/null
+++ b/mintlify/db/reference/classes/StorageKeyRequiredError.md
@@ -0,0 +1,214 @@
+---
+id: StorageKeyRequiredError
+title: StorageKeyRequiredError
+---
+
+# Class: StorageKeyRequiredError
+
+Defined in: [packages/db/src/errors.ts:677](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L677)
+
+## Extends
+
+- [`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new StorageKeyRequiredError(): StorageKeyRequiredError;
+```
+
+Defined in: [packages/db/src/errors.ts:678](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L678)
+
+#### Returns
+
+`StorageKeyRequiredError`
+
+#### Overrides
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`constructor`](/db/reference/classes/LocalStorageCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`cause`](/db/reference/classes/LocalStorageCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`message`](/db/reference/classes/LocalStorageCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`name`](/db/reference/classes/LocalStorageCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stack`](/db/reference/classes/LocalStorageCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`stackTraceLimit`](/db/reference/classes/LocalStorageCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`captureStackTrace`](/db/reference/classes/LocalStorageCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`LocalStorageCollectionError`](/db/reference/classes/LocalStorageCollectionError).[`prepareStackTrace`](/db/reference/classes/LocalStorageCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SubQueryMustHaveFromClauseError.md b/mintlify/db/reference/classes/SubQueryMustHaveFromClauseError.md
new file mode 100644
index 000000000..f4567e213
--- /dev/null
+++ b/mintlify/db/reference/classes/SubQueryMustHaveFromClauseError.md
@@ -0,0 +1,220 @@
+---
+id: SubQueryMustHaveFromClauseError
+title: SubQueryMustHaveFromClauseError
+---
+
+# Class: SubQueryMustHaveFromClauseError
+
+Defined in: [packages/db/src/errors.ts:374](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L374)
+
+## Extends
+
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SubQueryMustHaveFromClauseError(context): SubQueryMustHaveFromClauseError;
+```
+
+Defined in: [packages/db/src/errors.ts:375](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L375)
+
+#### Parameters
+
+##### context
+
+`string`
+
+#### Returns
+
+`SubQueryMustHaveFromClauseError`
+
+#### Overrides
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`constructor`](/db/reference/classes/QueryBuilderError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`cause`](/db/reference/classes/QueryBuilderError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`message`](/db/reference/classes/QueryBuilderError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`name`](/db/reference/classes/QueryBuilderError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stack`](/db/reference/classes/QueryBuilderError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`stackTraceLimit`](/db/reference/classes/QueryBuilderError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`captureStackTrace`](/db/reference/classes/QueryBuilderError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryBuilderError`](/db/reference/classes/QueryBuilderError).[`prepareStackTrace`](/db/reference/classes/QueryBuilderError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SubscriptionNotFoundError.md b/mintlify/db/reference/classes/SubscriptionNotFoundError.md
new file mode 100644
index 000000000..3c7f1a4c8
--- /dev/null
+++ b/mintlify/db/reference/classes/SubscriptionNotFoundError.md
@@ -0,0 +1,239 @@
+---
+id: SubscriptionNotFoundError
+title: SubscriptionNotFoundError
+---
+
+# Class: SubscriptionNotFoundError
+
+Defined in: [packages/db/src/errors.ts:739](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L739)
+
+Error when a subscription cannot be found during lazy join processing.
+For subqueries, aliases may be remapped (e.g., 'activeUser' → 'user').
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SubscriptionNotFoundError(
+   resolvedAlias, 
+   originalAlias, 
+   collectionId, 
+   availableAliases): SubscriptionNotFoundError;
+```
+
+Defined in: [packages/db/src/errors.ts:740](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L740)
+
+#### Parameters
+
+##### resolvedAlias
+
+`string`
+
+##### originalAlias
+
+`string`
+
+##### collectionId
+
+`string`
+
+##### availableAliases
+
+`string`[]
+
+#### Returns
+
+`SubscriptionNotFoundError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SyncCleanupError.md b/mintlify/db/reference/classes/SyncCleanupError.md
new file mode 100644
index 000000000..b8d02b861
--- /dev/null
+++ b/mintlify/db/reference/classes/SyncCleanupError.md
@@ -0,0 +1,224 @@
+---
+id: SyncCleanupError
+title: SyncCleanupError
+---
+
+# Class: SyncCleanupError
+
+Defined in: [packages/db/src/errors.ts:700](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L700)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SyncCleanupError(collectionId, error): SyncCleanupError;
+```
+
+Defined in: [packages/db/src/errors.ts:701](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L701)
+
+#### Parameters
+
+##### collectionId
+
+`string`
+
+##### error
+
+`string` | `Error`
+
+#### Returns
+
+`SyncCleanupError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedError.md b/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedError.md
new file mode 100644
index 000000000..a64f850c8
--- /dev/null
+++ b/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedError.md
@@ -0,0 +1,214 @@
+---
+id: SyncTransactionAlreadyCommittedError
+title: SyncTransactionAlreadyCommittedError
+---
+
+# Class: SyncTransactionAlreadyCommittedError
+
+Defined in: [packages/db/src/errors.ts:352](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L352)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SyncTransactionAlreadyCommittedError(): SyncTransactionAlreadyCommittedError;
+```
+
+Defined in: [packages/db/src/errors.ts:353](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L353)
+
+#### Returns
+
+`SyncTransactionAlreadyCommittedError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedWriteError.md b/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedWriteError.md
new file mode 100644
index 000000000..585d3ce84
--- /dev/null
+++ b/mintlify/db/reference/classes/SyncTransactionAlreadyCommittedWriteError.md
@@ -0,0 +1,214 @@
+---
+id: SyncTransactionAlreadyCommittedWriteError
+title: SyncTransactionAlreadyCommittedWriteError
+---
+
+# Class: SyncTransactionAlreadyCommittedWriteError
+
+Defined in: [packages/db/src/errors.ts:338](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L338)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SyncTransactionAlreadyCommittedWriteError(): SyncTransactionAlreadyCommittedWriteError;
+```
+
+Defined in: [packages/db/src/errors.ts:339](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L339)
+
+#### Returns
+
+`SyncTransactionAlreadyCommittedWriteError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/TanStackDBError.md b/mintlify/db/reference/classes/TanStackDBError.md
new file mode 100644
index 000000000..a452145e3
--- /dev/null
+++ b/mintlify/db/reference/classes/TanStackDBError.md
@@ -0,0 +1,254 @@
+---
+id: TanStackDBError
+title: TanStackDBError
+---
+
+# Class: TanStackDBError
+
+Defined in: [packages/db/src/errors.ts:2](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L2)
+
+## Extends
+
+- `Error`
+
+## Extended by
+
+- [`NonRetriableError`](/db/reference/classes/NonRetriableError)
+- [`SchemaValidationError`](/db/reference/classes/SchemaValidationError)
+- [`DuplicateDbInstanceError`](/db/reference/classes/DuplicateDbInstanceError)
+- [`CollectionConfigurationError`](/db/reference/classes/CollectionConfigurationError)
+- [`CollectionStateError`](/db/reference/classes/CollectionStateError)
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+- [`MissingHandlerError`](/db/reference/classes/MissingHandlerError)
+- [`TransactionError`](/db/reference/classes/TransactionError)
+- [`QueryBuilderError`](/db/reference/classes/QueryBuilderError)
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+- [`JoinError`](/db/reference/classes/JoinError)
+- [`GroupByError`](/db/reference/classes/GroupByError)
+- [`StorageError`](/db/reference/classes/StorageError)
+- [`SyncCleanupError`](/db/reference/classes/SyncCleanupError)
+- [`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackDBError(message): TanStackDBError;
+```
+
+Defined in: [packages/db/src/errors.ts:3](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L3)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`TanStackDBError`
+
+#### Overrides
+
+```ts
+Error.constructor
+```
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+```ts
+Error.cause
+```
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+```ts
+Error.message
+```
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+```ts
+Error.name
+```
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+```ts
+Error.stack
+```
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+```ts
+Error.stackTraceLimit
+```
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+Error.captureStackTrace
+```
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+```ts
+Error.prepareStackTrace
+```
diff --git a/mintlify/db/reference/classes/TransactionAlreadyCompletedRollbackError.md b/mintlify/db/reference/classes/TransactionAlreadyCompletedRollbackError.md
new file mode 100644
index 000000000..83ef7697c
--- /dev/null
+++ b/mintlify/db/reference/classes/TransactionAlreadyCompletedRollbackError.md
@@ -0,0 +1,214 @@
+---
+id: TransactionAlreadyCompletedRollbackError
+title: TransactionAlreadyCompletedRollbackError
+---
+
+# Class: TransactionAlreadyCompletedRollbackError
+
+Defined in: [packages/db/src/errors.ts:316](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L316)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TransactionAlreadyCompletedRollbackError(): TransactionAlreadyCompletedRollbackError;
+```
+
+Defined in: [packages/db/src/errors.ts:317](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L317)
+
+#### Returns
+
+`TransactionAlreadyCompletedRollbackError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/TransactionError.md b/mintlify/db/reference/classes/TransactionError.md
new file mode 100644
index 000000000..3ce8997df
--- /dev/null
+++ b/mintlify/db/reference/classes/TransactionError.md
@@ -0,0 +1,232 @@
+---
+id: TransactionError
+title: TransactionError
+---
+
+# Class: TransactionError
+
+Defined in: [packages/db/src/errors.ts:286](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L286)
+
+## Extends
+
+- [`TanStackDBError`](/db/reference/classes/TanStackDBError)
+
+## Extended by
+
+- [`MissingMutationFunctionError`](/db/reference/classes/MissingMutationFunctionError)
+- [`OnMutateMustBeSynchronousError`](/db/reference/classes/OnMutateMustBeSynchronousError)
+- [`TransactionNotPendingMutateError`](/db/reference/classes/TransactionNotPendingMutateError)
+- [`TransactionAlreadyCompletedRollbackError`](/db/reference/classes/TransactionAlreadyCompletedRollbackError)
+- [`TransactionNotPendingCommitError`](/db/reference/classes/TransactionNotPendingCommitError)
+- [`NoPendingSyncTransactionWriteError`](/db/reference/classes/NoPendingSyncTransactionWriteError)
+- [`SyncTransactionAlreadyCommittedWriteError`](/db/reference/classes/SyncTransactionAlreadyCommittedWriteError)
+- [`NoPendingSyncTransactionCommitError`](/db/reference/classes/NoPendingSyncTransactionCommitError)
+- [`SyncTransactionAlreadyCommittedError`](/db/reference/classes/SyncTransactionAlreadyCommittedError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TransactionError(message): TransactionError;
+```
+
+Defined in: [packages/db/src/errors.ts:287](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L287)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`TransactionError`
+
+#### Overrides
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`constructor`](/db/reference/classes/TanStackDBError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`cause`](/db/reference/classes/TanStackDBError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`message`](/db/reference/classes/TanStackDBError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`name`](/db/reference/classes/TanStackDBError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stack`](/db/reference/classes/TanStackDBError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`stackTraceLimit`](/db/reference/classes/TanStackDBError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`captureStackTrace`](/db/reference/classes/TanStackDBError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TanStackDBError`](/db/reference/classes/TanStackDBError).[`prepareStackTrace`](/db/reference/classes/TanStackDBError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/TransactionNotPendingCommitError.md b/mintlify/db/reference/classes/TransactionNotPendingCommitError.md
new file mode 100644
index 000000000..c53c74253
--- /dev/null
+++ b/mintlify/db/reference/classes/TransactionNotPendingCommitError.md
@@ -0,0 +1,214 @@
+---
+id: TransactionNotPendingCommitError
+title: TransactionNotPendingCommitError
+---
+
+# Class: TransactionNotPendingCommitError
+
+Defined in: [packages/db/src/errors.ts:324](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L324)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TransactionNotPendingCommitError(): TransactionNotPendingCommitError;
+```
+
+Defined in: [packages/db/src/errors.ts:325](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L325)
+
+#### Returns
+
+`TransactionNotPendingCommitError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/TransactionNotPendingMutateError.md b/mintlify/db/reference/classes/TransactionNotPendingMutateError.md
new file mode 100644
index 000000000..91d13db37
--- /dev/null
+++ b/mintlify/db/reference/classes/TransactionNotPendingMutateError.md
@@ -0,0 +1,214 @@
+---
+id: TransactionNotPendingMutateError
+title: TransactionNotPendingMutateError
+---
+
+# Class: TransactionNotPendingMutateError
+
+Defined in: [packages/db/src/errors.ts:308](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L308)
+
+## Extends
+
+- [`TransactionError`](/db/reference/classes/TransactionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TransactionNotPendingMutateError(): TransactionNotPendingMutateError;
+```
+
+Defined in: [packages/db/src/errors.ts:309](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L309)
+
+#### Returns
+
+`TransactionNotPendingMutateError`
+
+#### Overrides
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`constructor`](/db/reference/classes/TransactionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`cause`](/db/reference/classes/TransactionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`message`](/db/reference/classes/TransactionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`name`](/db/reference/classes/TransactionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stack`](/db/reference/classes/TransactionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`stackTraceLimit`](/db/reference/classes/TransactionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`captureStackTrace`](/db/reference/classes/TransactionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TransactionError`](/db/reference/classes/TransactionError).[`prepareStackTrace`](/db/reference/classes/TransactionError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UndefinedKeyError.md b/mintlify/db/reference/classes/UndefinedKeyError.md
new file mode 100644
index 000000000..39043e427
--- /dev/null
+++ b/mintlify/db/reference/classes/UndefinedKeyError.md
@@ -0,0 +1,220 @@
+---
+id: UndefinedKeyError
+title: UndefinedKeyError
+---
+
+# Class: UndefinedKeyError
+
+Defined in: [packages/db/src/errors.ts:146](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L146)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UndefinedKeyError(item): UndefinedKeyError;
+```
+
+Defined in: [packages/db/src/errors.ts:147](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L147)
+
+#### Parameters
+
+##### item
+
+`any`
+
+#### Returns
+
+`UndefinedKeyError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnknownExpressionTypeError.md b/mintlify/db/reference/classes/UnknownExpressionTypeError.md
new file mode 100644
index 000000000..a9165e48e
--- /dev/null
+++ b/mintlify/db/reference/classes/UnknownExpressionTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnknownExpressionTypeError
+title: UnknownExpressionTypeError
+---
+
+# Class: UnknownExpressionTypeError
+
+Defined in: [packages/db/src/errors.ts:537](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L537)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnknownExpressionTypeError(type): UnknownExpressionTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:538](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L538)
+
+#### Parameters
+
+##### type
+
+`string`
+
+#### Returns
+
+`UnknownExpressionTypeError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnknownFunctionError.md b/mintlify/db/reference/classes/UnknownFunctionError.md
new file mode 100644
index 000000000..449f26107
--- /dev/null
+++ b/mintlify/db/reference/classes/UnknownFunctionError.md
@@ -0,0 +1,220 @@
+---
+id: UnknownFunctionError
+title: UnknownFunctionError
+---
+
+# Class: UnknownFunctionError
+
+Defined in: [packages/db/src/errors.ts:549](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L549)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnknownFunctionError(functionName): UnknownFunctionError;
+```
+
+Defined in: [packages/db/src/errors.ts:550](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L550)
+
+#### Parameters
+
+##### functionName
+
+`string`
+
+#### Returns
+
+`UnknownFunctionError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnknownHavingExpressionTypeError.md b/mintlify/db/reference/classes/UnknownHavingExpressionTypeError.md
new file mode 100644
index 000000000..3a1cca631
--- /dev/null
+++ b/mintlify/db/reference/classes/UnknownHavingExpressionTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnknownHavingExpressionTypeError
+title: UnknownHavingExpressionTypeError
+---
+
+# Class: UnknownHavingExpressionTypeError
+
+Defined in: [packages/db/src/errors.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L647)
+
+## Extends
+
+- [`GroupByError`](/db/reference/classes/GroupByError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnknownHavingExpressionTypeError(type): UnknownHavingExpressionTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:648](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L648)
+
+#### Parameters
+
+##### type
+
+`string`
+
+#### Returns
+
+`UnknownHavingExpressionTypeError`
+
+#### Overrides
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`constructor`](/db/reference/classes/GroupByError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`cause`](/db/reference/classes/GroupByError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`message`](/db/reference/classes/GroupByError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`name`](/db/reference/classes/GroupByError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stack`](/db/reference/classes/GroupByError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stackTraceLimit`](/db/reference/classes/GroupByError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`captureStackTrace`](/db/reference/classes/GroupByError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`prepareStackTrace`](/db/reference/classes/GroupByError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsafeAliasPathError.md b/mintlify/db/reference/classes/UnsafeAliasPathError.md
new file mode 100644
index 000000000..2b0ff2a2f
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsafeAliasPathError.md
@@ -0,0 +1,220 @@
+---
+id: UnsafeAliasPathError
+title: UnsafeAliasPathError
+---
+
+# Class: UnsafeAliasPathError
+
+Defined in: [packages/db/src/errors.ts:445](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L445)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsafeAliasPathError(segment): UnsafeAliasPathError;
+```
+
+Defined in: [packages/db/src/errors.ts:446](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L446)
+
+#### Parameters
+
+##### segment
+
+`string`
+
+#### Returns
+
+`UnsafeAliasPathError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsupportedAggregateFunctionError.md b/mintlify/db/reference/classes/UnsupportedAggregateFunctionError.md
new file mode 100644
index 000000000..40b69b31c
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsupportedAggregateFunctionError.md
@@ -0,0 +1,220 @@
+---
+id: UnsupportedAggregateFunctionError
+title: UnsupportedAggregateFunctionError
+---
+
+# Class: UnsupportedAggregateFunctionError
+
+Defined in: [packages/db/src/errors.ts:633](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L633)
+
+## Extends
+
+- [`GroupByError`](/db/reference/classes/GroupByError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsupportedAggregateFunctionError(functionName): UnsupportedAggregateFunctionError;
+```
+
+Defined in: [packages/db/src/errors.ts:634](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L634)
+
+#### Parameters
+
+##### functionName
+
+`string`
+
+#### Returns
+
+`UnsupportedAggregateFunctionError`
+
+#### Overrides
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`constructor`](/db/reference/classes/GroupByError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`cause`](/db/reference/classes/GroupByError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`message`](/db/reference/classes/GroupByError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`name`](/db/reference/classes/GroupByError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stack`](/db/reference/classes/GroupByError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`stackTraceLimit`](/db/reference/classes/GroupByError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`captureStackTrace`](/db/reference/classes/GroupByError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`GroupByError`](/db/reference/classes/GroupByError).[`prepareStackTrace`](/db/reference/classes/GroupByError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsupportedFromTypeError.md b/mintlify/db/reference/classes/UnsupportedFromTypeError.md
new file mode 100644
index 000000000..004e4b618
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsupportedFromTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnsupportedFromTypeError
+title: UnsupportedFromTypeError
+---
+
+# Class: UnsupportedFromTypeError
+
+Defined in: [packages/db/src/errors.ts:531](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L531)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsupportedFromTypeError(type): UnsupportedFromTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:532](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L532)
+
+#### Parameters
+
+##### type
+
+`string`
+
+#### Returns
+
+`UnsupportedFromTypeError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsupportedJoinSourceTypeError.md b/mintlify/db/reference/classes/UnsupportedJoinSourceTypeError.md
new file mode 100644
index 000000000..71d01e9c4
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsupportedJoinSourceTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnsupportedJoinSourceTypeError
+title: UnsupportedJoinSourceTypeError
+---
+
+# Class: UnsupportedJoinSourceTypeError
+
+Defined in: [packages/db/src/errors.ts:611](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L611)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsupportedJoinSourceTypeError(type): UnsupportedJoinSourceTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:612](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L612)
+
+#### Parameters
+
+##### type
+
+`string`
+
+#### Returns
+
+`UnsupportedJoinSourceTypeError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsupportedJoinTypeError.md b/mintlify/db/reference/classes/UnsupportedJoinTypeError.md
new file mode 100644
index 000000000..147fab9cc
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsupportedJoinTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnsupportedJoinTypeError
+title: UnsupportedJoinTypeError
+---
+
+# Class: UnsupportedJoinTypeError
+
+Defined in: [packages/db/src/errors.ts:569](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L569)
+
+## Extends
+
+- [`JoinError`](/db/reference/classes/JoinError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsupportedJoinTypeError(joinType): UnsupportedJoinTypeError;
+```
+
+Defined in: [packages/db/src/errors.ts:570](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L570)
+
+#### Parameters
+
+##### joinType
+
+`string`
+
+#### Returns
+
+`UnsupportedJoinTypeError`
+
+#### Overrides
+
+[`JoinError`](/db/reference/classes/JoinError).[`constructor`](/db/reference/classes/JoinError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`cause`](/db/reference/classes/JoinError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`message`](/db/reference/classes/JoinError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`name`](/db/reference/classes/JoinError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stack`](/db/reference/classes/JoinError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`stackTraceLimit`](/db/reference/classes/JoinError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`captureStackTrace`](/db/reference/classes/JoinError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`JoinError`](/db/reference/classes/JoinError).[`prepareStackTrace`](/db/reference/classes/JoinError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UnsupportedRootScalarSelectError.md b/mintlify/db/reference/classes/UnsupportedRootScalarSelectError.md
new file mode 100644
index 000000000..5e519429b
--- /dev/null
+++ b/mintlify/db/reference/classes/UnsupportedRootScalarSelectError.md
@@ -0,0 +1,214 @@
+---
+id: UnsupportedRootScalarSelectError
+title: UnsupportedRootScalarSelectError
+---
+
+# Class: UnsupportedRootScalarSelectError
+
+Defined in: [packages/db/src/errors.ts:472](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L472)
+
+## Extends
+
+- [`QueryCompilationError`](/db/reference/classes/QueryCompilationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnsupportedRootScalarSelectError(): UnsupportedRootScalarSelectError;
+```
+
+Defined in: [packages/db/src/errors.ts:473](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L473)
+
+#### Returns
+
+`UnsupportedRootScalarSelectError`
+
+#### Overrides
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`constructor`](/db/reference/classes/QueryCompilationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`cause`](/db/reference/classes/QueryCompilationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`message`](/db/reference/classes/QueryCompilationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`name`](/db/reference/classes/QueryCompilationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stack`](/db/reference/classes/QueryCompilationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`stackTraceLimit`](/db/reference/classes/QueryCompilationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`captureStackTrace`](/db/reference/classes/QueryCompilationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCompilationError`](/db/reference/classes/QueryCompilationError).[`prepareStackTrace`](/db/reference/classes/QueryCompilationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/UpdateKeyNotFoundError.md b/mintlify/db/reference/classes/UpdateKeyNotFoundError.md
new file mode 100644
index 000000000..651aff6e7
--- /dev/null
+++ b/mintlify/db/reference/classes/UpdateKeyNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: UpdateKeyNotFoundError
+title: UpdateKeyNotFoundError
+---
+
+# Class: UpdateKeyNotFoundError
+
+Defined in: [packages/db/src/errors.ts:223](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L223)
+
+## Extends
+
+- [`CollectionOperationError`](/db/reference/classes/CollectionOperationError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UpdateKeyNotFoundError(key): UpdateKeyNotFoundError;
+```
+
+Defined in: [packages/db/src/errors.ts:224](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L224)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`UpdateKeyNotFoundError`
+
+#### Overrides
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`constructor`](/db/reference/classes/CollectionOperationError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`cause`](/db/reference/classes/CollectionOperationError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`message`](/db/reference/classes/CollectionOperationError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`name`](/db/reference/classes/CollectionOperationError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stack`](/db/reference/classes/CollectionOperationError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`stackTraceLimit`](/db/reference/classes/CollectionOperationError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`captureStackTrace`](/db/reference/classes/CollectionOperationError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`CollectionOperationError`](/db/reference/classes/CollectionOperationError).[`prepareStackTrace`](/db/reference/classes/CollectionOperationError#preparestacktrace)
diff --git a/mintlify/db/reference/classes/WhereClauseConversionError.md b/mintlify/db/reference/classes/WhereClauseConversionError.md
new file mode 100644
index 000000000..0e842afed
--- /dev/null
+++ b/mintlify/db/reference/classes/WhereClauseConversionError.md
@@ -0,0 +1,226 @@
+---
+id: WhereClauseConversionError
+title: WhereClauseConversionError
+---
+
+# Class: WhereClauseConversionError
+
+Defined in: [packages/db/src/errors.ts:727](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L727)
+
+Internal error when the query optimizer fails to convert a WHERE clause to a collection filter.
+
+## Extends
+
+- [`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new WhereClauseConversionError(collectionId, alias): WhereClauseConversionError;
+```
+
+Defined in: [packages/db/src/errors.ts:728](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L728)
+
+#### Parameters
+
+##### collectionId
+
+`string`
+
+##### alias
+
+`string`
+
+#### Returns
+
+`WhereClauseConversionError`
+
+#### Overrides
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`constructor`](/db/reference/classes/QueryOptimizerError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`cause`](/db/reference/classes/QueryOptimizerError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`message`](/db/reference/classes/QueryOptimizerError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`name`](/db/reference/classes/QueryOptimizerError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`stack`](/db/reference/classes/QueryOptimizerError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`stackTraceLimit`](/db/reference/classes/QueryOptimizerError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`captureStackTrace`](/db/reference/classes/QueryOptimizerError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryOptimizerError`](/db/reference/classes/QueryOptimizerError).[`prepareStackTrace`](/db/reference/classes/QueryOptimizerError#preparestacktrace)
diff --git a/mintlify/db/reference/electric-db-collection/classes/ElectricDBCollectionError.md b/mintlify/db/reference/electric-db-collection/classes/ElectricDBCollectionError.md
new file mode 100644
index 000000000..1c21dffc4
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/classes/ElectricDBCollectionError.md
@@ -0,0 +1,247 @@
+---
+id: ElectricDBCollectionError
+title: ElectricDBCollectionError
+---
+
+# Class: ElectricDBCollectionError
+
+Defined in: [packages/electric-db-collection/src/errors.ts:4](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L4)
+
+## Extends
+
+- `TanStackDBError`
+
+## Extended by
+
+- [`ExpectedNumberInAwaitTxIdError`](/db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError)
+- [`TimeoutWaitingForTxIdError`](/db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError)
+- [`TimeoutWaitingForMatchError`](/db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError)
+- [`StreamAbortedError`](/db/reference/electric-db-collection/classes/StreamAbortedError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ElectricDBCollectionError(message, collectionId?): ElectricDBCollectionError;
+```
+
+Defined in: [packages/electric-db-collection/src/errors.ts:5](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L5)
+
+#### Parameters
+
+##### message
+
+`string`
+
+##### collectionId?
+
+`string`
+
+#### Returns
+
+`ElectricDBCollectionError`
+
+#### Overrides
+
+```ts
+TanStackDBError.constructor
+```
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+```ts
+TanStackDBError.cause
+```
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+```ts
+TanStackDBError.message
+```
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+```ts
+TanStackDBError.name
+```
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+```ts
+TanStackDBError.stack
+```
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+```ts
+TanStackDBError.stackTraceLimit
+```
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+TanStackDBError.captureStackTrace
+```
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+```ts
+TanStackDBError.prepareStackTrace
+```
diff --git a/mintlify/db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError.md b/mintlify/db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError.md
new file mode 100644
index 000000000..76c207e9f
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError.md
@@ -0,0 +1,224 @@
+---
+id: ExpectedNumberInAwaitTxIdError
+title: ExpectedNumberInAwaitTxIdError
+---
+
+# Class: ExpectedNumberInAwaitTxIdError
+
+Defined in: [packages/electric-db-collection/src/errors.ts:11](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L11)
+
+## Extends
+
+- [`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ExpectedNumberInAwaitTxIdError(txIdType, collectionId?): ExpectedNumberInAwaitTxIdError;
+```
+
+Defined in: [packages/electric-db-collection/src/errors.ts:12](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L12)
+
+#### Parameters
+
+##### txIdType
+
+`string`
+
+##### collectionId?
+
+`string`
+
+#### Returns
+
+`ExpectedNumberInAwaitTxIdError`
+
+#### Overrides
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`constructor`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`cause`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`message`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`name`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stack`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stackTraceLimit`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`captureStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`prepareStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/electric-db-collection/classes/StreamAbortedError.md b/mintlify/db/reference/electric-db-collection/classes/StreamAbortedError.md
new file mode 100644
index 000000000..67980608c
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/classes/StreamAbortedError.md
@@ -0,0 +1,220 @@
+---
+id: StreamAbortedError
+title: StreamAbortedError
+---
+
+# Class: StreamAbortedError
+
+Defined in: [packages/electric-db-collection/src/errors.ts:32](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L32)
+
+## Extends
+
+- [`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new StreamAbortedError(collectionId?): StreamAbortedError;
+```
+
+Defined in: [packages/electric-db-collection/src/errors.ts:33](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L33)
+
+#### Parameters
+
+##### collectionId?
+
+`string`
+
+#### Returns
+
+`StreamAbortedError`
+
+#### Overrides
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`constructor`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`cause`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`message`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`name`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stack`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stackTraceLimit`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`captureStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`prepareStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError.md b/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError.md
new file mode 100644
index 000000000..e8e8f8e36
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError.md
@@ -0,0 +1,220 @@
+---
+id: TimeoutWaitingForMatchError
+title: TimeoutWaitingForMatchError
+---
+
+# Class: TimeoutWaitingForMatchError
+
+Defined in: [packages/electric-db-collection/src/errors.ts:25](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L25)
+
+## Extends
+
+- [`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TimeoutWaitingForMatchError(collectionId?): TimeoutWaitingForMatchError;
+```
+
+Defined in: [packages/electric-db-collection/src/errors.ts:26](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L26)
+
+#### Parameters
+
+##### collectionId?
+
+`string`
+
+#### Returns
+
+`TimeoutWaitingForMatchError`
+
+#### Overrides
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`constructor`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`cause`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`message`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`name`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stack`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stackTraceLimit`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`captureStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`prepareStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError.md b/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError.md
new file mode 100644
index 000000000..743db9fa7
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError.md
@@ -0,0 +1,224 @@
+---
+id: TimeoutWaitingForTxIdError
+title: TimeoutWaitingForTxIdError
+---
+
+# Class: TimeoutWaitingForTxIdError
+
+Defined in: [packages/electric-db-collection/src/errors.ts:18](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L18)
+
+## Extends
+
+- [`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TimeoutWaitingForTxIdError(txId, collectionId?): TimeoutWaitingForTxIdError;
+```
+
+Defined in: [packages/electric-db-collection/src/errors.ts:19](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/errors.ts#L19)
+
+#### Parameters
+
+##### txId
+
+`number`
+
+##### collectionId?
+
+`string`
+
+#### Returns
+
+`TimeoutWaitingForTxIdError`
+
+#### Overrides
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`constructor`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`cause`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`message`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`name`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stack`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`stackTraceLimit`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`captureStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`ElectricDBCollectionError`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError).[`prepareStackTrace`](/db/reference/electric-db-collection/classes/ElectricDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/electric-db-collection/functions/electricCollectionOptions.md b/mintlify/db/reference/electric-db-collection/functions/electricCollectionOptions.md
new file mode 100644
index 000000000..32e2a0586
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/functions/electricCollectionOptions.md
@@ -0,0 +1,70 @@
+---
+id: electricCollectionOptions
+title: electricCollectionOptions
+---
+
+# Function: electricCollectionOptions()
+
+## Call Signature
+
+```ts
+function electricCollectionOptions<T>(config): Omit<CollectionConfig<InferSchemaOutput<T>, string | number, T, UtilsRecord>, "utils" | "onInsert" | "onUpdate" | "onDelete"> & Pick<ElectricCollectionConfig<InferSchemaOutput<T>, T>, "onInsert" | "onUpdate" | "onDelete"> & object;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:576](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L576)
+
+Creates Electric collection options for use with a standard Collection
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The explicit type of items in the collection (highest priority)
+
+### Parameters
+
+#### config
+
+[`ElectricCollectionConfig`](/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig)\&lt;`InferSchemaOutput`\&lt;`T`\>, `T`\> & `object`
+
+Configuration options for the Electric collection
+
+### Returns
+
+`Omit`\&lt;`CollectionConfig`\&lt;`InferSchemaOutput`\&lt;`T`\>, `string` \| `number`, `T`, `UtilsRecord`\>, `"utils"` \| `"onInsert"` \| `"onUpdate"` \| `"onDelete"`\> & `Pick`\&lt;[`ElectricCollectionConfig`](/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig)\&lt;`InferSchemaOutput`\&lt;`T`\>, `T`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"`\> & `object`
+
+Collection options with utilities
+
+## Call Signature
+
+```ts
+function electricCollectionOptions<T>(config): Omit<CollectionConfig<T, string | number, never, UtilsRecord>, "utils" | "onInsert" | "onUpdate" | "onDelete"> & Pick<ElectricCollectionConfig<T, never>, "onInsert" | "onUpdate" | "onDelete"> & object;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:594](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L594)
+
+Creates Electric collection options for use with a standard Collection
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `Row`\&lt;`unknown`\>
+
+The explicit type of items in the collection (highest priority)
+
+### Parameters
+
+#### config
+
+[`ElectricCollectionConfig`](/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig)\&lt;`T`, `never`\> & `object`
+
+Configuration options for the Electric collection
+
+### Returns
+
+`Omit`\&lt;`CollectionConfig`\&lt;`T`, `string` \| `number`, `never`, `UtilsRecord`\>, `"utils"` \| `"onInsert"` \| `"onUpdate"` \| `"onDelete"`\> & `Pick`\&lt;[`ElectricCollectionConfig`](/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig)\&lt;`T`, `never`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"`\> & `object`
+
+Collection options with utilities
diff --git a/mintlify/db/reference/electric-db-collection/functions/isChangeMessage.md b/mintlify/db/reference/electric-db-collection/functions/isChangeMessage.md
new file mode 100644
index 000000000..224fbcb61
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/functions/isChangeMessage.md
@@ -0,0 +1,46 @@
+---
+id: isChangeMessage
+title: isChangeMessage
+---
+
+# Function: isChangeMessage()
+
+```ts
+function isChangeMessage<T>(message): message is ChangeMessage<T>;
+```
+
+Defined in: node\_modules/.pnpm/@electric-sql+client@1.5.15/node\_modules/@electric-sql/client/dist/index.d.ts:922
+
+Type guard for checking Message is ChangeMessage.
+
+See [TS docs](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards)
+for information on how to use type guards.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Row`\&lt;`unknown`\> = `Row`\&lt;`never`\>
+
+## Parameters
+
+### message
+
+`Message`\&lt;`T`\>
+
+the message to check
+
+## Returns
+
+`message is ChangeMessage<T>`
+
+true if the message is a ChangeMessage
+
+## Example
+
+```ts
+if (isChangeMessage(message)) {
+  const msgChng: ChangeMessage = message // Ok
+  const msgCtrl: ControlMessage = message // Err, type mismatch
+}
+```
diff --git a/mintlify/db/reference/electric-db-collection/functions/isControlMessage.md b/mintlify/db/reference/electric-db-collection/functions/isControlMessage.md
new file mode 100644
index 000000000..5f13e6c80
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/functions/isControlMessage.md
@@ -0,0 +1,48 @@
+---
+id: isControlMessage
+title: isControlMessage
+---
+
+# Function: isControlMessage()
+
+```ts
+function isControlMessage<T>(message): message is ControlMessage;
+```
+
+Defined in: node\_modules/.pnpm/@electric-sql+client@1.5.15/node\_modules/@electric-sql/client/dist/index.d.ts:940
+
+Type guard for checking Message is ControlMessage.
+
+See [TS docs](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards)
+for information on how to use type guards.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Row`\&lt;`unknown`\> = `Row`\&lt;`never`\>
+
+## Parameters
+
+### message
+
+`Message`\&lt;`T`\>
+
+the message to check
+
+## Returns
+
+`message is ControlMessage`
+
+true if the message is a ControlMessage
+
+ *
+
+## Example
+
+```ts
+if (isControlMessage(message)) {
+  const msgChng: ChangeMessage = message // Err, type mismatch
+  const msgCtrl: ControlMessage = message // Ok
+}
+```
diff --git a/mintlify/db/reference/electric-db-collection/index.md b/mintlify/db/reference/electric-db-collection/index.md
new file mode 100644
index 000000000..a9259854f
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/index.md
@@ -0,0 +1,30 @@
+---
+id: "@tanstack/electric-db-collection"
+title: "@tanstack/electric-db-collection"
+---
+
+# @tanstack/electric-db-collection
+
+## Classes
+
+- [ElectricDBCollectionError](/db/reference/electric-db-collection/classes/ElectricDBCollectionError)
+- [ExpectedNumberInAwaitTxIdError](/db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError)
+- [StreamAbortedError](/db/reference/electric-db-collection/classes/StreamAbortedError)
+- [TimeoutWaitingForMatchError](/db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError)
+- [TimeoutWaitingForTxIdError](/db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError)
+
+## Interfaces
+
+- [ElectricCollectionConfig](/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig)
+- [ElectricCollectionUtils](/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils)
+
+## Type Aliases
+
+- [AwaitTxIdFn](/db/reference/electric-db-collection/type-aliases/AwaitTxIdFn)
+- [Txid](/db/reference/electric-db-collection/type-aliases/Txid)
+
+## Functions
+
+- [electricCollectionOptions](/db/reference/electric-db-collection/functions/electricCollectionOptions)
+- [isChangeMessage](/db/reference/electric-db-collection/functions/isChangeMessage)
+- [isControlMessage](/db/reference/electric-db-collection/functions/isControlMessage)
diff --git a/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig.md b/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig.md
new file mode 100644
index 000000000..1f6901e70
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionConfig.md
@@ -0,0 +1,242 @@
+---
+id: ElectricCollectionConfig
+title: ElectricCollectionConfig
+---
+
+# Interface: ElectricCollectionConfig\&lt;T, TSchema\>
+
+Defined in: [packages/electric-db-collection/src/electric.ts:148](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L148)
+
+Configuration interface for Electric collection options
+
+## Extends
+
+- `Omit`\&lt;`BaseCollectionConfig`\&lt;`T`, `string` \| `number`, `TSchema`, [`ElectricCollectionUtils`](/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils)\&lt;`T`\>, `any`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"` \| `"syncMode"`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Row`\&lt;`unknown`\> = `Row`\&lt;`unknown`\>
+
+The type of items in the collection
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+The schema type for validation
+
+## Properties
+
+### \[ELECTRIC\_TEST\_HOOKS\]?
+
+```ts
+optional [ELECTRIC_TEST_HOOKS]: ElectricTestHooks;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:171](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L171)
+
+Internal test hooks (for testing only)
+Hidden via Symbol to prevent accidental usage in production
+
+***
+
+### onDelete()?
+
+```ts
+optional onDelete: (params) => Promise<MatchingStrategy>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:288](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L288)
+
+Optional asynchronous handler function called before a delete operation
+
+#### Parameters
+
+##### params
+
+`DeleteMutationFnParams`\&lt;`T`, `string` \| `number`, [`ElectricCollectionUtils`](/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils)\&lt;`T`\>\>
+
+Object containing transaction and collection information
+
+#### Returns
+
+`Promise`\&lt;`MatchingStrategy`\>
+
+Promise resolving to &#123; txid, timeout? &#125; or void
+
+#### Examples
+
+```ts
+// Basic Electric delete handler with txid (recommended)
+onDelete: async ({ transaction }) => {
+  const mutation = transaction.mutations[0]
+  const result = await api.todos.delete({
+    id: mutation.original.id
+  })
+  return { txid: result.txid }
+}
+```
+
+```ts
+// Use awaitMatch utility for custom matching
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  await api.todos.delete({ id: mutation.original.id })
+  await collection.utils.awaitMatch(
+    (message) => isChangeMessage(message) &&
+                 message.headers.operation === 'delete' &&
+                 message.value.id === mutation.original.id
+  )
+}
+```
+
+***
+
+### onInsert()?
+
+```ts
+optional onInsert: (params) => Promise<MatchingStrategy>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:219](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L219)
+
+Optional asynchronous handler function called before an insert operation
+
+#### Parameters
+
+##### params
+
+`InsertMutationFnParams`\&lt;`T`, `string` \| `number`, [`ElectricCollectionUtils`](/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils)\&lt;`T`\>\>
+
+Object containing transaction and collection information
+
+#### Returns
+
+`Promise`\&lt;`MatchingStrategy`\>
+
+Promise resolving to &#123; txid, timeout? &#125; or void
+
+#### Examples
+
+```ts
+// Basic Electric insert handler with txid (recommended)
+onInsert: async ({ transaction }) => {
+  const newItem = transaction.mutations[0].modified
+  const result = await api.todos.create({
+    data: newItem
+  })
+  return { txid: result.txid }
+}
+```
+
+```ts
+// Insert handler with custom timeout
+onInsert: async ({ transaction }) => {
+  const newItem = transaction.mutations[0].modified
+  const result = await api.todos.create({
+    data: newItem
+  })
+  return { txid: result.txid, timeout: 10000 } // Wait up to 10 seconds
+}
+```
+
+```ts
+// Insert handler with multiple items - return array of txids
+onInsert: async ({ transaction }) => {
+  const items = transaction.mutations.map(m => m.modified)
+  const results = await Promise.all(
+    items.map(item => api.todos.create({ data: item }))
+  )
+  return { txid: results.map(r => r.txid) }
+}
+```
+
+```ts
+// Use awaitMatch utility for custom matching
+onInsert: async ({ transaction, collection }) => {
+  const newItem = transaction.mutations[0].modified
+  await api.todos.create({ data: newItem })
+  await collection.utils.awaitMatch(
+    (message) => isChangeMessage(message) &&
+                 message.headers.operation === 'insert' &&
+                 message.value.name === newItem.name
+  )
+}
+```
+
+***
+
+### onUpdate()?
+
+```ts
+optional onUpdate: (params) => Promise<MatchingStrategy>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:254](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L254)
+
+Optional asynchronous handler function called before an update operation
+
+#### Parameters
+
+##### params
+
+`UpdateMutationFnParams`\&lt;`T`, `string` \| `number`, [`ElectricCollectionUtils`](/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils)\&lt;`T`\>\>
+
+Object containing transaction and collection information
+
+#### Returns
+
+`Promise`\&lt;`MatchingStrategy`\>
+
+Promise resolving to &#123; txid, timeout? &#125; or void
+
+#### Examples
+
+```ts
+// Basic Electric update handler with txid (recommended)
+onUpdate: async ({ transaction }) => {
+  const { original, changes } = transaction.mutations[0]
+  const result = await api.todos.update({
+    where: { id: original.id },
+    data: changes
+  })
+  return { txid: result.txid }
+}
+```
+
+```ts
+// Use awaitMatch utility for custom matching
+onUpdate: async ({ transaction, collection }) => {
+  const { original, changes } = transaction.mutations[0]
+  await api.todos.update({ where: { id: original.id }, data: changes })
+  await collection.utils.awaitMatch(
+    (message) => isChangeMessage(message) &&
+                 message.headers.operation === 'update' &&
+                 message.value.id === original.id
+  )
+}
+```
+
+***
+
+### shapeOptions
+
+```ts
+shapeOptions: ShapeStreamOptions<GetExtensions<T>>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:164](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L164)
+
+Configuration options for the ElectricSQL ShapeStream
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: ElectricSyncMode;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:165](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L165)
diff --git a/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils.md b/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils.md
new file mode 100644
index 000000000..2cc8fd5ad
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/interfaces/ElectricCollectionUtils.md
@@ -0,0 +1,46 @@
+---
+id: ElectricCollectionUtils
+title: ElectricCollectionUtils
+---
+
+# Interface: ElectricCollectionUtils\&lt;T\>
+
+Defined in: [packages/electric-db-collection/src/electric.ts:558](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L558)
+
+Electric collection utilities type
+
+## Extends
+
+- `UtilsRecord`
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Row`\&lt;`unknown`\> = `Row`\&lt;`unknown`\>
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### awaitMatch
+
+```ts
+awaitMatch: AwaitMatchFn<T>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:562](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L562)
+
+***
+
+### awaitTxId
+
+```ts
+awaitTxId: AwaitTxIdFn;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:561](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L561)
diff --git a/mintlify/db/reference/electric-db-collection/type-aliases/AwaitTxIdFn.md b/mintlify/db/reference/electric-db-collection/type-aliases/AwaitTxIdFn.md
new file mode 100644
index 000000000..84e0398a8
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/type-aliases/AwaitTxIdFn.md
@@ -0,0 +1,28 @@
+---
+id: AwaitTxIdFn
+title: AwaitTxIdFn
+---
+
+# Type Alias: AwaitTxIdFn()
+
+```ts
+type AwaitTxIdFn = (txId, timeout?) => Promise<boolean>;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:545](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L545)
+
+Type for the awaitTxId utility function
+
+## Parameters
+
+### txId
+
+[`Txid`](/db/reference/electric-db-collection/type-aliases/Txid)
+
+### timeout?
+
+`number`
+
+## Returns
+
+`Promise`\&lt;`boolean`\>
diff --git a/mintlify/db/reference/electric-db-collection/type-aliases/Txid.md b/mintlify/db/reference/electric-db-collection/type-aliases/Txid.md
new file mode 100644
index 000000000..f16e8e37a
--- /dev/null
+++ b/mintlify/db/reference/electric-db-collection/type-aliases/Txid.md
@@ -0,0 +1,14 @@
+---
+id: Txid
+title: Txid
+---
+
+# Type Alias: Txid
+
+```ts
+type Txid = number;
+```
+
+Defined in: [packages/electric-db-collection/src/electric.ts:86](https://github.com/TanStack/db/blob/main/packages/electric-db-collection/src/electric.ts#L86)
+
+Type representing a transaction ID in ElectricSQL
diff --git a/mintlify/db/reference/functions/add.md b/mintlify/db/reference/functions/add.md
new file mode 100644
index 000000000..c7dddb77c
--- /dev/null
+++ b/mintlify/db/reference/functions/add.md
@@ -0,0 +1,36 @@
+---
+id: add
+title: add
+---
+
+# Function: add()
+
+```ts
+function add<T1, T2>(left, right): BinaryNumericReturnType;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:601](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L601)
+
+## Type Parameters
+
+### T1
+
+`T1` *extends* `ExpressionLike`
+
+### T2
+
+`T2` *extends* `ExpressionLike`
+
+## Parameters
+
+### left
+
+`T1`
+
+### right
+
+`T2`
+
+## Returns
+
+`BinaryNumericReturnType`
diff --git a/mintlify/db/reference/functions/and.md b/mintlify/db/reference/functions/and.md
new file mode 100644
index 000000000..0c55b0d7a
--- /dev/null
+++ b/mintlify/db/reference/functions/and.md
@@ -0,0 +1,57 @@
+---
+id: and
+title: and
+---
+
+# Function: and()
+
+## Call Signature
+
+```ts
+function and(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:203](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L203)
+
+### Parameters
+
+#### left
+
+`ExpressionLike`
+
+#### right
+
+`ExpressionLike`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function and(
+   left, 
+   right, ...
+rest): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:207](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L207)
+
+### Parameters
+
+#### left
+
+`ExpressionLike`
+
+#### right
+
+`ExpressionLike`
+
+#### rest
+
+...`ExpressionLike`[]
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/avg.md b/mintlify/db/reference/functions/avg.md
new file mode 100644
index 000000000..985976fe6
--- /dev/null
+++ b/mintlify/db/reference/functions/avg.md
@@ -0,0 +1,28 @@
+---
+id: avg
+title: avg
+---
+
+# Function: avg()
+
+```ts
+function avg<T>(arg): AggregateReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L647)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`AggregateReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/caseWhen.md b/mintlify/db/reference/functions/caseWhen.md
new file mode 100644
index 000000000..4795bd59a
--- /dev/null
+++ b/mintlify/db/reference/functions/caseWhen.md
@@ -0,0 +1,1299 @@
+---
+id: caseWhen
+title: caseWhen
+---
+
+# Function: caseWhen()
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1>(condition1, value1): CaseWhenResult<[V1], false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:399](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L399)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`\], `false`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, D>(
+   condition1, 
+   value1, 
+defaultValue): CaseWhenResult<[V1, D], true>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:403](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L403)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### D
+
+`D` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### defaultValue
+
+`D`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `D`\], `true`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2>(
+   condition1, 
+   value1, 
+   condition2, 
+value2): CaseWhenResult<[V1, V2], false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:408](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L408)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`\], `false`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, D>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+defaultValue): CaseWhenResult<[V1, V2, D], true>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:419](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L419)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### D
+
+`D` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### defaultValue
+
+`D`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `D`\], `true`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+value3): CaseWhenResult<[V1, V2, V3], false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:432](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L432)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`\], `false`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, D>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+defaultValue): CaseWhenResult<[V1, V2, V3, D], true>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:447](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L447)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### D
+
+`D` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### defaultValue
+
+`D`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`, `D`\], `true`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, C4, V4>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+   condition4, 
+value4): CaseWhenResult<[V1, V2, V3, V4], false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:464](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L464)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### C4
+
+`C4` *extends* `ExpressionLike`
+
+#### V4
+
+`V4` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### condition4
+
+`C4`
+
+#### value4
+
+`V4`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`, `V4`\], `false`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, C4, V4, D>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+   condition4, 
+   value4, 
+defaultValue): CaseWhenResult<[V1, V2, V3, V4, D], true>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:483](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L483)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### C4
+
+`C4` *extends* `ExpressionLike`
+
+#### V4
+
+`V4` *extends* `CaseWhenValue`
+
+#### D
+
+`D` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### condition4
+
+`C4`
+
+#### value4
+
+`V4`
+
+#### defaultValue
+
+`D`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`, `V4`, `D`\], `true`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, C4, V4, C5, V5>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+   condition4, 
+   value4, 
+   condition5, 
+value5): CaseWhenResult<[V1, V2, V3, V4, V5], false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:504](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L504)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### C4
+
+`C4` *extends* `ExpressionLike`
+
+#### V4
+
+`V4` *extends* `CaseWhenValue`
+
+#### C5
+
+`C5` *extends* `ExpressionLike`
+
+#### V5
+
+`V5` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### condition4
+
+`C4`
+
+#### value4
+
+`V4`
+
+#### condition5
+
+`C5`
+
+#### value5
+
+`V5`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`, `V4`, `V5`\], `false`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, C4, V4, C5, V5, D>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+   condition4, 
+   value4, 
+   condition5, 
+   value5, 
+defaultValue): CaseWhenResult<[V1, V2, V3, V4, V5, D], true>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:527](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L527)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### C4
+
+`C4` *extends* `ExpressionLike`
+
+#### V4
+
+`V4` *extends* `CaseWhenValue`
+
+#### C5
+
+`C5` *extends* `ExpressionLike`
+
+#### V5
+
+`V5` *extends* `CaseWhenValue`
+
+#### D
+
+`D` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### condition4
+
+`C4`
+
+#### value4
+
+`V4`
+
+#### condition5
+
+`C5`
+
+#### value5
+
+`V5`
+
+#### defaultValue
+
+`D`
+
+### Returns
+
+`CaseWhenResult`\&lt;\[`V1`, `V2`, `V3`, `V4`, `V5`, `D`\], `true`\>
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
+
+## Call Signature
+
+```ts
+function caseWhen<C1, V1, C2, V2, C3, V3, C4, V4, C5, V5>(
+   condition1, 
+   value1, 
+   condition2, 
+   value2, 
+   condition3, 
+   value3, 
+   condition4, 
+   value4, 
+   condition5, 
+   value5, 
+   condition6, 
+   value6, ...
+   rest): any;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:552](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L552)
+
+Returns the value for the first matching condition, similar to SQL
+`CASE WHEN`.
+
+Arguments are evaluated as condition/value pairs followed by an optional
+default value. Scalar branch values return a query expression and can be used
+in expression contexts like `select`, `where`, `orderBy`, `groupBy`,
+`having`, and equality join operands. If no scalar branch matches and no
+default is provided, the result is `null`.
+
+When a branch value is a projection object, `caseWhen` becomes a select-only
+projection value. Projection branches can include nested fields, ref spreads,
+and includes. If no projection branch matches and no default is provided, the
+result is `undefined`.
+
+### Type Parameters
+
+#### C1
+
+`C1` *extends* `ExpressionLike`
+
+#### V1
+
+`V1` *extends* `CaseWhenValue`
+
+#### C2
+
+`C2` *extends* `ExpressionLike`
+
+#### V2
+
+`V2` *extends* `CaseWhenValue`
+
+#### C3
+
+`C3` *extends* `ExpressionLike`
+
+#### V3
+
+`V3` *extends* `CaseWhenValue`
+
+#### C4
+
+`C4` *extends* `ExpressionLike`
+
+#### V4
+
+`V4` *extends* `CaseWhenValue`
+
+#### C5
+
+`C5` *extends* `ExpressionLike`
+
+#### V5
+
+`V5` *extends* `CaseWhenValue`
+
+### Parameters
+
+#### condition1
+
+`C1`
+
+#### value1
+
+`V1`
+
+#### condition2
+
+`C2`
+
+#### value2
+
+`V2`
+
+#### condition3
+
+`C3`
+
+#### value3
+
+`V3`
+
+#### condition4
+
+`C4`
+
+#### value4
+
+`V4`
+
+#### condition5
+
+`C5`
+
+#### value5
+
+`V5`
+
+#### condition6
+
+`ExpressionLike`
+
+#### value6
+
+`CaseWhenValue`
+
+#### rest
+
+...`CaseWhenValue`[]
+
+### Returns
+
+`any`
+
+### Examples
+
+```ts
+caseWhen(gt(user.age, 18), `adult`, `minor`)
+```
+
+```ts
+caseWhen(
+  gt(user.age, 65),
+  `senior`,
+  gt(user.age, 18),
+  `adult`,
+  `minor`,
+)
+```
+
+```ts
+caseWhen(gt(user.age, 18), {
+  ...user,
+  posts: q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.userId, user.id)),
+})
+```
diff --git a/mintlify/db/reference/functions/clearQueryPatterns.md b/mintlify/db/reference/functions/clearQueryPatterns.md
new file mode 100644
index 000000000..6c56bbb5e
--- /dev/null
+++ b/mintlify/db/reference/functions/clearQueryPatterns.md
@@ -0,0 +1,18 @@
+---
+id: clearQueryPatterns
+title: clearQueryPatterns
+---
+
+# Function: clearQueryPatterns()
+
+```ts
+function clearQueryPatterns(): void;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L157)
+
+Clear query pattern tracking (useful for tests)
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/functions/coalesce.md b/mintlify/db/reference/functions/coalesce.md
new file mode 100644
index 000000000..57009fa3c
--- /dev/null
+++ b/mintlify/db/reference/functions/coalesce.md
@@ -0,0 +1,28 @@
+---
+id: coalesce
+title: coalesce
+---
+
+# Function: coalesce()
+
+```ts
+function coalesce<T>(...args): CoalesceReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:349](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L349)
+
+## Type Parameters
+
+### T
+
+`T` *extends* \[`ExpressionLike`, `...ExpressionLike[]`\]
+
+## Parameters
+
+### args
+
+...`T`
+
+## Returns
+
+`CoalesceReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/compileExpression.md b/mintlify/db/reference/functions/compileExpression.md
new file mode 100644
index 000000000..fcb814fce
--- /dev/null
+++ b/mintlify/db/reference/functions/compileExpression.md
@@ -0,0 +1,29 @@
+---
+id: compileExpression
+title: compileExpression
+---
+
+# Function: compileExpression()
+
+```ts
+function compileExpression(expr, isSingleRow): CompiledSingleRowExpression | CompiledExpression;
+```
+
+Defined in: [packages/db/src/query/compiler/evaluators.ts:89](https://github.com/TanStack/db/blob/main/packages/db/src/query/compiler/evaluators.ts#L89)
+
+Compiles an expression into an optimized evaluator function.
+This eliminates branching during evaluation by pre-compiling the expression structure.
+
+## Parameters
+
+### expr
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+### isSingleRow
+
+`boolean` = `false`
+
+## Returns
+
+`CompiledSingleRowExpression` \| `CompiledExpression`
diff --git a/mintlify/db/reference/functions/compileQuery.md b/mintlify/db/reference/functions/compileQuery.md
new file mode 100644
index 000000000..67a454e76
--- /dev/null
+++ b/mintlify/db/reference/functions/compileQuery.md
@@ -0,0 +1,100 @@
+---
+id: compileQuery
+title: compileQuery
+---
+
+# Function: compileQuery()
+
+```ts
+function compileQuery(
+   rawQuery, 
+   inputs, 
+   collections, 
+   subscriptions, 
+   callbacks, 
+   lazySources, 
+   optimizableOrderByCollections, 
+   setWindowFn, 
+   cache, 
+   queryMapping, 
+   parentKeyStream?, 
+   childCorrelationField?): CompilationResult;
+```
+
+Defined in: [packages/db/src/query/compiler/index.ts:162](https://github.com/TanStack/db/blob/main/packages/db/src/query/compiler/index.ts#L162)
+
+Compiles a query IR into a D2 pipeline
+
+## Parameters
+
+### rawQuery
+
+[`QueryIR`](/db/reference/@tanstack/namespaces/IR/interfaces/QueryIR)
+
+The query IR to compile
+
+### inputs
+
+`Record`\&lt;`string`, [`KeyedStream`](/db/reference/type-aliases/KeyedStream)\>
+
+Mapping of source aliases to input streams (e.g., `{ employee: input1, manager: input2 }`)
+
+### collections
+
+`Record`\&lt;`string`, [`Collection`](/db/reference/interfaces/Collection)\&lt;`any`, `any`, `any`, `any`, `any`\>\>
+
+Mapping of collection IDs to Collection instances
+
+### subscriptions
+
+`Record`\&lt;`string`, `CollectionSubscription`\>
+
+Mapping of source aliases to CollectionSubscription instances
+
+### callbacks
+
+`Record`\&lt;`string`, `LazyCollectionCallbacks`\>
+
+Mapping of source aliases to lazy loading callbacks
+
+### lazySources
+
+`Set`\&lt;`string`\>
+
+Set of source aliases that should load data lazily
+
+### optimizableOrderByCollections
+
+`Record`\&lt;`string`, `OrderByOptimizationInfo`\>
+
+Map of collection IDs to order-by optimization info
+
+### setWindowFn
+
+(`windowFn`) => `void`
+
+### cache
+
+`QueryCache` = `...`
+
+Optional cache for compiled subqueries (used internally for recursion)
+
+### queryMapping
+
+`QueryMapping` = `...`
+
+Optional mapping from optimized queries to original queries
+
+### parentKeyStream?
+
+[`KeyedStream`](/db/reference/type-aliases/KeyedStream)
+
+### childCorrelationField?
+
+[`PropRef`](/db/reference/@tanstack/namespaces/IR/classes/PropRef)\&lt;`any`\>
+
+## Returns
+
+`CompilationResult`
+
+A CompilationResult with the pipeline, source WHERE clauses, and alias metadata
diff --git a/mintlify/db/reference/functions/compileSingleRowExpression.md b/mintlify/db/reference/functions/compileSingleRowExpression.md
new file mode 100644
index 000000000..1339b52c6
--- /dev/null
+++ b/mintlify/db/reference/functions/compileSingleRowExpression.md
@@ -0,0 +1,24 @@
+---
+id: compileSingleRowExpression
+title: compileSingleRowExpression
+---
+
+# Function: compileSingleRowExpression()
+
+```ts
+function compileSingleRowExpression(expr): CompiledSingleRowExpression;
+```
+
+Defined in: [packages/db/src/query/compiler/evaluators.ts:100](https://github.com/TanStack/db/blob/main/packages/db/src/query/compiler/evaluators.ts#L100)
+
+Compiles a single-row expression into an optimized evaluator function.
+
+## Parameters
+
+### expr
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+## Returns
+
+`CompiledSingleRowExpression`
diff --git a/mintlify/db/reference/functions/concat.md b/mintlify/db/reference/functions/concat.md
new file mode 100644
index 000000000..09ac4b94e
--- /dev/null
+++ b/mintlify/db/reference/functions/concat.md
@@ -0,0 +1,48 @@
+---
+id: concat
+title: concat
+---
+
+# Function: concat()
+
+## Call Signature
+
+```ts
+function concat<T>(arg): ConcatToArrayWrapper<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:301](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L301)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StringifiableScalar`
+
+### Parameters
+
+#### arg
+
+`ToArrayWrapper`\&lt;`T`\>
+
+### Returns
+
+`ConcatToArrayWrapper`\&lt;`T`\>
+
+## Call Signature
+
+```ts
+function concat(...args): BasicExpression<string>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:304](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L304)
+
+### Parameters
+
+#### args
+
+...`ExpressionLike`[]
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`string`\>
diff --git a/mintlify/db/reference/functions/configureIndexDevMode.md b/mintlify/db/reference/functions/configureIndexDevMode.md
new file mode 100644
index 000000000..4971931ea
--- /dev/null
+++ b/mintlify/db/reference/functions/configureIndexDevMode.md
@@ -0,0 +1,24 @@
+---
+id: configureIndexDevMode
+title: configureIndexDevMode
+---
+
+# Function: configureIndexDevMode()
+
+```ts
+function configureIndexDevMode(config): void;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:50](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L50)
+
+Configure dev mode for index suggestions
+
+## Parameters
+
+### config
+
+`Partial`\&lt;[`IndexDevModeConfig`](/db/reference/interfaces/IndexDevModeConfig)\>
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/functions/count.md b/mintlify/db/reference/functions/count.md
new file mode 100644
index 000000000..7f69f5461
--- /dev/null
+++ b/mintlify/db/reference/functions/count.md
@@ -0,0 +1,22 @@
+---
+id: count
+title: count
+---
+
+# Function: count()
+
+```ts
+function count(arg): Aggregate<number>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:643](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L643)
+
+## Parameters
+
+### arg
+
+`ExpressionLike`
+
+## Returns
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`number`\>
diff --git a/mintlify/db/reference/functions/createArrayChangeProxy.md b/mintlify/db/reference/functions/createArrayChangeProxy.md
new file mode 100644
index 000000000..0ece5c900
--- /dev/null
+++ b/mintlify/db/reference/functions/createArrayChangeProxy.md
@@ -0,0 +1,50 @@
+---
+id: createArrayChangeProxy
+title: createArrayChangeProxy
+---
+
+# Function: createArrayChangeProxy()
+
+```ts
+function createArrayChangeProxy<T>(targets): object;
+```
+
+Defined in: [packages/db/src/proxy.ts:1130](https://github.com/TanStack/db/blob/main/packages/db/src/proxy.ts#L1130)
+
+Creates proxies for an array of objects and tracks changes to each
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+## Parameters
+
+### targets
+
+`T`[]
+
+Array of objects to proxy
+
+## Returns
+
+`object`
+
+An object containing the array of proxies and a function to get all changes
+
+### getChanges()
+
+```ts
+getChanges: () => Record<string | symbol, unknown>[];
+```
+
+#### Returns
+
+`Record`\&lt;`string` \| `symbol`, `unknown`\>[]
+
+### proxies
+
+```ts
+proxies: T[];
+```
diff --git a/mintlify/db/reference/functions/createChangeProxy.md b/mintlify/db/reference/functions/createChangeProxy.md
new file mode 100644
index 000000000..3b47983c6
--- /dev/null
+++ b/mintlify/db/reference/functions/createChangeProxy.md
@@ -0,0 +1,62 @@
+---
+id: createChangeProxy
+title: createChangeProxy
+---
+
+# Function: createChangeProxy()
+
+```ts
+function createChangeProxy<T>(target, parent?): object;
+```
+
+Defined in: [packages/db/src/proxy.ts:628](https://github.com/TanStack/db/blob/main/packages/db/src/proxy.ts#L628)
+
+Creates a proxy that tracks changes to the target object
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Record`\&lt;`string` \| `symbol`, `any`\>
+
+## Parameters
+
+### target
+
+`T`
+
+The object to proxy
+
+### parent?
+
+Optional parent information
+
+#### prop
+
+`string` \| `symbol`
+
+#### tracker
+
+`ChangeTracker`\&lt;`Record`\&lt;`string` \| `symbol`, `unknown`\>\>
+
+## Returns
+
+`object`
+
+An object containing the proxy and a function to get the changes
+
+### getChanges()
+
+```ts
+getChanges: () => Record<string | symbol, any>;
+```
+
+#### Returns
+
+`Record`\&lt;`string` \| `symbol`, `any`\>
+
+### proxy
+
+```ts
+proxy: T;
+```
diff --git a/mintlify/db/reference/functions/createCollection.md b/mintlify/db/reference/functions/createCollection.md
new file mode 100644
index 000000000..5a38cecd5
--- /dev/null
+++ b/mintlify/db/reference/functions/createCollection.md
@@ -0,0 +1,878 @@
+---
+id: createCollection
+title: createCollection
+---
+
+# Function: createCollection()
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<InferSchemaOutput<T>, TKey, TUtils, T, InferSchemaInput<T>> & NonSingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:141](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L141)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, `TUtils`\>, `"utils"`\> & `object` & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `TUtils`, `T`, [`InferSchemaInput`](/db/reference/type-aliases/InferSchemaInput)\&lt;`T`\>\> & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<InferSchemaOutput<T>, TKey, Exclude<TUtils, undefined>, T, InferSchemaInput<T>> & NonSingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:158](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L158)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, `TUtils`\> & `object` & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `Exclude`\&lt;`TUtils`, `undefined`\>, `T`, [`InferSchemaInput`](/db/reference/type-aliases/InferSchemaInput)\&lt;`T`\>\> & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<InferSchemaOutput<T>, TKey, TUtils, T, InferSchemaInput<T>> & SingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:176](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L176)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, `TUtils`\>, `"utils"`\> & `object` & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `TUtils`, `T`, [`InferSchemaInput`](/db/reference/type-aliases/InferSchemaInput)\&lt;`T`\>\> & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<InferSchemaOutput<T>, TKey, TUtils, T, InferSchemaInput<T>> & SingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:192](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L192)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, `TUtils`\> & `object` & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `TUtils`, `T`, [`InferSchemaInput`](/db/reference/type-aliases/InferSchemaInput)\&lt;`T`\>\> & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<T, TKey, TUtils, never, T> & NonSingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:205](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L205)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, `TUtils`\>, `"utils"`\> & `object` & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`, `TUtils`, `never`, `T`\> & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<T, TKey, TUtils, never, T> & NonSingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:218](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L218)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, `TUtils`\> & `object` & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`, `TUtils`, `never`, `T`\> & [`NonSingleResult`](/db/reference/type-aliases/NonSingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<T, TKey, TUtils, never, T> & SingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:230](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L230)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, `TUtils`\>, `"utils"`\> & `object` & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`, `TUtils`, `never`, `T`\> & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
+
+## Call Signature
+
+```ts
+function createCollection<T, TKey, TUtils>(options): Collection<T, TKey, TUtils, never, T> & SingleResult;
+```
+
+Defined in: [packages/db/src/collection/index.ts:243](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L243)
+
+Creates a new Collection instance with the given configuration
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key for the collection
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### Parameters
+
+#### options
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, `TUtils`\> & `object` & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+Collection options with optional utilities
+
+### Returns
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`, `TUtils`, `never`, `T`\> & [`SingleResult`](/db/reference/type-aliases/SingleResult)
+
+A new Collection with utilities exposed both at top level and under .utils
+
+### Examples
+
+```ts
+// Pattern 1: With operation handlers (direct collection calls)
+const todos = createCollection({
+  id: "todos",
+  getKey: (todo) => todo.id,
+  schema,
+  onInsert: async ({ transaction, collection }) => {
+    // Send to API
+    await api.createTodo(transaction.mutations[0].modified)
+  },
+  onUpdate: async ({ transaction, collection }) => {
+    await api.updateTodo(transaction.mutations[0].modified)
+  },
+  onDelete: async ({ transaction, collection }) => {
+    await api.deleteTodo(transaction.mutations[0].key)
+  },
+  sync: { sync: () => {} }
+})
+
+// Direct usage (handlers manage transactions)
+const tx = todos.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Pattern 2: Manual transaction management
+const todos = createCollection({
+  getKey: (todo) => todo.id,
+  schema: todoSchema,
+  sync: { sync: () => {} }
+})
+
+// Explicit transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Handle all mutations in transaction
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  todos.insert({ id: "1", text: "Buy milk" })
+  todos.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Using schema for type inference (preferred as it also gives you client side validation)
+const todoSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+const todos = createCollection({
+  schema: todoSchema,
+  getKey: (todo) => todo.id,
+  sync: { sync: () => {} }
+})
+```
diff --git a/mintlify/db/reference/functions/createEffect.md b/mintlify/db/reference/functions/createEffect.md
new file mode 100644
index 000000000..d46d9855f
--- /dev/null
+++ b/mintlify/db/reference/functions/createEffect.md
@@ -0,0 +1,51 @@
+---
+id: createEffect
+title: createEffect
+---
+
+# Function: createEffect()
+
+```ts
+function createEffect<TRow, TKey>(config): Effect;
+```
+
+Defined in: [packages/db/src/query/effect.ts:184](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L184)
+
+Creates a reactive effect that fires handlers when rows enter, exit, or
+update within a query result. Effects process deltas only — they do not
+maintain or require the full materialised query result.
+
+## Type Parameters
+
+### TRow
+
+`TRow` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Parameters
+
+### config
+
+[`EffectConfig`](/db/reference/interfaces/EffectConfig)\&lt;`TRow`, `TKey`\>
+
+## Returns
+
+[`Effect`](/db/reference/interfaces/Effect)
+
+## Example
+
+```typescript
+const effect = createEffect({
+  query: (q) => q.from({ msg: messagesCollection })
+    .where(({ msg }) => eq(msg.role, 'user')),
+  onEnter: async (event) => {
+    await generateResponse(event.value)
+  },
+})
+
+// Later: stop the effect
+await effect.dispose()
+```
diff --git a/mintlify/db/reference/functions/createLiveQueryCollection.md b/mintlify/db/reference/functions/createLiveQueryCollection.md
new file mode 100644
index 000000000..73f1a49cc
--- /dev/null
+++ b/mintlify/db/reference/functions/createLiveQueryCollection.md
@@ -0,0 +1,137 @@
+---
+id: createLiveQueryCollection
+title: createLiveQueryCollection
+---
+
+# Function: createLiveQueryCollection()
+
+## Call Signature
+
+```ts
+function createLiveQueryCollection<TQueryFn, TQuery>(query): CollectionForContext<ExtractContext<TQuery>, RootQueryResult<ExtractContext<TQuery>>, {
+}> & object;
+```
+
+Defined in: [packages/db/src/query/live-query-collection.ts:128](https://github.com/TanStack/db/blob/main/packages/db/src/query/live-query-collection.ts#L128)
+
+Creates a live query collection directly
+
+### Type Parameters
+
+#### TQueryFn
+
+`TQueryFn` *extends* (`q`) => [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>
+
+#### TQuery
+
+`TQuery` *extends* [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\> = `ReturnType`\&lt;`TQueryFn`\>
+
+### Parameters
+
+#### query
+
+`TQueryFn` & `RootQueryFn`\&lt;`TQuery`\>
+
+### Returns
+
+`CollectionForContext`\&lt;[`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>, `RootQueryResult`\&lt;[`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>\>, \&#123;
+\&#125;\> & `object`
+
+### Example
+
+```typescript
+// Minimal usage - just pass a query function
+const activeUsers = createLiveQueryCollection(
+  (q) => q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+    .select(({ user }) => ({ id: user.id, name: user.name }))
+)
+
+// Full configuration with custom options
+const searchResults = createLiveQueryCollection({
+  id: "search-results", // Custom ID (auto-generated if omitted)
+  query: (q) => q
+    .from({ post: postsCollection })
+    .where(({ post }) => like(post.title, `%${searchTerm}%`))
+    .select(({ post }) => ({
+      id: post.id,
+      title: post.title,
+      excerpt: post.excerpt,
+    })),
+  getKey: (item) => item.id, // Custom key function (uses stream key if omitted)
+  utils: {
+    updateSearchTerm: (newTerm: string) => {
+      // Custom utility functions
+    }
+  }
+})
+```
+
+## Call Signature
+
+```ts
+function createLiveQueryCollection<TQuery, TContext, TUtils>(config): CollectionForContext<TContext, RootQueryResult<TContext>, {
+}> & object;
+```
+
+Defined in: [packages/db/src/query/live-query-collection.ts:141](https://github.com/TanStack/db/blob/main/packages/db/src/query/live-query-collection.ts#L141)
+
+Creates a live query collection directly
+
+### Type Parameters
+
+#### TQuery
+
+`TQuery` *extends* [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>
+
+#### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context) = [`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>
+
+#### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = \&#123;
+\&#125;
+
+### Parameters
+
+#### config
+
+[`LiveQueryCollectionConfig`](/db/reference/interfaces/LiveQueryCollectionConfig)\&lt;`TContext`, `RootQueryResult`\&lt;`TContext`\>\> & `object`
+
+### Returns
+
+`CollectionForContext`\&lt;`TContext`, `RootQueryResult`\&lt;`TContext`\>, \&#123;
+\&#125;\> & `object`
+
+### Example
+
+```typescript
+// Minimal usage - just pass a query function
+const activeUsers = createLiveQueryCollection(
+  (q) => q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+    .select(({ user }) => ({ id: user.id, name: user.name }))
+)
+
+// Full configuration with custom options
+const searchResults = createLiveQueryCollection({
+  id: "search-results", // Custom ID (auto-generated if omitted)
+  query: (q) => q
+    .from({ post: postsCollection })
+    .where(({ post }) => like(post.title, `%${searchTerm}%`))
+    .select(({ post }) => ({
+      id: post.id,
+      title: post.title,
+      excerpt: post.excerpt,
+    })),
+  getKey: (item) => item.id, // Custom key function (uses stream key if omitted)
+  utils: {
+    updateSearchTerm: (newTerm: string) => {
+      // Custom utility functions
+    }
+  }
+})
+```
diff --git a/mintlify/db/reference/functions/createOptimisticAction.md b/mintlify/db/reference/functions/createOptimisticAction.md
new file mode 100644
index 000000000..5bebb2c85
--- /dev/null
+++ b/mintlify/db/reference/functions/createOptimisticAction.md
@@ -0,0 +1,90 @@
+---
+id: createOptimisticAction
+title: createOptimisticAction
+---
+
+# Function: createOptimisticAction()
+
+```ts
+function createOptimisticAction<TVariables>(options): (variables) => Transaction;
+```
+
+Defined in: [packages/db/src/optimistic-action.ts:54](https://github.com/TanStack/db/blob/main/packages/db/src/optimistic-action.ts#L54)
+
+Creates an optimistic action function that applies local optimistic updates immediately
+before executing the actual mutation on the server.
+
+This pattern allows for responsive UI updates while the actual mutation is in progress.
+The optimistic update is applied via the `onMutate` callback, and the server mutation
+is executed via the `mutationFn`.
+
+**Important:** Inside your `mutationFn`, you must ensure that your server writes have synced back
+before you return, as the optimistic state is dropped when you return from the mutation function.
+You generally use collection-specific helpers to do this, such as Query's `utils.refetch()`,
+direct write APIs, or Electric's `utils.awaitTxId()`.
+
+## Type Parameters
+
+### TVariables
+
+`TVariables` = `unknown`
+
+The type of variables that will be passed to the action function
+
+## Parameters
+
+### options
+
+[`CreateOptimisticActionsOptions`](/db/reference/interfaces/CreateOptimisticActionsOptions)\&lt;`TVariables`\>
+
+Configuration options for the optimistic action
+
+## Returns
+
+A function that accepts variables of type TVariables and returns a Transaction
+
+```ts
+(variables): Transaction;
+```
+
+### Parameters
+
+#### variables
+
+`TVariables`
+
+### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+## Example
+
+```ts
+const addTodo = createOptimisticAction<string>({
+  onMutate: (text) => {
+    // Instantly applies local optimistic state
+    todoCollection.insert({
+      id: uuid(),
+      text,
+      completed: false
+    })
+  },
+  mutationFn: async (text, params) => {
+    // Persist the todo to your backend
+    const response = await fetch('/api/todos', {
+      method: 'POST',
+      body: JSON.stringify({ text, completed: false }),
+    })
+    const result = await response.json()
+
+    // IMPORTANT: Ensure server writes have synced back before returning
+    // This ensures the optimistic state can be safely discarded
+    await todoCollection.utils.refetch()
+
+    return result
+  }
+})
+
+// Usage
+const transaction = addTodo('New Todo Item')
+```
diff --git a/mintlify/db/reference/functions/createPacedMutations.md b/mintlify/db/reference/functions/createPacedMutations.md
new file mode 100644
index 000000000..c03a37d9e
--- /dev/null
+++ b/mintlify/db/reference/functions/createPacedMutations.md
@@ -0,0 +1,98 @@
+---
+id: createPacedMutations
+title: createPacedMutations
+---
+
+# Function: createPacedMutations()
+
+```ts
+function createPacedMutations<TVariables, T>(config): (variables) => Transaction<T>;
+```
+
+Defined in: [packages/db/src/paced-mutations.ts:87](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L87)
+
+Creates a paced mutations manager with pluggable timing strategies.
+
+This function provides a way to control when and how optimistic mutations
+are persisted to the backend, using strategies like debouncing, queuing,
+or throttling. The optimistic updates are applied immediately via `onMutate`,
+and the actual persistence is controlled by the strategy.
+
+The returned function accepts variables of type TVariables and returns a
+Transaction object that can be awaited to know when persistence completes
+or to handle errors.
+
+## Type Parameters
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Parameters
+
+### config
+
+[`PacedMutationsConfig`](/db/reference/interfaces/PacedMutationsConfig)\&lt;`TVariables`, `T`\>
+
+Configuration including onMutate, mutationFn and strategy
+
+## Returns
+
+A function that accepts variables and returns a Transaction
+
+```ts
+(variables): Transaction<T>;
+```
+
+### Parameters
+
+#### variables
+
+`TVariables`
+
+### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+## Examples
+
+```ts
+// Debounced mutations for auto-save
+const updateTodo = createPacedMutations<string>({
+  onMutate: (text) => {
+    // Apply optimistic update immediately
+    collection.update(id, draft => { draft.text = text })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: debounceStrategy({ wait: 500 })
+})
+
+// Call with variables, returns a transaction
+const tx = updateTodo('New text')
+
+// Await persistence or handle errors
+await tx.isPersisted.promise
+```
+
+```ts
+// Queue strategy for sequential processing
+const addTodo = createPacedMutations<{ text: string }>({
+  onMutate: ({ text }) => {
+    collection.insert({ id: uuid(), text, completed: false })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: queueStrategy({
+    wait: 200,
+    addItemsTo: 'back',
+    getItemsFrom: 'front'
+  })
+})
+```
diff --git a/mintlify/db/reference/functions/createTransaction.md b/mintlify/db/reference/functions/createTransaction.md
new file mode 100644
index 000000000..0a616d860
--- /dev/null
+++ b/mintlify/db/reference/functions/createTransaction.md
@@ -0,0 +1,87 @@
+---
+id: createTransaction
+title: createTransaction
+---
+
+# Function: createTransaction()
+
+```ts
+function createTransaction<T>(config): Transaction<T>;
+```
+
+Defined in: [packages/db/src/transactions.ts:157](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L157)
+
+Creates a new transaction for grouping multiple collection operations
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Parameters
+
+### config
+
+[`TransactionConfig`](/db/reference/interfaces/TransactionConfig)\&lt;`T`\>
+
+Transaction configuration with mutation function
+
+## Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+A new Transaction instance
+
+## Examples
+
+```ts
+// Basic transaction usage
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Send all mutations to API
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Buy milk" })
+  collection.update("2", draft => { draft.completed = true })
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle transaction errors
+try {
+  const tx = createTransaction({
+    mutationFn: async () => { throw new Error("API failed") }
+  })
+
+  tx.mutate(() => {
+    collection.insert({ id: "1", text: "New item" })
+  })
+
+  await tx.isPersisted.promise
+} catch (error) {
+  console.log('Transaction failed:', error)
+}
+```
+
+```ts
+// Manual commit control
+const tx = createTransaction({
+  autoCommit: false,
+  mutationFn: async () => {
+    // API call
+  }
+})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Item" })
+})
+
+// Commit later
+await tx.commit()
+```
diff --git a/mintlify/db/reference/functions/debounceStrategy.md b/mintlify/db/reference/functions/debounceStrategy.md
new file mode 100644
index 000000000..892247440
--- /dev/null
+++ b/mintlify/db/reference/functions/debounceStrategy.md
@@ -0,0 +1,46 @@
+---
+id: debounceStrategy
+title: debounceStrategy
+---
+
+# Function: debounceStrategy()
+
+```ts
+function debounceStrategy(options): DebounceStrategy;
+```
+
+Defined in: [packages/db/src/strategies/debounceStrategy.ts:28](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/debounceStrategy.ts#L28)
+
+Creates a debounce strategy that delays transaction execution until after
+a period of inactivity.
+
+Ideal for scenarios like search inputs or auto-save fields where you want
+to wait for the user to stop typing before persisting changes.
+
+## Parameters
+
+### options
+
+[`DebounceStrategyOptions`](/db/reference/interfaces/DebounceStrategyOptions)
+
+Configuration for the debounce behavior
+
+## Returns
+
+[`DebounceStrategy`](/db/reference/interfaces/DebounceStrategy)
+
+A debounce strategy instance
+
+## Example
+
+```ts
+const mutate = usePacedMutations({
+  onMutate: (value) => {
+    collection.update(id, draft => { draft.value = value })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: debounceStrategy({ wait: 500 })
+})
+```
diff --git a/mintlify/db/reference/functions/deepEquals.md b/mintlify/db/reference/functions/deepEquals.md
new file mode 100644
index 000000000..c95964693
--- /dev/null
+++ b/mintlify/db/reference/functions/deepEquals.md
@@ -0,0 +1,45 @@
+---
+id: deepEquals
+title: deepEquals
+---
+
+# Function: deepEquals()
+
+```ts
+function deepEquals(a, b): boolean;
+```
+
+Defined in: [packages/db/src/utils.ts:29](https://github.com/TanStack/db/blob/main/packages/db/src/utils.ts#L29)
+
+Deep equality function that compares two values recursively
+Handles primitives, objects, arrays, Date, RegExp, Map, Set, TypedArrays, and Temporal objects
+
+## Parameters
+
+### a
+
+`any`
+
+First value to compare
+
+### b
+
+`any`
+
+Second value to compare
+
+## Returns
+
+`boolean`
+
+True if the values are deeply equal, false otherwise
+
+## Example
+
+```typescript
+deepEquals({ a: 1, b: 2 }, { b: 2, a: 1 }) // true (property order doesn't matter)
+deepEquals([1, { x: 2 }], [1, { x: 2 }]) // true
+deepEquals({ a: 1 }, { a: 2 }) // false
+deepEquals(new Date('2023-01-01'), new Date('2023-01-01')) // true
+deepEquals(new Map([['a', 1]]), new Map([['a', 1]])) // true
+```
diff --git a/mintlify/db/reference/functions/divide.md b/mintlify/db/reference/functions/divide.md
new file mode 100644
index 000000000..b8424ec32
--- /dev/null
+++ b/mintlify/db/reference/functions/divide.md
@@ -0,0 +1,36 @@
+---
+id: divide
+title: divide
+---
+
+# Function: divide()
+
+```ts
+function divide<T1, T2>(left, right): DivideReturnType;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:631](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L631)
+
+## Type Parameters
+
+### T1
+
+`T1` *extends* `ExpressionLike`
+
+### T2
+
+`T2` *extends* `ExpressionLike`
+
+## Parameters
+
+### left
+
+`T1`
+
+### right
+
+`T2`
+
+## Returns
+
+`DivideReturnType`
diff --git a/mintlify/db/reference/functions/eq.md b/mintlify/db/reference/functions/eq.md
new file mode 100644
index 000000000..562f2f952
--- /dev/null
+++ b/mintlify/db/reference/functions/eq.md
@@ -0,0 +1,90 @@
+---
+id: eq
+title: eq
+---
+
+# Function: eq()
+
+## Call Signature
+
+```ts
+function eq<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:137](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L137)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+`ComparisonOperand`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperand`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function eq<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:141](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L141)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `string` \| `number` \| `boolean`
+
+### Parameters
+
+#### left
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function eq<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:145](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L145)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`T`\>
+
+#### right
+
+`any`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/extractFieldPath.md b/mintlify/db/reference/functions/extractFieldPath.md
new file mode 100644
index 000000000..1553c6426
--- /dev/null
+++ b/mintlify/db/reference/functions/extractFieldPath.md
@@ -0,0 +1,36 @@
+---
+id: extractFieldPath
+title: extractFieldPath
+---
+
+# Function: extractFieldPath()
+
+```ts
+function extractFieldPath(expr): FieldPath | null;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:107](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L107)
+
+Extracts the field path from a PropRef expression.
+Returns null for non-ref expressions.
+
+## Parameters
+
+### expr
+
+`BasicExpression`
+
+The expression to extract from
+
+## Returns
+
+[`FieldPath`](/db/reference/type-aliases/FieldPath) \| `null`
+
+The field path array, or null
+
+## Example
+
+```typescript
+const field = extractFieldPath(someExpression)
+// Returns: ['product', 'category']
+```
diff --git a/mintlify/db/reference/functions/extractSimpleComparisons.md b/mintlify/db/reference/functions/extractSimpleComparisons.md
new file mode 100644
index 000000000..afd64c2bd
--- /dev/null
+++ b/mintlify/db/reference/functions/extractSimpleComparisons.md
@@ -0,0 +1,50 @@
+---
+id: extractSimpleComparisons
+title: extractSimpleComparisons
+---
+
+# Function: extractSimpleComparisons()
+
+```ts
+function extractSimpleComparisons(expr): SimpleComparison[];
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:327](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L327)
+
+Extracts all simple comparisons from a WHERE expression.
+This is useful for simple APIs that only support basic filters.
+
+Note: This only works for simple AND-ed conditions and NOT-wrapped comparisons.
+Throws an error if it encounters unsupported operations like OR or complex nested expressions.
+
+NOT operators are flattened by prefixing the operator name (e.g., `not(eq(...))` becomes `not_eq`).
+
+## Parameters
+
+### expr
+
+The WHERE expression to parse
+
+`BasicExpression`\&lt;`boolean`\> | `null` | `undefined`
+
+## Returns
+
+[`SimpleComparison`](/db/reference/interfaces/SimpleComparison)[]
+
+Array of simple comparisons
+
+## Throws
+
+Error if expression contains OR or other unsupported operations
+
+## Example
+
+```typescript
+const comparisons = extractSimpleComparisons(where)
+// Returns: [
+//   { field: ['category'], operator: 'eq', value: 'electronics' },
+//   { field: ['price'], operator: 'lt', value: 100 },
+//   { field: ['email'], operator: 'isNull' }, // No value for null checks
+//   { field: ['status'], operator: 'not_eq', value: 'archived' }
+// ]
+```
diff --git a/mintlify/db/reference/functions/extractValue.md b/mintlify/db/reference/functions/extractValue.md
new file mode 100644
index 000000000..e48f9a9d6
--- /dev/null
+++ b/mintlify/db/reference/functions/extractValue.md
@@ -0,0 +1,36 @@
+---
+id: extractValue
+title: extractValue
+---
+
+# Function: extractValue()
+
+```ts
+function extractValue(expr): any;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:127](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L127)
+
+Extracts the value from a Value expression.
+Returns undefined for non-value expressions.
+
+## Parameters
+
+### expr
+
+`BasicExpression`
+
+The expression to extract from
+
+## Returns
+
+`any`
+
+The extracted value
+
+## Example
+
+```typescript
+const val = extractValue(someExpression)
+// Returns: 'electronics'
+```
diff --git a/mintlify/db/reference/functions/findIndexForField.md b/mintlify/db/reference/functions/findIndexForField.md
new file mode 100644
index 000000000..096186ad2
--- /dev/null
+++ b/mintlify/db/reference/functions/findIndexForField.md
@@ -0,0 +1,44 @@
+---
+id: findIndexForField
+title: findIndexForField
+---
+
+# Function: findIndexForField()
+
+```ts
+function findIndexForField<TKey>(
+   collection, 
+   fieldPath, 
+   compareOptions?): 
+  | IndexInterface<TKey>
+  | undefined;
+```
+
+Defined in: [packages/db/src/utils/index-optimization.ts:45](https://github.com/TanStack/db/blob/main/packages/db/src/utils/index-optimization.ts#L45)
+
+Finds an index that matches a given field path
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+## Parameters
+
+### collection
+
+[`CollectionLike`](/db/reference/interfaces/CollectionLike)\&lt;`any`, `TKey`\>
+
+### fieldPath
+
+`string`[]
+
+### compareOptions?
+
+`CompareOptions`
+
+## Returns
+
+  \| [`IndexInterface`](/db/reference/interfaces/IndexInterface)\&lt;`TKey`\>
+  \| `undefined`
diff --git a/mintlify/db/reference/functions/getActiveTransaction.md b/mintlify/db/reference/functions/getActiveTransaction.md
new file mode 100644
index 000000000..a15c1db2e
--- /dev/null
+++ b/mintlify/db/reference/functions/getActiveTransaction.md
@@ -0,0 +1,34 @@
+---
+id: getActiveTransaction
+title: getActiveTransaction
+---
+
+# Function: getActiveTransaction()
+
+```ts
+function getActiveTransaction(): 
+  | Transaction<Record<string, unknown>>
+  | undefined;
+```
+
+Defined in: [packages/db/src/transactions.ts:176](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L176)
+
+Gets the currently active ambient transaction, if any
+Used internally by collection operations to join existing transactions
+
+## Returns
+
+  \| [`Transaction`](/db/reference/interfaces/Transaction)\&lt;`Record`\&lt;`string`, `unknown`\>\>
+  \| `undefined`
+
+The active transaction or undefined if none is active
+
+## Example
+
+```ts
+// Check if operations will join an ambient transaction
+const ambientTx = getActiveTransaction()
+if (ambientTx) {
+  console.log('Operations will join transaction:', ambientTx.id)
+}
+```
diff --git a/mintlify/db/reference/functions/getIndexDevModeConfig.md b/mintlify/db/reference/functions/getIndexDevModeConfig.md
new file mode 100644
index 000000000..f42cc8a5d
--- /dev/null
+++ b/mintlify/db/reference/functions/getIndexDevModeConfig.md
@@ -0,0 +1,18 @@
+---
+id: getIndexDevModeConfig
+title: getIndexDevModeConfig
+---
+
+# Function: getIndexDevModeConfig()
+
+```ts
+function getIndexDevModeConfig(): IndexDevModeConfig;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L59)
+
+Get current dev mode configuration
+
+## Returns
+
+[`IndexDevModeConfig`](/db/reference/interfaces/IndexDevModeConfig)
diff --git a/mintlify/db/reference/functions/getQueryPatterns.md b/mintlify/db/reference/functions/getQueryPatterns.md
new file mode 100644
index 000000000..2e8adba78
--- /dev/null
+++ b/mintlify/db/reference/functions/getQueryPatterns.md
@@ -0,0 +1,28 @@
+---
+id: getQueryPatterns
+title: getQueryPatterns
+---
+
+# Function: getQueryPatterns()
+
+```ts
+function getQueryPatterns(): Map<string, {
+  avgTimeMs: number;
+  fieldPath: string[];
+  queryCount: number;
+  totalTimeMs: number;
+}>;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:164](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L164)
+
+Get query patterns (useful for debugging/testing)
+
+## Returns
+
+`Map`\&lt;`string`, \&#123;
+  `avgTimeMs`: `number`;
+  `fieldPath`: `string`[];
+  `queryCount`: `number`;
+  `totalTimeMs`: `number`;
+\&#125;\>
diff --git a/mintlify/db/reference/functions/gt.md b/mintlify/db/reference/functions/gt.md
new file mode 100644
index 000000000..95401c1f6
--- /dev/null
+++ b/mintlify/db/reference/functions/gt.md
@@ -0,0 +1,90 @@
+---
+id: gt
+title: gt
+---
+
+# Function: gt()
+
+## Call Signature
+
+```ts
+function gt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:150](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L150)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+`ComparisonOperand`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperand`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function gt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:154](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L154)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `string` \| `number`
+
+### Parameters
+
+#### left
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function gt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:158](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L158)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`T`\>
+
+#### right
+
+`any`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/gte.md b/mintlify/db/reference/functions/gte.md
new file mode 100644
index 000000000..84e675d5f
--- /dev/null
+++ b/mintlify/db/reference/functions/gte.md
@@ -0,0 +1,90 @@
+---
+id: gte
+title: gte
+---
+
+# Function: gte()
+
+## Call Signature
+
+```ts
+function gte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:163](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L163)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+`ComparisonOperand`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperand`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function gte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:167](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L167)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `string` \| `number`
+
+### Parameters
+
+#### left
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function gte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:171](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L171)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`T`\>
+
+#### right
+
+`any`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/hasVirtualProps.md b/mintlify/db/reference/functions/hasVirtualProps.md
new file mode 100644
index 000000000..65239922a
--- /dev/null
+++ b/mintlify/db/reference/functions/hasVirtualProps.md
@@ -0,0 +1,36 @@
+---
+id: hasVirtualProps
+title: hasVirtualProps
+---
+
+# Function: hasVirtualProps()
+
+```ts
+function hasVirtualProps(value): value is VirtualRowProps<string | number>;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:145](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L145)
+
+Checks if a value has virtual properties attached.
+
+## Parameters
+
+### value
+
+`unknown`
+
+The value to check
+
+## Returns
+
+value is VirtualRowProps\&lt;string \| number\&gt;
+
+true if the value has virtual properties
+
+## Example
+
+```typescript
+if (hasVirtualProps(row)) {
+  console.log('Synced:', row.$synced)
+}
+```
diff --git a/mintlify/db/reference/functions/ilike.md b/mintlify/db/reference/functions/ilike.md
new file mode 100644
index 000000000..b9df745ef
--- /dev/null
+++ b/mintlify/db/reference/functions/ilike.md
@@ -0,0 +1,26 @@
+---
+id: ilike
+title: ilike
+---
+
+# Function: ilike()
+
+```ts
+function ilike(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:274](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L274)
+
+## Parameters
+
+### left
+
+`StringLike`
+
+### right
+
+`StringLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/inArray.md b/mintlify/db/reference/functions/inArray.md
new file mode 100644
index 000000000..b7951287b
--- /dev/null
+++ b/mintlify/db/reference/functions/inArray.md
@@ -0,0 +1,26 @@
+---
+id: inArray
+title: inArray
+---
+
+# Function: inArray()
+
+```ts
+function inArray(value, array): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:259](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L259)
+
+## Parameters
+
+### value
+
+`ExpressionLike`
+
+### array
+
+`ExpressionLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/isDevModeEnabled.md b/mintlify/db/reference/functions/isDevModeEnabled.md
new file mode 100644
index 000000000..69fe65720
--- /dev/null
+++ b/mintlify/db/reference/functions/isDevModeEnabled.md
@@ -0,0 +1,18 @@
+---
+id: isDevModeEnabled
+title: isDevModeEnabled
+---
+
+# Function: isDevModeEnabled()
+
+```ts
+function isDevModeEnabled(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L66)
+
+Check if dev mode is enabled
+
+## Returns
+
+`boolean`
diff --git a/mintlify/db/reference/functions/isLimitSubset.md b/mintlify/db/reference/functions/isLimitSubset.md
new file mode 100644
index 000000000..eb2b6ab3f
--- /dev/null
+++ b/mintlify/db/reference/functions/isLimitSubset.md
@@ -0,0 +1,46 @@
+---
+id: isLimitSubset
+title: isLimitSubset
+---
+
+# Function: isLimitSubset()
+
+```ts
+function isLimitSubset(subset, superset): boolean;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:773](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L773)
+
+Check if one limit is a subset of another.
+Returns true if the subset limit requirements are satisfied by the superset limit.
+
+Note: This function does NOT consider offset. For offset-aware subset checking,
+use `isOffsetLimitSubset` instead.
+
+## Parameters
+
+### subset
+
+The limit requirement to check
+
+`number` | `undefined`
+
+### superset
+
+The limit that might satisfy the requirement
+
+`number` | `undefined`
+
+## Returns
+
+`boolean`
+
+true if subset is satisfied by superset
+
+## Example
+
+```ts
+isLimitSubset(10, 20) // true (requesting 10 items when 20 are available)
+isLimitSubset(20, 10) // false (requesting 20 items when only 10 are available)
+isLimitSubset(10, undefined) // true (requesting 10 items when unlimited are available)
+```
diff --git a/mintlify/db/reference/functions/isNull.md b/mintlify/db/reference/functions/isNull.md
new file mode 100644
index 000000000..a5c608b9e
--- /dev/null
+++ b/mintlify/db/reference/functions/isNull.md
@@ -0,0 +1,22 @@
+---
+id: isNull
+title: isNull
+---
+
+# Function: isNull()
+
+```ts
+function isNull(value): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:255](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L255)
+
+## Parameters
+
+### value
+
+`ExpressionLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/isOffsetLimitSubset.md b/mintlify/db/reference/functions/isOffsetLimitSubset.md
new file mode 100644
index 000000000..1e3d7e83c
--- /dev/null
+++ b/mintlify/db/reference/functions/isOffsetLimitSubset.md
@@ -0,0 +1,63 @@
+---
+id: isOffsetLimitSubset
+title: isOffsetLimitSubset
+---
+
+# Function: isOffsetLimitSubset()
+
+```ts
+function isOffsetLimitSubset(subset, superset): boolean;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:813](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L813)
+
+Check if one offset+limit range is a subset of another.
+Returns true if the subset range is fully contained within the superset range.
+
+A query with `{limit: 10, offset: 0}` loads rows [0, 10).
+A query with `{limit: 10, offset: 20}` loads rows [20, 30).
+
+For subset to be satisfied by superset:
+- Superset must start at or before subset (superset.offset &lt;= subset.offset)
+- Superset must end at or after subset (superset.offset + superset.limit >= subset.offset + subset.limit)
+
+## Parameters
+
+### subset
+
+The offset+limit requirements to check
+
+#### limit?
+
+`number`
+
+#### offset?
+
+`number`
+
+### superset
+
+The offset+limit that might satisfy the requirements
+
+#### limit?
+
+`number`
+
+#### offset?
+
+`number`
+
+## Returns
+
+`boolean`
+
+true if subset range is fully contained within superset range
+
+## Example
+
+```ts
+isOffsetLimitSubset({ offset: 0, limit: 5 }, { offset: 0, limit: 10 }) // true
+isOffsetLimitSubset({ offset: 5, limit: 5 }, { offset: 0, limit: 10 }) // true (rows 5-9 within 0-9)
+isOffsetLimitSubset({ offset: 5, limit: 10 }, { offset: 0, limit: 10 }) // false (rows 5-14 exceed 0-9)
+isOffsetLimitSubset({ offset: 20, limit: 10 }, { offset: 0, limit: 10 }) // false (rows 20-29 outside 0-9)
+```
diff --git a/mintlify/db/reference/functions/isOrderBySubset.md b/mintlify/db/reference/functions/isOrderBySubset.md
new file mode 100644
index 000000000..09aef4e67
--- /dev/null
+++ b/mintlify/db/reference/functions/isOrderBySubset.md
@@ -0,0 +1,42 @@
+---
+id: isOrderBySubset
+title: isOrderBySubset
+---
+
+# Function: isOrderBySubset()
+
+```ts
+function isOrderBySubset(subset, superset): boolean;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:715](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L715)
+
+Check if one orderBy clause is a subset of another.
+Returns true if the subset ordering requirements are satisfied by the superset ordering.
+
+## Parameters
+
+### subset
+
+The ordering requirements to check
+
+[`OrderBy`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy) | `undefined`
+
+### superset
+
+The ordering that might satisfy the requirements
+
+[`OrderBy`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy) | `undefined`
+
+## Returns
+
+`boolean`
+
+true if subset is satisfied by superset
+
+## Example
+
+```ts
+// Subset is prefix of superset
+isOrderBySubset([{expr: age, asc}], [{expr: age, asc}, {expr: name, desc}]) // true
+```
diff --git a/mintlify/db/reference/functions/isPredicateSubset.md b/mintlify/db/reference/functions/isPredicateSubset.md
new file mode 100644
index 000000000..01d1aca16
--- /dev/null
+++ b/mintlify/db/reference/functions/isPredicateSubset.md
@@ -0,0 +1,44 @@
+---
+id: isPredicateSubset
+title: isPredicateSubset
+---
+
+# Function: isPredicateSubset()
+
+```ts
+function isPredicateSubset(subset, superset): boolean;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:856](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L856)
+
+Check if one predicate (where + orderBy + limit + offset) is a subset of another.
+Returns true if all aspects of the subset predicate are satisfied by the superset.
+
+## Parameters
+
+### subset
+
+[`LoadSubsetOptions`](/db/reference/type-aliases/LoadSubsetOptions)
+
+The predicate requirements to check
+
+### superset
+
+[`LoadSubsetOptions`](/db/reference/type-aliases/LoadSubsetOptions)
+
+The predicate that might satisfy the requirements
+
+## Returns
+
+`boolean`
+
+true if subset is satisfied by superset
+
+## Example
+
+```ts
+isPredicateSubset(
+  { where: gt(ref('age'), val(20)), limit: 10 },
+  { where: gt(ref('age'), val(10)), limit: 20 }
+) // true
+```
diff --git a/mintlify/db/reference/functions/isUndefined.md b/mintlify/db/reference/functions/isUndefined.md
new file mode 100644
index 000000000..f1ea403c9
--- /dev/null
+++ b/mintlify/db/reference/functions/isUndefined.md
@@ -0,0 +1,22 @@
+---
+id: isUndefined
+title: isUndefined
+---
+
+# Function: isUndefined()
+
+```ts
+function isUndefined(value): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:251](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L251)
+
+## Parameters
+
+### value
+
+`ExpressionLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/isWhereSubset.md b/mintlify/db/reference/functions/isWhereSubset.md
new file mode 100644
index 000000000..272aa2d75
--- /dev/null
+++ b/mintlify/db/reference/functions/isWhereSubset.md
@@ -0,0 +1,47 @@
+---
+id: isWhereSubset
+title: isWhereSubset
+---
+
+# Function: isWhereSubset()
+
+```ts
+function isWhereSubset(subset, superset): boolean;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:21](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L21)
+
+Check if one where clause is a logical subset of another.
+Returns true if the subset predicate is more restrictive than (or equal to) the superset predicate.
+
+## Parameters
+
+### subset
+
+The potentially more restrictive predicate
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\> | `undefined`
+
+### superset
+
+The potentially less restrictive predicate
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\> | `undefined`
+
+## Returns
+
+`boolean`
+
+true if subset logically implies superset
+
+## Examples
+
+```ts
+// age > 20 is subset of age > 10 (more restrictive)
+isWhereSubset(gt(ref('age'), val(20)), gt(ref('age'), val(10))) // true
+```
+
+```ts
+// age > 10 AND name = 'X' is subset of age > 10 (more conditions)
+isWhereSubset(and(gt(ref('age'), val(10)), eq(ref('name'), val('X'))), gt(ref('age'), val(10))) // true
+```
diff --git a/mintlify/db/reference/functions/length.md b/mintlify/db/reference/functions/length.md
new file mode 100644
index 000000000..6f7ba17a3
--- /dev/null
+++ b/mintlify/db/reference/functions/length.md
@@ -0,0 +1,28 @@
+---
+id: length
+title: length
+---
+
+# Function: length()
+
+```ts
+function length<T>(arg): NumericFunctionReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:295](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L295)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`NumericFunctionReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/like.md b/mintlify/db/reference/functions/like.md
new file mode 100644
index 000000000..caa5b4f90
--- /dev/null
+++ b/mintlify/db/reference/functions/like.md
@@ -0,0 +1,26 @@
+---
+id: like
+title: like
+---
+
+# Function: like()
+
+```ts
+function like(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:266](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L266)
+
+## Parameters
+
+### left
+
+`StringLike`
+
+### right
+
+`StringLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/liveQueryCollectionOptions.md b/mintlify/db/reference/functions/liveQueryCollectionOptions.md
new file mode 100644
index 000000000..1a36a0409
--- /dev/null
+++ b/mintlify/db/reference/functions/liveQueryCollectionOptions.md
@@ -0,0 +1,63 @@
+---
+id: liveQueryCollectionOptions
+title: liveQueryCollectionOptions
+---
+
+# Function: liveQueryCollectionOptions()
+
+```ts
+function liveQueryCollectionOptions<TQuery, TContext, TResult>(config): CollectionConfigForContext<TContext, TResult, {
+}> & object;
+```
+
+Defined in: [packages/db/src/query/live-query-collection.ts:72](https://github.com/TanStack/db/blob/main/packages/db/src/query/live-query-collection.ts#L72)
+
+Creates live query collection options for use with createCollection
+
+## Type Parameters
+
+### TQuery
+
+`TQuery` *extends* [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context) = [`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>
+
+### TResult
+
+`TResult` *extends* `object` = `RootQueryResult`\&lt;`TContext`\>
+
+## Parameters
+
+### config
+
+[`LiveQueryCollectionConfig`](/db/reference/interfaces/LiveQueryCollectionConfig)\&lt;`TContext`, `TResult`\> & `object`
+
+Configuration options for the live query collection
+
+## Returns
+
+`CollectionConfigForContext`\&lt;`TContext`, `TResult`, \&#123;
+\&#125;\> & `object`
+
+Collection options that can be passed to createCollection
+
+## Example
+
+```typescript
+const options = liveQueryCollectionOptions({
+  // id is optional - will auto-generate if not provided
+  query: (q) => q
+    .from({ post: postsCollection })
+    .where(({ post }) => eq(post.published, true))
+    .select(({ post }) => ({
+      id: post.id,
+      title: post.title,
+      content: post.content,
+    })),
+  // getKey is optional - will use stream key if not provided
+})
+
+const collection = createCollection(options)
+```
diff --git a/mintlify/db/reference/functions/localOnlyCollectionOptions.md b/mintlify/db/reference/functions/localOnlyCollectionOptions.md
new file mode 100644
index 000000000..ea866b849
--- /dev/null
+++ b/mintlify/db/reference/functions/localOnlyCollectionOptions.md
@@ -0,0 +1,230 @@
+---
+id: localOnlyCollectionOptions
+title: localOnlyCollectionOptions
+---
+
+# Function: localOnlyCollectionOptions()
+
+## Call Signature
+
+```ts
+function localOnlyCollectionOptions<T, TKey>(config): CollectionConfig<InferSchemaOutput<T>, TKey, T, LocalOnlyCollectionUtils> & object & object;
+```
+
+Defined in: [packages/db/src/local-only.ts:150](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L150)
+
+Creates Local-only collection options for use with a standard Collection
+
+This is an in-memory collection that doesn't sync with external sources but uses a loopback sync config
+that immediately "syncs" all optimistic changes to the collection, making them permanent.
+Perfect for local-only data that doesn't need persistence or external synchronization.
+
+**Using with Manual Transactions:**
+
+For manual transactions, you must call `utils.acceptMutations()` in your transaction's `mutationFn`
+to persist changes made during `tx.mutate()`. This is necessary because local-only collections
+don't participate in the standard mutation handler flow for manual transactions.
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key returned by getKey
+
+### Parameters
+
+#### config
+
+[`LocalOnlyCollectionConfig`](/db/reference/interfaces/LocalOnlyCollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `T`, `TKey`\> & `object`
+
+Configuration options for the Local-only collection
+
+### Returns
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, [`LocalOnlyCollectionUtils`](/db/reference/interfaces/LocalOnlyCollectionUtils)\> & `object` & `object`
+
+Collection options with utilities including acceptMutations
+
+### Examples
+
+```ts
+// Basic local-only collection
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Local-only collection with initial data
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+    initialData: [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+    ],
+  })
+)
+```
+
+```ts
+// Local-only collection with mutation handlers
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      console.log('Item inserted:', transaction.mutations[0].modified)
+      // Custom logic after insert
+    },
+  })
+)
+```
+
+```ts
+// Using with manual transactions
+const localData = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Use local data in API call
+    const localMutations = transaction.mutations.filter(m => m.collection === localData)
+    await api.save({ metadata: localMutations[0]?.modified })
+
+    // Persist local-only mutations after API success
+    localData.utils.acceptMutations(transaction)
+  }
+})
+
+tx.mutate(() => {
+  localData.insert({ id: 1, data: 'metadata' })
+  apiCollection.insert({ id: 2, data: 'main data' })
+})
+
+await tx.commit()
+```
+
+## Call Signature
+
+```ts
+function localOnlyCollectionOptions<T, TKey>(config): CollectionConfig<T, TKey, never, LocalOnlyCollectionUtils> & object & object;
+```
+
+Defined in: [packages/db/src/local-only.ts:163](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L163)
+
+Creates Local-only collection options for use with a standard Collection
+
+This is an in-memory collection that doesn't sync with external sources but uses a loopback sync config
+that immediately "syncs" all optimistic changes to the collection, making them permanent.
+Perfect for local-only data that doesn't need persistence or external synchronization.
+
+**Using with Manual Transactions:**
+
+For manual transactions, you must call `utils.acceptMutations()` in your transaction's `mutationFn`
+to persist changes made during `tx.mutate()`. This is necessary because local-only collections
+don't participate in the standard mutation handler flow for manual transactions.
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+The schema type if a schema is provided, otherwise the type of items in the collection
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key returned by getKey
+
+### Parameters
+
+#### config
+
+[`LocalOnlyCollectionConfig`](/db/reference/interfaces/LocalOnlyCollectionConfig)\&lt;`T`, `never`, `TKey`\> & `object`
+
+Configuration options for the Local-only collection
+
+### Returns
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, [`LocalOnlyCollectionUtils`](/db/reference/interfaces/LocalOnlyCollectionUtils)\> & `object` & `object`
+
+Collection options with utilities including acceptMutations
+
+### Examples
+
+```ts
+// Basic local-only collection
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Local-only collection with initial data
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+    initialData: [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+    ],
+  })
+)
+```
+
+```ts
+// Local-only collection with mutation handlers
+const collection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      console.log('Item inserted:', transaction.mutations[0].modified)
+      // Custom logic after insert
+    },
+  })
+)
+```
+
+```ts
+// Using with manual transactions
+const localData = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (item) => item.id,
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Use local data in API call
+    const localMutations = transaction.mutations.filter(m => m.collection === localData)
+    await api.save({ metadata: localMutations[0]?.modified })
+
+    // Persist local-only mutations after API success
+    localData.utils.acceptMutations(transaction)
+  }
+})
+
+tx.mutate(() => {
+  localData.insert({ id: 1, data: 'metadata' })
+  apiCollection.insert({ id: 2, data: 'main data' })
+})
+
+await tx.commit()
+```
diff --git a/mintlify/db/reference/functions/localStorageCollectionOptions.md b/mintlify/db/reference/functions/localStorageCollectionOptions.md
new file mode 100644
index 000000000..2b53be88d
--- /dev/null
+++ b/mintlify/db/reference/functions/localStorageCollectionOptions.md
@@ -0,0 +1,236 @@
+---
+id: localStorageCollectionOptions
+title: localStorageCollectionOptions
+---
+
+# Function: localStorageCollectionOptions()
+
+## Call Signature
+
+```ts
+function localStorageCollectionOptions<T, TKey>(config): CollectionConfig<InferSchemaOutput<T>, TKey, T, LocalStorageCollectionUtils> & object;
+```
+
+Defined in: [packages/db/src/local-storage.ts:317](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L317)
+
+Creates localStorage collection options for use with a standard Collection
+
+This function creates a collection that persists data to localStorage/sessionStorage
+and synchronizes changes across browser tabs using storage events.
+
+**Fallback Behavior:**
+
+When localStorage is not available (e.g., in server-side rendering environments),
+this function automatically falls back to an in-memory storage implementation.
+This prevents errors during module initialization and allows the collection to
+work in any environment, though data will not persist across page reloads or
+be shared across tabs when using the in-memory fallback.
+
+**Using with Manual Transactions:**
+
+For manual transactions, you must call `utils.acceptMutations()` in your transaction's `mutationFn`
+to persist changes made during `tx.mutate()`. This is necessary because local-storage collections
+don't participate in the standard mutation handler flow for manual transactions.
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### Parameters
+
+#### config
+
+[`LocalStorageCollectionConfig`](/db/reference/interfaces/LocalStorageCollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `T`, `TKey`\> & `object`
+
+Configuration options for the localStorage collection
+
+### Returns
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;[`InferSchemaOutput`](/db/reference/type-aliases/InferSchemaOutput)\&lt;`T`\>, `TKey`, `T`, [`LocalStorageCollectionUtils`](/db/reference/interfaces/LocalStorageCollectionUtils)\> & `object`
+
+Collection options with utilities including clearStorage, getStorageSize, and acceptMutations
+
+### Examples
+
+```ts
+// Basic localStorage collection
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// localStorage collection with custom storage
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    storage: window.sessionStorage, // Use sessionStorage instead
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// localStorage collection with mutation handlers
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      console.log('Item inserted:', transaction.mutations[0].modified)
+    },
+  })
+)
+```
+
+```ts
+// Using with manual transactions
+const localSettings = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'user-settings',
+    getKey: (item) => item.id,
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Use settings data in API call
+    const settingsMutations = transaction.mutations.filter(m => m.collection === localSettings)
+    await api.updateUserProfile({ settings: settingsMutations[0]?.modified })
+
+    // Persist local-storage mutations after API success
+    localSettings.utils.acceptMutations(transaction)
+  }
+})
+
+tx.mutate(() => {
+  localSettings.insert({ id: 'theme', value: 'dark' })
+  apiCollection.insert({ id: 2, data: 'profile data' })
+})
+
+await tx.commit()
+```
+
+## Call Signature
+
+```ts
+function localStorageCollectionOptions<T, TKey>(config): CollectionConfig<T, TKey, never, LocalStorageCollectionUtils> & object;
+```
+
+Defined in: [packages/db/src/local-storage.ts:337](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L337)
+
+Creates localStorage collection options for use with a standard Collection
+
+This function creates a collection that persists data to localStorage/sessionStorage
+and synchronizes changes across browser tabs using storage events.
+
+**Fallback Behavior:**
+
+When localStorage is not available (e.g., in server-side rendering environments),
+this function automatically falls back to an in-memory storage implementation.
+This prevents errors during module initialization and allows the collection to
+work in any environment, though data will not persist across page reloads or
+be shared across tabs when using the in-memory fallback.
+
+**Using with Manual Transactions:**
+
+For manual transactions, you must call `utils.acceptMutations()` in your transaction's `mutationFn`
+to persist changes made during `tx.mutate()`. This is necessary because local-storage collections
+don't participate in the standard mutation handler flow for manual transactions.
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### Parameters
+
+#### config
+
+[`LocalStorageCollectionConfig`](/db/reference/interfaces/LocalStorageCollectionConfig)\&lt;`T`, `never`, `TKey`\> & `object`
+
+Configuration options for the localStorage collection
+
+### Returns
+
+[`CollectionConfig`](/db/reference/interfaces/CollectionConfig)\&lt;`T`, `TKey`, `never`, [`LocalStorageCollectionUtils`](/db/reference/interfaces/LocalStorageCollectionUtils)\> & `object`
+
+Collection options with utilities including clearStorage, getStorageSize, and acceptMutations
+
+### Examples
+
+```ts
+// Basic localStorage collection
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// localStorage collection with custom storage
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    storage: window.sessionStorage, // Use sessionStorage instead
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// localStorage collection with mutation handlers
+const collection = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'todos',
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      console.log('Item inserted:', transaction.mutations[0].modified)
+    },
+  })
+)
+```
+
+```ts
+// Using with manual transactions
+const localSettings = createCollection(
+  localStorageCollectionOptions({
+    storageKey: 'user-settings',
+    getKey: (item) => item.id,
+  })
+)
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Use settings data in API call
+    const settingsMutations = transaction.mutations.filter(m => m.collection === localSettings)
+    await api.updateUserProfile({ settings: settingsMutations[0]?.modified })
+
+    // Persist local-storage mutations after API success
+    localSettings.utils.acceptMutations(transaction)
+  }
+})
+
+tx.mutate(() => {
+  localSettings.insert({ id: 'theme', value: 'dark' })
+  apiCollection.insert({ id: 2, data: 'profile data' })
+})
+
+await tx.commit()
+```
diff --git a/mintlify/db/reference/functions/lower.md b/mintlify/db/reference/functions/lower.md
new file mode 100644
index 000000000..958a041c4
--- /dev/null
+++ b/mintlify/db/reference/functions/lower.md
@@ -0,0 +1,28 @@
+---
+id: lower
+title: lower
+---
+
+# Function: lower()
+
+```ts
+function lower<T>(arg): StringFunctionReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:289](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L289)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`StringFunctionReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/lt.md b/mintlify/db/reference/functions/lt.md
new file mode 100644
index 000000000..5c181f465
--- /dev/null
+++ b/mintlify/db/reference/functions/lt.md
@@ -0,0 +1,90 @@
+---
+id: lt
+title: lt
+---
+
+# Function: lt()
+
+## Call Signature
+
+```ts
+function lt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:176](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L176)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+`ComparisonOperand`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperand`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function lt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:180](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L180)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `string` \| `number`
+
+### Parameters
+
+#### left
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function lt<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:184](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L184)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`T`\>
+
+#### right
+
+`any`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/lte.md b/mintlify/db/reference/functions/lte.md
new file mode 100644
index 000000000..71a6bd6c9
--- /dev/null
+++ b/mintlify/db/reference/functions/lte.md
@@ -0,0 +1,90 @@
+---
+id: lte
+title: lte
+---
+
+# Function: lte()
+
+## Call Signature
+
+```ts
+function lte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:189](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L189)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+`ComparisonOperand`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperand`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function lte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:193](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L193)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `string` \| `number`
+
+### Parameters
+
+#### left
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+#### right
+
+`ComparisonOperandPrimitive`\&lt;`T`\>
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function lte<T>(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:197](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L197)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### left
+
+[`Aggregate`](/db/reference/@tanstack/namespaces/IR/classes/Aggregate)\&lt;`T`\>
+
+#### right
+
+`any`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/materialize.md b/mintlify/db/reference/functions/materialize.md
new file mode 100644
index 000000000..2a182e857
--- /dev/null
+++ b/mintlify/db/reference/functions/materialize.md
@@ -0,0 +1,58 @@
+---
+id: materialize
+title: materialize
+---
+
+# Function: materialize()
+
+```ts
+function materialize<TContext>(query): MaterializeWrapper<GetRawResult<TContext>, TContext extends SingleResult ? true : false>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:848](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L848)
+
+Materialize an includes subquery into a plain value on the parent row.
+
+- For multi-row subqueries, the parent receives an `Array<T>` snapshot
+  (equivalent to `toArray()`).
+- For `findOne()` subqueries, the parent receives a single `T | undefined`
+  value — `undefined` when no child matches.
+
+The snapshot updates reactively: parent rows re-emit when the underlying
+children change.
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### query
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+## Returns
+
+`MaterializeWrapper`\&lt;`GetRawResult`\&lt;`TContext`\>, `TContext` *extends* [`SingleResult`](/db/reference/type-aliases/SingleResult) ? `true` : `false`\>
+
+## Example
+
+```ts
+// Multi-row: produces Array<Issue> on each project
+select(({ p }) => ({
+  ...p,
+  issues: materialize(
+    q.from({ i: issues }).where(({ i }) => eq(i.projectId, p.id)),
+  ),
+}))
+
+// Singleton: produces Author | undefined on each post
+select(({ p }) => ({
+  ...p,
+  author: materialize(
+    q.from({ a: authors }).where(({ a }) => eq(a.id, p.authorId)).findOne(),
+  ),
+}))
+```
diff --git a/mintlify/db/reference/functions/max.md b/mintlify/db/reference/functions/max.md
new file mode 100644
index 000000000..b54c239a2
--- /dev/null
+++ b/mintlify/db/reference/functions/max.md
@@ -0,0 +1,28 @@
+---
+id: max
+title: max
+---
+
+# Function: max()
+
+```ts
+function max<T>(arg): AggregateReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:659](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L659)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`AggregateReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/min.md b/mintlify/db/reference/functions/min.md
new file mode 100644
index 000000000..bec1c6a5a
--- /dev/null
+++ b/mintlify/db/reference/functions/min.md
@@ -0,0 +1,28 @@
+---
+id: min
+title: min
+---
+
+# Function: min()
+
+```ts
+function min<T>(arg): AggregateReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:655](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L655)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`AggregateReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/minusWherePredicates.md b/mintlify/db/reference/functions/minusWherePredicates.md
new file mode 100644
index 000000000..abb1b5271
--- /dev/null
+++ b/mintlify/db/reference/functions/minusWherePredicates.md
@@ -0,0 +1,73 @@
+---
+id: minusWherePredicates
+title: minusWherePredicates
+---
+
+# Function: minusWherePredicates()
+
+```ts
+function minusWherePredicates(fromPredicate, subtractPredicate): 
+  | BasicExpression<boolean>
+  | null;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:340](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L340)
+
+Compute the difference between two where predicates: `fromPredicate AND NOT(subtractPredicate)`.
+Returns the simplified predicate, or null if the difference cannot be simplified
+(in which case the caller should fetch the full fromPredicate).
+
+## Parameters
+
+### fromPredicate
+
+The predicate to subtract from
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\> | `undefined`
+
+### subtractPredicate
+
+The predicate to subtract
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\> | `undefined`
+
+## Returns
+
+  \| [`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+  \| `null`
+
+The simplified difference, or null if cannot be simplified
+
+## Examples
+
+```ts
+// Range difference
+minusWherePredicates(
+  gt(ref('age'), val(10)),      // age > 10
+  gt(ref('age'), val(20))       // age > 20
+) // → age > 10 AND age <= 20
+```
+
+```ts
+// Set difference
+minusWherePredicates(
+  inOp(ref('status'), ['A', 'B', 'C', 'D']),  // status IN ['A','B','C','D']
+  inOp(ref('status'), ['B', 'C'])             // status IN ['B','C']
+) // → status IN ['A', 'D']
+```
+
+```ts
+// Common conditions
+minusWherePredicates(
+  and(gt(ref('age'), val(10)), eq(ref('status'), val('active'))),  // age > 10 AND status = 'active'
+  and(gt(ref('age'), val(20)), eq(ref('status'), val('active')))   // age > 20 AND status = 'active'
+) // → age > 10 AND age <= 20 AND status = 'active'
+```
+
+```ts
+// Complete overlap - empty result
+minusWherePredicates(
+  gt(ref('age'), val(20)),     // age > 20
+  gt(ref('age'), val(10))      // age > 10
+) // → {type: 'val', value: false} (empty set)
+```
diff --git a/mintlify/db/reference/functions/multiply.md b/mintlify/db/reference/functions/multiply.md
new file mode 100644
index 000000000..868c04b5d
--- /dev/null
+++ b/mintlify/db/reference/functions/multiply.md
@@ -0,0 +1,36 @@
+---
+id: multiply
+title: multiply
+---
+
+# Function: multiply()
+
+```ts
+function multiply<T1, T2>(left, right): BinaryNumericReturnType;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:621](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L621)
+
+## Type Parameters
+
+### T1
+
+`T1` *extends* `ExpressionLike`
+
+### T2
+
+`T2` *extends* `ExpressionLike`
+
+## Parameters
+
+### left
+
+`T1`
+
+### right
+
+`T2`
+
+## Returns
+
+`BinaryNumericReturnType`
diff --git a/mintlify/db/reference/functions/not.md b/mintlify/db/reference/functions/not.md
new file mode 100644
index 000000000..9ef3fd349
--- /dev/null
+++ b/mintlify/db/reference/functions/not.md
@@ -0,0 +1,22 @@
+---
+id: not
+title: not
+---
+
+# Function: not()
+
+```ts
+function not(value): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:246](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L246)
+
+## Parameters
+
+### value
+
+`ExpressionLike`
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/optimizeExpressionWithIndexes.md b/mintlify/db/reference/functions/optimizeExpressionWithIndexes.md
new file mode 100644
index 000000000..0171ff784
--- /dev/null
+++ b/mintlify/db/reference/functions/optimizeExpressionWithIndexes.md
@@ -0,0 +1,38 @@
+---
+id: optimizeExpressionWithIndexes
+title: optimizeExpressionWithIndexes
+---
+
+# Function: optimizeExpressionWithIndexes()
+
+```ts
+function optimizeExpressionWithIndexes<T, TKey>(expression, collection): OptimizationResult<TKey>;
+```
+
+Defined in: [packages/db/src/utils/index-optimization.ts:196](https://github.com/TanStack/db/blob/main/packages/db/src/utils/index-optimization.ts#L196)
+
+Optimizes a query expression using available indexes to find matching keys
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
+
+## Parameters
+
+### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+### collection
+
+[`CollectionLike`](/db/reference/interfaces/CollectionLike)\&lt;`T`, `TKey`\>
+
+## Returns
+
+`OptimizationResult`\&lt;`TKey`\>
diff --git a/mintlify/db/reference/functions/or.md b/mintlify/db/reference/functions/or.md
new file mode 100644
index 000000000..d0f7a8792
--- /dev/null
+++ b/mintlify/db/reference/functions/or.md
@@ -0,0 +1,57 @@
+---
+id: or
+title: or
+---
+
+# Function: or()
+
+## Call Signature
+
+```ts
+function or(left, right): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:225](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L225)
+
+### Parameters
+
+#### left
+
+`ExpressionLike`
+
+#### right
+
+`ExpressionLike`
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+## Call Signature
+
+```ts
+function or(
+   left, 
+   right, ...
+rest): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:229](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L229)
+
+### Parameters
+
+#### left
+
+`ExpressionLike`
+
+#### right
+
+`ExpressionLike`
+
+#### rest
+
+...`ExpressionLike`[]
+
+### Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
diff --git a/mintlify/db/reference/functions/parseLoadSubsetOptions.md b/mintlify/db/reference/functions/parseLoadSubsetOptions.md
new file mode 100644
index 000000000..cd6d6505f
--- /dev/null
+++ b/mintlify/db/reference/functions/parseLoadSubsetOptions.md
@@ -0,0 +1,68 @@
+---
+id: parseLoadSubsetOptions
+title: parseLoadSubsetOptions
+---
+
+# Function: parseLoadSubsetOptions()
+
+```ts
+function parseLoadSubsetOptions(options): object;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:499](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L499)
+
+Convenience function to get all LoadSubsetOptions in a pre-parsed format.
+Good starting point for simple use cases.
+
+## Parameters
+
+### options
+
+The LoadSubsetOptions from ctx.meta
+
+\&#123;
+`limit?`: `number`;
+`orderBy?`: [`OrderBy`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy);
+`where?`: `BasicExpression`\&lt;`boolean`\>;
+\&#125; | `null` | `undefined`
+
+## Returns
+
+`object`
+
+Pre-parsed filters, sorts, and limit
+
+### filters
+
+```ts
+filters: SimpleComparison[];
+```
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+### sorts
+
+```ts
+sorts: ParsedOrderBy[];
+```
+
+## Example
+
+```typescript
+queryFn: async (ctx) => {
+  const parsed = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
+
+  // Convert to your API format
+  return api.getProducts({
+    ...Object.fromEntries(
+      parsed.filters.map(f => [`${f.field.join('.')}_${f.operator}`, f.value])
+    ),
+    sort: parsed.sorts.map(s => `${s.field.join('.')}:${s.direction}`).join(','),
+    limit: parsed.limit
+  })
+}
+```
diff --git a/mintlify/db/reference/functions/parseOrderByExpression.md b/mintlify/db/reference/functions/parseOrderByExpression.md
new file mode 100644
index 000000000..566f08aa1
--- /dev/null
+++ b/mintlify/db/reference/functions/parseOrderByExpression.md
@@ -0,0 +1,38 @@
+---
+id: parseOrderByExpression
+title: parseOrderByExpression
+---
+
+# Function: parseOrderByExpression()
+
+```ts
+function parseOrderByExpression(orderBy): ParsedOrderBy[];
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:265](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L265)
+
+Parses an ORDER BY expression into a simple array of sort specifications.
+
+## Parameters
+
+### orderBy
+
+The ORDER BY expression array
+
+[`OrderBy`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy) | `null` | `undefined`
+
+## Returns
+
+[`ParsedOrderBy`](/db/reference/interfaces/ParsedOrderBy)[]
+
+Array of parsed order by specifications
+
+## Example
+
+```typescript
+const sorts = parseOrderByExpression(orderBy)
+// Returns: [
+//   { field: ['category'], direction: 'asc', nulls: 'last' },
+//   { field: ['price'], direction: 'desc', nulls: 'last' }
+// ]
+```
diff --git a/mintlify/db/reference/functions/parseWhereExpression.md b/mintlify/db/reference/functions/parseWhereExpression.md
new file mode 100644
index 000000000..8a9225791
--- /dev/null
+++ b/mintlify/db/reference/functions/parseWhereExpression.md
@@ -0,0 +1,71 @@
+---
+id: parseWhereExpression
+title: parseWhereExpression
+---
+
+# Function: parseWhereExpression()
+
+```ts
+function parseWhereExpression<T>(expr, options): T | null;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:201](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L201)
+
+Parses a WHERE expression into a custom format using provided handlers.
+
+This is the main helper for converting TanStack DB where clauses into your API's filter format.
+You provide handlers for each operator, and this function traverses the expression tree
+and calls the appropriate handlers.
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Parameters
+
+### expr
+
+The WHERE expression to parse
+
+`BasicExpression`\&lt;`boolean`\> | `null` | `undefined`
+
+### options
+
+[`ParseWhereOptions`](/db/reference/interfaces/ParseWhereOptions)\&lt;`T`\>
+
+Configuration with handler functions for each operator
+
+## Returns
+
+`T` \| `null`
+
+The parsed result in your custom format
+
+## Examples
+
+```typescript
+// REST API with query parameters
+const filters = parseWhereExpression(where, {
+  handlers: {
+    eq: (field, value) => ({ [field.join('.')]: value }),
+    lt: (field, value) => ({ [`${field.join('.')}_lt`]: value }),
+    gt: (field, value) => ({ [`${field.join('.')}_gt`]: value }),
+    and: (...filters) => Object.assign({}, ...filters),
+    or: (...filters) => ({ $or: filters })
+  }
+})
+// Returns: { category: 'electronics', price_lt: 100 }
+```
+
+```typescript
+// GraphQL where clause
+const where = parseWhereExpression(whereExpr, {
+  handlers: {
+    eq: (field, value) => ({ [field.join('_')]: { _eq: value } }),
+    lt: (field, value) => ({ [field.join('_')]: { _lt: value } }),
+    and: (...filters) => ({ _and: filters })
+  }
+})
+```
diff --git a/mintlify/db/reference/functions/queryOnce.md b/mintlify/db/reference/functions/queryOnce.md
new file mode 100644
index 000000000..303cba582
--- /dev/null
+++ b/mintlify/db/reference/functions/queryOnce.md
@@ -0,0 +1,104 @@
+---
+id: queryOnce
+title: queryOnce
+---
+
+# Function: queryOnce()
+
+## Call Signature
+
+```ts
+function queryOnce<TQueryFn, TQuery>(queryFn): Promise<InferResultType<ExtractContext<TQuery>>>;
+```
+
+Defined in: [packages/db/src/query/query-once.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/query/query-once.ts#L59)
+
+Executes a one-shot query and returns the results as an array.
+
+This function creates a live query collection, preloads it, extracts the results,
+and automatically cleans up the collection. It's ideal for:
+- AI/LLM context building
+- Data export
+- Background processing
+- Testing
+
+### Type Parameters
+
+#### TQueryFn
+
+`TQueryFn` *extends* (`q`) => [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>
+
+#### TQuery
+
+`TQuery` *extends* [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\> = `ReturnType`\&lt;`TQueryFn`\>
+
+### Parameters
+
+#### queryFn
+
+`TQueryFn` & `RootQueryFn`\&lt;`TQuery`\>
+
+A function that receives the query builder and returns a query
+
+### Returns
+
+`Promise`\&lt;[`InferResultType`](/db/reference/type-aliases/InferResultType)\&lt;[`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>\>\>
+
+A promise that resolves to an array of query results
+
+### Example
+
+```typescript
+// Basic query
+const users = await queryOnce((q) =>
+  q.from({ user: usersCollection })
+)
+
+// With filtering and projection
+const activeUserNames = await queryOnce((q) =>
+  q.from({ user: usersCollection })
+   .where(({ user }) => eq(user.active, true))
+   .select(({ user }) => ({ name: user.name }))
+)
+```
+
+## Call Signature
+
+```ts
+function queryOnce<TQuery>(config): Promise<InferResultType<ExtractContext<TQuery>>>;
+```
+
+Defined in: [packages/db/src/query/query-once.ts:83](https://github.com/TanStack/db/blob/main/packages/db/src/query/query-once.ts#L83)
+
+Executes a one-shot query using a configuration object.
+
+### Type Parameters
+
+#### TQuery
+
+`TQuery` *extends* [`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>
+
+### Parameters
+
+#### config
+
+[`QueryOnceConfig`](/db/reference/interfaces/QueryOnceConfig)\&lt;[`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>\> & `object`
+
+Configuration object with the query function
+
+### Returns
+
+`Promise`\&lt;[`InferResultType`](/db/reference/type-aliases/InferResultType)\&lt;[`ExtractContext`](/db/reference/type-aliases/ExtractContext)\&lt;`TQuery`\>\>\>
+
+A promise that resolves to an array of query results
+
+### Example
+
+```typescript
+const recentOrders = await queryOnce({
+  query: (q) =>
+    q.from({ order: ordersCollection })
+     .orderBy(({ order }) => desc(order.createdAt))
+     .limit(100),
+})
+```
diff --git a/mintlify/db/reference/functions/queueStrategy.md b/mintlify/db/reference/functions/queueStrategy.md
new file mode 100644
index 000000000..f1f334738
--- /dev/null
+++ b/mintlify/db/reference/functions/queueStrategy.md
@@ -0,0 +1,69 @@
+---
+id: queueStrategy
+title: queueStrategy
+---
+
+# Function: queueStrategy()
+
+```ts
+function queueStrategy(options?): QueueStrategy;
+```
+
+Defined in: [packages/db/src/strategies/queueStrategy.ts:52](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/queueStrategy.ts#L52)
+
+Creates a queue strategy that processes all mutations in order with proper serialization.
+
+Unlike other strategies that may drop executions, queue ensures every
+mutation is attempted sequentially. Each transaction commit completes before
+the next one starts. Useful when data consistency is critical and
+every operation must be attempted in order.
+
+**Error handling behavior:**
+- If a mutation fails, it is NOT automatically retried - the transaction transitions to "failed" state
+- Failed mutations surface their error via `transaction.isPersisted.promise` (which will reject)
+- Subsequent mutations continue processing - a single failure does not block the queue
+- Each mutation is independent; there is no all-or-nothing transaction semantics
+
+## Parameters
+
+### options?
+
+[`QueueStrategyOptions`](/db/reference/interfaces/QueueStrategyOptions)
+
+Configuration for queue behavior (FIFO/LIFO, timing, size limits)
+
+## Returns
+
+[`QueueStrategy`](/db/reference/interfaces/QueueStrategy)
+
+A queue strategy instance
+
+## Examples
+
+```ts
+// FIFO queue - process in order received
+const mutate = usePacedMutations({
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: queueStrategy({
+    wait: 200,
+    addItemsTo: 'back',
+    getItemsFrom: 'front'
+  })
+})
+```
+
+```ts
+// LIFO queue - process most recent first
+const mutate = usePacedMutations({
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: queueStrategy({
+    wait: 200,
+    addItemsTo: 'back',
+    getItemsFrom: 'back'
+  })
+})
+```
diff --git a/mintlify/db/reference/functions/safeRandomUUID.md b/mintlify/db/reference/functions/safeRandomUUID.md
new file mode 100644
index 000000000..145a79caa
--- /dev/null
+++ b/mintlify/db/reference/functions/safeRandomUUID.md
@@ -0,0 +1,25 @@
+---
+id: safeRandomUUID
+title: safeRandomUUID
+---
+
+# Function: safeRandomUUID()
+
+```ts
+function safeRandomUUID(): string;
+```
+
+Defined in: [packages/db/src/utils/uuid.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/utils/uuid.ts#L11)
+
+Returns a RFC 4122 version 4 UUID.
+
+Prefers `crypto.randomUUID()` when available. In non-secure browser contexts
+(e.g. a dev server accessed via a LAN IP over HTTP) `crypto.randomUUID` is
+`undefined`, so this falls back to building a UUIDv4 from
+`crypto.getRandomValues`. Throws if neither API is available.
+
+See https://github.com/TanStack/db/issues/1541.
+
+## Returns
+
+`string`
diff --git a/mintlify/db/reference/functions/subtract.md b/mintlify/db/reference/functions/subtract.md
new file mode 100644
index 000000000..3ae204d17
--- /dev/null
+++ b/mintlify/db/reference/functions/subtract.md
@@ -0,0 +1,36 @@
+---
+id: subtract
+title: subtract
+---
+
+# Function: subtract()
+
+```ts
+function subtract<T1, T2>(left, right): BinaryNumericReturnType;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:611](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L611)
+
+## Type Parameters
+
+### T1
+
+`T1` *extends* `ExpressionLike`
+
+### T2
+
+`T2` *extends* `ExpressionLike`
+
+## Parameters
+
+### left
+
+`T1`
+
+### right
+
+`T2`
+
+## Returns
+
+`BinaryNumericReturnType`
diff --git a/mintlify/db/reference/functions/sum.md b/mintlify/db/reference/functions/sum.md
new file mode 100644
index 000000000..2b560df1e
--- /dev/null
+++ b/mintlify/db/reference/functions/sum.md
@@ -0,0 +1,28 @@
+---
+id: sum
+title: sum
+---
+
+# Function: sum()
+
+```ts
+function sum<T>(arg): AggregateReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:651](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L651)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`AggregateReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/throttleStrategy.md b/mintlify/db/reference/functions/throttleStrategy.md
new file mode 100644
index 000000000..af9ffb109
--- /dev/null
+++ b/mintlify/db/reference/functions/throttleStrategy.md
@@ -0,0 +1,65 @@
+---
+id: throttleStrategy
+title: throttleStrategy
+---
+
+# Function: throttleStrategy()
+
+```ts
+function throttleStrategy(options): ThrottleStrategy;
+```
+
+Defined in: [packages/db/src/strategies/throttleStrategy.ts:48](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/throttleStrategy.ts#L48)
+
+Creates a throttle strategy that ensures transactions are evenly spaced
+over time.
+
+Provides smooth, controlled execution patterns ideal for UI updates like
+sliders, progress bars, or scroll handlers where you want consistent
+execution timing.
+
+## Parameters
+
+### options
+
+[`ThrottleStrategyOptions`](/db/reference/interfaces/ThrottleStrategyOptions)
+
+Configuration for throttle behavior
+
+## Returns
+
+[`ThrottleStrategy`](/db/reference/interfaces/ThrottleStrategy)
+
+A throttle strategy instance
+
+## Examples
+
+```ts
+// Throttle slider updates to every 200ms
+const mutate = usePacedMutations({
+  onMutate: (volume) => {
+    settingsCollection.update('volume', draft => { draft.value = volume })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.updateVolume(transaction.mutations)
+  },
+  strategy: throttleStrategy({ wait: 200 })
+})
+```
+
+```ts
+// Throttle with leading and trailing execution
+const mutate = usePacedMutations({
+  onMutate: (data) => {
+    collection.update(id, draft => { Object.assign(draft, data) })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.save(transaction.mutations)
+  },
+  strategy: throttleStrategy({
+    wait: 500,
+    leading: true,
+    trailing: true
+  })
+})
+```
diff --git a/mintlify/db/reference/functions/toArray.md b/mintlify/db/reference/functions/toArray.md
new file mode 100644
index 000000000..7ad5f32cf
--- /dev/null
+++ b/mintlify/db/reference/functions/toArray.md
@@ -0,0 +1,28 @@
+---
+id: toArray
+title: toArray
+---
+
+# Function: toArray()
+
+```ts
+function toArray<TContext>(query): ToArrayWrapper<GetRawResult<TContext>>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:752](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L752)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### query
+
+[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`TContext`\>
+
+## Returns
+
+`ToArrayWrapper`\&lt;`GetRawResult`\&lt;`TContext`\>\>
diff --git a/mintlify/db/reference/functions/toBooleanPredicate.md b/mintlify/db/reference/functions/toBooleanPredicate.md
new file mode 100644
index 000000000..88121e0c2
--- /dev/null
+++ b/mintlify/db/reference/functions/toBooleanPredicate.md
@@ -0,0 +1,34 @@
+---
+id: toBooleanPredicate
+title: toBooleanPredicate
+---
+
+# Function: toBooleanPredicate()
+
+```ts
+function toBooleanPredicate(result): boolean;
+```
+
+Defined in: [packages/db/src/query/compiler/evaluators.ts:71](https://github.com/TanStack/db/blob/main/packages/db/src/query/compiler/evaluators.ts#L71)
+
+Converts a 3-valued logic result to a boolean for use in WHERE/HAVING filters.
+In SQL, UNKNOWN (null) values in WHERE clauses exclude rows, matching false behavior.
+
+## Parameters
+
+### result
+
+The 3-valued logic result: true, false, or null (UNKNOWN)
+
+`boolean` | `null`
+
+## Returns
+
+`boolean`
+
+true only if result is explicitly true, false otherwise
+
+Truth table:
+- true → true (include row)
+- false → false (exclude row)
+- null (UNKNOWN) → false (exclude row, matching SQL behavior)
diff --git a/mintlify/db/reference/functions/trackQuery.md b/mintlify/db/reference/functions/trackQuery.md
new file mode 100644
index 000000000..c96032f7f
--- /dev/null
+++ b/mintlify/db/reference/functions/trackQuery.md
@@ -0,0 +1,35 @@
+---
+id: trackQuery
+title: trackQuery
+---
+
+# Function: trackQuery()
+
+```ts
+function trackQuery(
+   collectionId, 
+   fieldPath, 
+   executionTimeMs): void;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L96)
+
+Track a query for dev mode analysis
+
+## Parameters
+
+### collectionId
+
+`string`
+
+### fieldPath
+
+`string`[]
+
+### executionTimeMs
+
+`number`
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/functions/unionWherePredicates.md b/mintlify/db/reference/functions/unionWherePredicates.md
new file mode 100644
index 000000000..37a3365d3
--- /dev/null
+++ b/mintlify/db/reference/functions/unionWherePredicates.md
@@ -0,0 +1,42 @@
+---
+id: unionWherePredicates
+title: unionWherePredicates
+---
+
+# Function: unionWherePredicates()
+
+```ts
+function unionWherePredicates(predicates): BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/query/predicate-utils.ts:297](https://github.com/TanStack/db/blob/main/packages/db/src/query/predicate-utils.ts#L297)
+
+Combine multiple where predicates with OR logic (union).
+Returns a predicate that is satisfied when any input predicate is satisfied.
+Simplifies when possible (e.g., age > 10 OR age > 20 → age > 10).
+
+## Parameters
+
+### predicates
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>[]
+
+Array of where predicates to union
+
+## Returns
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)\&lt;`boolean`\>
+
+Combined predicate representing the union
+
+## Examples
+
+```ts
+// Take least restrictive
+unionWherePredicates([gt(ref('age'), val(10)), gt(ref('age'), val(20))]) // age > 10
+```
+
+```ts
+// Combine equals into IN
+unionWherePredicates([eq(ref('age'), val(5)), eq(ref('age'), val(10))]) // age IN [5, 10]
+```
diff --git a/mintlify/db/reference/functions/upper.md b/mintlify/db/reference/functions/upper.md
new file mode 100644
index 000000000..61689c612
--- /dev/null
+++ b/mintlify/db/reference/functions/upper.md
@@ -0,0 +1,28 @@
+---
+id: upper
+title: upper
+---
+
+# Function: upper()
+
+```ts
+function upper<T>(arg): StringFunctionReturnType<T>;
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:283](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L283)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `ExpressionLike`
+
+## Parameters
+
+### arg
+
+`T`
+
+## Returns
+
+`StringFunctionReturnType`\&lt;`T`\>
diff --git a/mintlify/db/reference/functions/walkExpression.md b/mintlify/db/reference/functions/walkExpression.md
new file mode 100644
index 000000000..941d8b691
--- /dev/null
+++ b/mintlify/db/reference/functions/walkExpression.md
@@ -0,0 +1,43 @@
+---
+id: walkExpression
+title: walkExpression
+---
+
+# Function: walkExpression()
+
+```ts
+function walkExpression(expr, visitor): void;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:150](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L150)
+
+Generic expression tree walker that visits each node in the expression.
+Useful for implementing custom parsing logic.
+
+## Parameters
+
+### expr
+
+The expression to walk
+
+`BasicExpression`\&lt;`any`\> | `null` | `undefined`
+
+### visitor
+
+(`node`) => `void`
+
+Visitor function called for each node
+
+## Returns
+
+`void`
+
+## Example
+
+```typescript
+walkExpression(whereExpr, (node) => {
+  if (node.type === 'func' && node.name === 'eq') {
+    console.log('Found equality comparison')
+  }
+})
+```
diff --git a/mintlify/db/reference/functions/withArrayChangeTracking.md b/mintlify/db/reference/functions/withArrayChangeTracking.md
new file mode 100644
index 000000000..c429d60d4
--- /dev/null
+++ b/mintlify/db/reference/functions/withArrayChangeTracking.md
@@ -0,0 +1,41 @@
+---
+id: withArrayChangeTracking
+title: withArrayChangeTracking
+---
+
+# Function: withArrayChangeTracking()
+
+```ts
+function withArrayChangeTracking<T>(targets, callback): Record<string | symbol, unknown>[];
+```
+
+Defined in: [packages/db/src/proxy.ts:1171](https://github.com/TanStack/db/blob/main/packages/db/src/proxy.ts#L1171)
+
+Creates proxies for an array of objects, passes them to a callback function,
+and returns the changes made by the callback for each object
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+## Parameters
+
+### targets
+
+`T`[]
+
+Array of objects to proxy
+
+### callback
+
+(`proxies`) => `void`
+
+Function that receives the proxies and can make changes to them
+
+## Returns
+
+`Record`\&lt;`string` \| `symbol`, `unknown`\>[]
+
+Array of changes made to each object
diff --git a/mintlify/db/reference/functions/withChangeTracking.md b/mintlify/db/reference/functions/withChangeTracking.md
new file mode 100644
index 000000000..c44c09ded
--- /dev/null
+++ b/mintlify/db/reference/functions/withChangeTracking.md
@@ -0,0 +1,41 @@
+---
+id: withChangeTracking
+title: withChangeTracking
+---
+
+# Function: withChangeTracking()
+
+```ts
+function withChangeTracking<T>(target, callback): Record<string | symbol, unknown>;
+```
+
+Defined in: [packages/db/src/proxy.ts:1152](https://github.com/TanStack/db/blob/main/packages/db/src/proxy.ts#L1152)
+
+Creates a proxy for an object, passes it to a callback function,
+and returns the changes made by the callback
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+## Parameters
+
+### target
+
+`T`
+
+The object to proxy
+
+### callback
+
+(`proxy`) => `void`
+
+Function that receives the proxy and can make changes to it
+
+## Returns
+
+`Record`\&lt;`string` \| `symbol`, `unknown`\>
+
+The changes made to the object
diff --git a/mintlify/db/reference/index.md b/mintlify/db/reference/index.md
new file mode 100644
index 000000000..e34c6ad5f
--- /dev/null
+++ b/mintlify/db/reference/index.md
@@ -0,0 +1,347 @@
+---
+id: "@tanstack/db"
+title: "@tanstack/db"
+---
+
+# @tanstack/db
+
+## Namespaces
+
+- [IR](/db/reference/@tanstack/namespaces/IR/index)
+
+## Classes
+
+- [AggregateFunctionNotInSelectError](/db/reference/classes/AggregateFunctionNotInSelectError)
+- [AggregateNotSupportedError](/db/reference/classes/AggregateNotSupportedError)
+- [BaseIndex](/db/reference/classes/BaseIndex)
+- [BaseQueryBuilder](/db/reference/classes/BaseQueryBuilder)
+- [BasicIndex](/db/reference/classes/BasicIndex)
+- [BTreeIndex](/db/reference/classes/BTreeIndex)
+- [CannotCombineEmptyExpressionListError](/db/reference/classes/CannotCombineEmptyExpressionListError)
+- [CollectionConfigurationError](/db/reference/classes/CollectionConfigurationError)
+- [CollectionImpl](/db/reference/classes/CollectionImpl)
+- [CollectionInErrorStateError](/db/reference/classes/CollectionInErrorStateError)
+- [CollectionInputNotFoundError](/db/reference/classes/CollectionInputNotFoundError)
+- [CollectionIsInErrorStateError](/db/reference/classes/CollectionIsInErrorStateError)
+- [CollectionOperationError](/db/reference/classes/CollectionOperationError)
+- [CollectionRequiresConfigError](/db/reference/classes/CollectionRequiresConfigError)
+- [CollectionRequiresSyncConfigError](/db/reference/classes/CollectionRequiresSyncConfigError)
+- [CollectionStateError](/db/reference/classes/CollectionStateError)
+- [DeduplicatedLoadSubset](/db/reference/classes/DeduplicatedLoadSubset)
+- [DeleteKeyNotFoundError](/db/reference/classes/DeleteKeyNotFoundError)
+- [DistinctRequiresSelectError](/db/reference/classes/DistinctRequiresSelectError)
+- [DuplicateAliasInSubqueryError](/db/reference/classes/DuplicateAliasInSubqueryError)
+- [DuplicateDbInstanceError](/db/reference/classes/DuplicateDbInstanceError)
+- [DuplicateKeyError](/db/reference/classes/DuplicateKeyError)
+- [DuplicateKeySyncError](/db/reference/classes/DuplicateKeySyncError)
+- [EmptyReferencePathError](/db/reference/classes/EmptyReferencePathError)
+- [FnSelectWithGroupByError](/db/reference/classes/FnSelectWithGroupByError)
+- [GroupByError](/db/reference/classes/GroupByError)
+- [HavingRequiresGroupByError](/db/reference/classes/HavingRequiresGroupByError)
+- [InvalidCollectionStatusTransitionError](/db/reference/classes/InvalidCollectionStatusTransitionError)
+- [InvalidJoinCondition](/db/reference/classes/InvalidJoinCondition)
+- [InvalidJoinConditionLeftSourceError](/db/reference/classes/InvalidJoinConditionLeftSourceError)
+- [InvalidJoinConditionRightSourceError](/db/reference/classes/InvalidJoinConditionRightSourceError)
+- [InvalidJoinConditionSameSourceError](/db/reference/classes/InvalidJoinConditionSameSourceError)
+- [InvalidJoinConditionSourceMismatchError](/db/reference/classes/InvalidJoinConditionSourceMismatchError)
+- [InvalidKeyError](/db/reference/classes/InvalidKeyError)
+- [InvalidSchemaError](/db/reference/classes/InvalidSchemaError)
+- [InvalidSourceError](/db/reference/classes/InvalidSourceError)
+- [InvalidSourceTypeError](/db/reference/classes/InvalidSourceTypeError)
+- [InvalidStorageDataFormatError](/db/reference/classes/InvalidStorageDataFormatError)
+- [InvalidStorageObjectFormatError](/db/reference/classes/InvalidStorageObjectFormatError)
+- [InvalidWhereExpressionError](/db/reference/classes/InvalidWhereExpressionError)
+- [JoinCollectionNotFoundError](/db/reference/classes/JoinCollectionNotFoundError)
+- [JoinConditionMustBeEqualityError](/db/reference/classes/JoinConditionMustBeEqualityError)
+- [JoinError](/db/reference/classes/JoinError)
+- [KeyUpdateNotAllowedError](/db/reference/classes/KeyUpdateNotAllowedError)
+- [LimitOffsetRequireOrderByError](/db/reference/classes/LimitOffsetRequireOrderByError)
+- [LocalStorageCollectionError](/db/reference/classes/LocalStorageCollectionError)
+- [MissingAliasInputsError](/db/reference/classes/MissingAliasInputsError)
+- [MissingDeleteHandlerError](/db/reference/classes/MissingDeleteHandlerError)
+- [MissingHandlerError](/db/reference/classes/MissingHandlerError)
+- [MissingInsertHandlerError](/db/reference/classes/MissingInsertHandlerError)
+- [MissingMutationFunctionError](/db/reference/classes/MissingMutationFunctionError)
+- [MissingUpdateArgumentError](/db/reference/classes/MissingUpdateArgumentError)
+- [MissingUpdateHandlerError](/db/reference/classes/MissingUpdateHandlerError)
+- [NegativeActiveSubscribersError](/db/reference/classes/NegativeActiveSubscribersError)
+- [NoKeysPassedToDeleteError](/db/reference/classes/NoKeysPassedToDeleteError)
+- [NoKeysPassedToUpdateError](/db/reference/classes/NoKeysPassedToUpdateError)
+- [NonAggregateExpressionNotInGroupByError](/db/reference/classes/NonAggregateExpressionNotInGroupByError)
+- [NonRetriableError](/db/reference/classes/NonRetriableError)
+- [NoPendingSyncTransactionCommitError](/db/reference/classes/NoPendingSyncTransactionCommitError)
+- [NoPendingSyncTransactionWriteError](/db/reference/classes/NoPendingSyncTransactionWriteError)
+- [OnlyOneSourceAllowedError](/db/reference/classes/OnlyOneSourceAllowedError)
+- [OnMutateMustBeSynchronousError](/db/reference/classes/OnMutateMustBeSynchronousError)
+- [QueryBuilderError](/db/reference/classes/QueryBuilderError)
+- [QueryCompilationError](/db/reference/classes/QueryCompilationError)
+- [QueryMustHaveFromClauseError](/db/reference/classes/QueryMustHaveFromClauseError)
+- [QueryOptimizerError](/db/reference/classes/QueryOptimizerError)
+- [ReverseIndex](/db/reference/classes/ReverseIndex)
+- [SchemaMustBeSynchronousError](/db/reference/classes/SchemaMustBeSynchronousError)
+- [SchemaValidationError](/db/reference/classes/SchemaValidationError)
+- [SerializationError](/db/reference/classes/SerializationError)
+- [SetWindowRequiresOrderByError](/db/reference/classes/SetWindowRequiresOrderByError)
+- [SortedMap](/db/reference/classes/SortedMap)
+- [StorageError](/db/reference/classes/StorageError)
+- [StorageKeyRequiredError](/db/reference/classes/StorageKeyRequiredError)
+- [SubQueryMustHaveFromClauseError](/db/reference/classes/SubQueryMustHaveFromClauseError)
+- [SubscriptionNotFoundError](/db/reference/classes/SubscriptionNotFoundError)
+- [SyncCleanupError](/db/reference/classes/SyncCleanupError)
+- [SyncTransactionAlreadyCommittedError](/db/reference/classes/SyncTransactionAlreadyCommittedError)
+- [SyncTransactionAlreadyCommittedWriteError](/db/reference/classes/SyncTransactionAlreadyCommittedWriteError)
+- [TanStackDBError](/db/reference/classes/TanStackDBError)
+- [TransactionAlreadyCompletedRollbackError](/db/reference/classes/TransactionAlreadyCompletedRollbackError)
+- [TransactionError](/db/reference/classes/TransactionError)
+- [TransactionNotPendingCommitError](/db/reference/classes/TransactionNotPendingCommitError)
+- [TransactionNotPendingMutateError](/db/reference/classes/TransactionNotPendingMutateError)
+- [UndefinedKeyError](/db/reference/classes/UndefinedKeyError)
+- [UnknownExpressionTypeError](/db/reference/classes/UnknownExpressionTypeError)
+- [UnknownFunctionError](/db/reference/classes/UnknownFunctionError)
+- [UnknownHavingExpressionTypeError](/db/reference/classes/UnknownHavingExpressionTypeError)
+- [UnsafeAliasPathError](/db/reference/classes/UnsafeAliasPathError)
+- [UnsupportedAggregateFunctionError](/db/reference/classes/UnsupportedAggregateFunctionError)
+- [UnsupportedFromTypeError](/db/reference/classes/UnsupportedFromTypeError)
+- [UnsupportedJoinSourceTypeError](/db/reference/classes/UnsupportedJoinSourceTypeError)
+- [UnsupportedJoinTypeError](/db/reference/classes/UnsupportedJoinTypeError)
+- [UnsupportedRootScalarSelectError](/db/reference/classes/UnsupportedRootScalarSelectError)
+- [UpdateKeyNotFoundError](/db/reference/classes/UpdateKeyNotFoundError)
+- [WhereClauseConversionError](/db/reference/classes/WhereClauseConversionError)
+
+## Interfaces
+
+- [BaseCollectionConfig](/db/reference/interfaces/BaseCollectionConfig)
+- [BaseStrategy](/db/reference/interfaces/BaseStrategy)
+- [BasicIndexOptions](/db/reference/interfaces/BasicIndexOptions)
+- [BTreeRangeQueryOptions](/db/reference/interfaces/BTreeRangeQueryOptions)
+- [ChangeMessage](/db/reference/interfaces/ChangeMessage)
+- [Collection](/db/reference/interfaces/Collection)
+- [CollectionConfig](/db/reference/interfaces/CollectionConfig)
+- [CollectionIndexMetadata](/db/reference/interfaces/CollectionIndexMetadata)
+- [CollectionLike](/db/reference/interfaces/CollectionLike)
+- [Context](/db/reference/interfaces/Context)
+- [CreateOptimisticActionsOptions](/db/reference/interfaces/CreateOptimisticActionsOptions)
+- [CurrentStateAsChangesOptions](/db/reference/interfaces/CurrentStateAsChangesOptions)
+- [DebounceStrategy](/db/reference/interfaces/DebounceStrategy)
+- [DebounceStrategyOptions](/db/reference/interfaces/DebounceStrategyOptions)
+- [Effect](/db/reference/interfaces/Effect)
+- [EffectConfig](/db/reference/interfaces/EffectConfig)
+- [EffectContext](/db/reference/interfaces/EffectContext)
+- [IndexDevModeConfig](/db/reference/interfaces/IndexDevModeConfig)
+- [IndexInterface](/db/reference/interfaces/IndexInterface)
+- [IndexOptions](/db/reference/interfaces/IndexOptions)
+- [IndexStats](/db/reference/interfaces/IndexStats)
+- [IndexSuggestion](/db/reference/interfaces/IndexSuggestion)
+- [InsertConfig](/db/reference/interfaces/InsertConfig)
+- [LiveQueryCollectionConfig](/db/reference/interfaces/LiveQueryCollectionConfig)
+- [LocalOnlyCollectionConfig](/db/reference/interfaces/LocalOnlyCollectionConfig)
+- [LocalOnlyCollectionUtils](/db/reference/interfaces/LocalOnlyCollectionUtils)
+- [LocalStorageCollectionConfig](/db/reference/interfaces/LocalStorageCollectionConfig)
+- [LocalStorageCollectionUtils](/db/reference/interfaces/LocalStorageCollectionUtils)
+- [OperationConfig](/db/reference/interfaces/OperationConfig)
+- [PacedMutationsConfig](/db/reference/interfaces/PacedMutationsConfig)
+- [ParsedOrderBy](/db/reference/interfaces/ParsedOrderBy)
+- [Parser](/db/reference/interfaces/Parser)
+- [ParseWhereOptions](/db/reference/interfaces/ParseWhereOptions)
+- [PendingMutation](/db/reference/interfaces/PendingMutation)
+- [QueryOnceConfig](/db/reference/interfaces/QueryOnceConfig)
+- [QueueStrategy](/db/reference/interfaces/QueueStrategy)
+- [QueueStrategyOptions](/db/reference/interfaces/QueueStrategyOptions)
+- [RangeQueryOptions](/db/reference/interfaces/RangeQueryOptions)
+- [SimpleComparison](/db/reference/interfaces/SimpleComparison)
+- [SubscribeChangesOptions](/db/reference/interfaces/SubscribeChangesOptions)
+- [SubscribeChangesSnapshotOptions](/db/reference/interfaces/SubscribeChangesSnapshotOptions)
+- [Subscription](/db/reference/interfaces/Subscription)
+- [SubscriptionStatusChangeEvent](/db/reference/interfaces/SubscriptionStatusChangeEvent)
+- [SubscriptionStatusEvent](/db/reference/interfaces/SubscriptionStatusEvent)
+- [SubscriptionUnsubscribedEvent](/db/reference/interfaces/SubscriptionUnsubscribedEvent)
+- [SyncConfig](/db/reference/interfaces/SyncConfig)
+- [SyncMetadataApi](/db/reference/interfaces/SyncMetadataApi)
+- [ThrottleStrategy](/db/reference/interfaces/ThrottleStrategy)
+- [ThrottleStrategyOptions](/db/reference/interfaces/ThrottleStrategyOptions)
+- [Transaction](/db/reference/interfaces/Transaction)
+- [TransactionConfig](/db/reference/interfaces/TransactionConfig)
+- [VirtualRowProps](/db/reference/interfaces/VirtualRowProps)
+
+## Type Aliases
+
+- [ApplyJoinOptionalityToMergedSchema](/db/reference/type-aliases/ApplyJoinOptionalityToMergedSchema)
+- [ChangeListener](/db/reference/type-aliases/ChangeListener)
+- [ChangeMessageOrDeleteKeyMessage](/db/reference/type-aliases/ChangeMessageOrDeleteKeyMessage)
+- [ChangesPayload](/db/reference/type-aliases/ChangesPayload)
+- [CleanupFn](/db/reference/type-aliases/CleanupFn)
+- [ClearStorageFn](/db/reference/type-aliases/ClearStorageFn)
+- [CollectionConfigSingleRowOption](/db/reference/type-aliases/CollectionConfigSingleRowOption)
+- [CollectionStatus](/db/reference/type-aliases/CollectionStatus)
+- [ContextFromSource](/db/reference/type-aliases/ContextFromSource)
+- [ContextFromUnionBranches](/db/reference/type-aliases/ContextFromUnionBranches)
+- [ContextFromUnionSource](/db/reference/type-aliases/ContextFromUnionSource)
+- [ContextSchema](/db/reference/type-aliases/ContextSchema)
+- [CursorExpressions](/db/reference/type-aliases/CursorExpressions)
+- [DeleteKeyMessage](/db/reference/type-aliases/DeleteKeyMessage)
+- [DeleteMutationFn](/db/reference/type-aliases/DeleteMutationFn)
+- [DeleteMutationFnParams](/db/reference/type-aliases/DeleteMutationFnParams)
+- [DeltaEvent](/db/reference/type-aliases/DeltaEvent)
+- [DeltaType](/db/reference/type-aliases/DeltaType)
+- [EffectQueryInput](/db/reference/type-aliases/EffectQueryInput)
+- [ExtractContext](/db/reference/type-aliases/ExtractContext)
+- [FieldPath](/db/reference/type-aliases/FieldPath)
+- [Fn](/db/reference/type-aliases/Fn)
+- [FunctionalHavingRow](/db/reference/type-aliases/FunctionalHavingRow)
+- [GetResult](/db/reference/type-aliases/GetResult)
+- [GetStorageSizeFn](/db/reference/type-aliases/GetStorageSizeFn)
+- [GroupByCallback](/db/reference/type-aliases/GroupByCallback)
+- [IndexConstructor](/db/reference/type-aliases/IndexConstructor)
+- [IndexOperation](/db/reference/type-aliases/IndexOperation)
+- [IndexOperation](/db/reference/type-aliases/IndexOperation-1)
+- [InferCollectionType](/db/reference/type-aliases/InferCollectionType)
+- [InferResultType](/db/reference/type-aliases/InferResultType)
+- [InferSchemaInput](/db/reference/type-aliases/InferSchemaInput)
+- [InferSchemaOutput](/db/reference/type-aliases/InferSchemaOutput)
+- [InitialQueryBuilder](/db/reference/type-aliases/InitialQueryBuilder)
+- [InputRow](/db/reference/type-aliases/InputRow)
+- [InsertMutationFn](/db/reference/type-aliases/InsertMutationFn)
+- [InsertMutationFnParams](/db/reference/type-aliases/InsertMutationFnParams)
+- [JoinOnCallback](/db/reference/type-aliases/JoinOnCallback)
+- [KeyedNamespacedRow](/db/reference/type-aliases/KeyedNamespacedRow)
+- [KeyedStream](/db/reference/type-aliases/KeyedStream)
+- [LiveQueryCollectionUtils](/db/reference/type-aliases/LiveQueryCollectionUtils)
+- [LoadSubsetFn](/db/reference/type-aliases/LoadSubsetFn)
+- [LoadSubsetOptions](/db/reference/type-aliases/LoadSubsetOptions)
+- [MakeOptional](/db/reference/type-aliases/MakeOptional)
+- [MaybeSingleResult](/db/reference/type-aliases/MaybeSingleResult)
+- [MergeContextForJoinCallback](/db/reference/type-aliases/MergeContextForJoinCallback)
+- [MergeContextWithJoinType](/db/reference/type-aliases/MergeContextWithJoinType)
+- [MutationFn](/db/reference/type-aliases/MutationFn)
+- [MutationFnParams](/db/reference/type-aliases/MutationFnParams)
+- [NamespacedAndKeyedStream](/db/reference/type-aliases/NamespacedAndKeyedStream)
+- [NamespacedRow](/db/reference/type-aliases/NamespacedRow)
+- [NonEmptyArray](/db/reference/type-aliases/NonEmptyArray)
+- [NonSingleResult](/db/reference/type-aliases/NonSingleResult)
+- [OperationType](/db/reference/type-aliases/OperationType)
+- [OperatorName](/db/reference/type-aliases/OperatorName)
+- [OptimisticChangeMessage](/db/reference/type-aliases/OptimisticChangeMessage)
+- [OrderByCallback](/db/reference/type-aliases/OrderByCallback)
+- [Prettify](/db/reference/type-aliases/Prettify)
+- [QueryBuilder](/db/reference/type-aliases/QueryBuilder)
+- [QueryResult](/db/reference/type-aliases/QueryResult)
+- [Ref](/db/reference/type-aliases/Ref)
+- [RefsForContext](/db/reference/type-aliases/RefsForContext)
+- [ResolveTransactionChanges](/db/reference/type-aliases/ResolveTransactionChanges)
+- [ResultStream](/db/reference/type-aliases/ResultStream)
+- [ResultTypeFromSelect](/db/reference/type-aliases/ResultTypeFromSelect)
+- [Row](/db/reference/type-aliases/Row)
+- [SchemaFromSource](/db/reference/type-aliases/SchemaFromSource)
+- [SelectObject](/db/reference/type-aliases/SelectObject)
+- [SingleResult](/db/reference/type-aliases/SingleResult)
+- [SingleSource](/db/reference/type-aliases/SingleSource)
+- [Source](/db/reference/type-aliases/Source)
+- [SourceClauseContext](/db/reference/type-aliases/SourceClauseContext)
+- [StandardSchema](/db/reference/type-aliases/StandardSchema)
+- [StandardSchemaAlias](/db/reference/type-aliases/StandardSchemaAlias)
+- [StorageApi](/db/reference/type-aliases/StorageApi)
+- [StorageEventApi](/db/reference/type-aliases/StorageEventApi)
+- [Strategy](/db/reference/type-aliases/Strategy)
+- [StrategyOptions](/db/reference/type-aliases/StrategyOptions)
+- [StringCollationConfig](/db/reference/type-aliases/StringCollationConfig)
+- [SubscriptionEvents](/db/reference/type-aliases/SubscriptionEvents)
+- [SubscriptionStatus](/db/reference/type-aliases/SubscriptionStatus)
+- [SyncConfigRes](/db/reference/type-aliases/SyncConfigRes)
+- [SyncMode](/db/reference/type-aliases/SyncMode)
+- [TransactionState](/db/reference/type-aliases/TransactionState)
+- [TransactionWithMutations](/db/reference/type-aliases/TransactionWithMutations)
+- [UnloadSubsetFn](/db/reference/type-aliases/UnloadSubsetFn)
+- [UpdateMutationFn](/db/reference/type-aliases/UpdateMutationFn)
+- [UpdateMutationFnParams](/db/reference/type-aliases/UpdateMutationFnParams)
+- [UtilsRecord](/db/reference/type-aliases/UtilsRecord)
+- [VirtualOrigin](/db/reference/type-aliases/VirtualOrigin)
+- [WhereCallback](/db/reference/type-aliases/WhereCallback)
+- [WithoutVirtualProps](/db/reference/type-aliases/WithoutVirtualProps)
+- [WithResult](/db/reference/type-aliases/WithResult)
+- [WithVirtualProps](/db/reference/type-aliases/WithVirtualProps)
+- [WritableDeep](/db/reference/type-aliases/WritableDeep)
+
+## Variables
+
+- [operators](/db/reference/variables/operators)
+- [Query](/db/reference/variables/Query)
+
+## Functions
+
+- [add](/db/reference/functions/add)
+- [and](/db/reference/functions/and)
+- [avg](/db/reference/functions/avg)
+- [caseWhen](/db/reference/functions/caseWhen)
+- [clearQueryPatterns](/db/reference/functions/clearQueryPatterns)
+- [coalesce](/db/reference/functions/coalesce)
+- [compileExpression](/db/reference/functions/compileExpression)
+- [compileQuery](/db/reference/functions/compileQuery)
+- [compileSingleRowExpression](/db/reference/functions/compileSingleRowExpression)
+- [concat](/db/reference/functions/concat)
+- [configureIndexDevMode](/db/reference/functions/configureIndexDevMode)
+- [count](/db/reference/functions/count)
+- [createArrayChangeProxy](/db/reference/functions/createArrayChangeProxy)
+- [createChangeProxy](/db/reference/functions/createChangeProxy)
+- [createCollection](/db/reference/functions/createCollection)
+- [createEffect](/db/reference/functions/createEffect)
+- [createLiveQueryCollection](/db/reference/functions/createLiveQueryCollection)
+- [createOptimisticAction](/db/reference/functions/createOptimisticAction)
+- [createPacedMutations](/db/reference/functions/createPacedMutations)
+- [createTransaction](/db/reference/functions/createTransaction)
+- [debounceStrategy](/db/reference/functions/debounceStrategy)
+- [deepEquals](/db/reference/functions/deepEquals)
+- [divide](/db/reference/functions/divide)
+- [eq](/db/reference/functions/eq)
+- [extractFieldPath](/db/reference/functions/extractFieldPath)
+- [extractSimpleComparisons](/db/reference/functions/extractSimpleComparisons)
+- [extractValue](/db/reference/functions/extractValue)
+- [findIndexForField](/db/reference/functions/findIndexForField)
+- [getActiveTransaction](/db/reference/functions/getActiveTransaction)
+- [getIndexDevModeConfig](/db/reference/functions/getIndexDevModeConfig)
+- [getQueryPatterns](/db/reference/functions/getQueryPatterns)
+- [gt](/db/reference/functions/gt)
+- [gte](/db/reference/functions/gte)
+- [hasVirtualProps](/db/reference/functions/hasVirtualProps)
+- [ilike](/db/reference/functions/ilike)
+- [inArray](/db/reference/functions/inArray)
+- [isDevModeEnabled](/db/reference/functions/isDevModeEnabled)
+- [isLimitSubset](/db/reference/functions/isLimitSubset)
+- [isNull](/db/reference/functions/isNull)
+- [isOffsetLimitSubset](/db/reference/functions/isOffsetLimitSubset)
+- [isOrderBySubset](/db/reference/functions/isOrderBySubset)
+- [isPredicateSubset](/db/reference/functions/isPredicateSubset)
+- [isUndefined](/db/reference/functions/isUndefined)
+- [isWhereSubset](/db/reference/functions/isWhereSubset)
+- [length](/db/reference/functions/length)
+- [like](/db/reference/functions/like)
+- [liveQueryCollectionOptions](/db/reference/functions/liveQueryCollectionOptions)
+- [localOnlyCollectionOptions](/db/reference/functions/localOnlyCollectionOptions)
+- [localStorageCollectionOptions](/db/reference/functions/localStorageCollectionOptions)
+- [lower](/db/reference/functions/lower)
+- [lt](/db/reference/functions/lt)
+- [lte](/db/reference/functions/lte)
+- [materialize](/db/reference/functions/materialize)
+- [max](/db/reference/functions/max)
+- [min](/db/reference/functions/min)
+- [minusWherePredicates](/db/reference/functions/minusWherePredicates)
+- [multiply](/db/reference/functions/multiply)
+- [not](/db/reference/functions/not)
+- [optimizeExpressionWithIndexes](/db/reference/functions/optimizeExpressionWithIndexes)
+- [or](/db/reference/functions/or)
+- [parseLoadSubsetOptions](/db/reference/functions/parseLoadSubsetOptions)
+- [parseOrderByExpression](/db/reference/functions/parseOrderByExpression)
+- [parseWhereExpression](/db/reference/functions/parseWhereExpression)
+- [queryOnce](/db/reference/functions/queryOnce)
+- [queueStrategy](/db/reference/functions/queueStrategy)
+- [safeRandomUUID](/db/reference/functions/safeRandomUUID)
+- [subtract](/db/reference/functions/subtract)
+- [sum](/db/reference/functions/sum)
+- [throttleStrategy](/db/reference/functions/throttleStrategy)
+- [toArray](/db/reference/functions/toArray)
+- [toBooleanPredicate](/db/reference/functions/toBooleanPredicate)
+- [trackQuery](/db/reference/functions/trackQuery)
+- [unionWherePredicates](/db/reference/functions/unionWherePredicates)
+- [upper](/db/reference/functions/upper)
+- [walkExpression](/db/reference/functions/walkExpression)
+- [withArrayChangeTracking](/db/reference/functions/withArrayChangeTracking)
+- [withChangeTracking](/db/reference/functions/withChangeTracking)
diff --git a/mintlify/db/reference/interfaces/BTreeRangeQueryOptions.md b/mintlify/db/reference/interfaces/BTreeRangeQueryOptions.md
new file mode 100644
index 000000000..080fcc45b
--- /dev/null
+++ b/mintlify/db/reference/interfaces/BTreeRangeQueryOptions.md
@@ -0,0 +1,50 @@
+---
+id: BTreeRangeQueryOptions
+title: BTreeRangeQueryOptions
+---
+
+# Interface: BTreeRangeQueryOptions
+
+Defined in: [packages/db/src/indexes/btree-index.ts:24](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L24)
+
+Options for range queries
+
+## Properties
+
+### from?
+
+```ts
+optional from: any;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:25](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L25)
+
+***
+
+### fromInclusive?
+
+```ts
+optional fromInclusive: boolean;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:27](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L27)
+
+***
+
+### to?
+
+```ts
+optional to: any;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:26](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L26)
+
+***
+
+### toInclusive?
+
+```ts
+optional toInclusive: boolean;
+```
+
+Defined in: [packages/db/src/indexes/btree-index.ts:28](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/btree-index.ts#L28)
diff --git a/mintlify/db/reference/interfaces/BaseCollectionConfig.md b/mintlify/db/reference/interfaces/BaseCollectionConfig.md
new file mode 100644
index 000000000..8100c929d
--- /dev/null
+++ b/mintlify/db/reference/interfaces/BaseCollectionConfig.md
@@ -0,0 +1,452 @@
+---
+id: BaseCollectionConfig
+title: BaseCollectionConfig
+---
+
+# Interface: BaseCollectionConfig\&lt;T, TKey, TSchema, TUtils, TReturn\>
+
+Defined in: [packages/db/src/types.ts:521](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L521)
+
+## Extended by
+
+- [`CollectionConfig`](/db/reference/interfaces/CollectionConfig)
+- [`LocalStorageCollectionConfig`](/db/reference/interfaces/LocalStorageCollectionConfig)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+### TReturn
+
+`TReturn` = `any`
+
+## Properties
+
+### autoIndex?
+
+```ts
+optional autoIndex: "off" | "eager";
+```
+
+Defined in: [packages/db/src/types.ts:571](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L571)
+
+Auto-indexing mode for the collection.
+When enabled, indexes will be automatically created for simple where expressions.
+
+#### Default
+
+```ts
+"off"
+```
+
+#### Description
+
+- "off": No automatic indexing (default). Use explicit indexes for better bundle size.
+- "eager": Automatically create indexes for simple where expressions in subscribeChanges.
+           Requires setting defaultIndexType.
+
+***
+
+### compare()?
+
+```ts
+optional compare: (x, y) => number;
+```
+
+Defined in: [packages/db/src/types.ts:596](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L596)
+
+Optional function to compare two items.
+This is used to order the items in the collection.
+
+#### Parameters
+
+##### x
+
+`T`
+
+The first item to compare
+
+##### y
+
+`T`
+
+The second item to compare
+
+#### Returns
+
+`number`
+
+A number indicating the order of the items
+
+#### Example
+
+```ts
+// For a collection with a 'createdAt' field
+compare: (x, y) => x.createdAt.getTime() - y.createdAt.getTime()
+```
+
+***
+
+### defaultIndexType?
+
+```ts
+optional defaultIndexType: IndexConstructor<TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:585](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L585)
+
+Default index type to use when creating indexes without an explicit type.
+Required for auto-indexing. Import from '@tanstack/db'.
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+const collection = createCollection({
+  defaultIndexType: BasicIndex,
+  autoIndex: 'eager',
+  // ...
+})
+```
+
+***
+
+### defaultStringCollation?
+
+```ts
+optional defaultStringCollation: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/types.ts:742](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L742)
+
+Specifies how to compare data in the collection.
+This should be configured to match data ordering on the backend.
+E.g., when using the Electric DB collection these options
+      should match the database's collation settings.
+
+***
+
+### gcTime?
+
+```ts
+optional gcTime: number;
+```
+
+Defined in: [packages/db/src/types.ts:550](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L550)
+
+Time in milliseconds after which the collection will be garbage collected
+when it has no active subscribers. Defaults to 5 minutes (300000ms).
+
+***
+
+### getKey()
+
+```ts
+getKey: (item) => TKey;
+```
+
+Defined in: [packages/db/src/types.ts:545](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L545)
+
+Function to extract the ID from an object
+This is required for update/delete operations which now only accept IDs
+
+#### Parameters
+
+##### item
+
+`T`
+
+The item to extract the ID from
+
+#### Returns
+
+`TKey`
+
+The ID string for the item
+
+#### Example
+
+```ts
+// For a collection with a 'uuid' field as the primary key
+getKey: (item) => item.uuid
+```
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:534](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L534)
+
+***
+
+### onDelete?
+
+```ts
+optional onDelete: DeleteMutationFn<T, TKey, TUtils, TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:734](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L734)
+
+Optional asynchronous handler function called before a delete operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic delete handler
+onDelete: async ({ transaction, collection }) => {
+  const deletedKey = transaction.mutations[0].key
+  await api.deleteTodo(deletedKey)
+}
+```
+
+```ts
+// Delete handler with multiple items
+onDelete: async ({ transaction, collection }) => {
+  const keysToDelete = transaction.mutations.map(m => m.key)
+  await api.deleteTodos(keysToDelete)
+}
+```
+
+```ts
+// Delete handler with confirmation
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const shouldDelete = await confirmDeletion(mutation.original)
+  if (!shouldDelete) {
+    throw new Error('Delete cancelled by user')
+  }
+  await api.deleteTodo(mutation.original.id)
+}
+```
+
+```ts
+// Delete handler with optimistic rollback
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.deleteTodo(mutation.original.id)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Delete failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+***
+
+### onInsert?
+
+```ts
+optional onInsert: InsertMutationFn<T, TKey, TUtils, TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L647)
+
+Optional asynchronous handler function called before an insert operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic insert handler
+onInsert: async ({ transaction, collection }) => {
+  const newItem = transaction.mutations[0].modified
+  await api.createTodo(newItem)
+}
+```
+
+```ts
+// Insert handler with multiple items
+onInsert: async ({ transaction, collection }) => {
+  const items = transaction.mutations.map(m => m.modified)
+  await api.createTodos(items)
+}
+```
+
+```ts
+// Insert handler with error handling
+onInsert: async ({ transaction, collection }) => {
+  try {
+    const newItem = transaction.mutations[0].modified
+    const result = await api.createTodo(newItem)
+    return result
+  } catch (error) {
+    console.error('Insert failed:', error)
+    throw error // This will cause the transaction to fail
+  }
+}
+```
+
+```ts
+// Insert handler with metadata
+onInsert: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  await api.createTodo(mutation.modified, {
+    source: mutation.metadata?.source,
+    timestamp: mutation.createdAt
+  })
+}
+```
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: UpdateMutationFn<T, TKey, TUtils, TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:691](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L691)
+
+Optional asynchronous handler function called before an update operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic update handler
+onUpdate: async ({ transaction, collection }) => {
+  const updatedItem = transaction.mutations[0].modified
+  await api.updateTodo(updatedItem.id, updatedItem)
+}
+```
+
+```ts
+// Update handler with partial updates
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const changes = mutation.changes // Only the changed fields
+  await api.updateTodo(mutation.original.id, changes)
+}
+```
+
+```ts
+// Update handler with multiple items
+onUpdate: async ({ transaction, collection }) => {
+  const updates = transaction.mutations.map(m => ({
+    id: m.key,
+    changes: m.changes
+  }))
+  await api.updateTodos(updates)
+}
+```
+
+```ts
+// Update handler with optimistic rollback
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.updateTodo(mutation.original.id, mutation.changes)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Update failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+***
+
+### schema?
+
+```ts
+optional schema: TSchema;
+```
+
+Defined in: [packages/db/src/types.ts:535](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L535)
+
+***
+
+### startSync?
+
+```ts
+optional startSync: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:561](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L561)
+
+Whether to eagerly start syncing on collection creation.
+When true, syncing begins immediately. When false, syncing starts when the first subscriber attaches.
+
+Note: Even with startSync=true, collections will pause syncing when there are no active
+subscribers (typically when components querying the collection unmount), resuming when new
+subscribers attach. This preserves normal staleTime/gcTime behavior.
+
+#### Default
+
+```ts
+false
+```
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: SyncMode;
+```
+
+Defined in: [packages/db/src/types.ts:605](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L605)
+
+The mode of sync to use for the collection.
+
+#### Default
+
+`eager`
+
+#### Description
+
+- `eager`: syncs all data immediately on preload
+- `on-demand`: syncs data in incremental snapshots when the collection is queried
+The exact implementation of the sync mode is up to the sync implementation.
+
+***
+
+### utils?
+
+```ts
+optional utils: TUtils;
+```
+
+Defined in: [packages/db/src/types.ts:744](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L744)
diff --git a/mintlify/db/reference/interfaces/BaseStrategy.md b/mintlify/db/reference/interfaces/BaseStrategy.md
new file mode 100644
index 000000000..099c7077e
--- /dev/null
+++ b/mintlify/db/reference/interfaces/BaseStrategy.md
@@ -0,0 +1,83 @@
+---
+id: BaseStrategy
+title: BaseStrategy
+---
+
+# Interface: BaseStrategy\&lt;TName\>
+
+Defined in: [packages/db/src/strategies/types.ts:6](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L6)
+
+Base strategy interface that all strategy implementations must conform to
+
+## Extended by
+
+- [`DebounceStrategy`](/db/reference/interfaces/DebounceStrategy)
+- [`QueueStrategy`](/db/reference/interfaces/QueueStrategy)
+- [`ThrottleStrategy`](/db/reference/interfaces/ThrottleStrategy)
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `string` = `string`
+
+## Properties
+
+### \_type
+
+```ts
+_type: TName;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L8)
+
+Type discriminator for strategy identification
+
+***
+
+### cleanup()
+
+```ts
+cleanup: () => void;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L23)
+
+Clean up any resources held by the strategy
+Should be called when the strategy is no longer needed
+
+#### Returns
+
+`void`
+
+***
+
+### execute()
+
+```ts
+execute: <T>(fn) => void | Promise<void>;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L15)
+
+Execute a function according to the strategy's timing rules
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+#### Parameters
+
+##### fn
+
+() => [`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+The function to execute
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+The result of the function execution (if applicable)
diff --git a/mintlify/db/reference/interfaces/BasicIndexOptions.md b/mintlify/db/reference/interfaces/BasicIndexOptions.md
new file mode 100644
index 000000000..9918e1e33
--- /dev/null
+++ b/mintlify/db/reference/interfaces/BasicIndexOptions.md
@@ -0,0 +1,44 @@
+---
+id: BasicIndexOptions
+title: BasicIndexOptions
+---
+
+# Interface: BasicIndexOptions
+
+Defined in: [packages/db/src/indexes/basic-index.ts:24](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L24)
+
+Options for Basic index
+
+## Properties
+
+### compareFn()?
+
+```ts
+optional compareFn: (a, b) => number;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:25](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L25)
+
+#### Parameters
+
+##### a
+
+`any`
+
+##### b
+
+`any`
+
+#### Returns
+
+`number`
+
+***
+
+### compareOptions?
+
+```ts
+optional compareOptions: CompareOptions;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:26](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L26)
diff --git a/mintlify/db/reference/interfaces/ChangeMessage.md b/mintlify/db/reference/interfaces/ChangeMessage.md
new file mode 100644
index 000000000..aec2f69bd
--- /dev/null
+++ b/mintlify/db/reference/interfaces/ChangeMessage.md
@@ -0,0 +1,68 @@
+---
+id: ChangeMessage
+title: ChangeMessage
+---
+
+# Interface: ChangeMessage\&lt;T, TKey\>
+
+Defined in: [packages/db/src/types.ts:381](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L381)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### key
+
+```ts
+key: TKey;
+```
+
+Defined in: [packages/db/src/types.ts:385](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L385)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:389](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L389)
+
+***
+
+### previousValue?
+
+```ts
+optional previousValue: T;
+```
+
+Defined in: [packages/db/src/types.ts:387](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L387)
+
+***
+
+### type
+
+```ts
+type: OperationType;
+```
+
+Defined in: [packages/db/src/types.ts:388](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L388)
+
+***
+
+### value
+
+```ts
+value: T;
+```
+
+Defined in: [packages/db/src/types.ts:386](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L386)
diff --git a/mintlify/db/reference/interfaces/Collection.md b/mintlify/db/reference/interfaces/Collection.md
new file mode 100644
index 000000000..f93f16fc3
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Collection.md
@@ -0,0 +1,1676 @@
+---
+id: Collection
+title: Collection
+---
+
+# Interface: Collection\&lt;T, TKey, TUtils, TSchema, TInsertInput\>
+
+Defined in: [packages/db/src/collection/index.ts:55](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L55)
+
+Enhanced Collection interface that includes both data type T and utilities TUtils
+
+## Extends
+
+- [`CollectionImpl`](/db/reference/classes/CollectionImpl)\&lt;`T`, `TKey`, `TUtils`, `TSchema`, `TInsertInput`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+The type of items in the collection
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key for the collection
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+The utilities record type
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `StandardSchemaV1`
+
+### TInsertInput
+
+`TInsertInput` *extends* `object` = `T`
+
+The type for insert operations (can be different from T for schemas with defaults)
+
+## Properties
+
+### \_lifecycle
+
+```ts
+_lifecycle: CollectionLifecycleManager<T, TKey, TSchema, TInsertInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:290](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L290)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`_lifecycle`](/db/reference/classes/CollectionImpl#_lifecycle)
+
+***
+
+### \_state
+
+```ts
+_state: CollectionStateManager<T, TKey, TSchema, TInsertInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:302](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L302)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`_state`](/db/reference/classes/CollectionImpl#_state)
+
+***
+
+### \_sync
+
+```ts
+_sync: CollectionSyncManager<T, TKey, TSchema, TInsertInput>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:291](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L291)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`_sync`](/db/reference/classes/CollectionImpl#_sync)
+
+***
+
+### config
+
+```ts
+config: CollectionConfig<T, TKey, TSchema>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:281](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L281)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`config`](/db/reference/classes/CollectionImpl#config)
+
+***
+
+### deferDataRefresh
+
+```ts
+deferDataRefresh: Promise<void> | null = null;
+```
+
+Defined in: [packages/db/src/collection/index.ts:309](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L309)
+
+When set, collection consumers should defer processing incoming data
+refreshes until this promise resolves. This prevents stale data from
+overwriting optimistic state while pending writes are being applied.
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`deferDataRefresh`](/db/reference/classes/CollectionImpl#deferdatarefresh)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/db/src/collection/index.ts:280](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L280)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`id`](/db/reference/classes/CollectionImpl#id)
+
+***
+
+### singleResult?
+
+```ts
+readonly optional singleResult: true;
+```
+
+Defined in: [packages/db/src/collection/index.ts:63](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L63)
+
+***
+
+### utils
+
+```ts
+readonly utils: TUtils;
+```
+
+Defined in: [packages/db/src/collection/index.ts:62](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L62)
+
+#### Overrides
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`utils`](/db/reference/classes/CollectionImpl#utils)
+
+## Accessors
+
+### compareOptions
+
+#### Get Signature
+
+```ts
+get compareOptions(): StringCollationConfig;
+```
+
+Defined in: [packages/db/src/collection/index.ts:644](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L644)
+
+##### Returns
+
+[`StringCollationConfig`](/db/reference/type-aliases/StringCollationConfig)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`compareOptions`](/db/reference/classes/CollectionImpl#compareoptions)
+
+***
+
+### indexes
+
+#### Get Signature
+
+```ts
+get indexes(): Map<number, BaseIndex<TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:629](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L629)
+
+Get resolved indexes for query optimization
+
+##### Returns
+
+`Map`\&lt;`number`, [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`indexes`](/db/reference/classes/CollectionImpl#indexes)
+
+***
+
+### isLoadingSubset
+
+#### Get Signature
+
+```ts
+get isLoadingSubset(): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:457](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L457)
+
+Check if the collection is currently loading more data
+
+##### Returns
+
+`boolean`
+
+true if the collection has pending load more operations, false otherwise
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`isLoadingSubset`](/db/reference/classes/CollectionImpl#isloadingsubset)
+
+***
+
+### size
+
+#### Get Signature
+
+```ts
+get size(): number;
+```
+
+Defined in: [packages/db/src/collection/index.ts:494](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L494)
+
+Get the current size of the collection (cached)
+
+##### Returns
+
+`number`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`size`](/db/reference/classes/CollectionImpl#size)
+
+***
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): Map<TKey, WithVirtualProps<TOutput, TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:821](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L821)
+
+Gets the current state of the collection as a Map
+
+##### Example
+
+```ts
+const itemsMap = collection.state
+console.log(`Collection has ${itemsMap.size} items`)
+
+for (const [key, item] of itemsMap) {
+  console.log(`${key}: ${item.title}`)
+}
+
+// Check if specific item exists
+if (itemsMap.has("todo-1")) {
+  console.log("Todo 1 exists:", itemsMap.get("todo-1"))
+}
+```
+
+##### Returns
+
+`Map`\&lt;`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>\>
+
+Map containing all items in the collection, with keys as identifiers
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`state`](/db/reference/classes/CollectionImpl#state)
+
+***
+
+### status
+
+#### Get Signature
+
+```ts
+get status(): CollectionStatus;
+```
+
+Defined in: [packages/db/src/collection/index.ts:412](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L412)
+
+Gets the current status of the collection
+
+##### Returns
+
+[`CollectionStatus`](/db/reference/type-aliases/CollectionStatus)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`status`](/db/reference/classes/CollectionImpl#status)
+
+***
+
+### subscriberCount
+
+#### Get Signature
+
+```ts
+get subscriberCount(): number;
+```
+
+Defined in: [packages/db/src/collection/index.ts:419](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L419)
+
+Get the number of subscribers to the collection
+
+##### Returns
+
+`number`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`subscriberCount`](/db/reference/classes/CollectionImpl#subscribercount)
+
+***
+
+### toArray
+
+#### Get Signature
+
+```ts
+get toArray(): WithVirtualProps<TOutput, TKey>[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:850](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L850)
+
+Gets the current state of the collection as an Array
+
+##### Returns
+
+[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`TOutput`, `TKey`\>[]
+
+An Array containing all items in the collection
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`toArray`](/db/reference/classes/CollectionImpl#toarray)
+
+## Methods
+
+### \[iterator\]()
+
+```ts
+iterator: IterableIterator<[TKey, WithVirtualProps<T, TKey>]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:532](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L532)
+
+Get all entries (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\]\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`[iterator]`](/db/reference/classes/CollectionImpl#iterator)
+
+***
+
+### cleanup()
+
+```ts
+cleanup(): Promise<void>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:989](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L989)
+
+Clean up the collection by stopping sync and clearing data
+This can be called manually or automatically by garbage collection
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`cleanup`](/db/reference/classes/CollectionImpl#cleanup)
+
+***
+
+### createIndex()
+
+```ts
+createIndex<TIndexType>(indexCallback, config): BaseIndex<TKey>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:598](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L598)
+
+Creates an index on a collection for faster queries.
+Indexes significantly improve query performance by allowing constant time lookups
+and logarithmic time range queries instead of full scans.
+
+#### Type Parameters
+
+##### TIndexType
+
+`TIndexType` *extends* [`IndexConstructor`](/db/reference/type-aliases/IndexConstructor)\&lt;`TKey`\>
+
+#### Parameters
+
+##### indexCallback
+
+(`row`) => `any`
+
+Function that extracts the indexed value from each item
+
+##### config
+
+[`IndexOptions`](/db/reference/interfaces/IndexOptions)\&lt;`TIndexType`\> = `{}`
+
+Configuration including index type and type-specific options
+
+#### Returns
+
+[`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+The created index
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+
+// Create an index with explicit type
+const ageIndex = collection.createIndex((row) => row.age, {
+  indexType: BasicIndex
+})
+
+// Create an index with collection's default type
+const nameIndex = collection.createIndex((row) => row.name)
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`createIndex`](/db/reference/classes/CollectionImpl#createindex)
+
+***
+
+### currentStateAsChanges()
+
+```ts
+currentStateAsChanges(options): 
+  | void
+  | ChangeMessage<WithVirtualProps<T, TKey>, string | number>[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:888](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L888)
+
+Returns the current state of the collection as an array of changes
+
+#### Parameters
+
+##### options
+
+[`CurrentStateAsChangesOptions`](/db/reference/interfaces/CurrentStateAsChangesOptions) = `{}`
+
+Options including optional where filter
+
+#### Returns
+
+  \| `void`
+  \| [`ChangeMessage`](/db/reference/interfaces/ChangeMessage)\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>, `string` \| `number`\>[]
+
+An array of changes
+
+#### Example
+
+```ts
+// Get all items as changes
+const allChanges = collection.currentStateAsChanges()
+
+// Get only items matching a condition
+const activeChanges = collection.currentStateAsChanges({
+  where: (row) => row.status === 'active'
+})
+
+// Get only items using a pre-compiled expression
+const activeChanges = collection.currentStateAsChanges({
+  whereExpression: eq(row.status, 'active')
+})
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`currentStateAsChanges`](/db/reference/classes/CollectionImpl#currentstateaschanges)
+
+***
+
+### delete()
+
+```ts
+delete(keys, config?): Transaction<any>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:798](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L798)
+
+Deletes one or more items from the collection
+
+#### Parameters
+
+##### keys
+
+Single key or array of keys to delete
+
+`TKey` | `TKey`[]
+
+##### config?
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+Optional configuration including metadata
+
+#### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`any`\>
+
+A Transaction object representing the delete operation(s)
+
+#### Examples
+
+```ts
+// Delete a single item
+const tx = collection.delete("todo-1")
+await tx.isPersisted.promise
+```
+
+```ts
+// Delete multiple items
+const tx = collection.delete(["todo-1", "todo-2"])
+await tx.isPersisted.promise
+```
+
+```ts
+// Delete with metadata
+const tx = collection.delete("todo-1", { metadata: { reason: "completed" } })
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.delete("item-1")
+  await tx.isPersisted.promise
+  console.log('Delete successful')
+} catch (error) {
+  console.log('Delete failed:', error)
+}
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`delete`](/db/reference/classes/CollectionImpl#delete)
+
+***
+
+### entries()
+
+```ts
+entries(): IterableIterator<[TKey, WithVirtualProps<T, TKey>]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:520](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L520)
+
+Get all entries (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\]\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`entries`](/db/reference/classes/CollectionImpl#entries)
+
+***
+
+### forEach()
+
+```ts
+forEach(callbackfn): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:541](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L541)
+
+Execute a callback for each entry in the collection
+
+#### Parameters
+
+##### callbackfn
+
+(`value`, `key`, `index`) => `void`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`forEach`](/db/reference/classes/CollectionImpl#foreach)
+
+***
+
+### get()
+
+```ts
+get(key): 
+  | WithVirtualProps<T, TKey>
+  | undefined;
+```
+
+Defined in: [packages/db/src/collection/index.ts:480](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L480)
+
+Get the current value for a key (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+  \| [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>
+  \| `undefined`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`get`](/db/reference/classes/CollectionImpl#get)
+
+***
+
+### getIndexMetadata()
+
+```ts
+getIndexMetadata(): CollectionIndexMetadata[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:622](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L622)
+
+Returns a snapshot of current index metadata sorted by indexId.
+Persistence wrappers can use this to bootstrap index state if indexes were
+created before event listeners were attached.
+
+#### Returns
+
+[`CollectionIndexMetadata`](/db/reference/interfaces/CollectionIndexMetadata)[]
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`getIndexMetadata`](/db/reference/classes/CollectionImpl#getindexmetadata)
+
+***
+
+### getKeyFromItem()
+
+```ts
+getKeyFromItem(item): TKey;
+```
+
+Defined in: [packages/db/src/collection/index.ts:572](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L572)
+
+#### Parameters
+
+##### item
+
+`T`
+
+#### Returns
+
+`TKey`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`getKeyFromItem`](/db/reference/classes/CollectionImpl#getkeyfromitem)
+
+***
+
+### has()
+
+```ts
+has(key): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:487](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L487)
+
+Check if a key exists in the collection (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`has`](/db/reference/classes/CollectionImpl#has)
+
+***
+
+### insert()
+
+```ts
+insert(data, config?): Transaction<Record<string, unknown>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:685](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L685)
+
+Inserts one or more items into the collection
+
+#### Parameters
+
+##### data
+
+`TInsertInput` | `TInsertInput`[]
+
+##### config?
+
+[`InsertConfig`](/db/reference/interfaces/InsertConfig)
+
+Optional configuration including metadata
+
+#### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)\&lt;`Record`\&lt;`string`, `unknown`\>\>
+
+A Transaction object representing the insert operation(s)
+
+#### Throws
+
+If the data fails schema validation
+
+#### Examples
+
+```ts
+// Insert a single todo (requires onInsert handler)
+const tx = collection.insert({ id: "1", text: "Buy milk", completed: false })
+await tx.isPersisted.promise
+```
+
+```ts
+// Insert multiple todos at once
+const tx = collection.insert([
+  { id: "1", text: "Buy milk", completed: false },
+  { id: "2", text: "Walk dog", completed: true }
+])
+await tx.isPersisted.promise
+```
+
+```ts
+// Insert with metadata
+const tx = collection.insert({ id: "1", text: "Buy groceries" },
+  { metadata: { source: "mobile-app" } }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.insert({ id: "1", text: "New item" })
+  await tx.isPersisted.promise
+  console.log('Insert successful')
+} catch (error) {
+  console.log('Insert failed:', error)
+}
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`insert`](/db/reference/classes/CollectionImpl#insert)
+
+***
+
+### isReady()
+
+```ts
+isReady(): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:449](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L449)
+
+Check if the collection is ready for use
+Returns true if the collection has been marked as ready by its sync implementation
+
+#### Returns
+
+`boolean`
+
+true if the collection is ready, false otherwise
+
+#### Example
+
+```ts
+if (collection.isReady()) {
+  console.log('Collection is ready, data is available')
+  // Safe to access collection.state
+} else {
+  console.log('Collection is still loading')
+}
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`isReady`](/db/reference/classes/CollectionImpl#isready)
+
+***
+
+### keys()
+
+```ts
+keys(): IterableIterator<TKey>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:501](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L501)
+
+Get all keys (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;`TKey`\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`keys`](/db/reference/classes/CollectionImpl#keys)
+
+***
+
+### map()
+
+```ts
+map<U>(callbackfn): U[];
+```
+
+Defined in: [packages/db/src/collection/index.ts:557](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L557)
+
+Create a new array with the results of calling a function for each entry in the collection
+
+#### Type Parameters
+
+##### U
+
+`U`
+
+#### Parameters
+
+##### callbackfn
+
+(`value`, `key`, `index`) => `U`
+
+#### Returns
+
+`U`[]
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`map`](/db/reference/classes/CollectionImpl#map)
+
+***
+
+### off()
+
+```ts
+off<T>(event, callback): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:968](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L968)
+
+Unsubscribe from a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`off`](/db/reference/classes/CollectionImpl#off)
+
+***
+
+### on()
+
+```ts
+on<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:948](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L948)
+
+Subscribe to a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`on`](/db/reference/classes/CollectionImpl#on)
+
+***
+
+### once()
+
+```ts
+once<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:958](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L958)
+
+Subscribe to a collection event once
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### callback
+
+`CollectionEventHandler`\&lt;`T`\>
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`once`](/db/reference/classes/CollectionImpl#once)
+
+***
+
+### onFirstReady()
+
+```ts
+onFirstReady(callback): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:433](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L433)
+
+Register a callback to be executed when the collection first becomes ready
+Useful for preloading collections
+
+#### Parameters
+
+##### callback
+
+() => `void`
+
+Function to call when the collection first becomes ready
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+collection.onFirstReady(() => {
+  console.log('Collection is ready for the first time')
+  // Safe to access collection.state now
+})
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`onFirstReady`](/db/reference/classes/CollectionImpl#onfirstready)
+
+***
+
+### preload()
+
+```ts
+preload(): Promise<void>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:473](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L473)
+
+Preload the collection data by starting sync if not already started
+Multiple concurrent calls will share the same promise
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`preload`](/db/reference/classes/CollectionImpl#preload)
+
+***
+
+### removeIndex()
+
+```ts
+removeIndex(indexOrId): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:613](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L613)
+
+Removes an index created with createIndex.
+Returns true when an index existed and was removed.
+
+Best-effort semantics: removing an index guarantees it is detached from
+collection query planning. Existing index proxy references should be treated
+as invalid after removal.
+
+#### Parameters
+
+##### indexOrId
+
+`number` | [`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`removeIndex`](/db/reference/classes/CollectionImpl#removeindex)
+
+***
+
+### startSyncImmediate()
+
+```ts
+startSyncImmediate(): void;
+```
+
+Defined in: [packages/db/src/collection/index.ts:465](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L465)
+
+Start sync immediately - internal method for compiled queries
+This bypasses lazy loading for special cases like live query results
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`startSyncImmediate`](/db/reference/classes/CollectionImpl#startsyncimmediate)
+
+***
+
+### stateWhenReady()
+
+```ts
+stateWhenReady(): Promise<Map<TKey, WithVirtualProps<T, TKey>>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:835](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L835)
+
+Gets the current state of the collection as a Map, but only resolves when data is available
+Waits for the first sync commit to complete before resolving
+
+#### Returns
+
+`Promise`\&lt;`Map`\&lt;`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\>\>
+
+Promise that resolves to a Map containing all items in the collection
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`stateWhenReady`](/db/reference/classes/CollectionImpl#statewhenready)
+
+***
+
+### subscribeChanges()
+
+```ts
+subscribeChanges(callback, options): CollectionSubscription;
+```
+
+Defined in: [packages/db/src/collection/index.ts:936](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L936)
+
+Subscribe to changes in the collection
+
+#### Parameters
+
+##### callback
+
+(`changes`) => `void`
+
+Function called when items change
+
+##### options
+
+[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions)\&lt;`T`, `TKey`\> = `{}`
+
+Subscription options including includeInitialState and where filter
+
+#### Returns
+
+`CollectionSubscription`
+
+Unsubscribe function - Call this to stop listening for changes
+
+#### Examples
+
+```ts
+// Basic subscription
+const subscription = collection.subscribeChanges((changes) => {
+  changes.forEach(change => {
+    console.log(`${change.type}: ${change.key}`, change.value)
+  })
+})
+
+// Later: subscription.unsubscribe()
+```
+
+```ts
+// Include current state immediately
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, { includeInitialState: true })
+```
+
+```ts
+// Subscribe only to changes matching a condition using where callback
+import { eq } from "@tanstack/db"
+
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, {
+  includeInitialState: true,
+  where: (row) => eq(row.status, "active")
+})
+```
+
+```ts
+// Using multiple conditions with and()
+import { and, eq, gt } from "@tanstack/db"
+
+const subscription = collection.subscribeChanges((changes) => {
+  updateUI(changes)
+}, {
+  where: (row) => and(eq(row.status, "active"), gt(row.priority, 5))
+})
+```
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`subscribeChanges`](/db/reference/classes/CollectionImpl#subscribechanges)
+
+***
+
+### toArrayWhenReady()
+
+```ts
+toArrayWhenReady(): Promise<WithVirtualProps<T, TKey>[]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:860](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L860)
+
+Gets the current state of the collection as an Array, but only resolves when data is available
+Waits for the first sync commit to complete before resolving
+
+#### Returns
+
+`Promise`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>[]\>
+
+Promise that resolves to an Array containing all items in the collection
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`toArrayWhenReady`](/db/reference/classes/CollectionImpl#toarraywhenready)
+
+***
+
+### update()
+
+#### Call Signature
+
+```ts
+update(key, callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:730](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L730)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### key
+
+`unknown`[]
+
+###### callback
+
+(`drafts`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+##### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`update`](/db/reference/classes/CollectionImpl#update)
+
+#### Call Signature
+
+```ts
+update(
+   keys, 
+   config, 
+   callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:736](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L736)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### keys
+
+`unknown`[]
+
+Single key or array of keys to update
+
+###### config
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+###### callback
+
+(`drafts`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+##### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`update`](/db/reference/classes/CollectionImpl#update)
+
+#### Call Signature
+
+```ts
+update(id, callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:743](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L743)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### id
+
+`unknown`
+
+###### callback
+
+(`draft`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+##### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`update`](/db/reference/classes/CollectionImpl#update)
+
+#### Call Signature
+
+```ts
+update(
+   id, 
+   config, 
+   callback): Transaction;
+```
+
+Defined in: [packages/db/src/collection/index.ts:749](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L749)
+
+Updates one or more items in the collection using a callback function
+
+##### Parameters
+
+###### id
+
+`unknown`
+
+###### config
+
+[`OperationConfig`](/db/reference/interfaces/OperationConfig)
+
+###### callback
+
+(`draft`) => `void`
+
+##### Returns
+
+[`Transaction`](/db/reference/interfaces/Transaction)
+
+A Transaction object representing the update operation(s)
+
+##### Throws
+
+If the updated data fails schema validation
+
+##### Examples
+
+```ts
+// Update single item by key
+const tx = collection.update("todo-1", (draft) => {
+  draft.completed = true
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update multiple items
+const tx = collection.update(["todo-1", "todo-2"], (drafts) => {
+  drafts.forEach(draft => { draft.completed = true })
+})
+await tx.isPersisted.promise
+```
+
+```ts
+// Update with metadata
+const tx = collection.update("todo-1",
+  { metadata: { reason: "user update" } },
+  (draft) => { draft.text = "Updated text" }
+)
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle errors
+try {
+  const tx = collection.update("item-1", draft => { draft.value = "new" })
+  await tx.isPersisted.promise
+  console.log('Update successful')
+} catch (error) {
+  console.log('Update failed:', error)
+}
+```
+
+##### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`update`](/db/reference/classes/CollectionImpl#update)
+
+***
+
+### validateData()
+
+```ts
+validateData(
+   data, 
+   type, 
+   key?): T;
+```
+
+Defined in: [packages/db/src/collection/index.ts:636](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L636)
+
+Validates the data against the schema
+
+#### Parameters
+
+##### data
+
+`unknown`
+
+##### type
+
+`"insert"` | `"update"`
+
+##### key?
+
+`TKey`
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`validateData`](/db/reference/classes/CollectionImpl#validatedata)
+
+***
+
+### values()
+
+```ts
+values(): IterableIterator<WithVirtualProps<T, TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:508](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L508)
+
+Get all values (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`values`](/db/reference/classes/CollectionImpl#values)
+
+***
+
+### waitFor()
+
+```ts
+waitFor<T>(event, timeout?): Promise<AllCollectionEvents[T]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:978](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L978)
+
+Wait for a collection event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* 
+  \| `"status:error"`
+  \| `"status:idle"`
+  \| `"status:loading"`
+  \| `"status:ready"`
+  \| `"status:cleaned-up"`
+  \| `"status:change"`
+  \| `"subscribers:change"`
+  \| `"loadingSubset:change"`
+  \| `"truncate"`
+  \| `"index:added"`
+  \| `"index:removed"`
+
+#### Parameters
+
+##### event
+
+`T`
+
+##### timeout?
+
+`number`
+
+#### Returns
+
+`Promise`\&lt;`AllCollectionEvents`\[`T`\]\>
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`waitFor`](/db/reference/classes/CollectionImpl#waitfor)
diff --git a/mintlify/db/reference/interfaces/CollectionConfig.md b/mintlify/db/reference/interfaces/CollectionConfig.md
new file mode 100644
index 000000000..5d8889fe2
--- /dev/null
+++ b/mintlify/db/reference/interfaces/CollectionConfig.md
@@ -0,0 +1,513 @@
+---
+id: CollectionConfig
+title: CollectionConfig
+---
+
+# Interface: CollectionConfig\&lt;T, TKey, TSchema, TUtils\>
+
+Defined in: [packages/db/src/types.ts:747](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L747)
+
+## Extends
+
+- [`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig)\&lt;`T`, `TKey`, `TSchema`, `TUtils`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Properties
+
+### autoIndex?
+
+```ts
+optional autoIndex: "off" | "eager";
+```
+
+Defined in: [packages/db/src/types.ts:571](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L571)
+
+Auto-indexing mode for the collection.
+When enabled, indexes will be automatically created for simple where expressions.
+
+#### Default
+
+```ts
+"off"
+```
+
+#### Description
+
+- "off": No automatic indexing (default). Use explicit indexes for better bundle size.
+- "eager": Automatically create indexes for simple where expressions in subscribeChanges.
+           Requires setting defaultIndexType.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`autoIndex`](/db/reference/interfaces/BaseCollectionConfig#autoindex)
+
+***
+
+### compare()?
+
+```ts
+optional compare: (x, y) => number;
+```
+
+Defined in: [packages/db/src/types.ts:596](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L596)
+
+Optional function to compare two items.
+This is used to order the items in the collection.
+
+#### Parameters
+
+##### x
+
+`T`
+
+The first item to compare
+
+##### y
+
+`T`
+
+The second item to compare
+
+#### Returns
+
+`number`
+
+A number indicating the order of the items
+
+#### Example
+
+```ts
+// For a collection with a 'createdAt' field
+compare: (x, y) => x.createdAt.getTime() - y.createdAt.getTime()
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`compare`](/db/reference/interfaces/BaseCollectionConfig#compare)
+
+***
+
+### defaultIndexType?
+
+```ts
+optional defaultIndexType: IndexConstructor<TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:585](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L585)
+
+Default index type to use when creating indexes without an explicit type.
+Required for auto-indexing. Import from '@tanstack/db'.
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+const collection = createCollection({
+  defaultIndexType: BasicIndex,
+  autoIndex: 'eager',
+  // ...
+})
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`defaultIndexType`](/db/reference/interfaces/BaseCollectionConfig#defaultindextype)
+
+***
+
+### defaultStringCollation?
+
+```ts
+optional defaultStringCollation: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/types.ts:742](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L742)
+
+Specifies how to compare data in the collection.
+This should be configured to match data ordering on the backend.
+E.g., when using the Electric DB collection these options
+      should match the database's collation settings.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`defaultStringCollation`](/db/reference/interfaces/BaseCollectionConfig#defaultstringcollation)
+
+***
+
+### gcTime?
+
+```ts
+optional gcTime: number;
+```
+
+Defined in: [packages/db/src/types.ts:550](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L550)
+
+Time in milliseconds after which the collection will be garbage collected
+when it has no active subscribers. Defaults to 5 minutes (300000ms).
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`gcTime`](/db/reference/interfaces/BaseCollectionConfig#gctime)
+
+***
+
+### getKey()
+
+```ts
+getKey: (item) => TKey;
+```
+
+Defined in: [packages/db/src/types.ts:545](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L545)
+
+Function to extract the ID from an object
+This is required for update/delete operations which now only accept IDs
+
+#### Parameters
+
+##### item
+
+`T`
+
+The item to extract the ID from
+
+#### Returns
+
+`TKey`
+
+The ID string for the item
+
+#### Example
+
+```ts
+// For a collection with a 'uuid' field as the primary key
+getKey: (item) => item.uuid
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`getKey`](/db/reference/interfaces/BaseCollectionConfig#getkey)
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:534](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L534)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`id`](/db/reference/interfaces/BaseCollectionConfig#id)
+
+***
+
+### onDelete?
+
+```ts
+optional onDelete: DeleteMutationFn<T, TKey, TUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:734](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L734)
+
+Optional asynchronous handler function called before a delete operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic delete handler
+onDelete: async ({ transaction, collection }) => {
+  const deletedKey = transaction.mutations[0].key
+  await api.deleteTodo(deletedKey)
+}
+```
+
+```ts
+// Delete handler with multiple items
+onDelete: async ({ transaction, collection }) => {
+  const keysToDelete = transaction.mutations.map(m => m.key)
+  await api.deleteTodos(keysToDelete)
+}
+```
+
+```ts
+// Delete handler with confirmation
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const shouldDelete = await confirmDeletion(mutation.original)
+  if (!shouldDelete) {
+    throw new Error('Delete cancelled by user')
+  }
+  await api.deleteTodo(mutation.original.id)
+}
+```
+
+```ts
+// Delete handler with optimistic rollback
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.deleteTodo(mutation.original.id)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Delete failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onDelete`](/db/reference/interfaces/BaseCollectionConfig#ondelete)
+
+***
+
+### onInsert?
+
+```ts
+optional onInsert: InsertMutationFn<T, TKey, TUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L647)
+
+Optional asynchronous handler function called before an insert operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic insert handler
+onInsert: async ({ transaction, collection }) => {
+  const newItem = transaction.mutations[0].modified
+  await api.createTodo(newItem)
+}
+```
+
+```ts
+// Insert handler with multiple items
+onInsert: async ({ transaction, collection }) => {
+  const items = transaction.mutations.map(m => m.modified)
+  await api.createTodos(items)
+}
+```
+
+```ts
+// Insert handler with error handling
+onInsert: async ({ transaction, collection }) => {
+  try {
+    const newItem = transaction.mutations[0].modified
+    const result = await api.createTodo(newItem)
+    return result
+  } catch (error) {
+    console.error('Insert failed:', error)
+    throw error // This will cause the transaction to fail
+  }
+}
+```
+
+```ts
+// Insert handler with metadata
+onInsert: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  await api.createTodo(mutation.modified, {
+    source: mutation.metadata?.source,
+    timestamp: mutation.createdAt
+  })
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onInsert`](/db/reference/interfaces/BaseCollectionConfig#oninsert)
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: UpdateMutationFn<T, TKey, TUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:691](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L691)
+
+Optional asynchronous handler function called before an update operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic update handler
+onUpdate: async ({ transaction, collection }) => {
+  const updatedItem = transaction.mutations[0].modified
+  await api.updateTodo(updatedItem.id, updatedItem)
+}
+```
+
+```ts
+// Update handler with partial updates
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const changes = mutation.changes // Only the changed fields
+  await api.updateTodo(mutation.original.id, changes)
+}
+```
+
+```ts
+// Update handler with multiple items
+onUpdate: async ({ transaction, collection }) => {
+  const updates = transaction.mutations.map(m => ({
+    id: m.key,
+    changes: m.changes
+  }))
+  await api.updateTodos(updates)
+}
+```
+
+```ts
+// Update handler with optimistic rollback
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.updateTodo(mutation.original.id, mutation.changes)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Update failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onUpdate`](/db/reference/interfaces/BaseCollectionConfig#onupdate)
+
+***
+
+### schema?
+
+```ts
+optional schema: TSchema;
+```
+
+Defined in: [packages/db/src/types.ts:535](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L535)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`schema`](/db/reference/interfaces/BaseCollectionConfig#schema)
+
+***
+
+### startSync?
+
+```ts
+optional startSync: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:561](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L561)
+
+Whether to eagerly start syncing on collection creation.
+When true, syncing begins immediately. When false, syncing starts when the first subscriber attaches.
+
+Note: Even with startSync=true, collections will pause syncing when there are no active
+subscribers (typically when components querying the collection unmount), resuming when new
+subscribers attach. This preserves normal staleTime/gcTime behavior.
+
+#### Default
+
+```ts
+false
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`startSync`](/db/reference/interfaces/BaseCollectionConfig#startsync)
+
+***
+
+### sync
+
+```ts
+sync: SyncConfig<T, TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:753](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L753)
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: SyncMode;
+```
+
+Defined in: [packages/db/src/types.ts:605](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L605)
+
+The mode of sync to use for the collection.
+
+#### Default
+
+`eager`
+
+#### Description
+
+- `eager`: syncs all data immediately on preload
+- `on-demand`: syncs data in incremental snapshots when the collection is queried
+The exact implementation of the sync mode is up to the sync implementation.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`syncMode`](/db/reference/interfaces/BaseCollectionConfig#syncmode)
+
+***
+
+### utils?
+
+```ts
+optional utils: TUtils;
+```
+
+Defined in: [packages/db/src/types.ts:744](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L744)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`utils`](/db/reference/interfaces/BaseCollectionConfig#utils)
diff --git a/mintlify/db/reference/interfaces/CollectionIndexMetadata.md b/mintlify/db/reference/interfaces/CollectionIndexMetadata.md
new file mode 100644
index 000000000..500b6bf6f
--- /dev/null
+++ b/mintlify/db/reference/interfaces/CollectionIndexMetadata.md
@@ -0,0 +1,83 @@
+---
+id: CollectionIndexMetadata
+title: CollectionIndexMetadata
+---
+
+# Interface: CollectionIndexMetadata
+
+Defined in: [packages/db/src/collection/events.ts:70](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L70)
+
+## Properties
+
+### expression
+
+```ts
+expression: BasicExpression;
+```
+
+Defined in: [packages/db/src/collection/events.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L82)
+
+***
+
+### indexId
+
+```ts
+indexId: number;
+```
+
+Defined in: [packages/db/src/collection/events.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L80)
+
+***
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/db/src/collection/events.ts:81](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L81)
+
+***
+
+### options?
+
+```ts
+optional options: CollectionIndexSerializableValue;
+```
+
+Defined in: [packages/db/src/collection/events.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L84)
+
+***
+
+### resolver
+
+```ts
+resolver: CollectionIndexResolverMetadata;
+```
+
+Defined in: [packages/db/src/collection/events.ts:83](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L83)
+
+***
+
+### signature
+
+```ts
+signature: string;
+```
+
+Defined in: [packages/db/src/collection/events.ts:79](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L79)
+
+Stable signature derived from expression + serializable options.
+Non-serializable option fields are intentionally omitted.
+
+***
+
+### signatureVersion
+
+```ts
+signatureVersion: 1;
+```
+
+Defined in: [packages/db/src/collection/events.ts:74](https://github.com/TanStack/db/blob/main/packages/db/src/collection/events.ts#L74)
+
+Version for the signature serialization contract.
diff --git a/mintlify/db/reference/interfaces/CollectionLike.md b/mintlify/db/reference/interfaces/CollectionLike.md
new file mode 100644
index 000000000..62358f078
--- /dev/null
+++ b/mintlify/db/reference/interfaces/CollectionLike.md
@@ -0,0 +1,150 @@
+---
+id: CollectionLike
+title: CollectionLike
+---
+
+# Interface: CollectionLike\&lt;T, TKey\>
+
+Defined in: [packages/db/src/types.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L15)
+
+Interface for a collection-like object that provides the necessary methods
+for the change events system to work
+
+## Extends
+
+- `Pick`\&lt;[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`\>, `"get"` \| `"has"` \| `"entries"` \| `"indexes"` \| `"id"` \| `"compareOptions"`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### compareOptions
+
+```ts
+compareOptions: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/collection/index.ts:644](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L644)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`compareOptions`](/db/reference/classes/CollectionImpl#compareoptions)
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/db/src/collection/index.ts:280](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L280)
+
+#### Inherited from
+
+[`CollectionImpl`](/db/reference/classes/CollectionImpl).[`id`](/db/reference/classes/CollectionImpl#id)
+
+***
+
+### indexes
+
+```ts
+indexes: Map<number, BaseIndex<TKey>>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:629](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L629)
+
+#### Inherited from
+
+```ts
+Pick.indexes
+```
+
+## Methods
+
+### entries()
+
+```ts
+entries(): IterableIterator<[TKey, WithVirtualProps<T, TKey>]>;
+```
+
+Defined in: [packages/db/src/collection/index.ts:520](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L520)
+
+Get all entries (virtual derived state)
+
+#### Returns
+
+`IterableIterator`\&lt;\[`TKey`, [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\]\>
+
+#### Inherited from
+
+```ts
+Pick.entries
+```
+
+***
+
+### get()
+
+```ts
+get(key): 
+  | WithVirtualProps<T, TKey>
+  | undefined;
+```
+
+Defined in: [packages/db/src/collection/index.ts:480](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L480)
+
+Get the current value for a key (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+  \| [`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>
+  \| `undefined`
+
+#### Inherited from
+
+```ts
+Pick.get
+```
+
+***
+
+### has()
+
+```ts
+has(key): boolean;
+```
+
+Defined in: [packages/db/src/collection/index.ts:487](https://github.com/TanStack/db/blob/main/packages/db/src/collection/index.ts#L487)
+
+Check if a key exists in the collection (virtual derived state)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+```ts
+Pick.has
+```
diff --git a/mintlify/db/reference/interfaces/Context.md b/mintlify/db/reference/interfaces/Context.md
new file mode 100644
index 000000000..bf497cf24
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Context.md
@@ -0,0 +1,140 @@
+---
+id: Context
+title: Context
+---
+
+# Interface: Context
+
+Defined in: [packages/db/src/query/builder/types.ts:43](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L43)
+
+Context - The central state container for query builder operations
+
+This interface tracks all the information needed to build and type-check queries:
+
+**Schema Management**:
+- `baseSchema`: The original tables/collections from the `from()` clause
+- `schema`: Current available tables (expands with joins, contracts with subqueries)
+
+**Query State**:
+- `fromSourceName`: Which table was used in `from()` or the first
+  `unionAll()` source - needed for optionality logic
+- `hasJoins`: Whether any joins have been added (affects result type inference)
+- `joinTypes`: Maps table aliases to their join types for optionality calculations
+
+**Result Tracking**:
+- `result`: The final shape after `select()` - undefined until select is called
+
+The context evolves through the query builder chain:
+1. `from()` sets baseSchema and schema to the same thing
+2. `join()` expands schema and sets hasJoins/joinTypes
+3. `select()` sets result to the projected shape
+
+## Properties
+
+### baseSchema
+
+```ts
+baseSchema: ContextSchema;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:45](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L45)
+
+***
+
+### fromSourceName
+
+```ts
+fromSourceName: string;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:51](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L51)
+
+***
+
+### fromSourceNames?
+
+```ts
+optional fromSourceNames: readonly string[];
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:53](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L53)
+
+***
+
+### hasJoins?
+
+```ts
+optional hasJoins: boolean;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:57](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L57)
+
+***
+
+### hasResult?
+
+```ts
+optional hasResult: true;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L66)
+
+***
+
+### hasUnionFrom?
+
+```ts
+optional hasUnionFrom: true;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:55](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L55)
+
+***
+
+### joinTypes?
+
+```ts
+optional joinTypes: Record<string, "inner" | "left" | "right" | "full" | "outer" | "cross">;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L59)
+
+***
+
+### refsSchema?
+
+```ts
+optional refsSchema: ContextSchema;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:49](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L49)
+
+***
+
+### result?
+
+```ts
+optional result: any;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:64](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L64)
+
+***
+
+### schema
+
+```ts
+schema: ContextSchema;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:47](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L47)
+
+***
+
+### singleResult?
+
+```ts
+optional singleResult: boolean;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:68](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L68)
diff --git a/mintlify/db/reference/interfaces/CreateOptimisticActionsOptions.md b/mintlify/db/reference/interfaces/CreateOptimisticActionsOptions.md
new file mode 100644
index 000000000..35bcb1e64
--- /dev/null
+++ b/mintlify/db/reference/interfaces/CreateOptimisticActionsOptions.md
@@ -0,0 +1,118 @@
+---
+id: CreateOptimisticActionsOptions
+title: CreateOptimisticActionsOptions
+---
+
+# Interface: CreateOptimisticActionsOptions\&lt;TVars, T\>
+
+Defined in: [packages/db/src/types.ts:181](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L181)
+
+Options for the createOptimisticAction helper
+
+## Extends
+
+- `Omit`\&lt;[`TransactionConfig`](/db/reference/interfaces/TransactionConfig)\&lt;`T`\>, `"mutationFn"`\>
+
+## Type Parameters
+
+### TVars
+
+`TVars` = `unknown`
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### autoCommit?
+
+```ts
+optional autoCommit: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:172](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L172)
+
+#### Inherited from
+
+[`TransactionConfig`](/db/reference/interfaces/TransactionConfig).[`autoCommit`](/db/reference/interfaces/TransactionConfig#autocommit)
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:170](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L170)
+
+Unique identifier for the transaction
+
+#### Inherited from
+
+[`TransactionConfig`](/db/reference/interfaces/TransactionConfig).[`id`](/db/reference/interfaces/TransactionConfig#id)
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:175](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L175)
+
+Custom metadata to associate with the transaction
+
+#### Inherited from
+
+[`TransactionConfig`](/db/reference/interfaces/TransactionConfig).[`metadata`](/db/reference/interfaces/TransactionConfig#metadata)
+
+***
+
+### mutationFn()
+
+```ts
+mutationFn: (vars, params) => Promise<any>;
+```
+
+Defined in: [packages/db/src/types.ts:188](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L188)
+
+Function to execute the mutation on the server
+
+#### Parameters
+
+##### vars
+
+`TVars`
+
+##### params
+
+[`MutationFnParams`](/db/reference/type-aliases/MutationFnParams)\&lt;`T`\>
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+***
+
+### onMutate()
+
+```ts
+onMutate: (vars) => void;
+```
+
+Defined in: [packages/db/src/types.ts:186](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L186)
+
+Function to apply optimistic updates locally before the mutation completes
+
+#### Parameters
+
+##### vars
+
+`TVars`
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/interfaces/CurrentStateAsChangesOptions.md b/mintlify/db/reference/interfaces/CurrentStateAsChangesOptions.md
new file mode 100644
index 000000000..accb75274
--- /dev/null
+++ b/mintlify/db/reference/interfaces/CurrentStateAsChangesOptions.md
@@ -0,0 +1,52 @@
+---
+id: CurrentStateAsChangesOptions
+title: CurrentStateAsChangesOptions
+---
+
+# Interface: CurrentStateAsChangesOptions
+
+Defined in: [packages/db/src/types.ts:880](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L880)
+
+Options for getting current state as changes
+
+## Properties
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [packages/db/src/types.ts:884](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L884)
+
+***
+
+### optimizedOnly?
+
+```ts
+optional optimizedOnly: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:885](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L885)
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: OrderBy;
+```
+
+Defined in: [packages/db/src/types.ts:883](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L883)
+
+***
+
+### where?
+
+```ts
+optional where: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:882](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L882)
+
+Pre-compiled expression for filtering the current state
diff --git a/mintlify/db/reference/interfaces/DebounceStrategy.md b/mintlify/db/reference/interfaces/DebounceStrategy.md
new file mode 100644
index 000000000..150d9effd
--- /dev/null
+++ b/mintlify/db/reference/interfaces/DebounceStrategy.md
@@ -0,0 +1,97 @@
+---
+id: DebounceStrategy
+title: DebounceStrategy
+---
+
+# Interface: DebounceStrategy
+
+Defined in: [packages/db/src/strategies/types.ts:42](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L42)
+
+Debounce strategy that delays execution until activity stops
+
+## Extends
+
+- [`BaseStrategy`](/db/reference/interfaces/BaseStrategy)\&lt;`"debounce"`\>
+
+## Properties
+
+### \_type
+
+```ts
+_type: "debounce";
+```
+
+Defined in: [packages/db/src/strategies/types.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L8)
+
+Type discriminator for strategy identification
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`_type`](/db/reference/interfaces/BaseStrategy#_type)
+
+***
+
+### cleanup()
+
+```ts
+cleanup: () => void;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L23)
+
+Clean up any resources held by the strategy
+Should be called when the strategy is no longer needed
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`cleanup`](/db/reference/interfaces/BaseStrategy#cleanup)
+
+***
+
+### execute()
+
+```ts
+execute: <T>(fn) => void | Promise<void>;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L15)
+
+Execute a function according to the strategy's timing rules
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+#### Parameters
+
+##### fn
+
+() => [`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+The function to execute
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+The result of the function execution (if applicable)
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`execute`](/db/reference/interfaces/BaseStrategy#execute)
+
+***
+
+### options
+
+```ts
+options: DebounceStrategyOptions;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:43](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L43)
diff --git a/mintlify/db/reference/interfaces/DebounceStrategyOptions.md b/mintlify/db/reference/interfaces/DebounceStrategyOptions.md
new file mode 100644
index 000000000..99e5fe458
--- /dev/null
+++ b/mintlify/db/reference/interfaces/DebounceStrategyOptions.md
@@ -0,0 +1,47 @@
+---
+id: DebounceStrategyOptions
+title: DebounceStrategyOptions
+---
+
+# Interface: DebounceStrategyOptions
+
+Defined in: [packages/db/src/strategies/types.ts:30](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L30)
+
+Options for debounce strategy
+Delays execution until after a period of inactivity
+
+## Properties
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:34](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L34)
+
+Execute immediately on the first call
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:36](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L36)
+
+Execute after the wait period on the last call
+
+***
+
+### wait
+
+```ts
+wait: number;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:32](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L32)
+
+Wait time in milliseconds before execution
diff --git a/mintlify/db/reference/interfaces/Effect.md b/mintlify/db/reference/interfaces/Effect.md
new file mode 100644
index 000000000..3fa64bda8
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Effect.md
@@ -0,0 +1,38 @@
+---
+id: Effect
+title: Effect
+---
+
+# Interface: Effect
+
+Defined in: [packages/db/src/query/effect.ts:134](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L134)
+
+Handle returned by createEffect
+
+## Properties
+
+### dispose()
+
+```ts
+dispose: () => Promise<void>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:136](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L136)
+
+Dispose the effect. Returns a promise that resolves when in-flight handlers complete.
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### disposed
+
+```ts
+readonly disposed: boolean;
+```
+
+Defined in: [packages/db/src/query/effect.ts:138](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L138)
+
+Whether this effect has been disposed
diff --git a/mintlify/db/reference/interfaces/EffectConfig.md b/mintlify/db/reference/interfaces/EffectConfig.md
new file mode 100644
index 000000000..0ad194822
--- /dev/null
+++ b/mintlify/db/reference/interfaces/EffectConfig.md
@@ -0,0 +1,156 @@
+---
+id: EffectConfig
+title: EffectConfig
+---
+
+# Interface: EffectConfig\&lt;TRow, TKey\>
+
+Defined in: [packages/db/src/query/effect.ts:93](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L93)
+
+Effect configuration
+
+## Type Parameters
+
+### TRow
+
+`TRow` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/query/effect.ts:98](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L98)
+
+Optional ID for debugging/tracing
+
+***
+
+### onBatch?
+
+```ts
+optional onBatch: EffectBatchHandler<TRow, TKey>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:113](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L113)
+
+Called once per graph run with all delta events from that batch
+
+***
+
+### onEnter?
+
+```ts
+optional onEnter: EffectEventHandler<TRow, TKey>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:104](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L104)
+
+Called once for each row entering the query result
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, event) => void;
+```
+
+Defined in: [packages/db/src/query/effect.ts:116](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L116)
+
+Error handler for exceptions thrown by effect callbacks
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### event
+
+[`DeltaEvent`](/db/reference/type-aliases/DeltaEvent)\&lt;`TRow`, `TKey`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onExit?
+
+```ts
+optional onExit: EffectEventHandler<TRow, TKey>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:110](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L110)
+
+Called once for each row exiting the query result
+
+***
+
+### onSourceError()?
+
+```ts
+optional onSourceError: (error) => void;
+```
+
+Defined in: [packages/db/src/query/effect.ts:123](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L123)
+
+Called when a source collection enters an error or cleaned-up state.
+The effect is automatically disposed after this callback fires.
+If not provided, the error is logged to console.error.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+#### Returns
+
+`void`
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: EffectEventHandler<TRow, TKey>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:107](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L107)
+
+Called once for each row updating within the query result
+
+***
+
+### query
+
+```ts
+query: EffectQueryInput<any>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L101)
+
+Query to watch for deltas
+
+***
+
+### skipInitial?
+
+```ts
+optional skipInitial: boolean;
+```
+
+Defined in: [packages/db/src/query/effect.ts:130](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L130)
+
+Skip deltas during initial collection load.
+Defaults to false (process all deltas including initial sync).
+Set to true for effects that should only process new changes.
diff --git a/mintlify/db/reference/interfaces/EffectContext.md b/mintlify/db/reference/interfaces/EffectContext.md
new file mode 100644
index 000000000..db13c1ab3
--- /dev/null
+++ b/mintlify/db/reference/interfaces/EffectContext.md
@@ -0,0 +1,34 @@
+---
+id: EffectContext
+title: EffectContext
+---
+
+# Interface: EffectContext
+
+Defined in: [packages/db/src/query/effect.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L67)
+
+Context passed to effect handlers
+
+## Properties
+
+### effectId
+
+```ts
+effectId: string;
+```
+
+Defined in: [packages/db/src/query/effect.ts:69](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L69)
+
+ID of this effect (auto-generated if not provided)
+
+***
+
+### signal
+
+```ts
+signal: AbortSignal;
+```
+
+Defined in: [packages/db/src/query/effect.ts:71](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L71)
+
+Aborted when effect.dispose() is called
diff --git a/mintlify/db/reference/interfaces/IndexDevModeConfig.md b/mintlify/db/reference/interfaces/IndexDevModeConfig.md
new file mode 100644
index 000000000..90dfadcd9
--- /dev/null
+++ b/mintlify/db/reference/interfaces/IndexDevModeConfig.md
@@ -0,0 +1,56 @@
+---
+id: IndexDevModeConfig
+title: IndexDevModeConfig
+---
+
+# Interface: IndexDevModeConfig
+
+Defined in: [packages/db/src/indexes/index-registry.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L15)
+
+## Properties
+
+### collectionSizeThreshold
+
+```ts
+collectionSizeThreshold: number;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:19](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L19)
+
+Suggest indexes when collection has more than this many items
+
+***
+
+### enabled
+
+```ts
+enabled: boolean;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:17](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L17)
+
+Enable dev mode index suggestions
+
+***
+
+### onSuggestion
+
+```ts
+onSuggestion: (suggestion) => void | null;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L23)
+
+Custom handler for index suggestions
+
+***
+
+### slowQueryThresholdMs
+
+```ts
+slowQueryThresholdMs: number;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:21](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L21)
+
+Suggest indexes when queries take longer than this (ms)
diff --git a/mintlify/db/reference/interfaces/IndexInterface.md b/mintlify/db/reference/interfaces/IndexInterface.md
new file mode 100644
index 000000000..d5c47e309
--- /dev/null
+++ b/mintlify/db/reference/interfaces/IndexInterface.md
@@ -0,0 +1,528 @@
+---
+id: IndexInterface
+title: IndexInterface
+---
+
+# Interface: IndexInterface\&lt;TKey\>
+
+Defined in: [packages/db/src/indexes/base-index.ts:28](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L28)
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### add()
+
+```ts
+add: (key, item) => void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:31](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L31)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+***
+
+### build()
+
+```ts
+build: (entries) => void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:35](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L35)
+
+#### Parameters
+
+##### entries
+
+`Iterable`\&lt;\[`TKey`, `any`\]\>
+
+#### Returns
+
+`void`
+
+***
+
+### clear()
+
+```ts
+clear: () => void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:36](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L36)
+
+#### Returns
+
+`void`
+
+***
+
+### equalityLookup()
+
+```ts
+equalityLookup: (value) => Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:40](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L40)
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### getStats()
+
+```ts
+getStats: () => IndexStats;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L84)
+
+#### Returns
+
+[`IndexStats`](/db/reference/interfaces/IndexStats)
+
+***
+
+### inArrayLookup()
+
+```ts
+inArrayLookup: (values) => Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:41](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L41)
+
+#### Parameters
+
+##### values
+
+`any`[]
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### lookup()
+
+```ts
+lookup: (operation, value) => Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:38](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L38)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### matchesCompareOptions()
+
+```ts
+matchesCompareOptions: (compareOptions) => boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:81](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L81)
+
+#### Parameters
+
+##### compareOptions
+
+`CompareOptions`
+
+#### Returns
+
+`boolean`
+
+***
+
+### matchesDirection()
+
+```ts
+matchesDirection: (direction) => boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L82)
+
+#### Parameters
+
+##### direction
+
+[`OrderByDirection`](/db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection)
+
+#### Returns
+
+`boolean`
+
+***
+
+### matchesField()
+
+```ts
+matchesField: (fieldPath) => boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L80)
+
+#### Parameters
+
+##### fieldPath
+
+`string`[]
+
+#### Returns
+
+`boolean`
+
+***
+
+### rangeQuery()
+
+```ts
+rangeQuery: (options) => Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:43](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L43)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions)
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### rangeQueryReversed()
+
+```ts
+rangeQueryReversed: (options) => Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:44](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L44)
+
+#### Parameters
+
+##### options
+
+[`BTreeRangeQueryOptions`](/db/reference/interfaces/BTreeRangeQueryOptions)
+
+#### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### remove()
+
+```ts
+remove: (key, item) => void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:32](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L32)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### item
+
+`any`
+
+#### Returns
+
+`void`
+
+***
+
+### supports()
+
+```ts
+supports: (operation) => boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:69](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L69)
+
+#### Parameters
+
+##### operation
+
+`"eq"` | `"gt"` | `"gte"` | `"lt"` | `"lte"` | `"in"` | `"like"` | `"ilike"`
+
+#### Returns
+
+`boolean`
+
+***
+
+### take()
+
+```ts
+take: (n, from, filterFn?) => TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:46](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L46)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`TKey`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+***
+
+### takeFromStart()
+
+```ts
+takeFromStart: (n, filterFn?) => TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:51](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L51)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+***
+
+### takeReversed()
+
+```ts
+takeReversed: (n, from, filterFn?) => TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:52](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L52)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### from
+
+`TKey`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+***
+
+### takeReversedFromEnd()
+
+```ts
+takeReversedFromEnd: (n, filterFn?) => TKey[];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:57](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L57)
+
+#### Parameters
+
+##### n
+
+`number`
+
+##### filterFn?
+
+(`key`) => `boolean`
+
+#### Returns
+
+`TKey`[]
+
+***
+
+### update()
+
+```ts
+update: (key, oldItem, newItem) => void;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:33](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L33)
+
+#### Parameters
+
+##### key
+
+`TKey`
+
+##### oldItem
+
+`any`
+
+##### newItem
+
+`any`
+
+#### Returns
+
+`void`
+
+## Accessors
+
+### indexedKeysSet
+
+#### Get Signature
+
+```ts
+get indexedKeysSet(): Set<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L66)
+
+##### Returns
+
+`Set`\&lt;`TKey`\>
+
+***
+
+### keyCount
+
+#### Get Signature
+
+```ts
+get keyCount(): number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:62](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L62)
+
+##### Returns
+
+`number`
+
+***
+
+### orderedEntriesArray
+
+#### Get Signature
+
+```ts
+get orderedEntriesArray(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:63](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L63)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+***
+
+### orderedEntriesArrayReversed
+
+#### Get Signature
+
+```ts
+get orderedEntriesArrayReversed(): [any, Set<TKey>][];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:64](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L64)
+
+##### Returns
+
+\[`any`, `Set`\&lt;`TKey`\>\][]
+
+***
+
+### supportsRangeOptimization
+
+#### Get Signature
+
+```ts
+get supportsRangeOptimization(): boolean;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:78](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L78)
+
+Whether range lookups (gt/gte/lt/lte) on this index can be trusted to
+return every matching key. Range traversal relies on the index ordering, so
+it is unsafe when the index uses a custom comparator, whose order may not
+match the WHERE evaluator's relational operators. Callers must fall back to
+a full scan when this is `false`.
+
+##### Returns
+
+`boolean`
+
+***
+
+### valueMapData
+
+#### Get Signature
+
+```ts
+get valueMapData(): Map<any, Set<TKey>>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L67)
+
+##### Returns
+
+`Map`\&lt;`any`, `Set`\&lt;`TKey`\>\>
diff --git a/mintlify/db/reference/interfaces/IndexOptions.md b/mintlify/db/reference/interfaces/IndexOptions.md
new file mode 100644
index 000000000..290fdc53e
--- /dev/null
+++ b/mintlify/db/reference/interfaces/IndexOptions.md
@@ -0,0 +1,52 @@
+---
+id: IndexOptions
+title: IndexOptions
+---
+
+# Interface: IndexOptions\&lt;TIndexType\>
+
+Defined in: [packages/db/src/indexes/index-options.ts:6](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-options.ts#L6)
+
+Options for creating an index
+
+## Type Parameters
+
+### TIndexType
+
+`TIndexType` *extends* [`IndexConstructor`](/db/reference/type-aliases/IndexConstructor) = [`IndexConstructor`](/db/reference/type-aliases/IndexConstructor)
+
+## Properties
+
+### indexType?
+
+```ts
+optional indexType: TIndexType;
+```
+
+Defined in: [packages/db/src/indexes/index-options.ts:12](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-options.ts#L12)
+
+Index type to use (e.g., BasicIndex, BTreeIndex)
+
+***
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [packages/db/src/indexes/index-options.ts:10](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-options.ts#L10)
+
+Optional name for the index
+
+***
+
+### options?
+
+```ts
+optional options: TIndexType extends (id, expr, name?, options?) => any ? O : never;
+```
+
+Defined in: [packages/db/src/indexes/index-options.ts:14](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-options.ts#L14)
+
+Options passed to the index constructor
diff --git a/mintlify/db/reference/interfaces/IndexStats.md b/mintlify/db/reference/interfaces/IndexStats.md
new file mode 100644
index 000000000..ff3db9e4b
--- /dev/null
+++ b/mintlify/db/reference/interfaces/IndexStats.md
@@ -0,0 +1,50 @@
+---
+id: IndexStats
+title: IndexStats
+---
+
+# Interface: IndexStats
+
+Defined in: [packages/db/src/indexes/base-index.ts:21](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L21)
+
+Statistics about index usage and performance
+
+## Properties
+
+### averageLookupTime
+
+```ts
+readonly averageLookupTime: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:24](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L24)
+
+***
+
+### entryCount
+
+```ts
+readonly entryCount: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:22](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L22)
+
+***
+
+### lastUpdated
+
+```ts
+readonly lastUpdated: Date;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:25](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L25)
+
+***
+
+### lookupCount
+
+```ts
+readonly lookupCount: number;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L23)
diff --git a/mintlify/db/reference/interfaces/IndexSuggestion.md b/mintlify/db/reference/interfaces/IndexSuggestion.md
new file mode 100644
index 000000000..24cdd19e5
--- /dev/null
+++ b/mintlify/db/reference/interfaces/IndexSuggestion.md
@@ -0,0 +1,78 @@
+---
+id: IndexSuggestion
+title: IndexSuggestion
+---
+
+# Interface: IndexSuggestion
+
+Defined in: [packages/db/src/indexes/index-registry.ts:26](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L26)
+
+## Properties
+
+### collectionId
+
+```ts
+collectionId: string;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:28](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L28)
+
+***
+
+### collectionSize?
+
+```ts
+optional collectionSize: number;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:31](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L31)
+
+***
+
+### fieldPath
+
+```ts
+fieldPath: string[];
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:29](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L29)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:30](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L30)
+
+***
+
+### queryCount?
+
+```ts
+optional queryCount: number;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:33](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L33)
+
+***
+
+### queryTimeMs?
+
+```ts
+optional queryTimeMs: number;
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:32](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L32)
+
+***
+
+### type
+
+```ts
+type: "collection-size" | "slow-query" | "frequent-field";
+```
+
+Defined in: [packages/db/src/indexes/index-registry.ts:27](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/index-registry.ts#L27)
diff --git a/mintlify/db/reference/interfaces/InsertConfig.md b/mintlify/db/reference/interfaces/InsertConfig.md
new file mode 100644
index 000000000..7e4007630
--- /dev/null
+++ b/mintlify/db/reference/interfaces/InsertConfig.md
@@ -0,0 +1,30 @@
+---
+id: InsertConfig
+title: InsertConfig
+---
+
+# Interface: InsertConfig
+
+Defined in: [packages/db/src/types.ts:439](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L439)
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:440](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L440)
+
+***
+
+### optimistic?
+
+```ts
+optional optimistic: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:442](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L442)
+
+Whether to apply optimistic updates immediately. Defaults to true.
diff --git a/mintlify/db/reference/interfaces/LiveQueryCollectionConfig.md b/mintlify/db/reference/interfaces/LiveQueryCollectionConfig.md
new file mode 100644
index 000000000..8a669dec3
--- /dev/null
+++ b/mintlify/db/reference/interfaces/LiveQueryCollectionConfig.md
@@ -0,0 +1,185 @@
+---
+id: LiveQueryCollectionConfig
+title: LiveQueryCollectionConfig
+---
+
+# Interface: LiveQueryCollectionConfig\&lt;TContext, TResult\>
+
+Defined in: [packages/db/src/query/live/types.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L59)
+
+Configuration interface for live query collection options
+
+## Example
+
+```typescript
+const config: LiveQueryCollectionConfig<any, any> = {
+  // id is optional - will auto-generate "live-query-1", "live-query-2", etc.
+  query: (q) => q
+    .from({ comment: commentsCollection })
+    .join(
+      { user: usersCollection },
+      ({ comment, user }) => eq(comment.user_id, user.id)
+    )
+    .where(({ comment }) => eq(comment.active, true))
+    .select(({ comment, user }) => ({
+      id: comment.id,
+      content: comment.content,
+      authorName: user.name,
+    })),
+  // getKey is optional - defaults to using stream key
+  getKey: (item) => item.id,
+}
+```
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+### TResult
+
+`TResult` *extends* `object` = `RootQueryResult`\&lt;`TContext`\>
+
+## Properties
+
+### defaultStringCollation?
+
+```ts
+optional defaultStringCollation: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:115](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L115)
+
+Optional compare options for string sorting.
+If provided, these will be used instead of inheriting from the FROM collection.
+
+***
+
+### gcTime?
+
+```ts
+optional gcTime: number;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:104](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L104)
+
+GC time for the collection
+
+***
+
+### getKey()?
+
+```ts
+optional getKey: (item) => string | number;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L82)
+
+Function to extract the key from result items
+If not provided, defaults to using the key from the D2 stream
+
+#### Parameters
+
+##### item
+
+`TResult`
+
+#### Returns
+
+`string` \| `number`
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L67)
+
+Unique identifier for the collection
+If not provided, defaults to `live-query-${number}` with auto-incrementing number
+
+***
+
+### onDelete?
+
+```ts
+optional onDelete: DeleteMutationFn<TResult, string | number, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:94](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L94)
+
+***
+
+### onInsert?
+
+```ts
+optional onInsert: InsertMutationFn<TResult, string | number, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:92](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L92)
+
+Optional mutation handlers
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: UpdateMutationFn<TResult, string | number, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:93](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L93)
+
+***
+
+### query
+
+```ts
+query: 
+  | (q) => QueryBuilder<TContext> & RootObjectResultConstraint<TContext>
+| QueryBuilder<TContext> & RootObjectResultConstraint<TContext>;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:72](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L72)
+
+Query builder function that defines the live query
+
+***
+
+### schema?
+
+```ts
+optional schema: undefined;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:87](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L87)
+
+Optional schema for validation
+
+***
+
+### singleResult?
+
+```ts
+optional singleResult: true;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:109](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L109)
+
+If enabled the collection will return a single object instead of an array
+
+***
+
+### startSync?
+
+```ts
+optional startSync: boolean;
+```
+
+Defined in: [packages/db/src/query/live/types.ts:99](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/types.ts#L99)
+
+Start sync / the query immediately
diff --git a/mintlify/db/reference/interfaces/LocalOnlyCollectionConfig.md b/mintlify/db/reference/interfaces/LocalOnlyCollectionConfig.md
new file mode 100644
index 000000000..e12eb3139
--- /dev/null
+++ b/mintlify/db/reference/interfaces/LocalOnlyCollectionConfig.md
@@ -0,0 +1,494 @@
+---
+id: LocalOnlyCollectionConfig
+title: LocalOnlyCollectionConfig
+---
+
+# Interface: LocalOnlyCollectionConfig\&lt;T, TSchema, TKey\>
+
+Defined in: [packages/db/src/local-only.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L23)
+
+Configuration interface for Local-only collection options
+
+## Extends
+
+- `Omit`\&lt;[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig)\&lt;`T`, `TKey`, `TSchema`, [`LocalOnlyCollectionUtils`](/db/reference/interfaces/LocalOnlyCollectionUtils)\>, `"gcTime"` \| `"startSync"`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `object`
+
+The type of items in the collection
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+The schema type for validation
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key returned by `getKey`
+
+## Properties
+
+### autoIndex?
+
+```ts
+optional autoIndex: "off" | "eager";
+```
+
+Defined in: [packages/db/src/types.ts:571](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L571)
+
+Auto-indexing mode for the collection.
+When enabled, indexes will be automatically created for simple where expressions.
+
+#### Default
+
+```ts
+"off"
+```
+
+#### Description
+
+- "off": No automatic indexing (default). Use explicit indexes for better bundle size.
+- "eager": Automatically create indexes for simple where expressions in subscribeChanges.
+           Requires setting defaultIndexType.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`autoIndex`](/db/reference/interfaces/BaseCollectionConfig#autoindex)
+
+***
+
+### compare()?
+
+```ts
+optional compare: (x, y) => number;
+```
+
+Defined in: [packages/db/src/types.ts:596](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L596)
+
+Optional function to compare two items.
+This is used to order the items in the collection.
+
+#### Parameters
+
+##### x
+
+`T`
+
+The first item to compare
+
+##### y
+
+`T`
+
+The second item to compare
+
+#### Returns
+
+`number`
+
+A number indicating the order of the items
+
+#### Example
+
+```ts
+// For a collection with a 'createdAt' field
+compare: (x, y) => x.createdAt.getTime() - y.createdAt.getTime()
+```
+
+#### Inherited from
+
+```ts
+Omit.compare
+```
+
+***
+
+### defaultIndexType?
+
+```ts
+optional defaultIndexType: IndexConstructor<TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:585](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L585)
+
+Default index type to use when creating indexes without an explicit type.
+Required for auto-indexing. Import from '@tanstack/db'.
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+const collection = createCollection({
+  defaultIndexType: BasicIndex,
+  autoIndex: 'eager',
+  // ...
+})
+```
+
+#### Inherited from
+
+```ts
+Omit.defaultIndexType
+```
+
+***
+
+### defaultStringCollation?
+
+```ts
+optional defaultStringCollation: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/types.ts:742](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L742)
+
+Specifies how to compare data in the collection.
+This should be configured to match data ordering on the backend.
+E.g., when using the Electric DB collection these options
+      should match the database's collation settings.
+
+#### Inherited from
+
+```ts
+Omit.defaultStringCollation
+```
+
+***
+
+### getKey()
+
+```ts
+getKey: (item) => TKey;
+```
+
+Defined in: [packages/db/src/types.ts:545](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L545)
+
+Function to extract the ID from an object
+This is required for update/delete operations which now only accept IDs
+
+#### Parameters
+
+##### item
+
+`T`
+
+The item to extract the ID from
+
+#### Returns
+
+`TKey`
+
+The ID string for the item
+
+#### Example
+
+```ts
+// For a collection with a 'uuid' field as the primary key
+getKey: (item) => item.uuid
+```
+
+#### Inherited from
+
+```ts
+Omit.getKey
+```
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:534](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L534)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`id`](/db/reference/interfaces/BaseCollectionConfig#id)
+
+***
+
+### initialData?
+
+```ts
+optional initialData: T[];
+```
+
+Defined in: [packages/db/src/local-only.ts:35](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L35)
+
+Optional initial data to populate the collection with on creation
+This data will be applied during the initial sync process
+
+***
+
+### onDelete?
+
+```ts
+optional onDelete: DeleteMutationFn<T, TKey, LocalOnlyCollectionUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:734](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L734)
+
+Optional asynchronous handler function called before a delete operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic delete handler
+onDelete: async ({ transaction, collection }) => {
+  const deletedKey = transaction.mutations[0].key
+  await api.deleteTodo(deletedKey)
+}
+```
+
+```ts
+// Delete handler with multiple items
+onDelete: async ({ transaction, collection }) => {
+  const keysToDelete = transaction.mutations.map(m => m.key)
+  await api.deleteTodos(keysToDelete)
+}
+```
+
+```ts
+// Delete handler with confirmation
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const shouldDelete = await confirmDeletion(mutation.original)
+  if (!shouldDelete) {
+    throw new Error('Delete cancelled by user')
+  }
+  await api.deleteTodo(mutation.original.id)
+}
+```
+
+```ts
+// Delete handler with optimistic rollback
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.deleteTodo(mutation.original.id)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Delete failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+```ts
+Omit.onDelete
+```
+
+***
+
+### onInsert?
+
+```ts
+optional onInsert: InsertMutationFn<T, TKey, LocalOnlyCollectionUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L647)
+
+Optional asynchronous handler function called before an insert operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic insert handler
+onInsert: async ({ transaction, collection }) => {
+  const newItem = transaction.mutations[0].modified
+  await api.createTodo(newItem)
+}
+```
+
+```ts
+// Insert handler with multiple items
+onInsert: async ({ transaction, collection }) => {
+  const items = transaction.mutations.map(m => m.modified)
+  await api.createTodos(items)
+}
+```
+
+```ts
+// Insert handler with error handling
+onInsert: async ({ transaction, collection }) => {
+  try {
+    const newItem = transaction.mutations[0].modified
+    const result = await api.createTodo(newItem)
+    return result
+  } catch (error) {
+    console.error('Insert failed:', error)
+    throw error // This will cause the transaction to fail
+  }
+}
+```
+
+```ts
+// Insert handler with metadata
+onInsert: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  await api.createTodo(mutation.modified, {
+    source: mutation.metadata?.source,
+    timestamp: mutation.createdAt
+  })
+}
+```
+
+#### Inherited from
+
+```ts
+Omit.onInsert
+```
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: UpdateMutationFn<T, TKey, LocalOnlyCollectionUtils, any>;
+```
+
+Defined in: [packages/db/src/types.ts:691](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L691)
+
+Optional asynchronous handler function called before an update operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic update handler
+onUpdate: async ({ transaction, collection }) => {
+  const updatedItem = transaction.mutations[0].modified
+  await api.updateTodo(updatedItem.id, updatedItem)
+}
+```
+
+```ts
+// Update handler with partial updates
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const changes = mutation.changes // Only the changed fields
+  await api.updateTodo(mutation.original.id, changes)
+}
+```
+
+```ts
+// Update handler with multiple items
+onUpdate: async ({ transaction, collection }) => {
+  const updates = transaction.mutations.map(m => ({
+    id: m.key,
+    changes: m.changes
+  }))
+  await api.updateTodos(updates)
+}
+```
+
+```ts
+// Update handler with optimistic rollback
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.updateTodo(mutation.original.id, mutation.changes)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Update failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+```ts
+Omit.onUpdate
+```
+
+***
+
+### schema?
+
+```ts
+optional schema: TSchema;
+```
+
+Defined in: [packages/db/src/types.ts:535](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L535)
+
+#### Inherited from
+
+```ts
+Omit.schema
+```
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: SyncMode;
+```
+
+Defined in: [packages/db/src/types.ts:605](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L605)
+
+The mode of sync to use for the collection.
+
+#### Default
+
+`eager`
+
+#### Description
+
+- `eager`: syncs all data immediately on preload
+- `on-demand`: syncs data in incremental snapshots when the collection is queried
+The exact implementation of the sync mode is up to the sync implementation.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`syncMode`](/db/reference/interfaces/BaseCollectionConfig#syncmode)
+
+***
+
+### utils?
+
+```ts
+optional utils: LocalOnlyCollectionUtils;
+```
+
+Defined in: [packages/db/src/types.ts:744](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L744)
+
+#### Inherited from
+
+```ts
+Omit.utils
+```
diff --git a/mintlify/db/reference/interfaces/LocalOnlyCollectionUtils.md b/mintlify/db/reference/interfaces/LocalOnlyCollectionUtils.md
new file mode 100644
index 000000000..35fc7f11a
--- /dev/null
+++ b/mintlify/db/reference/interfaces/LocalOnlyCollectionUtils.md
@@ -0,0 +1,62 @@
+---
+id: LocalOnlyCollectionUtils
+title: LocalOnlyCollectionUtils
+---
+
+# Interface: LocalOnlyCollectionUtils
+
+Defined in: [packages/db/src/local-only.ts:41](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L41)
+
+Local-only collection utilities type
+
+## Extends
+
+- [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### acceptMutations()
+
+```ts
+acceptMutations: (transaction) => void;
+```
+
+Defined in: [packages/db/src/local-only.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/local-only.ts#L59)
+
+Accepts mutations from a transaction that belong to this collection and persists them.
+This should be called in your transaction's mutationFn to persist local-only data.
+
+#### Parameters
+
+##### transaction
+
+The transaction containing mutations to accept
+
+###### mutations
+
+[`PendingMutation`](/db/reference/interfaces/PendingMutation)\&lt;`Record`\&lt;`string`, `unknown`\>, [`OperationType`](/db/reference/type-aliases/OperationType), [`Collection`](/db/reference/interfaces/Collection)\&lt;`Record`\&lt;`string`, `unknown`\>, `any`, `any`, `any`, `any`\>\>[]
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const localData = createCollection(localOnlyCollectionOptions({...}))
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Make API call first
+    await api.save(...)
+    // Then persist local-only mutations after success
+    localData.utils.acceptMutations(transaction)
+  }
+})
+```
diff --git a/mintlify/db/reference/interfaces/LocalStorageCollectionConfig.md b/mintlify/db/reference/interfaces/LocalStorageCollectionConfig.md
new file mode 100644
index 000000000..39c5946bf
--- /dev/null
+++ b/mintlify/db/reference/interfaces/LocalStorageCollectionConfig.md
@@ -0,0 +1,558 @@
+---
+id: LocalStorageCollectionConfig
+title: LocalStorageCollectionConfig
+---
+
+# Interface: LocalStorageCollectionConfig\&lt;T, TSchema, TKey\>
+
+Defined in: [packages/db/src/local-storage.ts:59](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L59)
+
+Configuration interface for localStorage collection options
+
+## Extends
+
+- [`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig)\&lt;`T`, `TKey`, `TSchema`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `object`
+
+The type of items in the collection
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+The schema type for validation
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the key returned by `getKey`
+
+## Properties
+
+### autoIndex?
+
+```ts
+optional autoIndex: "off" | "eager";
+```
+
+Defined in: [packages/db/src/types.ts:571](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L571)
+
+Auto-indexing mode for the collection.
+When enabled, indexes will be automatically created for simple where expressions.
+
+#### Default
+
+```ts
+"off"
+```
+
+#### Description
+
+- "off": No automatic indexing (default). Use explicit indexes for better bundle size.
+- "eager": Automatically create indexes for simple where expressions in subscribeChanges.
+           Requires setting defaultIndexType.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`autoIndex`](/db/reference/interfaces/BaseCollectionConfig#autoindex)
+
+***
+
+### compare()?
+
+```ts
+optional compare: (x, y) => number;
+```
+
+Defined in: [packages/db/src/types.ts:596](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L596)
+
+Optional function to compare two items.
+This is used to order the items in the collection.
+
+#### Parameters
+
+##### x
+
+`T`
+
+The first item to compare
+
+##### y
+
+`T`
+
+The second item to compare
+
+#### Returns
+
+`number`
+
+A number indicating the order of the items
+
+#### Example
+
+```ts
+// For a collection with a 'createdAt' field
+compare: (x, y) => x.createdAt.getTime() - y.createdAt.getTime()
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`compare`](/db/reference/interfaces/BaseCollectionConfig#compare)
+
+***
+
+### defaultIndexType?
+
+```ts
+optional defaultIndexType: IndexConstructor<TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:585](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L585)
+
+Default index type to use when creating indexes without an explicit type.
+Required for auto-indexing. Import from '@tanstack/db'.
+
+#### Example
+
+```ts
+import { BasicIndex } from '@tanstack/db'
+const collection = createCollection({
+  defaultIndexType: BasicIndex,
+  autoIndex: 'eager',
+  // ...
+})
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`defaultIndexType`](/db/reference/interfaces/BaseCollectionConfig#defaultindextype)
+
+***
+
+### defaultStringCollation?
+
+```ts
+optional defaultStringCollation: StringCollationConfig;
+```
+
+Defined in: [packages/db/src/types.ts:742](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L742)
+
+Specifies how to compare data in the collection.
+This should be configured to match data ordering on the backend.
+E.g., when using the Electric DB collection these options
+      should match the database's collation settings.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`defaultStringCollation`](/db/reference/interfaces/BaseCollectionConfig#defaultstringcollation)
+
+***
+
+### gcTime?
+
+```ts
+optional gcTime: number;
+```
+
+Defined in: [packages/db/src/types.ts:550](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L550)
+
+Time in milliseconds after which the collection will be garbage collected
+when it has no active subscribers. Defaults to 5 minutes (300000ms).
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`gcTime`](/db/reference/interfaces/BaseCollectionConfig#gctime)
+
+***
+
+### getKey()
+
+```ts
+getKey: (item) => TKey;
+```
+
+Defined in: [packages/db/src/types.ts:545](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L545)
+
+Function to extract the ID from an object
+This is required for update/delete operations which now only accept IDs
+
+#### Parameters
+
+##### item
+
+`T`
+
+The item to extract the ID from
+
+#### Returns
+
+`TKey`
+
+The ID string for the item
+
+#### Example
+
+```ts
+// For a collection with a 'uuid' field as the primary key
+getKey: (item) => item.uuid
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`getKey`](/db/reference/interfaces/BaseCollectionConfig#getkey)
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:534](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L534)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`id`](/db/reference/interfaces/BaseCollectionConfig#id)
+
+***
+
+### onDelete?
+
+```ts
+optional onDelete: DeleteMutationFn<T, TKey, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/types.ts:734](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L734)
+
+Optional asynchronous handler function called before a delete operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic delete handler
+onDelete: async ({ transaction, collection }) => {
+  const deletedKey = transaction.mutations[0].key
+  await api.deleteTodo(deletedKey)
+}
+```
+
+```ts
+// Delete handler with multiple items
+onDelete: async ({ transaction, collection }) => {
+  const keysToDelete = transaction.mutations.map(m => m.key)
+  await api.deleteTodos(keysToDelete)
+}
+```
+
+```ts
+// Delete handler with confirmation
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const shouldDelete = await confirmDeletion(mutation.original)
+  if (!shouldDelete) {
+    throw new Error('Delete cancelled by user')
+  }
+  await api.deleteTodo(mutation.original.id)
+}
+```
+
+```ts
+// Delete handler with optimistic rollback
+onDelete: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.deleteTodo(mutation.original.id)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Delete failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onDelete`](/db/reference/interfaces/BaseCollectionConfig#ondelete)
+
+***
+
+### onInsert?
+
+```ts
+optional onInsert: InsertMutationFn<T, TKey, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/types.ts:647](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L647)
+
+Optional asynchronous handler function called before an insert operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic insert handler
+onInsert: async ({ transaction, collection }) => {
+  const newItem = transaction.mutations[0].modified
+  await api.createTodo(newItem)
+}
+```
+
+```ts
+// Insert handler with multiple items
+onInsert: async ({ transaction, collection }) => {
+  const items = transaction.mutations.map(m => m.modified)
+  await api.createTodos(items)
+}
+```
+
+```ts
+// Insert handler with error handling
+onInsert: async ({ transaction, collection }) => {
+  try {
+    const newItem = transaction.mutations[0].modified
+    const result = await api.createTodo(newItem)
+    return result
+  } catch (error) {
+    console.error('Insert failed:', error)
+    throw error // This will cause the transaction to fail
+  }
+}
+```
+
+```ts
+// Insert handler with metadata
+onInsert: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  await api.createTodo(mutation.modified, {
+    source: mutation.metadata?.source,
+    timestamp: mutation.createdAt
+  })
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onInsert`](/db/reference/interfaces/BaseCollectionConfig#oninsert)
+
+***
+
+### onUpdate?
+
+```ts
+optional onUpdate: UpdateMutationFn<T, TKey, UtilsRecord, any>;
+```
+
+Defined in: [packages/db/src/types.ts:691](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L691)
+
+Optional asynchronous handler function called before an update operation
+
+#### Param
+
+Object containing transaction and collection information
+
+#### Returns
+
+Promise resolving to any value
+
+#### Examples
+
+```ts
+// Basic update handler
+onUpdate: async ({ transaction, collection }) => {
+  const updatedItem = transaction.mutations[0].modified
+  await api.updateTodo(updatedItem.id, updatedItem)
+}
+```
+
+```ts
+// Update handler with partial updates
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  const changes = mutation.changes // Only the changed fields
+  await api.updateTodo(mutation.original.id, changes)
+}
+```
+
+```ts
+// Update handler with multiple items
+onUpdate: async ({ transaction, collection }) => {
+  const updates = transaction.mutations.map(m => ({
+    id: m.key,
+    changes: m.changes
+  }))
+  await api.updateTodos(updates)
+}
+```
+
+```ts
+// Update handler with optimistic rollback
+onUpdate: async ({ transaction, collection }) => {
+  const mutation = transaction.mutations[0]
+  try {
+    await api.updateTodo(mutation.original.id, mutation.changes)
+  } catch (error) {
+    // Transaction will automatically rollback optimistic changes
+    console.error('Update failed, rolling back:', error)
+    throw error
+  }
+}
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`onUpdate`](/db/reference/interfaces/BaseCollectionConfig#onupdate)
+
+***
+
+### parser?
+
+```ts
+optional parser: Parser;
+```
+
+Defined in: [packages/db/src/local-storage.ts:85](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L85)
+
+Parser to use for serializing and deserializing data to and from storage
+Defaults to JSON
+
+***
+
+### schema?
+
+```ts
+optional schema: TSchema;
+```
+
+Defined in: [packages/db/src/types.ts:535](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L535)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`schema`](/db/reference/interfaces/BaseCollectionConfig#schema)
+
+***
+
+### startSync?
+
+```ts
+optional startSync: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:561](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L561)
+
+Whether to eagerly start syncing on collection creation.
+When true, syncing begins immediately. When false, syncing starts when the first subscriber attaches.
+
+Note: Even with startSync=true, collections will pause syncing when there are no active
+subscribers (typically when components querying the collection unmount), resuming when new
+subscribers attach. This preserves normal staleTime/gcTime behavior.
+
+#### Default
+
+```ts
+false
+```
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`startSync`](/db/reference/interfaces/BaseCollectionConfig#startsync)
+
+***
+
+### storage?
+
+```ts
+optional storage: StorageApi;
+```
+
+Defined in: [packages/db/src/local-storage.ts:73](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L73)
+
+Storage API to use (defaults to window.localStorage)
+Can be any object that implements the Storage interface (e.g., sessionStorage)
+
+***
+
+### storageEventApi?
+
+```ts
+optional storageEventApi: StorageEventApi;
+```
+
+Defined in: [packages/db/src/local-storage.ts:79](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L79)
+
+Storage event API to use for cross-tab synchronization (defaults to window)
+Can be any object that implements addEventListener/removeEventListener for storage events
+
+***
+
+### storageKey
+
+```ts
+storageKey: string;
+```
+
+Defined in: [packages/db/src/local-storage.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L67)
+
+The key to use for storing the collection data in localStorage/sessionStorage
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: SyncMode;
+```
+
+Defined in: [packages/db/src/types.ts:605](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L605)
+
+The mode of sync to use for the collection.
+
+#### Default
+
+`eager`
+
+#### Description
+
+- `eager`: syncs all data immediately on preload
+- `on-demand`: syncs data in incremental snapshots when the collection is queried
+The exact implementation of the sync mode is up to the sync implementation.
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`syncMode`](/db/reference/interfaces/BaseCollectionConfig#syncmode)
+
+***
+
+### utils?
+
+```ts
+optional utils: UtilsRecord;
+```
+
+Defined in: [packages/db/src/types.ts:744](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L744)
+
+#### Inherited from
+
+[`BaseCollectionConfig`](/db/reference/interfaces/BaseCollectionConfig).[`utils`](/db/reference/interfaces/BaseCollectionConfig#utils)
diff --git a/mintlify/db/reference/interfaces/LocalStorageCollectionUtils.md b/mintlify/db/reference/interfaces/LocalStorageCollectionUtils.md
new file mode 100644
index 000000000..52057b43c
--- /dev/null
+++ b/mintlify/db/reference/interfaces/LocalStorageCollectionUtils.md
@@ -0,0 +1,82 @@
+---
+id: LocalStorageCollectionUtils
+title: LocalStorageCollectionUtils
+---
+
+# Interface: LocalStorageCollectionUtils
+
+Defined in: [packages/db/src/local-storage.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L101)
+
+LocalStorage collection utilities type
+
+## Extends
+
+- [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### acceptMutations()
+
+```ts
+acceptMutations: (transaction) => void;
+```
+
+Defined in: [packages/db/src/local-storage.ts:121](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L121)
+
+Accepts mutations from a transaction that belong to this collection and persists them to localStorage.
+This should be called in your transaction's mutationFn to persist local-storage data.
+
+#### Parameters
+
+##### transaction
+
+The transaction containing mutations to accept
+
+###### mutations
+
+[`PendingMutation`](/db/reference/interfaces/PendingMutation)\&lt;`Record`\&lt;`string`, `unknown`\>, [`OperationType`](/db/reference/type-aliases/OperationType), [`Collection`](/db/reference/interfaces/Collection)\&lt;`Record`\&lt;`string`, `unknown`\>, `any`, `any`, `any`, `any`\>\>[]
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const localSettings = createCollection(localStorageCollectionOptions({...}))
+
+const tx = createTransaction({
+  mutationFn: async ({ transaction }) => {
+    // Make API call first
+    await api.save(...)
+    // Then persist local-storage mutations after success
+    localSettings.utils.acceptMutations(transaction)
+  }
+})
+```
+
+***
+
+### clearStorage
+
+```ts
+clearStorage: ClearStorageFn;
+```
+
+Defined in: [packages/db/src/local-storage.ts:102](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L102)
+
+***
+
+### getStorageSize
+
+```ts
+getStorageSize: GetStorageSizeFn;
+```
+
+Defined in: [packages/db/src/local-storage.ts:103](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L103)
diff --git a/mintlify/db/reference/interfaces/OperationConfig.md b/mintlify/db/reference/interfaces/OperationConfig.md
new file mode 100644
index 000000000..3526e49cc
--- /dev/null
+++ b/mintlify/db/reference/interfaces/OperationConfig.md
@@ -0,0 +1,30 @@
+---
+id: OperationConfig
+title: OperationConfig
+---
+
+# Interface: OperationConfig
+
+Defined in: [packages/db/src/types.ts:433](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L433)
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:434](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L434)
+
+***
+
+### optimistic?
+
+```ts
+optional optimistic: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:436](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L436)
+
+Whether to apply optimistic updates immediately. Defaults to true.
diff --git a/mintlify/db/reference/interfaces/PacedMutationsConfig.md b/mintlify/db/reference/interfaces/PacedMutationsConfig.md
new file mode 100644
index 000000000..1c0c9f2c3
--- /dev/null
+++ b/mintlify/db/reference/interfaces/PacedMutationsConfig.md
@@ -0,0 +1,81 @@
+---
+id: PacedMutationsConfig
+title: PacedMutationsConfig
+---
+
+# Interface: PacedMutationsConfig\&lt;TVariables, T\>
+
+Defined in: [packages/db/src/paced-mutations.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L8)
+
+Configuration for creating a paced mutations manager
+
+## Type Parameters
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/paced-mutations.ts:30](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L30)
+
+Custom metadata to associate with transactions
+
+***
+
+### mutationFn
+
+```ts
+mutationFn: MutationFn<T>;
+```
+
+Defined in: [packages/db/src/paced-mutations.ts:21](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L21)
+
+Function to execute the mutation on the server.
+Receives the transaction parameters containing all merged mutations.
+
+***
+
+### onMutate()
+
+```ts
+onMutate: (variables) => void;
+```
+
+Defined in: [packages/db/src/paced-mutations.ts:16](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L16)
+
+Callback to apply optimistic updates immediately.
+Receives the variables passed to the mutate function.
+
+#### Parameters
+
+##### variables
+
+`TVariables`
+
+#### Returns
+
+`void`
+
+***
+
+### strategy
+
+```ts
+strategy: Strategy;
+```
+
+Defined in: [packages/db/src/paced-mutations.ts:26](https://github.com/TanStack/db/blob/main/packages/db/src/paced-mutations.ts#L26)
+
+Strategy for controlling mutation execution timing
+Examples: debounceStrategy, queueStrategy, throttleStrategy
diff --git a/mintlify/db/reference/interfaces/ParseWhereOptions.md b/mintlify/db/reference/interfaces/ParseWhereOptions.md
new file mode 100644
index 000000000..09caa9af4
--- /dev/null
+++ b/mintlify/db/reference/interfaces/ParseWhereOptions.md
@@ -0,0 +1,515 @@
+---
+id: ParseWhereOptions
+title: ParseWhereOptions
+---
+
+# Interface: ParseWhereOptions\&lt;T\>
+
+Defined in: [packages/db/src/query/expression-helpers.ts:53](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L53)
+
+Options for customizing how WHERE expressions are parsed
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+## Properties
+
+### handlers
+
+```ts
+handlers: object & object;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L67)
+
+Handler functions for different operators.
+Each handler receives the parsed field path(s) and value(s) and returns your custom format.
+
+Supported operators from TanStack DB:
+- Comparison: eq, gt, gte, lt, lte, in, like, ilike
+- Logical: and, or, not
+- Null checking: isNull, isUndefined
+- String functions: upper, lower, length, concat
+- Numeric: add
+- Utility: coalesce
+- Aggregates: count, avg, sum, min, max
+
+#### Type Declaration
+
+##### add()?
+
+```ts
+optional add: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### and()?
+
+```ts
+optional and: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### avg()?
+
+```ts
+optional avg: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### caseWhen()?
+
+```ts
+optional caseWhen: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### coalesce()?
+
+```ts
+optional coalesce: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### concat()?
+
+```ts
+optional concat: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### count()?
+
+```ts
+optional count: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### divide()?
+
+```ts
+optional divide: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### eq()?
+
+```ts
+optional eq: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### gt()?
+
+```ts
+optional gt: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### gte()?
+
+```ts
+optional gte: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### ilike()?
+
+```ts
+optional ilike: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### in()?
+
+```ts
+optional in: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### isNull()?
+
+```ts
+optional isNull: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### isUndefined()?
+
+```ts
+optional isUndefined: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### length()?
+
+```ts
+optional length: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### like()?
+
+```ts
+optional like: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### lower()?
+
+```ts
+optional lower: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### lt()?
+
+```ts
+optional lt: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### lte()?
+
+```ts
+optional lte: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### max()?
+
+```ts
+optional max: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### min()?
+
+```ts
+optional min: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### multiply()?
+
+```ts
+optional multiply: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### not()?
+
+```ts
+optional not: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### or()?
+
+```ts
+optional or: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### subtract()?
+
+```ts
+optional subtract: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### sum()?
+
+```ts
+optional sum: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+##### upper()?
+
+```ts
+optional upper: (...args) => T;
+```
+
+###### Parameters
+
+###### args
+
+...`any`[]
+
+###### Returns
+
+`T`
+
+***
+
+### onUnknownOperator()?
+
+```ts
+optional onUnknownOperator: (operator, args) => T;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:76](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L76)
+
+Optional handler for when an unknown operator is encountered.
+If not provided, unknown operators throw an error.
+
+#### Parameters
+
+##### operator
+
+`string`
+
+##### args
+
+`any`[]
+
+#### Returns
+
+`T`
diff --git a/mintlify/db/reference/interfaces/ParsedOrderBy.md b/mintlify/db/reference/interfaces/ParsedOrderBy.md
new file mode 100644
index 000000000..48a1773bf
--- /dev/null
+++ b/mintlify/db/reference/interfaces/ParsedOrderBy.md
@@ -0,0 +1,76 @@
+---
+id: ParsedOrderBy
+title: ParsedOrderBy
+---
+
+# Interface: ParsedOrderBy
+
+Defined in: [packages/db/src/query/expression-helpers.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L82)
+
+Result of parsing an ORDER BY expression
+
+## Properties
+
+### direction
+
+```ts
+direction: "asc" | "desc";
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:84](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L84)
+
+***
+
+### field
+
+```ts
+field: FieldPath;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:83](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L83)
+
+***
+
+### locale?
+
+```ts
+optional locale: string;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:89](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L89)
+
+Locale for locale-aware string sorting (e.g., 'en-US')
+
+***
+
+### localeOptions?
+
+```ts
+optional localeOptions: object;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:91](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L91)
+
+Additional options for locale-aware sorting
+
+***
+
+### nulls
+
+```ts
+nulls: "first" | "last";
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:85](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L85)
+
+***
+
+### stringSort?
+
+```ts
+optional stringSort: "lexical" | "locale";
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:87](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L87)
+
+String sorting method: 'lexical' (default) or 'locale' (locale-aware)
diff --git a/mintlify/db/reference/interfaces/Parser.md b/mintlify/db/reference/interfaces/Parser.md
new file mode 100644
index 000000000..1db679a98
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Parser.md
@@ -0,0 +1,48 @@
+---
+id: Parser
+title: Parser
+---
+
+# Interface: Parser
+
+Defined in: [packages/db/src/local-storage.ts:48](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L48)
+
+## Properties
+
+### parse()
+
+```ts
+parse: (data) => unknown;
+```
+
+Defined in: [packages/db/src/local-storage.ts:49](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L49)
+
+#### Parameters
+
+##### data
+
+`string`
+
+#### Returns
+
+`unknown`
+
+***
+
+### stringify()
+
+```ts
+stringify: (data) => string;
+```
+
+Defined in: [packages/db/src/local-storage.ts:50](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L50)
+
+#### Parameters
+
+##### data
+
+`unknown`
+
+#### Returns
+
+`string`
diff --git a/mintlify/db/reference/interfaces/PendingMutation.md b/mintlify/db/reference/interfaces/PendingMutation.md
new file mode 100644
index 000000000..77f73391f
--- /dev/null
+++ b/mintlify/db/reference/interfaces/PendingMutation.md
@@ -0,0 +1,157 @@
+---
+id: PendingMutation
+title: PendingMutation
+---
+
+# Interface: PendingMutation\&lt;T, TOperation, TCollection\>
+
+Defined in: [packages/db/src/types.ts:91](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L91)
+
+Represents a pending mutation within a transaction
+Contains information about the original and modified data, as well as metadata
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TOperation
+
+`TOperation` *extends* [`OperationType`](/db/reference/type-aliases/OperationType) = [`OperationType`](/db/reference/type-aliases/OperationType)
+
+### TCollection
+
+`TCollection` *extends* [`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `any`, `any`, `any`, `any`\> = [`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `any`, `any`, `any`, `any`\>
+
+## Properties
+
+### changes
+
+```ts
+changes: ResolveTransactionChanges<T, TOperation>;
+```
+
+Defined in: [packages/db/src/types.ts:108](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L108)
+
+***
+
+### collection
+
+```ts
+collection: TCollection;
+```
+
+Defined in: [packages/db/src/types.ts:119](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L119)
+
+***
+
+### createdAt
+
+```ts
+createdAt: Date;
+```
+
+Defined in: [packages/db/src/types.ts:117](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L117)
+
+***
+
+### globalKey
+
+```ts
+globalKey: string;
+```
+
+Defined in: [packages/db/src/types.ts:109](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L109)
+
+***
+
+### key
+
+```ts
+key: any;
+```
+
+Defined in: [packages/db/src/types.ts:111](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L111)
+
+***
+
+### metadata
+
+```ts
+metadata: unknown;
+```
+
+Defined in: [packages/db/src/types.ts:113](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L113)
+
+***
+
+### modified
+
+```ts
+modified: T;
+```
+
+Defined in: [packages/db/src/types.ts:106](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L106)
+
+***
+
+### mutationId
+
+```ts
+mutationId: string;
+```
+
+Defined in: [packages/db/src/types.ts:102](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L102)
+
+***
+
+### optimistic
+
+```ts
+optimistic: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:116](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L116)
+
+Whether this mutation should be applied optimistically (defaults to true)
+
+***
+
+### original
+
+```ts
+original: TOperation extends "insert" ? object : T;
+```
+
+Defined in: [packages/db/src/types.ts:104](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L104)
+
+***
+
+### syncMetadata
+
+```ts
+syncMetadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:114](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L114)
+
+***
+
+### type
+
+```ts
+type: TOperation;
+```
+
+Defined in: [packages/db/src/types.ts:112](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L112)
+
+***
+
+### updatedAt
+
+```ts
+updatedAt: Date;
+```
+
+Defined in: [packages/db/src/types.ts:118](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L118)
diff --git a/mintlify/db/reference/interfaces/QueryOnceConfig.md b/mintlify/db/reference/interfaces/QueryOnceConfig.md
new file mode 100644
index 000000000..6499f7f48
--- /dev/null
+++ b/mintlify/db/reference/interfaces/QueryOnceConfig.md
@@ -0,0 +1,30 @@
+---
+id: QueryOnceConfig
+title: QueryOnceConfig
+---
+
+# Interface: QueryOnceConfig\&lt;TContext\>
+
+Defined in: [packages/db/src/query/query-once.ts:18](https://github.com/TanStack/db/blob/main/packages/db/src/query/query-once.ts#L18)
+
+Configuration options for queryOnce
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Properties
+
+### query
+
+```ts
+query: 
+  | (q) => QueryBuilder<TContext> & RootObjectResultConstraint<TContext>
+| QueryBuilder<TContext> & RootObjectResultConstraint<TContext>;
+```
+
+Defined in: [packages/db/src/query/query-once.ts:22](https://github.com/TanStack/db/blob/main/packages/db/src/query/query-once.ts#L22)
+
+Query builder function that defines the query
diff --git a/mintlify/db/reference/interfaces/QueueStrategy.md b/mintlify/db/reference/interfaces/QueueStrategy.md
new file mode 100644
index 000000000..71f01de7b
--- /dev/null
+++ b/mintlify/db/reference/interfaces/QueueStrategy.md
@@ -0,0 +1,99 @@
+---
+id: QueueStrategy
+title: QueueStrategy
+---
+
+# Interface: QueueStrategy
+
+Defined in: [packages/db/src/strategies/types.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L66)
+
+Queue strategy that processes all executions in order
+FIFO: &#123; addItemsTo: 'back', getItemsFrom: 'front' &#125;
+LIFO: &#123; addItemsTo: 'back', getItemsFrom: 'back' &#125;
+
+## Extends
+
+- [`BaseStrategy`](/db/reference/interfaces/BaseStrategy)\&lt;`"queue"`\>
+
+## Properties
+
+### \_type
+
+```ts
+_type: "queue";
+```
+
+Defined in: [packages/db/src/strategies/types.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L8)
+
+Type discriminator for strategy identification
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`_type`](/db/reference/interfaces/BaseStrategy#_type)
+
+***
+
+### cleanup()
+
+```ts
+cleanup: () => void;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L23)
+
+Clean up any resources held by the strategy
+Should be called when the strategy is no longer needed
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`cleanup`](/db/reference/interfaces/BaseStrategy#cleanup)
+
+***
+
+### execute()
+
+```ts
+execute: <T>(fn) => void | Promise<void>;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L15)
+
+Execute a function according to the strategy's timing rules
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+#### Parameters
+
+##### fn
+
+() => [`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+The function to execute
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+The result of the function execution (if applicable)
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`execute`](/db/reference/interfaces/BaseStrategy#execute)
+
+***
+
+### options?
+
+```ts
+optional options: QueueStrategyOptions;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:67](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L67)
diff --git a/mintlify/db/reference/interfaces/QueueStrategyOptions.md b/mintlify/db/reference/interfaces/QueueStrategyOptions.md
new file mode 100644
index 000000000..cefdd24e5
--- /dev/null
+++ b/mintlify/db/reference/interfaces/QueueStrategyOptions.md
@@ -0,0 +1,59 @@
+---
+id: QueueStrategyOptions
+title: QueueStrategyOptions
+---
+
+# Interface: QueueStrategyOptions
+
+Defined in: [packages/db/src/strategies/types.ts:50](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L50)
+
+Options for queue strategy
+Processes all executions in order (FIFO/LIFO)
+
+## Properties
+
+### addItemsTo?
+
+```ts
+optional addItemsTo: "front" | "back";
+```
+
+Defined in: [packages/db/src/strategies/types.ts:56](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L56)
+
+Where to add new items in the queue
+
+***
+
+### getItemsFrom?
+
+```ts
+optional getItemsFrom: "front" | "back";
+```
+
+Defined in: [packages/db/src/strategies/types.ts:58](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L58)
+
+Where to get items from when processing
+
+***
+
+### maxSize?
+
+```ts
+optional maxSize: number;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:54](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L54)
+
+Maximum queue size (items are dropped if exceeded)
+
+***
+
+### wait?
+
+```ts
+optional wait: number;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:52](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L52)
+
+Wait time between processing queue items (milliseconds)
diff --git a/mintlify/db/reference/interfaces/RangeQueryOptions.md b/mintlify/db/reference/interfaces/RangeQueryOptions.md
new file mode 100644
index 000000000..204e822ba
--- /dev/null
+++ b/mintlify/db/reference/interfaces/RangeQueryOptions.md
@@ -0,0 +1,50 @@
+---
+id: RangeQueryOptions
+title: RangeQueryOptions
+---
+
+# Interface: RangeQueryOptions
+
+Defined in: [packages/db/src/indexes/basic-index.ts:14](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L14)
+
+Options for range queries
+
+## Properties
+
+### from?
+
+```ts
+optional from: any;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L15)
+
+***
+
+### fromInclusive?
+
+```ts
+optional fromInclusive: boolean;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:17](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L17)
+
+***
+
+### to?
+
+```ts
+optional to: any;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:16](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L16)
+
+***
+
+### toInclusive?
+
+```ts
+optional toInclusive: boolean;
+```
+
+Defined in: [packages/db/src/indexes/basic-index.ts:18](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/basic-index.ts#L18)
diff --git a/mintlify/db/reference/interfaces/SimpleComparison.md b/mintlify/db/reference/interfaces/SimpleComparison.md
new file mode 100644
index 000000000..f8f71f670
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SimpleComparison.md
@@ -0,0 +1,40 @@
+---
+id: SimpleComparison
+title: SimpleComparison
+---
+
+# Interface: SimpleComparison
+
+Defined in: [packages/db/src/query/expression-helpers.ts:44](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L44)
+
+Represents a simple comparison operation
+
+## Properties
+
+### field
+
+```ts
+field: FieldPath;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:45](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L45)
+
+***
+
+### operator
+
+```ts
+operator: string;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:46](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L46)
+
+***
+
+### value?
+
+```ts
+optional value: any;
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:47](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L47)
diff --git a/mintlify/db/reference/interfaces/SubscribeChangesOptions.md b/mintlify/db/reference/interfaces/SubscribeChangesOptions.md
new file mode 100644
index 000000000..897e32ecd
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SubscribeChangesOptions.md
@@ -0,0 +1,156 @@
+---
+id: SubscribeChangesOptions
+title: SubscribeChangesOptions
+---
+
+# Interface: SubscribeChangesOptions\&lt;T, TKey\>
+
+Defined in: [packages/db/src/types.ts:822](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L822)
+
+Options for subscribing to collection changes
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### includeInitialState?
+
+```ts
+optional includeInitialState: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:827](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L827)
+
+Whether to include the current state as initial changes
+
+***
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [packages/db/src/types.ts:860](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L860)
+
+**`Internal`**
+
+Optional limit to include in loadSubset for query-specific cache keys.
+
+***
+
+### onLoadSubsetResult()?
+
+```ts
+optional onLoadSubsetResult: (result) => void;
+```
+
+Defined in: [packages/db/src/types.ts:866](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L866)
+
+**`Internal`**
+
+Callback that receives the loadSubset result (Promise or true) from requestSnapshot.
+Allows the caller to directly track the loading promise for isReady status.
+
+#### Parameters
+
+##### result
+
+`true` | `Promise`\&lt;`void`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onStatusChange()?
+
+```ts
+optional onStatusChange: (event) => void;
+```
+
+Defined in: [packages/db/src/types.ts:850](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L850)
+
+**`Internal`**
+
+Listener for subscription status changes.
+Registered BEFORE any snapshot is requested, ensuring no status transitions are missed.
+
+#### Parameters
+
+##### event
+
+[`SubscriptionStatusChangeEvent`](/db/reference/interfaces/SubscriptionStatusChangeEvent)
+
+#### Returns
+
+`void`
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: OrderBy;
+```
+
+Defined in: [packages/db/src/types.ts:855](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L855)
+
+**`Internal`**
+
+Optional orderBy to include in loadSubset for query-specific cache keys.
+
+***
+
+### where()?
+
+```ts
+optional where: (row) => any;
+```
+
+Defined in: [packages/db/src/types.ts:842](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L842)
+
+Callback function for filtering changes using a row proxy.
+The callback receives a proxy object that records property access,
+allowing you to use query builder functions like `eq`, `gt`, etc.
+
+#### Parameters
+
+##### row
+
+`SingleRowRefProxy`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\>
+
+#### Returns
+
+`any`
+
+#### Example
+
+```ts
+import { eq } from "@tanstack/db"
+
+collection.subscribeChanges(callback, {
+  where: (row) => eq(row.status, "active")
+})
+```
+
+***
+
+### whereExpression?
+
+```ts
+optional whereExpression: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:844](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L844)
+
+Pre-compiled expression for filtering changes
diff --git a/mintlify/db/reference/interfaces/SubscribeChangesSnapshotOptions.md b/mintlify/db/reference/interfaces/SubscribeChangesSnapshotOptions.md
new file mode 100644
index 000000000..7090dd0d4
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SubscribeChangesSnapshotOptions.md
@@ -0,0 +1,176 @@
+---
+id: SubscribeChangesSnapshotOptions
+title: SubscribeChangesSnapshotOptions
+---
+
+# Interface: SubscribeChangesSnapshotOptions\&lt;T, TKey\>
+
+Defined in: [packages/db/src/types.ts:869](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L869)
+
+## Extends
+
+- `Omit`\&lt;[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions)\&lt;`T`, `TKey`\>, `"includeInitialState"`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [packages/db/src/types.ts:874](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L874)
+
+**`Internal`**
+
+Optional limit to include in loadSubset for query-specific cache keys.
+
+#### Overrides
+
+[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions).[`limit`](/db/reference/interfaces/SubscribeChangesOptions#limit)
+
+***
+
+### onLoadSubsetResult()?
+
+```ts
+optional onLoadSubsetResult: (result) => void;
+```
+
+Defined in: [packages/db/src/types.ts:866](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L866)
+
+**`Internal`**
+
+Callback that receives the loadSubset result (Promise or true) from requestSnapshot.
+Allows the caller to directly track the loading promise for isReady status.
+
+#### Parameters
+
+##### result
+
+`true` | `Promise`\&lt;`void`\>
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+Omit.onLoadSubsetResult
+```
+
+***
+
+### onStatusChange()?
+
+```ts
+optional onStatusChange: (event) => void;
+```
+
+Defined in: [packages/db/src/types.ts:850](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L850)
+
+**`Internal`**
+
+Listener for subscription status changes.
+Registered BEFORE any snapshot is requested, ensuring no status transitions are missed.
+
+#### Parameters
+
+##### event
+
+[`SubscriptionStatusChangeEvent`](/db/reference/interfaces/SubscriptionStatusChangeEvent)
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+Omit.onStatusChange
+```
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: OrderBy;
+```
+
+Defined in: [packages/db/src/types.ts:873](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L873)
+
+**`Internal`**
+
+Optional orderBy to include in loadSubset for query-specific cache keys.
+
+#### Overrides
+
+[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions).[`orderBy`](/db/reference/interfaces/SubscribeChangesOptions#orderby)
+
+***
+
+### where()?
+
+```ts
+optional where: (row) => any;
+```
+
+Defined in: [packages/db/src/types.ts:842](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L842)
+
+Callback function for filtering changes using a row proxy.
+The callback receives a proxy object that records property access,
+allowing you to use query builder functions like `eq`, `gt`, etc.
+
+#### Parameters
+
+##### row
+
+`SingleRowRefProxy`\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>\>
+
+#### Returns
+
+`any`
+
+#### Example
+
+```ts
+import { eq } from "@tanstack/db"
+
+collection.subscribeChanges(callback, {
+  where: (row) => eq(row.status, "active")
+})
+```
+
+#### Inherited from
+
+```ts
+Omit.where
+```
+
+***
+
+### whereExpression?
+
+```ts
+optional whereExpression: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:844](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L844)
+
+Pre-compiled expression for filtering changes
+
+#### Inherited from
+
+[`SubscribeChangesOptions`](/db/reference/interfaces/SubscribeChangesOptions).[`whereExpression`](/db/reference/interfaces/SubscribeChangesOptions#whereexpression)
diff --git a/mintlify/db/reference/interfaces/Subscription.md b/mintlify/db/reference/interfaces/Subscription.md
new file mode 100644
index 000000000..1a32c1a4b
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Subscription.md
@@ -0,0 +1,280 @@
+---
+id: Subscription
+title: Subscription
+---
+
+# Interface: Subscription
+
+Defined in: [packages/db/src/types.ts:254](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L254)
+
+Public interface for a collection subscription
+Used by sync implementations to track subscription lifecycle
+
+## Extends
+
+- `EventEmitter`\&lt;[`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)\>
+
+## Properties
+
+### status
+
+```ts
+readonly status: SubscriptionStatus;
+```
+
+Defined in: [packages/db/src/types.ts:256](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L256)
+
+Current status of the subscription
+
+## Methods
+
+### clearListeners()
+
+```ts
+protected clearListeners(): void;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:115](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L115)
+
+Clear all listeners
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+EventEmitter.clearListeners
+```
+
+***
+
+### emitInner()
+
+```ts
+protected emitInner<T>(event, eventPayload): void;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L96)
+
+**`Internal`**
+
+Emit an event to all listeners
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* keyof [`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)
+
+#### Parameters
+
+##### event
+
+`T`
+
+Event name to emit
+
+##### eventPayload
+
+[`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)\[`T`\]
+
+Event payload
+ For use by subclasses - subclasses should wrap this with a public emit if needed
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+EventEmitter.emitInner
+```
+
+***
+
+### off()
+
+```ts
+off<T>(event, callback): void;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:53](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L53)
+
+Unsubscribe from an event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* keyof [`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)
+
+#### Parameters
+
+##### event
+
+`T`
+
+Event name to stop listening for
+
+##### callback
+
+(`event`) => `void`
+
+Function to remove
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+EventEmitter.off
+```
+
+***
+
+### on()
+
+```ts
+on<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:17](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L17)
+
+Subscribe to an event
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* keyof [`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)
+
+#### Parameters
+
+##### event
+
+`T`
+
+Event name to listen for
+
+##### callback
+
+(`event`) => `void`
+
+Function to call when event is emitted
+
+#### Returns
+
+Unsubscribe function
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+EventEmitter.on
+```
+
+***
+
+### once()
+
+```ts
+once<T>(event, callback): () => void;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:37](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L37)
+
+Subscribe to an event once (automatically unsubscribes after first emission)
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* keyof [`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)
+
+#### Parameters
+
+##### event
+
+`T`
+
+Event name to listen for
+
+##### callback
+
+(`event`) => `void`
+
+Function to call when event is emitted
+
+#### Returns
+
+Unsubscribe function
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+EventEmitter.once
+```
+
+***
+
+### waitFor()
+
+```ts
+waitFor<T>(event, timeout?): Promise<SubscriptionEvents[T]>;
+```
+
+Defined in: [packages/db/src/event-emitter.ts:66](https://github.com/TanStack/db/blob/main/packages/db/src/event-emitter.ts#L66)
+
+Wait for an event to be emitted
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* keyof [`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)
+
+#### Parameters
+
+##### event
+
+`T`
+
+Event name to wait for
+
+##### timeout?
+
+`number`
+
+Optional timeout in milliseconds
+
+#### Returns
+
+`Promise`\&lt;[`SubscriptionEvents`](/db/reference/type-aliases/SubscriptionEvents)\[`T`\]\>
+
+Promise that resolves with the event payload
+
+#### Inherited from
+
+```ts
+EventEmitter.waitFor
+```
diff --git a/mintlify/db/reference/interfaces/SubscriptionStatusChangeEvent.md b/mintlify/db/reference/interfaces/SubscriptionStatusChangeEvent.md
new file mode 100644
index 000000000..87c7e584a
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SubscriptionStatusChangeEvent.md
@@ -0,0 +1,50 @@
+---
+id: SubscriptionStatusChangeEvent
+title: SubscriptionStatusChangeEvent
+---
+
+# Interface: SubscriptionStatusChangeEvent
+
+Defined in: [packages/db/src/types.ts:215](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L215)
+
+Event emitted when subscription status changes
+
+## Properties
+
+### previousStatus
+
+```ts
+previousStatus: SubscriptionStatus;
+```
+
+Defined in: [packages/db/src/types.ts:218](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L218)
+
+***
+
+### status
+
+```ts
+status: SubscriptionStatus;
+```
+
+Defined in: [packages/db/src/types.ts:219](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L219)
+
+***
+
+### subscription
+
+```ts
+subscription: Subscription;
+```
+
+Defined in: [packages/db/src/types.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L217)
+
+***
+
+### type
+
+```ts
+type: "status:change";
+```
+
+Defined in: [packages/db/src/types.ts:216](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L216)
diff --git a/mintlify/db/reference/interfaces/SubscriptionStatusEvent.md b/mintlify/db/reference/interfaces/SubscriptionStatusEvent.md
new file mode 100644
index 000000000..897930257
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SubscriptionStatusEvent.md
@@ -0,0 +1,56 @@
+---
+id: SubscriptionStatusEvent
+title: SubscriptionStatusEvent
+---
+
+# Interface: SubscriptionStatusEvent\&lt;T\>
+
+Defined in: [packages/db/src/types.ts:225](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L225)
+
+Event emitted when subscription status changes to a specific status
+
+## Type Parameters
+
+### T
+
+`T` *extends* [`SubscriptionStatus`](/db/reference/type-aliases/SubscriptionStatus)
+
+## Properties
+
+### previousStatus
+
+```ts
+previousStatus: SubscriptionStatus;
+```
+
+Defined in: [packages/db/src/types.ts:228](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L228)
+
+***
+
+### status
+
+```ts
+status: T;
+```
+
+Defined in: [packages/db/src/types.ts:229](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L229)
+
+***
+
+### subscription
+
+```ts
+subscription: Subscription;
+```
+
+Defined in: [packages/db/src/types.ts:227](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L227)
+
+***
+
+### type
+
+```ts
+type: `status:${T}`;
+```
+
+Defined in: [packages/db/src/types.ts:226](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L226)
diff --git a/mintlify/db/reference/interfaces/SubscriptionUnsubscribedEvent.md b/mintlify/db/reference/interfaces/SubscriptionUnsubscribedEvent.md
new file mode 100644
index 000000000..a62ce55f6
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SubscriptionUnsubscribedEvent.md
@@ -0,0 +1,30 @@
+---
+id: SubscriptionUnsubscribedEvent
+title: SubscriptionUnsubscribedEvent
+---
+
+# Interface: SubscriptionUnsubscribedEvent
+
+Defined in: [packages/db/src/types.ts:235](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L235)
+
+Event emitted when subscription is unsubscribed
+
+## Properties
+
+### subscription
+
+```ts
+subscription: Subscription;
+```
+
+Defined in: [packages/db/src/types.ts:237](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L237)
+
+***
+
+### type
+
+```ts
+type: "unsubscribed";
+```
+
+Defined in: [packages/db/src/types.ts:236](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L236)
diff --git a/mintlify/db/reference/interfaces/SyncConfig.md b/mintlify/db/reference/interfaces/SyncConfig.md
new file mode 100644
index 000000000..3b379321e
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SyncConfig.md
@@ -0,0 +1,110 @@
+---
+id: SyncConfig
+title: SyncConfig
+---
+
+# Interface: SyncConfig\&lt;T, TKey\>
+
+Defined in: [packages/db/src/types.ts:327](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L327)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### getSyncMetadata()?
+
+```ts
+optional getSyncMetadata: () => Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:350](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L350)
+
+Get the sync metadata for insert operations
+
+#### Returns
+
+`Record`\&lt;`string`, `unknown`\>
+
+Record containing relation information
+
+***
+
+### rowUpdateMode?
+
+```ts
+optional rowUpdateMode: "full" | "partial";
+```
+
+Defined in: [packages/db/src/types.ts:359](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L359)
+
+The row update mode used to sync to the collection.
+
+#### Default
+
+`partial`
+
+#### Description
+
+- `partial`: Updates contain only the changes to the row.
+- `full`: Updates contain the entire row.
+
+***
+
+### sync()
+
+```ts
+sync: (params) => 
+  | void
+  | CleanupFn
+  | SyncConfigRes;
+```
+
+Defined in: [packages/db/src/types.ts:331](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L331)
+
+#### Parameters
+
+##### params
+
+###### begin
+
+(`options?`) => `void`
+
+Begin a new sync transaction.
+
+###### collection
+
+[`Collection`](/db/reference/interfaces/Collection)\&lt;`T`, `TKey`, `any`, `any`, `any`\>
+
+###### commit
+
+() => `void`
+
+###### markReady
+
+() => `void`
+
+###### metadata?
+
+[`SyncMetadataApi`](/db/reference/interfaces/SyncMetadataApi)\&lt;`TKey`\>
+
+###### truncate
+
+() => `void`
+
+###### write
+
+(`message`) => `void`
+
+#### Returns
+
+  \| `void`
+  \| [`CleanupFn`](/db/reference/type-aliases/CleanupFn)
+  \| [`SyncConfigRes`](/db/reference/type-aliases/SyncConfigRes)
diff --git a/mintlify/db/reference/interfaces/SyncMetadataApi.md b/mintlify/db/reference/interfaces/SyncMetadataApi.md
new file mode 100644
index 000000000..7a1458f4e
--- /dev/null
+++ b/mintlify/db/reference/interfaces/SyncMetadataApi.md
@@ -0,0 +1,154 @@
+---
+id: SyncMetadataApi
+title: SyncMetadataApi
+---
+
+# Interface: SyncMetadataApi\&lt;TKey\>
+
+Defined in: [packages/db/src/types.ts:362](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L362)
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### collection
+
+```ts
+collection: object;
+```
+
+Defined in: [packages/db/src/types.ts:370](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L370)
+
+#### delete()
+
+```ts
+delete: (key) => void;
+```
+
+##### Parameters
+
+###### key
+
+`string`
+
+##### Returns
+
+`void`
+
+#### get()
+
+```ts
+get: (key) => unknown;
+```
+
+##### Parameters
+
+###### key
+
+`string`
+
+##### Returns
+
+`unknown`
+
+#### list()
+
+```ts
+list: (prefix?) => readonly object[];
+```
+
+##### Parameters
+
+###### prefix?
+
+`string`
+
+##### Returns
+
+readonly `object`[]
+
+#### set()
+
+```ts
+set: (key, value) => void;
+```
+
+##### Parameters
+
+###### key
+
+`string`
+
+###### value
+
+`unknown`
+
+##### Returns
+
+`void`
+
+***
+
+### row
+
+```ts
+row: object;
+```
+
+Defined in: [packages/db/src/types.ts:365](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L365)
+
+#### delete()
+
+```ts
+delete: (key) => void;
+```
+
+##### Parameters
+
+###### key
+
+`TKey`
+
+##### Returns
+
+`void`
+
+#### get()
+
+```ts
+get: (key) => unknown;
+```
+
+##### Parameters
+
+###### key
+
+`TKey`
+
+##### Returns
+
+`unknown`
+
+#### set()
+
+```ts
+set: (key, metadata) => void;
+```
+
+##### Parameters
+
+###### key
+
+`TKey`
+
+###### metadata
+
+`unknown`
+
+##### Returns
+
+`void`
diff --git a/mintlify/db/reference/interfaces/ThrottleStrategy.md b/mintlify/db/reference/interfaces/ThrottleStrategy.md
new file mode 100644
index 000000000..b71ae3252
--- /dev/null
+++ b/mintlify/db/reference/interfaces/ThrottleStrategy.md
@@ -0,0 +1,97 @@
+---
+id: ThrottleStrategy
+title: ThrottleStrategy
+---
+
+# Interface: ThrottleStrategy
+
+Defined in: [packages/db/src/strategies/types.ts:86](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L86)
+
+Throttle strategy that spaces executions evenly over time
+
+## Extends
+
+- [`BaseStrategy`](/db/reference/interfaces/BaseStrategy)\&lt;`"throttle"`\>
+
+## Properties
+
+### \_type
+
+```ts
+_type: "throttle";
+```
+
+Defined in: [packages/db/src/strategies/types.ts:8](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L8)
+
+Type discriminator for strategy identification
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`_type`](/db/reference/interfaces/BaseStrategy#_type)
+
+***
+
+### cleanup()
+
+```ts
+cleanup: () => void;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:23](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L23)
+
+Clean up any resources held by the strategy
+Should be called when the strategy is no longer needed
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`cleanup`](/db/reference/interfaces/BaseStrategy#cleanup)
+
+***
+
+### execute()
+
+```ts
+execute: <T>(fn) => void | Promise<void>;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:15](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L15)
+
+Execute a function according to the strategy's timing rules
+
+#### Type Parameters
+
+##### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+#### Parameters
+
+##### fn
+
+() => [`Transaction`](/db/reference/interfaces/Transaction)\&lt;`T`\>
+
+The function to execute
+
+#### Returns
+
+`void` \| `Promise`\&lt;`void`\>
+
+The result of the function execution (if applicable)
+
+#### Inherited from
+
+[`BaseStrategy`](/db/reference/interfaces/BaseStrategy).[`execute`](/db/reference/interfaces/BaseStrategy#execute)
+
+***
+
+### options
+
+```ts
+options: ThrottleStrategyOptions;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:87](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L87)
diff --git a/mintlify/db/reference/interfaces/ThrottleStrategyOptions.md b/mintlify/db/reference/interfaces/ThrottleStrategyOptions.md
new file mode 100644
index 000000000..ab54fdeb0
--- /dev/null
+++ b/mintlify/db/reference/interfaces/ThrottleStrategyOptions.md
@@ -0,0 +1,47 @@
+---
+id: ThrottleStrategyOptions
+title: ThrottleStrategyOptions
+---
+
+# Interface: ThrottleStrategyOptions
+
+Defined in: [packages/db/src/strategies/types.ts:74](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L74)
+
+Options for throttle strategy
+Ensures executions are evenly spaced over time
+
+## Properties
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:78](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L78)
+
+Execute immediately on the first call
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L80)
+
+Execute on the last call after wait period
+
+***
+
+### wait
+
+```ts
+wait: number;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:76](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L76)
+
+Minimum wait time between executions (milliseconds)
diff --git a/mintlify/db/reference/interfaces/Transaction.md b/mintlify/db/reference/interfaces/Transaction.md
new file mode 100644
index 000000000..eab1e4136
--- /dev/null
+++ b/mintlify/db/reference/interfaces/Transaction.md
@@ -0,0 +1,425 @@
+---
+id: Transaction
+title: Transaction
+---
+
+# Interface: Transaction\&lt;T\>
+
+Defined in: [packages/db/src/transactions.ts:209](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L209)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### autoCommit
+
+```ts
+autoCommit: boolean;
+```
+
+Defined in: [packages/db/src/transactions.ts:215](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L215)
+
+***
+
+### createdAt
+
+```ts
+createdAt: Date;
+```
+
+Defined in: [packages/db/src/transactions.ts:216](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L216)
+
+***
+
+### error?
+
+```ts
+optional error: object;
+```
+
+Defined in: [packages/db/src/transactions.ts:219](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L219)
+
+#### error
+
+```ts
+error: Error;
+```
+
+#### message
+
+```ts
+message: string;
+```
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/db/src/transactions.ts:210](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L210)
+
+***
+
+### isPersisted
+
+```ts
+isPersisted: Deferred<Transaction<T>>;
+```
+
+Defined in: [packages/db/src/transactions.ts:214](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L214)
+
+***
+
+### metadata
+
+```ts
+metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/transactions.ts:218](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L218)
+
+***
+
+### mutationFn
+
+```ts
+mutationFn: MutationFn<T>;
+```
+
+Defined in: [packages/db/src/transactions.ts:212](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L212)
+
+***
+
+### mutations
+
+```ts
+mutations: PendingMutation<T, OperationType, Collection<T, any, any, any, any>>[];
+```
+
+Defined in: [packages/db/src/transactions.ts:213](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L213)
+
+***
+
+### sequenceNumber
+
+```ts
+sequenceNumber: number;
+```
+
+Defined in: [packages/db/src/transactions.ts:217](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L217)
+
+***
+
+### state
+
+```ts
+state: TransactionState;
+```
+
+Defined in: [packages/db/src/transactions.ts:211](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L211)
+
+## Methods
+
+### applyMutations()
+
+```ts
+applyMutations(mutations): void;
+```
+
+Defined in: [packages/db/src/transactions.ts:336](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L336)
+
+Apply new mutations to this transaction, intelligently merging with existing mutations
+
+When mutations operate on the same item (same globalKey), they are merged according to
+the following rules:
+
+- **insert + update** → insert (merge changes, keep empty original)
+- **insert + delete** → removed (mutations cancel each other out)
+- **update + delete** → delete (delete dominates)
+- **update + update** → update (union changes, keep first original)
+- **same type** → replace with latest
+
+This merging reduces over-the-wire churn and keeps the optimistic local view
+aligned with user intent.
+
+#### Parameters
+
+##### mutations
+
+[`PendingMutation`](/db/reference/interfaces/PendingMutation)\&lt;`any`, [`OperationType`](/db/reference/type-aliases/OperationType), [`Collection`](/db/reference/interfaces/Collection)\&lt;`any`, `any`, `any`, `any`, `any`\>\>[]
+
+Array of new mutations to apply
+
+#### Returns
+
+`void`
+
+***
+
+### commit()
+
+```ts
+commit(): Promise<Transaction<T>>;
+```
+
+Defined in: [packages/db/src/transactions.ts:481](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L481)
+
+Commit the transaction and execute the mutation function
+
+#### Returns
+
+`Promise`\&lt;`Transaction`\&lt;`T`\>\>
+
+Promise that resolves to this transaction when complete
+
+#### Examples
+
+```ts
+// Manual commit (when autoCommit is false)
+const tx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    await api.saveChanges(transaction.mutations)
+  }
+})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Buy milk" })
+})
+
+await tx.commit() // Manually commit
+```
+
+```ts
+// Handle commit errors
+try {
+  const tx = createTransaction({
+    mutationFn: async () => { throw new Error("API failed") }
+  })
+
+  tx.mutate(() => {
+    collection.insert({ id: "1", text: "Item" })
+  })
+
+  await tx.commit()
+} catch (error) {
+  console.log('Commit failed, transaction rolled back:', error)
+}
+```
+
+```ts
+// Check transaction state after commit
+await tx.commit()
+console.log(tx.state) // "completed" or "failed"
+```
+
+***
+
+### compareCreatedAt()
+
+```ts
+compareCreatedAt(other): number;
+```
+
+Defined in: [packages/db/src/transactions.ts:535](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L535)
+
+Compare two transactions by their createdAt time and sequence number in order
+to sort them in the order they were created.
+
+#### Parameters
+
+##### other
+
+`Transaction`\&lt;`any`\>
+
+The other transaction to compare to
+
+#### Returns
+
+`number`
+
+-1 if this transaction was created before the other, 1 if it was created after, 0 if they were created at the same time
+
+***
+
+### mutate()
+
+```ts
+mutate(callback): Transaction<T>;
+```
+
+Defined in: [packages/db/src/transactions.ts:296](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L296)
+
+Execute collection operations within this transaction
+
+#### Parameters
+
+##### callback
+
+() => `void`
+
+Synchronous function containing collection operations to group together.
+The transaction context is active only for the synchronous duration of this callback.
+Async work should happen in `mutationFn`; collection operations after `await` boundaries
+inside this callback will not be part of this transaction. For manual transactions, call
+`mutate` multiple times before committing to add more synchronous operations to the same
+transaction.
+
+#### Returns
+
+`Transaction`\&lt;`T`\>
+
+This transaction for chaining
+
+#### Examples
+
+```ts
+// Group multiple operations
+const tx = createTransaction({ mutationFn: async () => {
+  // Send to API
+}})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Buy milk" })
+  collection.update("2", draft => { draft.completed = true })
+  collection.delete("3")
+})
+
+await tx.isPersisted.promise
+```
+
+```ts
+// Handle mutate errors
+try {
+  tx.mutate(() => {
+    collection.insert({ id: "invalid" }) // This might throw
+  })
+} catch (error) {
+  console.log('Mutation failed:', error)
+}
+```
+
+```ts
+// Manual commit control
+const tx = createTransaction({ autoCommit: false, mutationFn: async () => {} })
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Item" })
+})
+
+// Add more synchronous mutations to the same transaction
+tx.mutate(() => {
+  collection.update("1", draft => { draft.text = "Updated item" })
+})
+
+// Commit later when ready
+await tx.commit()
+```
+
+***
+
+### rollback()
+
+```ts
+rollback(config?): Transaction<T>;
+```
+
+Defined in: [packages/db/src/transactions.ts:398](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L398)
+
+Rollback the transaction and any conflicting transactions
+
+#### Parameters
+
+##### config?
+
+Configuration for rollback behavior
+
+###### isSecondaryRollback?
+
+`boolean`
+
+#### Returns
+
+`Transaction`\&lt;`T`\>
+
+This transaction for chaining
+
+#### Examples
+
+```ts
+// Manual rollback
+const tx = createTransaction({ mutationFn: async () => {
+  // Send to API
+}})
+
+tx.mutate(() => {
+  collection.insert({ id: "1", text: "Buy milk" })
+})
+
+// Rollback if needed
+if (shouldCancel) {
+  tx.rollback()
+}
+```
+
+```ts
+// Handle rollback cascade (automatic)
+const tx1 = createTransaction({ mutationFn: async () => {} })
+const tx2 = createTransaction({ mutationFn: async () => {} })
+
+tx1.mutate(() => collection.update("1", draft => { draft.value = "A" }))
+tx2.mutate(() => collection.update("1", draft => { draft.value = "B" })) // Same item
+
+tx1.rollback() // This will also rollback tx2 due to conflict
+```
+
+```ts
+// Handle rollback in error scenarios
+try {
+  await tx.isPersisted.promise
+} catch (error) {
+  console.log('Transaction was rolled back:', error)
+  // Transaction automatically rolled back on mutation function failure
+}
+```
+
+***
+
+### setState()
+
+```ts
+setState(newState): void;
+```
+
+Defined in: [packages/db/src/transactions.ts:239](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L239)
+
+#### Parameters
+
+##### newState
+
+[`TransactionState`](/db/reference/type-aliases/TransactionState)
+
+#### Returns
+
+`void`
+
+***
+
+### touchCollection()
+
+```ts
+touchCollection(): void;
+```
+
+Defined in: [packages/db/src/transactions.ts:426](https://github.com/TanStack/db/blob/main/packages/db/src/transactions.ts#L426)
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/interfaces/TransactionConfig.md b/mintlify/db/reference/interfaces/TransactionConfig.md
new file mode 100644
index 000000000..3d573eb14
--- /dev/null
+++ b/mintlify/db/reference/interfaces/TransactionConfig.md
@@ -0,0 +1,58 @@
+---
+id: TransactionConfig
+title: TransactionConfig
+---
+
+# Interface: TransactionConfig\&lt;T\>
+
+Defined in: [packages/db/src/types.ts:168](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L168)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### autoCommit?
+
+```ts
+optional autoCommit: boolean;
+```
+
+Defined in: [packages/db/src/types.ts:172](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L172)
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [packages/db/src/types.ts:170](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L170)
+
+Unique identifier for the transaction
+
+***
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:175](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L175)
+
+Custom metadata to associate with the transaction
+
+***
+
+### mutationFn
+
+```ts
+mutationFn: MutationFn<T>;
+```
+
+Defined in: [packages/db/src/types.ts:173](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L173)
diff --git a/mintlify/db/reference/interfaces/VirtualRowProps.md b/mintlify/db/reference/interfaces/VirtualRowProps.md
new file mode 100644
index 000000000..1f5a5c737
--- /dev/null
+++ b/mintlify/db/reference/interfaces/VirtualRowProps.md
@@ -0,0 +1,112 @@
+---
+id: VirtualRowProps
+title: VirtualRowProps
+---
+
+# Interface: VirtualRowProps\&lt;TKey\>
+
+Defined in: [packages/db/src/virtual-props.ts:57](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L57)
+
+Virtual properties available on every row in TanStack DB collections.
+
+These properties are:
+- Computed (not stored in the data model)
+- Read-only (cannot be mutated directly)
+- Available in queries (WHERE, ORDER BY, SELECT)
+- Included when spreading rows (`...user`)
+
+## Examples
+
+```typescript
+// Accessing virtual properties on a row
+const user = collection.get('user-1')
+if (user.$synced) {
+  console.log('Confirmed by backend')
+}
+if (user.$origin === 'local') {
+  console.log('Created/modified locally')
+}
+```
+
+```typescript
+// Using virtual properties in queries
+const confirmedOrders = createLiveQueryCollection({
+  query: (q) => q
+    .from({ order: orders })
+    .where(({ order }) => eq(order.$synced, true))
+})
+```
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the row's key (string or number)
+
+## Properties
+
+### $collectionId
+
+```ts
+readonly $collectionId: string;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L96)
+
+The ID of the source collection this row originated from.
+
+In joins, this can help identify which collection each row came from.
+For live query collections, this is the ID of the upstream collection.
+
+***
+
+### $key
+
+```ts
+readonly $key: TKey;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:88](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L88)
+
+The row's key (primary identifier).
+
+This is the same value returned by `collection.config.getKey(row)`.
+Useful when you need the key in projections or computations.
+
+***
+
+### $origin
+
+```ts
+readonly $origin: VirtualOrigin;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L80)
+
+Origin of the last confirmed change to this row, from the current client's perspective.
+
+- `'local'`: The change originated from this client
+- `'remote'`: The change was received via sync
+
+For local-only collections, this is always `'local'`.
+For live query collections, this is passed through from the source collection.
+
+***
+
+### $synced
+
+```ts
+readonly $synced: boolean;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:69](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L69)
+
+Whether this row reflects confirmed state from the backend.
+
+- `true`: Row is confirmed by the backend (no pending optimistic mutations)
+- `false`: Row has pending optimistic mutations that haven't been confirmed
+
+For local-only collections (no sync), this is always `true`.
+For live query collections, this is passed through from the source collection.
diff --git a/mintlify/db/reference/powersync-db-collection/classes/PowerSyncTransactor.md b/mintlify/db/reference/powersync-db-collection/classes/PowerSyncTransactor.md
new file mode 100644
index 000000000..e5d9030cc
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/classes/PowerSyncTransactor.md
@@ -0,0 +1,285 @@
+---
+id: PowerSyncTransactor
+title: PowerSyncTransactor
+---
+
+# Class: PowerSyncTransactor
+
+Defined in: [PowerSyncTransactor.ts:54](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L54)
+
+Applies mutations to the PowerSync database. This method is called automatically by the collection's
+insert, update, and delete operations. You typically don't need to call this directly unless you
+have special transaction requirements.
+
+## Example
+
+```typescript
+// Create a collection
+const collection = createCollection(
+  powerSyncCollectionOptions<Document>({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+  })
+)
+
+const addTx = createTransaction({
+  autoCommit: false,
+  mutationFn: async ({ transaction }) => {
+    await new PowerSyncTransactor({ database: db }).applyTransaction(transaction)
+  },
+})
+
+addTx.mutate(() => {
+  for (let i = 0; i < 5; i++) {
+    collection.insert({ id: randomUUID(), name: `tx-${i}` })
+  }
+})
+
+await addTx.commit()
+await addTx.isPersisted.promise
+```
+
+## Param
+
+The transaction containing mutations to apply
+
+## Constructors
+
+### Constructor
+
+```ts
+new PowerSyncTransactor(options): PowerSyncTransactor;
+```
+
+Defined in: [PowerSyncTransactor.ts:58](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L58)
+
+#### Parameters
+
+##### options
+
+[`TransactorOptions`](/db/reference/powersync-db-collection/type-aliases/TransactorOptions)
+
+#### Returns
+
+`PowerSyncTransactor`
+
+## Properties
+
+### database
+
+```ts
+database: AbstractPowerSyncDatabase;
+```
+
+Defined in: [PowerSyncTransactor.ts:55](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L55)
+
+***
+
+### pendingOperationStore
+
+```ts
+pendingOperationStore: PendingOperationStore;
+```
+
+Defined in: [PowerSyncTransactor.ts:56](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L56)
+
+## Methods
+
+### applyTransaction()
+
+```ts
+applyTransaction(transaction): Promise<void>;
+```
+
+Defined in: [PowerSyncTransactor.ts:66](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L66)
+
+Persists a Transaction to the PowerSync SQLite database.
+
+#### Parameters
+
+##### transaction
+
+`Transaction`\&lt;`any`\>
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### getMutationCollectionMeta()
+
+```ts
+protected getMutationCollectionMeta(mutation): PowerSyncCollectionMeta<any>;
+```
+
+Defined in: [PowerSyncTransactor.ts:297](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L297)
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+#### Returns
+
+[`PowerSyncCollectionMeta`](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta)\&lt;`any`\>
+
+***
+
+### handleDelete()
+
+```ts
+protected handleDelete(
+   mutation, 
+   context, 
+waitForCompletion): Promise<PendingOperation | null>;
+```
+
+Defined in: [PowerSyncTransactor.ts:223](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L223)
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+##### context
+
+`LockContext`
+
+##### waitForCompletion
+
+`boolean` = `false`
+
+#### Returns
+
+`Promise`\&lt;`PendingOperation` \| `null`\>
+
+***
+
+### handleInsert()
+
+```ts
+protected handleInsert(
+   mutation, 
+   context, 
+waitForCompletion): Promise<PendingOperation | null>;
+```
+
+Defined in: [PowerSyncTransactor.ts:152](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L152)
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+##### context
+
+`LockContext`
+
+##### waitForCompletion
+
+`boolean` = `false`
+
+#### Returns
+
+`Promise`\&lt;`PendingOperation` \| `null`\>
+
+***
+
+### handleOperationWithCompletion()
+
+```ts
+protected handleOperationWithCompletion(
+   mutation, 
+   context, 
+   waitForCompletion, 
+handler): Promise<PendingOperation | null>;
+```
+
+Defined in: [PowerSyncTransactor.ts:266](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L266)
+
+Helper function which wraps a persistence operation by:
+- Fetching the mutation's collection's SQLite table details
+- Executing the mutation
+- Returning the last pending diff operation if required
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+##### context
+
+`LockContext`
+
+##### waitForCompletion
+
+`boolean`
+
+##### handler
+
+(`tableName`, `mutation`, `serializeValue`) => `Promise`\&lt;`void`\>
+
+#### Returns
+
+`Promise`\&lt;`PendingOperation` \| `null`\>
+
+***
+
+### handleUpdate()
+
+```ts
+protected handleUpdate(
+   mutation, 
+   context, 
+waitForCompletion): Promise<PendingOperation | null>;
+```
+
+Defined in: [PowerSyncTransactor.ts:188](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L188)
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+##### context
+
+`LockContext`
+
+##### waitForCompletion
+
+`boolean` = `false`
+
+#### Returns
+
+`Promise`\&lt;`PendingOperation` \| `null`\>
+
+***
+
+### processMutationMetadata()
+
+```ts
+protected processMutationMetadata(mutation): string | null;
+```
+
+Defined in: [PowerSyncTransactor.ts:316](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L316)
+
+Processes collection mutation metadata for persistence to the database.
+We only support storing string metadata.
+
+#### Parameters
+
+##### mutation
+
+`PendingMutation`\&lt;`any`\>
+
+#### Returns
+
+`string` \| `null`
+
+null if no metadata should be stored.
diff --git a/mintlify/db/reference/powersync-db-collection/functions/compileSQLite.md b/mintlify/db/reference/powersync-db-collection/functions/compileSQLite.md
new file mode 100644
index 000000000..affd2a65e
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/functions/compileSQLite.md
@@ -0,0 +1,42 @@
+---
+id: compileSQLite
+title: compileSQLite
+---
+
+# Function: compileSQLite()
+
+```ts
+function compileSQLite(options, compileOptions?): SQLiteCompiledQuery;
+```
+
+Defined in: [sqlite-compiler.ts:45](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L45)
+
+Compiles TanStack DB LoadSubsetOptions to SQLite query components.
+
+## Parameters
+
+### options
+
+`LoadSubsetOptions`
+
+### compileOptions?
+
+[`CompileSQLiteOptions`](/db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions)
+
+## Returns
+
+[`SQLiteCompiledQuery`](/db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery)
+
+## Example
+
+```typescript
+const compiled = compileSQLite({
+  where: { type: 'func', name: 'gt', args: [
+    { type: 'ref', path: ['price'] },
+    { type: 'val', value: 100 }
+  ]},
+  orderBy: [{ expression: { type: 'ref', path: ['price'] }, compareOptions: { direction: 'desc', nulls: 'last' } }],
+  limit: 50
+})
+// Result: { where: '"price" > ?', orderBy: '"price" DESC', limit: 50, params: [100] }
+```
diff --git a/mintlify/db/reference/powersync-db-collection/functions/powerSyncCollectionOptions.md b/mintlify/db/reference/powersync-db-collection/functions/powerSyncCollectionOptions.md
new file mode 100644
index 000000000..d3e032962
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/functions/powerSyncCollectionOptions.md
@@ -0,0 +1,213 @@
+---
+id: powerSyncCollectionOptions
+title: powerSyncCollectionOptions
+---
+
+# Function: powerSyncCollectionOptions()
+
+Implementation of powerSyncCollectionOptions that handles both schema and non-schema configurations.
+
+## Call Signature
+
+```ts
+function powerSyncCollectionOptions<TTable>(config): EnhancedPowerSyncCollectionConfig<TTable, OptionalExtractedTable<TTable>, never>;
+```
+
+Defined in: [powersync.ts:78](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/powersync.ts#L78)
+
+Creates a PowerSync collection configuration with basic default validation.
+Input and Output types are the SQLite column types.
+
+### Type Parameters
+
+#### TTable
+
+`TTable` *extends* `Table`\&lt;`ColumnsType`\> = `Table`\&lt;`ColumnsType`\>
+
+### Parameters
+
+#### config
+
+[`BasePowerSyncCollectionConfig`](/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig)\&lt;`TTable`, `never`\> & [`ConfigWithSQLiteTypes`](/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes)
+
+### Returns
+
+[`EnhancedPowerSyncCollectionConfig`](/db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig)\&lt;`TTable`, `OptionalExtractedTable`\&lt;`TTable`\>, `never`\>
+
+### Example
+
+```typescript
+const APP_SCHEMA = new Schema({
+  documents: new Table({
+    name: column.text,
+  }),
+})
+
+type Document = (typeof APP_SCHEMA)["types"]["documents"]
+
+const db = new PowerSyncDatabase({
+  database: {
+    dbFilename: "test.sqlite",
+  },
+  schema: APP_SCHEMA,
+})
+
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents
+  })
+)
+```
+
+## Call Signature
+
+```ts
+function powerSyncCollectionOptions<TTable, TSchema>(config): CollectionConfig<InferPowerSyncOutputType<TTable, TSchema>, string, TSchema, PowerSyncCollectionUtils<TTable>> & object & object;
+```
+
+Defined in: [powersync.ts:135](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/powersync.ts#L135)
+
+Creates a PowerSync collection configuration with schema validation.
+
+The input types satisfy the SQLite column types.
+
+The output types are defined by the provided schema. This schema can enforce additional
+validation or type transforms.
+Arbitrary output typed mutations are encoded to SQLite for persistence. We provide a basic standard
+serialization implementation to serialize column values. Custom or advanced types require providing additional
+serializer specifications. Partial column overrides can be supplied to `serializer`.
+
+### Type Parameters
+
+#### TTable
+
+`TTable` *extends* `Table`\&lt;`ColumnsType`\>
+
+#### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`OptionalExtractedTable`\&lt;`TTable`\>, `AnyTableColumnType`\&lt;`TTable`\>\>
+
+### Parameters
+
+#### config
+
+[`BasePowerSyncCollectionConfig`](/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig)\&lt;`TTable`, `TSchema`\> & [`SerializerConfig`](/db/reference/powersync-db-collection/type-aliases/SerializerConfig)\&lt;`InferOutput`\&lt;`TSchema`\>, `ExtractedTable`\&lt;`TTable`\>\> & `object`
+
+### Returns
+
+`CollectionConfig`\&lt;[`InferPowerSyncOutputType`](/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType)\&lt;`TTable`, `TSchema`\>, `string`, `TSchema`, [`PowerSyncCollectionUtils`](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils)\&lt;`TTable`\>\> & `object` & `object`
+
+### Example
+
+```typescript
+import { z } from "zod"
+
+// The PowerSync SQLite schema
+const APP_SCHEMA = new Schema({
+  documents: new Table({
+    name: column.text,
+    // Dates are stored as ISO date strings in SQLite
+    created_at: column.text
+  }),
+})
+
+// Advanced Zod validations. The output type of this schema
+// is constrained to the SQLite schema of APP_SCHEMA
+const schema = z.object({
+  id: z.string(),
+  // Notice that `name` is not nullable (is required) here and it has additional validation
+  name: z.string().min(3, { message: "Should be at least 3 characters" }).nullable(),
+  // The input type is still the SQLite string type. While collections will output smart Date instances.
+  created_at: z.string().transform(val => new Date(val))
+})
+
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+    schema,
+    serializer: {
+       // The default is toISOString, this is just to demonstrate custom overrides
+       created_at: (outputValue) => outputValue.toISOString(),
+    },
+  })
+)
+```
+
+## Call Signature
+
+```ts
+function powerSyncCollectionOptions<TTable, TSchema>(config): CollectionConfig<InferPowerSyncOutputType<TTable, TSchema>, string, TSchema, PowerSyncCollectionUtils<TTable>> & object & object;
+```
+
+Defined in: [powersync.ts:203](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/powersync.ts#L203)
+
+Creates a PowerSync collection configuration with schema validation.
+
+The input types are not linked to the internal SQLite table types. This can
+give greater flexibility, e.g. by accepting rich types as input for `insert` or `update` operations.
+An additional `deserializationSchema` is required in order to process incoming SQLite updates to the output type.
+
+The output types are defined by the provided schema. This schema can enforce additional
+validation or type transforms.
+Arbitrary output typed mutations are encoded to SQLite for persistence. We provide a basic standard
+serialization implementation to serialize column values. Custom or advanced types require providing additional
+serializer specifications. Partial column overrides can be supplied to `serializer`.
+
+### Type Parameters
+
+#### TTable
+
+`TTable` *extends* `Table`\&lt;`ColumnsType`\>
+
+#### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`AnyTableColumnType`\&lt;`TTable`\>, `AnyTableColumnType`\&lt;`TTable`\>\>
+
+### Parameters
+
+#### config
+
+[`BasePowerSyncCollectionConfig`](/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig)\&lt;`TTable`, `TSchema`\> & [`SerializerConfig`](/db/reference/powersync-db-collection/type-aliases/SerializerConfig)\&lt;`InferOutput`\&lt;`TSchema`\>, `ExtractedTable`\&lt;`TTable`\>\> & `object`
+
+### Returns
+
+`CollectionConfig`\&lt;[`InferPowerSyncOutputType`](/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType)\&lt;`TTable`, `TSchema`\>, `string`, `TSchema`, [`PowerSyncCollectionUtils`](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils)\&lt;`TTable`\>\> & `object` & `object`
+
+### Example
+
+```typescript
+import { z } from "zod"
+
+// The PowerSync SQLite schema
+const APP_SCHEMA = new Schema({
+  documents: new Table({
+    name: column.text,
+    // Booleans are represented as integers in SQLite
+    is_active: column.integer
+  }),
+})
+
+// Advanced Zod validations.
+// We accept boolean values as input for operations and expose Booleans in query results
+const schema = z.object({
+  id: z.string(),
+  isActive: z.boolean(), // TInput and TOutput are boolean
+})
+
+// The deserializationSchema converts the SQLite synced INTEGER (0/1) values to booleans.
+const deserializationSchema = z.object({
+  id: z.string(),
+  isActive: z.number().nullable().transform((val) => val == null ? true : val > 0),
+})
+
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents,
+    schema,
+    deserializationSchema,
+  })
+)
+```
diff --git a/mintlify/db/reference/powersync-db-collection/index.md b/mintlify/db/reference/powersync-db-collection/index.md
new file mode 100644
index 000000000..470aaf3d1
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/index.md
@@ -0,0 +1,41 @@
+---
+id: "@tanstack/powersync-db-collection"
+title: "@tanstack/powersync-db-collection"
+---
+
+# @tanstack/powersync-db-collection
+
+## Classes
+
+- [PowerSyncTransactor](/db/reference/powersync-db-collection/classes/PowerSyncTransactor)
+
+## Interfaces
+
+- [CompileSQLiteOptions](/db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions)
+- [SQLiteCompiledQuery](/db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery)
+
+## Type Aliases
+
+- [BasePowerSyncCollectionConfig](/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig)
+- [ConfigWithArbitraryCollectionTypes](/db/reference/powersync-db-collection/type-aliases/ConfigWithArbitraryCollectionTypes)
+- [ConfigWithSQLiteInputType](/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteInputType)
+- [ConfigWithSQLiteTypes](/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes)
+- [CustomSQLiteSerializer](/db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer)
+- [EagerSyncHooks](/db/reference/powersync-db-collection/type-aliases/EagerSyncHooks)
+- [EnhancedPowerSyncCollectionConfig](/db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig)
+- [InferPowerSyncOutputType](/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType)
+- [OnDemandSyncHooks](/db/reference/powersync-db-collection/type-aliases/OnDemandSyncHooks)
+- [PowerSyncCollectionConfig](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionConfig)
+- [PowerSyncCollectionMeta](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta)
+- [PowerSyncCollectionUtils](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils)
+- [SerializerConfig](/db/reference/powersync-db-collection/type-aliases/SerializerConfig)
+- [TransactorOptions](/db/reference/powersync-db-collection/type-aliases/TransactorOptions)
+
+## Variables
+
+- [DEFAULT\_BATCH\_SIZE](/db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE)
+
+## Functions
+
+- [compileSQLite](/db/reference/powersync-db-collection/functions/compileSQLite)
+- [powerSyncCollectionOptions](/db/reference/powersync-db-collection/functions/powerSyncCollectionOptions)
diff --git a/mintlify/db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions.md b/mintlify/db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions.md
new file mode 100644
index 000000000..23f8537ed
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions.md
@@ -0,0 +1,24 @@
+---
+id: CompileSQLiteOptions
+title: CompileSQLiteOptions
+---
+
+# Interface: CompileSQLiteOptions
+
+Defined in: [sqlite-compiler.ts:20](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L20)
+
+Options for controlling how SQL is compiled.
+
+## Properties
+
+### jsonColumn?
+
+```ts
+optional jsonColumn: string;
+```
+
+Defined in: [sqlite-compiler.ts:26](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L26)
+
+When set, column references emit `json_extract(<jsonColumn>, '$.<columnName>')`
+instead of `"<columnName>"`. The `id` column is excluded since it's stored
+as a direct column in the tracked table.
diff --git a/mintlify/db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery.md b/mintlify/db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery.md
new file mode 100644
index 000000000..f7874c7e4
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery.md
@@ -0,0 +1,58 @@
+---
+id: SQLiteCompiledQuery
+title: SQLiteCompiledQuery
+---
+
+# Interface: SQLiteCompiledQuery
+
+Defined in: [sqlite-compiler.ts:6](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L6)
+
+Result of compiling LoadSubsetOptions to SQLite
+
+## Properties
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [sqlite-compiler.ts:12](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L12)
+
+The LIMIT value
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: string;
+```
+
+Defined in: [sqlite-compiler.ts:10](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L10)
+
+The ORDER BY clause (without "ORDER BY" keyword), e.g., "price DESC"
+
+***
+
+### params
+
+```ts
+params: unknown[];
+```
+
+Defined in: [sqlite-compiler.ts:14](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L14)
+
+Parameter values in order, to be passed to SQLite query
+
+***
+
+### where?
+
+```ts
+optional where: string;
+```
+
+Defined in: [sqlite-compiler.ts:8](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/sqlite-compiler.ts#L8)
+
+The WHERE clause (without "WHERE" keyword), e.g., "price > ?"
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig.md b/mintlify/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig.md
new file mode 100644
index 000000000..8f4ab1b70
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig.md
@@ -0,0 +1,60 @@
+---
+id: BasePowerSyncCollectionConfig
+title: BasePowerSyncCollectionConfig
+---
+
+# Type Alias: BasePowerSyncCollectionConfig\&lt;TTable, TSchema\>
+
+```ts
+type BasePowerSyncCollectionConfig<TTable, TSchema> = Omit<BaseCollectionConfig<ExtractedTable<TTable>, string, TSchema>, "onInsert" | "onUpdate" | "onDelete" | "getKey" | "syncMode"> & object & 
+  | EagerSyncHooks
+  | OnDemandSyncHooks;
+```
+
+Defined in: [definitions.ts:203](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L203)
+
+## Type Declaration
+
+### database
+
+```ts
+database: AbstractPowerSyncDatabase;
+```
+
+The PowerSync database instance
+
+### syncBatchSize?
+
+```ts
+optional syncBatchSize: number;
+```
+
+The maximum number of documents to read from the SQLite table
+in a single batch during the initial sync between PowerSync and the
+in-memory TanStack DB collection.
+
+#### Remarks
+
+- Defaults to [DEFAULT\_BATCH\_SIZE](/db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE) if not specified.
+- Larger values reduce the number of round trips to the storage
+  engine but increase memory usage per batch.
+- Smaller values may lower memory usage and allow earlier
+  streaming of initial results, at the cost of more query calls.
+
+### table
+
+```ts
+table: TTable;
+```
+
+The PowerSync schema Table definition
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table` = `Table`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithArbitraryCollectionTypes.md b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithArbitraryCollectionTypes.md
new file mode 100644
index 000000000..53d0e7f72
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithArbitraryCollectionTypes.md
@@ -0,0 +1,62 @@
+---
+id: ConfigWithArbitraryCollectionTypes
+title: ConfigWithArbitraryCollectionTypes
+---
+
+# Type Alias: ConfigWithArbitraryCollectionTypes\&lt;TTable, TSchema\>
+
+```ts
+type ConfigWithArbitraryCollectionTypes<TTable, TSchema> = SerializerConfig<StandardSchemaV1.InferOutput<TSchema>, ExtractedTable<TTable>> & object;
+```
+
+Defined in: [definitions.ts:127](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L127)
+
+Config where TInput and TOutput have arbitrarily typed values.
+The keys of the types need to equal the SQLite types.
+Since TInput is not the SQLite types, we require a schema in order to deserialize incoming SQLite updates. The schema should validate from SQLite to TOutput.
+
+## Type Declaration
+
+### deserializationSchema
+
+```ts
+deserializationSchema: StandardSchemaV1<ExtractedTable<TTable>, StandardSchemaV1.InferOutput<TSchema>>;
+```
+
+Schema for deserializing and validating input data from the sync stream.
+
+This schema defines how to transform and validate data coming from SQLite types (as stored in the database)
+into the desired output types (`TOutput`) expected by your application or validation logic.
+
+The generic parameters allow for arbitrary input and output types, so you can specify custom conversion rules
+for each column. This is especially useful when your application expects richer types (e.g., Date, enums, objects)
+than what SQLite natively supports.
+
+Use this to ensure that incoming data from the sync stream is properly converted and validated before use.
+
+Example:
+```typescript
+deserializationSchema: z.object({
+  createdAt: z.preprocess((val) => new Date(val as string), z.date()),
+  meta: z.preprocess((val) => JSON.parse(val as string), z.object({ ... })),
+})
+```
+
+This enables robust type safety and validation for incoming data, bridging the gap between SQLite storage
+and your application's expected types.
+
+### schema
+
+```ts
+schema: TSchema;
+```
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`AnyTableColumnType`\&lt;`TTable`\>, `AnyTableColumnType`\&lt;`TTable`\>\>
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteInputType.md b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteInputType.md
new file mode 100644
index 000000000..88daf2993
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteInputType.md
@@ -0,0 +1,33 @@
+---
+id: ConfigWithSQLiteInputType
+title: ConfigWithSQLiteInputType
+---
+
+# Type Alias: ConfigWithSQLiteInputType\&lt;TTable, TSchema\>
+
+```ts
+type ConfigWithSQLiteInputType<TTable, TSchema> = SerializerConfig<StandardSchemaV1.InferOutput<TSchema>, ExtractedTable<TTable>> & object;
+```
+
+Defined in: [definitions.ts:108](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L108)
+
+Config where TInput is the SQLite types while TOutput can be defined by TSchema.
+We can use the same schema to validate TInput and incoming SQLite changes.
+
+## Type Declaration
+
+### schema
+
+```ts
+schema: TSchema;
+```
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`OptionalExtractedTable`\&lt;`TTable`\>, `AnyTableColumnType`\&lt;`TTable`\>\>
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes.md b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes.md
new file mode 100644
index 000000000..df8a39bd3
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes.md
@@ -0,0 +1,14 @@
+---
+id: ConfigWithSQLiteTypes
+title: ConfigWithSQLiteTypes
+---
+
+# Type Alias: ConfigWithSQLiteTypes
+
+```ts
+type ConfigWithSQLiteTypes = object;
+```
+
+Defined in: [definitions.ts:102](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L102)
+
+Config for when TInput and TOutput are both the SQLite types.
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer.md b/mintlify/db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer.md
new file mode 100644
index 000000000..5099f83b2
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer.md
@@ -0,0 +1,48 @@
+---
+id: CustomSQLiteSerializer
+title: CustomSQLiteSerializer
+---
+
+# Type Alias: CustomSQLiteSerializer\&lt;TOutput, TSQLite\>
+
+```ts
+type CustomSQLiteSerializer<TOutput, TSQLite> = Partial<{ [Key in keyof TOutput]: (value: TOutput[Key]) => Key extends keyof TSQLite ? TSQLite[Key] : never }>;
+```
+
+Defined in: [definitions.ts:54](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L54)
+
+A mapping type for custom serialization of object properties to SQLite-compatible values.
+
+This type allows you to override, for keys in the input object (`TOutput`), a function that transforms
+the value to the corresponding SQLite type (`TSQLite`). Keys not specified will use the default SQLite serialization.
+
+## Generics
+- `TOutput`: The input object type, representing the row data to be serialized.
+- `TSQLite`: The target SQLite-compatible type for each property, typically inferred from the table schema.
+
+## Usage
+Use this type to define a map of serialization functions for specific keys when you need custom handling
+(e.g., converting complex objects, formatting dates, or handling enums).
+
+Example:
+```ts
+const serializer: CustomSQLiteSerializer<MyRowType, MySQLiteType> = {
+  createdAt: (date) => date.toISOString(),
+  status: (status) => status ? 1 : 0,
+  meta: (meta) => JSON.stringify(meta),
+};
+```
+
+## Behavior
+- Each key maps to a function that receives the value and returns the SQLite-compatible value.
+- Used by `serializeForSQLite` to override default serialization for specific columns.
+
+## Type Parameters
+
+### TOutput
+
+`TOutput` *extends* `Record`\&lt;`string`, `unknown`\>
+
+### TSQLite
+
+`TSQLite` *extends* `Record`\&lt;`string`, `unknown`\>
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/EagerSyncHooks.md b/mintlify/db/reference/powersync-db-collection/type-aliases/EagerSyncHooks.md
new file mode 100644
index 000000000..f6872eaab
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/EagerSyncHooks.md
@@ -0,0 +1,54 @@
+---
+id: EagerSyncHooks
+title: EagerSyncHooks
+---
+
+# Type Alias: EagerSyncHooks
+
+```ts
+type EagerSyncHooks = object;
+```
+
+Defined in: [definitions.ts:171](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L171)
+
+Eager sync mode hooks.
+Called once when the collection sync starts and stops.
+
+## Properties
+
+### onLoad()?
+
+```ts
+optional onLoad: () => CleanupFn | void | Promise<CleanupFn | void>;
+```
+
+Defined in: [definitions.ts:179](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L179)
+
+Called when the collection sync starts.
+Use this to set up external data sources (e.g. subscribing to a sync stream).
+
+#### Returns
+
+`CleanupFn` \| `void` \| `Promise`\&lt;`CleanupFn` \| `void`\>
+
+A cleanup function that is called when the collection sync is cleaned up.
+
+***
+
+### onLoadSubset?
+
+```ts
+optional onLoadSubset: never;
+```
+
+Defined in: [definitions.ts:180](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L180)
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: "eager";
+```
+
+Defined in: [definitions.ts:172](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L172)
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig.md b/mintlify/db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig.md
new file mode 100644
index 000000000..cf75b8686
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig.md
@@ -0,0 +1,48 @@
+---
+id: EnhancedPowerSyncCollectionConfig
+title: EnhancedPowerSyncCollectionConfig
+---
+
+# Type Alias: EnhancedPowerSyncCollectionConfig\&lt;TTable, OutputType, TSchema\>
+
+```ts
+type EnhancedPowerSyncCollectionConfig<TTable, OutputType, TSchema> = CollectionConfig<OutputType, string, TSchema, PowerSyncCollectionUtils<TTable>> & object;
+```
+
+Defined in: [definitions.ts:297](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L297)
+
+A CollectionConfig which includes utilities for PowerSync.
+
+## Type Declaration
+
+### id?
+
+```ts
+optional id: string;
+```
+
+### schema?
+
+```ts
+optional schema: TSchema;
+```
+
+### utils
+
+```ts
+utils: PowerSyncCollectionUtils<TTable>;
+```
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table`
+
+### OutputType
+
+`OutputType` *extends* `Record`\&lt;`string`, `unknown`\> = `Record`\&lt;`string`, `unknown`\>
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType.md b/mintlify/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType.md
new file mode 100644
index 000000000..22292301d
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType.md
@@ -0,0 +1,26 @@
+---
+id: InferPowerSyncOutputType
+title: InferPowerSyncOutputType
+---
+
+# Type Alias: InferPowerSyncOutputType\&lt;TTable, TSchema\>
+
+```ts
+type InferPowerSyncOutputType<TTable, TSchema> = TSchema extends never ? ExtractedTable<TTable> : InferSchemaOutput<TSchema>;
+```
+
+Defined in: [definitions.ts:22](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L22)
+
+Small helper which determines the output type if:
+- Standard SQLite types are to be used OR
+- If the provided schema should be used.
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table` = `Table`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`PowerSyncRecord`\> = `never`
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/OnDemandSyncHooks.md b/mintlify/db/reference/powersync-db-collection/type-aliases/OnDemandSyncHooks.md
new file mode 100644
index 000000000..f62718743
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/OnDemandSyncHooks.md
@@ -0,0 +1,61 @@
+---
+id: OnDemandSyncHooks
+title: OnDemandSyncHooks
+---
+
+# Type Alias: OnDemandSyncHooks
+
+```ts
+type OnDemandSyncHooks = object;
+```
+
+Defined in: [definitions.ts:187](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L187)
+
+On-demand sync mode hooks.
+Called each time a subset is loaded or unloaded in response to live query changes.
+
+## Properties
+
+### onLoad?
+
+```ts
+optional onLoad: never;
+```
+
+Defined in: [definitions.ts:189](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L189)
+
+***
+
+### onLoadSubset()?
+
+```ts
+optional onLoadSubset: (options) => CleanupFn | void | Promise<CleanupFn | void>;
+```
+
+Defined in: [definitions.ts:198](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L198)
+
+Called when a subset of data is requested by a live query.
+Use this to set up external data sources for the requested subset
+(e.g. subscribing to a sync stream with parameters derived from the query predicate).
+
+#### Parameters
+
+##### options
+
+`LoadSubsetOptions`
+
+#### Returns
+
+`CleanupFn` \| `void` \| `Promise`\&lt;`CleanupFn` \| `void`\>
+
+A cleanup function that is called when the subset is unloaded.
+
+***
+
+### syncMode
+
+```ts
+syncMode: "on-demand";
+```
+
+Defined in: [definitions.ts:188](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L188)
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionConfig.md b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionConfig.md
new file mode 100644
index 000000000..9e0efa449
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionConfig.md
@@ -0,0 +1,51 @@
+---
+id: PowerSyncCollectionConfig
+title: PowerSyncCollectionConfig
+---
+
+# Type Alias: PowerSyncCollectionConfig\&lt;TTable, TSchema\>
+
+```ts
+type PowerSyncCollectionConfig<TTable, TSchema> = BasePowerSyncCollectionConfig<TTable, TSchema> & 
+  | ConfigWithSQLiteTypes
+  | ConfigWithSQLiteInputType<TTable, TSchema>
+| ConfigWithArbitraryCollectionTypes<TTable, TSchema>;
+```
+
+Defined in: [definitions.ts:260](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L260)
+
+Configuration options for creating a PowerSync collection.
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table` = `Table`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1`\&lt;`any`\> = `never`
+
+## Example
+
+```typescript
+const APP_SCHEMA = new Schema({
+  documents: new Table({
+    name: column.text,
+  }),
+})
+
+const db = new PowerSyncDatabase({
+  database: {
+    dbFilename: "test.sqlite",
+  },
+  schema: APP_SCHEMA,
+})
+
+const collection = createCollection(
+  powerSyncCollectionOptions({
+    database: db,
+    table: APP_SCHEMA.props.documents
+  })
+)
+```
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta.md b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta.md
new file mode 100644
index 000000000..2fbb14897
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta.md
@@ -0,0 +1,78 @@
+---
+id: PowerSyncCollectionMeta
+title: PowerSyncCollectionMeta
+---
+
+# Type Alias: PowerSyncCollectionMeta\&lt;TTable\>
+
+```ts
+type PowerSyncCollectionMeta<TTable> = object;
+```
+
+Defined in: [definitions.ts:273](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L273)
+
+Metadata for the PowerSync Collection.
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table` = `Table`
+
+## Properties
+
+### metadataIsTracked
+
+```ts
+metadataIsTracked: boolean;
+```
+
+Defined in: [definitions.ts:291](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L291)
+
+Whether the PowerSync table tracks metadata.
+
+***
+
+### serializeValue()
+
+```ts
+serializeValue: (value) => ExtractedTable<TTable>;
+```
+
+Defined in: [definitions.ts:286](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L286)
+
+Serializes a collection value to the SQLite type
+
+#### Parameters
+
+##### value
+
+`any`
+
+#### Returns
+
+`ExtractedTable`\&lt;`TTable`\>
+
+***
+
+### tableName
+
+```ts
+tableName: string;
+```
+
+Defined in: [definitions.ts:277](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L277)
+
+The SQLite table representing the collection.
+
+***
+
+### trackedTableName
+
+```ts
+trackedTableName: string;
+```
+
+Defined in: [definitions.ts:281](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L281)
+
+The internal table used to track diffs for the collection.
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils.md b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils.md
new file mode 100644
index 000000000..7b3b869dd
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils.md
@@ -0,0 +1,34 @@
+---
+id: PowerSyncCollectionUtils
+title: PowerSyncCollectionUtils
+---
+
+# Type Alias: PowerSyncCollectionUtils\&lt;TTable\>
+
+```ts
+type PowerSyncCollectionUtils<TTable> = object;
+```
+
+Defined in: [definitions.ts:315](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L315)
+
+Collection-level utilities for PowerSync.
+
+## Type Parameters
+
+### TTable
+
+`TTable` *extends* `Table` = `Table`
+
+## Properties
+
+### getMeta()
+
+```ts
+getMeta: () => PowerSyncCollectionMeta<TTable>;
+```
+
+Defined in: [definitions.ts:316](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L316)
+
+#### Returns
+
+[`PowerSyncCollectionMeta`](/db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta)\&lt;`TTable`\>
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/SerializerConfig.md b/mintlify/db/reference/powersync-db-collection/type-aliases/SerializerConfig.md
new file mode 100644
index 000000000..c615edd28
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/SerializerConfig.md
@@ -0,0 +1,77 @@
+---
+id: SerializerConfig
+title: SerializerConfig
+---
+
+# Type Alias: SerializerConfig\&lt;TOutput, TSQLite\>
+
+```ts
+type SerializerConfig<TOutput, TSQLite> = object;
+```
+
+Defined in: [definitions.ts:63](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L63)
+
+## Type Parameters
+
+### TOutput
+
+`TOutput` *extends* `Record`\&lt;`string`, `unknown`\>
+
+### TSQLite
+
+`TSQLite` *extends* `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### onDeserializationError()
+
+```ts
+onDeserializationError: (error) => void;
+```
+
+Defined in: [definitions.ts:96](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L96)
+
+Application logic should ensure that incoming synced data is always valid.
+Failing to deserialize and apply incoming changes results in data inconsistency - which is a fatal error.
+Use this callback to react to deserialization errors.
+
+#### Parameters
+
+##### error
+
+`StandardSchemaV1.FailureResult`
+
+#### Returns
+
+`void`
+
+***
+
+### serializer?
+
+```ts
+optional serializer: CustomSQLiteSerializer<TOutput, TSQLite>;
+```
+
+Defined in: [definitions.ts:89](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L89)
+
+Optional partial serializer object for customizing how individual columns are serialized for SQLite.
+
+This should be a partial map of column keys to serialization functions, following the
+[CustomSQLiteSerializer](/db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer) type. Each function receives the column value and returns a value
+compatible with SQLite storage.
+
+If not provided for a column, the default behavior is used:
+  - `TEXT`: Strings are stored as-is; Dates are converted to ISO strings; other types are JSON-stringified.
+  - `INTEGER`/`REAL`: Numbers are stored as-is; booleans are mapped to 1/0.
+
+Use this option to override serialization for specific columns, such as formatting dates, handling enums,
+or serializing complex objects.
+
+Example:
+```typescript
+serializer: {
+  createdAt: (date) => date.getTime(), // Store as timestamp
+  meta: (meta) => JSON.stringify(meta), // Custom object serialization
+}
+```
diff --git a/mintlify/db/reference/powersync-db-collection/type-aliases/TransactorOptions.md b/mintlify/db/reference/powersync-db-collection/type-aliases/TransactorOptions.md
new file mode 100644
index 000000000..7a9051b65
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/type-aliases/TransactorOptions.md
@@ -0,0 +1,22 @@
+---
+id: TransactorOptions
+title: TransactorOptions
+---
+
+# Type Alias: TransactorOptions
+
+```ts
+type TransactorOptions = object;
+```
+
+Defined in: [PowerSyncTransactor.ts:15](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L15)
+
+## Properties
+
+### database
+
+```ts
+database: AbstractPowerSyncDatabase;
+```
+
+Defined in: [PowerSyncTransactor.ts:16](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/PowerSyncTransactor.ts#L16)
diff --git a/mintlify/db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE.md b/mintlify/db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE.md
new file mode 100644
index 000000000..e916cf782
--- /dev/null
+++ b/mintlify/db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE.md
@@ -0,0 +1,14 @@
+---
+id: DEFAULT_BATCH_SIZE
+title: DEFAULT_BATCH_SIZE
+---
+
+# Variable: DEFAULT\_BATCH\_SIZE
+
+```ts
+const DEFAULT_BATCH_SIZE: 1000 = 1000;
+```
+
+Defined in: [definitions.ts:322](https://github.com/TanStack/db/blob/main/packages/powersync-db-collection/src/definitions.ts#L322)
+
+Default value for [PowerSyncCollectionConfig#syncBatchSize](/db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig).
diff --git a/mintlify/db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError.md b/mintlify/db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError.md
new file mode 100644
index 000000000..a3c3cd9b3
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: DeleteOperationItemNotFoundError
+title: DeleteOperationItemNotFoundError
+---
+
+# Class: DeleteOperationItemNotFoundError
+
+Defined in: [packages/query-db-collection/src/errors.ts:76](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L76)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DeleteOperationItemNotFoundError(key): DeleteOperationItemNotFoundError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:77](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L77)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`DeleteOperationItemNotFoundError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/DuplicateKeyInBatchError.md b/mintlify/db/reference/query-db-collection/classes/DuplicateKeyInBatchError.md
new file mode 100644
index 000000000..6ef4eb2c9
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/DuplicateKeyInBatchError.md
@@ -0,0 +1,220 @@
+---
+id: DuplicateKeyInBatchError
+title: DuplicateKeyInBatchError
+---
+
+# Class: DuplicateKeyInBatchError
+
+Defined in: [packages/query-db-collection/src/errors.ts:62](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L62)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new DuplicateKeyInBatchError(key): DuplicateKeyInBatchError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:63](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L63)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`DuplicateKeyInBatchError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/GetKeyRequiredError.md b/mintlify/db/reference/query-db-collection/classes/GetKeyRequiredError.md
new file mode 100644
index 000000000..1d4f3a21d
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/GetKeyRequiredError.md
@@ -0,0 +1,214 @@
+---
+id: GetKeyRequiredError
+title: GetKeyRequiredError
+---
+
+# Class: GetKeyRequiredError
+
+Defined in: [packages/query-db-collection/src/errors.ts:32](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L32)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new GetKeyRequiredError(): GetKeyRequiredError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:33](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L33)
+
+#### Returns
+
+`GetKeyRequiredError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/InvalidItemStructureError.md b/mintlify/db/reference/query-db-collection/classes/InvalidItemStructureError.md
new file mode 100644
index 000000000..5530df731
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/InvalidItemStructureError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidItemStructureError
+title: InvalidItemStructureError
+---
+
+# Class: InvalidItemStructureError
+
+Defined in: [packages/query-db-collection/src/errors.ts:48](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L48)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidItemStructureError(message): InvalidItemStructureError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:49](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L49)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`InvalidItemStructureError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/InvalidSyncOperationError.md b/mintlify/db/reference/query-db-collection/classes/InvalidSyncOperationError.md
new file mode 100644
index 000000000..06a7f694c
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/InvalidSyncOperationError.md
@@ -0,0 +1,220 @@
+---
+id: InvalidSyncOperationError
+title: InvalidSyncOperationError
+---
+
+# Class: InvalidSyncOperationError
+
+Defined in: [packages/query-db-collection/src/errors.ts:83](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L83)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new InvalidSyncOperationError(message): InvalidSyncOperationError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:84](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L84)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`InvalidSyncOperationError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/ItemNotFoundError.md b/mintlify/db/reference/query-db-collection/classes/ItemNotFoundError.md
new file mode 100644
index 000000000..114d32ebf
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/ItemNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: ItemNotFoundError
+title: ItemNotFoundError
+---
+
+# Class: ItemNotFoundError
+
+Defined in: [packages/query-db-collection/src/errors.ts:55](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L55)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ItemNotFoundError(key): ItemNotFoundError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:56](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L56)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`ItemNotFoundError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/MissingKeyFieldError.md b/mintlify/db/reference/query-db-collection/classes/MissingKeyFieldError.md
new file mode 100644
index 000000000..ad5b1e330
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/MissingKeyFieldError.md
@@ -0,0 +1,224 @@
+---
+id: MissingKeyFieldError
+title: MissingKeyFieldError
+---
+
+# Class: MissingKeyFieldError
+
+Defined in: [packages/query-db-collection/src/errors.ts:97](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L97)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new MissingKeyFieldError(operation, message): MissingKeyFieldError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:98](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L98)
+
+#### Parameters
+
+##### operation
+
+`string`
+
+##### message
+
+`string`
+
+#### Returns
+
+`MissingKeyFieldError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/QueryClientRequiredError.md b/mintlify/db/reference/query-db-collection/classes/QueryClientRequiredError.md
new file mode 100644
index 000000000..a5819178f
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/QueryClientRequiredError.md
@@ -0,0 +1,214 @@
+---
+id: QueryClientRequiredError
+title: QueryClientRequiredError
+---
+
+# Class: QueryClientRequiredError
+
+Defined in: [packages/query-db-collection/src/errors.ts:25](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L25)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryClientRequiredError(): QueryClientRequiredError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:26](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L26)
+
+#### Returns
+
+`QueryClientRequiredError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/QueryCollectionError.md b/mintlify/db/reference/query-db-collection/classes/QueryCollectionError.md
new file mode 100644
index 000000000..d7430bd81
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/QueryCollectionError.md
@@ -0,0 +1,252 @@
+---
+id: QueryCollectionError
+title: QueryCollectionError
+---
+
+# Class: QueryCollectionError
+
+Defined in: [packages/query-db-collection/src/errors.ts:4](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L4)
+
+## Extends
+
+- `TanStackDBError`
+
+## Extended by
+
+- [`QueryKeyRequiredError`](/db/reference/query-db-collection/classes/QueryKeyRequiredError)
+- [`QueryFnRequiredError`](/db/reference/query-db-collection/classes/QueryFnRequiredError)
+- [`QueryClientRequiredError`](/db/reference/query-db-collection/classes/QueryClientRequiredError)
+- [`GetKeyRequiredError`](/db/reference/query-db-collection/classes/GetKeyRequiredError)
+- [`SyncNotInitializedError`](/db/reference/query-db-collection/classes/SyncNotInitializedError)
+- [`InvalidItemStructureError`](/db/reference/query-db-collection/classes/InvalidItemStructureError)
+- [`ItemNotFoundError`](/db/reference/query-db-collection/classes/ItemNotFoundError)
+- [`DuplicateKeyInBatchError`](/db/reference/query-db-collection/classes/DuplicateKeyInBatchError)
+- [`UpdateOperationItemNotFoundError`](/db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError)
+- [`DeleteOperationItemNotFoundError`](/db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError)
+- [`InvalidSyncOperationError`](/db/reference/query-db-collection/classes/InvalidSyncOperationError)
+- [`UnknownOperationTypeError`](/db/reference/query-db-collection/classes/UnknownOperationTypeError)
+- [`MissingKeyFieldError`](/db/reference/query-db-collection/classes/MissingKeyFieldError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryCollectionError(message): QueryCollectionError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:5](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L5)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`QueryCollectionError`
+
+#### Overrides
+
+```ts
+TanStackDBError.constructor
+```
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+```ts
+TanStackDBError.cause
+```
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+```ts
+TanStackDBError.message
+```
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+```ts
+TanStackDBError.name
+```
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+```ts
+TanStackDBError.stack
+```
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+```ts
+TanStackDBError.stackTraceLimit
+```
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+TanStackDBError.captureStackTrace
+```
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+```ts
+TanStackDBError.prepareStackTrace
+```
diff --git a/mintlify/db/reference/query-db-collection/classes/QueryFnRequiredError.md b/mintlify/db/reference/query-db-collection/classes/QueryFnRequiredError.md
new file mode 100644
index 000000000..2404b8c5c
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/QueryFnRequiredError.md
@@ -0,0 +1,214 @@
+---
+id: QueryFnRequiredError
+title: QueryFnRequiredError
+---
+
+# Class: QueryFnRequiredError
+
+Defined in: [packages/query-db-collection/src/errors.ts:18](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L18)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryFnRequiredError(): QueryFnRequiredError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:19](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L19)
+
+#### Returns
+
+`QueryFnRequiredError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/QueryKeyRequiredError.md b/mintlify/db/reference/query-db-collection/classes/QueryKeyRequiredError.md
new file mode 100644
index 000000000..e9d8dfb09
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/QueryKeyRequiredError.md
@@ -0,0 +1,214 @@
+---
+id: QueryKeyRequiredError
+title: QueryKeyRequiredError
+---
+
+# Class: QueryKeyRequiredError
+
+Defined in: [packages/query-db-collection/src/errors.ts:11](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L11)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryKeyRequiredError(): QueryKeyRequiredError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:12](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L12)
+
+#### Returns
+
+`QueryKeyRequiredError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/SyncNotInitializedError.md b/mintlify/db/reference/query-db-collection/classes/SyncNotInitializedError.md
new file mode 100644
index 000000000..280590ab9
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/SyncNotInitializedError.md
@@ -0,0 +1,214 @@
+---
+id: SyncNotInitializedError
+title: SyncNotInitializedError
+---
+
+# Class: SyncNotInitializedError
+
+Defined in: [packages/query-db-collection/src/errors.ts:39](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L39)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new SyncNotInitializedError(): SyncNotInitializedError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:40](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L40)
+
+#### Returns
+
+`SyncNotInitializedError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/UnknownOperationTypeError.md b/mintlify/db/reference/query-db-collection/classes/UnknownOperationTypeError.md
new file mode 100644
index 000000000..791282fa1
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/UnknownOperationTypeError.md
@@ -0,0 +1,220 @@
+---
+id: UnknownOperationTypeError
+title: UnknownOperationTypeError
+---
+
+# Class: UnknownOperationTypeError
+
+Defined in: [packages/query-db-collection/src/errors.ts:90](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L90)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UnknownOperationTypeError(type): UnknownOperationTypeError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:91](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L91)
+
+#### Parameters
+
+##### type
+
+`string`
+
+#### Returns
+
+`UnknownOperationTypeError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError.md b/mintlify/db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError.md
new file mode 100644
index 000000000..e2408b7d0
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError.md
@@ -0,0 +1,220 @@
+---
+id: UpdateOperationItemNotFoundError
+title: UpdateOperationItemNotFoundError
+---
+
+# Class: UpdateOperationItemNotFoundError
+
+Defined in: [packages/query-db-collection/src/errors.ts:69](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L69)
+
+## Extends
+
+- [`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new UpdateOperationItemNotFoundError(key): UpdateOperationItemNotFoundError;
+```
+
+Defined in: [packages/query-db-collection/src/errors.ts:70](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/errors.ts#L70)
+
+#### Parameters
+
+##### key
+
+`string` | `number`
+
+#### Returns
+
+`UpdateOperationItemNotFoundError`
+
+#### Overrides
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`constructor`](/db/reference/query-db-collection/classes/QueryCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`cause`](/db/reference/query-db-collection/classes/QueryCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`message`](/db/reference/query-db-collection/classes/QueryCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`name`](/db/reference/query-db-collection/classes/QueryCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stack`](/db/reference/query-db-collection/classes/QueryCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`stackTraceLimit`](/db/reference/query-db-collection/classes/QueryCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`captureStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`QueryCollectionError`](/db/reference/query-db-collection/classes/QueryCollectionError).[`prepareStackTrace`](/db/reference/query-db-collection/classes/QueryCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/query-db-collection/functions/queryCollectionOptions.md b/mintlify/db/reference/query-db-collection/functions/queryCollectionOptions.md
new file mode 100644
index 000000000..f13e42b82
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/functions/queryCollectionOptions.md
@@ -0,0 +1,550 @@
+---
+id: queryCollectionOptions
+title: queryCollectionOptions
+---
+
+# Function: queryCollectionOptions()
+
+## Call Signature
+
+```ts
+function queryCollectionOptions<T, TQueryFn, TError, TQueryKey, TKey, TQueryData>(config): CollectionConfig<InferSchemaOutput<T>, TKey, T, QueryCollectionUtils<InferSchemaOutput<T>, TKey, InferSchemaInput<T>, TError>> & object;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:438](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L438)
+
+Creates query collection options for use with a standard Collection.
+This integrates TanStack Query with TanStack DB for automatic synchronization.
+
+Supports automatic type inference following the priority order:
+1. Schema inference (highest priority)
+2. QueryFn return type inference (second priority)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+Type of the schema if a schema is provided otherwise it is the type of the values returned by the queryFn
+
+#### TQueryFn
+
+`TQueryFn` *extends* (`context`) => `any`
+
+#### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+The type of the query key
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+#### TQueryData
+
+`TQueryData` = `Awaited`\&lt;`ReturnType`\&lt;`TQueryFn`\>\>
+
+### Parameters
+
+#### config
+
+[`QueryCollectionConfig`](/db/reference/query-db-collection/interfaces/QueryCollectionConfig)\&lt;`InferSchemaOutput`\&lt;`T`\>, `TQueryFn`, `TError`, `TQueryKey`, `TKey`, `T`, `Awaited`\&lt;`ReturnType`\&lt;`TQueryFn`\>\>\> & `object`
+
+Configuration options for the Query collection
+
+### Returns
+
+`CollectionConfig`\&lt;`InferSchemaOutput`\&lt;`T`\>, `TKey`, `T`, [`QueryCollectionUtils`](/db/reference/query-db-collection/interfaces/QueryCollectionUtils)\&lt;`InferSchemaOutput`\&lt;`T`\>, `TKey`, `InferSchemaInput`\&lt;`T`\>, `TError`\>\> & `object`
+
+Collection options with utilities for direct writes and manual operations
+
+### Examples
+
+```ts
+// Type inferred from queryFn return type (NEW!)
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json() as Todo[] // Type automatically inferred!
+    },
+    queryClient,
+    getKey: (item) => item.id, // item is typed as Todo
+  })
+)
+```
+
+```ts
+// Explicit type
+const todosCollection = createCollection<Todo>(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Schema inference
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    schema: todoSchema, // Type inferred from schema
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// With persistence handlers
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.createTodos(transaction.mutations.map(m => m.modified))
+    },
+    onUpdate: async ({ transaction }) => {
+      await api.updateTodos(transaction.mutations)
+    },
+    onDelete: async ({ transaction }) => {
+      await api.deleteTodos(transaction.mutations.map(m => m.key))
+    }
+  })
+)
+```
+
+```ts
+// The select option extracts the items array from a response with metadata
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    select: (data) => data.items, // Extract the array of items
+    queryClient,
+    schema: todoSchema,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Call Signature
+
+```ts
+function queryCollectionOptions<T, TQueryFn, TError, TQueryKey, TKey, TQueryData>(config): CollectionConfig<T, TKey, never, QueryCollectionUtils<T, TKey, T, TError>> & object;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:473](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L473)
+
+Creates query collection options for use with a standard Collection.
+This integrates TanStack Query with TanStack DB for automatic synchronization.
+
+Supports automatic type inference following the priority order:
+1. Schema inference (highest priority)
+2. QueryFn return type inference (second priority)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+Type of the schema if a schema is provided otherwise it is the type of the values returned by the queryFn
+
+#### TQueryFn
+
+`TQueryFn` *extends* (`context`) => `any` = (`context`) => `any`
+
+#### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+The type of the query key
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+#### TQueryData
+
+`TQueryData` = `Awaited`\&lt;`ReturnType`\&lt;`TQueryFn`\>\>
+
+### Parameters
+
+#### config
+
+[`QueryCollectionConfig`](/db/reference/query-db-collection/interfaces/QueryCollectionConfig)\&lt;`T`, `TQueryFn`, `TError`, `TQueryKey`, `TKey`, `never`, `TQueryData`\> & `object`
+
+Configuration options for the Query collection
+
+### Returns
+
+`CollectionConfig`\&lt;`T`, `TKey`, `never`, [`QueryCollectionUtils`](/db/reference/query-db-collection/interfaces/QueryCollectionUtils)\&lt;`T`, `TKey`, `T`, `TError`\>\> & `object`
+
+Collection options with utilities for direct writes and manual operations
+
+### Examples
+
+```ts
+// Type inferred from queryFn return type (NEW!)
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json() as Todo[] // Type automatically inferred!
+    },
+    queryClient,
+    getKey: (item) => item.id, // item is typed as Todo
+  })
+)
+```
+
+```ts
+// Explicit type
+const todosCollection = createCollection<Todo>(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Schema inference
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    schema: todoSchema, // Type inferred from schema
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// With persistence handlers
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.createTodos(transaction.mutations.map(m => m.modified))
+    },
+    onUpdate: async ({ transaction }) => {
+      await api.updateTodos(transaction.mutations)
+    },
+    onDelete: async ({ transaction }) => {
+      await api.deleteTodos(transaction.mutations.map(m => m.key))
+    }
+  })
+)
+```
+
+```ts
+// The select option extracts the items array from a response with metadata
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    select: (data) => data.items, // Extract the array of items
+    queryClient,
+    schema: todoSchema,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Call Signature
+
+```ts
+function queryCollectionOptions<T, TError, TQueryKey, TKey>(config): CollectionConfig<InferSchemaOutput<T>, TKey, T, QueryCollectionUtils<InferSchemaOutput<T>, TKey, InferSchemaInput<T>, TError>> & object;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:506](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L506)
+
+Creates query collection options for use with a standard Collection.
+This integrates TanStack Query with TanStack DB for automatic synchronization.
+
+Supports automatic type inference following the priority order:
+1. Schema inference (highest priority)
+2. QueryFn return type inference (second priority)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+Type of the schema if a schema is provided otherwise it is the type of the values returned by the queryFn
+
+#### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+The type of the query key
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+### Parameters
+
+#### config
+
+[`QueryCollectionConfig`](/db/reference/query-db-collection/interfaces/QueryCollectionConfig)\&lt;`InferSchemaOutput`\&lt;`T`\>, (`context`) => `InferSchemaOutput`\&lt;`T`\>[] \| `Promise`\&lt;`InferSchemaOutput`\&lt;`T`\>[]\>, `TError`, `TQueryKey`, `TKey`, `T`, `InferSchemaOutput`\&lt;`T`\>[]\> & `object`
+
+Configuration options for the Query collection
+
+### Returns
+
+`CollectionConfig`\&lt;`InferSchemaOutput`\&lt;`T`\>, `TKey`, `T`, [`QueryCollectionUtils`](/db/reference/query-db-collection/interfaces/QueryCollectionUtils)\&lt;`InferSchemaOutput`\&lt;`T`\>, `TKey`, `InferSchemaInput`\&lt;`T`\>, `TError`\>\> & `object`
+
+Collection options with utilities for direct writes and manual operations
+
+### Examples
+
+```ts
+// Type inferred from queryFn return type (NEW!)
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json() as Todo[] // Type automatically inferred!
+    },
+    queryClient,
+    getKey: (item) => item.id, // item is typed as Todo
+  })
+)
+```
+
+```ts
+// Explicit type
+const todosCollection = createCollection<Todo>(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Schema inference
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    schema: todoSchema, // Type inferred from schema
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// With persistence handlers
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.createTodos(transaction.mutations.map(m => m.modified))
+    },
+    onUpdate: async ({ transaction }) => {
+      await api.updateTodos(transaction.mutations)
+    },
+    onDelete: async ({ transaction }) => {
+      await api.deleteTodos(transaction.mutations.map(m => m.key))
+    }
+  })
+)
+```
+
+```ts
+// The select option extracts the items array from a response with metadata
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    select: (data) => data.items, // Extract the array of items
+    queryClient,
+    schema: todoSchema,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+## Call Signature
+
+```ts
+function queryCollectionOptions<T, TError, TQueryKey, TKey>(config): CollectionConfig<T, TKey, never, QueryCollectionUtils<T, TKey, T, TError>> & object;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:540](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L540)
+
+Creates query collection options for use with a standard Collection.
+This integrates TanStack Query with TanStack DB for automatic synchronization.
+
+Supports automatic type inference following the priority order:
+1. Schema inference (highest priority)
+2. QueryFn return type inference (second priority)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+Type of the schema if a schema is provided otherwise it is the type of the values returned by the queryFn
+
+#### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+The type of the query key
+
+#### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+### Parameters
+
+#### config
+
+[`QueryCollectionConfig`](/db/reference/query-db-collection/interfaces/QueryCollectionConfig)\&lt;`T`, (`context`) => `T`[] \| `Promise`\&lt;`T`[]\>, `TError`, `TQueryKey`, `TKey`, `never`, `T`[]\> & `object`
+
+Configuration options for the Query collection
+
+### Returns
+
+`CollectionConfig`\&lt;`T`, `TKey`, `never`, [`QueryCollectionUtils`](/db/reference/query-db-collection/interfaces/QueryCollectionUtils)\&lt;`T`, `TKey`, `T`, `TError`\>\> & `object`
+
+Collection options with utilities for direct writes and manual operations
+
+### Examples
+
+```ts
+// Type inferred from queryFn return type (NEW!)
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      return response.json() as Todo[] // Type automatically inferred!
+    },
+    queryClient,
+    getKey: (item) => item.id, // item is typed as Todo
+  })
+)
+```
+
+```ts
+// Explicit type
+const todosCollection = createCollection<Todo>(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// Schema inference
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    queryClient,
+    schema: todoSchema, // Type inferred from schema
+    getKey: (item) => item.id,
+  })
+)
+```
+
+```ts
+// With persistence handlers
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    queryClient,
+    getKey: (item) => item.id,
+    onInsert: async ({ transaction }) => {
+      await api.createTodos(transaction.mutations.map(m => m.modified))
+    },
+    onUpdate: async ({ transaction }) => {
+      await api.updateTodos(transaction.mutations)
+    },
+    onDelete: async ({ transaction }) => {
+      await api.deleteTodos(transaction.mutations.map(m => m.key))
+    }
+  })
+)
+```
+
+```ts
+// The select option extracts the items array from a response with metadata
+const todosCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then(r => r.json()),
+    select: (data) => data.items, // Extract the array of items
+    queryClient,
+    schema: todoSchema,
+    getKey: (item) => item.id,
+  })
+)
+```
diff --git a/mintlify/db/reference/query-db-collection/index.md b/mintlify/db/reference/query-db-collection/index.md
new file mode 100644
index 000000000..8dc0e0b52
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/index.md
@@ -0,0 +1,37 @@
+---
+id: "@tanstack/query-db-collection"
+title: "@tanstack/query-db-collection"
+---
+
+# @tanstack/query-db-collection
+
+## Classes
+
+- [DeleteOperationItemNotFoundError](/db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError)
+- [DuplicateKeyInBatchError](/db/reference/query-db-collection/classes/DuplicateKeyInBatchError)
+- [GetKeyRequiredError](/db/reference/query-db-collection/classes/GetKeyRequiredError)
+- [InvalidItemStructureError](/db/reference/query-db-collection/classes/InvalidItemStructureError)
+- [InvalidSyncOperationError](/db/reference/query-db-collection/classes/InvalidSyncOperationError)
+- [ItemNotFoundError](/db/reference/query-db-collection/classes/ItemNotFoundError)
+- [MissingKeyFieldError](/db/reference/query-db-collection/classes/MissingKeyFieldError)
+- [QueryClientRequiredError](/db/reference/query-db-collection/classes/QueryClientRequiredError)
+- [QueryCollectionError](/db/reference/query-db-collection/classes/QueryCollectionError)
+- [QueryFnRequiredError](/db/reference/query-db-collection/classes/QueryFnRequiredError)
+- [QueryKeyRequiredError](/db/reference/query-db-collection/classes/QueryKeyRequiredError)
+- [SyncNotInitializedError](/db/reference/query-db-collection/classes/SyncNotInitializedError)
+- [UnknownOperationTypeError](/db/reference/query-db-collection/classes/UnknownOperationTypeError)
+- [UpdateOperationItemNotFoundError](/db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError)
+
+## Interfaces
+
+- [QueryCollectionConfig](/db/reference/query-db-collection/interfaces/QueryCollectionConfig)
+- [QueryCollectionMeta](/db/reference/query-db-collection/interfaces/QueryCollectionMeta)
+- [QueryCollectionUtils](/db/reference/query-db-collection/interfaces/QueryCollectionUtils)
+
+## Type Aliases
+
+- [SyncOperation](/db/reference/query-db-collection/type-aliases/SyncOperation)
+
+## Functions
+
+- [queryCollectionOptions](/db/reference/query-db-collection/functions/queryCollectionOptions)
diff --git a/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionConfig.md b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionConfig.md
new file mode 100644
index 000000000..f82740785
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionConfig.md
@@ -0,0 +1,225 @@
+---
+id: QueryCollectionConfig
+title: QueryCollectionConfig
+---
+
+# Interface: QueryCollectionConfig\&lt;T, TQueryFn, TError, TQueryKey, TKey, TSchema, TQueryData\>
+
+Defined in: [packages/query-db-collection/src/query.ts:61](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L61)
+
+Configuration options for creating a Query Collection
+
+## Extends
+
+- `BaseCollectionConfig`\&lt;`T`, `TKey`, `TSchema`\>
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `object`
+
+The explicit type of items stored in the collection
+
+### TQueryFn
+
+`TQueryFn` *extends* (`context`) => `any` = (`context`) => `any`
+
+The queryFn type
+
+### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+The type of the query key
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+The schema type for validation
+
+### TQueryData
+
+`TQueryData` = `Awaited`\&lt;`ReturnType`\&lt;`TQueryFn`\>\>
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: Enabled<TQueryData, TError, TQueryData, TQueryKey>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:87](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L87)
+
+Whether the query should automatically run (default: true)
+
+***
+
+### gcTime?
+
+```ts
+optional gcTime: number;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:122](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L122)
+
+Time in milliseconds after which the collection will be garbage collected
+when it has no active subscribers. Defaults to 5 minutes (300000ms).
+
+#### Overrides
+
+```ts
+BaseCollectionConfig.gcTime
+```
+
+***
+
+### meta?
+
+```ts
+optional meta: Record<string, unknown>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:151](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L151)
+
+Metadata to pass to the query.
+Available in queryFn via context.meta
+
+#### Example
+
+```ts
+// Using meta for error context
+queryFn: async (context) => {
+  try {
+    return await api.getTodos(userId)
+  } catch (error) {
+    // Use meta for better error messages
+    throw new Error(
+      context.meta?.errorMessage || 'Failed to load todos'
+    )
+  }
+},
+meta: {
+  errorMessage: `Failed to load todos for user ${userId}`
+}
+```
+
+***
+
+### persistedGcTime?
+
+```ts
+optional persistedGcTime: number;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:129](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L129)
+
+***
+
+### queryClient
+
+```ts
+queryClient: QueryClient;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:83](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L83)
+
+The TanStack Query client instance
+
+***
+
+### queryFn
+
+```ts
+queryFn: TQueryFn extends (context) => any[] | Promise<any[]> ? (context) => T[] | Promise<T[]> : TQueryFn;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:75](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L75)
+
+Function that fetches data from the server. Must return the complete collection state
+
+***
+
+### queryKey
+
+```ts
+queryKey: TQueryKey | TQueryKeyBuilder<TQueryKey>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:73](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L73)
+
+The query key used by TanStack Query to identify this query
+
+***
+
+### refetchInterval?
+
+```ts
+optional refetchInterval: number | false | (query) => number | false | undefined;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:94](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L94)
+
+***
+
+### retry?
+
+```ts
+optional retry: RetryValue<TError>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:101](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L101)
+
+***
+
+### retryDelay?
+
+```ts
+optional retryDelay: RetryDelayValue<TError>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:108](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L108)
+
+***
+
+### select()?
+
+```ts
+optional select: (data) => T[];
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:81](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L81)
+
+#### Parameters
+
+##### data
+
+`TQueryData`
+
+#### Returns
+
+`T`[]
+
+***
+
+### staleTime?
+
+```ts
+optional staleTime: StaleTimeFunction<TQueryData, TError, TQueryData, TQueryKey>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:115](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L115)
diff --git a/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionMeta.md b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionMeta.md
new file mode 100644
index 000000000..d837ac807
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionMeta.md
@@ -0,0 +1,43 @@
+---
+id: QueryCollectionMeta
+title: QueryCollectionMeta
+---
+
+# Interface: QueryCollectionMeta
+
+Defined in: [packages/query-db-collection/src/global.ts:30](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/global.ts#L30)
+
+Base interface for Query Collection meta properties.
+Users can extend this interface to add their own custom properties while
+preserving loadSubsetOptions.
+
+## Example
+
+```typescript
+declare module "@tanstack/query-db-collection" {
+  interface QueryCollectionMeta {
+    myCustomProperty: string
+    userId?: number
+  }
+}
+```
+
+## Extends
+
+- `Record`\&lt;`string`, `unknown`\>
+
+## Indexable
+
+```ts
+[key: string]: unknown
+```
+
+## Properties
+
+### loadSubsetOptions?
+
+```ts
+optional loadSubsetOptions: LoadSubsetOptions;
+```
+
+Defined in: [packages/query-db-collection/src/global.ts:31](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/global.ts#L31)
diff --git a/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionUtils.md b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionUtils.md
new file mode 100644
index 000000000..de520e0df
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/interfaces/QueryCollectionUtils.md
@@ -0,0 +1,288 @@
+---
+id: QueryCollectionUtils
+title: QueryCollectionUtils
+---
+
+# Interface: QueryCollectionUtils\&lt;TItem, TKey, TInsertInput, TError\>
+
+Defined in: [packages/query-db-collection/src/query.ts:170](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L170)
+
+Utility methods available on Query Collections for direct writes and manual operations.
+Direct writes bypass the normal query/mutation flow and write directly to the synced data store.
+
+## Extends
+
+- `UtilsRecord`
+
+## Type Parameters
+
+### TItem
+
+`TItem` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+The type of items stored in the collection
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the item keys
+
+### TInsertInput
+
+`TInsertInput` *extends* `object` = `TItem`
+
+The type accepted for insert operations
+
+### TError
+
+`TError` = `unknown`
+
+The type of errors that can occur during queries
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### clearError()
+
+```ts
+clearError: () => Promise<void>;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:215](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L215)
+
+Clear the error state and trigger a refetch of the query
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+Promise that resolves when the refetch completes successfully
+
+#### Throws
+
+Error if the refetch fails
+
+***
+
+### dataUpdatedAt
+
+```ts
+dataUpdatedAt: number;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:206](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L206)
+
+Get timestamp of last successful data update (in milliseconds)
+
+***
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:198](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L198)
+
+Get the number of consecutive sync failures.
+Incremented only when query fails completely (not per retry attempt); reset on success.
+
+***
+
+### fetchStatus
+
+```ts
+fetchStatus: "idle" | "fetching" | "paused";
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:208](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L208)
+
+Get current fetch status
+
+***
+
+### isError
+
+```ts
+isError: boolean;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:193](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L193)
+
+Check if the collection is in an error state
+
+***
+
+### isFetching
+
+```ts
+isFetching: boolean;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:200](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L200)
+
+Check if query is currently fetching (initial or background)
+
+***
+
+### isLoading
+
+```ts
+isLoading: boolean;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:204](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L204)
+
+Check if query is loading for the first time (no data yet)
+
+***
+
+### isRefetching
+
+```ts
+isRefetching: boolean;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:202](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L202)
+
+Check if query is refetching in background (not initial fetch)
+
+***
+
+### lastError
+
+```ts
+lastError: TError | undefined;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:191](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L191)
+
+Get the last error encountered by the query (if any); reset on success
+
+***
+
+### refetch
+
+```ts
+refetch: RefetchFn;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:177](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L177)
+
+Manually trigger a refetch of the query
+
+***
+
+### writeBatch()
+
+```ts
+writeBatch: (callback) => void;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:187](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L187)
+
+Execute multiple write operations as a single atomic batch to the synced data store
+
+#### Parameters
+
+##### callback
+
+() => `void`
+
+#### Returns
+
+`void`
+
+***
+
+### writeDelete()
+
+```ts
+writeDelete: (keys) => void;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:183](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L183)
+
+Delete one or more items directly from the synced data store without triggering a query refetch or optimistic update
+
+#### Parameters
+
+##### keys
+
+`TKey` | `TKey`[]
+
+#### Returns
+
+`void`
+
+***
+
+### writeInsert()
+
+```ts
+writeInsert: (data) => void;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:179](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L179)
+
+Insert one or more items directly into the synced data store without triggering a query refetch or optimistic update
+
+#### Parameters
+
+##### data
+
+`TInsertInput` | `TInsertInput`[]
+
+#### Returns
+
+`void`
+
+***
+
+### writeUpdate()
+
+```ts
+writeUpdate: (updates) => void;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:181](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L181)
+
+Update one or more items directly in the synced data store without triggering a query refetch or optimistic update
+
+#### Parameters
+
+##### updates
+
+`Partial`\&lt;`TItem`\> | `Partial`\&lt;`TItem`\>[]
+
+#### Returns
+
+`void`
+
+***
+
+### writeUpsert()
+
+```ts
+writeUpsert: (data) => void;
+```
+
+Defined in: [packages/query-db-collection/src/query.ts:185](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/query.ts#L185)
+
+Insert or update one or more items directly in the synced data store without triggering a query refetch or optimistic update
+
+#### Parameters
+
+##### data
+
+`Partial`\&lt;`TItem`\> | `Partial`\&lt;`TItem`\>[]
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/query-db-collection/type-aliases/SyncOperation.md b/mintlify/db/reference/query-db-collection/type-aliases/SyncOperation.md
new file mode 100644
index 000000000..7090eeb63
--- /dev/null
+++ b/mintlify/db/reference/query-db-collection/type-aliases/SyncOperation.md
@@ -0,0 +1,42 @@
+---
+id: SyncOperation
+title: SyncOperation
+---
+
+# Type Alias: SyncOperation\&lt;TRow, TKey, TInsertInput\>
+
+```ts
+type SyncOperation<TRow, TKey, TInsertInput> = 
+  | {
+  data: TInsertInput | TInsertInput[];
+  type: "insert";
+}
+  | {
+  data: Partial<TRow> | Partial<TRow>[];
+  type: "update";
+}
+  | {
+  key: TKey | TKey[];
+  type: "delete";
+}
+  | {
+  data: Partial<TRow> | Partial<TRow>[];
+  type: "upsert";
+};
+```
+
+Defined in: [packages/query-db-collection/src/manual-sync.ts:20](https://github.com/TanStack/db/blob/main/packages/query-db-collection/src/manual-sync.ts#L20)
+
+## Type Parameters
+
+### TRow
+
+`TRow` *extends* `object`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TInsertInput
+
+`TInsertInput` *extends* `object` = `TRow`
diff --git a/mintlify/db/reference/rxdb-db-collection/functions/rxdbCollectionOptions.md b/mintlify/db/reference/rxdb-db-collection/functions/rxdbCollectionOptions.md
new file mode 100644
index 000000000..66598730f
--- /dev/null
+++ b/mintlify/db/reference/rxdb-db-collection/functions/rxdbCollectionOptions.md
@@ -0,0 +1,66 @@
+---
+id: rxdbCollectionOptions
+title: rxdbCollectionOptions
+---
+
+# Function: rxdbCollectionOptions()
+
+## Call Signature
+
+```ts
+function rxdbCollectionOptions<T>(config): CollectionConfig<InferSchemaOutput<T>, string, T, UtilsRecord> & object;
+```
+
+Defined in: [rxdb.ts:89](https://github.com/TanStack/db/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L89)
+
+Creates RxDB collection options for use with a standard Collection
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `StandardSchemaV1`\&lt;`unknown`, `unknown`\>
+
+### Parameters
+
+#### config
+
+[`RxDBCollectionConfig`](/db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig)\&lt;`InferSchemaOutput`\&lt;`T`\>, `T`\>
+
+Configuration options for the RxDB collection
+
+### Returns
+
+`CollectionConfig`\&lt;`InferSchemaOutput`\&lt;`T`\>, `string`, `T`, `UtilsRecord`\> & `object`
+
+Collection options with utilities
+
+## Call Signature
+
+```ts
+function rxdbCollectionOptions<T>(config): CollectionConfig<T, string, never, UtilsRecord> & object;
+```
+
+Defined in: [rxdb.ts:96](https://github.com/TanStack/db/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L96)
+
+Creates RxDB collection options for use with a standard Collection
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `object`
+
+### Parameters
+
+#### config
+
+`Omit`\&lt;`BaseCollectionConfig`\&lt;`T`, `string`, `never`, `UtilsRecord`, `any`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"` \| `"getKey"`\> & `object` & `object`
+
+Configuration options for the RxDB collection
+
+### Returns
+
+`CollectionConfig`\&lt;`T`, `string`, `never`, `UtilsRecord`\> & `object`
+
+Collection options with utilities
diff --git a/mintlify/db/reference/rxdb-db-collection/functions/stripRxdbFields.md b/mintlify/db/reference/rxdb-db-collection/functions/stripRxdbFields.md
new file mode 100644
index 000000000..593630ecc
--- /dev/null
+++ b/mintlify/db/reference/rxdb-db-collection/functions/stripRxdbFields.md
@@ -0,0 +1,28 @@
+---
+id: stripRxdbFields
+title: stripRxdbFields
+---
+
+# Function: stripRxdbFields()
+
+```ts
+function stripRxdbFields<T>(obj): T;
+```
+
+Defined in: [helper.ts:8](https://github.com/TanStack/db/blob/main/packages/rxdb-db-collection/src/helper.ts#L8)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Record`\&lt;`string`, `unknown`\>
+
+## Parameters
+
+### obj
+
+`T`
+
+## Returns
+
+`T`
diff --git a/mintlify/db/reference/rxdb-db-collection/index.md b/mintlify/db/reference/rxdb-db-collection/index.md
new file mode 100644
index 000000000..e39dc41cc
--- /dev/null
+++ b/mintlify/db/reference/rxdb-db-collection/index.md
@@ -0,0 +1,19 @@
+---
+id: "@tanstack/rxdb-db-collection"
+title: "@tanstack/rxdb-db-collection"
+---
+
+# @tanstack/rxdb-db-collection
+
+## Type Aliases
+
+- [RxDBCollectionConfig](/db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig)
+
+## Variables
+
+- [OPEN\_RXDB\_SUBSCRIPTIONS](/db/reference/rxdb-db-collection/variables/OPEN_RXDB_SUBSCRIPTIONS)
+
+## Functions
+
+- [rxdbCollectionOptions](/db/reference/rxdb-db-collection/functions/rxdbCollectionOptions)
+- [stripRxdbFields](/db/reference/rxdb-db-collection/functions/stripRxdbFields)
diff --git a/mintlify/db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig.md b/mintlify/db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig.md
new file mode 100644
index 000000000..c96b11467
--- /dev/null
+++ b/mintlify/db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig.md
@@ -0,0 +1,68 @@
+---
+id: RxDBCollectionConfig
+title: RxDBCollectionConfig
+---
+
+# Type Alias: RxDBCollectionConfig\&lt;T, TSchema\>
+
+```ts
+type RxDBCollectionConfig<T, TSchema> = Omit<BaseCollectionConfig<T, string, TSchema>, "onInsert" | "onUpdate" | "onDelete" | "getKey"> & object;
+```
+
+Defined in: [rxdb.ts:49](https://github.com/TanStack/db/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L49)
+
+Configuration interface for RxDB collection options
+
+## Type Declaration
+
+### rxCollection
+
+```ts
+rxCollection: RxCollection<T, unknown, unknown, unknown>;
+```
+
+The RxCollection from a RxDB Database instance.
+
+### syncBatchSize?
+
+```ts
+optional syncBatchSize: number;
+```
+
+The maximum number of documents to read from the RxDB collection
+in a single batch during the initial sync between RxDB and the
+in-memory TanStack DB collection.
+
+#### Remarks
+
+- Defaults to `1000` if not specified.
+- Larger values reduce the number of round trips to the storage
+  engine but increase memory usage per batch.
+- Smaller values may lower memory usage and allow earlier
+  streaming of initial results, at the cost of more query calls.
+
+Adjust this depending on your expected collection size and
+performance characteristics of the chosen RxDB storage adapter.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+The explicit type of items in the collection (highest priority). Use the document type of your RxCollection here.
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+The schema type for validation and type inference (second priority)
+
+## Remarks
+
+Type resolution follows a priority order:
+1. If you provide an explicit type via generic parameter, it will be used
+2. If no explicit type is provided but a schema is, the schema's output type will be inferred
+
+You should provide EITHER an explicit type OR a schema, but not both, as they would conflict.
+Notice that primary keys in RxDB must always be a string.
diff --git a/mintlify/db/reference/rxdb-db-collection/variables/OPEN_RXDB_SUBSCRIPTIONS.md b/mintlify/db/reference/rxdb-db-collection/variables/OPEN_RXDB_SUBSCRIPTIONS.md
new file mode 100644
index 000000000..12525d564
--- /dev/null
+++ b/mintlify/db/reference/rxdb-db-collection/variables/OPEN_RXDB_SUBSCRIPTIONS.md
@@ -0,0 +1,14 @@
+---
+id: OPEN_RXDB_SUBSCRIPTIONS
+title: OPEN_RXDB_SUBSCRIPTIONS
+---
+
+# Variable: OPEN\_RXDB\_SUBSCRIPTIONS
+
+```ts
+const OPEN_RXDB_SUBSCRIPTIONS: WeakMap<RxCollection, Set<Subscription>>;
+```
+
+Defined in: [rxdb.ts:31](https://github.com/TanStack/db/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L31)
+
+Used in tests to ensure proper cleanup
diff --git a/mintlify/db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError.md b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError.md
new file mode 100644
index 000000000..cbbed6188
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError.md
@@ -0,0 +1,220 @@
+---
+id: ExpectedDeleteTypeError
+title: ExpectedDeleteTypeError
+---
+
+# Class: ExpectedDeleteTypeError
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:32](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L32)
+
+## Extends
+
+- [`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ExpectedDeleteTypeError(actualType): ExpectedDeleteTypeError;
+```
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:33](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L33)
+
+#### Parameters
+
+##### actualType
+
+`string`
+
+#### Returns
+
+`ExpectedDeleteTypeError`
+
+#### Overrides
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`constructor`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`cause`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`message`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`name`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stack`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stackTraceLimit`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`captureStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`prepareStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError.md b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError.md
new file mode 100644
index 000000000..cb91936a0
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError.md
@@ -0,0 +1,220 @@
+---
+id: ExpectedInsertTypeError
+title: ExpectedInsertTypeError
+---
+
+# Class: ExpectedInsertTypeError
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:18](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L18)
+
+## Extends
+
+- [`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ExpectedInsertTypeError(actualType): ExpectedInsertTypeError;
+```
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:19](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L19)
+
+#### Parameters
+
+##### actualType
+
+`string`
+
+#### Returns
+
+`ExpectedInsertTypeError`
+
+#### Overrides
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`constructor`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`cause`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`message`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`name`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stack`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stackTraceLimit`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`captureStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`prepareStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError.md b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError.md
new file mode 100644
index 000000000..1c9d08615
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError.md
@@ -0,0 +1,220 @@
+---
+id: ExpectedUpdateTypeError
+title: ExpectedUpdateTypeError
+---
+
+# Class: ExpectedUpdateTypeError
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:25](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L25)
+
+## Extends
+
+- [`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new ExpectedUpdateTypeError(actualType): ExpectedUpdateTypeError;
+```
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:26](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L26)
+
+#### Parameters
+
+##### actualType
+
+`string`
+
+#### Returns
+
+`ExpectedUpdateTypeError`
+
+#### Overrides
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`constructor`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`cause`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`message`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`name`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stack`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stackTraceLimit`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`captureStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`prepareStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError.md b/mintlify/db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError.md
new file mode 100644
index 000000000..d20e361eb
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError.md
@@ -0,0 +1,220 @@
+---
+id: TimeoutWaitingForIdsError
+title: TimeoutWaitingForIdsError
+---
+
+# Class: TimeoutWaitingForIdsError
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:11](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L11)
+
+## Extends
+
+- [`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TimeoutWaitingForIdsError(ids): TimeoutWaitingForIdsError;
+```
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:12](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L12)
+
+#### Parameters
+
+##### ids
+
+`string`
+
+#### Returns
+
+`TimeoutWaitingForIdsError`
+
+#### Overrides
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`constructor`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#constructor)
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`cause`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#cause)
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`message`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#message)
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`name`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#name)
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stack`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stack)
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`stackTraceLimit`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#stacktracelimit)
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`captureStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#capturestacktrace)
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+[`TrailBaseDBCollectionError`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError).[`prepareStackTrace`](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError#preparestacktrace)
diff --git a/mintlify/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError.md b/mintlify/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError.md
new file mode 100644
index 000000000..b97e2e48b
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError.md
@@ -0,0 +1,243 @@
+---
+id: TrailBaseDBCollectionError
+title: TrailBaseDBCollectionError
+---
+
+# Class: TrailBaseDBCollectionError
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:4](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L4)
+
+## Extends
+
+- `TanStackDBError`
+
+## Extended by
+
+- [`TimeoutWaitingForIdsError`](/db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError)
+- [`ExpectedInsertTypeError`](/db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError)
+- [`ExpectedUpdateTypeError`](/db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError)
+- [`ExpectedDeleteTypeError`](/db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TrailBaseDBCollectionError(message): TrailBaseDBCollectionError;
+```
+
+Defined in: [packages/trailbase-db-collection/src/errors.ts:5](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/errors.ts#L5)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+`TrailBaseDBCollectionError`
+
+#### Overrides
+
+```ts
+TanStackDBError.constructor
+```
+
+## Properties
+
+### cause?
+
+```ts
+optional cause: unknown;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+```ts
+TanStackDBError.cause
+```
+
+***
+
+### message
+
+```ts
+message: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+```ts
+TanStackDBError.message
+```
+
+***
+
+### name
+
+```ts
+name: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+```ts
+TanStackDBError.name
+```
+
+***
+
+### stack?
+
+```ts
+optional stack: string;
+```
+
+Defined in: node\_modules/.pnpm/typescript@5.9.3/node\_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+```ts
+TanStackDBError.stack
+```
+
+***
+
+### stackTraceLimit
+
+```ts
+static stackTraceLimit: number;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:67
+
+The `Error.stackTraceLimit` property specifies the number of stack frames
+collected by a stack trace (whether generated by `new Error().stack` or
+`Error.captureStackTrace(obj)`).
+
+The default value is `10` but may be set to any valid JavaScript number. Changes
+will affect any stack trace captured _after_ the value has been changed.
+
+If set to a non-number value, or set to a negative number, stack traces will
+not capture any frames.
+
+#### Inherited from
+
+```ts
+TanStackDBError.stackTraceLimit
+```
+
+## Methods
+
+### captureStackTrace()
+
+```ts
+static captureStackTrace(targetObject, constructorOpt?): void;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:51
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+TanStackDBError.captureStackTrace
+```
+
+***
+
+### prepareStackTrace()
+
+```ts
+static prepareStackTrace(err, stackTraces): any;
+```
+
+Defined in: node\_modules/.pnpm/@types+node@25.2.2/node\_modules/@types/node/globals.d.ts:55
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`[]
+
+#### Returns
+
+`any`
+
+#### See
+
+https://v8.dev/docs/stack-trace-api#customizing-stack-traces
+
+#### Inherited from
+
+```ts
+TanStackDBError.prepareStackTrace
+```
diff --git a/mintlify/db/reference/trailbase-db-collection/functions/trailBaseCollectionOptions.md b/mintlify/db/reference/trailbase-db-collection/functions/trailBaseCollectionOptions.md
new file mode 100644
index 000000000..72ed5c1bd
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/functions/trailBaseCollectionOptions.md
@@ -0,0 +1,36 @@
+---
+id: trailBaseCollectionOptions
+title: trailBaseCollectionOptions
+---
+
+# Function: trailBaseCollectionOptions()
+
+```ts
+function trailBaseCollectionOptions<TItem, TRecord, TKey>(config): CollectionConfig<TItem, TKey, never, TrailBaseCollectionUtils> & object;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:121](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L121)
+
+## Type Parameters
+
+### TItem
+
+`TItem` *extends* `ShapeOf`\&lt;`TRecord`\>
+
+### TRecord
+
+`TRecord` *extends* `ShapeOf`\&lt;`TItem`\> = `TItem`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Parameters
+
+### config
+
+[`TrailBaseCollectionConfig`](/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig)\&lt;`TItem`, `TRecord`, `TKey`\>
+
+## Returns
+
+`CollectionConfig`\&lt;`TItem`, `TKey`, `never`, [`TrailBaseCollectionUtils`](/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils)\> & `object`
diff --git a/mintlify/db/reference/trailbase-db-collection/index.md b/mintlify/db/reference/trailbase-db-collection/index.md
new file mode 100644
index 000000000..b676cddba
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/index.md
@@ -0,0 +1,23 @@
+---
+id: "@tanstack/trailbase-db-collection"
+title: "@tanstack/trailbase-db-collection"
+---
+
+# @tanstack/trailbase-db-collection
+
+## Classes
+
+- [ExpectedDeleteTypeError](/db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError)
+- [ExpectedInsertTypeError](/db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError)
+- [ExpectedUpdateTypeError](/db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError)
+- [TimeoutWaitingForIdsError](/db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError)
+- [TrailBaseDBCollectionError](/db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError)
+
+## Interfaces
+
+- [TrailBaseCollectionConfig](/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig)
+- [TrailBaseCollectionUtils](/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils)
+
+## Functions
+
+- [trailBaseCollectionOptions](/db/reference/trailbase-db-collection/functions/trailBaseCollectionOptions)
diff --git a/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig.md b/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig.md
new file mode 100644
index 000000000..657ec62f3
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig.md
@@ -0,0 +1,76 @@
+---
+id: TrailBaseCollectionConfig
+title: TrailBaseCollectionConfig
+---
+
+# Interface: TrailBaseCollectionConfig\&lt;TItem, TRecord, TKey\>
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:92](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L92)
+
+Configuration interface for Trailbase Collection
+
+## Extends
+
+- `Omit`\&lt;`BaseCollectionConfig`\&lt;`TItem`, `TKey`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"` \| `"syncMode"`\>
+
+## Type Parameters
+
+### TItem
+
+`TItem` *extends* `ShapeOf`\&lt;`TRecord`\>
+
+### TRecord
+
+`TRecord` *extends* `ShapeOf`\&lt;`TItem`\> = `TItem`
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Properties
+
+### parse
+
+```ts
+parse: Conversions<TRecord, TItem>;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:111](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L111)
+
+***
+
+### recordApi
+
+```ts
+recordApi: RecordApi<TRecord>;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:103](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L103)
+
+Record API name
+
+***
+
+### serialize
+
+```ts
+serialize: Conversions<TItem, TRecord>;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:112](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L112)
+
+***
+
+### syncMode?
+
+```ts
+optional syncMode: SyncMode;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:109](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L109)
+
+The mode of sync to use for the collection.
+
+#### Default
+
+`eager`
diff --git a/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils.md b/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils.md
new file mode 100644
index 000000000..ef951da0d
--- /dev/null
+++ b/mintlify/db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils.md
@@ -0,0 +1,32 @@
+---
+id: TrailBaseCollectionUtils
+title: TrailBaseCollectionUtils
+---
+
+# Interface: TrailBaseCollectionUtils
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:117](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L117)
+
+## Extends
+
+- `UtilsRecord`
+
+## Indexable
+
+```ts
+[key: string]: any
+```
+
+## Properties
+
+### cancel()
+
+```ts
+cancel: () => void;
+```
+
+Defined in: [packages/trailbase-db-collection/src/trailbase.ts:118](https://github.com/TanStack/db/blob/main/packages/trailbase-db-collection/src/trailbase.ts#L118)
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/type-aliases/ApplyJoinOptionalityToMergedSchema.md b/mintlify/db/reference/type-aliases/ApplyJoinOptionalityToMergedSchema.md
new file mode 100644
index 000000000..4c320e62b
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ApplyJoinOptionalityToMergedSchema.md
@@ -0,0 +1,54 @@
+---
+id: ApplyJoinOptionalityToMergedSchema
+title: ApplyJoinOptionalityToMergedSchema
+---
+
+# Type Alias: ApplyJoinOptionalityToMergedSchema\&lt;TExistingSchema, TNewSchema, TJoinType, TFromSourceNames\>
+
+```ts
+type ApplyJoinOptionalityToMergedSchema<TExistingSchema, TNewSchema, TJoinType, TFromSourceNames> = { [K in keyof TExistingSchema]: K extends TFromSourceNames ? TJoinType extends "right" | "full" ? TExistingSchema[K] | undefined : TExistingSchema[K] : TExistingSchema[K] } & { [K in keyof TNewSchema]: TJoinType extends "left" | "full" ? TNewSchema[K] | undefined : TNewSchema[K] };
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:929](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L929)
+
+ApplyJoinOptionalityToMergedSchema - Applies optionality rules when merging schemas
+
+This type implements the SQL join optionality semantics:
+
+**For Existing Tables**:
+- `RIGHT JOIN` or `FULL JOIN`: Main table (from fromSourceName) becomes optional
+- Other join types: Existing tables keep their current optionality
+- Previously joined tables: Keep their already-applied optionality
+
+**For New Tables**:
+- `LEFT JOIN` or `FULL JOIN`: New table becomes optional
+- `INNER JOIN` or `RIGHT JOIN`: New table remains required
+
+**Examples**:
+```sql
+FROM users LEFT JOIN orders  -- orders becomes optional
+FROM users RIGHT JOIN orders -- users becomes optional
+FROM users FULL JOIN orders  -- both become optional
+FROM users INNER JOIN orders -- both remain required
+```
+
+The intersection (&) ensures both existing and new schemas are merged
+into a single type while preserving all table references.
+
+## Type Parameters
+
+### TExistingSchema
+
+`TExistingSchema` *extends* [`ContextSchema`](/db/reference/type-aliases/ContextSchema)
+
+### TNewSchema
+
+`TNewSchema` *extends* [`ContextSchema`](/db/reference/type-aliases/ContextSchema)
+
+### TJoinType
+
+`TJoinType` *extends* `"inner"` \| `"left"` \| `"right"` \| `"full"` \| `"outer"` \| `"cross"`
+
+### TFromSourceNames
+
+`TFromSourceNames` *extends* `string`
diff --git a/mintlify/db/reference/type-aliases/ChangeListener.md b/mintlify/db/reference/type-aliases/ChangeListener.md
new file mode 100644
index 000000000..8c9defb61
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ChangeListener.md
@@ -0,0 +1,68 @@
+---
+id: ChangeListener
+title: ChangeListener
+---
+
+# Type Alias: ChangeListener()\&lt;T, TKey\>
+
+```ts
+type ChangeListener<T, TKey> = (changes) => void;
+```
+
+Defined in: [packages/db/src/types.ts:919](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L919)
+
+Function type for listening to collection changes
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Parameters
+
+### changes
+
+[`ChangeMessage`](/db/reference/interfaces/ChangeMessage)\&lt;[`WithVirtualProps`](/db/reference/type-aliases/WithVirtualProps)\&lt;`T`, `TKey`\>, `TKey`\>[]
+
+Array of change messages describing what happened
+
+## Returns
+
+`void`
+
+## Examples
+
+```ts
+// Basic change listener
+const listener: ChangeListener = (changes) => {
+  changes.forEach(change => {
+    console.log(`${change.type}: ${change.key}`, change.value)
+  })
+}
+
+collection.subscribeChanges(listener)
+```
+
+```ts
+// Handle different change types
+const listener: ChangeListener<Todo> = (changes) => {
+  for (const change of changes) {
+    switch (change.type) {
+      case 'insert':
+        addToUI(change.value)
+        break
+      case 'update':
+        updateInUI(change.key, change.value, change.previousValue)
+        break
+      case 'delete':
+        removeFromUI(change.key)
+        break
+    }
+  }
+}
+```
diff --git a/mintlify/db/reference/type-aliases/ChangeMessageOrDeleteKeyMessage.md b/mintlify/db/reference/type-aliases/ChangeMessageOrDeleteKeyMessage.md
new file mode 100644
index 000000000..1e37afa11
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ChangeMessageOrDeleteKeyMessage.md
@@ -0,0 +1,24 @@
+---
+id: ChangeMessageOrDeleteKeyMessage
+title: ChangeMessageOrDeleteKeyMessage
+---
+
+# Type Alias: ChangeMessageOrDeleteKeyMessage\&lt;T, TKey\>
+
+```ts
+type ChangeMessageOrDeleteKeyMessage<T, TKey> = 
+  | Omit<ChangeMessage<T>, "key">
+| DeleteKeyMessage<TKey>;
+```
+
+Defined in: [packages/db/src/types.ts:397](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L397)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
diff --git a/mintlify/db/reference/type-aliases/ChangesPayload.md b/mintlify/db/reference/type-aliases/ChangesPayload.md
new file mode 100644
index 000000000..54d45f565
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ChangesPayload.md
@@ -0,0 +1,22 @@
+---
+id: ChangesPayload
+title: ChangesPayload
+---
+
+# Type Alias: ChangesPayload\&lt;T, TKey\>
+
+```ts
+type ChangesPayload<T, TKey> = ChangeMessage<WithVirtualProps<T, TKey>, TKey>[];
+```
+
+Defined in: [packages/db/src/types.ts:779](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L779)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
diff --git a/mintlify/db/reference/type-aliases/CleanupFn.md b/mintlify/db/reference/type-aliases/CleanupFn.md
new file mode 100644
index 000000000..83dc420aa
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/CleanupFn.md
@@ -0,0 +1,16 @@
+---
+id: CleanupFn
+title: CleanupFn
+---
+
+# Type Alias: CleanupFn()
+
+```ts
+type CleanupFn = () => void;
+```
+
+Defined in: [packages/db/src/types.ts:320](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L320)
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/type-aliases/ClearStorageFn.md b/mintlify/db/reference/type-aliases/ClearStorageFn.md
new file mode 100644
index 000000000..699e45321
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ClearStorageFn.md
@@ -0,0 +1,18 @@
+---
+id: ClearStorageFn
+title: ClearStorageFn
+---
+
+# Type Alias: ClearStorageFn()
+
+```ts
+type ClearStorageFn = () => void;
+```
+
+Defined in: [packages/db/src/local-storage.ts:91](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L91)
+
+Type for the clear utility function
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/type-aliases/CollectionConfigSingleRowOption.md b/mintlify/db/reference/type-aliases/CollectionConfigSingleRowOption.md
new file mode 100644
index 000000000..eec8cf25c
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/CollectionConfigSingleRowOption.md
@@ -0,0 +1,31 @@
+---
+id: CollectionConfigSingleRowOption
+title: CollectionConfigSingleRowOption
+---
+
+# Type Alias: CollectionConfigSingleRowOption\&lt;T, TKey, TSchema, TUtils\>
+
+```ts
+type CollectionConfigSingleRowOption<T, TKey, TSchema, TUtils> = CollectionConfig<T, TKey, TSchema, TUtils> & MaybeSingleResult;
+```
+
+Defined in: [packages/db/src/types.ts:772](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L772)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TSchema
+
+`TSchema` *extends* `StandardSchemaV1` = `never`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = \&#123;
+\&#125;
diff --git a/mintlify/db/reference/type-aliases/CollectionStatus.md b/mintlify/db/reference/type-aliases/CollectionStatus.md
new file mode 100644
index 000000000..913818194
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/CollectionStatus.md
@@ -0,0 +1,31 @@
+---
+id: CollectionStatus
+title: CollectionStatus
+---
+
+# Type Alias: CollectionStatus
+
+```ts
+type CollectionStatus = "idle" | "loading" | "ready" | "error" | "cleaned-up";
+```
+
+Defined in: [packages/db/src/types.ts:507](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L507)
+
+Collection status values for lifecycle management
+
+## Examples
+
+```ts
+// Check collection status
+if (collection.status === "loading") {
+  console.log("Collection is loading initial data")
+} else if (collection.status === "ready") {
+  console.log("Collection is ready for use")
+}
+```
+
+```ts
+// Status transitions
+// idle → loading → ready (when markReady() is called)
+// Any status can transition to → error or cleaned-up
+```
diff --git a/mintlify/db/reference/type-aliases/ContextFromSource.md b/mintlify/db/reference/type-aliases/ContextFromSource.md
new file mode 100644
index 000000000..8247e7e8c
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ContextFromSource.md
@@ -0,0 +1,58 @@
+---
+id: ContextFromSource
+title: ContextFromSource
+---
+
+# Type Alias: ContextFromSource\&lt;TSource\>
+
+```ts
+type ContextFromSource<TSource> = object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:137](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L137)
+
+## Type Parameters
+
+### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
+
+## Properties
+
+### baseSchema
+
+```ts
+baseSchema: SchemaFromSource<TSource>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:138](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L138)
+
+***
+
+### fromSourceName
+
+```ts
+fromSourceName: keyof TSource & string;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:140](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L140)
+
+***
+
+### hasJoins
+
+```ts
+hasJoins: false;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:141](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L141)
+
+***
+
+### schema
+
+```ts
+schema: SchemaFromSource<TSource>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:139](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L139)
diff --git a/mintlify/db/reference/type-aliases/ContextFromUnionBranches.md b/mintlify/db/reference/type-aliases/ContextFromUnionBranches.md
new file mode 100644
index 000000000..78894861c
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ContextFromUnionBranches.md
@@ -0,0 +1,88 @@
+---
+id: ContextFromUnionBranches
+title: ContextFromUnionBranches
+---
+
+# Type Alias: ContextFromUnionBranches\&lt;TBranches\>
+
+```ts
+type ContextFromUnionBranches<TBranches> = object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:169](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L169)
+
+## Type Parameters
+
+### TBranches
+
+`TBranches` *extends* readonly \[[`QueryBuilder`](/db/reference/type-aliases/QueryBuilder)\&lt;`any`\>, `...QueryBuilder<any>[]`\]
+
+## Properties
+
+### baseSchema
+
+```ts
+baseSchema: UnionBranchSchema<TBranches> & ContextSchema;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:172](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L172)
+
+***
+
+### fromSourceName
+
+```ts
+fromSourceName: keyof UnionBranchSchema<TBranches> & string;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:175](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L175)
+
+***
+
+### hasJoins
+
+```ts
+hasJoins: false;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:176](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L176)
+
+***
+
+### hasResult
+
+```ts
+hasResult: true;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:178](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L178)
+
+***
+
+### refsSchema
+
+```ts
+refsSchema: UnionBranchSchema<TBranches>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:174](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L174)
+
+***
+
+### result
+
+```ts
+result: PrettifyIfPlainObject<UnionBranchResult<TBranches>>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:177](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L177)
+
+***
+
+### schema
+
+```ts
+schema: UnionBranchSchema<TBranches> & ContextSchema;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:173](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L173)
diff --git a/mintlify/db/reference/type-aliases/ContextFromUnionSource.md b/mintlify/db/reference/type-aliases/ContextFromUnionSource.md
new file mode 100644
index 000000000..085d41d85
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ContextFromUnionSource.md
@@ -0,0 +1,18 @@
+---
+id: ContextFromUnionSource
+title: ContextFromUnionSource
+---
+
+# Type Alias: ContextFromUnionSource\&lt;TSource\>
+
+```ts
+type ContextFromUnionSource<TSource> = IsUnion<keyof TSource & string> extends true ? object : ContextFromSource<TSource>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:144](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L144)
+
+## Type Parameters
+
+### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
diff --git a/mintlify/db/reference/type-aliases/ContextSchema.md b/mintlify/db/reference/type-aliases/ContextSchema.md
new file mode 100644
index 000000000..ef7c6ed1f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ContextSchema.md
@@ -0,0 +1,20 @@
+---
+id: ContextSchema
+title: ContextSchema
+---
+
+# Type Alias: ContextSchema
+
+```ts
+type ContextSchema = Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:80](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L80)
+
+ContextSchema - The shape of available tables/collections in a query context
+
+This is simply a record mapping table aliases to their TypeScript types.
+It evolves as the query progresses:
+- Initial: Just the `from()` table
+- After joins: Includes all joined tables with proper optionality
+- In subqueries: May be a subset of the outer query's schema
diff --git a/mintlify/db/reference/type-aliases/CursorExpressions.md b/mintlify/db/reference/type-aliases/CursorExpressions.md
new file mode 100644
index 000000000..2f84898f3
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/CursorExpressions.md
@@ -0,0 +1,60 @@
+---
+id: CursorExpressions
+title: CursorExpressions
+---
+
+# Type Alias: CursorExpressions
+
+```ts
+type CursorExpressions = object;
+```
+
+Defined in: [packages/db/src/types.ts:266](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L266)
+
+Cursor expressions for pagination, passed separately from the main `where` clause.
+The sync layer can choose to use cursor-based pagination (combining these with the where)
+or offset-based pagination (ignoring these and using the `offset` parameter).
+
+Neither expression includes the main `where` clause - they are cursor-specific only.
+
+## Properties
+
+### lastKey?
+
+```ts
+optional lastKey: string | number;
+```
+
+Defined in: [packages/db/src/types.ts:284](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L284)
+
+The key of the last item that was loaded.
+Can be used by sync layers for tracking or deduplication.
+
+***
+
+### whereCurrent
+
+```ts
+whereCurrent: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:279](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L279)
+
+Expression for rows equal to the current cursor value (first orderBy column only).
+Used to handle tie-breaking/duplicates at the boundary.
+Example: eq(col1, v1) or for Dates: and(gte(col1, v1), lt(col1, v1+1ms))
+
+***
+
+### whereFrom
+
+```ts
+whereFrom: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:273](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L273)
+
+Expression for rows greater than (after) the cursor value.
+For multi-column orderBy, this is a composite cursor using OR of conditions.
+Example for [col1 ASC, col2 DESC] with values [v1, v2]:
+  or(gt(col1, v1), and(eq(col1, v1), lt(col2, v2)))
diff --git a/mintlify/db/reference/type-aliases/DeleteKeyMessage.md b/mintlify/db/reference/type-aliases/DeleteKeyMessage.md
new file mode 100644
index 000000000..29009cf7e
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/DeleteKeyMessage.md
@@ -0,0 +1,26 @@
+---
+id: DeleteKeyMessage
+title: DeleteKeyMessage
+---
+
+# Type Alias: DeleteKeyMessage\&lt;TKey\>
+
+```ts
+type DeleteKeyMessage<TKey> = Omit<ChangeMessage<any, TKey>, "value" | "previousValue" | "type"> & object;
+```
+
+Defined in: [packages/db/src/types.ts:392](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L392)
+
+## Type Declaration
+
+### type
+
+```ts
+type: "delete";
+```
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
diff --git a/mintlify/db/reference/type-aliases/DeleteMutationFn.md b/mintlify/db/reference/type-aliases/DeleteMutationFn.md
new file mode 100644
index 000000000..24c4e48fd
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/DeleteMutationFn.md
@@ -0,0 +1,40 @@
+---
+id: DeleteMutationFn
+title: DeleteMutationFn
+---
+
+# Type Alias: DeleteMutationFn()\&lt;T, TKey, TUtils, TReturn\>
+
+```ts
+type DeleteMutationFn<T, TKey, TUtils, TReturn> = (params) => Promise<TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:485](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L485)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+### TReturn
+
+`TReturn` = `any`
+
+## Parameters
+
+### params
+
+[`DeleteMutationFnParams`](/db/reference/type-aliases/DeleteMutationFnParams)\&lt;`T`, `TKey`, `TUtils`\>
+
+## Returns
+
+`Promise`\&lt;`TReturn`\>
diff --git a/mintlify/db/reference/type-aliases/DeleteMutationFnParams.md b/mintlify/db/reference/type-aliases/DeleteMutationFnParams.md
new file mode 100644
index 000000000..227bd38e8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/DeleteMutationFnParams.md
@@ -0,0 +1,46 @@
+---
+id: DeleteMutationFnParams
+title: DeleteMutationFnParams
+---
+
+# Type Alias: DeleteMutationFnParams\&lt;T, TKey, TUtils\>
+
+```ts
+type DeleteMutationFnParams<T, TKey, TUtils> = object;
+```
+
+Defined in: [packages/db/src/types.ts:462](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L462)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Properties
+
+### collection
+
+```ts
+collection: Collection<T, TKey, TUtils>;
+```
+
+Defined in: [packages/db/src/types.ts:468](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L468)
+
+***
+
+### transaction
+
+```ts
+transaction: TransactionWithMutations<T, "delete">;
+```
+
+Defined in: [packages/db/src/types.ts:467](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L467)
diff --git a/mintlify/db/reference/type-aliases/DeltaEvent.md b/mintlify/db/reference/type-aliases/DeltaEvent.md
new file mode 100644
index 000000000..64fb1ed46
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/DeltaEvent.md
@@ -0,0 +1,159 @@
+---
+id: DeltaEvent
+title: DeltaEvent
+---
+
+# Type Alias: DeltaEvent\&lt;TRow, TKey\>
+
+```ts
+type DeltaEvent<TRow, TKey> = 
+  | {
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  type: "enter";
+  value: TRow;
+}
+  | {
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  type: "exit";
+  value: TRow;
+}
+  | {
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  previousValue: TRow;
+  type: "update";
+  value: TRow;
+};
+```
+
+Defined in: [packages/db/src/query/effect.ts:38](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L38)
+
+Delta event emitted when a row enters, exits, or updates within a query result
+
+## Type Parameters
+
+### TRow
+
+`TRow` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Type Declaration
+
+```ts
+{
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  type: "enter";
+  value: TRow;
+}
+```
+
+### key
+
+```ts
+key: TKey;
+```
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+### type
+
+```ts
+type: "enter";
+```
+
+### value
+
+```ts
+value: TRow;
+```
+
+Current value for the entering row
+
+```ts
+{
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  type: "exit";
+  value: TRow;
+}
+```
+
+### key
+
+```ts
+key: TKey;
+```
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+### type
+
+```ts
+type: "exit";
+```
+
+### value
+
+```ts
+value: TRow;
+```
+
+Current value for the exiting row
+
+```ts
+{
+  key: TKey;
+  metadata?: Record<string, unknown>;
+  previousValue: TRow;
+  type: "update";
+  value: TRow;
+}
+```
+
+### key
+
+```ts
+key: TKey;
+```
+
+### metadata?
+
+```ts
+optional metadata: Record<string, unknown>;
+```
+
+### previousValue
+
+```ts
+previousValue: TRow;
+```
+
+Previous value before the batch
+
+### type
+
+```ts
+type: "update";
+```
+
+### value
+
+```ts
+value: TRow;
+```
+
+Current value after the update
diff --git a/mintlify/db/reference/type-aliases/DeltaType.md b/mintlify/db/reference/type-aliases/DeltaType.md
new file mode 100644
index 000000000..7d0aeedff
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/DeltaType.md
@@ -0,0 +1,14 @@
+---
+id: DeltaType
+title: DeltaType
+---
+
+# Type Alias: DeltaType
+
+```ts
+type DeltaType = "enter" | "exit" | "update";
+```
+
+Defined in: [packages/db/src/query/effect.ts:35](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L35)
+
+Event types for query result deltas
diff --git a/mintlify/db/reference/type-aliases/EffectQueryInput.md b/mintlify/db/reference/type-aliases/EffectQueryInput.md
new file mode 100644
index 000000000..b295bc682
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/EffectQueryInput.md
@@ -0,0 +1,22 @@
+---
+id: EffectQueryInput
+title: EffectQueryInput
+---
+
+# Type Alias: EffectQueryInput\&lt;TContext\>
+
+```ts
+type EffectQueryInput<TContext> = 
+  | (q) => QueryBuilder<TContext>
+| QueryBuilder<TContext>;
+```
+
+Defined in: [packages/db/src/query/effect.ts:75](https://github.com/TanStack/db/blob/main/packages/db/src/query/effect.ts#L75)
+
+Query input - can be a builder function or a prebuilt query
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/ExtractContext.md b/mintlify/db/reference/type-aliases/ExtractContext.md
new file mode 100644
index 000000000..e01e9ab22
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ExtractContext.md
@@ -0,0 +1,18 @@
+---
+id: ExtractContext
+title: ExtractContext
+---
+
+# Type Alias: ExtractContext\&lt;T\>
+
+```ts
+type ExtractContext<T> = T extends BaseQueryBuilder<infer TContext> ? TContext : T extends QueryBuilder<infer TContext> ? TContext : never;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:1411](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L1411)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/FieldPath.md b/mintlify/db/reference/type-aliases/FieldPath.md
new file mode 100644
index 000000000..0dfa258e0
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/FieldPath.md
@@ -0,0 +1,15 @@
+---
+id: FieldPath
+title: FieldPath
+---
+
+# Type Alias: FieldPath
+
+```ts
+type FieldPath = (string | number)[];
+```
+
+Defined in: [packages/db/src/query/expression-helpers.ts:39](https://github.com/TanStack/db/blob/main/packages/db/src/query/expression-helpers.ts#L39)
+
+Represents a simple field path extracted from an expression.
+Can include string keys for object properties and numbers for array indices.
diff --git a/mintlify/db/reference/type-aliases/Fn.md b/mintlify/db/reference/type-aliases/Fn.md
new file mode 100644
index 000000000..9e1b0a449
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Fn.md
@@ -0,0 +1,24 @@
+---
+id: Fn
+title: Fn
+---
+
+# Type Alias: Fn()
+
+```ts
+type Fn = (...args) => any;
+```
+
+Defined in: [packages/db/src/types.ts:69](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L69)
+
+Represents a utility function that can be attached to a collection
+
+## Parameters
+
+### args
+
+...`any`[]
+
+## Returns
+
+`any`
diff --git a/mintlify/db/reference/type-aliases/FunctionalHavingRow.md b/mintlify/db/reference/type-aliases/FunctionalHavingRow.md
new file mode 100644
index 000000000..4ef0afc68
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/FunctionalHavingRow.md
@@ -0,0 +1,34 @@
+---
+id: FunctionalHavingRow
+title: FunctionalHavingRow
+---
+
+# Type Alias: FunctionalHavingRow\&lt;TContext\>
+
+```ts
+type FunctionalHavingRow<TContext> = TContext["schema"] & TContext["hasResult"] extends true ? object : object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:589](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L589)
+
+FunctionalHavingRow - Type for the row parameter in functional having callbacks
+
+Functional having callbacks receive a namespaced row that includes:
+- Table data from the schema (when available)
+- $selected: The SELECT result fields (when select() has been called)
+
+After `select()` is called, this type includes `$selected` which provides access
+to the SELECT result fields via `$selected.fieldName` syntax.
+
+Note: When used with GROUP BY, functional having receives `{ $selected: ... }` with the
+aggregated SELECT results. When used without GROUP BY, it receives the full namespaced row
+which includes both table data and `$selected`.
+
+Example: `({ $selected }) => $selected.sessionCount > 2`
+Example (no GROUP BY): `(row) => row.user.salary > 70000 && row.$selected.user_count > 2`
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/GetResult.md b/mintlify/db/reference/type-aliases/GetResult.md
new file mode 100644
index 000000000..ca9d2fc63
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/GetResult.md
@@ -0,0 +1,18 @@
+---
+id: GetResult
+title: GetResult
+---
+
+# Type Alias: GetResult\&lt;TContext\>
+
+```ts
+type GetResult<TContext> = Prettify<ResultValue<TContext>>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:1043](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L1043)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/GetStorageSizeFn.md b/mintlify/db/reference/type-aliases/GetStorageSizeFn.md
new file mode 100644
index 000000000..b57ac423b
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/GetStorageSizeFn.md
@@ -0,0 +1,18 @@
+---
+id: GetStorageSizeFn
+title: GetStorageSizeFn
+---
+
+# Type Alias: GetStorageSizeFn()
+
+```ts
+type GetStorageSizeFn = () => number;
+```
+
+Defined in: [packages/db/src/local-storage.ts:96](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L96)
+
+Type for the getStorageSize utility function
+
+## Returns
+
+`number`
diff --git a/mintlify/db/reference/type-aliases/GroupByCallback.md b/mintlify/db/reference/type-aliases/GroupByCallback.md
new file mode 100644
index 000000000..1897d3020
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/GroupByCallback.md
@@ -0,0 +1,35 @@
+---
+id: GroupByCallback
+title: GroupByCallback
+---
+
+# Type Alias: GroupByCallback()\&lt;TContext\>
+
+```ts
+type GroupByCallback<TContext> = (refs) => any;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:552](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L552)
+
+GroupByCallback - Type for groupBy clause callback functions
+
+These callbacks receive refs for all available tables and should return
+expressions that will be used for grouping query results.
+
+Example: `(refs) => refs.orders.status`
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### refs
+
+[`RefsForContext`](/db/reference/type-aliases/RefsForContext)\&lt;`TContext`\>
+
+## Returns
+
+`any`
diff --git a/mintlify/db/reference/type-aliases/IndexConstructor.md b/mintlify/db/reference/type-aliases/IndexConstructor.md
new file mode 100644
index 000000000..4a3a542da
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/IndexConstructor.md
@@ -0,0 +1,42 @@
+---
+id: IndexConstructor
+title: IndexConstructor
+---
+
+# Type Alias: IndexConstructor()\&lt;TKey\>
+
+```ts
+type IndexConstructor<TKey> = (id, expression, name?, options?) => BaseIndex<TKey>;
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:231](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L231)
+
+Type for index constructor
+
+## Type Parameters
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+## Parameters
+
+### id
+
+`number`
+
+### expression
+
+[`BasicExpression`](/db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression)
+
+### name?
+
+`string`
+
+### options?
+
+`any`
+
+## Returns
+
+[`BaseIndex`](/db/reference/classes/BaseIndex)\&lt;`TKey`\>
diff --git a/mintlify/db/reference/type-aliases/IndexOperation-1.md b/mintlify/db/reference/type-aliases/IndexOperation-1.md
new file mode 100644
index 000000000..3dbce14d1
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/IndexOperation-1.md
@@ -0,0 +1,14 @@
+---
+id: IndexOperation
+title: IndexOperation
+---
+
+# Type Alias: IndexOperation
+
+```ts
+type IndexOperation = typeof comparisonFunctions[number];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L11)
+
+Type for index operation values
diff --git a/mintlify/db/reference/type-aliases/IndexOperation.md b/mintlify/db/reference/type-aliases/IndexOperation.md
new file mode 100644
index 000000000..23f84e1c0
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/IndexOperation.md
@@ -0,0 +1,14 @@
+---
+id: IndexOperation
+title: IndexOperation
+---
+
+# Type Alias: IndexOperation
+
+```ts
+type IndexOperation = readonly ["eq", "gt", "gte", "lt", "lte", "in", "like", "ilike"];
+```
+
+Defined in: [packages/db/src/indexes/base-index.ts:11](https://github.com/TanStack/db/blob/main/packages/db/src/indexes/base-index.ts#L11)
+
+Operations that indexes can support, imported from available comparison functions
diff --git a/mintlify/db/reference/type-aliases/InferCollectionType.md b/mintlify/db/reference/type-aliases/InferCollectionType.md
new file mode 100644
index 000000000..275fee918
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InferCollectionType.md
@@ -0,0 +1,23 @@
+---
+id: InferCollectionType
+title: InferCollectionType
+---
+
+# Type Alias: InferCollectionType\&lt;T\>
+
+```ts
+type InferCollectionType<T> = T extends CollectionImpl<infer TOutput, infer TKey, any, any, any> ? WithVirtualProps<TOutput, TKey> : never;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:101](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L101)
+
+InferCollectionType - Extracts the TypeScript type from a CollectionImpl
+
+This helper ensures we get the same type that was used when creating the collection itself.
+This can be an explicit type passed by the user or the schema output type.
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/InferResultType.md b/mintlify/db/reference/type-aliases/InferResultType.md
new file mode 100644
index 000000000..d16304a6d
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InferResultType.md
@@ -0,0 +1,20 @@
+---
+id: InferResultType
+title: InferResultType
+---
+
+# Type Alias: InferResultType\&lt;TContext\>
+
+```ts
+type InferResultType<TContext> = TContext extends SingleResult ? GetResult<TContext> | undefined : GetResult<TContext>[];
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:955](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L955)
+
+Utility type to infer the query result size (single row or an array)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/InferSchemaInput.md b/mintlify/db/reference/type-aliases/InferSchemaInput.md
new file mode 100644
index 000000000..c83c98039
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InferSchemaInput.md
@@ -0,0 +1,24 @@
+---
+id: InferSchemaInput
+title: InferSchemaInput
+---
+
+# Type Alias: InferSchemaInput\&lt;T\>
+
+```ts
+type InferSchemaInput<T> = T extends StandardSchemaV1 ? StandardSchemaV1.InferInput<T> extends object ? StandardSchemaV1.InferInput<T> : Record<string, unknown> : Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:58](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L58)
+
+**`Internal`**
+
+Helper type to extract the input type from a standard schema
+
+ This is used for collection insert type inference
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/InferSchemaOutput.md b/mintlify/db/reference/type-aliases/InferSchemaOutput.md
new file mode 100644
index 000000000..935dc61ce
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InferSchemaOutput.md
@@ -0,0 +1,24 @@
+---
+id: InferSchemaOutput
+title: InferSchemaOutput
+---
+
+# Type Alias: InferSchemaOutput\&lt;T\>
+
+```ts
+type InferSchemaOutput<T> = T extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<T> extends object ? StandardSchemaV1.InferOutput<T> : Record<string, unknown> : Record<string, unknown>;
+```
+
+Defined in: [packages/db/src/types.ts:47](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L47)
+
+**`Internal`**
+
+Helper type to extract the output type from a standard schema
+
+ This is used by the type resolution system
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/InitialQueryBuilder.md b/mintlify/db/reference/type-aliases/InitialQueryBuilder.md
new file mode 100644
index 000000000..a4de91583
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InitialQueryBuilder.md
@@ -0,0 +1,12 @@
+---
+id: InitialQueryBuilder
+title: InitialQueryBuilder
+---
+
+# Type Alias: InitialQueryBuilder
+
+```ts
+type InitialQueryBuilder = Pick<BaseQueryBuilder<Context>, "from" | "unionAll">;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:1394](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L1394)
diff --git a/mintlify/db/reference/type-aliases/InputRow.md b/mintlify/db/reference/type-aliases/InputRow.md
new file mode 100644
index 000000000..62bab028f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InputRow.md
@@ -0,0 +1,14 @@
+---
+id: InputRow
+title: InputRow
+---
+
+# Type Alias: InputRow
+
+```ts
+type InputRow = [unknown, Record<string, unknown>];
+```
+
+Defined in: [packages/db/src/types.ts:787](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L787)
+
+An input row from a collection
diff --git a/mintlify/db/reference/type-aliases/InsertMutationFn.md b/mintlify/db/reference/type-aliases/InsertMutationFn.md
new file mode 100644
index 000000000..4ed40846f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InsertMutationFn.md
@@ -0,0 +1,40 @@
+---
+id: InsertMutationFn
+title: InsertMutationFn
+---
+
+# Type Alias: InsertMutationFn()\&lt;T, TKey, TUtils, TReturn\>
+
+```ts
+type InsertMutationFn<T, TKey, TUtils, TReturn> = (params) => Promise<TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:471](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L471)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+### TReturn
+
+`TReturn` = `any`
+
+## Parameters
+
+### params
+
+[`InsertMutationFnParams`](/db/reference/type-aliases/InsertMutationFnParams)\&lt;`T`, `TKey`, `TUtils`\>
+
+## Returns
+
+`Promise`\&lt;`TReturn`\>
diff --git a/mintlify/db/reference/type-aliases/InsertMutationFnParams.md b/mintlify/db/reference/type-aliases/InsertMutationFnParams.md
new file mode 100644
index 000000000..da3b6e29f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/InsertMutationFnParams.md
@@ -0,0 +1,46 @@
+---
+id: InsertMutationFnParams
+title: InsertMutationFnParams
+---
+
+# Type Alias: InsertMutationFnParams\&lt;T, TKey, TUtils\>
+
+```ts
+type InsertMutationFnParams<T, TKey, TUtils> = object;
+```
+
+Defined in: [packages/db/src/types.ts:454](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L454)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Properties
+
+### collection
+
+```ts
+collection: Collection<T, TKey, TUtils>;
+```
+
+Defined in: [packages/db/src/types.ts:460](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L460)
+
+***
+
+### transaction
+
+```ts
+transaction: TransactionWithMutations<T, "insert">;
+```
+
+Defined in: [packages/db/src/types.ts:459](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L459)
diff --git a/mintlify/db/reference/type-aliases/JoinOnCallback.md b/mintlify/db/reference/type-aliases/JoinOnCallback.md
new file mode 100644
index 000000000..faefe50fb
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/JoinOnCallback.md
@@ -0,0 +1,39 @@
+---
+id: JoinOnCallback
+title: JoinOnCallback
+---
+
+# Type Alias: JoinOnCallback()\&lt;TContext\>
+
+```ts
+type JoinOnCallback<TContext> = (refs) => any;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:568](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L568)
+
+JoinOnCallback - Type for join condition callback functions
+
+These callbacks receive refs for all available tables (including the newly
+joined table) and should return a boolean expression defining the join condition.
+
+Important: The newly joined table is NOT marked as optional in this callback,
+even for left/right/full joins, because optionality is applied AFTER the join
+condition is evaluated.
+
+Example: `(refs) => eq(refs.users.id, refs.orders.userId)`
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### refs
+
+[`RefsForContext`](/db/reference/type-aliases/RefsForContext)\&lt;`TContext`\>
+
+## Returns
+
+`any`
diff --git a/mintlify/db/reference/type-aliases/KeyedNamespacedRow.md b/mintlify/db/reference/type-aliases/KeyedNamespacedRow.md
new file mode 100644
index 000000000..d5f1694b3
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/KeyedNamespacedRow.md
@@ -0,0 +1,15 @@
+---
+id: KeyedNamespacedRow
+title: KeyedNamespacedRow
+---
+
+# Type Alias: KeyedNamespacedRow
+
+```ts
+type KeyedNamespacedRow = [unknown, NamespacedRow];
+```
+
+Defined in: [packages/db/src/types.ts:810](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L810)
+
+A keyed namespaced row is a row with a key and a namespaced row
+This is the main representation of a row in a query pipeline
diff --git a/mintlify/db/reference/type-aliases/KeyedStream.md b/mintlify/db/reference/type-aliases/KeyedStream.md
new file mode 100644
index 000000000..20d1aac87
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/KeyedStream.md
@@ -0,0 +1,15 @@
+---
+id: KeyedStream
+title: KeyedStream
+---
+
+# Type Alias: KeyedStream
+
+```ts
+type KeyedStream = IStreamBuilder<InputRow>;
+```
+
+Defined in: [packages/db/src/types.ts:793](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L793)
+
+A keyed stream is a stream of rows
+This is used as the inputs from a collection to a query
diff --git a/mintlify/db/reference/type-aliases/LiveQueryCollectionUtils.md b/mintlify/db/reference/type-aliases/LiveQueryCollectionUtils.md
new file mode 100644
index 000000000..85d7fcb28
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/LiveQueryCollectionUtils.md
@@ -0,0 +1,74 @@
+---
+id: LiveQueryCollectionUtils
+title: LiveQueryCollectionUtils
+---
+
+# Type Alias: LiveQueryCollectionUtils
+
+```ts
+type LiveQueryCollectionUtils = UtilsRecord & object;
+```
+
+Defined in: [packages/db/src/query/live/collection-config-builder.ts:58](https://github.com/TanStack/db/blob/main/packages/db/src/query/live/collection-config-builder.ts#L58)
+
+## Type Declaration
+
+### \[LIVE\_QUERY\_INTERNAL\]
+
+```ts
+[LIVE_QUERY_INTERNAL]: LiveQueryInternalUtils;
+```
+
+### getRunCount()
+
+```ts
+getRunCount: () => number;
+```
+
+#### Returns
+
+`number`
+
+### getWindow()
+
+```ts
+getWindow: () => 
+  | {
+  limit: number;
+  offset: number;
+}
+  | undefined;
+```
+
+Gets the current window (offset and limit) for an ordered query.
+
+#### Returns
+
+  \| \&#123;
+  `limit`: `number`;
+  `offset`: `number`;
+\&#125;
+  \| `undefined`
+
+The current window settings, or `undefined` if the query is not windowed
+
+### setWindow()
+
+```ts
+setWindow: (options) => true | Promise<void>;
+```
+
+Sets the offset and limit of an ordered query.
+Is a no-op if the query is not ordered.
+
+#### Parameters
+
+##### options
+
+`WindowOptions`
+
+#### Returns
+
+`true` \| `Promise`\&lt;`void`\>
+
+`true` if no subset loading was triggered, or `Promise<void>` that resolves when the subset has been loaded
diff --git a/mintlify/db/reference/type-aliases/LoadSubsetFn.md b/mintlify/db/reference/type-aliases/LoadSubsetFn.md
new file mode 100644
index 000000000..6c8562d73
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/LoadSubsetFn.md
@@ -0,0 +1,22 @@
+---
+id: LoadSubsetFn
+title: LoadSubsetFn
+---
+
+# Type Alias: LoadSubsetFn()
+
+```ts
+type LoadSubsetFn = (options) => true | Promise<void>;
+```
+
+Defined in: [packages/db/src/types.ts:316](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L316)
+
+## Parameters
+
+### options
+
+[`LoadSubsetOptions`](/db/reference/type-aliases/LoadSubsetOptions)
+
+## Returns
+
+`true` \| `Promise`\&lt;`void`\>
diff --git a/mintlify/db/reference/type-aliases/LoadSubsetOptions.md b/mintlify/db/reference/type-aliases/LoadSubsetOptions.md
new file mode 100644
index 000000000..f1b155add
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/LoadSubsetOptions.md
@@ -0,0 +1,95 @@
+---
+id: LoadSubsetOptions
+title: LoadSubsetOptions
+---
+
+# Type Alias: LoadSubsetOptions
+
+```ts
+type LoadSubsetOptions = object;
+```
+
+Defined in: [packages/db/src/types.ts:287](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L287)
+
+## Properties
+
+### cursor?
+
+```ts
+optional cursor: CursorExpressions;
+```
+
+Defined in: [packages/db/src/types.ts:299](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L299)
+
+Cursor expressions for cursor-based pagination.
+These are separate from `where` - the sync layer should combine them if using cursor-based pagination.
+Neither expression includes the main `where` clause.
+
+***
+
+### limit?
+
+```ts
+optional limit: number;
+```
+
+Defined in: [packages/db/src/types.ts:293](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L293)
+
+The limit of the data to load
+
+***
+
+### offset?
+
+```ts
+optional offset: number;
+```
+
+Defined in: [packages/db/src/types.ts:304](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L304)
+
+Row offset for offset-based pagination.
+The sync layer can use this instead of `cursor` if it prefers offset-based pagination.
+
+***
+
+### orderBy?
+
+```ts
+optional orderBy: OrderBy;
+```
+
+Defined in: [packages/db/src/types.ts:291](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L291)
+
+The order by clause to sort the data
+
+***
+
+### subscription?
+
+```ts
+optional subscription: Subscription;
+```
+
+Defined in: [packages/db/src/types.ts:313](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L313)
+
+The subscription that triggered the load.
+Advanced sync implementations can use this for:
+- LRU caching keyed by subscription
+- Reference counting to track active subscriptions
+- Subscribing to subscription events (e.g., finalization/unsubscribe)
+
+#### Optional
+
+Available when called from CollectionSubscription, may be undefined for direct calls
+
+***
+
+### where?
+
+```ts
+optional where: BasicExpression<boolean>;
+```
+
+Defined in: [packages/db/src/types.ts:289](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L289)
+
+The where expression to filter the data (does NOT include cursor expressions)
diff --git a/mintlify/db/reference/type-aliases/MakeOptional.md b/mintlify/db/reference/type-aliases/MakeOptional.md
new file mode 100644
index 000000000..54b05dc6b
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MakeOptional.md
@@ -0,0 +1,22 @@
+---
+id: MakeOptional
+title: MakeOptional
+---
+
+# Type Alias: MakeOptional\&lt;T, K\>
+
+```ts
+type MakeOptional<T, K> = Omit<T, K> & Partial<Pick<T, K>>;
+```
+
+Defined in: [packages/db/src/types.ts:998](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L998)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### K
+
+`K` *extends* keyof `T`
diff --git a/mintlify/db/reference/type-aliases/MaybeSingleResult.md b/mintlify/db/reference/type-aliases/MaybeSingleResult.md
new file mode 100644
index 000000000..238da7bd4
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MaybeSingleResult.md
@@ -0,0 +1,24 @@
+---
+id: MaybeSingleResult
+title: MaybeSingleResult
+---
+
+# Type Alias: MaybeSingleResult
+
+```ts
+type MaybeSingleResult = object;
+```
+
+Defined in: [packages/db/src/types.ts:764](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L764)
+
+## Properties
+
+### singleResult?
+
+```ts
+optional singleResult: true;
+```
+
+Defined in: [packages/db/src/types.ts:768](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L768)
+
+If enabled the collection will return a single object instead of an array
diff --git a/mintlify/db/reference/type-aliases/MergeContextForJoinCallback.md b/mintlify/db/reference/type-aliases/MergeContextForJoinCallback.md
new file mode 100644
index 000000000..75733347d
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MergeContextForJoinCallback.md
@@ -0,0 +1,92 @@
+---
+id: MergeContextForJoinCallback
+title: MergeContextForJoinCallback
+---
+
+# Type Alias: MergeContextForJoinCallback\&lt;TContext, TNewSchema\>
+
+```ts
+type MergeContextForJoinCallback<TContext, TNewSchema> = object & PreserveHasResultFlag<TContext["hasResult"]> & PreserveUnionFromFlag<TContext["hasUnionFrom"]> & PreserveFromSourceNames<TContext["fromSourceNames"]>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:1200](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L1200)
+
+MergeContextForJoinCallback - Special context for join condition callbacks
+
+This type creates a context specifically for the `onCallback` parameter of join operations.
+The key difference from `MergeContextWithJoinType` is that NO optionality is applied here.
+
+**Why No Optionality?**
+In SQL, join conditions are evaluated BEFORE optionality is determined. Both tables
+must be treated as available (non-optional) within the join condition itself.
+Optionality is only applied to the result AFTER the join logic executes.
+
+**Example**:
+```typescript
+.from({ users })
+.leftJoin({ orders }, ({ users, orders }) => {
+  // users is NOT optional here - we can access users.id directly
+  // orders is NOT optional here - we can access orders.userId directly
+  return eq(users.id, orders.userId)
+})
+.where(({ orders }) => {
+  // NOW orders is optional because it's after the LEFT JOIN
+  return orders?.status === 'pending'
+})
+```
+
+The simple intersection (&) merges schemas without any optionality transformation.
+
+## Type Declaration
+
+### baseSchema
+
+```ts
+baseSchema: TContext["baseSchema"];
+```
+
+### fromSourceName
+
+```ts
+fromSourceName: TContext["fromSourceName"];
+```
+
+### hasJoins
+
+```ts
+hasJoins: true;
+```
+
+### joinTypes
+
+```ts
+joinTypes: TContext["joinTypes"] extends Record<string, any> ? TContext["joinTypes"] : object;
+```
+
+### refsSchema
+
+```ts
+refsSchema: RefsSchemaForContext<TContext> & TNewSchema;
+```
+
+### result
+
+```ts
+result: TContext["result"];
+```
+
+### schema
+
+```ts
+schema: TContext["schema"] & TNewSchema;
+```
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+### TNewSchema
+
+`TNewSchema` *extends* [`ContextSchema`](/db/reference/type-aliases/ContextSchema)
diff --git a/mintlify/db/reference/type-aliases/MergeContextWithJoinType.md b/mintlify/db/reference/type-aliases/MergeContextWithJoinType.md
new file mode 100644
index 000000000..bb5bfc4e3
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MergeContextWithJoinType.md
@@ -0,0 +1,92 @@
+---
+id: MergeContextWithJoinType
+title: MergeContextWithJoinType
+---
+
+# Type Alias: MergeContextWithJoinType\&lt;TContext, TNewSchema, TJoinType\>
+
+```ts
+type MergeContextWithJoinType<TContext, TNewSchema, TJoinType> = object & PreserveSingleResultFlag<TContext["singleResult"]> & PreserveHasResultFlag<TContext["hasResult"]> & PreserveUnionFromFlag<TContext["hasUnionFrom"]> & PreserveFromSourceNames<TContext["fromSourceNames"]>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:871](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L871)
+
+MergeContextWithJoinType - Creates a new context after a join operation
+
+This is the core type that handles the complex logic of merging schemas
+when tables are joined, applying the correct optionality based on join type.
+
+**Key Responsibilities**:
+1. **Schema Merging**: Combines existing schema with newly joined tables
+2. **Optionality Logic**: Applies join-specific optionality rules:
+   - `LEFT JOIN`: New table becomes optional
+   - `RIGHT JOIN`: Existing tables become optional
+   - `FULL JOIN`: Both existing and new become optional
+   - `INNER JOIN`: No tables become optional
+3. **State Tracking**: Updates hasJoins and joinTypes for future operations
+
+**Context Evolution**:
+- `baseSchema`: Unchanged (always the original `from()` tables)
+- `schema`: Expanded with new tables and proper optionality
+- `hasJoins`: Set to true
+- `joinTypes`: Updated to track this join type
+- `result`: Preserved from previous operations
+- `singleResult`: Preserved only if already true (via PreserveSingleResultFlag)
+
+## Type Declaration
+
+### baseSchema
+
+```ts
+baseSchema: TContext["baseSchema"];
+```
+
+### fromSourceName
+
+```ts
+fromSourceName: TContext["fromSourceName"];
+```
+
+### hasJoins
+
+```ts
+hasJoins: true;
+```
+
+### joinTypes
+
+```ts
+joinTypes: TContext["joinTypes"] extends Record<string, any> ? TContext["joinTypes"] : object & { [K in keyof TNewSchema & string]: TJoinType };
+```
+
+### refsSchema
+
+```ts
+refsSchema: ApplyJoinOptionalityToMergedSchema<RefsSchemaForContext<TContext>, TNewSchema, TJoinType, FromSourceNamesForOptionality<TContext>>;
+```
+
+### result
+
+```ts
+result: TContext["result"];
+```
+
+### schema
+
+```ts
+schema: ApplyJoinOptionalityToMergedSchema<TContext["schema"], TNewSchema, TJoinType, FromSourceNamesForOptionality<TContext>>;
+```
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+### TNewSchema
+
+`TNewSchema` *extends* [`ContextSchema`](/db/reference/type-aliases/ContextSchema)
+
+### TJoinType
+
+`TJoinType` *extends* `"inner"` \| `"left"` \| `"right"` \| `"full"` \| `"outer"` \| `"cross"`
diff --git a/mintlify/db/reference/type-aliases/MutationFn.md b/mintlify/db/reference/type-aliases/MutationFn.md
new file mode 100644
index 000000000..edd610499
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MutationFn.md
@@ -0,0 +1,28 @@
+---
+id: MutationFn
+title: MutationFn
+---
+
+# Type Alias: MutationFn()\&lt;T\>
+
+```ts
+type MutationFn<T> = (params) => Promise<any>;
+```
+
+Defined in: [packages/db/src/types.ts:129](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L129)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Parameters
+
+### params
+
+[`MutationFnParams`](/db/reference/type-aliases/MutationFnParams)\&lt;`T`\>
+
+## Returns
+
+`Promise`\&lt;`any`\>
diff --git a/mintlify/db/reference/type-aliases/MutationFnParams.md b/mintlify/db/reference/type-aliases/MutationFnParams.md
new file mode 100644
index 000000000..a4d95ab29
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/MutationFnParams.md
@@ -0,0 +1,30 @@
+---
+id: MutationFnParams
+title: MutationFnParams
+---
+
+# Type Alias: MutationFnParams\&lt;T\>
+
+```ts
+type MutationFnParams<T> = object;
+```
+
+Defined in: [packages/db/src/types.ts:125](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L125)
+
+Configuration options for creating a new transaction
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+## Properties
+
+### transaction
+
+```ts
+transaction: TransactionWithMutations<T>;
+```
+
+Defined in: [packages/db/src/types.ts:126](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L126)
diff --git a/mintlify/db/reference/type-aliases/NamespacedAndKeyedStream.md b/mintlify/db/reference/type-aliases/NamespacedAndKeyedStream.md
new file mode 100644
index 000000000..c7d5479c9
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/NamespacedAndKeyedStream.md
@@ -0,0 +1,16 @@
+---
+id: NamespacedAndKeyedStream
+title: NamespacedAndKeyedStream
+---
+
+# Type Alias: NamespacedAndKeyedStream
+
+```ts
+type NamespacedAndKeyedStream = IStreamBuilder<KeyedNamespacedRow>;
+```
+
+Defined in: [packages/db/src/types.ts:817](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L817)
+
+A namespaced and keyed stream is a stream of rows
+This is used throughout a query pipeline and as the output from a query without
+a `select` clause.
diff --git a/mintlify/db/reference/type-aliases/NamespacedRow.md b/mintlify/db/reference/type-aliases/NamespacedRow.md
new file mode 100644
index 000000000..47cfc5e99
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/NamespacedRow.md
@@ -0,0 +1,14 @@
+---
+id: NamespacedRow
+title: NamespacedRow
+---
+
+# Type Alias: NamespacedRow
+
+```ts
+type NamespacedRow = Record<string, Record<string, unknown>>;
+```
+
+Defined in: [packages/db/src/types.ts:804](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L804)
+
+A namespaced row is a row withing a pipeline that had each table wrapped in its alias
diff --git a/mintlify/db/reference/type-aliases/NonEmptyArray.md b/mintlify/db/reference/type-aliases/NonEmptyArray.md
new file mode 100644
index 000000000..6d65f6596
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/NonEmptyArray.md
@@ -0,0 +1,20 @@
+---
+id: NonEmptyArray
+title: NonEmptyArray
+---
+
+# Type Alias: NonEmptyArray\&lt;T\>
+
+```ts
+type NonEmptyArray<T> = [T, ...T[]];
+```
+
+Defined in: [packages/db/src/types.ts:136](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L136)
+
+Represents a non-empty array (at least one element)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/NonSingleResult.md b/mintlify/db/reference/type-aliases/NonSingleResult.md
new file mode 100644
index 000000000..b4ecf311f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/NonSingleResult.md
@@ -0,0 +1,22 @@
+---
+id: NonSingleResult
+title: NonSingleResult
+---
+
+# Type Alias: NonSingleResult
+
+```ts
+type NonSingleResult = object;
+```
+
+Defined in: [packages/db/src/types.ts:760](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L760)
+
+## Properties
+
+### singleResult?
+
+```ts
+optional singleResult: never;
+```
+
+Defined in: [packages/db/src/types.ts:761](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L761)
diff --git a/mintlify/db/reference/type-aliases/OperationType.md b/mintlify/db/reference/type-aliases/OperationType.md
new file mode 100644
index 000000000..f6bdc3117
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/OperationType.md
@@ -0,0 +1,12 @@
+---
+id: OperationType
+title: OperationType
+---
+
+# Type Alias: OperationType
+
+```ts
+type OperationType = "insert" | "update" | "delete";
+```
+
+Defined in: [packages/db/src/types.ts:205](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L205)
diff --git a/mintlify/db/reference/type-aliases/OperatorName.md b/mintlify/db/reference/type-aliases/OperatorName.md
new file mode 100644
index 000000000..695ed994a
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/OperatorName.md
@@ -0,0 +1,12 @@
+---
+id: OperatorName
+title: OperatorName
+---
+
+# Type Alias: OperatorName
+
+```ts
+type OperatorName = typeof operators[number];
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:718](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L718)
diff --git a/mintlify/db/reference/type-aliases/OptimisticChangeMessage.md b/mintlify/db/reference/type-aliases/OptimisticChangeMessage.md
new file mode 100644
index 000000000..7fc0aff3f
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/OptimisticChangeMessage.md
@@ -0,0 +1,24 @@
+---
+id: OptimisticChangeMessage
+title: OptimisticChangeMessage
+---
+
+# Type Alias: OptimisticChangeMessage\&lt;T, TKey\>
+
+```ts
+type OptimisticChangeMessage<T, TKey> = 
+  | ChangeMessage<T> & object
+  | DeleteKeyMessage<TKey> & object;
+```
+
+Defined in: [packages/db/src/types.ts:402](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L402)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
diff --git a/mintlify/db/reference/type-aliases/OrderByCallback.md b/mintlify/db/reference/type-aliases/OrderByCallback.md
new file mode 100644
index 000000000..90c307d40
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/OrderByCallback.md
@@ -0,0 +1,35 @@
+---
+id: OrderByCallback
+title: OrderByCallback
+---
+
+# Type Alias: OrderByCallback()\&lt;TContext\>
+
+```ts
+type OrderByCallback<TContext> = (refs) => any;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:516](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L516)
+
+OrderByCallback - Type for orderBy clause callback functions
+
+Similar to WhereCallback, these receive refs for all available tables
+and should return expressions that will be used for sorting.
+
+Example: `(refs) => refs.users.createdAt`
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### refs
+
+[`RefsForContext`](/db/reference/type-aliases/RefsForContext)\&lt;`TContext`\>
+
+## Returns
+
+`any`
diff --git a/mintlify/db/reference/type-aliases/Prettify.md b/mintlify/db/reference/type-aliases/Prettify.md
new file mode 100644
index 000000000..eaeef6cf8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Prettify.md
@@ -0,0 +1,20 @@
+---
+id: Prettify
+title: Prettify
+---
+
+# Type Alias: Prettify\&lt;T\>
+
+```ts
+type Prettify<T> = { [K in keyof T]: T[K] } & object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:1242](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L1242)
+
+Prettify - Utility type for clean IDE display
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/QueryBuilder.md b/mintlify/db/reference/type-aliases/QueryBuilder.md
new file mode 100644
index 000000000..dbbbf4a0e
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/QueryBuilder.md
@@ -0,0 +1,18 @@
+---
+id: QueryBuilder
+title: QueryBuilder
+---
+
+# Type Alias: QueryBuilder\&lt;TContext\>
+
+```ts
+type QueryBuilder<TContext> = Omit<BaseQueryBuilder<TContext>, "from" | "unionAll" | "_getQuery">;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:1401](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L1401)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/QueryResult.md b/mintlify/db/reference/type-aliases/QueryResult.md
new file mode 100644
index 000000000..4e089b7ec
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/QueryResult.md
@@ -0,0 +1,18 @@
+---
+id: QueryResult
+title: QueryResult
+---
+
+# Type Alias: QueryResult\&lt;T\>
+
+```ts
+type QueryResult<T> = GetResult<ExtractContext<T>>;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:1419](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L1419)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/Ref.md b/mintlify/db/reference/type-aliases/Ref.md
new file mode 100644
index 000000000..6fbdbb589
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Ref.md
@@ -0,0 +1,52 @@
+---
+id: Ref
+title: Ref
+---
+
+# Type Alias: Ref\&lt;T, Nullable\>
+
+```ts
+type Ref<T, Nullable> = { [K in keyof T]: IsNonExactOptional<T[K]> extends true ? IsNonExactNullable<T[K]> extends true ? IsPlainObject<NonNullable<T[K]>> extends true ? Ref<NonNullable<T[K]>, Nullable> | undefined : RefLeaf<NonNullable<T[K]>, Nullable> | undefined : IsPlainObject<NonUndefined<T[K]>> extends true ? Ref<NonUndefined<T[K]>, Nullable> | undefined : RefLeaf<NonUndefined<T[K]>, Nullable> | undefined : IsNonExactNullable<T[K]> extends true ? IsPlainObject<NonNull<T[K]>> extends true ? Ref<NonNull<T[K]>, Nullable> | null : RefLeaf<NonNull<T[K]>, Nullable> | null : IsPlainObject<T[K]> extends true ? Ref<T[K], Nullable> : RefLeaf<T[K], Nullable> } & RefLeaf<T, Nullable> & VirtualPropsRef;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:773](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L773)
+
+Ref - The user-facing ref interface for the query builder
+
+This is a clean type that represents a reference to a value in the query,
+designed for optimal IDE experience without internal implementation details.
+It provides a recursive interface that allows nested property access while
+preserving optionality and nullability correctly.
+
+The `Nullable` parameter indicates whether this ref comes from a nullable
+join side (left/right/full). When `true`, the `Nullable` flag propagates
+through all nested property accesses, ensuring the result type includes
+`| undefined` for all fields accessed through this ref.
+
+Includes virtual properties ($synced, $origin, $key, $collectionId) for
+querying on sync status and row metadata.
+
+Example usage:
+```typescript
+// Clean interface - no internal properties visible
+const users: Ref<{ id: number; profile?: { bio: string } }> = { ... }
+users.id // Ref<number> - clean display
+users.profile?.bio // Ref<string> - nested optional access works
+users.$synced // RefLeaf<boolean> - virtual property access
+
+// Nullable ref (left/right/full join side):
+select(({ dept }) => ({ name: dept.name })) // result: string | undefined
+
+// Spread operations work cleanly:
+select(({ user }) => ({ ...user })) // Returns User type, not Ref types
+```
+
+## Type Parameters
+
+### T
+
+`T` = `any`
+
+### Nullable
+
+`Nullable` *extends* `boolean` = `false`
diff --git a/mintlify/db/reference/type-aliases/RefsForContext.md b/mintlify/db/reference/type-aliases/RefsForContext.md
new file mode 100644
index 000000000..2cde90ba0
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/RefsForContext.md
@@ -0,0 +1,18 @@
+---
+id: RefsForContext
+title: RefsForContext
+---
+
+# Type Alias: RefsForContext\&lt;TContext\>
+
+```ts
+type RefsForContext<TContext> = { [K in KeysOfUnion<RefsSchemaForContext<TContext>>]: IsNonExactOptional<ValueOfUnion<RefsSchemaForContext<TContext>, K>> extends true ? IsNonExactNullable<ValueOfUnion<RefsSchemaForContext<TContext>, K>> extends true ? RefForContextValue<NonNullable<ValueOfUnion<RefsSchemaForContext<TContext>, K>>, true> : RefForContextValue<NonUndefined<ValueOfUnion<RefsSchemaForContext<TContext>, K>>, true> : IsNonExactNullable<ValueOfUnion<RefsSchemaForContext<TContext>, K>> extends true ? RefForContextValue<NonNull<ValueOfUnion<RefsSchemaForContext<TContext>, K>>, true> : RefForContextValue<ValueOfUnion<RefsSchemaForContext<TContext>, K>> } & TContext["hasResult"] extends true ? object : object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:623](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L623)
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
diff --git a/mintlify/db/reference/type-aliases/ResolveTransactionChanges.md b/mintlify/db/reference/type-aliases/ResolveTransactionChanges.md
new file mode 100644
index 000000000..9b28762f2
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ResolveTransactionChanges.md
@@ -0,0 +1,30 @@
+---
+id: ResolveTransactionChanges
+title: ResolveTransactionChanges
+---
+
+# Type Alias: ResolveTransactionChanges\&lt;T, TOperation\>
+
+```ts
+type ResolveTransactionChanges<T, TOperation> = TOperation extends "delete" ? T : Partial<T>;
+```
+
+Defined in: [packages/db/src/types.ts:82](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L82)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TOperation
+
+`TOperation` *extends* [`OperationType`](/db/reference/type-aliases/OperationType) = [`OperationType`](/db/reference/type-aliases/OperationType)
+
+## Remarks
+
+`update` and `insert` are both represented as `Partial<T>`, but changes for `insert` could me made more precise by inferring the schema input type. In practice, this has almost 0 real world impact so it's not worth the added type complexity.
+
+## See
+
+https://github.com/TanStack/db/pull/209#issuecomment-3053001206
diff --git a/mintlify/db/reference/type-aliases/ResultStream.md b/mintlify/db/reference/type-aliases/ResultStream.md
new file mode 100644
index 000000000..dc50b1c69
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ResultStream.md
@@ -0,0 +1,15 @@
+---
+id: ResultStream
+title: ResultStream
+---
+
+# Type Alias: ResultStream
+
+```ts
+type ResultStream = IStreamBuilder<[unknown, [any, string | undefined]]>;
+```
+
+Defined in: [packages/db/src/types.ts:799](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L799)
+
+Result stream type representing the output of compiled queries
+Always returns [key, [result, orderByIndex]] where orderByIndex is undefined for unordered queries
diff --git a/mintlify/db/reference/type-aliases/ResultTypeFromSelect.md b/mintlify/db/reference/type-aliases/ResultTypeFromSelect.md
new file mode 100644
index 000000000..7889c2efe
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/ResultTypeFromSelect.md
@@ -0,0 +1,53 @@
+---
+id: ResultTypeFromSelect
+title: ResultTypeFromSelect
+---
+
+# Type Alias: ResultTypeFromSelect\&lt;TSelectObject\>
+
+```ts
+type ResultTypeFromSelect<TSelectObject> = IsAny<TSelectObject> extends true ? any : WithoutRefBrand<Prettify<{ [K in keyof TSelectObject]: NeedsExtraction<TSelectObject[K]> extends true ? ExtractExpressionType<TSelectObject[K]> : TSelectObject[K] extends ToArrayWrapper<infer T> ? T[] : TSelectObject[K] extends ConcatToArrayWrapper<any> ? string : TSelectObject[K] extends MaterializeWrapper<infer T, infer IsSingle> ? IsSingle extends true ? T | undefined : T[] : TSelectObject[K] extends { __brand: "CaseWhenWrapper"; _result?: infer T } ? ResultTypeFromCaseWhen<T> : (...)[(...)] extends QueryBuilder<(...)> ? Collection<(...)> : (...) extends (...) ? (...) : (...) }>>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:389](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L389)
+
+ResultTypeFromSelect - Infers the result type from a select object
+
+This complex type transforms the input to `select()` into the actual TypeScript
+type that the query will return. It handles all the different kinds of values
+that can appear in a select clause:
+
+**Ref/RefProxy Extraction**:
+- `RefProxy<T>` → `T`: Extracts the underlying type
+- `Ref<T> | undefined` → `T | undefined`: Preserves optionality
+- `Ref<T> | null` → `T | null`: Preserves nullability
+
+**Expression Types**:
+- `BasicExpression<T>` → `T`: Function results like `upper()` → `string`
+- `Aggregate<T>` → `T`: Aggregation results like `count()` → `number`
+
+**JavaScript Literals** (pass through as-is):
+- `string` → `string`: String literals remain strings
+- `number` → `number`: Numeric literals remain numbers
+- `boolean` → `boolean`: Boolean literals remain booleans
+- `null` → `null`: Explicit null remains null
+- `undefined` → `undefined`: Direct undefined values
+
+**Nested Objects** (recursive):
+- Plain objects are recursively processed to handle nested projections
+- RefProxy objects are detected and their types extracted
+
+Example transformation:
+```typescript
+// Input:
+{ id: Ref<number>, name: Ref<string>, status: 'active', count: 42, profile: { bio: Ref<string> } }
+
+// Output:
+{ id: number, name: string, status: 'active', count: 42, profile: { bio: string } }
+```
+
+## Type Parameters
+
+### TSelectObject
+
+`TSelectObject`
diff --git a/mintlify/db/reference/type-aliases/Row.md b/mintlify/db/reference/type-aliases/Row.md
new file mode 100644
index 000000000..39303a4f8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Row.md
@@ -0,0 +1,18 @@
+---
+id: Row
+title: Row
+---
+
+# Type Alias: Row\&lt;TExtensions\>
+
+```ts
+type Row<TExtensions> = Record<string, Value<TExtensions>>;
+```
+
+Defined in: [packages/db/src/types.ts:203](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L203)
+
+## Type Parameters
+
+### TExtensions
+
+`TExtensions` = `never`
diff --git a/mintlify/db/reference/type-aliases/SchemaFromSource.md b/mintlify/db/reference/type-aliases/SchemaFromSource.md
new file mode 100644
index 000000000..7820e0260
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SchemaFromSource.md
@@ -0,0 +1,27 @@
+---
+id: SchemaFromSource
+title: SchemaFromSource
+---
+
+# Type Alias: SchemaFromSource\&lt;T\>
+
+```ts
+type SchemaFromSource<T> = Prettify<{ [K in keyof T]: T[K] extends CollectionImpl<any, any, any, any, any> ? InferCollectionType<T[K]> : T[K] extends QueryBuilder<infer TContext> ? GetResult<TContext> : never }>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:116](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L116)
+
+SchemaFromSource - Converts a Source definition into a ContextSchema
+
+This transforms the input to `from()` into the schema format used throughout
+the query builder. For each alias in the source:
+- Collections → their inferred TypeScript type
+- Subqueries → their result type (what they would return if executed)
+
+The `Prettify` wrapper ensures clean type display in IDEs.
+
+## Type Parameters
+
+### T
+
+`T` *extends* [`Source`](/db/reference/type-aliases/Source)
diff --git a/mintlify/db/reference/type-aliases/SelectObject.md b/mintlify/db/reference/type-aliases/SelectObject.md
new file mode 100644
index 000000000..ec820fcad
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SelectObject.md
@@ -0,0 +1,24 @@
+---
+id: SelectObject
+title: SelectObject
+---
+
+# Type Alias: SelectObject\&lt;T\>
+
+```ts
+type SelectObject<T> = T;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:279](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L279)
+
+SelectObject - Wrapper type for select clause objects
+
+This ensures that objects passed to `select()` have valid SelectValue types
+for all their properties. It's a simple wrapper that provides better error
+messages when invalid selections are attempted.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `SelectShape` = `SelectShape`
diff --git a/mintlify/db/reference/type-aliases/SingleResult.md b/mintlify/db/reference/type-aliases/SingleResult.md
new file mode 100644
index 000000000..c12442b35
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SingleResult.md
@@ -0,0 +1,22 @@
+---
+id: SingleResult
+title: SingleResult
+---
+
+# Type Alias: SingleResult
+
+```ts
+type SingleResult = object;
+```
+
+Defined in: [packages/db/src/types.ts:756](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L756)
+
+## Properties
+
+### singleResult
+
+```ts
+singleResult: true;
+```
+
+Defined in: [packages/db/src/types.ts:757](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L757)
diff --git a/mintlify/db/reference/type-aliases/SingleSource.md b/mintlify/db/reference/type-aliases/SingleSource.md
new file mode 100644
index 000000000..8ab8b25f8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SingleSource.md
@@ -0,0 +1,18 @@
+---
+id: SingleSource
+title: SingleSource
+---
+
+# Type Alias: SingleSource\&lt;TSource\>
+
+```ts
+type SingleSource<TSource> = IsUnion<keyof TSource & string> extends true ? never : TSource;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:134](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L134)
+
+## Type Parameters
+
+### TSource
+
+`TSource` *extends* [`Source`](/db/reference/type-aliases/Source)
diff --git a/mintlify/db/reference/type-aliases/Source.md b/mintlify/db/reference/type-aliases/Source.md
new file mode 100644
index 000000000..fe3c54301
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Source.md
@@ -0,0 +1,29 @@
+---
+id: Source
+title: Source
+---
+
+# Type Alias: Source
+
+```ts
+type Source = object;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:91](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L91)
+
+Source - Input definition for query builder `from()` and `unionAll()` clauses
+
+Maps table aliases to either:
+- `CollectionImpl`: A database collection/table
+- `QueryBuilder`: A subquery that can be used as a table
+
+Example: `{ users: usersCollection }`
+
+## Index Signature
+
+```ts
+[alias: string]: 
+  | CollectionImpl<any, any, {
+}, StandardSchemaV1<unknown, unknown>, any>
+| QueryBuilder<Context>
+```
diff --git a/mintlify/db/reference/type-aliases/SourceClauseContext.md b/mintlify/db/reference/type-aliases/SourceClauseContext.md
new file mode 100644
index 000000000..a9a462203
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SourceClauseContext.md
@@ -0,0 +1,12 @@
+---
+id: SourceClauseContext
+title: SourceClauseContext
+---
+
+# Type Alias: SourceClauseContext
+
+```ts
+type SourceClauseContext = "from clause" | "unionAll clause" | "join clause";
+```
+
+Defined in: [packages/db/src/errors.ts:388](https://github.com/TanStack/db/blob/main/packages/db/src/errors.ts#L388)
diff --git a/mintlify/db/reference/type-aliases/StandardSchema.md b/mintlify/db/reference/type-aliases/StandardSchema.md
new file mode 100644
index 000000000..2c68c2983
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StandardSchema.md
@@ -0,0 +1,47 @@
+---
+id: StandardSchema
+title: StandardSchema
+---
+
+# Type Alias: StandardSchema\&lt;T\>
+
+```ts
+type StandardSchema<T> = StandardSchemaV1 & object;
+```
+
+Defined in: [packages/db/src/types.ts:419](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L419)
+
+The Standard Schema interface.
+This follows the standard-schema specification: https://github.com/standard-schema/standard-schema
+
+## Type Declaration
+
+### ~standard
+
+```ts
+~standard: object;
+```
+
+#### ~standard.types?
+
+```ts
+optional types: object;
+```
+
+#### ~standard.types.input
+
+```ts
+input: T;
+```
+
+#### ~standard.types.output
+
+```ts
+output: T;
+```
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/type-aliases/StandardSchemaAlias.md b/mintlify/db/reference/type-aliases/StandardSchemaAlias.md
new file mode 100644
index 000000000..196c622bd
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StandardSchemaAlias.md
@@ -0,0 +1,20 @@
+---
+id: StandardSchemaAlias
+title: StandardSchemaAlias
+---
+
+# Type Alias: StandardSchemaAlias\&lt;T\>
+
+```ts
+type StandardSchemaAlias<T> = StandardSchema<T>;
+```
+
+Defined in: [packages/db/src/types.ts:431](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L431)
+
+Type alias for StandardSchema
+
+## Type Parameters
+
+### T
+
+`T` = `unknown`
diff --git a/mintlify/db/reference/type-aliases/StorageApi.md b/mintlify/db/reference/type-aliases/StorageApi.md
new file mode 100644
index 000000000..7a79766b2
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StorageApi.md
@@ -0,0 +1,14 @@
+---
+id: StorageApi
+title: StorageApi
+---
+
+# Type Alias: StorageApi
+
+```ts
+type StorageApi = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+```
+
+Defined in: [packages/db/src/local-storage.ts:24](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L24)
+
+Storage API interface - subset of DOM Storage that we need
diff --git a/mintlify/db/reference/type-aliases/StorageEventApi.md b/mintlify/db/reference/type-aliases/StorageEventApi.md
new file mode 100644
index 000000000..de6e66868
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StorageEventApi.md
@@ -0,0 +1,62 @@
+---
+id: StorageEventApi
+title: StorageEventApi
+---
+
+# Type Alias: StorageEventApi
+
+```ts
+type StorageEventApi = object;
+```
+
+Defined in: [packages/db/src/local-storage.ts:29](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L29)
+
+Storage event API - subset of Window for 'storage' events only
+
+## Properties
+
+### addEventListener()
+
+```ts
+addEventListener: (type, listener) => void;
+```
+
+Defined in: [packages/db/src/local-storage.ts:30](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L30)
+
+#### Parameters
+
+##### type
+
+`"storage"`
+
+##### listener
+
+(`event`) => `void`
+
+#### Returns
+
+`void`
+
+***
+
+### removeEventListener()
+
+```ts
+removeEventListener: (type, listener) => void;
+```
+
+Defined in: [packages/db/src/local-storage.ts:34](https://github.com/TanStack/db/blob/main/packages/db/src/local-storage.ts#L34)
+
+#### Parameters
+
+##### type
+
+`"storage"`
+
+##### listener
+
+(`event`) => `void`
+
+#### Returns
+
+`void`
diff --git a/mintlify/db/reference/type-aliases/Strategy.md b/mintlify/db/reference/type-aliases/Strategy.md
new file mode 100644
index 000000000..561cefb37
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/Strategy.md
@@ -0,0 +1,18 @@
+---
+id: Strategy
+title: Strategy
+---
+
+# Type Alias: Strategy
+
+```ts
+type Strategy = 
+  | DebounceStrategy
+  | QueueStrategy
+  | ThrottleStrategy
+  | BatchStrategy;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:113](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L113)
+
+Union type of all available strategies
diff --git a/mintlify/db/reference/type-aliases/StrategyOptions.md b/mintlify/db/reference/type-aliases/StrategyOptions.md
new file mode 100644
index 000000000..c81df5452
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StrategyOptions.md
@@ -0,0 +1,20 @@
+---
+id: StrategyOptions
+title: StrategyOptions
+---
+
+# Type Alias: StrategyOptions\&lt;T\>
+
+```ts
+type StrategyOptions<T> = T extends DebounceStrategy ? DebounceStrategyOptions : T extends QueueStrategy ? QueueStrategyOptions : T extends ThrottleStrategy ? ThrottleStrategyOptions : T extends BatchStrategy ? BatchStrategyOptions : never;
+```
+
+Defined in: [packages/db/src/strategies/types.ts:122](https://github.com/TanStack/db/blob/main/packages/db/src/strategies/types.ts#L122)
+
+Extract the options type from a strategy
+
+## Type Parameters
+
+### T
+
+`T` *extends* [`Strategy`](/db/reference/type-aliases/Strategy)
diff --git a/mintlify/db/reference/type-aliases/StringCollationConfig.md b/mintlify/db/reference/type-aliases/StringCollationConfig.md
new file mode 100644
index 000000000..d0b89184e
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/StringCollationConfig.md
@@ -0,0 +1,28 @@
+---
+id: StringCollationConfig
+title: StringCollationConfig
+---
+
+# Type Alias: StringCollationConfig
+
+```ts
+type StringCollationConfig = 
+  | {
+  stringSort?: "lexical";
+}
+  | {
+  locale?: string;
+  localeOptions?: object;
+  stringSort?: "locale";
+};
+```
+
+Defined in: [packages/db/src/types.ts:32](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L32)
+
+StringSortOpts - Options for string sorting behavior
+
+This discriminated union allows for two types of string sorting:
+- **Lexical**: Simple character-by-character comparison (default)
+- **Locale**: Locale-aware sorting with optional customization
+
+The union ensures that locale options are only available when locale sorting is selected.
diff --git a/mintlify/db/reference/type-aliases/SubscriptionEvents.md b/mintlify/db/reference/type-aliases/SubscriptionEvents.md
new file mode 100644
index 000000000..15b3c1181
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SubscriptionEvents.md
@@ -0,0 +1,54 @@
+---
+id: SubscriptionEvents
+title: SubscriptionEvents
+---
+
+# Type Alias: SubscriptionEvents
+
+```ts
+type SubscriptionEvents = object;
+```
+
+Defined in: [packages/db/src/types.ts:243](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L243)
+
+All subscription events
+
+## Properties
+
+### status:change
+
+```ts
+status:change: SubscriptionStatusChangeEvent;
+```
+
+Defined in: [packages/db/src/types.ts:244](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L244)
+
+***
+
+### status:loadingSubset
+
+```ts
+status:loadingSubset: SubscriptionStatusEvent<"loadingSubset">;
+```
+
+Defined in: [packages/db/src/types.ts:246](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L246)
+
+***
+
+### status:ready
+
+```ts
+status:ready: SubscriptionStatusEvent<"ready">;
+```
+
+Defined in: [packages/db/src/types.ts:245](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L245)
+
+***
+
+### unsubscribed
+
+```ts
+unsubscribed: SubscriptionUnsubscribedEvent;
+```
+
+Defined in: [packages/db/src/types.ts:247](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L247)
diff --git a/mintlify/db/reference/type-aliases/SubscriptionStatus.md b/mintlify/db/reference/type-aliases/SubscriptionStatus.md
new file mode 100644
index 000000000..32218fdc9
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SubscriptionStatus.md
@@ -0,0 +1,14 @@
+---
+id: SubscriptionStatus
+title: SubscriptionStatus
+---
+
+# Type Alias: SubscriptionStatus
+
+```ts
+type SubscriptionStatus = "ready" | "loadingSubset";
+```
+
+Defined in: [packages/db/src/types.ts:210](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L210)
+
+Subscription status values
diff --git a/mintlify/db/reference/type-aliases/SyncConfigRes.md b/mintlify/db/reference/type-aliases/SyncConfigRes.md
new file mode 100644
index 000000000..f9e77f546
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SyncConfigRes.md
@@ -0,0 +1,42 @@
+---
+id: SyncConfigRes
+title: SyncConfigRes
+---
+
+# Type Alias: SyncConfigRes
+
+```ts
+type SyncConfigRes = object;
+```
+
+Defined in: [packages/db/src/types.ts:322](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L322)
+
+## Properties
+
+### cleanup?
+
+```ts
+optional cleanup: CleanupFn;
+```
+
+Defined in: [packages/db/src/types.ts:323](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L323)
+
+***
+
+### loadSubset?
+
+```ts
+optional loadSubset: LoadSubsetFn;
+```
+
+Defined in: [packages/db/src/types.ts:324](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L324)
+
+***
+
+### unloadSubset?
+
+```ts
+optional unloadSubset: UnloadSubsetFn;
+```
+
+Defined in: [packages/db/src/types.ts:325](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L325)
diff --git a/mintlify/db/reference/type-aliases/SyncMode.md b/mintlify/db/reference/type-aliases/SyncMode.md
new file mode 100644
index 000000000..b1222c800
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/SyncMode.md
@@ -0,0 +1,12 @@
+---
+id: SyncMode
+title: SyncMode
+---
+
+# Type Alias: SyncMode
+
+```ts
+type SyncMode = "eager" | "on-demand";
+```
+
+Defined in: [packages/db/src/types.ts:519](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L519)
diff --git a/mintlify/db/reference/type-aliases/TransactionState.md b/mintlify/db/reference/type-aliases/TransactionState.md
new file mode 100644
index 000000000..efcb963a6
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/TransactionState.md
@@ -0,0 +1,12 @@
+---
+id: TransactionState
+title: TransactionState
+---
+
+# Type Alias: TransactionState
+
+```ts
+type TransactionState = "pending" | "persisting" | "completed" | "failed";
+```
+
+Defined in: [packages/db/src/types.ts:64](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L64)
diff --git a/mintlify/db/reference/type-aliases/TransactionWithMutations.md b/mintlify/db/reference/type-aliases/TransactionWithMutations.md
new file mode 100644
index 000000000..44247069b
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/TransactionWithMutations.md
@@ -0,0 +1,51 @@
+---
+id: TransactionWithMutations
+title: TransactionWithMutations
+---
+
+# Type Alias: TransactionWithMutations\&lt;T, TOperation\>
+
+```ts
+type TransactionWithMutations<T, TOperation> = Omit<Transaction<T>, "mutations"> & object;
+```
+
+Defined in: [packages/db/src/types.ts:142](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L142)
+
+Utility type for a Transaction with at least one mutation
+This is used internally by the Transaction.commit method
+
+## Type Declaration
+
+### mutations
+
+```ts
+mutations: NonEmptyArray<PendingMutation<T, TOperation>>;
+```
+
+We must omit the `mutations` property from `Transaction<T>` before intersecting
+because TypeScript intersects property types when the same property appears on
+both sides of an intersection.
+
+Without `Omit`:
+- `Transaction<T>` has `mutations: Array<PendingMutation<T>>`
+- The intersection would create: `Array<PendingMutation<T>> & NonEmptyArray<PendingMutation<T, TOperation>>`
+- When mapping over this array, TypeScript widens `TOperation` from the specific literal
+  (e.g., `"delete"`) to the union `OperationType` (`"insert" | "update" | "delete"`)
+- This causes `PendingMutation<T, OperationType>` to evaluate the conditional type
+  `original: TOperation extends 'insert' ? {} : T` as `{} | T` instead of just `T`
+
+With `Omit`:
+- We remove `mutations` from `Transaction<T>` first
+- Then add back `mutations: NonEmptyArray<PendingMutation<T, TOperation>>`
+- TypeScript can properly narrow `TOperation` to the specific literal type
+- This ensures `mutation.original` is correctly typed as `T` (not `{} | T`) when mapping
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TOperation
+
+`TOperation` *extends* [`OperationType`](/db/reference/type-aliases/OperationType) = [`OperationType`](/db/reference/type-aliases/OperationType)
diff --git a/mintlify/db/reference/type-aliases/UnloadSubsetFn.md b/mintlify/db/reference/type-aliases/UnloadSubsetFn.md
new file mode 100644
index 000000000..362787134
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/UnloadSubsetFn.md
@@ -0,0 +1,22 @@
+---
+id: UnloadSubsetFn
+title: UnloadSubsetFn
+---
+
+# Type Alias: UnloadSubsetFn()
+
+```ts
+type UnloadSubsetFn = (options) => void;
+```
+
+Defined in: [packages/db/src/types.ts:318](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L318)
+
+## Parameters
+
+### options
+
+[`LoadSubsetOptions`](/db/reference/type-aliases/LoadSubsetOptions)
+
+## Returns
+
+`void`
diff --git a/mintlify/db/reference/type-aliases/UpdateMutationFn.md b/mintlify/db/reference/type-aliases/UpdateMutationFn.md
new file mode 100644
index 000000000..3693036e8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/UpdateMutationFn.md
@@ -0,0 +1,40 @@
+---
+id: UpdateMutationFn
+title: UpdateMutationFn
+---
+
+# Type Alias: UpdateMutationFn()\&lt;T, TKey, TUtils, TReturn\>
+
+```ts
+type UpdateMutationFn<T, TKey, TUtils, TReturn> = (params) => Promise<TReturn>;
+```
+
+Defined in: [packages/db/src/types.ts:478](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L478)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+### TReturn
+
+`TReturn` = `any`
+
+## Parameters
+
+### params
+
+[`UpdateMutationFnParams`](/db/reference/type-aliases/UpdateMutationFnParams)\&lt;`T`, `TKey`, `TUtils`\>
+
+## Returns
+
+`Promise`\&lt;`TReturn`\>
diff --git a/mintlify/db/reference/type-aliases/UpdateMutationFnParams.md b/mintlify/db/reference/type-aliases/UpdateMutationFnParams.md
new file mode 100644
index 000000000..8662bd055
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/UpdateMutationFnParams.md
@@ -0,0 +1,46 @@
+---
+id: UpdateMutationFnParams
+title: UpdateMutationFnParams
+---
+
+# Type Alias: UpdateMutationFnParams\&lt;T, TKey, TUtils\>
+
+```ts
+type UpdateMutationFnParams<T, TKey, TUtils> = object;
+```
+
+Defined in: [packages/db/src/types.ts:445](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L445)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object` = `Record`\&lt;`string`, `unknown`\>
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+### TUtils
+
+`TUtils` *extends* [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord) = [`UtilsRecord`](/db/reference/type-aliases/UtilsRecord)
+
+## Properties
+
+### collection
+
+```ts
+collection: Collection<T, TKey, TUtils>;
+```
+
+Defined in: [packages/db/src/types.ts:451](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L451)
+
+***
+
+### transaction
+
+```ts
+transaction: TransactionWithMutations<T, "update">;
+```
+
+Defined in: [packages/db/src/types.ts:450](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L450)
diff --git a/mintlify/db/reference/type-aliases/UtilsRecord.md b/mintlify/db/reference/type-aliases/UtilsRecord.md
new file mode 100644
index 000000000..38e7e46f8
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/UtilsRecord.md
@@ -0,0 +1,14 @@
+---
+id: UtilsRecord
+title: UtilsRecord
+---
+
+# Type Alias: UtilsRecord
+
+```ts
+type UtilsRecord = Record<string, any>;
+```
+
+Defined in: [packages/db/src/types.ts:74](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L74)
+
+A record of utilities (functions or getters) that can be attached to a collection
diff --git a/mintlify/db/reference/type-aliases/VirtualOrigin.md b/mintlify/db/reference/type-aliases/VirtualOrigin.md
new file mode 100644
index 000000000..5c47abb03
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/VirtualOrigin.md
@@ -0,0 +1,22 @@
+---
+id: VirtualOrigin
+title: VirtualOrigin
+---
+
+# Type Alias: VirtualOrigin
+
+```ts
+type VirtualOrigin = "local" | "remote";
+```
+
+Defined in: [packages/db/src/virtual-props.ts:22](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L22)
+
+Origin of the last confirmed change to a row, from the current client's perspective.
+
+- `'local'`: The change originated from this client (e.g., a mutation made here)
+- `'remote'`: The change was received via sync from another client/server
+
+Note: This reflects the client's perspective, not the original creator.
+User A creates order → $origin = 'local' on User A's client
+Order syncs to server
+User B receives order → $origin = 'remote' on User B's client
diff --git a/mintlify/db/reference/type-aliases/WhereCallback.md b/mintlify/db/reference/type-aliases/WhereCallback.md
new file mode 100644
index 000000000..5a16e9b6a
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/WhereCallback.md
@@ -0,0 +1,36 @@
+---
+id: WhereCallback
+title: WhereCallback
+---
+
+# Type Alias: WhereCallback()\&lt;TContext\>
+
+```ts
+type WhereCallback<TContext> = (refs) => any;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:198](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L198)
+
+WhereCallback - Type for where/having clause callback functions
+
+These callbacks receive a `refs` object containing RefProxy instances for
+all available tables. The callback should return a boolean expression
+that will be used to filter query results.
+
+Example: `(refs) => eq(refs.users.age, 25)`
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+## Parameters
+
+### refs
+
+[`RefsForContext`](/db/reference/type-aliases/RefsForContext)\&lt;`TContext`\>
+
+## Returns
+
+`any`
diff --git a/mintlify/db/reference/type-aliases/WithResult.md b/mintlify/db/reference/type-aliases/WithResult.md
new file mode 100644
index 000000000..70cdf15e2
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/WithResult.md
@@ -0,0 +1,35 @@
+---
+id: WithResult
+title: WithResult
+---
+
+# Type Alias: WithResult\&lt;TContext, TResult\>
+
+```ts
+type WithResult<TContext, TResult> = Prettify<Omit<TContext, "result" | "hasResult"> & object>;
+```
+
+Defined in: [packages/db/src/query/builder/types.ts:1232](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/types.ts#L1232)
+
+WithResult - Updates a context with a new result type after select()
+
+This utility type is used internally when the `select()` method is called
+to update the context with the projected result type. It preserves all
+other context properties while replacing the `result` field.
+
+**Usage**:
+When `select()` is called, the query builder uses this type to create
+a new context where `result` contains the shape of the selected fields.
+
+The double `Prettify` ensures both the overall context and the nested
+result type display cleanly in IDEs.
+
+## Type Parameters
+
+### TContext
+
+`TContext` *extends* [`Context`](/db/reference/interfaces/Context)
+
+### TResult
+
+`TResult`
diff --git a/mintlify/db/reference/type-aliases/WithVirtualProps.md b/mintlify/db/reference/type-aliases/WithVirtualProps.md
new file mode 100644
index 000000000..ed14146ab
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/WithVirtualProps.md
@@ -0,0 +1,36 @@
+---
+id: WithVirtualProps
+title: WithVirtualProps
+---
+
+# Type Alias: WithVirtualProps\&lt;T, TKey\>
+
+```ts
+type WithVirtualProps<T, TKey> = T & VirtualRowProps<TKey>;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:112](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L112)
+
+Adds virtual properties to a row type.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `object`
+
+The base row type
+
+### TKey
+
+`TKey` *extends* `string` \| `number` = `string` \| `number`
+
+The type of the row's key
+
+## Example
+
+```typescript
+type User = { id: string; name: string }
+type UserWithVirtual = WithVirtualProps<User, string>
+// { id: string; name: string; $synced: boolean; $origin: 'local' | 'remote'; $key: string; $collectionId: string }
+```
diff --git a/mintlify/db/reference/type-aliases/WithoutVirtualProps.md b/mintlify/db/reference/type-aliases/WithoutVirtualProps.md
new file mode 100644
index 000000000..76b12ddf5
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/WithoutVirtualProps.md
@@ -0,0 +1,31 @@
+---
+id: WithoutVirtualProps
+title: WithoutVirtualProps
+---
+
+# Type Alias: WithoutVirtualProps\&lt;T\>
+
+```ts
+type WithoutVirtualProps<T> = Omit<T, keyof VirtualRowProps>;
+```
+
+Defined in: [packages/db/src/virtual-props.ts:130](https://github.com/TanStack/db/blob/main/packages/db/src/virtual-props.ts#L130)
+
+Extracts the base type from a type that may have virtual properties.
+Useful when you need to work with the raw data without virtual properties.
+
+## Type Parameters
+
+### T
+
+`T`
+
+The type that may include virtual properties
+
+## Example
+
+```typescript
+type UserWithVirtual = { id: string; name: string; $synced: boolean; $origin: 'local' | 'remote' }
+type User = WithoutVirtualProps<UserWithVirtual>
+// { id: string; name: string }
+```
diff --git a/mintlify/db/reference/type-aliases/WritableDeep.md b/mintlify/db/reference/type-aliases/WritableDeep.md
new file mode 100644
index 000000000..bd99c3b0a
--- /dev/null
+++ b/mintlify/db/reference/type-aliases/WritableDeep.md
@@ -0,0 +1,18 @@
+---
+id: WritableDeep
+title: WritableDeep
+---
+
+# Type Alias: WritableDeep\&lt;T\>
+
+```ts
+type WritableDeep<T> = T extends BuiltIns ? T : T extends (...arguments_) => unknown ? object extends WritableObjectDeep<T> ? T : HasMultipleCallSignatures<T> extends true ? T : (...arguments_) => ReturnType<T> & WritableObjectDeep<T> : T extends ReadonlyMap<unknown, unknown> ? WritableMapDeep<T> : T extends ReadonlySet<unknown> ? WritableSetDeep<T> : T extends ReadonlyArray<unknown> ? WritableArrayDeep<T> : T extends object ? WritableObjectDeep<T> : unknown;
+```
+
+Defined in: [packages/db/src/types.ts:979](https://github.com/TanStack/db/blob/main/packages/db/src/types.ts#L979)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/db/reference/variables/Query.md b/mintlify/db/reference/variables/Query.md
new file mode 100644
index 000000000..4eae382bc
--- /dev/null
+++ b/mintlify/db/reference/variables/Query.md
@@ -0,0 +1,12 @@
+---
+id: Query
+title: Query
+---
+
+# Variable: Query
+
+```ts
+const Query: InitialQueryBuilderConstructor = BaseQueryBuilder;
+```
+
+Defined in: [packages/db/src/query/builder/index.ts:1408](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/index.ts#L1408)
diff --git a/mintlify/db/reference/variables/operators.md b/mintlify/db/reference/variables/operators.md
new file mode 100644
index 000000000..833861198
--- /dev/null
+++ b/mintlify/db/reference/variables/operators.md
@@ -0,0 +1,14 @@
+---
+id: operators
+title: operators
+---
+
+# Variable: operators
+
+```ts
+const operators: readonly ["eq", "gt", "gte", "lt", "lte", "in", "like", "ilike", "and", "or", "not", "isNull", "isUndefined", "upper", "lower", "length", "concat", "add", "subtract", "multiply", "divide", "coalesce", "caseWhen", "count", "avg", "sum", "min", "max"];
+```
+
+Defined in: [packages/db/src/query/builder/functions.ts:680](https://github.com/TanStack/db/blob/main/packages/db/src/query/builder/functions.ts#L680)
+
+All supported operator names in TanStack DB expressions
diff --git a/mintlify/db/unidirectional-data-flow.lg.png b/mintlify/db/unidirectional-data-flow.lg.png
new file mode 100644
index 000000000..090bc99b2
Binary files /dev/null and b/mintlify/db/unidirectional-data-flow.lg.png differ
diff --git a/mintlify/db/unidirectional-data-flow.png b/mintlify/db/unidirectional-data-flow.png
new file mode 100644
index 000000000..9aa70c2fa
Binary files /dev/null and b/mintlify/db/unidirectional-data-flow.png differ
diff --git a/mintlify/devtools/architecture.md b/mintlify/devtools/architecture.md
new file mode 100644
index 000000000..e9a798024
--- /dev/null
+++ b/mintlify/devtools/architecture.md
@@ -0,0 +1,236 @@
+---
+title: Architecture Overview
+id: architecture
+---
+
+TanStack Devtools is a modular system of packages organized into three layers: **Framework Adapters**, **Core Shell**, and **Event Transport**. This architecture lets you use pre-built devtools panels or build your own custom ones, regardless of which frontend framework you use.
+
+```mermaid
+block-beta
+    columns 1
+    block:framework["Framework Layer"]
+        columns 4
+        React Vue Solid Preact
+    end
+    block:core["Core Layer"]
+        columns 3
+        Shell["Devtools Shell"] UI["UI Components"] Client["Event Client"]
+    end
+    block:transport["Transport Layer"]
+        columns 3
+        ClientBus["Client Event Bus"] ServerBus["Server Event Bus"] Vite["Vite Plugin"]
+    end
+
+    framework --> core
+    core --> transport
+```
+
+## Package Dependency Graph
+
+```mermaid
+graph TD
+    subgraph Framework["Framework Adapters"]
+        react["@tanstack/react-devtools"]
+        vue["@tanstack/vue-devtools"]
+        solid["@tanstack/solid-devtools"]
+        preact["@tanstack/preact-devtools"]
+    end
+
+    subgraph Core["Core Layer"]
+        shell["@tanstack/devtools<br/><i>Core shell (Solid.js)</i>"]
+        client["@tanstack/devtools-client<br/><i>Core devtools events</i>"]
+        eventClient["@tanstack/devtools-event-client<br/><i>Generic EventClient</i>"]
+        ui["@tanstack/devtools-ui<br/><i>Shared UI components</i>"]
+        clientBus["@tanstack/devtools-event-bus/client<br/><i>ClientEventBus</i>"]
+    end
+
+    subgraph Build["Build Layer"]
+        vite["@tanstack/devtools-vite"]
+        serverBus["@tanstack/devtools-event-bus/server<br/><i>ServerEventBus</i>"]
+    end
+
+    subgraph Utilities
+        utils["@tanstack/devtools-utils"]
+    end
+
+    react --> shell
+    vue --> shell
+    solid --> shell
+    preact --> shell
+
+    shell --> client
+    shell --> ui
+    shell --> clientBus
+    client --> eventClient
+
+    vite --> client
+    vite --> serverBus
+
+    utils --> ui
+```
+
+Each framework adapter depends only on `@tanstack/devtools`. The core shell pulls in everything it needs, so end users install just two packages: their framework adapter and the Vite plugin.
+
+## Transport Layer
+
+The transport layer handles event delivery between plugins, the devtools UI, and (optionally) a dev server. It is composed of three pieces.
+
+### ServerEventBus (`@tanstack/devtools-event-bus/server`)
+
+Runs inside the Vite dev server process (Node.js). It creates an HTTP server (or piggybacks on Vite's existing server when HTTPS is enabled) that accepts both **WebSocket** and **SSE** connections. When a message arrives from any client, the server broadcasts it to every other connected client and dispatches it on a server-side `EventTarget` so server-side listeners (like the Vite plugin's package-manager helpers) can react to it.
+
+Key details:
+- Default port is `4206`, auto-increments if the port is in use.
+- Handles `/__devtools/ws` for WebSocket upgrades, `/__devtools/sse` for SSE streams, and `/__devtools/send` for SSE POST fallback.
+- Sets `globalThis.__TANSTACK_EVENT_TARGET__` so that `EventClient` instances running on the server can dispatch events onto the same target.
+
+### ClientEventBus (`@tanstack/devtools-event-bus/client`)
+
+Runs in the browser. Started automatically when the core shell mounts via `TanStackDevtoolsCore.mount()`. Its responsibilities:
+
+1. **Local dispatch** -- Listens for `tanstack-dispatch-event` CustomEvents on `window`, re-dispatches them as both a type-specific CustomEvent (e.g. `my-plugin:state-update`) and a global `tanstack-devtools-global` event so listeners can subscribe to individual event types or to all events.
+2. **Server forwarding** -- If connected to a server bus, forwards every dispatched event over WebSocket (preferred) or SSE POST fallback.
+3. **Cross-tab sync** -- Uses `BroadcastChannel('tanstack-devtools')` to replicate events across browser tabs without round-tripping through the server.
+4. **Connection handshake** -- Responds to `tanstack-connect` events with `tanstack-connect-success`, allowing `EventClient` instances to discover the bus.
+
+### EventClient (`@tanstack/devtools-event-client`)
+
+The high-level, typed API that plugins use to send and receive events. Each `EventClient` is created with a `pluginId` and a type map that defines the events it can emit and listen to.
+
+```ts
+import { EventClient } from '@tanstack/devtools-event-client'
+
+type MyEvents = {
+  'state-update': { count: number }
+  'reset': void
+}
+
+const client = new EventClient<MyEvents>({ pluginId: 'my-plugin' })
+```
+
+When you call `client.emit('state-update', { count: 42 })`, the EventClient:
+
+1. Dispatches a CustomEvent on its internal `EventTarget` (for same-page listeners using the `withEventTarget` option).
+2. Dispatches a `tanstack-dispatch-event` CustomEvent on the global target (typically `window`), with a payload of `{ type: 'my-plugin:state-update', payload: { count: 42 }, pluginId: 'my-plugin' }`.
+3. The `ClientEventBus` picks up that `tanstack-dispatch-event`, re-dispatches it as a `my-plugin:state-update` CustomEvent on `window`, and forwards it to the server bus via WebSocket.
+
+When you call `client.on('state-update', callback)`, the EventClient registers a listener on the global target for `my-plugin:state-update` events, so it receives events regardless of whether they came from a local emit or from the server bus.
+
+> [!NOTE]
+> The server bus is optional. Without the Vite plugin, `EventClient` still works for same-page communication via CustomEvent dispatch on `window`. Events simply won't cross tab or process boundaries.
+
+### Event Flow Summary
+
+```mermaid
+flowchart LR
+    emit["EventClient.emit()"] --> dispatch["CustomEvent<br/><b>tanstack-dispatch-event</b><br/>on window"]
+    dispatch --> bus["ClientEventBus"]
+    bus --> local["Re-dispatch as<br/><b>my-plugin:state-update</b><br/>on window"]
+    local --> onLocal["EventClient.on()<br/>callbacks fire"]
+    bus --> bc["BroadcastChannel"]
+    bc --> otherTabs["Other tabs<br/>receive event"]
+    bus --> ws["WebSocket"]
+    ws --> server["ServerEventBus"]
+    server --> broadcast["Broadcast to all<br/>connected clients"]
+    broadcast --> remote["EventClient.on()<br/>callbacks fire<br/>in other clients"]
+```
+
+## Core Layer
+
+### @tanstack/devtools -- The Shell
+
+The devtools shell is a Solid.js application that renders the entire devtools UI. It exposes the `TanStackDevtoolsCore` class with three methods:
+
+- **`mount(el)`** -- Renders the Solid.js devtools application into the given DOM element. Starts a `ClientEventBus` and lazy-loads the UI. Wraps everything in a `DevtoolsProvider` (reactive store for plugins, settings, state) and a `PiPProvider` (Picture-in-Picture support).
+- **`unmount()`** -- Tears down the Solid.js app and stops the event bus.
+- **`setConfig(config)`** -- Updates configuration and plugins at runtime. Plugins are reactive: adding or removing them updates the tab bar immediately.
+
+The shell renders:
+- A **trigger button** (the floating devtools toggle, customizable or replaceable)
+- A **resizable panel** (docked to the bottom of the viewport, resizable via drag)
+- **Tab navigation** for switching between plugins, settings, SEO inspector, and the plugin marketplace
+- A **settings panel** for theme, hotkeys, position, and other preferences
+- **Plugin containers** -- DOM elements where each plugin's UI is mounted
+
+Settings and UI state (panel size, position, active tab, theme) are persisted in `localStorage` so they survive page reloads.
+
+### @tanstack/devtools-ui -- Component Library
+
+A shared Solid.js component library used by the core shell and available for use in Solid.js plugins. Provides buttons, inputs, checkboxes, a JSON tree viewer, section layouts, and other UI primitives. The `@tanstack/devtools-utils` package also depends on it to provide framework-specific plugin helpers.
+
+### @tanstack/devtools-client -- Core Event Client
+
+A specialized `EventClient` pre-configured with `pluginId: 'tanstack-devtools-core'` and a fixed event map for devtools-internal operations:
+
+- `mounted` -- Fired when the devtools UI has mounted, triggers the server to send current package.json and outdated dependency data.
+- `package-json-read` / `outdated-deps-read` -- Carries project metadata from the Vite server to the devtools UI.
+- `install-devtools` / `devtools-installed` -- Request/response cycle for installing a plugin package from the marketplace.
+- `add-plugin-to-devtools` / `plugin-added` -- Request/response cycle for injecting a plugin into the user's source code.
+- `trigger-toggled` -- Synchronizes the open/closed state of the devtools panel.
+
+This client is a singleton (`devtoolsEventClient`) used by both the core shell and the Vite plugin to coordinate.
+
+## Framework Layer
+
+Each framework adapter is a thin wrapper that bridges its framework's component model to the core Solid.js shell. The pattern is the same across all adapters:
+
+1. **Creates a `TanStackDevtoolsCore` instance** with the user's plugins and config.
+2. **Mounts it to a DOM element** using the framework's lifecycle hooks (`useEffect` in React, `onMounted` in Vue, `onMount` in Solid).
+3. **Converts framework-specific plugin definitions** into the core's DOM-based `render(el, theme)` interface. Each adapter defines its own plugin type (e.g. `TanStackDevtoolsReactPlugin`) that accepts framework-native components, then wraps them in a `render` callback that the core calls with a target DOM element and the current theme.
+4. **Uses the framework's portal/teleport mechanism** to render plugin components into the core's DOM containers:
+   - **React** -- `createPortal()` from `react-dom`
+   - **Vue** -- `<Teleport :to="'#' + plugin.id" />`
+   - **Solid** -- `<Portal mount={el} />`
+   - **Preact** -- Same portal pattern as React
+
+The key insight: the core shell is always Solid.js, but your plugins run in **your** framework. A React plugin is a real React component rendered by React's `createPortal` into a DOM element that the Solid.js shell created. A Vue plugin is a real Vue component rendered by Vue's `<Teleport>`. The adapters bridge this gap so you never need to think about Solid.js unless you want to.
+
+### What an adapter does NOT do
+
+Adapters do not re-implement the devtools UI, manage settings, handle events, or communicate with the server. All of that lives in the core shell. Adapters are intentionally minimal -- typically a single file under 300 lines.
+
+## Build Layer
+
+`@tanstack/devtools-vite` is a collection of Vite plugins that enhance the development experience and clean up production builds. It returns an array of Vite plugins, each handling a specific concern:
+
+### Source injection (`@tanstack/devtools:inject-source`)
+Parses JSX/TSX files with oxc-parser and injects `data-tsd-source` attributes on every JSX element via MagicString. These attributes encode the file path, line number, and column number of each element in source code, which the source inspector feature uses to implement click-to-open-in-editor.
+
+### Server event bus (`@tanstack/devtools:custom-server`)
+Starts a `ServerEventBus` on the Vite dev server. Also sets up middleware for the go-to-source editor integration and bidirectional console piping (client logs appear in the terminal, server logs appear in the browser).
+
+### Production stripping (`@tanstack/devtools:remove-devtools-on-build`)
+On production builds, transforms any file that imports from `@tanstack/*-devtools` to remove the devtools imports and JSX usage entirely. This means devtools add zero bytes to your production bundle.
+
+### Console piping (`@tanstack/devtools:console-pipe-transform`)
+Injects a small runtime into your application's entry file that intercepts `console.log/warn/error/info/debug` calls and forwards them to the Vite dev server via HTTP POST. The server then broadcasts them to connected SSE clients, enabling server-to-browser log forwarding.
+
+### Enhanced logging (`@tanstack/devtools:better-console-logs`)
+Transforms `console.*` calls to prepend source location information (file, line, column), making it possible to click a console log and jump directly to the source.
+
+### Plugin marketplace support (`@tanstack/devtools:event-client-setup`)
+Listens for `install-devtools` events from the devtools UI, runs the package manager to install the requested package, and then uses AST manipulation to inject the plugin import and configuration into the user's source code.
+
+### Connection injection (`@tanstack/devtools:connection-injection`)
+Replaces compile-time placeholders (`__TANSTACK_DEVTOOLS_PORT__`, `__TANSTACK_DEVTOOLS_HOST__`, `__TANSTACK_DEVTOOLS_PROTOCOL__`) in the event bus client code with the actual values from the running dev server, so the client automatically connects to the correct server.
+
+## Data Flow
+
+To tie everything together, here is what happens when a plugin emits an event end-to-end:
+
+1. **Your library code** calls `eventClient.emit('state-update', data)`.
+
+2. **EventClient** constructs a payload `{ type: 'my-plugin:state-update', payload: data, pluginId: 'my-plugin' }` and dispatches it as a `tanstack-dispatch-event` CustomEvent on `window`.
+
+3. **ClientEventBus** receives the `tanstack-dispatch-event`. It does three things:
+   - Dispatches a CustomEvent named `my-plugin:state-update` on `window` so that any `eventClient.on('state-update', callback)` listeners on this page fire immediately.
+   - Dispatches a `tanstack-devtools-global` CustomEvent on `window` so that `onAll()` and `onAllPluginEvents()` listeners fire.
+   - Posts the event to the `BroadcastChannel` so other tabs receive it.
+
+4. **If connected to the server bus**, ClientEventBus also sends the event over WebSocket to `ServerEventBus`.
+
+5. **ServerEventBus** receives the WebSocket message and broadcasts it to all other connected clients (WebSocket and SSE). It also dispatches the event on its server-side `EventTarget` so server-side listeners (e.g., the Vite plugin) can react.
+
+6. **In other browser tabs/windows**, the event arrives via WebSocket from the server (or via BroadcastChannel from step 3). The local `ClientEventBus` dispatches it as a `my-plugin:state-update` CustomEvent, and any `eventClient.on('state-update', callback)` listeners fire with the data.
+
+Without the Vite plugin and server bus, steps 4-6 are skipped, but steps 1-3 still work. This means plugins can communicate within a single page without any server infrastructure -- the server bus just adds cross-tab and cross-process capabilities.
diff --git a/mintlify/devtools/bidirectional-communication.md b/mintlify/devtools/bidirectional-communication.md
new file mode 100644
index 000000000..762308a02
--- /dev/null
+++ b/mintlify/devtools/bidirectional-communication.md
@@ -0,0 +1,162 @@
+---
+title: Bidirectional Communication
+id: bidirectional-communication
+---
+
+Most devtools plugins observe state in one direction: app to devtools. But `EventClient` supports two-way communication. Your devtools panel can also send commands back to the app. This enables features like state editing, action replay, and time-travel debugging.
+
+```mermaid
+graph LR
+    subgraph app["Application"]
+        state["State / Library"]
+    end
+    subgraph ec["EventClient"]
+        direction TB
+        bus["Event Bus"]
+    end
+    subgraph dt["Devtools Panel"]
+        ui["Panel UI"]
+    end
+
+    state -- "emit('state-update')" --> bus
+    bus -- "on('state-update')" --> ui
+    ui -- "emit('reset')" --> bus
+    bus -- "on('reset')" --> state
+```
+
+## Pattern: App to Devtools (Observation)
+
+The standard one-way pattern. Your app emits events, the devtools panel listens.
+
+```ts
+// In your app/library
+eventClient.emit('state-update', { count: 42 })
+
+// In your devtools panel
+eventClient.on('state-update', (e) => {
+  setState(e.payload)
+})
+```
+
+## Pattern: Devtools to App (Commands)
+
+The panel emits command events, the app listens and reacts.
+
+```ts
+// In your devtools panel (e.g., a "Reset" button click handler)
+eventClient.emit('reset', undefined)
+
+// In your app/library
+eventClient.on('reset', () => {
+  store.reset()
+})
+```
+
+You need to define both directions in your event map:
+
+```ts
+type MyEvents = {
+  // App → Devtools
+  'state-update': { count: number }
+  // Devtools → App
+  'reset': void
+  'set-state': { count: number }
+}
+```
+
+## Pattern: Time Travel
+
+The most powerful bidirectional pattern. Combine observation with command-based state restoration.
+
+```mermaid
+sequenceDiagram
+    participant App as Application
+    participant EC as EventClient
+    participant Panel as Time Travel Panel
+
+    App->>EC: emit('snapshot', { state, timestamp })
+    EC->>Panel: on('snapshot') → collect snapshots
+    Note over Panel: User drags slider to past state
+    Panel->>EC: emit('revert', { state })
+    EC->>App: on('revert') → restore state
+    App->>EC: emit('snapshot', { state, timestamp })
+    EC->>Panel: on('snapshot') → update timeline
+```
+
+### Event Map
+
+```ts
+type TimeTravelEvents = {
+  'snapshot': { state: unknown; timestamp: number; label: string }
+  'revert': { state: unknown }
+}
+```
+
+### App Side
+
+Emit snapshots on every state change:
+
+```ts
+function applyAction(action) {
+  state = reducer(state, action)
+
+  timeTravelClient.emit('snapshot', {
+    state: structuredClone(state),
+    timestamp: Date.now(),
+    label: action.type,
+  })
+}
+
+// Listen for revert commands from devtools
+timeTravelClient.on('revert', (e) => {
+  state = e.payload.state
+  rerender()
+})
+```
+
+### Panel Side
+
+Collect snapshots and provide a slider:
+
+```tsx
+function TimeTravelPanel() {
+  const [snapshots, setSnapshots] = useState([])
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    return timeTravelClient.on('snapshot', (e) => {
+      setSnapshots((prev) => [...prev, e.payload])
+      setIndex((prev) => prev + 1)
+    })
+  }, [])
+
+  const handleSliderChange = (newIndex) => {
+    setIndex(newIndex)
+    timeTravelClient.emit('revert', { state: snapshots[newIndex].state })
+  }
+
+  return (
+    <div>
+      <input
+        type="range"
+        min={0}
+        max={snapshots.length - 1}
+        value={index}
+        onChange={(e) => handleSliderChange(Number(e.target.value))}
+      />
+      <p>
+        State at: {snapshots[index]?.label} (
+        {new Date(snapshots[index]?.timestamp).toLocaleTimeString()})
+      </p>
+      <pre>{JSON.stringify(snapshots[index]?.state, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+## Best Practices
+
+- **Keep payloads serializable.** No functions, DOM nodes, or circular references.
+- **Use `structuredClone()` for snapshots** to avoid reference mutations.
+- **Debounce frequent emissions** if needed (e.g., rapid state changes).
+- **Use distinct event suffixes** for observation vs commands (e.g., `state-update` for observation, `set-state` for commands).
diff --git a/mintlify/devtools/building-custom-plugins.md b/mintlify/devtools/building-custom-plugins.md
new file mode 100644
index 000000000..8c1dc80e3
--- /dev/null
+++ b/mintlify/devtools/building-custom-plugins.md
@@ -0,0 +1,235 @@
+---
+title: Building Custom Plugins
+id: building-custom-plugins
+---
+
+You can build custom devtools plugins for any state management library, API client, or internal tool. A plugin consists of two parts:
+
+1. **An EventClient** — sends and receives data between your application code and the devtools panel.
+2. **A panel component** — displays the data inside the devtools UI.
+
+```mermaid
+graph LR
+    subgraph app["Your Application"]
+        lib["Library / State"]
+    end
+    subgraph ec["EventClient"]
+        emit["emit()"]
+        on["on()"]
+    end
+    subgraph dt["Devtools Panel"]
+        panel["Panel Component"]
+    end
+
+    lib -- "State changes" --> emit
+    emit -- "Events" --> panel
+    panel -- "Commands" --> on
+    on -- "Actions" --> lib
+```
+
+The EventClient is framework-agnostic. It works the same in React, Vue, Solid, Preact, or vanilla JavaScript. The panel component can be written in any framework supported by an adapter.
+
+This guide walks through building a custom plugin from scratch using a "store inspector" as a running example.
+
+## Step 1: Define Your Event Map
+
+Start by creating a TypeScript type that maps event names to their payload types:
+
+```ts
+type StoreEvents = {
+  'state-changed': { storeName: string; state: unknown; timestamp: number }
+  'action-dispatched': { storeName: string; action: string; payload: unknown }
+  'reset': void
+}
+```
+
+Each key in the event map is just the event name (the suffix). Do **not** include the `pluginId` in the key — the `EventClient` prepends the `pluginId` automatically when emitting and listening. For example, if `pluginId` is `'store-inspector'` and the key is `'state-changed'`, the fully qualified event dispatched on the bus will be `'store-inspector:state-changed'`.
+
+The value of each key is the payload type. Use `void` for events that carry no data.
+
+## Step 2: Create an EventClient
+
+Extend the base `EventClient` class with your event map:
+
+```ts
+import { EventClient } from '@tanstack/devtools-event-client'
+
+class StoreInspectorClient extends EventClient<StoreEvents> {
+  constructor() {
+    super({ pluginId: 'store-inspector' })
+  }
+}
+
+export const storeInspector = new StoreInspectorClient()
+```
+
+Install the event client package if you haven't already:
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+The constructor accepts additional options beyond `pluginId`:
+
+| Option             | Type      | Default | Description                                      |
+| ------------------ | --------- | ------- | ------------------------------------------------ |
+| `pluginId`         | `string`  | —       | Required. Identifies this plugin in the event system. |
+| `debug`            | `boolean` | `false` | Enable verbose console logging.                  |
+| `enabled`          | `boolean` | `true`  | Whether the client connects to the event bus.    |
+| `reconnectEveryMs` | `number`  | `300`   | Interval (ms) between connection retry attempts. |
+
+See the [Event System](/devtools/event-system) page for the full connection lifecycle details.
+
+## Step 3: Emit Events From Your Code
+
+Call `emit()` from your library code whenever something interesting happens. You pass only the **suffix** part of the event name — the `pluginId` is prepended automatically.
+
+```ts
+function dispatch(action, payload) {
+  // Your library logic
+  state = reducer(state, action, payload)
+
+  // Emit to devtools
+  storeInspector.emit('state-changed', {
+    storeName: 'main',
+    state,
+    timestamp: Date.now(),
+  })
+  storeInspector.emit('action-dispatched', {
+    storeName: 'main',
+    action,
+    payload,
+  })
+}
+```
+
+Common patterns for where to call `emit()`:
+
+- **In state mutations** — emit the new state after every update (as shown above).
+- **In observers or subscriptions** — if your library uses a subscriber/observer pattern, emit from the notification callback.
+- **In middleware** — if your library supports middleware or interceptors, emit from a middleware layer so it works automatically for all operations.
+
+If the devtools are not yet mounted when you emit, events are queued and flushed once the connection succeeds. If the connection never succeeds (e.g., devtools are not present), events are silently dropped after 5 retries. This means you can leave `emit()` calls in your library code without worrying about whether the devtools are active.
+
+## Step 4: Build the Panel Component
+
+Create a component that listens for events via `on()` and renders the data. Here is a React example:
+
+```tsx
+import { useState, useEffect } from 'react'
+import { storeInspector } from './store-inspector-client'
+
+function StoreInspectorPanel() {
+  const [state, setState] = useState<Record<string, unknown>>({})
+  const [actions, setActions] = useState<Array<{ action: string; payload: unknown }>>([])
+
+  useEffect(() => {
+    const cleanupState = storeInspector.on('state-changed', (e) => {
+      setState(prev => ({ ...prev, [e.payload.storeName]: e.payload.state }))
+    })
+    const cleanupActions = storeInspector.on('action-dispatched', (e) => {
+      setActions(prev => [...prev, { action: e.payload.action, payload: e.payload.payload }])
+    })
+    return () => { cleanupState(); cleanupActions() }
+  }, [])
+
+  return (
+    <div>
+      <h3>Current State</h3>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <h3>Action Log</h3>
+      <ul>
+        {actions.map((a, i) => <li key={i}>{a.action}: {JSON.stringify(a.payload)}</li>)}
+      </ul>
+    </div>
+  )
+}
+```
+
+Like `emit()`, the `on()` method takes only the suffix. The callback receives the full event object with a typed `payload` property. Each `on()` call returns a cleanup function that removes the listener.
+
+> [!NOTE]
+> When using plugin factories from `@tanstack/devtools-utils` (covered below), your panel component receives a `theme` prop (`'light' | 'dark'`) so you can adapt your UI to the current devtools theme.
+
+## Step 5: Register the Plugin
+
+Pass your plugin to the devtools component's `plugins` array:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { StoreInspectorPanel } from './StoreInspectorPanel'
+
+function App() {
+  return (
+    <>
+      {/* Your app */}
+      <TanStackDevtools
+        plugins={[
+          {
+            name: 'Store Inspector',
+            render: <StoreInspectorPanel />,
+          },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+The `name` is displayed as the tab title in the devtools sidebar. The `render` field accepts a JSX element (React, Preact) or a component reference (Vue, Solid), depending on your adapter.
+
+You can also pass optional fields:
+
+- **`id`** — A stable identifier for the plugin. If omitted, one is generated from the name.
+- **`defaultOpen`** — Set to `true` to open the plugin's panel automatically on first load.
+
+See the [Plugin Lifecycle](/devtools/plugin-lifecycle) page for the full plugin interface and mount sequence.
+
+## Advanced: Bidirectional Communication
+
+Plugins are not limited to one-way data display. You can also send commands from the devtools panel back to your application — for example, "reset state", "replay action", or "toggle feature flag". The same `EventClient` instance handles both directions: your app emits events that the panel listens to, and the panel emits events that your app listens to.
+
+For a detailed walkthrough with examples, see the [Bidirectional Communication](/devtools/bidirectional-communication) guide.
+
+## Advanced: Plugin Factories
+
+The `@tanstack/devtools-utils` package provides factory functions that simplify plugin creation for each framework:
+
+- `createReactPlugin()` — for React plugins
+- `createSolidPlugin()` — for Solid plugins
+- `createVuePlugin()` — for Vue plugins
+- `createPreactPlugin()` — for Preact plugins
+
+These factories handle the wiring between your component and the devtools container, pass the `theme` prop automatically, and return a `[Plugin, NoOpPlugin]` tuple so you can tree-shake the devtools out of production builds.
+
+For usage details, see the [Using devtools-utils](/devtools/devtools-utils) guide.
+
+## Publishing to the Marketplace
+
+Once your plugin is working, you can share it with the community by publishing it to npm and submitting it to the TanStack Devtools Marketplace. The marketplace is a registry of third-party plugins that users can discover and install directly from the devtools UI.
+
+For submission instructions and the registry format, see [Third-party Plugins](/devtools/third-party-plugins).
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/configuration.md b/mintlify/devtools/configuration.md
new file mode 100644
index 000000000..7fdf48323
--- /dev/null
+++ b/mintlify/devtools/configuration.md
@@ -0,0 +1,166 @@
+---
+title: Configuration
+id: configuration
+---
+
+Both TanStack `DevTools` and `EventClient` can be configured.
+
+> [!IMPORTANT] 
+> All configuration is optional unless marked (required)
+
+## Devtools Component Configuration
+
+The `Devtools` component has two configuration props, regardless of Frameworks these are the same.
+
+- `config` - Configuration for the devtool panel and interaction with it.
+- `eventBusConfig` - Configuration for the event bus.
+
+The `config` object is mainly focused around user interaction with the devtools panel and accepts the following properties:
+
+- `defaultOpen` - If the devtools are open by default
+
+```ts
+{ defaultOpen: boolean }
+```
+
+- `hideUntilHover` - Hides the TanStack devtools trigger until hovered
+
+```ts
+{ hideUntilHover: boolean }
+```
+
+- `position` - The position of the TanStack devtools trigger
+
+```ts
+{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }
+```
+
+- `panelLocation` - The location of the devtools panel
+
+```ts
+{ panelLocation: 'top' | 'bottom' }
+```
+
+- `openHotkey` - The hotkey set to open the devtools
+
+```ts
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta';
+type KeyboardKey = ModifierKey | (string & {});
+
+{ openHotkey: Array<KeyboardKey> }
+```
+
+- `inspectHotkey` - The hotkey set to open the source inspector
+
+```ts
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta';
+type KeyboardKey = ModifierKey | (string & {});
+
+{ inspectHotkey: Array<KeyboardKey> }
+```
+
+- `requireUrlFlag` - Requires a flag present in the url to enable devtools
+
+```ts
+{ requireUrlFlag: boolean }
+```
+
+- `triggerImage` - The image used for the dev tools trigger
+
+```ts
+{ triggerImage: string }
+```
+
+- `urlFlag` - The required flag that must be present in the url to enable devtools.
+
+```ts
+{ urlFlag: string }
+```
+
+The `eventBusConfig` is configuration for the back bone of the devtools, the `EventClient`, and accepts the following properties:
+
+- `debug` - Enables debug mode for the EventBus
+
+```ts
+{ debug: boolean }
+```
+
+- `connectToServerBus` - Optional flag to indicate if the devtools server event bus is available to connect to
+
+```ts
+{ connectToServerBus: boolean }
+```
+
+- `port` - The port at which the client connects to the devtools server event bus
+
+```ts
+{ port: number }
+```
+
+Put together here is an example in react:
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { FormDevtools } from '@tanstack/react-form'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools
+      config={{ hideUntilHover: true }}
+      eventBusConfig={{ debug: true }}
+      plugins={[
+        {
+          name: 'TanStack Form',
+          render: <FormDevtools />,
+          defaultOpen: true,
+        },
+      ]}
+    />
+  </StrictMode>,
+)
+
+```
+
+## EventClient Configuration
+
+Configuration for the `EventClient` is as follows
+
+- `pluginId` (required) - The plugin identifier used by the event bus to direct events to listeners
+
+```ts
+{ pluginId: string }
+```
+
+- `debug` - Enables debug mode for the EventClient
+
+```ts
+{ debug: boolean }
+```
+
+Put together the `EventClient` configuration looks like:
+
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+type EventMap = {
+  'custom-state': { state: string }
+}
+
+class customEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      debug: true,
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+```
+
+More information about EventClient configuration can be found in our [custom-plugins example](/devtools/framework/react/examples/custom-devtools)
diff --git a/mintlify/devtools/devtools-utils.md b/mintlify/devtools/devtools-utils.md
new file mode 100644
index 000000000..e16158488
--- /dev/null
+++ b/mintlify/devtools/devtools-utils.md
@@ -0,0 +1,365 @@
+---
+title: Using devtools-utils
+id: devtools-utils
+---
+
+`@tanstack/devtools-utils` provides factory functions that simplify creating devtools plugins for each framework. Instead of manually wiring up render functions and no-op variants, these helpers produce correctly-typed plugin objects (and their production-safe no-op counterparts) from your components. Each framework has its own subpath export with an API tailored to that framework's conventions.
+
+## Installation
+
+```bash
+npm install @tanstack/devtools-utils
+```
+
+## DevtoolsPanelProps
+
+Every panel component receives a `theme` prop so the panel can match the devtools shell appearance. The interface is defined per-framework in each subpath:
+
+```ts
+interface DevtoolsPanelProps {
+  theme?: 'light' | 'dark'
+}
+```
+
+> The Vue and Svelte variants additionally accept `'system'` as a theme value.
+
+Import it from the framework-specific subpath:
+
+```ts
+// React
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
+
+// Solid
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'
+
+// Preact
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
+
+// Vue
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'
+
+// Svelte
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/svelte'
+
+// Angular
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
+```
+
+## React
+
+### createReactPlugin
+
+Creates a `[Plugin, NoOpPlugin]` tuple from a React component and plugin metadata.
+
+**Signature:**
+
+```ts
+function createReactPlugin(options: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```tsx
+import { createReactPlugin } from '@tanstack/devtools-utils/react'
+
+const [MyPlugin, NoOpPlugin] = createReactPlugin({
+  name: 'My Store',
+  id: 'my-store',
+  defaultOpen: false,
+  Component: ({ theme }) => <MyStorePanel theme={theme} />,
+})
+```
+
+The returned tuple contains two factory functions:
+
+- **`Plugin()`** -- returns a plugin object with `name`, `id`, `defaultOpen`, and a `render` function that renders your `Component` with the current theme.
+- **`NoOpPlugin()`** -- returns a plugin object with the same metadata but a `render` function that renders an empty fragment. Use this for production builds where you want to strip devtools out.
+
+A common pattern for tree-shaking:
+
+```tsx
+const [MyPlugin, NoOpPlugin] = createReactPlugin({ /* ... */ })
+
+const ActivePlugin = process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
+```
+
+### createReactPanel
+
+For library authors shipping a class-based devtools core that exposes `mount(el, theme)` and `unmount()` methods. This factory wraps that class in a React component that handles mounting into a `div`, passing the theme, and cleaning up on unmount.
+
+**Signature:**
+
+```ts
+function createReactPanel<
+  TComponentProps extends DevtoolsPanelProps | undefined,
+  TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    unmount: () => void
+  },
+>(CoreClass: new () => TCoreDevtoolsClass): readonly [Panel, NoOpPanel]
+```
+
+**Usage:**
+
+```tsx
+import { createReactPanel } from '@tanstack/devtools-utils/react'
+
+class MyDevtoolsCore {
+  mount(el: HTMLElement, theme: 'light' | 'dark') {
+    // render your devtools UI into el
+  }
+  unmount() {
+    // cleanup
+  }
+}
+
+const [MyPanel, NoOpPanel] = createReactPanel(MyDevtoolsCore)
+
+// Then use the panel component inside createReactPlugin:
+const [MyPlugin, NoOpPlugin] = createReactPlugin({
+  name: 'My Store',
+  Component: MyPanel,
+})
+```
+
+The returned `Panel` component:
+- Creates a `div` with `height: 100%` and stores a ref to it.
+- Instantiates `CoreClass` on mount and calls `core.mount(el, theme)`.
+- Calls `core.unmount()` on cleanup.
+- Re-mounts when the `theme` prop changes.
+
+`NoOpPanel` renders an empty fragment and does nothing.
+
+## Preact
+
+### createPreactPlugin
+
+Identical API to `createReactPlugin`, using Preact's JSX types. Import from `@tanstack/devtools-utils/preact`.
+
+**Signature:**
+
+```ts
+function createPreactPlugin(options: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```tsx
+import { createPreactPlugin } from '@tanstack/devtools-utils/preact'
+
+const [MyPlugin, NoOpPlugin] = createPreactPlugin({
+  name: 'My Store',
+  id: 'my-store',
+  Component: ({ theme }) => <MyStorePanel theme={theme} />,
+})
+```
+
+The return value and behavior are the same as `createReactPlugin` -- a `[Plugin, NoOpPlugin]` tuple where `Plugin` renders your component and `NoOpPlugin` renders nothing.
+
+### createPreactPanel
+
+Also available for Preact with the same class-based API as `createReactPanel`:
+
+```ts
+import { createPreactPanel } from '@tanstack/devtools-utils/preact'
+
+const [MyPanel, NoOpPanel] = createPreactPanel(MyDevtoolsCore)
+```
+
+## Solid
+
+### createSolidPlugin
+
+Same option-object API as React and Preact, using Solid's JSX types. Import from `@tanstack/devtools-utils/solid`.
+
+**Signature:**
+
+```ts
+function createSolidPlugin(options: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```tsx
+import { createSolidPlugin } from '@tanstack/devtools-utils/solid'
+
+const [MyPlugin, NoOpPlugin] = createSolidPlugin({
+  name: 'My Store',
+  id: 'my-store',
+  Component: (props) => <MyStorePanel theme={props.theme} />,
+})
+```
+
+### createSolidPanel
+
+Solid also provides a class-based panel factory. It uses `createSignal` and `onMount`/`onCleanup` instead of React hooks:
+
+```ts
+import { createSolidPanel } from '@tanstack/devtools-utils/solid'
+
+const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)
+```
+
+## Vue
+
+### createVuePlugin
+
+The Vue factory has a different API from the JSX-based frameworks. It takes a `name` string and a Vue `DefineComponent` as separate arguments rather than an options object.
+
+**Signature:**
+
+```ts
+function createVuePlugin<TComponentProps extends Record<string, any>>(
+  name: string,
+  component: DefineComponent<TComponentProps, {}, unknown>,
+): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```ts
+import { createVuePlugin } from '@tanstack/devtools-utils/vue'
+import MyStorePanel from './MyStorePanel.vue'
+
+const [MyPlugin, NoOpPlugin] = createVuePlugin('My Store', MyStorePanel)
+```
+
+The returned functions differ from the JSX-based variants:
+
+- **`Plugin(props)`** -- returns `{ name, component, props }` where `component` is your Vue component.
+- **`NoOpPlugin(props)`** -- returns `{ name, component: Fragment, props }` where the component is Vue's built-in `Fragment` (renders nothing visible).
+
+Both accept props that get forwarded to the component.
+
+### createVuePanel
+
+For class-based devtools cores, Vue provides `createVuePanel`. It creates a Vue `defineComponent` that handles mounting and unmounting the core class:
+
+```ts
+import { createVuePanel } from '@tanstack/devtools-utils/vue'
+
+const [MyPanel, NoOpPanel] = createVuePanel(MyDevtoolsCore)
+```
+
+The panel component accepts `theme` and `devtoolsProps` as props. It mounts the core instance into a `div` element on `onMounted` and calls `unmount()` on `onUnmounted`.
+
+## Svelte
+
+### createSveltePlugin
+
+The Svelte factory takes a `name` string and a Svelte component as separate arguments, similar to the Vue API.
+
+**Signature:**
+
+```ts
+function createSveltePlugin<TComponentProps extends Record<string, any>>(
+  name: string,
+  component: Component<TComponentProps>,
+): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```ts
+import { createSveltePlugin } from '@tanstack/devtools-utils/svelte'
+import MyStorePanel from './MyStorePanel.svelte'
+
+const [MyPlugin, NoOpPlugin] = createSveltePlugin('My Store', MyStorePanel)
+```
+
+The returned functions:
+
+- **`Plugin(props?)`** -- returns `{ name, component, props }` where `component` is your Svelte component.
+- **`NoOpPlugin(props?)`** -- returns `{ name, component: NoOpComponent, props }` where the component renders nothing visible.
+
+Both accept an optional `props` object that gets forwarded to the component on mount.
+
+### createSveltePanel
+
+For class-based devtools cores, Svelte provides `createSveltePanel`. It creates a wrapper that handles mounting and unmounting the core class:
+
+```ts
+import { createSveltePanel } from '@tanstack/devtools-utils/svelte'
+
+const [MyPanel, NoOpPanel] = createSveltePanel(MyDevtoolsCore)
+```
+
+The panel accepts `theme` and `devtoolsProps` props. It creates a `div` element, mounts the core instance into it, and calls `unmount()` on cleanup.
+
+## Angular
+
+### createAngularPlugin
+
+The Angular factory takes a `name` string and an Angular component class as separate arguments, similar to the Vue API.
+
+**Signature:**
+
+```ts
+function createAngularPlugin(
+  name: string,
+  component: Type<any>,
+): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```ts
+import { createAngularPlugin } from '@tanstack/devtools-utils/angular'
+import { MyStorePanelComponent } from './my-store-panel.component'
+
+const [MyPlugin, NoOpPlugin] = createAngularPlugin('My Store', MyStorePanelComponent)
+```
+
+The returned functions:
+
+- **`Plugin(inputs?)`** -- returns `{ name, component, inputs }` where `component` is your Angular component class.
+- **`NoOpPlugin(inputs?)`** -- returns `{ name, component: NoOpComponent, inputs }` where the component is an empty standalone component (renders nothing visible).
+
+Both accept an optional `inputs` object that gets forwarded to the component via `setInput()`.
+
+### createAngularPanel
+
+For class-based devtools cores, Angular provides `createAngularPanel`. It creates a standalone Angular component that handles mounting and unmounting the core class:
+
+```ts
+import { createAngularPanel } from '@tanstack/devtools-utils/angular'
+
+const [MyPanel, NoOpPanel] = createAngularPanel(MyDevtoolsCore)
+```
+
+The panel component accepts `theme` and `devtoolsProps` as signal inputs. It mounts the core instance into a `div` element using `afterNextRender` and calls `unmount()` via `DestroyRef.onDestroy`.
+
+## When to Use Factories vs Manual Plugin Objects
+
+**Use the factories** when you are building a reusable library plugin that will be published as a package. The factories ensure:
+
+- Consistent plugin object shape across frameworks.
+- A matching `NoOpPlugin` variant for production tree-shaking.
+- Correct typing without manual type annotations.
+
+**Use manual plugin objects** when you are building a one-off internal devtools panel for your application. In that case, passing `name` and `render` directly to the devtools configuration is simpler and avoids the extra abstraction:
+
+```tsx
+// Manual approach -- fine for one-off panels
+{
+  name: 'App State',
+  render: (el, theme) => <MyPanel theme={theme} />,
+}
+```
+
+The factory approach becomes more valuable as you add `id`, `defaultOpen`, and need both a development and production variant of the same plugin.
diff --git a/mintlify/devtools/event-system.md b/mintlify/devtools/event-system.md
new file mode 100644
index 000000000..50041cb43
--- /dev/null
+++ b/mintlify/devtools/event-system.md
@@ -0,0 +1,171 @@
+---
+title: Event System
+id: event-system
+---
+
+The event system is how plugins communicate with the devtools UI and with the application. It is built on `EventClient`, a type-safe event emitter/listener from `@tanstack/devtools-event-client`. It is completely framework-agnostic.
+
+## EventClient Basics
+
+Create a typed `EventClient` by extending the base class with your event map:
+
+```ts
+import { EventClient } from '@tanstack/devtools-event-client'
+
+type MyEvents = {
+  'state-update': { count: number }
+  'action': { type: string }
+}
+
+class MyEventClient extends EventClient<MyEvents> {
+  constructor() {
+    super({ pluginId: 'my-plugin' })
+  }
+}
+
+export const myEventClient = new MyEventClient()
+```
+
+The constructor accepts the following options:
+
+| Option             | Type      | Default | Description                                          |
+| ------------------ | --------- | ------- | ---------------------------------------------------- |
+| `pluginId`         | `string`  | —       | Required. Identifies this plugin in the event system. |
+| `debug`            | `boolean` | `false` | Enable debug logging to the console.                 |
+| `enabled`          | `boolean` | `true`  | Whether the client connects to the bus at all.       |
+| `reconnectEveryMs` | `number`  | `300`   | Interval (ms) between connection retry attempts.     |
+
+## Event Maps and Type Safety
+
+The generic `EventMap` type maps event names to payload types. Keys are event suffixes only — the `pluginId` is prepended automatically by `EventClient` when emitting and listening:
+
+```ts
+type MyEvents = {
+  'state-update': { count: number }
+  'action': { type: string }
+}
+```
+
+TypeScript enforces correct event names and payload shapes at compile time. You get autocomplete on event names and type errors if the payload does not match the declared shape.
+
+## Emitting Events
+
+Call `eventClient.emit(eventSuffix, payload)` to dispatch an event. You pass only the **suffix** (the part after the colon). The `pluginId` is prepended automatically:
+
+```ts
+// If pluginId is 'my-plugin' and event map has 'state-update'
+myEventClient.emit('state-update', { count: 42 })
+// Dispatches event named 'my-plugin:state-update'
+```
+
+If the client is not yet connected to the bus, the event is queued and flushed once the connection succeeds (see [Connection Lifecycle](#connection-lifecycle) below).
+
+## Listening to Events
+
+There are three methods for subscribing to events. Each returns a cleanup function you call to unsubscribe.
+
+### `on(eventSuffix, callback)`
+
+Listen to a specific event from this plugin. Like `emit`, you pass only the suffix:
+
+```ts
+const cleanup = myEventClient.on('state-update', (event) => {
+  console.log(event.payload.count) // typed as { count: number }
+})
+
+// Later: stop listening
+cleanup()
+```
+
+The callback receives the full event object:
+
+```ts
+{
+  type: 'my-plugin:state-update', // fully qualified event name
+  payload: { count: number },     // typed payload
+  pluginId: 'my-plugin'           // originating plugin
+}
+```
+
+### `onAll(callback)`
+
+Listen to **all** events from **all** plugins. Useful for logging, debugging, or building cross-plugin features:
+
+```ts
+const cleanup = myEventClient.onAll((event) => {
+  console.log(event.type, event.payload)
+})
+```
+
+### `onAllPluginEvents(callback)`
+
+Listen to all events from **this** plugin only (filtered by `pluginId`):
+
+```ts
+const cleanup = myEventClient.onAllPluginEvents((event) => {
+  // Only fires for events where event.pluginId === 'my-plugin'
+  console.log(event.type, event.payload)
+})
+```
+
+## Connection Lifecycle
+
+The `EventClient` manages its connection to the event bus automatically:
+
+```mermaid
+stateDiagram-v2
+    [*] --> Queueing: First emit() call
+    Queueing --> Connecting: Dispatches tanstack-connect
+    Connecting --> Retrying: No response
+    Retrying --> Connecting: Every 300ms (up to 5×)
+    Connecting --> Connected: tanstack-connect-success
+    Connected --> Connected: Emit events directly
+    Queueing --> Connected: Flush queued events
+    Retrying --> Failed: 5 retries exhausted
+    Failed --> [*]: Subsequent emits dropped
+```
+
+1. **Queueing** — When you call `emit()` before the client is connected, events are queued in memory.
+2. **Connection** — On the first `emit()`, the client dispatches a `tanstack-connect` event and starts a retry loop.
+3. **Retries** — The client retries every `reconnectEveryMs` (default: 300ms) up to a maximum of 5 attempts.
+4. **Flush** — Once a `tanstack-connect-success` event is received, all queued events are flushed to the bus in order.
+5. **Failure** — If all 5 retries are exhausted without a successful connection, the client stops retrying. Subsequent `emit()` calls are silently dropped (they will not be queued).
+
+### The `enabled` Option
+
+When `enabled` is set to `false`, the EventClient is effectively inert — `emit()` is a no-op and `on()` returns a no-op cleanup function. This is useful for conditionally disabling devtools instrumentation (e.g., in production).
+
+## Server Event Bus
+
+When `connectToServerBus: true` is set in the component's `eventBusConfig` prop, the `ClientEventBus` connects to the `ServerEventBus` started by the Vite plugin (default port 4206). This enables server-side features like console piping and the plugin marketplace.
+
+```tsx
+<TanStackDevtools
+  eventBusConfig={{
+    connectToServerBus: true,
+    debug: false,
+    port: 4206, // default
+  }}
+/>
+```
+
+Without the Vite plugin running, the `EventClient` still works for same-page communication between your application code and the devtools panel. The server bus is only needed for features that bridge the browser and the dev server.
+
+## Debugging
+
+Set `debug: true` in the `EventClient` constructor or in `eventBusConfig` to enable verbose console logging. Debug logs are prefixed with `[tanstack-devtools:{pluginId}]` for plugin events and `[tanstack-devtools:client-bus]` for the client bus.
+
+```ts
+const myEventClient = new MyEventClient()
+// In the constructor: super({ pluginId: 'my-plugin', debug: true })
+```
+
+Example output:
+
+```
+🌴 [tanstack-devtools:client-bus] Initializing client event bus
+🌴 [tanstack-devtools:my-plugin] Registered event to bus my-plugin:state-update
+🌴 [tanstack-devtools:my-plugin] Emitting event my-plugin:state-update
+```
+
+This is helpful when diagnosing issues with event delivery, connection timing, or verifying that your event map is wired up correctly.
diff --git a/mintlify/devtools/framework/angular/adapter.md b/mintlify/devtools/framework/angular/adapter.md
new file mode 100644
index 000000000..306eab8fd
--- /dev/null
+++ b/mintlify/devtools/framework/angular/adapter.md
@@ -0,0 +1,82 @@
+---
+title: TanStack Devtools Angular Adapter
+id: adapter
+---
+
+The Angular adapter wraps `TanStackDevtoolsCore` in an Angular standalone component, using Angular's `createComponent` and `ApplicationRef.attachView` to dynamically render plugins into the correct DOM containers managed by the devtools shell.
+
+## Installation
+
+```sh
+npm install @tanstack/angular-devtools
+```
+
+## Component Inputs
+
+The `TanStackDevtools` (selector: `tanstack-devtools`) accepts the following signal-based inputs, defined by the `TanStackDevtoolsAngularInit` interface:
+
+| Input | Type | Description |
+| --- | --- | --- |
+| `plugins` | `TanStackDevtoolsAngularPlugin[]` | Array of plugins to render inside the devtools panel. |
+| `config` | `Partial<TanStackDevtoolsConfig>` | Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage. |
+| `eventBusConfig` | `ClientEventBusConfig` | Configuration for the TanStack Devtools client event bus. |
+
+## Plugin Type
+
+Each plugin in the `plugins` array must conform to the `TanStackDevtoolsAngularPlugin` type:
+
+```ts
+type TanStackDevtoolsAngularPlugin = {
+  id?: string
+  render: TanStackDevtoolsAngularPluginRender
+  name: string | Type<any>
+  inputs?: Record<string, any>
+  defaultOpen?: boolean
+}
+```
+
+| Field         | Type | Description |
+|---------------| --- | --- |
+| `id`          | `string` (optional) | Unique identifier for the plugin. |
+| `render`      | `Type<any>` | The Angular component class to render as the plugin panel content. |
+| `name`        | `string \| Type<any>` | Display name for the tab title. Can be a plain string or an Angular component class for custom rendering. |
+| `inputs`      | `Record<string, any>` (optional) | Additional inputs passed to the plugin component via `setInput()`. |
+| `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. |
+
+## Key Differences from Other Frameworks
+
+The Angular adapter uses `component` (an Angular component class reference) instead of `render` (a JSX element) in plugin definitions. Inputs are provided through the `inputs` field and bound to the component with `setInput()`, rather than being embedded directly in a JSX expression or passed via `v-bind`.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
+import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtools],
+  template: `
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class App {
+  plugins = [
+    {
+      name: 'Angular Query',
+      render: AngularQueryDevtoolsPanel,
+      inputs: { style: 'height: 100%' },
+    },
+  ]
+}
+```
+
+## Exports
+
+The `@tanstack/angular-devtools` package exports:
+
+- **`TanStackDevtools`** -- The main Angular standalone component that renders the devtools panel.
+- **`TanStackDevtoolsAngularPlugin`** (type) -- The type for plugin definitions.
+- **`TanStackDevtoolsAngularInit`** (type) -- The inputs interface for the `TanStackDevtoolsComponent`.
+
+The package depends on `@tanstack/devtools` (the core package), which provides `TanStackDevtoolsCore`, `TanStackDevtoolsConfig`, `ClientEventBusConfig`, and other core utilities.
diff --git a/mintlify/devtools/framework/angular/basic-setup.md b/mintlify/devtools/framework/angular/basic-setup.md
new file mode 100644
index 000000000..67bad6c05
--- /dev/null
+++ b/mintlify/devtools/framework/angular/basic-setup.md
@@ -0,0 +1,61 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack Devtools provides you with an easy-to-use and modular client that allows you to compose multiple devtools into one easy-to-use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/angular-devtools) library. This will install the devtools core as well as provide you with the Angular-specific adapter.
+
+```bash
+npm i @tanstack/angular-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtoolsComponent` from `@tanstack/angular-devtools` and add it to your template.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtools],
+  template: `
+    <app-content />
+    <tanstack-devtools />
+  `,
+})
+export class App {}
+```
+
+Import the desired devtools and provide them to the `TanStackDevtools` via the `[plugins]` input along with a label for the menu.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
+import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
+import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtools],
+  template: `
+    <app-content />
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class AppComponent {
+  plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    {
+      name: 'Angular Query',
+      render: AngularQueryDevtoolsPanel,
+    },
+  ]
+}
+```
+
+Finally, add any additional configuration you desire to the `TanStackDevtools`. More information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
diff --git a/mintlify/devtools/framework/angular/guides/custom-plugins.md b/mintlify/devtools/framework/angular/guides/custom-plugins.md
new file mode 100644
index 000000000..24807cf66
--- /dev/null
+++ b/mintlify/devtools/framework/angular/guides/custom-plugins.md
@@ -0,0 +1,241 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/react/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT]
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel. For Angular, create a standalone component that listens to events from the `EventClient`.
+
+DevtoolPanel.ts
+```typescript
+import { Component, OnDestroy, OnInit, signal } from '@angular/core'
+import { DevtoolsEventClient } from './eventClient'
+
+@Component({
+  selector: 'devtool-panel',
+  standalone: true,
+  template: `
+    <div>
+      <div>{{ state()?.count }}</div>
+      <div>{{ stateHistory() }}</div>
+    </div>
+  `,
+})
+export class DevtoolPanel implements OnInit, OnDestroy {
+  state = signal<{ count: number; history: number[] } | undefined>(undefined)
+  private cleanup?: () => void
+
+  get stateHistory() {
+    return JSON.stringify(this.state()?.history)
+  }
+
+  ngOnInit() {
+    this.cleanup = DevtoolsEventClient.on('counter-state', (e) => {
+      this.state.set(e.payload)
+    })
+  }
+
+  ngOnDestroy() {
+    this.cleanup?.()
+  }
+}
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/angular/basic-setup) for a more documented guide go check it out.
+
+app.component.ts
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
+import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
+import { DevtoolPanelComponent } from './devtool-panel.component'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtools],
+  template: `
+    <app-content />
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class AppComponent {
+  plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    { name: 'Custom devtools', component: DevtoolPanel },
+  ]
+}
+```
+
+## Debugging
+
+Both the `TanStackDevtools` and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtools debugging mode can be activated like so:
+```typescript
+@Component({
+  template: `
+    <tanstack-devtools
+      [eventBusConfig]="{ debug: true }"
+      [plugins]="plugins"
+    />
+  `,
+  imports: [TanStackDevtoolsComponent],
+})
+export class App {
+  plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    { name: 'Custom devtools', component: DevtoolPanel },
+  ]
+}
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+[tanstack-devtools:client-bus] Initializing client event bus
+
+[tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/framework/angular/reference/index.md b/mintlify/devtools/framework/angular/reference/index.md
new file mode 100644
index 000000000..c37cd7a19
--- /dev/null
+++ b/mintlify/devtools/framework/angular/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Angular Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/angular/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/preact/adapter.md b/mintlify/devtools/framework/preact/adapter.md
new file mode 100644
index 000000000..e490fa973
--- /dev/null
+++ b/mintlify/devtools/framework/preact/adapter.md
@@ -0,0 +1,16 @@
+---
+title: TanStack Devtools Preact Adapter
+id: adapter
+---
+
+If you are using TanStack Devtools in a Preact application, we recommend using the Preact Adapter. The Preact Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the Preact Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/preact-devtools
+```
+
+## Preact Hooks
+
+TODO
diff --git a/mintlify/devtools/framework/preact/basic-setup.md b/mintlify/devtools/framework/preact/basic-setup.md
new file mode 100644
index 000000000..d91fc0432
--- /dev/null
+++ b/mintlify/devtools/framework/preact/basic-setup.md
@@ -0,0 +1,69 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/preact-devtools) library, this will install the devtools core as well as provide you framework specific adapters.
+
+```bash
+npm i @tanstack/preact-devtools
+```
+
+Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/preact-devtools).
+
+```tsx
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+import { render } from 'preact'
+
+import App from './App'
+
+render(
+  <>
+    <App />
+
+    <TanStackDevtools />
+  </>,
+  document.getElementById('root')!,
+)
+```
+
+Import the desired devtools and provide it to the `TanStackDevtools` component along with a label for the menu.
+
+Currently TanStack offers:
+
+- `QueryDevtools`
+- `RouterDevtools`
+- `PacerDevtools`
+- `FormDevtools` [coming soon](https://github.com/TanStack/form/pull/1692)
+
+```tsx
+import { render } from 'preact'
+
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+
+import App from './App'
+
+render(
+  <>
+    <App />
+
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'Your Plugin',
+          render: <YourPluginComponent />,
+        },
+      ]}
+    />
+  </>,
+  document.getElementById('root')!,
+)
+```
+
+Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
+
+A complete working example can be found in our [basic example](/devtools/framework/preact/examples/basic).
diff --git a/mintlify/devtools/framework/preact/examples/basic.md b/mintlify/devtools/framework/preact/examples/basic.md
new file mode 100644
index 000000000..69c859883
--- /dev/null
+++ b/mintlify/devtools/framework/preact/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/preact/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/preact/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/preact/examples/custom-devtools.md b/mintlify/devtools/framework/preact/examples/custom-devtools.md
new file mode 100644
index 000000000..d044a5e02
--- /dev/null
+++ b/mintlify/devtools/framework/preact/examples/custom-devtools.md
@@ -0,0 +1,12 @@
+---
+title: "Custom Devtools"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/preact/examples/custom-devtools)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/preact/custom-devtools)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/preact/guides/custom-plugins.md b/mintlify/devtools/framework/preact/guides/custom-plugins.md
new file mode 100644
index 000000000..f174bf49b
--- /dev/null
+++ b/mintlify/devtools/framework/preact/guides/custom-plugins.md
@@ -0,0 +1,228 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/preact/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT] 
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
+
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
+
+DevtoolsPanel.tsx
+```tsx
+import { useEffect, useState } from 'preact/hooks'
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function DevtoolPanel() {
+  const [state, setState] = useState<{ count: number; history: number[] } | undefined>()
+
+  useEffect(() => {
+    // subscribe to the emitted event
+    const cleanup = DevtoolsEventClient.on("counter-state", e => setState(e.payload))
+    return cleanup
+  }, [])
+
+  return (
+    <div>
+      <div>{state?.count}</div>
+      <div>{JSON.stringify(state?.history)}</div>
+    </div>
+  )
+}
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/preact/basic-setup) for a more documented guide go check it out. As well as the complete [custom-devtools example](/devtools/framework/preact/examples/custom-devtools) in our examples section.
+
+Main.tsx
+```tsx
+import { render } from 'preact'
+import { DevtoolPanel } from './DevtoolPanel'
+
+render(
+  <>
+    <App />
+
+    <TanStackDevtools
+      plugins={[
+        {
+          // Name it what you like, this is how it will appear in the Menu
+          name: 'Custom devtools',
+          render: <DevtoolPanel />,
+        },
+      ]}
+    />
+  </>,
+  document.getElementById('root')!,
+)
+
+```
+
+## Debugging
+
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtool's debugging mode can be activated like so:
+```tsx
+<TanStackDevtools
+  eventBusConfig={{ debug: true }}
+  plugins={[
+    {
+      // call it what you like, this is how it will appear in the Menu
+      name: 'Custom devtools',
+      render: <DevtoolPanel />,
+    },
+  ]}
+/>
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+🌴 [tanstack-devtools:client-bus] Initializing client event bus
+
+🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/framework/preact/reference/index.md b/mintlify/devtools/framework/preact/reference/index.md
new file mode 100644
index 000000000..05ddcadd5
--- /dev/null
+++ b/mintlify/devtools/framework/preact/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Preact Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/preact/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/react/adapter.md b/mintlify/devtools/framework/react/adapter.md
new file mode 100644
index 000000000..bb5426bdc
--- /dev/null
+++ b/mintlify/devtools/framework/react/adapter.md
@@ -0,0 +1,82 @@
+---
+title: TanStack Devtools React Adapter
+id: adapter
+---
+
+If you are using TanStack Devtools in a React application, we recommend using the React Adapter. The React Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the React Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/react-devtools
+```
+
+## Component: TanStackDevtools
+
+The main React component for rendering devtools. It accepts a single props object of type `TanStackDevtoolsReactInit`:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `plugins` | `TanStackDevtoolsReactPlugin[]` | Array of plugins to display in the devtools panel |
+| `config` | `TanStackDevtoolsReactConfig` | Devtools UI configuration (position, hotkeys, theme, custom trigger, etc.) |
+| `eventBusConfig` | `ClientEventBusConfig` | Event bus connection settings for communicating with the server bus |
+
+## Plugin Type: TanStackDevtoolsReactPlugin
+
+Each plugin describes a tab in the devtools panel:
+
+```ts
+type PluginRender =
+  | JSX.Element
+  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+
+type TanStackDevtoolsReactPlugin = {
+  id?: string
+  name: string | PluginRender
+  render: PluginRender
+  defaultOpen?: boolean
+}
+```
+
+- **`render`** can be a JSX element (simplest -- just pass `<YourPanel />`) or a function that receives the container element and current theme. The function form is useful when you need to access the raw DOM element or respond to theme changes.
+- **`name`** works the same way -- use a string for plain text, or JSX / a function for custom tab titles.
+- **`id`** is an optional unique identifier. If omitted, it is generated from the name.
+- **`defaultOpen`** marks the plugin as initially active when no other plugins are open.
+
+## Usage Example
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <TanStackDevtools
+        config={{ position: 'bottom-right', hideUntilHover: true }}
+        eventBusConfig={{ connectToServerBus: true }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+            defaultOpen: true,
+          },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## RSC Compatibility
+
+The adapter includes a `'use client'` directive at the top of its entry file, making it compatible with React Server Components. You can import it directly in your client components without needing to add your own `'use client'` boundary.
+
+## Exports
+
+The `@tanstack/react-devtools` package exports:
+
+- **`TanStackDevtools`** -- the main component
+- **`TanStackDevtoolsReactPlugin`** -- type for plugin objects
+- **`TanStackDevtoolsReactInit`** -- type for the component's props
diff --git a/mintlify/devtools/framework/react/basic-setup.md b/mintlify/devtools/framework/react/basic-setup.md
new file mode 100644
index 000000000..d24d84035
--- /dev/null
+++ b/mintlify/devtools/framework/react/basic-setup.md
@@ -0,0 +1,79 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/react-devtools) library, this will install the devtools core as well as provide you framework specific adapters.
+
+```bash
+npm i @tanstack/react-devtools
+```
+
+Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/react-devtools).
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools />
+  </StrictMode>,
+)
+```
+
+Import the desired devtools and provide it to the `TanStackDevtools` component along with a label for the menu.
+
+Currently TanStack offers:
+
+- `QueryDevtools`
+- `RouterDevtools`
+- `PacerDevtools`
+- `FormDevtools` [coming soon](https://github.com/TanStack/form/pull/1692)
+
+```tsx
+import { createRoot } from 'react-dom/client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'
+
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Form',
+          render: <ReactFormDevtoolsPanel />,
+        },
+      ]}
+    />
+  </StrictMode>,
+)
+```
+
+Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
+
+A complete working example can be found in our [basic example](/devtools/framework/react/examples/basic).
diff --git a/mintlify/devtools/framework/react/examples/a11y-devtools.md b/mintlify/devtools/framework/react/examples/a11y-devtools.md
new file mode 100644
index 000000000..6f74c8641
--- /dev/null
+++ b/mintlify/devtools/framework/react/examples/a11y-devtools.md
@@ -0,0 +1,12 @@
+---
+title: "a11y"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/react/a11y-devtools)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/react/examples/basic.md b/mintlify/devtools/framework/react/examples/basic.md
new file mode 100644
index 000000000..9bddcb6e0
--- /dev/null
+++ b/mintlify/devtools/framework/react/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/react/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/react/examples/custom-devtools.md b/mintlify/devtools/framework/react/examples/custom-devtools.md
new file mode 100644
index 000000000..ad05ee331
--- /dev/null
+++ b/mintlify/devtools/framework/react/examples/custom-devtools.md
@@ -0,0 +1,12 @@
+---
+title: "Custom Devtools"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/react/custom-devtools)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/react/examples/start.md b/mintlify/devtools/framework/react/examples/start.md
new file mode 100644
index 000000000..5d2bfee97
--- /dev/null
+++ b/mintlify/devtools/framework/react/examples/start.md
@@ -0,0 +1,12 @@
+---
+title: "TanStack Start"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/react/examples/start)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/react/start)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/react/guides/custom-plugins.md b/mintlify/devtools/framework/react/guides/custom-plugins.md
new file mode 100644
index 000000000..34474a62e
--- /dev/null
+++ b/mintlify/devtools/framework/react/guides/custom-plugins.md
@@ -0,0 +1,225 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/react/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT] 
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
+
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
+
+DevtoolsPanel.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function DevtoolPanel() {
+  const [state, setState] = useState()
+
+  useEffect(() => {
+    // subscribe to the emitted event
+    const cleanup = DevtoolsEventClient.on("counter-state", e => setState(e.payload))
+    return cleanup
+  }, [])
+
+  return (
+    <div>
+      <div>{state.count}</div>
+      <div>{JSON.stringify(state.history)}</div>
+    </div>
+  )
+}
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/react/basic-setup) for a more documented guide go check it out. As well as the complete [custom-devtools example](/devtools/framework/react/examples/custom-devtools) in our examples section.
+
+Main.tsx
+```tsx
+import { DevtoolPanel } from './DevtoolPanel'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools
+      plugins={[
+        {
+          // Name it what you like, this is how it will appear in the Menu
+          name: 'Custom devtools',
+          render: <DevtoolPanel />,
+        },
+      ]}
+    />
+  </StrictMode>,
+)
+
+```
+
+## Debugging
+
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtool's debugging mode can be activated like so:
+```tsx
+<TanStackDevtools
+  eventBusConfig={{ debug: true }}
+  plugins={[
+    {
+      // call it what you like, this is how it will appear in the Menu
+      name: 'Custom devtools',
+      render: <DevtoolPanel />,
+    },
+  ]}
+/>
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+🌴 [tanstack-devtools:client-bus] Initializing client event bus
+
+🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/framework/react/reference/index.md b/mintlify/devtools/framework/react/reference/index.md
new file mode 100644
index 000000000..be34438fc
--- /dev/null
+++ b/mintlify/devtools/framework/react/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "React Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/react/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/solid/adapter.md b/mintlify/devtools/framework/solid/adapter.md
new file mode 100644
index 000000000..cb6f1641b
--- /dev/null
+++ b/mintlify/devtools/framework/solid/adapter.md
@@ -0,0 +1,16 @@
+---
+title: TanStack Devtools Solid Adapter
+id: adapter
+---
+
+If you are using TanStack Devtools in a Solid application, we recommend using the Solid Adapter. The Solid Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the Solid Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/solid-devtools
+```
+
+## Solid Hooks
+
+TODO
diff --git a/mintlify/devtools/framework/solid/basic-setup.md b/mintlify/devtools/framework/solid/basic-setup.md
new file mode 100644
index 000000000..0dd5e9c93
--- /dev/null
+++ b/mintlify/devtools/framework/solid/basic-setup.md
@@ -0,0 +1,73 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/solid-devtools) library, this will install the devtools core as well as provide you framework specific adapters.
+
+```bash
+npm i @tanstack/solid-devtools
+```
+
+Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/solid-devtools).
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools />
+  </StrictMode>,
+)
+```
+
+Import the desired devtools and provide it to the `TanStackDevtools` component along with a label for the menu.
+
+Currently TanStack offers:
+
+- `QueryDevtools`
+- `RouterDevtools`
+- `FormDevtools`
+
+```tsx
+import { render } from 'solid-js/web';
+
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+
+import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'
+
+import App from './App'
+
+render(() => (
+  <>
+    <App />
+
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack router',
+          render: () => <TanStackRouterDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Form',
+          render: () => <SolidFormDevtoolsPanel />,
+        },
+      ]}
+    />
+  </>
+), document.getElementById('root')!)
+```
+
+Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
+
+A complete working example can be found in our [examples section](/devtools/framework/solid/examples).
diff --git a/mintlify/devtools/framework/solid/examples.md b/mintlify/devtools/framework/solid/examples.md
new file mode 100644
index 000000000..b63b79d49
--- /dev/null
+++ b/mintlify/devtools/framework/solid/examples.md
@@ -0,0 +1,9 @@
+---
+title: "Examples"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/solid/examples)
+- [Browse the pinned upstream repository](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
diff --git a/mintlify/devtools/framework/solid/examples/basic.md b/mintlify/devtools/framework/solid/examples/basic.md
new file mode 100644
index 000000000..e32922a2e
--- /dev/null
+++ b/mintlify/devtools/framework/solid/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/solid/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/solid/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/solid/guides/custom-plugins.md b/mintlify/devtools/framework/solid/guides/custom-plugins.md
new file mode 100644
index 000000000..da2ed7189
--- /dev/null
+++ b/mintlify/devtools/framework/solid/guides/custom-plugins.md
@@ -0,0 +1,221 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/react/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT]
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
+
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
+
+DevtoolPanel.tsx
+```tsx
+import { createSignal, onCleanup } from 'solid-js'
+import { DevtoolsEventClient } from './eventClient'
+
+export function DevtoolPanel() {
+  const [state, setState] = createSignal<{ count: number; history: number[] }>()
+
+  const cleanup = DevtoolsEventClient.on('counter-state', (e) => setState(e.payload))
+  onCleanup(cleanup)
+
+  return (
+    <div>
+      <div>{state()?.count}</div>
+      <div>{JSON.stringify(state()?.history)}</div>
+    </div>
+  )
+}
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/solid/basic-setup) for a more documented guide go check it out.
+
+index.tsx
+```tsx
+import { render } from 'solid-js/web'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { DevtoolPanel } from './DevtoolPanel'
+
+render(() => (
+  <>
+    <App />
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'Custom devtools',
+          render: () => <DevtoolPanel />,
+        },
+      ]}
+    />
+  </>
+), document.getElementById('root')!)
+```
+
+## Debugging
+
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtool's debugging mode can be activated like so:
+```tsx
+<TanStackDevtools
+  eventBusConfig={{ debug: true }}
+  plugins={[
+    {
+      name: 'Custom devtools',
+      render: () => <DevtoolPanel />,
+    },
+  ]}
+/>
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+[tanstack-devtools:client-bus] Initializing client event bus
+
+[tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/framework/solid/reference/index.md b/mintlify/devtools/framework/solid/reference/index.md
new file mode 100644
index 000000000..589e88c55
--- /dev/null
+++ b/mintlify/devtools/framework/solid/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Solid Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/solid/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/solif/examples/a11y-devtools.md b/mintlify/devtools/framework/solif/examples/a11y-devtools.md
new file mode 100644
index 000000000..acd05f60d
--- /dev/null
+++ b/mintlify/devtools/framework/solif/examples/a11y-devtools.md
@@ -0,0 +1,12 @@
+---
+title: "A11y"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/solif/examples/a11y-devtools)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/svelte/adapter.md b/mintlify/devtools/framework/svelte/adapter.md
new file mode 100644
index 000000000..bc77594aa
--- /dev/null
+++ b/mintlify/devtools/framework/svelte/adapter.md
@@ -0,0 +1,76 @@
+---
+title: TanStack Devtools Svelte Adapter
+id: adapter
+---
+
+The Svelte adapter wraps `TanStackDevtoolsCore` in a Svelte 5 component, using Svelte's `mount()` and `unmount()` APIs to dynamically render plugins into the correct DOM containers managed by the devtools shell.
+
+## Installation
+
+```sh
+npm install @tanstack/svelte-devtools
+```
+
+## Component Props
+
+The `TanStackDevtools` component accepts the following props, defined by the `TanStackDevtoolsSvelteInit` interface:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `plugins` | `TanStackDevtoolsSveltePlugin[]` | Array of plugins to render inside the devtools panel. |
+| `config` | `Partial<TanStackDevtoolsConfig>` | Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage. |
+| `eventBusConfig` | `ClientEventBusConfig` | Configuration for the TanStack Devtools client event bus. |
+
+## Plugin Type
+
+Each plugin in the `plugins` array must conform to the `TanStackDevtoolsSveltePlugin` type:
+
+```ts
+type TanStackDevtoolsSveltePlugin = {
+  id?: string
+  component: Component<any>
+  name: string | Component<any>
+  props?: Record<string, any>
+  defaultOpen?: boolean
+}
+```
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `string` (optional) | Unique identifier for the plugin. |
+| `component` | `Component<any>` | The Svelte component to render as the plugin panel content. |
+| `name` | `string \| Component<any>` | Display name for the tab title. Can be a plain string or a Svelte component for custom rendering. |
+| `props` | `Record<string, any>` (optional) | Additional props passed to the plugin component on mount. |
+| `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. |
+
+## Key Difference from Other Frameworks
+
+The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Props are provided through the `props` field and passed to the component via Svelte's `mount()` API, rather than being embedded directly in a JSX expression.
+
+```svelte
+<!-- Svelte: pass component reference + props -->
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'
+
+  const plugins = [
+    {
+      name: 'Svelte Query',
+      component: SvelteQueryDevtoolsPanel,
+      props: { style: 'height: 100%' },
+    },
+  ]
+</script>
+
+<TanStackDevtools {plugins} />
+```
+
+## Exports
+
+The `@tanstack/svelte-devtools` package exports:
+
+- **`TanStackDevtools`** -- The main Svelte component that renders the devtools panel.
+- **`TanStackDevtoolsSveltePlugin`** (type) -- The type for plugin definitions.
+- **`TanStackDevtoolsSvelteInit`** (type) -- The props interface for the `TanStackDevtools` component.
+
+The package depends on `@tanstack/devtools` (the core package), which provides `TanStackDevtoolsCore`, `TanStackDevtoolsConfig`, `ClientEventBusConfig`, and other core utilities.
diff --git a/mintlify/devtools/framework/svelte/basic-setup.md b/mintlify/devtools/framework/svelte/basic-setup.md
new file mode 100644
index 000000000..b7c3abad2
--- /dev/null
+++ b/mintlify/devtools/framework/svelte/basic-setup.md
@@ -0,0 +1,53 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack Devtools provides you with an easy-to-use and modular client that allows you to compose multiple devtools into one easy-to-use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/svelte-devtools) library. This will install the devtools core as well as provide you with the Svelte-specific adapter.
+
+```bash
+npm i @tanstack/svelte-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtools` component from `@tanstack/svelte-devtools` and add it to your template.
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools />
+```
+
+Import the desired devtools and provide them to the `TanStackDevtools` component via the `plugins` prop along with a label for the menu.
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
+  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'
+
+  const plugins: TanStackDevtoolsSveltePlugin[] = [
+    {
+      name: 'Svelte Query',
+      component: SvelteQueryDevtoolsPanel,
+    },
+  ]
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools {plugins} />
+```
+
+> Note: The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Additional props can be provided via the `props` field and are passed to the component on mount.
+
+Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
diff --git a/mintlify/devtools/framework/svelte/guides/custom-plugins.md b/mintlify/devtools/framework/svelte/guides/custom-plugins.md
new file mode 100644
index 000000000..1ee687b10
--- /dev/null
+++ b/mintlify/devtools/framework/svelte/guides/custom-plugins.md
@@ -0,0 +1,203 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/react/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT]
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel. For Svelte, create a component that listens to events from the `EventClient` using Svelte 5 runes.
+
+DevtoolPanel.svelte
+```svelte
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import { DevtoolsEventClient } from './eventClient'
+
+  let state = $state<{ count: number; history: number[] } | undefined>(undefined)
+  let cleanup: (() => void) | undefined
+
+  onMount(() => {
+    cleanup = DevtoolsEventClient.on('counter-state', (e) => {
+      state = e.payload
+    })
+  })
+
+  onDestroy(() => {
+    cleanup?.()
+  })
+</script>
+
+<div>
+  <div>{state?.count}</div>
+  <div>{JSON.stringify(state?.history)}</div>
+</div>
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/svelte/basic-setup) for a more documented guide go check it out.
+
+App.svelte
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
+  import DevtoolPanel from './DevtoolPanel.svelte'
+
+  const plugins: TanStackDevtoolsSveltePlugin[] = [
+    { name: 'Custom devtools', component: DevtoolPanel },
+  ]
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools {plugins} />
+```
+
+## Debugging
+
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtools debugging mode can be activated like so:
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
+  import DevtoolPanel from './DevtoolPanel.svelte'
+
+  const plugins: TanStackDevtoolsSveltePlugin[] = [
+    { name: 'Custom devtools', component: DevtoolPanel },
+  ]
+</script>
+
+<TanStackDevtools
+  eventBusConfig={{ debug: true }}
+  {plugins}
+/>
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+[tanstack-devtools:client-bus] Initializing client event bus
+
+[tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
diff --git a/mintlify/devtools/framework/svelte/reference/index.md b/mintlify/devtools/framework/svelte/reference/index.md
new file mode 100644
index 000000000..ba01cebf5
--- /dev/null
+++ b/mintlify/devtools/framework/svelte/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Svelte Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/svelte/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/vue/adapter.md b/mintlify/devtools/framework/vue/adapter.md
new file mode 100644
index 000000000..bbf6156ae
--- /dev/null
+++ b/mintlify/devtools/framework/vue/adapter.md
@@ -0,0 +1,76 @@
+---
+title: TanStack Devtools Vue Adapter
+id: adapter
+---
+
+The Vue adapter wraps `TanStackDevtoolsCore` in a Vue 3 component, using Vue's `<Teleport>` to render plugins and their tab titles into the correct DOM containers managed by the devtools shell.
+
+## Installation
+
+```sh
+npm install @tanstack/vue-devtools
+```
+
+## Component Props
+
+The `TanStackDevtools` component accepts the following props, defined by the `TanStackDevtoolsVueInit` interface:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `plugins` | `TanStackDevtoolsVuePlugin[]` | Array of plugins to render inside the devtools panel. |
+| `config` | `Partial<TanStackDevtoolsConfig>` | Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage. |
+| `eventBusConfig` | `ClientEventBusConfig` | Configuration for the TanStack Devtools client event bus. |
+
+## Plugin Type
+
+Each plugin in the `plugins` array must conform to the `TanStackDevtoolsVuePlugin` type:
+
+```ts
+type TanStackDevtoolsVuePlugin = {
+  id?: string
+  component: Component
+  name: string | Component
+  props?: Record<string, any>
+}
+```
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `string` (optional) | Unique identifier for the plugin. |
+| `component` | `Component` | The Vue component to render as the plugin panel content. |
+| `name` | `string \| Component` | Display name for the tab title. Can be a plain string or a Vue component for custom rendering. |
+| `props` | `Record<string, any>` (optional) | Additional props passed to the plugin component via `v-bind`. |
+
+## Key Difference from React
+
+The Vue adapter uses `component` (a Vue component reference) instead of `render` (a JSX element) in plugin definitions. Props are provided through the `props` field and bound to the component with `v-bind`, rather than being embedded directly in a JSX expression.
+
+```vue
+<!-- Vue: pass component reference + props -->
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+const plugins = [
+  {
+    name: 'Vue Query',
+    component: VueQueryDevtoolsPanel,
+    props: { style: 'height: 100%' },
+  },
+]
+</script>
+
+<template>
+  <TanStackDevtools :plugins="plugins" />
+</template>
+```
+
+## Exports
+
+The `@tanstack/vue-devtools` package exports:
+
+- **`TanStackDevtools`** -- The main Vue component that renders the devtools panel.
+- **`TanStackDevtoolsVuePlugin`** (type) -- The type for plugin definitions.
+- **`TanStackDevtoolsVueInit`** (type) -- The props interface for the `TanStackDevtools` component.
+
+The package depends on `@tanstack/devtools` (the core package), which provides `TanStackDevtoolsCore`, `TanStackDevtoolsConfig`, `ClientEventBusConfig`, and other core utilities.
diff --git a/mintlify/devtools/framework/vue/basic-setup.md b/mintlify/devtools/framework/vue/basic-setup.md
new file mode 100644
index 000000000..179084dcf
--- /dev/null
+++ b/mintlify/devtools/framework/vue/basic-setup.md
@@ -0,0 +1,62 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack Devtools provides you with an easy-to-use and modular client that allows you to compose multiple devtools into one easy-to-use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/vue-devtools) library. This will install the devtools core as well as provide you with the Vue-specific adapter.
+
+```bash
+npm i @tanstack/vue-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtools` component from `@tanstack/vue-devtools` and add it to your template.
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+</script>
+
+<template>
+  <App />
+  <TanStackDevtools />
+</template>
+```
+
+Import the desired devtools and provide them to the `TanStackDevtools` component via the `plugins` prop along with a label for the menu.
+
+Currently TanStack offers:
+
+- `VueQueryDevtoolsPanel`
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+import type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+const plugins: TanStackDevtoolsVuePlugin[] = [
+  {
+    name: 'Vue Query',
+    component: VueQueryDevtoolsPanel,
+  },
+]
+</script>
+
+<template>
+  <App />
+  <TanStackDevtools
+    :eventBusConfig="{ connectToServerBus: true }"
+    :plugins="plugins"
+  />
+</template>
+```
+
+> Note: The Vue adapter uses `component` instead of `render` in plugin definitions. In Vue, components are passed as component references rather than JSX elements, and any additional props can be provided via the `props` field.
+
+Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](/devtools/configuration) section.
+
+A complete working example can be found in our [basic example](/devtools/framework/vue/examples/basic).
diff --git a/mintlify/devtools/framework/vue/examples/basic.md b/mintlify/devtools/framework/vue/examples/basic.md
new file mode 100644
index 000000000..27fddb12d
--- /dev/null
+++ b/mintlify/devtools/framework/vue/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/vue/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a/examples/vue/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/framework/vue/guides/custom-plugins.md b/mintlify/devtools/framework/vue/guides/custom-plugins.md
new file mode 100644
index 000000000..6209dd288
--- /dev/null
+++ b/mintlify/devtools/framework/vue/guides/custom-plugins.md
@@ -0,0 +1,228 @@
+---
+title: Custom plugins
+id: custom-plugins
+---
+
+TanStack devtools allows you to create your own custom plugins by emitting and listening to our event bus.
+
+## Prerequisite
+
+This guide will walk you through a simple example where our library is a counter with a count history. A working example can be found in our [custom-plugin example](/devtools/framework/react/examples/custom-devtools).
+
+This is our library code:
+
+counter.ts
+```tsx
+export function createCounter() {
+  let count = 0
+  const history = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+    },
+  };
+}
+```
+
+## Event Client Setup
+
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
+
+```bash
+npm i @tanstack/devtools-event-client
+```
+
+First you will need to setup the `EventClient`.
+
+eventClient.ts
+```tsx
+import { EventClient } from '@tanstack/devtools-event-client'
+
+
+type EventMap = {
+  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
+  // The value is the expected type of the event payload
+  'counter-state': { count: number, history: number[] }
+}
+
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      // The pluginId is prepended to event map keys when emitting/listening
+      pluginId: 'custom-devtools',
+    })
+  }
+}
+
+// This is where the magic happens, it'll be used throughout your application.
+export const DevtoolsEventClient = new CustomEventClient()
+```
+
+## Event Client Integration
+
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+
+Our new library code will looks as follows:
+
+counter.ts
+```tsx
+import { DevtoolsEventClient } from './eventClient.ts'
+
+export function createCounter() {
+  let count = 0
+  const history: Array<number> = []
+
+  return {
+    getCount: () => count,
+    increment: () => {
+      count++
+      history.push(count)
+
+      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+    decrement: () => {
+      count--
+      history.push(count)
+
+      DevtoolsEventClient.emit('counter-state', {
+        count,
+        history,
+      })
+    },
+  }
+}
+```
+
+> [!IMPORTANT]
+> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+
+## Consuming The Event Client
+
+Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
+
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
+
+DevtoolPanel.vue
+```vue
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { DevtoolsEventClient } from './eventClient'
+
+const state = ref<{ count: number; history: number[] }>()
+
+let cleanup: (() => void) | undefined
+
+onMounted(() => {
+  cleanup = DevtoolsEventClient.on('counter-state', (e) => {
+    state.value = e.payload
+  })
+})
+
+onUnmounted(() => {
+  cleanup?.()
+})
+</script>
+
+<template>
+  <div>
+    <div>{{ state?.count }}</div>
+    <div>{{ JSON.stringify(state?.history) }}</div>
+  </div>
+</template>
+```
+
+## Application Integration
+
+This step follows what's shown in [basic-setup](/devtools/framework/vue/basic-setup) for a more documented guide go check it out.
+
+App.vue
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+import DevtoolPanel from './DevtoolPanel.vue'
+
+const plugins = [
+  { name: 'Custom devtools', component: DevtoolPanel },
+]
+</script>
+
+<template>
+  <App />
+  <TanStackDevtools :plugins="plugins" />
+</template>
+```
+
+## Debugging
+
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+
+TanStackDevtool's debugging mode can be activated like so:
+```vue
+<template>
+  <TanStackDevtools
+    :event-bus-config="{ debug: true }"
+    :plugins="[
+      {
+        name: 'Custom devtools',
+        component: DevtoolPanel,
+      },
+    ]"
+  />
+</template>
+```
+
+Where as the EventClient's debug mode can be activated by:
+```tsx
+class CustomEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'custom-devtools',
+      debug: true,
+    })
+  }
+}
+```
+
+Activating the debug mode will log to the console the current events that emitter has emitted or listened to. The EventClient will have appended `[tanstack-devtools:${pluginId}]` and the client will have appended `[tanstack-devtools:client-bus]`.
+
+Heres an example of both:
+```
+[tanstack-devtools:client-bus] Initializing client event bus
+
+[tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
+```
+
+## Production builds
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
diff --git a/mintlify/devtools/framework/vue/reference/index.md b/mintlify/devtools/framework/vue/reference/index.md
new file mode 100644
index 000000000..bbd8981ca
--- /dev/null
+++ b/mintlify/devtools/framework/vue/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Vue Reference"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/devtools/latest/docs/framework/vue/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/devtools/tree/92f69d014a981518915064593adc7bb4ffb71f3a)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/devtools/index.mdx b/mintlify/devtools/index.mdx
new file mode 100644
index 000000000..77d3d2858
--- /dev/null
+++ b/mintlify/devtools/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Devtools"
+description: "Unified development tools for the TanStack ecosystem. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Unified development tools for the TanStack ecosystem.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/devtools/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/devtools">
+    Visit the canonical TanStack Devtools website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/devtools">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/devtools/installation.md b/mintlify/devtools/installation.md
new file mode 100644
index 000000000..6e448b675
--- /dev/null
+++ b/mintlify/devtools/installation.md
@@ -0,0 +1,98 @@
+---
+title: Installation
+id: installation
+---
+
+You can install TanStack Devtools with any [NPM](https://npmjs.com) package manager.
+
+Only install one of the following packages depending on your use case:
+
+## React
+
+```sh
+npm install -D @tanstack/react-devtools
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with React v16.8+
+
+## Preact
+
+```sh
+npm install -D @tanstack/preact-devtools
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with Preact v10+
+
+## Solid
+
+```sh
+npm install -D @tanstack/solid-devtools
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with Solid v1.9.5+
+
+## Vue
+
+```sh
+npm install -D @tanstack/vue-devtools
+```
+
+The Vite plugin (`@tanstack/devtools-vite`) is optional for Vue — it enables additional features like source inspection and console piping but isn't required for basic usage.
+
+```sh
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with Vue 3+
+
+## Svelte
+
+```sh
+npm install -D @tanstack/svelte-devtools
+```
+
+The Vite plugin (`@tanstack/devtools-vite`) is optional for Svelte — it enables additional features like source inspection and console piping but isn't required for basic usage.
+
+```sh
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with Svelte 5+
+
+## Angular
+
+```sh
+npm install -D @tanstack/angular-devtools
+```
+
+The Vite plugin (`@tanstack/devtools-vite`) is optional for Angular — it enables additional features like source inspection and console piping but isn't required for basic usage.
+
+```sh
+npm install -D @tanstack/devtools-vite
+```
+
+TanStack Devtools is compatible with Angular 19+
+
+## Vanilla JS
+
+```sh
+npm install -D @tanstack/devtools
+```
+
+Install the core `@tanstack/devtools` package to use with any framework or without a framework. Each framework package up above will also re-export everything from this core package.
+
+
+## Production Builds
+
+If you want to have the devtools in production builds, you can install the core `@tanstack/devtools` package as a regular dependency:
+
+```sh
+npm install @tanstack/devtools
+npm install -D @tanstack/devtools-vite
+```
+ 
+
+Read more about using the devtools in production in our [Production docs](/devtools/production).
\ No newline at end of file
diff --git a/mintlify/devtools/overview.md b/mintlify/devtools/overview.md
new file mode 100644
index 000000000..3f1e8a7de
--- /dev/null
+++ b/mintlify/devtools/overview.md
@@ -0,0 +1,98 @@
+---
+title: Overview
+id: overview
+---
+
+TanStack Devtools is a framework-agnostic devtool for managing and debugging *your devtools*.
+
+We offer you all the tools you need to build and maintain your own devtools with ease.
+
+We will continue to improve and expand the capabilities of TanStack Devtools, so you can focus on building great applications while we take care of the heavy lifting. We offer you an easy way
+to add your own custom devtools and merge multiple instances of TanStack Devtools into a single cohesive experience.
+
+> [!IMPORTANT]
+> TanStack Devtools is currently in **alpha** and its API is subject to change.
+
+## Origin
+
+Have you ever wanted to build your own devtools? Then you start work on them, and you realize how complex and time-consuming it can be. First of all, you have to deal with the dreaded z-indexes!
+Create the trigger, make sure you can move it, style the panel, handle the interactions, make sure
+it's not getting in the way... The list keeps going on, and you're just trying to build your
+next feature in half the time!
+
+
+Well, that's where TanStack Devtools comes in. We provide a solid foundation for building your own devtools, so you can focus on what matters most: your application. We provide everything you need
+out of the box and all you have to do is plug the simple custom devtool panel into your app!
+
+## What's in the Box
+
+TanStack Devtools is composed of several packages organized into layers. You only need to install the ones relevant to your use case.
+
+### Framework Adapters
+
+- `@tanstack/react-devtools`
+- `@tanstack/vue-devtools`
+- `@tanstack/solid-devtools`
+- `@tanstack/preact-devtools`
+
+Thin wrappers that integrate the devtools into your framework of choice. Pick the one that matches your app and you're good to go.
+
+### Core
+
+- `@tanstack/devtools` — The devtools shell UI built in Solid.js. Provides the plugin system, tab navigation, settings panel, and trigger button.
+
+### Event System
+
+- `@tanstack/devtools-event-client` — Type-safe event client for building custom plugins.
+- `@tanstack/devtools-event-bus` — WebSocket/SSE transport layer connecting client and server.
+
+### Build Tools
+
+- `@tanstack/devtools-vite` — Vite plugin providing source inspection, console piping, enhanced logging, and production build stripping.
+
+### Utilities
+
+- `@tanstack/devtools-utils` — Plugin factory helpers for each framework.
+- `@tanstack/devtools-ui` — Shared Solid.js UI component library.
+- `@tanstack/devtools-client` — Internal typed event client for core devtools operations.
+
+## Architecture
+
+The diagram below shows how the layers connect at a high level:
+
+```mermaid
+graph TD
+    subgraph App["Your Application"]
+        adapter["Framework Adapter<br/><i>React / Vue / Solid / Preact</i>"]
+        subgraph shell["@tanstack/devtools — Core Shell"]
+            plugins["Plugin System & Tab Navigation"]
+            settings["Settings & State Persistence"]
+            ui["Trigger, Panel, Source Inspector"]
+        end
+        subgraph events["Event System"]
+            ec["EventClient<br/><i>Typed events for plugins</i>"]
+            eb["EventBus<br/><i>WebSocket / SSE transport</i>"]
+        end
+    end
+
+    adapter --> shell
+    shell --> events
+```
+
+Your application loads a **Framework Adapter**, which mounts the **Core Shell**. The shell manages the plugin lifecycle, renders tabs, and surfaces settings. Plugins communicate through the **Event System**, which provides typed events locally and can bridge to a server over WebSocket or SSE when needed.
+
+## Key Features
+
+- **Framework Agnostic**: Works with React, Vue, Solid, and Preact out of the box.
+- **Plugin System & Marketplace**: Build, share, and install devtools plugins with a simple API.
+- **Type-Safe Event System**: Communicate between plugins and the shell using fully typed events.
+- **Source Inspector**: Click any element in your app to jump straight to its source code (go-to-source).
+- **Console Piping**: Route devtools output to your browser console for a familiar debugging workflow.
+- **Picture-in-Picture Mode**: Pop the devtools panel out into its own window so it never covers your app.
+- **Customizable Hotkeys**: Rebind keyboard shortcuts to match your workflow.
+
+## Next Steps
+
+- [Quick Start](/devtools/quick-start) — Get running in 2 minutes
+- [Architecture Overview](/devtools/architecture) — Understand how the pieces fit together
+- [Building Custom Plugins](/devtools/building-custom-plugins) — Create your own devtools
diff --git a/mintlify/devtools/plugin-configuration.md b/mintlify/devtools/plugin-configuration.md
new file mode 100644
index 000000000..80417769b
--- /dev/null
+++ b/mintlify/devtools/plugin-configuration.md
@@ -0,0 +1,49 @@
+---
+title: Plugin Configuration
+id: plugin-configuration
+---
+ 
+
+# Plugin Configuration
+
+You can configure TanStack Devtools plugins by passing them as an array to the `plugins` prop of the `TanStackDevtools` component.
+
+Each plugin can have the following configuration options:
+- `name` (required) - A name to be displayed in the devtools UI.
+- `render` (required) - A React component that renders the plugin's UI.
+- `defaultOpen` (optional) - A boolean that determines if the plugin panel is open by default (default: false).
+- `id` (optional) - A unique identifier for the plugin. If not provided, a random id will be generated.
+
+Here's an example of how to configure plugins in the `TanStackDevtools` component:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { FormDevtools } from '@tanstack/react-form-devtools'
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <TanStackDevtools
+        plugins={[
+          { 
+            name: 'TanStack Form',
+            render: <FormDevtools />,
+            defaultOpen: true,
+          },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## Default open
+
+You can set a plugin to be open by default by setting the `defaultOpen` property to `true` when configuring the plugin. This will make the plugin panel open when the devtools are first loaded.
+
+If you only have 1 plugin it will automatically be opened regardless of the `defaultOpen` setting.
+
+The limit to open plugins is at 3 panels at a time. If more than 3 plugins are set to `defaultOpen: true`, only the first 3 will be opened.
+
+This does not override the settings saved in localStorage. If you have previously opened the plugin panel, and selected some plugins to be open or closed, those settings will take precedence over the `defaultOpen` setting.
\ No newline at end of file
diff --git a/mintlify/devtools/plugin-lifecycle.md b/mintlify/devtools/plugin-lifecycle.md
new file mode 100644
index 000000000..3dd8416b5
--- /dev/null
+++ b/mintlify/devtools/plugin-lifecycle.md
@@ -0,0 +1,216 @@
+---
+title: Plugin Lifecycle
+id: plugin-lifecycle
+---
+
+Every TanStack Devtools plugin follows a well-defined lifecycle: it is registered, mounted into a DOM container, rendered when activated, and cleaned up when the devtools unmount. This page walks through each stage in detail.
+
+## Plugin Interface
+
+All plugins implement the `TanStackDevtoolsPlugin` interface, which is the low-level contract between a plugin and the devtools core. Framework adapters (React, Vue, Solid, Preact) wrap this interface so you can work with familiar components, but under the hood every plugin is reduced to these fields:
+
+```ts
+interface TanStackDevtoolsPlugin {
+  id?: string
+  name: string | ((el: HTMLHeadingElement, theme: 'dark' | 'light') => void)
+  render: (el: HTMLDivElement, theme: 'dark' | 'light') => void
+  destroy?: (pluginId: string) => void
+  defaultOpen?: boolean
+}
+```
+
+### `id` (optional)
+
+A unique identifier for the plugin. If you omit it, the core generates one from the `name` string (lowercased, spaces replaced with dashes, suffixed with the plugin's index). Providing an explicit `id` is useful when you need a stable identifier across page reloads - for example, to persist which plugins the user had open.
+
+### `name` (required)
+
+Displayed as the tab title in the sidebar. This can be:
+
+- **A plain string** - rendered as text inside an `<h3>` element.
+- **A function** - receives the heading element (`HTMLHeadingElement`) and the current theme (`'dark' | 'light'`). You can render anything into the heading, such as an icon next to the name or a fully custom title.
+
+```ts
+// Simple string name
+{ name: 'My Plugin', render: (el) => { /* ... */ } }
+
+// Custom title via function
+{
+  name: (el, theme) => {
+    el.innerHTML = `<span style="color: ${theme === 'dark' ? '#fff' : '#000'}">My Plugin</span>`
+  },
+  render: (el) => { /* ... */ }
+}
+```
+
+### `render` (required)
+
+The main rendering function. It receives a `<div>` container element and the current theme. Your job is to render your plugin UI into this container using whatever approach you prefer - raw DOM manipulation, a framework portal, or anything else.
+
+```ts
+render: (el, theme) => {
+  el.innerHTML = `<div class="${theme}">Hello from my plugin!</div>`
+}
+```
+
+The `render` function is called:
+
+1. When the plugin's tab is first activated (clicked or opened by default).
+2. When the theme changes, so your UI can adapt.
+
+### `destroy` (optional)
+
+Called when the plugin is removed from the active set (e.g., the user deactivates the tab) or when the devtools unmount entirely. It receives the `pluginId` as its argument. Use this for cleanup - cancelling timers, closing WebSocket connections, removing event listeners, etc.
+
+Most plugins don't need to implement `destroy` because framework adapters handle cleanup automatically.
+
+### `defaultOpen` (optional)
+
+When set to `true`, the plugin's panel will open automatically when the devtools first load and no user preferences exist in localStorage. At most 3 plugins can be open simultaneously, so if more than 3 specify `defaultOpen: true`, only the first 3 are opened.
+
+This setting does **not** override saved user preferences. Once a user has interacted with the devtools and their active-plugin selection is persisted, `defaultOpen` has no effect.
+
+If only a single plugin is registered, it opens automatically regardless of `defaultOpen`.
+
+## Mount Sequence
+
+Here is what happens when you provide plugins to the devtools:
+
+1. **Initialization** - `TanStackDevtoolsCore` is instantiated with a `plugins` array. Each plugin is assigned an `id` if one is not already provided.
+
+2. **DOM containers are created** - The core's Solid-based UI creates two DOM elements per plugin:
+   - A content container: `<div id="plugin-container-{pluginId}">` where the plugin renders its UI.
+   - A title container: `<h3 id="plugin-title-container-{pluginId}">` where the plugin's name is rendered.
+
+3. **Title rendering** - For each plugin, the core checks if `name` is a string or function. If it's a string, the text is set directly on the heading element. If it's a function, the function is called with the heading element and current theme.
+
+4. **Plugin activation** - When the user clicks a plugin's tab (or the plugin is auto-opened via `defaultOpen`), the plugin is added to the `activePlugins` list. The core then calls `plugin.render(container, theme)` with the content `<div>` and the current theme.
+
+5. **Rendering** - The container is a regular `<div>` element. Your plugin can render anything into it - DOM nodes, a framework component tree via portals, a canvas, an iframe, etc.
+
+6. **Theme changes** - When the user toggles the theme in settings, `render` is called again with the new theme value. Your plugin should update its appearance accordingly.
+
+```mermaid
+flowchart TD
+    A["User opens devtools"] --> B["TanStackDevtoolsCore created<br/>with plugins array"]
+    B --> C["Solid UI renders sidebar<br/>tabs and containers"]
+    C --> D["&lt;h3 id='plugin-title-container-{id}'&gt;<br/>created per plugin"]
+    C --> E["&lt;div id='plugin-container-{id}'&gt;<br/>created per active plugin"]
+    D --> F["plugin.name<br/><i>string set or function called</i>"]
+    E --> G["plugin.render(div, theme)<br/><i>called with container + theme</i>"]
+```
+
+## Framework Adapter Pattern
+
+You rarely interact with the raw `TanStackDevtoolsPlugin` interface directly. Instead, each framework adapter converts your familiar component model into the DOM-based plugin contract.
+
+### React / Preact
+
+The React adapter takes your JSX element and uses `createPortal` to render it into the plugin's container element:
+
+```tsx
+// What you write:
+<TanStackDevtools
+  plugins={[{
+    name: 'My Plugin',
+    render: <MyPluginComponent />,
+  }]}
+/>
+
+// What happens internally:
+// The adapter's render function calls:
+//   createPortal(<MyPluginComponent />, containerElement)
+```
+
+Your React component runs in its normal React tree with full access to hooks, context, state management, etc. It just renders into a different DOM location via the portal.
+
+### Solid
+
+The Solid adapter uses Solid's `<Portal>` component to mount your JSX into the container:
+
+```tsx
+// What you write:
+<TanStackDevtools
+  plugins={[{
+    name: 'My Plugin',
+    render: <MyPluginComponent />,
+  }]}
+/>
+
+// What happens internally:
+// The adapter wraps your component in:
+//   <Portal mount={containerElement}>{yourComponent}</Portal>
+```
+
+Since the devtools core is itself built in Solid, this is the most native integration. Your component runs inside the same Solid reactive system as the devtools shell.
+
+### Vue
+
+The Vue adapter uses `<Teleport>` to render your Vue component into the container:
+
+```vue
+<!-- What you write: -->
+<TanStackDevtools
+  :plugins="[{
+    name: 'My Plugin',
+    component: MyPluginComponent,
+    props: { someProp: 'value' },
+  }]"
+/>
+
+<!-- What happens internally: -->
+<!-- The adapter renders: -->
+<Teleport :to="'#plugin-container-' + pluginId">
+  <component :is="plugin.component" v-bind="plugin.props" :theme="theme" />
+</Teleport>
+```
+
+Your Vue component receives the `theme` as a prop along with any other props you pass. It runs within the Vue app's reactivity system with full access to composition API, inject/provide, etc.
+
+### The Key Insight
+
+```mermaid
+graph LR
+    subgraph fw["Your Framework Runtime"]
+        comp["Your Plugin Component<br/><i>Full reactivity, hooks, signals</i>"]
+    end
+    subgraph core["Devtools Core (Solid.js)"]
+        container["Plugin Container<br/>&lt;div id='plugin-container-{id}'&gt;"]
+    end
+    comp -- "Portal / Teleport" --> container
+```
+
+Regardless of framework, your plugin component runs in its **normal framework context** with full reactivity, hooks, signals, lifecycle methods, and dependency injection. It just renders into a different DOM location via portals or teleports. This means:
+
+- React plugins can use `useState`, `useEffect`, `useContext`, and any React library.
+- Solid plugins can use signals, stores, `createEffect`, and the full Solid API.
+- Vue plugins can use `ref`, `computed`, `watch`, `inject`, and any Vue composable.
+
+The framework adapter handles all the wiring between your component and the devtools container.
+
+## Plugin State
+
+The devtools persist the active/visible plugin selection in `localStorage` under the key `tanstack_devtools_state`. This means that when a user opens specific plugin tabs, their selection survives page reloads.
+
+Key behaviors:
+
+- **Maximum 3 visible plugins** - At most 3 plugin panels can be displayed simultaneously. Activating a 4th plugin deactivates the earliest one.
+- **`defaultOpen` vs. saved state** - If `defaultOpen: true` is set on a plugin and no saved state exists in localStorage, the plugin opens on first load. Once the user changes the selection, their preference takes precedence.
+- **Single-plugin auto-open** - If only one plugin is registered, it opens automatically regardless of `defaultOpen` or saved state.
+- **Stale plugin cleanup** - When the devtools load, any plugin IDs in the saved state that no longer match a registered plugin are automatically removed.
+
+## Cleanup
+
+When `TanStackDevtoolsCore.unmount()` is called - either explicitly or because the framework component unmounts - the following happens:
+
+1. The Solid reactive system disposes of the entire devtools component tree.
+2. For each active plugin that provides a `destroy` function, `destroy(pluginId)` is called.
+3. All DOM containers created by the core are removed.
+
+Framework adapters handle their own cleanup automatically:
+
+- **React** unmounts the portal, which triggers the normal React cleanup cycle (`useEffect` cleanup functions, etc.).
+- **Vue** destroys the Teleport, which runs `onUnmounted` hooks in your component.
+- **Solid** disposes of the Portal's reactive scope, running any `onCleanup` callbacks.
+
+You typically do **not** need to implement `destroy` unless your plugin has manual subscriptions, timers, WebSocket connections, or other resources that aren't tied to your framework's lifecycle. If all your cleanup is handled by framework hooks (like `useEffect` cleanup in React or `onCleanup` in Solid), the adapter takes care of it for you.
diff --git a/mintlify/devtools/plugins/a11y.md b/mintlify/devtools/plugins/a11y.md
new file mode 100644
index 000000000..797302eb4
--- /dev/null
+++ b/mintlify/devtools/plugins/a11y.md
@@ -0,0 +1,175 @@
+---
+title: Accessibility Plugin
+id: a11y-plugin
+---
+
+The TanStack Devtools Accessibility (A11y) Plugin provides real-time accessibility auditing for your web applications, powered by [axe-core](https://github.com/dequelabs/axe-core). It helps you identify and fix accessibility issues during development.
+
+## Features
+
+- **Full Page Scanning** - Audit your entire page for accessibility violations
+- **Component-Level Scanning** - Scope audits to specific components using React hooks
+- **Visual Overlays** - Highlight problematic elements with severity-based colors
+- **Click-to-Navigate** - Click on an issue to automatically scroll to and highlight the element
+- **Dark Mode Support** - Automatically adapts to the devtools theme
+- **Devtools-Aware** - Automatically excludes devtools panels from scanning
+- **Configurable Rule Sets** - Support for WCAG 2.0/2.1/2.2 (A/AA/AAA), Section 508, and best practices
+- **Export Reports** - Download results as JSON or CSV
+- **Persistent Settings** - Configuration saved to localStorage
+
+## Installation
+
+```bash
+npm install @tanstack/devtools-a11y
+# or
+pnpm add @tanstack/devtools-a11y
+# or
+yarn add @tanstack/devtools-a11y
+```
+
+## Quick Start (React)
+
+```tsx
+import { createRoot } from 'react-dom/client'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
+
+createRoot(document.getElementById('root')!).render(
+  <>
+    <App />
+    <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
+  </>,
+)
+```
+
+## Quick Start (Solid)
+
+```tsx
+import { render } from 'solid-js/web'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/solid'
+
+render(
+  () => (
+    <>
+      <App />
+      <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
+    </>
+  ),
+  document.getElementById('root')!,
+)
+```
+
+## Quick Start (Vue)
+
+```ts
+import { createA11yDevtoolsVuePlugin } from '@tanstack/devtools-a11y/vue'
+
+const plugins = [createA11yDevtoolsVuePlugin()]
+```
+
+## Click-to-Navigate
+
+When you click on an issue in the panel, the plugin will:
+
+1. **Scroll** the problematic element into view (centered in the viewport)
+2. **Highlight** the element with a pulsing overlay matching its severity color
+3. **Show a tooltip** with the rule ID and impact level
+
+This makes it easy to locate and inspect issues directly on the page.
+
+## Panel Configuration
+
+Initial configuration can be provided via the vanilla plugin API:
+
+```ts
+import { createA11yPlugin } from '@tanstack/devtools-a11y'
+
+const plugin = createA11yPlugin({
+  threshold: 'serious',
+  ruleSet: 'wcag21aa',
+  showOverlays: true,
+  persistSettings: true,
+  disabledRules: [],
+})
+```
+
+Common `options` fields:
+
+- `threshold`: minimum impact level to show
+- `ruleSet`: rule preset (`'wcag2a' | 'wcag2aa' | 'wcag21aa' | 'wcag22aa' | 'section508' | 'best-practice' | 'all'`)
+- `showOverlays`: highlight issues in the page
+- `persistSettings`: store config in localStorage
+- `disabledRules`: rule IDs to ignore
+
+If you don't need to provide initial configuration, you can use the framework plugin helpers
+directly (the settings UI persists changes to localStorage by default).
+
+## Severity Levels
+
+Issues are categorized by impact level with corresponding overlay colors:
+
+| Impact | Color | Description |
+|--------|-------|-------------|
+| Critical | Red | Must be fixed - prevents users from accessing content |
+| Serious | Orange | Should be fixed - significantly impacts user experience |
+| Moderate | Yellow | Consider fixing - affects some users |
+| Minor | Blue | Optional improvement - minor impact |
+
+## Framework Support
+
+The panel UI is implemented in Solid and wrapped for React, Solid, Preact, and Vue
+using `@tanstack/devtools-utils`.
+
+## Export Formats
+
+### JSON Export
+
+```ts
+import { exportToJSON } from '@tanstack/devtools-a11y'
+
+const jsonString = exportToJSON(auditResult)
+```
+
+### CSV Export
+
+```ts
+import { exportToCSV } from '@tanstack/devtools-a11y'
+
+const csvString = exportToCSV(auditResult)
+```
+
+## Supported Standards
+
+The plugin supports the following accessibility standards:
+
+- **WCAG 2.0** Level A, AA, AAA
+- **WCAG 2.1** Level A, AA, AAA
+- **WCAG 2.2** Level AA
+- **Section 508**
+- **Best Practices** (non-standard recommendations)
+
+## Troubleshooting
+
+### Issues not appearing
+
+1. Check that the element is visible in the viewport
+2. Ensure the element is not excluded by `excludeSelectors`
+3. Verify the selected standard includes the relevant rule
+
+### Overlays not showing
+
+1. Confirm overlays are enabled in the panel settings
+2. Check for CSS conflicts with `z-index` or `pointer-events`
+3. Ensure the container element exists in the DOM
+
+## Example
+
+See the full working example at:
+`examples/react/a11y-devtools/`
+
+Run it with:
+```bash
+cd examples/react/a11y-devtools
+pnpm dev
+```
diff --git a/mintlify/devtools/production.md b/mintlify/devtools/production.md
new file mode 100644
index 000000000..70d6eb38b
--- /dev/null
+++ b/mintlify/devtools/production.md
@@ -0,0 +1,98 @@
+---
+title: Production
+id: production
+---
+
+
+The whole point of devtools is to help you during development, so it's generally not recommended to include them in production builds, but if you know what you're doing, you can.
+
+
+## Vite Plugin Configuration
+
+The default behavior of the Vite plugin is to remove all devtools related code from the production build. This is usually what you want, but if you want to keep the devtools in production (not recommended) you can set the `removeDevtoolsOnBuild` option to `false`.
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      removeDevtoolsOnBuild: false
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+This will include the devtools and all it's plugins in the production build.
+
+## Excluding Devtools from Production on non-vite projects
+
+If you're running devtools in a non-vite project you will have to manually exclude the devtools from your production build. You can do this by using environment variables or any other method you prefer.
+
+We would recommend you create a separate file for the devtools import and then conditionally import that file in your main application file depending on the environment.
+
+Here's an example using environment variables:
+
+```tsx
+// devtools-setup.tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+export default function Devtools(){
+  return <TanStackDevtools plugins={[
+    // Add your custom plugins here
+  ]} />
+}
+
+// App.tsx
+const Devtools = process.env.NODE_ENV === 'development' ? await import('./devtools-setup') : () => null
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <Devtools />
+    </>
+  )
+}
+```
+
+## Event client in production
+
+By default the **root import** of `@tanstack/devtools-event-client` no-ops
+outside development. When your bundler sets `process.env.NODE_ENV` to anything
+other than `'development'`, the real client is replaced by a no-op and
+tree-shaken out of your production bundle:
+
+```ts
+// dev: real client — production: no-op (tree-shaken away)
+import { EventClient } from '@tanstack/devtools-event-client'
+```
+
+If you are an open-source author who deliberately wants devtools events in
+production, import the real client from the `/production` subpath instead. It is
+never stripped:
+
+```ts
+// always the real client, in every environment
+import { EventClient } from '@tanstack/devtools-event-client/production'
+```
+
+The public API is identical between the two imports — only the production
+runtime behavior differs.
+
+This is independent of the Vite plugin's `removeDevtoolsOnBuild` option — the event client strips itself based on `NODE_ENV`, whether or not you use the Vite plugin.
+
+## Where to install the Devtools
+
+If you are using the devtools in development only, you can install them as a development dependency and only import them in development builds. This is the default recommended way to use the devtools.
+
+If you are using the devtools in production, you need to install them as a regular dependency and import them in your application code.
+
+This depends on if you are shedding development dependencies in production or not, but generally it's recommended to install them as a regular dependency if you are using them in production.
+
+## Development / Production workflow
+
+For Development, you can install the devtools as a development dependency and import them in your application code. The Vite plugin will take care of stripping them out of the production build.
+
+For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.
diff --git a/mintlify/devtools/quick-start.md b/mintlify/devtools/quick-start.md
new file mode 100644
index 000000000..61e1dd250
--- /dev/null
+++ b/mintlify/devtools/quick-start.md
@@ -0,0 +1,318 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+TanStack Devtools is a framework-agnostic devtool for managing and debugging devtools plugins across React, Preact, Solid, Vue, Svelte, and Angular. Pick your framework below to get started.
+
+## React
+
+Install the devtools and the Vite plugin:
+
+```bash
+npm install -D @tanstack/react-devtools @tanstack/devtools-vite
+```
+
+Add the `TanStackDevtools` component to the root of your application:
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+    <TanStackDevtools />
+  </StrictMode>,
+)
+```
+
+To add plugins, pass them via the `plugins` prop. Each plugin needs a `name` and a `render` element:
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel />,
+        },
+      ]}
+    />
+  </StrictMode>,
+)
+```
+
+## Preact
+
+Install the devtools and the Vite plugin:
+
+```bash
+npm install -D @tanstack/preact-devtools @tanstack/devtools-vite
+```
+
+Add the `TanStackDevtools` component using Preact's `render()` function:
+
+```tsx
+import { render } from 'preact'
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+
+import App from './App'
+
+render(
+  <>
+    <App />
+    <TanStackDevtools />
+  </>,
+  document.getElementById('root')!,
+)
+```
+
+To add plugins, pass them via the `plugins` prop:
+
+```tsx
+import { render } from 'preact'
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+
+import App from './App'
+
+render(
+  <>
+    <App />
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'Your Plugin',
+          render: <YourPluginComponent />,
+        },
+      ]}
+    />
+  </>,
+  document.getElementById('root')!,
+)
+```
+
+## Solid
+
+Install the devtools and the Vite plugin:
+
+```bash
+npm install -D @tanstack/solid-devtools @tanstack/devtools-vite
+```
+
+Add the `TanStackDevtools` component using Solid's `render(() => ...)` pattern:
+
+```tsx
+import { render } from 'solid-js/web'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+
+import App from './App'
+
+render(() => (
+  <>
+    <App />
+    <TanStackDevtools />
+  </>
+), document.getElementById('root')!)
+```
+
+To add plugins, pass them via the `plugins` prop:
+
+```tsx
+import { render } from 'solid-js/web'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+
+import App from './App'
+
+render(() => (
+  <>
+    <App />
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <SolidQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel />,
+        },
+      ]}
+    />
+  </>
+), document.getElementById('root')!)
+```
+
+## Vue
+
+Install the Vue devtools adapter:
+
+```bash
+npm install -D @tanstack/vue-devtools
+```
+
+> The Vite plugin (`@tanstack/devtools-vite`) is optional for Vue but recommended if you want features like enhanced console logs and go-to-source.
+
+Add the `TanStackDevtools` component in your root template:
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+</script>
+
+<template>
+  <App />
+  <TanStackDevtools />
+</template>
+```
+
+To add plugins, define them as an array and pass them via the `:plugins` binding. Vue uses `component` instead of `render` in plugin definitions:
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+import type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+const plugins: TanStackDevtoolsVuePlugin[] = [
+  { name: 'Vue Query', component: VueQueryDevtoolsPanel },
+]
+</script>
+
+<template>
+  <App />
+  <TanStackDevtools :plugins="plugins" />
+</template>
+```
+
+## Svelte
+
+Install the devtools:
+
+```bash
+npm install @tanstack/svelte-devtools
+```
+
+Add the `TanStackDevtools` component to the root of your application:
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools />
+```
+
+To add plugins, define them as an array and pass them via the `plugins` prop. Svelte uses `component` instead of `render` in plugin definitions:
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
+  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'
+
+  const plugins: TanStackDevtoolsSveltePlugin[] = [
+    { name: 'Svelte Query', component: SvelteQueryDevtoolsPanel },
+  ]
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools {plugins} />
+```
+
+## Angular
+
+Install the devtools:
+
+```bash
+npm install @tanstack/angular-devtools
+```
+
+Add the `TanStackDevtoolsComponent` to the root of your application:
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtoolsComponent],
+  template: `
+    <app-content />
+    <tanstack-devtools />
+  `,
+})
+export class AppComponent {}
+```
+
+To add plugins, define them as an array and pass them via the `[plugins]` input. Angular uses `component` instead of `render` in plugin definitions:
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
+import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtoolsComponent],
+  template: `
+    <app-content />
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class AppComponent {
+  plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    { name: 'Angular Query', component: AngularQueryDevtoolsPanel },
+  ]
+}
+```
+
+## Vite Plugin
+
+All frameworks benefit from the optional Vite plugin, which provides enhanced console logs, go-to-source, and a server event bus. Install it as a dev dependency:
+
+```bash
+npm install -D @tanstack/devtools-vite
+```
+
+Add it as the **first** plugin in your Vite config:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools(),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+For the full list of Vite plugin options, see the [Vite Plugin](/devtools/vite-plugin) documentation.
diff --git a/mintlify/devtools/reference/classes/tanstackdevtoolscore.md b/mintlify/devtools/reference/classes/tanstackdevtoolscore.md
new file mode 100644
index 000000000..9750be5e5
--- /dev/null
+++ b/mintlify/devtools/reference/classes/tanstackdevtoolscore.md
@@ -0,0 +1,88 @@
+---
+id: TanStackDevtoolsCore
+title: TanStackDevtoolsCore
+---
+
+
+
+# Class: TanStackDevtoolsCore
+
+Defined in: [devtools/src/core.tsx:43](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L43)
+
+## Constructors
+
+### new TanStackDevtoolsCore()
+
+```ts
+new TanStackDevtoolsCore(init): TanStackDevtoolsCore
+```
+
+Defined in: [devtools/src/core.tsx:55](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L55)
+
+#### Parameters
+
+##### init
+
+[`TanStackDevtoolsInit`](/devtools/reference/interfaces/tanstackdevtoolsinit)
+
+#### Returns
+
+[`TanStackDevtoolsCore`](/devtools/reference/classes/tanstackdevtoolscore)
+
+## Methods
+
+### mount()
+
+```ts
+mount<T>(el): void
+```
+
+Defined in: [devtools/src/core.tsx:64](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L64)
+
+#### Type Parameters
+
+• **T** *extends* `HTMLElement`
+
+#### Parameters
+
+##### el
+
+`T`
+
+#### Returns
+
+`void`
+
+***
+
+### setConfig()
+
+```ts
+setConfig(config): void
+```
+
+Defined in: [devtools/src/core.tsx:107](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L107)
+
+#### Parameters
+
+##### config
+
+`Partial`\&lt;[`TanStackDevtoolsInit`](/devtools/reference/interfaces/tanstackdevtoolsinit)\>
+
+#### Returns
+
+`void`
+
+***
+
+### unmount()
+
+```ts
+unmount(): void
+```
+
+Defined in: [devtools/src/core.tsx:98](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L98)
+
+#### Returns
+
+`void`
diff --git a/mintlify/devtools/reference/index.md b/mintlify/devtools/reference/index.md
new file mode 100644
index 000000000..df9b791db
--- /dev/null
+++ b/mintlify/devtools/reference/index.md
@@ -0,0 +1,27 @@
+---
+id: "@tanstack/devtools"
+title: "@tanstack/devtools"
+---
+
+
+
+# @tanstack/devtools
+
+## Classes
+
+- [TanStackDevtoolsCore](/devtools/reference/classes/tanstackdevtoolscore)
+
+## Interfaces
+
+- [ClientEventBusConfig](/devtools/reference/interfaces/clienteventbusconfig)
+- [TanStackDevtoolsInit](/devtools/reference/interfaces/tanstackdevtoolsinit)
+- [TanStackDevtoolsPlugin](/devtools/reference/interfaces/tanstackdevtoolsplugin)
+
+## Type Aliases
+
+- [TanStackDevtoolsConfig](/devtools/reference/type-aliases/tanstackdevtoolsconfig)
+
+## Variables
+
+- [PLUGIN\_CONTAINER\_ID](/devtools/reference/variables/plugin_container_id)
+- [PLUGIN\_TITLE\_CONTAINER\_ID](/devtools/reference/variables/plugin_title_container_id)
diff --git a/mintlify/devtools/reference/interfaces/clienteventbusconfig.md b/mintlify/devtools/reference/interfaces/clienteventbusconfig.md
new file mode 100644
index 000000000..c6dc062e2
--- /dev/null
+++ b/mintlify/devtools/reference/interfaces/clienteventbusconfig.md
@@ -0,0 +1,48 @@
+---
+id: ClientEventBusConfig
+title: ClientEventBusConfig
+---
+
+
+
+# Interface: ClientEventBusConfig
+
+Defined in: event-bus/dist/esm/client/client.d.ts:1
+
+## Properties
+
+### connectToServerBus?
+
+```ts
+optional connectToServerBus: boolean;
+```
+
+Defined in: event-bus/dist/esm/client/client.d.ts:6
+
+Optional flag to indicate if the devtools server event bus is available to connect to.
+This is used to determine if the devtools can connect to the server for real-time event streams.
+
+***
+
+### debug?
+
+```ts
+optional debug: boolean;
+```
+
+Defined in: event-bus/dist/esm/client/client.d.ts:10
+
+Optional flag to enable debug mode for the event bus.
+
+***
+
+### port?
+
+```ts
+optional port: number;
+```
+
+Defined in: event-bus/dist/esm/client/client.d.ts:15
+
+Optional port to connect to the devtools server event bus.
+Defaults to 4206.
diff --git a/mintlify/devtools/reference/interfaces/tanstackdevtoolsinit.md b/mintlify/devtools/reference/interfaces/tanstackdevtoolsinit.md
new file mode 100644
index 000000000..77036f4af
--- /dev/null
+++ b/mintlify/devtools/reference/interfaces/tanstackdevtoolsinit.md
@@ -0,0 +1,73 @@
+---
+id: TanStackDevtoolsInit
+title: TanStackDevtoolsInit
+---
+
+
+
+# Interface: TanStackDevtoolsInit
+
+Defined in: [devtools/src/core.tsx:13](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L13)
+
+## Properties
+
+### config?
+
+```ts
+optional config: Partial<{
+  customTrigger: (el, props) => void;
+  defaultOpen: boolean;
+  hideUntilHover: boolean;
+  openHotkey: KeyboardKey[];
+  panelLocation: "top" | "bottom";
+  position: TriggerPosition;
+  requireUrlFlag: boolean;
+  theme: "light" | "dark";
+  triggerHidden: boolean;
+  urlFlag: string;
+}>;
+```
+
+Defined in: [devtools/src/core.tsx:19](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L19)
+
+Configuration for the devtools shell. These configuration options are used to set the
+initial state of the devtools when it is started for the first time. Afterwards,
+the settings are persisted in local storage and changed through the settings panel.
+
+***
+
+### eventBusConfig?
+
+```ts
+optional eventBusConfig: ClientEventBusConfig;
+```
+
+Defined in: [devtools/src/core.tsx:40](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L40)
+
+***
+
+### plugins?
+
+```ts
+optional plugins: TanStackDevtoolsPlugin[];
+```
+
+Defined in: [devtools/src/core.tsx:39](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L39)
+
+Array of plugins to be used in the devtools.
+Each plugin has a `render` function that gives you the dom node to mount into
+
+Example:
+```ts
+ const devtools = new TanStackDevtoolsCore({
+   plugins: [
+     {
+       id: "your-plugin-id",
+       name: "Your Plugin",
+       render: (el) => {
+         // Your render logic here
+       },
+     },
+   ],
+ })
+```
diff --git a/mintlify/devtools/reference/interfaces/tanstackdevtoolsplugin.md b/mintlify/devtools/reference/interfaces/tanstackdevtoolsplugin.md
new file mode 100644
index 000000000..af1684ca0
--- /dev/null
+++ b/mintlify/devtools/reference/interfaces/tanstackdevtoolsplugin.md
@@ -0,0 +1,135 @@
+---
+id: TanStackDevtoolsPlugin
+title: TanStackDevtoolsPlugin
+---
+
+
+
+# Interface: TanStackDevtoolsPlugin
+
+Defined in: [devtools/src/context/devtools-context.tsx:15](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L15)
+
+## Properties
+
+### defaultOpen?
+
+```ts
+optional defaultOpen: boolean;
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:58](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L58)
+
+Whether the plugin should be open by default when there are no active plugins.
+If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.
+
+#### Default
+
+```ts
+false
+```
+
+***
+
+### destroy()?
+
+```ts
+optional destroy: (pluginId) => void;
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:77](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L77)
+
+#### Parameters
+
+##### pluginId
+
+`string`
+
+#### Returns
+
+`void`
+
+***
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:52](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L52)
+
+Unique identifier for the plugin.
+If not provided, it will be generated based on the name.
+
+***
+
+### name
+
+```ts
+name: string | (el, theme) => void;
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:42](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L42)
+
+Name to be displayed in the devtools UI.
+If a string, it will be used as the plugin name.
+If a function, it will be called with the mount element.
+
+Example:
+```ts
+  {
+    // If a string, it will be used as the plugin name
+    name: "Your Plugin",
+    render: () => {}
+  }
+```
+or
+
+```ts
+  {
+    // If a function, it will be called with the mount element
+    name: (el) => {
+      el.innerText = "Your Plugin Name"
+      // Your name logic here
+    },
+    render: () => {}
+  }
+```
+
+***
+
+### render()
+
+```ts
+render: (el, theme) => void;
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:72](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L72)
+
+Render the plugin UI by using the provided element. This function will be called
+when the plugin tab is clicked and expected to be mounted.
+
+#### Parameters
+
+##### el
+
+`HTMLDivElement`
+
+The mount element for the plugin.
+
+##### theme
+
+`"light"` | `"dark"`
+
+#### Returns
+
+`void`
+
+void
+
+Example:
+```ts
+  render: (el) => {
+    el.innerHTML = "<h1>Your Plugin</h1>"
+  }
+```
diff --git a/mintlify/devtools/reference/type-aliases/tanstackdevtoolsconfig.md b/mintlify/devtools/reference/type-aliases/tanstackdevtoolsconfig.md
new file mode 100644
index 000000000..a575c468c
--- /dev/null
+++ b/mintlify/devtools/reference/type-aliases/tanstackdevtoolsconfig.md
@@ -0,0 +1,14 @@
+---
+id: TanStackDevtoolsConfig
+title: TanStackDevtoolsConfig
+---
+
+
+
+# Type Alias: TanStackDevtoolsConfig
+
+```ts
+type TanStackDevtoolsConfig = DevtoolsStore["settings"];
+```
+
+Defined in: [devtools/src/context/devtools-context.tsx:182](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L182)
diff --git a/mintlify/devtools/reference/variables/plugin_container_id.md b/mintlify/devtools/reference/variables/plugin_container_id.md
new file mode 100644
index 000000000..89a3d31cd
--- /dev/null
+++ b/mintlify/devtools/reference/variables/plugin_container_id.md
@@ -0,0 +1,14 @@
+---
+id: PLUGIN_CONTAINER_ID
+title: PLUGIN_CONTAINER_ID
+---
+
+
+
+# Variable: PLUGIN\_CONTAINER\_ID
+
+```ts
+const PLUGIN_CONTAINER_ID: "plugin-container" = 'plugin-container';
+```
+
+Defined in: [devtools/src/constants.ts:1](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/constants.ts#L1)
diff --git a/mintlify/devtools/reference/variables/plugin_title_container_id.md b/mintlify/devtools/reference/variables/plugin_title_container_id.md
new file mode 100644
index 000000000..e987d1292
--- /dev/null
+++ b/mintlify/devtools/reference/variables/plugin_title_container_id.md
@@ -0,0 +1,14 @@
+---
+id: PLUGIN_TITLE_CONTAINER_ID
+title: PLUGIN_TITLE_CONTAINER_ID
+---
+
+
+
+# Variable: PLUGIN\_TITLE\_CONTAINER\_ID
+
+```ts
+const PLUGIN_TITLE_CONTAINER_ID: "plugin-title-container" = 'plugin-title-container';
+```
+
+Defined in: [devtools/src/constants.ts:2](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/constants.ts#L2)
diff --git a/mintlify/devtools/source-inspector.md b/mintlify/devtools/source-inspector.md
new file mode 100644
index 000000000..aad7109a4
--- /dev/null
+++ b/mintlify/devtools/source-inspector.md
@@ -0,0 +1,105 @@
+---
+title: Source Inspector
+id: source-inspector
+---
+
+The source inspector lets you click any element in your app to open its source file in your editor. When activated, the devtools overlay highlights elements as you hover over them and shows their source file location. Click to open the file at the exact line.
+
+## Requirements
+
+Two things are needed for the source inspector to work:
+
+- The `@tanstack/devtools-vite` plugin must be installed and running (dev server only)
+- Source injection must be enabled: `injectSource.enabled: true` (this is the default)
+
+The feature only works in development. In production builds, source attributes are not injected.
+
+## How It Works
+
+```mermaid
+flowchart LR
+    A["Your JSX/TSX files"] -- "AST transform" --> B["data-tsd-source<br/>attributes injected"]
+    B -- "Hold inspect hotkey<br/>+ click element" --> C["Devtools reads<br/>data-tsd-source"]
+    C -- "HTTP request" --> D["Vite dev server"]
+    D -- "launch-editor" --> E["Opens file in editor<br/>at exact line"]
+```
+
+The Vite plugin uses oxc-parser to parse your JSX/TSX files during development. It adds a `data-tsd-source="filepath:line:column"` attribute to every JSX element via MagicString. When you activate the source inspector and click an element, the devtools reads this attribute and sends a request to the Vite dev server. The server then launches your editor at the specified file and line using `launch-editor`.
+
+## Activating the Inspector
+
+There are two ways to activate the source inspector:
+
+- **Hotkey**: Hold Shift+Alt+Ctrl (or Shift+Alt+Meta on Mac) — this is the default `inspectHotkey`. While held, the inspector overlay appears.
+- **Settings panel**: The inspect hotkey can be customized in the devtools Settings tab.
+
+The hotkey can also be configured programmatically:
+
+```ts
+<TanStackDevtools
+  config={{
+    inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],
+  }}
+/>
+```
+
+## Ignoring Files and Components
+
+Not all elements need source attributes. Use the `ignore` config to exclude files or components:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      injectSource: {
+        enabled: true,
+        ignore: {
+          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],
+          components: ['InternalComponent', /.*Provider$/],
+        },
+      },
+    }),
+  ],
+}
+```
+
+Both `files` and `components` accept arrays of strings (exact match) or RegExp patterns.
+
+## Click Action
+
+By default, clicking an inspected element opens the file in your editor. You can change this to copy the source path to the clipboard instead using the `sourceAction` setting:
+
+```ts
+<TanStackDevtools
+  config={{
+    sourceAction: 'copy-path',
+  }}
+/>
+```
+
+| Value | Behavior |
+| --- | --- |
+| `"ide-warp"` | Opens the file in your editor at the exact line (default) |
+| `"copy-path"` | Copies the `filepath:line:column` string to the clipboard |
+
+This is useful in environments where the Vite dev server cannot reach your editor, or when you want to paste the path elsewhere.
+
+## Editor Configuration
+
+Most popular editors work out of the box via the `launch-editor` package. Supported editors include VS Code, WebStorm, Sublime Text, Atom, and more ([full list](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors)).
+
+For unsupported editors, use the `editor` config:
+
+```ts
+devtools({
+  editor: {
+    name: 'My Editor',
+    open: async (path, lineNumber, columnNumber) => {
+      const { exec } = await import('node:child_process')
+      exec(`myeditor --goto "${path}:${lineNumber}:${columnNumber}"`)
+    },
+  },
+})
+```
diff --git a/mintlify/devtools/third-party-plugins.md b/mintlify/devtools/third-party-plugins.md
new file mode 100644
index 000000000..d325a9185
--- /dev/null
+++ b/mintlify/devtools/third-party-plugins.md
@@ -0,0 +1,163 @@
+---
+title: Third-party Plugins
+id: third-party-plugins
+---
+
+While TanStack offers a suite of first-party plugins, we also want to open the doors to third-party developers. Hence, we created the marketplace.
+To be included in the marketplace registry, submit a PR to the [TanStack/devtools](https://github.com/TanStack/devtools) repository.
+
+## Inclusion in the Marketplace
+
+To add your plugin, submit the required information to the following file:
+[`packages/devtools/src/tabs/plugin-registry.ts`](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/tabs/plugin-registry.ts)
+
+### Example Entry
+
+```tsx
+'@tanstack/react-pacer-devtools': {
+  packageName: '@tanstack/react-pacer-devtools',
+  title: 'Pacer Devtools',
+  description: 'Monitor and debug your Pacer animations and transitions',
+  requires: {
+    packageName: '@tanstack/react-pacer',
+    minVersion: '0.16.4',
+  },
+  author: 'TanStack',
+  framework: 'react',
+  tags: ['TanStack'],
+},
+```
+
+## Pull Request Format
+
+As shown in the example above, the registry is an object with the following structure:
+
+**Key** – Your package name
+
+```tsx
+'@tanstack/react-pacer-devtools': { PluginMetadata }
+```
+
+**Value** – An object of type `PluginMetadata` with the following properties:
+
+- **`packageName`** – The package’s name on npm
+
+```ts
+{ packageName: string }
+```
+
+- **`title`** – The title of the plugin card
+
+```ts
+{ title: string }
+```
+
+- **`description`** – A short description of your devtools *(optional)*
+
+```ts
+{ description?: string }
+```
+
+- **`logoUrl`** – The URL of the plugin’s logo *(optional)*
+
+```ts
+{ logoUrl?: string }
+```
+
+- **`requires`** – An object containing the dependencies of your devtools *(optional)*
+
+  ```ts
+  requires?: {
+    /** Required package name (e.g., '@tanstack/react-query') */
+    packageName: string
+    /** Minimum required version (semver) */
+    minVersion: string
+    /** Maximum version (if there’s a known breaking change) */
+    maxVersion?: string
+  }
+  ```
+
+- **`pluginImport`** – An object containing plugin import details *(optional)*
+
+```ts
+pluginImport?: {
+  /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
+  importName: string
+  /** Whether this is a JSX component or a function returning a plugin */
+  type: 'jsx' | 'function'
+}
+  ```
+
+- **`pluginId`** – A string representing a custom plugin ID *(optional)*
+
+```ts
+{ pluginId?: string }
+```
+
+- **`docsUrl`** – The URL to your plugin’s documentation *(optional)*
+
+```ts
+{ docsUrl?: string }
+```
+
+- **`author`** – The author’s name for credit *(optional)*
+
+```ts
+{ author?: string }
+```
+
+- **`repoUrl`** – The URL of the plugin’s repository *(optional)*
+
+```ts
+{ repoUrl?: string }
+```
+
+- **`framework`** – The framework supported by the plugin
+
+```ts
+{ framework?: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other' }
+```
+
+- **`tags`** – Tags for filtering and categorization
+
+```ts
+{ tags?: string[] }
+```
+
+## Submitting Multiple Plugins
+
+You can submit multiple plugins if you provide devtools for different frameworks.
+For example, using the Pacer plugin from earlier, you might include a Solid version as well:
+
+```tsx
+'@tanstack/react-pacer-devtools': {
+  packageName: '@tanstack/react-pacer-devtools',
+  title: 'Pacer Devtools',
+  description: 'Monitor and debug your Pacer animations and transitions',
+  requires: {
+    packageName: '@tanstack/react-pacer',
+    minVersion: '0.16.4',
+  },
+  author: 'TanStack',
+  framework: 'react',
+  tags: ['TanStack'],
+},
+'@tanstack/solid-pacer-devtools': {
+  packageName: '@tanstack/solid-pacer-devtools',
+  title: 'Pacer Devtools',
+  description: 'Monitor and debug your Pacer animations and transitions',
+  requires: {
+    packageName: '@tanstack/solid-pacer',
+    minVersion: '0.14.4',
+  },
+  author: 'TanStack',
+  framework: 'solid',
+  tags: ['TanStack'],
+},
+```
+
+## Featured Plugins
+
+The TanStack Marketplace includes a *Featured* section for official partners of the TanStack organization and select library authors we collaborate with.
+
+To request inclusion, send an email to &lt;partners+devtools@tanstack.com>.
diff --git a/mintlify/devtools/vite-plugin.md b/mintlify/devtools/vite-plugin.md
new file mode 100644
index 000000000..91243b72c
--- /dev/null
+++ b/mintlify/devtools/vite-plugin.md
@@ -0,0 +1,250 @@
+---
+title: Vite Plugin
+id: vite-plugin
+---
+
+The Vite Plugin for TanStack Devtools provides a seamless integration for using the devtools in your Vite-powered applications. With this plugin, you get complementary features on top of the
+existing features built into the devtools like better console logs, server event bus, and enhanced debugging capabilities.
+
+## Installation
+
+To add the devtools vite plugin you need to install it as a development dependency:
+
+```sh
+npm install -D @tanstack/devtools-vite
+```
+
+Then add it as the *FIRST* plugin in your Vite config:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools(),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+And you're done!
+
+## Configuration
+
+You can configure the devtools plugin by passing options to the `devtools` function:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      // options here
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+### eventBusConfig
+
+  Configuration for the event bus that the devtools use to communicate with the client
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      eventBusConfig: {
+        // port to run the event bus on
+        port: 1234,
+        // console log debug logs or not
+        debug: false,
+        // enables the server event bus (defaults to true), you can disable it if you're running devtools in something like storybook or vitest
+        enabled: true
+      },
+    }),
+    // ... rest of your plugins here
+  ],
+}
+
+```
+
+### editor
+
+> [!IMPORTANT] 
+> `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors
+
+The open in editor configuration which has two fields, `name` and `open`,
+`name` is the name of your editor, and `open` is a function that opens the editor with the given file and line number. You can implement your version for your editor as follows:
+
+ ```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      editor: {
+        name: 'VSCode',
+        open: async (path, lineNumber, columnNumber) => {
+          const { exec } = await import('node:child_process')
+          exec(
+            // or windsurf/cursor/webstorm
+            `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
+          )
+        },
+      },
+    }),
+    // ... rest of your plugins here
+  ],
+}
+
+```
+
+### enhancedLogs
+
+  Configuration for enhanced logging. Defaults to enabled.
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      enhancedLogs: {
+        enabled: true
+      }
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+### removeDevtoolsOnBuild
+
+Whether to remove devtools from the production build. Defaults to true.
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      removeDevtoolsOnBuild: true
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+### logging
+  Whether to log information to the console. Defaults to true.
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      logging: true
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+### injectSource
+
+Configuration for source injection. Defaults to enabled.
+
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      injectSource: {
+        enabled: true,
+        ignore: {
+          // files to ignore source injection for
+          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],
+          // components to ignore source injection for
+          components: ['YourComponent', /.*Lazy$/],
+        },
+      }
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+### consolePiping
+
+Configuration for bidirectional console piping between client and server. When enabled, console logs from the client will appear in your terminal, and server logs will appear in the browser console. Defaults to enabled.
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      consolePiping: {
+        // Whether to enable console piping (defaults to true)
+        enabled: true,
+        // Which console methods to pipe (defaults to all)
+        levels: ['log', 'warn', 'error', 'info', 'debug'],
+      }
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+## Features
+
+The Vite plugin is composed of several sub-plugins, each handling a specific concern:
+
+```mermaid
+graph TD
+    vite["@tanstack/devtools-vite"]
+    vite --> source["Source Injection<br/><i>AST → data-tsd-source attrs</i>"]
+    vite --> server["Server Event Bus<br/><i>WebSocket + SSE transport</i>"]
+    vite --> strip["Production Stripping<br/><i>Remove devtools on build</i>"]
+    vite --> pipe["Console Piping<br/><i>Client ↔ Server logs</i>"]
+    vite --> logs["Enhanced Logs<br/><i>Source location in console</i>"]
+    vite --> market["Marketplace<br/><i>Install plugins via UI</i>"]
+    vite --> connect["Connection Injection<br/><i>Port/host placeholders</i>"]
+```
+
+### Go to Source
+
+The "Go to Source" feature lets you click on any element in your browser and open its source file in your editor at the exact line where it's defined. It works by injecting `data-tsd-source` attributes into your components via an AST transformation during development. These attributes encode the file path and line number of each element.
+
+To use it, activate the source inspector by holding the inspect hotkey (default: Shift+Alt+Ctrl/Meta). An overlay will highlight elements under your cursor and display their source location. Clicking on a highlighted element opens the corresponding file in your editor at the exact line, powered by `launch-editor` under the hood.
+
+For a complete guide on configuration and usage, see the [Source Inspector](/devtools/source-inspector) docs.
+
+### Console Piping
+
+When enabled (default), `console.log()` and other console methods in the browser are piped to your terminal, and server-side console output appears in the browser console. This is particularly useful when debugging SSR or API routes — you see all logs in one place without switching between terminal and browser. Configure which log levels are piped via `consolePiping.levels`.
+
+### Enhanced Logs
+
+Console logs are enhanced with clickable source locations. In the browser console, each log shows the file and line number where it originated. Click to open the source file in your editor. Enable/disable via the `enhancedLogs` config option.
+
+### Production Build Stripping
+
+By default (`removeDevtoolsOnBuild: true`), the Vite plugin replaces all devtools imports with empty modules in production builds. This includes:
+- `@tanstack/react-devtools`
+- `@tanstack/vue-devtools`
+- `@tanstack/solid-devtools`
+- `@tanstack/preact-devtools`
+- `@tanstack/devtools`
+
+This ensures zero devtools code reaches production. Set `removeDevtoolsOnBuild: false` to keep devtools in production (see [Production](/devtools/production) docs).
+
+### Plugin Marketplace
+
+The Vite plugin enables the in-devtools plugin marketplace. When you browse available plugins in the devtools Settings tab and click "Install", the Vite plugin handles the npm/pnpm/yarn installation and automatically injects the plugin import into your devtools setup file. This only works during development with the Vite dev server running.
diff --git a/mintlify/docs.json b/mintlify/docs.json
new file mode 100644
index 000000000..9db4a6096
--- /dev/null
+++ b/mintlify/docs.json
@@ -0,0 +1,6064 @@
+{
+  "$schema": "https://mintlify.com/docs.json",
+  "theme": "mint",
+  "name": "TanStack Documentation",
+  "description": "A community Mintlify port of the current open-source TanStack documentation.",
+  "colors": {
+    "primary": "#0EA5E9",
+    "light": "#38BDF8",
+    "dark": "#0369A1"
+  },
+  "icons": {
+    "library": "lucide"
+  },
+  "appearance": {
+    "default": "system"
+  },
+  "styling": {
+    "eyebrows": "breadcrumbs",
+    "codeblocks": "system"
+  },
+  "interaction": {
+    "drilldown": false
+  },
+  "navigation": {
+    "global": {
+      "anchors": [
+        {
+          "anchor": "Official TanStack site",
+          "href": "https://tanstack.com",
+          "icon": "external-link"
+        },
+        {
+          "anchor": "GitHub fork",
+          "href": "https://github.com/raunakdoesdev/tanstack.com",
+          "icon": "github"
+        }
+      ]
+    },
+    "products": [
+      {
+        "product": "Ecosystem overview",
+        "description": "Port scope, product index, and source attribution",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "index",
+              "attribution"
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Start",
+        "description": "Full-stack framework powered by TanStack Router",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "start/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "start/framework/react/overview",
+                  "start/framework/react/getting-started",
+                  "start/framework/react/build-from-scratch",
+                  "start/framework/react/comparison",
+                  "start/framework/react/start-vs-nextjs",
+                  "start/framework/react/migrate-from-next-js"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "start/framework/solid/overview",
+                  "start/framework/solid/getting-started",
+                  "start/framework/solid/build-from-scratch"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "start/framework/react/guide/routing",
+                  "start/framework/react/guide/execution-model",
+                  "start/framework/react/guide/code-execution-patterns",
+                  "start/framework/react/guide/import-protection",
+                  "start/framework/react/guide/environment-variables",
+                  "start/framework/react/guide/server-functions",
+                  "start/framework/react/guide/server-components",
+                  "start/framework/react/guide/static-server-functions",
+                  "start/framework/react/guide/environment-functions",
+                  "start/framework/react/guide/middleware",
+                  "start/framework/react/guide/error-boundaries",
+                  "start/framework/react/guide/server-routes",
+                  "start/framework/react/guide/hydration-errors",
+                  "start/framework/react/guide/deferred-hydration",
+                  "start/framework/react/guide/selective-ssr",
+                  "start/framework/react/guide/spa-mode",
+                  "start/framework/react/guide/static-prerendering",
+                  "start/framework/react/guide/isr",
+                  "start/framework/react/guide/server-entry-point",
+                  "start/framework/react/guide/early-hints",
+                  "start/framework/react/guide/cdn-asset-urls",
+                  "start/framework/react/guide/css-styling",
+                  "start/framework/react/guide/client-entry-point",
+                  "start/framework/react/guide/hosting",
+                  "start/framework/react/guide/authentication-overview",
+                  "start/framework/react/guide/authentication-server-primitives",
+                  "start/framework/react/guide/authentication",
+                  "start/framework/react/guide/databases",
+                  "start/framework/react/guide/observability",
+                  "start/framework/react/guide/path-aliases",
+                  "start/framework/react/guide/tailwind-integration",
+                  "start/framework/react/guide/rendering-markdown",
+                  "start/framework/react/guide/seo",
+                  "start/framework/react/guide/geo"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "start/framework/solid/guide/routing",
+                  "start/framework/solid/guide/execution-model",
+                  "start/framework/solid/guide/code-execution-patterns",
+                  "start/framework/solid/guide/import-protection",
+                  "start/framework/solid/guide/environment-variables",
+                  "start/framework/solid/guide/server-functions",
+                  "start/framework/solid/guide/static-server-functions",
+                  "start/framework/solid/guide/environment-functions",
+                  "start/framework/solid/guide/middleware",
+                  "start/framework/solid/guide/error-boundaries",
+                  "start/framework/solid/guide/server-routes",
+                  "start/framework/solid/guide/hydration-errors",
+                  "start/framework/solid/guide/deferred-hydration",
+                  "start/framework/solid/guide/selective-ssr",
+                  "start/framework/solid/guide/spa-mode",
+                  "start/framework/solid/guide/static-prerendering",
+                  "start/framework/solid/guide/server-entry-point",
+                  "start/framework/solid/guide/early-hints",
+                  "start/framework/solid/guide/css-styling",
+                  "start/framework/solid/guide/client-entry-point",
+                  "start/framework/solid/guide/hosting",
+                  "start/framework/solid/guide/authentication-overview",
+                  "start/framework/solid/guide/authentication-server-primitives",
+                  "start/framework/solid/guide/authentication",
+                  "start/framework/solid/guide/databases",
+                  "start/framework/solid/guide/observability",
+                  "start/framework/solid/guide/path-aliases",
+                  "start/framework/solid/guide/tailwind-integration",
+                  "start/framework/solid/guide/seo",
+                  "start/framework/solid/guide/geo"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "start/framework/react/examples/start-basic",
+                  "start/framework/react/examples/start-basic-react-query",
+                  "start/framework/react/examples/start-clerk-basic",
+                  "start/framework/react/examples/start-basic-auth",
+                  "start/framework/react/examples/start-supabase-basic",
+                  "start/framework/react/examples/start-convex-trellaux",
+                  "start/framework/react/examples/start-trellaux",
+                  "start/framework/react/examples/start-workos",
+                  "start/framework/react/examples/start-material-ui",
+                  "start/framework/react/examples/start-basic-authjs",
+                  "start/framework/react/examples/start-basic-static",
+                  "start/framework/react/examples/start-basic-cloudflare"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "start/framework/solid/examples/start-basic",
+                  "start/framework/solid/examples/start-basic-solid-query",
+                  "start/framework/solid/examples/start-basic-auth",
+                  "start/framework/solid/examples/start-supabase-basic",
+                  "start/framework/solid/examples/start-convex-better-auth",
+                  "start/framework/solid/examples/start-basic-authjs",
+                  "start/framework/solid/examples/start-basic-static",
+                  "start/framework/solid/examples/start-basic-cloudflare",
+                  "start/framework/solid/examples/start-basic-netlify",
+                  "start/framework/solid/examples/start-basic-nitro"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Tutorials",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "start/framework/react/tutorial/reading-writing-file",
+                  "start/framework/react/tutorial/fetching-external-api"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "start/framework/solid/tutorial/reading-writing-file",
+                  "start/framework/solid/tutorial/fetching-external-api"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Eslint",
+                "expanded": false,
+                "pages": [
+                  "start/eslint/eslint-plugin-start",
+                  "start/eslint/no-async-client-component",
+                  "start/eslint/no-client-code-in-server-component"
+                ]
+              },
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "start/framework/react/guide/streaming-data-from-server-functions",
+                  "start/framework/solid/guide/reading-writing-file"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Router",
+        "description": "Type-safe routing for React and Solid applications",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "router/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "router/overview",
+              "router/quick-start",
+              "router/devtools",
+              "router/decisions-on-dx",
+              "router/comparison",
+              "router/faq"
+            ]
+          },
+          {
+            "group": "Installation Guides",
+            "pages": [
+              "router/installation/manual",
+              "router/installation/with-vite",
+              "router/installation/with-rspack",
+              "router/installation/with-webpack",
+              "router/installation/with-esbuild",
+              "router/installation/with-router-cli",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "router/installation/migrate-from-react-router",
+                  "router/installation/migrate-from-react-location"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Routing",
+            "pages": [
+              "router/routing/routing-concepts",
+              "router/routing/route-trees",
+              "router/routing/route-matching",
+              "router/routing/file-based-routing",
+              "router/routing/virtual-file-routes",
+              "router/routing/code-based-routing",
+              "router/routing/file-naming-conventions"
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "router/guide/code-splitting",
+              "router/guide/automatic-code-splitting",
+              "router/guide/creating-a-router",
+              "router/guide/outlets",
+              "router/guide/navigation",
+              "router/guide/router-events",
+              "router/guide/path-params",
+              "router/guide/search-params",
+              "router/guide/link-options",
+              "router/guide/custom-link",
+              "router/guide/data-loading",
+              "router/guide/deferred-data-loading",
+              "router/guide/external-data-loading",
+              "router/guide/data-mutations",
+              "router/guide/type-safety",
+              "router/guide/type-utilities",
+              "router/guide/preloading",
+              "router/guide/document-head-management",
+              "router/guide/route-masking",
+              "router/guide/navigation-blocking",
+              "router/guide/custom-search-param-serialization",
+              "router/guide/history-types",
+              "router/guide/router-context",
+              "router/guide/not-found-errors",
+              "router/guide/authenticated-routes",
+              "router/guide/scroll-restoration",
+              "router/guide/static-route-data",
+              "router/guide/ssr",
+              "router/guide/render-optimizations"
+            ]
+          },
+          {
+            "group": "API",
+            "pages": [
+              "router/api/router",
+              "router/api/file-based-routing"
+            ]
+          },
+          {
+            "group": "Integrations",
+            "pages": [
+              "router/integrations/query"
+            ]
+          },
+          {
+            "group": "ESLint",
+            "pages": [
+              "router/eslint/eslint-plugin-router",
+              "router/eslint/create-route-property-order"
+            ]
+          },
+          {
+            "group": "Router Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "router/framework/react/examples/quickstart-file-based",
+                  "router/framework/react/examples/quickstart",
+                  "router/framework/react/examples/basic-file-based",
+                  "router/framework/react/examples/basic",
+                  "router/framework/react/examples/basic-react-query-file-based",
+                  "router/framework/react/examples/basic-react-query",
+                  "router/framework/react/examples/basic-ssr-file-based",
+                  "router/framework/react/examples/basic-ssr-streaming-file-based",
+                  "router/framework/react/examples/kitchen-sink-file-based",
+                  "router/framework/react/examples/kitchen-sink",
+                  "router/framework/react/examples/kitchen-sink-react-query-file-based",
+                  "router/framework/react/examples/kitchen-sink-react-query",
+                  "router/framework/react/examples/location-masking",
+                  "router/framework/react/examples/authenticated-routes",
+                  "router/framework/react/examples/scroll-restoration",
+                  "router/framework/react/examples/deferred-data",
+                  "router/framework/react/examples/navigation-blocking",
+                  "router/framework/react/examples/view-transitions",
+                  "router/framework/react/examples/with-framer-motion",
+                  "router/framework/react/examples/with-trpc",
+                  "router/framework/react/examples/with-trpc-react-query",
+                  "router/framework/react/examples/router-monorepo-simple",
+                  "router/framework/react/examples/router-monorepo-simple-lazy",
+                  "router/framework/react/examples/router-monorepo-react-query"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "router/framework/solid/examples/quickstart-file-based",
+                  "router/framework/solid/examples/quickstart",
+                  "router/framework/solid/examples/basic-file-based",
+                  "router/framework/solid/examples/basic-solid-query-file-based",
+                  "router/framework/solid/examples/basic-solid-query",
+                  "router/framework/solid/examples/basic-ssr-file-based",
+                  "router/framework/solid/examples/basic-ssr-streaming-file-based",
+                  "router/framework/solid/examples/kitchen-sink",
+                  "router/framework/solid/examples/kitchen-sink-file-based",
+                  "router/framework/solid/examples/kitchen-sink-solid-query-file-based",
+                  "router/framework/solid/examples/kitchen-sink-solid-query",
+                  "router/framework/solid/examples/location-masking",
+                  "router/framework/solid/examples/authenticated-routes",
+                  "router/framework/solid/examples/scroll-restoration",
+                  "router/framework/solid/examples/deferred-data",
+                  "router/framework/solid/examples/navigation-blocking",
+                  "router/framework/solid/examples/view-transitions",
+                  "router/framework/solid/examples/with-framer-motion",
+                  "router/framework/solid/examples/with-trpc",
+                  "router/framework/solid/examples/router-monorepo-simple",
+                  "router/framework/solid/examples/router-monorepo-simple-lazy",
+                  "router/framework/solid/examples/router-monorepo-solid-query"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Api",
+                "expanded": false,
+                "pages": [
+                  "router/api/router/ActiveLinkOptionsType",
+                  "router/api/router/AsyncRouteComponentType",
+                  "router/api/router/FileRouteClass",
+                  "router/api/router/LinkOptionsType",
+                  "router/api/router/LinkPropsType",
+                  "router/api/router/MatchRouteOptionsType",
+                  "router/api/router/NavigateOptionsType",
+                  "router/api/router/NotFoundErrorType",
+                  "router/api/router/NotFoundRouteClass",
+                  "router/api/router/ParsedHistoryStateType",
+                  "router/api/router/ParsedLocationType",
+                  "router/api/router/RedirectType",
+                  "router/api/router/RegisterType",
+                  "router/api/router/RootRouteClass",
+                  "router/api/router/RouteApiClass",
+                  "router/api/router/RouteApiType",
+                  "router/api/router/RouteClass",
+                  "router/api/router/RouteMaskType",
+                  "router/api/router/RouteMatchType",
+                  "router/api/router/RouteOptionsType",
+                  "router/api/router/RouteType",
+                  "router/api/router/RouterClass",
+                  "router/api/router/RouterEventsType",
+                  "router/api/router/RouterOptionsType",
+                  "router/api/router/RouterStateType",
+                  "router/api/router/RouterType",
+                  "router/api/router/ToMaskOptionsType",
+                  "router/api/router/ToOptionsType",
+                  "router/api/router/UseMatchRouteOptionsType",
+                  "router/api/router/ViewTransitionOptionsType",
+                  "router/api/router/awaitComponent",
+                  "router/api/router/catchBoundaryComponent",
+                  "router/api/router/catchNotFoundComponent",
+                  "router/api/router/clientOnlyComponent",
+                  "router/api/router/createFileRouteFunction",
+                  "router/api/router/createLazyFileRouteFunction",
+                  "router/api/router/createLazyRouteFunction",
+                  "router/api/router/createRootRouteFunction",
+                  "router/api/router/createRootRouteWithContextFunction",
+                  "router/api/router/createRouteFunction",
+                  "router/api/router/createRouteMaskFunction",
+                  "router/api/router/createRouterFunction",
+                  "router/api/router/defaultGlobalNotFoundComponent",
+                  "router/api/router/deferFunction",
+                  "router/api/router/errorComponentComponent",
+                  "router/api/router/getRouteApiFunction",
+                  "router/api/router/historyStateInterface",
+                  "router/api/router/isNotFoundFunction",
+                  "router/api/router/isRedirectFunction",
+                  "router/api/router/lazyRouteComponentFunction",
+                  "router/api/router/linkComponent",
+                  "router/api/router/linkOptions",
+                  "router/api/router/matchRouteComponent",
+                  "router/api/router/navigateComponent",
+                  "router/api/router/notFoundComponentComponent",
+                  "router/api/router/notFoundFunction",
+                  "router/api/router/outletComponent",
+                  "router/api/router/redirectFunction",
+                  "router/api/router/retainSearchParamsFunction",
+                  "router/api/router/rootRouteWithContextFunction",
+                  "router/api/router/stripSearchParamsFunction",
+                  "router/api/router/useAwaitedHook",
+                  "router/api/router/useBlockerHook",
+                  "router/api/router/useCanGoBack",
+                  "router/api/router/useChildMatchesHook",
+                  "router/api/router/useLinkPropsHook",
+                  "router/api/router/useLoaderDataHook",
+                  "router/api/router/useLoaderDepsHook",
+                  "router/api/router/useLocationHook",
+                  "router/api/router/useMatchHook",
+                  "router/api/router/useMatchRouteHook",
+                  "router/api/router/useMatchesHook",
+                  "router/api/router/useNavigateHook",
+                  "router/api/router/useParamsHook",
+                  "router/api/router/useParentMatchesHook",
+                  "router/api/router/useRouteContextHook",
+                  "router/api/router/useRouterHook",
+                  "router/api/router/useRouterStateHook",
+                  "router/api/router/useSearchHook"
+                ]
+              },
+              {
+                "group": "Guide",
+                "expanded": false,
+                "pages": [
+                  "router/guide/internationalization-i18n",
+                  "router/guide/parallel-routes",
+                  "router/guide/url-rewrites"
+                ]
+              },
+              {
+                "group": "How To",
+                "expanded": false,
+                "pages": [
+                  "router/how-to/arrays-objects-dates-search-params",
+                  "router/how-to/debug-router-issues",
+                  "router/how-to/deploy-to-production",
+                  "router/how-to/drafts/build-search-filtering-systems.draft",
+                  "router/how-to/drafts/index",
+                  "router/how-to/drafts/optimize-search-param-performance.draft",
+                  "router/how-to/drafts/search-params-in-forms.draft",
+                  "router/how-to/index",
+                  "router/how-to/install",
+                  "router/how-to/integrate-chakra-ui",
+                  "router/how-to/integrate-framer-motion",
+                  "router/how-to/integrate-material-ui",
+                  "router/how-to/integrate-shadcn-ui",
+                  "router/how-to/migrate-from-react-router",
+                  "router/how-to/navigate-with-search-params",
+                  "router/how-to/setup-auth-providers",
+                  "router/how-to/setup-authentication",
+                  "router/how-to/setup-basic-search-params",
+                  "router/how-to/setup-rbac",
+                  "router/how-to/setup-ssr",
+                  "router/how-to/setup-testing",
+                  "router/how-to/share-search-params-across-routes",
+                  "router/how-to/test-file-based-routing",
+                  "router/how-to/use-environment-variables",
+                  "router/how-to/validate-search-params"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Query",
+        "description": "Asynchronous state management and data fetching",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "query/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "query/framework/react/overview",
+                  "query/framework/react/installation",
+                  "query/framework/react/quick-start",
+                  "query/framework/react/devtools",
+                  "query/framework/react/comparison",
+                  "query/framework/react/typescript",
+                  "query/framework/react/graphql",
+                  "query/framework/react/react-native"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "query/framework/solid/overview",
+                  "query/framework/solid/quick-start",
+                  "query/framework/solid/installation",
+                  "query/framework/solid/devtools",
+                  "query/framework/solid/typescript"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "query/framework/vue/overview",
+                  "query/framework/vue/installation",
+                  "query/framework/vue/quick-start",
+                  "query/framework/vue/devtools",
+                  "query/framework/vue/typescript",
+                  "query/framework/vue/reactivity",
+                  "query/framework/vue/graphql"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "query/framework/svelte/overview",
+                  "query/framework/svelte/installation",
+                  "query/framework/svelte/devtools",
+                  "query/framework/svelte/ssr",
+                  "query/framework/svelte/migrate-from-v5-to-v6"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "query/framework/lit/overview",
+                  "query/framework/lit/installation",
+                  "query/framework/lit/quick-start",
+                  "query/framework/lit/typescript"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "query/framework/angular/overview",
+                  "query/framework/angular/installation",
+                  "query/framework/angular/quick-start",
+                  "query/framework/angular/angular-httpclient-and-other-data-fetching-clients",
+                  "query/framework/angular/devtools",
+                  "query/framework/angular/typescript",
+                  "query/framework/angular/zoneless"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "query/framework/preact/overview",
+                  "query/framework/preact/installation",
+                  "query/framework/preact/quick-start",
+                  "query/framework/preact/devtools",
+                  "query/framework/preact/typescript",
+                  "query/framework/preact/graphql"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides & Concepts",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "query/framework/react/guides/important-defaults",
+                  "query/framework/react/guides/queries",
+                  "query/framework/react/guides/query-keys",
+                  "query/framework/react/guides/query-functions",
+                  "query/framework/react/guides/query-options",
+                  "query/framework/react/guides/network-mode",
+                  "query/framework/react/guides/parallel-queries",
+                  "query/framework/react/guides/dependent-queries",
+                  "query/framework/react/guides/background-fetching-indicators",
+                  "query/framework/react/guides/window-focus-refetching",
+                  "query/framework/react/guides/polling",
+                  "query/framework/react/guides/disabling-queries",
+                  "query/framework/react/guides/query-retries",
+                  "query/framework/react/guides/paginated-queries",
+                  "query/framework/react/guides/infinite-queries",
+                  "query/framework/react/guides/initial-query-data",
+                  "query/framework/react/guides/placeholder-query-data",
+                  "query/framework/react/guides/mutations",
+                  "query/framework/react/guides/query-invalidation",
+                  "query/framework/react/guides/invalidations-from-mutations",
+                  "query/framework/react/guides/updates-from-mutation-responses",
+                  "query/framework/react/guides/optimistic-updates",
+                  "query/framework/react/guides/query-cancellation",
+                  "query/framework/react/guides/scroll-restoration",
+                  "query/framework/react/guides/filters",
+                  "query/framework/react/guides/request-waterfalls",
+                  "query/framework/react/guides/prefetching",
+                  "query/framework/react/guides/ssr",
+                  "query/framework/react/guides/advanced-ssr",
+                  "query/framework/react/guides/caching",
+                  "query/framework/react/guides/render-optimizations",
+                  "query/framework/react/guides/default-query-function",
+                  "query/framework/react/guides/suspense",
+                  "query/framework/react/guides/testing",
+                  "query/framework/react/guides/does-this-replace-client-state",
+                  "query/framework/react/guides/migrating-to-react-query-3",
+                  "query/framework/react/guides/migrating-to-react-query-4",
+                  "query/framework/react/guides/migrating-to-v5"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "query/framework/solid/guides/important-defaults",
+                  "query/framework/solid/guides/queries",
+                  "query/framework/solid/guides/query-keys",
+                  "query/framework/solid/guides/query-functions",
+                  "query/framework/solid/guides/query-options",
+                  "query/framework/solid/guides/network-mode",
+                  "query/framework/solid/guides/parallel-queries",
+                  "query/framework/solid/guides/dependent-queries",
+                  "query/framework/solid/guides/background-fetching-indicators",
+                  "query/framework/solid/guides/window-focus-refetching",
+                  "query/framework/solid/guides/polling",
+                  "query/framework/solid/guides/disabling-queries",
+                  "query/framework/solid/guides/query-retries",
+                  "query/framework/solid/guides/paginated-queries",
+                  "query/framework/solid/guides/infinite-queries",
+                  "query/framework/solid/guides/initial-query-data",
+                  "query/framework/solid/guides/placeholder-query-data",
+                  "query/framework/solid/guides/mutations",
+                  "query/framework/solid/guides/query-invalidation",
+                  "query/framework/solid/guides/invalidations-from-mutations",
+                  "query/framework/solid/guides/updates-from-mutation-responses",
+                  "query/framework/solid/guides/optimistic-updates",
+                  "query/framework/solid/guides/query-cancellation",
+                  "query/framework/solid/guides/scroll-restoration",
+                  "query/framework/solid/guides/filters",
+                  "query/framework/solid/guides/request-waterfalls",
+                  "query/framework/solid/guides/prefetching",
+                  "query/framework/solid/guides/ssr",
+                  "query/framework/solid/guides/advanced-ssr",
+                  "query/framework/solid/guides/caching",
+                  "query/framework/solid/guides/default-query-function",
+                  "query/framework/solid/guides/suspense",
+                  "query/framework/solid/guides/testing",
+                  "query/framework/solid/guides/does-this-replace-client-state"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "query/framework/vue/guides/important-defaults",
+                  "query/framework/vue/guides/queries",
+                  "query/framework/vue/guides/query-keys",
+                  "query/framework/vue/guides/query-functions",
+                  "query/framework/vue/guides/query-options",
+                  "query/framework/vue/guides/network-mode",
+                  "query/framework/vue/guides/parallel-queries",
+                  "query/framework/vue/guides/dependent-queries",
+                  "query/framework/vue/guides/background-fetching-indicators",
+                  "query/framework/vue/guides/window-focus-refetching",
+                  "query/framework/vue/guides/polling",
+                  "query/framework/vue/guides/disabling-queries",
+                  "query/framework/vue/guides/query-retries",
+                  "query/framework/vue/guides/paginated-queries",
+                  "query/framework/vue/guides/infinite-queries",
+                  "query/framework/vue/guides/initial-query-data",
+                  "query/framework/vue/guides/placeholder-query-data",
+                  "query/framework/vue/guides/mutations",
+                  "query/framework/vue/guides/query-invalidation",
+                  "query/framework/vue/guides/invalidations-from-mutations",
+                  "query/framework/vue/guides/updates-from-mutation-responses",
+                  "query/framework/vue/guides/optimistic-updates",
+                  "query/framework/vue/guides/query-cancellation",
+                  "query/framework/vue/guides/scroll-restoration",
+                  "query/framework/vue/guides/filters",
+                  "query/framework/vue/guides/prefetching",
+                  "query/framework/vue/guides/ssr",
+                  "query/framework/vue/guides/caching",
+                  "query/framework/vue/guides/default-query-function",
+                  "query/framework/vue/guides/suspense",
+                  "query/framework/vue/guides/testing",
+                  "query/framework/vue/guides/custom-client",
+                  "query/framework/vue/guides/does-this-replace-client-state",
+                  "query/framework/vue/guides/migrating-to-v5"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "query/framework/angular/guides/important-defaults",
+                  "query/framework/angular/guides/queries",
+                  "query/framework/angular/guides/query-keys",
+                  "query/framework/angular/guides/query-functions",
+                  "query/framework/angular/guides/query-options",
+                  "query/framework/angular/guides/network-mode",
+                  "query/framework/angular/guides/parallel-queries",
+                  "query/framework/angular/guides/dependent-queries",
+                  "query/framework/angular/guides/background-fetching-indicators",
+                  "query/framework/angular/guides/window-focus-refetching",
+                  "query/framework/angular/guides/disabling-queries",
+                  "query/framework/angular/guides/query-retries",
+                  "query/framework/angular/guides/paginated-queries",
+                  "query/framework/angular/guides/infinite-queries",
+                  "query/framework/angular/guides/initial-query-data",
+                  "query/framework/angular/guides/placeholder-query-data",
+                  "query/framework/angular/guides/mutations",
+                  "query/framework/angular/guides/mutation-options",
+                  "query/framework/angular/guides/query-invalidation",
+                  "query/framework/angular/guides/invalidations-from-mutations",
+                  "query/framework/angular/guides/optimistic-updates",
+                  "query/framework/angular/guides/query-cancellation",
+                  "query/framework/angular/guides/scroll-restoration",
+                  "query/framework/angular/guides/filters",
+                  "query/framework/angular/guides/caching",
+                  "query/framework/angular/guides/default-query-function",
+                  "query/framework/angular/guides/testing",
+                  "query/framework/angular/guides/does-this-replace-client-state"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "query/framework/lit/guides/reactive-controllers-vs-hooks",
+                  "query/framework/lit/guides/queries",
+                  "query/framework/lit/guides/parallel-queries",
+                  "query/framework/lit/guides/query-keys",
+                  "query/framework/lit/guides/query-functions",
+                  "query/framework/lit/guides/mutations",
+                  "query/framework/lit/guides/query-invalidation",
+                  "query/framework/lit/guides/infinite-queries",
+                  "query/framework/lit/guides/ssr"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "query/framework/preact/guides/important-defaults",
+                  "query/framework/preact/guides/queries",
+                  "query/framework/preact/guides/query-keys",
+                  "query/framework/preact/guides/query-functions",
+                  "query/framework/preact/guides/query-options",
+                  "query/framework/preact/guides/network-mode",
+                  "query/framework/preact/guides/parallel-queries",
+                  "query/framework/preact/guides/dependent-queries",
+                  "query/framework/preact/guides/background-fetching-indicators",
+                  "query/framework/preact/guides/window-focus-refetching",
+                  "query/framework/preact/guides/polling",
+                  "query/framework/preact/guides/disabling-queries",
+                  "query/framework/preact/guides/query-retries",
+                  "query/framework/preact/guides/paginated-queries",
+                  "query/framework/preact/guides/infinite-queries",
+                  "query/framework/preact/guides/initial-query-data",
+                  "query/framework/preact/guides/placeholder-query-data",
+                  "query/framework/preact/guides/mutations",
+                  "query/framework/preact/guides/query-invalidation",
+                  "query/framework/preact/guides/invalidations-from-mutations",
+                  "query/framework/preact/guides/updates-from-mutation-responses",
+                  "query/framework/preact/guides/optimistic-updates",
+                  "query/framework/preact/guides/query-cancellation",
+                  "query/framework/preact/guides/scroll-restoration",
+                  "query/framework/preact/guides/filters",
+                  "query/framework/preact/guides/request-waterfalls",
+                  "query/framework/preact/guides/prefetching",
+                  "query/framework/preact/guides/caching",
+                  "query/framework/preact/guides/render-optimizations",
+                  "query/framework/preact/guides/default-query-function",
+                  "query/framework/preact/guides/does-this-replace-client-state"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "query/reference/QueryClient",
+              "query/reference/QueryCache",
+              "query/reference/MutationCache",
+              "query/reference/QueryObserver",
+              "query/reference/InfiniteQueryObserver",
+              "query/reference/QueriesObserver",
+              "query/reference/streamedQuery",
+              "query/reference/focusManager",
+              "query/reference/onlineManager",
+              "query/reference/environmentManager",
+              "query/reference/notifyManager",
+              "query/reference/timeoutManager",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "query/framework/react/reference/useQuery",
+                  "query/framework/react/reference/useQueries",
+                  "query/framework/react/reference/useInfiniteQuery",
+                  "query/framework/react/reference/useMutation",
+                  "query/framework/react/reference/useIsFetching",
+                  "query/framework/react/reference/useIsMutating",
+                  "query/framework/react/reference/useMutationState",
+                  "query/framework/react/reference/useSuspenseQuery",
+                  "query/framework/react/reference/useSuspenseInfiniteQuery",
+                  "query/framework/react/reference/useSuspenseQueries",
+                  "query/framework/react/reference/QueryClientProvider",
+                  "query/framework/react/reference/useQueryClient",
+                  "query/framework/react/reference/queryOptions",
+                  "query/framework/react/reference/infiniteQueryOptions",
+                  "query/framework/react/reference/mutationOptions",
+                  "query/framework/react/reference/usePrefetchQuery",
+                  "query/framework/react/reference/usePrefetchInfiniteQuery",
+                  "query/framework/react/reference/QueryErrorResetBoundary",
+                  "query/framework/react/reference/useQueryErrorResetBoundary",
+                  "query/framework/react/reference/hydration"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "query/framework/vue/reference/useQuery",
+                  "query/framework/vue/reference/useQueries",
+                  "query/framework/vue/reference/useInfiniteQuery",
+                  "query/framework/vue/reference/useMutation",
+                  "query/framework/vue/reference/useIsFetching",
+                  "query/framework/vue/reference/useIsMutating",
+                  "query/framework/vue/reference/useMutationState",
+                  "query/framework/vue/reference/useQueryClient",
+                  "query/framework/vue/reference/queryOptions",
+                  "query/framework/vue/reference/infiniteQueryOptions",
+                  "query/framework/vue/reference/mutationOptions",
+                  "query/framework/vue/reference/usePrefetchQuery",
+                  "query/framework/vue/reference/usePrefetchInfiniteQuery",
+                  "query/framework/vue/reference/hydration"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "query/framework/solid/reference/useQuery",
+                  "query/framework/solid/reference/useQueries",
+                  "query/framework/solid/reference/useInfiniteQuery",
+                  "query/framework/solid/reference/useMutation",
+                  "query/framework/solid/reference/useIsFetching",
+                  "query/framework/solid/reference/useIsMutating",
+                  "query/framework/solid/reference/useMutationState",
+                  "query/framework/solid/reference/queryOptions",
+                  "query/framework/solid/reference/infiniteQueryOptions",
+                  "query/framework/solid/reference/mutationOptions",
+                  "query/framework/solid/reference/hydration"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "query/framework/svelte/reference/index",
+                  "query/framework/svelte/reference/functions/createQuery",
+                  "query/framework/svelte/reference/functions/createQueries",
+                  "query/framework/svelte/reference/functions/createInfiniteQuery",
+                  "query/framework/svelte/reference/functions/createMutation",
+                  "query/framework/svelte/reference/functions/useIsFetching",
+                  "query/framework/svelte/reference/functions/useIsMutating",
+                  "query/framework/svelte/reference/functions/useMutationState",
+                  "query/framework/svelte/reference/functions/queryOptions",
+                  "query/framework/svelte/reference/functions/infiniteQueryOptions",
+                  "query/framework/svelte/reference/functions/mutationOptions"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "query/framework/lit/reference/index",
+                  "query/framework/lit/reference/classes/QueryClientProvider",
+                  "query/framework/lit/reference/functions/createQueryController",
+                  "query/framework/lit/reference/functions/createQueriesController",
+                  "query/framework/lit/reference/functions/createInfiniteQueryController",
+                  "query/framework/lit/reference/functions/createMutationController",
+                  "query/framework/lit/reference/functions/useIsFetching",
+                  "query/framework/lit/reference/functions/useIsMutating",
+                  "query/framework/lit/reference/functions/useMutationState",
+                  "query/framework/lit/reference/functions/useQueryClient",
+                  "query/framework/lit/reference/functions/queryOptions",
+                  "query/framework/lit/reference/functions/infiniteQueryOptions",
+                  "query/framework/lit/reference/functions/mutationOptions",
+                  "query/framework/lit/reference/variables/queryClientContext",
+                  "query/framework/lit/reference/functions/getDefaultQueryClient",
+                  "query/framework/lit/reference/functions/registerDefaultQueryClient",
+                  "query/framework/lit/reference/functions/unregisterDefaultQueryClient",
+                  "query/framework/lit/reference/functions/resolveQueryClient"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "query/framework/angular/reference/index",
+                  "query/framework/angular/reference/functions/injectQuery",
+                  "query/framework/angular/reference/functions/injectMutation"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "query/framework/preact/reference/functions/useQuery",
+                  "query/framework/preact/reference/functions/useQueries",
+                  "query/framework/preact/reference/functions/useInfiniteQuery",
+                  "query/framework/preact/reference/functions/useMutation",
+                  "query/framework/preact/reference/functions/useIsFetching",
+                  "query/framework/preact/reference/functions/useIsMutating",
+                  "query/framework/preact/reference/functions/useMutationState",
+                  "query/framework/preact/reference/functions/useSuspenseQuery",
+                  "query/framework/preact/reference/functions/useSuspenseInfiniteQuery",
+                  "query/framework/preact/reference/functions/useSuspenseQueries",
+                  "query/framework/preact/reference/functions/QueryClientProvider",
+                  "query/framework/preact/reference/functions/useQueryClient",
+                  "query/framework/preact/reference/functions/queryOptions",
+                  "query/framework/preact/reference/functions/infiniteQueryOptions",
+                  "query/framework/preact/reference/functions/mutationOptions",
+                  "query/framework/preact/reference/functions/usePrefetchQuery",
+                  "query/framework/preact/reference/functions/usePrefetchInfiniteQuery",
+                  "query/framework/preact/reference/functions/QueryErrorResetBoundary",
+                  "query/framework/preact/reference/functions/useQueryErrorResetBoundary",
+                  "query/framework/preact/reference/functions/HydrationBoundary"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "ESLint",
+            "pages": [
+              "query/eslint/eslint-plugin-query",
+              "query/eslint/exhaustive-deps",
+              "query/eslint/stable-query-client",
+              "query/eslint/no-rest-destructuring",
+              "query/eslint/no-unstable-deps",
+              "query/eslint/infinite-query-property-order",
+              "query/eslint/no-void-query-fn",
+              "query/eslint/mutation-property-order",
+              "query/eslint/prefer-query-options"
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "query/framework/react/examples/simple",
+                  "query/framework/react/examples/basic",
+                  "query/framework/react/examples/basic-graphql-request",
+                  "query/framework/react/examples/auto-refetching",
+                  "query/framework/react/examples/optimistic-updates-ui",
+                  "query/framework/react/examples/optimistic-updates-cache",
+                  "query/framework/react/examples/pagination",
+                  "query/framework/react/examples/load-more-infinite-scroll",
+                  "query/framework/react/examples/infinite-query-with-max-pages",
+                  "query/framework/react/examples/suspense",
+                  "query/framework/react/examples/default-query-function",
+                  "query/framework/react/examples/playground",
+                  "query/framework/react/examples/prefetching",
+                  "query/framework/react/examples/star-wars",
+                  "query/framework/react/examples/rick-morty",
+                  "query/framework/react/examples/nextjs",
+                  "query/framework/react/examples/nextjs-app-prefetching",
+                  "query/framework/react/examples/nextjs-suspense-streaming",
+                  "query/framework/react/examples/react-native",
+                  "query/framework/react/examples/react-router",
+                  "query/framework/react/examples/offline",
+                  "query/framework/react/examples/algolia",
+                  "query/framework/react/examples/shadow-dom",
+                  "query/framework/react/examples/devtools-panel",
+                  "query/framework/react/examples/chat"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "query/framework/solid/examples/simple",
+                  "query/framework/solid/examples/basic",
+                  "query/framework/solid/examples/basic-graphql-request",
+                  "query/framework/solid/examples/default-query-function",
+                  "query/framework/solid/examples/solid-start-streaming",
+                  "query/framework/solid/examples/astro",
+                  "query/framework/solid/examples/offline"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "query/framework/vue/examples/basic",
+                  "query/framework/vue/examples/2.6-basic",
+                  "query/framework/vue/examples/2.7-basic",
+                  "query/framework/vue/examples/nuxt3",
+                  "query/framework/vue/examples/persister"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "query/framework/svelte/examples/simple",
+                  "query/framework/svelte/examples/basic",
+                  "query/framework/svelte/examples/auto-refetching",
+                  "query/framework/svelte/examples/ssr",
+                  "query/framework/svelte/examples/optimistic-updates",
+                  "query/framework/svelte/examples/playground",
+                  "query/framework/svelte/examples/star-wars",
+                  "query/framework/svelte/examples/load-more-infinite-scroll"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "query/framework/lit/examples/basic",
+                  "query/framework/lit/examples/pagination",
+                  "query/framework/lit/examples/ssr"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "query/framework/angular/examples/simple",
+                  "query/framework/angular/examples/basic",
+                  "query/framework/angular/examples/auto-refetching",
+                  "query/framework/angular/examples/optimistic-updates",
+                  "query/framework/angular/examples/pagination",
+                  "query/framework/angular/examples/infinite-query-with-max-pages",
+                  "query/framework/angular/examples/router",
+                  "query/framework/angular/examples/rxjs",
+                  "query/framework/angular/examples/query-options-from-a-service",
+                  "query/framework/angular/examples/devtools-panel"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Plugins",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "query/framework/react/plugins/persistQueryClient",
+                  "query/framework/react/plugins/createSyncStoragePersister",
+                  "query/framework/react/plugins/createAsyncStoragePersister",
+                  "query/framework/react/plugins/broadcastQueryClient",
+                  "query/framework/react/plugins/createPersister"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "query/framework/solid/plugins/broadcastQueryClient",
+                  "query/framework/solid/plugins/createPersister"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "query/framework/vue/plugins/broadcastQueryClient",
+                  "query/framework/vue/plugins/createPersister"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "query/framework/preact/plugins/persistQueryClient",
+                  "query/framework/preact/plugins/createSyncStoragePersister",
+                  "query/framework/preact/plugins/createAsyncStoragePersister",
+                  "query/framework/preact/plugins/broadcastQueryClient",
+                  "query/framework/preact/plugins/createPersister"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "query/framework/angular/reference/functions/infiniteQueryOptions",
+                  "query/framework/angular/reference/functions/injectInfiniteQuery",
+                  "query/framework/angular/reference/functions/injectIsFetching",
+                  "query/framework/angular/reference/functions/injectIsMutating",
+                  "query/framework/angular/reference/functions/injectIsRestoring",
+                  "query/framework/angular/reference/functions/injectMutationState",
+                  "query/framework/angular/reference/functions/injectQueryClient",
+                  "query/framework/angular/reference/functions/mutationOptions",
+                  "query/framework/angular/reference/functions/provideAngularQuery",
+                  "query/framework/angular/reference/functions/provideIsRestoring",
+                  "query/framework/angular/reference/functions/provideQueryClient",
+                  "query/framework/angular/reference/functions/provideTanStackQuery",
+                  "query/framework/angular/reference/functions/queryFeature",
+                  "query/framework/angular/reference/functions/queryOptions",
+                  "query/framework/angular/reference/interfaces/BaseMutationNarrowing",
+                  "query/framework/angular/reference/interfaces/BaseQueryNarrowing",
+                  "query/framework/angular/reference/interfaces/CreateBaseQueryOptions",
+                  "query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions",
+                  "query/framework/angular/reference/interfaces/CreateMutationOptions",
+                  "query/framework/angular/reference/interfaces/CreateQueryOptions",
+                  "query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions",
+                  "query/framework/angular/reference/interfaces/InjectIsFetchingOptions",
+                  "query/framework/angular/reference/interfaces/InjectIsMutatingOptions",
+                  "query/framework/angular/reference/interfaces/InjectMutationOptions",
+                  "query/framework/angular/reference/interfaces/InjectMutationStateOptions",
+                  "query/framework/angular/reference/interfaces/InjectQueryOptions",
+                  "query/framework/angular/reference/interfaces/QueryFeature",
+                  "query/framework/angular/reference/type-aliases/CreateBaseMutationResult",
+                  "query/framework/angular/reference/type-aliases/CreateBaseQueryResult",
+                  "query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult",
+                  "query/framework/angular/reference/type-aliases/CreateMutateAsyncFunction",
+                  "query/framework/angular/reference/type-aliases/CreateMutateFunction",
+                  "query/framework/angular/reference/type-aliases/CreateMutationResult",
+                  "query/framework/angular/reference/type-aliases/CreateQueryResult",
+                  "query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult",
+                  "query/framework/angular/reference/type-aliases/DefinedCreateQueryResult",
+                  "query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions",
+                  "query/framework/angular/reference/type-aliases/DefinedInitialDataOptions",
+                  "query/framework/angular/reference/type-aliases/DevtoolsFeature",
+                  "query/framework/angular/reference/type-aliases/PersistQueryClientFeature",
+                  "query/framework/angular/reference/type-aliases/QueriesOptions",
+                  "query/framework/angular/reference/type-aliases/QueriesResults",
+                  "query/framework/angular/reference/type-aliases/QueryFeatures",
+                  "query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions",
+                  "query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions",
+                  "query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions",
+                  "query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions",
+                  "query/framework/lit/reference/type-aliases/Accessor",
+                  "query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions",
+                  "query/framework/lit/reference/type-aliases/CreateMutationOptions",
+                  "query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions",
+                  "query/framework/lit/reference/type-aliases/CreateQueriesInput",
+                  "query/framework/lit/reference/type-aliases/CreateQueryOptions",
+                  "query/framework/lit/reference/type-aliases/DefinedInitialDataOptions",
+                  "query/framework/lit/reference/type-aliases/InfiniteQueryControllerOptions",
+                  "query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor",
+                  "query/framework/lit/reference/type-aliases/IsFetchingAccessor",
+                  "query/framework/lit/reference/type-aliases/IsMutatingAccessor",
+                  "query/framework/lit/reference/type-aliases/MutationControllerOptions",
+                  "query/framework/lit/reference/type-aliases/MutationControllerResult",
+                  "query/framework/lit/reference/type-aliases/MutationResultAccessor",
+                  "query/framework/lit/reference/type-aliases/MutationStateAccessor",
+                  "query/framework/lit/reference/type-aliases/MutationStateOptions",
+                  "query/framework/lit/reference/type-aliases/QueriesControllerOptions",
+                  "query/framework/lit/reference/type-aliases/QueriesResultAccessor",
+                  "query/framework/lit/reference/type-aliases/QueryControllerOptions",
+                  "query/framework/lit/reference/type-aliases/QueryControllerResult",
+                  "query/framework/lit/reference/type-aliases/QueryResultAccessor",
+                  "query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions",
+                  "query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions",
+                  "query/framework/lit/reference/type-aliases/ValueAccessor",
+                  "query/framework/preact/reference/functions/useIsRestoring",
+                  "query/framework/preact/reference/index",
+                  "query/framework/preact/reference/interfaces/HydrationBoundaryProps",
+                  "query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps",
+                  "query/framework/preact/reference/interfaces/UseBaseQueryOptions",
+                  "query/framework/preact/reference/interfaces/UseInfiniteQueryOptions",
+                  "query/framework/preact/reference/interfaces/UseMutationOptions",
+                  "query/framework/preact/reference/interfaces/UsePrefetchQueryOptions",
+                  "query/framework/preact/reference/interfaces/UseQueryOptions",
+                  "query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions",
+                  "query/framework/preact/reference/interfaces/UseSuspenseQueryOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseBaseQueryOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseInfiniteQueryOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseMutationOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseQueryOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions",
+                  "query/framework/preact/reference/type-aliases/AnyUseSuspenseQueryOptions",
+                  "query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions",
+                  "query/framework/preact/reference/type-aliases/DefinedInitialDataOptions",
+                  "query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult",
+                  "query/framework/preact/reference/type-aliases/DefinedUseQueryResult",
+                  "query/framework/preact/reference/type-aliases/QueriesOptions",
+                  "query/framework/preact/reference/type-aliases/QueriesResults",
+                  "query/framework/preact/reference/type-aliases/QueryClientProviderProps",
+                  "query/framework/preact/reference/type-aliases/QueryErrorClearResetFunction",
+                  "query/framework/preact/reference/type-aliases/QueryErrorIsResetFunction",
+                  "query/framework/preact/reference/type-aliases/QueryErrorResetBoundaryFunction",
+                  "query/framework/preact/reference/type-aliases/QueryErrorResetFunction",
+                  "query/framework/preact/reference/type-aliases/SuspenseQueriesOptions",
+                  "query/framework/preact/reference/type-aliases/SuspenseQueriesResults",
+                  "query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions",
+                  "query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions",
+                  "query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions",
+                  "query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions",
+                  "query/framework/preact/reference/type-aliases/UseBaseMutationResult",
+                  "query/framework/preact/reference/type-aliases/UseBaseQueryResult",
+                  "query/framework/preact/reference/type-aliases/UseInfiniteQueryResult",
+                  "query/framework/preact/reference/type-aliases/UseMutateAsyncFunction",
+                  "query/framework/preact/reference/type-aliases/UseMutateFunction",
+                  "query/framework/preact/reference/type-aliases/UseMutationResult",
+                  "query/framework/preact/reference/type-aliases/UseQueryResult",
+                  "query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult",
+                  "query/framework/preact/reference/type-aliases/UseSuspenseQueryResult",
+                  "query/framework/preact/reference/variables/IsRestoringProvider",
+                  "query/framework/preact/reference/variables/QueryClientContext",
+                  "query/framework/svelte/reference/functions/getIsRestoringContext",
+                  "query/framework/svelte/reference/functions/getQueryClientContext",
+                  "query/framework/svelte/reference/functions/setIsRestoringContext",
+                  "query/framework/svelte/reference/functions/setQueryClientContext",
+                  "query/framework/svelte/reference/functions/useHydrate",
+                  "query/framework/svelte/reference/functions/useIsRestoring",
+                  "query/framework/svelte/reference/functions/useQueryClient",
+                  "query/framework/svelte/reference/type-aliases/Accessor",
+                  "query/framework/svelte/reference/type-aliases/CreateBaseMutationResult",
+                  "query/framework/svelte/reference/type-aliases/CreateBaseQueryOptions",
+                  "query/framework/svelte/reference/type-aliases/CreateBaseQueryResult",
+                  "query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions",
+                  "query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult",
+                  "query/framework/svelte/reference/type-aliases/CreateMutateAsyncFunction",
+                  "query/framework/svelte/reference/type-aliases/CreateMutateFunction",
+                  "query/framework/svelte/reference/type-aliases/CreateMutationOptions",
+                  "query/framework/svelte/reference/type-aliases/CreateMutationResult",
+                  "query/framework/svelte/reference/type-aliases/CreateQueryOptions",
+                  "query/framework/svelte/reference/type-aliases/CreateQueryResult",
+                  "query/framework/svelte/reference/type-aliases/DefinedCreateBaseQueryResult",
+                  "query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult",
+                  "query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions",
+                  "query/framework/svelte/reference/type-aliases/HydrationBoundary",
+                  "query/framework/svelte/reference/type-aliases/MutationStateOptions",
+                  "query/framework/svelte/reference/type-aliases/QueriesOptions",
+                  "query/framework/svelte/reference/type-aliases/QueriesResults",
+                  "query/framework/svelte/reference/type-aliases/QueryClientProviderProps",
+                  "query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions",
+                  "query/framework/svelte/reference/variables/HydrationBoundary"
+                ]
+              },
+              {
+                "group": "Other",
+                "expanded": false,
+                "pages": [
+                  "query/community-resources"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Table",
+        "description": "Headless UI for tables and data grids",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "table/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "table/introduction",
+              "table/overview",
+              "table/installation",
+              "table/guide/migrating",
+              "table/faq",
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "table/framework/angular/angular-table"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "table/framework/lit/lit-table"
+                ]
+              },
+              {
+                "group": "Qwik",
+                "expanded": false,
+                "pages": [
+                  "table/framework/qwik/qwik-table"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "table/framework/react/react-table"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "table/framework/solid/solid-table"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "table/framework/svelte/svelte-table"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vue/vue-table"
+                ]
+              },
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "table/vanilla"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Core Guides",
+            "pages": [
+              "table/guide/data",
+              "table/guide/column-defs",
+              "table/guide/tables",
+              "table/guide/row-models",
+              "table/guide/rows",
+              "table/guide/cells",
+              "table/guide/header-groups",
+              "table/guide/headers",
+              "table/guide/columns",
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "table/framework/angular/guide/table-state"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "table/framework/lit/guide/table-state"
+                ]
+              },
+              {
+                "group": "Qwik",
+                "expanded": false,
+                "pages": [
+                  "table/framework/qwik/guide/table-state"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "table/framework/react/guide/table-state"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "table/framework/solid/guide/table-state"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "table/framework/svelte/guide/table-state"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vue/guide/table-state"
+                ]
+              },
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vanilla/guide/table-state"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Feature Guides",
+            "pages": [
+              "table/guide/column-ordering",
+              "table/guide/column-pinning",
+              "table/guide/column-sizing",
+              "table/guide/column-visibility",
+              "table/guide/column-filtering",
+              "table/guide/global-filtering",
+              "table/guide/fuzzy-filtering",
+              "table/guide/column-faceting",
+              "table/guide/global-faceting",
+              "table/guide/grouping",
+              "table/guide/expanding",
+              "table/guide/pagination",
+              "table/guide/row-pinning",
+              "table/guide/row-selection",
+              "table/guide/sorting",
+              "table/guide/virtualization",
+              "table/guide/custom-features"
+            ]
+          },
+          {
+            "group": "Core APIs",
+            "pages": [
+              "table/api/core/column-def",
+              "table/api/core/table",
+              "table/api/core/column",
+              "table/api/core/header-group",
+              "table/api/core/header",
+              "table/api/core/row",
+              "table/api/core/cell"
+            ]
+          },
+          {
+            "group": "Feature APIs",
+            "pages": [
+              "table/api/features/column-filtering",
+              "table/api/features/column-faceting",
+              "table/api/features/column-ordering",
+              "table/api/features/column-pinning",
+              "table/api/features/column-sizing",
+              "table/api/features/column-visibility",
+              "table/api/features/global-faceting",
+              "table/api/features/global-filtering",
+              "table/api/features/sorting",
+              "table/api/features/grouping",
+              "table/api/features/expanding",
+              "table/api/features/pagination",
+              "table/api/features/row-pinning",
+              "table/api/features/row-selection"
+            ]
+          },
+          {
+            "group": "Enterprise",
+            "pages": [
+              "table/enterprise/ag-grid"
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "table/framework/angular/examples/basic",
+                  "table/framework/angular/examples/grouping",
+                  "table/framework/angular/examples/column-ordering",
+                  "table/framework/angular/examples/column-pinning",
+                  "table/framework/angular/examples/column-pinning-sticky",
+                  "table/framework/angular/examples/column-visibility",
+                  "table/framework/angular/examples/filters",
+                  "table/framework/angular/examples/row-selection",
+                  "table/framework/angular/examples/expanding",
+                  "table/framework/angular/examples/sub-components",
+                  "table/framework/angular/examples/signal-input",
+                  "table/framework/angular/examples/editable",
+                  "table/framework/angular/examples/row-dnd",
+                  "table/framework/angular/examples/column-resizing-performant"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "table/framework/lit/examples/basic",
+                  "table/framework/lit/examples/column-sizing",
+                  "table/framework/lit/examples/filters",
+                  "table/framework/lit/examples/row-selection",
+                  "table/framework/lit/examples/sorting",
+                  "table/framework/lit/examples/virtualized-rows"
+                ]
+              },
+              {
+                "group": "Qwik",
+                "expanded": false,
+                "pages": [
+                  "table/framework/qwik/examples/basic",
+                  "table/framework/qwik/examples/filters",
+                  "table/framework/qwik/examples/row-selection",
+                  "table/framework/qwik/examples/sorting"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "table/framework/react/examples/basic",
+                  "table/framework/react/examples/column-groups",
+                  "table/framework/react/examples/filters",
+                  "table/framework/react/examples/filters-faceted",
+                  "table/framework/react/examples/filters-fuzzy",
+                  "table/framework/react/examples/column-ordering",
+                  "table/framework/react/examples/column-dnd",
+                  "table/framework/react/examples/column-pinning",
+                  "table/framework/react/examples/column-pinning-sticky",
+                  "table/framework/react/examples/column-sizing",
+                  "table/framework/react/examples/column-resizing-performant",
+                  "table/framework/react/examples/column-visibility",
+                  "table/framework/react/examples/editable-data",
+                  "table/framework/react/examples/expanding",
+                  "table/framework/react/examples/sub-components",
+                  "table/framework/react/examples/fully-controlled",
+                  "table/framework/react/examples/grouping",
+                  "table/framework/react/examples/pagination",
+                  "table/framework/react/examples/pagination-controlled",
+                  "table/framework/react/examples/row-dnd",
+                  "table/framework/react/examples/row-pinning",
+                  "table/framework/react/examples/row-selection",
+                  "table/framework/react/examples/sorting",
+                  "table/framework/react/examples/virtualized-columns",
+                  "table/framework/react/examples/virtualized-columns-experimental",
+                  "table/framework/react/examples/virtualized-rows",
+                  "table/framework/react/examples/virtualized-rows-experimental",
+                  "table/framework/react/examples/virtualized-infinite-scrolling",
+                  "table/framework/react/examples/kitchen-sink",
+                  "table/framework/react/examples/bootstrap",
+                  "table/framework/react/examples/material-ui-pagination",
+                  "table/framework/react/examples/full-width-table",
+                  "table/framework/react/examples/full-width-resizable-table",
+                  "table/framework/react/examples/custom-features",
+                  "table/framework/react/examples/query-router-search-params"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "table/framework/solid/examples/basic",
+                  "table/framework/solid/examples/column-groups",
+                  "table/framework/solid/examples/column-ordering",
+                  "table/framework/solid/examples/column-visibility",
+                  "table/framework/solid/examples/filters",
+                  "table/framework/solid/examples/sorting",
+                  "table/framework/solid/examples/bootstrap"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "table/framework/svelte/examples/basic",
+                  "table/framework/svelte/examples/column-groups",
+                  "table/framework/svelte/examples/column-ordering",
+                  "table/framework/svelte/examples/column-pinning",
+                  "table/framework/svelte/examples/column-visibility",
+                  "table/framework/svelte/examples/filtering",
+                  "table/framework/svelte/examples/sorting"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vue/examples/basic",
+                  "table/framework/vue/examples/column-ordering",
+                  "table/framework/vue/examples/column-pinning",
+                  "table/framework/vue/examples/pagination",
+                  "table/framework/vue/examples/row-selection",
+                  "table/framework/vue/examples/sorting",
+                  "table/framework/vue/examples/sub-components",
+                  "table/framework/vue/examples/filters",
+                  "table/framework/vue/examples/virtualized-rows",
+                  "table/framework/vue/examples/grouping"
+                ]
+              },
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vanilla/examples/basic",
+                  "table/framework/vanilla/examples/pagination",
+                  "table/framework/vanilla/examples/sorting"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Api",
+                "expanded": false,
+                "pages": [
+                  "table/api/features/filters",
+                  "table/api/features/pinning"
+                ]
+              },
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "table/framework/vanilla/table-core"
+                ]
+              },
+              {
+                "group": "Guide",
+                "expanded": false,
+                "pages": [
+                  "table/guide/features",
+                  "table/guide/filters",
+                  "table/guide/pinning"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Form",
+        "description": "Type-safe form state management",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "form/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "form/overview",
+              "form/installation",
+              "form/philosophy",
+              "form/comparison",
+              "form/typescript",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "form/framework/react/quick-start"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "form/framework/preact/quick-start"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "form/framework/vue/quick-start"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "form/framework/angular/quick-start"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "form/framework/solid/quick-start"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "form/framework/lit/quick-start"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "form/framework/svelte/quick-start"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "form/framework/react/guides/basic-concepts",
+                  "form/framework/react/guides/validation",
+                  "form/framework/react/guides/dynamic-validation",
+                  "form/framework/react/guides/async-initial-values",
+                  "form/framework/react/guides/arrays",
+                  "form/framework/react/guides/form-groups",
+                  "form/framework/react/guides/linked-fields",
+                  "form/framework/react/guides/reactivity",
+                  "form/framework/react/guides/listeners",
+                  "form/framework/react/guides/custom-errors",
+                  "form/framework/react/guides/submission-handling",
+                  "form/framework/react/guides/ui-libraries",
+                  "form/framework/react/guides/focus-management",
+                  "form/framework/react/guides/form-composition",
+                  "form/framework/react/guides/react-native",
+                  "form/framework/react/guides/ssr",
+                  "form/framework/react/guides/debugging",
+                  "form/framework/react/guides/devtools"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "form/framework/preact/guides/basic-concepts",
+                  "form/framework/preact/guides/validation",
+                  "form/framework/preact/guides/dynamic-validation",
+                  "form/framework/preact/guides/async-initial-values",
+                  "form/framework/preact/guides/arrays",
+                  "form/framework/preact/guides/form-groups",
+                  "form/framework/preact/guides/linked-fields",
+                  "form/framework/preact/guides/reactivity",
+                  "form/framework/preact/guides/listeners",
+                  "form/framework/preact/guides/custom-errors",
+                  "form/framework/preact/guides/submission-handling",
+                  "form/framework/preact/guides/ui-libraries",
+                  "form/framework/preact/guides/focus-management",
+                  "form/framework/preact/guides/form-composition",
+                  "form/framework/preact/guides/debugging"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "form/framework/vue/guides/basic-concepts",
+                  "form/framework/vue/guides/validation",
+                  "form/framework/vue/guides/dynamic-validation",
+                  "form/framework/vue/guides/async-initial-values",
+                  "form/framework/vue/guides/arrays",
+                  "form/framework/vue/guides/form-groups",
+                  "form/framework/vue/guides/linked-fields"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "form/framework/angular/guides/basic-concepts",
+                  "form/framework/angular/guides/validation",
+                  "form/framework/angular/guides/dynamic-validation",
+                  "form/framework/angular/guides/arrays",
+                  "form/framework/angular/guides/form-groups",
+                  "form/framework/angular/guides/form-composition"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "form/framework/solid/guides/basic-concepts",
+                  "form/framework/solid/guides/validation",
+                  "form/framework/solid/guides/dynamic-validation",
+                  "form/framework/solid/guides/async-initial-values",
+                  "form/framework/solid/guides/arrays",
+                  "form/framework/solid/guides/form-groups",
+                  "form/framework/solid/guides/linked-fields",
+                  "form/framework/solid/guides/form-composition"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "form/framework/lit/guides/basic-concepts",
+                  "form/framework/lit/guides/validation",
+                  "form/framework/lit/guides/dynamic-validation",
+                  "form/framework/lit/guides/arrays",
+                  "form/framework/lit/guides/form-groups",
+                  "form/framework/lit/guides/form-composition"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "form/framework/svelte/guides/basic-concepts",
+                  "form/framework/svelte/guides/validation",
+                  "form/framework/svelte/guides/dynamic-validation",
+                  "form/framework/svelte/guides/async-initial-values",
+                  "form/framework/svelte/guides/arrays",
+                  "form/framework/svelte/guides/form-groups",
+                  "form/framework/svelte/guides/linked-fields",
+                  "form/framework/svelte/guides/form-composition"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "form/reference/index",
+              "form/reference/classes/FieldApi",
+              "form/reference/classes/FormApi",
+              "form/reference/functions/formOptions",
+              "form/reference/functions/mergeForm",
+              "form/reference/interfaces/FieldApiOptions",
+              "form/reference/interfaces/FieldOptions",
+              "form/reference/interfaces/FieldValidators",
+              "form/reference/interfaces/FormOptions",
+              "form/reference/interfaces/FormValidators",
+              "form/reference/type-aliases/DeepKeys",
+              "form/reference/type-aliases/DeepValue",
+              "form/reference/type-aliases/FieldInfo",
+              "form/reference/type-aliases/FieldMeta",
+              "form/reference/type-aliases/FieldState",
+              "form/reference/type-aliases/BaseFormState",
+              "form/reference/type-aliases/DerivedFormState",
+              "form/reference/type-aliases/Updater",
+              "form/reference/type-aliases/UpdaterFn",
+              "form/reference/type-aliases/ValidationError",
+              "form/reference/type-aliases/ValidationMeta",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "form/framework/react/reference/index",
+                  "form/framework/react/reference/variables/Field",
+                  "form/framework/react/reference/functions/useField",
+                  "form/framework/react/reference/functions/useForm",
+                  "form/framework/react/reference/functions/useTransform",
+                  "form/framework/react/reference/type-aliases/FieldComponent",
+                  "form/framework/react/reference/type-aliases/UseField"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "form/framework/preact/reference/index",
+                  "form/framework/preact/reference/variables/Field",
+                  "form/framework/preact/reference/functions/useField",
+                  "form/framework/preact/reference/functions/useForm",
+                  "form/framework/preact/reference/type-aliases/FieldComponent",
+                  "form/framework/preact/reference/type-aliases/UseField"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "form/framework/vue/reference/index",
+                  "form/framework/vue/reference/variables/Field",
+                  "form/framework/vue/reference/functions/useField",
+                  "form/framework/vue/reference/functions/useForm",
+                  "form/framework/vue/reference/type-aliases/FieldComponent",
+                  "form/framework/vue/reference/type-aliases/UseField"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "form/framework/solid/reference/index",
+                  "form/framework/solid/reference/functions/createField",
+                  "form/framework/solid/reference/functions/createForm",
+                  "form/framework/solid/reference/functions/Field",
+                  "form/framework/solid/reference/type-aliases/CreateField",
+                  "form/framework/solid/reference/type-aliases/FieldComponent"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "form/framework/lit/reference/index",
+                  "form/framework/lit/reference/classes/TanStackFormController"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "form/framework/angular/reference/index",
+                  "form/framework/angular/reference/classes/TanStackField",
+                  "form/framework/angular/reference/functions/injectForm",
+                  "form/framework/angular/reference/functions/injectStore"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "form/framework/react/examples/simple",
+                  "form/framework/react/examples/multi-step-wizard",
+                  "form/framework/react/examples/array",
+                  "form/framework/react/examples/large-form",
+                  "form/framework/react/examples/dynamic",
+                  "form/framework/react/examples/query-integration",
+                  "form/framework/react/examples/standard-schema",
+                  "form/framework/react/examples/tanstack-start",
+                  "form/framework/react/examples/next-server-actions",
+                  "form/framework/react/examples/remix",
+                  "form/framework/react/examples/ui-libraries",
+                  "form/framework/react/examples/field-errors-from-form-validators",
+                  "form/framework/react/examples/devtools"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "form/framework/vue/examples/simple",
+                  "form/framework/vue/examples/multi-step-wizard",
+                  "form/framework/vue/examples/array",
+                  "form/framework/vue/examples/standard-schema"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "form/framework/angular/examples/simple",
+                  "form/framework/angular/examples/multi-step-wizard",
+                  "form/framework/angular/examples/array",
+                  "form/framework/angular/examples/large-form",
+                  "form/framework/angular/examples/standard-schema"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "form/framework/solid/examples/simple",
+                  "form/framework/solid/examples/multi-step-wizard",
+                  "form/framework/solid/examples/array",
+                  "form/framework/solid/examples/large-form",
+                  "form/framework/solid/examples/standard-schema"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "form/framework/lit/examples/simple",
+                  "form/framework/lit/examples/multi-step-wizard",
+                  "form/framework/lit/examples/array",
+                  "form/framework/lit/examples/ui-libraries",
+                  "form/framework/lit/examples/standard-schema"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "form/framework/preact/examples/simple",
+                  "form/framework/preact/examples/multi-step-wizard"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "form/framework/svelte/examples/simple",
+                  "form/framework/svelte/examples/multi-step-wizard",
+                  "form/framework/svelte/examples/array",
+                  "form/framework/svelte/examples/standard-schema",
+                  "form/framework/svelte/examples/large-form"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "form/framework/angular/guides/listeners",
+                  "form/framework/angular/guides/submission-handling",
+                  "form/framework/angular/reference/classes/TanStackAppField",
+                  "form/framework/angular/reference/classes/TanStackFieldInjectable",
+                  "form/framework/angular/reference/classes/TanStackFormGroup",
+                  "form/framework/angular/reference/classes/TanStackWithForm",
+                  "form/framework/angular/reference/classes/TanStackWithFormInjectable",
+                  "form/framework/angular/reference/functions/injectField",
+                  "form/framework/angular/reference/functions/injectWithForm",
+                  "form/framework/lit/reference/functions/getFormType",
+                  "form/framework/preact/reference/functions/createFormHook",
+                  "form/framework/preact/reference/functions/createFormHookContexts",
+                  "form/framework/preact/reference/functions/useFieldGroup",
+                  "form/framework/preact/reference/functions/useFormGroup",
+                  "form/framework/preact/reference/interfaces/PreactFormApi",
+                  "form/framework/preact/reference/interfaces/UseFieldOptions",
+                  "form/framework/preact/reference/interfaces/UseFieldOptionsBound",
+                  "form/framework/preact/reference/interfaces/WithFieldGroupProps",
+                  "form/framework/preact/reference/interfaces/WithFormProps",
+                  "form/framework/preact/reference/type-aliases/FormGroupComponent",
+                  "form/framework/preact/reference/type-aliases/LensFieldComponent",
+                  "form/framework/preact/reference/type-aliases/PreactFormExtendedApi",
+                  "form/framework/preact/reference/type-aliases/PropsWithChildren",
+                  "form/framework/preact/reference/type-aliases/ServerFormState",
+                  "form/framework/preact/reference/type-aliases/UseFormGroup",
+                  "form/framework/preact/reference/variables/FormGroup",
+                  "form/framework/preact/reference/variables/useIsomorphicLayoutEffect",
+                  "form/framework/preact/reference/variables/useStore",
+                  "form/framework/react/reference/functions/createFormHook",
+                  "form/framework/react/reference/functions/createFormHookContexts",
+                  "form/framework/react/reference/functions/useFieldGroup",
+                  "form/framework/react/reference/functions/useFormGroup",
+                  "form/framework/react/reference/interfaces/ReactFormApi",
+                  "form/framework/react/reference/interfaces/UseFieldOptions",
+                  "form/framework/react/reference/interfaces/UseFieldOptionsBound",
+                  "form/framework/react/reference/interfaces/WithFieldGroupProps",
+                  "form/framework/react/reference/interfaces/WithFormProps",
+                  "form/framework/react/reference/type-aliases/FormGroupComponent",
+                  "form/framework/react/reference/type-aliases/LensFieldComponent",
+                  "form/framework/react/reference/type-aliases/ReactFormExtendedApi",
+                  "form/framework/react/reference/type-aliases/ServerFormState",
+                  "form/framework/react/reference/type-aliases/UseFormGroup",
+                  "form/framework/react/reference/variables/FormGroup",
+                  "form/framework/react/reference/variables/useIsomorphicLayoutEffect",
+                  "form/framework/react/reference/variables/useStore",
+                  "form/framework/solid/guides/devtools",
+                  "form/framework/solid/guides/submission-handling",
+                  "form/framework/solid/reference/functions/FormGroup",
+                  "form/framework/solid/reference/functions/createFieldGroup",
+                  "form/framework/solid/reference/functions/createFormGroup",
+                  "form/framework/solid/reference/functions/createFormHook",
+                  "form/framework/solid/reference/functions/createFormHookContexts",
+                  "form/framework/solid/reference/interfaces/CreateFieldOptions",
+                  "form/framework/solid/reference/interfaces/CreateFieldOptionsBound",
+                  "form/framework/solid/reference/interfaces/SolidFormApi",
+                  "form/framework/solid/reference/interfaces/WithFieldGroupProps",
+                  "form/framework/solid/reference/interfaces/WithFormProps",
+                  "form/framework/solid/reference/type-aliases/FormGroupComponent",
+                  "form/framework/solid/reference/type-aliases/LensFieldComponent",
+                  "form/framework/solid/reference/type-aliases/SolidFormExtendedApi",
+                  "form/framework/solid/reference/variables/useStore",
+                  "form/framework/vue/guides/listeners",
+                  "form/framework/vue/guides/submission-handling",
+                  "form/framework/vue/reference/functions/useFormGroup",
+                  "form/framework/vue/reference/interfaces/VueFieldApi",
+                  "form/framework/vue/reference/interfaces/VueFormApi",
+                  "form/framework/vue/reference/interfaces/VueFormGroupApi",
+                  "form/framework/vue/reference/type-aliases/FieldComponentBoundProps",
+                  "form/framework/vue/reference/type-aliases/FieldComponentProps",
+                  "form/framework/vue/reference/type-aliases/FormGroupComponent",
+                  "form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps",
+                  "form/framework/vue/reference/type-aliases/FormGroupComponentProps",
+                  "form/framework/vue/reference/variables/FormGroup",
+                  "form/framework/vue/reference/variables/useStore"
+                ]
+              },
+              {
+                "group": "Other",
+                "expanded": false,
+                "pages": [
+                  "form/community-resources"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "form/reference/classes/FieldGroupApi",
+                  "form/reference/classes/FormGroupApi",
+                  "form/reference/functions/createFieldMap",
+                  "form/reference/functions/deepCopy",
+                  "form/reference/functions/evaluate",
+                  "form/reference/functions/isGlobalFormValidationError",
+                  "form/reference/functions/isStandardSchemaValidator",
+                  "form/reference/functions/revalidateLogic",
+                  "form/reference/functions/uuid",
+                  "form/reference/interfaces/AnyDeepKeyAndValue",
+                  "form/reference/interfaces/ArrayDeepKeyAndValue",
+                  "form/reference/interfaces/BaseFormOptions",
+                  "form/reference/interfaces/FieldGroupOptions",
+                  "form/reference/interfaces/FieldGroupState",
+                  "form/reference/interfaces/FieldListeners",
+                  "form/reference/interfaces/FormGroupApiOptions",
+                  "form/reference/interfaces/FormGroupListeners",
+                  "form/reference/interfaces/FormGroupMeta",
+                  "form/reference/interfaces/FormGroupOptions",
+                  "form/reference/interfaces/FormGroupState",
+                  "form/reference/interfaces/FormGroupStoreState",
+                  "form/reference/interfaces/FormGroupValidators",
+                  "form/reference/interfaces/FormListeners",
+                  "form/reference/interfaces/FormState",
+                  "form/reference/interfaces/ObjectDeepKeyAndValue",
+                  "form/reference/interfaces/StandardSchemaV1Issue",
+                  "form/reference/interfaces/TupleDeepKeyAndValue",
+                  "form/reference/interfaces/UnknownDeepKeyAndValue",
+                  "form/reference/interfaces/ValidationLogicProps",
+                  "form/reference/interfaces/ValidationLogicValidatorsFn",
+                  "form/reference/type-aliases/AllObjectKeys",
+                  "form/reference/type-aliases/AllTupleKeys",
+                  "form/reference/type-aliases/AnyBaseFormState",
+                  "form/reference/type-aliases/AnyFieldApi",
+                  "form/reference/type-aliases/AnyFieldGroupApi",
+                  "form/reference/type-aliases/AnyFieldMeta",
+                  "form/reference/type-aliases/AnyFormApi",
+                  "form/reference/type-aliases/AnyFormGroupApi",
+                  "form/reference/type-aliases/AnyFormGroupMeta",
+                  "form/reference/type-aliases/AnyFormOptions",
+                  "form/reference/type-aliases/AnyFormState",
+                  "form/reference/type-aliases/ArrayAccessor",
+                  "form/reference/type-aliases/BroadcastFormApi",
+                  "form/reference/type-aliases/BroadcastFormId",
+                  "form/reference/type-aliases/BroadcastFormState",
+                  "form/reference/type-aliases/BroadcastFormSubmissionState",
+                  "form/reference/type-aliases/DeepKeyAndValueArray",
+                  "form/reference/type-aliases/DeepKeyAndValueObject",
+                  "form/reference/type-aliases/DeepKeyAndValueTuple",
+                  "form/reference/type-aliases/DeepKeysAndValues",
+                  "form/reference/type-aliases/DeepKeysAndValuesImpl",
+                  "form/reference/type-aliases/DeepKeysOfType",
+                  "form/reference/type-aliases/DeepRecord",
+                  "form/reference/type-aliases/EventClientEventMap",
+                  "form/reference/type-aliases/EventClientEventNames",
+                  "form/reference/type-aliases/ExtractGlobalFormError",
+                  "form/reference/type-aliases/FieldsMap",
+                  "form/reference/type-aliases/FormValidateFn",
+                  "form/reference/type-aliases/FormValidationError",
+                  "form/reference/type-aliases/FormValidator",
+                  "form/reference/type-aliases/Nullable",
+                  "form/reference/type-aliases/ObjectAccessor",
+                  "form/reference/type-aliases/ObjectValue",
+                  "form/reference/type-aliases/StandardSchemaV1",
+                  "form/reference/type-aliases/TStandardSchemaValidatorIssue",
+                  "form/reference/type-aliases/TStandardSchemaValidatorValue",
+                  "form/reference/type-aliases/TupleAccessor",
+                  "form/reference/type-aliases/UnknownAccessor",
+                  "form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn",
+                  "form/reference/type-aliases/UnwrapFieldValidateOrFn",
+                  "form/reference/type-aliases/UnwrapFormAsyncValidateOrFn",
+                  "form/reference/type-aliases/UnwrapFormValidateOrFn",
+                  "form/reference/type-aliases/ValidationLogicFn",
+                  "form/reference/type-aliases/ValidationSource",
+                  "form/reference/variables/defaultValidationLogic",
+                  "form/reference/variables/formEventClient",
+                  "form/reference/variables/standardSchemaValidators",
+                  "form/reference/variables/throttleFormState"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack DB",
+        "description": "Reactive client store for sync-first applications",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "db/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "db/overview",
+              "db/quick-start",
+              "db/installation"
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "db/guides/live-queries",
+              "db/guides/mutations",
+              "db/guides/schemas",
+              "db/guides/error-handling",
+              "db/guides/collection-options-creator"
+            ]
+          },
+          {
+            "group": "Collections",
+            "pages": [
+              "db/collections/query-collection",
+              "db/collections/electric-collection",
+              "db/collections/trailbase-collection",
+              "db/collections/rxdb-collection",
+              "db/collections/powersync-collection",
+              "db/collections/local-storage-collection",
+              "db/collections/local-only-collection"
+            ]
+          },
+          {
+            "group": "Frameworks",
+            "pages": [
+              "db/framework/react/overview",
+              "db/framework/vue/overview",
+              "db/framework/angular/overview",
+              "db/framework/solid/overview",
+              "db/framework/svelte/overview"
+            ]
+          },
+          {
+            "group": "Community",
+            "pages": [
+              "db/community/resources"
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "db/reference/index",
+              "db/reference/interfaces/Collection",
+              "db/reference/functions/createCollection",
+              "db/reference/functions/liveQueryCollectionOptions",
+              "db/reference/functions/createLiveQueryCollection",
+              "db/reference/functions/createOptimisticAction",
+              "db/reference/functions/createTransaction",
+              "db/reference/electric-db-collection/index",
+              "db/reference/electric-db-collection/functions/electricCollectionOptions",
+              "db/reference/query-db-collection/index",
+              "db/reference/query-db-collection/functions/queryCollectionOptions",
+              "db/reference/rxdb-db-collection/index",
+              "db/reference/rxdb-db-collection/functions/rxdbCollectionOptions",
+              "db/reference/powersync-db-collection/index",
+              "db/reference/powersync-db-collection/functions/powerSyncCollectionOptions",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "db/framework/react/reference/index",
+                  "db/framework/react/reference/functions/useLiveQuery"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "db/framework/solid/reference/index",
+                  "db/framework/solid/reference/functions/useLiveQuery"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "db/framework/vue/reference/index",
+                  "db/framework/vue/reference/functions/useLiveQuery",
+                  "db/framework/vue/reference/interfaces/UseLiveQueryReturn",
+                  "db/framework/vue/reference/interfaces/UseLiveQueryReturnWithCollection"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "db/framework/angular/reference/index",
+                  "db/framework/angular/reference/functions/injectLiveQuery"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "db/framework/angular/reference/interfaces/InjectLiveQueryResult",
+                  "db/framework/angular/reference/interfaces/InjectLiveQueryResultWithCollection",
+                  "db/framework/angular/reference/interfaces/InjectLiveQueryResultWithSingleResultCollection",
+                  "db/framework/react/reference/functions/useLiveInfiniteQuery",
+                  "db/framework/react/reference/functions/useLiveQueryEffect",
+                  "db/framework/react/reference/functions/useLiveSuspenseQuery",
+                  "db/framework/react/reference/functions/usePacedMutations",
+                  "db/framework/react/reference/type-aliases/UseLiveInfiniteQueryConfig",
+                  "db/framework/react/reference/type-aliases/UseLiveInfiniteQueryReturn",
+                  "db/framework/react/reference/type-aliases/UseLiveQueryStatus",
+                  "db/framework/svelte/reference/functions/useLiveQuery",
+                  "db/framework/svelte/reference/index",
+                  "db/framework/svelte/reference/interfaces/UseLiveQueryReturn",
+                  "db/framework/svelte/reference/interfaces/UseLiveQueryReturnWithCollection",
+                  "db/framework/vue/reference/interfaces/UseLiveQueryReturnWithSingleResultCollection"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "db/reference/@tanstack/namespaces/IR/classes/Aggregate",
+                  "db/reference/@tanstack/namespaces/IR/classes/CollectionRef",
+                  "db/reference/@tanstack/namespaces/IR/classes/ConditionalSelect",
+                  "db/reference/@tanstack/namespaces/IR/classes/Func",
+                  "db/reference/@tanstack/namespaces/IR/classes/IncludesSubquery",
+                  "db/reference/@tanstack/namespaces/IR/classes/PropRef",
+                  "db/reference/@tanstack/namespaces/IR/classes/QueryRef",
+                  "db/reference/@tanstack/namespaces/IR/classes/UnionAll",
+                  "db/reference/@tanstack/namespaces/IR/classes/UnionFrom",
+                  "db/reference/@tanstack/namespaces/IR/classes/Value",
+                  "db/reference/@tanstack/namespaces/IR/functions/createResidualWhere",
+                  "db/reference/@tanstack/namespaces/IR/functions/followRef",
+                  "db/reference/@tanstack/namespaces/IR/functions/getHavingExpression",
+                  "db/reference/@tanstack/namespaces/IR/functions/getWhereExpression",
+                  "db/reference/@tanstack/namespaces/IR/functions/isExpressionLike",
+                  "db/reference/@tanstack/namespaces/IR/functions/isResidualWhere",
+                  "db/reference/@tanstack/namespaces/IR/index",
+                  "db/reference/@tanstack/namespaces/IR/interfaces/JoinClause",
+                  "db/reference/@tanstack/namespaces/IR/interfaces/QueryIR",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/BasicExpression",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/ConditionalSelectBranch",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/From",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/GroupBy",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Having",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/IncludesMaterialization",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Join",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Limit",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Offset",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/OrderBy",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/OrderByClause",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/OrderByDirection",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Select",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/SelectValueExpression",
+                  "db/reference/@tanstack/namespaces/IR/type-aliases/Where",
+                  "db/reference/@tanstack/namespaces/IR/variables/INCLUDES_SCALAR_FIELD",
+                  "db/reference/classes/AggregateFunctionNotInSelectError",
+                  "db/reference/classes/AggregateNotSupportedError",
+                  "db/reference/classes/BTreeIndex",
+                  "db/reference/classes/BaseIndex",
+                  "db/reference/classes/BaseQueryBuilder",
+                  "db/reference/classes/BasicIndex",
+                  "db/reference/classes/CannotCombineEmptyExpressionListError",
+                  "db/reference/classes/CollectionConfigurationError",
+                  "db/reference/classes/CollectionImpl",
+                  "db/reference/classes/CollectionInErrorStateError",
+                  "db/reference/classes/CollectionInputNotFoundError",
+                  "db/reference/classes/CollectionIsInErrorStateError",
+                  "db/reference/classes/CollectionOperationError",
+                  "db/reference/classes/CollectionRequiresConfigError",
+                  "db/reference/classes/CollectionRequiresSyncConfigError",
+                  "db/reference/classes/CollectionStateError",
+                  "db/reference/classes/DeduplicatedLoadSubset",
+                  "db/reference/classes/DeleteKeyNotFoundError",
+                  "db/reference/classes/DistinctRequiresSelectError",
+                  "db/reference/classes/DuplicateAliasInSubqueryError",
+                  "db/reference/classes/DuplicateDbInstanceError",
+                  "db/reference/classes/DuplicateKeyError",
+                  "db/reference/classes/DuplicateKeySyncError",
+                  "db/reference/classes/EmptyReferencePathError",
+                  "db/reference/classes/FnSelectWithGroupByError",
+                  "db/reference/classes/GroupByError",
+                  "db/reference/classes/HavingRequiresGroupByError",
+                  "db/reference/classes/InvalidCollectionStatusTransitionError",
+                  "db/reference/classes/InvalidJoinCondition",
+                  "db/reference/classes/InvalidJoinConditionLeftSourceError",
+                  "db/reference/classes/InvalidJoinConditionRightSourceError",
+                  "db/reference/classes/InvalidJoinConditionSameSourceError",
+                  "db/reference/classes/InvalidJoinConditionSourceMismatchError",
+                  "db/reference/classes/InvalidKeyError",
+                  "db/reference/classes/InvalidSchemaError",
+                  "db/reference/classes/InvalidSourceError",
+                  "db/reference/classes/InvalidSourceTypeError",
+                  "db/reference/classes/InvalidStorageDataFormatError",
+                  "db/reference/classes/InvalidStorageObjectFormatError",
+                  "db/reference/classes/InvalidWhereExpressionError",
+                  "db/reference/classes/JoinCollectionNotFoundError",
+                  "db/reference/classes/JoinConditionMustBeEqualityError",
+                  "db/reference/classes/JoinError",
+                  "db/reference/classes/KeyUpdateNotAllowedError",
+                  "db/reference/classes/LimitOffsetRequireOrderByError",
+                  "db/reference/classes/LocalStorageCollectionError",
+                  "db/reference/classes/MissingAliasInputsError",
+                  "db/reference/classes/MissingDeleteHandlerError",
+                  "db/reference/classes/MissingHandlerError",
+                  "db/reference/classes/MissingInsertHandlerError",
+                  "db/reference/classes/MissingMutationFunctionError",
+                  "db/reference/classes/MissingUpdateArgumentError",
+                  "db/reference/classes/MissingUpdateHandlerError",
+                  "db/reference/classes/NegativeActiveSubscribersError",
+                  "db/reference/classes/NoKeysPassedToDeleteError",
+                  "db/reference/classes/NoKeysPassedToUpdateError",
+                  "db/reference/classes/NoPendingSyncTransactionCommitError",
+                  "db/reference/classes/NoPendingSyncTransactionWriteError",
+                  "db/reference/classes/NonAggregateExpressionNotInGroupByError",
+                  "db/reference/classes/NonRetriableError",
+                  "db/reference/classes/OnMutateMustBeSynchronousError",
+                  "db/reference/classes/OnlyOneSourceAllowedError",
+                  "db/reference/classes/QueryBuilderError",
+                  "db/reference/classes/QueryCompilationError",
+                  "db/reference/classes/QueryMustHaveFromClauseError",
+                  "db/reference/classes/QueryOptimizerError",
+                  "db/reference/classes/ReverseIndex",
+                  "db/reference/classes/SchemaMustBeSynchronousError",
+                  "db/reference/classes/SchemaValidationError",
+                  "db/reference/classes/SerializationError",
+                  "db/reference/classes/SetWindowRequiresOrderByError",
+                  "db/reference/classes/SortedMap",
+                  "db/reference/classes/StorageError",
+                  "db/reference/classes/StorageKeyRequiredError",
+                  "db/reference/classes/SubQueryMustHaveFromClauseError",
+                  "db/reference/classes/SubscriptionNotFoundError",
+                  "db/reference/classes/SyncCleanupError",
+                  "db/reference/classes/SyncTransactionAlreadyCommittedError",
+                  "db/reference/classes/SyncTransactionAlreadyCommittedWriteError",
+                  "db/reference/classes/TanStackDBError",
+                  "db/reference/classes/TransactionAlreadyCompletedRollbackError",
+                  "db/reference/classes/TransactionError",
+                  "db/reference/classes/TransactionNotPendingCommitError",
+                  "db/reference/classes/TransactionNotPendingMutateError",
+                  "db/reference/classes/UndefinedKeyError",
+                  "db/reference/classes/UnknownExpressionTypeError",
+                  "db/reference/classes/UnknownFunctionError",
+                  "db/reference/classes/UnknownHavingExpressionTypeError",
+                  "db/reference/classes/UnsafeAliasPathError",
+                  "db/reference/classes/UnsupportedAggregateFunctionError",
+                  "db/reference/classes/UnsupportedFromTypeError",
+                  "db/reference/classes/UnsupportedJoinSourceTypeError",
+                  "db/reference/classes/UnsupportedJoinTypeError",
+                  "db/reference/classes/UnsupportedRootScalarSelectError",
+                  "db/reference/classes/UpdateKeyNotFoundError",
+                  "db/reference/classes/WhereClauseConversionError",
+                  "db/reference/electric-db-collection/classes/ElectricDBCollectionError",
+                  "db/reference/electric-db-collection/classes/ExpectedNumberInAwaitTxIdError",
+                  "db/reference/electric-db-collection/classes/StreamAbortedError",
+                  "db/reference/electric-db-collection/classes/TimeoutWaitingForMatchError",
+                  "db/reference/electric-db-collection/classes/TimeoutWaitingForTxIdError",
+                  "db/reference/electric-db-collection/functions/isChangeMessage",
+                  "db/reference/electric-db-collection/functions/isControlMessage",
+                  "db/reference/electric-db-collection/interfaces/ElectricCollectionConfig",
+                  "db/reference/electric-db-collection/interfaces/ElectricCollectionUtils",
+                  "db/reference/electric-db-collection/type-aliases/AwaitTxIdFn",
+                  "db/reference/electric-db-collection/type-aliases/Txid",
+                  "db/reference/functions/add",
+                  "db/reference/functions/and",
+                  "db/reference/functions/avg",
+                  "db/reference/functions/caseWhen",
+                  "db/reference/functions/clearQueryPatterns",
+                  "db/reference/functions/coalesce",
+                  "db/reference/functions/compileExpression",
+                  "db/reference/functions/compileQuery",
+                  "db/reference/functions/compileSingleRowExpression",
+                  "db/reference/functions/concat",
+                  "db/reference/functions/configureIndexDevMode",
+                  "db/reference/functions/count",
+                  "db/reference/functions/createArrayChangeProxy",
+                  "db/reference/functions/createChangeProxy",
+                  "db/reference/functions/createEffect",
+                  "db/reference/functions/createPacedMutations",
+                  "db/reference/functions/debounceStrategy",
+                  "db/reference/functions/deepEquals",
+                  "db/reference/functions/divide",
+                  "db/reference/functions/eq",
+                  "db/reference/functions/extractFieldPath",
+                  "db/reference/functions/extractSimpleComparisons",
+                  "db/reference/functions/extractValue",
+                  "db/reference/functions/findIndexForField",
+                  "db/reference/functions/getActiveTransaction",
+                  "db/reference/functions/getIndexDevModeConfig",
+                  "db/reference/functions/getQueryPatterns",
+                  "db/reference/functions/gt",
+                  "db/reference/functions/gte",
+                  "db/reference/functions/hasVirtualProps",
+                  "db/reference/functions/ilike",
+                  "db/reference/functions/inArray",
+                  "db/reference/functions/isDevModeEnabled",
+                  "db/reference/functions/isLimitSubset",
+                  "db/reference/functions/isNull",
+                  "db/reference/functions/isOffsetLimitSubset",
+                  "db/reference/functions/isOrderBySubset",
+                  "db/reference/functions/isPredicateSubset",
+                  "db/reference/functions/isUndefined",
+                  "db/reference/functions/isWhereSubset",
+                  "db/reference/functions/length",
+                  "db/reference/functions/like",
+                  "db/reference/functions/localOnlyCollectionOptions",
+                  "db/reference/functions/localStorageCollectionOptions",
+                  "db/reference/functions/lower",
+                  "db/reference/functions/lt",
+                  "db/reference/functions/lte",
+                  "db/reference/functions/materialize",
+                  "db/reference/functions/max",
+                  "db/reference/functions/min",
+                  "db/reference/functions/minusWherePredicates",
+                  "db/reference/functions/multiply",
+                  "db/reference/functions/not",
+                  "db/reference/functions/optimizeExpressionWithIndexes",
+                  "db/reference/functions/or",
+                  "db/reference/functions/parseLoadSubsetOptions",
+                  "db/reference/functions/parseOrderByExpression",
+                  "db/reference/functions/parseWhereExpression",
+                  "db/reference/functions/queryOnce",
+                  "db/reference/functions/queueStrategy",
+                  "db/reference/functions/safeRandomUUID",
+                  "db/reference/functions/subtract",
+                  "db/reference/functions/sum",
+                  "db/reference/functions/throttleStrategy",
+                  "db/reference/functions/toArray",
+                  "db/reference/functions/toBooleanPredicate",
+                  "db/reference/functions/trackQuery",
+                  "db/reference/functions/unionWherePredicates",
+                  "db/reference/functions/upper",
+                  "db/reference/functions/walkExpression",
+                  "db/reference/functions/withArrayChangeTracking",
+                  "db/reference/functions/withChangeTracking",
+                  "db/reference/interfaces/BTreeRangeQueryOptions",
+                  "db/reference/interfaces/BaseCollectionConfig",
+                  "db/reference/interfaces/BaseStrategy",
+                  "db/reference/interfaces/BasicIndexOptions",
+                  "db/reference/interfaces/ChangeMessage",
+                  "db/reference/interfaces/CollectionConfig",
+                  "db/reference/interfaces/CollectionIndexMetadata",
+                  "db/reference/interfaces/CollectionLike",
+                  "db/reference/interfaces/Context",
+                  "db/reference/interfaces/CreateOptimisticActionsOptions",
+                  "db/reference/interfaces/CurrentStateAsChangesOptions",
+                  "db/reference/interfaces/DebounceStrategy",
+                  "db/reference/interfaces/DebounceStrategyOptions",
+                  "db/reference/interfaces/Effect",
+                  "db/reference/interfaces/EffectConfig",
+                  "db/reference/interfaces/EffectContext",
+                  "db/reference/interfaces/IndexDevModeConfig",
+                  "db/reference/interfaces/IndexInterface",
+                  "db/reference/interfaces/IndexOptions",
+                  "db/reference/interfaces/IndexStats",
+                  "db/reference/interfaces/IndexSuggestion",
+                  "db/reference/interfaces/InsertConfig",
+                  "db/reference/interfaces/LiveQueryCollectionConfig",
+                  "db/reference/interfaces/LocalOnlyCollectionConfig",
+                  "db/reference/interfaces/LocalOnlyCollectionUtils",
+                  "db/reference/interfaces/LocalStorageCollectionConfig",
+                  "db/reference/interfaces/LocalStorageCollectionUtils",
+                  "db/reference/interfaces/OperationConfig",
+                  "db/reference/interfaces/PacedMutationsConfig",
+                  "db/reference/interfaces/ParseWhereOptions",
+                  "db/reference/interfaces/ParsedOrderBy",
+                  "db/reference/interfaces/Parser",
+                  "db/reference/interfaces/PendingMutation",
+                  "db/reference/interfaces/QueryOnceConfig",
+                  "db/reference/interfaces/QueueStrategy",
+                  "db/reference/interfaces/QueueStrategyOptions",
+                  "db/reference/interfaces/RangeQueryOptions",
+                  "db/reference/interfaces/SimpleComparison",
+                  "db/reference/interfaces/SubscribeChangesOptions",
+                  "db/reference/interfaces/SubscribeChangesSnapshotOptions",
+                  "db/reference/interfaces/Subscription",
+                  "db/reference/interfaces/SubscriptionStatusChangeEvent",
+                  "db/reference/interfaces/SubscriptionStatusEvent",
+                  "db/reference/interfaces/SubscriptionUnsubscribedEvent",
+                  "db/reference/interfaces/SyncConfig",
+                  "db/reference/interfaces/SyncMetadataApi",
+                  "db/reference/interfaces/ThrottleStrategy",
+                  "db/reference/interfaces/ThrottleStrategyOptions",
+                  "db/reference/interfaces/Transaction",
+                  "db/reference/interfaces/TransactionConfig",
+                  "db/reference/interfaces/VirtualRowProps",
+                  "db/reference/powersync-db-collection/classes/PowerSyncTransactor",
+                  "db/reference/powersync-db-collection/functions/compileSQLite",
+                  "db/reference/powersync-db-collection/interfaces/CompileSQLiteOptions",
+                  "db/reference/powersync-db-collection/interfaces/SQLiteCompiledQuery",
+                  "db/reference/powersync-db-collection/type-aliases/BasePowerSyncCollectionConfig",
+                  "db/reference/powersync-db-collection/type-aliases/ConfigWithArbitraryCollectionTypes",
+                  "db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteInputType",
+                  "db/reference/powersync-db-collection/type-aliases/ConfigWithSQLiteTypes",
+                  "db/reference/powersync-db-collection/type-aliases/CustomSQLiteSerializer",
+                  "db/reference/powersync-db-collection/type-aliases/EagerSyncHooks",
+                  "db/reference/powersync-db-collection/type-aliases/EnhancedPowerSyncCollectionConfig",
+                  "db/reference/powersync-db-collection/type-aliases/InferPowerSyncOutputType",
+                  "db/reference/powersync-db-collection/type-aliases/OnDemandSyncHooks",
+                  "db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionConfig",
+                  "db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionMeta",
+                  "db/reference/powersync-db-collection/type-aliases/PowerSyncCollectionUtils",
+                  "db/reference/powersync-db-collection/type-aliases/SerializerConfig",
+                  "db/reference/powersync-db-collection/type-aliases/TransactorOptions",
+                  "db/reference/powersync-db-collection/variables/DEFAULT_BATCH_SIZE",
+                  "db/reference/query-db-collection/classes/DeleteOperationItemNotFoundError",
+                  "db/reference/query-db-collection/classes/DuplicateKeyInBatchError",
+                  "db/reference/query-db-collection/classes/GetKeyRequiredError",
+                  "db/reference/query-db-collection/classes/InvalidItemStructureError",
+                  "db/reference/query-db-collection/classes/InvalidSyncOperationError",
+                  "db/reference/query-db-collection/classes/ItemNotFoundError",
+                  "db/reference/query-db-collection/classes/MissingKeyFieldError",
+                  "db/reference/query-db-collection/classes/QueryClientRequiredError",
+                  "db/reference/query-db-collection/classes/QueryCollectionError",
+                  "db/reference/query-db-collection/classes/QueryFnRequiredError",
+                  "db/reference/query-db-collection/classes/QueryKeyRequiredError",
+                  "db/reference/query-db-collection/classes/SyncNotInitializedError",
+                  "db/reference/query-db-collection/classes/UnknownOperationTypeError",
+                  "db/reference/query-db-collection/classes/UpdateOperationItemNotFoundError",
+                  "db/reference/query-db-collection/interfaces/QueryCollectionConfig",
+                  "db/reference/query-db-collection/interfaces/QueryCollectionMeta",
+                  "db/reference/query-db-collection/interfaces/QueryCollectionUtils",
+                  "db/reference/query-db-collection/type-aliases/SyncOperation",
+                  "db/reference/rxdb-db-collection/functions/stripRxdbFields",
+                  "db/reference/rxdb-db-collection/type-aliases/RxDBCollectionConfig",
+                  "db/reference/rxdb-db-collection/variables/OPEN_RXDB_SUBSCRIPTIONS",
+                  "db/reference/trailbase-db-collection/classes/ExpectedDeleteTypeError",
+                  "db/reference/trailbase-db-collection/classes/ExpectedInsertTypeError",
+                  "db/reference/trailbase-db-collection/classes/ExpectedUpdateTypeError",
+                  "db/reference/trailbase-db-collection/classes/TimeoutWaitingForIdsError",
+                  "db/reference/trailbase-db-collection/classes/TrailBaseDBCollectionError",
+                  "db/reference/trailbase-db-collection/functions/trailBaseCollectionOptions",
+                  "db/reference/trailbase-db-collection/index",
+                  "db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionConfig",
+                  "db/reference/trailbase-db-collection/interfaces/TrailBaseCollectionUtils",
+                  "db/reference/type-aliases/ApplyJoinOptionalityToMergedSchema",
+                  "db/reference/type-aliases/ChangeListener",
+                  "db/reference/type-aliases/ChangeMessageOrDeleteKeyMessage",
+                  "db/reference/type-aliases/ChangesPayload",
+                  "db/reference/type-aliases/CleanupFn",
+                  "db/reference/type-aliases/ClearStorageFn",
+                  "db/reference/type-aliases/CollectionConfigSingleRowOption",
+                  "db/reference/type-aliases/CollectionStatus",
+                  "db/reference/type-aliases/ContextFromSource",
+                  "db/reference/type-aliases/ContextFromUnionBranches",
+                  "db/reference/type-aliases/ContextFromUnionSource",
+                  "db/reference/type-aliases/ContextSchema",
+                  "db/reference/type-aliases/CursorExpressions",
+                  "db/reference/type-aliases/DeleteKeyMessage",
+                  "db/reference/type-aliases/DeleteMutationFn",
+                  "db/reference/type-aliases/DeleteMutationFnParams",
+                  "db/reference/type-aliases/DeltaEvent",
+                  "db/reference/type-aliases/DeltaType",
+                  "db/reference/type-aliases/EffectQueryInput",
+                  "db/reference/type-aliases/ExtractContext",
+                  "db/reference/type-aliases/FieldPath",
+                  "db/reference/type-aliases/Fn",
+                  "db/reference/type-aliases/FunctionalHavingRow",
+                  "db/reference/type-aliases/GetResult",
+                  "db/reference/type-aliases/GetStorageSizeFn",
+                  "db/reference/type-aliases/GroupByCallback",
+                  "db/reference/type-aliases/IndexConstructor",
+                  "db/reference/type-aliases/IndexOperation",
+                  "db/reference/type-aliases/IndexOperation-1",
+                  "db/reference/type-aliases/InferCollectionType",
+                  "db/reference/type-aliases/InferResultType",
+                  "db/reference/type-aliases/InferSchemaInput",
+                  "db/reference/type-aliases/InferSchemaOutput",
+                  "db/reference/type-aliases/InitialQueryBuilder",
+                  "db/reference/type-aliases/InputRow",
+                  "db/reference/type-aliases/InsertMutationFn",
+                  "db/reference/type-aliases/InsertMutationFnParams",
+                  "db/reference/type-aliases/JoinOnCallback",
+                  "db/reference/type-aliases/KeyedNamespacedRow",
+                  "db/reference/type-aliases/KeyedStream",
+                  "db/reference/type-aliases/LiveQueryCollectionUtils",
+                  "db/reference/type-aliases/LoadSubsetFn",
+                  "db/reference/type-aliases/LoadSubsetOptions",
+                  "db/reference/type-aliases/MakeOptional",
+                  "db/reference/type-aliases/MaybeSingleResult",
+                  "db/reference/type-aliases/MergeContextForJoinCallback",
+                  "db/reference/type-aliases/MergeContextWithJoinType",
+                  "db/reference/type-aliases/MutationFn",
+                  "db/reference/type-aliases/MutationFnParams",
+                  "db/reference/type-aliases/NamespacedAndKeyedStream",
+                  "db/reference/type-aliases/NamespacedRow",
+                  "db/reference/type-aliases/NonEmptyArray",
+                  "db/reference/type-aliases/NonSingleResult",
+                  "db/reference/type-aliases/OperationType",
+                  "db/reference/type-aliases/OperatorName",
+                  "db/reference/type-aliases/OptimisticChangeMessage",
+                  "db/reference/type-aliases/OrderByCallback",
+                  "db/reference/type-aliases/Prettify",
+                  "db/reference/type-aliases/QueryBuilder",
+                  "db/reference/type-aliases/QueryResult",
+                  "db/reference/type-aliases/Ref",
+                  "db/reference/type-aliases/RefsForContext",
+                  "db/reference/type-aliases/ResolveTransactionChanges",
+                  "db/reference/type-aliases/ResultStream",
+                  "db/reference/type-aliases/ResultTypeFromSelect",
+                  "db/reference/type-aliases/Row",
+                  "db/reference/type-aliases/SchemaFromSource",
+                  "db/reference/type-aliases/SelectObject",
+                  "db/reference/type-aliases/SingleResult",
+                  "db/reference/type-aliases/SingleSource",
+                  "db/reference/type-aliases/Source",
+                  "db/reference/type-aliases/SourceClauseContext",
+                  "db/reference/type-aliases/StandardSchema",
+                  "db/reference/type-aliases/StandardSchemaAlias",
+                  "db/reference/type-aliases/StorageApi",
+                  "db/reference/type-aliases/StorageEventApi",
+                  "db/reference/type-aliases/Strategy",
+                  "db/reference/type-aliases/StrategyOptions",
+                  "db/reference/type-aliases/StringCollationConfig",
+                  "db/reference/type-aliases/SubscriptionEvents",
+                  "db/reference/type-aliases/SubscriptionStatus",
+                  "db/reference/type-aliases/SyncConfigRes",
+                  "db/reference/type-aliases/SyncMode",
+                  "db/reference/type-aliases/TransactionState",
+                  "db/reference/type-aliases/TransactionWithMutations",
+                  "db/reference/type-aliases/UnloadSubsetFn",
+                  "db/reference/type-aliases/UpdateMutationFn",
+                  "db/reference/type-aliases/UpdateMutationFnParams",
+                  "db/reference/type-aliases/UtilsRecord",
+                  "db/reference/type-aliases/VirtualOrigin",
+                  "db/reference/type-aliases/WhereCallback",
+                  "db/reference/type-aliases/WithResult",
+                  "db/reference/type-aliases/WithVirtualProps",
+                  "db/reference/type-aliases/WithoutVirtualProps",
+                  "db/reference/type-aliases/WritableDeep",
+                  "db/reference/variables/Query",
+                  "db/reference/variables/operators"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack AI",
+        "description": "Type-safe, provider-agnostic AI SDK",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "ai/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "ai/getting-started/overview",
+              "ai/getting-started/quick-start",
+              "ai/getting-started/quick-start-react-native",
+              "ai/getting-started/devtools",
+              "ai/getting-started/quick-start-vue",
+              "ai/getting-started/quick-start-svelte",
+              "ai/getting-started/quick-start-angular",
+              "ai/getting-started/quick-start-server",
+              "ai/getting-started/agent-skills"
+            ]
+          },
+          {
+            "group": "Comparison",
+            "pages": [
+              "ai/comparison/vercel-ai-sdk"
+            ]
+          },
+          {
+            "group": "Tools",
+            "pages": [
+              "ai/tools/tools",
+              "ai/tools/provider-tools",
+              "ai/tools/provider-skills",
+              "ai/tools/tool-architecture",
+              "ai/tools/server-tools",
+              "ai/tools/client-tools",
+              "ai/tools/tool-approval",
+              "ai/tools/lazy-tool-discovery"
+            ]
+          },
+          {
+            "group": "MCP",
+            "pages": [
+              "ai/tools/mcp",
+              "ai/tools/mcp-managed",
+              "ai/tools/mcp-manual",
+              "ai/tools/mcp-codegen",
+              "ai/mcp/apps"
+            ]
+          },
+          {
+            "group": "Chat & Streaming",
+            "pages": [
+              "ai/chat/agentic-cycle",
+              "ai/chat/streaming",
+              "ai/chat/connection-adapters",
+              "ai/chat/thinking-content",
+              "ai/chat/persistence"
+            ]
+          },
+          {
+            "group": "Protocol",
+            "pages": [
+              "ai/protocol/custom-events"
+            ]
+          },
+          {
+            "group": "Structured Outputs",
+            "pages": [
+              "ai/structured-outputs/overview",
+              "ai/structured-outputs/one-shot",
+              "ai/structured-outputs/streaming",
+              "ai/structured-outputs/multi-turn",
+              "ai/structured-outputs/with-tools"
+            ]
+          },
+          {
+            "group": "Code Mode",
+            "pages": [
+              "ai/code-mode/code-mode",
+              "ai/code-mode/client-integration",
+              "ai/code-mode/code-mode-with-skills",
+              "ai/code-mode/code-mode-isolates",
+              "ai/code-mode/lazy-tools"
+            ]
+          },
+          {
+            "group": "Media",
+            "pages": [
+              "ai/media/generations",
+              "ai/media/realtime-chat",
+              "ai/media/text-to-speech",
+              "ai/media/transcription",
+              "ai/media/audio-recording",
+              "ai/media/audio-generation",
+              "ai/media/image-generation",
+              "ai/media/video-generation",
+              "ai/media/generation-hooks"
+            ]
+          },
+          {
+            "group": "Middleware",
+            "pages": [
+              "ai/advanced/middleware",
+              "ai/advanced/built-in-middleware",
+              "ai/advanced/otel"
+            ]
+          },
+          {
+            "group": "Sandboxes",
+            "pages": [
+              "ai/sandbox/overview",
+              "ai/sandbox/quick-start",
+              "ai/sandbox/providers",
+              "ai/sandbox/harnesses",
+              "ai/sandbox/workspace",
+              "ai/sandbox/provisioning",
+              "ai/sandbox/tools",
+              "ai/sandbox/policy",
+              "ai/sandbox/lifecycle",
+              "ai/sandbox/events",
+              "ai/sandbox/observability",
+              "ai/sandbox/cloudflare"
+            ]
+          },
+          {
+            "group": "Advanced",
+            "pages": [
+              "ai/advanced/runtime-context",
+              "ai/advanced/debug-logging",
+              "ai/advanced/multimodal-content",
+              "ai/advanced/per-model-type-safety",
+              "ai/advanced/runtime-adapter-switching",
+              "ai/advanced/tree-shaking",
+              "ai/advanced/extend-adapter",
+              "ai/advanced/typed-options"
+            ]
+          },
+          {
+            "group": "Migration",
+            "pages": [
+              "ai/migration/migration",
+              "ai/migration/migration-from-vercel-ai",
+              "ai/migration/ag-ui-compliance",
+              "ai/migration/sampling-options-to-model-options"
+            ]
+          },
+          {
+            "group": "API",
+            "pages": [
+              "ai/api/ai",
+              "ai/api/ai-client",
+              "ai/api/ai-react",
+              "ai/api/ai-solid",
+              "ai/api/ai-preact",
+              "ai/api/ai-vue",
+              "ai/api/ai-svelte",
+              "ai/api/ai-angular"
+            ]
+          },
+          {
+            "group": "Adapters",
+            "pages": [
+              "ai/adapters/openai",
+              "ai/adapters/anthropic",
+              "ai/adapters/gemini",
+              "ai/adapters/ollama",
+              "ai/adapters/grok",
+              "ai/adapters/groq",
+              "ai/adapters/mistral",
+              "ai/adapters/elevenlabs",
+              "ai/adapters/fal",
+              "ai/adapters/openrouter",
+              "ai/adapters/openai-compatible",
+              "ai/adapters/claude-code",
+              "ai/adapters/codex",
+              "ai/adapters/opencode",
+              "ai/adapters/grok-build",
+              "ai/adapters/acp-compatible",
+              "ai/adapters/bedrock"
+            ]
+          },
+          {
+            "group": "Community Adapters",
+            "pages": [
+              "ai/community-adapters/guide",
+              "ai/community-adapters/decart",
+              "ai/community-adapters/cencori",
+              "ai/community-adapters/cloudflare",
+              "ai/community-adapters/soniox",
+              "ai/community-adapters/mynth"
+            ]
+          },
+          {
+            "group": "Class References",
+            "pages": [
+              "ai/reference/classes/BaseAdapter",
+              "ai/reference/classes/BatchStrategy",
+              "ai/reference/classes/CompositeStrategy",
+              "ai/reference/classes/ImmediateStrategy",
+              "ai/reference/classes/PartialJSONParser",
+              "ai/reference/classes/PunctuationStrategy",
+              "ai/reference/classes/StreamProcessor",
+              "ai/reference/classes/ToolCallManager",
+              "ai/reference/classes/RealtimeClient",
+              "ai/reference/classes/WordBoundaryStrategy"
+            ]
+          },
+          {
+            "group": "Function References",
+            "pages": [
+              "ai/reference/functions/text",
+              "ai/reference/functions/textOptions",
+              "ai/reference/functions/combineStrategies",
+              "ai/reference/functions/convertMessagesToModelMessages",
+              "ai/reference/functions/convertZodToJsonSchema",
+              "ai/reference/functions/createReplayStream",
+              "ai/reference/functions/embedding",
+              "ai/reference/functions/generateMessageId",
+              "ai/reference/functions/maxIterations",
+              "ai/reference/functions/messages",
+              "ai/reference/functions/modelMessageToUIMessage",
+              "ai/reference/functions/modelMessagesToUIMessages",
+              "ai/reference/functions/normalizeToUIMessage",
+              "ai/reference/functions/parsePartialJSON",
+              "ai/reference/functions/summarize",
+              "ai/reference/functions/toServerSentEventsStream",
+              "ai/reference/functions/toServerSentEventsResponse",
+              "ai/reference/functions/toolDefinition",
+              "ai/reference/functions/uiMessageToModelMessages",
+              "ai/reference/functions/realtimeToken",
+              "ai/reference/functions/untilFinishReason"
+            ]
+          },
+          {
+            "group": "Interface References",
+            "pages": [
+              "ai/reference/interfaces/AIAdapter",
+              "ai/reference/interfaces/AIAdapterConfig",
+              "ai/reference/interfaces/AgentLoopState",
+              "ai/reference/interfaces/ApprovalRequestedStreamChunk",
+              "ai/reference/interfaces/AudioPart",
+              "ai/reference/interfaces/AudioVisualization",
+              "ai/reference/interfaces/BaseStreamChunk",
+              "ai/reference/interfaces/TextCompletionChunk",
+              "ai/reference/interfaces/TextOptions",
+              "ai/reference/interfaces/ChunkRecording",
+              "ai/reference/interfaces/ChunkStrategy",
+              "ai/reference/interfaces/ClientTool",
+              "ai/reference/interfaces/ContentPartSource",
+              "ai/reference/interfaces/ContentStreamChunk",
+              "ai/reference/interfaces/DefaultMessageMetadataByModality",
+              "ai/reference/interfaces/DocumentPart",
+              "ai/reference/interfaces/DoneStreamChunk",
+              "ai/reference/interfaces/EmbeddingOptions",
+              "ai/reference/interfaces/EmbeddingResult",
+              "ai/reference/interfaces/ErrorStreamChunk",
+              "ai/reference/interfaces/ImagePart",
+              "ai/reference/interfaces/InternalToolCallState",
+              "ai/reference/interfaces/JSONParser",
+              "ai/reference/interfaces/ModelMessage",
+              "ai/reference/interfaces/ProcessorResult",
+              "ai/reference/interfaces/ProcessorState",
+              "ai/reference/interfaces/RealtimeAdapter",
+              "ai/reference/interfaces/RealtimeClientOptions",
+              "ai/reference/interfaces/RealtimeConnection",
+              "ai/reference/interfaces/RealtimeMessage",
+              "ai/reference/interfaces/RealtimeSessionConfig",
+              "ai/reference/interfaces/RealtimeToken",
+              "ai/reference/interfaces/RealtimeTokenAdapter",
+              "ai/reference/interfaces/RealtimeTokenOptions",
+              "ai/reference/interfaces/ResponseFormat",
+              "ai/reference/interfaces/ServerTool",
+              "ai/reference/interfaces/StreamProcessorEvents",
+              "ai/reference/interfaces/StreamProcessorHandlers",
+              "ai/reference/interfaces/StreamProcessorOptions",
+              "ai/reference/interfaces/SummarizationOptions",
+              "ai/reference/interfaces/SummarizationResult",
+              "ai/reference/interfaces/TextPart",
+              "ai/reference/interfaces/ThinkingPart",
+              "ai/reference/interfaces/ThinkingStreamChunk",
+              "ai/reference/interfaces/Tool",
+              "ai/reference/interfaces/ToolCall",
+              "ai/reference/interfaces/ToolCallPart",
+              "ai/reference/interfaces/ToolCallStreamChunk",
+              "ai/reference/interfaces/ToolConfig",
+              "ai/reference/interfaces/ToolDefinition",
+              "ai/reference/interfaces/ToolDefinitionConfig",
+              "ai/reference/interfaces/ToolDefinitionInstance",
+              "ai/reference/interfaces/ToolInputAvailableStreamChunk",
+              "ai/reference/interfaces/ToolResultPart",
+              "ai/reference/interfaces/ToolResultStreamChunk",
+              "ai/reference/interfaces/UIMessage",
+              "ai/reference/interfaces/VideoPart"
+            ]
+          },
+          {
+            "group": "Type Alias References",
+            "pages": [
+              "ai/reference/type-aliases/AgentLoopStrategy",
+              "ai/reference/type-aliases/AnyClientTool",
+              "ai/reference/type-aliases/TextStreamOptionsForModel",
+              "ai/reference/type-aliases/TextStreamOptionsUnion",
+              "ai/reference/type-aliases/ConstrainedContent",
+              "ai/reference/type-aliases/ConstrainedModelMessage",
+              "ai/reference/type-aliases/ContentPart",
+              "ai/reference/type-aliases/ContentPartForModalities",
+              "ai/reference/type-aliases/ExtractModalitiesForModel",
+              "ai/reference/type-aliases/ExtractModelsFromAdapter",
+              "ai/reference/type-aliases/InferToolInput",
+              "ai/reference/type-aliases/InferToolName",
+              "ai/reference/type-aliases/InferToolOutput",
+              "ai/reference/type-aliases/MessagePart",
+              "ai/reference/type-aliases/RealtimeEvent",
+              "ai/reference/type-aliases/RealtimeMessagePart",
+              "ai/reference/type-aliases/RealtimeMode",
+              "ai/reference/type-aliases/RealtimeStatus",
+              "ai/reference/type-aliases/ModalitiesArrayToUnion",
+              "ai/reference/type-aliases/Modality",
+              "ai/reference/type-aliases/StreamChunk",
+              "ai/reference/type-aliases/StreamChunkType",
+              "ai/reference/type-aliases/ToolCallState",
+              "ai/reference/type-aliases/ToolResultState"
+            ]
+          },
+          {
+            "group": "Variable References",
+            "pages": [
+              "ai/reference/variables/aiEventClient",
+              "ai/reference/variables/defaultJSONParser"
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Architecture",
+                "expanded": false,
+                "pages": [
+                  "ai/architecture/approval-flow-processing"
+                ]
+              },
+              {
+                "group": "Chat",
+                "expanded": false,
+                "pages": [
+                  "ai/chat/structured-outputs"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "ai/reference/classes/ConsoleLogger",
+                  "ai/reference/classes/MCPDuplicateToolNameError",
+                  "ai/reference/classes/StandardSchemaValidationError",
+                  "ai/reference/functions/brandProviderTool",
+                  "ai/reference/functions/buildBaseUsage",
+                  "ai/reference/functions/chat",
+                  "ai/reference/functions/chatParamsFromRequest",
+                  "ai/reference/functions/chatParamsFromRequestBody",
+                  "ai/reference/functions/convertSchemaToJsonSchema",
+                  "ai/reference/functions/createAudioOptions",
+                  "ai/reference/functions/createCapability",
+                  "ai/reference/functions/createChatMiddleware",
+                  "ai/reference/functions/createChatOptions",
+                  "ai/reference/functions/createFrozenRegistry",
+                  "ai/reference/functions/createImageOptions",
+                  "ai/reference/functions/createModel",
+                  "ai/reference/functions/createSpeechOptions",
+                  "ai/reference/functions/createSummarizeOptions",
+                  "ai/reference/functions/createToolRegistry",
+                  "ai/reference/functions/createTranscriptionOptions",
+                  "ai/reference/functions/createVideoOptions",
+                  "ai/reference/functions/defineChatMiddleware",
+                  "ai/reference/functions/detectImageMimeType",
+                  "ai/reference/functions/extendAdapter",
+                  "ai/reference/functions/firstSentence",
+                  "ai/reference/functions/generateAudio",
+                  "ai/reference/functions/generateImage",
+                  "ai/reference/functions/generateSpeech",
+                  "ai/reference/functions/generateTranscription",
+                  "ai/reference/functions/generateVideo",
+                  "ai/reference/functions/getProviderExecutedMetadata",
+                  "ai/reference/functions/getVideoJobStatus",
+                  "ai/reference/functions/isContentPart",
+                  "ai/reference/functions/isContentPartArray",
+                  "ai/reference/functions/isProviderExecutedToolCall",
+                  "ai/reference/functions/isStandardSchema",
+                  "ai/reference/functions/mergeAgentTools",
+                  "ai/reference/functions/normalizeSystemPrompts",
+                  "ai/reference/functions/normalizeToolResult",
+                  "ai/reference/functions/parseWithStandardSchema",
+                  "ai/reference/functions/renderLazyCatalogEntry",
+                  "ai/reference/functions/resolveMediaPrompt",
+                  "ai/reference/functions/streamToText",
+                  "ai/reference/functions/toHttpResponse",
+                  "ai/reference/functions/toHttpStream",
+                  "ai/reference/functions/uiMessagesToWire",
+                  "ai/reference/index",
+                  "ai/reference/interfaces/AbortInfo",
+                  "ai/reference/interfaces/AfterToolCallInfo",
+                  "ai/reference/interfaces/ApprovalRequestedEvent",
+                  "ai/reference/interfaces/AudioAdapter",
+                  "ai/reference/interfaces/AudioGenerationOptions",
+                  "ai/reference/interfaces/AudioGenerationResult",
+                  "ai/reference/interfaces/BaseAGUIEvent",
+                  "ai/reference/interfaces/BaseUsageInput",
+                  "ai/reference/interfaces/CapabilityContext",
+                  "ai/reference/interfaces/CapabilityGetter",
+                  "ai/reference/interfaces/ChatMCPOptions",
+                  "ai/reference/interfaces/ChatMiddleware",
+                  "ai/reference/interfaces/ChatMiddlewareConfig",
+                  "ai/reference/interfaces/ChatMiddlewareContext",
+                  "ai/reference/interfaces/ChatSandboxHooks",
+                  "ai/reference/interfaces/ContentPartDataSource",
+                  "ai/reference/interfaces/ContentPartUrlSource",
+                  "ai/reference/interfaces/CustomEvent",
+                  "ai/reference/interfaces/DebugCategories",
+                  "ai/reference/interfaces/DebugConfig",
+                  "ai/reference/interfaces/DefinedChatMiddleware",
+                  "ai/reference/interfaces/ErrorInfo",
+                  "ai/reference/interfaces/ExtendedModelDef",
+                  "ai/reference/interfaces/FinishInfo",
+                  "ai/reference/interfaces/GenerationAbortInfo",
+                  "ai/reference/interfaces/GenerationErrorInfo",
+                  "ai/reference/interfaces/GenerationFinishInfo",
+                  "ai/reference/interfaces/GenerationMiddleware",
+                  "ai/reference/interfaces/GenerationMiddlewareContext",
+                  "ai/reference/interfaces/GenerationUsageInfo",
+                  "ai/reference/interfaces/ImageAdapter",
+                  "ai/reference/interfaces/ImageGenerationOptions",
+                  "ai/reference/interfaces/ImageGenerationResult",
+                  "ai/reference/interfaces/IterationInfo",
+                  "ai/reference/interfaces/JSONSchema",
+                  "ai/reference/interfaces/LazyToolsConfig",
+                  "ai/reference/interfaces/Logger",
+                  "ai/reference/interfaces/MCPToolSource",
+                  "ai/reference/interfaces/MediaInputMetadata",
+                  "ai/reference/interfaces/MessagesSnapshotEvent",
+                  "ai/reference/interfaces/ModelCapabilities",
+                  "ai/reference/interfaces/NormalizedSystemPrompt",
+                  "ai/reference/interfaces/ProviderExecutedToolMetadata",
+                  "ai/reference/interfaces/ProviderTool",
+                  "ai/reference/interfaces/RealtimeAudioPart",
+                  "ai/reference/interfaces/RealtimeError",
+                  "ai/reference/interfaces/RealtimeEventPayloads",
+                  "ai/reference/interfaces/RealtimeImagePart",
+                  "ai/reference/interfaces/RealtimeTextPart",
+                  "ai/reference/interfaces/RealtimeToolCallPart",
+                  "ai/reference/interfaces/RealtimeToolResultPart",
+                  "ai/reference/interfaces/ReasoningEncryptedValueEvent",
+                  "ai/reference/interfaces/ReasoningEndEvent",
+                  "ai/reference/interfaces/ReasoningMessageContentEvent",
+                  "ai/reference/interfaces/ReasoningMessageEndEvent",
+                  "ai/reference/interfaces/ReasoningMessageStartEvent",
+                  "ai/reference/interfaces/ReasoningStartEvent",
+                  "ai/reference/interfaces/ResolvedMediaPrompt",
+                  "ai/reference/interfaces/RunErrorEvent",
+                  "ai/reference/interfaces/RunFinishedEvent",
+                  "ai/reference/interfaces/RunStartedEvent",
+                  "ai/reference/interfaces/SandboxFileEvent",
+                  "ai/reference/interfaces/StateDeltaEvent",
+                  "ai/reference/interfaces/StateSnapshotEvent",
+                  "ai/reference/interfaces/StepFinishedEvent",
+                  "ai/reference/interfaces/StepStartedEvent",
+                  "ai/reference/interfaces/StructuredOutputCompleteEvent",
+                  "ai/reference/interfaces/StructuredOutputMiddlewareConfig",
+                  "ai/reference/interfaces/StructuredOutputPart",
+                  "ai/reference/interfaces/StructuredOutputStartEvent",
+                  "ai/reference/interfaces/SummarizeAdapter",
+                  "ai/reference/interfaces/TTSAdapter",
+                  "ai/reference/interfaces/TTSOptions",
+                  "ai/reference/interfaces/TTSResult",
+                  "ai/reference/interfaces/TextAdapter",
+                  "ai/reference/interfaces/TextMessageContentEvent",
+                  "ai/reference/interfaces/TextMessageEndEvent",
+                  "ai/reference/interfaces/TextMessageStartEvent",
+                  "ai/reference/interfaces/ToolCallArgsEvent",
+                  "ai/reference/interfaces/ToolCallEndEvent",
+                  "ai/reference/interfaces/ToolCallHookContext",
+                  "ai/reference/interfaces/ToolCallResultEvent",
+                  "ai/reference/interfaces/ToolCallStartEvent",
+                  "ai/reference/interfaces/ToolInputAvailableEvent",
+                  "ai/reference/interfaces/ToolPhaseCompleteInfo",
+                  "ai/reference/interfaces/ToolRegistry",
+                  "ai/reference/interfaces/TranscriptionAdapter",
+                  "ai/reference/interfaces/TranscriptionOptions",
+                  "ai/reference/interfaces/TranscriptionResult",
+                  "ai/reference/interfaces/TranscriptionSegment",
+                  "ai/reference/interfaces/TranscriptionWord",
+                  "ai/reference/interfaces/UIResourceEvent",
+                  "ai/reference/interfaces/UIResourcePart",
+                  "ai/reference/interfaces/UsageInfo",
+                  "ai/reference/interfaces/VADConfig",
+                  "ai/reference/interfaces/VideoAdapter",
+                  "ai/reference/interfaces/VideoGenerationOptions",
+                  "ai/reference/interfaces/VideoJobResult",
+                  "ai/reference/interfaces/VideoStatusResult",
+                  "ai/reference/interfaces/VideoUrlResult",
+                  "ai/reference/type-aliases/AGUIEvent",
+                  "ai/reference/type-aliases/AGUIEventType",
+                  "ai/reference/type-aliases/AIAdapter",
+                  "ai/reference/type-aliases/AnyAudioAdapter",
+                  "ai/reference/type-aliases/AnyChatMiddleware",
+                  "ai/reference/type-aliases/AnyGenerationMiddleware",
+                  "ai/reference/type-aliases/AnyImageAdapter",
+                  "ai/reference/type-aliases/AnySummarizeAdapter",
+                  "ai/reference/type-aliases/AnyTTSAdapter",
+                  "ai/reference/type-aliases/AnyTextAdapter",
+                  "ai/reference/type-aliases/AnyTool",
+                  "ai/reference/type-aliases/AnyTranscriptionAdapter",
+                  "ai/reference/type-aliases/AnyVideoAdapter",
+                  "ai/reference/type-aliases/BeforeToolCallDecision",
+                  "ai/reference/type-aliases/Capability",
+                  "ai/reference/type-aliases/CapabilityHandle",
+                  "ai/reference/type-aliases/CapabilityProvider",
+                  "ai/reference/type-aliases/ChatMiddlewarePhase",
+                  "ai/reference/type-aliases/ContentPartForInputModalitiesTypes",
+                  "ai/reference/type-aliases/ContentPartSource",
+                  "ai/reference/type-aliases/DebugOption",
+                  "ai/reference/type-aliases/DeepPartial",
+                  "ai/reference/type-aliases/GeneratedAudio",
+                  "ai/reference/type-aliases/GeneratedImage",
+                  "ai/reference/type-aliases/GeneratedMediaSource",
+                  "ai/reference/type-aliases/GenerationActivity",
+                  "ai/reference/type-aliases/InferSchemaType",
+                  "ai/reference/type-aliases/InputModalitiesTypes",
+                  "ai/reference/type-aliases/MCPConnectionPolicy",
+                  "ai/reference/type-aliases/MediaInputRole",
+                  "ai/reference/type-aliases/MediaPrompt",
+                  "ai/reference/type-aliases/MediaPromptFor",
+                  "ai/reference/type-aliases/MediaPromptModality",
+                  "ai/reference/type-aliases/MediaPromptPart",
+                  "ai/reference/type-aliases/ModelInputModalitiesByName",
+                  "ai/reference/type-aliases/RealtimeErrorCode",
+                  "ai/reference/type-aliases/RealtimeEventHandler",
+                  "ai/reference/type-aliases/SchemaInput",
+                  "ai/reference/type-aliases/StructuredOutputStream",
+                  "ai/reference/type-aliases/SystemPrompt",
+                  "ai/reference/type-aliases/ToolExecuteFunction",
+                  "ai/reference/type-aliases/ToolExecutionContext",
+                  "ai/reference/type-aliases/ToolOutputState",
+                  "ai/reference/type-aliases/UsageTotals",
+                  "ai/reference/type-aliases/WireMessage",
+                  "ai/reference/variables/DISCOVERY_TOOL_NAME"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Intent",
+        "description": "Agent skills and package intent",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "intent/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "intent/overview",
+              "intent/getting-started/quick-start-consumers",
+              "intent/getting-started/quick-start-maintainers",
+              "intent/registry"
+            ]
+          },
+          {
+            "group": "Concepts",
+            "pages": [
+              "intent/concepts/trust-model",
+              "intent/concepts/configuration"
+            ]
+          },
+          {
+            "group": "CLI Reference",
+            "pages": [
+              "intent/cli/intent-install",
+              "intent/cli/intent-hooks",
+              "intent/cli/intent-exclude",
+              "intent/cli/intent-list",
+              "intent/cli/intent-load",
+              "intent/cli/intent-meta",
+              "intent/cli/intent-scaffold",
+              "intent/cli/intent-validate",
+              "intent/cli/intent-setup",
+              "intent/cli/intent-stale"
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Virtual",
+        "description": "Headless UI for virtualizing large element lists",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "virtual/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "virtual/introduction",
+              "virtual/installation",
+              "virtual/pretext",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/react/react-virtual"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/angular/angular-virtual"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/solid/solid-virtual"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/svelte/svelte-virtual"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/vue/vue-virtual"
+                ]
+              },
+              {
+                "group": "Marko",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/marko/marko-virtual"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "virtual/chat"
+            ]
+          },
+          {
+            "group": "Core APIs",
+            "pages": [
+              "virtual/api/virtualizer",
+              "virtual/api/virtual-item"
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/angular/examples/fixed",
+                  "virtual/framework/angular/examples/variable",
+                  "virtual/framework/angular/examples/dynamic",
+                  "virtual/framework/angular/examples/padding",
+                  "virtual/framework/angular/examples/sticky",
+                  "virtual/framework/angular/examples/infinite-scroll",
+                  "virtual/framework/angular/examples/smooth-scroll",
+                  "virtual/framework/angular/examples/table",
+                  "virtual/framework/angular/examples/window"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/react/examples/fixed",
+                  "virtual/framework/react/examples/variable",
+                  "virtual/framework/react/examples/dynamic",
+                  "virtual/framework/react/examples/pretext",
+                  "virtual/framework/react/examples/padding",
+                  "virtual/framework/react/examples/scroll-padding",
+                  "virtual/framework/react/examples/sticky",
+                  "virtual/framework/react/examples/infinite-scroll",
+                  "virtual/framework/react/examples/chat",
+                  "virtual/framework/react/examples/smooth-scroll",
+                  "virtual/framework/react/examples/table",
+                  "virtual/framework/react/examples/window"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/svelte/examples/fixed",
+                  "virtual/framework/svelte/examples/dynamic",
+                  "virtual/framework/svelte/examples/sticky",
+                  "virtual/framework/svelte/examples/infinite-scroll",
+                  "virtual/framework/svelte/examples/smooth-scroll",
+                  "virtual/framework/svelte/examples/table"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/vue/examples/fixed",
+                  "virtual/framework/vue/examples/variable",
+                  "virtual/framework/vue/examples/dynamic",
+                  "virtual/framework/vue/examples/sticky",
+                  "virtual/framework/vue/examples/infinite-scroll",
+                  "virtual/framework/vue/examples/smooth-scroll",
+                  "virtual/framework/vue/examples/table",
+                  "virtual/framework/vue/examples/padding",
+                  "virtual/framework/vue/examples/scroll-padding"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/lit/examples/fixed",
+                  "virtual/framework/lit/examples/dynamic"
+                ]
+              },
+              {
+                "group": "Marko",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/marko/examples/fixed",
+                  "virtual/framework/marko/examples/variable",
+                  "virtual/framework/marko/examples/dynamic",
+                  "virtual/framework/marko/examples/grid",
+                  "virtual/framework/marko/examples/infinite-scroll",
+                  "virtual/framework/marko/examples/smooth-scroll",
+                  "virtual/framework/marko/examples/window"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "virtual/framework/lit/lit-virtual"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Pacer",
+        "description": "Debouncing, throttling, rate limiting, and queuing",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "pacer/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "pacer/overview",
+              "pacer/quick-start",
+              "pacer/installation",
+              "pacer/devtools",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/adapter"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/adapter"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/adapter"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/adapter"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "pacer/guides/which-pacer-utility-should-i-choose",
+              "pacer/guides/debouncing",
+              "pacer/guides/throttling",
+              "pacer/guides/rate-limiting",
+              "pacer/guides/queuing",
+              "pacer/guides/batching",
+              "pacer/guides/async-debouncing",
+              "pacer/guides/async-throttling",
+              "pacer/guides/async-rate-limiting",
+              "pacer/guides/async-queuing",
+              "pacer/guides/async-batching",
+              "pacer/guides/async-retrying"
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "pacer/reference/index",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/index"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/index"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/index"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/index"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Debouncer API Reference",
+            "pages": [
+              "pacer/reference/interfaces/DebouncerOptions",
+              "pacer/reference/interfaces/DebouncerState",
+              "pacer/reference/interfaces/AsyncDebouncerOptions",
+              "pacer/reference/interfaces/AsyncDebouncerState",
+              "pacer/reference/functions/debounce",
+              "pacer/reference/functions/asyncDebounce",
+              "pacer/reference/classes/Debouncer",
+              "pacer/reference/classes/AsyncDebouncer",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/interfaces/ReactDebouncerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactDebouncer",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncDebouncer",
+                  "pacer/framework/react/reference/functions/useDebouncer",
+                  "pacer/framework/react/reference/functions/useDebouncedCallback",
+                  "pacer/framework/react/reference/functions/useDebouncedState",
+                  "pacer/framework/react/reference/functions/useDebouncedValue",
+                  "pacer/framework/react/reference/functions/useAsyncDebouncer",
+                  "pacer/framework/react/reference/functions/useAsyncDebouncedCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/interfaces/SolidDebouncerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidDebouncer",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer",
+                  "pacer/framework/solid/reference/functions/createDebouncer",
+                  "pacer/framework/solid/reference/functions/createDebouncedSignal",
+                  "pacer/framework/solid/reference/functions/createDebouncedValue",
+                  "pacer/framework/solid/reference/functions/createAsyncDebouncer"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/interfaces/PreactDebouncerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactDebouncer",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer",
+                  "pacer/framework/preact/reference/functions/useDebouncer",
+                  "pacer/framework/preact/reference/functions/useDebouncedCallback",
+                  "pacer/framework/preact/reference/functions/useDebouncedState",
+                  "pacer/framework/preact/reference/functions/useDebouncedValue",
+                  "pacer/framework/preact/reference/functions/useAsyncDebouncer",
+                  "pacer/framework/preact/reference/functions/useAsyncDebouncedCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/interfaces/AngularDebouncerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularDebouncer",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer",
+                  "pacer/framework/angular/reference/functions/injectDebouncer",
+                  "pacer/framework/angular/reference/functions/injectDebouncedCallback",
+                  "pacer/framework/angular/reference/functions/injectDebouncedSignal",
+                  "pacer/framework/angular/reference/functions/injectDebouncedValue",
+                  "pacer/framework/angular/reference/functions/injectAsyncDebouncer",
+                  "pacer/framework/angular/reference/functions/injectAsyncDebouncedCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Throttler API Reference",
+            "pages": [
+              "pacer/reference/interfaces/ThrottlerOptions",
+              "pacer/reference/interfaces/ThrottlerState",
+              "pacer/reference/interfaces/AsyncThrottlerOptions",
+              "pacer/reference/interfaces/AsyncThrottlerState",
+              "pacer/reference/functions/throttle",
+              "pacer/reference/functions/asyncThrottle",
+              "pacer/reference/classes/Throttler",
+              "pacer/reference/classes/AsyncThrottler",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/interfaces/ReactThrottlerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactThrottler",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncThrottler",
+                  "pacer/framework/react/reference/functions/useThrottler",
+                  "pacer/framework/react/reference/functions/useThrottledCallback",
+                  "pacer/framework/react/reference/functions/useThrottledState",
+                  "pacer/framework/react/reference/functions/useThrottledValue",
+                  "pacer/framework/react/reference/functions/useAsyncThrottler",
+                  "pacer/framework/react/reference/functions/useAsyncThrottledCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/interfaces/SolidThrottlerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidThrottler",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncThrottler",
+                  "pacer/framework/solid/reference/functions/createThrottler",
+                  "pacer/framework/solid/reference/functions/createThrottledSignal",
+                  "pacer/framework/solid/reference/functions/createThrottledValue",
+                  "pacer/framework/solid/reference/functions/createAsyncThrottler"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/interfaces/PreactThrottlerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactThrottler",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncThrottler",
+                  "pacer/framework/preact/reference/functions/useThrottler",
+                  "pacer/framework/preact/reference/functions/useThrottledCallback",
+                  "pacer/framework/preact/reference/functions/useThrottledState",
+                  "pacer/framework/preact/reference/functions/useThrottledValue",
+                  "pacer/framework/preact/reference/functions/useAsyncThrottler",
+                  "pacer/framework/preact/reference/functions/useAsyncThrottledCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/interfaces/AngularThrottlerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularThrottler",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncThrottler",
+                  "pacer/framework/angular/reference/functions/injectThrottler",
+                  "pacer/framework/angular/reference/functions/injectThrottledCallback",
+                  "pacer/framework/angular/reference/functions/injectThrottledSignal",
+                  "pacer/framework/angular/reference/functions/injectThrottledValue",
+                  "pacer/framework/angular/reference/functions/injectAsyncThrottler",
+                  "pacer/framework/angular/reference/functions/injectAsyncThrottledCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Rate Limiter API Reference",
+            "pages": [
+              "pacer/reference/interfaces/RateLimiterOptions",
+              "pacer/reference/interfaces/RateLimiterState",
+              "pacer/reference/interfaces/AsyncRateLimiterOptions",
+              "pacer/reference/interfaces/AsyncRateLimiterState",
+              "pacer/reference/functions/rateLimit",
+              "pacer/reference/functions/asyncRateLimit",
+              "pacer/reference/classes/RateLimiter",
+              "pacer/reference/classes/AsyncRateLimiter",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/interfaces/ReactRateLimiter",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter",
+                  "pacer/framework/react/reference/functions/useRateLimiter",
+                  "pacer/framework/react/reference/functions/useRateLimitedCallback",
+                  "pacer/framework/react/reference/functions/useRateLimitedState",
+                  "pacer/framework/react/reference/functions/useRateLimitedValue",
+                  "pacer/framework/react/reference/functions/useAsyncRateLimiter",
+                  "pacer/framework/react/reference/functions/useAsyncRateLimitedCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/interfaces/SolidRateLimiter",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter",
+                  "pacer/framework/solid/reference/functions/createRateLimiter",
+                  "pacer/framework/solid/reference/functions/createRateLimitedSignal",
+                  "pacer/framework/solid/reference/functions/createRateLimitedValue",
+                  "pacer/framework/solid/reference/functions/createAsyncRateLimiter"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/interfaces/PreactRateLimiter",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter",
+                  "pacer/framework/preact/reference/functions/useRateLimiter",
+                  "pacer/framework/preact/reference/functions/useRateLimitedCallback",
+                  "pacer/framework/preact/reference/functions/useRateLimitedState",
+                  "pacer/framework/preact/reference/functions/useRateLimitedValue",
+                  "pacer/framework/preact/reference/functions/useAsyncRateLimiter",
+                  "pacer/framework/preact/reference/functions/useAsyncRateLimitedCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularRateLimiter",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter",
+                  "pacer/framework/angular/reference/functions/injectRateLimiter",
+                  "pacer/framework/angular/reference/functions/injectRateLimitedCallback",
+                  "pacer/framework/angular/reference/functions/injectRateLimitedSignal",
+                  "pacer/framework/angular/reference/functions/injectRateLimitedValue",
+                  "pacer/framework/angular/reference/functions/injectAsyncRateLimiter",
+                  "pacer/framework/angular/reference/functions/injectAsyncRateLimitedCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Queue API Reference",
+            "pages": [
+              "pacer/reference/interfaces/QueuerOptions",
+              "pacer/reference/interfaces/QueuerState",
+              "pacer/reference/interfaces/AsyncQueuerOptions",
+              "pacer/reference/interfaces/AsyncQueuerState",
+              "pacer/reference/functions/queue",
+              "pacer/reference/functions/asyncQueue",
+              "pacer/reference/classes/Queuer",
+              "pacer/reference/classes/AsyncQueuer",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/interfaces/ReactQueuerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions",
+                  "pacer/framework/react/reference/interfaces/ReactQueuer",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncQueuer",
+                  "pacer/framework/react/reference/functions/useQueuer",
+                  "pacer/framework/react/reference/functions/useQueuedState",
+                  "pacer/framework/react/reference/functions/useQueuedValue",
+                  "pacer/framework/react/reference/functions/useAsyncQueuer",
+                  "pacer/framework/react/reference/functions/useAsyncQueuedState"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/interfaces/SolidQueuerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidQueuer",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncQueuer",
+                  "pacer/framework/solid/reference/functions/createQueuer",
+                  "pacer/framework/solid/reference/functions/createAsyncQueuer",
+                  "pacer/framework/solid/reference/functions/createQueuedSignal"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/interfaces/PreactQueuerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactQueuer",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncQueuer",
+                  "pacer/framework/preact/reference/functions/useQueuer",
+                  "pacer/framework/preact/reference/functions/useQueuedState",
+                  "pacer/framework/preact/reference/functions/useQueuedValue",
+                  "pacer/framework/preact/reference/functions/useAsyncQueuer",
+                  "pacer/framework/preact/reference/functions/useAsyncQueuedState"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/interfaces/AngularQueuerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularQueuer",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncQueuer",
+                  "pacer/framework/angular/reference/functions/injectQueuer",
+                  "pacer/framework/angular/reference/functions/injectQueuedSignal",
+                  "pacer/framework/angular/reference/functions/injectQueuedValue",
+                  "pacer/framework/angular/reference/functions/injectAsyncQueuer",
+                  "pacer/framework/angular/reference/functions/injectAsyncQueuedSignal"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Batcher API Reference",
+            "pages": [
+              "pacer/reference/interfaces/BatcherOptions",
+              "pacer/reference/interfaces/BatcherState",
+              "pacer/reference/interfaces/AsyncBatcherOptions",
+              "pacer/reference/interfaces/AsyncBatcherState",
+              "pacer/reference/functions/batch",
+              "pacer/reference/functions/asyncBatch",
+              "pacer/reference/classes/Batcher",
+              "pacer/reference/classes/AsyncBatcher",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/reference/interfaces/ReactBatcherOptions",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions",
+                  "pacer/framework/react/reference/interfaces/ReactBatcher",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncBatcher",
+                  "pacer/framework/react/reference/functions/useBatcher",
+                  "pacer/framework/react/reference/functions/useAsyncBatcher",
+                  "pacer/framework/react/reference/functions/useBatchedCallback",
+                  "pacer/framework/react/reference/functions/useAsyncBatchedCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/reference/interfaces/SolidBatcherOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidBatcher",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncBatcher",
+                  "pacer/framework/solid/reference/functions/createBatcher",
+                  "pacer/framework/solid/reference/functions/createAsyncBatcher"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/reference/interfaces/PreactBatcherOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactBatcher",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncBatcher",
+                  "pacer/framework/preact/reference/functions/useBatcher",
+                  "pacer/framework/preact/reference/functions/useAsyncBatcher",
+                  "pacer/framework/preact/reference/functions/useBatchedCallback",
+                  "pacer/framework/preact/reference/functions/useAsyncBatchedCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/interfaces/AngularBatcherOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions",
+                  "pacer/framework/angular/reference/interfaces/AngularBatcher",
+                  "pacer/framework/angular/reference/interfaces/AngularAsyncBatcher",
+                  "pacer/framework/angular/reference/functions/injectBatcher",
+                  "pacer/framework/angular/reference/functions/injectBatchedCallback",
+                  "pacer/framework/angular/reference/functions/injectAsyncBatcher",
+                  "pacer/framework/angular/reference/functions/injectAsyncBatchedCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Debouncer Examples",
+            "pages": [
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/vanilla/examples/liteDebounce",
+                  "pacer/framework/vanilla/examples/LiteDebouncer"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/debounce",
+                  "pacer/framework/react/examples/asyncDebounce",
+                  "pacer/framework/react/examples/useDebouncer",
+                  "pacer/framework/react/examples/useDebouncedCallback",
+                  "pacer/framework/react/examples/useDebouncedState",
+                  "pacer/framework/react/examples/useDebouncedValue",
+                  "pacer/framework/react/examples/useAsyncDebouncer",
+                  "pacer/framework/react/examples/useAsyncDebouncedCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/examples/debounce",
+                  "pacer/framework/solid/examples/asyncDebounce",
+                  "pacer/framework/solid/examples/createDebouncer",
+                  "pacer/framework/solid/examples/createDebouncedSignal",
+                  "pacer/framework/solid/examples/createDebouncedValue",
+                  "pacer/framework/solid/examples/createAsyncDebouncer"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/examples/debounce",
+                  "pacer/framework/preact/examples/asyncDebounce",
+                  "pacer/framework/preact/examples/useDebouncer",
+                  "pacer/framework/preact/examples/useDebouncedCallback",
+                  "pacer/framework/preact/examples/useDebouncedState",
+                  "pacer/framework/preact/examples/useDebouncedValue",
+                  "pacer/framework/preact/examples/useAsyncDebouncer",
+                  "pacer/framework/preact/examples/useAsyncDebouncedCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/examples/debounce",
+                  "pacer/framework/angular/examples/asyncDebounce",
+                  "pacer/framework/angular/examples/injectDebouncer",
+                  "pacer/framework/angular/examples/injectDebouncedCallback",
+                  "pacer/framework/angular/examples/injectDebouncedSignal",
+                  "pacer/framework/angular/examples/injectDebouncedValue",
+                  "pacer/framework/angular/examples/injectAsyncDebouncer",
+                  "pacer/framework/angular/examples/injectAsyncDebouncedCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Throttler Examples",
+            "pages": [
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/vanilla/examples/liteThrottle",
+                  "pacer/framework/vanilla/examples/LiteThrottler"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/throttle",
+                  "pacer/framework/react/examples/asyncThrottle",
+                  "pacer/framework/react/examples/useThrottler",
+                  "pacer/framework/react/examples/useThrottledCallback",
+                  "pacer/framework/react/examples/useThrottledState",
+                  "pacer/framework/react/examples/useThrottledValue",
+                  "pacer/framework/react/examples/useAsyncThrottler"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/examples/throttle",
+                  "pacer/framework/solid/examples/asyncThrottle",
+                  "pacer/framework/solid/examples/createThrottler",
+                  "pacer/framework/solid/examples/createThrottledSignal",
+                  "pacer/framework/solid/examples/createThrottledValue",
+                  "pacer/framework/solid/examples/createAsyncThrottler"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/examples/throttle",
+                  "pacer/framework/preact/examples/asyncThrottle",
+                  "pacer/framework/preact/examples/useThrottler",
+                  "pacer/framework/preact/examples/useThrottledCallback",
+                  "pacer/framework/preact/examples/useThrottledState",
+                  "pacer/framework/preact/examples/useThrottledValue",
+                  "pacer/framework/preact/examples/useAsyncThrottler",
+                  "pacer/framework/preact/examples/useAsyncThrottledCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/examples/throttle",
+                  "pacer/framework/angular/examples/asyncThrottle",
+                  "pacer/framework/angular/examples/injectThrottler",
+                  "pacer/framework/angular/examples/injectThrottledCallback",
+                  "pacer/framework/angular/examples/injectThrottledSignal",
+                  "pacer/framework/angular/examples/injectThrottledValue",
+                  "pacer/framework/angular/examples/injectAsyncThrottler",
+                  "pacer/framework/angular/examples/injectAsyncThrottledCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Rate Limiter Examples",
+            "pages": [
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/vanilla/examples/liteRateLimit",
+                  "pacer/framework/vanilla/examples/LiteRateLimiter"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/rateLimit",
+                  "pacer/framework/react/examples/asyncRateLimit",
+                  "pacer/framework/react/examples/useRateLimiter",
+                  "pacer/framework/react/examples/useRateLimiterWithPersister",
+                  "pacer/framework/react/examples/useRateLimitedCallback",
+                  "pacer/framework/react/examples/useRateLimitedState",
+                  "pacer/framework/react/examples/useRateLimitedValue",
+                  "pacer/framework/react/examples/useAsyncRateLimiter",
+                  "pacer/framework/react/examples/useAsyncRateLimiterWithPersister"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/examples/rateLimit",
+                  "pacer/framework/solid/examples/asyncRateLimit",
+                  "pacer/framework/solid/examples/createRateLimiter",
+                  "pacer/framework/solid/examples/createRateLimitedSignal",
+                  "pacer/framework/solid/examples/createRateLimitedValue",
+                  "pacer/framework/solid/examples/createAsyncRateLimiter"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/examples/rateLimit",
+                  "pacer/framework/preact/examples/asyncRateLimit",
+                  "pacer/framework/preact/examples/useRateLimiter",
+                  "pacer/framework/preact/examples/useRateLimiterWithPersister",
+                  "pacer/framework/preact/examples/useRateLimitedCallback",
+                  "pacer/framework/preact/examples/useRateLimitedState",
+                  "pacer/framework/preact/examples/useRateLimitedValue",
+                  "pacer/framework/preact/examples/useAsyncRateLimiter",
+                  "pacer/framework/preact/examples/useAsyncRateLimiterWithPersister"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/examples/rateLimit",
+                  "pacer/framework/angular/examples/asyncRateLimit",
+                  "pacer/framework/angular/examples/injectRateLimiter",
+                  "pacer/framework/angular/examples/injectRateLimitedCallback",
+                  "pacer/framework/angular/examples/injectRateLimitedSignal",
+                  "pacer/framework/angular/examples/injectRateLimitedValue",
+                  "pacer/framework/angular/examples/injectRateLimiterWithPersister",
+                  "pacer/framework/angular/examples/injectAsyncRateLimiter",
+                  "pacer/framework/angular/examples/injectAsyncRateLimitedCallback",
+                  "pacer/framework/angular/examples/injectAsyncRateLimiterWithPersister"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Queue Examples",
+            "pages": [
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/vanilla/examples/liteQueue",
+                  "pacer/framework/vanilla/examples/LiteQueuer"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/queue",
+                  "pacer/framework/react/examples/useQueuer",
+                  "pacer/framework/react/examples/useQueuerWithPersister",
+                  "pacer/framework/react/examples/useQueuedState",
+                  "pacer/framework/react/examples/useQueuedValue",
+                  "pacer/framework/react/examples/useAsyncQueuer",
+                  "pacer/framework/react/examples/useAsyncQueuedState"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/examples/queue",
+                  "pacer/framework/solid/examples/createQueuer",
+                  "pacer/framework/solid/examples/createAsyncQueuer",
+                  "pacer/framework/solid/examples/createQueuedSignal"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/examples/queue",
+                  "pacer/framework/preact/examples/useQueuer",
+                  "pacer/framework/preact/examples/useQueuerWithPersister",
+                  "pacer/framework/preact/examples/useQueuedState",
+                  "pacer/framework/preact/examples/useQueuedValue",
+                  "pacer/framework/preact/examples/useAsyncQueuer",
+                  "pacer/framework/preact/examples/useAsyncQueuedState"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/examples/queue",
+                  "pacer/framework/angular/examples/injectQueuer",
+                  "pacer/framework/angular/examples/injectQueuedSignal",
+                  "pacer/framework/angular/examples/injectQueuedValue",
+                  "pacer/framework/angular/examples/injectQueuerWithPersister",
+                  "pacer/framework/angular/examples/injectAsyncQueuer",
+                  "pacer/framework/angular/examples/injectAsyncQueuedSignal"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Batcher Examples",
+            "pages": [
+              {
+                "group": "Vanilla",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/vanilla/examples/liteBatch",
+                  "pacer/framework/vanilla/examples/LiteBatcher"
+                ]
+              },
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/batch",
+                  "pacer/framework/react/examples/asyncBatch",
+                  "pacer/framework/react/examples/useBatcher",
+                  "pacer/framework/react/examples/useAsyncBatcher",
+                  "pacer/framework/react/examples/useBatchedCallback",
+                  "pacer/framework/react/examples/useAsyncBatchedCallback"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/solid/examples/batch",
+                  "pacer/framework/solid/examples/createBatcher",
+                  "pacer/framework/solid/examples/createAsyncBatcher"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/preact/examples/batch",
+                  "pacer/framework/preact/examples/asyncBatch",
+                  "pacer/framework/preact/examples/useBatcher",
+                  "pacer/framework/preact/examples/useAsyncBatcher",
+                  "pacer/framework/preact/examples/useBatchedCallback",
+                  "pacer/framework/preact/examples/useAsyncBatchedCallback"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/examples/batch",
+                  "pacer/framework/angular/examples/asyncBatch",
+                  "pacer/framework/angular/examples/injectBatcher",
+                  "pacer/framework/angular/examples/injectBatchedCallback",
+                  "pacer/framework/angular/examples/injectAsyncBatcher",
+                  "pacer/framework/angular/examples/injectAsyncBatchedCallback"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "TanStack Query Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/react/examples/react-query-debounced-prefetch",
+                  "pacer/framework/react/examples/react-query-throttled-prefetch",
+                  "pacer/framework/react/examples/react-query-queued-prefetch"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "pacer/framework/angular/reference/functions/providePacerOptions",
+                  "pacer/framework/angular/reference/interfaces/AsyncQueuedSignal",
+                  "pacer/framework/angular/reference/interfaces/DebouncedSignal",
+                  "pacer/framework/angular/reference/interfaces/QueuedSignal",
+                  "pacer/framework/angular/reference/interfaces/RateLimitedSignal",
+                  "pacer/framework/angular/reference/interfaces/ThrottledSignal",
+                  "pacer/framework/preact/reference/functions/PacerProvider",
+                  "pacer/framework/preact/reference/functions/useDefaultPacerOptions",
+                  "pacer/framework/preact/reference/functions/usePacerContext",
+                  "pacer/framework/preact/reference/interfaces/PacerProviderOptions",
+                  "pacer/framework/preact/reference/interfaces/PacerProviderProps",
+                  "pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions",
+                  "pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions",
+                  "pacer/framework/react/reference/functions/PacerProvider",
+                  "pacer/framework/react/reference/functions/useDefaultPacerOptions",
+                  "pacer/framework/react/reference/functions/usePacerContext",
+                  "pacer/framework/react/reference/interfaces/PacerProviderOptions",
+                  "pacer/framework/react/reference/interfaces/PacerProviderProps",
+                  "pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions",
+                  "pacer/framework/react/reference/interfaces/ReactRateLimiterOptions",
+                  "pacer/framework/solid/reference/functions/PacerProvider",
+                  "pacer/framework/solid/reference/functions/useDefaultPacerOptions",
+                  "pacer/framework/solid/reference/functions/usePacerContext",
+                  "pacer/framework/solid/reference/interfaces/PacerProviderOptions",
+                  "pacer/framework/solid/reference/interfaces/PacerProviderProps",
+                  "pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions",
+                  "pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions"
+                ]
+              },
+              {
+                "group": "Guides",
+                "expanded": false,
+                "pages": [
+                  "pacer/guides/server-rate-limiting"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "pacer/reference/classes/AsyncRetryer",
+                  "pacer/reference/functions/asyncBatcherOptions",
+                  "pacer/reference/functions/asyncDebouncerOptions",
+                  "pacer/reference/functions/asyncQueuerOptions",
+                  "pacer/reference/functions/asyncRateLimiterOptions",
+                  "pacer/reference/functions/asyncRetry",
+                  "pacer/reference/functions/asyncRetryerOptions",
+                  "pacer/reference/functions/asyncThrottlerOptions",
+                  "pacer/reference/functions/debouncerOptions",
+                  "pacer/reference/functions/emitChange",
+                  "pacer/reference/functions/getPacerDevtoolsInstance",
+                  "pacer/reference/functions/isFunction",
+                  "pacer/reference/functions/parseFunctionOrValue",
+                  "pacer/reference/functions/queuerOptions",
+                  "pacer/reference/functions/rateLimiterOptions",
+                  "pacer/reference/functions/throttlerOptions",
+                  "pacer/reference/interfaces/AsyncRetryerOptions",
+                  "pacer/reference/interfaces/AsyncRetryerState",
+                  "pacer/reference/interfaces/PacerDevtoolsWirePayload",
+                  "pacer/reference/interfaces/PacerEventMap",
+                  "pacer/reference/type-aliases/AnyAsyncFunction",
+                  "pacer/reference/type-aliases/AnyFunction",
+                  "pacer/reference/type-aliases/OptionalKeys",
+                  "pacer/reference/type-aliases/PacerEventName",
+                  "pacer/reference/type-aliases/QueuePosition",
+                  "pacer/reference/variables/pacerEventClient"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Hotkeys",
+        "description": "Type-safe keyboard shortcut management",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "hotkeys/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "hotkeys/overview",
+              "hotkeys/installation",
+              "hotkeys/devtools",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/quick-start"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/index"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/index"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/quick-start"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/quick-start"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/quick-start"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/quick-start"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/guides/hotkeys",
+                  "hotkeys/framework/react/guides/sequences",
+                  "hotkeys/framework/react/guides/hotkey-recording",
+                  "hotkeys/framework/react/guides/sequence-recording",
+                  "hotkeys/framework/react/guides/key-state-tracking",
+                  "hotkeys/framework/react/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/guides/hotkeys",
+                  "hotkeys/framework/preact/guides/sequences",
+                  "hotkeys/framework/preact/guides/hotkey-recording",
+                  "hotkeys/framework/preact/guides/sequence-recording",
+                  "hotkeys/framework/preact/guides/key-state-tracking",
+                  "hotkeys/framework/preact/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/guides/hotkeys",
+                  "hotkeys/framework/solid/guides/sequences",
+                  "hotkeys/framework/solid/guides/hotkey-recording",
+                  "hotkeys/framework/solid/guides/sequence-recording",
+                  "hotkeys/framework/solid/guides/key-state-tracking",
+                  "hotkeys/framework/solid/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/guides/hotkeys",
+                  "hotkeys/framework/angular/guides/sequences",
+                  "hotkeys/framework/angular/guides/hotkey-recording",
+                  "hotkeys/framework/angular/guides/sequence-recording",
+                  "hotkeys/framework/angular/guides/key-state-tracking",
+                  "hotkeys/framework/angular/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/guides/hotkeys",
+                  "hotkeys/framework/vue/guides/sequences",
+                  "hotkeys/framework/vue/guides/hotkey-recording",
+                  "hotkeys/framework/vue/guides/sequence-recording",
+                  "hotkeys/framework/vue/guides/key-state-tracking",
+                  "hotkeys/framework/vue/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/guides/hotkeys",
+                  "hotkeys/framework/lit/guides/sequences",
+                  "hotkeys/framework/lit/guides/hotkey-recording",
+                  "hotkeys/framework/lit/guides/sequence-recording",
+                  "hotkeys/framework/lit/guides/key-state-tracking",
+                  "hotkeys/framework/lit/guides/formatting-display"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/guides/hotkeys",
+                  "hotkeys/framework/svelte/guides/sequences",
+                  "hotkeys/framework/svelte/guides/hotkey-recording",
+                  "hotkeys/framework/svelte/guides/sequence-recording",
+                  "hotkeys/framework/svelte/guides/key-state-tracking",
+                  "hotkeys/framework/svelte/guides/formatting-display"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "hotkeys/reference/index",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/index"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/index"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/index"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/index"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/index"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Hotkeys API Reference",
+            "pages": [
+              "hotkeys/reference/classes/HotkeyManager",
+              "hotkeys/reference/functions/getHotkeyManager",
+              "hotkeys/reference/interfaces/HotkeyOptions",
+              "hotkeys/reference/interfaces/HotkeyRegistration",
+              "hotkeys/reference/interfaces/HotkeyRegistrationHandle",
+              "hotkeys/reference/type-aliases/HotkeyCallback",
+              "hotkeys/reference/interfaces/HotkeyCallbackContext",
+              "hotkeys/reference/interfaces/HotkeyMeta",
+              "hotkeys/reference/interfaces/HotkeyRegistrationView",
+              "hotkeys/reference/functions/toHotkeyRegistrationView",
+              "hotkeys/reference/type-aliases/ConflictBehavior",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/functions/useHotkey",
+                  "hotkeys/framework/react/reference/functions/useHotkeys",
+                  "hotkeys/framework/react/reference/functions/useHotkeysContext",
+                  "hotkeys/framework/react/reference/interfaces/UseHotkeyOptions",
+                  "hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition",
+                  "hotkeys/framework/react/reference/functions/HotkeysProvider",
+                  "hotkeys/framework/react/reference/interfaces/HotkeysProviderProps",
+                  "hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/react/reference/functions/useDefaultHotkeysOptions",
+                  "hotkeys/framework/react/reference/functions/useHotkeyRegistrations",
+                  "hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/functions/useHotkey",
+                  "hotkeys/framework/preact/reference/functions/useHotkeys",
+                  "hotkeys/framework/preact/reference/functions/useHotkeysContext",
+                  "hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions",
+                  "hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition",
+                  "hotkeys/framework/preact/reference/functions/HotkeysProvider",
+                  "hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps",
+                  "hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/preact/reference/functions/useDefaultHotkeysOptions",
+                  "hotkeys/framework/preact/reference/functions/useHotkeyRegistrations",
+                  "hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/functions/createHotkey",
+                  "hotkeys/framework/solid/reference/functions/createHotkeys",
+                  "hotkeys/framework/solid/reference/functions/useHotkeysContext",
+                  "hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions",
+                  "hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition",
+                  "hotkeys/framework/solid/reference/functions/useDefaultHotkeysOptions",
+                  "hotkeys/framework/solid/reference/functions/createHotkeyRegistrations",
+                  "hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/functions/injectHotkey",
+                  "hotkeys/framework/angular/reference/functions/injectHotkeys",
+                  "hotkeys/framework/angular/reference/functions/injectHotkeysContext",
+                  "hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions",
+                  "hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition",
+                  "hotkeys/framework/angular/reference/functions/provideHotkeys",
+                  "hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/angular/reference/functions/injectDefaultHotkeysOptions",
+                  "hotkeys/framework/angular/reference/functions/injectHotkeyRegistrations",
+                  "hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/functions/useHotkey",
+                  "hotkeys/framework/vue/reference/functions/useHotkeys",
+                  "hotkeys/framework/vue/reference/functions/useHotkeysContext",
+                  "hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions",
+                  "hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition",
+                  "hotkeys/framework/vue/reference/functions/provideHotkeysContext",
+                  "hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/vue/reference/functions/useDefaultHotkeysOptions",
+                  "hotkeys/framework/vue/reference/functions/useHotkeyRegistrations",
+                  "hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/functions/hotkey",
+                  "hotkeys/framework/lit/reference/classes/HotkeyController",
+                  "hotkeys/framework/lit/reference/classes/HotkeyRegistrationsController"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/functions/createHotkey",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeys",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeyAttachment",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeysAttachment",
+                  "hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions",
+                  "hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition",
+                  "hotkeys/framework/svelte/reference/variables/HotkeysProvider",
+                  "hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/svelte/reference/interfaces/HotkeysProviderProps",
+                  "hotkeys/framework/svelte/reference/variables/DEFAULT_OPTIONS",
+                  "hotkeys/framework/svelte/reference/functions/getDefaultHotkeysOptions",
+                  "hotkeys/framework/svelte/reference/functions/getHotkeysContext",
+                  "hotkeys/framework/svelte/reference/functions/setHotkeysContext",
+                  "hotkeys/framework/svelte/reference/functions/getHotkeyRegistrations",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Hotkey Sequence API Reference",
+            "pages": [
+              "hotkeys/reference/classes/SequenceManager",
+              "hotkeys/reference/functions/getSequenceManager",
+              "hotkeys/reference/interfaces/SequenceOptions",
+              "hotkeys/reference/functions/createSequenceMatcher",
+              "hotkeys/reference/type-aliases/HotkeySequence",
+              "hotkeys/reference/interfaces/SequenceRegistrationHandle",
+              "hotkeys/reference/interfaces/SequenceRegistrationView",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/functions/useHotkeySequence",
+                  "hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions",
+                  "hotkeys/framework/react/reference/functions/useHotkeySequences",
+                  "hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/functions/useHotkeySequence",
+                  "hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions",
+                  "hotkeys/framework/preact/reference/functions/useHotkeySequences",
+                  "hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/functions/createHotkeySequence",
+                  "hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions",
+                  "hotkeys/framework/solid/reference/functions/createHotkeySequences",
+                  "hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/functions/injectHotkeySequence",
+                  "hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions",
+                  "hotkeys/framework/angular/reference/functions/injectHotkeySequences",
+                  "hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/functions/useHotkeySequence",
+                  "hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions",
+                  "hotkeys/framework/vue/reference/functions/useHotkeySequences",
+                  "hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/functions/hotkeySequence",
+                  "hotkeys/framework/lit/reference/classes/HotkeySequenceController"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/functions/createHotkeySequence",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeySequenceAttachment",
+                  "hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeySequences",
+                  "hotkeys/framework/svelte/reference/functions/createHotkeySequencesAttachment",
+                  "hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Key hold & held keys API Reference",
+            "pages": [
+              "hotkeys/reference/classes/KeyStateTracker",
+              "hotkeys/reference/functions/getKeyStateTracker",
+              "hotkeys/reference/interfaces/KeyStateTrackerState",
+              "hotkeys/reference/type-aliases/IndividualKey",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/functions/useKeyHold",
+                  "hotkeys/framework/react/reference/functions/useHeldKeys",
+                  "hotkeys/framework/react/reference/functions/useHeldKeyCodes"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/functions/useKeyHold",
+                  "hotkeys/framework/preact/reference/functions/useHeldKeys",
+                  "hotkeys/framework/preact/reference/functions/useHeldKeyCodes"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/functions/createKeyHold",
+                  "hotkeys/framework/solid/reference/functions/createHeldKeys",
+                  "hotkeys/framework/solid/reference/functions/createHeldKeyCodes"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/functions/injectKeyHold",
+                  "hotkeys/framework/angular/reference/functions/injectHeldKeys",
+                  "hotkeys/framework/angular/reference/functions/injectHeldKeyCodes"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/functions/useKeyHold",
+                  "hotkeys/framework/vue/reference/functions/useHeldKeys",
+                  "hotkeys/framework/vue/reference/functions/useHeldKeyCodes"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/classes/KeyHoldController",
+                  "hotkeys/framework/lit/reference/classes/HeldKeysController",
+                  "hotkeys/framework/lit/reference/classes/HeldKeyCodesController"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/functions/getIsKeyHeld",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState",
+                  "hotkeys/framework/svelte/reference/functions/getHeldKeys",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys",
+                  "hotkeys/framework/svelte/reference/functions/getHeldKeyCodesMap",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Hotkey Recorder API Reference",
+            "pages": [
+              "hotkeys/reference/classes/HotkeyRecorder",
+              "hotkeys/reference/interfaces/HotkeyRecorderOptions",
+              "hotkeys/reference/interfaces/HotkeyRecorderState",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/functions/useHotkeyRecorder",
+                  "hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/functions/useHotkeyRecorder",
+                  "hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/functions/createHotkeyRecorder",
+                  "hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/functions/injectHotkeyRecorder",
+                  "hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/functions/useHotkeyRecorder",
+                  "hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/classes/HotkeyRecorderController"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/functions/createHotkeyRecorder",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Hotkey Sequence Recorder API Reference",
+            "pages": [
+              "hotkeys/reference/classes/HotkeySequenceRecorder",
+              "hotkeys/reference/interfaces/HotkeySequenceRecorderOptions",
+              "hotkeys/reference/interfaces/HotkeySequenceRecorderState",
+              "hotkeys/reference/type-aliases/HotkeySequenceRecorderCommitKeys",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/reference/functions/useHotkeySequenceRecorder",
+                  "hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/reference/functions/useHotkeySequenceRecorder",
+                  "hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/reference/functions/createHotkeySequenceRecorder",
+                  "hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/functions/injectHotkeySequenceRecorder",
+                  "hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/reference/functions/useHotkeySequenceRecorder",
+                  "hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/reference/classes/HotkeySequenceRecorderController"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/reference/functions/createHotkeySequenceRecorder",
+                  "hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Normalization & format API Reference",
+            "pages": [
+              "hotkeys/reference/functions/normalizeHotkey",
+              "hotkeys/reference/functions/normalizeHotkeyFromParsed",
+              "hotkeys/reference/functions/normalizeHotkeyFromEvent",
+              "hotkeys/reference/functions/normalizeRegisterableHotkey",
+              "hotkeys/reference/functions/formatForDisplay",
+              "hotkeys/reference/functions/formatHotkey",
+              "hotkeys/reference/functions/formatWithLabels",
+              "hotkeys/reference/interfaces/FormatDisplayOptions",
+              "hotkeys/reference/variables/KEY_DISPLAY_SYMBOLS",
+              "hotkeys/reference/variables/PUNCTUATION_KEY_DISPLAY_LABELS",
+              "hotkeys/reference/variables/MAC_MODIFIER_SYMBOLS",
+              "hotkeys/reference/variables/MAC_MODIFIER_LABELS",
+              "hotkeys/reference/variables/WINDOWS_MODIFIER_LABELS",
+              "hotkeys/reference/variables/LINUX_MODIFIER_LABELS",
+              "hotkeys/reference/variables/MODIFIER_ALIASES",
+              "hotkeys/reference/variables/MODIFIER_ORDER",
+              "hotkeys/reference/variables/MODIFIER_KEYS"
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              "hotkeys/framework/vanilla/examples/formatForDisplay",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/react/examples/useHotkey",
+                  "hotkeys/framework/react/examples/useHotkeys",
+                  "hotkeys/framework/react/examples/useHotkeySequence",
+                  "hotkeys/framework/react/examples/useHotkeySequences",
+                  "hotkeys/framework/react/examples/useHotkeyRecorder",
+                  "hotkeys/framework/react/examples/useHotkeySequenceRecorder",
+                  "hotkeys/framework/react/examples/useHeldKeys",
+                  "hotkeys/framework/react/examples/useKeyhold"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/preact/examples/useHotkey",
+                  "hotkeys/framework/preact/examples/useHotkeys",
+                  "hotkeys/framework/preact/examples/useHotkeySequence",
+                  "hotkeys/framework/preact/examples/useHotkeySequences",
+                  "hotkeys/framework/preact/examples/useHotkeyRecorder",
+                  "hotkeys/framework/preact/examples/useHotkeySequenceRecorder",
+                  "hotkeys/framework/preact/examples/useHeldKeys",
+                  "hotkeys/framework/preact/examples/useKeyhold"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/solid/examples/createHotkey",
+                  "hotkeys/framework/solid/examples/createHotkeys",
+                  "hotkeys/framework/solid/examples/createHotkeySequence",
+                  "hotkeys/framework/solid/examples/createHotkeySequences",
+                  "hotkeys/framework/solid/examples/createHotkeyRecorder",
+                  "hotkeys/framework/solid/examples/createHotkeySequenceRecorder",
+                  "hotkeys/framework/solid/examples/createHeldKeys",
+                  "hotkeys/framework/solid/examples/createKeyHold"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/examples/injectHotkey",
+                  "hotkeys/framework/angular/examples/injectHotkeys",
+                  "hotkeys/framework/angular/examples/injectHotkeySequence",
+                  "hotkeys/framework/angular/examples/injectHotkeySequences",
+                  "hotkeys/framework/angular/examples/injectHotkeyRecorder",
+                  "hotkeys/framework/angular/examples/injectHotkeySequenceRecorder",
+                  "hotkeys/framework/angular/examples/injectHeldKeys",
+                  "hotkeys/framework/angular/examples/injectKeyHold"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/vue/examples/useHotkey",
+                  "hotkeys/framework/vue/examples/useHotkeys",
+                  "hotkeys/framework/vue/examples/useHotkeySequence",
+                  "hotkeys/framework/vue/examples/useHotkeySequences",
+                  "hotkeys/framework/vue/examples/useHotkeyRecorder",
+                  "hotkeys/framework/vue/examples/useHotkeySequenceRecorder",
+                  "hotkeys/framework/vue/examples/useHeldKeys",
+                  "hotkeys/framework/vue/examples/useKeyhold"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/lit/examples/hotkey",
+                  "hotkeys/framework/lit/examples/hotkey-sequence",
+                  "hotkeys/framework/lit/examples/hotkey-recorder",
+                  "hotkeys/framework/lit/examples/hotkey-sequence-recorder",
+                  "hotkeys/framework/lit/examples/held-keys",
+                  "hotkeys/framework/lit/examples/key-hold"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/svelte/examples/create-hotkey",
+                  "hotkeys/framework/svelte/examples/create-hotkeys",
+                  "hotkeys/framework/svelte/examples/create-hotkey-sequence",
+                  "hotkeys/framework/svelte/examples/create-hotkey-sequences",
+                  "hotkeys/framework/svelte/examples/create-hotkey-recorder",
+                  "hotkeys/framework/svelte/examples/create-hotkey-sequence-recorder",
+                  "hotkeys/framework/svelte/examples/get-held-keys",
+                  "hotkeys/framework/svelte/examples/get-is-key-held"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/framework/angular/reference/interfaces/HotkeysContextValue",
+                  "hotkeys/framework/angular/reference/variables/HOTKEYS_INJECTION_TOKEN",
+                  "hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions",
+                  "hotkeys/framework/solid/reference/interfaces/HotkeysProviderProps",
+                  "hotkeys/framework/solid/reference/variables/HotkeysProvider",
+                  "hotkeys/framework/svelte/reference/type-aliases/HotkeysProvider",
+                  "hotkeys/framework/vue/reference/variables/HotkeysProvider"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "hotkeys/reference/functions/assertValidHotkey",
+                  "hotkeys/reference/functions/checkHotkey",
+                  "hotkeys/reference/functions/createHotkeyHandler",
+                  "hotkeys/reference/functions/createMultiHotkeyHandler",
+                  "hotkeys/reference/functions/detectPlatform",
+                  "hotkeys/reference/functions/formatHotkeySequence",
+                  "hotkeys/reference/functions/hasNonModifierKey",
+                  "hotkeys/reference/functions/isModifierKey",
+                  "hotkeys/reference/functions/isSingleLetterKey",
+                  "hotkeys/reference/functions/matchesKeyboardEvent",
+                  "hotkeys/reference/functions/normalizeKeyName",
+                  "hotkeys/reference/functions/parseHotkey",
+                  "hotkeys/reference/functions/parseKeyboardEvent",
+                  "hotkeys/reference/functions/rawHotkeyToParsedHotkey",
+                  "hotkeys/reference/functions/resolveModifier",
+                  "hotkeys/reference/functions/validateHotkey",
+                  "hotkeys/reference/interfaces/CreateHotkeyHandlerOptions",
+                  "hotkeys/reference/interfaces/ParsedHotkey",
+                  "hotkeys/reference/interfaces/RawHotkey",
+                  "hotkeys/reference/interfaces/ValidationResult",
+                  "hotkeys/reference/type-aliases/CanonicalModifier",
+                  "hotkeys/reference/type-aliases/EditingKey",
+                  "hotkeys/reference/type-aliases/FunctionKey",
+                  "hotkeys/reference/type-aliases/Hotkey",
+                  "hotkeys/reference/type-aliases/Key",
+                  "hotkeys/reference/type-aliases/LetterKey",
+                  "hotkeys/reference/type-aliases/Modifier",
+                  "hotkeys/reference/type-aliases/NavigationKey",
+                  "hotkeys/reference/type-aliases/NumberKey",
+                  "hotkeys/reference/type-aliases/PunctuationKey",
+                  "hotkeys/reference/type-aliases/RegisterableHotkey",
+                  "hotkeys/reference/variables/ALL_KEYS",
+                  "hotkeys/reference/variables/DEFAULT_SEQUENCE_TIMEOUT",
+                  "hotkeys/reference/variables/EDITING_KEYS",
+                  "hotkeys/reference/variables/FUNCTION_KEYS",
+                  "hotkeys/reference/variables/LETTER_KEYS",
+                  "hotkeys/reference/variables/NAVIGATION_KEYS",
+                  "hotkeys/reference/variables/NUMBER_KEYS",
+                  "hotkeys/reference/variables/PUNCTUATION_CODE_MAP",
+                  "hotkeys/reference/variables/PUNCTUATION_KEYS"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Store",
+        "description": "Framework-agnostic reactive data store",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "store/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "store/overview",
+              "store/installation",
+              "store/quick-start",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "store/framework/react/quick-start"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "store/framework/vue/quick-start"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "store/framework/solid/quick-start"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "store/framework/angular/quick-start"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "store/framework/svelte/quick-start"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "store/framework/preact/quick-start"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "store/framework/lit/quick-start"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "store/reference/index",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "store/framework/react/reference/index"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "store/framework/vue/reference/index"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "store/framework/solid/reference/index"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "store/framework/angular/reference/index"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "store/framework/svelte/reference/index"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "store/framework/preact/reference/index"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "store/framework/lit/reference/index"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Store API Reference",
+            "pages": [
+              "store/reference/classes/Store",
+              "store/reference/classes/ReadonlyStore",
+              "store/reference/interfaces/Atom",
+              "store/reference/interfaces/AtomOptions",
+              "store/reference/interfaces/BaseAtom",
+              "store/reference/interfaces/InternalBaseAtom",
+              "store/reference/interfaces/InternalReadonlyAtom",
+              "store/reference/interfaces/InteropSubscribable",
+              "store/reference/interfaces/Readable",
+              "store/reference/interfaces/ReadonlyAtom",
+              "store/reference/interfaces/StoreActionsApi",
+              "store/reference/interfaces/Subscribable",
+              "store/reference/interfaces/Subscription",
+              "store/reference/type-aliases/AnyAtom",
+              "store/reference/type-aliases/Observer",
+              "store/reference/type-aliases/Selection",
+              "store/reference/type-aliases/StoreAction",
+              "store/reference/type-aliases/StoreActionMap",
+              "store/reference/type-aliases/StoreActionsFactory",
+              "store/reference/functions/batch",
+              "store/reference/functions/createAsyncAtom",
+              "store/reference/functions/createAtom",
+              "store/reference/functions/createStore",
+              "store/reference/functions/flush",
+              "store/reference/functions/shallow",
+              "store/reference/functions/toObserver",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "store/framework/react/reference/functions/createStoreContext",
+                  "store/framework/react/reference/functions/useCreateAtom",
+                  "store/framework/react/reference/functions/useCreateStore",
+                  "store/framework/react/reference/functions/useSelector",
+                  "store/framework/react/reference/functions/useSetValue",
+                  "store/framework/react/reference/functions/useAtom",
+                  "store/framework/react/reference/functions/useStoreActions",
+                  "store/framework/react/reference/functions/useStore",
+                  "store/framework/react/reference/functions/useStore-1",
+                  "store/framework/react/reference/interfaces/UseSelectorOptions"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "store/framework/vue/reference/functions/useSelector",
+                  "store/framework/vue/reference/functions/useSetValue",
+                  "store/framework/vue/reference/functions/useAtom",
+                  "store/framework/vue/reference/functions/useStoreActions",
+                  "store/framework/vue/reference/functions/useStore",
+                  "store/framework/vue/reference/functions/useStore-1",
+                  "store/framework/vue/reference/interfaces/UseSelectorOptions"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "store/framework/solid/reference/functions/useSelector",
+                  "store/framework/solid/reference/functions/useSetValue",
+                  "store/framework/solid/reference/functions/useAtom",
+                  "store/framework/solid/reference/functions/useStoreActions",
+                  "store/framework/solid/reference/functions/useStore",
+                  "store/framework/solid/reference/functions/useStore-1",
+                  "store/framework/solid/reference/interfaces/UseSelectorOptions"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "store/framework/angular/reference/functions/injectSelector",
+                  "store/framework/angular/reference/functions/injectSetValue",
+                  "store/framework/angular/reference/functions/injectAtom",
+                  "store/framework/angular/reference/functions/injectStoreActions",
+                  "store/framework/angular/reference/functions/injectStore",
+                  "store/framework/angular/reference/interfaces/InjectSelectorOptions"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "store/framework/svelte/reference/functions/useSelector",
+                  "store/framework/svelte/reference/functions/useSetValue",
+                  "store/framework/svelte/reference/functions/useAtom",
+                  "store/framework/svelte/reference/functions/useStoreActions",
+                  "store/framework/svelte/reference/functions/useStore",
+                  "store/framework/svelte/reference/functions/useStore-1",
+                  "store/framework/svelte/reference/interfaces/UseSelectorOptions"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "store/framework/preact/reference/functions/createStoreContext",
+                  "store/framework/preact/reference/functions/useCreateAtom",
+                  "store/framework/preact/reference/functions/useCreateStore",
+                  "store/framework/preact/reference/functions/useSelector",
+                  "store/framework/preact/reference/functions/useSetValue",
+                  "store/framework/preact/reference/functions/useAtom",
+                  "store/framework/preact/reference/functions/useStoreActions",
+                  "store/framework/preact/reference/functions/useStore",
+                  "store/framework/preact/reference/functions/useStore-1",
+                  "store/framework/preact/reference/interfaces/UseSelectorOptions"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "store/framework/lit/reference/classes/TanStackStoreSelector",
+                  "store/framework/lit/reference/classes/TanStackStoreAtom",
+                  "store/framework/lit/reference/interfaces/UseSelectorOptions"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "store/framework/react/examples/simple",
+                  "store/framework/react/examples/atoms",
+                  "store/framework/react/examples/stores",
+                  "store/framework/react/examples/store-actions",
+                  "store/framework/react/examples/store-context"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "store/framework/vue/examples/simple",
+                  "store/framework/vue/examples/atoms",
+                  "store/framework/vue/examples/stores",
+                  "store/framework/vue/examples/store-actions",
+                  "store/framework/vue/examples/store-context"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "store/framework/angular/examples/simple",
+                  "store/framework/angular/examples/atoms",
+                  "store/framework/angular/examples/stores",
+                  "store/framework/angular/examples/store-actions",
+                  "store/framework/angular/examples/store-context"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "store/framework/svelte/examples/simple",
+                  "store/framework/svelte/examples/atoms",
+                  "store/framework/svelte/examples/stores",
+                  "store/framework/svelte/examples/store-actions",
+                  "store/framework/svelte/examples/store-context"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "store/framework/solid/examples/simple",
+                  "store/framework/solid/examples/atoms",
+                  "store/framework/solid/examples/stores",
+                  "store/framework/solid/examples/store-actions",
+                  "store/framework/solid/examples/store-context"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "store/framework/preact/examples/simple",
+                  "store/framework/preact/examples/atoms",
+                  "store/framework/preact/examples/stores",
+                  "store/framework/preact/examples/store-actions",
+                  "store/framework/preact/examples/store-context"
+                ]
+              },
+              {
+                "group": "Lit",
+                "expanded": false,
+                "pages": [
+                  "store/framework/lit/examples/simple"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Framework",
+                "expanded": false,
+                "pages": [
+                  "store/framework/angular/reference/functions/createStoreContext",
+                  "store/framework/angular/reference/functions/injectStore-1",
+                  "store/framework/angular/reference/interfaces/WritableAtomSignal",
+                  "store/framework/angular/reference/type-aliases/SelectionSource",
+                  "store/framework/solid/reference/functions/createStoreContext"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Ranger",
+        "description": "Headless range and multi-range slider utilities",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "ranger/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "ranger/overview",
+              "ranger/installation",
+              "ranger/quick-start"
+            ]
+          },
+          {
+            "group": "Adapters",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "ranger/framework/react/react-ranger"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "ranger/framework/react/api/basic",
+                  "ranger/framework/react/api/custom-steps",
+                  "ranger/framework/react/api/custom-styles",
+                  "ranger/framework/react/api/logarithmic-interpolator",
+                  "ranger/framework/react/api/update-on-drag"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "ranger/framework/react/examples/basic",
+                  "ranger/framework/react/examples/custom-steps",
+                  "ranger/framework/react/examples/custom-styles",
+                  "ranger/framework/react/examples/logarithmic-interpolator",
+                  "ranger/framework/react/examples/update-on-drag"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Other",
+                "expanded": false,
+                "pages": [
+                  "ranger/concepts",
+                  "ranger/faq"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Config",
+        "description": "Shared conventions and tooling for TypeScript packages",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "config/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "config/overview"
+            ]
+          },
+          {
+            "group": "Utilities",
+            "pages": [
+              "config/eslint",
+              "config/publish",
+              "config/vite"
+            ]
+          },
+          {
+            "group": "Conventions",
+            "pages": [
+              "config/ci-cd",
+              "config/package-structure"
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Other",
+                "expanded": false,
+                "pages": [
+                  "config/dependencies"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack Devtools",
+        "description": "Unified development tools for the TanStack ecosystem",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "devtools/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "devtools/overview",
+              "devtools/quick-start",
+              "devtools/installation",
+              "devtools/configuration",
+              "devtools/plugin-configuration",
+              "devtools/vite-plugin",
+              "devtools/production",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/react/basic-setup",
+                  "devtools/framework/react/adapter"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/preact/basic-setup",
+                  "devtools/framework/preact/adapter"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/solid/basic-setup",
+                  "devtools/framework/solid/adapter"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/vue/basic-setup",
+                  "devtools/framework/vue/adapter"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/svelte/basic-setup",
+                  "devtools/framework/svelte/adapter"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/angular/basic-setup",
+                  "devtools/framework/angular/adapter"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Concepts",
+            "pages": [
+              "devtools/architecture",
+              "devtools/event-system",
+              "devtools/plugin-lifecycle",
+              "devtools/source-inspector"
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "devtools/building-custom-plugins",
+              "devtools/devtools-utils",
+              "devtools/bidirectional-communication",
+              "devtools/third-party-plugins",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/react/guides/custom-plugins"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/preact/guides/custom-plugins"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/solid/guides/custom-plugins"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/vue/guides/custom-plugins"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/svelte/guides/custom-plugins"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/angular/guides/custom-plugins"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "API Reference",
+            "pages": [
+              "devtools/reference/index",
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/react/reference/index"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/preact/reference/index"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/solid/reference/index"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/vue/reference/index"
+                ]
+              },
+              {
+                "group": "Svelte",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/svelte/reference/index"
+                ]
+              },
+              {
+                "group": "Angular",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/angular/reference/index"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Examples",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/react/examples/basic",
+                  "devtools/framework/react/examples/start",
+                  "devtools/framework/react/examples/custom-devtools"
+                ]
+              },
+              {
+                "group": "Preact",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/preact/examples/basic",
+                  "devtools/framework/preact/examples/custom-devtools"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/solid/examples/basic"
+                ]
+              },
+              {
+                "group": "Vue",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/vue/examples/basic"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Plugins",
+            "pages": [
+              {
+                "group": "React",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/react/examples/a11y-devtools"
+                ]
+              },
+              {
+                "group": "Solid",
+                "expanded": false,
+                "pages": [
+                  "devtools/framework/solif/examples/a11y-devtools"
+                ]
+              }
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Plugins",
+                "expanded": false,
+                "pages": [
+                  "devtools/plugins/a11y"
+                ]
+              },
+              {
+                "group": "Reference",
+                "expanded": false,
+                "pages": [
+                  "devtools/reference/classes/tanstackdevtoolscore",
+                  "devtools/reference/interfaces/clienteventbusconfig",
+                  "devtools/reference/interfaces/tanstackdevtoolsinit",
+                  "devtools/reference/interfaces/tanstackdevtoolsplugin",
+                  "devtools/reference/type-aliases/tanstackdevtoolsconfig",
+                  "devtools/reference/variables/plugin_container_id",
+                  "devtools/reference/variables/plugin_title_container_id"
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "product": "TanStack CLI",
+        "description": "Project creation, add-ons, and ecosystem tooling",
+        "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "cli/index"
+            ]
+          },
+          {
+            "group": "Getting Started",
+            "pages": [
+              "cli/overview",
+              "cli/installation",
+              "cli/quick-start"
+            ]
+          },
+          {
+            "group": "Usage",
+            "pages": [
+              "cli/cli-reference",
+              "cli/add-ons",
+              "cli/starters",
+              "cli/examples"
+            ]
+          },
+          {
+            "group": "Authoring",
+            "pages": [
+              "cli/creating-add-ons"
+            ]
+          },
+          {
+            "group": "Help",
+            "pages": [
+              "cli/mcp-migration",
+              "cli/troubleshooting"
+            ]
+          },
+          {
+            "group": "Additional source pages",
+            "pages": [
+              {
+                "group": "Other",
+                "expanded": false,
+                "pages": [
+                  "cli/templates"
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "navbar": {
+    "links": [
+      {
+        "label": "Official docs",
+        "href": "https://tanstack.com"
+      },
+      {
+        "label": "GitHub",
+        "href": "https://github.com/raunakdoesdev/tanstack.com"
+      }
+    ]
+  },
+  "footer": {
+    "socials": {
+      "github": "https://github.com/TanStack",
+      "x": "https://x.com/tan_stack"
+    }
+  },
+  "seo": {
+    "indexing": "navigable"
+  },
+  "errors": {
+    "404": {
+      "redirect": false,
+      "title": "Page not found",
+      "description": "Try the product switcher or visit the canonical TanStack documentation."
+    }
+  }
+}
diff --git a/mintlify/form/assets/field-states-extended.png b/mintlify/form/assets/field-states-extended.png
new file mode 100644
index 000000000..1ecc677af
Binary files /dev/null and b/mintlify/form/assets/field-states-extended.png differ
diff --git a/mintlify/form/assets/field-states.png b/mintlify/form/assets/field-states.png
new file mode 100644
index 000000000..869f41f5c
Binary files /dev/null and b/mintlify/form/assets/field-states.png differ
diff --git a/mintlify/form/assets/react_form_composability.svg b/mintlify/form/assets/react_form_composability.svg
new file mode 100644
index 000000000..9761825c5
--- /dev/null
+++ b/mintlify/form/assets/react_form_composability.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" type="text/css"?>
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 1206 774" style="max-width: 100%;" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-39710" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>#graph-39710{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#000000;}#graph-39710 .error-icon{fill:#552222;}#graph-39710 .error-text{fill:#552222;stroke:#552222;}#graph-39710 .edge-thickness-normal{stroke-width:1px;}#graph-39710 .edge-thickness-thick{stroke-width:3.5px;}#graph-39710 .edge-pattern-solid{stroke-dasharray:0;}#graph-39710 .edge-thickness-invisible{stroke-width:0;fill:none;}#graph-39710 .edge-pattern-dashed{stroke-dasharray:3;}#graph-39710 .edge-pattern-dotted{stroke-dasharray:2;}#graph-39710 .marker{fill:#666;stroke:#666;}#graph-39710 .marker.cross{stroke:#666;}#graph-39710 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-39710 p{margin:0;}#graph-39710 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#000000;}#graph-39710 .cluster-label text{fill:#333;}#graph-39710 .cluster-label span{color:#333;}#graph-39710 .cluster-label span p{background-color:transparent;}#graph-39710 .label text,#graph-39710 span{fill:#000000;color:#000000;}#graph-39710 .node rect,#graph-39710 .node circle,#graph-39710 .node ellipse,#graph-39710 .node polygon,#graph-39710 .node path{fill:#eee;stroke:#999;stroke-width:1px;}#graph-39710 .rough-node .label text,#graph-39710 .node .label text,#graph-39710 .image-shape .label,#graph-39710 .icon-shape .label{text-anchor:middle;}#graph-39710 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#graph-39710 .rough-node .label,#graph-39710 .node .label,#graph-39710 .image-shape .label,#graph-39710 .icon-shape .label{text-align:center;}#graph-39710 .node.clickable{cursor:pointer;}#graph-39710 .root .anchor path{fill:#666!important;stroke-width:0;stroke:#666;}#graph-39710 .arrowheadPath{fill:#333333;}#graph-39710 .edgePath .path{stroke:#666;stroke-width:2.0px;}#graph-39710 .flowchart-link{stroke:#666;fill:none;}#graph-39710 .edgeLabel{background-color:white;text-align:center;}#graph-39710 .edgeLabel p{background-color:white;}#graph-39710 .edgeLabel rect{opacity:0.5;background-color:white;fill:white;}#graph-39710 .labelBkg{background-color:rgba(255, 255, 255, 0.5);}#graph-39710 .cluster rect{fill:hsl(0, 0%, 98.9215686275%);stroke:#707070;stroke-width:1px;}#graph-39710 .cluster text{fill:#333;}#graph-39710 .cluster span{color:#333;}#graph-39710 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(-160, 0%, 93.3333333333%);border:1px solid #707070;border-radius:2px;pointer-events:none;z-index:100;}#graph-39710 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#000000;}#graph-39710 rect.text{fill:none;stroke-width:0;}#graph-39710 .icon-shape,#graph-39710 .image-shape{background-color:white;text-align:center;}#graph-39710 .icon-shape p,#graph-39710 .image-shape p{background-color:white;padding:2px;}#graph-39710 .icon-shape rect,#graph-39710 .image-shape rect{opacity:0.5;background-color:white;fill:white;}#graph-39710 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-39710_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-39710_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-39710_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-39710_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-39710_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-39710_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S1_S2_0" d="M238.765,86L227.545,92.167C216.325,98.333,193.885,110.667,182.665,124.333C171.445,138,171.445,153,171.445,160.5L171.445,168"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S1_S3_1" d="M380.681,86L391.901,92.167C403.121,98.333,425.56,110.667,436.78,122.333C448,134,448,145,448,150.5L448,156"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S3_S4_2" d="M368.461,238L355.884,244.167C343.307,250.333,318.154,262.667,305.577,274.333C293,286,293,297,293,302.5L293,308"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S3_S5_3" d="M527.539,238L540.116,244.167C552.693,250.333,577.846,262.667,590.423,274.333C603,286,603,297,603,302.5L603,308"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S5_S6_4" d="M473,382.871L443,390.226C413,397.581,353,412.29,323,427.145C293,442,293,457,293,464.5L293,472"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S5_S7_5" d="M733,382.871L763,390.226C793,397.581,853,412.29,883,425.145C913,438,913,449,913,454.5L913,460"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S6_S8_6" d="M224.307,554L209.922,562.167C195.538,570.333,166.769,586.667,152.384,600.333C138,614,138,625,138,630.5L138,636"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S6_S9_7" d="M361.693,554L376.078,562.167C390.462,570.333,419.231,586.667,433.616,602.333C448,618,448,633,448,640.5L448,648"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S7_S10_8" d="M823.17,566L812.309,572.167C801.447,578.333,779.723,590.667,768.862,606.333C758,622,758,641,758,650.5L758,660"></path><path marker-end="url(#graph-39710_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_S7_S11_9" d="M1002.83,566L1013.691,572.167C1024.553,578.333,1046.277,590.667,1057.138,606.333C1068,622,1068,641,1068,650.5L1068,660"></path></g><g class="edgeLabels"><g transform="translate(171.4453125, 123)" class="edgeLabel"><g transform="translate(-11.328125, -12)" class="label"><foreignObject height="24" width="22.65625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g transform="translate(448, 123)" class="edgeLabel"><g transform="translate(-9.3984375, -12)" class="label"><foreignObject height="24" width="18.796875"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g><g transform="translate(293, 275)" class="edgeLabel"><g transform="translate(-11.328125, -12)" class="label"><foreignObject height="24" width="22.65625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g transform="translate(603, 275)" class="edgeLabel"><g transform="translate(-9.3984375, -12)" class="label"><foreignObject height="24" width="18.796875"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g><g transform="translate(293, 427)" class="edgeLabel"><g transform="translate(-11.328125, -12)" class="label"><foreignObject height="24" width="22.65625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g transform="translate(913, 427)" class="edgeLabel"><g transform="translate(-9.3984375, -12)" class="label"><foreignObject height="24" width="18.796875"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g><g transform="translate(138, 603)" class="edgeLabel"><g transform="translate(-11.328125, -12)" class="label"><foreignObject height="24" width="22.65625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g transform="translate(448, 603)" class="edgeLabel"><g transform="translate(-9.3984375, -12)" class="label"><foreignObject height="24" width="18.796875"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g><g transform="translate(758, 603)" class="edgeLabel"><g transform="translate(-11.328125, -12)" class="label"><foreignObject height="24" width="22.65625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g transform="translate(1068, 603)" class="edgeLabel"><g transform="translate(-9.3984375, -12)" class="label"><foreignObject height="24" width="18.796875"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(309.72265625, 47)" id="flowchart-S1-44588" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Do you need to reuse state (like defaultValues)?</p></span></div></foreignObject></g></g><g transform="translate(171.4453125, 199)" id="flowchart-S2-44589" class="node default"><rect height="54" width="193.109375" y="-27" x="-96.5546875" style="" class="basic label-container"></rect><g transform="translate(-66.5546875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="133.109375"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Use 'formOptions()</p></span></div></foreignObject></g></g><g transform="translate(448, 199)" id="flowchart-S3-44591" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Do you need to custom validation functions?</p></span></div></foreignObject></g></g><g transform="translate(293, 351)" id="flowchart-S4-44593" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Wrap 'useForm' hook into custom app hook</p></span></div></foreignObject></g></g><g transform="translate(603, 351)" id="flowchart-S5-44595" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Do you need to reuse custom UI components?</p></span></div></foreignObject></g></g><g transform="translate(293, 515)" id="flowchart-S6-44597" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Do you need access to the 'field'?</p></span></div></foreignObject></g></g><g transform="translate(913, 515)" id="flowchart-S7-44599" class="node default"><rect height="102" width="260" y="-51" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Do you need to reuse whole subsections of your form?</p></span></div></foreignObject></g></g><g transform="translate(138, 703)" id="flowchart-S8-44601" class="node default"><rect height="126" width="260" y="-63" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -48)" style="" class="label"><rect></rect><foreignObject height="96" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Use 'createFormHooks''s 'fieldComponents' (EG: 'TextInput' and 'NumberInput')</p></span></div></foreignObject></g></g><g transform="translate(448, 703)" id="flowchart-S9-44603" class="node default"><rect height="102" width="260" y="-51" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -36)" style="" class="label"><rect></rect><foreignObject height="72" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Use 'createFormsHook''s 'formComponents' (EG: 'SubmitButton')</p></span></div></foreignObject></g></g><g transform="translate(758, 703)" id="flowchart-S10-44605" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Use 'withForm' from 'createFormHook'</p></span></div></foreignObject></g></g><g transform="translate(1068, 703)" id="flowchart-S11-44607" class="node default"><rect height="78" width="260" y="-39" x="-130" style="" class="basic label-container"></rect><g transform="translate(-100, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="200"><div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Use 'form.Subscribe' and 'form.Field'</p></span></div></foreignObject></g></g></g></g></g></svg>
diff --git a/mintlify/form/assets/stepper.png b/mintlify/form/assets/stepper.png
new file mode 100644
index 000000000..8e006d9e7
Binary files /dev/null and b/mintlify/form/assets/stepper.png differ
diff --git a/mintlify/form/community-resources.md b/mintlify/form/community-resources.md
new file mode 100644
index 000000000..ae90ffa06
--- /dev/null
+++ b/mintlify/form/community-resources.md
@@ -0,0 +1,16 @@
+---
+title: Community Resources
+media:
+  [
+    {
+      title: "Balastrong's TanStack Form Video Series",
+      url: 'https://www.youtube.com/playlist?list=PLOQjd5dsGSxInTKUWTxyqSKwZCjDIUs0Y',
+      description: 'Series by Balastrong, a maintainer of TanStack Form, covering setup, validation, array fields, reactivity, schema libraries, side effects, and composable fields.',
+    },
+    {
+      title: 'TanStack Form Tutorial - Best Form Library for React?',
+      url: 'https://youtu.be/5oFQd-uAAHo',
+      description: 'A tutorial from Atharva Deosthale using TanStack Form in a Next.js project. Made for those just getting started with TanStack Form, covering client-side and server-side form validation.',
+    },
+  ]
+---
diff --git a/mintlify/form/comparison.md b/mintlify/form/comparison.md
new file mode 100644
index 000000000..16a065b20
--- /dev/null
+++ b/mintlify/form/comparison.md
@@ -0,0 +1,58 @@
+---
+id: comparison
+title: Comparison | TanStack Form
+---
+
+> ⚠️ This comparison table is under construction and is still not completely accurate. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page on Github" link at the bottom of this page.
+
+Feature/Capability Key:
+
+- ✅ 1st-class, built-in, and ready to use with no added configuration or code
+- 🟡 Supported, but as an unofficial 3rd party or community library/contribution
+- 🔶 Supported and documented, but requires extra user-code to implement
+- 🛑 Not officially supported or documented.
+
+| Feature                                           | TanStack Form                                | Formik                         | Redux Form                             | React Hook Form                                  | Final Form                             |
+| ------------------------------------------------- | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
+| Github Repo / Stars                               | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] |
+| Supported Frameworks                              | React, Vue, Angular, Solid, Lit              | React                          | React                                  | React                                            | React, Vue, Angular, Solid, Vanilla JS |
+| Bundle Size                                       | [![][bp-tanstack-form]][bpl-tanstack-form]   | [![][bp-formik]][bpl-formik]   | [![][bp-redux-form]][bpl-redux-form]   | [![][bp-react-hook-form]][bpl-react-hook-form]   | [![][bp-final-form]][bpl-final-form]   |
+| First-class TypeScript support                    | ✅                                           | ❓                             | ❓                                     | ✅                                               | ✅                                     |
+| Fully Inferred TypeScript (Including Deep Fields) | ✅                                           | ❓                             | ❓                                     | ✅                                               | 🛑                                     |
+| Headless UI components                            | ✅                                           | ❓                             | ❓                                     | ✅                                               | ❓                                     |
+| Framework agnostic                                | ✅                                           | ❓                             | ❓                                     | 🛑                                               | ✅                                     |
+| Granular reactivity                               | ✅                                           | ❓                             | ❓                                     | ❓                                               | ✅                                     |
+| Nested object/array fields                        | ✅                                           | ✅                             | ❓                                     | ✅\*(1)                                          | ✅                                     |
+| Async validation                                  | ✅                                           | ✅                             | ❓                                     | ✅                                               | ✅                                     |
+| Built-in async validation debounce                | ✅                                           | ❓                             | ❓                                     | ❓                                               | ❓                                     |
+| Schema-based Validation                           | ✅                                           | ✅                             | ❓                                     | ✅                                               | ❓                                     |
+| First Party Devtools                              | 🛑\*(2)                                      | 🛑                             | ✅\*(3)                                | ✅                                               | ❓                                     |
+| SSR integrations                                  | ✅                                           | 🛑                             | 🛑                                     | 🛑                                               | 🛑                                     |
+| React Compiler support                            | ✅                                           | ❓                             | ❓                                     | 🛑                                               | ❓                                     |
+
+\*(1) For nested arrays, react-hook-form requires you [to cast the field array by its name](https://react-hook-form.com/docs/usefieldarray) if you're using TypeScript
+
+\*(2) Planned
+
+\*(3) Via Redux Devtools
+
+[bpl-tanstack-form]: https://bundlephobia.com/result?p=@tanstack/react-form
+[bp-tanstack-form]: https://badgen.net/bundlephobia/minzip/@tanstack/react-form?label=💾
+[gh-tanstack-form]: https://github.com/TanStack/form
+[stars-tanstack-form]: https://img.shields.io/github/stars/TanStack/form?label=%F0%9F%8C%9F
+[bpl-formik]: https://bundlephobia.com/result?p=formik
+[bp-formik]: https://badgen.net/bundlephobia/minzip/formik?label=💾
+[gh-formik]: https://github.com/jaredpalmer/formik
+[stars-formik]: https://img.shields.io/github/stars/jaredpalmer/formik?label=%F0%9F%8C%9F
+[bpl-redux-form]: https://bundlephobia.com/result?p=redux-form
+[bp-redux-form]: https://badgen.net/bundlephobia/minzip/redux-form?label=💾
+[gh-redux-form]: https://github.com/redux-form/redux-form
+[stars-redux-form]: https://img.shields.io/github/stars/redux-form/redux-form?label=%F0%9F%8C%9F
+[bpl-react-hook-form]: https://bundlephobia.com/result?p=react-hook-form
+[bp-react-hook-form]: https://badgen.net/bundlephobia/minzip/react-hook-form?label=💾
+[gh-react-hook-form]: https://github.com/react-hook-form/react-hook-form
+[stars-react-hook-form]: https://img.shields.io/github/stars/react-hook-form/react-hook-form?label=%F0%9F%8C%9F
+[bpl-final-form]: https://bundlephobia.com/result?p=final-form
+[bp-final-form]: https://badgen.net/bundlephobia/minzip/final-form?label=💾
+[gh-final-form]: https://github.com/final-form/final-form
+[stars-final-form]: https://img.shields.io/github/stars/final-form/final-form?label=%F0%9F%8C%9F
diff --git a/mintlify/form/framework/angular/examples/array.md b/mintlify/form/framework/angular/examples/array.md
new file mode 100644
index 000000000..6289b37cb
--- /dev/null
+++ b/mintlify/form/framework/angular/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Arrays"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/angular/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/angular/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/angular/examples/large-form.md b/mintlify/form/framework/angular/examples/large-form.md
new file mode 100644
index 000000000..d779d7741
--- /dev/null
+++ b/mintlify/form/framework/angular/examples/large-form.md
@@ -0,0 +1,12 @@
+---
+title: "Form Composition"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/angular/examples/large-form)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/angular/large-form)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/angular/examples/multi-step-wizard.md b/mintlify/form/framework/angular/examples/multi-step-wizard.md
new file mode 100644
index 000000000..e1fa41628
--- /dev/null
+++ b/mintlify/form/framework/angular/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/angular/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/angular/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/angular/examples/simple.md b/mintlify/form/framework/angular/examples/simple.md
new file mode 100644
index 000000000..45b1c46d8
--- /dev/null
+++ b/mintlify/form/framework/angular/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/angular/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/angular/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/angular/examples/standard-schema.md b/mintlify/form/framework/angular/examples/standard-schema.md
new file mode 100644
index 000000000..f89f6fb79
--- /dev/null
+++ b/mintlify/form/framework/angular/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/angular/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/angular/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/angular/guides/arrays.md b/mintlify/form/framework/angular/guides/arrays.md
new file mode 100644
index 000000000..d0d2b153e
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/arrays.md
@@ -0,0 +1,170 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.api.state.value` on an array value:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="people"
+      mode="array"
+      #people="field"
+    >
+      <div>
+        @for (_ of people.api.state.value; track $index) {
+          <!-- ... -->
+        }
+      </div>
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      people: [] as Array<{ name: string; age: number }>,
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+}
+```
+
+This will generate the mapped JSX every time you run `pushValue` on `field`:
+
+```angular-html
+<button (click)="people.api.pushValue(defaultPerson)" type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```angular-html
+<ng-container
+  [tanstackField]="form"
+  [name]="getPeopleName($index)"
+  #person="field"
+>
+  <div>
+    <label>
+      <div>Name for person {{ $index }}</div>
+      <input
+        [value]="person.api.state.value"
+        (input)="person.api.handleChange($any($event).target.value)"
+      />
+    </label>
+  </div>
+</ng-container>
+```
+
+Where `getPeopleName` is a method on the class like so:
+
+```typescript
+export class AppComponent {
+  getPeopleName = (idx: number) => `people[${idx}].name` as const
+
+  // ...
+}
+```
+
+> While it's unfortunate that you need to use a function to get the field name, it's a requirement for how our strict TypeScript types work.
+>
+> See, if we did the following:
+>
+> ```angular-html
+> &lt;ng-container
+>   [tanstackField]="form"
+>   [name]="'people[' + $index + '].name'"
+> >&lt;/ng-container&gt;
+> ```
+>
+> We'd be running into a TypeScript issue where `"one" + "two"` is `string` rather than the required `"onetwo"` type
+>
+> Moreover, while Angular supports template literals in the template, they may not contain dynamic interpolation within them, such as our `$index` argument.
+
+> It's possible that we've missed something! If you can think of a better fix for this problem, [drop us a line on our GitHub discussions](https://github.com/TanStack/form/discussions).
+
+## Full Example
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <div>
+        <ng-container
+          [tanstackField]="form"
+          name="people"
+          mode="array"
+          #people="field"
+        >
+          <div>
+            @for (_ of people.api.state.value; track $index) {
+              <ng-container
+                [tanstackField]="form"
+                [name]="getPeopleName($index)"
+                #person="field"
+              >
+                <div>
+                  <label>
+                    <div>Name for person {{ $index }}</div>
+                    <input
+                      [value]="person.api.state.value"
+                      (input)="
+                        person.api.handleChange($any($event).target.value)
+                      "
+                    />
+                  </label>
+                </div>
+              </ng-container>
+            }
+          </div>
+          <button (click)="people.api.pushValue(defaultPerson)" type="button">
+            Add person
+          </button>
+        </ng-container>
+      </div>
+      <button type="submit" [disabled]="!canSubmit()">
+        {{ isSubmitting() ? '...' : 'Submit' }}
+      </button>
+    </form>
+  `,
+})
+export class AppComponent {
+  defaultPerson = { name: '', age: 0 }
+
+  form = injectForm({
+    defaultValues: {
+      people: [] as Array<{ name: string; age: number }>,
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  getPeopleName = (idx: number) => `people[${idx}].name` as const
+
+  canSubmit = injectStore(this.form, (state) => state.canSubmit)
+  isSubmitting = injectStore(this.form, (state) => state.isSubmitting)
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+```
diff --git a/mintlify/form/framework/angular/guides/basic-concepts.md b/mintlify/form/framework/angular/guides/basic-concepts.md
new file mode 100644
index 000000000..b1cbd41ce
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/basic-concepts.md
@@ -0,0 +1,363 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/angular-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Instance
+
+A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `injectForm` function. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```typescript
+const form = injectForm({
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `tanstackField` directive. The directive accepts a name prop, which should match a key in the form's default values. It also exposes a `field` named instance of the directive's internals that should be used via a template variable to access the field's internals.
+
+Example:
+
+```html
+<ng-container [tanstackField]="form" name="firstName" #firstName="field">
+  <input
+    [value]="firstName.api.state.value"
+    (blur)="firstName.api.handleBlur()"
+    (input)="firstName.api.handleChange($any($event).target.value)"
+  />
+</ng-container>
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `fieldApi.state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful to see how the user interacts with a field:
+
+- _"isTouched"_, after the user changes the field or blurs the field
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of _"isPristine"_
+- _"isPristine"_, until the user changes the field value. Opposite of _"isDirty"_
+- _"isBlurred"_, after the field has been blurred
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object accessed in the `tanstackField.api` property when creating a field. It provides methods for working with the field's state.
+
+Example:
+
+```angular-html
+<input
+  [value]="fieldName.api.state.value"
+  (blur)="fieldName.api.handleBlur()"
+  (input)="fieldName.api.handleChange($any($event).target.value)"
+/>
+```
+
+## Validation
+
+`@tanstack/angular-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `tanstackField` directive using the `validators` prop.
+
+Example:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container [tanstackField]="form" name="firstName" #firstName="field">
+      <input
+        [value]="firstName.api.state.value"
+        (blur)="firstName.api.handleBlur()"
+        (input)="firstName.api.handleChange($any($event).target.value)"
+      />
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  firstNameValidator: FieldValidateFn<any, any, string, any> = ({ value }) =>
+    !value
+      ? 'A first name is required'
+      : value.length < 3
+        ? 'First name must be at least 3 characters'
+        : undefined
+
+  firstNameAsyncValidator: FieldValidateAsyncFn<any, string, any> = async ({
+    value,
+  }) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return value.includes('error') && 'No "error" allowed in first name'
+  }
+
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+    },
+    onSubmit({ value }) {
+      console.log(value)
+    },
+  })
+}
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+Example:
+
+```angular-ts
+import { z } from 'zod'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="firstName"
+      [validators]="{
+        onChange: z.string().min(3, 'First name must be at least 3 characters'),
+        onChangeAsyncDebounceMs: 500,
+        onChangeAsync: firstNameAsyncValidator,
+      }"
+      #firstName="field"
+    >
+      <!-- ... -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  firstNameAsyncValidator = z.string().refine(
+    async (value) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return !value.includes('error')
+    },
+    {
+      message: "No 'error' allowed in first name",
+    },
+  )
+
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  z = z
+}
+```
+
+## Reactivity
+
+`@tanstack/angular-form` offers a way to subscribe to form and field state changes via `injectStore(this.form, selector)`.
+
+Example:
+
+```typescript
+import { injectForm, injectStore } from '@tanstack/angular-form'
+
+@Component(/*...*/)
+class AppComponent {
+  form = injectForm(/*...*/)
+  canSubmit = injectStore(this.form, (state) => state.canSubmit)
+  isSubmitting = injectStore(this.form, (state) => state.isSubmitting)
+}
+```
+
+## Listeners
+
+`@tanstack/angular-form` allows you to react to specific triggers and "listen" to them to dispatch side effects.
+
+Example:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="country"
+      [listeners]="{
+        onChange: onCountryChange
+      }"
+      #country="field"
+    ></ng-container>
+  `,
+})
+
+...
+
+onCountryChange: FieldListenerFn<any, any, any, any, string> = ({
+    value,
+  }) => {
+    console.log(`Country changed to: ${value}, resetting province`)
+    this.form.setFieldValue('province', '')
+  }
+```
+
+More information can be found at [Listeners](/form/framework/angular/guides/listeners)
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `tanstackField` directive.
+
+When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container [tanstackField]="form" name="hobbies" #hobbies="field">
+      <div>
+        Hobbies
+        <div>
+          @if (!hobbies.api.state.value.length) {
+            No hobbies found
+          }
+          @for (_ of hobbies.api.state.value; track $index) {
+            <div>
+              <ng-container
+                [tanstackField]="form"
+                [name]="getHobbyName($index)"
+                #hobbyName="field"
+              >
+                <div>
+                  <label [for]="hobbyName.api.name">Name:</label>
+                  <input
+                    [id]="hobbyName.api.name"
+                    [name]="hobbyName.api.name"
+                    [value]="hobbyName.api.state.value"
+                    (blur)="hobbyName.api.handleBlur()"
+                    (input)="
+                      hobbyName.api.handleChange($any($event).target.value)
+                    "
+                  />
+                  <button
+                    type="button"
+                    (click)="hobbies.api.removeValue($index)"
+                  >
+                    X
+                  </button>
+                </div>
+              </ng-container>
+              <ng-container
+                [tanstackField]="form"
+                [name]="getHobbyDesc($index)"
+                #hobbyDesc="field"
+              >
+                <div>
+                  <label [for]="hobbyDesc.api.name">Description:</label>
+                  <input
+                    [id]="hobbyDesc.api.name"
+                    [name]="hobbyDesc.api.name"
+                    [value]="hobbyDesc.api.state.value"
+                    (blur)="hobbyDesc.api.handleBlur()"
+                    (input)="
+                      hobbyDesc.api.handleChange($any($event).target.value)
+                    "
+                  />
+                </div>
+              </ng-container>
+            </div>
+          }
+        </div>
+        <button type="button" (click)="hobbies.api.pushValue(defaultHobby)">
+          Add hobby
+        </button>
+      </div>
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  defaultHobby = {
+    name: '',
+    description: '',
+    yearsOfExperience: 0,
+  }
+
+  getHobbyName = (idx: number) => `hobbies[${idx}].name` as const
+  getHobbyDesc = (idx: number) => `hobbies[${idx}].description` as const
+
+  form = injectForm({
+    defaultValues: {
+      hobbies: [] as Array<{
+        name: string
+        description: string
+        yearsOfExperience: number
+      }>,
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+}
+```
+
+These are the basic concepts and terminology used in the `@tanstack/angular-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/angular/guides/dynamic-validation.md b/mintlify/form/framework/angular/guides/dynamic-validation.md
new file mode 100644
index 000000000..455613002
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/dynamic-validation.md
@@ -0,0 +1,313 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: ` <!-- Your form template here --> `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    // If this is omitted, onDynamic will not be called
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+}
+```
+
+> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `injectForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: ` <!-- Your form template here --> `,
+})
+export class AppComponent {
+  form = injectForm({
+    // ...
+    validationLogic: revalidateLogic({
+      mode: 'submit',
+      modeAfterSubmission: 'blur',
+    }),
+    // ...
+  })
+}
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the form's error map through `injectStore`.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  injectStore,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: ` <p>{{ formErrorMap().onDynamic?.firstName }}</p> `,
+})
+export class AppComponent {
+  form = injectForm({
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  formErrorMap = injectStore(this.form, (state) => state.errorMap)
+}
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  injectStore,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <div>
+      <p>{{ formErrorMap().onChange?.firstName }}</p>
+      <p>{{ formErrorMap().onDynamic?.lastName }}</p>
+    </div>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  formErrorMap = injectStore(this.form, (state) => state.errorMap)
+}
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+import type { FieldValidateFn } from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <ng-container
+        [tanstackField]="form"
+        name="age"
+        [validators]="{
+          onDynamic: ageValidator,
+        }"
+        #age="field"
+      >
+        <input
+          type="number"
+          [value]="age.api.state.value"
+          (blur)="age.api.handleBlur()"
+          (input)="age.api.handleChange($any($event).target.valueAsNumber)"
+        />
+        @if (age.api.state.meta.errorMap.onDynamic) {
+          <p style="color: red">
+            {{ age.api.state.meta.errorMap.onDynamic }}
+          </p>
+        }
+      </ng-container>
+      <button type="submit">Submit</button>
+    </form>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value > 18 ? undefined : 'Age must be greater than 18'
+
+  form = injectForm({
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: ` <!-- Your form template here --> `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      username: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+      onDynamicAsync: async ({ value }) => {
+        if (!value.username) {
+          return { username: 'Username is required' }
+        }
+        // Simulate an async validation
+        const isValid = await validateUsername(value.username)
+        return isValid ? undefined : { username: 'Username is already taken' }
+      },
+    },
+  })
+}
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackField,
+  injectForm,
+  revalidateLogic,
+} from '@tanstack/angular-form'
+import { z } from 'zod'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: ` <!-- Your form template here --> `,
+})
+export class AppComponent {
+  schema = z.object({
+    firstName: z.string().min(1, 'A first name is required'),
+    lastName: z.string().min(1, 'A last name is required'),
+  })
+
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: this.schema,
+    },
+  })
+}
+```
diff --git a/mintlify/form/framework/angular/guides/form-composition.md b/mintlify/form/framework/angular/guides/form-composition.md
new file mode 100644
index 000000000..35bb09262
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/form-composition.md
@@ -0,0 +1,271 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is its verbosity out-of-the-box. While this _can_ be useful for educational purposes - helping enforce understanding our APIs - it's not ideal in production use cases.
+
+As a result, while basic usage of `[tanstackField]` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
+
+## Pre-bound Field Components
+
+If you've ever used TanStack Form in Angular to bind more than one input, you'll have quickly realized how much goes into each input:
+
+```angular-ts
+import { Component } from '@angular/core'
+import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <div>
+      <ng-container [tanstackField]="form" name="firstName" #firstName="field">
+        <label [for]="firstName.api.name">First Name:</label>
+        <input
+          [id]="firstName.api.name"
+          [name]="firstName.api.name"
+          [value]="firstName.api.state.value"
+          (blur)="firstName.api.handleBlur()"
+          (input)="firstName.api.handleChange($any($event).target.value)"
+        />
+        @if (firstName.api.state.meta.isTouched) {
+          @for (error of firstName.api.state.meta.errors; track $index) {
+            <div style="color: red">
+              {{ error }}
+            </div>
+          }
+        }
+        @if (firstName.api.state.meta.isValidating) {
+          <p>Validating...</p>
+        }
+      </ng-container>
+    </div>
+    <div>
+      <ng-container [tanstackField]="form" name="lastName" #lastName="field">
+        <label [for]="lastName.api.name">Last Name:</label>
+        <input
+          [id]="lastName.api.name"
+          [name]="lastName.api.name"
+          [value]="lastName.api.state.value"
+          (blur)="lastName.api.handleBlur()"
+          (input)="lastName.api.handleChange($any($event).target.value)"
+        />
+        @if (lastName.api.state.meta.isTouched) {
+          @for (error of lastName.api.state.meta.errors; track $index) {
+            <div style="color: red">
+              {{ error }}
+            </div>
+          }
+        }
+        @if (lastName.api.state.meta.isValidating) {
+          <p>Validating...</p>
+        }
+      </ng-container>
+    </div>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+}
+```
+
+This is functionally correct, but introduces a _lot_ of repeated templating behavior over and over. Instead, let's move the error handling, label to input binding, and other repeated logic into a component:
+
+```angular-ts
+import { injectField } from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-text-field',
+  standalone: true,
+  template: `
+    <label [for]="field.api.name">{{ label() }}</label>
+    <input
+      [id]="field.api.name"
+      [name]="field.api.name"
+      [value]="field.api.state.value"
+      (blur)="field.api.handleBlur()"
+      (input)="field.api.handleChange($any($event).target.value)"
+    />
+    @if (field.api.state.meta.isTouched) {
+      @for (error of field.api.state.meta.errors; track $index) {
+        <div style="color: red">
+          {{ error }}
+        </div>
+      }
+    }
+    @if (field.api.state.meta.isValidating) {
+      <p>Validating...</p>
+    }
+  `,
+})
+export class AppTextField {
+  label = input.required<string>()
+  // This API requires another part to it from the parent component
+  field = injectField<string>()
+}
+```
+
+> `injectField` accepts a single generic to define the `field.state.value` type.
+>
+> As a result, a numerical text field would be represented as `injectField<number>`, for example.
+
+Now, we can use the `TanStackAppField` directive (`tanstack-app-field`) to `provide` the expected field associated with this input:
+
+```angular-ts
+import { Component } from '@angular/core'
+import {
+  TanStackAppField,
+  TanStackField,
+  injectForm,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField, TanStackAppField, AppTextField],
+  template: `
+    <div>
+      <app-text-field
+        label="First name:"
+        tanstack-app-field
+        [tanstackField]="form"
+        name="firstName"
+      />
+    </div>
+    <div>
+      <app-text-field
+        label="Last name:"
+        tanstack-app-field
+        [tanstackField]="form"
+        name="lastName"
+      />
+    </div>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+}
+```
+
+> Here, the `tanstack-app-field` directive is taking the properties from `[tanstackField]` and `provide`ing them down to the `app-text-field` so that they can be more easily consumed as a component.
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code in a single component.
+
+To solve this, we support breaking forms into smaller pieces using the `[tanstack-with-form]` directive together with the `injectWithForm` function.
+
+The parent component owns the `form` (created via `injectForm`) and passes it down to a child component using the `tanstack-with-form` directive. The child component reads it back via `injectWithForm`, which returns a fully-typed reference to that same `FormApi` — meaning the child can render `[tanstackField]` bindings, `tanstack-app-field` components, etc. against the parent's form without needing to redeclare any generics.
+
+First, lift your shared form options out using `formOptions` so both the parent and the child can reference the same shape:
+
+```angular-ts
+// shared-form.ts
+import { formOptions } from '@tanstack/angular-form'
+
+export const peopleFormOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+})
+```
+
+Then, build a child component that consumes the form via `injectWithForm`:
+
+```angular-ts
+// child-form.component.ts
+import { Component } from '@angular/core'
+import {
+  TanStackAppField,
+  TanStackField,
+  injectWithForm,
+} from '@tanstack/angular-form'
+import { AppTextField } from './app-text-field.component'
+import { peopleFormOpts } from './shared-form'
+
+@Component({
+  selector: 'app-child-form',
+  standalone: true,
+  imports: [TanStackField, TanStackAppField, AppTextField],
+  template: `
+    <app-text-field
+      label="First name:"
+      tanstack-app-field
+      [tanstackField]="withForm.form"
+      name="firstName"
+    />
+    <app-text-field
+      label="Last name:"
+      tanstack-app-field
+      [tanstackField]="withForm.form"
+      name="lastName"
+    />
+  `,
+})
+export class ChildForm {
+  // Spreading the form options into `injectWithForm` is what gives `withForm.form`
+  // its full type inference — no generics needed.
+  withForm = injectWithForm({ ...peopleFormOpts })
+}
+```
+
+> The options passed to `injectWithForm({ ...peopleFormOpts })` are only used for type inference. They are not read at runtime; the actual `FormApi` instance comes from the ancestor `tanstack-with-form` directive.
+
+Finally, in the parent component, create the form with `injectForm` and pass it to the child via the `tanstack-with-form` directive:
+
+```angular-ts
+// app.component.ts
+import { Component } from '@angular/core'
+import { TanStackWithForm, injectForm } from '@tanstack/angular-form'
+import { ChildForm } from './child-form.component'
+import { peopleFormOpts } from './shared-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackWithForm, ChildForm],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <app-child-form tanstack-with-form [form]="form" />
+      <button type="submit">Submit</button>
+    </form>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    ...peopleFormOpts,
+    onSubmit({ value }) {
+      console.log(value)
+    },
+  })
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+```
+
+This pattern lets you split a large form across many components while keeping a single source of truth for the form's state and types. Any descendant of the `tanstack-with-form` directive can call `injectWithForm({ ...peopleFormOpts })` to gain typed access to the same form instance.
diff --git a/mintlify/form/framework/angular/guides/form-groups.md b/mintlify/form/framework/angular/guides/form-groups.md
new file mode 100644
index 000000000..6df744b73
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/form-groups.md
@@ -0,0 +1,302 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `[tanstackFormGroup]`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `injectForm` to create a `form` variable, then reference it with the `tanstackFormGroup` directive like you would with `tanstackField`:
+
+```angular-ts
+import { Component } from '@angular/core'
+import { TanStackFormGroup, injectForm } from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackFormGroup],
+  template: `
+    <ng-container [tanstackFormGroup]="form" name="step1" #group="formGroup">
+      <!-- `group.api` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue` -->
+      <!-- ... -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  })
+}
+```
+
+This becomes much more useful when paired with external state to conditionally render a form group:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import {
+  TanStackField,
+  TanStackFormGroup,
+  injectForm,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField, TanStackFormGroup],
+  template: `
+    @if (step() === 0) {
+      <ng-container
+        [tanstackFormGroup]="form"
+        name="step1"
+        [onGroupSubmit]="onStep1Submit"
+        [onGroupSubmitInvalid]="onStep1SubmitInvalid"
+        [onSubmitMeta]="submitMeta"
+        #group="formGroup"
+      >
+        <form
+          (submit)="
+            $event.preventDefault();
+            $event.stopPropagation();
+            group.api.handleSubmit()
+          "
+        >
+          <ng-container [tanstackField]="form" name="step1.name" #name="field">
+            <!-- ... -->
+          </ng-container>
+        </form>
+      </ng-container>
+    }
+
+    @if (step() === 1) {
+      <ng-container
+        [tanstackFormGroup]="form"
+        name="step2"
+        [onGroupSubmit]="onStep2Submit"
+        #group="formGroup"
+      >
+        <form
+          (submit)="
+            $event.preventDefault();
+            $event.stopPropagation();
+            group.api.handleSubmit()
+          "
+        >
+          <ng-container [tanstackField]="form" name="step2.age" #age="field">
+            <!-- ... -->
+          </ng-container>
+        </form>
+      </ng-container>
+    }
+  `,
+})
+export class AppComponent {
+  step = signal(0)
+  submitMeta = {} as SomeType
+
+  form = injectForm({
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  })
+
+  onStep1Submit = () => {
+    // We can move the step forward when validation passes
+    this.step.update((step) => step + 1)
+  }
+
+  onStep1SubmitInvalid = () => {
+    // Or handle invalid submissions, just like a top-level form
+  }
+
+  onStep2Submit = () => {
+    // Then, use `form.handleSubmit()` to submit the entire form
+    this.form.handleSubmit()
+  }
+}
+```
+
+When you split each step into its own component, pass the parent form down with [`tanstack-with-form`](/form/framework/angular/guides/form-composition) and read it in the child with `injectWithForm`. The child can then use `[tanstackFormGroup]="withForm.form"` and `[tanstackField]="withForm.form"` against the same parent form instance.
+
+## Form Group Validation
+
+Form groups have a distinct validation procedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackFormGroup],
+  template: `
+    <ng-container
+      [tanstackFormGroup]="form"
+      name="step1"
+      [validators]="{ onChange: groupValidator }"
+      #group="formGroup"
+    >
+      <!-- group.api.state.meta.errorMap // {onChange: "Error" | undefined} -->
+      <!-- group.api.state.meta.errors // ("Error")[] -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      step1: { name: '' },
+    },
+  })
+
+  groupValidator = () => 'Error'
+}
+```
+
+- Can set errors on sub-fields:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackFormGroup],
+  template: `
+    <ng-container
+      [tanstackFormGroup]="form"
+      name="step1"
+      [validators]="{ onChange: groupValidator }"
+    ></ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      step1: { name: '' },
+    },
+  })
+
+  groupValidator = ({ value }: { value: { name: string } }) => ({
+    group: value.name === 'error' ? 'Group error' : undefined,
+    fields: {
+      // Must use the name of the field relative to the FormGroup as the error key,
+      // to stay consistent with how standard schema works with form groups
+      name: value.name === 'error' ? 'Field error' : undefined,
+    },
+  })
+}
+```
+
+- And can even accept standard schemas:
+
+```angular-ts
+import { z } from 'zod'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackFormGroup],
+  template: `
+    <ng-container
+      [tanstackFormGroup]="form"
+      name="step1"
+      [validators]="{ onChange: step1Schema }"
+    ></ng-container>
+  `,
+})
+export class AppComponent {
+  step1Schema = z.object({
+    name: z.string().min(2),
+  })
+
+  form = injectForm({
+    defaultValues: {
+      step1: { name: '' },
+    },
+  })
+}
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```ts
+> const step1Schema = z.object(&#123;
+>   name: z.string().min(2),
+> &#125;)
+>
+> const schema = z.object(&#123;
+>   step1: step1Schema,
+>   step2: step2Schema,
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/angular/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `injectForm`:
+
+```ts
+form = injectForm({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+})
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the group itself:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackFormGroup],
+  template: `
+    <ng-container
+      [tanstackFormGroup]="form"
+      name="step1"
+      [validators]="{ onDynamic: step1Schema }"
+    ></ng-container>
+  `,
+})
+export class AppComponent {
+  step1Schema = step1Schema
+
+  form = injectForm({
+    defaultValues: {
+      step1: { name: '' },
+    },
+  })
+}
+```
+
+It will treat `group.api.submissionAttempts` as the way to change what validator is run before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group.api.state.meta.errors`, you're also able to access the group's value using `group.api.state.value`. Likewise, here are some valuable properties you can access in the `group.api.state.meta`:
+
+- `group.api.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group.api.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group.api.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group.api.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/angular/guides/listeners.md b/mintlify/form/framework/angular/guides/listeners.md
new file mode 100644
index 000000000..8da6e7501
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/listeners.md
@@ -0,0 +1,61 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the onChange event and dispatch a reset to the field "province" when the listener is fired.
+
+Events that can be "listened" to are:
+
+- `onChange`
+- `onBlur`
+- `onMount`
+- `onSubmit`
+- `onUnmount`
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="country"
+      [listeners]="{
+        onChange: onCountryChange,
+      }"
+      #country="field"
+    ></ng-container>
+
+    <ng-container
+      [tanstackField]="form"
+      name="province"
+      #province="field"
+    ></ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      country: '',
+      province: '',
+    },
+  })
+
+  onCountryChange: FieldListenerFn<any, any, any, any, string> = ({
+    value,
+  }) => {
+    console.log(`Country changed to: ${value}, resetting province`)
+    this.form.setFieldValue('province', '')
+  }
+}
+```
diff --git a/mintlify/form/framework/angular/guides/submission-handling.md b/mintlify/form/framework/angular/guides/submission-handling.md
new file mode 100644
index 000000000..aaf9b1306
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/submission-handling.md
@@ -0,0 +1,106 @@
+---
+id: submission-handling
+title: Submission handling
+---
+
+## Passing additional data to submission handling
+
+You may have multiple types of submission behaviour, for example, going back to another page or staying on the form.
+You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
+
+> Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
+
+```angular-ts
+import { Component } from '@angular/core'
+import { injectForm } from '@tanstack/angular-form'
+
+type FormMeta = {
+  submitAction: 'continue' | 'backToMenu' | null
+}
+
+// Metadata is not required to call form.handleSubmit().
+// Specify what values to use as default if no meta is passed
+const defaultMeta: FormMeta = {
+  submitAction: null,
+}
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <button type="submit" (click)="handleClick({ submitAction: 'continue' })">
+        Submit and continue
+      </button>
+      <button
+        type="submit"
+        (click)="handleClick({ submitAction: 'backToMenu' })"
+      >
+        Submit and back to menu
+      </button>
+    </form>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      data: '',
+    },
+    // Define what meta values to expect on submission
+    onSubmitMeta: defaultMeta,
+    onSubmit: async ({ value, meta }) => {
+      // Do something with the values passed via handleSubmit
+      console.log(`Selected action - ${meta.submitAction}`, value)
+    },
+  })
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  handleClick(meta: FormMeta) {
+    // Overwrites the default specified in onSubmitMeta
+    this.form.handleSubmit(meta)
+  }
+}
+```
+
+## Transforming data with Standard Schemas
+
+While Tanstack Form provides [Standard Schema support](/form/framework/angular/guides/validation) for validation, it does not preserve the Schema's output data.
+
+The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function:
+
+```tsx
+import { z } from 'zod'
+// ...
+
+const schema = z.object({
+  age: z.string().transform((age) => Number(age)),
+})
+
+// Tanstack Form uses the input type of Standard Schemas
+const defaultValues: z.input<typeof schema> = {
+  age: '13',
+}
+
+// ...
+
+@Component({
+  // ...
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues,
+    validators: {
+      onChange: schema,
+    },
+    onSubmit: ({ value }) => {
+      const inputAge: string = value.age
+      // Pass it through the schema to get the transformed value
+      const result = schema.parse(value)
+      const outputAge: number = result.age
+    },
+  })
+}
+```
diff --git a/mintlify/form/framework/angular/guides/validation.md b/mintlify/form/framework/angular/guides/validation.md
new file mode 100644
index 000000000..16f4c2f37
--- /dev/null
+++ b/mintlify/form/framework/angular/guides/validation.md
@@ -0,0 +1,696 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit...)
+- Validation rules can be defined at the field level or at the form level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `[tanstackField]` directive accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.api.state.meta.errors`.
+
+Here is an example:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: ageValidator,
+      }"
+      #age="field"
+    >
+      <label [for]="age.api.name">Age:</label>
+      <input
+        [id]="age.api.name"
+        [name]="age.api.name"
+        [value]="age.api.state.value"
+        type="number"
+        (input)="age.api.handleChange($any($event).target.valueAsNumber)"
+      />
+      @if (age.api.state.meta.errors) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  // ...
+}
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onBlur: ageValidator,
+      }"
+      #age="field"
+    >
+      <label [for]="age.api.name">Age:</label>
+      <!-- We always need to implement onChange, so that TanStack Form receives the changes -->
+      <!-- Listen to the onBlur event on the field -->
+      <input
+        [id]="age.api.name"
+        [name]="age.api.name"
+        [value]="age.api.state.value"
+        type="number"
+        (blur)="age.api.handleBlur()"
+        (input)="age.api.handleChange($any($event).target.valueAsNumber)"
+      />
+      @if (age.api.state.meta.errors) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  // ...
+}
+```
+
+So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: ageValidator,
+        onBlur: minimumAgeValidator,
+      }"
+      #age="field"
+    >
+      <label [for]="age.api.name">Age:</label>
+      <!-- We always need to implement onChange, so that TanStack Form receives the changes -->
+      <!-- Listen to the onBlur event on the field -->
+      <input
+        [id]="age.api.name"
+        [name]="age.api.name"
+        [value]="age.api.state.value"
+        type="number"
+        (blur)="age.api.handleBlur()"
+        (input)="age.api.handleChange($any($event).target.valueAsNumber)"
+      />
+      @if (!age.api.state.meta.isValid) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  minimumAgeValidator: FieldValidateFn<any, any, any, any, number> = ({
+    value,
+  }) => (value < 0 ? 'Invalid value' : undefined)
+
+  // ...
+}
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: ageValidator,
+      }"
+      #age="field"
+    >
+      <!-- ... -->
+      @if (age.api.state.meta.errors) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  // ...
+}
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: ageValidator,
+      }"
+      #age="field"
+    >
+      <!-- ... -->
+      @if (age.api.state.meta.errorMap['onChange']) {
+        <em role="alert">{{ age.api.state.meta.errorMap['onChange'] }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  // ...
+}
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: ageValidator
+      }"
+      #age="field"
+    >
+      <!-- ... -->
+      <!-- errorMap.onChange is type `{isOldEnough: false} | undefined` -->
+	  <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
+      @if (!age.api.state.meta.errorMap['onChange']?.isOldEnough) {
+        <em role="alert">The user is not old enough</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be 13 to make an account' : undefined
+
+  // ...
+}
+```
+
+## Validation at field level vs at form level
+
+As shown above, each `[tanstackField]` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `injectForm()` function.
+
+Example:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <div>
+      <ng-container [tanstackField]="form" name="age" #age="field">
+        <!-- ... -->
+        @if (formErrorMap().onChange) {
+          <div>
+            <em
+              >There was an error on the form: {{ formErrorMap().onChange }}</em
+            >
+          </div>
+        }
+        <!-- ... -->
+      </ng-container>
+    </div>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit({ value }) {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  })
+
+  // Subscribe to the form's error map so that updates to it will render
+  formErrorMap = injectStore(this.form, (state) => state.errorMap)
+}
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  imports: [TanStackField],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <div>
+        <ng-container [tanstackField]="form" name="age" #ageField="field">
+          <label [for]="ageField.api.name">Age:</label>
+          <input
+            type="number"
+            [name]="ageField.api.name"
+            [value]="ageField.api.state.value"
+            (blur)="ageField.api.handleBlur()"
+            (input)="
+              ageField.api.handleChange($any($event).target.valueAsNumber)
+            "
+          />
+          @if (ageField.api.state.meta.errors.length > 0) {
+            <em role="alert">{{
+              ageField.api.state.meta.errors.join(', ')
+            }}</em>
+          }
+        </ng-container>
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      age: 0,
+      socials: [],
+      details: {
+        email: '',
+      },
+    },
+    validators: {
+      onSubmitAsync: async ({ value }) => {
+        // Validate the value on the server
+        const hasErrors = await verifyDataOnServer(value)
+        if (hasErrors) {
+          return {
+            form: 'Invalid data', // The `form` key is optional
+            fields: {
+              age: 'Must be 13 or older to sign',
+              // Set errors on nested fields with the field's name
+              'socials[0].url': 'The provided URL does not exist',
+              'details.email': 'An email is required',
+            },
+          }
+        }
+
+        return null
+      },
+    },
+  })
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```angular-ts
+> @Component(&#123;
+>   selector: 'app-root',
+>   standalone: true,
+>   imports: [TanStackField],
+>   template: `
+>     <div>
+>       &lt;ng-container
+>         [tanstackField]="form"
+>         name="age"
+>         #ageField="field"
+>         [validators]="&#123;
+>           onChange: fieldValidator,
+>         &#125;"
+>       >
+>         &lt;input
+>           type="number"
+>           [value]="ageField.api.state.value"
+>           (input)="
+>             ageField.api.handleChange($any($event).target.valueAsNumber)
+>           "
+>         />
+>         @if (ageField.api.state.meta.errors.length > 0) &#123;
+>           <em role="alert">&#123;&#123;
+>             ageField.api.state.meta.errors.join(', ')
+>           &#125;&#125;</em>
+>         &#125;
+>       &lt;/ng-container&gt;
+>     </div>
+>   `,
+> &#125;)
+> export class AppComponent &#123;
+>   form = injectForm(&#123;
+>     defaultValues: &#123;
+>       age: 0,
+>     &#125;,
+>     validators: &#123;
+>       onChange: (&#123; value &#125;) => &#123;
+>         return &#123;
+>           fields: &#123;
+>             age: value.age &lt; 12 ? 'Too young!' : undefined,
+>           &#125;,
+>         &#125;
+>       &#125;,
+>     &#125;,
+>   &#125;)
+>
+>   fieldValidator: FieldValidateFn&lt;any, any, number> = (&#123; value &#125;) =>
+>     value % 2 === 0 ? 'Must be odd!' : undefined
+> &#125;
+> ```
+>
+> Will only show `'Must be odd!` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{ onChangeAsync: ageValidator }"
+      #age="field"
+    >
+      <label [for]="age.api.name">Last Name:</label>
+      <input
+        [id]="age.api.name"
+        [name]="age.api.name"
+        [value]="age.api.state.value"
+        type="number"
+        (input)="age.api.handleChange($any($event).target.valueAsNumber)"
+      />
+      @if (age.api.state.meta.errors) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateAsyncFn<any, string, number> = async ({
+    value,
+  }) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return value < 13 ? 'You must be 13 to make an account' : undefined
+  }
+
+  // ...
+}
+```
+
+Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{ onBlur: ensureAge13, onBlurAsync: ensureOlderAge }"
+      #age="field"
+    >
+      <label [for]="age.api.name">Last Name:</label>
+      <input
+        [id]="age.api.name"
+        [name]="age.api.name"
+        [value]="age.api.state.value"
+        type="number"
+        (blur)="age.api.handleBlur()"
+        (input)="age.api.handleChange($any($event).target.value)"
+      />
+      @if (age.api.state.meta.errors) {
+        <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
+      }
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ensureAge13: FieldValidateFn<any, any, any, any, number> = ({ value }) =>
+    value < 13 ? 'You must be at least 13' : undefined
+
+  ensureOlderAge: FieldValidateAsyncFn<any, string, number> = async ({
+    value,
+  }) => {
+    const currentAge = await fetchCurrentAgeOnProfile()
+    return value < currentAge ? 'You can only increase the age' : undefined
+  }
+
+  // ...
+}
+```
+
+The synchronous validation method (`onBlur`) is run first and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```angular-html
+<ng-container
+  [tanstackField]="form"
+  name="age"
+  asyncDebounceMs="{500}"
+  [validators]="{ onChangeAsync: someValidator }"
+  #age="field"
+>
+  <!-- ... -->
+</ng-container>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```angular-html
+<ng-container
+  [tanstackField]="form"
+  name="age"
+  [validators]="{
+    onChangeAsyncDebounceMs: 1500,
+    onChangeAsync: someValidator,
+    onBlurAsync: otherValidator,
+  }"
+  #age="field"
+>
+  <!-- ... -->
+</ng-container>
+```
+
+> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. See [submission handling](/form/framework/angular/guides/submission-handling) for more information.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```angular-ts
+import { z } from 'zod'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: z.number().gte(13, 'You must be 13 to make an account'),
+      }"
+      #age="field"
+    >
+      <!-- ... -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    // ...
+  })
+
+  z = z
+
+  // ...
+}
+```
+
+Async validations on form and field level are supported as well:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{
+        onChange: z.number().gte(13, 'You must be 13 to make an account'),
+        onChangeAsyncDebounceMs: 500,
+        onChangeAsync: increaseAge,
+      }"
+      #age="field"
+    >
+      <!-- ... -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  increaseAge = z.number().refine(
+    async (value) => {
+      const currentAge = await fetchCurrentAgeOnProfile()
+      return value >= currentAge
+    },
+    {
+      message: 'You can only increase the age',
+    },
+  )
+
+  // ...
+}
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <ng-container
+      [tanstackField]="form"
+      name="age"
+      [validators]="{ onChangeAsync: ageValidator }"
+      #age="field"
+    >
+      <!-- ... -->
+    </ng-container>
+  `,
+})
+export class AppComponent {
+  ageValidator: FieldValidateAsyncFn<any, string, number> = async ({
+    value,
+    fieldApi,
+  }) => {
+    const errors = fieldApi.parseValueWithSchema(
+      z.number().gte(13, 'You must be 13 to make an account'),
+    )
+    if (errors) return errors
+
+    // continue with your validation
+  }
+
+  // ...
+}
+```
+
+## Preventing invalid forms from being submitted
+
+The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
+
+The form state object has a `canSubmit` flag that is false when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to it via `injectStore` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <!-- ... -->
+    <button type="submit" [disabled]="!canSubmit()">
+      {{ isSubmitting() ? '...' : 'Submit' }}
+    </button>
+  `,
+})
+export class AppComponent {
+  canSubmit = injectStore(this.form, (state) => state.canSubmit)
+  isSubmitting = injectStore(this.form, (state) => state.isSubmitting)
+
+  // ...
+}
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/angular/quick-start.md b/mintlify/form/framework/angular/quick-start.md
new file mode 100644
index 000000000..ac6879f28
--- /dev/null
+++ b/mintlify/form/framework/angular/quick-start.md
@@ -0,0 +1,55 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
+
+```angular-ts
+import { Component } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { TanStackField, injectForm } from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <div>
+        <ng-container [tanstackField]="form" name="fullName" #fullName="field">
+          <label [for]="fullName.api.name">First Name:</label>
+          <input
+            [name]="fullName.api.name"
+            [value]="fullName.api.state.value"
+            (blur)="fullName.api.handleBlur()"
+            (input)="fullName.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+  `,
+})
+export class AppComponent {
+  form = injectForm({
+    defaultValues: {
+      fullName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err))
+```
+
+From here, you'll be ready to explore all of the other features of TanStack Form!
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackAppField.md b/mintlify/form/framework/angular/reference/classes/TanStackAppField.md
new file mode 100644
index 000000000..a3aeefe65
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackAppField.md
@@ -0,0 +1,380 @@
+---
+id: TanStackAppField
+title: TanStackAppField
+---
+
+# Class: TanStackAppField\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [angular-form/src/app-field.ts:20](https://github.com/TanStack/form/blob/main/packages/angular-form/src/app-field.ts#L20)
+
+## Extends
+
+- [`TanStackField`](/form/framework/angular/reference/classes/TanStackField)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackAppField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(): TanStackAppField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/app-field.ts:79](https://github.com/TanStack/form/blob/main/packages/angular-form/src/app-field.ts#L79)
+
+#### Returns
+
+`TanStackAppField`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+#### Overrides
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`constructor`](/form/framework/angular/reference/classes/TanStackField#constructor)
+
+## Properties
+
+### \_api
+
+```ts
+_api: Signal<FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:150](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L150)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`_api`](/form/framework/angular/reference/classes/TanStackField#_api)
+
+***
+
+### asyncAlways
+
+```ts
+asyncAlways: InputSignalWithTransform<boolean, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L75)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`asyncAlways`](/form/framework/angular/reference/classes/TanStackField#asyncalways)
+
+***
+
+### asyncDebounceMs
+
+```ts
+asyncDebounceMs: InputSignalWithTransform<number, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:72](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L72)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`asyncDebounceMs`](/form/framework/angular/reference/classes/TanStackField#asyncdebouncems)
+
+***
+
+### base
+
+```ts
+base: TanStackFieldInjectable<any>;
+```
+
+Defined in: [angular-form/src/app-field.ts:77](https://github.com/TanStack/form/blob/main/packages/angular-form/src/app-field.ts#L77)
+
+***
+
+### cd
+
+```ts
+cd: ChangeDetectorRef;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:237](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L237)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`cd`](/form/framework/angular/reference/classes/TanStackField#cd)
+
+***
+
+### defaultMeta
+
+```ts
+defaultMeta: InputSignal<
+  | Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:117](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L117)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`defaultMeta`](/form/framework/angular/reference/classes/TanStackField#defaultmeta)
+
+***
+
+### defaultValue
+
+```ts
+defaultValue: InputSignal<NoInfer<TData> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:71](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L71)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`defaultValue`](/form/framework/angular/reference/classes/TanStackField#defaultvalue)
+
+***
+
+### disableErrorFlat
+
+```ts
+disableErrorFlat: InputSignal<boolean | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:148](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L148)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`disableErrorFlat`](/form/framework/angular/reference/classes/TanStackField#disableerrorflat)
+
+***
+
+### injector
+
+```ts
+injector: Injector;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:221](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L221)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`injector`](/form/framework/angular/reference/classes/TanStackField#injector)
+
+***
+
+### listeners
+
+```ts
+listeners: InputSignal<
+  | NoInfer<FieldListeners<TParentData, TName, TData>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:116](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L116)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`listeners`](/form/framework/angular/reference/classes/TanStackField#listeners)
+
+***
+
+### mode
+
+```ts
+mode: InputSignal<"value" | "array" | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:146](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L146)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`mode`](/form/framework/angular/reference/classes/TanStackField#mode)
+
+***
+
+### name
+
+```ts
+name: InputSignal<TName>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:70](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L70)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`name`](/form/framework/angular/reference/classes/TanStackField#name)
+
+***
+
+### options
+
+```ts
+options: Signal<FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:182](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L182)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`options`](/form/framework/angular/reference/classes/TanStackField#options)
+
+***
+
+### tanstackField
+
+```ts
+tanstackField: InputSignal<FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L78)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`tanstackField`](/form/framework/angular/reference/classes/TanStackField#tanstackfield)
+
+***
+
+### validators
+
+```ts
+validators: InputSignal<
+  | NoInfer<FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:96](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L96)
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`validators`](/form/framework/angular/reference/classes/TanStackField#validators)
+
+## Accessors
+
+### api
+
+#### Get Signature
+
+```ts
+get api(): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:154](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L154)
+
+##### Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`api`](/form/framework/angular/reference/classes/TanStackField#api)
+
+## Methods
+
+### ngOnInit()
+
+```ts
+ngOnInit(): void;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:239](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L239)
+
+A callback method that is invoked immediately after the
+default change detector has checked the directive's
+data-bound properties for the first time,
+and before any of the view or content children have been checked.
+It is invoked only once when the directive is instantiated.
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`TanStackField`](/form/framework/angular/reference/classes/TanStackField).[`ngOnInit`](/form/framework/angular/reference/classes/TanStackField#ngoninit)
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackField.md b/mintlify/form/framework/angular/reference/classes/TanStackField.md
new file mode 100644
index 000000000..90ee01f84
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackField.md
@@ -0,0 +1,312 @@
+---
+id: TanStackField
+title: TanStackField
+---
+
+# Class: TanStackField\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [angular-form/src/tanstack-field.ts:37](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L37)
+
+## Extended by
+
+- [`TanStackAppField`](/form/framework/angular/reference/classes/TanStackAppField)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Implements
+
+- `OnInit`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(): TanStackField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:223](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L223)
+
+#### Returns
+
+`TanStackField`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Properties
+
+### \_api
+
+```ts
+_api: Signal<FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:150](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L150)
+
+***
+
+### asyncAlways
+
+```ts
+asyncAlways: InputSignalWithTransform<boolean, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L75)
+
+***
+
+### asyncDebounceMs
+
+```ts
+asyncDebounceMs: InputSignalWithTransform<number, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:72](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L72)
+
+***
+
+### cd
+
+```ts
+cd: ChangeDetectorRef;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:237](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L237)
+
+***
+
+### defaultMeta
+
+```ts
+defaultMeta: InputSignal<
+  | Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:117](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L117)
+
+***
+
+### defaultValue
+
+```ts
+defaultValue: InputSignal<NoInfer<TData> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:71](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L71)
+
+***
+
+### disableErrorFlat
+
+```ts
+disableErrorFlat: InputSignal<boolean | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:148](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L148)
+
+***
+
+### injector
+
+```ts
+injector: Injector;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:221](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L221)
+
+***
+
+### listeners
+
+```ts
+listeners: InputSignal<
+  | NoInfer<FieldListeners<TParentData, TName, TData>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:116](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L116)
+
+***
+
+### mode
+
+```ts
+mode: InputSignal<"value" | "array" | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:146](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L146)
+
+***
+
+### name
+
+```ts
+name: InputSignal<TName>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:70](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L70)
+
+***
+
+### options
+
+```ts
+options: Signal<FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:182](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L182)
+
+***
+
+### tanstackField
+
+```ts
+tanstackField: InputSignal<FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L78)
+
+***
+
+### validators
+
+```ts
+validators: InputSignal<
+  | NoInfer<FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:96](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L96)
+
+## Accessors
+
+### api
+
+#### Get Signature
+
+```ts
+get api(): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:154](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L154)
+
+##### Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Methods
+
+### ngOnInit()
+
+```ts
+ngOnInit(): void;
+```
+
+Defined in: [angular-form/src/tanstack-field.ts:239](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.ts#L239)
+
+A callback method that is invoked immediately after the
+default change detector has checked the directive's
+data-bound properties for the first time,
+and before any of the view or content children have been checked.
+It is invoked only once when the directive is instantiated.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+OnInit.ngOnInit
+```
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackFieldInjectable.md b/mintlify/form/framework/angular/reference/classes/TanStackFieldInjectable.md
new file mode 100644
index 000000000..bd1fdf31a
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackFieldInjectable.md
@@ -0,0 +1,52 @@
+---
+id: TanStackFieldInjectable
+title: TanStackFieldInjectable
+---
+
+# Class: TanStackFieldInjectable\&lt;T\>
+
+Defined in: [angular-form/src/injectable.ts:5](https://github.com/TanStack/form/blob/main/packages/angular-form/src/injectable.ts#L5)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackFieldInjectable<T>(): TanStackFieldInjectable<T>;
+```
+
+#### Returns
+
+`TanStackFieldInjectable`\&lt;`T`\>
+
+## Properties
+
+### \_api
+
+```ts
+_api: WritableSignal<FieldApi<any, any, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [angular-form/src/injectable.ts:6](https://github.com/TanStack/form/blob/main/packages/angular-form/src/injectable.ts#L6)
+
+## Accessors
+
+### api
+
+#### Get Signature
+
+```ts
+get api(): FieldApi<any, any, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [angular-form/src/injectable.ts:34](https://github.com/TanStack/form/blob/main/packages/angular-form/src/injectable.ts#L34)
+
+##### Returns
+
+`FieldApi`\&lt;`any`, `any`, `T`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackFormGroup.md b/mintlify/form/framework/angular/reference/classes/TanStackFormGroup.md
new file mode 100644
index 000000000..603597b72
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackFormGroup.md
@@ -0,0 +1,360 @@
+---
+id: TanStackFormGroup
+title: TanStackFormGroup
+---
+
+# Class: TanStackFormGroup\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [angular-form/src/tanstack-form-group.ts:34](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L34)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Implements
+
+- `OnInit`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(): TanStackFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:303](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L303)
+
+#### Returns
+
+`TanStackFormGroup`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Properties
+
+### \_api
+
+```ts
+_api: Signal<FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:224](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L224)
+
+***
+
+### asyncAlways
+
+```ts
+asyncAlways: InputSignalWithTransform<boolean, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:79](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L79)
+
+***
+
+### asyncDebounceMs
+
+```ts
+asyncDebounceMs: InputSignalWithTransform<number, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:76](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L76)
+
+***
+
+### canSubmitWhenInvalid
+
+```ts
+canSubmitWhenInvalid: InputSignalWithTransform<boolean, unknown>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:82](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L82)
+
+***
+
+### cd
+
+```ts
+cd: ChangeDetectorRef;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:317](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L317)
+
+***
+
+### defaultMeta
+
+```ts
+defaultMeta: InputSignal<
+  | Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:125](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L125)
+
+***
+
+### defaultState
+
+```ts
+defaultState: InputSignal<Partial<FormGroupState> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:154](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L154)
+
+***
+
+### defaultValue
+
+```ts
+defaultValue: InputSignal<NoInfer<TData> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L75)
+
+***
+
+### injector
+
+```ts
+injector: Injector;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:301](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L301)
+
+***
+
+### listeners
+
+```ts
+listeners: InputSignal<
+  | NoInfer<FormGroupListeners<TParentData, TName, TData>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:123](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L123)
+
+***
+
+### mode
+
+```ts
+mode: InputSignal<"value" | "array" | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:222](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L222)
+
+***
+
+### name
+
+```ts
+name: InputSignal<TName>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:74](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L74)
+
+***
+
+### onGroupSubmit
+
+```ts
+onGroupSubmit: InputSignal<NoInfer<(props) => any | undefined> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:158](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L158)
+
+***
+
+### onGroupSubmitInvalid
+
+```ts
+onGroupSubmitInvalid: InputSignal<NoInfer<(props) => void | undefined> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:190](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L190)
+
+***
+
+### onSubmitMeta
+
+```ts
+onSubmitMeta: InputSignal<NoInfer<TSubmitMeta> | undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:156](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L156)
+
+***
+
+### options
+
+```ts
+options: Signal<FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:257](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L257)
+
+***
+
+### tanstackFormGroup
+
+```ts
+tanstackFormGroup: InputSignal<FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:85](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L85)
+
+***
+
+### validators
+
+```ts
+validators: InputSignal<
+  | NoInfer<FormGroupValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>>
+| undefined>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:103](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L103)
+
+## Accessors
+
+### api
+
+#### Get Signature
+
+```ts
+get api(): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:228](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L228)
+
+##### Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Methods
+
+### ngOnInit()
+
+```ts
+ngOnInit(): void;
+```
+
+Defined in: [angular-form/src/tanstack-form-group.ts:319](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-form-group.ts#L319)
+
+A callback method that is invoked immediately after the
+default change detector has checked the directive's
+data-bound properties for the first time,
+and before any of the view or content children have been checked.
+It is invoked only once when the directive is instantiated.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+OnInit.ngOnInit
+```
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackWithForm.md b/mintlify/form/framework/angular/reference/classes/TanStackWithForm.md
new file mode 100644
index 000000000..9a2d36405
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackWithForm.md
@@ -0,0 +1,92 @@
+---
+id: TanStackWithForm
+title: TanStackWithForm
+---
+
+# Class: TanStackWithForm\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [angular-form/src/with-form.ts:14](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form.ts#L14)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackWithForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(): TanStackWithForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/with-form.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form.ts#L48)
+
+#### Returns
+
+`TanStackWithForm`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Properties
+
+### base
+
+```ts
+base: TanStackWithFormInjectable;
+```
+
+Defined in: [angular-form/src/with-form.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form.ts#L46)
+
+***
+
+### form
+
+```ts
+form: InputSignal<FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>>;
+```
+
+Defined in: [angular-form/src/with-form.ts:28](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form.ts#L28)
diff --git a/mintlify/form/framework/angular/reference/classes/TanStackWithFormInjectable.md b/mintlify/form/framework/angular/reference/classes/TanStackWithFormInjectable.md
new file mode 100644
index 000000000..ee7a312dc
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/classes/TanStackWithFormInjectable.md
@@ -0,0 +1,30 @@
+---
+id: TanStackWithFormInjectable
+title: TanStackWithFormInjectable
+---
+
+# Class: TanStackWithFormInjectable
+
+Defined in: [angular-form/src/with-form-injectable.ts:10](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form-injectable.ts#L10)
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackWithFormInjectable(): TanStackWithFormInjectable;
+```
+
+#### Returns
+
+`TanStackWithFormInjectable`
+
+## Properties
+
+### \_form
+
+```ts
+_form: WritableSignal<FormApi<any, any, any, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [angular-form/src/with-form-injectable.ts:11](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form-injectable.ts#L11)
diff --git a/mintlify/form/framework/angular/reference/functions/injectField.md b/mintlify/form/framework/angular/reference/functions/injectField.md
new file mode 100644
index 000000000..cb9f3413b
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/functions/injectField.md
@@ -0,0 +1,22 @@
+---
+id: injectField
+title: injectField
+---
+
+# Function: injectField()
+
+```ts
+function injectField<T>(): TanStackFieldInjectable<T>;
+```
+
+Defined in: [angular-form/src/injectable.ts:39](https://github.com/TanStack/form/blob/main/packages/angular-form/src/injectable.ts#L39)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Returns
+
+[`TanStackFieldInjectable`](/form/framework/angular/reference/classes/TanStackFieldInjectable)\&lt;`T`\>
diff --git a/mintlify/form/framework/angular/reference/functions/injectForm.md b/mintlify/form/framework/angular/reference/functions/injectForm.md
new file mode 100644
index 000000000..6bc6b5312
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/functions/injectForm.md
@@ -0,0 +1,72 @@
+---
+id: injectForm
+title: injectForm
+---
+
+# Function: injectForm()
+
+```ts
+function injectForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(opts?): FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/inject-form.ts:9](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-form.ts#L9)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts?
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+`FormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/angular/reference/functions/injectStore.md b/mintlify/form/framework/angular/reference/functions/injectStore.md
new file mode 100644
index 000000000..4e02080e0
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/functions/injectStore.md
@@ -0,0 +1,80 @@
+---
+id: injectStore
+title: injectStore
+---
+
+# Function: injectStore()
+
+```ts
+function injectStore<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TSelected>(form, selector?): Signal<TSelected>;
+```
+
+Defined in: [angular-form/src/inject-store.ts:9](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L9)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>\>
+
+## Parameters
+
+### form
+
+`FormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+`Signal`\&lt;`TSelected`\>
diff --git a/mintlify/form/framework/angular/reference/functions/injectWithForm.md b/mintlify/form/framework/angular/reference/functions/injectWithForm.md
new file mode 100644
index 000000000..6060bceb8
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/functions/injectWithForm.md
@@ -0,0 +1,84 @@
+---
+id: injectWithForm
+title: injectWithForm
+---
+
+# Function: injectWithForm()
+
+```ts
+function injectWithForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_opts?): TanStackWithFormRef<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [angular-form/src/with-form-injectable.ts:59](https://github.com/TanStack/form/blob/main/packages/angular-form/src/with-form-injectable.ts#L59)
+
+Injects the form provided by an ancestor `[tanstack-with-form]` directive.
+
+Pass form options (typically the same options used to create the form) so
+the returned `form` is typed correctly without needing to specify generics:
+
+```ts
+const withForm = injectWithForm({ ...peopleFormOpts })
+withForm.form // FormApi<PeopleFormData, ...>
+```
+
+The options are only used for type inference and are not read at runtime.
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### \_opts?
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+`TanStackWithFormRef`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/angular/reference/index.md b/mintlify/form/framework/angular/reference/index.md
new file mode 100644
index 000000000..15db95ec4
--- /dev/null
+++ b/mintlify/form/framework/angular/reference/index.md
@@ -0,0 +1,22 @@
+---
+id: "@tanstack/angular-form"
+title: "@tanstack/angular-form"
+---
+
+# @tanstack/angular-form
+
+## Classes
+
+- [TanStackAppField](/form/framework/angular/reference/classes/TanStackAppField)
+- [TanStackField](/form/framework/angular/reference/classes/TanStackField)
+- [TanStackFieldInjectable](/form/framework/angular/reference/classes/TanStackFieldInjectable)
+- [TanStackFormGroup](/form/framework/angular/reference/classes/TanStackFormGroup)
+- [TanStackWithForm](/form/framework/angular/reference/classes/TanStackWithForm)
+- [TanStackWithFormInjectable](/form/framework/angular/reference/classes/TanStackWithFormInjectable)
+
+## Functions
+
+- [injectField](/form/framework/angular/reference/functions/injectField)
+- [injectForm](/form/framework/angular/reference/functions/injectForm)
+- [injectStore](/form/framework/angular/reference/functions/injectStore)
+- [injectWithForm](/form/framework/angular/reference/functions/injectWithForm)
diff --git a/mintlify/form/framework/lit/examples/array.md b/mintlify/form/framework/lit/examples/array.md
new file mode 100644
index 000000000..1e87e70c9
--- /dev/null
+++ b/mintlify/form/framework/lit/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Array"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/lit/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/lit/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/lit/examples/multi-step-wizard.md b/mintlify/form/framework/lit/examples/multi-step-wizard.md
new file mode 100644
index 000000000..6558a06e4
--- /dev/null
+++ b/mintlify/form/framework/lit/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/lit/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/lit/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/lit/examples/simple.md b/mintlify/form/framework/lit/examples/simple.md
new file mode 100644
index 000000000..4dae04539
--- /dev/null
+++ b/mintlify/form/framework/lit/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/lit/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/lit/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/lit/examples/standard-schema.md b/mintlify/form/framework/lit/examples/standard-schema.md
new file mode 100644
index 000000000..b11a67940
--- /dev/null
+++ b/mintlify/form/framework/lit/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/lit/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/lit/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/lit/examples/ui-libraries.md b/mintlify/form/framework/lit/examples/ui-libraries.md
new file mode 100644
index 000000000..6b53f8758
--- /dev/null
+++ b/mintlify/form/framework/lit/examples/ui-libraries.md
@@ -0,0 +1,12 @@
+---
+title: "UI Libraries"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/lit/examples/ui-libraries)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/lit/ui-libraries)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/lit/guides/arrays.md b/mintlify/form/framework/lit/guides/arrays.md
new file mode 100644
index 000000000..2c14a4185
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/arrays.md
@@ -0,0 +1,174 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value, as in:
+
+```ts
+export class TestForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      people: [] as Array<{ name: string; age: string }>,
+    },
+  })
+  render() {
+    return html`
+      <form
+        id="form"
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        <h1>Please enter your details</h1>
+        ${this.#form.field(
+          {
+            name: `people`,
+          },
+          (peopleField) => {
+            return html`${repeat(
+              peopleField.state.value,
+              (_, index) => index,
+              (_, index) => {
+                return html` // ... `
+              },
+            )} `
+          },
+        )}
+      </form>
+    `
+  }
+}
+```
+
+This will generate the mapped HTML every time you run pushValue on the field:
+
+```html
+<div class="container">
+  <button type="button" @click="${()" ="">
+    { peopleField.pushValue({name: "",age: ""}) }}> Add Person
+  </button>
+</div>
+```
+
+Finally, you can use a subfield like so:
+
+```ts
+return html`
+  ${this.#form.field(
+    {
+      name: `people[${index}].name`,
+    },
+    (field) => {
+      return html`
+        <input
+          type="text"
+          placeholder="Name"
+          .value="${field.state.value}"
+          @input="${(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}"
+        />
+      `
+    },
+  )}
+`
+```
+
+## Full Example
+
+```typescript
+export class TestForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      people: [] as Array<{ name: string }>,
+    },
+  });
+  render() {
+    return html`
+      <form
+        id="form"
+        @submit=${(e: Event) => {
+          e.preventDefault();
+        }}
+      >
+        <h1>Please enter your details</h1>
+        ${this.#form.field(
+          {
+            name: `people`,
+          },
+          (peopleField) => {
+            return html`${repeat(
+                peopleField.state.value,
+                (_, index) => index,
+                (_, index) => {
+                  return html`
+                    ${this.#form.field(
+                      {
+                        name: `people[${index}].name`,
+                      },
+                      (field) => {
+                        return html` <div>
+                          <div class="container">
+                            <label>Name</label>
+                            <input
+                              type="text"
+                              placeholder="Name"
+                              .value="${field.state.value}"
+                              @input="${(e: Event) => {
+                                const target = e.target as HTMLInputElement;
+                                field.handleChange(target.value);
+                              }}"
+                            />
+                          </div>
+                        </div>`;
+                      }
+                    )}
+                  `;
+                }
+              )}
+
+              <div class="container">
+                <button
+                  type="button"
+                  @click=${() => {
+                    peopleField.pushValue({
+                      name: "",
+                    });
+                  }}
+                >
+                  Add Person
+                </button>
+              </div> `;
+          }
+        )}
+
+        <div class="container">
+          <button type="submit" ?disabled=${this.#form.api.state.isSubmitting}>
+            ${this.#form.api.state.isSubmitting ? html` Submitting` : "Submit"}
+          </button>
+          <button
+            type="button"
+            id="reset"
+            @click=${() => {
+              this.#form.api.reset();
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+    `;
+  }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-form": TestForm;
+  }
+}
+```
diff --git a/mintlify/form/framework/lit/guides/basic-concepts.md b/mintlify/form/framework/lit/guides/basic-concepts.md
new file mode 100644
index 000000000..efc3a7c60
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/basic-concepts.md
@@ -0,0 +1,132 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/lit-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library and its usage with Lit.
+
+## Form Options
+
+You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
+
+For Example:
+
+```tsx
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    employed: false,
+    jobTitle: '',
+  } as Employee,
+})
+```
+
+## Form Instance
+
+A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `TanStackFormController` interface provided by `@tanstack/lit-form`. The `TanStackFormController` is instantiated with the current form's (`this`) class and some default form options. It initializes the form state, handles form submission, and provides methods to manage form fields and their validation.
+
+```tsx
+#form = new TanStackFormController(this, {
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    employed: false,
+    jobTitle: '',
+  } as Employee,
+})
+```
+
+You may also create a form instance without using `formOptions` by using the standalone `TanStackFormController` API:
+
+```tsx
+#form = new TanStackFormController(this, {
+  ...formOpts,
+})
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `field(FieldOptions, callback)` provided by the form instance. The component accepts a `FieldOptions` object and a callback function that receives a `FieldApi` object. This object provides methods to get the current value of the field, handle input changes, and handle blur events.
+
+For Example:
+
+```ts
+ ${this.#form.field(
+    {
+      name: `firstName`,
+      validators: {
+        onChange: ({ value }) =>
+          value.length < 3 ? "Not long enough" : undefined,
+        },
+      },
+      (field: FieldApi<Employee, "firstName">) => {
+        return html` <div>
+          <label class="first-name-label">First Name</label>
+          <input
+           id="firstName"
+           type="text"
+           class="first-name-input"
+           placeholder="First Name"
+           @blur="${() => field.handleBlur()}"
+           .value="${field.state.value}"
+           @input="${(event: InputEvent) => {
+           if (event.currentTarget) {
+            const newValue = (event.currentTarget as HTMLInputElement).value;
+            field.handleChange(newValue);
+           }
+          }}"
+        />
+      </div>`;
+    },
+)}
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using its `field.state` property.
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful to see how the user interacts with a field:
+
+- _"isTouched"_, after the user changes the field or blurs the field
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
diff --git a/mintlify/form/framework/lit/guides/dynamic-validation.md b/mintlify/form/framework/lit/guides/dynamic-validation.md
new file mode 100644
index 000000000..c601e4762
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/dynamic-validation.md
@@ -0,0 +1,269 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    // If this is omitted, onDynamic will not be called
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  render() {
+    return html`<!-- form content -->`
+  }
+}
+```
+
+> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```ts
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    // ...
+    validationLogic: revalidateLogic({
+      mode: 'submit',
+      modeAfterSubmission: 'blur',
+    }),
+    // ...
+  })
+}
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the `form.api.state.errorMap` object.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  render() {
+    return html`<p>${this.#form.api.state.errorMap.onDynamic?.firstName}</p>`
+  }
+}
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  render() {
+    return html`
+      <div>
+        <p>${this.#form.api.state.errorMap.onChange?.firstName}</p>
+        <p>${this.#form.api.state.errorMap.onDynamic?.lastName}</p>
+      </div>
+    `
+  }
+}
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  render() {
+    return html`
+      <form
+        @submit=${(e: Event) => {
+          e.preventDefault()
+          e.stopPropagation()
+          this.#form.api.handleSubmit()
+        }}
+      >
+        ${this.#form.field(
+          {
+            name: 'age',
+            validators: {
+              onDynamic: ({ value }) =>
+                value > 18 ? undefined : 'Age must be greater than 18',
+            },
+          },
+          (field) => html`
+            <div>
+              <input
+                type="number"
+                .value=${field.state.value}
+                @input=${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(target.valueAsNumber)
+                }}
+                @blur=${() => field.handleBlur()}
+              />
+              <p style="color: red;">${field.state.meta.errorMap.onDynamic}</p>
+            </div>
+          `,
+        )}
+        <button type="submit">Submit</button>
+      </form>
+    `
+  }
+}
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```ts
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      username: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+      onDynamicAsync: async ({ value }) => {
+        if (!value.username) {
+          return { username: 'Username is required' }
+        }
+        // Simulate an async validation
+        const isValid = await validateUsername(value.username)
+        return isValid ? undefined : { username: 'Username is already taken' }
+      },
+    },
+  })
+}
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```ts
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form'
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: schema,
+    },
+  })
+}
+```
diff --git a/mintlify/form/framework/lit/guides/form-composition.md b/mintlify/form/framework/lit/guides/form-composition.md
new file mode 100644
index 000000000..b87e69079
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/form-composition.md
@@ -0,0 +1,233 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is its verbosity out-of-the-box. While this _can_ be useful for educational purposes — helping enforce understanding our APIs — it's not ideal in production use cases.
+
+This guide covers the patterns that work well in Lit:
+
+- Building reusable field UI as custom elements that accept the `FieldApi` as a property.
+- Splitting big forms across multiple custom elements while keeping the `form` property fully typed via `getFormType`.
+
+## Reusable field components with `AnyFieldApi`
+
+The most direct way to share field UI across multiple forms in Lit is to write a custom element that accepts the `FieldApi` instance as a property. The `AnyFieldApi` type from `@tanstack/lit-form` gives you a "this is some field, I don't care about the exact generics" type that's perfect for that property.
+
+Because the field is a property of the custom element rather than something the element owns, the host needs to subscribe to the field's store so it re-renders when the field's value or metadata change. The `TanStackStoreSelector` reactive controller from [`@tanstack/lit-store`](/store/framework/lit/quick-start) does exactly that.
+
+```ts
+// text-field.ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { TanStackStoreSelector } from '@tanstack/lit-store'
+import type { AnyFieldApi } from '@tanstack/lit-form'
+
+@customElement('text-field')
+export class TextField extends LitElement {
+  @property({ attribute: false })
+  field!: AnyFieldApi
+
+  @property({ type: String })
+  label = ''
+
+  // Re-render whenever this field's store updates.
+  _selector = new TanStackStoreSelector(this, () => this.field?.store)
+
+  render() {
+    return html`
+      <label>
+        <div>${this.label}</div>
+        <input
+          .value=${String(this.field.state.value ?? '')}
+          @blur=${() => this.field.handleBlur()}
+          @input=${(e: Event) =>
+            this.field.handleChange((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      ${this.field.state.meta.isTouched && this.field.state.meta.errors.length
+        ? html`<div style="color: red">
+            ${this.field.state.meta.errors.join(', ')}
+          </div>`
+        : ''}
+    `
+  }
+}
+```
+
+Use it inside the `field` directive's render callback by passing the `field` instance as a property:
+
+```ts
+import { LitElement, html } from 'lit'
+import { TanStackFormController } from '@tanstack/lit-form'
+import './text-field.js'
+
+export class AppForm extends LitElement {
+  form = new TanStackFormController(this, {
+    defaultValues: { firstName: '', lastName: '' },
+  })
+
+  render() {
+    return html`
+      ${this.form.field(
+        { name: 'firstName' },
+        (field) => html`
+          <text-field label="First Name" .field=${field}></text-field>
+        `,
+      )}
+      ${this.form.field(
+        { name: 'lastName' },
+        (field) => html`
+          <text-field label="Last Name" .field=${field}></text-field>
+        `,
+      )}
+    `
+  }
+}
+```
+
+The `field` parameter inside the render callback remains fully typed against the `name` you passed, so `field.state.value` and `field.handleChange` are still type-checked at the call site. `<text-field>` itself uses `AnyFieldApi` internally because it has to accept any field shape.
+
+> If your reusable component only ever wraps fields of a specific value type (for example, only `string` fields), you can narrow the property type with the generic `FieldApi<...>` instead of `AnyFieldApi` — but `AnyFieldApi` is the easiest option to start with and matches how the directive is exposed in render callbacks elsewhere.
+
+> `TanStackStoreSelector` accepts an optional second argument to scope what triggers a re-render — for example, `(snapshot) => snapshot.meta.errors`. Passing nothing re-renders on any change to the field's store, which is the simplest default.
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large. To keep things manageable, you can break a form across multiple custom elements that each receive the `TanStackFormController` as a property.
+
+The challenge is typing that property correctly. Writing the full `TanStackFormController<…>` generics by hand is verbose and error-prone, so `@tanstack/lit-form` provides a `getFormType` helper.
+
+`getFormType` is a type-only utility — it does no work at runtime — that takes the same `FormOptions` you'd pass to `new TanStackFormController(...)` and returns a value whose **type** matches the controller that those options would produce.
+
+```ts
+// shared-form.ts
+import { formOptions } from '@tanstack/lit-form'
+
+export const peopleFormOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+```
+
+Then derive the property type for a child custom element from those shared options. As with reusable field elements, the child element receives the controller as a property and won't re-render automatically when the form's state changes — wire it up with `TanStackStoreSelector` against `form.api.store`:
+
+```ts
+// child-form.ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { TanStackStoreSelector } from '@tanstack/lit-store'
+import { getFormType } from '@tanstack/lit-form'
+import { peopleFormOpts } from './shared-form.js'
+import './text-field.js'
+
+const formType = getFormType(peopleFormOpts)
+
+@customElement('child-form')
+export class ChildForm extends LitElement {
+  @property({ attribute: false })
+  form!: typeof formType
+
+  @property({ type: String })
+  title = 'Child Form'
+
+  // Re-render when the form's state changes.
+  _selector = new TanStackStoreSelector(this, () => this.form?.api.store)
+
+  render() {
+    return html`
+      <p>${this.title}</p>
+      ${this.form.field(
+        { name: 'firstName' },
+        (field) => html`
+          <text-field label="First Name" .field=${field}></text-field>
+        `,
+      )}
+    `
+  }
+}
+```
+
+And use it from the parent element by passing the controller as a property:
+
+```ts
+// app.ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+import { peopleFormOpts } from './shared-form.js'
+import './child-form.js'
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  form = new TanStackFormController(this, peopleFormOpts)
+
+  render() {
+    return html`<child-form .form=${this.form} title="Testing"></child-form>`
+  }
+}
+```
+
+The child element gets a fully typed `form` property — including all of the `field` and `group` directives — without having to spell out the controller's generics by hand or maintain a hand-written type alias.
+
+> `getFormType` only carries types; **never** call its return value at runtime. Use it as `typeof getFormType(opts)` (or assign to a `const` and use `typeof`) and pass the actual controller instance from the parent element via the `.form` property.
+
+## Reusing groups of fields across multiple forms
+
+The same pattern works for sharing a group of related fields (for example, a password + confirm-password pair) across forms. Define a small custom element that takes the `form` as a property typed with `getFormType` — keyed against just the slice of form data the group needs — and renders the relevant `form.field(...)` calls.
+
+```ts
+// password-fields.ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { TanStackStoreSelector } from '@tanstack/lit-store'
+import { formOptions, getFormType } from '@tanstack/lit-form'
+import './text-field.js'
+
+const passwordFormOpts = formOptions({
+  defaultValues: {
+    password: '',
+    confirm_password: '',
+  },
+})
+
+const passwordFormType = getFormType(passwordFormOpts)
+
+@customElement('password-fields')
+export class PasswordFields extends LitElement {
+  @property({ attribute: false })
+  form!: typeof passwordFormType
+
+  _selector = new TanStackStoreSelector(this, () => this.form?.api.store)
+
+  render() {
+    return html`
+      ${this.form.field(
+        { name: 'password' },
+        (field) => html`
+          <text-field label="Password" .field=${field}></text-field>
+        `,
+      )}
+      ${this.form.field(
+        {
+          name: 'confirm_password',
+          validators: {
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) =>
+              value !== fieldApi.form.getFieldValue('password')
+                ? 'Passwords do not match'
+                : undefined,
+          },
+        },
+        (field) => html`
+          <text-field label="Confirm Password" .field=${field}></text-field>
+        `,
+      )}
+    `
+  }
+}
+```
+
+The host form just needs to include the same fields in its own `defaultValues` (TypeScript will check that the `form` property assigned via `.form=${this.form}` is structurally compatible with `passwordFormType`).
diff --git a/mintlify/form/framework/lit/guides/form-groups.md b/mintlify/form/framework/lit/guides/form-groups.md
new file mode 100644
index 000000000..1c8c82dc9
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/form-groups.md
@@ -0,0 +1,236 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `form.group(...)`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll create a `TanStackFormController`, then use its `group` directive like you would use its `field` directive:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  })
+
+  render() {
+    return html`
+      ${this.#form.group({ name: 'step1' }, (group) => {
+        // `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue`
+        // ...
+        return html``
+      })}
+    `
+  }
+}
+```
+
+This becomes much more useful when paired with external state to conditionally render a form group:
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  @state()
+  private step = 0
+
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  })
+
+  render() {
+    return html`
+      ${this.step === 0
+        ? this.#form.group(
+            {
+              name: 'step1',
+              onGroupSubmit: () => {
+                // We can move the step forward when validation passes
+                this.step++
+              },
+              onGroupSubmitInvalid: () => {
+                // Or handle invalid submissions, just like a top-level form
+              },
+              onSubmitMeta: {} as SomeType,
+            },
+            (group) => html`
+              <form
+                @submit=${(e: Event) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  // Use `group.handleSubmit()` to submit the sub-form, but not the parent form
+                  group.handleSubmit()
+                }}
+              >
+                ${this.#form.field(
+                  { name: 'step1.name' },
+                  (field) => html`<!-- ... -->`,
+                )}
+              </form>
+            `,
+          )
+        : nothing}
+      ${this.step === 1
+        ? this.#form.group(
+            {
+              name: 'step2',
+              onGroupSubmit: () => {
+                // Then, use `this.#form.api.handleSubmit()` to submit the entire form
+                this.#form.api.handleSubmit()
+              },
+            },
+            (group) => html`
+              <form
+                @submit=${(e: Event) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  group.handleSubmit()
+                }}
+              >
+                ${this.#form.field(
+                  { name: 'step2.age' },
+                  (field) => html`<!-- ... -->`,
+                )}
+              </form>
+            `,
+          )
+        : nothing}
+    `
+  }
+}
+```
+
+When you split each step into its own custom element, pass the `TanStackFormController` as a property and type it with [`getFormType`](/form/framework/lit/guides/form-composition). Because Lit child elements that receive a controller by property do not automatically re-render when the controller state changes, subscribe to `form.api.store` with `TanStackStoreSelector` in the child element.
+
+## Form Group Validation
+
+Form groups have a distinct validation procedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```ts
+${this.#form.group(
+  { name: 'step1', validators: { onChange: () => 'Error' } },
+  (group) => html`
+    <!-- group.state.meta.errorMap // {onChange: "Error" | undefined} -->
+    <!-- group.state.meta.errors // ("Error")[] -->
+  `,
+)}
+```
+
+- Can set errors on sub-fields:
+
+```ts
+${this.#form.group(
+  {
+    name: 'step1',
+    validators: {
+      onChange: ({ value, groupApi }) => ({
+        group: value.name === 'error' ? 'Group error' : undefined,
+        fields: {
+          // Must use the name of the field relative to the form group as the error key,
+          // to stay consistent with how standard schema works with form groups
+          name: value.name === 'error' ? 'Field error' : undefined,
+        },
+      }),
+    },
+  },
+  (group) => html`<!-- ... -->`,
+)}
+```
+
+- And can even accept standard schemas:
+
+```ts
+${this.#form.group(
+  {
+    name: 'step1',
+    validators: {
+      onChange: z.object({
+        name: z.string().min(2),
+      }),
+    },
+  },
+  (group) => html`<!-- ... -->`,
+)}
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```ts
+> const step1Schema = z.object(&#123;
+>   name: z.string().min(2),
+> &#125;)
+>
+> const schema = z.object(&#123;
+>   step1: step1Schema,
+>   step2: step2Schema,
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/lit/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `TanStackFormController`:
+
+```ts
+#form = new TanStackFormController(this, {
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+})
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the group itself:
+
+```ts
+${this.#form.group(
+  { name: 'step1', validators: { onDynamic: step1Schema } },
+  (group) => html`<!-- ... -->`,
+)}
+```
+
+It will treat `group.submissionAttempts` as the way to change what validator is run before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group.state.meta.errors`, you're also able to access the group's value using `group.state.value`. Likewise, here are some valuable properties you can access in the `group.state.meta`:
+
+- `group.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/lit/guides/validation.md b/mintlify/form/framework/lit/guides/validation.md
new file mode 100644
index 000000000..fefddd358
--- /dev/null
+++ b/mintlify/form/framework/lit/guides/validation.md
@@ -0,0 +1,633 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit...)
+- Validation rules can be defined at the field level or at the form level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `field()` method accepts some callbacks as validators such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`.
+
+Here is an example:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    },
+  },
+  (field) => {
+    return html`
+      <label for="${field.name}">Age:</label>
+      <input
+        id="${field.name}"
+        name="${field.name}"
+        .value="${field.state.value}"
+        type="number"
+        @input="${(e: Event) => {
+          const target = e.target as HTMLInputElement
+          field.handleChange(target.valueAsNumber)
+        }}"
+      />
+      ${!field.state.meta.isValid
+        ? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onBlur: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    },
+  },
+  (field) => {
+    return html`
+      <label for="${field.name}">Age:</label>
+      <input
+        id="${field.name}"
+        name="${field.name}"
+        .value="${field.state.value}"
+        type="number"
+        @blur="${() => field.handleBlur()}"
+        @input="${(e: Event) => {
+          const target = e.target as HTMLInputElement
+          field.handleChange(target.valueAsNumber)
+        }}"
+      />
+      ${!field.state.meta.isValid
+        ? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+      onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+    },
+  },
+  (field) => {
+    return html`
+      <label for="${field.name}">Age:</label>
+      <input
+        id="${field.name}"
+        name="${field.name}"
+        .value="${field.state.value}"
+        type="number"
+        @blur="${() => field.handleBlur()}"
+        @input="${(e: Event) => {
+          const target = e.target as HTMLInputElement
+          field.handleChange(target.valueAsNumber)
+        }}"
+      />
+      ${!field.state.meta.isValid
+        ? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    },
+  },
+  (field) => {
+    return html`
+      <!-- ... -->
+      ${!field.state.meta.isValid
+        ? html`<em>${field.state.meta.errors.join(',')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    },
+  },
+  (field) => {
+    return html`
+      <!-- ... -->
+      ${field.state.meta.errorMap['onChange']
+        ? html`<em>${field.state.meta.errorMap['onChange']}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```ts
+import { html, nothing } from 'lit'
+
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+    },
+  },
+  (field) => {
+    return html`
+      <!-- ... -->
+      <!-- errorMap.onChange is type `{isOldEnough: false} | undefined` -->
+      <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
+      ${!field.state.meta.errorMap['onChange']?.isOldEnough
+        ? html`<em>The user is not old enough</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+## Validation at field level vs at form level
+
+As shown above, each field accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `TanStackFormController` constructor.
+
+Example:
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  })
+
+  render() {
+    return html`
+      <div>
+        <!-- ... -->
+        ${this.#form.api.state.errorMap.onChange
+          ? html`
+              <div>
+                <em
+                  >There was an error on the form:
+                  ${this.#form.api.state.errorMap.onChange}</em
+                >
+              </div>
+            `
+          : nothing}
+        <!-- ... -->
+      </div>
+    `
+  }
+}
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      age: 0,
+      socials: [],
+      details: {
+        email: '',
+      },
+    },
+    validators: {
+      onSubmitAsync: async ({ value }) => {
+        // Validate the value on the server
+        const hasErrors = await verifyDataOnServer(value)
+        if (hasErrors) {
+          return {
+            form: 'Invalid data', // The `form` key is optional
+            fields: {
+              age: 'Must be 13 or older to sign',
+              // Set errors on nested fields with the field's name
+              'socials[0].url': 'The provided URL does not exist',
+              'details.email': 'An email is required',
+            },
+          }
+        }
+
+        return null
+      },
+    },
+  })
+
+  render() {
+    return html`
+      <div>
+        <form
+          @submit="${(e: Event) => {
+            e.preventDefault()
+            e.stopPropagation()
+            this.#form.api.handleSubmit()
+          }}"
+        >
+          ${this.#form.field(
+            { name: 'age' },
+            (field) => html`
+              <label for="${field.name}">Age:</label>
+              <input
+                id="${field.name}"
+                name="${field.name}"
+                .value="${field.state.value}"
+                type="number"
+                @input="${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(target.valueAsNumber)
+                }}"
+              />
+              ${!field.state.meta.isValid
+                ? html`<em role="alert"
+                    >${field.state.meta.errors.join(', ')}</em
+                  >`
+                : nothing}
+            `,
+          )}
+          ${this.#form.api.state.errorMap.onSubmit
+            ? html`
+                <div>
+                  <em
+                    >There was an error on the form:
+                    ${this.#form.api.state.errorMap.onSubmit}</em
+                  >
+                </div>
+              `
+            : nothing}
+          <!--...-->
+        </form>
+      </div>
+    `
+  }
+}
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```ts
+> const form = new TanStackFormController(this, &#123;
+>   defaultValues: &#123;
+>     age: 0,
+>   &#125;,
+>   validators: &#123;
+>     onChange: (&#123; value &#125;) => &#123;
+>       return &#123;
+>         fields: &#123;
+>           age: value.age &lt; 12 ? 'Too young!' : undefined,
+>         &#125;,
+>       &#125;
+>     &#125;,
+>   &#125;,
+> &#125;)
+>
+> // ...
+>
+> return html`
+>   $&#123;this.#form.field(
+>     &#123;
+>       name: 'age',
+>       validators: &#123;
+>         onChange: (&#123; value &#125;) =>
+>           value % 2 === 0 ? 'Must be odd!' : undefined,
+>       &#125;,
+>     &#125;,
+>     () => html``,
+>   )&#125;
+> `
+> ```
+>
+> Will only show `'Must be odd!` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChangeAsync: async ({ value }) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        return value < 13 ? 'You must be 13 to make an account' : undefined
+      },
+    },
+  },
+  (field) => {
+    return html`
+      <label for="${field.name}">Age:</label>
+      <input
+        id="${field.name}"
+        name="${field.name}"
+        .value="${field.state.value}"
+        type="number"
+        @input="${(e: Event) => {
+          const target = e.target as HTMLInputElement
+          field.handleChange(target.valueAsNumber)
+        }}"
+      />
+      ${!field.state.meta.isValid
+        ? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```ts
+import { html, nothing } from 'lit'
+;`${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onBlur: ({ value }) =>
+        value < 13 ? 'You must be at least 13' : undefined,
+      onBlurAsync: async ({ value }) => {
+        const currentAge = await fetchCurrentAgeOnProfile()
+        return value < currentAge ? 'You can only increase the age' : undefined
+      },
+    },
+  },
+  (field) => {
+    return html`
+      <label for="${field.name}">Age:</label>
+      <input
+        id="${field.name}"
+        name="${field.name}"
+        .value="${field.state.value}"
+        type="number"
+        @blur="${() => field.handleBlur()}"
+        @input="${(e: Event) => {
+          const target = e.target as HTMLInputElement
+          field.handleChange(target.valueAsNumber)
+        }}"
+      />
+      ${!field.state.meta.isValid
+        ? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
+        : nothing}
+    `
+  },
+)}`
+```
+
+The synchronous validation method (`onBlur`) is run first and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```ts
+;`${this.#form.field(
+  {
+    name: 'age',
+    asyncDebounceMs: 500,
+    validators: {
+      onChangeAsync: async ({ value }) => {
+        // ...
+      },
+    },
+  },
+  (field) => {
+    return html`<!-- ... -->`
+  },
+)}`
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```ts
+;`${this.#form.field(
+  {
+    name: 'age',
+    asyncDebounceMs: 500,
+    validators: {
+      onChangeAsyncDebounceMs: 1500,
+      onChangeAsync: async ({ value }) => {
+        // ...
+      },
+      onBlurAsync: async ({ value }) => {
+        // ...
+      },
+    },
+  },
+  (field) => {
+    return html`<!-- ... -->`
+  },
+)}`
+```
+
+This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+- [Effect/Schema](https://effect.website/docs/schema/standard-schema/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. Use submission handling (docs pending).
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```ts
+import { z } from 'zod'
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TanStackFormController } from '@tanstack/lit-form'
+
+const userSchema = z.object({
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+@customElement('my-form')
+export class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      age: 0,
+    },
+    validators: {
+      onChange: userSchema,
+    },
+  })
+
+  render() {
+    return html`
+      <div>
+        ${this.#form.field({ name: 'age' }, (field) => {
+          return html`<!-- ... -->`
+        })}
+      </div>
+    `
+  }
+}
+```
+
+Async validations on form and field level are supported as well:
+
+```ts
+import { html } from 'lit'
+import { z } from 'zod'
+
+${this.#form.field(
+  {
+    name: 'age',
+    validators: {
+      onChange: z.number().gte(13, 'You must be 13 to make an account'),
+      onChangeAsyncDebounceMs: 500,
+      onChangeAsync: z.number().refine(
+        async (value) => {
+          const currentAge = await fetchCurrentAgeOnProfile()
+          return value >= currentAge
+        },
+        {
+          message: 'You can only increase the age',
+        },
+      ),
+    },
+  },
+  (field) => {
+    return html`<!-- ... -->`
+  },
+)}
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```ts
+import { html } from 'lit'
+import { z } from 'zod'
+
+${this.#form.field(
+  {
+    name: 'age',
+    asyncDebounceMs: 500,
+    validators: {
+      onChangeAsync: async ({ value, fieldApi }) => {
+        const errors = fieldApi.parseValueWithSchema(
+          z.number().gte(13, 'You must be 13 to make an account'),
+        )
+        if (errors) return errors
+        // continue with your validation
+      },
+    },
+  },
+  (field) => {
+    return html`<!-- ... -->`
+  },
+)}
+```
+
+## Preventing invalid forms from being submitted
+
+The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
+
+The form state object has a `canSubmit` flag that is false when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can access this flag via `this.#form.api.state` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```ts
+class MyForm extends LitElement {
+  #form = new TanStackFormController(this, {
+    /* ... */
+  })
+
+  render() {
+    return html`
+      <!-- ... -->
+
+      <!-- Dynamic submit button -->
+      <button type="submit" ?disabled="${!this.#form.api.state.canSubmit}">
+        ${this.#form.api.state.isSubmitting ? '...' : 'Submit'}
+      </button>
+    `
+  }
+}
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/lit/quick-start.md b/mintlify/form/framework/lit/quick-start.md
new file mode 100644
index 000000000..6bb0bdf74
--- /dev/null
+++ b/mintlify/form/framework/lit/quick-start.md
@@ -0,0 +1,83 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a `TanstackFormController` as seen below with the `Employee` interface for our test form:
+
+```ts
+interface Employee {
+  firstName: string
+  lastName: string
+  employed: boolean
+  jobTitle: string
+}
+
+#form = new TanStackFormController()<Employee>(this, {
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    employed: false,
+    jobTitle: '',
+  },
+})
+```
+
+In this example `this` references the instance of your `LitElement` in which you want to use TanStack Form.
+
+To wire a form element in your template up with TanStack Form, use the `field` method of `TanstackFormController`.
+
+The first parameter of `field` is `FieldOptions` and the second is callback to render your element.
+
+```ts
+field(FieldOptions, callback)
+```
+
+Our completed test form should look something like below. The form collects first name from a user input field:
+
+```ts
+export class TestForm extends LitElement {
+  #form = new TanStackFormController<Employee>(this, {
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      employed: false,
+      jobTitle: '',
+    },
+  })
+  render() {
+    return html` <p>Please enter your first name</p>
+      ${this.#form.field(
+        {
+          name: `firstName`,
+          validators: {
+            onChange: ({ value }) =>
+              value.length < 3 ? 'Not long enough' : undefined,
+          },
+        },
+        (field: FieldApi<Employee, 'firstName'>) => {
+          return html` <div>
+            <label class="first-name-label">First Name</label>
+            <input
+              id="firstName"
+              type="text"
+              placeholder="First Name"
+              @blur="${() => field.handleBlur()}"
+              .value="${field.state.value}"
+              @input="${(event: InputEvent) => {
+                if (event.currentTarget) {
+                  const newValue = (event.currentTarget as HTMLInputElement)
+                    .value
+                  field.handleChange(newValue)
+                }
+              }}"
+            />
+          </div>`
+        },
+      )}`
+  }
+}
+```
+
+Be aware that you need
+to handle updating the element and form yourself as seen in the example above.
diff --git a/mintlify/form/framework/lit/reference/classes/TanStackFormController.md b/mintlify/form/framework/lit/reference/classes/TanStackFormController.md
new file mode 100644
index 000000000..437457d75
--- /dev/null
+++ b/mintlify/form/framework/lit/reference/classes/TanStackFormController.md
@@ -0,0 +1,321 @@
+---
+id: TanStackFormController
+title: TanStackFormController
+---
+
+# Class: TanStackFormController\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [tanstack-form-controller.ts:226](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L226)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new TanStackFormController<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(host, config?): TanStackFormController<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [tanstack-form-controller.ts:255](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L255)
+
+#### Parameters
+
+##### host
+
+`ReactiveControllerHost`
+
+##### config?
+
+`FormOptions`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`TanStackFormController`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Properties
+
+### api
+
+```ts
+api: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [tanstack-form-controller.ts:240](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L240)
+
+## Methods
+
+### field()
+
+```ts
+field<TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>(fieldConfig, render): object;
+```
+
+Defined in: [tanstack-form-controller.ts:300](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L300)
+
+#### Type Parameters
+
+##### TName
+
+`TName` *extends* `string`
+
+##### TData
+
+`TData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+#### Parameters
+
+##### fieldConfig
+
+`FieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+##### render
+
+`renderCallback`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`object`
+
+##### values
+
+```ts
+values: object;
+```
+
+###### values.form
+
+```ts
+form: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+###### values.options
+
+```ts
+options: FieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+###### values.render
+
+```ts
+render: renderCallback<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+***
+
+### group()
+
+```ts
+group<TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TGroupSubmitMeta>(groupConfig, render): unknown;
+```
+
+Defined in: [tanstack-form-controller.ts:390](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L390)
+
+#### Type Parameters
+
+##### TName
+
+`TName` *extends* `string`
+
+##### TData
+
+`TData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+##### TGroupSubmitMeta
+
+`TGroupSubmitMeta`
+
+#### Parameters
+
+##### groupConfig
+
+`Omit`\&lt;`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TGroupSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>, `"form"`\>
+
+##### render
+
+`groupRenderCallback`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TGroupSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`unknown`
+
+***
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [tanstack-form-controller.ts:296](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L296)
+
+Called when the host is connected to the component tree. For custom
+element hosts, this corresponds to the `connectedCallback()` lifecycle,
+which is only called when the component is connected to the document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [tanstack-form-controller.ts:298](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L298)
+
+Called when the host is disconnected from the component tree. For custom
+element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
+which is called the host or an ancestor component is disconnected from the
+document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/form/framework/lit/reference/functions/getFormType.md b/mintlify/form/framework/lit/reference/functions/getFormType.md
new file mode 100644
index 000000000..a13b719cf
--- /dev/null
+++ b/mintlify/form/framework/lit/reference/functions/getFormType.md
@@ -0,0 +1,107 @@
+---
+id: getFormType
+title: getFormType
+---
+
+# Function: getFormType()
+
+```ts
+function getFormType<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_formOptions): TanStackFormController<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [getFormType.ts:43](https://github.com/TanStack/form/blob/main/packages/lit-form/src/getFormType.ts#L43)
+
+A type-only helper that returns a value whose type matches the
+`TanStackFormController` instance that would be produced for the given
+`FormOptions`. It does not run any logic at runtime.
+
+Use this together with shared `formOptions` to derive the expected
+controller type for a `form` property on a child Lit element, without
+having to spell out all of `TanStackFormController`'s generics by hand.
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### \_formOptions
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+[`TanStackFormController`](/form/framework/lit/reference/classes/TanStackFormController)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Example
+
+```ts
+import { formOptions, getFormType } from '@tanstack/lit-form'
+
+export const peopleFormOpts = formOptions({
+  defaultValues: { firstName: '', lastName: '' },
+})
+
+// In a child element:
+class ChildForm extends LitElement {
+  @property({ attribute: false })
+  form!: ReturnType<typeof getFormType<typeof peopleFormOpts.defaultValues, ...>>
+}
+```
+
+Most users will pass `formOptions` directly:
+
+```ts
+const formType = getFormType(peopleFormOpts)
+
+class ChildForm extends LitElement {
+  @property({ attribute: false })
+  form!: typeof formType
+}
+```
diff --git a/mintlify/form/framework/lit/reference/index.md b/mintlify/form/framework/lit/reference/index.md
new file mode 100644
index 000000000..5144eb025
--- /dev/null
+++ b/mintlify/form/framework/lit/reference/index.md
@@ -0,0 +1,14 @@
+---
+id: "@tanstack/lit-form"
+title: "@tanstack/lit-form"
+---
+
+# @tanstack/lit-form
+
+## Classes
+
+- [TanStackFormController](/form/framework/lit/reference/classes/TanStackFormController)
+
+## Functions
+
+- [getFormType](/form/framework/lit/reference/functions/getFormType)
diff --git a/mintlify/form/framework/preact/examples/multi-step-wizard.md b/mintlify/form/framework/preact/examples/multi-step-wizard.md
new file mode 100644
index 000000000..247c5dc40
--- /dev/null
+++ b/mintlify/form/framework/preact/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/preact/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/preact/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/preact/examples/simple.md b/mintlify/form/framework/preact/examples/simple.md
new file mode 100644
index 000000000..3cb4f61a7
--- /dev/null
+++ b/mintlify/form/framework/preact/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/preact/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/preact/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/preact/guides/arrays.md b/mintlify/form/framework/preact/guides/arrays.md
new file mode 100644
index 000000000..499a2000e
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/arrays.md
@@ -0,0 +1,124 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value:
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+  })
+
+  return (
+    <form.Field name="people" mode="array">
+      {(field) => (
+        <div>
+          {field.state.value.map((_, i) => {
+            // ...
+          })}
+        </div>
+      )}
+    </form.Field>
+  )
+}
+```
+
+This will generate the mapped JSX every time you run `pushValue` on `field`:
+
+```jsx
+<button onClick={() => field.pushValue({ name: '', age: 0 })} type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```jsx
+<form.Field key={i} name={`people[${i}].name`}>
+  {(subField) => (
+    <input
+      value={subField.state.value}
+      onInput={(e) => subField.handleChange(e.target.value)}
+    />
+  )}
+</form.Field>
+```
+
+## Full Example
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.Field name="people" mode="array">
+          {(field) => {
+            return (
+              <div>
+                {field.state.value.map((_, i) => {
+                  return (
+                    <form.Field key={i} name={`people[${i}].name`}>
+                      {(subField) => {
+                        return (
+                          <div>
+                            <label>
+                              <div>Name for person {i}</div>
+                              <input
+                                value={subField.state.value}
+                                onInput={(e) =>
+                                  subField.handleChange(e.target.value)
+                                }
+                              />
+                            </label>
+                          </div>
+                        )
+                      }}
+                    </form.Field>
+                  )
+                })}
+                <button
+                  onClick={() => field.pushValue({ name: '', age: 0 })}
+                  type="button"
+                >
+                  Add person
+                </button>
+              </div>
+            )
+          }}
+        </form.Field>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <button type="submit" disabled={!canSubmit}>
+              {isSubmitting ? '...' : 'Submit'}
+            </button>
+          )}
+        />
+      </form>
+    </div>
+  )
+}
+```
diff --git a/mintlify/form/framework/preact/guides/async-initial-values.md b/mintlify/form/framework/preact/guides/async-initial-values.md
new file mode 100644
index 000000000..6ebf4ae06
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/async-initial-values.md
@@ -0,0 +1,51 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```tsx
+import { useForm } from '@tanstack/preact-form'
+import { useQuery } from '@tanstack/react-query'
+
+export default function App() {
+  const {data, isLoading} = useQuery({
+    queryKey: ['data'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return {firstName: 'FirstName', lastName: "LastName"}
+    }
+  })
+
+  const form = useForm({
+    defaultValues: {
+      firstName: data?.firstName ?? '',
+      lastName: data?.lastName ?? '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  if (isLoading) return <p>Loading...</p>
+
+  return (
+    // ...
+  )
+}
+```
+
+This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values.
diff --git a/mintlify/form/framework/preact/guides/basic-concepts.md b/mintlify/form/framework/preact/guides/basic-concepts.md
new file mode 100644
index 000000000..39cbac2f3
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/basic-concepts.md
@@ -0,0 +1,402 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/preact-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Options
+
+You can customize your form by creating configuration options with the `formOptions` function. These options can be shared between multiple forms.
+
+Example:
+
+```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
+const formOpts = formOptions({
+  defaultValues: defaultUser,
+})
+```
+
+## Form Instance
+
+A Form instance is an object that represents an individual form and provides methods and properties for working with the form. You create a Form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```tsx
+const form = useForm({
+  ...formOpts,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+You may also create a Form instance without using `formOptions` by using the standalone `useForm` API:
+
+```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
+const form = useForm({
+  defaultValues: defaultUser,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the Form instance. The component accepts a `name` prop, which should match a key in the form's default values. It also accepts a `children` prop, which is a render prop function that takes a `field` object as its argument.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  children={(field) => (
+    <>
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onInput={(e) => field.handleChange(e.target.value)}
+      />
+      <FieldInfo field={field} />
+    </>
+  )}
+/>
+```
+
+If you run into issues handling `children` as props, make sure to check your linting rules.
+
+Example (ESLint):
+
+```json
+  "rules": {
+    "react/no-children-prop": [
+      true,
+      {
+        "allowFunctions": true
+      }
+    ],
+  }
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field.state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful for seeing how the user interacts with a field:
+
+- **isTouched**: is `true` once the user changes or blurs the field
+- **isDirty**: is `true` once the field's value is changed, even if it's reverted to the default. Opposite of `isPristine`
+- **isPristine**: is `true` until the user changes the field's value. Opposite of `isDirty`
+- **isBlurred**: is `true` once the field loses focus (is blurred)
+- **isDefaultValue**: is `true` when the field's current value is the default value
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. However, we have introduced the `isDefaultValue` flag to also support a non-persistent 'dirty' state.
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
+
+Example:
+
+```tsx
+<input
+  value={field.state.value}
+  onBlur={field.handleBlur}
+  onInput={(e) => field.handleChange(e.target.value)}
+/>
+```
+
+## Validation
+
+`@tanstack/preact-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  validators={{
+    onChange: ({ value }) =>
+      !value
+        ? 'A first name is required'
+        : value.length < 3
+          ? 'First name must be at least 3 characters'
+          : undefined,
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value.includes('error') && 'No "error" allowed in first name'
+    },
+  }}
+  children={(field) => (
+    <>
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onInput={(e) => field.handleChange(e.target.value)}
+      />
+      <FieldInfo field={field} />
+    </>
+  )}
+/>
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+```tsx
+import { z } from 'zod'
+
+const userSchema = z.object({
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    validators: {
+      onChange: userSchema,
+    },
+  })
+  return (
+    <div>
+      <form.Field
+        name="age"
+        children={(field) => {
+          return <>{/* ... */}</>
+        }}
+      />
+    </div>
+  )
+}
+```
+
+## Reactivity
+
+`@tanstack/preact-form` offers various ways to subscribe to form and field state changes, most notably the `useStore(form.store)` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+
+Example:
+
+```tsx
+const firstName = useStore(form.store, (state) => state.values.firstName)
+//...
+<form.Subscribe
+  selector={(state) => [state.canSubmit, state.isSubmitting]}
+  children={([canSubmit, isSubmitting]) => (
+    <button type="submit" disabled={!canSubmit}>
+      {isSubmitting ? '...' : 'Submit'}
+    </button>
+  )}
+/>
+```
+
+It is important to remember that while the `useStore` hook's `selector` prop is optional, it is strongly recommended to provide one, as omitting it will result in unnecessary re-renders.
+
+```tsx
+// Correct use
+const firstName = useStore(form.store, (state) => state.values.firstName)
+const errors = useStore(form.store, (state) => state.errorMap)
+// Incorrect use
+const store = useStore(form.store)
+```
+
+Note: The usage of the `useField` hook to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `useStore(form.store)` instead.
+
+## Listeners
+
+`@tanstack/preact-form` allows you to react to specific triggers and "listen" to them to dispatch side effects.
+
+Example:
+
+```tsx
+<form.Field
+  name="country"
+  listeners={{
+    onChange: ({ value }) => {
+      console.log(`Country changed to: ${value}, resetting province`)
+      form.setFieldValue('province', '')
+    },
+  }}
+/>
+```
+
+More information can be found at [Listeners](/form/framework/preact/guides/listeners)
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
+
+When working with array fields, you can use the `pushValue`, `removeValue`, `swapValues`, and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```tsx
+<form.Field
+  name="hobbies"
+  mode="array"
+  children={(hobbiesField) => (
+    <div>
+      Hobbies
+      <div>
+        {!hobbiesField.state.value.length
+          ? 'No hobbies found.'
+          : hobbiesField.state.value.map((_, i) => (
+              <div key={i}>
+                <form.Field
+                  name={`hobbies[${i}].name`}
+                  children={(field) => {
+                    return (
+                      <div>
+                        <label htmlFor={field.name}>Name:</label>
+                        <input
+                          id={field.name}
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onInput={(e) => field.handleChange(e.target.value)}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => hobbiesField.removeValue(i)}
+                        >
+                          X
+                        </button>
+                        <FieldInfo field={field} />
+                      </div>
+                    )
+                  }}
+                />
+                <form.Field
+                  name={`hobbies[${i}].description`}
+                  children={(field) => {
+                    return (
+                      <div>
+                        <label htmlFor={field.name}>Description:</label>
+                        <input
+                          id={field.name}
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onInput={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldInfo field={field} />
+                      </div>
+                    )
+                  }}
+                />
+              </div>
+            ))}
+      </div>
+      <button
+        type="button"
+        onClick={() =>
+          hobbiesField.pushValue({
+            name: '',
+            description: '',
+            yearsOfExperience: 0,
+          })
+        }
+      >
+        Add hobby
+      </button>
+    </div>
+  )}
+/>
+```
+
+## Reset Buttons
+
+When using `<button type="reset">` with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
+Use `event.preventDefault()` inside the button's `onClick` handler to prevent the native form reset.
+
+Example:
+
+```tsx
+<button
+  type="reset"
+  onClick={(event) => {
+    event.preventDefault()
+    form.reset()
+  }}
+>
+  Reset
+</button>
+```
+
+Alternatively, you can use `<button type="button">` to prevent the native HTML reset.
+
+```tsx
+<button
+  type="button"
+  onClick={() => {
+    form.reset()
+  }}
+>
+  Reset
+</button>
+```
+
+These are the basic concepts and terminology used in the `@tanstack/preact-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/preact/guides/custom-errors.md b/mintlify/form/framework/preact/guides/custom-errors.md
new file mode 100644
index 000000000..3a78ae528
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/custom-errors.md
@@ -0,0 +1,277 @@
+---
+id: custom-errors
+title: Custom Errors
+---
+
+TanStack Form provides complete flexibility in the types of error values you can return from validators. String errors are the most common and easy to work with, but the library allows you to return any type of value from your validators.
+
+As a general rule, any truthy value is considered an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc.) mean there is no error, and the form or field is valid.
+
+## Return String Values from Forms
+
+```tsx
+<form.Field
+  name="username"
+  validators={{
+    onChange: ({ value }) =>
+      value.length < 3 ? 'Username must be at least 3 characters' : undefined,
+  }}
+/>
+```
+
+For form-level validation affecting multiple fields:
+
+```tsx
+const form = useForm({
+  defaultValues: {
+    username: '',
+    email: '',
+  },
+  validators: {
+    onChange: ({ value }) => {
+      return {
+        fields: {
+          username:
+            value.username.length < 3 ? 'Username too short' : undefined,
+          email: !value.email.includes('@') ? 'Invalid email' : undefined,
+        },
+      }
+    },
+  },
+})
+```
+
+String errors are the most common type and are easily displayed in your UI:
+
+```tsx
+{
+  field.state.meta.errors.map((error, i) => (
+    <div key={i} className="error">
+      {error}
+    </div>
+  ))
+}
+```
+
+### Numbers
+
+Useful for representing quantities, thresholds, or magnitudes:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 18 ? 18 - value : undefined),
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+// TypeScript knows the error is a number based on your validator
+<div className="error">
+  You need {field.state.meta.errors[0]} more years to be eligible
+</div>
+```
+
+### Booleans
+
+Simple flags to indicate error state:
+
+```tsx
+<form.Field
+  name="accepted"
+  validators={{
+    onChange: ({ value }) => (!value ? true : undefined),
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  field.state.meta.errors[0] === true && (
+    <div className="error">You must accept the terms</div>
+  )
+}
+```
+
+### Objects
+
+Rich error objects with multiple properties:
+
+```tsx
+<form.Field
+  name="email"
+  validators={{
+    onChange: ({ value }) => {
+      if (!value.includes('@')) {
+        return {
+          message: 'Invalid email format',
+          severity: 'error',
+          code: 1001,
+        }
+      }
+      return undefined
+    },
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  typeof field.state.meta.errors[0] === 'object' && (
+    <div className={`error ${field.state.meta.errors[0].severity}`}>
+      {field.state.meta.errors[0].message}
+      <small> (Code: {field.state.meta.errors[0].code})</small>
+    </div>
+  )
+}
+```
+
+In the example above, the rendered message, code and styling depend on the event error you want to display.
+
+### Arrays
+
+Multiple error messages for a single field:
+
+```tsx
+<form.Field
+  name="password"
+  validators={{
+    onChange: ({ value }) => {
+      const errors = []
+      if (value.length < 8) errors.push('Password too short')
+      if (!/[A-Z]/.test(value)) errors.push('Missing uppercase letter')
+      if (!/[0-9]/.test(value)) errors.push('Missing number')
+
+      return errors.length ? errors : undefined
+    },
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  Array.isArray(field.state.meta.errors) && (
+    <ul className="error-list">
+      {field.state.meta.errors.map((err, i) => (
+        <li key={i}>{err}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+## The `disableErrorFlat` Prop on Fields
+
+By default, TanStack Form flattens errors from all validation sources (`onChange`, `onBlur`, `onSubmit`) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
+
+```tsx
+<form.Field
+  name="email"
+  disableErrorFlat
+  validators={{
+    onChange: ({ value }) =>
+      !value.includes('@') ? 'Invalid email format' : undefined,
+    onBlur: ({ value }) =>
+      !value.endsWith('.com') ? 'Only .com domains allowed' : undefined,
+    onSubmit: ({ value }) => (value.length < 5 ? 'Email too short' : undefined),
+  }}
+/>
+```
+
+Without `disableErrorFlat`, all errors would be combined into `field.state.meta.errors`. With it, you can access errors by their source:
+
+```tsx
+{
+  field.state.meta.errorMap.onChange && (
+    <div className="real-time-error">{field.state.meta.errorMap.onChange}</div>
+  )
+}
+
+{
+  field.state.meta.errorMap.onBlur && (
+    <div className="blur-feedback">{field.state.meta.errorMap.onBlur}</div>
+  )
+}
+
+{
+  field.state.meta.errorMap.onSubmit && (
+    <div className="submit-error">{field.state.meta.errorMap.onSubmit}</div>
+  )
+}
+```
+
+This is useful for:
+
+- Displaying different types of errors with different UI treatments
+- Prioritizing errors (e.g., showing submission errors more prominently)
+- Implementing progressive disclosure of errors
+
+## Type Safety of `errors` and `errorMap`
+
+TanStack Form provides strong type safety for error handling. Each key in the `errorMap` has exactly the type returned by its corresponding validator, while the `errors` array contains a union type of all the possible error values from all validators:
+
+```tsx
+<form.Field
+  name="password"
+  validators={{
+    onChange: ({ value }) => {
+      // This returns a string or undefined
+      return value.length < 8 ? 'Too short' : undefined
+    },
+    onBlur: ({ value }) => {
+      // This returns an object or undefined
+      if (!/[A-Z]/.test(value)) {
+        return { message: 'Missing uppercase', level: 'warning' }
+      }
+      return undefined
+    },
+  }}
+  children={(field) => {
+    // TypeScript knows that errors[0] can be string | { message: string, level: string } | undefined
+    const error = field.state.meta.errors[0]
+
+    // Type-safe error handling
+    if (typeof error === 'string') {
+      return <div className="string-error">{error}</div>
+    } else if (error && typeof error === 'object') {
+      return <div className={error.level}>{error.message}</div>
+    }
+
+    return null
+  }}
+/>
+```
+
+The `errorMap` property is also fully typed, matching the return types of your validation functions:
+
+```tsx
+// With disableErrorFlat
+<form.Field
+  name="email"
+  disableErrorFlat
+  validators={{
+    onChange: ({ value }): string | undefined =>
+      !value.includes("@") ? "Invalid email" : undefined,
+    onBlur: ({ value }): { code: number, message: string } | undefined =>
+      !value.endsWith(".com") ? { code: 100, message: "Wrong domain" } : undefined
+  }}
+  children={(field) => {
+    // TypeScript knows the exact type of each error source
+    const onChangeError: string | undefined = field.state.meta.errorMap.onChange;
+    const onBlurError: { code: number, message: string } | undefined = field.state.meta.errorMap.onBlur;
+
+    return (/* ... */);
+  }}
+/>
+```
+
+This type safety helps catch errors at compile time instead of runtime, making your code more reliable and maintainable.
diff --git a/mintlify/form/framework/preact/guides/debugging.md b/mintlify/form/framework/preact/guides/debugging.md
new file mode 100644
index 000000000..a8815ef6f
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/debugging.md
@@ -0,0 +1,43 @@
+---
+id: debugging
+title: Debugging Preact Usage
+---
+
+Here's a list of common errors you might see in the console and how to fix them.
+
+## Changing an uncontrolled input to be controlled
+
+If you see this error in the console:
+
+```
+Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
+```
+
+It's likely you forgot the `defaultValues` in your `useForm` Hook or `form.Field` component usage. This is occurring
+because the input is being rendered before the form value is initialized and is therefore changing from `undefined` to `""` when a text input is made.
+
+## Field value is of type `unknown`
+
+If you're using `form.Field` and, upon inspecting the value of `field.state.value`, you see that the value of a field is of type `unknown`, it's likely that your form's type was too large for us to safely evaluate.
+
+This typically is a sign that you should break down your form into smaller forms or use a more specific type for your form.
+
+A workaround to this problem is to cast `field.state.value` using TypeScript's `as` keyword:
+
+```tsx
+const value = field.state.value as string
+```
+
+## `Type instantiation is excessively deep and possibly infinite`
+
+If you see this error in the console when running `tsc`:
+
+```
+Type instantiation is excessively deep and possibly infinite
+```
+
+You've run into a bug that we didn't catch in our type definitions. While we've done our best to make sure our types are as accurate as possible, there are some edge cases where TypeScript struggled with the complexity of our types.
+
+Please [report this issue to us on GitHub](https://github.com/TanStack/form/issues) so we can fix it. Just make sure to include a minimal reproduction so that we're able to help you debug.
+
+> Keep in mind that this error is a TypeScript error and not a runtime error. This means that your code will still run on the user's machine as expected.
diff --git a/mintlify/form/framework/preact/guides/dynamic-validation.md b/mintlify/form/framework/preact/guides/dynamic-validation.md
new file mode 100644
index 000000000..619334a9b
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/dynamic-validation.md
@@ -0,0 +1,225 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```tsx
+import { revalidateLogic, useForm } from '@tanstack/preact-form'
+
+// ...
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  // If this is omitted, `onDynamic` will not be called
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+})
+```
+
+> [!IMPORTANT]
+> By default, `onDynamic` is not called; therefore you must pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and to change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```tsx
+const form = useForm({
+  // ...
+  validationLogic: revalidateLogic({
+    mode: 'submit',
+    modeAfterSubmission: 'blur',
+  }),
+  // ...
+})
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+
+```tsx
+function App() {
+  const form = useForm({
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  return <p>{form.state.errorMap.onDynamic?.firstName}</p>
+}
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```tsx
+import { revalidateLogic, useForm } from '@tanstack/preact-form'
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  return (
+    <div>
+      <p>{form.state.errorMap.onChange?.firstName}</p>
+      <p>{form.state.errorMap.onDynamic?.lastName}</p>
+    </div>
+  )
+}
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name={'age'}
+        validators={{
+          onDynamic: ({ value }) =>
+            value > 18 ? undefined : 'Age must be greater than 18',
+        }}
+        children={(field) => (
+          <div>
+            <input
+              type="number"
+              onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+              onBlur={field.handleBlur}
+              value={field.state.value}
+            />
+            <p style={{ color: 'red' }}>
+              {field.state.meta.errorMap.onDynamic}
+            </p>
+          </div>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamicAsync` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```tsx
+const form = useForm({
+  defaultValues: {
+    username: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+    onDynamicAsync: async ({ value }) => {
+      if (!value.username) {
+        return { username: 'Username is required' }
+      }
+      // Simulate an async validation
+      const isValid = await validateUsername(value.username)
+      return isValid ? undefined : { username: 'Username is already taken' }
+    },
+  },
+})
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```tsx
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: schema,
+  },
+})
+```
diff --git a/mintlify/form/framework/preact/guides/focus-management.md b/mintlify/form/framework/preact/guides/focus-management.md
new file mode 100644
index 000000000..9d92cea27
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/focus-management.md
@@ -0,0 +1,142 @@
+---
+id: focus-management
+title: Focus Management
+---
+
+In some instances, you may want to focus the first input with an error.
+
+[Because TanStack Form intentionally does not have insights into your markup](/form/philosophy), we cannot add a built-in focus management feature.
+
+However, you can easily add this feature into your application without this hypothetical built-in feature.
+
+## DOM
+
+```tsx
+import { useForm } from '@tanstack/preact-form'
+import { z } from 'zod'
+
+export default function App() {
+  const form = useForm({
+    defaultValues: { age: 0 },
+    validators: {
+      onChange: z.object({
+        age: z.number().min(12),
+      }),
+    },
+    onSubmit() {
+      alert('Submitted!')
+    },
+    onSubmitInvalid() {
+      const InvalidInput = document.querySelector(
+        '[aria-invalid="true"]',
+      ) as HTMLInputElement
+
+      InvalidInput?.focus()
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        void form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="age"
+        children={(field) => (
+          <label>
+            Age
+            <input
+              name={field.name}
+              value={field.state.value}
+              aria-invalid={
+                !field.state.meta.isValid && field.state.meta.isTouched
+              }
+              onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+              type="number"
+            />
+          </label>
+        )}
+      />
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    </form>
+  )
+}
+```
+
+## React Native (via compat)
+
+Because React Native doesn't have access to the DOM's `querySelectorAll` API, we need to manually manage the element list
+of the inputs. This allows us to focus the first input with an error:
+
+```tsx
+import { useRef } from 'preact/hooks'
+import { Text, View, TextInput, Button, Alert } from 'react-native'
+import { useForm } from '@tanstack/preact-form'
+import { z } from 'zod'
+
+export default function App() {
+  // This can be extracted to a hook that returns the `fields` ref, a `focusFirstField` function, and a `addField` function
+  const fields = useRef([] as Array<{ input: TextInput; name: string }>)
+
+  const form = useForm({
+    defaultValues: { age: 0 },
+    validators: {
+      onChange: z.object({
+        age: z.number().min(12),
+      }),
+    },
+    onSubmit() {
+      Alert.alert('Submitted!')
+    },
+    onSubmitInvalid({ formApi }) {
+      const errorMap = formApi.state.errorMap.onChange
+      const inputs = fields.current
+
+      let firstInput
+      for (const input of inputs) {
+        if (!input || !input.input) continue
+        if (!!errorMap[input.name]) {
+          firstInput = input.input
+          break
+        }
+      }
+      firstInput?.focus()
+    },
+  })
+
+  return (
+    <View style={{ padding: 16 }}>
+      <form.Field
+        name="age"
+        children={(field) => (
+          <View style={{ marginVertical: 16 }}>
+            <Text>Age</Text>
+            <TextInput
+              keyboardType="numeric"
+              ref={(input) => {
+                // fields.current needs to be manually incremented so that we know what fields are rendered or not and in what order
+                fields.current[0] = { input, name: field.name }
+              }}
+              style={{
+                borderWidth: 1,
+                borderColor: '#999999',
+                borderRadius: 4,
+                marginTop: 8,
+                padding: 8,
+              }}
+              onChangeText={(val) => field.handleChange(Number(val))}
+              value={field.state.value}
+            />
+          </View>
+        )}
+      />
+      <Button title="Submit" onPress={form.handleSubmit} />
+    </View>
+  )
+}
+```
diff --git a/mintlify/form/framework/preact/guides/form-composition.md b/mintlify/form/framework/preact/guides/form-composition.md
new file mode 100644
index 000000000..bcb7178e7
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/form-composition.md
@@ -0,0 +1,692 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is that it is verbose out-of-the-box. While this verbosity _can_ be useful for educational purposes - helping to enforce understanding of our APIs - it's not ideal in production use cases.
+
+As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
+
+## Custom Form Hooks
+
+The most powerful way to compose forms is to create custom form hooks. This allows you to create a form hook that is tailored to your application's needs, including pre-bound custom UI components and more.
+
+At it's most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook.
+
+> This un-customized `useAppForm` hook is identical to `useForm`, but that will quickly change as we add more options to `createFormHook`.
+
+```tsx
+import { createFormHookContexts, createFormHook } from '@tanstack/preact-form'
+
+// export useFieldContext for use in your custom components
+export const { fieldContext, formContext, useFieldContext } =
+  createFormHookContexts()
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  // We'll learn more about these options later
+  fieldComponents: {},
+  formComponents: {},
+})
+
+function App() {
+  const form = useAppForm({
+    // Supports all useForm options
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return <form.Field /> // ...
+}
+```
+
+### Pre-bound Field Components
+
+Once this scaffolding is in place, you can start adding custom field and form components to your form hook.
+
+> Note: the `useFieldContext` must be the same one exported from your custom form context
+
+```tsx
+import { useFieldContext } from './form-context.tsx'
+
+export function TextField({ label }: { label: string }) {
+  // The `Field` infers that it should have a `value` type of `string`
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onInput={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+You're then able to register this component with your form hook.
+
+```tsx
+import { TextField } from './text-field.tsx'
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+And use it in your form:
+
+```tsx
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return (
+    // Notice the `AppField` instead of `Field`; `AppField` provides the required context
+    <form.AppField
+      name="firstName"
+      children={(field) => <field.TextField label="First Name" />}
+    />
+  )
+}
+```
+
+This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Mistyping `name` will result in a TypeScript error.
+
+#### A note on performance
+
+While context is a valuable tool in the React ecosystem, there's appropriate concern from many users that providing a reactive value through a context will cause unnecessary re-renders.
+
+> Unfamiliar with this performance concern? [Mark Erikson's blog post explaining why Redux solves many of these problems](https://blog.isquaredsoftware.com/2021/01/context-redux-differences/) is a great place to start.
+
+While this is a good concern to call out, it's not a problem for TanStack Form; the values provided through context are not reactive themselves, but instead are static class instances with reactive properties ([using TanStack Store as our signals implementation to power the show](https://tanstack.com/store)).
+
+### Pre-bound Form Components
+
+While `form.AppField` solves many of the problems with Field boilerplate and reusability, it doesn't solve the problem of _form_ boilerplate and reusability.
+
+In particular, being able to share instances of `form.Subscribe` for, say, a reactive form submission button is a common usecase.
+
+```tsx
+function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button type="submit" disabled={isSubmitting}>
+          {label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {},
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return (
+    <form.AppForm>
+      // Notice the `AppForm` component wrapper; `AppForm` provides the required
+      context
+      <form.SubscribeButton label="Submit" />
+    </form.AppForm>
+  )
+}
+```
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code in single files.
+
+To solve this, we support breaking forms into smaller pieces using the `withForm` higher-order component.
+
+```tsx
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+const ChildForm = withForm({
+  // These values are only used for type-checking, and are not used at runtime
+  // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These props are also set as default values for the `render` function
+    title: 'Child Form',
+  },
+  render: function Render({ form, title }) {
+    return (
+      <div>
+        <p>{title}</p>
+        <form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <form.AppForm>
+          <form.SubscribeButton label="Submit" />
+        </form.AppForm>
+      </div>
+    )
+  },
+})
+
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+### `withForm` FAQ
+
+> Why a higher-order component instead of a hook?
+
+While hooks are the future of React, higher-order components are still a powerful tool for composition. In particular, the API of `withForm` enables us to have strong type-safety without requiring users to pass generics.
+
+> Why am I getting ESLint errors about hooks in `render`?
+
+ESLint looks for hooks in the top-level of a function, and `render` may not be recogized as a top-level component, depending on how you defined it.
+
+```tsx
+// This will cause ESLint errors with hooks usage
+const ChildForm = withForm({
+  // ...
+  render: ({ form, title }) => {
+    // ...
+  },
+})
+```
+
+```tsx
+// This works fine
+const ChildForm = withForm({
+  // ...
+  render: function Render({ form, title }) {
+    // ...
+  },
+})
+```
+
+### Context as a last resort
+
+There are cases where passing `form` with `withForm` is not feasible. You may encounter it with components that don't
+allow you to change their props.
+
+For example, consider the following TanStack Router usage:
+
+```ts
+function RouteComponent() {
+  const form = useAppForm({...formOptions, /* ... */ })
+  // <Outlet /> cannot be customized or receive additional props
+  return <Outlet />
+}
+```
+
+In edge cases like this, a context-based fallback is available to access the form instance.
+
+```ts
+const { useAppForm, useTypedAppFormContext } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {},
+  formComponents: {},
+})
+```
+
+> [!IMPORTANT] Type safety
+> This mechanism exists solely to bridge integration constraints and should be avoided whenever `withForm` is possible.
+> Context will not warn you when the types do not align. You risk runtime errors with this implementation.
+
+Usage:
+
+```tsx
+// sharedOpts.ts
+const formOpts = formOptions({
+  /* ... */
+})
+
+function ParentComponent() {
+  const form = useAppForm({ ...formOptions /* ... */ })
+
+  return (
+    <form.AppForm>
+      <ChildComponent />
+    </form.AppForm>
+  )
+}
+
+function ChildComponent() {
+  const form = useTypedAppFormContext({ ...formOptions })
+
+  // You now have access to form components, field components and fields
+}
+```
+
+## Reusing groups of fields in multiple forms
+
+Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](/form/framework/preact/guides/linked-fields). Instead of repeating this logic across multiple forms, you can utilize the `withFieldGroup` higher-order component.
+
+> Unlike `withForm`, validators cannot be specified and could be any value.
+> Ensure that your fields can accept unknown error types.
+
+Rewriting the passwords example using `withFieldGroup` would look like this:
+
+```tsx
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+    ErrorInfo,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+type PasswordFields = {
+  password: string
+  confirm_password: string
+}
+
+// These default values are not used at runtime, but the keys are needed for mapping purposes.
+// This allows you to spread `formOptions` without needing to redeclare it.
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const FieldGroupPasswordFields = withFieldGroup({
+  defaultValues,
+  // You may also restrict the group to only use forms that implement this submit meta.
+  // If none is provided, any form with the right defaultValues may use it.
+  // onSubmitMeta: { action: '' }
+
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These default values are also for type-checking and are not used at runtime
+    title: 'Password',
+  },
+  // Internally, you will have access to a `group` instead of a `form`
+  render: function Render({ group, title }) {
+    // access reactive values using the group store
+    const password = useStore(group.store, (state) => state.values.password)
+    // or the form itself
+    const isSubmitting = useStore(
+      group.form.store,
+      (state) => state.isSubmitting,
+    )
+
+    return (
+      <div>
+        <h2>{title}</h2>
+        {/* Groups also have access to Field, Subscribe, Field, AppField and AppForm */}
+        <group.AppField name="password">
+          {(field) => <field.TextField label="Password" />}
+        </group.AppField>
+        <group.AppField
+          name="confirm_password"
+          validators={{
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) => {
+              // The form could be any values, so it is typed as 'unknown'
+              const values: unknown = fieldApi.form.state.values
+              // use the group methods instead
+              if (value !== group.getFieldValue('password')) {
+                return 'Passwords do not match'
+              }
+              return undefined
+            },
+          }}
+        >
+          {(field) => (
+            <div>
+              <field.TextField label="Confirm Password" />
+              <field.ErrorInfo />
+            </div>
+          )}
+        </group.AppField>
+      </div>
+    )
+  },
+})
+```
+
+We can now use these grouped fields in any form that implements the default values:
+
+```tsx
+// You are allowed to extend the group fields as long as the
+// existing properties remain unchanged
+type Account = PasswordFields & {
+  provider: string
+  username: string
+}
+
+// You may nest the group fields wherever you want
+type FormValues = {
+  name: string
+  age: number
+  account_data: PasswordFields
+  linked_accounts: Account[]
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  account_data: {
+    password: '',
+    confirm_password: '',
+  },
+  linked_accounts: [
+    {
+      provider: 'TanStack',
+      username: '',
+      password: '',
+      confirm_password: '',
+    },
+  ],
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+    // If the group didn't specify an `onSubmitMeta` property,
+    // the form may implement any meta it wants.
+    // Otherwise, the meta must be defined and match.
+    onSubmitMeta: { action: '' },
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You must specify where the fields can be found
+        fields="account_data"
+        title="Passwords"
+      />
+      <form.Field name="linked_accounts" mode="array">
+        {(field) =>
+          field.state.value.map((account, i) => (
+            <FieldGroupPasswordFields
+              key={account.provider}
+              form={form}
+              // The fields may be in nested fields
+              fields={`linked_accounts[${i}]`}
+              title={account.provider}
+            />
+          ))
+        }
+      </form.Field>
+    </form.AppForm>
+  )
+}
+```
+
+### Mapping field group values to a different field
+
+You may want to keep the password fields on the top level of your form, or rename the properties for clarity. You can map field group values
+to their true location by changing the `field` property:
+
+> [!IMPORTANT]
+> Due to TypeScript limitations, field mapping is only allowed for objects. You can use records or arrays at the top level of a field group, but you will not be able to map the fields.
+
+```tsx
+// To have an easier form, you can keep the fields on the top level
+type FormValues = {
+  name: string
+  age: number
+  password: string
+  confirm_password: string
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  password: '',
+  confirm_password: '',
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You can map the fields to their equivalent deep key
+        fields={{
+          password: 'password',
+          confirm_password: 'confirm_password',
+          // or map them to differently named keys entirely
+          // 'password': 'name'
+        }}
+        title="Passwords"
+      />
+    </form.AppForm>
+  )
+}
+```
+
+If you expect your fields to always be at the top level of your form, you can create a quick map
+of your field groups using a helper function:
+
+```tsx
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const passwordFields = createFieldMap(defaultValues)
+/* This generates the following map:
+ {
+    'password': 'password',
+    'confirm_password': 'confirm_password'
+ }
+*/
+
+// Usage:
+<FieldGroupPasswordFields
+  form={form}
+  fields={passwordFields}
+  title="Passwords"
+/>
+```
+
+## Tree-shaking form and field components
+
+While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
+In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form hook.
+
+To solve this, you can mix the `createFormHook` TanStack API with the React `lazy` and `Suspense` components:
+
+```typescript
+// src/hooks/form-context.ts
+import { createFormHookContexts } from '@tanstack/preact-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+```
+
+```tsx
+// src/components/text-field.tsx
+import { useFieldContext } from '../hooks/form-context.tsx'
+
+export default function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onInput={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+```tsx
+// src/hooks/form.ts
+import { lazy } from 'preact/compat'
+import { createFormHook } from '@tanstack/preact-form'
+
+const TextField = lazy(() => import('../components/text-fields.tsx'))
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+```tsx
+// src/App.tsx
+import { Suspense } from 'preact/compat'
+import { PeoplePage } from './features/people/form.tsx'
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <PeoplePage />
+    </Suspense>
+  )
+}
+```
+
+This will show the Suspense fallback while the `TextField` component is being loaded, and then render the form once it's loaded.
+
+## Putting it all together
+
+Now that we've covered the basics of creating custom form hooks, let's put it all together in a single example.
+
+```tsx
+// /src/hooks/form.ts, to be used across the entire app
+const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+
+function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onInput={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+
+function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+// /src/features/people/shared-form.ts, to be used across `people` features
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+
+// /src/features/people/nested-form.ts, to be used in the `people` page
+const ChildForm = withForm({
+  ...formOpts,
+  // Optional, but adds props to the `render` function outside of `form`
+  props: {
+    title: 'Child Form',
+  },
+  render: ({ form, title }) => {
+    return (
+      <div>
+        <p>{title}</p>
+        <form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <form.AppForm>
+          <form.SubscribeButton label="Submit" />
+        </form.AppForm>
+      </div>
+    )
+  },
+})
+
+// /src/features/people/page.ts
+const Parent = () => {
+  const form = useAppForm({
+    ...formOpts,
+  })
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+## API Usage Guidance
+
+Here's a chart to help you decide what APIs you should be using:
+
+![](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/react_form_composability.svg)
diff --git a/mintlify/form/framework/preact/guides/form-groups.md b/mintlify/form/framework/preact/guides/form-groups.md
new file mode 100644
index 000000000..3845e0414
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/form-groups.md
@@ -0,0 +1,177 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `<form.FormGroup>`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `useForm` or [`useAppForm`](/form/framework/preact/guides/form-composition) to create a `form` variable, then reference its `FormGroup` component like you would a `Field`:
+
+```tsx
+const form = useForm({
+    defaultValues: {
+        step1: {
+            name: ""
+        },
+        step2: {
+            age: 0
+        }
+    }
+})
+
+return (
+    <form.FormGroup
+        name="step1"
+        children={group => (
+            // `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue`
+            // ...
+        )}
+    />
+)
+```
+
+This becomes much more useful when paired with external state to conditionally render a `FormGroup`:
+
+```tsx
+const [step, setStep] = useState(0)
+const form = useForm({
+    defaultValues: {
+        step1: {
+            name: ""
+        },
+        step2: {
+            age: 0
+        }
+    }
+})
+
+return (
+    <>
+        {step === 0 ? <form.FormGroup
+            name="step1"
+            onGroupSubmit={() => {
+                // We can move the step forward when validation passes
+                setStep(step + 1)
+            }}
+            onGroupSubmitInvalid={() => {
+                // Or handle invalid submissions, just like a top-level form
+            }}
+            onSubmitMeta={{} as SomeType}
+            children={group => (
+                // Use `group.handleSubmit()` to submit the sub-form, but not the parent form
+                // ...
+            )}
+        /> : null }
+        {step === 1 ? <form.FormGroup
+            name="step2"
+            children={group => (
+                // Then, use `form.handleSubmit()` to submit the entire form
+                // ...
+            )}
+        /> : null }
+    </>
+)
+```
+
+## Form Group Validation
+
+Form groups have a distinct validation proceedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{ onChange: () => 'Error' }}
+  children={(group) => {
+    group.state.meta.errorMap // {onChange: "Error" | undefined}
+    group.state.meta.errors // ("Error")[]
+  }}
+/>
+```
+
+- Can set errors on sub-fields:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: ({ value, groupApi }) => ({
+      group: value.name === 'error' ? 'Group error' : undefined,
+      fields: {
+        // Must use the name of the field relative to the FormGroup as the error key,
+        // to stay consistent with how standard schema works with form groups
+        name: value.name === 'error' ? 'Field error' : undefined,
+      },
+    }),
+  }}
+/>
+```
+
+- And can even accept standard schemas:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: z.object({
+      name: z.string().min(2),
+    }),
+  }}
+/>
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```
+> const step1Schema = z.object(&#123;
+>     name: z.string().min(2)
+> &#125;)
+>
+> const schema = z.object(&#123;
+>     step1: step1Schema,
+>     step2: step2Schema
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/preact/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `useForm`:
+
+```tsx
+useForm({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+})
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the `FormGroup` itself:
+
+```tsx
+<form.FormGroup validators={{ onDynamic: step1Schema }} />
+```
+
+It will treat `group.submissionAttempts` as the way to change what validator is ran before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group.state.meta.errors`, you're also able to access the group's value using `group.state.value`. Likewise, here are some valuable properties you can access in the `group.state.meta`:
+
+- `group.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/preact/guides/linked-fields.md b/mintlify/form/framework/preact/guides/linked-fields.md
new file mode 100644
index 000000000..123a2971b
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/linked-fields.md
@@ -0,0 +1,75 @@
+---
+id: linked-fields
+title: Link Two Form Fields Together
+---
+
+You may find yourself needing to link two fields together, such that one is validated when another's value has changed.
+One such use case is when you have both a `password` and a `confirm_password` field.
+Here, you want the `confirm_password` field to error out if its value doesn't match that of the `password` field, regardless of which field triggered the value change.
+
+Imagine the following user flow:
+
+- User updates the `confirm_password` field.
+- User updates the `password` field.
+
+In this example, the form will still have errors present because the `confirm_password` field's validation has not been re-run to mark the field as valid.
+
+To solve this, you need to make sure that the `confirm_password` field's validation is re-run when the `password` field is updated.
+To do this, you can add an `onChangeListenTo` prop to the `confirm_password` field.
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      password: '',
+      confirm_password: '',
+    },
+    // ...
+  })
+
+  return (
+    <div>
+      <form.Field name="password">
+        {(field) => (
+          <label>
+            <div>Password</div>
+            <input
+              value={field.state.value}
+              onInput={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+      <form.Field
+        name="confirm_password"
+        validators={{
+          onChangeListenTo: ['password'],
+          onChange: ({ value, fieldApi }) => {
+            if (value !== fieldApi.form.getFieldValue('password')) {
+              return 'Passwords do not match'
+            }
+            return undefined
+          },
+        }}
+      >
+        {(field) => (
+          <div>
+            <label>
+              <div>Confirm Password</div>
+              <input
+                value={field.state.value}
+                onInput={(e) => field.handleChange(e.target.value)}
+              />
+            </label>
+            {field.state.meta.errors.map((err) => (
+              <div key={err}>{err}</div>
+            ))}
+          </div>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+```
+
+This is similar to the `onBlurListenTo` prop, which re-runs the validation when the linked field is blurred.
diff --git a/mintlify/form/framework/preact/guides/listeners.md b/mintlify/form/framework/preact/guides/listeners.md
new file mode 100644
index 000000000..8b9ac17b2
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/listeners.md
@@ -0,0 +1,126 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the `onChange` event and dispatch a reset to the "province" field when the listener is fired.
+
+Events that can be "listened" to are:
+
+- `onChange`
+- `onBlur`
+- `onMount`
+- `onSubmit`
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      country: '',
+      province: '',
+    },
+    // ...
+  })
+
+  return (
+    <div>
+      <form.Field
+        name="country"
+        listeners={{
+          onChange: ({ value }) => {
+            console.log(`Country changed to: ${value}, resetting province`)
+            form.setFieldValue('province', '')
+          },
+        }}
+      >
+        {(field) => (
+          <label>
+            <div>Country</div>
+            <input
+              value={field.state.value}
+              onInput={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+
+      <form.Field name="province">
+        {(field) => (
+          <label>
+            <div>Province</div>
+            <input
+              value={field.state.value}
+              onInput={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+```
+
+### Built-in Debouncing
+
+If you are making an API request inside a listener, you may want to debounce the calls as it can lead to performance issues.
+We enable an easy method for debouncing your listeners by adding a `onChangeDebounceMs` or `onBlurDebounceMs`.
+
+```tsx
+<form.Field
+  name="country"
+  listeners={{
+    onChangeDebounceMs: 500, // 500ms debounce
+    onChange: ({ value }) => {
+      console.log(`Country changed to: ${value} without a change within 500ms, resetting province`)
+      form.setFieldValue('province', '')
+    },
+  }}
+>
+  {(field) => (
+    /* ... */
+  )}
+</form.Field>
+```
+
+### Form listeners
+
+At a higher level, listeners are also available at the form level, allowing you access to the `onMount` and `onSubmit` events, and having `onChange` and `onBlur` propagated to all the form's children. Form-level listeners can also be debounced in the same way as previously discussed.
+
+`onMount` and `onSubmit` listeners have the following parameters:
+
+- `formApi`
+
+`onChange` and `onBlur` listeners have access to:
+
+- `fieldApi`
+- `formApi`
+
+```tsx
+const form = useForm({
+  listeners: {
+    onMount: ({ formApi }) => {
+      // custom logging service
+      loggingService('mount', formApi.state.values)
+    },
+
+    onChange: ({ formApi, fieldApi }) => {
+      // autosave logic
+      if (formApi.state.isValid) {
+        formApi.handleSubmit()
+      }
+
+      // fieldApi represents the field that triggered the event.
+      console.log(fieldApi.name, fieldApi.state.value)
+    },
+    onChangeDebounceMs: 500,
+  },
+})
+```
diff --git a/mintlify/form/framework/preact/guides/reactivity.md b/mintlify/form/framework/preact/guides/reactivity.md
new file mode 100644
index 000000000..19d8d3510
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/reactivity.md
@@ -0,0 +1,52 @@
+---
+id: reactivity
+title: Reactivity
+---
+
+Tanstack Form doesn't cause re-renders when interacting with the form. So, you might find yourself trying to use a form or field state value without success.
+
+If you would like to access reactive values, you will need to subscribe to them using one of two methods: `useStore` or the `form.Subscribe` component.
+
+Some uses for these subscriptions are rendering up-to-date field values, determining what to render based on a condition, or using field values inside the logic of your component.
+
+> For situations where you want to "react" to triggers, check out the [listener](/form/framework/preact/guides/listeners) API.
+
+## useStore
+
+The `useStore` hook is perfect when you need to access form values within the logic of your component. `useStore` takes two parameters. First, the form store. Second, a selector to specify the piece of the form you wish to subscribe to.
+
+```tsx
+const firstName = useStore(form.store, (state) => state.values.firstName)
+const errors = useStore(form.store, (state) => state.errorMap)
+```
+
+You can access any piece of the form state in the selector.
+
+> Note, that `useStore` will cause a whole component re-render whenever the value subscribed to changes.
+
+While it IS possible to omit the selector, resist the urge as omitting it would result in many unnecessary re-renders whenever any of the form state changes.
+
+## form.Subscribe
+
+The `form.Subscribe` component is best suited when you need to react to something within the UI of your component. For example, showing or hiding UI based on the value of a form field.
+
+```tsx
+<form.Subscribe
+  selector={(state) => state.values.firstName}
+  children={(firstName) => (
+    <form.Field>
+      {(field) => (
+        <input
+          name="lastName"
+          value={field.state.lastName}
+          onInput={field.handleChange}
+        />
+      )}
+    </form.Field>
+  )}
+/>
+```
+
+> The `form.Subscribe` component doesn't trigger component-level re-renders. Anytime the value subscribed to changes, only the `form.Subscribe` component re-renders.
+
+The choice between whether to use `useStore` or `form.Subscribe` mainly boils down to your use case. If you're aiming for direct UI updates based on form state, use `form.Subscribe` for its optimization perks. And if you need the reactivity within the logic, then `useStore` is the better choice.
diff --git a/mintlify/form/framework/preact/guides/submission-handling.md b/mintlify/form/framework/preact/guides/submission-handling.md
new file mode 100644
index 000000000..e89a70ab7
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/submission-handling.md
@@ -0,0 +1,93 @@
+---
+id: submission-handling
+title: Submission handling
+---
+
+## Passing additional data to submission handling
+
+You may have multiple types of submission behaviour, for example, going back to the previous page or staying on the form.
+You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
+
+> Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
+
+```tsx
+import { useForm } from '@tanstack/preact-form'
+
+type FormMeta = {
+  submitAction: 'continue' | 'backToMenu' | null
+}
+
+// Metadata is not required to call form.handleSubmit().
+// Specify what values to use as default if no meta is passed
+const defaultMeta: FormMeta = {
+  submitAction: null,
+}
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      data: '',
+    },
+    // Define what meta values to expect on submission
+    onSubmitMeta: defaultMeta,
+    onSubmit: async ({ value, meta }) => {
+      // Do something with the values passed via handleSubmit
+      console.log(`Selected action - ${meta.submitAction}`, value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      {/* ... */}
+      <button
+        type="submit"
+        // Overwrites the default specified in onSubmitMeta
+        onClick={() => form.handleSubmit({ submitAction: 'continue' })}
+      >
+        Submit and continue
+      </button>
+      <button
+        type="submit"
+        onClick={() => form.handleSubmit({ submitAction: 'backToMenu' })}
+      >
+        Submit and back to menu
+      </button>
+    </form>
+  )
+}
+```
+
+## Transforming data with Standard Schemas
+
+While Tanstack Form provides [Standard Schema support](/form/framework/preact/guides/validation) for validation, it does not preserve the Schema's output data.
+
+The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function:
+
+```tsx
+const schema = z.object({
+  age: z.string().transform((age) => Number(age)),
+})
+
+// Tanstack Form uses the input type of Standard Schemas
+const defaultValues: z.input<typeof schema> = {
+  age: '13',
+}
+
+const form = useForm({
+  defaultValues,
+  validators: {
+    onChange: schema,
+  },
+  onSubmit: ({ value }) => {
+    const inputAge: string = value.age
+    // Pass it through the schema to get the transformed value
+    const result = schema.parse(value)
+    const outputAge: number = result.age
+  },
+})
+```
diff --git a/mintlify/form/framework/preact/guides/ui-libraries.md b/mintlify/form/framework/preact/guides/ui-libraries.md
new file mode 100644
index 000000000..e1e76b346
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/ui-libraries.md
@@ -0,0 +1,216 @@
+---
+id: ui-libraries
+title: UI Libraries
+---
+
+## Usage of TanStack Form with UI Libraries
+
+TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Chakra UI`, `Tailwind`, `Material UI`, `Mantine`, `shadcn/ui`, or even plain CSS.
+
+This guide focuses on `Chakra UI`, `Material UI`, `Mantine`, and `shadcn/ui`, but the concepts are applicable to any UI library of your choice.
+
+### Prerequisites
+
+Before integrating TanStack Form with a UI library, ensure the necessary dependencies are installed in your project:
+
+- For `Chakra UI`, follow the installation instructions on their [official site](https://chakra-ui.com/docs/get-started/installation)
+- For `Material UI`, follow the installation instructions on their [official site](https://mui.com/material-ui/getting-started/).
+- For `Mantine`, refer to their [documentation](https://mantine.dev/).
+- For `shadcn/ui`, refer to their [official site](https://ui.shadcn.com/).
+
+Note: While you can mix and match libraries, it's generally advisable to stick with one to maintain consistency and minimize bloat.
+
+### Example with Mantine
+
+Here's an example demonstrating the integration of TanStack Form with Mantine components:
+
+```tsx
+import { TextInput, Checkbox } from '@mantine/core'
+import { useForm } from '@tanstack/preact-form'
+
+export default function App() {
+  const { Field, handleSubmit, state } = useForm({
+    defaultValues: {
+      name: '',
+      isChecked: false,
+    },
+    onSubmit: async ({ value }) => {
+      // Handle form submission
+      console.log(value)
+    },
+  })
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleSubmit()
+        }}
+      >
+        <Field
+          name="name"
+          children={({ state, handleChange, handleBlur }) => (
+            <TextInput
+              defaultValue={state.value}
+              onInput={(e) => handleChange(e.target.value)}
+              onBlur={handleBlur}
+              placeholder="Enter your name"
+            />
+          )}
+        />
+        <Field
+          name="isChecked"
+          children={({ state, handleChange, handleBlur }) => (
+            <Checkbox
+              onInput={(e) => handleChange(e.target.checked)}
+              onBlur={handleBlur}
+              checked={state.value}
+            />
+          )}
+        />
+      </form>
+      <div>
+        <pre>{JSON.stringify(state.values, null, 2)}</pre>
+      </div>
+    </>
+  )
+}
+```
+
+- Initially, we utilize the `useForm` hook from TanStack and destructure the necessary properties. This step is optional; alternatively, you could use `const form = useForm()` if preferred. TypeScript's type inference ensures a smooth experience regardless of the approach.
+- The `Field` component, derived from `useForm`, accepts several properties, such as `validators`. For this demonstration, we focus on two primary properties: `name` and `children`.
+  - The `name` property identifies each `Field`, for instance, `name` in our example.
+  - The `children` property leverages the concept of render props, allowing us to integrate components without unnecessary abstractions.
+- TanStack's design relies heavily on render props, providing access to `children` within the `Field` component. This approach is entirely type-safe. When integrating with Mantine components, such as `TextInput`, we selectively destructure properties like `state.value`, `handleChange`, and `handleBlur`. This selective approach is due to the slight differences in types between `TextInput` and the `field` we get in the children.
+- By following these steps, you can seamlessly integrate Mantine components with TanStack Form.
+- This methodology is equally applicable to other components, such as `Checkbox`, ensuring consistent integration across different UI elements.
+
+### Usage with Material UI
+
+The process for integrating Material UI components is similar. Here's an example using TextField and Checkbox from Material UI:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => {
+    return (
+      <TextField
+        id="filled-basic"
+        label="Filled"
+        variant="filled"
+        defaultValue={state.value}
+        onInput={(e) => handleChange(e.target.value)}
+        onBlur={handleBlur}
+        placeholder="Enter your name"
+      />
+    );
+  }}
+/>
+
+<Field
+  name="isMuiCheckBox"
+  children={({ state, handleChange, handleBlur }) => {
+    return (
+      <MuiCheckbox
+        onInput={(e) => handleChange(e.target.checked)}
+        onBlur={handleBlur}
+        checked={state.value}
+      />
+    );
+  }}
+/>
+
+```
+
+- The integration approach is the same as with Mantine.
+- The primary difference lies in the specific Material UI component properties and styling options.
+
+### Usage with shadcn/ui
+
+The process for integrating shadcn/ui components is similar. Here's an example using Input and Checkbox from shadcn/ui:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => (
+    <Input
+      value={state.value}
+      onInput={(e) => handleChange(e.target.value)}
+      onBlur={handleBlur}
+      placeholder="Enter your name"
+    />
+  )}
+/>
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox
+      onCheckedChange={(checked) => handleChange(checked === true)}
+      onBlur={handleBlur}
+      checked={state.value}
+    />
+  )}
+/>
+```
+
+- The integration approach is the same as with Mantine, Material UI.
+- The primary difference lies in the specific shadcn/ui component properties and styling options.
+- Note the onCheckedChange property of Checkbox instead of onChange.
+
+The ShadCN library includes a dedicated guide covering common scenarios for integrating TanStack Form with its components: [https://ui.shadcn.com/docs/forms/tanstack-form](https://ui.shadcn.com/docs/forms/tanstack-form)
+
+### Usage with Chakra UI
+
+The process for integrating Chakra UI components is similar. Here's an example using Input and Checkbox from Chakra UI:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => (
+    <Input
+      value={state.value}
+      onInput={(e) => handleChange(e.target.value)}
+      onBlur={handleBlur}
+      placeholder="Enter your name"
+    />
+  )}
+/>
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox.Root
+      checked={state.value}
+      onCheckedChange={(details) => handleChange(!!details.checked)}
+      onBlur={handleBlur}
+    >
+      <Checkbox.HiddenInput />
+      <Checkbox.Control />
+      <Checkbox.Label>Accept terms</Checkbox.Label>
+    </Checkbox.Root>
+  )}
+/>
+```
+
+- The integration approach is the same as with Mantine, Material UI, and shadcn/ui.
+- Chakra UI exposes its Checkbox as a composable component with separate `Checkbox.Root`, `Checkbox.Control`, `Checkbox.Label`, and `Checkbox.HiddenInput` parts that you wire together.
+- The double negation `!!` is used on `onCheckedChange` to coerce Chakra's `"indeterminate"` state to a boolean, ensuring it matches the form state. See the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#indeterminate) for more details.
+- Alternatively, Chakra UI offers a pre-composed Checkbox component that works the same way as their standard examples, without requiring manual composition. You can learn more about this closed component approach in the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#closed-component).
+- The TanStack Form integration works identically with either approach—simply attach the `checked`, `onCheckedChange`, and `onBlur` handlers to your chosen component.
+
+Example using the closed Checkbox component:
+
+```tsx
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox
+      checked={state.value}
+      onCheckedChange={(details) => handleChange(!!details.checked)}
+      onBlur={handleBlur}
+    >
+      Accept terms
+    </Checkbox>
+  )}
+/>
+```
diff --git a/mintlify/form/framework/preact/guides/validation.md b/mintlify/form/framework/preact/guides/validation.md
new file mode 100644
index 000000000..ea712fd66
--- /dev/null
+++ b/mintlify/form/framework/preact/guides/validation.md
@@ -0,0 +1,563 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionality is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit, etc.)
+- Validation rules can be defined at the field-level or at the form-level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `<Field />` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the `fieldApi` object, so that you can perform the validation. If you find a validation error, simply return the error message as a string, and it will be available in `field.state.meta.errors`.
+
+Here is an example:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field.handleBlur}
+        // We always need to implement onChange, so that TanStack Form receives the changes
+        onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+So, you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+    onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field.handleBlur}
+        // We always need to implement onChange, so that TanStack Form receives the changes
+        onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur, etc.). More information about displaying errors is below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => {
+    return (
+      <>
+        {/* ... */}
+        {!field.state.meta.isValid && (
+          <em>{field.state.meta.errors.join(',')}</em>
+        )}
+      </>
+    )
+  }}
+</form.Field>
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {field.state.meta.errorMap['onChange'] ? (
+        <em>{field.state.meta.errorMap['onChange']}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {/* errorMap.onChange is type `{isOldEnough: false} | undefined` */}
+      {/* meta.errors is type `Array<{isOldEnough: false} | undefined>` */}
+      {!field.state.meta.errorMap['onChange']?.isOldEnough ? (
+        <em>The user is not old enough</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+## Validation at field-level vs at form-level
+
+As shown above, each `<Field>` accepts its own validation rules via the callbacks such as `onChange` and `onBlur`. It is also possible to define validation rules at the form-level (as opposed to field-by-field) by passing similar callbacks to the `useForm()` hook.
+
+Example:
+
+```tsx
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  })
+
+  // Subscribe to the form's `errorMap` so that updates to it will cause re-renders
+  // Alternatively, you can use `form.Subscribe`
+  const formErrorMap = useStore(form.store, (state) => state.errorMap)
+
+  return (
+    <div>
+      {/* ... */}
+      {formErrorMap.onChange ? (
+        <div>
+          <em>There was an error on the form: {formErrorMap.onChange}</em>
+        </div>
+      ) : null}
+      {/* ... */}
+    </div>
+  )
+}
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```tsx
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+      socials: [],
+      details: {
+        email: '',
+      },
+    },
+    validators: {
+      onSubmitAsync: async ({ value }) => {
+        // Validate the value on the server
+        const hasErrors = await verifyDataOnServer(value)
+        if (hasErrors) {
+          return {
+            form: 'Invalid data', // The `form` key is optional
+            fields: {
+              age: 'Must be 13 or older to sign',
+              // Set errors on nested fields with the field's name
+              'socials[0].url': 'The provided URL does not exist',
+              'details.email': 'An email is required',
+            },
+          }
+        }
+
+        return null
+      },
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          void form.handleSubmit()
+        }}
+      >
+        <form.Field name="age">
+          {(field) => (
+            <>
+              <label htmlFor={field.name}>Age:</label>
+              <input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                type="number"
+                onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+              />
+              {!field.state.meta.isValid && (
+                <em role="alert">{field.state.meta.errors.join(', ')}</em>
+              )}
+            </>
+          )}
+        </form.Field>
+        <form.Subscribe
+          selector={(state) => [state.errorMap]}
+          children={([errorMap]) =>
+            errorMap.onSubmit ? (
+              <div>
+                <em>There was an error on the form: {errorMap.onSubmit}</em>
+              </div>
+            ) : null
+          }
+        />
+        {/*...*/}
+      </form>
+    </div>
+  )
+}
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```jsx
+> const form = useForm(&#123;
+>   defaultValues: &#123;
+>     age: 0,
+>   &#125;,
+>   validators: &#123;
+>     onChange: (&#123; value &#125;) => &#123;
+>       return &#123;
+>         fields: &#123;
+>           age: value.age &lt; 12 ? 'Too young!' : undefined,
+>         &#125;,
+>       &#125;
+>     &#125;,
+>   &#125;,
+> &#125;)
+>
+> // ...
+>
+> return (
+>   &lt;form.Field
+>     name="age"
+>     validators=&#123;&#123;
+>       onChange: (&#123; value &#125;) => (value % 2 === 0 ? 'Must be odd!' : undefined),
+>     &#125;&#125;
+>     children=&#123;() => &lt;>&#123;/* ... */&#125;&lt;/>&#125;
+>   />
+> )
+> ```
+>
+> Will only show `'Must be odd!'` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validation will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value < 13 ? 'You must be 13 to make an account' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+Synchronous and asynchronous validators can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) => (value < 13 ? 'You must be at least 13' : undefined),
+    onBlurAsync: async ({ value }) => {
+      const currentAge = await fetchCurrentAgeOnProfile()
+      return value < currentAge ? 'You can only increase the age' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onBlur={field.handleBlur}
+        onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+The synchronous validation method (`onBlur`) is run first, and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDoS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsyncDebounceMs: 1500,
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+    onBlurAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will run `onChangeAsync` every 1500ms, whereas `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form-level validators; errors will automatically propagate to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+- [Effect/Schema](https://effect.website/docs/schema/standard-schema/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. See [submission handling](/form/framework/preact/guides/submission-handling) for more information.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```tsx
+const userSchema = z.object({
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    validators: {
+      onChange: userSchema,
+    },
+  })
+  return (
+    <div>
+      <form.Field
+        name="age"
+        children={(field) => {
+          return <>{/* ... */}</>
+        }}
+      />
+    </div>
+  )
+}
+```
+
+Async validators at the form- and field-level are supported as well:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.number().refine(
+      async (value) => {
+        const currentAge = await fetchCurrentAgeOnProfile()
+        return value >= currentAge
+      },
+      {
+        message: 'You can only increase the age',
+      },
+    ),
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value, fieldApi }) => {
+      const errors = fieldApi.parseValueWithSchema(
+        z.number().gte(13, 'You must be 13 to make an account'),
+      )
+      if (errors) return errors
+      // continue with your validation
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+## Preventing invalid forms from being submitted
+
+The callbacks, such as `onChange` and `onBlur`, are also run when the form is submitted and the submission is blocked because the form is invalid.
+
+The form state object has a `canSubmit` flag that is `false` when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to `canSubmit` via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```tsx
+const form = useForm(/* ... */)
+
+return (
+  /* ... */
+
+  // Dynamic submit button
+  <form.Subscribe
+    selector={(state) => [state.canSubmit, state.isSubmitting]}
+    children={([canSubmit, isSubmitting]) => (
+      <button type="submit" disabled={!canSubmit}>
+        {isSubmitting ? '...' : 'Submit'}
+      </button>
+    )}
+  />
+)
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/preact/quick-start.md b/mintlify/form/framework/preact/quick-start.md
new file mode 100644
index 000000000..dff5cd86b
--- /dev/null
+++ b/mintlify/form/framework/preact/quick-start.md
@@ -0,0 +1,134 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+TanStack Form is unlike most form libraries you've used before. It's designed for large-scale production usage, with a focus on type safety, performance and composition for an unmatched developer experience.
+
+As a result, we've developed [a philosophy around the library's usage](/form/philosophy) that values scalability and long-term developer experience over short and sharable code snippets.
+
+Here's an example of a form following many of our best practices, which will allow you to rapidly develop even high-complexity forms after a short onboarding experience:
+
+```tsx
+import { render } from 'preact'
+import { createFormHook, createFormHookContexts } from '@tanstack/preact-form'
+// Form components that pre-bind events from the form hook; check our "Form Composition" guide for more
+import { TextField, NumberField, SubmitButton } from '~our-app/ui-library'
+// We also support Valibot, ArkType, and any other standard schema library
+import { z } from 'zod'
+
+const { fieldContext, formContext } = createFormHookContexts()
+
+// Allow us to bind components to the form to keep type safety but reduce production boilerplate
+// Define this once to have a generator of consistent form instances throughout your app
+const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    NumberField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+const PeoplePage = () => {
+  const form = useAppForm({
+    defaultValues: {
+      username: '',
+      age: 0,
+    },
+    validators: {
+      // Pass a schema or function to validate
+      onInput: z.object({
+        username: z.string(),
+        age: z.number().min(13),
+      }),
+    },
+    onSubmit: ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value, null, 2))
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      <h1>Personal Information</h1>
+      {/* Components are bound to `form` and `field` to ensure extreme type safety */}
+      {/* Use `form.AppField` to render a component bound to a single field */}
+      <form.AppField
+        name="username"
+        children={(field) => <field.TextField label="Full Name" />}
+      />
+      {/* The "name" property will throw a TypeScript error if typo'd  */}
+      <form.AppField
+        name="age"
+        children={(field) => <field.NumberField label="Age" />}
+      />
+      {/* Components in `form.AppForm` have access to the form context */}
+      <form.AppForm>
+        <form.SubmitButton />
+      </form.AppForm>
+    </form>
+  )
+}
+
+const rootElement = document.getElementById('root')!
+render(<PeoplePage />, rootElement)
+```
+
+While we generally suggest using `createFormHook` for reduced boilerplate in the long-run, we also support one-off components and other behaviors using `useForm` and `form.Field`:
+
+```tsx
+import { render } from 'preact'
+import { useForm } from '@tanstack/preact-form'
+
+const PeoplePage = () => {
+  const form = useForm({
+    defaultValues: {
+      username: '',
+      age: 0,
+    },
+    onSubmit: ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value, null, 2))
+    },
+  })
+
+  return (
+    <form.Field
+      name="age"
+      validators={{
+        // We can choose between form-wide and field-specific validators
+        onChange: ({ value }) =>
+          value > 13 ? undefined : 'Must be 13 or older',
+      }}
+      children={(field) => (
+        <>
+          <input
+            name={field.name}
+            value={field.state.value}
+            onBlur={field.handleBlur}
+            type="number"
+            onInput={(e) => field.handleChange(e.target.valueAsNumber)}
+          />
+          {!field.state.meta.isValid && (
+            <em>{field.state.meta.errors.join(',')}</em>
+          )}
+        </>
+      )}
+    />
+  )
+}
+
+const rootElement = document.getElementById('root')!
+render(<PeoplePage />, rootElement)
+```
+
+All properties from `useForm` can be used in `useAppForm` and all properties from `form.Field` can be used in `form.AppField`.
diff --git a/mintlify/form/framework/preact/reference/functions/createFormHook.md b/mintlify/form/framework/preact/reference/functions/createFormHook.md
new file mode 100644
index 000000000..f7848f634
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/createFormHook.md
@@ -0,0 +1,336 @@
+---
+id: createFormHook
+title: createFormHook
+---
+
+# Function: createFormHook()
+
+```ts
+function createFormHook<TComponents, TFormComponents>(__namedParameters): object;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:294](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L294)
+
+## Type Parameters
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+## Parameters
+
+### \_\_namedParameters
+
+`CreateFormHookProps`\&lt;`TComponents`, `TFormComponents`\>
+
+## Returns
+
+### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedPreactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`AppFieldExtendedPreactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedPreactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### \_props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`AppFieldExtendedPreactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ComponentChildren;
+```
+
+#### Type Parameters
+
+##### TFieldGroupData
+
+`TFieldGroupData`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/preact/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents`, `TFormComponents`, `TSubmitMeta`, `TRenderProps`\>
+
+#### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ComponentChildren;
+```
+
+##### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+##### Parameters
+
+###### params
+
+[`PropsWithChildren`](/form/framework/preact/reference/type-aliases/PropsWithChildren)\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+##### Returns
+
+`ComponentChildren`
+
+### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<PropsWithChildren<NoInfer<UnwrapOrAny<TRenderProps>> & object>>;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/preact/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`, `TRenderProps`\>
+
+#### Returns
+
+`FunctionComponent`\&lt;[`PropsWithChildren`](/form/framework/preact/reference/type-aliases/PropsWithChildren)\&lt;`NoInfer`\&lt;`UnwrapOrAny`\&lt;`TRenderProps`\>\> & `object`\>\>
diff --git a/mintlify/form/framework/preact/reference/functions/createFormHookContexts.md b/mintlify/form/framework/preact/reference/functions/createFormHookContexts.md
new file mode 100644
index 000000000..268972080
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/createFormHookContexts.md
@@ -0,0 +1,54 @@
+---
+id: createFormHookContexts
+title: createFormHookContexts
+---
+
+# Function: createFormHookContexts()
+
+```ts
+function createFormHookContexts(): object;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:91](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L91)
+
+## Returns
+
+`object`
+
+### fieldContext
+
+```ts
+fieldContext: Context<AnyFieldApi> = FieldContext;
+```
+
+### formContext
+
+```ts
+formContext: Context<AnyFormApi> = FormContext;
+```
+
+### useFieldContext()
+
+```ts
+useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+#### Type Parameters
+
+##### TData
+
+`TData`
+
+#### Returns
+
+`FieldApi`\&lt;`any`, `string`, `TData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
+
+### useFormContext()
+
+```ts
+useFormContext: () => PreactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+#### Returns
+
+[`PreactFormExtendedApi`](/form/framework/preact/reference/type-aliases/PreactFormExtendedApi)\&lt;`Record`\&lt;`string`, `never`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
diff --git a/mintlify/form/framework/preact/reference/functions/useField.md b/mintlify/form/framework/preact/reference/functions/useField.md
new file mode 100644
index 000000000..d991a40e4
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/useField.md
@@ -0,0 +1,122 @@
+---
+id: useField
+title: useField
+---
+
+# Function: useField()
+
+```ts
+function useField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>(opts): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useField.tsx:104](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useField.tsx#L104)
+
+A hook for managing a field in a form.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Parameters
+
+### opts
+
+[`UseFieldOptions`](/form/framework/preact/reference/interfaces/UseFieldOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+An object with field options.
+
+## Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+The `FieldApi` instance for the specified field.
diff --git a/mintlify/form/framework/preact/reference/functions/useFieldGroup.md b/mintlify/form/framework/preact/reference/functions/useFieldGroup.md
new file mode 100644
index 000000000..ddad5fa29
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/useFieldGroup.md
@@ -0,0 +1,109 @@
+---
+id: useFieldGroup
+title: useFieldGroup
+---
+
+# Function: useFieldGroup()
+
+```ts
+function useFieldGroup<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TComponents, TFormComponents, TSubmitMeta>(opts): AppFieldExtendedPreactFieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+Defined in: [packages/preact-form/src/useFieldGroup.tsx:90](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useFieldGroup.tsx#L90)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Parameters
+
+### opts
+
+#### defaultValues?
+
+`TFieldGroupData`
+
+#### fields
+
+`TFields`
+
+#### form
+
+  \| `AppFieldExtendedPreactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+  \| `AppFieldExtendedPreactFieldGroupApi`\&lt;`unknown`, `TFormData`, `string` \| `FieldsMap`\&lt;`unknown`, `TFormData`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+#### formComponents
+
+`TFormComponents`
+
+#### onSubmitMeta?
+
+`TSubmitMeta`
+
+## Returns
+
+`AppFieldExtendedPreactFieldGroupApi`\&lt;`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
diff --git a/mintlify/form/framework/preact/reference/functions/useForm.md b/mintlify/form/framework/preact/reference/functions/useForm.md
new file mode 100644
index 000000000..a36a46c94
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/useForm.md
@@ -0,0 +1,76 @@
+---
+id: useForm
+title: useForm
+---
+
+# Function: useForm()
+
+```ts
+function useForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(opts?): PreactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useForm.tsx:173](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L173)
+
+A custom React Hook that returns an extended instance of the `FormApi` class.
+
+This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts?
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+[`PreactFormExtendedApi`](/form/framework/preact/reference/type-aliases/PreactFormExtendedApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/preact/reference/functions/useFormGroup.md b/mintlify/form/framework/preact/reference/functions/useFormGroup.md
new file mode 100644
index 000000000..3078e01f2
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/functions/useFormGroup.md
@@ -0,0 +1,128 @@
+---
+id: useFormGroup
+title: useFormGroup
+---
+
+# Function: useFormGroup()
+
+```ts
+function useFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useFormGroup.tsx:111](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useFormGroup.tsx#L111)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/preact/reference/index.md b/mintlify/form/framework/preact/reference/index.md
new file mode 100644
index 000000000..3ee44eae4
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/index.md
@@ -0,0 +1,41 @@
+---
+id: "@tanstack/preact-form"
+title: "@tanstack/preact-form"
+---
+
+# @tanstack/preact-form
+
+## Interfaces
+
+- [PreactFormApi](/form/framework/preact/reference/interfaces/PreactFormApi)
+- [UseFieldOptions](/form/framework/preact/reference/interfaces/UseFieldOptions)
+- [UseFieldOptionsBound](/form/framework/preact/reference/interfaces/UseFieldOptionsBound)
+- [WithFieldGroupProps](/form/framework/preact/reference/interfaces/WithFieldGroupProps)
+- [WithFormProps](/form/framework/preact/reference/interfaces/WithFormProps)
+
+## Type Aliases
+
+- [FieldComponent](/form/framework/preact/reference/type-aliases/FieldComponent)
+- [FormGroupComponent](/form/framework/preact/reference/type-aliases/FormGroupComponent)
+- [LensFieldComponent](/form/framework/preact/reference/type-aliases/LensFieldComponent)
+- [PreactFormExtendedApi](/form/framework/preact/reference/type-aliases/PreactFormExtendedApi)
+- [PropsWithChildren](/form/framework/preact/reference/type-aliases/PropsWithChildren)
+- [ServerFormState](/form/framework/preact/reference/type-aliases/ServerFormState)
+- [UseField](/form/framework/preact/reference/type-aliases/UseField)
+- [UseFormGroup](/form/framework/preact/reference/type-aliases/UseFormGroup)
+
+## Variables
+
+- [Field](/form/framework/preact/reference/variables/Field)
+- [FormGroup](/form/framework/preact/reference/variables/FormGroup)
+- [useIsomorphicLayoutEffect](/form/framework/preact/reference/variables/useIsomorphicLayoutEffect)
+- [~~useStore~~](/form/framework/preact/reference/variables/useStore)
+
+## Functions
+
+- [createFormHook](/form/framework/preact/reference/functions/createFormHook)
+- [createFormHookContexts](/form/framework/preact/reference/functions/createFormHookContexts)
+- [useField](/form/framework/preact/reference/functions/useField)
+- [useFieldGroup](/form/framework/preact/reference/functions/useFieldGroup)
+- [useForm](/form/framework/preact/reference/functions/useForm)
+- [useFormGroup](/form/framework/preact/reference/functions/useFormGroup)
diff --git a/mintlify/form/framework/preact/reference/interfaces/PreactFormApi.md b/mintlify/form/framework/preact/reference/interfaces/PreactFormApi.md
new file mode 100644
index 000000000..88411d75d
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/interfaces/PreactFormApi.md
@@ -0,0 +1,116 @@
+---
+id: PreactFormApi
+title: PreactFormApi
+---
+
+# Interface: PreactFormApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/preact-form/src/useForm.tsx:24](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L24)
+
+Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### Field
+
+```ts
+Field: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useForm.tsx:41](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L41)
+
+A Preact component to render form fields. With this, you can render and manage individual form fields.
+
+***
+
+### FormGroup
+
+```ts
+FormGroup: FormGroupComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useForm.tsx:55](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L55)
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [packages/preact-form/src/useForm.tsx:72](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L72)
+
+A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>\>
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChild` \| (`state`) => `ComponentChild`
+
+###### selector?
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
diff --git a/mintlify/form/framework/preact/reference/interfaces/UseFieldOptions.md b/mintlify/form/framework/preact/reference/interfaces/UseFieldOptions.md
new file mode 100644
index 000000000..a526e60cb
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/interfaces/UseFieldOptions.md
@@ -0,0 +1,124 @@
+---
+id: UseFieldOptions
+title: UseFieldOptions
+---
+
+# Interface: UseFieldOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [packages/preact-form/src/types.ts:21](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L21)
+
+The field options.
+
+## Extends
+
+- `FieldApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>.`FieldOptionsMode`
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/preact-form/src/types.ts:15](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L15)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/preact/reference/interfaces/UseFieldOptionsBound.md b/mintlify/form/framework/preact/reference/interfaces/UseFieldOptionsBound.md
new file mode 100644
index 000000000..f7684ecbb
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/interfaces/UseFieldOptionsBound.md
@@ -0,0 +1,78 @@
+---
+id: UseFieldOptionsBound
+title: UseFieldOptionsBound
+---
+
+# Interface: UseFieldOptionsBound\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/preact-form/src/types.ts:82](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L82)
+
+## Extends
+
+- `FieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>.`FieldOptionsMode`
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/preact-form/src/types.ts:15](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L15)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/preact/reference/interfaces/WithFieldGroupProps.md b/mintlify/form/framework/preact/reference/interfaces/WithFieldGroupProps.md
new file mode 100644
index 000000000..be5f33795
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/interfaces/WithFieldGroupProps.md
@@ -0,0 +1,54 @@
+---
+id: WithFieldGroupProps
+title: WithFieldGroupProps
+---
+
+# Interface: WithFieldGroupProps\&lt;TFieldGroupData, TFieldComponents, TFormComponents, TSubmitMeta, TRenderProps\>
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:257](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L257)
+
+## Extends
+
+- `BaseFormOptions`\&lt;`TFieldGroupData`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TRenderProps
+
+`TRenderProps` *extends* `object` = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:265](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L265)
+
+***
+
+### render
+
+```ts
+render: FunctionComponent<PropsWithChildren<NoInfer<TRenderProps> & object>>;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:266](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L266)
diff --git a/mintlify/form/framework/preact/reference/interfaces/WithFormProps.md b/mintlify/form/framework/preact/reference/interfaces/WithFormProps.md
new file mode 100644
index 000000000..7be4b8cc3
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/interfaces/WithFormProps.md
@@ -0,0 +1,94 @@
+---
+id: WithFormProps
+title: WithFormProps
+---
+
+# Interface: WithFormProps\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents, TRenderProps\>
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:201](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L201)
+
+## Extends
+
+- `FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TRenderProps
+
+`TRenderProps` *extends* `object` = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:232](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L232)
+
+***
+
+### render
+
+```ts
+render: FunctionComponent<PropsWithChildren<NoInfer<TRenderProps> & object>>;
+```
+
+Defined in: [packages/preact-form/src/createFormHook.tsx:233](https://github.com/TanStack/form/blob/main/packages/preact-form/src/createFormHook.tsx#L233)
diff --git a/mintlify/form/framework/preact/reference/type-aliases/FieldComponent.md b/mintlify/form/framework/preact/reference/type-aliases/FieldComponent.md
new file mode 100644
index 000000000..b29795430
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/FieldComponent.md
@@ -0,0 +1,131 @@
+---
+id: FieldComponent
+title: FieldComponent
+---
+
+# Type Alias: FieldComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi\>
+
+```ts
+type FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/preact-form/src/useField.tsx:472](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useField.tsx#L472)
+
+A type alias representing a field component for a specific form data type.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`FieldComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/preact/reference/type-aliases/FormGroupComponent.md b/mintlify/form/framework/preact/reference/type-aliases/FormGroupComponent.md
new file mode 100644
index 000000000..f31739193
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/FormGroupComponent.md
@@ -0,0 +1,141 @@
+---
+id: FormGroupComponent
+title: FormGroupComponent
+---
+
+# Type Alias: FormGroupComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>({
+  children,
+  ...formGroupOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/preact-form/src/useFormGroup.tsx:559](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useFormGroup.tsx#L559)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### \&#123;
+  children,
+  ...formGroupOptions
+\&#125;
+
+`FormGroupComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/preact/reference/type-aliases/LensFieldComponent.md b/mintlify/form/framework/preact/reference/type-aliases/LensFieldComponent.md
new file mode 100644
index 000000000..326ff3125
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/LensFieldComponent.md
@@ -0,0 +1,91 @@
+---
+id: LensFieldComponent
+title: LensFieldComponent
+---
+
+# Type Alias: LensFieldComponent()\&lt;TLensData, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type LensFieldComponent<TLensData, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/preact-form/src/useField.tsx:547](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useField.tsx#L547)
+
+A type alias representing a field component for a form lens data type.
+
+## Type Parameters
+
+### TLensData
+
+`TLensData`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TLensData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TLensData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`Omit`\&lt;`FieldComponentBoundProps`\&lt;`unknown`, `string`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `TParentSubmitMeta`, `ExtendedApi`\>, `"name"` \| `"validators"`\> & `object`
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/preact/reference/type-aliases/PreactFormExtendedApi.md b/mintlify/form/framework/preact/reference/type-aliases/PreactFormExtendedApi.md
new file mode 100644
index 000000000..288a7855f
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/PreactFormExtendedApi.md
@@ -0,0 +1,64 @@
+---
+id: PreactFormExtendedApi
+title: PreactFormExtendedApi
+---
+
+# Type Alias: PreactFormExtendedApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+```ts
+type PreactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & PreactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useForm.tsx:113](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useForm.tsx#L113)
+
+An extended version of the `FormApi` class that includes Preact-specific functionalities from `PreactFormApi`
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
diff --git a/mintlify/form/framework/preact/reference/type-aliases/PropsWithChildren.md b/mintlify/form/framework/preact/reference/type-aliases/PropsWithChildren.md
new file mode 100644
index 000000000..d2e052bb1
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/PropsWithChildren.md
@@ -0,0 +1,26 @@
+---
+id: PropsWithChildren
+title: PropsWithChildren
+---
+
+# Type Alias: PropsWithChildren\<P\>
+
+```ts
+type PropsWithChildren<P> = P & object;
+```
+
+Defined in: [packages/preact-form/src/types.ts:141](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L141)
+
+## Type Declaration
+
+### children?
+
+```ts
+optional children: ComponentChildren;
+```
+
+## Type Parameters
+
+### P
+
+`P` = `unknown`
diff --git a/mintlify/form/framework/preact/reference/type-aliases/ServerFormState.md b/mintlify/form/framework/preact/reference/type-aliases/ServerFormState.md
new file mode 100644
index 000000000..05d93863e
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/ServerFormState.md
@@ -0,0 +1,22 @@
+---
+id: ServerFormState
+title: ServerFormState
+---
+
+# Type Alias: ServerFormState\&lt;TFormData, TOnServer\>
+
+```ts
+type ServerFormState<TFormData, TOnServer> = Pick<FormState<TFormData, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, TOnServer>, "values" | "errors" | "errorMap">;
+```
+
+Defined in: [packages/preact-form/src/types.ts:121](https://github.com/TanStack/form/blob/main/packages/preact-form/src/types.ts#L121)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
diff --git a/mintlify/form/framework/preact/reference/type-aliases/UseField.md b/mintlify/form/framework/preact/reference/type-aliases/UseField.md
new file mode 100644
index 000000000..35d01d6e3
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/UseField.md
@@ -0,0 +1,122 @@
+---
+id: UseField
+title: UseField
+---
+
+# Type Alias: UseField()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta\>
+
+```ts
+type UseField<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>(opts) => FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useField.tsx:24](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useField.tsx#L24)
+
+A type representing a hook for using a field in a form with the given form data type.
+
+A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Parameters
+
+### opts
+
+[`UseFieldOptionsBound`](/form/framework/preact/reference/interfaces/UseFieldOptionsBound)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+## Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
diff --git a/mintlify/form/framework/preact/reference/type-aliases/UseFormGroup.md b/mintlify/form/framework/preact/reference/type-aliases/UseFormGroup.md
new file mode 100644
index 000000000..c9b4bfce1
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/type-aliases/UseFormGroup.md
@@ -0,0 +1,130 @@
+---
+id: UseFormGroup
+title: UseFormGroup
+---
+
+# Type Alias: UseFormGroup()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type UseFormGroup<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>(opts) => FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/preact-form/src/useFormGroup.tsx:17](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useFormGroup.tsx#L17)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts
+
+`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/preact/reference/variables/Field.md b/mintlify/form/framework/preact/reference/variables/Field.md
new file mode 100644
index 000000000..516d9a8e5
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/variables/Field.md
@@ -0,0 +1,120 @@
+---
+id: Field
+title: Field
+---
+
+# Variable: Field()
+
+```ts
+const Field: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>(__namedParameters) => ComponentChildren;
+```
+
+Defined in: [packages/preact-form/src/useField.tsx:637](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useField.tsx#L637)
+
+A function component that takes field options and a render function as children and returns a React component.
+
+The `Field` component uses the `useField` hook internally to manage the field instance.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Parameters
+
+### \_\_namedParameters
+
+`FieldComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+## Returns
+
+`ComponentChildren`
diff --git a/mintlify/form/framework/preact/reference/variables/FormGroup.md b/mintlify/form/framework/preact/reference/variables/FormGroup.md
new file mode 100644
index 000000000..3bcc9094a
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/variables/FormGroup.md
@@ -0,0 +1,128 @@
+---
+id: FormGroup
+title: FormGroup
+---
+
+# Variable: FormGroup()
+
+```ts
+const FormGroup: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(__namedParameters) => ComponentChildren;
+```
+
+Defined in: [packages/preact-form/src/useFormGroup.tsx:639](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useFormGroup.tsx#L639)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### \_\_namedParameters
+
+`FormGroupComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`ComponentChildren`
diff --git a/mintlify/form/framework/preact/reference/variables/useIsomorphicLayoutEffect.md b/mintlify/form/framework/preact/reference/variables/useIsomorphicLayoutEffect.md
new file mode 100644
index 000000000..3b91e238c
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/variables/useIsomorphicLayoutEffect.md
@@ -0,0 +1,35 @@
+---
+id: useIsomorphicLayoutEffect
+title: useIsomorphicLayoutEffect
+---
+
+# Variable: useIsomorphicLayoutEffect()
+
+```ts
+const useIsomorphicLayoutEffect: (effect, inputs?) => void;
+```
+
+Defined in: [packages/preact-form/src/useIsomorphicLayoutEffect.ts:3](https://github.com/TanStack/form/blob/main/packages/preact-form/src/useIsomorphicLayoutEffect.ts#L3)
+
+Accepts a function that contains imperative, possibly effectful code.
+Use this to read layout from the DOM and synchronously re-render.
+Updates scheduled inside `useLayoutEffect` will be flushed synchronously, after all DOM mutations but before the browser has a chance to paint.
+Prefer the standard `useEffect` hook when possible to avoid blocking visual updates.
+
+## Parameters
+
+### effect
+
+`EffectCallback`
+
+Imperative function that can return a cleanup function
+
+### inputs?
+
+`Inputs`
+
+If present, effect will only activate if the values in the list change (using ===).
+
+## Returns
+
+`void`
diff --git a/mintlify/form/framework/preact/reference/variables/useStore.md b/mintlify/form/framework/preact/reference/variables/useStore.md
new file mode 100644
index 000000000..583c3916a
--- /dev/null
+++ b/mintlify/form/framework/preact/reference/variables/useStore.md
@@ -0,0 +1,58 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Variable: useStore()~~
+
+```ts
+const useStore: <TSource, TSelected>(source, selector?, compare?) => TSelected;
+```
+
+Defined in: node\_modules/.pnpm/@tanstack+preact-store@0.13.1\_preact@10.29.2/node\_modules/@tanstack/preact-store/dist/useStore.d.ts:12
+
+Deprecated alias for useSelector.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector?
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`TSelected`
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/form/framework/react/examples/array.md b/mintlify/form/framework/react/examples/array.md
new file mode 100644
index 000000000..67bc90fee
--- /dev/null
+++ b/mintlify/form/framework/react/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Arrays"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/devtools.md b/mintlify/form/framework/react/examples/devtools.md
new file mode 100644
index 000000000..f5768a7cc
--- /dev/null
+++ b/mintlify/form/framework/react/examples/devtools.md
@@ -0,0 +1,12 @@
+---
+title: "Devtools"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/devtools)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/devtools)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/dynamic.md b/mintlify/form/framework/react/examples/dynamic.md
new file mode 100644
index 000000000..9e26b73e0
--- /dev/null
+++ b/mintlify/form/framework/react/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic Validation"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/field-errors-from-form-validators.md b/mintlify/form/framework/react/examples/field-errors-from-form-validators.md
new file mode 100644
index 000000000..d80e7f5ae
--- /dev/null
+++ b/mintlify/form/framework/react/examples/field-errors-from-form-validators.md
@@ -0,0 +1,12 @@
+---
+title: "Field Errors From Form Validators"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/field-errors-from-form-validators)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/field-errors-from-form-validators)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/large-form.md b/mintlify/form/framework/react/examples/large-form.md
new file mode 100644
index 000000000..eb3fb8531
--- /dev/null
+++ b/mintlify/form/framework/react/examples/large-form.md
@@ -0,0 +1,12 @@
+---
+title: "Form Composition"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/large-form)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/large-form)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/multi-step-wizard.md b/mintlify/form/framework/react/examples/multi-step-wizard.md
new file mode 100644
index 000000000..8eb461f8e
--- /dev/null
+++ b/mintlify/form/framework/react/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/next-server-actions.md b/mintlify/form/framework/react/examples/next-server-actions.md
new file mode 100644
index 000000000..bd8a10371
--- /dev/null
+++ b/mintlify/form/framework/react/examples/next-server-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Next Server Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/next-server-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/query-integration.md b/mintlify/form/framework/react/examples/query-integration.md
new file mode 100644
index 000000000..660bb4db1
--- /dev/null
+++ b/mintlify/form/framework/react/examples/query-integration.md
@@ -0,0 +1,12 @@
+---
+title: "TanStack Query Integration"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/query-integration)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/query-integration)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/remix.md b/mintlify/form/framework/react/examples/remix.md
new file mode 100644
index 000000000..e0ad6aca9
--- /dev/null
+++ b/mintlify/form/framework/react/examples/remix.md
@@ -0,0 +1,12 @@
+---
+title: "Remix"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/remix)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/remix)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/simple.md b/mintlify/form/framework/react/examples/simple.md
new file mode 100644
index 000000000..35ca8a573
--- /dev/null
+++ b/mintlify/form/framework/react/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/standard-schema.md b/mintlify/form/framework/react/examples/standard-schema.md
new file mode 100644
index 000000000..ff5ff5c00
--- /dev/null
+++ b/mintlify/form/framework/react/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/tanstack-start.md b/mintlify/form/framework/react/examples/tanstack-start.md
new file mode 100644
index 000000000..5c87c435b
--- /dev/null
+++ b/mintlify/form/framework/react/examples/tanstack-start.md
@@ -0,0 +1,12 @@
+---
+title: "TanStack Start"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/tanstack-start)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/tanstack-start)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/examples/ui-libraries.md b/mintlify/form/framework/react/examples/ui-libraries.md
new file mode 100644
index 000000000..c5246bb71
--- /dev/null
+++ b/mintlify/form/framework/react/examples/ui-libraries.md
@@ -0,0 +1,12 @@
+---
+title: "UI Libraries"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/examples/ui-libraries)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/react/ui-libraries)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/guides/arrays.md b/mintlify/form/framework/react/guides/arrays.md
new file mode 100644
index 000000000..90a5e49f4
--- /dev/null
+++ b/mintlify/form/framework/react/guides/arrays.md
@@ -0,0 +1,124 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value:
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+  })
+
+  return (
+    <form.Field name="people" mode="array">
+      {(field) => (
+        <div>
+          {field.state.value.map((_, i) => {
+            // ...
+          })}
+        </div>
+      )}
+    </form.Field>
+  )
+}
+```
+
+This will generate the mapped JSX every time you run `pushValue` on `field`:
+
+```jsx
+<button onClick={() => field.pushValue({ name: '', age: 0 })} type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```jsx
+<form.Field key={i} name={`people[${i}].name`}>
+  {(subField) => (
+    <input
+      value={subField.state.value}
+      onChange={(e) => subField.handleChange(e.target.value)}
+    />
+  )}
+</form.Field>
+```
+
+## Full Example
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.Field name="people" mode="array">
+          {(field) => {
+            return (
+              <div>
+                {field.state.value.map((_, i) => {
+                  return (
+                    <form.Field key={i} name={`people[${i}].name`}>
+                      {(subField) => {
+                        return (
+                          <div>
+                            <label>
+                              <div>Name for person {i}</div>
+                              <input
+                                value={subField.state.value}
+                                onChange={(e) =>
+                                  subField.handleChange(e.target.value)
+                                }
+                              />
+                            </label>
+                          </div>
+                        )
+                      }}
+                    </form.Field>
+                  )
+                })}
+                <button
+                  onClick={() => field.pushValue({ name: '', age: 0 })}
+                  type="button"
+                >
+                  Add person
+                </button>
+              </div>
+            )
+          }}
+        </form.Field>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <button type="submit" disabled={!canSubmit}>
+              {isSubmitting ? '...' : 'Submit'}
+            </button>
+          )}
+        />
+      </form>
+    </div>
+  )
+}
+```
diff --git a/mintlify/form/framework/react/guides/async-initial-values.md b/mintlify/form/framework/react/guides/async-initial-values.md
new file mode 100644
index 000000000..a8c647431
--- /dev/null
+++ b/mintlify/form/framework/react/guides/async-initial-values.md
@@ -0,0 +1,51 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+import { useQuery } from '@tanstack/react-query'
+
+export default function App() {
+  const {data, isLoading} = useQuery({
+    queryKey: ['data'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return {firstName: 'FirstName', lastName: "LastName"}
+    }
+  })
+
+  const form = useForm({
+    defaultValues: {
+      firstName: data?.firstName ?? '',
+      lastName: data?.lastName ?? '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  if (isLoading) return <p>Loading...</p>
+
+  return (
+    // ...
+  )
+}
+```
+
+This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values.
diff --git a/mintlify/form/framework/react/guides/basic-concepts.md b/mintlify/form/framework/react/guides/basic-concepts.md
new file mode 100644
index 000000000..f7f90ee0a
--- /dev/null
+++ b/mintlify/form/framework/react/guides/basic-concepts.md
@@ -0,0 +1,402 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/react-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Options
+
+You can customize your form by creating configuration options with the `formOptions` function. These options can be shared between multiple forms.
+
+Example:
+
+```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
+const formOpts = formOptions({
+  defaultValues: defaultUser,
+})
+```
+
+## Form Instance
+
+A Form instance is an object that represents an individual form and provides methods and properties for working with the form. You create a Form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```tsx
+const form = useForm({
+  ...formOpts,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+You may also create a Form instance without using `formOptions` by using the standalone `useForm` API:
+
+```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
+const form = useForm({
+  defaultValues: defaultUser,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the Form instance. The component accepts a `name` prop, which should match a key in the form's default values. It also accepts a `children` prop, which is a render prop function that takes a `field` object as its argument.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  children={(field) => (
+    <>
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      <FieldInfo field={field} />
+    </>
+  )}
+/>
+```
+
+If you run into issues handling `children` as props, make sure to check your linting rules.
+
+Example (ESLint):
+
+```json
+  "rules": {
+    "react/no-children-prop": [
+      true,
+      {
+        "allowFunctions": true
+      }
+    ],
+  }
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field.state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful for seeing how the user interacts with a field:
+
+- **isTouched**: is `true` once the user changes or blurs the field
+- **isDirty**: is `true` once the field's value is changed, even if it's reverted to the default. Opposite of `isPristine`
+- **isPristine**: is `true` until the user changes the field's value. Opposite of `isDirty`
+- **isBlurred**: is `true` once the field loses focus (is blurred)
+- **isDefaultValue**: is `true` when the field's current value is the default value
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. However, we have introduced the `isDefaultValue` flag to also support a non-persistent 'dirty' state.
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
+
+Example:
+
+```tsx
+<input
+  value={field.state.value}
+  onBlur={field.handleBlur}
+  onChange={(e) => field.handleChange(e.target.value)}
+/>
+```
+
+## Validation
+
+`@tanstack/react-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  validators={{
+    onChange: ({ value }) =>
+      !value
+        ? 'A first name is required'
+        : value.length < 3
+          ? 'First name must be at least 3 characters'
+          : undefined,
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value.includes('error') && 'No "error" allowed in first name'
+    },
+  }}
+  children={(field) => (
+    <>
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      <FieldInfo field={field} />
+    </>
+  )}
+/>
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+```tsx
+import { z } from 'zod'
+
+const userSchema = z.object({
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    validators: {
+      onChange: userSchema,
+    },
+  })
+  return (
+    <div>
+      <form.Field
+        name="age"
+        children={(field) => {
+          return <>{/* ... */}</>
+        }}
+      />
+    </div>
+  )
+}
+```
+
+## Reactivity
+
+`@tanstack/react-form` offers various ways to subscribe to form and field state changes, most notably the `useStore(form.store)` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+
+Example:
+
+```tsx
+const firstName = useStore(form.store, (state) => state.values.firstName)
+//...
+<form.Subscribe
+  selector={(state) => [state.canSubmit, state.isSubmitting]}
+  children={([canSubmit, isSubmitting]) => (
+    <button type="submit" disabled={!canSubmit}>
+      {isSubmitting ? '...' : 'Submit'}
+    </button>
+  )}
+/>
+```
+
+It is important to remember that while the `useStore` hook's `selector` prop is optional, it is strongly recommended to provide one, as omitting it will result in unnecessary re-renders.
+
+```tsx
+// Correct use
+const firstName = useStore(form.store, (state) => state.values.firstName)
+const errors = useStore(form.store, (state) => state.errorMap)
+// Incorrect use
+const store = useStore(form.store)
+```
+
+Note: The usage of the `useField` hook to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `useStore(form.store)` instead.
+
+## Listeners
+
+`@tanstack/react-form` allows you to react to specific triggers and "listen" to them to dispatch side effects.
+
+Example:
+
+```tsx
+<form.Field
+  name="country"
+  listeners={{
+    onChange: ({ value }) => {
+      console.log(`Country changed to: ${value}, resetting province`)
+      form.setFieldValue('province', '')
+    },
+  }}
+/>
+```
+
+More information can be found at [Listeners](/form/framework/react/guides/listeners)
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
+
+When working with array fields, you can use the `pushValue`, `removeValue`, `swapValues`, and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```tsx
+<form.Field
+  name="hobbies"
+  mode="array"
+  children={(hobbiesField) => (
+    <div>
+      Hobbies
+      <div>
+        {!hobbiesField.state.value.length
+          ? 'No hobbies found.'
+          : hobbiesField.state.value.map((_, i) => (
+              <div key={i}>
+                <form.Field
+                  name={`hobbies[${i}].name`}
+                  children={(field) => {
+                    return (
+                      <div>
+                        <label htmlFor={field.name}>Name:</label>
+                        <input
+                          id={field.name}
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => hobbiesField.removeValue(i)}
+                        >
+                          X
+                        </button>
+                        <FieldInfo field={field} />
+                      </div>
+                    )
+                  }}
+                />
+                <form.Field
+                  name={`hobbies[${i}].description`}
+                  children={(field) => {
+                    return (
+                      <div>
+                        <label htmlFor={field.name}>Description:</label>
+                        <input
+                          id={field.name}
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldInfo field={field} />
+                      </div>
+                    )
+                  }}
+                />
+              </div>
+            ))}
+      </div>
+      <button
+        type="button"
+        onClick={() =>
+          hobbiesField.pushValue({
+            name: '',
+            description: '',
+            yearsOfExperience: 0,
+          })
+        }
+      >
+        Add hobby
+      </button>
+    </div>
+  )}
+/>
+```
+
+## Reset Buttons
+
+When using `<button type="reset">` with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
+Use `event.preventDefault()` inside the button's `onClick` handler to prevent the native form reset.
+
+Example:
+
+```tsx
+<button
+  type="reset"
+  onClick={(event) => {
+    event.preventDefault()
+    form.reset()
+  }}
+>
+  Reset
+</button>
+```
+
+Alternatively, you can use `<button type="button">` to prevent the native HTML reset.
+
+```tsx
+<button
+  type="button"
+  onClick={() => {
+    form.reset()
+  }}
+>
+  Reset
+</button>
+```
+
+These are the basic concepts and terminology used in the `@tanstack/react-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/react/guides/custom-errors.md b/mintlify/form/framework/react/guides/custom-errors.md
new file mode 100644
index 000000000..3a78ae528
--- /dev/null
+++ b/mintlify/form/framework/react/guides/custom-errors.md
@@ -0,0 +1,277 @@
+---
+id: custom-errors
+title: Custom Errors
+---
+
+TanStack Form provides complete flexibility in the types of error values you can return from validators. String errors are the most common and easy to work with, but the library allows you to return any type of value from your validators.
+
+As a general rule, any truthy value is considered an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc.) mean there is no error, and the form or field is valid.
+
+## Return String Values from Forms
+
+```tsx
+<form.Field
+  name="username"
+  validators={{
+    onChange: ({ value }) =>
+      value.length < 3 ? 'Username must be at least 3 characters' : undefined,
+  }}
+/>
+```
+
+For form-level validation affecting multiple fields:
+
+```tsx
+const form = useForm({
+  defaultValues: {
+    username: '',
+    email: '',
+  },
+  validators: {
+    onChange: ({ value }) => {
+      return {
+        fields: {
+          username:
+            value.username.length < 3 ? 'Username too short' : undefined,
+          email: !value.email.includes('@') ? 'Invalid email' : undefined,
+        },
+      }
+    },
+  },
+})
+```
+
+String errors are the most common type and are easily displayed in your UI:
+
+```tsx
+{
+  field.state.meta.errors.map((error, i) => (
+    <div key={i} className="error">
+      {error}
+    </div>
+  ))
+}
+```
+
+### Numbers
+
+Useful for representing quantities, thresholds, or magnitudes:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 18 ? 18 - value : undefined),
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+// TypeScript knows the error is a number based on your validator
+<div className="error">
+  You need {field.state.meta.errors[0]} more years to be eligible
+</div>
+```
+
+### Booleans
+
+Simple flags to indicate error state:
+
+```tsx
+<form.Field
+  name="accepted"
+  validators={{
+    onChange: ({ value }) => (!value ? true : undefined),
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  field.state.meta.errors[0] === true && (
+    <div className="error">You must accept the terms</div>
+  )
+}
+```
+
+### Objects
+
+Rich error objects with multiple properties:
+
+```tsx
+<form.Field
+  name="email"
+  validators={{
+    onChange: ({ value }) => {
+      if (!value.includes('@')) {
+        return {
+          message: 'Invalid email format',
+          severity: 'error',
+          code: 1001,
+        }
+      }
+      return undefined
+    },
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  typeof field.state.meta.errors[0] === 'object' && (
+    <div className={`error ${field.state.meta.errors[0].severity}`}>
+      {field.state.meta.errors[0].message}
+      <small> (Code: {field.state.meta.errors[0].code})</small>
+    </div>
+  )
+}
+```
+
+In the example above, the rendered message, code and styling depend on the event error you want to display.
+
+### Arrays
+
+Multiple error messages for a single field:
+
+```tsx
+<form.Field
+  name="password"
+  validators={{
+    onChange: ({ value }) => {
+      const errors = []
+      if (value.length < 8) errors.push('Password too short')
+      if (!/[A-Z]/.test(value)) errors.push('Missing uppercase letter')
+      if (!/[0-9]/.test(value)) errors.push('Missing number')
+
+      return errors.length ? errors : undefined
+    },
+  }}
+/>
+```
+
+Display in UI:
+
+```tsx
+{
+  Array.isArray(field.state.meta.errors) && (
+    <ul className="error-list">
+      {field.state.meta.errors.map((err, i) => (
+        <li key={i}>{err}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+## The `disableErrorFlat` Prop on Fields
+
+By default, TanStack Form flattens errors from all validation sources (`onChange`, `onBlur`, `onSubmit`) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
+
+```tsx
+<form.Field
+  name="email"
+  disableErrorFlat
+  validators={{
+    onChange: ({ value }) =>
+      !value.includes('@') ? 'Invalid email format' : undefined,
+    onBlur: ({ value }) =>
+      !value.endsWith('.com') ? 'Only .com domains allowed' : undefined,
+    onSubmit: ({ value }) => (value.length < 5 ? 'Email too short' : undefined),
+  }}
+/>
+```
+
+Without `disableErrorFlat`, all errors would be combined into `field.state.meta.errors`. With it, you can access errors by their source:
+
+```tsx
+{
+  field.state.meta.errorMap.onChange && (
+    <div className="real-time-error">{field.state.meta.errorMap.onChange}</div>
+  )
+}
+
+{
+  field.state.meta.errorMap.onBlur && (
+    <div className="blur-feedback">{field.state.meta.errorMap.onBlur}</div>
+  )
+}
+
+{
+  field.state.meta.errorMap.onSubmit && (
+    <div className="submit-error">{field.state.meta.errorMap.onSubmit}</div>
+  )
+}
+```
+
+This is useful for:
+
+- Displaying different types of errors with different UI treatments
+- Prioritizing errors (e.g., showing submission errors more prominently)
+- Implementing progressive disclosure of errors
+
+## Type Safety of `errors` and `errorMap`
+
+TanStack Form provides strong type safety for error handling. Each key in the `errorMap` has exactly the type returned by its corresponding validator, while the `errors` array contains a union type of all the possible error values from all validators:
+
+```tsx
+<form.Field
+  name="password"
+  validators={{
+    onChange: ({ value }) => {
+      // This returns a string or undefined
+      return value.length < 8 ? 'Too short' : undefined
+    },
+    onBlur: ({ value }) => {
+      // This returns an object or undefined
+      if (!/[A-Z]/.test(value)) {
+        return { message: 'Missing uppercase', level: 'warning' }
+      }
+      return undefined
+    },
+  }}
+  children={(field) => {
+    // TypeScript knows that errors[0] can be string | { message: string, level: string } | undefined
+    const error = field.state.meta.errors[0]
+
+    // Type-safe error handling
+    if (typeof error === 'string') {
+      return <div className="string-error">{error}</div>
+    } else if (error && typeof error === 'object') {
+      return <div className={error.level}>{error.message}</div>
+    }
+
+    return null
+  }}
+/>
+```
+
+The `errorMap` property is also fully typed, matching the return types of your validation functions:
+
+```tsx
+// With disableErrorFlat
+<form.Field
+  name="email"
+  disableErrorFlat
+  validators={{
+    onChange: ({ value }): string | undefined =>
+      !value.includes("@") ? "Invalid email" : undefined,
+    onBlur: ({ value }): { code: number, message: string } | undefined =>
+      !value.endsWith(".com") ? { code: 100, message: "Wrong domain" } : undefined
+  }}
+  children={(field) => {
+    // TypeScript knows the exact type of each error source
+    const onChangeError: string | undefined = field.state.meta.errorMap.onChange;
+    const onBlurError: { code: number, message: string } | undefined = field.state.meta.errorMap.onBlur;
+
+    return (/* ... */);
+  }}
+/>
+```
+
+This type safety helps catch errors at compile time instead of runtime, making your code more reliable and maintainable.
diff --git a/mintlify/form/framework/react/guides/debugging.md b/mintlify/form/framework/react/guides/debugging.md
new file mode 100644
index 000000000..97940af60
--- /dev/null
+++ b/mintlify/form/framework/react/guides/debugging.md
@@ -0,0 +1,43 @@
+---
+id: debugging
+title: Debugging React Usage
+---
+
+Here's a list of common errors you might see in the console and how to fix them.
+
+## Changing an uncontrolled input to be controlled
+
+If you see this error in the console:
+
+```
+Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
+```
+
+It's likely you forgot the `defaultValues` in your `useForm` Hook or `form.Field` component usage. This is occurring
+because the input is being rendered before the form value is initialized and is therefore changing from `undefined` to `""` when a text input is made.
+
+## Field value is of type `unknown`
+
+If you're using `form.Field` and, upon inspecting the value of `field.state.value`, you see that the value of a field is of type `unknown`, it's likely that your form's type was too large for us to safely evaluate.
+
+This typically is a sign that you should break down your form into smaller forms or use a more specific type for your form.
+
+A workaround to this problem is to cast `field.state.value` using TypeScript's `as` keyword:
+
+```tsx
+const value = field.state.value as string
+```
+
+## `Type instantiation is excessively deep and possibly infinite`
+
+If you see this error in the console when running `tsc`:
+
+```
+Type instantiation is excessively deep and possibly infinite
+```
+
+You've run into a bug that we didn't catch in our type definitions. While we've done our best to make sure our types are as accurate as possible, there are some edge cases where TypeScript struggled with the complexity of our types.
+
+Please [report this issue to us on GitHub](https://github.com/TanStack/form/issues) so we can fix it. Just make sure to include a minimal reproduction so that we're able to help you debug.
+
+> Keep in mind that this error is a TypeScript error and not a runtime error. This means that your code will still run on the user's machine as expected.
diff --git a/mintlify/form/framework/react/guides/devtools.md b/mintlify/form/framework/react/guides/devtools.md
new file mode 100644
index 000000000..2fddb344b
--- /dev/null
+++ b/mintlify/form/framework/react/guides/devtools.md
@@ -0,0 +1,52 @@
+---
+id: devtools
+title: Devtools
+---
+
+TanStack Form comes with a ready-to-go suite of devtools.
+
+## Setup
+
+Install the [TanStack Devtools](/devtools/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/react-form-devtools), from the framework adapter that you're working in (in this case `@tanstack/react-devtools` and `@tanstack/react-form-devtools`).
+
+```bash
+npm i @tanstack/react-devtools
+npm i @tanstack/react-form-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtools`.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools />
+  </StrictMode>,
+)
+```
+
+Import the `formDevtoolsPlugin` from **TanStack Form** and provide it to the `TanStackDevtools` component.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
+  </StrictMode>,
+)
+```
+
+Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
+
+A complete working example can be found in our [examples section](/form/framework/react/examples/devtools).
diff --git a/mintlify/form/framework/react/guides/dynamic-validation.md b/mintlify/form/framework/react/guides/dynamic-validation.md
new file mode 100644
index 000000000..9d375264a
--- /dev/null
+++ b/mintlify/form/framework/react/guides/dynamic-validation.md
@@ -0,0 +1,225 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```tsx
+import { revalidateLogic, useForm } from '@tanstack/react-form'
+
+// ...
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  // If this is omitted, `onDynamic` will not be called
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+})
+```
+
+> [!IMPORTANT]
+> By default, `onDynamic` is not called; therefore you must pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and to change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```tsx
+const form = useForm({
+  // ...
+  validationLogic: revalidateLogic({
+    mode: 'submit',
+    modeAfterSubmission: 'blur',
+  }),
+  // ...
+})
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+
+```tsx
+function App() {
+  const form = useForm({
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  return <p>{form.state.errorMap.onDynamic?.firstName}</p>
+}
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```tsx
+import { revalidateLogic, useForm } from '@tanstack/react-form'
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  })
+
+  return (
+    <div>
+      <p>{form.state.errorMap.onChange?.firstName}</p>
+      <p>{form.state.errorMap.onDynamic?.lastName}</p>
+    </div>
+  )
+}
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name={'age'}
+        validators={{
+          onDynamic: ({ value }) =>
+            value > 18 ? undefined : 'Age must be greater than 18',
+        }}
+        children={(field) => (
+          <div>
+            <input
+              type="number"
+              onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              onBlur={field.handleBlur}
+              value={field.state.value}
+            />
+            <p style={{ color: 'red' }}>
+              {field.state.meta.errorMap.onDynamic}
+            </p>
+          </div>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamicAsync` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```tsx
+const form = useForm({
+  defaultValues: {
+    username: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+    onDynamicAsync: async ({ value }) => {
+      if (!value.username) {
+        return { username: 'Username is required' }
+      }
+      // Simulate an async validation
+      const isValid = await validateUsername(value.username)
+      return isValid ? undefined : { username: 'Username is already taken' }
+    },
+  },
+})
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```tsx
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: schema,
+  },
+})
+```
diff --git a/mintlify/form/framework/react/guides/focus-management.md b/mintlify/form/framework/react/guides/focus-management.md
new file mode 100644
index 000000000..55040aa31
--- /dev/null
+++ b/mintlify/form/framework/react/guides/focus-management.md
@@ -0,0 +1,142 @@
+---
+id: focus-management
+title: Focus Management
+---
+
+In some instances, you may want to focus the first input with an error.
+
+[Because TanStack Form intentionally does not have insights into your markup](/form/philosophy), we cannot add a built-in focus management feature.
+
+However, you can easily add this feature into your application without this hypothetical built-in feature.
+
+## React DOM
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+import { z } from 'zod'
+
+export default function App() {
+  const form = useForm({
+    defaultValues: { age: 0 },
+    validators: {
+      onChange: z.object({
+        age: z.number().min(12),
+      }),
+    },
+    onSubmit() {
+      alert('Submitted!')
+    },
+    onSubmitInvalid() {
+      const InvalidInput = document.querySelector(
+        '[aria-invalid="true"]',
+      ) as HTMLInputElement
+
+      InvalidInput?.focus()
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        void form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="age"
+        children={(field) => (
+          <label>
+            Age
+            <input
+              name={field.name}
+              value={field.state.value}
+              aria-invalid={
+                !field.state.meta.isValid && field.state.meta.isTouched
+              }
+              onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              type="number"
+            />
+          </label>
+        )}
+      />
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    </form>
+  )
+}
+```
+
+## React Native
+
+Because React Native doesn't have access to the DOM's `querySelectorAll` API, we need to manually manage the element list
+of the inputs. This allows us to focus the first input with an error:
+
+```tsx
+import { useRef } from 'react'
+import { Text, View, TextInput, Button, Alert } from 'react-native'
+import { useForm } from '@tanstack/react-form'
+import { z } from 'zod'
+
+export default function App() {
+  // This can be extracted to a hook that returns the `fields` ref, a `focusFirstField` function, and a `addField` function
+  const fields = useRef([] as Array<{ input: TextInput; name: string }>)
+
+  const form = useForm({
+    defaultValues: { age: 0 },
+    validators: {
+      onChange: z.object({
+        age: z.number().min(12),
+      }),
+    },
+    onSubmit() {
+      Alert.alert('Submitted!')
+    },
+    onSubmitInvalid({ formApi }) {
+      const errorMap = formApi.state.errorMap.onChange
+      const inputs = fields.current
+
+      let firstInput
+      for (const input of inputs) {
+        if (!input || !input.input) continue
+        if (!!errorMap[input.name]) {
+          firstInput = input.input
+          break
+        }
+      }
+      firstInput?.focus()
+    },
+  })
+
+  return (
+    <View style={{ padding: 16 }}>
+      <form.Field
+        name="age"
+        children={(field) => (
+          <View style={{ marginVertical: 16 }}>
+            <Text>Age</Text>
+            <TextInput
+              keyboardType="numeric"
+              ref={(input) => {
+                // fields.current needs to be manually incremented so that we know what fields are rendered or not and in what order
+                fields.current[0] = { input, name: field.name }
+              }}
+              style={{
+                borderWidth: 1,
+                borderColor: '#999999',
+                borderRadius: 4,
+                marginTop: 8,
+                padding: 8,
+              }}
+              onChangeText={(val) => field.handleChange(Number(val))}
+              value={field.state.value}
+            />
+          </View>
+        )}
+      />
+      <Button title="Submit" onPress={form.handleSubmit} />
+    </View>
+  )
+}
+```
diff --git a/mintlify/form/framework/react/guides/form-composition.md b/mintlify/form/framework/react/guides/form-composition.md
new file mode 100644
index 000000000..ad1dcf101
--- /dev/null
+++ b/mintlify/form/framework/react/guides/form-composition.md
@@ -0,0 +1,765 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is that it is verbose out-of-the-box. While this verbosity _can_ be useful for educational purposes - helping to enforce understanding of our APIs - it's not ideal in production use cases.
+
+As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
+
+## Custom Form Hooks
+
+The most powerful way to compose forms is to create custom form hooks. This allows you to create a form hook that is tailored to your application's needs, including pre-bound custom UI components and more.
+
+At it's most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook.
+
+> This un-customized `useAppForm` hook is identical to `useForm`, but that will quickly change as we add more options to `createFormHook`.
+
+```tsx AppFormContext.tsx
+import { createFormHookContexts } from '@tanstack/react-form'
+
+// export useFieldContext for use in your custom components
+export const { fieldContext, formContext, useFieldContext } =
+  createFormHookContexts()
+```
+
+```tsx AppForm.tsx
+import { createFormHook } from '@tanstack/react-form'
+import { createFormHookContexts } from './AppFormContext'
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  // We'll learn more about these options later
+  fieldComponents: {},
+  formComponents: {},
+})
+
+function App() {
+  const form = useAppForm({
+    // Supports all useForm options
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return <form.Field /> // ...
+}
+```
+
+### Pre-bound Field Components
+
+Once this scaffolding is in place, you can start adding custom field and form components to your form hook.
+
+> Note: the `useFieldContext` must be the same one exported from your custom form context
+
+```tsx
+import { useFieldContext } from './form-context.tsx'
+
+export function TextField({ label }: { label: string }) {
+  // The `Field` infers that it should have a `value` type of `string`
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+You're then able to register this component with your form hook.
+
+```tsx
+import { TextField } from './text-field.tsx'
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+And use it in your form:
+
+```tsx
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return (
+    // Notice the `AppField` instead of `Field`; `AppField` provides the required context
+    <form.AppField
+      name="firstName"
+      children={(field) => <field.TextField label="First Name" />}
+    />
+  )
+}
+```
+
+This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Mistyping `firstName` will result in a TypeScript error.
+
+#### A note on performance
+
+While context is a valuable tool in the React ecosystem, there's appropriate concern from many users that providing a reactive value through a context will cause unnecessary re-renders.
+
+> Unfamiliar with this performance concern? [Mark Erikson's blog post explaining why Redux solves many of these problems](https://blog.isquaredsoftware.com/2021/01/context-redux-differences/) is a great place to start.
+
+While this is a good concern to call out, it's not a problem for TanStack Form; the values provided through context are not reactive themselves, but instead are static class instances with reactive properties ([using TanStack Store as our signals implementation to power the show](https://tanstack.com/store)).
+
+### Pre-bound Form Components
+
+While `form.AppField` solves many of the problems with Field boilerplate and reusability, it doesn't solve the problem of _form_ boilerplate and reusability.
+
+In particular, being able to share instances of `form.Subscribe` for, say, a reactive form submission button is a common usecase.
+
+```tsx
+function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button type="submit" disabled={isSubmitting}>
+          {label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {},
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return (
+    <form.AppForm>
+      // Notice the `AppForm` component wrapper; `AppForm` provides the required
+      context
+      <form.SubscribeButton label="Submit" />
+    </form.AppForm>
+  )
+}
+```
+
+### Extending custom appForm
+
+It is quite common for platform teams to ship pre built appForms. It can be exported from a library in a monorepo or as a standalone package on npm.
+
+```tsx weyland-yutan-corp/forms-context.tsx
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+  createFormHookContexts()
+```
+
+```tsx weyland-yutan-corp/forms.tsx
+import { createFormHook } from '@tanstack/react-form'
+import { fieldContext, formContext } from 'weyland-yutan-corp/forms-context'
+
+// fields
+import { UserIdField } from './FieldComponents/UserIdField'
+
+// components
+import { SubmitButton } from './FormComponents/SubmitButton'
+
+const ProfileForm = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: { UserIdField },
+  formComponents: { SubmitButton },
+})
+
+export default ProfileForm
+```
+
+There is a situation that you might have a field exclusive to a downstream dev team, in such a case you can extend the AppForm like so.
+
+1 - Create new AppForm fields
+
+```tsx AppForm.tsx
+// imported from the same AppForm you want to extend
+import { useFieldContext } from 'weyland-yutan-corp/forms-context'
+
+export function CustomTextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+  return (
+    <div>
+      <label>{/* rest of component */}</label>
+    </div>
+  )
+}
+```
+
+2 - Extend the AppForm
+
+```tsx AppForm.tsx
+// notice the same import as above
+import ProfileForm from 'weyland-yutan-corp/forms'
+
+import { CustomTextField } from './FieldComponents/CustomTextField'
+import { SubmitButton } from './FormComponents/SubmitButton'
+
+export const { useAppForm } = ProfileForm.extendForm({
+  fieldComponents: { CustomTextField },
+  // Ts will error since the parent appForm already has a component called SubmitButton
+  formComponents: { SubmitButton },
+})
+```
+
+This way you can add extra fields that are unique to your team without bloating the upstream AppForm.
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code in single files.
+
+To solve this, we support breaking forms into smaller pieces using the `withForm` higher-order component.
+
+```tsx
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+const ChildForm = withForm({
+  // These values are only used for type-checking, and are not used at runtime
+  // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These props are also set as default values for the `render` function
+    title: 'Child Form',
+  },
+  render: function Render({ form, title }) {
+    return (
+      <div>
+        <p>{title}</p>
+        <form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <form.AppForm>
+          <form.SubscribeButton label="Submit" />
+        </form.AppForm>
+      </div>
+    )
+  },
+})
+
+function App() {
+  const form = useAppForm({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  })
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+> Something worth mentioning, is that while multiple chaining of `AppForm` extensions is possible it is can lead to decreases in TypeScript performance.
+> For most users that may only extend an appForm once this isn't a problem, however we recommend limiting it to 3-5 extensions.
+
+### `withForm` FAQ
+
+> Why a higher-order component instead of a hook?
+
+While hooks are the future of React, higher-order components are still a powerful tool for composition. In particular, the API of `withForm` enables us to have strong type-safety without requiring users to pass generics.
+
+> Why am I getting ESLint errors about hooks in `render`?
+
+ESLint looks for hooks in the top-level of a function, and `render` may not be recogized as a top-level component, depending on how you defined it.
+
+```tsx
+// This will cause ESLint errors with hooks usage
+const ChildForm = withForm({
+  // ...
+  render: ({ form, title }) => {
+    // ...
+  },
+})
+```
+
+```tsx
+// This works fine
+const ChildForm = withForm({
+  // ...
+  render: function Render({ form, title }) {
+    // ...
+  },
+})
+```
+
+### Context as a last resort
+
+There are cases where passing `form` with `withForm` is not feasible. You may encounter it with components that don't
+allow you to change their props.
+
+For example, consider the following TanStack Router usage:
+
+```ts
+function RouteComponent() {
+  const form = useAppForm({...formOptions, /* ... */ })
+  // <Outlet /> cannot be customized or receive additional props
+  return <Outlet />
+}
+```
+
+In edge cases like this, a context-based fallback is available to access the form instance.
+
+```ts
+const { useAppForm, useTypedAppFormContext } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {},
+  formComponents: {},
+})
+```
+
+> [!IMPORTANT] Type safety
+> This mechanism exists solely to bridge integration constraints and should be avoided whenever `withForm` is possible.
+> Context will not warn you when the types do not align. You risk runtime errors with this implementation.
+
+Usage:
+
+```tsx
+// sharedOpts.ts
+const formOpts = formOptions({
+  /* ... */
+})
+
+function ParentComponent() {
+  const form = useAppForm({ ...formOptions /* ... */ })
+
+  return (
+    <form.AppForm>
+      <ChildComponent />
+    </form.AppForm>
+  )
+}
+
+function ChildComponent() {
+  const form = useTypedAppFormContext({ ...formOptions })
+
+  // You now have access to form components, field components and fields
+}
+```
+
+## Reusing groups of fields in multiple forms
+
+Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](/form/framework/react/guides/linked-fields). Instead of repeating this logic across multiple forms, you can utilize the `withFieldGroup` higher-order component.
+
+> Unlike `withForm`, validators cannot be specified and could be any value.
+> Ensure that your fields can accept unknown error types.
+
+Rewriting the passwords example using `withFieldGroup` would look like this:
+
+```tsx
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+    ErrorInfo,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+type PasswordFields = {
+  password: string
+  confirm_password: string
+}
+
+// These default values are not used at runtime, but the keys are needed for mapping purposes.
+// This allows you to spread `formOptions` without needing to redeclare it.
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const FieldGroupPasswordFields = withFieldGroup({
+  defaultValues,
+  // You may also restrict the group to only use forms that implement this submit meta.
+  // If none is provided, any form with the right defaultValues may use it.
+  // onSubmitMeta: { action: '' }
+
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These default values are also for type-checking and are not used at runtime
+    title: 'Password',
+  },
+  // Internally, you will have access to a `group` instead of a `form`
+  render: function Render({ group, title }) {
+    // access reactive values using the group store
+    const password = useStore(group.store, (state) => state.values.password)
+    // or the form itself
+    const isSubmitting = useStore(
+      group.form.store,
+      (state) => state.isSubmitting,
+    )
+
+    return (
+      <div>
+        <h2>{title}</h2>
+        {/* Groups also have access to Field, Subscribe, Field, AppField and AppForm */}
+        <group.AppField name="password">
+          {(field) => <field.TextField label="Password" />}
+        </group.AppField>
+        <group.AppField
+          name="confirm_password"
+          validators={{
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) => {
+              // The form could be any values, so it is typed as 'unknown'
+              const values: unknown = fieldApi.form.state.values
+              // use the group methods instead
+              if (value !== group.getFieldValue('password')) {
+                return 'Passwords do not match'
+              }
+              return undefined
+            },
+          }}
+        >
+          {(field) => (
+            <div>
+              <field.TextField label="Confirm Password" />
+              <field.ErrorInfo />
+            </div>
+          )}
+        </group.AppField>
+      </div>
+    )
+  },
+})
+```
+
+We can now use these grouped fields in any form that implements the default values:
+
+```tsx
+// You are allowed to extend the group fields as long as the
+// existing properties remain unchanged
+type Account = PasswordFields & {
+  provider: string
+  username: string
+}
+
+// You may nest the group fields wherever you want
+type FormValues = {
+  name: string
+  age: number
+  account_data: PasswordFields
+  linked_accounts: Account[]
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  account_data: {
+    password: '',
+    confirm_password: '',
+  },
+  linked_accounts: [
+    {
+      provider: 'TanStack',
+      username: '',
+      password: '',
+      confirm_password: '',
+    },
+  ],
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+    // If the group didn't specify an `onSubmitMeta` property,
+    // the form may implement any meta it wants.
+    // Otherwise, the meta must be defined and match.
+    onSubmitMeta: { action: '' },
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You must specify where the fields can be found
+        fields="account_data"
+        title="Passwords"
+      />
+      <form.Field name="linked_accounts" mode="array">
+        {(field) =>
+          field.state.value.map((account, i) => (
+            <FieldGroupPasswordFields
+              key={account.provider}
+              form={form}
+              // The fields may be in nested fields
+              fields={`linked_accounts[${i}]`}
+              title={account.provider}
+            />
+          ))
+        }
+      </form.Field>
+    </form.AppForm>
+  )
+}
+```
+
+### Mapping field group values to a different field
+
+You may want to keep the password fields on the top level of your form, or rename the properties for clarity. You can map field group values
+to their true location by changing the `field` property:
+
+> [!IMPORTANT]
+> Due to TypeScript limitations, field mapping is only allowed for objects. You can use records or arrays at the top level of a field group, but you will not be able to map the fields.
+
+```tsx
+// To have an easier form, you can keep the fields on the top level
+type FormValues = {
+  name: string
+  age: number
+  password: string
+  confirm_password: string
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  password: '',
+  confirm_password: '',
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You can map the fields to their equivalent deep key
+        fields={{
+          password: 'password',
+          confirm_password: 'confirm_password',
+          // or map them to differently named keys entirely
+          // 'password': 'name'
+        }}
+        title="Passwords"
+      />
+    </form.AppForm>
+  )
+}
+```
+
+If you expect your fields to always be at the top level of your form, you can create a quick map
+of your field groups using a helper function:
+
+```tsx
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const passwordFields = createFieldMap(defaultValues)
+/* This generates the following map:
+ {
+    'password': 'password',
+    'confirm_password': 'confirm_password'
+ }
+*/
+
+// Usage:
+<FieldGroupPasswordFields
+  form={form}
+  fields={passwordFields}
+  title="Passwords"
+/>
+```
+
+## Tree-shaking form and field components
+
+While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
+In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form hook.
+
+To solve this, you can mix the `createFormHook` TanStack API with the React `lazy` and `Suspense` components:
+
+```typescript
+// src/hooks/form-context.ts
+import { createFormHookContexts } from '@tanstack/react-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+```
+
+```tsx
+// src/components/text-field.tsx
+import { useFieldContext } from '../hooks/form-context.tsx'
+
+export default function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+```tsx
+// src/hooks/form.ts
+import { lazy } from 'react'
+import { createFormHook } from '@tanstack/react-form'
+
+const TextField = lazy(() => import('../components/text-fields.tsx'))
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+```tsx
+// src/App.tsx
+import { Suspense } from 'react'
+import { PeoplePage } from './features/people/form.tsx'
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <PeoplePage />
+    </Suspense>
+  )
+}
+```
+
+This will show the Suspense fallback while the `TextField` component is being loaded, and then render the form once it's loaded.
+
+## Putting it all together
+
+Now that we've covered the basics of creating custom form hooks, let's put it all together in a single example.
+
+```tsx
+// /src/hooks/form.ts, to be used across the entire app
+const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+
+function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+
+function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+// /src/features/people/shared-form.ts, to be used across `people` features
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+
+// /src/features/people/nested-form.ts, to be used in the `people` page
+const ChildForm = withForm({
+  ...formOpts,
+  // Optional, but adds props to the `render` function outside of `form`
+  props: {
+    title: 'Child Form',
+  },
+  render: ({ form, title }) => {
+    return (
+      <div>
+        <p>{title}</p>
+        <form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <form.AppForm>
+          <form.SubscribeButton label="Submit" />
+        </form.AppForm>
+      </div>
+    )
+  },
+})
+
+// /src/features/people/page.ts
+const Parent = () => {
+  const form = useAppForm({
+    ...formOpts,
+  })
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+## API Usage Guidance
+
+Here's a chart to help you decide what APIs you should be using:
+
+![](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/react_form_composability.svg)
diff --git a/mintlify/form/framework/react/guides/form-groups.md b/mintlify/form/framework/react/guides/form-groups.md
new file mode 100644
index 000000000..ced64efc1
--- /dev/null
+++ b/mintlify/form/framework/react/guides/form-groups.md
@@ -0,0 +1,177 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `<form.FormGroup>`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `useForm` or [`useAppForm`](/form/framework/react/guides/form-composition) to create a `form` variable, then reference its `FormGroup` component like you would a `Field`:
+
+```tsx
+const form = useForm({
+    defaultValues: {
+        step1: {
+            name: ""
+        },
+        step2: {
+            age: 0
+        }
+    }
+})
+
+return (
+    <form.FormGroup
+        name="step1"
+        children={group => (
+            // `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue`
+            // ...
+        )}
+    />
+)
+```
+
+This becomes much more useful when paired with external state to conditionally render a `FormGroup`:
+
+```tsx
+const [step, setStep] = useState(0)
+const form = useForm({
+    defaultValues: {
+        step1: {
+            name: ""
+        },
+        step2: {
+            age: 0
+        }
+    }
+})
+
+return (
+    <>
+        {step === 0 ? <form.FormGroup
+            name="step1"
+            onGroupSubmit={() => {
+                // We can move the step forward when validation passes
+                setStep(step + 1)
+            }}
+            onGroupSubmitInvalid={() => {
+                // Or handle invalid submissions, just like a top-level form
+            }}
+            onSubmitMeta={{} as SomeType}
+            children={group => (
+                // Use `group.handleSubmit()` to submit the sub-form, but not the parent form
+                // ...
+            )}
+        /> : null }
+        {step === 1 ? <form.FormGroup
+            name="step2"
+            children={group => (
+                // Then, use `form.handleSubmit()` to submit the entire form
+                // ...
+            )}
+        /> : null }
+    </>
+)
+```
+
+## Form Group Validation
+
+Form groups have a distinct validation proceedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{ onChange: () => 'Error' }}
+  children={(group) => {
+    group.state.meta.errorMap // {onChange: "Error" | undefined}
+    group.state.meta.errors // ("Error")[]
+  }}
+/>
+```
+
+- Can set errors on sub-fields:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: ({ value, groupApi }) => ({
+      group: value.name === 'error' ? 'Group error' : undefined,
+      fields: {
+        // Must use the name of the field relative to the FormGroup as the error key,
+        // to stay consistent with how standard schema works with form groups
+        name: value.name === 'error' ? 'Field error' : undefined,
+      },
+    }),
+  }}
+/>
+```
+
+- And can even accept standard schemas:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: z.object({
+      name: z.string().min(2),
+    }),
+  }}
+/>
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```
+> const step1Schema = z.object(&#123;
+>     name: z.string().min(2)
+> &#125;)
+>
+> const schema = z.object(&#123;
+>     step1: step1Schema,
+>     step2: step2Schema
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/react/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `useForm`:
+
+```tsx
+useForm({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+})
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the `FormGroup` itself:
+
+```tsx
+<form.FormGroup validators={{ onDynamic: step1Schema }} />
+```
+
+It will treat `group.submissionAttempts` as the way to change what validator is ran before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group.state.meta.errors`, you're also able to access the group's value using `group.state.value`. Likewise, here are some valuable properties you can access in the `group.state.meta`:
+
+- `group.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/react/guides/linked-fields.md b/mintlify/form/framework/react/guides/linked-fields.md
new file mode 100644
index 000000000..75c7f98f2
--- /dev/null
+++ b/mintlify/form/framework/react/guides/linked-fields.md
@@ -0,0 +1,75 @@
+---
+id: linked-fields
+title: Link Two Form Fields Together
+---
+
+You may find yourself needing to link two fields together, such that one is validated when another's value has changed.
+One such use case is when you have both a `password` and a `confirm_password` field.
+Here, you want the `confirm_password` field to error out if its value doesn't match that of the `password` field, regardless of which field triggered the value change.
+
+Imagine the following user flow:
+
+- User updates the `confirm_password` field.
+- User updates the `password` field.
+
+In this example, the form will still have errors present because the `confirm_password` field's validation has not been re-run to mark the field as valid.
+
+To solve this, you need to make sure that the `confirm_password` field's validation is re-run when the `password` field is updated.
+To do this, you can add an `onChangeListenTo` prop to the `confirm_password` field.
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      password: '',
+      confirm_password: '',
+    },
+    // ...
+  })
+
+  return (
+    <div>
+      <form.Field name="password">
+        {(field) => (
+          <label>
+            <div>Password</div>
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+      <form.Field
+        name="confirm_password"
+        validators={{
+          onChangeListenTo: ['password'],
+          onChange: ({ value, fieldApi }) => {
+            if (value !== fieldApi.form.getFieldValue('password')) {
+              return 'Passwords do not match'
+            }
+            return undefined
+          },
+        }}
+      >
+        {(field) => (
+          <div>
+            <label>
+              <div>Confirm Password</div>
+              <input
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            </label>
+            {field.state.meta.errors.map((err) => (
+              <div key={err}>{err}</div>
+            ))}
+          </div>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+```
+
+This is similar to the `onBlurListenTo` prop, which re-runs the validation when the linked field is blurred.
diff --git a/mintlify/form/framework/react/guides/listeners.md b/mintlify/form/framework/react/guides/listeners.md
new file mode 100644
index 000000000..f42cb6dcd
--- /dev/null
+++ b/mintlify/form/framework/react/guides/listeners.md
@@ -0,0 +1,127 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the `onChange` event and dispatch a reset to the "province" field when the listener is fired.
+
+Events that can be "listened" to are:
+
+- `onChange`
+- `onBlur`
+- `onMount`
+- `onSubmit`
+- `onUnmount`
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      country: '',
+      province: '',
+    },
+    // ...
+  })
+
+  return (
+    <div>
+      <form.Field
+        name="country"
+        listeners={{
+          onChange: ({ value }) => {
+            console.log(`Country changed to: ${value}, resetting province`)
+            form.setFieldValue('province', '')
+          },
+        }}
+      >
+        {(field) => (
+          <label>
+            <div>Country</div>
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+
+      <form.Field name="province">
+        {(field) => (
+          <label>
+            <div>Province</div>
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+```
+
+### Built-in Debouncing
+
+If you are making an API request inside a listener, you may want to debounce the calls as it can lead to performance issues.
+We enable an easy method for debouncing your listeners by adding a `onChangeDebounceMs` or `onBlurDebounceMs`.
+
+```tsx
+<form.Field
+  name="country"
+  listeners={{
+    onChangeDebounceMs: 500, // 500ms debounce
+    onChange: ({ value }) => {
+      console.log(`Country changed to: ${value} without a change within 500ms, resetting province`)
+      form.setFieldValue('province', '')
+    },
+  }}
+>
+  {(field) => (
+    /* ... */
+  )}
+</form.Field>
+```
+
+### Form listeners
+
+At a higher level, listeners are also available at the form level, allowing you access to the `onMount` and `onSubmit` events, and having `onChange` and `onBlur` propagated to all the form's children. Form-level listeners can also be debounced in the same way as previously discussed.
+
+`onMount` and `onSubmit` listeners have the following parameters:
+
+- `formApi`
+
+`onChange` and `onBlur` listeners have access to:
+
+- `fieldApi`
+- `formApi`
+
+```tsx
+const form = useForm({
+  listeners: {
+    onMount: ({ formApi }) => {
+      // custom logging service
+      loggingService('mount', formApi.state.values)
+    },
+
+    onChange: ({ formApi, fieldApi }) => {
+      // autosave logic
+      if (formApi.state.isValid) {
+        formApi.handleSubmit()
+      }
+
+      // fieldApi represents the field that triggered the event.
+      console.log(fieldApi.name, fieldApi.state.value)
+    },
+    onChangeDebounceMs: 500,
+  },
+})
+```
diff --git a/mintlify/form/framework/react/guides/react-native.md b/mintlify/form/framework/react/guides/react-native.md
new file mode 100644
index 000000000..c098a6e82
--- /dev/null
+++ b/mintlify/form/framework/react/guides/react-native.md
@@ -0,0 +1,28 @@
+---
+id: react-native
+title: Usage with React Native
+---
+
+TanStack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.
+
+Here is an example:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: (val) =>
+      val < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <Text>Age:</Text>
+      <TextInput value={field.state.value} onChangeText={field.handleChange} />
+      {!field.state.meta.isValid && (
+        <Text>{field.state.meta.errors.join(', ')}</Text>
+      )}
+    </>
+  )}
+</form.Field>
+```
diff --git a/mintlify/form/framework/react/guides/reactivity.md b/mintlify/form/framework/react/guides/reactivity.md
new file mode 100644
index 000000000..7c2e8851d
--- /dev/null
+++ b/mintlify/form/framework/react/guides/reactivity.md
@@ -0,0 +1,52 @@
+---
+id: reactivity
+title: Reactivity
+---
+
+Tanstack Form doesn't cause re-renders when interacting with the form. So, you might find yourself trying to use a form or field state value without success.
+
+If you would like to access reactive values, you will need to subscribe to them using one of two methods: `useStore` or the `form.Subscribe` component.
+
+Some uses for these subscriptions are rendering up-to-date field values, determining what to render based on a condition, or using field values inside the logic of your component.
+
+> For situations where you want to "react" to triggers, check out the [listener](/form/framework/react/guides/listeners) API.
+
+## useStore
+
+The `useStore` hook is perfect when you need to access form values within the logic of your component. `useStore` takes two parameters. First, the form store. Second, a selector to specify the piece of the form you wish to subscribe to.
+
+```tsx
+const firstName = useStore(form.store, (state) => state.values.firstName)
+const errors = useStore(form.store, (state) => state.errorMap)
+```
+
+You can access any piece of the form state in the selector.
+
+> Note, that `useStore` will cause a whole component re-render whenever the value subscribed to changes.
+
+While it IS possible to omit the selector, resist the urge as omitting it would result in many unnecessary re-renders whenever any of the form state changes.
+
+## form.Subscribe
+
+The `form.Subscribe` component is best suited when you need to react to something within the UI of your component. For example, showing or hiding UI based on the value of a form field.
+
+```tsx
+<form.Subscribe
+  selector={(state) => state.values.firstName}
+  children={(firstName) => (
+    <form.Field>
+      {(field) => (
+        <input
+          name="lastName"
+          value={field.state.lastName}
+          onChange={field.handleChange}
+        />
+      )}
+    </form.Field>
+  )}
+/>
+```
+
+> The `form.Subscribe` component doesn't trigger component-level re-renders. Anytime the value subscribed to changes, only the `form.Subscribe` component re-renders.
+
+The choice between whether to use `useStore` or `form.Subscribe` mainly boils down to your use case. If you're aiming for direct UI updates based on form state, use `form.Subscribe` for its optimization perks. And if you need the reactivity within the logic, then `useStore` is the better choice.
diff --git a/mintlify/form/framework/react/guides/ssr.md b/mintlify/form/framework/react/guides/ssr.md
new file mode 100644
index 000000000..ef561e6ce
--- /dev/null
+++ b/mintlify/form/framework/react/guides/ssr.md
@@ -0,0 +1,491 @@
+---
+id: ssr
+title: React Meta-Framework Usage
+---
+
+TanStack Form is compatible with React out of the box, supporting `SSR` and being framework-agnostic. However, specific configurations are necessary, according to your chosen framework.
+
+Today we support the following meta-frameworks:
+
+- [TanStack Start](https://tanstack.com/start/)
+- [Next.js](https://nextjs.org/)
+- [Remix](https://remix.run)
+
+## Using TanStack Form in TanStack Start
+
+This section focuses on integrating TanStack Form with TanStack Start.
+
+### TanStack Start Prerequisites
+
+- Start a new `TanStack Start` project, following the steps in the [TanStack Start Quickstart Guide](/router/guide/tanstack-start)
+- Install `@tanstack/react-form`
+
+### Start integration
+
+Let's start by creating a `formOption` that we'll use to share the form's shape across the client and server.
+
+```typescript
+// app/routes/index.tsx, but can be extracted to any other path
+import { formOptions } from '@tanstack/react-form-start'
+
+// You can pass other form options here
+export const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    age: 0,
+  },
+})
+```
+
+Next, we can create [a Start Server Function](/start/framework/react/server-functions) that will handle the form submission on the server.
+
+```typescript
+// app/routes/index.tsx, but can be extracted to any other path
+import {
+  createServerValidate,
+  ServerValidateError,
+} from '@tanstack/react-form-start'
+
+const serverValidate = createServerValidate({
+  ...formOpts,
+  onServerValidate: ({ value }) => {
+    if (value.age < 12) {
+      return 'Server validation: You must be at least 12 to sign up'
+    }
+  },
+})
+
+export const handleForm = createServerFn({
+  method: 'POST',
+})
+  .inputValidator((data: unknown) => {
+    if (!(data instanceof FormData)) {
+      throw new Error('Invalid form data')
+    }
+    return data
+  })
+  .handler(async (ctx) => {
+    try {
+      const validatedData = await serverValidate(ctx.data)
+      console.log('validatedData', validatedData)
+      // Persist the form data to the database
+      // await sql`
+      //   INSERT INTO users (name, email, password)
+      //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+      // `
+    } catch (e) {
+      if (e instanceof ServerValidateError) {
+        // Log form errors or do any other logic here
+        return e.response
+      }
+
+      // Some other error occurred when parsing the form
+      console.error(e)
+      setResponseStatus(500)
+      return 'There was an internal error'
+    }
+
+    return 'Form has validated successfully'
+  })
+```
+
+Then we need to establish a way to grab the form data from `serverValidate`'s `response` using another server action:
+
+```typescript
+// app/routes/index.tsx, but can be extracted to any other path
+import { getFormData } from '@tanstack/react-form-start'
+
+export const getFormDataFromServer = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    return getFormData()
+  },
+)
+```
+
+Finally, we'll use `getFormDataFromServer` in our loader to get the state from our server into our client and `handleForm` in our client-side form component.
+
+```tsx
+// app/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  mergeForm,
+  useForm,
+  useStore,
+  useTransform,
+} from '@tanstack/react-form-start'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+  loader: async () => ({
+    state: await getFormDataFromServer(),
+  }),
+})
+
+function Home() {
+  const { state } = Route.useLoaderData()
+  const form = useForm({
+    ...formOpts,
+    transform: useTransform((baseForm) => mergeForm(baseForm, state), [state]),
+  })
+
+  const formErrors = useStore(form.store, (formState) => formState.errors)
+
+  return (
+    <form action={handleForm.url} method="post" encType={'multipart/form-data'}>
+      {formErrors.map((error) => (
+        <p key={error as string}>{error}</p>
+      ))}
+
+      <form.Field
+        name="age"
+        validators={{
+          onChange: ({ value }) =>
+            value < 8 ? 'Client validation: You must be at least 8' : undefined,
+        }}
+      >
+        {(field) => {
+          return (
+            <div>
+              <input
+                name={field.name}
+                type="number"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p key={error as string}>{error}</p>
+              ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe
+        selector={(formState) => [formState.canSubmit, formState.isSubmitting]}
+      >
+        {([canSubmit, isSubmitting]) => (
+          <button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Submit'}
+          </button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+```
+
+## Using TanStack Form in a Next.js App Router
+
+> Before reading this section, it's suggested you understand how React Server Components and React Server Actions work. [Check out this blog series for more information](https://playfulprogramming.com/collections/react-beyond-the-render)
+
+This section focuses on integrating TanStack Form with `Next.js`, particularly using the `App Router` and `Server Actions`.
+
+### Next.js Prerequisites
+
+- Start a new `Next.js` project, following the steps in the [Next.js Documentation](https://nextjs.org/docs/getting-started/installation). Ensure you select `yes` for `Would you like to use App Router?` during the setup to access all new features provided by Next.js.
+- Install `@tanstack/react-form`
+- Install any [form validator](/form/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]
+
+## App Router integration
+
+Let's start by creating a `formOption` that we'll use to share the form's shape across the client and server.
+
+```typescript
+// shared-code.ts
+// Notice the import path is different from the client
+import { formOptions } from '@tanstack/react-form-nextjs'
+
+// You can pass other form options here
+export const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    age: 0,
+  },
+})
+```
+
+Next, we can create [a React Server Action](https://playfulprogramming.com/posts/what-are-react-server-components) that will handle the form submission on the server.
+
+```typescript
+// action.ts
+'use server'
+
+// Notice the import path is different from the client
+import {
+  ServerValidateError,
+  createServerValidate,
+} from '@tanstack/react-form-nextjs'
+import { formOpts } from './shared-code'
+
+// Create the server action that will infer the types of the form from `formOpts`
+const serverValidate = createServerValidate({
+  ...formOpts,
+  onServerValidate: ({ value }) => {
+    if (value.age < 12) {
+      return 'Server validation: You must be at least 12 to sign up'
+    }
+  },
+})
+
+export default async function someAction(prev: unknown, formData: FormData) {
+  try {
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
+  } catch (e) {
+    if (e instanceof ServerValidateError) {
+      return e.formState
+    }
+
+    // Some other error occurred while validating your form
+    throw e
+  }
+
+  // Your form has successfully validated!
+}
+```
+
+Finally, we'll use `someAction` in our client-side form component.
+
+```tsx
+// client-component.tsx
+'use client'
+
+import { useActionState } from 'react'
+import {
+  initialFormState,
+  mergeForm,
+  useForm,
+  useStore,
+  useTransform,
+} from '@tanstack/react-form-nextjs'
+import someAction from './action'
+import { formOpts } from './shared-code'
+
+export const ClientComp = () => {
+  const [state, action] = useActionState(someAction, initialFormState)
+
+  const form = useForm({
+    ...formOpts,
+    transform: useTransform((baseForm) => mergeForm(baseForm, state!), [state]),
+  })
+
+  const formErrors = useStore(form.store, (formState) => formState.errors)
+
+  return (
+    <form action={action as never} onSubmit={() => form.handleSubmit()}>
+      {formErrors.map((error) => (
+        <p key={error as string}>{error}</p>
+      ))}
+
+      <form.Field
+        name="age"
+        validators={{
+          onChange: ({ value }) =>
+            value < 8 ? 'Client validation: You must be at least 8' : undefined,
+        }}
+      >
+        {(field) => {
+          return (
+            <div>
+              <input
+                name={field.name} // must explicitly set the name attribute for the POST request
+                type="number"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p key={error as string}>{error}</p>
+              ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe
+        selector={(formState) => [formState.canSubmit, formState.isSubmitting]}
+      >
+        {([canSubmit, isSubmitting]) => (
+          <button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Submit'}
+          </button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+```
+
+Here, we're using [React's `useActionState` hook](https://playfulprogramming.com/posts/what-is-use-action-state-and-form-status) and TanStack Form's `useTransform` hook to merge state returned from the server action with the form state.
+
+> If you get the following error in your Next.js application:
+>
+> ```typescript
+> x You're importing a component that needs `useState`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.
+> ```
+>
+> This is because you're not importing server-side code from `@tanstack/react-form-nextjs`. Ensure you're importing the correct module based on the environment.
+>
+> [This is a limitation of Next.js](https://github.com/phryneas/rehackt). Other meta-frameworks will likely not have this same problem.
+
+## Using TanStack Form in Remix
+
+> Before reading this section, it's suggested you understand how Remix actions work. [Check out Remix's docs for more information](https://remix.run/docs/en/main/discussion/data-flow#route-action)
+
+### Remix Prerequisites
+
+- Start a new `Remix` project, following the steps in the [Remix Documentation](https://remix.run/docs/en/main/start/quickstart).
+- Install `@tanstack/react-form`
+- Install any [form validator](/form/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]
+
+## Remix integration
+
+Let's start by creating a `formOption` that we'll use to share the form's shape across the client and server.
+
+```typescript
+// routes/_index/route.tsx
+import { formOptions } from '@tanstack/react-form-remix'
+
+// You can pass other form options here
+export const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    age: 0,
+  },
+})
+```
+
+Next, we can create [an action](https://remix.run/docs/en/main/discussion/data-flow#route-action) that will handle the form submission on the server.
+
+```tsx
+// routes/_index/route.tsx
+
+import {
+  ServerValidateError,
+  createServerValidate,
+  formOptions,
+} from '@tanstack/react-form-remix'
+
+import type { ActionFunctionArgs } from '@remix-run/node'
+
+// export const formOpts = formOptions({
+
+// Create the server action that will infer the types of the form from `formOpts`
+const serverValidate = createServerValidate({
+  ...formOpts,
+  onServerValidate: ({ value }) => {
+    if (value.age < 12) {
+      return 'Server validation: You must be at least 12 to sign up'
+    }
+  },
+})
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData()
+  try {
+    const validatedData = await serverValidate(formData)
+    console.log('validatedData', validatedData)
+    // Persist the form data to the database
+    // await sql`
+    //   INSERT INTO users (name, email, password)
+    //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
+    // `
+  } catch (e) {
+    if (e instanceof ServerValidateError) {
+      return e.formState
+    }
+
+    // Some other error occurred while validating your form
+    throw e
+  }
+
+  // Your form has successfully validated!
+}
+```
+
+Finally, the `action` will be called when the form submits.
+
+```tsx
+// routes/_index/route.tsx
+import {
+  Form,
+  mergeForm,
+  useActionData,
+  useForm,
+  useStore,
+  useTransform,
+} from '@tanstack/react-form'
+import {
+  ServerValidateError,
+  createServerValidate,
+  formOptions,
+  initialFormState,
+} from '@tanstack/react-form-remix'
+
+import type { ActionFunctionArgs } from '@remix-run/node'
+
+// export const formOpts = formOptions({
+
+// const serverValidate = createServerValidate({
+
+// export async function action({request}: ActionFunctionArgs) {
+
+export default function Index() {
+  const actionData = useActionData<typeof action>()
+
+  const form = useForm({
+    ...formOpts,
+    transform: useTransform(
+      (baseForm) => mergeForm(baseForm, actionData ?? initialFormState),
+      [actionData],
+    ),
+  })
+
+  const formErrors = useStore(form.store, (formState) => formState.errors)
+
+  return (
+    <Form method="post" onSubmit={() => form.handleSubmit()}>
+      {formErrors.map((error) => (
+        <p key={error as string}>{error}</p>
+      ))}
+
+      <form.Field
+        name="age"
+        validators={{
+          onChange: ({ value }) =>
+            value < 8 ? 'Client validation: You must be at least 8' : undefined,
+        }}
+      >
+        {(field) => {
+          return (
+            <div>
+              <input
+                name="age"
+                type="number"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p key={error as string}>{error}</p>
+              ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe
+        selector={(formState) => [formState.canSubmit, formState.isSubmitting]}
+      >
+        {([canSubmit, isSubmitting]) => (
+          <button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Submit'}
+          </button>
+        )}
+      </form.Subscribe>
+    </Form>
+  )
+}
+```
+
+Here, we're using [Remix's `useActionData` hook](https://remix.run/docs/en/main/hooks/use-action-data) and TanStack Form's `useTransform` hook to merge state returned from the server action with the form state.
diff --git a/mintlify/form/framework/react/guides/submission-handling.md b/mintlify/form/framework/react/guides/submission-handling.md
new file mode 100644
index 000000000..eb3774389
--- /dev/null
+++ b/mintlify/form/framework/react/guides/submission-handling.md
@@ -0,0 +1,93 @@
+---
+id: submission-handling
+title: Submission handling
+---
+
+## Passing additional data to submission handling
+
+You may have multiple types of submission behaviour, for example, going back to the previous page or staying on the form.
+You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
+
+> Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+
+type FormMeta = {
+  submitAction: 'continue' | 'backToMenu' | null
+}
+
+// Metadata is not required to call form.handleSubmit().
+// Specify what values to use as default if no meta is passed
+const defaultMeta: FormMeta = {
+  submitAction: null,
+}
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      data: '',
+    },
+    // Define what meta values to expect on submission
+    onSubmitMeta: defaultMeta,
+    onSubmit: async ({ value, meta }) => {
+      // Do something with the values passed via handleSubmit
+      console.log(`Selected action - ${meta.submitAction}`, value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      {/* ... */}
+      <button
+        type="submit"
+        // Overwrites the default specified in onSubmitMeta
+        onClick={() => form.handleSubmit({ submitAction: 'continue' })}
+      >
+        Submit and continue
+      </button>
+      <button
+        type="submit"
+        onClick={() => form.handleSubmit({ submitAction: 'backToMenu' })}
+      >
+        Submit and back to menu
+      </button>
+    </form>
+  )
+}
+```
+
+## Transforming data with Standard Schemas
+
+While Tanstack Form provides [Standard Schema support](/form/framework/react/guides/validation) for validation, it does not preserve the Schema's output data.
+
+The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function:
+
+```tsx
+const schema = z.object({
+  age: z.string().transform((age) => Number(age)),
+})
+
+// Tanstack Form uses the input type of Standard Schemas
+const defaultValues: z.input<typeof schema> = {
+  age: '13',
+}
+
+const form = useForm({
+  defaultValues,
+  validators: {
+    onChange: schema,
+  },
+  onSubmit: ({ value }) => {
+    const inputAge: string = value.age
+    // Pass it through the schema to get the transformed value
+    const result = schema.parse(value)
+    const outputAge: number = result.age
+  },
+})
+```
diff --git a/mintlify/form/framework/react/guides/ui-libraries.md b/mintlify/form/framework/react/guides/ui-libraries.md
new file mode 100644
index 000000000..02207fb84
--- /dev/null
+++ b/mintlify/form/framework/react/guides/ui-libraries.md
@@ -0,0 +1,216 @@
+---
+id: ui-libraries
+title: UI Libraries
+---
+
+## Usage of TanStack Form with UI Libraries
+
+TanStack Form is a headless library, offering you complete flexibility to style it as you see fit. It's compatible with a wide range of UI libraries, including `Chakra UI`, `Tailwind`, `Material UI`, `Mantine`, `shadcn/ui`, or even plain CSS.
+
+This guide focuses on `Chakra UI`, `Material UI`, `Mantine`, and `shadcn/ui`, but the concepts are applicable to any UI library of your choice.
+
+### Prerequisites
+
+Before integrating TanStack Form with a UI library, ensure the necessary dependencies are installed in your project:
+
+- For `Chakra UI`, follow the installation instructions on their [official site](https://chakra-ui.com/docs/get-started/installation)
+- For `Material UI`, follow the installation instructions on their [official site](https://mui.com/material-ui/getting-started/).
+- For `Mantine`, refer to their [documentation](https://mantine.dev/).
+- For `shadcn/ui`, refer to their [official site](https://ui.shadcn.com/).
+
+Note: While you can mix and match libraries, it's generally advisable to stick with one to maintain consistency and minimize bloat.
+
+### Example with Mantine
+
+Here's an example demonstrating the integration of TanStack Form with Mantine components:
+
+```tsx
+import { TextInput, Checkbox } from '@mantine/core'
+import { useForm } from '@tanstack/react-form'
+
+export default function App() {
+  const { Field, handleSubmit, state } = useForm({
+    defaultValues: {
+      name: '',
+      isChecked: false,
+    },
+    onSubmit: async ({ value }) => {
+      // Handle form submission
+      console.log(value)
+    },
+  })
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleSubmit()
+        }}
+      >
+        <Field
+          name="name"
+          children={({ state, handleChange, handleBlur }) => (
+            <TextInput
+              defaultValue={state.value}
+              onChange={(e) => handleChange(e.target.value)}
+              onBlur={handleBlur}
+              placeholder="Enter your name"
+            />
+          )}
+        />
+        <Field
+          name="isChecked"
+          children={({ state, handleChange, handleBlur }) => (
+            <Checkbox
+              onChange={(e) => handleChange(e.target.checked)}
+              onBlur={handleBlur}
+              checked={state.value}
+            />
+          )}
+        />
+      </form>
+      <div>
+        <pre>{JSON.stringify(state.values, null, 2)}</pre>
+      </div>
+    </>
+  )
+}
+```
+
+- Initially, we utilize the `useForm` hook from TanStack and destructure the necessary properties. This step is optional; alternatively, you could use `const form = useForm()` if preferred. TypeScript's type inference ensures a smooth experience regardless of the approach.
+- The `Field` component, derived from `useForm`, accepts several properties, such as `validators`. For this demonstration, we focus on two primary properties: `name` and `children`.
+  - The `name` property identifies each `Field`, for instance, `name` in our example.
+  - The `children` property leverages the concept of render props, allowing us to integrate components without unnecessary abstractions.
+- TanStack's design relies heavily on render props, providing access to `children` within the `Field` component. This approach is entirely type-safe. When integrating with Mantine components, such as `TextInput`, we selectively destructure properties like `state.value`, `handleChange`, and `handleBlur`. This selective approach is due to the slight differences in types between `TextInput` and the `field` we get in the children.
+- By following these steps, you can seamlessly integrate Mantine components with TanStack Form.
+- This methodology is equally applicable to other components, such as `Checkbox`, ensuring consistent integration across different UI elements.
+
+### Usage with Material UI
+
+The process for integrating Material UI components is similar. Here's an example using TextField and Checkbox from Material UI:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => {
+    return (
+      <TextField
+        id="filled-basic"
+        label="Filled"
+        variant="filled"
+        defaultValue={state.value}
+        onChange={(e) => handleChange(e.target.value)}
+        onBlur={handleBlur}
+        placeholder="Enter your name"
+      />
+    );
+  }}
+/>
+
+<Field
+  name="isMuiCheckBox"
+  children={({ state, handleChange, handleBlur }) => {
+    return (
+      <MuiCheckbox
+        onChange={(e) => handleChange(e.target.checked)}
+        onBlur={handleBlur}
+        checked={state.value}
+      />
+    );
+  }}
+/>
+
+```
+
+- The integration approach is the same as with Mantine.
+- The primary difference lies in the specific Material UI component properties and styling options.
+
+### Usage with shadcn/ui
+
+The process for integrating shadcn/ui components is similar. Here's an example using Input and Checkbox from shadcn/ui:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => (
+    <Input
+      value={state.value}
+      onChange={(e) => handleChange(e.target.value)}
+      onBlur={handleBlur}
+      placeholder="Enter your name"
+    />
+  )}
+/>
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox
+      onCheckedChange={(checked) => handleChange(checked === true)}
+      onBlur={handleBlur}
+      checked={state.value}
+    />
+  )}
+/>
+```
+
+- The integration approach is the same as with Mantine, Material UI.
+- The primary difference lies in the specific shadcn/ui component properties and styling options.
+- Note the onCheckedChange property of Checkbox instead of onChange.
+
+The ShadCN library includes a dedicated guide covering common scenarios for integrating TanStack Form with its components: [https://ui.shadcn.com/docs/forms/tanstack-form](https://ui.shadcn.com/docs/forms/tanstack-form)
+
+### Usage with Chakra UI
+
+The process for integrating Chakra UI components is similar. Here's an example using Input and Checkbox from Chakra UI:
+
+```tsx
+<Field
+  name="name"
+  children={({ state, handleChange, handleBlur }) => (
+    <Input
+      value={state.value}
+      onChange={(e) => handleChange(e.target.value)}
+      onBlur={handleBlur}
+      placeholder="Enter your name"
+    />
+  )}
+/>
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox.Root
+      checked={state.value}
+      onCheckedChange={(details) => handleChange(!!details.checked)}
+      onBlur={handleBlur}
+    >
+      <Checkbox.HiddenInput />
+      <Checkbox.Control />
+      <Checkbox.Label>Accept terms</Checkbox.Label>
+    </Checkbox.Root>
+  )}
+/>
+```
+
+- The integration approach is the same as with Mantine, Material UI, and shadcn/ui.
+- Chakra UI exposes its Checkbox as a composable component with separate `Checkbox.Root`, `Checkbox.Control`, `Checkbox.Label`, and `Checkbox.HiddenInput` parts that you wire together.
+- The double negation `!!` is used on `onCheckedChange` to coerce Chakra's `"indeterminate"` state to a boolean, ensuring it matches the form state. See the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#indeterminate) for more details.
+- Alternatively, Chakra UI offers a pre-composed Checkbox component that works the same way as their standard examples, without requiring manual composition. You can learn more about this closed component approach in the [Chakra UI Checkbox documentation](https://chakra-ui.com/docs/components/checkbox#closed-component).
+- The TanStack Form integration works identically with either approach—simply attach the `checked`, `onCheckedChange`, and `onBlur` handlers to your chosen component.
+
+Example using the closed Checkbox component:
+
+```tsx
+<Field
+  name="isChecked"
+  children={({ state, handleChange, handleBlur }) => (
+    <Checkbox
+      checked={state.value}
+      onCheckedChange={(details) => handleChange(!!details.checked)}
+      onBlur={handleBlur}
+    >
+      Accept terms
+    </Checkbox>
+  )}
+/>
+```
diff --git a/mintlify/form/framework/react/guides/validation.md b/mintlify/form/framework/react/guides/validation.md
new file mode 100644
index 000000000..5fae0f480
--- /dev/null
+++ b/mintlify/form/framework/react/guides/validation.md
@@ -0,0 +1,581 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionality is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit, etc.)
+- Validation rules can be defined at the field-level or at the form-level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `<Field />` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the `fieldApi` object, so that you can perform the validation. If you find a validation error, simply return the error message as a string, and it will be available in `field.state.meta.errors`.
+
+Here is an example:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field.handleBlur}
+        // We always need to implement onChange, so that TanStack Form receives the changes
+        onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+So, you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+    onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field.handleBlur}
+        // We always need to implement onChange, so that TanStack Form receives the changes
+        onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur, etc.). More information about displaying errors is below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => {
+    return (
+      <>
+        {/* ... */}
+        {!field.state.meta.isValid && (
+          <em>{field.state.meta.errors.join(',')}</em>
+        )}
+      </>
+    )
+  }}
+</form.Field>
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {field.state.meta.errorMap['onChange'] ? (
+        <em>{field.state.meta.errorMap['onChange']}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {/* errorMap.onChange is type `{isOldEnough: false} | undefined` */}
+      {/* meta.errors is type `Array<{isOldEnough: false} | undefined>` */}
+      {!field.state.meta.errorMap['onChange']?.isOldEnough ? (
+        <em>The user is not old enough</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+## Validation at field-level vs at form-level
+
+As shown above, each `<Field>` accepts its own validation rules via the callbacks such as `onChange` and `onBlur`. It is also possible to define validation rules at the form-level (as opposed to field-by-field) by passing similar callbacks to the `useForm()` hook.
+
+Example:
+
+```tsx
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  })
+
+  // Subscribe to the form's `errorMap` so that updates to it will cause re-renders
+  // Alternatively, you can use `form.Subscribe`
+  const formErrorMap = useStore(form.store, (state) => state.errorMap)
+
+  return (
+    <div>
+      {/* ... */}
+      {formErrorMap.onChange ? (
+        <div>
+          <em>There was an error on the form: {formErrorMap.onChange}</em>
+        </div>
+      ) : null}
+      {/* ... */}
+    </div>
+  )
+}
+```
+
+_Note:_ The example above uses a function validator that returns a `string`. When using a [Standard Schema](#standard-schema-libraries) validator (Zod, Valibot, ArkType, Effect/Schema), `state.errorMap.onChange` is typed as `Record<string, StandardSchemaV1Issue[]>` instead, keyed by field name. Iterate the record to render the messages:
+
+```tsx
+{
+  formErrorMap.onChange ? (
+    <div>
+      <em>
+        There was an error on the form:{' '}
+        {Object.values(formErrorMap.onChange)
+          .flat()
+          .map((issue) => issue.message)
+          .join(', ')}
+      </em>
+    </div>
+  ) : null
+}
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```tsx
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+      socials: [],
+      details: {
+        email: '',
+      },
+    },
+    validators: {
+      onSubmitAsync: async ({ value }) => {
+        // Validate the value on the server
+        const hasErrors = await verifyDataOnServer(value)
+        if (hasErrors) {
+          return {
+            form: 'Invalid data', // The `form` key is optional
+            fields: {
+              age: 'Must be 13 or older to sign',
+              // Set errors on nested fields with the field's name
+              'socials[0].url': 'The provided URL does not exist',
+              'details.email': 'An email is required',
+            },
+          }
+        }
+
+        return null
+      },
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          void form.handleSubmit()
+        }}
+      >
+        <form.Field name="age">
+          {(field) => (
+            <>
+              <label htmlFor={field.name}>Age:</label>
+              <input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                type="number"
+                onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+              />
+              {!field.state.meta.isValid && (
+                <em role="alert">{field.state.meta.errors.join(', ')}</em>
+              )}
+            </>
+          )}
+        </form.Field>
+        <form.Subscribe
+          selector={(state) => [state.errorMap]}
+          children={([errorMap]) =>
+            errorMap.onSubmit ? (
+              <div>
+                <em>There was an error on the form: {errorMap.onSubmit}</em>
+              </div>
+            ) : null
+          }
+        />
+        {/*...*/}
+      </form>
+    </div>
+  )
+}
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```jsx
+> const form = useForm(&#123;
+>   defaultValues: &#123;
+>     age: 0,
+>   &#125;,
+>   validators: &#123;
+>     onChange: (&#123; value &#125;) => &#123;
+>       return &#123;
+>         fields: &#123;
+>           age: value.age &lt; 12 ? 'Too young!' : undefined,
+>         &#125;,
+>       &#125;
+>     &#125;,
+>   &#125;,
+> &#125;)
+>
+> // ...
+>
+> return (
+>   &lt;form.Field
+>     name="age"
+>     validators=&#123;&#123;
+>       onChange: (&#123; value &#125;) => (value % 2 === 0 ? 'Must be odd!' : undefined),
+>     &#125;&#125;
+>     children=&#123;() => &lt;>&#123;/* ... */&#125;&lt;/>&#125;
+>   />
+> )
+> ```
+>
+> Will only show `'Must be odd!'` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validation will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value < 13 ? 'You must be 13 to make an account' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+Synchronous and asynchronous validators can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) => (value < 13 ? 'You must be at least 13' : undefined),
+    onBlurAsync: async ({ value }) => {
+      const currentAge = await fetchCurrentAgeOnProfile()
+      return value < currentAge ? 'You can only increase the age' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label htmlFor={field.name}>Age:</label>
+      <input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        type="number"
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+      />
+      {!field.state.meta.isValid && (
+        <em role="alert">{field.state.meta.errors.join(', ')}</em>
+      )}
+    </>
+  )}
+</form.Field>
+```
+
+The synchronous validation method (`onBlur`) is run first, and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDoS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsyncDebounceMs: 1500,
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+    onBlurAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will run `onChangeAsync` every 1500ms, whereas `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form-level validators; errors will automatically propagate to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+- [Effect/Schema](https://effect.website/docs/schema/standard-schema/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. See [submission handling](/form/framework/react/guides/submission-handling) for more information.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```tsx
+const userSchema = z.object({
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+function App() {
+  const form = useForm({
+    defaultValues: {
+      age: 0,
+    },
+    validators: {
+      onChange: userSchema,
+    },
+  })
+  return (
+    <div>
+      <form.Field
+        name="age"
+        children={(field) => {
+          return <>{/* ... */}</>
+        }}
+      />
+    </div>
+  )
+}
+```
+
+Async validators at the form- and field-level are supported as well:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.number().refine(
+      async (value) => {
+        const currentAge = await fetchCurrentAgeOnProfile()
+        return value >= currentAge
+      },
+      {
+        message: 'You can only increase the age',
+      },
+    ),
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value, fieldApi }) => {
+      const errors = fieldApi.parseValueWithSchema(
+        z.number().gte(13, 'You must be 13 to make an account'),
+      )
+      if (errors) return errors
+      // continue with your validation
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+## Preventing invalid forms from being submitted
+
+The callbacks, such as `onChange` and `onBlur`, are also run when the form is submitted and the submission is blocked because the form is invalid.
+
+The form state object has a `canSubmit` flag that is `false` when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to `canSubmit` via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```tsx
+const form = useForm(/* ... */)
+
+return (
+  /* ... */
+
+  // Dynamic submit button
+  <form.Subscribe
+    selector={(state) => [state.canSubmit, state.isSubmitting]}
+    children={([canSubmit, isSubmitting]) => (
+      <button type="submit" disabled={!canSubmit}>
+        {isSubmitting ? '...' : 'Submit'}
+      </button>
+    )}
+  />
+)
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/react/quick-start.md b/mintlify/form/framework/react/quick-start.md
new file mode 100644
index 000000000..387ab1b41
--- /dev/null
+++ b/mintlify/form/framework/react/quick-start.md
@@ -0,0 +1,136 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+TanStack Form is unlike most form libraries you've used before. It's designed for large-scale production usage, with a focus on type safety, performance and composition for an unmatched developer experience.
+
+As a result, we've developed [a philosophy around the library's usage](/form/philosophy) that values scalability and long-term developer experience over short and sharable code snippets.
+
+Here's an example of a form following many of our best practices, which will allow you to rapidly develop even high-complexity forms after a short onboarding experience:
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
+// Form components that pre-bind events from the form hook; check our "Form Composition" guide for more
+import { TextField, NumberField, SubmitButton } from '~our-app/ui-library'
+// We also support Valibot, ArkType, and any other standard schema library
+import { z } from 'zod'
+
+const { fieldContext, formContext } = createFormHookContexts()
+
+// Allow us to bind components to the form to keep type safety but reduce production boilerplate
+// Define this once to have a generator of consistent form instances throughout your app
+const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    NumberField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+const PeoplePage = () => {
+  const form = useAppForm({
+    defaultValues: {
+      username: '',
+      age: 0,
+    },
+    validators: {
+      // Pass a schema or function to validate
+      onChange: z.object({
+        username: z.string(),
+        age: z.number().min(13),
+      }),
+    },
+    onSubmit: ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value, null, 2))
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      <h1>Personal Information</h1>
+      {/* Components are bound to `form` and `field` to ensure extreme type safety */}
+      {/* Use `form.AppField` to render a component bound to a single field */}
+      <form.AppField
+        name="username"
+        children={(field) => <field.TextField label="Full Name" />}
+      />
+      {/* The "name" property will throw a TypeScript error if typo'd  */}
+      <form.AppField
+        name="age"
+        children={(field) => <field.NumberField label="Age" />}
+      />
+      {/* Components in `form.AppForm` have access to the form context */}
+      <form.AppForm>
+        <form.SubmitButton />
+      </form.AppForm>
+    </form>
+  )
+}
+
+const rootElement = document.getElementById('root')!
+ReactDOM.createRoot(rootElement).render(<PeoplePage />)
+```
+
+While we generally suggest using `createFormHook` for reduced boilerplate in the long-run, we also support one-off components and other behaviors using `useForm` and `form.Field`:
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { useForm } from '@tanstack/react-form'
+
+const PeoplePage = () => {
+  const form = useForm({
+    defaultValues: {
+      username: '',
+      age: 0,
+    },
+    onSubmit: ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value, null, 2))
+    },
+  })
+
+  return (
+    <form.Field
+      name="age"
+      validators={{
+        // We can choose between form-wide and field-specific validators
+        onChange: ({ value }) =>
+          value > 13 ? undefined : 'Must be 13 or older',
+      }}
+      children={(field) => (
+        <>
+          <input
+            name={field.name}
+            value={field.state.value}
+            onBlur={field.handleBlur}
+            type="number"
+            onChange={(e) => field.handleChange(e.target.valueAsNumber)}
+          />
+          {!field.state.meta.isValid && (
+            <em>{field.state.meta.errors.join(',')}</em>
+          )}
+        </>
+      )}
+    />
+  )
+}
+
+const rootElement = document.getElementById('root')!
+ReactDOM.createRoot(rootElement).render(<PeoplePage />)
+```
+
+All properties from `useForm` can be used in `useAppForm` and all properties from `form.Field` can be used in `form.AppField`.
diff --git a/mintlify/form/framework/react/reference/functions/createFormHook.md b/mintlify/form/framework/react/reference/functions/createFormHook.md
new file mode 100644
index 000000000..3701bb9ff
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/createFormHook.md
@@ -0,0 +1,1738 @@
+---
+id: createFormHook
+title: createFormHook
+---
+
+# Function: createFormHook()
+
+```ts
+function createFormHook<TComponents, TFormComponents>(__namedParameters): object;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:293](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L293)
+
+## Type Parameters
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+## Parameters
+
+### \_\_namedParameters
+
+`CreateFormHookProps`\&lt;`TComponents`, `TFormComponents`\>
+
+## Returns
+
+### extendForm()
+
+```ts
+extendForm: <TNewField, TNewForm>(extension) => object;
+```
+
+#### Type Parameters
+
+##### TNewField
+
+`TNewField` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: field component names must be unique — this key already exists in the base form" \&#125;
+
+##### TNewForm
+
+`TNewForm` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: form component names must be unique — this key already exists in the base form" \&#125;
+
+#### Parameters
+
+##### extension
+
+###### fieldComponents?
+
+`TNewField`
+
+###### formComponents?
+
+`TNewForm`
+
+#### Returns
+
+##### extendForm()
+
+```ts
+extendForm: <TNewField, TNewForm>(extension) => object;
+```
+
+###### Type Parameters
+
+###### TNewField
+
+`TNewField` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: field component names must be unique — this key already exists in the base form" \&#125;
+
+###### TNewForm
+
+`TNewForm` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: form component names must be unique — this key already exists in the base form" \&#125;
+
+###### Parameters
+
+###### extension
+
+###### fieldComponents?
+
+`TNewField`
+
+###### formComponents?
+
+`TNewForm`
+
+###### Returns
+
+###### extendForm()
+
+```ts
+extendForm: <TNewField, TNewForm>(extension) => object;
+```
+
+###### Type Parameters
+
+###### TNewField
+
+`TNewField` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: field component names must be unique — this key already exists in the base form" \&#125;
+
+###### TNewForm
+
+`TNewForm` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\> & \&#123; \[K in string \| number \| symbol\]?: "Error: form component names must be unique — this key already exists in the base form" \&#125;
+
+###### Parameters
+
+###### extension
+
+###### fieldComponents?
+
+`TNewField`
+
+###### formComponents?
+
+`TNewForm`
+
+###### Returns
+
+###### extendForm()
+
+```ts
+extendForm: <TNewField, TNewForm>(extension) => object;
+```
+
+###### Type Parameters
+
+###### TNewField
+
+`TNewField` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;...\>\> & \&#123; \[K in (...) \| (...) \| (...)\]?: (...) \| (...) \&#125;
+
+###### TNewForm
+
+`TNewForm` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;...\>\> & \&#123; \[K in (...) \| (...) \| (...)\]?: (...) \| (...) \&#125;
+
+###### Parameters
+
+###### extension
+
+###### fieldComponents?
+
+`TNewField`
+
+###### formComponents?
+
+`TNewForm`
+
+###### Returns
+
+###### extendForm()
+
+```ts
+extendForm: <TNewField, TNewForm>(extension) => object;
+```
+
+###### Type Parameters
+
+###### TNewField
+
+`TNewField` *extends* ... & ...
+
+###### TNewForm
+
+`TNewForm` *extends* ... & ...
+
+###### Parameters
+
+###### extension
+
+###### fieldComponents?
+
+...
+
+###### formComponents?
+
+...
+
+###### Returns
+
+`object`
+
+###### extendForm
+
+```ts
+extendForm: ...;
+```
+
+###### useAppForm
+
+```ts
+useAppForm: ...;
+```
+
+###### useTypedAppFormContext
+
+```ts
+useTypedAppFormContext: ...;
+```
+
+###### withFieldGroup
+
+```ts
+withFieldGroup: ...;
+```
+
+###### withForm
+
+```ts
+withForm: ...;
+```
+
+###### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedReactFormApi<..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* ... \| ...
+
+###### TOnChange
+
+`TOnChange` *extends* ... \| ...
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* ... \| ...
+
+###### TOnBlur
+
+`TOnBlur` *extends* ... \| ...
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* ... \| ...
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* ... \| ...
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* ... \| ...
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* ... \| ...
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* ... \| ...
+
+###### TOnServer
+
+`TOnServer` *extends* ... \| ...
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### props
+
+`FormOptions`\&lt;..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...\>
+
+###### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* ... \| ...
+
+###### TOnChange
+
+`TOnChange` *extends* ... \| ...
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* ... \| ...
+
+###### TOnBlur
+
+`TOnBlur` *extends* ... \| ...
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* ... \| ...
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* ... \| ...
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* ... \| ...
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* ... \| ...
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* ... \| ...
+
+###### TOnServer
+
+`TOnServer` *extends* ... \| ...
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### \_props
+
+`FormOptions`\&lt;..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...\>
+
+###### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ...;
+```
+
+###### Type Parameters
+
+###### TFieldGroupData
+
+`TFieldGroupData`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/react/reference/interfaces/WithFieldGroupProps)\&lt;..., ..., ..., ..., ...\>
+
+###### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ...;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* ...
+
+###### TOnMount
+
+`TOnMount` *extends* ...
+
+###### TOnChange
+
+`TOnChange` *extends* ...
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* ...
+
+###### TOnBlur
+
+`TOnBlur` *extends* ...
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* ...
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* ...
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* ...
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* ...
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* ...
+
+###### TOnServer
+
+`TOnServer` *extends* ...
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+###### Parameters
+
+###### params
+
+...
+
+###### Returns
+
+...
+
+###### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<...>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* ... \| ...
+
+###### TOnChange
+
+`TOnChange` *extends* ... \| ...
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* ... \| ...
+
+###### TOnBlur
+
+`TOnBlur` *extends* ... \| ...
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* ... \| ...
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* ... \| ...
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* ... \| ...
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* ... \| ...
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* ... \| ...
+
+###### TOnServer
+
+`TOnServer` *extends* ... \| ...
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/react/reference/interfaces/WithFormProps)\&lt;..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...\>
+
+###### Returns
+
+`FunctionComponent`\&lt;...\>
+
+###### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField & TNewField & TNewField, TFormComponents & TNewForm & TNewForm & TNewForm>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm` & `TNewForm`\>
+
+###### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField & TNewField & TNewField, TFormComponents & TNewForm & TNewForm & TNewForm>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### \_props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm` & `TNewForm`\>
+
+###### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ReactNode | Promise<...>;
+```
+
+###### Type Parameters
+
+###### TFieldGroupData
+
+`TFieldGroupData`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/react/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents` & `TNewField` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm` & `TNewForm`, `TSubmitMeta`, `TRenderProps`\>
+
+###### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ReactNode | Promise<...>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* `string` \| `{ [K in (...)]: (...) }`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;...\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+###### Parameters
+
+###### params
+
+`PropsWithChildren`\&lt;... & ...\>
+
+###### Returns
+
+`ReactNode` \| `Promise`\&lt;...\>
+
+###### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<PropsWithChildren<... & ...>>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/react/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm` & `TNewForm`, `TRenderProps`\>
+
+###### Returns
+
+`FunctionComponent`\&lt;`PropsWithChildren`\&lt;... & ...\>\>
+
+###### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField & TNewField, TFormComponents & TNewForm & TNewForm>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm`\>
+
+###### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField & TNewField, TFormComponents & TNewForm & TNewForm>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### \_props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm`\>
+
+###### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ReactNode | Promise<ReactNode>;
+```
+
+###### Type Parameters
+
+###### TFieldGroupData
+
+`TFieldGroupData`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/react/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm`, `TSubmitMeta`, `TRenderProps`\>
+
+###### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ReactNode | Promise<ReactNode>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, (...)\[(...)\]\> \&#125;
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+###### Parameters
+
+###### params
+
+`PropsWithChildren`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+###### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+###### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<PropsWithChildren<NoInfer<UnwrapOrAny<...>> & object>>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/react/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField` & `TNewField`, `TFormComponents` & `TNewForm` & `TNewForm`, `TRenderProps`\>
+
+###### Returns
+
+`FunctionComponent`\&lt;`PropsWithChildren`\&lt;`NoInfer`\&lt;`UnwrapOrAny`\&lt;...\>\> & `object`\>\>
+
+##### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField, TFormComponents & TNewForm>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField`, `TFormComponents` & `TNewForm`\>
+
+##### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField, TFormComponents & TNewForm>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### Parameters
+
+###### \_props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField`, `TFormComponents` & `TNewForm`\>
+
+##### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ReactNode | Promise<ReactNode>;
+```
+
+###### Type Parameters
+
+###### TFieldGroupData
+
+`TFieldGroupData`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/react/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents` & `TNewField`, `TFormComponents` & `TNewForm`, `TSubmitMeta`, `TRenderProps`\>
+
+###### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ReactNode | Promise<ReactNode>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+###### Parameters
+
+###### params
+
+`PropsWithChildren`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+###### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+##### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<PropsWithChildren<NoInfer<UnwrapOrAny<TRenderProps>> & object>>;
+```
+
+###### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TSubmitMeta
+
+`TSubmitMeta`
+
+###### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+###### Parameters
+
+###### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/react/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents` & `TNewField`, `TFormComponents` & `TNewForm`, `TRenderProps`\>
+
+###### Returns
+
+`FunctionComponent`\&lt;`PropsWithChildren`\&lt;`NoInfer`\&lt;`UnwrapOrAny`\&lt;`TRenderProps`\>\> & `object`\>\>
+
+### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+### useTypedAppFormContext()
+
+```ts
+useTypedAppFormContext: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(_props) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+⚠️ **Use withForm whenever possible.**
+
+Gets a typed form from the `<form.AppForm />` context.
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### \_props
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => ReactNode | Promise<ReactNode>;
+```
+
+#### Type Parameters
+
+##### TFieldGroupData
+
+`TFieldGroupData`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/react/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents`, `TFormComponents`, `TSubmitMeta`, `TRenderProps`\>
+
+#### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): ReactNode | Promise<ReactNode>;
+```
+
+##### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+##### Parameters
+
+###### params
+
+`PropsWithChildren`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+##### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => FunctionComponent<PropsWithChildren<NoInfer<UnwrapOrAny<TRenderProps>> & object>>;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `object` = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/react/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`, `TRenderProps`\>
+
+#### Returns
+
+`FunctionComponent`\&lt;`PropsWithChildren`\&lt;`NoInfer`\&lt;`UnwrapOrAny`\&lt;`TRenderProps`\>\> & `object`\>\>
diff --git a/mintlify/form/framework/react/reference/functions/createFormHookContexts.md b/mintlify/form/framework/react/reference/functions/createFormHookContexts.md
new file mode 100644
index 000000000..cefebbf9a
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/createFormHookContexts.md
@@ -0,0 +1,54 @@
+---
+id: createFormHookContexts
+title: createFormHookContexts
+---
+
+# Function: createFormHookContexts()
+
+```ts
+function createFormHookContexts(): object;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:95](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L95)
+
+## Returns
+
+`object`
+
+### fieldContext
+
+```ts
+fieldContext: Context<AnyFieldApi>;
+```
+
+### formContext
+
+```ts
+formContext: Context<AnyFormApi>;
+```
+
+### useFieldContext()
+
+```ts
+useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+#### Type Parameters
+
+##### TData
+
+`TData`
+
+#### Returns
+
+`FieldApi`\&lt;`any`, `string`, `TData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
+
+### useFormContext()
+
+```ts
+useFormContext: () => ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+#### Returns
+
+[`ReactFormExtendedApi`](/form/framework/react/reference/type-aliases/ReactFormExtendedApi)\&lt;`Record`\&lt;`string`, `never`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
diff --git a/mintlify/form/framework/react/reference/functions/useField.md b/mintlify/form/framework/react/reference/functions/useField.md
new file mode 100644
index 000000000..bd6af766f
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/useField.md
@@ -0,0 +1,122 @@
+---
+id: useField
+title: useField
+---
+
+# Function: useField()
+
+```ts
+function useField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>(opts): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useField.tsx:106](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L106)
+
+A hook for managing a field in a form.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Parameters
+
+### opts
+
+[`UseFieldOptions`](/form/framework/react/reference/interfaces/UseFieldOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+An object with field options.
+
+## Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+The `FieldApi` instance for the specified field.
diff --git a/mintlify/form/framework/react/reference/functions/useFieldGroup.md b/mintlify/form/framework/react/reference/functions/useFieldGroup.md
new file mode 100644
index 000000000..836592810
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/useFieldGroup.md
@@ -0,0 +1,109 @@
+---
+id: useFieldGroup
+title: useFieldGroup
+---
+
+# Function: useFieldGroup()
+
+```ts
+function useFieldGroup<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TComponents, TFormComponents, TSubmitMeta>(opts): AppFieldExtendedReactFieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+Defined in: [packages/react-form/src/useFieldGroup.tsx:96](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFieldGroup.tsx#L96)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Parameters
+
+### opts
+
+#### defaultValues?
+
+`TFieldGroupData`
+
+#### fields
+
+`TFields`
+
+#### form
+
+  \| `AppFieldExtendedReactFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+  \| `AppFieldExtendedReactFieldGroupApi`\&lt;`unknown`, `TFormData`, `string` \| `FieldsMap`\&lt;`unknown`, `TFormData`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+#### formComponents
+
+`TFormComponents`
+
+#### onSubmitMeta?
+
+`TSubmitMeta`
+
+## Returns
+
+`AppFieldExtendedReactFieldGroupApi`\&lt;`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
diff --git a/mintlify/form/framework/react/reference/functions/useForm.md b/mintlify/form/framework/react/reference/functions/useForm.md
new file mode 100644
index 000000000..9fc248dca
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/useForm.md
@@ -0,0 +1,76 @@
+---
+id: useForm
+title: useForm
+---
+
+# Function: useForm()
+
+```ts
+function useForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(opts?): ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useForm.tsx:174](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L174)
+
+A custom React Hook that returns an extended instance of the `FormApi` class.
+
+This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts?
+
+`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+[`ReactFormExtendedApi`](/form/framework/react/reference/type-aliases/ReactFormExtendedApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/react/reference/functions/useFormGroup.md b/mintlify/form/framework/react/reference/functions/useFormGroup.md
new file mode 100644
index 000000000..486f07786
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/useFormGroup.md
@@ -0,0 +1,128 @@
+---
+id: useFormGroup
+title: useFormGroup
+---
+
+# Function: useFormGroup()
+
+```ts
+function useFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useFormGroup.tsx:113](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFormGroup.tsx#L113)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/react/reference/functions/useTransform.md b/mintlify/form/framework/react/reference/functions/useTransform.md
new file mode 100644
index 000000000..ef3cdc8a7
--- /dev/null
+++ b/mintlify/form/framework/react/reference/functions/useTransform.md
@@ -0,0 +1,12 @@
+---
+title: "Functions / useTransform"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/react/reference/functions/useTransform)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/react/reference/index.md b/mintlify/form/framework/react/reference/index.md
new file mode 100644
index 000000000..f71b91099
--- /dev/null
+++ b/mintlify/form/framework/react/reference/index.md
@@ -0,0 +1,40 @@
+---
+id: "@tanstack/react-form"
+title: "@tanstack/react-form"
+---
+
+# @tanstack/react-form
+
+## Interfaces
+
+- [ReactFormApi](/form/framework/react/reference/interfaces/ReactFormApi)
+- [UseFieldOptions](/form/framework/react/reference/interfaces/UseFieldOptions)
+- [UseFieldOptionsBound](/form/framework/react/reference/interfaces/UseFieldOptionsBound)
+- [WithFieldGroupProps](/form/framework/react/reference/interfaces/WithFieldGroupProps)
+- [WithFormProps](/form/framework/react/reference/interfaces/WithFormProps)
+
+## Type Aliases
+
+- [FieldComponent](/form/framework/react/reference/type-aliases/FieldComponent)
+- [FormGroupComponent](/form/framework/react/reference/type-aliases/FormGroupComponent)
+- [LensFieldComponent](/form/framework/react/reference/type-aliases/LensFieldComponent)
+- [ReactFormExtendedApi](/form/framework/react/reference/type-aliases/ReactFormExtendedApi)
+- [ServerFormState](/form/framework/react/reference/type-aliases/ServerFormState)
+- [UseField](/form/framework/react/reference/type-aliases/UseField)
+- [UseFormGroup](/form/framework/react/reference/type-aliases/UseFormGroup)
+
+## Variables
+
+- [Field](/form/framework/react/reference/variables/Field)
+- [FormGroup](/form/framework/react/reference/variables/FormGroup)
+- [useIsomorphicLayoutEffect](/form/framework/react/reference/variables/useIsomorphicLayoutEffect)
+- [~~useStore~~](/form/framework/react/reference/variables/useStore)
+
+## Functions
+
+- [createFormHook](/form/framework/react/reference/functions/createFormHook)
+- [createFormHookContexts](/form/framework/react/reference/functions/createFormHookContexts)
+- [useField](/form/framework/react/reference/functions/useField)
+- [useFieldGroup](/form/framework/react/reference/functions/useFieldGroup)
+- [useForm](/form/framework/react/reference/functions/useForm)
+- [useFormGroup](/form/framework/react/reference/functions/useFormGroup)
diff --git a/mintlify/form/framework/react/reference/interfaces/ReactFormApi.md b/mintlify/form/framework/react/reference/interfaces/ReactFormApi.md
new file mode 100644
index 000000000..c66d56a96
--- /dev/null
+++ b/mintlify/form/framework/react/reference/interfaces/ReactFormApi.md
@@ -0,0 +1,116 @@
+---
+id: ReactFormApi
+title: ReactFormApi
+---
+
+# Interface: ReactFormApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/react-form/src/useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25)
+
+Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### Field
+
+```ts
+Field: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useForm.tsx:42](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L42)
+
+A React component to render form fields. With this, you can render and manage individual form fields.
+
+***
+
+### FormGroup
+
+```ts
+FormGroup: FormGroupComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useForm.tsx:56](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L56)
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [packages/react-form/src/useForm.tsx:73](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L73)
+
+A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>\>
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector?
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
diff --git a/mintlify/form/framework/react/reference/interfaces/UseFieldOptions.md b/mintlify/form/framework/react/reference/interfaces/UseFieldOptions.md
new file mode 100644
index 000000000..f9d4638b3
--- /dev/null
+++ b/mintlify/form/framework/react/reference/interfaces/UseFieldOptions.md
@@ -0,0 +1,124 @@
+---
+id: UseFieldOptions
+title: UseFieldOptions
+---
+
+# Interface: UseFieldOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [packages/react-form/src/types.ts:20](https://github.com/TanStack/form/blob/main/packages/react-form/src/types.ts#L20)
+
+The field options.
+
+## Extends
+
+- `FieldApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>.`FieldOptionsMode`
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/react-form/src/types.ts:14](https://github.com/TanStack/form/blob/main/packages/react-form/src/types.ts#L14)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/react/reference/interfaces/UseFieldOptionsBound.md b/mintlify/form/framework/react/reference/interfaces/UseFieldOptionsBound.md
new file mode 100644
index 000000000..d3c10c198
--- /dev/null
+++ b/mintlify/form/framework/react/reference/interfaces/UseFieldOptionsBound.md
@@ -0,0 +1,78 @@
+---
+id: UseFieldOptionsBound
+title: UseFieldOptionsBound
+---
+
+# Interface: UseFieldOptionsBound\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/react-form/src/types.ts:81](https://github.com/TanStack/form/blob/main/packages/react-form/src/types.ts#L81)
+
+## Extends
+
+- `FieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>.`FieldOptionsMode`
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/react-form/src/types.ts:14](https://github.com/TanStack/form/blob/main/packages/react-form/src/types.ts#L14)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/react/reference/interfaces/WithFieldGroupProps.md b/mintlify/form/framework/react/reference/interfaces/WithFieldGroupProps.md
new file mode 100644
index 000000000..47f7d8599
--- /dev/null
+++ b/mintlify/form/framework/react/reference/interfaces/WithFieldGroupProps.md
@@ -0,0 +1,54 @@
+---
+id: WithFieldGroupProps
+title: WithFieldGroupProps
+---
+
+# Interface: WithFieldGroupProps\&lt;TFieldGroupData, TFieldComponents, TFormComponents, TSubmitMeta, TRenderProps\>
+
+Defined in: [packages/react-form/src/createFormHook.tsx:256](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L256)
+
+## Extends
+
+- `BaseFormOptions`\&lt;`TFieldGroupData`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TRenderProps
+
+`TRenderProps` *extends* `object` = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:264](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L264)
+
+***
+
+### render
+
+```ts
+render: FunctionComponent<PropsWithChildren<NoInfer<TRenderProps> & object>>;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:265](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L265)
diff --git a/mintlify/form/framework/react/reference/interfaces/WithFormProps.md b/mintlify/form/framework/react/reference/interfaces/WithFormProps.md
new file mode 100644
index 000000000..72d47d7ac
--- /dev/null
+++ b/mintlify/form/framework/react/reference/interfaces/WithFormProps.md
@@ -0,0 +1,94 @@
+---
+id: WithFormProps
+title: WithFormProps
+---
+
+# Interface: WithFormProps\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents, TRenderProps\>
+
+Defined in: [packages/react-form/src/createFormHook.tsx:200](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L200)
+
+## Extends
+
+- `FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `ComponentType`\&lt;`any`\>\>
+
+### TRenderProps
+
+`TRenderProps` *extends* `object` = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:231](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L231)
+
+***
+
+### render
+
+```ts
+render: FunctionComponent<PropsWithChildren<NoInfer<TRenderProps> & object>>;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:232](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L232)
diff --git a/mintlify/form/framework/react/reference/type-aliases/FieldComponent.md b/mintlify/form/framework/react/reference/type-aliases/FieldComponent.md
new file mode 100644
index 000000000..6e0098809
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/FieldComponent.md
@@ -0,0 +1,131 @@
+---
+id: FieldComponent
+title: FieldComponent
+---
+
+# Type Alias: FieldComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi\>
+
+```ts
+type FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/react-form/src/useField.tsx:474](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L474)
+
+A type alias representing a field component for a specific form data type.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`FieldComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/react/reference/type-aliases/FormGroupComponent.md b/mintlify/form/framework/react/reference/type-aliases/FormGroupComponent.md
new file mode 100644
index 000000000..615b2b216
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/FormGroupComponent.md
@@ -0,0 +1,141 @@
+---
+id: FormGroupComponent
+title: FormGroupComponent
+---
+
+# Type Alias: FormGroupComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>({
+  children,
+  ...formGroupOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/react-form/src/useFormGroup.tsx:562](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFormGroup.tsx#L562)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### \&#123;
+  children,
+  ...formGroupOptions
+\&#125;
+
+`FormGroupComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/react/reference/type-aliases/LensFieldComponent.md b/mintlify/form/framework/react/reference/type-aliases/LensFieldComponent.md
new file mode 100644
index 000000000..80053fd00
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/LensFieldComponent.md
@@ -0,0 +1,91 @@
+---
+id: LensFieldComponent
+title: LensFieldComponent
+---
+
+# Type Alias: LensFieldComponent()\&lt;TLensData, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type LensFieldComponent<TLensData, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => ReturnType<FunctionComponent>;
+```
+
+Defined in: [packages/react-form/src/useField.tsx:549](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L549)
+
+A type alias representing a field component for a form lens data type.
+
+## Type Parameters
+
+### TLensData
+
+`TLensData`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TLensData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TLensData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`Omit`\&lt;`FieldComponentBoundProps`\&lt;`unknown`, `string`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `TParentSubmitMeta`, `ExtendedApi`\>, `"name"` \| `"validators"`\> & `object`
+
+## Returns
+
+`ReturnType`\&lt;`FunctionComponent`\>
diff --git a/mintlify/form/framework/react/reference/type-aliases/ReactFormExtendedApi.md b/mintlify/form/framework/react/reference/type-aliases/ReactFormExtendedApi.md
new file mode 100644
index 000000000..ead6bbdc9
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/ReactFormExtendedApi.md
@@ -0,0 +1,64 @@
+---
+id: ReactFormExtendedApi
+title: ReactFormExtendedApi
+---
+
+# Type Alias: ReactFormExtendedApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+```ts
+type ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useForm.tsx:114](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L114)
+
+An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
diff --git a/mintlify/form/framework/react/reference/type-aliases/ServerFormState.md b/mintlify/form/framework/react/reference/type-aliases/ServerFormState.md
new file mode 100644
index 000000000..5da187ecf
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/ServerFormState.md
@@ -0,0 +1,22 @@
+---
+id: ServerFormState
+title: ServerFormState
+---
+
+# Type Alias: ServerFormState\&lt;TFormData, TOnServer\>
+
+```ts
+type ServerFormState<TFormData, TOnServer> = Pick<FormState<TFormData, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, TOnServer>, "values" | "errors" | "errorMap">;
+```
+
+Defined in: [packages/react-form/src/types.ts:120](https://github.com/TanStack/form/blob/main/packages/react-form/src/types.ts#L120)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
diff --git a/mintlify/form/framework/react/reference/type-aliases/UseField.md b/mintlify/form/framework/react/reference/type-aliases/UseField.md
new file mode 100644
index 000000000..7a215b74b
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/UseField.md
@@ -0,0 +1,122 @@
+---
+id: UseField
+title: UseField
+---
+
+# Type Alias: UseField()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta\>
+
+```ts
+type UseField<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>(opts) => FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26)
+
+A type representing a hook for using a field in a form with the given form data type.
+
+A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Parameters
+
+### opts
+
+[`UseFieldOptionsBound`](/form/framework/react/reference/interfaces/UseFieldOptionsBound)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+## Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
diff --git a/mintlify/form/framework/react/reference/type-aliases/UseFormGroup.md b/mintlify/form/framework/react/reference/type-aliases/UseFormGroup.md
new file mode 100644
index 000000000..bda5ea96b
--- /dev/null
+++ b/mintlify/form/framework/react/reference/type-aliases/UseFormGroup.md
@@ -0,0 +1,130 @@
+---
+id: UseFormGroup
+title: UseFormGroup
+---
+
+# Type Alias: UseFormGroup()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type UseFormGroup<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>(opts) => FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/react-form/src/useFormGroup.tsx:19](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFormGroup.tsx#L19)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts
+
+`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/react/reference/variables/Field.md b/mintlify/form/framework/react/reference/variables/Field.md
new file mode 100644
index 000000000..105172e13
--- /dev/null
+++ b/mintlify/form/framework/react/reference/variables/Field.md
@@ -0,0 +1,120 @@
+---
+id: Field
+title: Field
+---
+
+# Variable: Field()
+
+```ts
+const Field: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>(__namedParameters) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [packages/react-form/src/useField.tsx:639](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L639)
+
+A function component that takes field options and a render function as children and returns a React component.
+
+The `Field` component uses the `useField` hook internally to manage the field instance.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+## Parameters
+
+### \_\_namedParameters
+
+`FieldComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`\>
+
+## Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
diff --git a/mintlify/form/framework/react/reference/variables/FormGroup.md b/mintlify/form/framework/react/reference/variables/FormGroup.md
new file mode 100644
index 000000000..9a1c2d07f
--- /dev/null
+++ b/mintlify/form/framework/react/reference/variables/FormGroup.md
@@ -0,0 +1,128 @@
+---
+id: FormGroup
+title: FormGroup
+---
+
+# Variable: FormGroup()
+
+```ts
+const FormGroup: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(__namedParameters) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [packages/react-form/src/useFormGroup.tsx:642](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFormGroup.tsx#L642)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### \_\_namedParameters
+
+`FormGroupComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
diff --git a/mintlify/form/framework/react/reference/variables/useIsomorphicLayoutEffect.md b/mintlify/form/framework/react/reference/variables/useIsomorphicLayoutEffect.md
new file mode 100644
index 000000000..df740aa3b
--- /dev/null
+++ b/mintlify/form/framework/react/reference/variables/useIsomorphicLayoutEffect.md
@@ -0,0 +1,43 @@
+---
+id: useIsomorphicLayoutEffect
+title: useIsomorphicLayoutEffect
+---
+
+# Variable: useIsomorphicLayoutEffect()
+
+```ts
+const useIsomorphicLayoutEffect: (effect, deps?) => void;
+```
+
+Defined in: [packages/react-form/src/useIsomorphicLayoutEffect.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useIsomorphicLayoutEffect.ts#L3)
+
+The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
+Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
+`useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
+
+Prefer the standard `useEffect` when possible to avoid blocking visual updates.
+
+If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as
+`componentDidMount` and `componentDidUpdate`.
+
+## Parameters
+
+### effect
+
+`EffectCallback`
+
+### deps?
+
+`DependencyList`
+
+## Returns
+
+`void`
+
+## Version
+
+16.8.0
+
+## See
+
+[https://react.dev/reference/react/useLayoutEffect](https://react.dev/reference/react/useLayoutEffect)
diff --git a/mintlify/form/framework/react/reference/variables/useStore.md b/mintlify/form/framework/react/reference/variables/useStore.md
new file mode 100644
index 000000000..fd821a82d
--- /dev/null
+++ b/mintlify/form/framework/react/reference/variables/useStore.md
@@ -0,0 +1,58 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Variable: useStore()~~
+
+```ts
+const useStore: <TSource, TSelected>(source, selector?, compare?) => TSelected;
+```
+
+Defined in: node\_modules/.pnpm/@tanstack+react-store@0.11.0\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/useStore.d.ts:12
+
+Deprecated alias for useSelector.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector?
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`TSelected`
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/form/framework/solid/examples/array.md b/mintlify/form/framework/solid/examples/array.md
new file mode 100644
index 000000000..cf0398ccd
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Arrays"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/solid/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/examples/devtools.md b/mintlify/form/framework/solid/examples/devtools.md
new file mode 100644
index 000000000..1a9656645
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/devtools.md
@@ -0,0 +1,9 @@
+---
+title: "Devtools"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/devtools)
+- [Browse the pinned upstream repository](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
diff --git a/mintlify/form/framework/solid/examples/large-form.md b/mintlify/form/framework/solid/examples/large-form.md
new file mode 100644
index 000000000..89c29bd9d
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/large-form.md
@@ -0,0 +1,12 @@
+---
+title: "Form Composition"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/large-form)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/solid/large-form)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/examples/multi-step-wizard.md b/mintlify/form/framework/solid/examples/multi-step-wizard.md
new file mode 100644
index 000000000..b6a974c6f
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/solid/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/examples/simple.md b/mintlify/form/framework/solid/examples/simple.md
new file mode 100644
index 000000000..776b7db01
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/solid/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/examples/standard-schema.md b/mintlify/form/framework/solid/examples/standard-schema.md
new file mode 100644
index 000000000..d98001a13
--- /dev/null
+++ b/mintlify/form/framework/solid/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/solid/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/guides/arrays.md b/mintlify/form/framework/solid/guides/arrays.md
new file mode 100644
index 000000000..8c1b5240e
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/arrays.md
@@ -0,0 +1,126 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value in conjunction
+with [`Index` from `solid-js`](https://www.solidjs.com/tutorial/flow_index):
+
+```jsx
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      people: [],
+    },
+  }))
+
+  return (
+    <form.Field name="people" mode="array">
+      {(field) => (
+        <Show when={field().state.value.length > 0}>
+          {/* Do not change this to `For` or things will not work as-expected */}
+          <Index each={field().state.value}>
+            {
+              (_, i) => null // ...
+            }
+          </Index>
+        </Show>
+      )}
+    </form.Field>
+  )
+}
+```
+
+> You must use `Index` from `solid-js` and not `For` because `For` will cause the inner components to be re-rendered
+> every time the array changes.
+>
+> This causes the field to lose its value and therefore delete the subfield's value.
+
+This will generate the mapped JSX every time you run `pushValue` on `field`:
+
+```jsx
+<button onClick={() => field().pushValue({ name: '', age: 0 })} type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```jsx
+<form.Field name={`people[${i}].name`}>
+  {(subField) => (
+    <input
+      value={subField().state.value}
+      onInput={(e) => {
+        subField().handleChange(e.currentTarget.value)
+      }}
+    />
+  )}
+</form.Field>
+```
+
+## Full Example
+
+```jsx
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      people: [],
+    },
+    onSubmit: ({ value }) => alert(JSON.stringify(value)),
+  }))
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.Field name="people" mode="array">
+          {(field) => (
+            <div>
+              <Show when={field().state.value.length > 0}>
+                {/* Do not change this to For or the test will fail */}
+                <Index each={field().state.value}>
+                  {(_, i) => (
+                    <form.Field name={`people[${i}].name`}>
+                      {(subField) => (
+                        <div>
+                          <label>
+                            <div>Name for person {i}</div>
+                            <input
+                              value={subField().state.value}
+                              onInput={(e) => {
+                                subField().handleChange(e.currentTarget.value)
+                              }}
+                            />
+                          </label>
+                        </div>
+                      )}
+                    </form.Field>
+                  )}
+                </Index>
+              </Show>
+
+              <button
+                onClick={() => field().pushValue({ name: '', age: 0 })}
+                type="button"
+              >
+                Add person
+              </button>
+            </div>
+          )}
+        </form.Field>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  )
+}
+```
diff --git a/mintlify/form/framework/solid/guides/async-initial-values.md b/mintlify/form/framework/solid/guides/async-initial-values.md
new file mode 100644
index 000000000..647962144
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/async-initial-values.md
@@ -0,0 +1,52 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```tsx
+import { createForm } from '@tanstack/solid-form'
+import { createQuery } from '@tanstack/solid-query'
+import { Show } from 'solid-js'
+
+export default function App() {
+  const query = createQuery(() => ({
+    queryKey: ['data'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return { firstName: 'FirstName', lastName: 'LastName' }
+    },
+  }))
+
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: query.data?.firstName ?? '',
+      lastName: query.data?.lastName ?? '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+
+  return (
+    <Show when={!query.isLoading} fallback={<p>Loading..</p>}>
+      <></>
+    </Show>
+  )
+}
+```
+
+This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values.
diff --git a/mintlify/form/framework/solid/guides/basic-concepts.md b/mintlify/form/framework/solid/guides/basic-concepts.md
new file mode 100644
index 000000000..02391a4b9
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/basic-concepts.md
@@ -0,0 +1,326 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/solid-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Options
+
+You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
+
+Example:
+
+```tsx
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  } as Person,
+})
+```
+
+## Form Instance
+
+A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `createForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```tsx
+const form = createForm(() => ({
+  ...formOpts,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+}))
+```
+
+You may also create a form instance without using `formOptions` by using the standalone `createForm` API:
+
+```tsx
+const form = createForm<Person>(() => ({
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  },
+}))
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the form instance. The component accepts a name prop, which should match a key in the form's default values. It also accepts a children prop, which is a render prop function that takes a field object as its argument.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  children={(field) => (
+    <input
+      name={field().name}
+      value={field().state.value}
+      onBlur={field().handleBlur}
+      onInput={(e) => field().handleChange(e.target.value)}
+    />
+  )}
+/>
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field().state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field().state
+```
+
+There are four states in the metadata that can be useful to see how the user interacts with a field:
+
+- _"isTouched"_, after the user changes the field or blurs the field
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field().state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```ts
+const { isDefaultValue, isTouched } = field().state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
+
+Example:
+
+```tsx
+<input
+  name={field().name}
+  value={field().state.value}
+  onBlur={field().handleBlur}
+  onInput={(e) => field().handleChange(e.target.value)}
+/>
+```
+
+## Validation
+
+`@tanstack/solid-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  validators={{
+    onChange: ({ value }) =>
+      !value
+        ? 'A first name is required'
+        : value.length < 3
+          ? 'First name must be at least 3 characters'
+          : undefined,
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value.includes('error') && 'No "error" allowed in first name'
+    },
+  }}
+  children={(field) => (
+    <>
+      <input
+        name={field().name}
+        value={field().state.value}
+        onBlur={field().handleBlur}
+        onInput={(e) => field().handleChange(e.target.value)}
+      />
+      <p>{field().state.meta.errors[0]}</p>
+    </>
+  )}
+/>
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+```tsx
+import { z } from 'zod'
+
+// ...
+;<form.Field
+  name="firstName"
+  validators={{
+    onChange: z.string().min(3, 'First name must be at least 3 characters'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.string().refine(
+      async (value) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        return !value.includes('error')
+      },
+      {
+        message: 'No "error" allowed in first name',
+      },
+    ),
+  }}
+  children={(field) => (
+    <>
+      <input
+        name={field().name}
+        value={field().state.value}
+        onBlur={field().handleBlur}
+        onInput={(e) => field().handleChange(e.target.value)}
+      />
+      <p>{field().state.meta.errors[0]}</p>
+    </>
+  )}
+/>
+```
+
+## Reactivity
+
+`@tanstack/solid-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+
+Example:
+
+```tsx
+const firstName = form.useStore((state) => state.values.firstName)
+//...
+<form.Subscribe
+  selector={(state) => ({
+    canSubmit: state.canSubmit,
+    isSubmitting: state.isSubmitting,
+  })}
+  children={(state) => (
+    <button type="submit" disabled={!state().canSubmit}>
+      {state().isSubmitting ? '...' : 'Submit'}
+    </button>
+  )}
+/>
+```
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
+
+When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```tsx
+<form.Field
+  name="hobbies"
+  mode="array"
+  children={(hobbiesField) => (
+    <div>
+      Hobbies
+      <div>
+        <Show
+          when={hobbiesField().state.value.length > 0}
+          fallback={'No hobbies found.'}
+        >
+          <Index each={hobbiesField().state.value}>
+            {(_, i) => (
+              <div>
+                <form.Field
+                  name={`hobbies[${i}].name`}
+                  children={(field) => (
+                    <div>
+                      <label for={field().name}>Name:</label>
+                      <input
+                        id={field().name}
+                        name={field().name}
+                        value={field().state.value}
+                        onBlur={field().handleBlur}
+                        onInput={(e) => field().handleChange(e.target.value)}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => hobbiesField().removeValue(i)}
+                      >
+                        X
+                      </button>
+                    </div>
+                  )}
+                />
+                <form.Field
+                  name={`hobbies[${i}].description`}
+                  children={(field) => {
+                    return (
+                      <div>
+                        <label for={field().name}>Description:</label>
+                        <input
+                          id={field().name}
+                          name={field().name}
+                          value={field().state.value}
+                          onBlur={field().handleBlur}
+                          onInput={(e) => field().handleChange(e.target.value)}
+                        />
+                      </div>
+                    )
+                  }}
+                />
+              </div>
+            )}
+          </Index>
+        </Show>
+      </div>
+      <button
+        type="button"
+        onClick={() =>
+          hobbiesField().pushValue({
+            name: '',
+            description: '',
+            yearsOfExperience: 0,
+          })
+        }
+      >
+        Add hobby
+      </button>
+    </div>
+  )}
+/>
+```
+
+These are the basic concepts and terminology used in the `@tanstack/solid-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/solid/guides/devtools.md b/mintlify/form/framework/solid/guides/devtools.md
new file mode 100644
index 000000000..b01e6b82f
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/devtools.md
@@ -0,0 +1,60 @@
+---
+id: devtools
+title: Devtools
+---
+
+TanStack Form comes with a ready to go suit of devtools.
+
+## Setup
+
+Install the [TanStack Devtools](/devtools/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/solid-form-devtools), from the framework adapter that your working in (in this case `@tanstack/solid-devtools`, and `@tanstack/solid-form-devtools`).
+
+```bash
+npm i @tanstack/solid-devtools
+npm i @tanstack/solid-form-devtools
+```
+
+Next in the root of your application import the `TanStackDevtools`.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+
+import App from './App'
+
+render(
+  () => (
+    <>
+      <App />
+
+      <TanStackDevtools />
+    </>
+  ),
+  root!,
+)
+```
+
+Import the `formDevtoolsPlugin` from **TanStack Form** and provide it to the `TanStackDevtools` component.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { formDevtoolsPlugin } from '@tanstack/solid-form-devtools'
+
+import App from './app'
+
+const root = document.getElementById('root')
+
+render(
+  () => (
+    <>
+      <App />
+
+      <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
+    </>
+  ),
+  root!,
+)
+```
+
+Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
+
+A complete working example can be found in our [examples section](/form/framework/solid/examples/devtools).
diff --git a/mintlify/form/framework/solid/guides/dynamic-validation.md b/mintlify/form/framework/solid/guides/dynamic-validation.md
new file mode 100644
index 000000000..14d608818
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/dynamic-validation.md
@@ -0,0 +1,224 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```tsx
+import { revalidateLogic, createForm } from '@tanstack/solid-form'
+
+// ...
+
+const form = createForm(() => ({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  // If this is omitted, onDynamic will not be called
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+}))
+```
+
+> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `createForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```tsx
+const form = createForm(() => ({
+  // ...
+  validationLogic: revalidateLogic({
+    mode: 'submit',
+    modeAfterSubmission: 'blur',
+  }),
+  // ...
+}))
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+
+```tsx
+function App() {
+  const form = createForm(() => ({
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  }))
+
+  return <p>{form.state.errorMap.onDynamic?.firstName}</p>
+}
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```tsx
+import { revalidateLogic, createForm } from '@tanstack/solid-form'
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  }))
+
+  return (
+    <div>
+      <p>{form.state.errorMap.onChange?.firstName}</p>
+      <p>{form.state.errorMap.onDynamic?.lastName}</p>
+    </div>
+  )
+}
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```tsx
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  }))
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name={'age'}
+        validators={{
+          onDynamic: ({ value }) =>
+            value > 18 ? undefined : 'Age must be greater than 18',
+        }}
+        children={(field) => (
+          <div>
+            <input
+              type="number"
+              onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+              onBlur={field().handleBlur}
+              value={field().state.value}
+            />
+            <p style={{ color: 'red' }}>
+              {field().state.meta.errorMap.onDynamic}
+            </p>
+          </div>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```tsx
+const form = createForm(() => ({
+  defaultValues: {
+    username: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+    onDynamicAsync: async ({ value }) => {
+      if (!value.username) {
+        return { username: 'Username is required' }
+      }
+      // Simulate an async validation
+      const isValid = await validateUsername(value.username)
+      return isValid ? undefined : { username: 'Username is already taken' }
+    },
+  },
+}))
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```tsx
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+const form = createForm(() => ({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: schema,
+  },
+}))
+```
diff --git a/mintlify/form/framework/solid/guides/form-composition.md b/mintlify/form/framework/solid/guides/form-composition.md
new file mode 100644
index 000000000..faca78d35
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/form-composition.md
@@ -0,0 +1,610 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is its verbosity out-of-the-box. While this _can_ be useful for educational purposes - helping enforce understanding our APIs - it's not ideal in production use cases.
+
+As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
+
+## Custom Form Hooks
+
+The most powerful way to compose forms is to create custom form hooks. This allows you to create a form hook that is tailored to your application's needs, including pre-bound custom UI components and more.
+
+At it's most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook.
+
+> This un-customized `useAppForm` hook is identical to `useForm`, but that will quickly change as we add more options to `createFormHook`.
+
+```tsx
+import { createFormHookContexts, createFormHook } from '@tanstack/solid-form'
+
+// export useFieldContext for use in your custom components
+export const { fieldContext, formContext, useFieldContext } =
+  createFormHookContexts()
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  // We'll learn more about these options later
+  fieldComponents: {},
+  formComponents: {},
+})
+
+function App() {
+  const form = useAppForm(() => ({
+    // Supports all useForm options
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+
+  return <form.Field /> // ...
+}
+```
+
+### Pre-bound Field Components
+
+Once this scaffolding is in place, you can start adding custom field and form components to your form hook.
+
+> Note: the `useFieldContext` must be the same one exported from your custom form context
+
+```tsx
+import { useFieldContext } from './form-context.tsx'
+
+export function TextField(props: { label: string }) {
+  // The `Field` infers that it should have a `value` type of `string`
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <div>{props.label}</div>
+      <input
+        value={field().state.value}
+        onChange={(e) => field().handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+You're then able to register this component with your form hook.
+
+```tsx
+import { TextField } from './text-field.tsx'
+
+const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+And use it in your form:
+
+```tsx
+function App() {
+  const form = useAppForm(() => ({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+
+  return (
+    // Notice the `AppField` instead of `Field`; `AppField` provides the required context
+    <form.AppField
+      name="firstName"
+      children={(field) => <field.TextField label="First Name" />}
+    />
+  )
+}
+```
+
+This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Typo `name` and get a TypeScript error.
+
+### Pre-bound Form Components
+
+While `form.AppField` solves many of the problems with Field boilerplate and reusability, it doesn't solve the problem of _form_ boilerplate and reusability.
+
+In particular, being able to share instances of `form.Subscribe` for, say, a reactive form submission button is a common usecase.
+
+```tsx
+function SubscribeButton(props: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button type="submit" disabled={isSubmitting()}>
+          {props.label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {},
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+function App() {
+  const form = useAppForm(() => ({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+
+  return (
+    <form.AppForm>
+      // Notice the `AppForm` component wrapper; `AppForm` provides the required
+      context
+      <form.SubscribeButton label="Submit" />
+    </form.AppForm>
+  )
+}
+```
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code long files.
+
+To solve this, we support breaking forms into smaller pieces using the `withForm` higher-order component.
+
+```tsx
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+const ChildForm = withForm({
+  // These values are only used for type-checking, and are not used at runtime
+  // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These props are also set as default values for the `render` function
+    title: 'Child Form',
+  },
+  render: function Render(props) {
+    return (
+      <div>
+        <p>{props.title}</p>
+        <props.form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <props.form.AppForm>
+          <props.form.SubscribeButton label="Submit" />
+        </props.form.AppForm>
+      </div>
+    )
+  },
+})
+
+function App() {
+  const form = useAppForm(() => ({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+### `withForm` FAQ
+
+> Why a higher-order component instead of a hook?
+>
+> While hooks are the future of Solid, higher-order components are still a powerful tool for composition. In particular, the API of `withForm` enables us to have strong type-safety without requiring users to pass generics.
+
+## Reusing groups of fields in multiple forms
+
+Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](/form/framework/solid/guides/linked-fields). Instead of repeating this logic across multiple forms, you can utilize the `withFieldGroup` higher-order component.
+
+> Unlike `withForm`, validators cannot be specified and could be any value.
+> Ensure that your fields can accept unknown error types.
+
+Rewriting the passwords example using `withFieldGroup` would look like this:
+
+```tsx
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+    ErrorInfo,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+type PasswordFields = {
+  password: string
+  confirm_password: string
+}
+
+// These default values are not used at runtime, but the keys are needed for mapping purposes.
+// This allows you to spread `formOptions` without needing to redeclare it.
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const FieldGroupPasswordFields = withFieldGroup({
+  defaultValues,
+  // You may also restrict the group to only use forms that implement this submit meta.
+  // If none is provided, any form with the right defaultValues may use it.
+  // onSubmitMeta: { action: '' }
+
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These default values are also for type-checking and are not used at runtime
+    title: 'Password',
+  },
+  // Internally, you will have access to a `group` instead of a `form`
+  render: function Render(props) {
+    // access reactive values using the group store
+    const password = useStore(
+      props.group.store,
+      (state) => state.values.password,
+    )
+    // or the form itself
+    const isSubmitting = useStore(
+      props.group.form.store,
+      (state) => state.isSubmitting,
+    )
+
+    return (
+      <div>
+        <h2>{props.title}</h2>
+        {/* Groups also have access to Field, Subscribe, Field, AppField and AppForm */}
+        <props.group.AppField name="password">
+          {(field) => <field.TextField label="Password" />}
+        </props.group.AppField>
+        <props.group.AppField
+          name="confirm_password"
+          validators={{
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) => {
+              // The form could be any values, so it is typed as 'unknown'
+              const values: unknown = fieldApi.form.state.values
+              // use the group methods instead
+              if (value !== props.group.getFieldValue('password')) {
+                return 'Passwords do not match'
+              }
+              return undefined
+            },
+          }}
+        >
+          {(field) => (
+            <div>
+              <field.TextField label="Confirm Password" />
+              <field.ErrorInfo />
+            </div>
+          )}
+        </props.group.AppField>
+      </div>
+    )
+  },
+})
+```
+
+We can now use these grouped fields in any form that implements the default values:
+
+```tsx
+// You are allowed to extend the group fields as long as the
+// existing properties remain unchanged
+type Account = PasswordFields & {
+  provider: string
+  username: string
+}
+
+// You may nest the group fields wherever you want
+type FormValues = {
+  name: string
+  age: number
+  account_data: PasswordFields
+  linked_accounts: Account[]
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  account_data: {
+    password: '',
+    confirm_password: '',
+  },
+  linked_accounts: [
+    {
+      provider: 'TanStack',
+      username: '',
+      password: '',
+      confirm_password: '',
+    },
+  ],
+}
+
+function App() {
+  const form = useAppForm(() => ({
+    defaultValues,
+    // If the group didn't specify an `onSubmitMeta` property,
+    // the form may implement any meta it wants.
+    // Otherwise, the meta must be defined and match.
+    onSubmitMeta: { action: '' },
+  }))
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You must specify where the fields can be found
+        fields="account_data"
+        title="Passwords"
+      />
+      <form.Field name="linked_accounts" mode="array">
+        {(field) =>
+          field().state.value.map((account, i) => (
+            <FieldGroupPasswordFields
+              key={account.provider}
+              form={form}
+              // The fields may be in nested fields
+              fields={`linked_accounts[${i}]`}
+              title={account.provider}
+            />
+          ))
+        }
+      </form.Field>
+    </form.AppForm>
+  )
+}
+```
+
+### Mapping field group values to a different field
+
+You may want to keep the password fields on the top level of your form, or rename the properties for clarity. You can map field group values
+to their true location by changing the `field` property:
+
+> [!IMPORTANT]
+> Due to TypeScript limitations, field mapping is only allowed for objects. You can use records or arrays at the top level of a field group, but you will not be able to map the fields.
+
+```tsx
+// To have an easier form, you can keep the fields on the top level
+type FormValues = {
+  name: string
+  age: number
+  password: string
+  confirm_password: string
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  password: '',
+  confirm_password: '',
+}
+
+function App() {
+  const form = useAppForm(() => ({
+    defaultValues,
+  }))
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You can map the fields to their equivalent deep key
+        fields={{
+          password: 'password',
+          confirm_password: 'confirm_password',
+          // or map them to differently named keys entirely
+          // 'password': 'name'
+        }}
+        title="Passwords"
+      />
+    </form.AppForm>
+  )
+}
+```
+
+If you expect your fields to always be at the top level of your form, you can create a quick map
+of your field groups using a helper function:
+
+```tsx
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const passwordFields = createFieldMap(defaultValues)
+/* This generates the following map:
+ {
+    'password': 'password',
+    'confirm_password': 'confirm_password'
+ }
+*/
+
+// Usage:
+<FieldGroupPasswordFields
+  form={form}
+  fields={passwordFields}
+  title="Passwords"
+/>
+```
+
+## Tree-shaking form and field components
+
+While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
+In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form hook.
+
+To solve this, you can mix the `createFormHook` TanStack API with the Solid `lazy` and `Suspense` components:
+
+```typescript
+// src/hooks/form-context.ts
+import { createFormHookContexts } from '@tanstack/solid-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+```
+
+```tsx
+// src/components/text-field.tsx
+import { useFieldContext } from '../hooks/form-context.tsx'
+
+export default function TextField(props: { label: string }) {
+  const field = useFieldContext<string>()
+
+  return (
+    <label>
+      <div>{props.label}</div>
+      <input
+        value={field().state.value}
+        onChange={(e) => field().handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+```
+
+```tsx
+// src/hooks/form.ts
+import { lazy } from 'solid-js'
+import { createFormHook } from '@tanstack/solid-form'
+
+const TextField = lazy(() => import('../components/text-fields.tsx'))
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+```tsx
+// src/App.tsx
+import { Suspense } from 'solid-js'
+import { PeoplePage } from './features/people/form.tsx'
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <PeoplePage />
+    </Suspense>
+  )
+}
+```
+
+This will show the Suspense fallback while the `TextField` component is being loaded, and then render the form once it's loaded.
+
+## Putting it all together
+
+Now that we've covered the basics of creating custom form hooks, let's put it all together in a single example.
+
+```tsx
+// /src/hooks/form.ts, to be used across the entire app
+const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
+
+function TextField(props: { label: string }) {
+  const field = useFieldContext<string>()
+  return (
+    <label>
+      <div>{props.label}</div>
+      <input
+        value={field().state.value}
+        onChange={(e) => field().handleChange(e.target.value)}
+      />
+    </label>
+  )
+}
+
+function SubscribeButton(props: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button disabled={isSubmitting()}>{props.label}</button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+// /src/features/people/shared-form.ts, to be used across `people` features
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+
+// /src/features/people/nested-form.ts, to be used in the `people` page
+const ChildForm = withForm({
+  ...formOpts,
+  // Optional, but adds props to the `render` function outside of `form`
+  props: {
+    title: 'Child Form',
+  },
+  render: (props) => {
+    return (
+      <div>
+        <p>{props.title}</p>
+        <props.form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <props.form.AppForm>
+          <props.form.SubscribeButton label="Submit" />
+        </props.form.AppForm>
+      </div>
+    )
+  },
+})
+
+// /src/features/people/page.ts
+const Parent = () => {
+  const form = useAppForm(() => ({
+    ...formOpts,
+  }))
+
+  return <ChildForm form={form} title={'Testing'} />
+}
+```
+
+## API Usage Guidance
+
+Here's a chart to help you decide what APIs you should be using:
+
+![](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/react_form_composability.svg)
diff --git a/mintlify/form/framework/solid/guides/form-groups.md b/mintlify/form/framework/solid/guides/form-groups.md
new file mode 100644
index 000000000..db2e34937
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/form-groups.md
@@ -0,0 +1,178 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `<form.FormGroup>`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `createForm` or [`useAppForm`](/form/framework/solid/guides/form-composition) to create a `form` variable, then reference its `FormGroup` component like you would a `Field`:
+
+```tsx
+const form = createForm(() => ({
+  defaultValues: {
+    step1: {
+      name: '',
+    },
+    step2: {
+      age: 0,
+    },
+  },
+}))
+
+return (
+  <form.FormGroup name="step1">
+    {(group) => (
+      // `group()` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue`
+      // ...
+    )}
+  </form.FormGroup>
+)
+```
+
+This becomes much more useful when paired with external state to conditionally render a `FormGroup`:
+
+```tsx
+const [step, setStep] = createSignal(0)
+const form = createForm(() => ({
+  defaultValues: {
+    step1: {
+      name: '',
+    },
+    step2: {
+      age: 0,
+    },
+  },
+}))
+
+return (
+  <>
+    <Show when={step() === 0}>
+      <form.FormGroup
+        name="step1"
+        onGroupSubmit={() => {
+          // We can move the step forward when validation passes
+          setStep(step() + 1)
+        }}
+        onGroupSubmitInvalid={() => {
+          // Or handle invalid submissions, just like a top-level form
+        }}
+        onSubmitMeta={{} as SomeType}
+      >
+        {(group) => (
+          // Use `group().handleSubmit()` to submit the sub-form, but not the parent form
+          // ...
+        )}
+      </form.FormGroup>
+    </Show>
+    <Show when={step() === 1}>
+      <form.FormGroup name="step2">
+        {(group) => (
+          // Then, use `form.handleSubmit()` to submit the entire form
+          // ...
+        )}
+      </form.FormGroup>
+    </Show>
+  </>
+)
+```
+
+## Form Group Validation
+
+Form groups have a distinct validation proceedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```tsx
+<form.FormGroup name="step1" validators={{ onChange: () => 'Error' }}>
+  {(group) => {
+    group().state.meta.errorMap // {onChange: "Error" | undefined}
+    group().state.meta.errors // ("Error")[]
+  }}
+</form.FormGroup>
+```
+
+- Can set errors on sub-fields:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: ({ value, groupApi }) => ({
+      group: value.name === 'error' ? 'Group error' : undefined,
+      fields: {
+        // Must use the name of the field relative to the FormGroup as the error key,
+        // to stay consistent with how standard schema works with form groups
+        name: value.name === 'error' ? 'Field error' : undefined,
+      },
+    }),
+  }}
+/>
+```
+
+- And can even accept standard schemas:
+
+```tsx
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: z.object({
+      name: z.string().min(2),
+    }),
+  }}
+/>
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```
+> const step1Schema = z.object(&#123;
+>     name: z.string().min(2)
+> &#125;)
+>
+> const schema = z.object(&#123;
+>     step1: step1Schema,
+>     step2: step2Schema
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/solid/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `createForm`:
+
+```tsx
+createForm(() => ({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+}))
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the `FormGroup` itself:
+
+```tsx
+<form.FormGroup validators={{ onDynamic: step1Schema }} />
+```
+
+It will treat `group().submissionAttempts` as the way to change what validator is ran before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group().state.meta.errors`, you're also able to access the group's value using `group().state.value`. Likewise, here are some valuable properties you can access in the `group().state.meta`:
+
+- `group().state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group().state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group().state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group().state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/solid/guides/linked-fields.md b/mintlify/form/framework/solid/guides/linked-fields.md
new file mode 100644
index 000000000..489a05436
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/linked-fields.md
@@ -0,0 +1,77 @@
+---
+id: linked-fields
+title: Link Two Form Fields Together
+---
+
+You may find yourself needing to link two fields together; when one is validated as another field's value has changed.
+One such usage is when you have both a `password` and `confirm_password` field,
+where you want to `confirm_password` to error out when `password`'s value does not match;
+regardless of which field triggered the value change.
+
+Imagine the following userflow:
+
+- User updates confirm password field.
+- User updates the non-confirm password field.
+
+In this example, the form will still have errors present,
+as the "confirm password" field validation has not been re-ran to mark as accepted.
+
+To solve this, we need to make sure that the "confirm password" validation is re-run when the password field is updated.
+To do this, you can add a `onChangeListenTo` property to the `confirm_password` field.
+
+```tsx
+export default function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      password: '',
+      confirm_password: '',
+    },
+    // ...
+  }))
+
+  return (
+    <div>
+      <form.Field name="password">
+        {(field) => (
+          <label>
+            <div>Password</div>
+            <input
+              value={field().state.value}
+              onChange={(e) => field().handleChange(e.target.value)}
+            />
+          </label>
+        )}
+      </form.Field>
+      <form.Field
+        name="confirm_password"
+        validators={{
+          onChangeListenTo: ['password'],
+          onChange: ({ value, fieldApi }) => {
+            if (value !== fieldApi.form.getFieldValue('password')) {
+              return 'Passwords do not match'
+            }
+            return undefined
+          },
+        }}
+      >
+        {(field) => (
+          <div>
+            <label>
+              <div>Confirm Password</div>
+              <input
+                value={field().state.value}
+                onChange={(e) => field().handleChange(e.target.value)}
+              />
+            </label>
+            <Index each={field().state.meta.errors}>
+              {(err) => <div>{err()}</div>}
+            </Index>
+          </div>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+```
+
+This similarly works with `onBlurListenTo` property, which will re-run the validation when the field is blurred.
diff --git a/mintlify/form/framework/solid/guides/submission-handling.md b/mintlify/form/framework/solid/guides/submission-handling.md
new file mode 100644
index 000000000..dce639b04
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/submission-handling.md
@@ -0,0 +1,98 @@
+---
+id: submission-handling
+title: Submission handling
+---
+
+## Passing additional data to submission handling
+
+You may have multiple types of submission behaviour, for example, going back to another page or staying on the form.
+You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
+
+> Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
+
+```tsx
+import { createForm } from '@tanstack/solid-form'
+
+type FormMeta = {
+  submitAction: 'continue' | 'backToMenu' | null
+}
+
+// Metadata is not required to call form.handleSubmit().
+// Specify what values to use as default if no meta is passed
+const defaultMeta: FormMeta = {
+  submitAction: null,
+}
+
+export default function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      data: '',
+    },
+    // Define what meta values to expect on submission
+    onSubmitMeta: defaultMeta,
+    onSubmit: async ({ value, meta }) => {
+      // Do something with the values passed via handleSubmit
+      console.log(`Selected action - ${meta.submitAction}`, value)
+    },
+  }))
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      {/* ... */}
+      <button
+        type="submit"
+        // Overwrites the default specified in onSubmitMeta
+        onClick={() => form.handleSubmit({ submitAction: 'continue' })}
+      >
+        Submit and continue
+      </button>
+      <button
+        type="submit"
+        onClick={() => form.handleSubmit({ submitAction: 'backToMenu' })}
+      >
+        Submit and back to menu
+      </button>
+    </form>
+  )
+}
+```
+
+## Transforming data with Standard Schemas
+
+While Tanstack Form provides [Standard Schema support](/form/framework/solid/guides/validation) for validation, it does not preserve the Schema's output data.
+
+The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function:
+
+```tsx
+import { createForm } from '@tanstack/solid-form'
+import { z } from 'zod'
+
+// ...
+
+const schema = z.object({
+  age: z.string().transform((age) => Number(age)),
+})
+
+// Tanstack Form uses the input type of Standard Schemas
+const defaultValues: z.input<typeof schema> = {
+  age: '13',
+}
+
+const form = createForm(() => ({
+  defaultValues,
+  validators: {
+    onChange: schema,
+  },
+  onSubmit: ({ value }) => {
+    const inputAge: string = value.age
+    // Pass it through the schema to get the transformed value
+    const result = schema.parse(value)
+    const outputAge: number = result.age
+  },
+}))
+```
diff --git a/mintlify/form/framework/solid/guides/validation.md b/mintlify/form/framework/solid/guides/validation.md
new file mode 100644
index 000000000..5ab4d710d
--- /dev/null
+++ b/mintlify/form/framework/solid/guides/validation.md
@@ -0,0 +1,568 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit...)
+- Validation rules can be defined at the field level or at the form level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `<Field />` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field().state.meta.errors`.
+
+Here is an example:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label for={field().name}>Age:</label>
+      <input
+        id={field().name}
+        name={field().name}
+        value={field().state.value}
+        type="number"
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+      />
+      {!field().state.meta.isValid ? (
+        <em role="alert">{field().state.meta.errors.join(', ')}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      <label for={field().name}>Age:</label>
+      <input
+        id={field().name}
+        name={field().name}
+        value={field().state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field().handleBlur}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+      />
+      {!field().state.meta.isValid ? (
+        <em role="alert">{field().state.meta.errors.join(', ')}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+    onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      <label for={field().name}>Age:</label>
+      <input
+        id={field().name}
+        name={field().name}
+        value={field().state.value}
+        type="number"
+        // Listen to the onBlur event on the field
+        onBlur={field().handleBlur}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+      />
+      {!field().state.meta.isValid ? (
+        <em role="alert">{field().state.meta.errors.join(', ')}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field().state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field().state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => {
+    return (
+      <>
+        {/* ... */}
+        {!field().state.meta.isValid ? (
+          <em>{field().state.meta.errors.join(',')}</em>
+        ) : null}
+      </>
+    )
+  }}
+</form.Field>
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {field().state.meta.errorMap['onChange'] ? (
+        <em>{field().state.meta.errorMap['onChange']}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+  }}
+>
+  {(field) => (
+    <>
+      {/* ... */}
+      {/* errorMap.onChange is type `{isOldEnough: false} | undefined` */}
+      {/* meta.errors is type `Array<{isOldEnough: false} | undefined>` */}
+      {!field().state.meta.errorMap['onChange']?.isOldEnough ? (
+        <em>The user is not old enough</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+## Validation at field level vs at form level
+
+As shown above, each `<Field>` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `createForm()` hook.
+
+Example:
+
+```tsx
+export default function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  }))
+
+  // Subscribe to the form's error map so that updates to it will render
+  // alternately, you can use `form.Subscribe`
+  const formErrorMap = form.useStore((state) => state.errorMap)
+
+  return (
+    <div>
+      {/* ... */}
+      {formErrorMap().onChange ? (
+        <div>
+          <em>There was an error on the form: {formErrorMap().onChange}</em>
+        </div>
+      ) : null}
+      {/* ... */}
+    </div>
+  )
+}
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```tsx
+import { Show } from 'solid-js'
+import { createForm } from '@tanstack/solid-form'
+
+export default function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      age: 0,
+      socials: [],
+      details: {
+        email: '',
+      },
+    },
+    validators: {
+      onSubmitAsync: async ({ value }) => {
+        // Validate the value on the server
+        const hasErrors = await validateDataOnServer(value)
+        if (hasErrors) {
+          return {
+            form: 'Invalid data', // The `form` key is optional
+            fields: {
+              age: 'Must be 13 or older to sign',
+              // Set errors on nested fields with the field's name
+              'socials[0].url': 'The provided URL does not exist',
+              'details.email': 'An email is required',
+            },
+          }
+        }
+
+        return null
+      },
+    },
+  }))
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          void form.handleSubmit()
+        }}
+      >
+        <form.Field
+          name="age"
+          children={(field) => (
+            <>
+              <label for={field().name}>Age:</label>
+              <input
+                id={field().name}
+                name={field().name}
+                value={field().state.value}
+                type="number"
+                onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+              />
+              <Show when={field().state.meta.errors.length > 0}>
+                <em role="alert">{field().state.meta.errors.join(', ')}</em>
+              </Show>
+            </>
+          )}
+        />
+        <form.Subscribe
+          selector={(state) => ({ errors: state.errors })}
+          children={(state) => (
+            <Show when={state().errors.length > 0}>
+              <div>
+                <em>
+                  There was an error on the form: {state().errors.join(', ')}
+                </em>
+              </div>
+            </Show>
+          )}
+        />
+
+        <button type="submit">Submit</button>
+        {/*...*/}
+      </form>
+    </div>
+  )
+}
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```tsx
+>  const form = createForm(() => (&#123;
+>    defaultValues: &#123;
+>      age: 0,
+>    &#125;,
+>    validators: &#123;
+>      onChange: (&#123; value &#125;) => &#123;
+>        return &#123;
+>          fields: &#123;
+>            age: value.age &lt; 12 ? 'Too young!' : undefined,
+>          &#125;,
+>        &#125;;
+>      &#125;,
+>    &#125;,
+>  &#125;));
+>
+>  return (
+>    &lt;form.Field
+>      name="age"
+>      validators=&#123;&#123;
+>        onChange: (&#123; value &#125;) => (value % 2 === 0 ? 'Must be odd!' : undefined),
+>      &#125;&#125;
+>      children=&#123;() => &lt;>&#123;/* ... */&#125;&lt;/>&#125;
+>    />
+>  );
+> &#125;
+> ```
+>
+> Will only show `'Must be odd!` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value < 13 ? 'You must be 13 to make an account' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label for={field().name}>Age:</label>
+      <input
+        id={field().name}
+        name={field().name}
+        value={field().state.value}
+        type="number"
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+      />
+      {!field().state.meta.isValid ? (
+        <em role="alert">{field().state.meta.errors.join(', ')}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) => (value < 13 ? 'You must be at least 13' : undefined),
+    onBlurAsync: async ({ value }) => {
+      const currentAge = await fetchCurrentAgeOnProfile()
+      return value < currentAge ? 'You can only increase the age' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <>
+      <label for={field().name}>Age:</label>
+      <input
+        id={field().name}
+        name={field().name}
+        value={field().state.value}
+        type="number"
+        onBlur={field().handleBlur}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
+      />
+      {field().state.meta.errors ? (
+        <em role="alert">{field().state.meta.errors.join(', ')}</em>
+      ) : null}
+    </>
+  )}
+</form.Field>
+```
+
+The synchronous validation method (`onBlur`) is run first and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```tsx
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsyncDebounceMs: 1500,
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+    onBlurAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. See [submission handling](/form/framework/solid/guides/submission-handling) for more information.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```tsx
+import { z } from 'zod'
+
+// ...
+
+const form = createForm(() => ({
+  // ...
+}))
+
+;<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+Async validations on form and field level are supported as well:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.number().refine(
+      async (value) => {
+        const currentAge = await fetchCurrentAgeOnProfile()
+        return value >= currentAge
+      },
+      {
+        message: 'You can only increase the age',
+      },
+    ),
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```tsx
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value, fieldApi }) => {
+      const errors = fieldApi.parseValueWithSchema(
+        z.number().gte(13, 'You must be 13 to make an account'),
+      )
+
+      if (errors) return errors
+
+      // continue with your validation
+    },
+  }}
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+## Preventing invalid forms from being submitted
+
+The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
+
+The form state object has a `canSubmit` flag that is false when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to it via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```tsx
+const form = createForm(() => ({
+  /* ... */
+}))
+
+return (
+  /* ... */
+
+  // Dynamic submit button
+  <form.Subscribe
+    selector={(state) => ({
+      canSubmit: state.canSubmit,
+      isSubmitting: state.isSubmitting,
+    })}
+    children={(state) => (
+      <button type="submit" disabled={!state().canSubmit}>
+        {state().isSubmitting ? '...' : 'Submit'}
+      </button>
+    )}
+  />
+)
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/solid/quick-start.md b/mintlify/form/framework/solid/quick-start.md
new file mode 100644
index 000000000..36561fe6d
--- /dev/null
+++ b/mintlify/form/framework/solid/quick-start.md
@@ -0,0 +1,52 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
+
+```tsx
+import { createForm } from '@tanstack/solid-form'
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      fullName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div>
+          <form.Field
+            name="fullName"
+            children={(field) => (
+              <input
+                name={field().name}
+                value={field().state.value}
+                onBlur={field().handleBlur}
+                onInput={(e) => field().handleChange(e.target.value)}
+              />
+            )}
+          />
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  )
+}
+```
+
+From here, you'll be ready to explore all of the other features of TanStack Form!
diff --git a/mintlify/form/framework/solid/reference/functions/Field.md b/mintlify/form/framework/solid/reference/functions/Field.md
new file mode 100644
index 000000000..7daeaaa45
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/Field.md
@@ -0,0 +1,116 @@
+---
+id: Field
+title: Field
+---
+
+# Function: Field()
+
+```ts
+function Field<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(props): Element;
+```
+
+Defined in: [packages/solid-form/src/createField.tsx:660](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L660)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### props
+
+`FieldComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`Element`
diff --git a/mintlify/form/framework/solid/reference/functions/FormGroup.md b/mintlify/form/framework/solid/reference/functions/FormGroup.md
new file mode 100644
index 000000000..362ac3fec
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/FormGroup.md
@@ -0,0 +1,128 @@
+---
+id: FormGroup
+title: FormGroup
+---
+
+# Function: FormGroup()
+
+```ts
+function FormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(props): Element;
+```
+
+Defined in: [packages/solid-form/src/createFormGroup.tsx:524](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormGroup.tsx#L524)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### props
+
+`FormGroupComponentProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`Element`
diff --git a/mintlify/form/framework/solid/reference/functions/createField.md b/mintlify/form/framework/solid/reference/functions/createField.md
new file mode 100644
index 000000000..3ab3b1850
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createField.md
@@ -0,0 +1,122 @@
+---
+id: createField
+title: createField
+---
+
+# Function: createField()
+
+```ts
+function createField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): () => FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & SolidFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createField.tsx:218](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L218)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+() => [`CreateFieldOptions`](/form/framework/solid/reference/interfaces/CreateFieldOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+```ts
+(): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & SolidFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+### Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\> & `SolidFieldApi`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/solid/reference/functions/createFieldGroup.md b/mintlify/form/framework/solid/reference/functions/createFieldGroup.md
new file mode 100644
index 000000000..d5cdae5ad
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createFieldGroup.md
@@ -0,0 +1,90 @@
+---
+id: createFieldGroup
+title: createFieldGroup
+---
+
+# Function: createFieldGroup()
+
+```ts
+function createFieldGroup<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TComponents, TFormComponents, TSubmitMeta>(opts): AppFieldExtendedSolidFieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+Defined in: [packages/solid-form/src/createFieldGroup.tsx:74](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFieldGroup.tsx#L74)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Parameters
+
+### opts
+
+() => `object`
+
+## Returns
+
+`AppFieldExtendedSolidFieldGroupApi`\&lt;`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
diff --git a/mintlify/form/framework/solid/reference/functions/createForm.md b/mintlify/form/framework/solid/reference/functions/createForm.md
new file mode 100644
index 000000000..d5bd63d5a
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createForm.md
@@ -0,0 +1,72 @@
+---
+id: createForm
+title: createForm
+---
+
+# Function: createForm()
+
+```ts
+function createForm<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(opts?): FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta> & SolidFormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:175](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L175)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts?
+
+() => `FormOptions`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+`FormApi`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\> & [`SolidFormApi`](/form/framework/solid/reference/interfaces/SolidFormApi)\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/solid/reference/functions/createFormGroup.md b/mintlify/form/framework/solid/reference/functions/createFormGroup.md
new file mode 100644
index 000000000..0201e3589
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createFormGroup.md
@@ -0,0 +1,134 @@
+---
+id: createFormGroup
+title: createFormGroup
+---
+
+# Function: createFormGroup()
+
+```ts
+function createFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): () => FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createFormGroup.tsx:127](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormGroup.tsx#L127)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+() => `FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+```ts
+(): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+### Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
diff --git a/mintlify/form/framework/solid/reference/functions/createFormHook.md b/mintlify/form/framework/solid/reference/functions/createFormHook.md
new file mode 100644
index 000000000..706854ec3
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createFormHook.md
@@ -0,0 +1,280 @@
+---
+id: createFormHook
+title: createFormHook
+---
+
+# Function: createFormHook()
+
+```ts
+function createFormHook<TComponents, TFormComponents>(opts): object;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:300](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L300)
+
+## Type Parameters
+
+### TComponents
+
+`TComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+## Parameters
+
+### opts
+
+`CreateFormHookProps`\&lt;`TComponents`, `TFormComponents`\>
+
+## Returns
+
+`object`
+
+### useAppForm()
+
+```ts
+useAppForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(props) => AppFieldExtendedSolidFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+#### Parameters
+
+##### props
+
+`Accessor`\&lt;`FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>\>
+
+#### Returns
+
+`AppFieldExtendedSolidFormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => Element;
+```
+
+#### Type Parameters
+
+##### TFieldGroupData
+
+`TFieldGroupData`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `Record`\&lt;`string`, `unknown`\> = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFieldGroupProps`](/form/framework/solid/reference/interfaces/WithFieldGroupProps)\&lt;`TFieldGroupData`, `TComponents`, `TFormComponents`, `TSubmitMeta`, `TRenderProps`\>
+
+#### Returns
+
+```ts
+<TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params): Element;
+```
+
+##### Type Parameters
+
+###### TFormData
+
+`TFormData`
+
+###### TFields
+
+`TFields` *extends* 
+  \| `string`
+  \| \&#123; \[K in string \| number \| symbol\]: DeepKeysOfType\&lt;TFormData, TFieldGroupData\[K\]\> \&#125;
+
+###### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+###### TFormSubmitMeta
+
+`TFormSubmitMeta`
+
+##### Parameters
+
+###### params
+
+`ParentProps`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+##### Returns
+
+`Element`
+
+### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => (props) => Element;
+```
+
+#### Type Parameters
+
+##### TFormData
+
+`TFormData`
+
+##### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+##### TSubmitMeta
+
+`TSubmitMeta`
+
+##### TRenderProps
+
+`TRenderProps` *extends* `Record`\&lt;`string`, `unknown`\> = \&#123;
+\&#125;
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFormProps`](/form/framework/solid/reference/interfaces/WithFormProps)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`, `TRenderProps`\>
+
+#### Returns
+
+```ts
+(props): Element;
+```
+
+##### Parameters
+
+###### props
+
+`ParentProps`\&lt;`NoInfer`\&lt;`UnwrapOrAny`\&lt;`TRenderProps`\>\> & `object`\>
+
+##### Returns
+
+`Element`
diff --git a/mintlify/form/framework/solid/reference/functions/createFormHookContexts.md b/mintlify/form/framework/solid/reference/functions/createFormHookContexts.md
new file mode 100644
index 000000000..01ff7862f
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/functions/createFormHookContexts.md
@@ -0,0 +1,54 @@
+---
+id: createFormHookContexts
+title: createFormHookContexts
+---
+
+# Function: createFormHookContexts()
+
+```ts
+function createFormHookContexts(): object;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:69](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L69)
+
+## Returns
+
+`object`
+
+### fieldContext
+
+```ts
+fieldContext: Context<Accessor<AnyFieldApi>>;
+```
+
+### formContext
+
+```ts
+formContext: Context<AnyFormApi>;
+```
+
+### useFieldContext()
+
+```ts
+useFieldContext: <TData>() => Accessor<FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>>;
+```
+
+#### Type Parameters
+
+##### TData
+
+`TData`
+
+#### Returns
+
+`Accessor`\&lt;`FieldApi`\&lt;`any`, `string`, `TData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>\>
+
+### useFormContext()
+
+```ts
+useFormContext: () => SolidFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+#### Returns
+
+[`SolidFormExtendedApi`](/form/framework/solid/reference/type-aliases/SolidFormExtendedApi)\&lt;`Record`\&lt;`string`, `never`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
diff --git a/mintlify/form/framework/solid/reference/index.md b/mintlify/form/framework/solid/reference/index.md
new file mode 100644
index 000000000..0aa13d5be
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/index.md
@@ -0,0 +1,36 @@
+---
+id: "@tanstack/solid-form"
+title: "@tanstack/solid-form"
+---
+
+# @tanstack/solid-form
+
+## Interfaces
+
+- [CreateFieldOptions](/form/framework/solid/reference/interfaces/CreateFieldOptions)
+- [CreateFieldOptionsBound](/form/framework/solid/reference/interfaces/CreateFieldOptionsBound)
+- [SolidFormApi](/form/framework/solid/reference/interfaces/SolidFormApi)
+- [WithFieldGroupProps](/form/framework/solid/reference/interfaces/WithFieldGroupProps)
+- [WithFormProps](/form/framework/solid/reference/interfaces/WithFormProps)
+
+## Type Aliases
+
+- [FieldComponent](/form/framework/solid/reference/type-aliases/FieldComponent)
+- [FormGroupComponent](/form/framework/solid/reference/type-aliases/FormGroupComponent)
+- [LensFieldComponent](/form/framework/solid/reference/type-aliases/LensFieldComponent)
+- [SolidFormExtendedApi](/form/framework/solid/reference/type-aliases/SolidFormExtendedApi)
+
+## Variables
+
+- [~~useStore~~](/form/framework/solid/reference/variables/useStore)
+
+## Functions
+
+- [createField](/form/framework/solid/reference/functions/createField)
+- [createFieldGroup](/form/framework/solid/reference/functions/createFieldGroup)
+- [createForm](/form/framework/solid/reference/functions/createForm)
+- [createFormGroup](/form/framework/solid/reference/functions/createFormGroup)
+- [createFormHook](/form/framework/solid/reference/functions/createFormHook)
+- [createFormHookContexts](/form/framework/solid/reference/functions/createFormHookContexts)
+- [Field](/form/framework/solid/reference/functions/Field)
+- [FormGroup](/form/framework/solid/reference/functions/FormGroup)
diff --git a/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptions.md b/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptions.md
new file mode 100644
index 000000000..6a017ba9f
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptions.md
@@ -0,0 +1,122 @@
+---
+id: CreateFieldOptions
+title: CreateFieldOptions
+---
+
+# Interface: CreateFieldOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [packages/solid-form/src/types.ts:19](https://github.com/TanStack/form/blob/main/packages/solid-form/src/types.ts#L19)
+
+## Extends
+
+- `FieldApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/solid-form/src/types.ts:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/types.ts#L16)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptionsBound.md b/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptionsBound.md
new file mode 100644
index 000000000..d1195f7f4
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/interfaces/CreateFieldOptionsBound.md
@@ -0,0 +1,78 @@
+---
+id: CreateFieldOptionsBound
+title: CreateFieldOptionsBound
+---
+
+# Interface: CreateFieldOptionsBound\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/solid-form/src/types.ts:80](https://github.com/TanStack/form/blob/main/packages/solid-form/src/types.ts#L80)
+
+## Extends
+
+- `FieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### mode?
+
+```ts
+optional mode: "value" | "array";
+```
+
+Defined in: [packages/solid-form/src/types.ts:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/types.ts#L16)
+
+#### Inherited from
+
+```ts
+FieldOptionsMode.mode
+```
diff --git a/mintlify/form/framework/solid/reference/interfaces/SolidFormApi.md b/mintlify/form/framework/solid/reference/interfaces/SolidFormApi.md
new file mode 100644
index 000000000..830ad8273
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/interfaces/SolidFormApi.md
@@ -0,0 +1,142 @@
+---
+id: SolidFormApi
+title: SolidFormApi
+---
+
+# Interface: SolidFormApi\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [packages/solid-form/src/createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### Field
+
+```ts
+Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:30](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L30)
+
+***
+
+### FormGroup
+
+```ts
+FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:44](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L44)
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:93](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L93)
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`\>\>
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector?
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+***
+
+### useStore()
+
+```ts
+useStore: <TSelected>(selector?) => () => TSelected;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:58](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L58)
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`\>\>
+
+#### Parameters
+
+##### selector?
+
+(`state`) => `TSelected`
+
+#### Returns
+
+```ts
+(): TSelected;
+```
+
+##### Returns
+
+`TSelected`
diff --git a/mintlify/form/framework/solid/reference/interfaces/WithFieldGroupProps.md b/mintlify/form/framework/solid/reference/interfaces/WithFieldGroupProps.md
new file mode 100644
index 000000000..7e35add92
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/interfaces/WithFieldGroupProps.md
@@ -0,0 +1,64 @@
+---
+id: WithFieldGroupProps
+title: WithFieldGroupProps
+---
+
+# Interface: WithFieldGroupProps\&lt;TFieldGroupData, TFieldComponents, TFormComponents, TSubmitMeta, TRenderProps\>
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:263](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L263)
+
+## Extends
+
+- `BaseFormOptions`\&lt;`TFieldGroupData`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TRenderProps
+
+`TRenderProps` *extends* `Record`\&lt;`string`, `unknown`\> = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:271](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L271)
+
+***
+
+### render()
+
+```ts
+render: (props) => Element;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:272](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L272)
+
+#### Parameters
+
+##### props
+
+`ParentProps`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+#### Returns
+
+`Element`
diff --git a/mintlify/form/framework/solid/reference/interfaces/WithFormProps.md b/mintlify/form/framework/solid/reference/interfaces/WithFormProps.md
new file mode 100644
index 000000000..fe7c893c3
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/interfaces/WithFormProps.md
@@ -0,0 +1,104 @@
+---
+id: WithFormProps
+title: WithFormProps
+---
+
+# Interface: WithFormProps\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents, TRenderProps\>
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:207](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L207)
+
+## Extends
+
+- `FormOptions`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFieldComponents
+
+`TFieldComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TFormComponents
+
+`TFormComponents` *extends* `Record`\&lt;`string`, `Component`\&lt;`any`\>\>
+
+### TRenderProps
+
+`TRenderProps` *extends* `Record`\&lt;`string`, `unknown`\> = `Record`\&lt;`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:238](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L238)
+
+***
+
+### render()
+
+```ts
+render: (props) => Element;
+```
+
+Defined in: [packages/solid-form/src/createFormHook.tsx:239](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L239)
+
+#### Parameters
+
+##### props
+
+`ParentProps`\&lt;`NoInfer`\&lt;`TRenderProps`\> & `object`\>
+
+#### Returns
+
+`Element`
diff --git a/mintlify/form/framework/solid/reference/type-aliases/CreateField.md b/mintlify/form/framework/solid/reference/type-aliases/CreateField.md
new file mode 100644
index 000000000..d5aa37552
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/type-aliases/CreateField.md
@@ -0,0 +1,12 @@
+---
+title: "Types / CreateField"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/solid/reference/type-aliases/CreateField)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/solid/reference/type-aliases/FieldComponent.md b/mintlify/form/framework/solid/reference/type-aliases/FieldComponent.md
new file mode 100644
index 000000000..8b996d36c
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/type-aliases/FieldComponent.md
@@ -0,0 +1,131 @@
+---
+id: FieldComponent
+title: FieldComponent
+---
+
+# Type Alias: FieldComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi\>
+
+```ts
+type FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => JSX.Element;
+```
+
+Defined in: [packages/solid-form/src/createField.tsx:414](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L414)
+
+A type alias representing a field component for a specific form data type.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TPatentSubmitMeta
+
+`TPatentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`FieldComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TPatentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`JSX.Element`
diff --git a/mintlify/form/framework/solid/reference/type-aliases/FormGroupComponent.md b/mintlify/form/framework/solid/reference/type-aliases/FormGroupComponent.md
new file mode 100644
index 000000000..ab6697a69
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/type-aliases/FormGroupComponent.md
@@ -0,0 +1,137 @@
+---
+id: FormGroupComponent
+title: FormGroupComponent
+---
+
+# Type Alias: FormGroupComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>(props) => JSXElement;
+```
+
+Defined in: [packages/solid-form/src/createFormGroup.tsx:350](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormGroup.tsx#L350)
+
+A type alias representing a form group component for a specific form data type.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### props
+
+`FormGroupComponentBoundProps`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`, `ExtendedApi`\>
+
+## Returns
+
+`JSXElement`
diff --git a/mintlify/form/framework/solid/reference/type-aliases/LensFieldComponent.md b/mintlify/form/framework/solid/reference/type-aliases/LensFieldComponent.md
new file mode 100644
index 000000000..3df48b503
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/type-aliases/LensFieldComponent.md
@@ -0,0 +1,91 @@
+---
+id: LensFieldComponent
+title: LensFieldComponent
+---
+
+# Type Alias: LensFieldComponent()\&lt;TLensData, TParentSubmitMeta, ExtendedApi\>
+
+```ts
+type LensFieldComponent<TLensData, TParentSubmitMeta, ExtendedApi> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>({
+  children,
+  ...fieldOptions
+}) => JSX.Element;
+```
+
+Defined in: [packages/solid-form/src/createField.tsx:575](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L575)
+
+A type alias representing a field component for a form lens data type.
+
+## Type Parameters
+
+### TLensData
+
+`TLensData`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+### ExtendedApi
+
+`ExtendedApi` = \&#123;
+\&#125;
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TLensData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TLensData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`unknown`, `string`, `TData`\>
+
+## Parameters
+
+### \&#123;
+  children,
+  ...fieldOptions
+\&#125;
+
+`Omit`\&lt;`FieldComponentBoundProps`\&lt;`unknown`, `string`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `undefined` \| `FormAsyncValidateOrFn`\&lt;`unknown`\>, `TParentSubmitMeta`, `ExtendedApi`\>, `"name"` \| `"validators"`\> & `object`
+
+## Returns
+
+`JSX.Element`
diff --git a/mintlify/form/framework/solid/reference/type-aliases/SolidFormExtendedApi.md b/mintlify/form/framework/solid/reference/type-aliases/SolidFormExtendedApi.md
new file mode 100644
index 000000000..730b7f4bc
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/type-aliases/SolidFormExtendedApi.md
@@ -0,0 +1,64 @@
+---
+id: SolidFormExtendedApi
+title: SolidFormExtendedApi
+---
+
+# Type Alias: SolidFormExtendedApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+```ts
+type SolidFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & SolidFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/solid-form/src/createForm.tsx:134](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L134)
+
+An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
diff --git a/mintlify/form/framework/solid/reference/variables/useStore.md b/mintlify/form/framework/solid/reference/variables/useStore.md
new file mode 100644
index 000000000..84d61f5b9
--- /dev/null
+++ b/mintlify/form/framework/solid/reference/variables/useStore.md
@@ -0,0 +1,58 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Variable: useStore()~~
+
+```ts
+const useStore: <TSource, TSelected>(source, selector?, compare?) => Accessor<TSelected>;
+```
+
+Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.11.0\_solid-js@1.9.13/node\_modules/@tanstack/solid-store/dist/useStore.d.ts:14
+
+Deprecated alias for useSelector.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector?
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`Accessor`\&lt;`TSelected`\>
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/form/framework/svelte/examples/array.md b/mintlify/form/framework/svelte/examples/array.md
new file mode 100644
index 000000000..341ebfc37
--- /dev/null
+++ b/mintlify/form/framework/svelte/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Arrays"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/svelte/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/svelte/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/svelte/examples/large-form.md b/mintlify/form/framework/svelte/examples/large-form.md
new file mode 100644
index 000000000..7db29515b
--- /dev/null
+++ b/mintlify/form/framework/svelte/examples/large-form.md
@@ -0,0 +1,12 @@
+---
+title: "Form Composition"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/svelte/examples/large-form)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/svelte/large-form)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/svelte/examples/multi-step-wizard.md b/mintlify/form/framework/svelte/examples/multi-step-wizard.md
new file mode 100644
index 000000000..3f23da4a6
--- /dev/null
+++ b/mintlify/form/framework/svelte/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/svelte/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/svelte/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/svelte/examples/simple.md b/mintlify/form/framework/svelte/examples/simple.md
new file mode 100644
index 000000000..34da51257
--- /dev/null
+++ b/mintlify/form/framework/svelte/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/svelte/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/svelte/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/svelte/examples/standard-schema.md b/mintlify/form/framework/svelte/examples/standard-schema.md
new file mode 100644
index 000000000..db5ef2f0e
--- /dev/null
+++ b/mintlify/form/framework/svelte/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/svelte/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/svelte/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/svelte/guides/arrays.md b/mintlify/form/framework/svelte/guides/arrays.md
new file mode 100644
index 000000000..8684726e5
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/arrays.md
@@ -0,0 +1,112 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value in conjunction
+with [`each blocks`](https://svelte.dev/docs/svelte/each):
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      people: [],
+    },
+  }))
+</script>
+
+<form.Field name="people" mode="array">
+  {#snippet children(field)}
+    {#each field.state.value as person, i}
+      <!-- ... -->
+    {/each}
+  {/snippet}
+</form.Field>
+```
+
+This will regenerate the list every time you run `pushValue` on `field`:
+
+```svelte
+<button onclick={() => field.pushValue({ name: '', age: 0 })} type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```svelte
+<form.Field name={`people[${i}].name`}>
+  {#snippet children(subField)}
+    <input
+      value={subField.state.value}
+      oninput={(e) => {
+        subField.handleChange(e.currentTarget.value)
+      }}
+    />
+  {/snippet}
+</form.Field>
+```
+
+## Full Example
+
+```svelte
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      people: [] as Array<{ age: number; name: string }>,
+    },
+    onSubmit: ({ value }) => alert(JSON.stringify(value)),
+  }))
+</script>
+
+<form
+  id="form"
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    form.handleSubmit()
+  }}
+>
+  <form.Field name="people" mode="array">
+    {#snippet children(field)}
+      <div>
+        {#each field.state.value as person, i}
+          <form.Field name={`people[${i}].name`}>
+            {#snippet children(subField)}
+              <div>
+                <label>
+                  <div>Name for person {i}</div>
+                  <input
+                    value={person.name}
+                    oninput={(e: Event) => {
+                      const target = e.target as HTMLInputElement
+                      subField.handleChange(target.value)
+                    }}
+                  />
+                </label>
+              </div>
+            {/snippet}
+          </form.Field>
+        {/each}
+
+        <button
+          onclick={() => field.pushValue({ name: '', age: 0 })}
+          type="button"
+        >
+          Add person
+        </button>
+      </div>
+    {/snippet}
+  </form.Field>
+
+  <button type="submit"> Submit </button>
+</form>
+```
diff --git a/mintlify/form/framework/svelte/guides/async-initial-values.md b/mintlify/form/framework/svelte/guides/async-initial-values.md
new file mode 100644
index 000000000..3550b1934
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/async-initial-values.md
@@ -0,0 +1,51 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+  import { createQuery } from '@tanstack/svelte-query'
+
+    const { data, isLoading } = createQuery(() => ({
+      queryKey: ['data'],
+      queryFn: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        return { firstName: 'FirstName', lastName: 'LastName' }
+      },
+    }))
+
+    const form = createForm(() => ({
+      defaultValues: {
+        firstName: $data?.firstName ?? '',
+        lastName: $data?.lastName ?? '',
+      },
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value)
+      },
+    }))
+</script>
+
+{#if $isLoading}
+  <p>Loading...</p>
+{:else}
+  <!-- form... -->
+{/if}
+```
+
+This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values.
diff --git a/mintlify/form/framework/svelte/guides/basic-concepts.md b/mintlify/form/framework/svelte/guides/basic-concepts.md
new file mode 100644
index 000000000..102f4d738
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/basic-concepts.md
@@ -0,0 +1,319 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/svelte-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Options
+
+You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
+
+Example:
+
+```ts
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  } as Person,
+})
+```
+
+## Form Instance
+
+A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `createForm` function. The function accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```ts
+const form = createForm(() => ({
+  ...formOpts,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+}))
+```
+
+You may also create a form instance without using `formOptions`:
+
+```ts
+const form = createForm<Person>(() => ({
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  },
+}))
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the form instance. The component accepts a name prop, which should match a key in the form's default values. It also accepts a children prop, which is a render prop function that takes a field object as its argument.
+
+Example:
+
+```svelte
+<form.Field name="firstName">
+  {#snippet children(field)}
+    <input
+      name={field.name}
+      value={field.state.value}
+      onblur={field.handleBlur}
+      oninput={(e) => field.handleChange(e.target.value)}
+    />
+  {/snippet}
+</form.Field>
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field.state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful to see how the user interacts with a field:
+
+- _"isTouched"_, after the user changes the field or blurs the field
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
+
+Example:
+
+```svelte
+<input
+  name={field.name}
+  value={field.state.value}
+  onblur={field.handleBlur}
+  oninput={(e) => field.handleChange(e.target.value)}
+/>
+```
+
+## Validation
+
+`@tanstack/svelte-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
+
+Example:
+
+```svelte
+<form.Field
+  name="firstName"
+  validators={{
+    onChange: ({ value }) =>
+      !value
+        ? 'A first name is required'
+        : value.length < 3
+          ? 'First name must be at least 3 characters'
+          : undefined,
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value.includes('error') && 'No "error" allowed in first name'
+    },
+  }}
+>
+  {#snippet children(field)}
+    <input
+      name={field.name}
+      value={field.state.value}
+      onBlur={field.handleBlur}
+      onInput={(e) => field.handleChange(e.target.value)}
+    />
+    <p>{field.state.meta.errors[0]}</p>
+  {/snippet}
+</form.Field>
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+```svelte
+<script>
+  import { z } from 'zod'
+
+  // ...
+</script>
+
+<form.Field
+  name="firstName"
+  validators={{
+    onChange: z.string().min(3, 'First name must be at least 3 characters'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.string().refine(
+      async (value) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        return !value.includes('error')
+      },
+      {
+        message: 'No "error" allowed in first name',
+      },
+    ),
+  }}
+>
+  {#snippet children(field)}
+    <input
+      name={field.name}
+      value={field.state.value}
+      onBlur={field.handleBlur}
+      onInput={(e) => field.handleChange(e.target.value)}
+    />
+    <p>{field.state.meta.errors[0]}</p>
+  {/snippet}
+</form.Field>
+```
+
+## Reactivity
+
+`@tanstack/svelte-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+
+Example:
+
+```svelte
+<script>
+  //...
+  const firstName = form.useStore((state) => state.values.firstName)
+</script>
+
+<form.Subscribe
+  selector={(state) => ({
+    canSubmit: state.canSubmit,
+    isSubmitting: state.isSubmitting,
+  })}
+>
+  {#snippet children(state)}
+    <button type="submit" disabled={!state.canSubmit}>
+      {state.isSubmitting ? '...' : 'Submit'}
+    </button>
+  {/snippet}
+</form.Subscribe>
+```
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
+
+When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```svelte
+<form.Field name="hobbies" mode="array">
+  {#snippet children(hobbiesField)}
+    <div>
+      Hobbies
+      <div>
+        {#each hobbiesField.state.value as _, i}
+            <div>
+              <form.Field name={`hobbies[${i}].name`}>
+                {#snippet children(field)}
+                  <div>
+                    <label for={field.name}>Name:</label>
+                    <input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onblur={field.handleBlur}
+                      onchange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <button
+                      type="button"
+                      onclick={() => hobbiesField.removeValue(i)}
+                    >
+                      X
+                    </button>
+                  </div>
+                {/snippet}
+              </form.Field>
+              <form.Field name={`hobbies[${i}].description`}>
+                {#snippet children(field)}
+                    <div>
+                      <label for={field.name}>Description:</label>
+                      <input
+                        id={field.name}
+                        name={field.name}
+                        value={field.state.value}
+                        onblur={field.handleBlur}
+                        onchange={(e) => field.handleChange(e.target.value)}
+                      />
+                    </div>
+                {/snippet}
+              </form.Field>
+            </div>
+          {:else}
+            No hobbies found.
+          {/each}
+      </div>
+      <button
+        type="button"
+        onclick={() =>
+          hobbiesField.pushValue({
+            name: '',
+            description: '',
+            yearsOfExperience: 0,
+          })
+        }
+      >
+        Add hobby
+      </button>
+    </div>
+  {/snippet}
+</form.Field>
+```
+
+These are the basic concepts and terminology used in the `@tanstack/svelte-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/svelte/guides/dynamic-validation.md b/mintlify/form/framework/svelte/guides/dynamic-validation.md
new file mode 100644
index 000000000..8fce94586
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/dynamic-validation.md
@@ -0,0 +1,225 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```ts
+import { revalidateLogic, createForm } from '@tanstack/svelte-form'
+
+// ...
+
+const form = createForm(() => ({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  // If this is omitted, onDynamic will not be called
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+}))
+```
+
+> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `createForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```ts
+const form = createForm(() => ({
+  // ...
+  validationLogic: revalidateLogic({
+    mode: 'submit',
+    modeAfterSubmission: 'blur',
+  }),
+  // ...
+}))
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+
+```svelte
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    // ...
+    validationLogic: revalidateLogic(),
+    validators: {
+      onDynamic: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+    },
+  }))
+</script>
+
+<p>{form.state.errorMap.onDynamic?.firstName}</p>
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```svelte
+<script lang="ts">
+  import { revalidateLogic, createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    validationLogic: revalidateLogic(),
+    validators: {
+      onChange: ({ value }) => {
+        if (!value.firstName) {
+          return { firstName: 'A first name is required' }
+        }
+        return undefined
+      },
+      onDynamic: ({ value }) => {
+        if (!value.lastName) {
+          return { lastName: 'A last name is required' }
+        }
+        return undefined
+      },
+    },
+  }))
+</script>
+
+<div>
+  <p>{form.state.errorMap.onChange?.firstName}</p>
+  <p>{form.state.errorMap.onDynamic?.lastName}</p>
+</div>
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```svelte
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      name: '',
+      age: 0,
+    },
+    validationLogic: revalidateLogic(),
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  }))
+</script>
+
+<form
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    form.handleSubmit()
+  }}
+>
+  <form.Field
+    name={'age'}
+    validators={{
+      onDynamic: ({ value }) =>
+        value > 18 ? undefined : 'Age must be greater than 18',
+    }}
+  >
+    {#snippet children(field)}
+      <div>
+        <input
+          type="number"
+          onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+          onblur={field.handleBlur}
+          value={field.state.value}
+        />
+        <p style="color: red">
+          {field.state.meta.errorMap.onDynamic}
+        </p>
+      </div>
+    {/snippet}
+  </form.Field>
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```ts
+const form = createForm(() => ({
+  defaultValues: {
+    username: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+    onDynamicAsync: async ({ value }) => {
+      if (!value.username) {
+        return { username: 'Username is required' }
+      }
+      // Simulate an async validation
+      const isValid = await validateUsername(value.username)
+      return isValid ? undefined : { username: 'Username is already taken' }
+    },
+  },
+}))
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```ts
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+const form = createForm(() => ({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: schema,
+  },
+}))
+```
diff --git a/mintlify/form/framework/svelte/guides/form-composition.md b/mintlify/form/framework/svelte/guides/form-composition.md
new file mode 100644
index 000000000..990bbbf46
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/form-composition.md
@@ -0,0 +1,553 @@
+---
+id: form-composition
+title: Form Composition
+---
+
+A common criticism of TanStack Form is its verbosity out-of-the-box. While this _can_ be useful for educational purposes - helping enforce understanding our APIs - it's not ideal in production use cases.
+
+As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
+
+## Custom Form Methods
+
+The most powerful way to compose forms is to create custom form methods. This allows you to create a form method that is tailored to your application's needs, including pre-bound custom UI components and more.
+
+At its most basic, `createFormCreator` is a function that returns a `createAppForm` method.
+
+> This un-customized `createAppForm` method is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`.
+
+```ts
+// form-context.ts
+import { createFormCreatorContexts } from '@tanstack/svelte-form'
+
+// export useFieldContext and useFormContext for use in your custom components
+export const { useFieldContext, useFormContext } = createFormCreatorContexts()
+```
+
+```ts
+// form.ts
+import { createFormCreator } from '@tanstack/svelte-form'
+
+export const { createAppForm } = createFormCreator({
+  // We'll learn more about these options later
+  fieldComponents: {},
+  formComponents: {},
+})
+```
+
+```svelte
+<!-- App.svelte -->
+<script lang="ts">
+  import { createAppForm } from './form.js'
+
+  const form = createAppForm(() => ({
+    // Supports all createForm options
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+</script>
+
+<form.Field name="firstName">
+  <!-- ... -->
+</form.Field>
+```
+
+### Pre-bound Field Components
+
+Once this scaffolding is in place, you can start adding custom field and form components to your form method.
+
+> Note: the `useFieldContext` must be the same one exported from your custom form context
+
+```svelte
+<!-- text-field.svelte -->
+<script lang="ts">
+  import { useFieldContext } from './form-context.js'
+
+  // The `Field` infers that it should have a `value` type of `string`
+  const field = useFieldContext<string>()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<label>
+  <div>{label}</div>
+  <input
+    value={field.state.value}
+    oninput={(e) => field.handleChange((e.target as HTMLInputElement).value)}
+  />
+</label>
+```
+
+You're then able to register this component with your form method.
+
+```ts
+import { createFormCreator } from '@tanstack/svelte-form'
+import TextField from './text-field.svelte'
+
+export const { createAppForm } = createFormCreator({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})
+```
+
+And use it in your form:
+
+```svelte
+<script lang="ts">
+  import { createAppForm } from './form.js'
+
+  const form = createAppForm(() => ({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+</script>
+
+<!-- Notice the `AppField` instead of `Field`; `AppField` provides the required context -->
+<form.AppField name="firstName">
+  {#snippet children(field)}
+    <field.TextField label="First Name" />
+  {/snippet}
+</form.AppField>
+```
+
+This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Typo `name` and get a TypeScript error.
+
+### Pre-bound Form Components
+
+While `form.AppField` solves many of the problems with Field boilerplate and reusability, it doesn't solve the problem of _form_ boilerplate and reusability.
+
+In particular, being able to share instances of `form.Subscribe` for, say, a reactive form submission button is a common usecase.
+
+```svelte
+<!-- subscribe-button.svelte -->
+<script lang="ts">
+  import { useFormContext } from './form-context.js'
+
+  const form = useFormContext()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<form.Subscribe selector={(state) => state.isSubmitting}>
+  {#snippet children(isSubmitting)}
+    <button type="submit" disabled={isSubmitting}>
+      {label}
+    </button>
+  {/snippet}
+</form.Subscribe>
+```
+
+```ts
+// form.ts
+import { createFormCreator } from '@tanstack/svelte-form'
+import TextField from './text-field.svelte'
+import SubscribeButton from './subscribe-button.svelte'
+
+export const { createAppForm, getFormType } = createFormCreator({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+})
+```
+
+```svelte
+<!-- App.svelte -->
+<script lang="ts">
+  import { createAppForm } from './form.js'
+
+  const form = createAppForm(() => ({
+    defaultValues: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  }))
+</script>
+
+<form.AppForm>
+  <!-- Notice the `AppForm` component wrapper; `AppForm` provides the required context -->
+  {#snippet children()}
+    <form.SubscribeButton label="Submit" />
+  {/snippet}
+</form.AppForm>
+```
+
+## Breaking big forms into smaller pieces
+
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code long files.
+
+To solve this, you can break forms into smaller Svelte components that accept the form as a prop.
+
+```ts
+// shared-form.ts
+import { formOptions } from '@tanstack/svelte-form'
+
+export const peopleFormOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+```
+
+```svelte
+<!-- child-form.svelte -->
+<script lang="ts">
+  import { getFormType } from './form.js'
+  import { peopleFormOpts } from './shared-form.js'
+
+  const formType = getFormType({ ...peopleFormOpts })
+
+  const { form, title = 'Child Form' }: { form: typeof formType; title?: string } = $props()
+</script>
+
+<div>
+  <p>{title}</p>
+  <form.AppField name="firstName">
+    {#snippet children(field)}
+      <field.TextField label="First Name" />
+    {/snippet}
+  </form.AppField>
+  <form.AppForm>
+    {#snippet children()}
+      <form.SubscribeButton label="Submit" />
+    {/snippet}
+  </form.AppForm>
+</div>
+```
+
+```svelte
+<!-- App.svelte -->
+<script lang="ts">
+  import { createAppForm } from './form.js'
+  import { peopleFormOpts } from './shared-form.js'
+  import ChildForm from './child-form.svelte'
+
+  const form = createAppForm(() => ({
+    ...peopleFormOpts,
+  }))
+</script>
+
+<ChildForm {form} title="Testing" />
+```
+
+## Getting the Form Type
+
+When you split a form into smaller child components, those child components need a typed `form` prop so that `form.AppField`, `form.AppForm`, and the registered field/form components remain fully type-safe. Writing out the full `createAppForm` generics by hand is verbose and error-prone.
+
+`createFormCreator` returns a `getFormType` helper alongside `createAppForm` for exactly this purpose. It accepts the same options object as `createAppForm` and returns a value whose type matches the form instance that `createAppForm` would produce — without actually running any logic at runtime.
+
+```ts
+// form.ts
+import { createFormCreator } from '@tanstack/svelte-form'
+import TextField from './text-field.svelte'
+import SubscribeButton from './subscribe-button.svelte'
+
+export const { createAppForm, getFormType } = createFormCreator({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+})
+```
+
+Use it together with your shared `formOptions` to derive the expected `form` prop type:
+
+```svelte
+<!-- child-form.svelte -->
+<script lang="ts">
+  import { getFormType } from './form.js'
+  import { peopleFormOpts } from './shared-form.js'
+
+  const formType = getFormType({ ...peopleFormOpts })
+
+  const { form }: { form: typeof formType } = $props()
+</script>
+
+<form.AppField name="firstName">
+  {#snippet children(field)}
+    <field.TextField label="First Name" />
+  {/snippet}
+</form.AppField>
+```
+
+This gives the child component a fully typed `form` prop — including the registered `fieldComponents` and `formComponents` — without having to repeat the form generics by hand or maintain a `ReturnType<typeof createAppForm<...>>` alias.
+
+> `useFormContext` is still the best fit for registered form components rendered inside `form.AppForm`. Use `getFormType` when you pass the form instance down as a prop to a child component.
+
+## Reusing groups of fields in multiple forms
+
+Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](/form/framework/svelte/guides/linked-fields). Instead of repeating this logic across multiple forms, you can create reusable field group components.
+
+> Unlike form-level components, validators in field groups cannot be strictly typed and could be any value.
+> Ensure that your fields can accept unknown error types.
+
+Rewriting the passwords example as a reusable component would look like this:
+
+```svelte
+<!-- password-fields.svelte -->
+<script lang="ts">
+  import type { createAppForm } from './form.js'
+
+  type PasswordFields = {
+    password: string
+    confirm_password: string
+  }
+
+  type AppForm = ReturnType<typeof createAppForm<PasswordFields>>
+
+  const { form, title = 'Password' }: { form: AppForm; title?: string } = $props()
+</script>
+
+<div>
+  <h2>{title}</h2>
+  <form.AppField name="password">
+    {#snippet children(field)}
+      <field.TextField label="Password" />
+    {/snippet}
+  </form.AppField>
+  <form.AppField
+    name="confirm_password"
+    validators={{
+      onChangeListenTo: ['password'],
+      onChange: ({ value, fieldApi }) => {
+        if (value !== fieldApi.form.getFieldValue('password')) {
+          return 'Passwords do not match'
+        }
+        return undefined
+      },
+    }}
+  >
+    {#snippet children(field)}
+      <div>
+        <field.TextField label="Confirm Password" />
+        {#each field.state.meta.errors as error}
+          <div style="color: red;">{error}</div>
+        {/each}
+      </div>
+    {/snippet}
+  </form.AppField>
+</div>
+```
+
+We can now use these grouped fields in any form that implements the required fields:
+
+```svelte
+<!-- App.svelte -->
+<script lang="ts">
+  import { createAppForm } from './form.js'
+  import PasswordFields from './password-fields.svelte'
+
+  const form = createAppForm(() => ({
+    defaultValues: {
+      name: '',
+      age: 0,
+      password: '',
+      confirm_password: '',
+    },
+  }))
+</script>
+
+<form.AppForm>
+  {#snippet children()}
+    <form.AppField name="name">
+      {#snippet children(field)}
+        <field.TextField label="Name" />
+      {/snippet}
+    </form.AppField>
+    <PasswordFields {form} title="Account Password" />
+    <form.SubscribeButton label="Submit" />
+  {/snippet}
+</form.AppForm>
+```
+
+## Tree-shaking form and field components
+
+While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
+In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form method.
+
+To solve this, you can use dynamic imports with Svelte's component loading:
+
+```ts
+// src/utils/form-context.ts
+import { createFormCreatorContexts } from '@tanstack/svelte-form'
+
+export const { useFieldContext, useFormContext } = createFormCreatorContexts()
+```
+
+```svelte
+<!-- src/components/text-field.svelte -->
+<script lang="ts">
+  import { useFieldContext } from '../utils/form-context.js'
+
+  const field = useFieldContext<string>()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<label>
+  <div>{label}</div>
+  <input
+    value={field.state.value}
+    oninput={(e) => field.handleChange((e.target as HTMLInputElement).value)}
+  />
+</label>
+```
+
+```ts
+// src/utils/form.ts
+import { createFormCreator } from '@tanstack/svelte-form'
+import TextField from '../components/text-field.svelte'
+import SubscribeButton from '../components/subscribe-button.svelte'
+
+export const { createAppForm, getFormType } = createFormCreator({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+})
+```
+
+```svelte
+<!-- src/App.svelte -->
+<script lang="ts">
+  import PeoplePage from './features/people/page.svelte'
+</script>
+
+<PeoplePage />
+```
+
+## Putting it all together
+
+Now that we've covered the basics of creating custom form methods, let's put it all together in a single example.
+
+```ts
+// /src/utils/form-context.ts, to be used across the entire app
+import { createFormCreatorContexts } from '@tanstack/svelte-form'
+
+export const { useFieldContext, useFormContext } = createFormCreatorContexts()
+```
+
+```svelte
+<!-- /src/components/text-field.svelte -->
+<script lang="ts">
+  import { useFieldContext } from '../utils/form-context.js'
+
+  const field = useFieldContext<string>()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<label>
+  <div>{label}</div>
+  <input
+    value={field.state.value}
+    oninput={(e) => field.handleChange((e.target as HTMLInputElement).value)}
+  />
+</label>
+```
+
+```svelte
+<!-- /src/components/subscribe-button.svelte -->
+<script lang="ts">
+  import { useFormContext } from '../utils/form-context.js'
+
+  const form = useFormContext()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<form.Subscribe selector={(state) => state.isSubmitting}>
+  {#snippet children(isSubmitting)}
+    <button type="submit" disabled={isSubmitting}>
+      {label}
+    </button>
+  {/snippet}
+</form.Subscribe>
+```
+
+```ts
+// /src/utils/form.ts
+import { createFormCreator } from '@tanstack/svelte-form'
+import TextField from '../components/text-field.svelte'
+import SubscribeButton from '../components/subscribe-button.svelte'
+
+export const { createAppForm, getFormType } = createFormCreator({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+})
+```
+
+```ts
+// /src/features/people/shared-form.ts, to be used across `people` features
+import { formOptions } from '@tanstack/svelte-form'
+
+export const peopleFormOpts = formOptions({
+  defaultValues: {
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+})
+```
+
+```svelte
+<!-- /src/features/people/child-form.svelte, to be used in the `people` page -->
+<script lang="ts">
+  import { getFormType } from '../../utils/form.js'
+  import { peopleFormOpts } from './shared-form.js'
+
+  const formType = getFormType({ ...peopleFormOpts })
+
+  const { form, title = 'Child Form' }: { form: typeof formType; title?: string } = $props()
+</script>
+
+<div>
+  <p>{title}</p>
+  <form.AppField name="firstName">
+    {#snippet children(field)}
+      <field.TextField label="First Name" />
+    {/snippet}
+  </form.AppField>
+  <form.AppForm>
+    {#snippet children()}
+      <form.SubscribeButton label="Submit" />
+    {/snippet}
+  </form.AppForm>
+</div>
+```
+
+```svelte
+<!-- /src/features/people/page.svelte -->
+<script lang="ts">
+  import { createAppForm } from '../../utils/form.js'
+  import { peopleFormOpts } from './shared-form.js'
+  import ChildForm from './child-form.svelte'
+
+  const form = createAppForm(() => ({
+    ...peopleFormOpts,
+  }))
+</script>
+
+<ChildForm {form} title="Testing" />
+```
+
+## API Usage Guidance
+
+Here's a chart to help you decide what APIs you should be using:
+
+![](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/svelte_form_composability.svg)
diff --git a/mintlify/form/framework/svelte/guides/form-groups.md b/mintlify/form/framework/svelte/guides/form-groups.md
new file mode 100644
index 000000000..2cf22b28b
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/form-groups.md
@@ -0,0 +1,196 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `<form.FormGroup>`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `createForm` or [`createAppForm`](/form/framework/svelte/guides/form-composition) to create a `form` variable, then reference its `FormGroup` component like you would a `Field`:
+
+```svelte
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  }))
+</script>
+
+<form.FormGroup name="step1">
+  {#snippet children(group)}
+    <!-- `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue` -->
+    <!-- ... -->
+  {/snippet}
+</form.FormGroup>
+```
+
+This becomes much more useful when paired with external state to conditionally render a `FormGroup`:
+
+```svelte
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+
+  let step = $state(0)
+
+  const form = createForm(() => ({
+    defaultValues: {
+      step1: {
+        name: '',
+      },
+      step2: {
+        age: 0,
+      },
+    },
+  }))
+</script>
+
+{#if step === 0}
+  <form.FormGroup
+    name="step1"
+    onGroupSubmit={() => {
+      // We can move the step forward when validation passes
+      step++
+    }}
+    onGroupSubmitInvalid={() => {
+      // Or handle invalid submissions, just like a top-level form
+    }}
+    onSubmitMeta={{} as SomeType}
+  >
+    {#snippet children(group)}
+      <form
+        onsubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          // Use `group.handleSubmit()` to submit the sub-form, but not the parent form
+          group.handleSubmit()
+        }}
+      >
+        <!-- ... -->
+      </form>
+    {/snippet}
+  </form.FormGroup>
+{:else if step === 1}
+  <form.FormGroup name="step2" onGroupSubmit={() => form.handleSubmit()}>
+    {#snippet children(group)}
+      <form
+        onsubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          group.handleSubmit()
+        }}
+      >
+        <!-- Then, use `form.handleSubmit()` from `onGroupSubmit` to submit the entire form -->
+        <!-- ... -->
+      </form>
+    {/snippet}
+  </form.FormGroup>
+{/if}
+```
+
+## Form Group Validation
+
+Form groups have a distinct validation procedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```svelte
+<form.FormGroup name="step1" validators={{ onChange: () => 'Error' }}>
+  {#snippet children(group)}
+    <!-- group.state.meta.errorMap // {onChange: "Error" | undefined} -->
+    <!-- group.state.meta.errors // ("Error")[] -->
+  {/snippet}
+</form.FormGroup>
+```
+
+- Can set errors on sub-fields:
+
+```svelte
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: ({ value, groupApi }) => ({
+      group: value.name === 'error' ? 'Group error' : undefined,
+      fields: {
+        // Must use the name of the field relative to the FormGroup as the error key,
+        // to stay consistent with how standard schema works with form groups
+        name: value.name === 'error' ? 'Field error' : undefined,
+      },
+    }),
+  }}
+/>
+```
+
+- And can even accept standard schemas:
+
+```svelte
+<form.FormGroup
+  name="step1"
+  validators={{
+    onChange: z.object({
+      name: z.string().min(2),
+    }),
+  }}
+/>
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```ts
+> const step1Schema = z.object(&#123;
+>   name: z.string().min(2),
+> &#125;)
+>
+> const schema = z.object(&#123;
+>   step1: step1Schema,
+>   step2: step2Schema,
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/svelte/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `createForm`:
+
+```ts
+createForm(() => ({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+}))
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the `FormGroup` itself:
+
+```svelte
+<form.FormGroup name="step1" validators={{ onDynamic: step1Schema }} />
+```
+
+It will treat `group.submissionAttempts` as the way to change what validator is ran before/after submit.
+
+## Form Group State
+
+Just like you're able to access `group.state.meta.errors`, you're also able to access the group's value using `group.state.value`. Likewise, here are some valuable properties you can access in the `group.state.meta`:
+
+- `group.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `group.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `group.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `group.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/svelte/guides/linked-fields.md b/mintlify/form/framework/svelte/guides/linked-fields.md
new file mode 100644
index 000000000..c74cb34b5
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/linked-fields.md
@@ -0,0 +1,77 @@
+---
+id: linked-fields
+title: Link Two Form Fields Together
+---
+
+You may find yourself needing to link two fields together; when one is validated as another field's value has changed.
+One such usage is when you have both a `password` and `confirm_password` field,
+where you want to `confirm_password` to error out when `password`'s value does not match;
+regardless of which field triggered the value change.
+
+Imagine the following userflow:
+
+- User updates confirm password field.
+- User updates the non-confirm password field.
+
+In this example, the form will still have errors present,
+as the "confirm password" field validation has not been re-ran to mark as accepted.
+
+To solve this, we need to make sure that the "confirm password" validation is re-run when the password field is updated.
+To do this, you can add a `onChangeListenTo` property to the `confirm_password` field.
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      password: '',
+      confirm_password: '',
+    },
+    // ...
+  }))
+</script>
+
+<div>
+  <form.Field name="password">
+    {#snippet children(field)}
+      <label>
+        <div>Password</div>
+        <input
+          value={field.state.value}
+          onChange={(e) => field.handleChange(e.target.value)}
+        />
+      </label>
+    {/snippet}
+  </form.Field>
+  <form.Field
+    name="confirm_password"
+    validators={{
+      onChangeListenTo: ['password'],
+      onChange: ({ value, fieldApi }) => {
+        if (value !== fieldApi.form.getFieldValue('password')) {
+          return 'Passwords do not match'
+        }
+        return undefined
+      },
+    }}
+  >
+    {#snippet children(field)}
+      <div>
+        <label>
+          <div>Confirm Password</div>
+          <input
+            value={field.state.value}
+            onchange={(e) => field.handleChange(e.target.value)}
+          />
+        </label>
+        {#each field.state.meta.errors as err}
+          <div>{err}</div>
+        {/each}
+      </div>
+    {/snippet}
+  </form.Field>
+</div>
+```
+
+This similarly works with `onBlurListenTo` property, which will re-run the validation when the field is blurred.
diff --git a/mintlify/form/framework/svelte/guides/validation.md b/mintlify/form/framework/svelte/guides/validation.md
new file mode 100644
index 000000000..7e5c94767
--- /dev/null
+++ b/mintlify/form/framework/svelte/guides/validation.md
@@ -0,0 +1,403 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit...)
+- Validation rules can be defined at the field level or at the form level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `<form.Field />` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`.
+
+Here is an example:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {#snippet children(field)}
+    <label for={field.name}>Age:</label>
+    <input
+      id={field.name}
+      name={field.name}
+      value={field.state.value}
+      type="number"
+      onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+    />
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+In the example above, the validation is done at each keystroke (`onchange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {#snippet children(field)}
+    <label for={field.name}>Age:</label>
+    <input
+      id={field.name}
+      name={field.name}
+      value={field.state.value}
+      type="number"
+      onblur={field.handleBlur}
+      onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+    />
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+    onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+  }}
+>
+  {#snippet children(field)}
+    <label for={field.name}>Age:</label>
+    <input
+      id={field.name}
+      name={field.name}
+      value={field.state.value}
+      type="number"
+      onblur={field.handleBlur}
+      onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+    />
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {#snippet children(field)}
+    <!-- ... -->
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) =>
+      value < 13 ? 'You must be 13 to make an account' : undefined,
+  }}
+>
+  {#snippet children(field)}
+    <!-- ... -->
+    {#if field.state.meta.errorMap['onChange']}
+      <em role="alert">{field.state.meta.errorMap['onChange']}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+  }}
+>
+  {#snippet children(field)}
+    <!-- ... -->
+    <!-- errorMap.onChange is type `{isOldEnough: false} | undefined` -->
+    <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
+    {#if field.state.meta.errorMap['onChange']?.isOldEnough}
+        <em>The user is not old enough</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+## Validation at field level vs at form level
+
+As shown above, each `<form.Field>` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `createForm()` hook.
+
+Example:
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      age: 0,
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+    validators: {
+      // Add validators to the form the same way you would add them to a field
+      onChange({ value }) {
+        if (value.age < 13) {
+          return 'Must be 13 or older to sign'
+        }
+        return undefined
+      },
+    },
+  }))
+
+  // Subscribe to the form's error map so that updates to it will render
+  // alternately, you can use `form.Subscribe`
+  const formErrorMap = form.useStore((state) => state.errorMap)
+</script>
+
+<div>
+  <!-- ... -->
+  {#if formErrorMap.current.onChange}
+    <div>
+      <em>There was an error on the form: {formErrorMap.current.onChange}</em>
+    </div>
+  {/if}
+  <!-- ... -->
+</div>
+```
+
+## Asynchronous Functional Validation
+
+While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return value < 13 ? 'You must be 13 to make an account' : undefined
+    },
+  }}
+>
+  {#snippet children(field)}
+    <label for={field.name}>Age:</label>
+    <input
+      id={field.name}
+      name={field.name}
+      value={field.state.value}
+      type="number"
+      onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+    />
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onBlur: ({ value }) => (value < 13 ? 'You must be at least 13' : undefined),
+    onBlurAsync: async ({ value }) => {
+      const currentAge = await fetchCurrentAgeOnProfile()
+      return value < currentAge ? 'You can only increase the age' : undefined
+    },
+  }}
+>
+  {#snippet children(field)}
+    <label for={field.name}>Age:</label>
+    <input
+      id={field.name}
+      name={field.name}
+      value={field.state.value}
+      type="number"
+      onblur={field.handleBlur}
+      onchange={(e) => field.handleChange(e.target.valueAsNumber)}
+    />
+    {#if field.state.meta.errors}
+      <em role="alert">{field.state.meta.errors.join(', ')}</em>
+    {/if}
+  {/snippet}
+</form.Field>
+```
+
+The synchronous validation method (`onBlur`) is run first and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```svelte
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+>
+  <!-- ... -->
+</form.Field>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```svelte
+<form.Field
+  name="age"
+  asyncDebounceMs={500}
+  validators={{
+    onChangeAsyncDebounceMs: 1500,
+    onChangeAsync: async ({ value }) => {
+      // ...
+    },
+    onBlurAsync: async ({ value }) => {
+      // ...
+    },
+  }}
+>
+  <!-- ... -->
+</form.Field>
+```
+
+> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```svelte
+<script>
+  import { z } from 'zod'
+
+  // ...
+
+  const form = createForm(() => ({
+    // ...
+  }))
+</script>
+
+<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+  }}
+>
+  <!-- ... -->
+</form.Field>
+```
+
+Async validations on form and field level are supported as well:
+
+```svelte
+<form.Field
+  name="age"
+  validators={{
+    onChange: z.number().gte(13, 'You must be 13 to make an account'),
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: z.number().refine(
+      async (value) => {
+        const currentAge = await fetchCurrentAgeOnProfile()
+        return value >= currentAge
+      },
+      {
+        message: 'You can only increase the age',
+      },
+    ),
+  }}
+>
+  <!-- ... -->
+</form.Field>
+```
+
+## Preventing invalid forms from being submitted
+
+The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
+
+The form state object has a `canSubmit` flag that is false when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to it via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    /* ... */
+  }))
+</script>
+
+<!-- ... -->
+
+<!-- Dynamic submit button -->
+<form.Subscribe
+  selector={(state) => ({
+    canSubmit: state.canSubmit,
+    isSubmitting: state.isSubmitting,
+  })}
+>
+  {#snippet children(state)}
+    <button type="submit" disabled={!state.canSubmit}>
+      {state.isSubmitting ? '...' : 'Submit'}
+    </button>
+  {/snippet}
+</form.Subscribe>
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/svelte/quick-start.md b/mintlify/form/framework/svelte/quick-start.md
new file mode 100644
index 000000000..106b0a2bd
--- /dev/null
+++ b/mintlify/form/framework/svelte/quick-start.md
@@ -0,0 +1,49 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
+
+```svelte
+<script>
+  import { createForm } from '@tanstack/svelte-form'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      fullName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+</script>
+
+<div>
+  <h1>Simple Form Example</h1>
+  <form
+    onsubmit={(e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      form.handleSubmit()
+    }}
+  >
+    <div>
+      <form.Field name="fullName">
+        {#snippet children(field)}
+          <input
+            name={field.name}
+            value={field.state.value}
+            onblur={field.handleBlur}
+            oninput={(e) => field.handleChange(e.target.value)}
+          />
+        {/snippet}
+      </form.Field>
+    </div>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+From here, you'll be ready to explore all of the other features of TanStack Form!
diff --git a/mintlify/form/framework/vue/examples/array.md b/mintlify/form/framework/vue/examples/array.md
new file mode 100644
index 000000000..b6e9e4fce
--- /dev/null
+++ b/mintlify/form/framework/vue/examples/array.md
@@ -0,0 +1,12 @@
+---
+title: "Arrays"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/vue/examples/array)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/vue/array)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/vue/examples/multi-step-wizard.md b/mintlify/form/framework/vue/examples/multi-step-wizard.md
new file mode 100644
index 000000000..f0e7900b2
--- /dev/null
+++ b/mintlify/form/framework/vue/examples/multi-step-wizard.md
@@ -0,0 +1,12 @@
+---
+title: "Multi-Step Wizard"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/vue/examples/multi-step-wizard)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/vue/multi-step-wizard)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/vue/examples/simple.md b/mintlify/form/framework/vue/examples/simple.md
new file mode 100644
index 000000000..468801285
--- /dev/null
+++ b/mintlify/form/framework/vue/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/vue/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/vue/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/vue/examples/standard-schema.md b/mintlify/form/framework/vue/examples/standard-schema.md
new file mode 100644
index 000000000..54ec38102
--- /dev/null
+++ b/mintlify/form/framework/vue/examples/standard-schema.md
@@ -0,0 +1,12 @@
+---
+title: "Standard Schema"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/vue/examples/standard-schema)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e/examples/vue/standard-schema)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/vue/guides/arrays.md b/mintlify/form/framework/vue/guides/arrays.md
new file mode 100644
index 000000000..3d3eb1bca
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/arrays.md
@@ -0,0 +1,148 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value in conjunction with `v-for`:
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    people: [] as Array<{ age: number; name: string }>,
+  },
+  onSubmit: ({ value }) => alert(JSON.stringify(value)),
+})
+</script>
+
+<template>
+  <form.Field name="people" mode="array">
+    <template v-slot="{ field, state }">
+      <div>
+        <form.Field
+          v-for="(_, i) of field.state.value"
+          :key="i"
+          :name="`people[${i}].name`"
+        >
+          <template v-slot="{ field: subField, state }">
+            <!-- ... -->
+          </template>
+        </form.Field>
+      </div>
+    </template>
+  </form.Field>
+</template>
+```
+
+This will generate the mapped slot every time you run `pushValue` on `field`:
+
+```vue
+<button @click="field.pushValue({ name: '', age: 0 })" type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```vue
+<form.Field
+  v-for="(_, i) of field.state.value"
+  :key="i"
+  :name="`people[${i}].name`"
+>
+  <template v-slot="{ field: subField, state }">
+    <div>
+      <label>
+        <div>Name for person {{ i }}</div>
+        <input
+          :value="subField.state.value"
+          @input="
+          (e) =>
+          subField.handleChange(
+            (e.target as HTMLInputElement).value,
+          )
+          "
+        />
+      </label>
+    </div>
+  </template>
+</form.Field>
+```
+
+## Full Example
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    people: [] as Array<{ age: number; name: string }>,
+  },
+  onSubmit: ({ value }) => alert(JSON.stringify(value)),
+})
+</script>
+
+<template>
+  <form
+    @submit="
+      (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }
+    "
+  >
+    <div>
+      <form.Field name="people" mode="array">
+        <template v-slot="{ field, state }">
+          <div>
+            <form.Field
+              v-for="(_, i) of field.state.value"
+              :key="i"
+              :name="`people[${i}].name`"
+            >
+              <template v-slot="{ field: subField, state }">
+                <div>
+                  <label>
+                    <div>Name for person {{ i }}</div>
+                    <input
+                      :value="subField.state.value"
+                      @input="
+                        (e) =>
+                          subField.handleChange(
+                            (e.target as HTMLInputElement).value,
+                          )
+                      "
+                    />
+                  </label>
+                </div>
+              </template>
+            </form.Field>
+
+            <button
+              @click="field.pushValue({ name: '', age: 0 })"
+              type="button"
+            >
+              Add person
+            </button>
+          </div>
+        </template>
+      </form.Field>
+    </div>
+    <form.Subscribe>
+      <template v-slot="{ canSubmit, isSubmitting }">
+        <button type="submit" :disabled="!canSubmit">
+          {{ isSubmitting ? '...' : 'Submit' }}
+        </button>
+      </template>
+    </form.Subscribe>
+  </form>
+</template>
+```
diff --git a/mintlify/form/framework/vue/guides/async-initial-values.md b/mintlify/form/framework/vue/guides/async-initial-values.md
new file mode 100644
index 000000000..c8410a850
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/async-initial-values.md
@@ -0,0 +1,59 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+import { useQuery } from '@tanstack/vue-query'
+import { watchEffect, reactive, computed } from 'vue'
+
+const { data, isLoading } = useQuery({
+  queryKey: ['data'],
+  queryFn: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return { firstName: 'FirstName', lastName: 'LastName' }
+  },
+})
+
+const firstName = computed(() => data.value?.firstName || '')
+const lastName = computed(() => data.value?.lastName || '')
+
+const defaultValues = reactive({
+  firstName,
+  lastName,
+})
+
+const form = useForm({
+  defaultValues,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+</script>
+
+<template>
+  <p v-if="isLoading">Loading..</p>
+  <form v-else @submit.prevent.stop="form.handleSubmit">
+    <!-- ... -->
+  </form>
+</template>
+```
+
+This will show a loading text until the data is fetched, and then it will render the form with the fetched data as the initial values.
diff --git a/mintlify/form/framework/vue/guides/basic-concepts.md b/mintlify/form/framework/vue/guides/basic-concepts.md
new file mode 100644
index 000000000..c48de0951
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/basic-concepts.md
@@ -0,0 +1,381 @@
+---
+id: basic-concepts
+title: Basic Concepts and Terminology
+---
+
+This page introduces the basic concepts and terminology used in the `@tanstack/vue-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+
+## Form Options
+
+You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
+
+Example:
+
+```ts
+const formOpts = formOptions({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  } as Person,
+})
+```
+
+## Form Instance
+
+A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `useForm` function. The function accepts an object with an `onSubmit` function, which is called when the form is submitted.
+
+```js
+const form = useForm({
+  ...formOpts,
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+```
+
+You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
+
+```ts
+const form = useForm({
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+    hobbies: [],
+  } as Person,
+})
+```
+
+## Field
+
+A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the form.Field component provided by the form instance. The component accepts a name prop, which should match a key in the form's default values. It also accepts a scoped slot defined by the `v-slot` directive which takes a `field` object as its argument.
+
+Example:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field name="fullName">
+    <template v-slot="{ field }">
+      <input
+        :name="field.name"
+        :value="field.state.value"
+        @blur="field.handleBlur"
+        @input="(e) => field.handleChange(e.target.value)"
+      />
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+## Field State
+
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field().state` property.
+
+Example:
+
+```ts
+const {
+  value,
+  meta: { errors, isValidating },
+} = field.state
+```
+
+There are four states in the metadata that can be useful to see how the user interacts with a field:
+
+- _"isTouched"_, after the user changes the field or blurs the field
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```ts
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
+
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+
+## Understanding 'isDirty' in Different Libraries
+
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```ts
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
+```
+
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
+
+## Field API
+
+The Field API is an object provided by a scoped slot using the `v-slot` directive. This slot receives an argument named `field` that provides methods and properties for working with the field's state.
+
+Example:
+
+```vue
+<template v-slot="{ field }">
+  <input
+    :name="field.name"
+    :value="field.state.value"
+    @blur="field.handleBlur"
+    @input="(e) => field.handleChange(e.target.value)"
+  />
+</template>
+```
+
+## Validation
+
+`@tanstack/vue-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
+
+Example:
+
+```vue
+<template>
+    <!-- ... -->
+    <form.Field
+        name="firstName"
+        :validators="{
+            onChange: ({ value }) =>
+                !value
+                    ? `A first name is required`
+                    : value.length < 3
+                        ? `First name must be at least 3 characters`
+                        : undefined,
+            onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return value.includes('error') && 'No "error" allowed in first name'
+        },
+    }"
+    >
+        <template v-slot="{ field }">
+            <input
+                :value="field.state.value"
+                @input="(e) => field.handleChange(e.target.value)"
+                @blur="field.handleBlur"
+            />
+            <FieldInfo :field="field" />
+        </template>
+    </form.Field>
+    <!-- ... -->
+</template>
+```
+
+## Validation with Standard Schema Libraries
+
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/) (v3.24.0 or higher)
+- [Valibot](https://valibot.dev/) (v1.0.0 or higher)
+- [ArkType](https://arktype.io/) (v2.1.20 or higher)
+- [Yup](https://github.com/jquense/yup) (v1.7.0 or higher)
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+import { z } from 'zod'
+
+const form = useForm({
+  // ...
+})
+
+const onChangeFirstName = z.string().refine(
+  async (value) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return !value.includes('error')
+  },
+  {
+    message: "No 'error' allowed in first name",
+  },
+)
+</script>
+
+<template>
+  <!-- ... -->
+  <form.Field
+    name="firstName"
+    :validators="{
+      onChange: z.string().min(3, 'First name must be at least 3 characters'),
+      onChangeAsyncDebounceMs: 500,
+      onChangeAsync: onChangeFirstName,
+    }"
+  >
+    <template v-slot="{ field, state }">
+      <label :htmlFor="field.name">First Name:</label>
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
+        @blur="field.handleBlur"
+      />
+      <FieldInfo :state="state" />
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+## Reactivity
+
+`@tanstack/vue-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` method and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+
+Example:
+
+```vue
+<script setup lang="ts">
+// ...
+const firstName = form.useStore((state) => state.values.firstName)
+</script>
+
+<template>
+  <!-- ... -->
+  <form.Subscribe>
+    <template v-slot="{ canSubmit, isSubmitting }">
+      <button type="submit" :disabled="!canSubmit">
+        {{ isSubmitting ? '...' : 'Submit' }}
+      </button>
+    </template>
+  </form.Subscribe>
+  <!-- ... -->
+</template>
+```
+
+## Listeners
+
+`@tanstack/vue-form` allows you to react to specific triggers and "listen" to them to dispatch side effects.
+
+Example:
+
+```vue
+<template>
+  <form.Field
+    name="country"
+    :listeners="{
+      onChange: ({ value }) => {
+        console.log(`Country changed to: ${value}, resetting province`)
+        form.setFieldValue('province', '')
+      },
+    }"
+  >
+    <template v-slot="{ field }">
+      <input
+        :value="field.state.value"
+        @input="(e) => field.handleChange(e.target.value)"
+      />
+    </template>
+  </form.Field>
+</template>
+```
+
+More information can be found at [Listeners](/form/framework/vue/guides/listeners)
+
+Note: The usage of the `form.useField` method to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `form.useStore` instead.
+
+## Array Fields
+
+Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
+
+When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
+
+Example:
+
+```vue
+<template>
+  <form @submit.prevent.stop="form.handleSubmit">
+    <form.Field name="hobbies" mode="array">
+      <template v-slot="{ field: hobbiesField }">
+        <div>
+          Hobbies
+          <div>
+            <div
+              v-if="
+                Array.isArray(hobbiesField.state.value) &&
+                !hobbiesField.state.value.length
+              "
+            >
+              No hobbies found.
+            </div>
+            <div v-else>
+              <div v-for="(_, i) in hobbiesField.state.value" :key="i">
+                <form.Field :name="`hobbies[${i}].name`">
+                  <template v-slot="{ field }">
+                    <div>
+                      <label :for="field.name">Name:</label>
+                      <input
+                        :id="field.name"
+                        :name="field.name"
+                        :value="field.state.value"
+                        @blur="field.handleBlur"
+                        @input="(e) => field.handleChange(e.target.value)"
+                      />
+                      <button
+                        type="button"
+                        @click="hobbiesField.removeValue(i)"
+                      >
+                        X
+                      </button>
+                      <FieldInfo :field="field" />
+                    </div>
+                  </template>
+                </form.Field>
+                <form.Field :name="`hobbies[${i}].description`">
+                  <template v-slot="{ field }">
+                    <div>
+                      <label :for="field.name">Description:</label>
+                      <input
+                        :id="field.name"
+                        :name="field.name"
+                        :value="field.state.value"
+                        @blur="field.handleBlur"
+                        @input="(e) => field.handleChange(e.target.value)"
+                      />
+                      <FieldInfo :field="field" />
+                    </div>
+                  </template>
+                </form.Field>
+              </div>
+            </div>
+            <button
+              type="button"
+              @click="
+                hobbiesField.pushValue({
+                  name: '',
+                  description: '',
+                  yearsOfExperience: 0,
+                })
+              "
+            >
+              Add hobby
+            </button>
+          </div>
+        </div>
+      </template>
+    </form.Field>
+  </form>
+</template>
+```
+
+These are the basic concepts and terminology used in the `@tanstack/vue-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
diff --git a/mintlify/form/framework/vue/guides/dynamic-validation.md b/mintlify/form/framework/vue/guides/dynamic-validation.md
new file mode 100644
index 000000000..b2b1d2957
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/dynamic-validation.md
@@ -0,0 +1,240 @@
+---
+id: dynamic-validation
+title: Dynamic Validation
+---
+
+In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
+
+We support this through our `onDynamic` validation function.
+
+```vue
+<script setup lang="ts">
+import { revalidateLogic, useForm } from '@tanstack/vue-form'
+
+// ...
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  // If this is omitted, onDynamic will not be called
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+})
+</script>
+```
+
+> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
+
+## Revalidation Options
+
+`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+
+It takes two arguments:
+
+- `mode`: The mode of validation prior to the first form submission. This can be one of the following:
+  - `change`: Validate on every change.
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit. (**default**)
+
+- `modeAfterSubmission`: The mode of validation after the form has been submitted. This can be one of the following:
+  - `change`: Validate on every change. (**default**)
+  - `blur`: Validate on blur.
+  - `submit`: Validate on submit.
+
+You can, for example, use the following to revalidate on blur after the first submission:
+
+```vue
+<script setup lang="ts">
+const form = useForm({
+  // ...
+  validationLogic: revalidateLogic({
+    mode: 'submit',
+    modeAfterSubmission: 'blur',
+  }),
+  // ...
+})
+</script>
+```
+
+## Accessing Errors
+
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+
+```vue
+<script setup lang="ts">
+const form = useForm({
+  // ...
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+  },
+})
+</script>
+
+<template>
+  <p>{{ form.state.errorMap.onDynamic?.firstName }}</p>
+</template>
+```
+
+## Usage with Other Validation Logic
+
+You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`.
+
+```vue
+<script setup lang="ts">
+import { revalidateLogic, useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onChange: ({ value }) => {
+      if (!value.firstName) {
+        return { firstName: 'A first name is required' }
+      }
+      return undefined
+    },
+    onDynamic: ({ value }) => {
+      if (!value.lastName) {
+        return { lastName: 'A last name is required' }
+      }
+      return undefined
+    },
+  },
+})
+</script>
+
+<template>
+  <div>
+    <p>{{ form.state.errorMap.onChange?.firstName }}</p>
+    <p>{{ form.state.errorMap.onDynamic?.lastName }}</p>
+  </div>
+</template>
+```
+
+### Usage with Fields
+
+You can also use `onDynamic` validation with fields, just like you would with other validation logic.
+
+```vue
+<script setup lang="ts">
+const form = useForm({
+  defaultValues: {
+    name: '',
+    age: 0,
+  },
+  validationLogic: revalidateLogic(),
+  onSubmit({ value }) {
+    alert(JSON.stringify(value))
+  },
+})
+</script>
+
+<template>
+  <form
+    @submit="
+      (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }
+    "
+  >
+    <form.Field
+      name="age"
+      :validators="{
+        onDynamic: ({ value }) =>
+          value > 18 ? undefined : 'Age must be greater than 18',
+      }"
+    >
+      <template v-slot="{ field }">
+        <div>
+          <input
+            type="number"
+            :value="field.state.value"
+            @input="
+              (e) =>
+                field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+            "
+            @blur="field.handleBlur"
+          />
+          <p style="color: red">
+            {{ field.state.meta.errorMap.onDynamic }}
+          </p>
+        </div>
+      </template>
+    </form.Field>
+    <button type="submit">Submit</button>
+  </form>
+</template>
+```
+
+### Async Validation
+
+Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+
+```vue
+<script setup lang="ts">
+const form = useForm({
+  defaultValues: {
+    username: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamicAsyncDebounceMs: 500, // Debounce the async validation by 500ms
+    onDynamicAsync: async ({ value }) => {
+      if (!value.username) {
+        return { username: 'Username is required' }
+      }
+      // Simulate an async validation
+      const isValid = await validateUsername(value.username)
+      return isValid ? undefined : { username: 'Username is already taken' }
+    },
+  },
+})
+</script>
+```
+
+### Standard Schema Validation
+
+You can also use standard schema validation libraries like Valibot or Zod with `onDynamic` validation. This allows you to define complex validation rules that can change dynamically based on the form state.
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+
+const schema = z.object({
+  firstName: z.string().min(1, 'A first name is required'),
+  lastName: z.string().min(1, 'A last name is required'),
+})
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  validationLogic: revalidateLogic(),
+  validators: {
+    onDynamic: schema,
+  },
+})
+</script>
+```
diff --git a/mintlify/form/framework/vue/guides/form-groups.md b/mintlify/form/framework/vue/guides/form-groups.md
new file mode 100644
index 000000000..75ec732d3
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/form-groups.md
@@ -0,0 +1,200 @@
+---
+id: form-groups
+title: Form Groups
+---
+
+When building a multi-stage form that has many stages, like so:
+
+![Form stepper](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/stepper.png)
+
+It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
+
+Luckily, TanStack Form provides a way to build out sub-forms that make this kind of development trivial to implement: `<form.FormGroup>`.
+
+## Usage
+
+To use a form group in TanStack Form, you'll use `useForm` to create a `form` variable, then reference its `FormGroup` component like you would a `Field`:
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    step1: {
+      name: '',
+    },
+    step2: {
+      age: 0,
+    },
+  },
+})
+</script>
+
+<template>
+  <form.FormGroup name="step1" v-slot="{ group: formGroup }">
+    <!-- `formGroup` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue` -->
+    <!-- ... -->
+  </form.FormGroup>
+</template>
+```
+
+This becomes much more useful when paired with external state to conditionally render a `FormGroup`:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useForm } from '@tanstack/vue-form'
+
+const step = ref(0)
+
+const form = useForm({
+  defaultValues: {
+    step1: {
+      name: '',
+    },
+    step2: {
+      age: 0,
+    },
+  },
+})
+
+const onGroupSubmit = () => {
+  step.value++
+}
+
+const onGroupSubmitInvalid = () => {
+  // Or handle invalid submissions, just like a top-level form
+}
+</script>
+
+<template>
+  <form.FormGroup
+    v-if="step === 0"
+    name="step1"
+    :onGroupSubmit="onGroupSubmit"
+    :onGroupSubmitInvalid="onGroupSubmitInvalid"
+    :onSubmitMeta="{} as SomeType"
+    v-slot="{ group: formGroup }"
+  >
+    <form @submit.prevent.stop="formGroup.handleSubmit()">
+      <!-- Use `formGroup.handleSubmit()` to submit the sub-form, but not the parent form -->
+      <!-- ... -->
+    </form>
+  </form.FormGroup>
+  <form.FormGroup
+    v-if="step === 1"
+    name="step2"
+    :onGroupSubmit="() => form.handleSubmit()"
+    v-slot="{ group: formGroup }"
+  >
+    <form @submit.prevent.stop="formGroup.handleSubmit()">
+      <!-- Then, use `form.handleSubmit()` to submit the entire form -->
+      <!-- ... -->
+    </form>
+  </form.FormGroup>
+</template>
+```
+
+## Form Group Validation
+
+Form groups have a distinct validation proceedure that we think makes sense for sub-forms:
+
+- Form groups can have their own validation:
+
+```vue
+<template>
+  <form.FormGroup
+    name="step1"
+    :validators="{ onChange: () => 'Error' }"
+    v-slot="{ group: formGroup }"
+  >
+    <!-- formGroup.state.meta.errorMap // {onChange: "Error" | undefined} -->
+    <!-- formGroup.state.meta.errors // ("Error")[] -->
+  </form.FormGroup>
+</template>
+```
+
+- Can set errors on sub-fields:
+
+```vue
+<template>
+  <form.FormGroup
+    name="step1"
+    :validators="{
+      onChange: ({ value, groupApi }) => ({
+        group: value.name === 'error' ? 'Group error' : undefined,
+        fields: {
+          // Must use the name of the field relative to the FormGroup as the error key,
+          // to stay consistent with how standard schema works with form groups
+          name: value.name === 'error' ? 'Field error' : undefined,
+        },
+      }),
+    }"
+  />
+</template>
+```
+
+- And can even accept standard schemas:
+
+```vue
+<template>
+  <form.FormGroup
+    name="step1"
+    :validators="{
+      onChange: z.object({
+        name: z.string().min(2),
+      }),
+    }"
+  />
+</template>
+```
+
+> The reason we don't use the full path names for fields is so that you can compose your schemas like so:
+>
+> ```ts
+> const step1Schema = z.object(&#123;
+>   name: z.string().min(2),
+> &#125;)
+>
+> const schema = z.object(&#123;
+>   step1: step1Schema,
+>   step2: step2Schema,
+> &#125;)
+> ```
+>
+> And pass the `step1Schema` to a form group and `schema` to the parent form. That way, partially validated data will still flag errors if the group is bypassed.
+
+### Dynamic Group Validation
+
+If you want to use [dynamic validation (`onDynamic`)](/form/framework/vue/guides/dynamic-validation) with a form group, do not rely on the `onDynamic` validator passed to `useForm`:
+
+```ts
+useForm({
+  validationLogic: revalidateLogic(),
+  validators: {
+    // This validator will not run `onChange` when a sub-form is submitted;
+    // it will only run `onChange` when the form itself is submitted.
+    onDynamic: schema,
+  },
+})
+```
+
+Instead, pass your sub-schema for the group to the `onDynamic` validation of the `FormGroup` itself:
+
+```vue
+<template>
+  <form.FormGroup name="step1" :validators="{ onDynamic: step1Schema }" />
+</template>
+```
+
+It will treat `formGroup.submissionAttempts` as the way to change what validator is ran before/after submit.
+
+## Form Group State
+
+Just like you're able to access `formGroup.state.meta.errors`, you're also able to access the group's value using `formGroup.state.value`. Likewise, here are some valuable properties you can access in the `formGroup.state.meta`:
+
+- `formGroup.state.meta.isFieldsValid`: `true` when the field-level validators have no errors
+- `formGroup.state.meta.isGroupValid`: `true` when the group-level validators have no errors
+- `formGroup.state.meta.isValid`: `true` when both the field-level and group-level validators have no errors
+- `formGroup.state.meta.isSubmitting`: `true` when the group is in the process of being submitted
diff --git a/mintlify/form/framework/vue/guides/linked-fields.md b/mintlify/form/framework/vue/guides/linked-fields.md
new file mode 100644
index 000000000..53436d791
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/linked-fields.md
@@ -0,0 +1,82 @@
+---
+id: linked-fields
+title: Link Two Form Fields Together
+---
+
+You may find yourself needing to link two fields together; when one is validated as another field's value has changed.
+One such usage is when you have both a `password` and `confirm_password` field,
+where you want to `confirm_password` to error out when `password`'s value does not match;
+regardless of which field triggered the value change.
+
+Imagine the following userflow:
+
+- User updates confirm password field.
+- User updates the non-confirm password field.
+
+In this example, the form will still have errors present,
+as the "confirm password" field validation has not been re-ran to mark as accepted.
+
+To solve this, we need to make sure that the "confirm password" validation is re-run when the password field is updated.
+To do this, you can add a `onChangeListenTo` property to the `confirm_password` field.
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    password: '',
+    confirm_password: '',
+  },
+  // ...
+})
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent.stop="form.handleSubmit">
+      <div>
+        <form.Field name="password">
+          <template v-slot="{ field }">
+            <div>Password:</div>
+            <input
+              :value="field.state.value"
+              @input="
+                (e) => field.handleChange((e.target as HTMLInputElement).value)
+              "
+            />
+          </template>
+        </form.Field>
+        <form.Field
+          name="confirm_password"
+          :validators="{
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) => {
+              if (value !== fieldApi.form.getFieldValue('password')) {
+                return 'Passwords do not match'
+              }
+              return undefined
+            },
+          }"
+        >
+          <template v-slot="{ field }">
+            <div>Confirm Password:</div>
+            <input
+              :value="field.state.value"
+              @input="
+                (e) => field.handleChange((e.target as HTMLInputElement).value)
+              "
+            />
+            <div v-for="(err, index) in field.state.meta.errors" :key="index">
+              {{ err }}
+            </div>
+          </template>
+        </form.Field>
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+```
+
+This similarly works with `onBlurListenTo` property, which will re-run the validation when the field is blurred.
diff --git a/mintlify/form/framework/vue/guides/listeners.md b/mintlify/form/framework/vue/guides/listeners.md
new file mode 100644
index 000000000..946af1e7f
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/listeners.md
@@ -0,0 +1,66 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the onChange event and dispatch a reset to the field "province" when the listener is fired.
+
+Events that can be "listened" to are:
+
+- `onChange`
+- `onBlur`
+- `onMount`
+- `onSubmit`
+- `onUnmount`
+
+```vue
+<script setup>
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    country: '',
+    province: '',
+  },
+  // ...
+})
+</script>
+
+<template>
+  <div>
+    <form.Field
+      name="country"
+      :listeners="{
+        onChange: ({ value }) => {
+          console.log(`Country changed to: ${value}, resetting province`)
+          form.setFieldValue('province', '')
+        },
+      }"
+    >
+      <template v-slot="{ field }">
+        <input
+          :value="field.state.value"
+          @input="(e) => field.handleChange(e.target.value)"
+        />
+      </template>
+    </form.Field>
+
+    <form.Field name="province">
+      <template v-slot="{ field }">
+        <input
+          :value="field.state.value"
+          @input="(e) => field.handleChange(e.target.value)"
+        />
+      </template>
+    </form.Field>
+  </div>
+</template>
+```
diff --git a/mintlify/form/framework/vue/guides/submission-handling.md b/mintlify/form/framework/vue/guides/submission-handling.md
new file mode 100644
index 000000000..9ee8f90e2
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/submission-handling.md
@@ -0,0 +1,99 @@
+---
+id: submission-handling
+title: Submission handling
+---
+
+## Passing additional data to submission handling
+
+You may have multiple types of submission behaviour, for example, going back to another page or staying on the form.
+You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
+
+> Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+type FormMeta = {
+  submitAction: 'continue' | 'backToMenu' | null
+}
+
+// Metadata is not required to call form.handleSubmit().
+// Specify what values to use as default if no meta is passed
+const defaultMeta: FormMeta = {
+  submitAction: null,
+}
+
+const form = useForm({
+  defaultValues: {
+    data: '',
+  },
+  // Define what meta values to expect on submission
+  onSubmitMeta: defaultMeta,
+  onSubmit: async ({ value, meta }) => {
+    // Do something with the values passed via handleSubmit
+    console.log(`Selected action - ${meta.submitAction}`, value)
+  },
+})
+</script>
+
+<template>
+  <form @submit.prevent.stop="">
+    <button
+      type="submit"
+      @click="
+        () => {
+          // Overwrites the default specified in onSubmitMeta
+          form.handleSubmit({ submitAction: 'continue' })
+        }
+      "
+    >
+      Submit and continue
+    </button>
+    <button
+      type="submit"
+      @click="() => form.handleSubmit({ submitAction: 'backToMenu' })"
+    >
+      Submit and back to menu
+    </button>
+  </form>
+</template>
+```
+
+## Transforming data with Standard Schemas
+
+While Tanstack Form provides [Standard Schema support](/form/framework/vue/guides/validation) for validation, it does not preserve the Schema's output data.
+
+The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function:
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+import { useForm } from '@tanstack/vue-form'
+
+const schema = z.object({
+  age: z.string().transform((age) => Number(age)),
+})
+
+// Tanstack form uses the input type of Standard Schemas
+const defaultValues: z.input<typeof schema> = {
+  age: '13',
+}
+
+const form = useForm({
+  defaultValues,
+  validators: {
+    onChange: schema,
+  },
+  onSubmit: ({ value }) => {
+    const inputAge: string = value.age
+    // Pass it through the schema to get the transformed value
+    const result = schema.parse(value)
+    const outputAge: number = result.age
+  },
+})
+</script>
+<template>
+  <!-- ... -->
+</template>
+```
diff --git a/mintlify/form/framework/vue/guides/validation.md b/mintlify/form/framework/vue/guides/validation.md
new file mode 100644
index 000000000..ee77a7a0c
--- /dev/null
+++ b/mintlify/form/framework/vue/guides/validation.md
@@ -0,0 +1,587 @@
+---
+id: form-validation
+title: Form and Field Validation
+---
+
+At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable:
+
+- You can control when to perform the validation (on change, on input, on blur, on submit...)
+- Validation rules can be defined at the field level or at the form level
+- Validation can be synchronous or asynchronous (for example, as a result of an API call)
+
+## When is validation performed?
+
+It's up to you! The `<Field />` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the `fieldAPI` object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`.
+
+Here is an example:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    }"
+  >
+    <template v-slot="{ field }">
+      <label :for="field.name">Age:</label>
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        type="number"
+        @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+                "
+      />
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onBlur: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    }"
+  >
+    <template v-slot="{ field }">
+      <label :for="field.name">Age:</label>
+      <!-- We always need to implement onChange, so that TanStack Form receives the changes -->
+      <!-- Listen to the onBlur event on the field -->
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        type="number"
+        @blur="field.handleBlur"
+        @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+                "
+      />
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+      onBlur: ({ value }) => (value < 0 ? 'Invalid value' : undefined),
+    }"
+  >
+    <template v-slot="{ field }">
+      <label :for="field.name">Age:</label>
+      <!-- We always need to implement onChange, so that TanStack Form receives the changes -->
+      <!-- Listen to the onBlur event on the field -->
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        type="number"
+        @blur="field.handleBlur"
+        @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+                "
+      />
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below.
+
+## Displaying Errors
+
+Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+Or use the `errorMap` property to access the specific error you're looking for:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: ({ value }) =>
+        value < 13 ? 'You must be 13 to make an account' : undefined,
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+      <em role="alert" v-if="field.state.meta.errorMap['onChange']">{{
+        field.state.meta.errorMap['onChange']
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```vue
+<form.Field
+  name="age"
+  :validators="{
+    onChange: ({ value }) => (value < 13 ? { isOldEnough: false } : undefined),
+  }"
+>
+  <template v-slot="{ field }">
+      <!-- ... -->
+      <!-- errorMap.onChange is type `{isOldEnough: false} | undefined` -->
+	  <!-- meta.errors is type `Array<{isOldEnough: false} | undefined>` -->
+      <em v-if="!field.state.meta.errorMap['onChange']?.isOldEnough">The user is not old enough</em>
+  </template>
+</form.Field>
+```
+
+## Validation at field level vs at form level
+
+As shown above, each `<Field>` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `useForm()` function.
+
+Example:
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    age: 0,
+  },
+  onSubmit: async ({ value }) => {
+    console.log(value)
+  },
+  validators: {
+    // Add validators to the form the same way you would add them to a field
+    onChange({ value }) {
+      if (value.age < 13) {
+        return 'Must be 13 or older to sign'
+      }
+      return undefined
+    },
+  },
+})
+
+// Subscribe to the form's error map so that updates to it will render
+// alternately, you can use `form.Subscribe`
+const formErrorMap = form.useStore((state) => state.errorMap)
+</script>
+
+<template>
+  <!-- ... -->
+  <div v-if="formErrorMap.onChange">
+    <em role="alert">
+      There was an error on the form: {{ formErrorMap.onChange }}
+    </em>
+  </div>
+  <!-- ... -->
+</template>
+```
+
+### Setting field-level errors from the form's validators
+
+You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    age: 0,
+    socials: [],
+    details: {
+      email: '',
+    },
+  },
+  validators: {
+    // Add validators to the form the same way you would add them to a field
+    onSubmitAsync({ value }) {
+      // Validate the value on the server
+      const hasErrors = await verifyDataOnServer(value)
+      if (hasErrors) {
+        return {
+          form: 'Invalid data', // The `form` key is optional
+          fields: {
+            age: 'Must be 13 or older to sign',
+            // Set errors on nested fields with the field's name
+            'socials[0].url': 'The provided URL does not exist',
+            'details.email': 'An email is required',
+          },
+        }
+      }
+
+      return null
+    },
+  },
+})
+</script>
+
+<template>
+  <!-- ... -->
+</template>
+```
+
+> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.
+>
+> This means that:
+>
+> ```vue
+> &lt;script setup lang="ts"&gt;
+> import &#123; useForm &#125; from '@tanstack/vue-form'
+>
+> const form = useForm(&#123;
+>   defaultValues: &#123;
+>     age: 0,
+>   &#125;,
+>   validators: &#123;
+>     onChange: (&#123; value &#125;) => &#123;
+>       return &#123;
+>         fields: &#123;
+>           age: value.age &lt; 12 ? 'Too young!' : undefined,
+>         &#125;,
+>       &#125;
+>     &#125;,
+>   &#125;,
+> &#125;)
+> &lt;/script&gt;
+>
+> &lt;template&gt;
+>   
+>   &lt;form.Field
+>     name="age"
+>     :validators="&#123;
+>       onChange: (&#123; value &#125;) => (value % 2 === 0 ? 'Must be odd!' : undefined),
+>     &#125;"
+>   >
+>     &lt;template v-slot="&#123; field &#125;"&gt;
+>       
+>     &lt;/template&gt;
+>   &lt;/form.Field&gt;
+> &lt;/template&gt;
+> ```
+>
+> Will only show `'Must be odd!` even if the 'Too young!' error is returned by the form-level validation.
+
+## Asynchronous Functional Validation
+
+While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against.
+
+To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
+
+```vue
+<script setup lang="ts">
+// ...
+
+const onChangeAge = async ({ value }) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return value < 13 ? 'You must be 13 to make an account' : undefined
+}
+</script>
+
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChangeAsync: onChangeAge,
+    }"
+  >
+    <template v-slot="{ field }">
+      <label :for="field.name">Age:</label>
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        type="number"
+        @input="
+          (e) =>
+            field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+        "
+      />
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
+
+```vue
+<script setup lang="ts">
+// ...
+
+const onBlurAge = ({ value }) => (value < 0 ? 'Invalid value' : undefined)
+
+const onBlurAgeAsync = async ({ value }) => {
+  const currentAge = await fetchCurrentAgeOnProfile()
+  return value < currentAge ? 'You can only increase the age' : undefined
+}
+</script>
+
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onBlur: onBlurAge,
+      onBlurAsync: onBlurAgeAsync,
+    }"
+  >
+    <template v-slot="{ field }">
+      <label :for="field.name">Age:</label>
+      <input
+        :id="field.name"
+        :name="field.name"
+        :value="field.state.value"
+        type="number"
+        @blur="field.handleBlur"
+        @input="
+          (e) =>
+            field.handleChange((e.target as HTMLInputElement).valueAsNumber)
+        "
+      />
+      <em role="alert" v-if="!field.state.meta.isValid">{{
+        field.state.meta.errors.join(', ')
+      }}</em>
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+The synchronous validation method (`onBlur`) is run first and the asynchronous method (`onBlurAsync`) is only run if the synchronous one (`onBlur`) succeeds. To change this behaviour, set the `asyncAlways` option to `true`, and the async method will be run regardless of the result of the sync method.
+
+### Built-in Debouncing
+
+While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database.
+
+Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :async-debounce-ms="500"
+    :validators="{
+      onChangeAsync: async ({ value }) => {
+        // ...
+      },
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :async-debounce-ms="500"
+    :validators="{
+      onChangeAsyncDebounceMs: 1500,
+      onChangeAsync: async ({ value }) => {
+        // ...
+      },
+      onBlurAsync: async ({ value }) => {
+        // ...
+      },
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
+
+## Validation through Schema Libraries
+
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
+
+### Standard Schema Libraries
+
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
+
+_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+> Validation will not provide you with transformed values. See [submission handling](/form/framework/vue/guides/submission-handling) for more information.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+// ...
+
+const form = useForm({
+  // ...
+})
+</script>
+
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: z.number().gte(13, 'You must be 13 to make an account'),
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+Async validations on form and field level are supported as well:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: z.number().gte(13, 'You must be 13 to make an account'),
+      onChangeAsyncDebounceMs: 500,
+      onChangeAsync: z.number().refine(
+        async (value) => {
+          const currentAge = await fetchCurrentAgeOnProfile()
+          return value >= currentAge
+        },
+        {
+          message: 'You can only increase the age',
+        },
+      ),
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
+
+```vue
+<template>
+  <!-- ... -->
+  <form.Field
+    name="age"
+    :validators="{
+      onChange: ({ value, fieldApi }) => {
+        const errors = fieldApi.parseValueWithSchema(
+          z.number().gte(13, 'You must be 13 to make an account'),
+        )
+
+        if (errors) return errors
+
+        // continue with your validation
+      },
+    }"
+  >
+    <template v-slot="{ field }">
+      <!-- ... -->
+    </template>
+  </form.Field>
+  <!-- ... -->
+</template>
+```
+
+## Preventing invalid forms from being submitted
+
+The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
+
+The form state object has a `canSubmit` flag that is false when any field is invalid and the form has been touched (`canSubmit` is true until the form has been touched, even if some fields are "technically" invalid based on their `onChange`/`onBlur` props).
+
+You can subscribe to it via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
+
+```vue
+<script setup lang="ts">
+const form = useForm(/* ... */)
+</script>
+
+<template>
+  <!-- ... -->
+
+  <!-- Dynamic submit button -->
+  <form.Subscribe>
+    <template v-slot="{ canSubmit, isSubmitting }">
+      <button type="submit" :disabled="!canSubmit">
+        {{ isSubmitting ? '...' : 'Submit' }}
+      </button>
+    </template>
+  </form.Subscribe>
+  <!-- ... -->
+</template>
+```
+
+To prevent the form from being submitted before any interaction, combine `canSubmit` with `isPristine` flags. A simple condition like `!canSubmit || isPristine` effectively disables submissions until the user has made changes.
diff --git a/mintlify/form/framework/vue/quick-start.md b/mintlify/form/framework/vue/quick-start.md
new file mode 100644
index 000000000..1c4b84154
--- /dev/null
+++ b/mintlify/form/framework/vue/quick-start.md
@@ -0,0 +1,45 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
+
+```vue
+<!-- App.vue -->
+<script setup>
+import { useForm } from '@tanstack/vue-form'
+
+const form = useForm({
+  defaultValues: {
+    fullName: '',
+  },
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    console.log(value)
+  },
+})
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent.stop="form.handleSubmit">
+      <div>
+        <form.Field name="fullName">
+          <template v-slot="{ field }">
+            <input
+              :name="field.name"
+              :value="field.state.value"
+              @blur="field.handleBlur"
+              @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
+            />
+          </template>
+        </form.Field>
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+```
+
+From here, you'll be ready to explore all of the other features of TanStack Form!
diff --git a/mintlify/form/framework/vue/reference/functions/useField.md b/mintlify/form/framework/vue/reference/functions/useField.md
new file mode 100644
index 000000000..aea79df49
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/functions/useField.md
@@ -0,0 +1,182 @@
+---
+id: useField
+title: useField
+---
+
+# Function: useField()
+
+```ts
+function useField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): object;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:189](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L189)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+`UseFieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`object`
+
+### api
+
+```ts
+readonly api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = extendedFieldApi.value;
+```
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): object;
+```
+
+##### Returns
+
+`object`
+
+###### meta
+
+```ts
+meta: object;
+```
+
+###### meta.errorMap
+
+```ts
+errorMap: ValidationErrorMap<UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>, UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>, UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>, UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>, UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>, UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>, UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>, UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>, UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>, unknown>;
+```
+
+###### meta.errorSourceMap
+
+```ts
+errorSourceMap: ValidationErrorMapSource;
+```
+
+###### meta.isBlurred
+
+```ts
+isBlurred: boolean;
+```
+
+###### meta.isDirty
+
+```ts
+isDirty: boolean;
+```
+
+###### meta.isTouched
+
+```ts
+isTouched: boolean;
+```
+
+###### meta.isValidating
+
+```ts
+isValidating: boolean;
+```
+
+###### value
+
+```ts
+value: TData;
+```
diff --git a/mintlify/form/framework/vue/reference/functions/useForm.md b/mintlify/form/framework/vue/reference/functions/useForm.md
new file mode 100644
index 000000000..5cfc168ba
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/functions/useForm.md
@@ -0,0 +1,72 @@
+---
+id: useForm
+title: useForm
+---
+
+# Function: useForm()
+
+```ts
+function useForm<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(opts?): FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta> & VueFormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useForm.tsx:204](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L204)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Parameters
+
+### opts?
+
+`FormOptions`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
+
+## Returns
+
+`FormApi`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\> & [`VueFormApi`](/form/framework/vue/reference/interfaces/VueFormApi)\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/framework/vue/reference/functions/useFormGroup.md b/mintlify/form/framework/vue/reference/functions/useFormGroup.md
new file mode 100644
index 000000000..6b78cabc7
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/functions/useFormGroup.md
@@ -0,0 +1,140 @@
+---
+id: useFormGroup
+title: useFormGroup
+---
+
+# Function: useFormGroup()
+
+```ts
+function useFormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): object;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:221](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L221)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `string`
+
+### TData
+
+`TData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+  \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `FormValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TParentData`\> \| `undefined`
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### opts
+
+`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Returns
+
+`object`
+
+### api
+
+```ts
+readonly api: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = formGroupApi;
+```
+
+### state
+
+```ts
+readonly state: Readonly<Ref<FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>, FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>> = groupState;
+```
diff --git a/mintlify/form/framework/vue/reference/index.md b/mintlify/form/framework/vue/reference/index.md
new file mode 100644
index 000000000..0000ba3e1
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/index.md
@@ -0,0 +1,33 @@
+---
+id: "@tanstack/vue-form"
+title: "@tanstack/vue-form"
+---
+
+# @tanstack/vue-form
+
+## Interfaces
+
+- [VueFieldApi](/form/framework/vue/reference/interfaces/VueFieldApi)
+- [VueFormApi](/form/framework/vue/reference/interfaces/VueFormApi)
+- [VueFormGroupApi](/form/framework/vue/reference/interfaces/VueFormGroupApi)
+
+## Type Aliases
+
+- [FieldComponent](/form/framework/vue/reference/type-aliases/FieldComponent)
+- [FieldComponentBoundProps](/form/framework/vue/reference/type-aliases/FieldComponentBoundProps)
+- [FieldComponentProps](/form/framework/vue/reference/type-aliases/FieldComponentProps)
+- [FormGroupComponent](/form/framework/vue/reference/type-aliases/FormGroupComponent)
+- [FormGroupComponentBoundProps](/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps)
+- [FormGroupComponentProps](/form/framework/vue/reference/type-aliases/FormGroupComponentProps)
+
+## Variables
+
+- [Field](/form/framework/vue/reference/variables/Field)
+- [FormGroup](/form/framework/vue/reference/variables/FormGroup)
+- [~~useStore~~](/form/framework/vue/reference/variables/useStore)
+
+## Functions
+
+- [useField](/form/framework/vue/reference/functions/useField)
+- [useForm](/form/framework/vue/reference/functions/useForm)
+- [useFormGroup](/form/framework/vue/reference/functions/useFormGroup)
diff --git a/mintlify/form/framework/vue/reference/interfaces/VueFieldApi.md b/mintlify/form/framework/vue/reference/interfaces/VueFieldApi.md
new file mode 100644
index 000000000..bfab476a8
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/interfaces/VueFieldApi.md
@@ -0,0 +1,68 @@
+---
+id: VueFieldApi
+title: VueFieldApi
+---
+
+# Interface: VueFieldApi\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/vue-form/src/useField.tsx:159](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L159)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Properties
+
+### Field
+
+```ts
+Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:173](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L173)
diff --git a/mintlify/form/framework/vue/reference/interfaces/VueFormApi.md b/mintlify/form/framework/vue/reference/interfaces/VueFormApi.md
new file mode 100644
index 000000000..b4c9c05b0
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/interfaces/VueFormApi.md
@@ -0,0 +1,114 @@
+---
+id: VueFormApi
+title: VueFormApi
+---
+
+# Interface: VueFormApi\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta\>
+
+Defined in: [packages/vue-form/src/useForm.tsx:112](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L112)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+## Properties
+
+### Field
+
+```ts
+Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useForm.tsx:126](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L126)
+
+***
+
+### FormGroup
+
+```ts
+FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useForm.tsx:140](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L140)
+
+***
+
+### Subscribe
+
+```ts
+Subscribe: SubscribeComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>;
+```
+
+Defined in: [packages/vue-form/src/useForm.tsx:189](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L189)
+
+***
+
+### useStore()
+
+```ts
+useStore: <TSelected>(selector?) => Readonly<Ref<TSelected>>;
+```
+
+Defined in: [packages/vue-form/src/useForm.tsx:154](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L154)
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected` = `NoInfer`\&lt;`FormState`\&lt;`TParentData`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`\>\>
+
+#### Parameters
+
+##### selector?
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Readonly`\&lt;`Ref`\&lt;`TSelected`\>\>
diff --git a/mintlify/form/framework/vue/reference/interfaces/VueFormGroupApi.md b/mintlify/form/framework/vue/reference/interfaces/VueFormGroupApi.md
new file mode 100644
index 000000000..19b488961
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/interfaces/VueFormGroupApi.md
@@ -0,0 +1,68 @@
+---
+id: VueFormGroupApi
+title: VueFormGroupApi
+---
+
+# Interface: VueFormGroupApi\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:191](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L191)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Properties
+
+### FormGroup
+
+```ts
+FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:205](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L205)
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FieldComponent.md b/mintlify/form/framework/vue/reference/type-aliases/FieldComponent.md
new file mode 100644
index 000000000..308a10ecf
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FieldComponent.md
@@ -0,0 +1,94 @@
+---
+id: FieldComponent
+title: FieldComponent
+---
+
+# Type Alias: FieldComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>(props) => CreateComponentPublicInstanceWithMixins<FieldComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, {
+}, {
+}, {
+}, {
+}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {
+}, false, {
+}, SlotsType<{
+  default: {
+     field: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+     state: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>["state"];
+  };
+}>>;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:25](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L25)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### props
+
+[`FieldComponentBoundProps`](/form/framework/vue/reference/type-aliases/FieldComponentBoundProps)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\> & `EmitsToProps`\&lt;`EmitsOptions`\> & `PublicProps`
+
+## Returns
+
+`CreateComponentPublicInstanceWithMixins`\&lt;[`FieldComponentBoundProps`](/form/framework/vue/reference/type-aliases/FieldComponentBoundProps)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \&#123;
+\&#125;, `false`, \&#123;
+\&#125;, `SlotsType`\&lt;\&#123;
+  `default`: \&#123;
+     `field`: `FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>;
+     `state`: `FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>\[`"state"`\];
+  \&#125;;
+\&#125;\>\>
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FieldComponentBoundProps.md b/mintlify/form/framework/vue/reference/type-aliases/FieldComponentBoundProps.md
new file mode 100644
index 000000000..baa58aca0
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FieldComponentBoundProps.md
@@ -0,0 +1,62 @@
+---
+id: FieldComponentBoundProps
+title: FieldComponentBoundProps
+---
+
+# Type Alias: FieldComponentBoundProps\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+```ts
+type FieldComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync> = UseFieldOptionsBound<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:444](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L444)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FieldComponentProps.md b/mintlify/form/framework/vue/reference/type-aliases/FieldComponentProps.md
new file mode 100644
index 000000000..9d4f390ab
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FieldComponentProps.md
@@ -0,0 +1,106 @@
+---
+id: FieldComponentProps
+title: FieldComponentProps
+---
+
+# Type Alias: FieldComponentProps\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:386](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L386)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponent.md b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponent.md
new file mode 100644
index 000000000..db11514dc
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponent.md
@@ -0,0 +1,94 @@
+---
+id: FormGroupComponent
+title: FormGroupComponent
+---
+
+# Type Alias: FormGroupComponent()\&lt;TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = <TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta>(props) => CreateComponentPublicInstanceWithMixins<FormGroupComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, {
+}, {
+}, {
+}, {
+}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {
+}, false, {
+}, SlotsType<{
+  default: {
+     group: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+     state: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>["state"];
+  };
+}>>;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:24](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L24)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Parameters
+
+### props
+
+[`FormGroupComponentBoundProps`](/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\> & `EmitsToProps`\&lt;`EmitsOptions`\> & `PublicProps`
+
+## Returns
+
+`CreateComponentPublicInstanceWithMixins`\&lt;[`FormGroupComponentBoundProps`](/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \&#123;
+\&#125;, `false`, \&#123;
+\&#125;, `SlotsType`\&lt;\&#123;
+  `default`: \&#123;
+     `group`: `FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>;
+     `state`: `FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>\[`"state"`\];
+  \&#125;;
+\&#125;\>\>
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps.md b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps.md
new file mode 100644
index 000000000..d4c1aa094
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentBoundProps.md
@@ -0,0 +1,118 @@
+---
+id: FormGroupComponentBoundProps
+title: FormGroupComponentBoundProps
+---
+
+# Type Alias: FormGroupComponentBoundProps\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type FormGroupComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = FormGroupOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:384](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L384)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
diff --git a/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentProps.md b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentProps.md
new file mode 100644
index 000000000..60cf2aa32
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/FormGroupComponentProps.md
@@ -0,0 +1,118 @@
+---
+id: FormGroupComponentProps
+title: FormGroupComponentProps
+---
+
+# Type Alias: FormGroupComponentProps\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+```ts
+type FormGroupComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> = FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:318](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L318)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* `DeepKeys`\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* `DeepValue`\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
diff --git a/mintlify/form/framework/vue/reference/type-aliases/UseField.md b/mintlify/form/framework/vue/reference/type-aliases/UseField.md
new file mode 100644
index 000000000..abda072ec
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/type-aliases/UseField.md
@@ -0,0 +1,12 @@
+---
+title: "Types / UseField"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/framework/vue/reference/type-aliases/UseField)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/framework/vue/reference/variables/Field.md b/mintlify/form/framework/vue/reference/variables/Field.md
new file mode 100644
index 000000000..91ff5a9b4
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/variables/Field.md
@@ -0,0 +1,48 @@
+---
+id: Field
+title: Field
+---
+
+# Variable: Field()
+
+```ts
+const Field: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(props) => CreateComponentPublicInstanceWithMixins<UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & 
+  | {
+[key: `on${Capitalize<string>}`]: (...args) => any | undefined;
+}
+  | {
+[key: `on${Capitalize<string>}`]: (...args) => any | undefined;
+}, {
+}, {
+}, {
+}, {
+}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {
+}, false, {
+}, {
+}>;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:480](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L480)
+
+## Parameters
+
+### props
+
+UseFieldOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, ... 14 more ..., TParentSubmitMeta\> & (\&#123; ...; \&#125; \| \&#123; ...; \&#125;) & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps`
+
+## Returns
+
+`CreateComponentPublicInstanceWithMixins`\&lt;`UseFieldOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\> & 
+  \| \&#123;
+\[`key`: `` `on${Capitalize<string>}` ``\]: (...`args`) => `any` \| `undefined`;
+\&#125;
+  \| \&#123;
+\[`key`: `` `on${Capitalize<string>}` ``\]: (...`args`) => `any` \| `undefined`;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \&#123;
+\&#125;, `false`, \&#123;
+\&#125;, \&#123;
+\&#125;\>
diff --git a/mintlify/form/framework/vue/reference/variables/FormGroup.md b/mintlify/form/framework/vue/reference/variables/FormGroup.md
new file mode 100644
index 000000000..b28b2b4eb
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/variables/FormGroup.md
@@ -0,0 +1,48 @@
+---
+id: FormGroup
+title: FormGroup
+---
+
+# Variable: FormGroup()
+
+```ts
+const FormGroup: <TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(props) => CreateComponentPublicInstanceWithMixins<FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & 
+  | {
+[key: `on${Capitalize<string>}`]: (...args) => any | undefined;
+}
+  | {
+[key: `on${Capitalize<string>}`]: (...args) => any | undefined;
+}, {
+}, {
+}, {
+}, {
+}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {
+}, false, {
+}, {
+}>;
+```
+
+Defined in: [packages/vue-form/src/useFormGroup.tsx:450](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useFormGroup.tsx#L450)
+
+## Parameters
+
+### props
+
+FormGroupApiOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, ... 15 more ..., TParentSubmitMeta\> & (\&#123; ...; \&#125; \| \&#123; ...; \&#125;) & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps`
+
+## Returns
+
+`CreateComponentPublicInstanceWithMixins`\&lt;`FormGroupApiOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\> & 
+  \| \&#123;
+\[`key`: `` `on${Capitalize<string>}` ``\]: (...`args`) => `any` \| `undefined`;
+\&#125;
+  \| \&#123;
+\[`key`: `` `on${Capitalize<string>}` ``\]: (...`args`) => `any` \| `undefined`;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, \&#123;
+\&#125;, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \&#123;
+\&#125;, `false`, \&#123;
+\&#125;, \&#123;
+\&#125;\>
diff --git a/mintlify/form/framework/vue/reference/variables/useStore.md b/mintlify/form/framework/vue/reference/variables/useStore.md
new file mode 100644
index 000000000..a10c23031
--- /dev/null
+++ b/mintlify/form/framework/vue/reference/variables/useStore.md
@@ -0,0 +1,58 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Variable: useStore()~~
+
+```ts
+const useStore: <TSource, TSelected>(source, selector?, compare?) => Readonly<Ref<TSelected>>;
+```
+
+Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.11.0\_vue@3.5.34\_typescript@5.9.3\_/node\_modules/@tanstack/vue-store/dist/useStore.d.ts:14
+
+Deprecated alias for useSelector.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector?
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`Readonly`\&lt;`Ref`\&lt;`TSelected`\>\>
+
+## Example
+
+```ts
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/form/index.mdx b/mintlify/form/index.mdx
new file mode 100644
index 000000000..4c08fedcd
--- /dev/null
+++ b/mintlify/form/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Form"
+description: "Type-safe form state management. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Type-safe form state management.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/form/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/form">
+    Visit the canonical TanStack Form website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/form">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/form/installation.md b/mintlify/form/installation.md
new file mode 100644
index 000000000..da45cc213
--- /dev/null
+++ b/mintlify/form/installation.md
@@ -0,0 +1,67 @@
+---
+id: installation
+title: Installation
+---
+
+TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. Install the corresponding adapter for your framework using your preferred package manager:
+
+
+
+react: @tanstack/react-form
+vue: @tanstack/vue-form
+angular: @tanstack/angular-form
+solid: @tanstack/solid-form
+lit: @tanstack/lit-form
+svelte: @tanstack/svelte-form
+
+
+
+
+
+# React
+
+## Meta-frameworks
+
+If you're using a meta-framework, TanStack Form provides additional adapters to streamline integration:
+
+- TanStack Start
+- Next.js
+- Remix
+
+
+
+
+
+react: @tanstack/react-form-start
+react: @tanstack/react-form-nextjs
+react: @tanstack/react-form-remix
+
+
+
+
+
+# React
+
+## Devtools
+
+Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework as a dev dependency to debug forms and inspect their state.
+
+# Solid
+
+## Devtools
+
+Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework as a dev dependency to debug forms and inspect their state.
+
+
+
+
+
+react: @tanstack/react-devtools
+react: @tanstack/react-form-devtools
+solid: @tanstack/solid-devtools
+solid: @tanstack/solid-form-devtools
+
+
+
+> [!NOTE]- Polyfill requirements
+> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourself.
diff --git a/mintlify/form/overview.md b/mintlify/form/overview.md
new file mode 100644
index 000000000..282386a03
--- /dev/null
+++ b/mintlify/form/overview.md
@@ -0,0 +1,842 @@
+---
+id: overview
+title: Overview
+---
+
+TanStack Form is the ultimate solution for handling forms in web applications, providing a powerful and flexible approach to form management. Designed with first-class TypeScript support, headless UI components, and a framework-agnostic design, it streamlines form handling and ensures a seamless experience across various front-end frameworks.
+
+## Motivation
+
+Most web frameworks do not offer a comprehensive solution for form handling, leaving developers to create their own custom implementations or rely on less-capable libraries. This often results in a lack of consistency, poor performance, and increased development time. TanStack Form aims to address these challenges by providing an all-in-one solution for managing forms that is both powerful and easy to use.
+
+With TanStack Form, developers can tackle common form-related challenges such as:
+
+- Reactive data binding and state management
+- Complex validation and error handling
+- Accessibility and responsive design
+- Internationalization and localization
+- Cross-platform compatibility and custom styling
+
+By providing a complete solution for these challenges, TanStack Form empowers developers to build robust and user-friendly forms with ease.
+
+## Enough talk, show me some code already!
+
+
+
+# React
+
+In the example below, you can see TanStack Form in action with the React framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/react/simple)
+
+
+
+```tsx title="App.tsx"
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { useForm } from '@tanstack/react-form'
+
+import { FieldInfo } from './FieldInfo.tsx'
+
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div>
+          {/* A type-safe field component*/}
+          <form.Field
+            name="firstName"
+            validators={{
+              onChange: ({ value }) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined,
+              onChangeAsyncDebounceMs: 500,
+              onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              },
+            }}
+            children={(field) => {
+              // Avoid hasty abstractions. Render props are great!
+              return (
+                <>
+                  <label htmlFor={field.name}>First Name:</label>
+                  <input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field} />
+                </>
+              )
+            }}
+          />
+        </div>
+        <div>
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label htmlFor={field.name}>Last Name:</label>
+                <input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <FieldInfo field={field} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <>
+              <button type="submit" disabled={!canSubmit}>
+                {isSubmitting ? '...' : 'Submit'}
+              </button>
+              <button
+                type="reset"
+                onClick={(e) => {
+                  // Avoid unexpected resets of form elements (especially <select> elements)
+                  e.preventDefault()
+                  form.reset()
+                }}
+              >
+                Reset
+              </button>
+            </>
+          )}
+        />
+      </form>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')!
+
+createRoot(rootElement).render(
+  <React.StrictMode>
+    <App />
+
+    <TanStackDevtools
+      config={{ hideUntilHover: true }}
+      plugins={[formDevtoolsPlugin()]}
+    />
+  </React.StrictMode>,
+)
+```
+
+```tsx title="FieldInfo.tsx"
+import type { AnyFieldApi } from '@tanstack/react-form'
+
+export function FieldInfo({ field }: { field: AnyFieldApi }) {
+  return (
+    <>
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
+        <em>{field.state.meta.errors.join(',')}</em>
+      ) : null}
+      {field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+```
+
+
+
+# Vue
+
+In the example below, you can see TanStack Form in action with the Vue framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/vue/simple)
+
+
+
+```vue title="App.vue"
+<script setup lang="ts">
+import { useForm } from '@tanstack/vue-form'
+import FieldInfo from './FieldInfo.vue'
+
+const form = useForm({
+  defaultValues: {
+    firstName: '',
+    lastName: '',
+  },
+  onSubmit: async ({ value }) => {
+    // Do something with form data
+    alert(JSON.stringify(value))
+  },
+})
+
+async function onChangeFirstName({ value }: { value: string }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return value.includes(`error`) && `No 'error' allowed in first name`
+}
+</script>
+
+<template>
+  <form
+    @submit="
+      (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }
+    "
+  >
+    <div>
+      <form.Field
+        name="firstName"
+        :validators="{
+          onChange: ({ value }) =>
+            !value
+              ? `A first name is required`
+              : value.length < 3
+                ? `First name must be at least 3 characters`
+                : undefined,
+          onChangeAsyncDebounceMs: 500,
+          onChangeAsync: onChangeFirstName,
+        }"
+      >
+        <template v-slot="{ field, state }">
+          <label :htmlFor="field.name">First Name:</label>
+          <input
+            :id="field.name"
+            :name="field.name"
+            :value="field.state.value"
+            @input="
+              (e) => field.handleChange((e.target as HTMLInputElement).value)
+            "
+            @blur="field.handleBlur"
+          />
+          <FieldInfo :state="state" />
+        </template>
+      </form.Field>
+    </div>
+    <div>
+      <form.Field name="lastName">
+        <template v-slot="{ field, state }">
+          <label :htmlFor="field.name">Last Name:</label>
+          <input
+            :id="field.name"
+            :name="field.name"
+            :value="field.state.value"
+            @input="
+              (e) => field.handleChange((e.target as HTMLInputElement).value)
+            "
+            @blur="field.handleBlur"
+          />
+          <FieldInfo :state="state" />
+        </template>
+      </form.Field>
+    </div>
+    <form.Subscribe>
+      <template v-slot="{ canSubmit, isSubmitting }">
+        <button type="submit" :disabled="!canSubmit">
+          {{ isSubmitting ? '...' : 'Submit' }}
+        </button>
+      </template>
+    </form.Subscribe>
+  </form>
+</template>
+```
+
+```vue title="FieldInfo.vue"
+<script setup lang="ts">
+import { AnyFieldApi } from '@tanstack/vue-form'
+
+const props = defineProps<{
+  state: AnyFieldApi['state']
+}>()
+</script>
+
+<template>
+  <template v-if="props.state.meta.isTouched">
+    <em v-for="error of props.state.meta.errors">{{ error }}</em>
+    {{ props.state.meta.isValidating ? 'Validating...' : null }}
+  </template>
+</template>
+```
+
+
+
+# Angular
+
+In the example below, you can see TanStack Form in action with the Angular framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/angular/simple)
+
+
+
+```angular-ts title="app.component.ts"
+import { Component } from '@angular/core'
+import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
+import type {
+  FieldValidateAsyncFn,
+  FieldValidateFn,
+} from '@tanstack/angular-form'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackField],
+  template: `
+    <form (submit)="handleSubmit($event)">
+      <div>
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [validators]="{
+            onChange: firstNameValidator,
+            onChangeAsyncDebounceMs: 500,
+            onChangeAsync: firstNameAsyncValidator,
+          }"
+          #firstName="field"
+        >
+          <label [for]="firstName.api.name">First Name:</label>
+          <input
+            [id]="firstName.api.name"
+            [name]="firstName.api.name"
+            [value]="firstName.api.state.value"
+            (blur)="firstName.api.handleBlur()"
+            (input)="firstName.api.handleChange($any($event).target.value)"
+          />
+          @if (firstName.api.state.meta.isTouched) {
+            @for (error of firstName.api.state.meta.errors; track $index) {
+              <div style="color: red">
+                {{ error }}
+              </div>
+            }
+          }
+          @if (firstName.api.state.meta.isValidating) {
+            <p>Validating...</p>
+          }
+        </ng-container>
+      </div>
+      <div>
+        <ng-container [tanstackField]="form" name="lastName" #lastName="field">
+          <label [for]="lastName.api.name">Last Name:</label>
+          <input
+            [id]="lastName.api.name"
+            [name]="lastName.api.name"
+            [value]="lastName.api.state.value"
+            (blur)="lastName.api.handleBlur()"
+            (input)="lastName.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+      </div>
+      <button type="submit" [disabled]="!canSubmit()">
+        {{ isSubmitting() ? '...' : 'Submit' }}
+      </button>
+      <button type="reset" (click)="form.reset()">Reset</button>
+    </form>
+  `,
+})
+export class AppComponent {
+  firstNameValidator: FieldValidateFn<any, string, any> = ({ value }) =>
+    !value
+      ? 'A first name is required'
+      : value.length < 3
+        ? 'First name must be at least 3 characters'
+        : undefined
+
+  firstNameAsyncValidator: FieldValidateAsyncFn<any, string, any> = async ({
+    value,
+  }) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return value.includes('error') && 'No "error" allowed in first name'
+  }
+
+  form = injectForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  canSubmit = injectStore(this.form, (state) => state.canSubmit)
+  isSubmitting = injectStore(this.form, (state) => state.isSubmitting)
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
+  }
+}
+```
+
+
+
+# Solid
+
+In the example below, you can see TanStack Form in action with the Solid framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/solid/simple)
+
+
+
+```ts title="App.tsx"
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import { createForm } from '@tanstack/solid-form'
+import { FieldInfo } from './FieldInfo.tsx';
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div>
+          {/* A type-safe field component*/}
+          <form.Field
+            name="firstName"
+            validators={{
+              onChange: ({ value }) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined,
+              onChangeAsyncDebounceMs: 500,
+              onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              },
+            }}
+            children={(field) => {
+              // Avoid hasty abstractions. Render props are great!
+              return (
+                <>
+                  <label for={field().name}>First Name:</label>
+                  <input
+                    id={field().name}
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )
+            }}
+          />
+        </div>
+        <div>
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label for={field().name}>Last Name:</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.target.value)}
+                />
+                <FieldInfo field={field()} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
+          selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+          })}
+          children={(state) => {
+            return (
+              <button type="submit" disabled={!state().canSubmit}>
+                {state().isSubmitting ? '...' : 'Submit'}
+              </button>
+            )
+          }}
+        />
+      </form>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
+```
+
+```ts title="FieldInfo.tsx"
+import type { AnyFieldApi } from '@tanstack/solid-form'
+
+export interface FieldInfoProps {
+  field: AnyFieldApi
+}
+
+export function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.isTouched && !props.field.state.meta.isValid ? (
+        <em>{props.field.state.meta.errors.join(',')}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+```
+
+
+
+# Svelte
+
+In the example below, you can see TanStack Form in action with the Svelte framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/svelte/simple)
+
+
+
+```svelte title="App.svelte"
+<script lang="ts">
+  import { createForm } from '@tanstack/svelte-form'
+  import FieldInfo from './FieldInfo.svelte'
+
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      employed: false,
+      jobTitle: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value))
+    },
+  }))
+</script>
+
+<form
+  id="form"
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    form.handleSubmit()
+  }}
+>
+  <h1>TanStack Form - Svelte Demo</h1>
+
+  <form.Field
+    name="firstName"
+    validators={{
+      onChange: ({ value }) =>
+        value.length < 3 ? 'Not long enough' : undefined,
+      onChangeAsyncDebounceMs: 500,
+      onChangeAsync: async ({ value }) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        return value.includes('error') && 'No "error" allowed in first name'
+      },
+    }}
+  >
+    {#snippet children(field)}
+      <div>
+        <label for={field.name}>First Name</label>
+        <input
+          id={field.name}
+          type="text"
+          placeholder="First Name"
+          value={field.state.value}
+          onblur={() => field.handleBlur()}
+          oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+        />
+        <FieldInfo {field} />
+      </div>
+    {/snippet}
+  </form.Field>
+  <form.Field
+    name="lastName"
+    validators={{
+      onChange: ({ value }) =>
+        value.length < 3 ? 'Not long enough' : undefined,
+    }}
+  >
+    {#snippet children(field)}
+      <div>
+        <label for={field.name}>Last Name</label>
+        <input
+          id={field.name}
+          type="text"
+          placeholder="Last Name"
+          value={field.state.value}
+          onblur={() => field.handleBlur()}
+          oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+        />
+        <FieldInfo {field} />
+      </div>
+    {/snippet}
+  </form.Field>
+  <form.Field name="employed">
+    {#snippet children(field)}
+      <div>
+        <label for={field.name}>Employed?</label>
+        <input
+          oninput={() => field.handleChange(!field.state.value)}
+          checked={field.state.value}
+          onblur={() => field.handleBlur()}
+          id={field.name}
+          type="checkbox"
+        />
+      </div>
+      {#if field.state.value}
+        <form.Field
+          name="jobTitle"
+          validators={{
+            onChange: ({ value }) =>
+              value.length === 0 ? 'If you have a job, you need a title' : null,
+          }}
+        >
+          {#snippet children(field)}
+            <div>
+              <label for={field.name}>Job Title</label>
+              <input
+                type="text"
+                id={field.name}
+                placeholder="Job Title"
+                value={field.state.value}
+                onblur={field.handleBlur}
+                oninput={(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(target.value)
+                }}
+              />
+              <FieldInfo {field} />
+            </div>
+          {/snippet}
+        </form.Field>
+      {/if}
+    {/snippet}
+  </form.Field>
+  <div>
+    <form.Subscribe
+      selector={(state) => ({
+        canSubmit: state.canSubmit,
+        isSubmitting: state.isSubmitting,
+      })}
+    >
+      {#snippet children({ canSubmit, isSubmitting })}
+        <button type="submit" disabled={!canSubmit}>
+          {isSubmitting ? 'Submitting' : 'Submit'}
+        </button>
+      {/snippet}
+    </form.Subscribe>
+    <button
+      type="button"
+      id="reset"
+      onclick={() => {
+        form.reset()
+      }}
+    >
+      Reset
+    </button>
+  </div>
+</form>
+```
+
+```svelte title="FieldInfo.svelte"
+<script lang="ts">
+  import type { AnyFieldApi } from '@tanstack/svelte-form'
+
+  let { field }: { field: AnyFieldApi } = $props()
+</script>
+
+{#if field.state.meta.isTouched}
+  {#each field.state.meta.errors as error}
+    <em>{error}</em>
+  {/each}
+  {field.state.meta.isValidating ? 'Validating...' : ''}
+{/if}
+```
+
+
+
+# Lit
+
+In the example below, you can see TanStack Form in action with the Lit framework adapter:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/main/examples/lit/simple)
+
+```ts title="index.ts"
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { TanStackFormController } from '@tanstack/lit-form'
+import { repeat } from 'lit/directives/repeat.js'
+
+@customElement('tanstack-form-demo')
+export class TanStackFormDemo extends LitElement {
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit({ value }) {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  render() {
+    return html`
+      <form
+        @submit=${(e: Event) => {
+          e.preventDefault()
+          e.stopPropagation()
+          this.#form.api.handleSubmit()
+        }}
+      >
+          ${this.#form.field(
+            {
+              name: `firstName`,
+              validators: {
+                onChange: ({ value }) =>
+                  !value
+                    ? 'A first name is required'
+                    : value.length < 3
+                      ? 'First name must be at least 3 characters'
+                      : undefined,
+                onChangeAsyncDebounceMs: 500,
+                onChangeAsync: async ({ value }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000))
+                  return (
+                    value.includes('error') &&
+                    'No "error" allowed in first name'
+                  )
+                },
+              },
+            },
+            (field) => {
+              return html` <div>
+                <label for="${field.name}">First Name:</label>
+                <input
+                  id="${field.name}"
+                  name="${field.name}"
+                  .value="${field.state.value}"
+                  @blur="${() => field.handleBlur()}"
+                  @input="${(e: Event) => {
+                    const target = e.target as HTMLInputElement
+                    field.handleChange(target.value)
+                  }}"
+                />
+                ${field.state.meta.isTouched && !field.state.meta.isValid
+                  ? html`${repeat(
+                      field.state.meta.errors,
+                      (__, idx) => idx,
+                      (error) => {
+                        return html`<div style="color: red;">${error}</div>`
+                      },
+                    )}`
+                  : nothing}
+                ${field.state.meta.isValidating
+                  ? html`<p>Validating...</p>`
+                  : nothing}
+              </div>`
+            },
+          )}
+        </div>
+        <div>
+          ${this.#form.field(
+            {
+              name: `lastName`,
+            },
+            (field) => {
+              return html` <div>
+                <label for="${field.name}">Last Name:</label>
+                <input
+                  id="${field.name}"
+                  name="${field.name}"
+                  .value="${field.state.value}"
+                  @blur="${() => field.handleBlur()}"
+                  @input="${(e: Event) => {
+                    const target = e.target as HTMLInputElement
+                    field.handleChange(target.value)
+                  }}"
+                />
+              </div>`
+            },
+          )}
+        </div>
+
+        <button type="submit" ?disabled=${this.#form.api.state.isSubmitting}>
+          ${this.#form.api.state.isSubmitting ? '...' : 'Submit'}
+        </button>
+        <button
+          type="button"
+          @click=${() => {
+            this.#form.api.reset()
+          }}
+        >
+          Reset
+        </button>
+      </form>
+    `
+  }
+}
+```
+
+
+
+## You talked me into it, so what now?
+
+- Learn TanStack Form at your own pace with our thorough [Walkthrough Guide](/form/installation) and [API Reference](/form/reference/classes/FormApi).
diff --git a/mintlify/form/philosophy.md b/mintlify/form/philosophy.md
new file mode 100644
index 000000000..9628ebbd0
--- /dev/null
+++ b/mintlify/form/philosophy.md
@@ -0,0 +1,78 @@
+---
+id: philosophy
+title: Philosophy
+---
+
+Every well-established project should have a philosophy that guides its development. Without a core philosophy, development can languish in endless decision-making and have weaker APIs as a result.
+
+This document outlines the core principles that drive the development and feature-set of TanStack Form.
+
+## Upgrading unified APIs
+
+APIs come with tradeoffs. As a result, it can be tempting to make each set of tradeoffs available to the user through different APIs. However, this can lead to a fragmented API that is harder to learn and use.
+
+While this may mean a higher learning curve, it means that you don't have to question which API to use internally or have higher cognitive overhead when switching between APIs.
+
+## Forms need flexibility
+
+TanStack Form is designed to be flexible and customizable. While many forms may conform to similar patterns, there are always exceptions; especially when forms are a core component of your application.
+
+As a result, TanStack Form supports multiple methods for validation:
+
+- **Timing customizations**: You can validate on blur, change, submit, or even on mount.
+- **Validation strategies**: You can validate on individual fields, the entire form, or a subset of fields.
+- **Custom validation logic**: You can write your own validation logic or use a library like [Zod](https://zod.dev/) or [Valibot](https://valibot.dev/).
+- **Custom error messages**: You can customize the error messages for each field by returning any object from a validator.
+- **Async validation**: You can validate fields asynchronously and have common utils like debouncing and cancellation handled for you.
+
+## Controlled is Cool
+
+In a world where controlled vs. uncontrolled inputs are a hot topic, TanStack Form is firmly in the controlled camp.
+
+This comes with a number of advantages:
+
+- **Predictable**: You can predict the state of your form at any point in time.
+- **Easier testing**: You can easily test your forms by passing in values and asserting on the output.
+- **Non-DOM support**: You can use TanStack Form with React Native, Three.js framework adapters, or any other framework renderer.
+- **Enhanced conditional logic**: You can easily conditionally show/hide fields based on the form state.
+- **Debugging**: You can easily log the form state to the console to debug issues.
+
+## Generics are grim
+
+You should never need to pass a generic or use an internal type when leveraging TanStack Form. This is because we've designed the library to infer everything from runtime defaults.
+
+When writing sufficiently correct TanStack Form code, you should not be able to distinguish between JavaScript usage and TypeScript usage, with the exception of any type casts you might do of runtime values.
+
+Instead of:
+
+```ts
+useForm<MyForm>()
+```
+
+You should do:
+
+```ts
+interface Person {
+  name: string
+  age: number
+}
+
+const defaultPerson: Person = { name: 'Bill Luo', age: 24 }
+
+useForm({
+  defaultValues: defaultPerson,
+})
+```
+
+## Libraries are liberating
+
+One of the main objectives of TanStack Form is that you should be wrapping it into your own component system or design system.
+
+To support this, we have a number of utilities that make it easier to build your own components and customized hooks:
+
+```ts
+// Exported from your own library with pre-bound components for your forms.
+export const { useAppForm, withForm } = createFormHook(/* options */)
+```
+
+Without doing so, you're adding substantially more boilerplate to your apps and making your forms less consistent and user-friendly.
diff --git a/mintlify/form/reference/classes/FieldApi.md b/mintlify/form/reference/classes/FieldApi.md
new file mode 100644
index 000000000..3a436befd
--- /dev/null
+++ b/mintlify/form/reference/classes/FieldApi.md
@@ -0,0 +1,785 @@
+---
+id: FieldApi
+title: FieldApi
+---
+
+# Class: FieldApi\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/form-core/src/FieldApi.ts:520](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L520)
+
+A class representing the API for managing a form field.
+
+Normally, you will not need to create a new `FieldApi` instance directly.
+Instead, you will use a framework hook/function like `useField` or `createField`
+to create a new instance for you that uses your framework's reactivity model.
+However, if you need to create a new instance manually, you can do so by calling
+the `new FieldApi` constructor.
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Constructors
+
+### Constructor
+
+```ts
+new FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:712](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L712)
+
+Initializes a new `FieldApi` instance.
+
+#### Parameters
+
+##### opts
+
+[`FieldApiOptions`](/form/reference/interfaces/FieldApiOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+#### Returns
+
+`FieldApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Properties
+
+### form
+
+```ts
+form: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:612](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L612)
+
+A reference to the form API instance.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.form
+```
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:640](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L640)
+
+The field name.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.name
+```
+
+***
+
+### options
+
+```ts
+options: FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644)
+
+The field options.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.options
+```
+
+***
+
+### store
+
+```ts
+store: ReadonlyStore<FieldLikeState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L672)
+
+The field state store.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.store
+```
+
+***
+
+### timeoutIds
+
+```ts
+timeoutIds: object;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:703](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L703)
+
+#### formListeners
+
+```ts
+formListeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
+```
+
+#### listeners
+
+```ts
+listeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
+```
+
+#### validations
+
+```ts
+validations: Record<ValidationCause, ReturnType<typeof setTimeout> | null>;
+```
+
+## Accessors
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): FieldLikeState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:700](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L700)
+
+The current field state.
+
+##### Returns
+
+`FieldLikeState`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>
+
+## Methods
+
+### clearValues()
+
+```ts
+clearValues(options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1214](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1214)
+
+Clear all values from the array.
+
+#### Parameters
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### getInfo()
+
+```ts
+getInfo(): FieldInfo<TParentData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1100](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1100)
+
+Gets the field information object.
+
+#### Returns
+
+`FieldInfo`\&lt;`TParentData`\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.getInfo
+```
+
+***
+
+### getMeta()
+
+```ts
+getMeta(): FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1064](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1064)
+
+#### Returns
+
+`FieldLikeMeta`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.getMeta
+```
+
+***
+
+### ~~getValue()~~
+
+```ts
+getValue(): TData;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1041](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1041)
+
+Gets the current field value.
+
+#### Returns
+
+`TData`
+
+#### Deprecated
+
+Use `field.state.value` instead.
+
+***
+
+### handleBlur()
+
+```ts
+handleBlur(): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1701](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1701)
+
+Handles the blur event.
+
+#### Returns
+
+`void`
+
+***
+
+### handleChange()
+
+```ts
+handleChange(updater): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1694](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1694)
+
+Handles the change event.
+
+#### Parameters
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`TData`\>
+
+#### Returns
+
+`void`
+
+***
+
+### insertValue()
+
+```ts
+insertValue(
+   index, 
+   value, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1123](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1123)
+
+Inserts a value at the specified index, shifting the subsequent values to the right.
+
+#### Parameters
+
+##### index
+
+`number`
+
+##### value
+
+`TData` *extends* `any`[] ? `TData`\&lt;`TData`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### mount()
+
+```ts
+mount(): () => void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:859](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L859)
+
+Mounts the field instance to the form.
+
+#### Returns
+
+A function to unmount the field instance.
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.mount
+```
+
+***
+
+### moveValue()
+
+```ts
+moveValue(
+   aIndex, 
+   bIndex, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1198](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1198)
+
+Moves the value at the first specified index to the second specified index.
+
+#### Parameters
+
+##### aIndex
+
+`number`
+
+##### bIndex
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### parseValueWithSchema()
+
+```ts
+parseValueWithSchema(schema): 
+  | StandardSchemaV1Issue[]
+  | undefined;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1744](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1744)
+
+Parses the field's value with the given schema and returns
+issues (if any). This method does NOT set any internal errors.
+
+#### Parameters
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)\&lt;`TData`, `unknown`\>
+
+The standard schema to parse this field's value with.
+
+#### Returns
+
+  \| [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]
+  \| `undefined`
+
+***
+
+### parseValueWithSchemaAsync()
+
+```ts
+parseValueWithSchemaAsync(schema): Promise<
+  | StandardSchemaV1Issue[]
+| undefined>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1756](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1756)
+
+Parses the field's value with the given schema and returns
+issues (if any). This method does NOT set any internal errors.
+
+#### Parameters
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)\&lt;`TData`, `unknown`\>
+
+The standard schema to parse this field's value with.
+
+#### Returns
+
+`Promise`\&lt;
+  \| [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]
+  \| `undefined`\>
+
+***
+
+### pushValue()
+
+```ts
+pushValue(value, options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1105](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1105)
+
+Pushes a new value to the field.
+
+#### Parameters
+
+##### value
+
+`TData` *extends* `any`[] ? `TData`\&lt;`TData`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### removeValue()
+
+```ts
+removeValue(index, options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1163](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1163)
+
+Removes a value at the specified index.
+
+#### Parameters
+
+##### index
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### replaceValue()
+
+```ts
+replaceValue(
+   index, 
+   value, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1143](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1143)
+
+Replaces a value at the specified index.
+
+#### Parameters
+
+##### index
+
+`number`
+
+##### value
+
+`TData` *extends* `any`[] ? `TData`\&lt;`TData`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### setErrorMap()
+
+```ts
+setErrorMap(errorMap): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1717](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1717)
+
+Updates the field's errorMap
+
+#### Parameters
+
+##### errorMap
+
+`ValidationErrorMap`\&lt;[`UnwrapFieldValidateOrFn`](/form/reference/type-aliases/UnwrapFieldValidateOrFn)\&lt;`TName`, `TOnMount`, `TFormOnMount`\>, [`UnwrapFieldValidateOrFn`](/form/reference/type-aliases/UnwrapFieldValidateOrFn)\&lt;`TName`, `TOnChange`, `TFormOnChange`\>, [`UnwrapFieldAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn)\&lt;`TName`, `TOnChangeAsync`, `TFormOnChangeAsync`\>, [`UnwrapFieldValidateOrFn`](/form/reference/type-aliases/UnwrapFieldValidateOrFn)\&lt;`TName`, `TOnBlur`, `TFormOnBlur`\>, [`UnwrapFieldAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn)\&lt;`TName`, `TOnBlurAsync`, `TFormOnBlurAsync`\>, [`UnwrapFieldValidateOrFn`](/form/reference/type-aliases/UnwrapFieldValidateOrFn)\&lt;`TName`, `TOnSubmit`, `TFormOnSubmit`\>, [`UnwrapFieldAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn)\&lt;`TName`, `TOnSubmitAsync`, `TFormOnSubmitAsync`\>, [`UnwrapFieldValidateOrFn`](/form/reference/type-aliases/UnwrapFieldValidateOrFn)\&lt;`TName`, `TOnDynamic`, `TFormOnDynamic`\>, [`UnwrapFieldAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn)\&lt;`TName`, `TOnDynamicAsync`, `TFormOnDynamicAsync`\>\>
+
+#### Returns
+
+`void`
+
+***
+
+### setMeta()
+
+```ts
+setMeta(updater): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1069](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1069)
+
+Sets the field metadata.
+
+#### Parameters
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`FieldLikeMetaBase`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.setMeta
+```
+
+***
+
+### setValue()
+
+```ts
+setValue(updater, options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1048)
+
+Sets the field value and run the `change` validator.
+
+#### Parameters
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`TData`\>
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.setValue
+```
+
+***
+
+### swapValues()
+
+```ts
+swapValues(
+   aIndex, 
+   bIndex, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1178](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1178)
+
+Swaps the values at the specified indices.
+
+#### Parameters
+
+##### aIndex
+
+`number`
+
+##### bIndex
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+***
+
+### update()
+
+```ts
+update(opts): void;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L990)
+
+Updates the field instance with new options.
+
+#### Parameters
+
+##### opts
+
+[`FieldApiOptions`](/form/reference/interfaces/FieldApiOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### validate()
+
+```ts
+validate(cause, opts?): unknown[] | Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:1577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1577)
+
+Validates the field value.
+
+#### Parameters
+
+##### cause
+
+`ValidationCause`
+
+##### opts?
+
+###### skipFormValidation?
+
+`boolean`
+
+###### skipGroupValidation?
+
+`boolean`
+
+#### Returns
+
+`unknown`[] \| `Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.validate
+```
diff --git a/mintlify/form/reference/classes/FieldGroupApi.md b/mintlify/form/reference/classes/FieldGroupApi.md
new file mode 100644
index 000000000..f7320eac4
--- /dev/null
+++ b/mintlify/form/reference/classes/FieldGroupApi.md
@@ -0,0 +1,866 @@
+---
+id: FieldGroupApi
+title: FieldGroupApi
+---
+
+# Class: FieldGroupApi\&lt;TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:114](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L114)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFields
+
+`TFields` *extends* 
+  \| [`DeepKeysOfType`](/form/reference/type-aliases/DeepKeysOfType)\&lt;`TFormData`, `TFieldGroupData` \| `null` \| `undefined`\>
+  \| [`FieldsMap`](/form/reference/type-aliases/FieldsMap)\&lt;`TFormData`, `TFieldGroupData`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Constructors
+
+### Constructor
+
+```ts
+new FieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(opts): FieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:239](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L239)
+
+Constructs a new `FieldGroupApi` instance with the given form options.
+
+#### Parameters
+
+##### opts
+
+[`FieldGroupOptions`](/form/reference/interfaces/FieldGroupOptions)\&lt;`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`FieldGroupApi`\&lt;`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Properties
+
+### fieldsMap
+
+```ts
+readonly fieldsMap: TFields;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L150)
+
+***
+
+### form
+
+```ts
+readonly form: FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L135)
+
+The form that called this field group.
+
+***
+
+### store
+
+```ts
+store: ReadonlyStore<FieldGroupState<TFieldGroupData>>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:230](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L230)
+
+## Accessors
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): FieldGroupState<TFieldGroupData>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:232](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L232)
+
+##### Returns
+
+[`FieldGroupState`](/form/reference/interfaces/FieldGroupState)\&lt;`TFieldGroupData`\>
+
+## Methods
+
+### clearFieldValues()
+
+```ts
+clearFieldValues<TField>(field, opts?): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:508](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L508)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.clearFieldValues
+```
+
+***
+
+### deleteField()
+
+```ts
+deleteField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:395](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L395)
+
+Delete a field and its subfields.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.deleteField
+```
+
+***
+
+### getFieldMeta()
+
+```ts
+getFieldMeta<TField>(field): AnyFieldLikeMeta | undefined;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L363)
+
+Gets the metadata of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`AnyFieldLikeMeta` \| `undefined`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldMeta
+```
+
+***
+
+### getFieldValue()
+
+```ts
+getFieldValue<TField>(field): DeepValue<TFieldGroupData, TField>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:351](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L351)
+
+Gets the value of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldValue
+```
+
+***
+
+### handleSubmit()
+
+#### Call Signature
+
+```ts
+handleSubmit(): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:341](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L341)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+#### Call Signature
+
+```ts
+handleSubmit(submitMeta): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:342](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L342)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+##### Parameters
+
+###### submitMeta
+
+`TSubmitMeta`
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+***
+
+### insertFieldValue()
+
+```ts
+insertFieldValue<TField>(
+   field, 
+   index, 
+   value, 
+opts?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:420](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L420)
+
+Insert a value into an array field at the specified index.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\>\[`number`\] : `never`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.insertFieldValue
+```
+
+***
+
+### mount()
+
+```ts
+mount(): () => void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:307](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L307)
+
+Mounts the field group instance to listen to value changes.
+
+TODO: Remove
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### moveFieldValues()
+
+```ts
+moveFieldValues<TField>(
+   field, 
+   index1, 
+   index2, 
+   opts?): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:494](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L494)
+
+Moves the value at the first specified index to the second specified index within an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index1
+
+`number`
+
+##### index2
+
+`number`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.moveFieldValues
+```
+
+***
+
+### pushFieldValue()
+
+```ts
+pushFieldValue<TField>(
+   field, 
+   value, 
+   opts?): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L402)
+
+Pushes a value into an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\>\[`number`\] : `never`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.pushFieldValue
+```
+
+***
+
+### removeFieldValue()
+
+```ts
+removeFieldValue<TField>(
+   field, 
+   index, 
+opts?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:464](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L464)
+
+Removes a value from an array field at the specified index.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.removeFieldValue
+```
+
+***
+
+### replaceFieldValue()
+
+```ts
+replaceFieldValue<TField>(
+   field, 
+   index, 
+   value, 
+opts?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:442](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L442)
+
+Replaces a value into an array field at the specified index.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\>\[`number`\] : `never`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.replaceFieldValue
+```
+
+***
+
+### resetField()
+
+```ts
+resetField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:518](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L518)
+
+Resets the field value and meta to default state
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.resetField
+```
+
+***
+
+### setFieldMeta()
+
+```ts
+setFieldMeta<TField>(field, updater): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:370](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L370)
+
+Updates the metadata of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`AnyFieldLikeMetaBase`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldMeta
+```
+
+***
+
+### setFieldValue()
+
+```ts
+setFieldValue<TField>(
+   field, 
+   updater, 
+   opts?): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:380](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L380)
+
+Sets the value of the specified field and optionally updates the touched state.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFieldGroupData`, `TField`\>\>
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldValue
+```
+
+***
+
+### swapFieldValues()
+
+```ts
+swapFieldValues<TField>(
+   field, 
+   index1, 
+   index2, 
+   opts?): void;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:477](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L477)
+
+Swaps the values at the specified indices within an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index1
+
+`number`
+
+##### index2
+
+`number`
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.swapFieldValues
+```
+
+***
+
+### validateAllFields()
+
+```ts
+validateAllFields(cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:522](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L522)
+
+#### Parameters
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateAllFields
+```
+
+***
+
+### validateArrayFieldsStartingFrom()
+
+```ts
+validateArrayFieldsStartingFrom<TField>(
+   field, 
+   index, 
+cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:314](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L314)
+
+Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateArrayFieldsStartingFrom
+```
+
+***
+
+### validateField()
+
+```ts
+validateField<TField>(field, cause): any[] | Promise<any[]>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:331](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L331)
+
+Validates a specified field in the form using the correct handlers for a given validation type.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`any`[] \| `Promise`\&lt;`any`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateField
+```
diff --git a/mintlify/form/reference/classes/FormApi.md b/mintlify/form/reference/classes/FormApi.md
new file mode 100644
index 000000000..2f35dfb92
--- /dev/null
+++ b/mintlify/form/reference/classes/FormApi.md
@@ -0,0 +1,1226 @@
+---
+id: FormApi
+title: FormApi
+---
+
+# Class: FormApi\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormApi.ts:954](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L954)
+
+A class representing the Form API. It handles the logic and interactions with the form state.
+
+Normally, you will not need to create a new `FormApi` instance directly. Instead, you will use a framework
+hook/function like `useForm` or `createForm` to create a new instance for you that uses your framework's reactivity model.
+However, if you need to create a new instance manually, you can do so by calling the `new FormApi` constructor.
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Constructors
+
+### Constructor
+
+```ts
+new FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(opts?): FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1073](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1073)
+
+Constructs a new `FormApi` instance with the given form options.
+
+#### Parameters
+
+##### opts?
+
+[`FormOptions`](/form/reference/interfaces/FormOptions)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`FormApi`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+## Properties
+
+### baseStore
+
+```ts
+baseStore: Store<BaseFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:986](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L986)
+
+***
+
+### fieldInfo
+
+```ts
+fieldInfo: Partial<Record<DeepKeys<TFormData>, FieldInfo<TFormData>>> = {};
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1042](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1042)
+
+A record of field information for each field in the form.
+
+***
+
+### fieldMetaDerived
+
+```ts
+fieldMetaDerived: Store<Partial<Record<DeepKeys<TFormData>, AnyFieldLikeMeta>>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1001](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1001)
+
+***
+
+### formGroupApis
+
+```ts
+formGroupApis: Set<AnyFormGroupApi>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048)
+
+The set of currently-mounted `FormGroupApi` instances belonging to
+this form. Used by `FieldApi.validate` to cascade field-level changes
+into the validators of any group that encompasses the field.
+
+***
+
+### formGroupMetaDerived
+
+```ts
+formGroupMetaDerived: ReadonlyStore<Record<string, AnyFormGroupMeta>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1023](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1023)
+
+A derived store of every mounted `FormGroupApi`'s `meta`, keyed by
+group name. Mirrors `fieldMetaDerived` for fields: per-group `meta`
+is computed once on the form (from `baseStore.formGroupStateBase`,
+`fieldMetaDerived`, and the registered `formGroupApis`) so reads
+from a `FormGroupApi.store` instance stay minimal.
+
+***
+
+### options
+
+```ts
+options: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> = {};
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:971](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L971)
+
+The options for the form.
+
+***
+
+### store
+
+```ts
+store: ReadonlyStore<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1024](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1024)
+
+## Accessors
+
+### formId
+
+#### Get Signature
+
+```ts
+get formId(): string;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1628](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1628)
+
+##### Returns
+
+`string`
+
+***
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1049](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1049)
+
+##### Returns
+
+[`FormState`](/form/reference/interfaces/FormState)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>
+
+## Methods
+
+### \_handleSubmit()
+
+```ts
+_handleSubmit(submitMeta?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2413](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2413)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+#### Parameters
+
+##### submitMeta?
+
+`TSubmitMeta`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### clearFieldValues()
+
+```ts
+clearFieldValues<TField>(field, options?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2889](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2889)
+
+Clear all values within an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.clearFieldValues
+```
+
+***
+
+### deleteField()
+
+```ts
+deleteField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2677](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2677)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.deleteField
+```
+
+***
+
+### getAllErrors()
+
+```ts
+getAllErrors(): object;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:3012](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L3012)
+
+Returns form and field level errors
+
+#### Returns
+
+`object`
+
+##### fields
+
+```ts
+fields: Record<DeepKeys<TFormData>, {
+  errorMap: ValidationErrorMap;
+  errors: ValidationError[];
+}>;
+```
+
+##### form
+
+```ts
+form: object;
+```
+
+###### form.errorMap
+
+```ts
+errorMap: ValidationErrorMap<UnwrapFormValidateOrFn<TOnMount>, UnwrapFormValidateOrFn<TOnChange>, UnwrapFormAsyncValidateOrFn<TOnChangeAsync>, UnwrapFormValidateOrFn<TOnBlur>, UnwrapFormAsyncValidateOrFn<TOnBlurAsync>, UnwrapFormValidateOrFn<TOnSubmit>, UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>, UnwrapFormValidateOrFn<TOnDynamic>, UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>, UnwrapFormAsyncValidateOrFn<TOnServer>>;
+```
+
+###### form.errors
+
+```ts
+errors: NonNullable<
+  | UnwrapFormValidateOrFn<TOnMount>
+  | UnwrapFormValidateOrFn<TOnChange>
+  | UnwrapFormAsyncValidateOrFn<TOnChangeAsync>
+  | UnwrapFormValidateOrFn<TOnBlur>
+  | UnwrapFormAsyncValidateOrFn<TOnBlurAsync>
+  | UnwrapFormValidateOrFn<TOnSubmit>
+  | UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>
+  | UnwrapFormValidateOrFn<TOnDynamic>
+  | UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>
+  | UnwrapFormAsyncValidateOrFn<TOnServer>>[];
+```
+
+***
+
+### getFieldInfo()
+
+```ts
+getFieldInfo<TField>(field): FieldInfo<TFormData>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2581](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2581)
+
+Gets the field info of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`FieldInfo`\&lt;`TFormData`\>
+
+***
+
+### getFieldMeta()
+
+```ts
+getFieldMeta<TField>(field): AnyFieldLikeMeta | undefined;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2563](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2563)
+
+Gets the metadata of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`AnyFieldLikeMeta` \| `undefined`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldMeta
+```
+
+***
+
+### getFieldValue()
+
+```ts
+getFieldValue<TField>(field): DeepValue<TFormData, TField>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2556](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2556)
+
+Gets the value of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldValue
+```
+
+***
+
+### getFormGroupMeta()
+
+```ts
+getFormGroupMeta(name): AnyFormGroupMeta | undefined;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2574](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2574)
+
+Gets the derived `meta` of the form group registered at the given
+name. Mirrors `getFieldMeta` for fields. Returns `undefined` if no
+`FormGroupApi` with that name is currently mounted.
+
+#### Parameters
+
+##### name
+
+`string`
+
+#### Returns
+
+[`AnyFormGroupMeta`](/form/reference/type-aliases/AnyFormGroupMeta) \| `undefined`
+
+***
+
+### handleSubmit()
+
+#### Call Signature
+
+```ts
+handleSubmit(): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2404](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2404)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+#### Call Signature
+
+```ts
+handleSubmit(submitMeta): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2405](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2405)
+
+##### Parameters
+
+###### submitMeta
+
+`TSubmitMeta`
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+***
+
+### insertFieldValue()
+
+```ts
+insertFieldValue<TField>(
+   field, 
+   index, 
+   value, 
+options?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2717](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2717)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.insertFieldValue
+```
+
+***
+
+### mount()
+
+```ts
+mount(): () => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1657](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1657)
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+***
+
+### moveFieldValues()
+
+```ts
+moveFieldValues<TField>(
+   field, 
+   index1, 
+   index2, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2857](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2857)
+
+Moves the value at the first specified index to the second specified index within an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index1
+
+`number`
+
+##### index2
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.moveFieldValues
+```
+
+***
+
+### parseValuesWithSchema()
+
+```ts
+parseValuesWithSchema(schema): 
+  | {
+  fields: Record<string, StandardSchemaV1Issue[]>;
+  form: Record<string, StandardSchemaV1Issue[]>;
+}
+  | undefined;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:3078](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L3078)
+
+Parses the form's values with a given standard schema and returns
+issues (if any). This method does NOT set any internal errors.
+
+#### Parameters
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)\&lt;`TFormData`, `unknown`\>
+
+The standard schema to parse the form values with.
+
+#### Returns
+
+  \| \&#123;
+  `fields`: `Record`\&lt;`string`, [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]\>;
+  `form`: `Record`\&lt;`string`, [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]\>;
+\&#125;
+  \| `undefined`
+
+***
+
+### parseValuesWithSchemaAsync()
+
+```ts
+parseValuesWithSchemaAsync(schema): Promise<
+  | {
+  fields: Record<string, StandardSchemaV1Issue[]>;
+  form: Record<string, StandardSchemaV1Issue[]>;
+}
+| undefined>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:3090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L3090)
+
+Parses the form's values with a given standard schema and returns
+issues (if any). This method does NOT set any internal errors.
+
+#### Parameters
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)\&lt;`TFormData`, `unknown`\>
+
+The standard schema to parse the form values with.
+
+#### Returns
+
+`Promise`\&lt;
+  \| \&#123;
+  `fields`: `Record`\&lt;`string`, [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]\>;
+  `form`: `Record`\&lt;`string`, [`StandardSchemaV1Issue`](/form/reference/interfaces/StandardSchemaV1Issue)[]\>;
+\&#125;
+  \| `undefined`\>
+
+***
+
+### pushFieldValue()
+
+```ts
+pushFieldValue<TField>(
+   field, 
+   value, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2701](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2701)
+
+Pushes a value into an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.pushFieldValue
+```
+
+***
+
+### removeFieldValue()
+
+```ts
+removeFieldValue<TField>(
+   field, 
+   index, 
+options?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2785](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2785)
+
+Removes a value from an array field at the specified index.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.removeFieldValue
+```
+
+***
+
+### replaceFieldValue()
+
+```ts
+replaceFieldValue<TField>(
+   field, 
+   index, 
+   value, 
+options?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2754](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2754)
+
+Replaces a value into an array field at the specified index.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\> *extends* `any`[] ? `any`[] & [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\>\[`number`\] : `never`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.replaceFieldValue
+```
+
+***
+
+### reset()
+
+```ts
+reset(values?, opts?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1809](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1809)
+
+Resets the form state to the default values.
+If values are provided, the form will be reset to those values instead and the default values will be updated.
+
+#### Parameters
+
+##### values?
+
+`TFormData`
+
+Optional values to reset the form to.
+
+##### opts?
+
+Optional options to control the reset behavior.
+
+###### keepDefaultValues?
+
+`boolean`
+
+#### Returns
+
+`void`
+
+***
+
+### resetField()
+
+```ts
+resetField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2924](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2924)
+
+Resets the field value and meta to default state
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.resetField
+```
+
+***
+
+### resetFieldMeta()
+
+```ts
+resetFieldMeta<TField>(fieldMeta): Partial<Record<TField, AnyFieldLikeMeta>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2621](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2621)
+
+resets every field's meta
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### fieldMeta
+
+`Partial`\&lt;`Record`\&lt;`TField`, `AnyFieldLikeMeta`\>\>
+
+#### Returns
+
+`Partial`\&lt;`Record`\&lt;`TField`, `AnyFieldLikeMeta`\>\>
+
+***
+
+### setErrorMap()
+
+```ts
+setErrorMap(errorMap): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2948](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2948)
+
+Updates the form's errorMap
+
+#### Parameters
+
+##### errorMap
+
+`FormValidationErrorMap`\&lt;`TFormData`, [`UnwrapFormValidateOrFn`](/form/reference/type-aliases/UnwrapFormValidateOrFn)\&lt;`TOnMount`\>, [`UnwrapFormValidateOrFn`](/form/reference/type-aliases/UnwrapFormValidateOrFn)\&lt;`TOnChange`\>, [`UnwrapFormAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)\&lt;`TOnChangeAsync`\>, [`UnwrapFormValidateOrFn`](/form/reference/type-aliases/UnwrapFormValidateOrFn)\&lt;`TOnBlur`\>, [`UnwrapFormAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)\&lt;`TOnBlurAsync`\>, [`UnwrapFormValidateOrFn`](/form/reference/type-aliases/UnwrapFormValidateOrFn)\&lt;`TOnSubmit`\>, [`UnwrapFormAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)\&lt;`TOnSubmitAsync`\>, [`UnwrapFormValidateOrFn`](/form/reference/type-aliases/UnwrapFormValidateOrFn)\&lt;`TOnDynamic`\>, [`UnwrapFormAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)\&lt;`TOnDynamicAsync`\>, [`UnwrapFormAsyncValidateOrFn`](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)\&lt;`TOnServer`\>\>
+
+#### Returns
+
+`void`
+
+***
+
+### setFieldMeta()
+
+```ts
+setFieldMeta<TField>(field, updater): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2600](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2600)
+
+Updates the metadata of the specified field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`AnyFieldLikeMetaBase`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldMeta
+```
+
+***
+
+### setFieldValue()
+
+```ts
+setFieldValue<TField>(
+   field, 
+   updater, 
+   opts?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2637](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2637)
+
+Sets the value of the specified field and optionally updates the touched state.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TFormData`, `TField`\>\>
+
+##### opts?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldValue
+```
+
+***
+
+### swapFieldValues()
+
+```ts
+swapFieldValues<TField>(
+   field, 
+   index1, 
+   index2, 
+   options?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:2825](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2825)
+
+Swaps the values at the specified indices within an array field.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index1
+
+`number`
+
+##### index2
+
+`number`
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.swapFieldValues
+```
+
+***
+
+### update()
+
+```ts
+update(options?): void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1731](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1731)
+
+Updates the form options and form state.
+
+#### Parameters
+
+##### options?
+
+[`FormOptions`](/form/reference/interfaces/FormOptions)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### validateAllFields()
+
+```ts
+validateAllFields(cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1855](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1855)
+
+Validates all fields according to the FIELD level validators.
+This will ignore FORM level validators, use form.validate(&#123;ValidationCause&#125;) for a complete validation
+
+#### Parameters
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateAllFields
+```
+
+***
+
+### validateArrayFieldsStartingFrom()
+
+```ts
+validateArrayFieldsStartingFrom<TField>(
+   field, 
+   index, 
+cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1891](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1891)
+
+Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateArrayFieldsStartingFrom
+```
+
+***
+
+### validateField()
+
+```ts
+validateField<TField>(field, cause): any[] | Promise<any[]>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:1932](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1932)
+
+Validates a specified field in the form using the correct handlers for a given validation type.
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`any`[] \| `Promise`\&lt;`any`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateField
+```
diff --git a/mintlify/form/reference/classes/FormGroupApi.md b/mintlify/form/reference/classes/FormGroupApi.md
new file mode 100644
index 000000000..f4dedbd92
--- /dev/null
+++ b/mintlify/form/reference/classes/FormGroupApi.md
@@ -0,0 +1,1108 @@
+---
+id: FormGroupApi
+title: FormGroupApi
+---
+
+# Class: FormGroupApi\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:970](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L970)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Constructors
+
+### Constructor
+
+```ts
+new FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>(opts): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1217](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1217)
+
+#### Parameters
+
+##### opts
+
+[`FormGroupApiOptions`](/form/reference/interfaces/FormGroupApiOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+#### Returns
+
+`FormGroupApi`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Properties
+
+### form
+
+```ts
+form: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1079](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1079)
+
+A reference to the form API instance.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.form
+```
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1108)
+
+The field name.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.name
+```
+
+***
+
+### options
+
+```ts
+options: FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1112](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1112)
+
+The field options.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.options
+```
+
+***
+
+### store
+
+```ts
+store: ReadonlyStore<FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1141](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1141)
+
+The field state store.
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.store
+```
+
+***
+
+### timeoutIds
+
+```ts
+timeoutIds: object;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1199](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1199)
+
+#### formListeners
+
+```ts
+formListeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
+```
+
+#### listeners
+
+```ts
+listeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
+```
+
+#### validations
+
+```ts
+validations: Record<ValidationCause, ReturnType<typeof setTimeout> | null>;
+```
+
+## Accessors
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1169](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1169)
+
+The current field state.
+
+##### Returns
+
+[`FormGroupStoreState`](/form/reference/interfaces/FormGroupStoreState)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>
+
+## Methods
+
+### \_handleSubmit()
+
+```ts
+_handleSubmit(submitMeta?): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2404](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2404)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+#### Parameters
+
+##### submitMeta?
+
+`TSubmitMeta`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### areRelatedFieldsValid()
+
+```ts
+areRelatedFieldsValid(): boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2293](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2293)
+
+#### Returns
+
+`boolean`
+
+***
+
+### clearFieldValues()
+
+```ts
+clearFieldValues<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2274](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2274)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.clearFieldValues
+```
+
+***
+
+### deleteField()
+
+```ts
+deleteField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2229)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.deleteField
+```
+
+***
+
+### getFieldMeta()
+
+```ts
+getFieldMeta<TField>(field): AnyFieldLikeMeta | undefined;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2209](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2209)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`AnyFieldLikeMeta` \| `undefined`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldMeta
+```
+
+***
+
+### getFieldValue()
+
+```ts
+getFieldValue<TField>(field): DeepValue<TParentData, TField>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2203](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2203)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+[`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TField`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.getFieldValue
+```
+
+***
+
+### getInfo()
+
+```ts
+getInfo(): FieldInfo<TParentData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1636](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1636)
+
+Gets the field information object.
+
+#### Returns
+
+`FieldInfo`\&lt;`TParentData`\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.getInfo
+```
+
+***
+
+### getMeta()
+
+```ts
+getMeta(): FormGroupMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1600](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1600)
+
+#### Returns
+
+[`FormGroupMeta`](/form/reference/interfaces/FormGroupMeta)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.getMeta
+```
+
+***
+
+### handleSubmit()
+
+#### Call Signature
+
+```ts
+handleSubmit(): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2395](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2395)
+
+Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+#### Call Signature
+
+```ts
+handleSubmit(submitMeta): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2396](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2396)
+
+##### Parameters
+
+###### submitMeta
+
+`TSubmitMeta`
+
+##### Returns
+
+`Promise`\&lt;`void`\>
+
+##### Implementation of
+
+```ts
+FormLikeAPI.handleSubmit
+```
+
+***
+
+### insertFieldValue()
+
+```ts
+insertFieldValue<TField>(
+   field, 
+   index, 
+value): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2242](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2242)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.insertFieldValue
+```
+
+***
+
+### mount()
+
+```ts
+mount(): () => void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1447](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1447)
+
+#### Returns
+
+```ts
+(): void;
+```
+
+##### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.mount
+```
+
+***
+
+### moveFieldValues()
+
+```ts
+moveFieldValues<TField>(
+   field, 
+   fromIndex, 
+   toIndex): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2266](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2266)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### fromIndex
+
+`number`
+
+##### toIndex
+
+`number`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.moveFieldValues
+```
+
+***
+
+### pushFieldValue()
+
+```ts
+pushFieldValue<TField>(field, value): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2235](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2235)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### value
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.pushFieldValue
+```
+
+***
+
+### removeFieldValue()
+
+```ts
+removeFieldValue<TField>(field, index): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2286](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2286)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.removeFieldValue
+```
+
+***
+
+### replaceFieldValue()
+
+```ts
+replaceFieldValue<TField>(
+   field, 
+   index, 
+value): Promise<void>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2250)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### value
+
+`any`
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.replaceFieldValue
+```
+
+***
+
+### resetField()
+
+```ts
+resetField<TField>(field): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2280](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2280)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.resetField
+```
+
+***
+
+### setFieldMeta()
+
+```ts
+setFieldMeta<TField>(field, updater): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2215](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2215)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`AnyFieldLikeMetaBase`\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldMeta
+```
+
+***
+
+### setFieldValue()
+
+```ts
+setFieldValue<TField>(field, value): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2222](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2222)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### value
+
+`any`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.setFieldValue
+```
+
+***
+
+### setMeta()
+
+```ts
+setMeta(updater): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1605](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1605)
+
+Sets the field metadata.
+
+#### Parameters
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`FieldLikeMetaBase`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`\>\>
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.setMeta
+```
+
+***
+
+### setValue()
+
+```ts
+setValue(updater, options?): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1584](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1584)
+
+Sets the field value and run the `change` validator.
+
+#### Parameters
+
+##### updater
+
+[`Updater`](/form/reference/type-aliases/Updater)\&lt;`TData`\>
+
+##### options?
+
+`UpdateMetaOptions`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.setValue
+```
+
+***
+
+### swapFieldValues()
+
+```ts
+swapFieldValues<TField>(
+   field, 
+   index1, 
+   index2): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2258](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2258)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index1
+
+`number`
+
+##### index2
+
+`number`
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+FormLikeAPI.swapFieldValues
+```
+
+***
+
+### update()
+
+```ts
+update(opts): void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:1356](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L1356)
+
+Updates the field instance with new options.
+
+#### Parameters
+
+##### opts
+
+[`FormGroupApiOptions`](/form/reference/interfaces/FormGroupApiOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### validate()
+
+```ts
+validate(cause, opts?): unknown[] | Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2302](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2302)
+
+Validates the form group and all related children.
+
+#### Parameters
+
+##### cause
+
+`ValidationCause`
+
+##### opts?
+
+###### skipFormValidation?
+
+`boolean`
+
+###### skipRelatedFieldValidation?
+
+`boolean`
+
+#### Returns
+
+`unknown`[] \| `Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FieldLikeAPI.validate
+```
+
+***
+
+### validateAllFields()
+
+```ts
+validateAllFields(cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2158](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2158)
+
+Validates all fields according to the FIELD level validators.
+This will ignore FORM level validators, use form.validate(&#123;ValidationCause&#125;) for a complete validation
+
+#### Parameters
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateAllFields
+```
+
+***
+
+### validateArrayFieldsStartingFrom()
+
+```ts
+validateArrayFieldsStartingFrom<TField>(
+   field, 
+   index, 
+cause): Promise<unknown[]>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2186](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2186)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### index
+
+`number`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`Promise`\&lt;`unknown`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateArrayFieldsStartingFrom
+```
+
+***
+
+### validateField()
+
+```ts
+validateField<TField>(field, cause): any[] | Promise<any[]>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:2196](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L2196)
+
+#### Type Parameters
+
+##### TField
+
+`TField` *extends* `string`
+
+#### Parameters
+
+##### field
+
+`TField`
+
+##### cause
+
+`ValidationCause`
+
+#### Returns
+
+`any`[] \| `Promise`\&lt;`any`[]\>
+
+#### Implementation of
+
+```ts
+FormLikeAPI.validateField
+```
diff --git a/mintlify/form/reference/functions/createFieldMap.md b/mintlify/form/reference/functions/createFieldMap.md
new file mode 100644
index 000000000..4cdf923b3
--- /dev/null
+++ b/mintlify/form/reference/functions/createFieldMap.md
@@ -0,0 +1,28 @@
+---
+id: createFieldMap
+title: createFieldMap
+---
+
+# Function: createFieldMap()
+
+```ts
+function createFieldMap<T>(values): { [K in string | number | symbol]: K };
+```
+
+Defined in: [packages/form-core/src/utils.ts:614](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L614)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### values
+
+`Readonly`\&lt;`T`\>
+
+## Returns
+
+\&#123; \[K in string \| number \| symbol\]: K \&#125;
diff --git a/mintlify/form/reference/functions/deepCopy.md b/mintlify/form/reference/functions/deepCopy.md
new file mode 100644
index 000000000..5db26fbab
--- /dev/null
+++ b/mintlify/form/reference/functions/deepCopy.md
@@ -0,0 +1,28 @@
+---
+id: deepCopy
+title: deepCopy
+---
+
+# Function: deepCopy()
+
+```ts
+function deepCopy<T>(obj): T;
+```
+
+Defined in: [packages/form-core/src/utils.ts:694](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L694)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### obj
+
+`T`
+
+## Returns
+
+`T`
diff --git a/mintlify/form/reference/functions/evaluate.md b/mintlify/form/reference/functions/evaluate.md
new file mode 100644
index 000000000..f73d9942b
--- /dev/null
+++ b/mintlify/form/reference/functions/evaluate.md
@@ -0,0 +1,32 @@
+---
+id: evaluate
+title: evaluate
+---
+
+# Function: evaluate()
+
+```ts
+function evaluate<T>(objA, objB): boolean;
+```
+
+Defined in: [packages/form-core/src/utils.ts:483](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L483)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### objA
+
+`T`
+
+### objB
+
+`T`
+
+## Returns
+
+`boolean`
diff --git a/mintlify/form/reference/functions/formOptions.md b/mintlify/form/reference/functions/formOptions.md
new file mode 100644
index 000000000..fddfdb485
--- /dev/null
+++ b/mintlify/form/reference/functions/formOptions.md
@@ -0,0 +1,76 @@
+---
+id: formOptions
+title: formOptions
+---
+
+# Function: formOptions()
+
+```ts
+function formOptions<TOptions, TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(defaultOpts): TOptions;
+```
+
+Defined in: [packages/form-core/src/formOptions.ts:23](https://github.com/TanStack/form/blob/main/packages/form-core/src/formOptions.ts#L23)
+
+## Type Parameters
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`FormOptions`](/form/reference/interfaces/FormOptions)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>\>
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Parameters
+
+### defaultOpts
+
+`Partial`\&lt;[`FormOptions`](/form/reference/interfaces/FormOptions)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>\> & `TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/form/reference/functions/isGlobalFormValidationError.md b/mintlify/form/reference/functions/isGlobalFormValidationError.md
new file mode 100644
index 000000000..ad773760e
--- /dev/null
+++ b/mintlify/form/reference/functions/isGlobalFormValidationError.md
@@ -0,0 +1,22 @@
+---
+id: isGlobalFormValidationError
+title: isGlobalFormValidationError
+---
+
+# Function: isGlobalFormValidationError()
+
+```ts
+function isGlobalFormValidationError(error): error is GlobalFormValidationError<unknown>;
+```
+
+Defined in: [packages/form-core/src/utils.ts:477](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L477)
+
+## Parameters
+
+### error
+
+`unknown`
+
+## Returns
+
+`error is GlobalFormValidationError<unknown>`
diff --git a/mintlify/form/reference/functions/isStandardSchemaValidator.md b/mintlify/form/reference/functions/isStandardSchemaValidator.md
new file mode 100644
index 000000000..cb8ad4c99
--- /dev/null
+++ b/mintlify/form/reference/functions/isStandardSchemaValidator.md
@@ -0,0 +1,22 @@
+---
+id: isStandardSchemaValidator
+title: isStandardSchemaValidator
+---
+
+# Function: isStandardSchemaValidator()
+
+```ts
+function isStandardSchemaValidator(validator): validator is StandardSchemaV1<unknown, unknown>;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:112](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L112)
+
+## Parameters
+
+### validator
+
+`unknown`
+
+## Returns
+
+`validator is StandardSchemaV1<unknown, unknown>`
diff --git a/mintlify/form/reference/functions/mergeForm.md b/mintlify/form/reference/functions/mergeForm.md
new file mode 100644
index 000000000..c73d90f7c
--- /dev/null
+++ b/mintlify/form/reference/functions/mergeForm.md
@@ -0,0 +1,76 @@
+---
+id: mergeForm
+title: mergeForm
+---
+
+# Function: mergeForm()
+
+```ts
+function mergeForm<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>(baseForm, state): FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/mergeForm.ts:77](https://github.com/TanStack/form/blob/main/packages/form-core/src/mergeForm.ts#L77)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChange
+
+`TOnChange` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlur
+
+`TOnBlur` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `FormValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TOnServer
+
+`TOnServer` *extends* `FormAsyncValidateOrFn`\&lt;`TFormData`\> \| `undefined`
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Parameters
+
+### baseForm
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+### state
+
+`Partial`\&lt;[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>\[`"state"`\]\>
+
+## Returns
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
diff --git a/mintlify/form/reference/functions/revalidateLogic.md b/mintlify/form/reference/functions/revalidateLogic.md
new file mode 100644
index 000000000..575fb03d5
--- /dev/null
+++ b/mintlify/form/reference/functions/revalidateLogic.md
@@ -0,0 +1,30 @@
+---
+id: revalidateLogic
+title: revalidateLogic
+---
+
+# Function: revalidateLogic()
+
+```ts
+function revalidateLogic(__namedParameters): ValidationLogicFn;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:75](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L75)
+
+This forces a form's validation logic to be ran as if it were a React Hook Form validation logic.
+
+This means that it will only run the `onDynamic` validator, and it will not run any other validators and changes the validation
+type based on the state of the form itself.
+
+When the form is not yet submitted, it will not run the validation logic.
+When the form is submitted, it will run the validation logic on `change`
+
+## Parameters
+
+### \_\_namedParameters
+
+`RevalidateLogicProps` = `{}`
+
+## Returns
+
+[`ValidationLogicFn`](/form/reference/type-aliases/ValidationLogicFn)
diff --git a/mintlify/form/reference/functions/uuid.md b/mintlify/form/reference/functions/uuid.md
new file mode 100644
index 000000000..ae0a34de7
--- /dev/null
+++ b/mintlify/form/reference/functions/uuid.md
@@ -0,0 +1,16 @@
+---
+id: uuid
+title: uuid
+---
+
+# Function: uuid()
+
+```ts
+function uuid(): string;
+```
+
+Defined in: [packages/form-core/src/utils.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L653)
+
+## Returns
+
+`string`
diff --git a/mintlify/form/reference/index.md b/mintlify/form/reference/index.md
new file mode 100644
index 000000000..45eb5a2be
--- /dev/null
+++ b/mintlify/form/reference/index.md
@@ -0,0 +1,116 @@
+---
+id: "@tanstack/form-core"
+title: "@tanstack/form-core"
+---
+
+# @tanstack/form-core
+
+## Classes
+
+- [FieldApi](/form/reference/classes/FieldApi)
+- [FieldGroupApi](/form/reference/classes/FieldGroupApi)
+- [FormApi](/form/reference/classes/FormApi)
+- [FormGroupApi](/form/reference/classes/FormGroupApi)
+
+## Interfaces
+
+- [AnyDeepKeyAndValue](/form/reference/interfaces/AnyDeepKeyAndValue)
+- [ArrayDeepKeyAndValue](/form/reference/interfaces/ArrayDeepKeyAndValue)
+- [BaseFormOptions](/form/reference/interfaces/BaseFormOptions)
+- [FieldApiOptions](/form/reference/interfaces/FieldApiOptions)
+- [FieldGroupOptions](/form/reference/interfaces/FieldGroupOptions)
+- [FieldGroupState](/form/reference/interfaces/FieldGroupState)
+- [FieldListeners](/form/reference/interfaces/FieldListeners)
+- [FieldOptions](/form/reference/interfaces/FieldOptions)
+- [FieldValidators](/form/reference/interfaces/FieldValidators)
+- [FormGroupApiOptions](/form/reference/interfaces/FormGroupApiOptions)
+- [FormGroupListeners](/form/reference/interfaces/FormGroupListeners)
+- [FormGroupMeta](/form/reference/interfaces/FormGroupMeta)
+- [FormGroupOptions](/form/reference/interfaces/FormGroupOptions)
+- [FormGroupState](/form/reference/interfaces/FormGroupState)
+- [FormGroupStoreState](/form/reference/interfaces/FormGroupStoreState)
+- [FormGroupValidators](/form/reference/interfaces/FormGroupValidators)
+- [FormListeners](/form/reference/interfaces/FormListeners)
+- [FormOptions](/form/reference/interfaces/FormOptions)
+- [FormState](/form/reference/interfaces/FormState)
+- [FormValidators](/form/reference/interfaces/FormValidators)
+- [ObjectDeepKeyAndValue](/form/reference/interfaces/ObjectDeepKeyAndValue)
+- [StandardSchemaV1Issue](/form/reference/interfaces/StandardSchemaV1Issue)
+- [TupleDeepKeyAndValue](/form/reference/interfaces/TupleDeepKeyAndValue)
+- [UnknownDeepKeyAndValue](/form/reference/interfaces/UnknownDeepKeyAndValue)
+- [ValidationLogicProps](/form/reference/interfaces/ValidationLogicProps)
+- [ValidationLogicValidatorsFn](/form/reference/interfaces/ValidationLogicValidatorsFn)
+
+## Type Aliases
+
+- [AllObjectKeys](/form/reference/type-aliases/AllObjectKeys)
+- [AllTupleKeys](/form/reference/type-aliases/AllTupleKeys)
+- [AnyBaseFormState](/form/reference/type-aliases/AnyBaseFormState)
+- [AnyFieldApi](/form/reference/type-aliases/AnyFieldApi)
+- [AnyFieldGroupApi](/form/reference/type-aliases/AnyFieldGroupApi)
+- [AnyFieldMeta](/form/reference/type-aliases/AnyFieldMeta)
+- [AnyFormApi](/form/reference/type-aliases/AnyFormApi)
+- [AnyFormGroupApi](/form/reference/type-aliases/AnyFormGroupApi)
+- [AnyFormGroupMeta](/form/reference/type-aliases/AnyFormGroupMeta)
+- [AnyFormOptions](/form/reference/type-aliases/AnyFormOptions)
+- [AnyFormState](/form/reference/type-aliases/AnyFormState)
+- [ArrayAccessor](/form/reference/type-aliases/ArrayAccessor)
+- [BaseFormState](/form/reference/type-aliases/BaseFormState)
+- [BroadcastFormApi](/form/reference/type-aliases/BroadcastFormApi)
+- [BroadcastFormId](/form/reference/type-aliases/BroadcastFormId)
+- [BroadcastFormState](/form/reference/type-aliases/BroadcastFormState)
+- [BroadcastFormSubmissionState](/form/reference/type-aliases/BroadcastFormSubmissionState)
+- [DeepKeyAndValueArray](/form/reference/type-aliases/DeepKeyAndValueArray)
+- [DeepKeyAndValueObject](/form/reference/type-aliases/DeepKeyAndValueObject)
+- [DeepKeyAndValueTuple](/form/reference/type-aliases/DeepKeyAndValueTuple)
+- [DeepKeys](/form/reference/type-aliases/DeepKeys)
+- [DeepKeysAndValues](/form/reference/type-aliases/DeepKeysAndValues)
+- [DeepKeysAndValuesImpl](/form/reference/type-aliases/DeepKeysAndValuesImpl)
+- [DeepKeysOfType](/form/reference/type-aliases/DeepKeysOfType)
+- [DeepRecord](/form/reference/type-aliases/DeepRecord)
+- [DeepValue](/form/reference/type-aliases/DeepValue)
+- [DerivedFormState](/form/reference/type-aliases/DerivedFormState)
+- [EventClientEventMap](/form/reference/type-aliases/EventClientEventMap)
+- [EventClientEventNames](/form/reference/type-aliases/EventClientEventNames)
+- [ExtractGlobalFormError](/form/reference/type-aliases/ExtractGlobalFormError)
+- [FieldsMap](/form/reference/type-aliases/FieldsMap)
+- [FormValidateFn](/form/reference/type-aliases/FormValidateFn)
+- [FormValidationError](/form/reference/type-aliases/FormValidationError)
+- [FormValidator](/form/reference/type-aliases/FormValidator)
+- [Nullable](/form/reference/type-aliases/Nullable)
+- [ObjectAccessor](/form/reference/type-aliases/ObjectAccessor)
+- [ObjectValue](/form/reference/type-aliases/ObjectValue)
+- [StandardSchemaV1](/form/reference/type-aliases/StandardSchemaV1)
+- [TStandardSchemaValidatorIssue](/form/reference/type-aliases/TStandardSchemaValidatorIssue)
+- [TStandardSchemaValidatorValue](/form/reference/type-aliases/TStandardSchemaValidatorValue)
+- [TupleAccessor](/form/reference/type-aliases/TupleAccessor)
+- [UnknownAccessor](/form/reference/type-aliases/UnknownAccessor)
+- [UnwrapFieldAsyncValidateOrFn](/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn)
+- [UnwrapFieldValidateOrFn](/form/reference/type-aliases/UnwrapFieldValidateOrFn)
+- [UnwrapFormAsyncValidateOrFn](/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn)
+- [UnwrapFormValidateOrFn](/form/reference/type-aliases/UnwrapFormValidateOrFn)
+- [Updater](/form/reference/type-aliases/Updater)
+- [UpdaterFn](/form/reference/type-aliases/UpdaterFn)
+- [ValidationError](/form/reference/type-aliases/ValidationError)
+- [ValidationLogicFn](/form/reference/type-aliases/ValidationLogicFn)
+- [ValidationMeta](/form/reference/type-aliases/ValidationMeta)
+- [ValidationSource](/form/reference/type-aliases/ValidationSource)
+
+## Variables
+
+- [defaultValidationLogic](/form/reference/variables/defaultValidationLogic)
+- [formEventClient](/form/reference/variables/formEventClient)
+- [standardSchemaValidators](/form/reference/variables/standardSchemaValidators)
+- [throttleFormState](/form/reference/variables/throttleFormState)
+
+## Functions
+
+- [createFieldMap](/form/reference/functions/createFieldMap)
+- [deepCopy](/form/reference/functions/deepCopy)
+- [evaluate](/form/reference/functions/evaluate)
+- [formOptions](/form/reference/functions/formOptions)
+- [isGlobalFormValidationError](/form/reference/functions/isGlobalFormValidationError)
+- [isStandardSchemaValidator](/form/reference/functions/isStandardSchemaValidator)
+- [mergeForm](/form/reference/functions/mergeForm)
+- [revalidateLogic](/form/reference/functions/revalidateLogic)
+- [uuid](/form/reference/functions/uuid)
diff --git a/mintlify/form/reference/interfaces/AnyDeepKeyAndValue.md b/mintlify/form/reference/interfaces/AnyDeepKeyAndValue.md
new file mode 100644
index 000000000..83008a187
--- /dev/null
+++ b/mintlify/form/reference/interfaces/AnyDeepKeyAndValue.md
@@ -0,0 +1,45 @@
+---
+id: AnyDeepKeyAndValue
+title: AnyDeepKeyAndValue
+---
+
+# Interface: AnyDeepKeyAndValue\&lt;K, V\>
+
+Defined in: [packages/form-core/src/util-types.ts:39](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L39)
+
+## Extended by
+
+- [`ArrayDeepKeyAndValue`](/form/reference/interfaces/ArrayDeepKeyAndValue)
+- [`TupleDeepKeyAndValue`](/form/reference/interfaces/TupleDeepKeyAndValue)
+- [`ObjectDeepKeyAndValue`](/form/reference/interfaces/ObjectDeepKeyAndValue)
+- [`UnknownDeepKeyAndValue`](/form/reference/interfaces/UnknownDeepKeyAndValue)
+
+## Type Parameters
+
+### K
+
+`K` *extends* `string` = `string`
+
+### V
+
+`V` *extends* `any` = `any`
+
+## Properties
+
+### key
+
+```ts
+key: K;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:43](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L43)
+
+***
+
+### value
+
+```ts
+value: V;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:44](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L44)
diff --git a/mintlify/form/reference/interfaces/ArrayDeepKeyAndValue.md b/mintlify/form/reference/interfaces/ArrayDeepKeyAndValue.md
new file mode 100644
index 000000000..e6192149a
--- /dev/null
+++ b/mintlify/form/reference/interfaces/ArrayDeepKeyAndValue.md
@@ -0,0 +1,52 @@
+---
+id: ArrayDeepKeyAndValue
+title: ArrayDeepKeyAndValue
+---
+
+# Interface: ArrayDeepKeyAndValue\&lt;TParent, T\>
+
+Defined in: [packages/form-core/src/util-types.ts:50](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L50)
+
+## Extends
+
+- [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T` *extends* `ReadonlyArray`\&lt;`any`\>
+
+## Properties
+
+### key
+
+```ts
+key: `${TParent["key"] extends never ? "" : TParent["key"]}[${number}]`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:54](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L54)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`key`](/form/reference/interfaces/AnyDeepKeyAndValue#key)
+
+***
+
+### value
+
+```ts
+value: 
+  | T[number]
+| Nullable<TParent["value"]>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:55](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L55)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`value`](/form/reference/interfaces/AnyDeepKeyAndValue#value)
diff --git a/mintlify/form/reference/interfaces/BaseFormOptions.md b/mintlify/form/reference/interfaces/BaseFormOptions.md
new file mode 100644
index 000000000..5b1593717
--- /dev/null
+++ b/mintlify/form/reference/interfaces/BaseFormOptions.md
@@ -0,0 +1,48 @@
+---
+id: BaseFormOptions
+title: BaseFormOptions
+---
+
+# Interface: BaseFormOptions\&lt;TFormData, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormApi.ts:436](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L436)
+
+An object representing the base properties of a form, unrelated to any validators
+
+## Extended by
+
+- [`FormOptions`](/form/reference/interfaces/FormOptions)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Properties
+
+### defaultValues?
+
+```ts
+optional defaultValues: TFormData;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:440](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L440)
+
+Set initial values for your form.
+
+***
+
+### onSubmitMeta?
+
+```ts
+optional onSubmitMeta: TSubmitMeta;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:444](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L444)
+
+onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props
diff --git a/mintlify/form/reference/interfaces/FieldApiOptions.md b/mintlify/form/reference/interfaces/FieldApiOptions.md
new file mode 100644
index 000000000..35eaa702d
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldApiOptions.md
@@ -0,0 +1,266 @@
+---
+id: FieldApiOptions
+title: FieldApiOptions
+---
+
+# Interface: FieldApiOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/form-core/src/FieldApi.ts:383](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L383)
+
+## Extends
+
+- `FieldExtraOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Properties
+
+### asyncAlways?
+
+```ts
+optional asyncAlways: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:972](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L972)
+
+If `true`, always run async validation, even if there are errors emitted during synchronous validation.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.asyncAlways
+```
+
+***
+
+### asyncDebounceMs?
+
+```ts
+optional asyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/types.ts:968](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L968)
+
+The default time to debounce async validation if there is not a more specific debounce time passed.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.asyncDebounceMs
+```
+
+***
+
+### defaultMeta?
+
+```ts
+optional defaultMeta: Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [packages/form-core/src/types.ts:976](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L976)
+
+An optional object with default metadata for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.defaultMeta
+```
+
+***
+
+### defaultValue?
+
+```ts
+optional defaultValue: NoInfer<TData>;
+```
+
+Defined in: [packages/form-core/src/types.ts:964](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L964)
+
+An optional default value for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.defaultValue
+```
+
+***
+
+### disableErrorFlat?
+
+```ts
+optional disableErrorFlat: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L1004)
+
+Disable the `flat(1)` operation on `field.errors`. This is useful if you want to keep the error structure as is. Not suggested for most use-cases.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.disableErrorFlat
+```
+
+***
+
+### form
+
+```ts
+form: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/types.ts:1084](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L1084)
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.form
+```
+
+***
+
+### listeners?
+
+```ts
+optional listeners: FieldListeners<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:325](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L325)
+
+A list of listeners which attach to the corresponding events
+
+#### Inherited from
+
+```ts
+FieldExtraOptions.listeners
+```
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/types.ts:960](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L960)
+
+The field name. The type will be `DeepKeys<TParentData>` to ensure your name is a deep key of the parent dataset.
+
+#### Inherited from
+
+```ts
+FieldLikeApiOptions.name
+```
+
+***
+
+### validators?
+
+```ts
+optional validators: FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:307](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L307)
+
+A list of validators to pass to the field
+
+#### Inherited from
+
+```ts
+FieldExtraOptions.validators
+```
diff --git a/mintlify/form/reference/interfaces/FieldGroupOptions.md b/mintlify/form/reference/interfaces/FieldGroupOptions.md
new file mode 100644
index 000000000..4d433d464
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldGroupOptions.md
@@ -0,0 +1,118 @@
+---
+id: FieldGroupOptions
+title: FieldGroupOptions
+---
+
+# Interface: FieldGroupOptions\&lt;TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:51](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L51)
+
+An object representing the options for a field group.
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+### TFields
+
+`TFields` *extends* 
+  \| [`DeepKeysOfType`](/form/reference/type-aliases/DeepKeysOfType)\&lt;`TFormData`, `TFieldGroupData` \| `null` \| `undefined`\>
+  \| [`FieldsMap`](/form/reference/type-aliases/FieldsMap)\&lt;`TFormData`, `TFieldGroupData`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Properties
+
+### defaultValues?
+
+```ts
+optional defaultValues: TFieldGroupData;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:107](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L107)
+
+The expected subsetValues that the form must provide.
+
+***
+
+### fields
+
+```ts
+fields: TFields;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:103](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L103)
+
+The path to the field group data.
+
+***
+
+### form
+
+```ts
+form: 
+  | FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>
+| FieldGroupApi<any, TFormData, any, any, any, any, any, any, any, any, any, any, any, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:69](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L69)
+
+***
+
+### onSubmitMeta?
+
+```ts
+optional onSubmitMeta: TSubmitMeta;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:111](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L111)
+
+onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props
diff --git a/mintlify/form/reference/interfaces/FieldGroupState.md b/mintlify/form/reference/interfaces/FieldGroupState.md
new file mode 100644
index 000000000..8a32a47f9
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldGroupState.md
@@ -0,0 +1,26 @@
+---
+id: FieldGroupState
+title: FieldGroupState
+---
+
+# Interface: FieldGroupState\&lt;TFieldGroupData\>
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:41](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L41)
+
+## Type Parameters
+
+### TFieldGroupData
+
+`TFieldGroupData`
+
+## Properties
+
+### values
+
+```ts
+values: TFieldGroupData;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:45](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L45)
+
+The current values of the field group
diff --git a/mintlify/form/reference/interfaces/FieldListeners.md b/mintlify/form/reference/interfaces/FieldListeners.md
new file mode 100644
index 000000000..80cb37c6e
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldListeners.md
@@ -0,0 +1,102 @@
+---
+id: FieldListeners
+title: FieldListeners
+---
+
+# Interface: FieldListeners\&lt;TParentData, TName, TData\>
+
+Defined in: [packages/form-core/src/FieldApi.ts:267](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L267)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\> = [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+## Properties
+
+### onBlur?
+
+```ts
+optional onBlur: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:274](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L274)
+
+***
+
+### onBlurDebounceMs?
+
+```ts
+optional onBlurDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:275](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L275)
+
+***
+
+### onChange?
+
+```ts
+optional onChange: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:272](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L272)
+
+***
+
+### onChangeDebounceMs?
+
+```ts
+optional onChangeDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L273)
+
+***
+
+### onGroupSubmit?
+
+```ts
+optional onGroupSubmit: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L279)
+
+***
+
+### onMount?
+
+```ts
+optional onMount: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:276](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L276)
+
+***
+
+### onSubmit?
+
+```ts
+optional onSubmit: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:278](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L278)
+
+***
+
+### onUnmount?
+
+```ts
+optional onUnmount: FieldListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:277](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L277)
diff --git a/mintlify/form/reference/interfaces/FieldOptions.md b/mintlify/form/reference/interfaces/FieldOptions.md
new file mode 100644
index 000000000..5ff626d77
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldOptions.md
@@ -0,0 +1,208 @@
+---
+id: FieldOptions
+title: FieldOptions
+---
+
+# Interface: FieldOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FieldApi.ts:331](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L331)
+
+An object type representing the options for a field in a form.
+
+## Extends
+
+- `FieldExtraOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### asyncAlways?
+
+```ts
+optional asyncAlways: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:972](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L972)
+
+If `true`, always run async validation, even if there are errors emitted during synchronous validation.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.asyncAlways
+```
+
+***
+
+### asyncDebounceMs?
+
+```ts
+optional asyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/types.ts:968](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L968)
+
+The default time to debounce async validation if there is not a more specific debounce time passed.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.asyncDebounceMs
+```
+
+***
+
+### defaultMeta?
+
+```ts
+optional defaultMeta: Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [packages/form-core/src/types.ts:976](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L976)
+
+An optional object with default metadata for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.defaultMeta
+```
+
+***
+
+### defaultValue?
+
+```ts
+optional defaultValue: NoInfer<TData>;
+```
+
+Defined in: [packages/form-core/src/types.ts:964](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L964)
+
+An optional default value for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.defaultValue
+```
+
+***
+
+### disableErrorFlat?
+
+```ts
+optional disableErrorFlat: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L1004)
+
+Disable the `flat(1)` operation on `field.errors`. This is useful if you want to keep the error structure as is. Not suggested for most use-cases.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.disableErrorFlat
+```
+
+***
+
+### listeners?
+
+```ts
+optional listeners: FieldListeners<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:325](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L325)
+
+A list of listeners which attach to the corresponding events
+
+#### Inherited from
+
+```ts
+FieldExtraOptions.listeners
+```
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/types.ts:960](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L960)
+
+The field name. The type will be `DeepKeys<TParentData>` to ensure your name is a deep key of the parent dataset.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.name
+```
+
+***
+
+### validators?
+
+```ts
+optional validators: FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:307](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L307)
+
+A list of validators to pass to the field
+
+#### Inherited from
+
+```ts
+FieldExtraOptions.validators
+```
diff --git a/mintlify/form/reference/interfaces/FieldValidators.md b/mintlify/form/reference/interfaces/FieldValidators.md
new file mode 100644
index 000000000..c7033da6d
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FieldValidators.md
@@ -0,0 +1,260 @@
+---
+id: FieldValidators
+title: FieldValidators
+---
+
+# Interface: FieldValidators\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FieldApi.ts:179](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L179)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FieldValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FieldAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### onBlur?
+
+```ts
+optional onBlur: RejectPromiseValidator<TOnBlur>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:232](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L232)
+
+An optional function, that runs on the blur event of input.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onBlurAsync?
+
+```ts
+optional onBlurAsync: TOnBlurAsync;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:238](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L238)
+
+An optional property similar to `onBlur` but async validation.
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
+
+***
+
+### onBlurAsyncDebounceMs?
+
+```ts
+optional onBlurAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:245](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L245)
+
+An optional number to represent how long the `onBlurAsync` should wait before running
+
+If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds
+
+***
+
+### onBlurListenTo?
+
+```ts
+optional onBlurListenTo: DeepKeys<TParentData>[];
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:249](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L249)
+
+An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+
+***
+
+### onChange?
+
+```ts
+optional onChange: RejectPromiseValidator<TOnChange>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:210](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L210)
+
+An optional function, that runs on the change event of input.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onChangeAsync?
+
+```ts
+optional onChangeAsync: TOnChangeAsync;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:216](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L216)
+
+An optional property similar to `onChange` but async validation
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
+
+***
+
+### onChangeAsyncDebounceMs?
+
+```ts
+optional onChangeAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:222](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L222)
+
+An optional number to represent how long the `onChangeAsync` should wait before running
+
+If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds
+
+***
+
+### onChangeListenTo?
+
+```ts
+optional onChangeListenTo: DeepKeys<TParentData>[];
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L226)
+
+An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+
+***
+
+### onDynamic?
+
+```ts
+optional onDynamic: RejectPromiseValidator<TOnDynamic>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:262](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L262)
+
+***
+
+### onDynamicAsync?
+
+```ts
+optional onDynamicAsync: TOnDynamicAsync;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:263](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L263)
+
+***
+
+### onDynamicAsyncDebounceMs?
+
+```ts
+optional onDynamicAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:264](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L264)
+
+***
+
+### onMount?
+
+```ts
+optional onMount: RejectPromiseValidator<TOnMount>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:204](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L204)
+
+An optional function, that runs on the mount event of input.
+
+***
+
+### onSubmit?
+
+```ts
+optional onSubmit: RejectPromiseValidator<TOnSubmit>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:255](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L255)
+
+An optional function, that runs on the submit event of form.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onSubmitAsync?
+
+```ts
+optional onSubmitAsync: TOnSubmitAsync;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:261](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L261)
+
+An optional property similar to `onSubmit` but async validation.
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
diff --git a/mintlify/form/reference/interfaces/FormGroupApiOptions.md b/mintlify/form/reference/interfaces/FormGroupApiOptions.md
new file mode 100644
index 000000000..0b2c41613
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupApiOptions.md
@@ -0,0 +1,392 @@
+---
+id: FormGroupApiOptions
+title: FormGroupApiOptions
+---
+
+# Interface: FormGroupApiOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L562)
+
+## Extends
+
+- [`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Properties
+
+### asyncAlways?
+
+```ts
+optional asyncAlways: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:972](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L972)
+
+If `true`, always run async validation, even if there are errors emitted during synchronous validation.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`asyncAlways`](/form/reference/interfaces/FormGroupOptions#asyncalways)
+
+***
+
+### asyncDebounceMs?
+
+```ts
+optional asyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/types.ts:968](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L968)
+
+The default time to debounce async validation if there is not a more specific debounce time passed.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`asyncDebounceMs`](/form/reference/interfaces/FormGroupOptions#asyncdebouncems)
+
+***
+
+### canSubmitWhenInvalid?
+
+```ts
+optional canSubmitWhenInvalid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:381](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L381)
+
+If true, allows the form to be submitted in an invalid state i.e. canSubmit will remain true regardless of validation errors. Defaults to undefined.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`canSubmitWhenInvalid`](/form/reference/interfaces/FormGroupOptions#cansubmitwheninvalid)
+
+***
+
+### defaultMeta?
+
+```ts
+optional defaultMeta: Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [packages/form-core/src/types.ts:976](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L976)
+
+An optional object with default metadata for the field.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`defaultMeta`](/form/reference/interfaces/FormGroupOptions#defaultmeta)
+
+***
+
+### defaultState?
+
+```ts
+optional defaultState: FormGroupState;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:388](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L388)
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`defaultState`](/form/reference/interfaces/FormGroupOptions#defaultstate)
+
+***
+
+### defaultValue?
+
+```ts
+optional defaultValue: NoInfer<TData>;
+```
+
+Defined in: [packages/form-core/src/types.ts:964](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L964)
+
+An optional default value for the field.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`defaultValue`](/form/reference/interfaces/FormGroupOptions#defaultvalue)
+
+***
+
+### disableErrorFlat?
+
+```ts
+optional disableErrorFlat: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L1004)
+
+Disable the `flat(1)` operation on `field.errors`. This is useful if you want to keep the error structure as is. Not suggested for most use-cases.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`disableErrorFlat`](/form/reference/interfaces/FormGroupOptions#disableerrorflat)
+
+***
+
+### form
+
+```ts
+form: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:639](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L639)
+
+***
+
+### listeners?
+
+```ts
+optional listeners: FormGroupListeners<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:386](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L386)
+
+A list of listeners which attach to the corresponding events
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`listeners`](/form/reference/interfaces/FormGroupOptions#listeners)
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/types.ts:960](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L960)
+
+The field name. The type will be `DeepKeys<TParentData>` to ensure your name is a deep key of the parent dataset.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`name`](/form/reference/interfaces/FormGroupOptions#name)
+
+***
+
+### onGroupSubmit()?
+
+```ts
+optional onGroupSubmit: (props) => any;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:403](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L403)
+
+A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise<any>`
+
+#### Parameters
+
+##### props
+
+###### groupApi
+
+[`FormGroupApi`](/form/reference/classes/FormGroupApi)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TData`
+
+#### Returns
+
+`any`
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`onGroupSubmit`](/form/reference/interfaces/FormGroupOptions#ongroupsubmit)
+
+***
+
+### onGroupSubmitInvalid()?
+
+```ts
+optional onGroupSubmitInvalid: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:436](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L436)
+
+Specify an action for scenarios where the user tries to submit an invalid form.
+
+#### Parameters
+
+##### props
+
+###### groupApi
+
+[`FormGroupApi`](/form/reference/classes/FormGroupApi)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TData`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`onGroupSubmitInvalid`](/form/reference/interfaces/FormGroupOptions#ongroupsubmitinvalid)
+
+***
+
+### onSubmitMeta?
+
+```ts
+optional onSubmitMeta: TSubmitMeta;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:398](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L398)
+
+onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`onSubmitMeta`](/form/reference/interfaces/FormGroupOptions#onsubmitmeta)
+
+***
+
+### validationLogic?
+
+```ts
+optional validationLogic: ValidationLogicFn;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:394](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L394)
+
+Optional validation logic strategy to use for this group's own
+validators (e.g. `revalidateLogic()`). When omitted, the parent form's
+`validationLogic` (or the default) is used.
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`validationLogic`](/form/reference/interfaces/FormGroupOptions#validationlogic)
+
+***
+
+### validators?
+
+```ts
+optional validators: FormGroupValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L363)
+
+A list of validators to pass to the field
+
+#### Inherited from
+
+[`FormGroupOptions`](/form/reference/interfaces/FormGroupOptions).[`validators`](/form/reference/interfaces/FormGroupOptions#validators)
diff --git a/mintlify/form/reference/interfaces/FormGroupListeners.md b/mintlify/form/reference/interfaces/FormGroupListeners.md
new file mode 100644
index 000000000..58a940b1c
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupListeners.md
@@ -0,0 +1,102 @@
+---
+id: FormGroupListeners
+title: FormGroupListeners
+---
+
+# Interface: FormGroupListeners\&lt;TParentData, TName, TData\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:293](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L293)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\> = [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+## Properties
+
+### onBlur?
+
+```ts
+optional onBlur: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:300](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L300)
+
+***
+
+### onBlurDebounceMs?
+
+```ts
+optional onBlurDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:301](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L301)
+
+***
+
+### onChange?
+
+```ts
+optional onChange: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:298](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L298)
+
+***
+
+### onChangeDebounceMs?
+
+```ts
+optional onChangeDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:299](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L299)
+
+***
+
+### onGroupSubmit?
+
+```ts
+optional onGroupSubmit: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:305](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L305)
+
+***
+
+### onMount?
+
+```ts
+optional onMount: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:302](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L302)
+
+***
+
+### onSubmit?
+
+```ts
+optional onSubmit: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:304](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L304)
+
+***
+
+### onUnmount?
+
+```ts
+optional onUnmount: FormGroupListenerFn<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:303](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L303)
diff --git a/mintlify/form/reference/interfaces/FormGroupMeta.md b/mintlify/form/reference/interfaces/FormGroupMeta.md
new file mode 100644
index 000000000..a24ed703b
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupMeta.md
@@ -0,0 +1,402 @@
+---
+id: FormGroupMeta
+title: FormGroupMeta
+---
+
+# Interface: FormGroupMeta\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:749](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L749)
+
+The `meta` shape exposed on `FormGroupApi.state.meta`. Mirrors
+`FieldApi.state.meta` (since `FormGroupMeta extends FieldLikeMeta`) but
+additionally surfaces the group's submission lifecycle and aggregated
+validity flags. All derivation lives on the parent `FormApi` (in
+`formGroupMetaDerived`), keeping per-instance `FormGroupApi.store` as
+minimal as `FieldApi.store`.
+
+Aggregated booleans (`isTouched`, `isBlurred`, `isDirty`, `isPristine`,
+`isDefaultValue`) are computed across the group's descendant fields
+rather than the group's own field-meta entry.
+
+## Extends
+
+- [`FormGroupState`](/form/reference/interfaces/FormGroupState)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+## Properties
+
+### canSubmit
+
+```ts
+canSubmit: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:827](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L827)
+
+***
+
+### errorMap
+
+```ts
+errorMap: ValidationErrorMap<UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>, UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>, UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>, UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>, UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>, UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>, UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>, UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>, UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>>;
+```
+
+Defined in: [packages/form-core/src/types.ts:536](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L536)
+
+A map of errors related to the field value.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.errorMap
+```
+
+***
+
+### errors
+
+```ts
+errors: (
+  | UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>>
+  | UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>>
+  | UnwrapOneLevelOfArray<UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>>
+  | UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>>
+  | UnwrapOneLevelOfArray<UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>>
+  | UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>>
+  | UnwrapOneLevelOfArray<UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>>
+  | UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>>
+  | UnwrapOneLevelOfArray<UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>>)[];
+```
+
+Defined in: [packages/form-core/src/types.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L650)
+
+An array of errors related to the field value.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.errors
+```
+
+***
+
+### isBlurred
+
+```ts
+isBlurred: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:528](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L528)
+
+A flag indicating whether the field has been blurred.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.isBlurred
+```
+
+***
+
+### isDefaultValue
+
+```ts
+isDefaultValue: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:694](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L694)
+
+A flag indicating whether the field's current value is the default value
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.isDefaultValue
+```
+
+***
+
+### isDirty
+
+```ts
+isDirty: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:532](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L532)
+
+A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.isDirty
+```
+
+***
+
+### isFieldsValid
+
+```ts
+isFieldsValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:824](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L824)
+
+***
+
+### isFieldsValidating
+
+```ts
+isFieldsValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:823](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L823)
+
+***
+
+### isGroupValid
+
+```ts
+isGroupValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:825](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L825)
+
+***
+
+### isPristine
+
+```ts
+isPristine: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:686](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L686)
+
+A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.isPristine
+```
+
+***
+
+### isSubmitSuccessful
+
+```ts
+isSubmitSuccessful: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:688](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L688)
+
+A boolean indicating if the last submission was successful.
+
+#### Inherited from
+
+[`FormGroupState`](/form/reference/interfaces/FormGroupState).[`isSubmitSuccessful`](/form/reference/interfaces/FormGroupState#issubmitsuccessful)
+
+***
+
+### isSubmitted
+
+```ts
+isSubmitted: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:676](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L676)
+
+A boolean indicating if the `onSubmit` function has completed successfully.
+
+Goes back to `false` at each new submission attempt.
+
+Note: you can use isSubmitting to check if the form is currently submitting.
+
+#### Inherited from
+
+[`FormGroupState`](/form/reference/interfaces/FormGroupState).[`isSubmitted`](/form/reference/interfaces/FormGroupState#issubmitted)
+
+***
+
+### isSubmitting
+
+```ts
+isSubmitting: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:668](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L668)
+
+A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called.
+
+Goes back to `false` when submission completes for one of the following reasons:
+- the validation step returned errors.
+- the `onSubmit` function has completed.
+
+Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes.
+
+This is useful for displaying loading indicators or disabling form inputs during submission.
+
+#### Inherited from
+
+[`FormGroupState`](/form/reference/interfaces/FormGroupState).[`isSubmitting`](/form/reference/interfaces/FormGroupState#issubmitting)
+
+***
+
+### isTouched
+
+```ts
+isTouched: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:524](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L524)
+
+A flag indicating whether the field has been touched.
+
+#### Inherited from
+
+```ts
+FieldLikeMeta.isTouched
+```
+
+***
+
+### isValid
+
+```ts
+isValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:826](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L826)
+
+A boolean indicating if the field is valid. Evaluates `true` if there are no field errors.
+
+#### Overrides
+
+```ts
+FieldLikeMeta.isValid
+```
+
+***
+
+### isValidating
+
+```ts
+isValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:555](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L555)
+
+A flag indicating whether the field is currently being validated.
+
+#### Inherited from
+
+[`FormGroupState`](/form/reference/interfaces/FormGroupState).[`isValidating`](/form/reference/interfaces/FormGroupState#isvalidating)
+
+***
+
+### submissionAttempts
+
+```ts
+submissionAttempts: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:684](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L684)
+
+A counter for tracking the number of submission attempts.
+
+#### Inherited from
+
+[`FormGroupState`](/form/reference/interfaces/FormGroupState).[`submissionAttempts`](/form/reference/interfaces/FormGroupState#submissionattempts)
diff --git a/mintlify/form/reference/interfaces/FormGroupOptions.md b/mintlify/form/reference/interfaces/FormGroupOptions.md
new file mode 100644
index 000000000..dc85fbe21
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupOptions.md
@@ -0,0 +1,414 @@
+---
+id: FormGroupOptions
+title: FormGroupOptions
+---
+
+# Interface: FormGroupOptions\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:468](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L468)
+
+## Extends
+
+- `FormGroupExtraOptions`\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+## Extended by
+
+- [`FormGroupApiOptions`](/form/reference/interfaces/FormGroupApiOptions)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta`
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnServer
+
+`TFormOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TParentSubmitMeta
+
+`TParentSubmitMeta`
+
+## Properties
+
+### asyncAlways?
+
+```ts
+optional asyncAlways: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:972](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L972)
+
+If `true`, always run async validation, even if there are errors emitted during synchronous validation.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.asyncAlways
+```
+
+***
+
+### asyncDebounceMs?
+
+```ts
+optional asyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/types.ts:968](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L968)
+
+The default time to debounce async validation if there is not a more specific debounce time passed.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.asyncDebounceMs
+```
+
+***
+
+### canSubmitWhenInvalid?
+
+```ts
+optional canSubmitWhenInvalid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:381](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L381)
+
+If true, allows the form to be submitted in an invalid state i.e. canSubmit will remain true regardless of validation errors. Defaults to undefined.
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.canSubmitWhenInvalid
+```
+
+***
+
+### defaultMeta?
+
+```ts
+optional defaultMeta: Partial<FieldLikeMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, any, any, any, any, any, any, any, any, any>>;
+```
+
+Defined in: [packages/form-core/src/types.ts:976](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L976)
+
+An optional object with default metadata for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.defaultMeta
+```
+
+***
+
+### defaultState?
+
+```ts
+optional defaultState: FormGroupState;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:388](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L388)
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.defaultState
+```
+
+***
+
+### defaultValue?
+
+```ts
+optional defaultValue: NoInfer<TData>;
+```
+
+Defined in: [packages/form-core/src/types.ts:964](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L964)
+
+An optional default value for the field.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.defaultValue
+```
+
+***
+
+### disableErrorFlat?
+
+```ts
+optional disableErrorFlat: boolean;
+```
+
+Defined in: [packages/form-core/src/types.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L1004)
+
+Disable the `flat(1)` operation on `field.errors`. This is useful if you want to keep the error structure as is. Not suggested for most use-cases.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.disableErrorFlat
+```
+
+***
+
+### listeners?
+
+```ts
+optional listeners: FormGroupListeners<TParentData, TName, TData>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:386](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L386)
+
+A list of listeners which attach to the corresponding events
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.listeners
+```
+
+***
+
+### name
+
+```ts
+name: TName;
+```
+
+Defined in: [packages/form-core/src/types.ts:960](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L960)
+
+The field name. The type will be `DeepKeys<TParentData>` to ensure your name is a deep key of the parent dataset.
+
+#### Inherited from
+
+```ts
+FieldLikeOptions.name
+```
+
+***
+
+### onGroupSubmit()?
+
+```ts
+optional onGroupSubmit: (props) => any;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:403](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L403)
+
+A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise<any>`
+
+#### Parameters
+
+##### props
+
+###### groupApi
+
+[`FormGroupApi`](/form/reference/classes/FormGroupApi)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TData`
+
+#### Returns
+
+`any`
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.onGroupSubmit
+```
+
+***
+
+### onGroupSubmitInvalid()?
+
+```ts
+optional onGroupSubmitInvalid: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:436](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L436)
+
+Specify an action for scenarios where the user tries to submit an invalid form.
+
+#### Parameters
+
+##### props
+
+###### groupApi
+
+[`FormGroupApi`](/form/reference/classes/FormGroupApi)\&lt;`TParentData`, `TName`, `TData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TSubmitMeta`, `TFormOnMount`, `TFormOnChange`, `TFormOnChangeAsync`, `TFormOnBlur`, `TFormOnBlurAsync`, `TFormOnSubmit`, `TFormOnSubmitAsync`, `TFormOnDynamic`, `TFormOnDynamicAsync`, `TFormOnServer`, `TParentSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TData`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.onGroupSubmitInvalid
+```
+
+***
+
+### onSubmitMeta?
+
+```ts
+optional onSubmitMeta: TSubmitMeta;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:398](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L398)
+
+onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.onSubmitMeta
+```
+
+***
+
+### validationLogic?
+
+```ts
+optional validationLogic: ValidationLogicFn;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:394](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L394)
+
+Optional validation logic strategy to use for this group's own
+validators (e.g. `revalidateLogic()`). When omitted, the parent form's
+`validationLogic` (or the default) is used.
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.validationLogic
+```
+
+***
+
+### validators?
+
+```ts
+optional validators: FormGroupValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L363)
+
+A list of validators to pass to the field
+
+#### Inherited from
+
+```ts
+FormGroupExtraOptions.validators
+```
diff --git a/mintlify/form/reference/interfaces/FormGroupState.md b/mintlify/form/reference/interfaces/FormGroupState.md
new file mode 100644
index 000000000..6f725dc30
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupState.md
@@ -0,0 +1,84 @@
+---
+id: FormGroupState
+title: FormGroupState
+---
+
+# Interface: FormGroupState
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:655](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L655)
+
+## Extended by
+
+- [`FormGroupMeta`](/form/reference/interfaces/FormGroupMeta)
+
+## Properties
+
+### isSubmitSuccessful
+
+```ts
+isSubmitSuccessful: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:688](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L688)
+
+A boolean indicating if the last submission was successful.
+
+***
+
+### isSubmitted
+
+```ts
+isSubmitted: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:676](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L676)
+
+A boolean indicating if the `onSubmit` function has completed successfully.
+
+Goes back to `false` at each new submission attempt.
+
+Note: you can use isSubmitting to check if the form is currently submitting.
+
+***
+
+### isSubmitting
+
+```ts
+isSubmitting: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:668](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L668)
+
+A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called.
+
+Goes back to `false` when submission completes for one of the following reasons:
+- the validation step returned errors.
+- the `onSubmit` function has completed.
+
+Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes.
+
+This is useful for displaying loading indicators or disabling form inputs during submission.
+
+***
+
+### isValidating
+
+```ts
+isValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L680)
+
+A boolean indicating if the form or any of its fields are currently validating.
+
+***
+
+### submissionAttempts
+
+```ts
+submissionAttempts: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:684](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L684)
+
+A counter for tracking the number of submission attempts.
diff --git a/mintlify/form/reference/interfaces/FormGroupStoreState.md b/mintlify/form/reference/interfaces/FormGroupStoreState.md
new file mode 100644
index 000000000..700168afe
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupStoreState.md
@@ -0,0 +1,127 @@
+---
+id: FormGroupStoreState
+title: FormGroupStoreState
+---
+
+# Interface: FormGroupStoreState\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:859](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L859)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TFormOnMount
+
+`TFormOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChange
+
+`TFormOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnChangeAsync
+
+`TFormOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlur
+
+`TFormOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnBlurAsync
+
+`TFormOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmit
+
+`TFormOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnSubmitAsync
+
+`TFormOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamic
+
+`TFormOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TParentData`\>
+
+### TFormOnDynamicAsync
+
+`TFormOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TParentData`\>
+
+## Properties
+
+### meta
+
+```ts
+meta: FormGroupMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:916](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L916)
+
+The current metadata of the form group, including aggregated validity,
+group-level errors, and submission lifecycle.
+
+***
+
+### value
+
+```ts
+value: TData;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:911](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L911)
+
+The current value of the form group.
diff --git a/mintlify/form/reference/interfaces/FormGroupValidators.md b/mintlify/form/reference/interfaces/FormGroupValidators.md
new file mode 100644
index 000000000..9f6db5aea
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormGroupValidators.md
@@ -0,0 +1,244 @@
+---
+id: FormGroupValidators
+title: FormGroupValidators
+---
+
+# Interface: FormGroupValidators\&lt;TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:199](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L199)
+
+## Type Parameters
+
+### TParentData
+
+`TParentData`
+
+### TName
+
+`TName` *extends* [`DeepKeys`](/form/reference/type-aliases/DeepKeys)\&lt;`TParentData`\>
+
+### TData
+
+`TData` *extends* [`DeepValue`](/form/reference/type-aliases/DeepValue)\&lt;`TParentData`, `TName`\>
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormGroupValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* 
+  \| `undefined`
+  \| `FormGroupAsyncValidateOrFn`\&lt;`TParentData`, `TName`, `TData`\>
+
+## Properties
+
+### onBlur?
+
+```ts
+optional onBlur: TOnBlur;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:258](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L258)
+
+An optional function, that runs on the blur event of input.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onBlurAsync?
+
+```ts
+optional onBlurAsync: TOnBlurAsync;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:264](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L264)
+
+An optional property similar to `onBlur` but async validation.
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
+
+***
+
+### onBlurAsyncDebounceMs?
+
+```ts
+optional onBlurAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:271](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L271)
+
+An optional number to represent how long the `onBlurAsync` should wait before running
+
+If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds
+
+***
+
+### onChange?
+
+```ts
+optional onChange: TOnChange;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:236](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L236)
+
+An optional function, that runs on the change event of input.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onChangeAsync?
+
+```ts
+optional onChangeAsync: TOnChangeAsync;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:242](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L242)
+
+An optional property similar to `onChange` but async validation
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
+
+***
+
+### onChangeAsyncDebounceMs?
+
+```ts
+optional onChangeAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:248](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L248)
+
+An optional number to represent how long the `onChangeAsync` should wait before running
+
+If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds
+
+***
+
+### onDynamic?
+
+```ts
+optional onDynamic: TOnDynamic;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:288](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L288)
+
+***
+
+### onDynamicAsync?
+
+```ts
+optional onDynamicAsync: TOnDynamicAsync;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:289](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L289)
+
+***
+
+### onDynamicAsyncDebounceMs?
+
+```ts
+optional onDynamicAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:290](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L290)
+
+***
+
+### onMount?
+
+```ts
+optional onMount: TOnMount;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:230](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L230)
+
+An optional function, that runs on the mount event of input.
+
+***
+
+### onSubmit?
+
+```ts
+optional onSubmit: TOnSubmit;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:281](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L281)
+
+An optional function, that runs on the submit event of form.
+
+#### Example
+
+```ts
+z.string().min(1)
+```
+
+***
+
+### onSubmitAsync?
+
+```ts
+optional onSubmitAsync: TOnSubmitAsync;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:287](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L287)
+
+An optional property similar to `onSubmit` but async validation.
+
+#### Example
+
+```ts
+z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' })
+```
diff --git a/mintlify/form/reference/interfaces/FormListeners.md b/mintlify/form/reference/interfaces/FormListeners.md
new file mode 100644
index 000000000..9c6ff53f2
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormListeners.md
@@ -0,0 +1,242 @@
+---
+id: FormListeners
+title: FormListeners
+---
+
+# Interface: FormListeners\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormApi.ts:294](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L294)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Properties
+
+### onBlur()?
+
+```ts
+optional onBlur: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:344](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L344)
+
+#### Parameters
+
+##### props
+
+###### fieldApi
+
+[`AnyFieldApi`](/form/reference/type-aliases/AnyFieldApi)
+
+###### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onBlurDebounceMs?
+
+```ts
+optional onBlurDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:361](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L361)
+
+***
+
+### onChange()?
+
+```ts
+optional onChange: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:308](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L308)
+
+#### Parameters
+
+##### props
+
+`FormListenersPropsField`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onChangeDebounceMs?
+
+```ts
+optional onChangeDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:324](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L324)
+
+***
+
+### onChangeGroup()?
+
+```ts
+optional onChangeGroup: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:326](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L326)
+
+#### Parameters
+
+##### props
+
+`FormListenersPropsGroup`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onChangeGroupDebounceMs?
+
+```ts
+optional onChangeGroupDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:342](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L342)
+
+***
+
+### onFieldUnmount()?
+
+```ts
+optional onFieldUnmount: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:398](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L398)
+
+#### Parameters
+
+##### props
+
+`FormListenersPropsField`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onGroupUnmount()?
+
+```ts
+optional onGroupUnmount: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:415](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L415)
+
+#### Parameters
+
+##### props
+
+`FormListenersPropsGroup`\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onMount()?
+
+```ts
+optional onMount: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L363)
+
+#### Parameters
+
+##### props
+
+###### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSubmit()?
+
+```ts
+optional onSubmit: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:380](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L380)
+
+#### Parameters
+
+##### props
+
+###### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+#### Returns
+
+`void`
diff --git a/mintlify/form/reference/interfaces/FormOptions.md b/mintlify/form/reference/interfaces/FormOptions.md
new file mode 100644
index 000000000..9c7ebf279
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormOptions.md
@@ -0,0 +1,274 @@
+---
+id: FormOptions
+title: FormOptions
+---
+
+# Interface: FormOptions\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta\>
+
+Defined in: [packages/form-core/src/FormApi.ts:450](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L450)
+
+An object representing the options for a form.
+
+## Extends
+
+- [`BaseFormOptions`](/form/reference/interfaces/BaseFormOptions)\&lt;`TFormData`, `TSubmitMeta`\>
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TSubmitMeta
+
+`TSubmitMeta` = `never`
+
+## Properties
+
+### asyncAlways?
+
+```ts
+optional asyncAlways: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:489](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L489)
+
+If true, always run async validation, even when sync validation has produced an error. Defaults to undefined.
+
+***
+
+### asyncDebounceMs?
+
+```ts
+optional asyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:493](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L493)
+
+Optional time in milliseconds if you want to introduce a delay before firing off an async action.
+
+***
+
+### canSubmitWhenInvalid?
+
+```ts
+optional canSubmitWhenInvalid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:497](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L497)
+
+If true, allows the form to be submitted in an invalid state i.e. canSubmit will remain true regardless of validation errors. Defaults to undefined.
+
+***
+
+### defaultState?
+
+```ts
+optional defaultState: Partial<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:471](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L471)
+
+The default state for the form.
+
+***
+
+### defaultValues?
+
+```ts
+optional defaultValues: TFormData;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:440](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L440)
+
+Set initial values for your form.
+
+#### Inherited from
+
+[`BaseFormOptions`](/form/reference/interfaces/BaseFormOptions).[`defaultValues`](/form/reference/interfaces/BaseFormOptions#defaultvalues)
+
+***
+
+### formId?
+
+```ts
+optional formId: string;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:467](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L467)
+
+The form name, used for devtools and identification
+
+***
+
+### listeners?
+
+```ts
+optional listeners: FormListeners<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:519](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L519)
+
+form level listeners
+
+***
+
+### onSubmit()?
+
+```ts
+optional onSubmit: (props) => any;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:537](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L537)
+
+A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise<any>`
+
+#### Parameters
+
+##### props
+
+###### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TFormData`
+
+#### Returns
+
+`any`
+
+***
+
+### onSubmitInvalid()?
+
+```ts
+optional onSubmitInvalid: (props) => void;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:558](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L558)
+
+Specify an action for scenarios where the user tries to submit an invalid form.
+
+#### Parameters
+
+##### props
+
+###### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`\>
+
+###### meta
+
+`TSubmitMeta`
+
+###### value
+
+`TFormData`
+
+#### Returns
+
+`void`
+
+***
+
+### onSubmitMeta?
+
+```ts
+optional onSubmitMeta: TSubmitMeta;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:444](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L444)
+
+onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props
+
+#### Inherited from
+
+[`BaseFormOptions`](/form/reference/interfaces/BaseFormOptions).[`onSubmitMeta`](/form/reference/interfaces/BaseFormOptions#onsubmitmeta)
+
+***
+
+### transform()?
+
+```ts
+optional transform: (data) => unknown;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:582](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L582)
+
+#### Parameters
+
+##### data
+
+`unknown`
+
+#### Returns
+
+`unknown`
+
+***
+
+### validationLogic?
+
+```ts
+optional validationLogic: ValidationLogicFn;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:514](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L514)
+
+***
+
+### validators?
+
+```ts
+optional validators: FormValidators<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:501](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L501)
+
+A list of validators to pass to the form
diff --git a/mintlify/form/reference/interfaces/FormState.md b/mintlify/form/reference/interfaces/FormState.md
new file mode 100644
index 000000000..3de69136e
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormState.md
@@ -0,0 +1,517 @@
+---
+id: FormState
+title: FormState
+---
+
+# Interface: FormState\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer\>
+
+Defined in: [packages/form-core/src/FormApi.ts:793](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L793)
+
+An object representing the current state of the form.
+
+## Extends
+
+- [`BaseFormState`](/form/reference/type-aliases/BaseFormState)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>.[`DerivedFormState`](/form/reference/type-aliases/DerivedFormState)\&lt;`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`\>
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+## Properties
+
+### \_force\_re\_eval?
+
+```ts
+optional _force_re_eval: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:696](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L696)
+
+@private, used to force a re-evaluation of the form state when options change
+
+#### Inherited from
+
+```ts
+BaseFormState._force_re_eval
+```
+
+***
+
+### canSubmit
+
+```ts
+canSubmit: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:786](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L786)
+
+A boolean indicating if the form can be submitted based on its current state.
+
+#### Inherited from
+
+```ts
+DerivedFormState.canSubmit
+```
+
+***
+
+### errorMap
+
+```ts
+errorMap: ValidationErrorMap<UnwrapFormValidateOrFn<TOnMount>, UnwrapFormValidateOrFn<TOnChange>, UnwrapFormAsyncValidateOrFn<TOnChangeAsync>, UnwrapFormValidateOrFn<TOnBlur>, UnwrapFormAsyncValidateOrFn<TOnBlurAsync>, UnwrapFormValidateOrFn<TOnSubmit>, UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>, UnwrapFormValidateOrFn<TOnDynamic>, UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>, UnwrapFormAsyncValidateOrFn<TOnServer>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:633](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L633)
+
+The error map for the form itself.
+
+#### Inherited from
+
+```ts
+BaseFormState.errorMap
+```
+
+***
+
+### errors
+
+```ts
+errors: NonNullable<
+  | UnwrapFormValidateOrFn<TOnMount>
+  | UnwrapFormValidateOrFn<TOnChange>
+  | UnwrapFormAsyncValidateOrFn<TOnChangeAsync>
+  | UnwrapFormValidateOrFn<TOnBlur>
+  | UnwrapFormAsyncValidateOrFn<TOnBlurAsync>
+  | UnwrapFormValidateOrFn<TOnSubmit>
+  | UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>
+  | UnwrapFormValidateOrFn<TOnDynamic>
+  | UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>
+  | UnwrapFormAsyncValidateOrFn<TOnServer>>[];
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:737](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L737)
+
+The error array for the form itself.
+
+#### Inherited from
+
+```ts
+DerivedFormState.errors
+```
+
+***
+
+### fieldMeta
+
+```ts
+fieldMeta: Partial<Record<DeepKeys<TFormData>, AnyFieldLikeMeta>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:790](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L790)
+
+A record of field metadata for each field in the form.
+
+#### Inherited from
+
+```ts
+DerivedFormState.fieldMeta
+```
+
+***
+
+### fieldMetaBase
+
+```ts
+fieldMetaBase: Partial<Record<DeepKeys<TFormData>, AnyFieldLikeMetaBase>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:652](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L652)
+
+A record of field metadata for each field in the form, not including the derived properties, like `errors` and such
+
+#### Inherited from
+
+```ts
+BaseFormState.fieldMetaBase
+```
+
+***
+
+### formGroupStateBase
+
+```ts
+formGroupStateBase: Partial<Record<string, FormGroupState>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L659)
+
+A record of submission lifecycle state for each mounted `FormGroupApi`,
+keyed by the group's fully-qualified field name. Stored on the form so
+group-level state can be read from `FormApi` without having to walk the
+mounted group instances.
+
+#### Inherited from
+
+```ts
+BaseFormState.formGroupStateBase
+```
+
+***
+
+### isBlurred
+
+```ts
+isBlurred: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:766](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L766)
+
+A boolean indicating if any of the form fields have been blurred.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isBlurred
+```
+
+***
+
+### isDefaultValue
+
+```ts
+isDefaultValue: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:778](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L778)
+
+A boolean indicating if all of the form's fields are the same as default values.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isDefaultValue
+```
+
+***
+
+### isDirty
+
+```ts
+isDirty: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:770](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L770)
+
+A boolean indicating if any of the form's fields' values have been modified by the user. Evaluates `true` if the user have modified at least one of the fields. Opposite of `isPristine`.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isDirty
+```
+
+***
+
+### isFieldsValid
+
+```ts
+isFieldsValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:758](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L758)
+
+A boolean indicating if all the form fields are valid. Evaluates `true` if there are no field errors.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isFieldsValid
+```
+
+***
+
+### isFieldsValidating
+
+```ts
+isFieldsValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:754](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L754)
+
+A boolean indicating if any of the form fields are currently validating.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isFieldsValidating
+```
+
+***
+
+### isFormValid
+
+```ts
+isFormValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:733](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L733)
+
+A boolean indicating if the form is valid.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isFormValid
+```
+
+***
+
+### isFormValidating
+
+```ts
+isFormValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:729](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L729)
+
+A boolean indicating if the form is currently validating.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isFormValidating
+```
+
+***
+
+### isPristine
+
+```ts
+isPristine: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:774](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L774)
+
+A boolean indicating if none of the form's fields' values have been modified by the user. Evaluates `true` if the user have not modified any of the fields. Opposite of `isDirty`.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isPristine
+```
+
+***
+
+### isSubmitSuccessful
+
+```ts
+isSubmitSuccessful: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:692](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L692)
+
+A boolean indicating if the last submission was successful.
+
+#### Inherited from
+
+```ts
+BaseFormState.isSubmitSuccessful
+```
+
+***
+
+### isSubmitted
+
+```ts
+isSubmitted: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L680)
+
+A boolean indicating if the `onSubmit` function has completed successfully.
+
+Goes back to `false` at each new submission attempt.
+
+Note: you can use isSubmitting to check if the form is currently submitting.
+
+#### Inherited from
+
+```ts
+BaseFormState.isSubmitted
+```
+
+***
+
+### isSubmitting
+
+```ts
+isSubmitting: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L672)
+
+A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called.
+
+Goes back to `false` when submission completes for one of the following reasons:
+- the validation step returned errors.
+- the `onSubmit` function has completed.
+
+Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes.
+
+This is useful for displaying loading indicators or disabling form inputs during submission.
+
+#### Inherited from
+
+```ts
+BaseFormState.isSubmitting
+```
+
+***
+
+### isTouched
+
+```ts
+isTouched: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:762](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L762)
+
+A boolean indicating if any of the form fields have been touched.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isTouched
+```
+
+***
+
+### isValid
+
+```ts
+isValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:782](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L782)
+
+A boolean indicating if the form and all its fields are valid. Evaluates `true` if there are no errors.
+
+#### Inherited from
+
+```ts
+DerivedFormState.isValid
+```
+
+***
+
+### isValidating
+
+```ts
+isValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:684](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L684)
+
+A boolean indicating if the form or any of its fields are currently validating.
+
+#### Inherited from
+
+```ts
+BaseFormState.isValidating
+```
+
+***
+
+### submissionAttempts
+
+```ts
+submissionAttempts: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:688](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L688)
+
+A counter for tracking the number of submission attempts.
+
+#### Inherited from
+
+```ts
+BaseFormState.submissionAttempts
+```
+
+***
+
+### validationMetaMap
+
+```ts
+validationMetaMap: Record<ValidationErrorMapKeys, ValidationMeta | undefined>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:648](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L648)
+
+An internal mechanism used for keeping track of validation logic in a form.
+
+#### Inherited from
+
+```ts
+BaseFormState.validationMetaMap
+```
+
+***
+
+### values
+
+```ts
+values: TFormData;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:629](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L629)
+
+The current values of the form fields.
+
+#### Inherited from
+
+```ts
+BaseFormState.values
+```
diff --git a/mintlify/form/reference/interfaces/FormValidators.md b/mintlify/form/reference/interfaces/FormValidators.md
new file mode 100644
index 000000000..85c6402de
--- /dev/null
+++ b/mintlify/form/reference/interfaces/FormValidators.md
@@ -0,0 +1,184 @@
+---
+id: FormValidators
+title: FormValidators
+---
+
+# Interface: FormValidators\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync\>
+
+Defined in: [packages/form-core/src/FormApi.ts:185](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L185)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+## Properties
+
+### onBlur?
+
+```ts
+optional onBlur: RejectPromiseValidator<TOnBlur>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:216](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L216)
+
+Optional function that validates the form data when a field loses focus, returns a `FormValidationError`
+
+***
+
+### onBlurAsync?
+
+```ts
+optional onBlurAsync: TOnBlurAsync;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:220](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L220)
+
+Optional onBlur asynchronous validation method for when a field loses focus returns a ` FormValidationError` or a promise of `Promise<FormValidationError>`
+
+***
+
+### onBlurAsyncDebounceMs?
+
+```ts
+optional onBlurAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:224](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L224)
+
+The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds.
+
+***
+
+### onChange?
+
+```ts
+optional onChange: RejectPromiseValidator<TOnChange>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:204](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L204)
+
+Optional function that checks the validity of your data whenever a value changes
+
+***
+
+### onChangeAsync?
+
+```ts
+optional onChangeAsync: TOnChangeAsync;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:208](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L208)
+
+Optional onChange asynchronous counterpart to onChange. Useful for more complex validation logic that might involve server requests.
+
+***
+
+### onChangeAsyncDebounceMs?
+
+```ts
+optional onChangeAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:212](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L212)
+
+The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds.
+
+***
+
+### onDynamic?
+
+```ts
+optional onDynamic: RejectPromiseValidator<TOnDynamic>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:227](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L227)
+
+***
+
+### onDynamicAsync?
+
+```ts
+optional onDynamicAsync: TOnDynamicAsync;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:228](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L228)
+
+***
+
+### onDynamicAsyncDebounceMs?
+
+```ts
+optional onDynamicAsyncDebounceMs: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L229)
+
+***
+
+### onMount?
+
+```ts
+optional onMount: RejectPromiseValidator<TOnMount>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L200)
+
+Optional function that fires as soon as the component mounts.
+
+***
+
+### onSubmit?
+
+```ts
+optional onSubmit: RejectPromiseValidator<TOnSubmit>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:225](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L225)
+
+***
+
+### onSubmitAsync?
+
+```ts
+optional onSubmitAsync: TOnSubmitAsync;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L226)
diff --git a/mintlify/form/reference/interfaces/ObjectDeepKeyAndValue.md b/mintlify/form/reference/interfaces/ObjectDeepKeyAndValue.md
new file mode 100644
index 000000000..6d2321a3e
--- /dev/null
+++ b/mintlify/form/reference/interfaces/ObjectDeepKeyAndValue.md
@@ -0,0 +1,54 @@
+---
+id: ObjectDeepKeyAndValue
+title: ObjectDeepKeyAndValue
+---
+
+# Interface: ObjectDeepKeyAndValue\&lt;TParent, T, TKey\>
+
+Defined in: [packages/form-core/src/util-types.ts:114](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L114)
+
+## Extends
+
+- [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T`
+
+### TKey
+
+`TKey` *extends* [`AllObjectKeys`](/form/reference/type-aliases/AllObjectKeys)\&lt;`T`\>
+
+## Properties
+
+### key
+
+```ts
+key: ObjectAccessor<TParent, TKey>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:119](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L119)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`key`](/form/reference/interfaces/AnyDeepKeyAndValue#key)
+
+***
+
+### value
+
+```ts
+value: ObjectValue<TParent, T, TKey>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:120](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L120)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`value`](/form/reference/interfaces/AnyDeepKeyAndValue#value)
diff --git a/mintlify/form/reference/interfaces/StandardSchemaV1Issue.md b/mintlify/form/reference/interfaces/StandardSchemaV1Issue.md
new file mode 100644
index 000000000..e60fa2ae2
--- /dev/null
+++ b/mintlify/form/reference/interfaces/StandardSchemaV1Issue.md
@@ -0,0 +1,34 @@
+---
+id: StandardSchemaV1Issue
+title: StandardSchemaV1Issue
+---
+
+# Interface: StandardSchemaV1Issue
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:181](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L181)
+
+The issue interface of the failure output.
+
+## Properties
+
+### message
+
+```ts
+readonly message: string;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:185](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L185)
+
+The error message of the issue.
+
+***
+
+### path?
+
+```ts
+readonly optional path: readonly (PropertyKey | StandardSchemaV1PathSegment)[];
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:189](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L189)
+
+The path of the issue, if any.
diff --git a/mintlify/form/reference/interfaces/TupleDeepKeyAndValue.md b/mintlify/form/reference/interfaces/TupleDeepKeyAndValue.md
new file mode 100644
index 000000000..388ede0ab
--- /dev/null
+++ b/mintlify/form/reference/interfaces/TupleDeepKeyAndValue.md
@@ -0,0 +1,56 @@
+---
+id: TupleDeepKeyAndValue
+title: TupleDeepKeyAndValue
+---
+
+# Interface: TupleDeepKeyAndValue\&lt;TParent, T, TKey\>
+
+Defined in: [packages/form-core/src/util-types.ts:73](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L73)
+
+## Extends
+
+- [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T`
+
+### TKey
+
+`TKey` *extends* [`AllTupleKeys`](/form/reference/type-aliases/AllTupleKeys)\&lt;`T`\>
+
+## Properties
+
+### key
+
+```ts
+key: `${TParent["key"] extends never ? "" : TParent["key"]}[${TKey}]`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:78](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L78)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`key`](/form/reference/interfaces/AnyDeepKeyAndValue#key)
+
+***
+
+### value
+
+```ts
+value: 
+  | T[TKey]
+| Nullable<TParent["value"]>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:79](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L79)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`value`](/form/reference/interfaces/AnyDeepKeyAndValue#value)
diff --git a/mintlify/form/reference/interfaces/UnknownDeepKeyAndValue.md b/mintlify/form/reference/interfaces/UnknownDeepKeyAndValue.md
new file mode 100644
index 000000000..b31409b34
--- /dev/null
+++ b/mintlify/form/reference/interfaces/UnknownDeepKeyAndValue.md
@@ -0,0 +1,46 @@
+---
+id: UnknownDeepKeyAndValue
+title: UnknownDeepKeyAndValue
+---
+
+# Interface: UnknownDeepKeyAndValue\&lt;TParent\>
+
+Defined in: [packages/form-core/src/util-types.ts:139](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L139)
+
+## Extends
+
+- [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+## Properties
+
+### key
+
+```ts
+key: UnknownAccessor<TParent>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:142](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L142)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`key`](/form/reference/interfaces/AnyDeepKeyAndValue#key)
+
+***
+
+### value
+
+```ts
+value: unknown;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:143](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L143)
+
+#### Overrides
+
+[`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue).[`value`](/form/reference/interfaces/AnyDeepKeyAndValue#value)
diff --git a/mintlify/form/reference/interfaces/ValidationLogicProps.md b/mintlify/form/reference/interfaces/ValidationLogicProps.md
new file mode 100644
index 000000000..bd60e90fe
--- /dev/null
+++ b/mintlify/form/reference/interfaces/ValidationLogicProps.md
@@ -0,0 +1,101 @@
+---
+id: ValidationLogicProps
+title: ValidationLogicProps
+---
+
+# Interface: ValidationLogicProps
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:21](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L21)
+
+## Properties
+
+### event
+
+```ts
+event: object;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:35](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L35)
+
+#### async
+
+```ts
+async: boolean;
+```
+
+#### fieldName?
+
+```ts
+optional fieldName: string;
+```
+
+#### type
+
+```ts
+type: "change" | "blur" | "submit" | "mount" | "server";
+```
+
+***
+
+### form
+
+```ts
+form: AnyFormApi;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:23](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L23)
+
+***
+
+### group?
+
+```ts
+optional group: AnyFormGroupApi;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:29](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L29)
+
+Set when the validators being processed belong to a `FormGroupApi`.
+Allows validation strategies (e.g. `revalidateLogic`) to gate their
+behavior on the group's own state instead of the parent form's.
+
+***
+
+### runValidation()
+
+```ts
+runValidation: (props) => void;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:40](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L40)
+
+#### Parameters
+
+##### props
+
+###### form
+
+[`AnyFormApi`](/form/reference/type-aliases/AnyFormApi)
+
+###### validators
+
+(
+  \| [`ValidationLogicValidatorsFn`](/form/reference/interfaces/ValidationLogicValidatorsFn)
+  \| `undefined`)[]
+
+#### Returns
+
+`void`
+
+***
+
+### validators
+
+```ts
+validators: 
+  | FormValidators<any, any, any, any, any, any, any, any, any, any>
+  | null
+  | undefined;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:31](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L31)
diff --git a/mintlify/form/reference/interfaces/ValidationLogicValidatorsFn.md b/mintlify/form/reference/interfaces/ValidationLogicValidatorsFn.md
new file mode 100644
index 000000000..ee71cbca9
--- /dev/null
+++ b/mintlify/form/reference/interfaces/ValidationLogicValidatorsFn.md
@@ -0,0 +1,28 @@
+---
+id: ValidationLogicValidatorsFn
+title: ValidationLogicValidatorsFn
+---
+
+# Interface: ValidationLogicValidatorsFn
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:4](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L4)
+
+## Properties
+
+### cause
+
+```ts
+cause: "change" | "blur" | "submit" | "mount" | "server" | "dynamic";
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:18](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L18)
+
+***
+
+### fn
+
+```ts
+fn: any;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:6](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L6)
diff --git a/mintlify/form/reference/type-aliases/AllObjectKeys.md b/mintlify/form/reference/type-aliases/AllObjectKeys.md
new file mode 100644
index 000000000..e1491dbd0
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AllObjectKeys.md
@@ -0,0 +1,18 @@
+---
+id: AllObjectKeys
+title: AllObjectKeys
+---
+
+# Type Alias: AllObjectKeys\&lt;T\>
+
+```ts
+type AllObjectKeys<T> = T extends any ? keyof T & string | number : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:97](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L97)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/AllTupleKeys.md b/mintlify/form/reference/type-aliases/AllTupleKeys.md
new file mode 100644
index 000000000..697a457e8
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AllTupleKeys.md
@@ -0,0 +1,18 @@
+---
+id: AllTupleKeys
+title: AllTupleKeys
+---
+
+# Type Alias: AllTupleKeys\&lt;T\>
+
+```ts
+type AllTupleKeys<T> = T extends any ? keyof T & `${number}` : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:82](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L82)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/AnyBaseFormState.md b/mintlify/form/reference/type-aliases/AnyBaseFormState.md
new file mode 100644
index 000000000..1e12635e0
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyBaseFormState.md
@@ -0,0 +1,12 @@
+---
+id: AnyBaseFormState
+title: AnyBaseFormState
+---
+
+# Type Alias: AnyBaseFormState
+
+```ts
+type AnyBaseFormState = BaseFormState<any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:699](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L699)
diff --git a/mintlify/form/reference/type-aliases/AnyFieldApi.md b/mintlify/form/reference/type-aliases/AnyFieldApi.md
new file mode 100644
index 000000000..c315f76c8
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFieldApi.md
@@ -0,0 +1,14 @@
+---
+id: AnyFieldApi
+title: AnyFieldApi
+---
+
+# Type Alias: AnyFieldApi
+
+```ts
+type AnyFieldApi = FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FieldApi.ts:480](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L480)
+
+A type representing the Field API with all generics set to `any` for convenience.
diff --git a/mintlify/form/reference/type-aliases/AnyFieldGroupApi.md b/mintlify/form/reference/type-aliases/AnyFieldGroupApi.md
new file mode 100644
index 000000000..4db6a26cf
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFieldGroupApi.md
@@ -0,0 +1,12 @@
+---
+id: AnyFieldGroupApi
+title: AnyFieldGroupApi
+---
+
+# Type Alias: AnyFieldGroupApi
+
+```ts
+type AnyFieldGroupApi = FieldGroupApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FieldGroupApi.ts:24](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldGroupApi.ts#L24)
diff --git a/mintlify/form/reference/type-aliases/AnyFieldMeta.md b/mintlify/form/reference/type-aliases/AnyFieldMeta.md
new file mode 100644
index 000000000..ad805bfb4
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFieldMeta.md
@@ -0,0 +1,12 @@
+---
+id: AnyFieldMeta
+title: AnyFieldMeta
+---
+
+# Type Alias: AnyFieldMeta
+
+```ts
+type AnyFieldMeta = AnyFieldLikeMeta;
+```
+
+Defined in: [packages/form-core/src/types.ts:824](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L824)
diff --git a/mintlify/form/reference/type-aliases/AnyFormApi.md b/mintlify/form/reference/type-aliases/AnyFormApi.md
new file mode 100644
index 000000000..06242e3b4
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFormApi.md
@@ -0,0 +1,14 @@
+---
+id: AnyFormApi
+title: AnyFormApi
+---
+
+# Type Alias: AnyFormApi
+
+```ts
+type AnyFormApi = FormApi<any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:915](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L915)
+
+A type representing the Form API with all generics set to `any` for convenience.
diff --git a/mintlify/form/reference/type-aliases/AnyFormGroupApi.md b/mintlify/form/reference/type-aliases/AnyFormGroupApi.md
new file mode 100644
index 000000000..c9e2e5900
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFormGroupApi.md
@@ -0,0 +1,14 @@
+---
+id: AnyFormGroupApi
+title: AnyFormGroupApi
+---
+
+# Type Alias: AnyFormGroupApi
+
+```ts
+type AnyFormGroupApi = FormGroupApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:708](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L708)
+
+A type representing the FormGroup API with all generics set to `any` for convenience.
diff --git a/mintlify/form/reference/type-aliases/AnyFormGroupMeta.md b/mintlify/form/reference/type-aliases/AnyFormGroupMeta.md
new file mode 100644
index 000000000..c1b0c5e55
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFormGroupMeta.md
@@ -0,0 +1,14 @@
+---
+id: AnyFormGroupMeta
+title: AnyFormGroupMeta
+---
+
+# Type Alias: AnyFormGroupMeta
+
+```ts
+type AnyFormGroupMeta = FormGroupMeta<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormGroupApi.ts:835](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormGroupApi.ts#L835)
+
+`FormGroupMeta` with all generics widened to `any`.
diff --git a/mintlify/form/reference/type-aliases/AnyFormOptions.md b/mintlify/form/reference/type-aliases/AnyFormOptions.md
new file mode 100644
index 000000000..63609327b
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFormOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyFormOptions
+title: AnyFormOptions
+---
+
+# Type Alias: AnyFormOptions
+
+```ts
+type AnyFormOptions = FormOptions<any, any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:585](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L585)
diff --git a/mintlify/form/reference/type-aliases/AnyFormState.md b/mintlify/form/reference/type-aliases/AnyFormState.md
new file mode 100644
index 000000000..1c519fb61
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/AnyFormState.md
@@ -0,0 +1,12 @@
+---
+id: AnyFormState
+title: AnyFormState
+---
+
+# Type Alias: AnyFormState
+
+```ts
+type AnyFormState = FormState<any, any, any, any, any, any, any, any, any, any, any>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:834](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L834)
diff --git a/mintlify/form/reference/type-aliases/ArrayAccessor.md b/mintlify/form/reference/type-aliases/ArrayAccessor.md
new file mode 100644
index 000000000..6f793531b
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ArrayAccessor.md
@@ -0,0 +1,18 @@
+---
+id: ArrayAccessor
+title: ArrayAccessor
+---
+
+# Type Alias: ArrayAccessor\&lt;TParent\>
+
+```ts
+type ArrayAccessor<TParent> = `${TParent["key"] extends never ? "" : TParent["key"]}[${number}]`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:47](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L47)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
diff --git a/mintlify/form/reference/type-aliases/BaseFormState.md b/mintlify/form/reference/type-aliases/BaseFormState.md
new file mode 100644
index 000000000..dbfc0ad48
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/BaseFormState.md
@@ -0,0 +1,211 @@
+---
+id: BaseFormState
+title: BaseFormState
+---
+
+# Type Alias: BaseFormState\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer\>
+
+```ts
+type BaseFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer> = object;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:613](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L613)
+
+An object representing the current state of the form.
+
+## Extended by
+
+- [`FormState`](/form/reference/interfaces/FormState)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+## Properties
+
+### \_force\_re\_eval?
+
+```ts
+optional _force_re_eval: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:696](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L696)
+
+@private, used to force a re-evaluation of the form state when options change
+
+***
+
+### errorMap
+
+```ts
+errorMap: ValidationErrorMap<UnwrapFormValidateOrFn<TOnMount>, UnwrapFormValidateOrFn<TOnChange>, UnwrapFormAsyncValidateOrFn<TOnChangeAsync>, UnwrapFormValidateOrFn<TOnBlur>, UnwrapFormAsyncValidateOrFn<TOnBlurAsync>, UnwrapFormValidateOrFn<TOnSubmit>, UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>, UnwrapFormValidateOrFn<TOnDynamic>, UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>, UnwrapFormAsyncValidateOrFn<TOnServer>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:633](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L633)
+
+The error map for the form itself.
+
+***
+
+### fieldMetaBase
+
+```ts
+fieldMetaBase: Partial<Record<DeepKeys<TFormData>, AnyFieldLikeMetaBase>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:652](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L652)
+
+A record of field metadata for each field in the form, not including the derived properties, like `errors` and such
+
+***
+
+### formGroupStateBase
+
+```ts
+formGroupStateBase: Partial<Record<string, FormGroupState>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L659)
+
+A record of submission lifecycle state for each mounted `FormGroupApi`,
+keyed by the group's fully-qualified field name. Stored on the form so
+group-level state can be read from `FormApi` without having to walk the
+mounted group instances.
+
+***
+
+### isSubmitSuccessful
+
+```ts
+isSubmitSuccessful: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:692](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L692)
+
+A boolean indicating if the last submission was successful.
+
+***
+
+### isSubmitted
+
+```ts
+isSubmitted: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L680)
+
+A boolean indicating if the `onSubmit` function has completed successfully.
+
+Goes back to `false` at each new submission attempt.
+
+Note: you can use isSubmitting to check if the form is currently submitting.
+
+***
+
+### isSubmitting
+
+```ts
+isSubmitting: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L672)
+
+A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called.
+
+Goes back to `false` when submission completes for one of the following reasons:
+- the validation step returned errors.
+- the `onSubmit` function has completed.
+
+Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes.
+
+This is useful for displaying loading indicators or disabling form inputs during submission.
+
+***
+
+### isValidating
+
+```ts
+isValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:684](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L684)
+
+A boolean indicating if the form or any of its fields are currently validating.
+
+***
+
+### submissionAttempts
+
+```ts
+submissionAttempts: number;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:688](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L688)
+
+A counter for tracking the number of submission attempts.
+
+***
+
+### validationMetaMap
+
+```ts
+validationMetaMap: Record<ValidationErrorMapKeys, ValidationMeta | undefined>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:648](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L648)
+
+An internal mechanism used for keeping track of validation logic in a form.
+
+***
+
+### values
+
+```ts
+values: TFormData;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:629](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L629)
+
+The current values of the form fields.
diff --git a/mintlify/form/reference/type-aliases/BroadcastFormApi.md b/mintlify/form/reference/type-aliases/BroadcastFormApi.md
new file mode 100644
index 000000000..71a128aa6
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/BroadcastFormApi.md
@@ -0,0 +1,42 @@
+---
+id: BroadcastFormApi
+title: BroadcastFormApi
+---
+
+# Type Alias: BroadcastFormApi
+
+```ts
+type BroadcastFormApi = object;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:14](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L14)
+
+## Properties
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:15](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L15)
+
+***
+
+### options
+
+```ts
+options: AnyFormOptions;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:17](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L17)
+
+***
+
+### state
+
+```ts
+state: AnyFormState;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:16](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L16)
diff --git a/mintlify/form/reference/type-aliases/BroadcastFormId.md b/mintlify/form/reference/type-aliases/BroadcastFormId.md
new file mode 100644
index 000000000..71c58229a
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/BroadcastFormId.md
@@ -0,0 +1,22 @@
+---
+id: BroadcastFormId
+title: BroadcastFormId
+---
+
+# Type Alias: BroadcastFormId
+
+```ts
+type BroadcastFormId = object;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:41](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L41)
+
+## Properties
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:42](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L42)
diff --git a/mintlify/form/reference/type-aliases/BroadcastFormState.md b/mintlify/form/reference/type-aliases/BroadcastFormState.md
new file mode 100644
index 000000000..6b7fca836
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/BroadcastFormState.md
@@ -0,0 +1,32 @@
+---
+id: BroadcastFormState
+title: BroadcastFormState
+---
+
+# Type Alias: BroadcastFormState
+
+```ts
+type BroadcastFormState = object;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:9](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L9)
+
+## Properties
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:10](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L10)
+
+***
+
+### state
+
+```ts
+state: AnyFormState;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:11](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L11)
diff --git a/mintlify/form/reference/type-aliases/BroadcastFormSubmissionState.md b/mintlify/form/reference/type-aliases/BroadcastFormSubmissionState.md
new file mode 100644
index 000000000..b78fef264
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/BroadcastFormSubmissionState.md
@@ -0,0 +1,31 @@
+---
+id: BroadcastFormSubmissionState
+title: BroadcastFormSubmissionState
+---
+
+# Type Alias: BroadcastFormSubmissionState
+
+```ts
+type BroadcastFormSubmissionState = 
+  | {
+  errors: any[];
+  id: string;
+  stage: "validateAllFields" | "validate";
+  submissionAttempt: number;
+  successful: false;
+}
+  | {
+  id: string;
+  onError: unknown;
+  stage: "inflight";
+  submissionAttempt: number;
+  successful: false;
+}
+  | {
+  id: string;
+  submissionAttempt: number;
+  successful: true;
+};
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:20](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L20)
diff --git a/mintlify/form/reference/type-aliases/DeepKeyAndValueArray.md b/mintlify/form/reference/type-aliases/DeepKeyAndValueArray.md
new file mode 100644
index 000000000..603d468bc
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeyAndValueArray.md
@@ -0,0 +1,28 @@
+---
+id: DeepKeyAndValueArray
+title: DeepKeyAndValueArray
+---
+
+# Type Alias: DeepKeyAndValueArray\&lt;TParent, T, TAcc\>
+
+```ts
+type DeepKeyAndValueArray<TParent, T, TAcc> = DeepKeysAndValuesImpl<NonNullable<T[number]>, ArrayDeepKeyAndValue<TParent, T>, 
+  | TAcc
+| ArrayDeepKeyAndValue<TParent, T>>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:58](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L58)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T` *extends* `ReadonlyArray`\&lt;`any`\>
+
+### TAcc
+
+`TAcc`
diff --git a/mintlify/form/reference/type-aliases/DeepKeyAndValueObject.md b/mintlify/form/reference/type-aliases/DeepKeyAndValueObject.md
new file mode 100644
index 000000000..ac529adff
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeyAndValueObject.md
@@ -0,0 +1,32 @@
+---
+id: DeepKeyAndValueObject
+title: DeepKeyAndValueObject
+---
+
+# Type Alias: DeepKeyAndValueObject\&lt;TParent, T, TAcc, TAllKeys\>
+
+```ts
+type DeepKeyAndValueObject<TParent, T, TAcc, TAllKeys> = TAllKeys extends any ? DeepKeysAndValuesImpl<NonNullable<T[TAllKeys]>, ObjectDeepKeyAndValue<TParent, T, TAllKeys>, 
+  | TAcc
+  | ObjectDeepKeyAndValue<TParent, T, TAllKeys>> : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:123](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L123)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T`
+
+### TAcc
+
+`TAcc`
+
+### TAllKeys
+
+`TAllKeys` *extends* [`AllObjectKeys`](/form/reference/type-aliases/AllObjectKeys)\&lt;`T`\> = [`AllObjectKeys`](/form/reference/type-aliases/AllObjectKeys)\&lt;`T`\>
diff --git a/mintlify/form/reference/type-aliases/DeepKeyAndValueTuple.md b/mintlify/form/reference/type-aliases/DeepKeyAndValueTuple.md
new file mode 100644
index 000000000..ac1fffe61
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeyAndValueTuple.md
@@ -0,0 +1,32 @@
+---
+id: DeepKeyAndValueTuple
+title: DeepKeyAndValueTuple
+---
+
+# Type Alias: DeepKeyAndValueTuple\&lt;TParent, T, TAcc, TAllKeys\>
+
+```ts
+type DeepKeyAndValueTuple<TParent, T, TAcc, TAllKeys> = TAllKeys extends any ? DeepKeysAndValuesImpl<NonNullable<T[TAllKeys]>, TupleDeepKeyAndValue<TParent, T, TAllKeys>, 
+  | TAcc
+  | TupleDeepKeyAndValue<TParent, T, TAllKeys>> : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:84](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L84)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T` *extends* `ReadonlyArray`\&lt;`any`\>
+
+### TAcc
+
+`TAcc`
+
+### TAllKeys
+
+`TAllKeys` *extends* [`AllTupleKeys`](/form/reference/type-aliases/AllTupleKeys)\&lt;`T`\> = [`AllTupleKeys`](/form/reference/type-aliases/AllTupleKeys)\&lt;`T`\>
diff --git a/mintlify/form/reference/type-aliases/DeepKeys.md b/mintlify/form/reference/type-aliases/DeepKeys.md
new file mode 100644
index 000000000..0f962b9eb
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeys.md
@@ -0,0 +1,20 @@
+---
+id: DeepKeys
+title: DeepKeys
+---
+
+# Type Alias: DeepKeys\&lt;T\>
+
+```ts
+type DeepKeys<T> = unknown extends T ? string : DeepKeysAndValues<T>["key"];
+```
+
+Defined in: [packages/form-core/src/util-types.ts:178](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L178)
+
+The keys of an object or array, deeply nested.
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/DeepKeysAndValues.md b/mintlify/form/reference/type-aliases/DeepKeysAndValues.md
new file mode 100644
index 000000000..b13747ea6
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeysAndValues.md
@@ -0,0 +1,18 @@
+---
+id: DeepKeysAndValues
+title: DeepKeysAndValues
+---
+
+# Type Alias: DeepKeysAndValues\&lt;T\>
+
+```ts
+type DeepKeysAndValues<T> = DeepKeysAndValuesImpl<T> extends AnyDeepKeyAndValue ? DeepKeysAndValuesImpl<T> : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:146](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L146)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/DeepKeysAndValuesImpl.md b/mintlify/form/reference/type-aliases/DeepKeysAndValuesImpl.md
new file mode 100644
index 000000000..87e4709db
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeysAndValuesImpl.md
@@ -0,0 +1,30 @@
+---
+id: DeepKeysAndValuesImpl
+title: DeepKeysAndValuesImpl
+---
+
+# Type Alias: DeepKeysAndValuesImpl\&lt;T, TParent, TAcc\>
+
+```ts
+type DeepKeysAndValuesImpl<T, TParent, TAcc> = unknown extends T ? 
+  | TAcc
+  | UnknownDeepKeyAndValue<TParent> : unknown extends T ? T : T extends string | number | boolean | bigint | Date ? TAcc : T extends ReadonlyArray<any> ? number extends T["length"] ? DeepKeyAndValueArray<TParent, T, TAcc> : DeepKeyAndValueTuple<TParent, T, TAcc> : keyof T extends never ? 
+  | TAcc
+  | UnknownDeepKeyAndValue<TParent> : T extends object ? DeepKeyAndValueObject<TParent, T, TAcc> : TAcc;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:151](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L151)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue) = `never`
+
+### TAcc
+
+`TAcc` = `never`
diff --git a/mintlify/form/reference/type-aliases/DeepKeysOfType.md b/mintlify/form/reference/type-aliases/DeepKeysOfType.md
new file mode 100644
index 000000000..ac96c71bd
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepKeysOfType.md
@@ -0,0 +1,24 @@
+---
+id: DeepKeysOfType
+title: DeepKeysOfType
+---
+
+# Type Alias: DeepKeysOfType\&lt;TData, TValue\>
+
+```ts
+type DeepKeysOfType<TData, TValue> = Extract<DeepKeysAndValues<TData>, AnyDeepKeyAndValue<string, TValue>>["key"];
+```
+
+Defined in: [packages/form-core/src/util-types.ts:194](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L194)
+
+The keys of an object or array, deeply nested and only with a value of TValue
+
+## Type Parameters
+
+### TData
+
+`TData`
+
+### TValue
+
+`TValue`
diff --git a/mintlify/form/reference/type-aliases/DeepRecord.md b/mintlify/form/reference/type-aliases/DeepRecord.md
new file mode 100644
index 000000000..132d8ecca
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepRecord.md
@@ -0,0 +1,18 @@
+---
+id: DeepRecord
+title: DeepRecord
+---
+
+# Type Alias: DeepRecord\&lt;T\>
+
+```ts
+type DeepRecord<T> = { [TRecord in DeepKeysAndValues<T> as TRecord["key"]]: TRecord["value"] };
+```
+
+Defined in: [packages/form-core/src/util-types.ts:171](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L171)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/DeepValue.md b/mintlify/form/reference/type-aliases/DeepValue.md
new file mode 100644
index 000000000..1a2ae01fe
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DeepValue.md
@@ -0,0 +1,24 @@
+---
+id: DeepValue
+title: DeepValue
+---
+
+# Type Alias: DeepValue\&lt;TValue, TAccessor\>
+
+```ts
+type DeepValue<TValue, TAccessor> = unknown extends TValue ? TValue : TAccessor extends DeepKeys<TValue> ? DeepRecord<TValue>[TAccessor] : never;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:185](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L185)
+
+Infer the type of a deeply nested property within an object or an array.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TAccessor
+
+`TAccessor`
diff --git a/mintlify/form/reference/type-aliases/DerivedFormState.md b/mintlify/form/reference/type-aliases/DerivedFormState.md
new file mode 100644
index 000000000..53ae214dd
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/DerivedFormState.md
@@ -0,0 +1,228 @@
+---
+id: DerivedFormState
+title: DerivedFormState
+---
+
+# Type Alias: DerivedFormState\&lt;TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer\>
+
+```ts
+type DerivedFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer> = object;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:713](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L713)
+
+## Extended by
+
+- [`FormState`](/form/reference/interfaces/FormState)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TOnMount
+
+`TOnMount` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChange
+
+`TOnChange` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnChangeAsync
+
+`TOnChangeAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlur
+
+`TOnBlur` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnBlurAsync
+
+`TOnBlurAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmit
+
+`TOnSubmit` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnSubmitAsync
+
+`TOnSubmitAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamic
+
+`TOnDynamic` *extends* `undefined` \| `FormValidateOrFn`\&lt;`TFormData`\>
+
+### TOnDynamicAsync
+
+`TOnDynamicAsync` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+### TOnServer
+
+`TOnServer` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`TFormData`\>
+
+## Properties
+
+### canSubmit
+
+```ts
+canSubmit: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:786](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L786)
+
+A boolean indicating if the form can be submitted based on its current state.
+
+***
+
+### errors
+
+```ts
+errors: NonNullable<
+  | UnwrapFormValidateOrFn<TOnMount>
+  | UnwrapFormValidateOrFn<TOnChange>
+  | UnwrapFormAsyncValidateOrFn<TOnChangeAsync>
+  | UnwrapFormValidateOrFn<TOnBlur>
+  | UnwrapFormAsyncValidateOrFn<TOnBlurAsync>
+  | UnwrapFormValidateOrFn<TOnSubmit>
+  | UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>
+  | UnwrapFormValidateOrFn<TOnDynamic>
+  | UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>
+  | UnwrapFormAsyncValidateOrFn<TOnServer>>[];
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:737](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L737)
+
+The error array for the form itself.
+
+***
+
+### fieldMeta
+
+```ts
+fieldMeta: Partial<Record<DeepKeys<TFormData>, AnyFieldLikeMeta>>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:790](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L790)
+
+A record of field metadata for each field in the form.
+
+***
+
+### isBlurred
+
+```ts
+isBlurred: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:766](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L766)
+
+A boolean indicating if any of the form fields have been blurred.
+
+***
+
+### isDefaultValue
+
+```ts
+isDefaultValue: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:778](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L778)
+
+A boolean indicating if all of the form's fields are the same as default values.
+
+***
+
+### isDirty
+
+```ts
+isDirty: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:770](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L770)
+
+A boolean indicating if any of the form's fields' values have been modified by the user. Evaluates `true` if the user have modified at least one of the fields. Opposite of `isPristine`.
+
+***
+
+### isFieldsValid
+
+```ts
+isFieldsValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:758](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L758)
+
+A boolean indicating if all the form fields are valid. Evaluates `true` if there are no field errors.
+
+***
+
+### isFieldsValidating
+
+```ts
+isFieldsValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:754](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L754)
+
+A boolean indicating if any of the form fields are currently validating.
+
+***
+
+### isFormValid
+
+```ts
+isFormValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:733](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L733)
+
+A boolean indicating if the form is valid.
+
+***
+
+### isFormValidating
+
+```ts
+isFormValidating: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:729](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L729)
+
+A boolean indicating if the form is currently validating.
+
+***
+
+### isPristine
+
+```ts
+isPristine: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:774](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L774)
+
+A boolean indicating if none of the form's fields' values have been modified by the user. Evaluates `true` if the user have not modified any of the fields. Opposite of `isDirty`.
+
+***
+
+### isTouched
+
+```ts
+isTouched: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:762](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L762)
+
+A boolean indicating if any of the form fields have been touched.
+
+***
+
+### isValid
+
+```ts
+isValid: boolean;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:782](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L782)
+
+A boolean indicating if the form and all its fields are valid. Evaluates `true` if there are no errors.
diff --git a/mintlify/form/reference/type-aliases/EventClientEventMap.md b/mintlify/form/reference/type-aliases/EventClientEventMap.md
new file mode 100644
index 000000000..79799c8b3
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/EventClientEventMap.md
@@ -0,0 +1,12 @@
+---
+id: EventClientEventMap
+title: EventClientEventMap
+---
+
+# Type Alias: EventClientEventMap
+
+```ts
+type EventClientEventMap = keyof EventMap;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:57](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L57)
diff --git a/mintlify/form/reference/type-aliases/EventClientEventNames.md b/mintlify/form/reference/type-aliases/EventClientEventNames.md
new file mode 100644
index 000000000..12c235ee1
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/EventClientEventNames.md
@@ -0,0 +1,12 @@
+---
+id: EventClientEventNames
+title: EventClientEventNames
+---
+
+# Type Alias: EventClientEventNames
+
+```ts
+type EventClientEventNames = ExtractEventNames<EventClientEventMap>;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:59](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L59)
diff --git a/mintlify/form/reference/type-aliases/ExtractGlobalFormError.md b/mintlify/form/reference/type-aliases/ExtractGlobalFormError.md
new file mode 100644
index 000000000..7706e2cea
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ExtractGlobalFormError.md
@@ -0,0 +1,18 @@
+---
+id: ExtractGlobalFormError
+title: ExtractGlobalFormError
+---
+
+# Type Alias: ExtractGlobalFormError\&lt;TFormError\>
+
+```ts
+type ExtractGlobalFormError<TFormError> = TFormError extends GlobalFormValidationError<any> ? TFormError["form"] : TFormError;
+```
+
+Defined in: [packages/form-core/src/types.ts:154](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L154)
+
+## Type Parameters
+
+### TFormError
+
+`TFormError`
diff --git a/mintlify/form/reference/type-aliases/FieldInfo.md b/mintlify/form/reference/type-aliases/FieldInfo.md
new file mode 100644
index 000000000..221b916c4
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FieldInfo.md
@@ -0,0 +1,12 @@
+---
+title: "Types / FieldInfo"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/reference/type-aliases/FieldInfo)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/reference/type-aliases/FieldMeta.md b/mintlify/form/reference/type-aliases/FieldMeta.md
new file mode 100644
index 000000000..05f33c692
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FieldMeta.md
@@ -0,0 +1,12 @@
+---
+title: "Types / FieldMeta"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/reference/type-aliases/FieldMeta)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/reference/type-aliases/FieldState.md b/mintlify/form/reference/type-aliases/FieldState.md
new file mode 100644
index 000000000..3f10b18c3
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FieldState.md
@@ -0,0 +1,12 @@
+---
+title: "Types / FieldState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/form/latest/docs/reference/type-aliases/FieldState)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/form/tree/6a73479f2c2659550a6c8b456e3e139bf0d2142e)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/form/reference/type-aliases/FieldsMap.md b/mintlify/form/reference/type-aliases/FieldsMap.md
new file mode 100644
index 000000000..87e528b6c
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FieldsMap.md
@@ -0,0 +1,25 @@
+---
+id: FieldsMap
+title: FieldsMap
+---
+
+# Type Alias: FieldsMap\&lt;TFormData, TFieldGroupData\>
+
+```ts
+type FieldsMap<TFormData, TFieldGroupData> = TFieldGroupData extends any[] ? never : string extends keyof TFieldGroupData ? never : { [K in keyof TFieldGroupData]: DeepKeysOfType<TFormData, TFieldGroupData[K]> };
+```
+
+Defined in: [packages/form-core/src/util-types.ts:203](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L203)
+
+Maps the deep keys of TFormData to the shallow keys of TFieldGroupData.
+ Since using template strings as keys is impractical, it relies on shallow keys only.
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TFieldGroupData
+
+`TFieldGroupData`
diff --git a/mintlify/form/reference/type-aliases/FormValidateFn.md b/mintlify/form/reference/type-aliases/FormValidateFn.md
new file mode 100644
index 000000000..5033b5843
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FormValidateFn.md
@@ -0,0 +1,34 @@
+---
+id: FormValidateFn
+title: FormValidateFn
+---
+
+# Type Alias: FormValidateFn()\&lt;TFormData\>
+
+```ts
+type FormValidateFn<TFormData> = (props) => unknown;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:96](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L96)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+## Parameters
+
+### props
+
+#### formApi
+
+[`FormApi`](/form/reference/classes/FormApi)\&lt;`TFormData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>
+
+#### value
+
+`TFormData`
+
+## Returns
+
+`unknown`
diff --git a/mintlify/form/reference/type-aliases/FormValidationError.md b/mintlify/form/reference/type-aliases/FormValidationError.md
new file mode 100644
index 000000000..e0713c69a
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FormValidationError.md
@@ -0,0 +1,20 @@
+---
+id: FormValidationError
+title: FormValidationError
+---
+
+# Type Alias: FormValidationError\&lt;TFormData\>
+
+```ts
+type FormValidationError<TFormData> = 
+  | ValidationError
+| GlobalFormValidationError<TFormData>;
+```
+
+Defined in: [packages/form-core/src/types.ts:132](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L132)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
diff --git a/mintlify/form/reference/type-aliases/FormValidator.md b/mintlify/form/reference/type-aliases/FormValidator.md
new file mode 100644
index 000000000..c4442e947
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/FormValidator.md
@@ -0,0 +1,78 @@
+---
+id: FormValidator
+title: FormValidator
+---
+
+# Type Alias: FormValidator\&lt;TFormData, TType, TFn\>
+
+```ts
+type FormValidator<TFormData, TType, TFn> = object;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:155](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L155)
+
+## Type Parameters
+
+### TFormData
+
+`TFormData`
+
+### TType
+
+`TType`
+
+### TFn
+
+`TFn` = `unknown`
+
+## Methods
+
+### validate()
+
+```ts
+validate(options, fn): unknown;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:156](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L156)
+
+#### Parameters
+
+##### options
+
+###### value
+
+`TType`
+
+##### fn
+
+`TFn`
+
+#### Returns
+
+`unknown`
+
+***
+
+### validateAsync()
+
+```ts
+validateAsync(options, fn): Promise<unknown>;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:157](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L157)
+
+#### Parameters
+
+##### options
+
+###### value
+
+`TType`
+
+##### fn
+
+`TFn`
+
+#### Returns
+
+`Promise`\&lt;`unknown`\>
diff --git a/mintlify/form/reference/type-aliases/Nullable.md b/mintlify/form/reference/type-aliases/Nullable.md
new file mode 100644
index 000000000..c9e88e2ac
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/Nullable.md
@@ -0,0 +1,18 @@
+---
+id: Nullable
+title: Nullable
+---
+
+# Type Alias: Nullable\&lt;T\>
+
+```ts
+type Nullable<T> = T & undefined | null;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:106](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L106)
+
+## Type Parameters
+
+### T
+
+`T`
diff --git a/mintlify/form/reference/type-aliases/ObjectAccessor.md b/mintlify/form/reference/type-aliases/ObjectAccessor.md
new file mode 100644
index 000000000..52ab4557d
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ObjectAccessor.md
@@ -0,0 +1,22 @@
+---
+id: ObjectAccessor
+title: ObjectAccessor
+---
+
+# Type Alias: ObjectAccessor\&lt;TParent, TKey\>
+
+```ts
+type ObjectAccessor<TParent, TKey> = TParent["key"] extends never ? `${TKey}` : `${TParent["key"]}.${TKey}`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:101](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L101)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### TKey
+
+`TKey` *extends* `string` \| `number`
diff --git a/mintlify/form/reference/type-aliases/ObjectValue.md b/mintlify/form/reference/type-aliases/ObjectValue.md
new file mode 100644
index 000000000..cc62d7bde
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ObjectValue.md
@@ -0,0 +1,26 @@
+---
+id: ObjectValue
+title: ObjectValue
+---
+
+# Type Alias: ObjectValue\&lt;TParent, T, TKey\>
+
+```ts
+type ObjectValue<TParent, T, TKey> = T[TKey] | Nullable<TParent["value"]>;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:108](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L108)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### T
+
+`T`
+
+### TKey
+
+`TKey` *extends* [`AllObjectKeys`](/form/reference/type-aliases/AllObjectKeys)\&lt;`T`\>
diff --git a/mintlify/form/reference/type-aliases/StandardSchemaV1.md b/mintlify/form/reference/type-aliases/StandardSchemaV1.md
new file mode 100644
index 000000000..da37a5199
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/StandardSchemaV1.md
@@ -0,0 +1,36 @@
+---
+id: StandardSchemaV1
+title: StandardSchemaV1
+---
+
+# Type Alias: StandardSchemaV1\&lt;Input, Output\>
+
+```ts
+type StandardSchemaV1<Input, Output> = object;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:120](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L120)
+
+The Standard Schema interface.
+
+## Type Parameters
+
+### Input
+
+`Input` = `unknown`
+
+### Output
+
+`Output` = `Input`
+
+## Properties
+
+### ~standard
+
+```ts
+readonly ~standard: StandardSchemaV1Props<Input, Output>;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:124](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L124)
+
+The Standard Schema properties.
diff --git a/mintlify/form/reference/type-aliases/TStandardSchemaValidatorIssue.md b/mintlify/form/reference/type-aliases/TStandardSchemaValidatorIssue.md
new file mode 100644
index 000000000..70127730d
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/TStandardSchemaValidatorIssue.md
@@ -0,0 +1,18 @@
+---
+id: TStandardSchemaValidatorIssue
+title: TStandardSchemaValidatorIssue
+---
+
+# Type Alias: TStandardSchemaValidatorIssue\&lt;TSource\>
+
+```ts
+type TStandardSchemaValidatorIssue<TSource> = TSource extends "form" ? object : TSource extends "field" ? StandardSchemaV1Issue[] : never;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:11](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L11)
+
+## Type Parameters
+
+### TSource
+
+`TSource` *extends* [`ValidationSource`](/form/reference/type-aliases/ValidationSource) = [`ValidationSource`](/form/reference/type-aliases/ValidationSource)
diff --git a/mintlify/form/reference/type-aliases/TStandardSchemaValidatorValue.md b/mintlify/form/reference/type-aliases/TStandardSchemaValidatorValue.md
new file mode 100644
index 000000000..9b8dafea3
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/TStandardSchemaValidatorValue.md
@@ -0,0 +1,42 @@
+---
+id: TStandardSchemaValidatorValue
+title: TStandardSchemaValidatorValue
+---
+
+# Type Alias: TStandardSchemaValidatorValue\&lt;TData, TSource\>
+
+```ts
+type TStandardSchemaValidatorValue<TData, TSource> = object;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L3)
+
+## Type Parameters
+
+### TData
+
+`TData`
+
+### TSource
+
+`TSource` *extends* [`ValidationSource`](/form/reference/type-aliases/ValidationSource) = [`ValidationSource`](/form/reference/type-aliases/ValidationSource)
+
+## Properties
+
+### validationSource
+
+```ts
+validationSource: TSource;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:8](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L8)
+
+***
+
+### value
+
+```ts
+value: TData;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:7](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L7)
diff --git a/mintlify/form/reference/type-aliases/TupleAccessor.md b/mintlify/form/reference/type-aliases/TupleAccessor.md
new file mode 100644
index 000000000..df75c5d68
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/TupleAccessor.md
@@ -0,0 +1,22 @@
+---
+id: TupleAccessor
+title: TupleAccessor
+---
+
+# Type Alias: TupleAccessor\&lt;TParent, TKey\>
+
+```ts
+type TupleAccessor<TParent, TKey> = `${TParent["key"] extends never ? "" : TParent["key"]}[${TKey}]`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:68](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L68)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
+
+### TKey
+
+`TKey` *extends* `string`
diff --git a/mintlify/form/reference/type-aliases/UnknownAccessor.md b/mintlify/form/reference/type-aliases/UnknownAccessor.md
new file mode 100644
index 000000000..ee7c344eb
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UnknownAccessor.md
@@ -0,0 +1,18 @@
+---
+id: UnknownAccessor
+title: UnknownAccessor
+---
+
+# Type Alias: UnknownAccessor\&lt;TParent\>
+
+```ts
+type UnknownAccessor<TParent> = TParent["key"] extends never ? string : `${TParent["key"]}.${string}`;
+```
+
+Defined in: [packages/form-core/src/util-types.ts:136](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L136)
+
+## Type Parameters
+
+### TParent
+
+`TParent` *extends* [`AnyDeepKeyAndValue`](/form/reference/interfaces/AnyDeepKeyAndValue)
diff --git a/mintlify/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn.md b/mintlify/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn.md
new file mode 100644
index 000000000..783c017a3
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UnwrapFieldAsyncValidateOrFn.md
@@ -0,0 +1,33 @@
+---
+id: UnwrapFieldAsyncValidateOrFn
+title: UnwrapFieldAsyncValidateOrFn
+---
+
+# Type Alias: UnwrapFieldAsyncValidateOrFn\&lt;TName, TValidateOrFn, TFormValidateOrFn\>
+
+```ts
+type UnwrapFieldAsyncValidateOrFn<TName, TValidateOrFn, TFormValidateOrFn> = 
+  | [TFormValidateOrFn] extends [StandardSchemaV1<any, infer TStandardOut>] ? TName extends keyof TStandardOut ? StandardSchemaV1Issue[] : undefined : undefined
+  | UnwrapFormAsyncValidateOrFnForInner<TFormValidateOrFn> extends infer TFormValidateVal ? TFormValidateVal extends object ? [DeepValue<TFormValidateVal, TName>] extends [never] ? undefined : StandardSchemaV1Issue[] : TFormValidateVal extends object ? TName extends keyof TFormValidateVal["fields"] ? TFormValidateVal["fields"][TName] : undefined : undefined : never
+  | [TValidateOrFn] extends [FieldValidateAsyncFn<any, any, any>] ? Awaited<ReturnType<TValidateOrFn>> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? StandardSchemaV1Issue[] : undefined
+  | [TValidateOrFn] extends [FormGroupValidateAsyncFn<any, any, any>] ? Awaited<ReturnType<TValidateOrFn>> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? StandardSchemaV1Issue[] : undefined;
+```
+
+Defined in: [packages/form-core/src/types.ts:333](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L333)
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `string`
+
+### TValidateOrFn
+
+`TValidateOrFn` *extends* 
+  \| `undefined`
+  \| `FieldAsyncValidateOrFn`\&lt;`any`, `any`, `any`\>
+  \| `FormGroupAsyncValidateOrFn`\&lt;`any`, `any`\>
+
+### TFormValidateOrFn
+
+`TFormValidateOrFn` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`any`\>
diff --git a/mintlify/form/reference/type-aliases/UnwrapFieldValidateOrFn.md b/mintlify/form/reference/type-aliases/UnwrapFieldValidateOrFn.md
new file mode 100644
index 000000000..a9d83ff22
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UnwrapFieldValidateOrFn.md
@@ -0,0 +1,33 @@
+---
+id: UnwrapFieldValidateOrFn
+title: UnwrapFieldValidateOrFn
+---
+
+# Type Alias: UnwrapFieldValidateOrFn\&lt;TName, TValidateOrFn, TFormValidateOrFn\>
+
+```ts
+type UnwrapFieldValidateOrFn<TName, TValidateOrFn, TFormValidateOrFn> = 
+  | [TFormValidateOrFn] extends [StandardSchemaV1<any, infer TStandardOut>] ? TName extends keyof TStandardOut ? StandardSchemaV1Issue[] : undefined : undefined
+  | UnwrapFormValidateOrFnForInner<TFormValidateOrFn> extends infer TFormValidateVal ? TFormValidateVal extends object ? [DeepValue<TFormValidateVal, TName>] extends [never] ? undefined : StandardSchemaV1Issue[] : TFormValidateVal extends object ? TName extends keyof TFormValidateVal["fields"] ? TFormValidateVal["fields"][TName] : undefined : undefined : never
+  | [TValidateOrFn] extends [FieldValidateFn<any, any, any>] ? ReturnType<TValidateOrFn> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? StandardSchemaV1Issue[] : undefined
+  | [TValidateOrFn] extends [FormGroupValidateFn<any, any, any>] ? ReturnType<TValidateOrFn> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? StandardSchemaV1Issue[] : undefined;
+```
+
+Defined in: [packages/form-core/src/types.ts:431](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L431)
+
+## Type Parameters
+
+### TName
+
+`TName` *extends* `string`
+
+### TValidateOrFn
+
+`TValidateOrFn` *extends* 
+  \| `undefined`
+  \| `FieldValidateOrFn`\&lt;`any`, `any`, `any`\>
+  \| `FormGroupValidateOrFn`\&lt;`any`, `any`, `any`\>
+
+### TFormValidateOrFn
+
+`TFormValidateOrFn` *extends* `undefined` \| `FormValidateOrFn`\&lt;`any`\>
diff --git a/mintlify/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn.md b/mintlify/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn.md
new file mode 100644
index 000000000..b10e73685
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UnwrapFormAsyncValidateOrFn.md
@@ -0,0 +1,18 @@
+---
+id: UnwrapFormAsyncValidateOrFn
+title: UnwrapFormAsyncValidateOrFn
+---
+
+# Type Alias: UnwrapFormAsyncValidateOrFn\&lt;TValidateOrFn\>
+
+```ts
+type UnwrapFormAsyncValidateOrFn<TValidateOrFn> = [TValidateOrFn] extends [FormValidateAsyncFn<any>] ? ExtractGlobalFormError<Awaited<ReturnType<TValidateOrFn>>> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? Record<string, StandardSchemaV1Issue[]> : undefined;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:177](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L177)
+
+## Type Parameters
+
+### TValidateOrFn
+
+`TValidateOrFn` *extends* `undefined` \| `FormAsyncValidateOrFn`\&lt;`any`\>
diff --git a/mintlify/form/reference/type-aliases/UnwrapFormValidateOrFn.md b/mintlify/form/reference/type-aliases/UnwrapFormValidateOrFn.md
new file mode 100644
index 000000000..9f45271d1
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UnwrapFormValidateOrFn.md
@@ -0,0 +1,18 @@
+---
+id: UnwrapFormValidateOrFn
+title: UnwrapFormValidateOrFn
+---
+
+# Type Alias: UnwrapFormValidateOrFn\&lt;TValidateOrFn\>
+
+```ts
+type UnwrapFormValidateOrFn<TValidateOrFn> = [TValidateOrFn] extends [FormValidateFn<any>] ? ExtractGlobalFormError<ReturnType<TValidateOrFn>> : [TValidateOrFn] extends [StandardSchemaV1<any, any>] ? Record<string, StandardSchemaV1Issue[]> : undefined;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:123](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L123)
+
+## Type Parameters
+
+### TValidateOrFn
+
+`TValidateOrFn` *extends* `undefined` \| `FormValidateOrFn`\&lt;`any`\>
diff --git a/mintlify/form/reference/type-aliases/Updater.md b/mintlify/form/reference/type-aliases/Updater.md
new file mode 100644
index 000000000..8967d086f
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/Updater.md
@@ -0,0 +1,22 @@
+---
+id: Updater
+title: Updater
+---
+
+# Type Alias: Updater\&lt;TInput, TOutput\>
+
+```ts
+type Updater<TInput, TOutput> = TOutput | UpdaterFn<TInput, TOutput>;
+```
+
+Defined in: [packages/form-core/src/utils.ts:16](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L16)
+
+## Type Parameters
+
+### TInput
+
+`TInput`
+
+### TOutput
+
+`TOutput` = `TInput`
diff --git a/mintlify/form/reference/type-aliases/UpdaterFn.md b/mintlify/form/reference/type-aliases/UpdaterFn.md
new file mode 100644
index 000000000..3f21b9f85
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/UpdaterFn.md
@@ -0,0 +1,32 @@
+---
+id: UpdaterFn
+title: UpdaterFn
+---
+
+# Type Alias: UpdaterFn()\&lt;TInput, TOutput\>
+
+```ts
+type UpdaterFn<TInput, TOutput> = (input) => TOutput;
+```
+
+Defined in: [packages/form-core/src/utils.ts:14](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L14)
+
+## Type Parameters
+
+### TInput
+
+`TInput`
+
+### TOutput
+
+`TOutput` = `TInput`
+
+## Parameters
+
+### input
+
+`TInput`
+
+## Returns
+
+`TOutput`
diff --git a/mintlify/form/reference/type-aliases/ValidationError.md b/mintlify/form/reference/type-aliases/ValidationError.md
new file mode 100644
index 000000000..be6aa3db7
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ValidationError.md
@@ -0,0 +1,12 @@
+---
+id: ValidationError
+title: ValidationError
+---
+
+# Type Alias: ValidationError
+
+```ts
+type ValidationError = unknown;
+```
+
+Defined in: [packages/form-core/src/types.ts:35](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L35)
diff --git a/mintlify/form/reference/type-aliases/ValidationLogicFn.md b/mintlify/form/reference/type-aliases/ValidationLogicFn.md
new file mode 100644
index 000000000..17bfe975a
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ValidationLogicFn.md
@@ -0,0 +1,22 @@
+---
+id: ValidationLogicFn
+title: ValidationLogicFn
+---
+
+# Type Alias: ValidationLogicFn()
+
+```ts
+type ValidationLogicFn = (props) => void;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:63](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L63)
+
+## Parameters
+
+### props
+
+[`ValidationLogicProps`](/form/reference/interfaces/ValidationLogicProps)
+
+## Returns
+
+`void`
diff --git a/mintlify/form/reference/type-aliases/ValidationMeta.md b/mintlify/form/reference/type-aliases/ValidationMeta.md
new file mode 100644
index 000000000..294477a84
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ValidationMeta.md
@@ -0,0 +1,26 @@
+---
+id: ValidationMeta
+title: ValidationMeta
+---
+
+# Type Alias: ValidationMeta
+
+```ts
+type ValidationMeta = object;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:603](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L603)
+
+An object representing the validation metadata for a field. Not intended for public usage.
+
+## Properties
+
+### lastAbortController
+
+```ts
+lastAbortController: AbortController;
+```
+
+Defined in: [packages/form-core/src/FormApi.ts:607](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L607)
+
+An abort controller stored in memory to cancel previous async validation attempts.
diff --git a/mintlify/form/reference/type-aliases/ValidationSource.md b/mintlify/form/reference/type-aliases/ValidationSource.md
new file mode 100644
index 000000000..a3dce69a7
--- /dev/null
+++ b/mintlify/form/reference/type-aliases/ValidationSource.md
@@ -0,0 +1,12 @@
+---
+id: ValidationSource
+title: ValidationSource
+---
+
+# Type Alias: ValidationSource
+
+```ts
+type ValidationSource = "form" | "field";
+```
+
+Defined in: [packages/form-core/src/types.ts:37](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L37)
diff --git a/mintlify/form/reference/variables/defaultValidationLogic.md b/mintlify/form/reference/variables/defaultValidationLogic.md
new file mode 100644
index 000000000..52bec01c6
--- /dev/null
+++ b/mintlify/form/reference/variables/defaultValidationLogic.md
@@ -0,0 +1,12 @@
+---
+id: defaultValidationLogic
+title: defaultValidationLogic
+---
+
+# Variable: defaultValidationLogic
+
+```ts
+const defaultValidationLogic: ValidationLogicFn;
+```
+
+Defined in: [packages/form-core/src/ValidationLogic.ts:134](https://github.com/TanStack/form/blob/main/packages/form-core/src/ValidationLogic.ts#L134)
diff --git a/mintlify/form/reference/variables/formEventClient.md b/mintlify/form/reference/variables/formEventClient.md
new file mode 100644
index 000000000..c919f4e42
--- /dev/null
+++ b/mintlify/form/reference/variables/formEventClient.md
@@ -0,0 +1,12 @@
+---
+id: formEventClient
+title: formEventClient
+---
+
+# Variable: formEventClient
+
+```ts
+const formEventClient: FormEventClient;
+```
+
+Defined in: [packages/form-core/src/EventClient.ts:70](https://github.com/TanStack/form/blob/main/packages/form-core/src/EventClient.ts#L70)
diff --git a/mintlify/form/reference/variables/standardSchemaValidators.md b/mintlify/form/reference/variables/standardSchemaValidators.md
new file mode 100644
index 000000000..a83f91317
--- /dev/null
+++ b/mintlify/form/reference/variables/standardSchemaValidators.md
@@ -0,0 +1,73 @@
+---
+id: standardSchemaValidators
+title: standardSchemaValidators
+---
+
+# Variable: standardSchemaValidators
+
+```ts
+const standardSchemaValidators: object;
+```
+
+Defined in: [packages/form-core/src/standardSchemaValidator.ts:73](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L73)
+
+## Type Declaration
+
+### validate()
+
+```ts
+validate<TSource>(__namedParameters, schema): 
+  | TStandardSchemaValidatorIssue<TSource>
+  | undefined;
+```
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`ValidationSource`](/form/reference/type-aliases/ValidationSource) = [`ValidationSource`](/form/reference/type-aliases/ValidationSource)
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`TStandardSchemaValidatorValue`](/form/reference/type-aliases/TStandardSchemaValidatorValue)\&lt;`unknown`, `TSource`\>
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)
+
+#### Returns
+
+  \| [`TStandardSchemaValidatorIssue`](/form/reference/type-aliases/TStandardSchemaValidatorIssue)\&lt;`TSource`\>
+  \| `undefined`
+
+### validateAsync()
+
+```ts
+validateAsync<TSource>(__namedParameters, schema): Promise<
+  | TStandardSchemaValidatorIssue<TSource>
+| undefined>;
+```
+
+#### Type Parameters
+
+##### TSource
+
+`TSource` *extends* [`ValidationSource`](/form/reference/type-aliases/ValidationSource)
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`TStandardSchemaValidatorValue`](/form/reference/type-aliases/TStandardSchemaValidatorValue)\&lt;`unknown`, `TSource`\>
+
+##### schema
+
+[`StandardSchemaV1`](/form/reference/type-aliases/StandardSchemaV1)
+
+#### Returns
+
+`Promise`\&lt;
+  \| [`TStandardSchemaValidatorIssue`](/form/reference/type-aliases/TStandardSchemaValidatorIssue)\&lt;`TSource`\>
+  \| `undefined`\>
diff --git a/mintlify/form/reference/variables/throttleFormState.md b/mintlify/form/reference/variables/throttleFormState.md
new file mode 100644
index 000000000..aa2e45ac5
--- /dev/null
+++ b/mintlify/form/reference/variables/throttleFormState.md
@@ -0,0 +1,22 @@
+---
+id: throttleFormState
+title: throttleFormState
+---
+
+# Variable: throttleFormState()
+
+```ts
+const throttleFormState: (...args) => void;
+```
+
+Defined in: [packages/form-core/src/utils.ts:681](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L681)
+
+## Parameters
+
+### args
+
+...\[[`AnyFormApi`](/form/reference/type-aliases/AnyFormApi)\]
+
+## Returns
+
+`void`
diff --git a/mintlify/form/typescript.md b/mintlify/form/typescript.md
new file mode 100644
index 000000000..cfb22cdf8
--- /dev/null
+++ b/mintlify/form/typescript.md
@@ -0,0 +1,14 @@
+---
+id: typescript
+title: TypeScript
+---
+
+TanStack Form is written 100% in **TypeScript** with the highest quality generics, constraints, and interfaces to make sure the library and your projects are as type-safe as possible!
+
+Things to keep in mind:
+
+- `strict: true` is required in your `tsconfig.json` to get the most out of TanStack Form's types
+- Types currently require using TypeScript v5.4 or greater
+- Changes to types in this repository are considered **non-breaking** and are usually released as **patch** semver changes (otherwise every type enhancement would be a major version!).
+- It is **highly recommended that you lock your react-form package version to a specific patch release and upgrade with the expectation that types may be fixed or upgraded between any release**
+- The non-type-related public API of TanStack Form still follows semver very strictly.
diff --git a/mintlify/hotkeys/devtools.md b/mintlify/hotkeys/devtools.md
new file mode 100644
index 000000000..a6a2d90fe
--- /dev/null
+++ b/mintlify/hotkeys/devtools.md
@@ -0,0 +1,108 @@
+---
+title: Devtools
+id: devtools
+---
+
+TanStack Hotkeys provides devtools for debugging and monitoring all your registered hotkeys in real-time. The devtools integrate seamlessly within the [TanStack Devtools](https://tanstack.com/devtools) multi-panel UI.
+
+> [!NOTE]
+> By default, the TanStack Devtools and TanStack Hotkeys Devtools will only be included in development mode. This helps keep your production bundle size minimal. If you need to include devtools in production builds (e.g., for debugging production issues), you can use the alternative "production" imports.
+
+## Features
+
+The Hotkeys devtools panel provides:
+
+- **Registered Hotkeys List** - View all currently registered hotkeys with their options and status
+- **Held Keys Display** - See which keys are currently being held down in real-time
+- **Trigger Hotkeys** - Programmatically trigger hotkey callbacks for testing without pressing keys
+- **Registration Details** - Inspect individual hotkey registrations including their target, event type, and conflict behavior
+
+## Installation
+
+Install the devtools packages for your framework:
+
+### React
+
+```sh
+npm install @tanstack/react-devtools @tanstack/react-hotkeys-devtools
+```
+
+### Preact
+
+```sh
+npm install @tanstack/preact-devtools @tanstack/preact-hotkeys-devtools
+```
+
+### Solid
+
+```sh
+npm install @tanstack/solid-devtools @tanstack/solid-hotkeys-devtools
+```
+
+### Vue
+
+```sh
+npm install @tanstack/vue-hotkeys-devtools
+```
+
+Angular and Lit do not currently ship a dedicated hotkeys devtools adapter.
+
+## Setup
+
+### React Setup
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools'
+
+function App() {
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+}
+```
+
+### Preact Setup
+
+```tsx
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/preact-hotkeys-devtools'
+
+export function App() {
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+}
+```
+
+### Solid Setup
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
+
+export function App() {
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+}
+```
+
+### Vue Setup
+
+```vue
+<script setup lang="ts">
+import { HotkeysDevtoolsPanel } from '@tanstack/vue-hotkeys-devtools'
+</script>
+
+<template>
+  <AppContent />
+  <HotkeysDevtoolsPanel />
+</template>
+```
+
+For React, Preact, and Solid, the Hotkeys panel appears alongside any other TanStack devtools plugins you have installed.
+
+## Production Builds
+
+By default, the framework devtools adapters return no-op implementations in production builds so they do not affect your production bundle behavior.
+
+React additionally exposes a production import when you explicitly want to include the plugin in production:
+
+```tsx
+import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools/production'
+```
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHeldKeys.md b/mintlify/hotkeys/framework/angular/examples/injectHeldKeys.md
new file mode 100644
index 000000000..18ee0644a
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHeldKeys.md
@@ -0,0 +1,12 @@
+---
+title: "injectHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHeldKeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHeldKeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkey.md b/mintlify/hotkeys/framework/angular/examples/injectHotkey.md
new file mode 100644
index 000000000..0bd4e99ac
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkey.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkeyRecorder.md b/mintlify/hotkeys/framework/angular/examples/injectHotkeyRecorder.md
new file mode 100644
index 000000000..89d849065
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkeyRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkeyRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkeyRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkeySequence.md b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequence.md
new file mode 100644
index 000000000..44ce5db82
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequence.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkeySequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkeySequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequenceRecorder.md
new file mode 100644
index 000000000..81913845f
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequenceRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkeySequenceRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkeySequenceRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkeySequenceRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkeySequences.md b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequences.md
new file mode 100644
index 000000000..68b9a99f8
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkeySequences.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkeySequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkeySequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectHotkeys.md b/mintlify/hotkeys/framework/angular/examples/injectHotkeys.md
new file mode 100644
index 000000000..cd9fd1ad3
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectHotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "injectHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectHotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectHotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/examples/injectKeyHold.md b/mintlify/hotkeys/framework/angular/examples/injectKeyHold.md
new file mode 100644
index 000000000..2483072c8
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/examples/injectKeyHold.md
@@ -0,0 +1,12 @@
+---
+title: "injectKeyHold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/angular/examples/injectKeyHold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/angular/injectKeyHold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/angular/guides/formatting-display.md b/mintlify/hotkeys/framework/angular/guides/formatting-display.md
new file mode 100644
index 000000000..da206108b
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/formatting-display.md
@@ -0,0 +1,79 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys includes utilities for turning hotkey strings into display-friendly labels. These utilities are framework-agnostic, but they pair naturally with Angular templates and signals.
+
+## `formatForDisplay`
+
+```ts
+import { formatForDisplay } from '@tanstack/angular-hotkeys'
+
+formatForDisplay('Mod+S')
+formatForDisplay('Mod+Shift+Z')
+```
+
+## `formatWithLabels`
+
+```ts
+import { formatWithLabels } from '@tanstack/angular-hotkeys'
+
+formatWithLabels('Mod+S')
+formatWithLabels('Mod+Shift+Z')
+```
+
+## Using Formatted Hotkeys in Angular
+
+### Keyboard Shortcut Badges
+
+```ts
+import { Component, input } from '@angular/core'
+import { formatForDisplay } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  selector: 'app-shortcut-badge',
+  template: `<kbd class="shortcut-badge">{{ formatForDisplay(hotkey()) }}</kbd>`,
+})
+export class ShortcutBadgeComponent {
+  readonly hotkey = input.required<string>()
+  readonly formatForDisplay = formatForDisplay
+}
+```
+
+### Menu Items with Hotkeys
+
+```ts
+import { Component, input } from '@angular/core'
+import { formatForDisplay, injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  selector: 'app-menu-item',
+  template: `
+    <div class="menu-item">
+      <span>{{ label() }}</span>
+      <span class="menu-shortcut">{{ formatForDisplay(hotkey()) }}</span>
+    </div>
+  `,
+})
+export class MenuItemComponent {
+  readonly label = input.required<string>()
+  readonly hotkey = input.required<string>()
+  readonly onAction = input.required<() => void>()
+  readonly formatForDisplay = formatForDisplay
+
+  constructor() {
+    injectHotkey(() => this.hotkey(), () => this.onAction()())
+  }
+}
+```
+
+## Validation
+
+```ts
+import { validateHotkey } from '@tanstack/angular-hotkeys'
+
+const result = validateHotkey('Alt+A')
+```
diff --git a/mintlify/hotkeys/framework/angular/guides/hotkey-recording.md b/mintlify/hotkeys/framework/angular/guides/hotkey-recording.md
new file mode 100644
index 000000000..a919d5480
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/hotkey-recording.md
@@ -0,0 +1,96 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `injectHotkeyRecorder` API for building shortcut customization UIs in Angular.
+
+## Basic Usage
+
+```ts
+import { Component } from '@angular/core'
+import {
+  formatForDisplay,
+  injectHotkeyRecorder,
+} from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    <button (click)="recorder.isRecording() ? recorder.stopRecording() : recorder.startRecording()">
+      {{
+        recorder.isRecording()
+          ? 'Press a key combination...'
+          : recorder.recordedHotkey()
+            ? formatForDisplay(recorder.recordedHotkey()!)
+            : 'Click to record'
+      }}
+    </button>
+    @if (recorder.isRecording()) {
+      <button (click)="recorder.cancelRecording()">Cancel</button>
+    }
+  `,
+})
+export class ShortcutRecorderComponent {
+  readonly formatForDisplay = formatForDisplay
+  readonly recorder = injectHotkeyRecorder({
+    onRecord: (hotkey) => {
+      console.log('Recorded:', hotkey)
+    },
+  })
+}
+```
+
+## Return Value
+
+- `isRecording()`: Angular signal getter indicating whether recording is active
+- `recordedHotkey()`: Angular signal getter with the most recently recorded hotkey
+- `startRecording()`: start listening for key presses
+- `stopRecording()`: stop listening and keep the current recording
+- `cancelRecording()`: stop listening and discard the in-progress recording
+
+## Options
+
+```ts
+injectHotkeyRecorder({
+  onRecord: (hotkey) => {},
+  onCancel: () => {},
+  onClear: () => {},
+})
+```
+
+## Global Default Options via Provider
+
+```ts
+import { ApplicationConfig } from '@angular/core'
+import { provideHotkeys } from '@tanstack/angular-hotkeys'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHotkeys({
+      hotkeyRecorder: {
+        onCancel: () => console.log('Recording cancelled'),
+      },
+    }),
+  ],
+}
+```
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```ts
+injectHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+## Recording Behavior
+
+- Modifier-only presses do not complete a recording.
+- Modifier plus key combinations record the full shortcut.
+- Escape cancels recording.
+- Backspace and Delete clear the shortcut.
+- Recorded values are normalized to portable `Mod` format.
diff --git a/mintlify/hotkeys/framework/angular/guides/hotkeys.md b/mintlify/hotkeys/framework/angular/guides/hotkeys.md
new file mode 100644
index 000000000..833e9c5d2
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/hotkeys.md
@@ -0,0 +1,277 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `injectHotkey` API is the primary way to register keyboard shortcuts in Angular applications. It wraps the singleton `HotkeyManager` with injection-context lifecycle management and Angular signal-friendly reactive options.
+
+## Basic Usage
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class AppComponent {
+  constructor() {
+    injectHotkey('Mod+S', () => {
+      saveDocument()
+    })
+  }
+}
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```ts
+injectHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)
+  console.log(context.parsedHotkey)
+})
+```
+
+## Default Options
+
+`injectHotkey` uses the same core defaults as the framework-agnostic manager:
+
+```ts
+injectHotkey('Mod+S', callback, {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined,
+  target: document,
+  platform: undefined,
+  conflictBehavior: 'warn',
+})
+```
+
+## Reactive Options
+
+For reactive state, pass an accessor function as the third argument.
+
+### `enabled`
+
+When `enabled` is false, the hotkey **stays registered** (visible in devtools); only the callback is suppressed.
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class EditorComponent {
+  readonly isEditing = signal(false)
+
+  constructor() {
+    injectHotkey('Mod+S', () => save(), () => ({
+      enabled: this.isEditing(),
+    }))
+  }
+}
+```
+
+### `target`
+
+```ts
+import { Component, ElementRef, viewChild } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `<div #panel tabindex="0">Panel content</div>`,
+})
+export class PanelComponent {
+  private readonly panel = viewChild<ElementRef<HTMLDivElement>>('panel')
+
+  constructor() {
+    injectHotkey('Escape', () => closePanel(), () => ({
+      target: this.panel()?.nativeElement ?? null,
+    }))
+  }
+}
+```
+
+## Global Default Options via Provider
+
+```ts
+import { ApplicationConfig } from '@angular/core'
+import { provideHotkeys } from '@tanstack/angular-hotkeys'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHotkeys({
+      hotkey: { preventDefault: false, ignoreInputs: false },
+    }),
+  ],
+}
+```
+
+## Common Options
+
+### `requireReset`
+
+```ts
+injectHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+```ts
+injectHotkey('K', () => openSearch())
+injectHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+### `conflictBehavior`
+
+```ts
+injectHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+```ts
+injectHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Automatic Cleanup
+
+Registrations are cleaned up automatically when the owning injection context is destroyed.
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use `injectHotkeys` (plural):
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkeys } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class EditorComponent {
+  constructor() {
+    injectHotkeys([
+      { hotkey: 'Mod+S', callback: () => this.save() },
+      { hotkey: 'Mod+Z', callback: () => this.undo() },
+      { hotkey: 'Escape', callback: () => this.close() },
+    ])
+  }
+}
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```ts
+injectHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => this.save() },
+    { hotkey: 'Mod+Z', callback: () => this.undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Pass a getter for reactive arrays driven by Angular signals:
+
+```ts
+shortcuts = signal([...])
+
+constructor() {
+  injectHotkeys(
+    () => this.shortcuts().map((s) => ({
+      hotkey: s.key,
+      callback: s.action,
+    })),
+  )
+}
+```
+
+The function tracks signal dependencies and diffs registrations automatically.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```ts
+injectHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```ts
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+injectHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `injectHotkeyRegistrations` API to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkeyRegistrations } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    <h2>Keyboard Shortcuts</h2>
+    <ul>
+      @for (reg of registrations().hotkeys; track reg.hotkey) {
+        <li>
+          <kbd>{{ reg.hotkey }}</kbd>
+          @if (reg.meta?.name) {
+            <span> — {{ reg.meta.name }}</span>
+          }
+          @if (reg.meta?.description) {
+            <p>{{ reg.meta.description }}</p>
+          }
+        </li>
+      }
+    </ul>
+    @if (registrations().sequences.length > 0) {
+      <h2>Sequences</h2>
+      <ul>
+        @for (reg of registrations().sequences; track reg.sequence.join(' ')) {
+          <li>
+            <kbd>{{ reg.sequence.join(' → ') }}</kbd>
+            @if (reg.meta?.name) {
+              <span> — {{ reg.meta.name }}</span>
+            }
+          </li>
+        }
+      </ul>
+    }
+  `,
+})
+export class ShortcutPaletteComponent {
+  readonly registrations = injectHotkeyRegistrations()
+}
+```
+
+The returned signal provides an object with a `hotkeys` array containing registration objects with the hotkey string, options (including `meta`), and enabled state, and a `sequences` array containing sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+You can access the underlying manager directly when needed:
+
+```ts
+import { getHotkeyManager } from '@tanstack/angular-hotkeys'
+
+const manager = getHotkeyManager()
+manager.isRegistered('Mod+S')
+manager.getRegistrationCount()
+```
diff --git a/mintlify/hotkeys/framework/angular/guides/key-state-tracking.md b/mintlify/hotkeys/framework/angular/guides/key-state-tracking.md
new file mode 100644
index 000000000..6b5bc3a09
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/key-state-tracking.md
@@ -0,0 +1,96 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three Angular APIs for tracking live keyboard state: `injectHeldKeys`, `injectHeldKeyCodes`, and `injectKeyHold`.
+
+## `injectHeldKeys`
+
+```ts
+import { Component } from '@angular/core'
+import { injectHeldKeys } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    <div>
+      {{ heldKeys().length > 0 ? heldKeys().join(' + ') : 'No keys held' }}
+    </div>
+  `,
+})
+export class KeyDisplayComponent {
+  readonly heldKeys = injectHeldKeys()
+}
+```
+
+## `injectHeldKeyCodes`
+
+```ts
+import { injectHeldKeyCodes } from '@tanstack/angular-hotkeys'
+
+readonly heldCodes = injectHeldKeyCodes()
+```
+
+## `injectKeyHold`
+
+```ts
+import { injectKeyHold } from '@tanstack/angular-hotkeys'
+
+readonly isShiftHeld = injectKeyHold('Shift')
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+```ts
+import { Component } from '@angular/core'
+import { injectKeyHold } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    @if (isShiftHeld()) {
+      <button>Permanently Delete</button>
+    } @else {
+      <button>Move to Trash</button>
+    }
+  `,
+})
+export class FileActionsComponent {
+  readonly isShiftHeld = injectKeyHold('Shift')
+}
+```
+
+### Debugging Key Display
+
+```ts
+import { Component } from '@angular/core'
+import {
+  formatForDisplay,
+  injectHeldKeyCodes,
+  injectHeldKeys,
+  type RegisterableHotkey,
+} from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class KeyDebuggerComponent {
+  readonly heldKeys = injectHeldKeys()
+  readonly heldCodes = injectHeldKeyCodes()
+  readonly formatKey = (k: string) =>
+    formatForDisplay(k as RegisterableHotkey, { useSymbols: true })
+}
+```
+
+## Under the Hood
+
+All three APIs subscribe to the singleton `KeyStateTracker`:
+
+```ts
+import { getKeyStateTracker } from '@tanstack/angular-hotkeys'
+
+const tracker = getKeyStateTracker()
+tracker.getHeldKeys()
+tracker.isKeyHeld('Shift')
+```
diff --git a/mintlify/hotkeys/framework/angular/guides/sequence-recording.md b/mintlify/hotkeys/framework/angular/guides/sequence-recording.md
new file mode 100644
index 000000000..8eaf2ba9b
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/sequence-recording.md
@@ -0,0 +1,12 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+Use `injectHotkeySequenceRecorder` from `@tanstack/angular-hotkeys` for sequence recording. It returns signals: `isRecording()`, `steps()`, `recordedSequence()`, and methods `startRecording`, `stopRecording`, `cancelRecording`, `commitRecording`.
+
+Options match the core `HotkeySequenceRecorder` class. Provide defaults via `provideHotkeys({ hotkeySequenceRecorder: { ... } })`.
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
diff --git a/mintlify/hotkeys/framework/angular/guides/sequences.md b/mintlify/hotkeys/framework/angular/guides/sequences.md
new file mode 100644
index 000000000..a2810887d
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/guides/sequences.md
@@ -0,0 +1,153 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences in Angular, where keys are pressed one after another rather than simultaneously.
+
+## Basic Usage
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkeySequence } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class AppComponent {
+  constructor() {
+    injectHotkeySequence(['G', 'G'], () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+  }
+}
+```
+
+## Many sequences at once
+
+Use `injectHotkeySequences` when you want several sequences (or a list built from data) in one injection context, instead of many `injectHotkeySequence` calls.
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkeySequences } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class AppComponent {
+  constructor() {
+    injectHotkeySequences([
+      {
+        sequence: ['G', 'G'],
+        callback: () =>
+          window.scrollTo({ top: 0, behavior: 'smooth' }),
+      },
+      {
+        sequence: ['D', 'D'],
+        callback: () => console.log('delete line'),
+        options: { timeout: 500 },
+      },
+    ])
+  }
+}
+```
+
+Options merge like `injectHotkeys`: `provideHotkeys` defaults, then `commonOptions`, then each definition’s `options`.
+
+## Sequence Options
+
+```ts
+injectHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,
+  enabled: true,
+})
+```
+
+### Reactive `enabled`
+
+When disabled, the sequence **stays registered** (visible in devtools); only execution is suppressed.
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectHotkeySequence } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class VimModeComponent {
+  readonly isVimMode = signal(true)
+
+  constructor() {
+    injectHotkeySequence(['G', 'G'], () => scrollToTop(), () => ({
+      enabled: this.isVimMode(),
+    }))
+  }
+}
+```
+
+## Global Default Options via Provider
+
+```ts
+import { ApplicationConfig } from '@angular/core'
+import { provideHotkeys } from '@tanstack/angular-hotkeys'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHotkeys({
+      hotkeySequence: { timeout: 1500 },
+    }),
+  ],
+}
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```ts
+injectHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/angular/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Chained modifier chords
+
+You can repeat the same modifier across consecutive steps:
+
+```ts
+injectHotkeySequence(['Shift+R', 'Shift+T'], () => doNextAction())
+```
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone) are ignored: they do not advance the sequence and do not reset progress, so a user can press Shift alone between chords without breaking the sequence.
+
+## Common Patterns
+
+### Vim-Style Navigation
+
+```ts
+injectHotkeySequence(['G', 'G'], () => scrollToTop())
+injectHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+injectHotkeySequence(['D', 'D'], () => deleteLine())
+injectHotkeySequence(['D', 'W'], () => deleteWord())
+injectHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+```
+
+### Konami Code
+
+```ts
+injectHotkeySequence(
+  ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'B', 'A'],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+## Under the Hood
+
+`injectHotkeySequence` uses the singleton `SequenceManager`. You can also access it directly:
+
+```ts
+import {
+  createSequenceMatcher,
+  getSequenceManager,
+} from '@tanstack/angular-hotkeys'
+
+const manager = getSequenceManager()
+const matcher = createSequenceMatcher(['G', 'G'], { timeout: 1000 })
+```
diff --git a/mintlify/hotkeys/framework/angular/quick-start.md b/mintlify/hotkeys/framework/angular/quick-start.md
new file mode 100644
index 000000000..f2c40516b
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/quick-start.md
@@ -0,0 +1,172 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Hotkeys installed yet? See the [Installation](/hotkeys/installation) page for instructions.
+
+## Your First Hotkey
+
+The `injectHotkey` API is the primary way to register keyboard shortcuts in Angular:
+
+```ts
+import { Component } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>`,
+})
+export class AppComponent {
+  constructor() {
+    injectHotkey('Mod+S', () => {
+      saveDocument()
+    })
+  }
+}
+```
+
+The `Mod` modifier automatically resolves to `Meta` (Command) on macOS and `Control` on Windows/Linux, so your shortcuts work across platforms without extra logic.
+
+## Common Patterns
+
+### Multiple Hotkeys
+
+```ts
+constructor() {
+  injectHotkey('Mod+S', () => save())
+  injectHotkey('Mod+Z', () => undo())
+  injectHotkey('Mod+Shift+Z', () => redo())
+  injectHotkey('Mod+F', () => openSearch())
+  injectHotkey('Escape', () => closeDialog())
+}
+```
+
+### Scoped Hotkeys with `viewChild`
+
+```ts
+import { Component, ElementRef, viewChild } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    <div #panel tabindex="0">
+      <p>Press Escape while focused here to close</p>
+    </div>
+  `,
+})
+export class PanelComponent {
+  private readonly panel = viewChild<ElementRef<HTMLDivElement>>('panel')
+
+  constructor() {
+    injectHotkey('Escape', () => closePanel(), () => ({
+      target: this.panel()?.nativeElement ?? null,
+    }))
+  }
+}
+```
+
+### Conditional Hotkeys
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({ standalone: true, template: `` })
+export class ModalComponent {
+  readonly isOpen = signal(true)
+
+  constructor() {
+    injectHotkey('Escape', () => this.isOpen.set(false), () => ({
+      enabled: this.isOpen(),
+    }))
+  }
+}
+```
+
+### Multi-Key Sequences
+
+```ts
+import { injectHotkeySequence } from '@tanstack/angular-hotkeys'
+
+constructor() {
+  injectHotkeySequence(['G', 'G'], () => scrollToTop())
+  injectHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+}
+```
+
+### Tracking Held Keys
+
+```ts
+import { Component } from '@angular/core'
+import { injectHeldKeys, injectKeyHold } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="status-bar">
+      @if (isShiftHeld()) {
+        <span>Shift mode active</span>
+      }
+      @if (heldKeys().length > 0) {
+        <span>Keys: {{ heldKeys().join('+') }}</span>
+      }
+    </div>
+  `,
+})
+export class StatusBarComponent {
+  readonly heldKeys = injectHeldKeys()
+  readonly isShiftHeld = injectKeyHold('Shift')
+}
+```
+
+### Displaying Hotkeys in the UI
+
+```ts
+import { Component } from '@angular/core'
+import { formatForDisplay, injectHotkey } from '@tanstack/angular-hotkeys'
+
+@Component({
+  standalone: true,
+  template: `<button>Save <kbd>{{ saveLabel }}</kbd></button>`,
+})
+export class SaveButtonComponent {
+  readonly saveLabel = formatForDisplay('Mod+S')
+
+  constructor() {
+    injectHotkey('Mod+S', () => save())
+  }
+}
+```
+
+## Default Options Provider
+
+Use `provideHotkeys` to configure default options for your Angular app:
+
+```ts
+import { ApplicationConfig } from '@angular/core'
+import { provideHotkeys } from '@tanstack/angular-hotkeys'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHotkeys({
+      hotkey: { preventDefault: true },
+      hotkeySequence: { timeout: 1500 },
+      hotkeyRecorder: { onCancel: () => console.log('Recording cancelled') },
+    }),
+  ],
+}
+```
+
+## Next Steps
+
+- [Hotkeys Guide](/hotkeys/framework/angular/guides/hotkeys)
+- [Sequences Guide](/hotkeys/framework/angular/guides/sequences)
+- [Hotkey Recording Guide](/hotkeys/framework/angular/guides/hotkey-recording)
+- [Sequence Recording Guide](/hotkeys/framework/angular/guides/sequence-recording)
+- [Key State Tracking Guide](/hotkeys/framework/angular/guides/key-state-tracking)
+- [Formatting & Display Guide](/hotkeys/framework/angular/guides/formatting-display)
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/angular/reference/functions/injectDefaultHotkeysOptions.md
new file mode 100644
index 000000000..66fd60acf
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: injectDefaultHotkeysOptions
+title: injectDefaultHotkeysOptions
+---
+
+# Function: injectDefaultHotkeysOptions()
+
+```ts
+function injectDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [hotkeys-provider.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L42)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeyCodes.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeyCodes.md
new file mode 100644
index 000000000..7aebb38b4
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeyCodes.md
@@ -0,0 +1,39 @@
+---
+id: injectHeldKeyCodes
+title: injectHeldKeyCodes
+---
+
+# Function: injectHeldKeyCodes()
+
+```ts
+function injectHeldKeyCodes(): Signal<Record<string, string>>;
+```
+
+Defined in: [injectHeldKeyCodes.ts:28](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHeldKeyCodes.ts#L28)
+
+Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.
+
+Useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+## Returns
+
+`Signal`\&lt;`Record`\&lt;`string`, `string`\>\>
+
+Signal of record mapping normalized key names to their `event.code` values
+
+## Example
+
+```ts
+@Component({
+  template: `
+    @for (key of heldKeys(); track key) {
+      <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>
+    }
+  `,
+})
+export class KeyDebugComponent {
+  heldKeys = injectHeldKeys()
+  heldCodes = injectHeldKeyCodes()
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeys.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeys.md
new file mode 100644
index 000000000..dff2d0a71
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHeldKeys.md
@@ -0,0 +1,34 @@
+---
+id: injectHeldKeys
+title: injectHeldKeys
+---
+
+# Function: injectHeldKeys()
+
+```ts
+function injectHeldKeys(): Signal<string[]>;
+```
+
+Defined in: [injectHeldKeys.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHeldKeys.ts#L23)
+
+Angular inject-based API that returns a signal of currently held keyboard keys.
+
+Subscribes to the global KeyStateTracker and updates whenever keys are
+pressed or released.
+
+## Returns
+
+`Signal`\&lt;`string`[]\>
+
+Signal of array of currently held key names
+
+## Example
+
+```ts
+@Component({
+  template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,
+})
+export class KeyDisplayComponent {
+  heldKeys = injectHeldKeys()
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkey.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkey.md
new file mode 100644
index 000000000..7ad002713
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkey.md
@@ -0,0 +1,91 @@
+---
+id: injectHotkey
+title: injectHotkey
+---
+
+# Function: injectHotkey()
+
+```ts
+function injectHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [injectHotkey.ts:85](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkey.ts#L85)
+
+Angular inject-based API for registering a keyboard hotkey.
+
+Uses the singleton HotkeyManager for efficient event handling.
+The callback receives both the keyboard event and a context object
+containing the hotkey string and parsed hotkey.
+
+Call in an injection context (e.g. constructor or field initializer).
+Uses effect() to track reactive dependencies and update registration
+when options or the callback change.
+`enabled: false` keeps the registration (visible in devtools) and only suppresses firing; the same
+handle is updated instead of unregistering and re-registering when identity is unchanged.
+
+## Parameters
+
+### hotkey
+
+The hotkey string (e.g. 'Mod+S', 'Escape') or getter function
+
+`RegisterableHotkey` | () => `RegisterableHotkey`
+
+### callback
+
+`HotkeyCallback`
+
+The function to call when the hotkey is pressed
+
+### options
+
+Options for the hotkey behavior, or getter for reactive options
+
+[`InjectHotkeyOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions) | () => [`InjectHotkeyOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions)
+
+## Returns
+
+`void`
+
+## Examples
+
+```ts
+@Component({ ... })
+export class SaveButtonComponent {
+  private readonly saveCount = signal(0)
+
+  constructor() {
+    injectHotkey('Mod+S', (event, { hotkey }) => {
+      event.preventDefault()
+      this.saveCount.update(c => c + 1)
+    })
+  }
+}
+```
+
+```ts
+@Component({ ... })
+export class ModalComponent {
+  isOpen = signal(true)
+
+  constructor() {
+    injectHotkey('Escape', () => this.close(), () => ({ enabled: this.isOpen() }))
+  }
+}
+```
+
+```ts
+@Component({ ... })
+export class EditorComponent {
+  private readonly editorRef = viewChild<ElementRef<HTMLDivElement>>('editorRef')
+
+  constructor() {
+    injectHotkey('Mod+B', () => this.toggleBold(), () => ({
+      target: this.editorRef()?.nativeElement ?? null,
+    }))
+  }
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRecorder.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRecorder.md
new file mode 100644
index 000000000..3cdf8ed15
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRecorder.md
@@ -0,0 +1,53 @@
+---
+id: injectHotkeyRecorder
+title: injectHotkeyRecorder
+---
+
+# Function: injectHotkeyRecorder()
+
+```ts
+function injectHotkeyRecorder(options): AngularHotkeyRecorder;
+```
+
+Defined in: [injectHotkeyRecorder.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L58)
+
+Angular inject-based API for recording keyboard shortcuts.
+
+Thin wrapper around the framework-agnostic HotkeyRecorder class: captures
+keyboard events, converts them to hotkey strings, and handles Escape to
+cancel or Backspace/Delete to clear.
+
+## Parameters
+
+### options
+
+Configuration options for the recorder (or getter)
+
+`HotkeyRecorderOptions` | () => `HotkeyRecorderOptions`
+
+## Returns
+
+[`AngularHotkeyRecorder`](/hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder)
+
+Object with recording state signals and control functions
+
+## Example
+
+```ts
+@Component({ ... })
+export class ShortcutSettingsComponent {
+  shortcut = signal<Hotkey>('Mod+S')
+  recorder = injectHotkeyRecorder({
+    onRecord: (hotkey) => this.shortcut.set(hotkey),
+    onCancel: () => console.log('Recording cancelled'),
+  })
+
+  constructor() {
+    injectHotkey(
+      () => this.shortcut(),
+      () => this.handleSave(),
+      () => ({ enabled: !this.recorder.isRecording() }),
+    )
+  }
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRegistrations.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRegistrations.md
new file mode 100644
index 000000000..096074603
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeyRegistrations.md
@@ -0,0 +1,27 @@
+---
+id: injectHotkeyRegistrations
+title: injectHotkeyRegistrations
+---
+
+# Function: injectHotkeyRegistrations()
+
+```ts
+function injectHotkeyRegistrations(): HotkeyRegistrationsResult;
+```
+
+Defined in: [injectHotkeyRegistrations.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRegistrations.ts#L35)
+
+Angular injectable that reactively reads all hotkey and sequence registrations
+from the singleton managers.
+
+This is a standalone injectable that does NOT require the HotkeysProvider.
+It subscribes to both HotkeyManager and SequenceManager stores and
+triggers change detection when registrations change.
+
+Must be called in an injection context (constructor, factory, or `inject()`).
+
+## Returns
+
+[`HotkeyRegistrationsResult`](/hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult)
+
+Object with `hotkeys` and `sequences` signals
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequence.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequence.md
new file mode 100644
index 000000000..b932a9dd9
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequence.md
@@ -0,0 +1,66 @@
+---
+id: injectHotkeySequence
+title: injectHotkeySequence
+---
+
+# Function: injectHotkeySequence()
+
+```ts
+function injectHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [injectHotkeySequence.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequence.ts#L58)
+
+Angular inject-based API for registering a keyboard shortcut sequence (Vim-style).
+
+Allows you to register multi-key sequences like 'g g' or 'd d' that trigger
+when the full sequence is pressed within a timeout.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+Array of hotkey strings that form the sequence (or getter function)
+
+`HotkeySequence` | () => `HotkeySequence`
+
+### callback
+
+`HotkeyCallback`
+
+Function to call when the sequence is completed
+
+### options
+
+Options for the sequence behavior (or getter function). `enabled: false` still registers
+  the sequence (visible in devtools); only execution is suppressed.
+
+[`InjectHotkeySequenceOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions) | () => [`InjectHotkeySequenceOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions)
+
+## Returns
+
+`void`
+
+## Example
+
+```ts
+@Component({ ... })
+export class VimEditorComponent {
+  lastSequence = signal<string | null>(null)
+
+  constructor() {
+    injectHotkeySequence(['G', 'G'], () => this.lastSequence.set('gg → Go to top'))
+    injectHotkeySequence(['D', 'D'], () => this.lastSequence.set('dd → Delete line'))
+    injectHotkeySequence(['C', 'I', 'W'], () => this.lastSequence.set('ciw'), { timeout: 500 })
+    injectHotkeySequence(['Shift+R', 'Shift+T'], () => this.lastSequence.set('⇧R⇧T'))
+  }
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequenceRecorder.md
new file mode 100644
index 000000000..4c9a10260
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequenceRecorder.md
@@ -0,0 +1,24 @@
+---
+id: injectHotkeySequenceRecorder
+title: injectHotkeySequenceRecorder
+---
+
+# Function: injectHotkeySequenceRecorder()
+
+```ts
+function injectHotkeySequenceRecorder(options): AngularHotkeySequenceRecorder;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:31](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L31)
+
+Angular inject-based API for recording multi-chord sequences.
+
+## Parameters
+
+### options
+
+`HotkeySequenceRecorderOptions` | () => `HotkeySequenceRecorderOptions`
+
+## Returns
+
+[`AngularHotkeySequenceRecorder`](/hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequences.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequences.md
new file mode 100644
index 000000000..ffdfd8bfd
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeySequences.md
@@ -0,0 +1,55 @@
+---
+id: injectHotkeySequences
+title: injectHotkeySequences
+---
+
+# Function: injectHotkeySequences()
+
+```ts
+function injectHotkeySequences(sequences, commonOptions): void;
+```
+
+Defined in: [injectHotkeySequences.ts:51](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequences.ts#L51)
+
+Angular inject-based API for registering multiple keyboard shortcut sequences at once (Vim-style).
+
+Uses the singleton SequenceManager. Call in an injection context (e.g. constructor).
+Uses `effect()` to track reactive dependencies when definitions or options are getters.
+
+Options are merged in this order:
+provideHotkeys defaults &lt; commonOptions &lt; per-definition options
+
+Definitions with an empty `sequence` are skipped. Disabled sequences (`enabled: false`)
+remain registered so they stay visible in devtools; the core manager suppresses execution.
+
+## Parameters
+
+### sequences
+
+Array of sequence definitions, or getter returning them
+
+[`InjectHotkeySequenceDefinition`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition)[] | () => [`InjectHotkeySequenceDefinition`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition)[]
+
+### commonOptions
+
+Shared options for all sequences, or getter
+
+[`InjectHotkeySequenceOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions) | () => [`InjectHotkeySequenceOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions)
+
+## Returns
+
+`void`
+
+## Example
+
+```ts
+@Component({ ... })
+export class VimComponent {
+  constructor() {
+    injectHotkeySequences([
+      { sequence: ['G', 'G'], callback: () => this.goTop() },
+      { sequence: ['D', 'D'], callback: () => this.deleteLine() },
+    ])
+  }
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeys.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeys.md
new file mode 100644
index 000000000..f3129e7f0
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeys.md
@@ -0,0 +1,73 @@
+---
+id: injectHotkeys
+title: injectHotkeys
+---
+
+# Function: injectHotkeys()
+
+```ts
+function injectHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [injectHotkeys.ts:75](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeys.ts#L75)
+
+Angular inject-based API for registering multiple keyboard hotkeys at once.
+
+Uses the singleton HotkeyManager for efficient event handling.
+Accepts a dynamic array of hotkey definitions.
+
+Call in an injection context (e.g. constructor or field initializer).
+Uses effect() to track reactive dependencies and update registrations
+when options or the callback change.
+
+Options are merged in this order:
+provideHotkeys defaults &lt; commonOptions &lt; per-definition options
+
+## Parameters
+
+### hotkeys
+
+Array of hotkey definitions, or getter returning them
+
+[`InjectHotkeyDefinition`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition)[] | () => [`InjectHotkeyDefinition`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition)[]
+
+### commonOptions
+
+Shared options for all hotkeys, or getter
+
+[`InjectHotkeyOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions) | () => [`InjectHotkeyOptions`](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions)
+
+## Returns
+
+`void`
+
+## Examples
+
+```ts
+@Component({ ... })
+export class EditorComponent {
+  constructor() {
+    injectHotkeys([
+      { hotkey: 'Mod+S', callback: () => this.save() },
+      { hotkey: 'Mod+Z', callback: () => this.undo() },
+      { hotkey: 'Escape', callback: () => this.close() },
+    ])
+  }
+}
+```
+
+```ts
+@Component({ ... })
+export class DynamicShortcuts {
+  shortcuts = signal([...])
+
+  constructor() {
+    injectHotkeys(
+      () => this.shortcuts().map((s) => ({
+        hotkey: s.key,
+        callback: s.action,
+      })),
+    )
+  }
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeysContext.md b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeysContext.md
new file mode 100644
index 000000000..610dcb124
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: injectHotkeysContext
+title: injectHotkeysContext
+---
+
+# Function: injectHotkeysContext()
+
+```ts
+function injectHotkeysContext(): HotkeysContextValue;
+```
+
+Defined in: [hotkeys-provider.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L38)
+
+## Returns
+
+[`HotkeysContextValue`](/hotkeys/framework/angular/reference/interfaces/HotkeysContextValue)
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/injectKeyHold.md b/mintlify/hotkeys/framework/angular/reference/functions/injectKeyHold.md
new file mode 100644
index 000000000..bd81a633a
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/injectKeyHold.md
@@ -0,0 +1,55 @@
+---
+id: injectKeyHold
+title: injectKeyHold
+---
+
+# Function: injectKeyHold()
+
+```ts
+function injectKeyHold(key): Signal<boolean>;
+```
+
+Defined in: [injectKeyHold.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectKeyHold.ts#L40)
+
+Angular inject-based API that returns a signal that is true when the given key is held.
+
+Subscribes to the global KeyStateTracker and uses a computed to determine
+if the specified key is held.
+
+## Parameters
+
+### key
+
+The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function
+
+`IndividualKey` | () => `IndividualKey`
+
+## Returns
+
+`Signal`\&lt;`boolean`\>
+
+Signal that returns true if the key is currently held down
+
+## Examples
+
+```ts
+@Component({
+  template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,
+})
+export class ShiftIndicatorComponent {
+  isShiftHeld = injectKeyHold('Shift')
+}
+```
+
+```ts
+@Component({
+  template: `
+    <span [style.opacity]="ctrl() ? 1 : 0.3">Ctrl</span>
+    <span [style.opacity]="shift() ? 1 : 0.3">Shift</span>
+  `,
+})
+export class ModifierIndicatorsComponent {
+  ctrl = injectKeyHold('Control')
+  shift = injectKeyHold('Shift')
+}
+```
diff --git a/mintlify/hotkeys/framework/angular/reference/functions/provideHotkeys.md b/mintlify/hotkeys/framework/angular/reference/functions/provideHotkeys.md
new file mode 100644
index 000000000..25ce1c498
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/functions/provideHotkeys.md
@@ -0,0 +1,22 @@
+---
+id: provideHotkeys
+title: provideHotkeys
+---
+
+# Function: provideHotkeys()
+
+```ts
+function provideHotkeys(defaultOptions): StaticProvider;
+```
+
+Defined in: [hotkeys-provider.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L29)
+
+## Parameters
+
+### defaultOptions
+
+[`HotkeysProviderOptions`](/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions)
+
+## Returns
+
+`StaticProvider`
diff --git a/mintlify/hotkeys/framework/angular/reference/index.md b/mintlify/hotkeys/framework/angular/reference/index.md
new file mode 100644
index 000000000..cd6db5915
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/index.md
@@ -0,0 +1,38 @@
+---
+id: "@tanstack/angular-hotkeys"
+title: "@tanstack/angular-hotkeys"
+---
+
+# @tanstack/angular-hotkeys
+
+## Interfaces
+
+- [AngularHotkeyRecorder](/hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder)
+- [AngularHotkeySequenceRecorder](/hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder)
+- [HotkeyRegistrationsResult](/hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult)
+- [HotkeysContextValue](/hotkeys/framework/angular/reference/interfaces/HotkeysContextValue)
+- [HotkeysProviderOptions](/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions)
+- [InjectHotkeyDefinition](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition)
+- [InjectHotkeyOptions](/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions)
+- [InjectHotkeySequenceDefinition](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition)
+- [InjectHotkeySequenceOptions](/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions)
+
+## Variables
+
+- [HOTKEYS\_INJECTION\_TOKEN](/hotkeys/framework/angular/reference/variables/HOTKEYS_INJECTION_TOKEN)
+
+## Functions
+
+- [injectDefaultHotkeysOptions](/hotkeys/framework/angular/reference/functions/injectDefaultHotkeysOptions)
+- [injectHeldKeyCodes](/hotkeys/framework/angular/reference/functions/injectHeldKeyCodes)
+- [injectHeldKeys](/hotkeys/framework/angular/reference/functions/injectHeldKeys)
+- [injectHotkey](/hotkeys/framework/angular/reference/functions/injectHotkey)
+- [injectHotkeyRecorder](/hotkeys/framework/angular/reference/functions/injectHotkeyRecorder)
+- [injectHotkeyRegistrations](/hotkeys/framework/angular/reference/functions/injectHotkeyRegistrations)
+- [injectHotkeys](/hotkeys/framework/angular/reference/functions/injectHotkeys)
+- [injectHotkeysContext](/hotkeys/framework/angular/reference/functions/injectHotkeysContext)
+- [injectHotkeySequence](/hotkeys/framework/angular/reference/functions/injectHotkeySequence)
+- [injectHotkeySequenceRecorder](/hotkeys/framework/angular/reference/functions/injectHotkeySequenceRecorder)
+- [injectHotkeySequences](/hotkeys/framework/angular/reference/functions/injectHotkeySequences)
+- [injectKeyHold](/hotkeys/framework/angular/reference/functions/injectKeyHold)
+- [provideHotkeys](/hotkeys/framework/angular/reference/functions/provideHotkeys)
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder.md b/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder.md
new file mode 100644
index 000000000..8b85b288e
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeyRecorder.md
@@ -0,0 +1,88 @@
+---
+id: AngularHotkeyRecorder
+title: AngularHotkeyRecorder
+---
+
+# Interface: AngularHotkeyRecorder
+
+Defined in: [injectHotkeyRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L15)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+readonly cancelRecording: () => void;
+```
+
+Defined in: [injectHotkeyRecorder.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L25)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording()
+
+```ts
+readonly isRecording: () => boolean;
+```
+
+Defined in: [injectHotkeyRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L17)
+
+Whether recording is currently active
+
+#### Returns
+
+`boolean`
+
+***
+
+### recordedHotkey()
+
+```ts
+readonly recordedHotkey: () => Hotkey | null;
+```
+
+Defined in: [injectHotkeyRecorder.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L19)
+
+The currently recorded hotkey (for live preview)
+
+#### Returns
+
+`Hotkey` \| `null`
+
+***
+
+### startRecording()
+
+```ts
+readonly startRecording: () => void;
+```
+
+Defined in: [injectHotkeyRecorder.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L21)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+readonly stopRecording: () => void;
+```
+
+Defined in: [injectHotkeyRecorder.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRecorder.ts#L23)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder.md
new file mode 100644
index 000000000..042d0ee80
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/AngularHotkeySequenceRecorder.md
@@ -0,0 +1,106 @@
+---
+id: AngularHotkeySequenceRecorder
+title: AngularHotkeySequenceRecorder
+---
+
+# Interface: AngularHotkeySequenceRecorder
+
+Defined in: [injectHotkeySequenceRecorder.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L18)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+readonly cancelRecording: () => void;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L24)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+readonly commitRecording: () => void;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L25)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording()
+
+```ts
+readonly isRecording: () => boolean;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L19)
+
+#### Returns
+
+`boolean`
+
+***
+
+### recordedSequence()
+
+```ts
+readonly recordedSequence: () => HotkeySequence | null;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L21)
+
+#### Returns
+
+`HotkeySequence` \| `null`
+
+***
+
+### startRecording()
+
+```ts
+readonly startRecording: () => void;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L22)
+
+#### Returns
+
+`void`
+
+***
+
+### steps()
+
+```ts
+readonly steps: () => HotkeySequence;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L20)
+
+#### Returns
+
+`HotkeySequence`
+
+***
+
+### stopRecording()
+
+```ts
+readonly stopRecording: () => void;
+```
+
+Defined in: [injectHotkeySequenceRecorder.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequenceRecorder.ts#L23)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult.md b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult.md
new file mode 100644
index 000000000..09bdf8d0b
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeyRegistrationsResult.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyRegistrationsResult
+title: HotkeyRegistrationsResult
+---
+
+# Interface: HotkeyRegistrationsResult
+
+Defined in: [injectHotkeyRegistrations.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRegistrations.ts#L16)
+
+Return type for injectHotkeyRegistrations.
+
+## Properties
+
+### hotkeys
+
+```ts
+hotkeys: Signal<HotkeyRegistrationView[]>;
+```
+
+Defined in: [injectHotkeyRegistrations.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRegistrations.ts#L18)
+
+Signal for all registered hotkeys (public view, no callbacks)
+
+***
+
+### sequences
+
+```ts
+sequences: Signal<SequenceRegistrationView[]>;
+```
+
+Defined in: [injectHotkeyRegistrations.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeyRegistrations.ts#L20)
+
+Signal for all registered sequences
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysContextValue.md b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysContextValue.md
new file mode 100644
index 000000000..953af39ee
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysContextValue.md
@@ -0,0 +1,18 @@
+---
+id: HotkeysContextValue
+title: HotkeysContextValue
+---
+
+# Interface: HotkeysContextValue
+
+Defined in: [hotkeys-provider.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L17)
+
+## Properties
+
+### defaultOptions
+
+```ts
+readonly defaultOptions: HotkeysProviderOptions;
+```
+
+Defined in: [hotkeys-provider.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L18)
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..d9639cbb7
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [hotkeys-provider.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L10)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<InjectHotkeyOptions>;
+```
+
+Defined in: [hotkeys-provider.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L11)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [hotkeys-provider.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L12)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<InjectHotkeySequenceOptions>;
+```
+
+Defined in: [hotkeys-provider.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L14)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [hotkeys-provider.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L13)
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition.md b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition.md
new file mode 100644
index 000000000..fc42bb6ba
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyDefinition.md
@@ -0,0 +1,48 @@
+---
+id: InjectHotkeyDefinition
+title: InjectHotkeyDefinition
+---
+
+# Interface: InjectHotkeyDefinition
+
+Defined in: [injectHotkeys.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeys.ts#L19)
+
+A single hotkey definition for use with `injectHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [injectHotkeys.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeys.ts#L23)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: RegisterableHotkey | () => RegisterableHotkey;
+```
+
+Defined in: [injectHotkeys.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeys.ts#L21)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: 
+  | InjectHotkeyOptions
+  | () => InjectHotkeyOptions;
+```
+
+Defined in: [injectHotkeys.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeys.ts#L25)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions.md b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions.md
new file mode 100644
index 000000000..b97fe002d
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeyOptions.md
@@ -0,0 +1,28 @@
+---
+id: InjectHotkeyOptions
+title: InjectHotkeyOptions
+---
+
+# Interface: InjectHotkeyOptions
+
+Defined in: [injectHotkey.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkey.ts#L16)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [injectHotkey.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkey.ts#L24)
+
+The DOM element to attach the event listener to.
+Can be a direct DOM element, an accessor (for reactive targets that become
+available after mount), or null. Defaults to document.
+When using scoped targets, pass an accessor: () => (&#123; target: elementSignal() &#125;)
+so the hotkey waits for the element to be attached before registering.
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition.md
new file mode 100644
index 000000000..77e35da7d
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition.md
@@ -0,0 +1,48 @@
+---
+id: InjectHotkeySequenceDefinition
+title: InjectHotkeySequenceDefinition
+---
+
+# Interface: InjectHotkeySequenceDefinition
+
+Defined in: [injectHotkeySequences.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequences.ts#L14)
+
+A single sequence definition for use with `injectHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [injectHotkeySequences.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequences.ts#L18)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: 
+  | InjectHotkeySequenceOptions
+  | () => InjectHotkeySequenceOptions;
+```
+
+Defined in: [injectHotkeySequences.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequences.ts#L20)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: HotkeySequence | () => HotkeySequence;
+```
+
+Defined in: [injectHotkeySequences.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequences.ts#L16)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions.md b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions.md
new file mode 100644
index 000000000..400675776
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/interfaces/InjectHotkeySequenceOptions.md
@@ -0,0 +1,38 @@
+---
+id: InjectHotkeySequenceOptions
+title: InjectHotkeySequenceOptions
+---
+
+# Interface: InjectHotkeySequenceOptions
+
+Defined in: [injectHotkeySequence.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequence.ts#L13)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"enabled"` \| `"target"`\>
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: boolean;
+```
+
+Defined in: [injectHotkeySequence.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequence.ts#L18)
+
+Whether the sequence is enabled. Defaults to true.
+
+***
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [injectHotkeySequence.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectHotkeySequence.ts#L24)
+
+The DOM element to attach the event listener to.
+Can be a direct DOM element, an accessor target, or null.
+Defaults to document when omitted.
diff --git a/mintlify/hotkeys/framework/angular/reference/variables/HOTKEYS_INJECTION_TOKEN.md b/mintlify/hotkeys/framework/angular/reference/variables/HOTKEYS_INJECTION_TOKEN.md
new file mode 100644
index 000000000..23e3fafed
--- /dev/null
+++ b/mintlify/hotkeys/framework/angular/reference/variables/HOTKEYS_INJECTION_TOKEN.md
@@ -0,0 +1,12 @@
+---
+id: HOTKEYS_INJECTION_TOKEN
+title: HOTKEYS_INJECTION_TOKEN
+---
+
+# Variable: HOTKEYS\_INJECTION\_TOKEN
+
+```ts
+const HOTKEYS_INJECTION_TOKEN: InjectionToken<HotkeysContextValue>;
+```
+
+Defined in: [hotkeys-provider.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L21)
diff --git a/mintlify/hotkeys/framework/lit/examples/held-keys.md b/mintlify/hotkeys/framework/lit/examples/held-keys.md
new file mode 100644
index 000000000..48b13158d
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/held-keys.md
@@ -0,0 +1,12 @@
+---
+title: "held-keys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/held-keys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/held-keys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/examples/hotkey-recorder.md b/mintlify/hotkeys/framework/lit/examples/hotkey-recorder.md
new file mode 100644
index 000000000..108d2a6d3
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/hotkey-recorder.md
@@ -0,0 +1,12 @@
+---
+title: "hotkey-recorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/hotkey-recorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/hotkey-recorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/examples/hotkey-sequence-recorder.md b/mintlify/hotkeys/framework/lit/examples/hotkey-sequence-recorder.md
new file mode 100644
index 000000000..2904a2e09
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/hotkey-sequence-recorder.md
@@ -0,0 +1,12 @@
+---
+title: "hotkey-sequence-recorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/hotkey-sequence-recorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/hotkey-sequence-recorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/examples/hotkey-sequence.md b/mintlify/hotkeys/framework/lit/examples/hotkey-sequence.md
new file mode 100644
index 000000000..a5f050bdc
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/hotkey-sequence.md
@@ -0,0 +1,12 @@
+---
+title: "hotkey-sequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/hotkey-sequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/hotkey-sequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/examples/hotkey.md b/mintlify/hotkeys/framework/lit/examples/hotkey.md
new file mode 100644
index 000000000..1655ac24f
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/hotkey.md
@@ -0,0 +1,12 @@
+---
+title: "hotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/hotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/hotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/examples/key-hold.md b/mintlify/hotkeys/framework/lit/examples/key-hold.md
new file mode 100644
index 000000000..f73bfb09d
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/examples/key-hold.md
@@ -0,0 +1,12 @@
+---
+title: "key-hold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/lit/examples/key-hold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/lit/key-hold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/lit/guides/formatting-display.md b/mintlify/hotkeys/framework/lit/guides/formatting-display.md
new file mode 100644
index 000000000..35e44905e
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/formatting-display.md
@@ -0,0 +1,266 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys provides several utilities for formatting hotkey strings into human-readable display text. These utilities handle platform differences automatically, so your UI shows the right symbols and labels for each operating system.
+
+## `formatForDisplay`
+
+The primary formatting function. Returns a platform-aware string using symbols on macOS and text labels on Windows/Linux.
+
+```ts
+import { formatForDisplay } from '@tanstack/lit-hotkeys'
+
+// On macOS (symbols separated by spaces):
+formatForDisplay('Mod+S')         // "⌘ S"
+formatForDisplay('Mod+Shift+Z')   // "⌘ ⇧ Z"
+formatForDisplay('Control+Alt+D') // "⌃ ⌥ D"
+
+// On Windows/Linux:
+formatForDisplay('Mod+S')         // "Ctrl+S"
+formatForDisplay('Mod+Shift+Z')   // "Ctrl+Shift+Z"
+formatForDisplay('Control+Alt+D') // "Ctrl+Alt+D"
+```
+
+### Options
+
+```ts
+formatForDisplay('Mod+S', {
+  platform: 'mac', // Override platform detection ('mac' | 'windows' | 'linux')
+  useSymbols: true, // default; set false for text labels on macOS
+})
+```
+
+On macOS, modifier **order** matches canonical normalization (same as `formatWithLabels`), and symbols are joined with **spaces** (e.g., `⌘ ⇧ Z`). On Windows and Linux, modifiers are joined with `+` (e.g., `Ctrl+Shift+Z`).
+
+`platform` is used for both normalization and display. If you need to show the same [`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey) under several platforms, first serialize with the platform it was parsed with, then format for each display platform:
+
+```ts
+import {
+  formatForDisplay,
+  normalizeHotkeyFromParsed,
+  parseHotkey,
+} from '@tanstack/lit-hotkeys'
+
+const parsed = parseHotkey('Mod+K', 'mac')
+const canonical = normalizeHotkeyFromParsed(parsed, 'mac')
+formatForDisplay(canonical, { platform: 'windows' }) // "Ctrl+K"
+```
+
+## `formatWithLabels`
+
+Returns human-readable text labels (e.g., "Cmd" instead of the symbol). Useful when you want readable text rather than symbols.
+
+```ts
+import { formatWithLabels } from '@tanstack/lit-hotkeys'
+
+// On macOS:
+formatWithLabels('Mod+S', { platform: 'mac' }) // "Cmd+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'mac' }) // "Cmd+Shift+Z"
+
+// On Windows/Linux:
+formatWithLabels('Mod+S', { platform: 'windows' }) // "Ctrl+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'windows' }) // "Ctrl+Shift+Z"
+```
+
+Modifier order matches canonical normalization from the core package (e.g. `Mod` first, then `Shift`, then the key).
+
+## Using Formatted Hotkeys in Lit
+
+### Keyboard Shortcut Badges
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { formatForDisplay } from '@tanstack/lit-hotkeys'
+
+@customElement('shortcut-badge')
+class ShortcutBadge extends LitElement {
+  @property({ type: String }) hotkey = ''
+
+  render() {
+    return html`<kbd class="shortcut-badge">${formatForDisplay(this.hotkey)}</kbd>`
+  }
+}
+```
+Usage:
+```html
+<shortcut-badge hotkey="Mod+S"></shortcut-badge>        <!-- ⌘ S (Mac) or Ctrl+S (Windows) -->
+<shortcut-badge hotkey="Mod+Shift+P"></shortcut-badge>  <!-- ⌘ ⇧ P (Mac) or Ctrl+Shift+P (Windows) -->
+```
+
+### Menu Items with Hotkeys
+
+`HotkeyController` registers the shortcut; `formatForDisplay` renders the label in the template.
+
+```ts
+import { LitElement, html } from 'lit'
+import type { PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { HotkeyController, formatForDisplay } from '@tanstack/lit-hotkeys'
+
+@customElement('menu-item')
+class MenuItem extends LitElement {
+  @property({ type: String }) label = ''
+
+  @property({ type: String }) hotkey = ''
+
+  private hotkeyController?: HotkeyController
+
+  updated(changedProperties: PropertyValues<this>) {
+    if (!changedProperties.has('hotkey')) return
+
+    if (this.hotkeyController) {
+      this.hotkeyController.hostDisconnected()
+      this.removeController(this.hotkeyController)
+      this.hotkeyController = undefined
+    }
+
+    if (!this.hotkey) return
+
+    this.hotkeyController = new HotkeyController(this, this.hotkey, () =>
+      this.dispatchEvent(
+        new CustomEvent('action', { bubbles: true, composed: true }),
+      ),
+    )
+    this.addController(this.hotkeyController)
+  }
+
+  render() {
+    return html`
+      <div class="menu-item">
+        <span>${this.label}</span>
+        <span class="menu-shortcut">${formatForDisplay(this.hotkey)}</span>
+      </div>
+    `
+  }
+}
+```
+
+Usage:
+```ts
+html`
+  <menu-item label="Save" hotkey="Mod+S" @action=${save}></menu-item>
+  <menu-item label="Undo" hotkey="Mod+Z" @action=${undo}></menu-item>
+  <menu-item label="Find" hotkey="Mod+F" @action=${find}></menu-item>
+`
+```
+
+### Command Palette Items
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { formatForDisplay } from '@tanstack/lit-hotkeys'
+import type { Hotkey } from '@tanstack/lit-hotkeys'
+
+interface Command {
+  id: string
+  label: string
+  hotkey?: Hotkey
+  action: () => void
+}
+
+@customElement('command-palette-item')
+class CommandPaletteItem extends LitElement {
+  @property({ type: Object }) command!: Command
+
+  render() {
+    const { label, hotkey, action } = this.command
+    return html`
+      <div class="command-item" @click=${action}>
+        <span>${label}</span>
+        ${hotkey ? html`<kbd>${formatForDisplay(hotkey)}</kbd>` : nothing}
+      </div>
+    `
+  }
+}
+```
+
+## Platform Symbols Reference
+
+On macOS, modifiers are displayed as symbols:
+
+| Modifier | Mac Symbol | Windows/Linux Label |
+|----------|-----------|-------------------|
+| Meta (Cmd) | `⌘` | `Win` / `Super` |
+| Control | `⌃` | `Ctrl` |
+| Alt/Option | `⌥` | `Alt` |
+| Shift | `⇧` | `Shift` |
+
+Special keys also have display symbols:
+
+| Key | Display |
+|-----|---------|
+| Escape | `Esc` |
+| Backspace | `⌫` (Mac) / `Backspace` |
+| Delete | `⌦` (Mac) / `Del` |
+| Enter | `↵` |
+| Tab | `⇥` |
+| ArrowUp | `↑` |
+| ArrowDown | `↓` |
+| ArrowLeft | `←` |
+| ArrowRight | `→` |
+| Space | `Space` |
+
+## Parsing and Normalization
+
+TanStack Hotkeys also provides utilities for parsing and normalizing hotkey strings:
+
+### `parseHotkey`
+
+Parse a hotkey string into its components:
+
+```ts
+import { parseHotkey } from '@tanstack/lit-hotkeys'
+
+const parsed = parseHotkey('Mod+Shift+S')
+// {
+//   key: 'S',
+//   ctrl: false,   // true on Windows/Linux
+//   shift: true,
+//   alt: false,
+//   meta: true,    // true on Mac
+//   modifiers: ['Shift', 'Meta']  // or ['Control', 'Shift'] on Windows
+// }
+```
+
+### `normalizeHotkey` and `normalizeRegisterableHotkey`
+
+Core helpers produce a **canonical** hotkey string for storage and registration. When the platform allows `Mod` (Command on Mac without Control; Control on Windows/Linux without Meta), the output uses `Mod` and **Mod-first** modifier order (`Mod+Shift+E`), not expanded `Meta`/`Control`.
+
+```ts
+import { normalizeHotkey, normalizeRegisterableHotkey } from '@tanstack/lit-hotkeys'
+
+normalizeHotkey('Cmd+S', 'mac')           // 'Mod+S'
+normalizeHotkey('Ctrl+Shift+s', 'windows') // 'Mod+Shift+S'
+normalizeHotkey('Shift+Meta+E', 'mac')    // 'Mod+Shift+E'
+
+// String or RawHotkey — same string adapters use internally:
+normalizeRegisterableHotkey({ key: 'S', mod: true, shift: true }, 'mac') // 'Mod+Shift+S'
+```
+
+The Lit integration (`HotkeyController`, `@hotkey`) normalizes registerable hotkeys automatically via `normalizeRegisterableHotkey`.
+
+## Validation
+
+Use `validateHotkey` to check if a hotkey string is valid and get warnings about potential platform issues:
+
+```ts
+import { validateHotkey } from '@tanstack/lit-hotkeys'
+
+const result = validateHotkey('Alt+A')
+// {
+//   valid: true,
+//   warnings: ['Alt+letter combinations may not work on macOS due to special characters'],
+//   errors: []
+// }
+
+const result2 = validateHotkey('InvalidKey+S')
+// {
+//   valid: false,
+//   warnings: [],
+//   errors: ['Unknown key: InvalidKey']
+// }
+```
diff --git a/mintlify/hotkeys/framework/lit/guides/hotkey-recording.md b/mintlify/hotkeys/framework/lit/guides/hotkey-recording.md
new file mode 100644
index 000000000..31538c8b0
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/hotkey-recording.md
@@ -0,0 +1,219 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `HotkeyRecorderController` for building keyboard shortcut customization UIs. This lets users record their own shortcuts by pressing the desired key combination, similar to how system preferences or IDE shortcut editors work.
+
+## Basic Usage
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeyRecorderController, formatForDisplay } from '@tanstack/lit-hotkeys'
+
+@customElement('shortcut-recorder')
+class ShortcutRecorder extends LitElement {
+  private recorder = new HotkeyRecorderController(this, {
+    onRecord: (hotkey) => {
+      console.log('Recorded:', hotkey) // e.g., "Mod+Shift+S"
+    },
+  })
+
+  render() {
+    const { isRecording, recordedHotkey } = this.recorder
+    return html`
+      <div>
+        <button
+          @click=${() =>
+            isRecording
+              ? this.recorder.stopRecording()
+              : this.recorder.startRecording()}
+        >
+          ${isRecording
+            ? 'Press a key combination...'
+            : recordedHotkey
+              ? formatForDisplay(recordedHotkey)
+              : 'Click to record'}
+        </button>
+        ${isRecording
+          ? html`<button @click=${() => this.recorder.cancelRecording()}>
+              Cancel
+            </button>`
+          : nothing}
+      </div>
+    `
+  }
+}
+```
+
+## Controller API
+
+`HotkeyRecorderController` exposes the following reactive getters and methods:
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `isRecording` | `boolean` (getter) | Whether the recorder is currently listening for key presses |
+| `recordedHotkey` | `Hotkey \| null` (getter) | The last recorded hotkey string, or `null` if nothing recorded |
+| `startRecording()` | `() => void` | Start listening for key presses |
+| `stopRecording()` | `() => void` | Stop listening and keep the recorded hotkey |
+| `cancelRecording()` | `() => void` | Stop listening and discard any recorded hotkey |
+| `setOptions(opts)` | `(Partial<HotkeyRecorderOptions>) => void` | Update callbacks at runtime |
+
+The controller registers itself with the host in its constructor, subscribes to the underlying `HotkeyRecorder` store on `hostConnected`, and cleans up on `hostDisconnected`.
+
+## Options
+
+Pass options as the second argument to the constructor:
+
+```ts
+new HotkeyRecorderController(this, {
+  onRecord: (hotkey) => { /* called when a hotkey is recorded */ },
+  onCancel: () => { /* called when recording is cancelled */ },
+  onClear: () => { /* called when the recorded hotkey is cleared */ },
+})
+```
+
+### `onRecord`
+
+Called when the user presses a valid key combination (a modifier + a non-modifier key, or a single non-modifier key). Receives the recorded `Hotkey` string.
+
+### `onCancel`
+
+Called when recording is cancelled (either by pressing Escape or calling `cancelRecording()`).
+
+### `onClear`
+
+Called when the recorded hotkey is cleared (by pressing Backspace or Delete during recording).
+
+
+## Recording Behavior
+
+The recorder has specific behavior for different keys:
+
+| Key | Behavior |
+|-----|----------|
+| **Modifier only** (Shift, Ctrl, etc.) | Waits for a non-modifier key — modifier-only presses don't complete a recording |
+| **Modifier + key** (e.g., Ctrl+S) | Records the full combination |
+| **Single key** (e.g., Escape, F1) | Records the single key |
+| **Escape** | Cancels the recording |
+| **Backspace / Delete** | Clears the currently recorded hotkey |
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```ts
+new HotkeyRecorderController(this, {
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+### Mod Auto-Conversion
+
+Recorded hotkeys automatically use the portable `Mod` format. If a user on macOS presses Command+S, the recorded hotkey will be `Mod+S` rather than `Meta+S`. This ensures shortcuts are portable across platforms.
+
+## Building a Shortcut Settings UI
+
+Here's a more complete example of a shortcut customization panel:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import {
+  HotkeyRecorderController,
+  HotkeyController,
+  formatForDisplay,
+} from '@tanstack/lit-hotkeys'
+import type { Hotkey } from '@tanstack/lit-hotkeys'
+
+interface ShortcutMap {
+  save: Hotkey
+  undo: Hotkey
+  search: Hotkey
+}
+
+@customElement('shortcut-settings')
+class ShortcutSettings extends LitElement {
+  @state() private shortcuts: ShortcutMap = {
+    save: 'Mod+S',
+    undo: 'Mod+Z',
+    search: 'Mod+K',
+  }
+
+  @state() private editingAction: keyof ShortcutMap | null = null
+
+  private recorder = new HotkeyRecorderController(this, {
+    onRecord: (hotkey) => {
+      if (this.editingAction) {
+        this.shortcuts = { ...this.shortcuts, [this.editingAction]: hotkey }
+        this.editingAction = null
+      }
+    },
+    onCancel: () => {
+      this.editingAction = null
+    },
+  })
+
+  private saveCtrl?: HotkeyController
+  private undoCtrl?: HotkeyController
+  private searchCtrl?: HotkeyController
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._registerHotkeys()
+  }
+
+  updated() {
+    this._unregisterHotkeys()
+    this._registerHotkeys()
+  }
+
+  private _registerHotkeys() {
+    this.saveCtrl = new HotkeyController(this, this.shortcuts.save, () => save())
+    this.undoCtrl = new HotkeyController(this, this.shortcuts.undo, () => undo())
+    this.searchCtrl = new HotkeyController(this, this.shortcuts.search, () => openSearch())
+  }
+
+  private _unregisterHotkeys() {
+    this.saveCtrl?.hostDisconnected()
+    this.undoCtrl?.hostDisconnected()
+    this.searchCtrl?.hostDisconnected()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this._unregisterHotkeys()
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2>Keyboard Shortcuts</h2>
+        ${(Object.entries(this.shortcuts) as Array<[keyof ShortcutMap, Hotkey]>).map(
+          ([action, hotkey]) => html`
+            <div>
+              <span>${action}</span>
+              <button
+                @click=${() => {
+                  this.editingAction = action
+                  this.recorder.startRecording()
+                }}
+              >
+                ${this.editingAction === action && this.recorder.isRecording
+                  ? 'Press keys...'
+                  : formatForDisplay(hotkey)}
+              </button>
+            </div>
+          `,
+        )}
+      </div>
+    `
+  }
+}
+```
+
+## Under the Hood
+
+The `HotkeyRecorderController` creates a `HotkeyRecorder` class instance and subscribes to its reactive state via the recorder's TanStack Store. The class manages its own keyboard event listeners and state, and the controller handles cleanup on disconnect.
diff --git a/mintlify/hotkeys/framework/lit/guides/hotkeys.md b/mintlify/hotkeys/framework/lit/guides/hotkeys.md
new file mode 100644
index 000000000..5e7aa372c
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/hotkeys.md
@@ -0,0 +1,396 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `@hotkey` decorator is the primary way to register keyboard shortcuts in Lit applications. It binds a hotkey to a class method, automatically registering when the element connects to the DOM and unregistering when it disconnects. For more dynamic use cases, the `HotkeyController` provides imperative control over hotkey registration.
+
+Both approaches wrap the singleton `HotkeyManager` with automatic lifecycle management tied to Lit's `connectedCallback` / `disconnectedCallback`.
+
+## Basic Usage
+
+### The `@hotkey` Decorator
+
+Decorate any method to have it called when a hotkey is pressed:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkey } from '@tanstack/lit-hotkeys'
+
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  @hotkey('Mod+S')
+  save() {
+    saveDocument()
+  }
+
+  render() {
+    return html`<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>`
+  }
+}
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```ts
+@hotkey('Mod+S')
+save(event: KeyboardEvent, context: HotkeyCallbackContext) {
+  console.log(context.hotkey) 
+  console.log(context.parsedHotkey)
+}
+```
+
+### The `HotkeyController`
+
+For cases where you need to construct the hotkey dynamically or pass a callback that isn't a class method, use `HotkeyController` directly:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeyController } from '@tanstack/lit-hotkeys'
+
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  private saveHotkey = new HotkeyController(
+    this,
+    'Mod+S',
+    () => this.save(),
+  )
+
+  constructor() {
+    super()
+    this.addController(this.saveHotkey)
+  }
+
+  private save() {
+    saveDocument()
+  }
+
+  render() {
+    return html`<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>`
+  }
+}
+```
+
+## Default Options
+
+When you register a hotkey without passing options, or when you omit specific options, the following defaults apply:
+
+```ts
+@hotkey('Mod+S', {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined, // smart default: false for Mod+S, true for single keys
+  platform: undefined, // auto-detected
+  conflictBehavior: 'warn',
+})
+save() { /* ... */ }
+```
+
+If you omit `target`, the Lit adapter resolves it when the controller connects: it listens on `document` in the browser, and skips registration in non-DOM environments.
+
+### Why These Defaults?
+
+Most hotkey registrations are intended to override default browser behavior — such as using `Mod+S` to save a document instead of showing the browser's "Save Page" dialog. To make this easy and consistent, the library sets `preventDefault` and `stopPropagation` to `true` by default, ensuring your hotkey handlers take precedence.
+
+#### Smart Input Handling: `ignoreInputs`
+
+The `ignoreInputs` option strikes a balance between accessibility and usability. By default, hotkeys involving `Ctrl`/`Meta` modifiers (like `Mod+S`) and the `Escape` key fire even when focus is inside input elements (text fields, text areas, etc.) and button-type inputs (`type="button"`, `"submit"`, or `"reset"`). Single key shortcuts or those using only `Shift`/`Alt` are ignored within non-button inputs to prevent interference with normal typing.
+
+#### Hotkey Conflicts: `conflictBehavior`
+
+When you register a hotkey that is already registered elsewhere in your app, the library logs a warning by default (`conflictBehavior: 'warn'`). This helps catch accidental duplicate bindings during development.
+
+## Hotkey Options
+
+### `enabled`
+
+Controls whether the hotkey is active. Defaults to `true`.
+
+```ts
+@hotkey('Mod+S', { enabled: true })
+save() { saveDocument() }
+```
+
+### `preventDefault`
+
+Automatically calls `event.preventDefault()` when the hotkey fires. Defaults to `true`.
+
+```ts
+// Browser default is prevented (default behavior)
+@hotkey('Mod+S')
+save() { saveDocument() }
+
+// Opt out when you want the browser's default behavior
+@hotkey('Mod+P', { preventDefault: false })
+print() { customPrint() }
+```
+
+### `stopPropagation`
+
+Calls `event.stopPropagation()` when the hotkey fires. Defaults to `true`.
+
+```ts
+// Event propagation is stopped (default behavior)
+@hotkey('Escape')
+close() { closeModal() }
+
+// Opt out when you need the event to bubble
+@hotkey('Escape', { stopPropagation: false })
+close() { closeModal() }
+```
+
+### `eventType`
+
+Whether to listen on `keydown` (default) or `keyup`.
+
+```ts
+// Fire when the key is released
+@hotkey('Shift', { eventType: 'keyup' })
+deactivateMode() { this.shiftMode = false }
+```
+
+### `requireReset`
+
+When `true`, the hotkey fires only once per key press. The key must be released and pressed again to fire again. Defaults to `false`.
+
+```ts
+// Only fires once per Escape press, not on key repeat
+@hotkey('Escape', { requireReset: true })
+closePanel() { this.panelOpen = false }
+```
+
+### `ignoreInputs`
+
+When `true`, the hotkey will not fire when the user is focused on a text input, textarea, select, or contentEditable element. Button-type inputs (`type="button"`, `"submit"`, `"reset"`) are not ignored. When unset, a smart default applies: `Ctrl`/`Meta` shortcuts and `Escape` fire in inputs; single keys and `Shift`/`Alt` combos are ignored.
+
+```ts
+// Single key — ignored in inputs by default (smart default)
+@hotkey('K')
+openSearch() { /* ... */ }
+
+// Mod+S and Escape — fire in inputs by default (smart default)
+@hotkey('Mod+S')
+save() { /* ... */ }
+
+// Override: force a single key to fire in inputs
+@hotkey('Enter', { ignoreInputs: false })
+submit() { /* ... */ }
+```
+
+### `target`
+
+The DOM element to attach the event listener to. When omitted, the Lit adapter resolves `document` at connect time in the browser. Can be a DOM element, `document`, or `window`. Pass `null` to intentionally skip registration.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { HotkeyController } from '@tanstack/lit-hotkeys'
+
+@customElement('my-panel')
+class MyPanel extends LitElement {
+  private panelRef = createRef<HTMLDivElement>()
+  private escapeHotkey?: HotkeyController
+
+  firstUpdated() {
+    if (!this.panelRef.value) return
+
+    this.escapeHotkey = new HotkeyController(
+      this,
+      'Escape',
+      () => this.dispatchEvent(new CustomEvent('close')),
+      { target: this.panelRef.value },
+    )
+    this.addController(this.escapeHotkey)
+  }
+
+  render() {
+    return html`
+      <div ${ref(this.panelRef)} tabindex="0">
+        <p>Press Escape while focused here to close</p>
+      </div>
+    `
+  }
+}
+```
+
+> [!NOTE]
+> When using a scoped target, make sure the element is focusable (has `tabindex`) so it can receive keyboard events.
+
+### `conflictBehavior`
+
+Controls what happens when you register a hotkey that's already registered. Options:
+
+- `'warn'` (default) — Logs a warning but allows the registration
+- `'error'` — Throws an error
+- `'replace'` — Replaces the existing registration
+- `'allow'` — Allows multiple registrations silently
+
+```ts
+@hotkey('Mod+S', { conflictBehavior: 'replace' })
+save() { saveDocument() }
+```
+
+### `platform`
+
+Override the auto-detected platform. Useful for testing or for applications that need to force a specific platform behavior.
+
+```ts
+@hotkey('Mod+S', { platform: 'mac' })
+save() { saveDocument() }
+```
+
+## Automatic Cleanup
+
+Both the `@hotkey` decorator and `HotkeyController` automatically unregister the hotkey when the element is disconnected from the DOM:
+
+```ts
+@customElement('temporary-panel')
+class TemporaryPanel extends LitElement {
+  // Automatically registered on connect, unregistered on disconnect
+  @hotkey('Escape')
+  close() { this.remove() }
+
+  render() {
+    return html`<div>Panel content</div>`
+  }
+}
+```
+
+## Multiple Hotkeys
+
+Register as many hotkeys as you need. Each `@hotkey` decorator is independent:
+
+```ts
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  @hotkey('Mod+S')
+  save() { saveDocument() }
+
+  @hotkey('Mod+Z')
+  undo() { undoAction() }
+
+  @hotkey('Mod+Shift+Z')
+  redo() { redoAction() }
+
+  @hotkey('Mod+F')
+  search() { openSearch() }
+
+  @hotkey('Escape')
+  dismiss() { closeDialog() }
+}
+```
+
+## Choosing Between Decorator and Controller
+
+| | `@hotkey` Decorator | `HotkeyController` |
+|---|---|---|
+| **Best for** | Static, declarative method binding | Dynamic hotkeys, programmatic control |
+| **Registration** | Automatic via `connectedCallback` | Automatic via `hostConnected` |
+| **Cleanup** | Automatic via `disconnectedCallback` | Automatic via `hostDisconnected` |
+| **Dynamic hotkeys** | No (hotkey is fixed at decoration time) | Yes (can construct hotkey at runtime) |
+| **Callback binding** | Bound to the host element automatically | Bound to the host element automatically |
+
+Use the `@hotkey` decorator for the common case of binding a static shortcut to a method. Use `HotkeyController` when you need to construct the hotkey string dynamically or manage registration imperatively.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```ts
+@hotkey('Mod+S', { meta: { name: 'Save', description: 'Save the document' } })
+save() { saveDocument() }
+
+// Or with HotkeyController:
+new HotkeyController(this, 'Mod+S', () => this.save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```ts
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+@hotkey('Mod+S', { meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' } })
+save() { saveDocument() }
+```
+
+## Introspecting Registrations
+
+Use `HotkeyRegistrationsController` to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeyRegistrationsController } from '@tanstack/lit-hotkeys'
+
+@customElement('shortcut-palette')
+class ShortcutPalette extends LitElement {
+  private registrations = new HotkeyRegistrationsController(this)
+
+  render() {
+    const { hotkeys, sequences } = this.registrations
+
+    return html`
+      <h2>Keyboard Shortcuts</h2>
+      <ul>
+        ${hotkeys.map(
+          (reg) => html`
+            <li>
+              <kbd>${reg.hotkey}</kbd>
+              ${reg.meta?.name ? html`<span> — ${reg.meta.name}</span>` : ''}
+              ${reg.meta?.description ? html`<p>${reg.meta.description}</p>` : ''}
+            </li>
+          `,
+        )}
+      </ul>
+      ${sequences.length > 0
+        ? html`
+            <h2>Sequences</h2>
+            <ul>
+              ${sequences.map(
+                (reg) => html`
+                  <li>
+                    <kbd>${reg.sequence.join(' → ')}</kbd>
+                    ${reg.meta?.name ? html`<span> — ${reg.meta.name}</span>` : ''}
+                  </li>
+                `,
+              )}
+            </ul>
+          `
+        : ''}
+    `
+  }
+}
+```
+
+The controller exposes `hotkeys` and `sequences` arrays. The `hotkeys` array contains registration objects with the hotkey string, options (including `meta`), and enabled state. The `sequences` array contains sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+Under the hood, both the decorator and controller use the singleton `HotkeyManager`. You can access the manager directly when needed:
+
+```ts
+import { getHotkeyManager } from '@tanstack/lit-hotkeys'
+
+const manager = getHotkeyManager()
+
+// Check if a hotkey is registered
+manager.isRegistered('Mod+S')
+
+// Get total number of registrations
+manager.getRegistrationCount()
+```
+
+The manager attaches event listeners per target element, so only elements that have registered hotkeys receive listeners. This is more efficient than a single global listener.
diff --git a/mintlify/hotkeys/framework/lit/guides/key-state-tracking.md b/mintlify/hotkeys/framework/lit/guides/key-state-tracking.md
new file mode 100644
index 000000000..e2c61b40c
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/key-state-tracking.md
@@ -0,0 +1,227 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three Lit **reactive controllers** for tracking the real-time state of keyboard keys. These are useful for building UIs that respond to modifier keys being held, displaying active key states, or implementing hold-to-activate features.
+
+
+## `HeldKeysController`
+
+Tracks all currently held key names. Exposes a reactive **`value`** getter: `Array<string>`.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HeldKeysController } from '@tanstack/lit-hotkeys'
+
+@customElement('key-display')
+class KeyDisplay extends LitElement {
+  private heldKeys = new HeldKeysController(this)
+
+  render() {
+    const keys = this.heldKeys.value
+    return html`
+      <div>
+        ${keys.length > 0 ? `Held: ${keys.join(' + ')}` : 'No keys held'}
+      </div>
+    `
+  }
+}
+```
+
+The array contains key names like `'Shift'`, `'Control'`, `'Meta'`, `'A'`, `'ArrowUp'`, etc. Keys appear in the order they were pressed.
+
+## `HeldKeyCodesController`
+
+Tracks held key names mapped to physical key codes (`event.code`). Exposes **`value`**: `Record<string, string>`.
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HeldKeyCodesController } from '@tanstack/lit-hotkeys'
+
+@customElement('key-code-display')
+class KeyCodeDisplay extends LitElement {
+  private heldKeyCodes = new HeldKeyCodesController(this)
+
+  render() {
+    const codes = this.heldKeyCodes.value
+    // Example: { Shift: "ShiftLeft", Control: "ControlRight" }
+    return html`
+      <div>
+        ${Object.entries(codes).map(
+          ([key, code]) => html`<div>${key}: ${code}</div>`,
+        )}
+      </div>
+    `
+  }
+}
+```
+
+Use this when you need to distinguish left vs. right modifiers (or other physical keys).
+
+## `KeyHoldController`
+
+Tracks whether **one** specific key is held. Exposes **`value`**: `boolean`. Updates the host only when **that** key’s held state changes (not on every unrelated key press).
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { KeyHoldController } from '@tanstack/lit-hotkeys'
+
+@customElement('modifier-indicators')
+class ModifierIndicators extends LitElement {
+  private shift = new KeyHoldController(this, 'Shift')
+  private ctrl = new KeyHoldController(this, 'Control')
+  private alt = new KeyHoldController(this, 'Alt')
+  private meta = new KeyHoldController(this, 'Meta')
+
+  render() {
+    return html`
+      <div class="modifier-bar">
+        <span class=${this.shift.value ? 'active' : ''}>Shift</span>
+        <span class=${this.ctrl.value ? 'active' : ''}>Ctrl</span>
+        <span class=${this.alt.value ? 'active' : ''}>Alt</span>
+        <span class=${this.meta.value ? 'active' : ''}>Meta</span>
+      </div>
+    `
+  }
+}
+```
+
+## Common patterns
+
+### Hold-to-reveal UI
+
+Show extra actions while Shift is held:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { KeyHoldController } from '@tanstack/lit-hotkeys'
+
+@customElement('file-item')
+class FileItem extends LitElement {
+  @property({ type: String }) fileName = ''
+
+  private shift = new KeyHoldController(this, 'Shift')
+
+  render() {
+    return html`
+      <div class="file-item">
+        <span>${this.fileName}</span>
+        ${this.shift.value
+          ? html`<button class="danger" @click=${this._permanentDelete}>
+              Permanently Delete
+            </button>`
+          : html`<button @click=${this._moveToTrash}>Move to Trash</button>`}
+      </div>
+    `
+  }
+
+  private _permanentDelete = () => {
+    /* permanentlyDelete(file) */
+  }
+  private _moveToTrash = () => {
+    /* moveToTrash(file) */
+  }
+}
+```
+
+### Keyboard shortcut hints
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { KeyHoldController } from '@tanstack/lit-hotkeys'
+
+@customElement('shortcut-hints')
+class ShortcutHints extends LitElement {
+  private mod = new KeyHoldController(this, 'Meta') // use 'Control' on Windows if you prefer
+
+  render() {
+    if (!this.mod.value) return html``
+    return html`
+      <div class="shortcut-overlay">
+        <div>S - Save</div>
+        <div>Z - Undo</div>
+        <div>Shift+Z - Redo</div>
+        <div>K - Command Palette</div>
+      </div>
+    `
+  }
+}
+```
+
+### Debugging key display
+
+Combine controllers with [`formatForDisplay`](/hotkeys/framework/lit/guides/formatting-display) for readable labels:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import {
+  HeldKeysController,
+  HeldKeyCodesController,
+  formatForDisplay,
+} from '@tanstack/lit-hotkeys'
+import type { RegisterableHotkey } from '@tanstack/lit-hotkeys'
+
+@customElement('key-debugger')
+class KeyDebugger extends LitElement {
+  private heldKeys = new HeldKeysController(this)
+  private heldCodes = new HeldKeyCodesController(this)
+
+  render() {
+    const keys = this.heldKeys.value
+    const codes = this.heldCodes.value
+    return html`
+      <div class="key-debugger">
+        <h3>Active Keys</h3>
+        ${keys.map(
+          (key) => html`
+            <div>
+              <strong>
+                ${formatForDisplay(key as RegisterableHotkey, {
+                  useSymbols: true,
+                })}
+              </strong>
+              <span class="code">${codes[key] ?? ''}</span>
+            </div>
+          `,
+        )}
+        ${keys.length === 0 ? html`<p>Press any key...</p>` : ''}
+      </div>
+    `
+  }
+}
+```
+
+## Platform quirks
+
+The underlying `KeyStateTracker` handles several platform-specific issues:
+
+### macOS modifier key behavior
+
+On macOS, when a modifier key is held and a non-modifier key is pressed, the OS sometimes swallows the `keyup` event for the non-modifier key. TanStack Hotkeys detects and handles this automatically so held key state stays accurate.
+
+### Window blur
+
+When the browser window loses focus, all held keys are automatically cleared. This prevents “stuck” keys after the user tabs away and releases keys outside the window.
+
+## Under the hood
+
+The three controllers subscribe to the singleton `KeyStateTracker` store from `@tanstack/hotkeys`. The tracker manages its own event listeners on `document` and maintains state in a TanStack Store, which the controllers read reactively.
+
+```ts
+import { getKeyStateTracker } from '@tanstack/lit-hotkeys'
+
+const tracker = getKeyStateTracker()
+
+tracker.getHeldKeys() // string[]
+tracker.store.state.heldCodes // Record<string, string>
+tracker.isKeyHeld('Shift') // boolean
+tracker.isAnyKeyHeld(['Shift', 'Control']) // boolean
+tracker.areAllKeysHeld(['Shift', 'Control']) // boolean
+```
diff --git a/mintlify/hotkeys/framework/lit/guides/sequence-recording.md b/mintlify/hotkeys/framework/lit/guides/sequence-recording.md
new file mode 100644
index 000000000..1f995f947
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/sequence-recording.md
@@ -0,0 +1,133 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+TanStack Hotkeys provides the `HotkeySequenceRecorderController` for building UIs where users record **multi-chord sequences** (Vim-style shortcuts). Each step is captured like a single hotkey chord; users finish with **Enter** by default, or you can use manual commit and optional idle timeout.
+
+## Basic Usage
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeySequenceRecorderController, formatForDisplay } from '@tanstack/lit-hotkeys'
+import type { HotkeySequence } from '@tanstack/lit-hotkeys'
+
+@customElement('sequence-recorder')
+class SequenceRecorder extends LitElement {
+  private recorder = new HotkeySequenceRecorderController(this, {
+    onRecord: (sequence: HotkeySequence) => {
+      console.log('Recorded:', sequence) // e.g., ["G", "G"]
+    },
+  })
+
+  render() {
+    const { isRecording, steps, recordedSequence } = this.recorder
+    return html`
+      <div>
+        <button
+          @click=${() =>
+            isRecording
+              ? this.recorder.cancelRecording()
+              : this.recorder.startRecording()}
+        >
+          ${isRecording
+            ? 'Press chords, then Enter…'
+            : recordedSequence
+              ? recordedSequence.map((h) => formatForDisplay(h)).join(' ')
+              : 'Click to record'}
+        </button>
+        ${isRecording
+          ? html`<button @click=${() => this.recorder.cancelRecording()}>
+              Cancel
+            </button>`
+          : nothing}
+      </div>
+    `
+  }
+}
+```
+
+## Controller API
+
+`HotkeySequenceRecorderController` exposes the following reactive getters and methods:
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is currently listening |
+| `steps` | `HotkeySequence` | Chords captured in the current session |
+| `recordedSequence` | `HotkeySequence \| null` | Last committed sequence |
+| `startRecording()` | `() => void` | Start a new recording session |
+| `stopRecording()` | `() => void` | Stop without calling `onRecord` |
+| `cancelRecording()` | `() => void` | Stop and call `onCancel` |
+| `commitRecording()` | `() => void` | Commit current `steps` (no-op if empty) |
+| `setOptions(opts)` | `(Partial<HotkeySequenceRecorderOptions>) => void` | Update options at runtime |
+
+The controller registers itself with the host in its constructor, subscribes to the underlying `HotkeySequenceRecorder` store on `hostConnected`, and cleans up on `hostDisconnected`.
+
+## Options
+
+Pass options as the second argument to the constructor:
+
+```ts
+new HotkeySequenceRecorderController(this, {
+  onRecord: (sequence) => { /* called when a sequence is committed */ },
+  onCancel: () => { /* called when recording is cancelled */ },
+  onClear: () => { /* called when cleared via Backspace with no steps */ },
+  commitKeys: 'enter', // or 'none'
+  idleTimeoutMs: 2000,
+})
+```
+
+### `onRecord`
+
+Called when a sequence is committed (including `[]` when cleared via Backspace with no steps). Receives the recorded `HotkeySequence` array.
+
+### `onCancel`
+
+Called when recording is cancelled (either by pressing Escape or calling `cancelRecording()`).
+
+### `onClear`
+
+Called when the sequence is cleared (by pressing Backspace or Delete during recording when no steps remain).
+
+### `commitKeys`
+
+Controls how the user finishes recording from the keyboard:
+
+- `'enter'` (default) — plain Enter (no modifiers) commits when at least one step exists.
+- `'none'` — only `commitRecording()` or `idleTimeoutMs` finishes recording; plain Enter can be recorded as a chord.
+
+### `commitOnEnter`
+
+When `commitKeys` is `'enter'`, set to `false` to treat Enter as a normal chord. Use `commitRecording()` or idle timeout to finish instead.
+
+### `idleTimeoutMs`
+
+Milliseconds of inactivity **after the last completed chord** to auto-commit. The timer does not run while waiting for the **first** chord.
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```ts
+new HotkeySequenceRecorderController(this, {
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (sequence) => console.log(sequence),
+})
+```
+
+## Recording Behavior
+
+| Input | Behavior |
+|-------|----------|
+| Valid chord | Appended to `steps`; listener stays active |
+| Enter (no modifiers), `commitKeys: 'enter'`, `steps.length >= 1` | Commits and calls `onRecord` |
+| Escape | Cancels; calls `onCancel` |
+| Backspace / Delete (no modifiers) | Removes last step, or if empty runs `onClear` + `onRecord([])` and stops |
+
+Recorded chords use portable `Mod` format, same as `HotkeyRecorderController`.
+
+## Under the Hood
+
+The `HotkeySequenceRecorderController` creates a `HotkeySequenceRecorder` class instance and subscribes to its reactive state via `@tanstack/store`. The class manages its own keyboard event listeners and state, and the controller handles cleanup on disconnect.
diff --git a/mintlify/hotkeys/framework/lit/guides/sequences.md b/mintlify/hotkeys/framework/lit/guides/sequences.md
new file mode 100644
index 000000000..e2c7ca40a
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/guides/sequences.md
@@ -0,0 +1,319 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences -- shortcuts where you press keys one after another rather than simultaneously. This is commonly used for Vim-style navigation, cheat codes, or multi-step commands.
+
+In Lit, registration is **declarative** via the `@hotkeySequence` decorator, or **imperative** via `HotkeySequenceController` when the sequence or options are built at runtime. Both use the same singleton `SequenceManager`.
+
+## Basic Usage
+
+### The `@hotkeySequence` decorator
+
+Decorate a method to run when the user completes the key sequence:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkeySequence } from '@tanstack/lit-hotkeys'
+
+@customElement('vim-view')
+class VimView extends LitElement {
+  @hotkeySequence(['G', 'G'])
+  scrollTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  render() {
+    return html`<div>Press g then g to scroll to top</div>`
+  }
+}
+```
+
+The first argument is an array of `Hotkey` strings representing each step in the sequence. The user must press them in order within the timeout window.
+
+The method receives the `KeyboardEvent` and [`HotkeyCallbackContext`](/hotkeys/reference/interfaces/HotkeyCallbackContext) like `@hotkey`:
+
+```ts
+import type { HotkeyCallbackContext } from '@tanstack/lit-hotkeys'
+
+@hotkeySequence(['G', 'G'])
+scrollTop(event: KeyboardEvent, context: HotkeyCallbackContext) {
+  console.log(context.hotkey)
+}
+```
+
+### `HotkeySequenceController`
+
+Use the controller when the sequence or callback cannot be expressed as a static decorator (e.g. data-driven shortcuts):
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeySequenceController } from '@tanstack/lit-hotkeys'
+
+@customElement('vim-view')
+class VimView extends LitElement {
+  private scrollTopSeq = new HotkeySequenceController(
+    this,
+    ['G', 'G'],
+    () => this.scrollTop(),
+  )
+
+  constructor() {
+    super()
+    this.addController(this.scrollTopSeq)
+  }
+
+  private scrollTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  render() {
+    return html`<div>Press g then g to scroll to top</div>`
+  }
+}
+```
+
+## Many sequences at once
+
+Register several sequences on the same element by applying **multiple** `@hotkeySequence` decorators (one per method), or by adding **multiple** `HotkeySequenceController` instances with `addController`. There is no Lit equivalent to React’s `useHotkeySequences` hook; several decorators on one class are the idiomatic pattern.
+
+```ts
+@customElement('vim-navigation')
+class VimNavigation extends LitElement {
+  @hotkeySequence(['G', 'G'])
+  goTop() {
+    scrollToTop()
+  }
+
+  @hotkeySequence(['G', 'Shift+G'])
+  goBottom() {
+    scrollToBottom()
+  }
+
+  @hotkeySequence(['D', 'D'], { timeout: 500 })
+  deleteLine() {
+    deleteCurrentLine()
+  }
+
+  render() {
+    return html`<div></div>`
+  }
+}
+```
+
+## Sequence Options
+
+Pass options as the **second** argument to `@hotkeySequence` (or to `HotkeySequenceController`):
+
+```ts
+@hotkeySequence(['G', 'G'], {
+  timeout: 1000, // Time allowed between keys (ms)
+  enabled: true, // Whether the sequence is active at connect time
+})
+scrollTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+```
+
+### `timeout`
+
+The maximum time (in milliseconds) allowed between consecutive key presses. If the user takes longer than this between any two keys, the sequence resets. Defaults to `1000` (1 second).
+
+```ts
+@hotkeySequence(['D', 'D'], { timeout: 500 })
+deleteLine() {
+  deleteCurrentLine()
+}
+
+@hotkeySequence(['Shift+Z', 'Shift+Z'], { timeout: 2000 })
+forceQuit() {
+  quitWithoutSaving()
+}
+```
+
+### `enabled`
+
+Controls whether the sequence is registered when the element connects. Defaults to `true`. If `enabled` is `false` at connection time, registration is skipped. To turn sequences on or off later, reconnect the element, or create a new `HotkeySequenceController` when your state changes.
+
+```ts
+@hotkeySequence(['G', 'G'], { enabled: true })
+scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+```
+
+### Default options
+
+When you omit options, the library uses the same defaults as the core [`SequenceOptions`](/hotkeys/reference/interfaces/SequenceOptions): `timeout: 1000`, `preventDefault` / `stopPropagation` enabled, smart `ignoreInputs`, and platform auto-detection. If you omit `target`, the Lit adapter resolves it to `document` when the controller connects in the browser.
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```ts
+@hotkeySequence(['G', 'G'], { meta: { name: 'Go to Top', description: 'Scroll to the top of the page' } })
+scrollTop() { window.scrollTo({ top: 0, behavior: 'smooth' }) }
+
+// Or with HotkeySequenceController:
+new HotkeySequenceController(this, ['G', 'G'], () => this.scrollTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/lit/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Sequences with Modifiers
+
+Each step in a sequence can include modifiers:
+
+```ts
+@hotkeySequence(['Mod+K', 'Mod+C'])
+commentSelection() {
+  commentSelection()
+}
+
+@hotkeySequence(['G', 'Shift+G'])
+scrollBottom() {
+  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+}
+```
+
+## Chained modifier chords
+
+You can repeat the same modifier across consecutive steps — for example `Shift+R` then `Shift+T`:
+
+```ts
+@hotkeySequence(['Shift+R', 'Shift+T'])
+chordSequence() {
+  runAfterChords()
+}
+```
+
+### Modifier-only keys between steps
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone, with no letter or other key) are ignored. They do not advance the sequence and they do **not** reset progress. That way a user can tap Shift (or hold it) between chords such as `Shift+R` and `Shift+T` without breaking the sequence — similar to Vim-style flows where a modifier may be pressed before the next chord.
+
+## Common Sequence Patterns
+
+### Vim-style navigation
+
+```ts
+@customElement('vim-navigation')
+class VimNavigation extends LitElement {
+  @hotkeySequence(['G', 'G'])
+  goTop() {
+    scrollToTop()
+  }
+
+  @hotkeySequence(['G', 'Shift+G'])
+  goBottom() {
+    scrollToBottom()
+  }
+
+  @hotkeySequence(['D', 'D'])
+  deleteLine() {
+    deleteCurrentLine()
+  }
+
+  @hotkeySequence(['D', 'W'])
+  deleteWord() {
+    deleteCurrentWord()
+  }
+
+  @hotkeySequence(['C', 'I', 'W'])
+  changeInnerWord() {
+    changeInnerWordImpl()
+  }
+
+  render() {
+    return html`<div></div>`
+  }
+}
+```
+
+### Konami code
+
+```ts
+@hotkeySequence(
+  [
+    'ArrowUp',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowRight',
+    'B',
+    'A',
+  ],
+  { timeout: 2000 },
+)
+enableEasterEgg() {
+  showEasterEgg()
+}
+```
+
+### Multi-step commands
+
+```ts
+@hotkeySequence(['H', 'E', 'L', 'P'])
+openHelp() {
+  showHelp()
+}
+```
+
+## How sequences work
+
+The `SequenceManager` (singleton) handles all sequence registrations. When a key is pressed:
+
+1. It checks if the key matches the next expected step in any registered sequence
+2. If it matches, the sequence advances to the next step
+3. If the timeout expires between steps, the sequence resets
+4. When all steps are completed, the callback fires
+5. Modifier-only keydowns are ignored (they neither advance nor reset the sequence)
+
+### Overlapping sequences
+
+Multiple sequences can share the same prefix. The manager tracks progress for each sequence independently:
+
+```ts
+@hotkeySequence(['D', 'D'])
+dd() {
+  deleteLine()
+}
+
+@hotkeySequence(['D', 'W'])
+dw() {
+  deleteWord()
+}
+
+@hotkeySequence(['D', 'I', 'W'])
+diw() {
+  deleteInnerWord()
+}
+```
+
+After pressing `D`, the manager waits for the next key to determine which sequence to complete.
+
+## The sequence manager
+
+Under the hood, `@hotkeySequence` and `HotkeySequenceController` use the singleton `SequenceManager`. You can also use the core `createSequenceMatcher` function for standalone sequence matching without the singleton:
+
+```ts
+import { createSequenceMatcher } from '@tanstack/lit-hotkeys'
+
+const matcher = createSequenceMatcher(['G', 'G'], {
+  timeout: 1000,
+})
+
+document.addEventListener('keydown', (e) => {
+  if (matcher.match(e)) {
+    console.log('Sequence completed!')
+  }
+  console.log('Progress:', matcher.getProgress()) // e.g., 1/2
+})
+```
diff --git a/mintlify/hotkeys/framework/lit/quick-start.md b/mintlify/hotkeys/framework/lit/quick-start.md
new file mode 100644
index 000000000..975b3070e
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/quick-start.md
@@ -0,0 +1,291 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Hotkeys installed yet? See the [Installation](/hotkeys/installation) page for instructions.
+
+## Your First Hotkey
+
+The Lit adapter offers two ways to register hotkeys: **decorators** for declarative method-level binding, and **controllers** for imperative, reactive state management.
+
+### Using the `@hotkey` Decorator
+
+The `@hotkey` decorator is the simplest way to bind a keyboard shortcut to a class method:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkey } from '@tanstack/lit-hotkeys'
+
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  @hotkey('Mod+S')
+  save() {
+    saveDocument()
+  }
+
+  render() {
+    return html`<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>`
+  }
+}
+```
+
+### Using `HotkeyController`
+
+For more control, use the `HotkeyController` directly:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { HotkeyController } from '@tanstack/lit-hotkeys'
+
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  private saveHotkey = new HotkeyController(
+    this,
+    'Mod+S',
+    () => this.save(),
+  )
+
+  constructor() {
+    super()
+    this.addController(this.saveHotkey)
+  }
+
+  private save() {
+    saveDocument()
+  }
+
+  render() {
+    return html`<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>`
+  }
+}
+```
+
+The `Mod` modifier automatically resolves to `Meta` (Command) on macOS and `Control` on Windows/Linux, so your shortcuts work across platforms without extra logic.
+
+## Common Patterns
+
+### Multiple Hotkeys
+
+Register as many hotkeys as you need with the `@hotkey` decorator:
+
+```ts
+@customElement('my-editor')
+class MyEditor extends LitElement {
+  @hotkey('Mod+S')
+  save() { saveDocument() }
+
+  @hotkey('Mod+Z')
+  undo() { undoAction() }
+
+  @hotkey('Mod+Shift+Z')
+  redo() { redoAction() }
+
+  @hotkey('Mod+F')
+  search() { openSearch() }
+
+  @hotkey('Escape')
+  dismiss() { closeDialog() }
+}
+```
+
+### Scoped Hotkeys
+
+Attach hotkeys to specific elements instead of the entire document using the `target` option. When the target comes from a ref, create the registration after the element has rendered:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { HotkeyController } from '@tanstack/lit-hotkeys'
+
+@customElement('my-panel')
+class MyPanel extends LitElement {
+  private panelRef = createRef<HTMLDivElement>()
+  private escapeHotkey?: HotkeyController
+
+  firstUpdated() {
+    if (!this.panelRef.value) return
+
+    this.escapeHotkey = new HotkeyController(
+      this,
+      'Escape',
+      () => this.closePanel(),
+      { target: this.panelRef.value },
+    )
+    this.addController(this.escapeHotkey)
+  }
+
+  private closePanel() {
+    this.dispatchEvent(new CustomEvent('close'))
+  }
+
+  render() {
+    return html`
+      <div ${ref(this.panelRef)} tabindex="0">
+        <p>Press Escape while focused here to close</p>
+      </div>
+    `
+  }
+}
+```
+
+### Conditional Hotkeys
+
+Enable or disable hotkeys based on application state via the `enabled` option:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkey } from '@tanstack/lit-hotkeys'
+
+@customElement('my-modal')
+class MyModal extends LitElement {
+  @hotkey('Escape', { enabled: true })
+  close() {
+    this.dispatchEvent(new CustomEvent('close'))
+  }
+}
+```
+
+### Multi-Key Sequences
+
+Register Vim-style key sequences with the `@hotkeySequence` decorator or `HotkeySequenceController`:
+
+```ts
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkeySequence } from '@tanstack/lit-hotkeys'
+
+@customElement('vim-editor')
+class VimEditor extends LitElement {
+  @hotkeySequence(['G', 'G'])
+  scrollToTop() {
+    window.scrollTo({ top: 0 })
+  }
+
+  @hotkeySequence(['G', 'Shift+G'])
+  scrollToBottom() {
+    window.scrollTo({ top: document.body.scrollHeight })
+  }
+}
+```
+
+### Tracking Held Keys
+
+Display modifier key state for power-user UIs using `KeyHoldController` and `HeldKeysController`:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { KeyHoldController, HeldKeysController } from '@tanstack/lit-hotkeys'
+
+@customElement('status-bar')
+class StatusBar extends LitElement {
+  private shiftHold = new KeyHoldController(this, 'Shift')
+  private heldKeys = new HeldKeysController(this)
+
+  render() {
+    return html`
+      <div class="status-bar">
+        ${this.shiftHold.value
+          ? html`<span>Shift mode active</span>`
+          : null}
+        ${this.heldKeys.value.length > 0
+          ? html`<span>Keys: ${this.heldKeys.value.join('+')}</span>`
+          : null}
+      </div>
+    `
+  }
+}
+```
+
+### Recording Hotkeys
+
+Build shortcut customization UIs with `HotkeyRecorderController`:
+
+```ts
+import { LitElement, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import {
+  HotkeyRecorderController,
+  formatForDisplay,
+  type Hotkey,
+} from '@tanstack/lit-hotkeys'
+
+@customElement('shortcut-settings')
+class ShortcutSettings extends LitElement {
+  private recorder = new HotkeyRecorderController(this, {
+    onRecord: (hotkey) => {
+      this.shortcut = hotkey
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  @state() private shortcut: Hotkey | null = null
+
+  render() {
+    return html`
+      <button @click=${() => this.recorder.startRecording()}>
+        ${this.recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      ${this.shortcut
+        ? html`<kbd>${formatForDisplay(this.shortcut)}</kbd>`
+        : nothing}
+    `
+  }
+}
+```
+
+### Displaying Hotkeys in the UI
+
+Format hotkeys for platform-aware display:
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { hotkey, formatForDisplay } from '@tanstack/lit-hotkeys'
+
+@customElement('save-button')
+class SaveButton extends LitElement {
+  @hotkey('Mod+S')
+  save() { saveDocument() }
+
+  render() {
+    return html`
+      <button>
+        Save <kbd>${formatForDisplay('Mod+S')}</kbd>
+        <!-- Mac: "⌘S"  |  Windows: "Ctrl+S" -->
+      </button>
+    `
+  }
+}
+```
+
+## Decorators vs Controllers
+
+The Lit adapter provides two complementary approaches:
+
+| | Decorators (`@hotkey`, `@hotkeySequence`) | Controllers (`HotkeyController`, etc.) |
+|---|---|---|
+| **Best for** | Declarative method binding | Reactive state, dynamic hotkeys |
+| **Registration** | Automatic on connect/disconnect | Automatic via `hostConnected`/`hostDisconnected` |
+| **State access** | No (fire-and-forget callbacks) | Yes (`isRecording`, `value`, etc.) |
+| **Dynamic hotkeys** | No (static at decoration time) | Yes (can re-register programmatically) |
+
+Use **decorators** when you simply want a method to fire on a key combo. Use **controllers** when you need reactive state (held keys, recording) or dynamic hotkey registration.
+
+## Next Steps
+
+- [Hotkeys Guide](/hotkeys/framework/lit/guides/hotkeys) - Deep dive into `@hotkey` decorator and `HotkeyController` options
+- [Sequences Guide](/hotkeys/framework/lit/guides/sequences) - Multi-key sequence handling
+- [Hotkey Recording Guide](/hotkeys/framework/lit/guides/hotkey-recording) - Building shortcut customization UIs
+- [Sequence Recording Guide](/hotkeys/framework/lit/guides/sequence-recording) - Capture multi-step shortcuts
+- [Key State Tracking Guide](/hotkeys/framework/lit/guides/key-state-tracking) - Real-time key state monitoring
+- [Formatting & Display Guide](/hotkeys/framework/lit/guides/formatting-display) - Platform-aware hotkey formatting
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HeldKeyCodesController.md b/mintlify/hotkeys/framework/lit/reference/classes/HeldKeyCodesController.md
new file mode 100644
index 000000000..5fbcef2ee
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HeldKeyCodesController.md
@@ -0,0 +1,118 @@
+---
+id: HeldKeyCodesController
+title: HeldKeyCodesController
+---
+
+# Class: HeldKeyCodesController
+
+Defined in: [controllers/held-key-codes.ts:27](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-key-codes.ts#L27)
+
+A Lit ReactiveController that tracks all currently held key names to their physical `event.code` values.
+
+Subscribes to the global KeyStateTracker and triggers host updates
+whenever keys are pressed or released.
+
+## Example
+
+```ts
+class KeyDisplay extends LitElement {
+  private heldKeyCodes = new HeldKeyCodesController(this)
+
+  render() {
+    const heldCodes = Object.entries(this.heldKeyCodes.value).map(([key, code]) => `${key}: ${code}`).join(' + ')
+    return html`
+      <div>
+        Currently pressed: ${heldCodes || 'None'}
+      </div>
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HeldKeyCodesController(_host): HeldKeyCodesController;
+```
+
+Defined in: [controllers/held-key-codes.ts:41](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-key-codes.ts#L41)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller.
+
+#### Returns
+
+`HeldKeyCodesController`
+
+## Accessors
+
+### value
+
+#### Get Signature
+
+```ts
+get value(): Record<string, string>;
+```
+
+Defined in: [controllers/held-key-codes.ts:34](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-key-codes.ts#L34)
+
+Map of currently held key names to their physical `event.code` values.
+
+##### Returns
+
+`Record`\&lt;`string`, `string`\>
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/held-key-codes.ts:46](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-key-codes.ts#L46)
+
+Subscribes to the tracker store and updates the internal state when changes occur.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/held-key-codes.ts:62](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-key-codes.ts#L62)
+
+Unsubscribes from the tracker store and stops tracking the held key codes.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HeldKeysController.md b/mintlify/hotkeys/framework/lit/reference/classes/HeldKeysController.md
new file mode 100644
index 000000000..687c5d92a
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HeldKeysController.md
@@ -0,0 +1,117 @@
+---
+id: HeldKeysController
+title: HeldKeysController
+---
+
+# Class: HeldKeysController
+
+Defined in: [controllers/held-keys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-keys.ts#L26)
+
+A Lit ReactiveController that tracks all currently held keyboard keys.
+
+Subscribes to the global KeyStateTracker and triggers host updates
+whenever keys are pressed or released.
+
+## Example
+
+```ts
+class KeyDisplay extends LitElement {
+  private heldKeys = new HeldKeysController(this)
+
+  render() {
+    return html`
+      <div>
+        Currently pressed: ${this.heldKeys.value.join(' + ') || 'None'}
+      </div>
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HeldKeysController(_host): HeldKeysController;
+```
+
+Defined in: [controllers/held-keys.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-keys.ts#L40)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller.
+
+#### Returns
+
+`HeldKeysController`
+
+## Accessors
+
+### value
+
+#### Get Signature
+
+```ts
+get value(): string[];
+```
+
+Defined in: [controllers/held-keys.ts:33](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-keys.ts#L33)
+
+Array of currently held key names.
+
+##### Returns
+
+`string`[]
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/held-keys.ts:45](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-keys.ts#L45)
+
+Subscribes to the tracker store and updates the internal state when changes occur.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/held-keys.ts:59](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/held-keys.ts#L59)
+
+Unsubscribes from the tracker store and stops tracking the held keys.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HotkeyController.md b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyController.md
new file mode 100644
index 000000000..bb323a90f
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyController.md
@@ -0,0 +1,117 @@
+---
+id: HotkeyController
+title: HotkeyController
+---
+
+# Class: HotkeyController
+
+Defined in: [controllers/hotkey.ts:34](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey.ts#L34)
+
+A Lit ReactiveController that registers a keyboard hotkey when the host
+element is connected and unregisters it when the host is disconnected.
+
+## Example
+
+```ts
+class MyElement extends LitElement {
+  private hotkey = new HotkeyController(this, 'Mod+S', () => this.save())
+
+  constructor() {
+    super()
+    this.addController(this.hotkey)
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeyController(
+   _host, 
+   _hotkey, 
+   _callback, 
+   _options): HotkeyController;
+```
+
+Defined in: [controllers/hotkey.ts:44](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey.ts#L44)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller (use `this` and pass it to `addController()`).
+
+##### \_hotkey
+
+`RegisterableHotkey`
+
+The key or key combo to listen for (e.g. `'Mod+S'` or a raw hotkey object).
+
+##### \_callback
+
+`HotkeyCallback`
+
+Function to run when the hotkey is pressed; called with the host as `this`.
+
+##### \_options
+
+`HotkeyOptions` = `HOTKEY_DEFAULT_OPTIONS`
+
+Optional registration options (target, platform, enabled, etc.).
+
+#### Returns
+
+`HotkeyController`
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/hotkey.ts:55](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey.ts#L55)
+
+Registers the hotkey with the global manager when the host is connected to the DOM.
+Skips registration if no target is available (e.g. no document or options.target is null).
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/hotkey.ts:90](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey.ts#L90)
+
+Unregisters the hotkey when the host is disconnected from the DOM.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRecorderController.md b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRecorderController.md
new file mode 100644
index 000000000..be1e771a8
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRecorderController.md
@@ -0,0 +1,225 @@
+---
+id: HotkeyRecorderController
+title: HotkeyRecorderController
+---
+
+# Class: HotkeyRecorderController
+
+Defined in: [controllers/hotkey-recorder.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L40)
+
+A Lit ReactiveController that records keyboard shortcuts.
+
+Wraps the framework-agnostic `HotkeyRecorder` class, managing all the
+complexity of capturing keyboard events, converting them to hotkey strings,
+and handling edge cases like Escape to cancel or Backspace/Delete to clear.
+
+## Example
+
+```ts
+class ShortcutSettings extends LitElement {
+  private recorder = new HotkeyRecorderController(this, {
+    onRecord: (hotkey) => {
+      this.shortcut = hotkey
+      this.requestUpdate()
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  private shortcut: Hotkey | null = null
+
+  render() {
+    return html`
+      <button @click=${() => this.recorder.startRecording()}>
+        ${this.recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      ${this.recorder.recordedHotkey
+        ? html`<div>Recording: ${this.recorder.recordedHotkey}</div>`
+        : nothing}
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeyRecorderController(_host, _options): HotkeyRecorderController;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:64](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L64)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller.
+
+##### \_options
+
+`HotkeyRecorderOptions`
+
+Configuration options for the recorder.
+
+#### Returns
+
+`HotkeyRecorderController`
+
+## Accessors
+
+### isRecording
+
+#### Get Signature
+
+```ts
+get isRecording(): boolean;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:51](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L51)
+
+Whether recording is currently active.
+
+##### Returns
+
+`boolean`
+
+***
+
+### recordedHotkey
+
+#### Get Signature
+
+```ts
+get recordedHotkey(): Hotkey | null;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:56](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L56)
+
+The currently recorded hotkey (for live preview).
+
+##### Returns
+
+`Hotkey` \| `null`
+
+## Methods
+
+### cancelRecording()
+
+```ts
+cancelRecording(): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:117](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L117)
+
+Cancel recording without saving.
+
+#### Returns
+
+`void`
+
+***
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L73)
+
+Subscribes to the recorder store and updates the internal state when changes occur.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:92](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L92)
+
+Unsubscribes from the recorder store and destroys the recorder instance to prevent memory leaks.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
+
+***
+
+### setOptions()
+
+```ts
+setOptions(options): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:101](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L101)
+
+Updates the recorder options (e.g. callbacks).
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;`HotkeyRecorderOptions`\>
+
+#### Returns
+
+`void`
+
+***
+
+### startRecording()
+
+```ts
+startRecording(): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:107](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L107)
+
+Start recording a new hotkey.
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording(): void;
+```
+
+Defined in: [controllers/hotkey-recorder.ts:112](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-recorder.ts#L112)
+
+Stop recording (same as cancel but without calling onCancel).
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRegistrationsController.md b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRegistrationsController.md
new file mode 100644
index 000000000..0aa6fb244
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HotkeyRegistrationsController.md
@@ -0,0 +1,140 @@
+---
+id: HotkeyRegistrationsController
+title: HotkeyRegistrationsController
+---
+
+# Class: HotkeyRegistrationsController
+
+Defined in: [controllers/hotkey-registrations.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L35)
+
+A Lit ReactiveController that tracks all hotkey and sequence registrations.
+
+Subscribes to the singleton HotkeyManager and SequenceManager stores and
+triggers host updates whenever registrations change.
+
+## Example
+
+```ts
+class ShortcutPalette extends LitElement {
+  private registrations = new HotkeyRegistrationsController(this)
+
+  render() {
+    return html`
+      <ul>
+        ${this.registrations.hotkeys.map(
+          (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+        )}
+      </ul>
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeyRegistrationsController(_host): HotkeyRegistrationsController;
+```
+
+Defined in: [controllers/hotkey-registrations.ts:51](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L51)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+#### Returns
+
+`HotkeyRegistrationsController`
+
+## Accessors
+
+### hotkeys
+
+#### Get Signature
+
+```ts
+get hotkeys(): HotkeyRegistrationView[];
+```
+
+Defined in: [controllers/hotkey-registrations.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L42)
+
+All registered hotkeys (public view, no callbacks).
+
+##### Returns
+
+`HotkeyRegistrationView`[]
+
+***
+
+### sequences
+
+#### Get Signature
+
+```ts
+get sequences(): SequenceRegistrationView[];
+```
+
+Defined in: [controllers/hotkey-registrations.ts:47](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L47)
+
+All registered sequences.
+
+##### Returns
+
+`SequenceRegistrationView`[]
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/hotkey-registrations.ts:55](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L55)
+
+Called when the host is connected to the component tree. For custom
+element hosts, this corresponds to the `connectedCallback()` lifecycle,
+which is only called when the component is connected to the document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/hotkey-registrations.ts:81](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-registrations.ts#L81)
+
+Called when the host is disconnected from the component tree. For custom
+element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
+which is called the host or an ancestor component is disconnected from the
+document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceController.md b/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceController.md
new file mode 100644
index 000000000..96f10ab02
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceController.md
@@ -0,0 +1,117 @@
+---
+id: HotkeySequenceController
+title: HotkeySequenceController
+---
+
+# Class: HotkeySequenceController
+
+Defined in: [controllers/hotkey-sequence.ts:28](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence.ts#L28)
+
+A Lit ReactiveController that registers a keyboard sequence (e.g. Vim-style)
+when the host element is connected and unregisters it when the host is disconnected.
+
+## Example
+
+```ts
+class MyElement extends LitElement {
+  private seq = new HotkeySequenceController(this, ['G', 'G'], () => this.goToTop())
+
+  constructor() {
+    super()
+    this.addController(this.seq)
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeySequenceController(
+   _host, 
+   _sequence, 
+   _callback, 
+   _options): HotkeySequenceController;
+```
+
+Defined in: [controllers/hotkey-sequence.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence.ts#L38)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller (use `this` and pass it to `addController()`).
+
+##### \_sequence
+
+`HotkeySequence`
+
+The key sequence to listen for (e.g. `['G', 'G']`).
+
+##### \_callback
+
+`HotkeyCallback`
+
+Function to run when the sequence is completed; called with the host as `this`.
+
+##### \_options
+
+`SequenceOptions` = `HOTKEY_SEQUENCE_DEFAULT_OPTIONS`
+
+Optional sequence options (target, timeout, enabled, etc.).
+
+#### Returns
+
+`HotkeySequenceController`
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/hotkey-sequence.ts:49](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence.ts#L49)
+
+Registers the sequence with the global sequence manager when the host is connected to the DOM.
+Skips registration if disabled, sequence is empty, or no target is available.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/hotkey-sequence.ts:76](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence.ts#L76)
+
+Unregisters the sequence when the host is disconnected from the DOM.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceRecorderController.md b/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceRecorderController.md
new file mode 100644
index 000000000..127c0e568
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/HotkeySequenceRecorderController.md
@@ -0,0 +1,261 @@
+---
+id: HotkeySequenceRecorderController
+title: HotkeySequenceRecorderController
+---
+
+# Class: HotkeySequenceRecorderController
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:45](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L45)
+
+A Lit ReactiveController that records multi-chord sequences (Vim-style shortcuts).
+
+Wraps the framework-agnostic `HotkeySequenceRecorder` class, managing store
+subscriptions and host update lifecycle automatically.
+
+## Example
+
+```ts
+class ShortcutSettings extends LitElement {
+  private recorder = new HotkeySequenceRecorderController(this, {
+    onRecord: (sequence) => {
+      this.sequence = sequence
+      this.requestUpdate()
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  private sequence: HotkeySequence | null = null
+
+  render() {
+    return html`
+      <button @click=${() => this.recorder.startRecording()}>
+        ${this.recorder.isRecording ? 'Recording...' : 'Edit Sequence'}
+      </button>
+      ${this.recorder.steps.length
+        ? html`<div>Steps: ${this.recorder.steps.join(' → ')}</div>`
+        : nothing}
+      ${this.recorder.recordedSequence
+        ? html`<div>Recorded: ${this.recorder.recordedSequence.join(' → ')}</div>`
+        : nothing}
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeySequenceRecorderController(_host, _options): HotkeySequenceRecorderController;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:76](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L76)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+The Lit component that owns this controller.
+
+##### \_options
+
+`HotkeySequenceRecorderOptions`
+
+Configuration options for the sequence recorder.
+
+#### Returns
+
+`HotkeySequenceRecorderController`
+
+## Accessors
+
+### isRecording
+
+#### Get Signature
+
+```ts
+get isRecording(): boolean;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L58)
+
+Whether recording is currently active.
+
+##### Returns
+
+`boolean`
+
+***
+
+### recordedSequence
+
+#### Get Signature
+
+```ts
+get recordedSequence(): HotkeySequence | null;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:68](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L68)
+
+Last committed sequence, or null if none.
+
+##### Returns
+
+`HotkeySequence` \| `null`
+
+***
+
+### steps
+
+#### Get Signature
+
+```ts
+get steps(): HotkeySequence;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:63](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L63)
+
+Chords captured in the current session.
+
+##### Returns
+
+`HotkeySequence`
+
+## Methods
+
+### cancelRecording()
+
+```ts
+cancelRecording(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:133](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L133)
+
+Cancel recording without saving.
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:138](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L138)
+
+Commit current steps as a sequence (no-op if empty).
+
+#### Returns
+
+`void`
+
+***
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:85](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L85)
+
+Subscribes to the recorder store and updates internal state when changes occur.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:107](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L107)
+
+Unsubscribes from the recorder store and destroys the recorder instance to prevent memory leaks.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
+
+***
+
+### setOptions()
+
+```ts
+setOptions(options): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:117](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L117)
+
+Updates the recorder options.
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;`HotkeySequenceRecorderOptions`\>
+
+#### Returns
+
+`void`
+
+***
+
+### startRecording()
+
+```ts
+startRecording(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:123](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L123)
+
+Start recording a new sequence.
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording(): void;
+```
+
+Defined in: [controllers/hotkey-sequence-recorder.ts:128](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/hotkey-sequence-recorder.ts#L128)
+
+Stop recording (same as cancel but without calling onCancel).
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/lit/reference/classes/KeyHoldController.md b/mintlify/hotkeys/framework/lit/reference/classes/KeyHoldController.md
new file mode 100644
index 000000000..2aa575cf5
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/classes/KeyHoldController.md
@@ -0,0 +1,140 @@
+---
+id: KeyHoldController
+title: KeyHoldController
+---
+
+# Class: KeyHoldController
+
+Defined in: [controllers/key-hold.ts:43](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/key-hold.ts#L43)
+
+A Lit ReactiveController that tracks whether a specific key is currently held.
+
+Subscribes to the global KeyStateTracker and triggers host updates
+when the held state of the specified key changes.
+
+## Examples
+
+```ts
+class MyElement extends LitElement {
+  private shiftHold = new KeyHoldController(this, 'Shift')
+
+  render() {
+    return html`
+      <div style="opacity: ${this.shiftHold.value ? 1 : 0.5}">
+        ${this.shiftHold.value ? 'Shift is pressed!' : 'Press Shift'}
+      </div>
+    `
+  }
+}
+```
+
+```ts
+class ModifierIndicators extends LitElement {
+  private ctrl = new KeyHoldController(this, 'Control')
+  private shift = new KeyHoldController(this, 'Shift')
+  private alt = new KeyHoldController(this, 'Alt')
+
+  render() {
+    return html`
+      <span style="opacity: ${this.ctrl.value ? 1 : 0.3}">Ctrl</span>
+      <span style="opacity: ${this.shift.value ? 1 : 0.3}">Shift</span>
+      <span style="opacity: ${this.alt.value ? 1 : 0.3}">Alt</span>
+    `
+  }
+}
+```
+
+## Implements
+
+- `ReactiveController`
+
+## Constructors
+
+### Constructor
+
+```ts
+new KeyHoldController(_host, _key): KeyHoldController;
+```
+
+Defined in: [controllers/key-hold.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/key-hold.ts#L58)
+
+#### Parameters
+
+##### \_host
+
+`ReactiveControllerHost`
+
+##### \_key
+
+`IndividualKey`
+
+#### Returns
+
+`KeyHoldController`
+
+## Accessors
+
+### value
+
+#### Get Signature
+
+```ts
+get value(): boolean;
+```
+
+Defined in: [controllers/key-hold.ts:50](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/key-hold.ts#L50)
+
+Whether the tracked key is currently held down.
+
+##### Returns
+
+`boolean`
+
+## Methods
+
+### hostConnected()
+
+```ts
+hostConnected(): void;
+```
+
+Defined in: [controllers/key-hold.ts:65](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/key-hold.ts#L65)
+
+Called when the host is connected to the component tree. For custom
+element hosts, this corresponds to the `connectedCallback()` lifecycle,
+which is only called when the component is connected to the document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostConnected
+```
+
+***
+
+### hostDisconnected()
+
+```ts
+hostDisconnected(): void;
+```
+
+Defined in: [controllers/key-hold.ts:83](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/key-hold.ts#L83)
+
+Called when the host is disconnected from the component tree. For custom
+element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
+which is called the host or an ancestor component is disconnected from the
+document.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostDisconnected
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/functions/hotkey.md b/mintlify/hotkeys/framework/lit/reference/functions/hotkey.md
new file mode 100644
index 000000000..687d7cf39
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/functions/hotkey.md
@@ -0,0 +1,76 @@
+---
+id: hotkey
+title: hotkey
+---
+
+# Function: hotkey()
+
+```ts
+function hotkey(hotkey, options): <T>(proto, propertyKey, descriptor?) => void;
+```
+
+Defined in: [decorators/hotkey.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/decorators/hotkey.ts#L29)
+
+Decorator that registers a keyboard hotkey on the element when it connects
+and unregisters when it disconnects. Uses [HotkeyController](/hotkeys/framework/lit/reference/classes/HotkeyController) under the hood.
+
+## Parameters
+
+### hotkey
+
+`RegisterableHotkey`
+
+The key or key combo to listen for (e.g. `'Mod+S'` or a raw hotkey object).
+
+### options
+
+`HotkeyOptions` = `HOTKEY_DEFAULT_OPTIONS`
+
+Optional registration options (target, platform, enabled, etc.).
+
+## Returns
+
+A method decorator for use on LitElement methods.
+
+```ts
+<T>(
+   proto, 
+   propertyKey, 
+   descriptor?): void;
+```
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `HotkeyCallback`
+
+### Parameters
+
+#### proto
+
+`LitElement`
+
+#### propertyKey
+
+`string`
+
+#### descriptor?
+
+`TypedPropertyDescriptor`\&lt;`T`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+class MyElement extends LitElement {
+  @hotkey('Mod+S')
+  save() { this.doSave() }
+
+  @hotkey('Escape')
+  close() { this.dismiss() }
+}
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/functions/hotkeySequence.md b/mintlify/hotkeys/framework/lit/reference/functions/hotkeySequence.md
new file mode 100644
index 000000000..4de1e6d43
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/functions/hotkeySequence.md
@@ -0,0 +1,77 @@
+---
+id: hotkeySequence
+title: hotkeySequence
+---
+
+# Function: hotkeySequence()
+
+```ts
+function hotkeySequence(sequence, options): <T>(proto, methodName, descriptor) => void;
+```
+
+Defined in: [decorators/hotkey-sequence.ts:30](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/decorators/hotkey-sequence.ts#L30)
+
+Decorator that registers a keyboard sequence (e.g. Vim-style) on the element
+when it connects and unregisters when it disconnects. Uses
+[HotkeySequenceController](/hotkeys/framework/lit/reference/classes/HotkeySequenceController) under the hood.
+
+## Parameters
+
+### sequence
+
+`HotkeySequence`
+
+The key sequence to listen for (e.g. `['G', 'G']` for "g g").
+
+### options
+
+`SequenceOptions` = `HOTKEY_SEQUENCE_DEFAULT_OPTIONS`
+
+Optional sequence options (target, timeout, enabled, etc.).
+
+## Returns
+
+A method decorator for use on LitElement methods.
+
+```ts
+<T>(
+   proto, 
+   methodName, 
+   descriptor): void;
+```
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `HotkeyCallback`
+
+### Parameters
+
+#### proto
+
+`LitElement`
+
+#### methodName
+
+`string`
+
+#### descriptor
+
+`TypedPropertyDescriptor`\&lt;`T`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+class MyElement extends LitElement {
+  @hotkeySequence(['G', 'G'])
+  goToTop() { window.scrollTo(0, 0) }
+
+  @hotkeySequence(['D', 'D'], { timeout: 500 })
+  deleteLine() { this.deleteCurrentLine() }
+}
+```
diff --git a/mintlify/hotkeys/framework/lit/reference/index.md b/mintlify/hotkeys/framework/lit/reference/index.md
new file mode 100644
index 000000000..4fc7e7463
--- /dev/null
+++ b/mintlify/hotkeys/framework/lit/reference/index.md
@@ -0,0 +1,22 @@
+---
+id: "@tanstack/lit-hotkeys"
+title: "@tanstack/lit-hotkeys"
+---
+
+# @tanstack/lit-hotkeys
+
+## Classes
+
+- [HeldKeyCodesController](/hotkeys/framework/lit/reference/classes/HeldKeyCodesController)
+- [HeldKeysController](/hotkeys/framework/lit/reference/classes/HeldKeysController)
+- [HotkeyController](/hotkeys/framework/lit/reference/classes/HotkeyController)
+- [HotkeyRecorderController](/hotkeys/framework/lit/reference/classes/HotkeyRecorderController)
+- [HotkeyRegistrationsController](/hotkeys/framework/lit/reference/classes/HotkeyRegistrationsController)
+- [HotkeySequenceController](/hotkeys/framework/lit/reference/classes/HotkeySequenceController)
+- [HotkeySequenceRecorderController](/hotkeys/framework/lit/reference/classes/HotkeySequenceRecorderController)
+- [KeyHoldController](/hotkeys/framework/lit/reference/classes/KeyHoldController)
+
+## Functions
+
+- [hotkey](/hotkeys/framework/lit/reference/functions/hotkey)
+- [hotkeySequence](/hotkeys/framework/lit/reference/functions/hotkeySequence)
diff --git a/mintlify/hotkeys/framework/preact/examples/useHeldKeys.md b/mintlify/hotkeys/framework/preact/examples/useHeldKeys.md
new file mode 100644
index 000000000..f564b55d5
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHeldKeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHeldKeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHeldKeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkey.md b/mintlify/hotkeys/framework/preact/examples/useHotkey.md
new file mode 100644
index 000000000..a731110ae
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkey.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkeyRecorder.md b/mintlify/hotkeys/framework/preact/examples/useHotkeyRecorder.md
new file mode 100644
index 000000000..73c236ed7
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkeyRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkeyRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkeyRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkeySequence.md b/mintlify/hotkeys/framework/preact/examples/useHotkeySequence.md
new file mode 100644
index 000000000..28ebb9d43
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkeySequence.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkeySequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkeySequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/preact/examples/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..e5f2c59b9
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkeySequenceRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequenceRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkeySequenceRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkeySequenceRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkeySequences.md b/mintlify/hotkeys/framework/preact/examples/useHotkeySequences.md
new file mode 100644
index 000000000..f9bff177b
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkeySequences.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkeySequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkeySequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useHotkeys.md b/mintlify/hotkeys/framework/preact/examples/useHotkeys.md
new file mode 100644
index 000000000..be8861c9d
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useHotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useHotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useHotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/examples/useKeyhold.md b/mintlify/hotkeys/framework/preact/examples/useKeyhold.md
new file mode 100644
index 000000000..2fe33e784
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/examples/useKeyhold.md
@@ -0,0 +1,12 @@
+---
+title: "useKeyHold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/preact/examples/useKeyhold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/preact/useKeyhold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/preact/guides/formatting-display.md b/mintlify/hotkeys/framework/preact/guides/formatting-display.md
new file mode 100644
index 000000000..f5da66306
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/formatting-display.md
@@ -0,0 +1,212 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys provides several utilities for formatting hotkey strings into human-readable display text. These utilities handle platform differences automatically, so your UI shows the right symbols and labels for each operating system.
+
+## `formatForDisplay`
+
+The primary formatting function. Returns a platform-aware string using symbols on macOS and text labels on Windows/Linux.
+
+```tsx
+import { formatForDisplay } from '@tanstack/preact-hotkeys'
+
+// On macOS (symbols separated by spaces):
+formatForDisplay('Mod+S')         // "⌘ S"
+formatForDisplay('Mod+Shift+Z')   // "⌘ ⇧ Z"
+formatForDisplay('Control+Alt+D') // "⌃ ⌥ D"
+
+// On Windows/Linux:
+formatForDisplay('Mod+S')         // "Ctrl+S"
+formatForDisplay('Mod+Shift+Z')   // "Ctrl+Shift+Z"
+formatForDisplay('Control+Alt+D') // "Ctrl+Alt+D"
+```
+
+### Options
+
+```ts
+formatForDisplay('Mod+S', {
+  platform: 'mac',
+  useSymbols: true,
+})
+```
+
+On macOS, modifier order matches canonical normalization (same as `formatWithLabels`), and symbols are joined with **spaces** (e.g., `⌘ ⇧ Z`). On Windows and Linux, modifiers are joined with `+` (e.g., `Ctrl+Shift+Z`).
+
+## `formatWithLabels`
+
+Returns human-readable text labels (e.g., "Cmd" instead of the symbol). Useful when you want readable text rather than symbols.
+
+```tsx
+import { formatWithLabels } from '@tanstack/preact-hotkeys'
+
+// On macOS:
+formatWithLabels('Mod+S', { platform: 'mac' }) // "Cmd+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'mac' }) // "Cmd+Shift+Z"
+
+// On Windows/Linux:
+formatWithLabels('Mod+S', { platform: 'windows' }) // "Ctrl+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'windows' }) // "Ctrl+Shift+Z"
+```
+
+Modifier order matches canonical normalization from the core package.
+
+## Using Formatted Hotkeys in Preact
+
+### Keyboard Shortcut Badges
+
+```tsx
+import { formatForDisplay } from '@tanstack/preact-hotkeys'
+
+function ShortcutBadge({ hotkey }: { hotkey: string }) {
+  return <kbd className="shortcut-badge">{formatForDisplay(hotkey)}</kbd>
+}
+
+// Usage
+<ShortcutBadge hotkey="Mod+S" />      // Renders: ⌘ S (Mac) or Ctrl+S (Windows)
+<ShortcutBadge hotkey="Mod+Shift+P" /> // Renders: ⌘ ⇧ P (Mac) or Ctrl+Shift+P (Windows)
+```
+
+### Menu Items with Hotkeys
+
+```tsx
+import { useHotkey, formatForDisplay } from '@tanstack/preact-hotkeys'
+
+function MenuItem({
+  label,
+  hotkey,
+  onAction,
+}: {
+  label: string
+  hotkey: string
+  onAction: () => void
+}) {
+  useHotkey(hotkey, () => onAction())
+
+  return (
+    <div className="menu-item">
+      <span>{label}</span>
+      <span className="menu-shortcut">{formatForDisplay(hotkey)}</span>
+    </div>
+  )
+}
+
+// Usage
+<MenuItem label="Save" hotkey="Mod+S" onAction={save} />
+<MenuItem label="Undo" hotkey="Mod+Z" onAction={undo} />
+<MenuItem label="Find" hotkey="Mod+F" onAction={openFind} />
+```
+
+### Command Palette Items
+
+```tsx
+import { formatForDisplay } from '@tanstack/preact-hotkeys'
+import type { Hotkey } from '@tanstack/preact-hotkeys'
+
+interface Command {
+  id: string
+  label: string
+  hotkey?: Hotkey
+  action: () => void
+}
+
+function CommandPaletteItem({ command }: { command: Command }) {
+  return (
+    <div className="command-item" onClick={command.action}>
+      <span>{command.label}</span>
+      {command.hotkey && (
+        <kbd>{formatForDisplay(command.hotkey)}</kbd>
+      )}
+    </div>
+  )
+}
+```
+
+## Platform Symbols Reference
+
+On macOS, modifiers are displayed as symbols:
+
+| Modifier | Mac Symbol | Windows/Linux Label |
+|----------|-----------|-------------------|
+| Meta (Cmd) | `⌘` | `Win` / `Super` |
+| Control | `⌃` | `Ctrl` |
+| Alt/Option | `⌥` | `Alt` |
+| Shift | `⇧` | `Shift` |
+
+Special keys also have display symbols:
+
+| Key | Display |
+|-----|---------|
+| Escape | `Esc` |
+| Backspace | `⌫` (Mac) / `Backspace` |
+| Delete | `⌦` (Mac) / `Del` |
+| Enter | `↵` |
+| Tab | `⇥` |
+| ArrowUp | `↑` |
+| ArrowDown | `↓` |
+| ArrowLeft | `←` |
+| ArrowRight | `→` |
+| Space | `Space` |
+
+## Parsing and Normalization
+
+TanStack Hotkeys also provides utilities for parsing and normalizing hotkey strings:
+
+### `parseHotkey`
+
+Parse a hotkey string into its component parts:
+
+```ts
+import { parseHotkey } from '@tanstack/preact-hotkeys'
+
+const parsed = parseHotkey('Mod+Shift+S')
+// {
+//   key: 'S',
+//   ctrl: false,   // true on Windows/Linux
+//   shift: true,
+//   alt: false,
+//   meta: true,    // true on Mac
+//   modifiers: ['Shift', 'Meta']  // or ['Control', 'Shift'] on Windows
+// }
+```
+
+### `normalizeHotkey` and `normalizeRegisterableHotkey`
+
+Core helpers produce a **canonical** hotkey string for storage and registration. When the platform allows `Mod` (Command on Mac without Control; Control on Windows/Linux without Meta), the output uses `Mod` and **Mod-first** modifier order (`Mod+Shift+E`), not expanded `Meta`/`Control`.
+
+```ts
+import { normalizeHotkey, normalizeRegisterableHotkey } from '@tanstack/preact-hotkeys'
+
+normalizeHotkey('Cmd+S', 'mac')           // 'Mod+S'
+normalizeHotkey('Ctrl+Shift+s', 'windows') // 'Mod+Shift+S'
+normalizeHotkey('Shift+Meta+E', 'mac')    // 'Mod+Shift+E'
+
+// String or RawHotkey — same string adapters use internally:
+normalizeRegisterableHotkey({ key: 'S', mod: true, shift: true }, 'mac') // 'Mod+Shift+S'
+```
+
+Framework hooks normalize registerable hotkeys automatically via `normalizeRegisterableHotkey`.
+
+## Validation
+
+Use `validateHotkey` to check if a hotkey string is valid and get warnings about potential platform issues:
+
+```ts
+import { validateHotkey } from '@tanstack/preact-hotkeys'
+
+const result = validateHotkey('Alt+A')
+// {
+//   valid: true,
+//   warnings: ['Alt+letter combinations may not work on macOS due to special characters'],
+//   errors: []
+// }
+
+const result2 = validateHotkey('InvalidKey+S')
+// {
+//   valid: false,
+//   warnings: [],
+//   errors: ['Unknown key: InvalidKey']
+// }
+```
+
diff --git a/mintlify/hotkeys/framework/preact/guides/hotkey-recording.md b/mintlify/hotkeys/framework/preact/guides/hotkey-recording.md
new file mode 100644
index 000000000..a3818ffc2
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/hotkey-recording.md
@@ -0,0 +1,179 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `useHotkeyRecorder` hook for building keyboard shortcut customization UIs. This lets users record their own shortcuts by pressing the desired key combination, similar to how system preferences or IDE shortcut editors work.
+
+## Basic Usage
+
+```tsx
+import { useHotkeyRecorder, formatForDisplay } from '@tanstack/preact-hotkeys'
+
+function ShortcutRecorder() {
+  const { isRecording, recordedHotkey, startRecording, stopRecording, cancelRecording } =
+    useHotkeyRecorder({
+      onRecord: (hotkey) => {
+        console.log('Recorded:', hotkey) // e.g., "Mod+Shift+S"
+      },
+    })
+
+  return (
+    <div>
+      <button onClick={isRecording ? stopRecording : startRecording}>
+        {isRecording
+          ? 'Press a key combination...'
+          : recordedHotkey
+            ? formatForDisplay(recordedHotkey)
+            : 'Click to record'}
+      </button>
+      {isRecording && (
+        <button onClick={cancelRecording}>Cancel</button>
+      )}
+    </div>
+  )
+}
+```
+
+## Return Value
+
+The `useHotkeyRecorder` hook returns an object with:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is currently listening for key presses |
+| `recordedHotkey` | `Hotkey \| null` | The last recorded hotkey string, or `null` if nothing recorded |
+| `startRecording` | `() => void` | Start listening for key presses |
+| `stopRecording` | `() => void` | Stop listening and keep the recorded hotkey |
+| `cancelRecording` | `() => void` | Stop listening and discard any recorded hotkey |
+
+## Options
+
+```tsx
+useHotkeyRecorder({
+  onRecord: (hotkey) => { /* called when a hotkey is recorded */ },
+  onCancel: () => { /* called when recording is cancelled */ },
+  onClear: () => { /* called when the recorded hotkey is cleared */ },
+})
+```
+
+### `onRecord`
+
+Called when the user presses a valid key combination (a modifier + a non-modifier key, or a single non-modifier key). Receives the recorded `Hotkey` string.
+
+### `onCancel`
+
+Called when recording is cancelled (either by pressing Escape or calling `cancelRecording()`).
+
+### `onClear`
+
+Called when the recorded hotkey is cleared (by pressing Backspace or Delete during recording).
+
+### Global Default Options via Provider
+
+You can set default options for all `useHotkeyRecorder` calls by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/preact-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeyRecorder: {
+      onCancel: () => console.log('Recording cancelled'),
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Recording Behavior
+
+The recorder has specific behavior for different keys:
+
+| Key | Behavior |
+|-----|----------|
+| **Modifier only** (Shift, Ctrl, etc.) | Waits for a non-modifier key -- modifier-only presses don't complete a recording |
+| **Modifier + key** (e.g., Ctrl+S) | Records the full combination |
+| **Single key** (e.g., Escape, F1) | Records the single key |
+| **Escape** | Cancels the recording |
+| **Backspace / Delete** | Clears the currently recorded hotkey |
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```tsx
+useHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+### Mod Auto-Conversion
+
+Recorded hotkeys automatically use the portable `Mod` format. If a user on macOS presses Command+S, the recorded hotkey will be `Mod+S` rather than `Meta+S`. This ensures shortcuts are portable across platforms.
+
+## Building a Shortcut Settings UI
+
+Here's a more complete example of a shortcut customization panel:
+
+```tsx
+import { useState } from 'preact/hooks'
+import {
+  useHotkey,
+  useHotkeyRecorder,
+  formatForDisplay,
+} from '@tanstack/preact-hotkeys'
+import type { Hotkey } from '@tanstack/preact-hotkeys'
+
+function ShortcutSettings() {
+  const [shortcuts, setShortcuts] = useState<Record<string, Hotkey>>({
+    save: 'Mod+S',
+    undo: 'Mod+Z',
+    search: 'Mod+K',
+  })
+
+  const [editingAction, setEditingAction] = useState<string | null>(null)
+
+  const recorder = useHotkeyRecorder({
+    onRecord: (hotkey) => {
+      if (editingAction) {
+        setShortcuts((prev) => ({ ...prev, [editingAction]: hotkey }))
+        setEditingAction(null)
+      }
+    },
+    onCancel: () => setEditingAction(null),
+  })
+
+  // Register the actual hotkeys with their current bindings
+  useHotkey(shortcuts.save, () => save())
+  useHotkey(shortcuts.undo, () => undo())
+  useHotkey(shortcuts.search, () => openSearch())
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      {Object.entries(shortcuts).map(([action, hotkey]) => (
+        <div key={action}>
+          <span>{action}</span>
+          <button
+            onClick={() => {
+              setEditingAction(action)
+              recorder.startRecording()
+            }}
+          >
+            {editingAction === action && recorder.isRecording
+              ? 'Press keys...'
+              : formatForDisplay(hotkey)}
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+## Under the Hood
+
+The `useHotkeyRecorder` hook creates a `HotkeyRecorder` class instance and subscribes to its reactive state via `@tanstack/preact-store`. The class manages its own keyboard event listeners and state, and the hook handles cleanup on unmount.
diff --git a/mintlify/hotkeys/framework/preact/guides/hotkeys.md b/mintlify/hotkeys/framework/preact/guides/hotkeys.md
new file mode 100644
index 000000000..9a670efaf
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/hotkeys.md
@@ -0,0 +1,369 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `useHotkey` hook is the primary way to register keyboard shortcuts in Preact applications. It wraps the singleton `HotkeyManager` with automatic lifecycle management, stale-closure prevention, and Preact ref support.
+
+## Basic Usage
+
+```tsx
+import { useHotkey } from '@tanstack/preact-hotkeys'
+
+function App() {
+  useHotkey('Mod+S', () => {
+    saveDocument()
+  }, {
+    // override the default options here
+  })
+}
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```tsx
+useHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)       // 'Mod+S'
+  console.log(context.parsedHotkey) // { key: 'S', ctrl: false, shift: false, alt: false, meta: true, modifiers: ['Meta'] }
+})
+```
+
+You can pass a hotkey as a string or as a `RawHotkey` object (modifier booleans optional). Use `mod` for cross-platform shortcuts (Command on Mac, Control elsewhere):
+
+```tsx
+useHotkey('Mod+S', () => save())
+useHotkey({ key: 'S', mod: true }, () => save())           // Same as above
+useHotkey({ key: 'Escape' }, () => closeModal())
+useHotkey({ key: 'S', ctrl: true, shift: true }, () => saveAs())
+useHotkey({ key: 'S', mod: true, shift: true }, () => saveAs())
+```
+
+## Default Options
+
+When you register a hotkey without passing options, or when you omit specific options, the following defaults apply:
+
+```tsx
+useHotkey('Mod+S', callback, {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined, // smart default: false for Mod+S, true for single keys
+  target: document,
+  platform: undefined, // auto-detected
+  conflictBehavior: 'warn',
+})
+```
+
+### Why These Defaults?
+
+Most hotkey registrations are intended to override default browser behavior—such as using `Mod+S` to save a document instead of showing the browser's "Save Page" dialog. To make this easy and consistent, the library sets `preventDefault` and `stopPropagation` to `true` by default, ensuring your hotkey handlers take precedence and reducing the amount of repetitive boilerplate code required.
+
+#### Smart Input Handling: `ignoreInputs`
+
+The `ignoreInputs` option is designed to strike a balance between accessibility and usability. By default, hotkeys involving `Ctrl`/`Meta` modifiers (like `Mod+S`) and the `Escape` key are allowed to fire even when the focus is inside input elements (such as text fields or text areas), and when focused on button-type inputs (`type="button"`, `"submit"`, or `"reset"`). This allows shortcuts like save or close to work wherever the user is focused. On the other hand, single key shortcuts or those using only `Shift`/`Alt` are ignored within non-button inputs to prevent interference with normal typing.
+
+#### Hotkey Conflicts: `conflictBehavior`
+
+When you attempt to register a hotkey that is already registered (possibly in another part of your app), the library logs a warning by default using the `conflictBehavior: 'warn'` setting. This helps you catch accidental duplicate bindings during development so they can be resolved before reaching production.
+
+
+### Global Default Options via Provider
+
+You can change the default options for all `useHotkey` calls in your app by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/preact-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkey: { preventDefault: false, ignoreInputs: false },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Hotkey Options
+
+### `enabled`
+
+Controls whether the hotkey is active. Defaults to `true`.
+
+Disabled hotkeys **remain registered** in the manager and stay visible in devtools; only execution is suppressed. Hooks update `enabled` on the existing registration instead of unregistering and re-registering.
+
+```tsx
+const [isEditing, setIsEditing] = useState(false)
+
+// Only active when editing
+useHotkey('Mod+S', () => save(), { enabled: isEditing })
+```
+
+### `preventDefault`
+
+Automatically calls `event.preventDefault()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+// Browser default is prevented by default
+useHotkey('Mod+S', () => save())
+
+// Opt out when you want the browser's default behavior
+useHotkey('Mod+S', () => save(), { preventDefault: false })
+```
+
+### `stopPropagation`
+
+Calls `event.stopPropagation()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+// Event propagation is stopped by default
+useHotkey('Escape', () => closeModal())
+
+// Opt out when you need the event to bubble
+useHotkey('Escape', () => closeModal(), { stopPropagation: false })
+```
+
+### `eventType`
+
+Whether to listen on `keydown` (default) or `keyup`.
+
+```tsx
+// Fire when the key is released
+useHotkey('Shift', () => deactivateMode(), { eventType: 'keyup' })
+```
+
+### `requireReset`
+
+When `true`, the hotkey will only fire once per key press. The key must be released and pressed again to fire again. Defaults to `false`.
+
+```tsx
+// Only fires once per Escape press, not on key repeat
+useHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+When `true`, the hotkey will not fire when the user is focused on a text input, textarea, select, or contentEditable element. Button-type inputs (`type="button"`, `"submit"`, `"reset"`) are not ignored, so shortcuts like Mod+S work when the user has tabbed to a form button. When unset, a smart default applies: `Ctrl`/`Meta` shortcuts and `Escape` fire in inputs; single keys and `Shift`/`Alt` combos are ignored.
+
+```tsx
+// Single key - ignored in inputs by default (smart default)
+useHotkey('K', () => openSearch())
+
+// Mod+S and Escape - fire in inputs by default (smart default)
+useHotkey('Mod+S', () => save())
+useHotkey('Escape', () => closeDialog())
+
+// Override: force a single key to fire in inputs
+useHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+Set `ignoreInputs: false` or `true` explicitly to override the smart default.
+
+### `target`
+
+The DOM element to attach the event listener to. Defaults to `document`. Can be a DOM element, `document`, `window`, or a Preact ref.
+
+```tsx
+import { useRef } from 'preact/hooks'
+
+function Panel() {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  // Only listens for events on this specific element
+  useHotkey('Escape', () => closePanel(), { target: panelRef })
+
+  return (
+    <div ref={panelRef} tabIndex={0}>
+      <p>Panel content</p>
+    </div>
+  )
+}
+```
+
+> [!NOTE]
+> When using a ref as the target, make sure the element is focusable (has `tabIndex`) so it can receive keyboard events.
+
+### `conflictBehavior`
+
+Controls what happens when you register a hotkey that's already registered. Options:
+
+- `'warn'` (default) - Logs a warning but allows the registration
+- `'error'` - Throws an error
+- `'replace'` - Replaces the existing registration
+- `'allow'` - Allows multiple registrations silently
+
+```tsx
+useHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+Override the auto-detected platform. Useful for testing or for applications that need to force a specific platform behavior.
+
+```tsx
+useHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Stale Closure Prevention
+
+The `useHotkey` hook automatically syncs the callback on every render, so you never need to worry about stale closures:
+
+```tsx
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  // This callback always has access to the latest `count` value
+  useHotkey('Mod+Shift+C', () => {
+    console.log('Current count:', count)
+  })
+
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
+}
+```
+
+## Automatic Cleanup
+
+The hook automatically unregisters the hotkey when the component unmounts:
+
+```tsx
+function TemporaryPanel() {
+  // Automatically cleaned up when this component unmounts
+  useHotkey('Escape', () => closePanel())
+
+  return <div>Panel content</div>
+}
+```
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use the `useHotkeys` (plural) hook instead of calling `useHotkey` multiple times. This is especially useful when the number of shortcuts is not known at compile time, since calling hooks conditionally or in loops violates the rules of hooks.
+
+```tsx
+import { useHotkeys } from '@tanstack/preact-hotkeys'
+
+function Editor() {
+  useHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```tsx
+useHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Because `useHotkeys` accepts a plain array, you can derive it from data:
+
+```tsx
+function MenuShortcuts({ items }) {
+  useHotkeys(
+    items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+  )
+}
+```
+
+The hook diffs the array between renders by array index plus the normalized hotkey string, registering new hotkeys and unregistering removed ones automatically. Reordering the array changes that identity, so reordered entries are unregistered and re-registered even if their callback references stay the same.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```tsx
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```tsx
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `useHotkeyRegistrations` hook to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```tsx
+import { useHotkeyRegistrations } from '@tanstack/preact-hotkeys'
+
+function ShortcutPalette() {
+  const { hotkeys, sequences } = useHotkeyRegistrations()
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      <ul>
+        {hotkeys.map((reg) => (
+          <li key={reg.hotkey}>
+            <kbd>{reg.hotkey}</kbd>
+            {reg.meta?.name && <span> — {reg.meta.name}</span>}
+            {reg.meta?.description && <p>{reg.meta.description}</p>}
+          </li>
+        ))}
+      </ul>
+      {sequences.length > 0 && (
+        <>
+          <h2>Sequences</h2>
+          <ul>
+            {sequences.map((reg) => (
+              <li key={reg.sequence.join(' ')}>
+                <kbd>{reg.sequence.join(' → ')}</kbd>
+                {reg.meta?.name && <span> — {reg.meta.name}</span>}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+```
+
+The returned `hotkeys` array contains registration objects with the hotkey string, options (including `meta`), and enabled state. The `sequences` array contains sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+Under the hood, `useHotkey` uses the singleton `HotkeyManager`. You can also access the manager directly if needed:
+
+```tsx
+import { getHotkeyManager } from '@tanstack/preact-hotkeys'
+
+const manager = getHotkeyManager()
+
+// Check if a hotkey is registered
+manager.isRegistered('Mod+S')
+
+// Get total number of registrations
+manager.getRegistrationCount()
+```
+
+The manager attaches event listeners per target element, so only elements that have registered hotkeys receive listeners. This is more efficient than a single global listener.
diff --git a/mintlify/hotkeys/framework/preact/guides/key-state-tracking.md b/mintlify/hotkeys/framework/preact/guides/key-state-tracking.md
new file mode 100644
index 000000000..ef4451991
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/key-state-tracking.md
@@ -0,0 +1,189 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three hooks for tracking the real-time state of keyboard keys. These are useful for building UIs that respond to modifier keys being held, displaying active key states, or implementing hold-to-activate features.
+
+## `useHeldKeys`
+
+Returns a reactive array of all currently held key names.
+
+```tsx
+import { useHeldKeys } from '@tanstack/preact-hotkeys'
+
+function KeyDisplay() {
+  const heldKeys = useHeldKeys()
+
+  return (
+    <div>
+      {heldKeys.length > 0
+        ? `Held: ${heldKeys.join(' + ')}`
+        : 'No keys held'}
+    </div>
+  )
+}
+```
+
+The returned array contains key names like `'Shift'`, `'Control'`, `'Meta'`, `'A'`, `'ArrowUp'`, etc. Keys appear in the order they were pressed.
+
+## `useHeldKeyCodes`
+
+Returns a reactive object mapping held key names to their physical key codes (`event.code` values). This is useful when you need to distinguish between left and right modifiers.
+
+```tsx
+import { useHeldKeyCodes } from '@tanstack/preact-hotkeys'
+
+function KeyCodeDisplay() {
+  const heldCodes = useHeldKeyCodes()
+  // Example: { Shift: "ShiftLeft", Control: "ControlRight" }
+
+  return (
+    <div>
+      {Object.entries(heldCodes).map(([key, code]) => (
+        <div key={key}>
+          {key}: {code}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+## `useKeyHold`
+
+Checks whether a specific key is currently held. This hook is optimized to only trigger re-renders when the specified key's held state changes, not when other keys are pressed or released.
+
+```tsx
+import { useKeyHold } from '@tanstack/preact-hotkeys'
+
+function ModifierIndicators() {
+  const isShiftHeld = useKeyHold('Shift')
+  const isCtrlHeld = useKeyHold('Control')
+  const isAltHeld = useKeyHold('Alt')
+  const isMetaHeld = useKeyHold('Meta')
+
+  return (
+    <div className="modifier-bar">
+      <span className={isShiftHeld ? 'active' : ''}>Shift</span>
+      <span className={isCtrlHeld ? 'active' : ''}>Ctrl</span>
+      <span className={isAltHeld ? 'active' : ''}>Alt</span>
+      <span className={isMetaHeld ? 'active' : ''}>Meta</span>
+    </div>
+  )
+}
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+Show additional options while a modifier is held:
+
+```tsx
+import { useKeyHold } from '@tanstack/preact-hotkeys'
+
+function FileItem({ file }: { file: File }) {
+  const isShiftHeld = useKeyHold('Shift')
+
+  return (
+    <div className="file-item">
+      <span>{file.name}</span>
+      {isShiftHeld && (
+        <button className="danger" onClick={() => permanentlyDelete(file)}>
+          Permanently Delete
+        </button>
+      )}
+      {!isShiftHeld && (
+        <button onClick={() => moveToTrash(file)}>
+          Move to Trash
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+### Keyboard Shortcut Hints
+
+Display different shortcut hints based on which modifiers are held:
+
+```tsx
+import { useKeyHold } from '@tanstack/preact-hotkeys'
+
+function ShortcutHints() {
+  const isModHeld = useKeyHold('Meta') // or 'Control' on Windows
+
+  if (!isModHeld) return null
+
+  return (
+    <div className="shortcut-overlay">
+      <div>S - Save</div>
+      <div>Z - Undo</div>
+      <div>Shift+Z - Redo</div>
+      <div>K - Command Palette</div>
+    </div>
+  )
+}
+```
+
+### Debugging Key Display
+
+Combine hooks with formatting utilities for a rich debugging display:
+
+```tsx
+import {
+  useHeldKeys,
+  useHeldKeyCodes,
+  formatForDisplay,
+  type RegisterableHotkey,
+} from '@tanstack/preact-hotkeys'
+
+function KeyDebugger() {
+  const heldKeys = useHeldKeys()
+  const heldCodes = useHeldKeyCodes()
+
+  return (
+    <div className="key-debugger">
+      <h3>Active Keys</h3>
+      {heldKeys.map((key) => (
+        <div key={key}>
+          <strong>
+            {formatForDisplay(key as RegisterableHotkey, { useSymbols: true })}
+          </strong>
+          <span className="code">{heldCodes[key]}</span>
+        </div>
+      ))}
+      {heldKeys.length === 0 && <p>Press any key...</p>}
+    </div>
+  )
+}
+```
+
+## Platform Quirks
+
+The underlying `KeyStateTracker` handles several platform-specific issues:
+
+### macOS Modifier Key Behavior
+
+On macOS, when a modifier key is held and a non-modifier key is pressed, the OS sometimes swallows the `keyup` event for the non-modifier key. TanStack Hotkeys detects and handles this automatically so held key state stays accurate.
+
+### Window Blur
+
+When the browser window loses focus, all held keys are automatically cleared. This prevents "stuck" keys that would otherwise appear held even after the user tabs away and releases them.
+
+## Under the Hood
+
+All three hooks subscribe to the singleton `KeyStateTracker` via `@tanstack/preact-store`. The tracker manages its own event listeners on `document` and maintains state in a TanStack Store, which the hooks subscribe to reactively.
+
+```tsx
+import { getKeyStateTracker } from '@tanstack/preact-hotkeys'
+
+const tracker = getKeyStateTracker()
+
+// Imperative access (outside of Preact)
+tracker.getHeldKeys()        // string[]
+tracker.isKeyHeld('Shift')   // boolean
+tracker.isAnyKeyHeld(['Shift', 'Control']) // boolean
+tracker.areAllKeysHeld(['Shift', 'Control']) // boolean
+```
diff --git a/mintlify/hotkeys/framework/preact/guides/sequence-recording.md b/mintlify/hotkeys/framework/preact/guides/sequence-recording.md
new file mode 100644
index 000000000..6acc235c5
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/sequence-recording.md
@@ -0,0 +1,98 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+TanStack Hotkeys provides the `useHotkeySequenceRecorder` hook for building UIs where users record **multi-chord sequences** (Vim-style shortcuts). Each step is captured like a single hotkey chord; users finish with **Enter** by default, or you can use manual commit and optional idle timeout.
+
+## Basic usage
+
+```tsx
+import { useHotkeySequenceRecorder, formatForDisplay } from '@tanstack/preact-hotkeys'
+import type { HotkeySequence } from '@tanstack/preact-hotkeys'
+
+function HotkeySequenceRecorder() {
+  const recorder = useHotkeySequenceRecorder({
+    onRecord: (sequence: HotkeySequence) => {
+      console.log('Recorded:', sequence)
+    },
+  })
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={
+          recorder.isRecording ? recorder.cancelRecording : recorder.startRecording
+        }
+      >
+        {recorder.isRecording
+          ? 'Press chords, then Enter…'
+          : recorder.recordedSequence
+            ? recorder.recordedSequence.map((h) => formatForDisplay(h)).join(' ')
+            : 'Click to record'}
+      </button>
+      {recorder.isRecording && (
+        <button type="button" onClick={recorder.cancelRecording}>
+          Cancel
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is listening |
+| `steps` | `HotkeySequence` | Chords captured in the current session |
+| `recordedSequence` | `HotkeySequence \| null` | Last committed sequence |
+| `startRecording` | `() => void` | Start a new session |
+| `stopRecording` | `() => void` | Stop without calling `onRecord` |
+| `cancelRecording` | `() => void` | Stop and call `onCancel` |
+| `commitRecording` | `() => void` | Commit current `steps` (no-op if empty) |
+
+## Options
+
+Core options live on `HotkeySequenceRecorderOptions` from `@tanstack/hotkeys`:
+
+- `onRecord(sequence)` — called when a sequence is committed (including `[]` when cleared via Backspace with no steps).
+- `onCancel`, `onClear` — same intent as the hotkey recorder.
+- `commitKeys` — `'enter'` (default) or `'none'`. With `'none'`, only `commitRecording()` (or `idleTimeoutMs`) finishes recording; plain Enter can be recorded as a chord.
+- `commitOnEnter` — when `commitKeys` is `'enter'`, set to `false` to treat Enter as a normal chord (then use `commitRecording()` or idle timeout to finish).
+- `idleTimeoutMs` — optional milliseconds of inactivity **after the last completed chord** to auto-commit. The timer does not run while waiting for the **first** chord.
+
+### Provider defaults
+
+```tsx
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequenceRecorder: {
+      idleTimeoutMs: 2000,
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+## Behavior
+
+| Input | Behavior |
+|-------|----------|
+| Valid chord | Appended to `steps`; listener stays active |
+| Enter (no modifiers), `commitKeys: 'enter'`, `steps.length >= 1` | Commits and calls `onRecord` |
+| Escape | Cancels; `onCancel` |
+| Backspace / Delete (no modifiers) | Removes last step, or if empty runs `onClear` + `onRecord([])` and stops |
+
+Recorded chords use portable `Mod` format, same as `HotkeyRecorder`.
+
+## Under the hood
+
+`useHotkeySequenceRecorder` wraps the `HotkeySequenceRecorder` class and subscribes to its TanStack Store, same pattern as `useHotkeyRecorder`.
diff --git a/mintlify/hotkeys/framework/preact/guides/sequences.md b/mintlify/hotkeys/framework/preact/guides/sequences.md
new file mode 100644
index 000000000..6b215ad00
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/guides/sequences.md
@@ -0,0 +1,215 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences -- shortcuts where you press keys one after another rather than simultaneously. This is commonly used for Vim-style navigation, cheat codes, or multi-step commands.
+
+## Basic Usage
+
+Use the `useHotkeySequence` hook to register a key sequence:
+
+```tsx
+import { useHotkeySequence } from '@tanstack/preact-hotkeys'
+
+function App() {
+  // Vim-style: press g then g to scroll to top
+  useHotkeySequence(['G', 'G'], () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  })
+}
+```
+
+The first argument is an array of `Hotkey` strings representing each step in the sequence. The user must press them in order within the timeout window.
+
+## Many sequences at once
+
+When you need several sequences—or a **dynamic** list whose length is not fixed at compile time—use `useHotkeySequences` instead of calling `useHotkeySequence` many times. One hook call keeps you within the rules of hooks while still registering every sequence.
+
+```tsx
+import { useHotkeySequences } from '@tanstack/preact-hotkeys'
+
+useHotkeySequences([
+  { sequence: ['G', 'G'], callback: () => scrollToTop() },
+  { sequence: ['D', 'D'], callback: () => deleteLine(), options: { timeout: 500 } },
+])
+```
+
+Options merge in the same order as `useHotkeys`: `HotkeysProvider` defaults, then the second-argument `commonOptions`, then each definition’s `options`.
+
+## Sequence Options
+
+The third argument is an options object:
+
+```tsx
+useHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,  // Time allowed between keys (ms)
+  enabled: true,  // Whether the sequence is active
+  target: document, // Or a Preact ref for scoped sequences
+})
+```
+
+### `timeout`
+
+The maximum time (in milliseconds) allowed between consecutive key presses. If the user takes longer than this between any two keys, the sequence resets. Defaults to `1000` (1 second).
+
+```tsx
+// Fast sequence - user must type quickly
+useHotkeySequence(['D', 'D'], () => deleteLine(), { timeout: 500 })
+
+// Slow sequence - user has more time between keys
+useHotkeySequence(['Shift+Z', 'Shift+Z'], () => forceQuit(), { timeout: 2000 })
+```
+
+### `enabled`
+
+Controls whether the sequence is active. Defaults to `true`.
+
+Disabled sequences **remain registered** and stay visible in devtools; only execution is suppressed.
+
+```tsx
+const [isVimMode, setIsVimMode] = useState(true)
+
+useHotkeySequence(['G', 'G'], () => scrollToTop(), { enabled: isVimMode })
+```
+
+### `target`
+
+The DOM element to attach the sequence listener to. Defaults to `document`. Can be a Preact ref, DOM element, `document`, or `window` for scoped sequences.
+
+### Global Default Options via Provider
+
+You can set default options for all `useHotkeySequence` calls by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/preact-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequence: { timeout: 1500 },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```tsx
+useHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/preact/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Sequences with Modifiers
+
+Each step in a sequence can include modifiers:
+
+```tsx
+// Ctrl+K followed by Ctrl+C (VS Code-style comment)
+useHotkeySequence(['Mod+K', 'Mod+C'], () => {
+  commentSelection()
+})
+
+// g then Shift+G (go to bottom, Vim-style)
+useHotkeySequence(['G', 'Shift+G'], () => {
+  scrollToBottom()
+})
+```
+
+## Chained modifier chords
+
+You can repeat the same modifier across consecutive steps—for example `Shift+R` then `Shift+T`:
+
+```tsx
+useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+  doNextAction()
+})
+```
+
+### Modifier-only keys between steps
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone, with no letter or other key) are ignored. They do not advance the sequence and they do **not** reset progress. That way a user can tap Shift (or hold it) between chords such as `Shift+R` and `Shift+T` without breaking the sequence—similar to Vim-style flows where a modifier may be pressed before the next chord.
+
+## Common Sequence Patterns
+
+### Vim-Style Navigation
+
+```tsx
+function VimNavigation() {
+  useHotkeySequence(['G', 'G'], () => scrollToTop())
+  useHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+  useHotkeySequence(['D', 'D'], () => deleteLine())
+  useHotkeySequence(['D', 'W'], () => deleteWord())
+  useHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+}
+```
+
+### Konami Code
+
+```tsx
+useHotkeySequence(
+  [
+    'ArrowUp', 'ArrowUp',
+    'ArrowDown', 'ArrowDown',
+    'ArrowLeft', 'ArrowRight',
+    'ArrowLeft', 'ArrowRight',
+    'B', 'A',
+  ],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+### Multi-Step Commands
+
+```tsx
+// Press "h", "e", "l", "p" to open help
+useHotkeySequence(['H', 'E', 'L', 'P'], () => openHelp())
+```
+
+## How Sequences Work
+
+The `SequenceManager` (singleton) handles all sequence registrations. When a key is pressed:
+
+1. It checks if the key matches the next expected step in any registered sequence
+2. If it matches, the sequence advances to the next step
+3. If the timeout expires between steps, the sequence resets
+4. When all steps are completed, the callback fires
+5. Modifier-only keydowns are ignored (they neither advance nor reset the sequence)
+
+### Overlapping Sequences
+
+Multiple sequences can share the same prefix. The manager tracks progress for each sequence independently:
+
+```tsx
+// Both share the 'D' prefix
+useHotkeySequence(['D', 'D'], () => deleteLine())   // dd
+useHotkeySequence(['D', 'W'], () => deleteWord())    // dw
+useHotkeySequence(['D', 'I', 'W'], () => deleteInnerWord()) // diw
+```
+
+After pressing `D`, the manager waits for the next key to determine which sequence to complete.
+
+## The Sequence Manager
+
+Under the hood, `useHotkeySequence` uses the singleton `SequenceManager`. You can also use the core `createSequenceMatcher` function for standalone sequence matching without the singleton:
+
+```tsx
+import { createSequenceMatcher } from '@tanstack/preact-hotkeys'
+
+const matcher = createSequenceMatcher(['G', 'G'], {
+  timeout: 1000,
+})
+
+document.addEventListener('keydown', (e) => {
+  if (matcher.match(e)) {
+    console.log('Sequence completed!')
+  }
+  console.log('Progress:', matcher.getProgress()) // e.g., 1/2
+})
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/HotkeysProvider.md b/mintlify/hotkeys/framework/preact/reference/functions/HotkeysProvider.md
new file mode 100644
index 000000000..961a12069
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/HotkeysProvider.md
@@ -0,0 +1,22 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Function: HotkeysProvider()
+
+```ts
+function HotkeysProvider(__namedParameters): Element;
+```
+
+Defined in: [HotkeysProvider.tsx:31](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L31)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`HotkeysProviderProps`](/hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/preact/reference/functions/useDefaultHotkeysOptions.md
new file mode 100644
index 000000000..e1bc16a7e
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultHotkeysOptions
+title: useDefaultHotkeysOptions
+---
+
+# Function: useDefaultHotkeysOptions()
+
+```ts
+function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:53](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L53)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeyCodes.md b/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeyCodes.md
new file mode 100644
index 000000000..b0929cbc8
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeyCodes.md
@@ -0,0 +1,42 @@
+---
+id: useHeldKeyCodes
+title: useHeldKeyCodes
+---
+
+# Function: useHeldKeyCodes()
+
+```ts
+function useHeldKeyCodes(): Record<string, string>;
+```
+
+Defined in: [useHeldKeyCodes.ts:30](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHeldKeyCodes.ts#L30)
+
+Preact hook that returns a map of currently held key names to their physical `event.code` values.
+
+This is useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+## Returns
+
+`Record`\&lt;`string`, `string`\>
+
+Record mapping normalized key names to their `event.code` values
+
+## Example
+
+```tsx
+function KeyDebugDisplay() {
+  const heldKeys = useHeldKeys()
+  const heldCodes = useHeldKeyCodes()
+
+  return (
+    <div>
+      {heldKeys.map((key) => (
+        <kbd key={key}>
+          {key} <small>{heldCodes[key]}</small>
+        </kbd>
+      ))}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeys.md b/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeys.md
new file mode 100644
index 000000000..6508c07c0
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHeldKeys.md
@@ -0,0 +1,38 @@
+---
+id: useHeldKeys
+title: useHeldKeys
+---
+
+# Function: useHeldKeys()
+
+```ts
+function useHeldKeys(): string[];
+```
+
+Defined in: [useHeldKeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHeldKeys.ts#L26)
+
+Preact hook that returns an array of currently held keyboard keys.
+
+This hook uses `useSelector` from `@tanstack/preact-store` to subscribe
+to the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Returns
+
+`string`[]
+
+Array of currently held key names
+
+## Example
+
+```tsx
+function KeyDisplay() {
+  const heldKeys = useHeldKeys()
+
+  return (
+    <div>
+      Currently pressed: {heldKeys.join(' + ') || 'None'}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkey.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkey.md
new file mode 100644
index 000000000..55bfe4bfb
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkey.md
@@ -0,0 +1,92 @@
+---
+id: useHotkey
+title: useHotkey
+---
+
+# Function: useHotkey()
+
+```ts
+function useHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [useHotkey.ts:90](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkey.ts#L90)
+
+Preact hook for registering a keyboard hotkey.
+
+Uses the singleton HotkeyManager for efficient event handling.
+The callback receives both the keyboard event and a context object
+containing the hotkey string and parsed hotkey.
+
+This hook syncs the callback and options on every render to avoid
+stale closures. This means
+callbacks that reference Preact state will always have access to
+the latest values.
+
+## Parameters
+
+### hotkey
+
+`RegisterableHotkey`
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
+
+### callback
+
+`HotkeyCallback`
+
+The function to call when the hotkey is pressed
+
+### options
+
+[`UseHotkeyOptions`](/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions) = `{}`
+
+Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+  and only suppresses firing; the hook updates the existing handle instead of unregistering.
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function SaveButton() {
+  const [count, setCount] = useState(0)
+
+  // Callback always has access to latest count value
+  useHotkey('Mod+S', (event, { hotkey }) => {
+    console.log(`Save triggered, count is ${count}`)
+    handleSave()
+  })
+
+  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+}
+```
+
+```tsx
+function Modal({ isOpen, onClose }) {
+  // enabled option is synced on every render
+  useHotkey('Escape', () => {
+    onClose()
+  }, { enabled: isOpen })
+
+  if (!isOpen) return null
+  return <div className="modal">...</div>
+}
+```
+
+```tsx
+function Editor() {
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  // Scoped to a specific element
+  useHotkey('Mod+S', () => {
+    save()
+  }, { target: editorRef })
+
+  return <div ref={editorRef}>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRecorder.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRecorder.md
new file mode 100644
index 000000000..b3a0bac13
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRecorder.md
@@ -0,0 +1,61 @@
+---
+id: useHotkeyRecorder
+title: useHotkeyRecorder
+---
+
+# Function: useHotkeyRecorder()
+
+```ts
+function useHotkeyRecorder(options): PreactHotkeyRecorder;
+```
+
+Defined in: [useHotkeyRecorder.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L58)
+
+Preact hook for recording keyboard shortcuts.
+
+This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+class, managing all the complexity of capturing keyboard events, converting them
+to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+to clear.
+
+## Parameters
+
+### options
+
+`HotkeyRecorderOptions`
+
+Configuration options for the recorder
+
+## Returns
+
+[`PreactHotkeyRecorder`](/hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder)
+
+An object with recording state and control functions
+
+## Example
+
+```tsx
+function ShortcutSettings() {
+  const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')
+
+  const recorder = useHotkeyRecorder({
+    onRecord: (hotkey) => {
+      setShortcut(hotkey)
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  return (
+    <div>
+      <button onClick={recorder.startRecording}>
+        {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      {recorder.recordedHotkey && (
+        <div>Recording: {recorder.recordedHotkey}</div>
+      )}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRegistrations.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRegistrations.md
new file mode 100644
index 000000000..c226fc0cd
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeyRegistrations.md
@@ -0,0 +1,25 @@
+---
+id: useHotkeyRegistrations
+title: useHotkeyRegistrations
+---
+
+# Function: useHotkeyRegistrations()
+
+```ts
+function useHotkeyRegistrations(): HotkeyRegistrationsResult;
+```
+
+Defined in: [useHotkeyRegistrations.ts:32](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRegistrations.ts#L32)
+
+Preact hook that reactively reads all hotkey and sequence registrations
+from the singleton managers.
+
+This is a standalone hook that does NOT require the HotkeysProvider.
+It subscribes to both HotkeyManager and SequenceManager stores and
+re-renders when registrations change.
+
+## Returns
+
+[`HotkeyRegistrationsResult`](/hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult)
+
+Object with `hotkeys` and `sequences` arrays
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequence.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequence.md
new file mode 100644
index 000000000..839015850
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequence.md
@@ -0,0 +1,78 @@
+---
+id: useHotkeySequence
+title: useHotkeySequence
+---
+
+# Function: useHotkeySequence()
+
+```ts
+function useHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [useHotkeySequence.ts:74](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequence.ts#L74)
+
+Preact hook for registering a keyboard shortcut sequence (Vim-style).
+
+This hook allows you to register multi-key sequences like 'g g' or 'd d'
+that trigger when the full sequence is pressed within a timeout.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+`HotkeySequence`
+
+Array of hotkey strings that form the sequence
+
+### callback
+
+`HotkeyCallback`
+
+Function to call when the sequence is completed
+
+### options
+
+[`UseHotkeySequenceOptions`](/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions) = `{}`
+
+Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+  and only suppresses firing; the hook updates the existing handle instead of unregistering.
+
+## Returns
+
+`void`
+
+## Example
+
+```tsx
+function VimEditor() {
+  // 'g g' to go to top
+  useHotkeySequence(['G', 'G'], () => {
+    scrollToTop()
+  })
+
+  // 'd d' to delete line
+  useHotkeySequence(['D', 'D'], () => {
+    deleteLine()
+  })
+
+  // 'd i w' to delete inner word
+  useHotkeySequence(['D', 'I', 'W'], () => {
+    deleteInnerWord()
+  }, { timeout: 500 })
+
+  // Same modifier on consecutive steps (bare Shift between chords is ignored)
+  useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+    nextAction()
+  })
+
+  return <div>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..ec602a156
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequenceRecorder.md
@@ -0,0 +1,24 @@
+---
+id: useHotkeySequenceRecorder
+title: useHotkeySequenceRecorder
+---
+
+# Function: useHotkeySequenceRecorder()
+
+```ts
+function useHotkeySequenceRecorder(options): PreactHotkeySequenceRecorder;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L23)
+
+Preact hook for recording multi-chord sequences (Vim-style shortcuts).
+
+## Parameters
+
+### options
+
+`HotkeySequenceRecorderOptions`
+
+## Returns
+
+[`PreactHotkeySequenceRecorder`](/hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequences.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequences.md
new file mode 100644
index 000000000..b74c04127
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeySequences.md
@@ -0,0 +1,70 @@
+---
+id: useHotkeySequences
+title: useHotkeySequences
+---
+
+# Function: useHotkeySequences()
+
+```ts
+function useHotkeySequences(definitions, commonOptions): void;
+```
+
+Defined in: [useHotkeySequences.ts:68](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequences.ts#L68)
+
+Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).
+
+Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
+register variable-length lists without violating the rules of hooks.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Callbacks and options are synced on every render to avoid stale closures.
+
+Definitions with an empty `sequence` are skipped (no registration).
+
+## Parameters
+
+### definitions
+
+[`UseHotkeySequenceDefinition`](/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition)[]
+
+Array of sequence definitions to register
+
+### commonOptions
+
+[`UseHotkeySequenceOptions`](/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions) = `{}`
+
+Shared options applied to all sequences (overridden by per-definition options).
+  Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
+  stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
+  via `setOptions` (no unregister/re-register churn).
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function VimPalette() {
+  useHotkeySequences([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine() },
+    { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
+  ])
+}
+```
+
+```tsx
+function DynamicSequences({ items }) {
+  useHotkeySequences(
+    items.map((item) => ({
+      sequence: item.chords,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeys.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeys.md
new file mode 100644
index 000000000..469db06a2
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeys.md
@@ -0,0 +1,70 @@
+---
+id: useHotkeys
+title: useHotkeys
+---
+
+# Function: useHotkeys()
+
+```ts
+function useHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [useHotkeys.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeys.ts#L73)
+
+Preact hook for registering multiple keyboard hotkeys at once.
+
+Uses the singleton HotkeyManager for efficient event handling.
+Accepts a dynamic array of hotkey definitions, making it safe to use
+with variable-length lists without violating the rules of hooks.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Callbacks and options are synced on every render to avoid stale closures.
+
+## Parameters
+
+### hotkeys
+
+[`UseHotkeyDefinition`](/hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition)[]
+
+Array of hotkey definitions to register
+
+### commonOptions
+
+[`UseHotkeyOptions`](/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions) = `{}`
+
+Shared options applied to all hotkeys (overridden by per-definition options).
+  Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
+  stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
+  via `setOptions` (no unregister/re-register churn).
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function Editor() {
+  useHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+```tsx
+function MenuShortcuts({ items }) {
+  // Dynamic hotkeys from data -- safe because it's a single hook call
+  useHotkeys(
+    items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useHotkeysContext.md b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeysContext.md
new file mode 100644
index 000000000..70ab73675
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: useHotkeysContext
+title: useHotkeysContext
+---
+
+# Function: useHotkeysContext()
+
+```ts
+function useHotkeysContext(): HotkeysContextValue | null;
+```
+
+Defined in: [HotkeysProvider.tsx:49](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L49)
+
+## Returns
+
+`HotkeysContextValue` \| `null`
diff --git a/mintlify/hotkeys/framework/preact/reference/functions/useKeyHold.md b/mintlify/hotkeys/framework/preact/reference/functions/useKeyHold.md
new file mode 100644
index 000000000..5d67feb05
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/functions/useKeyHold.md
@@ -0,0 +1,62 @@
+---
+id: useKeyHold
+title: useKeyHold
+---
+
+# Function: useKeyHold()
+
+```ts
+function useKeyHold(key): boolean;
+```
+
+Defined in: [useKeyHold.ts:45](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useKeyHold.ts#L45)
+
+Preact hook that returns whether a specific key is currently being held.
+
+This hook uses `useSelector` from `@tanstack/preact-store` to subscribe
+to the global KeyStateTracker and uses a selector to determine if
+the specified key is held.
+
+## Parameters
+
+### key
+
+`IndividualKey`
+
+The key to check (e.g., 'Shift', 'Control', 'A')
+
+## Returns
+
+`boolean`
+
+True if the key is currently held down
+
+## Examples
+
+```tsx
+function ShiftIndicator() {
+  const isShiftHeld = useKeyHold('Shift')
+
+  return (
+    <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>
+      {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}
+    </div>
+  )
+}
+```
+
+```tsx
+function ModifierIndicators() {
+  const ctrl = useKeyHold('Control')
+  const shift = useKeyHold('Shift')
+  const alt = useKeyHold('Alt')
+
+  return (
+    <div>
+      <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>
+      <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>
+      <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/preact/reference/index.md b/mintlify/hotkeys/framework/preact/reference/index.md
new file mode 100644
index 000000000..898186092
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/index.md
@@ -0,0 +1,34 @@
+---
+id: "@tanstack/preact-hotkeys"
+title: "@tanstack/preact-hotkeys"
+---
+
+# @tanstack/preact-hotkeys
+
+## Interfaces
+
+- [HotkeyRegistrationsResult](/hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult)
+- [HotkeysProviderOptions](/hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions)
+- [HotkeysProviderProps](/hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps)
+- [PreactHotkeyRecorder](/hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder)
+- [PreactHotkeySequenceRecorder](/hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder)
+- [UseHotkeyDefinition](/hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition)
+- [UseHotkeyOptions](/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions)
+- [UseHotkeySequenceDefinition](/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition)
+- [UseHotkeySequenceOptions](/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions)
+
+## Functions
+
+- [HotkeysProvider](/hotkeys/framework/preact/reference/functions/HotkeysProvider)
+- [useDefaultHotkeysOptions](/hotkeys/framework/preact/reference/functions/useDefaultHotkeysOptions)
+- [useHeldKeyCodes](/hotkeys/framework/preact/reference/functions/useHeldKeyCodes)
+- [useHeldKeys](/hotkeys/framework/preact/reference/functions/useHeldKeys)
+- [useHotkey](/hotkeys/framework/preact/reference/functions/useHotkey)
+- [useHotkeyRecorder](/hotkeys/framework/preact/reference/functions/useHotkeyRecorder)
+- [useHotkeyRegistrations](/hotkeys/framework/preact/reference/functions/useHotkeyRegistrations)
+- [useHotkeys](/hotkeys/framework/preact/reference/functions/useHotkeys)
+- [useHotkeysContext](/hotkeys/framework/preact/reference/functions/useHotkeysContext)
+- [useHotkeySequence](/hotkeys/framework/preact/reference/functions/useHotkeySequence)
+- [useHotkeySequenceRecorder](/hotkeys/framework/preact/reference/functions/useHotkeySequenceRecorder)
+- [useHotkeySequences](/hotkeys/framework/preact/reference/functions/useHotkeySequences)
+- [useKeyHold](/hotkeys/framework/preact/reference/functions/useKeyHold)
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult.md b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult.md
new file mode 100644
index 000000000..cea192a62
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeyRegistrationsResult.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyRegistrationsResult
+title: HotkeyRegistrationsResult
+---
+
+# Interface: HotkeyRegistrationsResult
+
+Defined in: [useHotkeyRegistrations.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRegistrations.ts#L15)
+
+Return type for useHotkeyRegistrations.
+
+## Properties
+
+### hotkeys
+
+```ts
+hotkeys: HotkeyRegistrationView[];
+```
+
+Defined in: [useHotkeyRegistrations.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRegistrations.ts#L17)
+
+All registered hotkeys (public view, no callbacks)
+
+***
+
+### sequences
+
+```ts
+sequences: SequenceRegistrationView[];
+```
+
+Defined in: [useHotkeyRegistrations.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRegistrations.ts#L19)
+
+All registered sequences
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..2455d3001
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [HotkeysProvider.tsx:11](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L11)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<UseHotkeyOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:12](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L12)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:13](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L13)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<UseHotkeySequenceOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:15](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L15)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:14](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L14)
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps.md b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps.md
new file mode 100644
index 000000000..674f2e03e
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/HotkeysProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: HotkeysProviderProps
+title: HotkeysProviderProps
+---
+
+# Interface: HotkeysProviderProps
+
+Defined in: [HotkeysProvider.tsx:24](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L24)
+
+## Properties
+
+### children
+
+```ts
+children: ComponentChildren;
+```
+
+Defined in: [HotkeysProvider.tsx:25](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L25)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:26](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/HotkeysProvider.tsx#L26)
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder.md b/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder.md
new file mode 100644
index 000000000..d4d369def
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeyRecorder.md
@@ -0,0 +1,80 @@
+---
+id: PreactHotkeyRecorder
+title: PreactHotkeyRecorder
+---
+
+# Interface: PreactHotkeyRecorder
+
+Defined in: [useHotkeyRecorder.ts:7](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L7)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L17)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [useHotkeyRecorder.ts:9](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L9)
+
+Whether recording is currently active
+
+***
+
+### recordedHotkey
+
+```ts
+recordedHotkey: Hotkey | null;
+```
+
+Defined in: [useHotkeyRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L11)
+
+The currently recorded hotkey (for live preview)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L13)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeyRecorder.ts#L15)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder.md
new file mode 100644
index 000000000..1c2c6c8e8
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/PreactHotkeySequenceRecorder.md
@@ -0,0 +1,94 @@
+---
+id: PreactHotkeySequenceRecorder
+title: PreactHotkeySequenceRecorder
+---
+
+# Interface: PreactHotkeySequenceRecorder
+
+Defined in: [useHotkeySequenceRecorder.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L10)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L16)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L17)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L11)
+
+***
+
+### recordedSequence
+
+```ts
+recordedSequence: HotkeySequence | null;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L13)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L14)
+
+#### Returns
+
+`void`
+
+***
+
+### steps
+
+```ts
+steps: HotkeySequence;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L12)
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequenceRecorder.ts#L15)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition.md b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition.md
new file mode 100644
index 000000000..978c55430
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeyDefinition
+title: UseHotkeyDefinition
+---
+
+# Interface: UseHotkeyDefinition
+
+Defined in: [useHotkeys.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeys.ts#L20)
+
+A single hotkey definition for use with `useHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [useHotkeys.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeys.ts#L24)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: RegisterableHotkey;
+```
+
+Defined in: [useHotkeys.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeys.ts#L22)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: UseHotkeyOptions;
+```
+
+Defined in: [useHotkeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeys.ts#L26)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions.md b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions.md
new file mode 100644
index 000000000..03149d3cb
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeyOptions.md
@@ -0,0 +1,31 @@
+---
+id: UseHotkeyOptions
+title: UseHotkeyOptions
+---
+
+# Interface: UseHotkeyOptions
+
+Defined in: [useHotkey.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkey.ts#L17)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: 
+  | HTMLElement
+  | Document
+  | Window
+  | RefObject<HTMLElement | null>
+  | null;
+```
+
+Defined in: [useHotkey.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkey.ts#L23)
+
+The DOM element to attach the event listener to.
+Can be a Preact ref, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition.md
new file mode 100644
index 000000000..9534c315b
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeySequenceDefinition
+title: UseHotkeySequenceDefinition
+---
+
+# Interface: UseHotkeySequenceDefinition
+
+Defined in: [useHotkeySequences.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequences.ts#L15)
+
+A single sequence definition for use with `useHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [useHotkeySequences.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequences.ts#L19)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: UseHotkeySequenceOptions;
+```
+
+Defined in: [useHotkeySequences.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequences.ts#L21)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: HotkeySequence;
+```
+
+Defined in: [useHotkeySequences.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequences.ts#L17)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions.md b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions.md
new file mode 100644
index 000000000..e485eb35a
--- /dev/null
+++ b/mintlify/hotkeys/framework/preact/reference/interfaces/UseHotkeySequenceOptions.md
@@ -0,0 +1,31 @@
+---
+id: UseHotkeySequenceOptions
+title: UseHotkeySequenceOptions
+---
+
+# Interface: UseHotkeySequenceOptions
+
+Defined in: [useHotkeySequence.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequence.ts#L14)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: 
+  | HTMLElement
+  | Document
+  | Window
+  | RefObject<HTMLElement | null>
+  | null;
+```
+
+Defined in: [useHotkeySequence.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/preact-hotkeys/src/useHotkeySequence.ts#L23)
+
+The DOM element to attach the event listener to.
+Can be a Preact ref, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/react/examples/useHeldKeys.md b/mintlify/hotkeys/framework/react/examples/useHeldKeys.md
new file mode 100644
index 000000000..c15b4a927
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHeldKeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHeldKeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHeldKeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkey.md b/mintlify/hotkeys/framework/react/examples/useHotkey.md
new file mode 100644
index 000000000..39e5a6f3d
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkey.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkeyRecorder.md b/mintlify/hotkeys/framework/react/examples/useHotkeyRecorder.md
new file mode 100644
index 000000000..9526bc1f2
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkeyRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkeyRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkeyRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkeySequence.md b/mintlify/hotkeys/framework/react/examples/useHotkeySequence.md
new file mode 100644
index 000000000..f5f8ca191
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkeySequence.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkeySequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkeySequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/react/examples/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..ec9fe4e50
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkeySequenceRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequenceRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkeySequenceRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkeySequenceRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkeySequences.md b/mintlify/hotkeys/framework/react/examples/useHotkeySequences.md
new file mode 100644
index 000000000..47f8b04a3
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkeySequences.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkeySequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkeySequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useHotkeys.md b/mintlify/hotkeys/framework/react/examples/useHotkeys.md
new file mode 100644
index 000000000..19e7eed2c
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useHotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useHotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useHotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/examples/useKeyhold.md b/mintlify/hotkeys/framework/react/examples/useKeyhold.md
new file mode 100644
index 000000000..6c28cf7c6
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/examples/useKeyhold.md
@@ -0,0 +1,12 @@
+---
+title: "useKeyHold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/react/examples/useKeyhold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/react/useKeyhold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/react/guides/formatting-display.md b/mintlify/hotkeys/framework/react/guides/formatting-display.md
new file mode 100644
index 000000000..9049159ce
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/formatting-display.md
@@ -0,0 +1,226 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys provides several utilities for formatting hotkey strings into human-readable display text. These utilities handle platform differences automatically, so your UI shows the right symbols and labels for each operating system.
+
+## `formatForDisplay`
+
+The primary formatting function. Returns a platform-aware string using symbols on macOS and text labels on Windows/Linux.
+
+```tsx
+import { formatForDisplay } from '@tanstack/react-hotkeys'
+
+// On macOS (symbols separated by spaces):
+formatForDisplay('Mod+S')         // "⌘ S"
+formatForDisplay('Mod+Shift+Z')   // "⌘ ⇧ Z"
+formatForDisplay('Control+Alt+D') // "⌃ ⌥ D"
+
+// On Windows/Linux:
+formatForDisplay('Mod+S')         // "Ctrl+S"
+formatForDisplay('Mod+Shift+Z')   // "Ctrl+Shift+Z"
+formatForDisplay('Control+Alt+D') // "Ctrl+Alt+D"
+```
+
+### Options
+
+```ts
+formatForDisplay('Mod+S', {
+  platform: 'mac', // Override platform detection ('mac' | 'windows' | 'linux')
+  useSymbols: true, // default; set false for text labels on macOS
+})
+```
+
+On macOS, modifier **order** matches canonical normalization (same as `formatWithLabels`), and symbols are joined with **spaces** (e.g., `⌘ ⇧ Z`). On Windows and Linux, modifiers are joined with `+` (e.g., `Ctrl+Shift+Z`).
+
+`platform` is used for both normalization and display. If you need to show the same [`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey) under several platforms, first serialize with the platform it was parsed with, then format for each display platform:
+
+```tsx
+import {
+  formatForDisplay,
+  normalizeHotkeyFromParsed,
+  parseHotkey,
+} from '@tanstack/react-hotkeys'
+
+const parsed = parseHotkey('Mod+K', 'mac')
+const canonical = normalizeHotkeyFromParsed(parsed, 'mac')
+formatForDisplay(canonical, { platform: 'windows' }) // "Ctrl+K"
+```
+
+## `formatWithLabels`
+
+Returns human-readable text labels (e.g., "Cmd" instead of the symbol). Useful when you want readable text rather than symbols.
+
+```tsx
+import { formatWithLabels } from '@tanstack/react-hotkeys'
+
+// On macOS:
+formatWithLabels('Mod+S', { platform: 'mac' }) // "Cmd+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'mac' }) // "Cmd+Shift+Z"
+
+// On Windows/Linux:
+formatWithLabels('Mod+S', { platform: 'windows' }) // "Ctrl+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'windows' }) // "Ctrl+Shift+Z"
+```
+
+Modifier order matches canonical normalization from the core package (e.g. `Mod` first, then `Shift`, then the key).
+
+## Using Formatted Hotkeys in React
+
+### Keyboard Shortcut Badges
+
+```tsx
+import { formatForDisplay } from '@tanstack/react-hotkeys'
+
+function ShortcutBadge({ hotkey }: { hotkey: string }) {
+  return <kbd className="shortcut-badge">{formatForDisplay(hotkey)}</kbd>
+}
+
+// Usage
+<ShortcutBadge hotkey="Mod+S" />      // Renders: ⌘ S (Mac) or Ctrl+S (Windows)
+<ShortcutBadge hotkey="Mod+Shift+P" /> // Renders: ⌘ ⇧ P (Mac) or Ctrl+Shift+P (Windows)
+```
+
+### Menu Items with Hotkeys
+
+```tsx
+import { useHotkey, formatForDisplay } from '@tanstack/react-hotkeys'
+
+function MenuItem({
+  label,
+  hotkey,
+  onAction,
+}: {
+  label: string
+  hotkey: string
+  onAction: () => void
+}) {
+  useHotkey(hotkey, () => onAction())
+
+  return (
+    <div className="menu-item">
+      <span>{label}</span>
+      <span className="menu-shortcut">{formatForDisplay(hotkey)}</span>
+    </div>
+  )
+}
+
+// Usage
+<MenuItem label="Save" hotkey="Mod+S" onAction={save} />
+<MenuItem label="Undo" hotkey="Mod+Z" onAction={undo} />
+<MenuItem label="Find" hotkey="Mod+F" onAction={openFind} />
+```
+
+### Command Palette Items
+
+```tsx
+import { formatForDisplay } from '@tanstack/react-hotkeys'
+import type { Hotkey } from '@tanstack/react-hotkeys'
+
+interface Command {
+  id: string
+  label: string
+  hotkey?: Hotkey
+  action: () => void
+}
+
+function CommandPaletteItem({ command }: { command: Command }) {
+  return (
+    <div className="command-item" onClick={command.action}>
+      <span>{command.label}</span>
+      {command.hotkey && (
+        <kbd>{formatForDisplay(command.hotkey)}</kbd>
+      )}
+    </div>
+  )
+}
+```
+
+## Platform Symbols Reference
+
+On macOS, modifiers are displayed as symbols:
+
+| Modifier | Mac Symbol | Windows/Linux Label |
+|----------|-----------|-------------------|
+| Meta (Cmd) | `⌘` | `Win` / `Super` |
+| Control | `⌃` | `Ctrl` |
+| Alt/Option | `⌥` | `Alt` |
+| Shift | `⇧` | `Shift` |
+
+Special keys also have display symbols:
+
+| Key | Display |
+|-----|---------|
+| Escape | `Esc` |
+| Backspace | `⌫` (Mac) / `Backspace` |
+| Delete | `⌦` (Mac) / `Del` |
+| Enter | `↵` |
+| Tab | `⇥` |
+| ArrowUp | `↑` |
+| ArrowDown | `↓` |
+| ArrowLeft | `←` |
+| ArrowRight | `→` |
+| Space | `Space` |
+
+## Parsing and Normalization
+
+TanStack Hotkeys also provides utilities for parsing and normalizing hotkey strings:
+
+### `parseHotkey`
+
+Parse a hotkey string into its component parts:
+
+```ts
+import { parseHotkey } from '@tanstack/react-hotkeys'
+
+const parsed = parseHotkey('Mod+Shift+S')
+// {
+//   key: 'S',
+//   ctrl: false,   // true on Windows/Linux
+//   shift: true,
+//   alt: false,
+//   meta: true,    // true on Mac
+//   modifiers: ['Shift', 'Meta']  // or ['Control', 'Shift'] on Windows
+// }
+```
+
+### `normalizeHotkey` and `normalizeRegisterableHotkey`
+
+Core helpers produce a **canonical** hotkey string for storage and registration. When the platform allows `Mod` (Command on Mac without Control; Control on Windows/Linux without Meta), the output uses `Mod` and **Mod-first** modifier order (`Mod+Shift+E`), not expanded `Meta`/`Control`.
+
+```ts
+import { normalizeHotkey, normalizeRegisterableHotkey } from '@tanstack/react-hotkeys'
+
+normalizeHotkey('Cmd+S', 'mac')           // 'Mod+S'
+normalizeHotkey('Ctrl+Shift+s', 'windows') // 'Mod+Shift+S'
+normalizeHotkey('Shift+Meta+E', 'mac')    // 'Mod+Shift+E'
+
+// String or RawHotkey — same string adapters use internally:
+normalizeRegisterableHotkey({ key: 'S', mod: true, shift: true }, 'mac') // 'Mod+Shift+S'
+```
+
+Framework hooks normalize registerable hotkeys automatically via `normalizeRegisterableHotkey`.
+
+## Validation
+
+Use `validateHotkey` to check if a hotkey string is valid and get warnings about potential platform issues:
+
+```ts
+import { validateHotkey } from '@tanstack/react-hotkeys'
+
+const result = validateHotkey('Alt+A')
+// {
+//   valid: true,
+//   warnings: ['Alt+letter combinations may not work on macOS due to special characters'],
+//   errors: []
+// }
+
+const result2 = validateHotkey('InvalidKey+S')
+// {
+//   valid: false,
+//   warnings: [],
+//   errors: ['Unknown key: InvalidKey']
+// }
+```
+
diff --git a/mintlify/hotkeys/framework/react/guides/hotkey-recording.md b/mintlify/hotkeys/framework/react/guides/hotkey-recording.md
new file mode 100644
index 000000000..3cefa467b
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/hotkey-recording.md
@@ -0,0 +1,179 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `useHotkeyRecorder` hook for building keyboard shortcut customization UIs. This lets users record their own shortcuts by pressing the desired key combination, similar to how system preferences or IDE shortcut editors work.
+
+## Basic Usage
+
+```tsx
+import { useHotkeyRecorder, formatForDisplay } from '@tanstack/react-hotkeys'
+
+function ShortcutRecorder() {
+  const { isRecording, recordedHotkey, startRecording, stopRecording, cancelRecording } =
+    useHotkeyRecorder({
+      onRecord: (hotkey) => {
+        console.log('Recorded:', hotkey) // e.g., "Mod+Shift+S"
+      },
+    })
+
+  return (
+    <div>
+      <button onClick={isRecording ? stopRecording : startRecording}>
+        {isRecording
+          ? 'Press a key combination...'
+          : recordedHotkey
+            ? formatForDisplay(recordedHotkey)
+            : 'Click to record'}
+      </button>
+      {isRecording && (
+        <button onClick={cancelRecording}>Cancel</button>
+      )}
+    </div>
+  )
+}
+```
+
+## Return Value
+
+The `useHotkeyRecorder` hook returns an object with:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is currently listening for key presses |
+| `recordedHotkey` | `Hotkey \| null` | The last recorded hotkey string, or `null` if nothing recorded |
+| `startRecording` | `() => void` | Start listening for key presses |
+| `stopRecording` | `() => void` | Stop listening and keep the recorded hotkey |
+| `cancelRecording` | `() => void` | Stop listening and discard any recorded hotkey |
+
+## Options
+
+```tsx
+useHotkeyRecorder({
+  onRecord: (hotkey) => { /* called when a hotkey is recorded */ },
+  onCancel: () => { /* called when recording is cancelled */ },
+  onClear: () => { /* called when the recorded hotkey is cleared */ },
+})
+```
+
+### `onRecord`
+
+Called when the user presses a valid key combination (a modifier + a non-modifier key, or a single non-modifier key). Receives the recorded `Hotkey` string.
+
+### `onCancel`
+
+Called when recording is cancelled (either by pressing Escape or calling `cancelRecording()`).
+
+### `onClear`
+
+Called when the recorded hotkey is cleared (by pressing Backspace or Delete during recording).
+
+### Global Default Options via Provider
+
+You can set default options for all `useHotkeyRecorder` calls by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/react-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeyRecorder: {
+      onCancel: () => console.log('Recording cancelled'),
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Recording Behavior
+
+The recorder has specific behavior for different keys:
+
+| Key | Behavior |
+|-----|----------|
+| **Modifier only** (Shift, Ctrl, etc.) | Waits for a non-modifier key -- modifier-only presses don't complete a recording |
+| **Modifier + key** (e.g., Ctrl+S) | Records the full combination |
+| **Single key** (e.g., Escape, F1) | Records the single key |
+| **Escape** | Cancels the recording |
+| **Backspace / Delete** | Clears the currently recorded hotkey |
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```tsx
+useHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+### Mod Auto-Conversion
+
+Recorded hotkeys automatically use the portable `Mod` format. If a user on macOS presses Command+S, the recorded hotkey will be `Mod+S` rather than `Meta+S`. This ensures shortcuts are portable across platforms.
+
+## Building a Shortcut Settings UI
+
+Here's a more complete example of a shortcut customization panel:
+
+```tsx
+import { useState } from 'react'
+import {
+  useHotkey,
+  useHotkeyRecorder,
+  formatForDisplay,
+} from '@tanstack/react-hotkeys'
+import type { Hotkey } from '@tanstack/react-hotkeys'
+
+function ShortcutSettings() {
+  const [shortcuts, setShortcuts] = useState<Record<string, Hotkey>>({
+    save: 'Mod+S',
+    undo: 'Mod+Z',
+    search: 'Mod+K',
+  })
+
+  const [editingAction, setEditingAction] = useState<string | null>(null)
+
+  const recorder = useHotkeyRecorder({
+    onRecord: (hotkey) => {
+      if (editingAction) {
+        setShortcuts((prev) => ({ ...prev, [editingAction]: hotkey }))
+        setEditingAction(null)
+      }
+    },
+    onCancel: () => setEditingAction(null),
+  })
+
+  // Register the actual hotkeys with their current bindings
+  useHotkey(shortcuts.save, () => save())
+  useHotkey(shortcuts.undo, () => undo())
+  useHotkey(shortcuts.search, () => openSearch())
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      {Object.entries(shortcuts).map(([action, hotkey]) => (
+        <div key={action}>
+          <span>{action}</span>
+          <button
+            onClick={() => {
+              setEditingAction(action)
+              recorder.startRecording()
+            }}
+          >
+            {editingAction === action && recorder.isRecording
+              ? 'Press keys...'
+              : formatForDisplay(hotkey)}
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+## Under the Hood
+
+The `useHotkeyRecorder` hook creates a `HotkeyRecorder` class instance and subscribes to its reactive state via `@tanstack/react-store`. The class manages its own keyboard event listeners and state, and the hook handles cleanup on unmount.
diff --git a/mintlify/hotkeys/framework/react/guides/hotkeys.md b/mintlify/hotkeys/framework/react/guides/hotkeys.md
new file mode 100644
index 000000000..fc13dc337
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/hotkeys.md
@@ -0,0 +1,369 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `useHotkey` hook is the primary way to register keyboard shortcuts in React applications. It wraps the singleton `HotkeyManager` with automatic lifecycle management, stale-closure prevention, and React ref support.
+
+## Basic Usage
+
+```tsx
+import { useHotkey } from '@tanstack/react-hotkeys'
+
+function App() {
+  useHotkey('Mod+S', () => {
+    saveDocument()
+  }, {
+    // override the default options here
+  })
+}
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```tsx
+useHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)       // 'Mod+S'
+  console.log(context.parsedHotkey) // { key: 'S', ctrl: false, shift: false, alt: false, meta: true, modifiers: ['Meta'] }
+})
+```
+
+You can pass a hotkey as a string or as a `RawHotkey` object (modifier booleans optional). Use `mod` for cross-platform shortcuts (Command on Mac, Control elsewhere):
+
+```tsx
+useHotkey('Mod+S', () => save())
+useHotkey({ key: 'S', mod: true }, () => save())           // Same as above
+useHotkey({ key: 'Escape' }, () => closeModal())
+useHotkey({ key: 'S', ctrl: true, shift: true }, () => saveAs())
+useHotkey({ key: 'S', mod: true, shift: true }, () => saveAs())
+```
+
+## Default Options
+
+When you register a hotkey without passing options, or when you omit specific options, the following defaults apply:
+
+```tsx
+useHotkey('Mod+S', callback, {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined, // smart default: false for Mod+S, true for single keys
+  target: document,
+  platform: undefined, // auto-detected
+  conflictBehavior: 'warn',
+})
+```
+
+### Why These Defaults?
+
+Most hotkey registrations are intended to override default browser behavior—such as using `Mod+S` to save a document instead of showing the browser’s "Save Page" dialog. To make this easy and consistent, the library sets `preventDefault` and `stopPropagation` to `true` by default, ensuring your hotkey handlers take precedence and reducing the amount of repetitive boilerplate code required.
+
+#### Smart Input Handling: `ignoreInputs`
+
+The `ignoreInputs` option is designed to strike a balance between accessibility and usability. By default, hotkeys involving `Ctrl`/`Meta` modifiers (like `Mod+S`) and the `Escape` key are allowed to fire even when the focus is inside input elements (such as text fields or text areas), and when focused on button-type inputs (`type="button"`, `"submit"`, or `"reset"`). This allows shortcuts like save or close to work wherever the user is focused. On the other hand, single key shortcuts or those using only `Shift`/`Alt` are ignored within non-button inputs to prevent interference with normal typing.
+
+#### Hotkey Conflicts: `conflictBehavior`
+
+When you attempt to register a hotkey that is already registered (possibly in another part of your app), the library logs a warning by default using the `conflictBehavior: 'warn'` setting. This helps you catch accidental duplicate bindings during development so they can be resolved before reaching production.
+
+
+### Global Default Options via Provider
+
+You can change the default options for all `useHotkey` calls in your app by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/react-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkey: { preventDefault: false, ignoreInputs: false },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Hotkey Options
+
+### `enabled`
+
+Controls whether the hotkey is active. Defaults to `true`.
+
+Disabled hotkeys **remain registered** in the manager and stay visible in devtools; only execution is suppressed. Framework hooks update `enabled` on the existing registration instead of unregistering and re-registering.
+
+```tsx
+const [isEditing, setIsEditing] = useState(false)
+
+// Only active when editing
+useHotkey('Mod+S', () => save(), { enabled: isEditing })
+```
+
+### `preventDefault`
+
+Automatically calls `event.preventDefault()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+// Browser default is prevented by default
+useHotkey('Mod+S', () => save())
+
+// Opt out when you want the browser's default behavior
+useHotkey('Mod+S', () => save(), { preventDefault: false })
+```
+
+### `stopPropagation`
+
+Calls `event.stopPropagation()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+// Event propagation is stopped by default
+useHotkey('Escape', () => closeModal())
+
+// Opt out when you need the event to bubble
+useHotkey('Escape', () => closeModal(), { stopPropagation: false })
+```
+
+### `eventType`
+
+Whether to listen on `keydown` (default) or `keyup`.
+
+```tsx
+// Fire when the key is released
+useHotkey('Shift', () => deactivateMode(), { eventType: 'keyup' })
+```
+
+### `requireReset`
+
+When `true`, the hotkey will only fire once per key press. The key must be released and pressed again to fire again. Defaults to `false`.
+
+```tsx
+// Only fires once per Escape press, not on key repeat
+useHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+When `true`, the hotkey will not fire when the user is focused on a text input, textarea, select, or contentEditable element. Button-type inputs (`type="button"`, `"submit"`, `"reset"`) are not ignored, so shortcuts like Mod+S work when the user has tabbed to a form button. When unset, a smart default applies: `Ctrl`/`Meta` shortcuts and `Escape` fire in inputs; single keys and `Shift`/`Alt` combos are ignored.
+
+```tsx
+// Single key - ignored in inputs by default (smart default)
+useHotkey('K', () => openSearch())
+
+// Mod+S and Escape - fire in inputs by default (smart default)
+useHotkey('Mod+S', () => save())
+useHotkey('Escape', () => closeDialog())
+
+// Override: force a single key to fire in inputs
+useHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+Set `ignoreInputs: false` or `true` explicitly to override the smart default.
+
+### `target`
+
+The DOM element to attach the event listener to. Defaults to `document`. Can be a DOM element, `document`, `window`, or a React ref.
+
+```tsx
+import { useRef } from 'react'
+
+function Panel() {
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  // Only listens for events on this specific element
+  useHotkey('Escape', () => closePanel(), { target: panelRef })
+
+  return (
+    <div ref={panelRef} tabIndex={0}>
+      <p>Panel content</p>
+    </div>
+  )
+}
+```
+
+> [!NOTE]
+> When using a ref as the target, make sure the element is focusable (has `tabIndex`) so it can receive keyboard events.
+
+### `conflictBehavior`
+
+Controls what happens when you register a hotkey that's already registered. Options:
+
+- `'warn'` (default) - Logs a warning but allows the registration
+- `'error'` - Throws an error
+- `'replace'` - Replaces the existing registration
+- `'allow'` - Allows multiple registrations silently
+
+```tsx
+useHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+Override the auto-detected platform. Useful for testing or for applications that need to force a specific platform behavior.
+
+```tsx
+useHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Stale Closure Prevention
+
+The `useHotkey` hook automatically syncs the callback on every render, so you never need to worry about stale closures:
+
+```tsx
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  // This callback always has access to the latest `count` value
+  useHotkey('Mod+Shift+C', () => {
+    console.log('Current count:', count)
+  })
+
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
+}
+```
+
+## Automatic Cleanup
+
+The hook automatically unregisters the hotkey when the component unmounts:
+
+```tsx
+function TemporaryPanel() {
+  // Automatically cleaned up when this component unmounts
+  useHotkey('Escape', () => closePanel())
+
+  return <div>Panel content</div>
+}
+```
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use the `useHotkeys` (plural) hook instead of calling `useHotkey` multiple times. This is especially useful when the number of shortcuts is not known at compile time, since calling hooks conditionally or in loops violates the rules of hooks.
+
+```tsx
+import { useHotkeys } from '@tanstack/react-hotkeys'
+
+function Editor() {
+  useHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```tsx
+useHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Because `useHotkeys` accepts a plain array, you can derive it from data:
+
+```tsx
+function MenuShortcuts({ items }) {
+  useHotkeys(
+    items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+  )
+}
+```
+
+The hook diffs the array between renders by array index plus the normalized hotkey string, registering new hotkeys and unregistering removed ones automatically. Reordering the array changes that identity, so reordered entries are unregistered and re-registered even if their callback references stay the same.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```tsx
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```tsx
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `useHotkeyRegistrations` hook to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```tsx
+import { useHotkeyRegistrations } from '@tanstack/react-hotkeys'
+
+function ShortcutPalette() {
+  const { hotkeys, sequences } = useHotkeyRegistrations()
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      <ul>
+        {hotkeys.map((reg) => (
+          <li key={reg.hotkey}>
+            <kbd>{reg.hotkey}</kbd>
+            {reg.meta?.name && <span> — {reg.meta.name}</span>}
+            {reg.meta?.description && <p>{reg.meta.description}</p>}
+          </li>
+        ))}
+      </ul>
+      {sequences.length > 0 && (
+        <>
+          <h2>Sequences</h2>
+          <ul>
+            {sequences.map((reg) => (
+              <li key={reg.sequence.join(' ')}>
+                <kbd>{reg.sequence.join(' → ')}</kbd>
+                {reg.meta?.name && <span> — {reg.meta.name}</span>}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+```
+
+The returned `hotkeys` array contains registration objects with the hotkey string, options (including `meta`), and enabled state. The `sequences` array contains sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+Under the hood, `useHotkey` uses the singleton `HotkeyManager`. You can also access the manager directly if needed:
+
+```tsx
+import { getHotkeyManager } from '@tanstack/react-hotkeys'
+
+const manager = getHotkeyManager()
+
+// Check if a hotkey is registered
+manager.isRegistered('Mod+S')
+
+// Get total number of registrations
+manager.getRegistrationCount()
+```
+
+The manager attaches event listeners per target element, so only elements that have registered hotkeys receive listeners. This is more efficient than a single global listener.
diff --git a/mintlify/hotkeys/framework/react/guides/key-state-tracking.md b/mintlify/hotkeys/framework/react/guides/key-state-tracking.md
new file mode 100644
index 000000000..e594db9c5
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/key-state-tracking.md
@@ -0,0 +1,189 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three hooks for tracking the real-time state of keyboard keys. These are useful for building UIs that respond to modifier keys being held, displaying active key states, or implementing hold-to-activate features.
+
+## `useHeldKeys`
+
+Returns a reactive array of all currently held key names.
+
+```tsx
+import { useHeldKeys } from '@tanstack/react-hotkeys'
+
+function KeyDisplay() {
+  const heldKeys = useHeldKeys()
+
+  return (
+    <div>
+      {heldKeys.length > 0
+        ? `Held: ${heldKeys.join(' + ')}`
+        : 'No keys held'}
+    </div>
+  )
+}
+```
+
+The returned array contains key names like `'Shift'`, `'Control'`, `'Meta'`, `'A'`, `'ArrowUp'`, etc. Keys appear in the order they were pressed.
+
+## `useHeldKeyCodes`
+
+Returns a reactive object mapping held key names to their physical key codes (`event.code` values). This is useful when you need to distinguish between left and right modifiers.
+
+```tsx
+import { useHeldKeyCodes } from '@tanstack/react-hotkeys'
+
+function KeyCodeDisplay() {
+  const heldCodes = useHeldKeyCodes()
+  // Example: { Shift: "ShiftLeft", Control: "ControlRight" }
+
+  return (
+    <div>
+      {Object.entries(heldCodes).map(([key, code]) => (
+        <div key={key}>
+          {key}: {code}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+## `useKeyHold`
+
+Checks whether a specific key is currently held. This hook is optimized to only trigger re-renders when the specified key's held state changes, not when other keys are pressed or released.
+
+```tsx
+import { useKeyHold } from '@tanstack/react-hotkeys'
+
+function ModifierIndicators() {
+  const isShiftHeld = useKeyHold('Shift')
+  const isCtrlHeld = useKeyHold('Control')
+  const isAltHeld = useKeyHold('Alt')
+  const isMetaHeld = useKeyHold('Meta')
+
+  return (
+    <div className="modifier-bar">
+      <span className={isShiftHeld ? 'active' : ''}>Shift</span>
+      <span className={isCtrlHeld ? 'active' : ''}>Ctrl</span>
+      <span className={isAltHeld ? 'active' : ''}>Alt</span>
+      <span className={isMetaHeld ? 'active' : ''}>Meta</span>
+    </div>
+  )
+}
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+Show additional options while a modifier is held:
+
+```tsx
+import { useKeyHold } from '@tanstack/react-hotkeys'
+
+function FileItem({ file }: { file: File }) {
+  const isShiftHeld = useKeyHold('Shift')
+
+  return (
+    <div className="file-item">
+      <span>{file.name}</span>
+      {isShiftHeld && (
+        <button className="danger" onClick={() => permanentlyDelete(file)}>
+          Permanently Delete
+        </button>
+      )}
+      {!isShiftHeld && (
+        <button onClick={() => moveToTrash(file)}>
+          Move to Trash
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+### Keyboard Shortcut Hints
+
+Display different shortcut hints based on which modifiers are held:
+
+```tsx
+import { useKeyHold } from '@tanstack/react-hotkeys'
+
+function ShortcutHints() {
+  const isModHeld = useKeyHold('Meta') // or 'Control' on Windows
+
+  if (!isModHeld) return null
+
+  return (
+    <div className="shortcut-overlay">
+      <div>S - Save</div>
+      <div>Z - Undo</div>
+      <div>Shift+Z - Redo</div>
+      <div>K - Command Palette</div>
+    </div>
+  )
+}
+```
+
+### Debugging Key Display
+
+Combine hooks with formatting utilities for a rich debugging display:
+
+```tsx
+import {
+  useHeldKeys,
+  useHeldKeyCodes,
+  formatForDisplay,
+  type RegisterableHotkey,
+} from '@tanstack/react-hotkeys'
+
+function KeyDebugger() {
+  const heldKeys = useHeldKeys()
+  const heldCodes = useHeldKeyCodes()
+
+  return (
+    <div className="key-debugger">
+      <h3>Active Keys</h3>
+      {heldKeys.map((key) => (
+        <div key={key}>
+          <strong>
+            {formatForDisplay(key as RegisterableHotkey, { useSymbols: true })}
+          </strong>
+          <span className="code">{heldCodes[key]}</span>
+        </div>
+      ))}
+      {heldKeys.length === 0 && <p>Press any key...</p>}
+    </div>
+  )
+}
+```
+
+## Platform Quirks
+
+The underlying `KeyStateTracker` handles several platform-specific issues:
+
+### macOS Modifier Key Behavior
+
+On macOS, when a modifier key is held and a non-modifier key is pressed, the OS sometimes swallows the `keyup` event for the non-modifier key. TanStack Hotkeys detects and handles this automatically so held key state stays accurate.
+
+### Window Blur
+
+When the browser window loses focus, all held keys are automatically cleared. This prevents "stuck" keys that would otherwise appear held even after the user tabs away and releases them.
+
+## Under the Hood
+
+All three hooks subscribe to the singleton `KeyStateTracker` via `@tanstack/react-store`. The tracker manages its own event listeners on `document` and maintains state in a TanStack Store, which the hooks subscribe to reactively.
+
+```tsx
+import { getKeyStateTracker } from '@tanstack/react-hotkeys'
+
+const tracker = getKeyStateTracker()
+
+// Imperative access (outside of React)
+tracker.getHeldKeys()        // string[]
+tracker.isKeyHeld('Shift')   // boolean
+tracker.isAnyKeyHeld(['Shift', 'Control']) // boolean
+tracker.areAllKeysHeld(['Shift', 'Control']) // boolean
+```
diff --git a/mintlify/hotkeys/framework/react/guides/sequence-recording.md b/mintlify/hotkeys/framework/react/guides/sequence-recording.md
new file mode 100644
index 000000000..d5da6da91
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/sequence-recording.md
@@ -0,0 +1,98 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+TanStack Hotkeys provides the `useHotkeySequenceRecorder` hook for building UIs where users record **multi-chord sequences** (Vim-style shortcuts). Each step is captured like a single hotkey chord; users finish with **Enter** by default, or you can use manual commit and optional idle timeout.
+
+## Basic usage
+
+```tsx
+import { useHotkeySequenceRecorder, formatForDisplay } from '@tanstack/react-hotkeys'
+import type { HotkeySequence } from '@tanstack/react-hotkeys'
+
+function HotkeySequenceRecorder() {
+  const recorder = useHotkeySequenceRecorder({
+    onRecord: (sequence: HotkeySequence) => {
+      console.log('Recorded:', sequence)
+    },
+  })
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={
+          recorder.isRecording ? recorder.cancelRecording : recorder.startRecording
+        }
+      >
+        {recorder.isRecording
+          ? 'Press chords, then Enter…'
+          : recorder.recordedSequence
+            ? recorder.recordedSequence.map((h) => formatForDisplay(h)).join(' ')
+            : 'Click to record'}
+      </button>
+      {recorder.isRecording && (
+        <button type="button" onClick={recorder.cancelRecording}>
+          Cancel
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is listening |
+| `steps` | `HotkeySequence` | Chords captured in the current session |
+| `recordedSequence` | `HotkeySequence \| null` | Last committed sequence |
+| `startRecording` | `() => void` | Start a new session |
+| `stopRecording` | `() => void` | Stop without calling `onRecord` |
+| `cancelRecording` | `() => void` | Stop and call `onCancel` |
+| `commitRecording` | `() => void` | Commit current `steps` (no-op if empty) |
+
+## Options
+
+Core options live on `HotkeySequenceRecorderOptions` from `@tanstack/hotkeys`:
+
+- `onRecord(sequence)` — called when a sequence is committed (including `[]` when cleared via Backspace with no steps).
+- `onCancel`, `onClear` — same intent as the hotkey recorder.
+- `commitKeys` — `'enter'` (default) or `'none'`. With `'none'`, only `commitRecording()` (or `idleTimeoutMs`) finishes recording; plain Enter can be recorded as a chord.
+- `commitOnEnter` — when `commitKeys` is `'enter'`, set to `false` to treat Enter as a normal chord (then use `commitRecording()` or idle timeout to finish).
+- `idleTimeoutMs` — optional milliseconds of inactivity **after the last completed chord** to auto-commit. The timer does not run while waiting for the **first** chord.
+
+### Provider defaults
+
+```tsx
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequenceRecorder: {
+      idleTimeoutMs: 2000,
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+## Behavior
+
+| Input | Behavior |
+|-------|----------|
+| Valid chord | Appended to `steps`; listener stays active |
+| Enter (no modifiers), `commitKeys: 'enter'`, `steps.length >= 1` | Commits and calls `onRecord` |
+| Escape | Cancels; `onCancel` |
+| Backspace / Delete (no modifiers) | Removes last step, or if empty runs `onClear` + `onRecord([])` and stops |
+
+Recorded chords use portable `Mod` format, same as `HotkeyRecorder`.
+
+## Under the hood
+
+`useHotkeySequenceRecorder` wraps the `HotkeySequenceRecorder` class and subscribes to its TanStack Store, same pattern as `useHotkeyRecorder`.
diff --git a/mintlify/hotkeys/framework/react/guides/sequences.md b/mintlify/hotkeys/framework/react/guides/sequences.md
new file mode 100644
index 000000000..9ecf29f83
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/guides/sequences.md
@@ -0,0 +1,210 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences -- shortcuts where you press keys one after another rather than simultaneously. This is commonly used for Vim-style navigation, cheat codes, or multi-step commands.
+
+## Basic Usage
+
+Use the `useHotkeySequence` hook to register a key sequence:
+
+```tsx
+import { useHotkeySequence } from '@tanstack/react-hotkeys'
+
+function App() {
+  // Vim-style: press g then g to scroll to top
+  useHotkeySequence(['G', 'G'], () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  })
+}
+```
+
+The first argument is an array of `Hotkey` strings representing each step in the sequence. The user must press them in order within the timeout window.
+
+## Many sequences at once
+
+When you need several sequences—or a **dynamic** list whose length is not fixed at compile time—use `useHotkeySequences` instead of calling `useHotkeySequence` many times. One hook call keeps you within the rules of hooks while still registering every sequence.
+
+```tsx
+import { useHotkeySequences } from '@tanstack/react-hotkeys'
+
+useHotkeySequences([
+  { sequence: ['G', 'G'], callback: () => scrollToTop() },
+  { sequence: ['D', 'D'], callback: () => deleteLine(), options: { timeout: 500 } },
+])
+```
+
+Options merge in the same order as `useHotkeys`: `HotkeysProvider` defaults, then the second-argument `commonOptions`, then each definition’s `options`.
+
+## Sequence Options
+
+The third argument is an options object:
+
+```tsx
+useHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,  // Time allowed between keys (ms)
+  enabled: true,  // Whether the sequence is active
+})
+```
+
+### `timeout`
+
+The maximum time (in milliseconds) allowed between consecutive key presses. If the user takes longer than this between any two keys, the sequence resets. Defaults to `1000` (1 second).
+
+```tsx
+// Fast sequence - user must type quickly
+useHotkeySequence(['D', 'D'], () => deleteLine(), { timeout: 500 })
+
+// Slow sequence - user has more time between keys
+useHotkeySequence(['Shift+Z', 'Shift+Z'], () => forceQuit(), { timeout: 2000 })
+```
+
+### `enabled`
+
+Controls whether the sequence is active. Defaults to `true`.
+
+Disabled sequences **remain registered** and stay visible in devtools; only execution is suppressed.
+
+```tsx
+const [isVimMode, setIsVimMode] = useState(true)
+
+useHotkeySequence(['G', 'G'], () => scrollToTop(), { enabled: isVimMode })
+```
+
+### Global Default Options via Provider
+
+You can set default options for all `useHotkeySequence` calls by wrapping your component tree with `HotkeysProvider`. Per-hook options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/react-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequence: { timeout: 1500 },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```tsx
+useHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/react/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Sequences with Modifiers
+
+Each step in a sequence can include modifiers:
+
+```tsx
+// Ctrl+K followed by Ctrl+C (VS Code-style comment)
+useHotkeySequence(['Mod+K', 'Mod+C'], () => {
+  commentSelection()
+})
+
+// g then Shift+G (go to bottom, Vim-style)
+useHotkeySequence(['G', 'Shift+G'], () => {
+  scrollToBottom()
+})
+```
+
+## Chained modifier chords
+
+You can repeat the same modifier across consecutive steps—for example `Shift+R` then `Shift+T`:
+
+```tsx
+useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+  doNextAction()
+})
+```
+
+### Modifier-only keys between steps
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone, with no letter or other key) are ignored. They do not advance the sequence and they do **not** reset progress. That way a user can tap Shift (or hold it) between chords such as `Shift+R` and `Shift+T` without breaking the sequence—similar to Vim-style flows where a modifier may be pressed before the next chord.
+
+## Common Sequence Patterns
+
+### Vim-Style Navigation
+
+```tsx
+function VimNavigation() {
+  useHotkeySequence(['G', 'G'], () => scrollToTop())
+  useHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+  useHotkeySequence(['D', 'D'], () => deleteLine())
+  useHotkeySequence(['D', 'W'], () => deleteWord())
+  useHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+}
+```
+
+### Konami Code
+
+```tsx
+useHotkeySequence(
+  [
+    'ArrowUp', 'ArrowUp',
+    'ArrowDown', 'ArrowDown',
+    'ArrowLeft', 'ArrowRight',
+    'ArrowLeft', 'ArrowRight',
+    'B', 'A',
+  ],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+### Multi-Step Commands
+
+```tsx
+// Press "h", "e", "l", "p" to open help
+useHotkeySequence(['H', 'E', 'L', 'P'], () => openHelp())
+```
+
+## How Sequences Work
+
+The `SequenceManager` (singleton) handles all sequence registrations. When a key is pressed:
+
+1. It checks if the key matches the next expected step in any registered sequence
+2. If it matches, the sequence advances to the next step
+3. If the timeout expires between steps, the sequence resets
+4. When all steps are completed, the callback fires
+5. Modifier-only keydowns are ignored (they neither advance nor reset the sequence)
+
+### Overlapping Sequences
+
+Multiple sequences can share the same prefix. The manager tracks progress for each sequence independently:
+
+```tsx
+// Both share the 'D' prefix
+useHotkeySequence(['D', 'D'], () => deleteLine())   // dd
+useHotkeySequence(['D', 'W'], () => deleteWord())    // dw
+useHotkeySequence(['D', 'I', 'W'], () => deleteInnerWord()) // diw
+```
+
+After pressing `D`, the manager waits for the next key to determine which sequence to complete.
+
+## The Sequence Manager
+
+Under the hood, `useHotkeySequence` uses the singleton `SequenceManager`. You can also use the core `createSequenceMatcher` function for standalone sequence matching without the singleton:
+
+```tsx
+import { createSequenceMatcher } from '@tanstack/react-hotkeys'
+
+const matcher = createSequenceMatcher(['G', 'G'], {
+  timeout: 1000,
+})
+
+document.addEventListener('keydown', (e) => {
+  if (matcher.match(e)) {
+    console.log('Sequence completed!')
+  }
+  console.log('Progress:', matcher.getProgress()) // e.g., 1/2
+})
+```
diff --git a/mintlify/hotkeys/framework/react/quick-start.md b/mintlify/hotkeys/framework/react/quick-start.md
new file mode 100644
index 000000000..576b489c5
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/quick-start.md
@@ -0,0 +1,187 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Hotkeys installed yet? See the [Installation](/hotkeys/installation) page for instructions.
+
+## Your First Hotkey
+
+The `useHotkey` hook is the primary way to register keyboard shortcuts in React:
+
+```tsx
+import { useHotkey } from '@tanstack/react-hotkeys'
+
+function App() {
+  useHotkey('Mod+S', () => {
+    saveDocument()
+  })
+
+  return <div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>
+}
+```
+
+The `Mod` modifier automatically resolves to `Meta` (Command) on macOS and `Control` on Windows/Linux, so your shortcuts work across platforms without extra logic.
+
+## Common Patterns
+
+### Multiple Hotkeys
+
+Register as many hotkeys as you need. Each `useHotkey` call is independent:
+
+```tsx
+function Editor() {
+  useHotkey('Mod+S', () => save())
+  useHotkey('Mod+Z', () => undo())
+  useHotkey('Mod+Shift+Z', () => redo())
+  useHotkey('Mod+F', () => openSearch())
+  useHotkey('Escape', () => closeDialog())
+
+  return <div>Editor with keyboard shortcuts</div>
+}
+```
+
+### Scoped Hotkeys with Refs
+
+Attach hotkeys to specific elements instead of the entire document:
+
+```tsx
+import { useRef } from 'react'
+import { useHotkey } from '@tanstack/react-hotkeys'
+
+function Panel() {
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  // This hotkey only fires when the panel (or its children) has focus
+  useHotkey('Escape', () => closePanel(), { target: panelRef })
+
+  return (
+    <div ref={panelRef} tabIndex={0}>
+      <p>Press Escape while focused here to close</p>
+    </div>
+  )
+}
+```
+
+### Conditional Hotkeys
+
+Enable or disable hotkeys based on application state:
+
+```tsx
+function Modal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  useHotkey('Escape', () => onClose(), { enabled: isOpen })
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal">
+      <p>Press Escape to close</p>
+    </div>
+  )
+}
+```
+
+### Multi-Key Sequences
+
+Register Vim-style key sequences with `useHotkeySequence`:
+
+```tsx
+import { useHotkeySequence } from '@tanstack/react-hotkeys'
+
+function VimStyleApp() {
+  useHotkeySequence(['G', 'G'], () => scrollToTop())
+  useHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+
+  return <div>Use gg to go to top, gG to go to bottom</div>
+}
+```
+
+### Tracking Held Keys
+
+Display modifier key state for power-user UIs:
+
+```tsx
+import { useKeyHold, useHeldKeys } from '@tanstack/react-hotkeys'
+
+function StatusBar() {
+  const isShiftHeld = useKeyHold('Shift')
+  const heldKeys = useHeldKeys()
+
+  return (
+    <div className="status-bar">
+      {isShiftHeld && <span>Shift mode active</span>}
+      {heldKeys.length > 0 && <span>Keys: {heldKeys.join('+')}</span>}
+    </div>
+  )
+}
+```
+
+### Displaying Hotkeys in the UI
+
+Format hotkeys for platform-aware display:
+
+```tsx
+import { useHotkey, formatForDisplay } from '@tanstack/react-hotkeys'
+
+function SaveButton() {
+  useHotkey('Mod+S', () => save())
+
+  return (
+    <button>
+      Save <kbd>{formatForDisplay('Mod+S')}</kbd>
+      {/* Mac: "⌘S"  |  Windows: "Ctrl+S" */}
+    </button>
+  )
+}
+```
+
+## Setting Up Devtools
+
+Add the TanStack Devtools to your app to inspect registered hotkeys, view held keys, and test shortcuts:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools'
+
+function App() {
+  return (
+    <div>
+      {/* Your app */}
+      <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+    </div>
+  )
+}
+```
+
+## Default Options Provider
+
+Wrap your app with `HotkeysProvider` to set default options for all hotkey hooks globally. Any options passed directly to a hook will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/react-hotkeys'
+
+function Root() {
+  return (
+    <HotkeysProvider
+      defaultOptions={{
+        hotkey: { preventDefault: true },
+        hotkeySequence: { timeout: 1500 },
+        hotkeyRecorder: { onCancel: () => console.log('Recording cancelled') },
+      }}
+    >
+      <App />
+    </HotkeysProvider>
+  )
+}
+```
+
+## Next Steps
+
+- [Hotkeys Guide](/hotkeys/framework/react/guides/hotkeys) - Deep dive into `useHotkey` options and patterns
+- [Sequences Guide](/hotkeys/framework/react/guides/sequences) - Multi-key sequence handling
+- [Hotkey Recording Guide](/hotkeys/framework/react/guides/hotkey-recording) - Building shortcut customization UIs
+- [Sequence Recording Guide](/hotkeys/framework/react/guides/sequence-recording)
+- [Key State Tracking Guide](/hotkeys/framework/react/guides/key-state-tracking) - Real-time key state monitoring
+- [Formatting & Display Guide](/hotkeys/framework/react/guides/formatting-display) - Platform-aware hotkey formatting
diff --git a/mintlify/hotkeys/framework/react/reference/functions/HotkeysProvider.md b/mintlify/hotkeys/framework/react/reference/functions/HotkeysProvider.md
new file mode 100644
index 000000000..e2fe0bd71
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/HotkeysProvider.md
@@ -0,0 +1,22 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Function: HotkeysProvider()
+
+```ts
+function HotkeysProvider(__namedParameters): Element;
+```
+
+Defined in: [HotkeysProvider.tsx:30](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L30)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`HotkeysProviderProps`](/hotkeys/framework/react/reference/interfaces/HotkeysProviderProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/react/reference/functions/useDefaultHotkeysOptions.md
new file mode 100644
index 000000000..71fa63cee
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultHotkeysOptions
+title: useDefaultHotkeysOptions
+---
+
+# Function: useDefaultHotkeysOptions()
+
+```ts
+function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:54](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L54)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHeldKeyCodes.md b/mintlify/hotkeys/framework/react/reference/functions/useHeldKeyCodes.md
new file mode 100644
index 000000000..6c45e2be5
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHeldKeyCodes.md
@@ -0,0 +1,42 @@
+---
+id: useHeldKeyCodes
+title: useHeldKeyCodes
+---
+
+# Function: useHeldKeyCodes()
+
+```ts
+function useHeldKeyCodes(): Record<string, string>;
+```
+
+Defined in: [useHeldKeyCodes.ts:30](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHeldKeyCodes.ts#L30)
+
+React hook that returns a map of currently held key names to their physical `event.code` values.
+
+This is useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+## Returns
+
+`Record`\&lt;`string`, `string`\>
+
+Record mapping normalized key names to their `event.code` values
+
+## Example
+
+```tsx
+function KeyDebugDisplay() {
+  const heldKeys = useHeldKeys()
+  const heldCodes = useHeldKeyCodes()
+
+  return (
+    <div>
+      {heldKeys.map((key) => (
+        <kbd key={key}>
+          {key} <small>{heldCodes[key]}</small>
+        </kbd>
+      ))}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHeldKeys.md b/mintlify/hotkeys/framework/react/reference/functions/useHeldKeys.md
new file mode 100644
index 000000000..4dd17e1b6
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHeldKeys.md
@@ -0,0 +1,38 @@
+---
+id: useHeldKeys
+title: useHeldKeys
+---
+
+# Function: useHeldKeys()
+
+```ts
+function useHeldKeys(): string[];
+```
+
+Defined in: [useHeldKeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHeldKeys.ts#L26)
+
+React hook that returns an array of currently held keyboard keys.
+
+This hook uses `useSelector` from `@tanstack/react-store` to subscribe
+to the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Returns
+
+`string`[]
+
+Array of currently held key names
+
+## Example
+
+```tsx
+function KeyDisplay() {
+  const heldKeys = useHeldKeys()
+
+  return (
+    <div>
+      Currently pressed: {heldKeys.join(' + ') || 'None'}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkey.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkey.md
new file mode 100644
index 000000000..dc0451077
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkey.md
@@ -0,0 +1,92 @@
+---
+id: useHotkey
+title: useHotkey
+---
+
+# Function: useHotkey()
+
+```ts
+function useHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [useHotkey.ts:89](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkey.ts#L89)
+
+React hook for registering a keyboard hotkey.
+
+Uses the singleton HotkeyManager for efficient event handling.
+The callback receives both the keyboard event and a context object
+containing the hotkey string and parsed hotkey.
+
+This hook syncs the callback and options on every render to avoid
+stale closures. This means
+callbacks that reference React state will always have access to
+the latest values.
+
+## Parameters
+
+### hotkey
+
+`RegisterableHotkey`
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
+
+### callback
+
+`HotkeyCallback`
+
+The function to call when the hotkey is pressed
+
+### options
+
+[`UseHotkeyOptions`](/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions) = `{}`
+
+Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+  and only suppresses firing; the hook updates the existing handle instead of unregistering.
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function SaveButton() {
+  const [count, setCount] = useState(0)
+
+  // Callback always has access to latest count value
+  useHotkey('Mod+S', (event, { hotkey }) => {
+    console.log(`Save triggered, count is ${count}`)
+    handleSave()
+  })
+
+  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+}
+```
+
+```tsx
+function Modal({ isOpen, onClose }) {
+  // enabled option is synced on every render
+  useHotkey('Escape', () => {
+    onClose()
+  }, { enabled: isOpen })
+
+  if (!isOpen) return null
+  return <div className="modal">...</div>
+}
+```
+
+```tsx
+function Editor() {
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  // Scoped to a specific element
+  useHotkey('Mod+S', () => {
+    save()
+  }, { target: editorRef })
+
+  return <div ref={editorRef}>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRecorder.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRecorder.md
new file mode 100644
index 000000000..e73f6b170
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRecorder.md
@@ -0,0 +1,61 @@
+---
+id: useHotkeyRecorder
+title: useHotkeyRecorder
+---
+
+# Function: useHotkeyRecorder()
+
+```ts
+function useHotkeyRecorder(options): ReactHotkeyRecorder;
+```
+
+Defined in: [useHotkeyRecorder.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L58)
+
+React hook for recording keyboard shortcuts.
+
+This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+class, managing all the complexity of capturing keyboard events, converting them
+to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+to clear.
+
+## Parameters
+
+### options
+
+`HotkeyRecorderOptions`
+
+Configuration options for the recorder
+
+## Returns
+
+[`ReactHotkeyRecorder`](/hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder)
+
+An object with recording state and control functions
+
+## Example
+
+```tsx
+function ShortcutSettings() {
+  const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')
+
+  const recorder = useHotkeyRecorder({
+    onRecord: (hotkey) => {
+      setShortcut(hotkey)
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  return (
+    <div>
+      <button onClick={recorder.startRecording}>
+        {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      {recorder.recordedHotkey && (
+        <div>Recording: {recorder.recordedHotkey}</div>
+      )}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRegistrations.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRegistrations.md
new file mode 100644
index 000000000..dde7175a0
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeyRegistrations.md
@@ -0,0 +1,48 @@
+---
+id: useHotkeyRegistrations
+title: useHotkeyRegistrations
+---
+
+# Function: useHotkeyRegistrations()
+
+```ts
+function useHotkeyRegistrations(): HotkeyRegistrationsResult;
+```
+
+Defined in: [useHotkeyRegistrations.ts:54](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRegistrations.ts#L54)
+
+React hook that reactively reads all hotkey and sequence registrations
+from the singleton managers.
+
+This is a standalone hook that does NOT require the HotkeysProvider.
+It subscribes to both HotkeyManager and SequenceManager stores and
+re-renders when registrations change.
+
+## Returns
+
+[`HotkeyRegistrationsResult`](/hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult)
+
+Object with `hotkeys` and `sequences` arrays
+
+## Example
+
+```tsx
+function ShortcutPalette() {
+  const { hotkeys, sequences } = useHotkeyRegistrations()
+
+  return (
+    <ul>
+      {hotkeys.map((reg) => (
+        <li key={reg.id}>
+          {reg.options.meta?.name ?? reg.hotkey}
+        </li>
+      ))}
+      {sequences.map((reg) => (
+        <li key={reg.id}>
+          {reg.options.meta?.name ?? reg.sequence.join(' ')}
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequence.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequence.md
new file mode 100644
index 000000000..79a00c5e0
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequence.md
@@ -0,0 +1,78 @@
+---
+id: useHotkeySequence
+title: useHotkeySequence
+---
+
+# Function: useHotkeySequence()
+
+```ts
+function useHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [useHotkeySequence.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequence.ts#L73)
+
+React hook for registering a keyboard shortcut sequence (Vim-style).
+
+This hook allows you to register multi-key sequences like 'g g' or 'd d'
+that trigger when the full sequence is pressed within a timeout.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+`HotkeySequence`
+
+Array of hotkey strings that form the sequence
+
+### callback
+
+`HotkeyCallback`
+
+Function to call when the sequence is completed
+
+### options
+
+[`UseHotkeySequenceOptions`](/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions) = `{}`
+
+Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+  and only suppresses firing; the hook updates the existing handle instead of unregistering.
+
+## Returns
+
+`void`
+
+## Example
+
+```tsx
+function VimEditor() {
+  // 'g g' to go to top
+  useHotkeySequence(['G', 'G'], () => {
+    scrollToTop()
+  })
+
+  // 'd d' to delete line
+  useHotkeySequence(['D', 'D'], () => {
+    deleteLine()
+  })
+
+  // 'd i w' to delete inner word
+  useHotkeySequence(['D', 'I', 'W'], () => {
+    deleteInnerWord()
+  }, { timeout: 500 })
+
+  // Same modifier on consecutive steps (bare Shift between chords is ignored)
+  useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+    nextAction()
+  })
+
+  return <div>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..3b27a8aa0
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequenceRecorder.md
@@ -0,0 +1,26 @@
+---
+id: useHotkeySequenceRecorder
+title: useHotkeySequenceRecorder
+---
+
+# Function: useHotkeySequenceRecorder()
+
+```ts
+function useHotkeySequenceRecorder(options): ReactHotkeySequenceRecorder;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L29)
+
+React hook for recording multi-chord sequences (Vim-style shortcuts).
+
+## Parameters
+
+### options
+
+`HotkeySequenceRecorderOptions`
+
+Configuration options for the hotkey sequence recorder
+
+## Returns
+
+[`ReactHotkeySequenceRecorder`](/hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequences.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequences.md
new file mode 100644
index 000000000..c3283f033
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeySequences.md
@@ -0,0 +1,70 @@
+---
+id: useHotkeySequences
+title: useHotkeySequences
+---
+
+# Function: useHotkeySequences()
+
+```ts
+function useHotkeySequences(definitions, commonOptions): void;
+```
+
+Defined in: [useHotkeySequences.ts:68](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequences.ts#L68)
+
+React hook for registering multiple keyboard shortcut sequences at once (Vim-style).
+
+Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
+register variable-length lists without violating the rules of hooks.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Callbacks and options are synced on every render to avoid stale closures.
+
+Definitions with an empty `sequence` are skipped (no registration).
+
+## Parameters
+
+### definitions
+
+[`UseHotkeySequenceDefinition`](/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition)[]
+
+Array of sequence definitions to register
+
+### commonOptions
+
+[`UseHotkeySequenceOptions`](/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions) = `{}`
+
+Shared options applied to all sequences (overridden by per-definition options).
+  Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
+  stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
+  via `setOptions` (no unregister/re-register churn).
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function VimPalette() {
+  useHotkeySequences([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine() },
+    { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
+  ])
+}
+```
+
+```tsx
+function DynamicSequences({ items }) {
+  useHotkeySequences(
+    items.map((item) => ({
+      sequence: item.chords,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeys.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeys.md
new file mode 100644
index 000000000..b866440d0
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeys.md
@@ -0,0 +1,70 @@
+---
+id: useHotkeys
+title: useHotkeys
+---
+
+# Function: useHotkeys()
+
+```ts
+function useHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [useHotkeys.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeys.ts#L73)
+
+React hook for registering multiple keyboard hotkeys at once.
+
+Uses the singleton HotkeyManager for efficient event handling.
+Accepts a dynamic array of hotkey definitions, making it safe to use
+with variable-length lists without violating the rules of hooks.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Callbacks and options are synced on every render to avoid stale closures.
+
+## Parameters
+
+### hotkeys
+
+[`UseHotkeyDefinition`](/hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition)[]
+
+Array of hotkey definitions to register
+
+### commonOptions
+
+[`UseHotkeyOptions`](/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions) = `{}`
+
+Shared options applied to all hotkeys (overridden by per-definition options).
+  Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
+  stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
+  via `setOptions` (no unregister/re-register churn).
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function Editor() {
+  useHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+```tsx
+function MenuShortcuts({ items }) {
+  // Dynamic hotkeys from data -- safe because it's a single hook call
+  useHotkeys(
+    items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useHotkeysContext.md b/mintlify/hotkeys/framework/react/reference/functions/useHotkeysContext.md
new file mode 100644
index 000000000..8141e0d7d
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: useHotkeysContext
+title: useHotkeysContext
+---
+
+# Function: useHotkeysContext()
+
+```ts
+function useHotkeysContext(): HotkeysContextValue | null;
+```
+
+Defined in: [HotkeysProvider.tsx:49](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L49)
+
+## Returns
+
+`HotkeysContextValue` \| `null`
diff --git a/mintlify/hotkeys/framework/react/reference/functions/useKeyHold.md b/mintlify/hotkeys/framework/react/reference/functions/useKeyHold.md
new file mode 100644
index 000000000..29cd205ff
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/functions/useKeyHold.md
@@ -0,0 +1,62 @@
+---
+id: useKeyHold
+title: useKeyHold
+---
+
+# Function: useKeyHold()
+
+```ts
+function useKeyHold(key): boolean;
+```
+
+Defined in: [useKeyHold.ts:45](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useKeyHold.ts#L45)
+
+React hook that returns whether a specific key is currently being held.
+
+This hook uses `useSelector` from `@tanstack/react-store` to subscribe
+to the global KeyStateTracker and uses a selector to determine if
+the specified key is held.
+
+## Parameters
+
+### key
+
+`IndividualKey`
+
+The key to check (e.g., 'Shift', 'Control', 'A')
+
+## Returns
+
+`boolean`
+
+True if the key is currently held down
+
+## Examples
+
+```tsx
+function ShiftIndicator() {
+  const isShiftHeld = useKeyHold('Shift')
+
+  return (
+    <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>
+      {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}
+    </div>
+  )
+}
+```
+
+```tsx
+function ModifierIndicators() {
+  const ctrl = useKeyHold('Control')
+  const shift = useKeyHold('Shift')
+  const alt = useKeyHold('Alt')
+
+  return (
+    <div>
+      <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>
+      <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>
+      <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/react/reference/index.md b/mintlify/hotkeys/framework/react/reference/index.md
new file mode 100644
index 000000000..92d50f37c
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/index.md
@@ -0,0 +1,34 @@
+---
+id: "@tanstack/react-hotkeys"
+title: "@tanstack/react-hotkeys"
+---
+
+# @tanstack/react-hotkeys
+
+## Interfaces
+
+- [HotkeyRegistrationsResult](/hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult)
+- [HotkeysProviderOptions](/hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions)
+- [HotkeysProviderProps](/hotkeys/framework/react/reference/interfaces/HotkeysProviderProps)
+- [ReactHotkeyRecorder](/hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder)
+- [ReactHotkeySequenceRecorder](/hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder)
+- [UseHotkeyDefinition](/hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition)
+- [UseHotkeyOptions](/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions)
+- [UseHotkeySequenceDefinition](/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition)
+- [UseHotkeySequenceOptions](/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions)
+
+## Functions
+
+- [HotkeysProvider](/hotkeys/framework/react/reference/functions/HotkeysProvider)
+- [useDefaultHotkeysOptions](/hotkeys/framework/react/reference/functions/useDefaultHotkeysOptions)
+- [useHeldKeyCodes](/hotkeys/framework/react/reference/functions/useHeldKeyCodes)
+- [useHeldKeys](/hotkeys/framework/react/reference/functions/useHeldKeys)
+- [useHotkey](/hotkeys/framework/react/reference/functions/useHotkey)
+- [useHotkeyRecorder](/hotkeys/framework/react/reference/functions/useHotkeyRecorder)
+- [useHotkeyRegistrations](/hotkeys/framework/react/reference/functions/useHotkeyRegistrations)
+- [useHotkeys](/hotkeys/framework/react/reference/functions/useHotkeys)
+- [useHotkeysContext](/hotkeys/framework/react/reference/functions/useHotkeysContext)
+- [useHotkeySequence](/hotkeys/framework/react/reference/functions/useHotkeySequence)
+- [useHotkeySequenceRecorder](/hotkeys/framework/react/reference/functions/useHotkeySequenceRecorder)
+- [useHotkeySequences](/hotkeys/framework/react/reference/functions/useHotkeySequences)
+- [useKeyHold](/hotkeys/framework/react/reference/functions/useKeyHold)
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult.md b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult.md
new file mode 100644
index 000000000..253527812
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeyRegistrationsResult.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyRegistrationsResult
+title: HotkeyRegistrationsResult
+---
+
+# Interface: HotkeyRegistrationsResult
+
+Defined in: [useHotkeyRegistrations.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRegistrations.ts#L15)
+
+Return type for useHotkeyRegistrations.
+
+## Properties
+
+### hotkeys
+
+```ts
+hotkeys: HotkeyRegistrationView[];
+```
+
+Defined in: [useHotkeyRegistrations.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRegistrations.ts#L17)
+
+All registered hotkeys (public view, no callbacks)
+
+***
+
+### sequences
+
+```ts
+sequences: SequenceRegistrationView[];
+```
+
+Defined in: [useHotkeyRegistrations.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRegistrations.ts#L19)
+
+All registered sequences
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..e50aae7ef
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [HotkeysProvider.tsx:10](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L10)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<UseHotkeyOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:11](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L11)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:12](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L12)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<UseHotkeySequenceOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:13](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L13)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:14](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L14)
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderProps.md b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderProps.md
new file mode 100644
index 000000000..4f92bf139
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/HotkeysProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: HotkeysProviderProps
+title: HotkeysProviderProps
+---
+
+# Interface: HotkeysProviderProps
+
+Defined in: [HotkeysProvider.tsx:23](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L23)
+
+## Properties
+
+### children
+
+```ts
+children: ReactNode;
+```
+
+Defined in: [HotkeysProvider.tsx:24](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L24)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:25](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/HotkeysProvider.tsx#L25)
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder.md b/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder.md
new file mode 100644
index 000000000..146ab032b
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeyRecorder.md
@@ -0,0 +1,80 @@
+---
+id: ReactHotkeyRecorder
+title: ReactHotkeyRecorder
+---
+
+# Interface: ReactHotkeyRecorder
+
+Defined in: [useHotkeyRecorder.ts:7](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L7)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L17)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [useHotkeyRecorder.ts:9](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L9)
+
+Whether recording is currently active
+
+***
+
+### recordedHotkey
+
+```ts
+recordedHotkey: Hotkey | null;
+```
+
+Defined in: [useHotkeyRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L11)
+
+The currently recorded hotkey (for live preview)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L13)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [useHotkeyRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeyRecorder.ts#L15)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder.md
new file mode 100644
index 000000000..8b4cdb26a
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/ReactHotkeySequenceRecorder.md
@@ -0,0 +1,102 @@
+---
+id: ReactHotkeySequenceRecorder
+title: ReactHotkeySequenceRecorder
+---
+
+# Interface: ReactHotkeySequenceRecorder
+
+Defined in: [useHotkeySequenceRecorder.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L10)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L19)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L21)
+
+Commit current steps (no-op if empty)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L12)
+
+Whether recording is currently active
+
+***
+
+### recordedSequence
+
+```ts
+recordedSequence: HotkeySequence | null;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L16)
+
+Last committed sequence
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L17)
+
+#### Returns
+
+`void`
+
+***
+
+### steps
+
+```ts
+steps: HotkeySequence;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L14)
+
+Chords captured in the current session
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [useHotkeySequenceRecorder.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequenceRecorder.ts#L18)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition.md b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition.md
new file mode 100644
index 000000000..1a7bfca14
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeyDefinition
+title: UseHotkeyDefinition
+---
+
+# Interface: UseHotkeyDefinition
+
+Defined in: [useHotkeys.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeys.ts#L20)
+
+A single hotkey definition for use with `useHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [useHotkeys.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeys.ts#L24)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: RegisterableHotkey;
+```
+
+Defined in: [useHotkeys.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeys.ts#L22)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: UseHotkeyOptions;
+```
+
+Defined in: [useHotkeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeys.ts#L26)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions.md b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions.md
new file mode 100644
index 000000000..3d767e9f0
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeyOptions.md
@@ -0,0 +1,31 @@
+---
+id: UseHotkeyOptions
+title: UseHotkeyOptions
+---
+
+# Interface: UseHotkeyOptions
+
+Defined in: [useHotkey.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkey.ts#L16)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: 
+  | HTMLElement
+  | Document
+  | Window
+  | RefObject<HTMLElement | null>
+  | null;
+```
+
+Defined in: [useHotkey.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkey.ts#L22)
+
+The DOM element to attach the event listener to.
+Can be a React ref, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition.md
new file mode 100644
index 000000000..7965ef8d3
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeySequenceDefinition
+title: UseHotkeySequenceDefinition
+---
+
+# Interface: UseHotkeySequenceDefinition
+
+Defined in: [useHotkeySequences.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequences.ts#L15)
+
+A single sequence definition for use with `useHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [useHotkeySequences.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequences.ts#L19)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: UseHotkeySequenceOptions;
+```
+
+Defined in: [useHotkeySequences.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequences.ts#L21)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: HotkeySequence;
+```
+
+Defined in: [useHotkeySequences.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequences.ts#L17)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions.md b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions.md
new file mode 100644
index 000000000..06ab75582
--- /dev/null
+++ b/mintlify/hotkeys/framework/react/reference/interfaces/UseHotkeySequenceOptions.md
@@ -0,0 +1,31 @@
+---
+id: UseHotkeySequenceOptions
+title: UseHotkeySequenceOptions
+---
+
+# Interface: UseHotkeySequenceOptions
+
+Defined in: [useHotkeySequence.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequence.ts#L13)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: 
+  | HTMLElement
+  | Document
+  | Window
+  | RefObject<HTMLElement | null>
+  | null;
+```
+
+Defined in: [useHotkeySequence.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useHotkeySequence.ts#L22)
+
+The DOM element to attach the event listener to.
+Can be a React ref, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHeldKeys.md b/mintlify/hotkeys/framework/solid/examples/createHeldKeys.md
new file mode 100644
index 000000000..fc9558e31
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHeldKeys.md
@@ -0,0 +1,12 @@
+---
+title: "createHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHeldKeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHeldKeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkey.md b/mintlify/hotkeys/framework/solid/examples/createHotkey.md
new file mode 100644
index 000000000..fd9bcd79d
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkey.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkeyRecorder.md b/mintlify/hotkeys/framework/solid/examples/createHotkeyRecorder.md
new file mode 100644
index 000000000..aaa4f5570
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkeyRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkeyRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkeyRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkeySequence.md b/mintlify/hotkeys/framework/solid/examples/createHotkeySequence.md
new file mode 100644
index 000000000..9f243bb27
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkeySequence.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkeySequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkeySequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/solid/examples/createHotkeySequenceRecorder.md
new file mode 100644
index 000000000..3b4ca8d67
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkeySequenceRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeySequenceRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkeySequenceRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkeySequenceRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkeySequences.md b/mintlify/hotkeys/framework/solid/examples/createHotkeySequences.md
new file mode 100644
index 000000000..5198d3de0
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkeySequences.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkeySequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkeySequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createHotkeys.md b/mintlify/hotkeys/framework/solid/examples/createHotkeys.md
new file mode 100644
index 000000000..c04b9298a
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createHotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createHotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createHotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/examples/createKeyHold.md b/mintlify/hotkeys/framework/solid/examples/createKeyHold.md
new file mode 100644
index 000000000..ed1bdc015
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/examples/createKeyHold.md
@@ -0,0 +1,12 @@
+---
+title: "createKeyHold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/solid/examples/createKeyHold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/solid/createKeyHold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/solid/guides/formatting-display.md b/mintlify/hotkeys/framework/solid/guides/formatting-display.md
new file mode 100644
index 000000000..63f77b6cc
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/formatting-display.md
@@ -0,0 +1,164 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys provides several utilities for formatting hotkey strings into human-readable display text. These utilities handle platform differences automatically, so your UI shows the right symbols and labels for each operating system.
+
+## `formatForDisplay`
+
+The primary formatting function. Returns a platform-aware string using symbols on macOS and text labels on Windows/Linux.
+
+```tsx
+import { formatForDisplay } from '@tanstack/solid-hotkeys'
+
+// On macOS (symbols separated by spaces):
+formatForDisplay('Mod+S')         // "⌘ S"
+formatForDisplay('Mod+Shift+Z')   // "⌘ ⇧ Z"
+formatForDisplay('Control+Alt+D') // "⌃ ⌥ D"
+
+// On Windows/Linux:
+formatForDisplay('Mod+S')         // "Ctrl+S"
+formatForDisplay('Mod+Shift+Z')   // "Ctrl+Shift+Z"
+formatForDisplay('Control+Alt+D') // "Ctrl+Alt+D"
+```
+
+### Options
+
+```ts
+formatForDisplay('Mod+S', {
+  platform: 'mac',
+  useSymbols: true,
+})
+```
+
+On macOS, modifier order matches canonical normalization (same as `formatWithLabels`), with **spaces** between symbol segments.
+
+## `formatWithLabels`
+
+Returns human-readable text labels (e.g., "Cmd" instead of the symbol).
+
+```tsx
+import { formatWithLabels } from '@tanstack/solid-hotkeys'
+
+formatWithLabels('Mod+S', { platform: 'mac' }) // "Cmd+S"
+formatWithLabels('Mod+S', { platform: 'windows' }) // "Ctrl+S"
+formatWithLabels('Mod+Shift+Z', { platform: 'mac' }) // "Cmd+Shift+Z"
+formatWithLabels('Mod+Shift+Z', { platform: 'windows' }) // "Ctrl+Shift+Z"
+```
+
+## Using Formatted Hotkeys in Solid
+
+### Keyboard Shortcut Badges
+
+```tsx
+import { formatForDisplay } from '@tanstack/solid-hotkeys'
+
+function ShortcutBadge(props: { hotkey: string }) {
+  return <kbd class="shortcut-badge">{formatForDisplay(props.hotkey)}</kbd>
+}
+```
+
+### Menu Items with Hotkeys
+
+```tsx
+import { createHotkey, formatForDisplay } from '@tanstack/solid-hotkeys'
+
+function MenuItem(props: {
+  label: string
+  hotkey: string
+  onAction: () => void
+}) {
+  createHotkey(props.hotkey, () => props.onAction())
+
+  return (
+    <div class="menu-item">
+      <span>{props.label}</span>
+      <span class="menu-shortcut">{formatForDisplay(props.hotkey)}</span>
+    </div>
+  )
+}
+```
+
+### Command Palette Items
+
+```tsx
+import { formatForDisplay } from '@tanstack/solid-hotkeys'
+import type { Hotkey } from '@tanstack/solid-hotkeys'
+
+interface Command {
+  id: string
+  label: string
+  hotkey?: Hotkey
+  action: () => void
+}
+
+function CommandPaletteItem(props: { command: Command }) {
+  return (
+    <div class="command-item" onClick={props.command.action}>
+      <span>{props.command.label}</span>
+      <Show when={props.command.hotkey}>
+        <kbd>{formatForDisplay(props.command.hotkey!)}</kbd>
+      </Show>
+    </div>
+  )
+}
+```
+
+## Platform Symbols Reference
+
+| Modifier | Mac Symbol | Windows/Linux Label |
+|----------|-----------|-------------------|
+| Meta (Cmd) | `⌘` | `Win` / `Super` |
+| Control | `⌃` | `Ctrl` |
+| Alt/Option | `⌥` | `Alt` |
+| Shift | `⇧` | `Shift` |
+
+## Parsing and Normalization
+
+### `parseHotkey`
+
+```ts
+import { parseHotkey } from '@tanstack/solid-hotkeys'
+
+const parsed = parseHotkey('Mod+Shift+S')
+// { key: 'S', ctrl: false, shift: true, alt: false, meta: true, modifiers: [...] }
+```
+
+### `normalizeHotkey` and `normalizeRegisterableHotkey`
+
+Core helpers produce a **canonical** hotkey string for storage and registration. When the platform allows `Mod`, the output uses `Mod` and **Mod-first** order.
+
+```ts
+import { normalizeHotkey, normalizeRegisterableHotkey } from '@tanstack/solid-hotkeys'
+
+normalizeHotkey('Cmd+S', 'mac')           // 'Mod+S'
+normalizeHotkey('Ctrl+Shift+s', 'windows') // 'Mod+Shift+S'
+
+normalizeRegisterableHotkey({ key: 'S', mod: true, shift: true }, 'mac') // 'Mod+Shift+S'
+```
+
+Solid primitives normalize registerable hotkeys automatically via `normalizeRegisterableHotkey`.
+
+## Validation
+
+Use `validateHotkey` to check if a hotkey string is valid and get warnings about potential platform issues:
+
+```ts
+import { validateHotkey } from '@tanstack/solid-hotkeys'
+
+const result = validateHotkey('Alt+A')
+// {
+//   valid: true,
+//   warnings: ['Alt+letter combinations may not work on macOS due to special characters'],
+//   errors: []
+// }
+
+const result2 = validateHotkey('InvalidKey+S')
+// {
+//   valid: false,
+//   warnings: [],
+//   errors: ['Unknown key: InvalidKey']
+// }
+```
+
diff --git a/mintlify/hotkeys/framework/solid/guides/hotkey-recording.md b/mintlify/hotkeys/framework/solid/guides/hotkey-recording.md
new file mode 100644
index 000000000..876deac08
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/hotkey-recording.md
@@ -0,0 +1,180 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `createHotkeyRecorder` primitive for building keyboard shortcut customization UIs. This lets users record their own shortcuts by pressing the desired key combination, similar to how system preferences or IDE shortcut editors work.
+
+## Basic Usage
+
+```tsx
+import { createHotkeyRecorder, formatForDisplay } from '@tanstack/solid-hotkeys'
+
+function ShortcutRecorder() {
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      console.log('Recorded:', hotkey) // e.g., "Mod+Shift+S"
+    },
+  })
+
+  return (
+    <div>
+      <button onClick={() => recorder.isRecording() ? recorder.stopRecording() : recorder.startRecording()}>
+        {recorder.isRecording()
+          ? 'Press a key combination...'
+          : recorder.recordedHotkey()
+            ? formatForDisplay(recorder.recordedHotkey()!)
+            : 'Click to record'}
+      </button>
+      <Show when={recorder.isRecording()}>
+        <button onClick={recorder.cancelRecording}>Cancel</button>
+      </Show>
+    </div>
+  )
+}
+```
+
+> [!NOTE]
+> In Solid, `isRecording` and `recordedHotkey` are **accessors** (signal getters). You must call them with `()` to read the value: `recorder.isRecording()`, `recorder.recordedHotkey()`.
+
+## Return Value
+
+The `createHotkeyRecorder` primitive returns an object with:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `() => boolean` | Accessor returning whether the recorder is currently listening |
+| `recordedHotkey` | `() => Hotkey \| null` | Accessor returning the last recorded hotkey, or `null` |
+| `startRecording` | `() => void` | Start listening for key presses |
+| `stopRecording` | `() => void` | Stop listening and keep the recorded hotkey |
+| `cancelRecording` | `() => void` | Stop listening and discard any recorded hotkey |
+
+## Options
+
+```tsx
+createHotkeyRecorder({
+  onRecord: (hotkey) => { /* called when a hotkey is recorded */ },
+  onCancel: () => { /* called when recording is cancelled */ },
+  onClear: () => { /* called when the recorded hotkey is cleared */ },
+})
+```
+
+Options can also be passed as an accessor function for reactive configuration.
+
+### `onRecord`
+
+Called when the user presses a valid key combination. Receives the recorded `Hotkey` string.
+
+### `onCancel`
+
+Called when recording is cancelled (Escape or `cancelRecording()`).
+
+### `onClear`
+
+Called when the recorded hotkey is cleared (Backspace or Delete during recording).
+
+### Global Default Options via Provider
+
+```tsx
+import { HotkeysProvider } from '@tanstack/solid-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeyRecorder: {
+      onCancel: () => console.log('Recording cancelled'),
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Recording Behavior
+
+| Key | Behavior |
+|-----|----------|
+| **Modifier only** | Waits for a non-modifier key |
+| **Modifier + key** | Records the full combination |
+| **Single key** | Records the single key |
+| **Escape** | Cancels the recording |
+| **Backspace / Delete** | Clears the currently recorded hotkey |
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```tsx
+createHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+### Mod Auto-Conversion
+
+Recorded hotkeys automatically use the portable `Mod` format (Command on Mac, Control elsewhere).
+
+## Building a Shortcut Settings UI
+
+```tsx
+import { createSignal } from 'solid-js'
+import {
+  createHotkey,
+  createHotkeyRecorder,
+  formatForDisplay,
+} from '@tanstack/solid-hotkeys'
+import type { Hotkey } from '@tanstack/solid-hotkeys'
+
+function ShortcutSettings() {
+  const [shortcuts, setShortcuts] = createSignal<Record<string, Hotkey>>({
+    save: 'Mod+S',
+    undo: 'Mod+Z',
+    search: 'Mod+K',
+  })
+
+  const [editingAction, setEditingAction] = createSignal<string | null>(null)
+
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      const action = editingAction()
+      if (action) {
+        setShortcuts((prev) => ({ ...prev, [action]: hotkey }))
+        setEditingAction(null)
+      }
+    },
+    onCancel: () => setEditingAction(null),
+  })
+
+  // Register the actual hotkeys with their current bindings
+  createHotkey(() => shortcuts().save, () => save())
+  createHotkey(() => shortcuts().undo, () => undo())
+  createHotkey(() => shortcuts().search, () => openSearch())
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      <For each={Object.entries(shortcuts())}>
+        {([action, hotkey]) => (
+          <div>
+            <span>{action}</span>
+            <button
+              onClick={() => {
+                setEditingAction(action)
+                recorder.startRecording()
+              }}
+            >
+              {editingAction() === action && recorder.isRecording()
+                ? 'Press keys...'
+                : formatForDisplay(hotkey)}
+            </button>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+```
+
+## Under the Hood
+
+The `createHotkeyRecorder` primitive creates a `HotkeyRecorder` class instance and subscribes to its reactive state via `@tanstack/solid-store`. The class manages its own keyboard event listeners and state, and the primitive handles cleanup when the component is disposed.
diff --git a/mintlify/hotkeys/framework/solid/guides/hotkeys.md b/mintlify/hotkeys/framework/solid/guides/hotkeys.md
new file mode 100644
index 000000000..6ceca5504
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/hotkeys.md
@@ -0,0 +1,360 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `createHotkey` primitive is the primary way to register keyboard shortcuts in SolidJS applications. It wraps the singleton `HotkeyManager` with automatic lifecycle management and reactive option support.
+
+## Basic Usage
+
+```tsx
+import { createHotkey } from '@tanstack/solid-hotkeys'
+
+function App() {
+  createHotkey('Mod+S', () => {
+    saveDocument()
+  }, {
+    // override the default options here
+  })
+}
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```tsx
+createHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)       // 'Mod+S'
+  console.log(context.parsedHotkey) // { key: 'S', ctrl: false, shift: false, alt: false, meta: true, modifiers: ['Meta'] }
+})
+```
+
+You can pass a hotkey as a string or as a `RawHotkey` object (modifier booleans optional). Use `mod` for cross-platform shortcuts (Command on Mac, Control elsewhere):
+
+```tsx
+createHotkey('Mod+S', () => save())
+createHotkey({ key: 'S', mod: true }, () => save())           // Same as above
+createHotkey({ key: 'Escape' }, () => closeModal())
+createHotkey({ key: 'S', ctrl: true, shift: true }, () => saveAs())
+createHotkey({ key: 'S', mod: true, shift: true }, () => saveAs())
+```
+
+## Reactive Options
+
+Unlike React/Preact hooks, Solid primitives accept **accessor functions** for reactive options. Pass a function that returns the options object to have the hotkey automatically update when dependencies change:
+
+```tsx
+function Modal(props) {
+  createHotkey('Escape', () => props.onClose(), () => ({
+    enabled: props.isOpen,
+  }))
+
+  return (
+    <Show when={props.isOpen}>
+      <div class="modal">...</div>
+    </Show>
+  )
+}
+```
+
+For scoped targets, use an accessor so the hotkey waits for the element to be attached:
+
+```tsx
+function Editor() {
+  const [editorRef, setEditorRef] = createSignal<HTMLDivElement | null>(null)
+
+  createHotkey('Mod+S', save, () => ({ target: editorRef() }))
+
+  return <div ref={setEditorRef}>...</div>
+}
+```
+
+## Default Options
+
+When you register a hotkey without passing options, or when you omit specific options, the following defaults apply:
+
+```tsx
+createHotkey('Mod+S', callback, {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined, // smart default: false for Mod+S, true for single keys
+  target: document,
+  platform: undefined, // auto-detected
+  conflictBehavior: 'warn',
+})
+```
+
+### Why These Defaults?
+
+Most hotkey registrations are intended to override default browser behavior—such as using `Mod+S` to save a document instead of showing the browser's "Save Page" dialog. To make this easy and consistent, the library sets `preventDefault` and `stopPropagation` to `true` by default, ensuring your hotkey handlers take precedence and reducing the amount of repetitive boilerplate code required.
+
+#### Smart Input Handling: `ignoreInputs`
+
+The `ignoreInputs` option is designed to strike a balance between accessibility and usability. By default, hotkeys involving `Ctrl`/`Meta` modifiers (like `Mod+S`) and the `Escape` key are allowed to fire even when the focus is inside input elements (such as text fields or text areas), and when focused on button-type inputs (`type="button"`, `"submit"`, or `"reset"`). This allows shortcuts like save or close to work wherever the user is focused. On the other hand, single key shortcuts or those using only `Shift`/`Alt` are ignored within non-button inputs to prevent interference with normal typing.
+
+#### Hotkey Conflicts: `conflictBehavior`
+
+When you attempt to register a hotkey that is already registered (possibly in another part of your app), the library logs a warning by default using the `conflictBehavior: 'warn'` setting. This helps you catch accidental duplicate bindings during development so they can be resolved before reaching production.
+
+### Global Default Options via Provider
+
+You can change the default options for all `createHotkey` calls in your app by wrapping your component tree with `HotkeysProvider`. Per-primitive options will override the provider defaults.
+
+```tsx
+import { HotkeysProvider } from '@tanstack/solid-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkey: { preventDefault: false, ignoreInputs: false },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+## Hotkey Options
+
+### `enabled`
+
+Controls whether the hotkey is active. Defaults to `true`. Use an accessor for reactive control.
+
+Disabled hotkeys **remain registered** in the manager and stay visible in devtools; only execution is suppressed.
+
+```tsx
+const [isEditing, setIsEditing] = createSignal(false)
+
+createHotkey('Mod+S', () => save(), () => ({ enabled: isEditing() }))
+```
+
+### `preventDefault`
+
+Automatically calls `event.preventDefault()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+createHotkey('Mod+S', () => save())
+createHotkey('Mod+S', () => save(), { preventDefault: false })
+```
+
+### `stopPropagation`
+
+Calls `event.stopPropagation()` when the hotkey fires. Defaults to `true`.
+
+```tsx
+createHotkey('Escape', () => closeModal())
+createHotkey('Escape', () => closeModal(), { stopPropagation: false })
+```
+
+### `eventType`
+
+Whether to listen on `keydown` (default) or `keyup`.
+
+```tsx
+createHotkey('Shift', () => deactivateMode(), { eventType: 'keyup' })
+```
+
+### `requireReset`
+
+When `true`, the hotkey will only fire once per key press. The key must be released and pressed again to fire again. Defaults to `false`.
+
+```tsx
+createHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+When `true`, the hotkey will not fire when the user is focused on a text input, textarea, select, or contentEditable element. When unset, a smart default applies based on the hotkey type.
+
+```tsx
+createHotkey('K', () => openSearch())  // Smart default: ignored in inputs
+createHotkey('Mod+S', () => save())   // Smart default: fires in inputs
+createHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+### `target`
+
+The DOM element to attach the event listener to. Defaults to `document`. Can be a DOM element, `document`, `window`, or from an accessor for reactive targets.
+
+```tsx
+const [panelRef, setPanelRef] = createSignal<HTMLDivElement | null>(null)
+
+createHotkey('Escape', () => closePanel(), () => ({ target: panelRef() }))
+
+return <div ref={setPanelRef} tabIndex={0}>...</div>
+```
+
+> [!NOTE]
+> When using an accessor for the target, the primitive waits for the element to be available before registering. Ensure the element is focusable (has `tabIndex`) so it can receive keyboard events.
+
+### `conflictBehavior`
+
+Controls what happens when you register a hotkey that's already registered. Options: `'warn'`, `'error'`, `'replace'`, `'allow'`.
+
+```tsx
+createHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+Override the auto-detected platform.
+
+```tsx
+createHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Automatic Dependency Tracking
+
+Solid's fine-grained reactivity means `createHotkey` automatically tracks reactive dependencies. The callback always has access to the latest signal values:
+
+```tsx
+function Counter() {
+  const [count, setCount] = createSignal(0)
+
+  createHotkey('Mod+Shift+C', () => {
+    console.log('Current count:', count())
+  })
+
+  return <button onClick={() => setCount(c => c + 1)}>Count: {count()}</button>
+}
+```
+
+## Automatic Cleanup
+
+The primitive automatically unregisters the hotkey when the component unmounts (when the owning reactive scope is disposed):
+
+```tsx
+function TemporaryPanel() {
+  createHotkey('Escape', () => closePanel())
+  return <div>Panel content</div>
+}
+```
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use the `createHotkeys` (plural) primitive:
+
+```tsx
+import { createHotkeys } from '@tanstack/solid-hotkeys'
+
+function Editor() {
+  createHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```tsx
+createHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Pass an accessor for reactive arrays:
+
+```tsx
+function MenuShortcuts(props) {
+  createHotkeys(
+    () => props.items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+  )
+}
+```
+
+The primitive tracks dependencies automatically and diffs registrations when the array changes.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```tsx
+createHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```tsx
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+createHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `createHotkeyRegistrations` primitive to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```tsx
+import { createHotkeyRegistrations } from '@tanstack/solid-hotkeys'
+
+function ShortcutPalette() {
+  const registrations = createHotkeyRegistrations()
+
+  return (
+    <div>
+      <h2>Keyboard Shortcuts</h2>
+      <ul>
+        <For each={registrations().hotkeys}>
+          {(reg) => (
+            <li>
+              <kbd>{reg.hotkey}</kbd>
+              {reg.meta?.name && <span> — {reg.meta.name}</span>}
+              {reg.meta?.description && <p>{reg.meta.description}</p>}
+            </li>
+          )}
+        </For>
+      </ul>
+      <Show when={registrations().sequences.length > 0}>
+        <h2>Sequences</h2>
+        <ul>
+          <For each={registrations().sequences}>
+            {(reg) => (
+              <li>
+                <kbd>{reg.sequence.join(' → ')}</kbd>
+                {reg.meta?.name && <span> — {reg.meta.name}</span>}
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </div>
+  )
+}
+```
+
+The returned accessor provides an object with a `hotkeys` array containing registration objects with the hotkey string, options (including `meta`), and enabled state, and a `sequences` array containing sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+Under the hood, `createHotkey` uses the singleton `HotkeyManager`. You can also access the manager directly if needed:
+
+```tsx
+import { getHotkeyManager } from '@tanstack/solid-hotkeys'
+
+const manager = getHotkeyManager()
+manager.isRegistered('Mod+S')
+manager.getRegistrationCount()
+```
diff --git a/mintlify/hotkeys/framework/solid/guides/key-state-tracking.md b/mintlify/hotkeys/framework/solid/guides/key-state-tracking.md
new file mode 100644
index 000000000..4dd19ae36
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/key-state-tracking.md
@@ -0,0 +1,191 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three primitives for tracking the real-time state of keyboard keys. These are useful for building UIs that respond to modifier keys being held, displaying active key states, or implementing hold-to-activate features.
+
+## `createHeldKeys`
+
+Returns an accessor that yields an array of all currently held key names.
+
+```tsx
+import { createHeldKeys } from '@tanstack/solid-hotkeys'
+
+function KeyDisplay() {
+  const heldKeys = createHeldKeys()
+
+  return (
+    <div>
+      {heldKeys().length > 0
+        ? `Held: ${heldKeys().join(' + ')}`
+        : 'No keys held'}
+    </div>
+  )
+}
+```
+
+> [!NOTE]
+> In Solid, `createHeldKeys()` returns an **accessor function**. Call it with `()` to read the current value: `heldKeys()`.
+
+The returned array contains key names like `'Shift'`, `'Control'`, `'Meta'`, `'A'`, `'ArrowUp'`, etc. Keys appear in the order they were pressed.
+
+## `createHeldKeyCodes`
+
+Returns an accessor that yields a reactive object mapping held key names to their physical key codes (`event.code` values). Useful for distinguishing between left and right modifiers.
+
+```tsx
+import { createHeldKeyCodes } from '@tanstack/solid-hotkeys'
+
+function KeyCodeDisplay() {
+  const heldCodes = createHeldKeyCodes()
+  // Example: { Shift: "ShiftLeft", Control: "ControlRight" }
+
+  return (
+    <div>
+      <For each={Object.entries(heldCodes())}>
+        {([key, code]) => (
+          <div>
+            {key}: {code}
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+```
+
+## `createKeyHold`
+
+Returns an accessor that indicates whether a specific key is currently held. Optimized to only trigger updates when the specified key's held state changes. The `key` argument can be a string or an accessor for reactive keys.
+
+```tsx
+import { createKeyHold } from '@tanstack/solid-hotkeys'
+
+function ModifierIndicators() {
+  const isShiftHeld = createKeyHold('Shift')
+  const isCtrlHeld = createKeyHold('Control')
+  const isAltHeld = createKeyHold('Alt')
+  const isMetaHeld = createKeyHold('Meta')
+
+  return (
+    <div class="modifier-bar">
+      <span classList={{ active: isShiftHeld() }}>Shift</span>
+      <span classList={{ active: isCtrlHeld() }}>Ctrl</span>
+      <span classList={{ active: isAltHeld() }}>Alt</span>
+      <span classList={{ active: isMetaHeld() }}>Meta</span>
+    </div>
+  )
+}
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+```tsx
+import { createKeyHold } from '@tanstack/solid-hotkeys'
+
+function FileItem(props: { file: File }) {
+  const isShiftHeld = createKeyHold('Shift')
+
+  return (
+    <div class="file-item">
+      <span>{props.file.name}</span>
+      <Show when={isShiftHeld()}>
+        <button class="danger" onClick={() => permanentlyDelete(props.file)}>
+          Permanently Delete
+        </button>
+      </Show>
+      <Show when={!isShiftHeld()}>
+        <button onClick={() => moveToTrash(props.file)}>
+          Move to Trash
+        </button>
+      </Show>
+    </div>
+  )
+}
+```
+
+### Keyboard Shortcut Hints
+
+```tsx
+import { createKeyHold } from '@tanstack/solid-hotkeys'
+
+function ShortcutHints() {
+  const isModHeld = createKeyHold('Meta')
+
+  return (
+    <Show when={isModHeld()}>
+      <div class="shortcut-overlay">
+        <div>S - Save</div>
+        <div>Z - Undo</div>
+        <div>Shift+Z - Redo</div>
+        <div>K - Command Palette</div>
+      </div>
+    </Show>
+  )
+}
+```
+
+### Debugging Key Display
+
+```tsx
+import {
+  createHeldKeys,
+  createHeldKeyCodes,
+  formatForDisplay,
+  type RegisterableHotkey,
+} from '@tanstack/solid-hotkeys'
+
+function KeyDebugger() {
+  const heldKeys = createHeldKeys()
+  const heldCodes = createHeldKeyCodes()
+
+  return (
+    <div class="key-debugger">
+      <h3>Active Keys</h3>
+      <For each={heldKeys()}>
+        {(key) => (
+          <div>
+            <strong>
+              {formatForDisplay(key as RegisterableHotkey, { useSymbols: true })}
+            </strong>
+            <span class="code">{heldCodes()[key]}</span>
+          </div>
+        )}
+      </For>
+      <Show when={heldKeys().length === 0}>
+        <p>Press any key...</p>
+      </Show>
+    </div>
+  )
+}
+```
+
+## Platform Quirks
+
+The underlying `KeyStateTracker` handles several platform-specific issues:
+
+### macOS Modifier Key Behavior
+
+On macOS, when a modifier key is held and a non-modifier key is pressed, the OS sometimes swallows the `keyup` event. TanStack Hotkeys detects and handles this automatically.
+
+### Window Blur
+
+When the browser window loses focus, all held keys are automatically cleared.
+
+## Under the Hood
+
+All three primitives subscribe to the singleton `KeyStateTracker` via `@tanstack/solid-store`. The tracker manages its own event listeners on `document` and maintains state in a TanStack Store.
+
+```tsx
+import { getKeyStateTracker } from '@tanstack/solid-hotkeys'
+
+const tracker = getKeyStateTracker()
+
+tracker.getHeldKeys()        // string[]
+tracker.isKeyHeld('Shift')   // boolean
+tracker.isAnyKeyHeld(['Shift', 'Control']) // boolean
+tracker.areAllKeysHeld(['Shift', 'Control']) // boolean
+```
diff --git a/mintlify/hotkeys/framework/solid/guides/sequence-recording.md b/mintlify/hotkeys/framework/solid/guides/sequence-recording.md
new file mode 100644
index 000000000..d1c3ae565
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/sequence-recording.md
@@ -0,0 +1,12 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+Use `createHotkeySequenceRecorder` from `@tanstack/solid-hotkeys` to record multi-chord sequences. API mirrors `createHotkeyRecorder`: accessors `isRecording`, `steps`, `recordedSequence`, plus `startRecording`, `stopRecording`, `cancelRecording`, `commitRecording`.
+
+Options and keyboard behavior are the same as the core `HotkeySequenceRecorder` class (`commitKeys`, `commitOnEnter`, `idleTimeoutMs`, Enter / Escape / Backspace). Set provider defaults with `HotkeysProvider` `defaultOptions.hotkeySequenceRecorder`.
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
diff --git a/mintlify/hotkeys/framework/solid/guides/sequences.md b/mintlify/hotkeys/framework/solid/guides/sequences.md
new file mode 100644
index 000000000..6bea3c9ca
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/guides/sequences.md
@@ -0,0 +1,214 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences -- shortcuts where you press keys one after another rather than simultaneously. This is commonly used for Vim-style navigation, cheat codes, or multi-step commands.
+
+## Basic Usage
+
+Use the `createHotkeySequence` primitive to register a key sequence:
+
+```tsx
+import { createHotkeySequence } from '@tanstack/solid-hotkeys'
+
+function App() {
+  // Vim-style: press g then g to scroll to top
+  createHotkeySequence(['G', 'G'], () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  })
+}
+```
+
+The first argument is an array of `Hotkey` strings representing each step in the sequence. The user must press them in order within the timeout window.
+
+## Many sequences at once
+
+For several sequences or a **dynamic** list, use `createHotkeySequences` instead of many `createHotkeySequence` calls. Pass a plain array or an accessor that returns definitions.
+
+```tsx
+import { createHotkeySequences } from '@tanstack/solid-hotkeys'
+
+createHotkeySequences([
+  { sequence: ['G', 'G'], callback: () => scrollToTop() },
+  { sequence: ['D', 'D'], callback: () => deleteLine(), options: { timeout: 500 } },
+])
+```
+
+Options merge like `createHotkeys`: `HotkeysProvider` defaults, then `commonOptions`, then each definition’s `options`. For element-scoped multi-sequence registration, use `createHotkeySequencesAttachment`.
+
+## Reactive Options
+
+Solid's `createHotkeySequence` accepts **accessor functions** for reactive sequence and options:
+
+```tsx
+const [isVimMode, setIsVimMode] = createSignal(true)
+const [sequence] = createSignal(['G', 'G'] as const)
+
+createHotkeySequence(
+  sequence,
+  () => scrollToTop(),
+  () => ({ enabled: isVimMode(), timeout: 1500 }),
+)
+```
+
+## Sequence Options
+
+The third argument is an options object (or accessor returning options):
+
+```tsx
+createHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,  // Time allowed between keys (ms)
+  enabled: true,  // Whether the sequence is active
+  target: document, // Or from an accessor for scoped sequences
+})
+```
+
+### `timeout`
+
+The maximum time (in milliseconds) allowed between consecutive key presses. Defaults to `1000` (1 second).
+
+```tsx
+createHotkeySequence(['D', 'D'], () => deleteLine(), { timeout: 500 })
+createHotkeySequence(['Shift+Z', 'Shift+Z'], () => forceQuit(), { timeout: 2000 })
+```
+
+### `enabled`
+
+Controls whether the sequence is active. Defaults to `true`. Use an accessor for reactive control.
+
+Disabled sequences **remain registered** and stay visible in devtools; only execution is suppressed.
+
+```tsx
+const [isVimMode, setIsVimMode] = createSignal(true)
+
+createHotkeySequence(['G', 'G'], () => scrollToTop(), () => ({
+  enabled: isVimMode(),
+}))
+```
+
+### `target`
+
+The DOM element to attach the sequence listener to. Defaults to `document`. Can be from an accessor when the target becomes available after mount.
+
+### Global Default Options via Provider
+
+```tsx
+import { HotkeysProvider } from '@tanstack/solid-hotkeys'
+
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequence: { timeout: 1500 },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```tsx
+createHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/solid/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Sequences with Modifiers
+
+Each step in a sequence can include modifiers:
+
+```tsx
+createHotkeySequence(['Mod+K', 'Mod+C'], () => commentSelection())
+createHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+```
+
+## Chained modifier chords
+
+You can repeat the same modifier across consecutive steps—for example `Shift+R` then `Shift+T`:
+
+```tsx
+createHotkeySequence(['Shift+R', 'Shift+T'], () => {
+  doNextAction()
+})
+```
+
+### Modifier-only keys between steps
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone, with no letter or other key) are ignored. They do not advance the sequence and they do **not** reset progress, so a user can tap or hold Shift between chords without breaking the sequence.
+
+## Common Sequence Patterns
+
+### Vim-Style Navigation
+
+```tsx
+function VimNavigation() {
+  createHotkeySequence(['G', 'G'], () => scrollToTop())
+  createHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+  createHotkeySequence(['D', 'D'], () => deleteLine())
+  createHotkeySequence(['D', 'W'], () => deleteWord())
+  createHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+}
+```
+
+### Konami Code
+
+```tsx
+createHotkeySequence(
+  [
+    'ArrowUp', 'ArrowUp',
+    'ArrowDown', 'ArrowDown',
+    'ArrowLeft', 'ArrowRight',
+    'ArrowLeft', 'ArrowRight',
+    'B', 'A',
+  ],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+### Multi-Step Commands
+
+```tsx
+createHotkeySequence(['H', 'E', 'L', 'P'], () => openHelp())
+```
+
+## How Sequences Work
+
+The `SequenceManager` (singleton) handles all sequence registrations. When a key is pressed:
+
+1. It checks if the key matches the next expected step in any registered sequence
+2. If it matches, the sequence advances to the next step
+3. If the timeout expires between steps, the sequence resets
+4. When all steps are completed, the callback fires
+5. Modifier-only keydowns are ignored (they neither advance nor reset the sequence)
+
+### Overlapping Sequences
+
+Multiple sequences can share the same prefix. The manager tracks progress for each sequence independently:
+
+```tsx
+createHotkeySequence(['D', 'D'], () => deleteLine())
+createHotkeySequence(['D', 'W'], () => deleteWord())
+createHotkeySequence(['D', 'I', 'W'], () => deleteInnerWord())
+```
+
+## The Sequence Manager
+
+Under the hood, `createHotkeySequence` uses the singleton `SequenceManager`. You can also use the core `createSequenceMatcher` function for standalone sequence matching:
+
+```tsx
+import { createSequenceMatcher } from '@tanstack/solid-hotkeys'
+
+const matcher = createSequenceMatcher(['G', 'G'], { timeout: 1000 })
+
+document.addEventListener('keydown', (e) => {
+  if (matcher.match(e)) {
+    console.log('Sequence completed!')
+  }
+  console.log('Progress:', matcher.getProgress())
+})
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeyCodes.md b/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeyCodes.md
new file mode 100644
index 000000000..226df49ac
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeyCodes.md
@@ -0,0 +1,53 @@
+---
+id: createHeldKeyCodes
+title: createHeldKeyCodes
+---
+
+# Function: createHeldKeyCodes()
+
+```ts
+function createHeldKeyCodes(): () => Record<string, string>;
+```
+
+Defined in: [createHeldKeyCodes.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHeldKeyCodes.ts#L35)
+
+SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.
+
+This is useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
+to the global KeyStateTracker.
+
+## Returns
+
+Signal accessor for record mapping normalized key names to their `event.code` values
+
+```ts
+(): Record<string, string>;
+```
+
+### Returns
+
+`Record`\&lt;`string`, `string`\>
+
+## Example
+
+```tsx
+function KeyDebugDisplay() {
+  const heldKeys = createHeldKeys()
+  const heldCodes = createHeldKeyCodes()
+
+  return (
+    <div>
+      <For each={heldKeys()}>
+        {(key) => (
+          <kbd>
+            {key} <small>{heldCodes()[key]}</small>
+          </kbd>
+        )}
+      </For>
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeys.md b/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeys.md
new file mode 100644
index 000000000..bd4bcfd86
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHeldKeys.md
@@ -0,0 +1,44 @@
+---
+id: createHeldKeys
+title: createHeldKeys
+---
+
+# Function: createHeldKeys()
+
+```ts
+function createHeldKeys(): () => string[];
+```
+
+Defined in: [createHeldKeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHeldKeys.ts#L26)
+
+SolidJS primitive that returns a signal of currently held keyboard keys.
+
+This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
+to the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Returns
+
+Signal accessor for array of currently held key names
+
+```ts
+(): string[];
+```
+
+### Returns
+
+`string`[]
+
+## Example
+
+```tsx
+function KeyDisplay() {
+  const heldKeys = createHeldKeys()
+
+  return (
+    <div>
+      Currently pressed: {heldKeys().join(' + ') || 'None'}
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkey.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkey.md
new file mode 100644
index 000000000..c6a6ddc1e
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkey.md
@@ -0,0 +1,88 @@
+---
+id: createHotkey
+title: createHotkey
+---
+
+# Function: createHotkey()
+
+```ts
+function createHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [createHotkey.ts:82](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkey.ts#L82)
+
+SolidJS primitive for registering a keyboard hotkey.
+
+Uses the singleton HotkeyManager for efficient event handling.
+The callback receives both the keyboard event and a context object
+containing the hotkey string and parsed hotkey.
+
+This primitive automatically tracks reactive dependencies and updates
+the registration when options or the callback change.
+
+## Parameters
+
+### hotkey
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
+
+`RegisterableHotkey` | () => `RegisterableHotkey`
+
+### callback
+
+`HotkeyCallback`
+
+The function to call when the hotkey is pressed
+
+### options
+
+Options for the hotkey behavior
+
+[`CreateHotkeyOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions) | () => [`CreateHotkeyOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions)
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function SaveButton() {
+  const [count, setCount] = createSignal(0)
+
+  // Callback always has access to latest count value
+  createHotkey('Mod+S', (event, { hotkey }) => {
+    console.log(`Save triggered, count is ${count()}`)
+    handleSave()
+  })
+
+  return <button onClick={() => setCount(c => c + 1)}>Count: {count()}</button>
+}
+```
+
+```tsx
+function Modal(props) {
+  // enabled option is reactive
+  createHotkey('Escape', () => {
+    props.onClose()
+  }, () => ({ enabled: props.isOpen }))
+
+  return <Show when={props.isOpen}>
+    <div class="modal">...</div>
+  </Show>
+}
+```
+
+```tsx
+function Editor() {
+  const [editorRef, setEditorRef] = createSignal<HTMLDivElement | null>(null)
+
+  // Scoped to a specific element - use accessor so hotkey waits for ref
+  createHotkey('Mod+S', save, () => ({ target: editorRef() }))
+
+  return <div ref={setEditorRef}>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRecorder.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRecorder.md
new file mode 100644
index 000000000..d4542e1a6
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRecorder.md
@@ -0,0 +1,64 @@
+---
+id: createHotkeyRecorder
+title: createHotkeyRecorder
+---
+
+# Function: createHotkeyRecorder()
+
+```ts
+function createHotkeyRecorder(options): SolidHotkeyRecorder;
+```
+
+Defined in: [createHotkeyRecorder.ts:61](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L61)
+
+SolidJS primitive for recording keyboard shortcuts.
+
+This primitive provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+class, managing all the complexity of capturing keyboard events, converting them
+to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+to clear.
+
+This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
+to the recorder's store state (same pattern as useHotkeyRecorder in React).
+
+## Parameters
+
+### options
+
+Configuration options for the recorder (or accessor function)
+
+`HotkeyRecorderOptions` | () => `HotkeyRecorderOptions`
+
+## Returns
+
+[`SolidHotkeyRecorder`](/hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder)
+
+An object with recording state signals and control functions
+
+## Example
+
+```tsx
+function ShortcutSettings() {
+  const [shortcut, setShortcut] = createSignal<Hotkey>('Mod+S')
+
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      setShortcut(hotkey)
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  return (
+    <div>
+      <button onClick={recorder.startRecording}>
+        {recorder.isRecording() ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      <Show when={recorder.recordedHotkey()}>
+        <div>Recording: {recorder.recordedHotkey()}</div>
+      </Show>
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRegistrations.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRegistrations.md
new file mode 100644
index 000000000..67239b56f
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeyRegistrations.md
@@ -0,0 +1,25 @@
+---
+id: createHotkeyRegistrations
+title: createHotkeyRegistrations
+---
+
+# Function: createHotkeyRegistrations()
+
+```ts
+function createHotkeyRegistrations(): HotkeyRegistrationsResult;
+```
+
+Defined in: [createHotkeyRegistrations.ts:32](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRegistrations.ts#L32)
+
+Solid primitive that reactively reads all hotkey and sequence registrations
+from the singleton managers.
+
+This is a standalone primitive that does NOT require the HotkeysProvider.
+It subscribes to both HotkeyManager and SequenceManager stores and
+triggers reactivity when registrations change.
+
+## Returns
+
+[`HotkeyRegistrationsResult`](/hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult)
+
+Object with `hotkeys` and `sequences` signal accessors
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequence.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequence.md
new file mode 100644
index 000000000..ee5ba8714
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequence.md
@@ -0,0 +1,77 @@
+---
+id: createHotkeySequence
+title: createHotkeySequence
+---
+
+# Function: createHotkeySequence()
+
+```ts
+function createHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [createHotkeySequence.ts:64](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequence.ts#L64)
+
+SolidJS primitive for registering a keyboard shortcut sequence (Vim-style).
+
+This primitive allows you to register multi-key sequences like 'g g' or 'd d'
+that trigger when the full sequence is pressed within a timeout.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+Array of hotkey strings that form the sequence (or accessor function)
+
+`HotkeySequence` | () => `HotkeySequence`
+
+### callback
+
+`HotkeyCallback`
+
+Function to call when the sequence is completed
+
+### options
+
+Options for the sequence behavior (or accessor function)
+
+[`CreateHotkeySequenceOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions) | () => [`CreateHotkeySequenceOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions)
+
+## Returns
+
+`void`
+
+## Example
+
+```tsx
+function VimEditor() {
+  // 'g g' to go to top
+  createHotkeySequence(['G', 'G'], () => {
+    scrollToTop()
+  })
+
+  // 'd d' to delete line
+  createHotkeySequence(['D', 'D'], () => {
+    deleteLine()
+  })
+
+  // 'd i w' to delete inner word
+  createHotkeySequence(['D', 'I', 'W'], () => {
+    deleteInnerWord()
+  }, { timeout: 500 })
+
+  // Same modifier on consecutive steps (bare Shift between chords is ignored)
+  createHotkeySequence(['Shift+R', 'Shift+T'], () => {
+    nextAction()
+  })
+
+  return <div>...</div>
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequenceRecorder.md
new file mode 100644
index 000000000..519c15962
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequenceRecorder.md
@@ -0,0 +1,24 @@
+---
+id: createHotkeySequenceRecorder
+title: createHotkeySequenceRecorder
+---
+
+# Function: createHotkeySequenceRecorder()
+
+```ts
+function createHotkeySequenceRecorder(options): SolidHotkeySequenceRecorder;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L23)
+
+SolidJS primitive for recording multi-chord sequences (Vim-style shortcuts).
+
+## Parameters
+
+### options
+
+`HotkeySequenceRecorderOptions` | () => `HotkeySequenceRecorderOptions`
+
+## Returns
+
+[`SolidHotkeySequenceRecorder`](/hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequences.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequences.md
new file mode 100644
index 000000000..cd5c38139
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeySequences.md
@@ -0,0 +1,64 @@
+---
+id: createHotkeySequences
+title: createHotkeySequences
+---
+
+# Function: createHotkeySequences()
+
+```ts
+function createHotkeySequences(sequences, commonOptions): void;
+```
+
+Defined in: [createHotkeySequences.ts:61](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequences.ts#L61)
+
+SolidJS primitive for registering multiple keyboard shortcut sequences at once (Vim-style).
+
+Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or accessors,
+so you can react to variable-length lists.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Definitions with an empty `sequence` are skipped (no registration).
+
+## Parameters
+
+### sequences
+
+Array of sequence definitions, or accessor returning them
+
+[`CreateHotkeySequenceDefinition`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition)[] | () => [`CreateHotkeySequenceDefinition`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition)[]
+
+### commonOptions
+
+Shared options for all sequences, or accessor
+
+[`CreateHotkeySequenceOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions) | () => [`CreateHotkeySequenceOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions)
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function VimPalette() {
+  createHotkeySequences([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine() },
+  ])
+}
+```
+
+```tsx
+function Dynamic(props) {
+  createHotkeySequences(
+    () => props.items.map((item) => ({
+      sequence: item.chords,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createHotkeys.md b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeys.md
new file mode 100644
index 000000000..8ae6b2c54
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createHotkeys.md
@@ -0,0 +1,64 @@
+---
+id: createHotkeys
+title: createHotkeys
+---
+
+# Function: createHotkeys()
+
+```ts
+function createHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [createHotkeys.ts:66](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeys.ts#L66)
+
+SolidJS primitive for registering multiple keyboard hotkeys at once.
+
+Uses the singleton HotkeyManager for efficient event handling.
+Accepts a dynamic array of hotkey definitions, making it safe to use
+with variable-length lists.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+## Parameters
+
+### hotkeys
+
+Array of hotkey definitions, or accessor returning them
+
+[`CreateHotkeyDefinition`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition)[] | () => [`CreateHotkeyDefinition`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition)[]
+
+### commonOptions
+
+Shared options applied to all hotkeys, or accessor
+
+[`CreateHotkeyOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions) | () => [`CreateHotkeyOptions`](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions)
+
+## Returns
+
+`void`
+
+## Examples
+
+```tsx
+function Editor() {
+  createHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+}
+```
+
+```tsx
+function MenuShortcuts(props) {
+  createHotkeys(
+    () => props.items.map((item) => ({
+      hotkey: item.shortcut,
+      callback: item.action,
+      options: { enabled: item.enabled },
+    })),
+    { preventDefault: true },
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/createKeyHold.md b/mintlify/hotkeys/framework/solid/reference/functions/createKeyHold.md
new file mode 100644
index 000000000..380ed74fe
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/createKeyHold.md
@@ -0,0 +1,68 @@
+---
+id: createKeyHold
+title: createKeyHold
+---
+
+# Function: createKeyHold()
+
+```ts
+function createKeyHold(key): () => boolean;
+```
+
+Defined in: [createKeyHold.ts:46](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createKeyHold.ts#L46)
+
+SolidJS primitive that returns whether a specific key is currently being held.
+
+This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
+to the global KeyStateTracker and uses a selector to determine if the
+specified key is held.
+
+## Parameters
+
+### key
+
+The key to check (e.g., 'Shift', 'Control', 'A') - can be an accessor function
+
+`IndividualKey` | () => `IndividualKey`
+
+## Returns
+
+Signal accessor that returns true if the key is currently held down
+
+```ts
+(): boolean;
+```
+
+### Returns
+
+`boolean`
+
+## Examples
+
+```tsx
+function ShiftIndicator() {
+  const isShiftHeld = createKeyHold('Shift')
+
+  return (
+    <div style={{ opacity: isShiftHeld() ? 1 : 0.5 }}>
+      {isShiftHeld() ? 'Shift is pressed!' : 'Press Shift'}
+    </div>
+  )
+}
+```
+
+```tsx
+function ModifierIndicators() {
+  const ctrl = createKeyHold('Control')
+  const shift = createKeyHold('Shift')
+  const alt = createKeyHold('Alt')
+
+  return (
+    <div>
+      <span style={{ opacity: ctrl() ? 1 : 0.3 }}>Ctrl</span>
+      <span style={{ opacity: shift() ? 1 : 0.3 }}>Shift</span>
+      <span style={{ opacity: alt() ? 1 : 0.3 }}>Alt</span>
+    </div>
+  )
+}
+```
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/useDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/solid/reference/functions/useDefaultHotkeysOptions.md
new file mode 100644
index 000000000..c65169a7c
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/useDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultHotkeysOptions
+title: useDefaultHotkeysOptions
+---
+
+# Function: useDefaultHotkeysOptions()
+
+```ts
+function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:48](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L48)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/solid/reference/functions/useHotkeysContext.md b/mintlify/hotkeys/framework/solid/reference/functions/useHotkeysContext.md
new file mode 100644
index 000000000..87c57f489
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/functions/useHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: useHotkeysContext
+title: useHotkeysContext
+---
+
+# Function: useHotkeysContext()
+
+```ts
+function useHotkeysContext(): HotkeysContextValue | null;
+```
+
+Defined in: [HotkeysProvider.tsx:44](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L44)
+
+## Returns
+
+`HotkeysContextValue` \| `null`
diff --git a/mintlify/hotkeys/framework/solid/reference/index.md b/mintlify/hotkeys/framework/solid/reference/index.md
new file mode 100644
index 000000000..f812dafb8
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/index.md
@@ -0,0 +1,37 @@
+---
+id: "@tanstack/solid-hotkeys"
+title: "@tanstack/solid-hotkeys"
+---
+
+# @tanstack/solid-hotkeys
+
+## Interfaces
+
+- [CreateHotkeyDefinition](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition)
+- [CreateHotkeyOptions](/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions)
+- [CreateHotkeySequenceDefinition](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition)
+- [CreateHotkeySequenceOptions](/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions)
+- [HotkeyRegistrationsResult](/hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult)
+- [HotkeysProviderOptions](/hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions)
+- [HotkeysProviderProps](/hotkeys/framework/solid/reference/interfaces/HotkeysProviderProps)
+- [SolidHotkeyRecorder](/hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder)
+- [SolidHotkeySequenceRecorder](/hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder)
+
+## Variables
+
+- [HotkeysProvider](/hotkeys/framework/solid/reference/variables/HotkeysProvider)
+
+## Functions
+
+- [createHeldKeyCodes](/hotkeys/framework/solid/reference/functions/createHeldKeyCodes)
+- [createHeldKeys](/hotkeys/framework/solid/reference/functions/createHeldKeys)
+- [createHotkey](/hotkeys/framework/solid/reference/functions/createHotkey)
+- [createHotkeyRecorder](/hotkeys/framework/solid/reference/functions/createHotkeyRecorder)
+- [createHotkeyRegistrations](/hotkeys/framework/solid/reference/functions/createHotkeyRegistrations)
+- [createHotkeys](/hotkeys/framework/solid/reference/functions/createHotkeys)
+- [createHotkeySequence](/hotkeys/framework/solid/reference/functions/createHotkeySequence)
+- [createHotkeySequenceRecorder](/hotkeys/framework/solid/reference/functions/createHotkeySequenceRecorder)
+- [createHotkeySequences](/hotkeys/framework/solid/reference/functions/createHotkeySequences)
+- [createKeyHold](/hotkeys/framework/solid/reference/functions/createKeyHold)
+- [useDefaultHotkeysOptions](/hotkeys/framework/solid/reference/functions/useDefaultHotkeysOptions)
+- [useHotkeysContext](/hotkeys/framework/solid/reference/functions/useHotkeysContext)
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition.md b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition.md
new file mode 100644
index 000000000..d3bcbaa57
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyDefinition.md
@@ -0,0 +1,46 @@
+---
+id: CreateHotkeyDefinition
+title: CreateHotkeyDefinition
+---
+
+# Interface: CreateHotkeyDefinition
+
+Defined in: [createHotkeys.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeys.ts#L19)
+
+A single hotkey definition for use with `createHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [createHotkeys.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeys.ts#L23)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: RegisterableHotkey;
+```
+
+Defined in: [createHotkeys.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeys.ts#L21)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: CreateHotkeyOptions;
+```
+
+Defined in: [createHotkeys.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeys.ts#L25)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions.md b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions.md
new file mode 100644
index 000000000..42b19b2b8
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeyOptions.md
@@ -0,0 +1,28 @@
+---
+id: CreateHotkeyOptions
+title: CreateHotkeyOptions
+---
+
+# Interface: CreateHotkeyOptions
+
+Defined in: [createHotkey.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkey.ts#L16)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [createHotkey.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkey.ts#L24)
+
+The DOM element to attach the event listener to.
+Can be a direct DOM element, an accessor (for reactive targets that become
+available after mount), or null. Defaults to document.
+When using scoped targets, pass an accessor: () => (&#123; target: elementSignal() &#125;)
+so the hotkey waits for the element to be attached before registering.
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition.md
new file mode 100644
index 000000000..d5d4ab664
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition.md
@@ -0,0 +1,46 @@
+---
+id: CreateHotkeySequenceDefinition
+title: CreateHotkeySequenceDefinition
+---
+
+# Interface: CreateHotkeySequenceDefinition
+
+Defined in: [createHotkeySequences.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequences.ts#L14)
+
+A single sequence definition for use with `createHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [createHotkeySequences.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequences.ts#L18)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: CreateHotkeySequenceOptions;
+```
+
+Defined in: [createHotkeySequences.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequences.ts#L20)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: HotkeySequence;
+```
+
+Defined in: [createHotkeySequences.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequences.ts#L16)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions.md b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions.md
new file mode 100644
index 000000000..03618e94d
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/CreateHotkeySequenceOptions.md
@@ -0,0 +1,25 @@
+---
+id: CreateHotkeySequenceOptions
+title: CreateHotkeySequenceOptions
+---
+
+# Interface: CreateHotkeySequenceOptions
+
+Defined in: [createHotkeySequence.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequence.ts#L11)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [createHotkeySequence.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequence.ts#L19)
+
+The DOM element to attach the event listener to.
+Can be a direct DOM element, an accessor, or null. Defaults to document.
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult.md b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult.md
new file mode 100644
index 000000000..48d89a610
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeyRegistrationsResult.md
@@ -0,0 +1,42 @@
+---
+id: HotkeyRegistrationsResult
+title: HotkeyRegistrationsResult
+---
+
+# Interface: HotkeyRegistrationsResult
+
+Defined in: [createHotkeyRegistrations.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRegistrations.ts#L15)
+
+Return type for createHotkeyRegistrations.
+
+## Properties
+
+### hotkeys()
+
+```ts
+hotkeys: () => HotkeyRegistrationView[];
+```
+
+Defined in: [createHotkeyRegistrations.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRegistrations.ts#L17)
+
+Accessor for all registered hotkeys (public view, no callbacks)
+
+#### Returns
+
+`HotkeyRegistrationView`[]
+
+***
+
+### sequences()
+
+```ts
+sequences: () => SequenceRegistrationView[];
+```
+
+Defined in: [createHotkeyRegistrations.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRegistrations.ts#L19)
+
+Accessor for all registered sequences
+
+#### Returns
+
+`SequenceRegistrationView`[]
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..c4d77c58c
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [HotkeysProvider.tsx:10](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L10)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<CreateHotkeyOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:11](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L11)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:12](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L12)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<CreateHotkeySequenceOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:14](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L14)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [HotkeysProvider.tsx:13](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L13)
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderProps.md b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderProps.md
new file mode 100644
index 000000000..d963098e9
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/HotkeysProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: HotkeysProviderProps
+title: HotkeysProviderProps
+---
+
+# Interface: HotkeysProviderProps
+
+Defined in: [HotkeysProvider.tsx:23](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L23)
+
+## Properties
+
+### children
+
+```ts
+children: Element;
+```
+
+Defined in: [HotkeysProvider.tsx:24](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L24)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: HotkeysProviderOptions;
+```
+
+Defined in: [HotkeysProvider.tsx:25](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L25)
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder.md b/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder.md
new file mode 100644
index 000000000..f16406339
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeyRecorder.md
@@ -0,0 +1,88 @@
+---
+id: SolidHotkeyRecorder
+title: SolidHotkeyRecorder
+---
+
+# Interface: SolidHotkeyRecorder
+
+Defined in: [createHotkeyRecorder.ts:7](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L7)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [createHotkeyRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L17)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording()
+
+```ts
+isRecording: () => boolean;
+```
+
+Defined in: [createHotkeyRecorder.ts:9](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L9)
+
+Whether recording is currently active
+
+#### Returns
+
+`boolean`
+
+***
+
+### recordedHotkey()
+
+```ts
+recordedHotkey: () => Hotkey | null;
+```
+
+Defined in: [createHotkeyRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L11)
+
+The currently recorded hotkey (for live preview)
+
+#### Returns
+
+`Hotkey` \| `null`
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [createHotkeyRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L13)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [createHotkeyRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L15)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder.md
new file mode 100644
index 000000000..7fcd15943
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/interfaces/SolidHotkeySequenceRecorder.md
@@ -0,0 +1,106 @@
+---
+id: SolidHotkeySequenceRecorder
+title: SolidHotkeySequenceRecorder
+---
+
+# Interface: SolidHotkeySequenceRecorder
+
+Defined in: [createHotkeySequenceRecorder.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L10)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L16)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording: () => void;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L17)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording()
+
+```ts
+isRecording: () => boolean;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L11)
+
+#### Returns
+
+`boolean`
+
+***
+
+### recordedSequence()
+
+```ts
+recordedSequence: () => HotkeySequence | null;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L13)
+
+#### Returns
+
+`HotkeySequence` \| `null`
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L14)
+
+#### Returns
+
+`void`
+
+***
+
+### steps()
+
+```ts
+steps: () => HotkeySequence;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L12)
+
+#### Returns
+
+`HotkeySequence`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [createHotkeySequenceRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequenceRecorder.ts#L15)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/solid/reference/variables/HotkeysProvider.md b/mintlify/hotkeys/framework/solid/reference/variables/HotkeysProvider.md
new file mode 100644
index 000000000..6a622bb80
--- /dev/null
+++ b/mintlify/hotkeys/framework/solid/reference/variables/HotkeysProvider.md
@@ -0,0 +1,12 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Variable: HotkeysProvider
+
+```ts
+const HotkeysProvider: ParentComponent<HotkeysProviderProps>;
+```
+
+Defined in: [HotkeysProvider.tsx:30](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/HotkeysProvider.tsx#L30)
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkey-recorder.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-recorder.md
new file mode 100644
index 000000000..a9caa4c00
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-recorder.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkey-recorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkey-recorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence-recorder.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence-recorder.md
new file mode 100644
index 000000000..850ede3f5
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence-recorder.md
@@ -0,0 +1,12 @@
+---
+title: "create-hotkey-sequence-recorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkey-sequence-recorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkey-sequence-recorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence.md
new file mode 100644
index 000000000..19e88bbca
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequence.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkey-sequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkey-sequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequences.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequences.md
new file mode 100644
index 000000000..8571809d5
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkey-sequences.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkey-sequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkey-sequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkey.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkey.md
new file mode 100644
index 000000000..567c88955
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkey.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/create-hotkeys.md b/mintlify/hotkeys/framework/svelte/examples/create-hotkeys.md
new file mode 100644
index 000000000..9b7b6f3fb
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/create-hotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "createHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/create-hotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/create-hotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/get-held-keys.md b/mintlify/hotkeys/framework/svelte/examples/get-held-keys.md
new file mode 100644
index 000000000..30693c05e
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/get-held-keys.md
@@ -0,0 +1,12 @@
+---
+title: "getHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/get-held-keys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/get-held-keys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/examples/get-is-key-held.md b/mintlify/hotkeys/framework/svelte/examples/get-is-key-held.md
new file mode 100644
index 000000000..656d52ff2
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/examples/get-is-key-held.md
@@ -0,0 +1,12 @@
+---
+title: "getIsKeyHeld"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/svelte/examples/get-is-key-held)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/svelte/get-is-key-held)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/svelte/guides/formatting-display.md b/mintlify/hotkeys/framework/svelte/guides/formatting-display.md
new file mode 100644
index 000000000..a63785d0a
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/formatting-display.md
@@ -0,0 +1,61 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys includes utilities for turning hotkey strings into display-friendly labels. These utilities are framework-agnostic, but they pair naturally with Svelte templates and reactive UI.
+
+## `formatForDisplay`
+
+```ts
+import { formatForDisplay } from '@tanstack/svelte-hotkeys'
+
+formatForDisplay('Mod+S')
+formatForDisplay('Mod+Shift+Z')
+```
+
+## `formatWithLabels`
+
+```ts
+import { formatWithLabels } from '@tanstack/svelte-hotkeys'
+
+formatWithLabels('Mod+S')
+formatWithLabels('Mod+Shift+Z')
+```
+
+## Using Formatted Hotkeys in Svelte
+
+### Keyboard Shortcut Badges
+
+```svelte
+<script lang="ts">
+  import { formatForDisplay } from '@tanstack/svelte-hotkeys'
+</script>
+
+<kbd class="shortcut-badge">{formatForDisplay(hotkey)}</kbd>
+```
+
+### Menu Items with Hotkeys
+
+```svelte
+<script lang="ts">
+  import { formatForDisplay, createHotkey } from '@tanstack/svelte-hotkeys'
+
+  let { label, hotkey, onAction } = $props()
+
+  createHotkey(hotkey, () => onAction())
+</script>
+
+<div class="menu-item">
+  <span>{label}</span>
+  <span class="menu-shortcut">{formatForDisplay(hotkey)}</span>
+</div>
+```
+
+## Validation
+
+```ts
+import { validateHotkey } from '@tanstack/svelte-hotkeys'
+
+const result = validateHotkey('Alt+A')
+```
diff --git a/mintlify/hotkeys/framework/svelte/guides/hotkey-recording.md b/mintlify/hotkeys/framework/svelte/guides/hotkey-recording.md
new file mode 100644
index 000000000..93069ad1a
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/hotkey-recording.md
@@ -0,0 +1,89 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `createHotkeyRecorder` function for building shortcut customization UIs in Svelte.
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+  import {
+    createHotkeyRecorder,
+    formatForDisplay,
+  } from '@tanstack/svelte-hotkeys'
+
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      console.log('Recorded:', hotkey)
+    },
+  })
+</script>
+
+<div>
+  <button onclick={recorder.startRecording}>
+    {recorder.isRecording
+      ? 'Press a key combination...'
+      : recorder.recordedHotkey
+        ? formatForDisplay(recorder.recordedHotkey)
+        : 'Click to record'}
+  </button>
+  {#if recorder.isRecording}
+    <button onclick={() => recorder.cancelRecording()}>Cancel</button>
+  {/if}
+</div>
+```
+
+## Return Value
+
+- `isRecording`: whether recording is active
+- `recordedHotkey`: the most recently recorded hotkey
+- `startRecording()`: start listening for key presses
+- `stopRecording()`: stop listening and keep the current recording
+- `cancelRecording()`: stop listening and discard the in-progress recording
+
+## Options
+
+```ts
+createHotkeyRecorder({
+  onRecord: (hotkey) => {},
+  onCancel: () => {},
+  onClear: () => {},
+})
+```
+
+Options can also be reactive:
+
+```svelte
+<script lang="ts">
+  import { createHotkeyRecorder } from '@tanstack/svelte-hotkeys'
+
+  let actionName = $state('Save')
+
+  const recorder = createHotkeyRecorder(() => ({
+    onRecord: (hotkey) => {
+      console.log(`${actionName}:`, hotkey)
+    },
+  }))
+</script>
+```
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```ts
+createHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+## Recording Behavior
+
+- Modifier-only presses do not complete a recording.
+- Modifier plus key combinations record the full shortcut.
+- Escape cancels recording.
+- Backspace and Delete clear the shortcut.
+- Recorded values are normalized to portable `Mod` format.
diff --git a/mintlify/hotkeys/framework/svelte/guides/hotkeys.md b/mintlify/hotkeys/framework/svelte/guides/hotkeys.md
new file mode 100644
index 000000000..512f4a99a
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/hotkeys.md
@@ -0,0 +1,275 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+Use `createHotkey` for global shortcuts and `createHotkeyAttachment` for element-scoped shortcuts. This keeps the common global case simple while making scoped behavior feel native to Svelte 5.
+
+## Global hotkeys
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  createHotkey('Mod+S', () => {
+    saveDocument()
+  })
+</script>
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```ts
+createHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)
+  console.log(context.parsedHotkey)
+})
+```
+
+## Scoped hotkeys
+
+Use attachments instead of capturing an element ref just to pass it back into the API.
+
+```svelte
+<script lang="ts">
+  import { createHotkeyAttachment } from '@tanstack/svelte-hotkeys'
+
+  const closePanel = createHotkeyAttachment('Escape', () => {
+    close()
+  })
+</script>
+
+<div tabindex="0" {@attach closePanel}>Panel content</div>
+```
+
+## Reactive inputs
+
+Hotkeys can take plain values for static registrations or getter functions when the hotkey or options depend on reactive state.
+
+### Reactive `enabled`
+
+When `enabled` is false, the hotkey **stays registered** (visible in devtools); only the callback is suppressed.
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  let isEditing = $state(false)
+
+  createHotkey(
+    'Mod+S',
+    () => save(),
+    () => ({ enabled: isEditing }),
+  )
+</script>
+```
+
+### Reactive hotkey values
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  let shortcut = $state('Mod+S')
+
+  createHotkey(
+    () => shortcut,
+    () => save(),
+  )
+</script>
+```
+
+## Default options
+
+Set defaults explicitly with `setHotkeysContext` when a subtree needs shared behavior:
+
+```svelte
+<script lang="ts">
+  import { setHotkeysContext } from '@tanstack/svelte-hotkeys'
+
+  setHotkeysContext({
+    hotkey: {
+      preventDefault: false,
+      ignoreInputs: false,
+    },
+  })
+</script>
+```
+
+## Common Options
+
+### `requireReset`
+
+```ts
+createHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+```ts
+createHotkey('K', () => openSearch())
+createHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+### `conflictBehavior`
+
+```ts
+createHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+```ts
+createHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Automatic Cleanup
+
+Global hotkeys are automatically unregistered when the owning component unmounts. Attachment-based hotkeys clean themselves up when the attached element is removed or when reactive inputs change.
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use `createHotkeys` (plural) for global shortcuts and `createHotkeysAttachment` for element-scoped shortcuts:
+
+```svelte
+<script lang="ts">
+  import { createHotkeys } from '@tanstack/svelte-hotkeys'
+
+  createHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+</script>
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```ts
+createHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Pass a getter for reactive arrays:
+
+```svelte
+<script lang="ts">
+  import { createHotkeys } from '@tanstack/svelte-hotkeys'
+
+  let shortcuts = $state([...])
+
+  createHotkeys(
+    () => shortcuts.map((s) => ({
+      hotkey: s.key,
+      callback: s.action,
+    })),
+  )
+</script>
+```
+
+### Scoped Multi-Hotkeys
+
+Use `createHotkeysAttachment` to scope multiple hotkeys to a specific element:
+
+```svelte
+<script lang="ts">
+  import { createHotkeysAttachment } from '@tanstack/svelte-hotkeys'
+
+  const editorKeys = createHotkeysAttachment([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+  ])
+</script>
+
+<div tabindex="0" {@attach editorKeys}>Editor content</div>
+```
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```ts
+createHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```ts
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+createHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `getHotkeyRegistrations` function to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```svelte
+<script lang="ts">
+  import { getHotkeyRegistrations } from '@tanstack/svelte-hotkeys'
+
+  const registrations = getHotkeyRegistrations()
+</script>
+
+<div>
+  <h2>Keyboard Shortcuts</h2>
+  <ul>
+    {#each registrations.hotkeys as reg (reg.hotkey)}
+      <li>
+        <kbd>{reg.hotkey}</kbd>
+        {#if reg.meta?.name}
+          <span> — {reg.meta.name}</span>
+        {/if}
+        {#if reg.meta?.description}
+          <p>{reg.meta.description}</p>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  {#if registrations.sequences.length > 0}
+    <h2>Sequences</h2>
+    <ul>
+      {#each registrations.sequences as reg (reg.sequence.join(' '))}
+        <li>
+          <kbd>{reg.sequence.join(' → ')}</kbd>
+          {#if reg.meta?.name}
+            <span> — {reg.meta.name}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+```
+
+The returned object contains a `hotkeys` array with registration objects including the hotkey string, options (including `meta`), and enabled state, and a `sequences` array containing sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+You can always reach for the underlying manager directly:
+
+```ts
+import { getHotkeyManager } from '@tanstack/svelte-hotkeys'
+
+const manager = getHotkeyManager()
+manager.isRegistered('Mod+S')
+manager.getRegistrationCount()
+```
diff --git a/mintlify/hotkeys/framework/svelte/guides/key-state-tracking.md b/mintlify/hotkeys/framework/svelte/guides/key-state-tracking.md
new file mode 100644
index 000000000..720871d86
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/key-state-tracking.md
@@ -0,0 +1,97 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three Svelte functions for tracking live keyboard state: `getHeldKeys`, `getHeldKeyCodesMap`, and `getIsKeyHeld`.
+
+## `getHeldKeys`
+
+```svelte
+<script lang="ts">
+  import { getHeldKeys } from '@tanstack/svelte-hotkeys'
+
+  const heldKeys = getHeldKeys()
+</script>
+
+<div>{heldKeys.keys.length > 0 ? heldKeys.keys.join(' + ') : 'No keys held'}</div>
+```
+
+## `getHeldKeyCodesMap`
+
+```svelte
+<script lang="ts">
+  import { getHeldKeyCodesMap } from '@tanstack/svelte-hotkeys'
+
+  const heldCodes = getHeldKeyCodesMap()
+</script>
+
+<pre>{JSON.stringify(heldCodes.codes, null, 2)}</pre>
+```
+
+## `getIsKeyHeld`
+
+```svelte
+<script lang="ts">
+  import { getIsKeyHeld } from '@tanstack/svelte-hotkeys'
+
+  const isShiftHeld = getIsKeyHeld('Shift')
+</script>
+
+<span class:active={isShiftHeld.held}>Shift</span>
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+```svelte
+<script lang="ts">
+  import { getIsKeyHeld } from '@tanstack/svelte-hotkeys'
+
+  const isShiftHeld = getIsKeyHeld('Shift')
+</script>
+
+{#if isShiftHeld.held}
+  <button>Permanently Delete</button>
+{:else}
+  <button>Move to Trash</button>
+{/if}
+```
+
+### Debugging Key Display
+
+```svelte
+<script lang="ts">
+  import {
+    formatForDisplay,
+    getHeldKeyCodesMap,
+    getHeldKeys,
+    type RegisterableHotkey,
+  } from '@tanstack/svelte-hotkeys'
+
+  const heldKeys = getHeldKeys()
+  const heldCodes = getHeldKeyCodesMap()
+</script>
+
+<div>
+  {#each heldKeys.keys as key}
+    <kbd>
+      {formatForDisplay(key as RegisterableHotkey, { useSymbols: true })}:
+      {heldCodes.codes[key] ?? 'unknown'}
+    </kbd>
+  {/each}
+</div>
+```
+
+## Under the Hood
+
+All three functions subscribe to the singleton `KeyStateTracker`:
+
+```ts
+import { getKeyStateTracker } from '@tanstack/svelte-hotkeys'
+
+const tracker = getKeyStateTracker()
+tracker.getHeldKeys()
+tracker.isKeyHeld('Shift')
+```
diff --git a/mintlify/hotkeys/framework/svelte/guides/sequence-recording.md b/mintlify/hotkeys/framework/svelte/guides/sequence-recording.md
new file mode 100644
index 000000000..3befd79ed
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/sequence-recording.md
@@ -0,0 +1,12 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+Use `createHotkeySequenceRecorder` from `@tanstack/svelte-hotkeys`. Reactive getters `isRecording`, `steps`, `recordedSequence` and methods `startRecording`, `stopRecording`, `cancelRecording`, `commitRecording` match the hotkey recorder pattern.
+
+Configure `commitKeys`, `commitOnEnter`, and `idleTimeoutMs` on the options object; set defaults on `HotkeysProvider` with `hotkeySequenceRecorder`.
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
diff --git a/mintlify/hotkeys/framework/svelte/guides/sequences.md b/mintlify/hotkeys/framework/svelte/guides/sequences.md
new file mode 100644
index 000000000..5f670a9f5
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/guides/sequences.md
@@ -0,0 +1,148 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences in Svelte, where keys are pressed one after another rather than simultaneously.
+
+## Global sequences
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequence } from '@tanstack/svelte-hotkeys'
+
+  createHotkeySequence(['G', 'G'], () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  })
+</script>
+```
+
+## Many sequences at once
+
+Use `createHotkeySequences` to register several global sequences in one place (including from a reactive getter). For multiple sequences on a focused element, use `createHotkeySequencesAttachment` the same way you would use `createHotkeySequenceAttachment`.
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequences } from '@tanstack/svelte-hotkeys'
+
+  createHotkeySequences([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine(), options: { timeout: 500 } },
+  ])
+</script>
+```
+
+## Scoped sequences
+
+Use `createHotkeySequenceAttachment` when a sequence should only be active while a specific element owns focus.
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequenceAttachment } from '@tanstack/svelte-hotkeys'
+
+  const editorSequences = createHotkeySequenceAttachment(['G', 'G'], () => {
+    scrollToTop()
+  })
+</script>
+
+<div tabindex="0" {@attach editorSequences}>
+  Focus here, then press g then g
+</div>
+```
+
+## Sequence options
+
+```ts
+createHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,
+  enabled: true,
+})
+```
+
+### Reactive `enabled`
+
+When disabled, the sequence **stays registered** (visible in devtools); only execution is suppressed.
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequence } from '@tanstack/svelte-hotkeys'
+
+  let isVimMode = $state(true)
+
+  createHotkeySequence(
+    ['G', 'G'],
+    () => scrollToTop(),
+    () => ({ enabled: isVimMode }),
+  )
+</script>
+```
+
+## Default options
+
+```svelte
+<script lang="ts">
+  import { setHotkeysContext } from '@tanstack/svelte-hotkeys'
+
+  setHotkeysContext({
+    hotkeySequence: { timeout: 1500 },
+  })
+</script>
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```ts
+createHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/svelte/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Chained modifier chords
+
+You can use the same modifier on consecutive steps (for example `Shift+R` then `Shift+T`):
+
+```ts
+createHotkeySequence(['Shift+R', 'Shift+T'], () => doNextAction())
+```
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone) are ignored: they do not advance the sequence and do not reset progress.
+
+## Common Patterns
+
+### Vim-Style Navigation
+
+```ts
+createHotkeySequence(['G', 'G'], () => scrollToTop())
+createHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+createHotkeySequence(['D', 'D'], () => deleteLine())
+createHotkeySequence(['D', 'W'], () => deleteWord())
+createHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+```
+
+### Konami Code
+
+```ts
+createHotkeySequence(
+  ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'B', 'A'],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+## Under the Hood
+
+`createHotkeySequence` uses the singleton `SequenceManager`. You can also access it directly:
+
+```ts
+import {
+  createSequenceMatcher,
+  getSequenceManager,
+} from '@tanstack/svelte-hotkeys'
+
+const manager = getSequenceManager()
+const matcher = createSequenceMatcher(['G', 'G'], { timeout: 1000 })
+```
diff --git a/mintlify/hotkeys/framework/svelte/quick-start.md b/mintlify/hotkeys/framework/svelte/quick-start.md
new file mode 100644
index 000000000..c23979c3b
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/quick-start.md
@@ -0,0 +1,171 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Hotkeys installed yet? See the [Installation](/hotkeys/installation) page for instructions.
+
+## Your First Hotkey
+
+Use `createHotkey` for global shortcuts and attachments for element-scoped shortcuts.
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  createHotkey('Mod+S', () => {
+    saveDocument()
+  })
+</script>
+
+<div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>
+```
+
+The `Mod` modifier automatically resolves to `Meta` (Command) on macOS and `Control` on Windows/Linux, so your shortcuts work across platforms without extra logic.
+
+## Common Patterns
+
+### Multiple global hotkeys
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  createHotkey('Mod+S', () => save())
+  createHotkey('Mod+Z', () => undo())
+  createHotkey('Mod+Shift+Z', () => redo())
+  createHotkey('Mod+F', () => openSearch())
+  createHotkey('Escape', () => closeDialog())
+</script>
+```
+
+### Scoped hotkeys with attachments
+
+```svelte
+<script lang="ts">
+  import { createHotkeyAttachment } from '@tanstack/svelte-hotkeys'
+
+  const closePanel = createHotkeyAttachment('Escape', () => {
+    close()
+  })
+</script>
+
+<div tabindex="0" {@attach closePanel}>
+  <p>Press Escape while focused here to close</p>
+</div>
+```
+
+### Reactive options
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  let isOpen = $state(true)
+
+  createHotkey(
+    'Escape',
+    () => {
+      isOpen = false
+    },
+    () => ({ enabled: isOpen }),
+  )
+</script>
+```
+
+### Scoped sequences
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequenceAttachment } from '@tanstack/svelte-hotkeys'
+
+  const vimKeys = createHotkeySequenceAttachment(['G', 'G'], () => {
+    scrollToTop()
+  })
+</script>
+
+<div tabindex="0" {@attach vimKeys}>
+  Focus here, then press g then g
+</div>
+```
+
+### Tracking held keys
+
+```svelte
+<script lang="ts">
+  import { getHeldKeys, getIsKeyHeld } from '@tanstack/svelte-hotkeys'
+
+  const heldKeys = getHeldKeys()
+  const isShiftHeld = getIsKeyHeld('Shift')
+</script>
+
+<div class="status-bar">
+  {#if isShiftHeld.held}<span>Shift mode active</span>{/if}
+  {#if heldKeys.keys.length > 0}
+    <span>Keys: {heldKeys.keys.join('+')}</span>
+  {/if}
+</div>
+```
+
+### Recording shortcuts
+
+```svelte
+<script lang="ts">
+  import {
+    createHotkeyRecorder,
+    formatForDisplay,
+  } from '@tanstack/svelte-hotkeys'
+
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      console.log('Recorded:', hotkey)
+    },
+  })
+</script>
+
+<button onclick={recorder.startRecording}>
+  {recorder.recordedHotkey
+    ? formatForDisplay(recorder.recordedHotkey)
+    : 'Click to record'}
+</button>
+```
+
+### Displaying hotkeys in the UI
+
+```svelte
+<script lang="ts">
+  import { formatForDisplay, createHotkey } from '@tanstack/svelte-hotkeys'
+
+  createHotkey('Mod+S', () => save())
+</script>
+
+<button>
+  Save <kbd>{formatForDisplay('Mod+S')}</kbd>
+</button>
+```
+
+## Default options
+
+Use `setHotkeysContext` when you want defaults for a subtree. This is an advanced API and usually belongs near the root of the part of the app that owns the hotkeys.
+
+```svelte
+<script lang="ts">
+  import { setHotkeysContext } from '@tanstack/svelte-hotkeys'
+
+  setHotkeysContext({
+    hotkey: { preventDefault: true },
+    hotkeySequence: { timeout: 1500 },
+  })
+</script>
+```
+
+## Next Steps
+
+- [Hotkeys Guide](/hotkeys/framework/svelte/guides/hotkeys)
+- [Sequences Guide](/hotkeys/framework/svelte/guides/sequences)
+- [Hotkey Recording Guide](/hotkeys/framework/svelte/guides/hotkey-recording)
+- [Sequence Recording Guide](/hotkeys/framework/svelte/guides/sequence-recording)
+- [Key State Tracking Guide](/hotkeys/framework/svelte/guides/key-state-tracking)
+- [Formatting & Display Guide](/hotkeys/framework/svelte/guides/formatting-display)
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkey.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkey.md
new file mode 100644
index 000000000..02bb55589
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkey.md
@@ -0,0 +1,47 @@
+---
+id: createHotkey
+title: createHotkey
+---
+
+# Function: createHotkey()
+
+```ts
+function createHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkey.svelte.ts:56](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkey.svelte.ts#L56)
+
+Register a global hotkey for the current component.
+
+## Parameters
+
+### hotkey
+
+`MaybeGetter`\&lt;`RegisterableHotkey`\>
+
+### callback
+
+`HotkeyCallback`
+
+### options
+
+`MaybeGetter`\&lt;[`CreateHotkeyOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions)\> = `{}`
+
+## Returns
+
+`void`
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkey } from '@tanstack/svelte-hotkeys'
+
+  createHotkey('Mod+S', () => {
+    console.log('Mod+S pressed')
+  })
+</script>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyAttachment.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyAttachment.md
new file mode 100644
index 000000000..d8e29f542
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyAttachment.md
@@ -0,0 +1,53 @@
+---
+id: createHotkeyAttachment
+title: createHotkeyAttachment
+---
+
+# Function: createHotkeyAttachment()
+
+```ts
+function createHotkeyAttachment(
+   hotkey, 
+   callback, 
+options): Attachment<HTMLElement>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkey.svelte.ts:130](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkey.svelte.ts#L130)
+
+Create an attachment for element-scoped hotkeys.
+
+## Parameters
+
+### hotkey
+
+`MaybeGetter`\&lt;`RegisterableHotkey`\>
+
+### callback
+
+`HotkeyCallback`
+
+### options
+
+`MaybeGetter`\&lt;[`CreateHotkeyOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions)\> = `{}`
+
+## Returns
+
+`Attachment`\&lt;`HTMLElement`\>
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeyAttachment } from '@tanstack/svelte-hotkeys'
+
+  let count = $state(0)
+  const saveHotkey = createHotkeyAttachment('Mod+S', () => {
+    count++
+  })
+
+</script>
+
+<div tabindex="0" {@attach saveHotkey}>
+  Count: {count}
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyRecorder.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyRecorder.md
new file mode 100644
index 000000000..2dbe9a6b7
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeyRecorder.md
@@ -0,0 +1,22 @@
+---
+id: createHotkeyRecorder
+title: createHotkeyRecorder
+---
+
+# Function: createHotkeyRecorder()
+
+```ts
+function createHotkeyRecorder(options): SvelteHotkeyRecorder;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:98](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L98)
+
+## Parameters
+
+### options
+
+`MaybeGetter`\&lt;`HotkeyRecorderOptions`\>
+
+## Returns
+
+[`SvelteHotkeyRecorder`](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder)
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequence.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequence.md
new file mode 100644
index 000000000..07d4b1e3b
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequence.md
@@ -0,0 +1,72 @@
+---
+id: createHotkeySequence
+title: createHotkeySequence
+---
+
+# Function: createHotkeySequence()
+
+```ts
+function createHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts:72](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts#L72)
+
+Register a global keyboard shortcut sequence for the current component.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+`MaybeGetter`\&lt;`HotkeySequence`\>
+
+### callback
+
+`HotkeyCallback`
+
+### options
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions)\> = `{}`
+
+## Returns
+
+`void`
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequence } from '@tanstack/svelte-hotkeys'
+
+  // Scroll to top when 'G G' is pressed
+  createHotkeySequence(['G', 'G'], () => {
+    scrollToTop()
+  })
+
+  // Delete line when 'D D' is pressed
+  createHotkeySequence(['D', 'D'], () => {
+    deleteLine()
+  })
+
+  // Delete inner word when 'D I W' is pressed
+  createHotkeySequence(['D', 'I', 'W'], () => {
+    deleteInnerWord()
+  }, { timeout: 500 })
+
+  // Same modifier on consecutive steps (bare Shift between chords is ignored)
+  createHotkeySequence(['Shift+R', 'Shift+T'], () => {
+    nextAction()
+  })
+</script>
+
+<div>
+  ....
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceAttachment.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceAttachment.md
new file mode 100644
index 000000000..ace108e69
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceAttachment.md
@@ -0,0 +1,51 @@
+---
+id: createHotkeySequenceAttachment
+title: createHotkeySequenceAttachment
+---
+
+# Function: createHotkeySequenceAttachment()
+
+```ts
+function createHotkeySequenceAttachment(
+   sequence, 
+   callback, 
+options): Attachment<HTMLElement>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts:151](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts#L151)
+
+Create an attachment for element-scoped keyboard sequences.
+
+## Parameters
+
+### sequence
+
+`MaybeGetter`\&lt;`HotkeySequence`\>
+
+### callback
+
+`HotkeyCallback`
+
+### options
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions)\> = `{}`
+
+## Returns
+
+`Attachment`\&lt;`HTMLElement`\>
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequenceAttachment } from '@tanstack/svelte-hotkeys'
+
+  const vimKeys = createHotkeySequenceAttachment(['G', 'G'], () => {
+    scrollToTop()
+  })
+</script>
+
+<div tabindex="0" {@attach vimKeys}>
+  Focus here and press g then g
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceRecorder.md
new file mode 100644
index 000000000..9198a488f
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequenceRecorder.md
@@ -0,0 +1,24 @@
+---
+id: createHotkeySequenceRecorder
+title: createHotkeySequenceRecorder
+---
+
+# Function: createHotkeySequenceRecorder()
+
+```ts
+function createHotkeySequenceRecorder(options): SvelteHotkeySequenceRecorder;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L73)
+
+Svelte helper for recording multi-chord sequences (Vim-style shortcuts).
+
+## Parameters
+
+### options
+
+`MaybeGetter`\&lt;`HotkeySequenceRecorderOptions`\>
+
+## Returns
+
+[`SvelteHotkeySequenceRecorder`](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequences.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequences.md
new file mode 100644
index 000000000..c58b7737c
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequences.md
@@ -0,0 +1,41 @@
+---
+id: createHotkeySequences
+title: createHotkeySequences
+---
+
+# Function: createHotkeySequences()
+
+```ts
+function createHotkeySequences(definitions, commonOptions): void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:60](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L60)
+
+Register multiple global keyboard shortcut sequences for the current component.
+
+## Parameters
+
+### definitions
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceDefinition`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition)[]\>
+
+### commonOptions
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions)\> = `{}`
+
+## Returns
+
+`void`
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequences } from '@tanstack/svelte-hotkeys'
+
+  createHotkeySequences([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine() },
+  ])
+</script>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequencesAttachment.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequencesAttachment.md
new file mode 100644
index 000000000..2120ccdb7
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeySequencesAttachment.md
@@ -0,0 +1,43 @@
+---
+id: createHotkeySequencesAttachment
+title: createHotkeySequencesAttachment
+---
+
+# Function: createHotkeySequencesAttachment()
+
+```ts
+function createHotkeySequencesAttachment(definitions, commonOptions): Attachment<HTMLElement>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:184](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L184)
+
+Create an attachment for element-scoped multi-sequence registration.
+
+## Parameters
+
+### definitions
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceDefinition`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition)[]\>
+
+### commonOptions
+
+`MaybeGetter`\&lt;[`CreateHotkeySequenceOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions)\> = `{}`
+
+## Returns
+
+`Attachment`\&lt;`HTMLElement`\>
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeySequencesAttachment } from '@tanstack/svelte-hotkeys'
+
+  const vim = createHotkeySequencesAttachment([
+    { sequence: ['G', 'G'], callback: () => scrollToTop() },
+    { sequence: ['D', 'D'], callback: () => deleteLine() },
+  ])
+</script>
+
+<div tabindex="0" {@attach vim}>Editor</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeys.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeys.md
new file mode 100644
index 000000000..b63b661c4
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeys.md
@@ -0,0 +1,42 @@
+---
+id: createHotkeys
+title: createHotkeys
+---
+
+# Function: createHotkeys()
+
+```ts
+function createHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:66](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L66)
+
+Register multiple global hotkeys for the current component.
+
+## Parameters
+
+### hotkeys
+
+`MaybeGetter`\&lt;[`CreateHotkeyDefinition`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition)[]\>
+
+### commonOptions
+
+`MaybeGetter`\&lt;[`CreateHotkeyOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions)\> = `{}`
+
+## Returns
+
+`void`
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeys } from '@tanstack/svelte-hotkeys'
+
+  createHotkeys([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+    { hotkey: 'Escape', callback: () => close() },
+  ])
+</script>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeysAttachment.md b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeysAttachment.md
new file mode 100644
index 000000000..635789547
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/createHotkeysAttachment.md
@@ -0,0 +1,45 @@
+---
+id: createHotkeysAttachment
+title: createHotkeysAttachment
+---
+
+# Function: createHotkeysAttachment()
+
+```ts
+function createHotkeysAttachment(hotkeys, commonOptions): Attachment<HTMLElement>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:189](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L189)
+
+Create an attachment for element-scoped multi-hotkey registration.
+
+## Parameters
+
+### hotkeys
+
+`MaybeGetter`\&lt;[`CreateHotkeyDefinition`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition)[]\>
+
+### commonOptions
+
+`MaybeGetter`\&lt;[`CreateHotkeyOptions`](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions)\> = `{}`
+
+## Returns
+
+`Attachment`\&lt;`HTMLElement`\>
+
+## Example
+
+```svelte
+<script lang="ts">
+  import { createHotkeysAttachment } from '@tanstack/svelte-hotkeys'
+
+  const editorKeys = createHotkeysAttachment([
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo() },
+  ])
+</script>
+
+<div tabindex="0" {@attach editorKeys}>
+  Editor content
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/svelte/reference/functions/getDefaultHotkeysOptions.md
new file mode 100644
index 000000000..908f0d25d
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: getDefaultHotkeysOptions
+title: getDefaultHotkeysOptions
+---
+
+# Function: getDefaultHotkeysOptions()
+
+```ts
+function getDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:59](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L59)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeyCodesMap.md b/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeyCodesMap.md
new file mode 100644
index 000000000..45221f72e
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeyCodesMap.md
@@ -0,0 +1,39 @@
+---
+id: getHeldKeyCodesMap
+title: getHeldKeyCodesMap
+---
+
+# Function: getHeldKeyCodesMap()
+
+```ts
+function getHeldKeyCodesMap(): SvelteHeldKeyCodesMap;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts#L42)
+
+Svelte function that returns reactive access to the map of currently held key names
+to their physical `event.code` values.
+
+This is useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+## Returns
+
+[`SvelteHeldKeyCodesMap`](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap)
+
+Object with a reactive `codes` property
+
+```svelte
+<script>
+  import { getHeldKeyCodesMap } from '@tanstack/svelte-hotkeys'
+  const heldKeyCodesMap = getHeldKeyCodesMap()
+</script>
+
+<div>
+  {#each Object.entries(heldKeyCodesMap.codes) as [key, code]}
+    <kbd>
+      {key} <small>{code}</small>
+    </kbd>
+  {/each}
+ </div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeys.md b/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeys.md
new file mode 100644
index 000000000..808dd5c66
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getHeldKeys.md
@@ -0,0 +1,36 @@
+---
+id: getHeldKeys
+title: getHeldKeys
+---
+
+# Function: getHeldKeys()
+
+```ts
+function getHeldKeys(): SvelteHeldKeys;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeys.svelte.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeys.svelte.ts#L38)
+
+Svelte function that returns reactive access to currently held keyboard keys.
+
+This function uses the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Returns
+
+[`SvelteHeldKeys`](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys)
+
+Object with a reactive `keys` property
+
+## Example
+
+```svelte
+<script>
+  import { getHeldKeys } from '@tanstack/svelte-hotkeys'
+
+  const heldKeys = getHeldKeys()
+</script>
+<div>
+  Currently pressed: {heldKeys.keys.join(' + ') || 'None'}
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeyRegistrations.md b/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeyRegistrations.md
new file mode 100644
index 000000000..1dcf7d2a6
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeyRegistrations.md
@@ -0,0 +1,36 @@
+---
+id: getHotkeyRegistrations
+title: getHotkeyRegistrations
+---
+
+# Function: getHotkeyRegistrations()
+
+```ts
+function getHotkeyRegistrations(): SvelteHotkeyRegistrations;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts#L58)
+
+Svelte function that returns reactive access to all hotkey and sequence
+registrations from the singleton managers.
+
+This is a standalone function that does NOT require the HotkeysProvider.
+
+## Returns
+
+[`SvelteHotkeyRegistrations`](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations)
+
+Object with reactive `hotkeys` and `sequences` properties
+
+## Example
+
+```svelte
+<script>
+  import { getHotkeyRegistrations } from '@tanstack/svelte-hotkeys'
+
+  const registrations = getHotkeyRegistrations()
+</script>
+{#each registrations.hotkeys as reg}
+  <div>{reg.options.meta?.name} — {reg.triggerCount} triggers</div>
+{/each}
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeysContext.md b/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeysContext.md
new file mode 100644
index 000000000..82b71f0af
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: getHotkeysContext
+title: getHotkeysContext
+---
+
+# Function: getHotkeysContext()
+
+```ts
+function getHotkeysContext(): HotkeysContextValue | null;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:51](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L51)
+
+## Returns
+
+`HotkeysContextValue` \| `null`
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/getIsKeyHeld.md b/mintlify/hotkeys/framework/svelte/reference/functions/getIsKeyHeld.md
new file mode 100644
index 000000000..51a131c7c
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/getIsKeyHeld.md
@@ -0,0 +1,61 @@
+---
+id: getIsKeyHeld
+title: getIsKeyHeld
+---
+
+# Function: getIsKeyHeld()
+
+```ts
+function getIsKeyHeld(key): SvelteHeldKeyState;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts:66](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts#L66)
+
+Svelte function that returns reactive access to whether a specific key is currently being held.
+
+This function uses the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Parameters
+
+### key
+
+`IndividualKey`
+
+The key to check (e.g., 'Shift', 'Control', 'A')
+
+## Returns
+
+[`SvelteHeldKeyState`](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState)
+
+Object with a reactive `held` property
+
+## Examples
+
+```svelte
+<script>
+  import { getIsKeyHeld } from '@tanstack/svelte-hotkeys'
+
+  const isShiftHeld = getIsKeyHeld('Shift')
+</script>
+
+<div>
+  {isShiftHeld.held ? 'Shift is pressed!' : 'Press Shift'}
+</div>
+```
+
+```svelte
+<script>
+  import { getIsKeyHeld } from '@tanstack/svelte-hotkeys'
+
+  const isCtrlHeld = getIsKeyHeld('Control')
+  const isShiftHeld = getIsKeyHeld('Shift')
+  const isAltHeld = getIsKeyHeld('Alt')
+</script>
+
+<div>
+  <span style:opacity={isCtrlHeld.held ? 1 : 0.3}>Ctrl</span>
+  <span style:opacity={isShiftHeld.held ? 1 : 0.3}>Shift</span>
+  <span style:opacity={isAltHeld.held ? 1 : 0.3}>Alt</span>
+</div>
+```
diff --git a/mintlify/hotkeys/framework/svelte/reference/functions/setHotkeysContext.md b/mintlify/hotkeys/framework/svelte/reference/functions/setHotkeysContext.md
new file mode 100644
index 000000000..a0726fb82
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/functions/setHotkeysContext.md
@@ -0,0 +1,22 @@
+---
+id: setHotkeysContext
+title: setHotkeysContext
+---
+
+# Function: setHotkeysContext()
+
+```ts
+function setHotkeysContext(defaultOptions): HotkeysContextValue;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:31](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L31)
+
+## Parameters
+
+### defaultOptions
+
+[`HotkeysProviderOptions`](/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions) = `DEFAULT_OPTIONS`
+
+## Returns
+
+`HotkeysContextValue`
diff --git a/mintlify/hotkeys/framework/svelte/reference/index.md b/mintlify/hotkeys/framework/svelte/reference/index.md
new file mode 100644
index 000000000..875a62e35
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/index.md
@@ -0,0 +1,50 @@
+---
+id: "@tanstack/svelte-hotkeys"
+title: "@tanstack/svelte-hotkeys"
+---
+
+# @tanstack/svelte-hotkeys
+
+## Interfaces
+
+- [CreateHotkeyDefinition](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition)
+- [CreateHotkeyOptions](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions)
+- [CreateHotkeySequenceDefinition](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition)
+- [CreateHotkeySequenceOptions](/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions)
+- [HotkeysProviderOptions](/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions)
+- [HotkeysProviderProps](/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderProps)
+- [SvelteHeldKeyCodesMap](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap)
+- [SvelteHeldKeys](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys)
+- [SvelteHeldKeyState](/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState)
+- [SvelteHotkeyRecorder](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder)
+- [SvelteHotkeyRegistrations](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations)
+- [SvelteHotkeySequenceRecorder](/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder)
+
+## Type Aliases
+
+- [HotkeysProvider](/hotkeys/framework/svelte/reference/type-aliases/HotkeysProvider)
+
+## Variables
+
+- [DEFAULT\_OPTIONS](/hotkeys/framework/svelte/reference/variables/DEFAULT_OPTIONS)
+- [HotkeysProvider](/hotkeys/framework/svelte/reference/variables/HotkeysProvider)
+
+## Functions
+
+- [createHotkey](/hotkeys/framework/svelte/reference/functions/createHotkey)
+- [createHotkeyAttachment](/hotkeys/framework/svelte/reference/functions/createHotkeyAttachment)
+- [createHotkeyRecorder](/hotkeys/framework/svelte/reference/functions/createHotkeyRecorder)
+- [createHotkeys](/hotkeys/framework/svelte/reference/functions/createHotkeys)
+- [createHotkeysAttachment](/hotkeys/framework/svelte/reference/functions/createHotkeysAttachment)
+- [createHotkeySequence](/hotkeys/framework/svelte/reference/functions/createHotkeySequence)
+- [createHotkeySequenceAttachment](/hotkeys/framework/svelte/reference/functions/createHotkeySequenceAttachment)
+- [createHotkeySequenceRecorder](/hotkeys/framework/svelte/reference/functions/createHotkeySequenceRecorder)
+- [createHotkeySequences](/hotkeys/framework/svelte/reference/functions/createHotkeySequences)
+- [createHotkeySequencesAttachment](/hotkeys/framework/svelte/reference/functions/createHotkeySequencesAttachment)
+- [getDefaultHotkeysOptions](/hotkeys/framework/svelte/reference/functions/getDefaultHotkeysOptions)
+- [getHeldKeyCodesMap](/hotkeys/framework/svelte/reference/functions/getHeldKeyCodesMap)
+- [getHeldKeys](/hotkeys/framework/svelte/reference/functions/getHeldKeys)
+- [getHotkeyRegistrations](/hotkeys/framework/svelte/reference/functions/getHotkeyRegistrations)
+- [getHotkeysContext](/hotkeys/framework/svelte/reference/functions/getHotkeysContext)
+- [getIsKeyHeld](/hotkeys/framework/svelte/reference/functions/getIsKeyHeld)
+- [setHotkeysContext](/hotkeys/framework/svelte/reference/functions/setHotkeysContext)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition.md
new file mode 100644
index 000000000..7287ad44c
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyDefinition.md
@@ -0,0 +1,46 @@
+---
+id: CreateHotkeyDefinition
+title: CreateHotkeyDefinition
+---
+
+# Interface: CreateHotkeyDefinition
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L23)
+
+A single hotkey definition for use with `createHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:27](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L27)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: MaybeGetter<RegisterableHotkey>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L25)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: MaybeGetter<CreateHotkeyOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeys.svelte.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeys.svelte.ts#L29)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions.md
new file mode 100644
index 000000000..baa8046d9
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeyOptions.md
@@ -0,0 +1,22 @@
+---
+id: CreateHotkeyOptions
+title: CreateHotkeyOptions
+---
+
+# Interface: CreateHotkeyOptions
+
+Defined in: [packages/svelte-hotkeys/src/createHotkey.svelte.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkey.svelte.ts#L19)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: Document | Window;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkey.svelte.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkey.svelte.ts#L20)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition.md
new file mode 100644
index 000000000..7347a8b91
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition.md
@@ -0,0 +1,46 @@
+---
+id: CreateHotkeySequenceDefinition
+title: CreateHotkeySequenceDefinition
+---
+
+# Interface: CreateHotkeySequenceDefinition
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L18)
+
+A single sequence definition for use with `createHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L22)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: MaybeGetter<CreateHotkeySequenceOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L24)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: MaybeGetter<HotkeySequence>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequences.svelte.ts#L20)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions.md
new file mode 100644
index 000000000..782e06f19
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/CreateHotkeySequenceOptions.md
@@ -0,0 +1,22 @@
+---
+id: CreateHotkeySequenceOptions
+title: CreateHotkeySequenceOptions
+---
+
+# Interface: CreateHotkeySequenceOptions
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts#L14)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"target"`\>
+
+## Properties
+
+### target?
+
+```ts
+optional target: Document | Window;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequence.svelte.ts#L18)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..cce1c2976
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L10)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<CreateHotkeyOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L11)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L12)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<CreateHotkeySequenceOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L14)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L13)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderProps.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderProps.md
new file mode 100644
index 000000000..15ca21a8b
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/HotkeysProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: HotkeysProviderProps
+title: HotkeysProviderProps
+---
+
+# Interface: HotkeysProviderProps
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L17)
+
+## Properties
+
+### children
+
+```ts
+children: Snippet;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L18)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: HotkeysProviderOptions;
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L19)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap.md
new file mode 100644
index 000000000..dfa75646b
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyCodesMap.md
@@ -0,0 +1,18 @@
+---
+id: SvelteHeldKeyCodesMap
+title: SvelteHeldKeyCodesMap
+---
+
+# Interface: SvelteHeldKeyCodesMap
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts:4](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts#L4)
+
+## Properties
+
+### codes
+
+```ts
+readonly codes: Record<string, string>;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts:5](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeyCodesMap.svelte.ts#L5)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState.md
new file mode 100644
index 000000000..31ecd19e4
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeyState.md
@@ -0,0 +1,18 @@
+---
+id: SvelteHeldKeyState
+title: SvelteHeldKeyState
+---
+
+# Interface: SvelteHeldKeyState
+
+Defined in: [packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts:5](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts#L5)
+
+## Properties
+
+### held
+
+```ts
+readonly held: boolean;
+```
+
+Defined in: [packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts:6](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getIsKeyHeld.svelte.ts#L6)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys.md
new file mode 100644
index 000000000..259e13059
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHeldKeys.md
@@ -0,0 +1,18 @@
+---
+id: SvelteHeldKeys
+title: SvelteHeldKeys
+---
+
+# Interface: SvelteHeldKeys
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeys.svelte.ts:4](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeys.svelte.ts#L4)
+
+## Properties
+
+### keys
+
+```ts
+readonly keys: string[];
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHeldKeys.svelte.ts:5](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHeldKeys.svelte.ts#L5)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder.md
new file mode 100644
index 000000000..a2e7f442d
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRecorder.md
@@ -0,0 +1,80 @@
+---
+id: SvelteHotkeyRecorder
+title: SvelteHotkeyRecorder
+---
+
+# Interface: SvelteHotkeyRecorder
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:8](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L8)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L18)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+readonly isRecording: boolean;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L10)
+
+Whether recording is currently active
+
+***
+
+### recordedHotkey
+
+```ts
+readonly recordedHotkey: Hotkey | null;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L12)
+
+The currently recorded hotkey (for live preview)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L14)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts#L16)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations.md
new file mode 100644
index 000000000..ae2d29d35
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeyRegistrations.md
@@ -0,0 +1,28 @@
+---
+id: SvelteHotkeyRegistrations
+title: SvelteHotkeyRegistrations
+---
+
+# Interface: SvelteHotkeyRegistrations
+
+Defined in: [packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts#L12)
+
+## Properties
+
+### hotkeys
+
+```ts
+readonly hotkeys: HotkeyRegistrationView[];
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts#L13)
+
+***
+
+### sequences
+
+```ts
+readonly sequences: SequenceRegistrationView[];
+```
+
+Defined in: [packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/getHotkeyRegistrations.svelte.ts#L14)
diff --git a/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder.md
new file mode 100644
index 000000000..3b11bb07f
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/interfaces/SvelteHotkeySequenceRecorder.md
@@ -0,0 +1,94 @@
+---
+id: SvelteHotkeySequenceRecorder
+title: SvelteHotkeySequenceRecorder
+---
+
+# Interface: SvelteHotkeySequenceRecorder
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L11)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L17)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L18)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+readonly isRecording: boolean;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L12)
+
+***
+
+### recordedSequence
+
+```ts
+readonly recordedSequence: HotkeySequence | null;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L14)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L15)
+
+#### Returns
+
+`void`
+
+***
+
+### steps
+
+```ts
+readonly steps: HotkeySequence;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L13)
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/createHotkeySequenceRecorder.svelte.ts#L16)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/svelte/reference/type-aliases/HotkeysProvider.md b/mintlify/hotkeys/framework/svelte/reference/type-aliases/HotkeysProvider.md
new file mode 100644
index 000000000..fba4fb47f
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/type-aliases/HotkeysProvider.md
@@ -0,0 +1,12 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Type Alias: HotkeysProvider
+
+```ts
+type HotkeysProvider = SvelteComponent;
+```
+
+Defined in: node\_modules/.pnpm/svelte@5.55.5\_@typescript-eslint+types@8.59.0/node\_modules/svelte/types/index.d.ts:3204
diff --git a/mintlify/hotkeys/framework/svelte/reference/variables/DEFAULT_OPTIONS.md b/mintlify/hotkeys/framework/svelte/reference/variables/DEFAULT_OPTIONS.md
new file mode 100644
index 000000000..a52637720
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/variables/DEFAULT_OPTIONS.md
@@ -0,0 +1,12 @@
+---
+id: DEFAULT_OPTIONS
+title: DEFAULT_OPTIONS
+---
+
+# Variable: DEFAULT\_OPTIONS
+
+```ts
+const DEFAULT_OPTIONS: HotkeysProviderOptions = {};
+```
+
+Defined in: [packages/svelte-hotkeys/src/HotkeysCtx.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/svelte-hotkeys/src/HotkeysCtx.ts#L22)
diff --git a/mintlify/hotkeys/framework/svelte/reference/variables/HotkeysProvider.md b/mintlify/hotkeys/framework/svelte/reference/variables/HotkeysProvider.md
new file mode 100644
index 000000000..bee07fb6c
--- /dev/null
+++ b/mintlify/hotkeys/framework/svelte/reference/variables/HotkeysProvider.md
@@ -0,0 +1,12 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Variable: HotkeysProvider
+
+```ts
+const HotkeysProvider: LegacyComponentType;
+```
+
+Defined in: node\_modules/.pnpm/svelte@5.55.5\_@typescript-eslint+types@8.59.0/node\_modules/svelte/types/index.d.ts:3204
diff --git a/mintlify/hotkeys/framework/vanilla/examples/formatForDisplay.md b/mintlify/hotkeys/framework/vanilla/examples/formatForDisplay.md
new file mode 100644
index 000000000..f64c1dd82
--- /dev/null
+++ b/mintlify/hotkeys/framework/vanilla/examples/formatForDisplay.md
@@ -0,0 +1,12 @@
+---
+title: "formatForDisplay"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vanilla/examples/formatForDisplay)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vanilla/formatForDisplay)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHeldKeys.md b/mintlify/hotkeys/framework/vue/examples/useHeldKeys.md
new file mode 100644
index 000000000..342a12c7d
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHeldKeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHeldKeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHeldKeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHeldKeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkey.md b/mintlify/hotkeys/framework/vue/examples/useHotkey.md
new file mode 100644
index 000000000..2bc389b68
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkey.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkey"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkey)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkey)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkeyRecorder.md b/mintlify/hotkeys/framework/vue/examples/useHotkeyRecorder.md
new file mode 100644
index 000000000..dd999a8e2
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkeyRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeyRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkeyRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkeyRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkeySequence.md b/mintlify/hotkeys/framework/vue/examples/useHotkeySequence.md
new file mode 100644
index 000000000..cfe329868
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkeySequence.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequence"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkeySequence)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkeySequence)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/vue/examples/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..9f125cd5c
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkeySequenceRecorder.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequenceRecorder"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkeySequenceRecorder)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkeySequenceRecorder)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkeySequences.md b/mintlify/hotkeys/framework/vue/examples/useHotkeySequences.md
new file mode 100644
index 000000000..4b3ee11b4
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkeySequences.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeySequences"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkeySequences)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkeySequences)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useHotkeys.md b/mintlify/hotkeys/framework/vue/examples/useHotkeys.md
new file mode 100644
index 000000000..f626dcaf5
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useHotkeys.md
@@ -0,0 +1,12 @@
+---
+title: "useHotkeys"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useHotkeys)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useHotkeys)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/examples/useKeyhold.md b/mintlify/hotkeys/framework/vue/examples/useKeyhold.md
new file mode 100644
index 000000000..703e89e03
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/examples/useKeyhold.md
@@ -0,0 +1,12 @@
+---
+title: "useKeyHold"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/hotkeys/latest/docs/framework/vue/examples/useKeyhold)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/hotkeys/tree/6adcc3a1b0a28350eb421f6aeebcf0f94d177817/examples/vue/useKeyhold)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/hotkeys/framework/vue/guides/formatting-display.md b/mintlify/hotkeys/framework/vue/guides/formatting-display.md
new file mode 100644
index 000000000..cb71a9b40
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/formatting-display.md
@@ -0,0 +1,71 @@
+---
+title: Formatting & Display Guide
+id: formatting-display
+---
+
+TanStack Hotkeys includes utilities for turning hotkey strings into display-friendly labels. These utilities are framework-agnostic, but they pair naturally with Vue templates and computed UI.
+
+## `formatForDisplay`
+
+```ts
+import { formatForDisplay } from '@tanstack/vue-hotkeys'
+
+formatForDisplay('Mod+S')
+formatForDisplay('Mod+Shift+Z')
+```
+
+## `formatWithLabels`
+
+```ts
+import { formatWithLabels } from '@tanstack/vue-hotkeys'
+
+formatWithLabels('Mod+S')
+formatWithLabels('Mod+Shift+Z')
+```
+
+## Using Formatted Hotkeys in Vue
+
+### Keyboard Shortcut Badges
+
+```vue
+<script setup lang="ts">
+import { formatForDisplay } from '@tanstack/vue-hotkeys'
+
+defineProps<{ hotkey: string }>()
+</script>
+
+<template>
+  <kbd class="shortcut-badge">{{ formatForDisplay(hotkey) }}</kbd>
+</template>
+```
+
+### Menu Items with Hotkeys
+
+```vue
+<script setup lang="ts">
+import { formatForDisplay, useHotkey } from '@tanstack/vue-hotkeys'
+
+const props = defineProps<{
+  label: string
+  hotkey: string
+  onAction: () => void
+}>()
+
+useHotkey(() => props.hotkey, () => props.onAction())
+</script>
+
+<template>
+  <div class="menu-item">
+    <span>{{ label }}</span>
+    <span class="menu-shortcut">{{ formatForDisplay(hotkey) }}</span>
+  </div>
+</template>
+```
+
+## Validation
+
+```ts
+import { validateHotkey } from '@tanstack/vue-hotkeys'
+
+const result = validateHotkey('Alt+A')
+```
diff --git a/mintlify/hotkeys/framework/vue/guides/hotkey-recording.md b/mintlify/hotkeys/framework/vue/guides/hotkey-recording.md
new file mode 100644
index 000000000..ee7cd7d15
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/hotkey-recording.md
@@ -0,0 +1,94 @@
+---
+title: Hotkey Recording Guide
+id: hotkey-recording
+---
+
+TanStack Hotkeys provides the `useHotkeyRecorder` composable for building shortcut customization UIs in Vue.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { formatForDisplay, useHotkeyRecorder } from '@tanstack/vue-hotkeys'
+
+const recorder = useHotkeyRecorder({
+  onRecord: (hotkey) => {
+    console.log('Recorded:', hotkey)
+  },
+})
+</script>
+
+<template>
+  <div>
+    <button @click="recorder.isRecording ? recorder.stopRecording() : recorder.startRecording()">
+      {{
+        recorder.isRecording
+          ? 'Press a key combination...'
+          : recorder.recordedHotkey
+            ? formatForDisplay(recorder.recordedHotkey)
+            : 'Click to record'
+      }}
+    </button>
+    <button v-if="recorder.isRecording" @click="recorder.cancelRecording()">
+      Cancel
+    </button>
+  </div>
+</template>
+```
+
+## Return Value
+
+- `isRecording`: reactive ref-like value indicating whether recording is active
+- `recordedHotkey`: reactive ref-like value with the most recently recorded hotkey
+- `startRecording()`: start listening for key presses
+- `stopRecording()`: stop listening and keep the current recording
+- `cancelRecording()`: stop listening and discard the in-progress recording
+
+## Options
+
+```ts
+useHotkeyRecorder({
+  onRecord: (hotkey) => {},
+  onCancel: () => {},
+  onClear: () => {},
+})
+```
+
+## Global Default Options via Provider
+
+```vue
+<script setup lang="ts">
+import { HotkeysProvider } from '@tanstack/vue-hotkeys'
+</script>
+
+<template>
+  <HotkeysProvider
+    :default-options="{
+      hotkeyRecorder: {
+        onCancel: () => console.log('Recording cancelled'),
+      },
+    }"
+  >
+    <AppContent />
+  </HotkeysProvider>
+</template>
+```
+
+### `ignoreInputs`
+
+The `HotkeyRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+```ts
+useHotkeyRecorder({
+  ignoreInputs: false, // record even from inside inputs
+  onRecord: (hotkey) => console.log(hotkey),
+})
+```
+
+## Recording Behavior
+
+- Modifier-only presses do not complete a recording.
+- Modifier plus key combinations record the full shortcut.
+- Escape cancels recording.
+- Backspace and Delete clear the shortcut.
+- Recorded values are normalized to portable `Mod` format.
diff --git a/mintlify/hotkeys/framework/vue/guides/hotkeys.md b/mintlify/hotkeys/framework/vue/guides/hotkeys.md
new file mode 100644
index 000000000..5b665d024
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/hotkeys.md
@@ -0,0 +1,255 @@
+---
+title: Hotkeys Guide
+id: hotkeys
+---
+
+The `useHotkey` composable is the primary way to register keyboard shortcuts in Vue applications. It wraps the singleton `HotkeyManager` with automatic cleanup, support for template refs, and reactive option syncing.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+useHotkey('Mod+S', () => {
+  saveDocument()
+})
+</script>
+```
+
+The callback receives the original `KeyboardEvent` as the first argument and a `HotkeyCallbackContext` as the second:
+
+```ts
+useHotkey('Mod+S', (event, context) => {
+  console.log(context.hotkey)
+  console.log(context.parsedHotkey)
+})
+```
+
+## Default Options
+
+`useHotkey` uses the same core defaults as the framework-agnostic manager:
+
+```ts
+useHotkey('Mod+S', callback, {
+  enabled: true,
+  preventDefault: true,
+  stopPropagation: true,
+  eventType: 'keydown',
+  requireReset: false,
+  ignoreInputs: undefined,
+  target: document,
+  platform: undefined,
+  conflictBehavior: 'warn',
+})
+```
+
+## Reactive Options
+
+Vue-specific options can be plain values, refs, or getters.
+
+### `enabled`
+
+When `enabled` is false, the hotkey **stays registered** (visible in devtools); only the callback is suppressed.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const isEditing = ref(false)
+
+useHotkey('Mod+S', () => save(), { enabled: isEditing })
+</script>
+```
+
+### `target`
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const panelRef = ref<HTMLDivElement | null>(null)
+
+useHotkey('Escape', () => closePanel(), { target: panelRef })
+</script>
+
+<template>
+  <div ref="panelRef" tabindex="0">Panel content</div>
+</template>
+```
+
+## Global Default Options via Provider
+
+```vue
+<script setup lang="ts">
+import { HotkeysProvider } from '@tanstack/vue-hotkeys'
+</script>
+
+<template>
+  <HotkeysProvider
+    :default-options="{
+      hotkey: { preventDefault: false, ignoreInputs: false },
+    }"
+  >
+    <AppContent />
+  </HotkeysProvider>
+</template>
+```
+
+## Common Options
+
+### `requireReset`
+
+```ts
+useHotkey('Escape', () => closePanel(), { requireReset: true })
+```
+
+### `ignoreInputs`
+
+```ts
+useHotkey('K', () => openSearch())
+useHotkey('Enter', () => submit(), { ignoreInputs: false })
+```
+
+### `conflictBehavior`
+
+```ts
+useHotkey('Mod+S', () => save(), { conflictBehavior: 'replace' })
+```
+
+### `platform`
+
+```ts
+useHotkey('Mod+S', () => save(), { platform: 'mac' })
+```
+
+## Automatic Cleanup
+
+Hotkeys are automatically unregistered when the owning component unmounts.
+
+## Registering Multiple Hotkeys
+
+When you need to register several hotkeys at once — or a dynamic, variable-length list — use the `useHotkeys` (plural) composable:
+
+```vue
+<script setup>
+import { useHotkeys } from '@tanstack/vue-hotkeys'
+
+useHotkeys([
+  { hotkey: 'Mod+S', callback: () => save() },
+  { hotkey: 'Mod+Z', callback: () => undo() },
+  { hotkey: 'Escape', callback: () => close() },
+])
+</script>
+```
+
+### Common Options with Per-Hotkey Overrides
+
+Pass shared options as the second argument. Per-definition options override the common ones:
+
+```ts
+useHotkeys(
+  [
+    { hotkey: 'Mod+S', callback: () => save() },
+    { hotkey: 'Mod+Z', callback: () => undo(), options: { enabled: false } },
+  ],
+  { preventDefault: true },
+)
+```
+
+### Dynamic Hotkey Lists
+
+Pass a getter or computed ref as the first argument for reactive arrays:
+
+```vue
+<script setup>
+import { computed } from 'vue'
+import { useHotkeys } from '@tanstack/vue-hotkeys'
+
+const items = computed(() => [...])
+
+useHotkeys(
+  () => items.value.map((item) => ({
+    hotkey: item.shortcut,
+    callback: item.action,
+  })),
+)
+</script>
+```
+
+The composable watches for changes and diffs registrations automatically.
+
+## Metadata (name & description)
+
+Every hotkey registration can carry a `meta` object with a `name` and `description`. This metadata is informational only -- it does not affect hotkey behavior -- but it flows through to registrations and devtools, making it easy to build shortcut palettes and help screens.
+
+```ts
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document' },
+})
+```
+
+The `meta` option is typed as `HotkeyMeta`, which ships with `name` and `description` fields. You can extend it with additional properties using TypeScript declaration merging:
+
+```ts
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    icon?: string
+    group?: string
+  }
+}
+
+useHotkey('Mod+S', () => save(), {
+  meta: { name: 'Save', description: 'Save the document', icon: 'floppy', group: 'File' },
+})
+```
+
+## Introspecting Registrations
+
+Use the `useHotkeyRegistrations` composable to get a live view of all hotkey and sequence registrations. This is useful for building shortcut palettes, help dialogs, or devtools.
+
+```vue
+<script setup lang="ts">
+import { useHotkeyRegistrations } from '@tanstack/vue-hotkeys'
+
+const { hotkeys, sequences } = useHotkeyRegistrations()
+</script>
+
+<template>
+  <div>
+    <h2>Keyboard Shortcuts</h2>
+    <ul>
+      <li v-for="reg in hotkeys" :key="reg.hotkey">
+        <kbd>{{ reg.hotkey }}</kbd>
+        <span v-if="reg.meta?.name"> — {{ reg.meta.name }}</span>
+        <p v-if="reg.meta?.description">{{ reg.meta.description }}</p>
+      </li>
+    </ul>
+    <template v-if="sequences.length > 0">
+      <h2>Sequences</h2>
+      <ul>
+        <li v-for="reg in sequences" :key="reg.sequence.join(' ')">
+          <kbd>{{ reg.sequence.join(' → ') }}</kbd>
+          <span v-if="reg.meta?.name"> — {{ reg.meta.name }}</span>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+```
+
+The returned `hotkeys` array contains registration objects with the hotkey string, options (including `meta`), and enabled state. The `sequences` array contains sequence registrations with the same structure.
+
+## The Hotkey Manager
+
+You can always reach for the underlying manager directly:
+
+```ts
+import { getHotkeyManager } from '@tanstack/vue-hotkeys'
+
+const manager = getHotkeyManager()
+manager.isRegistered('Mod+S')
+manager.getRegistrationCount()
+```
diff --git a/mintlify/hotkeys/framework/vue/guides/key-state-tracking.md b/mintlify/hotkeys/framework/vue/guides/key-state-tracking.md
new file mode 100644
index 000000000..49b61f047
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/key-state-tracking.md
@@ -0,0 +1,98 @@
+---
+title: Key State Tracking Guide
+id: key-state-tracking
+---
+
+TanStack Hotkeys provides three Vue composables for tracking live keyboard state: `useHeldKeys`, `useHeldKeyCodes`, and `useKeyHold`.
+
+## `useHeldKeys`
+
+```vue
+<script setup lang="ts">
+import { useHeldKeys } from '@tanstack/vue-hotkeys'
+
+const heldKeys = useHeldKeys()
+</script>
+
+<template>
+  <div>{{ heldKeys.length > 0 ? heldKeys.join(' + ') : 'No keys held' }}</div>
+</template>
+```
+
+## `useHeldKeyCodes`
+
+```vue
+<script setup lang="ts">
+import { useHeldKeyCodes } from '@tanstack/vue-hotkeys'
+
+const heldCodes = useHeldKeyCodes()
+</script>
+```
+
+## `useKeyHold`
+
+```vue
+<script setup lang="ts">
+import { useKeyHold } from '@tanstack/vue-hotkeys'
+
+const isShiftHeld = useKeyHold('Shift')
+</script>
+
+<template>
+  <span :class="{ active: isShiftHeld }">Shift</span>
+</template>
+```
+
+## Common Patterns
+
+### Hold-to-Reveal UI
+
+```vue
+<script setup lang="ts">
+import { useKeyHold } from '@tanstack/vue-hotkeys'
+
+const isShiftHeld = useKeyHold('Shift')
+</script>
+
+<template>
+  <button v-if="isShiftHeld">Permanently Delete</button>
+  <button v-else>Move to Trash</button>
+</template>
+```
+
+### Debugging Key Display
+
+```vue
+<script setup lang="ts">
+import {
+  formatForDisplay,
+  useHeldKeyCodes,
+  useHeldKeys,
+} from '@tanstack/vue-hotkeys'
+import type { RegisterableHotkey } from '@tanstack/vue-hotkeys'
+
+const heldKeys = useHeldKeys()
+const heldCodes = useHeldKeyCodes()
+</script>
+
+<template>
+  <div v-for="key in heldKeys" :key="key">
+    <strong>{{
+      formatForDisplay(key as RegisterableHotkey, { useSymbols: true })
+    }}</strong>
+    <span>{{ heldCodes[key] }}</span>
+  </div>
+</template>
+```
+
+## Under the Hood
+
+All three composables subscribe to the singleton `KeyStateTracker`:
+
+```ts
+import { getKeyStateTracker } from '@tanstack/vue-hotkeys'
+
+const tracker = getKeyStateTracker()
+tracker.getHeldKeys()
+tracker.isKeyHeld('Shift')
+```
diff --git a/mintlify/hotkeys/framework/vue/guides/sequence-recording.md b/mintlify/hotkeys/framework/vue/guides/sequence-recording.md
new file mode 100644
index 000000000..c36cbad4d
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/sequence-recording.md
@@ -0,0 +1,98 @@
+---
+title: Sequence Recording Guide
+id: sequence-recording
+---
+
+TanStack Hotkeys provides the `useHotkeySequenceRecorder` composable for building UIs where users record **multi-chord sequences** (Vim-style shortcuts). Each step is captured like a single hotkey chord; users finish with **Enter** by default, or you can use manual commit and optional idle timeout.
+
+## Basic usage
+
+```vue
+import { useHotkeySequenceRecorder, formatForDisplay } from '@tanstack/vue-hotkeys'
+import type { HotkeySequence } from '@tanstack/vue-hotkeys'
+
+function HotkeySequenceRecorder() {
+  const recorder = useHotkeySequenceRecorder({
+    onRecord: (sequence: HotkeySequence) => {
+      console.log('Recorded:', sequence)
+    },
+  })
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={
+          recorder.isRecording ? recorder.cancelRecording : recorder.startRecording
+        }
+      >
+        {recorder.isRecording
+          ? 'Press chords, then Enter…'
+          : recorder.recordedSequence
+            ? recorder.recordedSequence.map((h) => formatForDisplay(h)).join(' ')
+            : 'Click to record'}
+      </button>
+      {recorder.isRecording && (
+        <button type="button" onClick={recorder.cancelRecording}>
+          Cancel
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isRecording` | `boolean` | Whether the recorder is listening |
+| `steps` | `HotkeySequence` | Chords captured in the current session |
+| `recordedSequence` | `HotkeySequence \| null` | Last committed sequence |
+| `startRecording` | `() => void` | Start a new session |
+| `stopRecording` | `() => void` | Stop without calling `onRecord` |
+| `cancelRecording` | `() => void` | Stop and call `onCancel` |
+| `commitRecording` | `() => void` | Commit current `steps` (no-op if empty) |
+
+## Options
+
+Core options live on `HotkeySequenceRecorderOptions` from `@tanstack/hotkeys`:
+
+- `onRecord(sequence)` — called when a sequence is committed (including `[]` when cleared via Backspace with no steps).
+- `onCancel`, `onClear` — same intent as the hotkey recorder.
+- `commitKeys` — `'enter'` (default) or `'none'`. With `'none'`, only `commitRecording()` (or `idleTimeoutMs`) finishes recording; plain Enter can be recorded as a chord.
+- `commitOnEnter` — when `commitKeys` is `'enter'`, set to `false` to treat Enter as a normal chord (then use `commitRecording()` or idle timeout to finish).
+- `idleTimeoutMs` — optional milliseconds of inactivity **after the last completed chord** to auto-commit. The timer does not run while waiting for the **first** chord.
+
+### Provider defaults
+
+```vue
+<HotkeysProvider
+  defaultOptions={{
+    hotkeySequenceRecorder: {
+      idleTimeoutMs: 2000,
+    },
+  }}
+>
+  <App />
+</HotkeysProvider>
+```
+
+### `ignoreInputs`
+
+The `HotkeySequenceRecorderOptions` supports an `ignoreInputs` option (defaults to `true`). When `true`, the recorder will not intercept normal typing in text inputs, textareas, selects, or contentEditable elements -- keystrokes pass through to the input as usual. Pressing **Escape** still cancels recording even when focused on an input. Set `ignoreInputs: false` if you want the recorder to capture keys from within input elements.
+
+## Behavior
+
+| Input | Behavior |
+|-------|----------|
+| Valid chord | Appended to `steps`; listener stays active |
+| Enter (no modifiers), `commitKeys: 'enter'`, `steps.length >= 1` | Commits and calls `onRecord` |
+| Escape | Cancels; `onCancel` |
+| Backspace / Delete (no modifiers) | Removes last step, or if empty runs `onClear` + `onRecord([])` and stops |
+
+Recorded chords use portable `Mod` format, same as `HotkeyRecorder`.
+
+## Under the hood
+
+`useHotkeySequenceRecorder` wraps the `HotkeySequenceRecorder` class and subscribes to its TanStack Store, same pattern as `useHotkeyRecorder`.
diff --git a/mintlify/hotkeys/framework/vue/guides/sequences.md b/mintlify/hotkeys/framework/vue/guides/sequences.md
new file mode 100644
index 000000000..d860e4179
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/guides/sequences.md
@@ -0,0 +1,134 @@
+---
+title: Sequences Guide
+id: sequences
+---
+
+TanStack Hotkeys supports multi-key sequences in Vue, where keys are pressed one after another rather than simultaneously.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+
+useHotkeySequence(['G', 'G'], () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+})
+</script>
+```
+
+## Many sequences at once
+
+When you need several sequences—or a **reactive** list whose length changes—use `useHotkeySequences` instead of many `useHotkeySequence` calls. One composable registers every sequence safely.
+
+```vue
+<script setup lang="ts">
+import { useHotkeySequences } from '@tanstack/vue-hotkeys'
+
+useHotkeySequences([
+  { sequence: ['G', 'G'], callback: () => scrollToTop() },
+  { sequence: ['D', 'D'], callback: () => deleteLine(), options: { timeout: 500 } },
+])
+</script>
+```
+
+Options merge like `useHotkeys`: `HotkeysProvider` defaults, then `commonOptions`, then each definition’s `options`.
+
+## Sequence Options
+
+```ts
+useHotkeySequence(['G', 'G'], callback, {
+  timeout: 1000,
+  enabled: true,
+})
+```
+
+### Reactive `enabled`
+
+When disabled, the sequence **stays registered** (visible in devtools); only execution is suppressed.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+
+const isVimMode = ref(true)
+
+useHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  enabled: isVimMode,
+})
+</script>
+```
+
+## Global Default Options via Provider
+
+```vue
+<script setup lang="ts">
+import { HotkeysProvider } from '@tanstack/vue-hotkeys'
+</script>
+
+<template>
+  <HotkeysProvider
+    :default-options="{
+      hotkeySequence: { timeout: 1500 },
+    }"
+  >
+    <AppContent />
+  </HotkeysProvider>
+</template>
+```
+
+### `meta`
+
+Sequences support the same `meta` option as hotkeys, allowing you to attach a `name` and `description` for use in shortcut palettes and devtools.
+
+```ts
+useHotkeySequence(['G', 'G'], () => scrollToTop(), {
+  meta: { name: 'Go to Top', description: 'Scroll to the top of the page' },
+})
+```
+
+See the [Hotkeys Guide](/hotkeys/framework/vue/guides/hotkeys#metadata-name--description) for details on declaration merging and introspecting registrations.
+
+## Chained modifier chords
+
+Each step can use modifiers (for example `Mod+K` then `Mod+C`). You can use the **same** modifier on consecutive steps:
+
+```ts
+useHotkeySequence(['Shift+R', 'Shift+T'], () => doNextAction())
+```
+
+While a sequence is in progress, **modifier-only** keydown events (Shift, Control, Alt, or Meta pressed alone) are ignored: they do not advance the sequence and do not reset progress. A user can press Shift alone between `Shift+R` and `Shift+T` without breaking the sequence.
+
+## Common Patterns
+
+### Vim-Style Navigation
+
+```ts
+useHotkeySequence(['G', 'G'], () => scrollToTop())
+useHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+useHotkeySequence(['D', 'D'], () => deleteLine())
+useHotkeySequence(['D', 'W'], () => deleteWord())
+useHotkeySequence(['C', 'I', 'W'], () => changeInnerWord())
+```
+
+### Konami Code
+
+```ts
+useHotkeySequence(
+  ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'B', 'A'],
+  () => enableEasterEgg(),
+  { timeout: 2000 },
+)
+```
+
+## Under the Hood
+
+`useHotkeySequence` uses the singleton `SequenceManager`. You can also access it directly:
+
+```ts
+import { createSequenceMatcher, getSequenceManager } from '@tanstack/vue-hotkeys'
+
+const manager = getSequenceManager()
+const matcher = createSequenceMatcher(['G', 'G'], { timeout: 1000 })
+```
diff --git a/mintlify/hotkeys/framework/vue/quick-start.md b/mintlify/hotkeys/framework/vue/quick-start.md
new file mode 100644
index 000000000..06a9fecab
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/quick-start.md
@@ -0,0 +1,156 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Hotkeys installed yet? See the [Installation](/hotkeys/installation) page for instructions.
+
+## Your First Hotkey
+
+The `useHotkey` composable is the primary way to register keyboard shortcuts in Vue:
+
+```vue
+<script setup lang="ts">
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+useHotkey('Mod+S', () => {
+  saveDocument()
+})
+</script>
+
+<template>
+  <div>Press Cmd+S (Mac) or Ctrl+S (Windows) to save</div>
+</template>
+```
+
+The `Mod` modifier automatically resolves to `Meta` (Command) on macOS and `Control` on Windows/Linux, so your shortcuts work across platforms without extra logic.
+
+## Common Patterns
+
+### Multiple Hotkeys
+
+```vue
+<script setup lang="ts">
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+useHotkey('Mod+S', () => save())
+useHotkey('Mod+Z', () => undo())
+useHotkey('Mod+Shift+Z', () => redo())
+useHotkey('Mod+F', () => openSearch())
+useHotkey('Escape', () => closeDialog())
+</script>
+```
+
+### Scoped Hotkeys with Template Refs
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const panelRef = ref<HTMLDivElement | null>(null)
+
+useHotkey('Escape', () => closePanel(), { target: panelRef })
+</script>
+
+<template>
+  <div ref="panelRef" tabindex="0">
+    <p>Press Escape while focused here to close</p>
+  </div>
+</template>
+```
+
+### Conditional Hotkeys
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const isOpen = ref(true)
+
+useHotkey('Escape', () => {
+  isOpen.value = false
+}, { enabled: isOpen })
+</script>
+```
+
+### Multi-Key Sequences
+
+```vue
+<script setup lang="ts">
+import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+
+useHotkeySequence(['G', 'G'], () => scrollToTop())
+useHotkeySequence(['G', 'Shift+G'], () => scrollToBottom())
+</script>
+```
+
+For several sequences or a list that changes at runtime, prefer a single `useHotkeySequences([...])` call (see the [Sequences guide](/hotkeys/framework/vue/guides/sequences#many-sequences-at-once)).
+
+### Tracking Held Keys
+
+```vue
+<script setup lang="ts">
+import { useHeldKeys, useKeyHold } from '@tanstack/vue-hotkeys'
+
+const heldKeys = useHeldKeys()
+const isShiftHeld = useKeyHold('Shift')
+</script>
+
+<template>
+  <div class="status-bar">
+    <span v-if="isShiftHeld">Shift mode active</span>
+    <span v-if="heldKeys.length > 0">Keys: {{ heldKeys.join('+') }}</span>
+  </div>
+</template>
+```
+
+### Displaying Hotkeys in the UI
+
+```vue
+<script setup lang="ts">
+import { formatForDisplay, useHotkey } from '@tanstack/vue-hotkeys'
+
+useHotkey('Mod+S', () => save())
+</script>
+
+<template>
+  <button>
+    Save <kbd>{{ formatForDisplay('Mod+S') }}</kbd>
+  </button>
+</template>
+```
+
+## Default Options Provider
+
+Wrap part of your app with `HotkeysProvider` to set default options for all Vue composables in that subtree:
+
+```vue
+<script setup lang="ts">
+import { HotkeysProvider } from '@tanstack/vue-hotkeys'
+</script>
+
+<template>
+  <HotkeysProvider
+    :default-options="{
+      hotkey: { preventDefault: true },
+      hotkeySequence: { timeout: 1500 },
+      hotkeyRecorder: { onCancel: () => console.log('Recording cancelled') },
+    }"
+  >
+    <AppContent />
+  </HotkeysProvider>
+</template>
+```
+
+## Next Steps
+
+- [Hotkeys Guide](/hotkeys/framework/vue/guides/hotkeys)
+- [Sequences Guide](/hotkeys/framework/vue/guides/sequences)
+- [Hotkey Recording Guide](/hotkeys/framework/vue/guides/hotkey-recording)
+- [Sequence Recording Guide](/hotkeys/framework/vue/guides/sequence-recording)
+- [Key State Tracking Guide](/hotkeys/framework/vue/guides/key-state-tracking)
+- [Formatting & Display Guide](/hotkeys/framework/vue/guides/formatting-display)
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/provideHotkeysContext.md b/mintlify/hotkeys/framework/vue/reference/functions/provideHotkeysContext.md
new file mode 100644
index 000000000..ed4d6699d
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/provideHotkeysContext.md
@@ -0,0 +1,22 @@
+---
+id: provideHotkeysContext
+title: provideHotkeysContext
+---
+
+# Function: provideHotkeysContext()
+
+```ts
+function provideHotkeysContext(defaultOptions?): void;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L26)
+
+## Parameters
+
+### defaultOptions?
+
+[`HotkeysProviderOptions`](/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions)
+
+## Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useDefaultHotkeysOptions.md b/mintlify/hotkeys/framework/vue/reference/functions/useDefaultHotkeysOptions.md
new file mode 100644
index 000000000..8b96c48dc
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useDefaultHotkeysOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultHotkeysOptions
+title: useDefaultHotkeysOptions
+---
+
+# Function: useDefaultHotkeysOptions()
+
+```ts
+function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L38)
+
+## Returns
+
+[`HotkeysProviderOptions`](/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions)
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeyCodes.md b/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeyCodes.md
new file mode 100644
index 000000000..4ad6909aa
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeyCodes.md
@@ -0,0 +1,42 @@
+---
+id: useHeldKeyCodes
+title: useHeldKeyCodes
+---
+
+# Function: useHeldKeyCodes()
+
+```ts
+function useHeldKeyCodes(): Ref<Record<string, string>>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHeldKeyCodes.ts:31](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHeldKeyCodes.ts#L31)
+
+Vue composable that returns a reactive ref mapping currently held key names to their physical `event.code` values.
+
+This is useful for debugging which physical key was pressed (e.g. distinguishing
+left vs right Shift via "ShiftLeft" / "ShiftRight").
+
+## Returns
+
+`Ref`\&lt;`Record`\&lt;`string`, `string`\>\>
+
+Reactive ref containing record mapping normalized key names to their `event.code` values
+
+## Example
+
+```vue
+<script setup>
+import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'
+
+const heldKeys = useHeldKeys()
+const heldCodes = useHeldKeyCodes()
+</script>
+
+<template>
+  <div>
+    <kbd v-for="key in heldKeys" :key="key">
+      {{ key }} <small>{{ heldCodes[key] }}</small>
+    </kbd>
+  </div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeys.md b/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeys.md
new file mode 100644
index 000000000..19f2b45b5
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHeldKeys.md
@@ -0,0 +1,40 @@
+---
+id: useHeldKeys
+title: useHeldKeys
+---
+
+# Function: useHeldKeys()
+
+```ts
+function useHeldKeys(): Ref<string[]>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHeldKeys.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHeldKeys.ts#L29)
+
+Vue composable that returns a reactive ref of currently held keyboard keys.
+
+This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
+to the global KeyStateTracker and updates whenever keys are pressed
+or released.
+
+## Returns
+
+`Ref`\&lt;`string`[]\>
+
+Reactive ref containing array of currently held key names
+
+## Example
+
+```vue
+<script setup>
+import { useHeldKeys } from '@tanstack/vue-hotkeys'
+
+const heldKeys = useHeldKeys()
+</script>
+
+<template>
+  <div>
+    Currently pressed: {{ heldKeys.join(' + ') || 'None' }}
+  </div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkey.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkey.md
new file mode 100644
index 000000000..b5f5f4f55
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkey.md
@@ -0,0 +1,97 @@
+---
+id: useHotkey
+title: useHotkey
+---
+
+# Function: useHotkey()
+
+```ts
+function useHotkey(
+   hotkey, 
+   callback, 
+   options): void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkey.ts:99](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkey.ts#L99)
+
+Vue composable for registering a keyboard hotkey.
+
+Uses the singleton HotkeyManager for efficient event handling.
+The callback receives both the keyboard event and a context object
+containing the hotkey string and parsed hotkey.
+
+This composable automatically tracks reactive dependencies and updates
+the registration when options or the callback change.
+
+## Parameters
+
+### hotkey
+
+`MaybeRefOrGetter`\&lt;`RegisterableHotkey`\>
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
+
+### callback
+
+`HotkeyCallback`
+
+The function to call when the hotkey is pressed
+
+### options
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeyOptions`](/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions)\> = `{}`
+
+Options for the hotkey behavior
+
+## Returns
+
+`void`
+
+## Examples
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const count = ref(0)
+
+// Callback always has access to latest count value
+useHotkey('Mod+S', (event, { hotkey }) => {
+  console.log(`Save triggered, count is ${count.value}`)
+  handleSave()
+})
+</script>
+```
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const isOpen = ref(false)
+
+// enabled option is reactive
+useHotkey('Escape', () => {
+  isOpen.value = false
+}, { enabled: isOpen })
+</script>
+```
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useHotkey } from '@tanstack/vue-hotkeys'
+
+const editorRef = ref<HTMLDivElement | null>(null)
+
+// Scoped to a specific element
+useHotkey('Mod+S', () => {
+  save()
+}, { target: editorRef })
+</script>
+
+<template>
+  <div ref="editorRef">...</div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRecorder.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRecorder.md
new file mode 100644
index 000000000..f5877226a
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRecorder.md
@@ -0,0 +1,64 @@
+---
+id: useHotkeyRecorder
+title: useHotkeyRecorder
+---
+
+# Function: useHotkeyRecorder()
+
+```ts
+function useHotkeyRecorder(options): VueHotkeyRecorder;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:62](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L62)
+
+Vue composable for recording keyboard shortcuts.
+
+This composable provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+class, managing all the complexity of capturing keyboard events, converting them
+to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+to clear.
+
+## Parameters
+
+### options
+
+`MaybeRefOrGetter`\&lt;`HotkeyRecorderOptions`\>
+
+Configuration options for the recorder
+
+## Returns
+
+[`VueHotkeyRecorder`](/hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder)
+
+An object with recording state and control functions
+
+## Example
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'
+
+const shortcut = ref<Hotkey>('Mod+S')
+
+const recorder = useHotkeyRecorder({
+  onRecord: (hotkey) => {
+    shortcut.value = hotkey
+  },
+  onCancel: () => {
+    console.log('Recording cancelled')
+  },
+})
+</script>
+
+<template>
+  <div>
+    <button @click="recorder.startRecording()">
+      {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}
+    </button>
+    <div v-if="recorder.recordedHotkey">
+      Recording: {{ recorder.recordedHotkey }}
+    </div>
+  </div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRegistrations.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRegistrations.md
new file mode 100644
index 000000000..103fbbbb3
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeyRegistrations.md
@@ -0,0 +1,25 @@
+---
+id: useHotkeyRegistrations
+title: useHotkeyRegistrations
+---
+
+# Function: useHotkeyRegistrations()
+
+```ts
+function useHotkeyRegistrations(): HotkeyRegistrationsResult;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRegistrations.ts:33](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRegistrations.ts#L33)
+
+Vue composable that reactively reads all hotkey and sequence registrations
+from the singleton managers.
+
+This is a standalone composable that does NOT require the HotkeysProvider.
+It subscribes to both HotkeyManager and SequenceManager stores and
+triggers reactivity when registrations change.
+
+## Returns
+
+[`HotkeyRegistrationsResult`](/hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult)
+
+Object with `hotkeys` and `sequences` refs
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequence.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequence.md
new file mode 100644
index 000000000..20158c877
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequence.md
@@ -0,0 +1,81 @@
+---
+id: useHotkeySequence
+title: useHotkeySequence
+---
+
+# Function: useHotkeySequence()
+
+```ts
+function useHotkeySequence(
+   sequence, 
+   callback, 
+   options): void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequence.ts:76](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequence.ts#L76)
+
+Vue composable for registering a keyboard shortcut sequence (Vim-style).
+
+This composable allows you to register multi-key sequences like 'g g' or 'd d'
+that trigger when the full sequence is pressed within a timeout.
+
+Each step may include modifiers. You can chain the same modifier across
+steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+advance the sequence or reset progress.
+
+## Parameters
+
+### sequence
+
+`MaybeRefOrGetter`\&lt;`HotkeySequence`\>
+
+Array of hotkey strings that form the sequence
+
+### callback
+
+`HotkeyCallback`
+
+Function to call when the sequence is completed
+
+### options
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeySequenceOptions`](/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions)\> = `{}`
+
+Options for the sequence behavior
+
+## Returns
+
+`void`
+
+## Example
+
+```vue
+<script setup>
+import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+
+// 'g g' to go to top
+useHotkeySequence(['G', 'G'], () => {
+  scrollToTop()
+})
+
+// 'd d' to delete line
+useHotkeySequence(['D', 'D'], () => {
+  deleteLine()
+})
+
+// 'd i w' to delete inner word
+useHotkeySequence(['D', 'I', 'W'], () => {
+  deleteInnerWord()
+}, { timeout: 500 })
+
+// Same modifier on consecutive steps (bare Shift between chords is ignored)
+useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+  nextAction()
+})
+</script>
+
+<template>
+  <div>...</div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequenceRecorder.md
new file mode 100644
index 000000000..587c40771
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequenceRecorder.md
@@ -0,0 +1,24 @@
+---
+id: useHotkeySequenceRecorder
+title: useHotkeySequenceRecorder
+---
+
+# Function: useHotkeySequenceRecorder()
+
+```ts
+function useHotkeySequenceRecorder(options): VueHotkeySequenceRecorder;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L24)
+
+Vue composable for recording multi-chord sequences (Vim-style shortcuts).
+
+## Parameters
+
+### options
+
+`MaybeRefOrGetter`\&lt;`HotkeySequenceRecorderOptions`\>
+
+## Returns
+
+[`VueHotkeySequenceRecorder`](/hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder)
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequences.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequences.md
new file mode 100644
index 000000000..01067afba
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeySequences.md
@@ -0,0 +1,70 @@
+---
+id: useHotkeySequences
+title: useHotkeySequences
+---
+
+# Function: useHotkeySequences()
+
+```ts
+function useHotkeySequences(definitions, commonOptions): void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequences.ts:68](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequences.ts#L68)
+
+Vue composable for registering multiple keyboard shortcut sequences at once (Vim-style).
+
+Uses the singleton SequenceManager. Accepts a dynamic array of definitions, or a getter/ref
+that returns one, so you can register variable-length lists safely.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+Definitions with an empty `sequence` are skipped (no registration).
+
+## Parameters
+
+### definitions
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeySequenceDefinition`](/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition)[]\>
+
+Array of sequence definitions, or a getter/ref
+
+### commonOptions
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeySequenceOptions`](/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions)\> = `{}`
+
+Shared options applied to all sequences (overridden by per-definition options)
+
+## Returns
+
+`void`
+
+## Examples
+
+```vue
+<script setup>
+import { useHotkeySequences } from '@tanstack/vue-hotkeys'
+
+useHotkeySequences([
+  { sequence: ['G', 'G'], callback: () => scrollToTop() },
+  { sequence: ['D', 'D'], callback: () => deleteLine() },
+])
+</script>
+```
+
+```vue
+<script setup>
+import { computed } from 'vue'
+import { useHotkeySequences } from '@tanstack/vue-hotkeys'
+
+const items = computed(() => [...])
+useHotkeySequences(
+  () => items.value.map((item) => ({
+    sequence: item.chords,
+    callback: item.action,
+    options: { enabled: item.enabled },
+  })),
+  { preventDefault: true },
+)
+</script>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeys.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeys.md
new file mode 100644
index 000000000..c078247ee
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeys.md
@@ -0,0 +1,71 @@
+---
+id: useHotkeys
+title: useHotkeys
+---
+
+# Function: useHotkeys()
+
+```ts
+function useHotkeys(hotkeys, commonOptions): void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeys.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeys.ts#L73)
+
+Vue composable for registering multiple keyboard hotkeys at once.
+
+Uses the singleton HotkeyManager for efficient event handling.
+Accepts a dynamic array of hotkey definitions, making it safe to use
+with variable-length lists.
+
+Options are merged in this order:
+HotkeysProvider defaults &lt; commonOptions &lt; per-definition options
+
+## Parameters
+
+### hotkeys
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeyDefinition`](/hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition)[]\>
+
+Array of hotkey definitions to register, or a getter/ref
+
+### commonOptions
+
+`MaybeRefOrGetter`\&lt;[`UseHotkeyOptions`](/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions)\> = `{}`
+
+Shared options applied to all hotkeys (overridden by per-definition options)
+
+## Returns
+
+`void`
+
+## Examples
+
+```vue
+<script setup>
+import { useHotkeys } from '@tanstack/vue-hotkeys'
+
+useHotkeys([
+  { hotkey: 'Mod+S', callback: () => save() },
+  { hotkey: 'Mod+Z', callback: () => undo() },
+  { hotkey: 'Escape', callback: () => close() },
+])
+</script>
+```
+
+```vue
+<script setup>
+import { computed } from 'vue'
+import { useHotkeys } from '@tanstack/vue-hotkeys'
+
+const items = computed(() => [...])
+// Dynamic hotkeys from reactive data
+useHotkeys(
+  () => items.value.map((item) => ({
+    hotkey: item.shortcut,
+    callback: item.action,
+    options: { enabled: item.enabled },
+  })),
+  { preventDefault: true },
+)
+</script>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useHotkeysContext.md b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeysContext.md
new file mode 100644
index 000000000..eb046dcd7
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useHotkeysContext.md
@@ -0,0 +1,16 @@
+---
+id: useHotkeysContext
+title: useHotkeysContext
+---
+
+# Function: useHotkeysContext()
+
+```ts
+function useHotkeysContext(): HotkeysContextValue | null;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:34](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L34)
+
+## Returns
+
+`HotkeysContextValue` \| `null`
diff --git a/mintlify/hotkeys/framework/vue/reference/functions/useKeyHold.md b/mintlify/hotkeys/framework/vue/reference/functions/useKeyHold.md
new file mode 100644
index 000000000..6c247eec4
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/functions/useKeyHold.md
@@ -0,0 +1,66 @@
+---
+id: useKeyHold
+title: useKeyHold
+---
+
+# Function: useKeyHold()
+
+```ts
+function useKeyHold(key): Ref<boolean>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useKeyHold.ts:51](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useKeyHold.ts#L51)
+
+Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
+
+This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
+to the global KeyStateTracker and uses a selector to determine if
+the specified key is held.
+
+## Parameters
+
+### key
+
+`MaybeRefOrGetter`\&lt;`IndividualKey`\>
+
+The key to check (e.g., 'Shift', 'Control', 'A')
+
+## Returns
+
+`Ref`\&lt;`boolean`\>
+
+Reactive ref that is true if the key is currently held down
+
+## Examples
+
+```vue
+<script setup>
+import { useKeyHold } from '@tanstack/vue-hotkeys'
+
+const isShiftHeld = useKeyHold('Shift')
+</script>
+
+<template>
+  <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
+    {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
+  </div>
+</template>
+```
+
+```vue
+<script setup>
+import { useKeyHold } from '@tanstack/vue-hotkeys'
+
+const ctrl = useKeyHold('Control')
+const shift = useKeyHold('Shift')
+const alt = useKeyHold('Alt')
+</script>
+
+<template>
+  <div>
+    <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
+    <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
+    <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
+  </div>
+</template>
+```
diff --git a/mintlify/hotkeys/framework/vue/reference/index.md b/mintlify/hotkeys/framework/vue/reference/index.md
new file mode 100644
index 000000000..9486488b7
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/index.md
@@ -0,0 +1,37 @@
+---
+id: "@tanstack/vue-hotkeys"
+title: "@tanstack/vue-hotkeys"
+---
+
+# @tanstack/vue-hotkeys
+
+## Interfaces
+
+- [HotkeyRegistrationsResult](/hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult)
+- [HotkeysProviderOptions](/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions)
+- [UseHotkeyDefinition](/hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition)
+- [UseHotkeyOptions](/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions)
+- [UseHotkeySequenceDefinition](/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition)
+- [UseHotkeySequenceOptions](/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions)
+- [VueHotkeyRecorder](/hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder)
+- [VueHotkeySequenceRecorder](/hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder)
+
+## Variables
+
+- [HotkeysProvider](/hotkeys/framework/vue/reference/variables/HotkeysProvider)
+
+## Functions
+
+- [provideHotkeysContext](/hotkeys/framework/vue/reference/functions/provideHotkeysContext)
+- [useDefaultHotkeysOptions](/hotkeys/framework/vue/reference/functions/useDefaultHotkeysOptions)
+- [useHeldKeyCodes](/hotkeys/framework/vue/reference/functions/useHeldKeyCodes)
+- [useHeldKeys](/hotkeys/framework/vue/reference/functions/useHeldKeys)
+- [useHotkey](/hotkeys/framework/vue/reference/functions/useHotkey)
+- [useHotkeyRecorder](/hotkeys/framework/vue/reference/functions/useHotkeyRecorder)
+- [useHotkeyRegistrations](/hotkeys/framework/vue/reference/functions/useHotkeyRegistrations)
+- [useHotkeys](/hotkeys/framework/vue/reference/functions/useHotkeys)
+- [useHotkeysContext](/hotkeys/framework/vue/reference/functions/useHotkeysContext)
+- [useHotkeySequence](/hotkeys/framework/vue/reference/functions/useHotkeySequence)
+- [useHotkeySequenceRecorder](/hotkeys/framework/vue/reference/functions/useHotkeySequenceRecorder)
+- [useHotkeySequences](/hotkeys/framework/vue/reference/functions/useHotkeySequences)
+- [useKeyHold](/hotkeys/framework/vue/reference/functions/useKeyHold)
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult.md b/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult.md
new file mode 100644
index 000000000..3efc2c54a
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeyRegistrationsResult.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyRegistrationsResult
+title: HotkeyRegistrationsResult
+---
+
+# Interface: HotkeyRegistrationsResult
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRegistrations.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRegistrations.ts#L16)
+
+Return type for useHotkeyRegistrations.
+
+## Properties
+
+### hotkeys
+
+```ts
+hotkeys: Ref<HotkeyRegistrationView[]>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRegistrations.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRegistrations.ts#L18)
+
+All registered hotkeys (public view, no callbacks)
+
+***
+
+### sequences
+
+```ts
+sequences: Ref<SequenceRegistrationView[]>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRegistrations.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRegistrations.ts#L20)
+
+All registered sequences
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions.md b/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions.md
new file mode 100644
index 000000000..3f0337e9e
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/HotkeysProviderOptions.md
@@ -0,0 +1,48 @@
+---
+id: HotkeysProviderOptions
+title: HotkeysProviderOptions
+---
+
+# Interface: HotkeysProviderOptions
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L10)
+
+## Properties
+
+### hotkey?
+
+```ts
+optional hotkey: Partial<UseHotkeyOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L11)
+
+***
+
+### hotkeyRecorder?
+
+```ts
+optional hotkeyRecorder: Partial<HotkeyRecorderOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L12)
+
+***
+
+### hotkeySequence?
+
+```ts
+optional hotkeySequence: Partial<UseHotkeySequenceOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L14)
+
+***
+
+### hotkeySequenceRecorder?
+
+```ts
+optional hotkeySequenceRecorder: Partial<HotkeySequenceRecorderOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProviderContext.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProviderContext.ts#L13)
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition.md b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition.md
new file mode 100644
index 000000000..5ddaf0f5b
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeyDefinition
+title: UseHotkeyDefinition
+---
+
+# Interface: UseHotkeyDefinition
+
+Defined in: [packages/vue-hotkeys/src/useHotkeys.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeys.ts#L19)
+
+A single hotkey definition for use with `useHotkeys`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeys.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeys.ts#L23)
+
+The function to call when the hotkey is pressed
+
+***
+
+### hotkey
+
+```ts
+hotkey: MaybeRefOrGetter<RegisterableHotkey>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeys.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeys.ts#L21)
+
+The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object
+
+***
+
+### options?
+
+```ts
+optional options: MaybeRefOrGetter<UseHotkeyOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeys.ts:25](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeys.ts#L25)
+
+Per-hotkey options (merged on top of commonOptions)
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions.md b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions.md
new file mode 100644
index 000000000..09dd415c9
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeyOptions.md
@@ -0,0 +1,40 @@
+---
+id: UseHotkeyOptions
+title: UseHotkeyOptions
+---
+
+# Interface: UseHotkeyOptions
+
+Defined in: [packages/vue-hotkeys/src/useHotkey.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkey.ts#L17)
+
+## Extends
+
+- `Omit`\&lt;`HotkeyOptions`, `"enabled"` \| `"target"`\>
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: MaybeRefOrGetter<boolean>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkey.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkey.ts#L26)
+
+Whether the hotkey is active.
+Can be a Ref, a getter function, or a boolean value.
+Defaults to true.
+
+***
+
+### target?
+
+```ts
+optional target: MaybeRefOrGetter<HTMLElement | Document | Window | null>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkey.ts:32](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkey.ts#L32)
+
+The DOM element to attach the event listener to.
+Can be a Ref, a getter function, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition.md b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition.md
new file mode 100644
index 000000000..669d1ead9
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceDefinition.md
@@ -0,0 +1,46 @@
+---
+id: UseHotkeySequenceDefinition
+title: UseHotkeySequenceDefinition
+---
+
+# Interface: UseHotkeySequenceDefinition
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequences.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequences.ts#L15)
+
+A single sequence definition for use with `useHotkeySequences`.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequences.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequences.ts#L19)
+
+The function to call when the sequence is completed
+
+***
+
+### options?
+
+```ts
+optional options: MaybeRefOrGetter<UseHotkeySequenceOptions>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequences.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequences.ts#L21)
+
+Per-sequence options (merged on top of commonOptions)
+
+***
+
+### sequence
+
+```ts
+sequence: MaybeRefOrGetter<HotkeySequence>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequences.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequences.ts#L17)
+
+Array of hotkey strings that form the sequence
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions.md b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions.md
new file mode 100644
index 000000000..4418f5ebc
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/UseHotkeySequenceOptions.md
@@ -0,0 +1,40 @@
+---
+id: UseHotkeySequenceOptions
+title: UseHotkeySequenceOptions
+---
+
+# Interface: UseHotkeySequenceOptions
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequence.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequence.ts#L12)
+
+## Extends
+
+- `Omit`\&lt;`SequenceOptions`, `"enabled"` \| `"target"`\>
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: MaybeRefOrGetter<boolean>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequence.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequence.ts#L21)
+
+Whether the sequence is active.
+Can be a Ref, a getter function, or a boolean value.
+Defaults to true.
+
+***
+
+### target?
+
+```ts
+optional target: MaybeRefOrGetter<HTMLElement | Document | Window | null>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequence.ts:27](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequence.ts#L27)
+
+The DOM element to attach the event listener to.
+Can be a Ref, a getter function, direct DOM element, or null.
+Defaults to document.
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder.md b/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder.md
new file mode 100644
index 000000000..27c3783c5
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeyRecorder.md
@@ -0,0 +1,80 @@
+---
+id: VueHotkeyRecorder
+title: VueHotkeyRecorder
+---
+
+# Interface: VueHotkeyRecorder
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:8](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L8)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L18)
+
+Cancel recording without saving
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: Ref<boolean>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L10)
+
+Whether recording is currently active
+
+***
+
+### recordedHotkey
+
+```ts
+recordedHotkey: Ref<Hotkey | null>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L12)
+
+The currently recorded hotkey (for live preview)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L14)
+
+Start recording a new hotkey
+
+#### Returns
+
+`void`
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeyRecorder.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeyRecorder.ts#L16)
+
+Stop recording (same as cancel)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder.md b/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder.md
new file mode 100644
index 000000000..4a8ed2ba0
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/interfaces/VueHotkeySequenceRecorder.md
@@ -0,0 +1,94 @@
+---
+id: VueHotkeySequenceRecorder
+title: VueHotkeySequenceRecorder
+---
+
+# Interface: VueHotkeySequenceRecorder
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L11)
+
+## Properties
+
+### cancelRecording()
+
+```ts
+cancelRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L17)
+
+#### Returns
+
+`void`
+
+***
+
+### commitRecording()
+
+```ts
+commitRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:18](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L18)
+
+#### Returns
+
+`void`
+
+***
+
+### isRecording
+
+```ts
+isRecording: Ref<boolean>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L12)
+
+***
+
+### recordedSequence
+
+```ts
+recordedSequence: Ref<HotkeySequence | null>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L14)
+
+***
+
+### startRecording()
+
+```ts
+startRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:15](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L15)
+
+#### Returns
+
+`void`
+
+***
+
+### steps
+
+```ts
+steps: Ref<HotkeySequence>;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:13](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L13)
+
+***
+
+### stopRecording()
+
+```ts
+stopRecording: () => void;
+```
+
+Defined in: [packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useHotkeySequenceRecorder.ts#L16)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/framework/vue/reference/variables/HotkeysProvider.md b/mintlify/hotkeys/framework/vue/reference/variables/HotkeysProvider.md
new file mode 100644
index 000000000..eaef0d1de
--- /dev/null
+++ b/mintlify/hotkeys/framework/vue/reference/variables/HotkeysProvider.md
@@ -0,0 +1,49 @@
+---
+id: HotkeysProvider
+title: HotkeysProvider
+---
+
+# Variable: HotkeysProvider
+
+```ts
+const HotkeysProvider: DefineComponent<ExtractPropTypes<{
+  defaultOptions: {
+     default: undefined;
+     type: () => HotkeysProviderOptions;
+  };
+}>, () => 
+  | VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>[]
+  | undefined, {
+}, {
+}, {
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
+  defaultOptions: {
+     default: undefined;
+     type: () => HotkeysProviderOptions;
+  };
+}>, {
+}>, {
+  defaultOptions: HotkeysProviderOptions;
+}, {
+}, {
+}, {
+}, string, ComponentProvideOptions, true, {
+}, any>;
+```
+
+Defined in: [packages/vue-hotkeys/src/HotkeysProvider.tsx:17](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/HotkeysProvider.tsx#L17)
+
+Vue component that provides default options for hotkeys context.
+
+## Example
+
+```vue
+<template>
+  <HotkeysProvider :defaultOptions="{ hotkey: { enabled: true } }">
+    <App />
+  </HotkeysProvider>
+</template>
+```
diff --git a/mintlify/hotkeys/index.mdx b/mintlify/hotkeys/index.mdx
new file mode 100644
index 000000000..5b10a9445
--- /dev/null
+++ b/mintlify/hotkeys/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Hotkeys"
+description: "Type-safe keyboard shortcut management. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Type-safe keyboard shortcut management.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/hotkeys/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/hotkeys">
+    Visit the canonical TanStack Hotkeys website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/hotkeys">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/hotkeys/installation.md b/mintlify/hotkeys/installation.md
new file mode 100644
index 000000000..136fd2abe
--- /dev/null
+++ b/mintlify/hotkeys/installation.md
@@ -0,0 +1,129 @@
+---
+title: Installation
+id: installation
+---
+
+TanStack Hotkeys is compatible with various front-end frameworks. Install the corresponding adapter for your framework using your preferred package manager:
+
+
+
+angular: @tanstack/angular-hotkeys
+lit: @tanstack/lit-hotkeys
+preact: @tanstack/preact-hotkeys
+react: @tanstack/react-hotkeys
+solid: @tanstack/solid-hotkeys
+svelte: @tanstack/svelte-hotkeys
+vue: @tanstack/vue-hotkeys
+
+
+
+Each framework package re-exports everything from the core `@tanstack/hotkeys` package, so there is no need to install the core package separately.
+
+> [!NOTE]
+> If you are not using a framework, you can install the core `@tanstack/hotkeys` package directly for use with vanilla JavaScript.
+
+
+
+### React
+
+Start with the [Quick Start](/hotkeys/framework/react/quick-start) guide. If you want the integrated devtools panel, also install:
+
+
+
+
+
+### Preact
+
+Start with the [API reference](/hotkeys/framework/preact/reference/index) and [guides](/hotkeys/framework/preact/guides/hotkeys). If you want the integrated devtools panel, also install:
+
+
+
+
+
+### Solid
+
+Start with the [API reference](/hotkeys/framework/solid/reference/index) and [guides](/hotkeys/framework/solid/guides/hotkeys). If you want the integrated devtools panel, also install:
+
+
+
+
+
+### Svelte
+
+Start with the [Quick Start](/hotkeys/framework/svelte/quick-start) guide and the Svelte-specific [guides](/hotkeys/framework/svelte/guides/hotkeys).
+
+
+
+
+
+### Angular
+
+Start with the [Quick Start](/hotkeys/framework/angular/quick-start) guide and the Angular-specific [guides](/hotkeys/framework/angular/guides/hotkeys).
+
+Angular currently ships the hotkeys adapter only, so no dedicated Angular devtools package is required.
+
+
+
+
+
+### Vue
+
+Start with the [Quick Start](/hotkeys/framework/vue/quick-start) guide and the Vue-specific [guides](/hotkeys/framework/vue/guides/hotkeys).
+
+If you want the Vue devtools panel component, also install:
+
+
+
+
+
+### Lit
+
+Start with the [Quick Start](/hotkeys/framework/lit/quick-start) guide and the Lit-specific [guides](/hotkeys/framework/lit/guides/hotkeys).
+
+Lit currently ships the hotkeys adapter only, so no dedicated Lit devtools package is required.
+
+
+
+
+
+preact: @tanstack/preact-devtools
+preact: @tanstack/preact-hotkeys-devtools
+react: @tanstack/react-devtools
+react: @tanstack/react-hotkeys-devtools
+solid: @tanstack/solid-devtools
+solid: @tanstack/solid-hotkeys-devtools
+vue: @tanstack/vue-hotkeys-devtools
+
+
+
+
+
+### React
+
+See the [devtools](/hotkeys/devtools) documentation for setup details.
+
+
+
+
+
+### Preact
+
+See the [devtools](/hotkeys/devtools) documentation for setup details.
+
+
+
+
+
+### Solid
+
+See the [devtools](/hotkeys/devtools) documentation for setup details.
+
+
+
+
+
+### Vue
+
+See the [devtools](/hotkeys/devtools) documentation for setup details.
+
+
diff --git a/mintlify/hotkeys/overview.md b/mintlify/hotkeys/overview.md
new file mode 100644
index 000000000..e298d44bd
--- /dev/null
+++ b/mintlify/hotkeys/overview.md
@@ -0,0 +1,54 @@
+---
+title: Overview
+id: overview
+---
+
+TanStack Hotkeys is a **type-safe**, **framework-agnostic** library for handling keyboard shortcuts in your applications. It provides a comprehensive set of utilities for registering hotkeys, tracking key state, recording custom keyboard shortcuts, and handling multi-key sequences -- all with first-class TypeScript support and cross-platform compatibility.
+
+> [!IMPORTANT]
+> TanStack Hotkeys is currently in **alpha** and its API is still subject to change. Early adopters are encouraged to help us solve edge cases across multiple keyboard layouts, locales, and operating systems.
+
+## Motivation
+
+On the surface, keyboard shortcuts are a simple concept, and you would think that it should just take a couple of lines of code to implement them. And sometimes, it can be that simple. However, there are enough small "gotchas" that can eventually add up to an annoying amount of complexity when you need to consider multiple keyboard layouts, operating systems, custom shortcuts, conflicting hotkey scopes, properly ignoring input elements, and more. 
+
+Surprisingly, in our experience, even AI often struggles to get hotkey management fully correct. We believe that providing a library that brings type-safety and well thought out cross-platform compatibility to hotkey management is a valuable contribution to the community.
+
+## Features
+
+- **Desired Defaults**
+  - TanStack Hotkeys automatically uses `preventDefault`, `stopPropagation`, and intelligently ignores hotkeys when input elements are focused by default.
+
+- **Type-Safe Hotkey Strings**
+  - Full autocomplete for valid modifier - e.g. `Control+A`, `Alt+S`, `Shift+D`, `Mod+Shift+G`, etc.
+  - Alternatively, you can use a raw `RawHotkey` object to register hotkeys: `useHotkey({ key: 'S', mod: true }, handler)`
+
+- **Cross-Platform Compatibility**
+  - `Mod` resolves to `Meta` (Cmd) on macOS and `Control` on Windows/Linux
+
+- **event.key API**
+  - The primary APIs are built around the `event.key` property, which is the most reliable way to determine the key that was pressed.
+  - `event.code` is used as a fallback for letter keys (A-Z) and digit keys (0-9) when `event.key` produces special characters (e.g., macOS Option+letter or Shift+number).
+
+- **Hotkey Registration**
+  - Centralized `HotkeyManager` with per-target listeners, conflict detection, and automatic input filtering
+
+- **Multi-Key Sequences**
+  - Vim-style sequences (e.g., `['G', 'G']`, `['D', 'I', 'W']`) with configurable timeout
+
+- **Hotkey Recording**
+  - Interactive capture for settings UIs with portable `Mod` format conversion
+
+- **Key State Tracking**
+  - Real-time held keys hooks: `useHeldKeys`, `useHeldKeyCodes`, `useKeyHold`
+
+- **Display Formatting**
+  - Platform-aware formatting (e.g., `⌘⇧S` on Mac vs `Ctrl+Shift+S` on Windows) for cheatsheet UIs
+
+- **Framework Adapters**
+  - React and Preact hooks, Solid primitives, Angular inject APIs, Vue composables, and Lit controllers/decorators
+
+- **Awesome Devtools!**
+  - See all currently registered hotkeys, held keys, and more in real-time.
+
+For a complete walkthrough, see the [React Quick Start](/hotkeys/framework/react/quick-start), [Angular Quick Start](/hotkeys/framework/angular/quick-start), [Vue Quick Start](/hotkeys/framework/vue/quick-start) or [Lit Quick Start](/hotkeys/framework/lit/quick-start).
diff --git a/mintlify/hotkeys/reference/classes/HotkeyManager.md b/mintlify/hotkeys/reference/classes/HotkeyManager.md
new file mode 100644
index 000000000..d82a5ebff
--- /dev/null
+++ b/mintlify/hotkeys/reference/classes/HotkeyManager.md
@@ -0,0 +1,238 @@
+---
+id: HotkeyManager
+title: HotkeyManager
+---
+
+# Class: HotkeyManager
+
+Defined in: [hotkey-manager.ts:186](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L186)
+
+Singleton manager for hotkey registrations.
+
+This class provides a centralized way to register and manage keyboard hotkeys.
+It uses a single event listener for efficiency, regardless of how many hotkeys
+are registered.
+
+## Example
+
+```ts
+const manager = HotkeyManager.getInstance()
+
+const unregister = manager.register('Mod+S', (event, context) => {
+  console.log('Save triggered!')
+})
+
+// Later, to unregister:
+unregister()
+```
+
+## Properties
+
+### registrations
+
+```ts
+readonly registrations: Store<Map<string, HotkeyRegistration>>;
+```
+
+Defined in: [hotkey-manager.ts:208](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L208)
+
+The TanStack Store containing all hotkey registrations.
+Use this to subscribe to registration changes or access current registrations.
+
+#### Example
+
+```ts
+const manager = HotkeyManager.getInstance()
+
+// Subscribe to registration changes
+const unsubscribe = manager.registrations.subscribe(() => {
+  console.log('Registrations changed:', manager.registrations.state.size)
+})
+
+// Access current registrations
+for (const [id, reg] of manager.registrations.state) {
+  console.log(reg.hotkey, reg.options.enabled)
+}
+```
+
+## Methods
+
+### destroy()
+
+```ts
+destroy(): void;
+```
+
+Defined in: [hotkey-manager.ts:741](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L741)
+
+Destroys the manager and removes all listeners.
+
+#### Returns
+
+`void`
+
+***
+
+### getRegistrationCount()
+
+```ts
+getRegistrationCount(): number;
+```
+
+Defined in: [hotkey-manager.ts:712](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L712)
+
+Gets the number of registered hotkeys.
+
+#### Returns
+
+`number`
+
+***
+
+### isRegistered()
+
+```ts
+isRegistered(hotkey, target?): boolean;
+```
+
+Defined in: [hotkey-manager.ts:723](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L723)
+
+Checks if a specific hotkey is registered.
+
+#### Parameters
+
+##### hotkey
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
+
+The hotkey string to check
+
+##### target?
+
+Optional target element to match (if provided, both hotkey and target must match)
+
+`HTMLElement` | `Document` | `Window`
+
+#### Returns
+
+`boolean`
+
+True if a matching registration exists
+
+***
+
+### register()
+
+```ts
+register(
+   hotkey, 
+   callback, 
+   options): HotkeyRegistrationHandle;
+```
+
+Defined in: [hotkey-manager.ts:271](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L271)
+
+Registers a hotkey handler and returns a handle for updating the registration.
+
+The returned handle allows updating the callback and options without
+re-registering, which is useful for avoiding stale closures in React.
+
+#### Parameters
+
+##### hotkey
+
+[`RegisterableHotkey`](/hotkeys/reference/type-aliases/RegisterableHotkey)
+
+The hotkey string (e.g., 'Mod+S') or RawHotkey object
+
+##### callback
+
+[`HotkeyCallback`](/hotkeys/reference/type-aliases/HotkeyCallback)
+
+The function to call when the hotkey is pressed
+
+##### options
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions) = `{}`
+
+Options for the hotkey behavior
+
+#### Returns
+
+[`HotkeyRegistrationHandle`](/hotkeys/reference/interfaces/HotkeyRegistrationHandle)
+
+A handle for managing the registration
+
+#### Example
+
+```ts
+const handle = manager.register('Mod+S', callback)
+
+// Update callback without re-registering (avoids stale closures)
+handle.callback = newCallback
+
+// Update options
+handle.setOptions({ enabled: false })
+
+// Unregister when done
+handle.unregister()
+```
+
+***
+
+### triggerRegistration()
+
+```ts
+triggerRegistration(id): boolean;
+```
+
+Defined in: [hotkey-manager.ts:676](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L676)
+
+Triggers a registration's callback programmatically from devtools.
+Creates a synthetic KeyboardEvent and invokes the callback.
+
+#### Parameters
+
+##### id
+
+`string`
+
+The registration ID to trigger
+
+#### Returns
+
+`boolean`
+
+True if the registration was found and triggered
+
+***
+
+### getInstance()
+
+```ts
+static getInstance(): HotkeyManager;
+```
+
+Defined in: [hotkey-manager.ts:229](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L229)
+
+Gets the singleton instance of HotkeyManager.
+
+#### Returns
+
+`HotkeyManager`
+
+***
+
+### resetInstance()
+
+```ts
+static resetInstance(): void;
+```
+
+Defined in: [hotkey-manager.ts:239](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L239)
+
+Resets the singleton instance. Useful for testing.
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/classes/HotkeyRecorder.md b/mintlify/hotkeys/reference/classes/HotkeyRecorder.md
new file mode 100644
index 000000000..52a961639
--- /dev/null
+++ b/mintlify/hotkeys/reference/classes/HotkeyRecorder.md
@@ -0,0 +1,179 @@
+---
+id: HotkeyRecorder
+title: HotkeyRecorder
+---
+
+# Class: HotkeyRecorder
+
+Defined in: [hotkey-recorder.ts:76](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L76)
+
+Framework-agnostic class for recording keyboard shortcuts.
+
+This class handles all the complexity of capturing keyboard events,
+converting them to hotkey strings, and handling edge cases like
+Escape to cancel or Backspace/Delete to clear.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- State can be accessed via `recorder.store.state` when using the class directly
+- When using framework adapters (React), use `useSelector` hooks for reactive state
+
+## Example
+
+```ts
+const recorder = new HotkeyRecorder({
+  onRecord: (hotkey) => {
+    console.log('Recorded:', hotkey)
+  },
+  onCancel: () => {
+    console.log('Recording cancelled')
+  },
+})
+
+// Start recording
+recorder.start()
+
+// Access state directly
+console.log(recorder.store.state.isRecording) // true
+
+// Subscribe to changes with TanStack Store
+const unsubscribe = recorder.store.subscribe(() => {
+  console.log('Recording:', recorder.store.state.isRecording)
+})
+
+// Cleanup
+recorder.destroy()
+unsubscribe()
+```
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeyRecorder(options): HotkeyRecorder;
+```
+
+Defined in: [hotkey-recorder.ts:90](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L90)
+
+#### Parameters
+
+##### options
+
+[`HotkeyRecorderOptions`](/hotkeys/reference/interfaces/HotkeyRecorderOptions)
+
+#### Returns
+
+`HotkeyRecorder`
+
+## Properties
+
+### store
+
+```ts
+readonly store: Store<HotkeyRecorderState>;
+```
+
+Defined in: [hotkey-recorder.ts:81](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L81)
+
+The TanStack Store instance containing the recorder state.
+Use this to subscribe to state changes or access current state.
+
+## Methods
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [hotkey-recorder.ts:220](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L220)
+
+Cancel recording without saving.
+
+Removes the event listener, resets the recording state, and calls
+the onCancel callback if provided.
+
+#### Returns
+
+`void`
+
+***
+
+### destroy()
+
+```ts
+destroy(): void;
+```
+
+Defined in: [hotkey-recorder.ts:265](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L265)
+
+Clean up event listeners and reset state.
+
+Call this when you're done with the recorder to ensure
+all event listeners are properly removed.
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(options): void;
+```
+
+Defined in: [hotkey-recorder.ts:99](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L99)
+
+Updates the recorder options, including callbacks.
+This allows framework adapters to sync callback changes without recreating the recorder.
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;[`HotkeyRecorderOptions`](/hotkeys/reference/interfaces/HotkeyRecorderOptions)\>
+
+#### Returns
+
+`void`
+
+***
+
+### start()
+
+```ts
+start(): void;
+```
+
+Defined in: [hotkey-recorder.ts:113](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L113)
+
+Start recording a new hotkey.
+
+Sets up a keydown event listener that captures keyboard events
+and converts them to hotkey strings. Recording continues until
+a valid hotkey is recorded, Escape is pressed, or stop/cancel is called.
+
+#### Returns
+
+`void`
+
+***
+
+### stop()
+
+```ts
+stop(): void;
+```
+
+Defined in: [hotkey-recorder.ts:200](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L200)
+
+Stop recording (same as cancel, but doesn't call onCancel).
+
+Removes the event listener and resets the recording state.
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/classes/HotkeySequenceRecorder.md b/mintlify/hotkeys/reference/classes/HotkeySequenceRecorder.md
new file mode 100644
index 000000000..a3d7f5f22
--- /dev/null
+++ b/mintlify/hotkeys/reference/classes/HotkeySequenceRecorder.md
@@ -0,0 +1,136 @@
+---
+id: HotkeySequenceRecorder
+title: HotkeySequenceRecorder
+---
+
+# Class: HotkeySequenceRecorder
+
+Defined in: [hotkey-sequence-recorder.ts:85](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L85)
+
+Framework-agnostic class for recording multi-chord sequences (Vim-style shortcuts).
+
+Each step is captured like a single hotkey chord. Press **Enter** (no modifiers) to commit
+when [HotkeySequenceRecorderOptions.commitKeys](/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions#commitkeys) is `'enter'` (default), **Escape** to cancel,
+**Backspace/Delete** to remove the last step or clear when empty.
+
+## Constructors
+
+### Constructor
+
+```ts
+new HotkeySequenceRecorder(options): HotkeySequenceRecorder;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:98](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L98)
+
+#### Parameters
+
+##### options
+
+[`HotkeySequenceRecorderOptions`](/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions)
+
+#### Returns
+
+`HotkeySequenceRecorder`
+
+## Properties
+
+### store
+
+```ts
+readonly store: Store<HotkeySequenceRecorderState>;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:86](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L86)
+
+## Methods
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:292](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L292)
+
+#### Returns
+
+`void`
+
+***
+
+### commit()
+
+```ts
+commit(): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:243](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L243)
+
+Commit the current steps as a sequence. No-op if fewer than one step.
+
+#### Returns
+
+`void`
+
+***
+
+### destroy()
+
+```ts
+destroy(): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:320](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L320)
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(options): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:106](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L106)
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;[`HotkeySequenceRecorderOptions`](/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions)\>
+
+#### Returns
+
+`void`
+
+***
+
+### start()
+
+```ts
+start(): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:149](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L149)
+
+#### Returns
+
+`void`
+
+***
+
+### stop()
+
+```ts
+stop(): void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:279](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L279)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/classes/KeyStateTracker.md b/mintlify/hotkeys/reference/classes/KeyStateTracker.md
new file mode 100644
index 000000000..cd587ee49
--- /dev/null
+++ b/mintlify/hotkeys/reference/classes/KeyStateTracker.md
@@ -0,0 +1,199 @@
+---
+id: KeyStateTracker
+title: KeyStateTracker
+---
+
+# Class: KeyStateTracker
+
+Defined in: [key-state-tracker.ts:63](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L63)
+
+Singleton tracker for currently held keyboard keys.
+
+This class maintains a list of all keys currently being pressed,
+which is useful for:
+- Displaying currently held keys to users
+- Custom shortcut recording for rebinding
+- Complex chord detection
+
+State Management:
+- Uses TanStack Store for reactive state management
+- State can be accessed via `tracker.store.state` when using the class directly
+- When using framework adapters (React), use `useHeldKeys` and `useHeldKeyCodes` hooks for reactive state
+
+## Example
+
+```ts
+const tracker = KeyStateTracker.getInstance()
+
+// Access state directly
+console.log(tracker.store.state.heldKeys) // ['Control', 'Shift']
+
+// Subscribe to changes with TanStack Store
+const unsubscribe = tracker.store.subscribe(() => {
+  console.log('Currently held:', tracker.store.state.heldKeys)
+})
+
+// Check current state
+console.log(tracker.getHeldKeys()) // ['Control', 'Shift']
+console.log(tracker.isKeyHeld('Control')) // true
+
+// Cleanup
+unsubscribe()
+```
+
+## Properties
+
+### store
+
+```ts
+readonly store: Store<KeyStateTrackerState>;
+```
+
+Defined in: [key-state-tracker.ts:70](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L70)
+
+The TanStack Store instance containing the tracker state.
+Use this to subscribe to state changes or access current state.
+
+## Methods
+
+### areAllKeysHeld()
+
+```ts
+areAllKeysHeld(keys): boolean;
+```
+
+Defined in: [key-state-tracker.ts:228](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L228)
+
+Checks if all of the given keys are currently held.
+
+#### Parameters
+
+##### keys
+
+`string`[]
+
+Array of key names to check
+
+#### Returns
+
+`boolean`
+
+True if all of the keys are currently held
+
+***
+
+### destroy()
+
+```ts
+destroy(): void;
+```
+
+Defined in: [key-state-tracker.ts:235](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L235)
+
+Destroys the tracker and removes all listeners.
+
+#### Returns
+
+`void`
+
+***
+
+### getHeldKeys()
+
+```ts
+getHeldKeys(): string[];
+```
+
+Defined in: [key-state-tracker.ts:197](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L197)
+
+Gets an array of currently held key names.
+
+#### Returns
+
+`string`[]
+
+Array of key names currently being pressed
+
+***
+
+### isAnyKeyHeld()
+
+```ts
+isAnyKeyHeld(keys): boolean;
+```
+
+Defined in: [key-state-tracker.ts:218](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L218)
+
+Checks if any of the given keys are currently held.
+
+#### Parameters
+
+##### keys
+
+`string`[]
+
+Array of key names to check
+
+#### Returns
+
+`boolean`
+
+True if any of the keys are currently held
+
+***
+
+### isKeyHeld()
+
+```ts
+isKeyHeld(key): boolean;
+```
+
+Defined in: [key-state-tracker.ts:207](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L207)
+
+Checks if a specific key is currently being held.
+
+#### Parameters
+
+##### key
+
+`string`
+
+The key name to check (case-insensitive)
+
+#### Returns
+
+`boolean`
+
+True if the key is currently held
+
+***
+
+### getInstance()
+
+```ts
+static getInstance(): KeyStateTracker;
+```
+
+Defined in: [key-state-tracker.ts:87](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L87)
+
+Gets the singleton instance of KeyStateTracker.
+
+#### Returns
+
+`KeyStateTracker`
+
+***
+
+### resetInstance()
+
+```ts
+static resetInstance(): void;
+```
+
+Defined in: [key-state-tracker.ts:97](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L97)
+
+Resets the singleton instance. Useful for testing.
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/classes/SequenceManager.md b/mintlify/hotkeys/reference/classes/SequenceManager.md
new file mode 100644
index 000000000..16b1809e7
--- /dev/null
+++ b/mintlify/hotkeys/reference/classes/SequenceManager.md
@@ -0,0 +1,169 @@
+---
+id: SequenceManager
+title: SequenceManager
+---
+
+# Class: SequenceManager
+
+Defined in: [sequence-manager.ts:172](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L172)
+
+## Properties
+
+### registrations
+
+```ts
+readonly registrations: Store<Map<string, SequenceRegistrationView>>;
+```
+
+Defined in: [sequence-manager.ts:179](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L179)
+
+The TanStack Store containing sequence registration views for devtools.
+Subscribe to this to observe registration changes.
+
+## Methods
+
+### destroy()
+
+```ts
+destroy(): void;
+```
+
+Defined in: [sequence-manager.ts:638](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L638)
+
+Destroys the manager and removes all listeners.
+
+#### Returns
+
+`void`
+
+***
+
+### getRegistrationCount()
+
+```ts
+getRegistrationCount(): number;
+```
+
+Defined in: [sequence-manager.ts:631](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L631)
+
+Gets the number of registered sequences.
+
+#### Returns
+
+`number`
+
+***
+
+### register()
+
+```ts
+register(
+   sequence, 
+   callback, 
+   options): SequenceRegistrationHandle;
+```
+
+Defined in: [sequence-manager.ts:231](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L231)
+
+Registers a hotkey sequence handler.
+
+#### Parameters
+
+##### sequence
+
+[`HotkeySequence`](/hotkeys/reference/type-aliases/HotkeySequence)
+
+Array of hotkey strings that form the sequence
+
+##### callback
+
+[`HotkeyCallback`](/hotkeys/reference/type-aliases/HotkeyCallback)
+
+Function to call when the sequence is completed
+
+##### options
+
+[`SequenceOptions`](/hotkeys/reference/interfaces/SequenceOptions) = `{}`
+
+Options for the sequence behavior
+
+#### Returns
+
+[`SequenceRegistrationHandle`](/hotkeys/reference/interfaces/SequenceRegistrationHandle)
+
+A handle to update or unregister the sequence
+
+***
+
+### resetAll()
+
+```ts
+resetAll(): void;
+```
+
+Defined in: [sequence-manager.ts:573](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L573)
+
+Resets all sequence progress.
+
+#### Returns
+
+`void`
+
+***
+
+### triggerSequence()
+
+```ts
+triggerSequence(id): boolean;
+```
+
+Defined in: [sequence-manager.ts:588](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L588)
+
+Triggers a sequence's callback programmatically from devtools.
+Creates a synthetic KeyboardEvent from the last key in the sequence.
+
+#### Parameters
+
+##### id
+
+`string`
+
+The registration ID to trigger
+
+#### Returns
+
+`boolean`
+
+True if the registration was found and triggered
+
+***
+
+### getInstance()
+
+```ts
+static getInstance(): SequenceManager;
+```
+
+Defined in: [sequence-manager.ts:200](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L200)
+
+Gets the singleton instance of SequenceManager.
+
+#### Returns
+
+`SequenceManager`
+
+***
+
+### resetInstance()
+
+```ts
+static resetInstance(): void;
+```
+
+Defined in: [sequence-manager.ts:210](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L210)
+
+Resets the singleton instance. Useful for testing.
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/functions/assertValidHotkey.md b/mintlify/hotkeys/reference/functions/assertValidHotkey.md
new file mode 100644
index 000000000..d61b05e9e
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/assertValidHotkey.md
@@ -0,0 +1,38 @@
+---
+id: assertValidHotkey
+title: assertValidHotkey
+---
+
+# Function: assertValidHotkey()
+
+```ts
+function assertValidHotkey(hotkey): void;
+```
+
+Defined in: [validate.ts:138](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/validate.ts#L138)
+
+Validates a hotkey and throws an error if invalid.
+Useful for development-time validation.
+
+## Parameters
+
+### hotkey
+
+The hotkey string to validate
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | `string` & `object`
+
+## Returns
+
+`void`
+
+## Throws
+
+Error if the hotkey is invalid
+
+## Example
+
+```ts
+assertValidHotkey('Mod+S') // OK
+assertValidHotkey('') // Throws Error: Invalid hotkey: Hotkey cannot be empty
+```
diff --git a/mintlify/hotkeys/reference/functions/checkHotkey.md b/mintlify/hotkeys/reference/functions/checkHotkey.md
new file mode 100644
index 000000000..6e84a07f3
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/checkHotkey.md
@@ -0,0 +1,37 @@
+---
+id: checkHotkey
+title: checkHotkey
+---
+
+# Function: checkHotkey()
+
+```ts
+function checkHotkey(hotkey): boolean;
+```
+
+Defined in: [validate.ts:159](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/validate.ts#L159)
+
+Validates a hotkey and logs warnings to the console.
+Useful for development-time feedback.
+
+## Parameters
+
+### hotkey
+
+The hotkey string to validate
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | `string` & `object`
+
+## Returns
+
+`boolean`
+
+True if the hotkey is valid (may still have warnings)
+
+## Example
+
+```ts
+checkHotkey('Alt+C')
+// Console: Warning: Alt+C may not work reliably on macOS...
+// Returns: true
+```
diff --git a/mintlify/hotkeys/reference/functions/createHotkeyHandler.md b/mintlify/hotkeys/reference/functions/createHotkeyHandler.md
new file mode 100644
index 000000000..1b23ca88f
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/createHotkeyHandler.md
@@ -0,0 +1,66 @@
+---
+id: createHotkeyHandler
+title: createHotkeyHandler
+---
+
+# Function: createHotkeyHandler()
+
+```ts
+function createHotkeyHandler(
+   hotkey, 
+   callback, 
+   options): (event) => void;
+```
+
+Defined in: [match.ts:159](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L159)
+
+Creates a keyboard event handler that calls the callback when the hotkey matches.
+
+## Parameters
+
+### hotkey
+
+The hotkey string or ParsedHotkey to match
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | [`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+### callback
+
+[`HotkeyCallback`](/hotkeys/reference/type-aliases/HotkeyCallback)
+
+The function to call when the hotkey matches
+
+### options
+
+[`CreateHotkeyHandlerOptions`](/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions) = `{}`
+
+Options for matching and handling
+
+## Returns
+
+A function that can be used as an event handler
+
+```ts
+(event): void;
+```
+
+### Parameters
+
+#### event
+
+`KeyboardEvent`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const handler = createHotkeyHandler('Mod+S', (event, { hotkey, parsedHotkey }) => {
+  console.log(`${hotkey} was pressed`)
+  handleSave()
+})
+
+document.addEventListener('keydown', handler)
+```
diff --git a/mintlify/hotkeys/reference/functions/createMultiHotkeyHandler.md b/mintlify/hotkeys/reference/functions/createMultiHotkeyHandler.md
new file mode 100644
index 000000000..4e26c3b55
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/createMultiHotkeyHandler.md
@@ -0,0 +1,58 @@
+---
+id: createMultiHotkeyHandler
+title: createMultiHotkeyHandler
+---
+
+# Function: createMultiHotkeyHandler()
+
+```ts
+function createMultiHotkeyHandler(handlers, options): (event) => void;
+```
+
+Defined in: [match.ts:210](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L210)
+
+Creates a handler that matches multiple hotkeys.
+
+## Parameters
+
+### handlers
+
+`MultiHotkeyHandler`
+
+A map of hotkey strings to their handlers
+
+### options
+
+[`CreateHotkeyHandlerOptions`](/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions) = `{}`
+
+Options for matching and handling
+
+## Returns
+
+A function that can be used as an event handler
+
+```ts
+(event): void;
+```
+
+### Parameters
+
+#### event
+
+`KeyboardEvent`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const handler = createMultiHotkeyHandler({
+  'Mod+S': (event, { hotkey }) => handleSave(),
+  'Mod+Z': (event, { hotkey }) => handleUndo(),
+  'Mod+Shift+Z': (event, { hotkey }) => handleRedo(),
+})
+
+document.addEventListener('keydown', handler)
+```
diff --git a/mintlify/hotkeys/reference/functions/createSequenceMatcher.md b/mintlify/hotkeys/reference/functions/createSequenceMatcher.md
new file mode 100644
index 000000000..485646880
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/createSequenceMatcher.md
@@ -0,0 +1,92 @@
+---
+id: createSequenceMatcher
+title: createSequenceMatcher
+---
+
+# Function: createSequenceMatcher()
+
+```ts
+function createSequenceMatcher(sequence, options): object;
+```
+
+Defined in: [sequence-manager.ts:677](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L677)
+
+Creates a simple sequence matcher for one-off use.
+
+This is a low-level helper that does not support ignoreInputs, target,
+or other HotkeyOptions. Callers must handle input filtering themselves
+if attaching to document.
+
+## Parameters
+
+### sequence
+
+[`HotkeySequence`](/hotkeys/reference/type-aliases/HotkeySequence)
+
+The sequence of hotkeys to match
+
+### options
+
+Options including timeout
+
+#### platform?
+
+`"mac"` \| `"windows"` \| `"linux"`
+
+#### timeout?
+
+`number`
+
+## Returns
+
+`object`
+
+An object with match() and reset() methods
+
+### getProgress()
+
+```ts
+getProgress: () => number;
+```
+
+#### Returns
+
+`number`
+
+### match()
+
+```ts
+match: (event) => boolean;
+```
+
+#### Parameters
+
+##### event
+
+`KeyboardEvent`
+
+#### Returns
+
+`boolean`
+
+### reset()
+
+```ts
+reset: () => void;
+```
+
+#### Returns
+
+`void`
+
+## Example
+
+```ts
+const matcher = createSequenceMatcher(['G', 'G'], { timeout: 500 })
+
+document.addEventListener('keydown', (event) => {
+  if (matcher.match(event)) {
+    console.log('Sequence matched!')
+  }
+})
+```
diff --git a/mintlify/hotkeys/reference/functions/detectPlatform.md b/mintlify/hotkeys/reference/functions/detectPlatform.md
new file mode 100644
index 000000000..398b396f5
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/detectPlatform.md
@@ -0,0 +1,34 @@
+---
+id: detectPlatform
+title: detectPlatform
+---
+
+# Function: detectPlatform()
+
+```ts
+function detectPlatform(): "mac" | "windows" | "linux";
+```
+
+Defined in: [constants.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L26)
+
+Detects the current platform based on browser navigator properties.
+
+Used internally to resolve platform-adaptive modifiers like 'Mod' (Command on Mac,
+Control elsewhere) and for platform-specific hotkey formatting.
+
+## Returns
+
+`"mac"` \| `"windows"` \| `"linux"`
+
+The detected platform: 'mac', 'windows', or 'linux'
+
+## Remarks
+
+Defaults to 'linux' in SSR environments where navigator is undefined
+
+## Example
+
+```ts
+const platform = detectPlatform() // 'mac' | 'windows' | 'linux'
+const modifier = resolveModifier('Mod', platform) // 'Meta' on Mac, 'Control' elsewhere
+```
diff --git a/mintlify/hotkeys/reference/functions/formatForDisplay.md b/mintlify/hotkeys/reference/functions/formatForDisplay.md
new file mode 100644
index 000000000..d5d5ce8f5
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/formatForDisplay.md
@@ -0,0 +1,51 @@
+---
+id: formatForDisplay
+title: formatForDisplay
+---
+
+# Function: formatForDisplay()
+
+```ts
+function formatForDisplay(hotkey, options): string;
+```
+
+Defined in: [format.ts:92](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/format.ts#L92)
+
+Formats a hotkey for display in a user interface.
+
+On macOS, uses symbols (⌘⇧S) in the same modifier order as [normalizeHotkeyFromParsed](/hotkeys/reference/functions/normalizeHotkeyFromParsed).
+On Windows/Linux, uses text (Ctrl+Shift+S) with `+` separators.
+The separator can be customized with `separatorToken`.
+
+## Parameters
+
+### hotkey
+
+The hotkey string or ParsedHotkey to format
+
+`string` & `object` | [`RegisterableHotkey`](/hotkeys/reference/type-aliases/RegisterableHotkey)
+
+### options
+
+[`FormatDisplayOptions`](/hotkeys/reference/interfaces/FormatDisplayOptions) = `{}`
+
+Formatting options
+
+## Returns
+
+`string`
+
+A formatted string suitable for display
+
+## Example
+
+```ts
+formatForDisplay('Mod+Shift+S', { platform: 'mac' })
+// Returns: '⌘ ⇧ S' (symbols separated by spaces on macOS)
+
+formatForDisplay('Mod+Shift+S', { platform: 'windows' })
+// Returns: 'Ctrl+Shift+S'
+
+formatForDisplay('Escape')
+// Returns: 'Esc' (on all platforms)
+```
diff --git a/mintlify/hotkeys/reference/functions/formatHotkey.md b/mintlify/hotkeys/reference/functions/formatHotkey.md
new file mode 100644
index 000000000..ee3725307
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/formatHotkey.md
@@ -0,0 +1,35 @@
+---
+id: formatHotkey
+title: formatHotkey
+---
+
+# Function: formatHotkey()
+
+```ts
+function formatHotkey(parsed): string;
+```
+
+Defined in: [format.ts:53](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/format.ts#L53)
+
+Converts a ParsedHotkey back to a hotkey string.
+
+## Parameters
+
+### parsed
+
+[`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+The parsed hotkey object
+
+## Returns
+
+`string`
+
+A hotkey string in canonical form
+
+## Example
+
+```ts
+formatHotkey({ key: 'S', ctrl: true, shift: true, alt: false, meta: false, modifiers: ['Control', 'Shift'] })
+// Returns: 'Control+Shift+S'
+```
diff --git a/mintlify/hotkeys/reference/functions/formatHotkeySequence.md b/mintlify/hotkeys/reference/functions/formatHotkeySequence.md
new file mode 100644
index 000000000..2d44b41e0
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/formatHotkeySequence.md
@@ -0,0 +1,35 @@
+---
+id: formatHotkeySequence
+title: formatHotkeySequence
+---
+
+# Function: formatHotkeySequence()
+
+```ts
+function formatHotkeySequence(sequence): string;
+```
+
+Defined in: [format.ts:37](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/format.ts#L37)
+
+Converts a hotkey sequence array to a display string.
+
+## Parameters
+
+### sequence
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)[]
+
+Array of hotkey strings that form the sequence
+
+## Returns
+
+`string`
+
+A space-separated string (e.g. ['G','G'] → 'G G')
+
+## Example
+
+```ts
+formatHotkeySequence(['G', 'G'])      // 'G G'
+formatHotkeySequence(['D', 'I', 'W']) // 'D I W'
+```
diff --git a/mintlify/hotkeys/reference/functions/formatWithLabels.md b/mintlify/hotkeys/reference/functions/formatWithLabels.md
new file mode 100644
index 000000000..8bfd6ae12
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/formatWithLabels.md
@@ -0,0 +1,30 @@
+---
+id: formatWithLabels
+title: formatWithLabels
+---
+
+# ~~Function: formatWithLabels()~~
+
+```ts
+function formatWithLabels(hotkey, options): string;
+```
+
+Defined in: [format.ts:137](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/format.ts#L137)
+
+## Parameters
+
+### hotkey
+
+[`RegisterableHotkey`](/hotkeys/reference/type-aliases/RegisterableHotkey)
+
+### options
+
+`Omit`\&lt;[`FormatDisplayOptions`](/hotkeys/reference/interfaces/FormatDisplayOptions), `"useSymbols"`\> = `{}`
+
+## Returns
+
+`string`
+
+## Deprecated
+
+Use [formatForDisplay](/hotkeys/reference/functions/formatForDisplay) instead with `useSymbols: false` option.
diff --git a/mintlify/hotkeys/reference/functions/getHotkeyManager.md b/mintlify/hotkeys/reference/functions/getHotkeyManager.md
new file mode 100644
index 000000000..79fe244ca
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/getHotkeyManager.md
@@ -0,0 +1,19 @@
+---
+id: getHotkeyManager
+title: getHotkeyManager
+---
+
+# Function: getHotkeyManager()
+
+```ts
+function getHotkeyManager(): HotkeyManager;
+```
+
+Defined in: [hotkey-manager.ts:757](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L757)
+
+Gets the singleton HotkeyManager instance.
+Convenience function for accessing the manager.
+
+## Returns
+
+[`HotkeyManager`](/hotkeys/reference/classes/HotkeyManager)
diff --git a/mintlify/hotkeys/reference/functions/getKeyStateTracker.md b/mintlify/hotkeys/reference/functions/getKeyStateTracker.md
new file mode 100644
index 000000000..5b9de61b1
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/getKeyStateTracker.md
@@ -0,0 +1,19 @@
+---
+id: getKeyStateTracker
+title: getKeyStateTracker
+---
+
+# Function: getKeyStateTracker()
+
+```ts
+function getKeyStateTracker(): KeyStateTracker;
+```
+
+Defined in: [key-state-tracker.ts:247](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L247)
+
+Gets the singleton KeyStateTracker instance.
+Convenience function for accessing the tracker.
+
+## Returns
+
+[`KeyStateTracker`](/hotkeys/reference/classes/KeyStateTracker)
diff --git a/mintlify/hotkeys/reference/functions/getSequenceManager.md b/mintlify/hotkeys/reference/functions/getSequenceManager.md
new file mode 100644
index 000000000..d37981982
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/getSequenceManager.md
@@ -0,0 +1,19 @@
+---
+id: getSequenceManager
+title: getSequenceManager
+---
+
+# Function: getSequenceManager()
+
+```ts
+function getSequenceManager(): SequenceManager;
+```
+
+Defined in: [sequence-manager.ts:651](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L651)
+
+Gets the singleton SequenceManager instance.
+Convenience function for accessing the manager.
+
+## Returns
+
+[`SequenceManager`](/hotkeys/reference/classes/SequenceManager)
diff --git a/mintlify/hotkeys/reference/functions/hasNonModifierKey.md b/mintlify/hotkeys/reference/functions/hasNonModifierKey.md
new file mode 100644
index 000000000..7807432c7
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/hasNonModifierKey.md
@@ -0,0 +1,45 @@
+---
+id: hasNonModifierKey
+title: hasNonModifierKey
+---
+
+# Function: hasNonModifierKey()
+
+```ts
+function hasNonModifierKey(hotkey, platform): boolean;
+```
+
+Defined in: [parse.ts:316](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L316)
+
+Checks if a hotkey or ParsedHotkey contains at least one non-modifier key.
+
+This is useful for validating that a recorded hotkey is complete and not
+just a combination of modifiers without an action key.
+
+## Parameters
+
+### hotkey
+
+The hotkey string or ParsedHotkey to check
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | [`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey) | `string` & `object`
+
+### platform
+
+The target platform for parsing (defaults to auto-detection)
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+`boolean`
+
+True if the hotkey contains at least one non-modifier key
+
+## Example
+
+```ts
+hasNonModifierKey('Control+Shift+S') // true
+hasNonModifierKey('Control+Shift') // false (no action key)
+hasNonModifierKey(parseHotkey('Mod+A')) // true
+```
diff --git a/mintlify/hotkeys/reference/functions/isModifierKey.md b/mintlify/hotkeys/reference/functions/isModifierKey.md
new file mode 100644
index 000000000..3a2768307
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/isModifierKey.md
@@ -0,0 +1,31 @@
+---
+id: isModifierKey
+title: isModifierKey
+---
+
+# Function: isModifierKey()
+
+```ts
+function isModifierKey(key): key is string;
+```
+
+Defined in: [parse.ts:242](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L242)
+
+Checks if a string is a recognized modifier token (including aliases).
+
+For a `KeyboardEvent`, use `isModifier(normalizeKeyName(event.key))` so DOM
+spellings like `OS` / `Win` match the same alias table.
+
+## Parameters
+
+### key
+
+Key name or alias (e.g. from a hotkey string or `event.key`)
+
+[`Key`](/hotkeys/reference/type-aliases/Key) | `string` & `object`
+
+## Returns
+
+`key is string`
+
+True if the string is a recognized modifier
diff --git a/mintlify/hotkeys/reference/functions/isSingleLetterKey.md b/mintlify/hotkeys/reference/functions/isSingleLetterKey.md
new file mode 100644
index 000000000..1ea427a29
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/isSingleLetterKey.md
@@ -0,0 +1,47 @@
+---
+id: isSingleLetterKey
+title: isSingleLetterKey
+---
+
+# Function: isSingleLetterKey()
+
+```ts
+function isSingleLetterKey(key): boolean;
+```
+
+Defined in: [constants.ts:439](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L439)
+
+Normalizes a key name to its canonical form.
+
+Converts various key name formats (aliases, case variations) into the standard
+canonical names used throughout the library. This enables a more forgiving API
+where users can write keys in different ways and still get correct behavior.
+
+Normalization rules:
+1. Check aliases first (e.g., 'Esc' → 'Escape', 'Del' → 'Delete')
+2. Single letters → uppercase (e.g., 'a' → 'A', 's' → 'S')
+3. Function keys → uppercase (e.g., 'f1' → 'F1', 'F12' → 'F12')
+4. Other keys → returned as-is (already canonical or unknown)
+
+## Parameters
+
+### key
+
+`string`
+
+The key name to normalize (can be an alias, lowercase, etc.)
+
+## Returns
+
+`boolean`
+
+The canonical key name
+
+## Example
+
+```ts
+normalizeKeyName('esc') // 'Escape'
+normalizeKeyName('a') // 'A'
+normalizeKeyName('f1') // 'F1'
+normalizeKeyName('ArrowUp') // 'ArrowUp' (already canonical)
+```
diff --git a/mintlify/hotkeys/reference/functions/matchesKeyboardEvent.md b/mintlify/hotkeys/reference/functions/matchesKeyboardEvent.md
new file mode 100644
index 000000000..25808726a
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/matchesKeyboardEvent.md
@@ -0,0 +1,64 @@
+---
+id: matchesKeyboardEvent
+title: matchesKeyboardEvent
+---
+
+# Function: matchesKeyboardEvent()
+
+```ts
+function matchesKeyboardEvent(
+   event, 
+   hotkey, 
+   platform): boolean;
+```
+
+Defined in: [match.ts:43](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L43)
+
+Checks if a KeyboardEvent matches a hotkey.
+
+Uses the `key` property from KeyboardEvent for matching, with a fallback to `code`
+for letter keys, digit keys (0-9), and punctuation keys when `key` produces special
+characters (e.g., macOS Option+letter, Shift+number, or Option+punctuation).
+Letter keys are matched case-insensitively.
+
+Also handles "dead key" events where `event.key` is `'Dead'` instead of the expected
+character. This commonly occurs on macOS with Option+letter combinations (e.g., Option+E,
+Option+I, Option+U, Option+N) and on Windows/Linux with international keyboard layouts.
+In these cases, `event.code` is used to determine the physical key.
+
+## Parameters
+
+### event
+
+`KeyboardEvent`
+
+The KeyboardEvent to check
+
+### hotkey
+
+The hotkey string or ParsedHotkey to match against
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | [`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+### platform
+
+The target platform for resolving 'Mod' (defaults to auto-detection)
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+`boolean`
+
+True if the event matches the hotkey
+
+## Example
+
+```ts
+document.addEventListener('keydown', (event) => {
+  if (matchesKeyboardEvent(event, 'Mod+S')) {
+    event.preventDefault()
+    handleSave()
+  }
+})
+```
diff --git a/mintlify/hotkeys/reference/functions/normalizeHotkey.md b/mintlify/hotkeys/reference/functions/normalizeHotkey.md
new file mode 100644
index 000000000..75470f0db
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/normalizeHotkey.md
@@ -0,0 +1,48 @@
+---
+id: normalizeHotkey
+title: normalizeHotkey
+---
+
+# Function: normalizeHotkey()
+
+```ts
+function normalizeHotkey(hotkey, platform): Hotkey;
+```
+
+Defined in: [parse.ts:197](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L197)
+
+Normalizes a hotkey string to its canonical form.
+
+- When `Mod` is allowed for the platform (Command on Mac without Control;
+  Control on Windows/Linux without Meta): emits `Mod`, then `Alt`, then `Shift`,
+  then the key (e.g. `Mod+Shift+E`, `Mod+S`).
+- Otherwise: literal modifiers in `Control+Alt+Shift+Meta` order, then the key.
+- Resolves aliases and normalizes key casing (e.g. `esc` → `Escape`, `a` → `A`).
+
+## Parameters
+
+### hotkey
+
+The hotkey string to normalize
+
+[`Key`](/hotkeys/reference/type-aliases/Key) | `string` & `object`
+
+### platform
+
+The target platform for resolving `Mod` (defaults to auto-detection)
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
+
+The normalized hotkey string
+
+## Example
+
+```ts
+normalizeHotkey('shift+meta+e', 'mac') // 'Mod+Shift+E'
+normalizeHotkey('ctrl+a', 'windows') // 'Mod+A'
+normalizeHotkey('esc') // 'Escape'
+```
diff --git a/mintlify/hotkeys/reference/functions/normalizeHotkeyFromEvent.md b/mintlify/hotkeys/reference/functions/normalizeHotkeyFromEvent.md
new file mode 100644
index 000000000..65e1c840d
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/normalizeHotkeyFromEvent.md
@@ -0,0 +1,32 @@
+---
+id: normalizeHotkeyFromEvent
+title: normalizeHotkeyFromEvent
+---
+
+# Function: normalizeHotkeyFromEvent()
+
+```ts
+function normalizeHotkeyFromEvent(event, platform): Hotkey;
+```
+
+Defined in: [parse.ts:292](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L292)
+
+Normalizes a keyboard event to the same canonical hotkey string as [normalizeHotkey](/hotkeys/reference/functions/normalizeHotkey).
+
+## Parameters
+
+### event
+
+`KeyboardEvent`
+
+The keyboard event (typically `keydown`)
+
+### platform
+
+Target platform for `Mod` eligibility
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
diff --git a/mintlify/hotkeys/reference/functions/normalizeHotkeyFromParsed.md b/mintlify/hotkeys/reference/functions/normalizeHotkeyFromParsed.md
new file mode 100644
index 000000000..6d5e0e4d5
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/normalizeHotkeyFromParsed.md
@@ -0,0 +1,28 @@
+---
+id: normalizeHotkeyFromParsed
+title: normalizeHotkeyFromParsed
+---
+
+# Function: normalizeHotkeyFromParsed()
+
+```ts
+function normalizeHotkeyFromParsed(parsed, platform): Hotkey;
+```
+
+Defined in: [parse.ts:210](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L210)
+
+Same canonical string as [normalizeHotkey](/hotkeys/reference/functions/normalizeHotkey), but from an already-parsed hotkey.
+
+## Parameters
+
+### parsed
+
+[`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+### platform
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
diff --git a/mintlify/hotkeys/reference/functions/normalizeKeyName.md b/mintlify/hotkeys/reference/functions/normalizeKeyName.md
new file mode 100644
index 000000000..cb9e252d7
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/normalizeKeyName.md
@@ -0,0 +1,37 @@
+---
+id: normalizeKeyName
+title: normalizeKeyName
+---
+
+# Function: normalizeKeyName()
+
+```ts
+function normalizeKeyName(key): string;
+```
+
+Defined in: [constants.ts:457](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L457)
+
+Normalizes a key name to its canonical form.
+
+## Parameters
+
+### key
+
+`string`
+
+The key name to normalize (can be an alias, lowercase, etc.)
+
+## Returns
+
+`string`
+
+The canonical key name
+
+## Example
+
+```ts
+normalizeKeyName('esc') // 'Escape'
+normalizeKeyName('a') // 'A'
+normalizeKeyName('f1') // 'F1'
+normalizeKeyName('ArrowUp') // 'ArrowUp' (already canonical)
+```
diff --git a/mintlify/hotkeys/reference/functions/normalizeRegisterableHotkey.md b/mintlify/hotkeys/reference/functions/normalizeRegisterableHotkey.md
new file mode 100644
index 000000000..8789f9973
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/normalizeRegisterableHotkey.md
@@ -0,0 +1,29 @@
+---
+id: normalizeRegisterableHotkey
+title: normalizeRegisterableHotkey
+---
+
+# Function: normalizeRegisterableHotkey()
+
+```ts
+function normalizeRegisterableHotkey(hotkey, platform): Hotkey;
+```
+
+Defined in: [parse.ts:221](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L221)
+
+Normalizes a string or [RawHotkey](/hotkeys/reference/interfaces/RawHotkey) object to the same canonical hotkey string.
+Use this in framework adapters instead of branching on `formatHotkey(rawHotkeyToParsedHotkey(...))`.
+
+## Parameters
+
+### hotkey
+
+[`RegisterableHotkey`](/hotkeys/reference/type-aliases/RegisterableHotkey)
+
+### platform
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
diff --git a/mintlify/hotkeys/reference/functions/parseHotkey.md b/mintlify/hotkeys/reference/functions/parseHotkey.md
new file mode 100644
index 000000000..1e6d40964
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/parseHotkey.md
@@ -0,0 +1,42 @@
+---
+id: parseHotkey
+title: parseHotkey
+---
+
+# Function: parseHotkey()
+
+```ts
+function parseHotkey(hotkey, platform): ParsedHotkey;
+```
+
+Defined in: [parse.ts:31](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L31)
+
+Parses a hotkey string into its component parts.
+
+## Parameters
+
+### hotkey
+
+The hotkey string to parse (e.g., 'Mod+Shift+S')
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | `string` & `object`
+
+### platform
+
+The target platform for resolving 'Mod' (defaults to auto-detection)
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+A ParsedHotkey object with the key and modifier flags
+
+## Example
+
+```ts
+parseHotkey('Mod+S') // On Mac: { key: 'S', ctrl: false, shift: false, alt: false, meta: true, modifiers: ['Meta'] }
+parseHotkey('Mod+S') // On Windows: { key: 'S', ctrl: true, shift: false, alt: false, meta: false, modifiers: ['Control'] }
+parseHotkey('Control+Shift+A') // { key: 'A', ctrl: true, shift: true, alt: false, meta: false, modifiers: ['Control', 'Shift'] }
+```
diff --git a/mintlify/hotkeys/reference/functions/parseKeyboardEvent.md b/mintlify/hotkeys/reference/functions/parseKeyboardEvent.md
new file mode 100644
index 000000000..2006c58b0
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/parseKeyboardEvent.md
@@ -0,0 +1,40 @@
+---
+id: parseKeyboardEvent
+title: parseKeyboardEvent
+---
+
+# Function: parseKeyboardEvent()
+
+```ts
+function parseKeyboardEvent(event): ParsedHotkey;
+```
+
+Defined in: [parse.ts:266](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L266)
+
+Parses a KeyboardEvent into a ParsedHotkey object.
+
+This function extracts the key and modifier state from a keyboard event
+and converts it into the same format used by `parseHotkey()`.
+
+## Parameters
+
+### event
+
+`KeyboardEvent`
+
+The KeyboardEvent to parse
+
+## Returns
+
+[`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+A ParsedHotkey object representing the keyboard event
+
+## Example
+
+```ts
+document.addEventListener('keydown', (event) => {
+  const parsed = parseKeyboardEvent(event)
+  console.log(parsed) // { key: 'S', ctrl: true, shift: false, ... }
+})
+```
diff --git a/mintlify/hotkeys/reference/functions/rawHotkeyToParsedHotkey.md b/mintlify/hotkeys/reference/functions/rawHotkeyToParsedHotkey.md
new file mode 100644
index 000000000..6f351969b
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/rawHotkeyToParsedHotkey.md
@@ -0,0 +1,49 @@
+---
+id: rawHotkeyToParsedHotkey
+title: rawHotkeyToParsedHotkey
+---
+
+# Function: rawHotkeyToParsedHotkey()
+
+```ts
+function rawHotkeyToParsedHotkey(raw, platform): ParsedHotkey;
+```
+
+Defined in: [parse.ts:99](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/parse.ts#L99)
+
+Converts a RawHotkey object to a ParsedHotkey.
+Optional modifier booleans default to false; modifiers array is derived from them.
+When `mod` is true, it is resolved to Control or Meta based on platform.
+
+## Parameters
+
+### raw
+
+[`RawHotkey`](/hotkeys/reference/interfaces/RawHotkey)
+
+The raw hotkey object
+
+### platform
+
+The target platform for resolving 'Mod' (defaults to auto-detection)
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`ParsedHotkey`](/hotkeys/reference/interfaces/ParsedHotkey)
+
+A ParsedHotkey suitable for matching and formatting
+
+## Example
+
+```ts
+rawHotkeyToParsedHotkey({ key: 'Escape' })
+// { key: 'Escape', ctrl: false, shift: false, alt: false, meta: false, modifiers: [] }
+
+rawHotkeyToParsedHotkey({ key: 'S', mod: true }, 'mac')
+// { key: 'S', ctrl: false, shift: false, alt: false, meta: true, modifiers: ['Meta'] }
+
+rawHotkeyToParsedHotkey({ key: 'S', mod: true, shift: true }, 'windows')
+// { key: 'S', ctrl: true, shift: true, alt: false, meta: false, modifiers: ['Control', 'Shift'] }
+```
diff --git a/mintlify/hotkeys/reference/functions/resolveModifier.md b/mintlify/hotkeys/reference/functions/resolveModifier.md
new file mode 100644
index 000000000..2738f31c4
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/resolveModifier.md
@@ -0,0 +1,49 @@
+---
+id: resolveModifier
+title: resolveModifier
+---
+
+# Function: resolveModifier()
+
+```ts
+function resolveModifier(modifier, platform): CanonicalModifier;
+```
+
+Defined in: [constants.ts:153](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L153)
+
+Resolves the platform-adaptive 'Mod' modifier to the appropriate canonical modifier.
+
+The 'Mod' token represents the "primary modifier" on each platform:
+- macOS: 'Meta' (Command key ⌘)
+- Windows/Linux: 'Control' (Ctrl key)
+
+This enables cross-platform hotkey definitions like 'Mod+S' that automatically
+map to Command+S on Mac and Ctrl+S on Windows/Linux.
+
+## Parameters
+
+### modifier
+
+The modifier to resolve. If 'Mod', resolves based on platform.
+
+`"Mod"` | [`CanonicalModifier`](/hotkeys/reference/type-aliases/CanonicalModifier)
+
+### platform
+
+The target platform. Defaults to auto-detection.
+
+`"mac"` | `"windows"` | `"linux"`
+
+## Returns
+
+[`CanonicalModifier`](/hotkeys/reference/type-aliases/CanonicalModifier)
+
+The canonical modifier name ('Control', 'Shift', 'Alt', or 'Meta')
+
+## Example
+
+```ts
+resolveModifier('Mod', 'mac') // 'Meta'
+resolveModifier('Mod', 'windows') // 'Control'
+resolveModifier('Control', 'mac') // 'Control' (unchanged)
+```
diff --git a/mintlify/hotkeys/reference/functions/toHotkeyRegistrationView.md b/mintlify/hotkeys/reference/functions/toHotkeyRegistrationView.md
new file mode 100644
index 000000000..1496e1d65
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/toHotkeyRegistrationView.md
@@ -0,0 +1,25 @@
+---
+id: toHotkeyRegistrationView
+title: toHotkeyRegistrationView
+---
+
+# Function: toHotkeyRegistrationView()
+
+```ts
+function toHotkeyRegistrationView(reg): HotkeyRegistrationView;
+```
+
+Defined in: [hotkey-manager.ts:102](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L102)
+
+Creates a public view from an internal registration,
+stripping the callback function.
+
+## Parameters
+
+### reg
+
+[`HotkeyRegistration`](/hotkeys/reference/interfaces/HotkeyRegistration)
+
+## Returns
+
+[`HotkeyRegistrationView`](/hotkeys/reference/interfaces/HotkeyRegistrationView)
diff --git a/mintlify/hotkeys/reference/functions/validateHotkey.md b/mintlify/hotkeys/reference/functions/validateHotkey.md
new file mode 100644
index 000000000..e07f8feae
--- /dev/null
+++ b/mintlify/hotkeys/reference/functions/validateHotkey.md
@@ -0,0 +1,43 @@
+---
+id: validateHotkey
+title: validateHotkey
+---
+
+# Function: validateHotkey()
+
+```ts
+function validateHotkey(hotkey): ValidationResult;
+```
+
+Defined in: [validate.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/validate.ts#L24)
+
+Validates a hotkey string and returns any warnings or errors.
+
+Checks for:
+- Valid syntax (modifier+...+key format)
+- Known modifiers
+- Known keys
+
+## Parameters
+
+### hotkey
+
+The hotkey string to validate
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey) | `string` & `object`
+
+## Returns
+
+[`ValidationResult`](/hotkeys/reference/interfaces/ValidationResult)
+
+A ValidationResult with validity status, warnings, and errors
+
+## Example
+
+```ts
+validateHotkey('Mod+S')
+// { valid: true, warnings: [], errors: [] }
+
+validateHotkey('')
+// { valid: false, warnings: [], errors: ['Hotkey cannot be empty'] }
+```
diff --git a/mintlify/hotkeys/reference/index.md b/mintlify/hotkeys/reference/index.md
new file mode 100644
index 000000000..7a0cb3e96
--- /dev/null
+++ b/mintlify/hotkeys/reference/index.md
@@ -0,0 +1,107 @@
+---
+id: "@tanstack/hotkeys"
+title: "@tanstack/hotkeys"
+---
+
+# @tanstack/hotkeys
+
+## Classes
+
+- [HotkeyManager](/hotkeys/reference/classes/HotkeyManager)
+- [HotkeyRecorder](/hotkeys/reference/classes/HotkeyRecorder)
+- [HotkeySequenceRecorder](/hotkeys/reference/classes/HotkeySequenceRecorder)
+- [KeyStateTracker](/hotkeys/reference/classes/KeyStateTracker)
+- [SequenceManager](/hotkeys/reference/classes/SequenceManager)
+
+## Interfaces
+
+- [CreateHotkeyHandlerOptions](/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions)
+- [FormatDisplayOptions](/hotkeys/reference/interfaces/FormatDisplayOptions)
+- [HotkeyCallbackContext](/hotkeys/reference/interfaces/HotkeyCallbackContext)
+- [HotkeyMeta](/hotkeys/reference/interfaces/HotkeyMeta)
+- [HotkeyOptions](/hotkeys/reference/interfaces/HotkeyOptions)
+- [HotkeyRecorderOptions](/hotkeys/reference/interfaces/HotkeyRecorderOptions)
+- [HotkeyRecorderState](/hotkeys/reference/interfaces/HotkeyRecorderState)
+- [HotkeyRegistration](/hotkeys/reference/interfaces/HotkeyRegistration)
+- [HotkeyRegistrationHandle](/hotkeys/reference/interfaces/HotkeyRegistrationHandle)
+- [HotkeyRegistrationView](/hotkeys/reference/interfaces/HotkeyRegistrationView)
+- [HotkeySequenceRecorderOptions](/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions)
+- [HotkeySequenceRecorderState](/hotkeys/reference/interfaces/HotkeySequenceRecorderState)
+- [KeyStateTrackerState](/hotkeys/reference/interfaces/KeyStateTrackerState)
+- [ParsedHotkey](/hotkeys/reference/interfaces/ParsedHotkey)
+- [RawHotkey](/hotkeys/reference/interfaces/RawHotkey)
+- [SequenceOptions](/hotkeys/reference/interfaces/SequenceOptions)
+- [SequenceRegistrationHandle](/hotkeys/reference/interfaces/SequenceRegistrationHandle)
+- [SequenceRegistrationView](/hotkeys/reference/interfaces/SequenceRegistrationView)
+- [ValidationResult](/hotkeys/reference/interfaces/ValidationResult)
+
+## Type Aliases
+
+- [CanonicalModifier](/hotkeys/reference/type-aliases/CanonicalModifier)
+- [ConflictBehavior](/hotkeys/reference/type-aliases/ConflictBehavior)
+- [EditingKey](/hotkeys/reference/type-aliases/EditingKey)
+- [FunctionKey](/hotkeys/reference/type-aliases/FunctionKey)
+- [Hotkey](/hotkeys/reference/type-aliases/Hotkey)
+- [HotkeyCallback](/hotkeys/reference/type-aliases/HotkeyCallback)
+- [HotkeySequence](/hotkeys/reference/type-aliases/HotkeySequence)
+- [HotkeySequenceRecorderCommitKeys](/hotkeys/reference/type-aliases/HotkeySequenceRecorderCommitKeys)
+- [IndividualKey](/hotkeys/reference/type-aliases/IndividualKey)
+- [Key](/hotkeys/reference/type-aliases/Key)
+- [LetterKey](/hotkeys/reference/type-aliases/LetterKey)
+- [Modifier](/hotkeys/reference/type-aliases/Modifier)
+- [NavigationKey](/hotkeys/reference/type-aliases/NavigationKey)
+- [NumberKey](/hotkeys/reference/type-aliases/NumberKey)
+- [PunctuationKey](/hotkeys/reference/type-aliases/PunctuationKey)
+- [RegisterableHotkey](/hotkeys/reference/type-aliases/RegisterableHotkey)
+
+## Variables
+
+- [ALL\_KEYS](/hotkeys/reference/variables/ALL_KEYS)
+- [DEFAULT\_SEQUENCE\_TIMEOUT](/hotkeys/reference/variables/DEFAULT_SEQUENCE_TIMEOUT)
+- [EDITING\_KEYS](/hotkeys/reference/variables/EDITING_KEYS)
+- [FUNCTION\_KEYS](/hotkeys/reference/variables/FUNCTION_KEYS)
+- [KEY\_DISPLAY\_SYMBOLS](/hotkeys/reference/variables/KEY_DISPLAY_SYMBOLS)
+- [LETTER\_KEYS](/hotkeys/reference/variables/LETTER_KEYS)
+- [LINUX\_MODIFIER\_LABELS](/hotkeys/reference/variables/LINUX_MODIFIER_LABELS)
+- [MAC\_MODIFIER\_LABELS](/hotkeys/reference/variables/MAC_MODIFIER_LABELS)
+- [MAC\_MODIFIER\_SYMBOLS](/hotkeys/reference/variables/MAC_MODIFIER_SYMBOLS)
+- [MODIFIER\_ALIASES](/hotkeys/reference/variables/MODIFIER_ALIASES)
+- [MODIFIER\_KEYS](/hotkeys/reference/variables/MODIFIER_KEYS)
+- [MODIFIER\_ORDER](/hotkeys/reference/variables/MODIFIER_ORDER)
+- [NAVIGATION\_KEYS](/hotkeys/reference/variables/NAVIGATION_KEYS)
+- [NUMBER\_KEYS](/hotkeys/reference/variables/NUMBER_KEYS)
+- [PUNCTUATION\_CODE\_MAP](/hotkeys/reference/variables/PUNCTUATION_CODE_MAP)
+- [PUNCTUATION\_KEY\_DISPLAY\_LABELS](/hotkeys/reference/variables/PUNCTUATION_KEY_DISPLAY_LABELS)
+- [PUNCTUATION\_KEYS](/hotkeys/reference/variables/PUNCTUATION_KEYS)
+- [WINDOWS\_MODIFIER\_LABELS](/hotkeys/reference/variables/WINDOWS_MODIFIER_LABELS)
+
+## Functions
+
+- [assertValidHotkey](/hotkeys/reference/functions/assertValidHotkey)
+- [checkHotkey](/hotkeys/reference/functions/checkHotkey)
+- [createHotkeyHandler](/hotkeys/reference/functions/createHotkeyHandler)
+- [createMultiHotkeyHandler](/hotkeys/reference/functions/createMultiHotkeyHandler)
+- [createSequenceMatcher](/hotkeys/reference/functions/createSequenceMatcher)
+- [detectPlatform](/hotkeys/reference/functions/detectPlatform)
+- [formatForDisplay](/hotkeys/reference/functions/formatForDisplay)
+- [formatHotkey](/hotkeys/reference/functions/formatHotkey)
+- [formatHotkeySequence](/hotkeys/reference/functions/formatHotkeySequence)
+- [~~formatWithLabels~~](/hotkeys/reference/functions/formatWithLabels)
+- [getHotkeyManager](/hotkeys/reference/functions/getHotkeyManager)
+- [getKeyStateTracker](/hotkeys/reference/functions/getKeyStateTracker)
+- [getSequenceManager](/hotkeys/reference/functions/getSequenceManager)
+- [hasNonModifierKey](/hotkeys/reference/functions/hasNonModifierKey)
+- [isModifierKey](/hotkeys/reference/functions/isModifierKey)
+- [isSingleLetterKey](/hotkeys/reference/functions/isSingleLetterKey)
+- [matchesKeyboardEvent](/hotkeys/reference/functions/matchesKeyboardEvent)
+- [normalizeHotkey](/hotkeys/reference/functions/normalizeHotkey)
+- [normalizeHotkeyFromEvent](/hotkeys/reference/functions/normalizeHotkeyFromEvent)
+- [normalizeHotkeyFromParsed](/hotkeys/reference/functions/normalizeHotkeyFromParsed)
+- [normalizeKeyName](/hotkeys/reference/functions/normalizeKeyName)
+- [normalizeRegisterableHotkey](/hotkeys/reference/functions/normalizeRegisterableHotkey)
+- [parseHotkey](/hotkeys/reference/functions/parseHotkey)
+- [parseKeyboardEvent](/hotkeys/reference/functions/parseKeyboardEvent)
+- [rawHotkeyToParsedHotkey](/hotkeys/reference/functions/rawHotkeyToParsedHotkey)
+- [resolveModifier](/hotkeys/reference/functions/resolveModifier)
+- [toHotkeyRegistrationView](/hotkeys/reference/functions/toHotkeyRegistrationView)
+- [validateHotkey](/hotkeys/reference/functions/validateHotkey)
diff --git a/mintlify/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions.md b/mintlify/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions.md
new file mode 100644
index 000000000..7ff010124
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/CreateHotkeyHandlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: CreateHotkeyHandlerOptions
+title: CreateHotkeyHandlerOptions
+---
+
+# Interface: CreateHotkeyHandlerOptions
+
+Defined in: [match.ts:132](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L132)
+
+Options for creating a hotkey handler.
+
+## Properties
+
+### platform?
+
+```ts
+optional platform: "mac" | "windows" | "linux";
+```
+
+Defined in: [match.ts:138](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L138)
+
+The target platform for resolving 'Mod'
+
+***
+
+### preventDefault?
+
+```ts
+optional preventDefault: boolean;
+```
+
+Defined in: [match.ts:134](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L134)
+
+Prevent the default browser action when the hotkey matches. Defaults to true
+
+***
+
+### stopPropagation?
+
+```ts
+optional stopPropagation: boolean;
+```
+
+Defined in: [match.ts:136](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/match.ts#L136)
+
+Stop event propagation when the hotkey matches. Defaults to true
diff --git a/mintlify/hotkeys/reference/interfaces/FormatDisplayOptions.md b/mintlify/hotkeys/reference/interfaces/FormatDisplayOptions.md
new file mode 100644
index 000000000..724e20449
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/FormatDisplayOptions.md
@@ -0,0 +1,46 @@
+---
+id: FormatDisplayOptions
+title: FormatDisplayOptions
+---
+
+# Interface: FormatDisplayOptions
+
+Defined in: [hotkey.ts:367](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L367)
+
+Options for formatting hotkeys for display.
+
+## Properties
+
+### platform?
+
+```ts
+optional platform: "mac" | "windows" | "linux";
+```
+
+Defined in: [hotkey.ts:369](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L369)
+
+The target platform. Defaults to auto-detection.
+
+***
+
+### separatorToken?
+
+```ts
+optional separatorToken: string | null;
+```
+
+Defined in: [hotkey.ts:373](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L373)
+
+Override the separator between display tokens. Defaults to platform-specific formatting when null/undefined.
+
+***
+
+### useSymbols?
+
+```ts
+optional useSymbols: boolean;
+```
+
+Defined in: [hotkey.ts:371](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L371)
+
+Whether to use symbols for the display. Defaults to true.
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyCallbackContext.md b/mintlify/hotkeys/reference/interfaces/HotkeyCallbackContext.md
new file mode 100644
index 000000000..edacfce80
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyCallbackContext.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyCallbackContext
+title: HotkeyCallbackContext
+---
+
+# Interface: HotkeyCallbackContext
+
+Defined in: [hotkey.ts:391](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L391)
+
+Context passed to hotkey callbacks along with the keyboard event.
+
+## Properties
+
+### hotkey
+
+```ts
+hotkey: Hotkey;
+```
+
+Defined in: [hotkey.ts:393](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L393)
+
+The original hotkey string that was registered
+
+***
+
+### parsedHotkey
+
+```ts
+parsedHotkey: ParsedHotkey;
+```
+
+Defined in: [hotkey.ts:395](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L395)
+
+The parsed representation of the hotkey
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyMeta.md b/mintlify/hotkeys/reference/interfaces/HotkeyMeta.md
new file mode 100644
index 000000000..f0d5fe6f7
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyMeta.md
@@ -0,0 +1,46 @@
+---
+id: HotkeyMeta
+title: HotkeyMeta
+---
+
+# Interface: HotkeyMeta
+
+Defined in: [hotkey.ts:431](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L431)
+
+Metadata for hotkey and sequence registrations.
+Includes `name` and `description` by default. Extend via declaration merging:
+
+## Example
+
+```ts
+declare module '@tanstack/hotkeys' {
+  interface HotkeyMeta {
+    category?: string
+    icon?: string
+  }
+}
+```
+
+## Properties
+
+### description?
+
+```ts
+optional description: string;
+```
+
+Defined in: [hotkey.ts:435](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L435)
+
+Description of what this hotkey does
+
+***
+
+### name?
+
+```ts
+optional name: string;
+```
+
+Defined in: [hotkey.ts:433](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L433)
+
+Human-readable name for this hotkey (e.g., "Save Document")
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyOptions.md b/mintlify/hotkeys/reference/interfaces/HotkeyOptions.md
new file mode 100644
index 000000000..0e637c027
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyOptions.md
@@ -0,0 +1,132 @@
+---
+id: HotkeyOptions
+title: HotkeyOptions
+---
+
+# Interface: HotkeyOptions
+
+Defined in: [hotkey-manager.ts:28](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L28)
+
+Options for registering a hotkey.
+
+## Properties
+
+### conflictBehavior?
+
+```ts
+optional conflictBehavior: ConflictBehavior;
+```
+
+Defined in: [hotkey-manager.ts:30](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L30)
+
+Behavior when this hotkey conflicts with an existing registration on the same target. Defaults to 'warn'
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean;
+```
+
+Defined in: [hotkey-manager.ts:36](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L36)
+
+Soft-disable: when `false`, the callback does not run but the registration
+stays in `HotkeyManager` (and in devtools). Toggling this should update the
+existing handle via `setOptions` rather than unregistering. Defaults to `true`.
+
+***
+
+### eventType?
+
+```ts
+optional eventType: "keydown" | "keyup";
+```
+
+Defined in: [hotkey-manager.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L38)
+
+The event type to listen for. Defaults to 'keydown'
+
+***
+
+### ignoreInputs?
+
+```ts
+optional ignoreInputs: boolean;
+```
+
+Defined in: [hotkey-manager.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L40)
+
+Whether to ignore hotkeys when keyboard events originate from input-like elements (text inputs, textarea, select, contenteditable — button-type inputs like type=button/submit/reset are not ignored). Defaults based on hotkey: true for single keys and Shift/Alt combos; false for Ctrl/Meta shortcuts and Escape
+
+***
+
+### meta?
+
+```ts
+optional meta: HotkeyMeta;
+```
+
+Defined in: [hotkey-manager.ts:52](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L52)
+
+Optional metadata (name, description, custom fields via declaration merging)
+
+***
+
+### platform?
+
+```ts
+optional platform: "mac" | "windows" | "linux";
+```
+
+Defined in: [hotkey-manager.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L42)
+
+The target platform for resolving 'Mod'
+
+***
+
+### preventDefault?
+
+```ts
+optional preventDefault: boolean;
+```
+
+Defined in: [hotkey-manager.ts:44](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L44)
+
+Prevent the default browser action when the hotkey matches. Defaults to true
+
+***
+
+### requireReset?
+
+```ts
+optional requireReset: boolean;
+```
+
+Defined in: [hotkey-manager.ts:46](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L46)
+
+If true, only trigger once until all keys are released. Default: false
+
+***
+
+### stopPropagation?
+
+```ts
+optional stopPropagation: boolean;
+```
+
+Defined in: [hotkey-manager.ts:48](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L48)
+
+Stop event propagation when the hotkey matches. Defaults to true
+
+***
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [hotkey-manager.ts:50](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L50)
+
+The DOM element to attach the event listener to. Defaults to document.
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyRecorderOptions.md b/mintlify/hotkeys/reference/interfaces/HotkeyRecorderOptions.md
new file mode 100644
index 000000000..43db61ac7
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyRecorderOptions.md
@@ -0,0 +1,85 @@
+---
+id: HotkeyRecorderOptions
+title: HotkeyRecorderOptions
+---
+
+# Interface: HotkeyRecorderOptions
+
+Defined in: [hotkey-recorder.ts:20](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L20)
+
+Options for configuring a HotkeyRecorder instance.
+
+## Properties
+
+### ignoreInputs?
+
+```ts
+optional ignoreInputs: boolean;
+```
+
+Defined in: [hotkey-recorder.ts:34](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L34)
+
+Whether to ignore keyboard events from input-like elements (text inputs,
+textarea, select, contenteditable). When true, typing in inputs passes
+through normally instead of being captured as a hotkey recording.
+Escape always works regardless of this setting.
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### onCancel()?
+
+```ts
+optional onCancel: () => void;
+```
+
+Defined in: [hotkey-recorder.ts:24](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L24)
+
+Optional callback when recording is cancelled (Escape pressed)
+
+#### Returns
+
+`void`
+
+***
+
+### onClear()?
+
+```ts
+optional onClear: () => void;
+```
+
+Defined in: [hotkey-recorder.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L26)
+
+Optional callback when shortcut is cleared (Backspace/Delete pressed)
+
+#### Returns
+
+`void`
+
+***
+
+### onRecord()
+
+```ts
+onRecord: (hotkey) => void;
+```
+
+Defined in: [hotkey-recorder.ts:22](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L22)
+
+Callback when a hotkey is successfully recorded
+
+#### Parameters
+
+##### hotkey
+
+[`Hotkey`](/hotkeys/reference/type-aliases/Hotkey)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyRecorderState.md b/mintlify/hotkeys/reference/interfaces/HotkeyRecorderState.md
new file mode 100644
index 000000000..cda4de561
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyRecorderState.md
@@ -0,0 +1,34 @@
+---
+id: HotkeyRecorderState
+title: HotkeyRecorderState
+---
+
+# Interface: HotkeyRecorderState
+
+Defined in: [hotkey-recorder.ts:10](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L10)
+
+State interface for the HotkeyRecorder.
+
+## Properties
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [hotkey-recorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L12)
+
+Whether recording is currently active
+
+***
+
+### recordedHotkey
+
+```ts
+recordedHotkey: Hotkey | null;
+```
+
+Defined in: [hotkey-recorder.ts:14](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-recorder.ts#L14)
+
+The currently recorded hotkey (for live preview)
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyRegistration.md b/mintlify/hotkeys/reference/interfaces/HotkeyRegistration.md
new file mode 100644
index 000000000..775f7d88d
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyRegistration.md
@@ -0,0 +1,106 @@
+---
+id: HotkeyRegistration
+title: HotkeyRegistration
+---
+
+# Interface: HotkeyRegistration
+
+Defined in: [hotkey-manager.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L58)
+
+A registered hotkey handler in the HotkeyManager.
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [hotkey-manager.ts:60](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L60)
+
+The callback to invoke
+
+***
+
+### hasFired
+
+```ts
+hasFired: boolean;
+```
+
+Defined in: [hotkey-manager.ts:62](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L62)
+
+Whether this registration has fired and needs reset (for requireReset)
+
+***
+
+### hotkey
+
+```ts
+hotkey: Hotkey;
+```
+
+Defined in: [hotkey-manager.ts:64](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L64)
+
+The original hotkey string
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [hotkey-manager.ts:66](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L66)
+
+Unique identifier for this registration
+
+***
+
+### options
+
+```ts
+options: HotkeyOptions;
+```
+
+Defined in: [hotkey-manager.ts:68](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L68)
+
+Options for this registration
+
+***
+
+### parsedHotkey
+
+```ts
+parsedHotkey: ParsedHotkey;
+```
+
+Defined in: [hotkey-manager.ts:70](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L70)
+
+The parsed hotkey
+
+***
+
+### target
+
+```ts
+target: HTMLElement | Document | Window;
+```
+
+Defined in: [hotkey-manager.ts:72](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L72)
+
+The resolved target element for this registration
+
+***
+
+### triggerCount
+
+```ts
+triggerCount: number;
+```
+
+Defined in: [hotkey-manager.ts:74](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L74)
+
+How many times this registration's callback has been triggered
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationHandle.md b/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationHandle.md
new file mode 100644
index 000000000..b8b4454cd
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationHandle.md
@@ -0,0 +1,107 @@
+---
+id: HotkeyRegistrationHandle
+title: HotkeyRegistrationHandle
+---
+
+# Interface: HotkeyRegistrationHandle
+
+Defined in: [hotkey-manager.ts:139](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L139)
+
+A handle returned from HotkeyManager.register() that allows updating
+the callback and options without re-registering the hotkey.
+
+## Example
+
+```ts
+const handle = manager.register('Mod+S', callback, options)
+
+// Update callback without re-registering (avoids stale closures)
+handle.callback = newCallback
+
+// Update options without re-registering
+handle.setOptions({ enabled: false })
+
+// Check if still active
+if (handle.isActive) {
+  // ...
+}
+
+// Unregister when done
+handle.unregister()
+```
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [hotkey-manager.ts:144](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L144)
+
+The callback function. Can be set directly to update without re-registering.
+This avoids stale closures when the callback references React state.
+
+***
+
+### id
+
+```ts
+readonly id: string;
+```
+
+Defined in: [hotkey-manager.ts:146](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L146)
+
+Unique identifier for this registration
+
+***
+
+### isActive
+
+```ts
+readonly isActive: boolean;
+```
+
+Defined in: [hotkey-manager.ts:148](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L148)
+
+Check if this registration is still active (not unregistered)
+
+***
+
+### setOptions()
+
+```ts
+setOptions: (options) => void;
+```
+
+Defined in: [hotkey-manager.ts:153](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L153)
+
+Update options (merged with existing options).
+Useful for updating `enabled`, `preventDefault`, etc. without re-registering.
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions)\>
+
+#### Returns
+
+`void`
+
+***
+
+### unregister()
+
+```ts
+unregister: () => void;
+```
+
+Defined in: [hotkey-manager.ts:155](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L155)
+
+Unregister this hotkey
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationView.md b/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationView.md
new file mode 100644
index 000000000..b7c4d8d3e
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeyRegistrationView.md
@@ -0,0 +1,95 @@
+---
+id: HotkeyRegistrationView
+title: HotkeyRegistrationView
+---
+
+# Interface: HotkeyRegistrationView
+
+Defined in: [hotkey-manager.ts:81](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L81)
+
+Public view of a hotkey registration for display and introspection.
+Omits the callback function which is an internal implementation detail.
+
+## Properties
+
+### hasFired
+
+```ts
+hasFired: boolean;
+```
+
+Defined in: [hotkey-manager.ts:95](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L95)
+
+Whether this registration has fired and needs reset (for requireReset)
+
+***
+
+### hotkey
+
+```ts
+hotkey: Hotkey;
+```
+
+Defined in: [hotkey-manager.ts:83](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L83)
+
+The original hotkey string
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [hotkey-manager.ts:85](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L85)
+
+Unique identifier for this registration
+
+***
+
+### options
+
+```ts
+options: HotkeyOptions;
+```
+
+Defined in: [hotkey-manager.ts:87](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L87)
+
+Options for this registration
+
+***
+
+### parsedHotkey
+
+```ts
+parsedHotkey: ParsedHotkey;
+```
+
+Defined in: [hotkey-manager.ts:89](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L89)
+
+The parsed hotkey
+
+***
+
+### target
+
+```ts
+target: HTMLElement | Document | Window;
+```
+
+Defined in: [hotkey-manager.ts:91](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L91)
+
+The resolved target element for this registration
+
+***
+
+### triggerCount
+
+```ts
+triggerCount: number;
+```
+
+Defined in: [hotkey-manager.ts:93](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L93)
+
+How many times this registration's callback has been triggered
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions.md b/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions.md
new file mode 100644
index 000000000..8c88ecd7b
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderOptions.md
@@ -0,0 +1,134 @@
+---
+id: HotkeySequenceRecorderOptions
+title: HotkeySequenceRecorderOptions
+---
+
+# Interface: HotkeySequenceRecorderOptions
+
+Defined in: [hotkey-sequence-recorder.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L29)
+
+Options for configuring a HotkeySequenceRecorder instance.
+
+## Properties
+
+### commitKeys?
+
+```ts
+optional commitKeys: HotkeySequenceRecorderCommitKeys;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:45](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L45)
+
+Keyboard commit mode. When `'none'`, use [HotkeySequenceRecorder.commit](/hotkeys/reference/classes/HotkeySequenceRecorder#commit) (and optional idle timeout).
+
+#### Default
+
+```ts
+'enter'
+```
+
+***
+
+### commitOnEnter?
+
+```ts
+optional commitOnEnter: boolean;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L40)
+
+Whether plain Enter commits the current steps. Ignored when [commitKeys](#commitkeys) is `'none'`.
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### idleTimeoutMs?
+
+```ts
+optional idleTimeoutMs: number;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:50](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L50)
+
+Milliseconds of inactivity after the **last completed chord** before auto-committing.
+The timer does not run while waiting for the first chord (`steps.length === 0`).
+
+***
+
+### ignoreInputs?
+
+```ts
+optional ignoreInputs: boolean;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L58)
+
+Whether to ignore keyboard events from input-like elements (text inputs,
+textarea, select, contenteditable). When true, typing in inputs passes
+through normally instead of being captured as a sequence recording.
+Escape always works regardless of this setting.
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### onCancel()?
+
+```ts
+optional onCancel: () => void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:33](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L33)
+
+Optional callback when recording is cancelled (Escape pressed)
+
+#### Returns
+
+`void`
+
+***
+
+### onClear()?
+
+```ts
+optional onClear: () => void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L35)
+
+Optional callback when the sequence is cleared (Backspace/Delete with no steps)
+
+#### Returns
+
+`void`
+
+***
+
+### onRecord()
+
+```ts
+onRecord: (sequence) => void;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:31](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L31)
+
+Callback when a sequence is successfully recorded (including empty array when cleared)
+
+#### Parameters
+
+##### sequence
+
+[`HotkeySequence`](/hotkeys/reference/type-aliases/HotkeySequence)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderState.md b/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderState.md
new file mode 100644
index 000000000..103307998
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/HotkeySequenceRecorderState.md
@@ -0,0 +1,46 @@
+---
+id: HotkeySequenceRecorderState
+title: HotkeySequenceRecorderState
+---
+
+# Interface: HotkeySequenceRecorderState
+
+Defined in: [hotkey-sequence-recorder.ts:17](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L17)
+
+State interface for the HotkeySequenceRecorder.
+
+## Properties
+
+### isRecording
+
+```ts
+isRecording: boolean;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:19](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L19)
+
+Whether recording is currently active
+
+***
+
+### recordedSequence
+
+```ts
+recordedSequence: HotkeySequence | null;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L23)
+
+The last successfully committed sequence, or null if none / after starting a new session
+
+***
+
+### steps
+
+```ts
+steps: HotkeySequence;
+```
+
+Defined in: [hotkey-sequence-recorder.ts:21](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L21)
+
+Chords captured so far in the current recording session
diff --git a/mintlify/hotkeys/reference/interfaces/KeyStateTrackerState.md b/mintlify/hotkeys/reference/interfaces/KeyStateTrackerState.md
new file mode 100644
index 000000000..d256a258f
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/KeyStateTrackerState.md
@@ -0,0 +1,35 @@
+---
+id: KeyStateTrackerState
+title: KeyStateTrackerState
+---
+
+# Interface: KeyStateTrackerState
+
+Defined in: [key-state-tracker.ts:7](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L7)
+
+State interface for the KeyStateTracker.
+
+## Properties
+
+### heldCodes
+
+```ts
+heldCodes: Record<string, string>;
+```
+
+Defined in: [key-state-tracker.ts:16](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L16)
+
+Map from normalized key name to the physical `event.code` (e.g. "KeyA", "ShiftLeft").
+Useful for debugging which physical key was pressed.
+
+***
+
+### heldKeys
+
+```ts
+heldKeys: string[];
+```
+
+Defined in: [key-state-tracker.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/key-state-tracker.ts#L11)
+
+Array of currently held key names (normalized, e.g. "Control", "A").
diff --git a/mintlify/hotkeys/reference/interfaces/ParsedHotkey.md b/mintlify/hotkeys/reference/interfaces/ParsedHotkey.md
new file mode 100644
index 000000000..a142d43cd
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/ParsedHotkey.md
@@ -0,0 +1,98 @@
+---
+id: ParsedHotkey
+title: ParsedHotkey
+---
+
+# Interface: ParsedHotkey
+
+Defined in: [hotkey.ts:308](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L308)
+
+A parsed representation of a hotkey string.
+
+This interface provides a flexible fallback when the `Hotkey` type doesn't
+fit your use case. You can pass a `ParsedHotkey` directly to hotkey functions
+instead of a hotkey string, allowing for more dynamic or complex scenarios
+that aren't covered by the type-safe `Hotkey` union.
+
+## Example
+
+```ts
+// Type-safe hotkey string
+useHotkey('Mod+S', handler)
+
+// Fallback: parsed hotkey for dynamic scenarios
+const parsed = parseHotkey(userInput)
+useHotkey(parsed, handler) // Works even if userInput isn't in Hotkey type
+```
+
+## Properties
+
+### alt
+
+```ts
+alt: boolean;
+```
+
+Defined in: [hotkey.ts:316](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L316)
+
+Whether the Alt key is required
+
+***
+
+### ctrl
+
+```ts
+ctrl: boolean;
+```
+
+Defined in: [hotkey.ts:312](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L312)
+
+Whether the Control key is required
+
+***
+
+### key
+
+```ts
+key: Key | string & object;
+```
+
+Defined in: [hotkey.ts:310](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L310)
+
+The non-modifier key (e.g., 'S', 'Escape', 'F1', '/', '['). Can be any string for flexibility.
+
+***
+
+### meta
+
+```ts
+meta: boolean;
+```
+
+Defined in: [hotkey.ts:318](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L318)
+
+Whether the Meta (Command) key is required
+
+***
+
+### modifiers
+
+```ts
+modifiers: CanonicalModifier[];
+```
+
+Defined in: [hotkey.ts:320](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L320)
+
+List of canonical modifier names that are required, in canonical order
+
+***
+
+### shift
+
+```ts
+shift: boolean;
+```
+
+Defined in: [hotkey.ts:314](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L314)
+
+Whether the Shift key is required
diff --git a/mintlify/hotkeys/reference/interfaces/RawHotkey.md b/mintlify/hotkeys/reference/interfaces/RawHotkey.md
new file mode 100644
index 000000000..a0255a8fd
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/RawHotkey.md
@@ -0,0 +1,100 @@
+---
+id: RawHotkey
+title: RawHotkey
+---
+
+# Interface: RawHotkey
+
+Defined in: [hotkey.ts:343](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L343)
+
+A raw hotkey object for programmatic registration.
+
+Like `ParsedHotkey` but without `modifiers` (derived from booleans)
+and with optional modifier booleans (default to `false` when omitted).
+Use with `HotkeyManager.register()` and `useHotkey()` when you prefer
+object form over a string.
+
+The `mod` modifier is platform-adaptive: Command on macOS, Control on Windows/Linux.
+Pass `platform` when converting to ParsedHotkey (e.g., via `options.platform`).
+
+## Example
+
+```ts
+useHotkey({ key: 'S', mod: true }, handler)             // Mod+S (cross-platform)
+useHotkey({ key: 'S', ctrl: true }, handler)            // Control+S
+useHotkey({ key: 'Escape' }, handler)                   // Escape (no modifiers)
+useHotkey({ key: 'A', shift: true, meta: true }, handler) // Shift+Meta+A
+useHotkey({ key: 'S', mod: true, shift: true }, handler)  // Mod+Shift+S
+```
+
+## Properties
+
+### alt?
+
+```ts
+optional alt: boolean;
+```
+
+Defined in: [hotkey.ts:353](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L353)
+
+Whether the Alt key is required. Defaults to false.
+
+***
+
+### ctrl?
+
+```ts
+optional ctrl: boolean;
+```
+
+Defined in: [hotkey.ts:349](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L349)
+
+Whether the Control key is required. Defaults to false.
+
+***
+
+### key
+
+```ts
+key: Key | string & object;
+```
+
+Defined in: [hotkey.ts:345](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L345)
+
+The non-modifier key (e.g., 'S', 'Escape', 'F1').
+
+***
+
+### meta?
+
+```ts
+optional meta: boolean;
+```
+
+Defined in: [hotkey.ts:355](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L355)
+
+Whether the Meta (Command) key is required. Defaults to false.
+
+***
+
+### mod?
+
+```ts
+optional mod: boolean;
+```
+
+Defined in: [hotkey.ts:347](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L347)
+
+Platform-adaptive modifier: Command on macOS, Control on Windows/Linux. Defaults to false.
+
+***
+
+### shift?
+
+```ts
+optional shift: boolean;
+```
+
+Defined in: [hotkey.ts:351](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L351)
+
+Whether the Shift key is required. Defaults to false.
diff --git a/mintlify/hotkeys/reference/interfaces/SequenceOptions.md b/mintlify/hotkeys/reference/interfaces/SequenceOptions.md
new file mode 100644
index 000000000..f99161b49
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/SequenceOptions.md
@@ -0,0 +1,173 @@
+---
+id: SequenceOptions
+title: SequenceOptions
+---
+
+# Interface: SequenceOptions
+
+Defined in: [sequence-manager.ts:27](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L27)
+
+Options for hotkey sequence matching.
+Extends HotkeyOptions but excludes requireReset (not applicable to sequences).
+
+## Extends
+
+- `Omit`\&lt;[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions), `"requireReset"`\>
+
+## Properties
+
+### conflictBehavior?
+
+```ts
+optional conflictBehavior: ConflictBehavior;
+```
+
+Defined in: [hotkey-manager.ts:30](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L30)
+
+Behavior when this hotkey conflicts with an existing registration on the same target. Defaults to 'warn'
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`conflictBehavior`](/hotkeys/reference/interfaces/HotkeyOptions#conflictbehavior)
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean;
+```
+
+Defined in: [hotkey-manager.ts:36](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L36)
+
+Soft-disable: when `false`, the callback does not run but the registration
+stays in `HotkeyManager` (and in devtools). Toggling this should update the
+existing handle via `setOptions` rather than unregistering. Defaults to `true`.
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`enabled`](/hotkeys/reference/interfaces/HotkeyOptions#enabled)
+
+***
+
+### eventType?
+
+```ts
+optional eventType: "keydown" | "keyup";
+```
+
+Defined in: [hotkey-manager.ts:38](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L38)
+
+The event type to listen for. Defaults to 'keydown'
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`eventType`](/hotkeys/reference/interfaces/HotkeyOptions#eventtype)
+
+***
+
+### ignoreInputs?
+
+```ts
+optional ignoreInputs: boolean;
+```
+
+Defined in: [hotkey-manager.ts:40](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L40)
+
+Whether to ignore hotkeys when keyboard events originate from input-like elements (text inputs, textarea, select, contenteditable — button-type inputs like type=button/submit/reset are not ignored). Defaults based on hotkey: true for single keys and Shift/Alt combos; false for Ctrl/Meta shortcuts and Escape
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`ignoreInputs`](/hotkeys/reference/interfaces/HotkeyOptions#ignoreinputs)
+
+***
+
+### meta?
+
+```ts
+optional meta: HotkeyMeta;
+```
+
+Defined in: [hotkey-manager.ts:52](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L52)
+
+Optional metadata (name, description, custom fields via declaration merging)
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`meta`](/hotkeys/reference/interfaces/HotkeyOptions#meta)
+
+***
+
+### platform?
+
+```ts
+optional platform: "mac" | "windows" | "linux";
+```
+
+Defined in: [hotkey-manager.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L42)
+
+The target platform for resolving 'Mod'
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`platform`](/hotkeys/reference/interfaces/HotkeyOptions#platform)
+
+***
+
+### preventDefault?
+
+```ts
+optional preventDefault: boolean;
+```
+
+Defined in: [hotkey-manager.ts:44](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L44)
+
+Prevent the default browser action when the hotkey matches. Defaults to true
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`preventDefault`](/hotkeys/reference/interfaces/HotkeyOptions#preventdefault)
+
+***
+
+### stopPropagation?
+
+```ts
+optional stopPropagation: boolean;
+```
+
+Defined in: [hotkey-manager.ts:48](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L48)
+
+Stop event propagation when the hotkey matches. Defaults to true
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`stopPropagation`](/hotkeys/reference/interfaces/HotkeyOptions#stoppropagation)
+
+***
+
+### target?
+
+```ts
+optional target: HTMLElement | Document | Window | null;
+```
+
+Defined in: [hotkey-manager.ts:50](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-manager.ts#L50)
+
+The DOM element to attach the event listener to. Defaults to document.
+
+#### Inherited from
+
+[`HotkeyOptions`](/hotkeys/reference/interfaces/HotkeyOptions).[`target`](/hotkeys/reference/interfaces/HotkeyOptions#target)
+
+***
+
+### timeout?
+
+```ts
+optional timeout: number;
+```
+
+Defined in: [sequence-manager.ts:29](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L29)
+
+Timeout between keys in milliseconds. Default: 1000
diff --git a/mintlify/hotkeys/reference/interfaces/SequenceRegistrationHandle.md b/mintlify/hotkeys/reference/interfaces/SequenceRegistrationHandle.md
new file mode 100644
index 000000000..1cbe2ece8
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/SequenceRegistrationHandle.md
@@ -0,0 +1,85 @@
+---
+id: SequenceRegistrationHandle
+title: SequenceRegistrationHandle
+---
+
+# Interface: SequenceRegistrationHandle
+
+Defined in: [sequence-manager.ts:119](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L119)
+
+A handle returned from SequenceManager.register() that allows updating
+the callback and options without re-registering the sequence.
+
+## Example
+
+```ts
+const handle = manager.register(['G', 'G'], callback, options)
+
+handle.callback = newCallback
+handle.setOptions({ timeout: 500 })
+handle.unregister()
+```
+
+## Properties
+
+### callback
+
+```ts
+callback: HotkeyCallback;
+```
+
+Defined in: [sequence-manager.ts:122](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L122)
+
+***
+
+### id
+
+```ts
+readonly id: string;
+```
+
+Defined in: [sequence-manager.ts:120](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L120)
+
+***
+
+### isActive
+
+```ts
+readonly isActive: boolean;
+```
+
+Defined in: [sequence-manager.ts:121](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L121)
+
+***
+
+### setOptions()
+
+```ts
+setOptions: (options) => void;
+```
+
+Defined in: [sequence-manager.ts:123](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L123)
+
+#### Parameters
+
+##### options
+
+`Partial`\&lt;[`SequenceOptions`](/hotkeys/reference/interfaces/SequenceOptions)\>
+
+#### Returns
+
+`void`
+
+***
+
+### unregister()
+
+```ts
+unregister: () => void;
+```
+
+Defined in: [sequence-manager.ts:124](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L124)
+
+#### Returns
+
+`void`
diff --git a/mintlify/hotkeys/reference/interfaces/SequenceRegistrationView.md b/mintlify/hotkeys/reference/interfaces/SequenceRegistrationView.md
new file mode 100644
index 000000000..55df6d72c
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/SequenceRegistrationView.md
@@ -0,0 +1,97 @@
+---
+id: SequenceRegistrationView
+title: SequenceRegistrationView
+---
+
+# Interface: SequenceRegistrationView
+
+Defined in: [sequence-manager.ts:76](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L76)
+
+View of a sequence registration for devtools display.
+Progress fields reflect an in-progress match (between first key and completion or timeout).
+
+## Properties
+
+### hasFired
+
+```ts
+hasFired: boolean;
+```
+
+Defined in: [sequence-manager.ts:83](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L83)
+
+Whether this sequence has been triggered at least once.
+
+***
+
+### id
+
+```ts
+id: string;
+```
+
+Defined in: [sequence-manager.ts:77](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L77)
+
+***
+
+### matchedStepCount
+
+```ts
+matchedStepCount: number;
+```
+
+Defined in: [sequence-manager.ts:85](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L85)
+
+Steps matched in the current attempt (0 when idle or just completed).
+
+***
+
+### options
+
+```ts
+options: SequenceOptions;
+```
+
+Defined in: [sequence-manager.ts:79](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L79)
+
+***
+
+### partialMatchLastKeyTime
+
+```ts
+partialMatchLastKeyTime: number;
+```
+
+Defined in: [sequence-manager.ts:87](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L87)
+
+`Date.now()` when the last step in the current attempt matched; 0 if none.
+
+***
+
+### sequence
+
+```ts
+sequence: HotkeySequence;
+```
+
+Defined in: [sequence-manager.ts:78](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L78)
+
+***
+
+### target
+
+```ts
+target: Target;
+```
+
+Defined in: [sequence-manager.ts:80](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L80)
+
+***
+
+### triggerCount
+
+```ts
+triggerCount: number;
+```
+
+Defined in: [sequence-manager.ts:81](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L81)
diff --git a/mintlify/hotkeys/reference/interfaces/ValidationResult.md b/mintlify/hotkeys/reference/interfaces/ValidationResult.md
new file mode 100644
index 000000000..fc7e9c1e5
--- /dev/null
+++ b/mintlify/hotkeys/reference/interfaces/ValidationResult.md
@@ -0,0 +1,46 @@
+---
+id: ValidationResult
+title: ValidationResult
+---
+
+# Interface: ValidationResult
+
+Defined in: [hotkey.ts:379](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L379)
+
+Result of validating a hotkey string.
+
+## Properties
+
+### errors
+
+```ts
+errors: string[];
+```
+
+Defined in: [hotkey.ts:385](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L385)
+
+Error messages about invalid syntax
+
+***
+
+### valid
+
+```ts
+valid: boolean;
+```
+
+Defined in: [hotkey.ts:381](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L381)
+
+Whether the hotkey is valid (can still have warnings)
+
+***
+
+### warnings
+
+```ts
+warnings: string[];
+```
+
+Defined in: [hotkey.ts:383](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L383)
+
+Warning messages about potential issues
diff --git a/mintlify/hotkeys/reference/type-aliases/CanonicalModifier.md b/mintlify/hotkeys/reference/type-aliases/CanonicalModifier.md
new file mode 100644
index 000000000..022926717
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/CanonicalModifier.md
@@ -0,0 +1,14 @@
+---
+id: CanonicalModifier
+title: CanonicalModifier
+---
+
+# Type Alias: CanonicalModifier
+
+```ts
+type CanonicalModifier = "Control" | "Shift" | "Alt" | "Meta";
+```
+
+Defined in: [hotkey.ts:23](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L23)
+
+Canonical modifier names that map to KeyboardEvent properties.
diff --git a/mintlify/hotkeys/reference/type-aliases/ConflictBehavior.md b/mintlify/hotkeys/reference/type-aliases/ConflictBehavior.md
new file mode 100644
index 000000000..50f06ca9b
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/ConflictBehavior.md
@@ -0,0 +1,19 @@
+---
+id: ConflictBehavior
+title: ConflictBehavior
+---
+
+# Type Alias: ConflictBehavior
+
+```ts
+type ConflictBehavior = "warn" | "error" | "replace" | "allow";
+```
+
+Defined in: [manager.utils.ts:11](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/manager.utils.ts#L11)
+
+Behavior when registering a hotkey/sequence that conflicts with an existing registration.
+
+- `'warn'` - Log a warning to the console but allow both registrations (default)
+- `'error'` - Throw an error and prevent the new registration
+- `'replace'` - Unregister the existing registration and register the new one
+- `'allow'` - Allow multiple registrations without warning
diff --git a/mintlify/hotkeys/reference/type-aliases/EditingKey.md b/mintlify/hotkeys/reference/type-aliases/EditingKey.md
new file mode 100644
index 000000000..7c1bb2641
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/EditingKey.md
@@ -0,0 +1,14 @@
+---
+id: EditingKey
+title: EditingKey
+---
+
+# Type Alias: EditingKey
+
+```ts
+type EditingKey = "Enter" | "Escape" | "Space" | "Tab" | "Backspace" | "Delete";
+```
+
+Defined in: [hotkey.ts:104](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L104)
+
+Editing and special keys.
diff --git a/mintlify/hotkeys/reference/type-aliases/FunctionKey.md b/mintlify/hotkeys/reference/type-aliases/FunctionKey.md
new file mode 100644
index 000000000..d2b42f26e
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/FunctionKey.md
@@ -0,0 +1,26 @@
+---
+id: FunctionKey
+title: FunctionKey
+---
+
+# Type Alias: FunctionKey
+
+```ts
+type FunctionKey = 
+  | "F1"
+  | "F2"
+  | "F3"
+  | "F4"
+  | "F5"
+  | "F6"
+  | "F7"
+  | "F8"
+  | "F9"
+  | "F10"
+  | "F11"
+  | "F12";
+```
+
+Defined in: [hotkey.ts:74](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L74)
+
+Function keys F1-F12.
diff --git a/mintlify/hotkeys/reference/type-aliases/Hotkey.md b/mintlify/hotkeys/reference/type-aliases/Hotkey.md
new file mode 100644
index 000000000..6a8c5ad00
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/Hotkey.md
@@ -0,0 +1,69 @@
+---
+id: Hotkey
+title: Hotkey
+---
+
+# Type Alias: Hotkey
+
+```ts
+type Hotkey = 
+  | Key
+  | SingleModifierHotkey
+  | TwoModifierHotkey
+  | ThreeModifierHotkey
+  | FourModifierHotkey;
+```
+
+Defined in: [hotkey.ts:283](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L283)
+
+A type-safe hotkey string.
+
+Provides autocomplete for:
+- All single keys (letters, numbers, function keys, navigation, editing, punctuation)
+- Single modifier + common key (Control+S, Mod+A, Mod+/, etc.)
+- Two modifiers + common key (Mod+Shift+S, Control+Alt+A, etc.)
+- Three modifiers + common key (Control+Alt+Shift+A, Mod+Alt+Shift+S, etc.)
+- Four modifiers + common key (Control+Alt+Shift+Meta+A, etc.)
+
+## Modifier Names
+
+Use canonical modifier names:
+- `Control` (not Ctrl) - The Control key
+- `Alt` (not Option) - The Alt key (Option on macOS)
+- `Meta` (not Command/Cmd) - The Meta/Command key (macOS only)
+- `Shift` - The Shift key
+
+## Platform-Adaptive `Mod` Modifier
+
+The `Mod` modifier is a special platform-adaptive modifier that automatically resolves
+to the "primary modifier" on each platform:
+
+- **macOS**: `Mod` → `Meta` (Command key ⌘)
+- **Windows/Linux**: `Mod` → `Control` (Ctrl key)
+
+This enables cross-platform hotkey definitions that work correctly on all platforms
+without platform-specific code. The `Mod` modifier is resolved at runtime based on
+the detected platform.
+
+**When to use `Mod` vs platform-specific modifiers:**
+- Use `Mod` for cross-platform shortcuts (e.g., `Mod+S` for save)
+- Use `Meta` or `Control` when you need platform-specific behavior
+- Use `Mod` when you want your shortcuts to follow platform conventions automatically
+
+**Limitations:**
+- `Mod+Control` and `Mod+Meta` combinations are not allowed (they create duplicate
+  modifiers on one platform)
+- In four-modifier combinations, only canonical modifiers are allowed (no `Mod`)
+
+## Example
+
+```ts
+// Cross-platform shortcuts (recommended)
+const save: Hotkey = 'Mod+S'           // Command+S on Mac, Ctrl+S on Windows/Linux
+const saveAs: Hotkey = 'Mod+Shift+S'   // Command+Shift+S on Mac, Ctrl+Shift+S elsewhere
+const comment: Hotkey = 'Mod+/'       // Command+/ on Mac, Ctrl+/ elsewhere
+
+// Platform-specific shortcuts
+const macOnly: Hotkey = 'Meta+S'       // Command+S on Mac only
+const windowsOnly: Hotkey = 'Control+S' // Ctrl+S on Windows/Linux only
+```
diff --git a/mintlify/hotkeys/reference/type-aliases/HotkeyCallback.md b/mintlify/hotkeys/reference/type-aliases/HotkeyCallback.md
new file mode 100644
index 000000000..6f56382e9
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/HotkeyCallback.md
@@ -0,0 +1,41 @@
+---
+id: HotkeyCallback
+title: HotkeyCallback
+---
+
+# Type Alias: HotkeyCallback()
+
+```ts
+type HotkeyCallback = (event, context) => void;
+```
+
+Defined in: [hotkey.ts:412](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L412)
+
+Callback function type for hotkey handlers.
+
+## Parameters
+
+### event
+
+`KeyboardEvent`
+
+The keyboard event that triggered the hotkey
+
+### context
+
+[`HotkeyCallbackContext`](/hotkeys/reference/interfaces/HotkeyCallbackContext)
+
+Additional context including the hotkey and parsed hotkey
+
+## Returns
+
+`void`
+
+## Example
+
+```ts
+const handler: HotkeyCallback = (event, { hotkey, parsedHotkey }) => {
+  console.log(`Hotkey ${hotkey} was pressed`)
+  console.log(`Modifiers:`, parsedHotkey.modifiers)
+}
+```
diff --git a/mintlify/hotkeys/reference/type-aliases/HotkeySequence.md b/mintlify/hotkeys/reference/type-aliases/HotkeySequence.md
new file mode 100644
index 000000000..9fc956538
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/HotkeySequence.md
@@ -0,0 +1,28 @@
+---
+id: HotkeySequence
+title: HotkeySequence
+---
+
+# Type Alias: HotkeySequence
+
+```ts
+type HotkeySequence = Hotkey[];
+```
+
+Defined in: [sequence-manager.ts:48](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L48)
+
+A sequence of hotkeys for Vim-style shortcuts.
+
+Each element is one step (a `Hotkey` string). Steps may include modifiers;
+the same modifier can appear on consecutive steps (e.g. `Shift+R` then
+`Shift+T`). Modifier-only key events do not advance or reset matching—see
+`SequenceManager`.
+
+## Example
+
+```ts
+const gotoTop: HotkeySequence = ['G', 'G']  // gg
+const deleteLine: HotkeySequence = ['D', 'D']  // dd
+const deleteWord: HotkeySequence = ['D', 'I', 'W']  // diw
+const chainedShift: HotkeySequence = ['Shift+R', 'Shift+T']
+```
diff --git a/mintlify/hotkeys/reference/type-aliases/HotkeySequenceRecorderCommitKeys.md b/mintlify/hotkeys/reference/type-aliases/HotkeySequenceRecorderCommitKeys.md
new file mode 100644
index 000000000..f02e2ca55
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/HotkeySequenceRecorderCommitKeys.md
@@ -0,0 +1,16 @@
+---
+id: HotkeySequenceRecorderCommitKeys
+title: HotkeySequenceRecorderCommitKeys
+---
+
+# Type Alias: HotkeySequenceRecorderCommitKeys
+
+```ts
+type HotkeySequenceRecorderCommitKeys = "enter" | "none";
+```
+
+Defined in: [hotkey-sequence-recorder.ts:12](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey-sequence-recorder.ts#L12)
+
+How the user can commit a recorded sequence from the keyboard.
+- `'enter'`: plain Enter (no modifiers) commits when at least one step exists.
+- `'none'`: only [HotkeySequenceRecorder.commit](/hotkeys/reference/classes/HotkeySequenceRecorder#commit) finishes recording (or idle timeout if set).
diff --git a/mintlify/hotkeys/reference/type-aliases/IndividualKey.md b/mintlify/hotkeys/reference/type-aliases/IndividualKey.md
new file mode 100644
index 000000000..84f2e4cab
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/IndividualKey.md
@@ -0,0 +1,14 @@
+---
+id: IndividualKey
+title: IndividualKey
+---
+
+# Type Alias: IndividualKey
+
+```ts
+type IndividualKey = CanonicalModifier | Key;
+```
+
+Defined in: [hotkey.ts:154](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L154)
+
+Includes both modifier keys and regular keys.
diff --git a/mintlify/hotkeys/reference/type-aliases/Key.md b/mintlify/hotkeys/reference/type-aliases/Key.md
new file mode 100644
index 000000000..01baa032e
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/Key.md
@@ -0,0 +1,14 @@
+---
+id: Key
+title: Key
+---
+
+# Type Alias: Key
+
+```ts
+type Key = NonPunctuationKey | PunctuationKey;
+```
+
+Defined in: [hotkey.ts:149](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L149)
+
+All supported non-modifier keys.
diff --git a/mintlify/hotkeys/reference/type-aliases/LetterKey.md b/mintlify/hotkeys/reference/type-aliases/LetterKey.md
new file mode 100644
index 000000000..916c7fbcf
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/LetterKey.md
@@ -0,0 +1,40 @@
+---
+id: LetterKey
+title: LetterKey
+---
+
+# Type Alias: LetterKey
+
+```ts
+type LetterKey = 
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "G"
+  | "H"
+  | "I"
+  | "J"
+  | "K"
+  | "L"
+  | "M"
+  | "N"
+  | "O"
+  | "P"
+  | "Q"
+  | "R"
+  | "S"
+  | "T"
+  | "U"
+  | "V"
+  | "W"
+  | "X"
+  | "Y"
+  | "Z";
+```
+
+Defined in: [hotkey.ts:28](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L28)
+
+Letter keys A-Z (case-insensitive in matching).
diff --git a/mintlify/hotkeys/reference/type-aliases/Modifier.md b/mintlify/hotkeys/reference/type-aliases/Modifier.md
new file mode 100644
index 000000000..854d8b145
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/Modifier.md
@@ -0,0 +1,28 @@
+---
+id: Modifier
+title: Modifier
+---
+
+# Type Alias: Modifier
+
+```ts
+type Modifier = 
+  | "Control"
+  | "Ctrl"
+  | "Shift"
+  | "Alt"
+  | "Option"
+  | "Command"
+  | "Cmd"
+  | "CommandOrControl"
+  | "Mod";
+```
+
+Defined in: [hotkey.ts:9](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L9)
+
+All supported modifier key names, including aliases.
+- Control/Ctrl: The Control key
+- Shift: The Shift key
+- Alt/Option: The Alt key (Option on macOS)
+- Command/Cmd: The Command key (macOS only)
+- CommandOrControl/Mod: Command on macOS, Control on other platforms
diff --git a/mintlify/hotkeys/reference/type-aliases/NavigationKey.md b/mintlify/hotkeys/reference/type-aliases/NavigationKey.md
new file mode 100644
index 000000000..a1f940b2d
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/NavigationKey.md
@@ -0,0 +1,22 @@
+---
+id: NavigationKey
+title: NavigationKey
+---
+
+# Type Alias: NavigationKey
+
+```ts
+type NavigationKey = 
+  | "ArrowUp"
+  | "ArrowDown"
+  | "ArrowLeft"
+  | "ArrowRight"
+  | "Home"
+  | "End"
+  | "PageUp"
+  | "PageDown";
+```
+
+Defined in: [hotkey.ts:91](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L91)
+
+Navigation keys for cursor movement.
diff --git a/mintlify/hotkeys/reference/type-aliases/NumberKey.md b/mintlify/hotkeys/reference/type-aliases/NumberKey.md
new file mode 100644
index 000000000..639b36649
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/NumberKey.md
@@ -0,0 +1,14 @@
+---
+id: NumberKey
+title: NumberKey
+---
+
+# Type Alias: NumberKey
+
+```ts
+type NumberKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+```
+
+Defined in: [hotkey.ts:59](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L59)
+
+Number keys 0-9.
diff --git a/mintlify/hotkeys/reference/type-aliases/PunctuationKey.md b/mintlify/hotkeys/reference/type-aliases/PunctuationKey.md
new file mode 100644
index 000000000..9dda1dbe9
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/PunctuationKey.md
@@ -0,0 +1,16 @@
+---
+id: PunctuationKey
+title: PunctuationKey
+---
+
+# Type Alias: PunctuationKey
+
+```ts
+type PunctuationKey = "/" | "[" | "]" | "\" | "=" | "-" | "," | "." | ";" | "`";
+```
+
+Defined in: [hotkey.ts:117](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L117)
+
+Punctuation keys commonly used in keyboard shortcuts.
+These are the literal characters as they appear in KeyboardEvent.key
+(layout-dependent, typically US keyboard layout).
diff --git a/mintlify/hotkeys/reference/type-aliases/RegisterableHotkey.md b/mintlify/hotkeys/reference/type-aliases/RegisterableHotkey.md
new file mode 100644
index 000000000..ca996bbf8
--- /dev/null
+++ b/mintlify/hotkeys/reference/type-aliases/RegisterableHotkey.md
@@ -0,0 +1,15 @@
+---
+id: RegisterableHotkey
+title: RegisterableHotkey
+---
+
+# Type Alias: RegisterableHotkey
+
+```ts
+type RegisterableHotkey = Hotkey | RawHotkey;
+```
+
+Defined in: [hotkey.ts:362](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/hotkey.ts#L362)
+
+A hotkey that can be passed to `HotkeyManager.register()` and `useHotkey()`.
+Either a type-safe string (`Hotkey`) or a raw object (`RawHotkey`).
diff --git a/mintlify/hotkeys/reference/variables/ALL_KEYS.md b/mintlify/hotkeys/reference/variables/ALL_KEYS.md
new file mode 100644
index 000000000..87189b23c
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/ALL_KEYS.md
@@ -0,0 +1,33 @@
+---
+id: ALL_KEYS
+title: ALL_KEYS
+---
+
+# Variable: ALL\_KEYS
+
+```ts
+const ALL_KEYS: Set<
+  | LetterKey
+  | NumberKey
+  | FunctionKey
+  | NavigationKey
+  | EditingKey
+| PunctuationKey>;
+```
+
+Defined in: [constants.ts:334](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L334)
+
+Set of all valid non-modifier keys.
+
+This is the union of all key type sets (letters, numbers, function keys, navigation,
+editing, and punctuation). Used primarily for validation to check if a key string
+is recognized and will have type-safe autocomplete support.
+
+## See
+
+ - [LETTER\_KEYS](/hotkeys/reference/variables/LETTER_KEYS)
+ - [NUMBER\_KEYS](/hotkeys/reference/variables/NUMBER_KEYS)
+ - [FUNCTION\_KEYS](/hotkeys/reference/variables/FUNCTION_KEYS)
+ - [NAVIGATION\_KEYS](/hotkeys/reference/variables/NAVIGATION_KEYS)
+ - [EDITING\_KEYS](/hotkeys/reference/variables/EDITING_KEYS)
+ - [PUNCTUATION\_KEYS](/hotkeys/reference/variables/PUNCTUATION_KEYS)
diff --git a/mintlify/hotkeys/reference/variables/DEFAULT_SEQUENCE_TIMEOUT.md b/mintlify/hotkeys/reference/variables/DEFAULT_SEQUENCE_TIMEOUT.md
new file mode 100644
index 000000000..440988587
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/DEFAULT_SEQUENCE_TIMEOUT.md
@@ -0,0 +1,15 @@
+---
+id: DEFAULT_SEQUENCE_TIMEOUT
+title: DEFAULT_SEQUENCE_TIMEOUT
+---
+
+# Variable: DEFAULT\_SEQUENCE\_TIMEOUT
+
+```ts
+const DEFAULT_SEQUENCE_TIMEOUT: 1000 = 1000;
+```
+
+Defined in: [sequence-manager.ts:54](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/sequence-manager.ts#L54)
+
+Default timeout between keys in a sequence (in milliseconds).
+Exported for consumers that display sequence state (e.g. devtools).
diff --git a/mintlify/hotkeys/reference/variables/EDITING_KEYS.md b/mintlify/hotkeys/reference/variables/EDITING_KEYS.md
new file mode 100644
index 000000000..9d7d717b2
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/EDITING_KEYS.md
@@ -0,0 +1,18 @@
+---
+id: EDITING_KEYS
+title: EDITING_KEYS
+---
+
+# Variable: EDITING\_KEYS
+
+```ts
+const EDITING_KEYS: Set<EditingKey>;
+```
+
+Defined in: [constants.ts:264](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L264)
+
+Set of all valid editing and special keys.
+
+Includes keys commonly used for text editing (Enter, Backspace, Delete, Tab) and
+special actions (Escape, Space). These keys are frequently combined with modifiers
+for editor shortcuts (Mod+Enter to submit, Shift+Tab to go back).
diff --git a/mintlify/hotkeys/reference/variables/FUNCTION_KEYS.md b/mintlify/hotkeys/reference/variables/FUNCTION_KEYS.md
new file mode 100644
index 000000000..7dc7311c7
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/FUNCTION_KEYS.md
@@ -0,0 +1,17 @@
+---
+id: FUNCTION_KEYS
+title: FUNCTION_KEYS
+---
+
+# Variable: FUNCTION\_KEYS
+
+```ts
+const FUNCTION_KEYS: Set<FunctionKey>;
+```
+
+Defined in: [constants.ts:224](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L224)
+
+Set of all valid function keys (F1-F12).
+
+Function keys are commonly used for system shortcuts (e.g., F12 for DevTools,
+Alt+F4 to close windows) and application-specific commands.
diff --git a/mintlify/hotkeys/reference/variables/KEY_DISPLAY_SYMBOLS.md b/mintlify/hotkeys/reference/variables/KEY_DISPLAY_SYMBOLS.md
new file mode 100644
index 000000000..3e7a1715e
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/KEY_DISPLAY_SYMBOLS.md
@@ -0,0 +1,89 @@
+---
+id: KEY_DISPLAY_SYMBOLS
+title: KEY_DISPLAY_SYMBOLS
+---
+
+# Variable: KEY\_DISPLAY\_SYMBOLS
+
+```ts
+const KEY_DISPLAY_SYMBOLS: object;
+```
+
+Defined in: [constants.ts:592](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L592)
+
+Special key symbols for display formatting.
+
+Maps certain keys to their visual symbols for better readability in hotkey displays.
+Used by formatting functions to show symbols like ↑ for ArrowUp or ↵ for Enter
+instead of text labels.
+
+## Type Declaration
+
+### ArrowDown
+
+```ts
+readonly ArrowDown: "↓" = '↓';
+```
+
+### ArrowLeft
+
+```ts
+readonly ArrowLeft: "←" = '←';
+```
+
+### ArrowRight
+
+```ts
+readonly ArrowRight: "→" = '→';
+```
+
+### ArrowUp
+
+```ts
+readonly ArrowUp: "↑" = '↑';
+```
+
+### Backspace
+
+```ts
+readonly Backspace: "⌫" = '⌫';
+```
+
+### Delete
+
+```ts
+readonly Delete: "⌦" = '⌦';
+```
+
+### Enter
+
+```ts
+readonly Enter: "↵" = '↵';
+```
+
+### Escape
+
+```ts
+readonly Escape: "Esc" = 'Esc';
+```
+
+### Space
+
+```ts
+readonly Space: "␣" = '␣';
+```
+
+### Tab
+
+```ts
+readonly Tab: "⇥" = '⇥';
+```
+
+## Example
+
+```ts
+KEY_DISPLAY_SYMBOLS['ArrowUp'] // '↑'
+KEY_DISPLAY_SYMBOLS['Enter'] // '↵'
+KEY_DISPLAY_SYMBOLS['Escape'] // 'Esc'
+KEY_DISPLAY_SYMBOLS['Space'] // '␣'
+```
diff --git a/mintlify/hotkeys/reference/variables/LETTER_KEYS.md b/mintlify/hotkeys/reference/variables/LETTER_KEYS.md
new file mode 100644
index 000000000..029e29983
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/LETTER_KEYS.md
@@ -0,0 +1,17 @@
+---
+id: LETTER_KEYS
+title: LETTER_KEYS
+---
+
+# Variable: LETTER\_KEYS
+
+```ts
+const LETTER_KEYS: Set<LetterKey>;
+```
+
+Defined in: [constants.ts:169](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L169)
+
+Set of all valid letter keys (A-Z).
+
+Used for validation and type checking. Letter keys are matched case-insensitively
+in hotkey matching, but normalized to uppercase in canonical form.
diff --git a/mintlify/hotkeys/reference/variables/LINUX_MODIFIER_LABELS.md b/mintlify/hotkeys/reference/variables/LINUX_MODIFIER_LABELS.md
new file mode 100644
index 000000000..ccd7bb397
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/LINUX_MODIFIER_LABELS.md
@@ -0,0 +1,12 @@
+---
+id: LINUX_MODIFIER_LABELS
+title: LINUX_MODIFIER_LABELS
+---
+
+# Variable: LINUX\_MODIFIER\_LABELS
+
+```ts
+const LINUX_MODIFIER_LABELS: Record<CanonicalModifier | "Mod", string>;
+```
+
+Defined in: [constants.ts:559](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L559)
diff --git a/mintlify/hotkeys/reference/variables/MAC_MODIFIER_LABELS.md b/mintlify/hotkeys/reference/variables/MAC_MODIFIER_LABELS.md
new file mode 100644
index 000000000..4d2dd13ba
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/MAC_MODIFIER_LABELS.md
@@ -0,0 +1,27 @@
+---
+id: MAC_MODIFIER_LABELS
+title: MAC_MODIFIER_LABELS
+---
+
+# Variable: MAC\_MODIFIER\_LABELS
+
+```ts
+const MAC_MODIFIER_LABELS: Record<CanonicalModifier | "Mod", string>;
+```
+
+Defined in: [constants.ts:525](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L525)
+
+Modifier key labels for macOS display.
+
+Used by formatting functions to display hotkeys with macOS-style text labels
+(e.g., 'Control' for Control, 'Option' for Alt, 'Cmd' for Meta) instead of symbols.
+This provides a familiar macOS look and feel in hotkey displays.
+
+## Example
+
+```ts
+MAC_MODIFIER_LABELS['Control'] // 'control'
+MAC_MODIFIER_LABELS['Alt'] // 'option'
+MAC_MODIFIER_LABELS['Shift'] // 'shift'
+MAC_MODIFIER_LABELS['Meta'] // 'cmd'
+```
diff --git a/mintlify/hotkeys/reference/variables/MAC_MODIFIER_SYMBOLS.md b/mintlify/hotkeys/reference/variables/MAC_MODIFIER_SYMBOLS.md
new file mode 100644
index 000000000..66f0949f2
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/MAC_MODIFIER_SYMBOLS.md
@@ -0,0 +1,27 @@
+---
+id: MAC_MODIFIER_SYMBOLS
+title: MAC_MODIFIER_SYMBOLS
+---
+
+# Variable: MAC\_MODIFIER\_SYMBOLS
+
+```ts
+const MAC_MODIFIER_SYMBOLS: Record<CanonicalModifier | "Mod", string>;
+```
+
+Defined in: [constants.ts:502](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L502)
+
+Modifier key symbols for macOS display.
+
+Used by formatting functions to display hotkeys with macOS-style symbols
+(e.g., ⌘ for Command, ⌃ for Control) instead of text labels. This provides
+a native macOS look and feel in hotkey displays.
+
+## Example
+
+```ts
+MAC_MODIFIER_SYMBOLS['Meta'] // '⌘'
+MAC_MODIFIER_SYMBOLS['Control'] // '⌃'
+MAC_MODIFIER_SYMBOLS['Alt'] // '⌥'
+MAC_MODIFIER_SYMBOLS['Shift'] // '⇧'
+```
diff --git a/mintlify/hotkeys/reference/variables/MODIFIER_ALIASES.md b/mintlify/hotkeys/reference/variables/MODIFIER_ALIASES.md
new file mode 100644
index 000000000..d9f2e146b
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/MODIFIER_ALIASES.md
@@ -0,0 +1,33 @@
+---
+id: MODIFIER_ALIASES
+title: MODIFIER_ALIASES
+---
+
+# Variable: MODIFIER\_ALIASES
+
+```ts
+const MODIFIER_ALIASES: Record<string, CanonicalModifier | "Mod">;
+```
+
+Defined in: [constants.ts:94](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L94)
+
+Maps modifier key aliases to their canonical form or platform-adaptive 'Mod'.
+
+This map allows users to write hotkeys using various aliases (e.g., 'Ctrl', 'Cmd', 'Option')
+which are then normalized to canonical names ('Control', 'Meta', 'Alt') or the
+platform-adaptive 'Mod' token.
+
+The 'Mod' and 'CommandOrControl' aliases are resolved at runtime via `resolveModifier()`
+based on the detected platform (Command on Mac, Control elsewhere).
+
+## Remarks
+
+Case-insensitive lookups are supported via lowercase variants
+
+## Example
+
+```ts
+MODIFIER_ALIASES['Ctrl'] // 'Control'
+MODIFIER_ALIASES['Cmd'] // 'Meta'
+MODIFIER_ALIASES['Mod'] // 'Mod' (resolved at runtime)
+```
diff --git a/mintlify/hotkeys/reference/variables/MODIFIER_KEYS.md b/mintlify/hotkeys/reference/variables/MODIFIER_KEYS.md
new file mode 100644
index 000000000..b289d5ae3
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/MODIFIER_KEYS.md
@@ -0,0 +1,18 @@
+---
+id: MODIFIER_KEYS
+title: MODIFIER_KEYS
+---
+
+# Variable: MODIFIER\_KEYS
+
+```ts
+const MODIFIER_KEYS: Set<string>;
+```
+
+Defined in: [constants.ts:73](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L73)
+
+Set of canonical modifier key names for fast lookup.
+
+Derived from `MODIFIER_ORDER` to ensure consistency. Used to detect when
+a modifier is released so we can clear non-modifier keys whose keyup events
+may have been swallowed by the OS (e.g. macOS Cmd+key combos).
diff --git a/mintlify/hotkeys/reference/variables/MODIFIER_ORDER.md b/mintlify/hotkeys/reference/variables/MODIFIER_ORDER.md
new file mode 100644
index 000000000..df05181ba
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/MODIFIER_ORDER.md
@@ -0,0 +1,26 @@
+---
+id: MODIFIER_ORDER
+title: MODIFIER_ORDER
+---
+
+# Variable: MODIFIER\_ORDER
+
+```ts
+const MODIFIER_ORDER: CanonicalModifier[];
+```
+
+Defined in: [constants.ts:59](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L59)
+
+Canonical order for modifiers in normalized hotkey strings.
+
+Defines the standard order in which modifiers should appear when formatting
+hotkeys. This ensures consistent, predictable output across the library.
+
+Order: Control → Alt → Shift → Meta
+
+## Example
+
+```ts
+// Input: 'Shift+Control+Meta+S'
+// Normalized: 'Control+Alt+Shift+Meta+S' (following MODIFIER_ORDER)
+```
diff --git a/mintlify/hotkeys/reference/variables/NAVIGATION_KEYS.md b/mintlify/hotkeys/reference/variables/NAVIGATION_KEYS.md
new file mode 100644
index 000000000..176feb076
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/NAVIGATION_KEYS.md
@@ -0,0 +1,18 @@
+---
+id: NAVIGATION_KEYS
+title: NAVIGATION_KEYS
+---
+
+# Variable: NAVIGATION\_KEYS
+
+```ts
+const NAVIGATION_KEYS: Set<NavigationKey>;
+```
+
+Defined in: [constants.ts:246](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L246)
+
+Set of all valid navigation keys for cursor movement and document navigation.
+
+Includes arrow keys, Home/End (line navigation), and PageUp/PageDown (page navigation).
+These keys are commonly combined with modifiers for selection (Shift+ArrowUp) or
+navigation shortcuts (Alt+ArrowLeft for back).
diff --git a/mintlify/hotkeys/reference/variables/NUMBER_KEYS.md b/mintlify/hotkeys/reference/variables/NUMBER_KEYS.md
new file mode 100644
index 000000000..d1258c242
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/NUMBER_KEYS.md
@@ -0,0 +1,18 @@
+---
+id: NUMBER_KEYS
+title: NUMBER_KEYS
+---
+
+# Variable: NUMBER\_KEYS
+
+```ts
+const NUMBER_KEYS: Set<NumberKey>;
+```
+
+Defined in: [constants.ts:205](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L205)
+
+Set of all valid number keys (0-9).
+
+Note: Number keys are affected by Shift (Shift+1 → '!' on US layout),
+so they're excluded from Shift-based hotkey combinations to avoid
+layout-dependent behavior.
diff --git a/mintlify/hotkeys/reference/variables/PUNCTUATION_CODE_MAP.md b/mintlify/hotkeys/reference/variables/PUNCTUATION_CODE_MAP.md
new file mode 100644
index 000000000..69f58b48b
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/PUNCTUATION_CODE_MAP.md
@@ -0,0 +1,20 @@
+---
+id: PUNCTUATION_CODE_MAP
+title: PUNCTUATION_CODE_MAP
+---
+
+# Variable: PUNCTUATION\_CODE\_MAP
+
+```ts
+const PUNCTUATION_CODE_MAP: Record<string, string>;
+```
+
+Defined in: [constants.ts:307](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L307)
+
+Maps `KeyboardEvent.code` values for punctuation keys to their canonical characters.
+
+On macOS, holding the Option (Alt) key transforms punctuation keys into special characters
+(e.g., Option+Minus → en-dash '–'), causing `event.key` to differ from the expected character.
+However, `event.code` still reports the physical key (e.g., 'Minus'). This map enables
+falling back to `event.code` for punctuation keys, similar to the existing `Key*`/`Digit*`
+fallbacks for letters and digits.
diff --git a/mintlify/hotkeys/reference/variables/PUNCTUATION_KEYS.md b/mintlify/hotkeys/reference/variables/PUNCTUATION_KEYS.md
new file mode 100644
index 000000000..f89a43d8a
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/PUNCTUATION_KEYS.md
@@ -0,0 +1,23 @@
+---
+id: PUNCTUATION_KEYS
+title: PUNCTUATION_KEYS
+---
+
+# Variable: PUNCTUATION\_KEYS
+
+```ts
+const PUNCTUATION_KEYS: Set<PunctuationKey>;
+```
+
+Defined in: [constants.ts:285](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L285)
+
+Set of all valid punctuation keys commonly used in keyboard shortcuts.
+
+These are the literal characters as they appear in `KeyboardEvent.key` (layout-dependent,
+typically US keyboard layout). Common shortcuts include:
+- `Mod+/` - Toggle comment
+- `Mod+[` / `Mod+]` - Indent/outdent
+- `Mod+=` / `Mod+-` - Zoom in/out
+
+Note: Punctuation keys are affected by Shift (Shift+',' → '&lt;' on US layout),
+so they're excluded from Shift-based hotkey combinations to avoid layout-dependent behavior.
diff --git a/mintlify/hotkeys/reference/variables/PUNCTUATION_KEY_DISPLAY_LABELS.md b/mintlify/hotkeys/reference/variables/PUNCTUATION_KEY_DISPLAY_LABELS.md
new file mode 100644
index 000000000..5891854c4
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/PUNCTUATION_KEY_DISPLAY_LABELS.md
@@ -0,0 +1,68 @@
+---
+id: PUNCTUATION_KEY_DISPLAY_LABELS
+title: PUNCTUATION_KEY_DISPLAY_LABELS
+---
+
+# Variable: PUNCTUATION\_KEY\_DISPLAY\_LABELS
+
+```ts
+const PUNCTUATION_KEY_DISPLAY_LABELS: object;
+```
+
+Defined in: [constants.ts:565](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L565)
+
+## Type Declaration
+
+### -
+
+```ts
+readonly -: "Minus" = 'Minus';
+```
+
+### ,
+
+```ts
+readonly ,: "Comma" = 'Comma';
+```
+
+### ;
+
+```ts
+readonly ;: "Semicolon" = 'Semicolon';
+```
+
+#### .
+
+```ts
+readonly .: "Period" = 'Period';
+```
+
+### \[
+
+```ts
+readonly [: "Left Bracket" = 'Left Bracket';
+```
+
+### \]
+
+```ts
+readonly ]: "Right Bracket" = 'Right Bracket';
+```
+
+### \
+
+```ts
+readonly \: "Backslash" = 'Backslash';
+```
+
+### \`
+
+```ts
+readonly `: "Backquote" = 'Backquote';
+```
+
+### =
+
+```ts
+readonly =: "Equal" = 'Equal';
+```
diff --git a/mintlify/hotkeys/reference/variables/WINDOWS_MODIFIER_LABELS.md b/mintlify/hotkeys/reference/variables/WINDOWS_MODIFIER_LABELS.md
new file mode 100644
index 000000000..fb85e6c15
--- /dev/null
+++ b/mintlify/hotkeys/reference/variables/WINDOWS_MODIFIER_LABELS.md
@@ -0,0 +1,27 @@
+---
+id: WINDOWS_MODIFIER_LABELS
+title: WINDOWS_MODIFIER_LABELS
+---
+
+# Variable: WINDOWS\_MODIFIER\_LABELS
+
+```ts
+const WINDOWS_MODIFIER_LABELS: Record<CanonicalModifier | "Mod", string>;
+```
+
+Defined in: [constants.ts:548](https://github.com/TanStack/hotkeys/blob/main/packages/hotkeys/src/constants.ts#L548)
+
+Modifier key labels for Windows/Linux display.
+
+Used by formatting functions to display hotkeys with standard text labels
+(e.g., 'Ctrl' for Control, 'Win' for Meta/Windows key) instead of symbols.
+This provides a familiar Windows/Linux look and feel in hotkey displays.
+
+## Example
+
+```ts
+STANDARD_MODIFIER_LABELS['Control'] // 'Ctrl'
+STANDARD_MODIFIER_LABELS['Meta'] // 'Win'
+STANDARD_MODIFIER_LABELS['Alt'] // 'Alt'
+STANDARD_MODIFIER_LABELS['Shift'] // 'Shift'
+```
diff --git a/mintlify/index.mdx b/mintlify/index.mdx
new file mode 100644
index 000000000..fd122a92f
--- /dev/null
+++ b/mintlify/index.mdx
@@ -0,0 +1,61 @@
+---
+title: "TanStack Documentation"
+description: "A community Mintlify port of the current TanStack documentation."
+---
+
+This is a community-maintained Mintlify port of the current documentation published at [tanstack.com](https://tanstack.com/). It is not an official TanStack deployment. Content is preserved from the upstream open-source repositories and linked back to its canonical source.
+
+<Warning>
+  For authoritative and most up-to-date information, use the official [TanStack documentation](https://tanstack.com/).
+</Warning>
+
+<CardGroup cols={2}>
+  <Card title="TanStack Start" href="/start" icon="book-open">
+    Full-stack framework powered by TanStack Router.
+  </Card>
+  <Card title="TanStack Router" href="/router" icon="book-open">
+    Type-safe routing for React and Solid applications.
+  </Card>
+  <Card title="TanStack Query" href="/query" icon="book-open">
+    Asynchronous state management and data fetching.
+  </Card>
+  <Card title="TanStack Table" href="/table" icon="book-open">
+    Headless UI for tables and data grids.
+  </Card>
+  <Card title="TanStack Form" href="/form" icon="book-open">
+    Type-safe form state management.
+  </Card>
+  <Card title="TanStack DB" href="/db" icon="book-open">
+    Reactive client store for sync-first applications.
+  </Card>
+  <Card title="TanStack AI" href="/ai" icon="book-open">
+    Type-safe, provider-agnostic AI SDK.
+  </Card>
+  <Card title="TanStack Intent" href="/intent" icon="book-open">
+    Agent skills and package intent.
+  </Card>
+  <Card title="TanStack Virtual" href="/virtual" icon="book-open">
+    Headless UI for virtualizing large element lists.
+  </Card>
+  <Card title="TanStack Pacer" href="/pacer" icon="book-open">
+    Debouncing, throttling, rate limiting, and queuing.
+  </Card>
+  <Card title="TanStack Hotkeys" href="/hotkeys" icon="book-open">
+    Type-safe keyboard shortcut management.
+  </Card>
+  <Card title="TanStack Store" href="/store" icon="book-open">
+    Framework-agnostic reactive data store.
+  </Card>
+  <Card title="TanStack Ranger" href="/ranger" icon="book-open">
+    Headless range and multi-range slider utilities.
+  </Card>
+  <Card title="TanStack Config" href="/config" icon="book-open">
+    Shared conventions and tooling for TypeScript packages.
+  </Card>
+  <Card title="TanStack Devtools" href="/devtools" icon="book-open">
+    Unified development tools for the TanStack ecosystem.
+  </Card>
+  <Card title="TanStack CLI" href="/cli" icon="book-open">
+    Project creation, add-ons, and ecosystem tooling.
+  </Card>
+</CardGroup>
diff --git a/mintlify/intent/cli/intent-exclude.md b/mintlify/intent/cli/intent-exclude.md
new file mode 100644
index 000000000..424772404
--- /dev/null
+++ b/mintlify/intent/cli/intent-exclude.md
@@ -0,0 +1,43 @@
+---
+title: intent exclude
+id: intent-exclude
+---
+
+`intent exclude` manages `package.json#intent.exclude` entries.
+
+```bash
+npx @tanstack/intent@latest exclude [list|add|remove] [pattern] [--json]
+```
+
+## Options
+
+- `--json`: print the configured exclude patterns as JSON
+
+## Actions
+
+1. `list` (default): print current excludes
+2. `add <pattern>`: append one exclude pattern
+3. `remove <pattern>`: remove one exclude pattern
+
+## Examples
+
+```bash
+npx @tanstack/intent@latest exclude
+npx @tanstack/intent@latest exclude list --json
+npx @tanstack/intent@latest exclude add @tanstack/router#experimental-*
+npx @tanstack/intent@latest exclude remove @tanstack/router#experimental-*
+```
+
+## Behavior
+
+- Reads and writes the current working directory `package.json`
+- Creates `intent.exclude` when missing
+- Keeps existing excludes and appends new patterns in order
+- Validates pattern syntax before writing
+- Refuses invalid `package.json` structures for `intent` and `intent.exclude`
+
+## Related
+
+- [Configuration](/intent/concepts/configuration)
+- [intent list](/intent/cli/intent-list)
+- [intent load](/intent/cli/intent-load)
diff --git a/mintlify/intent/cli/intent-hooks.md b/mintlify/intent/cli/intent-hooks.md
new file mode 100644
index 000000000..fb8edce37
--- /dev/null
+++ b/mintlify/intent/cli/intent-hooks.md
@@ -0,0 +1,51 @@
+---
+title: intent hooks
+id: intent-hooks
+---
+
+`intent hooks install` installs lifecycle hooks that surface available Intent skills and enforce loading matching guidance before edits in supported agents.
+
+```bash
+npx @tanstack/intent@latest hooks install [--scope project|user] [--agents copilot,claude,codex|all]
+```
+
+## Options
+
+- `--scope <scope>`: hook install scope, either `project` or `user`; defaults to `project`
+- `--agents <agents>`: comma-separated hook agents to configure (`copilot`, `claude`, `codex`) or `all`; defaults to `all`
+
+## Behavior
+
+- Installs hook behavior without writing an `intent-skills` guidance block.
+- Adds a session-start skill catalog for supported agents so the agent sees available `skill-id: description` entries before it starts work.
+- Keeps edit enforcement in place: supported edit tools are blocked until the agent runs `intent load <skill-id>` for matching guidance.
+- `--scope project` writes project-local hook config for agents that support it.
+- `--scope user` writes user-level agent config and stores runner scripts under `~/.tanstack/intent/hooks`.
+- `--agents all` is the default. In project scope, Copilot is skipped because the supported Copilot CLI hook location is user-scoped.
+- Run `intent install` separately when you also want to write project guidance.
+- Use `package.json#intent.skills` and `package.json#intent.exclude` to control which skills are surfaced in the session catalog.
+
+## Hook support
+
+| Agent | Project scope | User scope | Hooks installed |
+| --- | --- | --- | --- |
+| Claude Code | `.claude/settings.json` | `~/.claude/settings.json` | `SessionStart` skill catalog plus `PreToolUse` edit gate |
+| Codex | `.codex/hooks.json` | `~/.codex/hooks.json` | `SessionStart` skill catalog plus `PreToolUse` edit gate; Codex hook interception is not a complete security boundary |
+| GitHub Copilot CLI | Guidance via `.github/copilot-instructions.md`; blocking hooks are not project-scoped | `$COPILOT_HOME/hooks/hooks.json` or `~/.copilot/hooks/hooks.json` | `SessionStart` skill catalog plus `PreToolUse` edit gate in user scope |
+| Cursor | Guidance only | Guidance only | Use `AGENTS.md` or Cursor rules; no blocking hook is installed |
+| Generic `AGENTS.md` agents | Guidance only | Guidance only | Use the `intent-skills` guidance block; no blocking hook is installed |
+
+`.github/copilot-instructions.md` is a supported project guidance target for `intent install`. GitHub Copilot CLI hook enforcement uses the user-scoped Copilot hooks directory because that is the supported hook location.
+
+Codex requires users to review and trust non-managed hooks before they run. If Codex reports hooks awaiting review, open its hook browser and trust the generated Intent hook.
+
+## Status messages
+
+- Hook installed: `Installed Intent hooks for claude (project) in .claude/settings.json.`
+- Hook skipped: `Skipped Intent hooks for copilot: project scope is not supported; use --scope user`
+
+## Related
+
+- [intent install](/intent/cli/intent-install)
+- [intent list](/intent/cli/intent-list)
+- [intent load](/intent/cli/intent-load)
diff --git a/mintlify/intent/cli/intent-install.md b/mintlify/intent/cli/intent-install.md
new file mode 100644
index 000000000..84b78d52c
--- /dev/null
+++ b/mintlify/intent/cli/intent-install.md
@@ -0,0 +1,94 @@
+---
+title: intent install
+id: intent-install
+---
+
+`intent install` creates or updates an `intent-skills` guidance block in a project guidance file.
+
+```bash
+npx @tanstack/intent@latest install [--map] [--dry-run] [--print-prompt] [--global] [--global-only] [--no-notices]
+```
+
+## Options
+
+### Guidance output
+
+- `--map`: write explicit task-to-skill mappings instead of lightweight loading guidance
+- `--dry-run`: print the generated block without writing files
+- `--print-prompt`: print the agent setup prompt instead of writing files
+
+### Mapping scan scope
+
+- `--global`: include global packages after project packages when `--map` is passed
+- `--global-only`: install mappings from global packages only when `--map` is passed
+- `--no-notices`: suppress non-critical notices on stderr
+
+## Behavior
+
+- Writes lightweight skill loading guidance by default.
+- Creates `AGENTS.md` when no managed block exists.
+- Updates an existing managed block in a supported config file.
+- Preserves all content outside the managed block.
+- Scans packages and writes compact `id`, `run`, and `for` mappings only when `--map` is passed.
+- Surfaces packages permitted by `package.json#intent.skills` in `--map` mode. See [Configuration](/intent/concepts/configuration).
+- Skips reference, meta, maintainer, and maintainer-only skills in `--map` mode.
+- Writes compact skill identities and runnable guidance commands instead of local file paths in `--map` mode.
+- Verifies the managed block before reporting success.
+- Prints `No intent-enabled skills found.` and does not create a config file when `--map` finds no actionable skills.
+
+Supported config files: `AGENTS.md`, `CLAUDE.md`, `.cursorrules`, `.github/copilot-instructions.md`.
+
+## Default output
+
+The default block tells agents to discover skills and load matching guidance on demand:
+
+```markdown
+<!-- intent-skills:start -->
+## Skill Loading
+
+Before editing files for a substantial task:
+- Run `npx @tanstack/intent@latest list` from the workspace root to see available local skills.
+- If a listed skill matches the task, run `npx @tanstack/intent@latest load <package>#<skill>` before changing files.
+- Use the loaded `SKILL.md` guidance while making the change.
+- Monorepos: when working across packages, run the skill check from the workspace root and prefer the local skill for the package being changed.
+- Multiple matches: prefer the most specific local skill for the package or concern you are changing; load additional skills only when the task spans multiple packages or concerns.
+<!-- intent-skills:end -->
+```
+
+## Mapping output
+
+`--map` writes compact skill identities and commands:
+
+```yaml
+<!-- intent-skills:start -->
+# TanStack Intent - before editing files, run the matching guidance command.
+tanstackIntent:
+  - id: "@tanstack/query#fetching"
+    run: "npx @tanstack/intent@latest load @tanstack/query#fetching"
+    for: "Query data fetching patterns"
+<!-- intent-skills:end -->
+```
+
+- `id`: portable skill identity in `<package>#<skill>` format
+- `run`: package-manager-aware command agents should run before editing
+- `for`: task-routing phrase for agents
+- The block does not store `load` paths, absolute paths, or package-manager-internal paths
+
+## Status messages
+
+- Created: `Created AGENTS.md with 1 mapping.`
+- Updated: `Updated AGENTS.md with 2 mappings.`
+- Unchanged: `No changes to AGENTS.md; 2 mappings already current.`
+- Guidance created: `Created AGENTS.md with skill loading guidance.`
+- Guidance unchanged: `No changes to AGENTS.md; skill loading guidance already current.`
+- Placement tip: `Tip: Keep the intent-skills block near the top of AGENTS.md so agents read it before task-specific instructions.`
+- No actionable skills in `--map` mode: `No intent-enabled skills found.`
+
+To suppress trust and migration notices in automation, pass `--no-notices`.
+
+## Related
+
+- [intent list](/intent/cli/intent-list)
+- [intent load](/intent/cli/intent-load)
+- [intent hooks](/intent/cli/intent-hooks)
+- [Quick Start for Consumers](/intent/getting-started/quick-start-consumers)
diff --git a/mintlify/intent/cli/intent-list.md b/mintlify/intent/cli/intent-list.md
new file mode 100644
index 000000000..d21df690e
--- /dev/null
+++ b/mintlify/intent/cli/intent-list.md
@@ -0,0 +1,144 @@
+---
+title: intent list
+id: intent-list
+---
+
+`intent list` discovers skill-enabled packages and prints available skills.
+
+```bash
+npx @tanstack/intent@latest list [--json] [--debug] [--global] [--global-only] [--show-hidden] [--no-notices]
+```
+
+## Options
+
+- `--json`: print JSON instead of text output
+- `--debug`: print discovery debug details to stderr
+- `--global`: include global packages after project packages
+- `--global-only`: list global packages only
+- `--show-hidden`: show unlisted hidden skill sources when run outside an agent session
+- `--no-notices`: suppress non-critical notices on stderr
+
+## What you get
+
+- Scans project and workspace dependencies for intent-enabled packages and skills
+- Surfaces packages permitted by `package.json#intent.skills` (see [Allowlist](#allowlist))
+- Includes global packages only when `--global` or `--global-only` is passed
+- Includes warnings from discovery
+- Excludes packages and skills matched by package.json `intent.exclude`
+- Prints debug details to stderr when `--debug` is passed
+- If no packages are discovered, prints `No intent-enabled packages found.`
+- Summary line with package count and skill count
+- Package table columns: `PACKAGE`, `SOURCE`, `VERSION`, `SKILLS`
+- Skill tree grouped by package
+- Optional warnings section (`⚠ ...` per warning)
+- Optional notices section on stderr (`ℹ ...` per notice), suppressed by `--no-notices`
+
+`SOURCE` is a lightweight indicator showing whether the selected package came from local discovery or explicit global scanning.
+When both local and global packages are scanned, local packages take precedence.
+
+## JSON output
+
+`--json` prints an adapter-friendly skill list:
+
+```json
+{
+  "skills": [
+    {
+      "use": "@tanstack/query#fetching",
+      "packageName": "@tanstack/query",
+      "packageRoot": "/path/to/project/node_modules/@tanstack/query",
+      "packageVersion": "5.0.0",
+      "packageSource": "local",
+      "skillName": "fetching",
+      "description": "Query data fetching patterns",
+      "type": "skill (optional)",
+      "framework": "react (optional)"
+    }
+  ],
+  "packages": [
+    {
+      "name": "@tanstack/query",
+      "version": "5.0.0",
+      "source": "local",
+      "packageRoot": "/path/to/project/node_modules/@tanstack/query",
+      "skillCount": 1
+    }
+  ],
+  "hiddenSourceCount": 1,
+  "hiddenSources": [
+    {
+      "name": "hidden-package",
+      "skillCount": 1
+    }
+  ],
+  "warnings": ["string"],
+  "conflicts": [
+    {
+      "packageName": "string",
+      "chosen": {
+        "version": "string",
+        "packageRoot": "string"
+      },
+      "variants": [
+        {
+          "version": "string",
+          "packageRoot": "string"
+        }
+      ]
+    }
+  ]
+}
+```
+
+When the same package exists both locally and globally and global scanning is enabled, `intent list` prefers the local package.
+When project `node_modules` exists, `intent list` scans it. In Yarn PnP projects without usable `node_modules`, `intent list` uses Yarn's PnP API.
+
+## Allowlist
+
+`package.json#intent.skills` is the allowlist that decides which discovered packages are surfaced. Only listed packages contribute skills.
+
+```json
+{
+  "intent": {
+    "skills": ["@tanstack/query", "workspace:@scope/internal"]
+  }
+}
+```
+
+Each entry is one source:
+
+- `@scope/pkg` or `pkg`: an npm package reachable through the dependency tree.
+- `workspace:@scope/pkg`: a package in the current workspace.
+- `git:<host>/<repo>#<ref>`: reserved, and not yet supported.
+
+The list as a whole has three special forms:
+
+- **Absent** (no `intent.skills` key): every discovered package is surfaced, with a deprecation notice printed to stderr on each run until you set `intent.skills`. This is the upgrade path for existing projects. A future version will require an explicit allowlist.
+- **Empty** (`"skills": []`): no package is surfaced, with an info notice printed to stderr.
+- **Wildcard** (`"skills": ["*"]`): every discovered package is surfaced, with an acknowledged-risk notice printed to stderr.
+
+A package that ships skills but is not listed is dropped. When packages are dropped this way, Intent prints one summary line naming them so you can opt in. In agent sessions, hidden sources are reported by count only; run `intent list --show-hidden` outside the agent session to review candidates. A listed package that was not discovered is reported as well. Matching is currently by package name. See [Configuration](/intent/concepts/configuration) and [Trust model](/intent/concepts/trust-model).
+
+## Excludes
+
+Package excludes are hard filters for packages that should not be used in a repo, applied after the allowlist.
+Intent reads `intent.exclude` arrays from package.json files while walking from the workspace or project root to the current working directory.
+Manage persistent excludes with `intent exclude add|remove|list`.
+
+```json
+{
+  "intent": {
+    "exclude": ["@tanstack/*devtools*", "@tanstack/router#experimental-*"]
+  }
+}
+```
+
+A pattern without `#` excludes a whole package. A pattern with `#` excludes a single skill (`@scope/pkg#search-params`), and the skill segment may itself be a glob (`@scope/pkg#experimental-*`). A pattern may cross package boundaries at skill granularity (`*#experimental-*`). The `#*` shortcut (`@scope/pkg#*`) excludes the whole package. Only exact names and `*` wildcards are supported on each segment. Bare package-name patterns keep working unchanged.
+
+An excluded package never triggers the unlisted-source warning, because an exclude is an explicit decision rather than an oversight.
+
+## Common errors
+
+- Scanner failures are printed as errors
+- Unsupported environments:
+  - Deno projects without `node_modules`
diff --git a/mintlify/intent/cli/intent-load.md b/mintlify/intent/cli/intent-load.md
new file mode 100644
index 000000000..045bc9466
--- /dev/null
+++ b/mintlify/intent/cli/intent-load.md
@@ -0,0 +1,78 @@
+---
+title: intent load
+id: intent-load
+---
+
+`intent load` loads a compact skill identity from the current install and prints the matching `SKILL.md` content.
+
+```bash
+npx @tanstack/intent@latest load <package>#<skill> [--path] [--json] [--debug] [--global] [--global-only]
+```
+
+## Options
+
+- `--path`: print the resolved skill path instead of the file content
+- `--json`: print structured JSON with metadata and content
+- `--debug`: print resolution debug details to stderr
+- `--global`: load from project packages first, then global packages
+- `--global-only`: load from global packages only
+
+## What you get
+
+- Validates `<package>#<skill>` before scanning
+- Scans project-local packages by default
+- Includes global packages only when `--global` or `--global-only` is passed
+- Refuses before scanning when the target package is not permitted by `package.json#intent.skills`
+- Refuses before scanning when the target package or skill matches `intent.exclude`
+- Prefers local packages when `--global` is used and the same package exists locally and globally
+- Accepts an unambiguous short skill name when a package-prefixed skill exists
+- Prints raw `SKILL.md` content by default
+- Prints the scanner-reported path when `--path` is passed
+- Prints debug details to stderr when `--debug` is passed
+
+The package can be scoped or unscoped. The skill can include slash-separated sub-skill names.
+
+Examples:
+
+```bash
+npx @tanstack/intent@latest load @tanstack/query#fetching
+npx @tanstack/intent@latest load @tanstack/query#core/fetching
+npx @tanstack/intent@latest load @tanstack/router-core#auth-and-guards
+npx @tanstack/intent@latest load some-lib#core --path
+```
+
+## JSON output
+
+`--json` prints:
+
+```json
+{
+  "package": "@tanstack/query",
+  "skill": "fetching",
+  "path": "node_modules/@tanstack/query/skills/fetching/SKILL.md",
+  "packageRoot": "node_modules/@tanstack/query",
+  "source": "local",
+  "version": "5.0.0",
+  "content": "---\nname: fetching\n---\n\n...",
+  "warnings": []
+}
+```
+
+## Common errors
+
+- Missing separator: `Invalid skill use "@tanstack/query": expected <package>#<skill>.`
+- Empty package: `Invalid skill use "#core": package is required.`
+- Empty skill: `Invalid skill use "@tanstack/query#": skill is required.`
+- Missing package: `Cannot resolve skill use "...": package "..." was not found.`
+- Missing skill: `Cannot resolve skill use "...": skill "..." was not found in package "...".`
+- Skill suggestion: `Did you mean @tanstack/router-core#router-core/auth-and-guards?`
+- Unlisted package: `Cannot load skill use "...": package "..." is not listed in intent.skills.`
+- Excluded package: `Cannot load skill use "...": package "..." is excluded by Intent configuration.`
+- Excluded skill: `Cannot load skill use "...": skill "..." is excluded by Intent configuration.`
+
+## Related
+
+- [intent list](/intent/cli/intent-list)
+- [intent install](/intent/cli/intent-install)
+- [Trust model](/intent/concepts/trust-model)
+- [Configuration](/intent/concepts/configuration)
diff --git a/mintlify/intent/cli/intent-meta.md b/mintlify/intent/cli/intent-meta.md
new file mode 100644
index 000000000..e700f23f3
--- /dev/null
+++ b/mintlify/intent/cli/intent-meta.md
@@ -0,0 +1,32 @@
+---
+title: intent meta
+id: intent-meta
+---
+
+`intent meta` lists bundled meta-skills or prints one meta-skill file.
+
+```bash
+npx @tanstack/intent@latest meta
+npx @tanstack/intent@latest meta <name>
+```
+
+## Arguments
+
+- `<name>` is a meta-skill directory under `node_modules/@tanstack/intent/meta/`
+- Rejected values: any name containing `..`, `/`, or `\\`
+
+## Output
+
+- Without `<name>`:
+  - one line per meta-skill
+  - `name` + description from frontmatter
+  - description is normalized and truncated to 60 characters
+- With `<name>`:
+  - raw markdown from `meta/<name>/SKILL.md`
+
+## Common errors
+
+- Meta directory not found
+- Invalid `<name>` format
+- Unknown `<name>` (message suggests running `npx @tanstack/intent meta`)
+- Read failure for target `SKILL.md`
diff --git a/mintlify/intent/cli/intent-scaffold.md b/mintlify/intent/cli/intent-scaffold.md
new file mode 100644
index 000000000..aeec27991
--- /dev/null
+++ b/mintlify/intent/cli/intent-scaffold.md
@@ -0,0 +1,39 @@
+---
+title: intent scaffold
+id: intent-scaffold
+---
+
+`intent scaffold` prints a phased scaffold prompt for generating skills.
+
+```bash
+npx @tanstack/intent@latest scaffold
+```
+
+## Behavior
+
+- Prints prompt text to stdout
+- Does not create files
+
+## Output
+
+The printed prompt defines three ordered phases:
+
+1. `domain-discovery`
+2. `tree-generator`
+3. `generate-skill`
+
+Each phase includes a stop gate before continuing.
+
+The prompt also includes a post-generation checklist:
+
+- Run `npx @tanstack/intent@latest validate` and fix issues
+- Commit generated `skills/` and `skills/_artifacts/`
+- Ensure `@tanstack/intent` is in `devDependencies`
+- Run setup commands as needed:
+  - `npx @tanstack/intent@latest edit-package-json`
+  - `npx @tanstack/intent@latest setup`
+
+## Related
+
+- [intent validate](/intent/cli/intent-validate)
+- [setup commands](/intent/cli/intent-setup)
diff --git a/mintlify/intent/cli/intent-setup.md b/mintlify/intent/cli/intent-setup.md
new file mode 100644
index 000000000..a5ecdea6c
--- /dev/null
+++ b/mintlify/intent/cli/intent-setup.md
@@ -0,0 +1,55 @@
+---
+title: setup commands
+id: intent-setup
+---
+
+Intent exposes publishing setup as two commands.
+
+```bash
+npx @tanstack/intent@latest edit-package-json
+npx @tanstack/intent@latest setup
+```
+
+## Commands
+
+- `edit-package-json`: add or normalize `package.json` entries needed to publish skills
+- `setup`: copy workflow templates to `.github/workflows`
+- `setup-github-actions`: legacy alias for `setup`
+
+## What each command changes
+
+- `edit-package-json`
+  - Requires a valid `package.json` in current directory
+  - Ensures `keywords` includes `tanstack-intent`
+  - Ensures `files` includes required publish entries
+  - Preserves existing indentation
+- `setup`
+  - Copies the `check-skills.yml` workflow template from `@tanstack/intent/meta/templates/workflows` to `.github/workflows`
+  - Applies variable substitution (`PACKAGE_NAME`, `PACKAGE_LABEL`, `PAYLOAD_PACKAGE`, `REPO`, `DOCS_PATH`, `SRC_PATH`, `WATCH_PATHS`)
+  - Detects the workspace root in monorepos and writes repo-level workflows there
+  - Skips files that already exist at destination
+
+## Required `files` entries
+
+`edit-package-json` enforces different `files` sets based on package location:
+
+- Monorepo package: `skills`
+- Non-monorepo package: `skills`, `!skills/_artifacts`
+
+## Common errors
+
+- Missing or invalid `package.json` when running `edit-package-json`
+- Missing template source when running `setup`
+
+## Notes
+
+- `setup` skips existing files
+- `check-skills.yml` validates skills on PRs and opens review PRs from release/manual runs
+- To adopt updated workflow templates, delete or move the old generated workflow files first, then rerun `setup`
+- If your repo has an older generated `validate-skills.yml`, remove it after adopting the current `check-skills.yml`; PR validation now lives in `check-skills.yml`
+- In monorepos, run `setup` from either the repo root or a package directory; Intent writes workflows to the workspace root
+
+## Related
+
+- [intent validate](/intent/cli/intent-validate)
+- [intent scaffold](/intent/cli/intent-scaffold)
diff --git a/mintlify/intent/cli/intent-stale.md b/mintlify/intent/cli/intent-stale.md
new file mode 100644
index 000000000..248f674be
--- /dev/null
+++ b/mintlify/intent/cli/intent-stale.md
@@ -0,0 +1,113 @@
+---
+title: intent stale
+id: intent-stale
+---
+
+`intent stale` reports whether shipped skills may need review.
+
+```bash
+npx @tanstack/intent@latest stale [--json]
+```
+
+## Options
+
+- `--json`: print JSON array of staleness reports
+
+## Behavior
+
+- Checks the current package by default
+- From a monorepo root, checks workspace packages that ship skills and also reports public workspace packages with no skill or artifact coverage
+- Applies the `package.json#intent.skills` allowlist when falling back to installed dependencies; workspace packages are first-party and checked regardless. See [Configuration](/intent/concepts/configuration).
+- When `dir` is provided, scopes the check to the targeted package or skills directory
+- Computes one staleness report per package
+- Reads repo-root `_artifacts/*domain_map.yaml` and `_artifacts/*skill_tree.yaml` when present
+- Flags public workspace packages that are not represented by generated skills or artifact coverage
+- Skips workspace packages with `"private": true`
+- Prints text output by default or JSON with `--json`
+- Prints a non-failing workflow update reminder when `.github/workflows/check-skills.yml` is missing the current `intent-workflow-version` stamp
+- If no packages are found, prints `No intent-enabled packages found.`
+
+Artifact coverage ignores can be recorded in `_artifacts/*skill_tree.yaml` or `_artifacts/*domain_map.yaml`:
+
+```yaml
+coverage:
+  ignored_packages:
+    - '@tanstack/internal-tooling'
+    - name: packages/devtools-fixture
+      reason: test fixture only
+```
+
+Ignored packages are excluded from missing coverage signals. Private workspace packages are excluded automatically.
+
+## JSON report schema
+
+`--json` outputs an array of reports:
+
+```json
+[
+  {
+    "library": "string",
+    "currentVersion": "string | null",
+    "skillVersion": "string | null",
+    "versionDrift": "major | minor | patch | null",
+    "skills": [
+      {
+        "name": "string",
+        "reasons": ["string"],
+        "needsReview": true
+      }
+    ],
+    "signals": [
+      {
+        "type": "missing-package-coverage",
+        "library": "string",
+        "subject": "string",
+        "reasons": ["string"],
+        "needsReview": true,
+        "packageName": "string",
+        "packageRoot": "string"
+      }
+    ]
+  }
+]
+```
+
+Report fields:
+
+- `library`: package name
+- `currentVersion`: latest version from npm registry (or `null` if unavailable)
+- `skillVersion`: `library_version` from skills (or `null`)
+- `versionDrift`: `major | minor | patch | null`
+- `skills`: array of per-skill checks
+- `signals`: array of artifact and workspace coverage checks
+
+Skill fields:
+
+- `name`
+- `reasons`: one or more staleness reasons
+- `needsReview`: boolean (`true` when reasons exist)
+
+Reason generation:
+
+- `version drift (<skillVersion> → <currentVersion>)`
+- `new source (<path>)` when a declared source has no stored sync SHA
+- artifact parse warnings, unresolved artifact skill paths, source drift, artifact library version drift, and missing workspace package coverage
+
+## Text output
+
+- Report header format: `<library> (<skillVersion> → <currentVersion>) [<versionDrift> drift]`
+- When no skill reasons exist: `All skills up-to-date`
+- Otherwise: one warning line per stale skill or review signal (`⚠ <name>: <reason1>, <reason2>, ...`)
+
+## Common errors
+
+- Package scan failure: prints a scanner error
+- Registry fetch failures do not crash command; `currentVersion` may be `null`
+
+## Notes
+
+- Source staleness checking is conservative: it flags missing source SHAs in sync-state, not remote content differences.
+
+## Related
+
+- [intent list](/intent/cli/intent-list)
diff --git a/mintlify/intent/cli/intent-validate.md b/mintlify/intent/cli/intent-validate.md
new file mode 100644
index 000000000..a254b93da
--- /dev/null
+++ b/mintlify/intent/cli/intent-validate.md
@@ -0,0 +1,93 @@
+---
+title: intent validate
+id: intent-validate
+---
+
+`intent validate` checks `SKILL.md` files and artifacts for structural problems.
+
+```bash
+npx @tanstack/intent@latest validate [<dir>] [--github-summary] [--fix] [--check]
+```
+
+## Arguments
+
+- `<dir>`: directory containing skills; default is `skills`
+- Relative paths are resolved from the current working directory
+
+## Options
+
+- `--github-summary`: write a GitHub Actions step summary when `GITHUB_STEP_SUMMARY` is set
+- `--check`: fail if any `SKILL.md` has fixable frontmatter migrations pending, without writing files
+- `--fix`: rewrite fixable `SKILL.md` frontmatter migrations, then validate the result
+
+## Frontmatter migration fixes
+
+Use `--check` in CI to detect mechanical frontmatter migrations that have not been applied:
+
+```bash
+npx @tanstack/intent@latest validate --check
+```
+
+Use `--fix` locally to apply the mechanical frontmatter migrations:
+
+```bash
+npx @tanstack/intent@latest validate --fix
+```
+
+`--fix` only rewrites unambiguous frontmatter migrations:
+
+- `name` values are rewritten to the parent directory leaf when the parent directory is already a legal skill name
+- Top-level string fields `type`, `library`, `library_version`, and `framework` are moved under `metadata`
+
+`--fix` does not rewrite authoring-judgment validation errors:
+
+- Missing or invalid `description`
+- Length-limit failures
+- Invalid `metadata` shape or non-string `metadata` values
+- Missing `requires` for framework skills
+- Artifact validation failures
+
+## Validation checks
+
+For each discovered `SKILL.md`:
+
+- Frontmatter delimiter and structure are valid
+- YAML frontmatter parses successfully
+- Required fields exist: `name`, `description`
+- `name` is a single leaf segment matching the skill's parent directory (no slashes); the namespace is carried by the directory path
+- `name` uses only lowercase letters, numbers, and hyphens
+- `name` is at most 64 characters
+- Only spec top-level keys are allowed (`name`, `description`, `license`, `compatibility`, `metadata`, `allowed-tools`); Intent-specific scalars (`type`, `library`, `library_version`, `framework`) must live under `metadata`
+- `metadata`, when present, is a mapping of string values
+- `description` length is at most 1024 characters
+- `type: framework` requires `requires` to be an array
+- Total file length is at most 500 lines
+
+If `<dir>/_artifacts` exists, it also validates artifacts:
+
+- Required files: `domain_map.yaml`, `skill_spec.md`, `skill_tree.yaml`
+- Required files must be non-empty
+- `.yaml` artifacts must parse successfully
+
+## Packaging warnings
+
+Packaging warnings are always computed from `package.json` in the current working directory:
+
+- `@tanstack/intent` missing from `devDependencies`
+- Missing `tanstack-intent` in keywords array
+- Missing `files` entries when `files` array exists:
+  - `skills`
+  - `!skills/_artifacts`
+
+Warnings are informational; they are printed on both pass and fail paths.
+
+## Common errors
+
+- Missing target directory: `Skills directory not found: <abs-path>`
+- No skill files discovered: `No SKILL.md files found`
+- Validation failures: aggregated file-specific errors and count
+
+## Related
+
+- [intent scaffold](/intent/cli/intent-scaffold)
+- [setup commands](/intent/cli/intent-setup)
diff --git a/mintlify/intent/concepts/configuration.md b/mintlify/intent/concepts/configuration.md
new file mode 100644
index 000000000..658d5392f
--- /dev/null
+++ b/mintlify/intent/concepts/configuration.md
@@ -0,0 +1,88 @@
+---
+title: Configuration
+id: configuration
+---
+
+Intent reads consumer configuration from the `intent` object in `package.json`. Two keys control which skills reach your agent: `skills` (the allowlist) and `exclude` (the blocklist).
+
+```json
+{
+  "intent": {
+    "skills": ["@tanstack/query", "workspace:@scope/internal"],
+    "exclude": ["@tanstack/router#experimental-*"]
+  }
+}
+```
+
+Intent merges these keys from every `package.json` between the current working directory and the workspace or project root. A monorepo package inherits the root configuration and adds its own.
+
+## `intent.skills`
+
+`intent.skills` is the allowlist. Only packages it permits contribute skills to `list`, `load`, `install`, and `stale`. See [Trust model](/intent/concepts/trust-model) for the reasoning.
+
+### Source entries
+
+Each array entry names one source:
+
+| Entry | Kind | Meaning |
+| ----- | ---- | ------- |
+| `@scope/pkg` or `pkg` | npm | A package reachable through the dependency tree, direct or transitive. |
+| `workspace:@scope/pkg` | workspace | A package in the current workspace. |
+| `git:<host>/<repo>#<ref>` | git | Reserved. Not yet supported, and rejected until a future version adds it. |
+
+A malformed entry fails the whole command, and every bad entry is reported at once. Intent currently matches an allowlist entry against a discovered package by name. This matching will tighten in a future version.
+
+### Special forms
+
+The list as a whole has three special forms:
+
+- **Absent.** No `intent.skills` key. Every discovered package is surfaced, and Intent prints a deprecation notice to stderr on each run until you set `intent.skills`. This is the upgrade path for existing projects. A future version will require an explicit allowlist.
+- **Empty.** `"skills": []`. No package is surfaced. Intent prints an info notice to stderr.
+- **Wildcard.** `"skills": ["*"]`. Every discovered package is surfaced. Intent prints an acknowledged-risk notice to stderr, since unvetted skills may reach your agent.
+
+A package that ships skills but is not listed is dropped. When packages are dropped this way, Intent prints one summary line naming them so you can opt in. A listed package that was not discovered is reported as well.
+
+### Existing projects
+
+A project that has not set `intent.skills` keeps working. Intent surfaces every discovered package and prints the deprecation notice described under the absent form. Nothing breaks. Add an allowlist when you are ready, before a future version requires one. Run `intent list` to confirm which packages are surfaced.
+
+### Suppressing notices temporarily
+
+Use `--no-notices` to suppress non-critical notices on stderr for one run:
+
+```bash
+npx @tanstack/intent@latest list --no-notices
+npx @tanstack/intent@latest install --map --no-notices
+```
+
+For CI or wrapper scripts, set `INTENT_NO_NOTICES=1` to suppress notices without changing command arguments.
+
+## `intent.exclude`
+
+`intent.exclude` removes packages or individual skills after the allowlist resolves.
+
+Use `intent exclude` to manage this list from the CLI:
+
+```bash
+npx @tanstack/intent@latest exclude add @tanstack/router#experimental-*
+npx @tanstack/intent@latest exclude remove @tanstack/router#experimental-*
+npx @tanstack/intent@latest exclude list
+```
+
+```json
+{
+  "intent": {
+    "exclude": ["@tanstack/*devtools*", "@tanstack/router#experimental-*"]
+  }
+}
+```
+
+Pattern grammar:
+
+- A pattern without `#` excludes a whole package: `@scope/pkg`.
+- A pattern with `#` excludes a single skill: `@scope/pkg#search-params`.
+- The skill segment may be a glob: `@scope/pkg#experimental-*`.
+- A pattern may cross package boundaries at skill granularity: `*#experimental-*`.
+- The `#*` shortcut excludes the whole package: `@scope/pkg#*`.
+
+Only exact names and `*` wildcards are supported on each segment. Bare package-name patterns keep working unchanged. An excluded package does not trigger the unlisted-source warning, because an exclude is an explicit decision.
diff --git a/mintlify/intent/concepts/trust-model.md b/mintlify/intent/concepts/trust-model.md
new file mode 100644
index 000000000..7792157e6
--- /dev/null
+++ b/mintlify/intent/concepts/trust-model.md
@@ -0,0 +1,28 @@
+---
+title: Trust model
+id: trust-model
+---
+
+Intent surfaces skills from your dependencies into your coding agent's guidance. A skill is instructions an agent follows, so the set of packages allowed to contribute skills is a trust decision. Intent makes that decision explicit through the `intent.skills` allowlist.
+
+## Explicit sources
+
+A package ships skills in a `skills/` directory. Discovery finds every installed package that has one, including transitive dependencies. Discovery does not grant trust.
+
+`package.json#intent.skills` is the gate. A discovered package contributes skills only when it appears in the allowlist. An unlisted package is dropped, and Intent reports it so you can opt in or ignore it.
+
+The gate is opt-in today. A project with no `intent.skills` key still surfaces every discovered package, and Intent prints a deprecation notice to stderr on each run until you set `intent.skills`. A future version will require an explicit allowlist. See the [special forms](/intent/concepts/configuration#special-forms) in Configuration.
+
+Trust does not propagate. A listed package may depend on another package that ships skills, but that dependency stays unlisted until you add it to `intent.skills` yourself. You allow each source on its own.
+
+## Static discovery
+
+Intent reads package data as files. It never imports, requires, or executes the code of a discovered package to find or load a skill. Adding a package to your dependency tree cannot run that package's code through Intent.
+
+One exception is sanctioned: in Yarn Plug'n'Play projects, Intent loads Yarn's PnP runtime (`.pnp.cjs`) to map package identities to readable locations. It loads no package entry points, bins, lifecycle scripts, or other package-provided JavaScript. An ESLint rule enforces this invariant in the discovery code.
+
+## What the allowlist does not cover yet
+
+Matching is currently by package name. A `workspace:foo` entry and a bare `foo` entry both authorize a discovered package named `foo`, because the scanner does not yet distinguish a workspace member from a published package of the same name. This errs toward permitting a same-named package, never toward denying one you listed. A future version tightens matching once the scanner carries that signal.
+
+The `git:` source kind is reserved. Intent parses and validates the shape, then rejects it until a future version can pin the resolved ref and content hash. A git entry never loads silently.
diff --git a/mintlify/intent/getting-started/quick-start-consumers.md b/mintlify/intent/getting-started/quick-start-consumers.md
new file mode 100644
index 000000000..0146fa317
--- /dev/null
+++ b/mintlify/intent/getting-started/quick-start-consumers.md
@@ -0,0 +1,125 @@
+---
+title: Quick Start for Consumers
+id: quick-start-consumers
+---
+
+Get started using Intent to help your agent discover and load package skills.
+
+## 1. Run install
+
+The install command guides your agent through the setup process:
+
+```bash
+npx @tanstack/intent@latest install
+```
+
+Examples use `npx` for npm projects. In pnpm, Yarn, or Bun projects, use the matching runner: `pnpm dlx`, `yarn dlx`, or `bunx`.
+
+This creates or updates an `intent-skills` guidance block. It:
+
+1. Checks for existing `intent-skills` guidance in your config files (`AGENTS.md`, `CLAUDE.md`, `.cursorrules`, etc.)
+2. Writes lightweight instructions for skill discovery and loading
+3. Preserves content outside the managed block
+4. Verifies the managed block before reporting success
+
+If an `intent-skills` block already exists, Intent updates that file in place.
+If no block exists, `AGENTS.md` is the default target.
+
+Intent creates guidance like:
+
+```markdown
+<!-- intent-skills:start -->
+## Skill Loading
+
+Before editing files for a substantial task:
+- Run `pnpm dlx @tanstack/intent@latest list` from the workspace root to see available local skills.
+- If a listed skill matches the task, run `pnpm dlx @tanstack/intent@latest load <package>#<skill>` before changing files.
+- Use the loaded `SKILL.md` guidance while making the change.
+- Monorepos: when working across packages, run the skill check from the workspace root and prefer the local skill for the package being changed.
+- Multiple matches: prefer the most specific local skill for the package or concern you are changing; load additional skills only when the task spans multiple packages or concerns.
+<!-- intent-skills:end -->
+```
+
+Intent detects the package manager when generating this block, so the runner may be `npx`, `pnpm dlx`, `yarn dlx`, or `bunx`.
+
+To enforce loading guidance before edits in supported agents, opt in to hooks:
+
+```bash
+npx @tanstack/intent@latest hooks install
+```
+
+Project-scoped hooks are installed for Claude Code and Codex. `intent install` can write project guidance to `.github/copilot-instructions.md`, but GitHub Copilot CLI hook enforcement is user-scoped, so configure it explicitly:
+
+```bash
+npx @tanstack/intent@latest hooks install --scope user --agents copilot
+```
+
+Cursor and generic `AGENTS.md` agents use the guidance block only.
+
+Hooks add the available Intent skill catalog to supported agent sessions and keep the edit gate active until the agent loads matching full guidance. To tailor what appears in the session catalog, configure `intent.skills` and `intent.exclude` in `package.json`.
+
+## 2. Choose which packages' skills to use
+
+`package.json#intent.skills` is an allowlist of the packages whose skills you want surfaced.
+
+```json
+{
+  "intent": {
+    "skills": ["@tanstack/query", "@tanstack/router"]
+  }
+}
+```
+
+List the packages you trust. Intent then surfaces skills from those packages and leaves the rest out. See the [source entries](/intent/concepts/configuration#source-entries) in Configuration for the forms an entry can take, and [Trust model](/intent/concepts/trust-model) for why the allowlist exists.
+
+## 3. Use skills in your workflow
+
+When your agent works on a task that matches an available skill, it loads the matching `SKILL.md` into context.
+
+Load a skill manually:
+
+```bash
+npx @tanstack/intent@latest load @tanstack/react-query#core
+```
+
+This prints the skill content for the installed package version.
+
+If you want explicit task-to-skill mappings in your agent config, opt in:
+
+```bash
+npx @tanstack/intent@latest install --map
+```
+
+## 4. Keep skills up-to-date
+
+Skills version with library releases. When you update a library:
+
+```bash
+npm update @tanstack/react-query
+```
+
+The new version brings updated skills automatically. The skills are shipped with the library, so you get the version that matches your installed code. If a package is installed both locally and globally and global scanning is enabled, Intent prefers the local version.
+
+If you need to see what skills have changed, run:
+
+```bash
+npx @tanstack/intent@latest list
+```
+
+Use `--json` for machine-readable output:
+
+```bash
+npx @tanstack/intent@latest list --json
+```
+
+Global package scanning is opt-in:
+
+```bash
+npx @tanstack/intent@latest list --global
+```
+
+You can also check if any skills reference outdated source documentation:
+
+```bash
+npx @tanstack/intent@latest stale
+```
diff --git a/mintlify/intent/getting-started/quick-start-maintainers.md b/mintlify/intent/getting-started/quick-start-maintainers.md
new file mode 100644
index 000000000..f8523baa2
--- /dev/null
+++ b/mintlify/intent/getting-started/quick-start-maintainers.md
@@ -0,0 +1,206 @@
+---
+title: Quick Start for Maintainers
+id: quick-start-maintainers
+---
+
+Get started scaffolding, validating, and shipping skills for your library.
+
+## Install
+
+
+react: @tanstack/intent
+solid: @tanstack/intent
+vue: @tanstack/intent
+svelte: @tanstack/intent
+angular: @tanstack/intent
+lit: @tanstack/intent
+
+
+Or run commands without installing:
+
+```bash
+npx @tanstack/intent@latest scaffold
+```
+
+---
+
+## Initial Setup (With Agent)
+
+### 1. Scaffold skills
+
+Start the scaffolding process **with your AI agent**:
+
+```bash
+npx @tanstack/intent@latest scaffold
+```
+
+This prints a comprehensive prompt that walks you and your agent through three phases:
+
+**Phase 1: Domain Discovery**
+- Scans your documentation, source code, and GitHub issues
+- Conducts an interactive interview to surface implicit knowledge
+- Produces `domain_map.yaml` and `skill_spec.md` artifacts
+
+**Phase 2: Tree Generation**
+- Designs a skill taxonomy based on the domain map
+- Creates a hierarchical skill structure
+- Produces `skill_tree.yaml` artifact
+
+**Phase 3: Skill Generation**
+- Writes complete SKILL.md files for each skill
+- Includes patterns, failure modes, and API references
+- Validates against the Intent specification
+
+> [!NOTE]
+> This is a context-heavy process that involves domain discovery, GitHub issues analysis, and interactive maintainer interviews. The agent will scan your documentation, recent issues and discussions, and ask targeted questions to surface implicit knowledge and common failure modes. The more information you provide about your library's patterns, pitfalls, and real-world usage problems, the better the generated skills will be. Expect multiple rounds of refinement and regular context compaction before completion.
+
+### 2. Validate skills
+
+After scaffolding, validate that all SKILL.md files are well-formed:
+
+```bash
+npx @tanstack/intent@latest validate
+```
+
+This checks:
+- Valid YAML frontmatter in every SKILL.md
+- Required fields (`name`, `description`) are present
+- Skill `name` is a leaf segment matching its parent directory
+- Intent-specific scalars (`type`, `library`, `library_version`, `framework`) live under `metadata`, not at the top level
+- Description length &lt;= 1024 characters
+- Line count limits (500 lines max per skill)
+- Framework skills have a `requires` array
+- Artifact files exist and are non-empty
+
+If any artifacts are present (domain_map.yaml, skill_spec.md, skill_tree.yaml), they must parse as valid YAML.
+
+### 3. Commit skills and artifacts
+
+Commit both generated skills and the artifacts used to create them:
+
+```
+skills/
+  core/SKILL.md
+  react/SKILL.md
+  _artifacts/
+    domain_map.yaml
+    skill_spec.md
+    skill_tree.yaml
+```
+
+Artifacts enforce a consistent skill structure across versions, making it easier to audit, refresh, or extend the skill set without starting from scratch.
+
+---
+
+## Publish Configuration
+
+### 4. Configure your package for publishing
+
+Run these commands to prepare your package for skill publishing:
+
+```bash
+# Update package.json with required fields
+npx @tanstack/intent@latest edit-package-json
+
+# Copy the CI workflow template
+npx @tanstack/intent@latest setup
+```
+
+**What these do:**
+
+- `edit-package-json` adds:
+  - `tanstack-intent` keyword (used for package detection and registry discovery)
+  - `files` array entries for `skills/`
+  - For single packages: also adds `!skills/_artifacts` to exclude artifacts from npm
+  - For monorepos: skips the artifacts exclusion (artifacts live at repo root)
+- `setup` copies `check-skills.yml` to `.github/workflows/` for automated validation and staleness checking
+
+`setup` does not overwrite existing workflow files. To pick up newer generated workflows, delete or move the old generated files in `.github/workflows/`, then rerun `npx @tanstack/intent@latest setup`.
+
+If your repo already has an older generated `validate-skills.yml`, remove it after adopting the current `check-skills.yml`; PR validation now runs from `check-skills.yml`.
+
+### 5. Ship skills with your package
+
+Skills ship inside your npm package. When you publish:
+
+```bash
+npm publish
+```
+
+Consumers who install your library automatically get the skills. They discover local installed skills with `intent list`, add loading guidance with `intent install`, and load matching skills with `intent load`.
+
+**Version alignment:**
+- Skills version with your library releases
+- Agents always load the skill matching the installed library version
+- No drift between code and guidance
+
+---
+
+## Ongoing Maintenance (Manual or Agent-Assisted)
+
+### 6. Set up the CI workflow
+
+After running `setup`, you'll have `check-skills.yml` in `.github/workflows/`:
+
+**check-skills.yml** (runs on PRs touching skills/artifacts, release, or manual trigger)
+- Validates SKILL.md frontmatter and structure
+- Ensures files stay under 500 lines
+- Automatically detects stale skills and coverage gaps after you publish a new release
+- Opens one grouped review PR with an agent-friendly prompt
+- Includes the reason each skill or package was flagged
+- Requires you to copy the prompt into Claude Code, Cursor, or your agent to update skills
+
+### 7. Update stale skills
+
+When you publish a new release, `check-skills.yml` automatically opens a PR flagging skills that need review.
+
+Manually check which skills need updates with:
+
+```bash
+npx @tanstack/intent@latest stale
+```
+
+When run from a package, this checks that package's shipped skills. When run from a monorepo root, it checks workspace packages with skills and flags public workspace packages missing skill or `_artifacts` coverage.
+
+This detects:
+- **Version drift** — skill targets an older library version than currently installed
+- **New sources** — sources declared in frontmatter that weren't tracked before
+- **Artifact drift** — `_artifacts` entries that no longer match generated skills
+- **Missing package coverage** — public workspace packages not represented by generated skills or artifact coverage
+
+If a public workspace package is intentionally out of scope for skills, record that decision in repo-root `_artifacts`:
+
+```yaml
+coverage:
+  ignored_packages:
+    - '@tanstack/internal-tooling'
+    - name: packages/devtools-fixture
+      reason: test fixture only
+```
+
+Private workspace packages are skipped automatically.
+
+**To update stale skills:**
+1. Review the PR opened by `check-skills.yml`
+2. Copy the agent prompt from the PR description
+3. Paste it into Claude Code, Cursor, or your coding agent
+4. The agent reads the stale skills and updates them based on library changes
+5. Run `npx @tanstack/intent@latest validate` locally to verify
+6. Commit and merge the PR
+
+> [!NOTE]
+> Skills are updated through agent assistance, not full automation. The workflow detects what's stale and provides the prompt — your agent handles the actual updates.
+
+Use `--json` output for CI integration or scripting.
+
+### 8. Maintain and iterate
+
+As your library evolves:
+
+1. **When APIs change:** Update relevant SKILL.md files with new patterns
+2. **When docs change:** Run `intent stale` to identify affected skills
+3. **When issues are filed:** Check if the failure mode should be added to "Common Mistakes"
+4. **After major releases:** Consider re-running domain discovery to catch new patterns
+
+> [!TIP]
+> Create GitHub issue labels matching your skill names (`skill:core`, `skill:react`). When users file issues, tag them with the relevant skill label to track which areas need the most improvement.
diff --git a/mintlify/intent/index.mdx b/mintlify/intent/index.mdx
new file mode 100644
index 000000000..d0ed2bcdc
--- /dev/null
+++ b/mintlify/intent/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Intent"
+description: "Agent skills and package intent. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Agent skills and package intent.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/intent/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/intent">
+    Visit the canonical TanStack Intent website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/intent">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/intent/overview.md b/mintlify/intent/overview.md
new file mode 100644
index 000000000..8ae00ed80
--- /dev/null
+++ b/mintlify/intent/overview.md
@@ -0,0 +1,88 @@
+---
+title: Overview
+id: overview
+---
+
+`@tanstack/intent` is a CLI for shipping and consuming Agent Skills as package artifacts.
+
+Skills are markdown documents that teach AI coding agents how to use your library correctly. Intent versions them with your releases and ships them inside npm packages. It discovers skills from your project and workspace dependencies, then helps agents load them when working on matching tasks.
+
+## What Intent does
+
+Intent provides tooling for two workflows:
+
+**For consumers:**
+
+- Discover skills from your project and workspace dependencies
+- Control which packages' skills are surfaced with an allowlist
+- Add lightweight skill loading guidance to your agent config
+- Add hook enforcement for agents that support blocking lifecycle hooks
+- Keep skills synchronized with library versions
+
+**For maintainers (library teams):**
+
+- Scaffold skills through AI-assisted domain discovery
+- Validate SKILL.md format and packaging
+- Ship skills in the same release pipeline as code
+- Track staleness when source docs change
+
+## How it works
+
+### Discovery and installation
+
+Examples use `npx` for npm projects. In pnpm, Yarn, or Bun projects, use the matching runner:
+
+| Tool | Pattern                                      |
+| ---- | -------------------------------------------- |
+| npm  | `npx @tanstack/intent@latest <command>`      |
+| pnpm | `pnpm dlx @tanstack/intent@latest <command>` |
+| Yarn | `yarn dlx @tanstack/intent@latest <command>` |
+| Bun  | `bunx @tanstack/intent@latest <command>`     |
+
+```bash
+npx @tanstack/intent@latest list
+```
+
+Scans the current project's installed dependencies for intent-enabled packages, including `node_modules`, workspace dependencies, and Yarn PnP projects without `node_modules`. You can narrow which packages are surfaced with `package.json#intent.skills`. See the [Trust model](/intent/concepts/trust-model) and [Configuration](/intent/concepts/configuration) for how the allowlist works.
+Global package scanning is explicit; pass `--global` to include global packages or `--global-only` to ignore local packages.
+When both local and global packages are scanned, local packages take precedence.
+
+```bash
+npx @tanstack/intent@latest install
+```
+
+Creates or updates lightweight `intent-skills` guidance in your config files (`AGENTS.md`, `CLAUDE.md`, `.cursorrules`, etc.). Existing guidance is updated in place; otherwise `AGENTS.md` is the default target. Pass `--map` to opt in to explicit task-to-skill mappings.
+
+```bash
+npx @tanstack/intent@latest hooks install
+```
+
+Installs hook enforcement for supported agents. Project-scoped hooks are available for Claude Code and Codex. GitHub Copilot CLI project guidance can live in `.github/copilot-instructions.md`, while blocking hooks are user-scoped. Cursor and generic `AGENTS.md` agents use guidance only.
+
+```bash
+npx @tanstack/intent@latest load @tanstack/query#fetching
+```
+
+Loads the matching `SKILL.md` content for the installed package version. Pass `--path` when you need the resolved skill file path for debugging.
+
+### Scaffolding and validation
+
+```bash
+npx @tanstack/intent@latest scaffold
+```
+
+Guides your agent through domain discovery, tree generation, and skill authoring with interactive maintainer interviews.
+
+```bash
+npx @tanstack/intent@latest validate
+```
+
+Enforces SKILL.md format rules and packaging requirements before publish.
+
+### Staleness tracking
+
+```bash
+npx @tanstack/intent@latest stale
+```
+
+Detects when skills reference outdated source documentation or library versions.
diff --git a/mintlify/intent/registry.md b/mintlify/intent/registry.md
new file mode 100644
index 000000000..740b627c9
--- /dev/null
+++ b/mintlify/intent/registry.md
@@ -0,0 +1,71 @@
+---
+title: Get Listed on the Registry
+---
+
+The [Agent Skills Registry](/intent/registry) automatically discovers and indexes npm packages that ship Agent Skills. There's no manual submission process — publish skills in your package and the registry picks them up.
+
+## How discovery works
+
+The registry periodically searches npm for packages with the `tanstack-intent` keyword. When it finds one, it downloads the tarball, extracts every `skills/**/SKILL.md` file, and indexes the contents. Each new version you publish gets indexed automatically.
+
+## Ship skills in 4 steps
+
+### 1. Generate skills
+
+Tell your AI coding agent to run:
+
+```bash
+npx @tanstack/intent@latest scaffold
+```
+
+This walks the agent through domain discovery, skill tree generation, and skill creation. You review at each stage. Skills land in a `skills/` directory at your package root — each as a `SKILL.md` file in its own subdirectory.
+
+### 2. Validate
+
+```bash
+npx @tanstack/intent@latest validate
+```
+
+Catches structural issues, missing frontmatter, and broken source references before you publish.
+
+### 3. Add the keyword
+
+Add `"tanstack-intent"` to the `keywords` array in your `package.json`:
+
+```json
+{
+  "keywords": ["tanstack-intent"]
+}
+```
+
+This is how the registry finds your package on npm.
+
+### 4. Publish
+
+```bash
+npm publish
+```
+
+The registry discovers your package on its next sync cycle. Your skills, version history, and download stats appear on the registry automatically.
+
+## Keeping skills current
+
+Skills derived from docs drift when docs change. Two commands keep them honest:
+
+```bash
+npx @tanstack/intent@latest stale
+```
+
+Flags skills whose source docs have changed since the skill was last updated.
+
+```bash
+npx @tanstack/intent@latest setup
+```
+
+Copies CI workflow templates into your repo so validation and staleness checks run in GitHub Actions. Catch drift before it ships.
+
+## Requesting a library
+
+If you use a library that doesn't ship skills yet, the best path is to open an issue on that library's repo pointing them here. The maintainer is the right person to author and own skills for their tool — they know the intent behind the API better than anyone.
+
+You can also point them to the [Agent Skills spec](https://agentskills.io) and the [TanStack Intent overview](/intent/overview) for context.
diff --git a/mintlify/licenses/ai.txt b/mintlify/licenses/ai.txt
new file mode 100644
index 000000000..308cb68dc
--- /dev/null
+++ b/mintlify/licenses/ai.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/cli.txt b/mintlify/licenses/cli.txt
new file mode 100644
index 000000000..4f8f5c06d
--- /dev/null
+++ b/mintlify/licenses/cli.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/mintlify/licenses/config.txt b/mintlify/licenses/config.txt
new file mode 100644
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/config.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/db.txt b/mintlify/licenses/db.txt
new file mode 100644
index 000000000..8be6fd58b
--- /dev/null
+++ b/mintlify/licenses/db.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kyle Mathews
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/devtools.txt b/mintlify/licenses/devtools.txt
new file mode 100644
index 000000000..0ede5e820
--- /dev/null
+++ b/mintlify/licenses/devtools.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/form.txt b/mintlify/licenses/form.txt
new file mode 100755
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/form.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/hotkeys.txt b/mintlify/licenses/hotkeys.txt
new file mode 100644
index 000000000..8ce4739a8
--- /dev/null
+++ b/mintlify/licenses/hotkeys.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/intent.txt b/mintlify/licenses/intent.txt
new file mode 100644
index 000000000..2e8dc24f4
--- /dev/null
+++ b/mintlify/licenses/intent.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/pacer.txt b/mintlify/licenses/pacer.txt
new file mode 100644
index 000000000..308cb68dc
--- /dev/null
+++ b/mintlify/licenses/pacer.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/query.txt b/mintlify/licenses/query.txt
new file mode 100644
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/query.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/ranger.txt b/mintlify/licenses/ranger.txt
new file mode 100644
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/ranger.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/router.txt b/mintlify/licenses/router.txt
new file mode 100644
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/router.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/store.txt b/mintlify/licenses/store.txt
new file mode 100644
index 000000000..77eca3808
--- /dev/null
+++ b/mintlify/licenses/store.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/table.txt b/mintlify/licenses/table.txt
new file mode 100644
index 000000000..9fe1442ee
--- /dev/null
+++ b/mintlify/licenses/table.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/licenses/virtual.txt b/mintlify/licenses/virtual.txt
new file mode 100644
index 000000000..1869e21fc
--- /dev/null
+++ b/mintlify/licenses/virtual.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/mintlify/migration-report.json b/mintlify/migration-report.json
new file mode 100644
index 000000000..bb5c17de3
--- /dev/null
+++ b/mintlify/migration-report.json
@@ -0,0 +1,800 @@
+{
+  "generatedAt": "2026-07-07T17:26:25.076Z",
+  "sourceRoot": "../upstreams",
+  "products": [
+    {
+      "id": "start",
+      "repository": "TanStack/router",
+      "docsRoot": "docs/start",
+      "commit": "a3e24c35a58d9ac149a05d6321f68aa5d541b6b4",
+      "pageCount": 82,
+      "navigationCount": 104,
+      "generatedPageCount": 22,
+      "linkTargetPageCount": 2,
+      "generatedNavigationTargets": [
+        "framework/react/examples/start-basic",
+        "framework/react/examples/start-basic-auth",
+        "framework/react/examples/start-basic-authjs",
+        "framework/react/examples/start-basic-cloudflare",
+        "framework/react/examples/start-basic-react-query",
+        "framework/react/examples/start-basic-static",
+        "framework/react/examples/start-clerk-basic",
+        "framework/react/examples/start-convex-trellaux",
+        "framework/react/examples/start-material-ui",
+        "framework/react/examples/start-supabase-basic",
+        "framework/react/examples/start-trellaux",
+        "framework/react/examples/start-workos",
+        "framework/solid/examples/start-basic",
+        "framework/solid/examples/start-basic-auth",
+        "framework/solid/examples/start-basic-authjs",
+        "framework/solid/examples/start-basic-cloudflare",
+        "framework/solid/examples/start-basic-netlify",
+        "framework/solid/examples/start-basic-nitro",
+        "framework/solid/examples/start-basic-solid-query",
+        "framework/solid/examples/start-basic-static",
+        "framework/solid/examples/start-convex-better-auth",
+        "framework/solid/examples/start-supabase-basic"
+      ]
+    },
+    {
+      "id": "router",
+      "repository": "TanStack/router",
+      "docsRoot": "docs/router",
+      "commit": "a3e24c35a58d9ac149a05d6321f68aa5d541b6b4",
+      "pageCount": 162,
+      "navigationCount": 208,
+      "generatedPageCount": 46,
+      "linkTargetPageCount": 5,
+      "generatedNavigationTargets": [
+        "framework/react/examples/authenticated-routes",
+        "framework/react/examples/basic",
+        "framework/react/examples/basic-file-based",
+        "framework/react/examples/basic-react-query",
+        "framework/react/examples/basic-react-query-file-based",
+        "framework/react/examples/basic-ssr-file-based",
+        "framework/react/examples/basic-ssr-streaming-file-based",
+        "framework/react/examples/deferred-data",
+        "framework/react/examples/kitchen-sink",
+        "framework/react/examples/kitchen-sink-file-based",
+        "framework/react/examples/kitchen-sink-react-query",
+        "framework/react/examples/kitchen-sink-react-query-file-based",
+        "framework/react/examples/location-masking",
+        "framework/react/examples/navigation-blocking",
+        "framework/react/examples/quickstart",
+        "framework/react/examples/quickstart-file-based",
+        "framework/react/examples/router-monorepo-react-query",
+        "framework/react/examples/router-monorepo-simple",
+        "framework/react/examples/router-monorepo-simple-lazy",
+        "framework/react/examples/scroll-restoration",
+        "framework/react/examples/view-transitions",
+        "framework/react/examples/with-framer-motion",
+        "framework/react/examples/with-trpc",
+        "framework/react/examples/with-trpc-react-query",
+        "framework/solid/examples/authenticated-routes",
+        "framework/solid/examples/basic-file-based",
+        "framework/solid/examples/basic-solid-query",
+        "framework/solid/examples/basic-solid-query-file-based",
+        "framework/solid/examples/basic-ssr-file-based",
+        "framework/solid/examples/basic-ssr-streaming-file-based",
+        "framework/solid/examples/deferred-data",
+        "framework/solid/examples/kitchen-sink",
+        "framework/solid/examples/kitchen-sink-file-based",
+        "framework/solid/examples/kitchen-sink-solid-query",
+        "framework/solid/examples/kitchen-sink-solid-query-file-based",
+        "framework/solid/examples/location-masking",
+        "framework/solid/examples/navigation-blocking",
+        "framework/solid/examples/quickstart",
+        "framework/solid/examples/quickstart-file-based",
+        "framework/solid/examples/router-monorepo-simple",
+        "framework/solid/examples/router-monorepo-simple-lazy",
+        "framework/solid/examples/router-monorepo-solid-query",
+        "framework/solid/examples/scroll-restoration",
+        "framework/solid/examples/view-transitions",
+        "framework/solid/examples/with-framer-motion",
+        "framework/solid/examples/with-trpc"
+      ]
+    },
+    {
+      "id": "query",
+      "repository": "TanStack/query",
+      "docsRoot": "docs",
+      "commit": "bb68fa0aa1478640884007ecd989a9e48db253eb",
+      "pageCount": 494,
+      "navigationCount": 552,
+      "generatedPageCount": 58,
+      "linkTargetPageCount": 3,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/auto-refetching",
+        "framework/angular/examples/basic",
+        "framework/angular/examples/devtools-panel",
+        "framework/angular/examples/infinite-query-with-max-pages",
+        "framework/angular/examples/optimistic-updates",
+        "framework/angular/examples/pagination",
+        "framework/angular/examples/query-options-from-a-service",
+        "framework/angular/examples/router",
+        "framework/angular/examples/rxjs",
+        "framework/angular/examples/simple",
+        "framework/lit/examples/basic",
+        "framework/lit/examples/pagination",
+        "framework/lit/examples/ssr",
+        "framework/react/examples/algolia",
+        "framework/react/examples/auto-refetching",
+        "framework/react/examples/basic",
+        "framework/react/examples/basic-graphql-request",
+        "framework/react/examples/chat",
+        "framework/react/examples/default-query-function",
+        "framework/react/examples/devtools-panel",
+        "framework/react/examples/infinite-query-with-max-pages",
+        "framework/react/examples/load-more-infinite-scroll",
+        "framework/react/examples/nextjs",
+        "framework/react/examples/nextjs-app-prefetching",
+        "framework/react/examples/nextjs-suspense-streaming",
+        "framework/react/examples/offline",
+        "framework/react/examples/optimistic-updates-cache",
+        "framework/react/examples/optimistic-updates-ui",
+        "framework/react/examples/pagination",
+        "framework/react/examples/playground",
+        "framework/react/examples/prefetching",
+        "framework/react/examples/react-native",
+        "framework/react/examples/react-router",
+        "framework/react/examples/rick-morty",
+        "framework/react/examples/shadow-dom",
+        "framework/react/examples/simple",
+        "framework/react/examples/star-wars",
+        "framework/react/examples/suspense",
+        "framework/solid/examples/astro",
+        "framework/solid/examples/basic",
+        "framework/solid/examples/basic-graphql-request",
+        "framework/solid/examples/default-query-function",
+        "framework/solid/examples/offline",
+        "framework/solid/examples/simple",
+        "framework/solid/examples/solid-start-streaming",
+        "framework/svelte/examples/auto-refetching",
+        "framework/svelte/examples/basic",
+        "framework/svelte/examples/load-more-infinite-scroll",
+        "framework/svelte/examples/optimistic-updates",
+        "framework/svelte/examples/playground",
+        "framework/svelte/examples/simple",
+        "framework/svelte/examples/ssr",
+        "framework/svelte/examples/star-wars",
+        "framework/vue/examples/2.6-basic",
+        "framework/vue/examples/2.7-basic",
+        "framework/vue/examples/basic",
+        "framework/vue/examples/nuxt3",
+        "framework/vue/examples/persister"
+      ]
+    },
+    {
+      "id": "table",
+      "repository": "TanStack/table",
+      "docsRoot": "docs",
+      "commit": "d08af367e11c539bb7e18c2472aa761149ef6db6",
+      "pageCount": 75,
+      "navigationCount": 161,
+      "generatedPageCount": 86,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/basic",
+        "framework/angular/examples/column-ordering",
+        "framework/angular/examples/column-pinning",
+        "framework/angular/examples/column-pinning-sticky",
+        "framework/angular/examples/column-resizing-performant",
+        "framework/angular/examples/column-visibility",
+        "framework/angular/examples/editable",
+        "framework/angular/examples/expanding",
+        "framework/angular/examples/filters",
+        "framework/angular/examples/grouping",
+        "framework/angular/examples/row-dnd",
+        "framework/angular/examples/row-selection",
+        "framework/angular/examples/signal-input",
+        "framework/angular/examples/sub-components",
+        "framework/lit/examples/basic",
+        "framework/lit/examples/column-sizing",
+        "framework/lit/examples/filters",
+        "framework/lit/examples/row-selection",
+        "framework/lit/examples/sorting",
+        "framework/lit/examples/virtualized-rows",
+        "framework/qwik/examples/basic",
+        "framework/qwik/examples/filters",
+        "framework/qwik/examples/row-selection",
+        "framework/qwik/examples/sorting",
+        "framework/react/examples/basic",
+        "framework/react/examples/bootstrap",
+        "framework/react/examples/column-dnd",
+        "framework/react/examples/column-groups",
+        "framework/react/examples/column-ordering",
+        "framework/react/examples/column-pinning",
+        "framework/react/examples/column-pinning-sticky",
+        "framework/react/examples/column-resizing-performant",
+        "framework/react/examples/column-sizing",
+        "framework/react/examples/column-visibility",
+        "framework/react/examples/custom-features",
+        "framework/react/examples/editable-data",
+        "framework/react/examples/expanding",
+        "framework/react/examples/filters",
+        "framework/react/examples/filters-faceted",
+        "framework/react/examples/filters-fuzzy",
+        "framework/react/examples/full-width-resizable-table",
+        "framework/react/examples/full-width-table",
+        "framework/react/examples/fully-controlled",
+        "framework/react/examples/grouping",
+        "framework/react/examples/kitchen-sink",
+        "framework/react/examples/material-ui-pagination",
+        "framework/react/examples/pagination",
+        "framework/react/examples/pagination-controlled",
+        "framework/react/examples/query-router-search-params",
+        "framework/react/examples/row-dnd",
+        "framework/react/examples/row-pinning",
+        "framework/react/examples/row-selection",
+        "framework/react/examples/sorting",
+        "framework/react/examples/sub-components",
+        "framework/react/examples/virtualized-columns",
+        "framework/react/examples/virtualized-columns-experimental",
+        "framework/react/examples/virtualized-infinite-scrolling",
+        "framework/react/examples/virtualized-rows",
+        "framework/react/examples/virtualized-rows-experimental",
+        "framework/solid/examples/basic",
+        "framework/solid/examples/bootstrap",
+        "framework/solid/examples/column-groups",
+        "framework/solid/examples/column-ordering",
+        "framework/solid/examples/column-visibility",
+        "framework/solid/examples/filters",
+        "framework/solid/examples/sorting",
+        "framework/svelte/examples/basic",
+        "framework/svelte/examples/column-groups",
+        "framework/svelte/examples/column-ordering",
+        "framework/svelte/examples/column-pinning",
+        "framework/svelte/examples/column-visibility",
+        "framework/svelte/examples/filtering",
+        "framework/svelte/examples/sorting",
+        "framework/vanilla/examples/basic",
+        "framework/vanilla/examples/pagination",
+        "framework/vanilla/examples/sorting",
+        "framework/vue/examples/basic",
+        "framework/vue/examples/column-ordering",
+        "framework/vue/examples/column-pinning",
+        "framework/vue/examples/filters",
+        "framework/vue/examples/grouping",
+        "framework/vue/examples/pagination",
+        "framework/vue/examples/row-selection",
+        "framework/vue/examples/sorting",
+        "framework/vue/examples/sub-components",
+        "framework/vue/examples/virtualized-rows"
+      ]
+    },
+    {
+      "id": "form",
+      "repository": "TanStack/form",
+      "docsRoot": "docs",
+      "commit": "6a73479f2c2659550a6c8b456e3e139bf0d2142e",
+      "pageCount": 279,
+      "navigationCount": 324,
+      "generatedPageCount": 45,
+      "linkTargetPageCount": 1,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/array",
+        "framework/angular/examples/large-form",
+        "framework/angular/examples/multi-step-wizard",
+        "framework/angular/examples/simple",
+        "framework/angular/examples/standard-schema",
+        "framework/lit/examples/array",
+        "framework/lit/examples/multi-step-wizard",
+        "framework/lit/examples/simple",
+        "framework/lit/examples/standard-schema",
+        "framework/lit/examples/ui-libraries",
+        "framework/preact/examples/multi-step-wizard",
+        "framework/preact/examples/simple",
+        "framework/react/examples/array",
+        "framework/react/examples/devtools",
+        "framework/react/examples/dynamic",
+        "framework/react/examples/field-errors-from-form-validators",
+        "framework/react/examples/large-form",
+        "framework/react/examples/multi-step-wizard",
+        "framework/react/examples/next-server-actions",
+        "framework/react/examples/query-integration",
+        "framework/react/examples/remix",
+        "framework/react/examples/simple",
+        "framework/react/examples/standard-schema",
+        "framework/react/examples/tanstack-start",
+        "framework/react/examples/ui-libraries",
+        "framework/react/reference/functions/useTransform",
+        "framework/solid/examples/array",
+        "framework/solid/examples/large-form",
+        "framework/solid/examples/multi-step-wizard",
+        "framework/solid/examples/simple",
+        "framework/solid/examples/standard-schema",
+        "framework/solid/reference/type-aliases/CreateField",
+        "framework/svelte/examples/array",
+        "framework/svelte/examples/large-form",
+        "framework/svelte/examples/multi-step-wizard",
+        "framework/svelte/examples/simple",
+        "framework/svelte/examples/standard-schema",
+        "framework/vue/examples/array",
+        "framework/vue/examples/multi-step-wizard",
+        "framework/vue/examples/simple",
+        "framework/vue/examples/standard-schema",
+        "framework/vue/reference/type-aliases/UseField",
+        "reference/type-aliases/FieldInfo",
+        "reference/type-aliases/FieldMeta",
+        "reference/type-aliases/FieldState"
+      ]
+    },
+    {
+      "id": "db",
+      "repository": "TanStack/db",
+      "docsRoot": "docs",
+      "commit": "18ba740bcbab78f5ae1c31c784ed42d1dae5ba38",
+      "pageCount": 472,
+      "navigationCount": 472,
+      "generatedPageCount": 0,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": []
+    },
+    {
+      "id": "ai",
+      "repository": "TanStack/ai",
+      "docsRoot": "docs",
+      "commit": "e3de949575eac8301c0449afa3a91ef450e9580b",
+      "pageCount": 386,
+      "navigationCount": 415,
+      "generatedPageCount": 29,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "reference/classes/BaseAdapter",
+        "reference/classes/RealtimeClient",
+        "reference/functions/convertZodToJsonSchema",
+        "reference/functions/embedding",
+        "reference/functions/messages",
+        "reference/functions/text",
+        "reference/functions/textOptions",
+        "reference/interfaces/AIAdapter",
+        "reference/interfaces/AIAdapterConfig",
+        "reference/interfaces/ApprovalRequestedStreamChunk",
+        "reference/interfaces/BaseStreamChunk",
+        "reference/interfaces/ContentPartSource",
+        "reference/interfaces/ContentStreamChunk",
+        "reference/interfaces/DoneStreamChunk",
+        "reference/interfaces/EmbeddingOptions",
+        "reference/interfaces/EmbeddingResult",
+        "reference/interfaces/ErrorStreamChunk",
+        "reference/interfaces/RealtimeClientOptions",
+        "reference/interfaces/StreamProcessorHandlers",
+        "reference/interfaces/ThinkingStreamChunk",
+        "reference/interfaces/ToolCallStreamChunk",
+        "reference/interfaces/ToolInputAvailableStreamChunk",
+        "reference/interfaces/ToolResultStreamChunk",
+        "reference/type-aliases/ContentPartForModalities",
+        "reference/type-aliases/ExtractModalitiesForModel",
+        "reference/type-aliases/ExtractModelsFromAdapter",
+        "reference/type-aliases/TextStreamOptionsForModel",
+        "reference/type-aliases/TextStreamOptionsUnion",
+        "reference/variables/aiEventClient"
+      ]
+    },
+    {
+      "id": "intent",
+      "repository": "TanStack/intent",
+      "docsRoot": "docs",
+      "commit": "6039a2629c2505de8715746b33be93b2518ad40b",
+      "pageCount": 16,
+      "navigationCount": 16,
+      "generatedPageCount": 0,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": []
+    },
+    {
+      "id": "virtual",
+      "repository": "TanStack/virtual",
+      "docsRoot": "docs",
+      "commit": "850947a42dc322ac1dd0328a15ed344763932b60",
+      "pageCount": 13,
+      "navigationCount": 58,
+      "generatedPageCount": 45,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/dynamic",
+        "framework/angular/examples/fixed",
+        "framework/angular/examples/infinite-scroll",
+        "framework/angular/examples/padding",
+        "framework/angular/examples/smooth-scroll",
+        "framework/angular/examples/sticky",
+        "framework/angular/examples/table",
+        "framework/angular/examples/variable",
+        "framework/angular/examples/window",
+        "framework/lit/examples/dynamic",
+        "framework/lit/examples/fixed",
+        "framework/marko/examples/dynamic",
+        "framework/marko/examples/fixed",
+        "framework/marko/examples/grid",
+        "framework/marko/examples/infinite-scroll",
+        "framework/marko/examples/smooth-scroll",
+        "framework/marko/examples/variable",
+        "framework/marko/examples/window",
+        "framework/react/examples/chat",
+        "framework/react/examples/dynamic",
+        "framework/react/examples/fixed",
+        "framework/react/examples/infinite-scroll",
+        "framework/react/examples/padding",
+        "framework/react/examples/pretext",
+        "framework/react/examples/scroll-padding",
+        "framework/react/examples/smooth-scroll",
+        "framework/react/examples/sticky",
+        "framework/react/examples/table",
+        "framework/react/examples/variable",
+        "framework/react/examples/window",
+        "framework/svelte/examples/dynamic",
+        "framework/svelte/examples/fixed",
+        "framework/svelte/examples/infinite-scroll",
+        "framework/svelte/examples/smooth-scroll",
+        "framework/svelte/examples/sticky",
+        "framework/svelte/examples/table",
+        "framework/vue/examples/dynamic",
+        "framework/vue/examples/fixed",
+        "framework/vue/examples/infinite-scroll",
+        "framework/vue/examples/padding",
+        "framework/vue/examples/scroll-padding",
+        "framework/vue/examples/smooth-scroll",
+        "framework/vue/examples/sticky",
+        "framework/vue/examples/table",
+        "framework/vue/examples/variable"
+      ]
+    },
+    {
+      "id": "pacer",
+      "repository": "TanStack/pacer",
+      "docsRoot": "docs",
+      "commit": "cac705b14f7b246ef95e0287dc7745684fb40867",
+      "pageCount": 291,
+      "navigationCount": 443,
+      "generatedPageCount": 152,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/asyncBatch",
+        "framework/angular/examples/asyncDebounce",
+        "framework/angular/examples/asyncRateLimit",
+        "framework/angular/examples/asyncThrottle",
+        "framework/angular/examples/batch",
+        "framework/angular/examples/debounce",
+        "framework/angular/examples/injectAsyncBatchedCallback",
+        "framework/angular/examples/injectAsyncBatcher",
+        "framework/angular/examples/injectAsyncDebouncedCallback",
+        "framework/angular/examples/injectAsyncDebouncer",
+        "framework/angular/examples/injectAsyncQueuedSignal",
+        "framework/angular/examples/injectAsyncQueuer",
+        "framework/angular/examples/injectAsyncRateLimitedCallback",
+        "framework/angular/examples/injectAsyncRateLimiter",
+        "framework/angular/examples/injectAsyncRateLimiterWithPersister",
+        "framework/angular/examples/injectAsyncThrottledCallback",
+        "framework/angular/examples/injectAsyncThrottler",
+        "framework/angular/examples/injectBatchedCallback",
+        "framework/angular/examples/injectBatcher",
+        "framework/angular/examples/injectDebouncedCallback",
+        "framework/angular/examples/injectDebouncedSignal",
+        "framework/angular/examples/injectDebouncedValue",
+        "framework/angular/examples/injectDebouncer",
+        "framework/angular/examples/injectQueuedSignal",
+        "framework/angular/examples/injectQueuedValue",
+        "framework/angular/examples/injectQueuer",
+        "framework/angular/examples/injectQueuerWithPersister",
+        "framework/angular/examples/injectRateLimitedCallback",
+        "framework/angular/examples/injectRateLimitedSignal",
+        "framework/angular/examples/injectRateLimitedValue",
+        "framework/angular/examples/injectRateLimiter",
+        "framework/angular/examples/injectRateLimiterWithPersister",
+        "framework/angular/examples/injectThrottledCallback",
+        "framework/angular/examples/injectThrottledSignal",
+        "framework/angular/examples/injectThrottledValue",
+        "framework/angular/examples/injectThrottler",
+        "framework/angular/examples/queue",
+        "framework/angular/examples/rateLimit",
+        "framework/angular/examples/throttle",
+        "framework/preact/examples/asyncBatch",
+        "framework/preact/examples/asyncDebounce",
+        "framework/preact/examples/asyncRateLimit",
+        "framework/preact/examples/asyncThrottle",
+        "framework/preact/examples/batch",
+        "framework/preact/examples/debounce",
+        "framework/preact/examples/queue",
+        "framework/preact/examples/rateLimit",
+        "framework/preact/examples/throttle",
+        "framework/preact/examples/useAsyncBatchedCallback",
+        "framework/preact/examples/useAsyncBatcher",
+        "framework/preact/examples/useAsyncDebouncedCallback",
+        "framework/preact/examples/useAsyncDebouncer",
+        "framework/preact/examples/useAsyncQueuedState",
+        "framework/preact/examples/useAsyncQueuer",
+        "framework/preact/examples/useAsyncRateLimiter",
+        "framework/preact/examples/useAsyncRateLimiterWithPersister",
+        "framework/preact/examples/useAsyncThrottledCallback",
+        "framework/preact/examples/useAsyncThrottler",
+        "framework/preact/examples/useBatchedCallback",
+        "framework/preact/examples/useBatcher",
+        "framework/preact/examples/useDebouncedCallback",
+        "framework/preact/examples/useDebouncedState",
+        "framework/preact/examples/useDebouncedValue",
+        "framework/preact/examples/useDebouncer",
+        "framework/preact/examples/useQueuedState",
+        "framework/preact/examples/useQueuedValue",
+        "framework/preact/examples/useQueuer",
+        "framework/preact/examples/useQueuerWithPersister",
+        "framework/preact/examples/useRateLimitedCallback",
+        "framework/preact/examples/useRateLimitedState",
+        "framework/preact/examples/useRateLimitedValue",
+        "framework/preact/examples/useRateLimiter",
+        "framework/preact/examples/useRateLimiterWithPersister",
+        "framework/preact/examples/useThrottledCallback",
+        "framework/preact/examples/useThrottledState",
+        "framework/preact/examples/useThrottledValue",
+        "framework/preact/examples/useThrottler",
+        "framework/react/examples/asyncBatch",
+        "framework/react/examples/asyncDebounce",
+        "framework/react/examples/asyncRateLimit",
+        "framework/react/examples/asyncThrottle",
+        "framework/react/examples/batch",
+        "framework/react/examples/debounce",
+        "framework/react/examples/queue",
+        "framework/react/examples/rateLimit",
+        "framework/react/examples/react-query-debounced-prefetch",
+        "framework/react/examples/react-query-queued-prefetch",
+        "framework/react/examples/react-query-throttled-prefetch",
+        "framework/react/examples/throttle",
+        "framework/react/examples/useAsyncBatchedCallback",
+        "framework/react/examples/useAsyncBatcher",
+        "framework/react/examples/useAsyncDebouncedCallback",
+        "framework/react/examples/useAsyncDebouncer",
+        "framework/react/examples/useAsyncQueuedState",
+        "framework/react/examples/useAsyncQueuer",
+        "framework/react/examples/useAsyncRateLimiter",
+        "framework/react/examples/useAsyncRateLimiterWithPersister",
+        "framework/react/examples/useAsyncThrottler",
+        "framework/react/examples/useBatchedCallback",
+        "framework/react/examples/useBatcher",
+        "framework/react/examples/useDebouncedCallback",
+        "framework/react/examples/useDebouncedState",
+        "framework/react/examples/useDebouncedValue",
+        "framework/react/examples/useDebouncer",
+        "framework/react/examples/useQueuedState",
+        "framework/react/examples/useQueuedValue",
+        "framework/react/examples/useQueuer",
+        "framework/react/examples/useQueuerWithPersister",
+        "framework/react/examples/useRateLimitedCallback",
+        "framework/react/examples/useRateLimitedState",
+        "framework/react/examples/useRateLimitedValue",
+        "framework/react/examples/useRateLimiter",
+        "framework/react/examples/useRateLimiterWithPersister",
+        "framework/react/examples/useThrottledCallback",
+        "framework/react/examples/useThrottledState",
+        "framework/react/examples/useThrottledValue",
+        "framework/react/examples/useThrottler",
+        "framework/solid/examples/asyncDebounce",
+        "framework/solid/examples/asyncRateLimit",
+        "framework/solid/examples/asyncThrottle",
+        "framework/solid/examples/batch",
+        "framework/solid/examples/createAsyncBatcher",
+        "framework/solid/examples/createAsyncDebouncer",
+        "framework/solid/examples/createAsyncQueuer",
+        "framework/solid/examples/createAsyncRateLimiter",
+        "framework/solid/examples/createAsyncThrottler",
+        "framework/solid/examples/createBatcher",
+        "framework/solid/examples/createDebouncedSignal",
+        "framework/solid/examples/createDebouncedValue",
+        "framework/solid/examples/createDebouncer",
+        "framework/solid/examples/createQueuedSignal",
+        "framework/solid/examples/createQueuer",
+        "framework/solid/examples/createRateLimitedSignal",
+        "framework/solid/examples/createRateLimitedValue",
+        "framework/solid/examples/createRateLimiter",
+        "framework/solid/examples/createThrottledSignal",
+        "framework/solid/examples/createThrottledValue",
+        "framework/solid/examples/createThrottler",
+        "framework/solid/examples/debounce",
+        "framework/solid/examples/queue",
+        "framework/solid/examples/rateLimit",
+        "framework/solid/examples/throttle",
+        "framework/vanilla/examples/LiteBatcher",
+        "framework/vanilla/examples/LiteDebouncer",
+        "framework/vanilla/examples/LiteQueuer",
+        "framework/vanilla/examples/LiteRateLimiter",
+        "framework/vanilla/examples/LiteThrottler",
+        "framework/vanilla/examples/liteBatch",
+        "framework/vanilla/examples/liteDebounce",
+        "framework/vanilla/examples/liteQueue",
+        "framework/vanilla/examples/liteRateLimit",
+        "framework/vanilla/examples/liteThrottle"
+      ]
+    },
+    {
+      "id": "hotkeys",
+      "repository": "TanStack/hotkeys",
+      "docsRoot": "docs",
+      "commit": "6adcc3a1b0a28350eb421f6aeebcf0f94d177817",
+      "pageCount": 297,
+      "navigationCount": 352,
+      "generatedPageCount": 55,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/injectHeldKeys",
+        "framework/angular/examples/injectHotkey",
+        "framework/angular/examples/injectHotkeyRecorder",
+        "framework/angular/examples/injectHotkeySequence",
+        "framework/angular/examples/injectHotkeySequenceRecorder",
+        "framework/angular/examples/injectHotkeySequences",
+        "framework/angular/examples/injectHotkeys",
+        "framework/angular/examples/injectKeyHold",
+        "framework/lit/examples/held-keys",
+        "framework/lit/examples/hotkey",
+        "framework/lit/examples/hotkey-recorder",
+        "framework/lit/examples/hotkey-sequence",
+        "framework/lit/examples/hotkey-sequence-recorder",
+        "framework/lit/examples/key-hold",
+        "framework/preact/examples/useHeldKeys",
+        "framework/preact/examples/useHotkey",
+        "framework/preact/examples/useHotkeyRecorder",
+        "framework/preact/examples/useHotkeySequence",
+        "framework/preact/examples/useHotkeySequenceRecorder",
+        "framework/preact/examples/useHotkeySequences",
+        "framework/preact/examples/useHotkeys",
+        "framework/preact/examples/useKeyhold",
+        "framework/react/examples/useHeldKeys",
+        "framework/react/examples/useHotkey",
+        "framework/react/examples/useHotkeyRecorder",
+        "framework/react/examples/useHotkeySequence",
+        "framework/react/examples/useHotkeySequenceRecorder",
+        "framework/react/examples/useHotkeySequences",
+        "framework/react/examples/useHotkeys",
+        "framework/react/examples/useKeyhold",
+        "framework/solid/examples/createHeldKeys",
+        "framework/solid/examples/createHotkey",
+        "framework/solid/examples/createHotkeyRecorder",
+        "framework/solid/examples/createHotkeySequence",
+        "framework/solid/examples/createHotkeySequenceRecorder",
+        "framework/solid/examples/createHotkeySequences",
+        "framework/solid/examples/createHotkeys",
+        "framework/solid/examples/createKeyHold",
+        "framework/svelte/examples/create-hotkey",
+        "framework/svelte/examples/create-hotkey-recorder",
+        "framework/svelte/examples/create-hotkey-sequence",
+        "framework/svelte/examples/create-hotkey-sequence-recorder",
+        "framework/svelte/examples/create-hotkey-sequences",
+        "framework/svelte/examples/create-hotkeys",
+        "framework/svelte/examples/get-held-keys",
+        "framework/svelte/examples/get-is-key-held",
+        "framework/vanilla/examples/formatForDisplay",
+        "framework/vue/examples/useHeldKeys",
+        "framework/vue/examples/useHotkey",
+        "framework/vue/examples/useHotkeyRecorder",
+        "framework/vue/examples/useHotkeySequence",
+        "framework/vue/examples/useHotkeySequenceRecorder",
+        "framework/vue/examples/useHotkeySequences",
+        "framework/vue/examples/useHotkeys",
+        "framework/vue/examples/useKeyhold"
+      ]
+    },
+    {
+      "id": "store",
+      "repository": "TanStack/store",
+      "docsRoot": "docs",
+      "commit": "78e3f862196a904d51d6bf484e7bb5ecc65cd8fe",
+      "pageCount": 82,
+      "navigationCount": 130,
+      "generatedPageCount": 48,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/angular/examples/atoms",
+        "framework/angular/examples/simple",
+        "framework/angular/examples/store-actions",
+        "framework/angular/examples/store-context",
+        "framework/angular/examples/stores",
+        "framework/angular/reference/functions/injectSetValue",
+        "framework/angular/reference/functions/injectStoreActions",
+        "framework/lit/examples/simple",
+        "framework/lit/reference/classes/TanStackStoreAtom",
+        "framework/lit/reference/classes/TanStackStoreSelector",
+        "framework/lit/reference/index",
+        "framework/lit/reference/interfaces/UseSelectorOptions",
+        "framework/preact/examples/atoms",
+        "framework/preact/examples/simple",
+        "framework/preact/examples/store-actions",
+        "framework/preact/examples/store-context",
+        "framework/preact/examples/stores",
+        "framework/preact/reference/functions/useSetValue",
+        "framework/preact/reference/functions/useStoreActions",
+        "framework/react/examples/atoms",
+        "framework/react/examples/simple",
+        "framework/react/examples/store-actions",
+        "framework/react/examples/store-context",
+        "framework/react/examples/stores",
+        "framework/react/reference/functions/useSetValue",
+        "framework/react/reference/functions/useStoreActions",
+        "framework/solid/examples/atoms",
+        "framework/solid/examples/simple",
+        "framework/solid/examples/store-actions",
+        "framework/solid/examples/store-context",
+        "framework/solid/examples/stores",
+        "framework/solid/reference/functions/useSetValue",
+        "framework/solid/reference/functions/useStoreActions",
+        "framework/svelte/examples/atoms",
+        "framework/svelte/examples/simple",
+        "framework/svelte/examples/store-actions",
+        "framework/svelte/examples/store-context",
+        "framework/svelte/examples/stores",
+        "framework/svelte/reference/functions/useSetValue",
+        "framework/svelte/reference/functions/useStoreActions",
+        "framework/vue/examples/atoms",
+        "framework/vue/examples/simple",
+        "framework/vue/examples/store-actions",
+        "framework/vue/examples/store-context",
+        "framework/vue/examples/stores",
+        "framework/vue/reference/functions/useSetValue",
+        "framework/vue/reference/functions/useStoreActions",
+        "reference/interfaces/StoreActionsApi"
+      ]
+    },
+    {
+      "id": "ranger",
+      "repository": "TanStack/ranger",
+      "docsRoot": "docs",
+      "commit": "fef45175e2f30c1d0e2749649f73f2a460acdf6d",
+      "pageCount": 11,
+      "navigationCount": 16,
+      "generatedPageCount": 5,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": [
+        "framework/react/examples/basic",
+        "framework/react/examples/custom-steps",
+        "framework/react/examples/custom-styles",
+        "framework/react/examples/logarithmic-interpolator",
+        "framework/react/examples/update-on-drag"
+      ]
+    },
+    {
+      "id": "config",
+      "repository": "TanStack/config",
+      "docsRoot": "docs",
+      "commit": "695e782edc39b6907f79e51f4d56dc15af97df60",
+      "pageCount": 7,
+      "navigationCount": 7,
+      "generatedPageCount": 0,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": []
+    },
+    {
+      "id": "devtools",
+      "repository": "TanStack/devtools",
+      "docsRoot": "docs",
+      "commit": "92f69d014a981518915064593adc7bb4ffb71f3a",
+      "pageCount": 42,
+      "navigationCount": 57,
+      "generatedPageCount": 15,
+      "linkTargetPageCount": 1,
+      "generatedNavigationTargets": [
+        "framework/angular/reference/index",
+        "framework/preact/examples/basic",
+        "framework/preact/examples/custom-devtools",
+        "framework/preact/reference/index",
+        "framework/react/examples/a11y-devtools",
+        "framework/react/examples/basic",
+        "framework/react/examples/custom-devtools",
+        "framework/react/examples/start",
+        "framework/react/reference/index",
+        "framework/solid/examples/basic",
+        "framework/solid/reference/index",
+        "framework/solif/examples/a11y-devtools",
+        "framework/svelte/reference/index",
+        "framework/vue/examples/basic",
+        "framework/vue/reference/index"
+      ]
+    },
+    {
+      "id": "cli",
+      "repository": "TanStack/cli",
+      "docsRoot": "docs",
+      "commit": "12c31dfb429ec057af9ddc5f85f492b0b0b22979",
+      "pageCount": 11,
+      "navigationCount": 11,
+      "generatedPageCount": 0,
+      "linkTargetPageCount": 0,
+      "generatedNavigationTargets": []
+    }
+  ]
+}
diff --git a/mintlify/pacer/devtools.md b/mintlify/pacer/devtools.md
new file mode 100644
index 000000000..bc4bc9fdf
--- /dev/null
+++ b/mintlify/pacer/devtools.md
@@ -0,0 +1,104 @@
+---
+title: Devtools
+id: devtools
+---
+
+What? My debouncer can have dedicated devtools? Yep!
+
+TanStack Pacer provides devtools for debugging and monitoring all your utilities in real-time. The devtools integrate seamlessly within the new [TanStack Devtools](https://tanstack.com/devtools) multi-panel UI.
+
+> [!NOTE] 
+> By default, the TanStack Devtools and TanStack Pacer Devtools will only be included in development mode. This helps keep your production bundle size minimal. If you need to include devtools in production builds (e.g., for debugging production issues), you can use the alternative "production" imports.
+
+## Installation
+
+Install the devtools packages for your framework:
+
+### React
+
+```sh
+npm install @tanstack/react-devtools @tanstack/react-pacer-devtools
+```
+
+### Solid
+
+```sh
+npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools
+```
+
+### Angular
+
+Coming soon...
+
+## Basic Setup
+
+### React Setup
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools'
+
+function App() {
+  return (
+    <div>
+      {/* Your app content */}
+      
+      <TanStackDevtools
+        eventBusConfig={{
+          debug: false,
+        }}
+        plugins={[pacerDevtoolsPlugin()]}
+      />
+    </div>
+  )
+}
+```
+
+### Solid Setup
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { pacerDevtoolsPlugin } from '@tanstack/solid-pacer-devtools'
+
+function App() {
+  return (
+    <div>
+      {/* Your app content */}
+      
+      <TanStackDevtools
+        eventBusConfig={{
+          debug: false,
+        }}
+        plugins={[pacerDevtoolsPlugin()]}
+      />
+    </div>
+  )
+}
+```
+
+## Production Builds
+
+By default, devtools are excluded from production builds to minimize bundle size. The default imports will return no-op implementations in production:
+
+```tsx
+// This will be a no-op in production builds
+import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools'
+```
+
+If you need to include devtools in production builds (e.g., for debugging production issues), use the production-specific imports:
+
+```tsx
+// This will include full devtools even in production builds
+import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools/production'
+```
+
+## Registering Utilities
+
+Pacer utilities only register with the devtools when you pass a `key`. Keys are no longer generated automatically, so leave the option out if you do not want an instance to appear in the panels.
+
+```tsx
+const debouncer = new Debouncer(myDebounceFn, {
+  key: 'My Debouncer', // friendly name shown in the devtools
+  wait: 1000,
+})
+```
\ No newline at end of file
diff --git a/mintlify/pacer/framework/angular/adapter.md b/mintlify/pacer/framework/angular/adapter.md
new file mode 100644
index 000000000..0ee80214a
--- /dev/null
+++ b/mintlify/pacer/framework/angular/adapter.md
@@ -0,0 +1,193 @@
+---
+title: TanStack Pacer Angular Adapter
+id: adapter
+---
+
+If you are using TanStack Pacer in an Angular application, we recommend using the Angular Adapter. The Angular Adapter provides inject functions that wrap the core Pacer utilities and integrate with Angular's dependency injection and signals. If you need to use the core Pacer classes or functions directly, the Angular Adapter also re-exports everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/angular-pacer
+```
+
+## Angular inject API
+
+See the [Angular inject API Reference](/pacer/framework/angular/reference/index) for the full list of inject functions (injectDebouncer, injectThrottler, injectRateLimiter, injectQueuer, injectBatcher, and their async and callback variants).
+
+## Basic Usage
+
+Inject a Pacer utility in your component or service. Each inject function returns an object that exposes methods and a reactive `state()` signal when you pass a selector.
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectDebouncer } from '@tanstack/angular-pacer'
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <input [value]="query()" (input)="onInput($event)" placeholder="Search..." />
+    <p>Pending: {{ debouncer.state().isPending }}</p>
+    <p>Debounced: {{ debounced() }}</p>
+  `,
+})
+export class App {
+  protected readonly query = signal('')
+  protected readonly debounced = signal('')
+
+  protected readonly debouncer = injectDebouncer(
+    (q: string) => {
+      this.debounced.set(q)
+    },
+    { wait: 500 },
+    (state) => ({ isPending: state.isPending }),
+  )
+
+  protected onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value
+    this.query.set(value)
+    this.debouncer.maybeExecute(value)
+  }
+}
+```
+
+You can also import core Pacer APIs re-exported from the adapter.
+
+```ts
+import { debounce, Debouncer } from '@tanstack/angular-pacer'
+```
+
+## Provider
+
+Use `providePacerOptions` in your application config to set default options for all Pacer utilities in the app. Options passed to individual inject functions override these defaults.
+
+```ts
+import { ApplicationConfig } from '@angular/core'
+import { providePacerOptions } from '@tanstack/angular-pacer'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    providePacerOptions({
+      debouncer: { wait: 300 },
+      throttler: { wait: 100 },
+      queuer: { concurrency: 2 },
+      rateLimiter: { limit: 5, window: 60000 },
+    }),
+  ],
+}
+```
+
+## State selector
+
+The third argument to each inject function is a state selector. It determines which slice of state is exposed on the returned object's `state()` signal, so only relevant changes trigger template updates.
+
+**By default, if you omit the selector, `state()` is not populated.** Pass a selector to opt in to reactive state.
+
+```ts
+// No selector: state() is not populated
+const debouncer = injectDebouncer(fn, { wait: 500 })
+
+// With selector: state() is a signal of the selected slice
+const debouncer = injectDebouncer(
+  fn,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending }),
+)
+```
+
+For more on state and options per utility, see the guides (e.g. [Debouncing Guide](/pacer/guides/debouncing), [Rate Limiting Guide](/pacer/guides/rate-limiting)).
+
+## Examples
+
+### Debouncer
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectDebouncer } from '@tanstack/angular-pacer'
+
+@Component({
+  selector: 'app-search',
+  template: `
+    <input [value]="query()" (input)="onInput($event)" placeholder="Search..." />
+  `,
+})
+export class SearchComponent {
+  protected readonly query = signal('')
+
+  protected readonly debouncer = injectDebouncer(
+    (q: string) => console.log('Searching for', q),
+    { wait: 500 },
+  )
+
+  protected onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value
+    this.query.set(value)
+    this.debouncer.maybeExecute(value)
+  }
+}
+```
+
+### Queuer
+
+```ts
+import { Component, signal } from '@angular/core'
+import { injectQueuer } from '@tanstack/angular-pacer'
+
+@Component({
+  selector: 'app-upload',
+  template: `
+    <input type="file" multiple (change)="onFiles($event)" />
+    <p>Queue size: {{ queuer.state().size }}</p>
+  `,
+})
+export class UploadComponent {
+  protected readonly queuer = injectQueuer<File, { size: number }>(
+    async (file) => {
+      await uploadFile(file)
+    },
+    { concurrency: 3 },
+    (state) => ({ size: state.size }),
+  )
+
+  protected onFiles(event: Event): void {
+    const files = (event.target as HTMLInputElement).files
+    if (files) {
+      Array.from(files).forEach((file) => this.queuer.addItem(file))
+    }
+  }
+}
+```
+
+### Rate Limiter
+
+```ts
+import { Component } from '@angular/core'
+import { injectRateLimiter } from '@tanstack/angular-pacer'
+
+@Component({
+  selector: 'app-api',
+  template: `
+    <button (click)="submit()">Submit</button>
+    <p>Rejections: {{ rateLimiter.state().rejectionCount }}</p>
+  `,
+})
+export class ApiComponent {
+  protected readonly rateLimiter = injectRateLimiter<string, { rejectionCount: number }>(
+    (data) =>
+      fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      }),
+    {
+      limit: 5,
+      window: 60000,
+      onReject: () => alert('Rate limit reached. Try again later.'),
+    },
+    (state) => ({ rejectionCount: state.rejectionCount }),
+  )
+
+  protected submit(): void {
+    this.rateLimiter.maybeExecute('payload')
+  }
+}
+```
diff --git a/mintlify/pacer/framework/angular/examples/asyncBatch.md b/mintlify/pacer/framework/angular/examples/asyncBatch.md
new file mode 100644
index 000000000..03056514d
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/asyncBatch.md
@@ -0,0 +1,12 @@
+---
+title: "asyncBatch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/asyncBatch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/asyncBatch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/asyncDebounce.md b/mintlify/pacer/framework/angular/examples/asyncDebounce.md
new file mode 100644
index 000000000..4fbe7c8f0
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/asyncDebounce.md
@@ -0,0 +1,12 @@
+---
+title: "asyncDebounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/asyncDebounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/asyncDebounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/asyncRateLimit.md b/mintlify/pacer/framework/angular/examples/asyncRateLimit.md
new file mode 100644
index 000000000..8c0c1973f
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/asyncRateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "asyncRateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/asyncRateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/asyncRateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/asyncThrottle.md b/mintlify/pacer/framework/angular/examples/asyncThrottle.md
new file mode 100644
index 000000000..2d250930e
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/asyncThrottle.md
@@ -0,0 +1,12 @@
+---
+title: "asyncThrottle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/asyncThrottle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/asyncThrottle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/batch.md b/mintlify/pacer/framework/angular/examples/batch.md
new file mode 100644
index 000000000..d25f00103
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/batch.md
@@ -0,0 +1,12 @@
+---
+title: "batch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/batch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/batch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/debounce.md b/mintlify/pacer/framework/angular/examples/debounce.md
new file mode 100644
index 000000000..ed9bf6f84
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/debounce.md
@@ -0,0 +1,12 @@
+---
+title: "debounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/debounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/debounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncBatchedCallback.md b/mintlify/pacer/framework/angular/examples/injectAsyncBatchedCallback.md
new file mode 100644
index 000000000..98f5d28ea
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncBatcher.md b/mintlify/pacer/framework/angular/examples/injectAsyncBatcher.md
new file mode 100644
index 000000000..d96fb45aa
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncDebouncedCallback.md b/mintlify/pacer/framework/angular/examples/injectAsyncDebouncedCallback.md
new file mode 100644
index 000000000..25aff5d9c
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncDebouncer.md b/mintlify/pacer/framework/angular/examples/injectAsyncDebouncer.md
new file mode 100644
index 000000000..0fb32dbab
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncQueuedSignal.md b/mintlify/pacer/framework/angular/examples/injectAsyncQueuedSignal.md
new file mode 100644
index 000000000..76d2a4476
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncQueuedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncQueuedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncQueuedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncQueuedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncQueuer.md b/mintlify/pacer/framework/angular/examples/injectAsyncQueuer.md
new file mode 100644
index 000000000..6d4c798f6
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncRateLimitedCallback.md b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimitedCallback.md
new file mode 100644
index 000000000..e8cf4b7ec
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimitedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncRateLimitedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncRateLimitedCallback)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiter.md b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiter.md
new file mode 100644
index 000000000..4e75c84c4
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiterWithPersister.md b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiterWithPersister.md
new file mode 100644
index 000000000..ad24ea008
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncThrottledCallback.md b/mintlify/pacer/framework/angular/examples/injectAsyncThrottledCallback.md
new file mode 100644
index 000000000..5c7f19b07
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncThrottledCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncThrottledCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncThrottledCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncThrottledCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectAsyncThrottler.md b/mintlify/pacer/framework/angular/examples/injectAsyncThrottler.md
new file mode 100644
index 000000000..3360c1c15
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectAsyncThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "injectAsyncThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectAsyncThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectAsyncThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectBatchedCallback.md b/mintlify/pacer/framework/angular/examples/injectBatchedCallback.md
new file mode 100644
index 000000000..13bd481d5
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectBatcher.md b/mintlify/pacer/framework/angular/examples/injectBatcher.md
new file mode 100644
index 000000000..e24a5cd71
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "injectBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectDebouncedCallback.md b/mintlify/pacer/framework/angular/examples/injectDebouncedCallback.md
new file mode 100644
index 000000000..ea2cc9f43
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectDebouncedSignal.md b/mintlify/pacer/framework/angular/examples/injectDebouncedSignal.md
new file mode 100644
index 000000000..a7832b04b
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectDebouncedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "injectDebouncedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectDebouncedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectDebouncedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectDebouncedValue.md b/mintlify/pacer/framework/angular/examples/injectDebouncedValue.md
new file mode 100644
index 000000000..90f06a67d
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectDebouncedValue.md
@@ -0,0 +1,12 @@
+---
+title: "injectDebouncedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectDebouncedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectDebouncedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectDebouncer.md b/mintlify/pacer/framework/angular/examples/injectDebouncer.md
new file mode 100644
index 000000000..a1b46012f
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "injectDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectQueuedSignal.md b/mintlify/pacer/framework/angular/examples/injectQueuedSignal.md
new file mode 100644
index 000000000..22dd2749e
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectQueuedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "injectQueuedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectQueuedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectQueuedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectQueuedValue.md b/mintlify/pacer/framework/angular/examples/injectQueuedValue.md
new file mode 100644
index 000000000..d8f5c0a9d
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectQueuedValue.md
@@ -0,0 +1,12 @@
+---
+title: "injectQueuedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectQueuedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectQueuedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectQueuer.md b/mintlify/pacer/framework/angular/examples/injectQueuer.md
new file mode 100644
index 000000000..949ae4144
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "injectQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectQueuerWithPersister.md b/mintlify/pacer/framework/angular/examples/injectQueuerWithPersister.md
new file mode 100644
index 000000000..c675b4d58
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectQueuerWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "injectQueuerWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectQueuerWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectQueuerWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectRateLimitedCallback.md b/mintlify/pacer/framework/angular/examples/injectRateLimitedCallback.md
new file mode 100644
index 000000000..ce2379d52
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectRateLimitedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectRateLimitedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectRateLimitedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectRateLimitedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectRateLimitedSignal.md b/mintlify/pacer/framework/angular/examples/injectRateLimitedSignal.md
new file mode 100644
index 000000000..4c3d4c556
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectRateLimitedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "injectRateLimitedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectRateLimitedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectRateLimitedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectRateLimitedValue.md b/mintlify/pacer/framework/angular/examples/injectRateLimitedValue.md
new file mode 100644
index 000000000..e88d44f12
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectRateLimitedValue.md
@@ -0,0 +1,12 @@
+---
+title: "injectRateLimitedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectRateLimitedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectRateLimitedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectRateLimiter.md b/mintlify/pacer/framework/angular/examples/injectRateLimiter.md
new file mode 100644
index 000000000..e318ae462
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "injectRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectRateLimiterWithPersister.md b/mintlify/pacer/framework/angular/examples/injectRateLimiterWithPersister.md
new file mode 100644
index 000000000..d7b1a83b4
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "injectRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectThrottledCallback.md b/mintlify/pacer/framework/angular/examples/injectThrottledCallback.md
new file mode 100644
index 000000000..07930874a
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectThrottledCallback.md
@@ -0,0 +1,12 @@
+---
+title: "injectThrottledCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectThrottledCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectThrottledCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectThrottledSignal.md b/mintlify/pacer/framework/angular/examples/injectThrottledSignal.md
new file mode 100644
index 000000000..21fe83880
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectThrottledSignal.md
@@ -0,0 +1,12 @@
+---
+title: "injectThrottledSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectThrottledSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectThrottledSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectThrottledValue.md b/mintlify/pacer/framework/angular/examples/injectThrottledValue.md
new file mode 100644
index 000000000..8ebdd53f9
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectThrottledValue.md
@@ -0,0 +1,12 @@
+---
+title: "injectThrottledValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectThrottledValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectThrottledValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/injectThrottler.md b/mintlify/pacer/framework/angular/examples/injectThrottler.md
new file mode 100644
index 000000000..2df0b4f53
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/injectThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "injectThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/injectThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/injectThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/queue.md b/mintlify/pacer/framework/angular/examples/queue.md
new file mode 100644
index 000000000..87cc33016
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/queue.md
@@ -0,0 +1,12 @@
+---
+title: "queue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/queue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/queue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/rateLimit.md b/mintlify/pacer/framework/angular/examples/rateLimit.md
new file mode 100644
index 000000000..91825234a
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/rateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "rateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/rateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/rateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/examples/throttle.md b/mintlify/pacer/framework/angular/examples/throttle.md
new file mode 100644
index 000000000..bf2c59469
--- /dev/null
+++ b/mintlify/pacer/framework/angular/examples/throttle.md
@@ -0,0 +1,12 @@
+---
+title: "throttle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/angular/examples/throttle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/angular/throttle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatchedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatchedCallback.md
new file mode 100644
index 000000000..f607c93f9
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatchedCallback.md
@@ -0,0 +1,82 @@
+---
+id: injectAsyncBatchedCallback
+title: injectAsyncBatchedCallback
+---
+
+# Function: injectAsyncBatchedCallback()
+
+```ts
+function injectAsyncBatchedCallback<TValue>(fn, options): (item) => Promise<void>;
+```
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatchedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatchedCallback.ts#L42)
+
+An Angular function that creates an async batched version of a callback function.
+This function is essentially a wrapper around `injectAsyncBatcher` that provides
+a simplified API for basic async batching needs.
+
+The batched function will collect items and process them in batches asynchronously based on
+the configured conditions (maxSize, wait time, etc.).
+
+This function provides a simpler API compared to `injectAsyncBatcher`, making it ideal for basic
+async batching needs. However, it does not expose the underlying AsyncBatcher instance.
+
+For advanced usage requiring features like:
+- Manual flushing
+- Access to batch state
+- Error handling callbacks
+- Retry support
+
+Consider using the `injectAsyncBatcher` function instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+`AsyncBatcherOptions`\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(item): Promise<void>;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`Promise`\&lt;`void`\>
+
+## Example
+
+```ts
+// Batch async API calls
+const batchApiCall = injectAsyncBatchedCallback(
+  async (items: Array<Data>) => {
+    const response = await fetch('/api/batch', {
+      method: 'POST',
+      body: JSON.stringify(items)
+    });
+    return response.json();
+  },
+  { maxSize: 10, wait: 1000 }
+);
+
+// Items will be batched and sent together
+await batchApiCall(data1);
+await batchApiCall(data2);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatcher.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatcher.md
new file mode 100644
index 000000000..5ace18f21
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncBatcher.md
@@ -0,0 +1,99 @@
+---
+id: injectAsyncBatcher
+title: injectAsyncBatcher
+---
+
+# Function: injectAsyncBatcher()
+
+```ts
+function injectAsyncBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): AngularAsyncBatcher<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:96](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L96)
+
+An Angular function that creates and manages an AsyncBatcher instance.
+
+This is a lower-level function that provides direct access to the AsyncBatcher's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+The AsyncBatcher collects items and processes them in batches asynchronously with support for
+promise-based processing, error handling, retry capabilities, and abort support.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending batch and aborts in-flight work when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const batcher = injectAsyncBatcher(fn, {
+  maxSize: 10,
+  onUnmount: (b) => b.flush()
+});
+```
+
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`AngularAsyncBatcherOptions`](/pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularAsyncBatcher`](/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const batcher = injectAsyncBatcher(
+  async (items: Array<Data>) => {
+    const response = await fetch('/api/batch', {
+      method: 'POST',
+      body: JSON.stringify(items)
+    });
+    return response.json();
+  },
+  { maxSize: 10, wait: 2000 }
+);
+
+// Add items
+batcher.addItem(data1);
+batcher.addItem(data2);
+
+// Access the selected state
+const { items, isExecuting } = batcher.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncedCallback.md
new file mode 100644
index 000000000..228c8d888
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncedCallback.md
@@ -0,0 +1,79 @@
+---
+id: injectAsyncDebouncedCallback
+title: injectAsyncDebouncedCallback
+---
+
+# Function: injectAsyncDebouncedCallback()
+
+```ts
+function injectAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncedCallback.ts:40](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncedCallback.ts#L40)
+
+An Angular function that creates an async debounced version of a callback function.
+This function is essentially a wrapper around `injectAsyncDebouncer` that provides
+a simplified API for basic async debouncing needs.
+
+The debounced function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again.
+
+This function provides a simpler API compared to `injectAsyncDebouncer`, making it ideal for basic
+async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Error handling callbacks
+- Retry support
+
+Consider using the `injectAsyncDebouncer` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`AsyncDebouncerOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\> \| `undefined`\>
+
+## Example
+
+```ts
+// Debounce an async search handler
+const handleSearch = injectAsyncDebouncedCallback(
+  async (query: string) => {
+    const response = await fetch(`/api/search?q=${query}`);
+    return response.json();
+  },
+  { wait: 500 }
+);
+
+// Use in an input
+const results = await handleSearch(searchQuery);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncer.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncer.md
new file mode 100644
index 000000000..e5d6a592a
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncDebouncer.md
@@ -0,0 +1,121 @@
+---
+id: injectAsyncDebouncer
+title: injectAsyncDebouncer
+---
+
+# Function: injectAsyncDebouncer()
+
+```ts
+function injectAsyncDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularAsyncDebouncer<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:119](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L119)
+
+An Angular function that creates and manages an AsyncDebouncer instance.
+
+This is a lower-level function that provides direct access to the AsyncDebouncer's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+This function provides async debouncing functionality with promise support, error handling,
+retry capabilities, and abort support.
+
+The debouncer will only execute the function after the specified wait time has elapsed
+since the last call. If the function is called again before the wait time expires, the
+timer resets and starts waiting again.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the debounced function is currently executing asynchronously
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastResult`: The result from the most recent successful function execution
+- `settleCount`: Number of function executions that have completed (either successfully or with errors)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending execution and aborts in-flight work when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const debouncer = injectAsyncDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularAsyncDebouncerOptions`](/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularAsyncDebouncer`](/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const debouncer = injectAsyncDebouncer(
+  async (query: string) => {
+    const response = await fetch(`/api/search?q=${query}`);
+    return response.json();
+  },
+  { wait: 500 }
+);
+
+// Opt-in to track isExecuting changes (optimized for loading states)
+const debouncer = injectAsyncDebouncer(
+  async (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })
+);
+
+// In an event handler
+const handleChange = async (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const result = await debouncer.maybeExecute(target.value);
+  console.log('Search results:', result);
+};
+
+// Access the selected state
+const { isExecuting, errorCount } = debouncer.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuedSignal.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuedSignal.md
new file mode 100644
index 000000000..01052c0db
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuedSignal.md
@@ -0,0 +1,80 @@
+---
+id: injectAsyncQueuedSignal
+title: injectAsyncQueuedSignal
+---
+
+# Function: injectAsyncQueuedSignal()
+
+```ts
+function injectAsyncQueuedSignal<TValue, TSelected>(
+   fn, 
+   options, 
+selector): AsyncQueuedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:52](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L52)
+
+An Angular function that creates an async queuer with managed state, combining Angular's signals with async queuing functionality.
+This function provides both the current queue state and queue control methods.
+
+The queue state is automatically updated whenever items are added, removed, or processed in the queue.
+All queue operations are reflected in the state array returned by the function.
+
+The function returns a callable object:
+- `queued()`: Get the current queue items as an array
+- `queued.addItem(...)`: Add an item to the queue
+- `queued.queue`: The queuer instance with additional control methods
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+`AsyncQueuerOptions`\&lt;`TValue`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AsyncQueuedSignal`](/pacer/framework/angular/reference/interfaces/AsyncQueuedSignal)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - track items
+const queued = injectAsyncQueuedSignal(
+  async (item) => {
+    const response = await fetch('/api/process', {
+      method: 'POST',
+      body: JSON.stringify(item)
+    });
+    return response.json();
+  },
+  { concurrency: 2, wait: 1000 }
+);
+
+// Add items
+queued.addItem(data1);
+
+// Access items
+console.log(queued()); // [data1, ...]
+
+// Control the queue
+queued.queuer.start();
+queued.queuer.stop();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuer.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuer.md
new file mode 100644
index 000000000..785b4555a
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncQueuer.md
@@ -0,0 +1,99 @@
+---
+id: injectAsyncQueuer
+title: injectAsyncQueuer
+---
+
+# Function: injectAsyncQueuer()
+
+```ts
+function injectAsyncQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): AngularAsyncQueuer<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:96](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L96)
+
+An Angular function that creates and manages an AsyncQueuer instance.
+
+This is a lower-level function that provides direct access to the AsyncQueuer's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+The AsyncQueuer processes items asynchronously with support for concurrent execution,
+promise-based processing, error handling, retry capabilities, and abort support.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Cleanup on Destroy
+
+By default, the function stops the queuer and aborts in-flight work when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```ts
+const queuer = injectAsyncQueuer(fn, {
+  concurrency: 2,
+  onUnmount: (q) => q.flush()
+});
+```
+
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`AngularAsyncQueuerOptions`](/pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularAsyncQueuer`](/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const queuer = injectAsyncQueuer(
+  async (item: Data) => {
+    const response = await fetch('/api/process', {
+      method: 'POST',
+      body: JSON.stringify(item)
+    });
+    return response.json();
+  },
+  { concurrency: 2, wait: 1000 }
+);
+
+// Add items
+queuer.addItem(data1);
+queuer.addItem(data2);
+
+// Access the selected state
+const { items, isExecuting } = queuer.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimitedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimitedCallback.md
new file mode 100644
index 000000000..339d34f75
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimitedCallback.md
@@ -0,0 +1,82 @@
+---
+id: injectAsyncRateLimitedCallback
+title: injectAsyncRateLimitedCallback
+---
+
+# Function: injectAsyncRateLimitedCallback()
+
+```ts
+function injectAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimitedCallback.ts:43](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimitedCallback.ts#L43)
+
+An Angular function that creates an async rate-limited version of a callback function.
+This function is essentially a wrapper around `injectAsyncRateLimiter` that provides
+a simplified API for basic async rate limiting needs.
+
+This function provides a simpler API compared to `injectAsyncRateLimiter`, making it ideal for basic
+async rate limiting needs. However, it does not expose the underlying AsyncRateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation/reset
+- Access to execution counts
+- Error handling callbacks
+- Retry support
+
+Consider using the `injectAsyncRateLimiter` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`AsyncRateLimiterOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\> \| `undefined`\>
+
+## Example
+
+```ts
+// Rate limit API calls
+const makeApiCall = injectAsyncRateLimitedCallback(
+  async (data: ApiData) => {
+    const response = await fetch('/api/endpoint', {
+      method: 'POST',
+      body: JSON.stringify(data)
+    });
+    return response.json();
+  },
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  }
+);
+
+// Use in event handler
+const result = await makeApiCall(apiData);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimiter.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimiter.md
new file mode 100644
index 000000000..551e346ee
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncRateLimiter.md
@@ -0,0 +1,86 @@
+---
+id: injectAsyncRateLimiter
+title: injectAsyncRateLimiter
+---
+
+# Function: injectAsyncRateLimiter()
+
+```ts
+function injectAsyncRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularAsyncRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:83](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L83)
+
+An Angular function that creates and manages an AsyncRateLimiter instance.
+
+This is a lower-level function that provides direct access to the AsyncRateLimiter's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+This function provides async rate limiting functionality with promise support, error handling,
+retry capabilities, and abort support.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Cleanup on Destroy
+
+By default, the function aborts in-flight work when the component is destroyed.
+Use the `onUnmount` option to customize this.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularAsyncRateLimiterOptions`](/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularAsyncRateLimiter`](/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const rateLimiter = injectAsyncRateLimiter(
+  async (id: string) => {
+    const response = await fetch(`/api/data/${id}`);
+    return response.json();
+  },
+  { limit: 5, window: 60000, windowType: 'sliding' }
+);
+
+// In an event handler
+const handleRequest = async (id: string) => {
+  const result = await rateLimiter.maybeExecute(id);
+  console.log('Result:', result);
+};
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottledCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottledCallback.md
new file mode 100644
index 000000000..2317731b4
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottledCallback.md
@@ -0,0 +1,80 @@
+---
+id: injectAsyncThrottledCallback
+title: injectAsyncThrottledCallback
+---
+
+# Function: injectAsyncThrottledCallback()
+
+```ts
+function injectAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottledCallback.ts:41](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottledCallback.ts#L41)
+
+An Angular function that creates an async throttled version of a callback function.
+This function is essentially a wrapper around `injectAsyncThrottler` that provides
+a simplified API for basic async throttling needs.
+
+The throttled function will execute at most once within the specified wait time.
+
+This function provides a simpler API compared to `injectAsyncThrottler`, making it ideal for basic
+async throttling needs. However, it does not expose the underlying AsyncThrottler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Error handling callbacks
+- Retry support
+
+Consider using the `injectAsyncThrottler` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`AsyncThrottlerOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\> \| `undefined`\>
+
+## Example
+
+```ts
+// Throttle an async update handler
+const handleUpdate = injectAsyncThrottledCallback(
+  async (data: Data) => {
+    const response = await fetch('/api/update', {
+      method: 'POST',
+      body: JSON.stringify(data)
+    });
+    return response.json();
+  },
+  { wait: 1000 }
+);
+
+// Use in an event handler
+const result = await handleUpdate(updateData);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottler.md b/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottler.md
new file mode 100644
index 000000000..adf8a7c6b
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectAsyncThrottler.md
@@ -0,0 +1,100 @@
+---
+id: injectAsyncThrottler
+title: injectAsyncThrottler
+---
+
+# Function: injectAsyncThrottler()
+
+```ts
+function injectAsyncThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularAsyncThrottler<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:98](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L98)
+
+An Angular function that creates and manages an AsyncThrottler instance.
+
+This is a lower-level function that provides direct access to the AsyncThrottler's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+This function provides async throttling functionality with promise support, error handling,
+retry capabilities, and abort support.
+
+The throttler will execute the function at most once within the specified wait time.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending execution and aborts in-flight work when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const throttler = injectAsyncThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularAsyncThrottlerOptions`](/pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularAsyncThrottler`](/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const throttler = injectAsyncThrottler(
+  async (data: Data) => {
+    const response = await fetch('/api/update', {
+      method: 'POST',
+      body: JSON.stringify(data)
+    });
+    return response.json();
+  },
+  { wait: 1000 }
+);
+
+// In an event handler
+const handleUpdate = async (data: Data) => {
+  const result = await throttler.maybeExecute(data);
+  console.log('Update result:', result);
+};
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectBatchedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectBatchedCallback.md
new file mode 100644
index 000000000..f5356d711
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectBatchedCallback.md
@@ -0,0 +1,80 @@
+---
+id: injectBatchedCallback
+title: injectBatchedCallback
+---
+
+# Function: injectBatchedCallback()
+
+```ts
+function injectBatchedCallback<TValue>(fn, options): (item) => void;
+```
+
+Defined in: [angular-pacer/src/batcher/injectBatchedCallback.ts:40](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatchedCallback.ts#L40)
+
+An Angular function that creates a batched version of a callback function.
+This function is essentially a wrapper around `injectBatcher` that provides
+a simplified API for basic batching needs.
+
+The batched function will collect items and process them in batches based on
+the configured conditions (maxSize, wait time, etc.).
+
+This function provides a simpler API compared to `injectBatcher`, making it ideal for basic
+batching needs. However, it does not expose the underlying Batcher instance.
+
+For advanced usage requiring features like:
+- Manual flushing
+- Access to batch state
+- State tracking
+
+Consider using the `injectBatcher` function instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+`BatcherOptions`\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(item): void;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+// Batch API calls
+const batchApiCall = injectBatchedCallback(
+  (items) => {
+    return fetch('/api/batch', {
+      method: 'POST',
+      body: JSON.stringify(items)
+    });
+  },
+  { maxSize: 10, wait: 1000 }
+);
+
+// Items will be batched and sent together
+batchApiCall('item1');
+batchApiCall('item2');
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectBatcher.md b/mintlify/pacer/framework/angular/reference/functions/injectBatcher.md
new file mode 100644
index 000000000..f2db851aa
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectBatcher.md
@@ -0,0 +1,92 @@
+---
+id: injectBatcher
+title: injectBatcher
+---
+
+# Function: injectBatcher()
+
+```ts
+function injectBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): AngularBatcher<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:85](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L85)
+
+An Angular function that creates and manages a Batcher instance.
+
+This is a lower-level function that provides direct access to the Batcher's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+The Batcher collects items and processes them in batches based on configurable conditions:
+- Maximum batch size
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending batch when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const batcher = injectBatcher(fn, {
+  maxSize: 5,
+  onUnmount: (b) => b.flush()
+});
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`AngularBatcherOptions`](/pacer/framework/angular/reference/interfaces/AngularBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularBatcher`](/pacer/framework/angular/reference/interfaces/AngularBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const batcher = injectBatcher(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 }
+);
+
+// Add items
+batcher.addItem('task1');
+
+// Access the selected state
+const { items, isPending } = batcher.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectDebouncedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedCallback.md
new file mode 100644
index 000000000..7c3c9cd38
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedCallback.md
@@ -0,0 +1,79 @@
+---
+id: injectDebouncedCallback
+title: injectDebouncedCallback
+---
+
+# Function: injectDebouncedCallback()
+
+```ts
+function injectDebouncedCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedCallback.ts:40](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedCallback.ts#L40)
+
+An Angular function that creates a debounced version of a callback function.
+This function is essentially a wrapper around `injectDebouncer` that provides
+a simplified API for basic debouncing needs.
+
+The debounced function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again.
+
+This function provides a simpler API compared to `injectDebouncer`, making it ideal for basic
+debouncing needs. However, it does not expose the underlying Debouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- State tracking
+
+Consider using the `injectDebouncer` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`DebouncerOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+// Debounce a search handler
+const handleSearch = injectDebouncedCallback((query: string) => {
+  fetchSearchResults(query);
+}, {
+  wait: 500 // Wait 500ms between executions
+});
+
+// Use in an input
+<input
+  type="search"
+  (input)="handleSearch($event.target.value)"
+/>
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectDebouncedSignal.md b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedSignal.md
new file mode 100644
index 000000000..8a7a465a2
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedSignal.md
@@ -0,0 +1,90 @@
+---
+id: injectDebouncedSignal
+title: injectDebouncedSignal
+---
+
+# Function: injectDebouncedSignal()
+
+```ts
+function injectDebouncedSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): DebouncedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedSignal.ts:63](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedSignal.ts#L63)
+
+An Angular function that creates a debounced state signal, combining Angular's signal with debouncing functionality.
+This function provides both the current debounced value and methods to update it.
+
+The state value is only updated after the specified wait time has elapsed since the last update attempt.
+If another update is attempted before the wait time expires, the timer resets and starts waiting again.
+This is useful for handling frequent state updates that should be throttled, like search input values
+or window resize dimensions.
+
+The function returns a callable object:
+- `debounced()`: Get the current debounced value
+- `debounced.set(...)`: Set or update the debounced value (debounced via maybeExecute)
+- `debounced.debouncer`: The debouncer instance with additional control methods and state signals
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+`DebouncerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`DebouncedSignal`](/pacer/framework/angular/reference/interfaces/DebouncedSignal)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+const debouncedQuery = injectDebouncedSignal('', { wait: 500 })
+
+// Get value
+console.log(debouncedQuery())
+
+// Set/update value (debounced)
+debouncedQuery.set('hello')
+
+// Access debouncer
+console.log(debouncedQuery.debouncer.state().isPending)
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectDebouncedValue.md b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedValue.md
new file mode 100644
index 000000000..a1d11e29f
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectDebouncedValue.md
@@ -0,0 +1,219 @@
+---
+id: injectDebouncedValue
+title: injectDebouncedValue
+---
+
+# Function: injectDebouncedValue()
+
+## Call Signature
+
+```ts
+function injectDebouncedValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): DebouncedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedValue.ts:77](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedValue.ts#L77)
+
+An Angular function that creates a debounced value that updates only after a specified delay.
+Unlike injectDebouncedSignal, this function automatically tracks changes to the input signal
+and updates the debounced value accordingly.
+
+The debounced value will only update after the specified wait time has elapsed since
+the last change to the input value. If the input value changes again before the wait
+time expires, the timer resets and starts waiting again.
+
+This is useful for deriving debounced values from signals that change frequently,
+like search queries or form inputs, where you want to limit how often downstream effects
+or calculations occur.
+
+The function returns a tuple containing:
+- A Signal that provides the current debounced value
+- The debouncer instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialOptions
+
+`DebouncerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`DebouncedSignal`](/pacer/framework/angular/reference/interfaces/DebouncedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const searchQuery = signal('')
+const debounced = injectDebouncedValue(searchQuery, {
+  wait: 500, // Wait 500ms after last change
+})
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const debouncedWithPending = injectDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending }),
+)
+
+// Debounced value will update 500ms after searchQuery stops changing
+effect(() => {
+  fetchSearchResults(debounced())
+})
+
+// Access selected debouncer state via signals (only if you provided a selector)
+effect(() => {
+  console.log('Is pending:', debouncedWithPending.state().isPending)
+})
+
+// Control the debouncer
+debounced.cancel() // Cancel any pending updates
+```
+
+## Call Signature
+
+```ts
+function injectDebouncedValue<TValue, TSelected>(
+   value, 
+   initialValue, 
+   initialOptions, 
+selector?): DebouncedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedValue.ts:82](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedValue.ts#L82)
+
+An Angular function that creates a debounced value that updates only after a specified delay.
+Unlike injectDebouncedSignal, this function automatically tracks changes to the input signal
+and updates the debounced value accordingly.
+
+The debounced value will only update after the specified wait time has elapsed since
+the last change to the input value. If the input value changes again before the wait
+time expires, the timer resets and starts waiting again.
+
+This is useful for deriving debounced values from signals that change frequently,
+like search queries or form inputs, where you want to limit how often downstream effects
+or calculations occur.
+
+The function returns a tuple containing:
+- A Signal that provides the current debounced value
+- The debouncer instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialValue
+
+`TValue`
+
+#### initialOptions
+
+`DebouncerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`DebouncedSignal`](/pacer/framework/angular/reference/interfaces/DebouncedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const searchQuery = signal('')
+const debounced = injectDebouncedValue(searchQuery, {
+  wait: 500, // Wait 500ms after last change
+})
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const debouncedWithPending = injectDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending }),
+)
+
+// Debounced value will update 500ms after searchQuery stops changing
+effect(() => {
+  fetchSearchResults(debounced())
+})
+
+// Access selected debouncer state via signals (only if you provided a selector)
+effect(() => {
+  console.log('Is pending:', debouncedWithPending.state().isPending)
+})
+
+// Control the debouncer
+debounced.cancel() // Cancel any pending updates
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectDebouncer.md b/mintlify/pacer/framework/angular/reference/functions/injectDebouncer.md
new file mode 100644
index 000000000..4ba444994
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectDebouncer.md
@@ -0,0 +1,112 @@
+---
+id: injectDebouncer
+title: injectDebouncer
+---
+
+# Function: injectDebouncer()
+
+```ts
+function injectDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularDebouncer<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:109](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L109)
+
+An Angular function that creates and manages a Debouncer instance.
+
+This is a lower-level function that provides direct access to the Debouncer's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+This function provides debouncing functionality to limit how often a function can be called,
+waiting for a specified delay before executing the latest call. This is useful for handling
+frequent events like window resizing, scroll events, or real-time search inputs.
+
+The debouncer will only execute the function after the specified wait time has elapsed
+since the last call. If the function is called again before the wait time expires, the
+timer resets and starts waiting again.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending execution when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const debouncer = injectDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularDebouncerOptions`](/pacer/framework/angular/reference/interfaces/AngularDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularDebouncer`](/pacer/framework/angular/reference/interfaces/AngularDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const debouncer = injectDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 }
+);
+
+// Opt-in to track isPending changes (optimized for loading states)
+const debouncer = injectDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// In an event handler
+const handleChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  debouncer.maybeExecute(target.value);
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending } = debouncer.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectQueuedSignal.md b/mintlify/pacer/framework/angular/reference/functions/injectQueuedSignal.md
new file mode 100644
index 000000000..f9da229bb
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectQueuedSignal.md
@@ -0,0 +1,74 @@
+---
+id: injectQueuedSignal
+title: injectQueuedSignal
+---
+
+# Function: injectQueuedSignal()
+
+```ts
+function injectQueuedSignal<TValue, TSelected>(
+   fn, 
+   options, 
+selector): QueuedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:43](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L43)
+
+An Angular function that creates a queuer with managed state, combining Angular's signals with queuing functionality.
+This function provides both the current queue state and queue control methods.
+
+The queue state is automatically updated whenever items are added, removed, or reordered in the queue.
+All queue operations are reflected in the state array returned by the function.
+
+The function returns a callable object:
+- `queued()`: Get the current queue items as an array
+- `queued.addItem(...)`: Add an item to the queue
+- `queued.queue`: The queuer instance with additional control methods
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+`QueuerOptions`\&lt;`TValue`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`QueuedSignal`](/pacer/framework/angular/reference/interfaces/QueuedSignal)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - track items
+const queued = injectQueuedSignal(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 }
+);
+
+// Add items
+queued.addItem('task1');
+
+// Access items
+console.log(queued()); // ['task1']
+
+// Control the queue
+queued.queuer.start();
+queued.queuer.stop();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectQueuedValue.md b/mintlify/pacer/framework/angular/reference/functions/injectQueuedValue.md
new file mode 100644
index 000000000..fb1738a63
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectQueuedValue.md
@@ -0,0 +1,137 @@
+---
+id: injectQueuedValue
+title: injectQueuedValue
+---
+
+# Function: injectQueuedValue()
+
+## Call Signature
+
+```ts
+function injectQueuedValue<TValue, TSelected>(
+   value, 
+   options?, 
+selector?): QueuedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:31](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L31)
+
+An Angular function that creates a queued value that processes state changes in order with an optional delay.
+This function uses injectQueuedSignal internally to manage a queue of state changes and apply them sequentially.
+
+The queued value will process changes in the order they are received, with optional delays between
+processing each change. This is useful for handling state updates that need to be processed
+in a specific order, like animations or sequential UI updates.
+
+The function returns a tuple containing:
+- A Signal that provides the current queued value
+- The queuer instance with control methods
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### options?
+
+`QueuerOptions`\&lt;`TValue`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`QueuedSignal`](/pacer/framework/angular/reference/interfaces/QueuedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+const initialValue = signal('initial')
+const queued = injectQueuedValue(initialValue, {
+  wait: 500,
+  started: true,
+})
+
+// Add changes to the queue
+queued.addItem('new value')
+```
+
+## Call Signature
+
+```ts
+function injectQueuedValue<TValue, TSelected>(
+   value, 
+   initialValue, 
+   options?, 
+selector?): QueuedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedValue.ts:42](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedValue.ts#L42)
+
+An Angular function that creates a queued value that processes state changes in order with an optional delay.
+This function uses injectQueuedSignal internally to manage a queue of state changes and apply them sequentially.
+
+The queued value will process changes in the order they are received, with optional delays between
+processing each change. This is useful for handling state updates that need to be processed
+in a specific order, like animations or sequential UI updates.
+
+The function returns a tuple containing:
+- A Signal that provides the current queued value
+- The queuer instance with control methods
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialValue
+
+`TValue`
+
+#### options?
+
+`QueuerOptions`\&lt;`TValue`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`QueuedSignal`](/pacer/framework/angular/reference/interfaces/QueuedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+const initialValue = signal('initial')
+const queued = injectQueuedValue(initialValue, {
+  wait: 500,
+  started: true,
+})
+
+// Add changes to the queue
+queued.addItem('new value')
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectQueuer.md b/mintlify/pacer/framework/angular/reference/functions/injectQueuer.md
new file mode 100644
index 000000000..766215ff0
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectQueuer.md
@@ -0,0 +1,97 @@
+---
+id: injectQueuer
+title: injectQueuer
+---
+
+# Function: injectQueuer()
+
+```ts
+function injectQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): AngularQueuer<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:90](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L90)
+
+An Angular function that creates and manages a Queuer instance.
+
+This is a lower-level function that provides direct access to the Queuer's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+The Queuer processes items synchronously in order, with optional delays between processing each item.
+The queuer includes an internal tick mechanism that can be started and stopped, making it useful as a scheduler.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`AngularQueuerOptions`](/pacer/framework/angular/reference/interfaces/AngularQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularQueuer`](/pacer/framework/angular/reference/interfaces/AngularQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const queue = injectQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 }
+);
+
+// Opt-in to track queue contents changes
+const queue = injectQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({ items: state.items, size: state.size })
+);
+
+// Add items
+queue.addItem('task1');
+
+// Access the selected state
+const { items, isRunning } = queue.state();
+```
+
+## Cleanup on Destroy
+
+By default, the function stops the queuer when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```ts
+const queue = injectQueuer(fn, {
+  started: true,
+  onUnmount: (q) => q.flush()
+});
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedCallback.md
new file mode 100644
index 000000000..7f022301c
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedCallback.md
@@ -0,0 +1,78 @@
+---
+id: injectRateLimitedCallback
+title: injectRateLimitedCallback
+---
+
+# Function: injectRateLimitedCallback()
+
+```ts
+function injectRateLimitedCallback<TFn>(fn, options): (...args) => boolean;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedCallback.ts:39](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedCallback.ts#L39)
+
+An Angular function that creates a rate-limited version of a callback function.
+This function is essentially a wrapper around `injectRateLimiter` that provides
+a simplified API for basic rate limiting needs.
+
+Rate limiting is a simple "hard limit" approach - it allows all calls until the limit
+is reached, then blocks subsequent calls until the window resets. Unlike throttling
+or debouncing, it does not attempt to space out or intelligently collapse calls.
+
+This function provides a simpler API compared to `injectRateLimiter`, making it ideal for basic
+rate limiting needs. However, it does not expose the underlying RateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation/reset
+- Access to execution counts
+- State tracking
+
+Consider using the `injectRateLimiter` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`RateLimiterOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): boolean;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`boolean`
+
+## Example
+
+```ts
+// Rate limit API calls to maximum 5 calls per minute
+const makeApiCall = injectRateLimitedCallback(
+  (data: ApiData) => {
+    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+  },
+  {
+    limit: 5,
+    window: 60000, // 1 minute
+    windowType: 'sliding',
+  }
+);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedSignal.md b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedSignal.md
new file mode 100644
index 000000000..75c316fe6
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedSignal.md
@@ -0,0 +1,84 @@
+---
+id: injectRateLimitedSignal
+title: injectRateLimitedSignal
+---
+
+# Function: injectRateLimitedSignal()
+
+```ts
+function injectRateLimitedSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): RateLimitedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts:57](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts#L57)
+
+An Angular function that creates a rate-limited state signal, combining Angular's signal with rate limiting functionality.
+This function provides both the current rate-limited value and methods to update it.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates.
+
+The function returns a callable object:
+- `rateLimited()`: Get the current rate-limited value
+- `rateLimited.set(...)`: Set or update the rate-limited value (rate-limited via maybeExecute)
+- `rateLimited.rateLimiter`: The rate limiter instance with additional control methods and state signals
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+`RateLimiterOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`RateLimitedSignal`](/pacer/framework/angular/reference/interfaces/RateLimitedSignal)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const rateLimited = injectRateLimitedSignal(0, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to reactive updates when limit state changes
+const rateLimited = injectRateLimitedSignal(
+  0,
+  { limit: 5, window: 60000 },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedValue.md b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedValue.md
new file mode 100644
index 000000000..d5db8aa52
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectRateLimitedValue.md
@@ -0,0 +1,167 @@
+---
+id: injectRateLimitedValue
+title: injectRateLimitedValue
+---
+
+# Function: injectRateLimitedValue()
+
+## Call Signature
+
+```ts
+function injectRateLimitedValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): RateLimitedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedValue.ts:50](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedValue.ts#L50)
+
+An Angular function that creates a rate-limited value that updates at most a certain number of times within a time window.
+Unlike injectRateLimitedSignal, this function automatically tracks changes to the input signal
+and updates the rate-limited value accordingly.
+
+The rate-limited value will update according to the configured rate limit, blocking updates
+once the limit is reached until the window resets.
+
+The function returns a rate-limited signal object containing:
+- A Signal that provides the current rate-limited value
+- The rate limiter instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialOptions
+
+`RateLimiterOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`RateLimitedSignal`](/pacer/framework/angular/reference/interfaces/RateLimitedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const value = signal(0)
+const rateLimited = injectRateLimitedValue(value, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+})
+
+// rateLimited() will update at most 5 times per 60 seconds
+effect(() => {
+  updateUI(rateLimited())
+})
+```
+
+## Call Signature
+
+```ts
+function injectRateLimitedValue<TValue, TSelected>(
+   value, 
+   initialValue, 
+   initialOptions, 
+selector?): RateLimitedSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedValue.ts:55](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedValue.ts#L55)
+
+An Angular function that creates a rate-limited value that updates at most a certain number of times within a time window.
+Unlike injectRateLimitedSignal, this function automatically tracks changes to the input signal
+and updates the rate-limited value accordingly.
+
+The rate-limited value will update according to the configured rate limit, blocking updates
+once the limit is reached until the window resets.
+
+The function returns a rate-limited signal object containing:
+- A Signal that provides the current rate-limited value
+- The rate limiter instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialValue
+
+`TValue`
+
+#### initialOptions
+
+`RateLimiterOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`RateLimitedSignal`](/pacer/framework/angular/reference/interfaces/RateLimitedSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const value = signal(0)
+const rateLimited = injectRateLimitedValue(value, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+})
+
+// rateLimited() will update at most 5 times per 60 seconds
+effect(() => {
+  updateUI(rateLimited())
+})
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectRateLimiter.md b/mintlify/pacer/framework/angular/reference/functions/injectRateLimiter.md
new file mode 100644
index 000000000..0ed3e7c8c
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectRateLimiter.md
@@ -0,0 +1,118 @@
+---
+id: injectRateLimiter
+title: injectRateLimiter
+---
+
+# Function: injectRateLimiter()
+
+```ts
+function injectRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:114](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L114)
+
+An Angular function that creates and manages a RateLimiter instance.
+
+This is a lower-level function that provides direct access to the RateLimiter's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+Rate limiting is a simple "hard limit" approach that allows executions until a maximum count is reached within
+a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,
+it does not attempt to space out or collapse executions intelligently.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns:
+- Use throttling when you want consistent spacing between executions (e.g. UI updates)
+- Use debouncing when you want to collapse rapid-fire events (e.g. search input)
+- Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Cleanup on Destroy
+
+Use the `onUnmount` option to run a callback when the component is destroyed.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularRateLimiterOptions`](/pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularRateLimiter`](/pacer/framework/angular/reference/interfaces/AngularRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const rateLimiter = injectRateLimiter(apiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+});
+
+// Opt-in to track execution count changes
+const rateLimiter = injectRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Monitor rate limit status
+const handleClick = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    rateLimiter.maybeExecute(data);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectThrottledCallback.md b/mintlify/pacer/framework/angular/reference/functions/injectThrottledCallback.md
new file mode 100644
index 000000000..8000613cc
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectThrottledCallback.md
@@ -0,0 +1,78 @@
+---
+id: injectThrottledCallback
+title: injectThrottledCallback
+---
+
+# Function: injectThrottledCallback()
+
+```ts
+function injectThrottledCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledCallback.ts:39](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledCallback.ts#L39)
+
+An Angular function that creates a throttled version of a callback function.
+This function is essentially a wrapper around `injectThrottler` that provides
+a simplified API for basic throttling needs.
+
+The throttled function will execute at most once within the specified wait time.
+If called multiple times within the wait period, only the first call (if leading is enabled)
+or the last call (if trailing is enabled) will execute.
+
+This function provides a simpler API compared to `injectThrottler`, making it ideal for basic
+throttling needs. However, it does not expose the underlying Throttler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- State tracking
+
+Consider using the `injectThrottler` function instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+`ThrottlerOptions`\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+// Throttle a scroll handler
+const handleScroll = injectThrottledCallback((scrollY: number) => {
+  updateScrollPosition(scrollY);
+}, {
+  wait: 100 // Execute at most once per 100ms
+});
+
+// Use in an event listener
+window.addEventListener('scroll', () => {
+  handleScroll(window.scrollY);
+});
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectThrottledSignal.md b/mintlify/pacer/framework/angular/reference/functions/injectThrottledSignal.md
new file mode 100644
index 000000000..ed3c500e2
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectThrottledSignal.md
@@ -0,0 +1,91 @@
+---
+id: injectThrottledSignal
+title: injectThrottledSignal
+---
+
+# Function: injectThrottledSignal()
+
+```ts
+function injectThrottledSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): ThrottledSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledSignal.ts:64](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledSignal.ts#L64)
+
+An Angular function that creates a throttled state signal, combining Angular's signal with throttling functionality.
+This function provides both the current throttled value and methods to update it.
+
+The state value is updated at most once within the specified wait time.
+This is useful for handling frequent state updates that should be rate-limited, like scroll positions
+or mouse movements.
+
+The function returns a callable object:
+- `throttled()`: Get the current throttled value
+- `throttled.set(...)`: Set or update the throttled value (throttled via maybeExecute)
+- `throttled.throttler`: The throttler instance with additional control methods and state signals
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available throttler state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+`ThrottlerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ThrottledSignal`](/pacer/framework/angular/reference/interfaces/ThrottledSignal)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```ts
+const throttledScrollY = injectThrottledSignal(0, { wait: 100 })
+
+// Get value
+console.log(throttledScrollY())
+
+// Set/update value (throttled)
+throttledScrollY.set(window.scrollY)
+
+// Access throttler
+console.log(throttledScrollY.throttler.state().isPending)
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectThrottledValue.md b/mintlify/pacer/framework/angular/reference/functions/injectThrottledValue.md
new file mode 100644
index 000000000..c85411baa
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectThrottledValue.md
@@ -0,0 +1,217 @@
+---
+id: injectThrottledValue
+title: injectThrottledValue
+---
+
+# Function: injectThrottledValue()
+
+## Call Signature
+
+```ts
+function injectThrottledValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+selector?): ThrottledSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledValue.ts:75](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledValue.ts#L75)
+
+An Angular function that creates a throttled value that updates at most once within a specified time window.
+Unlike injectThrottledSignal, this function automatically tracks changes to the input signal
+and updates the throttled value accordingly.
+
+The throttled value will update at most once within the specified wait time, regardless of
+how frequently the input value changes.
+
+This is useful for deriving throttled values from signals that change frequently,
+like scroll positions or mouse coordinates, where you want to limit how often downstream effects
+or calculations occur.
+
+The function returns a throttled signal object containing:
+- A Signal that provides the current throttled value
+- The throttler instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available throttler state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialOptions
+
+`ThrottlerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`ThrottledSignal`](/pacer/framework/angular/reference/interfaces/ThrottledSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const scrollY = signal(0)
+const throttledScrollY = injectThrottledValue(scrollY, {
+  wait: 100, // Update at most once per 100ms
+})
+
+// Opt-in to reactive updates when pending state changes
+const throttledScrollYWithState = injectThrottledValue(
+  scrollY,
+  { wait: 100 },
+  (state) => ({ isPending: state.isPending }),
+)
+
+// Read the throttled signal value
+effect(() => {
+  updateUI(throttledScrollY())
+})
+
+// Access throttler state via the returned object's state() signal
+console.log('Is pending:', throttledScrollYWithState.state().isPending)
+
+// Control the throttler
+throttledScrollY.cancel() // Cancel any pending updates
+```
+
+## Call Signature
+
+```ts
+function injectThrottledValue<TValue, TSelected>(
+   value, 
+   initialValue, 
+   initialOptions, 
+selector?): ThrottledSignal<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledValue.ts:80](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledValue.ts#L80)
+
+An Angular function that creates a throttled value that updates at most once within a specified time window.
+Unlike injectThrottledSignal, this function automatically tracks changes to the input signal
+and updates the throttled value accordingly.
+
+The throttled value will update at most once within the specified wait time, regardless of
+how frequently the input value changes.
+
+This is useful for deriving throttled values from signals that change frequently,
+like scroll positions or mouse coordinates, where you want to limit how often downstream effects
+or calculations occur.
+
+The function returns a throttled signal object containing:
+- A Signal that provides the current throttled value
+- The throttler instance with control methods
+
+## State Management and Selector
+
+The function uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger signal updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available throttler state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+### Type Parameters
+
+#### TValue
+
+`TValue`
+
+#### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+### Parameters
+
+#### value
+
+`Signal`\&lt;`TValue`\>
+
+#### initialValue
+
+`TValue`
+
+#### initialOptions
+
+`ThrottlerOptions`\&lt;`Setter`\&lt;`TValue`\>\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+[`ThrottledSignal`](/pacer/framework/angular/reference/interfaces/ThrottledSignal)\&lt;`TValue`, `TSelected`\>
+
+### Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const scrollY = signal(0)
+const throttledScrollY = injectThrottledValue(scrollY, {
+  wait: 100, // Update at most once per 100ms
+})
+
+// Opt-in to reactive updates when pending state changes
+const throttledScrollYWithState = injectThrottledValue(
+  scrollY,
+  { wait: 100 },
+  (state) => ({ isPending: state.isPending }),
+)
+
+// Read the throttled signal value
+effect(() => {
+  updateUI(throttledScrollY())
+})
+
+// Access throttler state via the returned object's state() signal
+console.log('Is pending:', throttledScrollYWithState.state().isPending)
+
+// Control the throttler
+throttledScrollY.cancel() // Cancel any pending updates
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/injectThrottler.md b/mintlify/pacer/framework/angular/reference/functions/injectThrottler.md
new file mode 100644
index 000000000..7fc7e16b8
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/injectThrottler.md
@@ -0,0 +1,112 @@
+---
+id: injectThrottler
+title: injectThrottler
+---
+
+# Function: injectThrottler()
+
+```ts
+function injectThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): AngularThrottler<TFn, TSelected>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:109](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L109)
+
+An Angular function that creates and manages a Throttler instance.
+
+This is a lower-level function that provides direct access to the Throttler's functionality.
+This allows you to integrate it with any state management solution you prefer.
+
+This function provides throttling functionality to limit how often a function can be called,
+ensuring it executes at most once within a specified time window.
+
+The throttler will execute the function immediately (if leading is enabled) and then
+prevent further executions until the wait period has elapsed.
+
+## State Management and Selector
+
+The function uses TanStack Store for state management and wraps it with Angular signals.
+The `selector` parameter allows you to specify which state changes will trigger signal updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Cleanup on Destroy
+
+By default, the function cancels any pending execution when the component is destroyed.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```ts
+const throttler = injectThrottler(fn, {
+  wait: 100,
+  onUnmount: (t) => t.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`AngularThrottlerOptions`](/pacer/framework/angular/reference/interfaces/AngularThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`AngularThrottler`](/pacer/framework/angular/reference/interfaces/AngularThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```ts
+// Default behavior - no reactive state subscriptions
+const throttler = injectThrottler(
+  (scrollY: number) => updateScrollPosition(scrollY),
+  { wait: 100 }
+);
+
+// Opt-in to track isPending changes (optimized for loading states)
+const throttler = injectThrottler(
+  (scrollY: number) => updateScrollPosition(scrollY),
+  { wait: 100 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// In an event handler
+window.addEventListener('scroll', () => {
+  throttler.maybeExecute(window.scrollY);
+});
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending } = throttler.state();
+```
diff --git a/mintlify/pacer/framework/angular/reference/functions/providePacerOptions.md b/mintlify/pacer/framework/angular/reference/functions/providePacerOptions.md
new file mode 100644
index 000000000..9528fecfc
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/functions/providePacerOptions.md
@@ -0,0 +1,50 @@
+---
+id: providePacerOptions
+title: providePacerOptions
+---
+
+# Function: providePacerOptions()
+
+```ts
+function providePacerOptions(options): Provider;
+```
+
+Defined in: [angular-pacer/src/provider/pacer-provider.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/provider/pacer-provider.ts#L33)
+
+Provides default options for all Pacer utilities in the Angular application.
+Use this function when configuring your Angular application to set default options
+that will be used by all Pacer utilities throughout your app.
+
+## Parameters
+
+### options
+
+`PacerProviderOptions`
+
+## Returns
+
+`Provider`
+
+## Example
+
+```ts
+// In your app.config.ts (standalone)
+export const appConfig: ApplicationConfig = {
+  providers: [
+    providePacerOptions({
+      debouncer: { wait: 300 },
+      throttler: { wait: 100 },
+    }),
+  ],
+};
+
+// Or in NgModule (module-based)
+@NgModule({
+  providers: [
+    providePacerOptions({
+      debouncer: { wait: 300 },
+    }),
+  ],
+})
+export class AppModule {}
+```
diff --git a/mintlify/pacer/framework/angular/reference/index.md b/mintlify/pacer/framework/angular/reference/index.md
new file mode 100644
index 000000000..46305e1e0
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/index.md
@@ -0,0 +1,65 @@
+---
+id: "@tanstack/angular-pacer"
+title: "@tanstack/angular-pacer"
+---
+
+# @tanstack/angular-pacer
+
+## Interfaces
+
+- [AngularAsyncBatcher](/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher)
+- [AngularAsyncBatcherOptions](/pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions)
+- [AngularAsyncDebouncer](/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer)
+- [AngularAsyncDebouncerOptions](/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions)
+- [AngularAsyncQueuer](/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer)
+- [AngularAsyncQueuerOptions](/pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions)
+- [AngularAsyncRateLimiter](/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter)
+- [AngularAsyncRateLimiterOptions](/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions)
+- [AngularAsyncThrottler](/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler)
+- [AngularAsyncThrottlerOptions](/pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions)
+- [AngularBatcher](/pacer/framework/angular/reference/interfaces/AngularBatcher)
+- [AngularBatcherOptions](/pacer/framework/angular/reference/interfaces/AngularBatcherOptions)
+- [AngularDebouncer](/pacer/framework/angular/reference/interfaces/AngularDebouncer)
+- [AngularDebouncerOptions](/pacer/framework/angular/reference/interfaces/AngularDebouncerOptions)
+- [AngularQueuer](/pacer/framework/angular/reference/interfaces/AngularQueuer)
+- [AngularQueuerOptions](/pacer/framework/angular/reference/interfaces/AngularQueuerOptions)
+- [AngularRateLimiter](/pacer/framework/angular/reference/interfaces/AngularRateLimiter)
+- [AngularRateLimiterOptions](/pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions)
+- [AngularThrottler](/pacer/framework/angular/reference/interfaces/AngularThrottler)
+- [AngularThrottlerOptions](/pacer/framework/angular/reference/interfaces/AngularThrottlerOptions)
+- [AsyncQueuedSignal](/pacer/framework/angular/reference/interfaces/AsyncQueuedSignal)
+- [DebouncedSignal](/pacer/framework/angular/reference/interfaces/DebouncedSignal)
+- [QueuedSignal](/pacer/framework/angular/reference/interfaces/QueuedSignal)
+- [RateLimitedSignal](/pacer/framework/angular/reference/interfaces/RateLimitedSignal)
+- [ThrottledSignal](/pacer/framework/angular/reference/interfaces/ThrottledSignal)
+
+## Functions
+
+- [injectAsyncBatchedCallback](/pacer/framework/angular/reference/functions/injectAsyncBatchedCallback)
+- [injectAsyncBatcher](/pacer/framework/angular/reference/functions/injectAsyncBatcher)
+- [injectAsyncDebouncedCallback](/pacer/framework/angular/reference/functions/injectAsyncDebouncedCallback)
+- [injectAsyncDebouncer](/pacer/framework/angular/reference/functions/injectAsyncDebouncer)
+- [injectAsyncQueuedSignal](/pacer/framework/angular/reference/functions/injectAsyncQueuedSignal)
+- [injectAsyncQueuer](/pacer/framework/angular/reference/functions/injectAsyncQueuer)
+- [injectAsyncRateLimitedCallback](/pacer/framework/angular/reference/functions/injectAsyncRateLimitedCallback)
+- [injectAsyncRateLimiter](/pacer/framework/angular/reference/functions/injectAsyncRateLimiter)
+- [injectAsyncThrottledCallback](/pacer/framework/angular/reference/functions/injectAsyncThrottledCallback)
+- [injectAsyncThrottler](/pacer/framework/angular/reference/functions/injectAsyncThrottler)
+- [injectBatchedCallback](/pacer/framework/angular/reference/functions/injectBatchedCallback)
+- [injectBatcher](/pacer/framework/angular/reference/functions/injectBatcher)
+- [injectDebouncedCallback](/pacer/framework/angular/reference/functions/injectDebouncedCallback)
+- [injectDebouncedSignal](/pacer/framework/angular/reference/functions/injectDebouncedSignal)
+- [injectDebouncedValue](/pacer/framework/angular/reference/functions/injectDebouncedValue)
+- [injectDebouncer](/pacer/framework/angular/reference/functions/injectDebouncer)
+- [injectQueuedSignal](/pacer/framework/angular/reference/functions/injectQueuedSignal)
+- [injectQueuedValue](/pacer/framework/angular/reference/functions/injectQueuedValue)
+- [injectQueuer](/pacer/framework/angular/reference/functions/injectQueuer)
+- [injectRateLimitedCallback](/pacer/framework/angular/reference/functions/injectRateLimitedCallback)
+- [injectRateLimitedSignal](/pacer/framework/angular/reference/functions/injectRateLimitedSignal)
+- [injectRateLimitedValue](/pacer/framework/angular/reference/functions/injectRateLimitedValue)
+- [injectRateLimiter](/pacer/framework/angular/reference/functions/injectRateLimiter)
+- [injectThrottledCallback](/pacer/framework/angular/reference/functions/injectThrottledCallback)
+- [injectThrottledSignal](/pacer/framework/angular/reference/functions/injectThrottledSignal)
+- [injectThrottledValue](/pacer/framework/angular/reference/functions/injectThrottledValue)
+- [injectThrottler](/pacer/framework/angular/reference/functions/injectThrottler)
+- [providePacerOptions](/pacer/framework/angular/reference/functions/providePacerOptions)
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher.md
new file mode 100644
index 000000000..a4baf678d
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher.md
@@ -0,0 +1,52 @@
+---
+id: AngularAsyncBatcher
+title: AngularAsyncBatcher
+---
+
+# Interface: AngularAsyncBatcher\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:24](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncBatcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L33)
+
+Reactive state signal that will be updated when the async batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncBatcherState<TValue>>>;
+```
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L38)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions.md
new file mode 100644
index 000000000..94aede7fe
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncBatcherOptions.md
@@ -0,0 +1,47 @@
+---
+id: AngularAsyncBatcherOptions
+title: AngularAsyncBatcherOptions
+---
+
+# Interface: AngularAsyncBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L12)
+
+## Extends
+
+- `AsyncBatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [angular-pacer/src/async-batcher/injectAsyncBatcher.ts:21](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-batcher/injectAsyncBatcher.ts#L21)
+
+Optional callback invoked when the component is destroyed. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+#### Parameters
+
+##### batcher
+
+[`AngularAsyncBatcher`](/pacer/framework/angular/reference/interfaces/AngularAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer.md
new file mode 100644
index 000000000..b35f1bd72
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer.md
@@ -0,0 +1,52 @@
+---
+id: AngularAsyncDebouncer
+title: AngularAsyncDebouncer
+---
+
+# Interface: AngularAsyncDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:25](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L25)
+
+## Extends
+
+- `Omit`\&lt;`AsyncDebouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:34](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L34)
+
+Reactive state signal that will be updated when the async debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
+```
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:39](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L39)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions.md
new file mode 100644
index 000000000..6cdb4945f
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncerOptions.md
@@ -0,0 +1,47 @@
+---
+id: AngularAsyncDebouncerOptions
+title: AngularAsyncDebouncerOptions
+---
+
+# Interface: AngularAsyncDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L13)
+
+## Extends
+
+- `AsyncDebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:22](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts#L22)
+
+Optional callback invoked when the component is destroyed. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+#### Parameters
+
+##### debouncer
+
+[`AngularAsyncDebouncer`](/pacer/framework/angular/reference/interfaces/AngularAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer.md
new file mode 100644
index 000000000..afce91c79
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer.md
@@ -0,0 +1,52 @@
+---
+id: AngularAsyncQueuer
+title: AngularAsyncQueuer
+---
+
+# Interface: AngularAsyncQueuer\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncQueuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L33)
+
+Reactive state signal that will be updated when the async queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L38)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions.md
new file mode 100644
index 000000000..3e3a4bc55
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncQueuerOptions.md
@@ -0,0 +1,47 @@
+---
+id: AngularAsyncQueuerOptions
+title: AngularAsyncQueuerOptions
+---
+
+# Interface: AngularAsyncQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L12)
+
+## Extends
+
+- `AsyncQueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuer.ts#L21)
+
+Optional callback invoked when the component is destroyed. Receives the queuer instance.
+When provided, replaces the default cleanup (stop + abort); use it to call flush(), stop(), add logging, etc.
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+#### Parameters
+
+##### queuer
+
+[`AngularAsyncQueuer`](/pacer/framework/angular/reference/interfaces/AngularAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter.md
new file mode 100644
index 000000000..8a9f654a5
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter.md
@@ -0,0 +1,52 @@
+---
+id: AngularAsyncRateLimiter
+title: AngularAsyncRateLimiter
+---
+
+# Interface: AngularAsyncRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncRateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L33)
+
+Reactive state signal that will be updated when the async rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+```
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L38)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions.md
new file mode 100644
index 000000000..f9e6751f6
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: AngularAsyncRateLimiterOptions
+title: AngularAsyncRateLimiterOptions
+---
+
+# Interface: AngularAsyncRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L13)
+
+## Extends
+
+- `AsyncRateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-rate-limiter/injectAsyncRateLimiter.ts#L21)
+
+Optional callback invoked when the component is destroyed. Receives the rate limiter instance.
+When provided, replaces the default cleanup (abort).
+
+#### Parameters
+
+##### rateLimiter
+
+[`AngularAsyncRateLimiter`](/pacer/framework/angular/reference/interfaces/AngularAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler.md
new file mode 100644
index 000000000..c0d470851
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler.md
@@ -0,0 +1,52 @@
+---
+id: AngularAsyncThrottler
+title: AngularAsyncThrottler
+---
+
+# Interface: AngularAsyncThrottler\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:25](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L25)
+
+## Extends
+
+- `Omit`\&lt;`AsyncThrottler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:34](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L34)
+
+Reactive state signal that will be updated when the async throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+```
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:39](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L39)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions.md
new file mode 100644
index 000000000..805791bde
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularAsyncThrottlerOptions.md
@@ -0,0 +1,47 @@
+---
+id: AngularAsyncThrottlerOptions
+title: AngularAsyncThrottlerOptions
+---
+
+# Interface: AngularAsyncThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L13)
+
+## Extends
+
+- `AsyncThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [angular-pacer/src/async-throttler/injectAsyncThrottler.ts:22](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-throttler/injectAsyncThrottler.ts#L22)
+
+Optional callback invoked when the component is destroyed. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), cancel(), add logging, etc.
+When using onUnmount with flush, guard your callbacks since the component may already be destroyed.
+
+#### Parameters
+
+##### throttler
+
+[`AngularAsyncThrottler`](/pacer/framework/angular/reference/interfaces/AngularAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcher.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcher.md
new file mode 100644
index 000000000..ea79ee2d8
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcher.md
@@ -0,0 +1,52 @@
+---
+id: AngularBatcher
+title: AngularBatcher
+---
+
+# Interface: AngularBatcher\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Batcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:29](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L29)
+
+Reactive state signal that will be updated when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<BatcherState<TValue>>>;
+```
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:34](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L34)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcherOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcherOptions.md
new file mode 100644
index 000000000..3442b54c6
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: AngularBatcherOptions
+title: AngularBatcherOptions
+---
+
+# Interface: AngularBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:9](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L9)
+
+## Extends
+
+- `BatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [angular-pacer/src/batcher/injectBatcher.ts:17](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/batcher/injectBatcher.ts#L17)
+
+Optional callback invoked when the component is destroyed. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`AngularBatcher`](/pacer/framework/angular/reference/interfaces/AngularBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncer.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncer.md
new file mode 100644
index 000000000..c133ab6a7
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncer.md
@@ -0,0 +1,52 @@
+---
+id: AngularDebouncer
+title: AngularDebouncer
+---
+
+# Interface: AngularDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Debouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L33)
+
+Reactive state signal that will be updated when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<DebouncerState<TFn>>>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L38)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncerOptions.md
new file mode 100644
index 000000000..75264ecc4
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: AngularDebouncerOptions
+title: AngularDebouncerOptions
+---
+
+# Interface: AngularDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L13)
+
+## Extends
+
+- `DebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncer.ts#L21)
+
+Optional callback invoked when the component is destroyed. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`AngularDebouncer`](/pacer/framework/angular/reference/interfaces/AngularDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuer.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuer.md
new file mode 100644
index 000000000..b6eda68ae
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuer.md
@@ -0,0 +1,52 @@
+---
+id: AngularQueuer
+title: AngularQueuer
+---
+
+# Interface: AngularQueuer\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Queuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:29](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L29)
+
+Reactive state signal that will be updated when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<QueuerState<TValue>>>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:34](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L34)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuerOptions.md
new file mode 100644
index 000000000..262bc84d1
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: AngularQueuerOptions
+title: AngularQueuerOptions
+---
+
+# Interface: AngularQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L9)
+
+## Extends
+
+- `QueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuer.ts#L17)
+
+Optional callback invoked when the component is destroyed. Receives the queuer instance.
+When provided, replaces the default cleanup (stop); use it to call flush(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`AngularQueuer`](/pacer/framework/angular/reference/interfaces/AngularQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiter.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiter.md
new file mode 100644
index 000000000..00a08bcae
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiter.md
@@ -0,0 +1,52 @@
+---
+id: AngularRateLimiter
+title: AngularRateLimiter
+---
+
+# Interface: AngularRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:23](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`RateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:32](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L32)
+
+Reactive state signal that will be updated when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<RateLimiterState>>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:37](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L37)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions.md
new file mode 100644
index 000000000..336389a81
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularRateLimiterOptions.md
@@ -0,0 +1,45 @@
+---
+id: AngularRateLimiterOptions
+title: AngularRateLimiterOptions
+---
+
+# Interface: AngularRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L13)
+
+## Extends
+
+- `RateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimiter.ts:20](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimiter.ts#L20)
+
+Optional callback invoked when the component is destroyed. Receives the rate limiter instance.
+
+#### Parameters
+
+##### rateLimiter
+
+[`AngularRateLimiter`](/pacer/framework/angular/reference/interfaces/AngularRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottler.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottler.md
new file mode 100644
index 000000000..ce4b52ffb
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottler.md
@@ -0,0 +1,52 @@
+---
+id: AngularThrottler
+title: AngularThrottler
+---
+
+# Interface: AngularThrottler\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Throttler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Signal<Readonly<TSelected>>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:33](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L33)
+
+Reactive state signal that will be updated when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:38](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L38)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive in Angular signals.
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottlerOptions.md b/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottlerOptions.md
new file mode 100644
index 000000000..79c2d77af
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AngularThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: AngularThrottlerOptions
+title: AngularThrottlerOptions
+---
+
+# Interface: AngularThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L13)
+
+## Extends
+
+- `ThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottler.ts#L21)
+
+Optional callback invoked when the component is destroyed. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`AngularThrottler`](/pacer/framework/angular/reference/interfaces/AngularThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/AsyncQueuedSignal.md b/mintlify/pacer/framework/angular/reference/interfaces/AsyncQueuedSignal.md
new file mode 100644
index 000000000..335d776ba
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/AsyncQueuedSignal.md
@@ -0,0 +1,77 @@
+---
+id: AsyncQueuedSignal
+title: AsyncQueuedSignal
+---
+
+# Interface: AsyncQueuedSignal()\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:9](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L9)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+```ts
+AsyncQueuedSignal(): TValue[];
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:10](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L10)
+
+## Returns
+
+`TValue`[]
+
+## Properties
+
+### addItem()
+
+```ts
+addItem: (item, position?, runOnItemsChange?) => boolean;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:11](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L11)
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### position?
+
+`QueuePosition`
+
+##### runOnItemsChange?
+
+`boolean`
+
+#### Returns
+
+`boolean`
+
+#### Example
+
+```ts
+queuer.addItem({ value: 'task', priority: 10 });
+queuer.addItem('task2', 'front');
+```
+
+***
+
+### queuer
+
+```ts
+queuer: AngularAsyncQueuer<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/async-queuer/injectAsyncQueuedSignal.ts#L12)
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/DebouncedSignal.md b/mintlify/pacer/framework/angular/reference/interfaces/DebouncedSignal.md
new file mode 100644
index 000000000..131c799aa
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/DebouncedSignal.md
@@ -0,0 +1,49 @@
+---
+id: DebouncedSignal
+title: DebouncedSignal
+---
+
+# Interface: DebouncedSignal()\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedSignal.ts:11](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedSignal.ts#L11)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+```ts
+DebouncedSignal(): TValue;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedSignal.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedSignal.ts#L12)
+
+## Returns
+
+`TValue`
+
+## Properties
+
+### debouncer
+
+```ts
+debouncer: AngularDebouncer<Setter<TValue>, TSelected>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedSignal.ts:14](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedSignal.ts#L14)
+
+***
+
+### set
+
+```ts
+set: Setter<TValue>;
+```
+
+Defined in: [angular-pacer/src/debouncer/injectDebouncedSignal.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/debouncer/injectDebouncedSignal.ts#L13)
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/QueuedSignal.md b/mintlify/pacer/framework/angular/reference/interfaces/QueuedSignal.md
new file mode 100644
index 000000000..d2db810e9
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/QueuedSignal.md
@@ -0,0 +1,78 @@
+---
+id: QueuedSignal
+title: QueuedSignal
+---
+
+# Interface: QueuedSignal()\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:6](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L6)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+```ts
+QueuedSignal(): TValue[];
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:7](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L7)
+
+## Returns
+
+`TValue`[]
+
+## Properties
+
+### addItem()
+
+```ts
+addItem: (item, position?, runOnItemsChange?) => boolean;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:8](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L8)
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+Returns true if the item was added, false if the queue is full.
+
+Example usage:
+```ts
+queuer.addItem('task');
+queuer.addItem('task2', 'front');
+```
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### position?
+
+`QueuePosition`
+
+##### runOnItemsChange?
+
+`boolean`
+
+#### Returns
+
+`boolean`
+
+***
+
+### queuer
+
+```ts
+queuer: AngularQueuer<TValue, TSelected>;
+```
+
+Defined in: [angular-pacer/src/queuer/injectQueuedSignal.ts:9](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/queuer/injectQueuedSignal.ts#L9)
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/RateLimitedSignal.md b/mintlify/pacer/framework/angular/reference/interfaces/RateLimitedSignal.md
new file mode 100644
index 000000000..a6955bd55
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/RateLimitedSignal.md
@@ -0,0 +1,49 @@
+---
+id: RateLimitedSignal
+title: RateLimitedSignal
+---
+
+# Interface: RateLimitedSignal()\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts:11](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts#L11)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+```ts
+RateLimitedSignal(): TValue;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts#L12)
+
+## Returns
+
+`TValue`
+
+## Properties
+
+### rateLimiter
+
+```ts
+rateLimiter: AngularRateLimiter<Setter<TValue>, TSelected>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts:14](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts#L14)
+
+***
+
+### set
+
+```ts
+set: Setter<TValue>;
+```
+
+Defined in: [angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/rate-limiter/injectRateLimitedSignal.ts#L13)
diff --git a/mintlify/pacer/framework/angular/reference/interfaces/ThrottledSignal.md b/mintlify/pacer/framework/angular/reference/interfaces/ThrottledSignal.md
new file mode 100644
index 000000000..5618a5743
--- /dev/null
+++ b/mintlify/pacer/framework/angular/reference/interfaces/ThrottledSignal.md
@@ -0,0 +1,49 @@
+---
+id: ThrottledSignal
+title: ThrottledSignal
+---
+
+# Interface: ThrottledSignal()\&lt;TValue, TSelected\>
+
+Defined in: [angular-pacer/src/throttler/injectThrottledSignal.ts:11](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledSignal.ts#L11)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+```ts
+ThrottledSignal(): TValue;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledSignal.ts:12](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledSignal.ts#L12)
+
+## Returns
+
+`TValue`
+
+## Properties
+
+### set
+
+```ts
+set: Setter<TValue>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledSignal.ts:13](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledSignal.ts#L13)
+
+***
+
+### throttler
+
+```ts
+throttler: AngularThrottler<Setter<TValue>, TSelected>;
+```
+
+Defined in: [angular-pacer/src/throttler/injectThrottledSignal.ts:14](https://github.com/TanStack/pacer/blob/main/packages/angular-pacer/src/throttler/injectThrottledSignal.ts#L14)
diff --git a/mintlify/pacer/framework/preact/adapter.md b/mintlify/pacer/framework/preact/adapter.md
new file mode 100644
index 000000000..1f262e602
--- /dev/null
+++ b/mintlify/pacer/framework/preact/adapter.md
@@ -0,0 +1,282 @@
+---
+title: TanStack Pacer Preact Adapter
+id: adapter
+---
+
+If you are using TanStack Pacer in a Preact application, we recommend using the Preact Adapter. The Preact Adapter provides a set of easy-to-use hooks on top of the core Pacer utilities. If you find yourself wanting to use the core Pacer classes/functions directly, the Preact Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/preact-pacer
+```
+
+## Preact Hooks
+
+See the [Preact Functions Reference](/pacer/framework/preact/reference/index) to see the full list of hooks available in the Preact Adapter.
+
+## Basic Usage
+
+Import a preact specific hook from the Preact Adapter.
+
+```tsx
+import { useDebouncedValue } from '@tanstack/preact-pacer'
+import { useState } from 'preact/hooks'
+
+const [instantValue, setInstantValue] = useState(0)
+const [debouncedValue, debouncer] = useDebouncedValue(instantValue, {
+  wait: 1000,
+})
+```
+
+Or import a core Pacer class/function that is re-exported from the Preact Adapter.
+
+```tsx
+import { debounce, Debouncer } from '@tanstack/preact-pacer' // no need to install the core package separately
+```
+
+## Option Helpers
+
+If you want a type-safe way to define common options for pacer utilities, TanStack Pacer provides option helpers for each utility. These helpers can be used with Preact hooks.
+
+### Debouncer Options
+
+```tsx
+import { useDebouncer } from '@tanstack/preact-pacer'
+import { debouncerOptions } from '@tanstack/pacer'
+
+const commonDebouncerOptions = debouncerOptions({
+  wait: 1000,
+  leading: false,
+  trailing: true,
+})
+
+const debouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { ...commonDebouncerOptions, key: 'searchDebouncer' }
+)
+```
+
+### Queuer Options
+
+```tsx
+import { useQueuer } from '@tanstack/preact-pacer'
+import { queuerOptions } from '@tanstack/pacer'
+
+const commonQueuerOptions = queuerOptions({
+  concurrency: 3,
+  addItemsTo: 'back',
+})
+
+const queuer = useQueuer(
+  (item: string) => processItem(item),
+  { ...commonQueuerOptions, key: 'itemQueuer' }
+)
+```
+
+### Rate Limiter Options
+
+```tsx
+import { useRateLimiter } from '@tanstack/preact-pacer'
+import { rateLimiterOptions } from '@tanstack/pacer'
+
+const commonRateLimiterOptions = rateLimiterOptions({
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+})
+
+const rateLimiter = useRateLimiter(
+  (data: string) => sendApiRequest(data),
+  { ...commonRateLimiterOptions, key: 'apiRateLimiter' }
+)
+```
+
+## Provider
+
+The Preact Adapter provides a `PacerProvider` component that you can use to provide default options to all instances of pacer utilities within your component tree.
+
+```tsx
+import { PacerProvider } from '@tanstack/preact-pacer'
+
+// Set default options for preact-pacer instances
+<PacerProvider
+  defaultOptions={{
+    debouncer: { wait: 1000 },
+    queuer: { concurrency: 3 },
+    rateLimiter: { limit: 5, window: 60000 },
+  }}
+>
+  <App />
+</PacerProvider>
+```
+
+All hooks within the provider will automatically use these default options, which can be overridden on a per-hook basis.
+
+## Subscribing to State
+
+The Preact Adapter supports subscribing to state changes in two ways:
+
+### Using the Subscribe Component
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+import { useRateLimiter } from '@tanstack/preact-pacer'
+
+function ApiComponent() {
+  const rateLimiter = useRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    { limit: 5, window: 60000 }
+  )
+
+  return (
+    <div>
+      <button onClick={() => rateLimiter.maybeExecute('some data')}>
+        Submit
+      </button>
+      
+      <rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+        {({ rejectionCount }) => (
+          <div>Rejections: {rejectionCount}</div>
+        )}
+      </rateLimiter.Subscribe>
+    </div>
+  )
+}
+```
+
+### Using the Selector Parameter
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `hook.state` is empty (`{}`) as the selector is empty by default.** You must opt-in to state tracking by providing a selector function.
+
+```tsx
+import { useDebouncer } from '@tanstack/preact-pacer'
+
+function SearchComponent() {
+  // Default behavior - no reactive state subscriptions
+  const debouncer = useDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 }
+  )
+  console.log(debouncer.state) // {}
+
+  // Opt-in to track isPending changes
+  const debouncer = useDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 },
+    (state) => ({ isPending: state.isPending })
+  )
+  console.log(debouncer.state.isPending) // Reactive value
+
+  return (
+    <input
+      onChange={(e) => debouncer.maybeExecute(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+For more details on state management and available state properties, see the individual guide pages for each utility (e.g., [Rate Limiting Guide](/pacer/guides/rate-limiting), [Debouncing Guide](/pacer/guides/debouncing)).
+
+## Examples
+
+### Debouncer Example
+
+```tsx
+import { useDebouncer } from '@tanstack/preact-pacer'
+
+function SearchComponent() {
+  const debouncer = useDebouncer(
+    (query: string) => {
+      console.log('Searching for:', query)
+      // Perform search
+    },
+    { wait: 500 }
+  )
+
+  return (
+    <input
+      onChange={(e) => debouncer.maybeExecute(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+### Queuer Example
+
+```tsx
+import { useQueuer } from '@tanstack/preact-pacer'
+
+function UploadComponent() {
+  const queuer = useQueuer(
+    async (file: File) => {
+      await uploadFile(file)
+    },
+    { concurrency: 3 }
+  )
+
+  const handleFileSelect = (files: FileList) => {
+    Array.from(files).forEach((file) => {
+      queuer.addItem(file)
+    })
+  }
+
+  return (
+    <input
+      type="file"
+      multiple
+      onChange={(e) => {
+        if (e.target.files) {
+          handleFileSelect(e.target.files)
+        }
+      }}
+    />
+  )
+}
+```
+
+### Rate Limiter Example
+
+```tsx
+import { useRateLimiter } from '@tanstack/preact-pacer'
+
+function ApiComponent() {
+  const rateLimiter = useRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    {
+      limit: 5,
+      window: 60000,
+      windowType: 'sliding',
+      onReject: () => {
+        alert('Rate limit reached. Please try again later.')
+      },
+    }
+  )
+
+  const handleSubmit = () => {
+    const remaining = rateLimiter.getRemainingInWindow()
+    if (remaining > 0) {
+      rateLimiter.maybeExecute('some data')
+    }
+  }
+
+  return <button onClick={handleSubmit}>Submit</button>
+}
+```
+
+
diff --git a/mintlify/pacer/framework/preact/examples/asyncBatch.md b/mintlify/pacer/framework/preact/examples/asyncBatch.md
new file mode 100644
index 000000000..58384ac0f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/asyncBatch.md
@@ -0,0 +1,12 @@
+---
+title: "asyncBatch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/asyncBatch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/asyncBatch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/asyncDebounce.md b/mintlify/pacer/framework/preact/examples/asyncDebounce.md
new file mode 100644
index 000000000..0ac943988
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/asyncDebounce.md
@@ -0,0 +1,12 @@
+---
+title: "asyncDebounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/asyncDebounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/asyncDebounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/asyncRateLimit.md b/mintlify/pacer/framework/preact/examples/asyncRateLimit.md
new file mode 100644
index 000000000..37b10e919
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/asyncRateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "asyncRateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/asyncRateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/asyncRateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/asyncThrottle.md b/mintlify/pacer/framework/preact/examples/asyncThrottle.md
new file mode 100644
index 000000000..4c5d20f52
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/asyncThrottle.md
@@ -0,0 +1,12 @@
+---
+title: "asyncThrottle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/asyncThrottle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/asyncThrottle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/batch.md b/mintlify/pacer/framework/preact/examples/batch.md
new file mode 100644
index 000000000..b02544b80
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/batch.md
@@ -0,0 +1,12 @@
+---
+title: "batch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/batch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/batch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/debounce.md b/mintlify/pacer/framework/preact/examples/debounce.md
new file mode 100644
index 000000000..a6609c0cb
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/debounce.md
@@ -0,0 +1,12 @@
+---
+title: "debounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/debounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/debounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/queue.md b/mintlify/pacer/framework/preact/examples/queue.md
new file mode 100644
index 000000000..57c34ef21
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/queue.md
@@ -0,0 +1,12 @@
+---
+title: "queue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/queue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/queue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/rateLimit.md b/mintlify/pacer/framework/preact/examples/rateLimit.md
new file mode 100644
index 000000000..2651c5fd3
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/rateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "rateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/rateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/rateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/throttle.md b/mintlify/pacer/framework/preact/examples/throttle.md
new file mode 100644
index 000000000..bce66be8c
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/throttle.md
@@ -0,0 +1,12 @@
+---
+title: "throttle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/throttle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/throttle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncBatchedCallback.md b/mintlify/pacer/framework/preact/examples/useAsyncBatchedCallback.md
new file mode 100644
index 000000000..542772a4d
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncBatcher.md b/mintlify/pacer/framework/preact/examples/useAsyncBatcher.md
new file mode 100644
index 000000000..a0765c23f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncDebouncedCallback.md b/mintlify/pacer/framework/preact/examples/useAsyncDebouncedCallback.md
new file mode 100644
index 000000000..de6c668d1
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncDebouncer.md b/mintlify/pacer/framework/preact/examples/useAsyncDebouncer.md
new file mode 100644
index 000000000..215d54f88
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncQueuedState.md b/mintlify/pacer/framework/preact/examples/useAsyncQueuedState.md
new file mode 100644
index 000000000..85971f558
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncQueuedState.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncQueuedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncQueuedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncQueuedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncQueuer.md b/mintlify/pacer/framework/preact/examples/useAsyncQueuer.md
new file mode 100644
index 000000000..af8021730
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncRateLimiter.md b/mintlify/pacer/framework/preact/examples/useAsyncRateLimiter.md
new file mode 100644
index 000000000..690f6c3b9
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncRateLimiterWithPersister.md b/mintlify/pacer/framework/preact/examples/useAsyncRateLimiterWithPersister.md
new file mode 100644
index 000000000..9cfcc7ac5
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncThrottledCallback.md b/mintlify/pacer/framework/preact/examples/useAsyncThrottledCallback.md
new file mode 100644
index 000000000..9d12b1151
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncThrottledCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncThrottledCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncThrottledCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncThrottledCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useAsyncThrottler.md b/mintlify/pacer/framework/preact/examples/useAsyncThrottler.md
new file mode 100644
index 000000000..355cbf6e2
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useAsyncThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useAsyncThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useAsyncThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useBatchedCallback.md b/mintlify/pacer/framework/preact/examples/useBatchedCallback.md
new file mode 100644
index 000000000..58863836d
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useBatcher.md b/mintlify/pacer/framework/preact/examples/useBatcher.md
new file mode 100644
index 000000000..1fd83484e
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "useBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useDebouncedCallback.md b/mintlify/pacer/framework/preact/examples/useDebouncedCallback.md
new file mode 100644
index 000000000..95cd69422
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useDebouncedState.md b/mintlify/pacer/framework/preact/examples/useDebouncedState.md
new file mode 100644
index 000000000..b1145175c
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useDebouncedState.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useDebouncedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useDebouncedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useDebouncedValue.md b/mintlify/pacer/framework/preact/examples/useDebouncedValue.md
new file mode 100644
index 000000000..b89e4167c
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useDebouncedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useDebouncedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useDebouncedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useDebouncer.md b/mintlify/pacer/framework/preact/examples/useDebouncer.md
new file mode 100644
index 000000000..ff9153afc
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useQueuedState.md b/mintlify/pacer/framework/preact/examples/useQueuedState.md
new file mode 100644
index 000000000..77671b977
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useQueuedState.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useQueuedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useQueuedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useQueuedValue.md b/mintlify/pacer/framework/preact/examples/useQueuedValue.md
new file mode 100644
index 000000000..ff15902fc
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useQueuedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useQueuedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useQueuedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useQueuer.md b/mintlify/pacer/framework/preact/examples/useQueuer.md
new file mode 100644
index 000000000..110accd5b
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useQueuerWithPersister.md b/mintlify/pacer/framework/preact/examples/useQueuerWithPersister.md
new file mode 100644
index 000000000..2e55d2171
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useQueuerWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuerWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useQueuerWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useQueuerWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useRateLimitedCallback.md b/mintlify/pacer/framework/preact/examples/useRateLimitedCallback.md
new file mode 100644
index 000000000..95aa63ec7
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useRateLimitedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useRateLimitedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useRateLimitedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useRateLimitedState.md b/mintlify/pacer/framework/preact/examples/useRateLimitedState.md
new file mode 100644
index 000000000..4137fe420
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useRateLimitedState.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useRateLimitedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useRateLimitedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useRateLimitedValue.md b/mintlify/pacer/framework/preact/examples/useRateLimitedValue.md
new file mode 100644
index 000000000..c31afd9f7
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useRateLimitedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useRateLimitedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useRateLimitedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useRateLimiter.md b/mintlify/pacer/framework/preact/examples/useRateLimiter.md
new file mode 100644
index 000000000..d262ff004
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useRateLimiterWithPersister.md b/mintlify/pacer/framework/preact/examples/useRateLimiterWithPersister.md
new file mode 100644
index 000000000..16f770dde
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useThrottledCallback.md b/mintlify/pacer/framework/preact/examples/useThrottledCallback.md
new file mode 100644
index 000000000..af1bd934c
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useThrottledCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useThrottledCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useThrottledCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useThrottledState.md b/mintlify/pacer/framework/preact/examples/useThrottledState.md
new file mode 100644
index 000000000..792a85a97
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useThrottledState.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useThrottledState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useThrottledState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useThrottledValue.md b/mintlify/pacer/framework/preact/examples/useThrottledValue.md
new file mode 100644
index 000000000..f1f32fdc7
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useThrottledValue.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useThrottledValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useThrottledValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/examples/useThrottler.md b/mintlify/pacer/framework/preact/examples/useThrottler.md
new file mode 100644
index 000000000..2f0c71ffb
--- /dev/null
+++ b/mintlify/pacer/framework/preact/examples/useThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/preact/examples/useThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/preact/useThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/preact/reference/functions/PacerProvider.md b/mintlify/pacer/framework/preact/reference/functions/PacerProvider.md
new file mode 100644
index 000000000..404100631
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/PacerProvider.md
@@ -0,0 +1,22 @@
+---
+id: PacerProvider
+title: PacerProvider
+---
+
+# Function: PacerProvider()
+
+```ts
+function PacerProvider(__namedParameters): Element;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:45](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L45)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`PacerProviderProps`](/pacer/framework/preact/reference/interfaces/PacerProviderProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncBatchedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncBatchedCallback.md
new file mode 100644
index 000000000..11f49baa3
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncBatchedCallback.md
@@ -0,0 +1,82 @@
+---
+id: useAsyncBatchedCallback
+title: useAsyncBatchedCallback
+---
+
+# Function: useAsyncBatchedCallback()
+
+```ts
+function useAsyncBatchedCallback<TValue>(fn, options): (item) => Promise<void>;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatchedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatchedCallback.ts#L42)
+
+A Preact hook that creates a batched version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncBatcher` hook,
+providing a stable, batched async function reference for use in Preact components.
+
+The batched async function will collect individual calls into batches and execute them
+when batch conditions are met (max size reached, wait time elapsed, or custom logic).
+The returned function always returns a promise that resolves with undefined (since the
+batch function processes multiple items together).
+
+This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic
+async batching needs. However, it does not expose the underlying AsyncBatcher instance.
+
+For advanced usage requiring features like:
+- Manual batch execution
+- Access to batch results and state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncBatcher` hook instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`unknown`\>
+
+### options
+
+[`PreactAsyncBatcherOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions)\&lt;`TValue`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(item): Promise<void>;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`Promise`\&lt;`void`\>
+
+## Example
+
+```tsx
+// Batch API requests
+const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
+  const results = await Promise.all(requests.map(req => fetch(req.url)));
+  return results.map(res => res.json());
+}, {
+  maxSize: 10,   // Process when 10 requests collected
+  wait: 1000     // Or after 1 second
+});
+
+// Use in event handlers
+<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
+  Track Event
+</button>
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncBatcher.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncBatcher.md
new file mode 100644
index 000000000..f6481eff8
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncBatcher.md
@@ -0,0 +1,221 @@
+---
+id: useAsyncBatcher
+title: useAsyncBatcher
+---
+
+# Function: useAsyncBatcher()
+
+```ts
+function useAsyncBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): PreactAsyncBatcher<TValue, TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:235](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L235)
+
+A Preact hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.
+
+This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:
+- Handles promises and returns results from batch executions
+- Provides error handling with configurable error behavior
+- Tracks success, error, and settle counts separately
+- Has state tracking for when batches are executing
+- Returns the result of the batch function execution
+
+Features:
+- Configurable batch size and wait time
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+- Error handling for failed batch operations
+- Automatic or manual batch processing
+
+The batcher collects items and processes them in batches based on:
+- Maximum batch size (number of items per batch)
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and batcher instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncBatcher instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of batch executions that have resulted in errors
+- `failedItems`: Array of items that failed during batch processing
+- `isEmpty`: Whether the batcher has no items to process
+- `isExecuting`: Whether a batch is currently being processed asynchronously
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `isRunning`: Whether the batcher is active and will process items automatically
+- `items`: Array of items currently queued for batch processing
+- `lastResult`: The result from the most recent batch execution
+- `settleCount`: Number of batch executions that have completed (success or error)
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')
+- `successCount`: Number of batch executions that have completed successfully
+- `totalItemsProcessed`: Total number of items processed across all batches
+- `totalItemsFailed`: Total number of items that have failed processing
+
+## Unmount behavior
+
+By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = useAsyncBatcher(fn, {
+  maxSize: 10,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your batch function updates Preact state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`PreactAsyncBatcherOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactAsyncBatcher`](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Basic async batcher for API requests - no reactive state subscriptions
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Batch Size: {size}</div>
+  )}
+</asyncBatcher.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount,
+    totalItemsProcessed: state.totalItemsProcessed
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  {
+    maxSize: 10,
+    wait: 2000,
+    onError: (error) => console.error('Batch processing failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    failedItems: state.failedItems,
+    totalItemsFailed: state.totalItemsFailed
+  })
+);
+
+// Complete example with all callbacks
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  {
+    maxSize: 10,
+    wait: 2000,
+    onSuccess: (result) => {
+      console.log('Batch processed successfully:', result);
+    },
+    onError: (error) => {
+      console.error('Batch processing failed:', error);
+    }
+  }
+);
+
+// Add items to batch
+asyncBatcher.addItem(newItem);
+
+// Manually execute batch
+const result = await asyncBatcher.execute();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult, size } = asyncBatcher.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncedCallback.md
new file mode 100644
index 000000000..2709ed77f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncedCallback.md
@@ -0,0 +1,82 @@
+---
+id: useAsyncDebouncedCallback
+title: useAsyncDebouncedCallback
+---
+
+# Function: useAsyncDebouncedCallback()
+
+```ts
+function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts:44](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts#L44)
+
+A Preact hook that creates a debounced version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncDebouncer` hook,
+providing a stable, debounced async function reference for use in Preact components.
+
+The debounced async function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again. The returned function always returns a promise
+that resolves or rejects with the result of the original async function.
+
+This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
+async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution/error state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncDebouncer` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Debounce an async search handler
+const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
+  const results = await fetchSearchResults(query);
+  return results;
+}, {
+  wait: 500 // Wait 500ms between executions
+});
+
+// Use in an input
+<input
+  type="search"
+  onChange={e => handleSearch(e.target.value)}
+/>
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncer.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncer.md
new file mode 100644
index 000000000..8f6170a39
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncDebouncer.md
@@ -0,0 +1,199 @@
+---
+id: useAsyncDebouncer
+title: useAsyncDebouncer
+---
+
+# Function: useAsyncDebouncer()
+
+```ts
+function useAsyncDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactAsyncDebouncer<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:214](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L214)
+
+A low-level Preact hook that creates an `AsyncDebouncer` instance to delay execution of an async function.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.
+Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing
+or input changes where you only want to execute the handler after the events have stopped occurring.
+
+Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until
+the function stops being called for the specified delay period.
+
+Unlike the non-async Debouncer, this async version supports returning values from the debounced function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the debounced function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and debouncer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncDebouncer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the debounced function is currently executing asynchronously
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastResult`: The result from the most recent successful function execution
+- `settleCount`: Number of function executions that have completed (success or error)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = useAsyncDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your debounced function updates Preact state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactAsyncDebouncer`](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Searching...' : 'Ready'}</div>
+  )}
+</searchDebouncer.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  {
+    wait: 500,
+    onError: (error) => console.error('Search failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    status: state.status
+  })
+);
+
+// With state management
+const [results, setResults] = useState([]);
+const { maybeExecute, state } = useAsyncDebouncer(
+  async (searchTerm) => {
+    const data = await searchAPI(searchTerm);
+    setResults(data);
+  },
+  {
+    wait: 300,
+    leading: true,   // Execute immediately on first call
+    trailing: false, // Skip trailing edge updates
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult } = state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuedState.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuedState.md
new file mode 100644
index 000000000..738709369
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuedState.md
@@ -0,0 +1,186 @@
+---
+id: useAsyncQueuedState
+title: useAsyncQueuedState
+---
+
+# Function: useAsyncQueuedState()
+
+```ts
+function useAsyncQueuedState<TValue, TSelected>(
+   fn, 
+   options, 
+   selector?): [TValue[], PreactAsyncQueuer<TValue, TSelected>];
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuedState.ts:151](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuedState.ts#L151)
+
+A higher-level Preact hook that creates an `AsyncQueuer` instance with built-in state management.
+
+This hook combines an AsyncQueuer with Preact state to automatically track the queue items.
+It returns a tuple containing:
+- The current array of queued items as Preact state
+- The queuer instance with methods to control the queue
+
+The queue can be configured with:
+- Maximum concurrent operations
+- Maximum queue size
+- Processing function for queue items
+- Various lifecycle callbacks
+
+The state will automatically update whenever items are:
+- Added to the queue
+- Removed from the queue
+- Started processing
+- Completed processing
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying async queuer instance.
+The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available async queuer state properties:
+- `activeItems`: Items currently being processed by the queuer
+- `errorCount`: Number of task executions that have resulted in errors
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `lastResult`: The result from the most recent task execution
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `settledCount`: Number of task executions that have completed (success or error)
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+- `successCount`: Number of task executions that have completed successfully
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`PreactAsyncQueuerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`[], [`PreactAsyncQueuer`](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  {
+    concurrency: 2,
+    maxSize: 100,
+    started: true
+  }
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue items)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    items: state.items,
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    activeItems: state.activeItems,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settledCount: state.settledCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Add items to queue - state updates automatically
+asyncQueuer.addItem(async () => {
+  const result = await fetchData();
+  return result;
+});
+
+// Start processing
+asyncQueuer.start();
+
+// Stop processing
+asyncQueuer.stop();
+
+// queueItems reflects current queue state
+const pendingCount = asyncQueuer.peekPendingItems().length;
+
+// Access the selected async queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, activeItems } = asyncQueuer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuer.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuer.md
new file mode 100644
index 000000000..095b54ffa
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncQueuer.md
@@ -0,0 +1,221 @@
+---
+id: useAsyncQueuer
+title: useAsyncQueuer
+---
+
+# Function: useAsyncQueuer()
+
+```ts
+function useAsyncQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): PreactAsyncQueuer<TValue, TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:235](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L235)
+
+A lower-level Preact hook that creates an `AsyncQueuer` instance for managing an async queue of items.
+
+Features:
+- Priority queue support via getPriority option
+- Configurable concurrency limit
+- Task success/error/completion callbacks
+- FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+- Pause/resume task processing
+- Task cancellation
+- Item expiration to clear stale items from the queue
+
+Tasks are processed concurrently up to the configured concurrency limit. When a task completes,
+the next pending task is processed if below the concurrency limit.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and queuer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncQueuer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `activeItems`: Items currently being processed by the queuer
+- `errorCount`: Number of task executions that have resulted in errors
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `lastResult`: The result from the most recent task execution
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `settledCount`: Number of task executions that have completed (success or error)
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+- `successCount`: Number of task executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook stops the queuer and aborts any in-flight task executions when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queuer = useAsyncQueuer(fn, {
+  concurrency: 2,
+  started: false,
+  onUnmount: (q) => q.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your task function updates Preact state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`PreactAsyncQueuerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactAsyncQueuer`](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncQueuer.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Queue Size: {size}</div>
+  )}
+</asyncQueuer.Subscribe>
+
+// Opt-in to re-render when queue size changes at hook level (optimized for displaying queue length)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    activeItems: state.activeItems,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settledCount: state.settledCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  {
+    concurrency: 2,
+    maxSize: 100,
+    started: false,
+    onSuccess: (result) => {
+      console.log('Item processed:', result);
+    },
+    onError: (error) => {
+      console.error('Processing failed:', error);
+    }
+  },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Add items to queue
+asyncQueuer.addItem(newItem);
+
+// Start processing
+asyncQueuer.start();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isRunning, activeItems } = asyncQueuer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimitedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimitedCallback.md
new file mode 100644
index 000000000..25a382fd3
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimitedCallback.md
@@ -0,0 +1,97 @@
+---
+id: useAsyncRateLimitedCallback
+title: useAsyncRateLimitedCallback
+---
+
+# Function: useAsyncRateLimitedCallback()
+
+```ts
+function useAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimitedCallback.ts:59](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimitedCallback.ts#L59)
+
+A Preact hook that creates a rate-limited version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncRateLimiter` hook,
+providing a stable, async rate-limited function reference for use in Preact components.
+
+Async rate limiting is a "hard limit" approach for async functions: it allows all calls
+until the limit is reached, then blocks (rejects) subsequent calls until the window resets.
+Unlike throttling or debouncing, it does not attempt to space out or collapse calls.
+This can lead to bursts of rapid executions followed by periods where all calls are blocked.
+
+The async rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns, consider:
+- useAsyncThrottledCallback: When you want consistent spacing between executions (e.g. UI updates)
+- useAsyncDebouncedCallback: When you want to collapse rapid calls into a single execution (e.g. search input)
+
+Async rate limiting should primarily be used when you need to enforce strict limits
+on async operations, like API rate limits or other scenarios requiring hard caps
+on execution frequency.
+
+This hook provides a simpler API compared to `useAsyncRateLimiter`, making it ideal for basic
+async rate limiting needs. However, it does not expose the underlying AsyncRateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useAsyncRateLimiter` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Rate limit async API calls to maximum 5 calls per minute with a sliding window
+const makeApiCall = useAsyncRateLimitedCallback(
+  async (data: ApiData) => {
+    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+  },
+  {
+    limit: 5,
+    window: 60000, // 1 minute
+    windowType: 'sliding',
+    onReject: () => {
+      console.warn('API rate limit reached. Please wait before trying again.');
+    }
+  }
+);
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimiter.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimiter.md
new file mode 100644
index 000000000..f32edd4f4
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncRateLimiter.md
@@ -0,0 +1,216 @@
+---
+id: useAsyncRateLimiter
+title: useAsyncRateLimiter
+---
+
+# Function: useAsyncRateLimiter()
+
+```ts
+function useAsyncRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactAsyncRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:231](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L231)
+
+A low-level Preact hook that creates an `AsyncRateLimiter` instance to limit how many times an async function can execute within a time window.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Rate limiting allows an async function to execute up to a specified limit within a time window,
+then blocks subsequent calls until the window passes. This is useful for respecting API rate limits,
+managing resource constraints, or controlling bursts of async operations.
+
+Unlike the non-async RateLimiter, this async version supports returning values from the rate-limited function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the rate-limited function.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and rate limiter instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncRateLimiter instance
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of function executions that have resulted in errors
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `isExecuting`: Whether the rate-limited function is currently executing asynchronously
+- `lastResult`: The result from the most recent successful function execution
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+- `settleCount`: Number of function executions that have completed (success or error)
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactAsyncRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data; // Return value is preserved
+  },
+  { limit: 5, window: 1000 } // 5 calls per second
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejections: {rejectionCount}</div>
+  )}
+</asyncRateLimiter.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ isExecuting: state.isExecuting })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Opt-in to re-render when error/rejection state changes (optimized for error handling)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  {
+    limit: 5,
+    window: 1000,
+    onError: (error) => console.error('API call failed:', error),
+    onReject: (rateLimiter) => console.log('Rate limit exceeded')
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settleCount: state.settleCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With state management and return value
+const [data, setData] = useState(null);
+const { maybeExecute, state } = useAsyncRateLimiter(
+  async (query) => {
+    const result = await searchAPI(query);
+    setData(result);
+    return result; // Return value can be used by the caller
+  },
+  {
+    limit: 10,
+    window: 60000, // 10 calls per minute
+    onReject: (rateLimiter) => {
+      console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+    },
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult, rejectionCount } = state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottledCallback.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottledCallback.md
new file mode 100644
index 000000000..b392bcb3b
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottledCallback.md
@@ -0,0 +1,80 @@
+---
+id: useAsyncThrottledCallback
+title: useAsyncThrottledCallback
+---
+
+# Function: useAsyncThrottledCallback()
+
+```ts
+function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottledCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottledCallback.ts#L42)
+
+A Preact hook that creates a throttled version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncThrottler` hook,
+providing a stable, throttled async function reference for use in Preact components.
+
+The throttled async function will execute at most once within the specified wait time period,
+regardless of how many times it is called. If called multiple times during the wait period,
+only the first invocation will execute, and subsequent calls will be ignored until
+the wait period has elapsed. The returned function always returns a promise
+that resolves or rejects with the result of the original async function.
+
+This hook provides a simpler API compared to `useAsyncThrottler`, making it ideal for basic
+async throttling needs. However, it does not expose the underlying AsyncThrottler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution/error state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncThrottler` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Throttle an async API call
+const handleApiCall = useAsyncThrottledCallback(async (data) => {
+  const result = await sendDataToServer(data);
+  return result;
+}, {
+  wait: 200 // Execute at most once every 200ms
+});
+
+// Use in an event handler
+<button onClick={() => handleApiCall(formData)}>Send</button>
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottler.md b/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottler.md
new file mode 100644
index 000000000..d483f34f2
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useAsyncThrottler.md
@@ -0,0 +1,210 @@
+---
+id: useAsyncThrottler
+title: useAsyncThrottler
+---
+
+# Function: useAsyncThrottler()
+
+```ts
+function useAsyncThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactAsyncThrottler<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:225](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L225)
+
+A low-level Preact hook that creates an `AsyncThrottler` instance to limit how often an async function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Async throttling ensures an async function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting expensive API calls,
+database operations, or other async tasks.
+
+Unlike the non-async Throttler, this async version supports returning values from the throttled function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the throttled function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and throttler instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncThrottler instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the throttled function is currently executing asynchronously
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `lastResult`: The result from the most recent successful function execution
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `settleCount`: Number of function executions that have completed (success or error)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = useAsyncThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your throttled function updates Preact state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactAsyncThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactAsyncThrottler`](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data; // Return value is preserved
+  },
+  { wait: 1000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncThrottler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Processing...' : 'Ready'}</div>
+  )}
+</asyncThrottler.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount,
+    settleCount: state.settleCount
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  {
+    wait: 1000,
+    onError: (error) => console.error('API call failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With state management and return value
+const [data, setData] = useState(null);
+const { maybeExecute, state } = useAsyncThrottler(
+  async (query) => {
+    const result = await searchAPI(query);
+    setData(result);
+    return result; // Return value can be used by the caller
+  },
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false  // Skip trailing edge updates
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult } = state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useBatchedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useBatchedCallback.md
new file mode 100644
index 000000000..d647e0b5a
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useBatchedCallback.md
@@ -0,0 +1,80 @@
+---
+id: useBatchedCallback
+title: useBatchedCallback
+---
+
+# Function: useBatchedCallback()
+
+```ts
+function useBatchedCallback<TValue>(fn, options): (item) => void;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatchedCallback.ts:40](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatchedCallback.ts#L40)
+
+A Preact hook that creates a batched version of a callback function.
+This hook is essentially a wrapper around the basic `batch` function
+that is exported from `@tanstack/pacer`,
+but optimized for Preact with reactive options and a stable function reference.
+
+The batched function will collect individual calls into batches and execute them
+when batch conditions are met (max size reached, wait time elapsed, or custom logic).
+
+This hook provides a simpler API compared to `useBatcher`, making it ideal for basic
+batching needs. However, it does not expose the underlying Batcher instance.
+
+For advanced usage requiring features like:
+- Manual batch execution
+- Access to batch state and metrics
+- Custom useCallback dependencies
+
+Consider using the `useBatcher` hook instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`PreactBatcherOptions`](/pacer/framework/preact/reference/interfaces/PreactBatcherOptions)\&lt;`TValue`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(item): void;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Batch analytics events
+const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
+  sendAnalytics(events);
+}, {
+  maxSize: 5,    // Process when 5 events collected
+  wait: 2000     // Or after 2 seconds
+});
+
+// Use in event handlers
+<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
+  Click me
+</button>
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useBatcher.md b/mintlify/pacer/framework/preact/reference/functions/useBatcher.md
new file mode 100644
index 000000000..c3014acc7
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useBatcher.md
@@ -0,0 +1,172 @@
+---
+id: useBatcher
+title: useBatcher
+---
+
+# Function: useBatcher()
+
+```ts
+function useBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): PreactBatcher<TValue, TSelected>;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:183](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L183)
+
+A Preact hook that creates and manages a Batcher instance.
+
+This is a lower-level hook that provides direct access to the Batcher's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.) by utilizing the onItemsChange callback.
+
+The Batcher collects items and processes them in batches based on configurable conditions:
+- Maximum batch size
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of batch executions that have been completed
+- `isEmpty`: Whether the batcher has no items to process
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `isRunning`: Whether the batcher is active and will process items automatically
+- `items`: Array of items currently queued for batch processing
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending')
+- `totalItemsProcessed`: Total number of items processed across all batches
+
+## Unmount behavior
+
+By default, the hook cancels any pending batch when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = useBatcher(fn, {
+  maxSize: 10,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`PreactBatcherOptions`](/pacer/framework/preact/reference/interfaces/PreactBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactBatcher`](/pacer/framework/preact/reference/interfaces/PreactBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<batcher.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Batch Size: {size}</div>
+  )}
+</batcher.Subscribe>
+
+// Opt-in to re-render when batch size changes at hook level (optimized for displaying queue size)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    totalItemsProcessed: state.totalItemsProcessed
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    isPending: state.isPending,
+    isRunning: state.isRunning,
+    status: state.status
+  })
+);
+
+// Example with custom state management and batching
+const [items, setItems] = useState([]);
+
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  {
+    maxSize: 5,
+    wait: 2000,
+    onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
+    getShouldExecute: (items) => items.length >= 3
+  }
+);
+
+// Add items to batch - they'll be processed when conditions are met
+batcher.addItem(1);
+batcher.addItem(2);
+batcher.addItem(3); // Triggers batch processing
+
+// Control the batcher
+batcher.stop();  // Pause batching
+batcher.start(); // Resume batching
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isPending } = batcher.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useDebouncedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useDebouncedCallback.md
new file mode 100644
index 000000000..9f70716cb
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useDebouncedCallback.md
@@ -0,0 +1,81 @@
+---
+id: useDebouncedCallback
+title: useDebouncedCallback
+---
+
+# Function: useDebouncedCallback()
+
+```ts
+function useDebouncedCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncedCallback.ts#L42)
+
+A Preact hook that creates a debounced version of a callback function.
+This hook is essentially a wrapper around the basic `debounce` function
+that is exported from `@tanstack/pacer`,
+but optimized for Preact with reactive options and a stable function reference.
+
+The debounced function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again.
+
+This hook provides a simpler API compared to `useDebouncer`, making it ideal for basic
+debouncing needs. However, it does not expose the underlying Debouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useDebouncer` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Debounce a search handler
+const handleSearch = useDebouncedCallback((query: string) => {
+  fetchSearchResults(query);
+}, {
+  wait: 500 // Wait 500ms between executions
+});
+
+// Use in an input
+<input
+  type="search"
+  onChange={(e) => handleSearch(e.target.value)}
+/>
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useDebouncedState.md b/mintlify/pacer/framework/preact/reference/functions/useDebouncedState.md
new file mode 100644
index 000000000..e0010e6da
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useDebouncedState.md
@@ -0,0 +1,115 @@
+---
+id: useDebouncedState
+title: useDebouncedState
+---
+
+# Function: useDebouncedState()
+
+```ts
+function useDebouncedState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<StateUpdater<TValue>>, PreactDebouncer<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncedState.ts:79](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncedState.ts#L79)
+
+A Preact hook that creates a debounced state value, combining Preact's useState with debouncing functionality.
+This hook provides both the current debounced value and methods to update it.
+
+The state value is only updated after the specified wait time has elapsed since the last update attempt.
+If another update is attempted before the wait time expires, the timer resets and starts waiting again.
+This is useful for handling frequent state updates that should be throttled, like search input values
+or window resize dimensions.
+
+The hook returns a tuple containing:
+- The current debounced value
+- A function to update the debounced value
+- The debouncer instance with additional control methods
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `DebouncerState`\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, [`PreactDebouncer`](/pacer/framework/preact/reference/interfaces/PreactDebouncer)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
+  wait: 500 // Wait 500ms after last keystroke
+});
+
+// Opt-in to re-render when pending state changes (optimized for loading indicators)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when debouncing status changes (optimized for status display)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({
+    status: state.status,
+    canLeadingExecute: state.canLeadingExecute
+  })
+);
+
+// Update value - will be debounced
+const handleChange = (e) => {
+  setSearchTerm(e.target.value);
+};
+
+// Access the selected debouncer state (will be empty object {} unless selector provided)
+const { isPending, executionCount } = debouncer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useDebouncedValue.md b/mintlify/pacer/framework/preact/reference/functions/useDebouncedValue.md
new file mode 100644
index 000000000..86466afb0
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useDebouncedValue.md
@@ -0,0 +1,124 @@
+---
+id: useDebouncedValue
+title: useDebouncedValue
+---
+
+# Function: useDebouncedValue()
+
+```ts
+function useDebouncedValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, PreactDebouncer<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncedValue.ts:88](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncedValue.ts#L88)
+
+A Preact hook that creates a debounced value that updates only after a specified delay.
+Unlike useDebouncedState, this hook automatically tracks changes to the input value
+and updates the debounced value accordingly.
+
+The debounced value will only update after the specified wait time has elapsed since
+the last change to the input value. If the input value changes again before the wait
+time expires, the timer resets and starts waiting again.
+
+This is useful for deriving debounced values from props or state that change frequently,
+like search queries or form inputs, where you want to limit how often downstream effects
+or calculations occur.
+
+The hook returns the current debounced value and the underlying debouncer instance.
+The debouncer instance can be used to access additional functionality like cancellation
+and execution counts.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `DebouncerState`\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`PreactDebouncer`](/pacer/framework/preact/reference/interfaces/PreactDebouncer)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchQuery, setSearchQuery] = useState('');
+const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
+  wait: 500 // Wait 500ms after last change
+});
+
+// Opt-in to re-render when pending state changes (optimized for loading indicators)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when debouncing status changes (optimized for status display)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({
+    status: state.status,
+    canLeadingExecute: state.canLeadingExecute
+  })
+);
+
+// debouncedQuery will update 500ms after searchQuery stops changing
+useEffect(() => {
+  fetchSearchResults(debouncedQuery);
+}, [debouncedQuery]);
+
+// Handle input changes
+const handleChange = (e) => {
+  setSearchQuery(e.target.value);
+};
+
+// Access the selected debouncer state (will be empty object {} unless selector provided)
+const { isPending, executionCount } = debouncer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useDebouncer.md b/mintlify/pacer/framework/preact/reference/functions/useDebouncer.md
new file mode 100644
index 000000000..57a634900
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useDebouncer.md
@@ -0,0 +1,148 @@
+---
+id: useDebouncer
+title: useDebouncer
+---
+
+# Function: useDebouncer()
+
+```ts
+function useDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactDebouncer<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:163](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L163)
+
+A Preact hook that creates and manages a Debouncer instance.
+
+This is a lower-level hook that provides direct access to the Debouncer's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.).
+
+This hook provides debouncing functionality to limit how often a function can be called,
+waiting for a specified delay before executing the latest call. This is useful for handling
+frequent events like window resizing, scroll events, or real-time search inputs.
+
+The debouncer will only execute the function after the specified wait time has elapsed
+since the last call. If the function is called again before the wait time expires, the
+timer resets and starts waiting again.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = useDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactDebouncerOptions`](/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactDebouncer`](/pacer/framework/preact/reference/interfaces/PreactDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Searching...' : 'Ready'}</div>
+  )}
+</searchDebouncer.Subscribe>
+
+// Opt-in to re-render when isPending changes at hook level (optimized for loading states)
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when executionCount changes (optimized for tracking execution)
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Multiple state properties - re-render when any of these change
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+);
+
+// In an event handler
+const handleChange = (e) => {
+  searchDebouncer.maybeExecute(e.target.value);
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending } = searchDebouncer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useDefaultPacerOptions.md b/mintlify/pacer/framework/preact/reference/functions/useDefaultPacerOptions.md
new file mode 100644
index 000000000..a7920cf53
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useDefaultPacerOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultPacerOptions
+title: useDefaultPacerOptions
+---
+
+# Function: useDefaultPacerOptions()
+
+```ts
+function useDefaultPacerOptions(): PacerProviderOptions;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:67](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L67)
+
+## Returns
+
+[`PacerProviderOptions`](/pacer/framework/preact/reference/interfaces/PacerProviderOptions)
diff --git a/mintlify/pacer/framework/preact/reference/functions/usePacerContext.md b/mintlify/pacer/framework/preact/reference/functions/usePacerContext.md
new file mode 100644
index 000000000..d469ac332
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/usePacerContext.md
@@ -0,0 +1,16 @@
+---
+id: usePacerContext
+title: usePacerContext
+---
+
+# Function: usePacerContext()
+
+```ts
+function usePacerContext(): PacerContextValue | null;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:63](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L63)
+
+## Returns
+
+`PacerContextValue` \| `null`
diff --git a/mintlify/pacer/framework/preact/reference/functions/useQueuedState.md b/mintlify/pacer/framework/preact/reference/functions/useQueuedState.md
new file mode 100644
index 000000000..59005bf87
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useQueuedState.md
@@ -0,0 +1,157 @@
+---
+id: useQueuedState
+title: useQueuedState
+---
+
+# Function: useQueuedState()
+
+```ts
+function useQueuedState<TValue, TSelected>(
+   fn, 
+   options, 
+   selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, PreactQueuer<TValue, TSelected>];
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuedState.ts:119](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuedState.ts#L119)
+
+A Preact hook that creates a queuer with managed state, combining Preact's useState with queuing functionality.
+This hook provides both the current queue state and queue control methods.
+
+The queue state is automatically updated whenever items are added, removed, or reordered in the queue.
+All queue operations are reflected in the state array returned by the hook.
+
+The queue can be started and stopped to automatically process items at a specified interval,
+making it useful as a scheduler. When started, it will process one item per tick, with an
+optional wait time between ticks.
+
+The hook returns a tuple containing:
+- The current queue state as an array
+- The queue instance with methods for queue manipulation
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying queuer instance.
+The `selector` parameter allows you to specify which queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available queuer state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`PreactQueuerOptions`](/pacer/framework/preact/reference/interfaces/PreactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`[], (`item`, `position?`, `runOnItemsChange?`) => `boolean`, [`PreactQueuer`](/pacer/framework/preact/reference/interfaces/PreactQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  {
+    initialItems: ['item1', 'item2'],
+    started: true,
+    wait: 1000,
+    getPriority: (item) => item.priority
+  }
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue items)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    items: state.items,
+    size: state.size,
+    isEmpty: state.isEmpty
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add items to queue
+const handleAdd = (item) => {
+  addItem(item);
+};
+
+// Start automatic processing
+const startProcessing = () => {
+  queue.start();
+};
+
+// Stop automatic processing
+const stopProcessing = () => {
+  queue.stop();
+};
+
+// Manual processing still available
+const handleProcess = () => {
+  const nextItem = queue.getNextItem();
+  if (nextItem) {
+    processItem(nextItem);
+  }
+};
+
+// Access the selected queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queue.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useQueuedValue.md b/mintlify/pacer/framework/preact/reference/functions/useQueuedValue.md
new file mode 100644
index 000000000..b5b3b1fb2
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useQueuedValue.md
@@ -0,0 +1,140 @@
+---
+id: useQueuedValue
+title: useQueuedValue
+---
+
+# Function: useQueuedValue()
+
+```ts
+function useQueuedValue<TValue, TSelected>(
+   initialValue, 
+   options, 
+   selector?): [TValue, PreactQueuer<TValue, TSelected>];
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuedValue.ts:103](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuedValue.ts#L103)
+
+A Preact hook that creates a queued value that processes state changes in order with an optional delay.
+This hook uses useQueuer internally to manage a queue of state changes and apply them sequentially.
+
+The queued value will process changes in the order they are received, with optional delays between
+processing each change. This is useful for handling state updates that need to be processed
+in a specific order, like animations or sequential UI updates.
+
+The hook returns a tuple containing:
+- The current queued value
+- The queuer instance with control methods
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying queuer instance.
+The `selector` parameter allows you to specify which queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available queuer state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### initialValue
+
+`TValue`
+
+### options
+
+[`PreactQueuerOptions`](/pacer/framework/preact/reference/interfaces/PreactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`PreactQueuer`](/pacer/framework/preact/reference/interfaces/PreactQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, queuer] = useQueuedValue(initialValue, {
+  wait: 500, // Wait 500ms between processing each change
+  started: true // Start processing immediately
+});
+
+// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue status)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add changes to the queue
+const handleChange = (newValue) => {
+  queuer.addItem(newValue);
+};
+
+// Control the queue
+const pauseProcessing = () => {
+  queuer.stop();
+};
+
+const resumeProcessing = () => {
+  queuer.start();
+};
+
+// Access the selected queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queuer.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useQueuer.md b/mintlify/pacer/framework/preact/reference/functions/useQueuer.md
new file mode 100644
index 000000000..80f2b60de
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useQueuer.md
@@ -0,0 +1,183 @@
+---
+id: useQueuer
+title: useQueuer
+---
+
+# Function: useQueuer()
+
+```ts
+function useQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): PreactQueuer<TValue, TSelected>;
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:194](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L194)
+
+A Preact hook that creates and manages a Queuer instance.
+
+This is a lower-level hook that provides direct access to the Queuer's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.) by utilizing the onItemsChange callback.
+
+For a hook with built-in state management, see useQueuedState.
+
+The Queuer extends the base Queue to add processing capabilities. Items are processed
+synchronously in order, with optional delays between processing each item. The queuer includes
+an internal tick mechanism that can be started and stopped, making it useful as a scheduler.
+When started, it will process one item per tick, with an optional wait time between ticks.
+
+By default uses FIFO (First In First Out) behavior, but can be configured for LIFO
+(Last In First Out) by specifying 'front' position when adding items.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Unmount behavior
+
+By default, the hook stops the queuer when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queue = useQueuer(fn, {
+  started: true,
+  wait: 1000,
+  onUnmount: (q) => q.flush()
+});
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`PreactQueuerOptions`](/pacer/framework/preact/reference/interfaces/PreactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactQueuer`](/pacer/framework/preact/reference/interfaces/PreactQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<queue.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Queue Size: {size}</div>
+  )}
+</queue.Subscribe>
+
+// Opt-in to re-render when queue size changes at hook level (optimized for displaying queue length)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Example with custom state management and scheduling
+const [items, setItems] = useState([]);
+
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  {
+    started: true, // Start processing immediately
+    wait: 1000,    // Process one item every second
+    onItemsChange: (queue) => setItems(queue.peekAllItems()),
+    getPriority: (item) => item.priority // Process higher priority items first
+  }
+);
+
+// Add items to process - they'll be handled automatically
+queue.addItem('task1');
+queue.addItem('task2');
+
+// Control the scheduler
+queue.stop();  // Pause processing
+queue.start(); // Resume processing
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queue.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useRateLimitedCallback.md b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedCallback.md
new file mode 100644
index 000000000..88f8593fe
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedCallback.md
@@ -0,0 +1,98 @@
+---
+id: useRateLimitedCallback
+title: useRateLimitedCallback
+---
+
+# Function: useRateLimitedCallback()
+
+```ts
+function useRateLimitedCallback<TFn>(fn, options): (...args) => boolean;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimitedCallback.ts:59](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimitedCallback.ts#L59)
+
+A Preact hook that creates a rate-limited version of a callback function.
+This hook is essentially a wrapper around the basic `rateLimiter` function
+that is exported from `@tanstack/pacer`,
+but optimized for Preact with reactive options and a stable function reference.
+
+Rate limiting is a simple "hard limit" approach - it allows all calls until the limit
+is reached, then blocks subsequent calls until the window resets. Unlike throttling
+or debouncing, it does not attempt to space out or intelligently collapse calls.
+This can lead to bursts of rapid executions followed by periods where all calls
+are blocked.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns, consider:
+- useThrottledCallback: When you want consistent spacing between executions (e.g. UI updates)
+- useDebouncedCallback: When you want to collapse rapid calls into a single execution (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits,
+like API rate limits or other scenarios requiring hard caps on execution frequency.
+
+This hook provides a simpler API compared to `useRateLimiter`, making it ideal for basic
+rate limiting needs. However, it does not expose the underlying RateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useRateLimiter` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): boolean;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`boolean`
+
+## Example
+
+```tsx
+// Rate limit API calls to maximum 5 calls per minute with a sliding window
+const makeApiCall = useRateLimitedCallback(
+  (data: ApiData) => {
+    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+  },
+  {
+    limit: 5,
+    window: 60000, // 1 minute
+    windowType: 'sliding',
+    onReject: () => {
+      console.warn('API rate limit reached. Please wait before trying again.');
+    }
+  }
+);
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useRateLimitedState.md b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedState.md
new file mode 100644
index 000000000..c6c664f4d
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedState.md
@@ -0,0 +1,141 @@
+---
+id: useRateLimitedState
+title: useRateLimitedState
+---
+
+# Function: useRateLimitedState()
+
+```ts
+function useRateLimitedState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<StateUpdater<TValue>>, PreactRateLimiter<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimitedState.ts:108](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimitedState.ts#L108)
+
+A Preact hook that creates a rate-limited state value that enforces a hard limit on state updates within a time window.
+This hook combines Preact's useState with rate limiting functionality to provide controlled state updates.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- useThrottledState: When you want consistent spacing between updates (e.g. UI changes)
+- useDebouncedState: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- The rate-limited state value
+- A rate-limited setter function that respects the configured limits
+- The rateLimiter instance for additional control
+
+For more direct control over rate limiting without state management,
+consider using the lower-level useRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available rate limiter state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `RateLimiterState`
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, [`PreactRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactRateLimiter)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, rateLimiter] = useRateLimitedState(0, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With rejection callback and fixed window
+const [value, setValue] = useRateLimitedState(0, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access rateLimiter methods if needed
+const handleSubmit = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    setValue(newValue);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected rate limiter state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useRateLimitedValue.md b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedValue.md
new file mode 100644
index 000000000..40d50fe83
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useRateLimitedValue.md
@@ -0,0 +1,130 @@
+---
+id: useRateLimitedValue
+title: useRateLimitedValue
+---
+
+# Function: useRateLimitedValue()
+
+```ts
+function useRateLimitedValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, PreactRateLimiter<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimitedValue.ts:97](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimitedValue.ts#L97)
+
+A high-level Preact hook that creates a rate-limited version of a value that updates at most a certain number of times within a time window.
+This hook uses Preact's useState internally to manage the rate-limited state.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- useThrottledValue: When you want consistent spacing between updates (e.g. UI changes)
+- useDebouncedValue: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- The rate-limited value that updates according to the configured rate limit
+- The rate limiter instance with control methods
+
+For more direct control over rate limiting behavior without Preact state management,
+consider using the lower-level useRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available rate limiter state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `RateLimiterState`
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`PreactRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactRateLimiter)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With rejection callback and fixed window
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    console.log(`Update rejected. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access the selected rate limiter state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useRateLimiter.md b/mintlify/pacer/framework/preact/reference/functions/useRateLimiter.md
new file mode 100644
index 000000000..cf1f72a98
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useRateLimiter.md
@@ -0,0 +1,175 @@
+---
+id: useRateLimiter
+title: useRateLimiter
+---
+
+# Function: useRateLimiter()
+
+```ts
+function useRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:190](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L190)
+
+A low-level Preact hook that creates a `RateLimiter` instance to enforce rate limits on function execution.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Rate limiting is a simple "hard limit" approach that allows executions until a maximum count is reached within
+a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,
+it does not attempt to space out or collapse executions intelligently.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns:
+- Use throttling when you want consistent spacing between executions (e.g. UI updates)
+- Use debouncing when you want to collapse rapid-fire events (e.g. search input)
+- Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+The hook returns an object containing:
+- maybeExecute: The rate-limited function that respects the configured limits
+- getExecutionCount: Returns the number of successful executions
+- getRejectionCount: Returns the number of rejected executions due to rate limiting
+- getRemainingInWindow: Returns how many more executions are allowed in the current window
+- reset: Resets the execution counts and window timing
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactRateLimiterOptions`](/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const rateLimiter = useRateLimiter(apiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+});
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejections: {rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+
+// Opt-in to re-render when execution count changes at hook level (optimized for tracking successful executions)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// Multiple state properties - re-render when any of these change
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({
+    executionCount: state.executionCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Monitor rate limit status
+const handleClick = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    rateLimiter.maybeExecute(data);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useThrottledCallback.md b/mintlify/pacer/framework/preact/reference/functions/useThrottledCallback.md
new file mode 100644
index 000000000..8d66e7a22
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useThrottledCallback.md
@@ -0,0 +1,82 @@
+---
+id: useThrottledCallback
+title: useThrottledCallback
+---
+
+# Function: useThrottledCallback()
+
+```ts
+function useThrottledCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottledCallback.ts:43](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottledCallback.ts#L43)
+
+A Preact hook that creates a throttled version of a callback function.
+This hook is essentially a wrapper around the basic `throttle` function
+that is exported from `@tanstack/pacer`,
+but optimized for Preact with reactive options and a stable function reference.
+
+The throttled function will execute at most once within the specified wait time period,
+regardless of how many times it is called. If called multiple times during the wait period,
+only the first invocation will execute, and subsequent calls will be ignored until
+the wait period has elapsed.
+
+This hook provides a simpler API compared to `useThrottler`, making it ideal for basic
+throttling needs. However, it does not expose the underlying Throttler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useThrottler` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Throttle a window resize handler
+const handleResize = useThrottledCallback(() => {
+  updateLayoutMeasurements();
+}, {
+  wait: 100 // Execute at most once every 100ms
+});
+
+// Use in an event listener
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, [handleResize]);
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useThrottledState.md b/mintlify/pacer/framework/preact/reference/functions/useThrottledState.md
new file mode 100644
index 000000000..e2b4f5443
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useThrottledState.md
@@ -0,0 +1,126 @@
+---
+id: useThrottledState
+title: useThrottledState
+---
+
+# Function: useThrottledState()
+
+```ts
+function useThrottledState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<StateUpdater<TValue>>, PreactThrottler<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottledState.ts:91](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottledState.ts#L91)
+
+A Preact hook that creates a throttled state value that updates at most once within a specified time window.
+This hook combines Preact's useState with throttling functionality to provide controlled state updates.
+
+Throttling ensures state updates occur at a controlled rate regardless of how frequently the setter is called.
+This is useful for rate-limiting expensive re-renders or operations that depend on rapidly changing state.
+
+The hook returns a tuple containing:
+- The throttled state value
+- A throttled setter function that respects the configured wait time
+- The throttler instance for additional control
+
+For more direct control over throttling without state management,
+consider using the lower-level useThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available throttler state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `ThrottlerState`\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, [`PreactThrottler`](/pacer/framework/preact/reference/interfaces/PreactThrottler)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With custom leading/trailing behavior
+const [value, setValue] = useThrottledState(0, {
+  wait: 1000,
+  leading: true,   // Update immediately on first change
+  trailing: false  // Skip trailing edge updates
+});
+
+// Access throttler methods if needed
+const handleReset = () => {
+  setValue(0);
+  throttler.cancel(); // Cancel any pending updates
+};
+
+// Access the selected throttler state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useThrottledValue.md b/mintlify/pacer/framework/preact/reference/functions/useThrottledValue.md
new file mode 100644
index 000000000..bd5f97130
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useThrottledValue.md
@@ -0,0 +1,119 @@
+---
+id: useThrottledValue
+title: useThrottledValue
+---
+
+# Function: useThrottledValue()
+
+```ts
+function useThrottledValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, PreactThrottler<Dispatch<StateUpdater<TValue>>, TSelected>];
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottledValue.ts:83](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottledValue.ts#L83)
+
+A high-level Preact hook that creates a throttled version of a value that updates at most once within a specified time window.
+This hook uses Preact's useState internally to manage the throttled state.
+
+Throttling ensures the value updates occur at a controlled rate regardless of how frequently the input value changes.
+This is useful for rate-limiting expensive re-renders or API calls that depend on rapidly changing values.
+
+The hook returns a tuple containing:
+- The throttled value that updates according to the leading/trailing edge behavior specified in the options
+- The throttler instance with control methods
+
+For more direct control over throttling behavior without Preact state management,
+consider using the lower-level useThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available throttler state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `ThrottlerState`\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`PreactThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`PreactThrottler`](/pacer/framework/preact/reference/interfaces/PreactThrottler)\&lt;`Dispatch`\&lt;`StateUpdater`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With custom leading/trailing behavior
+const [throttledValue, throttler] = useThrottledValue(rawValue, {
+  wait: 1000,
+  leading: true,   // Update immediately on first change
+  trailing: false  // Skip trailing edge updates
+});
+
+// Access the selected throttler state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/functions/useThrottler.md b/mintlify/pacer/framework/preact/reference/functions/useThrottler.md
new file mode 100644
index 000000000..cabdf71d6
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/functions/useThrottler.md
@@ -0,0 +1,153 @@
+---
+id: useThrottler
+title: useThrottler
+---
+
+# Function: useThrottler()
+
+```ts
+function useThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): PreactThrottler<TFn, TSelected>;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:168](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L168)
+
+A low-level Preact hook that creates a `Throttler` instance that limits how often the provided function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc). For a simpler and higher-level hook that
+integrates directly with Preact's useState, see useThrottledState.
+
+Throttling ensures a function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting
+expensive operations or UI updates.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = useThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`PreactThrottlerOptions`](/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`PreactThrottler`](/pacer/framework/preact/reference/interfaces/PreactThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue] = useState(0);
+const throttler = useThrottler(setValue, { wait: 1000 });
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Processing...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+
+// Opt-in to re-render when execution count changes at hook level (optimized for tracking executions)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With any state manager
+const throttler = useThrottler(
+  (value) => stateManager.setState(value),
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false  // Skip trailing edge updates
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/preact/reference/index.md b/mintlify/pacer/framework/preact/reference/index.md
new file mode 100644
index 000000000..adcc1333a
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/index.md
@@ -0,0 +1,64 @@
+---
+id: "@tanstack/preact-pacer"
+title: "@tanstack/preact-pacer"
+---
+
+# @tanstack/preact-pacer
+
+## Interfaces
+
+- [PacerProviderOptions](/pacer/framework/preact/reference/interfaces/PacerProviderOptions)
+- [PacerProviderProps](/pacer/framework/preact/reference/interfaces/PacerProviderProps)
+- [PreactAsyncBatcher](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher)
+- [PreactAsyncBatcherOptions](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions)
+- [PreactAsyncDebouncer](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer)
+- [PreactAsyncDebouncerOptions](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions)
+- [PreactAsyncQueuer](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer)
+- [PreactAsyncQueuerOptions](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions)
+- [PreactAsyncRateLimiter](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter)
+- [PreactAsyncRateLimiterOptions](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions)
+- [PreactAsyncThrottler](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler)
+- [PreactAsyncThrottlerOptions](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions)
+- [PreactBatcher](/pacer/framework/preact/reference/interfaces/PreactBatcher)
+- [PreactBatcherOptions](/pacer/framework/preact/reference/interfaces/PreactBatcherOptions)
+- [PreactDebouncer](/pacer/framework/preact/reference/interfaces/PreactDebouncer)
+- [PreactDebouncerOptions](/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions)
+- [PreactQueuer](/pacer/framework/preact/reference/interfaces/PreactQueuer)
+- [PreactQueuerOptions](/pacer/framework/preact/reference/interfaces/PreactQueuerOptions)
+- [PreactRateLimiter](/pacer/framework/preact/reference/interfaces/PreactRateLimiter)
+- [PreactRateLimiterOptions](/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions)
+- [PreactThrottler](/pacer/framework/preact/reference/interfaces/PreactThrottler)
+- [PreactThrottlerOptions](/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions)
+
+## Functions
+
+- [PacerProvider](/pacer/framework/preact/reference/functions/PacerProvider)
+- [useAsyncBatchedCallback](/pacer/framework/preact/reference/functions/useAsyncBatchedCallback)
+- [useAsyncBatcher](/pacer/framework/preact/reference/functions/useAsyncBatcher)
+- [useAsyncDebouncedCallback](/pacer/framework/preact/reference/functions/useAsyncDebouncedCallback)
+- [useAsyncDebouncer](/pacer/framework/preact/reference/functions/useAsyncDebouncer)
+- [useAsyncQueuedState](/pacer/framework/preact/reference/functions/useAsyncQueuedState)
+- [useAsyncQueuer](/pacer/framework/preact/reference/functions/useAsyncQueuer)
+- [useAsyncRateLimitedCallback](/pacer/framework/preact/reference/functions/useAsyncRateLimitedCallback)
+- [useAsyncRateLimiter](/pacer/framework/preact/reference/functions/useAsyncRateLimiter)
+- [useAsyncThrottledCallback](/pacer/framework/preact/reference/functions/useAsyncThrottledCallback)
+- [useAsyncThrottler](/pacer/framework/preact/reference/functions/useAsyncThrottler)
+- [useBatchedCallback](/pacer/framework/preact/reference/functions/useBatchedCallback)
+- [useBatcher](/pacer/framework/preact/reference/functions/useBatcher)
+- [useDebouncedCallback](/pacer/framework/preact/reference/functions/useDebouncedCallback)
+- [useDebouncedState](/pacer/framework/preact/reference/functions/useDebouncedState)
+- [useDebouncedValue](/pacer/framework/preact/reference/functions/useDebouncedValue)
+- [useDebouncer](/pacer/framework/preact/reference/functions/useDebouncer)
+- [useDefaultPacerOptions](/pacer/framework/preact/reference/functions/useDefaultPacerOptions)
+- [usePacerContext](/pacer/framework/preact/reference/functions/usePacerContext)
+- [useQueuedState](/pacer/framework/preact/reference/functions/useQueuedState)
+- [useQueuedValue](/pacer/framework/preact/reference/functions/useQueuedValue)
+- [useQueuer](/pacer/framework/preact/reference/functions/useQueuer)
+- [useRateLimitedCallback](/pacer/framework/preact/reference/functions/useRateLimitedCallback)
+- [useRateLimitedState](/pacer/framework/preact/reference/functions/useRateLimitedState)
+- [useRateLimitedValue](/pacer/framework/preact/reference/functions/useRateLimitedValue)
+- [useRateLimiter](/pacer/framework/preact/reference/functions/useRateLimiter)
+- [useThrottledCallback](/pacer/framework/preact/reference/functions/useThrottledCallback)
+- [useThrottledState](/pacer/framework/preact/reference/functions/useThrottledState)
+- [useThrottledValue](/pacer/framework/preact/reference/functions/useThrottledValue)
+- [useThrottler](/pacer/framework/preact/reference/functions/useThrottler)
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderOptions.md
new file mode 100644
index 000000000..35b9371d7
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderOptions.md
@@ -0,0 +1,108 @@
+---
+id: PacerProviderOptions
+title: PacerProviderOptions
+---
+
+# Interface: PacerProviderOptions
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:19](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L19)
+
+## Properties
+
+### asyncBatcher?
+
+```ts
+optional asyncBatcher: Partial<AsyncBatcherOptions<any>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:20](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L20)
+
+***
+
+### asyncDebouncer?
+
+```ts
+optional asyncDebouncer: Partial<AsyncDebouncerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L21)
+
+***
+
+### asyncQueuer?
+
+```ts
+optional asyncQueuer: Partial<AsyncQueuerOptions<any>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:22](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L22)
+
+***
+
+### asyncRateLimiter?
+
+```ts
+optional asyncRateLimiter: Partial<AsyncRateLimiterOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:23](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L23)
+
+***
+
+### asyncThrottler?
+
+```ts
+optional asyncThrottler: Partial<AsyncThrottlerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L24)
+
+***
+
+### batcher?
+
+```ts
+optional batcher: Partial<BatcherOptions<any>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:25](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L25)
+
+***
+
+### debouncer?
+
+```ts
+optional debouncer: Partial<DebouncerOptions<AnyFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:26](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L26)
+
+***
+
+### queuer?
+
+```ts
+optional queuer: Partial<QueuerOptions<any>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:27](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L27)
+
+***
+
+### rateLimiter?
+
+```ts
+optional rateLimiter: Partial<RateLimiterOptions<AnyFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:28](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L28)
+
+***
+
+### throttler?
+
+```ts
+optional throttler: Partial<ThrottlerOptions<AnyFunction>>;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:29](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L29)
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderProps.md b/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderProps.md
new file mode 100644
index 000000000..e5d502b48
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PacerProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: PacerProviderProps
+title: PacerProviderProps
+---
+
+# Interface: PacerProviderProps
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:38](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L38)
+
+## Properties
+
+### children
+
+```ts
+children: ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:39](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L39)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: PacerProviderOptions;
+```
+
+Defined in: [preact-pacer/src/provider/PacerProvider.tsx:40](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/provider/PacerProvider.tsx#L40)
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher.md
new file mode 100644
index 000000000..1ba52d285
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher.md
@@ -0,0 +1,100 @@
+---
+id: PreactAsyncBatcher
+title: PreactAsyncBatcher
+---
+
+# Interface: PreactAsyncBatcher\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:23](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncBatcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:49](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L49)
+
+Reactive state that will be updated and re-rendered when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncBatcherState<TValue>>>;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:55](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L55)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:40](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L40)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the async batcher state.
+
+This is useful for opting into state re-renders for specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Batch Size: {size}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions.md
new file mode 100644
index 000000000..ba95376ba
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactAsyncBatcherOptions
+title: PreactAsyncBatcherOptions
+---
+
+# Interface: PreactAsyncBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:12](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L12)
+
+## Extends
+
+- `AsyncBatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [preact-pacer/src/async-batcher/useAsyncBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-batcher/useAsyncBatcher.ts#L20)
+
+Optional callback invoked when the component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`PreactAsyncBatcher`](/pacer/framework/preact/reference/interfaces/PreactAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer.md
new file mode 100644
index 000000000..058341376
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: PreactAsyncDebouncer
+title: PreactAsyncDebouncer
+---
+
+# Interface: PreactAsyncDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncDebouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L50)
+
+Reactive state that will be updated and re-rendered when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the async debouncer state.
+
+This is useful for opting into state re-renders for specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions.md
new file mode 100644
index 000000000..83c759960
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactAsyncDebouncerOptions
+title: PreactAsyncDebouncerOptions
+---
+
+# Interface: PreactAsyncDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L13)
+
+## Extends
+
+- `AsyncDebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [preact-pacer/src/async-debouncer/useAsyncDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-debouncer/useAsyncDebouncer.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`PreactAsyncDebouncer`](/pacer/framework/preact/reference/interfaces/PreactAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer.md
new file mode 100644
index 000000000..6dba4c0b6
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer.md
@@ -0,0 +1,100 @@
+---
+id: PreactAsyncQueuer
+title: PreactAsyncQueuer
+---
+
+# Interface: PreactAsyncQueuer\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:23](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncQueuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L49)
+
+Reactive state that will be updated and re-rendered when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:55](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L55)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:40](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L40)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the async queuer state.
+
+This is useful for opting into state re-renders for specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Queue Size: {size}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions.md
new file mode 100644
index 000000000..04b59190d
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactAsyncQueuerOptions
+title: PreactAsyncQueuerOptions
+---
+
+# Interface: PreactAsyncQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:12](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L12)
+
+## Extends
+
+- `AsyncQueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [preact-pacer/src/async-queuer/useAsyncQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-queuer/useAsyncQueuer.ts#L20)
+
+Optional callback invoked when the component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop + abort); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`PreactAsyncQueuer`](/pacer/framework/preact/reference/interfaces/PreactAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter.md
new file mode 100644
index 000000000..53eb821f1
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: PreactAsyncRateLimiter
+title: PreactAsyncRateLimiter
+---
+
+# Interface: PreactAsyncRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncRateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L50)
+
+Reactive state that will be updated and re-rendered when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the async rate limiter state.
+
+This is useful for opting into state re-renders for specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejections: {rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions.md
new file mode 100644
index 000000000..3f405e5bd
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactAsyncRateLimiterOptions
+title: PreactAsyncRateLimiterOptions
+---
+
+# Interface: PreactAsyncRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L13)
+
+## Extends
+
+- `AsyncRateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup (abort); use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`PreactAsyncRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler.md
new file mode 100644
index 000000000..ed6ed568b
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler.md
@@ -0,0 +1,100 @@
+---
+id: PreactAsyncThrottler
+title: PreactAsyncThrottler
+---
+
+# Interface: PreactAsyncThrottler\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncThrottler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L50)
+
+Reactive state that will be updated and re-rendered when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the async throttler state.
+
+This is useful for opting into state re-renders for specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions.md
new file mode 100644
index 000000000..82e6032dc
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactAsyncThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactAsyncThrottlerOptions
+title: PreactAsyncThrottlerOptions
+---
+
+# Interface: PreactAsyncThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L13)
+
+## Extends
+
+- `AsyncThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [preact-pacer/src/async-throttler/useAsyncThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/async-throttler/useAsyncThrottler.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`PreactAsyncThrottler`](/pacer/framework/preact/reference/interfaces/PreactAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcher.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcher.md
new file mode 100644
index 000000000..7ad60816f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcher.md
@@ -0,0 +1,100 @@
+---
+id: PreactBatcher
+title: PreactBatcher
+---
+
+# Interface: PreactBatcher\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Batcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:46](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L46)
+
+Reactive state that will be updated and re-rendered when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<BatcherState<TValue>>>;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:52](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L52)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:37](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L37)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the batcher state.
+
+This is useful for opting into state re-renders for specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Batch Size: {size}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcherOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcherOptions.md
new file mode 100644
index 000000000..10f0cef97
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactBatcherOptions
+title: PreactBatcherOptions
+---
+
+# Interface: PreactBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:9](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L9)
+
+## Extends
+
+- `BatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [preact-pacer/src/batcher/useBatcher.ts:17](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/batcher/useBatcher.ts#L17)
+
+Optional callback invoked when the component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`PreactBatcher`](/pacer/framework/preact/reference/interfaces/PreactBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncer.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncer.md
new file mode 100644
index 000000000..66f05d618
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: PreactDebouncer
+title: PreactDebouncer
+---
+
+# Interface: PreactDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Debouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L50)
+
+Reactive state that will be updated and re-rendered when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<DebouncerState<TFn>>>;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the debouncer state.
+
+This is useful for opting into state re-renders for specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions.md
new file mode 100644
index 000000000..db0bd7e1f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactDebouncerOptions
+title: PreactDebouncerOptions
+---
+
+# Interface: PreactDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L13)
+
+## Extends
+
+- `DebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [preact-pacer/src/debouncer/useDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/debouncer/useDebouncer.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`PreactDebouncer`](/pacer/framework/preact/reference/interfaces/PreactDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuer.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuer.md
new file mode 100644
index 000000000..1d4e38ae8
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuer.md
@@ -0,0 +1,100 @@
+---
+id: PreactQueuer
+title: PreactQueuer
+---
+
+# Interface: PreactQueuer\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Queuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:46](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L46)
+
+Reactive state that will be updated and re-rendered when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<QueuerState<TValue>>>;
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:52](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L52)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:37](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L37)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the queuer state.
+
+This is useful for opting into state re-renders for specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ size: state.size })}>
+  {({ size }) => (
+    <div>Queue Size: {size}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuerOptions.md
new file mode 100644
index 000000000..1a59a41d6
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactQueuerOptions
+title: PreactQueuerOptions
+---
+
+# Interface: PreactQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L9)
+
+## Extends
+
+- `QueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [preact-pacer/src/queuer/useQueuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/queuer/useQueuer.ts#L17)
+
+Optional callback invoked when the component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`PreactQueuer`](/pacer/framework/preact/reference/interfaces/PreactQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiter.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiter.md
new file mode 100644
index 000000000..8dce4135e
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: PreactRateLimiter
+title: PreactRateLimiter
+---
+
+# Interface: PreactRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`RateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L50)
+
+Reactive state that will be updated and re-rendered when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<RateLimiterState>>;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the rate limiter state.
+
+This is useful for opting into state re-renders for specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejections: {rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions.md
new file mode 100644
index 000000000..aac237789
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactRateLimiterOptions
+title: PreactRateLimiterOptions
+---
+
+# Interface: PreactRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L13)
+
+## Extends
+
+- `RateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [preact-pacer/src/rate-limiter/useRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/rate-limiter/useRateLimiter.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup; use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`PreactRateLimiter`](/pacer/framework/preact/reference/interfaces/PreactRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottler.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottler.md
new file mode 100644
index 000000000..bc64532fe
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottler.md
@@ -0,0 +1,100 @@
+---
+id: PreactThrottler
+title: PreactThrottler
+---
+
+# Interface: PreactThrottler\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Throttler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L50)
+
+Reactive state that will be updated and re-rendered when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ComponentChildren;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L41)
+
+A Preact HOC (Higher Order Component) that allows you to subscribe to the throttler state.
+
+This is useful for opting into state re-renders for specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ComponentChildren` \| (`state`) => `ComponentChildren`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ComponentChildren`
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions.md b/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions.md
new file mode 100644
index 000000000..89b13443f
--- /dev/null
+++ b/mintlify/pacer/framework/preact/reference/interfaces/PreactThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: PreactThrottlerOptions
+title: PreactThrottlerOptions
+---
+
+# Interface: PreactThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L13)
+
+## Extends
+
+- `ThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [preact-pacer/src/throttler/useThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/preact-pacer/src/throttler/useThrottler.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`PreactThrottler`](/pacer/framework/preact/reference/interfaces/PreactThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/adapter.md b/mintlify/pacer/framework/react/adapter.md
new file mode 100644
index 000000000..53bade4f8
--- /dev/null
+++ b/mintlify/pacer/framework/react/adapter.md
@@ -0,0 +1,280 @@
+---
+title: TanStack Pacer React Adapter
+id: adapter
+---
+
+If you are using TanStack Pacer in a React application, we recommend using the React Adapter. The React Adapter provides a set of easy-to-use hooks on top of the core Pacer utilities. If you find yourself wanting to use the core Pacer classes/functions directly, the React Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/react-pacer
+```
+
+## React Hooks
+
+See the [React Functions Reference](/pacer/framework/react/reference/index) to see the full list of hooks available in the React Adapter.
+
+## Basic Usage
+
+Import a react specific hook from the React Adapter.
+
+```tsx
+import { useDebouncedValue } from '@tanstack/react-pacer'
+
+const [instantValue, instantValueRef] = useState(0)
+const [debouncedValue, debouncer] = useDebouncedValue(instantValue, {
+  wait: 1000,
+})
+```
+
+Or import a core Pacer class/function that is re-exported from the React Adapter.
+
+```tsx
+import { debounce, Debouncer } from '@tanstack/react-pacer' // no need to install the core package separately
+```
+
+## Option Helpers
+
+If you want a type-safe way to define common options for pacer utilities, TanStack Pacer provides option helpers for each utility. These helpers can be used with React hooks.
+
+### Debouncer Options
+
+```tsx
+import { useDebouncer } from '@tanstack/react-pacer'
+import { debouncerOptions } from '@tanstack/pacer'
+
+const commonDebouncerOptions = debouncerOptions({
+  wait: 1000,
+  leading: false,
+  trailing: true,
+})
+
+const debouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { ...commonDebouncerOptions, key: 'searchDebouncer' }
+)
+```
+
+### Queuer Options
+
+```tsx
+import { useQueuer } from '@tanstack/react-pacer'
+import { queuerOptions } from '@tanstack/pacer'
+
+const commonQueuerOptions = queuerOptions({
+  concurrency: 3,
+  addItemsTo: 'back',
+})
+
+const queuer = useQueuer(
+  (item: string) => processItem(item),
+  { ...commonQueuerOptions, key: 'itemQueuer' }
+)
+```
+
+### Rate Limiter Options
+
+```tsx
+import { useRateLimiter } from '@tanstack/react-pacer'
+import { rateLimiterOptions } from '@tanstack/pacer'
+
+const commonRateLimiterOptions = rateLimiterOptions({
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+})
+
+const rateLimiter = useRateLimiter(
+  (data: string) => sendApiRequest(data),
+  { ...commonRateLimiterOptions, key: 'apiRateLimiter' }
+)
+```
+
+## Provider
+
+The React Adapter provides a `PacerProvider` component that you can use to provide default options to all instances of pacer utilities within your component tree.
+
+```tsx
+import { PacerProvider } from '@tanstack/react-pacer'
+
+// Set default options for react-pacer instances
+<PacerProvider
+  defaultOptions={{
+    debouncer: { wait: 1000 },
+    queuer: { concurrency: 3 },
+    rateLimiter: { limit: 5, window: 60000 },
+  }}
+>
+  <App />
+</PacerProvider>
+```
+
+All hooks within the provider will automatically use these default options, which can be overridden on a per-hook basis.
+
+## Subscribing to State
+
+The React adapter supports subscribing to state changes in two ways:
+
+### Using the Subscribe Component
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+import { useRateLimiter } from '@tanstack/react-pacer'
+
+function ApiComponent() {
+  const rateLimiter = useRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    { limit: 5, window: 60000 }
+  )
+
+  return (
+    <div>
+      <button onClick={() => rateLimiter.maybeExecute('some data')}>
+        Submit
+      </button>
+      
+      <rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+        {({ rejectionCount }) => (
+          <div>Rejections: {rejectionCount}</div>
+        )}
+      </rateLimiter.Subscribe>
+    </div>
+  )
+}
+```
+
+### Using the Selector Parameter
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `hook.state` is empty (`{}`) as the selector is empty by default.** You must opt-in to state tracking by providing a selector function.
+
+```tsx
+import { useDebouncer } from '@tanstack/react-pacer'
+
+function SearchComponent() {
+  // Default behavior - no reactive state subscriptions
+  const debouncer = useDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 }
+  )
+  console.log(debouncer.state) // {}
+
+  // Opt-in to track isPending changes
+  const debouncer = useDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 },
+    (state) => ({ isPending: state.isPending })
+  )
+  console.log(debouncer.state.isPending) // Reactive value
+
+  return (
+    <input
+      onChange={(e) => debouncer.maybeExecute(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+For more details on state management and available state properties, see the individual guide pages for each utility (e.g., [Rate Limiting Guide](/pacer/guides/rate-limiting), [Debouncing Guide](/pacer/guides/debouncing)).
+
+## Examples
+
+### Debouncer Example
+
+```tsx
+import { useDebouncer } from '@tanstack/react-pacer'
+
+function SearchComponent() {
+  const debouncer = useDebouncer(
+    (query: string) => {
+      console.log('Searching for:', query)
+      // Perform search
+    },
+    { wait: 500 }
+  )
+
+  return (
+    <input
+      onChange={(e) => debouncer.maybeExecute(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+### Queuer Example
+
+```tsx
+import { useQueuer } from '@tanstack/react-pacer'
+
+function UploadComponent() {
+  const queuer = useQueuer(
+    async (file: File) => {
+      await uploadFile(file)
+    },
+    { concurrency: 3 }
+  )
+
+  const handleFileSelect = (files: FileList) => {
+    Array.from(files).forEach((file) => {
+      queuer.add(file)
+    })
+  }
+
+  return (
+    <input
+      type="file"
+      multiple
+      onChange={(e) => {
+        if (e.target.files) {
+          handleFileSelect(e.target.files)
+        }
+      }}
+    />
+  )
+}
+```
+
+### Rate Limiter Example
+
+```tsx
+import { useRateLimiter } from '@tanstack/react-pacer'
+
+function ApiComponent() {
+  const rateLimiter = useRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    {
+      limit: 5,
+      window: 60000,
+      windowType: 'sliding',
+      onReject: () => {
+        alert('Rate limit reached. Please try again later.')
+      },
+    }
+  )
+
+  const handleSubmit = () => {
+    const remaining = rateLimiter.getRemainingInWindow()
+    if (remaining > 0) {
+      rateLimiter.maybeExecute('some data')
+    }
+  }
+
+  return <button onClick={handleSubmit}>Submit</button>
+}
+```
+
diff --git a/mintlify/pacer/framework/react/examples/asyncBatch.md b/mintlify/pacer/framework/react/examples/asyncBatch.md
new file mode 100644
index 000000000..64d53d96a
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/asyncBatch.md
@@ -0,0 +1,12 @@
+---
+title: "asyncBatch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/asyncBatch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/asyncBatch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/asyncDebounce.md b/mintlify/pacer/framework/react/examples/asyncDebounce.md
new file mode 100644
index 000000000..69e9e0385
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/asyncDebounce.md
@@ -0,0 +1,12 @@
+---
+title: "asyncDebounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/asyncDebounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/asyncDebounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/asyncRateLimit.md b/mintlify/pacer/framework/react/examples/asyncRateLimit.md
new file mode 100644
index 000000000..557733fb3
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/asyncRateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "asyncRateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/asyncRateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/asyncRateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/asyncThrottle.md b/mintlify/pacer/framework/react/examples/asyncThrottle.md
new file mode 100644
index 000000000..e1391e8a1
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/asyncThrottle.md
@@ -0,0 +1,12 @@
+---
+title: "asyncThrottle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/asyncThrottle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/asyncThrottle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/batch.md b/mintlify/pacer/framework/react/examples/batch.md
new file mode 100644
index 000000000..f200e0913
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/batch.md
@@ -0,0 +1,12 @@
+---
+title: "batch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/batch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/batch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/debounce.md b/mintlify/pacer/framework/react/examples/debounce.md
new file mode 100644
index 000000000..d11d1495c
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/debounce.md
@@ -0,0 +1,12 @@
+---
+title: "debounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/debounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/debounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/queue.md b/mintlify/pacer/framework/react/examples/queue.md
new file mode 100644
index 000000000..465520ffc
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/queue.md
@@ -0,0 +1,12 @@
+---
+title: "queue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/queue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/queue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/rateLimit.md b/mintlify/pacer/framework/react/examples/rateLimit.md
new file mode 100644
index 000000000..488848d26
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/rateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "rateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/rateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/rateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/react-query-debounced-prefetch.md b/mintlify/pacer/framework/react/examples/react-query-debounced-prefetch.md
new file mode 100644
index 000000000..4683f9fa2
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/react-query-debounced-prefetch.md
@@ -0,0 +1,12 @@
+---
+title: "React Query Debounced Prefetch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/react-query-debounced-prefetch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/react-query-debounced-prefetch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/react-query-queued-prefetch.md b/mintlify/pacer/framework/react/examples/react-query-queued-prefetch.md
new file mode 100644
index 000000000..e66ded7d8
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/react-query-queued-prefetch.md
@@ -0,0 +1,12 @@
+---
+title: "React Query Queued Prefetch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/react-query-queued-prefetch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/react-query-queued-prefetch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/react-query-throttled-prefetch.md b/mintlify/pacer/framework/react/examples/react-query-throttled-prefetch.md
new file mode 100644
index 000000000..79ccdfac8
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/react-query-throttled-prefetch.md
@@ -0,0 +1,12 @@
+---
+title: "React Query Throttled Prefetch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/react-query-throttled-prefetch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/react-query-throttled-prefetch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/throttle.md b/mintlify/pacer/framework/react/examples/throttle.md
new file mode 100644
index 000000000..2d31997f9
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/throttle.md
@@ -0,0 +1,12 @@
+---
+title: "throttle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/throttle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/throttle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncBatchedCallback.md b/mintlify/pacer/framework/react/examples/useAsyncBatchedCallback.md
new file mode 100644
index 000000000..0fbcf11cc
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncBatcher.md b/mintlify/pacer/framework/react/examples/useAsyncBatcher.md
new file mode 100644
index 000000000..a72145f8d
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncDebouncedCallback.md b/mintlify/pacer/framework/react/examples/useAsyncDebouncedCallback.md
new file mode 100644
index 000000000..68ec5cab8
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncDebouncer.md b/mintlify/pacer/framework/react/examples/useAsyncDebouncer.md
new file mode 100644
index 000000000..4bc6fcd91
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncQueuedState.md b/mintlify/pacer/framework/react/examples/useAsyncQueuedState.md
new file mode 100644
index 000000000..b2b7c8fe5
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncQueuedState.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncQueuedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncQueuedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncQueuedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncQueuer.md b/mintlify/pacer/framework/react/examples/useAsyncQueuer.md
new file mode 100644
index 000000000..28af9d622
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncRateLimiter.md b/mintlify/pacer/framework/react/examples/useAsyncRateLimiter.md
new file mode 100644
index 000000000..a2f35d7bd
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncRateLimiterWithPersister.md b/mintlify/pacer/framework/react/examples/useAsyncRateLimiterWithPersister.md
new file mode 100644
index 000000000..8e20af91a
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useAsyncThrottler.md b/mintlify/pacer/framework/react/examples/useAsyncThrottler.md
new file mode 100644
index 000000000..344044acc
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useAsyncThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "useAsyncThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useAsyncThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useBatchedCallback.md b/mintlify/pacer/framework/react/examples/useBatchedCallback.md
new file mode 100644
index 000000000..3f914dc59
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useBatchedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useBatchedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useBatchedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useBatchedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useBatcher.md b/mintlify/pacer/framework/react/examples/useBatcher.md
new file mode 100644
index 000000000..6fa7f7428
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "useBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useDebouncedCallback.md b/mintlify/pacer/framework/react/examples/useDebouncedCallback.md
new file mode 100644
index 000000000..a21055d4b
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useDebouncedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useDebouncedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useDebouncedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useDebouncedState.md b/mintlify/pacer/framework/react/examples/useDebouncedState.md
new file mode 100644
index 000000000..4357823c1
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useDebouncedState.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useDebouncedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useDebouncedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useDebouncedValue.md b/mintlify/pacer/framework/react/examples/useDebouncedValue.md
new file mode 100644
index 000000000..b2871782e
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useDebouncedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useDebouncedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useDebouncedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useDebouncer.md b/mintlify/pacer/framework/react/examples/useDebouncer.md
new file mode 100644
index 000000000..a10acced4
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "useDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useQueuedState.md b/mintlify/pacer/framework/react/examples/useQueuedState.md
new file mode 100644
index 000000000..212610337
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useQueuedState.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useQueuedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useQueuedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useQueuedValue.md b/mintlify/pacer/framework/react/examples/useQueuedValue.md
new file mode 100644
index 000000000..9ae4e477b
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useQueuedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useQueuedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useQueuedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useQueuer.md b/mintlify/pacer/framework/react/examples/useQueuer.md
new file mode 100644
index 000000000..13c5948a1
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useQueuerWithPersister.md b/mintlify/pacer/framework/react/examples/useQueuerWithPersister.md
new file mode 100644
index 000000000..a5ad07476
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useQueuerWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useQueuerWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useQueuerWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useQueuerWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useRateLimitedCallback.md b/mintlify/pacer/framework/react/examples/useRateLimitedCallback.md
new file mode 100644
index 000000000..293d710dd
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useRateLimitedCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimitedCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useRateLimitedCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useRateLimitedState.md b/mintlify/pacer/framework/react/examples/useRateLimitedState.md
new file mode 100644
index 000000000..c81d78c95
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useRateLimitedState.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimitedState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useRateLimitedState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useRateLimitedValue.md b/mintlify/pacer/framework/react/examples/useRateLimitedValue.md
new file mode 100644
index 000000000..b1661240a
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useRateLimitedValue.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimitedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimitedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useRateLimitedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useRateLimiter.md b/mintlify/pacer/framework/react/examples/useRateLimiter.md
new file mode 100644
index 000000000..18a64ca77
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useRateLimiterWithPersister.md b/mintlify/pacer/framework/react/examples/useRateLimiterWithPersister.md
new file mode 100644
index 000000000..c7c5fd60a
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useRateLimiterWithPersister.md
@@ -0,0 +1,12 @@
+---
+title: "useRateLimiterWithPersister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimiterWithPersister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useRateLimiterWithPersister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useThrottledCallback.md b/mintlify/pacer/framework/react/examples/useThrottledCallback.md
new file mode 100644
index 000000000..c339b295f
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useThrottledCallback.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledCallback"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useThrottledCallback)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useThrottledCallback)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useThrottledState.md b/mintlify/pacer/framework/react/examples/useThrottledState.md
new file mode 100644
index 000000000..14f7de5c6
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useThrottledState.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledState"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useThrottledState)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useThrottledState)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useThrottledValue.md b/mintlify/pacer/framework/react/examples/useThrottledValue.md
new file mode 100644
index 000000000..c9c20ee4b
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useThrottledValue.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottledValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useThrottledValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useThrottledValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/examples/useThrottler.md b/mintlify/pacer/framework/react/examples/useThrottler.md
new file mode 100644
index 000000000..e20e3168c
--- /dev/null
+++ b/mintlify/pacer/framework/react/examples/useThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "useThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/react/examples/useThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/react/useThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/react/reference/functions/PacerProvider.md b/mintlify/pacer/framework/react/reference/functions/PacerProvider.md
new file mode 100644
index 000000000..0f277df7e
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/PacerProvider.md
@@ -0,0 +1,22 @@
+---
+id: PacerProvider
+title: PacerProvider
+---
+
+# Function: PacerProvider()
+
+```ts
+function PacerProvider(__namedParameters): Element;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:48](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L48)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`PacerProviderProps`](/pacer/framework/react/reference/interfaces/PacerProviderProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncBatchedCallback.md b/mintlify/pacer/framework/react/reference/functions/useAsyncBatchedCallback.md
new file mode 100644
index 000000000..71bd3c8e3
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncBatchedCallback.md
@@ -0,0 +1,82 @@
+---
+id: useAsyncBatchedCallback
+title: useAsyncBatchedCallback
+---
+
+# Function: useAsyncBatchedCallback()
+
+```ts
+function useAsyncBatchedCallback<TValue>(fn, options): (item) => Promise<void>;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatchedCallback.ts#L42)
+
+A React hook that creates a batched version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncBatcher` hook,
+providing a stable, batched async function reference for use in React components.
+
+The batched async function will collect individual calls into batches and execute them
+when batch conditions are met (max size reached, wait time elapsed, or custom logic).
+The returned function always returns a promise that resolves with undefined (since the
+batch function processes multiple items together).
+
+This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic
+async batching needs. However, it does not expose the underlying AsyncBatcher instance.
+
+For advanced usage requiring features like:
+- Manual batch execution
+- Access to batch results and state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncBatcher` hook instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`unknown`\>
+
+### options
+
+[`ReactAsyncBatcherOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions)\&lt;`TValue`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(item): Promise<void>;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`Promise`\&lt;`void`\>
+
+## Example
+
+```tsx
+// Batch API requests
+const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
+  const results = await Promise.all(requests.map(req => fetch(req.url)));
+  return results.map(res => res.json());
+}, {
+  maxSize: 10,   // Process when 10 requests collected
+  wait: 1000     // Or after 1 second
+});
+
+// Use in event handlers
+<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
+  Track Event
+</button>
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncBatcher.md b/mintlify/pacer/framework/react/reference/functions/useAsyncBatcher.md
new file mode 100644
index 000000000..1ad20875a
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncBatcher.md
@@ -0,0 +1,221 @@
+---
+id: useAsyncBatcher
+title: useAsyncBatcher
+---
+
+# Function: useAsyncBatcher()
+
+```ts
+function useAsyncBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): ReactAsyncBatcher<TValue, TSelected>;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:235](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L235)
+
+A React hook that creates an `AsyncBatcher` instance for managing asynchronous batches of items.
+
+This is the async version of the useBatcher hook. Unlike the sync version, this async batcher:
+- Handles promises and returns results from batch executions
+- Provides error handling with configurable error behavior
+- Tracks success, error, and settle counts separately
+- Has state tracking for when batches are executing
+- Returns the result of the batch function execution
+
+Features:
+- Configurable batch size and wait time
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+- Error handling for failed batch operations
+- Automatic or manual batch processing
+
+The batcher collects items and processes them in batches based on:
+- Maximum batch size (number of items per batch)
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and batcher instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncBatcher instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of batch executions that have resulted in errors
+- `failedItems`: Array of items that failed during batch processing
+- `isEmpty`: Whether the batcher has no items to process
+- `isExecuting`: Whether a batch is currently being processed asynchronously
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `isRunning`: Whether the batcher is active and will process items automatically
+- `items`: Array of items currently queued for batch processing
+- `lastResult`: The result from the most recent batch execution
+- `settleCount`: Number of batch executions that have completed (success or error)
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')
+- `successCount`: Number of batch executions that have completed successfully
+- `totalItemsProcessed`: Total number of items processed across all batches
+- `totalItemsFailed`: Total number of items that have failed processing
+
+## Unmount behavior
+
+By default, the hook cancels any pending batch and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = useAsyncBatcher(fn, {
+  maxSize: 10,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your batch function updates React state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`ReactAsyncBatcherOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactAsyncBatcher`](/pacer/framework/react/reference/interfaces/ReactAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Basic async batcher for API requests - no reactive state subscriptions
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncBatcher.Subscribe selector={(state) => ({ size: state.size, isExecuting: state.isExecuting })}>
+  {({ size, isExecuting }) => (
+    <div>Batch: {size} items, {isExecuting ? 'Processing' : 'Ready'}</div>
+  )}
+</asyncBatcher.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount,
+    totalItemsProcessed: state.totalItemsProcessed
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  {
+    maxSize: 10,
+    wait: 2000,
+    onError: (error) => console.error('Batch processing failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    failedItems: state.failedItems,
+    totalItemsFailed: state.totalItemsFailed
+  })
+);
+
+// Complete example with all callbacks
+const asyncBatcher = useAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  {
+    maxSize: 10,
+    wait: 2000,
+    onSuccess: (result) => {
+      console.log('Batch processed successfully:', result);
+    },
+    onError: (error) => {
+      console.error('Batch processing failed:', error);
+    }
+  }
+);
+
+// Add items to batch
+asyncBatcher.addItem(newItem);
+
+// Manually execute batch
+const result = await asyncBatcher.execute();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult, size } = asyncBatcher.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncedCallback.md b/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncedCallback.md
new file mode 100644
index 000000000..0d7b18bc8
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncedCallback.md
@@ -0,0 +1,82 @@
+---
+id: useAsyncDebouncedCallback
+title: useAsyncDebouncedCallback
+---
+
+# Function: useAsyncDebouncedCallback()
+
+```ts
+function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts:44](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts#L44)
+
+A React hook that creates a debounced version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncDebouncer` hook,
+providing a stable, debounced async function reference for use in React components.
+
+The debounced async function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again. The returned function always returns a promise
+that resolves or rejects with the result of the original async function.
+
+This hook provides a simpler API compared to `useAsyncDebouncer`, making it ideal for basic
+async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution/error state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncDebouncer` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Debounce an async search handler
+const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
+  const results = await fetchSearchResults(query);
+  return results;
+}, {
+  wait: 500 // Wait 500ms between executions
+});
+
+// Use in an input
+<input
+  type="search"
+  onChange={e => handleSearch(e.target.value)}
+/>
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncer.md b/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncer.md
new file mode 100644
index 000000000..8464b625a
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncDebouncer.md
@@ -0,0 +1,199 @@
+---
+id: useAsyncDebouncer
+title: useAsyncDebouncer
+---
+
+# Function: useAsyncDebouncer()
+
+```ts
+function useAsyncDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactAsyncDebouncer<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:214](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L214)
+
+A low-level React hook that creates an `AsyncDebouncer` instance to delay execution of an async function.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.
+Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing
+or input changes where you only want to execute the handler after the events have stopped occurring.
+
+Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until
+the function stops being called for the specified delay period.
+
+Unlike the non-async Debouncer, this async version supports returning values from the debounced function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the debounced function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and debouncer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncDebouncer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the debounced function is currently executing asynchronously
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastResult`: The result from the most recent successful function execution
+- `settleCount`: Number of function executions that have completed (success or error)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = useAsyncDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your debounced function updates React state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactAsyncDebouncer`](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<searchDebouncer.Subscribe selector={(state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })}>
+  {({ isExecuting, isPending }) => (
+    <div>{isExecuting || isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</searchDebouncer.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const searchDebouncer = useAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  {
+    wait: 500,
+    onError: (error) => console.error('Search failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    status: state.status
+  })
+);
+
+// With state management
+const [results, setResults] = useState([]);
+const { maybeExecute, state } = useAsyncDebouncer(
+  async (searchTerm) => {
+    const data = await searchAPI(searchTerm);
+    setResults(data);
+  },
+  {
+    wait: 300,
+    leading: true,   // Execute immediately on first call
+    trailing: false, // Skip trailing edge updates
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult } = state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncQueuedState.md b/mintlify/pacer/framework/react/reference/functions/useAsyncQueuedState.md
new file mode 100644
index 000000000..f34dc940f
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncQueuedState.md
@@ -0,0 +1,186 @@
+---
+id: useAsyncQueuedState
+title: useAsyncQueuedState
+---
+
+# Function: useAsyncQueuedState()
+
+```ts
+function useAsyncQueuedState<TValue, TSelected>(
+   fn, 
+   options, 
+   selector?): [TValue[], ReactAsyncQueuer<TValue, TSelected>];
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuedState.ts:151](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuedState.ts#L151)
+
+A higher-level React hook that creates an `AsyncQueuer` instance with built-in state management.
+
+This hook combines an AsyncQueuer with React state to automatically track the queue items.
+It returns a tuple containing:
+- The current array of queued items as React state
+- The queuer instance with methods to control the queue
+
+The queue can be configured with:
+- Maximum concurrent operations
+- Maximum queue size
+- Processing function for queue items
+- Various lifecycle callbacks
+
+The state will automatically update whenever items are:
+- Added to the queue
+- Removed from the queue
+- Started processing
+- Completed processing
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying async queuer instance.
+The `selector` parameter allows you to specify which async queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available async queuer state properties:
+- `activeItems`: Items currently being processed by the queuer
+- `errorCount`: Number of task executions that have resulted in errors
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `lastResult`: The result from the most recent task execution
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `settledCount`: Number of task executions that have completed (success or error)
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+- `successCount`: Number of task executions that have completed successfully
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`AsyncQueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`ReactAsyncQueuerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`[], [`ReactAsyncQueuer`](/pacer/framework/react/reference/interfaces/ReactAsyncQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  {
+    concurrency: 2,
+    maxSize: 100,
+    started: true
+  }
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue items)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    items: state.items,
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    activeItems: state.activeItems,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settledCount: state.settledCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const [queueItems, asyncQueuer] = useAsyncQueuedState(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: true },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Add items to queue - state updates automatically
+asyncQueuer.addItem(async () => {
+  const result = await fetchData();
+  return result;
+});
+
+// Start processing
+asyncQueuer.start();
+
+// Stop processing
+asyncQueuer.stop();
+
+// queueItems reflects current queue state
+const pendingCount = asyncQueuer.peekPendingItems().length;
+
+// Access the selected async queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, activeItems } = asyncQueuer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncQueuer.md b/mintlify/pacer/framework/react/reference/functions/useAsyncQueuer.md
new file mode 100644
index 000000000..74e7fb9c0
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncQueuer.md
@@ -0,0 +1,221 @@
+---
+id: useAsyncQueuer
+title: useAsyncQueuer
+---
+
+# Function: useAsyncQueuer()
+
+```ts
+function useAsyncQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): ReactAsyncQueuer<TValue, TSelected>;
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:235](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L235)
+
+A lower-level React hook that creates an `AsyncQueuer` instance for managing an async queue of items.
+
+Features:
+- Priority queue support via getPriority option
+- Configurable concurrency limit
+- Task success/error/completion callbacks
+- FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+- Pause/resume task processing
+- Task cancellation
+- Item expiration to clear stale items from the queue
+
+Tasks are processed concurrently up to the configured concurrency limit. When a task completes,
+the next pending task is processed if below the concurrency limit.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and queuer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncQueuer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `activeItems`: Items currently being processed by the queuer
+- `errorCount`: Number of task executions that have resulted in errors
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `lastResult`: The result from the most recent task execution
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `settledCount`: Number of task executions that have completed (success or error)
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+- `successCount`: Number of task executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook stops the queuer and aborts any in-flight task executions when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queuer = useAsyncQueuer(fn, {
+  concurrency: 2,
+  started: false,
+  onUnmount: (q) => q.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your task function updates React state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`ReactAsyncQueuerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactAsyncQueuer`](/pacer/framework/react/reference/interfaces/ReactAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncQueuer.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {({ size, isRunning }) => (
+    <div>Queue: {size} items, {isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</asyncQueuer.Subscribe>
+
+// Opt-in to re-render when queue size changes at hook level (optimized for displaying queue length)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    activeItems: state.activeItems,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  { concurrency: 2, maxSize: 100, started: false },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settledCount: state.settledCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncQueuer = useAsyncQueuer(
+  async (item) => {
+    const result = await processItem(item);
+    return result;
+  },
+  {
+    concurrency: 2,
+    maxSize: 100,
+    started: false,
+    onSuccess: (result) => {
+      console.log('Item processed:', result);
+    },
+    onError: (error) => {
+      console.error('Processing failed:', error);
+    }
+  },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Add items to queue
+asyncQueuer.addItem(newItem);
+
+// Start processing
+asyncQueuer.start();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isRunning, activeItems } = asyncQueuer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimitedCallback.md b/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimitedCallback.md
new file mode 100644
index 000000000..70e97f4bd
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimitedCallback.md
@@ -0,0 +1,97 @@
+---
+id: useAsyncRateLimitedCallback
+title: useAsyncRateLimitedCallback
+---
+
+# Function: useAsyncRateLimitedCallback()
+
+```ts
+function useAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimitedCallback.ts:59](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimitedCallback.ts#L59)
+
+A React hook that creates a rate-limited version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncRateLimiter` hook,
+providing a stable, async rate-limited function reference for use in React components.
+
+Async rate limiting is a "hard limit" approach for async functions: it allows all calls
+until the limit is reached, then blocks (rejects) subsequent calls until the window resets.
+Unlike throttling or debouncing, it does not attempt to space out or collapse calls.
+This can lead to bursts of rapid executions followed by periods where all calls are blocked.
+
+The async rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns, consider:
+- useAsyncThrottledCallback: When you want consistent spacing between executions (e.g. UI updates)
+- useAsyncDebouncedCallback: When you want to collapse rapid calls into a single execution (e.g. search input)
+
+Async rate limiting should primarily be used when you need to enforce strict limits
+on async operations, like API rate limits or other scenarios requiring hard caps
+on execution frequency.
+
+This hook provides a simpler API compared to `useAsyncRateLimiter`, making it ideal for basic
+async rate limiting needs. However, it does not expose the underlying AsyncRateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useAsyncRateLimiter` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Rate limit async API calls to maximum 5 calls per minute with a sliding window
+const makeApiCall = useAsyncRateLimitedCallback(
+  async (data: ApiData) => {
+    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+  },
+  {
+    limit: 5,
+    window: 60000, // 1 minute
+    windowType: 'sliding',
+    onReject: () => {
+      console.warn('API rate limit reached. Please wait before trying again.');
+    }
+  }
+);
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimiter.md b/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimiter.md
new file mode 100644
index 000000000..89172266e
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncRateLimiter.md
@@ -0,0 +1,216 @@
+---
+id: useAsyncRateLimiter
+title: useAsyncRateLimiter
+---
+
+# Function: useAsyncRateLimiter()
+
+```ts
+function useAsyncRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactAsyncRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:231](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L231)
+
+A low-level React hook that creates an `AsyncRateLimiter` instance to limit how many times an async function can execute within a time window.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Rate limiting allows an async function to execute up to a specified limit within a time window,
+then blocks subsequent calls until the window passes. This is useful for respecting API rate limits,
+managing resource constraints, or controlling bursts of async operations.
+
+Unlike the non-async RateLimiter, this async version supports returning values from the rate-limited function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the rate-limited function.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and rate limiter instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncRateLimiter instance
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of function executions that have resulted in errors
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `isExecuting`: Whether the rate-limited function is currently executing asynchronously
+- `lastResult`: The result from the most recent successful function execution
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+- `settleCount`: Number of function executions that have completed (success or error)
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactAsyncRateLimiter`](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data; // Return value is preserved
+  },
+  { limit: 5, window: 1000 } // 5 calls per second
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+  {({ rejectionCount, isExecuting }) => (
+    <div>Rejected: {rejectionCount}, {isExecuting ? 'Executing' : 'Idle'}</div>
+  )}
+</asyncRateLimiter.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ isExecuting: state.isExecuting })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Opt-in to re-render when error/rejection state changes (optimized for error handling)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  {
+    limit: 5,
+    window: 1000,
+    onError: (error) => console.error('API call failed:', error),
+    onReject: (rateLimiter) => console.log('Rate limit exceeded')
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settleCount: state.settleCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const asyncRateLimiter = useAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With state management and return value
+const [data, setData] = useState(null);
+const { maybeExecute, state } = useAsyncRateLimiter(
+  async (query) => {
+    const result = await searchAPI(query);
+    setData(result);
+    return result; // Return value can be used by the caller
+  },
+  {
+    limit: 10,
+    window: 60000, // 10 calls per minute
+    onReject: (rateLimiter) => {
+      console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+    },
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult, rejectionCount } = state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncThrottledCallback.md b/mintlify/pacer/framework/react/reference/functions/useAsyncThrottledCallback.md
new file mode 100644
index 000000000..eca2421cc
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncThrottledCallback.md
@@ -0,0 +1,80 @@
+---
+id: useAsyncThrottledCallback
+title: useAsyncThrottledCallback
+---
+
+# Function: useAsyncThrottledCallback()
+
+```ts
+function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottledCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottledCallback.ts#L42)
+
+A React hook that creates a throttled version of an async callback function.
+This hook is a convenient wrapper around the `useAsyncThrottler` hook,
+providing a stable, throttled async function reference for use in React components.
+
+The throttled async function will execute at most once within the specified wait time period,
+regardless of how many times it is called. If called multiple times during the wait period,
+only the first invocation will execute, and subsequent calls will be ignored until
+the wait period has elapsed. The returned function always returns a promise
+that resolves or rejects with the result of the original async function.
+
+This hook provides a simpler API compared to `useAsyncThrottler`, making it ideal for basic
+async throttling needs. However, it does not expose the underlying AsyncThrottler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution/error state
+- Custom useCallback dependencies
+
+Consider using the `useAsyncThrottler` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn>>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+## Example
+
+```tsx
+// Throttle an async API call
+const handleApiCall = useAsyncThrottledCallback(async (data) => {
+  const result = await sendDataToServer(data);
+  return result;
+}, {
+  wait: 200 // Execute at most once every 200ms
+});
+
+// Use in an event handler
+<button onClick={() => handleApiCall(formData)}>Send</button>
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useAsyncThrottler.md b/mintlify/pacer/framework/react/reference/functions/useAsyncThrottler.md
new file mode 100644
index 000000000..bccf047b7
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useAsyncThrottler.md
@@ -0,0 +1,210 @@
+---
+id: useAsyncThrottler
+title: useAsyncThrottler
+---
+
+# Function: useAsyncThrottler()
+
+```ts
+function useAsyncThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactAsyncThrottler<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:225](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L225)
+
+A low-level React hook that creates an `AsyncThrottler` instance to limit how often an async function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Async throttling ensures an async function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting expensive API calls,
+database operations, or other async tasks.
+
+Unlike the non-async Throttler, this async version supports returning values from the throttled function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the throttled function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and throttler instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncThrottler instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the throttled function is currently executing asynchronously
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `lastResult`: The result from the most recent successful function execution
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `settleCount`: Number of function executions that have completed (success or error)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = useAsyncThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your throttled function updates React state, those updates may run after the component has
+unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+accordingly when using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactAsyncThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactAsyncThrottler`](/pacer/framework/react/reference/interfaces/ReactAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data; // Return value is preserved
+  },
+  { wait: 1000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<asyncThrottler.Subscribe selector={(state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })}>
+  {({ isExecuting, isPending }) => (
+    <div>{isExecuting || isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</asyncThrottler.Subscribe>
+
+// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when results are available (optimized for data display)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount,
+    settleCount: state.settleCount
+  })
+);
+
+// Opt-in to re-render when error state changes (optimized for error handling)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  {
+    wait: 1000,
+    onError: (error) => console.error('API call failed:', error)
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const asyncThrottler = useAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With state management and return value
+const [data, setData] = useState(null);
+const { maybeExecute, state } = useAsyncThrottler(
+  async (query) => {
+    const result = await searchAPI(query);
+    setData(result);
+    return result; // Return value can be used by the caller
+  },
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false  // Skip trailing edge updates
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult } = state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useBatchedCallback.md b/mintlify/pacer/framework/react/reference/functions/useBatchedCallback.md
new file mode 100644
index 000000000..38e918dfa
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useBatchedCallback.md
@@ -0,0 +1,80 @@
+---
+id: useBatchedCallback
+title: useBatchedCallback
+---
+
+# Function: useBatchedCallback()
+
+```ts
+function useBatchedCallback<TValue>(fn, options): (item) => void;
+```
+
+Defined in: [react-pacer/src/batcher/useBatchedCallback.ts:40](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatchedCallback.ts#L40)
+
+A React hook that creates a batched version of a callback function.
+This hook is essentially a wrapper around the basic `batch` function
+that is exported from `@tanstack/pacer`,
+but optimized for React with reactive options and a stable function reference.
+
+The batched function will collect individual calls into batches and execute them
+when batch conditions are met (max size reached, wait time elapsed, or custom logic).
+
+This hook provides a simpler API compared to `useBatcher`, making it ideal for basic
+batching needs. However, it does not expose the underlying Batcher instance.
+
+For advanced usage requiring features like:
+- Manual batch execution
+- Access to batch state and metrics
+- Custom useCallback dependencies
+
+Consider using the `useBatcher` hook instead.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`ReactBatcherOptions`](/pacer/framework/react/reference/interfaces/ReactBatcherOptions)\&lt;`TValue`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(item): void;
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Batch analytics events
+const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
+  sendAnalytics(events);
+}, {
+  maxSize: 5,    // Process when 5 events collected
+  wait: 2000     // Or after 2 seconds
+});
+
+// Use in event handlers
+<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
+  Click me
+</button>
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useBatcher.md b/mintlify/pacer/framework/react/reference/functions/useBatcher.md
new file mode 100644
index 000000000..ca6ef08ae
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useBatcher.md
@@ -0,0 +1,172 @@
+---
+id: useBatcher
+title: useBatcher
+---
+
+# Function: useBatcher()
+
+```ts
+function useBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): ReactBatcher<TValue, TSelected>;
+```
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:183](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L183)
+
+A React hook that creates and manages a Batcher instance.
+
+This is a lower-level hook that provides direct access to the Batcher's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.) by utilizing the onItemsChange callback.
+
+The Batcher collects items and processes them in batches based on configurable conditions:
+- Maximum batch size
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of batch executions that have been completed
+- `isEmpty`: Whether the batcher has no items to process
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `isRunning`: Whether the batcher is active and will process items automatically
+- `items`: Array of items currently queued for batch processing
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending')
+- `totalItemsProcessed`: Total number of items processed across all batches
+
+## Unmount behavior
+
+By default, the hook cancels any pending batch when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = useBatcher(fn, {
+  maxSize: 5,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`ReactBatcherOptions`](/pacer/framework/react/reference/interfaces/ReactBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactBatcher`](/pacer/framework/react/reference/interfaces/ReactBatcher)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<batcher.Subscribe selector={(state) => ({ size: state.size, isPending: state.isPending })}>
+  {({ size, isPending }) => (
+    <div>Batch: {size} items, {isPending ? 'Pending' : 'Ready'}</div>
+  )}
+</batcher.Subscribe>
+
+// Opt-in to re-render when batch size changes at hook level (optimized for displaying queue size)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    totalItemsProcessed: state.totalItemsProcessed
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    isPending: state.isPending,
+    isRunning: state.isRunning,
+    status: state.status
+  })
+);
+
+// Example with custom state management and batching
+const [items, setItems] = useState([]);
+
+const batcher = useBatcher<number>(
+  (items) => console.log('Processing batch:', items),
+  {
+    maxSize: 5,
+    wait: 2000,
+    onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
+    getShouldExecute: (items) => items.length >= 3
+  }
+);
+
+// Add items to batch - they'll be processed when conditions are met
+batcher.addItem(1);
+batcher.addItem(2);
+batcher.addItem(3); // Triggers batch processing
+
+// Control the batcher
+batcher.stop();  // Pause batching
+batcher.start(); // Resume batching
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isPending } = batcher.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useDebouncedCallback.md b/mintlify/pacer/framework/react/reference/functions/useDebouncedCallback.md
new file mode 100644
index 000000000..8648b22d2
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useDebouncedCallback.md
@@ -0,0 +1,81 @@
+---
+id: useDebouncedCallback
+title: useDebouncedCallback
+---
+
+# Function: useDebouncedCallback()
+
+```ts
+function useDebouncedCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncedCallback.ts#L42)
+
+A React hook that creates a debounced version of a callback function.
+This hook is essentially a wrapper around the basic `debounce` function
+that is exported from `@tanstack/pacer`,
+but optimized for React with reactive options and a stable function reference.
+
+The debounced function will only execute after the specified wait time has elapsed
+since its last invocation. If called again before the wait time expires, the timer
+resets and starts waiting again.
+
+This hook provides a simpler API compared to `useDebouncer`, making it ideal for basic
+debouncing needs. However, it does not expose the underlying Debouncer instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useDebouncer` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactDebouncerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Debounce a search handler
+const handleSearch = useDebouncedCallback((query: string) => {
+  fetchSearchResults(query);
+}, {
+  wait: 500 // Wait 500ms between executions
+});
+
+// Use in an input
+<input
+  type="search"
+  onChange={(e) => handleSearch(e.target.value)}
+/>
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useDebouncedState.md b/mintlify/pacer/framework/react/reference/functions/useDebouncedState.md
new file mode 100644
index 000000000..ba2cbe389
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useDebouncedState.md
@@ -0,0 +1,115 @@
+---
+id: useDebouncedState
+title: useDebouncedState
+---
+
+# Function: useDebouncedState()
+
+```ts
+function useDebouncedState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncedState.ts:78](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncedState.ts#L78)
+
+A React hook that creates a debounced state value, combining React's useState with debouncing functionality.
+This hook provides both the current debounced value and methods to update it.
+
+The state value is only updated after the specified wait time has elapsed since the last update attempt.
+If another update is attempted before the wait time expires, the timer resets and starts waiting again.
+This is useful for handling frequent state updates that should be throttled, like search input values
+or window resize dimensions.
+
+The hook returns a tuple containing:
+- The current debounced value
+- A function to update the debounced value
+- The debouncer instance with additional control methods
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `DebouncerState`\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactDebouncerOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, [`ReactDebouncer`](/pacer/framework/react/reference/interfaces/ReactDebouncer)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
+  wait: 500 // Wait 500ms after last keystroke
+});
+
+// Opt-in to re-render when pending state changes (optimized for loading indicators)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when debouncing status changes (optimized for status display)
+const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
+  '',
+  { wait: 500 },
+  (state) => ({
+    status: state.status,
+    canLeadingExecute: state.canLeadingExecute
+  })
+);
+
+// Update value - will be debounced
+const handleChange = (e) => {
+  setSearchTerm(e.target.value);
+};
+
+// Access the selected debouncer state (will be empty object {} unless selector provided)
+const { isPending, executionCount } = debouncer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useDebouncedValue.md b/mintlify/pacer/framework/react/reference/functions/useDebouncedValue.md
new file mode 100644
index 000000000..2e2e272e7
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useDebouncedValue.md
@@ -0,0 +1,124 @@
+---
+id: useDebouncedValue
+title: useDebouncedValue
+---
+
+# Function: useDebouncedValue()
+
+```ts
+function useDebouncedValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncedValue.ts:87](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncedValue.ts#L87)
+
+A React hook that creates a debounced value that updates only after a specified delay.
+Unlike useDebouncedState, this hook automatically tracks changes to the input value
+and updates the debounced value accordingly.
+
+The debounced value will only update after the specified wait time has elapsed since
+the last change to the input value. If the input value changes again before the wait
+time expires, the timer resets and starts waiting again.
+
+This is useful for deriving debounced values from props or state that change frequently,
+like search queries or form inputs, where you want to limit how often downstream effects
+or calculations occur.
+
+The hook returns the current debounced value and the underlying debouncer instance.
+The debouncer instance can be used to access additional functionality like cancellation
+and execution counts.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `DebouncerState`\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactDebouncerOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`ReactDebouncer`](/pacer/framework/react/reference/interfaces/ReactDebouncer)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchQuery, setSearchQuery] = useState('');
+const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
+  wait: 500 // Wait 500ms after last change
+});
+
+// Opt-in to re-render when pending state changes (optimized for loading indicators)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when debouncing status changes (optimized for status display)
+const [debouncedQuery, debouncer] = useDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({
+    status: state.status,
+    canLeadingExecute: state.canLeadingExecute
+  })
+);
+
+// debouncedQuery will update 500ms after searchQuery stops changing
+useEffect(() => {
+  fetchSearchResults(debouncedQuery);
+}, [debouncedQuery]);
+
+// Handle input changes
+const handleChange = (e) => {
+  setSearchQuery(e.target.value);
+};
+
+// Access the selected debouncer state (will be empty object {} unless selector provided)
+const { isPending, executionCount } = debouncer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useDebouncer.md b/mintlify/pacer/framework/react/reference/functions/useDebouncer.md
new file mode 100644
index 000000000..907e09a0d
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useDebouncer.md
@@ -0,0 +1,148 @@
+---
+id: useDebouncer
+title: useDebouncer
+---
+
+# Function: useDebouncer()
+
+```ts
+function useDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactDebouncer<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:163](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L163)
+
+A React hook that creates and manages a Debouncer instance.
+
+This is a lower-level hook that provides direct access to the Debouncer's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.).
+
+This hook provides debouncing functionality to limit how often a function can be called,
+waiting for a specified delay before executing the latest call. This is useful for handling
+frequent events like window resizing, scroll events, or real-time search inputs.
+
+The debouncer will only execute the function after the specified wait time has elapsed
+since the last call. If the function is called again before the wait time expires, the
+timer resets and starts waiting again.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = useDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactDebouncerOptions`](/pacer/framework/react/reference/interfaces/ReactDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactDebouncer`](/pacer/framework/react/reference/interfaces/ReactDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<searchDebouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Searching...' : 'Ready'}</div>
+  )}
+</searchDebouncer.Subscribe>
+
+// Opt-in to re-render when isPending changes at hook level (optimized for loading states)
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to re-render when executionCount changes (optimized for tracking execution)
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Multiple state properties - re-render when any of these change
+const searchDebouncer = useDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+);
+
+// In an event handler
+const handleChange = (e) => {
+  searchDebouncer.maybeExecute(e.target.value);
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending } = searchDebouncer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useDefaultPacerOptions.md b/mintlify/pacer/framework/react/reference/functions/useDefaultPacerOptions.md
new file mode 100644
index 000000000..ca62082b4
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useDefaultPacerOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultPacerOptions
+title: useDefaultPacerOptions
+---
+
+# Function: useDefaultPacerOptions()
+
+```ts
+function useDefaultPacerOptions(): PacerProviderOptions;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:70](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L70)
+
+## Returns
+
+[`PacerProviderOptions`](/pacer/framework/react/reference/interfaces/PacerProviderOptions)
diff --git a/mintlify/pacer/framework/react/reference/functions/usePacerContext.md b/mintlify/pacer/framework/react/reference/functions/usePacerContext.md
new file mode 100644
index 000000000..77529e484
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/usePacerContext.md
@@ -0,0 +1,16 @@
+---
+id: usePacerContext
+title: usePacerContext
+---
+
+# Function: usePacerContext()
+
+```ts
+function usePacerContext(): PacerContextValue | null;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:66](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L66)
+
+## Returns
+
+`PacerContextValue` \| `null`
diff --git a/mintlify/pacer/framework/react/reference/functions/useQueuedState.md b/mintlify/pacer/framework/react/reference/functions/useQueuedState.md
new file mode 100644
index 000000000..0e4a7c548
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useQueuedState.md
@@ -0,0 +1,157 @@
+---
+id: useQueuedState
+title: useQueuedState
+---
+
+# Function: useQueuedState()
+
+```ts
+function useQueuedState<TValue, TSelected>(
+   fn, 
+   options, 
+   selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>];
+```
+
+Defined in: [react-pacer/src/queuer/useQueuedState.ts:119](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuedState.ts#L119)
+
+A React hook that creates a queuer with managed state, combining React's useState with queuing functionality.
+This hook provides both the current queue state and queue control methods.
+
+The queue state is automatically updated whenever items are added, removed, or reordered in the queue.
+All queue operations are reflected in the state array returned by the hook.
+
+The queue can be started and stopped to automatically process items at a specified interval,
+making it useful as a scheduler. When started, it will process one item per tick, with an
+optional wait time between ticks.
+
+The hook returns a tuple containing:
+- The current queue state as an array
+- The queue instance with methods for queue manipulation
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying queuer instance.
+The `selector` parameter allows you to specify which queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available queuer state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`ReactQueuerOptions`](/pacer/framework/react/reference/interfaces/ReactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`[], (`item`, `position?`, `runOnItemsChange?`) => `boolean`, [`ReactQueuer`](/pacer/framework/react/reference/interfaces/ReactQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  {
+    initialItems: ['item1', 'item2'],
+    started: true,
+    wait: 1000,
+    getPriority: (item) => item.priority
+  }
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue items)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    items: state.items,
+    size: state.size,
+    isEmpty: state.isEmpty
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [items, addItem, queue] = useQueuedState(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add items to queue
+const handleAdd = (item) => {
+  addItem(item);
+};
+
+// Start automatic processing
+const startProcessing = () => {
+  queue.start();
+};
+
+// Stop automatic processing
+const stopProcessing = () => {
+  queue.stop();
+};
+
+// Manual processing still available
+const handleProcess = () => {
+  const nextItem = queue.getNextItem();
+  if (nextItem) {
+    processItem(nextItem);
+  }
+};
+
+// Access the selected queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queue.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useQueuedValue.md b/mintlify/pacer/framework/react/reference/functions/useQueuedValue.md
new file mode 100644
index 000000000..0825534d1
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useQueuedValue.md
@@ -0,0 +1,140 @@
+---
+id: useQueuedValue
+title: useQueuedValue
+---
+
+# Function: useQueuedValue()
+
+```ts
+function useQueuedValue<TValue, TSelected>(
+   initialValue, 
+   options, 
+   selector?): [TValue, ReactQueuer<TValue, TSelected>];
+```
+
+Defined in: [react-pacer/src/queuer/useQueuedValue.ts:103](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuedValue.ts#L103)
+
+A React hook that creates a queued value that processes state changes in order with an optional delay.
+This hook uses useQueuer internally to manage a queue of state changes and apply them sequentially.
+
+The queued value will process changes in the order they are received, with optional delays between
+processing each change. This is useful for handling state updates that need to be processed
+in a specific order, like animations or sequential UI updates.
+
+The hook returns a tuple containing:
+- The current queued value
+- The queuer instance with control methods
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying queuer instance.
+The `selector` parameter allows you to specify which queuer state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available queuer state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### initialValue
+
+`TValue`
+
+### options
+
+[`ReactQueuerOptions`](/pacer/framework/react/reference/interfaces/ReactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`ReactQueuer`](/pacer/framework/react/reference/interfaces/ReactQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, queuer] = useQueuedValue(initialValue, {
+  wait: 500, // Wait 500ms between processing each change
+  started: true // Start processing immediately
+});
+
+// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when queue contents change (optimized for displaying queue status)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const [value, queuer] = useQueuedValue(
+  initialValue,
+  { wait: 500, started: true },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add changes to the queue
+const handleChange = (newValue) => {
+  queuer.addItem(newValue);
+};
+
+// Control the queue
+const pauseProcessing = () => {
+  queuer.stop();
+};
+
+const resumeProcessing = () => {
+  queuer.start();
+};
+
+// Access the selected queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queuer.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useQueuer.md b/mintlify/pacer/framework/react/reference/functions/useQueuer.md
new file mode 100644
index 000000000..e2b964ded
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useQueuer.md
@@ -0,0 +1,183 @@
+---
+id: useQueuer
+title: useQueuer
+---
+
+# Function: useQueuer()
+
+```ts
+function useQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): ReactQueuer<TValue, TSelected>;
+```
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:194](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L194)
+
+A React hook that creates and manages a Queuer instance.
+
+This is a lower-level hook that provides direct access to the Queuer's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (useState, Redux, Zustand, etc.) by utilizing the onItemsChange callback.
+
+For a hook with built-in state management, see useQueuedState.
+
+The Queuer extends the base Queue to add processing capabilities. Items are processed
+synchronously in order, with optional delays between processing each item. The queuer includes
+an internal tick mechanism that can be started and stopped, making it useful as a scheduler.
+When started, it will process one item per tick, with an optional wait time between ticks.
+
+By default uses FIFO (First In First Out) behavior, but can be configured for LIFO
+(Last In First Out) by specifying 'front' position when adding items.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Unmount behavior
+
+By default, the hook stops the queuer when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queue = useQueuer(fn, {
+  started: true,
+  wait: 1000,
+  onUnmount: (q) => q.flush()
+});
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`ReactQueuerOptions`](/pacer/framework/react/reference/interfaces/ReactQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactQueuer`](/pacer/framework/react/reference/interfaces/ReactQueuer)\&lt;`TValue`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 }
+);
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<queue.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {({ size, isRunning }) => (
+    <div>Queue: {size} items, {isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</queue.Subscribe>
+
+// Opt-in to re-render when queue size changes at hook level (optimized for displaying queue length)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    size: state.size,
+    isEmpty: state.isEmpty,
+    isFull: state.isFull
+  })
+);
+
+// Opt-in to re-render when processing state changes (optimized for loading indicators)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to re-render when execution metrics change (optimized for stats display)
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Example with custom state management and scheduling
+const [items, setItems] = useState([]);
+
+const queue = useQueuer(
+  (item) => console.log('Processing:', item),
+  {
+    started: true, // Start processing immediately
+    wait: 1000,    // Process one item every second
+    onItemsChange: (queue) => setItems(queue.peekAllItems()),
+    getPriority: (item) => item.priority // Process higher priority items first
+  }
+);
+
+// Add items to process - they'll be handled automatically
+queue.addItem('task1');
+queue.addItem('task2');
+
+// Control the scheduler
+queue.stop();  // Pause processing
+queue.start(); // Resume processing
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queue.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useRateLimitedCallback.md b/mintlify/pacer/framework/react/reference/functions/useRateLimitedCallback.md
new file mode 100644
index 000000000..26c59ea7c
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useRateLimitedCallback.md
@@ -0,0 +1,98 @@
+---
+id: useRateLimitedCallback
+title: useRateLimitedCallback
+---
+
+# Function: useRateLimitedCallback()
+
+```ts
+function useRateLimitedCallback<TFn>(fn, options): (...args) => boolean;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimitedCallback.ts:59](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimitedCallback.ts#L59)
+
+A React hook that creates a rate-limited version of a callback function.
+This hook is essentially a wrapper around the basic `rateLimiter` function
+that is exported from `@tanstack/pacer`,
+but optimized for React with reactive options and a stable function reference.
+
+Rate limiting is a simple "hard limit" approach - it allows all calls until the limit
+is reached, then blocks subsequent calls until the window resets. Unlike throttling
+or debouncing, it does not attempt to space out or intelligently collapse calls.
+This can lead to bursts of rapid executions followed by periods where all calls
+are blocked.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns, consider:
+- useThrottledCallback: When you want consistent spacing between executions (e.g. UI updates)
+- useDebouncedCallback: When you want to collapse rapid calls into a single execution (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits,
+like API rate limits or other scenarios requiring hard caps on execution frequency.
+
+This hook provides a simpler API compared to `useRateLimiter`, making it ideal for basic
+rate limiting needs. However, it does not expose the underlying RateLimiter instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useRateLimiter` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): boolean;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`boolean`
+
+## Example
+
+```tsx
+// Rate limit API calls to maximum 5 calls per minute with a sliding window
+const makeApiCall = useRateLimitedCallback(
+  (data: ApiData) => {
+    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+  },
+  {
+    limit: 5,
+    window: 60000, // 1 minute
+    windowType: 'sliding',
+    onReject: () => {
+      console.warn('API rate limit reached. Please wait before trying again.');
+    }
+  }
+);
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useRateLimitedState.md b/mintlify/pacer/framework/react/reference/functions/useRateLimitedState.md
new file mode 100644
index 000000000..5a3060fac
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useRateLimitedState.md
@@ -0,0 +1,141 @@
+---
+id: useRateLimitedState
+title: useRateLimitedState
+---
+
+# Function: useRateLimitedState()
+
+```ts
+function useRateLimitedState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimitedState.ts:107](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimitedState.ts#L107)
+
+A React hook that creates a rate-limited state value that enforces a hard limit on state updates within a time window.
+This hook combines React's useState with rate limiting functionality to provide controlled state updates.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- useThrottledState: When you want consistent spacing between updates (e.g. UI changes)
+- useDebouncedState: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- The rate-limited state value
+- A rate-limited setter function that respects the configured limits
+- The rateLimiter instance for additional control
+
+For more direct control over rate limiting without state management,
+consider using the lower-level useRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available rate limiter state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `RateLimiterState`
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, [`ReactRateLimiter`](/pacer/framework/react/reference/interfaces/ReactRateLimiter)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, rateLimiter] = useRateLimitedState(0, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const [value, setValue, rateLimiter] = useRateLimitedState(
+  0,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With rejection callback and fixed window
+const [value, setValue] = useRateLimitedState(0, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access rateLimiter methods if needed
+const handleSubmit = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    setValue(newValue);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected rate limiter state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useRateLimitedValue.md b/mintlify/pacer/framework/react/reference/functions/useRateLimitedValue.md
new file mode 100644
index 000000000..504d44ac2
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useRateLimitedValue.md
@@ -0,0 +1,130 @@
+---
+id: useRateLimitedValue
+title: useRateLimitedValue
+---
+
+# Function: useRateLimitedValue()
+
+```ts
+function useRateLimitedValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimitedValue.ts:96](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimitedValue.ts#L96)
+
+A high-level React hook that creates a rate-limited version of a value that updates at most a certain number of times within a time window.
+This hook uses React's useState internally to manage the rate-limited state.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- useThrottledValue: When you want consistent spacing between updates (e.g. UI changes)
+- useDebouncedValue: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- The rate-limited value that updates according to the configured rate limit
+- The rate limiter instance with control methods
+
+For more direct control over rate limiting behavior without React state management,
+consider using the lower-level useRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available rate limiter state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `RateLimiterState`
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`ReactRateLimiter`](/pacer/framework/react/reference/interfaces/ReactRateLimiter)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With rejection callback and fixed window
+const [rateLimitedValue, rateLimiter] = useRateLimitedValue(rawValue, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    console.log(`Update rejected. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access the selected rate limiter state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useRateLimiter.md b/mintlify/pacer/framework/react/reference/functions/useRateLimiter.md
new file mode 100644
index 000000000..e6c89e5ff
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useRateLimiter.md
@@ -0,0 +1,175 @@
+---
+id: useRateLimiter
+title: useRateLimiter
+---
+
+# Function: useRateLimiter()
+
+```ts
+function useRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:190](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L190)
+
+A low-level React hook that creates a `RateLimiter` instance to enforce rate limits on function execution.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+
+Rate limiting is a simple "hard limit" approach that allows executions until a maximum count is reached within
+a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,
+it does not attempt to space out or collapse executions intelligently.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns:
+- Use throttling when you want consistent spacing between executions (e.g. UI updates)
+- Use debouncing when you want to collapse rapid-fire events (e.g. search input)
+- Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+The hook returns an object containing:
+- maybeExecute: The rate-limited function that respects the configured limits
+- getExecutionCount: Returns the number of successful executions
+- getRejectionCount: Returns the number of rejected executions due to rate limiting
+- getRemainingInWindow: Returns how many more executions are allowed in the current window
+- reset: Resets the execution counts and window timing
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactRateLimiterOptions`](/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactRateLimiter`](/pacer/framework/react/reference/interfaces/ReactRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const rateLimiter = useRateLimiter(apiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+});
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejected: {rejectionCount} requests</div>
+  )}
+</rateLimiter.Subscribe>
+
+// Opt-in to re-render when execution count changes at hook level (optimized for tracking successful executions)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to re-render when execution times change (optimized for window calculations)
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// Multiple state properties - re-render when any of these change
+const rateLimiter = useRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({
+    executionCount: state.executionCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Monitor rate limit status
+const handleClick = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    rateLimiter.maybeExecute(data);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useThrottledCallback.md b/mintlify/pacer/framework/react/reference/functions/useThrottledCallback.md
new file mode 100644
index 000000000..1d0a9a89e
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useThrottledCallback.md
@@ -0,0 +1,82 @@
+---
+id: useThrottledCallback
+title: useThrottledCallback
+---
+
+# Function: useThrottledCallback()
+
+```ts
+function useThrottledCallback<TFn>(fn, options): (...args) => void;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottledCallback.ts:43](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottledCallback.ts#L43)
+
+A React hook that creates a throttled version of a callback function.
+This hook is essentially a wrapper around the basic `throttle` function
+that is exported from `@tanstack/pacer`,
+but optimized for React with reactive options and a stable function reference.
+
+The throttled function will execute at most once within the specified wait time period,
+regardless of how many times it is called. If called multiple times during the wait period,
+only the first invocation will execute, and subsequent calls will be ignored until
+the wait period has elapsed.
+
+This hook provides a simpler API compared to `useThrottler`, making it ideal for basic
+throttling needs. However, it does not expose the underlying Throttler instance.
+
+For advanced usage requiring features like:
+- Manual cancellation
+- Access to execution counts
+- Custom useCallback dependencies
+
+Consider using the `useThrottler` hook instead.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactThrottlerOptions)\&lt;`TFn`, \&#123;
+\&#125;\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```tsx
+// Throttle a window resize handler
+const handleResize = useThrottledCallback(() => {
+  updateLayoutMeasurements();
+}, {
+  wait: 100 // Execute at most once every 100ms
+});
+
+// Use in an event listener
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, [handleResize]);
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useThrottledState.md b/mintlify/pacer/framework/react/reference/functions/useThrottledState.md
new file mode 100644
index 000000000..6d723c85f
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useThrottledState.md
@@ -0,0 +1,126 @@
+---
+id: useThrottledState
+title: useThrottledState
+---
+
+# Function: useThrottledState()
+
+```ts
+function useThrottledState<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/throttler/useThrottledState.ts:90](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottledState.ts#L90)
+
+A React hook that creates a throttled state value that updates at most once within a specified time window.
+This hook combines React's useState with throttling functionality to provide controlled state updates.
+
+Throttling ensures state updates occur at a controlled rate regardless of how frequently the setter is called.
+This is useful for rate-limiting expensive re-renders or operations that depend on rapidly changing state.
+
+The hook returns a tuple containing:
+- The throttled state value
+- A throttled setter function that respects the configured wait time
+- The throttler instance for additional control
+
+For more direct control over throttling without state management,
+consider using the lower-level useThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available throttler state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `ThrottlerState`\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactThrottlerOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, `Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, [`ReactThrottler`](/pacer/framework/react/reference/interfaces/ReactThrottler)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [value, setValue, throttler] = useThrottledState(
+  0,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With custom leading/trailing behavior
+const [value, setValue] = useThrottledState(0, {
+  wait: 1000,
+  leading: true,   // Update immediately on first change
+  trailing: false  // Skip trailing edge updates
+});
+
+// Access throttler methods if needed
+const handleReset = () => {
+  setValue(0);
+  throttler.cancel(); // Cancel any pending updates
+};
+
+// Access the selected throttler state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useThrottledValue.md b/mintlify/pacer/framework/react/reference/functions/useThrottledValue.md
new file mode 100644
index 000000000..f3336f14c
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useThrottledValue.md
@@ -0,0 +1,119 @@
+---
+id: useThrottledValue
+title: useThrottledValue
+---
+
+# Function: useThrottledValue()
+
+```ts
+function useThrottledValue<TValue, TSelected>(
+   value, 
+   options, 
+   selector?): [TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>];
+```
+
+Defined in: [react-pacer/src/throttler/useThrottledValue.ts:82](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottledValue.ts#L82)
+
+A high-level React hook that creates a throttled version of a value that updates at most once within a specified time window.
+This hook uses React's useState internally to manage the throttled state.
+
+Throttling ensures the value updates occur at a controlled rate regardless of how frequently the input value changes.
+This is useful for rate-limiting expensive re-renders or API calls that depend on rapidly changing values.
+
+The hook returns a tuple containing:
+- The throttled value that updates according to the leading/trailing edge behavior specified in the options
+- The throttler instance with control methods
+
+For more direct control over throttling behavior without React state management,
+consider using the lower-level useThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger a re-render,
+optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary re-renders and gives you
+full control over when your component updates. Only when you provide a selector will the
+component re-render when the selected state values change.
+
+Available throttler state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = `ThrottlerState`\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>\>
+
+## Parameters
+
+### value
+
+`TValue`
+
+### options
+
+[`ReactThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactThrottlerOptions)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`TValue`, [`ReactThrottler`](/pacer/framework/react/reference/interfaces/ReactThrottler)\&lt;`Dispatch`\&lt;`SetStateAction`\&lt;`TValue`\>\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
+
+// Opt-in to re-render when execution count changes (optimized for tracking executions)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [throttledValue, throttler] = useThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With custom leading/trailing behavior
+const [throttledValue, throttler] = useThrottledValue(rawValue, {
+  wait: 1000,
+  leading: true,   // Update immediately on first change
+  trailing: false  // Skip trailing edge updates
+});
+
+// Access the selected throttler state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/functions/useThrottler.md b/mintlify/pacer/framework/react/reference/functions/useThrottler.md
new file mode 100644
index 000000000..0ea42cafe
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/functions/useThrottler.md
@@ -0,0 +1,153 @@
+---
+id: useThrottler
+title: useThrottler
+---
+
+# Function: useThrottler()
+
+```ts
+function useThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): ReactThrottler<TFn, TSelected>;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:168](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L168)
+
+A low-level React hook that creates a `Throttler` instance that limits how often the provided function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc). For a simpler and higher-level hook that
+integrates directly with React's useState, see useThrottledState.
+
+Throttling ensures a function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting
+expensive operations or UI updates.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` HOC (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger a re-render
+at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+re-renders and gives you full control over when your component updates.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the hook cancels any pending execution when the component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = useThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`ReactThrottlerOptions`](/pacer/framework/react/reference/interfaces/ReactThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`ReactThrottler`](/pacer/framework/react/reference/interfaces/ReactThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue] = useState(0);
+const throttler = useThrottler(setValue, { wait: 1000 });
+
+// Subscribe to state changes deep in component tree using Subscribe HOC
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Throttling...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+
+// Opt-in to re-render when execution count changes at hook level (optimized for tracking executions)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to re-render when throttling state changes (optimized for loading indicators)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({
+    isPending: state.isPending,
+    status: state.status
+  })
+);
+
+// Opt-in to re-render when timing information changes (optimized for timing displays)
+const [value, setValue] = useState(0);
+const throttler = useThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// With any state manager
+const throttler = useThrottler(
+  (value) => stateManager.setState(value),
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false  // Skip trailing edge updates
+  }
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, isPending } = throttler.state;
+```
diff --git a/mintlify/pacer/framework/react/reference/index.md b/mintlify/pacer/framework/react/reference/index.md
new file mode 100644
index 000000000..dad7c0407
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/index.md
@@ -0,0 +1,64 @@
+---
+id: "@tanstack/react-pacer"
+title: "@tanstack/react-pacer"
+---
+
+# @tanstack/react-pacer
+
+## Interfaces
+
+- [PacerProviderOptions](/pacer/framework/react/reference/interfaces/PacerProviderOptions)
+- [PacerProviderProps](/pacer/framework/react/reference/interfaces/PacerProviderProps)
+- [ReactAsyncBatcher](/pacer/framework/react/reference/interfaces/ReactAsyncBatcher)
+- [ReactAsyncBatcherOptions](/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions)
+- [ReactAsyncDebouncer](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer)
+- [ReactAsyncDebouncerOptions](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions)
+- [ReactAsyncQueuer](/pacer/framework/react/reference/interfaces/ReactAsyncQueuer)
+- [ReactAsyncQueuerOptions](/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions)
+- [ReactAsyncRateLimiter](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter)
+- [ReactAsyncRateLimiterOptions](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions)
+- [ReactAsyncThrottler](/pacer/framework/react/reference/interfaces/ReactAsyncThrottler)
+- [ReactAsyncThrottlerOptions](/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions)
+- [ReactBatcher](/pacer/framework/react/reference/interfaces/ReactBatcher)
+- [ReactBatcherOptions](/pacer/framework/react/reference/interfaces/ReactBatcherOptions)
+- [ReactDebouncer](/pacer/framework/react/reference/interfaces/ReactDebouncer)
+- [ReactDebouncerOptions](/pacer/framework/react/reference/interfaces/ReactDebouncerOptions)
+- [ReactQueuer](/pacer/framework/react/reference/interfaces/ReactQueuer)
+- [ReactQueuerOptions](/pacer/framework/react/reference/interfaces/ReactQueuerOptions)
+- [ReactRateLimiter](/pacer/framework/react/reference/interfaces/ReactRateLimiter)
+- [ReactRateLimiterOptions](/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions)
+- [ReactThrottler](/pacer/framework/react/reference/interfaces/ReactThrottler)
+- [ReactThrottlerOptions](/pacer/framework/react/reference/interfaces/ReactThrottlerOptions)
+
+## Functions
+
+- [PacerProvider](/pacer/framework/react/reference/functions/PacerProvider)
+- [useAsyncBatchedCallback](/pacer/framework/react/reference/functions/useAsyncBatchedCallback)
+- [useAsyncBatcher](/pacer/framework/react/reference/functions/useAsyncBatcher)
+- [useAsyncDebouncedCallback](/pacer/framework/react/reference/functions/useAsyncDebouncedCallback)
+- [useAsyncDebouncer](/pacer/framework/react/reference/functions/useAsyncDebouncer)
+- [useAsyncQueuedState](/pacer/framework/react/reference/functions/useAsyncQueuedState)
+- [useAsyncQueuer](/pacer/framework/react/reference/functions/useAsyncQueuer)
+- [useAsyncRateLimitedCallback](/pacer/framework/react/reference/functions/useAsyncRateLimitedCallback)
+- [useAsyncRateLimiter](/pacer/framework/react/reference/functions/useAsyncRateLimiter)
+- [useAsyncThrottledCallback](/pacer/framework/react/reference/functions/useAsyncThrottledCallback)
+- [useAsyncThrottler](/pacer/framework/react/reference/functions/useAsyncThrottler)
+- [useBatchedCallback](/pacer/framework/react/reference/functions/useBatchedCallback)
+- [useBatcher](/pacer/framework/react/reference/functions/useBatcher)
+- [useDebouncedCallback](/pacer/framework/react/reference/functions/useDebouncedCallback)
+- [useDebouncedState](/pacer/framework/react/reference/functions/useDebouncedState)
+- [useDebouncedValue](/pacer/framework/react/reference/functions/useDebouncedValue)
+- [useDebouncer](/pacer/framework/react/reference/functions/useDebouncer)
+- [useDefaultPacerOptions](/pacer/framework/react/reference/functions/useDefaultPacerOptions)
+- [usePacerContext](/pacer/framework/react/reference/functions/usePacerContext)
+- [useQueuedState](/pacer/framework/react/reference/functions/useQueuedState)
+- [useQueuedValue](/pacer/framework/react/reference/functions/useQueuedValue)
+- [useQueuer](/pacer/framework/react/reference/functions/useQueuer)
+- [useRateLimitedCallback](/pacer/framework/react/reference/functions/useRateLimitedCallback)
+- [useRateLimitedState](/pacer/framework/react/reference/functions/useRateLimitedState)
+- [useRateLimitedValue](/pacer/framework/react/reference/functions/useRateLimitedValue)
+- [useRateLimiter](/pacer/framework/react/reference/functions/useRateLimiter)
+- [useThrottledCallback](/pacer/framework/react/reference/functions/useThrottledCallback)
+- [useThrottledState](/pacer/framework/react/reference/functions/useThrottledState)
+- [useThrottledValue](/pacer/framework/react/reference/functions/useThrottledValue)
+- [useThrottler](/pacer/framework/react/reference/functions/useThrottler)
diff --git a/mintlify/pacer/framework/react/reference/interfaces/PacerProviderOptions.md b/mintlify/pacer/framework/react/reference/interfaces/PacerProviderOptions.md
new file mode 100644
index 000000000..2495f8142
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/PacerProviderOptions.md
@@ -0,0 +1,108 @@
+---
+id: PacerProviderOptions
+title: PacerProviderOptions
+---
+
+# Interface: PacerProviderOptions
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:22](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L22)
+
+## Properties
+
+### asyncBatcher?
+
+```ts
+optional asyncBatcher: Partial<AsyncBatcherOptions<any>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:23](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L23)
+
+***
+
+### asyncDebouncer?
+
+```ts
+optional asyncDebouncer: Partial<AsyncDebouncerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L24)
+
+***
+
+### asyncQueuer?
+
+```ts
+optional asyncQueuer: Partial<AsyncQueuerOptions<any>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:25](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L25)
+
+***
+
+### asyncRateLimiter?
+
+```ts
+optional asyncRateLimiter: Partial<AsyncRateLimiterOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:26](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L26)
+
+***
+
+### asyncThrottler?
+
+```ts
+optional asyncThrottler: Partial<AsyncThrottlerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:27](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L27)
+
+***
+
+### batcher?
+
+```ts
+optional batcher: Partial<BatcherOptions<any>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:28](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L28)
+
+***
+
+### debouncer?
+
+```ts
+optional debouncer: Partial<DebouncerOptions<AnyFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:29](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L29)
+
+***
+
+### queuer?
+
+```ts
+optional queuer: Partial<QueuerOptions<any>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:30](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L30)
+
+***
+
+### rateLimiter?
+
+```ts
+optional rateLimiter: Partial<RateLimiterOptions<AnyFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:31](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L31)
+
+***
+
+### throttler?
+
+```ts
+optional throttler: Partial<ThrottlerOptions<AnyFunction>>;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:32](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L32)
diff --git a/mintlify/pacer/framework/react/reference/interfaces/PacerProviderProps.md b/mintlify/pacer/framework/react/reference/interfaces/PacerProviderProps.md
new file mode 100644
index 000000000..7b30f66b9
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/PacerProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: PacerProviderProps
+title: PacerProviderProps
+---
+
+# Interface: PacerProviderProps
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L41)
+
+## Properties
+
+### children
+
+```ts
+children: ReactNode;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:42](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L42)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: PacerProviderOptions;
+```
+
+Defined in: [react-pacer/src/provider/PacerProvider.tsx:43](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/provider/PacerProvider.tsx#L43)
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcher.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcher.md
new file mode 100644
index 000000000..c59b24bbc
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcher.md
@@ -0,0 +1,100 @@
+---
+id: ReactAsyncBatcher
+title: ReactAsyncBatcher
+---
+
+# Interface: ReactAsyncBatcher\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:23](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncBatcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:49](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L49)
+
+Reactive state that will be updated and re-rendered when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncBatcherState<TValue>>>;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:55](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L55)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:40](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L40)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the batcher state.
+
+This is useful for opting into state re-renders for specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size, isExecuting: state.isExecuting })}>
+  {({ size, isExecuting }) => (
+    <div>Batch: {size} items, {isExecuting ? 'Processing' : 'Ready'}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions.md
new file mode 100644
index 000000000..745cfe4f4
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactAsyncBatcherOptions
+title: ReactAsyncBatcherOptions
+---
+
+# Interface: ReactAsyncBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:12](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L12)
+
+## Extends
+
+- `AsyncBatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [react-pacer/src/async-batcher/useAsyncBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatcher.ts#L20)
+
+Optional callback invoked when the component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`ReactAsyncBatcher`](/pacer/framework/react/reference/interfaces/ReactAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer.md
new file mode 100644
index 000000000..b391d6279
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: ReactAsyncDebouncer
+title: ReactAsyncDebouncer
+---
+
+# Interface: ReactAsyncDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncDebouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L50)
+
+Reactive state that will be updated and re-rendered when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the debouncer state.
+
+This is useful for opting into state re-renders for specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {({ isExecuting }) => (
+    <div>{isExecuting ? 'Loading...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions.md
new file mode 100644
index 000000000..844834767
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactAsyncDebouncerOptions
+title: ReactAsyncDebouncerOptions
+---
+
+# Interface: ReactAsyncDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L13)
+
+## Extends
+
+- `AsyncDebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [react-pacer/src/async-debouncer/useAsyncDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-debouncer/useAsyncDebouncer.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`ReactAsyncDebouncer`](/pacer/framework/react/reference/interfaces/ReactAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuer.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuer.md
new file mode 100644
index 000000000..a81fa2acf
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuer.md
@@ -0,0 +1,100 @@
+---
+id: ReactAsyncQueuer
+title: ReactAsyncQueuer
+---
+
+# Interface: ReactAsyncQueuer\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:23](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncQueuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L49)
+
+Reactive state that will be updated and re-rendered when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:55](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L55)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:40](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L40)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the queuer state.
+
+This is useful for opting into state re-renders for specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {({ size, isRunning }) => (
+    <div>Queue: {size} items, {isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions.md
new file mode 100644
index 000000000..8317289ac
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactAsyncQueuerOptions
+title: ReactAsyncQueuerOptions
+---
+
+# Interface: ReactAsyncQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:12](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L12)
+
+## Extends
+
+- `AsyncQueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [react-pacer/src/async-queuer/useAsyncQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-queuer/useAsyncQueuer.ts#L20)
+
+Optional callback invoked when the component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop + abort); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`ReactAsyncQueuer`](/pacer/framework/react/reference/interfaces/ReactAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter.md
new file mode 100644
index 000000000..04994dabd
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: ReactAsyncRateLimiter
+title: ReactAsyncRateLimiter
+---
+
+# Interface: ReactAsyncRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncRateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L50)
+
+Reactive state that will be updated and re-rendered when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the rate limiter state.
+
+This is useful for opting into state re-renders for specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+  {({ rejectionCount, isExecuting }) => (
+    <div>Rejected: {rejectionCount}, {isExecuting ? 'Executing' : 'Idle'}</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions.md
new file mode 100644
index 000000000..d5b8e2d16
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactAsyncRateLimiterOptions
+title: ReactAsyncRateLimiterOptions
+---
+
+# Interface: ReactAsyncRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L13)
+
+## Extends
+
+- `AsyncRateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-rate-limiter/useAsyncRateLimiter.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup (abort); use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`ReactAsyncRateLimiter`](/pacer/framework/react/reference/interfaces/ReactAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottler.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottler.md
new file mode 100644
index 000000000..6ab58ca8f
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottler.md
@@ -0,0 +1,100 @@
+---
+id: ReactAsyncThrottler
+title: ReactAsyncThrottler
+---
+
+# Interface: ReactAsyncThrottler\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncThrottler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L50)
+
+Reactive state that will be updated and re-rendered when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the throttler state.
+
+This is useful for opting into state re-renders for specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {({ isExecuting }) => (
+    <div>{isExecuting ? 'Loading...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions.md
new file mode 100644
index 000000000..dc9d0d714
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactAsyncThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactAsyncThrottlerOptions
+title: ReactAsyncThrottlerOptions
+---
+
+# Interface: ReactAsyncThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L13)
+
+## Extends
+
+- `AsyncThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [react-pacer/src/async-throttler/useAsyncThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-throttler/useAsyncThrottler.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`ReactAsyncThrottler`](/pacer/framework/react/reference/interfaces/ReactAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactBatcher.md b/mintlify/pacer/framework/react/reference/interfaces/ReactBatcher.md
new file mode 100644
index 000000000..200b88952
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactBatcher.md
@@ -0,0 +1,100 @@
+---
+id: ReactBatcher
+title: ReactBatcher
+---
+
+# Interface: ReactBatcher\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Batcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:46](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L46)
+
+Reactive state that will be updated and re-rendered when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<BatcherState<TValue>>>;
+```
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:52](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L52)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:37](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L37)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the batcher state.
+
+This is useful for opting into state re-renders for specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size, isPending: state.isPending })}>
+  {({ size, isPending }) => (
+    <div>Batch: {size} items, {isPending ? 'Pending' : 'Ready'}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactBatcherOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactBatcherOptions.md
new file mode 100644
index 000000000..7a4936b03
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactBatcherOptions
+title: ReactBatcherOptions
+---
+
+# Interface: ReactBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:9](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L9)
+
+## Extends
+
+- `BatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [react-pacer/src/batcher/useBatcher.ts:17](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/batcher/useBatcher.ts#L17)
+
+Optional callback invoked when the component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`ReactBatcher`](/pacer/framework/react/reference/interfaces/ReactBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncer.md b/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncer.md
new file mode 100644
index 000000000..a4d15f602
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: ReactDebouncer
+title: ReactDebouncer
+---
+
+# Interface: ReactDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Debouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L50)
+
+Reactive state that will be updated and re-rendered when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<DebouncerState<TFn>>>;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the debouncer state.
+
+This is useful for opting into state re-renders for specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncerOptions.md
new file mode 100644
index 000000000..42687b77b
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactDebouncerOptions
+title: ReactDebouncerOptions
+---
+
+# Interface: ReactDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L13)
+
+## Extends
+
+- `DebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [react-pacer/src/debouncer/useDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/debouncer/useDebouncer.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`ReactDebouncer`](/pacer/framework/react/reference/interfaces/ReactDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactQueuer.md b/mintlify/pacer/framework/react/reference/interfaces/ReactQueuer.md
new file mode 100644
index 000000000..7be1411d6
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactQueuer.md
@@ -0,0 +1,100 @@
+---
+id: ReactQueuer
+title: ReactQueuer
+---
+
+# Interface: ReactQueuer\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Queuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:46](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L46)
+
+Reactive state that will be updated and re-rendered when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<QueuerState<TValue>>>;
+```
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:52](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L52)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:37](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L37)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the queuer state.
+
+This is useful for opting into state re-renders for specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {({ size, isRunning }) => (
+    <div>Queue: {size} items, {isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactQueuerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactQueuerOptions.md
new file mode 100644
index 000000000..f9b9dac84
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactQueuerOptions
+title: ReactQueuerOptions
+---
+
+# Interface: ReactQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L9)
+
+## Extends
+
+- `QueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [react-pacer/src/queuer/useQueuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/queuer/useQueuer.ts#L17)
+
+Optional callback invoked when the component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`ReactQueuer`](/pacer/framework/react/reference/interfaces/ReactQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiter.md b/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiter.md
new file mode 100644
index 000000000..686e7e1ca
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: ReactRateLimiter
+title: ReactRateLimiter
+---
+
+# Interface: ReactRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`RateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L50)
+
+Reactive state that will be updated and re-rendered when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<RateLimiterState>>;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the rate limiter state.
+
+This is useful for opting into state re-renders for specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {({ rejectionCount }) => (
+    <div>Rejected: {rejectionCount} requests</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions.md
new file mode 100644
index 000000000..d1a4fd7a7
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactRateLimiterOptions
+title: ReactRateLimiterOptions
+---
+
+# Interface: ReactRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L13)
+
+## Extends
+
+- `RateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [react-pacer/src/rate-limiter/useRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/rate-limiter/useRateLimiter.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup; use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`ReactRateLimiter`](/pacer/framework/react/reference/interfaces/ReactRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactThrottler.md b/mintlify/pacer/framework/react/reference/interfaces/ReactThrottler.md
new file mode 100644
index 000000000..9cf45c74e
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactThrottler.md
@@ -0,0 +1,100 @@
+---
+id: ReactThrottler
+title: ReactThrottler
+---
+
+# Interface: ReactThrottler\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Throttler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Readonly<TSelected>;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L50)
+
+Reactive state that will be updated and re-rendered when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L41)
+
+A React HOC (Higher Order Component) that allows you to subscribe to the throttler state.
+
+This is useful for opting into state re-renders for specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`ReactNode` \| (`state`) => `ReactNode`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`ReactNode` \| `Promise`\&lt;`ReactNode`\>
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {({ isPending }) => (
+    <div>{isPending ? 'Throttling...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/react/reference/interfaces/ReactThrottlerOptions.md b/mintlify/pacer/framework/react/reference/interfaces/ReactThrottlerOptions.md
new file mode 100644
index 000000000..3e44d11dd
--- /dev/null
+++ b/mintlify/pacer/framework/react/reference/interfaces/ReactThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: ReactThrottlerOptions
+title: ReactThrottlerOptions
+---
+
+# Interface: ReactThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L13)
+
+## Extends
+
+- `ThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [react-pacer/src/throttler/useThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/throttler/useThrottler.ts#L21)
+
+Optional callback invoked when the component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`ReactThrottler`](/pacer/framework/react/reference/interfaces/ReactThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/adapter.md b/mintlify/pacer/framework/solid/adapter.md
new file mode 100644
index 000000000..2c61e274a
--- /dev/null
+++ b/mintlify/pacer/framework/solid/adapter.md
@@ -0,0 +1,284 @@
+---
+title: TanStack Pacer Solid Adapter
+id: adapter
+---
+
+If you are using TanStack Pacer in a Solid application, we recommend using the Solid Adapter. The Solid Adapter provides a set of easy-to-use hooks on top of the core Pacer utilities. If you find yourself wanting to use the core Pacer classes/functions directly, the Solid Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/solid-pacer
+```
+
+## Solid Hooks
+
+See the [Solid Functions Reference](/pacer/framework/solid/reference/index) to see the full list of hooks available in the Solid Adapter.
+
+## Basic Usage
+
+Import a solid specific hook from the Solid Adapter.
+
+```tsx
+import { createDebouncedValue } from '@tanstack/solid-pacer'
+import { createSignal } from 'solid-js'
+
+const [instantValue, setInstantValue] = createSignal(0)
+const [debouncedValue, debouncer] = createDebouncedValue(instantValue, {
+  wait: 1000,
+})
+```
+
+Or import a core Pacer class/function that is re-exported from the Solid Adapter.
+
+```tsx
+import { debounce, Debouncer } from '@tanstack/solid-pacer' // no need to install the core package separately
+```
+
+## Option Helpers
+
+If you want a type-safe way to define common options for pacer utilities, TanStack Pacer provides option helpers for each utility. These helpers can be used with Solid hooks.
+
+### Debouncer Options
+
+```tsx
+import { createDebouncer } from '@tanstack/solid-pacer'
+import { debouncerOptions } from '@tanstack/pacer'
+
+const commonDebouncerOptions = debouncerOptions({
+  wait: 1000,
+  leading: false,
+  trailing: true,
+})
+
+const debouncer = createDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { ...commonDebouncerOptions, key: 'searchDebouncer' }
+)
+```
+
+### Queuer Options
+
+```tsx
+import { createQueuer } from '@tanstack/solid-pacer'
+import { queuerOptions } from '@tanstack/pacer'
+
+const commonQueuerOptions = queuerOptions({
+  concurrency: 3,
+  addItemsTo: 'back',
+})
+
+const queuer = createQueuer(
+  (item: string) => processItem(item),
+  { ...commonQueuerOptions, key: 'itemQueuer' }
+)
+```
+
+### Rate Limiter Options
+
+```tsx
+import { createRateLimiter } from '@tanstack/solid-pacer'
+import { rateLimiterOptions } from '@tanstack/pacer'
+
+const commonRateLimiterOptions = rateLimiterOptions({
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+})
+
+const rateLimiter = createRateLimiter(
+  (data: string) => sendApiRequest(data),
+  { ...commonRateLimiterOptions, key: 'apiRateLimiter' }
+)
+```
+
+## Provider
+
+The Solid Adapter provides a `PacerProvider` component that you can use to provide default options to all instances of pacer utilities within your component tree.
+
+```tsx
+import { PacerProvider } from '@tanstack/solid-pacer'
+
+// Set default options for solid-pacer instances
+<PacerProvider
+  defaultOptions={{
+    debouncer: { wait: 1000 },
+    queuer: { concurrency: 3 },
+    rateLimiter: { limit: 5, window: 60000 },
+  }}
+>
+  <App />
+</PacerProvider>
+```
+
+All hooks within the provider will automatically use these default options, which can be overridden on a per-hook basis.
+
+## Subscribing to State
+
+The Solid Adapter supports subscribing to state changes in two ways:
+
+### Using the Subscribe Component
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+**Note:** In Solid, the `Subscribe` component provides an accessor (signal) to the selected state. You must call `state()` to access the value.
+
+```tsx
+import { createRateLimiter } from '@tanstack/solid-pacer'
+
+function ApiComponent() {
+  const rateLimiter = createRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    { limit: 5, window: 60000 }
+  )
+
+  return (
+    <div>
+      <button onClick={() => rateLimiter.maybeExecute('some data')}>
+        Submit
+      </button>
+      
+      <rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+        {(state) => (
+          <div>Rejections: {state().rejectionCount}</div>
+        )}
+      </rateLimiter.Subscribe>
+    </div>
+  )
+}
+```
+
+### Using the Selector Parameter
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `hook.state` is empty (`{}`) as the selector is empty by default.** You must opt-in to state tracking by providing a selector function.
+
+**Note:** In Solid, `hook.state` is an accessor (signal). You must call `hook.state()` to access the value.
+
+```tsx
+import { createDebouncer } from '@tanstack/solid-pacer'
+
+function SearchComponent() {
+  // Default behavior - no reactive state subscriptions
+  const debouncer = createDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 }
+  )
+  console.log(debouncer.state()) // {}
+
+  // Opt-in to track isPending changes
+  const debouncer = createDebouncer(
+    (query: string) => fetchSearchResults(query),
+    { wait: 500 },
+    (state) => ({ isPending: state.isPending })
+  )
+  console.log(debouncer.state().isPending) // Reactive value
+
+  return (
+    <input
+      onInput={(e) => debouncer.maybeExecute(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+For more details on state management and available state properties, see the individual guide pages for each utility (e.g., [Rate Limiting Guide](/pacer/guides/rate-limiting), [Debouncing Guide](/pacer/guides/debouncing)).
+
+## Examples
+
+### Debouncer Example
+
+```tsx
+import { createDebouncer } from '@tanstack/solid-pacer'
+
+function SearchComponent() {
+  const debouncer = createDebouncer(
+    (query: string) => {
+      console.log('Searching for:', query)
+      // Perform search
+    },
+    { wait: 500 }
+  )
+
+  return (
+    <input
+      onInput={(e) => debouncer.maybeExecute(e.currentTarget.value)}
+      placeholder="Search..."
+    />
+  )
+}
+```
+
+### Queuer Example
+
+```tsx
+import { createQueuer } from '@tanstack/solid-pacer'
+
+function UploadComponent() {
+  const queuer = createQueuer(
+    async (file: File) => {
+      await uploadFile(file)
+    },
+    { concurrency: 3 }
+  )
+
+  const handleFileSelect = (files: FileList) => {
+    Array.from(files).forEach((file) => {
+      queuer.addItem(file)
+    })
+  }
+
+  return (
+    <input
+      type="file"
+      multiple
+      onChange={(e) => {
+        if (e.target.files) {
+          handleFileSelect(e.target.files)
+        }
+      }}
+    />
+  )
+}
+```
+
+### Rate Limiter Example
+
+```tsx
+import { createRateLimiter } from '@tanstack/solid-pacer'
+
+function ApiComponent() {
+  const rateLimiter = createRateLimiter(
+    (data: string) => {
+      return fetch('/api/endpoint', {
+        method: 'POST',
+        body: JSON.stringify({ data }),
+      })
+    },
+    {
+      limit: 5,
+      window: 60000,
+      windowType: 'sliding',
+      onReject: () => {
+        alert('Rate limit reached. Please try again later.')
+      },
+    }
+  )
+
+  const handleSubmit = () => {
+    const remaining = rateLimiter.getRemainingInWindow()
+    if (remaining > 0) {
+      rateLimiter.maybeExecute('some data')
+    }
+  }
+
+  return <button onClick={handleSubmit}>Submit</button>
+}
+```
diff --git a/mintlify/pacer/framework/solid/examples/asyncDebounce.md b/mintlify/pacer/framework/solid/examples/asyncDebounce.md
new file mode 100644
index 000000000..1732f83eb
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/asyncDebounce.md
@@ -0,0 +1,12 @@
+---
+title: "asyncDebounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/asyncDebounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/asyncDebounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/asyncRateLimit.md b/mintlify/pacer/framework/solid/examples/asyncRateLimit.md
new file mode 100644
index 000000000..4db9370d0
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/asyncRateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "asyncRateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/asyncRateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/asyncRateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/asyncThrottle.md b/mintlify/pacer/framework/solid/examples/asyncThrottle.md
new file mode 100644
index 000000000..58dbad304
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/asyncThrottle.md
@@ -0,0 +1,12 @@
+---
+title: "asyncThrottle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/asyncThrottle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/asyncThrottle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/batch.md b/mintlify/pacer/framework/solid/examples/batch.md
new file mode 100644
index 000000000..67d348e52
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/batch.md
@@ -0,0 +1,12 @@
+---
+title: "batch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/batch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/batch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createAsyncBatcher.md b/mintlify/pacer/framework/solid/examples/createAsyncBatcher.md
new file mode 100644
index 000000000..097f384ac
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createAsyncBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "createAsyncBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createAsyncBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createAsyncBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createAsyncDebouncer.md b/mintlify/pacer/framework/solid/examples/createAsyncDebouncer.md
new file mode 100644
index 000000000..6f095a34f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createAsyncDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "createAsyncDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createAsyncDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createAsyncDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createAsyncQueuer.md b/mintlify/pacer/framework/solid/examples/createAsyncQueuer.md
new file mode 100644
index 000000000..1a1a4d7e9
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createAsyncQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "createAsyncQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createAsyncQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createAsyncQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createAsyncRateLimiter.md b/mintlify/pacer/framework/solid/examples/createAsyncRateLimiter.md
new file mode 100644
index 000000000..f132f8eff
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createAsyncRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "createAsyncRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createAsyncRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createAsyncRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createAsyncThrottler.md b/mintlify/pacer/framework/solid/examples/createAsyncThrottler.md
new file mode 100644
index 000000000..3c0c6bec0
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createAsyncThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "createAsyncThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createAsyncThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createAsyncThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createBatcher.md b/mintlify/pacer/framework/solid/examples/createBatcher.md
new file mode 100644
index 000000000..7d52c4bd2
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "createBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createDebouncedSignal.md b/mintlify/pacer/framework/solid/examples/createDebouncedSignal.md
new file mode 100644
index 000000000..95573c73f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createDebouncedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "createDebouncedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createDebouncedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createDebouncedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createDebouncedValue.md b/mintlify/pacer/framework/solid/examples/createDebouncedValue.md
new file mode 100644
index 000000000..9dd4a4b77
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createDebouncedValue.md
@@ -0,0 +1,12 @@
+---
+title: "createDebouncedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createDebouncedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createDebouncedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createDebouncer.md b/mintlify/pacer/framework/solid/examples/createDebouncer.md
new file mode 100644
index 000000000..8b23580ed
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "createDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createQueuedSignal.md b/mintlify/pacer/framework/solid/examples/createQueuedSignal.md
new file mode 100644
index 000000000..c972795c3
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createQueuedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "createQueuedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createQueuedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createQueuedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createQueuer.md b/mintlify/pacer/framework/solid/examples/createQueuer.md
new file mode 100644
index 000000000..51227d16f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "createQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createRateLimitedSignal.md b/mintlify/pacer/framework/solid/examples/createRateLimitedSignal.md
new file mode 100644
index 000000000..1ff06a9f8
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createRateLimitedSignal.md
@@ -0,0 +1,12 @@
+---
+title: "createRateLimitedSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createRateLimitedSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createRateLimitedSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createRateLimitedValue.md b/mintlify/pacer/framework/solid/examples/createRateLimitedValue.md
new file mode 100644
index 000000000..1fedc86b8
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createRateLimitedValue.md
@@ -0,0 +1,12 @@
+---
+title: "createRateLimitedValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createRateLimitedValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createRateLimitedValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createRateLimiter.md b/mintlify/pacer/framework/solid/examples/createRateLimiter.md
new file mode 100644
index 000000000..d6a2e0d0b
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "createRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createThrottledSignal.md b/mintlify/pacer/framework/solid/examples/createThrottledSignal.md
new file mode 100644
index 000000000..80e6d566d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createThrottledSignal.md
@@ -0,0 +1,12 @@
+---
+title: "createThrottledSignal"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createThrottledSignal)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createThrottledSignal)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createThrottledValue.md b/mintlify/pacer/framework/solid/examples/createThrottledValue.md
new file mode 100644
index 000000000..62e7b8e8f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createThrottledValue.md
@@ -0,0 +1,12 @@
+---
+title: "createThrottledValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createThrottledValue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createThrottledValue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/createThrottler.md b/mintlify/pacer/framework/solid/examples/createThrottler.md
new file mode 100644
index 000000000..f0464982d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/createThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "createThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/createThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/createThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/debounce.md b/mintlify/pacer/framework/solid/examples/debounce.md
new file mode 100644
index 000000000..bd2b5e419
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/debounce.md
@@ -0,0 +1,12 @@
+---
+title: "debounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/debounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/debounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/queue.md b/mintlify/pacer/framework/solid/examples/queue.md
new file mode 100644
index 000000000..b7fd756e5
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/queue.md
@@ -0,0 +1,12 @@
+---
+title: "queue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/queue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/queue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/rateLimit.md b/mintlify/pacer/framework/solid/examples/rateLimit.md
new file mode 100644
index 000000000..dfcccae56
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/rateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "rateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/rateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/rateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/examples/throttle.md b/mintlify/pacer/framework/solid/examples/throttle.md
new file mode 100644
index 000000000..4d8100385
--- /dev/null
+++ b/mintlify/pacer/framework/solid/examples/throttle.md
@@ -0,0 +1,12 @@
+---
+title: "throttle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/solid/examples/throttle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/solid/throttle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/solid/reference/functions/PacerProvider.md b/mintlify/pacer/framework/solid/reference/functions/PacerProvider.md
new file mode 100644
index 000000000..2dbd10716
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/PacerProvider.md
@@ -0,0 +1,22 @@
+---
+id: PacerProvider
+title: PacerProvider
+---
+
+# Function: PacerProvider()
+
+```ts
+function PacerProvider(props): Element;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:44](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L44)
+
+## Parameters
+
+### props
+
+[`PacerProviderProps`](/pacer/framework/solid/reference/interfaces/PacerProviderProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/pacer/framework/solid/reference/functions/createAsyncBatcher.md b/mintlify/pacer/framework/solid/reference/functions/createAsyncBatcher.md
new file mode 100644
index 000000000..1c432280a
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createAsyncBatcher.md
@@ -0,0 +1,174 @@
+---
+id: createAsyncBatcher
+title: createAsyncBatcher
+---
+
+# Function: createAsyncBatcher()
+
+```ts
+function createAsyncBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): SolidAsyncBatcher<TValue, TSelected>;
+```
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:189](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L189)
+
+Creates a Solid-compatible AsyncBatcher instance for managing asynchronous batches of items, exposing Solid signals for all stateful properties.
+
+This is the async version of the createBatcher hook. Unlike the sync version, this async batcher:
+- Handles promises and returns results from batch executions
+- Provides error handling with configurable error behavior
+- Tracks success, error, and settle counts separately
+- Has state tracking for when batches are executing
+- Returns the result of the batch function execution
+
+Features:
+- Configurable batch size and wait time
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+- Error handling for failed batch operations
+- Automatic or manual batch processing
+- All stateful properties (items, counts, etc.) are exposed as Solid signals for reactivity
+
+The batcher collects items and processes them in batches based on:
+- Maximum batch size (number of items per batch)
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and batcher instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together; the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncBatcher instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `errorCount`: Number of failed batch executions
+- `executionCount`: Total number of batch execution attempts (successful + failed)
+- `hasError`: Whether the last batch execution resulted in an error
+- `isExecuting`: Whether a batch execution is currently in progress
+- `items`: Array of items currently queued for batching
+- `lastError`: The error from the most recent failed batch execution (if any)
+- `lastResult`: The result from the most recent successful batch execution
+- `settleCount`: Number of batch executions that have completed (successful or failed)
+- `successCount`: Number of successful batch executions
+
+## Unmount behavior
+
+By default, the primitive cancels any pending batch and aborts any in-flight execution when the owning component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = createAsyncBatcher(fn, {
+  maxSize: 10,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your batch function updates Solid signals, those updates may run after the component has
+unmounted, which can cause unexpected reactive updates. Guard your callbacks accordingly when
+using onUnmount with flush.
+
+Example usage:
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncBatcher = createAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  {
+    maxSize: 10,
+    wait: 2000,
+    onSuccess: (result) => {
+      console.log('Batch processed successfully:', result);
+    },
+    onError: (error) => {
+      console.error('Batch processing failed:', error);
+    }
+  }
+);
+
+// Opt-in to track items or isExecuting changes (optimized for UI updates)
+const asyncBatcher = createAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({ items: state.items, isExecuting: state.isExecuting })
+);
+
+// Opt-in to track error state changes (optimized for error handling)
+const asyncBatcher = createAsyncBatcher(
+  async (items) => {
+    const results = await Promise.all(items.map(item => processItem(item)));
+    return results;
+  },
+  { maxSize: 10, wait: 2000 },
+  (state) => ({ hasError: state.hasError, lastError: state.lastError })
+);
+
+// Add items to batch
+asyncBatcher.addItem(newItem);
+
+// Manually execute batch
+const result = await asyncBatcher.execute();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { items, isExecuting } = asyncBatcher.state();
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`SolidAsyncBatcherOptions`](/pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidAsyncBatcher`](/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher)\&lt;`TValue`, `TSelected`\>
diff --git a/mintlify/pacer/framework/solid/reference/functions/createAsyncDebouncer.md b/mintlify/pacer/framework/solid/reference/functions/createAsyncDebouncer.md
new file mode 100644
index 000000000..b10fda3ed
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createAsyncDebouncer.md
@@ -0,0 +1,160 @@
+---
+id: createAsyncDebouncer
+title: createAsyncDebouncer
+---
+
+# Function: createAsyncDebouncer()
+
+```ts
+function createAsyncDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidAsyncDebouncer<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:175](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L175)
+
+A low-level Solid hook that creates an `AsyncDebouncer` instance to delay execution of an async function.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that
+you can integrate with any state management solution (createSignal, etc).
+
+Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation.
+Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing
+or input changes where you only want to execute the handler after the events have stopped occurring.
+
+Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until
+the function stops being called for the specified delay period.
+
+Unlike the non-async Debouncer, this async version supports returning values from the debounced function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the debounced function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and debouncer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncDebouncer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `hasError`: Whether the last execution resulted in an error
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `isExecuting`: Whether an async function execution is currently in progress
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastError`: The error from the most recent failed execution (if any)
+- `lastResult`: The result from the most recent successful execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing')
+
+## Unmount behavior
+
+By default, the primitive cancels any pending execution and aborts any in-flight execution when the owning component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = createAsyncDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your debounced function updates Solid signals, those updates may run after the component has
+unmounted, which can cause unexpected reactive updates. Guard your callbacks accordingly when
+using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidAsyncDebouncerOptions`](/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidAsyncDebouncer`](/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const { maybeExecute } = createAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 }
+);
+
+// Opt-in to track isPending or isExecuting changes (optimized for loading states)
+const debouncer = createAsyncDebouncer(
+  async (query: string) => {
+    const results = await api.search(query);
+    return results;
+  },
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
+);
+
+// Opt-in to track error state changes (optimized for error handling)
+const debouncer = createAsyncDebouncer(
+  async (searchTerm) => {
+    const data = await searchAPI(searchTerm);
+    return data;
+  },
+  {
+    wait: 300,
+    leading: true,   // Execute immediately on first call
+    trailing: false, // Skip trailing edge updates
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  },
+  (state) => ({ hasError: state.hasError, lastError: state.lastError })
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending, isExecuting } = debouncer.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createAsyncQueuer.md b/mintlify/pacer/framework/solid/reference/functions/createAsyncQueuer.md
new file mode 100644
index 000000000..1895a3b98
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createAsyncQueuer.md
@@ -0,0 +1,166 @@
+---
+id: createAsyncQueuer
+title: createAsyncQueuer
+---
+
+# Function: createAsyncQueuer()
+
+```ts
+function createAsyncQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): SolidAsyncQueuer<TValue, TSelected>;
+```
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:181](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L181)
+
+Creates a Solid-compatible AsyncQueuer instance for managing an asynchronous queue of items, exposing Solid signals for all stateful properties.
+
+Features:
+- Priority queueing via `getPriority` or item `priority` property
+- Configurable concurrency limit
+- FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+- Pause/resume processing
+- Task cancellation
+- Item expiration
+- Lifecycle callbacks for success, error, settled, items change, etc.
+- All stateful properties (active items, pending items, counts, etc.) are exposed as Solid signals for reactivity
+
+Tasks are processed concurrently up to the configured concurrency limit. When a task completes,
+the next pending task is processed if the concurrency limit allows.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and queuer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together; the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncQueuer instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `activeItems`: Array of items currently being processed
+- `errorCount`: Number of items that failed processing
+- `isRunning`: Whether the queuer is currently running (not stopped)
+- `pendingItems`: Array of items waiting to be processed
+- `rejectionCount`: Number of items that were rejected (expired or failed validation)
+- `settleCount`: Number of items that have completed processing (successful or failed)
+- `successCount`: Number of items that were processed successfully
+
+## Unmount behavior
+
+By default, the primitive stops the queuer and aborts any in-flight task executions when the owning component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queuer = createAsyncQueuer(fn, {
+  concurrency: 2,
+  started: false,
+  onUnmount: (q) => q.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your task function updates Solid signals, those updates may run after the component has
+unmounted, which can cause unexpected reactive updates. Guard your callbacks accordingly when
+using onUnmount with flush.
+
+Example usage:
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncQueuer = createAsyncQueuer(async (item) => {
+  // process item
+  return await fetchData(item);
+}, {
+  initialItems: [],
+  concurrency: 2,
+  maxSize: 100,
+  started: false,
+  onSuccess: (result) => {
+    console.log('Item processed:', result);
+  },
+  onError: (error) => {
+    console.error('Processing failed:', error);
+  }
+});
+
+// Opt-in to track queue state changes (optimized for UI updates)
+const asyncQueuer = createAsyncQueuer(
+  async (item) => await fetchData(item),
+  { concurrency: 2, started: true },
+  (state) => ({
+    pendingItems: state.pendingItems,
+    activeItems: state.activeItems,
+    isRunning: state.isRunning
+  })
+);
+
+// Opt-in to track processing metrics changes (optimized for tracking progress)
+const asyncQueuer = createAsyncQueuer(
+  async (item) => await fetchData(item),
+  { concurrency: 2, started: true },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settleCount: state.settleCount
+  })
+);
+
+// Add items to queue
+asyncQueuer.addItem(newItem);
+
+// Start processing
+asyncQueuer.start();
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { pendingItems, activeItems } = asyncQueuer.state();
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`SolidAsyncQueuerOptions`](/pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidAsyncQueuer`](/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer)\&lt;`TValue`, `TSelected`\>
diff --git a/mintlify/pacer/framework/solid/reference/functions/createAsyncRateLimiter.md b/mintlify/pacer/framework/solid/reference/functions/createAsyncRateLimiter.md
new file mode 100644
index 000000000..825bc5780
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createAsyncRateLimiter.md
@@ -0,0 +1,205 @@
+---
+id: createAsyncRateLimiter
+title: createAsyncRateLimiter
+---
+
+# Function: createAsyncRateLimiter()
+
+```ts
+function createAsyncRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidAsyncRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:220](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L220)
+
+A low-level Solid hook that creates an `AsyncRateLimiter` instance to limit how many times an async function can execute within a time window.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (createSignal, etc).
+
+Rate limiting is a simple approach that allows a function to execute up to a limit within a time window,
+then blocks all subsequent calls until the window passes. This can lead to "bursty" behavior where
+all executions happen immediately, followed by a complete block.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+Unlike the non-async RateLimiter, this async version supports returning values from the rate-limited function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the rate-limited function.
+
+For smoother execution patterns, consider using:
+- Throttling: Ensures consistent spacing between executions (e.g. max once per 200ms)
+- Debouncing: Waits for a pause in calls before executing (e.g. after 500ms of no calls)
+
+Rate limiting is best used for hard API limits or resource constraints. For UI updates or
+smoothing out frequent events, throttling or debouncing usually provide better user experience.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and rate limiter instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncRateLimiter instance
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `currentWindowStart`: Timestamp when the current window started
+- `executionCount`: Number of function executions that have been completed
+- `hasError`: Whether the last execution resulted in an error
+- `isExecuting`: Whether an async function execution is currently in progress
+- `lastError`: The error from the most recent failed execution (if any)
+- `lastResult`: The result from the most recent successful execution
+- `nextWindowTime`: Timestamp when the next window begins
+- `rejectionCount`: Number of function calls that were rejected due to rate limiting
+- `remainingInWindow`: Number of executions remaining in the current window
+
+## Unmount behavior
+
+By default, the primitive aborts any in-flight execution when the owning component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidAsyncRateLimiterOptions`](/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidAsyncRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data; // Return value is preserved
+  },
+  { limit: 5, window: 1000 } // 5 calls per second
+);
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>Rejected: {state().rejectionCount}, {state().isExecuting ? 'Executing' : 'Idle'}</div>
+  )}
+</asyncRateLimiter.Subscribe>
+
+// Opt-in to track execution state changes at hook level (optimized for loading indicators)
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ isExecuting: state.isExecuting })
+);
+
+// Opt-in to track results when available (optimized for data display)
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    lastResult: state.lastResult,
+    successCount: state.successCount
+  })
+);
+
+// Opt-in to track error/rejection state changes (optimized for error handling)
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  {
+    limit: 5,
+    window: 1000,
+    onError: (error) => console.error('API call failed:', error),
+    onReject: (rateLimiter) => console.log('Rate limit exceeded')
+  },
+  (state) => ({
+    errorCount: state.errorCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to track execution metrics changes (optimized for stats display)
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({
+    successCount: state.successCount,
+    errorCount: state.errorCount,
+    settleCount: state.settleCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Opt-in to track execution times changes (optimized for window calculations)
+const asyncRateLimiter = createAsyncRateLimiter(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { limit: 5, window: 1000 },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isExecuting, lastResult, rejectionCount } = asyncRateLimiter.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createAsyncThrottler.md b/mintlify/pacer/framework/solid/reference/functions/createAsyncThrottler.md
new file mode 100644
index 000000000..41d756da1
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createAsyncThrottler.md
@@ -0,0 +1,160 @@
+---
+id: createAsyncThrottler
+title: createAsyncThrottler
+---
+
+# Function: createAsyncThrottler()
+
+```ts
+function createAsyncThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidAsyncThrottler<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:175](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L175)
+
+A low-level Solid hook that creates an `AsyncThrottler` instance to limit how often an async function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (createSignal, etc).
+
+Async throttling ensures an async function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting expensive API calls,
+database operations, or other async tasks.
+
+Unlike the non-async Throttler, this async version supports returning values from the throttled function,
+making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+instead of setting the result on a state variable from within the throttled function.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and throttler instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncThrottler instance
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `hasError`: Whether the last execution resulted in an error
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `isExecuting`: Whether an async function execution is currently in progress
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastError`: The error from the most recent failed execution (if any)
+- `lastExecutionTime`: Timestamp of the last execution
+- `lastResult`: The result from the most recent successful execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing')
+
+## Unmount behavior
+
+By default, the primitive cancels any pending execution and aborts any in-flight execution when the owning component unmounts.
+Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = createAsyncThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+If your throttled function updates Solid signals, those updates may run after the component has
+unmounted, which can cause unexpected reactive updates. Guard your callbacks accordingly when
+using onUnmount with flush.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidAsyncThrottlerOptions`](/pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidAsyncThrottler`](/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const { maybeExecute } = createAsyncThrottler(
+  async (id: string) => {
+    const data = await api.fetchData(id);
+    return data;
+  },
+  { wait: 1000 }
+);
+
+// Opt-in to track isPending or isExecuting changes (optimized for loading states)
+const throttler = createAsyncThrottler(
+  async (query) => {
+    const result = await searchAPI(query);
+    return result;
+  },
+  { wait: 2000 },
+  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
+);
+
+// Opt-in to track error state changes (optimized for error handling)
+const throttler = createAsyncThrottler(
+  async (query) => {
+    const result = await searchAPI(query);
+    return result;
+  },
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false, // Skip trailing edge updates
+    onError: (error) => {
+      console.error('API call failed:', error);
+    }
+  },
+  (state) => ({ hasError: state.hasError, lastError: state.lastError })
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending, isExecuting } = throttler.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createBatcher.md b/mintlify/pacer/framework/solid/reference/functions/createBatcher.md
new file mode 100644
index 000000000..7d3d8eb79
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createBatcher.md
@@ -0,0 +1,143 @@
+---
+id: createBatcher
+title: createBatcher
+---
+
+# Function: createBatcher()
+
+```ts
+function createBatcher<TValue, TSelected>(
+   fn, 
+   options, 
+selector): SolidBatcher<TValue, TSelected>;
+```
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:155](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L155)
+
+Creates a Solid-compatible Batcher instance for managing batches of items, exposing Solid signals for all stateful properties.
+
+Features:
+- Batch processing of items using the provided `fn` function
+- Configurable batch size and wait time
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+- All stateful properties (items, counts, etc.) are exposed as Solid signals for reactivity
+
+The batcher collects items and processes them in batches based on:
+- Maximum batch size
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `batcher.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `executionCount`: Number of batch executions that have been completed
+- `isRunning`: Whether the batcher is currently running (not stopped)
+- `items`: Array of items currently queued for batching
+- `totalItemsProcessed`: Total number of individual items that have been processed across all batches
+
+## Unmount behavior
+
+By default, the primitive cancels any pending batch when the owning component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const batcher = createBatcher(fn, {
+  maxSize: 10,
+  wait: 2000,
+  onUnmount: (b) => b.flush()
+});
+```
+
+Example usage:
+```tsx
+// Default behavior - no reactive state subscriptions
+const batcher = createBatcher(
+  (items) => {
+    // Process batch of items
+    console.log('Processing batch:', items);
+  },
+  {
+    maxSize: 5,
+    wait: 2000,
+    onExecute: (batcher) => console.log('Batch executed'),
+    getShouldExecute: (items) => items.length >= 3
+  }
+);
+
+// Opt-in to track items or isRunning changes (optimized for UI updates)
+const batcher = createBatcher(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({ items: state.items, isRunning: state.isRunning })
+);
+
+// Opt-in to track execution metrics changes (optimized for tracking progress)
+const batcher = createBatcher(
+  (items) => console.log('Processing batch:', items),
+  { maxSize: 5, wait: 2000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    totalItemsProcessed: state.totalItemsProcessed
+  })
+);
+
+// Add items to batch
+batcher.addItem('task1');
+batcher.addItem('task2');
+
+// Control the batcher
+batcher.stop();  // Pause processing
+batcher.start(); // Resume processing
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { items, isRunning } = batcher.state();
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`SolidBatcherOptions`](/pacer/framework/solid/reference/interfaces/SolidBatcherOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidBatcher`](/pacer/framework/solid/reference/interfaces/SolidBatcher)\&lt;`TValue`, `TSelected`\>
diff --git a/mintlify/pacer/framework/solid/reference/functions/createDebouncedSignal.md b/mintlify/pacer/framework/solid/reference/functions/createDebouncedSignal.md
new file mode 100644
index 000000000..5b3f99452
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createDebouncedSignal.md
@@ -0,0 +1,115 @@
+---
+id: createDebouncedSignal
+title: createDebouncedSignal
+---
+
+# Function: createDebouncedSignal()
+
+```ts
+function createDebouncedSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncedSignal.ts:78](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncedSignal.ts#L78)
+
+A Solid hook that creates a debounced state value, combining Solid's createSignal with debouncing functionality.
+This hook provides both the current debounced value and methods to update it.
+
+The state value is only updated after the specified wait time has elapsed since the last update attempt.
+If another update is attempted before the wait time expires, the timer resets and starts waiting again.
+This is useful for handling frequent state updates that should be throttled, like search input values
+or window resize dimensions.
+
+The hook returns a tuple containing:
+- The current debounced value accessor
+- A function to update the debounced value
+- The debouncer instance with additional control methods and state signals
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+[`SolidDebouncerOptions`](/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, `Setter`\&lt;`TValue`\>, [`SolidDebouncer`](/pacer/framework/solid/reference/interfaces/SolidDebouncer)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
+  wait: 500 // Wait 500ms after last keystroke
+});
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
+  '',
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
+const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
+  '',
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Update value - will be debounced
+const handleChange = (e) => {
+  setSearchTerm(e.target.value);
+};
+
+// Access debouncer state via signals
+console.log('Executions:', debouncer.state().executionCount);
+console.log('Is pending:', debouncer.state().isPending);
+
+// In onExecute callback, use get* methods
+const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
+  wait: 500,
+  onExecute: (debouncer) => {
+    console.log('Total executions:', debouncer.getExecutionCount());
+  }
+});
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createDebouncedValue.md b/mintlify/pacer/framework/solid/reference/functions/createDebouncedValue.md
new file mode 100644
index 000000000..8933560cc
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createDebouncedValue.md
@@ -0,0 +1,106 @@
+---
+id: createDebouncedValue
+title: createDebouncedValue
+---
+
+# Function: createDebouncedValue()
+
+```ts
+function createDebouncedValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncedValue.ts:69](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncedValue.ts#L69)
+
+A Solid hook that creates a debounced value that updates only after a specified delay.
+Unlike createDebouncedSignal, this hook automatically tracks changes to the input value
+and updates the debounced value accordingly.
+
+The debounced value will only update after the specified wait time has elapsed since
+the last change to the input value. If the input value changes again before the wait
+time expires, the timer resets and starts waiting again.
+
+This is useful for deriving debounced values from props or state that change frequently,
+like search queries or form inputs, where you want to limit how often downstream effects
+or calculations occur.
+
+The hook returns a tuple containing:
+- An Accessor that provides the current debounced value
+- The debouncer instance with control methods
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying debouncer instance.
+The `selector` parameter allows you to specify which debouncer state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available debouncer state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`Accessor`\&lt;`TValue`\>
+
+### initialOptions
+
+[`SolidDebouncerOptions`](/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, [`SolidDebouncer`](/pacer/framework/solid/reference/interfaces/SolidDebouncer)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [searchQuery, setSearchQuery] = createSignal('');
+const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
+  wait: 500 // Wait 500ms after last change
+});
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const [debouncedQuery, debouncer] = createDebouncedValue(
+  searchQuery,
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// debouncedQuery will update 500ms after searchQuery stops changing
+createEffect(() => {
+  fetchSearchResults(debouncedQuery());
+});
+
+// Access debouncer state via signals
+console.log('Is pending:', debouncer.state().isPending);
+
+// Control the debouncer
+debouncer.cancel(); // Cancel any pending updates
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createDebouncer.md b/mintlify/pacer/framework/solid/reference/functions/createDebouncer.md
new file mode 100644
index 000000000..d2f0284d2
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createDebouncer.md
@@ -0,0 +1,141 @@
+---
+id: createDebouncer
+title: createDebouncer
+---
+
+# Function: createDebouncer()
+
+```ts
+function createDebouncer<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidDebouncer<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:156](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L156)
+
+A Solid hook that creates and manages a Debouncer instance.
+
+This is a lower-level hook that provides direct access to the Debouncer's functionality without
+any built-in state management. This allows you to integrate it with any state management solution
+you prefer (createSignal, Redux, Zustand, etc.).
+
+This hook provides debouncing functionality to limit how often a function can be called,
+waiting for a specified delay before executing the latest call. This is useful for handling
+frequent events like window resizing, scroll events, or real-time search inputs.
+
+The debouncer will only execute the function after the specified wait time has elapsed
+since the last call. If the function is called again before the wait time expires, the
+timer resets and starts waiting again.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `debouncer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the primitive cancels any pending execution when the owning component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const debouncer = createDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidDebouncerOptions`](/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidDebouncer`](/pacer/framework/solid/reference/interfaces/SolidDebouncer)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const debouncer = createDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 }
+);
+
+// Opt-in to track isPending changes (optimized for loading states)
+const debouncer = createDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to track executionCount changes (optimized for tracking execution)
+const debouncer = createDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Multiple state properties - track when any of these change
+const debouncer = createDebouncer(
+  (query: string) => fetchSearchResults(query),
+  { wait: 500 },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+);
+
+// In an event handler
+const handleChange = (e) => {
+  debouncer.maybeExecute(e.target.value);
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending } = debouncer.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createQueuedSignal.md b/mintlify/pacer/framework/solid/reference/functions/createQueuedSignal.md
new file mode 100644
index 000000000..5150c7d35
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createQueuedSignal.md
@@ -0,0 +1,157 @@
+---
+id: createQueuedSignal
+title: createQueuedSignal
+---
+
+# Function: createQueuedSignal()
+
+```ts
+function createQueuedSignal<TValue, TSelected>(
+   fn, 
+   options, 
+   selector): [() => TValue[], (item, position?, runOnItemsChange?) => boolean, SolidQueuer<TValue, TSelected>];
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuedSignal.ts:119](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuedSignal.ts#L119)
+
+A Solid primitive that creates a queuer with managed state, combining Solid's signals with queuing functionality.
+This primitive provides both the current queue state and queue control methods.
+
+The queue state is automatically updated whenever items are added, removed, or reordered in the queue.
+All queue operations are reflected in the state array returned by the primitive.
+
+The queue can be started and stopped to automatically process items at a specified interval,
+making it useful as a scheduler. When started, it will process one item per tick, with an
+optional wait time between ticks.
+
+The primitive returns a tuple containing:
+- The current queue state as an array
+- The queue instance with methods for queue manipulation
+
+## State Management and Selector
+
+The primitive uses Solid's reactive state management via the underlying queuer instance.
+The `selector` parameter allows you to specify which queuer state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary updates and gives you
+full control over when your component tracks state changes. Only when you provide a selector will the
+component track changes to the selected state values.
+
+Available queuer state properties:
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed due to expiration
+- `isEmpty`: Whether the queuer has no items to process
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` *extends* `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\> = `Pick`\&lt;`QueuerState`\&lt;`TValue`\>, `"items"`\>
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`SolidQueuerOptions`](/pacer/framework/solid/reference/interfaces/SolidQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[() => `TValue`[], (`item`, `position?`, `runOnItemsChange?`) => `boolean`, [`SolidQueuer`](/pacer/framework/solid/reference/interfaces/SolidQueuer)\&lt;`TValue`, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [items, addItem, queue] = createQueuedSignal(
+  (item) => console.log('Processing:', item),
+  {
+    initialItems: ['item1', 'item2'],
+    started: true,
+    wait: 1000,
+    getPriority: (item) => item.priority
+  }
+);
+
+// Opt-in to track queue contents changes (optimized for displaying queue items)
+const [items, addItem, queue] = createQueuedSignal(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    items: state.items,
+    size: state.size,
+    isEmpty: state.isEmpty
+  })
+);
+
+// Opt-in to track processing state changes (optimized for loading indicators)
+const [items, addItem, queue] = createQueuedSignal(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    isRunning: state.isRunning,
+    isIdle: state.isIdle,
+    status: state.status,
+    pendingTick: state.pendingTick
+  })
+);
+
+// Opt-in to track execution metrics changes (optimized for stats display)
+const [items, addItem, queue] = createQueuedSignal(
+  (item) => console.log('Processing:', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    expirationCount: state.expirationCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add items to queue
+const handleAdd = (item) => {
+  addItem(item);
+};
+
+// Start automatic processing
+const startProcessing = () => {
+  queue.start();
+};
+
+// Stop automatic processing
+const stopProcessing = () => {
+  queue.stop();
+};
+
+// Manual processing still available
+const handleProcess = () => {
+  const nextItem = queue.getNextItem();
+  if (nextItem) {
+    processItem(nextItem);
+  }
+};
+
+// Access the selected queuer state (will be empty object {} unless selector provided)
+const { size, isRunning, executionCount } = queue.state;
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createQueuer.md b/mintlify/pacer/framework/solid/reference/functions/createQueuer.md
new file mode 100644
index 000000000..5ddd310fc
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createQueuer.md
@@ -0,0 +1,144 @@
+---
+id: createQueuer
+title: createQueuer
+---
+
+# Function: createQueuer()
+
+```ts
+function createQueuer<TValue, TSelected>(
+   fn, 
+   options, 
+selector): SolidQueuer<TValue, TSelected>;
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:156](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L156)
+
+Creates a Solid-compatible Queuer instance for managing a synchronous queue of items, exposing Solid signals for all stateful properties.
+
+Features:
+- Synchronous processing of items using the provided `fn` function
+- FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+- Priority queueing via `getPriority` or item `priority` property
+- Item expiration and removal of stale items
+- Configurable wait time between processing items
+- Pause/resume processing
+- Callbacks for queue state changes, execution, rejection, and expiration
+- All stateful properties (items, counts, etc.) are exposed as Solid signals for reactivity
+
+The queue processes items synchronously in order, with optional delays between each item. When started, it will process one item per tick, with an optional wait time between ticks. You can pause and resume processing with `stop()` and `start()`.
+
+By default, the queue uses FIFO behavior, but you can configure LIFO or double-ended queueing by specifying the position when adding or removing items.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `queuer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `executionCount`: Number of items that have been processed
+- `isRunning`: Whether the queuer is currently running (not stopped)
+- `items`: Array of items currently queued for processing
+- `rejectionCount`: Number of items that were rejected (expired or failed validation)
+
+## Unmount behavior
+
+By default, the primitive stops the queuer when the owning component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+
+```tsx
+const queue = createQueuer(fn, {
+  started: true,
+  wait: 1000,
+  onUnmount: (q) => q.flush()
+});
+```
+
+Example usage:
+```tsx
+// Default behavior - no reactive state subscriptions
+const queue = createQueuer(
+  (item) => {
+    // process item synchronously
+    console.log('Processing', item);
+  },
+  {
+    started: true, // Start processing immediately
+    wait: 1000,    // Process one item every second
+    getPriority: (item) => item.priority // Process higher priority items first
+  }
+);
+
+// Opt-in to track items or isRunning changes (optimized for UI updates)
+const queue = createQueuer(
+  (item) => console.log('Processing', item),
+  { started: true, wait: 1000 },
+  (state) => ({ items: state.items, isRunning: state.isRunning })
+);
+
+// Opt-in to track execution metrics changes (optimized for tracking progress)
+const queue = createQueuer(
+  (item) => console.log('Processing', item),
+  { started: true, wait: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Add items to process - they'll be handled automatically
+queue.addItem('task1');
+queue.addItem('task2');
+
+// Control the scheduler
+queue.stop();  // Pause processing
+queue.start(); // Resume processing
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { items, isRunning } = queue.state();
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### options
+
+[`SolidQueuerOptions`](/pacer/framework/solid/reference/interfaces/SolidQueuerOptions)\&lt;`TValue`, `TSelected`\> = `{}`
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidQueuer`](/pacer/framework/solid/reference/interfaces/SolidQueuer)\&lt;`TValue`, `TSelected`\>
diff --git a/mintlify/pacer/framework/solid/reference/functions/createRateLimitedSignal.md b/mintlify/pacer/framework/solid/reference/functions/createRateLimitedSignal.md
new file mode 100644
index 000000000..bfebebf9d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createRateLimitedSignal.md
@@ -0,0 +1,129 @@
+---
+id: createRateLimitedSignal
+title: createRateLimitedSignal
+---
+
+# Function: createRateLimitedSignal()
+
+```ts
+function createRateLimitedSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, Setter<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimitedSignal.ts:95](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimitedSignal.ts#L95)
+
+A Solid hook that creates a rate-limited state value that enforces a hard limit on state updates within a time window.
+This hook combines Solid's createSignal with rate limiting functionality to provide controlled state updates.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- createThrottledSignal: When you want consistent spacing between updates (e.g. UI changes)
+- createDebouncedSignal: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- The rate-limited state value accessor
+- A rate-limited setter function that respects the configured limits
+- The rateLimiter instance for additional control
+
+For more direct control over rate limiting without state management,
+consider using the lower-level createRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available rate limiter state properties:
+- `callsInWindow`: Number of calls made in the current window
+- `remainingInWindow`: Number of calls remaining in the current window
+- `windowStart`: Unix timestamp when the current window started
+- `nextWindowStart`: Unix timestamp when the next window will start
+- `msUntilNextWindow`: Milliseconds until the next window starts
+- `isAtLimit`: Whether the call limit for the current window has been reached
+- `status`: Current status ('disabled' | 'idle' | 'at-limit')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+[`SolidRateLimiterOptions`](/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, `Setter`\&lt;`TValue`\>, [`SolidRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidRateLimiter)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, rateLimiter] = createRateLimitedSignal(0, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to reactive updates when limit state changes (optimized for UI feedback)
+const [value, setValue, rateLimiter] = createRateLimitedSignal(
+  0,
+  { limit: 5, window: 60000 },
+  (state) => ({ isAtLimit: state.isAtLimit, remainingInWindow: state.remainingInWindow })
+);
+
+// With rejection callback and fixed window
+const [value, setValue] = createRateLimitedSignal(0, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access rateLimiter state via signals
+const handleSubmit = () => {
+  const remaining = rateLimiter.state().remainingInWindow;
+  if (remaining > 0) {
+    setValue(newValue);
+  } else {
+    showRateLimitWarning();
+  }
+};
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createRateLimitedValue.md b/mintlify/pacer/framework/solid/reference/functions/createRateLimitedValue.md
new file mode 100644
index 000000000..765e01b0d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createRateLimitedValue.md
@@ -0,0 +1,131 @@
+---
+id: createRateLimitedValue
+title: createRateLimitedValue
+---
+
+# Function: createRateLimitedValue()
+
+```ts
+function createRateLimitedValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimitedValue.ts:97](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimitedValue.ts#L97)
+
+A high-level Solid hook that creates a rate-limited version of a value that updates at most a certain number of times within a time window.
+This hook uses Solid's createSignal internally to manage the rate-limited state.
+
+Rate limiting is a simple "hard limit" approach - it allows all updates until the limit is reached, then blocks
+subsequent updates until the window resets. Unlike throttling or debouncing, it does not attempt to space out
+or intelligently collapse updates. This can lead to bursts of rapid updates followed by periods of no updates.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All updates within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows updates as old ones expire. This provides a more
+  consistent rate of updates over time.
+
+For smoother update patterns, consider:
+- createThrottledValue: When you want consistent spacing between updates (e.g. UI changes)
+- createDebouncedValue: When you want to collapse rapid updates into a single update (e.g. search input)
+
+Rate limiting should primarily be used when you need to enforce strict limits, like API rate limits.
+
+The hook returns a tuple containing:
+- An accessor function that provides the rate-limited value
+- The rate limiter instance with control methods
+
+For more direct control over rate limiting behavior without Solid state management,
+consider using the lower-level createRateLimiter hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying rate limiter instance.
+The `selector` parameter allows you to specify which rate limiter state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available rate limiter state properties:
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`Accessor`\&lt;`TValue`\>
+
+### initialOptions
+
+[`SolidRateLimiterOptions`](/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, [`SolidRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidRateLimiter)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [rateLimitedValue, rateLimiter] = createRateLimitedValue(rawValue, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding'
+});
+
+// Opt-in to reactive updates when execution count changes (optimized for tracking successful updates)
+const [rateLimitedValue, rateLimiter] = createRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to reactive updates when rejection count changes (optimized for tracking rate limit violations)
+const [rateLimitedValue, rateLimiter] = createRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to reactive updates when execution times change (optimized for window calculations)
+const [rateLimitedValue, rateLimiter] = createRateLimitedValue(
+  rawValue,
+  { limit: 5, window: 60000, windowType: 'sliding' },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// With rejection callback and fixed window
+const [rateLimitedValue, rateLimiter] = createRateLimitedValue(rawValue, {
+  limit: 3,
+  window: 5000,
+  windowType: 'fixed',
+  onReject: (rateLimiter) => {
+    console.log(`Update rejected. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// Access the selected rate limiter state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state;
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createRateLimiter.md b/mintlify/pacer/framework/solid/reference/functions/createRateLimiter.md
new file mode 100644
index 000000000..dab1a4c04
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createRateLimiter.md
@@ -0,0 +1,170 @@
+---
+id: createRateLimiter
+title: createRateLimiter
+---
+
+# Function: createRateLimiter()
+
+```ts
+function createRateLimiter<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidRateLimiter<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:185](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L185)
+
+A low-level Solid hook that creates a `RateLimiter` instance to enforce rate limits on function execution.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+you can integrate with any state management solution (createSignal, etc).
+
+Rate limiting is a simple "hard limit" approach that allows executions until a maximum count is reached within
+a time window, then blocks all subsequent calls until the window resets. Unlike throttling or debouncing,
+it does not attempt to space out or collapse executions intelligently.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns:
+- Use throttling when you want consistent spacing between executions (e.g. UI updates)
+- Use debouncing when you want to collapse rapid-fire events (e.g. search input)
+- Use rate limiting only when you need to enforce hard limits (e.g. API rate limits)
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `rateLimiter.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `executionCount`: Number of function executions that have been completed
+- `rejectionCount`: Number of function calls that were rejected due to rate limiting
+- `remainingInWindow`: Number of executions remaining in the current window
+- `nextWindowTime`: Timestamp when the next window begins
+- `currentWindowStart`: Timestamp when the current window started
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidRateLimiterOptions`](/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const rateLimiter = createRateLimiter(apiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+});
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {(state) => (
+    <div>Rejections: {state().rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+
+// Opt-in to track execution count changes at hook level (optimized for tracking successful executions)
+const rateLimiter = createRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Opt-in to track rejection count changes (optimized for tracking rate limit violations)
+const rateLimiter = createRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ rejectionCount: state.rejectionCount })
+);
+
+// Opt-in to track execution times changes (optimized for window calculations)
+const rateLimiter = createRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({ executionTimes: state.executionTimes })
+);
+
+// Multiple state properties - track when any of these change
+const rateLimiter = createRateLimiter(
+  apiCall,
+  {
+    limit: 5,
+    window: 60000,
+    windowType: 'sliding',
+  },
+  (state) => ({
+    executionCount: state.executionCount,
+    rejectionCount: state.rejectionCount
+  })
+);
+
+// Monitor rate limit status
+const handleClick = () => {
+  const remaining = rateLimiter.getRemainingInWindow();
+  if (remaining > 0) {
+    rateLimiter.maybeExecute(data);
+  } else {
+    showRateLimitWarning();
+  }
+};
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { executionCount, rejectionCount } = rateLimiter.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createThrottledSignal.md b/mintlify/pacer/framework/solid/reference/functions/createThrottledSignal.md
new file mode 100644
index 000000000..59ef869bf
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createThrottledSignal.md
@@ -0,0 +1,106 @@
+---
+id: createThrottledSignal
+title: createThrottledSignal
+---
+
+# Function: createThrottledSignal()
+
+```ts
+function createThrottledSignal<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottledSignal.ts:69](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottledSignal.ts#L69)
+
+A Solid hook that creates a throttled state value that updates at most once within a specified time window.
+This hook combines Solid's createSignal with throttling functionality to provide controlled state updates.
+
+Throttling ensures state updates occur at a controlled rate regardless of how frequently the setter is called.
+This is useful for rate-limiting expensive updates or operations that depend on rapidly changing state.
+
+The hook returns a tuple containing:
+- The throttled state value accessor
+- A throttled setter function that respects the configured wait time
+- The throttler instance for additional control
+
+For more direct control over throttling without state management,
+consider using the lower-level createThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available throttler state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger trailing execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Unix timestamp of the last execution
+- `nextExecutionTime`: Unix timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`TValue`
+
+### initialOptions
+
+[`SolidThrottlerOptions`](/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, `Setter`\&lt;`TValue`\>, [`SolidThrottler`](/pacer/framework/solid/reference/interfaces/SolidThrottler)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [value, setValue, throttler] = createThrottledSignal(0, { wait: 1000 });
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const [value, setValue, throttler] = createThrottledSignal(
+  0,
+  { wait: 1000 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// With custom leading/trailing behavior
+const [value, setValue] = createThrottledSignal(0, {
+  wait: 1000,
+  leading: true,   // Update immediately on first change
+  trailing: false  // Skip trailing edge updates
+});
+
+// Access throttler state via signals
+console.log('Executions:', throttler.state().executionCount);
+console.log('Is pending:', throttler.state().isPending);
+console.log('Last execution:', throttler.state().lastExecutionTime);
+console.log('Next execution:', throttler.state().nextExecutionTime);
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createThrottledValue.md b/mintlify/pacer/framework/solid/reference/functions/createThrottledValue.md
new file mode 100644
index 000000000..65d16569f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createThrottledValue.md
@@ -0,0 +1,103 @@
+---
+id: createThrottledValue
+title: createThrottledValue
+---
+
+# Function: createThrottledValue()
+
+```ts
+function createThrottledValue<TValue, TSelected>(
+   value, 
+   initialOptions, 
+   selector?): [Accessor<TValue>, SolidThrottler<Setter<TValue>, TSelected>];
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottledValue.ts:66](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottledValue.ts#L66)
+
+A high-level Solid hook that creates a throttled version of a value that updates at most once within a specified time window.
+This hook uses Solid's createSignal internally to manage the throttled state.
+
+Throttling ensures the value updates occur at a controlled rate regardless of how frequently the input value changes.
+This is useful for rate-limiting expensive updates or API calls that depend on rapidly changing values.
+
+The hook returns a tuple containing:
+- An accessor function that provides the throttled value
+- The throttler instance with control methods
+
+The throttled value will update according to the leading/trailing edge behavior specified in the options.
+
+For more direct control over throttling behavior without Solid state management,
+consider using the lower-level createThrottler hook instead.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management via the underlying throttler instance.
+The `selector` parameter allows you to specify which throttler state changes will trigger reactive updates,
+optimizing performance by preventing unnecessary subscriptions when irrelevant state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function. This prevents unnecessary reactive updates and gives you
+full control over when your component subscribes to state changes. Only when you provide a selector will
+the reactive system track the selected state values.
+
+Available throttler state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger trailing execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Unix timestamp of the last execution
+- `nextExecutionTime`: Unix timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### value
+
+`Accessor`\&lt;`TValue`\>
+
+### initialOptions
+
+[`SolidThrottlerOptions`](/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, [`SolidThrottler`](/pacer/framework/solid/reference/interfaces/SolidThrottler)\&lt;`Setter`\&lt;`TValue`\>, `TSelected`\>\]
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const [throttledValue, throttler] = createThrottledValue(rawValue, { wait: 1000 });
+
+// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
+const [throttledValue, throttler] = createThrottledValue(
+  rawValue,
+  { wait: 1000 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Use the throttled value
+console.log(throttledValue()); // Access the current throttled value
+
+// Access throttler state via signals
+console.log('Is pending:', throttler.state().isPending);
+
+// Control the throttler
+throttler.cancel(); // Cancel any pending updates
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/createThrottler.md b/mintlify/pacer/framework/solid/reference/functions/createThrottler.md
new file mode 100644
index 000000000..35e147f32
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/createThrottler.md
@@ -0,0 +1,144 @@
+---
+id: createThrottler
+title: createThrottler
+---
+
+# Function: createThrottler()
+
+```ts
+function createThrottler<TFn, TSelected>(
+   fn, 
+   options, 
+selector): SolidThrottler<TFn, TSelected>;
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:159](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L159)
+
+A low-level Solid hook that creates a `Throttler` instance that limits how often the provided function can execute.
+
+This hook is designed to be flexible and state-management agnostic - it simply returns a throttler instance that
+you can integrate with any state management solution (createSignal, Redux, Zustand, Jotai, etc). For a simpler and higher-level hook that
+integrates directly with Solid's createSignal, see createThrottledSignal.
+
+Throttling ensures a function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting
+expensive operations or UI updates.
+
+## State Management and Selector
+
+The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+in two ways:
+
+**1. Using `throttler.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without
+needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+in child components.
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates
+at the hook level, optimizing performance by preventing unnecessary updates when irrelevant
+state changes occur.
+
+**By default, there will be no reactive state subscriptions** and you must opt-in to state
+tracking by providing a selector function or using the `Subscribe` component. This prevents unnecessary
+updates and gives you full control over when your component tracks state changes.
+
+Available state properties:
+- `canLeadingExecute`: Whether the throttler can execute on the leading edge
+- `canTrailingExecute`: Whether the throttler can execute on the trailing edge
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to maybeExecute
+- `lastExecutionTime`: Timestamp of the last execution
+- `nextExecutionTime`: Timestamp of the next allowed execution
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Unmount behavior
+
+By default, the primitive cancels any pending execution when the owning component unmounts.
+Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+
+```tsx
+const throttler = createThrottler(fn, {
+  wait: 1000,
+  onUnmount: (t) => t.flush()
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### options
+
+[`SolidThrottlerOptions`](/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions)\&lt;`TFn`, `TSelected`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+## Returns
+
+[`SolidThrottler`](/pacer/framework/solid/reference/interfaces/SolidThrottler)\&lt;`TFn`, `TSelected`\>
+
+## Example
+
+```tsx
+// Default behavior - no reactive state subscriptions
+const throttler = createThrottler(setValue, { wait: 1000 });
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {(state) => (
+    <div>{state().isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+
+// Opt-in to track isPending changes at hook level (optimized for loading states)
+const throttler = createThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({ isPending: state.isPending })
+);
+
+// Opt-in to track executionCount changes (optimized for tracking execution)
+const throttler = createThrottler(
+  setValue,
+  { wait: 1000 },
+  (state) => ({ executionCount: state.executionCount })
+);
+
+// Multiple state properties - track when any of these change
+const throttler = createThrottler(
+  setValue,
+  {
+    wait: 2000,
+    leading: true,   // Execute immediately on first call
+    trailing: false  // Skip trailing edge updates
+  },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    lastExecutionTime: state.lastExecutionTime,
+    nextExecutionTime: state.nextExecutionTime
+  })
+);
+
+// Access the selected state (will be empty object {} unless selector provided)
+const { isPending, executionCount } = throttler.state();
+```
diff --git a/mintlify/pacer/framework/solid/reference/functions/useDefaultPacerOptions.md b/mintlify/pacer/framework/solid/reference/functions/useDefaultPacerOptions.md
new file mode 100644
index 000000000..710caa6ef
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/useDefaultPacerOptions.md
@@ -0,0 +1,16 @@
+---
+id: useDefaultPacerOptions
+title: useDefaultPacerOptions
+---
+
+# Function: useDefaultPacerOptions()
+
+```ts
+function useDefaultPacerOptions(): PacerProviderOptions;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:60](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L60)
+
+## Returns
+
+[`PacerProviderOptions`](/pacer/framework/solid/reference/interfaces/PacerProviderOptions)
diff --git a/mintlify/pacer/framework/solid/reference/functions/usePacerContext.md b/mintlify/pacer/framework/solid/reference/functions/usePacerContext.md
new file mode 100644
index 000000000..12ef5ce1e
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/functions/usePacerContext.md
@@ -0,0 +1,16 @@
+---
+id: usePacerContext
+title: usePacerContext
+---
+
+# Function: usePacerContext()
+
+```ts
+function usePacerContext(): PacerContextValue | null;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L56)
+
+## Returns
+
+`PacerContextValue` \| `null`
diff --git a/mintlify/pacer/framework/solid/reference/index.md b/mintlify/pacer/framework/solid/reference/index.md
new file mode 100644
index 000000000..2cc29664d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/index.md
@@ -0,0 +1,54 @@
+---
+id: "@tanstack/solid-pacer"
+title: "@tanstack/solid-pacer"
+---
+
+# @tanstack/solid-pacer
+
+## Interfaces
+
+- [PacerProviderOptions](/pacer/framework/solid/reference/interfaces/PacerProviderOptions)
+- [PacerProviderProps](/pacer/framework/solid/reference/interfaces/PacerProviderProps)
+- [SolidAsyncBatcher](/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher)
+- [SolidAsyncBatcherOptions](/pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions)
+- [SolidAsyncDebouncer](/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer)
+- [SolidAsyncDebouncerOptions](/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions)
+- [SolidAsyncQueuer](/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer)
+- [SolidAsyncQueuerOptions](/pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions)
+- [SolidAsyncRateLimiter](/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter)
+- [SolidAsyncRateLimiterOptions](/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions)
+- [SolidAsyncThrottler](/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler)
+- [SolidAsyncThrottlerOptions](/pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions)
+- [SolidBatcher](/pacer/framework/solid/reference/interfaces/SolidBatcher)
+- [SolidBatcherOptions](/pacer/framework/solid/reference/interfaces/SolidBatcherOptions)
+- [SolidDebouncer](/pacer/framework/solid/reference/interfaces/SolidDebouncer)
+- [SolidDebouncerOptions](/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions)
+- [SolidQueuer](/pacer/framework/solid/reference/interfaces/SolidQueuer)
+- [SolidQueuerOptions](/pacer/framework/solid/reference/interfaces/SolidQueuerOptions)
+- [SolidRateLimiter](/pacer/framework/solid/reference/interfaces/SolidRateLimiter)
+- [SolidRateLimiterOptions](/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions)
+- [SolidThrottler](/pacer/framework/solid/reference/interfaces/SolidThrottler)
+- [SolidThrottlerOptions](/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions)
+
+## Functions
+
+- [createAsyncBatcher](/pacer/framework/solid/reference/functions/createAsyncBatcher)
+- [createAsyncDebouncer](/pacer/framework/solid/reference/functions/createAsyncDebouncer)
+- [createAsyncQueuer](/pacer/framework/solid/reference/functions/createAsyncQueuer)
+- [createAsyncRateLimiter](/pacer/framework/solid/reference/functions/createAsyncRateLimiter)
+- [createAsyncThrottler](/pacer/framework/solid/reference/functions/createAsyncThrottler)
+- [createBatcher](/pacer/framework/solid/reference/functions/createBatcher)
+- [createDebouncedSignal](/pacer/framework/solid/reference/functions/createDebouncedSignal)
+- [createDebouncedValue](/pacer/framework/solid/reference/functions/createDebouncedValue)
+- [createDebouncer](/pacer/framework/solid/reference/functions/createDebouncer)
+- [createQueuedSignal](/pacer/framework/solid/reference/functions/createQueuedSignal)
+- [createQueuer](/pacer/framework/solid/reference/functions/createQueuer)
+- [createRateLimitedSignal](/pacer/framework/solid/reference/functions/createRateLimitedSignal)
+- [createRateLimitedValue](/pacer/framework/solid/reference/functions/createRateLimitedValue)
+- [createRateLimiter](/pacer/framework/solid/reference/functions/createRateLimiter)
+- [createThrottledSignal](/pacer/framework/solid/reference/functions/createThrottledSignal)
+- [createThrottledValue](/pacer/framework/solid/reference/functions/createThrottledValue)
+- [createThrottler](/pacer/framework/solid/reference/functions/createThrottler)
+- [PacerProvider](/pacer/framework/solid/reference/functions/PacerProvider)
+- [useDefaultPacerOptions](/pacer/framework/solid/reference/functions/useDefaultPacerOptions)
+- [usePacerContext](/pacer/framework/solid/reference/functions/usePacerContext)
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderOptions.md
new file mode 100644
index 000000000..b0b791710
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderOptions.md
@@ -0,0 +1,108 @@
+---
+id: PacerProviderOptions
+title: PacerProviderOptions
+---
+
+# Interface: PacerProviderOptions
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:18](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L18)
+
+## Properties
+
+### asyncBatcher?
+
+```ts
+optional asyncBatcher: Partial<AsyncBatcherOptions<any>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:19](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L19)
+
+***
+
+### asyncDebouncer?
+
+```ts
+optional asyncDebouncer: Partial<AsyncDebouncerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:20](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L20)
+
+***
+
+### asyncQueuer?
+
+```ts
+optional asyncQueuer: Partial<AsyncQueuerOptions<any>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L21)
+
+***
+
+### asyncRateLimiter?
+
+```ts
+optional asyncRateLimiter: Partial<AsyncRateLimiterOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:22](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L22)
+
+***
+
+### asyncThrottler?
+
+```ts
+optional asyncThrottler: Partial<AsyncThrottlerOptions<AnyAsyncFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:23](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L23)
+
+***
+
+### batcher?
+
+```ts
+optional batcher: Partial<BatcherOptions<any>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L24)
+
+***
+
+### debouncer?
+
+```ts
+optional debouncer: Partial<DebouncerOptions<AnyFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:25](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L25)
+
+***
+
+### queuer?
+
+```ts
+optional queuer: Partial<QueuerOptions<any>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:26](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L26)
+
+***
+
+### rateLimiter?
+
+```ts
+optional rateLimiter: Partial<RateLimiterOptions<AnyFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:27](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L27)
+
+***
+
+### throttler?
+
+```ts
+optional throttler: Partial<ThrottlerOptions<AnyFunction>>;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:28](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L28)
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderProps.md b/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderProps.md
new file mode 100644
index 000000000..e28eb225e
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/PacerProviderProps.md
@@ -0,0 +1,28 @@
+---
+id: PacerProviderProps
+title: PacerProviderProps
+---
+
+# Interface: PacerProviderProps
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:37](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L37)
+
+## Properties
+
+### children
+
+```ts
+children: Element;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:38](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L38)
+
+***
+
+### defaultOptions?
+
+```ts
+optional defaultOptions: PacerProviderOptions;
+```
+
+Defined in: [solid-pacer/src/provider/PacerProvider.tsx:39](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/provider/PacerProvider.tsx#L39)
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher.md
new file mode 100644
index 000000000..e2353c1c1
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher.md
@@ -0,0 +1,100 @@
+---
+id: SolidAsyncBatcher
+title: SolidAsyncBatcher
+---
+
+# Interface: SolidAsyncBatcher\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:23](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncBatcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:49](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L49)
+
+Reactive state that will be updated when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncBatcherState<TValue>>>;
+```
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:55](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L55)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:40](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L40)
+
+A Solid component that allows you to subscribe to the batcher state.
+
+This is useful for tracking specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size, isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>Batch: {state().size} items, {state().isExecuting ? 'Executing...' : 'Idle'}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions.md
new file mode 100644
index 000000000..388f7ff2e
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidAsyncBatcherOptions
+title: SolidAsyncBatcherOptions
+---
+
+# Interface: SolidAsyncBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:12](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L12)
+
+## Extends
+
+- `AsyncBatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [solid-pacer/src/async-batcher/createAsyncBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-batcher/createAsyncBatcher.ts#L20)
+
+Optional callback invoked when the owning component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`SolidAsyncBatcher`](/pacer/framework/solid/reference/interfaces/SolidAsyncBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer.md
new file mode 100644
index 000000000..b9b3d6872
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: SolidAsyncDebouncer
+title: SolidAsyncDebouncer
+---
+
+# Interface: SolidAsyncDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncDebouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L50)
+
+Reactive state that will be updated when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
+```
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L41)
+
+A Solid component that allows you to subscribe to the debouncer state.
+
+This is useful for tracking specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state().isPending ? 'Waiting...' : state().isExecuting ? 'Executing...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions.md
new file mode 100644
index 000000000..8a4e7b977
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidAsyncDebouncerOptions
+title: SolidAsyncDebouncerOptions
+---
+
+# Interface: SolidAsyncDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L13)
+
+## Extends
+
+- `AsyncDebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [solid-pacer/src/async-debouncer/createAsyncDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-debouncer/createAsyncDebouncer.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`SolidAsyncDebouncer`](/pacer/framework/solid/reference/interfaces/SolidAsyncDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer.md
new file mode 100644
index 000000000..c2350663f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer.md
@@ -0,0 +1,100 @@
+---
+id: SolidAsyncQueuer
+title: SolidAsyncQueuer
+---
+
+# Interface: SolidAsyncQueuer\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:23](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L23)
+
+## Extends
+
+- `Omit`\&lt;`AsyncQueuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L49)
+
+Reactive state that will be updated when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;
+```
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:55](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L55)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:40](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L40)
+
+A Solid component that allows you to subscribe to the queuer state.
+
+This is useful for tracking specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ pendingItems: state.pendingItems, activeItems: state.activeItems })}>
+  {(state) => (
+    <div>Pending: {state().pendingItems.length}, Active: {state().activeItems.length}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions.md
new file mode 100644
index 000000000..fbd9268e3
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidAsyncQueuerOptions
+title: SolidAsyncQueuerOptions
+---
+
+# Interface: SolidAsyncQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:12](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L12)
+
+## Extends
+
+- `AsyncQueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [solid-pacer/src/async-queuer/createAsyncQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-queuer/createAsyncQueuer.ts#L20)
+
+Optional callback invoked when the owning component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop + abort); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`SolidAsyncQueuer`](/pacer/framework/solid/reference/interfaces/SolidAsyncQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter.md
new file mode 100644
index 000000000..871844937
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: SolidAsyncRateLimiter
+title: SolidAsyncRateLimiter
+---
+
+# Interface: SolidAsyncRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncRateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L50)
+
+Reactive state that will be updated when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+```
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L41)
+
+A Solid component that allows you to subscribe to the rate limiter state.
+
+This is useful for tracking specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>Rejected: {state().rejectionCount}, {state().isExecuting ? 'Executing' : 'Idle'}</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions.md
new file mode 100644
index 000000000..d5451f202
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidAsyncRateLimiterOptions
+title: SolidAsyncRateLimiterOptions
+---
+
+# Interface: SolidAsyncRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L13)
+
+## Extends
+
+- `AsyncRateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-rate-limiter/createAsyncRateLimiter.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup (abort); use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`SolidAsyncRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidAsyncRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler.md
new file mode 100644
index 000000000..88bb8b3cd
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler.md
@@ -0,0 +1,100 @@
+---
+id: SolidAsyncThrottler
+title: SolidAsyncThrottler
+---
+
+# Interface: SolidAsyncThrottler\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`AsyncThrottler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L50)
+
+Reactive state that will be updated when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+```
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L41)
+
+A Solid component that allows you to subscribe to the throttler state.
+
+This is useful for tracking specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state().isPending ? 'Pending...' : state().isExecuting ? 'Executing...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions.md
new file mode 100644
index 000000000..49ce4809b
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidAsyncThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidAsyncThrottlerOptions
+title: SolidAsyncThrottlerOptions
+---
+
+# Interface: SolidAsyncThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L13)
+
+## Extends
+
+- `AsyncThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyAsyncFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [solid-pacer/src/async-throttler/createAsyncThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/async-throttler/createAsyncThrottler.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`SolidAsyncThrottler`](/pacer/framework/solid/reference/interfaces/SolidAsyncThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcher.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcher.md
new file mode 100644
index 000000000..6d68909fa
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcher.md
@@ -0,0 +1,100 @@
+---
+id: SolidBatcher
+title: SolidBatcher
+---
+
+# Interface: SolidBatcher\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Batcher`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:46](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L46)
+
+Reactive state that will be updated when the batcher state changes
+
+Use this instead of `batcher.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<BatcherState<TValue>>>;
+```
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:52](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L52)
+
+#### Deprecated
+
+Use `batcher.state` instead of `batcher.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:37](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L37)
+
+A Solid component that allows you to subscribe to the batcher state.
+
+This is useful for tracking specific parts of the batcher state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<batcher.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {(state) => (
+    <div>Batch: {state().size} items, {state().isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</batcher.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcherOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcherOptions.md
new file mode 100644
index 000000000..f39a228c4
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidBatcherOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidBatcherOptions
+title: SolidBatcherOptions
+---
+
+# Interface: SolidBatcherOptions\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:9](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L9)
+
+## Extends
+
+- `BatcherOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (batcher) => void;
+```
+
+Defined in: [solid-pacer/src/batcher/createBatcher.ts:17](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/batcher/createBatcher.ts#L17)
+
+Optional callback invoked when the owning component unmounts. Receives the batcher instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### batcher
+
+[`SolidBatcher`](/pacer/framework/solid/reference/interfaces/SolidBatcher)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncer.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncer.md
new file mode 100644
index 000000000..ef9d47e7d
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncer.md
@@ -0,0 +1,100 @@
+---
+id: SolidDebouncer
+title: SolidDebouncer
+---
+
+# Interface: SolidDebouncer\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Debouncer`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L50)
+
+Reactive state that will be updated when the debouncer state changes
+
+Use this instead of `debouncer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<DebouncerState<TFn>>>;
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L56)
+
+#### Deprecated
+
+Use `debouncer.state` instead of `debouncer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L41)
+
+A Solid component that allows you to subscribe to the debouncer state.
+
+This is useful for tracking specific parts of the debouncer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {(state) => (
+    <div>{state().isPending ? 'Waiting...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions.md
new file mode 100644
index 000000000..12a50c370
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidDebouncerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidDebouncerOptions
+title: SolidDebouncerOptions
+---
+
+# Interface: SolidDebouncerOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L13)
+
+## Extends
+
+- `DebouncerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (debouncer) => void;
+```
+
+Defined in: [solid-pacer/src/debouncer/createDebouncer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/debouncer/createDebouncer.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the debouncer instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### debouncer
+
+[`SolidDebouncer`](/pacer/framework/solid/reference/interfaces/SolidDebouncer)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuer.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuer.md
new file mode 100644
index 000000000..b92f8f33f
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuer.md
@@ -0,0 +1,100 @@
+---
+id: SolidQueuer
+title: SolidQueuer
+---
+
+# Interface: SolidQueuer\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L20)
+
+## Extends
+
+- `Omit`\&lt;`Queuer`\&lt;`TValue`\>, `"store"`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:46](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L46)
+
+Reactive state that will be updated when the queuer state changes
+
+Use this instead of `queuer.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<QueuerState<TValue>>>;
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:52](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L52)
+
+#### Deprecated
+
+Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:37](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L37)
+
+A Solid component that allows you to subscribe to the queuer state.
+
+This is useful for tracking specific parts of the queuer state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<queuer.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
+  {(state) => (
+    <div>Queue: {state().size} items, {state().isRunning ? 'Processing' : 'Idle'}</div>
+  )}
+</queuer.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuerOptions.md
new file mode 100644
index 000000000..0a24ca9a3
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidQueuerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidQueuerOptions
+title: SolidQueuerOptions
+---
+
+# Interface: SolidQueuerOptions\&lt;TValue, TSelected\>
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L9)
+
+## Extends
+
+- `QueuerOptions`\&lt;`TValue`\>
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (queuer) => void;
+```
+
+Defined in: [solid-pacer/src/queuer/createQueuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/queuer/createQueuer.ts#L17)
+
+Optional callback invoked when the owning component unmounts. Receives the queuer instance.
+When provided, replaces the default cleanup (stop); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+
+#### Parameters
+
+##### queuer
+
+[`SolidQueuer`](/pacer/framework/solid/reference/interfaces/SolidQueuer)\&lt;`TValue`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiter.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiter.md
new file mode 100644
index 000000000..fd9e83306
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiter.md
@@ -0,0 +1,100 @@
+---
+id: SolidRateLimiter
+title: SolidRateLimiter
+---
+
+# Interface: SolidRateLimiter\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`RateLimiter`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L50)
+
+Reactive state that will be updated when the rate limiter state changes
+
+Use this instead of `rateLimiter.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<RateLimiterState>>;
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L56)
+
+#### Deprecated
+
+Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L41)
+
+A Solid component that allows you to subscribe to the rate limiter state.
+
+This is useful for tracking specific parts of the rate limiter state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {(state) => (
+    <div>Rejections: {state().rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions.md
new file mode 100644
index 000000000..6b522ce74
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidRateLimiterOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidRateLimiterOptions
+title: SolidRateLimiterOptions
+---
+
+# Interface: SolidRateLimiterOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L13)
+
+## Extends
+
+- `RateLimiterOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (rateLimiter) => void;
+```
+
+Defined in: [solid-pacer/src/rate-limiter/createRateLimiter.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/rate-limiter/createRateLimiter.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the rate limiter instance.
+When provided, replaces the default cleanup; use it to call reset(), add logging, etc.
+
+#### Parameters
+
+##### rateLimiter
+
+[`SolidRateLimiter`](/pacer/framework/solid/reference/interfaces/SolidRateLimiter)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottler.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottler.md
new file mode 100644
index 000000000..61b943802
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottler.md
@@ -0,0 +1,100 @@
+---
+id: SolidThrottler
+title: SolidThrottler
+---
+
+# Interface: SolidThrottler\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L24)
+
+## Extends
+
+- `Omit`\&lt;`Throttler`\&lt;`TFn`\>, `"store"`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### state
+
+```ts
+readonly state: Accessor<Readonly<TSelected>>;
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:50](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L50)
+
+Reactive state that will be updated when the throttler state changes
+
+Use this instead of `throttler.store.state`
+
+***
+
+### ~~store~~
+
+```ts
+readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:56](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L56)
+
+#### Deprecated
+
+Use `throttler.state` instead of `throttler.store.state` if you want to read reactive state.
+The state on the store object is not reactive, as it has not been wrapped in a `useSelector` hook internally.
+Although, you can make the state reactive by using the `useSelector` in your own usage.
+
+***
+
+### Subscribe()
+
+```ts
+Subscribe: <TSelected>(props) => Element;
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:41](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L41)
+
+A Solid component that allows you to subscribe to the throttler state.
+
+This is useful for tracking specific parts of the throttler state
+deep in your component tree without needing to pass a selector to the hook.
+
+#### Type Parameters
+
+##### TSelected
+
+`TSelected`
+
+#### Parameters
+
+##### props
+
+###### children
+
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
+
+#### Returns
+
+`Element`
+
+#### Example
+
+```ts
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {(state) => (
+    <div>{state().isPending ? 'Loading...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
diff --git a/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions.md b/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions.md
new file mode 100644
index 000000000..7a205e0c1
--- /dev/null
+++ b/mintlify/pacer/framework/solid/reference/interfaces/SolidThrottlerOptions.md
@@ -0,0 +1,46 @@
+---
+id: SolidThrottlerOptions
+title: SolidThrottlerOptions
+---
+
+# Interface: SolidThrottlerOptions\&lt;TFn, TSelected\>
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:13](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L13)
+
+## Extends
+
+- `ThrottlerOptions`\&lt;`TFn`\>
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* `AnyFunction`
+
+### TSelected
+
+`TSelected` = \&#123;
+\&#125;
+
+## Properties
+
+### onUnmount()?
+
+```ts
+optional onUnmount: (throttler) => void;
+```
+
+Defined in: [solid-pacer/src/throttler/createThrottler.ts:21](https://github.com/TanStack/pacer/blob/main/packages/solid-pacer/src/throttler/createThrottler.ts#L21)
+
+Optional callback invoked when the owning component unmounts. Receives the throttler instance.
+When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+
+#### Parameters
+
+##### throttler
+
+[`SolidThrottler`](/pacer/framework/solid/reference/interfaces/SolidThrottler)\&lt;`TFn`, `TSelected`\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/framework/vanilla/examples/LiteBatcher.md b/mintlify/pacer/framework/vanilla/examples/LiteBatcher.md
new file mode 100644
index 000000000..814ca950e
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/LiteBatcher.md
@@ -0,0 +1,12 @@
+---
+title: "LiteBatcher"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/LiteBatcher)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/LiteBatcher)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/LiteDebouncer.md b/mintlify/pacer/framework/vanilla/examples/LiteDebouncer.md
new file mode 100644
index 000000000..be43e691b
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/LiteDebouncer.md
@@ -0,0 +1,12 @@
+---
+title: "LiteDebouncer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/LiteDebouncer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/LiteDebouncer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/LiteQueuer.md b/mintlify/pacer/framework/vanilla/examples/LiteQueuer.md
new file mode 100644
index 000000000..bd5f862f3
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/LiteQueuer.md
@@ -0,0 +1,12 @@
+---
+title: "LiteQueuer"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/LiteQueuer)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/LiteQueuer)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/LiteRateLimiter.md b/mintlify/pacer/framework/vanilla/examples/LiteRateLimiter.md
new file mode 100644
index 000000000..4623d0c24
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/LiteRateLimiter.md
@@ -0,0 +1,12 @@
+---
+title: "LiteRateLimiter"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/LiteRateLimiter)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/LiteRateLimiter)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/LiteThrottler.md b/mintlify/pacer/framework/vanilla/examples/LiteThrottler.md
new file mode 100644
index 000000000..12869f308
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/LiteThrottler.md
@@ -0,0 +1,12 @@
+---
+title: "LiteThrottler"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/LiteThrottler)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/LiteThrottler)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/liteBatch.md b/mintlify/pacer/framework/vanilla/examples/liteBatch.md
new file mode 100644
index 000000000..172827e74
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/liteBatch.md
@@ -0,0 +1,12 @@
+---
+title: "liteBatch"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/liteBatch)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/liteBatch)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/liteDebounce.md b/mintlify/pacer/framework/vanilla/examples/liteDebounce.md
new file mode 100644
index 000000000..8a2299603
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/liteDebounce.md
@@ -0,0 +1,12 @@
+---
+title: "liteDebounce"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/liteDebounce)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/liteDebounce)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/liteQueue.md b/mintlify/pacer/framework/vanilla/examples/liteQueue.md
new file mode 100644
index 000000000..3168b08c2
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/liteQueue.md
@@ -0,0 +1,12 @@
+---
+title: "liteQueue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/liteQueue)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/liteQueue)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/liteRateLimit.md b/mintlify/pacer/framework/vanilla/examples/liteRateLimit.md
new file mode 100644
index 000000000..db47a2183
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/liteRateLimit.md
@@ -0,0 +1,12 @@
+---
+title: "liteRateLimit"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/liteRateLimit)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/liteRateLimit)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/framework/vanilla/examples/liteThrottle.md b/mintlify/pacer/framework/vanilla/examples/liteThrottle.md
new file mode 100644
index 000000000..7fae6deea
--- /dev/null
+++ b/mintlify/pacer/framework/vanilla/examples/liteThrottle.md
@@ -0,0 +1,12 @@
+---
+title: "liteThrottle"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/pacer/latest/docs/framework/vanilla/examples/liteThrottle)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/pacer/tree/cac705b14f7b246ef95e0287dc7745684fb40867/examples/vanilla/liteThrottle)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/pacer/guides/async-batching.md b/mintlify/pacer/guides/async-batching.md
new file mode 100644
index 000000000..612d2de97
--- /dev/null
+++ b/mintlify/pacer/guides/async-batching.md
@@ -0,0 +1,513 @@
+---
+title: Async Batching Guide
+id: async-batching
+---
+
+All core concepts from the [Batching Guide](/pacer/guides/batching) apply to async batching as well.
+
+## When to Use Async Batching
+
+While the synchronous batcher works well for many use cases, async batching provides additional capabilities that are particularly useful when:
+
+- You need to capture and use the return value from batch executions
+- Your batch processing involves asynchronous operations (API calls, database operations, file I/O)
+- You require advanced error handling with configurable error behavior
+- You want to track success/error statistics separately
+- You need to monitor when batches are actively executing
+
+## Async Batching in TanStack Pacer
+
+TanStack Pacer provides async batching through the `AsyncBatcher` class and the `asyncBatch` function. Unlike the synchronous version, the async batcher handles Promises and provides robust error handling capabilities.
+
+### Basic Usage with `asyncBatch`
+
+The `asyncBatch` function provides a simple way to create an async batching function:
+
+```ts
+import { asyncBatch } from '@tanstack/pacer'
+
+const processAsyncBatch = asyncBatch<number>(
+  async (items) => {
+    // Process the batch asynchronously
+    const results = await Promise.all(
+      items.map(item => processApiCall(item))
+    )
+    return results
+  },
+  {
+    maxSize: 3,
+    wait: 2000,
+    onSuccess: (results, batch, batcher) => {
+      console.log('Batch completed successfully:', results)
+      console.log('Processed batch:', batch)
+      console.log('Total successes:', batcher.store.state.successCount)
+    },
+    onError: (error, batch, batcher) => {
+      console.error('Batch failed:', error)
+      console.log('Failed batch:', batch)
+      console.log('Total errors:', batcher.store.state.errorCount)
+    }
+  }
+)
+
+// Add items to be batched
+processAsyncBatch(1)
+processAsyncBatch(2)
+processAsyncBatch(3) // Triggers batch processing
+```
+
+> **Note:** When using React, prefer `useAsyncBatchedCallback` hook over the `asyncBatch` function for better integration with React's lifecycle and automatic cleanup.
+
+### Advanced Usage with `AsyncBatcher` Class
+
+For more control over async batch behavior, use the `AsyncBatcher` class directly:
+
+```ts
+import { AsyncBatcher } from '@tanstack/pacer'
+
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // Process the batch asynchronously
+    const results = await Promise.all(
+      items.map(item => processApiCall(item))
+    )
+    return results
+  },
+  {
+    maxSize: 5,
+    wait: 3000,
+    onSuccess: (results, batch, batcher) => {
+      console.log('Batch succeeded:', results)
+      console.log('Processed batch:', batch)
+    },
+    onError: (error, batch, batcher) => {
+      console.error('Batch failed:', error)
+      console.log('Failed batch:', batch)
+    }
+  }
+)
+
+// Access current state via TanStack Store
+console.log(batcher.store.state.successCount) // Number of successful batch executions
+console.log(batcher.store.state.errorCount) // Number of failed batch executions
+console.log(batcher.store.state.isExecuting) // Whether a batch is currently executing
+console.log(batcher.store.state.lastResult) // Result from most recent batch
+
+// Add items to the batch
+batcher.addItem(1)
+batcher.addItem(2)
+
+// Control batch execution
+batcher.stop()  // Stop processing
+batcher.start() // Resume processing
+```
+
+## Key Differences from Synchronous Batching
+
+### 1. Return Value Handling
+
+Unlike the synchronous batcher which returns void, the async version allows you to capture and use the return value from your batch function:
+
+```ts
+const batcher = new AsyncBatcher<string>(
+  async (items) => {
+    const results = await processBatch(items)
+    return results
+  },
+  {
+    maxSize: 5,
+    onSuccess: (results, batch, batcher) => {
+      // Handle the returned results
+      console.log('Batch results:', results)
+      console.log('Processed batch:', batch)
+    }
+  }
+)
+```
+
+### 2. Error Handling
+
+The async batcher provides comprehensive error handling capabilities:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // This might throw an error
+    const results = await riskyBatchOperation(items)
+    return results
+  },
+  {
+    maxSize: 3,
+    onError: (error, batch, batcher) => {
+      // Handle batch errors
+      console.error('Batch processing failed:', error)
+      console.log('Items that failed:', batch)
+      console.log('Total error count:', batcher.store.state.errorCount)
+    },
+    throwOnError: false, // Don't throw errors, just handle them
+    onSuccess: (results, batch, batcher) => {
+      console.log('Batch succeeded:', results)
+      console.log('Processed batch:', batch)
+      console.log('Total success count:', batcher.store.state.successCount)
+    },
+    onSettled: (batch, batcher) => {
+      // Called after every batch (success or failure)
+      console.log('Batch settled:', batch)
+      console.log('Total batches:', batcher.store.state.settleCount)
+    }
+  }
+)
+```
+
+### 3. Execution State Tracking
+
+The async batcher tracks when batches are actively executing:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    console.log('Starting batch execution...')
+    const results = await longRunningBatchOperation(items)
+    console.log('Batch execution completed')
+    return results
+  },
+  {
+    maxSize: 5,
+    onItemsChange: (batcher) => {
+      console.log('Is executing:', batcher.store.state.isExecuting)
+      console.log('Items in queue:', batcher.store.state.size)
+    }
+  }
+)
+```
+
+### 4. Different Callbacks
+
+The `AsyncBatcher` supports these async-specific callbacks:
+
+- `onSuccess`: Called after each successful batch execution, providing the result, the batch of items processed, and batcher instance
+- `onError`: Called when a batch execution fails, providing the error, the batch of items that failed, and batcher instance
+- `onSettled`: Called after each batch execution (success or failure), providing the batch of items processed and batcher instance
+- `onExecute`: Called after each batch execution, providing the batch of items processed and batcher instance (same as synchronous batcher)
+- `onItemsChange`: Called when items are added or the batch is processed
+
+## Advanced Features: Retry and Abort Support
+
+The async batcher includes built-in retry and abort capabilities through integration with `AsyncRetryer`. These features help handle transient failures and provide control over in-flight operations.
+
+### Retry Support
+
+Configure automatic retries for failed batch executions using the `asyncRetryerOptions`:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // This might fail due to network issues
+    const results = await apiCall(items)
+    return results
+  },
+  {
+    maxSize: 5,
+    asyncRetryerOptions: {
+      maxAttempts: 3,
+      backoff: 'exponential',
+      baseWait: 1000,
+      maxWait: 10000,
+      jitter: 0.3
+    }
+  }
+)
+```
+
+For complete documentation on retry strategies, backoff algorithms, jitter, and advanced retry patterns, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Abort Support
+
+Cancel in-flight batch executions using the abort functionality:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // Access the abort signal for this execution
+    const signal = batcher.getAbortSignal()
+    if (signal) {
+      const response = await fetch('/api/batch', {
+        method: 'POST',
+        body: JSON.stringify(items),
+        signal // Pass signal to fetch for cancellation support
+      })
+      return response.json()
+    }
+  },
+  { maxSize: 10 }
+)
+
+// Add items
+batcher.addItem(1)
+batcher.addItem(2)
+
+// Later, abort any in-flight batch executions
+batcher.abort()
+```
+
+The abort functionality:
+- Cancels all ongoing batch executions using AbortController
+- Does NOT cancel pending batches that haven't started yet (use `cancel()` for that)
+- Does NOT clear items from the batcher
+- Can be used alongside retry support
+
+Abort only cancels underlying operations (e.g. `fetch`) when you pass the signal from `getAbortSignal()` to them. If your batch function does not attach the signal, abort clears internal state but the async work continues until it completes.
+
+For more details on abort patterns and integration with fetch/axios, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Sharing Options Between Instances
+
+Use `asyncBatcherOptions` to share common options between different `AsyncBatcher` instances:
+
+```ts
+import { asyncBatcherOptions, AsyncBatcher } from '@tanstack/pacer'
+
+const sharedOptions = asyncBatcherOptions({
+  maxSize: 5,
+  wait: 2000,
+  onSuccess: (results, batch, batcher) => console.log('Success')
+})
+
+const batcher1 = new AsyncBatcher(fn1, { ...sharedOptions, key: 'batcher1' })
+const batcher2 = new AsyncBatcher(fn2, { ...sharedOptions, maxSize: 10 })
+```
+
+## Error Handling Options
+
+The async batcher provides flexible error handling through the `throwOnError` option:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // This might throw an error
+    throw new Error('Batch processing failed')
+  },
+  {
+    maxSize: 3,
+    onError: (error, batch, batcher) => {
+      console.error('Handling error:', error)
+    },
+    throwOnError: true, // Will throw errors even with onError handler
+    // throwOnError: false, // Will swallow errors (default if onError is provided)
+    // throwOnError: undefined, // Uses default behavior based on onError presence
+  }
+)
+```
+
+- **Default behavior**: `throwOnError` is `true` if no `onError` handler is provided, `false` if an `onError` handler is provided
+- **With `onError` handler**: The handler is called first, then the error is thrown if `throwOnError` is `true`
+- **Error state**: Failed items are tracked in `failedItems` array and can be accessed via `peekFailedItems()`. The `onError` callback receives the batch of items that failed, not the accumulated failed items.
+
+## Dynamic Options
+
+Like the synchronous batcher, the async batcher supports dynamic options:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    return await processBatch(items)
+  },
+  {
+    // Dynamic batch size based on success rate
+    maxSize: (batcher) => {
+      const successRate = batcher.store.state.successCount / Math.max(1, batcher.store.state.settleCount)
+      return successRate > 0.8 ? 10 : 5 // Larger batches if success rate is high
+    },
+    // Dynamic wait time based on error count
+    wait: (batcher) => {
+      return batcher.store.state.errorCount > 5 ? 5000 : 2000 // Wait longer if errors are frequent
+    }
+  }
+)
+```
+
+### Flushing Pending Batches
+
+The async batcher supports flushing pending batches to trigger processing immediately:
+
+```ts
+const batcher = new AsyncBatcher(asyncBatchFn, { maxSize: 10, wait: 5000 })
+
+batcher.addItem('item1')
+batcher.addItem('item2')
+console.log(batcher.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+const result = await batcher.flush()
+console.log('Flush result:', result)
+console.log(batcher.store.state.isEmpty) // true (batch was processed)
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel any pending batch and abort any in-flight execution by default when a component unmounts. The automatic abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them. Use the `onUnmount` option to flush instead of canceling.
+
+```tsx
+const batcher = useAsyncBatcher(fn, {
+  maxSize: 5,
+  wait: 2000,
+  onUnmount: (b) => b.flush(),
+})
+```
+
+> **Warning:** For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup. If your batch function updates React/Preact state or Solid signals, those updates may run after the component has unmounted, which can cause "setState on unmounted component" warnings or unexpected reactive updates. Guard your callbacks accordingly.
+
+## State Management
+
+The `AsyncBatcher` class uses TanStack Store for reactive state management, providing real-time access to batch execution state, error tracking, and processing statistics. All state is stored in a TanStack Store and can be accessed via `asyncBatcher.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `asyncBatcher.state` along with providing a selector callback as the 3rd argument to the `useAsyncBatcher` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `asyncBatcher.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const asyncBatcher = useAsyncBatcher(asyncBatchFn, { maxSize: 5, wait: 1000 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncBatcher.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state.isExecuting ? 'Executing...' : 'Idle'}</div>
+  )}
+</asyncBatcher.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `asyncBatcher.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const batcher = useAsyncBatcher(asyncBatchFn, { maxSize: 5, wait: 1000 })
+console.log(batcher.state) // {}
+
+// Opt-in to re-render when isExecuting changes
+const batcher = useAsyncBatcher(
+  asyncBatchFn, 
+  { maxSize: 5, wait: 1000 },
+  (state) => ({ isExecuting: state.isExecuting })
+)
+console.log(batcher.state.isExecuting) // Reactive value
+
+// Multiple state properties
+const batcher = useAsyncBatcher(
+  asyncBatchFn,
+  { maxSize: 5, wait: 1000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    successCount: state.successCount,
+    errorCount: state.errorCount
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating an async batcher. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('async-batcher-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const batcher = new AsyncBatcher(asyncBatchFn, {
+  maxSize: 5,
+  wait: 1000,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const batcher = new AsyncBatcher(asyncBatchFn, { maxSize: 5, wait: 1000 })
+
+// Subscribe to state changes
+const unsubscribe = batcher.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+```ts
+import { shallow, useSelector } from '@tanstack/react-store'
+
+const batcher = useAsyncBatcher(asyncBatchFn, { maxSize: 5, wait: 1000 })
+
+// you could manually use `useSelector` to subscribe to state changes in whatever scope you want
+const state = useSelector(
+  batcher.store,
+  (state) => ({
+    successCount: state.successCount,
+  }),
+  { compare: shallow },
+)
+
+console.log(state)
+```
+
+### Available State Properties
+
+The `AsyncBatcherState` includes:
+
+- `errorCount`: Number of batch executions that have resulted in errors
+- `failedItems`: Array of items that failed during batch processing
+- `isEmpty`: Whether the batcher has no items to process (items array is empty)
+- `isExecuting`: Whether a batch is currently being processed asynchronously
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `items`: Array of items currently queued for batch processing
+- `lastResult`: The result from the most recent batch execution
+- `settleCount`: Number of batch executions that have completed (either successfully or with errors)
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending' | 'executing' | 'populated')
+- `successCount`: Number of batch executions that have completed successfully
+- `totalItemsFailed`: Total number of items that have failed processing across all batches
+- `totalItemsProcessed`: Total number of items that have been processed across all batches
+
+### Monitoring Failed Items
+
+The async batcher tracks items that failed during batch processing:
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    // This might fail for some items
+    if (items.some(item => item < 0)) {
+      throw new Error('Negative numbers not allowed')
+    }
+    return await processBatch(items)
+  },
+  {
+    maxSize: 3,
+    onError: (error, batch, batcher) => {
+      console.log('Failed batch:', batch)
+      console.log('All failed items:', batcher.peekFailedItems())
+    }
+  }
+)
+```
+
+## Framework Adapters
+
+Each framework adapter provides hooks that build on top of the core async batching functionality to integrate with the framework's state management system. Hooks like `useAsyncBatcher` or similar are available for each framework.
+
+---
+
+For core batching concepts and synchronous batching, see the [Batching Guide](/pacer/guides/batching).
\ No newline at end of file
diff --git a/mintlify/pacer/guides/async-debouncing.md b/mintlify/pacer/guides/async-debouncing.md
new file mode 100644
index 000000000..d0a43fd9c
--- /dev/null
+++ b/mintlify/pacer/guides/async-debouncing.md
@@ -0,0 +1,327 @@
+---
+title: Async Debouncing Guide
+id: async-debouncing
+---
+
+All core concepts from the [Debouncing Guide](/pacer/guides/debouncing) apply to async debouncing as well. 
+
+## When to Use Async Debouncing
+
+You can usually just use the normal synchronous debouncer and it will work with async functions, but for advanced use cases, such as wanting to use the return value of a debounced function (instead of just calling a setState side effect), or putting your error handling logic in the debouncer, you can use the async debouncer.
+
+## Async Debouncing in TanStack Pacer
+
+TanStack Pacer provides async debouncing through the `AsyncDebouncer` class and the `asyncDebounce` function.
+
+### Basic Usage Example
+
+Here's a basic example showing how to use the async debouncer for a search operation:
+
+```ts
+const debouncedSearch = asyncDebounce(
+  async (searchTerm: string) => {
+    const results = await fetchSearchResults(searchTerm)
+    return results
+  },
+  {
+    wait: 500,
+    onSuccess: (results, args, debouncer) => {
+      console.log('Search succeeded:', results)
+      console.log('Search arguments:', args)
+    },
+      onError: (error, args, debouncer) => {
+    console.error('Search failed:', error)
+    console.log('Failed arguments:', args)
+  }
+  }
+)
+
+// Usage
+try {
+  const results = await debouncedSearch('query')
+  // Handle successful results
+} catch (error) {
+  // Handle errors if no onError handler was provided
+  console.error('Search failed:', error)
+}
+```
+
+> **Note:** When using React, prefer `useAsyncDebouncedCallback` hook over the `asyncDebounce` function for better integration with React's lifecycle and automatic cleanup.
+
+## Key Differences from Synchronous Debouncing
+
+### 1. Return Value Handling
+
+Unlike the synchronous debouncer which returns void, the async version allows you to capture and use the return value from your debounced function. The `maybeExecute` method returns a Promise that resolves with the function's return value, allowing you to await the result and handle it appropriately.
+
+### 2. Error Handling
+
+The async debouncer provides robust error handling capabilities:
+- If your debounced function throws an error and no `onError` handler is provided, the error will be thrown and propagate up to the caller
+- If you provide an `onError` handler, errors will be caught and passed to the handler instead of being thrown
+- The `throwOnError` option can be used to control error throwing behavior:
+  - When true (default if no onError handler), errors will be thrown
+  - When false (default if onError handler provided), errors will be swallowed
+  - Can be explicitly set to override these defaults
+- You can track error counts using `debouncer.store.state.errorCount` and check execution state with `debouncer.store.state.isExecuting`
+- The debouncer maintains its state and can continue to be used after an error occurs
+
+### 3. Different Callbacks
+
+The `AsyncDebouncer` supports the following callbacks:
+- `onSuccess`: Called after each successful execution, providing the result, the arguments that were executed, and debouncer instance
+- `onSettled`: Called after each execution (success or failure), providing the arguments that were executed and debouncer instance
+- `onError`: Called if the async function throws an error, providing the error, the arguments that caused the error, and the debouncer instance
+
+Example:
+
+```ts
+const asyncDebouncer = new AsyncDebouncer(async (value) => {
+  await saveToAPI(value)
+}, {
+  wait: 500,
+  onSuccess: (result, args, debouncer) => {
+    // Called after each successful execution
+    console.log('Async function executed', debouncer.store.state.successCount)
+    console.log('Executed arguments:', args)
+  },
+  onSettled: (args, debouncer) => {
+    // Called after each execution attempt
+    console.log('Async function settled', debouncer.store.state.settleCount)
+    console.log('Settled arguments:', args)
+  },
+  onError: (error) => {
+    // Called if the async function throws an error
+    console.error('Async function failed:', error)
+  }
+})
+```
+
+### 4. Sequential Execution
+
+Since the debouncer's `maybeExecute` method returns a Promise, you can choose to await each execution before starting the next one. This gives you control over the execution order and ensures each call processes the most up-to-date data. This is particularly useful when dealing with operations that depend on the results of previous calls or when maintaining data consistency is critical.
+
+For example, if you're updating a user's profile and then immediately fetching their updated data, you can await the update operation before starting the fetch.
+
+## Advanced Features: Retry and Abort Support
+
+The async debouncer includes built-in retry and abort capabilities through integration with `AsyncRetryer`. These features help handle transient failures and provide control over in-flight operations.
+
+### Retry Support
+
+Configure automatic retries for failed debounced function executions using the `asyncRetryerOptions`:
+
+```ts
+const debouncedSave = asyncDebounce(
+  async (data: string) => {
+    // This might fail due to network issues
+    await api.save(data)
+  },
+  {
+    wait: 500,
+    asyncRetryerOptions: {
+      maxAttempts: 3,
+      backoff: 'exponential',
+      baseWait: 1000,
+      maxWait: 10000,
+      jitter: 0.3
+    }
+  }
+)
+```
+
+For complete documentation on retry strategies, backoff algorithms, jitter, and advanced retry patterns, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Abort Support
+
+Cancel in-flight debounced executions using the abort functionality:
+
+```ts
+const debouncer = new AsyncDebouncer(
+  async (searchTerm: string) => {
+    // Access the abort signal for this execution
+    const signal = debouncer.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/search?q=${searchTerm}`, { signal })
+      return response.json()
+    }
+  },
+  { wait: 300 }
+)
+
+// Start a search
+debouncer.maybeExecute('query')
+
+// Later, abort any in-flight execution
+debouncer.abort()
+```
+
+The abort functionality:
+- Cancels all ongoing debounced executions using AbortController
+- Does NOT cancel pending executions that haven't started yet (use `cancel()` for that)
+- Can be used alongside retry support
+
+Abort only cancels underlying operations (e.g. `fetch`) when you pass the signal from `getAbortSignal()` to them. If your debounced function does not attach the signal, abort clears internal state but the async work continues until it completes.
+
+For more details on abort patterns and integration with fetch/axios, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Sharing Options Between Instances
+
+Use `asyncDebouncerOptions` to share common options between different `AsyncDebouncer` instances:
+
+```ts
+import { asyncDebouncerOptions, AsyncDebouncer } from '@tanstack/pacer'
+
+const sharedOptions = asyncDebouncerOptions({
+  wait: 500,
+  leading: false,
+  trailing: true,
+  onSuccess: (result, args, debouncer) => console.log('Success')
+})
+
+const debouncer1 = new AsyncDebouncer(fn1, { ...sharedOptions, key: 'debouncer1' })
+const debouncer2 = new AsyncDebouncer(fn2, { ...sharedOptions, onError: (error) => console.error('Error') })
+```
+
+## Dynamic Options and Enabling/Disabling
+
+Just like the synchronous debouncer, the async debouncer supports dynamic options for `wait` and `enabled`, which can be functions that receive the debouncer instance. This allows for sophisticated, runtime-adaptive debouncing behavior.
+
+### Flushing Pending Executions
+
+The async debouncer supports flushing pending executions to trigger them immediately:
+
+```ts
+const asyncDebouncer = new AsyncDebouncer(asyncFn, { wait: 1000 })
+
+asyncDebouncer.maybeExecute('some-arg')
+console.log(asyncDebouncer.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+asyncDebouncer.flush()
+console.log(asyncDebouncer.store.state.isPending) // false
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel any pending execution and abort any in-flight execution by default when a component unmounts. The automatic abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them. Use the `onUnmount` option to flush instead of canceling.
+
+```tsx
+const debouncer = useAsyncDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush(),
+})
+```
+
+> **Warning:** For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup. If your debounced function updates React/Preact state or Solid signals, those updates may run after the component has unmounted, which can cause "setState on unmounted component" warnings or unexpected reactive updates. Guard your callbacks accordingly.
+
+## State Management
+
+The `AsyncDebouncer` class uses TanStack Store for reactive state management, providing real-time access to execution state, error tracking, and execution statistics. All state is stored in a TanStack Store and can be accessed via `asyncDebouncer.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `asyncDebouncer.state` along with providing a selector callback as the 3rd argument to the `useAsyncDebouncer` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `asyncDebouncer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const asyncDebouncer = useAsyncDebouncer(asyncFn, { wait: 500 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncDebouncer.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state.isExecuting ? 'Executing...' : 'Idle'}</div>
+  )}
+</asyncDebouncer.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `asyncDebouncer.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const asyncDebouncer = useAsyncDebouncer(asyncFn, { wait: 500 })
+console.log(asyncDebouncer.state) // {}
+
+// Opt-in to re-render when isExecuting changes
+const asyncDebouncer = useAsyncDebouncer(
+  asyncFn, 
+  { wait: 500 },
+  (state) => ({ isExecuting: state.isExecuting })
+)
+console.log(asyncDebouncer.state.isExecuting) // Reactive value
+
+// Multiple state properties
+const asyncDebouncer = useAsyncDebouncer(
+  asyncFn,
+  { wait: 500 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    successCount: state.successCount,
+    errorCount: state.errorCount
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating an async debouncer. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('async-debouncer-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const asyncDebouncer = new AsyncDebouncer(asyncFn, {
+  wait: 500,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const asyncDebouncer = new AsyncDebouncer(asyncFn, { wait: 500 })
+
+// Subscribe to state changes
+const unsubscribe = asyncDebouncer.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `AsyncDebouncerState` includes:
+
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge of the timeout
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the debounced function is currently executing asynchronously
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to `maybeExecute`
+- `lastResult`: The result from the most recent successful function execution
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `settleCount`: Number of function executions that have completed (either successfully or with errors)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Framework Adapters
+
+Each framework adapter provides hooks that build on top of the core async debouncing functionality to integrate with the framework's state management system. Hooks like `createAsyncDebouncer`, `useAsyncDebouncedCallback`, or similar are available for each framework.
+
+---
+
+For core debouncing concepts and synchronous debouncing, see the [Debouncing Guide](/pacer/guides/debouncing).
diff --git a/mintlify/pacer/guides/async-queuing.md b/mintlify/pacer/guides/async-queuing.md
new file mode 100644
index 000000000..9a352098e
--- /dev/null
+++ b/mintlify/pacer/guides/async-queuing.md
@@ -0,0 +1,467 @@
+---
+title: Asynchronous Queuing Guide
+id: async-queuing
+---
+
+> **Note:** All core queuing concepts from the [Queuing Guide](/pacer/guides/queuing) also apply to AsyncQueuer. AsyncQueuer extends these concepts with advanced features like concurrency (multiple tasks at once) and robust error handling. If you are new to queuing, start with the [Queuing Guide](/pacer/guides/queuing) to learn about FIFO/LIFO, priority, expiration, rejection, and queue management. This guide focuses on what makes AsyncQueuer unique and powerful for asynchronous and concurrent task processing.
+
+While the [Queuer](/pacer/guides/queuing) provides synchronous queuing with timing controls, the `AsyncQueuer` is designed specifically for handling concurrent asynchronous operations. It implements what is traditionally known as a "task pool" or "worker pool" pattern, allowing multiple operations to be processed simultaneously while maintaining control over concurrency and timing. The implementation is mostly copied from [Swimmer](https://github.com/tannerlinsley/swimmer), Tanner's original task pooling utility that has been serving the JavaScript community since 2017.
+
+## Async Queuing Concept
+
+Async queuing extends the basic queuing concept by adding concurrent processing capabilities. Instead of processing one item at a time, an async queuer can process multiple items simultaneously while still maintaining order and control over the execution. This is particularly useful when dealing with I/O operations, network requests, or any tasks that spend most of their time waiting rather than consuming CPU.
+
+### Async Queuing Visualization
+
+```text
+Async Queuing (concurrency: 2, wait: 2 ticks)
+Timeline: [1 second per tick]
+Calls:        ⬇️  ⬇️  ⬇️  ⬇️     ⬇️  ⬇️     ⬇️
+Queue:       [ABC]   [C]    [CDE]    [E]    []
+Active:      [A,B]   [B,C]  [C,D]    [D,E]  [E]
+Completed:    -       A      B        C      D,E
+             [=================================================================]
+             ^ Unlike regular queuing, multiple items
+               can be processed concurrently
+
+             [Items queue up]   [Process 2 at once]   [Complete]
+              when busy         with wait between      all items
+```
+
+### When to Use Async Queuing
+
+Async queuing is particularly effective when you need to:
+- Process multiple asynchronous operations concurrently
+- Control the number of simultaneous operations
+- Handle Promise-based tasks with proper error handling
+- Maintain order while maximizing throughput
+- Process background tasks that can run in parallel
+
+### When Not to Use Async Queuing
+
+The AsyncQueuer is very versatile and can be used in many situations. If you don't need concurrent processing, use [Queuing](/pacer/guides/queuing) instead. If you don't need all executions that are queued to go through, use [Throttling](/pacer/guides/throttling) instead.
+
+If you want to group operations together, use [Batching](/pacer/guides/batching) instead.
+
+## Async Queuing in TanStack Pacer
+
+TanStack Pacer provides async queuing through the simple `asyncQueue` function and the more powerful `AsyncQueuer` class. All queue types and ordering strategies (FIFO, LIFO, priority, etc.) are supported just like in the core queuing guide.
+
+### Basic Usage with `asyncQueue`
+
+The `asyncQueue` function provides a simple way to create an always-running async queue:
+
+```ts
+import { asyncQueue } from '@tanstack/pacer'
+
+// Create a queue that processes up to 2 items concurrently
+const processItems = asyncQueue(
+  async (item: number) => {
+    // Process each item asynchronously
+    const result = await fetchData(item)
+    return result
+  },
+  {
+    concurrency: 2,
+    onItemsChange: (queuer) => {
+      console.log('Active tasks:', queuer.peekActiveItems().length)
+    }
+  }
+)
+
+// Add items to be processed
+processItems(1)
+processItems(2)
+```
+
+For more control over the queue, use the `AsyncQueuer` class directly.
+
+### Advanced Usage with `AsyncQueuer` Class
+
+The `AsyncQueuer` class provides complete control over async queue behavior, including all the core queuing features plus:
+- **Concurrency:** Process multiple items at once (configurable with `concurrency`)
+- **Async error handling:** Per-task and global error callbacks, with control over error propagation
+- **Active and pending task tracking:** Monitor which tasks are running and which are queued
+- **Async-specific callbacks:** `onSuccess`, `onError`, `onSettled`, etc.
+
+```ts
+import { AsyncQueuer } from '@tanstack/pacer'
+
+const queue = new AsyncQueuer(
+  async (item: number) => {
+    // Process each item asynchronously
+    const result = await fetchData(item)
+    return result
+  },
+  {
+    concurrency: 2, // Process 2 items at once
+    wait: 1000,     // Wait 1 second between starting new items
+    started: true,  // Start processing immediately
+    key: 'data-processor' // Identify this queuer in devtools
+  }
+)
+
+// Add error and success handlers via options
+queue.setOptions({
+  onError: (error, item, queuer) => {
+    console.error('Task failed:', error)
+    console.log('Failed item:', item)
+    // You can access queue state here
+    console.log('Error count:', queuer.store.state.errorCount)
+  },
+  onSuccess: (result, item, queuer) => {
+    console.log('Task completed:', result)
+    console.log('Completed item:', item)
+    // You can access queue state here
+    console.log('Success count:', queuer.store.state.successCount)
+  },
+  onSettled: (item, queuer) => {
+    // Called after each execution (success or failure)
+    console.log('Task settled:', item)
+    console.log('Total settled:', queuer.store.state.settledCount)
+  }
+})
+
+// Add items to be processed
+queue.addItem(1)
+queue.addItem(2)
+```
+
+### Async-Specific Features
+
+All queue types and ordering strategies (FIFO, LIFO, priority, etc.) are supported—see the [Queuing Guide](/pacer/guides/queuing) for details. AsyncQueuer adds:
+- **Concurrency:** Multiple items can be processed at once, controlled by the `concurrency` option (can be dynamic).
+- **Async error handling:** Use `onError`, `onSuccess`, and `onSettled` for robust error and result tracking.
+- **Active and pending task tracking:** Use `peekActiveItems()` and `peekPendingItems()` to monitor queue state.
+- **Async expiration and rejection:** Items can expire or be rejected just like in the core queuing guide, but with async-specific callbacks.
+
+### Example: Priority Async Queue
+
+```ts
+const priorityQueue = new AsyncQueuer(
+  async (item: { value: string; priority: number }) => {
+    // Process each item asynchronously
+    return await processTask(item.value)
+  },
+  {
+    concurrency: 2,
+    getPriority: (item) => item.priority // Higher numbers have priority
+  }
+)
+
+priorityQueue.addItem({ value: 'low', priority: 1 })
+priorityQueue.addItem({ value: 'high', priority: 3 })
+priorityQueue.addItem({ value: 'medium', priority: 2 })
+// Processes: high and medium concurrently, then low
+```
+
+### Example: Error Handling
+
+```ts
+const queue = new AsyncQueuer(
+  async (item: number) => {
+    // Process each item asynchronously
+    if (item < 0) throw new Error('Negative item')
+    return await processTask(item)
+  },
+  {
+    onError: (error, item, queuer) => {
+      console.error('Task failed:', error)
+      console.log('Failed item:', item)
+      // You can access queue state here
+      console.log('Error count:', queuer.store.state.errorCount)
+    },
+    throwOnError: true, // Will throw errors even with onError handler
+    onSuccess: (result, item, queuer) => {
+      console.log('Task succeeded:', result)
+      console.log('Succeeded item:', item)
+      // You can access queue state here
+      console.log('Success count:', queuer.store.state.successCount)
+    },
+    onSettled: (item, queuer) => {
+      // Called after each execution (success or failure)
+      console.log('Task settled:', item)
+      console.log('Total settled:', queuer.store.state.settledCount)
+    }
+  }
+)
+
+queue.addItem(-1) // Will trigger error handling
+queue.addItem(2)
+```
+
+### Example: Dynamic Concurrency
+
+```ts
+const queue = new AsyncQueuer(
+  async (item: number) => {
+    // Process each item asynchronously
+    return await processTask(item)
+  },
+  {
+    // Dynamic concurrency based on system load
+    concurrency: (queuer) => {
+      return Math.max(1, 4 - queuer.store.state.activeItems.length)
+    },
+    // Dynamic wait time based on queue size
+    wait: (queuer) => {
+      return queuer.store.state.size > 10 ? 2000 : 1000
+    }
+  }
+)
+```
+
+### Queue Management and Monitoring
+
+AsyncQueuer provides all the queue management and monitoring methods from the core queuing guide, plus async-specific ones:
+- `peekActiveItems()` — Items currently being processed
+- `peekPendingItems()` — Items waiting to be processed
+- `queuer.store.state.successCount`, `queuer.store.state.errorCount`, `queuer.store.state.settledCount` — Execution statistics
+- `queuer.store.state.activeItems` — Array of items currently being processed
+- `queuer.store.state.size` — Current queue size
+- `start()`, `stop()`, `clear()`, `reset()`, `flush()`, etc.
+
+See the [Queuing Guide](/pacer/guides/queuing) for more on queue management concepts.
+
+### Task Expiration and Rejection
+
+AsyncQueuer supports expiration and rejection just like the core queuer:
+- Use `expirationDuration`, `getIsExpired`, and `onExpire` for expiring tasks
+- Use `maxSize` and `onReject` for handling queue overflow
+
+See the [Queuing Guide](/pacer/guides/queuing) for details and examples.
+
+### Flushing Queue Items
+
+The async queuer supports flushing items to process them immediately:
+
+```ts
+const queue = new AsyncQueuer(processFn, { concurrency: 2, wait: 5000 })
+
+queue.addItem('item1')
+queue.addItem('item2')
+queue.addItem('item3')
+console.log(queue.store.state.size) // 3
+
+// Flush all items immediately instead of waiting
+queue.flush()
+console.log(queue.store.state.activeItems.length) // 2 (processing concurrently)
+console.log(queue.store.state.size) // 1 (one remaining)
+
+// Or flush a specific number of items
+queue.flush(1) // Process 1 more item
+console.log(queue.store.state.activeItems.length) // 3 (all processing concurrently)
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks stop the queuer and abort any in-flight task executions by default when a component unmounts. The automatic abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them. Use the `onUnmount` option to flush instead.
+
+```tsx
+const queuer = useAsyncQueuer(fn, {
+  concurrency: 2,
+  onUnmount: (q) => q.flush(),
+})
+```
+
+> **Warning:** For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup. If your task function updates React/Preact state or Solid signals, those updates may run after the component has unmounted, which can cause "setState on unmounted component" warnings or unexpected reactive updates. Guard your callbacks accordingly.
+
+## Advanced Features: Retry and Abort Support
+
+The async queuer includes built-in retry and abort capabilities through integration with `AsyncRetryer`. These features help handle transient failures and provide control over in-flight task executions.
+
+### Retry Support
+
+Configure automatic retries for failed task executions using the `asyncRetryerOptions`. Each queued item's execution will be retried according to these settings:
+
+```ts
+const queuer = new AsyncQueuer<string>(
+  async (item) => {
+    // This might fail due to network issues
+    await api.processItem(item)
+  },
+  {
+    concurrency: 2,
+    asyncRetryerOptions: {
+      maxAttempts: 3,
+      backoff: 'exponential',
+      baseWait: 1000,
+      maxWait: 10000,
+      jitter: 0.3
+    }
+  }
+)
+```
+
+For complete documentation on retry strategies, backoff algorithms, jitter, and advanced retry patterns, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Abort Support
+
+Cancel in-flight task executions using the abort functionality:
+
+```ts
+const queuer = new AsyncQueuer<string>(
+  async (item) => {
+    // Access the abort signal for this execution
+    const signal = queuer.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/process/${item}`, { signal })
+      return response.json()
+    }
+  },
+  { concurrency: 2 }
+)
+
+// Add items to the queue
+queuer.addItem('task1')
+queuer.addItem('task2')
+queuer.addItem('task3')
+
+// Later, abort any in-flight task executions
+queuer.abort()
+```
+
+The abort functionality:
+- Cancels all ongoing task executions using AbortController
+- Does NOT clear items from the queue (pending tasks remain queued)
+- Works with concurrent executions - aborts all active tasks
+- Can be used alongside retry support
+
+Abort only cancels underlying operations (e.g. `fetch`) when you pass the signal from `getAbortSignal()` to them. If your task function does not attach the signal, abort clears internal state but the async work continues until it completes.
+
+For more details on abort patterns and integration with fetch/axios, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Sharing Options Between Instances
+
+Use `asyncQueuerOptions` to share common options between different `AsyncQueuer` instances:
+
+```ts
+import { asyncQueuerOptions, AsyncQueuer } from '@tanstack/pacer'
+
+const sharedOptions = asyncQueuerOptions({
+  concurrency: 2,
+  wait: 1000,
+  onSuccess: (result, item, queuer) => console.log('Success')
+})
+
+const queuer1 = new AsyncQueuer(fn1, { ...sharedOptions, key: 'queuer1' })
+const queuer2 = new AsyncQueuer(fn2, { ...sharedOptions, concurrency: 4 })
+```
+
+## State Management
+
+The `AsyncQueuer` class uses TanStack Store for reactive state management, providing real-time access to queue state, processing statistics, and concurrent task tracking. All state is stored in a TanStack Store and can be accessed via `asyncQueuer.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `asyncQueuer.state` along with providing a selector callback as the 3rd argument to the `useAsyncQueuer` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `asyncQueuer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const asyncQueuer = useAsyncQueuer(processFn, { concurrency: 2, wait: 1000 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncQueuer.Subscribe selector={(state) => ({ activeItems: state.activeItems })}>
+  {(state) => (
+    <div>Active items: {state.activeItems.length}</div>
+  )}
+</asyncQueuer.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `asyncQueuer.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const queue = useAsyncQueuer(processFn, { concurrency: 2, wait: 1000 })
+console.log(queue.state) // {}
+
+// Opt-in to re-render when activeItems changes
+const queue = useAsyncQueuer(
+  processFn, 
+  { concurrency: 2, wait: 1000 },
+  (state) => ({ activeItems: state.activeItems })
+)
+console.log(queue.state.activeItems.length) // Reactive value
+
+// Multiple state properties
+const queue = useAsyncQueuer(
+  processFn,
+  { concurrency: 2, wait: 1000 },
+  (state) => ({
+    activeItems: state.activeItems,
+    successCount: state.successCount,
+    errorCount: state.errorCount
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating an async queuer:
+
+```ts
+const savedState = localStorage.getItem('async-queuer-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const queue = new AsyncQueuer(processFn, {
+  concurrency: 2,
+  wait: 1000,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const queue = new AsyncQueuer(processFn, { concurrency: 2, wait: 1000 })
+
+// Subscribe to state changes
+const unsubscribe = queue.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `AsyncQueuerState` includes all properties from the core queuing guide plus:
+
+- `activeItems`: Array of items currently being processed
+- `addItemCount`: Number of times addItem has been called (for reduction calculations)
+- `errorCount`: Number of function executions that have resulted in errors
+- `expirationCount`: Number of items that have been removed from the queue due to expiration
+- `isEmpty`: Whether the queuer has no items to process (items array is empty)
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added to the queue for expiration tracking
+- `lastResult`: The result from the most recent successful function execution
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added to the queue
+- `settledCount`: Number of function executions that have completed (either successfully or with errors)
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+- `successCount`: Number of function executions that have completed successfully
+
+### Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the async queuer classes. Hooks like `useAsyncQueuer` or `useAsyncQueuedState` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+---
+
+For core queuing concepts and synchronous queuing, see the [Queuing Guide](/pacer/guides/queuing).
\ No newline at end of file
diff --git a/mintlify/pacer/guides/async-rate-limiting.md b/mintlify/pacer/guides/async-rate-limiting.md
new file mode 100644
index 000000000..ccd155974
--- /dev/null
+++ b/mintlify/pacer/guides/async-rate-limiting.md
@@ -0,0 +1,322 @@
+---
+title: Async Rate Limiting Guide
+id: async-rate-limiting
+---
+
+All core concepts from the [Rate Limiting Guide](/pacer/guides/rate-limiting) apply to async rate limiting as well.
+
+## When to Use Async Rate Limiting
+
+You can usually just use the normal synchronous rate limiter and it will work with async functions, but for advanced use cases, such as wanting to use the return value of a rate-limited function (instead of just calling a setState side effect), or putting your error handling logic in the rate limiter, you can use the async rate limiter.
+
+## Async Rate Limiting in TanStack Pacer
+
+TanStack Pacer provides async rate limiting through the `AsyncRateLimiter` class and the `asyncRateLimit` function.
+
+### Basic Usage Example
+
+Here's a basic example showing how to use the async rate limiter for an API operation:
+
+```ts
+const rateLimitedApi = asyncRateLimit(
+  async (id: string) => {
+    const response = await fetch(`/api/data/${id}`)
+    return response.json()
+  },
+  {
+    limit: 5,
+    window: 1000,
+    onExecute: (limiter) => {
+      console.log('API call succeeded:', limiter.store.state.successCount)
+    },
+    onReject: (limiter) => {
+      console.log(`Rate limit exceeded. Try again in ${limiter.getMsUntilNextWindow()}ms`)
+    },
+    onError: (error, limiter) => {
+      console.error('API call failed:', error)
+    }
+  }
+)
+
+// Usage
+try {
+  const result = await rateLimitedApi('123')
+  // Handle successful result
+} catch (error) {
+  // Handle errors if no onError handler was provided
+  console.error('API call failed:', error)
+}
+```
+
+> **Note:** When using React, prefer `useAsyncRateLimitedCallback` hook over the `asyncRateLimit` function for better integration with React's lifecycle and automatic cleanup.
+
+## Key Differences from Synchronous Rate Limiting
+
+### 1. Return Value Handling
+
+Unlike the synchronous rate limiter which returns a boolean indicating success, the async version allows you to capture and use the return value from your rate-limited function. The `maybeExecute` method returns a Promise that resolves with the function's return value, allowing you to await the result and handle it appropriately.
+
+### 2. Error Handling
+
+The async rate limiter provides robust error handling capabilities:
+- If your rate-limited function throws an error and no `onError` handler is provided, the error will be thrown and propagate up to the caller
+- If you provide an `onError` handler, errors will be caught and passed to the handler instead of being thrown
+- The `throwOnError` option can be used to control error throwing behavior:
+  - When true (default if no onError handler), errors will be thrown
+  - When false (default if onError handler provided), errors will be swallowed
+  - Can be explicitly set to override these defaults
+- You can track error counts using `limiter.store.state.errorCount` and check execution state with `limiter.store.state.isExecuting`
+- The rate limiter maintains its state and can continue to be used after an error occurs
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+### 3. Different Callbacks
+
+The `AsyncRateLimiter` supports the following callbacks:
+- `onSuccess`: Called after each successful execution, providing the result, the arguments that were executed, and rate limiter instance
+- `onSettled`: Called after each execution (success or failure), providing the arguments that were executed and rate limiter instance
+- `onError`: Called if the async function throws an error, providing the error, the arguments that caused the error, and the rate limiter instance
+
+Both the Async and Synchronous rate limiters support the `onReject` callback for handling blocked executions.
+
+Example:
+
+```ts
+const asyncLimiter = new AsyncRateLimiter(async (id) => {
+  await saveToAPI(id)
+}, {
+  limit: 5,
+  window: 1000,
+  onExecute: (rateLimiter) => {
+    // Called after each successful execution
+    console.log('Async function executed', rateLimiter.store.state.successCount)
+  },
+  onReject: (rateLimiter) => {
+    // Called when an execution is rejected
+    console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`)
+  },
+  onError: (error) => {
+    // Called if the async function throws an error
+    console.error('Async function failed:', error)
+  }
+})
+```
+
+### 4. Sequential Execution
+
+Since the rate limiter's `maybeExecute` method returns a Promise, you can choose to await each execution before starting the next one. This gives you control over the execution order and ensures each call processes the most up-to-date data. This is particularly useful when dealing with operations that depend on the results of previous calls or when maintaining data consistency is critical.
+
+For example, if you're updating a user's profile and then immediately fetching their updated data, you can await the update operation before starting the fetch.
+
+## Advanced Features: Retry and Abort Support
+
+The async rate limiter includes built-in retry and abort capabilities through integration with `AsyncRetryer`. These features help handle transient failures and provide control over in-flight operations.
+
+### Retry Support
+
+Configure automatic retries for failed rate-limited function executions using the `asyncRetryerOptions`:
+
+```ts
+const rateLimitedApi = asyncRateLimit(
+  async (userId: string) => {
+    // This might fail due to network issues
+    const data = await api.fetchUser(userId)
+    return data
+  },
+  {
+    limit: 5,
+    window: 1000,
+    asyncRetryerOptions: {
+      maxAttempts: 3,
+      backoff: 'exponential',
+      baseWait: 1000,
+      maxWait: 10000,
+      jitter: 0.3
+    }
+  }
+)
+```
+
+For complete documentation on retry strategies, backoff algorithms, jitter, and advanced retry patterns, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Abort Support
+
+Cancel in-flight rate-limited executions using the abort functionality:
+
+```ts
+const rateLimiter = new AsyncRateLimiter(
+  async (userId: string) => {
+    // Access the abort signal for this execution
+    const signal = rateLimiter.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/users/${userId}`, { signal })
+      return response.json()
+    }
+  },
+  { limit: 5, window: 1000 }
+)
+
+// Start some operations
+rateLimiter.maybeExecute('user1')
+rateLimiter.maybeExecute('user2')
+
+// Later, abort any in-flight executions
+rateLimiter.abort()
+```
+
+The abort functionality:
+- Cancels all ongoing rate-limited executions using AbortController
+- Does NOT clear execution times or reset the rate limiter
+- Can be used alongside retry support
+
+Abort only cancels underlying operations (e.g. `fetch`) when you pass the signal from `getAbortSignal()` to them. If your rate-limited function does not attach the signal, abort clears internal state but the async work continues until it completes.
+
+For more details on abort patterns and integration with fetch/axios, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Sharing Options Between Instances
+
+Use `asyncRateLimiterOptions` to share common options between different `AsyncRateLimiter` instances:
+
+```ts
+import { asyncRateLimiterOptions, AsyncRateLimiter } from '@tanstack/pacer'
+
+const sharedOptions = asyncRateLimiterOptions({
+  limit: 5,
+  window: 1000,
+  onSuccess: (result, args, limiter) => console.log('Success')
+})
+
+const limiter1 = new AsyncRateLimiter(fn1, { ...sharedOptions, key: 'limiter1' })
+const limiter2 = new AsyncRateLimiter(fn2, { ...sharedOptions, onError: (error) => console.error('Error') })
+```
+
+## Dynamic Options and Enabling/Disabling
+
+Just like the synchronous rate limiter, the async rate limiter supports dynamic options for `limit`, `window`, and `enabled`, which can be functions that receive the rate limiter instance. This allows for sophisticated, runtime-adaptive rate limiting behavior.
+
+### Customizing Unmount Behavior
+
+Framework hooks abort any in-flight execution by default when a component unmounts. The automatic abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them. Use the `onUnmount` option to customize this behavior.
+
+## State Management
+
+The `AsyncRateLimiter` class uses TanStack Store for reactive state management, providing real-time access to execution state, error tracking, and rejection statistics. All state is stored in a TanStack Store and can be accessed via `asyncLimiter.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `asyncLimiter.state` along with providing a selector callback as the 3rd argument to the `useAsyncRateLimiter` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `asyncRateLimiter.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const asyncRateLimiter = useAsyncRateLimiter(asyncFn, { limit: 5, window: 1000 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncRateLimiter.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state.isExecuting ? 'Executing...' : 'Idle'}</div>
+  )}
+</asyncRateLimiter.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `asyncRateLimiter.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const asyncLimiter = useAsyncRateLimiter(asyncFn, { limit: 5, window: 1000 })
+console.log(asyncLimiter.state) // {}
+
+// Opt-in to re-render when isExecuting changes
+const asyncLimiter = useAsyncRateLimiter(
+  asyncFn, 
+  { limit: 5, window: 1000 },
+  (state) => ({ isExecuting: state.isExecuting })
+)
+console.log(asyncLimiter.state.isExecuting) // Reactive value
+
+// Multiple state properties
+const asyncLimiter = useAsyncRateLimiter(
+  asyncFn,
+  { limit: 5, window: 1000 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    successCount: state.successCount,
+    errorCount: state.errorCount
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating an async rate limiter:
+
+```ts
+const savedState = localStorage.getItem('async-rate-limiter-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const asyncLimiter = new AsyncRateLimiter(asyncFn, {
+  limit: 5,
+  window: 1000,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const asyncLimiter = new AsyncRateLimiter(asyncFn, { limit: 5, window: 1000 })
+
+// Subscribe to state changes
+const unsubscribe = asyncLimiter.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `AsyncRateLimiterState` includes:
+
+- `errorCount`: Number of function executions that have resulted in errors
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `isExecuting`: Whether the rate-limited function is currently executing asynchronously
+- `lastResult`: The result from the most recent successful function execution
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+- `settledCount`: Number of function executions that have completed (either successfully or with errors)
+- `status`: Current execution status ('disabled' | 'exceeded' | 'idle')
+- `successCount`: Number of function executions that have completed successfully
+
+### Helper Methods
+
+The async rate limiter provides helper methods that compute values based on the current state:
+
+```ts
+const asyncLimiter = new AsyncRateLimiter(asyncFn, { limit: 5, window: 1000 })
+
+// These methods use the current state to compute values
+console.log(asyncLimiter.getRemainingInWindow()) // Number of calls remaining in current window
+console.log(asyncLimiter.getMsUntilNextWindow()) // Milliseconds until next window
+```
+
+These methods are computed values that use the current state and don't need to be accessed through the store.
+
+## Framework Adapters
+
+Each framework adapter provides hooks that build on top of the core async rate limiting functionality to integrate with the framework's state management system. Hooks like `createAsyncRateLimiter`, `useAsyncRateLimitedCallback`, or similar are available for each framework.
+
+---
+
+For core rate limiting concepts and synchronous rate limiting, see the [Rate Limiting Guide](/pacer/guides/rate-limiting). 
\ No newline at end of file
diff --git a/mintlify/pacer/guides/async-retrying.md b/mintlify/pacer/guides/async-retrying.md
new file mode 100644
index 000000000..123bd8a83
--- /dev/null
+++ b/mintlify/pacer/guides/async-retrying.md
@@ -0,0 +1,668 @@
+---
+title: Async Retrying Guide
+id: async-retrying
+---
+
+TanStack Pacer provides a simple `asyncRetry` utility function that wraps any async function with retry logic. This is the recommended approach for most use cases, as it creates a new retry-enabled function that can be called multiple times safely. For advanced scenarios requiring state management and reactive updates, TanStack Pacer also provides the `AsyncRetryer` class, though this requires careful usage patterns.
+
+> [!NOTE] The AsyncRetryer API is in alpha and may change before the 1.0.0 release. The ergonomics of the API are currently suited for internal use of TanStack Pacer's other async utilities, but we have a goal of making it more ergonomic for external use as well.
+
+Adding retry wrappers to your async functions is a great way to add a layer of robustness to your code. However, there are some important considerations to keep in mind. TanStack Pacer includes safe default options such as exponential backoff and low amount of max attempts by default to prevent overwhelming a service.
+
+> [!NOTE] If you are already using TanStack Query, you should use the built-in retry support instead of using the AsyncRetryer from TanStack Pacer.
+
+## Danger with Misconfigured Retries
+
+Before implementing retries, understanding the underlying concepts helps you make better decisions about retry strategies and configurations.
+
+### The Thundering Herd Problem
+
+The thundering herd problem occurs when many clients simultaneously retry failed requests to a recovering service, overwhelming it and preventing recovery. This usually happens when a service has a brief outage affecting many clients at once, causing all clients to fail and begin retrying. Without any randomization, these clients attempt retries at exactly the same intervals. The resulting synchronized retry attempts put heavy load on the recovering service, which reinforces the outage and leads to more simultaneous retry cycles.
+
+**How TanStack Pacer Addresses This:**
+
+Jitter adds randomness to retry delays, spreading out retry attempts across time rather than having them occur simultaneously. When you configure jitter, each client's retry timing becomes slightly different:
+
+```ts
+// Without jitter: all clients retry at exactly 1s, 2s, 4s, 8s
+// This can overwhelm a recovering service
+
+// With jitter: clients retry at randomized intervals
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000,
+  jitter: 0.3 // 30% random variation
+})
+// Client A might retry at: 850ms, 1.7s, 3.6s, 7.2s
+// Client B might retry at: 1.15s, 2.3s, 4.4s, 8.8s
+// Client C might retry at: 950ms, 1.9s, 3.8s, 7.6s
+```
+
+This distribution prevents synchronized retry waves and gives the service breathing room to recover.
+
+### Exponential Backoff and Resource Conservation
+
+Exponential backoff doubles the wait time between retries. This pattern serves multiple purposes:
+
+**Fast Recovery for Transient Issues:**
+The first retry happens quickly (after `baseWait`), catching brief network hiccups or momentary service interruptions.
+
+**Reduced Load on Failing Services:**
+As retries continue, the increasing delays reduce the request rate to a struggling service, giving it time to recover rather than keeping it under constant pressure.
+
+**Resource Efficiency:**
+Long delays between later retries prevent your application from consuming resources (memory, connections, threads) waiting for a service that might be down for an extended period.
+
+```ts
+// With exponential backoff and 1s base wait:
+// Attempt 1: immediate
+// Attempt 2: 1s later (service might recover quickly)
+// Attempt 3: 2s later (giving service more time)
+// Attempt 4: 4s later (backing off further)
+// Attempt 5: 8s later (minimal load if service is down)
+```
+
+## Async Retrying in TanStack Pacer
+
+TanStack Pacer provides two ways to add retry functionality to async functions: the `asyncRetry` convenience function and the `AsyncRetryer` class.
+
+### Using `asyncRetry` Function
+
+The `asyncRetry` function is a convenience wrapper that creates an `AsyncRetryer` instance and returns its execute method:
+
+```ts
+import { asyncRetry } from '@tanstack/pacer'
+
+// Define your async function normally
+async function fetchData(url: string) {
+  const response = await fetch(url)
+  if (!response.ok) throw new Error('Request failed')
+  return response.json()
+}
+
+// Create a retry-enabled version
+const fetchWithRetry = asyncRetry(fetchData, {
+  maxAttempts: 3,
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: 5000 // Cap wait time at 5 seconds
+})
+
+// Call it
+try {
+  const data = await fetchWithRetry('/api/data')
+  console.log('Success:', data)
+} catch (error) {
+  console.error('All retries failed:', error)
+}
+```
+
+### Using `AsyncRetryer` Class
+
+> **⚠️ Important:** The `AsyncRetryer` class is designed for single-use execution. If you call `execute()` multiple times on the same instance, previous executions will be aborted. For multiple calls, create a new instance each time.
+
+The `AsyncRetryer` class provides complete control over retry behavior, state management, and manual abort control:
+
+```ts
+import { AsyncRetryer } from '@tanstack/pacer'
+
+const retryer = new AsyncRetryer(
+  async (url: string) => {
+    const response = await fetch(url)
+    if (!response.ok) throw new Error('Request failed')
+    return response.json()
+  },
+  {
+    maxAttempts: 5,
+    backoff: 'exponential',
+    baseWait: 1000,
+    maxWait: 5000, // Cap wait time at 5 seconds
+    jitter: 0.1, // Add 10% random variation
+    maxExecutionTime: 5000, // Abort individual calls after 5 seconds
+    maxTotalExecutionTime: 30000, // Abort entire operation after 30 seconds
+    key: 'api-fetcher', // Identify this retryer in devtools
+    onRetry: (attempt, error, retryer) => {
+      console.log(`Retry attempt ${attempt} after error:`, error)
+    },
+    onSuccess: (result, args, retryer) => {
+      console.log('Request succeeded:', result)
+    },
+    onError: (error, args, retryer) => {
+      console.error('Request failed:', error)
+    },
+    onLastError: (error, retryer) => {
+      console.error('All retries exhausted:', error)
+    },
+    onExecutionTimeout: (retryer) => {
+      console.log('Execution attempt timed out')
+    },
+    onTotalExecutionTimeout: (retryer) => {
+      console.log('Total execution time exceeded')
+    },
+    onSettled: (args, retryer) => {
+      console.log('Execution settled')
+    },
+    onAbort: (reason, retryer) => {
+      console.log('Execution aborted:', reason)
+    }
+  }
+)
+
+// Execute the function with retry logic
+const data = await retryer.execute('/api/data')
+
+// Manual abort control - cancel ongoing execution
+retryer.abort()
+
+// ❌ DON'T DO THIS - will abort the previous execution
+// const data2 = await retryer.execute('/api/other-data')
+
+// ✅ DO THIS INSTEAD - create a new instance for each call
+const retryer2 = new AsyncRetryer(asyncFn, options)
+const data2 = await retryer2.execute('/api/other-data')
+```
+
+### Sharing Options Between Instances
+
+Use `asyncRetryerOptions` to share common options between different `AsyncRetryer` instances:
+
+```ts
+import { asyncRetryerOptions, AsyncRetryer } from '@tanstack/pacer'
+
+const sharedOptions = asyncRetryerOptions({
+  maxAttempts: 3,
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: 5000, // Cap wait time at 5 seconds
+  onSuccess: (result, args, retryer) => console.log('Success')
+})
+
+const retryer1 = new AsyncRetryer(fn1, { ...sharedOptions, key: 'retryer1' })
+const retryer2 = new AsyncRetryer(fn2, { ...sharedOptions, maxAttempts: 5 })
+```
+
+## Backoff Strategies
+
+The `backoff` option controls how the wait time between retry attempts changes:
+
+### Exponential Backoff (Default)
+
+Wait time doubles with each attempt. This is the most common strategy and works well for most scenarios:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000
+})
+// Attempt 1: immediate
+// Attempt 2: wait 1 second (1000ms * 2^0)
+// Attempt 3: wait 2 seconds (1000ms * 2^1)
+// Attempt 4: wait 4 seconds (1000ms * 2^2)
+// Attempt 5: wait 8 seconds (1000ms * 2^3)
+```
+
+### Linear Backoff
+
+Wait time increases linearly with each attempt:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'linear',
+  baseWait: 1000
+})
+// Attempt 1: immediate
+// Attempt 2: wait 1 second (1000ms * 1)
+// Attempt 3: wait 2 seconds (1000ms * 2)
+// Attempt 4: wait 3 seconds (1000ms * 3)
+// Attempt 5: wait 4 seconds (1000ms * 4)
+```
+
+### Fixed Backoff
+
+Wait time remains constant for all attempts:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'fixed',
+  baseWait: 1000
+})
+// Attempt 1: immediate
+// Attempt 2: wait 1 second
+// Attempt 3: wait 1 second
+// Attempt 4: wait 1 second
+// Attempt 5: wait 1 second
+```
+
+## Max Wait
+
+The `maxWait` option caps the maximum wait time between retries, preventing exponential or linear backoff from growing too large. This is particularly useful with exponential backoff, where wait times can quickly become very long:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: 5000 // Cap wait time at 5 seconds
+})
+// Attempt 1: immediate
+// Attempt 2: wait 1 second (1000ms * 2^0) - not capped
+// Attempt 3: wait 2 seconds (1000ms * 2^1) - not capped
+// Attempt 4: wait 4 seconds (1000ms * 2^2) - not capped
+// Attempt 5: wait 5 seconds (would be 8s, but capped at 5s)
+// Attempt 6: wait 5 seconds (would be 16s, but capped at 5s)
+```
+
+Without `maxWait`, exponential backoff can result in very long delays (e.g., 64 seconds, 128 seconds) that may be impractical for your use case. Setting `maxWait` ensures retries continue at a reasonable interval even after many attempts.
+
+The `maxWait` option also supports dynamic functions:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: (retryer) => {
+    // Increase max wait for critical operations
+    return retryer.store.state.executionCount > 10 ? 10000 : 5000
+  }
+})
+```
+
+By default, `maxWait` is `Infinity`, meaning there's no cap on wait times.
+
+## Jitter
+
+Jitter adds randomness to retry delays to prevent thundering herd problems, where many clients retry at the same time and overwhelm a recovering service. The `jitter` option accepts a value between 0 and 1, representing the percentage of random variation to apply:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000,
+  jitter: 0.1 // Add ±10% random variation
+})
+// Attempt 2: wait 900-1100ms (1000ms ± 10%)
+// Attempt 3: wait 1800-2200ms (2000ms ± 10%)
+// Attempt 4: wait 3600-4400ms (4000ms ± 10%)
+```
+
+Jitter is particularly useful when:
+- Multiple clients might fail at the same time (e.g., service outage)
+- You're dealing with rate-limited APIs
+- You want to spread out retry attempts to avoid overwhelming a recovering service
+
+## Timeout Controls
+
+TanStack Pacer provides two types of timeout controls to prevent hanging operations:
+
+### Individual Execution Timeout
+
+The `maxExecutionTime` option sets the maximum time for a single function call:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  maxExecutionTime: 5000, // Abort individual calls after 5 seconds
+  onExecutionTimeout: (retryer) => {
+    console.log('Execution attempt timed out, retrying...')
+  }
+})
+```
+
+If a single execution exceeds this time, `onExecutionTimeout` is called, followed by `onAbort('execution-timeout')`, and the attempt will be aborted and retried (if attempts remain).
+
+### Total Execution Timeout
+
+The `maxTotalExecutionTime` option sets the maximum time for the entire retry operation:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  maxAttempts: 5,
+  baseWait: 1000,
+  maxTotalExecutionTime: 30000, // Abort entire operation after 30 seconds
+  onTotalExecutionTimeout: (retryer) => {
+    console.log('Total execution time exceeded, aborting...')
+  }
+})
+```
+
+If the total time across all attempts exceeds this limit, `onTotalExecutionTimeout` is called, followed by `onAbort('total-timeout')`, and the retry operation will be aborted.
+
+### Combining Timeouts
+
+You can combine both timeout types for comprehensive control:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  maxAttempts: 5,
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: 5000, // Cap wait time between retries
+  maxExecutionTime: 5000, // Individual call timeout
+  maxTotalExecutionTime: 30000 // Overall operation timeout
+})
+```
+
+## Error Handling
+
+The async retryer provides comprehensive error handling through callbacks and the `throwOnError` option:
+
+### Error Throwing Behavior
+
+The `throwOnError` option controls when errors are thrown:
+
+```ts
+// Default: throw only the last error after all retries fail
+const retryer1 = new AsyncRetryer(asyncFn, {
+  throwOnError: 'last' // Default
+})
+
+// Throw every error immediately (disables retrying)
+const retryer2 = new AsyncRetryer(asyncFn, {
+  throwOnError: true
+})
+
+// Never throw errors, return undefined instead
+const retryer3 = new AsyncRetryer(asyncFn, {
+  throwOnError: false
+})
+```
+
+### Error Callbacks
+
+The async retryer supports multiple callbacks for different stages of execution:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  maxAttempts: 3,
+  onRetry: (attempt, error, retryer) => {
+    // Called before each retry attempt
+    console.log(`Retrying (attempt ${attempt})...`)
+    console.log('Error:', error.message)
+    console.log('Current attempt:', retryer.store.state.currentAttempt)
+  },
+  onError: (error, args, retryer) => {
+    // Called for every error (including during retries)
+    console.error('Execution failed:', error)
+    console.log('Failed with arguments:', args)
+  },
+  onLastError: (error, retryer) => {
+    // Called only for the final error after all retries fail
+    console.error('All retries exhausted:', error)
+    console.log('Total execution time:', retryer.store.state.totalExecutionTime)
+  },
+  onSuccess: (result, args, retryer) => {
+    // Called when execution succeeds
+    console.log('Execution succeeded:', result)
+    console.log('Succeeded with arguments:', args)
+    console.log('Attempts used:', retryer.store.state.currentAttempt)
+  },
+  onSettled: (args, retryer) => {
+    // Called after each attempt completes (success or failure), including after all retries are exhausted
+    console.log('Execution settled')
+    console.log('Total executions:', retryer.store.state.executionCount)
+  },
+  onAbort: (reason, retryer) => {
+    // Called when execution is aborted (manually or due to timeouts)
+    // reason can be: 'manual', 'execution-timeout', 'total-timeout', or 'new-execution'
+    console.log('Execution aborted:', reason)
+    if (reason === 'execution-timeout') {
+      console.log('Single execution timed out')
+    } else if (reason === 'total-timeout') {
+      console.log('Total execution time exceeded')
+    }
+  },
+  onExecutionTimeout: (retryer) => {
+    // Called when a single execution attempt times out (maxExecutionTime exceeded)
+    console.log('Execution attempt timed out')
+    console.log('Current attempt:', retryer.store.state.currentAttempt)
+  },
+  onTotalExecutionTimeout: (retryer) => {
+    // Called when the total execution time times out (maxTotalExecutionTime exceeded)
+    console.log('Total execution time exceeded')
+    console.log('Total time:', retryer.store.state.totalExecutionTime)
+  }
+})
+```
+
+### Callback Execution Order
+
+The callbacks are executed in the following order:
+
+```text
+1. execute() called
+2. Try attempt 1
+   └─ If execution times out (maxExecutionTime):
+      ├─ onExecutionTimeout() called
+      ├─ onAbort('execution-timeout') called
+      └─ onSettled() called (in finally block)
+   └─ If fails:
+      ├─ onError(error) called
+      ├─ onRetry(1, error) called
+      ├─ onSettled() called (in finally block)
+      └─ Wait for backoff
+   └─ If succeeds:
+      ├─ onSuccess(result) called
+      ├─ onSettled() called (in finally block)
+      └─ Return result
+3. Try attempt 2
+   └─ If total time exceeds (maxTotalExecutionTime):
+      ├─ onTotalExecutionTimeout() called
+      ├─ onAbort('total-timeout') called
+      └─ Execution aborted
+   └─ If execution times out:
+      ├─ onExecutionTimeout() called
+      ├─ onAbort('execution-timeout') called
+      └─ onSettled() called (in finally block)
+   └─ If fails:
+      ├─ onError(error) called
+      ├─ onRetry(2, error) called
+      ├─ onSettled() called (in finally block)
+      └─ Wait for backoff
+4. Try attempt 3 (last attempt)
+   └─ If fails:
+      ├─ onError(error) called
+      ├─ onSettled() called (in finally block)
+      ├─ onLastError(error) called (after loop exits)
+      ├─ onSettled() called (after all retries exhausted)
+      └─ Throw error (if throwOnError is 'last' or true)
+   └─ If succeeds:
+      ├─ onSuccess(result) called
+      ├─ onSettled() called (in finally block)
+      └─ Return result
+5. Manual abort or new execution:
+   └─ onAbort('manual') or onAbort('new-execution') called
+```
+
+## Dynamic Options and Enabling/Disabling
+
+The async retryer supports dynamic options that can change based on the retryer's current state:
+
+### Dynamic Max Attempts
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  maxAttempts: (retryer) => {
+    // Retry more times for critical operations
+    const errorCount = retryer.store.state.executionCount
+    return errorCount > 5 ? 2 : 5
+  }
+})
+```
+
+### Dynamic Base Wait
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  baseWait: (retryer) => {
+    // Increase wait time if we've had many errors
+    const errorCount = retryer.store.state.executionCount
+    return errorCount > 10 ? 2000 : 1000
+  }
+})
+```
+
+### Dynamic Max Wait
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  backoff: 'exponential',
+  baseWait: 1000,
+  maxWait: (retryer) => {
+    // Increase max wait cap for critical operations
+    const errorCount = retryer.store.state.executionCount
+    return errorCount > 10 ? 10000 : 5000
+  }
+})
+```
+
+### Enabling/Disabling
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, {
+  enabled: (retryer) => {
+    // Disable retrying after too many failures
+    return retryer.store.state.executionCount < 100
+  }
+})
+```
+
+## Abort and Cancellation
+
+The async retryer supports manual cancellation of ongoing execution and pending retries:
+
+### Manual Abort
+
+```ts
+const retryer = new AsyncRetryer(longRunningAsyncFn, {
+  maxAttempts: 5,
+  baseWait: 1000,
+  onAbort: (reason, retryer) => {
+    console.log('Execution aborted:', reason)
+    // reason will be 'manual' when abort() is called
+  }
+})
+
+// Start execution
+const promise = retryer.execute()
+
+// Cancel execution and pending retries
+retryer.abort()
+
+// The promise will resolve to undefined
+// onAbort('manual') is called
+const result = await promise
+console.log(result) // undefined
+```
+
+### Making Functions Actually Cancellable with `getAbortSignal()`
+
+For `abort()` to actually cancel your async function (like fetch requests), you need to use the abort signal in your function:
+
+```ts
+const retryer = new AsyncRetryer(
+  async (url: string) => {
+    const signal = retryer.getAbortSignal()
+    if (signal) {
+      // This fetch will be cancelled when abort() is called
+      return await fetch(url, { signal })
+    }
+    // Fallback for when not executing
+    return await fetch(url)
+  },
+  { maxAttempts: 3 }
+)
+
+// Start execution
+const promise = retryer.execute('/api/data')
+
+// This will now actually cancel the fetch request
+retryer.abort()
+```
+
+**Important:** Without using `getAbortSignal()`, calling `abort()` will only cancel the retry logic but not the underlying async operation (like a fetch request). The signal ensures your function can be truly cancelled.
+
+### Reset
+
+The `reset()` method cancels execution and resets all state to initial values:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, { maxAttempts: 3 })
+
+await retryer.execute()
+console.log(retryer.store.state.executionCount) // 1
+
+// Reset to initial state
+retryer.reset()
+console.log(retryer.store.state.executionCount) // 0
+console.log(retryer.store.state.lastError) // undefined
+console.log(retryer.store.state.lastResult) // undefined
+```
+
+## State Management
+
+The `AsyncRetryer` class uses TanStack Store for reactive state management, providing real-time access to execution state, error tracking, and retry statistics. All state is stored in a TanStack Store and can be accessed via `asyncRetryer.store.state`. Framework adapters provide their own state management patterns for reactive updates.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support a `selector` argument that allows you to specify which state changes will trigger re-renders. This optimizes performance by preventing unnecessary re-renders when irrelevant state changes occur.
+
+**By default, `retryer.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```tsx
+// Example with framework adapter (conceptual)
+// Framework adapters provide their own hooks and state management patterns
+// Check the specific framework adapter documentation for exact usage
+```
+
+### Initial State
+
+You can provide initial state values when creating an async retryer. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('async-retryer-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const retryer = new AsyncRetryer(asyncFn, {
+  maxAttempts: 3,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const retryer = new AsyncRetryer(asyncFn, { maxAttempts: 3 })
+
+// Subscribe to state changes
+const unsubscribe = retryer.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+  localStorage.setItem('async-retryer-state', JSON.stringify(state))
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `AsyncRetryerState` includes:
+
+- `currentAttempt`: The current retry attempt number (0 when not executing)
+- `executionCount`: Total number of completed executions (successful or failed)
+- `isExecuting`: Whether the retryer is currently executing the function
+- `lastError`: The most recent error encountered during execution
+- `lastExecutionTime`: Timestamp of the last execution completion in milliseconds
+- `lastResult`: The result from the most recent successful execution
+- `status`: Current execution status ('disabled' | 'idle' | 'executing' | 'retrying')
+- `totalExecutionTime`: Total time spent executing (including retries) in milliseconds
+
+### Status Values
+
+The `status` property indicates the current state of the retryer:
+
+- `'disabled'`: The retryer is disabled (via `enabled: false`)
+- `'idle'`: Ready to execute, not currently running
+- `'executing'`: Currently executing the first attempt
+- `'retrying'`: Currently executing a retry attempt (attempt > 1)
diff --git a/mintlify/pacer/guides/async-throttling.md b/mintlify/pacer/guides/async-throttling.md
new file mode 100644
index 000000000..fdff0601c
--- /dev/null
+++ b/mintlify/pacer/guides/async-throttling.md
@@ -0,0 +1,333 @@
+---
+title: Async Throttling Guide
+id: async-throttling
+---
+
+All core concepts from the [Throttling Guide](/pacer/guides/throttling) apply to async throttling as well.
+
+## When to Use Async Throttling
+
+You can usually just use the normal synchronous throttler and it will work with async functions, but for advanced use cases, such as wanting to use the return value of a throttled function (instead of just calling a setState side effect), or putting your error handling logic in the throttler, you can use the async throttler.
+
+## Async Throttling in TanStack Pacer
+
+TanStack Pacer provides async throttling through the `AsyncThrottler` class and the `asyncThrottle` function.
+
+### Basic Usage Example
+
+Here's a basic example showing how to use the async throttler for a search operation:
+
+```ts
+const throttledSearch = asyncThrottle(
+  async (searchTerm: string) => {
+    const results = await fetchSearchResults(searchTerm)
+    return results
+  },
+  {
+    wait: 500,
+    onSuccess: (results, args, throttler) => {
+      console.log('Search succeeded:', results)
+      console.log('Search arguments:', args)
+    },
+    onError: (error, args, throttler) => {
+      console.error('Search failed:', error)
+      console.log('Failed arguments:', args)
+    }
+  }
+)
+
+// Usage
+try {
+  const results = await throttledSearch('query')
+  // Handle successful results
+} catch (error) {
+  // Handle errors if no onError handler was provided
+  console.error('Search failed:', error)
+}
+```
+
+> **Note:** When using React, prefer `useAsyncThrottledCallback` hook over the `asyncThrottle` function for better integration with React's lifecycle and automatic cleanup.
+
+## Key Differences from Synchronous Throttling
+
+### 1. Return Value Handling
+
+Unlike the synchronous throttler which returns void, the async version allows you to capture and use the return value from your throttled function. The `maybeExecute` method returns a Promise that resolves with the function's return value, allowing you to await the result and handle it appropriately.
+
+### 2. Error Handling
+
+The async throttler provides robust error handling capabilities:
+- If your throttled function throws an error and no `onError` handler is provided, the error will be thrown and propagate up to the caller
+- If you provide an `onError` handler, errors will be caught and passed to the handler instead of being thrown
+- The `throwOnError` option can be used to control error throwing behavior:
+  - When true (default if no onError handler), errors will be thrown
+  - When false (default if onError handler provided), errors will be swallowed
+  - Can be explicitly set to override these defaults
+- You can track error counts using `throttler.store.state.errorCount` and check execution state with `throttler.store.state.isExecuting`
+- The throttler maintains its state and can continue to be used after an error occurs
+
+### 3. Different Callbacks
+
+The `AsyncThrottler` supports the following callbacks:
+- `onSuccess`: Called after each successful execution, providing the result, the arguments that were executed, and throttler instance
+- `onSettled`: Called after each execution (success or failure), providing the arguments that were executed and throttler instance
+- `onError`: Called if the async function throws an error, providing the error, the arguments that caused the error, and the throttler instance
+
+Example:
+
+```ts
+const asyncThrottler = new AsyncThrottler(async (value) => {
+  await saveToAPI(value)
+}, {
+  wait: 500,
+  onSuccess: (result, args, throttler) => {
+    // Called after each successful execution
+    console.log('Async function executed', throttler.store.state.successCount)
+    console.log('Executed arguments:', args)
+  },
+  onSettled: (args, throttler) => {
+    // Called after each execution attempt
+    console.log('Async function settled', throttler.store.state.settleCount)
+    console.log('Settled arguments:', args)
+  },
+  onError: (error, args, throttler) => {
+    // Called if the async function throws an error
+    console.error('Async function failed:', error)
+    console.log('Failed arguments:', args)
+  }
+})
+```
+
+### 4. Sequential Execution
+
+Since the throttler's `maybeExecute` method returns a Promise, you can choose to await each execution before starting the next one. This gives you control over the execution order and ensures each call processes the most up-to-date data. This is particularly useful when dealing with operations that depend on the results of previous calls or when maintaining data consistency is critical.
+
+For example, if you're updating a user's profile and then immediately fetching their updated data, you can await the update operation before starting the fetch.
+
+## Advanced Features: Retry and Abort Support
+
+The async throttler includes built-in retry and abort capabilities through integration with `AsyncRetryer`. These features help handle transient failures and provide control over in-flight operations.
+
+### Retry Support
+
+Configure automatic retries for failed throttled function executions using the `asyncRetryerOptions`:
+
+```ts
+const throttledSave = asyncThrottle(
+  async (data: string) => {
+    // This might fail due to network issues
+    await api.save(data)
+  },
+  {
+    wait: 1000,
+    asyncRetryerOptions: {
+      maxAttempts: 3,
+      backoff: 'exponential',
+      baseWait: 1000,
+      maxWait: 10000,
+      jitter: 0.3
+    }
+  }
+)
+```
+
+For complete documentation on retry strategies, backoff algorithms, jitter, and advanced retry patterns, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Abort Support
+
+Cancel in-flight throttled executions using the abort functionality:
+
+```ts
+const throttler = new AsyncThrottler(
+  async (data: string) => {
+    // Access the abort signal for this execution
+    const signal = throttler.getAbortSignal()
+    if (signal) {
+      const response = await fetch('/api/save', {
+        method: 'POST',
+        body: data,
+        signal
+      })
+      return response.json()
+    }
+  },
+  { wait: 1000 }
+)
+
+// Start an operation
+throttler.maybeExecute('data')
+
+// Later, abort any in-flight execution
+throttler.abort()
+```
+
+The abort functionality:
+- Cancels all ongoing throttled executions using AbortController
+- Does NOT cancel pending executions that haven't started yet (use `cancel()` for that)
+- Can be used alongside retry support
+
+Abort only cancels underlying operations (e.g. `fetch`) when you pass the signal from `getAbortSignal()` to them. If your throttled function does not attach the signal, abort clears internal state but the async work continues until it completes.
+
+For more details on abort patterns and integration with fetch/axios, see the [Async Retrying Guide](/pacer/guides/async-retrying).
+
+### Sharing Options Between Instances
+
+Use `asyncThrottlerOptions` to share common options between different `AsyncThrottler` instances:
+
+```ts
+import { asyncThrottlerOptions, AsyncThrottler } from '@tanstack/pacer'
+
+const sharedOptions = asyncThrottlerOptions({
+  wait: 500,
+  leading: true,
+  trailing: true,
+  onSuccess: (result, args, throttler) => console.log('Success')
+})
+
+const throttler1 = new AsyncThrottler(fn1, { ...sharedOptions, key: 'throttler1' })
+const throttler2 = new AsyncThrottler(fn2, { ...sharedOptions, wait: 1000 })
+```
+
+## Dynamic Options and Enabling/Disabling
+
+Just like the synchronous throttler, the async throttler supports dynamic options for `wait` and `enabled`, which can be functions that receive the throttler instance. This allows for sophisticated, runtime-adaptive throttling behavior.
+
+### Flushing Pending Executions
+
+The async throttler supports flushing pending executions to trigger them immediately:
+
+```ts
+const asyncThrottler = new AsyncThrottler(asyncFn, { wait: 1000 })
+
+asyncThrottler.maybeExecute('some-arg')
+console.log(asyncThrottler.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+asyncThrottler.flush()
+console.log(asyncThrottler.store.state.isPending) // false
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel any pending execution and abort any in-flight execution by default when a component unmounts. The automatic abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them. Use the `onUnmount` option to flush instead of canceling.
+
+```tsx
+const throttler = useAsyncThrottler(fn, {
+  wait: 500,
+  onUnmount: (t) => t.flush(),
+})
+```
+
+> **Warning:** For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup. If your throttled function updates React/Preact state or Solid signals, those updates may run after the component has unmounted, which can cause "setState on unmounted component" warnings or unexpected reactive updates. Guard your callbacks accordingly.
+
+## State Management
+
+The `AsyncThrottler` class uses TanStack Store for reactive state management, providing real-time access to execution state, error tracking, and timing information. All state is stored in a TanStack Store and can be accessed via `asyncThrottler.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `asyncThrottler.state` along with providing a selector callback as the 3rd argument to the `useAsyncThrottler` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `asyncThrottler.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const asyncThrottler = useAsyncThrottler(asyncFn, { wait: 500 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<asyncThrottler.Subscribe selector={(state) => ({ isExecuting: state.isExecuting })}>
+  {(state) => (
+    <div>{state.isExecuting ? 'Executing...' : 'Idle'}</div>
+  )}
+</asyncThrottler.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `asyncThrottler.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const asyncThrottler = useAsyncThrottler(asyncFn, { wait: 500 })
+console.log(asyncThrottler.state) // {}
+
+// Opt-in to re-render when isExecuting changes
+const asyncThrottler = useAsyncThrottler(
+  asyncFn, 
+  { wait: 500 },
+  (state) => ({ isExecuting: state.isExecuting })
+)
+console.log(asyncThrottler.state.isExecuting) // Reactive value
+
+// Multiple state properties
+const asyncThrottler = useAsyncThrottler(
+  asyncFn,
+  { wait: 500 },
+  (state) => ({
+    isExecuting: state.isExecuting,
+    successCount: state.successCount,
+    errorCount: state.errorCount
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating an async throttler. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('async-throttler-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const asyncThrottler = new AsyncThrottler(asyncFn, {
+  wait: 500,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const asyncThrottler = new AsyncThrottler(asyncFn, { wait: 500 })
+
+// Subscribe to state changes
+const unsubscribe = asyncThrottler.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `AsyncThrottlerState` includes:
+
+- `errorCount`: Number of function executions that have resulted in errors
+- `isExecuting`: Whether the throttled function is currently executing asynchronously
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to `maybeExecute`
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `lastResult`: The result from the most recent successful function execution
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `settleCount`: Number of function executions that have completed (either successfully or with errors)
+- `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
+- `successCount`: Number of function executions that have completed successfully
+
+## Framework Adapters
+
+Each framework adapter provides hooks that build on top of the core async throttling functionality to integrate with the framework's state management system. Hooks like `createAsyncThrottler`, `useAsyncThrottledCallback`, or similar are available for each framework.
+
+---
+
+For core throttling concepts and synchronous throttling, see the [Throttling Guide](/pacer/guides/throttling). 
\ No newline at end of file
diff --git a/mintlify/pacer/guides/batching.md b/mintlify/pacer/guides/batching.md
new file mode 100644
index 000000000..a4d8c211b
--- /dev/null
+++ b/mintlify/pacer/guides/batching.md
@@ -0,0 +1,316 @@
+---
+title: Batching Guide
+id: batching
+---
+
+Batching is a powerful technique for grouping multiple operations together and processing them as a single unit. Unlike [Queuing](/pacer/guides/queuing), which ensures every operation is processed individually, batching collects items and processes them in configurable groups, improving efficiency and reducing overhead. This guide covers the Batching concepts of TanStack Pacer.
+
+## Batching Concept
+
+Batching collects items over time or until a certain size is reached, then processes them all at once. This is ideal for scenarios where processing items in bulk is more efficient than handling them one by one. Batching can be triggered by:
+- Reaching a maximum batch size
+- Waiting a maximum amount of time
+- Custom logic (e.g., a special item or condition)
+
+### Batching Visualization
+
+```text
+Batching (processing every 3 items or every 2 seconds)
+Timeline: [1 second per tick]
+Calls:        ⬇️  ⬇️  ⬇️     ⬇️  ⬇️     ⬇️  ⬇️  ⬇️
+Batch:       [ABC]   []      [DE]      []      [FGH]  []
+Executed:     ✅             ✅         ✅
+             [===============================]
+             ^ Items are grouped and processed together
+
+             [Items accumulate]   [Process batch]   [Empty]
+                in batch           as group         batch
+```
+
+## When to Use Batching
+
+Batching is best when:
+- Processing items in groups is more efficient (e.g., network requests, database writes)
+- You want to reduce the frequency of expensive operations
+- You need to control the rate or size of processing
+- You want to debounce bursts of activity into fewer operations
+
+## When Not to Use Batching
+
+Batching may not be ideal when:
+- Every item must be processed individually and immediately (use [queuing](/pacer/guides/queuing))
+- You only care about the most recent value (use [debouncing](/pacer/guides/debouncing))
+
+> [!TIP]
+> If you find yourself making repeated calls that could be grouped, batching can help you optimize performance and resource usage.
+
+## Batching in TanStack Pacer
+
+TanStack Pacer provides batching through the `Batcher` class and the simple `batch` function. Both allow you to collect items and process them in configurable batches.
+
+### Basic Usage with `batch`
+
+The `batch` function provides a simple way to create a batching function:
+
+```ts
+import { batch } from '@tanstack/pacer'
+
+// Create a batcher that processes up to 3 items or every 2 seconds
+const processBatch = batch<number>(
+  (items) => {
+    // Process the batch
+    console.log('Processing batch:', items)
+  },
+  {
+    maxSize: 3, // Process when 3 items are collected
+    wait: 2000, // Or after 2 seconds, whichever comes first
+    onItemsChange: (batcher) => {
+      console.log('Current batch:', batcher.peekAllItems())
+    }
+  }
+)
+
+// Add items to be batched
+processBatch(1)
+processBatch(2)
+processBatch(3) // Triggers batch processing
+processBatch(4)
+// Or wait 2 seconds for the next batch to process
+```
+
+> **Note:** When using React, prefer `useBatchedCallback` hook over the `batch` function for better integration with React's lifecycle and automatic cleanup.
+
+The `batch` function returns a function that adds items to the batch. Batches are processed automatically based on your configuration.
+
+### Advanced Usage with `Batcher` Class
+
+The `Batcher` class provides full control over batching behavior:
+
+```ts
+import { Batcher } from '@tanstack/pacer'
+
+// Create a batcher that processes up to 5 items or every 3 seconds
+const batcher = new Batcher<number>(
+  (items) => {
+    // Process the batch
+    console.log('Processing batch:', items)
+  },
+  {
+    maxSize: 5, // Process when 5 items are collected
+    wait: 3000, // Or after 3 seconds
+    getShouldExecute: (items, batcher) => items.includes(42), // Custom trigger
+    onItemsChange: (batcher) => {
+      console.log('Current batch:', batcher.peekAllItems())
+    }
+  }
+)
+
+// Add items to the batch
+batcher.addItem(1)
+batcher.addItem(2)
+batcher.addItem(3)
+// ...
+
+// Manually process the current batch
+batcher.execute()
+
+// Control batching
+batcher.stop()  // Pause batching
+batcher.start() // Resume batching
+```
+
+## Batcher Options
+
+Batcher options allow you to customize how and when batches are processed:
+
+- `maxSize`: Maximum number of items per batch (default: `Infinity`)
+- `wait`: Maximum time (ms) to wait before processing a batch (default: `Infinity`)
+- `getShouldExecute`: Custom function to determine if a batch should be processed
+- `onExecute`: Callback after a batch is processed
+- `onItemsChange`: Callback after items are added or batch is processed
+- `onIsRunningChange`: Callback when the batcher's running state changes
+- `started`: Whether the batcher starts running immediately (default: `true`)
+
+## Batcher Methods
+
+The `Batcher` class provides several methods for batch management:
+
+```ts
+batcher.addItem(item)           // Add an item to the batch
+batcher.execute()               // Manually process the current batch
+batcher.stop()                  // Pause batching
+batcher.start()                 // Resume batching
+batcher.store.state.size        // Get current batch size
+batcher.store.state.isEmpty     // Check if batch is empty
+batcher.store.state.isRunning   // Check if batcher is running
+batcher.peekAllItems()           // Get all items in the current batch
+batcher.store.state.executionCount // Number of batches processed
+batcher.store.state.totalItemsProcessed // Number of items processed
+batcher.setOptions(opts)        // Update batcher options
+batcher.flush()                 // Flush pending batch immediately
+```
+
+## Custom Batch Triggers
+
+You can use `getShouldExecute` to trigger a batch based on custom logic:
+
+```ts
+const batcher = new Batcher<number>(
+  (items) => console.log('Processing batch:', items),
+  {
+    getShouldExecute: (items) => items.includes(99),
+  }
+)
+
+batcher.addItem(1)
+batcher.addItem(99) // Triggers batch processing immediately
+```
+
+## Dynamic Configuration
+
+You can update batcher options at runtime:
+
+```ts
+batcher.setOptions({
+  maxSize: 10,
+  wait: 1000,
+})
+
+const options = batcher.getOptions()
+console.log(options.maxSize) // 10
+```
+
+## State Management
+
+The `Batcher` class uses TanStack Store for reactive state management, providing real-time access to batch state, execution counts, and processing status. All state is stored in a TanStack Store and can be accessed via `batcher.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `batcher.state` along with providing a selector callback as the 3rd argument to the `useBatcher` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `batcher.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const batcher = useBatcher(processFn, { maxSize: 5, wait: 1000 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<batcher.Subscribe selector={(state) => ({ size: state.size })}>
+  {(state) => (
+    <div>Batch size: {state.size}</div>
+  )}
+</batcher.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `batcher.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const batcher = useBatcher(processFn, { maxSize: 5, wait: 1000 })
+console.log(batcher.state) // {}
+
+// Opt-in to re-render when size changes
+const batcher = useBatcher(
+  processFn, 
+  { maxSize: 5, wait: 1000 },
+  (state) => ({ size: state.size })
+)
+console.log(batcher.state.size) // Reactive value
+
+// Multiple state properties
+const batcher = useBatcher(
+  processFn,
+  { maxSize: 5, wait: 1000 },
+  (state) => ({
+    size: state.size,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating a batcher. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('batcher-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const batcher = new Batcher(processFn, {
+  maxSize: 5,
+  wait: 1000,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const batcher = new Batcher(processFn, { maxSize: 5, wait: 1000 })
+
+// Subscribe to state changes
+const unsubscribe = batcher.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `BatcherState` includes:
+
+- `executionCount`: Number of batch executions that have been completed
+- `isEmpty`: Whether the batcher has no items to process (items array is empty)
+- `isPending`: Whether the batcher is waiting for the timeout to trigger batch processing
+- `items`: Array of items currently queued for batch processing
+- `size`: Number of items currently in the batch queue
+- `status`: Current processing status ('idle' | 'pending')
+- `totalItemsProcessed`: Total number of items that have been processed across all batches
+
+### Flushing Pending Batches
+
+The batcher supports flushing pending batches to trigger processing immediately:
+
+```ts
+const batcher = new Batcher(processFn, { maxSize: 10, wait: 5000 })
+
+batcher.addItem('item1')
+batcher.addItem('item2')
+console.log(batcher.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+batcher.flush()
+console.log(batcher.store.state.isEmpty) // true (batch was processed)
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel pending batches by default when a component unmounts. Use the `onUnmount` option to flush instead.
+
+```tsx
+const batcher = useBatcher(fn, {
+  maxSize: 5,
+  wait: 2000,
+  onUnmount: (b) => b.flush(),
+})
+```
+
+## Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the batcher classes. Hooks like `useBatcher`, or `createBatcher` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+For asynchronous batching, see the [Async Batching Guide](/pacer/guides/async-batching).
\ No newline at end of file
diff --git a/mintlify/pacer/guides/debouncing.md b/mintlify/pacer/guides/debouncing.md
new file mode 100644
index 000000000..01f3f3e3f
--- /dev/null
+++ b/mintlify/pacer/guides/debouncing.md
@@ -0,0 +1,334 @@
+---
+title: Debouncing Guide
+id: debouncing
+---
+
+Rate Limiting, Throttling, and Debouncing are three distinct approaches to controlling function execution frequency. Each technique blocks executions differently, making them "lossy" - meaning some function calls will not execute when they are requested to run too frequently. Understanding when to use each approach is crucial for building performant and reliable applications. This guide will cover the Debouncing concepts of TanStack Pacer.
+
+## Debouncing Concept
+
+Debouncing is a technique that delays the execution of a function until a specified period of inactivity has occurred. Unlike rate limiting which allows bursts of executions up to a limit, or throttling which ensures evenly spaced executions, debouncing collapses multiple rapid function calls into a single execution that only happens after the calls stop. This makes debouncing ideal for handling bursts of events where you only care about the final state after the activity settles.
+
+### Debouncing Visualization
+
+```text
+Debouncing (wait: 3 ticks)
+Timeline: [1 second per tick]
+Calls:        ⬇️  ⬇️  ⬇️  ⬇️  ⬇️     ⬇️  ⬇️  ⬇️  ⬇️               ⬇️  ⬇️
+Executed:     ❌  ❌  ❌  ❌  ❌     ❌  ❌  ❌  ⏳   ->   ✅     ❌  ⏳   ->    ✅
+             [=================================================================]
+                                                        ^ Executes here after
+                                                         3 ticks of no calls
+
+             [Burst of calls]     [More calls]   [Wait]      [New burst]
+             No execution         Resets timer    [Delayed Execute]  [Wait] [Delayed Execute]
+```
+
+### When to Use Debouncing
+
+Debouncing is particularly effective when you want to wait for a "pause" in activity before taking action. This makes it ideal for handling user input or other rapidly-firing events where you only care about the final state.
+
+### When Not to Use Debouncing
+
+Debouncing might not be the best choice when:
+- You need guaranteed execution over a specific time period (use [throttling](/pacer/guides/throttling) instead)
+- You can't afford to miss any executions (use [queuing](/pacer/guides/queuing) instead)
+
+## Debouncing in TanStack Pacer
+
+TanStack Pacer provides both synchronous and asynchronous debouncing. This guide covers the synchronous `Debouncer` class and `debounce` function. For async debouncing, see the [Async Debouncing Guide](/pacer/guides/async-debouncing).
+
+### Basic Usage with `debounce`
+
+The `debounce` function is the simplest way to add debouncing to any function:
+
+```ts
+import { debounce } from '@tanstack/pacer'
+
+// Debounce search input to wait for user to stop typing
+const debouncedSearch = debounce(
+  (searchTerm: string) => performSearch(searchTerm),
+  {
+    wait: 500, // Wait 500ms after last keystroke
+  }
+)
+
+searchInput.addEventListener('input', (e) => {
+  debouncedSearch(e.target.value)
+})
+```
+
+> **Note:** When using React, prefer `useDebouncedCallback` hook over the `debounce` function for better integration with React's lifecycle and automatic cleanup.
+
+### Advanced Usage with `Debouncer` Class
+
+For more control over the debouncing behavior, you can use the `Debouncer` class directly:
+
+```ts
+import { Debouncer } from '@tanstack/pacer'
+
+const searchDebouncer = new Debouncer(
+  (searchTerm: string) => performSearch(searchTerm),
+  { wait: 500 }
+)
+
+// Access current state via TanStack Store
+console.log(searchDebouncer.store.state.executionCount) // Number of successful executions
+console.log(searchDebouncer.store.state.isPending) // Whether a call is pending
+console.log(searchDebouncer.store.state.status) // Current execution status
+
+// Update options dynamically
+searchDebouncer.setOptions({ wait: 1000 }) // Increase wait time
+
+// Cancel pending execution
+searchDebouncer.cancel()
+
+// Flush pending execution immediately
+searchDebouncer.flush()
+```
+
+### Leading and Trailing Executions
+
+The synchronous debouncer supports both leading and trailing edge executions:
+
+```ts
+const debouncedFn = debounce(fn, {
+  wait: 500,
+  leading: true,   // Execute on first call
+  trailing: true,  // Execute after wait period
+})
+```
+
+- `leading: true` - Function executes immediately on first call
+- `leading: false` (default) - First call starts the wait timer
+- `trailing: true` (default) - Function executes after wait period
+- `trailing: false` - No execution after wait period
+
+Common patterns:
+- `{ leading: false, trailing: true }` - Default, execute after wait
+- `{ leading: true, trailing: false }` - Execute immediately, ignore subsequent calls
+- `{ leading: true, trailing: true }` - Execute on both first call and after wait
+
+### Max Wait Time
+
+The TanStack Pacer Debouncer purposely does NOT have a `maxWait` option like other debouncing libraries. If you need to let executions run over a more spread out period of time, consider using the [throttling](/pacer/guides/throttling) technique instead.
+
+### Sharing Options Between Instances
+
+Use `debouncerOptions` to share common options between different `Debouncer` instances:
+
+```ts
+import { debouncerOptions, Debouncer } from '@tanstack/pacer'
+
+const sharedOptions = debouncerOptions({
+  wait: 500,
+  leading: false,
+  trailing: true
+})
+
+const debouncer1 = new Debouncer(fn1, { ...sharedOptions, key: 'debouncer1' })
+const debouncer2 = new Debouncer(fn2, { ...sharedOptions, wait: 1000 })
+```
+
+### Enabling/Disabling
+
+The `Debouncer` class supports enabling/disabling via the `enabled` option. Using the `setOptions` method, you can enable/disable the debouncer at any time:
+
+```ts
+const debouncer = new Debouncer(fn, { wait: 500, enabled: false }) // Disable by default
+debouncer.setOptions({ enabled: true }) // Enable at any time
+```
+
+The `enabled` option can also be a function that returns a boolean, allowing for dynamic enabling/disabling based on runtime conditions:
+
+```ts
+const debouncer = new Debouncer(fn, {
+  wait: 500,
+  enabled: (debouncer) => {
+    return debouncer.store.state.executionCount < 10 // Disable after 10 executions
+  }
+})
+```
+
+If you are using a framework adapter where the debouncer options are reactive, you can set the `enabled` option to a conditional value to enable/disable the debouncer on the fly:
+
+```ts
+// React example
+const debouncer = useDebouncer(
+  setSearch, 
+  { wait: 500, enabled: searchInput.value.length > 3 } // Enable/disable based on input length IF using a framework adapter that supports reactive options
+)
+```
+
+### Dynamic Options
+
+Several options in the Debouncer support dynamic values through callback functions that receive the debouncer instance:
+
+```ts
+const debouncer = new Debouncer(fn, {
+  // Dynamic wait time based on execution count
+  wait: (debouncer) => {
+    return debouncer.store.state.executionCount * 100 // Increase wait time with each execution
+  },
+  // Dynamic enabled state based on execution count
+  enabled: (debouncer) => {
+    return debouncer.store.state.executionCount < 10 // Disable after 10 executions
+  }
+})
+```
+
+The following options support dynamic values:
+- `enabled`: Can be a boolean or a function that returns a boolean
+- `wait`: Can be a number or a function that returns a number
+
+This allows for sophisticated debouncing behavior that adapts to runtime conditions.
+
+### Callback Options
+
+The synchronous `Debouncer` supports the following callback:
+
+```ts
+const debouncer = new Debouncer(fn, {
+  wait: 500,
+  onExecute: (debouncer) => {
+    // Called after each successful execution
+    console.log('Function executed', debouncer.store.state.executionCount)
+  }
+})
+```
+
+The `onExecute` callback is called after each successful execution of the debounced function, making it useful for tracking executions, updating UI state, or performing cleanup operations.
+
+### Flushing Pending Executions
+
+The debouncer supports flushing pending executions to trigger them immediately:
+
+```ts
+const debouncer = new Debouncer(fn, { wait: 1000 })
+
+debouncer.maybeExecute('some-arg')
+console.log(debouncer.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+debouncer.flush()
+console.log(debouncer.store.state.isPending) // false
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel pending work by default when a component unmounts. Use the `onUnmount` option to flush instead.
+
+```tsx
+const debouncer = useDebouncer(fn, {
+  wait: 500,
+  onUnmount: (d) => d.flush(),
+})
+```
+
+## State Management
+
+The `Debouncer` class uses TanStack Store for reactive state management, providing real-time access to execution state and statistics. All state is stored in a TanStack Store and can be accessed via `debouncer.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `debouncer.state` along with providing a selector callback as the 3rd argument to the `useDebouncer` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `debouncer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const debouncer = useDebouncer(fn, { wait: 500 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<debouncer.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {(state) => (
+    <div>{state.isPending ? 'Waiting...' : 'Ready'}</div>
+  )}
+</debouncer.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `debouncer.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const debouncer = useDebouncer(fn, { wait: 500 })
+console.log(debouncer.state) // {}
+
+// Opt-in to re-render when isPending changes
+const debouncer = useDebouncer(
+  fn, 
+  { wait: 500 },
+  (state) => ({ isPending: state.isPending })
+)
+console.log(debouncer.state.isPending) // Reactive value
+
+// Multiple state properties
+const debouncer = useDebouncer(
+  fn,
+  { wait: 500 },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating a debouncer. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('debouncer-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const debouncer = new Debouncer(fn, {
+  wait: 500,
+  key: 'search-debouncer',
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const debouncer = new Debouncer(fn, { wait: 500 })
+
+// Subscribe to state changes
+const unsubscribe = debouncer.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `DebouncerState` includes:
+
+- `canLeadingExecute`: Whether the debouncer can execute on the leading edge of the timeout
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the debouncer is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to `maybeExecute`
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the debouncer classes. Hooks like `useDebouncer`, or `createDebouncer` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+---
+
+For asynchronous debouncing (e.g., API calls, async operations), see the [Async Debouncing Guide](/pacer/guides/async-debouncing).
diff --git a/mintlify/pacer/guides/queuing.md b/mintlify/pacer/guides/queuing.md
new file mode 100644
index 000000000..d7f5406d9
--- /dev/null
+++ b/mintlify/pacer/guides/queuing.md
@@ -0,0 +1,544 @@
+---
+title: Queuing Guide
+id: queuing
+---
+
+Unlike [Rate Limiting](/pacer/guides/rate-limiting), [Throttling](/pacer/guides/throttling), and [Debouncing](/pacer/guides/debouncing) which drop executions when they occur too frequently, queuers can be configured to ensure that every operation is processed. They provide a way to manage and control the flow of operations without losing any requests. This makes them ideal for scenarios where data loss is unacceptable. Queuing can also be set to have a maximum size, which can be useful for preventing memory leaks or other issues. This guide will cover the Queuing concepts of TanStack Pacer.
+
+## Queuing Concept
+
+Queuing ensures that every operation is eventually processed, even if they come in faster than they can be handled. Unlike the other execution control techniques that drop excess operations, queuing buffers operations in an ordered list and processes them according to specific rules. This makes queuing the only "lossless" execution control technique in TanStack Pacer, unless a `maxSize` is specified which can cause items to be rejected when the buffer is full.
+
+### Queuing Visualization
+
+```text
+Queuing (processing one item every 2 ticks)
+Timeline: [1 second per tick]
+Calls:        ⬇️  ⬇️  ⬇️     ⬇️  ⬇️     ⬇️  ⬇️  ⬇️
+Queue:       [ABC]   [BC]    [BCDE]    [DE]    [E]    []
+Executed:     ✅     ✅       ✅        ✅      ✅     ✅
+             [=================================================================]
+             ^ Unlike rate limiting/throttling/debouncing,
+               ALL calls are eventually processed in order
+
+             [Items queue up]   [Process steadily]   [Empty]
+              when busy          one by one           queue
+```
+
+### When to Use Queuing
+
+Queuing is particularly important when you need to ensure that every operation is processed, even if it means introducing some delay. This makes it ideal for scenarios where data consistency and completeness are more important than immediate execution. When using a `maxSize`, it can also serve as a buffer to prevent overwhelming a system with too many pending operations.
+
+### When Not to Use Queuing
+
+Queuing might not be the best choice when:
+- Immediate feedback is more important than processing every operation
+- You only care about the most recent value (use [debouncing](/pacer/guides/debouncing) instead)
+- You want to group operations together (use [batching](/pacer/guides/batching) instead)
+
+> [!TIP]
+> If you're currently using rate limiting, throttling, or debouncing but finding that dropped operations are causing problems, queuing is likely the solution you need.
+
+## Queuing in TanStack Pacer
+
+TanStack Pacer provides queuing through the simple `queue` function and the more powerful `Queuer` class. While other execution control techniques typically favor their function-based APIs, queuing often benefits from the additional control provided by the class-based API.
+
+### Basic Usage with `queue`
+
+The `queue` function provides a simple way to create an always-running queue that processes items as they're added:
+
+```ts
+import { queue } from '@tanstack/pacer'
+
+// Create a queue that processes items every second
+const processItems = queue<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    wait: 1000,
+    maxSize: 10, // Optional: limit queue size to prevent memory or time issues
+    onItemsChange: (queuer) => {
+      console.log('Current queue:', queuer.peekAllItems())
+    }
+  }
+)
+
+// Add items to be processed
+processItems(1) // Processed immediately
+processItems(2) // Processed after 1 second
+processItems(3) // Processed after 2 seconds
+```
+
+
+While the `queue` function is simple to use, it only provides a basic always-running queue through the `addItem` method. For most use cases, you'll want the additional control and features provided by the `Queuer` class.
+
+### Advanced Usage with `Queuer` Class
+
+The `Queuer` class provides complete control over queue behavior and processing:
+
+```ts
+import { Queuer } from '@tanstack/pacer'
+
+// Create a queue that processes items every second
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    wait: 1000, // Wait 1 second between processing items
+    maxSize: 5, // Optional: limit queue size to prevent memory or time issues
+    onItemsChange: (queuer) => {
+      console.log('Current queue:', queuer.peekAllItems())
+    }
+  }
+)
+
+// Start processing
+queue.start()
+
+// Add items to be processed
+queue.addItem(1)
+queue.addItem(2)
+queue.addItem(3)
+
+// Items will be processed one at a time with 1 second delay between each
+// Output:
+// Processing: 1 (immediately)
+// Processing: 2 (after 1 second)
+// Processing: 3 (after 2 seconds)
+```
+
+### Queue Types and Ordering
+
+What makes TanStack Pacer's Queuer unique is its ability to adapt to different use cases through its position-based API. The same Queuer can behave as a traditional queue, a stack, or a double-ended queue, all through the same consistent interface.
+
+#### FIFO Queue (First In, First Out)
+
+The default behavior where items are processed in the order they were added. This is the most common queue type and follows the principle that the first item added should be the first one processed. When using `maxSize`, new items will be rejected if the queue is full.
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    addItemsTo: 'back', // default
+    getItemsFrom: 'front', // default
+  }
+)
+queue.addItem(1) // [1]
+queue.addItem(2) // [1, 2]
+// Processes: 1, then 2
+```
+
+#### LIFO Stack (Last In, First Out)
+
+By specifying 'back' as the position for both adding and retrieving items, the queuer behaves like a stack. In a stack, the most recently added item is the first one to be processed. When using `maxSize`, new items will be rejected if the stack is full.
+
+```ts
+const stack = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    addItemsTo: 'back', // default
+    getItemsFrom: 'back', // override default for stack behavior
+  }
+)
+stack.addItem(1) // [1]
+stack.addItem(2) // [1, 2]
+// Items will process in order: 2, then 1
+
+stack.getNextItem('back') // get next item from back of queue instead of front
+```
+
+#### Priority Queue
+
+Priority queues add another dimension to queue ordering by allowing items to be sorted based on their priority rather than just their insertion order. Each item is assigned a priority value, and the queue automatically maintains the items in priority order. When using `maxSize`, lower priority items may be rejected if the queue is full.
+
+```ts
+const priorityQueue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    getPriority: (n) => n // Higher numbers have priority
+  }
+)
+priorityQueue.addItem(1) // [1]
+priorityQueue.addItem(3) // [3, 1]
+priorityQueue.addItem(2) // [3, 2, 1]
+// Processes: 3, 2, then 1
+```
+
+### Starting and Stopping
+
+The `Queuer` class supports starting and stopping processing through the `start()` and `stop()` methods. By default, queues start processing automatically. You can set `started: false` to have the queue paused initially, allowing you to either:
+
+1. Start processing later with `start()`
+2. Manually process items by calling `getNextItem()` in an event-driven manner
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    started: false // Start paused
+  }
+)
+
+queue.start() // Begin processing items
+queue.stop()  // Pause processing
+
+// Manually process items while the queue is stopped (run it your own way)
+queue.getNextItem() // Get next item
+queue.getNextItem() // Get next item
+queue.getNextItem() // Get next item
+```
+
+### Sharing Options Between Instances
+
+Use `queuerOptions` to share common options between different `Queuer` instances:
+
+```ts
+import { queuerOptions, Queuer } from '@tanstack/pacer'
+
+const sharedOptions = queuerOptions({
+  wait: 1000,
+  maxSize: 10,
+  onItemsChange: (queuer) => console.log('Items changed')
+})
+
+const queuer1 = new Queuer(fn1, { ...sharedOptions, key: 'queuer1' })
+const queuer2 = new Queuer(fn2, { ...sharedOptions, wait: 2000 })
+```
+
+### Additional Features
+
+The Queuer provides several helpful methods for queue management:
+
+```ts
+// Queue inspection
+queue.peekNextItem()           // View next item without removing it
+queue.store.state.size         // Get current queue size
+queue.store.state.isEmpty      // Check if queue is empty
+queue.store.state.isFull       // Check if queue has reached maxSize
+queue.peekAllItems()           // Get copy of all queued items
+
+// Queue manipulation
+queue.clear()                  // Remove all items
+queue.reset()                  // Reset to initial state
+queue.store.state.executionCount // Get number of processed items
+queue.flush()                  // Flush all pending items immediately
+
+// Event handling (use the onItemsChange option, not a method)
+// Example:
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    onItemsChange: (queuer) => {
+      console.log('Processed:', queuer.peekAllItems())
+    }
+  }
+)
+```
+
+### Item Expiration
+
+The Queuer supports automatic expiration of items that have been in the queue too long. This is useful for preventing stale data from being processed or for implementing timeouts on queued operations.
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    expirationDuration: 5000, // Items expire after 5 seconds
+    onExpire: (item, queuer) => {
+      console.log('Item expired:', item)
+    }
+  }
+)
+
+// Or use a custom expiration check
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    getIsExpired: (item, addedAt) => {
+      // Custom expiration logic
+      return Date.now() - addedAt > 5000
+    },
+    onExpire: (item, queuer) => {
+      console.log('Item expired:', item)
+    }
+  }
+)
+
+// Check expiration statistics
+console.log(queue.store.state.expirationCount) // Number of items that have expired
+```
+
+Expiration features are particularly useful for:
+- Preventing stale data from being processed
+- Implementing timeouts on queued operations
+- Managing memory usage by automatically removing old items
+- Handling temporary data that should only be valid for a limited time
+
+### Rejection Handling
+
+When a queue reaches its maximum size (set by `maxSize` option), new items will be rejected. The Queuer provides ways to handle and monitor these rejections:
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    maxSize: 2, // Only allow 2 items in queue
+    onReject: (item, queuer) => {
+      console.log('Queue is full. Item rejected:', item)
+    }
+  }
+)
+
+queue.addItem(1) // Accepted
+queue.addItem(2) // Accepted
+queue.addItem(3) // Rejected, triggers onReject callback
+
+console.log(queue.store.state.rejectionCount) // 1
+```
+
+### Initial Items
+
+You can pre-populate a queue with initial items when creating it:
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    initialItems: [1, 2, 3],
+    started: true // Start processing immediately
+  }
+)
+
+// Queue starts with [1, 2, 3] and begins processing
+```
+
+### Dynamic Configuration
+
+The Queuer's options can be modified after creation using `setOptions()`. Additionally, several options support dynamic values through callback functions:
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    wait: 1000,
+    started: false
+  }
+)
+
+// Change configuration
+queue.setOptions({
+  wait: 500, // Process items twice as fast
+  started: true // Start processing
+})
+
+// Access current state
+console.log(queue.store.state.size) // Current queue size
+console.log(queue.store.state.isRunning) // Whether queue is running
+```
+
+### Dynamic Options
+
+Several options in the Queuer support dynamic values through callback functions that receive the queuer instance:
+
+```ts
+const queue = new Queuer<number>(
+  (item) => {
+    // Process each item
+    console.log('Processing:', item)
+  },
+  {
+    // Dynamic wait time based on queue size
+    wait: (queuer) => {
+      return queuer.store.state.size > 10 ? 2000 : 1000
+    }
+  }
+)
+```
+
+The following options support dynamic values:
+- `wait`: Can be a number or a function that returns a number
+
+This allows for sophisticated queue behavior that adapts to runtime conditions.
+
+### Flushing Queue Items
+
+The queuer supports flushing items to process them immediately:
+
+```ts
+const queue = new Queuer(processFn, { wait: 5000 })
+
+queue.addItem('item1')
+queue.addItem('item2')
+console.log(queue.store.state.size) // 2
+
+// Flush all items immediately instead of waiting
+queue.flush()
+console.log(queue.store.state.size) // 0 (items were processed)
+
+// Or flush a specific number of items
+queue.addItem('item3')
+queue.addItem('item4')
+queue.addItem('item5')
+queue.flush(2) // Process only 2 items
+console.log(queue.store.state.size) // 1 (one item remaining)
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks stop the queuer by default when a component unmounts. Use the `onUnmount` option to flush instead.
+
+```tsx
+const queuer = useQueuer(fn, {
+  wait: 1000,
+  onUnmount: (q) => q.flush(),
+})
+```
+
+## State Management
+
+The `Queuer` class uses TanStack Store for reactive state management, providing real-time access to queue state, processing statistics, and concurrent task tracking. All state is stored in a TanStack Store and can be accessed via `queuer.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `queuer.state` along with providing a selector callback as the 3rd argument to the `useQueuer` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `queuer.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const queuer = useQueuer(processFn, { wait: 1000, maxSize: 10 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<queuer.Subscribe selector={(state) => ({ size: state.size })}>
+  {(state) => (
+    <div>Queue size: {state.size}</div>
+  )}
+</queuer.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `queuer.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const queue = useQueuer(processFn, { wait: 1000, maxSize: 10 })
+console.log(queue.state) // {}
+
+// Opt-in to re-render when size changes
+const queue = useQueuer(
+  processFn, 
+  { wait: 1000, maxSize: 10 },
+  (state) => ({ size: state.size })
+)
+console.log(queue.state.size) // Reactive value
+
+// Multiple state properties
+const queue = useQueuer(
+  processFn,
+  { wait: 1000, maxSize: 10 },
+  (state) => ({
+    size: state.size,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating a queuer. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('queuer-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const queue = new Queuer(processFn, {
+  wait: 1000,
+  maxSize: 10,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const queue = new Queuer(processFn, { wait: 1000, maxSize: 10 })
+
+// Subscribe to state changes
+const unsubscribe = queue.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `QueuerState` includes:
+
+- `addItemCount`: Number of times addItem has been called (for reduction calculations)
+- `executionCount`: Number of items that have been processed by the queuer
+- `expirationCount`: Number of items that have been removed from the queue due to expiration
+- `isEmpty`: Whether the queuer has no items to process (items array is empty)
+- `isFull`: Whether the queuer has reached its maximum capacity
+- `isIdle`: Whether the queuer is not currently processing any items
+- `isRunning`: Whether the queuer is active and will process items automatically
+- `items`: Array of items currently waiting to be processed
+- `itemTimestamps`: Timestamps when items were added to the queue for expiration tracking
+- `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+- `rejectionCount`: Number of items that have been rejected from being added to the queue
+- `size`: Number of items currently in the queue
+- `status`: Current processing status ('idle' | 'running' | 'stopped')
+
+### Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the queuer classes. Hooks like `useQueuer`, `useQueuedState`, and `useQueuedValue` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+---
+
+For asynchronous queuing, see the [Async Queuing Guide](/pacer/guides/async-queuing). 
\ No newline at end of file
diff --git a/mintlify/pacer/guides/rate-limiting.md b/mintlify/pacer/guides/rate-limiting.md
new file mode 100644
index 000000000..599416886
--- /dev/null
+++ b/mintlify/pacer/guides/rate-limiting.md
@@ -0,0 +1,356 @@
+---
+title: Rate Limiting Guide
+id: rate-limiting
+---
+
+Rate Limiting, Throttling, and Debouncing are three distinct approaches to controlling function execution frequency. Each technique blocks executions differently, making them "lossy" - meaning some function calls will not execute when they are requested to run too frequently. Understanding when to use each approach is crucial for building performant and reliable applications. This guide will cover the Rate Limiting concepts of TanStack Pacer.
+
+> [!NOTE]
+> TanStack Pacer is currently only a front-end library. These are utilities for client-side rate-limiting.
+
+## Rate Limiting Concept
+
+Rate Limiting is a technique that limits the rate at which a function can execute over a specific time window. It is particularly useful for scenarios where you want to prevent a function from being called too frequently, such as when handling API requests or other external service calls. It is the most *naive* approach, as it allows executions to happen in bursts until the quota is met.
+
+### Rate Limiting Visualization
+
+```text
+Rate Limiting (limit: 3 calls per window)
+Timeline: [1 second per tick]
+                                        Window 1                  |    Window 2            
+Calls:        ⬇️     ⬇️     ⬇️     ⬇️     ⬇️                             ⬇️     ⬇️
+Executed:     ✅     ✅     ✅     ❌     ❌                             ✅     ✅
+             [=== 3 allowed ===][=== blocked until window ends ===][=== new window =======]
+```
+
+### Window Types
+
+TanStack Pacer supports two types of rate limiting windows:
+
+1. **Fixed Window** (default)
+   - A strict window that resets after the window period
+   - All executions within the window count towards the limit
+   - The window resets completely after the period
+   - Can lead to bursty behavior at window boundaries
+
+2. **Sliding Window**
+   - A rolling window that allows executions as old ones expire
+   - Provides a more consistent rate of execution over time
+   - Better for maintaining a steady flow of executions
+   - Prevents bursty behavior at window boundaries
+
+Here's a visualization of sliding window rate limiting:
+
+```text
+Sliding Window Rate Limiting (limit: 3 calls per window)
+Timeline: [1 second per tick]
+                                        Window 1                  |    Window 2            
+Calls:        ⬇️     ⬇️     ⬇️     ⬇️     ⬇️                             ⬇️     ⬇️
+Executed:     ✅     ✅     ✅     ❌     ✅                             ✅     ✅
+             [=== 3 allowed ===][=== oldest expires, new allowed ===][=== continues sliding =======]
+```
+
+The key difference is that with a sliding window, as soon as the oldest execution expires, a new execution is allowed. This creates a more consistent flow of executions compared to the fixed window approach.
+
+### When to Use Rate Limiting
+
+Rate Limiting is particularly important when dealing with front-end operations that could accidentally overwhelm your back-end services or cause performance issues in the browser.
+
+### When Not to Use Rate Limiting
+
+Rate Limiting is the most naive approach to controlling function execution frequency. It is the least flexible and most restrictive of the three techniques. Consider using [throttling](/pacer/guides/throttling) or [debouncing](/pacer/guides/debouncing) instead for more spaced out executions.
+
+> [!TIP]
+> You most likely don't want to use "rate limiting" for most use cases. Consider using [throttling](/pacer/guides/throttling) or [debouncing](/pacer/guides/debouncing) instead. 
+
+Rate Limiting's "lossy" nature also means that some executions will be rejected and lost. This can be a problem if you need to ensure that all executions are always successful. Consider using [queuing](/pacer/guides/queuing) if you need to ensure that all executions are queued up to be executed, but with a throttled delay to slow down the rate of execution.
+
+## Rate Limiting in TanStack Pacer
+
+TanStack Pacer provides both synchronous and asynchronous rate limiting. This guide covers the synchronous `RateLimiter` class and `rateLimit` function. For async rate limiting, see the [Async Rate Limiting Guide](/pacer/guides/async-rate-limiting).
+
+### Basic Usage with `rateLimit`
+
+The `rateLimit` function is the simplest way to add rate limiting to any function. It's perfect for most use cases where you just need to enforce a simple limit.
+
+```ts
+import { rateLimit } from '@tanstack/pacer'
+
+// Rate limit API calls to 5 per minute
+const rateLimitedApi = rateLimit(
+  (id: string) => fetchUserData(id),
+  {
+    limit: 5,
+    window: 60 * 1000, // 1 minute in milliseconds
+    windowType: 'fixed', // default
+    onReject: (rateLimiter) => {
+      console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`)
+    }
+  }
+)
+
+// First 5 calls will execute immediately
+rateLimitedApi('user-1') // ✅ Executes
+rateLimitedApi('user-2') // ✅ Executes
+rateLimitedApi('user-3') // ✅ Executes
+rateLimitedApi('user-4') // ✅ Executes
+rateLimitedApi('user-5') // ✅ Executes
+rateLimitedApi('user-6') // ❌ Rejected until window resets
+```
+
+> **Note:** When using React, prefer `useRateLimitedCallback` hook over the `rateLimit` function for better integration with React's lifecycle and automatic cleanup.
+
+### Advanced Usage with `RateLimiter` Class
+
+For more complex scenarios where you need additional control over the rate limiting behavior, you can use the `RateLimiter` class directly. This gives you access to additional methods and state information.
+
+```ts
+import { RateLimiter } from '@tanstack/pacer'
+
+// Create a rate limiter instance
+const limiter = new RateLimiter(
+  (id: string) => fetchUserData(id),
+  {
+    limit: 5,
+    window: 60 * 1000,
+    onExecute: (rateLimiter) => {
+      console.log('Function executed', rateLimiter.store.state.executionCount)
+    },
+    onReject: (rateLimiter) => {
+      console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`)
+    }
+  }
+)
+
+// Access current state via TanStack Store
+console.log(limiter.getRemainingInWindow()) // Number of calls remaining in current window
+console.log(limiter.store.state.executionCount) // Total number of successful executions
+console.log(limiter.store.state.rejectionCount) // Total number of rejected executions
+
+// Attempt to execute (returns boolean indicating success)
+limiter.maybeExecute('user-1')
+
+// Update options dynamically
+limiter.setOptions({ limit: 10 }) // Increase the limit
+
+// Reset all counters and state
+limiter.reset()
+```
+
+### Sharing Options Between Instances
+
+Use `rateLimiterOptions` to share common options between different `RateLimiter` instances:
+
+```ts
+import { rateLimiterOptions, RateLimiter } from '@tanstack/pacer'
+
+const sharedOptions = rateLimiterOptions({
+  limit: 5,
+  window: 1000,
+  onExecute: (limiter) => console.log('Executed')
+})
+
+const limiter1 = new RateLimiter(fn1, { ...sharedOptions, key: 'limiter1' })
+const limiter2 = new RateLimiter(fn2, { ...sharedOptions, onReject: (limiter) => console.log('Rejected') })
+```
+
+### Enabling/Disabling
+
+The `RateLimiter` class supports enabling/disabling via the `enabled` option. Using the `setOptions` method, you can enable/disable the rate limiter at any time:
+
+> [!NOTE]
+> The `enabled` option enables/disables the actual function execution. Disabling the rate limiter does not turn off rate limiting, it just prevents the function from being executed at all.
+
+```ts
+const limiter = new RateLimiter(fn, { 
+  limit: 5, 
+  window: 1000,
+  enabled: false // Disable by default
+})
+limiter.setOptions({ enabled: true }) // Enable at any time
+```
+
+The `enabled` option can also be a function that returns a boolean, allowing for dynamic enabling/disabling based on runtime conditions:
+
+```ts
+const limiter = new RateLimiter(fn, {
+  limit: 5,
+  window: 1000,
+  enabled: (limiter) => {
+    return limiter.store.state.executionCount < 100 // Disable after 100 executions
+  }
+})
+```
+
+If you are using a framework adapter where the rate limiter options are reactive, you can set the `enabled` option to a conditional value to enable/disable the rate limiter on the fly. However, if you are using the `rateLimit` function or the `RateLimiter` class directly, you must use the `setOptions` method to change the `enabled` option, since the options that are passed are actually passed to the constructor of the `RateLimiter` class.
+
+### Dynamic Options
+
+Several options in the RateLimiter support dynamic values through callback functions that receive the rate limiter instance:
+
+```ts
+const limiter = new RateLimiter(fn, {
+  // Dynamic limit based on execution count
+  limit: (limiter) => {
+    return Math.max(1, 10 - limiter.store.state.executionCount) // Decrease limit with each execution
+  },
+  // Dynamic window based on execution count
+  window: (limiter) => {
+    return limiter.store.state.executionCount * 1000 // Increase window with each execution
+  },
+  // Dynamic enabled state based on execution count
+  enabled: (limiter) => {
+    return limiter.store.state.executionCount < 100 // Disable after 100 executions
+  }
+})
+```
+
+The following options support dynamic values:
+- `enabled`: Can be a boolean or a function that returns a boolean
+- `limit`: Can be a number or a function that returns a number
+- `window`: Can be a number or a function that returns a number
+
+This allows for sophisticated rate limiting behavior that adapts to runtime conditions.
+
+### Callback Options
+
+The synchronous `RateLimiter` supports the following callbacks:
+
+```ts
+const limiter = new RateLimiter(fn, {
+  limit: 5,
+  window: 1000,
+  onExecute: (rateLimiter) => {
+    // Called after each successful execution
+    console.log('Function executed', rateLimiter.store.state.executionCount)
+  },
+  onReject: (rateLimiter) => {
+    // Called when an execution is rejected
+    console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`)
+  }
+})
+```
+
+The `onExecute` callback is called after each successful execution of the rate-limited function, while the `onReject` callback is called when an execution is rejected due to rate limiting. These callbacks are useful for tracking executions, updating UI state, or providing feedback to users.
+
+## State Management
+
+The `RateLimiter` class uses TanStack Store for reactive state management, providing real-time access to execution state, error tracking, and rejection statistics. All state is stored in a TanStack Store and can be accessed via `limiter.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `limiter.state` along with providing a selector callback as the 3rd argument to the `useRateLimiter` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `rateLimiter.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const rateLimiter = useRateLimiter(fn, { limit: 5, window: 1000 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+  {(state) => (
+    <div>Rejections: {state.rejectionCount}</div>
+  )}
+</rateLimiter.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `rateLimiter.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const limiter = useRateLimiter(fn, { limit: 5, window: 1000 })
+console.log(limiter.state) // {}
+
+// Opt-in to re-render when rejectionCount changes
+const limiter = useRateLimiter(
+  fn, 
+  { limit: 5, window: 1000 },
+  (state) => ({ rejectionCount: state.rejectionCount })
+)
+console.log(limiter.state.rejectionCount) // Reactive value
+
+// Multiple state properties
+const limiter = useRateLimiter(
+  fn,
+  { limit: 5, window: 1000 },
+  (state) => ({
+    executionCount: state.executionCount,
+    rejectionCount: state.rejectionCount,
+    status: state.status
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating a rate limiter. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('rate-limiter-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const limiter = new RateLimiter(fn, {
+  limit: 5,
+  window: 1000,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const limiter = new RateLimiter(fn, { limit: 5, window: 1000 })
+
+// Subscribe to state changes
+const unsubscribe = limiter.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `RateLimiterState` includes:
+
+- `executionCount`: Number of function executions that have been completed
+- `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+- `isExceeded`: Whether the rate limiter has exceeded the limit
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+- `status`: Current execution status ('disabled' | 'exceeded' | 'idle')
+
+### Helper Methods
+
+The rate limiter provides helper methods that compute values based on the current state:
+
+```ts
+const limiter = new RateLimiter(fn, { limit: 5, window: 1000 })
+
+// These methods use the current state to compute values
+console.log(limiter.getRemainingInWindow()) // Number of calls remaining in current window
+console.log(limiter.getMsUntilNextWindow()) // Milliseconds until next window
+```
+
+These methods are computed values that use the current state and don't need to be accessed through the store.
+
+## Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the rate limiter classes. Hooks like `useRateLimiter`, or `createRateLimiter` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+---
+
+For asynchronous rate limiting (e.g., API calls, async operations), see the [Async Rate Limiting Guide](/pacer/guides/async-rate-limiting).
\ No newline at end of file
diff --git a/mintlify/pacer/guides/server-rate-limiting.md b/mintlify/pacer/guides/server-rate-limiting.md
new file mode 100644
index 000000000..74a1a55d1
--- /dev/null
+++ b/mintlify/pacer/guides/server-rate-limiting.md
@@ -0,0 +1,5 @@
+---
+title: Server Rate Limiting Guide
+id: server-rate-limiting
+---
+
diff --git a/mintlify/pacer/guides/throttling.md b/mintlify/pacer/guides/throttling.md
new file mode 100644
index 000000000..db0099272
--- /dev/null
+++ b/mintlify/pacer/guides/throttling.md
@@ -0,0 +1,325 @@
+---
+title: Throttling Guide
+id: throttling
+---
+
+Rate Limiting, Throttling, and Debouncing are three distinct approaches to controlling function execution frequency. Each technique blocks executions differently, making them "lossy" - meaning some function calls will not execute when they are requested to run too frequently. Understanding when to use each approach is crucial for building performant and reliable applications. This guide will cover the Throttling concepts of TanStack Pacer.
+
+## Throttling Concept
+
+Throttling ensures function executions are evenly spaced over time. Unlike rate limiting which allows bursts of executions up to a limit, or debouncing which waits for activity to stop, throttling creates a smoother execution pattern by enforcing consistent delays between calls. If you set a throttle of one execution per second, calls will be spaced out evenly regardless of how rapidly they are requested.
+
+### Throttling Visualization
+
+```text
+Throttling (one execution per 3 ticks)
+Timeline: [1 second per tick]
+Calls:        ⬇️  ⬇️  ⬇️           ⬇️  ⬇️  ⬇️  ⬇️             ⬇️
+Executed:     ✅  ❌  ⏳  ->   ✅  ❌  ❌  ❌  ✅             ✅ 
+             [=================================================================]
+             ^ Only one execution allowed per 3 ticks,
+               regardless of how many calls are made
+
+             [First burst]    [More calls]              [Spaced calls]
+             Execute first    Execute after             Execute each time
+             then throttle    wait period               wait period passes
+```
+
+### When to Use Throttling
+
+Throttling is particularly effective when you need consistent, predictable execution timing. This makes it ideal for handling frequent events or updates where you want smooth, controlled behavior.
+
+### When Not to Use Throttling
+
+Throttling might not be the best choice when:
+- You want to wait for activity to stop (use [debouncing](/pacer/guides/debouncing) instead)
+- You can't afford to miss any executions (use [queuing](/pacer/guides/queuing) instead)
+
+> [!TIP]
+> Throttling is often the best choice when you need smooth, consistent execution timing. It provides a more predictable execution pattern than rate limiting and more immediate feedback than debouncing.
+
+## Throttling in TanStack Pacer
+
+TanStack Pacer provides both synchronous and asynchronous throttling. This guide covers the synchronous `Throttler` class and `throttle` function. For async throttling, see the [Async Throttling Guide](/pacer/guides/async-throttling).
+
+### Basic Usage with `throttle`
+
+The `throttle` function is the simplest way to add throttling to any function:
+
+```ts
+import { throttle } from '@tanstack/pacer'
+
+// Throttle UI updates to once every 200ms
+const throttledUpdate = throttle(
+  (value: number) => updateProgressBar(value),
+  {
+    wait: 200,
+  }
+)
+
+// In a rapid loop, only executes every 200ms
+for (let i = 0; i < 100; i++) {
+  throttledUpdate(i) // Many calls get throttled
+}
+```
+
+> **Note:** When using React, prefer `useThrottledCallback` hook over the `throttle` function for better integration with React's lifecycle and automatic cleanup.
+
+### Advanced Usage with `Throttler` Class
+
+For more control over the throttling behavior, you can use the `Throttler` class directly:
+
+```ts
+import { Throttler } from '@tanstack/pacer'
+
+const updateThrottler = new Throttler(
+  (value: number) => updateProgressBar(value),
+  { wait: 200 }
+)
+
+// Access current state via TanStack Store
+console.log(updateThrottler.store.state.executionCount) // Number of successful executions
+console.log(updateThrottler.store.state.lastExecutionTime) // Timestamp of last execution
+console.log(updateThrottler.store.state.isPending) // Whether execution is pending
+console.log(updateThrottler.store.state.status) // Current execution status
+
+// Cancel any pending execution
+updateThrottler.cancel()
+
+// Flush pending execution immediately
+updateThrottler.flush()
+```
+
+### Leading and Trailing Executions
+
+The synchronous throttler supports both leading and trailing edge executions:
+
+```ts
+const throttledFn = throttle(fn, {
+  wait: 200,
+  leading: true,   // Execute on first call (default)
+  trailing: true,  // Execute after wait period (default)
+})
+```
+
+- `leading: true` (default) - Execute immediately on first call
+- `leading: false` - Skip first call, wait for trailing execution
+- `trailing: true` (default) - Execute last call after wait period
+- `trailing: false` - Skip last call if within wait period
+
+Common patterns:
+- `{ leading: true, trailing: true }` - Default, most responsive
+- `{ leading: false, trailing: true }` - Delay all executions
+- `{ leading: true, trailing: false }` - Skip queued executions
+
+### Sharing Options Between Instances
+
+Use `throttlerOptions` to share common options between different `Throttler` instances:
+
+```ts
+import { throttlerOptions, Throttler } from '@tanstack/pacer'
+
+const sharedOptions = throttlerOptions({
+  wait: 200,
+  leading: true,
+  trailing: true
+})
+
+const throttler1 = new Throttler(fn1, { ...sharedOptions, key: 'throttler1' })
+const throttler2 = new Throttler(fn2, { ...sharedOptions, wait: 300 })
+```
+
+### Enabling/Disabling
+
+The `Throttler` class supports enabling/disabling via the `enabled` option. Using the `setOptions` method, you can enable/disable the throttler at any time:
+
+```ts
+const throttler = new Throttler(fn, { wait: 200, enabled: false }) // Disable by default
+throttler.setOptions({ enabled: true }) // Enable at any time
+```
+
+The `enabled` option can also be a function that returns a boolean, allowing for dynamic enabling/disabling based on runtime conditions:
+
+```ts
+const throttler = new Throttler(fn, {
+  wait: 200,
+  enabled: (throttler) => {
+    return throttler.store.state.executionCount < 50 // Disable after 50 executions
+  }
+})
+```
+
+If you are using a framework adapter where the throttler options are reactive, you can set the `enabled` option to a conditional value to enable/disable the throttler on the fly. However, if you are using the `throttle` function or the `Throttler` class directly, you must use the `setOptions` method to change the `enabled` option, since the options that are passed are actually passed to the constructor of the `Throttler` class.
+
+### Dynamic Options
+
+Several options in the Throttler support dynamic values through callback functions that receive the throttler instance:
+
+```ts
+const throttler = new Throttler(fn, {
+  // Dynamic wait time based on execution count
+  wait: (throttler) => {
+    return throttler.store.state.executionCount * 100 // Increase wait time with each execution
+  },
+  // Dynamic enabled state based on execution count
+  enabled: (throttler) => {
+    return throttler.store.state.executionCount < 50 // Disable after 50 executions
+  }
+})
+```
+
+The following options support dynamic values:
+- `enabled`: Can be a boolean or a function that returns a boolean
+- `wait`: Can be a number or a function that returns a number
+
+This allows for sophisticated throttling behavior that adapts to runtime conditions.
+
+### Callback Options
+
+The synchronous `Throttler` supports the following callback:
+
+```ts
+const throttler = new Throttler(fn, {
+  wait: 200,
+  onExecute: (throttler) => {
+    // Called after each successful execution
+    console.log('Function executed', throttler.store.state.executionCount)
+  }
+})
+```
+
+The `onExecute` callback is called after each successful execution of the throttled function, making it useful for tracking executions, updating UI state, or performing cleanup operations.
+
+### Flushing Pending Executions
+
+The throttler supports flushing pending executions to trigger them immediately:
+
+```ts
+const throttler = new Throttler(fn, { wait: 1000 })
+
+throttler.maybeExecute('some-arg')
+console.log(throttler.store.state.isPending) // true
+
+// Flush immediately instead of waiting
+throttler.flush()
+console.log(throttler.store.state.isPending) // false
+```
+
+### Customizing Unmount Behavior
+
+Framework hooks cancel pending work by default when a component unmounts. Use the `onUnmount` option to flush instead.
+
+```tsx
+const throttler = useThrottler(fn, {
+  wait: 200,
+  onUnmount: (t) => t.flush(),
+})
+```
+
+## State Management
+
+The `Throttler` class uses TanStack Store for reactive state management, providing real-time access to execution state and timing information. All state is stored in a TanStack Store and can be accessed via `throttler.store.state`, although, if you are using a framework adapter like React or Solid, you will not want to read the state from here. Instead, you will read the state from `throttler.state` along with providing a selector callback as the 3rd argument to the `useThrottler` hook to opt-in to state tracking as shown below.
+
+### State Selector (Framework Adapters)
+
+Framework adapters support subscribing to state changes in two ways:
+
+**1. Using `throttler.Subscribe` component (Recommended for component tree subscriptions)**
+
+Use the `Subscribe` component to subscribe to state changes deep in your component tree without needing to pass a selector to the hook. This is ideal when you want to subscribe to state in child components.
+
+```tsx
+// Default behavior - no reactive state subscriptions at hook level
+const throttler = useThrottler(fn, { wait: 200 })
+
+// Subscribe to state changes deep in component tree using Subscribe component
+<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
+  {(state) => (
+    <div>{state.isPending ? 'Waiting...' : 'Ready'}</div>
+  )}
+</throttler.Subscribe>
+```
+
+**2. Using the `selector` parameter (For hook-level subscriptions)**
+
+The `selector` parameter allows you to specify which state changes will trigger reactive updates at the hook level, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.
+
+**By default, `throttler.state` is empty (`{}`) as the selector is empty by default.** This is where the selected slice of TanStack Store state is exposed. You must opt-in to state tracking by providing a selector function.
+
+```ts
+// Default behavior - no reactive state subscriptions
+const throttler = useThrottler(fn, { wait: 200 })
+console.log(throttler.state) // {}
+
+// Opt-in to re-render when isPending changes
+const throttler = useThrottler(
+  fn, 
+  { wait: 200 },
+  (state) => ({ isPending: state.isPending })
+)
+console.log(throttler.state.isPending) // Reactive value
+
+// Multiple state properties
+const throttler = useThrottler(
+  fn,
+  { wait: 200 },
+  (state) => ({
+    isPending: state.isPending,
+    executionCount: state.executionCount,
+    status: state.status
+  })
+)
+```
+
+### Initial State
+
+You can provide initial state values when creating a throttler. This is commonly used to restore state from persistent storage:
+
+```ts
+// Load initial state from localStorage
+const savedState = localStorage.getItem('throttler-state')
+const initialState = savedState ? JSON.parse(savedState) : {}
+
+const throttler = new Throttler(fn, {
+  wait: 200,
+  initialState
+})
+```
+
+### Subscribing to State Changes
+
+The store is reactive and supports subscriptions:
+
+```ts
+const throttler = new Throttler(fn, { wait: 200 })
+
+// Subscribe to state changes
+const unsubscribe = throttler.store.subscribe((state) => {
+  // do something with the state like persist it to localStorage
+})
+
+// Unsubscribe when done
+unsubscribe()
+```
+
+> **Note:** Framework adapters already subscribe through `useSelector` (React/Preact/Solid) or `injectSelector` (Angular) from TanStack Store. To subscribe manually, use `useSelector(store, selector, { compare: shallow })` from `@tanstack/react-store` (or `@tanstack/preact-store` / `@tanstack/solid-store`; import `shallow` from the same package), or `injectSelector(store, selector)` from `@tanstack/angular-store`.
+
+### Available State Properties
+
+The `ThrottlerState` includes:
+
+- `executionCount`: Number of function executions that have been completed
+- `isPending`: Whether the throttler is waiting for the timeout to trigger execution
+- `lastArgs`: The arguments from the most recent call to `maybeExecute`
+- `lastExecutionTime`: Timestamp of the last function execution in milliseconds
+- `maybeExecuteCount`: Number of times `maybeExecute` has been called
+- `nextExecutionTime`: Timestamp when the next execution can occur in milliseconds
+- `status`: Current execution status ('disabled' | 'idle' | 'pending')
+
+## Framework Adapters
+
+Each framework adapter builds convenient hooks and functions around the throttler classes. Hooks like `useThrottler`, or `createThrottler` are small wrappers that can cut down on the boilerplate needed in your own code for some common use cases.
+
+---
+
+For asynchronous throttling (e.g., API calls, async operations), see the [Async Throttling Guide](/pacer/guides/async-throttling).
\ No newline at end of file
diff --git a/mintlify/pacer/guides/which-pacer-utility-should-i-choose.md b/mintlify/pacer/guides/which-pacer-utility-should-i-choose.md
new file mode 100644
index 000000000..7ed9d5865
--- /dev/null
+++ b/mintlify/pacer/guides/which-pacer-utility-should-i-choose.md
@@ -0,0 +1,110 @@
+---
+title: Which Pacer Utility Should I Choose?
+id: which-pacer-utility-should-i-choose
+---
+
+TanStack Pacer provides 5 core utilities for controlling function execution frequency. Here is a one-sentence summary of each utility:
+
+ - [**Debouncer**](/pacer/guides/debouncing) - Executes a function after a period of inactivity. (Rejects other calls during activity)
+ - [**Throttler**](/pacer/guides/throttling) - Executes a function at regular intervals. (Rejects all but one call during each interval)
+ - [**Rate Limiter**](/pacer/guides/rate-limiting) - Prevents a function from being called too frequently. (Rejects calls when the limit is reached)
+ - [**Queuer**](/pacer/guides/queuing) - Processes all calls to a function in order. (Only rejects calls if the queue is full)
+ - [**Batcher**](/pacer/guides/batching) - Groups multiple function calls into a single batch. (No rejections)
+
+After choosing which strategy fits your needs, there are additional variations and decisions to consider. This guide provides quick clarifications on the most common decisions you'll need to make.
+
+## Synchronous vs Asynchronous
+
+You may see both a [Debouncer](/pacer/guides/debouncing) and an [Async Debouncer](/pacer/guides/async-debouncing) when first exploring TanStack Pacer. Which one should you use?
+
+Each utility comes in both synchronous and asynchronous versions. For most use cases, the simpler synchronous version is sufficient. However, if you need these utilities to handle async logic for you, the complexity of each utility increases significantly. The bundle size of the asynchronous versions of each utility is often more than double the size of the synchronous versions. If you actually need and use some of these additional APIs, the extra complexity is worth it, but don't choose the asynchronous version of a utility unless you actually end up using these features.
+
+> [!TIP] We recommend using the simpler synchronous version of each utility for most use cases. (Debouncer, Throttler, Rate Limiter, Queuer, Batcher)
+
+Luckily, switching between the synchronous and asynchronous versions of a utility is straightforward. For the most part, just replace the import whenever you decide you need to switch.
+
+### When to Use the Asynchronous Version
+
+Use the asynchronous version when you need any of these capabilities:
+
+- **Await Return Values**: Await and use the return value from your function, rather than just calling it for side effects. The synchronous version returns void, while the async version returns a Promise that resolves with your function's result. You can also await the return value to determine when to send another execution when execution order matters.
+
+- **Error Handling**: Built-in error handling with configurable error callbacks, control over whether errors are thrown or swallowed, and error statistics tracking.
+
+- **Extra Callbacks**: Instead of just an `onExecute` callback that comes with the synchronous version, the asynchronous version comes with additional callbacks such as `onSuccess`, `onError`, `onSettled`, and `onAbort`.
+
+- **Concurrency**: For queuing specifically, concurrency support allowing multiple items to be processed simultaneously while maintaining control over how many run at once.
+
+- **Retries and Aborts**: Built-in integration with `AsyncRetryer` for automatic retries of failed executions with configurable backoff strategies, jitter, and retry limits. Cancel in-flight operations using AbortController.
+
+## Pacer Lite vs Pacer
+
+Pacer Lite (`@tanstack/pacer-lite`) is a stripped-down version of the core TanStack Pacer library. It is designed to be used in libraries and npm packages that need minimal overhead and no reactivity features. The Lite version of each utility has the same core functionality as its core counterpart, but with a smaller API surface and a smaller bundle size. Pacer Lite lacks reactivity features, framework adapters, devtools support, and some of the advanced options that the core utilities have.
+
+If you are building an application, use the normal `@tanstack/pacer` package (or your framework adapter like `@tanstack/react-pacer` for React, `@tanstack/solid-pacer` for Solid, etc.). Only use Pacer Lite if you are building a library or npm package that needs to be as lightweight as possible and doesn't need the extra features of the core utilities.
+
+## Which Hook Variation Should I Use?
+
+We will use the Debouncer utility as the main example, but the same principles apply to all the other utilities.
+
+If you are using a framework adapter like React, you will see that there are lots of examples with multiple hook variations. For example, for debouncing you will see:
+
+- [`useDebouncer`](/pacer/framework/react/examples/useDebouncer)
+- [`useDebouncedCallback`](/pacer/framework/react/examples/useDebouncedCallback)
+- [`useDebouncedState`](/pacer/framework/react/examples/useDebouncedState)
+- [`useDebouncedValue`](/pacer/framework/react/examples/useDebouncedValue)
+
+You will also probably see that you can use the core `Debouncer` class directly or the core `debounce` function directly without using a hook.
+
+These are all variations of the same basic debouncing functionality. So, which one should you use?
+
+The answer is: It Depends! 🤷‍♂️
+
+But also: It doesn't really matter too much. They all do essentially the same thing. It's mostly a matter of personal preference and how you want to interact with the utility. Under the hood, a `Debouncer` instance is created no matter what you choose.
+
+You can start with the [`useDebouncer`](/pacer/framework/react/examples/useDebouncer) hook if you don't know which one to use. All of the others wrap the `useDebouncer` hook with different argument and return value signatures.
+
+```tsx
+import { useDebouncer } from '@tanstack/react-pacer'
+//...
+const debouncer = useDebouncer(fn, options)
+
+debouncer.maybeExecute(args) // execute the debounced function
+//...
+debouncer.cancel() // use Debouncer APIs with full access to the debouncer instance
+debouncer.flush()
+```
+
+If you only need to create a debounced function and don't need access to the debouncer instance to call methods or use its extra features, use the [`useDebouncedCallback`](/pacer/framework/react/examples/useDebouncedCallback) hook. The `*Callback` versions of the hooks are actually most similar to calling the core functions directly (like `debounce`) but with the memoization setup taken care of for you.
+
+```tsx
+import { useDebouncedCallback } from '@tanstack/react-pacer'
+//...
+const debouncedFn = useDebouncedCallback(fn, options)
+
+debouncedFn(args) // execute the debounced function
+//...
+```
+
+The other variations are convenience hooks that wrap the `useDebouncer` hook with different argument and return value signatures. For example, the [`useDebouncedState`](/pacer/framework/react/examples/useDebouncedState) hook is useful when you need to debounce a state value.
+
+```tsx
+import { useDebouncedState } from '@tanstack/react-pacer'
+//...
+const [debouncedValue, setDebouncedValue] = useDebouncedState(value, options)
+
+setDebouncedValue(newValue) // set the debounced value (will be debounced state setter)
+//...
+```
+
+The [`useDebouncedValue`](/pacer/framework/react/examples/useDebouncedValue) hook is useful when your debounced value is derived from an instant value that changes frequently.
+
+```tsx
+import { useDebouncedValue } from '@tanstack/react-pacer'
+//...
+const [instantValue, setInstantValue] = useState(0)
+const [debouncedValue] = useDebouncedValue(instantValue, options)
+//...
+setInstantValue(newValue) // Set the instant value; the debounced value will update automatically, delayed by the wait time
+//...
+```
\ No newline at end of file
diff --git a/mintlify/pacer/index.mdx b/mintlify/pacer/index.mdx
new file mode 100644
index 000000000..b1663fa1b
--- /dev/null
+++ b/mintlify/pacer/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Pacer"
+description: "Debouncing, throttling, rate limiting, and queuing. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Debouncing, throttling, rate limiting, and queuing.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/pacer/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/pacer">
+    Visit the canonical TanStack Pacer website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/pacer">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/pacer/installation.md b/mintlify/pacer/installation.md
new file mode 100644
index 000000000..b0897e703
--- /dev/null
+++ b/mintlify/pacer/installation.md
@@ -0,0 +1,55 @@
+---
+title: Installation
+id: installation
+---
+
+TanStack Pacer is compatible with various front-end frameworks. Install the corresponding adapter for your framework using your preferred package manager:
+
+
+
+react: @tanstack/react-pacer
+solid: @tanstack/solid-pacer
+angular: @tanstack/angular-pacer
+
+
+
+Each framework package re-exports everything from the core `@tanstack/pacer` package, so there is no need to install the core package separately.
+
+> [!NOTE]
+> If you are not using a framework, you can install the core `@tanstack/pacer` package directly for use with vanilla JavaScript.
+
+
+
+# React
+
+## Devtools
+
+Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter and the Pacer devtools plugin as dev dependencies to inspect and monitor your pacers.
+
+# Solid
+
+## Devtools
+
+Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter and the Pacer devtools plugin as dev dependencies to inspect and monitor your pacers.
+
+
+
+
+
+react: @tanstack/react-devtools
+react: @tanstack/react-pacer-devtools
+solid: @tanstack/solid-devtools
+solid: @tanstack/solid-pacer-devtools
+
+
+
+
+
+# React
+
+See the [devtools](/pacer/devtools) documentation for more information on how to set up and use the Pacer devtools.
+
+# Solid
+
+See the [devtools](/pacer/devtools) documentation for more information on how to set up and use the Pacer devtools.
+
diff --git a/mintlify/pacer/overview.md b/mintlify/pacer/overview.md
new file mode 100644
index 000000000..97c012a22
--- /dev/null
+++ b/mintlify/pacer/overview.md
@@ -0,0 +1,73 @@
+---
+title: Overview
+id: overview
+---
+
+TanStack Pacer is a library focused on providing high-quality utilities for controlling function execution timing in your applications. While similar utilities exist elsewhere, we aim to get all the important details right - including ***type-safety***, ***tree-shaking***, and a consistent and ***intuitive API***. By focusing on these fundamentals and making them available in a ***framework agnostic*** way, we hope to make these utilities and patterns more commonplace in your applications. Proper execution control is often an afterthought in application development, leading to performance issues, race conditions, and poor user experiences that could have been prevented. TanStack Pacer helps you implement these critical patterns correctly from the start!
+
+> [!IMPORTANT]
+> TanStack Pacer is currently in **beta** and its API is still subject to change.
+>
+> The scope of this library may grow, but we hope to keep the bundle size of each individual utility lean and focused.
+
+## Origin
+
+Many of the ideas (and code) for TanStack Pacer are not new. In fact, many of these utilities have been living in other TanStack libraries for quite some time. We extracted code from TanStack Query, Router, Form, and even Tanner's original [Swimmer](https://github.com/tannerlinsley/swimmer) library. Then we cleaned up these utilities, filled in some gaps, and shipped them as a standalone library.
+
+## Features
+
+> [!NOTE]
+> TanStack Pacer is currently mostly a client-side only library, but it is being designed to be able to potentially be used on the server-side as well.
+
+- **Debouncing**
+  - Delay execution until after a period of inactivity for when you only care about the last execution in a sequence.
+  - Synchronous or Asynchronous Debounce utilities with promise support and error handling
+  - Control of leading, trailing, and enabled options
+- **Throttling**
+  - Smoothly limit the rate at which a function can fire
+  - Synchronous or Asynchronous Throttle utilities with promise support and error handling
+  - Control of leading, trailing, and enabled options.
+- **Rate Limiting**
+  - Limit the rate at which a function can fire over a period of time
+  - Synchronous or Asynchronous Rate Limiting utilities with promise support and error handling
+  - Fixed or Sliding Window variations of Rate Limiting
+- **Queuing**
+  - Queue functions to be executed in a specific order
+  - Choose from FIFO, LIFO, and Priority queue implementations
+  - Control processing speed with configurable wait times or concurrency limits
+  - Manage queue execution with start/stop capabilities
+  - Expire items from the queue after a configurable duration
+- **Batching**
+  - Chunk up multiple operations into larger batches to reduce total back-and-forth operations
+  - Batch by time period, batch size, whichever comes first, or a custom condition to trigger batch executions
+- **Async or Sync Variations**
+  - Choose between synchronous and asynchronous versions of each utility
+  - Optional error, success, and settled handling for async variations
+  - Retry and Abort support for async variations
+- **State Management**
+  - Uses TanStack Store under the hood for state management with fine-grained reactivity
+  - Easily integrate with your own state management library of choice
+  - Persist state to local or session storage for some utilities like rate limiting and queuing
+- **Convenient Hooks**
+  - Reduce boilerplate code with pre-built hooks like `useDebouncedCallback`, `useThrottledValue`, and `useQueuedState`, and more.
+  - Multiple layers of abstraction to choose from depending on your use case.
+  - Works with each framework's default state management solutions, or with whatever custom state management library that you prefer.
+- **Type Safety**
+  - Full type safety with TypeScript that makes sure that your functions will always be called with the correct arguments
+  - Generics for flexible and reusable utilities
+- **Framework Adapters**
+  - React, Solid, and more
+- **Tree Shaking**
+  - We, of course, get tree-shaking right for your applications by default, but we also provide extra deep imports for each utility, making it easier to embed these utilities into your libraries without increasing the bundle-phobia reports of your library.
+
+## Interactive Comparison Demo
+
+Each utility is designed to be used in a specific way, and each utility has its own unique behavior.
+
+See how each utility behaves with this interactive comparison. Move the range slider to observe the differences between debouncing, throttling, rate limiting, queuing, and batching:
+
+<iframe src="https://stackblitz.com/github/TanStack/pacer/tree/main/examples/react/util-comparison?embed=1&view=preview&hideNavigation=1" width="100%" height="1200px" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>
+
+## Pacer Lite
+
+Pacer Lite (`@tanstack/pacer-lite`) is a stripped down version of the core TanStack Pacer library. It is designed to be used in libraries and npm packages that need minimal overhead, and no reactivity features. The Lite version of each utility has the same core functionality of its core counterpart, but is stripped down to have a slightly smaller API surface and a smaller bundle size. Pacer Lite lacks reactivity features, framework adapters, devtools support, and some of the advanced options that the core utilities have. If that sounds interesting to you, you can feel free to try it out!
\ No newline at end of file
diff --git a/mintlify/pacer/quick-start.md b/mintlify/pacer/quick-start.md
new file mode 100644
index 000000000..81ffc3810
--- /dev/null
+++ b/mintlify/pacer/quick-start.md
@@ -0,0 +1,89 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+## Installation
+
+Don't have TanStack Pacer installed yet? See the [Installation](/pacer/installation) page for instructions.
+
+## Understanding Which Pacer Utility to Use
+
+Still learning what TanStack Pacer is and how it can help your application? See the [Which Pacer Utility Should I Choose?](/pacer/guides/which-pacer-utility-should-i-choose) guide for help choosing which Pacer utility to use. The TanStack Pacer libraries have 5 core utilities, but also quite a few flexible ways to use each utility. Famarilizing yourself with the above guide will help you choose the right utility for your use case.
+
+## API References
+
+See the [API References](/pacer/reference/index) page for the full list of API references for each Pacer utility.
+
+## Basic Usage
+
+If you are using vanilla JavaScript, there are core classes and functions that you can use from the core pacer package.
+
+### Class Usage
+
+```ts
+import { Debouncer } from '@tanstack/pacer' // class
+
+const debouncer = new Debouncer(fn, options)
+
+debouncer.maybeExecute(args) // execute the debounced function
+debouncer.cancel() // cancel the debounced function
+debouncer.flush() // flush the debounced function
+```
+
+### Function Usage
+
+```ts
+import { debounce } from '@tanstack/pacer' // function
+
+const debouncedFn = debounce(fn, options)
+
+debouncedFn(args) // execute the debounced function
+```
+
+### Framework Hook Usage (Recommended)
+
+If you are using a framework adapter like React, you can use the `useDebouncer` hook to create a debounced function.
+
+```tsx
+import { useDebouncer } from '@tanstack/react-pacer'
+
+const debouncer = useDebouncer(fn, options) // recommended
+
+debouncer.maybeExecute(args) // execute the debounced function
+debouncer.cancel() // cancel the debounced function
+debouncer.flush() // flush the debounced function
+```
+
+### Option Helpers
+
+If want a type-safe way to define common options for pacer utilities, TanStack Pacer provides option helpers for each utility.
+
+```ts
+import { debouncerOptions } from '@tanstack/pacer'
+
+const commonDebouncerOptions = debouncerOptions({
+  wait: 1000,
+  leading: false,
+  trailing: true,
+})
+
+const debouncer = new Debouncer(fn, { ...commonDebouncerOptions, key: 'myDebouncer' })
+```
+
+### Providers
+
+In each framework adapter, there is a provider component that you can use to provide default options to all instances of a pacer utility.
+
+```tsx
+import { PacerProvider } from '@tanstack/react-pacer'
+
+// set default options for react-pacer instances
+<PacerProvider defaultOptions={{ debouncer: { wait: 1000 } }}>
+  <App />
+</PacerProvider>
+```
+
+### Devtools
+
+TanStack Pacer provides an official TanStack Devtools integration for each framework adapter. See the [Devtools](/pacer/devtools) documentation for more information on how to set up and use the Pacer devtools.
\ No newline at end of file
diff --git a/mintlify/pacer/reference/classes/AsyncBatcher.md b/mintlify/pacer/reference/classes/AsyncBatcher.md
new file mode 100644
index 000000000..f294b5b00
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncBatcher.md
@@ -0,0 +1,375 @@
+---
+id: AsyncBatcher
+title: AsyncBatcher
+---
+
+# Class: AsyncBatcher\&lt;TValue\>
+
+Defined in: [async-batcher.ts:265](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L265)
+
+A class that collects items and processes them in batches asynchronously.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync Batcher:
+- Returns promises that can be awaited for batch results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight batch executions
+- Cancel support to prevent pending batches from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+
+The sync Batcher is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Batching?
+Batching is a technique for grouping multiple operations together to be processed as a single unit.
+
+The AsyncBatcher provides a flexible way to implement async batching with configurable:
+- Maximum batch size (number of items per batch)
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+- Error handling for failed batch operations
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error, the batch of items that failed, and batcher instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the AsyncBatcher instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async batcher
+- Use `onSuccess` callback to react to successful batch execution and implement custom logic
+- Use `onError` callback to react to batch execution errors and implement custom error handling
+- Use `onSettled` callback to react to batch execution completion (success or error) and implement custom logic
+- Use `onExecute` callback to react to batch execution and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the batcher
+- The state includes total items processed, success/error counts, and execution status
+- State can be accessed via `asyncBatcher.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `asyncBatcher.state`
+
+## Example
+
+```ts
+const batcher = new AsyncBatcher<number>(
+  async (items) => {
+    const result = await processItems(items);
+    console.log('Processing batch:', items);
+    return result;
+  },
+  {
+    maxSize: 5,
+    wait: 2000,
+    onSuccess: (result) => console.log('Batch succeeded:', result),
+    onError: (error) => console.error('Batch failed:', error)
+  }
+);
+
+batcher.addItem(1);
+batcher.addItem(2);
+// After 2 seconds or when 5 items are added, whichever comes first,
+// the batch will be processed and the result will be available
+// batcher.execute() // manually trigger a batch
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncBatcher<TValue>(fn, initialOptions): AsyncBatcher<TValue>;
+```
+
+Defined in: [async-batcher.ts:277](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L277)
+
+#### Parameters
+
+##### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+##### initialOptions
+
+[`AsyncBatcherOptions`](/pacer/reference/interfaces/AsyncBatcherOptions)\&lt;`TValue`\>
+
+#### Returns
+
+`AsyncBatcher`\&lt;`TValue`\>
+
+## Properties
+
+### asyncRetryers
+
+```ts
+asyncRetryers: Map<number, AsyncRetryer<(items) => Promise<any>>>;
+```
+
+Defined in: [async-batcher.ts:271](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L271)
+
+***
+
+### fn()
+
+```ts
+fn: (items) => Promise<any>;
+```
+
+Defined in: [async-batcher.ts:278](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L278)
+
+#### Parameters
+
+##### items
+
+`TValue`[]
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-batcher.ts:269](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L269)
+
+***
+
+### options
+
+```ts
+options: AsyncBatcherOptionsWithOptionalCallbacks<TValue>;
+```
+
+Defined in: [async-batcher.ts:270](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L270)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncBatcherState<TValue>>>;
+```
+
+Defined in: [async-batcher.ts:266](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L266)
+
+## Methods
+
+### abort()
+
+```ts
+abort(): void;
+```
+
+Defined in: [async-batcher.ts:494](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L494)
+
+Aborts all ongoing executions with the internal abort controllers.
+Does NOT cancel any pending execution that have not started yet.
+Does NOT clear out the items.
+
+#### Returns
+
+`void`
+
+***
+
+### addItem()
+
+```ts
+addItem(item): Promise<any>;
+```
+
+Defined in: [async-batcher.ts:346](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L346)
+
+Adds an item to the async batcher
+If the batch size is reached, timeout occurs, or shouldProcess returns true, the batch will be processed
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+The result from the batch function, or undefined if an error occurred and was handled by onError
+
+#### Throws
+
+The error from the batch function if no onError handler is configured or throwOnError is true
+
+***
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [async-batcher.ts:507](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L507)
+
+Cancels any pending execution that have not started yet.
+Does NOT abort any execution already in progress.
+Does NOT clear out the items.
+
+#### Returns
+
+`void`
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [async-batcher.ts:455](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L455)
+
+Removes all items from the async batcher
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): Promise<any>;
+```
+
+Defined in: [async-batcher.ts:429](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L429)
+
+Processes the current batch of items immediately
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(executeCount?): AbortSignal | null;
+```
+
+Defined in: [async-batcher.ts:483](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L483)
+
+Returns the AbortSignal for a specific execution.
+If no executeCount is provided, returns the signal for the most recent execution.
+Returns null if no execution is found or not currently executing.
+
+#### Parameters
+
+##### executeCount?
+
+`number`
+
+Optional specific execution to get signal for
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const batcher = new AsyncBatcher(
+  async (items: string[]) => {
+    const signal = batcher.getAbortSignal()
+    if (signal) {
+      const response = await fetch('/api/batch', {
+        method: 'POST',
+        body: JSON.stringify(items),
+        signal
+      })
+      return response.json()
+    }
+  },
+  { maxSize: 10, wait: 100 }
+)
+```
+
+***
+
+### peekAllItems()
+
+```ts
+peekAllItems(): TValue[];
+```
+
+Defined in: [async-batcher.ts:437](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L437)
+
+Returns a copy of all items in the async batcher
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### peekFailedItems()
+
+```ts
+peekFailedItems(): TValue[];
+```
+
+Defined in: [async-batcher.ts:441](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L441)
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-batcher.ts:517](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L517)
+
+Resets the async batcher state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-batcher.ts:305](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L305)
+
+Updates the async batcher options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncBatcherOptions`](/pacer/reference/interfaces/AsyncBatcherOptions)\&lt;`TValue`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/AsyncDebouncer.md b/mintlify/pacer/reference/classes/AsyncDebouncer.md
new file mode 100644
index 000000000..dabcb5fe3
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncDebouncer.md
@@ -0,0 +1,307 @@
+---
+id: AsyncDebouncer
+title: AsyncDebouncer
+---
+
+# Class: AsyncDebouncer\&lt;TFn\>
+
+Defined in: [async-debouncer.ts:218](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L218)
+
+A class that creates an async debounced function.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync Debouncer:
+- Returns promises that can be awaited for debounced function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Cancel support to prevent pending executions from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+
+The sync Debouncer is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Debouncing?
+Debouncing ensures that a function is only executed after a specified delay has passed since its last invocation.
+Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing
+or input changes where you only want to execute the handler after the events have stopped occurring.
+
+Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until
+the function stops being called for the specified delay period.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and debouncer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying store
+
+State Management:
+- The debouncer uses a reactive store for state management
+- Use `initialState` to provide initial state values when creating the async debouncer
+- The state includes canLeadingExecute, error count, execution status, and success/settle counts
+- State can be accessed via the `store` property and its `state` getter
+- The store is reactive and will notify subscribers of state changes
+
+## Example
+
+```ts
+const asyncDebouncer = new AsyncDebouncer(async (value: string) => {
+  const results = await searchAPI(value);
+  return results; // Return value is preserved
+}, {
+  wait: 500,
+  onError: (error) => {
+    console.error('Search failed:', error);
+  }
+});
+
+// Called on each keystroke but only executes after 500ms of no typing
+// Returns the API response directly
+const results = await asyncDebouncer.maybeExecute(inputElement.value);
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncDebouncer<TFn>(fn, initialOptions): AsyncDebouncer<TFn>;
+```
+
+Defined in: [async-debouncer.ts:230](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L230)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`AsyncDebouncerOptions`](/pacer/reference/interfaces/AsyncDebouncerOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`AsyncDebouncer`\&lt;`TFn`\>
+
+## Properties
+
+### asyncRetryers
+
+```ts
+asyncRetryers: Map<number, AsyncRetryer<TFn>>;
+```
+
+Defined in: [async-debouncer.ts:224](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L224)
+
+***
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [async-debouncer.ts:231](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L231)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-debouncer.ts:222](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L222)
+
+***
+
+### options
+
+```ts
+options: AsyncDebouncerOptions<TFn>;
+```
+
+Defined in: [async-debouncer.ts:223](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L223)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
+```
+
+Defined in: [async-debouncer.ts:219](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L219)
+
+## Methods
+
+### abort()
+
+```ts
+abort(): void;
+```
+
+Defined in: [async-debouncer.ts:469](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L469)
+
+Aborts all ongoing executions with the internal abort controllers.
+Does NOT cancel any pending execution that have not started yet.
+
+#### Returns
+
+`void`
+
+***
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [async-debouncer.ts:481](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L481)
+
+Cancels any pending execution that have not started yet.
+Does NOT abort any execution already in progress.
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-debouncer.ts:404](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L404)
+
+Processes the current pending execution immediately
+
+#### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(maybeExecuteCount?): AbortSignal | null;
+```
+
+Defined in: [async-debouncer.ts:459](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L459)
+
+Returns the AbortSignal for a specific execution.
+If no maybeExecuteCount is provided, returns the signal for the most recent execution.
+Returns null if no execution is found or not currently executing.
+
+#### Parameters
+
+##### maybeExecuteCount?
+
+`number`
+
+Optional specific execution to get signal for
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const debouncer = new AsyncDebouncer(
+  async (searchTerm: string) => {
+    const signal = debouncer.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/search?q=${searchTerm}`, { signal })
+      return response.json()
+    }
+  },
+  { wait: 300 }
+)
+```
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-debouncer.ts:318](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L318)
+
+Attempts to execute the debounced function.
+If a call is already in progress, it will be queued.
+
+Error Handling:
+- If the debounced function throws and no `onError` handler is configured,
+  the error will be thrown from this method.
+- If an `onError` handler is configured, errors will be caught and passed to the handler,
+  and this method will return undefined.
+- The error state can be checked using `getErrorCount()` and `getIsExecuting()`.
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+A promise that resolves with the function's return value, or undefined if an error occurred and was handled by onError
+
+#### Throws
+
+The error from the debounced function if no onError handler is configured
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-debouncer.ts:489](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L489)
+
+Resets the debouncer state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-debouncer.ts:258](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L258)
+
+Updates the async debouncer options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncDebouncerOptions`](/pacer/reference/interfaces/AsyncDebouncerOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/AsyncQueuer.md b/mintlify/pacer/reference/classes/AsyncQueuer.md
new file mode 100644
index 000000000..a2bd6979a
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncQueuer.md
@@ -0,0 +1,536 @@
+---
+id: AsyncQueuer
+title: AsyncQueuer
+---
+
+# Class: AsyncQueuer\&lt;TValue\>
+
+Defined in: [async-queuer.ts:315](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L315)
+
+A flexible asynchronous queue for processing tasks with configurable concurrency, priority, and expiration.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync Queuer:
+- Returns promises that can be awaited for task results
+- Built-in retry support via AsyncRetryer integration for each queued task
+- Abort support to cancel in-flight task executions
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+- Concurrent execution support (process multiple items simultaneously)
+
+The sync Queuer is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Queuing?
+Queuing is a technique for managing and processing items sequentially or with controlled concurrency.
+Tasks are processed up to the configured concurrency limit. When a task completes,
+the next pending task is processed if the concurrency limit allows.
+
+Key Features:
+- Priority queue support via the getPriority option
+- Configurable concurrency limit
+- Callbacks for task success, error, completion, and queue state changes
+- FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+- Pause and resume processing
+- Item expiration to remove stale items from the queue
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and queuer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together; the handler will be called before any error is thrown
+- The error state can be checked using the AsyncQueuer instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async queuer
+- Use `onSuccess` callback to react to successful task execution and implement custom logic
+- Use `onError` callback to react to task execution errors and implement custom error handling
+- Use `onSettled` callback to react to task execution completion (success or error) and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the queue
+- Use `onExpire` callback to react to items expiring and implement custom logic
+- Use `onReject` callback to react to items being rejected when the queue is full
+- The state includes error count, expiration count, rejection count, running status, and success/settle counts
+- State can be accessed via `asyncQueuer.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `asyncQueuer.state`
+
+Example usage:
+```ts
+const asyncQueuer = new AsyncQueuer<string>(async (item) => {
+  // process item
+  return item.toUpperCase();
+}, {
+  concurrency: 2,
+  onSuccess: (result) => {
+    console.log(result);
+  }
+});
+
+asyncQueuer.addItem('hello');
+asyncQueuer.start();
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncQueuer<TValue>(fn, initialOptions): AsyncQueuer<TValue>;
+```
+
+Defined in: [async-queuer.ts:327](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L327)
+
+#### Parameters
+
+##### fn
+
+(`item`) => `Promise`\&lt;`any`\>
+
+##### initialOptions
+
+[`AsyncQueuerOptions`](/pacer/reference/interfaces/AsyncQueuerOptions)\&lt;`TValue`\> = `{}`
+
+#### Returns
+
+`AsyncQueuer`\&lt;`TValue`\>
+
+## Properties
+
+### asyncRetryers
+
+```ts
+asyncRetryers: Map<number, AsyncRetryer<(item) => Promise<any>>>;
+```
+
+Defined in: [async-queuer.ts:321](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L321)
+
+***
+
+### fn()
+
+```ts
+fn: (item) => Promise<any>;
+```
+
+Defined in: [async-queuer.ts:328](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L328)
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-queuer.ts:319](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L319)
+
+***
+
+### options
+
+```ts
+options: AsyncQueuerOptions<TValue>;
+```
+
+Defined in: [async-queuer.ts:320](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L320)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;
+```
+
+Defined in: [async-queuer.ts:316](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L316)
+
+## Methods
+
+### abort()
+
+```ts
+abort(): void;
+```
+
+Defined in: [async-queuer.ts:836](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L836)
+
+Aborts all ongoing executions with the internal abort controllers.
+Does NOT clear out the items.
+
+#### Returns
+
+`void`
+
+***
+
+### addItem()
+
+```ts
+addItem(
+   item, 
+   position, 
+   runOnItemsChange): boolean;
+```
+
+Defined in: [async-queuer.ts:474](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L474)
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+##### runOnItemsChange
+
+`boolean` = `true`
+
+#### Returns
+
+`boolean`
+
+#### Example
+
+```ts
+queuer.addItem({ value: 'task', priority: 10 });
+queuer.addItem('task2', 'front');
+```
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [async-queuer.ts:801](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L801)
+
+Removes all pending items from the queue.
+Does NOT affect active tasks.
+
+#### Returns
+
+`void`
+
+***
+
+### execute()
+
+```ts
+execute(position?): Promise<any>;
+```
+
+Defined in: [async-queuer.ts:609](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L609)
+
+Removes and returns the next item from the queue and executes the task function with it.
+
+#### Parameters
+
+##### position?
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition)
+
+#### Returns
+
+`Promise`\&lt;`any`\>
+
+#### Example
+
+```ts
+queuer.execute();
+// LIFO
+queuer.execute('back');
+```
+
+***
+
+### flush()
+
+```ts
+flush(numberOfItems, position?): Promise<void>;
+```
+
+Defined in: [async-queuer.ts:657](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L657)
+
+Processes a specified number of items to execute immediately with no wait time
+If no numberOfItems is provided, all items will be processed
+
+#### Parameters
+
+##### numberOfItems
+
+`number` = `...`
+
+##### position?
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition)
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### flushAsBatch()
+
+```ts
+flushAsBatch(batchFunction): Promise<void>;
+```
+
+Defined in: [async-queuer.ts:671](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L671)
+
+Processes all items in the queue as a batch using the provided function as an argument
+The queue is cleared after processing
+
+#### Parameters
+
+##### batchFunction
+
+(`items`) => `Promise`\&lt;`any`\>
+
+#### Returns
+
+`Promise`\&lt;`void`\>
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(executeCount?): AbortSignal | null;
+```
+
+Defined in: [async-queuer.ts:826](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L826)
+
+Returns the AbortSignal for a specific execution.
+If no executeCount is provided, returns the signal for the most recent execution.
+Returns null if no execution is found or not currently executing.
+
+#### Parameters
+
+##### executeCount?
+
+`number`
+
+Optional specific execution to get signal for
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const queuer = new AsyncQueuer(
+  async (item: string) => {
+    const signal = queuer.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/process/${item}`, { signal })
+      return response.json()
+    }
+  },
+  { concurrency: 2 }
+)
+```
+
+***
+
+### getNextItem()
+
+```ts
+getNextItem(position): TValue | undefined;
+```
+
+Defined in: [async-queuer.ts:557](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L557)
+
+Removes and returns the next item from the queue without executing the task function.
+Use for manual queue management. Normally, use execute() to process items.
+
+#### Parameters
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+#### Returns
+
+`TValue` \| `undefined`
+
+#### Example
+
+```ts
+// FIFO
+queuer.getNextItem();
+// LIFO
+queuer.getNextItem('back');
+```
+
+***
+
+### peekActiveItems()
+
+```ts
+peekActiveItems(): TValue[];
+```
+
+Defined in: [async-queuer.ts:763](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L763)
+
+Returns the items currently being processed (active tasks).
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### peekAllItems()
+
+```ts
+peekAllItems(): TValue[];
+```
+
+Defined in: [async-queuer.ts:756](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L756)
+
+Returns a copy of all items in the queue, including active and pending items.
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### peekNextItem()
+
+```ts
+peekNextItem(position): TValue | undefined;
+```
+
+Defined in: [async-queuer.ts:746](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L746)
+
+Returns the next item in the queue without removing it.
+
+#### Parameters
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `'front'`
+
+#### Returns
+
+`TValue` \| `undefined`
+
+#### Example
+
+```ts
+queuer.peekNextItem(); // front
+queuer.peekNextItem('back'); // back
+```
+
+***
+
+### peekPendingItems()
+
+```ts
+peekPendingItems(): TValue[];
+```
+
+Defined in: [async-queuer.ts:770](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L770)
+
+Returns the items waiting to be processed (pending tasks).
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-queuer.ts:847](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L847)
+
+Resets the queuer state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-queuer.ts:372](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L372)
+
+Updates the queuer options. New options are merged with existing options.
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncQueuerOptions`](/pacer/reference/interfaces/AsyncQueuerOptions)\&lt;`TValue`\>\>
+
+#### Returns
+
+`void`
+
+***
+
+### start()
+
+```ts
+start(): void;
+```
+
+Defined in: [async-queuer.ts:777](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L777)
+
+Starts processing items in the queue. If already running, does nothing.
+
+#### Returns
+
+`void`
+
+***
+
+### stop()
+
+```ts
+stop(): void;
+```
+
+Defined in: [async-queuer.ts:787](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L787)
+
+Stops processing items in the queue. Does not clear the queue.
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/AsyncRateLimiter.md b/mintlify/pacer/reference/classes/AsyncRateLimiter.md
new file mode 100644
index 000000000..a6cd624b5
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncRateLimiter.md
@@ -0,0 +1,340 @@
+---
+id: AsyncRateLimiter
+title: AsyncRateLimiter
+---
+
+# Class: AsyncRateLimiter\&lt;TFn\>
+
+Defined in: [async-rate-limiter.ts:245](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L245)
+
+A class that creates an async rate-limited function.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync RateLimiter:
+- Returns promises that can be awaited for rate-limited function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts, rejection counts)
+- More sophisticated window management with automatic cleanup
+
+The sync RateLimiter is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Rate Limiting?
+Rate limiting allows a function to execute up to a limit within a time window,
+then blocks all subsequent calls until the window passes. This can lead to "bursty" behavior where
+all executions happen immediately, followed by a complete block.
+
+Window Types:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+When to Use Rate Limiting:
+Rate limiting is best used for hard API limits or resource constraints. For UI updates or
+smoothing out frequent events, throttling or debouncing usually provide better user experience.
+- Throttling: Ensures consistent spacing between executions (e.g. max once per 200ms)
+- Debouncing: Waits for a pause in calls before executing (e.g. after 500ms of no calls)
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the rate limiter
+- `initialState` can be a partial state object
+- Use `onSuccess` callback to react to successful function execution and implement custom logic
+- Use `onError` callback to react to function execution errors and implement custom error handling
+- Use `onSettled` callback to react to function execution completion (success or error) and implement custom logic
+- Use `onReject` callback to react to executions being rejected when rate limit is exceeded
+- The state includes execution times, success/error counts, and current execution status
+- State can be accessed via `asyncRateLimiter.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `asyncRateLimiter.state`
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and rate limiter instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncRateLimiter instance
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+## Example
+
+```ts
+const rateLimiter = new AsyncRateLimiter(
+  async (id: string) => await api.getData(id),
+  {
+    limit: 5,
+    window: 1000,
+    windowType: 'sliding',
+    onError: (error) => {
+      console.error('API call failed:', error);
+    },
+    onReject: (limiter) => {
+      console.log(`Rate limit exceeded. Try again in ${limiter.getMsUntilNextWindow()}ms`);
+    }
+  }
+);
+
+// Will execute immediately until limit reached, then block
+// Returns the API response directly
+const data = await rateLimiter.maybeExecute('123');
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncRateLimiter<TFn>(fn, initialOptions): AsyncRateLimiter<TFn>;
+```
+
+Defined in: [async-rate-limiter.ts:254](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L254)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`AsyncRateLimiterOptions`](/pacer/reference/interfaces/AsyncRateLimiterOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`AsyncRateLimiter`\&lt;`TFn`\>
+
+## Properties
+
+### asyncRetryers
+
+```ts
+asyncRetryers: Map<number, AsyncRetryer<TFn>>;
+```
+
+Defined in: [async-rate-limiter.ts:251](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L251)
+
+***
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [async-rate-limiter.ts:255](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L255)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-rate-limiter.ts:249](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L249)
+
+***
+
+### options
+
+```ts
+options: AsyncRateLimiterOptions<TFn>;
+```
+
+Defined in: [async-rate-limiter.ts:250](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L250)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+```
+
+Defined in: [async-rate-limiter.ts:246](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L246)
+
+## Methods
+
+### abort()
+
+```ts
+abort(): void;
+```
+
+Defined in: [async-rate-limiter.ts:539](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L539)
+
+Aborts all ongoing executions with the internal abort controllers.
+Does NOT clear out the execution times or reset the rate limiter.
+
+#### Returns
+
+`void`
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(maybeExecuteCount?): AbortSignal | null;
+```
+
+Defined in: [async-rate-limiter.ts:529](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L529)
+
+Returns the AbortSignal for a specific execution.
+If no maybeExecuteCount is provided, returns the signal for the most recent execution.
+Returns null if no execution is found or not currently executing.
+
+#### Parameters
+
+##### maybeExecuteCount?
+
+`number`
+
+Optional specific execution to get signal for
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const rateLimiter = new AsyncRateLimiter(
+  async (userId: string) => {
+    const signal = rateLimiter.getAbortSignal()
+    if (signal) {
+      const response = await fetch(`/api/users/${userId}`, { signal })
+      return response.json()
+    }
+  },
+  { limit: 5, window: 1000 }
+)
+```
+
+***
+
+### getMsUntilNextWindow()
+
+```ts
+getMsUntilNextWindow(): number;
+```
+
+Defined in: [async-rate-limiter.ts:501](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L501)
+
+Returns the number of milliseconds until the next execution will be possible
+For fixed windows, this is the time until the current window resets
+For sliding windows, this is the time until the oldest execution expires
+
+#### Returns
+
+`number`
+
+***
+
+### getRemainingInWindow()
+
+```ts
+getRemainingInWindow(): number;
+```
+
+Defined in: [async-rate-limiter.ts:491](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L491)
+
+Returns the number of remaining executions allowed in the current window
+
+#### Returns
+
+`number`
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-rate-limiter.ts:358](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L358)
+
+Attempts to execute the rate-limited function if within the configured limits.
+Will reject execution if the number of calls in the current window exceeds the limit.
+
+Error Handling:
+- If the rate-limited function throws and no `onError` handler is configured,
+  the error will be thrown from this method.
+- If an `onError` handler is configured, errors will be caught and passed to the handler,
+  and this method will return undefined.
+- The error state can be checked using `getErrorCount()` and `getIsExecuting()`.
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+A promise that resolves with the function's return value, or undefined if an error occurred and was handled by onError
+
+#### Throws
+
+The error from the rate-limited function if no onError handler is configured
+
+#### Example
+
+```ts
+const rateLimiter = new AsyncRateLimiter(fn, { limit: 5, window: 1000 });
+
+// First 5 calls will return a promise that resolves with the result
+const result = await rateLimiter.maybeExecute('arg1', 'arg2');
+
+// Additional calls within the window will return undefined
+const result2 = await rateLimiter.maybeExecute('arg1', 'arg2'); // undefined
+```
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-rate-limiter.ts:550](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L550)
+
+Resets the rate limiter state
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-rate-limiter.ts:285](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L285)
+
+Updates the async rate limiter options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncRateLimiterOptions`](/pacer/reference/interfaces/AsyncRateLimiterOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/AsyncRetryer.md b/mintlify/pacer/reference/classes/AsyncRetryer.md
new file mode 100644
index 000000000..5710ad5e4
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncRetryer.md
@@ -0,0 +1,317 @@
+---
+id: AsyncRetryer
+title: AsyncRetryer
+---
+
+# Class: AsyncRetryer\&lt;TFn\>
+
+Defined in: [async-retryer.ts:296](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L296)
+
+Provides robust retry functionality for asynchronous functions, supporting configurable backoff strategies,
+attempt limits, timeout controls, and detailed state management. The AsyncRetryer class is designed to help you reliably
+execute async operations that may fail intermittently, such as network requests or database operations,
+by automatically retrying them according to your chosen policy.
+
+## Retrying Concepts
+
+- **Retrying**: Automatically re-executes a failed async function up to a specified number of attempts.
+  Useful for handling transient errors (e.g., network flakiness, rate limits, temporary server issues).
+- **Backoff Strategies**: Controls the delay between retry attempts (default: `'exponential'`):
+  - `'exponential'`: Wait time doubles with each attempt (1s, 2s, 4s, ...) - **DEFAULT**
+  - `'linear'`: Wait time increases linearly (1s, 2s, 3s, ...)
+  - `'fixed'`: Waits a constant amount of time (`baseWait`) between each attempt
+- **Jitter**: Adds randomness to retry delays to prevent thundering herd problems (default: `0`).
+  Set to a value between 0-1 to apply that percentage of random variation to each delay.
+- **Max Wait**: Caps the maximum wait time between retries (default: `Infinity`).
+  Useful for preventing exponential backoff from growing too large (e.g., cap at 30s even if exponential would be 64s).
+- **Timeout Controls**: Set limits on execution time to prevent hanging operations:
+  - `maxExecutionTime`: Maximum time for a single function call (default: `Infinity`)
+  - `maxTotalExecutionTime`: Maximum time for the entire retry operation (default: `Infinity`)
+- **Abort & Cancellation**: Supports cancellation via an internal `AbortController`. Call `abort()` to stop retries.
+  Use `getAbortSignal()` to make your async function actually cancellable (e.g., with fetch requests).
+
+## State Management
+
+Uses TanStack Store for fine-grained reactivity. State can be accessed via the `store.state` property.
+
+Available state properties:
+- `currentAttempt`: The current retry attempt number (0 when not executing)
+- `executionCount`: Total number of completed executions (successful or failed)
+- `isExecuting`: Whether the retryer is currently executing the function
+- `lastError`: The most recent error encountered during execution
+- `lastExecutionTime`: Timestamp of the last execution completion in milliseconds
+- `lastResult`: The result from the most recent successful execution
+- `status`: Current execution status ('disabled' | 'idle' | 'executing' | 'retrying')
+- `totalExecutionTime`: Total time spent executing (including retries) in milliseconds
+
+## Error Handling
+
+The `throwOnError` option controls when errors are thrown (default: `'last'`):
+- `'last'`: Only throws the final error after all retries are exhausted - **DEFAULT**
+- `true`: Throws every error immediately (disables retrying)
+- `false`: Never throws errors, returns `undefined` instead
+
+Callbacks for lifecycle management:
+- `onAbort`: Called when execution is aborted (manually or due to timeouts)
+- `onError`: Called for every error (including during retries)
+- `onLastError`: Called only for the final error after all retries fail
+- `onRetry`: Called before each retry attempt
+- `onSettled`: Called after execution completes (success or failure) of each attempt
+- `onSuccess`: Called when execution succeeds
+- `onExecutionTimeout`: Called when a single execution attempt times out
+- `onTotalExecutionTimeout`: Called when the total execution time times out
+
+## Usage
+
+- Use for async operations that may fail transiently and benefit from retrying.
+- Configure `maxAttempts`, `backoff`, `baseWait`, `maxWait`, and `jitter` to control retry behavior.
+- Set `maxExecutionTime` and `maxTotalExecutionTime` to prevent hanging operations.
+- Use `onAbort`, `onError`, `onLastError`, `onRetry`, `onSettled`, `onSuccess`, `onExecutionTimeout`, and `onTotalExecutionTimeout` for custom side effects.
+- Call `abort()` to cancel ongoing execution and pending retries.
+- Call `reset()` to reset state and cancel execution.
+- Use `getAbortSignal()` to make your async function cancellable.
+- Use dynamic options (functions) for `maxAttempts`, `baseWait`, and `enabled` based on retryer state.
+
+**Important:** This class is designed for single-use execution. Calling `execute()` multiple times
+on the same instance will abort previous executions. For multiple calls, create a new instance
+each time.
+
+## Example
+
+```typescript
+// Retry a fetch operation up to 5 times with exponential backoff, jitter, and timeouts
+const retryer = new AsyncRetryer(async (url: string) => {
+  const signal = retryer.getAbortSignal()
+  return await fetch(url, { signal })
+}, {
+  maxAttempts: 5,
+  backoff: 'exponential',
+  baseWait: 1000,
+  jitter: 0.1, // Add 10% random variation to prevent thundering herd
+  maxExecutionTime: 5000, // Abort individual calls after 5 seconds
+  maxTotalExecutionTime: 30000, // Abort entire operation after 30 seconds
+  onRetry: (attempt, error) => console.log(`Retry attempt ${attempt} after error:`, error),
+  onSuccess: (result) => console.log('Success:', result),
+  onError: (error) => console.error('Error:', error),
+  onLastError: (error) => console.error('All retries failed:', error),
+})
+
+const result = await retryer.execute('/api/data')
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+The async function type to be retried.
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncRetryer<TFn>(fn, initialOptions): AsyncRetryer<TFn>;
+```
+
+Defined in: [async-retryer.ts:309](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L309)
+
+Creates a new AsyncRetryer instance
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+The async function to retry
+
+##### initialOptions
+
+[`AsyncRetryerOptions`](/pacer/reference/interfaces/AsyncRetryerOptions)\&lt;`TFn`\> = `{}`
+
+Configuration options for the retryer
+
+#### Returns
+
+`AsyncRetryer`\&lt;`TFn`\>
+
+## Properties
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [async-retryer.ts:310](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L310)
+
+The async function to retry
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-retryer.ts:300](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L300)
+
+***
+
+### options
+
+```ts
+options: AsyncRetryerOptions<TFn> & Omit<Required<AsyncRetryerOptions<any>>, 
+  | "initialState"
+  | "key"
+  | "onAbort"
+  | "onError"
+  | "onLastError"
+  | "onRetry"
+  | "onSettled"
+  | "onSuccess"
+  | "onExecutionTimeout"
+| "onTotalExecutionTimeout">;
+```
+
+Defined in: [async-retryer.ts:301](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L301)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncRetryerState<TFn>>>;
+```
+
+Defined in: [async-retryer.ts:297](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L297)
+
+## Methods
+
+### abort()
+
+```ts
+abort(reason): void;
+```
+
+Defined in: [async-retryer.ts:623](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L623)
+
+Cancels the current execution and any pending retries
+
+#### Parameters
+
+##### reason
+
+The reason for the abort (defaults to 'manual')
+
+`"manual"` | `"execution-timeout"` | `"total-timeout"` | `"new-execution"`
+
+#### Returns
+
+`void`
+
+***
+
+### execute()
+
+```ts
+execute(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+Defined in: [async-retryer.ts:430](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L430)
+
+Executes the function with retry logic
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+Arguments to pass to the function
+
+#### Returns
+
+`Promise`\&lt;`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\> \| `undefined`\>
+
+The function result, or undefined if disabled or all retries failed (when throwOnError is false)
+
+#### Throws
+
+The last error if throwOnError is true and all retries fail
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(): AbortSignal | null;
+```
+
+Defined in: [async-retryer.ts:615](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L615)
+
+Returns the current AbortSignal for the executing operation.
+Use this signal in your async function to make it cancellable.
+Returns null when not currently executing.
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const retryer = new AsyncRetryer(async (userId: string) => {
+  const signal = retryer.getAbortSignal()
+  if (signal) {
+    return fetch(`/api/users/${userId}`, { signal })
+  }
+  return fetch(`/api/users/${userId}`)
+})
+
+// Abort will now actually cancel the fetch
+retryer.abort()
+```
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-retryer.ts:643](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L643)
+
+Resets the retryer to its initial state
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-retryer.ts:340](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L340)
+
+Updates the retryer options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncRetryerOptions`](/pacer/reference/interfaces/AsyncRetryerOptions)\&lt;`TFn`\>\>
+
+Partial options to merge with existing options
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/AsyncThrottler.md b/mintlify/pacer/reference/classes/AsyncThrottler.md
new file mode 100644
index 000000000..81b6e93cc
--- /dev/null
+++ b/mintlify/pacer/reference/classes/AsyncThrottler.md
@@ -0,0 +1,321 @@
+---
+id: AsyncThrottler
+title: AsyncThrottler
+---
+
+# Class: AsyncThrottler\&lt;TFn\>
+
+Defined in: [async-throttler.ts:230](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L230)
+
+A class that creates an async throttled function.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync Throttler:
+- Returns promises that can be awaited for throttled function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Cancel support to prevent pending executions from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+- Waits for ongoing executions to complete before scheduling the next one
+
+The sync Throttler is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Throttling?
+Throttling limits how often a function can be executed, allowing only one execution within a specified time window.
+Unlike debouncing which resets the delay timer on each call, throttling ensures the function executes at a
+regular interval regardless of how often it's called.
+
+This is useful for rate-limiting API calls, handling scroll/resize events, or any scenario where you want to
+ensure a maximum execution frequency.
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and throttler instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncThrottler instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async throttler
+- Use `onSuccess` callback to react to successful function execution and implement custom logic
+- Use `onError` callback to react to function execution errors and implement custom error handling
+- Use `onSettled` callback to react to function execution completion (success or error) and implement custom logic
+- The state includes error count, execution status, last execution time, and success/settle counts
+- State can be accessed via `asyncThrottler.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `asyncThrottler.state`
+
+## Example
+
+```ts
+const throttler = new AsyncThrottler(async (value: string) => {
+  const result = await saveToAPI(value);
+  return result; // Return value is preserved
+}, {
+  wait: 1000,
+  onError: (error) => {
+    console.error('API call failed:', error);
+  }
+});
+
+// Will only execute once per second no matter how often called
+// Returns the API response directly
+const result = await throttler.maybeExecute(inputElement.value);
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new AsyncThrottler<TFn>(fn, initialOptions): AsyncThrottler<TFn>;
+```
+
+Defined in: [async-throttler.ts:242](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L242)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`AsyncThrottlerOptions`](/pacer/reference/interfaces/AsyncThrottlerOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`AsyncThrottler`\&lt;`TFn`\>
+
+## Properties
+
+### asyncRetryers
+
+```ts
+asyncRetryers: Map<number, AsyncRetryer<TFn>>;
+```
+
+Defined in: [async-throttler.ts:236](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L236)
+
+***
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [async-throttler.ts:243](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L243)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [async-throttler.ts:234](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L234)
+
+***
+
+### options
+
+```ts
+options: AsyncThrottlerOptions<TFn>;
+```
+
+Defined in: [async-throttler.ts:235](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L235)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+```
+
+Defined in: [async-throttler.ts:231](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L231)
+
+## Methods
+
+### abort()
+
+```ts
+abort(): void;
+```
+
+Defined in: [async-throttler.ts:533](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L533)
+
+Aborts all ongoing executions with the internal abort controllers.
+Does NOT cancel any pending execution that have not started yet.
+
+#### Returns
+
+`void`
+
+***
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [async-throttler.ts:543](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L543)
+
+Cancels any pending execution that have not started yet.
+Does NOT abort any execution already in progress.
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-throttler.ts:462](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L462)
+
+Processes the current pending execution immediately
+
+#### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+***
+
+### getAbortSignal()
+
+```ts
+getAbortSignal(maybeExecuteCount?): AbortSignal | null;
+```
+
+Defined in: [async-throttler.ts:523](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L523)
+
+Returns the AbortSignal for a specific execution.
+If no maybeExecuteCount is provided, returns the signal for the most recent execution.
+Returns null if no execution is found or not currently executing.
+
+#### Parameters
+
+##### maybeExecuteCount?
+
+`number`
+
+Optional specific execution to get signal for
+
+#### Returns
+
+`AbortSignal` \| `null`
+
+#### Example
+
+```typescript
+const throttler = new AsyncThrottler(
+  async (data: string) => {
+    const signal = throttler.getAbortSignal()
+    if (signal) {
+      const response = await fetch('/api/save', {
+        method: 'POST',
+        body: data,
+        signal
+      })
+      return response.json()
+    }
+  },
+  { wait: 1000 }
+)
+```
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-throttler.ts:338](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L338)
+
+Attempts to execute the throttled function. The execution behavior depends on the throttler options:
+
+- If enough time has passed since the last execution (>= wait period):
+  - With leading=true: Executes immediately
+  - With leading=false: Waits for the next trailing execution
+
+- If within the wait period:
+  - With trailing=true: Schedules execution for end of wait period
+  - With trailing=false: Drops the execution
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+#### Example
+
+```ts
+const throttled = new AsyncThrottler(fn, { wait: 1000 });
+
+// First call executes immediately
+await throttled.maybeExecute('a', 'b');
+
+// Call during wait period - gets throttled
+await throttled.maybeExecute('c', 'd');
+```
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [async-throttler.ts:557](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L557)
+
+Resets the debouncer state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [async-throttler.ts:270](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L270)
+
+Updates the async throttler options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`AsyncThrottlerOptions`](/pacer/reference/interfaces/AsyncThrottlerOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/Batcher.md b/mintlify/pacer/reference/classes/Batcher.md
new file mode 100644
index 000000000..93c2d365a
--- /dev/null
+++ b/mintlify/pacer/reference/classes/Batcher.md
@@ -0,0 +1,253 @@
+---
+id: Batcher
+title: Batcher
+---
+
+# Class: Batcher\&lt;TValue\>
+
+Defined in: [batcher.ts:145](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L145)
+
+A class that collects items and processes them in batches.
+
+Batching is a technique for grouping multiple operations together to be processed as a single unit.
+This synchronous version is lighter weight and often all you need - upgrade to AsyncBatcher when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+The Batcher provides a flexible way to implement batching with configurable:
+- Maximum batch size (number of items per batch)
+- Time-based batching (process after X milliseconds)
+- Custom batch processing logic via getShouldExecute
+- Event callbacks for monitoring batch operations
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the batcher
+- Use `onExecute` callback to react to batch execution and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the batcher
+- The state includes batch execution count, total items processed, items, and running status
+- State can be accessed via `batcher.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `batcher.state`
+
+## Example
+
+```ts
+const batcher = new Batcher<number>(
+  (items) => console.log('Processing batch:', items),
+  {
+    maxSize: 5,
+    wait: 2000,
+    onExecute: (batch, batcher) => console.log('Batch executed:', batch)
+  }
+);
+
+batcher.addItem(1);
+batcher.addItem(2);
+// After 2 seconds or when 5 items are added, whichever comes first,
+// the batch will be processed
+// batcher.flush() // manually trigger a batch
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Batcher<TValue>(fn, initialOptions): Batcher<TValue>;
+```
+
+Defined in: [batcher.ts:153](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L153)
+
+#### Parameters
+
+##### fn
+
+(`items`) => `void`
+
+##### initialOptions
+
+[`BatcherOptions`](/pacer/reference/interfaces/BatcherOptions)\&lt;`TValue`\>
+
+#### Returns
+
+`Batcher`\&lt;`TValue`\>
+
+## Properties
+
+### fn()
+
+```ts
+fn: (items) => void;
+```
+
+Defined in: [batcher.ts:154](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L154)
+
+#### Parameters
+
+##### items
+
+`TValue`[]
+
+#### Returns
+
+`void`
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [batcher.ts:149](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L149)
+
+***
+
+### options
+
+```ts
+options: BatcherOptionsWithOptionalCallbacks<TValue>;
+```
+
+Defined in: [batcher.ts:150](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L150)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<BatcherState<TValue>>>;
+```
+
+Defined in: [batcher.ts:146](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L146)
+
+## Methods
+
+### addItem()
+
+```ts
+addItem(item): void;
+```
+
+Defined in: [batcher.ts:211](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L211)
+
+Adds an item to the batcher
+If the batch size is reached, timeout occurs, or shouldProcess returns true, the batch will be processed
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`void`
+
+***
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [batcher.ts:289](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L289)
+
+Cancels any pending execution that was scheduled.
+Does NOT clear out the items.
+
+#### Returns
+
+`void`
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [batcher.ts:281](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L281)
+
+Removes all items from the batcher
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): void;
+```
+
+Defined in: [batcher.ts:259](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L259)
+
+Processes the current batch of items immediately
+
+#### Returns
+
+`void`
+
+***
+
+### peekAllItems()
+
+```ts
+peekAllItems(): TValue[];
+```
+
+Defined in: [batcher.ts:267](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L267)
+
+Returns a copy of all items in the batcher
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [batcher.ts:297](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L297)
+
+Resets the batcher state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [batcher.ts:180](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L180)
+
+Updates the batcher options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`BatcherOptions`](/pacer/reference/interfaces/BatcherOptions)\&lt;`TValue`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/Debouncer.md b/mintlify/pacer/reference/classes/Debouncer.md
new file mode 100644
index 000000000..7ce585ea1
--- /dev/null
+++ b/mintlify/pacer/reference/classes/Debouncer.md
@@ -0,0 +1,203 @@
+---
+id: Debouncer
+title: Debouncer
+---
+
+# Class: Debouncer\&lt;TFn\>
+
+Defined in: [debouncer.ts:142](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L142)
+
+A class that creates a debounced function.
+
+Debouncing ensures that a function is only executed after a certain amount of time has passed
+since its last invocation. This is useful for handling frequent events like window resizing,
+scroll events, or input changes where you want to limit the rate of execution.
+This synchronous version is lighter weight and often all you need - upgrade to AsyncDebouncer when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+The debounced function can be configured to execute either at the start of the delay period
+(leading edge) or at the end (trailing edge, default). Each new call during the wait period
+will reset the timer.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the debouncer
+- Use `onExecute` callback to react to function execution and implement custom logic
+- The state includes canLeadingExecute, execution count, and isPending status
+- State can be accessed via `debouncer.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `debouncer.state`
+
+## Example
+
+```ts
+const debouncer = new Debouncer((value: string) => {
+  saveToDatabase(value);
+}, { wait: 500 });
+
+// Will only save after 500ms of no new input
+inputElement.addEventListener('input', () => {
+  debouncer.maybeExecute(inputElement.value);
+});
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>;
+```
+
+Defined in: [debouncer.ts:150](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L150)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`DebouncerOptions`](/pacer/reference/interfaces/DebouncerOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`Debouncer`\&lt;`TFn`\>
+
+## Properties
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [debouncer.ts:151](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L151)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [debouncer.ts:146](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L146)
+
+***
+
+### options
+
+```ts
+options: DebouncerOptions<TFn>;
+```
+
+Defined in: [debouncer.ts:147](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L147)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<DebouncerState<TFn>>>;
+```
+
+Defined in: [debouncer.ts:143](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L143)
+
+## Methods
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [debouncer.ts:285](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L285)
+
+Cancels any pending execution
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): void;
+```
+
+Defined in: [debouncer.ts:268](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L268)
+
+Processes the current pending execution immediately
+
+#### Returns
+
+`void`
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): void;
+```
+
+Defined in: [debouncer.ts:221](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L221)
+
+Attempts to execute the debounced function
+If a call is already in progress, it will be queued
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [debouncer.ts:296](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L296)
+
+Resets the debouncer state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [debouncer.ts:175](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L175)
+
+Updates the debouncer options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`DebouncerOptions`](/pacer/reference/interfaces/DebouncerOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/Queuer.md b/mintlify/pacer/reference/classes/Queuer.md
new file mode 100644
index 000000000..983d16e24
--- /dev/null
+++ b/mintlify/pacer/reference/classes/Queuer.md
@@ -0,0 +1,443 @@
+---
+id: Queuer
+title: Queuer
+---
+
+# Class: Queuer\&lt;TValue\>
+
+Defined in: [queuer.ts:269](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L269)
+
+A flexible queue that processes items with configurable wait times, expiration, and priority.
+
+This synchronous version is lighter weight and often all you need - upgrade to AsyncQueuer when you need promises, retry support, abort capabilities, concurrent execution, or advanced error handling.
+
+Features:
+- Automatic or manual processing of items
+- FIFO (First In First Out), LIFO (Last In First Out), or double-ended queue behavior
+- Priority-based ordering when getPriority is provided
+- Item expiration and removal of stale items
+- Callbacks for queue state changes, execution, rejection, and expiration
+
+Running behavior:
+- `start()`: Begins automatically processing items in the queue (defaults to isRunning)
+- `stop()`: Pauses processing but maintains queue state
+- `wait`: Configurable delay between processing items
+- `onItemsChange`/`onExecute`: Callbacks for monitoring queue state
+
+Manual processing is also supported when automatic processing is disabled:
+- `execute()`: Processes the next item using the provided function
+- `getNextItem()`: Removes and returns the next item without processing
+
+Queue behavior defaults to FIFO:
+- `addItem(item)`: Adds to the back of the queue
+- Items processed from the front of the queue
+
+Priority queue:
+- Provide a `getPriority` function; higher values are processed first
+
+Stack (LIFO):
+- `addItem(item, 'back')`: Adds to the back
+- `getNextItem('back')`: Removes from the back
+
+Double-ended queue:
+- `addItem(item, position)`: Adds to specified position ('front'/'back')
+- `getNextItem(position)`: Removes from specified position
+
+Item expiration:
+- `expirationDuration`: Maximum time items can stay in the queue
+- `getIsExpired`: Function to override default expiration
+- `onExpire`: Callback for expired items
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the queuer
+- Use `onExecute` callback to react to item execution and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the queue
+- Use `onExpire` callback to react to items expiring and implement custom logic
+- Use `onReject` callback to react to items being rejected when the queue is full
+- The state includes execution count, expiration count, rejection count, and isRunning status
+- State can be accessed via `queuer.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `queuer.state`
+
+Example usage:
+```ts
+// Auto-processing queue with wait time
+const autoQueue = new Queuer<number>((n) => console.log(n), {
+  started: true, // Begin processing immediately
+  wait: 1000, // Wait 1s between items
+  onExecute: (item, queuer) => console.log(`Processed ${item}`)
+});
+autoQueue.addItem(1); // Will process after 1s
+autoQueue.addItem(2); // Will process 1s after first item
+
+// Manual processing queue
+const manualQueue = new Queuer<number>((n) => console.log(n), {
+  started: false
+});
+manualQueue.addItem(1); // [1]
+manualQueue.addItem(2); // [1, 2]
+manualQueue.execute(); // logs 1, queue is [2]
+manualQueue.getNextItem(); // returns 2, queue is empty
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Queuer<TValue>(fn, initialOptions): Queuer<TValue>;
+```
+
+Defined in: [queuer.ts:277](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L277)
+
+#### Parameters
+
+##### fn
+
+(`item`) => `void`
+
+##### initialOptions
+
+[`QueuerOptions`](/pacer/reference/interfaces/QueuerOptions)\&lt;`TValue`\> = `{}`
+
+#### Returns
+
+`Queuer`\&lt;`TValue`\>
+
+## Properties
+
+### fn()
+
+```ts
+fn: (item) => void;
+```
+
+Defined in: [queuer.ts:278](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L278)
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`void`
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [queuer.ts:273](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L273)
+
+***
+
+### options
+
+```ts
+options: QueuerOptions<TValue>;
+```
+
+Defined in: [queuer.ts:274](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L274)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<QueuerState<TValue>>>;
+```
+
+Defined in: [queuer.ts:270](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L270)
+
+## Methods
+
+### addItem()
+
+```ts
+addItem(
+   item, 
+   position, 
+   runOnItemsChange): boolean;
+```
+
+Defined in: [queuer.ts:403](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L403)
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+Returns true if the item was added, false if the queue is full.
+
+Example usage:
+```ts
+queuer.addItem('task');
+queuer.addItem('task2', 'front');
+```
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+##### runOnItemsChange
+
+`boolean` = `true`
+
+#### Returns
+
+`boolean`
+
+***
+
+### clear()
+
+```ts
+clear(): void;
+```
+
+Defined in: [queuer.ts:685](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L685)
+
+Removes all pending items from the queue. Does not affect items being processed.
+
+#### Returns
+
+`void`
+
+***
+
+### execute()
+
+```ts
+execute(position?): TValue | undefined;
+```
+
+Defined in: [queuer.ts:539](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L539)
+
+Removes and returns the next item from the queue and processes it using the provided function.
+
+Example usage:
+```ts
+queuer.execute();
+// LIFO
+queuer.execute('back');
+```
+
+#### Parameters
+
+##### position?
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition)
+
+#### Returns
+
+`TValue` \| `undefined`
+
+***
+
+### flush()
+
+```ts
+flush(numberOfItems, position?): void;
+```
+
+Defined in: [queuer.ts:555](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L555)
+
+Processes a specified number of items to execute immediately with no wait time
+If no numberOfItems is provided, all items will be processed
+
+#### Parameters
+
+##### numberOfItems
+
+`number` = `...`
+
+##### position?
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition)
+
+#### Returns
+
+`void`
+
+***
+
+### flushAsBatch()
+
+```ts
+flushAsBatch(batchFunction): void;
+```
+
+Defined in: [queuer.ts:570](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L570)
+
+Processes all items in the queue as a batch using the provided function as an argument
+The queue is cleared after processing
+
+#### Parameters
+
+##### batchFunction
+
+(`items`) => `void`
+
+#### Returns
+
+`void`
+
+***
+
+### getNextItem()
+
+```ts
+getNextItem(position): TValue | undefined;
+```
+
+Defined in: [queuer.ts:487](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L487)
+
+Removes and returns the next item from the queue without executing the function.
+Use for manual queue management. Normally, use execute() to process items.
+
+Example usage:
+```ts
+// FIFO
+queuer.getNextItem();
+// LIFO
+queuer.getNextItem('back');
+```
+
+#### Parameters
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+#### Returns
+
+`TValue` \| `undefined`
+
+***
+
+### peekAllItems()
+
+```ts
+peekAllItems(): TValue[];
+```
+
+Defined in: [queuer.ts:653](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L653)
+
+Returns a copy of all items in the queue.
+
+#### Returns
+
+`TValue`[]
+
+***
+
+### peekNextItem()
+
+```ts
+peekNextItem(position): TValue | undefined;
+```
+
+Defined in: [queuer.ts:643](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L643)
+
+Returns the next item in the queue without removing it.
+
+Example usage:
+```ts
+queuer.peekNextItem(); // front
+queuer.peekNextItem('back'); // back
+```
+
+#### Parameters
+
+##### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `'front'`
+
+#### Returns
+
+`TValue` \| `undefined`
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [queuer.ts:693](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L693)
+
+Resets the queuer state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [queuer.ts:319](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L319)
+
+Updates the queuer options. New options are merged with existing options.
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`QueuerOptions`](/pacer/reference/interfaces/QueuerOptions)\&lt;`TValue`\>\>
+
+#### Returns
+
+`void`
+
+***
+
+### start()
+
+```ts
+start(): void;
+```
+
+Defined in: [queuer.ts:660](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L660)
+
+Starts processing items in the queue. If already isRunning, does nothing.
+
+#### Returns
+
+`void`
+
+***
+
+### stop()
+
+```ts
+stop(): void;
+```
+
+Defined in: [queuer.ts:670](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L670)
+
+Stops processing items in the queue. Does not clear the queue.
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/RateLimiter.md b/mintlify/pacer/reference/classes/RateLimiter.md
new file mode 100644
index 000000000..b0f5547db
--- /dev/null
+++ b/mintlify/pacer/reference/classes/RateLimiter.md
@@ -0,0 +1,228 @@
+---
+id: RateLimiter
+title: RateLimiter
+---
+
+# Class: RateLimiter\&lt;TFn\>
+
+Defined in: [rate-limiter.ts:156](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L156)
+
+A class that creates a rate-limited function.
+
+Rate limiting is a simple approach that allows a function to execute up to a limit within a time window,
+then blocks all subsequent calls until the window passes. This can lead to "bursty" behavior where
+all executions happen immediately, followed by a complete block.
+This synchronous version is lighter weight and often all you need - upgrade to AsyncRateLimiter when you need promises, retry support, abort capabilities, or advanced error handling.
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+For smoother execution patterns, consider using:
+- Throttling: Ensures consistent spacing between executions (e.g. max once per 200ms)
+- Debouncing: Waits for a pause in calls before executing (e.g. after 500ms of no calls)
+
+Rate limiting is best used for hard API limits or resource constraints. For UI updates or
+smoothing out frequent events, throttling or debouncing usually provide better user experience.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the rate limiter
+- Use `onExecute` callback to react to function execution and implement custom logic
+- Use `onReject` callback to react to executions being rejected when rate limit is exceeded
+- The state includes execution count, execution times, and rejection count
+- State can be accessed via `rateLimiter.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `rateLimiter.state`
+
+## Example
+
+```ts
+const rateLimiter = new RateLimiter(
+  (id: string) => api.getData(id),
+  {
+    limit: 5,
+    window: 1000,
+    windowType: 'sliding',
+  }
+);
+
+// Will execute immediately until limit reached, then block
+rateLimiter.maybeExecute('123');
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new RateLimiter<TFn>(fn, initialOptions): RateLimiter<TFn>;
+```
+
+Defined in: [rate-limiter.ts:163](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L163)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`RateLimiterOptions`](/pacer/reference/interfaces/RateLimiterOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`RateLimiter`\&lt;`TFn`\>
+
+## Properties
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [rate-limiter.ts:164](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L164)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [rate-limiter.ts:159](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L159)
+
+***
+
+### options
+
+```ts
+options: RateLimiterOptions<TFn>;
+```
+
+Defined in: [rate-limiter.ts:160](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L160)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<RateLimiterState>>;
+```
+
+Defined in: [rate-limiter.ts:157](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L157)
+
+## Methods
+
+### getMsUntilNextWindow()
+
+```ts
+getMsUntilNextWindow(): number;
+```
+
+Defined in: [rate-limiter.ts:358](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L358)
+
+Returns the number of milliseconds until the next execution will be possible
+
+#### Returns
+
+`number`
+
+***
+
+### getRemainingInWindow()
+
+```ts
+getRemainingInWindow(): number;
+```
+
+Defined in: [rate-limiter.ts:350](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L350)
+
+Returns the number of remaining executions allowed in the current window
+
+#### Returns
+
+`number`
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): boolean;
+```
+
+Defined in: [rate-limiter.ts:252](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L252)
+
+Attempts to execute the rate-limited function if within the configured limits.
+Will reject execution if the number of calls in the current window exceeds the limit.
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`boolean`
+
+#### Example
+
+```ts
+const rateLimiter = new RateLimiter(fn, { limit: 5, window: 1000 });
+
+// First 5 calls will return true
+rateLimiter.maybeExecute('arg1', 'arg2'); // true
+
+// Additional calls within the window will return false
+rateLimiter.maybeExecute('arg1', 'arg2'); // false
+```
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [rate-limiter.ts:369](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L369)
+
+Resets the rate limiter state
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [rate-limiter.ts:191](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L191)
+
+Updates the rate limiter options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`RateLimiterOptions`](/pacer/reference/interfaces/RateLimiterOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/classes/Throttler.md b/mintlify/pacer/reference/classes/Throttler.md
new file mode 100644
index 000000000..8c2913add
--- /dev/null
+++ b/mintlify/pacer/reference/classes/Throttler.md
@@ -0,0 +1,232 @@
+---
+id: Throttler
+title: Throttler
+---
+
+# Class: Throttler\&lt;TFn\>
+
+Defined in: [throttler.ts:150](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L150)
+
+A class that creates a throttled function.
+
+Throttling ensures a function is called at most once within a specified time window.
+Unlike debouncing which waits for a pause in calls, throttling guarantees consistent
+execution timing regardless of call frequency.
+This synchronous version is lighter weight and often all you need - upgrade to AsyncThrottler when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+Supports both leading and trailing edge execution:
+- Leading: Execute immediately on first call (default: true)
+- Trailing: Execute after wait period if called during throttle (default: true)
+
+For collapsing rapid-fire events where you only care about the last call, consider using Debouncer.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the throttler
+- Use `onExecute` callback to react to function execution and implement custom logic
+- The state includes execution count, last execution time, pending status, and more
+- State can be accessed via `throttler.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `throttler.state`
+
+## Example
+
+```ts
+const throttler = new Throttler(
+  (id: string) => api.getData(id),
+  { wait: 1000 } // Execute at most once per second
+);
+
+// First call executes immediately
+throttler.maybeExecute('123');
+
+// Subsequent calls within 1000ms are throttled
+throttler.maybeExecute('123'); // Throttled
+```
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Constructors
+
+### Constructor
+
+```ts
+new Throttler<TFn>(fn, initialOptions): Throttler<TFn>;
+```
+
+Defined in: [throttler.ts:158](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L158)
+
+#### Parameters
+
+##### fn
+
+`TFn`
+
+##### initialOptions
+
+[`ThrottlerOptions`](/pacer/reference/interfaces/ThrottlerOptions)\&lt;`TFn`\>
+
+#### Returns
+
+`Throttler`\&lt;`TFn`\>
+
+## Properties
+
+### fn
+
+```ts
+fn: TFn;
+```
+
+Defined in: [throttler.ts:159](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L159)
+
+***
+
+### key
+
+```ts
+key: string | undefined;
+```
+
+Defined in: [throttler.ts:154](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L154)
+
+***
+
+### options
+
+```ts
+options: ThrottlerOptions<TFn>;
+```
+
+Defined in: [throttler.ts:155](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L155)
+
+***
+
+### store
+
+```ts
+readonly store: Store<Readonly<ThrottlerState<TFn>>>;
+```
+
+Defined in: [throttler.ts:151](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L151)
+
+## Methods
+
+### cancel()
+
+```ts
+cancel(): void;
+```
+
+Defined in: [throttler.ts:322](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L322)
+
+Cancels any pending trailing execution and clears internal state.
+
+If a trailing execution is scheduled (due to throttling with trailing=true),
+this will prevent that execution from occurring. The internal timeout and
+stored arguments will be cleared.
+
+Has no effect if there is no pending execution.
+
+#### Returns
+
+`void`
+
+***
+
+### flush()
+
+```ts
+flush(): void;
+```
+
+Defined in: [throttler.ts:300](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L300)
+
+Processes the current pending execution immediately
+
+#### Returns
+
+`void`
+
+***
+
+### maybeExecute()
+
+```ts
+maybeExecute(...args): void;
+```
+
+Defined in: [throttler.ts:241](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L241)
+
+Attempts to execute the throttled function. The execution behavior depends on the throttler options:
+
+- If enough time has passed since the last execution (>= wait period):
+  - With leading=true: Executes immediately
+  - With leading=false: Waits for the next trailing execution
+
+- If within the wait period:
+  - With trailing=true: Schedules execution for end of wait period
+  - With trailing=false: Drops the execution
+
+#### Parameters
+
+##### args
+
+...`Parameters`\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+const throttled = new Throttler(fn, { wait: 1000 });
+
+// First call executes immediately
+throttled.maybeExecute('a', 'b');
+
+// Call during wait period - gets throttled
+throttled.maybeExecute('c', 'd');
+```
+
+***
+
+### reset()
+
+```ts
+reset(): void;
+```
+
+Defined in: [throttler.ts:333](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L333)
+
+Resets the throttler state to its default values
+
+#### Returns
+
+`void`
+
+***
+
+### setOptions()
+
+```ts
+setOptions(newOptions): void;
+```
+
+Defined in: [throttler.ts:183](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L183)
+
+Updates the throttler options
+
+#### Parameters
+
+##### newOptions
+
+`Partial`\&lt;[`ThrottlerOptions`](/pacer/reference/interfaces/ThrottlerOptions)\&lt;`TFn`\>\>
+
+#### Returns
+
+`void`
diff --git a/mintlify/pacer/reference/functions/asyncBatch.md b/mintlify/pacer/reference/functions/asyncBatch.md
new file mode 100644
index 000000000..aa979d159
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncBatch.md
@@ -0,0 +1,117 @@
+---
+id: asyncBatch
+title: asyncBatch
+---
+
+# Function: asyncBatch()
+
+```ts
+function asyncBatch<TValue>(fn, options): (item) => Promise<any>;
+```
+
+Defined in: [async-batcher.ts:588](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L588)
+
+Creates an async batcher that processes items in batches.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync batch function:
+- Returns promises that can be awaited for batch results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight batch executions
+- Cancel support to prevent pending batches from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+
+The sync batch function is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Batching?
+Batching is a technique for grouping multiple operations together to be processed as a single unit.
+
+Configuration Options:
+- `maxSize`: Maximum number of items per batch (default: Infinity)
+- `wait`: Time to wait before processing batch (default: Infinity)
+- `getShouldExecute`: Custom logic to trigger batch processing
+- `asyncRetryerOptions`: Configure retry behavior for batch executions
+- `started`: Whether to start processing immediately (default: true)
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error, the batch of items that failed, and batcher instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncBatcher instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async batcher
+- Use `onSuccess` callback to react to successful batch execution and implement custom logic
+- Use `onError` callback to react to batch execution errors and implement custom error handling
+- Use `onSettled` callback to react to batch execution completion (success or error) and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the batcher
+- The state includes total items processed, success/error counts, and execution status
+- State can be accessed via the underlying AsyncBatcher instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `Promise`\&lt;`any`\>
+
+### options
+
+[`AsyncBatcherOptions`](/pacer/reference/interfaces/AsyncBatcherOptions)\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(item): Promise<any>;
+```
+
+Adds an item to the async batcher
+If the batch size is reached, timeout occurs, or shouldProcess returns true, the batch will be processed
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`Promise`\&lt;`any`\>
+
+The result from the batch function, or undefined if an error occurred and was handled by onError
+
+### Throws
+
+The error from the batch function if no onError handler is configured or throwOnError is true
+
+## Example
+
+```ts
+const batchItems = asyncBatch<number>(
+  async (items) => {
+    const result = await processApiCall(items);
+    console.log('Processing:', items);
+    return result;
+  },
+  {
+    maxSize: 3,
+    wait: 1000,
+    onSuccess: (result) => console.log('Batch succeeded:', result),
+    onError: (error) => console.error('Batch failed:', error)
+  }
+);
+
+batchItems(1);
+batchItems(2);
+batchItems(3); // Triggers batch processing
+```
diff --git a/mintlify/pacer/reference/functions/asyncBatcherOptions.md b/mintlify/pacer/reference/functions/asyncBatcherOptions.md
new file mode 100644
index 000000000..27fa1593c
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncBatcherOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncBatcherOptions
+title: asyncBatcherOptions
+---
+
+# Function: asyncBatcherOptions()
+
+```ts
+function asyncBatcherOptions<TValue, TOptions>(options): TOptions;
+```
+
+Defined in: [async-batcher.ts:168](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L168)
+
+Utility function for sharing common `AsyncBatcherOptions` options between different `AsyncBatcher` instances.
+
+## Type Parameters
+
+### TValue
+
+`TValue` = `any`
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncBatcherOptions`](/pacer/reference/interfaces/AsyncBatcherOptions)\&lt;`TValue`\>\> = `Partial`\&lt;[`AsyncBatcherOptions`](/pacer/reference/interfaces/AsyncBatcherOptions)\&lt;`TValue`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/asyncDebounce.md b/mintlify/pacer/reference/functions/asyncDebounce.md
new file mode 100644
index 000000000..b5fd217ec
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncDebounce.md
@@ -0,0 +1,124 @@
+---
+id: asyncDebounce
+title: asyncDebounce
+---
+
+# Function: asyncDebounce()
+
+```ts
+function asyncDebounce<TFn>(fn, initialOptions): (...args) => Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-debouncer.ts:559](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L559)
+
+Creates an async debounced function that delays execution until after a specified wait time.
+The debounced function will only execute once the wait period has elapsed without any new calls.
+If called again during the wait period, the timer resets and a new wait period begins.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync debounce function:
+- Returns promises that can be awaited for debounced function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Cancel support to prevent pending executions from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+
+The sync debounce function is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Debouncing?
+Debouncing ensures that a function is only executed after a specified delay has passed since its last invocation.
+Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing
+or input changes where you only want to execute the handler after the events have stopped occurring.
+
+Configuration Options:
+- `wait`: Delay in milliseconds to wait after the last call (required)
+- `leading`: Execute on the leading edge of the timeout (default: false)
+- `trailing`: Execute on the trailing edge of the timeout (default: true)
+- `enabled`: Whether the debouncer is enabled (default: true)
+- `asyncRetryerOptions`: Configure retry behavior for executions
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and debouncer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- The error state can be checked using the underlying AsyncDebouncer instance
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async debouncer
+- Use `onSuccess` callback to react to successful function execution and implement custom logic
+- Use `onError` callback to react to function execution errors and implement custom error handling
+- Use `onSettled` callback to react to function execution completion (success or error) and implement custom logic
+- The state includes canLeadingExecute, error count, execution status, and success/settle counts
+- State can be accessed via `asyncDebouncer.store.state` when using the class directly
+- When using framework adapters (React/Solid), state is accessed from `asyncDebouncer.state`
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`AsyncDebouncerOptions`](/pacer/reference/interfaces/AsyncDebouncerOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Attempts to execute the debounced function.
+If a call is already in progress, it will be queued.
+
+Error Handling:
+- If the debounced function throws and no `onError` handler is configured,
+  the error will be thrown from this method.
+- If an `onError` handler is configured, errors will be caught and passed to the handler,
+  and this method will return undefined.
+- The error state can be checked using `getErrorCount()` and `getIsExecuting()`.
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+A promise that resolves with the function's return value, or undefined if an error occurred and was handled by onError
+
+### Throws
+
+The error from the debounced function if no onError handler is configured
+
+## Example
+
+```ts
+const debounced = asyncDebounce(async (value: string) => {
+  const result = await saveToAPI(value);
+  return result; // Return value is preserved
+}, {
+  wait: 1000,
+  onError: (error) => {
+    console.error('API call failed:', error);
+  },
+  throwOnError: true // Will both log the error and throw it
+});
+
+// Will only execute once, 1 second after the last call
+// Returns the API response directly
+const result = await debounced("third");
+```
diff --git a/mintlify/pacer/reference/functions/asyncDebouncerOptions.md b/mintlify/pacer/reference/functions/asyncDebouncerOptions.md
new file mode 100644
index 000000000..8b3132e83
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncDebouncerOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncDebouncerOptions
+title: asyncDebouncerOptions
+---
+
+# Function: asyncDebouncerOptions()
+
+```ts
+function asyncDebouncerOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [async-debouncer.ts:140](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L140)
+
+Utility function for sharing common `AsyncDebouncerOptions` options between different `AsyncDebouncer` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction) = [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncDebouncerOptions`](/pacer/reference/interfaces/AsyncDebouncerOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`AsyncDebouncerOptions`](/pacer/reference/interfaces/AsyncDebouncerOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/asyncQueue.md b/mintlify/pacer/reference/functions/asyncQueue.md
new file mode 100644
index 000000000..95742e002
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncQueue.md
@@ -0,0 +1,130 @@
+---
+id: asyncQueue
+title: asyncQueue
+---
+
+# Function: asyncQueue()
+
+```ts
+function asyncQueue<TValue>(fn, initialOptions): (item, position, runOnItemsChange) => boolean;
+```
+
+Defined in: [async-queuer.ts:919](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L919)
+
+Creates a new AsyncQueuer instance and returns a bound addItem function for adding tasks.
+The queuer is started automatically and ready to process items.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync queue function:
+- Returns promises that can be awaited for task results
+- Built-in retry support via AsyncRetryer integration for each queued task
+- Abort support to cancel in-flight task executions
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+- Concurrent execution support (process multiple items simultaneously)
+
+The sync queue function is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Queuing?
+Queuing is a technique for managing and processing items sequentially or with controlled concurrency.
+Tasks are processed up to the configured concurrency limit. When a task completes,
+the next pending task is processed if the concurrency limit allows.
+
+Configuration Options:
+- `concurrency`: Maximum number of concurrent tasks (default: 1)
+- `wait`: Time to wait between processing items (default: 0)
+- `maxSize`: Maximum number of items allowed in the queue (default: Infinity)
+- `getPriority`: Function to determine item priority
+- `addItemsTo`: Default position to add items ('back' or 'front', default: 'back')
+- `getItemsFrom`: Default position to get items ('front' or 'back', default: 'front')
+- `expirationDuration`: Maximum time items can stay in queue
+- `started`: Whether to start processing immediately (default: true)
+- `asyncRetryerOptions`: Configure retry behavior for task executions
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and queuer instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together; the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncQueuer instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async queuer
+- Use `onSuccess` callback to react to successful task execution and implement custom logic
+- Use `onError` callback to react to task execution errors and implement custom error handling
+- Use `onSettled` callback to react to task execution completion (success or error) and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the queue
+- Use `onExpire` callback to react to items expiring and implement custom logic
+- Use `onReject` callback to react to items being rejected when the queue is full
+- The state includes error count, expiration count, rejection count, running status, and success/settle counts
+- State can be accessed via the underlying AsyncQueuer instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`value`) => `Promise`\&lt;`any`\>
+
+### initialOptions
+
+[`AsyncQueuerOptions`](/pacer/reference/interfaces/AsyncQueuerOptions)\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(
+   item, 
+   position, 
+   runOnItemsChange): boolean;
+```
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+### Parameters
+
+#### item
+
+`TValue`
+
+#### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+#### runOnItemsChange
+
+`boolean` = `true`
+
+### Returns
+
+`boolean`
+
+### Example
+
+```ts
+queuer.addItem({ value: 'task', priority: 10 });
+queuer.addItem('task2', 'front');
+```
+
+## Example
+
+```ts
+const enqueue = asyncQueue<string>(async (item) => {
+  return item.toUpperCase();
+}, {
+  concurrency: 2,
+  wait: 100,
+  onSuccess: (result) => console.log('Processed:', result)
+});
+
+enqueue('hello');
+```
diff --git a/mintlify/pacer/reference/functions/asyncQueuerOptions.md b/mintlify/pacer/reference/functions/asyncQueuerOptions.md
new file mode 100644
index 000000000..412ae2d78
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncQueuerOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncQueuerOptions
+title: asyncQueuerOptions
+---
+
+# Function: asyncQueuerOptions()
+
+```ts
+function asyncQueuerOptions<TValue, TOptions>(options): TOptions;
+```
+
+Defined in: [async-queuer.ts:213](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L213)
+
+Utility function for sharing common `AsyncQueuerOptions` options between different `AsyncQueuer` instances.
+
+## Type Parameters
+
+### TValue
+
+`TValue` = `any`
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncQueuerOptions`](/pacer/reference/interfaces/AsyncQueuerOptions)\&lt;`TValue`\>\> = `Partial`\&lt;[`AsyncQueuerOptions`](/pacer/reference/interfaces/AsyncQueuerOptions)\&lt;`TValue`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/asyncRateLimit.md b/mintlify/pacer/reference/functions/asyncRateLimit.md
new file mode 100644
index 000000000..2d1cd426d
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncRateLimit.md
@@ -0,0 +1,156 @@
+---
+id: asyncRateLimit
+title: asyncRateLimit
+---
+
+# Function: asyncRateLimit()
+
+```ts
+function asyncRateLimit<TFn>(fn, initialOptions): (...args) => Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-rate-limiter.ts:641](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L641)
+
+Creates an async rate-limited function that will execute the provided function up to a maximum number of times within a time window.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync rate limit function:
+- Returns promises that can be awaited for rate-limited function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts, rejection counts)
+- More sophisticated window management with automatic cleanup
+
+The sync rate limit function is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Rate Limiting?
+Rate limiting allows a function to execute up to a limit within a time window,
+then blocks all subsequent calls until the window passes. This can lead to "bursty" behavior where
+all executions happen immediately, followed by a complete block.
+
+Window Types:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+Configuration Options:
+- `limit`: Maximum number of executions allowed within the window (required)
+- `window`: Time window in milliseconds (required)
+- `windowType`: 'fixed' or 'sliding' (default: 'fixed')
+- `enabled`: Whether the rate limiter is enabled (default: true)
+- `asyncRetryerOptions`: Configure retry behavior for executions
+
+When to Use Rate Limiting:
+Rate limiting is best used for hard API limits or resource constraints. For UI updates or
+smoothing out frequent events, throttling or debouncing usually provide better user experience.
+- A rate limiter will allow all executions until the limit is reached, then block all subsequent calls until the window resets
+- A throttler ensures even spacing between executions, which can be better for consistent performance
+- A debouncer collapses multiple calls into one, which is better for handling bursts of events
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and rate limiter instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncRateLimiter instance
+- Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the rate limiter
+- `initialState` can be a partial state object
+- Use `onSuccess` callback to react to successful function execution and implement custom logic
+- Use `onError` callback to react to function execution errors and implement custom error handling
+- Use `onSettled` callback to react to function execution completion (success or error) and implement custom logic
+- Use `onReject` callback to react to executions being rejected when rate limit is exceeded
+- The state includes execution times, success/error counts, and current execution status
+- State can be accessed via the underlying AsyncRateLimiter instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`AsyncRateLimiterOptions`](/pacer/reference/interfaces/AsyncRateLimiterOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Attempts to execute the rate-limited function if within the configured limits.
+Will reject execution if the number of calls in the current window exceeds the limit.
+
+Error Handling:
+- If the rate-limited function throws and no `onError` handler is configured,
+  the error will be thrown from this method.
+- If an `onError` handler is configured, errors will be caught and passed to the handler,
+  and this method will return undefined.
+- The error state can be checked using `getErrorCount()` and `getIsExecuting()`.
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+A promise that resolves with the function's return value, or undefined if an error occurred and was handled by onError
+
+### Throws
+
+The error from the rate-limited function if no onError handler is configured
+
+### Example
+
+```ts
+const rateLimiter = new AsyncRateLimiter(fn, { limit: 5, window: 1000 });
+
+// First 5 calls will return a promise that resolves with the result
+const result = await rateLimiter.maybeExecute('arg1', 'arg2');
+
+// Additional calls within the window will return undefined
+const result2 = await rateLimiter.maybeExecute('arg1', 'arg2'); // undefined
+```
+
+## Example
+
+```ts
+// Rate limit to 5 calls per minute with a sliding window
+const rateLimited = asyncRateLimit(makeApiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+  onError: (error) => {
+    console.error('API call failed:', error);
+  },
+  onReject: (rateLimiter) => {
+    console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// First 5 calls will execute immediately
+// Additional calls will be rejected until the minute window resets
+// Returns the API response directly
+const result = await rateLimited();
+
+// For more even execution, consider using throttle instead:
+const throttled = throttle(makeApiCall, { wait: 12000 }); // One call every 12 seconds
+```
diff --git a/mintlify/pacer/reference/functions/asyncRateLimiterOptions.md b/mintlify/pacer/reference/functions/asyncRateLimiterOptions.md
new file mode 100644
index 000000000..e546d5d63
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncRateLimiterOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncRateLimiterOptions
+title: asyncRateLimiterOptions
+---
+
+# Function: asyncRateLimiterOptions()
+
+```ts
+function asyncRateLimiterOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [async-rate-limiter.ts:148](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L148)
+
+Utility function for sharing common `AsyncRateLimiterOptions` options between different `AsyncRateLimiter` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction) = [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncRateLimiterOptions`](/pacer/reference/interfaces/AsyncRateLimiterOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`AsyncRateLimiterOptions`](/pacer/reference/interfaces/AsyncRateLimiterOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/asyncRetry.md b/mintlify/pacer/reference/functions/asyncRetry.md
new file mode 100644
index 000000000..8b3dfef73
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncRetry.md
@@ -0,0 +1,76 @@
+---
+id: asyncRetry
+title: asyncRetry
+---
+
+# Function: asyncRetry()
+
+```ts
+function asyncRetry<TFn>(fn, initialOptions): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+Defined in: [async-retryer.ts:678](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L678)
+
+Creates a retry-enabled version of an async function. This is a convenience wrapper
+around the AsyncRetryer class that returns the execute method.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+The async function to add retry functionality to
+
+### initialOptions
+
+[`AsyncRetryerOptions`](/pacer/reference/interfaces/AsyncRetryerOptions)\&lt;`TFn`\> = `{}`
+
+Configuration options for the retry behavior
+
+## Returns
+
+A new function that executes the original with retry logic
+
+```ts
+(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\> \| `undefined`\>
+
+## Example
+
+```typescript
+// Define your async function normally
+async function fetchData(url: string) {
+  const response = await fetch(url)
+  if (!response.ok) throw new Error('Request failed')
+  return response.json()
+}
+
+// Create retry-enabled function
+const fetchWithRetry = asyncRetry(fetchData, {
+  maxAttempts: 3,
+  backoff: 'exponential',
+  baseWait: 1000,
+  jitter: 0.1
+})
+
+// Call it multiple times
+const data1 = await fetchWithRetry('/api/data1')
+const data2 = await fetchWithRetry('/api/data2')
+```
diff --git a/mintlify/pacer/reference/functions/asyncRetryerOptions.md b/mintlify/pacer/reference/functions/asyncRetryerOptions.md
new file mode 100644
index 000000000..1bde5dd66
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncRetryerOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncRetryerOptions
+title: asyncRetryerOptions
+---
+
+# Function: asyncRetryerOptions()
+
+```ts
+function asyncRetryerOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [async-retryer.ts:169](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L169)
+
+Utility function for sharing common `AsyncRetryerOptions` options between different `AsyncRetryer` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction) = [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncRetryerOptions`](/pacer/reference/interfaces/AsyncRetryerOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`AsyncRetryerOptions`](/pacer/reference/interfaces/AsyncRetryerOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/asyncThrottle.md b/mintlify/pacer/reference/functions/asyncThrottle.md
new file mode 100644
index 000000000..2eab701b0
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncThrottle.md
@@ -0,0 +1,130 @@
+---
+id: asyncThrottle
+title: asyncThrottle
+---
+
+# Function: asyncThrottle()
+
+```ts
+function asyncThrottle<TFn>(fn, initialOptions): (...args) => Promise<ReturnType<TFn> | undefined>;
+```
+
+Defined in: [async-throttler.ts:627](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L627)
+
+Creates an async throttled function that limits how often the function can execute.
+The throttled function will execute at most once per wait period, even if called multiple times.
+If called while executing, it will wait until execution completes before scheduling the next call.
+
+Async vs Sync Versions:
+The async version provides advanced features over the sync throttle function:
+- Returns promises that can be awaited for throttled function results
+- Built-in retry support via AsyncRetryer integration
+- Abort support to cancel in-flight executions
+- Cancel support to prevent pending executions from starting
+- Comprehensive error handling with onError callbacks and throwOnError control
+- Detailed execution tracking (success/error/settle counts)
+- Waits for ongoing executions to complete before scheduling the next one
+
+The sync throttle function is lighter weight and simpler when you don't need async features,
+return values, or execution control.
+
+What is Throttling?
+Throttling limits how often a function can be executed, allowing only one execution within a specified time window.
+Unlike debouncing which resets the delay timer on each call, throttling ensures the function executes at a
+regular interval regardless of how often it's called.
+
+Configuration Options:
+- `wait`: Time window in milliseconds during which the function can only execute once (required)
+- `leading`: Execute immediately when called (default: true)
+- `trailing`: Execute on the trailing edge of the wait period (default: true)
+- `enabled`: Whether the throttler is enabled (default: true)
+- `asyncRetryerOptions`: Configure retry behavior for executions
+
+Error Handling:
+- If an `onError` handler is provided, it will be called with the error and throttler instance
+- If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+- If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+- Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+- The error state can be checked using the underlying AsyncThrottler instance
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the async throttler
+- Use `onSuccess` callback to react to successful function execution and implement custom logic
+- Use `onError` callback to react to function execution errors and implement custom error handling
+- Use `onSettled` callback to react to function execution completion (success or error) and implement custom logic
+- The state includes error count, execution status, last execution time, and success/settle counts
+- State can be accessed via the underlying AsyncThrottler instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`AsyncThrottlerOptions`](/pacer/reference/interfaces/AsyncThrottlerOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): Promise<ReturnType<TFn> | undefined>;
+```
+
+Attempts to execute the throttled function. The execution behavior depends on the throttler options:
+
+- If enough time has passed since the last execution (>= wait period):
+  - With leading=true: Executes immediately
+  - With leading=false: Waits for the next trailing execution
+
+- If within the wait period:
+  - With trailing=true: Schedules execution for end of wait period
+  - With trailing=false: Drops the execution
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`Promise`\&lt;`ReturnType`\&lt;`TFn`\> \| `undefined`\>
+
+### Example
+
+```ts
+const throttled = new AsyncThrottler(fn, { wait: 1000 });
+
+// First call executes immediately
+await throttled.maybeExecute('a', 'b');
+
+// Call during wait period - gets throttled
+await throttled.maybeExecute('c', 'd');
+```
+
+## Example
+
+```ts
+const throttled = asyncThrottle(async (value: string) => {
+  const result = await saveToAPI(value);
+  return result; // Return value is preserved
+}, {
+  wait: 1000,
+  onError: (error) => {
+    console.error('API call failed:', error);
+  }
+});
+
+// This will execute at most once per second
+// Returns the API response directly
+const result = await throttled(inputElement.value);
+```
diff --git a/mintlify/pacer/reference/functions/asyncThrottlerOptions.md b/mintlify/pacer/reference/functions/asyncThrottlerOptions.md
new file mode 100644
index 000000000..b58545e57
--- /dev/null
+++ b/mintlify/pacer/reference/functions/asyncThrottlerOptions.md
@@ -0,0 +1,34 @@
+---
+id: asyncThrottlerOptions
+title: asyncThrottlerOptions
+---
+
+# Function: asyncThrottlerOptions()
+
+```ts
+function asyncThrottlerOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [async-throttler.ts:148](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L148)
+
+Utility function for sharing common `AsyncThrottlerOptions` options between different `AsyncThrottler` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction) = [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`AsyncThrottlerOptions`](/pacer/reference/interfaces/AsyncThrottlerOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`AsyncThrottlerOptions`](/pacer/reference/interfaces/AsyncThrottlerOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/batch.md b/mintlify/pacer/reference/functions/batch.md
new file mode 100644
index 000000000..b92c12b4b
--- /dev/null
+++ b/mintlify/pacer/reference/functions/batch.md
@@ -0,0 +1,67 @@
+---
+id: batch
+title: batch
+---
+
+# Function: batch()
+
+```ts
+function batch<TValue>(fn, options): (item) => void;
+```
+
+Defined in: [batcher.ts:323](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L323)
+
+Creates a batcher that processes items in batches.
+
+This synchronous version is lighter weight and often all you need - upgrade to asyncBatch when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`items`) => `void`
+
+### options
+
+[`BatcherOptions`](/pacer/reference/interfaces/BatcherOptions)\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(item): void;
+```
+
+Adds an item to the batcher
+If the batch size is reached, timeout occurs, or shouldProcess returns true, the batch will be processed
+
+### Parameters
+
+#### item
+
+`TValue`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const batchItems = batch<number>(
+  (items) => console.log('Processing:', items),
+  {
+    maxSize: 3,
+    onExecute: (batch, batcher) => console.log('Batch executed:', batch)
+  }
+);
+
+batchItems(1);
+batchItems(2);
+batchItems(3); // Triggers batch processing
+```
diff --git a/mintlify/pacer/reference/functions/debounce.md b/mintlify/pacer/reference/functions/debounce.md
new file mode 100644
index 000000000..db296924a
--- /dev/null
+++ b/mintlify/pacer/reference/functions/debounce.md
@@ -0,0 +1,71 @@
+---
+id: debounce
+title: debounce
+---
+
+# Function: debounce()
+
+```ts
+function debounce<TFn>(fn, initialOptions): (...args) => void;
+```
+
+Defined in: [debouncer.ts:328](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L328)
+
+Creates a debounced function that delays invoking the provided function until after a specified wait time.
+Multiple calls during the wait period will cancel previous pending invocations and reset the timer.
+
+This synchronous version is lighter weight and often all you need - upgrade to asyncDebounce when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+If leading option is true, the function will execute immediately on the first call, then wait the delay
+before allowing another execution.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the debouncer
+- Use `onExecute` callback to react to function execution and implement custom logic
+- The state includes canLeadingExecute, execution count, and isPending status
+- State can be accessed via the underlying Debouncer instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`DebouncerOptions`](/pacer/reference/interfaces/DebouncerOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const debounced = debounce(() => {
+  saveChanges();
+}, { wait: 1000 });
+
+// Called repeatedly but executes at most once per second
+inputElement.addEventListener('input', debounced);
+```
diff --git a/mintlify/pacer/reference/functions/debouncerOptions.md b/mintlify/pacer/reference/functions/debouncerOptions.md
new file mode 100644
index 000000000..59892600e
--- /dev/null
+++ b/mintlify/pacer/reference/functions/debouncerOptions.md
@@ -0,0 +1,34 @@
+---
+id: debouncerOptions
+title: debouncerOptions
+---
+
+# Function: debouncerOptions()
+
+```ts
+function debouncerOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [debouncer.ts:91](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L91)
+
+Utility function for sharing common `DebouncerOptions` options between different `Debouncer` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction) = [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`DebouncerOptions`](/pacer/reference/interfaces/DebouncerOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`DebouncerOptions`](/pacer/reference/interfaces/DebouncerOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/emitChange.md b/mintlify/pacer/reference/functions/emitChange.md
new file mode 100644
index 000000000..78d736a49
--- /dev/null
+++ b/mintlify/pacer/reference/functions/emitChange.md
@@ -0,0 +1,32 @@
+---
+id: emitChange
+title: emitChange
+---
+
+# Function: emitChange()
+
+```ts
+function emitChange<TEvent>(event, instance): void;
+```
+
+Defined in: [event-client.ts:117](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L117)
+
+## Type Parameters
+
+### TEvent
+
+`TEvent` *extends* keyof [`PacerEventMap`](/pacer/reference/interfaces/PacerEventMap)
+
+## Parameters
+
+### event
+
+`TEvent`
+
+### instance
+
+`PacerUtilEmitSource`
+
+## Returns
+
+`void`
diff --git a/mintlify/pacer/reference/functions/getPacerDevtoolsInstance.md b/mintlify/pacer/reference/functions/getPacerDevtoolsInstance.md
new file mode 100644
index 000000000..638f2875b
--- /dev/null
+++ b/mintlify/pacer/reference/functions/getPacerDevtoolsInstance.md
@@ -0,0 +1,22 @@
+---
+id: getPacerDevtoolsInstance
+title: getPacerDevtoolsInstance
+---
+
+# Function: getPacerDevtoolsInstance()
+
+```ts
+function getPacerDevtoolsInstance(key): unknown;
+```
+
+Defined in: [event-client.ts:25](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L25)
+
+## Parameters
+
+### key
+
+`string`
+
+## Returns
+
+`unknown`
diff --git a/mintlify/pacer/reference/functions/isFunction.md b/mintlify/pacer/reference/functions/isFunction.md
new file mode 100644
index 000000000..4b7973191
--- /dev/null
+++ b/mintlify/pacer/reference/functions/isFunction.md
@@ -0,0 +1,28 @@
+---
+id: isFunction
+title: isFunction
+---
+
+# Function: isFunction()
+
+```ts
+function isFunction<T>(value): value is T;
+```
+
+Defined in: [utils.ts:3](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/utils.ts#L3)
+
+## Type Parameters
+
+### T
+
+`T` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Parameters
+
+### value
+
+`any`
+
+## Returns
+
+`value is T`
diff --git a/mintlify/pacer/reference/functions/parseFunctionOrValue.md b/mintlify/pacer/reference/functions/parseFunctionOrValue.md
new file mode 100644
index 000000000..04867841f
--- /dev/null
+++ b/mintlify/pacer/reference/functions/parseFunctionOrValue.md
@@ -0,0 +1,36 @@
+---
+id: parseFunctionOrValue
+title: parseFunctionOrValue
+---
+
+# Function: parseFunctionOrValue()
+
+```ts
+function parseFunctionOrValue<T, TArgs>(value, ...args): T;
+```
+
+Defined in: [utils.ts:7](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/utils.ts#L7)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### TArgs
+
+`TArgs` *extends* `any`[]
+
+## Parameters
+
+### value
+
+`T` | (...`args`) => `T`
+
+### args
+
+...`TArgs`
+
+## Returns
+
+`T`
diff --git a/mintlify/pacer/reference/functions/queue.md b/mintlify/pacer/reference/functions/queue.md
new file mode 100644
index 000000000..f1deb9157
--- /dev/null
+++ b/mintlify/pacer/reference/functions/queue.md
@@ -0,0 +1,100 @@
+---
+id: queue
+title: queue
+---
+
+# Function: queue()
+
+```ts
+function queue<TValue>(fn, initialOptions): (item, position, runOnItemsChange) => boolean;
+```
+
+Defined in: [queuer.ts:734](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L734)
+
+Creates a queue that processes items immediately upon addition.
+Items are processed sequentially in FIFO order by default.
+
+This synchronous version is lighter weight and often all you need - upgrade to asyncQueue when you need promises, retry support, abort capabilities, concurrent execution, or advanced error handling.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the queuer
+- Use `onExecute` callback to react to item execution and implement custom logic
+- Use `onItemsChange` callback to react to items being added or removed from the queue
+- Use `onExpire` callback to react to items expiring and implement custom logic
+- Use `onReject` callback to react to items being rejected when the queue is full
+- The state includes execution count, expiration count, rejection count, and isRunning status
+- State can be accessed via the underlying Queuer instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+Example usage:
+```ts
+// Basic sequential processing
+const processItems = queue<number>((n) => console.log(n), {
+  wait: 1000,
+  onItemsChange: (queuer) => console.log(queuer.peekAllItems())
+});
+processItems(1); // Logs: 1
+processItems(2); // Logs: 2 after 1 completes
+
+// Priority queue
+const processPriority = queue<number>((n) => console.log(n), {
+  getPriority: n => n // Higher numbers processed first
+});
+processPriority(1);
+processPriority(3); // Processed before 1
+```
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### fn
+
+(`item`) => `void`
+
+### initialOptions
+
+[`QueuerOptions`](/pacer/reference/interfaces/QueuerOptions)\&lt;`TValue`\>
+
+## Returns
+
+```ts
+(
+   item, 
+   position, 
+   runOnItemsChange): boolean;
+```
+
+Adds an item to the queue. If the queue is full, the item is rejected and onReject is called.
+Items can be inserted based on priority or at the front/back depending on configuration.
+
+Returns true if the item was added, false if the queue is full.
+
+Example usage:
+```ts
+queuer.addItem('task');
+queuer.addItem('task2', 'front');
+```
+
+### Parameters
+
+#### item
+
+`TValue`
+
+#### position
+
+[`QueuePosition`](/pacer/reference/type-aliases/QueuePosition) = `...`
+
+#### runOnItemsChange
+
+`boolean` = `true`
+
+### Returns
+
+`boolean`
diff --git a/mintlify/pacer/reference/functions/queuerOptions.md b/mintlify/pacer/reference/functions/queuerOptions.md
new file mode 100644
index 000000000..d9fdbb979
--- /dev/null
+++ b/mintlify/pacer/reference/functions/queuerOptions.md
@@ -0,0 +1,34 @@
+---
+id: queuerOptions
+title: queuerOptions
+---
+
+# Function: queuerOptions()
+
+```ts
+function queuerOptions<TValue, TOptions>(options): TOptions;
+```
+
+Defined in: [queuer.ts:157](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L157)
+
+Utility function for sharing common `QueuerOptions` options between different `Queuer` instances.
+
+## Type Parameters
+
+### TValue
+
+`TValue` = `any`
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`QueuerOptions`](/pacer/reference/interfaces/QueuerOptions)\&lt;`TValue`\>\> = `Partial`\&lt;[`QueuerOptions`](/pacer/reference/interfaces/QueuerOptions)\&lt;`TValue`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/rateLimit.md b/mintlify/pacer/reference/functions/rateLimit.md
new file mode 100644
index 000000000..7e02d355c
--- /dev/null
+++ b/mintlify/pacer/reference/functions/rateLimit.md
@@ -0,0 +1,107 @@
+---
+id: rateLimit
+title: rateLimit
+---
+
+# Function: rateLimit()
+
+```ts
+function rateLimit<TFn>(fn, initialOptions): (...args) => boolean;
+```
+
+Defined in: [rate-limiter.ts:423](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L423)
+
+Creates a rate-limited function that will execute the provided function up to a maximum number of times within a time window.
+
+This synchronous version is lighter weight and often all you need - upgrade to asyncRateLimit when you need promises, retry support, abort capabilities, or advanced error handling.
+
+Note that rate limiting is a simpler form of execution control compared to throttling or debouncing:
+- A rate limiter will allow all executions until the limit is reached, then block all subsequent calls until the window resets
+- A throttler ensures even spacing between executions, which can be better for consistent performance
+- A debouncer collapses multiple calls into one, which is better for handling bursts of events
+
+The rate limiter supports two types of windows:
+- 'fixed': A strict window that resets after the window period. All executions within the window count
+  towards the limit, and the window resets completely after the period.
+- 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+  consistent rate of execution over time.
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the rate limiter
+- Use `onExecute` callback to react to function execution and implement custom logic
+- Use `onReject` callback to react to executions being rejected when rate limit is exceeded
+- The state includes execution count, execution times, and rejection count
+- State can be accessed via the underlying RateLimiter instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+Consider using throttle() or debounce() if you need more intelligent execution control. Use rate limiting when you specifically
+need to enforce a hard limit on the number of executions within a time period.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`RateLimiterOptions`](/pacer/reference/interfaces/RateLimiterOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): boolean;
+```
+
+Attempts to execute the rate-limited function if within the configured limits.
+Will reject execution if the number of calls in the current window exceeds the limit.
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`boolean`
+
+### Example
+
+```ts
+const rateLimiter = new RateLimiter(fn, { limit: 5, window: 1000 });
+
+// First 5 calls will return true
+rateLimiter.maybeExecute('arg1', 'arg2'); // true
+
+// Additional calls within the window will return false
+rateLimiter.maybeExecute('arg1', 'arg2'); // false
+```
+
+## Example
+
+```ts
+// Rate limit to 5 calls per minute with a sliding window
+const rateLimited = rateLimit(makeApiCall, {
+  limit: 5,
+  window: 60000,
+  windowType: 'sliding',
+  onReject: (rateLimiter) => {
+    console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+  }
+});
+
+// First 5 calls will execute immediately
+// Additional calls will be rejected until the minute window resets
+rateLimited();
+
+// For more even execution, consider using throttle instead:
+const throttled = throttle(makeApiCall, { wait: 12000 }); // One call every 12 seconds
+```
diff --git a/mintlify/pacer/reference/functions/rateLimiterOptions.md b/mintlify/pacer/reference/functions/rateLimiterOptions.md
new file mode 100644
index 000000000..341a09edb
--- /dev/null
+++ b/mintlify/pacer/reference/functions/rateLimiterOptions.md
@@ -0,0 +1,34 @@
+---
+id: rateLimiterOptions
+title: rateLimiterOptions
+---
+
+# Function: rateLimiterOptions()
+
+```ts
+function rateLimiterOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [rate-limiter.ts:92](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L92)
+
+Utility function for sharing common `RateLimiterOptions` options between different `RateLimiter` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction) = [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`RateLimiterOptions`](/pacer/reference/interfaces/RateLimiterOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`RateLimiterOptions`](/pacer/reference/interfaces/RateLimiterOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/functions/throttle.md b/mintlify/pacer/reference/functions/throttle.md
new file mode 100644
index 000000000..455f12f89
--- /dev/null
+++ b/mintlify/pacer/reference/functions/throttle.md
@@ -0,0 +1,102 @@
+---
+id: throttle
+title: throttle
+---
+
+# Function: throttle()
+
+```ts
+function throttle<TFn>(fn, initialOptions): (...args) => void;
+```
+
+Defined in: [throttler.ts:374](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L374)
+
+Creates a throttled function that limits how often the provided function can execute.
+
+This synchronous version is lighter weight and often all you need - upgrade to asyncThrottle when you need promises, retry support, abort/cancel capabilities, or advanced error handling.
+
+Throttling ensures a function executes at most once within a specified time window,
+regardless of how many times it is called. This is useful for rate-limiting
+expensive operations or UI updates.
+
+The throttled function can be configured to execute on the leading and/or trailing
+edge of the throttle window via options.
+
+For handling bursts of events, consider using debounce() instead. For hard execution
+limits, consider using rateLimit().
+
+State Management:
+- Uses TanStack Store for reactive state management
+- Use `initialState` to provide initial state values when creating the throttler
+- Use `onExecute` callback to react to function execution and implement custom logic
+- The state includes execution count, last execution time, pending status, and more
+- State can be accessed via the underlying Throttler instance's `store.state` property
+- When using framework adapters (React/Solid), state is accessed from the hook's state property
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Parameters
+
+### fn
+
+`TFn`
+
+### initialOptions
+
+[`ThrottlerOptions`](/pacer/reference/interfaces/ThrottlerOptions)\&lt;`TFn`\>
+
+## Returns
+
+```ts
+(...args): void;
+```
+
+Attempts to execute the throttled function. The execution behavior depends on the throttler options:
+
+- If enough time has passed since the last execution (>= wait period):
+  - With leading=true: Executes immediately
+  - With leading=false: Waits for the next trailing execution
+
+- If within the wait period:
+  - With trailing=true: Schedules execution for end of wait period
+  - With trailing=false: Drops the execution
+
+### Parameters
+
+#### args
+
+...`Parameters`\&lt;`TFn`\>
+
+### Returns
+
+`void`
+
+### Example
+
+```ts
+const throttled = new Throttler(fn, { wait: 1000 });
+
+// First call executes immediately
+throttled.maybeExecute('a', 'b');
+
+// Call during wait period - gets throttled
+throttled.maybeExecute('c', 'd');
+```
+
+## Example
+
+```ts
+// Basic throttling - max once per second
+const throttled = throttle(updateUI, { wait: 1000 });
+
+// Configure leading/trailing execution
+const throttled = throttle(saveData, {
+  wait: 2000,
+  leading: true,  // Execute immediately on first call
+  trailing: true  // Execute again after delay if called during wait
+});
+```
diff --git a/mintlify/pacer/reference/functions/throttlerOptions.md b/mintlify/pacer/reference/functions/throttlerOptions.md
new file mode 100644
index 000000000..78dd4b176
--- /dev/null
+++ b/mintlify/pacer/reference/functions/throttlerOptions.md
@@ -0,0 +1,34 @@
+---
+id: throttlerOptions
+title: throttlerOptions
+---
+
+# Function: throttlerOptions()
+
+```ts
+function throttlerOptions<TFn, TOptions>(options): TOptions;
+```
+
+Defined in: [throttler.ts:95](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L95)
+
+Utility function for sharing common `ThrottlerOptions` options between different `Throttler` instances.
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction) = [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+### TOptions
+
+`TOptions` *extends* `Partial`\&lt;[`ThrottlerOptions`](/pacer/reference/interfaces/ThrottlerOptions)\&lt;`TFn`\>\> = `Partial`\&lt;[`ThrottlerOptions`](/pacer/reference/interfaces/ThrottlerOptions)\&lt;`TFn`\>\>
+
+## Parameters
+
+### options
+
+`TOptions`
+
+## Returns
+
+`TOptions`
diff --git a/mintlify/pacer/reference/index.md b/mintlify/pacer/reference/index.md
new file mode 100644
index 000000000..a262bcc35
--- /dev/null
+++ b/mintlify/pacer/reference/index.md
@@ -0,0 +1,87 @@
+---
+id: "@tanstack/pacer"
+title: "@tanstack/pacer"
+---
+
+# @tanstack/pacer
+
+## Classes
+
+- [AsyncBatcher](/pacer/reference/classes/AsyncBatcher)
+- [AsyncDebouncer](/pacer/reference/classes/AsyncDebouncer)
+- [AsyncQueuer](/pacer/reference/classes/AsyncQueuer)
+- [AsyncRateLimiter](/pacer/reference/classes/AsyncRateLimiter)
+- [AsyncRetryer](/pacer/reference/classes/AsyncRetryer)
+- [AsyncThrottler](/pacer/reference/classes/AsyncThrottler)
+- [Batcher](/pacer/reference/classes/Batcher)
+- [Debouncer](/pacer/reference/classes/Debouncer)
+- [Queuer](/pacer/reference/classes/Queuer)
+- [RateLimiter](/pacer/reference/classes/RateLimiter)
+- [Throttler](/pacer/reference/classes/Throttler)
+
+## Interfaces
+
+- [AsyncBatcherOptions](/pacer/reference/interfaces/AsyncBatcherOptions)
+- [AsyncBatcherState](/pacer/reference/interfaces/AsyncBatcherState)
+- [AsyncDebouncerOptions](/pacer/reference/interfaces/AsyncDebouncerOptions)
+- [AsyncDebouncerState](/pacer/reference/interfaces/AsyncDebouncerState)
+- [AsyncQueuerOptions](/pacer/reference/interfaces/AsyncQueuerOptions)
+- [AsyncQueuerState](/pacer/reference/interfaces/AsyncQueuerState)
+- [AsyncRateLimiterOptions](/pacer/reference/interfaces/AsyncRateLimiterOptions)
+- [AsyncRateLimiterState](/pacer/reference/interfaces/AsyncRateLimiterState)
+- [AsyncRetryerOptions](/pacer/reference/interfaces/AsyncRetryerOptions)
+- [AsyncRetryerState](/pacer/reference/interfaces/AsyncRetryerState)
+- [AsyncThrottlerOptions](/pacer/reference/interfaces/AsyncThrottlerOptions)
+- [AsyncThrottlerState](/pacer/reference/interfaces/AsyncThrottlerState)
+- [BatcherOptions](/pacer/reference/interfaces/BatcherOptions)
+- [BatcherState](/pacer/reference/interfaces/BatcherState)
+- [DebouncerOptions](/pacer/reference/interfaces/DebouncerOptions)
+- [DebouncerState](/pacer/reference/interfaces/DebouncerState)
+- [PacerDevtoolsWirePayload](/pacer/reference/interfaces/PacerDevtoolsWirePayload)
+- [PacerEventMap](/pacer/reference/interfaces/PacerEventMap)
+- [QueuerOptions](/pacer/reference/interfaces/QueuerOptions)
+- [QueuerState](/pacer/reference/interfaces/QueuerState)
+- [RateLimiterOptions](/pacer/reference/interfaces/RateLimiterOptions)
+- [RateLimiterState](/pacer/reference/interfaces/RateLimiterState)
+- [ThrottlerOptions](/pacer/reference/interfaces/ThrottlerOptions)
+- [ThrottlerState](/pacer/reference/interfaces/ThrottlerState)
+
+## Type Aliases
+
+- [AnyAsyncFunction](/pacer/reference/type-aliases/AnyAsyncFunction)
+- [AnyFunction](/pacer/reference/type-aliases/AnyFunction)
+- [OptionalKeys](/pacer/reference/type-aliases/OptionalKeys)
+- [PacerEventName](/pacer/reference/type-aliases/PacerEventName)
+- [QueuePosition](/pacer/reference/type-aliases/QueuePosition)
+
+## Variables
+
+- [pacerEventClient](/pacer/reference/variables/pacerEventClient)
+
+## Functions
+
+- [asyncBatch](/pacer/reference/functions/asyncBatch)
+- [asyncBatcherOptions](/pacer/reference/functions/asyncBatcherOptions)
+- [asyncDebounce](/pacer/reference/functions/asyncDebounce)
+- [asyncDebouncerOptions](/pacer/reference/functions/asyncDebouncerOptions)
+- [asyncQueue](/pacer/reference/functions/asyncQueue)
+- [asyncQueuerOptions](/pacer/reference/functions/asyncQueuerOptions)
+- [asyncRateLimit](/pacer/reference/functions/asyncRateLimit)
+- [asyncRateLimiterOptions](/pacer/reference/functions/asyncRateLimiterOptions)
+- [asyncRetry](/pacer/reference/functions/asyncRetry)
+- [asyncRetryerOptions](/pacer/reference/functions/asyncRetryerOptions)
+- [asyncThrottle](/pacer/reference/functions/asyncThrottle)
+- [asyncThrottlerOptions](/pacer/reference/functions/asyncThrottlerOptions)
+- [batch](/pacer/reference/functions/batch)
+- [debounce](/pacer/reference/functions/debounce)
+- [debouncerOptions](/pacer/reference/functions/debouncerOptions)
+- [emitChange](/pacer/reference/functions/emitChange)
+- [getPacerDevtoolsInstance](/pacer/reference/functions/getPacerDevtoolsInstance)
+- [isFunction](/pacer/reference/functions/isFunction)
+- [parseFunctionOrValue](/pacer/reference/functions/parseFunctionOrValue)
+- [queue](/pacer/reference/functions/queue)
+- [queuerOptions](/pacer/reference/functions/queuerOptions)
+- [rateLimit](/pacer/reference/functions/rateLimit)
+- [rateLimiterOptions](/pacer/reference/functions/rateLimiterOptions)
+- [throttle](/pacer/reference/functions/throttle)
+- [throttlerOptions](/pacer/reference/functions/throttlerOptions)
diff --git a/mintlify/pacer/reference/interfaces/AsyncBatcherOptions.md b/mintlify/pacer/reference/interfaces/AsyncBatcherOptions.md
new file mode 100644
index 000000000..47a55bd36
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncBatcherOptions.md
@@ -0,0 +1,260 @@
+---
+id: AsyncBatcherOptions
+title: AsyncBatcherOptions
+---
+
+# Interface: AsyncBatcherOptions\&lt;TValue\>
+
+Defined in: [async-batcher.ts:89](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L89)
+
+Options for configuring an AsyncBatcher instance
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### asyncRetryerOptions?
+
+```ts
+optional asyncRetryerOptions: AsyncRetryerOptions<(items) => Promise<any>>;
+```
+
+Defined in: [async-batcher.ts:93](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L93)
+
+Options for configuring the underlying async retryer
+
+***
+
+### getShouldExecute()?
+
+```ts
+optional getShouldExecute: (items, batcher) => boolean;
+```
+
+Defined in: [async-batcher.ts:100](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L100)
+
+Custom function to determine if a batch should be processed
+Return true to process the batch immediately
+
+#### Parameters
+
+##### items
+
+`TValue`[]
+
+##### batcher
+
+[`AsyncBatcher`](/pacer/reference/classes/AsyncBatcher)\&lt;`TValue`\>
+
+#### Returns
+
+`boolean`
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncBatcherState<TValue>>;
+```
+
+Defined in: [async-batcher.ts:107](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L107)
+
+Initial state for the async batcher
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-batcher.ts:112](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L112)
+
+Optional key to identify this async batcher instance.
+If provided, the async batcher will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### maxSize?
+
+```ts
+optional maxSize: number;
+```
+
+Defined in: [async-batcher.ts:117](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L117)
+
+Maximum number of items in a batch
+
+#### Default
+
+```ts
+Infinity
+```
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, batch, batcher) => void;
+```
+
+Defined in: [async-batcher.ts:123](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L123)
+
+Optional error handler for when the batch function throws.
+If provided, the handler will be called with the error, the batch of items that failed, and batcher instance.
+This can be used alongside throwOnError - the handler will be called before any error is thrown.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### batch
+
+`TValue`[]
+
+##### batcher
+
+[`AsyncBatcher`](/pacer/reference/classes/AsyncBatcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onItemsChange()?
+
+```ts
+optional onItemsChange: (batcher) => void;
+```
+
+Defined in: [async-batcher.ts:131](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L131)
+
+Callback fired after items are added to the batcher
+
+#### Parameters
+
+##### batcher
+
+[`AsyncBatcher`](/pacer/reference/classes/AsyncBatcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (batch, batcher) => void;
+```
+
+Defined in: [async-batcher.ts:135](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L135)
+
+Optional callback to call when a batch is settled (completed or failed)
+
+#### Parameters
+
+##### batch
+
+`TValue`[]
+
+##### batcher
+
+[`AsyncBatcher`](/pacer/reference/classes/AsyncBatcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, batch, batcher) => void;
+```
+
+Defined in: [async-batcher.ts:139](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L139)
+
+Optional callback to call when a batch succeeds
+
+#### Parameters
+
+##### result
+
+`any`
+
+##### batch
+
+`TValue`[]
+
+##### batcher
+
+[`AsyncBatcher`](/pacer/reference/classes/AsyncBatcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### started?
+
+```ts
+optional started: boolean;
+```
+
+Defined in: [async-batcher.ts:148](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L148)
+
+Whether the batcher should start processing immediately
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean;
+```
+
+Defined in: [async-batcher.ts:154](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L154)
+
+Whether to throw errors when they occur.
+Defaults to true if no onError handler is provided, false if an onError handler is provided.
+Can be explicitly set to override these defaults.
+
+***
+
+### wait?
+
+```ts
+optional wait: number | (asyncBatcher) => number;
+```
+
+Defined in: [async-batcher.ts:161](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L161)
+
+Maximum time in milliseconds to wait before processing a batch.
+If the wait duration has elapsed, the batch will be processed.
+If not provided, the batch will not be triggered by a timeout.
+
+#### Default
+
+```ts
+Infinity
+```
diff --git a/mintlify/pacer/reference/interfaces/AsyncBatcherState.md b/mintlify/pacer/reference/interfaces/AsyncBatcherState.md
new file mode 100644
index 000000000..9e032089a
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncBatcherState.md
@@ -0,0 +1,182 @@
+---
+id: AsyncBatcherState
+title: AsyncBatcherState
+---
+
+# Interface: AsyncBatcherState\&lt;TValue\>
+
+Defined in: [async-batcher.ts:8](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L8)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [async-batcher.ts:12](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L12)
+
+Number of batch executions that have resulted in errors
+
+***
+
+### executeCount
+
+```ts
+executeCount: number;
+```
+
+Defined in: [async-batcher.ts:16](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L16)
+
+Number of batch executions that have been executed
+
+***
+
+### failedItems
+
+```ts
+failedItems: TValue[];
+```
+
+Defined in: [async-batcher.ts:20](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L20)
+
+Array of items that failed during batch processing
+
+***
+
+### isEmpty
+
+```ts
+isEmpty: boolean;
+```
+
+Defined in: [async-batcher.ts:24](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L24)
+
+Whether the batcher has no items to process (items array is empty)
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-batcher.ts:28](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L28)
+
+Whether a batch is currently being processed asynchronously
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [async-batcher.ts:32](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L32)
+
+Whether the batcher is waiting for the timeout to trigger batch processing
+
+***
+
+### items
+
+```ts
+items: TValue[];
+```
+
+Defined in: [async-batcher.ts:36](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L36)
+
+Array of items currently queued for batch processing
+
+***
+
+### lastResult
+
+```ts
+lastResult: any;
+```
+
+Defined in: [async-batcher.ts:40](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L40)
+
+The result from the most recent batch execution
+
+***
+
+### settleCount
+
+```ts
+settleCount: number;
+```
+
+Defined in: [async-batcher.ts:44](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L44)
+
+Number of batch executions that have completed (either successfully or with errors)
+
+***
+
+### size
+
+```ts
+size: number;
+```
+
+Defined in: [async-batcher.ts:48](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L48)
+
+Number of items currently in the batch queue
+
+***
+
+### status
+
+```ts
+status: "idle" | "executing" | "pending" | "populated";
+```
+
+Defined in: [async-batcher.ts:52](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L52)
+
+Current processing status - 'idle' when not processing, 'pending' when waiting for timeout, 'executing' when processing, 'populated' when items are present, but no wait is configured
+
+***
+
+### successCount
+
+```ts
+successCount: number;
+```
+
+Defined in: [async-batcher.ts:56](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L56)
+
+Number of batch executions that have completed successfully
+
+***
+
+### totalItemsFailed
+
+```ts
+totalItemsFailed: number;
+```
+
+Defined in: [async-batcher.ts:60](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L60)
+
+Total number of items that have failed processing across all batches
+
+***
+
+### totalItemsProcessed
+
+```ts
+totalItemsProcessed: number;
+```
+
+Defined in: [async-batcher.ts:64](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-batcher.ts#L64)
+
+Total number of items that have been processed across all batches
diff --git a/mintlify/pacer/reference/interfaces/AsyncDebouncerOptions.md b/mintlify/pacer/reference/interfaces/AsyncDebouncerOptions.md
new file mode 100644
index 000000000..1eead2e8a
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncDebouncerOptions.md
@@ -0,0 +1,209 @@
+---
+id: AsyncDebouncerOptions
+title: AsyncDebouncerOptions
+---
+
+# Interface: AsyncDebouncerOptions\&lt;TFn\>
+
+Defined in: [async-debouncer.ts:71](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L71)
+
+Options for configuring an async debounced function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### asyncRetryerOptions?
+
+```ts
+optional asyncRetryerOptions: AsyncRetryerOptions<TFn>;
+```
+
+Defined in: [async-debouncer.ts:75](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L75)
+
+Options for configuring the underlying async retryer
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean | (debouncer) => boolean;
+```
+
+Defined in: [async-debouncer.ts:81](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L81)
+
+Whether the debouncer is enabled. When disabled, maybeExecute will not trigger any executions.
+Can be a boolean or a function that returns a boolean.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncDebouncerState<TFn>>;
+```
+
+Defined in: [async-debouncer.ts:85](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L85)
+
+Initial state for the async debouncer
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-debouncer.ts:90](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L90)
+
+Optional key to identify this async debouncer instance.
+If provided, the async debouncer will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [async-debouncer.ts:95](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L95)
+
+Whether to execute on the leading edge of the timeout.
+Defaults to false.
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, args, debouncer) => void;
+```
+
+Defined in: [async-debouncer.ts:101](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L101)
+
+Optional error handler for when the debounced function throws.
+If provided, the handler will be called with the error and debouncer instance.
+This can be used alongside throwOnError - the handler will be called before any error is thrown.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### debouncer
+
+[`AsyncDebouncer`](/pacer/reference/classes/AsyncDebouncer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (args, debouncer) => void;
+```
+
+Defined in: [async-debouncer.ts:109](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L109)
+
+Optional callback to call when the debounced function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### debouncer
+
+[`AsyncDebouncer`](/pacer/reference/classes/AsyncDebouncer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, args, debouncer) => void;
+```
+
+Defined in: [async-debouncer.ts:113](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L113)
+
+Optional callback to call when the debounced function is executed
+
+#### Parameters
+
+##### result
+
+`ReturnType`\&lt;`TFn`\>
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### debouncer
+
+[`AsyncDebouncer`](/pacer/reference/classes/AsyncDebouncer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean;
+```
+
+Defined in: [async-debouncer.ts:123](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L123)
+
+Whether to throw errors when they occur.
+Defaults to true if no onError handler is provided, false if an onError handler is provided.
+Can be explicitly set to override these defaults.
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [async-debouncer.ts:128](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L128)
+
+Whether to execute on the trailing edge of the timeout.
+Defaults to true.
+
+***
+
+### wait
+
+```ts
+wait: number | (debouncer) => number;
+```
+
+Defined in: [async-debouncer.ts:134](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L134)
+
+Delay in milliseconds to wait after the last call before executing.
+Can be a number or a function that returns a number.
+Defaults to 0ms
diff --git a/mintlify/pacer/reference/interfaces/AsyncDebouncerState.md b/mintlify/pacer/reference/interfaces/AsyncDebouncerState.md
new file mode 100644
index 000000000..6151505f8
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncDebouncerState.md
@@ -0,0 +1,134 @@
+---
+id: AsyncDebouncerState
+title: AsyncDebouncerState
+---
+
+# Interface: AsyncDebouncerState\&lt;TFn\>
+
+Defined in: [async-debouncer.ts:8](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L8)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### canLeadingExecute
+
+```ts
+canLeadingExecute: boolean;
+```
+
+Defined in: [async-debouncer.ts:12](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L12)
+
+Whether the debouncer can execute on the leading edge of the timeout
+
+***
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [async-debouncer.ts:16](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L16)
+
+Number of function executions that have resulted in errors
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-debouncer.ts:20](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L20)
+
+Whether the debounced function is currently executing asynchronously
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [async-debouncer.ts:24](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L24)
+
+Whether the debouncer is waiting for the timeout to trigger execution
+
+***
+
+### lastArgs
+
+```ts
+lastArgs: Parameters<TFn> | undefined;
+```
+
+Defined in: [async-debouncer.ts:28](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L28)
+
+The arguments from the most recent call to maybeExecute
+
+***
+
+### lastResult
+
+```ts
+lastResult: ReturnType<TFn> | undefined;
+```
+
+Defined in: [async-debouncer.ts:32](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L32)
+
+The result from the most recent successful function execution
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [async-debouncer.ts:36](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L36)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### settleCount
+
+```ts
+settleCount: number;
+```
+
+Defined in: [async-debouncer.ts:40](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L40)
+
+Number of function executions that have completed (either successfully or with errors)
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "executing" | "pending" | "settled";
+```
+
+Defined in: [async-debouncer.ts:44](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L44)
+
+Current execution status - 'idle' when not active, 'pending' when waiting, 'executing' when running, 'settled' when completed
+
+***
+
+### successCount
+
+```ts
+successCount: number;
+```
+
+Defined in: [async-debouncer.ts:48](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-debouncer.ts#L48)
+
+Number of function executions that have completed successfully
diff --git a/mintlify/pacer/reference/interfaces/AsyncQueuerOptions.md b/mintlify/pacer/reference/interfaces/AsyncQueuerOptions.md
new file mode 100644
index 000000000..ec17cff26
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncQueuerOptions.md
@@ -0,0 +1,401 @@
+---
+id: AsyncQueuerOptions
+title: AsyncQueuerOptions
+---
+
+# Interface: AsyncQueuerOptions\&lt;TValue\>
+
+Defined in: [async-queuer.ts:112](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L112)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### addItemsTo?
+
+```ts
+optional addItemsTo: QueuePosition;
+```
+
+Defined in: [async-queuer.ts:121](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L121)
+
+Default position to add items to the queuer
+
+#### Default
+
+```ts
+'back'
+```
+
+***
+
+### asyncRetryerOptions?
+
+```ts
+optional asyncRetryerOptions: AsyncRetryerOptions<(item) => Promise<any>>;
+```
+
+Defined in: [async-queuer.ts:116](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L116)
+
+Options for configuring the underlying async retryer
+
+***
+
+### concurrency?
+
+```ts
+optional concurrency: number | (queuer) => number;
+```
+
+Defined in: [async-queuer.ts:127](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L127)
+
+Maximum number of concurrent tasks to process.
+Can be a number or a function that returns a number.
+
+#### Default
+
+```ts
+1
+```
+
+***
+
+### expirationDuration?
+
+```ts
+optional expirationDuration: number;
+```
+
+Defined in: [async-queuer.ts:132](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L132)
+
+Maximum time in milliseconds that an item can stay in the queue
+If not provided, items will never expire
+
+***
+
+### getIsExpired()?
+
+```ts
+optional getIsExpired: (item, addedAt) => boolean;
+```
+
+Defined in: [async-queuer.ts:137](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L137)
+
+Function to determine if an item has expired
+If provided, this overrides the expirationDuration behavior
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### addedAt
+
+`number`
+
+#### Returns
+
+`boolean`
+
+***
+
+### getItemsFrom?
+
+```ts
+optional getItemsFrom: QueuePosition;
+```
+
+Defined in: [async-queuer.ts:142](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L142)
+
+Default position to get items from during processing
+
+#### Default
+
+```ts
+'front'
+```
+
+***
+
+### getPriority()?
+
+```ts
+optional getPriority: (item) => number;
+```
+
+Defined in: [async-queuer.ts:148](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L148)
+
+Function to determine priority of items in the queuer
+Higher priority items will be processed first
+If not provided, will use static priority values attached to tasks
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`number`
+
+***
+
+### initialItems?
+
+```ts
+optional initialItems: TValue[];
+```
+
+Defined in: [async-queuer.ts:152](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L152)
+
+Initial items to populate the queuer with
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncQueuerState<TValue>>;
+```
+
+Defined in: [async-queuer.ts:156](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L156)
+
+Initial state for the async queuer
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-queuer.ts:161](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L161)
+
+Optional key to identify this async queuer instance.
+If provided, the async queuer will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### maxSize?
+
+```ts
+optional maxSize: number;
+```
+
+Defined in: [async-queuer.ts:165](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L165)
+
+Maximum number of items allowed in the queuer
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, item, queuer) => void;
+```
+
+Defined in: [async-queuer.ts:171](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L171)
+
+Optional error handler for when a task throws.
+If provided, the handler will be called with the error and queuer instance.
+This can be used alongside throwOnError - the handler will be called before any error is thrown.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onExpire()?
+
+```ts
+optional onExpire: (item, queuer) => void;
+```
+
+Defined in: [async-queuer.ts:175](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L175)
+
+Callback fired whenever an item expires in the queuer
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onItemsChange()?
+
+```ts
+optional onItemsChange: (queuer) => void;
+```
+
+Defined in: [async-queuer.ts:179](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L179)
+
+Callback fired whenever an item is added or removed from the queuer
+
+#### Parameters
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onReject()?
+
+```ts
+optional onReject: (item, queuer) => void;
+```
+
+Defined in: [async-queuer.ts:183](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L183)
+
+Callback fired whenever an item is rejected from being added to the queuer
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (item, queuer) => void;
+```
+
+Defined in: [async-queuer.ts:187](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L187)
+
+Optional callback to call when a task is settled
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, item, queuer) => void;
+```
+
+Defined in: [async-queuer.ts:191](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L191)
+
+Optional callback to call when a task succeeds
+
+#### Parameters
+
+##### result
+
+`any`
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`AsyncQueuer`](/pacer/reference/classes/AsyncQueuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### started?
+
+```ts
+optional started: boolean;
+```
+
+Defined in: [async-queuer.ts:195](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L195)
+
+Whether the queuer should start processing tasks immediately or not.
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean;
+```
+
+Defined in: [async-queuer.ts:201](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L201)
+
+Whether to throw errors when they occur.
+Defaults to true if no onError handler is provided, false if an onError handler is provided.
+Can be explicitly set to override these defaults.
+
+***
+
+### wait?
+
+```ts
+optional wait: number | (queuer) => number;
+```
+
+Defined in: [async-queuer.ts:207](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L207)
+
+Time in milliseconds to wait between processing items.
+Can be a number or a function that returns a number.
+
+#### Default
+
+```ts
+0
+```
diff --git a/mintlify/pacer/reference/interfaces/AsyncQueuerState.md b/mintlify/pacer/reference/interfaces/AsyncQueuerState.md
new file mode 100644
index 000000000..758b7db6e
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncQueuerState.md
@@ -0,0 +1,242 @@
+---
+id: AsyncQueuerState
+title: AsyncQueuerState
+---
+
+# Interface: AsyncQueuerState\&lt;TValue\>
+
+Defined in: [async-queuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L9)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### activeItems
+
+```ts
+activeItems: TValue[];
+```
+
+Defined in: [async-queuer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L13)
+
+Items currently being processed by the queuer
+
+***
+
+### addItemCount
+
+```ts
+addItemCount: number;
+```
+
+Defined in: [async-queuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L17)
+
+Number of times addItem has been called (for reduction calculations)
+
+***
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [async-queuer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L21)
+
+Number of task executions that have resulted in errors
+
+***
+
+### executeCount
+
+```ts
+executeCount: number;
+```
+
+Defined in: [async-queuer.ts:25](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L25)
+
+Number of times execute has been called
+
+***
+
+### expirationCount
+
+```ts
+expirationCount: number;
+```
+
+Defined in: [async-queuer.ts:29](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L29)
+
+Number of items that have been removed from the queue due to expiration
+
+***
+
+### isEmpty
+
+```ts
+isEmpty: boolean;
+```
+
+Defined in: [async-queuer.ts:33](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L33)
+
+Whether the queuer has no items to process (items array is empty)
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-queuer.ts:37](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L37)
+
+Whether the queuer is currently executing
+
+***
+
+### isFull
+
+```ts
+isFull: boolean;
+```
+
+Defined in: [async-queuer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L41)
+
+Whether the queuer has reached its maximum capacity
+
+***
+
+### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+Defined in: [async-queuer.ts:45](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L45)
+
+Whether the queuer is not currently processing any items
+
+***
+
+### isRunning
+
+```ts
+isRunning: boolean;
+```
+
+Defined in: [async-queuer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L49)
+
+Whether the queuer is active and will process items automatically
+
+***
+
+### items
+
+```ts
+items: TValue[];
+```
+
+Defined in: [async-queuer.ts:53](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L53)
+
+Array of items currently waiting to be processed
+
+***
+
+### itemTimestamps
+
+```ts
+itemTimestamps: number[];
+```
+
+Defined in: [async-queuer.ts:57](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L57)
+
+Timestamps when items were added to the queue for expiration tracking
+
+***
+
+### lastResult
+
+```ts
+lastResult: any;
+```
+
+Defined in: [async-queuer.ts:61](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L61)
+
+The result from the most recent task execution
+
+***
+
+### pendingTick
+
+```ts
+pendingTick: boolean;
+```
+
+Defined in: [async-queuer.ts:65](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L65)
+
+Whether the queuer has a pending timeout for processing the next item
+
+***
+
+### rejectionCount
+
+```ts
+rejectionCount: number;
+```
+
+Defined in: [async-queuer.ts:69](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L69)
+
+Number of items that have been rejected from being added to the queue
+
+***
+
+### settledCount
+
+```ts
+settledCount: number;
+```
+
+Defined in: [async-queuer.ts:73](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L73)
+
+Number of task executions that have completed (either successfully or with errors)
+
+***
+
+### size
+
+```ts
+size: number;
+```
+
+Defined in: [async-queuer.ts:77](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L77)
+
+Number of items currently in the queue
+
+***
+
+### status
+
+```ts
+status: "idle" | "running" | "stopped";
+```
+
+Defined in: [async-queuer.ts:81](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L81)
+
+Current processing status - 'idle' when not processing, 'running' when active, 'stopped' when paused
+
+***
+
+### successCount
+
+```ts
+successCount: number;
+```
+
+Defined in: [async-queuer.ts:85](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-queuer.ts#L85)
+
+Number of task executions that have completed successfully
diff --git a/mintlify/pacer/reference/interfaces/AsyncRateLimiterOptions.md b/mintlify/pacer/reference/interfaces/AsyncRateLimiterOptions.md
new file mode 100644
index 000000000..75cb22ddb
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncRateLimiterOptions.md
@@ -0,0 +1,236 @@
+---
+id: AsyncRateLimiterOptions
+title: AsyncRateLimiterOptions
+---
+
+# Interface: AsyncRateLimiterOptions\&lt;TFn\>
+
+Defined in: [async-rate-limiter.ts:71](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L71)
+
+Options for configuring an async rate-limited function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### asyncRetryerOptions?
+
+```ts
+optional asyncRetryerOptions: AsyncRetryerOptions<TFn>;
+```
+
+Defined in: [async-rate-limiter.ts:75](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L75)
+
+Options for configuring the underlying async retryer
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean | (rateLimiter) => boolean;
+```
+
+Defined in: [async-rate-limiter.ts:81](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L81)
+
+Whether the rate limiter is enabled. When disabled, maybeExecute will not trigger any executions.
+Can be a boolean or a function that returns a boolean.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncRateLimiterState<TFn>>;
+```
+
+Defined in: [async-rate-limiter.ts:85](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L85)
+
+Initial state for the rate limiter
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-rate-limiter.ts:90](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L90)
+
+Optional key to identify this async rate limiter instance.
+If provided, the async rate limiter will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### limit
+
+```ts
+limit: number | (rateLimiter) => number;
+```
+
+Defined in: [async-rate-limiter.ts:95](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L95)
+
+Maximum number of executions allowed within the time window.
+Can be a number or a function that returns a number.
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, args, rateLimiter) => void;
+```
+
+Defined in: [async-rate-limiter.ts:101](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L101)
+
+Optional error handler for when the rate-limited function throws.
+If provided, the handler will be called with the error and rate limiter instance.
+This can be used alongside throwOnError - the handler will be called before any error is thrown.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### rateLimiter
+
+[`AsyncRateLimiter`](/pacer/reference/classes/AsyncRateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onReject()?
+
+```ts
+optional onReject: (args, rateLimiter) => void;
+```
+
+Defined in: [async-rate-limiter.ts:109](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L109)
+
+Optional callback function that is called when an execution is rejected due to rate limiting
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### rateLimiter
+
+[`AsyncRateLimiter`](/pacer/reference/classes/AsyncRateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (args, rateLimiter) => void;
+```
+
+Defined in: [async-rate-limiter.ts:113](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L113)
+
+Optional function to call when the rate-limited function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### rateLimiter
+
+[`AsyncRateLimiter`](/pacer/reference/classes/AsyncRateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, args, rateLimiter) => void;
+```
+
+Defined in: [async-rate-limiter.ts:120](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L120)
+
+Optional function to call when the rate-limited function is executed
+
+#### Parameters
+
+##### result
+
+`ReturnType`\&lt;`TFn`\>
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### rateLimiter
+
+[`AsyncRateLimiter`](/pacer/reference/classes/AsyncRateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean;
+```
+
+Defined in: [async-rate-limiter.ts:130](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L130)
+
+Whether to throw errors when they occur.
+Defaults to true if no onError handler is provided, false if an onError handler is provided.
+Can be explicitly set to override these defaults.
+
+***
+
+### window
+
+```ts
+window: number | (rateLimiter) => number;
+```
+
+Defined in: [async-rate-limiter.ts:135](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L135)
+
+Time window in milliseconds within which the limit applies.
+Can be a number or a function that returns a number.
+
+***
+
+### windowType?
+
+```ts
+optional windowType: "fixed" | "sliding";
+```
+
+Defined in: [async-rate-limiter.ts:142](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L142)
+
+Type of window to use for rate limiting
+- 'fixed': Uses a fixed window that resets after the window period
+- 'sliding': Uses a sliding window that allows executions as old ones expire
+Defaults to 'fixed'
diff --git a/mintlify/pacer/reference/interfaces/AsyncRateLimiterState.md b/mintlify/pacer/reference/interfaces/AsyncRateLimiterState.md
new file mode 100644
index 000000000..a4ec97645
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncRateLimiterState.md
@@ -0,0 +1,134 @@
+---
+id: AsyncRateLimiterState
+title: AsyncRateLimiterState
+---
+
+# Interface: AsyncRateLimiterState\&lt;TFn\>
+
+Defined in: [async-rate-limiter.ts:8](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L8)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [async-rate-limiter.ts:12](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L12)
+
+Number of function executions that have resulted in errors
+
+***
+
+### executionTimes
+
+```ts
+executionTimes: number[];
+```
+
+Defined in: [async-rate-limiter.ts:16](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L16)
+
+Array of timestamps when executions occurred for rate limiting calculations
+
+***
+
+### isExceeded
+
+```ts
+isExceeded: boolean;
+```
+
+Defined in: [async-rate-limiter.ts:20](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L20)
+
+Whether the rate limiter has exceeded the limit
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-rate-limiter.ts:24](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L24)
+
+Whether the rate-limited function is currently executing asynchronously
+
+***
+
+### lastResult
+
+```ts
+lastResult: ReturnType<TFn> | undefined;
+```
+
+Defined in: [async-rate-limiter.ts:28](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L28)
+
+The result from the most recent successful function execution
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [async-rate-limiter.ts:48](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L48)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### rejectionCount
+
+```ts
+rejectionCount: number;
+```
+
+Defined in: [async-rate-limiter.ts:32](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L32)
+
+Number of function executions that have been rejected due to rate limiting
+
+***
+
+### settleCount
+
+```ts
+settleCount: number;
+```
+
+Defined in: [async-rate-limiter.ts:36](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L36)
+
+Number of function executions that have completed (either successfully or with errors)
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "executing" | "exceeded";
+```
+
+Defined in: [async-rate-limiter.ts:40](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L40)
+
+Current execution status - 'disabled' when not active, 'executing' when executing, 'idle' when not executing, 'exceeded' when rate limit is exceeded
+
+***
+
+### successCount
+
+```ts
+successCount: number;
+```
+
+Defined in: [async-rate-limiter.ts:44](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-rate-limiter.ts#L44)
+
+Number of function executions that have completed successfully
diff --git a/mintlify/pacer/reference/interfaces/AsyncRetryerOptions.md b/mintlify/pacer/reference/interfaces/AsyncRetryerOptions.md
new file mode 100644
index 000000000..c761561d8
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncRetryerOptions.md
@@ -0,0 +1,419 @@
+---
+id: AsyncRetryerOptions
+title: AsyncRetryerOptions
+---
+
+# Interface: AsyncRetryerOptions\&lt;TFn\>
+
+Defined in: [async-retryer.ts:60](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L60)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### backoff?
+
+```ts
+optional backoff: "linear" | "exponential" | "fixed";
+```
+
+Defined in: [async-retryer.ts:68](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L68)
+
+The backoff strategy for retry delays:
+- 'exponential': Wait time doubles with each attempt (1s, 2s, 4s, ...)
+- 'linear': Wait time increases linearly (1s, 2s, 3s, ...)
+- 'fixed': Same wait time for all attempts
+
+#### Default
+
+```ts
+'exponential'
+```
+
+***
+
+### baseWait?
+
+```ts
+optional baseWait: number | (retryer) => number;
+```
+
+Defined in: [async-retryer.ts:73](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L73)
+
+Base wait time in milliseconds between retries, or a function that returns the wait time
+
+#### Default
+
+```ts
+1000
+```
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean | (retryer) => boolean;
+```
+
+Defined in: [async-retryer.ts:78](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L78)
+
+Whether the retryer is enabled, or a function that determines if it's enabled
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncRetryerState<TFn>>;
+```
+
+Defined in: [async-retryer.ts:82](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L82)
+
+Initial state to merge with the default state
+
+***
+
+### jitter?
+
+```ts
+optional jitter: number;
+```
+
+Defined in: [async-retryer.ts:87](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L87)
+
+Jitter percentage to add to retry delays (0-1). Adds randomness to prevent thundering herd.
+
+#### Default
+
+```ts
+0
+```
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-retryer.ts:92](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L92)
+
+Optional key to identify this async retryer instance.
+If provided, the async retryer will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### maxAttempts?
+
+```ts
+optional maxAttempts: number | (retryer) => number;
+```
+
+Defined in: [async-retryer.ts:97](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L97)
+
+Maximum number of retry attempts, or a function that returns the max attempts
+
+#### Default
+
+```ts
+3
+```
+
+***
+
+### maxExecutionTime?
+
+```ts
+optional maxExecutionTime: number;
+```
+
+Defined in: [async-retryer.ts:102](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L102)
+
+Maximum execution time in milliseconds for a single function call before aborting
+
+#### Default
+
+```ts
+Infinity
+```
+
+***
+
+### maxTotalExecutionTime?
+
+```ts
+optional maxTotalExecutionTime: number;
+```
+
+Defined in: [async-retryer.ts:107](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L107)
+
+Maximum total execution time in milliseconds for the entire retry operation before aborting
+
+#### Default
+
+```ts
+Infinity
+```
+
+***
+
+### maxWait?
+
+```ts
+optional maxWait: number | (retryer) => number;
+```
+
+Defined in: [async-retryer.ts:112](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L112)
+
+Maximum wait time in milliseconds to cap retry delays, or a function that returns the max wait time
+
+#### Default
+
+```ts
+Infinity
+```
+
+***
+
+### onAbort()?
+
+```ts
+optional onAbort: (reason, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:116](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L116)
+
+Callback invoked when the execution is aborted (manually or due to timeouts)
+
+#### Parameters
+
+##### reason
+
+`"manual"` | `"execution-timeout"` | `"total-timeout"` | `"new-execution"`
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, args, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:123](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L123)
+
+Callback invoked when any error occurs during execution (including retries)
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onExecutionTimeout()?
+
+```ts
+optional onExecutionTimeout: (retryer) => void;
+```
+
+Defined in: [async-retryer.ts:131](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L131)
+
+Callback invoked when a single execution attempt times out (maxExecutionTime exceeded)
+
+#### Parameters
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onLastError()?
+
+```ts
+optional onLastError: (error, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:135](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L135)
+
+Callback invoked when the final error occurs after all retries are exhausted
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onRetry()?
+
+```ts
+optional onRetry: (attempt, error, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:139](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L139)
+
+Callback invoked before each retry attempt
+
+#### Parameters
+
+##### attempt
+
+`number`
+
+##### error
+
+`Error`
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (args, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:143](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L143)
+
+Callback invoked after execution completes (success or failure) of each attempt
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, args, retryer) => void;
+```
+
+Defined in: [async-retryer.ts:147](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L147)
+
+Callback invoked when execution succeeds
+
+#### Parameters
+
+##### result
+
+`Awaited`\&lt;`ReturnType`\&lt;`TFn`\>\>
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onTotalExecutionTimeout()?
+
+```ts
+optional onTotalExecutionTimeout: (retryer) => void;
+```
+
+Defined in: [async-retryer.ts:155](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L155)
+
+Callback invoked when the total execution time times out (maxTotalExecutionTime exceeded)
+
+#### Parameters
+
+##### retryer
+
+[`AsyncRetryer`](/pacer/reference/classes/AsyncRetryer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean | "last";
+```
+
+Defined in: [async-retryer.ts:163](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L163)
+
+Controls when errors are thrown:
+- 'last': Only throw the final error after all retries are exhausted
+- true: Throw every error immediately (disables retrying)
+- false: Never throw errors, return undefined instead
+
+#### Default
+
+```ts
+'last'
+```
diff --git a/mintlify/pacer/reference/interfaces/AsyncRetryerState.md b/mintlify/pacer/reference/interfaces/AsyncRetryerState.md
new file mode 100644
index 000000000..5763f67be
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncRetryerState.md
@@ -0,0 +1,110 @@
+---
+id: AsyncRetryerState
+title: AsyncRetryerState
+---
+
+# Interface: AsyncRetryerState\&lt;TFn\>
+
+Defined in: [async-retryer.ts:6](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L6)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### currentAttempt
+
+```ts
+currentAttempt: number;
+```
+
+Defined in: [async-retryer.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L10)
+
+The current retry attempt number (0 when not executing)
+
+***
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [async-retryer.ts:14](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L14)
+
+Total number of completed executions (successful or failed)
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-retryer.ts:18](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L18)
+
+Whether the retryer is currently executing the function
+
+***
+
+### lastError
+
+```ts
+lastError: Error | undefined;
+```
+
+Defined in: [async-retryer.ts:22](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L22)
+
+The most recent error encountered during execution
+
+***
+
+### lastExecutionTime
+
+```ts
+lastExecutionTime: number;
+```
+
+Defined in: [async-retryer.ts:26](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L26)
+
+Timestamp of the last execution completion in milliseconds
+
+***
+
+### lastResult
+
+```ts
+lastResult: Awaited<ReturnType<TFn>> | undefined;
+```
+
+Defined in: [async-retryer.ts:30](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L30)
+
+The result from the most recent successful execution
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "executing" | "retrying";
+```
+
+Defined in: [async-retryer.ts:34](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L34)
+
+Current execution status - 'disabled' when not enabled, 'idle' when ready, 'executing' when running
+
+***
+
+### totalExecutionTime
+
+```ts
+totalExecutionTime: number;
+```
+
+Defined in: [async-retryer.ts:38](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-retryer.ts#L38)
+
+Total time spent executing (including retries) in milliseconds
diff --git a/mintlify/pacer/reference/interfaces/AsyncThrottlerOptions.md b/mintlify/pacer/reference/interfaces/AsyncThrottlerOptions.md
new file mode 100644
index 000000000..65b32db0b
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncThrottlerOptions.md
@@ -0,0 +1,209 @@
+---
+id: AsyncThrottlerOptions
+title: AsyncThrottlerOptions
+---
+
+# Interface: AsyncThrottlerOptions\&lt;TFn\>
+
+Defined in: [async-throttler.ts:76](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L76)
+
+Options for configuring an async throttled function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### asyncRetryerOptions?
+
+```ts
+optional asyncRetryerOptions: AsyncRetryerOptions<TFn>;
+```
+
+Defined in: [async-throttler.ts:80](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L80)
+
+Options for configuring the underlying async retryer
+
+***
+
+### enabled?
+
+```ts
+optional enabled: boolean | (throttler) => boolean;
+```
+
+Defined in: [async-throttler.ts:86](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L86)
+
+Whether the throttler is enabled. When disabled, maybeExecute will not trigger any executions.
+Can be a boolean or a function that returns a boolean.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<AsyncThrottlerState<TFn>>;
+```
+
+Defined in: [async-throttler.ts:90](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L90)
+
+Initial state for the async throttler
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [async-throttler.ts:95](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L95)
+
+Optional key to identify this async throttler instance.
+If provided, the async throttler will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [async-throttler.ts:100](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L100)
+
+Whether to execute the function immediately when called
+Defaults to true
+
+***
+
+### onError()?
+
+```ts
+optional onError: (error, args, asyncThrottler) => void;
+```
+
+Defined in: [async-throttler.ts:106](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L106)
+
+Optional error handler for when the throttled function throws.
+If provided, the handler will be called with the error and throttler instance.
+This can be used alongside throwOnError - the handler will be called before any error is thrown.
+
+#### Parameters
+
+##### error
+
+`Error`
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### asyncThrottler
+
+[`AsyncThrottler`](/pacer/reference/classes/AsyncThrottler)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSettled()?
+
+```ts
+optional onSettled: (args, asyncThrottler) => void;
+```
+
+Defined in: [async-throttler.ts:114](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L114)
+
+Optional function to call when the throttled function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### asyncThrottler
+
+[`AsyncThrottler`](/pacer/reference/classes/AsyncThrottler)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onSuccess()?
+
+```ts
+optional onSuccess: (result, args, asyncThrottler) => void;
+```
+
+Defined in: [async-throttler.ts:121](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L121)
+
+Optional function to call when the throttled function is executed
+
+#### Parameters
+
+##### result
+
+`ReturnType`\&lt;`TFn`\>
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### asyncThrottler
+
+[`AsyncThrottler`](/pacer/reference/classes/AsyncThrottler)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### throwOnError?
+
+```ts
+optional throwOnError: boolean;
+```
+
+Defined in: [async-throttler.ts:131](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L131)
+
+Whether to throw errors when they occur.
+Defaults to true if no onError handler is provided, false if an onError handler is provided.
+Can be explicitly set to override these defaults.
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [async-throttler.ts:136](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L136)
+
+Whether to execute the function on the trailing edge of the wait period
+Defaults to true
+
+***
+
+### wait
+
+```ts
+wait: number | (throttler) => number;
+```
+
+Defined in: [async-throttler.ts:142](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L142)
+
+Time window in milliseconds during which the function can only be executed once.
+Can be a number or a function that returns a number.
+Defaults to 0ms
diff --git a/mintlify/pacer/reference/interfaces/AsyncThrottlerState.md b/mintlify/pacer/reference/interfaces/AsyncThrottlerState.md
new file mode 100644
index 000000000..f408bb2fe
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/AsyncThrottlerState.md
@@ -0,0 +1,146 @@
+---
+id: AsyncThrottlerState
+title: AsyncThrottlerState
+---
+
+# Interface: AsyncThrottlerState\&lt;TFn\>
+
+Defined in: [async-throttler.ts:8](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L8)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyAsyncFunction`](/pacer/reference/type-aliases/AnyAsyncFunction)
+
+## Properties
+
+### errorCount
+
+```ts
+errorCount: number;
+```
+
+Defined in: [async-throttler.ts:12](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L12)
+
+Number of function executions that have resulted in errors
+
+***
+
+### isExecuting
+
+```ts
+isExecuting: boolean;
+```
+
+Defined in: [async-throttler.ts:16](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L16)
+
+Whether the throttled function is currently executing asynchronously
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [async-throttler.ts:20](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L20)
+
+Whether the throttler is waiting for the timeout to trigger execution
+
+***
+
+### lastArgs
+
+```ts
+lastArgs: Parameters<TFn> | undefined;
+```
+
+Defined in: [async-throttler.ts:24](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L24)
+
+The arguments from the most recent call to maybeExecute
+
+***
+
+### lastExecutionTime
+
+```ts
+lastExecutionTime: number;
+```
+
+Defined in: [async-throttler.ts:28](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L28)
+
+Timestamp of the last function execution in milliseconds
+
+***
+
+### lastResult
+
+```ts
+lastResult: ReturnType<TFn> | undefined;
+```
+
+Defined in: [async-throttler.ts:32](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L32)
+
+The result from the most recent successful function execution
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [async-throttler.ts:36](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L36)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### nextExecutionTime
+
+```ts
+nextExecutionTime: number | undefined;
+```
+
+Defined in: [async-throttler.ts:40](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L40)
+
+Timestamp when the next execution can occur in milliseconds
+
+***
+
+### settleCount
+
+```ts
+settleCount: number;
+```
+
+Defined in: [async-throttler.ts:44](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L44)
+
+Number of function executions that have completed (either successfully or with errors)
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "executing" | "pending" | "settled";
+```
+
+Defined in: [async-throttler.ts:48](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L48)
+
+Current execution status - 'idle' when not active, 'pending' when waiting, 'executing' when running, 'settled' when completed
+
+***
+
+### successCount
+
+```ts
+successCount: number;
+```
+
+Defined in: [async-throttler.ts:52](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/async-throttler.ts#L52)
+
+Number of function executions that have completed successfully
diff --git a/mintlify/pacer/reference/interfaces/BatcherOptions.md b/mintlify/pacer/reference/interfaces/BatcherOptions.md
new file mode 100644
index 000000000..c8757db61
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/BatcherOptions.md
@@ -0,0 +1,172 @@
+---
+id: BatcherOptions
+title: BatcherOptions
+---
+
+# Interface: BatcherOptions\&lt;TValue\>
+
+Defined in: [batcher.ts:52](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L52)
+
+Options for configuring a Batcher instance
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### getShouldExecute()?
+
+```ts
+optional getShouldExecute: (items, batcher) => boolean;
+```
+
+Defined in: [batcher.ts:57](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L57)
+
+Custom function to determine if a batch should be processed
+Return true to process the batch immediately
+
+#### Parameters
+
+##### items
+
+`TValue`[]
+
+##### batcher
+
+[`Batcher`](/pacer/reference/classes/Batcher)\&lt;`TValue`\>
+
+#### Returns
+
+`boolean`
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<BatcherState<TValue>>;
+```
+
+Defined in: [batcher.ts:61](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L61)
+
+Initial state for the batcher
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [batcher.ts:66](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L66)
+
+Optional key to identify this batcher instance.
+If provided, the batcher will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### maxSize?
+
+```ts
+optional maxSize: number;
+```
+
+Defined in: [batcher.ts:71](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L71)
+
+Maximum number of items in a batch
+
+#### Default
+
+```ts
+Infinity
+```
+
+***
+
+### onExecute()?
+
+```ts
+optional onExecute: (batch, batcher) => void;
+```
+
+Defined in: [batcher.ts:75](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L75)
+
+Callback fired after a batch is processed
+
+#### Parameters
+
+##### batch
+
+`TValue`[]
+
+##### batcher
+
+[`Batcher`](/pacer/reference/classes/Batcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onItemsChange()?
+
+```ts
+optional onItemsChange: (batcher) => void;
+```
+
+Defined in: [batcher.ts:79](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L79)
+
+Callback fired after items are added to the batcher
+
+#### Parameters
+
+##### batcher
+
+[`Batcher`](/pacer/reference/classes/Batcher)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### started?
+
+```ts
+optional started: boolean;
+```
+
+Defined in: [batcher.ts:84](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L84)
+
+Whether the batcher should start processing immediately
+
+#### Default
+
+```ts
+true
+```
+
+***
+
+### wait?
+
+```ts
+optional wait: number | (batcher) => number;
+```
+
+Defined in: [batcher.ts:91](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L91)
+
+Maximum time in milliseconds to wait before processing a batch.
+If the wait duration has elapsed, the batch will be processed.
+If not provided, the batch will not be triggered by a timeout.
+
+#### Default
+
+```ts
+Infinity
+```
diff --git a/mintlify/pacer/reference/interfaces/BatcherState.md b/mintlify/pacer/reference/interfaces/BatcherState.md
new file mode 100644
index 000000000..a6cb85774
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/BatcherState.md
@@ -0,0 +1,98 @@
+---
+id: BatcherState
+title: BatcherState
+---
+
+# Interface: BatcherState\&lt;TValue\>
+
+Defined in: [batcher.ts:6](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L6)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [batcher.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L10)
+
+Number of batch executions that have been completed
+
+***
+
+### isEmpty
+
+```ts
+isEmpty: boolean;
+```
+
+Defined in: [batcher.ts:14](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L14)
+
+Whether the batcher has no items to process (items array is empty)
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [batcher.ts:18](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L18)
+
+Whether the batcher is waiting for the timeout to trigger batch processing
+
+***
+
+### items
+
+```ts
+items: TValue[];
+```
+
+Defined in: [batcher.ts:22](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L22)
+
+Array of items currently queued for batch processing
+
+***
+
+### size
+
+```ts
+size: number;
+```
+
+Defined in: [batcher.ts:26](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L26)
+
+Number of items currently in the batch queue
+
+***
+
+### status
+
+```ts
+status: "idle" | "pending";
+```
+
+Defined in: [batcher.ts:30](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L30)
+
+Current processing status - 'idle' when not processing, 'pending' when waiting for timeout
+
+***
+
+### totalItemsProcessed
+
+```ts
+totalItemsProcessed: number;
+```
+
+Defined in: [batcher.ts:34](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/batcher.ts#L34)
+
+Total number of items that have been processed across all batches
diff --git a/mintlify/pacer/reference/interfaces/DebouncerOptions.md b/mintlify/pacer/reference/interfaces/DebouncerOptions.md
new file mode 100644
index 000000000..cd69604fc
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/DebouncerOptions.md
@@ -0,0 +1,122 @@
+---
+id: DebouncerOptions
+title: DebouncerOptions
+---
+
+# Interface: DebouncerOptions\&lt;TFn\>
+
+Defined in: [debouncer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L49)
+
+Options for configuring a debounced function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: boolean | (debouncer) => boolean;
+```
+
+Defined in: [debouncer.ts:55](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L55)
+
+Whether the debouncer is enabled. When disabled, maybeExecute will not trigger any executions.
+Can be a boolean or a function that returns a boolean.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<DebouncerState<TFn>>;
+```
+
+Defined in: [debouncer.ts:59](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L59)
+
+Initial state for the debouncer
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [debouncer.ts:64](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L64)
+
+A key to identify the debouncer.
+If provided, the debouncer will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [debouncer.ts:70](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L70)
+
+Whether to execute on the leading edge of the timeout.
+The first call will execute immediately and the rest will wait the delay.
+Defaults to false.
+
+***
+
+### onExecute()?
+
+```ts
+optional onExecute: (args, debouncer) => void;
+```
+
+Defined in: [debouncer.ts:74](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L74)
+
+Callback function that is called after the function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### debouncer
+
+[`Debouncer`](/pacer/reference/classes/Debouncer)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [debouncer.ts:79](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L79)
+
+Whether to execute on the trailing edge of the timeout.
+Defaults to true.
+
+***
+
+### wait
+
+```ts
+wait: number | (debouncer) => number;
+```
+
+Defined in: [debouncer.ts:85](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L85)
+
+Delay in milliseconds before executing the function.
+Can be a number or a function that returns a number.
+Defaults to 0ms
diff --git a/mintlify/pacer/reference/interfaces/DebouncerState.md b/mintlify/pacer/reference/interfaces/DebouncerState.md
new file mode 100644
index 000000000..1ca6f27c1
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/DebouncerState.md
@@ -0,0 +1,86 @@
+---
+id: DebouncerState
+title: DebouncerState
+---
+
+# Interface: DebouncerState\&lt;TFn\>
+
+Defined in: [debouncer.ts:6](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L6)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Properties
+
+### canLeadingExecute
+
+```ts
+canLeadingExecute: boolean;
+```
+
+Defined in: [debouncer.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L10)
+
+Whether the debouncer can execute on the leading edge of the timeout
+
+***
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [debouncer.ts:14](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L14)
+
+Number of function executions that have been completed
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [debouncer.ts:18](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L18)
+
+Whether the debouncer is waiting for the timeout to trigger execution
+
+***
+
+### lastArgs
+
+```ts
+lastArgs: Parameters<TFn> | undefined;
+```
+
+Defined in: [debouncer.ts:22](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L22)
+
+The arguments from the most recent call to maybeExecute
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [debouncer.ts:26](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L26)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "pending";
+```
+
+Defined in: [debouncer.ts:30](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/debouncer.ts#L30)
+
+Current execution status - 'idle' when not active, 'pending' when waiting for timeout
diff --git a/mintlify/pacer/reference/interfaces/PacerDevtoolsWirePayload.md b/mintlify/pacer/reference/interfaces/PacerDevtoolsWirePayload.md
new file mode 100644
index 000000000..51fae1952
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/PacerDevtoolsWirePayload.md
@@ -0,0 +1,50 @@
+---
+id: PacerDevtoolsWirePayload
+title: PacerDevtoolsWirePayload
+---
+
+# Interface: PacerDevtoolsWirePayload
+
+Defined in: [event-client.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L10)
+
+Payload on the devtools event bus must be JSON-serializable: `ClientEventBus`
+always stringifies events for `emitToServer` and `BroadcastChannel`, so live
+util instances (with reactive `store` graphs) cannot be sent as-is.
+
+Live instances are kept in pacerDevtoolsInstancesByKey for the panel.
+
+## Properties
+
+### key
+
+```ts
+key: string;
+```
+
+Defined in: [event-client.ts:11](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L11)
+
+***
+
+### options
+
+```ts
+options: unknown;
+```
+
+Defined in: [event-client.ts:13](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L13)
+
+***
+
+### store
+
+```ts
+store: object;
+```
+
+Defined in: [event-client.ts:12](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L12)
+
+#### state
+
+```ts
+state: unknown;
+```
diff --git a/mintlify/pacer/reference/interfaces/PacerEventMap.md b/mintlify/pacer/reference/interfaces/PacerEventMap.md
new file mode 100644
index 000000000..e4787d7d5
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/PacerEventMap.md
@@ -0,0 +1,231 @@
+---
+id: PacerEventMap
+title: PacerEventMap
+---
+
+# Interface: PacerEventMap
+
+Defined in: [event-client.ts:66](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L66)
+
+Suffix-only keys: EventClient prepends `pluginId:` (`pacer:`) at runtime
+for `emit` / `on`. Wire `type` values are `pacer:${key}`.
+
+## Properties
+
+### AsyncBatcher
+
+```ts
+AsyncBatcher: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:78](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L78)
+
+***
+
+### AsyncDebouncer
+
+```ts
+AsyncDebouncer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:79](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L79)
+
+***
+
+### AsyncQueuer
+
+```ts
+AsyncQueuer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:80](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L80)
+
+***
+
+### AsyncRateLimiter
+
+```ts
+AsyncRateLimiter: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:81](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L81)
+
+***
+
+### AsyncRetryer
+
+```ts
+AsyncRetryer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:82](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L82)
+
+***
+
+### AsyncThrottler
+
+```ts
+AsyncThrottler: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:83](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L83)
+
+***
+
+### Batcher
+
+```ts
+Batcher: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:84](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L84)
+
+***
+
+### d-AsyncBatcher
+
+```ts
+d-AsyncBatcher: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:67](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L67)
+
+***
+
+### d-AsyncDebouncer
+
+```ts
+d-AsyncDebouncer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:68](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L68)
+
+***
+
+### d-AsyncQueuer
+
+```ts
+d-AsyncQueuer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:69](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L69)
+
+***
+
+### d-AsyncRateLimiter
+
+```ts
+d-AsyncRateLimiter: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:70](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L70)
+
+***
+
+### d-AsyncRetryer
+
+```ts
+d-AsyncRetryer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:71](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L71)
+
+***
+
+### d-AsyncThrottler
+
+```ts
+d-AsyncThrottler: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:72](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L72)
+
+***
+
+### d-Batcher
+
+```ts
+d-Batcher: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:73](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L73)
+
+***
+
+### d-Debouncer
+
+```ts
+d-Debouncer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:74](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L74)
+
+***
+
+### d-Queuer
+
+```ts
+d-Queuer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:75](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L75)
+
+***
+
+### d-RateLimiter
+
+```ts
+d-RateLimiter: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:76](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L76)
+
+***
+
+### d-Throttler
+
+```ts
+d-Throttler: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:77](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L77)
+
+***
+
+### Debouncer
+
+```ts
+Debouncer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:85](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L85)
+
+***
+
+### Queuer
+
+```ts
+Queuer: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:86](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L86)
+
+***
+
+### RateLimiter
+
+```ts
+RateLimiter: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:87](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L87)
+
+***
+
+### Throttler
+
+```ts
+Throttler: PacerDevtoolsWirePayload;
+```
+
+Defined in: [event-client.ts:88](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L88)
diff --git a/mintlify/pacer/reference/interfaces/QueuerOptions.md b/mintlify/pacer/reference/interfaces/QueuerOptions.md
new file mode 100644
index 000000000..11b0b35fc
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/QueuerOptions.md
@@ -0,0 +1,297 @@
+---
+id: QueuerOptions
+title: QueuerOptions
+---
+
+# Interface: QueuerOptions\&lt;TValue\>
+
+Defined in: [queuer.ts:83](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L83)
+
+Options for configuring a Queuer instance.
+
+These options control queue behavior, item expiration, callbacks, and more.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### addItemsTo?
+
+```ts
+optional addItemsTo: QueuePosition;
+```
+
+Defined in: [queuer.ts:88](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L88)
+
+Default position to add items to the queuer
+
+#### Default
+
+```ts
+'back'
+```
+
+***
+
+### expirationDuration?
+
+```ts
+optional expirationDuration: number;
+```
+
+Defined in: [queuer.ts:93](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L93)
+
+Maximum time in milliseconds that an item can stay in the queue
+If not provided, items will never expire
+
+***
+
+### getIsExpired()?
+
+```ts
+optional getIsExpired: (item, addedAt) => boolean;
+```
+
+Defined in: [queuer.ts:98](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L98)
+
+Function to determine if an item has expired
+If provided, this overrides the expirationDuration behavior
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### addedAt
+
+`number`
+
+#### Returns
+
+`boolean`
+
+***
+
+### getItemsFrom?
+
+```ts
+optional getItemsFrom: QueuePosition;
+```
+
+Defined in: [queuer.ts:103](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L103)
+
+Default position to get items from during processing
+
+#### Default
+
+```ts
+'front'
+```
+
+***
+
+### getPriority()?
+
+```ts
+optional getPriority: (item) => number;
+```
+
+Defined in: [queuer.ts:108](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L108)
+
+Function to determine priority of items in the queuer
+Higher priority items will be processed first
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+#### Returns
+
+`number`
+
+***
+
+### initialItems?
+
+```ts
+optional initialItems: TValue[];
+```
+
+Defined in: [queuer.ts:112](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L112)
+
+Initial items to populate the queuer with
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<QueuerState<TValue>>;
+```
+
+Defined in: [queuer.ts:116](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L116)
+
+Initial state for the queuer
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [queuer.ts:121](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L121)
+
+Optional key to identify this queuer instance.
+If provided, the queuer will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### maxSize?
+
+```ts
+optional maxSize: number;
+```
+
+Defined in: [queuer.ts:125](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L125)
+
+Maximum number of items allowed in the queuer
+
+***
+
+### onExecute()?
+
+```ts
+optional onExecute: (item, queuer) => void;
+```
+
+Defined in: [queuer.ts:129](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L129)
+
+Callback fired whenever an item is removed from the queuer
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`Queuer`](/pacer/reference/classes/Queuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onExpire()?
+
+```ts
+optional onExpire: (item, queuer) => void;
+```
+
+Defined in: [queuer.ts:133](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L133)
+
+Callback fired whenever an item expires in the queuer
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`Queuer`](/pacer/reference/classes/Queuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onItemsChange()?
+
+```ts
+optional onItemsChange: (queuer) => void;
+```
+
+Defined in: [queuer.ts:137](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L137)
+
+Callback fired whenever an item is added or removed from the queuer
+
+#### Parameters
+
+##### queuer
+
+[`Queuer`](/pacer/reference/classes/Queuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onReject()?
+
+```ts
+optional onReject: (item, queuer) => void;
+```
+
+Defined in: [queuer.ts:141](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L141)
+
+Callback fired whenever an item is rejected from being added to the queuer
+
+#### Parameters
+
+##### item
+
+`TValue`
+
+##### queuer
+
+[`Queuer`](/pacer/reference/classes/Queuer)\&lt;`TValue`\>
+
+#### Returns
+
+`void`
+
+***
+
+### started?
+
+```ts
+optional started: boolean;
+```
+
+Defined in: [queuer.ts:145](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L145)
+
+Whether the queuer should start processing tasks immediately
+
+***
+
+### wait?
+
+```ts
+optional wait: number | (queuer) => number;
+```
+
+Defined in: [queuer.ts:151](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L151)
+
+Time in milliseconds to wait between processing items.
+Can be a number or a function that returns a number.
+
+#### Default
+
+```ts
+0
+```
diff --git a/mintlify/pacer/reference/interfaces/QueuerState.md b/mintlify/pacer/reference/interfaces/QueuerState.md
new file mode 100644
index 000000000..e788c0dcd
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/QueuerState.md
@@ -0,0 +1,170 @@
+---
+id: QueuerState
+title: QueuerState
+---
+
+# Interface: QueuerState\&lt;TValue\>
+
+Defined in: [queuer.ts:5](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L5)
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Properties
+
+### addItemCount
+
+```ts
+addItemCount: number;
+```
+
+Defined in: [queuer.ts:9](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L9)
+
+Number of times addItem has been called (for reduction calculations)
+
+***
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [queuer.ts:13](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L13)
+
+Number of items that have been processed by the queuer
+
+***
+
+### expirationCount
+
+```ts
+expirationCount: number;
+```
+
+Defined in: [queuer.ts:17](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L17)
+
+Number of items that have been removed from the queue due to expiration
+
+***
+
+### isEmpty
+
+```ts
+isEmpty: boolean;
+```
+
+Defined in: [queuer.ts:21](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L21)
+
+Whether the queuer has no items to process (items array is empty)
+
+***
+
+### isFull
+
+```ts
+isFull: boolean;
+```
+
+Defined in: [queuer.ts:25](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L25)
+
+Whether the queuer has reached its maximum capacity
+
+***
+
+### isIdle
+
+```ts
+isIdle: boolean;
+```
+
+Defined in: [queuer.ts:29](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L29)
+
+Whether the queuer is not currently processing any items
+
+***
+
+### isRunning
+
+```ts
+isRunning: boolean;
+```
+
+Defined in: [queuer.ts:33](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L33)
+
+Whether the queuer is active and will process items automatically
+
+***
+
+### items
+
+```ts
+items: TValue[];
+```
+
+Defined in: [queuer.ts:37](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L37)
+
+Array of items currently waiting to be processed
+
+***
+
+### itemTimestamps
+
+```ts
+itemTimestamps: number[];
+```
+
+Defined in: [queuer.ts:41](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L41)
+
+Timestamps when items were added to the queue for expiration tracking
+
+***
+
+### pendingTick
+
+```ts
+pendingTick: boolean;
+```
+
+Defined in: [queuer.ts:45](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L45)
+
+Whether the queuer has a pending timeout for processing the next item
+
+***
+
+### rejectionCount
+
+```ts
+rejectionCount: number;
+```
+
+Defined in: [queuer.ts:49](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L49)
+
+Number of items that have been rejected from being added to the queue
+
+***
+
+### size
+
+```ts
+size: number;
+```
+
+Defined in: [queuer.ts:53](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L53)
+
+Number of items currently in the queue
+
+***
+
+### status
+
+```ts
+status: "idle" | "running" | "stopped";
+```
+
+Defined in: [queuer.ts:57](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L57)
+
+Current processing status - 'idle' when not processing, 'running' when active, 'stopped' when paused
diff --git a/mintlify/pacer/reference/interfaces/RateLimiterOptions.md b/mintlify/pacer/reference/interfaces/RateLimiterOptions.md
new file mode 100644
index 000000000..217acb337
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/RateLimiterOptions.md
@@ -0,0 +1,143 @@
+---
+id: RateLimiterOptions
+title: RateLimiterOptions
+---
+
+# Interface: RateLimiterOptions\&lt;TFn\>
+
+Defined in: [rate-limiter.ts:47](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L47)
+
+Options for configuring a rate-limited function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: boolean | (rateLimiter) => boolean;
+```
+
+Defined in: [rate-limiter.ts:52](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L52)
+
+Whether the rate limiter is enabled. When disabled, maybeExecute will not trigger any executions.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<RateLimiterState>;
+```
+
+Defined in: [rate-limiter.ts:56](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L56)
+
+Initial state for the rate limiter
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [rate-limiter.ts:61](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L61)
+
+Optional key to identify this rate limiter instance.
+If provided, the rate limiter will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### limit
+
+```ts
+limit: number | (rateLimiter) => number;
+```
+
+Defined in: [rate-limiter.ts:66](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L66)
+
+Maximum number of executions allowed within the time window.
+Can be a number or a callback function that receives the rate limiter instance and returns a number.
+
+***
+
+### onExecute()?
+
+```ts
+optional onExecute: (args, rateLimiter) => void;
+```
+
+Defined in: [rate-limiter.ts:70](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L70)
+
+Callback function that is called after the function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### rateLimiter
+
+[`RateLimiter`](/pacer/reference/classes/RateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### onReject()?
+
+```ts
+optional onReject: (rateLimiter) => void;
+```
+
+Defined in: [rate-limiter.ts:74](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L74)
+
+Optional callback function that is called when an execution is rejected due to rate limiting
+
+#### Parameters
+
+##### rateLimiter
+
+[`RateLimiter`](/pacer/reference/classes/RateLimiter)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### window
+
+```ts
+window: number | (rateLimiter) => number;
+```
+
+Defined in: [rate-limiter.ts:79](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L79)
+
+Time window in milliseconds within which the limit applies.
+Can be a number or a callback function that receives the rate limiter instance and returns a number.
+
+***
+
+### windowType?
+
+```ts
+optional windowType: "fixed" | "sliding";
+```
+
+Defined in: [rate-limiter.ts:86](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L86)
+
+Type of window to use for rate limiting
+- 'fixed': Uses a fixed window that resets after the window period
+- 'sliding': Uses a sliding window that allows executions as old ones expire
+Defaults to 'fixed'
diff --git a/mintlify/pacer/reference/interfaces/RateLimiterState.md b/mintlify/pacer/reference/interfaces/RateLimiterState.md
new file mode 100644
index 000000000..ae3aa03ff
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/RateLimiterState.md
@@ -0,0 +1,80 @@
+---
+id: RateLimiterState
+title: RateLimiterState
+---
+
+# Interface: RateLimiterState
+
+Defined in: [rate-limiter.ts:6](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L6)
+
+## Properties
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [rate-limiter.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L10)
+
+Number of function executions that have been completed
+
+***
+
+### executionTimes
+
+```ts
+executionTimes: number[];
+```
+
+Defined in: [rate-limiter.ts:14](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L14)
+
+Array of timestamps when executions occurred for rate limiting calculations
+
+***
+
+### isExceeded
+
+```ts
+isExceeded: boolean;
+```
+
+Defined in: [rate-limiter.ts:18](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L18)
+
+Whether the rate limiter has exceeded the limit
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [rate-limiter.ts:22](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L22)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### rejectionCount
+
+```ts
+rejectionCount: number;
+```
+
+Defined in: [rate-limiter.ts:26](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L26)
+
+Number of function executions that have been rejected due to rate limiting
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "exceeded";
+```
+
+Defined in: [rate-limiter.ts:30](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/rate-limiter.ts#L30)
+
+Current execution status - 'disabled' when not active, 'executing' when executing, 'idle' when not executing, 'exceeded' when rate limit is exceeded
diff --git a/mintlify/pacer/reference/interfaces/ThrottlerOptions.md b/mintlify/pacer/reference/interfaces/ThrottlerOptions.md
new file mode 100644
index 000000000..2737d2838
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/ThrottlerOptions.md
@@ -0,0 +1,121 @@
+---
+id: ThrottlerOptions
+title: ThrottlerOptions
+---
+
+# Interface: ThrottlerOptions\&lt;TFn\>
+
+Defined in: [throttler.ts:54](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L54)
+
+Options for configuring a throttled function
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Properties
+
+### enabled?
+
+```ts
+optional enabled: boolean | (throttler) => boolean;
+```
+
+Defined in: [throttler.ts:60](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L60)
+
+Whether the throttler is enabled. When disabled, maybeExecute will not trigger any executions.
+Can be a boolean or a function that returns a boolean.
+Defaults to true.
+
+***
+
+### initialState?
+
+```ts
+optional initialState: Partial<ThrottlerState<TFn>>;
+```
+
+Defined in: [throttler.ts:64](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L64)
+
+Initial state for the throttler
+
+***
+
+### key?
+
+```ts
+optional key: string;
+```
+
+Defined in: [throttler.ts:69](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L69)
+
+A key to identify the throttler.
+If provided, the throttler will be identified by this key in the devtools and PacerProvider if applicable.
+
+***
+
+### leading?
+
+```ts
+optional leading: boolean;
+```
+
+Defined in: [throttler.ts:74](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L74)
+
+Whether to execute on the leading edge of the timeout.
+Defaults to true.
+
+***
+
+### onExecute()?
+
+```ts
+optional onExecute: (args, throttler) => void;
+```
+
+Defined in: [throttler.ts:78](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L78)
+
+Callback function that is called after the function is executed
+
+#### Parameters
+
+##### args
+
+`Parameters`\&lt;`TFn`\>
+
+##### throttler
+
+[`Throttler`](/pacer/reference/classes/Throttler)\&lt;`TFn`\>
+
+#### Returns
+
+`void`
+
+***
+
+### trailing?
+
+```ts
+optional trailing: boolean;
+```
+
+Defined in: [throttler.ts:83](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L83)
+
+Whether to execute on the trailing edge of the timeout.
+Defaults to true.
+
+***
+
+### wait
+
+```ts
+wait: number | (throttler) => number;
+```
+
+Defined in: [throttler.ts:89](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L89)
+
+Time window in milliseconds during which the function can only be executed once.
+Can be a number or a function that returns a number.
+Defaults to 0ms
diff --git a/mintlify/pacer/reference/interfaces/ThrottlerState.md b/mintlify/pacer/reference/interfaces/ThrottlerState.md
new file mode 100644
index 000000000..e4720b974
--- /dev/null
+++ b/mintlify/pacer/reference/interfaces/ThrottlerState.md
@@ -0,0 +1,98 @@
+---
+id: ThrottlerState
+title: ThrottlerState
+---
+
+# Interface: ThrottlerState\&lt;TFn\>
+
+Defined in: [throttler.ts:6](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L6)
+
+## Type Parameters
+
+### TFn
+
+`TFn` *extends* [`AnyFunction`](/pacer/reference/type-aliases/AnyFunction)
+
+## Properties
+
+### executionCount
+
+```ts
+executionCount: number;
+```
+
+Defined in: [throttler.ts:10](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L10)
+
+Number of function executions that have been completed
+
+***
+
+### isPending
+
+```ts
+isPending: boolean;
+```
+
+Defined in: [throttler.ts:14](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L14)
+
+Whether the throttler is waiting for the timeout to trigger execution
+
+***
+
+### lastArgs
+
+```ts
+lastArgs: Parameters<TFn> | undefined;
+```
+
+Defined in: [throttler.ts:18](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L18)
+
+The arguments from the most recent call to maybeExecute
+
+***
+
+### lastExecutionTime
+
+```ts
+lastExecutionTime: number;
+```
+
+Defined in: [throttler.ts:22](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L22)
+
+Timestamp of the last function execution in milliseconds
+
+***
+
+### maybeExecuteCount
+
+```ts
+maybeExecuteCount: number;
+```
+
+Defined in: [throttler.ts:26](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L26)
+
+Number of times maybeExecute has been called (for reduction calculations)
+
+***
+
+### nextExecutionTime
+
+```ts
+nextExecutionTime: number | undefined;
+```
+
+Defined in: [throttler.ts:30](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L30)
+
+Timestamp when the next execution can occur in milliseconds
+
+***
+
+### status
+
+```ts
+status: "disabled" | "idle" | "pending";
+```
+
+Defined in: [throttler.ts:34](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/throttler.ts#L34)
+
+Current execution status - 'idle' when not active, 'pending' when waiting for timeout
diff --git a/mintlify/pacer/reference/type-aliases/AnyAsyncFunction.md b/mintlify/pacer/reference/type-aliases/AnyAsyncFunction.md
new file mode 100644
index 000000000..fdc93da37
--- /dev/null
+++ b/mintlify/pacer/reference/type-aliases/AnyAsyncFunction.md
@@ -0,0 +1,24 @@
+---
+id: AnyAsyncFunction
+title: AnyAsyncFunction
+---
+
+# Type Alias: AnyAsyncFunction()
+
+```ts
+type AnyAsyncFunction = (...args) => Promise<any>;
+```
+
+Defined in: [types.ts:9](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/types.ts#L9)
+
+Represents an asynchronous function that can be called with any arguments and returns a promise.
+
+## Parameters
+
+### args
+
+...`any`[]
+
+## Returns
+
+`Promise`\&lt;`any`\>
diff --git a/mintlify/pacer/reference/type-aliases/AnyFunction.md b/mintlify/pacer/reference/type-aliases/AnyFunction.md
new file mode 100644
index 000000000..8b450bc85
--- /dev/null
+++ b/mintlify/pacer/reference/type-aliases/AnyFunction.md
@@ -0,0 +1,24 @@
+---
+id: AnyFunction
+title: AnyFunction
+---
+
+# Type Alias: AnyFunction()
+
+```ts
+type AnyFunction = (...args) => any;
+```
+
+Defined in: [types.ts:4](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/types.ts#L4)
+
+Represents a function that can be called with any arguments and returns any value.
+
+## Parameters
+
+### args
+
+...`any`[]
+
+## Returns
+
+`any`
diff --git a/mintlify/pacer/reference/type-aliases/OptionalKeys.md b/mintlify/pacer/reference/type-aliases/OptionalKeys.md
new file mode 100644
index 000000000..33581de38
--- /dev/null
+++ b/mintlify/pacer/reference/type-aliases/OptionalKeys.md
@@ -0,0 +1,22 @@
+---
+id: OptionalKeys
+title: OptionalKeys
+---
+
+# Type Alias: OptionalKeys\&lt;T, TKey\>
+
+```ts
+type OptionalKeys<T, TKey> = Omit<T, TKey> & Partial<Pick<T, TKey>>;
+```
+
+Defined in: [types.ts:11](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/types.ts#L11)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### TKey
+
+`TKey` *extends* keyof `T`
diff --git a/mintlify/pacer/reference/type-aliases/PacerEventName.md b/mintlify/pacer/reference/type-aliases/PacerEventName.md
new file mode 100644
index 000000000..b6d79240d
--- /dev/null
+++ b/mintlify/pacer/reference/type-aliases/PacerEventName.md
@@ -0,0 +1,12 @@
+---
+id: PacerEventName
+title: PacerEventName
+---
+
+# Type Alias: PacerEventName
+
+```ts
+type PacerEventName = keyof PacerEventMap;
+```
+
+Defined in: [event-client.ts:91](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L91)
diff --git a/mintlify/pacer/reference/type-aliases/QueuePosition.md b/mintlify/pacer/reference/type-aliases/QueuePosition.md
new file mode 100644
index 000000000..9fa8f2e31
--- /dev/null
+++ b/mintlify/pacer/reference/type-aliases/QueuePosition.md
@@ -0,0 +1,17 @@
+---
+id: QueuePosition
+title: QueuePosition
+---
+
+# Type Alias: QueuePosition
+
+```ts
+type QueuePosition = "front" | "back";
+```
+
+Defined in: [queuer.ts:193](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/queuer.ts#L193)
+
+Position type for addItem and getNextItem operations.
+
+- 'front': Operate on the front of the queue (FIFO)
+- 'back': Operate on the back of the queue (LIFO)
diff --git a/mintlify/pacer/reference/variables/pacerEventClient.md b/mintlify/pacer/reference/variables/pacerEventClient.md
new file mode 100644
index 000000000..b2b5323dc
--- /dev/null
+++ b/mintlify/pacer/reference/variables/pacerEventClient.md
@@ -0,0 +1,12 @@
+---
+id: pacerEventClient
+title: pacerEventClient
+---
+
+# Variable: pacerEventClient
+
+```ts
+const pacerEventClient: PacerEventClient;
+```
+
+Defined in: [event-client.ts:129](https://github.com/TanStack/pacer/blob/main/packages/pacer/src/event-client.ts#L129)
diff --git a/mintlify/query/community-resources.md b/mintlify/query/community-resources.md
new file mode 100644
index 000000000..50753a36a
--- /dev/null
+++ b/mintlify/query/community-resources.md
@@ -0,0 +1,209 @@
+---
+title: Community Resources
+articles:
+  [
+    {
+      title: "TkDodo's Blog Posts",
+      url: 'https://tkdodo.eu/blog/practical-react-query',
+      description: 'TkDodo, a maintainer of TanStack Query, writes a series of blog posts about the library. These articles offer general best practices and often present opinionated perspectives on using TanStack Query.',
+    },
+  ]
+media:
+  [
+    {
+      title: 'React Query: It’s Time to Break up with your Global State! – Tanner Linsley',
+      url: 'https://www.youtube.com/watch?v=seU46c6Jz7E',
+      description: 'Get the lowdown on “global state” and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you’re used to',
+    },
+    {
+      title: 'All About React Query (with Tanner Linsley) — Learn With Jason',
+      url: 'https://www.youtube.com/watch?v=DocXo3gqGdI',
+      description: 'Learn all about React Query with its creator Tanner Linsley.',
+    },
+    {
+      title: 'Hooks for Fetching with ReactQuery Creator Tanner Linsley aka @tannerlinsley',
+      url: 'https://www.youtube.com/watch?v=PPvWXbSCtBU',
+      description: 'Learn how React Query simplifies asynchronous data fetching in React applications.',
+    },
+    {
+      title: 'React Query - Open Source Friday stream with Tanner Linsley from',
+      url: 'https://www.youtube.com/watch?v=B3cJDT3j19I',
+      description: 'An Open Source Friday stream featuring Tanner Linsley.',
+    },
+    {
+      title: 'React Query Presentation - Tanner Linsley',
+      url: 'https://www.youtube.com/watch?v=_ehibado6rU',
+      description: 'Tanner Linsley gives a talk to Lambda School students about the React Query.',
+    },
+    {
+      title: 'TanStack Query v4 (with Dominik Dorfmeister) — Learn With Jason',
+      url: 'https://www.youtube.com/watch?v=SPPQm0dvEes',
+      description: 'Dominik Dorfmeister covering TanStack Query v4.',
+    },
+    {
+      title: 'React Query Exposed by Its Maintainer',
+      url: 'https://www.youtube.com/watch?v=8-RTNnn9GR8',
+      description: 'Dominik Dorfmeister explores the less favorable aspects of React Query and situations where it may not be the best fit.',
+    },
+    {
+      title: 'React Query API Design: Lessons Learned - Dominik Dorfmeister',
+      url: 'https://www.youtube.com/watch?v=l3PxErcKeAI',
+      description: 'Dominik Dorfmeister walks through some of the API design choices that were made in React Query to get to the DX.',
+    },
+  ]
+utilities:
+  [
+    {
+      title: 'batshit',
+      url: 'https://github.com/yornaath/batshit',
+      description: 'A batch manager that will deduplicate and batch requests for a certain data type made within a window',
+    },
+    {
+      title: 'GraphQL Code Generator',
+      url: 'https://the-guild.dev/graphql/codegen',
+      description: 'Generate React Query hooks from your GraphQL schema',
+    },
+
+    {
+      title: 'Http-wizard',
+      url: 'https://http-wizard.com',
+      description: 'End-to-end type-safe Fastify API with typeScript magic ✨',
+    },
+
+    {
+      title: 'Normy',
+      url: 'https://github.com/klis87/normy',
+      description: 'Automatic normalization and data updates for data fetching libraries',
+    },
+
+    {
+      title: 'Orval',
+      url: 'https://orval.dev/',
+      description: 'Generate TypeScript client from OpenAPI specifications.',
+    },
+    {
+      title: 'Query Key Factory',
+      url: 'https://github.com/lukemorales/query-key-factory',
+      description: 'A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query',
+    },
+
+    {
+      title: 'React Query Kit',
+      url: 'https://github.com/liaoliao666/react-query-kit',
+      description: '🕊️ A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe',
+    },
+    {
+      title: 'React Query Rewind',
+      url: 'https://reactqueryrewind.com/',
+      description: 'Time travel and visualize state during development',
+    },
+    {
+      title: 'React Query Swagger',
+      url: 'https://github.com/Shaddix/react-query-swagger',
+      description: 'Generate React Query hooks based on Swagger API definitions',
+    },
+    {
+      title: 'Suspensive React Query',
+      url: 'https://suspensive.org/docs/react-query/motivation',
+      description: 'Enhances React Query with Suspense support, allowing for simpler and more declarative data fetching',
+    },
+    {
+      title: 'tRPC',
+      url: 'https://trpc.io/',
+      description: 'End-to-end typesafe APIs made easy',
+    },
+  ]
+others:
+  [
+    {
+      title: 'Atomic CRM',
+      url: 'https://marmelab.com/atomic-crm/',
+      description: 'A full-featured CRM built with React, react-admin, and Supabase.',
+    },
+    {
+      title: 'Blitz',
+      url: 'https://blitzjs.com/',
+      description: 'The Missing Fullstack Toolkit for Next.js',
+    },
+    {
+      title: 'Connect',
+      url: 'https://connectrpc.com/docs',
+      description: 'A family of libraries for building browser and gRPC-compatible HTTP APIs.',
+    },
+    {
+      title: 'Hey API',
+      url: 'https://heyapi.dev/openapi-ts/plugins/tanstack-query',
+      description: 'OpenAPI to TypeScript codegen. Production-ready SDKs, Zod schemas, TanStack Query hooks, and 20+ plugins. Used by Vercel, OpenCode, and PayPal.',
+    },
+    {
+      title: 'Kubb',
+      url: 'https://www.kubb.dev/',
+      description: 'Generate SDKs for all your APIs',
+    },
+    {
+      title: '@codewithagents/openapi-react-query',
+      url: 'https://github.com/codewithagents/openapi-zod-ts',
+      description: 'Generate fully typed TanStack/React Query v5 hooks from an OpenAPI 3.1 spec, with Zod v4 runtime validation and an end-to-end pipeline (client, mocks, server).',
+    },
+    {
+      title: 'OpenAPI codegen',
+      url: 'https://github.com/fabien0102/openapi-codegen',
+      description: 'A tool for generating code based on an OpenAPI schema.',
+    },
+    {
+      title: 'OpenAPI Qraft React',
+      url: 'https://github.com/OpenAPI-Qraft/openapi-qraft',
+      description: 'Generate type-safe API clients and Hooks for TanStack Query directly from OpenAPI Documents.Zero-runtime overhead, Proxy-based design, seamless SSR support, and full TanStack Query functionality.',
+    },
+    {
+      title: 'OpenAPI React Query codegen',
+      url: 'https://github.com/7nohe/openapi-react-query-codegen',
+      description: 'Generate TanStack Query hooks based on an OpenAPI specification file.',
+    },
+    {
+      title: 'OpenAPI zod client',
+      url: 'https://github.com/astahmer/openapi-zod-client',
+      description: 'Generate a zodios client from an OpenAPI specification',
+    },
+    {
+      title: 'openapi-fetch',
+      url: 'https://openapi-ts.dev/openapi-react-query/',
+      description: 'A 2KB min, typesafe fetch wrapper that uses static TypeScript type inference and no runtime checks.',
+    },
+    {
+      title: 'oRPC',
+      url: 'https://orpc.unnoq.com/docs/integrations/tanstack-query',
+      description: 'Easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards.',
+    },
+    {
+      title: 'Rapini',
+      url: 'https://github.com/rametta/rapini',
+      description: '🥬 OpenAPI to React Query (or SWR) & Axios',
+    },
+    {
+      title: 'React Query Visualizer',
+      url: 'https://marketplace.visualstudio.com/items?itemName=fe-dudu.react-query-visualizer',
+      description: 'VS Code extension for TanStack Query (React Query): visualize query keys, cache invalidation/refetch flows, and file impact graph',
+    },
+    {
+      title: 'Tanstack Query Visualizer',
+      url: 'https://tanstack-query-visualizer.sofi.coop/',
+      description: 'An interactive sandbox that visualizes the relationship between mutations and query keys.',
+    },
+    {
+      title: 'ts-rest',
+      url: 'https://ts-rest.com/',
+      description: 'Incrementally adoptable type-safety for your new and existing APIs',
+    },
+    {
+      title: 'wagmi',
+      url: 'https://wagmi.sh/',
+      description: 'React Hooks for Ethereum based on @tanstack/react-query',
+    },
+    {
+      title: 'zodios',
+      url: 'https://www.zodios.org/',
+      description: 'End-to-end typesafe REST API toolbox',
+    },
+  ]
+---
diff --git a/mintlify/query/eslint/eslint-plugin-query.md b/mintlify/query/eslint/eslint-plugin-query.md
new file mode 100644
index 000000000..4b6ecf315
--- /dev/null
+++ b/mintlify/query/eslint/eslint-plugin-query.md
@@ -0,0 +1,126 @@
+---
+id: eslint-plugin-query
+title: ESLint Plugin Query
+---
+
+TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes.
+
+## Installation
+
+The plugin is a separate package that you need to install:
+
+```bash
+npm i -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+pnpm add -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+yarn add -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+bun add -D @tanstack/eslint-plugin-query
+```
+
+## Flat Config (`eslint.config.js`)
+
+### Recommended setup
+
+To enable all of the recommended rules for our plugin, add the following config:
+
+```js
+import pluginQuery from '@tanstack/eslint-plugin-query'
+
+export default [
+  ...pluginQuery.configs['flat/recommended'],
+  // Any other config...
+]
+```
+
+### Recommended strict setup
+
+The `flat/recommended-strict` config extends `flat/recommended` with additional opinionated rules that enforce best practices more aggressively.
+
+```js
+import pluginQuery from '@tanstack/eslint-plugin-query'
+
+export default [
+  ...pluginQuery.configs['flat/recommended-strict'],
+  // Any other config...
+]
+```
+
+### Custom setup
+
+Alternatively, you can load the plugin and configure only the rules you want to use:
+
+```js
+import pluginQuery from '@tanstack/eslint-plugin-query'
+
+export default [
+  {
+    plugins: {
+      '@tanstack/query': pluginQuery,
+    },
+    rules: {
+      '@tanstack/query/exhaustive-deps': 'error',
+    },
+  },
+  // Any other config...
+]
+```
+
+## Legacy Config (`.eslintrc`)
+
+### Recommended setup
+
+To enable all of the recommended rules for our plugin, add `plugin:@tanstack/query/recommended` in extends:
+
+```json
+{
+  "extends": ["plugin:@tanstack/query/recommended"]
+}
+```
+
+### Recommended strict setup
+
+The `recommendedStrict` config extends `recommended` with additional opinionated rules:
+
+```json
+{
+  "extends": ["plugin:@tanstack/query/recommendedStrict"]
+}
+```
+
+### Custom setup
+
+Alternatively, add `@tanstack/query` to the plugins section, and configure the rules you want to use:
+
+```json
+{
+  "plugins": ["@tanstack/query"],
+  "rules": {
+    "@tanstack/query/exhaustive-deps": "error"
+  }
+}
+```
+
+## Rules
+
+- [@tanstack/query/exhaustive-deps](/query/eslint/exhaustive-deps)
+- [@tanstack/query/no-rest-destructuring](/query/eslint/no-rest-destructuring)
+- [@tanstack/query/stable-query-client](/query/eslint/stable-query-client)
+- [@tanstack/query/no-unstable-deps](/query/eslint/no-unstable-deps)
+- [@tanstack/query/infinite-query-property-order](/query/eslint/infinite-query-property-order)
+- [@tanstack/query/no-void-query-fn](/query/eslint/no-void-query-fn)
+- [@tanstack/query/mutation-property-order](/query/eslint/mutation-property-order)
+- [@tanstack/query/prefer-query-options](/query/eslint/prefer-query-options)
diff --git a/mintlify/query/eslint/exhaustive-deps.md b/mintlify/query/eslint/exhaustive-deps.md
new file mode 100644
index 000000000..3fa56f1a5
--- /dev/null
+++ b/mintlify/query/eslint/exhaustive-deps.md
@@ -0,0 +1,97 @@
+---
+id: exhaustive-deps
+title: Exhaustive dependencies for query keys
+---
+
+Query keys should be seen like a dependency array to your query function: Every variable that is used inside the queryFn should be added to the query key.
+This makes sure that queries are cached independently and that queries are refetched automatically when the variables changes.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/exhaustive-deps": "error" */
+
+useQuery({
+  queryKey: ['todo'],
+  queryFn: () => api.getTodo(todoId),
+})
+
+const todoQueries = {
+  detail: (id) => ({ queryKey: ['todo'], queryFn: () => api.getTodo(id) }),
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+const Component = ({ todoId }) => {
+  const todos = useTodos()
+  useQuery({
+    queryKey: ['todo', todos, todoId],
+    queryFn: () => todos.getTodo(todoId),
+  })
+}
+```
+
+```tsx
+const todos = createTodos()
+const todoQueries = {
+  detail: (id) => ({
+    queryKey: ['todo', id],
+    queryFn: () => todos.getTodo(id),
+  }),
+}
+```
+
+```tsx
+// with { allowlist: { variables: ["todos"] }}
+const Component = ({ todoId }) => {
+  const todos = useTodos()
+  useQuery({
+    queryKey: ['todo', todoId],
+    queryFn: () => todos.getTodo(todoId),
+  })
+}
+```
+
+```tsx
+// with { allowlist: { types: ["TodosClient"] }}
+class TodosClient { ... }
+const Component = ({ todoId }) => {
+  const todos: TodosClient = new TodosClient()
+  useQuery({
+    queryKey: ['todo', todoId],
+    queryFn: () => todos.getTodo(todoId),
+  })
+}
+```
+
+### Options
+
+- `allowlist.variables`: An array of variable names that should be ignored when checking dependencies
+- `allowlist.types`: An array of TypeScript type names that should be ignored when checking dependencies
+
+```json
+{
+  "@tanstack/query/exhaustive-deps": [
+    "error",
+    {
+      "allowlist": {
+        "variables": ["api", "config"],
+        "types": ["ApiClient", "Config"]
+      }
+    }
+  ]
+}
+```
+
+## When Not To Use It
+
+If you don't care about the rules of the query keys, then you will not need this rule.
+
+## Attributes
+
+- [x] ✅ Recommended
+- [x] 🔧 Fixable
diff --git a/mintlify/query/eslint/infinite-query-property-order.md b/mintlify/query/eslint/infinite-query-property-order.md
new file mode 100644
index 000000000..71c5ebf15
--- /dev/null
+++ b/mintlify/query/eslint/infinite-query-property-order.md
@@ -0,0 +1,63 @@
+---
+id: infinite-query-property-order
+title: Ensure correct order of inference sensitive properties for infinite queries
+---
+
+For the following functions, the property order of the passed in object matters due to type inference:
+
+- `useInfiniteQuery`
+- `useSuspenseInfiniteQuery`
+- `infiniteQueryOptions`
+
+The correct property order is as follows:
+
+- `queryFn`
+- `getPreviousPageParam`
+- `getNextPageParam`
+
+All other properties are insensitive to the order as they do not depend on type inference.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/infinite-query-property-order": "warn" */
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+const query = useInfiniteQuery({
+  queryKey: ['projects'],
+  getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+  queryFn: async ({ pageParam }) => {
+    const response = await fetch(`/api/projects?cursor=${pageParam}`)
+    return await response.json()
+  },
+  initialPageParam: 0,
+  getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
+  maxPages: 3,
+})
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/infinite-query-property-order": "warn" */
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+const query = useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: async ({ pageParam }) => {
+    const response = await fetch(`/api/projects?cursor=${pageParam}`)
+    return await response.json()
+  },
+  initialPageParam: 0,
+  getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
+  getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+  maxPages: 3,
+})
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [x] 🔧 Fixable
diff --git a/mintlify/query/eslint/mutation-property-order.md b/mintlify/query/eslint/mutation-property-order.md
new file mode 100644
index 000000000..35a5aeefe
--- /dev/null
+++ b/mintlify/query/eslint/mutation-property-order.md
@@ -0,0 +1,73 @@
+---
+id: mutation-property-order
+title: Ensure correct order of inference-sensitive properties in useMutation()
+---
+
+For the following functions, the property order of the passed in object matters due to type inference:
+
+- `useMutation()`
+
+The correct property order is as follows:
+
+- `onMutate`
+- `onError`
+- `onSettled`
+
+All other properties are insensitive to the order as they do not depend on type inference.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/mutation-property-order": "warn" */
+import { useMutation } from '@tanstack/react-query'
+
+const mutation = useMutation({
+  mutationFn: () => Promise.resolve('success'),
+  onSettled: () => {
+    results.push('onSettled-promise')
+    return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
+  },
+  onMutate: async () => {
+    results.push('onMutate-async')
+    await sleep(1)
+    return { backup: 'async-data' }
+  },
+  onError: async () => {
+    results.push('onError-async-start')
+    await sleep(1)
+    results.push('onError-async-end')
+  },
+})
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/mutation-property-order": "warn" */
+import { useMutation } from '@tanstack/react-query'
+
+const mutation = useMutation({
+  mutationFn: () => Promise.resolve('success'),
+  onMutate: async () => {
+    results.push('onMutate-async')
+    await sleep(1)
+    return { backup: 'async-data' }
+  },
+  onError: async () => {
+    results.push('onError-async-start')
+    await sleep(1)
+    results.push('onError-async-end')
+  },
+  onSettled: () => {
+    results.push('onSettled-promise')
+    return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
+  },
+})
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [x] 🔧 Fixable
diff --git a/mintlify/query/eslint/no-rest-destructuring.md b/mintlify/query/eslint/no-rest-destructuring.md
new file mode 100644
index 000000000..2eafc40e3
--- /dev/null
+++ b/mintlify/query/eslint/no-rest-destructuring.md
@@ -0,0 +1,47 @@
+---
+id: no-rest-destructuring
+title: Disallow object rest destructuring on query results
+---
+
+Use object rest destructuring on query results automatically subscribes to every field of the query result, which may cause unnecessary re-renders.
+This makes sure that you only subscribe to the fields that you actually need.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-rest-destructuring": "warn" */
+
+const useTodos = () => {
+  const { data: todos, ...rest } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => api.getTodos(),
+  })
+  return { todos, ...rest }
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+const todosQuery = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => api.getTodos(),
+})
+
+// normal object destructuring is fine
+const { data: todos } = todosQuery
+```
+
+When [typed linting](https://typescript-eslint.io/getting-started/typed-linting/) is enabled, the rule also flags rest destructuring on custom hooks that return a TanStack Query result.
+
+## When Not To Use It
+
+If you set the `notifyOnChangeProps` options manually, you can disable this rule.
+Since you are not using tracked queries, you are responsible for specifying which props should trigger a re-render.
+
+## Attributes
+
+- [x] ✅ Recommended
+- [ ] 🔧 Fixable
diff --git a/mintlify/query/eslint/no-unstable-deps.md b/mintlify/query/eslint/no-unstable-deps.md
new file mode 100644
index 000000000..a3f006d9b
--- /dev/null
+++ b/mintlify/query/eslint/no-unstable-deps.md
@@ -0,0 +1,56 @@
+---
+id: no-unstable-deps
+title: Disallow putting the result of query hooks directly in a React hook dependency array
+---
+
+The object returned from the following query hooks is **not** referentially stable:
+
+- `useQuery`
+- `useSuspenseQuery`
+- `useQueries`
+- `useSuspenseQueries`
+- `useInfiniteQuery`
+- `useSuspenseInfiniteQuery`
+- `useMutation`
+
+The object returned from those hooks should **not** be put directly into the dependency array of a React hook (e.g. `useEffect`, `useMemo`, `useCallback`).
+Instead, destructure the return value of the query hook and pass the destructured values into the dependency array of the React hook.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-unstable-deps": "warn" */
+import { useCallback } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
+function Component() {
+  const mutation = useMutation({ mutationFn: (value: string) => value })
+  const callback = useCallback(() => {
+    mutation.mutate('hello')
+  }, [mutation])
+  return null
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-unstable-deps": "warn" */
+import { useCallback } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
+function Component() {
+  const { mutate } = useMutation({ mutationFn: (value: string) => value })
+  const callback = useCallback(() => {
+    mutate('hello')
+  }, [mutate])
+  return null
+}
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [ ] 🔧 Fixable
diff --git a/mintlify/query/eslint/no-void-query-fn.md b/mintlify/query/eslint/no-void-query-fn.md
new file mode 100644
index 000000000..445c43775
--- /dev/null
+++ b/mintlify/query/eslint/no-void-query-fn.md
@@ -0,0 +1,39 @@
+---
+id: no-void-query-fn
+title: Disallow returning void from query functions
+---
+
+Query functions must return a value that will be cached by TanStack Query. Functions that don't return a value (void functions) can lead to unexpected behavior and might indicate a mistake in the implementation.
+
+## Rule Details
+
+Example of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-void-query-fn": "error" */
+
+useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    await api.todos.fetch() // Function doesn't return the fetched data
+  },
+})
+```
+
+Example of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-void-query-fn": "error" */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const todos = await api.todos.fetch()
+    return todos
+  },
+})
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [ ] 🔧 Fixable
diff --git a/mintlify/query/eslint/prefer-query-options.md b/mintlify/query/eslint/prefer-query-options.md
new file mode 100644
index 000000000..3228774bf
--- /dev/null
+++ b/mintlify/query/eslint/prefer-query-options.md
@@ -0,0 +1,145 @@
+---
+id: prefer-query-options
+title: Prefer the use of queryOptions
+---
+
+Separating `queryKey` and `queryFn` can cause unexpected runtime issues when the same query key is accidentally used with more than one `queryFn`. Wrapping them in `queryOptions` (or `infiniteQueryOptions`) co-locates the key and function, making queries safer and easier to reuse.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function Component({ id }) {
+  const query = useQuery({
+    queryKey: ['get', id],
+    queryFn: () => Api.get(`/foo/${id}`),
+  })
+  // ...
+}
+```
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function useFooQuery(id) {
+  return useQuery({
+    queryKey: ['get', id],
+    queryFn: () => Api.get(`/foo/${id}`),
+  })
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function getFooOptions(id) {
+  return queryOptions({
+    queryKey: ['get', id],
+    queryFn: () => Api.get(`/foo/${id}`),
+  })
+}
+
+function Component({ id }) {
+  const query = useQuery(getFooOptions(id))
+  // ...
+}
+```
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function getFooOptions(id) {
+  return queryOptions({
+    queryKey: ['get', id],
+    queryFn: () => Api.get(`/foo/${id}`),
+  })
+}
+
+function useFooQuery(id) {
+  return useQuery({ ...getFooOptions(id), select: (data) => data.foo })
+}
+```
+
+The rule also enforces reusing `queryKey` from a `queryOptions` result instead of typing it manually in `QueryClient` methods or filters.
+
+Examples of **incorrect** `queryKey` references for this rule:
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function todoOptions(id) {
+  return queryOptions({
+    queryKey: ['todo', id],
+    queryFn: () => api.getTodo(id),
+  })
+}
+
+function Component({ id }) {
+  const queryClient = useQueryClient()
+  return queryClient.getQueryData(['todo', id])
+}
+```
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function todoOptions(id) {
+  return queryOptions({
+    queryKey: ['todo', id],
+    queryFn: () => api.getTodo(id),
+  })
+}
+
+function Component({ id }) {
+  const queryClient = useQueryClient()
+  return queryClient.invalidateQueries({ queryKey: ['todo', id] })
+}
+```
+
+Examples of **correct** `queryKey` references for this rule:
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function todoOptions(id) {
+  return queryOptions({
+    queryKey: ['todo', id],
+    queryFn: () => api.getTodo(id),
+  })
+}
+
+function Component({ id }) {
+  const queryClient = useQueryClient()
+  return queryClient.getQueryData(todoOptions(id).queryKey)
+}
+```
+
+```tsx
+/* eslint "@tanstack/query/prefer-query-options": "error" */
+
+function todoOptions(id) {
+  return queryOptions({
+    queryKey: ['todo', id],
+    queryFn: () => api.getTodo(id),
+  })
+}
+
+function Component({ id }) {
+  const queryClient = useQueryClient()
+  return queryClient.invalidateQueries({ queryKey: todoOptions(id).queryKey })
+}
+```
+
+## When Not To Use It
+
+If you do not want to enforce the use of `queryOptions` in your codebase, you will not need this rule.
+
+## Attributes
+
+- [x] ✅ Recommended (strict)
+- [ ] 🔧 Fixable
diff --git a/mintlify/query/eslint/stable-query-client.md b/mintlify/query/eslint/stable-query-client.md
new file mode 100644
index 000000000..d100382c3
--- /dev/null
+++ b/mintlify/query/eslint/stable-query-client.md
@@ -0,0 +1,61 @@
+---
+id: stable-query-client
+title: Stable Query Client
+---
+
+The QueryClient contains the QueryCache, so you'd only want to create one instance of the QueryClient for the lifecycle of your application - _not_ a new instance on every render.
+
+> Exception: It's allowed to create a new QueryClient inside an async Server Component, because the async function is only called once on the server.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/stable-query-client": "error" */
+
+function App() {
+  const queryClient = new QueryClient()
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Home />
+    </QueryClientProvider>
+  )
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+function App() {
+  const [queryClient] = useState(() => new QueryClient())
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Home />
+    </QueryClientProvider>
+  )
+}
+```
+
+```tsx
+const queryClient = new QueryClient()
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Home />
+    </QueryClientProvider>
+  )
+}
+```
+
+```tsx
+async function App() {
+  const queryClient = new QueryClient()
+  await queryClient.prefetchQuery(options)
+}
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [x] 🔧 Fixable
diff --git a/mintlify/query/framework/angular/angular-httpclient-and-other-data-fetching-clients.md b/mintlify/query/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
new file mode 100644
index 000000000..0784526cb
--- /dev/null
+++ b/mintlify/query/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
@@ -0,0 +1,48 @@
+---
+id: Angular-HttpClient-and-other-data-fetching-clients
+title: Angular HttpClient and other data fetching clients
+---
+
+Because TanStack Query's fetching mechanisms are agnostically built on Promises, you can use literally any asynchronous data fetching client, including the browser native `fetch` API, `graphql-request`, and more.
+
+## Using Angular's `HttpClient` for data fetching
+
+`HttpClient` is a powerful and integrated part of Angular, which gives the following benefits:
+
+- Mock responses in unit tests using [provideHttpClientTesting](https://angular.dev/guide/http/testing).
+- [Interceptors](https://angular.dev/guide/http/interceptors) can be used for a wide range of functionality including adding authentication headers, performing logging, etc. While some data fetching libraries have their own interceptor system, `HttpClient` interceptors are integrated with Angular's dependency injection system.
+- `HttpClient` automatically informs [`PendingTasks`](https://angular.dev/api/core/PendingTasks#), which enables Angular to be aware of pending requests. Unit tests and SSR can use the resulting application _stableness_ information to wait for pending requests to finish. This makes unit testing much easier for [Zoneless](https://angular.dev/guide/zoneless) applications.
+- When using SSR, `HttpClient` will [cache requests](https://angular.dev/guide/ssr#caching-data-when-using-HttpClient) performed on the server. This will prevent unneeded requests on the client. `HttpClient` SSR caching works out of the box. TanStack Query has its own hydration functionality which may be more powerful but requires some setup. Which one fits your needs best depends on your use case.
+
+### Using observables in `queryFn`
+
+As TanStack Query is a promise based library, observables from `HttpClient` need to be converted to promises. This can be done with the `lastValueFrom` or `firstValueFrom` functions from `rxjs`.
+
+```ts
+@Component({
+  // ...
+})
+class ExampleComponent {
+  private readonly http = inject(HttpClient)
+
+  readonly query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      lastValueFrom(
+        this.http.get('https://api.github.com/repos/tanstack/query'),
+      ),
+  }))
+}
+```
+
+> Since Angular is moving towards RxJS as an optional dependency, it's expected that `HttpClient` will also support promises in the future.
+>
+> Support for observables in TanStack Query for Angular is planned.
+
+## Comparison table
+
+| Data fetching client                                | Pros                                                | Cons                                                                       |
+| --------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------- |
+| **Angular HttpClient**                              | Featureful and very well integrated with Angular.   | Observables need to be converted to Promises.                              |
+| **Fetch**                                           | Browser native API, so adds nothing to bundle size. | Barebones API which lacks many features.                                   |
+| **Specialized libraries such as `graphql-request`** | Specialized features for specific use cases.        | If it's not an Angular library it won't integrate well with the framework. |
diff --git a/mintlify/query/framework/angular/devtools.md b/mintlify/query/framework/angular/devtools.md
new file mode 100644
index 000000000..0103213a3
--- /dev/null
+++ b/mintlify/query/framework/angular/devtools.md
@@ -0,0 +1,167 @@
+---
+id: devtools
+title: Devtools
+---
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+## Enable devtools
+
+The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.
+
+By default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build.
+
+```ts
+import {
+  QueryClient,
+  provideTanStackQuery,
+} from '@tanstack/angular-query-experimental'
+
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
+}
+```
+
+## Devtools in production
+
+Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.
+
+To use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds.
+
+```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+```
+
+To control when devtools are loaded, you can use the `loadDevtools` option.
+
+When not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode.
+
+```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
+provideTanStackQuery(new QueryClient(), withDevtools())
+
+// which is equivalent to
+provideTanStackQuery(
+  new QueryClient(),
+  withDevtools(() => ({ loadDevtools: 'auto' })),
+)
+```
+
+When setting the option to true, the devtools will be loaded in both development and production mode.
+
+This is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment.
+
+```ts
+import { environment } from './environments/environment'
+// Make sure to use the production sub-path to load devtools in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+
+provideTanStackQuery(
+  new QueryClient(),
+  withDevtools(() => ({ loadDevtools: environment.loadDevtools })),
+)
+```
+
+When setting the option to false, the devtools will not be loaded.
+
+```ts
+provideTanStackQuery(
+  new QueryClient(),
+  withDevtools(() => ({ loadDevtools: false })),
+)
+```
+
+## Derive options through reactivity
+
+Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example
+a signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded.
+
+The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.
+
+```ts
+import { Injectable, isDevMode } from '@angular/core'
+import { fromEvent, map, scan } from 'rxjs'
+import { toSignal } from '@angular/core/rxjs-interop'
+
+@Injectable({ providedIn: 'root' })
+export class DevtoolsOptionsManager {
+  loadDevtools = toSignal(
+    fromEvent<KeyboardEvent>(document, 'keydown').pipe(
+      map(
+        (event): boolean =>
+          event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
+      ),
+      scan((acc, curr) => acc || curr, isDevMode()),
+    ),
+    {
+      initialValue: isDevMode(),
+    },
+  )
+}
+```
+
+If you want to use an injectable such as a service in the callback you can use `deps`. The injected value will be passed as parameter to the callback function.
+
+This is similar to `deps` in Angular's [`useFactory`](https://angular.dev/guide/di/dependency-injection-providers#factory-providers-usefactory) provider.
+
+```ts
+// ...
+// 👇 Note we import from the production sub-path to enable devtools lazy loading in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(),
+    provideTanStackQuery(
+      new QueryClient(),
+      withDevtools(
+        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+          loadDevtools: devToolsOptionsManager.loadDevtools(),
+        }),
+        {
+          // `deps` is used to inject and pass `DevtoolsOptionsManager` to the `withDevtools` callback.
+          deps: [DevtoolsOptionsManager],
+        },
+      ),
+    ),
+  ],
+}
+```
+
+### Options returned from the callback
+
+Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, `initialIsOpen`, and `theme` support reactivity through signals.
+
+- `loadDevtools?: 'auto' | boolean`
+  - Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.
+  - Use this to control if the devtools are loaded.
+- `initialIsOpen?: Boolean`
+  - Set this to `true` if you want the tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`
+  - The position of the TanStack logo to open and close the devtools panel
+  - If `relative`, the button is placed in the location that you render the devtools.
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the Angular Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the QueryClient provided through `provideTanStackQuery` will be injected.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `hideDisabledQueries?: boolean`
+  - Set this to true to hide disabled queries from the devtools panel.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
diff --git a/mintlify/query/framework/angular/examples/auto-refetching.md b/mintlify/query/framework/angular/examples/auto-refetching.md
new file mode 100644
index 000000000..542b02fe0
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/auto-refetching.md
@@ -0,0 +1,12 @@
+---
+title: "Auto Refetching / Polling / Realtime"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/auto-refetching)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/auto-refetching)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/basic.md b/mintlify/query/framework/angular/examples/basic.md
new file mode 100644
index 000000000..8fdaef62c
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/devtools-panel.md b/mintlify/query/framework/angular/examples/devtools-panel.md
new file mode 100644
index 000000000..19e42a4f0
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/devtools-panel.md
@@ -0,0 +1,12 @@
+---
+title: "Devtools embedded panel"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/devtools-panel)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/devtools-panel)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/infinite-query-with-max-pages.md b/mintlify/query/framework/angular/examples/infinite-query-with-max-pages.md
new file mode 100644
index 000000000..c6eb82d17
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/infinite-query-with-max-pages.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite query with maxPages"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/infinite-query-with-max-pages)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/infinite-query-with-max-pages)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/optimistic-updates.md b/mintlify/query/framework/angular/examples/optimistic-updates.md
new file mode 100644
index 000000000..8f1c1164b
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/optimistic-updates.md
@@ -0,0 +1,12 @@
+---
+title: "Optimistic Updates"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/optimistic-updates)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/optimistic-updates)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/pagination.md b/mintlify/query/framework/angular/examples/pagination.md
new file mode 100644
index 000000000..d3cef1257
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/query-options-from-a-service.md b/mintlify/query/framework/angular/examples/query-options-from-a-service.md
new file mode 100644
index 000000000..248f5fbf1
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/query-options-from-a-service.md
@@ -0,0 +1,12 @@
+---
+title: "Query options from a service"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/query-options-from-a-service)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/query-options-from-a-service)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/router.md b/mintlify/query/framework/angular/examples/router.md
new file mode 100644
index 000000000..b6b619bef
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/router.md
@@ -0,0 +1,12 @@
+---
+title: "Angular Router"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/router)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/router)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/rxjs.md b/mintlify/query/framework/angular/examples/rxjs.md
new file mode 100644
index 000000000..3c09a0c2d
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/rxjs.md
@@ -0,0 +1,12 @@
+---
+title: "RxJS autocomplete"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/rxjs)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/rxjs)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/examples/simple.md b/mintlify/query/framework/angular/examples/simple.md
new file mode 100644
index 000000000..bf7e5b5d3
--- /dev/null
+++ b/mintlify/query/framework/angular/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/angular/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/angular/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/angular/guides/background-fetching-indicators.md b/mintlify/query/framework/angular/guides/background-fetching-indicators.md
new file mode 100644
index 000000000..2aa27c62c
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/background-fetching-indicators.md
@@ -0,0 +1,60 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+replace:
+  {
+    'useIsFetching': 'injectIsFetching',
+    'hook': 'function',
+    '@tanstack/react-query': '@tanstack/angular-query-experimental',
+  }
+---
+
+[//]: # 'Example'
+
+```angular-ts
+@Component({
+  selector: 'todos',
+  template: `
+    @if (todosQuery.isPending()) {
+      Loading...
+    } @else if (todosQuery.isError()) {
+      An error has occurred: {{ todosQuery.error().message }}
+    } @else if (todosQuery.isSuccess()) {
+      @if (todosQuery.isFetching()) {
+        Refreshing...
+      }
+      @for (todos of todosQuery.data(); track todo.id) {
+        <todo [todo]="todo" />
+      }
+    }
+  `,
+})
+class TodosComponent {
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```angular-ts
+import { injectIsFetching } from '@tanstack/angular-query-experimental'
+
+@Component({
+  selector: 'global-loading-indicator',
+  template: `
+    @if (isFetching()) {
+      <div>Queries are fetching in the background...</div>
+    }
+  `,
+})
+export class GlobalLoadingIndicatorComponent {
+  isFetching = injectIsFetching()
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/angular/guides/caching.md b/mintlify/query/framework/angular/guides/caching.md
new file mode 100644
index 000000000..80d848eed
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/caching.md
@@ -0,0 +1,35 @@
+---
+id: caching
+title: Caching Examples
+---
+
+> Please thoroughly read the [Important Defaults](/query/framework/angular/guides/important-defaults) before reading this guide
+
+## Basic Example
+
+This caching example illustrates the story and lifecycle of:
+
+- Query Instances with and without cache data
+- Background Refetching
+- Inactive Queries
+- Garbage Collection
+
+Let's assume we are using the default `gcTime` of **5 minutes** and the default `staleTime` of `0`.
+
+- A new instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` initializes.
+  - Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
+  - When the network request has completed, the returned data will be cached under the `['todos']` key.
+  - The data will be marked as stale after the configured `staleTime` (defaults to `0`, or immediately).
+- A second instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` initializes elsewhere.
+  - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
+  - The new instance triggers a new network request using its query function.
+    - Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](/query/framework/angular/reference/functions/injectQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
+  - When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
+- Both instances of the `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` query are destroyed and no longer in use.
+  - Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
+- Before the cache timeout has completed, another instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
+- The final instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` gets destroyed.
+- No more instances of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))` appear within **5 minutes**.
+  - The cached data under the `['todos']` key is deleted and garbage collected.
+
+For more advanced use-cases, see [injectQuery](/query/framework/angular/reference/functions/injectQuery).
diff --git a/mintlify/query/framework/angular/guides/default-query-function.md b/mintlify/query/framework/angular/guides/default-query-function.md
new file mode 100644
index 000000000..75e0fa3c4
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/default-query-function.md
@@ -0,0 +1,49 @@
+---
+id: default-query-function
+title: Default Query Function
+ref: docs/framework/react/guides/default-query-function.md
+---
+
+[//]: # 'Example'
+
+```ts
+// Define a default query function that will receive the query key
+const defaultQueryFn: QueryFunction = async ({ queryKey }) => {
+  const { data } = await axios.get(
+    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
+  )
+  return data
+}
+
+// provide the default query function to your app with defaultOptions
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+})
+
+bootstrapApplication(MyAppComponent, {
+  providers: [provideTanStackQuery(queryClient)],
+})
+
+export class PostsComponent {
+  // All you have to do now is pass a key!
+  postsQuery = injectQuery<Array<Post>>(() => ({
+    queryKey: ['/posts'],
+  }))
+  // ...
+}
+
+export class PostComponent {
+  // You can even leave out the queryFn and just go straight into options
+  postQuery = injectQuery<Post>(() => ({
+    enabled: this.postIdSignal() > 0,
+    queryKey: [`/posts/${this.postIdSignal()}`],
+  }))
+  // ...
+}
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/angular/guides/dependent-queries.md b/mintlify/query/framework/angular/guides/dependent-queries.md
new file mode 100644
index 000000000..38afbd491
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/dependent-queries.md
@@ -0,0 +1,33 @@
+---
+id: dependent-queries
+title: Dependent Queries
+ref: docs/framework/react/guides/dependent-queries.md
+replace: { 'useQuery': 'injectQuery', 'useQueries': 'injectQueries' }
+---
+
+[//]: # 'Example'
+
+```ts
+// Get the user
+userQuery = injectQuery(() => ({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+}))
+
+// Then get the user's projects
+projectsQuery = injectQuery(() => ({
+  queryKey: ['projects', this.userQuery.data()?.id],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the user id exists
+  enabled: !!this.userQuery.data()?.id,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+// injectQueries is under development for Angular Query
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/angular/guides/disabling-queries.md b/mintlify/query/framework/angular/guides/disabling-queries.md
new file mode 100644
index 000000000..35da0225d
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/disabling-queries.md
@@ -0,0 +1,95 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+ref: docs/framework/react/guides/disabling-queries.md
+replace: { 'useQuery': 'injectQuery' }
+---
+
+[//]: # 'Example'
+
+```angular-ts
+@Component({
+  selector: 'todos',
+  template: `<div>
+    <button (click)="query.refetch()">Fetch Todos</button>
+
+    @if (query.data()) {
+      <ul>
+        @for (todo of query.data(); track todo.id) {
+          <li>{{ todo.title }}</li>
+        }
+      </ul>
+    } @else {
+      @if (query.isError()) {
+        <span>Error: {{ query.error().message }}</span>
+      } @else if (query.isLoading()) {
+        <span>Loading...</span>
+      } @else if (!query.isLoading() && !query.isError()) {
+        <span>Not ready ...</span>
+      }
+    }
+
+    <div>{{ query.isLoading() ? 'Fetching...' : '' }}</div>
+  </div>`,
+})
+export class TodosComponent {
+  query = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+    enabled: false,
+  }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```angular-ts
+@Component({
+  selector: 'todos',
+  template: `
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <filters-form onApply="filter.set" />
+      <todos-table data="query.data()" />
+    </div>
+  `,
+})
+export class TodosComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: () => fetchTodos(this.filter()),
+    enabled: !!this.filter(),
+  }))
+}
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```angular-ts
+import { skipToken, injectQuery } from '@tanstack/query-angular'
+
+@Component({
+  selector: 'todos',
+  template: `
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <filters-form onApply="filter.set" />
+      <todos-table data="query.data()" />
+    </div>
+  `,
+})
+export class TodosComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: this.filter() ? () => fetchTodos(this.filter()) : skipToken,
+  }))
+}
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/angular/guides/does-this-replace-client-state.md b/mintlify/query/framework/angular/guides/does-this-replace-client-state.md
new file mode 100644
index 000000000..3872115c9
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/does-this-replace-client-state.md
@@ -0,0 +1,11 @@
+---
+id: does-this-replace-client-state
+title: Does TanStack Query replace global state managers?
+ref: docs/framework/react/guides/does-this-replace-client-state.md
+replace:
+  {
+    'useQuery': 'injectQuery',
+    'useMutation': 'injectMutation',
+    'hook': 'function',
+  }
+---
diff --git a/mintlify/query/framework/angular/guides/filters.md b/mintlify/query/framework/angular/guides/filters.md
new file mode 100644
index 000000000..870da98c2
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/filters.md
@@ -0,0 +1,5 @@
+---
+id: filters
+title: Filters
+ref: docs/framework/react/guides/filters.md
+---
diff --git a/mintlify/query/framework/angular/guides/important-defaults.md b/mintlify/query/framework/angular/guides/important-defaults.md
new file mode 100644
index 000000000..886792038
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/important-defaults.md
@@ -0,0 +1,16 @@
+---
+id: important-defaults
+title: Important Defaults
+ref: docs/framework/react/guides/important-defaults.md
+replace:
+  {
+    'React': 'Angular',
+    'react-query': 'angular-query',
+    'useQuery': 'injectQuery',
+    'useInfiniteQuery': 'injectInfiniteQuery',
+    'useMemo and useCallback': 'setting signal values',
+  }
+---
+
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/infinite-queries.md b/mintlify/query/framework/angular/guides/infinite-queries.md
new file mode 100644
index 000000000..69f5ac4fe
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/infinite-queries.md
@@ -0,0 +1,158 @@
+---
+id: infinite-queries
+title: Infinite Queries
+ref: docs/framework/react/guides/infinite-queries.md
+replace:
+  { 'useQuery': 'injectQuery', 'useInfiniteQuery': 'injectInfiniteQuery' }
+---
+
+[//]: # 'Example'
+
+```angular-ts
+import { Component, computed, inject } from '@angular/core'
+import { injectInfiniteQuery } from '@tanstack/angular-query-experimental'
+import { lastValueFrom } from 'rxjs'
+import { ProjectsService } from './projects-service'
+
+@Component({
+  selector: 'example',
+  templateUrl: './example.component.html',
+})
+export class Example {
+  projectsService = inject(ProjectsService)
+
+  query = injectInfiniteQuery(() => ({
+    queryKey: ['projects'],
+    queryFn: async ({ pageParam }) => {
+      return lastValueFrom(this.projectsService.getProjects(pageParam))
+    },
+    initialPageParam: 0,
+    getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
+    getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+    maxPages: 3,
+  }))
+
+  nextButtonDisabled = computed(
+    () => !this.#hasNextPage() || this.#isFetchingNextPage(),
+  )
+  nextButtonText = computed(() =>
+    this.#isFetchingNextPage()
+      ? 'Loading more...'
+      : this.#hasNextPage()
+        ? 'Load newer'
+        : 'Nothing more to load',
+  )
+
+  #hasNextPage = this.query.hasNextPage
+  #isFetchingNextPage = this.query.isFetchingNextPage
+}
+```
+
+```angular-html
+<div>
+  @if (query.isPending()) {
+    <p>Loading...</p>
+  } @else if (query.isError()) {
+    <span>Error: {{ query?.error().message }}</span>
+  } @else {
+    @for (page of query?.data().pages; track $index) {
+      @for (project of page.data; track project.id) {
+        <p>{{ project.name }} {{ project.id }}</p>
+      }
+    }
+    <div>
+      <button (click)="query.fetchNextPage()" [disabled]="nextButtonDisabled()">
+        {{ nextButtonText() }}
+      </button>
+    </div>
+  }
+</div>
+```
+
+[//]: # 'Example'
+[//]: # 'Example1'
+
+```angular-ts
+@Component({
+  template: ` <list-component (endReached)="fetchNextPage()" /> `,
+})
+export class Example {
+  query = injectInfiniteQuery(() => ({
+    queryKey: ['projects'],
+    queryFn: async ({ pageParam }) => {
+      return lastValueFrom(this.projectsService.getProjects(pageParam))
+    },
+  }))
+
+  fetchNextPage() {
+    // Do nothing if already fetching
+    if (this.query.isFetching()) return
+    this.query.fetchNextPage()
+  }
+}
+```
+
+[//]: # 'Example1'
+[//]: # 'Example3'
+
+```ts
+query = injectInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```ts
+query = injectInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  select: (data) => ({
+    pages: [...data.pages].reverse(),
+    pageParams: [...data.pageParams].reverse(),
+  }),
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example8'
+
+```ts
+injectInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+  maxPages: 3,
+}))
+```
+
+[//]: # 'Example8'
+[//]: # 'Example9'
+
+```ts
+injectInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    if (lastPage.length === 0) {
+      return undefined
+    }
+    return lastPageParam + 1
+  },
+  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
+    if (firstPageParam <= 1) {
+      return undefined
+    }
+    return firstPageParam - 1
+  },
+}))
+```
+
+[//]: # 'Example9'
diff --git a/mintlify/query/framework/angular/guides/initial-query-data.md b/mintlify/query/framework/angular/guides/initial-query-data.md
new file mode 100644
index 000000000..28673844b
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/initial-query-data.md
@@ -0,0 +1,132 @@
+---
+id: initial-query-data
+title: Initial Query Data
+ref: docs/framework/react/guides/initial-query-data.md
+replace:
+  {
+    'render': 'service or component instance',
+    ' when it mounts': '',
+    'after mount': 'after initialization',
+    'on mount': 'on initialization',
+  }
+---
+
+[//]: # 'Example'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+// Will show initialTodos immediately, but also immediately refetch todos
+// when an instance of the component or service is created
+result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```ts
+// Show initialTodos immediately, but won't refetch until
+// another interaction event is encountered after 1000 ms
+result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+  staleTime: 1000,
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```ts
+// Show initialTodos immediately, but won't refetch until
+// another interaction event is encountered after 1000 ms
+result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+  staleTime: 60 * 1000, // 1 minute
+  // This could be 10 seconds ago or 10 minutes ago
+  initialDataUpdatedAt: initialTodosUpdatedTimestamp, // eg. 1608412420052
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: () => getExpensiveTodos(),
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Example6'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todo', this.todoId()],
+  queryFn: () => fetch('/todos'),
+  initialData: () => {
+    // Use a todo from the 'todos' query as the initial data for this todo query
+    return this.queryClient
+      .getQueryData(['todos'])
+      ?.find((d) => d.id === this.todoId())
+  },
+}))
+```
+
+[//]: # 'Example6'
+[//]: # 'Example7'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todos', this.todoId()],
+  queryFn: () => fetch(`/todos/${this.todoId()}`),
+  initialData: () =>
+    queryClient.getQueryData(['todos'])?.find((d) => d.id === this.todoId()),
+  initialDataUpdatedAt: () =>
+    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
+}))
+```
+
+[//]: # 'Example7'
+[//]: # 'Example8'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todo', this.todoId()],
+  queryFn: () => fetch(`/todos/${this.todoId()}`),
+  initialData: () => {
+    // Get the query state
+    const state = queryClient.getQueryState(['todos'])
+
+    // If the query exists and has data that is no older than 10 seconds...
+    if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {
+      // return the individual todo
+      return state.data.find((d) => d.id === this.todoId())
+    }
+
+    // Otherwise, return undefined and let it fetch from a hard loading state!
+  },
+}))
+```
+
+[//]: # 'Example8'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/invalidations-from-mutations.md b/mintlify/query/framework/angular/guides/invalidations-from-mutations.md
new file mode 100644
index 000000000..c4d69dba4
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/invalidations-from-mutations.md
@@ -0,0 +1,41 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+ref: docs/framework/react/guides/invalidations-from-mutations.md
+replace: { 'useMutation': 'injectMutation', 'hook': 'function' }
+---
+
+[//]: # 'Example'
+
+```ts
+mutation = injectMutation(() => ({
+  mutationFn: postTodo,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+import {
+  injectMutation,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+export class TodosComponent {
+  queryClient = inject(QueryClient)
+
+  // When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
+  mutation = injectMutation(() => ({
+    mutationFn: addTodo,
+    onSuccess: () => {
+      this.queryClient.invalidateQueries({ queryKey: ['todos'] })
+      this.queryClient.invalidateQueries({ queryKey: ['reminders'] })
+    },
+  }))
+}
+```
+
+[//]: # 'Example2'
+
+You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](/query/framework/angular/guides/mutations)
diff --git a/mintlify/query/framework/angular/guides/mutation-options.md b/mintlify/query/framework/angular/guides/mutation-options.md
new file mode 100644
index 000000000..61adddd6e
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/mutation-options.md
@@ -0,0 +1,27 @@
+---
+id: query-options
+title: Mutation Options
+---
+
+One of the best ways to share mutation options between multiple places,
+is to use the `mutationOptions` helper. At runtime, this helper just returns whatever you pass into it,
+but it has a lot of advantages when using it [with TypeScript](/query/framework/angular/typescript#typing-query-options).
+You can define all possible options for a mutation in one place,
+and you'll also get type inference and type safety for all of them.
+
+```ts
+export class QueriesService {
+  private http = inject(HttpClient)
+
+  updatePost(id: number) {
+    return mutationOptions({
+      mutationFn: (post: Post) => Promise.resolve(post),
+      mutationKey: ['updatePost', id],
+      onSuccess: (newPost) => {
+        //           ^? newPost: Post
+        this.queryClient.setQueryData(['posts', id], newPost)
+      },
+    })
+  }
+}
+```
diff --git a/mintlify/query/framework/angular/guides/mutations.md b/mintlify/query/framework/angular/guides/mutations.md
new file mode 100644
index 000000000..f51180823
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/mutations.md
@@ -0,0 +1,270 @@
+---
+id: mutations
+title: Mutations
+ref: docs/framework/react/guides/mutations.md
+replace:
+  {
+    'useMutation': 'injectMutation',
+    'hook': 'function',
+    'still mounted': 'still active',
+    'unmounts': 'gets destroyed',
+    'mounted': 'initialized',
+  }
+---
+
+[//]: # 'Example'
+
+```angular-ts
+@Component({
+  template: `
+    <div>
+      @if (mutation.isPending()) {
+        <span>Adding todo...</span>
+      } @else if (mutation.isError()) {
+        <div>An error occurred: {{ mutation.error()?.message }}</div>
+      } @else if (mutation.isSuccess()) {
+        <div>Todo added!</div>
+      }
+      <button (click)="mutation.mutate(1)">Create Todo</button>
+    </div>
+  `,
+})
+export class TodosComponent {
+  todoService = inject(TodoService)
+  mutation = injectMutation(() => ({
+    mutationFn: (todoId: number) =>
+      lastValueFrom(this.todoService.create(todoId)),
+  }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Info1'
+[//]: # 'Info1'
+[//]: # 'Example2'
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```angular-ts
+@Component({
+  selector: 'todo-item',
+  imports: [ReactiveFormsModule],
+  template: `
+    <form [formGroup]="todoForm" (ngSubmit)="onCreateTodo()">
+      @if (mutation.error()) {
+        <h5 (click)="mutation.reset()">{{ mutation.error() }}</h5>
+      }
+      <input type="text" formControlName="title" />
+      <br />
+      <button type="submit">Create Todo</button>
+    </form>
+  `,
+})
+export class TodosComponent {
+  mutation = injectMutation(() => ({
+    mutationFn: createTodo,
+  }))
+
+  fb = inject(NonNullableFormBuilder)
+
+  todoForm = this.fb.group({
+    title: this.fb.control('', {
+      validators: [Validators.required],
+    }),
+  })
+
+  title = toSignal(this.todoForm.controls.title.valueChanges, {
+    initialValue: '',
+  })
+
+  onCreateTodo = () => {
+    this.mutation.mutate(this.title())
+  }
+}
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```ts
+mutation = injectMutation(() => ({
+  mutationFn: addTodo,
+  onMutate: (variables, context) => {
+    // A mutation is about to happen!
+
+    // Optionally return a result containing data to use when for example rolling back
+    return { id: 1 }
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // An error happened!
+    console.log(`rolling back optimistic update with id ${onMutateResult.id}`)
+  },
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Boom baby!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // Error or success... doesn't matter!
+  },
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```ts
+mutation = injectMutation(() => ({
+  mutationFn: addTodo,
+  onSuccess: async () => {
+    console.log("I'm first!")
+  },
+  onSettled: async () => {
+    console.log("I'm second!")
+  },
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Example6'
+
+```ts
+mutation = injectMutation(() => ({
+  mutationFn: addTodo,
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+}))
+
+mutation.mutate(todo, {
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+})
+```
+
+[//]: # 'Example6'
+[//]: # 'Example7'
+
+```ts
+export class Example {
+  mutation = injectMutation(() => ({
+    mutationFn: addTodo,
+    onSuccess: (data, variables, onMutateResult, context) => {
+      // Will be called 3 times
+    },
+  }))
+
+  doMutations() {
+    ;['Todo 1', 'Todo 2', 'Todo 3'].forEach((todo) => {
+      this.mutation.mutate(todo, {
+        onSuccess: (data, variables, onMutateResult, context) => {
+          // Will execute only once, for the last mutation (Todo 3),
+          // regardless which mutation resolves first
+        },
+      })
+    })
+  }
+}
+```
+
+[//]: # 'Example7'
+[//]: # 'Example8'
+
+```ts
+mutation = injectMutation(() => ({ mutationFn: addTodo }))
+
+try {
+  const todo = await mutation.mutateAsync(todo)
+  console.log(todo)
+} catch (error) {
+  console.error(error)
+} finally {
+  console.log('done')
+}
+```
+
+[//]: # 'Example8'
+[//]: # 'Example9'
+
+```ts
+mutation = injectMutation(() => ({
+  mutationFn: addTodo,
+  retry: 3,
+}))
+```
+
+[//]: # 'Example9'
+[//]: # 'Example10'
+
+```ts
+const queryClient = new QueryClient()
+
+// Define the "addTodo" mutation
+queryClient.setMutationDefaults(['addTodo'], {
+  mutationFn: addTodo,
+  onMutate: async (variables, context) => {
+    // Cancel current queries for the todos list
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Create optimistic todo
+    const optimisticTodo = { id: uuid(), title: variables.title }
+
+    // Add optimistic todo to todos list
+    context.client.setQueryData(['todos'], (old) => [...old, optimisticTodo])
+
+    // Return result with the optimistic todo
+    return { optimisticTodo }
+  },
+  onSuccess: (result, variables, onMutateResult, context) => {
+    // Replace optimistic todo in the todos list with the result
+    context.client.setQueryData(['todos'], (old) =>
+      old.map((todo) =>
+        todo.id === onMutateResult.optimisticTodo.id ? result : todo,
+      ),
+    )
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // Remove optimistic todo from the todos list
+    context.client.setQueryData(['todos'], (old) =>
+      old.filter((todo) => todo.id !== onMutateResult.optimisticTodo.id),
+    )
+  },
+  retry: 3,
+})
+
+class someComponent {
+  // Start mutation in some component:
+  mutation = injectMutation(() => ({ mutationKey: ['addTodo'] }))
+
+  someMethod() {
+    mutation.mutate({ title: 'title' })
+  }
+}
+
+// If the mutation has been paused because the device is for example offline,
+// Then the paused mutation can be dehydrated when the application quits:
+const state = dehydrate(queryClient)
+
+// The mutation can then be hydrated again when the application is started:
+hydrate(queryClient, state)
+
+// Resume the paused mutations:
+queryClient.resumePausedMutations()
+```
+
+[//]: # 'Example10'
+[//]: # 'Example11'
+[//]: # 'Example11'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/network-mode.md b/mintlify/query/framework/angular/guides/network-mode.md
new file mode 100644
index 000000000..e773e73ff
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/network-mode.md
@@ -0,0 +1,5 @@
+---
+id: network-mode
+title: Network Mode
+ref: docs/framework/react/guides/network-mode.md
+---
diff --git a/mintlify/query/framework/angular/guides/optimistic-updates.md b/mintlify/query/framework/angular/guides/optimistic-updates.md
new file mode 100644
index 000000000..d87a6c28b
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/optimistic-updates.md
@@ -0,0 +1,168 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+ref: docs/framework/react/guides/optimistic-updates.md
+replace:
+  {
+    'React': 'Angular',
+    'useMutation': 'injectMutation',
+    'hook': 'function',
+    'useMutationState': 'injectMutationState',
+    'addTodoMutation': 'addTodo',
+  }
+---
+
+[//]: # 'ExampleUI1'
+
+```ts
+addTodo = injectMutation(() => ({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  // make sure to _return_ the Promise from the query invalidation
+  // so that the mutation stays in `pending` state until the refetch is finished
+  onSettled: async () => {
+    return await queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+}))
+```
+
+[//]: # 'ExampleUI1'
+[//]: # 'ExampleUI2'
+
+```angular-ts
+@Component({
+  template: `
+    @for (todo of todos.data(); track todo.id) {
+      <li>{{ todo.title }}</li>
+    }
+    @if (addTodo.isPending()) {
+      <li style="opacity: 0.5">{{ addTodo.variables() }}</li>
+    }
+  `,
+})
+class TodosComponent {}
+```
+
+[//]: # 'ExampleUI2'
+[//]: # 'ExampleUI3'
+
+```angular-ts
+@Component({
+  template: `
+    @if (addTodo.isError()) {
+      <li style="color: red">
+        {{ addTodo.variables() }}
+        <button (click)="addTodo.mutate(addTodo.variables())">Retry</button>
+      </li>
+    }
+  `,
+})
+class TodosComponent {}
+```
+
+[//]: # 'ExampleUI3'
+[//]: # 'ExampleUI4'
+
+```ts
+// somewhere in your app
+addTodo = injectMutation(() => ({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  mutationKey: ['addTodo'],
+}))
+
+// access variables somewhere else
+
+mutationState = injectMutationState<string>(() => ({
+  filters: { mutationKey: ['addTodo'], status: 'pending' },
+  select: (mutation) => mutation.state.variables,
+}))
+```
+
+[//]: # 'ExampleUI4'
+[//]: # 'Example'
+
+```ts
+queryClient = inject(QueryClient)
+
+updateTodo = injectMutation(() => ({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Snapshot the previous value
+    const previousTodos = context.client.getQueryData(['todos'])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos'], (old) => [...old, newTodo])
+
+    // Return a result object with the snapshotted value
+    return { previousTodos }
+  },
+  // If the mutation fails,
+  // use the result returned from onMutate to roll back
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(['todos'], onMutateResult.previousTodos)
+  },
+  // Always refetch after error or success:
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    context.client.invalidateQueries({ queryKey: ['todos'] })
+  },
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+queryClient = inject(QueryClient)
+
+updateTodo = injectMutation(() => ({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos', newTodo.id] })
+
+    // Snapshot the previous value
+    const previousTodo = context.client.getQueryData(['todos', newTodo.id])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos', newTodo.id], newTodo)
+
+    // Return a result with the previous and new todo
+    return { previousTodo, newTodo }
+  },
+  // If the mutation fails, use the result we returned above
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(
+      ['todos', onMutateResult.newTodo.id],
+      onMutateResult.previousTodo,
+    )
+  },
+  // Always refetch after error or success:
+  onSettled: (newTodo, error, variables, onMutateResult, context) => {
+    context.client.invalidateQueries({ queryKey: ['todos', newTodo.id] })
+  },
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```ts
+injectMutation({
+  mutationFn: updateTodo,
+  // ...
+  onSettled: (newTodo, error, variables, onMutateResult, context) => {
+    if (error) {
+      // do something
+    }
+  },
+})
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/angular/guides/paginated-queries.md b/mintlify/query/framework/angular/guides/paginated-queries.md
new file mode 100644
index 000000000..0510cfed2
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/paginated-queries.md
@@ -0,0 +1,104 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+ref: docs/framework/react/guides/paginated-queries.md
+replace:
+  {
+    'useQuery': 'injectQuery',
+    'useInfiniteQuery': 'injectInfiniteQuery',
+    'hook': 'function',
+  }
+---
+
+[//]: # 'Example'
+
+```ts
+const result = injectQuery(() => ({
+  queryKey: ['projects', page()],
+  queryFn: fetchProjects,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```angular-ts
+@Component({
+  selector: 'pagination-example',
+  template: `
+    <div>
+      <p>
+        In this example, each page of data remains visible as the next page is
+        fetched. The buttons and capability to proceed to the next page are also
+        suppressed until the next page cursor is known. Each page is cached as a
+        normal query too, so when going to previous pages, you'll see them
+        instantaneously while they are also re-fetched invisibly in the
+        background.
+      </p>
+      @if (query.status() === 'pending') {
+        <div>Loading...</div>
+      } @else if (query.status() === 'error') {
+        <div>Error: {{ query.error().message }}</div>
+      } @else {
+        <!-- 'data' will either resolve to the latest page's data -->
+        <!-- or if fetching a new page, the last successful page's data -->
+        <div>
+          @for (project of query.data().projects; track project.id) {
+            <p>{{ project.name }}</p>
+          }
+        </div>
+      }
+
+      <div>Current Page: {{ page() + 1 }}</div>
+      <button (click)="previousPage()" [disabled]="page() === 0">
+        Previous Page
+      </button>
+      <button
+        (click)="nextPage()"
+        [disabled]="query.isPlaceholderData() || !query.data()?.hasMore"
+      >
+        Next Page
+      </button>
+      <!-- Since the last page's data potentially sticks around between page requests, -->
+      <!-- we can use 'isFetching' to show a background loading -->
+      <!-- indicator since our status === 'pending' state won't be triggered -->
+      @if (query.isFetching()) {
+        <span> Loading...</span>
+      }
+    </div>
+  `,
+})
+export class PaginationExampleComponent {
+  page = signal(0)
+  #queryClient = inject(QueryClient)
+
+  query = injectQuery(() => ({
+    queryKey: ['projects', this.page()],
+    queryFn: () => lastValueFrom(fetchProjects(this.page())),
+    placeholderData: keepPreviousData,
+    staleTime: 5000,
+  }))
+
+  constructor() {
+    effect(() => {
+      // Prefetch the next page!
+      if (!this.query.isPlaceholderData() && this.query.data()?.hasMore) {
+        this.#queryClient.prefetchQuery({
+          queryKey: ['projects', this.page() + 1],
+          queryFn: () => lastValueFrom(fetchProjects(this.page() + 1)),
+        })
+      }
+    })
+  }
+
+  previousPage() {
+    this.page.update((old) => Math.max(old - 1, 0))
+  }
+
+  nextPage() {
+    this.page.update((old) => (this.query.data()?.hasMore ? old + 1 : old))
+  }
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/angular/guides/parallel-queries.md b/mintlify/query/framework/angular/guides/parallel-queries.md
new file mode 100644
index 000000000..f88756a2a
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/parallel-queries.md
@@ -0,0 +1,57 @@
+---
+id: parallel-queries
+title: Parallel Queries
+ref: docs/framework/react/guides/parallel-queries.md
+replace:
+  {
+    'If the number of queries you need to execute is changing from render to render, you cannot use manual querying since that would violate the rules of hooks. Instead, ': '',
+    'hook': 'function',
+    'React': 'Angular',
+    'hooks': 'functions',
+    'useQuery': 'injectQuery',
+    'useInfiniteQuery': 'injectInfiniteQuery',
+    'useQueries': 'injectQueries',
+  }
+---
+
+[//]: # 'Example'
+
+```ts
+export class AppComponent {
+  // The following queries will execute in parallel
+  usersQuery = injectQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
+  teamsQuery = injectQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
+  projectsQuery = injectQuery(() => ({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+  }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Info'
+[//]: # 'Info'
+[//]: # 'DynamicParallelIntro'
+
+TanStack Query provides `injectQueries`, which you can use to dynamically execute as many queries in parallel as you'd like.
+
+[//]: # 'DynamicParallelIntro'
+[//]: # 'Example2'
+
+```ts
+export class AppComponent {
+  users = signal<Array<User>>([])
+
+  // Please note injectQueries is under development and this code does not work yet
+  userQueries = injectQueries(() => ({
+    queries: users().map((user) => {
+      return {
+        queryKey: ['user', user.id],
+        queryFn: () => fetchUserById(user.id),
+      }
+    }),
+  }))
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/angular/guides/placeholder-query-data.md b/mintlify/query/framework/angular/guides/placeholder-query-data.md
new file mode 100644
index 000000000..ba92fbc4e
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/placeholder-query-data.md
@@ -0,0 +1,58 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+ref: docs/framework/react/guides/placeholder-query-data.md
+---
+
+[//]: # 'ExampleValue'
+
+```ts
+class TodosComponent {
+  result = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    placeholderData: placeholderTodos,
+  }))
+}
+```
+
+[//]: # 'ExampleValue'
+[//]: # 'Memoization'
+[//]: # 'Memoization'
+[//]: # 'ExampleFunction'
+
+```ts
+class TodosComponent {
+  result = injectQuery(() => ({
+    queryKey: ['todos', id()],
+    queryFn: () => fetch(`/todos/${id}`),
+    placeholderData: (previousData, previousQuery) => previousData,
+  }))
+}
+```
+
+[//]: # 'ExampleFunction'
+[//]: # 'ExampleCache'
+
+```ts
+export class BlogPostComponent {
+  postId = input.required<number>()
+  queryClient = inject(QueryClient)
+
+  result = injectQuery(() => ({
+    queryKey: ['blogPost', this.postId()],
+    queryFn: () => fetch(`/blogPosts/${this.postId()}`),
+    placeholderData: () => {
+      // Use the smaller/preview version of the blogPost from the 'blogPosts'
+      // query as the placeholder data for this blogPost query
+      return this.queryClient
+        .getQueryData(['blogPosts'])
+        ?.find((d) => d.id === this.postId())
+    },
+  }))
+}
+```
+
+[//]: # 'ExampleCache'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/queries.md b/mintlify/query/framework/angular/guides/queries.md
new file mode 100644
index 000000000..336da2e17
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/queries.md
@@ -0,0 +1,98 @@
+---
+id: queries
+title: Queries
+ref: docs/framework/react/guides/queries.md
+replace:
+  {
+    'React': 'Angular',
+    'react-query': 'angular-query',
+    'promise': 'promise or observable',
+    'custom hooks': 'services',
+    'the `useQuery` hook': '`injectQuery`',
+    '`useQuery`': '`injectQuery`',
+    "TypeScript will also narrow the type of data correctly if you've checked for pending and error before accessing it.": 'TypeScript will only narrow the type when checking boolean signals such as `isPending` and `isError`.',
+  }
+---
+
+[//]: # 'Example'
+
+```ts
+import { injectQuery } from '@tanstack/angular-query-experimental'
+
+export class TodosComponent {
+  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```angular-ts
+@Component({
+  selector: 'todos',
+  template: `
+    @if (todos.isPending()) {
+      <span>Loading...</span>
+    } @else if (todos.isError()) {
+      <span>Error: {{ todos.error()?.message }}</span>
+    } @else {
+      <!-- We can assume by this point that status === 'success' -->
+      @for (todo of todos.data(); track todo.id) {
+        <li>{{ todo.title }}</li>
+      } @empty {
+        <li>No todos found</li>
+      }
+    }
+  `,
+})
+export class PostsComponent {
+  todos = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  }))
+}
+```
+
+[//]: # 'Example3'
+
+If booleans aren't your thing, you can always use the `status` state as well:
+
+[//]: # 'Example4'
+
+```angular-ts
+@Component({
+  selector: 'todos',
+  template: `
+    @switch (todos.status()) {
+      @case ('pending') {
+        <span>Loading...</span>
+      }
+      @case ('error') {
+        <span>Error: {{ todos.error()?.message }}</span>
+      }
+      <!-- also status === 'success', but "else" logic works, too -->
+      @default {
+        <ul>
+          @for (todo of todos.data(); track todo.id) {
+            <li>{{ todo.title }}</li>
+          } @empty {
+            <li>No todos found</li>
+          }
+        </ul>
+      }
+    }
+  `,
+})
+class TodosComponent {}
+```
+
+[//]: # 'Example4'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/query-cancellation.md b/mintlify/query/framework/angular/guides/query-cancellation.md
new file mode 100644
index 000000000..554cb28d1
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-cancellation.md
@@ -0,0 +1,105 @@
+---
+id: query-cancellation
+title: Query Cancellation
+---
+
+TanStack Query provides each query function with an [`AbortSignal` instance](https://developer.mozilla.org/docs/Web/API/AbortSignal). When a query becomes out-of-date or inactive, this `signal` will become aborted. This means that all queries are cancellable, and you can respond to the cancellation inside your query function if desired. The best part about this is that it allows you to continue to use normal async/await syntax while getting all the benefits of automatic cancellation.
+
+## Default behavior
+
+By default, queries that unmount or become unused before their promises are resolved are _not_ cancelled. This means that after the promise has resolved, the resulting data will be available in the cache. This is helpful if you've started receiving a query, but then unmount the component before it finishes. If you mount the component again and the query has not been garbage collected yet, data will be available.
+
+However, if you consume the `AbortSignal`, the Promise will be cancelled (e.g. aborting the fetch) and therefore, also the Query must be cancelled. Cancelling the query will result in its state being _reverted_ to its previous state.
+
+## Using `HttpClient`
+
+```ts
+import { HttpClient } from '@angular/common/http'
+import { injectQuery } from '@tanstack/angular-query-experimental'
+
+postQuery = injectQuery(() => ({
+  enabled: this.postId() > 0,
+  queryKey: ['post', this.postId()],
+  queryFn: async (context): Promise<Post> => {
+    const abort$ = fromEvent(context.signal, 'abort')
+    return lastValueFrom(this.getPost$(this.postId()).pipe(takeUntil(abort$)))
+  },
+}))
+```
+
+## Using `fetch`
+
+[//]: # 'Example2'
+
+```ts
+query = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const todosResponse = await fetch('/todos', {
+      // Pass the signal to one fetch
+      signal,
+    })
+    const todos = await todosResponse.json()
+
+    const todoDetails = todos.map(async ({ details }) => {
+      const response = await fetch(details, {
+        // Or pass it to several
+        signal,
+      })
+      return response.json()
+    })
+
+    return Promise.all(todoDetails)
+  },
+}))
+```
+
+[//]: # 'Example2'
+
+## Using `axios`
+
+[//]: # 'Example3'
+
+```ts
+import axios from 'axios'
+
+const query = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) =>
+    axios.get('/todos', {
+      // Pass the signal to `axios`
+      signal,
+    }),
+}))
+```
+
+[//]: # 'Example3'
+
+## Manual Cancellation
+
+You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `queryClient.cancelQueries({ queryKey })`, which will cancel the query and revert it back to its previous state. If you have consumed the `signal` passed to the query function, TanStack Query will additionally also cancel the Promise.
+
+[//]: # 'Example7'
+
+```angular-ts
+@Component({
+  template: `<button (click)="onCancel()">Cancel</button>`,
+})
+export class TodosComponent {
+  query = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: async ({ signal }) => {
+      const resp = await fetch('/todos', { signal })
+      return resp.json()
+    },
+  }))
+
+  queryClient = inject(QueryClient)
+
+  onCancel() {
+    this.queryClient.cancelQueries(['todos'])
+  }
+}
+```
+
+[//]: # 'Example7'
diff --git a/mintlify/query/framework/angular/guides/query-functions.md b/mintlify/query/framework/angular/guides/query-functions.md
new file mode 100644
index 000000000..ae5f9e6c9
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-functions.md
@@ -0,0 +1,76 @@
+---
+id: query-functions
+title: Query Functions
+ref: docs/framework/react/guides/query-functions.md
+---
+
+[//]: # 'Example'
+
+```ts
+injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchAllTodos }))
+injectQuery(() => ({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
+injectQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    const data = await fetchTodoById(todoId)
+    return data
+  },
+}))
+injectQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+todos = injectQuery(() => ({
+  queryKey: ['todos', todoId()],
+  queryFn: async () => {
+    if (somethingGoesWrong) {
+      throw new Error('Oh no!')
+    }
+    if (somethingElseGoesWrong) {
+      return Promise.reject(new Error('Oh no!'))
+    }
+
+    return data
+  },
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```ts
+todos = injectQuery(() => ({
+  queryKey: ['todos', todoId()],
+  queryFn: async () => {
+    const response = await fetch('/todos/' + todoId)
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+    return response.json()
+  },
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```ts
+result = injectQuery(() => ({
+  queryKey: ['todos', { status: status(), page: page() }],
+  queryFn: fetchTodoList,
+}))
+
+// Access the key, status and page variables in your query function!
+function fetchTodoList({ queryKey }) {
+  const [_key, { status, page }] = queryKey
+  return new Promise()
+}
+```
+
+[//]: # 'Example4'
diff --git a/mintlify/query/framework/angular/guides/query-invalidation.md b/mintlify/query/framework/angular/guides/query-invalidation.md
new file mode 100644
index 000000000..9cd8ea580
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-invalidation.md
@@ -0,0 +1,112 @@
+---
+id: query-invalidation
+title: Query Invalidation
+ref: docs/framework/react/guides/query-invalidation.md
+replace: { 'useQuery': 'injectQuery', 'hooks': 'functions' }
+---
+
+[//]: # 'Example2'
+
+```ts
+import { injectQuery, QueryClient } from '@tanstack/angular-query-experimental'
+
+class QueryInvalidationExample {
+  queryClient = inject(QueryClient)
+
+  invalidateQueries() {
+    this.queryClient.invalidateQueries({ queryKey: ['todos'] })
+  }
+
+  // Both queries below will be invalidated
+  todoListQuery = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  }))
+  todoListQuery = injectQuery(() => ({
+    queryKey: ['todos', { page: 1 }],
+    queryFn: fetchTodoList,
+  }))
+}
+```
+
+[//]: # 'Example2'
+
+You can even invalidate queries with specific variables by passing a more specific query key to the `invalidateQueries` method:
+
+[//]: # 'Example3'
+
+```ts
+queryClient.invalidateQueries({
+  queryKey: ['todos', { type: 'done' }],
+})
+
+// The query below will be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos', { type: 'done' }],
+  queryFn: fetchTodoList,
+}))
+
+// However, the following query below will NOT be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+}))
+```
+
+[//]: # 'Example3'
+
+The `invalidateQueries` API is very flexible, so even if you want to **only** invalidate `todos` queries that don't have any more variables or subkeys, you can pass an `exact: true` option to the `invalidateQueries` method:
+
+[//]: # 'Example4'
+
+```ts
+queryClient.invalidateQueries({
+  queryKey: ['todos'],
+  exact: true,
+})
+
+// The query below will be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+}))
+
+// However, the following query below will NOT be invalidated
+const todoListQuery = injectQuery(() => ({
+  queryKey: ['todos', { type: 'done' }],
+  queryFn: fetchTodoList,
+}))
+```
+
+[//]: # 'Example4'
+
+If you find yourself wanting **even more** granularity, you can pass a predicate function to the `invalidateQueries` method. This function will receive each `Query` instance from the query cache and allow you to return `true` or `false` for whether you want to invalidate that query:
+
+[//]: # 'Example5'
+
+```ts
+queryClient.invalidateQueries({
+  predicate: (query) =>
+    query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
+})
+
+// The query below will be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos', { version: 20 }],
+  queryFn: fetchTodoList,
+}))
+
+// The query below will be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos', { version: 10 }],
+  queryFn: fetchTodoList,
+}))
+
+// However, the following query below will NOT be invalidated
+todoListQuery = injectQuery(() => ({
+  queryKey: ['todos', { version: 5 }],
+  queryFn: fetchTodoList,
+}))
+```
+
+[//]: # 'Example5'
diff --git a/mintlify/query/framework/angular/guides/query-keys.md b/mintlify/query/framework/angular/guides/query-keys.md
new file mode 100644
index 000000000..dd5634fc5
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-keys.md
@@ -0,0 +1,65 @@
+---
+id: query-keys
+title: Query Keys
+ref: docs/framework/react/guides/query-keys.md
+#todo: exhaustive-deps is at least for now React-only
+---
+
+[//]: # 'Example'
+
+```ts
+// A list of todos
+injectQuery(() => ({ queryKey: ['todos'], ... }))
+
+// Something else, whatever!
+injectQuery(() => ({ queryKey: ['something', 'special'], ... }))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+// An individual todo
+injectQuery(() => ({queryKey: ['todo', 5], ...}))
+
+// An individual todo in a "preview" format
+injectQuery(() => ({queryKey: ['todo', 5, {preview: true}], ...}))
+
+// A list of todos that are "done"
+injectQuery(() => ({queryKey: ['todos', {type: 'done'}], ...}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```ts
+injectQuery(() => ({ queryKey: ['todos', { status, page }], ... }))
+injectQuery(() => ({ queryKey: ['todos', { page, status }], ...}))
+injectQuery(() => ({ queryKey: ['todos', { page, status, other: undefined }], ... }))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```ts
+injectQuery(() => ({ queryKey: ['todos', status, page], ... }))
+injectQuery(() => ({ queryKey: ['todos', page, status], ...}))
+injectQuery(() => ({ queryKey: ['todos', undefined, page, status], ...}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```ts
+todoId = signal(-1)
+
+injectQuery(() => ({
+  enabled: todoId() > 0,
+  queryKey: ['todos', todoId()],
+  queryFn: () => fetchTodoById(todoId()),
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/guides/query-options.md b/mintlify/query/framework/angular/guides/query-options.md
new file mode 100644
index 000000000..d63753bbf
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-options.md
@@ -0,0 +1,58 @@
+---
+id: query-options
+title: Query Options
+ref: docs/framework/react/guides/query-options.md
+---
+
+[//]: # 'Example1'
+
+```ts
+import { queryOptions } from '@tanstack/angular-query-experimental'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class QueriesService {
+  private http = inject(HttpClient)
+
+  post(postId: number) {
+    return queryOptions({
+      queryKey: ['post', postId],
+      queryFn: () => {
+        return lastValueFrom(
+          this.http.get<Post>(
+            `https://jsonplaceholder.typicode.com/posts/${postId}`,
+          ),
+        )
+      },
+    })
+  }
+}
+
+// usage:
+
+postId = input.required({
+  transform: numberAttribute,
+})
+queries = inject(QueriesService)
+
+postQuery = injectQuery(() => this.queries.post(this.postId()))
+
+queryClient.prefetchQuery(this.queries.post(23))
+queryClient.setQueryData(this.queries.post(42).queryKey, newPost)
+```
+
+[//]: # 'Example1'
+[//]: # 'Example2'
+
+```ts
+// Type inference still works, so query.data will be the return type of select instead of queryFn
+queries = inject(QueriesService)
+
+query = injectQuery(() => ({
+  ...groupOptions(1),
+  select: (data) => data.title,
+}))
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/angular/guides/query-retries.md b/mintlify/query/framework/angular/guides/query-retries.md
new file mode 100644
index 000000000..45228d10b
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/query-retries.md
@@ -0,0 +1,66 @@
+---
+id: query-retries
+title: Query Retries
+ref: docs/framework/react/guides/query-retries.md
+replace:
+  {
+    'Provider': 'Plugin',
+    'useQuery': 'injectQuery',
+    'useMutation': 'injectMutation',
+  }
+---
+
+[//]: # 'Info'
+[//]: # 'Info'
+[//]: # 'Example'
+
+```ts
+import { injectQuery } from '@tanstack/angular-query-experimental'
+
+// Make a specific query retry a certain number of times
+const result = injectQuery(() => ({
+  queryKey: ['todos', 1],
+  queryFn: fetchTodoListPage,
+  retry: 10, // Will retry failed requests 10 times before displaying an error
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+// Configure for all queries
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/angular-query-experimental'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+    },
+  },
+})
+
+bootstrapApplication(AppComponent, {
+  providers: [provideTanStackQuery(queryClient)],
+})
+```
+
+[//]: # 'Example2'
+
+Though it is not recommended, you can obviously override the `retryDelay` function/integer in both the Provider and individual query options. If set to an integer instead of a function the delay will always be the same amount of time:
+
+[//]: # 'Example3'
+
+```ts
+const result = injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+  retryDelay: 1000, // Will always wait 1000ms to retry, regardless of how many retries
+}))
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/angular/guides/scroll-restoration.md b/mintlify/query/framework/angular/guides/scroll-restoration.md
new file mode 100644
index 000000000..cb66c4b46
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/scroll-restoration.md
@@ -0,0 +1,5 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+ref: docs/framework/react/guides/scroll-restoration.md
+---
diff --git a/mintlify/query/framework/angular/guides/testing.md b/mintlify/query/framework/angular/guides/testing.md
new file mode 100644
index 000000000..7648d7f6b
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/testing.md
@@ -0,0 +1,157 @@
+---
+id: testing
+title: Testing
+---
+
+Most Angular tests using TanStack Query will involve services or components that call `injectQuery`/`injectMutation`.
+
+TanStack Query's `inject*` functions integrate with [`PendingTasks`](https://angular.dev/api/core/PendingTasks) which ensures the framework is aware of in-progress queries and mutations.
+
+This means tests and SSR can wait until mutations and queries resolve. In unit tests you can use `ApplicationRef.whenStable()` or `fixture.whenStable()` to await query completion. This works for both Zone.js and Zoneless setups.
+
+> This integration requires Angular 19 or later. Earlier versions of Angular do not support `PendingTasks`.
+
+## TestBed setup
+
+Create a fresh `QueryClient` for every spec and provide it with `provideTanStackQuery` or `provideQueryClient`. This keeps caches isolated and lets you change default options per test:
+
+```ts
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false, // ✅ faster failure tests
+    },
+  },
+})
+
+TestBed.configureTestingModule({
+  providers: [provideTanStackQuery(queryClient)],
+})
+```
+
+> If your applications actual TanStack Query config is used in unit tests, make sure `withDevtools` is not accidentally included in test providers. This can cause slow tests. It is best to keep test and production configs separate.
+
+If you share helpers, remember to call `queryClient.clear()` (or build a new instance) in `afterEach` so data from one test never bleeds into another.
+
+## First query test
+
+Query tests typically run inside `TestBed.runInInjectionContext`, then wait for stability:
+
+```ts
+const appRef = TestBed.inject(ApplicationRef)
+const query = TestBed.runInInjectionContext(() =>
+  injectQuery(() => ({
+    queryKey: ['greeting'],
+    queryFn: () => 'Hello',
+  })),
+)
+
+TestBed.tick() // Trigger effect
+
+// Application is stable when queries are idle
+await appRef.whenStable()
+
+expect(query.status()).toBe('success')
+expect(query.data()).toBe('Hello')
+```
+
+PendingTasks will have `whenStable()` resolve after the query settles. When using fake timers (Vitest), advance the clock and a microtask before awaiting stability:
+
+```ts
+await vi.advanceTimersByTimeAsync(0)
+await Promise.resolve()
+await appRef.whenStable()
+```
+
+## Testing components
+
+For components, bootstrap them through `TestBed.createComponent`, then await `fixture.whenStable()`:
+
+```ts
+const fixture = TestBed.createComponent(ExampleComponent)
+
+await fixture.whenStable()
+expect(fixture.componentInstance.query.data()).toEqual({ value: 42 })
+```
+
+## Handling retries
+
+Retries slow failing tests because the default backoff runs three times. Set `retry: false` (or a specific number) through `defaultOptions` or per query to keep tests fast. If a query intentionally retries, assert on the final state rather than intermediate counts.
+
+## HttpClient & network stubs
+
+Angular's `HttpClientTestingModule` plays nicely with PendingTasks. Register it alongside the Query provider and flush responses through `HttpTestingController`:
+
+```ts
+TestBed.configureTestingModule({
+  imports: [HttpClientTestingModule],
+  providers: [provideTanStackQuery(queryClient)],
+})
+
+const httpCtrl = TestBed.inject(HttpTestingController)
+const query = TestBed.runInInjectionContext(() =>
+  injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => lastValueFrom(TestBed.inject(HttpClient).get('/api/todos')),
+  })),
+)
+
+const fixturePromise = TestBed.inject(ApplicationRef).whenStable()
+httpCtrl.expectOne('/api/todos').flush([{ id: 1 }])
+await fixturePromise
+
+expect(query.data()).toEqual([{ id: 1 }])
+httpCtrl.verify()
+```
+
+## Infinite queries & pagination
+
+Use the same pattern for infinite queries: call `fetchNextPage()`, advance timers if you are faking time, then await stability and assert on `data().pages`.
+
+```ts
+const infinite = TestBed.runInInjectionContext(() =>
+  injectInfiniteQuery(() => ({
+    queryKey: ['pages'],
+    queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
+    getNextPageParam: (last, all) => all.length + 1,
+  })),
+)
+
+await appRef.whenStable()
+expect(infinite.data().pages).toHaveLength(1)
+
+await infinite.fetchNextPage()
+await vi.advanceTimersByTimeAsync(0)
+await appRef.whenStable()
+
+expect(infinite.data().pages).toHaveLength(2)
+```
+
+## Mutations and optimistic updates
+
+```ts
+const mutation = TestBed.runInInjectionContext(() =>
+  injectMutation(() => ({
+    mutationFn: async (input: string) => input.toUpperCase(),
+  })),
+)
+
+mutation.mutate('test')
+
+// Trigger effect
+TestBed.tick()
+
+await appRef.whenStable()
+
+expect(mutation.isSuccess()).toBe(true)
+expect(mutation.data()).toBe('TEST')
+```
+
+## Quick checklist
+
+- Fresh `QueryClient` per test (and clear it afterwards)
+- Disable or control retries to avoid timeouts
+- Advance timers + microtasks before `whenStable()` when using fake timers
+- Use `HttpClientTestingModule` or your preferred mock to assert network calls
+- Await `whenStable()` after every `refetch`, `fetchNextPage`, or mutation
+- Prefer `TestBed.runInInjectionContext` for service tests and `fixture.whenStable()` for component tests
diff --git a/mintlify/query/framework/angular/guides/window-focus-refetching.md b/mintlify/query/framework/angular/guides/window-focus-refetching.md
new file mode 100644
index 000000000..14490ba07
--- /dev/null
+++ b/mintlify/query/framework/angular/guides/window-focus-refetching.md
@@ -0,0 +1,39 @@
+---
+id: window-focus-refetching
+title: Window Focus Refetching
+ref: docs/framework/react/guides/window-focus-refetching.md
+replace: { '@tanstack/react-query': '@tanstack/angular-query-experimental' }
+---
+
+[//]: # 'Example'
+
+```ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTanStackQuery(
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false, // default: true
+          },
+        },
+      }),
+    ),
+  ],
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+injectQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  refetchOnWindowFocus: false,
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/angular/installation.md b/mintlify/query/framework/angular/installation.md
new file mode 100644
index 000000000..c24ba496a
--- /dev/null
+++ b/mintlify/query/framework/angular/installation.md
@@ -0,0 +1,34 @@
+---
+id: installation
+title: Installation
+---
+
+> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
+
+### NPM
+
+_Angular Query is compatible with Angular v16 and higher_
+
+```bash
+npm i @tanstack/angular-query-experimental
+```
+
+or
+
+```bash
+pnpm add @tanstack/angular-query-experimental
+```
+
+or
+
+```bash
+yarn add @tanstack/angular-query-experimental
+```
+
+or
+
+```bash
+bun add @tanstack/angular-query-experimental
+```
+
+> Wanna give it a spin before you download? Try out the [simple](/query/framework/angular/examples/simple) or [basic](/query/framework/angular/examples/basic) examples!
diff --git a/mintlify/query/framework/angular/overview.md b/mintlify/query/framework/angular/overview.md
new file mode 100644
index 000000000..8c349cc51
--- /dev/null
+++ b/mintlify/query/framework/angular/overview.md
@@ -0,0 +1,112 @@
+---
+id: overview
+title: Overview
+---
+
+> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
+
+The `@tanstack/angular-query-experimental` package offers a 1st-class API for using TanStack Query via Angular.
+
+## Feedback welcome!
+
+We are in the process of getting to a stable API for TanStack Query on Angular. If you have any feedback, please contact us at the [TanStack Discord](https://tlinz.com/discord) server or [visit this discussion](https://github.com/TanStack/query/discussions/6293) on Github.
+
+## Supported Angular Versions
+
+TanStack Query is compatible with Angular v16 and higher.
+
+TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.
+
+## Motivation
+
+Most core web frameworks **do not** come with an opinionated way of fetching or updating data in a holistic way. Because of this developers end up building either meta-frameworks which encapsulate strict opinions about data-fetching, or they invent their own ways of fetching data. This usually means cobbling together component-based state and side-effects, or using more general purpose state management libraries to store and provide asynchronous data throughout their apps.
+
+While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
+
+- Is persisted remotely in a location you may not control or own
+- Requires asynchronous APIs for fetching and updating
+- Implies shared ownership and can be changed by other people without your knowledge
+- Can potentially become "out of date" in your applications if you're not careful
+
+Once you grasp the nature of server state in your application, **even more challenges will arise** as you go, for example:
+
+- Caching... (possibly the hardest thing to do in programming)
+- Deduping multiple requests for the same data into a single request
+- Updating "out of date" data in the background
+- Knowing when data is "out of date"
+- Reflecting updates to data as quickly as possible
+- Performance optimizations like pagination and lazy loading data
+- Managing memory and garbage collection of server state
+- Memoizing query results with structural sharing
+
+If you're not overwhelmed by that list, then that must mean that you've probably solved all of your server state problems already and deserve an award. However, if you are like a vast majority of people, you either have yet to tackle all or most of these challenges and we're only scratching the surface!
+
+TanStack Query is hands down one of the _best_ libraries for managing server state. It works amazingly well **out-of-the-box, with zero-config, and can be customized** to your liking as your application grows.
+
+TanStack Query allows you to defeat and overcome the tricky challenges and hurdles of _server state_ and control your app data before it starts to control you.
+
+On a more technical note, TanStack Query will likely:
+
+- Help you remove **many** lines of complicated and misunderstood code from your application and replace with just a handful of lines of Angular Query logic.
+- Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
+- Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
+- Potentially help you save on bandwidth and increase memory performance
+
+[//]: # 'Example'
+
+## Enough talk, show me some code already!
+
+In the example below, you can see TanStack Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
+
+[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/simple)
+
+```angular-ts
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { CommonModule } from '@angular/common'
+import { injectQuery } from '@tanstack/angular-query-experimental'
+import { lastValueFrom } from 'rxjs'
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'simple-example',
+  template: `
+    @if (query.isPending()) {
+      Loading...
+    }
+    @if (query.error()) {
+      An error has occurred: {{ query.error().message }}
+    }
+    @if (query.data(); as data) {
+      <h1>{{ data.name }}</h1>
+      <p>{{ data.description }}</p>
+      <strong>👀 {{ data.subscribers_count }}</strong>
+      <strong>✨ {{ data.stargazers_count }}</strong>
+      <strong>🍴 {{ data.forks_count }}</strong>
+    }
+  `,
+})
+export class SimpleExampleComponent {
+  http = inject(HttpClient)
+
+  query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      lastValueFrom(
+        this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
+      ),
+  }))
+}
+
+interface Response {
+  name: string
+  description: string
+  subscribers_count: number
+  stargazers_count: number
+  forks_count: number
+}
+```
+
+## You talked me into it, so what now?
+
+- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](/query/framework/angular/installation) and [API Reference](/query/framework/angular/reference/functions/injectQuery)
diff --git a/mintlify/query/framework/angular/quick-start.md b/mintlify/query/framework/angular/quick-start.md
new file mode 100644
index 000000000..b767a2e0a
--- /dev/null
+++ b/mintlify/query/framework/angular/quick-start.md
@@ -0,0 +1,117 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
+
+[//]: # 'Example'
+
+If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](/query/framework/angular/examples/basic)
+
+### Provide the client to your App
+
+```ts
+import { provideHttpClient } from '@angular/common/http'
+import {
+  provideTanStackQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+bootstrapApplication(AppComponent, {
+  providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],
+})
+```
+
+or in a NgModule-based app
+
+```ts
+import { provideHttpClient } from '@angular/common/http'
+import {
+  provideTanStackQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [provideTanStackQuery(new QueryClient())],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+### Component with query and mutation
+
+```angular-ts
+import { Component, Injectable, inject } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { lastValueFrom } from 'rxjs'
+
+import {
+  injectMutation,
+  injectQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+@Component({
+  template: `
+    <div>
+      <button (click)="onAddTodo()">Add Todo</button>
+
+      <ul>
+        @for (todo of query.data(); track todo.title) {
+          <li>{{ todo.title }}</li>
+        }
+      </ul>
+    </div>
+  `,
+})
+export class TodosComponent {
+  todoService = inject(TodoService)
+  queryClient = inject(QueryClient)
+
+  query = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => this.todoService.getTodos(),
+  }))
+
+  mutation = injectMutation(() => ({
+    mutationFn: (todo: Todo) => this.todoService.addTodo(todo),
+    onSuccess: () => {
+      this.queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  }))
+
+  onAddTodo() {
+    this.mutation.mutate({
+      id: Date.now().toString(),
+      title: 'Do Laundry',
+    })
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class TodoService {
+  private http = inject(HttpClient)
+
+  getTodos(): Promise<Todo[]> {
+    return lastValueFrom(
+      this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'),
+    )
+  }
+
+  addTodo(todo: Todo): Promise<Todo> {
+    return lastValueFrom(
+      this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo),
+    )
+  }
+}
+
+interface Todo {
+  id: string
+  title: string
+}
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/angular/reference/functions/infiniteQueryOptions.md b/mintlify/query/framework/angular/reference/functions/infiniteQueryOptions.md
new file mode 100644
index 000000000..bd661c87b
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/infiniteQueryOptions.md
@@ -0,0 +1,158 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+---
+
+# Function: infiniteQueryOptions()
+
+Allows to share and re-use infinite query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+## Param
+
+The infinite query options to tag with the type from `queryFn`.
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & object;
+```
+
+Defined in: [infinite-query-options.ts:88](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L88)
+
+Allows to share and re-use infinite query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataInfiniteOptions`](/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+The infinite query options to tag with the type from `queryFn`.
+
+### Returns
+
+[`CreateInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
+
+The tagged infinite query options.
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): OmitKeyof<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object & object;
+```
+
+Defined in: [infinite-query-options.ts:119](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L119)
+
+Allows to share and re-use infinite query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UnusedSkipTokenInfiniteOptions`](/query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+The infinite query options to tag with the type from `queryFn`.
+
+### Returns
+
+`OmitKeyof`\&lt;[`CreateInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"`\> & `object` & `object`
+
+The tagged infinite query options.
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & object;
+```
+
+Defined in: [infinite-query-options.ts:150](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L150)
+
+Allows to share and re-use infinite query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataInfiniteOptions`](/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+The infinite query options to tag with the type from `queryFn`.
+
+### Returns
+
+[`CreateInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
+
+The tagged infinite query options.
diff --git a/mintlify/query/framework/angular/reference/functions/injectInfiniteQuery.md b/mintlify/query/framework/angular/reference/functions/injectInfiniteQuery.md
new file mode 100644
index 000000000..c480c0e93
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectInfiniteQuery.md
@@ -0,0 +1,176 @@
+---
+id: injectInfiniteQuery
+title: injectInfiniteQuery
+---
+
+# Function: injectInfiniteQuery()
+
+Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
+
+## Param
+
+A function that returns infinite query options.
+
+## Param
+
+Additional configuration.
+
+## Call Signature
+
+```ts
+function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn, options?): DefinedCreateInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [inject-infinite-query.ts:41](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L41)
+
+Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### injectInfiniteQueryFn
+
+() => [`DefinedInitialDataInfiniteOptions`](/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+A function that returns infinite query options.
+
+#### options?
+
+[`InjectInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions)
+
+Additional configuration.
+
+### Returns
+
+[`DefinedCreateInfiniteQueryResult`](/query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult)\&lt;`TData`, `TError`\>
+
+The infinite query result.
+
+## Call Signature
+
+```ts
+function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn, options?): CreateInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [inject-infinite-query.ts:65](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L65)
+
+Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### injectInfiniteQueryFn
+
+() => [`UndefinedInitialDataInfiniteOptions`](/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+A function that returns infinite query options.
+
+#### options?
+
+[`InjectInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions)
+
+Additional configuration.
+
+### Returns
+
+[`CreateInfiniteQueryResult`](/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult)\&lt;`TData`, `TError`\>
+
+The infinite query result.
+
+## Call Signature
+
+```ts
+function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn, options?): CreateInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [inject-infinite-query.ts:89](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L89)
+
+Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### injectInfiniteQueryFn
+
+() => [`CreateInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+A function that returns infinite query options.
+
+#### options?
+
+[`InjectInfiniteQueryOptions`](/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions)
+
+Additional configuration.
+
+### Returns
+
+[`CreateInfiniteQueryResult`](/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult)\&lt;`TData`, `TError`\>
+
+The infinite query result.
diff --git a/mintlify/query/framework/angular/reference/functions/injectIsFetching.md b/mintlify/query/framework/angular/reference/functions/injectIsFetching.md
new file mode 100644
index 000000000..379ca252d
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectIsFetching.md
@@ -0,0 +1,37 @@
+---
+id: injectIsFetching
+title: injectIsFetching
+---
+
+# Function: injectIsFetching()
+
+```ts
+function injectIsFetching(filters?, options?): Signal<number>;
+```
+
+Defined in: [inject-is-fetching.ts:31](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-fetching.ts#L31)
+
+Injects a signal that tracks the number of queries that your application is loading or
+fetching in the background.
+
+Can be used for app-wide loading indicators
+
+## Parameters
+
+### filters?
+
+`QueryFilters`\&lt;readonly `unknown`[]\>
+
+The filters to apply to the query.
+
+### options?
+
+[`InjectIsFetchingOptions`](/query/framework/angular/reference/interfaces/InjectIsFetchingOptions)
+
+Additional configuration
+
+## Returns
+
+`Signal`\&lt;`number`\>
+
+signal with number of loading or fetching queries.
diff --git a/mintlify/query/framework/angular/reference/functions/injectIsMutating.md b/mintlify/query/framework/angular/reference/functions/injectIsMutating.md
new file mode 100644
index 000000000..6813f9ff1
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectIsMutating.md
@@ -0,0 +1,36 @@
+---
+id: injectIsMutating
+title: injectIsMutating
+---
+
+# Function: injectIsMutating()
+
+```ts
+function injectIsMutating(filters?, options?): Signal<number>;
+```
+
+Defined in: [inject-is-mutating.ts:30](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-mutating.ts#L30)
+
+Injects a signal that tracks the number of mutations that your application is fetching.
+
+Can be used for app-wide loading indicators
+
+## Parameters
+
+### filters?
+
+`MutationFilters`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+The filters to apply to the query.
+
+### options?
+
+[`InjectIsMutatingOptions`](/query/framework/angular/reference/interfaces/InjectIsMutatingOptions)
+
+Additional configuration
+
+## Returns
+
+`Signal`\&lt;`number`\>
+
+A read-only signal with the number of fetching mutations.
diff --git a/mintlify/query/framework/angular/reference/functions/injectIsRestoring.md b/mintlify/query/framework/angular/reference/functions/injectIsRestoring.md
new file mode 100644
index 000000000..dd67975e7
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectIsRestoring.md
@@ -0,0 +1,28 @@
+---
+id: injectIsRestoring
+title: injectIsRestoring
+---
+
+# Function: injectIsRestoring()
+
+```ts
+function injectIsRestoring(options?): Signal<boolean>;
+```
+
+Defined in: [inject-is-restoring.ts:32](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-restoring.ts#L32)
+
+Injects a signal that tracks whether a restore is currently in progress. [injectQuery](/query/framework/angular/reference/functions/injectQuery) and friends also check this internally to avoid race conditions between the restore and initializing queries.
+
+## Parameters
+
+### options?
+
+`InjectIsRestoringOptions`
+
+Options for injectIsRestoring.
+
+## Returns
+
+`Signal`\&lt;`boolean`\>
+
+readonly signal with boolean that indicates whether a restore is in progress.
diff --git a/mintlify/query/framework/angular/reference/functions/injectMutation.md b/mintlify/query/framework/angular/reference/functions/injectMutation.md
new file mode 100644
index 000000000..73816a7bf
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectMutation.md
@@ -0,0 +1,54 @@
+---
+id: injectMutation
+title: injectMutation
+---
+
+# Function: injectMutation()
+
+```ts
+function injectMutation<TData, TError, TVariables, TOnMutateResult>(injectMutationFn, options?): CreateMutationResult<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [inject-mutation.ts:45](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L45)
+
+Injects a mutation: an imperative function that can be invoked which typically performs server side effects.
+
+Unlike queries, mutations are not run automatically.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### injectMutationFn
+
+() => [`CreateMutationOptions`](/query/framework/angular/reference/interfaces/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+A function that returns mutation options.
+
+### options?
+
+[`InjectMutationOptions`](/query/framework/angular/reference/interfaces/InjectMutationOptions)
+
+Additional configuration
+
+## Returns
+
+[`CreateMutationResult`](/query/framework/angular/reference/type-aliases/CreateMutationResult)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+The mutation.
diff --git a/mintlify/query/framework/angular/reference/functions/injectMutationState.md b/mintlify/query/framework/angular/reference/functions/injectMutationState.md
new file mode 100644
index 000000000..e66dbf03f
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectMutationState.md
@@ -0,0 +1,40 @@
+---
+id: injectMutationState
+title: injectMutationState
+---
+
+# Function: injectMutationState()
+
+```ts
+function injectMutationState<TResult>(injectMutationStateFn, options?): Signal<TResult[]>;
+```
+
+Defined in: [inject-mutation-state.ts:60](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation-state.ts#L60)
+
+Injects a signal that tracks the state of all mutations.
+
+## Type Parameters
+
+### TResult
+
+`TResult` = `MutationState`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+## Parameters
+
+### injectMutationStateFn
+
+() => `MutationStateOptions`\&lt;`TResult`\>
+
+A function that returns mutation state options.
+
+### options?
+
+[`InjectMutationStateOptions`](/query/framework/angular/reference/interfaces/InjectMutationStateOptions)
+
+The Angular injector to use.
+
+## Returns
+
+`Signal`\&lt;`TResult`[]\>
+
+The signal that tracks the state of all mutations.
diff --git a/mintlify/query/framework/angular/reference/functions/injectQuery.md b/mintlify/query/framework/angular/reference/functions/injectQuery.md
new file mode 100644
index 000000000..6e6784712
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectQuery.md
@@ -0,0 +1,292 @@
+---
+id: injectQuery
+title: injectQuery
+---
+
+# Function: injectQuery()
+
+Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+
+**Basic example**
+```ts
+class ServiceOrComponent {
+  query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
+  }))
+}
+```
+
+Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
+In the example below, the query will be automatically enabled and executed when the filter signal changes
+to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
+
+**Reactive example**
+```ts
+class ServiceOrComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: () => fetchTodos(this.filter()),
+    // Signals can be combined with expressions
+    enabled: !!this.filter(),
+  }))
+}
+```
+
+## Param
+
+A function that returns query options.
+
+## Param
+
+Additional configuration
+
+## See
+
+/query/framework/angular/guides/queries
+
+## Call Signature
+
+```ts
+function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): DefinedCreateQueryResult<TData, TError>;
+```
+
+Defined in: [inject-query.ts:65](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L65)
+
+Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+
+**Basic example**
+```ts
+class ServiceOrComponent {
+  query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
+  }))
+}
+```
+
+Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
+In the example below, the query will be automatically enabled and executed when the filter signal changes
+to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
+
+**Reactive example**
+```ts
+class ServiceOrComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: () => fetchTodos(this.filter()),
+    // Signals can be combined with expressions
+    enabled: !!this.filter(),
+  }))
+}
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### injectQueryFn
+
+() => [`DefinedInitialDataOptions`](/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+A function that returns query options.
+
+#### options?
+
+[`InjectQueryOptions`](/query/framework/angular/reference/interfaces/InjectQueryOptions)
+
+Additional configuration
+
+### Returns
+
+[`DefinedCreateQueryResult`](/query/framework/angular/reference/type-aliases/DefinedCreateQueryResult)\&lt;`TData`, `TError`\>
+
+The query result.
+
+### See
+
+/query/framework/angular/guides/queries
+
+## Call Signature
+
+```ts
+function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;
+```
+
+Defined in: [inject-query.ts:116](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L116)
+
+Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+
+**Basic example**
+```ts
+class ServiceOrComponent {
+  query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
+  }))
+}
+```
+
+Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
+In the example below, the query will be automatically enabled and executed when the filter signal changes
+to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
+
+**Reactive example**
+```ts
+class ServiceOrComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: () => fetchTodos(this.filter()),
+    // Signals can be combined with expressions
+    enabled: !!this.filter(),
+  }))
+}
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### injectQueryFn
+
+() => [`UndefinedInitialDataOptions`](/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+A function that returns query options.
+
+#### options?
+
+[`InjectQueryOptions`](/query/framework/angular/reference/interfaces/InjectQueryOptions)
+
+Additional configuration
+
+### Returns
+
+[`CreateQueryResult`](/query/framework/angular/reference/type-aliases/CreateQueryResult)\&lt;`TData`, `TError`\>
+
+The query result.
+
+### See
+
+/query/framework/angular/guides/queries
+
+## Call Signature
+
+```ts
+function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;
+```
+
+Defined in: [inject-query.ts:167](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L167)
+
+Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
+
+**Basic example**
+```ts
+class ServiceOrComponent {
+  query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
+  }))
+}
+```
+
+Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
+In the example below, the query will be automatically enabled and executed when the filter signal changes
+to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
+
+**Reactive example**
+```ts
+class ServiceOrComponent {
+  filter = signal('')
+
+  todosQuery = injectQuery(() => ({
+    queryKey: ['todos', this.filter()],
+    queryFn: () => fetchTodos(this.filter()),
+    // Signals can be combined with expressions
+    enabled: !!this.filter(),
+  }))
+}
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### injectQueryFn
+
+() => [`CreateQueryOptions`](/query/framework/angular/reference/interfaces/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+A function that returns query options.
+
+#### options?
+
+[`InjectQueryOptions`](/query/framework/angular/reference/interfaces/InjectQueryOptions)
+
+Additional configuration
+
+### Returns
+
+[`CreateQueryResult`](/query/framework/angular/reference/type-aliases/CreateQueryResult)\&lt;`TData`, `TError`\>
+
+The query result.
+
+### See
+
+/query/framework/angular/guides/queries
diff --git a/mintlify/query/framework/angular/reference/functions/injectQueryClient.md b/mintlify/query/framework/angular/reference/functions/injectQueryClient.md
new file mode 100644
index 000000000..8bbb08ce7
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/injectQueryClient.md
@@ -0,0 +1,38 @@
+---
+id: injectQueryClient
+title: injectQueryClient
+---
+
+# ~~Function: injectQueryClient()~~
+
+```ts
+function injectQueryClient(injectOptions): QueryClient;
+```
+
+Defined in: [inject-query-client.ts:18](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query-client.ts#L18)
+
+Injects a `QueryClient` instance and allows passing a custom injector.
+
+## Parameters
+
+### injectOptions
+
+`InjectOptions` & `object` = `{}`
+
+Type of the options argument to inject and optionally a custom injector.
+
+## Returns
+
+`QueryClient`
+
+The `QueryClient` instance.
+
+## Deprecated
+
+Use `inject(QueryClient)` instead.
+If you need to get a `QueryClient` from a custom injector, use `injector.get(QueryClient)`.
+
+**Example**
+```ts
+const queryClient = injectQueryClient();
+```
diff --git a/mintlify/query/framework/angular/reference/functions/mutationOptions.md b/mintlify/query/framework/angular/reference/functions/mutationOptions.md
new file mode 100644
index 000000000..ace4cddf7
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/mutationOptions.md
@@ -0,0 +1,186 @@
+---
+id: mutationOptions
+title: mutationOptions
+---
+
+# Function: mutationOptions()
+
+Allows to share and re-use mutation options in a type-safe way.
+
+**Example**
+
+```ts
+export class QueriesService {
+  private http = inject(HttpClient)
+  private queryClient = inject(QueryClient)
+
+  updatePost(id: number) {
+    return mutationOptions({
+      mutationFn: (post: Post) => Promise.resolve(post),
+      mutationKey: ["updatePost", id],
+      onSuccess: (newPost) => {
+        //           ^? newPost: Post
+        this.queryClient.setQueryData(["posts", id], newPost)
+      },
+    });
+  }
+}
+
+class ComponentOrService {
+  queries = inject(QueriesService)
+  id = signal(0)
+  mutation = injectMutation(() => this.queries.updatePost(this.id()))
+
+  save() {
+    this.mutation.mutate({ title: 'New Title' })
+  }
+}
+```
+
+## Param
+
+The mutation options.
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
+```
+
+Defined in: [mutation-options.ts:39](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/mutation-options.ts#L39)
+
+Allows to share and re-use mutation options in a type-safe way.
+
+**Example**
+
+```ts
+export class QueriesService {
+  private http = inject(HttpClient)
+  private queryClient = inject(QueryClient)
+
+  updatePost(id: number) {
+    return mutationOptions({
+      mutationFn: (post: Post) => Promise.resolve(post),
+      mutationKey: ["updatePost", id],
+      onSuccess: (newPost) => {
+        //           ^? newPost: Post
+        this.queryClient.setQueryData(["posts", id], newPost)
+      },
+    });
+  }
+}
+
+class ComponentOrService {
+  queries = inject(QueriesService)
+  id = signal(0)
+  mutation = injectMutation(() => this.queries.updatePost(this.id()))
+
+  save() {
+    this.mutation.mutate({ title: 'New Title' })
+  }
+}
+```
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`WithRequired`\&lt;[`CreateMutationOptions`](/query/framework/angular/reference/interfaces/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+The mutation options.
+
+### Returns
+
+`WithRequired`\&lt;[`CreateMutationOptions`](/query/framework/angular/reference/interfaces/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+Mutation options.
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): Omit<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
+```
+
+Defined in: [mutation-options.ts:53](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/mutation-options.ts#L53)
+
+Allows to share and re-use mutation options in a type-safe way.
+
+**Example**
+
+```ts
+export class QueriesService {
+  private http = inject(HttpClient)
+  private queryClient = inject(QueryClient)
+
+  updatePost(id: number) {
+    return mutationOptions({
+      mutationFn: (post: Post) => Promise.resolve(post),
+      mutationKey: ["updatePost", id],
+      onSuccess: (newPost) => {
+        //           ^? newPost: Post
+        this.queryClient.setQueryData(["posts", id], newPost)
+      },
+    });
+  }
+}
+
+class ComponentOrService {
+  queries = inject(QueriesService)
+  id = signal(0)
+  mutation = injectMutation(() => this.queries.updatePost(this.id()))
+
+  save() {
+    this.mutation.mutate({ title: 'New Title' })
+  }
+}
+```
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CreateMutationOptions`](/query/framework/angular/reference/interfaces/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+The mutation options.
+
+### Returns
+
+`Omit`\&lt;[`CreateMutationOptions`](/query/framework/angular/reference/interfaces/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+Mutation options.
diff --git a/mintlify/query/framework/angular/reference/functions/provideAngularQuery.md b/mintlify/query/framework/angular/reference/functions/provideAngularQuery.md
new file mode 100644
index 000000000..9894b6a5a
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/provideAngularQuery.md
@@ -0,0 +1,38 @@
+---
+id: provideAngularQuery
+title: provideAngularQuery
+---
+
+# ~~Function: provideAngularQuery()~~
+
+```ts
+function provideAngularQuery(queryClient): Provider[];
+```
+
+Defined in: [providers.ts:124](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L124)
+
+Sets up providers necessary to enable TanStack Query functionality for Angular applications.
+
+Allows to configure a `QueryClient`.
+
+## Parameters
+
+### queryClient
+
+`QueryClient`
+
+A `QueryClient` instance.
+
+## Returns
+
+`Provider`[]
+
+A set of providers to set up TanStack Query.
+
+## See
+
+https://tanstack.com/query/v5/docs/framework/angular/quick-start
+
+## Deprecated
+
+Use `provideTanStackQuery` instead.
diff --git a/mintlify/query/framework/angular/reference/functions/provideIsRestoring.md b/mintlify/query/framework/angular/reference/functions/provideIsRestoring.md
new file mode 100644
index 000000000..fada7718b
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/provideIsRestoring.md
@@ -0,0 +1,28 @@
+---
+id: provideIsRestoring
+title: provideIsRestoring
+---
+
+# Function: provideIsRestoring()
+
+```ts
+function provideIsRestoring(isRestoring): Provider;
+```
+
+Defined in: [inject-is-restoring.ts:43](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-restoring.ts#L43)
+
+Used by TanStack Query Angular persist client plugin to provide the signal that tracks the restore state
+
+## Parameters
+
+### isRestoring
+
+`Signal`\&lt;`boolean`\>
+
+a readonly signal that returns a boolean
+
+## Returns
+
+`Provider`
+
+Provider for the `isRestoring` signal
diff --git a/mintlify/query/framework/angular/reference/functions/provideQueryClient.md b/mintlify/query/framework/angular/reference/functions/provideQueryClient.md
new file mode 100644
index 000000000..f770808ee
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/provideQueryClient.md
@@ -0,0 +1,32 @@
+---
+id: provideQueryClient
+title: provideQueryClient
+---
+
+# Function: provideQueryClient()
+
+```ts
+function provideQueryClient(queryClient): Provider;
+```
+
+Defined in: [providers.ts:14](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L14)
+
+Usually [provideTanStackQuery](/query/framework/angular/reference/functions/provideTanStackQuery) is used once to set up TanStack Query and the
+[/query/reference/QueryClient\|QueryClient](/query/reference/QueryClient|QueryClient)
+for the entire application. Internally it calls `provideQueryClient`.
+You can use `provideQueryClient` to provide a different `QueryClient` instance for a part
+of the application or for unit testing purposes.
+
+## Parameters
+
+### queryClient
+
+A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
+
+`QueryClient` | `InjectionToken`\&lt;`QueryClient`\>
+
+## Returns
+
+`Provider`
+
+a provider object that can be used to provide the `QueryClient` instance.
diff --git a/mintlify/query/framework/angular/reference/functions/provideTanStackQuery.md b/mintlify/query/framework/angular/reference/functions/provideTanStackQuery.md
new file mode 100644
index 000000000..f4852b117
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/provideTanStackQuery.md
@@ -0,0 +1,104 @@
+---
+id: provideTanStackQuery
+title: provideTanStackQuery
+---
+
+# Function: provideTanStackQuery()
+
+```ts
+function provideTanStackQuery(queryClient, ...features): Provider[];
+```
+
+Defined in: [providers.ts:105](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L105)
+
+Sets up providers necessary to enable TanStack Query functionality for Angular applications.
+
+Allows to configure a `QueryClient` and optional features such as developer tools.
+
+**Example - standalone**
+
+```ts
+import {
+  provideTanStackQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+bootstrapApplication(AppComponent, {
+  providers: [provideTanStackQuery(new QueryClient())],
+})
+```
+
+**Example - NgModule-based**
+
+```ts
+import {
+  provideTanStackQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [provideTanStackQuery(new QueryClient())],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+You can also enable optional developer tools by adding `withDevtools`. By
+default the tools will then be loaded when your app is in development mode.
+```ts
+import {
+  provideTanStackQuery,
+  withDevtools
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
+
+bootstrapApplication(AppComponent,
+  {
+    providers: [
+      provideTanStackQuery(new QueryClient(), withDevtools())
+    ]
+  }
+)
+```
+
+**Example: using an InjectionToken**
+
+```ts
+export const MY_QUERY_CLIENT = new InjectionToken('', {
+  factory: () => new QueryClient(),
+})
+
+// In a lazy loaded route or lazy loaded component's providers array:
+providers: [provideTanStackQuery(MY_QUERY_CLIENT)]
+```
+Using an InjectionToken for the QueryClient is an advanced optimization which allows TanStack Query to be absent from the main application bundle.
+This can be beneficial if you want to include TanStack Query on lazy loaded routes only while still sharing a `QueryClient`.
+
+Note that this is a small optimization and for most applications it's preferable to provide the `QueryClient` in the main application config.
+
+## Parameters
+
+### queryClient
+
+A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
+
+`QueryClient` | `InjectionToken`\&lt;`QueryClient`\>
+
+### features
+
+...[`QueryFeatures`](/query/framework/angular/reference/type-aliases/QueryFeatures)[]
+
+Optional features to configure additional Query functionality.
+
+## Returns
+
+`Provider`[]
+
+A set of providers to set up TanStack Query.
+
+## See
+
+ - https://tanstack.com/query/v5/docs/framework/angular/quick-start
+ - withDevtools
diff --git a/mintlify/query/framework/angular/reference/functions/queryFeature.md b/mintlify/query/framework/angular/reference/functions/queryFeature.md
new file mode 100644
index 000000000..5bff5b5e3
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/queryFeature.md
@@ -0,0 +1,36 @@
+---
+id: queryFeature
+title: queryFeature
+---
+
+# Function: queryFeature()
+
+```ts
+function queryFeature<TFeatureKind>(kind, providers): QueryFeature<TFeatureKind>;
+```
+
+Defined in: [providers.ts:146](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L146)
+
+Helper function to create an object that represents a Query feature.
+
+## Type Parameters
+
+### TFeatureKind
+
+`TFeatureKind` *extends* `"Devtools"` \| `"PersistQueryClient"`
+
+## Parameters
+
+### kind
+
+`TFeatureKind`
+
+### providers
+
+`Provider`[]
+
+## Returns
+
+[`QueryFeature`](/query/framework/angular/reference/interfaces/QueryFeature)\&lt;`TFeatureKind`\>
+
+A Query feature.
diff --git a/mintlify/query/framework/angular/reference/functions/queryOptions.md b/mintlify/query/framework/angular/reference/functions/queryOptions.md
new file mode 100644
index 000000000..ee1fa4e53
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/functions/queryOptions.md
@@ -0,0 +1,202 @@
+---
+id: queryOptions
+title: queryOptions
+---
+
+# Function: queryOptions()
+
+Allows to share and re-use query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+**Example**
+
+```ts
+ const { queryKey } = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    //  ^?  Promise<number>
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(queryKey)
+  //    ^?  number | undefined
+```
+
+## Param
+
+The query options to tag with the type from `queryFn`.
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & object;
+```
+
+Defined in: [query-options.ts:76](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L76)
+
+Allows to share and re-use query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+**Example**
+
+```ts
+ const { queryKey } = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    //  ^?  Promise<number>
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(queryKey)
+  //    ^?  number | undefined
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataOptions`](/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+The query options to tag with the type from `queryFn`.
+
+### Returns
+
+`Omit`\&lt;[`CreateQueryOptions`](/query/framework/angular/reference/interfaces/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object`
+
+The tagged query options.
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): OmitKeyof<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & object;
+```
+
+Defined in: [query-options.ts:108](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L108)
+
+Allows to share and re-use query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+**Example**
+
+```ts
+ const { queryKey } = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    //  ^?  Promise<number>
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(queryKey)
+  //    ^?  number | undefined
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UnusedSkipTokenOptions`](/query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+The query options to tag with the type from `queryFn`.
+
+### Returns
+
+`OmitKeyof`\&lt;[`CreateQueryOptions`](/query/framework/angular/reference/interfaces/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object`
+
+The tagged query options.
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & object;
+```
+
+Defined in: [query-options.ts:140](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L140)
+
+Allows to share and re-use query options in a type-safe way.
+
+The `queryKey` will be tagged with the type from `queryFn`.
+
+**Example**
+
+```ts
+ const { queryKey } = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    //  ^?  Promise<number>
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(queryKey)
+  //    ^?  number | undefined
+```
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataOptions`](/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+The query options to tag with the type from `queryFn`.
+
+### Returns
+
+[`CreateQueryOptions`](/query/framework/angular/reference/interfaces/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object`
+
+The tagged query options.
diff --git a/mintlify/query/framework/angular/reference/index.md b/mintlify/query/framework/angular/reference/index.md
new file mode 100644
index 000000000..d3766448a
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/index.md
@@ -0,0 +1,64 @@
+---
+id: "@tanstack/angular-query-experimental"
+title: "@tanstack/angular-query-experimental"
+---
+
+# @tanstack/angular-query-experimental
+
+## Interfaces
+
+- [BaseMutationNarrowing](/query/framework/angular/reference/interfaces/BaseMutationNarrowing)
+- [BaseQueryNarrowing](/query/framework/angular/reference/interfaces/BaseQueryNarrowing)
+- [CreateBaseQueryOptions](/query/framework/angular/reference/interfaces/CreateBaseQueryOptions)
+- [CreateInfiniteQueryOptions](/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions)
+- [CreateMutationOptions](/query/framework/angular/reference/interfaces/CreateMutationOptions)
+- [CreateQueryOptions](/query/framework/angular/reference/interfaces/CreateQueryOptions)
+- [InjectInfiniteQueryOptions](/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions)
+- [InjectIsFetchingOptions](/query/framework/angular/reference/interfaces/InjectIsFetchingOptions)
+- [InjectIsMutatingOptions](/query/framework/angular/reference/interfaces/InjectIsMutatingOptions)
+- [InjectMutationOptions](/query/framework/angular/reference/interfaces/InjectMutationOptions)
+- [InjectMutationStateOptions](/query/framework/angular/reference/interfaces/InjectMutationStateOptions)
+- [InjectQueryOptions](/query/framework/angular/reference/interfaces/InjectQueryOptions)
+- [QueryFeature](/query/framework/angular/reference/interfaces/QueryFeature)
+
+## Type Aliases
+
+- [CreateBaseMutationResult](/query/framework/angular/reference/type-aliases/CreateBaseMutationResult)
+- [CreateBaseQueryResult](/query/framework/angular/reference/type-aliases/CreateBaseQueryResult)
+- [CreateInfiniteQueryResult](/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult)
+- [CreateMutateAsyncFunction](/query/framework/angular/reference/type-aliases/CreateMutateAsyncFunction)
+- [CreateMutateFunction](/query/framework/angular/reference/type-aliases/CreateMutateFunction)
+- [CreateMutationResult](/query/framework/angular/reference/type-aliases/CreateMutationResult)
+- [CreateQueryResult](/query/framework/angular/reference/type-aliases/CreateQueryResult)
+- [DefinedCreateInfiniteQueryResult](/query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult)
+- [DefinedCreateQueryResult](/query/framework/angular/reference/type-aliases/DefinedCreateQueryResult)
+- [DefinedInitialDataInfiniteOptions](/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions)
+- [DefinedInitialDataOptions](/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions)
+- [DevtoolsFeature](/query/framework/angular/reference/type-aliases/DevtoolsFeature)
+- [PersistQueryClientFeature](/query/framework/angular/reference/type-aliases/PersistQueryClientFeature)
+- [QueriesOptions](/query/framework/angular/reference/type-aliases/QueriesOptions)
+- [QueriesResults](/query/framework/angular/reference/type-aliases/QueriesResults)
+- [QueryFeatures](/query/framework/angular/reference/type-aliases/QueryFeatures)
+- [UndefinedInitialDataInfiniteOptions](/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions)
+- [UndefinedInitialDataOptions](/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions)
+- [UnusedSkipTokenInfiniteOptions](/query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions)
+- [UnusedSkipTokenOptions](/query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions)
+
+## Functions
+
+- [infiniteQueryOptions](/query/framework/angular/reference/functions/infiniteQueryOptions)
+- [injectInfiniteQuery](/query/framework/angular/reference/functions/injectInfiniteQuery)
+- [injectIsFetching](/query/framework/angular/reference/functions/injectIsFetching)
+- [injectIsMutating](/query/framework/angular/reference/functions/injectIsMutating)
+- [injectIsRestoring](/query/framework/angular/reference/functions/injectIsRestoring)
+- [injectMutation](/query/framework/angular/reference/functions/injectMutation)
+- [injectMutationState](/query/framework/angular/reference/functions/injectMutationState)
+- [injectQuery](/query/framework/angular/reference/functions/injectQuery)
+- [~~injectQueryClient~~](/query/framework/angular/reference/functions/injectQueryClient)
+- [mutationOptions](/query/framework/angular/reference/functions/mutationOptions)
+- [~~provideAngularQuery~~](/query/framework/angular/reference/functions/provideAngularQuery)
+- [provideIsRestoring](/query/framework/angular/reference/functions/provideIsRestoring)
+- [provideQueryClient](/query/framework/angular/reference/functions/provideQueryClient)
+- [provideTanStackQuery](/query/framework/angular/reference/functions/provideTanStackQuery)
+- [queryFeature](/query/framework/angular/reference/functions/queryFeature)
+- [queryOptions](/query/framework/angular/reference/functions/queryOptions)
diff --git a/mintlify/query/framework/angular/reference/interfaces/BaseMutationNarrowing.md b/mintlify/query/framework/angular/reference/interfaces/BaseMutationNarrowing.md
new file mode 100644
index 000000000..b68699ada
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/BaseMutationNarrowing.md
@@ -0,0 +1,66 @@
+---
+id: BaseMutationNarrowing
+title: BaseMutationNarrowing
+---
+
+# Interface: BaseMutationNarrowing\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+Defined in: [types.ts:190](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L190)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Properties
+
+### isError
+
+```ts
+isError: SignalFunction<(this) => this is CreateMutationResult<TData, TError, TVariables, TOnMutateResult, Override<MutationObserverErrorResult<TData, TError, TVariables, TOnMutateResult>, { mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> }> & { mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> }>>;
+```
+
+Defined in: [types.ts:213](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L213)
+
+***
+
+### isIdle
+
+```ts
+isIdle: SignalFunction<(this) => this is CreateMutationResult<TData, TError, TVariables, TOnMutateResult, Override<MutationObserverIdleResult<TData, TError, TVariables, TOnMutateResult>, { mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> }> & { mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> }>>;
+```
+
+Defined in: [types.ts:247](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L247)
+
+***
+
+### isPending
+
+```ts
+isPending: SignalFunction<(this) => this is CreateMutationResult<TData, TError, TVariables, TOnMutateResult, Override<MutationObserverLoadingResult<TData, TError, TVariables, TOnMutateResult>, { mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> }> & { mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> }>>;
+```
+
+Defined in: [types.ts:230](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L230)
+
+***
+
+### isSuccess
+
+```ts
+isSuccess: SignalFunction<(this) => this is CreateMutationResult<TData, TError, TVariables, TOnMutateResult, Override<MutationObserverSuccessResult<TData, TError, TVariables, TOnMutateResult>, { mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> }> & { mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> }>>;
+```
+
+Defined in: [types.ts:196](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L196)
diff --git a/mintlify/query/framework/angular/reference/interfaces/BaseQueryNarrowing.md b/mintlify/query/framework/angular/reference/interfaces/BaseQueryNarrowing.md
new file mode 100644
index 000000000..819f9047e
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/BaseQueryNarrowing.md
@@ -0,0 +1,78 @@
+---
+id: BaseQueryNarrowing
+title: BaseQueryNarrowing
+---
+
+# Interface: BaseQueryNarrowing\&lt;TData, TError\>
+
+Defined in: [types.ts:57](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L57)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+## Properties
+
+### isError()
+
+```ts
+isError: (this) => this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"error", TData, TError>>;
+```
+
+Defined in: [types.ts:65](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L65)
+
+#### Parameters
+
+##### this
+
+[`CreateBaseQueryResult`](/query/framework/angular/reference/type-aliases/CreateBaseQueryResult)\&lt;`TData`, `TError`\>
+
+#### Returns
+
+`this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"error", TData, TError>>`
+
+***
+
+### isPending()
+
+```ts
+isPending: (this) => this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"pending", TData, TError>>;
+```
+
+Defined in: [types.ts:72](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L72)
+
+#### Parameters
+
+##### this
+
+[`CreateBaseQueryResult`](/query/framework/angular/reference/type-aliases/CreateBaseQueryResult)\&lt;`TData`, `TError`\>
+
+#### Returns
+
+`this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"pending", TData, TError>>`
+
+***
+
+### isSuccess()
+
+```ts
+isSuccess: (this) => this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"success", TData, TError>>;
+```
+
+Defined in: [types.ts:58](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L58)
+
+#### Parameters
+
+##### this
+
+[`CreateBaseQueryResult`](/query/framework/angular/reference/type-aliases/CreateBaseQueryResult)\&lt;`TData`, `TError`\>
+
+#### Returns
+
+`this is CreateBaseQueryResult<TData, TError, CreateStatusBasedQueryResult<"success", TData, TError>>`
diff --git a/mintlify/query/framework/angular/reference/interfaces/CreateBaseQueryOptions.md b/mintlify/query/framework/angular/reference/interfaces/CreateBaseQueryOptions.md
new file mode 100644
index 000000000..6c2e2fa68
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/CreateBaseQueryOptions.md
@@ -0,0 +1,34 @@
+---
+id: CreateBaseQueryOptions
+title: CreateBaseQueryOptions
+---
+
+# Interface: CreateBaseQueryOptions\&lt;TQueryFnData, TError, TData, TQueryData, TQueryKey\>
+
+Defined in: [types.ts:21](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L21)
+
+## Extends
+
+- `QueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md b/mintlify/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md
new file mode 100644
index 000000000..2a3a6708c
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md
@@ -0,0 +1,34 @@
+---
+id: CreateInfiniteQueryOptions
+title: CreateInfiniteQueryOptions
+---
+
+# Interface: CreateInfiniteQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+Defined in: [types.ts:81](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L81)
+
+## Extends
+
+- `OmitKeyof`\&lt;`InfiniteQueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"suspense"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/interfaces/CreateMutationOptions.md b/mintlify/query/framework/angular/reference/interfaces/CreateMutationOptions.md
new file mode 100644
index 000000000..3b183edcc
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/CreateMutationOptions.md
@@ -0,0 +1,30 @@
+---
+id: CreateMutationOptions
+title: CreateMutationOptions
+---
+
+# Interface: CreateMutationOptions\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+Defined in: [types.ts:132](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L132)
+
+## Extends
+
+- `OmitKeyof`\&lt;`MutationObserverOptions`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"_defaulted"`\>
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/interfaces/CreateQueryOptions.md b/mintlify/query/framework/angular/reference/interfaces/CreateQueryOptions.md
new file mode 100644
index 000000000..a33426f5d
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/CreateQueryOptions.md
@@ -0,0 +1,30 @@
+---
+id: CreateQueryOptions
+title: CreateQueryOptions
+---
+
+# Interface: CreateQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+Defined in: [types.ts:35](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L35)
+
+## Extends
+
+- `OmitKeyof`\&lt;[`CreateBaseQueryOptions`](/query/framework/angular/reference/interfaces/CreateBaseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md
new file mode 100644
index 000000000..3b552aa38
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectInfiniteQueryOptions
+title: InjectInfiniteQueryOptions
+---
+
+# Interface: InjectInfiniteQueryOptions
+
+Defined in: [inject-infinite-query.ts:25](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L25)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-infinite-query.ts:31](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L31)
+
+The `Injector` in which to create the infinite query.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectIsFetchingOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectIsFetchingOptions.md
new file mode 100644
index 000000000..b420ac13b
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectIsFetchingOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectIsFetchingOptions
+title: InjectIsFetchingOptions
+---
+
+# Interface: InjectIsFetchingOptions
+
+Defined in: [inject-is-fetching.ts:13](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-fetching.ts#L13)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-is-fetching.ts:19](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-fetching.ts#L19)
+
+The `Injector` in which to create the isFetching signal.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectIsMutatingOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectIsMutatingOptions.md
new file mode 100644
index 000000000..2edacd51c
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectIsMutatingOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectIsMutatingOptions
+title: InjectIsMutatingOptions
+---
+
+# Interface: InjectIsMutatingOptions
+
+Defined in: [inject-is-mutating.ts:13](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-mutating.ts#L13)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-is-mutating.ts:19](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-mutating.ts#L19)
+
+The `Injector` in which to create the isMutating signal.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectMutationOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectMutationOptions.md
new file mode 100644
index 000000000..0638baa37
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectMutationOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectMutationOptions
+title: InjectMutationOptions
+---
+
+# Interface: InjectMutationOptions
+
+Defined in: [inject-mutation.ts:28](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L28)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-mutation.ts:34](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L34)
+
+The `Injector` in which to create the mutation.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectMutationStateOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectMutationStateOptions.md
new file mode 100644
index 000000000..76d93555f
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectMutationStateOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectMutationStateOptions
+title: InjectMutationStateOptions
+---
+
+# Interface: InjectMutationStateOptions
+
+Defined in: [inject-mutation-state.ts:45](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation-state.ts#L45)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-mutation-state.ts:51](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation-state.ts#L51)
+
+The `Injector` in which to create the mutation state signal.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/InjectQueryOptions.md b/mintlify/query/framework/angular/reference/interfaces/InjectQueryOptions.md
new file mode 100644
index 000000000..eecbef280
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/InjectQueryOptions.md
@@ -0,0 +1,22 @@
+---
+id: InjectQueryOptions
+title: InjectQueryOptions
+---
+
+# Interface: InjectQueryOptions
+
+Defined in: [inject-query.ts:20](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L20)
+
+## Properties
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [inject-query.ts:26](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L26)
+
+The `Injector` in which to create the query.
+
+If this is not provided, the current injection context will be used instead (via `inject`).
diff --git a/mintlify/query/framework/angular/reference/interfaces/QueryFeature.md b/mintlify/query/framework/angular/reference/interfaces/QueryFeature.md
new file mode 100644
index 000000000..97a947962
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/interfaces/QueryFeature.md
@@ -0,0 +1,36 @@
+---
+id: QueryFeature
+title: QueryFeature
+---
+
+# Interface: QueryFeature\&lt;TFeatureKind\>
+
+Defined in: [providers.ts:135](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L135)
+
+Helper type to represent a Query feature.
+
+## Type Parameters
+
+### TFeatureKind
+
+`TFeatureKind` *extends* `QueryFeatureKind`
+
+## Properties
+
+### ɵkind
+
+```ts
+ɵkind: TFeatureKind;
+```
+
+Defined in: [providers.ts:136](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L136)
+
+***
+
+### ɵproviders
+
+```ts
+ɵproviders: Provider[];
+```
+
+Defined in: [providers.ts:137](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L137)
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateBaseMutationResult.md b/mintlify/query/framework/angular/reference/type-aliases/CreateBaseMutationResult.md
new file mode 100644
index 000000000..a0facfa90
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateBaseMutationResult.md
@@ -0,0 +1,40 @@
+---
+id: CreateBaseMutationResult
+title: CreateBaseMutationResult
+---
+
+# Type Alias: CreateBaseMutationResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateBaseMutationResult<TData, TError, TVariables, TOnMutateResult> = Override<MutationObserverResult<TData, TError, TVariables, TOnMutateResult>, {
+  mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult>;
+}> & object;
+```
+
+Defined in: [types.ts:160](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L160)
+
+## Type Declaration
+
+### mutateAsync
+
+```ts
+mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateBaseQueryResult.md b/mintlify/query/framework/angular/reference/type-aliases/CreateBaseQueryResult.md
new file mode 100644
index 000000000..72c3fa5d3
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateBaseQueryResult.md
@@ -0,0 +1,26 @@
+---
+id: CreateBaseQueryResult
+title: CreateBaseQueryResult
+---
+
+# Type Alias: CreateBaseQueryResult\&lt;TData, TError, TState\>
+
+```ts
+type CreateBaseQueryResult<TData, TError, TState> = BaseQueryNarrowing<TData, TError> & MapToSignals<OmitKeyof<TState, keyof BaseQueryNarrowing, "safely">>;
+```
+
+Defined in: [types.ts:98](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L98)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TState
+
+`TState` = `QueryObserverResult`\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md b/mintlify/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md
new file mode 100644
index 000000000..9d5947678
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: CreateInfiniteQueryResult
+title: CreateInfiniteQueryResult
+---
+
+# Type Alias: CreateInfiniteQueryResult\&lt;TData, TError\>
+
+```ts
+type CreateInfiniteQueryResult<TData, TError> = BaseQueryNarrowing<TData, TError> & MapToSignals<InfiniteQueryObserverResult<TData, TError>>;
+```
+
+Defined in: [types.ts:117](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L117)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md b/mintlify/query/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md
new file mode 100644
index 000000000..83029b7f6
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md
@@ -0,0 +1,30 @@
+---
+id: CreateMutateAsyncFunction
+title: CreateMutateAsyncFunction
+---
+
+# Type Alias: CreateMutateAsyncFunction\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> = MutateFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [types.ts:153](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L153)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateMutateFunction.md b/mintlify/query/framework/angular/reference/type-aliases/CreateMutateFunction.md
new file mode 100644
index 000000000..3437c952e
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateMutateFunction.md
@@ -0,0 +1,40 @@
+---
+id: CreateMutateFunction
+title: CreateMutateFunction
+---
+
+# Type Alias: CreateMutateFunction()\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> = (...args) => void;
+```
+
+Defined in: [types.ts:142](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L142)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### args
+
+...`Parameters`\&lt;`MutateFunction`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>\>
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateMutationResult.md b/mintlify/query/framework/angular/reference/type-aliases/CreateMutationResult.md
new file mode 100644
index 000000000..73b6a7a68
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateMutationResult.md
@@ -0,0 +1,34 @@
+---
+id: CreateMutationResult
+title: CreateMutationResult
+---
+
+# Type Alias: CreateMutationResult\&lt;TData, TError, TVariables, TOnMutateResult, TState\>
+
+```ts
+type CreateMutationResult<TData, TError, TVariables, TOnMutateResult, TState> = BaseMutationNarrowing<TData, TError, TVariables, TOnMutateResult> & MapToSignals<OmitKeyof<TState, keyof BaseMutationNarrowing, "safely">>;
+```
+
+Defined in: [types.ts:266](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L266)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### TState
+
+`TState` = `CreateStatusBasedMutationResult`\&lt;[`CreateBaseMutationResult`](/query/framework/angular/reference/type-aliases/CreateBaseMutationResult)\[`"status"`\], `TData`, `TError`, `TVariables`, `TOnMutateResult`\>
diff --git a/mintlify/query/framework/angular/reference/type-aliases/CreateQueryResult.md b/mintlify/query/framework/angular/reference/type-aliases/CreateQueryResult.md
new file mode 100644
index 000000000..278b070c2
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/CreateQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: CreateQueryResult
+title: CreateQueryResult
+---
+
+# Type Alias: CreateQueryResult\&lt;TData, TError\>
+
+```ts
+type CreateQueryResult<TData, TError> = CreateBaseQueryResult<TData, TError>;
+```
+
+Defined in: [types.ts:105](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L105)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md b/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md
new file mode 100644
index 000000000..d504bfa13
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md
@@ -0,0 +1,26 @@
+---
+id: DefinedCreateInfiniteQueryResult
+title: DefinedCreateInfiniteQueryResult
+---
+
+# Type Alias: DefinedCreateInfiniteQueryResult\&lt;TData, TError, TDefinedInfiniteQueryObserver\>
+
+```ts
+type DefinedCreateInfiniteQueryResult<TData, TError, TDefinedInfiniteQueryObserver> = MapToSignals<TDefinedInfiniteQueryObserver>;
+```
+
+Defined in: [types.ts:123](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L123)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TDefinedInfiniteQueryObserver
+
+`TDefinedInfiniteQueryObserver` = `DefinedInfiniteQueryObserverResult`\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md b/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md
new file mode 100644
index 000000000..e3b727d2d
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md
@@ -0,0 +1,26 @@
+---
+id: DefinedCreateQueryResult
+title: DefinedCreateQueryResult
+---
+
+# Type Alias: DefinedCreateQueryResult\&lt;TData, TError, TState\>
+
+```ts
+type DefinedCreateQueryResult<TData, TError, TState> = BaseQueryNarrowing<TData, TError> & MapToSignals<OmitKeyof<TState, keyof BaseQueryNarrowing, "safely">>;
+```
+
+Defined in: [types.ts:110](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L110)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TState
+
+`TState` = `DefinedQueryObserverResult`\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md b/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md
new file mode 100644
index 000000000..9686a46e3
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md
@@ -0,0 +1,45 @@
+---
+id: DefinedInitialDataInfiniteOptions
+title: DefinedInitialDataInfiniteOptions
+---
+
+# Type Alias: DefinedInitialDataInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object;
+```
+
+Defined in: [infinite-query-options.ts:62](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L62)
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData: 
+  | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+  | () => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+  | undefined;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md b/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md
new file mode 100644
index 000000000..7bd64cb3b
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md
@@ -0,0 +1,46 @@
+---
+id: DefinedInitialDataOptions
+title: DefinedInitialDataOptions
+---
+
+# Type Alias: DefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [query-options.ts:40](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L40)
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData: 
+  | NonUndefinedGuard<TQueryFnData>
+| () => NonUndefinedGuard<TQueryFnData>;
+```
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/DevtoolsFeature.md b/mintlify/query/framework/angular/reference/type-aliases/DevtoolsFeature.md
new file mode 100644
index 000000000..a085d243f
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/DevtoolsFeature.md
@@ -0,0 +1,19 @@
+---
+id: DevtoolsFeature
+title: DevtoolsFeature
+---
+
+# Type Alias: DevtoolsFeature
+
+```ts
+type DevtoolsFeature = QueryFeature<"Devtools">;
+```
+
+Defined in: [providers.ts:158](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L158)
+
+A type alias that represents a feature which enables developer tools.
+The type is used to describe the return value of the `withDevtools` function.
+
+## See
+
+withDevtools
diff --git a/mintlify/query/framework/angular/reference/type-aliases/PersistQueryClientFeature.md b/mintlify/query/framework/angular/reference/type-aliases/PersistQueryClientFeature.md
new file mode 100644
index 000000000..07fa8cfd3
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/PersistQueryClientFeature.md
@@ -0,0 +1,15 @@
+---
+id: PersistQueryClientFeature
+title: PersistQueryClientFeature
+---
+
+# Type Alias: PersistQueryClientFeature
+
+```ts
+type PersistQueryClientFeature = QueryFeature<"PersistQueryClient">;
+```
+
+Defined in: [providers.ts:164](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L164)
+
+A type alias that represents a feature which enables persistence.
+The type is used to describe the return value of the `withPersistQueryClient` function.
diff --git a/mintlify/query/framework/angular/reference/type-aliases/QueriesOptions.md b/mintlify/query/framework/angular/reference/type-aliases/QueriesOptions.md
new file mode 100644
index 000000000..c36a7901c
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/QueriesOptions.md
@@ -0,0 +1,28 @@
+---
+id: QueriesOptions
+title: QueriesOptions
+---
+
+# Type Alias: QueriesOptions\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesOptions<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverOptionsForCreateQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryOptionsForCreateQueries<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesOptions<[...Tails], [...TResults, GetCreateQueryOptionsForCreateQueries<Head>], [...TDepth, 1]> : ReadonlyArray<unknown> extends T ? T : T extends QueryObserverOptionsForCreateQueries<infer TQueryFnData, infer TError, infer TData, infer TQueryKey>[] ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>[] : QueryObserverOptionsForCreateQueries[];
+```
+
+Defined in: [inject-queries.ts:144](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-queries.ts#L144)
+
+QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/angular/reference/type-aliases/QueriesResults.md b/mintlify/query/framework/angular/reference/type-aliases/QueriesResults.md
new file mode 100644
index 000000000..9e8eed855
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/QueriesResults.md
@@ -0,0 +1,28 @@
+---
+id: QueriesResults
+title: QueriesResults
+---
+
+# Type Alias: QueriesResults\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesResults<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? CreateQueryResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryResult<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesResults<[...Tails], [...TResults, GetCreateQueryResult<Head>], [...TDepth, 1]> : { [K in keyof T]: GetCreateQueryResult<T[K]> };
+```
+
+Defined in: [inject-queries.ts:186](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-queries.ts#L186)
+
+QueriesResults reducer recursively maps type param to results
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/angular/reference/type-aliases/QueryFeatures.md b/mintlify/query/framework/angular/reference/type-aliases/QueryFeatures.md
new file mode 100644
index 000000000..9de88c1ea
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/QueryFeatures.md
@@ -0,0 +1,23 @@
+---
+id: QueryFeatures
+title: QueryFeatures
+---
+
+# Type Alias: QueryFeatures
+
+```ts
+type QueryFeatures = 
+  | DevtoolsFeature
+  | PersistQueryClientFeature;
+```
+
+Defined in: [providers.ts:173](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L173)
+
+A type alias that represents all Query features available for use with `provideTanStackQuery`.
+Features can be enabled by adding special functions to the `provideTanStackQuery` call.
+See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery`
+documentation on how to use those functions.
+
+## See
+
+[provideTanStackQuery](/query/framework/angular/reference/functions/provideTanStackQuery)
diff --git a/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md b/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md
new file mode 100644
index 000000000..d5208569e
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md
@@ -0,0 +1,44 @@
+---
+id: UndefinedInitialDataInfiniteOptions
+title: UndefinedInitialDataInfiniteOptions
+---
+
+# Type Alias: UndefinedInitialDataInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object;
+```
+
+Defined in: [infinite-query-options.ts:13](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L13)
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData: 
+  | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+| InitialDataFunction<NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md b/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md
new file mode 100644
index 000000000..1bad5a8fd
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md
@@ -0,0 +1,40 @@
+---
+id: UndefinedInitialDataOptions
+title: UndefinedInitialDataOptions
+---
+
+# Type Alias: UndefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object;
+```
+
+Defined in: [query-options.ts:13](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L13)
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData: 
+  | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>
+| NonUndefinedGuard<TQueryFnData>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md b/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md
new file mode 100644
index 000000000..90948b6d0
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md
@@ -0,0 +1,42 @@
+---
+id: UnusedSkipTokenInfiniteOptions
+title: UnusedSkipTokenInfiniteOptions
+---
+
+# Type Alias: UnusedSkipTokenInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = OmitKeyof<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object;
+```
+
+Defined in: [infinite-query-options.ts:34](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L34)
+
+## Type Declaration
+
+### queryFn?
+
+```ts
+optional queryFn: Exclude<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>["queryFn"], SkipToken | undefined>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md b/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md
new file mode 100644
index 000000000..fadd91c10
--- /dev/null
+++ b/mintlify/query/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md
@@ -0,0 +1,38 @@
+---
+id: UnusedSkipTokenOptions
+title: UnusedSkipTokenOptions
+---
+
+# Type Alias: UnusedSkipTokenOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> = OmitKeyof<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [query-options.ts:25](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L25)
+
+## Type Declaration
+
+### queryFn?
+
+```ts
+optional queryFn: Exclude<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>["queryFn"], SkipToken | undefined>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/angular/typescript.md b/mintlify/query/framework/angular/typescript.md
new file mode 100644
index 000000000..de3fd4975
--- /dev/null
+++ b/mintlify/query/framework/angular/typescript.md
@@ -0,0 +1,259 @@
+---
+id: typescript
+title: TypeScript
+ref: docs/framework/react/typescript.md
+replace:
+  {
+    'useQuery': 'injectQuery',
+    'useMutation': 'injectMutation',
+    'react-query': 'angular-query-experimental',
+    'public API of React Query': 'public API of TanStack Query and - after the experimental phase, the angular-query package',
+    'still follows': 'still follow',
+    'React Query': 'TanStack Query',
+    '`success`': '`isSuccess()`',
+    'function:': 'function.',
+  }
+---
+
+[//]: # 'TypeInference1'
+
+```angular-ts
+@Component({
+  // ...
+  template: `@let data = query.data();`,
+  //               ^? data: number | undefined
+})
+class MyComponent {
+  query = injectQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => Promise.resolve(5),
+  }))
+}
+```
+
+[//]: # 'TypeInference1'
+[//]: # 'TypeInference2'
+
+```angular-ts
+@Component({
+  // ...
+  template: `@let data = query.data();`,
+  //               ^? data: string | undefined
+})
+class MyComponent {
+  query = injectQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => Promise.resolve(5),
+    select: (data) => data.toString(),
+  }))
+}
+```
+
+[//]: # 'TypeInference2'
+[//]: # 'TypeInference3'
+
+In this example we pass Group[] to the type parameter of HttpClient's `get` method.
+
+```angular-ts
+@Component({
+  template: `@let data = query.data();`,
+  //               ^? data: Group[] | undefined
+})
+class MyComponent {
+  http = inject(HttpClient)
+
+  query = injectQuery(() => ({
+    queryKey: ['groups'],
+    queryFn: () => lastValueFrom(this.http.get<Group[]>('/groups')),
+  }))
+}
+```
+
+[//]: # 'TypeInference3'
+[//]: # 'TypeNarrowing'
+
+```angular-ts
+@Component({
+  // ...
+  template: `
+    @if (query.isSuccess()) {
+      @let data = query.data();
+      // ^? data: number
+    }
+  `,
+})
+class MyComponent {
+  query = injectQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => Promise.resolve(5),
+  }))
+}
+```
+
+> TypeScript currently does not support discriminated unions on object methods. Narrowing on signal fields on objects such as query results only works on signals returning a boolean. Prefer using `isSuccess()` and similar boolean status signals over `status() === 'success'`.
+
+[//]: # 'TypeNarrowing'
+[//]: # 'TypingError'
+
+```angular-ts
+@Component({
+  // ...
+  template: `@let error = query.error();`,
+  //                ^? error: Error | null
+})
+class MyComponent {
+  query = injectQuery(() => ({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+  }))
+}
+```
+
+[//]: # 'TypingError'
+[//]: # 'TypingError2'
+
+```angular-ts
+@Component({
+  // ...
+  template: `@let error = query.error();`,
+  //                ^? error: string | null
+})
+class MyComponent {
+  query = injectQuery<Group[], string>(() => ({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+  }))
+}
+```
+
+[//]: # 'TypingError2'
+[//]: # 'TypingError3'
+
+```ts
+import axios from 'axios'
+
+query = injectQuery(() => ({ queryKey: ['groups'], queryFn: fetchGroups }))
+
+computed(() => {
+  const error = query.error()
+  //     ^? error: Error | null
+
+  if (axios.isAxiosError(error)) {
+    error
+    // ^? const error: AxiosError
+  }
+})
+```
+
+[//]: # 'TypingError3'
+[//]: # 'RegisterErrorType'
+
+```ts
+import '@tanstack/angular-query-experimental'
+
+declare module '@tanstack/angular-query-experimental' {
+  interface Register {
+    // Use unknown so call sites must narrow explicitly.
+    defaultError: unknown
+  }
+}
+
+const query = injectQuery(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+computed(() => {
+  const error = query.error()
+  //      ^? error: unknown | null
+})
+```
+
+[//]: # 'RegisterErrorType'
+[//]: # 'TypingQueryOptions'
+
+## Typing Query Options
+
+If you inline query options into `injectQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `injectQuery` and e.g. `prefetchQuery` or manage them in a service. In that case, you'd lose type inference. To get it back, you can use the `queryOptions` helper:
+
+```ts
+@Injectable({
+  providedIn: 'root',
+})
+export class QueriesService {
+  private http = inject(HttpClient)
+
+  post(postId: number) {
+    return queryOptions({
+      queryKey: ['post', postId],
+      queryFn: () => {
+        return lastValueFrom(
+          this.http.get<Post>(
+            `https://jsonplaceholder.typicode.com/posts/${postId}`,
+          ),
+        )
+      },
+    })
+  }
+}
+
+@Component({
+  // ...
+})
+export class Component {
+  queryClient = inject(QueryClient)
+
+  postId = signal(1)
+
+  queries = inject(QueriesService)
+  optionsSignal = computed(() => this.queries.post(this.postId()))
+
+  postQuery = injectQuery(() => this.queries.post(1))
+  postQuery = injectQuery(() => this.queries.post(this.postId()))
+
+  // You can also pass a signal which returns query options
+  postQuery = injectQuery(this.optionsSignal)
+
+  someMethod() {
+    this.queryClient.prefetchQuery(this.queries.post(23))
+  }
+}
+```
+
+Further, the `queryKey` returned from `queryOptions` knows about the `queryFn` associated with it, and we can leverage that type information to make functions like `queryClient.getQueryData` aware of those types as well:
+
+```ts
+data = this.queryClient.getQueryData(groupOptions().queryKey)
+// ^? data: Post | undefined
+```
+
+Without `queryOptions`, the type of data would be unknown, unless we'd pass a type parameter:
+
+```ts
+data = queryClient.getQueryData<Post>(['post', 1])
+```
+
+## Typing Mutation Options
+
+Similarly to `queryOptions`, you can use `mutationOptions` to extract mutation options into a separate function:
+
+```ts
+export class QueriesService {
+  private http = inject(HttpClient)
+
+  updatePost(id: number) {
+    return mutationOptions({
+      mutationFn: (post: Post) => Promise.resolve(post),
+      mutationKey: ['updatePost', id],
+      onSuccess: (newPost) => {
+        //           ^? newPost: Post
+        this.queryClient.setQueryData(['posts', id], newPost)
+      },
+    })
+  }
+}
+```
+
+[//]: # 'TypingQueryOptions'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/angular/zoneless.md b/mintlify/query/framework/angular/zoneless.md
new file mode 100644
index 000000000..ee5811f1a
--- /dev/null
+++ b/mintlify/query/framework/angular/zoneless.md
@@ -0,0 +1,12 @@
+---
+id: zoneless
+title: Zoneless Angular
+---
+
+Because the Angular adapter for TanStack Query is built on signals, it fully supports Zoneless!
+
+Among Zoneless benefits are improved performance and debugging experience. For details see the [Angular documentation](https://angular.dev/guide/zoneless).
+
+> Besides Zoneless, ZoneJS change detection is also fully supported.
+
+> When using Zoneless, ensure you are on Angular v19 or later to take advantage of the `PendingTasks` integration that keeps `ApplicationRef.whenStable()` in sync with ongoing queries and mutations.
diff --git a/mintlify/query/framework/lit/examples/basic.md b/mintlify/query/framework/lit/examples/basic.md
new file mode 100644
index 000000000..59a7daeb6
--- /dev/null
+++ b/mintlify/query/framework/lit/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/lit/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/lit/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/lit/examples/pagination.md b/mintlify/query/framework/lit/examples/pagination.md
new file mode 100644
index 000000000..08eee5015
--- /dev/null
+++ b/mintlify/query/framework/lit/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/lit/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/lit/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/lit/examples/ssr.md b/mintlify/query/framework/lit/examples/ssr.md
new file mode 100644
index 000000000..8aab27a57
--- /dev/null
+++ b/mintlify/query/framework/lit/examples/ssr.md
@@ -0,0 +1,12 @@
+---
+title: "SSR"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/lit/examples/ssr)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/lit/ssr)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/lit/guides/infinite-queries.md b/mintlify/query/framework/lit/guides/infinite-queries.md
new file mode 100644
index 000000000..fdbf196db
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/infinite-queries.md
@@ -0,0 +1,87 @@
+---
+id: infinite-queries
+title: Infinite Queries
+---
+
+Infinite queries are for lists that load more data into one cache entry. Use [`createInfiniteQueryController`](/query/framework/lit/reference/functions/createInfiniteQueryController).
+
+An infinite query result contains:
+
+- `data.pages`: fetched pages
+- `data.pageParams`: page parameters used for those pages
+- `fetchNextPage` and `fetchPreviousPage`
+- `hasNextPage` and `hasPreviousPage`
+- `isFetchingNextPage` and `isFetchingPreviousPage`
+
+## Load More Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { createInfiniteQueryController } from '@tanstack/lit-query'
+
+class ProjectsList extends LitElement {
+  private readonly projects = createInfiniteQueryController(this, {
+    queryKey: ['projects'],
+    queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.page + 1 : undefined,
+  })
+
+  render() {
+    const query = this.projects()
+
+    if (query.isPending) return html`Loading...`
+    if (query.isError) return html`Error: ${query.error.message}`
+
+    return html`
+      ${query.data.pages.map(
+        (page) => html`
+          ${page.projects.map((project) => html`<p>${project.name}</p>`)}
+        `,
+      )}
+
+      <button
+        ?disabled=${!query.hasNextPage || query.isFetching}
+        @click=${() => this.projects.fetchNextPage()}
+      >
+        ${query.isFetchingNextPage
+          ? 'Loading more...'
+          : query.hasNextPage
+            ? 'Load More'
+            : 'Nothing more to load'}
+      </button>
+    `
+  }
+}
+```
+
+## Page Parameters
+
+`initialPageParam` is required. `getNextPageParam` decides whether another page exists and what value should be passed as `pageParam` to the next query function call.
+
+```ts
+createInfiniteQueryController(this, {
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
+  initialPageParam: 1,
+  getNextPageParam: (lastPage) =>
+    lastPage.hasMore ? lastPage.page + 1 : undefined,
+})
+```
+
+Returning `undefined` or `null` means there is no next page.
+
+## Avoid Overlapping Fetches
+
+There is one ongoing fetch for an infinite query cache entry. If you call `fetchNextPage` while a background refetch is running, you can overwrite data. Disable the button or check `!query.isFetching` before loading more:
+
+```ts
+if (query.hasNextPage && !query.isFetching) {
+  this.projects.fetchNextPage()
+}
+```
+
+## Paginated Alternative
+
+If your UI shows one page at a time, a normal query with a page in the key can be a better fit. The [Pagination example](/query/framework/lit/examples/pagination) uses `createQueryController`, `placeholderData: keepPreviousData`, prefetching, and mutations to demonstrate that pattern.
diff --git a/mintlify/query/framework/lit/guides/mutations.md b/mintlify/query/framework/lit/guides/mutations.md
new file mode 100644
index 000000000..2c18aedb4
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/mutations.md
@@ -0,0 +1,166 @@
+---
+id: mutations
+title: Mutations
+---
+
+Unlike queries, mutations are used to create, update, delete, or otherwise perform server side effects. In Lit, use [`createMutationController`](/query/framework/lit/reference/functions/createMutationController).
+
+```ts
+import { LitElement, html } from 'lit'
+import {
+  QueryClient,
+  QueryClientProvider,
+  createMutationController,
+  createQueryController,
+} from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+class AppQueryProvider extends QueryClientProvider {
+  constructor() {
+    super()
+    this.client = queryClient
+  }
+}
+
+customElements.define('app-query-provider', AppQueryProvider)
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+
+  private readonly addTodo = createMutationController(this, {
+    mutationFn: createTodo,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+
+  render() {
+    const query = this.todos()
+    const mutation = this.addTodo()
+    const todos = query.data ?? []
+
+    return html`
+      ${mutation.isError ? html`<p>${mutation.error.message}</p>` : null}
+      ${mutation.isSuccess ? html`<p>Todo added</p>` : null}
+
+      <button
+        ?disabled=${mutation.isPending}
+        @click=${() => this.addTodo.mutate({ title: 'Write mutation docs' })}
+      >
+        ${mutation.isPending ? 'Adding...' : 'Add Todo'}
+      </button>
+
+      <ul>
+        ${todos.map((todo) => html`<li>${todo.title}</li>`)}
+      </ul>
+    `
+  }
+}
+
+customElements.define('todos-view', TodosView)
+```
+
+Render the element under the provider so the controllers can resolve the same `QueryClient` from Lit context:
+
+```html
+<app-query-provider>
+  <todos-view></todos-view>
+</app-query-provider>
+```
+
+## Mutation States
+
+A mutation can be in one of these primary states:
+
+- `isIdle` or `status === 'idle'`: no mutation has run or it has been reset
+- `isPending` or `status === 'pending'`: the mutation is running
+- `isError` or `status === 'error'`: the mutation failed and `error` is available
+- `isSuccess` or `status === 'success'`: the mutation finished and `data` is available
+
+## Variables
+
+Pass variables to the mutation function by calling `mutate`:
+
+```ts
+this.addTodo.mutate({
+  title: this.nextTitle,
+})
+```
+
+`mutate` throws synchronously if the controller cannot resolve a `QueryClient`, such as when the element is not under a connected `QueryClientProvider` and no explicit client was passed. `mutateAsync` reports the same setup problem as a rejected promise.
+
+Use `mutateAsync` when you want a promise:
+
+```ts
+try {
+  const created = await this.addTodo.mutateAsync({ title: this.nextTitle })
+  this.nextTitle = created.title
+} catch (error) {
+  this.errorMessage = String(error)
+}
+```
+
+## Resetting Mutation State
+
+The accessor includes `reset`:
+
+```ts
+html`
+  ${mutation.isError
+    ? html`<button @click=${() => this.addTodo.reset()}>Clear error</button>`
+    : null}
+`
+```
+
+## Side Effects
+
+Mutation options support `onMutate`, `onError`, `onSuccess`, and `onSettled`. The pagination example passes an explicit `queryClient` to the controller and uses the same in-scope client for optimistic updates and rollback:
+
+```ts
+private readonly favoriteMutation = createMutationController(
+  this,
+  {
+    mutationKey: ['toggle-project-favorite'],
+    mutationFn: async (input) => {
+      const response = await toggleProjectFavoriteOnServer(input)
+      return response.project
+    },
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: ['projects'] })
+      const snapshots = queryClient.getQueriesData<ProjectsPageResponse>({
+        queryKey: ['projects'],
+      })
+
+      for (const [key, existing] of snapshots) {
+        if (!existing) continue
+
+        queryClient.setQueryData<ProjectsPageResponse>(key, {
+          ...existing,
+          projects: existing.projects.map((project) =>
+            project.id === variables.id
+              ? { ...project, isFavorite: variables.isFavorite }
+              : project,
+          ),
+        })
+      }
+
+      return { snapshots }
+    },
+    onError: (_error, _variables, context) => {
+      for (const [key, snapshot] of context?.snapshots ?? []) {
+        queryClient.setQueryData(key, snapshot)
+      }
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['projects'] })
+    },
+  },
+  queryClient,
+)
+```
+
+For the exact runnable flow, see the [Pagination example](/query/framework/lit/examples/pagination).
diff --git a/mintlify/query/framework/lit/guides/parallel-queries.md b/mintlify/query/framework/lit/guides/parallel-queries.md
new file mode 100644
index 000000000..3cbae6618
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/parallel-queries.md
@@ -0,0 +1,134 @@
+---
+id: parallel-queries
+title: Parallel Queries
+---
+
+Parallel queries are queries that run at the same time so the UI does not wait for one request before starting the next.
+
+## Manual Parallel Queries
+
+When the number of queries is fixed, create multiple query controllers on the same host. They will all subscribe when the host connects.
+
+```ts
+import { LitElement, html } from 'lit'
+import { createQueryController } from '@tanstack/lit-query'
+
+class DashboardView extends LitElement {
+  private readonly users = createQueryController(this, {
+    queryKey: ['users'],
+    queryFn: fetchUsers,
+  })
+
+  private readonly teams = createQueryController(this, {
+    queryKey: ['teams'],
+    queryFn: fetchTeams,
+  })
+
+  private readonly projects = createQueryController(this, {
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+  })
+
+  render() {
+    const users = this.users()
+    const teams = this.teams()
+    const projects = this.projects()
+
+    if (users.isPending || teams.isPending || projects.isPending) {
+      return html`Loading...`
+    }
+
+    if (users.isError || teams.isError || projects.isError) {
+      return html`Unable to load dashboard`
+    }
+
+    return html`
+      <dashboard-summary
+        .users=${users.data}
+        .teams=${teams.data}
+        .projects=${projects.data}
+      ></dashboard-summary>
+    `
+  }
+}
+```
+
+Each controller receives the same `ReactiveControllerHost`. If no explicit `QueryClient` is passed, each controller resolves the nearest connected `QueryClientProvider`.
+
+## Dynamic Parallel Queries
+
+When the number of queries changes with host state, use [`createQueriesController`](/query/framework/lit/reference/functions/createQueriesController). It accepts a `queries` array and returns an accessor for the array of query results.
+
+Use an options getter when the query list depends on reactive host fields:
+
+```ts
+import { LitElement, html } from 'lit'
+import { createQueriesController } from '@tanstack/lit-query'
+
+class UsersDetails extends LitElement {
+  static properties = {
+    userIds: { attribute: false },
+  }
+
+  userIds: Array<string> = []
+
+  private readonly users = createQueriesController(this, () => ({
+    queries: this.userIds.map((id) => ({
+      queryKey: ['user', id],
+      queryFn: () => fetchUserById(id),
+    })),
+  }))
+
+  render() {
+    const userQueries = this.users()
+
+    return html`
+      <ul>
+        ${userQueries.map((query, index) => {
+          if (query.isPending) return html`<li>Loading...</li>`
+          if (query.isError) return html`<li>Error loading user</li>`
+
+          return html`<li>${this.userIds[index]}: ${query.data.name}</li>`
+        })}
+      </ul>
+    `
+  }
+}
+```
+
+The order of the results matches the order of the input queries.
+
+## Combining Results
+
+Use `combine` when a component wants one derived value instead of an array of query results:
+
+```ts
+private readonly dashboard = createQueriesController(this, {
+  queries: [
+    { queryKey: ['stats'], queryFn: fetchStats },
+    { queryKey: ['projects'], queryFn: fetchProjects },
+  ],
+  combine: ([stats, projects]) => ({
+    activeUsers: stats.data?.activeUsers ?? 0,
+    projects: projects.data ?? [],
+    isPending: stats.isPending || projects.isPending,
+    isError: stats.isError || projects.isError,
+  }),
+})
+```
+
+```ts
+render() {
+  const dashboard = this.dashboard()
+
+  if (dashboard.isPending) return html`Loading...`
+  if (dashboard.isError) return html`Unable to load dashboard`
+
+  return html`
+    <p>Total projects: ${dashboard.projects.length}</p>
+    <p>Active users: ${dashboard.activeUsers}</p>
+  `
+}
+```
+
+Having the same query key more than once in the `queries` array can cause those entries to share cached data. Deduplicate repeated keys first if each rendered row needs independent query state.
diff --git a/mintlify/query/framework/lit/guides/queries.md b/mintlify/query/framework/lit/guides/queries.md
new file mode 100644
index 000000000..6bc836548
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/queries.md
@@ -0,0 +1,141 @@
+---
+id: queries
+title: Queries
+---
+
+New to Lit Query? Start with [Installation](/query/framework/lit/installation) and [Quick Start](/query/framework/lit/quick-start) before wiring query controllers into your elements.
+
+## Query Basics
+
+A query is a declarative dependency on an asynchronous source of data tied to a unique key. Use queries for reading server state. If a function creates, updates, or deletes server data, use a [mutation](/query/framework/lit/guides/mutations) instead.
+
+In Lit, subscribe to a query with [`createQueryController`](/query/framework/lit/reference/functions/createQueryController):
+
+```ts
+import { LitElement, html } from 'lit'
+import { createQueryController } from '@tanstack/lit-query'
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+
+  render() {
+    const query = this.todos()
+
+    if (query.isPending) return html`Loading...`
+    if (query.isError) return html`Error: ${query.error.message}`
+
+    return html`
+      <ul>
+        ${query.data.map((todo) => html`<li>${todo.title}</li>`)}
+      </ul>
+    `
+  }
+}
+```
+
+The controller needs:
+
+- A `ReactiveControllerHost`, usually `this` inside a `LitElement`
+- A unique `queryKey`
+- A `queryFn` that returns a promise and throws on errors
+
+The returned accessor exposes the current `QueryObserverResult`. Call it in `render`, or read `.current`:
+
+```ts
+const query = this.todos()
+const sameQuery = this.todos.current
+```
+
+## Query States
+
+A query can be in one primary state at a time:
+
+- `isPending` or `status === 'pending'`: no data is available yet
+- `isError` or `status === 'error'`: the query failed and `error` is available
+- `isSuccess` or `status === 'success'`: data is available
+
+The result also includes `isFetching`, which can be true during the initial load or a background refetch.
+
+```ts
+render() {
+  const query = this.todos()
+
+  if (query.status === 'pending') {
+    return html`<span>Loading...</span>`
+  }
+
+  if (query.status === 'error') {
+    return html`<span>Error: ${query.error.message}</span>`
+  }
+
+  return html`<todo-list .items=${query.data}></todo-list>`
+}
+```
+
+TypeScript will narrow `query.data` after you check `pending` and `error` before reading it.
+
+## Fetch Status
+
+The `status` field describes whether data is available. The `fetchStatus` field describes what the query function is doing:
+
+- `fetchStatus === 'fetching'`: the query is currently fetching.
+- `fetchStatus === 'paused'`: the query wanted to fetch, but fetching is paused.
+- `fetchStatus === 'idle'`: the query is not fetching.
+
+These states are intentionally separate. Background refetching and stale-while-revalidate behavior can produce combinations like:
+
+- A successful query with cached data can have `status === 'success'` and `fetchStatus === 'fetching'` while a background refetch is running.
+- A query with no data can have `status === 'pending'` and `fetchStatus === 'paused'` if fetching cannot start yet.
+
+Use `status` when deciding whether data can be rendered, and use `fetchStatus` or `isFetching` when deciding whether to show a network activity indicator:
+
+```ts
+render() {
+  const query = this.todos()
+
+  if (query.isPending) return html`Loading...`
+  if (query.isError) return html`Error: ${query.error.message}`
+
+  return html`
+    ${query.fetchStatus === 'fetching'
+      ? html`<span>Refreshing...</span>`
+      : null}
+    <todo-list .items=${query.data}></todo-list>
+  `
+}
+```
+
+## Reactive Query Options
+
+Use an options getter when the query key or query function depends on host state:
+
+```ts
+class UserTodos extends LitElement {
+  static properties = {
+    userId: { type: String },
+  }
+
+  userId = ''
+
+  private readonly todos = createQueryController(this, () => ({
+    queryKey: ['todos', this.userId],
+    queryFn: () => fetchTodos(this.userId),
+    enabled: this.userId.length > 0,
+  }))
+}
+```
+
+The query key is used for caching, refetching, and sharing data between controllers.
+
+## Refetching
+
+The accessor includes `refetch`:
+
+```ts
+html`<button @click=${() => this.todos.refetch()}>Refetch</button>`
+```
+
+For multiple queries that should run at the same time, see [Parallel Queries](/query/framework/lit/guides/parallel-queries).
diff --git a/mintlify/query/framework/lit/guides/query-functions.md b/mintlify/query/framework/lit/guides/query-functions.md
new file mode 100644
index 000000000..21e617efa
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/query-functions.md
@@ -0,0 +1,81 @@
+---
+id: query-functions
+title: Query Functions
+---
+
+A query function can be any function that returns a promise. The promise should resolve data or throw an error.
+
+```ts
+createQueryController(this, {
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+})
+
+createQueryController(this, () => ({
+  queryKey: ['todo', this.todoId],
+  queryFn: () => fetchTodo(this.todoId),
+}))
+```
+
+## Handling Errors
+
+TanStack Query needs failed query functions to throw or return a rejected promise. Some clients do that automatically. The browser `fetch` API does not, so check `response.ok` yourself:
+
+```ts
+async function fetchTodos(): Promise<Todo[]> {
+  const response = await fetch('/api/todos')
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch todos')
+  }
+
+  return response.json() as Promise<Todo[]>
+}
+```
+
+The thrown error is available on the query result:
+
+```ts
+const query = this.todos()
+
+if (query.isError) {
+  return html`Error: ${query.error.message}`
+}
+```
+
+## Query Function Context
+
+TanStack Query passes a context object to every query function. It includes:
+
+- `queryKey`: the current query key
+- `client`: the `QueryClient`
+- `signal`: an `AbortSignal` for cancellation
+- `meta`: optional query metadata
+
+```ts
+createQueryController(this, {
+  queryKey: ['todos', { status: 'open' }],
+  queryFn: async ({ queryKey, signal }) => {
+    const [, filters] = queryKey
+    const response = await fetch(`/api/todos?status=${filters.status}`, {
+      signal,
+    })
+    if (!response.ok) throw new Error('Failed to fetch todos')
+    return response.json() as Promise<Todo[]>
+  },
+})
+```
+
+Infinite query functions also receive `pageParam`:
+
+```ts
+createInfiniteQueryController(this, {
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
+  initialPageParam: 1,
+  getNextPageParam: (lastPage) =>
+    lastPage.hasMore ? lastPage.page + 1 : undefined,
+})
+```
+
+See [Infinite Queries](/query/framework/lit/guides/infinite-queries) for the controller-specific behavior.
diff --git a/mintlify/query/framework/lit/guides/query-invalidation.md b/mintlify/query/framework/lit/guides/query-invalidation.md
new file mode 100644
index 000000000..643f6685e
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/query-invalidation.md
@@ -0,0 +1,83 @@
+---
+id: query-invalidation
+title: Query Invalidation
+---
+
+Waiting for queries to become stale is not always enough. After a mutation succeeds, you often know that related cached data is out of date. Use `queryClient.invalidateQueries` to mark matching queries stale and refetch active observers.
+
+```ts
+queryClient.invalidateQueries()
+
+queryClient.invalidateQueries({
+  queryKey: ['todos'],
+})
+```
+
+When a query is invalidated:
+
+- It is marked stale, overriding any `staleTime`
+- If a matching query is active in a controller, it can refetch in the background
+
+## Invalidation from Mutations
+
+```ts
+private readonly addTodo = createMutationController(this, {
+  mutationFn: addTodo,
+  onSuccess: async () => {
+    await queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+```
+
+Use this pattern when the mutation result tells you related cached data is stale. The [Pagination example](/query/framework/lit/examples/pagination) shows invalidation after project mutations.
+
+## Query Matching
+
+Match a group of queries by prefix:
+
+```ts
+queryClient.invalidateQueries({ queryKey: ['projects'] })
+```
+
+Both of these query keys match:
+
+```ts
+const projectsListKey = ['projects']
+const projectsPageKey = ['projects', 1, 250, false]
+```
+
+Use a more specific key when only one slice should be invalidated:
+
+```ts
+queryClient.invalidateQueries({
+  queryKey: ['projects', this.page],
+})
+```
+
+Use `exact: true` to match only the exact key:
+
+```ts
+queryClient.invalidateQueries({
+  queryKey: ['projects'],
+  exact: true,
+})
+```
+
+## Manual Cache Updates
+
+Invalidation is usually simpler than normalized cache updates. When you do need immediate UI updates, combine targeted cache writes with invalidation:
+
+```ts
+queryClient.setQueryData<TodosResponse>(['todos'], (existing) => {
+  if (!existing) return existing
+
+  return {
+    ...existing,
+    items: [...existing.items, createdTodo],
+  }
+})
+
+await queryClient.invalidateQueries({ queryKey: ['todos'] })
+```
+
+For rollback with optimistic updates, see the mutation guide and the [Pagination example](/query/framework/lit/examples/pagination).
diff --git a/mintlify/query/framework/lit/guides/query-keys.md b/mintlify/query/framework/lit/guides/query-keys.md
new file mode 100644
index 000000000..8a532e93e
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/query-keys.md
@@ -0,0 +1,85 @@
+---
+id: query-keys
+title: Query Keys
+---
+
+TanStack Query manages caching by query key. Query keys must be arrays at the top level, and they should uniquely describe the data returned by the query function.
+
+## Simple Keys
+
+Use simple keys for list resources or non-hierarchical data:
+
+```ts
+createQueryController(this, {
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+})
+
+createQueryController(this, {
+  queryKey: ['settings'],
+  queryFn: fetchSettings,
+})
+```
+
+## Keys with Variables
+
+Include variables when they change what the query fetches:
+
+```ts
+createQueryController(this, () => ({
+  queryKey: ['todo', this.todoId],
+  queryFn: () => fetchTodo(this.todoId),
+}))
+
+createQueryController(this, () => ({
+  queryKey: ['projects', { page: this.page, filter: this.filter }],
+  queryFn: () => fetchProjects({ page: this.page, filter: this.filter }),
+}))
+```
+
+The pagination example uses a key shaped like this:
+
+```ts
+type ProjectsQueryKey = readonly ['projects', number, number, boolean]
+
+function projectsQueryKey(
+  page: number,
+  delayMs: number,
+  forceError: boolean,
+): ProjectsQueryKey {
+  return ['projects', page, delayMs, forceError] as const
+}
+```
+
+## Deterministic Hashing
+
+Object key order does not matter inside a query key:
+
+```ts
+const keyA = ['todos', { status, page }]
+const keyB = ['todos', { page, status }]
+```
+
+Array item order does matter:
+
+```ts
+const keyA = ['todos', status, page]
+const keyB = ['todos', page, status]
+```
+
+## Query Keys as Dependencies
+
+If your query function reads a reactive host property, include that value in the query key:
+
+```ts
+class UserTodos extends LitElement {
+  userId = ''
+
+  private readonly todos = createQueryController(this, () => ({
+    queryKey: ['todos', this.userId],
+    queryFn: () => fetchTodos(this.userId),
+  }))
+}
+```
+
+This lets Lit Query cache each user's todos separately and refetch when the host state changes.
diff --git a/mintlify/query/framework/lit/guides/reactive-controllers-vs-hooks.md b/mintlify/query/framework/lit/guides/reactive-controllers-vs-hooks.md
new file mode 100644
index 000000000..0b825f396
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/reactive-controllers-vs-hooks.md
@@ -0,0 +1,111 @@
+---
+id: reactive-controllers-vs-hooks
+title: Reactive Controllers vs Hooks
+---
+
+React Query examples use hooks. Lit Query uses reactive controllers.
+
+The job is similar: subscribe a component to a `QueryClient`, read the latest result, and update the component when the cache changes. The integration point is different because Lit components use the `ReactiveControllerHost` interface instead of React's render and hook system.
+
+## Mapping the Concepts
+
+| React Query                 | Lit Query                                      |
+| --------------------------- | ---------------------------------------------- |
+| `useQuery(options)`         | `createQueryController(this, options)`         |
+| `useQueries(options)`       | `createQueriesController(this, options)`       |
+| `useMutation(options)`      | `createMutationController(this, options)`      |
+| `useInfiniteQuery(options)` | `createInfiniteQueryController(this, options)` |
+| `useIsFetching(options)`    | `useIsFetching(this, options)`                 |
+| `useIsMutating(options)`    | `useIsMutating(this, options)`                 |
+| `useMutationState(options)` | `useMutationState(this, options)`              |
+| Hook result object          | Callable result accessor                       |
+| React context provider      | `QueryClientProvider` custom element           |
+| Component render rerun      | `host.requestUpdate()`                         |
+
+## Host-Bound APIs
+
+Lit APIs that subscribe a component to query or mutation state receive a `host` as the first argument:
+
+```ts
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+}
+```
+
+`this` is valid because `LitElement` implements `ReactiveControllerHost`. The controller attaches to the host, subscribes when the host connects, requests updates when the query result changes, and unsubscribes when the host disconnects.
+
+The host-bound APIs are [`createQueryController`](/query/framework/lit/reference/functions/createQueryController), [`createQueriesController`](/query/framework/lit/reference/functions/createQueriesController), [`createInfiniteQueryController`](/query/framework/lit/reference/functions/createInfiniteQueryController), [`createMutationController`](/query/framework/lit/reference/functions/createMutationController), [`useIsFetching`](/query/framework/lit/reference/functions/useIsFetching), [`useIsMutating`](/query/framework/lit/reference/functions/useIsMutating), and [`useMutationState`](/query/framework/lit/reference/functions/useMutationState).
+
+[`useQueryClient`](/query/framework/lit/reference/functions/useQueryClient) is different. It is not a reactive controller, does not accept a host, does not subscribe, and throws synchronously if no single default client is available. Use it only for imperative code that runs while exactly one `QueryClientProvider` is connected. Inside host-bound APIs, prefer the provider context or pass an explicit `QueryClient`.
+
+## Reading Results
+
+Lit Query controller creators return a callable accessor with a `current` property:
+
+```ts
+const query = this.todos()
+const sameQuery = this.todos.current
+```
+
+Render methods normally call the accessor:
+
+```ts
+render() {
+  const query = this.todos()
+
+  if (query.isPending) return html`Loading...`
+  if (query.isError) return html`Error: ${query.error.message}`
+
+  return html`<todo-list .items=${query.data}></todo-list>`
+}
+```
+
+## Reactive Options
+
+If query options depend on host state, pass a function. Lit Query re-reads function accessors during host updates:
+
+```ts
+class ProjectView extends LitElement {
+  static properties = {
+    projectId: { type: Number },
+  }
+
+  projectId = 1
+
+  private readonly project = createQueryController(this, () => ({
+    queryKey: ['project', this.projectId],
+    queryFn: () => fetchProject(this.projectId),
+  }))
+}
+```
+
+If options are static, pass an object. If you mutate a static options object yourself, call the controller helper that causes the observer to see the new options, such as `refetch`, or prefer a function accessor for reactive state.
+
+## Provider Context
+
+Host-bound APIs can receive an explicit `QueryClient`, but most apps render under [`QueryClientProvider`](/query/framework/lit/reference/classes/QueryClientProvider). The provider uses Lit context to deliver the client to descendant controllers.
+
+```ts
+customElements.define('query-client-provider', QueryClientProvider)
+```
+
+```ts
+html`
+  <query-client-provider .client=${queryClient}>
+    <todos-view></todos-view>
+  </query-client-provider>
+`
+```
+
+Custom element registration is always the application's responsibility.
+
+`QueryClientProvider` also registers its client in a process-local fallback store for [`useQueryClient`](/query/framework/lit/reference/functions/useQueryClient) and [`resolveQueryClient`](/query/framework/lit/reference/functions/resolveQueryClient). That fallback is intentionally conservative:
+
+- If no provider is connected, `useQueryClient()` throws.
+- If exactly one distinct client is connected, `useQueryClient()` returns it.
+- If multiple distinct clients are connected in the same JavaScript context, `useQueryClient()` and `resolveQueryClient()` throw because the fallback would be ambiguous.
+
+Multiple roots, micro-frontends, test suites with shared modules, and nested apps should avoid relying on the process-local fallback. Render host-bound controllers under the right provider, pass an explicit `QueryClient` to the controller, or cleanly disconnect providers between tests.
diff --git a/mintlify/query/framework/lit/guides/ssr.md b/mintlify/query/framework/lit/guides/ssr.md
new file mode 100644
index 000000000..38cb2832b
--- /dev/null
+++ b/mintlify/query/framework/lit/guides/ssr.md
@@ -0,0 +1,145 @@
+---
+id: ssr
+title: Server Rendering & Hydration
+---
+
+Lit Query can be used with server rendering by combining Lit SSR with TanStack Query Core hydration APIs re-exported from `@tanstack/lit-query`.
+
+The runnable source for this guide is the [SSR example](/query/framework/lit/examples/ssr).
+
+## Flow
+
+Server rendering has three phases:
+
+1. Create a per-request `QueryClient`.
+2. Prefetch queries on the server and render Lit HTML with that client.
+3. Dehydrate the cache into the HTML, then hydrate a browser `QueryClient` before the client app renders.
+
+Never share one server `QueryClient` between users or requests.
+
+## Server Prefetch and Render
+
+```ts
+import { render } from '@lit-labs/ssr'
+import { collectResult } from '@lit-labs/ssr/lib/render-result.js'
+import { html } from 'lit'
+import { QueryClient, dehydrate } from '@tanstack/lit-query'
+import { createDataQueryOptions } from './api.js'
+import './app.js'
+
+async function renderPage() {
+  const apiBaseUrl = 'https://example.com'
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30_000,
+      },
+    },
+  })
+
+  await queryClient.prefetchQuery(createDataQueryOptions(apiBaseUrl))
+
+  const appHtml = await collectResult(
+    render(
+      html`<ssr-app
+        api-base-url=${apiBaseUrl}
+        .queryClient=${queryClient}
+      ></ssr-app>`,
+    ),
+  )
+
+  const dehydratedState = dehydrate(queryClient)
+
+  return { appHtml, dehydratedState }
+}
+```
+
+The server passes the same client into the Lit element with a property binding. This lets `createQueryController` read the prefetched cache during server render. If your query function calls `fetch` during SSR, pass an absolute API origin instead of relying on a browser-relative URL.
+
+## Client Hydration
+
+```ts
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import { QueryClient, hydrate, type DehydratedState } from '@tanstack/lit-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+    },
+  },
+})
+
+const dehydratedState = JSON.parse(
+  document.getElementById('__QUERY_STATE__')?.textContent ?? 'null',
+) as DehydratedState
+
+queryClient.mount()
+hydrate(queryClient, dehydratedState)
+
+const appElement = document.querySelector('ssr-app') as
+  | (HTMLElement & { queryClient?: QueryClient })
+  | null
+
+if (!appElement) {
+  throw new Error('Expected the SSR app element to exist before hydration.')
+}
+
+appElement.queryClient = queryClient
+await import('./app.js')
+```
+
+Unmount the client when the page is unloaded if you mounted it manually:
+
+```ts
+window.addEventListener(
+  'pagehide',
+  () => {
+    queryClient.unmount()
+  },
+  { once: true },
+)
+```
+
+## Component Pattern
+
+The SSR example creates its controller only after a `queryClient` property is available:
+
+```ts
+import { LitElement } from 'lit'
+import {
+  createQueryController,
+  type QueryClient,
+  type QueryResultAccessor,
+} from '@tanstack/lit-query'
+import { createDataQueryOptions, type DataResponse } from './api.js'
+
+class SsrApp extends LitElement {
+  static properties = {
+    apiBaseUrl: { attribute: 'api-base-url' },
+    queryClient: { attribute: false },
+  }
+
+  apiBaseUrl = ''
+  queryClient?: QueryClient
+  private dataQuery?: QueryResultAccessor<DataResponse, Error>
+
+  protected override willUpdate(): void {
+    if (!this.dataQuery && this.queryClient) {
+      this.dataQuery = createQueryController(
+        this,
+        createDataQueryOptions(this.apiBaseUrl),
+        this.queryClient,
+      )
+    }
+  }
+}
+```
+
+This explicit-client pattern is useful for SSR because the client is created by the renderer rather than discovered from a connected DOM provider.
+
+## Serialization
+
+Embed dehydrated state as JSON in the HTML and escape characters that can break out of a script tag. The example server uses a small serializer before replacing `__QUERY_STATE_JSON__` in the built HTML template.
+
+Lit Query re-exports `dehydrate` and `hydrate` from TanStack Query Core. Use `dehydrate(queryClient)` after server prefetching to capture the cache state. In the browser, parse that state, create a fresh `QueryClient`, call `hydrate(queryClient, dehydratedState)`, assign the client to the server-rendered element, and only then import the Lit component so it upgrades with the prefetched cache available.
diff --git a/mintlify/query/framework/lit/installation.md b/mintlify/query/framework/lit/installation.md
new file mode 100644
index 000000000..2d9e04a78
--- /dev/null
+++ b/mintlify/query/framework/lit/installation.md
@@ -0,0 +1,109 @@
+---
+id: installation
+title: Installation
+---
+
+> IMPORTANT: The Lit adapter is currently experimental and v0.1. Pin exact versions if you need extra release stability while the API is early.
+
+Install Lit Query with Lit and TanStack Query Core:
+
+```bash
+npm i @tanstack/lit-query @tanstack/query-core lit
+```
+
+or
+
+```bash
+pnpm add @tanstack/lit-query @tanstack/query-core lit
+```
+
+or
+
+```bash
+yarn add @tanstack/lit-query @tanstack/query-core lit
+```
+
+or
+
+```bash
+bun add @tanstack/lit-query @tanstack/query-core lit
+```
+
+`@tanstack/query-core` is a peer dependency of `@tanstack/lit-query`. Even though the Lit docs import user-facing APIs from `@tanstack/lit-query`, your app should install `@tanstack/query-core` explicitly.
+
+## Requirements
+
+Lit Query is intended for Lit 2.8 and newer, including Lit 3. It uses Lit reactive controllers and Lit context, so query consumers should be `ReactiveControllerHost` instances such as `LitElement`.
+
+TanStack Query is optimized for modern browsers:
+
+```txt
+Chrome >= 91
+Firefox >= 90
+Edge >= 91
+Safari >= 15
+iOS >= 15
+Opera >= 77
+```
+
+## Provider Setup
+
+Create a `QueryClient`, provide it with `QueryClientProvider`, and register your custom element. The package exports the provider class but does not call `customElements.define` for you.
+
+### Subclass Pattern
+
+```ts
+import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+class AppQueryProvider extends QueryClientProvider {
+  constructor() {
+    super()
+    this.client = queryClient
+  }
+}
+
+customElements.define('app-query-provider', AppQueryProvider)
+```
+
+```html
+<app-query-provider>
+  <todos-view></todos-view>
+</app-query-provider>
+```
+
+### Direct Provider Element
+
+You can register the provider class directly and bind its `client` property from a Lit template. The dot is important: `.client=${queryClient}` is a property binding, not an HTML attribute.
+
+```ts
+import { LitElement, html } from 'lit'
+import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+customElements.define('query-client-provider', QueryClientProvider)
+
+class AppRoot extends LitElement {
+  render() {
+    return html`
+      <query-client-provider .client=${queryClient}>
+        <todos-view></todos-view>
+      </query-client-provider>
+    `
+  }
+}
+```
+
+If a connected provider has no `client`, it throws. See the generated [`QueryClientProvider` reference](/query/framework/lit/reference/classes/QueryClientProvider) for the full contract.
+
+## Render Roots
+
+The snippets in these docs use Lit's default shadow DOM. Lit Query controllers and `QueryClientProvider` work with shadow DOM and light DOM because they use the host lifecycle and Lit context, not global selectors.
+
+Some runnable examples override `createRenderRoot()` and return `this` so their demo markup stays in light DOM for shared page styles and test selectors. That override is not required for Lit Query. Use light DOM only when your app has a separate reason to expose a component's internal markup to global CSS, tests, or non-shadow-DOM integration code.
+
+## Devtools Status
+
+Lit Devtools are not available yet. This is a current adapter limitation, not an installation step.
diff --git a/mintlify/query/framework/lit/overview.md b/mintlify/query/framework/lit/overview.md
new file mode 100644
index 000000000..9aa1df1af
--- /dev/null
+++ b/mintlify/query/framework/lit/overview.md
@@ -0,0 +1,93 @@
+---
+id: overview
+title: Overview
+---
+
+> IMPORTANT: The `@tanstack/lit-query` package is currently experimental and v0.1. Expect the Lit adapter API and docs to keep evolving. If you use it in production while it is early, pin the package to a patch version and upgrade deliberately.
+
+The `@tanstack/lit-query` package is the Lit adapter for TanStack Query. It gives Lit applications reactive controller APIs for fetching, caching, synchronizing, and updating server state.
+
+TanStack Query manages server state: data that is owned by a remote system, fetched asynchronously, shared across screens, and potentially changed by someone else at any time. It handles caching, request deduplication, stale data, background refetching, mutations, invalidation, pagination, and garbage collection.
+
+Lit Query exposes those features through [Lit reactive controllers](https://lit.dev/docs/composition/controllers/). A Lit reactive controller is attached to a `ReactiveControllerHost`, usually a `LitElement`. Lit Query controllers subscribe to the `QueryClient`, request host updates when results change, and are cleaned up with the host lifecycle.
+
+## Core APIs
+
+Most Lit applications use these APIs:
+
+- [`QueryClientProvider`](/query/framework/lit/reference/classes/QueryClientProvider) to provide a `QueryClient` through Lit context
+- [`createQueryController`](/query/framework/lit/reference/functions/createQueryController) for queries
+- [`createQueriesController`](/query/framework/lit/reference/functions/createQueriesController) for dynamic parallel queries
+- [`createMutationController`](/query/framework/lit/reference/functions/createMutationController) for mutations
+- [`createInfiniteQueryController`](/query/framework/lit/reference/functions/createInfiniteQueryController) for infinite queries
+- [`useIsFetching`](/query/framework/lit/reference/functions/useIsFetching), [`useIsMutating`](/query/framework/lit/reference/functions/useIsMutating), and [`useMutationState`](/query/framework/lit/reference/functions/useMutationState) for cache state indicators
+
+The adapter also re-exports TanStack Query Core APIs from `@tanstack/lit-query`, so examples in the Lit docs use `@tanstack/lit-query` as the user-facing import path.
+
+## A First Query
+
+```ts
+import { LitElement, html } from 'lit'
+import {
+  QueryClient,
+  QueryClientProvider,
+  createQueryController,
+} from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+class AppQueryProvider extends QueryClientProvider {
+  constructor() {
+    super()
+    this.client = queryClient
+  }
+}
+
+customElements.define('app-query-provider', AppQueryProvider)
+
+class RepoStats extends LitElement {
+  private readonly repo = createQueryController(this, {
+    queryKey: ['repoData'],
+    queryFn: async () => {
+      const response = await fetch(
+        'https://api.github.com/repos/TanStack/query',
+      )
+      if (!response.ok) throw new Error('Failed to fetch repo data')
+      return response.json() as Promise<{
+        name: string
+        description: string
+        stargazers_count: number
+      }>
+    },
+  })
+
+  render() {
+    const query = this.repo()
+
+    if (query.isPending) return html`Loading...`
+    if (query.isError) return html`Error: ${query.error.message}`
+
+    return html`
+      <h1>${query.data.name}</h1>
+      <p>${query.data.description}</p>
+      <strong>${query.data.stargazers_count} stars</strong>
+    `
+  }
+}
+
+customElements.define('repo-stats', RepoStats)
+```
+
+Render the provider above your query consumers:
+
+```html
+<app-query-provider>
+  <repo-stats></repo-stats>
+</app-query-provider>
+```
+
+## Status Notes
+
+Lit Devtools are not available yet. Use the cache APIs and the generated API reference while the adapter matures.
+
+Start with [Installation](/query/framework/lit/installation), then [Quick Start](/query/framework/lit/quick-start), and use the [Reactive Controllers vs Hooks](/query/framework/lit/guides/reactive-controllers-vs-hooks) guide if you are coming from React Query.
diff --git a/mintlify/query/framework/lit/quick-start.md b/mintlify/query/framework/lit/quick-start.md
new file mode 100644
index 000000000..20ec50ba7
--- /dev/null
+++ b/mintlify/query/framework/lit/quick-start.md
@@ -0,0 +1,83 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+This snippet shows the three core Lit Query concepts:
+
+- [Queries](/query/framework/lit/guides/queries)
+- [Mutations](/query/framework/lit/guides/mutations)
+- [Query Invalidation](/query/framework/lit/guides/query-invalidation)
+
+For complete runnable examples, see [Basic](/query/framework/lit/examples/basic), [Pagination](/query/framework/lit/examples/pagination), and [SSR](/query/framework/lit/examples/ssr).
+
+```ts
+import { LitElement, html } from 'lit'
+import {
+  QueryClient,
+  QueryClientProvider,
+  createMutationController,
+  createQueryController,
+} from '@tanstack/lit-query'
+import { addTodo, getTodos } from './api'
+
+const queryClient = new QueryClient()
+
+class AppQueryProvider extends QueryClientProvider {
+  constructor() {
+    super()
+    this.client = queryClient
+  }
+}
+
+customElements.define('app-query-provider', AppQueryProvider)
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: getTodos,
+  })
+
+  private readonly createTodo = createMutationController(this, {
+    mutationFn: addTodo,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+
+  render() {
+    const query = this.todos()
+    const mutation = this.createTodo()
+
+    if (query.isPending) return html`Loading...`
+    if (query.isError) return html`Error: ${query.error.message}`
+
+    return html`
+      <ul>
+        ${query.data.map((todo) => html`<li>${todo.title}</li>`)}
+      </ul>
+
+      <button
+        ?disabled=${mutation.isPending}
+        @click=${() => this.createTodo.mutate({ title: 'Write Lit docs' })}
+      >
+        Add Todo
+      </button>
+    `
+  }
+}
+
+customElements.define('todos-view', TodosView)
+```
+
+Mount the provider around your component:
+
+```html
+<app-query-provider>
+  <todos-view></todos-view>
+</app-query-provider>
+```
+
+The controllers are created with `this` because a `LitElement` is a `ReactiveControllerHost`. Lit Query uses the host lifecycle to subscribe, request updates, and clean up when the element disconnects.
+
+Continue with [Reactive Controllers vs Hooks](/query/framework/lit/guides/reactive-controllers-vs-hooks) if you know React Query, or go straight to [Queries](/query/framework/lit/guides/queries).
diff --git a/mintlify/query/framework/lit/reference/classes/QueryClientProvider.md b/mintlify/query/framework/lit/reference/classes/QueryClientProvider.md
new file mode 100644
index 000000000..df14c2769
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/classes/QueryClientProvider.md
@@ -0,0 +1,98 @@
+---
+id: QueryClientProvider
+title: QueryClientProvider
+---
+
+# Class: QueryClientProvider
+
+Defined in: [packages/lit-query/src/QueryClientProvider.ts:64](https://github.com/TanStack/query/blob/main/packages/lit-query/src/QueryClientProvider.ts#L64)
+
+Lit element that provides a `QueryClient` to descendant Lit Query
+controllers through Lit context.
+
+The `client` is a property, not an attribute. When rendering this element in
+a Lit template, bind it with property binding: `.client=${queryClient}`.
+The provider throws if it connects without a client, or if an already
+connected provider has its client cleared.
+
+This class is not registered as a custom element by the package. Applications
+must register either a subclass or the class itself with
+`customElements.define`.
+
+## Examples
+
+```ts
+import { html, LitElement } from 'lit'
+import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+class AppQueryProvider extends QueryClientProvider {
+  constructor() {
+    super()
+    this.client = queryClient
+  }
+}
+
+customElements.define('app-query-provider', AppQueryProvider)
+
+class AppRoot extends LitElement {
+  render() {
+    return html`<app-query-provider><todos-view></todos-view></app-query-provider>`
+  }
+}
+```
+
+```ts
+import { html } from 'lit'
+import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'
+
+const queryClient = new QueryClient()
+
+customElements.define('query-client-provider', QueryClientProvider)
+
+const view = html`
+  <query-client-provider .client=${queryClient}>
+    <todos-view></todos-view>
+  </query-client-provider>
+`
+```
+
+## Extends
+
+- `LitElement`
+
+## Constructors
+
+### Constructor
+
+```ts
+new QueryClientProvider(): QueryClientProvider;
+```
+
+Defined in: [packages/lit-query/src/QueryClientProvider.ts:82](https://github.com/TanStack/query/blob/main/packages/lit-query/src/QueryClientProvider.ts#L82)
+
+#### Returns
+
+`QueryClientProvider`
+
+#### Overrides
+
+```ts
+LitElement.constructor
+```
+
+## Properties
+
+### client
+
+```ts
+client: QueryClient;
+```
+
+Defined in: [packages/lit-query/src/QueryClientProvider.ts:76](https://github.com/TanStack/query/blob/main/packages/lit-query/src/QueryClientProvider.ts#L76)
+
+The `QueryClient` provided to descendant controllers and global fallback
+helpers while this provider is connected.
+
+Bind this as a property in Lit templates with `.client=${queryClient}`.
diff --git a/mintlify/query/framework/lit/reference/functions/createInfiniteQueryController.md b/mintlify/query/framework/lit/reference/functions/createInfiniteQueryController.md
new file mode 100644
index 000000000..9088b8342
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/createInfiniteQueryController.md
@@ -0,0 +1,104 @@
+---
+id: createInfiniteQueryController
+title: createInfiniteQueryController
+---
+
+# Function: createInfiniteQueryController()
+
+```ts
+function createInfiniteQueryController<TQueryFnData, TError, TData, TQueryKey, TPageParam>(
+   host,
+   options,
+queryClient?): InfiniteQueryResultAccessor<TData, TError>;
+```
+
+Defined in: [packages/lit-query/src/createInfiniteQueryController.ts:364](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createInfiniteQueryController.ts#L364)
+
+Creates a Lit reactive controller that subscribes the host to an infinite
+query.
+
+The returned accessor is callable and also exposes `current`, `refetch`,
+`fetchNextPage`, `fetchPreviousPage`, and `destroy`. When `options` is a
+function, it is re-read during host updates so query keys and options can
+follow reactive host state.
+
+If `queryClient` is omitted, the controller resolves the client from the
+nearest connected `QueryClientProvider`.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the infinite query
+subscription.
+
+### options
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;[`CreateInfiniteQueryOptions`](/query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>
+
+Infinite query observer options, or a getter that returns
+options.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`InfiniteQueryResultAccessor`](/query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor)\&lt;`TData`, `TError`\>
+
+An accessor for the latest infinite query result with page helper
+methods.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { createInfiniteQueryController } from '@tanstack/lit-query'
+
+class ProjectsView extends LitElement {
+  private readonly projects = createInfiniteQueryController(this, {
+    queryKey: ['projects'],
+    queryFn: ({ pageParam }) => fetchProjects(pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+  })
+
+  render() {
+    const query = this.projects()
+
+    return html`
+      <button ?disabled=${!query.hasNextPage} @click=${() => this.projects.fetchNextPage()}>
+        Load more
+      </button>
+    `
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/createMutationController.md b/mintlify/query/framework/lit/reference/functions/createMutationController.md
new file mode 100644
index 000000000..d818d75d8
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/createMutationController.md
@@ -0,0 +1,96 @@
+---
+id: createMutationController
+title: createMutationController
+---
+
+# Function: createMutationController()
+
+```ts
+function createMutationController<TData, TError, TVariables, TOnMutateResult>(
+   host,
+   options,
+queryClient?): MutationResultAccessor<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/lit-query/src/createMutationController.ts:338](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createMutationController.ts#L338)
+
+Creates a Lit reactive controller that subscribes the host to a mutation.
+
+The returned accessor is callable and also exposes `current`, `mutate`,
+`mutateAsync`, `reset`, and `destroy`. When `options` is a function, it is
+re-read during host updates so mutation options can follow reactive host
+state.
+
+If `queryClient` is omitted, the controller resolves the client from the
+nearest connected `QueryClientProvider`.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the mutation
+subscription.
+
+### options
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;[`CreateMutationOptions`](/query/framework/lit/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>\>
+
+Mutation observer options, or a getter that returns options.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`MutationResultAccessor`](/query/framework/lit/reference/type-aliases/MutationResultAccessor)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+An accessor for the latest mutation result with mutation helper
+methods.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { createMutationController } from '@tanstack/lit-query'
+
+class AddTodoForm extends LitElement {
+  private readonly addTodo = createMutationController(this, {
+    mutationFn: (title: string) =>
+      fetch('/api/todos', { method: 'POST', body: JSON.stringify({ title }) }),
+  })
+
+  render() {
+    const mutation = this.addTodo()
+
+    return html`
+      <button ?disabled=${mutation.isPending} @click=${() => this.addTodo.mutate('Ship docs')}>
+        Add todo
+      </button>
+    `
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/createQueriesController.md b/mintlify/query/framework/lit/reference/functions/createQueriesController.md
new file mode 100644
index 000000000..37b276494
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/createQueriesController.md
@@ -0,0 +1,90 @@
+---
+id: createQueriesController
+title: createQueriesController
+---
+
+# Function: createQueriesController()
+
+```ts
+function createQueriesController<TQueryOptions, TCombinedResult>(
+   host,
+   options,
+queryClient?): QueriesResultAccessor<TCombinedResult>;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:615](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L615)
+
+Creates a Lit reactive controller that subscribes the host to multiple
+queries.
+
+The returned accessor is callable and also exposes `current` and `destroy`.
+When `options` or `options.queries` is a function, it is re-read during host
+updates so the query list can follow reactive host state.
+
+If `queryClient` is omitted, the controller resolves the client from the
+nearest connected `QueryClientProvider`.
+
+## Type Parameters
+
+### TQueryOptions
+
+`TQueryOptions` *extends* `any`[]
+
+### TCombinedResult
+
+`TCombinedResult` = `CreateQueriesResults`\&lt;`TQueryOptions`\>
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the queries
+subscription.
+
+### options
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;[`CreateQueriesControllerOptions`](/query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions)\&lt;`TQueryOptions`, `TCombinedResult`\>\>
+
+Queries controller options, or a getter that returns options.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`QueriesResultAccessor`](/query/framework/lit/reference/type-aliases/QueriesResultAccessor)\&lt;`TCombinedResult`\>
+
+An accessor for the latest query results, or the value returned by
+`combine`.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { createQueriesController } from '@tanstack/lit-query'
+
+class DashboardView extends LitElement {
+  private readonly dashboard = createQueriesController(this, {
+    queries: [
+      { queryKey: ['stats'], queryFn: fetchStats },
+      { queryKey: ['projects'], queryFn: fetchProjects },
+    ],
+    combine: ([stats, projects]) => ({
+      stats: stats.data,
+      projects: projects.data ?? [],
+      isPending: stats.isPending || projects.isPending,
+    }),
+  })
+
+  render() {
+    const dashboard = this.dashboard()
+    return html`<p>Projects: ${dashboard.projects.length}</p>`
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/createQueryController.md b/mintlify/query/framework/lit/reference/functions/createQueryController.md
new file mode 100644
index 000000000..27745f52f
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/createQueryController.md
@@ -0,0 +1,97 @@
+---
+id: createQueryController
+title: createQueryController
+---
+
+# Function: createQueryController()
+
+```ts
+function createQueryController<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
+   host,
+   options,
+queryClient?): QueryResultAccessor<TData, TError>;
+```
+
+Defined in: [packages/lit-query/src/createQueryController.ts:319](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueryController.ts#L319)
+
+Creates a Lit reactive controller that subscribes the host to a single query.
+
+The returned accessor is callable and also exposes `current`, `refetch`,
+`suspense`, and `destroy`. When `options` is a function, it is re-read during
+host updates so query keys and options can follow reactive host state.
+
+If `queryClient` is omitted, the controller resolves the client from the
+nearest connected `QueryClientProvider`.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the query
+subscription.
+
+### options
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;[`CreateQueryOptions`](/query/framework/lit/reference/type-aliases/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>\>
+
+Query observer options, or a getter that returns options.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`QueryResultAccessor`](/query/framework/lit/reference/type-aliases/QueryResultAccessor)\&lt;`TData`, `TError`\>
+
+An accessor for the latest query result with query helper methods.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { createQueryController } from '@tanstack/lit-query'
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: async () => fetch('/api/todos').then((r) => r.json()),
+  })
+
+  render() {
+    const query = this.todos()
+
+    if (query.isPending) return html`Loading...`
+    if (query.isError) return html`Error`
+
+    return html`<ul>${query.data.map((todo) => html`<li>${todo.title}</li>`)}</ul>`
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/getDefaultQueryClient.md b/mintlify/query/framework/lit/reference/functions/getDefaultQueryClient.md
new file mode 100644
index 000000000..4c9ff19db
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/getDefaultQueryClient.md
@@ -0,0 +1,22 @@
+---
+id: getDefaultQueryClient
+title: getDefaultQueryClient
+---
+
+# Function: getDefaultQueryClient()
+
+```ts
+function getDefaultQueryClient(): QueryClient | undefined;
+```
+
+Defined in: [packages/lit-query/src/context.ts:72](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L72)
+
+Returns the registered default `QueryClient`, if exactly one default client is
+available.
+
+## Returns
+
+`QueryClient` \| `undefined`
+
+The default query client, or `undefined` when there is no registered
+client or more than one registered client.
diff --git a/mintlify/query/framework/lit/reference/functions/infiniteQueryOptions.md b/mintlify/query/framework/lit/reference/functions/infiniteQueryOptions.md
new file mode 100644
index 000000000..18f3d748c
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/infiniteQueryOptions.md
@@ -0,0 +1,63 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+---
+
+# Function: infiniteQueryOptions()
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
+```
+
+Defined in: [packages/lit-query/src/infiniteQueryOptions.ts:26](https://github.com/TanStack/query/blob/main/packages/lit-query/src/infiniteQueryOptions.ts#L26)
+
+Preserves and types infinite query options for reuse across Lit Query APIs.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### options
+
+`InfiniteQueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+Infinite query options to preserve.
+
+## Returns
+
+`InfiniteQueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+The same options object.
+
+## Example
+
+```ts
+import { infiniteQueryOptions } from '@tanstack/lit-query'
+
+const projectsOptions = infiniteQueryOptions({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0,
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
diff --git a/mintlify/query/framework/lit/reference/functions/mutationOptions.md b/mintlify/query/framework/lit/reference/functions/mutationOptions.md
new file mode 100644
index 000000000..f1e978cb5
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/mutationOptions.md
@@ -0,0 +1,57 @@
+---
+id: mutationOptions
+title: mutationOptions
+---
+
+# Function: mutationOptions()
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/lit-query/src/mutationOptions.ts:22](https://github.com/TanStack/query/blob/main/packages/lit-query/src/mutationOptions.ts#L22)
+
+Preserves and types mutation options for reuse across Lit Query APIs.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### options
+
+`MutationObserverOptions`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+Mutation options to preserve.
+
+## Returns
+
+`MutationObserverOptions`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+The same options object.
+
+## Example
+
+```ts
+import { mutationOptions } from '@tanstack/lit-query'
+
+const addTodoOptions = mutationOptions({
+  mutationKey: ['add-todo'],
+  mutationFn: (title: string) => addTodo(title),
+})
+```
diff --git a/mintlify/query/framework/lit/reference/functions/queryOptions.md b/mintlify/query/framework/lit/reference/functions/queryOptions.md
new file mode 100644
index 000000000..4eed3bf31
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/queryOptions.md
@@ -0,0 +1,147 @@
+---
+id: queryOptions
+title: queryOptions
+---
+
+# Function: queryOptions()
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): Omit<QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey, never>, "queryFn"> & object & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:94](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L94)
+
+Brands query options so the `queryKey` carries the query function data and
+error types across TanStack Query APIs.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataOptions`](/query/framework/lit/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+Query options to preserve and brand.
+
+### Returns
+
+`Omit`\&lt;`QueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `never`\>, `"queryFn"`\> & `object` & `object`
+
+The same options object with a typed `queryKey`.
+
+### Example
+
+```ts
+import { queryOptions } from '@tanstack/lit-query'
+
+const todosOptions = queryOptions({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  initialData: [],
+})
+```
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): OmitKeyof<QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey, never>, "queryFn"> & object & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:112](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L112)
+
+Brands query options so the `queryKey` carries the query function data and
+error types across TanStack Query APIs.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UnusedSkipTokenOptions`](/query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+Query options to preserve and brand.
+
+### Returns
+
+`OmitKeyof`\&lt;`QueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `never`\>, `"queryFn"`\> & `object` & `object`
+
+The same options object with a typed `queryKey`.
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey, never> & object & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:130](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L130)
+
+Brands query options so the `queryKey` carries the query function data and
+error types across TanStack Query APIs.
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataOptions`](/query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+Query options to preserve and brand.
+
+### Returns
+
+`QueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `never`\> & `object` & `object`
+
+The same options object with a typed `queryKey`.
diff --git a/mintlify/query/framework/lit/reference/functions/registerDefaultQueryClient.md b/mintlify/query/framework/lit/reference/functions/registerDefaultQueryClient.md
new file mode 100644
index 000000000..d3174f600
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/registerDefaultQueryClient.md
@@ -0,0 +1,30 @@
+---
+id: registerDefaultQueryClient
+title: registerDefaultQueryClient
+---
+
+# Function: registerDefaultQueryClient()
+
+```ts
+function registerDefaultQueryClient(client): void;
+```
+
+Defined in: [packages/lit-query/src/context.ts:32](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L32)
+
+Registers a `QueryClient` as a process-local fallback for APIs that resolve a
+client without an explicit argument.
+
+`QueryClientProvider` calls this automatically while it is connected. Prefer
+passing an explicit client or rendering under a provider when possible.
+
+## Parameters
+
+### client
+
+`QueryClient`
+
+The query client to register as the current default.
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/lit/reference/functions/resolveQueryClient.md b/mintlify/query/framework/lit/reference/functions/resolveQueryClient.md
new file mode 100644
index 000000000..cfb0ba226
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/resolveQueryClient.md
@@ -0,0 +1,29 @@
+---
+id: resolveQueryClient
+title: resolveQueryClient
+---
+
+# Function: resolveQueryClient()
+
+```ts
+function resolveQueryClient(explicit?): QueryClient;
+```
+
+Defined in: [packages/lit-query/src/context.ts:118](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L118)
+
+Resolves an explicit `QueryClient` or falls back to `useQueryClient`.
+
+## Parameters
+
+### explicit?
+
+`QueryClient`
+
+Optional client supplied by the caller.
+
+## Returns
+
+`QueryClient`
+
+The explicit client when provided, otherwise the current default
+client.
diff --git a/mintlify/query/framework/lit/reference/functions/unregisterDefaultQueryClient.md b/mintlify/query/framework/lit/reference/functions/unregisterDefaultQueryClient.md
new file mode 100644
index 000000000..8c82f497c
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/unregisterDefaultQueryClient.md
@@ -0,0 +1,29 @@
+---
+id: unregisterDefaultQueryClient
+title: unregisterDefaultQueryClient
+---
+
+# Function: unregisterDefaultQueryClient()
+
+```ts
+function unregisterDefaultQueryClient(client): void;
+```
+
+Defined in: [packages/lit-query/src/context.ts:45](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L45)
+
+Unregisters a client previously registered with
+`registerDefaultQueryClient`.
+
+`QueryClientProvider` calls this automatically when it disconnects.
+
+## Parameters
+
+### client
+
+`QueryClient`
+
+The query client registration to release.
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/lit/reference/functions/useIsFetching.md b/mintlify/query/framework/lit/reference/functions/useIsFetching.md
new file mode 100644
index 000000000..f1de260e7
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/useIsFetching.md
@@ -0,0 +1,67 @@
+---
+id: useIsFetching
+title: useIsFetching
+---
+
+# Function: useIsFetching()
+
+```ts
+function useIsFetching(
+   host,
+   filters,
+   queryClient?): IsFetchingAccessor;
+```
+
+Defined in: [packages/lit-query/src/useIsFetching.ts:147](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useIsFetching.ts#L147)
+
+Creates a Lit reactive controller that tracks how many matching queries are
+currently fetching.
+
+When `filters` is a function, it is re-read during host updates so the count
+can follow reactive host state. If `queryClient` is omitted, the controller
+resolves the client from the nearest connected `QueryClientProvider`.
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the cache
+subscription.
+
+### filters
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;`QueryFilters`\&lt;readonly `unknown`[]\>\> = `{}`
+
+Query filters, or a getter that returns query filters.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`IsFetchingAccessor`](/query/framework/lit/reference/type-aliases/IsFetchingAccessor)
+
+An accessor for the current number of matching fetching queries.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { useIsFetching } from '@tanstack/lit-query'
+
+class TodosStatus extends LitElement {
+  private readonly todosFetching = useIsFetching(this, {
+    queryKey: ['todos'],
+  })
+
+  render() {
+    return html`<span>${this.todosFetching()} active todo fetches</span>`
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/useIsMutating.md b/mintlify/query/framework/lit/reference/functions/useIsMutating.md
new file mode 100644
index 000000000..62ff985ed
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/useIsMutating.md
@@ -0,0 +1,67 @@
+---
+id: useIsMutating
+title: useIsMutating
+---
+
+# Function: useIsMutating()
+
+```ts
+function useIsMutating(
+   host,
+   filters,
+   queryClient?): IsMutatingAccessor;
+```
+
+Defined in: [packages/lit-query/src/useIsMutating.ts:147](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useIsMutating.ts#L147)
+
+Creates a Lit reactive controller that tracks how many matching mutations are
+currently pending.
+
+When `filters` is a function, it is re-read during host updates so the count
+can follow reactive host state. If `queryClient` is omitted, the controller
+resolves the client from the nearest connected `QueryClientProvider`.
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the cache
+subscription.
+
+### filters
+
+[`Accessor`](/query/framework/lit/reference/type-aliases/Accessor)\&lt;`MutationFilters`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>\> = `{}`
+
+Mutation filters, or a getter that returns mutation filters.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`IsMutatingAccessor`](/query/framework/lit/reference/type-aliases/IsMutatingAccessor)
+
+An accessor for the current number of matching pending mutations.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { useIsMutating } from '@tanstack/lit-query'
+
+class MutationStatus extends LitElement {
+  private readonly savesPending = useIsMutating(this, {
+    mutationKey: ['save-project'],
+  })
+
+  render() {
+    return html`<span>${this.savesPending()} saves pending</span>`
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/useMutationState.md b/mintlify/query/framework/lit/reference/functions/useMutationState.md
new file mode 100644
index 000000000..7b6e9a306
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/useMutationState.md
@@ -0,0 +1,75 @@
+---
+id: useMutationState
+title: useMutationState
+---
+
+# Function: useMutationState()
+
+```ts
+function useMutationState<TResult>(
+   host,
+   options,
+queryClient?): MutationStateAccessor<TResult>;
+```
+
+Defined in: [packages/lit-query/src/useMutationState.ts:187](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L187)
+
+Creates a Lit reactive controller that selects state from matching mutations
+in the mutation cache.
+
+When `options.filters` is a function, it is re-read during host updates so
+the selection can follow reactive host state. If `queryClient` is omitted,
+the controller resolves the client from the nearest connected
+`QueryClientProvider`.
+
+## Type Parameters
+
+### TResult
+
+`TResult` = `MutationState`\&lt;`unknown`, `unknown`, `unknown`, `unknown`\>
+
+## Parameters
+
+### host
+
+`ReactiveControllerHost`
+
+The Lit reactive controller host that owns the mutation cache
+subscription.
+
+### options
+
+[`MutationStateOptions`](/query/framework/lit/reference/type-aliases/MutationStateOptions)\&lt;`TResult`\> = `{}`
+
+Mutation state filters and optional selector.
+
+### queryClient?
+
+`QueryClient`
+
+Optional explicit query client. Provide this for
+controllers that should not resolve a client from Lit context.
+
+## Returns
+
+[`MutationStateAccessor`](/query/framework/lit/reference/type-aliases/MutationStateAccessor)\&lt;`TResult`\>
+
+An accessor for the selected mutation state array.
+
+## Example
+
+```ts
+import { LitElement, html } from 'lit'
+import { useMutationState } from '@tanstack/lit-query'
+
+class PendingUploads extends LitElement {
+  private readonly uploads = useMutationState(this, {
+    filters: { mutationKey: ['upload'], status: 'pending' },
+    select: (mutation) => mutation.state.variables as File,
+  })
+
+  render() {
+    return html`<span>${this.uploads().length} uploads pending</span>`
+  }
+}
+```
diff --git a/mintlify/query/framework/lit/reference/functions/useQueryClient.md b/mintlify/query/framework/lit/reference/functions/useQueryClient.md
new file mode 100644
index 000000000..72db893d0
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/functions/useQueryClient.md
@@ -0,0 +1,25 @@
+---
+id: useQueryClient
+title: useQueryClient
+---
+
+# Function: useQueryClient()
+
+```ts
+function useQueryClient(): QueryClient;
+```
+
+Defined in: [packages/lit-query/src/context.ts:98](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L98)
+
+Resolves the current default `QueryClient` registered by a connected
+`QueryClientProvider`.
+
+This helper is useful outside a Lit reactive controller when a single
+provider is mounted. It throws if no client is registered or if multiple
+clients are mounted and the default would be ambiguous.
+
+## Returns
+
+`QueryClient`
+
+The single registered query client.
diff --git a/mintlify/query/framework/lit/reference/index.md b/mintlify/query/framework/lit/reference/index.md
new file mode 100644
index 000000000..d535c5500
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/index.md
@@ -0,0 +1,59 @@
+---
+id: "@tanstack/lit-query"
+title: "@tanstack/lit-query"
+---
+
+# @tanstack/lit-query
+
+## Classes
+
+- [QueryClientProvider](/query/framework/lit/reference/classes/QueryClientProvider)
+
+## Type Aliases
+
+- [Accessor](/query/framework/lit/reference/type-aliases/Accessor)
+- [CreateInfiniteQueryOptions](/query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions)
+- [CreateMutationOptions](/query/framework/lit/reference/type-aliases/CreateMutationOptions)
+- [CreateQueriesControllerOptions](/query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions)
+- [CreateQueriesInput](/query/framework/lit/reference/type-aliases/CreateQueriesInput)
+- [CreateQueryOptions](/query/framework/lit/reference/type-aliases/CreateQueryOptions)
+- [DefinedInitialDataOptions](/query/framework/lit/reference/type-aliases/DefinedInitialDataOptions)
+- [InfiniteQueryControllerOptions](/query/framework/lit/reference/type-aliases/InfiniteQueryControllerOptions)
+- [InfiniteQueryResultAccessor](/query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor)
+- [IsFetchingAccessor](/query/framework/lit/reference/type-aliases/IsFetchingAccessor)
+- [IsMutatingAccessor](/query/framework/lit/reference/type-aliases/IsMutatingAccessor)
+- [MutationControllerOptions](/query/framework/lit/reference/type-aliases/MutationControllerOptions)
+- [MutationControllerResult](/query/framework/lit/reference/type-aliases/MutationControllerResult)
+- [MutationResultAccessor](/query/framework/lit/reference/type-aliases/MutationResultAccessor)
+- [MutationStateAccessor](/query/framework/lit/reference/type-aliases/MutationStateAccessor)
+- [MutationStateOptions](/query/framework/lit/reference/type-aliases/MutationStateOptions)
+- [QueriesControllerOptions](/query/framework/lit/reference/type-aliases/QueriesControllerOptions)
+- [QueriesResultAccessor](/query/framework/lit/reference/type-aliases/QueriesResultAccessor)
+- [QueryControllerOptions](/query/framework/lit/reference/type-aliases/QueryControllerOptions)
+- [QueryControllerResult](/query/framework/lit/reference/type-aliases/QueryControllerResult)
+- [QueryResultAccessor](/query/framework/lit/reference/type-aliases/QueryResultAccessor)
+- [UndefinedInitialDataOptions](/query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions)
+- [UnusedSkipTokenOptions](/query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions)
+- [ValueAccessor](/query/framework/lit/reference/type-aliases/ValueAccessor)
+
+## Variables
+
+- [queryClientContext](/query/framework/lit/reference/variables/queryClientContext)
+
+## Functions
+
+- [createInfiniteQueryController](/query/framework/lit/reference/functions/createInfiniteQueryController)
+- [createMutationController](/query/framework/lit/reference/functions/createMutationController)
+- [createQueriesController](/query/framework/lit/reference/functions/createQueriesController)
+- [createQueryController](/query/framework/lit/reference/functions/createQueryController)
+- [getDefaultQueryClient](/query/framework/lit/reference/functions/getDefaultQueryClient)
+- [infiniteQueryOptions](/query/framework/lit/reference/functions/infiniteQueryOptions)
+- [mutationOptions](/query/framework/lit/reference/functions/mutationOptions)
+- [queryOptions](/query/framework/lit/reference/functions/queryOptions)
+- [registerDefaultQueryClient](/query/framework/lit/reference/functions/registerDefaultQueryClient)
+- [resolveQueryClient](/query/framework/lit/reference/functions/resolveQueryClient)
+- [unregisterDefaultQueryClient](/query/framework/lit/reference/functions/unregisterDefaultQueryClient)
+- [useIsFetching](/query/framework/lit/reference/functions/useIsFetching)
+- [useIsMutating](/query/framework/lit/reference/functions/useIsMutating)
+- [useMutationState](/query/framework/lit/reference/functions/useMutationState)
+- [useQueryClient](/query/framework/lit/reference/functions/useQueryClient)
diff --git a/mintlify/query/framework/lit/reference/type-aliases/Accessor.md b/mintlify/query/framework/lit/reference/type-aliases/Accessor.md
new file mode 100644
index 000000000..50daf3fd2
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/Accessor.md
@@ -0,0 +1,30 @@
+---
+id: Accessor
+title: Accessor
+---
+
+# Type Alias: Accessor\&lt;T\>
+
+```ts
+type Accessor<T> = T | () => T;
+```
+
+Defined in: [packages/lit-query/src/accessor.ts:13](https://github.com/TanStack/query/blob/main/packages/lit-query/src/accessor.ts#L13)
+
+A value that can be passed directly or read from a zero-argument getter.
+
+Lit Query APIs read function accessors during host updates, so the getter can
+depend on reactive host state.
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Example
+
+```ts
+const staticKey: Accessor<readonly unknown[]> = ['todos']
+const reactiveKey: Accessor<readonly unknown[]> = () => ['todos', this.userId]
+```
diff --git a/mintlify/query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions.md b/mintlify/query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions.md
new file mode 100644
index 000000000..6df901705
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/CreateInfiniteQueryOptions.md
@@ -0,0 +1,39 @@
+---
+id: CreateInfiniteQueryOptions
+title: CreateInfiniteQueryOptions
+---
+
+# Type Alias: CreateInfiniteQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
+```
+
+Defined in: [packages/lit-query/src/createInfiniteQueryController.ts:27](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createInfiniteQueryController.ts#L27)
+
+Options accepted by `createInfiniteQueryController`.
+
+This is the Lit adapter shape for `InfiniteQueryObserverOptions`. Pass it
+directly or through an `Accessor` when the options depend on Lit host state.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/CreateMutationOptions.md b/mintlify/query/framework/lit/reference/type-aliases/CreateMutationOptions.md
new file mode 100644
index 000000000..f7718e504
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/CreateMutationOptions.md
@@ -0,0 +1,35 @@
+---
+id: CreateMutationOptions
+title: CreateMutationOptions
+---
+
+# Type Alias: CreateMutationOptions\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutationOptions<TData, TError, TVariables, TOnMutateResult> = MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/lit-query/src/createMutationController.ts:25](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createMutationController.ts#L25)
+
+Options accepted by `createMutationController`.
+
+This is the Lit adapter shape for `MutationObserverOptions`. Pass it directly
+or through an `Accessor` when the options depend on Lit host state.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions.md b/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions.md
new file mode 100644
index 000000000..5054ccc86
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesControllerOptions.md
@@ -0,0 +1,64 @@
+---
+id: CreateQueriesControllerOptions
+title: CreateQueriesControllerOptions
+---
+
+# Type Alias: CreateQueriesControllerOptions\&lt;TQueryOptions, TCombinedResult\>
+
+```ts
+type CreateQueriesControllerOptions<TQueryOptions, TCombinedResult> = object;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:194](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L194)
+
+Options accepted by `createQueriesController`.
+
+`queries` can be a static list or a getter that returns the current list.
+`combine` can reshape the array of query results into a single value for the
+returned accessor.
+
+## Type Parameters
+
+### TQueryOptions
+
+`TQueryOptions` *extends* `any`[] = `any`[]
+
+### TCombinedResult
+
+`TCombinedResult` = `CreateQueriesResults`\&lt;`TQueryOptions`\>
+
+## Properties
+
+### combine()?
+
+```ts
+optional combine: (result) => TCombinedResult;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:208](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L208)
+
+Optional function that combines the query result array into one value.
+
+#### Parameters
+
+##### result
+
+`CreateQueriesResults`\&lt;`TQueryOptions`\>
+
+#### Returns
+
+`TCombinedResult`
+
+***
+
+### queries
+
+```ts
+queries: Accessor<
+  | readonly [...CreateQueriesOptions<TQueryOptions>]
+| readonly [...{ [K in keyof TQueryOptions]: GetCreateQueriesInput<TQueryOptions[K]> }]>;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:199](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L199)
+
+Query options to observe, or a getter that returns the current options.
diff --git a/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesInput.md b/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesInput.md
new file mode 100644
index 000000000..20e2d9ec9
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/CreateQueriesInput.md
@@ -0,0 +1,35 @@
+---
+id: CreateQueriesInput
+title: CreateQueriesInput
+---
+
+# Type Alias: CreateQueriesInput\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type CreateQueriesInput<TQueryFnData, TError, TData, TQueryKey> = QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:30](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L30)
+
+Options for one query inside `createQueriesController`.
+
+This mirrors `QueryObserverOptions` and is used by the tuple inference that
+maps each input query to its corresponding result.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/CreateQueryOptions.md b/mintlify/query/framework/lit/reference/type-aliases/CreateQueryOptions.md
new file mode 100644
index 000000000..fb09f573f
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/CreateQueryOptions.md
@@ -0,0 +1,40 @@
+---
+id: CreateQueryOptions
+title: CreateQueryOptions
+---
+
+# Type Alias: CreateQueryOptions\&lt;TQueryFnData, TError, TData, TQueryData, TQueryKey\>
+
+```ts
+type CreateQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> = QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+```
+
+Defined in: [packages/lit-query/src/createQueryController.ts:27](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueryController.ts#L27)
+
+Options accepted by `createQueryController`.
+
+This is the Lit adapter shape for `QueryObserverOptions`. It can be passed
+directly to `createQueryController`, or wrapped in an `Accessor` when the
+options depend on Lit host state.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/DefinedInitialDataOptions.md b/mintlify/query/framework/lit/reference/type-aliases/DefinedInitialDataOptions.md
new file mode 100644
index 000000000..378db3ec1
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/DefinedInitialDataOptions.md
@@ -0,0 +1,48 @@
+---
+id: DefinedInitialDataOptions
+title: DefinedInitialDataOptions
+---
+
+# Type Alias: DefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = Omit<QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:16](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L16)
+
+Query options with `initialData` that guarantees defined query data.
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData:
+  | NonUndefinedGuard<TQueryFnData>
+| () => NonUndefinedGuard<TQueryFnData>;
+```
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryControllerOptions.md b/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryControllerOptions.md
new file mode 100644
index 000000000..ce83f72d0
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryControllerOptions.md
@@ -0,0 +1,36 @@
+---
+id: InfiniteQueryControllerOptions
+title: InfiniteQueryControllerOptions
+---
+
+# Type Alias: InfiniteQueryControllerOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type InfiniteQueryControllerOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:41](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L41)
+
+Accessor-wrapped options accepted by `createInfiniteQueryController`.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor.md
new file mode 100644
index 000000000..336f959b9
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/InfiniteQueryResultAccessor.md
@@ -0,0 +1,66 @@
+---
+id: InfiniteQueryResultAccessor
+title: InfiniteQueryResultAccessor
+---
+
+# Type Alias: InfiniteQueryResultAccessor\&lt;TData, TError\>
+
+```ts
+type InfiniteQueryResultAccessor<TData, TError> = ValueAccessor<InfiniteQueryObserverResult<TData, TError>> & object;
+```
+
+Defined in: [packages/lit-query/src/createInfiniteQueryController.ts:48](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createInfiniteQueryController.ts#L48)
+
+Accessor returned by `createInfiniteQueryController`.
+
+Call the accessor or read its `current` property to get the latest infinite
+query result. The attached methods delegate to the active infinite query
+observer.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+Removes the controller from its Lit host and unsubscribes observers.
+
+#### Returns
+
+`void`
+
+### fetchNextPage
+
+```ts
+fetchNextPage: InfiniteQueryObserverResult<TData, TError>["fetchNextPage"];
+```
+
+Fetches the next page for the current infinite query.
+
+### fetchPreviousPage
+
+```ts
+fetchPreviousPage: InfiniteQueryObserverResult<TData, TError>["fetchPreviousPage"];
+```
+
+Fetches the previous page for the current infinite query.
+
+### refetch
+
+```ts
+refetch: InfiniteQueryObserverResult<TData, TError>["refetch"];
+```
+
+Refetches the current infinite query.
+
+## Type Parameters
+
+### TData
+
+`TData`
+
+### TError
+
+`TError`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/IsFetchingAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/IsFetchingAccessor.md
new file mode 100644
index 000000000..99c09c435
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/IsFetchingAccessor.md
@@ -0,0 +1,29 @@
+---
+id: IsFetchingAccessor
+title: IsFetchingAccessor
+---
+
+# Type Alias: IsFetchingAccessor
+
+```ts
+type IsFetchingAccessor = ValueAccessor<number> & object;
+```
+
+Defined in: [packages/lit-query/src/useIsFetching.ts:17](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useIsFetching.ts#L17)
+
+Accessor returned by `useIsFetching`.
+
+Call the accessor or read its `current` property to get the number of
+currently fetching queries that match the filters.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+#### Returns
+
+`void`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/IsMutatingAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/IsMutatingAccessor.md
new file mode 100644
index 000000000..1f0ff1194
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/IsMutatingAccessor.md
@@ -0,0 +1,29 @@
+---
+id: IsMutatingAccessor
+title: IsMutatingAccessor
+---
+
+# Type Alias: IsMutatingAccessor
+
+```ts
+type IsMutatingAccessor = ValueAccessor<number> & object;
+```
+
+Defined in: [packages/lit-query/src/useIsMutating.ts:17](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useIsMutating.ts#L17)
+
+Accessor returned by `useIsMutating`.
+
+Call the accessor or read its `current` property to get the number of
+currently pending mutations that match the filters.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+#### Returns
+
+`void`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/MutationControllerOptions.md b/mintlify/query/framework/lit/reference/type-aliases/MutationControllerOptions.md
new file mode 100644
index 000000000..12624d973
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/MutationControllerOptions.md
@@ -0,0 +1,32 @@
+---
+id: MutationControllerOptions
+title: MutationControllerOptions
+---
+
+# Type Alias: MutationControllerOptions\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type MutationControllerOptions<TData, TError, TVariables, TOnMutateResult> = Accessor<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:54](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L54)
+
+Accessor-wrapped options accepted by `createMutationController`.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/MutationControllerResult.md b/mintlify/query/framework/lit/reference/type-aliases/MutationControllerResult.md
new file mode 100644
index 000000000..444caaefe
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/MutationControllerResult.md
@@ -0,0 +1,32 @@
+---
+id: MutationControllerResult
+title: MutationControllerResult
+---
+
+# Type Alias: MutationControllerResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type MutationControllerResult<TData, TError, TVariables, TOnMutateResult> = MutationObserverResult<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:64](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L64)
+
+Result object produced by a Lit mutation controller.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/MutationResultAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/MutationResultAccessor.md
new file mode 100644
index 000000000..3665b46d1
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/MutationResultAccessor.md
@@ -0,0 +1,91 @@
+---
+id: MutationResultAccessor
+title: MutationResultAccessor
+---
+
+# Type Alias: MutationResultAccessor\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type MutationResultAccessor<TData, TError, TVariables, TOnMutateResult> = ValueAccessor<MutationObserverResult<TData, TError, TVariables, TOnMutateResult>> & object;
+```
+
+Defined in: [packages/lit-query/src/createMutationController.ts:38](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createMutationController.ts#L38)
+
+Accessor returned by `createMutationController`.
+
+Call the accessor or read its `current` property to get the latest mutation
+result. The attached methods delegate to the active mutation observer.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+Removes the controller from its Lit host and unsubscribes observers.
+
+#### Returns
+
+`void`
+
+### mutate()
+
+```ts
+mutate: (variables, options?) => void;
+```
+
+Starts the mutation and swallows the returned promise.
+
+Throws synchronously if no `QueryClient` can be resolved.
+
+#### Parameters
+
+##### variables
+
+`TVariables`
+
+##### options?
+
+`MutateOptions`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+#### Returns
+
+`void`
+
+### mutateAsync
+
+```ts
+mutateAsync: MutationObserverResult<TData, TError, TVariables, TOnMutateResult>["mutate"];
+```
+
+Starts the mutation and returns the observer promise.
+
+Rejects if no `QueryClient` can be resolved.
+
+### reset
+
+```ts
+reset: MutationObserverResult<TData, TError, TVariables, TOnMutateResult>["reset"];
+```
+
+Resets the mutation observer to its idle state.
+
+## Type Parameters
+
+### TData
+
+`TData`
+
+### TError
+
+`TError`
+
+### TVariables
+
+`TVariables`
+
+### TOnMutateResult
+
+`TOnMutateResult`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/MutationStateAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/MutationStateAccessor.md
new file mode 100644
index 000000000..e920e207d
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/MutationStateAccessor.md
@@ -0,0 +1,37 @@
+---
+id: MutationStateAccessor
+title: MutationStateAccessor
+---
+
+# Type Alias: MutationStateAccessor\&lt;TResult\>
+
+```ts
+type MutationStateAccessor<TResult> = ValueAccessor<TResult[]> & object;
+```
+
+Defined in: [packages/lit-query/src/useMutationState.ts:32](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L32)
+
+Accessor returned by `useMutationState`.
+
+Call the accessor or read its `current` property to get the selected state for
+matching mutations.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+Removes the controller from its Lit host and unsubscribes observers.
+
+#### Returns
+
+`void`
+
+## Type Parameters
+
+### TResult
+
+`TResult`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/MutationStateOptions.md b/mintlify/query/framework/lit/reference/type-aliases/MutationStateOptions.md
new file mode 100644
index 000000000..3d2ea19c7
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/MutationStateOptions.md
@@ -0,0 +1,54 @@
+---
+id: MutationStateOptions
+title: MutationStateOptions
+---
+
+# Type Alias: MutationStateOptions\&lt;TResult\>
+
+```ts
+type MutationStateOptions<TResult> = object;
+```
+
+Defined in: [packages/lit-query/src/useMutationState.ts:19](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L19)
+
+Options accepted by `useMutationState`.
+
+## Type Parameters
+
+### TResult
+
+`TResult`
+
+## Properties
+
+### filters?
+
+```ts
+optional filters: Accessor<MutationFilters>;
+```
+
+Defined in: [packages/lit-query/src/useMutationState.ts:21](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L21)
+
+Filters used to select mutations from the mutation cache.
+
+***
+
+### select()?
+
+```ts
+optional select: (mutation) => TResult;
+```
+
+Defined in: [packages/lit-query/src/useMutationState.ts:23](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L23)
+
+Maps each matching mutation to the value returned by the accessor.
+
+#### Parameters
+
+##### mutation
+
+`Mutation`
+
+#### Returns
+
+`TResult`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/QueriesControllerOptions.md b/mintlify/query/framework/lit/reference/type-aliases/QueriesControllerOptions.md
new file mode 100644
index 000000000..550387c0c
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/QueriesControllerOptions.md
@@ -0,0 +1,24 @@
+---
+id: QueriesControllerOptions
+title: QueriesControllerOptions
+---
+
+# Type Alias: QueriesControllerOptions\&lt;TQueryOptions, TCombinedResult\>
+
+```ts
+type QueriesControllerOptions<TQueryOptions, TCombinedResult> = Accessor<CreateQueriesControllerOptions<TQueryOptions, TCombinedResult>>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:74](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L74)
+
+Accessor-wrapped options accepted by `createQueriesController`.
+
+## Type Parameters
+
+### TQueryOptions
+
+`TQueryOptions` *extends* `any`[] = `any`[]
+
+### TCombinedResult
+
+`TCombinedResult` = `CreateQueriesResults`\&lt;`TQueryOptions`\>
diff --git a/mintlify/query/framework/lit/reference/type-aliases/QueriesResultAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/QueriesResultAccessor.md
new file mode 100644
index 000000000..6d6239987
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/QueriesResultAccessor.md
@@ -0,0 +1,37 @@
+---
+id: QueriesResultAccessor
+title: QueriesResultAccessor
+---
+
+# Type Alias: QueriesResultAccessor\&lt;TCombinedResult\>
+
+```ts
+type QueriesResultAccessor<TCombinedResult> = ValueAccessor<TCombinedResult> & object;
+```
+
+Defined in: [packages/lit-query/src/createQueriesController.ts:217](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L217)
+
+Accessor returned by `createQueriesController`.
+
+Call the accessor or read its `current` property to get the latest combined
+value.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+Removes the controller from its Lit host and unsubscribes observers.
+
+#### Returns
+
+`void`
+
+## Type Parameters
+
+### TCombinedResult
+
+`TCombinedResult`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/QueryControllerOptions.md b/mintlify/query/framework/lit/reference/type-aliases/QueryControllerOptions.md
new file mode 100644
index 000000000..db0d75480
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/QueryControllerOptions.md
@@ -0,0 +1,36 @@
+---
+id: QueryControllerOptions
+title: QueryControllerOptions
+---
+
+# Type Alias: QueryControllerOptions\&lt;TQueryFnData, TError, TData, TQueryData, TQueryKey\>
+
+```ts
+type QueryControllerOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> = Accessor<CreateQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:20](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L20)
+
+Accessor-wrapped options accepted by `createQueryController`.
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/QueryControllerResult.md b/mintlify/query/framework/lit/reference/type-aliases/QueryControllerResult.md
new file mode 100644
index 000000000..4fcd6bddb
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/QueryControllerResult.md
@@ -0,0 +1,24 @@
+---
+id: QueryControllerResult
+title: QueryControllerResult
+---
+
+# Type Alias: QueryControllerResult\&lt;TData, TError\>
+
+```ts
+type QueryControllerResult<TData, TError> = QueryObserverResult<TData, TError>;
+```
+
+Defined in: [packages/lit-query/src/types.ts:33](https://github.com/TanStack/query/blob/main/packages/lit-query/src/types.ts#L33)
+
+Result object produced by a Lit query controller.
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/QueryResultAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/QueryResultAccessor.md
new file mode 100644
index 000000000..9cd4ce1a7
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/QueryResultAccessor.md
@@ -0,0 +1,61 @@
+---
+id: QueryResultAccessor
+title: QueryResultAccessor
+---
+
+# Type Alias: QueryResultAccessor\&lt;TData, TError\>
+
+```ts
+type QueryResultAccessor<TData, TError> = ValueAccessor<QueryObserverResult<TData, TError>> & object;
+```
+
+Defined in: [packages/lit-query/src/createQueryController.ts:41](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueryController.ts#L41)
+
+Accessor returned by `createQueryController`.
+
+Call the accessor or read its `current` property to get the latest query
+result. The attached methods delegate to the active query observer.
+
+## Type Declaration
+
+### destroy()
+
+```ts
+destroy: () => void;
+```
+
+Removes the controller from its Lit host and unsubscribes observers.
+
+#### Returns
+
+`void`
+
+### refetch
+
+```ts
+refetch: QueryObserverResult<TData, TError>["refetch"];
+```
+
+Refetches the current query.
+
+### suspense()
+
+```ts
+suspense: () => Promise<QueryObserverResult<TData, TError>>;
+```
+
+Resolves with an optimistic query result, fetching first when needed.
+
+#### Returns
+
+`Promise`\&lt;`QueryObserverResult`\&lt;`TData`, `TError`\>\>
+
+## Type Parameters
+
+### TData
+
+`TData`
+
+### TError
+
+`TError`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions.md b/mintlify/query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions.md
new file mode 100644
index 000000000..fb42c149d
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/UndefinedInitialDataOptions.md
@@ -0,0 +1,42 @@
+---
+id: UndefinedInitialDataOptions
+title: UndefinedInitialDataOptions
+---
+
+# Type Alias: UndefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey> & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:58](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L58)
+
+Query options where `initialData` can be omitted or undefined.
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData:
+  | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>
+| NonUndefinedGuard<TQueryFnData>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions.md b/mintlify/query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions.md
new file mode 100644
index 000000000..3205863fb
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/UnusedSkipTokenOptions.md
@@ -0,0 +1,40 @@
+---
+id: UnusedSkipTokenOptions
+title: UnusedSkipTokenOptions
+---
+
+# Type Alias: UnusedSkipTokenOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> = OmitKeyof<QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [packages/lit-query/src/queryOptions.ts:34](https://github.com/TanStack/query/blob/main/packages/lit-query/src/queryOptions.ts#L34)
+
+Query options where `queryFn` is present and not a `skipToken`.
+
+## Type Declaration
+
+### queryFn?
+
+```ts
+optional queryFn: Exclude<QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>["queryFn"], SkipToken | undefined>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/lit/reference/type-aliases/ValueAccessor.md b/mintlify/query/framework/lit/reference/type-aliases/ValueAccessor.md
new file mode 100644
index 000000000..271078d80
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/type-aliases/ValueAccessor.md
@@ -0,0 +1,39 @@
+---
+id: ValueAccessor
+title: ValueAccessor
+---
+
+# Type Alias: ValueAccessor\&lt;T\>
+
+```ts
+type ValueAccessor<T> = () => T & object;
+```
+
+Defined in: [packages/lit-query/src/accessor.ts:32](https://github.com/TanStack/query/blob/main/packages/lit-query/src/accessor.ts#L32)
+
+A callable accessor with a `current` property for reading the latest
+controller result.
+
+Controller creators and cache state helpers return this shape so render code
+can use either `result()` or `result.current`.
+
+## Type Declaration
+
+### current
+
+```ts
+readonly current: T;
+```
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Example
+
+```ts
+const query = this.todos()
+const sameQuery = this.todos.current
+```
diff --git a/mintlify/query/framework/lit/reference/variables/queryClientContext.md b/mintlify/query/framework/lit/reference/variables/queryClientContext.md
new file mode 100644
index 000000000..56395991d
--- /dev/null
+++ b/mintlify/query/framework/lit/reference/variables/queryClientContext.md
@@ -0,0 +1,18 @@
+---
+id: queryClientContext
+title: queryClientContext
+---
+
+# Variable: queryClientContext
+
+```ts
+const queryClientContext: object;
+```
+
+Defined in: [packages/lit-query/src/context.ts:11](https://github.com/TanStack/query/blob/main/packages/lit-query/src/context.ts#L11)
+
+Lit context key used by `QueryClientProvider` and host-bound APIs to share a
+`QueryClient` through the DOM tree.
+
+Most applications use `QueryClientProvider` instead of interacting with this
+context directly.
diff --git a/mintlify/query/framework/lit/typescript.md b/mintlify/query/framework/lit/typescript.md
new file mode 100644
index 000000000..06080bd36
--- /dev/null
+++ b/mintlify/query/framework/lit/typescript.md
@@ -0,0 +1,132 @@
+---
+id: typescript
+title: TypeScript
+---
+
+Lit Query is written in TypeScript and reuses TanStack Query Core's type system. The most important rule is the same as every other adapter: give your query and mutation functions well-defined return types, and the result accessors will infer from them.
+
+## Query Inference
+
+```ts
+import { LitElement } from 'lit'
+import { createQueryController } from '@tanstack/lit-query'
+
+type Todo = {
+  id: number
+  title: string
+}
+
+async function fetchTodos(): Promise<Todo[]> {
+  const response = await fetch('/api/todos')
+  if (!response.ok) throw new Error('Failed to fetch todos')
+  return response.json() as Promise<Todo[]>
+}
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+
+  render() {
+    const query = this.todos()
+    // query.data is Todo[] | undefined until success is known.
+  }
+}
+```
+
+Checking `isSuccess`, `isPending`, `isError`, or `status` narrows the result just like TanStack Query Core result types:
+
+```ts
+const query = this.todos()
+
+if (query.isSuccess) {
+  query.data
+  // Todo[]
+}
+```
+
+## Mutation Inference
+
+```ts
+import { LitElement } from 'lit'
+import { createMutationController } from '@tanstack/lit-query'
+
+type CreateTodoInput = {
+  title: string
+}
+
+type Todo = {
+  id: number
+  title: string
+}
+
+async function addTodo(input: CreateTodoInput): Promise<Todo> {
+  const response = await fetch('/api/todos', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  })
+  if (!response.ok) throw new Error('Failed to create todo')
+  return response.json() as Promise<Todo>
+}
+
+class AddTodoButton extends LitElement {
+  private readonly mutation = createMutationController(this, {
+    mutationFn: addTodo,
+  })
+
+  private add() {
+    this.mutation.mutate({ title: 'Learn Lit Query' })
+  }
+}
+```
+
+## Extracting Options
+
+Use [`queryOptions`](/query/framework/lit/reference/functions/queryOptions), [`infiniteQueryOptions`](/query/framework/lit/reference/functions/infiniteQueryOptions), and [`mutationOptions`](/query/framework/lit/reference/functions/mutationOptions) when you want to share typed options between controllers and `QueryClient` calls.
+
+```ts
+import { LitElement } from 'lit'
+import {
+  QueryClient,
+  createQueryController,
+  queryOptions,
+} from '@tanstack/lit-query'
+
+function todosOptions() {
+  return queryOptions({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    staleTime: 5_000,
+  })
+}
+
+const queryClient = new QueryClient()
+
+class TodosView extends LitElement {
+  private readonly todos = createQueryController(this, todosOptions())
+}
+
+void queryClient.prefetchQuery(todosOptions())
+```
+
+The branded `queryKey` returned from `queryOptions` also helps APIs like `queryClient.getQueryData` understand the data type.
+
+## Global Register Types
+
+Because `@tanstack/lit-query` re-exports TanStack Query Core, module augmentation is written against `@tanstack/lit-query` in Lit apps:
+
+```ts
+import '@tanstack/lit-query'
+
+type AppQueryKey = ['todos' | 'projects', ...ReadonlyArray<unknown>]
+
+declare module '@tanstack/lit-query' {
+  interface Register {
+    queryKey: AppQueryKey
+    mutationKey: AppQueryKey
+  }
+}
+```
+
+See the generated reference for Lit-specific [option and result types](/query/framework/lit/reference/index).
diff --git a/mintlify/query/framework/preact/devtools.md b/mintlify/query/framework/preact/devtools.md
new file mode 100644
index 000000000..509f51637
--- /dev/null
+++ b/mintlify/query/framework/preact/devtools.md
@@ -0,0 +1,137 @@
+---
+id: devtools
+title: Devtools
+---
+
+Wave your hands in the air and shout hooray because Preact Query comes with dedicated devtools! 🥳
+
+When you begin your Preact Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Preact Query and will likely save you hours of debugging if you find yourself in a pinch!
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+## Install and Import the Devtools
+
+The devtools are a separate package that you need to install:
+
+```bash
+npm i @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/preact-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/preact-query-devtools
+```
+
+You can import the devtools like this:
+
+```tsx
+import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
+```
+
+By default, Preact Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Preact app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <PreactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`
+  - The position of the TanStack logo to open and close the devtools panel
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the Preact Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Embedded Mode
+
+Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
+
+Place the following code as high in your Preact app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { useState } from 'preact/hooks'
+import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      {isOpen && <PreactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `style?: CSSProperties`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => void`
+  - Callback function that is called when the devtools panel is closed
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
diff --git a/mintlify/query/framework/preact/examples/simple.md b/mintlify/query/framework/preact/examples/simple.md
new file mode 100644
index 000000000..9dfa47455
--- /dev/null
+++ b/mintlify/query/framework/preact/examples/simple.md
@@ -0,0 +1,9 @@
+---
+title: "Simple"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/query/latest/docs/framework/preact/examples/simple)
+- [Browse the pinned upstream repository](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb)
diff --git a/mintlify/query/framework/preact/graphql.md b/mintlify/query/framework/preact/graphql.md
new file mode 100644
index 000000000..883a4b47e
--- /dev/null
+++ b/mintlify/query/framework/preact/graphql.md
@@ -0,0 +1,6 @@
+---
+id: graphql
+title: GraphQL
+ref: docs/framework/react/graphql.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/background-fetching-indicators.md b/mintlify/query/framework/preact/guides/background-fetching-indicators.md
new file mode 100644
index 000000000..c8aab0af8
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/background-fetching-indicators.md
@@ -0,0 +1,6 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/caching.md b/mintlify/query/framework/preact/guides/caching.md
new file mode 100644
index 000000000..ef1a823fc
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/caching.md
@@ -0,0 +1,6 @@
+---
+id: caching
+title: Caching Examples
+ref: docs/framework/react/guides/caching.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/default-query-function.md b/mintlify/query/framework/preact/guides/default-query-function.md
new file mode 100644
index 000000000..faab2276d
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/default-query-function.md
@@ -0,0 +1,6 @@
+---
+id: default-query-function
+title: Default Query Function
+ref: docs/framework/react/guides/default-query-function.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/dependent-queries.md b/mintlify/query/framework/preact/guides/dependent-queries.md
new file mode 100644
index 000000000..f9827399d
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/dependent-queries.md
@@ -0,0 +1,6 @@
+---
+id: dependent-queries
+title: Dependent Queries
+ref: docs/framework/react/guides/dependent-queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/disabling-queries.md b/mintlify/query/framework/preact/guides/disabling-queries.md
new file mode 100644
index 000000000..6505b9e1d
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/disabling-queries.md
@@ -0,0 +1,56 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+ref: docs/framework/react/guides/disabling-queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Example2'
+
+```tsx
+function Todos() {
+  const [filter, setFilter] = useState('')
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    queryFn: () => fetchTodos(filter),
+    // ⬇️ disabled as long as the filter is empty
+    enabled: !!filter,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+import { skipToken, useQuery } from '@tanstack/preact-query'
+
+function Todos() {
+  const [filter, setFilter] = useState<string | undefined>()
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    // ⬇️ disabled as long as the filter is undefined or empty
+    queryFn: filter ? () => fetchTodos(filter) : skipToken,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/preact/guides/does-this-replace-client-state.md b/mintlify/query/framework/preact/guides/does-this-replace-client-state.md
new file mode 100644
index 000000000..6e52ad643
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/does-this-replace-client-state.md
@@ -0,0 +1,6 @@
+---
+id: does-this-replace-client-state
+title: Does TanStack Query replace Redux, MobX or other global state managers?
+ref: docs/framework/react/guides/does-this-replace-client-state.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/filters.md b/mintlify/query/framework/preact/guides/filters.md
new file mode 100644
index 000000000..72464c34b
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/filters.md
@@ -0,0 +1,6 @@
+---
+id: filters
+title: Filters
+ref: docs/framework/react/guides/filters.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/important-defaults.md b/mintlify/query/framework/preact/guides/important-defaults.md
new file mode 100644
index 000000000..9c5d6a2fb
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/important-defaults.md
@@ -0,0 +1,6 @@
+---
+id: important-defaults
+title: Important Defaults
+ref: docs/framework/react/guides/important-defaults.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/infinite-queries.md b/mintlify/query/framework/preact/guides/infinite-queries.md
new file mode 100644
index 000000000..77a6f6934
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/infinite-queries.md
@@ -0,0 +1,65 @@
+---
+id: infinite-queries
+title: Infinite Queries
+ref: docs/framework/react/guides/infinite-queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Example'
+
+```tsx
+import { useInfiniteQuery } from '@tanstack/preact-query'
+
+function Projects() {
+  const fetchProjects = async ({ pageParam }) => {
+    const res = await fetch('/api/projects?cursor=' + pageParam)
+    return res.json()
+  }
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    status,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  })
+
+  return status === 'pending' ? (
+    <p>Loading...</p>
+  ) : status === 'error' ? (
+    <p>Error: {error.message}</p>
+  ) : (
+    <>
+      {data.pages.map((group, i) => (
+        <div key={i}>
+          {group.data.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        </div>
+      ))}
+      <div>
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={!hasNextPage || isFetching}
+        >
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
+        </button>
+      </div>
+      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
+    </>
+  )
+}
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/preact/guides/initial-query-data.md b/mintlify/query/framework/preact/guides/initial-query-data.md
new file mode 100644
index 000000000..9dd429b9a
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/initial-query-data.md
@@ -0,0 +1,6 @@
+---
+id: initial-query-data
+title: Initial Query Data
+ref: docs/framework/react/guides/initial-query-data.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/invalidations-from-mutations.md b/mintlify/query/framework/preact/guides/invalidations-from-mutations.md
new file mode 100644
index 000000000..859b21b1c
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/invalidations-from-mutations.md
@@ -0,0 +1,6 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+ref: docs/framework/react/guides/invalidations-from-mutations.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/mutations.md b/mintlify/query/framework/preact/guides/mutations.md
new file mode 100644
index 000000000..d0e9a6082
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/mutations.md
@@ -0,0 +1,11 @@
+---
+id: mutations
+title: Mutations
+ref: docs/framework/react/guides/mutations.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Info1'
+[//]: # 'Info1'
+[//]: # 'Example2'
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/preact/guides/network-mode.md b/mintlify/query/framework/preact/guides/network-mode.md
new file mode 100644
index 000000000..ebbde82cf
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/network-mode.md
@@ -0,0 +1,6 @@
+---
+id: network-mode
+title: Network Mode
+ref: docs/framework/react/guides/network-mode.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/optimistic-updates.md b/mintlify/query/framework/preact/guides/optimistic-updates.md
new file mode 100644
index 000000000..23bd61b19
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/optimistic-updates.md
@@ -0,0 +1,6 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+ref: docs/framework/react/guides/optimistic-updates.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/paginated-queries.md b/mintlify/query/framework/preact/guides/paginated-queries.md
new file mode 100644
index 000000000..34a446cd6
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/paginated-queries.md
@@ -0,0 +1,64 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+ref: docs/framework/react/guides/paginated-queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Example2'
+
+```tsx
+import { keepPreviousData, useQuery } from '@tanstack/preact-query'
+import { useState } from 'preact/hooks'
+
+function Todos() {
+  const [page, setPage] = useState(0)
+
+  const fetchProjects = (page = 0) =>
+    fetch('/api/projects?page=' + page).then((res) => res.json())
+
+  const { isPending, isError, error, data, isFetching, isPlaceholderData } =
+    useQuery({
+      queryKey: ['projects', page],
+      queryFn: () => fetchProjects(page),
+      placeholderData: keepPreviousData,
+    })
+
+  return (
+    <div>
+      {isPending ? (
+        <div>Loading...</div>
+      ) : isError ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        <div>
+          {data.projects.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        </div>
+      )}
+      <span>Current Page: {page + 1}</span>
+      <button
+        onClick={() => setPage((old) => Math.max(old - 1, 0))}
+        disabled={page === 0}
+      >
+        Previous Page
+      </button>
+      <button
+        onClick={() => {
+          if (!isPlaceholderData && data.hasMore) {
+            setPage((old) => old + 1)
+          }
+        }}
+        // Disable the Next Page button until we know a next page is available
+        disabled={isPlaceholderData || !data?.hasMore}
+      >
+        Next Page
+      </button>
+      {isFetching ? <span> Loading...</span> : null}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/preact/guides/parallel-queries.md b/mintlify/query/framework/preact/guides/parallel-queries.md
new file mode 100644
index 000000000..d4a768e5e
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/parallel-queries.md
@@ -0,0 +1,12 @@
+---
+id: parallel-queries
+title: Parallel Queries
+ref: docs/framework/react/guides/parallel-queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Info'
+
+> When using Preact Query with compat's Suspense, this pattern of parallelism does not work, since the first query would throw a promise internally and would suspend the component before the other queries run. To get around this, you'll either need to use the `useSuspenseQueries` hook (which is suggested) or orchestrate your own parallelism with separate components for each `useSuspenseQuery` instance.
+
+[//]: # 'Info'
diff --git a/mintlify/query/framework/preact/guides/placeholder-query-data.md b/mintlify/query/framework/preact/guides/placeholder-query-data.md
new file mode 100644
index 000000000..8c2bb39ae
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/placeholder-query-data.md
@@ -0,0 +1,6 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+ref: docs/framework/react/guides/placeholder-query-data.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/polling.md b/mintlify/query/framework/preact/guides/polling.md
new file mode 100644
index 000000000..1421f4c30
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/polling.md
@@ -0,0 +1,6 @@
+---
+id: polling
+title: Polling
+ref: docs/framework/react/guides/polling.md
+replace: { '@tanstack/react-query': '@tanstack/preact-query' }
+---
diff --git a/mintlify/query/framework/preact/guides/prefetching.md b/mintlify/query/framework/preact/guides/prefetching.md
new file mode 100644
index 000000000..7d62f0648
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/prefetching.md
@@ -0,0 +1,51 @@
+---
+id: prefetching
+title: Prefetching & Router Integration
+ref: docs/framework/react/guides/prefetching.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'ExampleConditionally1'
+
+```tsx
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+import { lazy } from 'preact/iso'
+
+const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally1'
diff --git a/mintlify/query/framework/preact/guides/queries.md b/mintlify/query/framework/preact/guides/queries.md
new file mode 100644
index 000000000..02914f498
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/queries.md
@@ -0,0 +1,6 @@
+---
+id: queries
+title: Queries
+ref: docs/framework/react/guides/queries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-cancellation.md b/mintlify/query/framework/preact/guides/query-cancellation.md
new file mode 100644
index 000000000..c3e8c65ef
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-cancellation.md
@@ -0,0 +1,6 @@
+---
+id: query-cancellation
+title: Query Cancellation
+ref: docs/framework/react/guides/query-cancellation.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-functions.md b/mintlify/query/framework/preact/guides/query-functions.md
new file mode 100644
index 000000000..fb05c5f96
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-functions.md
@@ -0,0 +1,6 @@
+---
+id: query-functions
+title: Query Functions
+ref: docs/framework/react/guides/query-functions.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-invalidation.md b/mintlify/query/framework/preact/guides/query-invalidation.md
new file mode 100644
index 000000000..e9ecb5e8d
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-invalidation.md
@@ -0,0 +1,6 @@
+---
+id: query-invalidation
+title: Query Invalidation
+ref: docs/framework/react/guides/query-invalidation.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-keys.md b/mintlify/query/framework/preact/guides/query-keys.md
new file mode 100644
index 000000000..e0b64d62b
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-keys.md
@@ -0,0 +1,6 @@
+---
+id: query-keys
+title: Query Keys
+ref: docs/framework/react/guides/query-keys.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-options.md b/mintlify/query/framework/preact/guides/query-options.md
new file mode 100644
index 000000000..e640be7a6
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-options.md
@@ -0,0 +1,6 @@
+---
+id: query-options
+title: Query Options
+ref: docs/framework/react/guides/query-options.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/query-retries.md b/mintlify/query/framework/preact/guides/query-retries.md
new file mode 100644
index 000000000..6a8410c10
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/query-retries.md
@@ -0,0 +1,6 @@
+---
+id: query-retries
+title: Query Retries
+ref: docs/framework/react/guides/query-retries.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/render-optimizations.md b/mintlify/query/framework/preact/guides/render-optimizations.md
new file mode 100644
index 000000000..dcc6e0864
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/render-optimizations.md
@@ -0,0 +1,6 @@
+---
+id: render-optimizations
+title: Render Optimizations
+ref: docs/framework/react/guides/render-optimizations.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/guides/request-waterfalls.md b/mintlify/query/framework/preact/guides/request-waterfalls.md
new file mode 100644
index 000000000..ebca0caf1
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/request-waterfalls.md
@@ -0,0 +1,50 @@
+---
+id: request-waterfalls
+title: Performance & Request Waterfalls
+ref: docs/framework/react/guides/request-waterfalls.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'LazyExample'
+
+```tsx
+import { lazy } from 'preact/iso'
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'LazyExample'
diff --git a/mintlify/query/framework/preact/guides/scroll-restoration.md b/mintlify/query/framework/preact/guides/scroll-restoration.md
new file mode 100644
index 000000000..cb66c4b46
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/scroll-restoration.md
@@ -0,0 +1,5 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+ref: docs/framework/react/guides/scroll-restoration.md
+---
diff --git a/mintlify/query/framework/preact/guides/updates-from-mutation-responses.md b/mintlify/query/framework/preact/guides/updates-from-mutation-responses.md
new file mode 100644
index 000000000..c41819be9
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/updates-from-mutation-responses.md
@@ -0,0 +1,5 @@
+---
+id: updates-from-mutation-responses
+title: Updates from Mutation Responses
+ref: docs/framework/react/guides/updates-from-mutation-responses.md
+---
diff --git a/mintlify/query/framework/preact/guides/window-focus-refetching.md b/mintlify/query/framework/preact/guides/window-focus-refetching.md
new file mode 100644
index 000000000..852a92363
--- /dev/null
+++ b/mintlify/query/framework/preact/guides/window-focus-refetching.md
@@ -0,0 +1,9 @@
+---
+id: window-focus-refetching
+title: Window Focus Refetching
+ref: docs/framework/react/guides/window-focus-refetching.md
+replace: { 'react-query': 'preact-query' }
+---
+
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/preact/installation.md b/mintlify/query/framework/preact/installation.md
new file mode 100644
index 000000000..00ecd695e
--- /dev/null
+++ b/mintlify/query/framework/preact/installation.md
@@ -0,0 +1,22 @@
+---
+id: installation
+title: Installation
+ref: docs/framework/react/installation.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Compatibility'
+
+> Wanna give it a spin before you download? Try out the [simple](/query/framework/preact/examples/simple) example
+
+[//]: # 'Compatibility'
+[//]: # 'CDNExample'
+
+```html
+<script type="module">
+  import { render } from 'https://esm.sh/preact@10.23.1'
+  import { QueryClient } from 'https://esm.sh/@tanstack/preact-query'
+</script>
+```
+
+[//]: # 'CDNExample'
diff --git a/mintlify/query/framework/preact/overview.md b/mintlify/query/framework/preact/overview.md
new file mode 100644
index 000000000..6b2c974ba
--- /dev/null
+++ b/mintlify/query/framework/preact/overview.md
@@ -0,0 +1,6 @@
+---
+id: overview
+title: Overview
+ref: docs/framework/react/overview.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/plugins/broadcastQueryClient.md b/mintlify/query/framework/preact/plugins/broadcastQueryClient.md
new file mode 100644
index 000000000..32cb1e50c
--- /dev/null
+++ b/mintlify/query/framework/preact/plugins/broadcastQueryClient.md
@@ -0,0 +1,5 @@
+---
+id: broadcastQueryClient
+title: broadcastQueryClient (Experimental)
+ref: docs/framework/react/plugins/broadcastQueryClient.md
+---
diff --git a/mintlify/query/framework/preact/plugins/createAsyncStoragePersister.md b/mintlify/query/framework/preact/plugins/createAsyncStoragePersister.md
new file mode 100644
index 000000000..eee013691
--- /dev/null
+++ b/mintlify/query/framework/preact/plugins/createAsyncStoragePersister.md
@@ -0,0 +1,6 @@
+---
+id: createAsyncStoragePersister
+title: createAsyncStoragePersister
+ref: docs/framework/react/plugins/createAsyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---
diff --git a/mintlify/query/framework/preact/plugins/createPersister.md b/mintlify/query/framework/preact/plugins/createPersister.md
new file mode 100644
index 000000000..890f3cc5d
--- /dev/null
+++ b/mintlify/query/framework/preact/plugins/createPersister.md
@@ -0,0 +1,6 @@
+---
+id: createPersister
+title: experimental_createPersister
+ref: docs/framework/react/plugins/createPersister.md
+replace: { 'react-query': 'preact-query' }
+---
diff --git a/mintlify/query/framework/preact/plugins/createSyncStoragePersister.md b/mintlify/query/framework/preact/plugins/createSyncStoragePersister.md
new file mode 100644
index 000000000..087210dcd
--- /dev/null
+++ b/mintlify/query/framework/preact/plugins/createSyncStoragePersister.md
@@ -0,0 +1,6 @@
+---
+id: createSyncStoragePersister
+title: createSyncStoragePersister
+ref: docs/framework/react/plugins/createSyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---
diff --git a/mintlify/query/framework/preact/plugins/persistQueryClient.md b/mintlify/query/framework/preact/plugins/persistQueryClient.md
new file mode 100644
index 000000000..fc0d1b806
--- /dev/null
+++ b/mintlify/query/framework/preact/plugins/persistQueryClient.md
@@ -0,0 +1,6 @@
+---
+id: persistQueryClient
+title: persistQueryClient
+ref: docs/framework/react/plugins/persistQueryClient.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/quick-start.md b/mintlify/query/framework/preact/quick-start.md
new file mode 100644
index 000000000..169e517b4
--- /dev/null
+++ b/mintlify/query/framework/preact/quick-start.md
@@ -0,0 +1,6 @@
+---
+id: quick-start
+title: Quick Start
+ref: docs/framework/react/quick-start.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/preact/reference/functions/HydrationBoundary.md b/mintlify/query/framework/preact/reference/functions/HydrationBoundary.md
new file mode 100644
index 000000000..0ae7257e5
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/HydrationBoundary.md
@@ -0,0 +1,22 @@
+---
+id: HydrationBoundary
+title: HydrationBoundary
+---
+
+# Function: HydrationBoundary()
+
+```ts
+function HydrationBoundary(__namedParameters): ComponentChildren;
+```
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:24](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L24)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`HydrationBoundaryProps`](/query/framework/preact/reference/interfaces/HydrationBoundaryProps)
+
+## Returns
+
+`ComponentChildren`
diff --git a/mintlify/query/framework/preact/reference/functions/QueryClientProvider.md b/mintlify/query/framework/preact/reference/functions/QueryClientProvider.md
new file mode 100644
index 000000000..6a6d8cddd
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/QueryClientProvider.md
@@ -0,0 +1,22 @@
+---
+id: QueryClientProvider
+title: QueryClientProvider
+---
+
+# Function: QueryClientProvider()
+
+```ts
+function QueryClientProvider(__namedParameters): VNode;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:28](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L28)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`QueryClientProviderProps`](/query/framework/preact/reference/type-aliases/QueryClientProviderProps)
+
+## Returns
+
+`VNode`
diff --git a/mintlify/query/framework/preact/reference/functions/QueryErrorResetBoundary.md b/mintlify/query/framework/preact/reference/functions/QueryErrorResetBoundary.md
new file mode 100644
index 000000000..60ce15593
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/QueryErrorResetBoundary.md
@@ -0,0 +1,22 @@
+---
+id: QueryErrorResetBoundary
+title: QueryErrorResetBoundary
+---
+
+# Function: QueryErrorResetBoundary()
+
+```ts
+function QueryErrorResetBoundary(__namedParameters): Element;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:47](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L47)
+
+## Parameters
+
+### \_\_namedParameters
+
+[`QueryErrorResetBoundaryProps`](/query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps)
+
+## Returns
+
+`Element`
diff --git a/mintlify/query/framework/preact/reference/functions/infiniteQueryOptions.md b/mintlify/query/framework/preact/reference/functions/infiniteQueryOptions.md
new file mode 100644
index 000000000..926eabb96
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/infiniteQueryOptions.md
@@ -0,0 +1,126 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+---
+
+# Function: infiniteQueryOptions()
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:75](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L75)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataInfiniteOptions`](/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+### Returns
+
+[`UseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:99](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L99)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UnusedSkipTokenInfiniteOptions`](/query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+### Returns
+
+`OmitKeyof`\&lt;[`UseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"`\> & `object` & `object`
+
+## Call Signature
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:123](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L123)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataInfiniteOptions`](/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+### Returns
+
+[`UseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
diff --git a/mintlify/query/framework/preact/reference/functions/mutationOptions.md b/mintlify/query/framework/preact/reference/functions/mutationOptions.md
new file mode 100644
index 000000000..38a71460b
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/mutationOptions.md
@@ -0,0 +1,78 @@
+---
+id: mutationOptions
+title: mutationOptions
+---
+
+# Function: mutationOptions()
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
+```
+
+Defined in: [preact-query/src/mutationOptions.ts:4](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/mutationOptions.ts#L4)
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`WithRequired`\&lt;[`UseMutationOptions`](/query/framework/preact/reference/interfaces/UseMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+### Returns
+
+`WithRequired`\&lt;[`UseMutationOptions`](/query/framework/preact/reference/interfaces/UseMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): Omit<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
+```
+
+Defined in: [preact-query/src/mutationOptions.ts:18](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/mutationOptions.ts#L18)
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`UseMutationOptions`](/query/framework/preact/reference/interfaces/UseMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
+
+### Returns
+
+`Omit`\&lt;[`UseMutationOptions`](/query/framework/preact/reference/interfaces/UseMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
diff --git a/mintlify/query/framework/preact/reference/functions/queryOptions.md b/mintlify/query/framework/preact/reference/functions/queryOptions.md
new file mode 100644
index 000000000..8661a0770
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/queryOptions.md
@@ -0,0 +1,114 @@
+---
+id: queryOptions
+title: queryOptions
+---
+
+# Function: queryOptions()
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:52](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L52)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataOptions`](/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### Returns
+
+`Omit`\&lt;[`UseQueryOptions`](/query/framework/preact/reference/interfaces/UseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object`
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:63](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L63)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UnusedSkipTokenOptions`](/query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### Returns
+
+`OmitKeyof`\&lt;[`UseQueryOptions`](/query/framework/preact/reference/interfaces/UseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object`
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:74](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L74)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataOptions`](/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### Returns
+
+[`UseQueryOptions`](/query/framework/preact/reference/interfaces/UseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object`
diff --git a/mintlify/query/framework/preact/reference/functions/useInfiniteQuery.md b/mintlify/query/framework/preact/reference/functions/useInfiniteQuery.md
new file mode 100644
index 000000000..71944dc70
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useInfiniteQuery.md
@@ -0,0 +1,138 @@
+---
+id: useInfiniteQuery
+title: useInfiniteQuery
+---
+
+# Function: useInfiniteQuery()
+
+## Call Signature
+
+```ts
+function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): DefinedUseInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/useInfiniteQuery.ts:20](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L20)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataInfiniteOptions`](/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`DefinedUseInfiniteQueryResult`](/query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult)\&lt;`TData`, `TError`\>
+
+## Call Signature
+
+```ts
+function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/useInfiniteQuery.ts:37](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L37)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataInfiniteOptions`](/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`UseInfiniteQueryResult`](/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult)\&lt;`TData`, `TError`\>
+
+## Call Signature
+
+```ts
+function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/useInfiniteQuery.ts:54](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L54)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+#### TPageParam
+
+`TPageParam` = `unknown`
+
+### Parameters
+
+#### options
+
+[`UseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`UseInfiniteQueryResult`](/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult)\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/preact/reference/functions/useIsFetching.md b/mintlify/query/framework/preact/reference/functions/useIsFetching.md
new file mode 100644
index 000000000..5bcfa0116
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useIsFetching.md
@@ -0,0 +1,26 @@
+---
+id: useIsFetching
+title: useIsFetching
+---
+
+# Function: useIsFetching()
+
+```ts
+function useIsFetching(filters?, queryClient?): number;
+```
+
+Defined in: [preact-query/src/useIsFetching.ts:8](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useIsFetching.ts#L8)
+
+## Parameters
+
+### filters?
+
+`QueryFilters`\&lt;readonly `unknown`[]\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`number`
diff --git a/mintlify/query/framework/preact/reference/functions/useIsMutating.md b/mintlify/query/framework/preact/reference/functions/useIsMutating.md
new file mode 100644
index 000000000..a6ba90fd0
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useIsMutating.md
@@ -0,0 +1,26 @@
+---
+id: useIsMutating
+title: useIsMutating
+---
+
+# Function: useIsMutating()
+
+```ts
+function useIsMutating(filters?, queryClient?): number;
+```
+
+Defined in: [preact-query/src/useMutationState.ts:13](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useMutationState.ts#L13)
+
+## Parameters
+
+### filters?
+
+`MutationFilters`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`number`
diff --git a/mintlify/query/framework/preact/reference/functions/useIsRestoring.md b/mintlify/query/framework/preact/reference/functions/useIsRestoring.md
new file mode 100644
index 000000000..ade5658b1
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useIsRestoring.md
@@ -0,0 +1,16 @@
+---
+id: useIsRestoring
+title: useIsRestoring
+---
+
+# Function: useIsRestoring()
+
+```ts
+function useIsRestoring(): boolean;
+```
+
+Defined in: [preact-query/src/IsRestoringProvider.ts:6](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/IsRestoringProvider.ts#L6)
+
+## Returns
+
+`boolean`
diff --git a/mintlify/query/framework/preact/reference/functions/useMutation.md b/mintlify/query/framework/preact/reference/functions/useMutation.md
new file mode 100644
index 000000000..62c13ede5
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useMutation.md
@@ -0,0 +1,44 @@
+---
+id: useMutation
+title: useMutation
+---
+
+# Function: useMutation()
+
+```ts
+function useMutation<TData, TError, TVariables, TOnMutateResult>(options, queryClient?): UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [preact-query/src/useMutation.ts:19](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useMutation.ts#L19)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### options
+
+[`UseMutationOptions`](/query/framework/preact/reference/interfaces/UseMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+[`UseMutationResult`](/query/framework/preact/reference/type-aliases/UseMutationResult)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
diff --git a/mintlify/query/framework/preact/reference/functions/useMutationState.md b/mintlify/query/framework/preact/reference/functions/useMutationState.md
new file mode 100644
index 000000000..48fce00d9
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useMutationState.md
@@ -0,0 +1,32 @@
+---
+id: useMutationState
+title: useMutationState
+---
+
+# Function: useMutationState()
+
+```ts
+function useMutationState<TResult>(options, queryClient?): TResult[];
+```
+
+Defined in: [preact-query/src/useMutationState.ts:41](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useMutationState.ts#L41)
+
+## Type Parameters
+
+### TResult
+
+`TResult` = `MutationState`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+## Parameters
+
+### options
+
+`MutationStateOptions`\&lt;`TResult`\> = `{}`
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`TResult`[]
diff --git a/mintlify/query/framework/preact/reference/functions/usePrefetchInfiniteQuery.md b/mintlify/query/framework/preact/reference/functions/usePrefetchInfiniteQuery.md
new file mode 100644
index 000000000..afe3e4a47
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/usePrefetchInfiniteQuery.md
@@ -0,0 +1,48 @@
+---
+id: usePrefetchInfiniteQuery
+title: usePrefetchInfiniteQuery
+---
+
+# Function: usePrefetchInfiniteQuery()
+
+```ts
+function usePrefetchInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): void;
+```
+
+Defined in: [preact-query/src/usePrefetchInfiniteQuery.tsx:9](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/usePrefetchInfiniteQuery.tsx#L9)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### options
+
+`FetchInfiniteQueryOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/preact/reference/functions/usePrefetchQuery.md b/mintlify/query/framework/preact/reference/functions/usePrefetchQuery.md
new file mode 100644
index 000000000..918c7d1af
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/usePrefetchQuery.md
@@ -0,0 +1,44 @@
+---
+id: usePrefetchQuery
+title: usePrefetchQuery
+---
+
+# Function: usePrefetchQuery()
+
+```ts
+function usePrefetchQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): void;
+```
+
+Defined in: [preact-query/src/usePrefetchQuery.tsx:5](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/usePrefetchQuery.tsx#L5)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+## Parameters
+
+### options
+
+[`UsePrefetchQueryOptions`](/query/framework/preact/reference/interfaces/UsePrefetchQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/preact/reference/functions/useQueries.md b/mintlify/query/framework/preact/reference/functions/useQueries.md
new file mode 100644
index 000000000..6235fbc54
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useQueries.md
@@ -0,0 +1,47 @@
+---
+id: useQueries
+title: useQueries
+---
+
+# Function: useQueries()
+
+```ts
+function useQueries<T, TCombinedResult>(__namedParameters, queryClient?): TCombinedResult;
+```
+
+Defined in: [preact-query/src/useQueries.ts:207](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQueries.ts#L207)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TCombinedResult
+
+`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseQueryResult`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseQueryResult`\&lt;`Head`\>, `GetUseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseQueryResult`\&lt;`Head`\>, `GetUseQueryResult`\&lt;`Head`\>, `GetUseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\&#123; \[K in string \| number \| symbol\]: GetUseQueryResult\&lt;Tails\[K\&lt;(...)\>\]\> \&#125;\[\]\] : \&#123; \[K in string \| number \| symbol\]: GetUseQueryResult\&lt;T\[K\&lt;K\>\]\> \&#125;
+
+## Parameters
+
+### \_\_namedParameters
+
+#### combine?
+
+(`result`) => `TCombinedResult`
+
+#### queries
+
+  \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseQueryOptionsForUseQueries`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseQueryOptionsForUseQueries`\&lt;`Head`\>, `GetUseQueryOptionsForUseQueries`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : readonly ...[] *extends* \[`...(...)[]`\] ? \[`...(...)[]`\] : ... *extends* ... ? ... : ... : readonly `unknown`[] *extends* `T` ? `T` : `T` *extends* `UseQueryOptionsForUseQueries`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] ? `UseQueryOptionsForUseQueries`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] : `UseQueryOptionsForUseQueries`\&lt;`unknown`, `Error`, `unknown`, readonly ...[]\>[]\]
+  \| readonly \[\&#123; \[K in string \| number \| symbol\]: GetUseQueryOptionsForUseQueries\&lt;T\[K\&lt;K\>\]\> \&#125;\]
+
+#### subscribed?
+
+`boolean`
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`TCombinedResult`
diff --git a/mintlify/query/framework/preact/reference/functions/useQuery.md b/mintlify/query/framework/preact/reference/functions/useQuery.md
new file mode 100644
index 000000000..721e72215
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useQuery.md
@@ -0,0 +1,126 @@
+---
+id: useQuery
+title: useQuery
+---
+
+# Function: useQuery()
+
+## Call Signature
+
+```ts
+function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): DefinedUseQueryResult<NoInfer<TData>, TError>;
+```
+
+Defined in: [preact-query/src/useQuery.ts:19](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQuery.ts#L19)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataOptions`](/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`DefinedUseQueryResult`](/query/framework/preact/reference/type-aliases/DefinedUseQueryResult)\&lt;`NoInfer`\&lt;`TData`\>, `TError`\>
+
+## Call Signature
+
+```ts
+function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryResult<NoInfer<TData>, TError>;
+```
+
+Defined in: [preact-query/src/useQuery.ts:29](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQuery.ts#L29)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataOptions`](/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`UseQueryResult`](/query/framework/preact/reference/type-aliases/UseQueryResult)\&lt;`NoInfer`\&lt;`TData`\>, `TError`\>
+
+## Call Signature
+
+```ts
+function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryResult<NoInfer<TData>, TError>;
+```
+
+Defined in: [preact-query/src/useQuery.ts:39](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQuery.ts#L39)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UseQueryOptions`](/query/framework/preact/reference/interfaces/UseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+[`UseQueryResult`](/query/framework/preact/reference/type-aliases/UseQueryResult)\&lt;`NoInfer`\&lt;`TData`\>, `TError`\>
diff --git a/mintlify/query/framework/preact/reference/functions/useQueryClient.md b/mintlify/query/framework/preact/reference/functions/useQueryClient.md
new file mode 100644
index 000000000..ecb5fa251
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useQueryClient.md
@@ -0,0 +1,22 @@
+---
+id: useQueryClient
+title: useQueryClient
+---
+
+# Function: useQueryClient()
+
+```ts
+function useQueryClient(queryClient?): QueryClient;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:9](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L9)
+
+## Parameters
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`QueryClient`
diff --git a/mintlify/query/framework/preact/reference/functions/useQueryErrorResetBoundary.md b/mintlify/query/framework/preact/reference/functions/useQueryErrorResetBoundary.md
new file mode 100644
index 000000000..560c1f869
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useQueryErrorResetBoundary.md
@@ -0,0 +1,16 @@
+---
+id: useQueryErrorResetBoundary
+title: useQueryErrorResetBoundary
+---
+
+# Function: useQueryErrorResetBoundary()
+
+```ts
+function useQueryErrorResetBoundary(): QueryErrorResetBoundaryValue;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:34](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L34)
+
+## Returns
+
+`QueryErrorResetBoundaryValue`
diff --git a/mintlify/query/framework/preact/reference/functions/useSuspenseInfiniteQuery.md b/mintlify/query/framework/preact/reference/functions/useSuspenseInfiniteQuery.md
new file mode 100644
index 000000000..c4ab8ebe9
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useSuspenseInfiniteQuery.md
@@ -0,0 +1,48 @@
+---
+id: useSuspenseInfiniteQuery
+title: useSuspenseInfiniteQuery
+---
+
+# Function: useSuspenseInfiniteQuery()
+
+```ts
+function useSuspenseInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseSuspenseInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/useSuspenseInfiniteQuery.ts:17](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseInfiniteQuery.ts#L17)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### options
+
+[`UseSuspenseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+[`UseSuspenseInfiniteQueryResult`](/query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult)\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/preact/reference/functions/useSuspenseQueries.md b/mintlify/query/framework/preact/reference/functions/useSuspenseQueries.md
new file mode 100644
index 000000000..9cd3ec404
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useSuspenseQueries.md
@@ -0,0 +1,83 @@
+---
+id: useSuspenseQueries
+title: useSuspenseQueries
+---
+
+# Function: useSuspenseQueries()
+
+## Call Signature
+
+```ts
+function useSuspenseQueries<T, TCombinedResult>(options, queryClient?): TCombinedResult;
+```
+
+Defined in: [preact-query/src/useSuspenseQueries.ts:164](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseQueries.ts#L164)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `any`[]
+
+#### TCombinedResult
+
+`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\&#123; \[K in string \| number \| symbol\]: GetUseSuspenseQueryResult\&lt;Tails\[K\&lt;(...)\>\]\> \&#125;\[\]\] : \&#123; \[K in string \| number \| symbol\]: GetUseSuspenseQueryResult\&lt;T\[K\&lt;K\>\]\> \&#125;
+
+### Parameters
+
+#### options
+
+##### combine?
+
+(`result`) => `TCombinedResult`
+
+##### queries
+
+  \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseSuspenseQueryOptions`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryOptions`\&lt;`Head`\>, `GetUseSuspenseQueryOptions`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : ...[] *extends* \[`...(...)[]`\] ? \[`...(...)[]`\] : ... *extends* ... ? ... : ... : `unknown`[] *extends* `T` ? `T` : `T` *extends* [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] ? [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] : [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`unknown`, `Error`, `unknown`, readonly ...[]\>[]\]
+  \| readonly \[\&#123; \[K in string \| number \| symbol\]: GetUseSuspenseQueryOptions\&lt;T\[K\&lt;K\>\]\> \&#125;\]
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+`TCombinedResult`
+
+## Call Signature
+
+```ts
+function useSuspenseQueries<T, TCombinedResult>(options, queryClient?): TCombinedResult;
+```
+
+Defined in: [preact-query/src/useSuspenseQueries.ts:177](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseQueries.ts#L177)
+
+### Type Parameters
+
+#### T
+
+`T` *extends* `any`[]
+
+#### TCombinedResult
+
+`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>, `GetUseSuspenseQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\&#123; \[K in string \| number \| symbol\]: GetUseSuspenseQueryResult\&lt;Tails\[K\&lt;(...)\>\]\> \&#125;\[\]\] : \&#123; \[K in string \| number \| symbol\]: GetUseSuspenseQueryResult\&lt;T\[K\&lt;K\>\]\> \&#125;
+
+### Parameters
+
+#### options
+
+##### combine?
+
+(`result`) => `TCombinedResult`
+
+##### queries
+
+readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseSuspenseQueryOptions`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseSuspenseQueryOptions`\&lt;`Head`\>, `GetUseSuspenseQueryOptions`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...(...)[]`\] *extends* \[...\] ? \[..., ..., ...\] : ... *extends* ... ? ... : ... : `unknown`[] *extends* \[`...Tails[]`\] ? \[`...Tails[]`\] : \[`...(...)[]`\] *extends* ...[] ? ...[] : ...[] : `unknown`[] *extends* `T` ? `T` : `T` *extends* [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] ? [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] : [`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]\]
+
+#### queryClient?
+
+`QueryClient`
+
+### Returns
+
+`TCombinedResult`
diff --git a/mintlify/query/framework/preact/reference/functions/useSuspenseQuery.md b/mintlify/query/framework/preact/reference/functions/useSuspenseQuery.md
new file mode 100644
index 000000000..5a4140900
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/functions/useSuspenseQuery.md
@@ -0,0 +1,44 @@
+---
+id: useSuspenseQuery
+title: useSuspenseQuery
+---
+
+# Function: useSuspenseQuery()
+
+```ts
+function useSuspenseQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseSuspenseQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/useSuspenseQuery.ts:7](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseQuery.ts#L7)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+## Parameters
+
+### options
+
+[`UseSuspenseQueryOptions`](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+[`UseSuspenseQueryResult`](/query/framework/preact/reference/type-aliases/UseSuspenseQueryResult)\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/preact/reference/index.md b/mintlify/query/framework/preact/reference/index.md
new file mode 100644
index 000000000..ba2025fc3
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/index.md
@@ -0,0 +1,82 @@
+---
+id: "@tanstack/preact-query"
+title: "@tanstack/preact-query"
+---
+
+# @tanstack/preact-query
+
+## Interfaces
+
+- [HydrationBoundaryProps](/query/framework/preact/reference/interfaces/HydrationBoundaryProps)
+- [QueryErrorResetBoundaryProps](/query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps)
+- [UseBaseQueryOptions](/query/framework/preact/reference/interfaces/UseBaseQueryOptions)
+- [UseInfiniteQueryOptions](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)
+- [UseMutationOptions](/query/framework/preact/reference/interfaces/UseMutationOptions)
+- [UsePrefetchQueryOptions](/query/framework/preact/reference/interfaces/UsePrefetchQueryOptions)
+- [UseQueryOptions](/query/framework/preact/reference/interfaces/UseQueryOptions)
+- [UseSuspenseInfiniteQueryOptions](/query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions)
+- [UseSuspenseQueryOptions](/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions)
+
+## Type Aliases
+
+- [AnyUseBaseQueryOptions](/query/framework/preact/reference/type-aliases/AnyUseBaseQueryOptions)
+- [AnyUseInfiniteQueryOptions](/query/framework/preact/reference/type-aliases/AnyUseInfiniteQueryOptions)
+- [AnyUseMutationOptions](/query/framework/preact/reference/type-aliases/AnyUseMutationOptions)
+- [AnyUseQueryOptions](/query/framework/preact/reference/type-aliases/AnyUseQueryOptions)
+- [AnyUseSuspenseInfiniteQueryOptions](/query/framework/preact/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions)
+- [AnyUseSuspenseQueryOptions](/query/framework/preact/reference/type-aliases/AnyUseSuspenseQueryOptions)
+- [DefinedInitialDataInfiniteOptions](/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions)
+- [DefinedInitialDataOptions](/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions)
+- [DefinedUseInfiniteQueryResult](/query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult)
+- [DefinedUseQueryResult](/query/framework/preact/reference/type-aliases/DefinedUseQueryResult)
+- [QueriesOptions](/query/framework/preact/reference/type-aliases/QueriesOptions)
+- [QueriesResults](/query/framework/preact/reference/type-aliases/QueriesResults)
+- [QueryClientProviderProps](/query/framework/preact/reference/type-aliases/QueryClientProviderProps)
+- [QueryErrorClearResetFunction](/query/framework/preact/reference/type-aliases/QueryErrorClearResetFunction)
+- [QueryErrorIsResetFunction](/query/framework/preact/reference/type-aliases/QueryErrorIsResetFunction)
+- [QueryErrorResetBoundaryFunction](/query/framework/preact/reference/type-aliases/QueryErrorResetBoundaryFunction)
+- [QueryErrorResetFunction](/query/framework/preact/reference/type-aliases/QueryErrorResetFunction)
+- [SuspenseQueriesOptions](/query/framework/preact/reference/type-aliases/SuspenseQueriesOptions)
+- [SuspenseQueriesResults](/query/framework/preact/reference/type-aliases/SuspenseQueriesResults)
+- [UndefinedInitialDataInfiniteOptions](/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions)
+- [UndefinedInitialDataOptions](/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions)
+- [UnusedSkipTokenInfiniteOptions](/query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions)
+- [UnusedSkipTokenOptions](/query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions)
+- [UseBaseMutationResult](/query/framework/preact/reference/type-aliases/UseBaseMutationResult)
+- [UseBaseQueryResult](/query/framework/preact/reference/type-aliases/UseBaseQueryResult)
+- [UseInfiniteQueryResult](/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult)
+- [UseMutateAsyncFunction](/query/framework/preact/reference/type-aliases/UseMutateAsyncFunction)
+- [UseMutateFunction](/query/framework/preact/reference/type-aliases/UseMutateFunction)
+- [UseMutationResult](/query/framework/preact/reference/type-aliases/UseMutationResult)
+- [UseQueryResult](/query/framework/preact/reference/type-aliases/UseQueryResult)
+- [UseSuspenseInfiniteQueryResult](/query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult)
+- [UseSuspenseQueryResult](/query/framework/preact/reference/type-aliases/UseSuspenseQueryResult)
+
+## Variables
+
+- [IsRestoringProvider](/query/framework/preact/reference/variables/IsRestoringProvider)
+- [QueryClientContext](/query/framework/preact/reference/variables/QueryClientContext)
+
+## Functions
+
+- [HydrationBoundary](/query/framework/preact/reference/functions/HydrationBoundary)
+- [infiniteQueryOptions](/query/framework/preact/reference/functions/infiniteQueryOptions)
+- [mutationOptions](/query/framework/preact/reference/functions/mutationOptions)
+- [QueryClientProvider](/query/framework/preact/reference/functions/QueryClientProvider)
+- [QueryErrorResetBoundary](/query/framework/preact/reference/functions/QueryErrorResetBoundary)
+- [queryOptions](/query/framework/preact/reference/functions/queryOptions)
+- [useInfiniteQuery](/query/framework/preact/reference/functions/useInfiniteQuery)
+- [useIsFetching](/query/framework/preact/reference/functions/useIsFetching)
+- [useIsMutating](/query/framework/preact/reference/functions/useIsMutating)
+- [useIsRestoring](/query/framework/preact/reference/functions/useIsRestoring)
+- [useMutation](/query/framework/preact/reference/functions/useMutation)
+- [useMutationState](/query/framework/preact/reference/functions/useMutationState)
+- [usePrefetchInfiniteQuery](/query/framework/preact/reference/functions/usePrefetchInfiniteQuery)
+- [usePrefetchQuery](/query/framework/preact/reference/functions/usePrefetchQuery)
+- [useQueries](/query/framework/preact/reference/functions/useQueries)
+- [useQuery](/query/framework/preact/reference/functions/useQuery)
+- [useQueryClient](/query/framework/preact/reference/functions/useQueryClient)
+- [useQueryErrorResetBoundary](/query/framework/preact/reference/functions/useQueryErrorResetBoundary)
+- [useSuspenseInfiniteQuery](/query/framework/preact/reference/functions/useSuspenseInfiniteQuery)
+- [useSuspenseQueries](/query/framework/preact/reference/functions/useSuspenseQueries)
+- [useSuspenseQuery](/query/framework/preact/reference/functions/useSuspenseQuery)
diff --git a/mintlify/query/framework/preact/reference/interfaces/HydrationBoundaryProps.md b/mintlify/query/framework/preact/reference/interfaces/HydrationBoundaryProps.md
new file mode 100644
index 000000000..96580e800
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/HydrationBoundaryProps.md
@@ -0,0 +1,57 @@
+---
+id: HydrationBoundaryProps
+title: HydrationBoundaryProps
+---
+
+# Interface: HydrationBoundaryProps
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:12](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L12)
+
+## Properties
+
+### children?
+
+```ts
+optional children: ComponentChildren;
+```
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:20](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L20)
+
+***
+
+### options?
+
+```ts
+optional options: OmitKeyof<HydrateOptions, "defaultOptions"> & object;
+```
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:14](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L14)
+
+#### Type Declaration
+
+##### defaultOptions?
+
+```ts
+optional defaultOptions: OmitKeyof<{
+}, "mutations">;
+```
+
+***
+
+### queryClient?
+
+```ts
+optional queryClient: QueryClient;
+```
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:21](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L21)
+
+***
+
+### state
+
+```ts
+state: DehydratedState | null | undefined;
+```
+
+Defined in: [preact-query/src/HydrationBoundary.tsx:13](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L13)
diff --git a/mintlify/query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps.md b/mintlify/query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps.md
new file mode 100644
index 000000000..265a02e2c
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/QueryErrorResetBoundaryProps.md
@@ -0,0 +1,20 @@
+---
+id: QueryErrorResetBoundaryProps
+title: QueryErrorResetBoundaryProps
+---
+
+# Interface: QueryErrorResetBoundaryProps
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:43](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L43)
+
+## Properties
+
+### children
+
+```ts
+children: 
+  | ComponentChildren
+  | QueryErrorResetBoundaryFunction;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:44](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L44)
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseBaseQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseBaseQueryOptions.md
new file mode 100644
index 000000000..31ec83204
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseBaseQueryOptions.md
@@ -0,0 +1,47 @@
+---
+id: UseBaseQueryOptions
+title: UseBaseQueryOptions
+---
+
+# Interface: UseBaseQueryOptions\&lt;TQueryFnData, TError, TData, TQueryData, TQueryKey\>
+
+Defined in: [preact-query/src/types.ts:29](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L29)
+
+## Extends
+
+- `QueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+## Properties
+
+### subscribed?
+
+```ts
+optional subscribed: boolean;
+```
+
+Defined in: [preact-query/src/types.ts:46](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L46)
+
+Set this to `false` to unsubscribe this observer from updates to the query cache.
+Defaults to `true`.
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions.md
new file mode 100644
index 000000000..d8a79b50e
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions.md
@@ -0,0 +1,47 @@
+---
+id: UseInfiniteQueryOptions
+title: UseInfiniteQueryOptions
+---
+
+# Interface: UseInfiniteQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+Defined in: [preact-query/src/types.ts:103](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L103)
+
+## Extends
+
+- `OmitKeyof`\&lt;`InfiniteQueryObserverOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"suspense"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Properties
+
+### subscribed?
+
+```ts
+optional subscribed: boolean;
+```
+
+Defined in: [preact-query/src/types.ts:123](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L123)
+
+Set this to `false` to unsubscribe this observer from updates to the query cache.
+Defaults to `true`.
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseMutationOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseMutationOptions.md
new file mode 100644
index 000000000..3102c67fb
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseMutationOptions.md
@@ -0,0 +1,30 @@
+---
+id: UseMutationOptions
+title: UseMutationOptions
+---
+
+# Interface: UseMutationOptions\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+Defined in: [preact-query/src/types.ts:192](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L192)
+
+## Extends
+
+- `OmitKeyof`\&lt;`MutationObserverOptions`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"_defaulted"`\>
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/interfaces/UsePrefetchQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UsePrefetchQueryOptions.md
new file mode 100644
index 000000000..e1c572438
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UsePrefetchQueryOptions.md
@@ -0,0 +1,40 @@
+---
+id: UsePrefetchQueryOptions
+title: UsePrefetchQueryOptions
+---
+
+# Interface: UsePrefetchQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+Defined in: [preact-query/src/types.ts:49](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L49)
+
+## Extends
+
+- `OmitKeyof`\&lt;`FetchQueryOptions`\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+## Properties
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey, never>;
+```
+
+Defined in: [preact-query/src/types.ts:58](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L58)
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseQueryOptions.md
new file mode 100644
index 000000000..54a5c56ef
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseQueryOptions.md
@@ -0,0 +1,49 @@
+---
+id: UseQueryOptions
+title: UseQueryOptions
+---
+
+# Interface: UseQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+Defined in: [preact-query/src/types.ts:65](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L65)
+
+## Extends
+
+- `OmitKeyof`\&lt;[`UseBaseQueryOptions`](/query/framework/preact/reference/interfaces/UseBaseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+## Properties
+
+### subscribed?
+
+```ts
+optional subscribed: boolean;
+```
+
+Defined in: [preact-query/src/types.ts:46](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L46)
+
+Set this to `false` to unsubscribe this observer from updates to the query cache.
+Defaults to `true`.
+
+#### Inherited from
+
+```ts
+OmitKeyof.subscribed
+```
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions.md
new file mode 100644
index 000000000..bf113fc96
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseSuspenseInfiniteQueryOptions.md
@@ -0,0 +1,63 @@
+---
+id: UseSuspenseInfiniteQueryOptions
+title: UseSuspenseInfiniteQueryOptions
+---
+
+# Interface: UseSuspenseInfiniteQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+Defined in: [preact-query/src/types.ts:128](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L128)
+
+## Extends
+
+- `OmitKeyof`\&lt;[`UseInfiniteQueryOptions`](/query/framework/preact/reference/interfaces/UseInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"` \| `"enabled"` \| `"throwOnError"` \| `"placeholderData"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Properties
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey, TPageParam>;
+```
+
+Defined in: [preact-query/src/types.ts:138](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L138)
+
+***
+
+### subscribed?
+
+```ts
+optional subscribed: boolean;
+```
+
+Defined in: [preact-query/src/types.ts:123](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L123)
+
+Set this to `false` to unsubscribe this observer from updates to the query cache.
+Defaults to `true`.
+
+#### Inherited from
+
+```ts
+OmitKeyof.subscribed
+```
diff --git a/mintlify/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions.md b/mintlify/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions.md
new file mode 100644
index 000000000..0d12c4478
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/interfaces/UseSuspenseQueryOptions.md
@@ -0,0 +1,59 @@
+---
+id: UseSuspenseQueryOptions
+title: UseSuspenseQueryOptions
+---
+
+# Interface: UseSuspenseQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+Defined in: [preact-query/src/types.ts:81](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L81)
+
+## Extends
+
+- `OmitKeyof`\&lt;[`UseQueryOptions`](/query/framework/preact/reference/interfaces/UseQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"` \| `"enabled"` \| `"throwOnError"` \| `"placeholderData"`\>
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+## Properties
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey, never>;
+```
+
+Defined in: [preact-query/src/types.ts:90](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L90)
+
+***
+
+### subscribed?
+
+```ts
+optional subscribed: boolean;
+```
+
+Defined in: [preact-query/src/types.ts:46](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L46)
+
+Set this to `false` to unsubscribe this observer from updates to the query cache.
+Defaults to `true`.
+
+#### Inherited from
+
+```ts
+OmitKeyof.subscribed
+```
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseBaseQueryOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseBaseQueryOptions.md
new file mode 100644
index 000000000..d3ec71220
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseBaseQueryOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseBaseQueryOptions
+title: AnyUseBaseQueryOptions
+---
+
+# Type Alias: AnyUseBaseQueryOptions
+
+```ts
+type AnyUseBaseQueryOptions = UseBaseQueryOptions<any, any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:22](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L22)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseInfiniteQueryOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseInfiniteQueryOptions.md
new file mode 100644
index 000000000..55279e729
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseInfiniteQueryOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseInfiniteQueryOptions
+title: AnyUseInfiniteQueryOptions
+---
+
+# Type Alias: AnyUseInfiniteQueryOptions
+
+```ts
+type AnyUseInfiniteQueryOptions = UseInfiniteQueryOptions<any, any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:96](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L96)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseMutationOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseMutationOptions.md
new file mode 100644
index 000000000..d4c0e4889
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseMutationOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseMutationOptions
+title: AnyUseMutationOptions
+---
+
+# Type Alias: AnyUseMutationOptions
+
+```ts
+type AnyUseMutationOptions = UseMutationOptions<any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:191](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L191)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseQueryOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseQueryOptions.md
new file mode 100644
index 000000000..2af7a0f4b
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseQueryOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseQueryOptions
+title: AnyUseQueryOptions
+---
+
+# Type Alias: AnyUseQueryOptions
+
+```ts
+type AnyUseQueryOptions = UseQueryOptions<any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:64](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L64)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions.md
new file mode 100644
index 000000000..3c167849e
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseSuspenseInfiniteQueryOptions
+title: AnyUseSuspenseInfiniteQueryOptions
+---
+
+# Type Alias: AnyUseSuspenseInfiniteQueryOptions
+
+```ts
+type AnyUseSuspenseInfiniteQueryOptions = UseSuspenseInfiniteQueryOptions<any, any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:126](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L126)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseQueryOptions.md b/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseQueryOptions.md
new file mode 100644
index 000000000..673df04a9
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/AnyUseSuspenseQueryOptions.md
@@ -0,0 +1,12 @@
+---
+id: AnyUseSuspenseQueryOptions
+title: AnyUseSuspenseQueryOptions
+---
+
+# Type Alias: AnyUseSuspenseQueryOptions
+
+```ts
+type AnyUseSuspenseQueryOptions = UseSuspenseQueryOptions<any, any, any, any>;
+```
+
+Defined in: [preact-query/src/types.ts:75](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L75)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions.md b/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions.md
new file mode 100644
index 000000000..f3381a762
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataInfiniteOptions.md
@@ -0,0 +1,45 @@
+---
+id: DefinedInitialDataInfiniteOptions
+title: DefinedInitialDataInfiniteOptions
+---
+
+# Type Alias: DefinedInitialDataInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:56](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L56)
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData: 
+  | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+  | () => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+  | undefined;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions.md b/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions.md
new file mode 100644
index 000000000..b0e9e8f47
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/DefinedInitialDataOptions.md
@@ -0,0 +1,46 @@
+---
+id: DefinedInitialDataOptions
+title: DefinedInitialDataOptions
+---
+
+# Type Alias: DefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:40](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L40)
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData: 
+  | NonUndefinedGuard<TQueryFnData>
+| () => NonUndefinedGuard<TQueryFnData>;
+```
+
+### queryFn?
+
+```ts
+optional queryFn: QueryFunction<TQueryFnData, TQueryKey>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult.md
new file mode 100644
index 000000000..0451e0b82
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/DefinedUseInfiniteQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: DefinedUseInfiniteQueryResult
+title: DefinedUseInfiniteQueryResult
+---
+
+# Type Alias: DefinedUseInfiniteQueryResult\&lt;TData, TError\>
+
+```ts
+type DefinedUseInfiniteQueryResult<TData, TError> = DefinedInfiniteQueryObserverResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/types.ts:178](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L178)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/DefinedUseQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/DefinedUseQueryResult.md
new file mode 100644
index 000000000..ffa68ad52
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/DefinedUseQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: DefinedUseQueryResult
+title: DefinedUseQueryResult
+---
+
+# Type Alias: DefinedUseQueryResult\&lt;TData, TError\>
+
+```ts
+type DefinedUseQueryResult<TData, TError> = DefinedQueryObserverResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/types.ts:168](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L168)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueriesOptions.md b/mintlify/query/framework/preact/reference/type-aliases/QueriesOptions.md
new file mode 100644
index 000000000..81e631464
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueriesOptions.md
@@ -0,0 +1,28 @@
+---
+id: QueriesOptions
+title: QueriesOptions
+---
+
+# Type Alias: QueriesOptions\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesOptions<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? UseQueryOptionsForUseQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetUseQueryOptionsForUseQueries<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesOptions<[...Tails], [...TResults, GetUseQueryOptionsForUseQueries<Head>], [...TDepth, 1]> : ReadonlyArray<unknown> extends T ? T : T extends UseQueryOptionsForUseQueries<infer TQueryFnData, infer TError, infer TData, infer TQueryKey>[] ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>[] : UseQueryOptionsForUseQueries[];
+```
+
+Defined in: [preact-query/src/useQueries.ts:147](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQueries.ts#L147)
+
+QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueriesResults.md b/mintlify/query/framework/preact/reference/type-aliases/QueriesResults.md
new file mode 100644
index 000000000..855550adb
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueriesResults.md
@@ -0,0 +1,28 @@
+---
+id: QueriesResults
+title: QueriesResults
+---
+
+# Type Alias: QueriesResults\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesResults<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? UseQueryResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetUseQueryResult<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesResults<[...Tails], [...TResults, GetUseQueryResult<Head>], [...TDepth, 1]> : { [K in keyof T]: GetUseQueryResult<T[K]> };
+```
+
+Defined in: [preact-query/src/useQueries.ts:189](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useQueries.ts#L189)
+
+QueriesResults reducer recursively maps type param to results
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueryClientProviderProps.md b/mintlify/query/framework/preact/reference/type-aliases/QueryClientProviderProps.md
new file mode 100644
index 000000000..ad160952f
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueryClientProviderProps.md
@@ -0,0 +1,32 @@
+---
+id: QueryClientProviderProps
+title: QueryClientProviderProps
+---
+
+# Type Alias: QueryClientProviderProps
+
+```ts
+type QueryClientProviderProps = object;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:23](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L23)
+
+## Properties
+
+### children?
+
+```ts
+optional children: ComponentChildren;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:25](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L25)
+
+***
+
+### client
+
+```ts
+client: QueryClient;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:24](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L24)
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueryErrorClearResetFunction.md b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorClearResetFunction.md
new file mode 100644
index 000000000..c918fc2c9
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorClearResetFunction.md
@@ -0,0 +1,16 @@
+---
+id: QueryErrorClearResetFunction
+title: QueryErrorClearResetFunction
+---
+
+# Type Alias: QueryErrorClearResetFunction()
+
+```ts
+type QueryErrorClearResetFunction = () => void;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:7](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L7)
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueryErrorIsResetFunction.md b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorIsResetFunction.md
new file mode 100644
index 000000000..ad1eed472
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorIsResetFunction.md
@@ -0,0 +1,16 @@
+---
+id: QueryErrorIsResetFunction
+title: QueryErrorIsResetFunction
+---
+
+# Type Alias: QueryErrorIsResetFunction()
+
+```ts
+type QueryErrorIsResetFunction = () => boolean;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:6](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L6)
+
+## Returns
+
+`boolean`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetBoundaryFunction.md b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetBoundaryFunction.md
new file mode 100644
index 000000000..efd9810c0
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetBoundaryFunction.md
@@ -0,0 +1,22 @@
+---
+id: QueryErrorResetBoundaryFunction
+title: QueryErrorResetBoundaryFunction
+---
+
+# Type Alias: QueryErrorResetBoundaryFunction()
+
+```ts
+type QueryErrorResetBoundaryFunction = (value) => ComponentChildren;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:39](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L39)
+
+## Parameters
+
+### value
+
+`QueryErrorResetBoundaryValue`
+
+## Returns
+
+`ComponentChildren`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetFunction.md b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetFunction.md
new file mode 100644
index 000000000..f802d41da
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/QueryErrorResetFunction.md
@@ -0,0 +1,16 @@
+---
+id: QueryErrorResetFunction
+title: QueryErrorResetFunction
+---
+
+# Type Alias: QueryErrorResetFunction()
+
+```ts
+type QueryErrorResetFunction = () => void;
+```
+
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:5](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L5)
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesOptions.md b/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesOptions.md
new file mode 100644
index 000000000..6853e46a6
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesOptions.md
@@ -0,0 +1,28 @@
+---
+id: SuspenseQueriesOptions
+title: SuspenseQueriesOptions
+---
+
+# Type Alias: SuspenseQueriesOptions\&lt;T, TResults, TDepth\>
+
+```ts
+type SuspenseQueriesOptions<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? UseSuspenseQueryOptions[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetUseSuspenseQueryOptions<Head>] : T extends [infer Head, ...(infer Tails)] ? SuspenseQueriesOptions<[...Tails], [...TResults, GetUseSuspenseQueryOptions<Head>], [...TDepth, 1]> : unknown[] extends T ? T : T extends UseSuspenseQueryOptions<infer TQueryFnData, infer TError, infer TData, infer TQueryKey>[] ? UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[] : UseSuspenseQueryOptions[];
+```
+
+Defined in: [preact-query/src/useSuspenseQueries.ts:109](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseQueries.ts#L109)
+
+SuspenseQueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesResults.md b/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesResults.md
new file mode 100644
index 000000000..80baaf4f3
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/SuspenseQueriesResults.md
@@ -0,0 +1,28 @@
+---
+id: SuspenseQueriesResults
+title: SuspenseQueriesResults
+---
+
+# Type Alias: SuspenseQueriesResults\&lt;T, TResults, TDepth\>
+
+```ts
+type SuspenseQueriesResults<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? UseSuspenseQueryResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetUseSuspenseQueryResult<Head>] : T extends [infer Head, ...(infer Tails)] ? SuspenseQueriesResults<[...Tails], [...TResults, GetUseSuspenseQueryResult<Head>], [...TDepth, 1]> : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> };
+```
+
+Defined in: [preact-query/src/useSuspenseQueries.ts:146](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/useSuspenseQueries.ts#L146)
+
+SuspenseQueriesResults reducer recursively maps type param to results
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md b/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md
new file mode 100644
index 000000000..cd4019849
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md
@@ -0,0 +1,44 @@
+---
+id: UndefinedInitialDataInfiniteOptions
+title: UndefinedInitialDataInfiniteOptions
+---
+
+# Type Alias: UndefinedInitialDataInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:13](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L13)
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData: 
+  | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+| InitialDataFunction<NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions.md b/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions.md
new file mode 100644
index 000000000..be1e6575d
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UndefinedInitialDataOptions.md
@@ -0,0 +1,40 @@
+---
+id: UndefinedInitialDataOptions
+title: UndefinedInitialDataOptions
+---
+
+# Type Alias: UndefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:13](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L13)
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData: 
+  | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>
+| NonUndefinedGuard<TQueryFnData>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md b/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md
new file mode 100644
index 000000000..82ab9069a
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md
@@ -0,0 +1,42 @@
+---
+id: UnusedSkipTokenInfiniteOptions
+title: UnusedSkipTokenInfiniteOptions
+---
+
+# Type Alias: UnusedSkipTokenInfiniteOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object;
+```
+
+Defined in: [preact-query/src/infiniteQueryOptions.ts:34](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L34)
+
+## Type Declaration
+
+### queryFn?
+
+```ts
+optional queryFn: Exclude<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>["queryFn"], SkipToken | undefined>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions.md b/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions.md
new file mode 100644
index 000000000..468170831
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UnusedSkipTokenOptions.md
@@ -0,0 +1,38 @@
+---
+id: UnusedSkipTokenOptions
+title: UnusedSkipTokenOptions
+---
+
+# Type Alias: UnusedSkipTokenOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> = OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object;
+```
+
+Defined in: [preact-query/src/queryOptions.ts:25](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/queryOptions.ts#L25)
+
+## Type Declaration
+
+### queryFn?
+
+```ts
+optional queryFn: Exclude<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>["queryFn"], SkipToken | undefined>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseBaseMutationResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseBaseMutationResult.md
new file mode 100644
index 000000000..e906fc6ec
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseBaseMutationResult.md
@@ -0,0 +1,40 @@
+---
+id: UseBaseMutationResult
+title: UseBaseMutationResult
+---
+
+# Type Alias: UseBaseMutationResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type UseBaseMutationResult<TData, TError, TVariables, TOnMutateResult> = Override<MutationObserverResult<TData, TError, TVariables, TOnMutateResult>, {
+  mutate: UseMutateFunction<TData, TError, TVariables, TOnMutateResult>;
+}> & object;
+```
+
+Defined in: [preact-query/src/types.ts:220](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L220)
+
+## Type Declaration
+
+### mutateAsync
+
+```ts
+mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseBaseQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseBaseQueryResult.md
new file mode 100644
index 000000000..e47f7f3d1
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseBaseQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: UseBaseQueryResult
+title: UseBaseQueryResult
+---
+
+# Type Alias: UseBaseQueryResult\&lt;TData, TError\>
+
+```ts
+type UseBaseQueryResult<TData, TError> = QueryObserverResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/types.ts:150](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L150)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult.md
new file mode 100644
index 000000000..eb2f5c8a8
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseInfiniteQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: UseInfiniteQueryResult
+title: UseInfiniteQueryResult
+---
+
+# Type Alias: UseInfiniteQueryResult\&lt;TData, TError\>
+
+```ts
+type UseInfiniteQueryResult<TData, TError> = InfiniteQueryObserverResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/types.ts:173](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L173)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseMutateAsyncFunction.md b/mintlify/query/framework/preact/reference/type-aliases/UseMutateAsyncFunction.md
new file mode 100644
index 000000000..2bd7d7df5
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseMutateAsyncFunction.md
@@ -0,0 +1,30 @@
+---
+id: UseMutateAsyncFunction
+title: UseMutateAsyncFunction
+---
+
+# Type Alias: UseMutateAsyncFunction\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type UseMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> = MutateFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [preact-query/src/types.ts:213](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L213)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseMutateFunction.md b/mintlify/query/framework/preact/reference/type-aliases/UseMutateFunction.md
new file mode 100644
index 000000000..47de95401
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseMutateFunction.md
@@ -0,0 +1,40 @@
+---
+id: UseMutateFunction
+title: UseMutateFunction
+---
+
+# Type Alias: UseMutateFunction()\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type UseMutateFunction<TData, TError, TVariables, TOnMutateResult> = (...args) => void;
+```
+
+Defined in: [preact-query/src/types.ts:202](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L202)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### args
+
+...`Parameters`\&lt;`MutateFunction`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>\>
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseMutationResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseMutationResult.md
new file mode 100644
index 000000000..1e8982422
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseMutationResult.md
@@ -0,0 +1,30 @@
+---
+id: UseMutationResult
+title: UseMutationResult
+---
+
+# Type Alias: UseMutationResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type UseMutationResult<TData, TError, TVariables, TOnMutateResult> = UseBaseMutationResult<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [preact-query/src/types.ts:237](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L237)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseQueryResult.md
new file mode 100644
index 000000000..43d065846
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: UseQueryResult
+title: UseQueryResult
+---
+
+# Type Alias: UseQueryResult\&lt;TData, TError\>
+
+```ts
+type UseQueryResult<TData, TError> = UseBaseQueryResult<TData, TError>;
+```
+
+Defined in: [preact-query/src/types.ts:155](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L155)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult.md
new file mode 100644
index 000000000..74c753ef8
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseInfiniteQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: UseSuspenseInfiniteQueryResult
+title: UseSuspenseInfiniteQueryResult
+---
+
+# Type Alias: UseSuspenseInfiniteQueryResult\&lt;TData, TError\>
+
+```ts
+type UseSuspenseInfiniteQueryResult<TData, TError> = OmitKeyof<DefinedInfiniteQueryObserverResult<TData, TError>, "isPlaceholderData" | "promise">;
+```
+
+Defined in: [preact-query/src/types.ts:183](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L183)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseQueryResult.md b/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseQueryResult.md
new file mode 100644
index 000000000..dbe3e76d7
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/type-aliases/UseSuspenseQueryResult.md
@@ -0,0 +1,22 @@
+---
+id: UseSuspenseQueryResult
+title: UseSuspenseQueryResult
+---
+
+# Type Alias: UseSuspenseQueryResult\&lt;TData, TError\>
+
+```ts
+type UseSuspenseQueryResult<TData, TError> = DistributiveOmit<DefinedQueryObserverResult<TData, TError>, "isPlaceholderData" | "promise">;
+```
+
+Defined in: [preact-query/src/types.ts:160](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/types.ts#L160)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/preact/reference/variables/IsRestoringProvider.md b/mintlify/query/framework/preact/reference/variables/IsRestoringProvider.md
new file mode 100644
index 000000000..9909b1fd4
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/variables/IsRestoringProvider.md
@@ -0,0 +1,12 @@
+---
+id: IsRestoringProvider
+title: IsRestoringProvider
+---
+
+# Variable: IsRestoringProvider
+
+```ts
+const IsRestoringProvider: Provider<boolean> = IsRestoringContext.Provider;
+```
+
+Defined in: [preact-query/src/IsRestoringProvider.ts:7](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/IsRestoringProvider.ts#L7)
diff --git a/mintlify/query/framework/preact/reference/variables/QueryClientContext.md b/mintlify/query/framework/preact/reference/variables/QueryClientContext.md
new file mode 100644
index 000000000..c31856e54
--- /dev/null
+++ b/mintlify/query/framework/preact/reference/variables/QueryClientContext.md
@@ -0,0 +1,12 @@
+---
+id: QueryClientContext
+title: QueryClientContext
+---
+
+# Variable: QueryClientContext
+
+```ts
+const QueryClientContext: Context<QueryClient | undefined>;
+```
+
+Defined in: [preact-query/src/QueryClientProvider.tsx:5](https://github.com/theVedanta/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L5)
diff --git a/mintlify/query/framework/preact/typescript.md b/mintlify/query/framework/preact/typescript.md
new file mode 100644
index 000000000..2652828b1
--- /dev/null
+++ b/mintlify/query/framework/preact/typescript.md
@@ -0,0 +1,6 @@
+---
+id: typescript
+title: TypeScript
+ref: docs/framework/react/typescript.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
diff --git a/mintlify/query/framework/react/comparison.md b/mintlify/query/framework/react/comparison.md
new file mode 100644
index 000000000..1fe965bdc
--- /dev/null
+++ b/mintlify/query/framework/react/comparison.md
@@ -0,0 +1,111 @@
+---
+id: comparison
+title: Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router
+---
+
+> This comparison table strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page on Github" link at the bottom of this page.
+
+Feature/Capability Key:
+
+- ✅ 1st-class, built-in, and ready to use with no added configuration or code
+- 🟡 Supported, but as an unofficial 3rd party or community library/contribution
+- 🔶 Supported and documented, but requires extra user-code to implement
+- 🛑 Not officially supported or documented.
+
+|                                                    | React Query                              | SWR [_(Website)_][swr]                   | Apollo Client [_(Website)_][apollo]        | RTK-Query [_(Website)_][rtk-query]   | React Router [_(Website)_][react-router]                                  |
+| -------------------------------------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------- |
+| Github Repo / Stars                                | [![][stars-react-query]][gh-react-query] | [![][stars-swr]][gh-swr]                 | [![][stars-apollo]][gh-apollo]             | [![][stars-rtk-query]][gh-rtk-query] | [![][stars-react-router]][gh-react-router]                                |
+| Platform Requirements                              | React                                    | React                                    | React, GraphQL                             | Redux                                | React                                                                     |
+| Their Comparison                                   |                                          | (none)                                   | (none)                                     | [Comparison][rtk-query-comparison]   | (none)                                                                    |
+| Supported Query Syntax                             | Promise, REST, GraphQL                   | Promise, REST, GraphQL                   | GraphQL, Any (Reactive Variables)          | Promise, REST, GraphQL               | Promise, REST, GraphQL                                                    |
+| Supported Frameworks                               | React                                    | React                                    | React + Others                             | Any                                  | React                                                                     |
+| Caching Strategy                                   | Hierarchical Key -> Value                | Unique Key -> Value                      | Normalized Schema                          | Unique Key -> Value                  | Nested Route -> value                                                     |
+| Cache Key Strategy                                 | JSON                                     | JSON                                     | GraphQL Query                              | JSON                                 | Route Path                                                                |
+| Cache Change Detection                             | Deep Compare Keys (Stable Serialization) | Deep Compare Keys (Stable Serialization) | Deep Compare Keys (Unstable Serialization) | Key Referential Equality (===)       | Route Change                                                              |
+| Data Change Detection                              | Deep Comparison + Structural Sharing     | Deep Compare (via `stable-hash`)         | Deep Compare (Unstable Serialization)      | Key Referential Equality (===)       | Loader Run                                                                |
+| Data Memoization                                   | Full Structural Sharing                  | Identity (===)                           | Normalized Identity                        | Identity (===)                       | Identity (===)                                                            |
+| Bundle Size                                        | [![][bp-react-query]][bpl-react-query]   | [![][bp-swr]][bpl-swr]                   | [![][bp-apollo]][bpl-apollo]               | [![][bp-rtk-query]][bpl-rtk-query]   | [![][bp-react-router]][bpl-react-router] + [![][bp-history]][bpl-history] |
+| API Definition Location                            | Component, External Config               | Component                                | GraphQL Schema                             | External Config                      | Route Tree Configuration                                                  |
+| Queries                                            | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Cache Persistence                                  | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑 Active Routes Only <sup>8</sup>                                        |
+| Devtools                                           | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Polling/Intervals                                  | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Parallel Queries                                   | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Dependent Queries                                  | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Paginated Queries                                  | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Infinite Queries                                   | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Bi-directional Infinite Queries                    | ✅                                       | 🔶                                       | 🔶                                         | ✅                                   | 🛑                                                                        |
+| Infinite Query Refetching                          | ✅                                       | ✅                                       | 🛑                                         | ✅                                   | 🛑                                                                        |
+| Lagged Query Data<sup>1</sup>                      | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Selectors                                          | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | N/A                                                                       |
+| Initial Data                                       | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Scroll Recovery                                    | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Cache Manipulation                                 | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Outdated Query Dismissal                           | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Render Batching & Optimization<sup>2</sup>         | ✅                                       | ✅                                       | 🛑                                         | ✅                                   | ✅                                                                        |
+| Auto Garbage Collection                            | ✅                                       | 🛑                                       | 🛑                                         | ✅                                   | N/A                                                                       |
+| Mutation Hooks                                     | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Offline Mutation Support                           | ✅                                       | 🛑                                       | 🟡                                         | 🛑                                   | 🛑                                                                        |
+| Prefetching APIs                                   | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Query Cancellation                                 | ✅                                       | 🛑                                       | 🛑                                         | 🛑                                   | ✅                                                                        |
+| Partial Query Matching<sup>3</sup>                 | ✅                                       | 🔶                                       | ✅                                         | ✅                                   | N/A                                                                       |
+| Stale While Revalidate                             | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Stale Time Configuration                           | ✅                                       | 🛑<sup>7</sup>                           | 🛑                                         | ✅                                   | 🛑                                                                        |
+| Pre-usage Query/Mutation Configuration<sup>4</sup> | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Window Focus Refetching                            | ✅                                       | ✅                                       | 🛑                                         | ✅                                   | 🛑                                                                        |
+| Network Status Refetching                          | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| General Cache Dehydration/Rehydration              | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Offline Caching                                    | ✅                                       | 🛑                                       | ✅                                         | 🔶                                   | 🛑                                                                        |
+| React Suspense                                     | ✅                                       | ✅                                       | ✅                                         | 🛑                                   | ✅                                                                        |
+| Abstracted/Agnostic Core                           | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | 🛑                                                                        |
+| Automatic Refetch after Mutation<sup>5</sup>       | 🔶                                       | 🔶                                       | ✅                                         | ✅                                   | ✅                                                                        |
+| Normalized Caching<sup>6</sup>                     | 🛑                                       | 🛑                                       | ✅                                         | 🛑                                   | 🛑                                                                        |
+
+### Notes
+
+> **<sup>1</sup> Lagged Query Data** - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
+
+> **<sup>2</sup> Render Optimization** - React Query has excellent rendering performance. By default, it will automatically track which fields are accessed and only re-render if one of them changes. If you would like to opt-out of this optimization, setting `notifyOnChangeProps` to `'all'` will re-render your components whenever the query is updated. For example because it has new data, or to indicate it is fetching. React Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnChangeProps` to `['data', 'error']`.
+
+> **<sup>3</sup> Partial query matching** - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
+
+> **<sup>4</sup> Pre-usage Query Configuration** - This is simply a fancy name for being able to configure how queries and mutations will behave before they are used. For instance, a query can be fully configured with defaults beforehand and when the time comes to use it, only `useQuery({ queryKey })` is necessary, instead of being required to pass the fetcher and/or options with every usage. SWR does have a partial form of this feature by allowing you to pre-configure a default fetcher, but only as a global fetcher, not on a per-query basis and definitely not for mutations.
+
+> **<sup>5</sup> Automatic Refetch after Mutation** - For truly automatic refetching to happen after a mutation occurs, a schema is necessary (like the one graphQL provides) along with heuristics that help the library know how to identify individual entities and entities types in that schema.
+
+> **<sup>6</sup> Normalized Caching** - React Query, SWR and RTK-Query do not currently support automatic-normalized caching which describes storing entities in a flat architecture to avoid some high-level data duplication.
+
+> **<sup>7</sup> SWR's Immutable Mode** - SWR ships with an "immutable" mode that does allow you to only fetch a query once for the life of the cache, but it still does not have the concept of stale-time or conditional auto-revalidation
+
+> **<sup>8</sup> React Router cache persistence** - React Router does not cache data beyond the currently matched routes. If a route is left, its data is lost.
+
+[bpl-react-query]: https://bundlephobia.com/result?p=@tanstack/react-query
+[bp-react-query]: https://badgen.net/bundlephobia/minzip/@tanstack/react-query?label=💾
+[gh-react-query]: https://github.com/TanStack/query
+[stars-react-query]: https://img.shields.io/github/stars/TanStack/query?label=%F0%9F%8C%9F
+[swr]: https://github.com/vercel/swr
+[bp-swr]: https://badgen.net/bundlephobia/minzip/swr?label=💾
+[gh-swr]: https://github.com/vercel/swr
+[stars-swr]: https://img.shields.io/github/stars/vercel/swr?label=%F0%9F%8C%9F
+[bpl-swr]: https://bundlephobia.com/result?p=swr
+[apollo]: https://github.com/apollographql/apollo-client
+[bp-apollo]: https://badgen.net/bundlephobia/minzip/@apollo/client?label=💾
+[gh-apollo]: https://github.com/apollographql/apollo-client
+[stars-apollo]: https://img.shields.io/github/stars/apollographql/apollo-client?label=%F0%9F%8C%9F
+[bpl-apollo]: https://bundlephobia.com/result?p=@apollo/client
+[rtk-query]: https://redux-toolkit.js.org/rtk-query/overview
+[rtk-query-comparison]: https://redux-toolkit.js.org/rtk-query/comparison
+[rtk-query-bundle-size]: https://redux-toolkit.js.org/rtk-query/comparison#bundle-size
+[bp-rtk]: https://badgen.net/bundlephobia/minzip/@reduxjs/toolkit?label=💾
+[bp-rtk-query]: https://badgen.net/bundlephobia/minzip/@reduxjs/toolkit?label=💾
+[gh-rtk-query]: https://github.com/reduxjs/redux-toolkit
+[stars-rtk-query]: https://img.shields.io/github/stars/reduxjs/redux-toolkit?label=🌟
+[bpl-rtk]: https://bundlephobia.com/result?p=@reduxjs/toolkit
+[bpl-rtk-query]: https://bundlephobia.com/package/@reduxjs/toolkit
+[react-router]: https://github.com/remix-run/react-router
+[bp-react-router]: https://badgen.net/bundlephobia/minzip/react-router-dom?label=💾
+[gh-react-router]: https://github.com/remix-run/react-router
+[stars-react-router]: https://img.shields.io/github/stars/remix-run/react-router?label=%F0%9F%8C%9F
+[bpl-react-router]: https://bundlephobia.com/result?p=react-router-dom
+[bp-history]: https://badgen.net/bundlephobia/minzip/history?label=💾
+[bpl-history]: https://bundlephobia.com/result?p=history
diff --git a/mintlify/query/framework/react/devtools.md b/mintlify/query/framework/react/devtools.md
new file mode 100644
index 000000000..4c7b7d6d6
--- /dev/null
+++ b/mintlify/query/framework/react/devtools.md
@@ -0,0 +1,203 @@
+---
+id: devtools
+title: Devtools
+---
+
+Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳
+
+When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+> For React Native users: A third-party native macOS app is available for debugging React Query in ANY js-based application. Monitor queries across devices in real-time. Check it out here: [rn-better-dev-tools](https://github.com/LovesWorking/rn-better-dev-tools)
+
+> Note that since version 5, the dev tools support observing mutations as well.
+
+## Install and Import the Devtools
+
+The devtools are a separate package that you need to install:
+
+```bash
+npm i @tanstack/react-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/react-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/react-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/react-query-devtools
+```
+
+For Next 13+ App Dir you must install it as a dev dependency for it to work.
+
+You can import the devtools like this:
+
+```tsx
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+```
+
+By default, React Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`
+  - The position of the TanStack logo to open and close the devtools panel
+  - If `relative`, the button is placed in the location that you render the devtools.
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the React Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Embedded Mode
+
+Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
+
+Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+function App() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `style?: React.CSSProperties`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => void`
+  - Callback function that is called when the devtools panel is closed
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import * as React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(
+    (d) => ({
+      default: d.ReactQueryDevtools,
+    }),
+  ),
+)
+
+function App() {
+  const [showDevtools, setShowDevtools] = React.useState(false)
+
+  React.useEffect(() => {
+    // @ts-expect-error
+    window.toggleDevtools = () => setShowDevtools((old) => !old)
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <ReactQueryDevtools initialIsOpen />
+      {showDevtools && (
+        <React.Suspense fallback={null}>
+          <ReactQueryDevtoolsProduction />
+        </React.Suspense>
+      )}
+    </QueryClientProvider>
+  )
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+### Modern bundlers
+
+If your bundler supports package exports, you can use the following import path:
+
+```tsx
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+  import('@tanstack/react-query-devtools/production').then((d) => ({
+    default: d.ReactQueryDevtools,
+  })),
+)
+```
+
+For TypeScript, you would need to set `moduleResolution: 'nodenext'` in your tsconfig, which requires at least TypeScript v4.7.
diff --git a/mintlify/query/framework/react/examples/algolia.md b/mintlify/query/framework/react/examples/algolia.md
new file mode 100644
index 000000000..5c73dcc0b
--- /dev/null
+++ b/mintlify/query/framework/react/examples/algolia.md
@@ -0,0 +1,12 @@
+---
+title: "Algolia"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/algolia)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/algolia)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/auto-refetching.md b/mintlify/query/framework/react/examples/auto-refetching.md
new file mode 100644
index 000000000..79f09addc
--- /dev/null
+++ b/mintlify/query/framework/react/examples/auto-refetching.md
@@ -0,0 +1,12 @@
+---
+title: "Auto Refetching / Polling / Realtime"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/auto-refetching)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/auto-refetching)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/basic-graphql-request.md b/mintlify/query/framework/react/examples/basic-graphql-request.md
new file mode 100644
index 000000000..01a31618e
--- /dev/null
+++ b/mintlify/query/framework/react/examples/basic-graphql-request.md
@@ -0,0 +1,12 @@
+---
+title: "Basic w/ GraphQL-Request"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/basic-graphql-request)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/basic-graphql-request)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/basic.md b/mintlify/query/framework/react/examples/basic.md
new file mode 100644
index 000000000..64a0fc260
--- /dev/null
+++ b/mintlify/query/framework/react/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/chat.md b/mintlify/query/framework/react/examples/chat.md
new file mode 100644
index 000000000..446918c2b
--- /dev/null
+++ b/mintlify/query/framework/react/examples/chat.md
@@ -0,0 +1,12 @@
+---
+title: "Chat example (streaming)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/chat)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/chat)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/default-query-function.md b/mintlify/query/framework/react/examples/default-query-function.md
new file mode 100644
index 000000000..bd32b5571
--- /dev/null
+++ b/mintlify/query/framework/react/examples/default-query-function.md
@@ -0,0 +1,12 @@
+---
+title: "Default Query Function"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/default-query-function)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/default-query-function)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/devtools-panel.md b/mintlify/query/framework/react/examples/devtools-panel.md
new file mode 100644
index 000000000..345829ac9
--- /dev/null
+++ b/mintlify/query/framework/react/examples/devtools-panel.md
@@ -0,0 +1,12 @@
+---
+title: "Devtools Embedded Panel"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/devtools-panel)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/devtools-panel)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/infinite-query-with-max-pages.md b/mintlify/query/framework/react/examples/infinite-query-with-max-pages.md
new file mode 100644
index 000000000..0330f2c82
--- /dev/null
+++ b/mintlify/query/framework/react/examples/infinite-query-with-max-pages.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite query with Max pages"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/infinite-query-with-max-pages)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/infinite-query-with-max-pages)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/load-more-infinite-scroll.md b/mintlify/query/framework/react/examples/load-more-infinite-scroll.md
new file mode 100644
index 000000000..f5b2f7ee4
--- /dev/null
+++ b/mintlify/query/framework/react/examples/load-more-infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Load-More & Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/load-more-infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/load-more-infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/nextjs-app-prefetching.md b/mintlify/query/framework/react/examples/nextjs-app-prefetching.md
new file mode 100644
index 000000000..41f06f29b
--- /dev/null
+++ b/mintlify/query/framework/react/examples/nextjs-app-prefetching.md
@@ -0,0 +1,12 @@
+---
+title: "Next.js app with prefetching"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/nextjs-app-prefetching)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/nextjs-suspense-streaming.md b/mintlify/query/framework/react/examples/nextjs-suspense-streaming.md
new file mode 100644
index 000000000..ff48839a5
--- /dev/null
+++ b/mintlify/query/framework/react/examples/nextjs-suspense-streaming.md
@@ -0,0 +1,12 @@
+---
+title: "Next.js app with streaming"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/nextjs-suspense-streaming)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/nextjs.md b/mintlify/query/framework/react/examples/nextjs.md
new file mode 100644
index 000000000..625c161d1
--- /dev/null
+++ b/mintlify/query/framework/react/examples/nextjs.md
@@ -0,0 +1,12 @@
+---
+title: "Next.js Pages"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/nextjs)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/nextjs)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/offline.md b/mintlify/query/framework/react/examples/offline.md
new file mode 100644
index 000000000..bfcec7785
--- /dev/null
+++ b/mintlify/query/framework/react/examples/offline.md
@@ -0,0 +1,12 @@
+---
+title: "Offline Queries and Mutations"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/offline)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/offline)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/optimistic-updates-cache.md b/mintlify/query/framework/react/examples/optimistic-updates-cache.md
new file mode 100644
index 000000000..be0991d63
--- /dev/null
+++ b/mintlify/query/framework/react/examples/optimistic-updates-cache.md
@@ -0,0 +1,12 @@
+---
+title: "Optimistic Updates (Cache)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/optimistic-updates-cache)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/optimistic-updates-cache)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/optimistic-updates-ui.md b/mintlify/query/framework/react/examples/optimistic-updates-ui.md
new file mode 100644
index 000000000..61f36f3f5
--- /dev/null
+++ b/mintlify/query/framework/react/examples/optimistic-updates-ui.md
@@ -0,0 +1,12 @@
+---
+title: "Optimistic Updates (UI)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/optimistic-updates-ui)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/optimistic-updates-ui)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/pagination.md b/mintlify/query/framework/react/examples/pagination.md
new file mode 100644
index 000000000..d3b93de1e
--- /dev/null
+++ b/mintlify/query/framework/react/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/playground.md b/mintlify/query/framework/react/examples/playground.md
new file mode 100644
index 000000000..4999f95ba
--- /dev/null
+++ b/mintlify/query/framework/react/examples/playground.md
@@ -0,0 +1,12 @@
+---
+title: "Playground"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/playground)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/playground)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/prefetching.md b/mintlify/query/framework/react/examples/prefetching.md
new file mode 100644
index 000000000..9b38c8973
--- /dev/null
+++ b/mintlify/query/framework/react/examples/prefetching.md
@@ -0,0 +1,12 @@
+---
+title: "Prefetching"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/prefetching)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/prefetching)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/react-native.md b/mintlify/query/framework/react/examples/react-native.md
new file mode 100644
index 000000000..03810aff3
--- /dev/null
+++ b/mintlify/query/framework/react/examples/react-native.md
@@ -0,0 +1,12 @@
+---
+title: "React Native"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/react-native)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/react-native)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/react-router.md b/mintlify/query/framework/react/examples/react-router.md
new file mode 100644
index 000000000..d98b83b6c
--- /dev/null
+++ b/mintlify/query/framework/react/examples/react-router.md
@@ -0,0 +1,12 @@
+---
+title: "React Router"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/react-router)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/react-router)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/rick-morty.md b/mintlify/query/framework/react/examples/rick-morty.md
new file mode 100644
index 000000000..7a906098f
--- /dev/null
+++ b/mintlify/query/framework/react/examples/rick-morty.md
@@ -0,0 +1,12 @@
+---
+title: "Rick And Morty"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/rick-morty)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/rick-morty)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/shadow-dom.md b/mintlify/query/framework/react/examples/shadow-dom.md
new file mode 100644
index 000000000..0914c6a83
--- /dev/null
+++ b/mintlify/query/framework/react/examples/shadow-dom.md
@@ -0,0 +1,12 @@
+---
+title: "Shadow DOM"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/shadow-dom)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/shadow-dom)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/simple.md b/mintlify/query/framework/react/examples/simple.md
new file mode 100644
index 000000000..6f231a80a
--- /dev/null
+++ b/mintlify/query/framework/react/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/star-wars.md b/mintlify/query/framework/react/examples/star-wars.md
new file mode 100644
index 000000000..f2506633c
--- /dev/null
+++ b/mintlify/query/framework/react/examples/star-wars.md
@@ -0,0 +1,12 @@
+---
+title: "Star Wars"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/star-wars)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/star-wars)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/examples/suspense.md b/mintlify/query/framework/react/examples/suspense.md
new file mode 100644
index 000000000..bcb5c1129
--- /dev/null
+++ b/mintlify/query/framework/react/examples/suspense.md
@@ -0,0 +1,12 @@
+---
+title: "Suspense"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/react/examples/suspense)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/react/suspense)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/react/graphql.md b/mintlify/query/framework/react/graphql.md
new file mode 100644
index 000000000..1ba498b33
--- /dev/null
+++ b/mintlify/query/framework/react/graphql.md
@@ -0,0 +1,55 @@
+---
+id: graphql
+title: GraphQL
+---
+
+Because React Query's fetching mechanisms are agnostically built on Promises, you can use React Query with literally any asynchronous data fetching client, including GraphQL!
+
+> Keep in mind that React Query does not support normalized caching. While a vast majority of users do not actually need a normalized cache or even benefit from it as much as they believe they do, there may be very rare circumstances that may warrant it so be sure to check with us first to make sure it's truly something you need!
+
+[//]: # 'Codegen'
+
+## Type-Safety and Code Generation
+
+React Query, used in combination with `graphql-request^5` and [GraphQL Code Generator](https://graphql-code-generator.com/) provides full-typed GraphQL operations:
+
+```tsx
+import request from 'graphql-request'
+import { useQuery } from '@tanstack/react-query'
+
+import { graphql } from './gql/gql'
+
+const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
+  query allFilmsWithVariablesQuery($first: Int!) {
+    allFilms(first: $first) {
+      edges {
+        node {
+          id
+          title
+        }
+      }
+    }
+  }
+`)
+
+function App() {
+  // `data` is fully typed!
+  const { data } = useQuery({
+    queryKey: ['films'],
+    queryFn: async () =>
+      request(
+        'https://swapi-graphql.netlify.app/.netlify/functions/index',
+        allFilmsWithVariablesQueryDocument,
+        // variables are type-checked too!
+        { first: 10 },
+      ),
+  })
+  // ...
+}
+```
+
+_You can find a [complete example in the repo](https://github.com/dotansimha/graphql-code-generator/tree/7c25c4eeb77f88677fd79da557b7b5326e3f3950/examples/front-end/react/tanstack-react-query)_
+
+Get started with the [dedicated guide on GraphQL Code Generator documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue).
+
+[//]: # 'Codegen'
diff --git a/mintlify/query/framework/react/guides/advanced-ssr.md b/mintlify/query/framework/react/guides/advanced-ssr.md
new file mode 100644
index 000000000..4e8612f16
--- /dev/null
+++ b/mintlify/query/framework/react/guides/advanced-ssr.md
@@ -0,0 +1,650 @@
+---
+id: advanced-ssr
+title: Advanced Server Rendering
+---
+
+Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
+
+You might want to read the [Server Rendering & Hydration guide](/query/framework/react/guides/ssr) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](/query/framework/react/guides/request-waterfalls) as well as [Prefetching & Router Integration](/query/framework/react/guides/prefetching) also contains valuable background.
+
+Before we start, let's note that while the `initialData` approach outlined in the SSR guide also works with Server Components, we'll focus this guide on the hydration APIs.
+
+## Server Components & Next.js app router
+
+We won't cover Server Components in depth here, but the short version is that they are components that are guaranteed to _only_ run on the server, both for the initial page view and **also on page transitions**. This is similar to how Next.js `getServerSideProps`/`getStaticProps` and Remix `loader` works, as these also always run on the server but while those can only return data, Server Components can do a lot more. The data part is central to React Query however, so let's focus on that.
+
+How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](/query/framework/react/guides/ssr#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader.
+
+### A quick note on terminology
+
+So far in these guides, we've been talking about the _server_ and the _client_. It's important to note that confusingly enough this does not match 1-1 with _Server Components_ and _Client Components_. Server Components are guaranteed to only run on the server, but Client Components can actually run in both places. The reason for this is that they can also render during the initial _server rendering_ pass.
+
+One way to think of this is that even though Server Components also _render_, they happen during a "loader phase" (always happens on the server), while Client Components run during the "application phase". That application can run both on the server during SSR, and in for example a browser. Where exactly that application runs and if it runs during SSR or not might differ between frameworks.
+
+### Initial setup
+
+The first step of any React Query setup is always to create a `queryClient` and wrap your application in a `QueryClientProvider`. With Server Components, this looks mostly the same across frameworks, one difference being the filename conventions:
+
+```tsx
+// In Next.js, this file would be called: app/providers.tsx
+'use client'
+
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import {
+  environmentManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+  if (environmentManager.isServer()) {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+```
+
+```tsx
+// In Next.js, this file would be called: app/layout.tsx
+import Providers from './providers'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+This part is pretty similar to what we did in the SSR guide, we just need to split things up into two different files.
+
+### Prefetching and de/hydrating data
+
+Next, let’s look at how to actually prefetch data, then dehydrate and hydrate it. This is what it looked like using the **Next.js Pages Router**:
+
+```tsx
+// pages/posts.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+  useQuery,
+} from '@tanstack/react-query'
+
+// This could also be getServerSideProps
+export async function getStaticProps() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  }
+}
+
+function Posts() {
+  // This useQuery could just as well happen in some deeper child to
+  // the <PostsRoute>, data will be available immediately either way
+  //
+  // Note that we are using useQuery here instead of useSuspenseQuery.
+  // Because this data has already been prefetched, there is no need to
+  // ever suspend in the component itself. If we forget or remove the
+  // prefetch, this will instead fetch the data on the client, while
+  // using useSuspenseQuery would have had worse side effects.
+  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
+
+  // This query was not prefetched on the server and will not start
+  // fetching until on the client, both patterns are fine to mix
+  const { data: commentsData } = useQuery({
+    queryKey: ['posts-comments'],
+    queryFn: getComments,
+  })
+
+  // ...
+}
+
+export default function PostsRoute({ dehydratedState }) {
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+Converting this to the app router actually looks pretty similar, we just need to move things around a bit. First, we'll create a Server Component to do the prefetching part:
+
+```tsx
+// app/posts/page.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import Posts from './posts'
+
+export default async function PostsPage() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return (
+    // Neat! Serialization is now as easy as passing props.
+    // HydrationBoundary is a Client Component, so hydration will happen there.
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+Next, we'll look at what the Client Component part looks like:
+
+```tsx
+// app/posts/posts.tsx
+'use client'
+
+export default function Posts() {
+  // This useQuery could just as well happen in some deeper
+  // child to <Posts>, data will be available immediately either way
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+
+  // This query was not prefetched on the server and will not start
+  // fetching until on the client, both patterns are fine to mix.
+  const { data: commentsData } = useQuery({
+    queryKey: ['posts-comments'],
+    queryFn: getComments,
+  })
+
+  // ...
+}
+```
+
+One neat thing about the examples above is that the only thing that is Next.js-specific here are the file names, everything else would look the same in any other framework that supports Server Components.
+
+In the SSR guide, we noted that you could get rid of the boilerplate of having `<HydrationBoundary>` in every route. This is not possible with Server Components.
+
+> NOTE: If you encounter a type error while using async Server Components with TypeScript versions lower than `5.1.3` and `@types/react` versions lower than `18.2.8`, it is recommended to update to the latest versions of both. Alternatively, you can use the temporary workaround of adding `{/* @ts-expect-error Server Component */}` when calling this component inside another. For more information, see [Async Server Component TypeScript Error](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error) in the Next.js TypeScript docs.
+
+> WARNING: We do **not** recommend using Next.js Server Actions to _fetch_ data in a `queryFn`. When called from the client, Server Actions [run serially, not in parallel](https://react.dev/reference/rsc/use-server#caveats), which conflicts with how React Query fetches and refetches queries. This can leave queries stuck in a pending state or cause the action to never run at all (see [#7934](https://github.com/TanStack/query/issues/7934)). Passing a Server Action reference to `queryFn` can also fail with `Only plain objects, and a few built-ins, can be passed to Server Actions...`, since you have to _call_ the action rather than pass it as a reference (see [#6264](https://github.com/TanStack/query/issues/6264)). For fetching data on the client, `fetch` from an API route or use an RPC layer such as tRPC instead. Server Actions remain a good fit for **mutations** (`useMutation`).
+
+### Nesting Server Components
+
+A nice thing about Server Components is that they can be nested and exist on many levels in the React tree, making it possible to prefetch data closer to where it's actually used instead of only at the top of the application (just like Remix loaders). This can be as simple as a Server Component rendering another Server Component (we'll leave the Client Components out in this example for brevity):
+
+```tsx
+// app/posts/page.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import Posts from './posts'
+import CommentsServerComponent from './comments-server'
+
+export default async function PostsPage() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Posts />
+      <CommentsServerComponent />
+    </HydrationBoundary>
+  )
+}
+
+// app/posts/comments-server.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import Comments from './comments'
+
+export default async function CommentsServerComponent() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts-comments'],
+    queryFn: getComments,
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Comments />
+    </HydrationBoundary>
+  )
+}
+```
+
+As you can see, it's perfectly fine to use `<HydrationBoundary>` in multiple places, and create and dehydrate multiple `queryClient` for prefetching.
+
+Note that because we are awaiting `getPosts` before rendering `CommentsServerComponent` this would lead to a server side waterfall:
+
+```
+1. |> getPosts()
+2.   |> getComments()
+```
+
+If the server latency to the data is low, this might not be a huge issue, but is still worth pointing out.
+
+In Next.js, besides prefetching data in `page.tsx`, you can also do it in `layout.tsx`, and in [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes). Because these are all part of the routing, Next.js knows how to fetch them all in parallel. So if `CommentsServerComponent` above was instead expressed as a parallel route, the waterfall would be flattened automatically.
+
+As more frameworks start supporting Server Components, they might have other routing conventions. Read your framework docs for details.
+
+### Alternative: Use a single `queryClient` for prefetching
+
+In the example above, we create a new `queryClient` for each Server Component that fetches data. This is the recommended approach, but if you want to, you can alternatively create a single one that is reused across all Server Components:
+
+```tsx
+// app/getQueryClient.tsx
+import { QueryClient } from '@tanstack/react-query'
+import { cache } from 'react'
+
+// cache() is scoped per request, so we don't leak data between requests
+const getQueryClient = cache(() => new QueryClient())
+export default getQueryClient
+```
+
+The benefit of this is that you can call `getQueryClient()` to get a hold of this client anywhere that gets called from a Server Component, including utility functions. The downside is that every time you call `dehydrate(getQueryClient())`, you serialize _the entire_ `queryClient`, including queries that have already been serialized before and are unrelated to the current Server Component which is unnecessary overhead.
+
+Next.js already dedupes requests that utilize `fetch()`, but if you are using something else in your `queryFn`, or if you use a framework that does _not_ dedupe these requests automatically, using a single `queryClient` as described above might make sense, despite the duplicated serialization.
+
+> As a future improvement, we might look into creating a `dehydrateNew()` function (name pending) that only dehydrate queries that are _new_ since the last call to `dehydrateNew()`. Feel free to get in touch if this sounds interesting and like something you want to help out with!
+
+### Data ownership and revalidation
+
+With Server Components, it's important to think about data ownership and revalidation. To explain why, let's look at a modified example from above:
+
+```tsx
+// app/posts/page.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import Posts from './posts'
+
+export default async function PostsPage() {
+  const queryClient = new QueryClient()
+
+  // Note we are now using fetchQuery()
+  const posts = await queryClient.fetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {/* This is the new part */}
+      <div>Nr of posts: {posts.length}</div>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+We are now rendering data from the `getPosts` query both in a Server Component and in a Client Component. This will be fine for the initial page render, but what happens when the query revalidates on the client for some reason when `staleTime` has been passed?
+
+React Query has no idea of how to _revalidate the Server Component_, so if it refetches the data on the client, causing React to rerender the list of posts, the `Nr of posts: {posts.length}` will end up out of sync.
+
+This is fine if you set `staleTime: Infinity`, so that React Query never revalidates, but this is probably not what you want if you are using React Query in the first place.
+
+Using React Query with Server Components makes most sense if:
+
+- You have an app using React Query and want to migrate to Server Components without rewriting all the data fetching
+- You want a familiar programming paradigm, but want to still sprinkle in the benefits of Server Components where it makes most sense
+- You have some use case that React Query covers, but that your framework of choice does not cover
+
+It's hard to give general advice on when it makes sense to pair React Query with Server Components and not. **If you are just starting out with a new Server Components app, we suggest you start out with any tools for data fetching your framework provides you with and avoid bringing in React Query until you actually need it.** This might be never, and that's fine, use the right tool for the job!
+
+If you do use it, a good rule of thumb is to avoid `queryClient.fetchQuery` unless you need to catch errors. If you do use it, don't render its result on the server or pass the result to another component, even a Client Component one.
+
+From the React Query perspective, treat Server Components as a place to prefetch data, nothing more.
+
+Of course, it's fine to have Server Components own some data, and Client Components own other, just make sure those two realities don't get out of sync.
+
+## Streaming with Server Components
+
+The Next.js app router automatically streams any part of the application that is ready to be displayed to the browser as soon as possible, so finished content can be displayed immediately without waiting for still pending content. It does this along `<Suspense>` boundary lines. Note that if you create a file `loading.tsx`, this automatically creates a `<Suspense>` boundary behind the scenes.
+
+With the prefetching patterns described above, React Query is perfectly compatible with this form of streaming. As the data for each Suspense boundary resolves, Next.js can render and stream the finished content to the browser. This works even if you are using `useQuery` as outlined above because the suspending actually happens when you `await` the prefetch.
+
+As of React Query v5.40.0, you don't have to `await` all prefetches for this to work, as `pending` Queries can also be dehydrated and sent to the client. This lets you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streams the _data_ to the client as the query finishes. This can be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to `await` and render the first page of an infinite query, but start prefetching page 2 without blocking rendering.
+
+To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `dehydrate`.
+
+We will also need to move the `getQueryClient()` function out of our `app/providers.tsx` file as we want to use it in our server component and our client provider.
+
+```tsx
+// app/get-query-client.ts
+import {
+  environmentManager,
+  QueryClient,
+  defaultShouldDehydrateQuery,
+} from '@tanstack/react-query'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+      dehydrate: {
+        // include pending queries in dehydration
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === 'pending',
+        shouldRedactErrors: (error) => {
+          // We should not catch Next.js server errors
+          // as that's how Next.js detects dynamic pages
+          // so we cannot redact them.
+          // Next.js also automatically redacts errors for us
+          // with better digests.
+          return false
+        },
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+export function getQueryClient() {
+  if (environmentManager.isServer()) {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
+```
+
+> Note: This works in NextJs and Server Components because React can serialize Promises over the wire when you pass them down to Client Components.
+
+Then, all we need to do is provide a `HydrationBoundary`, but we don't need to `await` prefetches anymore:
+
+```tsx
+// app/posts/page.tsx
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
+import { getQueryClient } from './get-query-client'
+import Posts from './posts'
+
+// the function doesn't need to be `async` because we don't `await` anything
+export default function PostsPage() {
+  const queryClient = getQueryClient()
+
+  // look ma, no await
+  queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+On the client, the Promise will be put into the QueryCache for us. That means we can now call `useSuspenseQuery` inside the `Posts` component to "use" that Promise (which was created on the Server):
+
+```tsx
+// app/posts/posts.tsx
+'use client'
+
+export default function Posts() {
+  const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts })
+
+  // ...
+}
+```
+
+> Note that you could also `useQuery` instead of `useSuspenseQuery`, and the Promise would still be picked up correctly. However, NextJs won't suspend in that case and the component will render in the `pending` status, which also opts out of server rendering the content.
+
+If you're using non-JSON data types and serialize the query results on the server, you can specify the `dehydrate.serializeData` and `hydrate.deserializeData` options to serialize and deserialize the data on each side of the boundary to ensure the data in the cache is the same format both on the server and the client:
+
+```tsx
+// app/get-query-client.ts
+import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
+import { deserialize, serialize } from './transformer'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      // ...
+      hydrate: {
+        deserializeData: deserialize,
+      },
+      dehydrate: {
+        serializeData: serialize,
+      },
+    },
+  })
+}
+
+// ...
+```
+
+```tsx
+// app/posts/page.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import { getQueryClient } from './get-query-client'
+import { serialize } from './transformer'
+import Posts from './posts'
+
+export default function PostsPage() {
+  const queryClient = getQueryClient()
+
+  // look ma, no await
+  queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts().then(serialize), // <-- serialize the data on the server
+  })
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+```tsx
+// app/posts/posts.tsx
+'use client'
+
+export default function Posts() {
+  const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts })
+
+  // ...
+}
+```
+
+Now, your `getPosts` function can return e.g. `Temporal` datetime objects and the data will be serialized and deserialized on the client, assuming your transformer can serialize and deserialize those data types.
+
+For more information, check out the [Next.js App with Prefetching Example](/query/framework/react/examples/nextjs-app-prefetching).
+
+### Using the Persist Adapter with Streaming
+
+If you're using the persist adapter with the [Streaming with Server Components](#streaming-with-server-components) feature, you need to be careful not to save promises to storage. Since pending queries can be dehydrated and streamed to the client, you should configure the persister to only persist successful queries:
+
+```tsx
+<PersistQueryClientProvider
+  client={queryClient}
+  persistOptions={{
+    persister,
+    // We don't want to save promises into the storage, so we only persist successful queries
+    dehydrateOptions: { shouldDehydrateQuery: defaultShouldDehydrateQuery },
+  }}
+>
+  {children}
+</PersistQueryClientProvider>
+```
+
+This ensures that only successfully resolved queries are persisted to storage, preventing serialization issues with pending promises.
+
+## Experimental streaming without prefetching in Next.js
+
+While we recommend the prefetching solution detailed above because it flattens request waterfalls both on the initial page load **and** any subsequent page navigation, there is an experimental way to skip prefetching altogether and still have streaming SSR work: `@tanstack/react-query-next-experimental`
+
+This package will allow you to fetch data on the server (in a Client Component) by just calling `useSuspenseQuery` in your component. Results will then be streamed from the server to the client as SuspenseBoundaries resolve. If you call `useSuspenseQuery` without wrapping it in a `<Suspense>` boundary, the HTML response won't start until the fetch resolves. This can be what you want depending on the situation, but keep in mind that this will hurt your TTFB.
+
+To achieve this, wrap your app in the `ReactQueryStreamedHydration` component:
+
+```tsx
+// app/providers.tsx
+'use client'
+
+import {
+  environmentManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import * as React from 'react'
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+  if (environmentManager.isServer()) {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
+
+export function Providers(props: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryStreamedHydration>
+        {props.children}
+      </ReactQueryStreamedHydration>
+    </QueryClientProvider>
+  )
+}
+```
+
+For more information, check out the [NextJs Suspense Streaming Example](/query/framework/react/examples/nextjs-suspense-streaming).
+
+The big upside is that you no longer need to prefetch queries manually to have SSR work, and it even still streams in the result! This gives you phenomenal DX and lower code complexity.
+
+The downside is easiest to explain if we look back at [the complex request waterfall example](/query/framework/react/guides/request-waterfalls#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations:
+
+```
+1. |> JS for <Feed>
+2.   |> getFeed()
+3.     |> JS for <GraphFeedItem>
+4.       |> getGraphDataById()
+```
+
+This is even worse than with `getServerSideProps`/`getStaticProps`, since with those we could at least parallelize data- and code-fetching.
+
+If you value DX/iteration/shipping speed with low code complexity over performance, don't have deeply nested queries, or are on top of your request waterfalls with parallel fetching using tools like `useSuspenseQueries`, this can be a good tradeoff.
+
+> It might be possible to combine the two approaches, but even we haven't tried that out yet. If you do try this, please report back your findings, or even update these docs with some tips!
+
+## Final words
+
+Server Components and streaming are still fairly new concepts and we are still figuring out how React Query fits in and what improvements we can make to the API. We welcome suggestions, feedback and bug reports!
+
+Similarly, it would be impossible to teach all the intricacies of this new paradigm all in one guide, on the first try. If you are missing some piece of information here or have suggestions on how to improve this content, also get in touch, or even better, click the "Edit on GitHub" button below and help us out.
+
+[//]: # 'Materials'
+
+## Further reading
+
+To understand if your application can benefit from React Query when also using Server Components, see the article [You Might Not Need React Query](https://tkdodo.eu/blog/you-might-not-need-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/background-fetching-indicators.md b/mintlify/query/framework/react/guides/background-fetching-indicators.md
new file mode 100644
index 000000000..23d5b50f8
--- /dev/null
+++ b/mintlify/query/framework/react/guides/background-fetching-indicators.md
@@ -0,0 +1,60 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+---
+
+A query's `status === 'pending'` state is sufficient enough to show the initial hard-loading state for a query, but sometimes you may want to display an additional indicator that a query is refetching in the background. To do this, queries also supply you with an `isFetching` boolean that you can use to show that it's in a fetching state, regardless of the state of the `status` variable:
+
+[//]: # 'Example'
+
+```tsx
+function Todos() {
+  const {
+    status,
+    data: todos,
+    error,
+    isFetching,
+  } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+
+  return status === 'pending' ? (
+    <span>Loading...</span>
+  ) : status === 'error' ? (
+    <span>Error: {error.message}</span>
+  ) : (
+    <>
+      {isFetching ? <div>Refreshing...</div> : null}
+
+      <div>
+        {todos.map((todo) => (
+          <Todo todo={todo} />
+        ))}
+      </div>
+    </>
+  )
+}
+```
+
+[//]: # 'Example'
+
+## Displaying Global Background Fetching Loading State
+
+In addition to individual query loading states, if you would like to show a global loading indicator when **any** queries are fetching (including in the background), you can use the `useIsFetching` hook:
+
+[//]: # 'Example2'
+
+```tsx
+import { useIsFetching } from '@tanstack/react-query'
+
+function GlobalLoadingIndicator() {
+  const isFetching = useIsFetching()
+
+  return isFetching ? (
+    <div>Queries are fetching in the background...</div>
+  ) : null
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/react/guides/caching.md b/mintlify/query/framework/react/guides/caching.md
new file mode 100644
index 000000000..d6828fcae
--- /dev/null
+++ b/mintlify/query/framework/react/guides/caching.md
@@ -0,0 +1,33 @@
+---
+id: caching
+title: Caching Examples
+---
+
+> Please thoroughly read the [Important Defaults](/query/framework/react/guides/important-defaults) before reading this guide
+
+## Basic Example
+
+This caching example illustrates the story and lifecycle of:
+
+- Query Instances with and without cache data
+- Background Refetching
+- Inactive Queries
+- Garbage Collection
+
+Let's assume we are using the default `gcTime` of **5 minutes** and the default `staleTime` of `0`.
+
+- A new instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts.
+  - Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
+  - When the network request has completed, the returned data will be cached under the `['todos']` key.
+  - The data will be marked as stale after the configured `staleTime` (defaults to `0`, or immediately).
+- A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
+  - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
+  - The new instance triggers a new network request using its query function.
+    - Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](/query/framework/react/reference/useQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
+  - When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
+- Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
+  - Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
+- Before the cache timeout (gcTime) has completed, another instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
+- The final instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` unmounts.
+- No more instances of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` appear within **5 minutes**.
+  - The cached data under the `['todos']` key is deleted and garbage collected.
diff --git a/mintlify/query/framework/react/guides/default-query-function.md b/mintlify/query/framework/react/guides/default-query-function.md
new file mode 100644
index 000000000..d670e4a90
--- /dev/null
+++ b/mintlify/query/framework/react/guides/default-query-function.md
@@ -0,0 +1,56 @@
+---
+id: default-query-function
+title: Default Query Function
+---
+
+If you find yourself wishing for whatever reason that you could just share the same query function for your entire app and just use query keys to identify what it should fetch, you can do that by providing a **default query function** to TanStack Query:
+
+[//]: # 'Example'
+
+```tsx
+// Define a default query function that will receive the query key
+const defaultQueryFn = async ({ queryKey }) => {
+  const { data } = await axios.get(
+    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
+  )
+  return data
+}
+
+// provide the default query function to your app with defaultOptions
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+})
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <YourApp />
+    </QueryClientProvider>
+  )
+}
+
+// All you have to do now is pass a key!
+function Posts() {
+  const { status, data, error, isFetching } = useQuery({ queryKey: ['/posts'] })
+
+  // ...
+}
+
+// You can even leave out the queryFn and just go straight into options
+function Post({ postId }) {
+  const { status, data, error, isFetching } = useQuery({
+    queryKey: [`/posts/${postId}`],
+    enabled: !!postId,
+  })
+
+  // ...
+}
+```
+
+[//]: # 'Example'
+
+If you ever want to override the default queryFn, you can just provide your own like you normally would.
diff --git a/mintlify/query/framework/react/guides/dependent-queries.md b/mintlify/query/framework/react/guides/dependent-queries.md
new file mode 100644
index 000000000..2895deeaf
--- /dev/null
+++ b/mintlify/query/framework/react/guides/dependent-queries.md
@@ -0,0 +1,95 @@
+---
+id: dependent-queries
+title: Dependent Queries
+---
+
+## useQuery dependent Query
+
+Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the `enabled` option to tell a query when it is ready to run:
+
+[//]: # 'Example'
+
+```tsx
+// Get the user
+const { data: user } = useQuery({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+})
+
+const userId = user?.id
+
+// Then get the user's projects
+const {
+  status,
+  fetchStatus,
+  data: projects,
+} = useQuery({
+  queryKey: ['projects', userId],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the userId exists
+  enabled: !!userId,
+})
+```
+
+[//]: # 'Example'
+
+The `projects` query will start in:
+
+```tsx
+status: 'pending'
+isPending: true
+fetchStatus: 'idle'
+```
+
+As soon as the `user` is available, the `projects` query will be `enabled` and will then transition to:
+
+```tsx
+status: 'pending'
+isPending: true
+fetchStatus: 'fetching'
+```
+
+Once we have the projects, it will go to:
+
+```tsx
+status: 'success'
+isPending: false
+fetchStatus: 'idle'
+```
+
+## useQueries dependent Query
+
+Dynamic parallel query - `useQueries` can depend on a previous query also, here's how to achieve this:
+
+[//]: # 'Example2'
+
+```tsx
+// Get the users ids
+const { data: userIds } = useQuery({
+  queryKey: ['users'],
+  queryFn: getUsersData,
+  select: (users) => users.map((user) => user.id),
+})
+
+// Then get the users messages
+const usersMessages = useQueries({
+  queries: userIds
+    ? userIds.map((id) => {
+        return {
+          queryKey: ['messages', id],
+          queryFn: () => getMessagesByUsers(id),
+        }
+      })
+    : [], // if userIds is undefined, an empty array will be returned
+})
+```
+
+[//]: # 'Example2'
+
+**Note** that `useQueries` return an **array of query results**
+
+## A note about performance
+
+Dependent queries by definition constitutes a form of [request waterfall](/query/framework/react/guides/request-waterfalls), which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible.
+
+In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall.
diff --git a/mintlify/query/framework/react/guides/disabling-queries.md b/mintlify/query/framework/react/guides/disabling-queries.md
new file mode 100644
index 000000000..1b7773a39
--- /dev/null
+++ b/mintlify/query/framework/react/guides/disabling-queries.md
@@ -0,0 +1,126 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+---
+
+If you ever want to disable a query from automatically running, you can use the `enabled = false` option. The enabled option also accepts a callback that returns a boolean.
+
+When `enabled` is `false`:
+
+- If the query has cached data, then the query will be initialized in the `status === 'success'` or `isSuccess` state.
+- If the query does not have cached data, then the query will start in the `status === 'pending'` and `fetchStatus === 'idle'` state.
+- The query will not automatically fetch on mount.
+- The query will not automatically refetch in the background.
+- The query will ignore query client `invalidateQueries` and `refetchQueries` calls that would normally result in the query refetching.
+- `refetch` returned from `useQuery` can be used to manually trigger the query to fetch. However, it will not work with `skipToken`.
+
+> TypeScript users may prefer to use [skipToken](#typesafe-disabling-of-queries-using-skiptoken) as an alternative to `enabled = false`.
+
+[//]: # 'Example'
+
+```tsx
+function Todos() {
+  const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+    enabled: false,
+  })
+
+  return (
+    <div>
+      <button onClick={() => refetch()}>Fetch Todos</button>
+
+      {data ? (
+        <ul>
+          {data.map((todo) => (
+            <li key={todo.id}>{todo.title}</li>
+          ))}
+        </ul>
+      ) : isError ? (
+        <span>Error: {error.message}</span>
+      ) : isLoading ? (
+        <span>Loading...</span>
+      ) : (
+        <span>Not ready ...</span>
+      )}
+
+      <div>{isFetching ? 'Fetching...' : null}</div>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example'
+
+Permanently disabling a query opts out of many great features that TanStack Query has to offer (like background refetches), and it's also not the idiomatic way. It takes you from the declarative approach (defining dependencies when your query should run) into an imperative mode (fetch whenever I click here). It is also not possible to pass parameters to `refetch`. Oftentimes, all you want is a lazy query that defers the initial fetch:
+
+## Lazy Queries
+
+The enabled option can not only be used to permanently disable a query, but also to enable / disable it at a later time. A good example would be a filter form where you only want to fire off the first request once the user has entered a filter value:
+
+[//]: # 'Example2'
+
+```tsx
+function Todos() {
+  const [filter, setFilter] = React.useState('')
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    queryFn: () => fetchTodos(filter),
+    // ⬇️ disabled as long as the filter is empty
+    enabled: !!filter,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
+
+### isLoading (Previously: `isInitialLoading`)
+
+Lazy queries will be in `status: 'pending'` right from the start because `pending` means that there is no data yet. This is technically true, however, since we are not currently fetching any data (as the query is not _enabled_), it also means you likely cannot use this flag to show a loading spinner.
+
+If you are using disabled or lazy queries, you can use the `isLoading` flag instead. It's a derived flag that is computed from:
+
+`isPending && isFetching`
+
+so it will only be true if the query is currently fetching for the first time.
+
+## Typesafe disabling of queries using `skipToken`
+
+If you are using TypeScript, you can use the `skipToken` to disable a query. This is useful when you want to disable a query based on a condition, but you still want the query to be type safe.
+
+> **IMPORTANT**: `refetch` from `useQuery` will not work with `skipToken`. Calling `refetch()` on a query that uses `skipToken` will result in a `Missing queryFn` error because there is no valid query function to execute. If you need to manually trigger queries, consider using `enabled: false` instead, which allows `refetch()` to work properly. Other than this limitation, `skipToken` works the same as `enabled: false`.
+
+[//]: # 'Example3'
+
+```tsx
+import { skipToken, useQuery } from '@tanstack/react-query'
+
+function Todos() {
+  const [filter, setFilter] = React.useState<string | undefined>()
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    // ⬇️ disabled as long as the filter is undefined or empty
+    queryFn: filter ? () => fetchTodos(filter) : skipToken,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/react/guides/does-this-replace-client-state.md b/mintlify/query/framework/react/guides/does-this-replace-client-state.md
new file mode 100644
index 000000000..00c81f687
--- /dev/null
+++ b/mintlify/query/framework/react/guides/does-this-replace-client-state.md
@@ -0,0 +1,56 @@
+---
+id: does-this-replace-client-state
+title: Does TanStack Query replace Redux, MobX or other global state managers?
+---
+
+Well, let's start with a few important items:
+
+- TanStack Query is a **server-state** library, responsible for managing asynchronous operations between your server and client
+- Redux, MobX, Zustand, etc. are **client-state** libraries that _can be used to store asynchronous data, albeit inefficiently when compared to a tool like TanStack Query_
+
+With those points in mind, the short answer is that TanStack Query **replaces the boilerplate code and related wiring used to manage cache data in your client-state and replaces it with just a few lines of code.**
+
+For a vast majority of applications, the truly **globally accessible client state** that is left over after migrating all of your async code to TanStack Query is usually very tiny.
+
+> There are still some circumstances where an application might indeed have a massive amount of synchronous client-only state (like a visual designer or music production application), in which case, you will probably still want a client state manager. In this situation it's important to note that **TanStack Query is not a replacement for local/client state management**. However, you can use TanStack Query alongside most client state managers with zero issues.
+
+## A Contrived Example
+
+Here we have some "global" state being managed by a global state library:
+
+```tsx
+const globalState = {
+  projects,
+  teams,
+  tasks,
+  users,
+  themeMode,
+  sidebarStatus,
+}
+```
+
+Currently, the global state manager is caching 4 types of server-state: `projects`, `teams`, `tasks`, and `users`. If we were to move these server-state assets to TanStack Query, our remaining global state would look more like this:
+
+```tsx
+const globalState = {
+  themeMode,
+  sidebarStatus,
+}
+```
+
+This also means that with a few hook calls to `useQuery` and `useMutation`, we also get to remove any boilerplate code that was used to manage our server state e.g.
+
+- Connectors
+- Action Creators
+- Middlewares
+- Reducers
+- Loading/Error/Result states
+- Contexts
+
+With all of those things removed, you may ask yourself, **"Is it worth it to keep using our client state manager for this tiny global state?"**
+
+**And that's up to you!**
+
+But TanStack Query's role is clear. It removes asynchronous wiring and boilerplate from your application and replaces it with just a few lines of code.
+
+What are you waiting for, give it a go already!
diff --git a/mintlify/query/framework/react/guides/error-handling.md b/mintlify/query/framework/react/guides/error-handling.md
new file mode 100644
index 000000000..79af157a9
--- /dev/null
+++ b/mintlify/query/framework/react/guides/error-handling.md
@@ -0,0 +1,8 @@
+---
+title: "Error handling"
+description: "Compatibility target retained for an upstream cross-product link."
+---
+
+This compatibility page preserves a cross-product link used by the upstream documentation.
+
+[Continue to Error handling](https://tanstack.com/query/latest/docs/framework/react/guides/error-handling)
diff --git a/mintlify/query/framework/react/guides/filters.md b/mintlify/query/framework/react/guides/filters.md
new file mode 100644
index 000000000..e290c430f
--- /dev/null
+++ b/mintlify/query/framework/react/guides/filters.md
@@ -0,0 +1,90 @@
+---
+id: filters
+title: Filters
+---
+
+Some methods within TanStack Query accept a `QueryFilters` or `MutationFilters` object.
+
+## `Query Filters`
+
+A query filter is an object with certain conditions to match a query with:
+
+```tsx
+// Cancel all queries
+await queryClient.cancelQueries()
+
+// Remove all inactive queries that begin with `posts` in the key
+queryClient.removeQueries({ queryKey: ['posts'], type: 'inactive' })
+
+// Refetch all active queries
+await queryClient.refetchQueries({ type: 'active' })
+
+// Refetch all active queries that begin with `posts` in the key
+await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
+```
+
+A query filter object supports the following properties:
+
+- `queryKey?: QueryKey`
+  - Set this property to define a query key to match on.
+- `exact?: boolean`
+  - If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed.
+- `type?: 'active' | 'inactive' | 'all'`
+  - Defaults to `all`
+  - When set to `active` it will match active queries.
+  - When set to `inactive` it will match inactive queries.
+- `stale?: boolean`
+  - When set to `true` it will match stale queries.
+  - When set to `false` it will match fresh queries.
+- `fetchStatus?: FetchStatus`
+  - When set to `fetching` it will match queries that are currently fetching.
+  - When set to `paused` it will match queries that wanted to fetch, but have been `paused`.
+  - When set to `idle` it will match queries that are not fetching.
+- `predicate?: (query: Query) => boolean`
+  - This predicate function will be used as a final filter on all matching queries. If no other filters are specified, this function will be evaluated against every query in the cache.
+
+## `Mutation Filters`
+
+A mutation filter is an object with certain conditions to match a mutation with:
+
+```tsx
+// Get the number of all fetching mutations
+await queryClient.isMutating()
+
+// Filter mutations by mutationKey
+await queryClient.isMutating({ mutationKey: ['post'] })
+
+// Filter mutations using a predicate function
+await queryClient.isMutating({
+  predicate: (mutation) => mutation.state.variables?.id === 1,
+})
+```
+
+A mutation filter object supports the following properties:
+
+- `mutationKey?: MutationKey`
+  - Set this property to define a mutation key to match on.
+- `exact?: boolean`
+  - If you don't want to search mutations inclusively by mutation key, you can pass the `exact: true` option to return only the mutation with the exact mutation key you have passed.
+- `status?: MutationStatus`
+  - Allows for filtering mutations according to their status.
+- `predicate?: (mutation: Mutation) => boolean`
+  - This predicate function will be used as a final filter on all matching mutations. If no other filters are specified, this function will be evaluated against every mutation in the cache.
+
+## Utils
+
+### `matchQuery`
+
+```tsx
+const isMatching = matchQuery(filters, query)
+```
+
+Returns a boolean that indicates whether a query matches the provided set of query filters.
+
+### `matchMutation`
+
+```tsx
+const isMatching = matchMutation(filters, mutation)
+```
+
+Returns a boolean that indicates whether a mutation matches the provided set of mutation filters.
diff --git a/mintlify/query/framework/react/guides/important-defaults.md b/mintlify/query/framework/react/guides/important-defaults.md
new file mode 100644
index 000000000..2fbb36b24
--- /dev/null
+++ b/mintlify/query/framework/react/guides/important-defaults.md
@@ -0,0 +1,55 @@
+---
+id: important-defaults
+title: Important Defaults
+---
+
+Out of the box, TanStack Query is configured with **aggressive but sane** defaults. **Sometimes these defaults can catch new users off guard or make learning/debugging difficult if they are unknown by the user.** Keep them in mind as you continue to learn and use TanStack Query:
+
+- Query instances via `useQuery` or `useInfiniteQuery` by default **consider cached data as stale**.
+
+> To change this behavior, you can configure your queries both globally and per-query using the `staleTime` option. Specifying a longer `staleTime` means queries will not refetch their data as often
+
+- A Query that has a `staleTime` set is considered **fresh** until that `staleTime` has elapsed.
+  - set `staleTime` to e.g. `2 * 60 * 1000` to make sure data is read from the cache, without triggering any kinds of refetches, for 2 minutes, or until the Query is [invalidated manually](/query/framework/react/guides/query-invalidation).
+  - set `staleTime` to `Infinity` to never trigger a refetch until the Query is [invalidated manually](/query/framework/react/guides/query-invalidation).
+  - set `staleTime` to `'static'` to **never** trigger a refetch, even if the Query is [invalidated manually](/query/framework/react/guides/query-invalidation).
+
+> `'static'` and `Infinity` both prevent staleness-based refetches, but `'static'` is stricter: `queryClient.invalidateQueries()` can invalidate a query with `staleTime: Infinity`, but has no effect on `staleTime: 'static'`. `refetchOnMount`, `refetchOnWindowFocus`, and `refetchOnReconnect` set to `"always"` are also blocked by `'static'`. Use `'static'` for data that cannot change while the app is running: feature flags fetched at boot, user permissions loaded at login, static reference tables. Use `Infinity` when you still want manual invalidation to work.
+
+- Stale queries are refetched automatically in the background when:
+  - New instances of the query mount
+  - The window is refocused
+  - The network is reconnected
+
+> Setting `staleTime` is the recommended way to avoid excessive refetches, but you can also customize the points in time for refetches by setting options like `refetchOnMount`, `refetchOnWindowFocus` and `refetchOnReconnect`.
+
+- Queries can optionally be configured with a `refetchInterval` to trigger refetches periodically, which is independent of the `staleTime` setting. See [Polling](/query/framework/react/guides/polling) for details.
+
+- Query results that have no more active instances of `useQuery`, `useInfiniteQuery` or query observers are labeled as "inactive" and remain in the cache in case they are used again at a later time.
+- By default, "inactive" queries are garbage collected after **5 minutes**.
+
+  > To change this, you can alter the default `gcTime` for queries to something other than `1000 * 60 * 5` milliseconds.
+
+- Queries that fail are **silently retried 3 times, with exponential backoff delay** before capturing and displaying an error to the UI.
+
+  > To change this, you can alter the default `retry` and `retryDelay` options for queries to something other than `3` and the default exponential backoff function.
+
+[//]: # 'StructuralSharing'
+
+- Query results by default are **structurally shared to detect if data has actually changed** and if not, **the data reference remains unchanged** to better help with value stabilization with regards to useMemo and useCallback. If this concept sounds foreign, then don't worry about it! 99.9% of the time you will not need to disable this and it makes your app more performant at zero cost to you.
+
+[//]: # 'StructuralSharing'
+
+> Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the `config.structuralSharing` flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can provide your own custom function as `config.structuralSharing` to compute a value from the old and new responses, retaining references as required.
+
+[//]: # 'Materials'
+
+## Further Reading
+
+Have a look at the following articles from our [Community Resources](/query/community-resources) for further explanations of the defaults:
+
+- [Practical React Query](https://tkdodo.eu/blog/practical-react-query)
+- [React Query as a State Manager](https://tkdodo.eu/blog/react-query-as-a-state-manager)
+- [Thinking in React Query](https://tkdodo.eu/blog/thinking-in-react-query)
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/infinite-queries.md b/mintlify/query/framework/react/guides/infinite-queries.md
new file mode 100644
index 000000000..dccadec1a
--- /dev/null
+++ b/mintlify/query/framework/react/guides/infinite-queries.md
@@ -0,0 +1,266 @@
+---
+id: infinite-queries
+title: Infinite Queries
+---
+
+Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of `useQuery` called `useInfiniteQuery` for querying these types of lists.
+
+When using `useInfiniteQuery`, you'll notice a few things are different:
+
+- `data` is now an object containing infinite query data:
+- `data.pages` array containing the fetched pages
+- `data.pageParams` array containing the page params used to fetch the pages
+- The `fetchNextPage` and `fetchPreviousPage` functions are now available (`fetchNextPage` is required)
+- The `initialPageParam` option is now available (and required) to specify the initial page param
+- The `getNextPageParam` and `getPreviousPageParam` options are available for both determining if there is more data to load and the information to fetch it. This information is supplied as an additional parameter in the query function
+- A `hasNextPage` boolean is now available and is `true` if `getNextPageParam` returns a value other than `null` or `undefined`
+- A `hasPreviousPage` boolean is now available and is `true` if `getPreviousPageParam` returns a value other than `null` or `undefined`
+- The `isFetchingNextPage` and `isFetchingPreviousPage` booleans are now available to distinguish between a background refresh state and a loading more state
+
+> Note: Options `initialData` or `placeholderData` need to conform to the same structure of an object with `data.pages` and `data.pageParams` properties.
+
+## Example
+
+Let's assume we have an API that returns pages of `projects` 3 at a time based on a `cursor` index along with a cursor that can be used to fetch the next group of projects:
+
+```tsx
+fetch('/api/projects?cursor=0')
+// { data: [...], nextCursor: 3}
+fetch('/api/projects?cursor=3')
+// { data: [...], nextCursor: 6}
+fetch('/api/projects?cursor=6')
+// { data: [...], nextCursor: 9}
+fetch('/api/projects?cursor=9')
+// { data: [...] }
+```
+
+With this information, we can create a "Load More" UI by:
+
+- Waiting for `useInfiniteQuery` to request the first group of data by default
+- Returning the information for the next query in `getNextPageParam`
+- Calling `fetchNextPage` function
+
+[//]: # 'Example'
+
+```tsx
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+function Projects() {
+  const fetchProjects = async ({ pageParam }) => {
+    const res = await fetch('/api/projects?cursor=' + pageParam)
+    return res.json()
+  }
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    status,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  })
+
+  return status === 'pending' ? (
+    <p>Loading...</p>
+  ) : status === 'error' ? (
+    <p>Error: {error.message}</p>
+  ) : (
+    <>
+      {data.pages.map((group, i) => (
+        <React.Fragment key={i}>
+          {group.data.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        </React.Fragment>
+      ))}
+      <div>
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={!hasNextPage || isFetching}
+        >
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
+        </button>
+      </div>
+      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
+    </>
+  )
+}
+```
+
+[//]: # 'Example'
+
+It's essential to understand that calling `fetchNextPage` while an ongoing fetch is in progress runs the risk of overwriting data refreshes happening in the background. This situation becomes particularly critical when rendering a list and triggering `fetchNextPage` simultaneously.
+
+Remember, there can only be a single ongoing fetch for an InfiniteQuery. A single cache entry is shared for all pages, attempting to fetch twice simultaneously might lead to data overwrites.
+
+If you intend to enable simultaneous fetching, you can utilize the `{ cancelRefetch: false }` option (default: true) within `fetchNextPage`.
+
+To ensure a seamless querying process without conflicts, it's highly recommended to verify that the query is not in an `isFetching` state, especially if the user won't directly control that call.
+
+[//]: # 'Example1'
+
+```jsx
+<List onEndReached={() => hasNextPage && !isFetching && fetchNextPage()} />
+```
+
+[//]: # 'Example1'
+
+## What happens when an infinite query needs to be refetched?
+
+When an infinite query becomes `stale` and needs to be refetched, each group is fetched `sequentially`, starting from the first one. This ensures that even if the underlying data is mutated, we're not using stale cursors and potentially getting duplicates or skipping records. If an infinite query's results are ever removed from the queryCache, the pagination restarts at the initial state with only the initial group being requested.
+
+## What if I want to implement a bi-directional infinite list?
+
+Bi-directional lists can be implemented by using the `getPreviousPageParam`, `fetchPreviousPage`, `hasPreviousPage` and `isFetchingPreviousPage` properties and functions.
+
+[//]: # 'Example3'
+
+```tsx
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+})
+```
+
+[//]: # 'Example3'
+
+## What if I want to show the pages in reversed order?
+
+Sometimes you may want to show the pages in reversed order. If this is case, you can use the `select` option:
+
+[//]: # 'Example4'
+
+```tsx
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  select: (data) => ({
+    pages: [...data.pages].reverse(),
+    pageParams: [...data.pageParams].reverse(),
+  }),
+})
+```
+
+[//]: # 'Example4'
+
+## What if I want to manually update the infinite query?
+
+### Manually removing first page:
+
+[//]: # 'Example5'
+
+```tsx
+queryClient.setQueryData(['projects'], (data) => ({
+  pages: data.pages.slice(1),
+  pageParams: data.pageParams.slice(1),
+}))
+```
+
+[//]: # 'Example5'
+
+### Manually removing a single value from an individual page:
+
+[//]: # 'Example6'
+
+```tsx
+const newPagesArray =
+  oldPagesArray?.pages.map((page) =>
+    page.filter((val) => val.id !== updatedId),
+  ) ?? []
+
+queryClient.setQueryData(['projects'], (data) => ({
+  pages: newPagesArray,
+  pageParams: data.pageParams,
+}))
+```
+
+[//]: # 'Example6'
+
+### Keep only the first page:
+
+[//]: # 'Example7'
+
+```tsx
+queryClient.setQueryData(['projects'], (data) => ({
+  pages: data.pages.slice(0, 1),
+  pageParams: data.pageParams.slice(0, 1),
+}))
+```
+
+[//]: # 'Example7'
+
+Make sure to always keep the same data structure of pages and pageParams!
+
+## What if I want to limit the number of pages?
+
+In some use cases you may want to limit the number of pages stored in the query data to improve the performance and UX:
+
+- when the user can load a large number of pages (memory usage)
+- when you have to refetch an infinite query that contains dozens of pages (network usage: all the pages are sequentially fetched)
+
+The solution is to use a "Limited Infinite Query". This is made possible by using the `maxPages` option in conjunction with `getNextPageParam` and `getPreviousPageParam` to allow fetching pages when needed in both directions.
+
+In the following example only 3 pages are kept in the query data pages array. If a refetch is needed, only 3 pages will be refetched sequentially.
+
+[//]: # 'Example8'
+
+```tsx
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+  maxPages: 3,
+})
+```
+
+[//]: # 'Example8'
+
+## What if my API doesn't return a cursor?
+
+If your API doesn't return a cursor, you can use the `pageParam` as a cursor. Because `getNextPageParam` and `getPreviousPageParam` also get the `pageParam`of the current page, you can use it to calculate the next / previous page param.
+
+[//]: # 'Example9'
+
+```tsx
+return useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    if (lastPage.length === 0) {
+      return undefined
+    }
+    return lastPageParam + 1
+  },
+  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
+    if (firstPageParam <= 1) {
+      return undefined
+    }
+    return firstPageParam - 1
+  },
+})
+```
+
+[//]: # 'Example9'
+[//]: # 'Materials'
+
+## Further reading
+
+To get a better understanding of how Infinite Queries work under the hood, see the article [How Infinite Queries work](https://tkdodo.eu/blog/how-infinite-queries-work).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/initial-query-data.md b/mintlify/query/framework/react/guides/initial-query-data.md
new file mode 100644
index 000000000..c78551640
--- /dev/null
+++ b/mintlify/query/framework/react/guides/initial-query-data.md
@@ -0,0 +1,175 @@
+---
+id: initial-query-data
+title: Initial Query Data
+---
+
+There are many ways to supply initial data for a query to the cache before you need it:
+
+- Declaratively:
+  - Provide `initialData` to a query to prepopulate its cache if empty
+- Imperatively:
+  - [Prefetch the data using `queryClient.prefetchQuery`](/query/framework/react/guides/prefetching)
+  - [Manually place the data into the cache using `queryClient.setQueryData`](/query/framework/react/guides/prefetching)
+
+## Using `initialData` to prepopulate a query
+
+There may be times when you already have the initial data for a query available in your app and can simply provide it directly to your query. If and when this is the case, you can use the `config.initialData` option to set the initial data for a query and skip the initial loading state!
+
+> IMPORTANT: `initialData` is persisted to the cache, so it is not recommended to provide placeholder, partial or incomplete data to this option and instead use `placeholderData`
+
+[//]: # 'Example'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+})
+```
+
+[//]: # 'Example'
+
+### `staleTime` and `initialDataUpdatedAt`
+
+By default, `initialData` is treated as totally fresh, as if it were just fetched. This also means that it will affect how it is interpreted by the `staleTime` option.
+
+- If you configure your query observer with `initialData`, and no `staleTime` (the default `staleTime: 0`), the query will immediately refetch when it mounts:
+
+  [//]: # 'Example2'
+
+  ```tsx
+  // Will show initialTodos immediately, but also immediately refetch todos after mount
+  const result = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    initialData: initialTodos,
+  })
+  ```
+
+  [//]: # 'Example2'
+
+- If you configure your query observer with `initialData` and a `staleTime` of `1000` ms, the data will be considered fresh for that same amount of time, as if it was just fetched from your query function.
+
+  [//]: # 'Example3'
+
+  ```tsx
+  // Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
+  const result = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    initialData: initialTodos,
+    staleTime: 1000,
+  })
+  ```
+
+  [//]: # 'Example3'
+
+- So what if your `initialData` isn't totally fresh? That leaves us with the last configuration that is actually the most accurate and uses an option called `initialDataUpdatedAt`. This option allows you to pass a numeric JS timestamp in milliseconds of when the initialData itself was last updated, e.g. what `Date.now()` provides. Take note that if you have a unix timestamp, you'll need to convert it to a JS timestamp by multiplying it by `1000`.
+
+  [//]: # 'Example4'
+
+  ```tsx
+  // Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
+  const result = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    initialData: initialTodos,
+    staleTime: 60 * 1000, // 1 minute
+    // This could be 10 seconds ago or 10 minutes ago
+    initialDataUpdatedAt: initialTodosUpdatedTimestamp, // eg. 1608412420052
+  })
+  ```
+
+  [//]: # 'Example4'
+
+  This option allows the staleTime to be used for its original purpose, determining how fresh the data needs to be, while also allowing the data to be refetched on mount if the `initialData` is older than the `staleTime`. In the example above, our data needs to be fresh within 1 minute, and we can hint to the query when the initialData was last updated so the query can decide for itself whether the data needs to be refetched again or not.
+
+  > If you would rather treat your data as **prefetched data**, we recommend that you use the `prefetchQuery` or `fetchQuery` APIs to populate the cache beforehand, thus letting you configure your `staleTime` independently from your initialData
+
+### Initial Data Function
+
+If the process for accessing a query's initial data is intensive or just not something you want to perform on every render, you can pass a function as the `initialData` value. This function will be executed only once when the query is initialized, saving you precious memory and/or CPU:
+
+[//]: # 'Example5'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: () => getExpensiveTodos(),
+})
+```
+
+[//]: # 'Example5'
+
+### Initial Data from Cache
+
+In some circumstances, you may be able to provide the initial data for a query from the cached result of another. A good example of this would be searching the cached data from a todos list query for an individual todo item, then using that as the initial data for your individual todo query:
+
+[//]: # 'Example6'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todo', todoId],
+  queryFn: () => fetch('/todos'),
+  initialData: () => {
+    // Use a todo from the 'todos' query as the initial data for this todo query
+    return queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId)
+  },
+})
+```
+
+[//]: # 'Example6'
+
+### Initial Data from the cache with `initialDataUpdatedAt`
+
+Getting initial data from the cache means the source query you're using to look up the initial data from is likely old. Instead of using an artificial `staleTime` to keep your query from refetching immediately, it's suggested that you pass the source query's `dataUpdatedAt` to `initialDataUpdatedAt`. This provides the query instance with all the information it needs to determine if and when the query needs to be refetched, regardless of initial data being provided.
+
+[//]: # 'Example7'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos', todoId],
+  queryFn: () => fetch(`/todos/${todoId}`),
+  initialData: () =>
+    queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId),
+  initialDataUpdatedAt: () =>
+    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
+})
+```
+
+[//]: # 'Example7'
+
+### Conditional Initial Data from Cache
+
+If the source query you're using to look up the initial data from is old, you may not want to use the cached data at all and just fetch from the server. To make this decision easier, you can use the `queryClient.getQueryState` method instead to get more information about the source query, including a `state.dataUpdatedAt` timestamp you can use to decide if the query is "fresh" enough for your needs:
+
+[//]: # 'Example8'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todo', todoId],
+  queryFn: () => fetch(`/todos/${todoId}`),
+  initialData: () => {
+    // Get the query state
+    const state = queryClient.getQueryState(['todos'])
+
+    // If the query exists and has data that is no older than 10 seconds...
+    if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {
+      // return the individual todo
+      return state.data.find((d) => d.id === todoId)
+    }
+
+    // Otherwise, return undefined and let it fetch from a hard loading state!
+  },
+})
+```
+
+[//]: # 'Example8'
+[//]: # 'Materials'
+
+## Further reading
+
+For a comparison between `Initial Data` and `Placeholder Data`, see the [article by TkDodo](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/invalidations-from-mutations.md b/mintlify/query/framework/react/guides/invalidations-from-mutations.md
new file mode 100644
index 000000000..8fb0536a1
--- /dev/null
+++ b/mintlify/query/framework/react/guides/invalidations-from-mutations.md
@@ -0,0 +1,57 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+---
+
+Invalidating queries is only half the battle. Knowing **when** to invalidate them is the other half. Usually when a mutation in your app succeeds, it's VERY likely that there are related queries in your application that need to be invalidated and possibly refetched to account for the new changes from your mutation.
+
+For example, assume we have a mutation to post a new todo:
+
+[//]: # 'Example'
+
+```tsx
+const mutation = useMutation({ mutationFn: postTodo })
+```
+
+[//]: # 'Example'
+
+When a successful `postTodo` mutation happens, we likely want all `todos` queries to get invalidated and possibly refetched to show the new todo item. To do this, you can use `useMutation`'s `onSuccess` options and the `client`'s `invalidateQueries` function:
+
+[//]: # 'Example2'
+
+```tsx
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+const queryClient = useQueryClient()
+
+// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
+const mutation = useMutation({
+  mutationFn: addTodo,
+  onSuccess: async () => {
+    // If you're invalidating a single query
+    await queryClient.invalidateQueries({ queryKey: ['todos'] })
+
+    // If you're invalidating multiple queries
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['todos'] }),
+      queryClient.invalidateQueries({ queryKey: ['reminders'] }),
+    ])
+  },
+})
+```
+
+[//]: # 'Example2'
+
+Returning a Promise on `onSuccess` makes sure the data is updated before the mutation is entirely complete (i.e., isPending is true until onSuccess is fulfilled)
+
+[//]: # 'Example2'
+
+You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](/query/framework/react/guides/mutations)
+
+[//]: # 'Materials'
+
+## Further reading
+
+For a technique to automatically invalidate Queries after Mutations, have a look at [TkDodo's article on Automatic Query Invalidation after Mutations](https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/migrating-to-react-query-3.md b/mintlify/query/framework/react/guides/migrating-to-react-query-3.md
new file mode 100644
index 000000000..1100e126c
--- /dev/null
+++ b/mintlify/query/framework/react/guides/migrating-to-react-query-3.md
@@ -0,0 +1,590 @@
+---
+id: migrating-to-react-query-3
+title: Migrating to React Query 3
+---
+
+Previous versions of React Query were awesome and brought some amazing new features, more magic, and an overall better experience to the library. They also brought on massive adoption and likewise a lot of refining fire (issues/contributions) to the library and brought to light a few things that needed more polish to make the library even better. v3 contains that very polish.
+
+## Overview
+
+- More scalable and testable cache configuration
+- Better SSR support
+- Data-lag (previously usePaginatedQuery) anywhere!
+- Bi-directional Infinite Queries
+- Query data selectors!
+- Fully configure defaults for queries and/or mutations before use
+- More granularity for optional rendering optimization
+- New `useQueries` hook! (Variable-length parallel query execution)
+- Query filter support for the `useIsFetching()` hook!
+- Retry/offline/replay support for mutations
+- Observe queries/mutations outside of React
+- Use the React Query core logic anywhere you want!
+- Bundled/Colocated Devtools via `react-query/devtools`
+- Cache Persistence to web storage (experimental via `react-query/persistQueryClient-experimental` and `react-query/createWebStoragePersistor-experimental`)
+
+## Breaking Changes
+
+### The `QueryCache` has been split into a `QueryClient` and lower-level `QueryCache` and `MutationCache` instances.
+
+The `QueryCache` contains all queries, the `MutationCache` contains all mutations, and the `QueryClient` can be used to set configuration and to interact with them.
+
+This has some benefits:
+
+- Allows for different types of caches.
+- Multiple clients with different configurations can use the same cache.
+- Clients can be used to track queries, which can be used for shared caches on SSR.
+- The client API is more focused towards general usage.
+- Easier to test the individual components.
+
+When creating a `new QueryClient()`, a `QueryCache` and `MutationCache` are automatically created for you if you don't supply them.
+
+```tsx
+import { QueryClient } from 'react-query'
+
+const queryClient = new QueryClient()
+```
+
+### `ReactQueryConfigProvider` and `ReactQueryCacheProvider` have both been replaced by `QueryClientProvider`
+
+Default options for queries and mutations can now be specified in `QueryClient`:
+
+**Notice that it's now defaultOptions instead of defaultConfig**
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // query options
+    },
+    mutations: {
+      // mutation options
+    },
+  },
+})
+```
+
+The `QueryClientProvider` component is now used to connect a `QueryClient` to your application:
+
+```tsx
+import { QueryClient, QueryClientProvider } from 'react-query'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
+}
+```
+
+### The default `QueryCache` is gone. **For real this time!**
+
+As previously noted with a deprecation, there is no longer a default `QueryCache` that is created or exported from the main package. **You must create your own via `new QueryClient()` or `new QueryCache()` (which you can then pass to `new QueryClient({ queryCache })` )**
+
+### The deprecated `makeQueryCache` utility has been removed.
+
+It's been a long time coming, but it's finally gone :)
+
+### `QueryCache.prefetchQuery()` has been moved to `QueryClient.prefetchQuery()`
+
+The new `QueryClient.prefetchQuery()` function is async, but **does not return the data from the query**. If you require the data, use the new `QueryClient.fetchQuery()` function
+
+```tsx
+// Prefetch a query:
+await queryClient.prefetchQuery('posts', fetchPosts)
+
+// Fetch a query:
+try {
+  const data = await queryClient.fetchQuery('posts', fetchPosts)
+} catch (error) {
+  // Error handling
+}
+```
+
+### `ReactQueryErrorResetBoundary` and `QueryCache.resetErrorBoundaries()` have been replaced by `QueryErrorResetBoundary` and `useQueryErrorResetBoundary()`.
+
+Together, these provide the same experience as before, but with added control to choose which component trees you want to reset. For more information, see:
+
+- [QueryErrorResetBoundary](/query/framework/react/reference/QueryErrorResetBoundary)
+- [useQueryErrorResetBoundary](/query/framework/react/reference/useQueryErrorResetBoundary)
+
+### `QueryCache.getQuery()` has been replaced by `QueryCache.find()`.
+
+`QueryCache.find()` should now be used to look up individual queries from a cache
+
+### `QueryCache.getQueries()` has been moved to `QueryCache.findAll()`.
+
+`QueryCache.findAll()` should now be used to look up multiple queries from a cache
+
+### `QueryCache.isFetching` has been moved to `QueryClient.isFetching()`.
+
+**Notice that it's now a function instead of a property**
+
+### The `useQueryCache` hook has been replaced by the `useQueryClient` hook.
+
+It returns the provided `queryClient` for its component tree and shouldn't need much tweaking beyond a rename.
+
+### Query key parts/pieces are no longer automatically spread to the query function.
+
+Inline functions are now the suggested way of passing parameters to your query functions:
+
+```tsx
+// Old
+useQuery(['post', id], (_key, id) => fetchPost(id))
+
+// New
+useQuery(['post', id], () => fetchPost(id))
+```
+
+If you still insist on not using inline functions, you can use the newly passed `QueryFunctionContext`:
+
+```tsx
+useQuery(['post', id], (context) => fetchPost(context.queryKey[1]))
+```
+
+### Infinite Query Page params are now passed via `QueryFunctionContext.pageParam`
+
+They were previously added as the last query key parameter in your query function, but this proved to be difficult for some patterns
+
+```tsx
+// Old
+useInfiniteQuery(['posts'], (_key, pageParam = 0) => fetchPosts(pageParam))
+
+// New
+useInfiniteQuery(['posts'], ({ pageParam = 0 }) => fetchPosts(pageParam))
+```
+
+### usePaginatedQuery() has been removed in favor of the `keepPreviousData` option
+
+The new `keepPreviousData` options is available for both `useQuery` and `useInfiniteQuery` and will have the same "lagging" effect on your data:
+
+```tsx
+import { useQuery } from 'react-query'
+
+function Page({ page }) {
+  const { data } = useQuery(['page', page], fetchPage, {
+    keepPreviousData: true,
+  })
+}
+```
+
+### useInfiniteQuery() is now bi-directional
+
+The `useInfiniteQuery()` interface has changed to fully support bi-directional infinite lists.
+
+- `options.getFetchMore` has been renamed to `options.getNextPageParam`
+- `queryResult.canFetchMore` has been renamed to `queryResult.hasNextPage`
+- `queryResult.fetchMore` has been renamed to `queryResult.fetchNextPage`
+- `queryResult.isFetchingMore` has been renamed to `queryResult.isFetchingNextPage`
+- Added the `options.getPreviousPageParam` option
+- Added the `queryResult.hasPreviousPage` property
+- Added the `queryResult.fetchPreviousPage` property
+- Added the `queryResult.isFetchingPreviousPage`
+- The `data` of an infinite query is now an object containing the `pages` and the `pageParams` used to fetch the pages: `{ pages: [data, data, data], pageParams: [...]}`
+
+One direction:
+
+```tsx
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  useInfiniteQuery(
+    'projects',
+    ({ pageParam = 0 }) => fetchProjects(pageParam),
+    {
+      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    },
+  )
+```
+
+Both directions:
+
+```tsx
+const {
+  data,
+  fetchNextPage,
+  fetchPreviousPage,
+  hasNextPage,
+  hasPreviousPage,
+  isFetchingNextPage,
+  isFetchingPreviousPage,
+} = useInfiniteQuery(
+  'projects',
+  ({ pageParam = 0 }) => fetchProjects(pageParam),
+  {
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+  },
+)
+```
+
+One direction reversed:
+
+```tsx
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  useInfiniteQuery(
+    'projects',
+    ({ pageParam = 0 }) => fetchProjects(pageParam),
+    {
+      select: (data) => ({
+        pages: [...data.pages].reverse(),
+        pageParams: [...data.pageParams].reverse(),
+      }),
+      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    },
+  )
+```
+
+### Infinite Query data now contains the array of pages and pageParams used to fetch those pages.
+
+This allows for easier manipulation of the data and the page params, like, for example, removing the first page of data along with it's params:
+
+```tsx
+queryClient.setQueryData(['projects'], (data) => ({
+  pages: data.pages.slice(1),
+  pageParams: data.pageParams.slice(1),
+}))
+```
+
+### useMutation now returns an object instead of an array
+
+Though the old way gave us warm fuzzy feelings of when we first discovered `useState` for the first time, they didn't last long. Now the mutation return is a single object.
+
+```tsx
+// Old:
+const [mutate, { status, reset }] = useMutation()
+
+// New:
+const { mutate, status, reset } = useMutation()
+```
+
+### `mutation.mutate` no longer return a promise
+
+- The `[mutate]` variable has been changed to the `mutation.mutate` function
+- Added the `mutation.mutateAsync` function
+
+We got a lot of questions regarding this behavior as users expected the promise to behave like a regular promise.
+
+Because of this the `mutate` function is now split into a `mutate` and `mutateAsync` function.
+
+The `mutate` function can be used when using callbacks:
+
+```tsx
+const { mutate } = useMutation({ mutationFn: addTodo })
+
+mutate('todo', {
+  onSuccess: (data) => {
+    console.log(data)
+  },
+  onError: (error) => {
+    console.error(error)
+  },
+  onSettled: () => {
+    console.log('settled')
+  },
+})
+```
+
+The `mutateAsync` function can be used when using async/await:
+
+```tsx
+const { mutateAsync } = useMutation({ mutationFn: addTodo })
+
+try {
+  const data = await mutateAsync('todo')
+  console.log(data)
+} catch (error) {
+  console.error(error)
+} finally {
+  console.log('settled')
+}
+```
+
+### The object syntax for useQuery now uses a collapsed config:
+
+```tsx
+// Old:
+useQuery({
+  queryKey: 'posts',
+  queryFn: fetchPosts,
+  config: { staleTime: Infinity },
+})
+
+// New:
+useQuery({
+  queryKey: 'posts',
+  queryFn: fetchPosts,
+  staleTime: Infinity,
+})
+```
+
+### If set, the QueryOptions.enabled option must be a boolean (`true`/`false`)
+
+The `enabled` query option will now only disable a query when the value is `false`.
+If needed, values can be casted with `!!userId` or `Boolean(userId)` and a handy error will be thrown if a non-boolean value is passed.
+
+### The QueryOptions.initialStale option has been removed
+
+The `initialStale` query option has been removed and initial data is now treated as regular data.
+Which means that if `initialData` is provided, the query will refetch on mount by default.
+If you do not want to refetch immediately, you can define a `staleTime`.
+
+### The `QueryOptions.forceFetchOnMount` option has been replaced by `refetchOnMount: 'always'`
+
+Honestly, we were accruing way too many `refetchOn____` options, so this should clean things up.
+
+### The `QueryOptions.refetchOnMount` options now only applies to its parent component instead of all query observers
+
+When `refetchOnMount` was set to `false` any additional components were prevented from refetching on mount.
+In version 3 only the component where the option has been set will not refetch on mount.
+
+### The `QueryOptions.queryFnParamsFilter` has been removed in favor of the new `QueryFunctionContext` object.
+
+The `queryFnParamsFilter` option has been removed because query functions now get a `QueryFunctionContext` object instead of the query key.
+
+Parameters can still be filtered within the query function itself as the `QueryFunctionContext` also contains the query key.
+
+### The `QueryOptions.notifyOnStatusChange` option has been superseded by the new `notifyOnChangeProps` and `notifyOnChangePropsExclusions` options.
+
+With these new options it is possible to configure when a component should re-render on a granular level.
+
+Only re-render when the `data` or `error` properties change:
+
+```tsx
+import { useQuery } from 'react-query'
+
+function User() {
+  const { data } = useQuery(['user'], fetchUser, {
+    notifyOnChangeProps: ['data', 'error'],
+  })
+  return <div>Username: {data.username}</div>
+}
+```
+
+Prevent re-render when the `isStale` property changes:
+
+```tsx
+import { useQuery } from 'react-query'
+
+function User() {
+  const { data } = useQuery(['user'], fetchUser, {
+    notifyOnChangePropsExclusions: ['isStale'],
+  })
+  return <div>Username: {data.username}</div>
+}
+```
+
+### The `QueryResult.clear()` function has been renamed to `QueryResult.remove()`
+
+Although it was called `clear`, it really just removed the query from the cache. The name now matches the functionality.
+
+### The `QueryResult.updatedAt` property has been split into `QueryResult.dataUpdatedAt` and `QueryResult.errorUpdatedAt` properties
+
+Because data and errors can be present at the same time, the `updatedAt` property has been split into `dataUpdatedAt` and `errorUpdatedAt`.
+
+### `setConsole()` has been replaced by the new `setLogger()` function
+
+```tsx
+import { setLogger } from 'react-query'
+
+// Log with Sentry
+setLogger({
+  error: (error) => {
+    Sentry.captureException(error)
+  },
+})
+
+// Log with Winston
+setLogger(winston.createLogger())
+```
+
+### React Native no longer requires overriding the logger
+
+To prevent showing error screens in React Native when a query fails it was necessary to manually change the Console:
+
+```tsx
+import { setConsole } from 'react-query'
+
+setConsole({
+  log: console.log,
+  warn: console.warn,
+  error: console.warn,
+})
+```
+
+In version 3 **this is done automatically when React Query is used in React Native**.
+
+### Typescript
+
+#### `QueryStatus` has been changed from an [enum](https://www.typescriptlang.org/docs/handbook/enums.html#string-enums) to a [union type](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)
+
+So, if you were checking the status property of a query or mutation against a QueryStatus enum property you will have to check it now against the string literal the enum previously held for each property.
+
+Therefore you have to change the enum properties to their equivalent string literal, like this:
+
+- `QueryStatus.Idle` -> `'idle'`
+- `QueryStatus.Loading` -> `'loading'`
+- `QueryStatus.Error` -> `'error'`
+- `QueryStatus.Success` -> `'success'`
+
+Here is an example of the changes you would have to make:
+
+```tsx
+- import { useQuery, QueryStatus } from 'react-query'; // [!code --]
++ import { useQuery } from 'react-query'; // [!code ++]
+
+const { data, status } = useQuery(['post', id], () => fetchPost(id))
+
+- if (status === QueryStatus.Loading) { // [!code --]
++ if (status === 'loading') { // [!code ++]
+  ...
+}
+
+- if (status === QueryStatus.Error) { // [!code --]
++ if (status === 'error') { // [!code ++]
+  ...
+}
+```
+
+## New features
+
+#### Query Data Selectors
+
+The `useQuery` and `useInfiniteQuery` hooks now have a `select` option to select or transform parts of the query result.
+
+```tsx
+import { useQuery } from 'react-query'
+
+function User() {
+  const { data } = useQuery(['user'], fetchUser, {
+    select: (user) => user.username,
+  })
+  return <div>Username: {data}</div>
+}
+```
+
+Set the `notifyOnChangeProps` option to `['data', 'error']` to only re-render when the selected data changes.
+
+#### The useQueries() hook, for variable-length parallel query execution
+
+Wish you could run `useQuery` in a loop? The rules of hooks say no, but with the new `useQueries()` hook, you can!
+
+```tsx
+import { useQueries } from 'react-query'
+
+function Overview() {
+  const results = useQueries([
+    { queryKey: ['post', 1], queryFn: fetchPost },
+    { queryKey: ['post', 2], queryFn: fetchPost },
+  ])
+  return (
+    <ul>
+      {results.map(({ data }) => data && <li key={data.id}>{data.title})</li>)}
+    </ul>
+  )
+}
+```
+
+#### Retry/offline mutations
+
+By default React Query will not retry a mutation on error, but it is possible with the `retry` option:
+
+```tsx
+const mutation = useMutation({
+  mutationFn: addTodo,
+  retry: 3,
+})
+```
+
+If mutations fail because the device is offline, they will be retried in the same order when the device reconnects.
+
+#### Persist mutations
+
+Mutations can now be persisted to storage and resumed at a later point. More information can be found in the mutations documentation.
+
+#### QueryObserver
+
+A `QueryObserver` can be used to create and/or watch a query:
+
+```tsx
+const observer = new QueryObserver(queryClient, { queryKey: 'posts' })
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+#### InfiniteQueryObserver
+
+A `InfiniteQueryObserver` can be used to create and/or watch an infinite query:
+
+```tsx
+const observer = new InfiniteQueryObserver(queryClient, {
+  queryKey: 'posts',
+  queryFn: fetchPosts,
+  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
+})
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+#### QueriesObserver
+
+A `QueriesObserver` can be used to create and/or watch multiple queries:
+
+```tsx
+const observer = new QueriesObserver(queryClient, [
+  { queryKey: ['post', 1], queryFn: fetchPost },
+  { queryKey: ['post', 2], queryFn: fetchPost },
+])
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+#### Set default options for specific queries
+
+The `QueryClient.setQueryDefaults()` method can be used to set default options for specific queries:
+
+```tsx
+queryClient.setQueryDefaults(['posts'], { queryFn: fetchPosts })
+
+function Component() {
+  const { data } = useQuery(['posts'])
+}
+```
+
+#### Set default options for specific mutations
+
+The `QueryClient.setMutationDefaults()` method can be used to set default options for specific mutations:
+
+```tsx
+queryClient.setMutationDefaults(['addPost'], { mutationFn: addPost })
+
+function Component() {
+  const { mutate } = useMutation({ mutationKey: ['addPost'] })
+}
+```
+
+#### useIsFetching()
+
+The `useIsFetching()` hook now accepts filters which can be used to for example only show a spinner for certain type of queries:
+
+```tsx
+const fetches = useIsFetching({ queryKey: ['posts'] })
+```
+
+#### Core separation
+
+The core of React Query is now fully separated from React, which means it can also be used standalone or in other frameworks. Use the `react-query/core` entry point to only import the core functionality:
+
+```tsx
+import { QueryClient } from 'react-query/core'
+```
+
+### Devtools are now part of the main repo and npm package
+
+The devtools are now included in the `react-query` package itself under the import `react-query/devtools`. Simply replace `react-query-devtools` imports with `react-query/devtools`
diff --git a/mintlify/query/framework/react/guides/migrating-to-react-query-4.md b/mintlify/query/framework/react/guides/migrating-to-react-query-4.md
new file mode 100644
index 000000000..1bb0865b5
--- /dev/null
+++ b/mintlify/query/framework/react/guides/migrating-to-react-query-4.md
@@ -0,0 +1,529 @@
+---
+id: migrating-to-react-query-4
+title: Migrating to React Query 4
+---
+
+## Breaking Changes
+
+v4 is a major version, so there are some breaking changes to be aware of:
+
+### react-query is now @tanstack/react-query
+
+You will need to un-/install dependencies and change the imports:
+
+```
+npm uninstall react-query
+npm install @tanstack/react-query
+npm install @tanstack/react-query-devtools
+```
+
+```tsx
+- import { useQuery } from 'react-query' // [!code --]
+- import { ReactQueryDevtools } from 'react-query/devtools' // [!code --]
+
++ import { useQuery } from '@tanstack/react-query' // [!code ++]
++ import { ReactQueryDevtools } from '@tanstack/react-query-devtools' // [!code ++]
+```
+
+#### Codemod
+
+To make the import migration easier, v4 comes with a codemod.
+
+> The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output.
+
+You can easily apply it by using one (or both) of the following commands:
+
+If you want to run it against `.js` or `.jsx` files, please use the command below:
+
+```
+npx jscodeshift ./path/to/src/ \
+  --extensions=js,jsx \
+  --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js
+```
+
+If you want to run it against `.ts` or `.tsx` files, please use the command below:
+
+```
+npx jscodeshift ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
+  --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js
+```
+
+Please note in the case of `TypeScript` you need to use `tsx` as the parser; otherwise, the codemod won't be applied properly!
+
+**Note:** Applying the codemod might break your code formatting, so please don't forget to run `prettier` and/or `eslint` after you've applied the codemod!
+
+**Note:** The codemod will _only_ change the imports - you still have to install the separate devtools package manually.
+
+### Query Keys (and Mutation Keys) need to be an Array
+
+In v3, Query and Mutation Keys could be a String or an Array. Internally, React Query has always worked with Array Keys only, and we've sometimes exposed this to consumers. For example, in the `queryFn`, you would always get the key as an Array to make working with [Default Query Functions](/query/framework/react/guides/default-query-function) easier.
+
+However, we have not followed this concept through to all apis. For example, when using the `predicate` function on [Query Filters](/query/framework/react/guides/filters) you would get the raw Query Key. This makes it difficult to work with such functions if you use Query Keys that are mixed Arrays and Strings. The same was true when using global callbacks.
+
+To streamline all apis, we've decided to make all keys Arrays only:
+
+```tsx
+;-useQuery('todos', fetchTodos) + // [!code --]
+  useQuery(['todos'], fetchTodos) // [!code ++]
+```
+
+#### Codemod
+
+To make this migration easier, we decided to deliver a codemod.
+
+> The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output.
+
+You can easily apply it by using one (or both) of the following commands:
+
+If you want to run it against `.js` or `.jsx` files, please use the command below:
+
+```
+npx jscodeshift ./path/to/src/ \
+  --extensions=js,jsx \
+  --transform=./node_modules/@tanstack/react-query/codemods/v4/key-transformation.js
+```
+
+If you want to run it against `.ts` or `.tsx` files, please use the command below:
+
+```
+npx jscodeshift ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
+  --transform=./node_modules/@tanstack/react-query/codemods/v4/key-transformation.js
+```
+
+Please note in the case of `TypeScript` you need to use `tsx` as the parser; otherwise, the codemod won't be applied properly!
+
+**Note:** Applying the codemod might break your code formatting, so please don't forget to run `prettier` and/or `eslint` after you've applied the codemod!
+
+### The idle state has been removed
+
+With the introduction of the new [fetchStatus](/query/framework/react/guides/queries#fetchstatus) for better offline support, the `idle` state became irrelevant, because `fetchStatus: 'idle'` captures the same state better. For more information, please read [Why two different states](/query/framework/react/guides/queries#why-two-different-states).
+
+This will mostly affect `disabled` queries that don't have any `data` yet, as those were in `idle` state before:
+
+```tsx
+- status: 'idle' // [!code --]
++ status: 'loading'  // [!code ++]
++ fetchStatus: 'idle' // [!code ++]
+```
+
+Also, have a look at [the guide on dependent queries](/query/framework/react/guides/dependent-queries)
+
+#### disabled queries
+
+Due to this change, disabled queries (even temporarily disabled ones) will start in `loading` state. To make migration easier, especially for having a good flag to know when to display a loading spinner, you can check for `isInitialLoading` instead of `isLoading`:
+
+```tsx
+;-isLoading + // [!code --]
+  isInitialLoading // [!code ++]
+```
+
+See also the guide on [disabling queries](/query/framework/react/guides/disabling-queries#isloading-previously-isinitialloading)
+
+### new API for `useQueries`
+
+The `useQueries` hook now accepts an object with a `queries` prop as its input. The value of the `queries` prop is an array of queries (this array is identical to what was passed into `useQueries` in v3).
+
+```tsx
+;-useQueries([
+  { queryKey1, queryFn1, options1 },
+  { queryKey2, queryFn2, options2 },
+]) + // [!code --]
+  useQueries({
+    queries: [
+      { queryKey1, queryFn1, options1 },
+      { queryKey2, queryFn2, options2 },
+    ],
+  }) // [!code ++]
+```
+
+### Undefined is an illegal cache value for successful queries
+
+In order to make bailing out of updates possible by returning `undefined`, we had to make `undefined` an illegal cache value. This is in-line with other concepts of react-query, for example, returning `undefined` from the [initialData function](/query/framework/react/guides/initial-query-data#initial-data-function) will also _not_ set data.
+
+Further, it is an easy bug to produce `Promise<void>` by adding logging in the queryFn:
+
+```tsx
+useQuery(['key'], () =>
+  axios.get(url).then((result) => console.log(result.data)),
+)
+```
+
+This is now disallowed on type level; at runtime, `undefined` will be transformed to a _failed Promise_, which means you will get an `error`, which will also be logged to the console in development mode.
+
+### Queries and mutations, per default, need network connection to run
+
+Please read the [New Features announcement](#proper-offline-support) about online / offline support, and also the dedicated page about [Network mode](/query/framework/react/guides/network-mode)
+
+Even though React Query is an Async State Manager that can be used for anything that produces a Promise, it is most often used for data fetching in combination with data fetching libraries. That is why, per default, queries and mutations will be `paused` if there is no network connection. If you want to opt-in to the previous behavior, you can globally set `networkMode: offlineFirst` for both queries and mutations:
+
+```tsx
+new QueryClient({
+  defaultOptions: {
+    queries: {
+      networkMode: 'offlineFirst',
+    },
+    mutations: {
+      networkMode: 'offlineFirst',
+    },
+  },
+})
+```
+
+### `notifyOnChangeProps` property no longer accepts `"tracked"` as a value
+
+The `notifyOnChangeProps` option no longer accepts a `"tracked"` value. Instead, `useQuery` defaults to tracking properties. All queries using `notifyOnChangeProps: "tracked"` should be updated by removing this option.
+
+If you would like to bypass this in any queries to emulate the v3 default behavior of re-rendering whenever a query changes, `notifyOnChangeProps` now accepts an `"all"` value to opt-out of the default smart tracking optimization.
+
+### `notifyOnChangePropsExclusion` has been removed
+
+In v4, `notifyOnChangeProps` defaults to the `"tracked"` behavior of v3 instead of `undefined`. Now that `"tracked"` is the default behavior for v4, it no longer makes sense to include this config option.
+
+### Consistent behavior for `cancelRefetch`
+
+The `cancelRefetch` option can be passed to all functions that imperatively fetch a query, namely:
+
+- `queryClient.refetchQueries`
+- `queryClient.invalidateQueries`
+- `queryClient.resetQueries`
+- `refetch` returned from `useQuery`
+- `fetchNextPage` and `fetchPreviousPage` returned from `useInfiniteQuery`
+
+Except for `fetchNextPage` and `fetchPreviousPage`, this flag was defaulting to `false`, which was inconsistent and potentially troublesome: Calling `refetchQueries` or `invalidateQueries` after a mutation might not yield the latest result if a previous slow fetch was already ongoing, because this refetch would have been skipped.
+
+We believe that if a query is actively refetched by some code you write, it should, per default, re-start the fetch.
+
+That is why this flag now defaults to _true_ for all methods mentioned above. It also means that if you call `refetchQueries` twice in a row, without awaiting it, it will now cancel the first fetch and re-start it with the second one:
+
+```
+queryClient.refetchQueries({ queryKey: ['todos'] })
+// this will abort the previous refetch and start a new fetch
+queryClient.refetchQueries({ queryKey: ['todos'] })
+```
+
+You can opt-out of this behaviour by explicitly passing `cancelRefetch:false`:
+
+```
+queryClient.refetchQueries({ queryKey: ['todos'] })
+// this will not abort the previous refetch - it will just be ignored
+queryClient.refetchQueries({ queryKey: ['todos'] }, { cancelRefetch: false })
+```
+
+> Note: There is no change in behaviour for automatically triggered fetches, e.g. because a query mounts or because of a window focus refetch.
+
+### Query Filters
+
+A [query filter](/query/framework/react/guides/filters) is an object with certain conditions to match a query. Historically, the filter options have mostly been a combination of boolean flags. However, combining those flags can lead to impossible states. Specifically:
+
+```
+active?: boolean
+  - When set to true it will match active queries.
+  - When set to false it will match inactive queries.
+inactive?: boolean
+  - When set to true it will match inactive queries.
+  - When set to false it will match active queries.
+```
+
+Those flags don't work well when used together, because they are mutually exclusive. Setting `false` for both flags could match all queries, judging from the description, or no queries, which doesn't make much sense.
+
+With v4, those filters have been combined into a single filter to better show the intent:
+
+```tsx
+- active?: boolean // [!code --]
+- inactive?: boolean // [!code --]
++ type?: 'active' | 'inactive' | 'all' // [!code ++]
+```
+
+The filter defaults to `all`, and you can choose to only match `active` or `inactive` queries.
+
+#### refetchActive / refetchInactive
+
+[queryClient.invalidateQueries](/query/reference/QueryClient#queryclientinvalidatequeries) had two additional, similar flags:
+
+```
+refetchActive: Boolean
+  - Defaults to true
+  - When set to false, queries that match the refetch predicate and are actively being rendered
+    via useQuery and friends will NOT be refetched in the background, and only marked as invalid.
+refetchInactive: Boolean
+  - Defaults to false
+  - When set to true, queries that match the refetch predicate and are not being rendered
+    via useQuery and friends will be both marked as invalid and also refetched in the background
+```
+
+For the same reason, those have also been combined:
+
+```tsx
+- refetchActive?: boolean // [!code --]
+- refetchInactive?: boolean // [!code --]
++ refetchType?: 'active' | 'inactive' | 'all' | 'none' // [!code ++]
+```
+
+This flag defaults to `active` because `refetchActive` defaulted to `true`. This means we also need a way to tell `invalidateQueries` to not refetch at all, which is why a fourth option (`none`) is also allowed here.
+
+### `onSuccess` is no longer called from `setQueryData`
+
+This was confusing to many and also created infinite loops if `setQueryData` was called from within `onSuccess`. It was also a frequent source of error when combined with `staleTime`, because if data was read from the cache only, `onSuccess` was _not_ called.
+
+Similar to `onError` and `onSettled`, the `onSuccess` callback is now tied to a request being made. No request -> no callback.
+
+If you want to listen to changes of the `data` field, you can best do this with a `useEffect`, where `data` is part of the dependency Array. Since React Query ensures stable data through structural sharing, the effect will not execute with every background refetch, but only if something within data has changed:
+
+```
+const { data } = useQuery({ queryKey, queryFn })
+React.useEffect(() => mySideEffectHere(data), [data])
+```
+
+### `persistQueryClient` and the corresponding persister plugins are no longer experimental and have been renamed
+
+The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](/query/framework/react/plugins/createSyncStoragePersister) and [`createAsyncStoragePersister`](/query/framework/react/plugins/createAsyncStoragePersister) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change.
+
+Since these plugins are no longer experimental, their import paths have also been updated:
+
+```tsx
+- import { persistQueryClient } from 'react-query/persistQueryClient-experimental' // [!code --]
+- import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' // [!code --]
+- import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental' // [!code --]
+
++ import { persistQueryClient } from '@tanstack/react-query-persist-client' // [!code ++]
++ import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' // [!code ++]
++ import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'  // [!code ++]
+```
+
+### The `cancel` method on promises is no longer supported
+
+The old `cancel` method (which allowed you to define a `cancel` function on promises and was used by the library to support query cancellation) has been removed. We recommend using the [newer API](/query/framework/react/guides/query-cancellation) (introduced with v3.30.0) for query cancellation, which uses the [`AbortController` API](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) internally and provides you with an [`AbortSignal` instance](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) in your query function to support query cancellation.
+
+### TypeScript
+
+Types now require using TypeScript v4.1 or greater
+
+### Supported Browsers
+
+As of v4, React Query is optimized for modern browsers. We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](/query/framework/react/installation#requirements).
+
+### `setLogger` is removed
+
+It was possible to change the logger globally by calling `setLogger`. In v4, that function is replaced with an optional field when creating a `QueryClient`.
+
+```tsx
+- import { QueryClient, setLogger } from 'react-query'; // [!code --]
++ import { QueryClient } from '@tanstack/react-query'; // [!code ++]
+
+- setLogger(customLogger) // [!code --]
+- const queryClient = new QueryClient(); // [!code --]
++ const queryClient = new QueryClient({ logger: customLogger }) // [!code ++]
+```
+
+### No _default_ manual Garbage Collection server-side
+
+In v3, React Query would cache query results for a default of 5 minutes, then manually garbage collect that data. This default was applied to server-side React Query as well.
+
+This lead to high memory consumption and hanging processes waiting for this manual garbage collection to complete. In v4, by default the server-side `cacheTime` is now set to `Infinity` effectively disabling manual garbage collection (the NodeJS process will clear everything once a request is complete).
+
+This change only impacts users of server-side React Query, such as with Next.js. If you are setting a `cacheTime` manually this will not impact you (although you may want to mirror behavior).
+
+### Logging in production
+
+Starting with v4, react-query will no longer log errors (e.g. failed fetches) to the console in production mode, as this was confusing to many.
+Errors will still show up in development mode.
+
+### ESM Support
+
+React Query now supports [package.json `"exports"`](https://nodejs.org/api/packages.html#exports) and is fully compatible with Node's native resolution for both CommonJS and ESM. We don't expect this to be a breaking change for most users, but this restricts the files you can import into your project to only the entry points we officially support.
+
+### Streamlined NotifyEvents
+
+Subscribing manually to the `QueryCache` has always given you a `QueryCacheNotifyEvent`, but this was not true for the `MutationCache`. We have streamlined the behavior and also adapted event names accordingly.
+
+#### QueryCacheNotifyEvent
+
+```tsx
+- type: 'queryAdded' // [!code --]
++ type: 'added' // [!code ++]
+- type: 'queryRemoved' // [!code --]
++ type: 'removed' // [!code ++]
+- type: 'queryUpdated' // [!code --]
++ type: 'updated' // [!code ++]
+```
+
+#### MutationCacheNotifyEvent
+
+The `MutationCacheNotifyEvent` uses the same types as the `QueryCacheNotifyEvent`.
+
+> Note: This is only relevant if you manually subscribe to the caches via `queryCache.subscribe` or `mutationCache.subscribe`
+
+### Separate hydration exports have been removed
+
+With version [3.22.0](https://github.com/TanStack/query/releases/tag/v3.22.0), hydration utilities moved into the React Query core. With v3, you could still use the old exports from `react-query/hydration`, but these exports have been removed with v4.
+
+```tsx
+- import { dehydrate, hydrate, useHydrate, Hydrate } from 'react-query/hydration' // [!code --]
++ import { dehydrate, hydrate, useHydrate, Hydrate } from '@tanstack/react-query' // [!code ++]
+```
+
+### Removed undocumented methods from the `queryClient`, `query` and `mutation`
+
+The methods `cancelMutations` and `executeMutation` on the `QueryClient` were undocumented and unused internally, so we removed them. Since it was just a wrapper around a method available on the `mutationCache`, you can still use the functionality of `executeMutation`
+
+```tsx
+- executeMutation< // [!code --]
+-   TData = unknown, // [!code --]
+-   TError = unknown, // [!code --]
+-   TVariables = void, // [!code --]
+-   TContext = unknown // [!code --]
+- >( // [!code --]
+-   options: MutationOptions<TData, TError, TVariables, TContext> // [!code --]
+- ): Promise<TData> { // [!code --]
+-   return this.mutationCache.build(this, options).execute() // [!code --]
+- } // [!code --]
+```
+
+Additionally, `query.setDefaultOptions` was removed because it was also unused. `mutation.cancel` was removed because it didn't actually cancel the outgoing request.
+
+### The `src/react` directory was renamed to `src/reactjs`
+
+Previously, React Query had a directory named `react` which imported from the `react` module. This could cause problems with some Jest configurations, resulting in errors when running tests like:
+
+```
+TypeError: Cannot read property 'createContext' of undefined
+```
+
+With the renamed directory this no longer is an issue.
+
+If you were importing anything from `'react-query/react'` directly in your project (as opposed to just `'react-query'`), then you need to update your imports:
+
+```tsx
+- import { QueryClientProvider } from 'react-query/react'; // [!code --]
++ import { QueryClientProvider } from '@tanstack/react-query/reactjs'; // [!code ++]
+```
+
+## New Features 🚀
+
+v4 comes with an awesome set of new features:
+
+### Support for React 18
+
+React 18 was released earlier this year, and v4 now has first class support for it and the new concurrent features it brings.
+
+### Proper offline support
+
+In v3, React Query has always fired off queries and mutations, but then taken the assumption that if you want to retry it, you need to be connected to the internet. This has led to several confusing situations:
+
+- You are offline and mount a query - it goes to loading state, the request fails, and it stays in loading state until you go online again, even though it is not really fetching.
+- Similarly, if you are offline and have retries turned off, your query will just fire and fail, and the query goes to error state.
+- You are offline and want to fire off a query that doesn't necessarily need network connection (because you _can_ use React Query for something other than data fetching), but it fails for some other reason. That query will now be paused until you go online again.
+- Window focus refetching didn't do anything at all if you were offline.
+
+With v4, React Query introduces a new `networkMode` to tackle all these issues. Please read the dedicated page about the new [Network mode](/query/framework/react/guides/network-mode) for more information.
+
+### Tracked Queries per default
+
+React Query defaults to "tracking" query properties, which should give you a nice boost in render optimization. The feature has existed since [v3.6.0](https://github.com/TanStack/query/releases/tag/v3.6.0) and has now become the default behavior with v4.
+
+### Bailing out of updates with setQueryData
+
+When using the [functional updater form of setQueryData](/query/reference/QueryClient#queryclientsetquerydata), you can now bail out of the update by returning `undefined`. This is helpful if `undefined` is given to you as `previousValue`, which means that currently, no cached entry exists and you don't want to / cannot create one, like in the example of toggling a todo:
+
+```tsx
+queryClient.setQueryData(['todo', id], (previousTodo) =>
+  previousTodo ? { ...previousTodo, done: true } : undefined,
+)
+```
+
+### Mutation Cache Garbage Collection
+
+Mutations can now also be garbage collected automatically, just like queries. The default `cacheTime` for mutations is also set to 5 minutes.
+
+### Custom Contexts for Multiple Providers
+
+Custom contexts can now be specified to pair hooks with their matching `Provider`. This is critical when there may be multiple React Query `Provider` instances in the component tree, and you need to ensure your hook uses the correct `Provider` instance.
+
+An example:
+
+1. Create a data package.
+
+```tsx
+// Our first data package: @my-scope/container-data
+
+const context = React.createContext<QueryClient | undefined>(undefined)
+const queryClient = new QueryClient()
+
+export const useUser = () => {
+  return useQuery(USER_KEY, USER_FETCHER, {
+    context,
+  })
+}
+
+export const ContainerDataProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    <QueryClientProvider client={queryClient} context={context}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+```
+
+2. Create a second data package.
+
+```tsx
+// Our second data package: @my-scope/my-component-data
+
+const context = React.createContext<QueryClient | undefined>(undefined)
+const queryClient = new QueryClient()
+
+export const useItems = () => {
+  return useQuery(ITEMS_KEY, ITEMS_FETCHER, {
+    context,
+  })
+}
+
+export const MyComponentDataProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    <QueryClientProvider client={queryClient} context={context}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+```
+
+3. Use these two data packages in your application.
+
+```tsx
+// Our application
+
+import { ContainerDataProvider, useUser } from "@my-scope/container-data";
+import { AppDataProvider } from "@my-scope/app-data";
+import { MyComponentDataProvider, useItems } from "@my-scope/my-component-data";
+
+<ContainerDataProvider> // <-- Provides container data (like "user") using its own React Query provider
+  ...
+  <AppDataProvider> // <-- Provides app data using its own React Query provider (unused in this example)
+    ...
+      <MyComponentDataProvider> // <-- Provides component data (like "items") using its own React Query provider
+        <MyComponent />
+      </MyComponentDataProvider>
+    ...
+  </AppDataProvider>
+  ...
+</ContainerDataProvider>
+
+// Example of hooks provided by the "DataProvider" components above:
+const MyComponent = () => {
+  const user = useUser() // <-- Uses the context specified in ContainerDataProvider.
+  const items = useItems() // <-- Uses the context specified in MyComponentDataProvider
+  ...
+}
+```
diff --git a/mintlify/query/framework/react/guides/migrating-to-v5.md b/mintlify/query/framework/react/guides/migrating-to-v5.md
new file mode 100644
index 000000000..9e0a9beb8
--- /dev/null
+++ b/mintlify/query/framework/react/guides/migrating-to-v5.md
@@ -0,0 +1,529 @@
+---
+id: migrating-to-tanstack-query-5
+title: Migrating to TanStack Query v5
+---
+
+## Breaking Changes
+
+v5 is a major version, so there are some breaking changes to be aware of:
+
+### Supports a single signature, one object
+
+useQuery and friends used to have many overloads in TypeScript: different ways how the function could be invoked. Not only was this tough to maintain, type wise, it also required a runtime check to see which types the first and the second parameter were, to correctly create options.
+
+now we only support the object format.
+
+```tsx
+useQuery(key, fn, options) // [!code --]
+useQuery({ queryKey, queryFn, ...options }) // [!code ++]
+useInfiniteQuery(key, fn, options) // [!code --]
+useInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
+useMutation(fn, options) // [!code --]
+useMutation({ mutationFn, ...options }) // [!code ++]
+useIsFetching(key, filters) // [!code --]
+useIsFetching({ queryKey, ...filters }) // [!code ++]
+useIsMutating(key, filters) // [!code --]
+useIsMutating({ mutationKey, ...filters }) // [!code ++]
+```
+
+```tsx
+queryClient.isFetching(key, filters) // [!code --]
+queryClient.isFetching({ queryKey, ...filters }) // [!code ++]
+queryClient.ensureQueryData(key, filters) // [!code --]
+queryClient.ensureQueryData({ queryKey, ...filters }) // [!code ++]
+queryClient.getQueriesData(key, filters) // [!code --]
+queryClient.getQueriesData({ queryKey, ...filters }) // [!code ++]
+queryClient.setQueriesData(key, updater, filters, options) // [!code --]
+queryClient.setQueriesData({ queryKey, ...filters }, updater, options) // [!code ++]
+queryClient.removeQueries(key, filters) // [!code --]
+queryClient.removeQueries({ queryKey, ...filters }) // [!code ++]
+queryClient.resetQueries(key, filters, options) // [!code --]
+queryClient.resetQueries({ queryKey, ...filters }, options) // [!code ++]
+queryClient.cancelQueries(key, filters, options) // [!code --]
+queryClient.cancelQueries({ queryKey, ...filters }, options) // [!code ++]
+queryClient.invalidateQueries(key, filters, options) // [!code --]
+queryClient.invalidateQueries({ queryKey, ...filters }, options) // [!code ++]
+queryClient.refetchQueries(key, filters, options) // [!code --]
+queryClient.refetchQueries({ queryKey, ...filters }, options) // [!code ++]
+queryClient.fetchQuery(key, fn, options) // [!code --]
+queryClient.fetchQuery({ queryKey, queryFn, ...options }) // [!code ++]
+queryClient.prefetchQuery(key, fn, options) // [!code --]
+queryClient.prefetchQuery({ queryKey, queryFn, ...options }) // [!code ++]
+queryClient.fetchInfiniteQuery(key, fn, options) // [!code --]
+queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
+queryClient.prefetchInfiniteQuery(key, fn, options) // [!code --]
+queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
+```
+
+```tsx
+queryCache.find(key, filters) // [!code --]
+queryCache.find({ queryKey, ...filters }) // [!code ++]
+queryCache.findAll(key, filters) // [!code --]
+queryCache.findAll({ queryKey, ...filters }) // [!code ++]
+```
+
+### `queryClient.getQueryData` now accepts queryKey only as an Argument
+
+`queryClient.getQueryData` argument is changed to accept only a `queryKey`
+
+```tsx
+queryClient.getQueryData(queryKey, filters) // [!code --]
+queryClient.getQueryData(queryKey) // [!code ++]
+```
+
+### `queryClient.getQueryState` now accepts queryKey only as an Argument
+
+`queryClient.getQueryState` argument is changed to accept only a `queryKey`
+
+```tsx
+queryClient.getQueryState(queryKey, filters) // [!code --]
+queryClient.getQueryState(queryKey) // [!code ++]
+```
+
+#### Codemod
+
+To make the remove overloads migration easier, v5 comes with a codemod.
+
+> The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output.
+
+If you want to run it against `.js` or `.jsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=js,jsx \
+  --transform=./node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.cjs
+```
+
+If you want to run it against `.ts` or `.tsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
+  --transform=./node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.cjs
+```
+
+Please note in the case of `TypeScript` you need to use `tsx` as the parser; otherwise, the codemod won't be applied properly!
+
+**Note:** Applying the codemod might break your code formatting, so please don't forget to run `prettier` and/or `eslint` after you've applied the codemod!
+
+A few notes about how codemod works:
+
+- Generally, we're looking for the lucky case, when the first parameter is an object expression and contains the "queryKey" or "mutationKey" property (depending on which hook/method call is being transformed). If this is the case, your code already matches the new signature, so the codemod won't touch it. 🎉
+- If the condition above is not fulfilled, then the codemod will check whether the first parameter is an array expression or an identifier that references an array expression. If this is the case, the codemod will put it into an object expression, then it will be the first parameter.
+- If object parameters can be inferred, the codemod will attempt to copy the already existing properties to the newly created one.
+- If the codemod cannot infer the usage, then it will leave a message on the console. The message contains the file name and the line number of the usage. In this case, you need to do the migration manually.
+- If the transformation results in an error, you will also see a message on the console. This message will notify you something unexpected happened, please do the migration manually.
+
+### Callbacks on useQuery (and QueryObserver) have been removed
+
+`onSuccess`, `onError` and `onSettled` have been removed from Queries. They haven't been touched for Mutations. Please see [this RFC](https://github.com/TanStack/query/discussions/5279) for motivations behind this change and what to do instead.
+
+### The `refetchInterval` callback function only gets `query` passed
+
+This streamlines how callbacks are invoked (the `refetchOnWindowFocus`, `refetchOnMount` and `refetchOnReconnect` callbacks all only get the query passed as well), and it fixes some typing issues when callbacks get data transformed by `select`.
+
+```tsx
+- refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false | undefined) // [!code --]
++ refetchInterval: number | false | ((query: Query) => number | false | undefined) // [!code ++]
+```
+
+You can still access data with `query.state.data`, however, it will not be data that has been transformed by `select`. If you need to access the transformed data, you can call the transformation again on `query.state.data`.
+
+### The `remove` method has been removed from useQuery
+
+Previously, remove method used to remove the query from the queryCache without informing observers about it. It was best used to remove data imperatively that is no longer needed, e.g. when logging a user out.
+
+But It doesn't make much sense to do this while a query is still active, because it will just trigger a hard loading state with the next re-render.
+
+if you still need to remove a query, you can use `queryClient.removeQueries({queryKey: key})`
+
+```tsx
+const queryClient = useQueryClient()
+const query = useQuery({ queryKey, queryFn })
+
+query.remove() // [!code --]
+queryClient.removeQueries({ queryKey }) // [!code ++]
+```
+
+### The minimum required TypeScript version is now 4.7
+
+Mainly because an important fix was shipped around type inference. Please see this [TypeScript issue](https://github.com/microsoft/TypeScript/issues/43371) for more information.
+
+### The `isDataEqual` option has been removed from useQuery
+
+Previously, This function was used to indicate whether to use previous `data` (`true`) or new data (`false`) as a resolved data for the query.
+
+You can achieve the same functionality by passing a function to `structuralSharing` instead:
+
+```tsx
+import { replaceEqualDeep } from '@tanstack/react-query'
+
+- isDataEqual: (oldData, newData) => customCheck(oldData, newData) // [!code --]
++ structuralSharing: (oldData, newData) => customCheck(oldData, newData) ? oldData : replaceEqualDeep(oldData, newData) // [!code ++]
+```
+
+### The deprecated custom logger has been removed
+
+Custom loggers were already deprecated in 4 and have been removed in this version. Logging only had an effect in development mode, where passing a custom logger is not necessary.
+
+### Supported Browsers
+
+We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](/query/framework/react/installation#requirements).
+
+### Private class fields and methods
+
+TanStack Query has always had private fields and methods on classes, but they weren't really private - they were just private in `TypeScript`. We now use [ECMAScript Private class features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields), which means those fields are now truly private and can't be accessed from the outside at runtime.
+
+### Rename `cacheTime` to `gcTime`
+
+Almost everyone gets `cacheTime` wrong. It sounds like "the amount of time that data is cached for", but that is not correct.
+
+`cacheTime` does nothing as long as a query is still in use. It only kicks in as soon as the query becomes unused. After the time has passed, data will be "garbage collected" to avoid the cache from growing.
+
+`gc` is referring to "garbage collect" time. It's a bit more technical, but also a quite [well known abbreviation](https://en.wikipedia.org/wiki/Garbage_collection_%28computer_science%29) in computer science.
+
+```tsx
+const MINUTE = 1000 * 60;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+-      cacheTime: 10 * MINUTE, // [!code --]
++      gcTime: 10 * MINUTE, // [!code ++]
+    },
+  },
+})
+```
+
+### The `useErrorBoundary` option has been renamed to `throwOnError`
+
+To make the `useErrorBoundary` option more framework-agnostic and avoid confusion with the established React function prefix "`use`" for hooks and the "ErrorBoundary" component name, it has been renamed to `throwOnError` to more accurately reflect its functionality.
+
+### TypeScript: `Error` is now the default type for errors instead of `unknown`
+
+Even though in JavaScript, you can `throw` anything (which makes `unknown` the most correct type), almost always, `Errors` (or subclasses of `Error`) are thrown. This change makes it easier to work with the `error` field in TypeScript for most cases.
+
+If you want to throw something that isn't an Error, you'll now have to set the generic for yourself:
+
+```ts
+useQuery<number, string>({
+  queryKey: ['some-query'],
+  queryFn: async () => {
+    if (Math.random() > 0.5) {
+      throw 'some error'
+    }
+    return 42
+  },
+})
+```
+
+For a way to set a different kind of Error globally, see [the TypeScript Guide](/query/framework/react/typescript#registering-a-global-error).
+
+### eslint `prefer-query-object-syntax` rule is removed
+
+Since the only supported syntax now is the object syntax, this rule is no longer needed
+
+### Removed `keepPreviousData` in favor of `placeholderData` identity function
+
+We have removed the `keepPreviousData` option and `isPreviousData` flag as they were doing mostly the same thing as `placeholderData` and `isPlaceholderData` flag.
+
+To achieve the same functionality as `keepPreviousData`, we have added previous query `data` as an argument to `placeholderData` which accepts an identity function. Therefore you just need to provide an identity function to `placeholderData` or use the included `keepPreviousData` function from TanStack Query.
+
+> A note here is that `useQueries` would not receive `previousData` in the `placeholderData` function as argument. This is due to a dynamic nature of queries passed in the array, which may lead to a different shape of result from placeholder and queryFn.
+
+```tsx
+import {
+   useQuery,
++  keepPreviousData // [!code ++]
+} from "@tanstack/react-query";
+
+const {
+   data,
+-  isPreviousData, // [!code --]
++  isPlaceholderData, // [!code ++]
+} = useQuery({
+  queryKey,
+  queryFn,
+- keepPreviousData: true, // [!code --]
++ placeholderData: keepPreviousData // [!code ++]
+});
+```
+
+An identity function, in the context of TanStack Query, refers to a function that always returns its provided argument (i.e. data) unchanged.
+
+```ts
+useQuery({
+  queryKey,
+  queryFn,
+  placeholderData: (previousData, previousQuery) => previousData, // identity function with the same behaviour as `keepPreviousData`
+})
+```
+
+There are some caveats to this change however, which you must be aware of:
+
+- `placeholderData` will always put you into `success` state, while `keepPreviousData` gave you the status of the previous query. That status could be `error` if we have data fetched successfully and then got a background refetch error. However, the error itself was not shared, so we decided to stick with behavior of `placeholderData`.
+- `keepPreviousData` gave you the `dataUpdatedAt` timestamp of the previous data, while with `placeholderData`, `dataUpdatedAt` will stay at `0`. This might be annoying if you want to show that timestamp continuously on screen. However you might get around it with `useEffect`.
+
+  ```ts
+  const [updatedAt, setUpdatedAt] = useState(0)
+
+  const { data, dataUpdatedAt } = useQuery({
+    queryKey: ['projects', page],
+    queryFn: () => fetchProjects(page),
+  })
+
+  useEffect(() => {
+    if (dataUpdatedAt > updatedAt) {
+      setUpdatedAt(dataUpdatedAt)
+    }
+  }, [dataUpdatedAt])
+  ```
+
+### Window focus refetching no longer listens to the `focus` event
+
+The `visibilitychange` event is used exclusively now. This is possible because we only support browsers that support the `visibilitychange` event. This fixes a bunch of issues [as listed here](https://github.com/TanStack/query/pull/4805).
+
+### Network status no longer relies on the `navigator.onLine` property
+
+`navigator.onLine` doesn't work well in Chromium based browsers. There are [a lot of issues](https://bugs.chromium.org/p/chromium/issues/list?q=navigator.online) around false negatives, which lead to Queries being wrongfully marked as `offline`.
+
+To circumvent this, we now always start with `online: true` and only listen to `online` and `offline` events to update the status.
+
+This should reduce the likelihood of false negatives, however, it might mean false positives for offline apps that load via serviceWorkers, which can work even without an internet connection.
+
+### Removed custom `context` prop in favor of custom `queryClient` instance
+
+In v4, we introduced the possibility to pass a custom `context` to all react-query hooks. This allowed for proper isolation when using MicroFrontends.
+
+However, `context` is a react-only feature. All that `context` does is give us access to the `queryClient`. We could achieve the same isolation by allowing to pass in a custom `queryClient` directly.
+This in turn will enable other frameworks to have the same functionality in a framework-agnostic way.
+
+```tsx
+import { queryClient } from './my-client'
+
+const { data } = useQuery(
+  {
+    queryKey: ['users', id],
+    queryFn: () => fetch(...),
+-   context: customContext // [!code --]
+  },
++  queryClient, // [!code ++]
+)
+```
+
+### Removed `refetchPage` in favor of `maxPages`
+
+In v4, we introduced the possibility to define the pages to refetch for infinite queries with the `refetchPage` function.
+
+However, refetching all pages might lead to UI inconsistencies. Also, this option is available on e.g. `queryClient.refetchQueries`, but it only does something for infinite queries, not "normal" queries.
+
+The v5 includes a new `maxPages` option for infinite queries to limit the number of pages to store in the query data and to refetch. This new feature handles the use cases initially identified for the `refetchPage` page feature without the related issues.
+
+### New `dehydrate` API
+
+The options you can pass to `dehydrate` have been simplified. Queries and Mutations are always dehydrated (according to the default function implementation). To change this behaviour, instead of using the removed boolean options `dehydrateMutations` and `dehydrateQueries` you can implement the function equivalents `shouldDehydrateQuery` or `shouldDehydrateMutation` instead. To get the old behaviour of not hydrating queries/mutations at all, pass in `() => false`.
+
+```tsx
+- dehydrateMutations?: boolean // [!code --]
+- dehydrateQueries?: boolean // [!code --]
+```
+
+### Infinite queries now need a `initialPageParam`
+
+Previously, we've passed `undefined` to the `queryFn` as `pageParam`, and you could assign a default value to the `pageParam` parameter in the `queryFn` function signature. This had the drawback of storing `undefined` in the `queryCache`, which is not serializable.
+
+Instead, you now have to pass an explicit `initialPageParam` to the infinite query options. This will be used as the `pageParam` for the first page:
+
+```tsx
+useInfiniteQuery({
+   queryKey,
+-  queryFn: ({ pageParam = 0 }) => fetchSomething(pageParam), // [!code --]
++  queryFn: ({ pageParam }) => fetchSomething(pageParam), // [!code ++]
++  initialPageParam: 0, // [!code ++]
+   getNextPageParam: (lastPage) => lastPage.next,
+})
+```
+
+### Manual mode for infinite queries has been removed
+
+Previously, we've allowed to overwrite the `pageParams` that would be returned from `getNextPageParam` or `getPreviousPageParam` by passing a `pageParam` value directly to `fetchNextPage` or `fetchPreviousPage`. This feature didn't work at all with refetches and wasn't widely known or used. This also means that `getNextPageParam` is now required for infinite queries.
+
+### Returning `null` from `getNextPageParam` or `getPreviousPageParam` now indicates that there is no further page available
+
+In v4, you needed to explicitly return `undefined` to indicate that there is no further page available. We've widened this check to include `null`.
+
+### No retries on the server
+
+On the server, `retry` now defaults to `0` instead of `3`. For prefetching, we have always defaulted to `0` retries, but since queries that have `suspense` enabled can now execute directly on the server as well (since React18), we have to make sure that we don't retry on the server at all.
+
+### `status: loading` has been changed to `status: pending` and `isLoading` has been changed to `isPending` and `isInitialLoading` has now been renamed to `isLoading`
+
+The `loading` status has been renamed to `pending`, and similarly the derived `isLoading` flag has been renamed to `isPending`.
+
+For mutations as well the `status` has been changed from `loading` to `pending` and the `isLoading` flag has been changed to `isPending`.
+
+Lastly, a new derived `isLoading` flag has been added to the queries that is implemented as `isPending && isFetching`. This means that `isLoading` and `isInitialLoading` have the same thing, but `isInitialLoading` is deprecated now and will be removed in the next major version.
+
+To understand the reasoning behind this change checkout the [v5 roadmap discussion](https://github.com/TanStack/query/discussions/4252).
+
+### `hashQueryKey` has been renamed to `hashKey`
+
+because it also hashes mutation keys and can be used inside the `predicate` functions of `useIsMutating` and `useMutationState`, which gets mutations passed.
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+
+### The minimum required React version is now 18.0
+
+React Query v5 requires React 18.0 or later. This is because we are using the new `useSyncExternalStore` hook, which is only available in React 18.0 and later. Previously, we have been using the shim provided by React.
+
+### The `contextSharing` prop has been removed from QueryClientProvider
+
+You could previously use the `contextSharing` property to share the first (and at least one) instance of the query client context across the window. This ensured that if TanStack Query was used across different bundles or microfrontends then they will all use the same instance of the context, regardless of module scoping.
+
+With the removal of the custom context prop in v5, refer to the section on [Removed custom context prop in favor of custom queryClient instance](#removed-custom-context-prop-in-favor-of-custom-queryclient-instance). If you wish to share the same query client across multiple packages of an application, you can directly pass a shared custom `queryClient` instance.
+
+### No longer using `unstable_batchedUpdates` as the batching function in React and React Native
+
+Since the function `unstable_batchedUpdates` is noop in React 18, it will no longer be automatically set as the batching function in `react-query`.
+
+If your framework supports a custom batching function, you can let TanStack Query know about it by calling `notifyManager.setBatchNotifyFunction`.
+
+For example, this is how the batch function is set in `solid-query`:
+
+```ts
+import { notifyManager } from '@tanstack/query-core'
+import { batch } from 'solid-js'
+
+notifyManager.setBatchNotifyFunction(batch)
+```
+
+### Hydration API changes
+
+To better support concurrent features and transitions we've made some changes to the hydration APIs. The `Hydrate` component has been renamed to `HydrationBoundary` and the `useHydrate` hook has been removed.
+
+The `HydrationBoundary` no longer hydrates mutations, only queries. To hydrate mutations, use the low level `hydrate` API or the `persistQueryClient` plugin.
+
+Finally, as a technical detail, the timing for when queries are hydrated have changed slightly. New queries are still hydrated in the render phase so that SSR works as usual, but any queries that already exist in the cache are now hydrated in an effect instead (as long as their data is fresher than what is in the cache). If you are hydrating just once at the start of your application as is common, this wont affect you, but if you are using Server Components and pass down fresh data for hydration on a page navigation, you might notice a flash of the old data before the page immediately rerenders.
+
+This last change is technically a breaking one, and was made so we don't prematurely update content on the _existing_ page before a page transition has been fully committed. No action is required on your part.
+
+```tsx
+- import { Hydrate } from '@tanstack/react-query' // [!code --]
++ import { HydrationBoundary } from '@tanstack/react-query' // [!code ++]
+
+
+- <Hydrate state={dehydratedState}> // [!code --]
++ <HydrationBoundary state={dehydratedState}> // [!code ++]
+  <App />
+- </Hydrate> // [!code --]
++ </HydrationBoundary> // [!code ++]
+```
+
+### Query defaults changes
+
+`queryClient.getQueryDefaults` will now merge together all matching registrations instead of returning only the first matching registration.
+
+As a result, calls to `queryClient.setQueryDefaults` should now be ordered with _increasing_ specificity.
+That is, registrations should be made from the **most generic key** to the **least generic one**.
+
+For example:
+
+```ts
++ queryClient.setQueryDefaults(['todo'], {   // [!code ++]
++   retry: false,  // [!code ++]
++   staleTime: 60_000,  // [!code ++]
++ })  // [!code ++]
+queryClient.setQueryDefaults(['todo', 'detail'], {
++   retry: true,  // [!code --]
+  retryDelay: 1_000,
+  staleTime: 10_000,
+})
+- queryClient.setQueryDefaults(['todo'], { // [!code --]
+-   retry: false, // [!code --]
+-   staleTime: 60_000, // [!code --]
+- }) // [!code --]
+```
+
+Note that in this specific example, `retry: true` was added to the `['todo', 'detail']` registration to counteract it now inheriting `retry: false` from the more general registration. The specific changes needed to maintain exact behavior will vary depending on your defaults.
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+
+## New Features 🚀
+
+v5 also comes with new features:
+
+### Simplified optimistic updates
+
+We have a new, simplified way to perform optimistic updates by leveraging the returned `variables` from `useMutation`:
+
+```tsx
+const queryInfo = useTodos()
+const addTodoMutation = useMutation({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+})
+
+if (queryInfo.data) {
+  return (
+    <ul>
+      {queryInfo.data.items.map((todo) => (
+        <li key={todo.id}>{todo.text}</li>
+      ))}
+      {addTodoMutation.isPending && (
+        <li key={String(addTodoMutation.submittedAt)} style={{ opacity: 0.5 }}>
+          {addTodoMutation.variables}
+        </li>
+      )}
+    </ul>
+  )
+}
+```
+
+Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](/query/framework/react/guides/optimistic-updates).
+
+### Limited, Infinite Queries with new maxPages option
+
+Infinite queries are great when infinite scroll or pagination are needed.
+However, the more pages you fetch, the more memory you consume, and this also slows down the query refetching process as all the pages are sequentially refetched.
+
+Version 5 has a new `maxPages` option for infinite queries, which allows developers to limit the number of pages that are stored in the query data and subsequently refetched.
+You can adjust the `maxPages` value according to the UX and refetching performance you want to deliver.
+
+Note that the infinite list must be bi-directional, which requires both `getNextPageParam` and `getPreviousPageParam` to be defined.
+
+### Infinite Queries can prefetch multiple pages
+
+Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option. Read the [prefetching guide](/query/framework/react/guides/prefetching) for more information.
+
+### New `combine` option for `useQueries`
+
+See the [useQueries docs](/query/framework/react/reference/useQueries#combine) for more details.
+
+### Experimental `fine grained storage persister`
+
+See the [experimental_createPersister docs](/query/framework/react/plugins/createPersister) for more details.
+
+[//]: # 'FrameworkSpecificNewFeatures'
+
+### Typesafe way to create Query Options
+
+See the [TypeScript docs](/query/framework/react/typescript#typing-query-options) for more details.
+
+### new hooks for suspense
+
+With v5, suspense for data fetching finally becomes "stable". We've added dedicated `useSuspenseQuery`, `useSuspenseInfiniteQuery` and `useSuspenseQueries` hooks. With these hooks, `data` will never be potentially `undefined` on type level:
+
+```js
+const { data: post } = useSuspenseQuery({
+  // ^? const post: Post
+  queryKey: ['post', postId],
+  queryFn: () => fetchPost(postId),
+})
+```
+
+The experimental `suspense: boolean` flag on the query hooks has been removed.
+
+You can read more about them in the [suspense docs](/query/framework/react/guides/suspense).
+
+[//]: # 'FrameworkSpecificNewFeatures'
diff --git a/mintlify/query/framework/react/guides/mutations.md b/mintlify/query/framework/react/guides/mutations.md
new file mode 100644
index 000000000..9e3d13420
--- /dev/null
+++ b/mintlify/query/framework/react/guides/mutations.md
@@ -0,0 +1,419 @@
+---
+id: mutations
+title: Mutations
+---
+
+Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, TanStack Query exports a `useMutation` hook.
+
+Here's an example of a mutation that adds a new todo to the server:
+
+[//]: # 'Example'
+
+```tsx
+function App() {
+  const mutation = useMutation({
+    mutationFn: (newTodo) => {
+      return axios.post('/todos', newTodo)
+    },
+  })
+
+  return (
+    <div>
+      {mutation.isPending ? (
+        'Adding todo...'
+      ) : (
+        <>
+          {mutation.isError ? (
+            <div>An error occurred: {mutation.error.message}</div>
+          ) : null}
+
+          {mutation.isSuccess ? <div>Todo added!</div> : null}
+
+          <button
+            onClick={() => {
+              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
+            }}
+          >
+            Create Todo
+          </button>
+        </>
+      )}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example'
+
+A mutation can only be in one of the following states at any given moment:
+
+- `isIdle` or `status === 'idle'` - The mutation is currently idle or in a fresh/reset state
+- `isPending` or `status === 'pending'` - The mutation is currently running
+- `isError` or `status === 'error'` - The mutation encountered an error
+- `isSuccess` or `status === 'success'` - The mutation was successful and mutation data is available
+
+Beyond those primary states, more information is available depending on the state of the mutation:
+
+- `error` - If the mutation is in an `error` state, the error is available via the `error` property.
+- `data` - If the mutation is in a `success` state, the data is available via the `data` property.
+
+In the example above, you also saw that you can pass variables to your mutations function by calling the `mutate` function with a **single variable or object**.
+
+Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](/query/reference/QueryClient#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](/query/reference/QueryClient#queryclientsetquerydata), mutations become a very powerful tool.
+
+[//]: # 'Info1'
+
+> IMPORTANT: The `mutate` function is an asynchronous function, which means you cannot use it directly in an event callback in **React 16 and earlier**. If you need to access the event in `onSubmit` you need to wrap `mutate` in another function. This is due to [React event pooling](https://reactjs.org/docs/legacy-event-pooling.html).
+
+[//]: # 'Info1'
+[//]: # 'Example2'
+
+```tsx
+// This will not work in React 16 and earlier
+const CreateTodo = () => {
+  const mutation = useMutation({
+    mutationFn: (event) => {
+      event.preventDefault()
+      return fetch('/api', new FormData(event.target))
+    },
+  })
+
+  return <form onSubmit={mutation.mutate}>...</form>
+}
+
+// This will work
+const CreateTodo = () => {
+  const mutation = useMutation({
+    mutationFn: (formData) => {
+      return fetch('/api', formData)
+    },
+  })
+  const onSubmit = (event) => {
+    event.preventDefault()
+    mutation.mutate(new FormData(event.target))
+  }
+
+  return <form onSubmit={onSubmit}>...</form>
+}
+```
+
+[//]: # 'Example2'
+
+## Resetting Mutation State
+
+It's sometimes the case that you need to clear the `error` or `data` of a mutation request. To do this, you can use the `reset` function to handle this:
+
+[//]: # 'Example3'
+
+```tsx
+const CreateTodo = () => {
+  const [title, setTitle] = useState('')
+  const mutation = useMutation({ mutationFn: createTodo })
+
+  const onCreateTodo = (e) => {
+    e.preventDefault()
+    mutation.mutate({ title })
+  }
+
+  return (
+    <form onSubmit={onCreateTodo}>
+      {mutation.error && (
+        <h5 onClick={() => mutation.reset()}>{mutation.error}</h5>
+      )}
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <br />
+      <button type="submit">Create Todo</button>
+    </form>
+  )
+}
+```
+
+[//]: # 'Example3'
+
+## Mutation Side Effects
+
+`useMutation` comes with some helper options that allow quick and easy side-effects at any stage during the mutation lifecycle. These come in handy for both [invalidating and refetching queries after mutations](/query/framework/react/guides/invalidations-from-mutations) and even [optimistic updates](/query/framework/react/guides/optimistic-updates)
+
+[//]: # 'Example4'
+
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onMutate: (variables, context) => {
+    // A mutation is about to happen!
+
+    // Optionally return a result containing data to use when for example rolling back
+    return { id: 1 }
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // An error happened!
+    console.log(`rolling back optimistic update with id ${onMutateResult.id}`)
+  },
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Boom baby!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // Error or success... doesn't matter!
+  },
+})
+```
+
+[//]: # 'Example4'
+
+When returning a promise in any of the callback functions it will first be awaited before the next callback is called:
+
+[//]: # 'Example5'
+
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: async () => {
+    console.log("I'm first!")
+  },
+  onSettled: async () => {
+    console.log("I'm second!")
+  },
+})
+```
+
+[//]: # 'Example5'
+
+You might find that you want to **trigger additional callbacks** beyond the ones defined on `useMutation` when calling `mutate`. This can be used to trigger component-specific side effects. To do that, you can provide any of the same callback options to the `mutate` function after your mutation variable. Supported options include: `onSuccess`, `onError` and `onSettled`. Please keep in mind that those additional callbacks won't run if your component unmounts _before_ the mutation finishes.
+
+[//]: # 'Example6'
+
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+})
+
+mutate(todo, {
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+})
+```
+
+[//]: # 'Example6'
+
+### Consecutive mutations
+
+There is a slight difference in handling `onSuccess`, `onError` and `onSettled` callbacks when it comes to consecutive mutations. When passed to the `mutate` function, they will be fired up only _once_ and only if the component is still mounted. This is due to the fact that mutation observer is removed and resubscribed every time when the `mutate` function is called. On the contrary, `useMutation` handlers execute for each `mutate` call.
+
+> Be aware that most likely, `mutationFn` passed to `useMutation` is asynchronous. In that case, the order in which mutations are fulfilled may differ from the order of `mutate` function calls.
+
+[//]: # 'Example7'
+
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Will be called 3 times
+  },
+})
+
+const todos = ['Todo 1', 'Todo 2', 'Todo 3']
+todos.forEach((todo) => {
+  mutate(todo, {
+    onSuccess: (data, variables, onMutateResult, context) => {
+      // Will execute only once, for the last mutation (Todo 3),
+      // regardless which mutation resolves first
+    },
+  })
+})
+```
+
+[//]: # 'Example7'
+
+## Promises
+
+Use `mutateAsync` instead of `mutate` to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects.
+
+[//]: # 'Example8'
+
+```tsx
+const mutation = useMutation({ mutationFn: addTodo })
+
+try {
+  const todo = await mutation.mutateAsync(todo)
+  console.log(todo)
+} catch (error) {
+  console.error(error)
+} finally {
+  console.log('done')
+}
+```
+
+[//]: # 'Example8'
+
+## Retry
+
+By default, TanStack Query will not retry a mutation on error, but it is possible with the `retry` option:
+
+[//]: # 'Example9'
+
+```tsx
+const mutation = useMutation({
+  mutationFn: addTodo,
+  retry: 3,
+})
+```
+
+[//]: # 'Example9'
+
+If mutations fail because the device is offline, they will be retried in the same order when the device reconnects.
+
+## Persist mutations
+
+Mutations can be persisted to storage if needed and resumed at a later point. This can be done with the hydration functions:
+
+[//]: # 'Example10'
+
+```tsx
+const queryClient = new QueryClient()
+
+// Define the "addTodo" mutation
+queryClient.setMutationDefaults(['addTodo'], {
+  mutationFn: addTodo,
+  onMutate: async (variables, context) => {
+    // Cancel current queries for the todos list
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Create optimistic todo
+    const optimisticTodo = { id: uuid(), title: variables.title }
+
+    // Add optimistic todo to todos list
+    context.client.setQueryData(['todos'], (old) => [...old, optimisticTodo])
+
+    // Return a result with the optimistic todo
+    return { optimisticTodo }
+  },
+  onSuccess: (result, variables, onMutateResult, context) => {
+    // Replace optimistic todo in the todos list with the result
+    context.client.setQueryData(['todos'], (old) =>
+      old.map((todo) =>
+        todo.id === onMutateResult.optimisticTodo.id ? result : todo,
+      ),
+    )
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // Remove optimistic todo from the todos list
+    context.client.setQueryData(['todos'], (old) =>
+      old.filter((todo) => todo.id !== onMutateResult.optimisticTodo.id),
+    )
+  },
+  retry: 3,
+})
+
+// Start mutation in some component:
+const mutation = useMutation({ mutationKey: ['addTodo'] })
+mutation.mutate({ title: 'title' })
+
+// If the mutation has been paused because the device is for example offline,
+// Then the paused mutation can be dehydrated when the application quits:
+const state = dehydrate(queryClient)
+
+// The mutation can then be hydrated again when the application is started:
+hydrate(queryClient, state)
+
+// Resume the paused mutations:
+queryClient.resumePausedMutations()
+```
+
+[//]: # 'Example10'
+[//]: # 'PersistOfflineIntro'
+
+### Persisting Offline mutations
+
+If you persist offline mutations with the [persistQueryClient plugin](/query/framework/react/plugins/persistQueryClient), mutations cannot be resumed when the page is reloaded unless you provide a default mutation function.
+
+[//]: # 'PersistOfflineIntro'
+
+This is a technical limitation. When persisting to an external storage, only the state of mutations is persisted, as functions cannot be serialized. After hydration, the component that triggers the mutation might not be mounted, so calling `resumePausedMutations` might yield an error: `No mutationFn found`.
+
+[//]: # 'Example11'
+
+```tsx
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+})
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+// we need a default mutation function so that paused mutations can resume after a page reload
+queryClient.setMutationDefaults(['todos'], {
+  mutationFn: ({ id, data }) => {
+    return api.updateTodo(id, data)
+  },
+})
+
+export default function App() {
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister }}
+      onSuccess={() => {
+        // resume mutations after initial restore from localStorage was successful
+        queryClient.resumePausedMutations()
+      }}
+    >
+      <RestOfTheApp />
+    </PersistQueryClientProvider>
+  )
+}
+```
+
+[//]: # 'Example11'
+[//]: # 'OfflineExampleLink'
+
+We also have an extensive [offline example](/query/framework/react/examples/offline) that covers both queries and mutations.
+
+[//]: # 'OfflineExampleLink'
+
+## Mutation Scopes
+
+Per default, all mutations run in parallel - even if you invoke `.mutate()` of the same mutation multiple times. Mutations can be given a `scope` with an `id` to avoid that. All mutations with the same `scope.id` will run in serial, which means when they are triggered, they will start in `isPaused: true` state if there is already a mutation for that scope in progress. They will be put into a queue and will automatically resume once their time in the queue has come.
+
+[//]: # 'ExampleScopes'
+
+```tsx
+const mutation = useMutation({
+  mutationFn: addTodo,
+  scope: {
+    id: 'todo',
+  },
+})
+```
+
+[//]: # 'ExampleScopes'
+[//]: # 'Materials'
+
+## Further reading
+
+For more information about mutations, have a look at [TkDodo's article on Mastering Mutations in React Query](https://tkdodo.eu/blog/mastering-mutations-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/network-mode.md b/mintlify/query/framework/react/guides/network-mode.md
new file mode 100644
index 000000000..baa3a885f
--- /dev/null
+++ b/mintlify/query/framework/react/guides/network-mode.md
@@ -0,0 +1,46 @@
+---
+id: network-mode
+title: Network Mode
+---
+
+TanStack Query provides three different network modes to distinguish how [Queries](/query/framework/react/guides/queries) and [Mutations](/query/framework/react/guides/mutations) should behave if you have no network connection. This mode can be set for each Query / Mutation individually, or globally via the query / mutation defaults.
+
+Since TanStack Query is most often used for data fetching in combination with data fetching libraries, the default network mode is [online](#network-mode-online).
+
+## Network Mode: online
+
+In this mode, Queries and Mutations will not fire unless you have network connection. This is the default mode. If a fetch is initiated for a query, it will always stay in the `state` (`pending`, `error`, `success`) it is in if the fetch cannot be made because there is no network connection. However, a [fetchStatus](/query/framework/react/guides/queries#fetchstatus) is exposed additionally. This can be either:
+
+- `fetching`: The `queryFn` is really executing - a request is in-flight.
+- `paused`: The query is not executing - it is `paused` until you have connection again
+- `idle`: The query is not fetching and not paused
+
+The flags `isFetching` and `isPaused` are derived from this state and exposed for convenience.
+
+> Keep in mind that it might not be enough to check for `pending` state to show a loading spinner. Queries can be in `state: 'pending'`, but `fetchStatus: 'paused'` if they are mounting for the first time, and you have no network connection.
+
+If a query runs because you are online, but you go offline while the fetch is still happening, TanStack Query will also pause the retry mechanism. Paused queries will then continue to run once you re-gain network connection. This is independent of `refetchOnReconnect` (which also defaults to `true` in this mode), because it is not a `refetch`, but rather a `continue`. If the query has been [cancelled](/query/framework/react/guides/query-cancellation) in the meantime, it will not continue.
+
+## Network Mode: always
+
+In this mode, TanStack Query will always fetch and ignore the online / offline state. This is likely the mode you want to choose if you use TanStack Query in an environment where you don't need an active network connection for your Queries to work - e.g. if you just read from `AsyncStorage`, or if you just want to return `Promise.resolve(5)` from your `queryFn`.
+
+- Queries will never be `paused` because you have no network connection.
+- Retries will also not pause - your Query will go to `error` state if it fails.
+- `refetchOnReconnect` defaults to `false` in this mode, because reconnecting to the network is not a good indicator anymore that stale queries should be refetched. You can still turn it on if you want.
+
+## Network Mode: offlineFirst
+
+This mode is the middle ground between the first two options, where TanStack Query will run the `queryFn` once, but then pause retries. This is very handy if you have a serviceWorker that intercepts a request for caching like in an [offline-first PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers), or if you use HTTP caching via the [Cache-Control header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#the_cache-control_header).
+
+In those situations, the first fetch might succeed because it comes from an offline storage / cache. However, if there is a cache miss, the network request will go out and fail, in which case this mode behaves like an `online` query - pausing retries.
+
+## Devtools
+
+The [TanStack Query Devtools](/query/framework/react/devtools) will show Queries in a `paused` state if they would be fetching, but there is no network connection. There is also a toggle button to _Mock offline behavior_. Please note that this button will _not_ actually mess with your network connection (you can do that in the browser devtools), but it will set the [OnlineManager](/query/reference/onlineManager) in an offline state.
+
+## Signature
+
+- `networkMode: 'online' | 'always' | 'offlineFirst'`
+  - optional
+  - defaults to `'online'`
diff --git a/mintlify/query/framework/react/guides/optimistic-updates.md b/mintlify/query/framework/react/guides/optimistic-updates.md
new file mode 100644
index 000000000..c35fdb370
--- /dev/null
+++ b/mintlify/query/framework/react/guides/optimistic-updates.md
@@ -0,0 +1,196 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+---
+
+React Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the `onMutate` option to update your cache directly, or leverage the returned `variables` to update your UI from the `useMutation` result.
+
+## Via the UI
+
+This is the simpler variant, as it doesn't interact with the cache directly.
+
+[//]: # 'ExampleUI1'
+
+```tsx
+const addTodoMutation = useMutation({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  // make sure to _return_ the Promise from the query invalidation
+  // so that the mutation stays in `pending` state until the refetch is finished
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+})
+
+const { isPending, submittedAt, variables, mutate, isError } = addTodoMutation
+```
+
+[//]: # 'ExampleUI1'
+
+you will then have access to `addTodoMutation.variables`, which contain the added todo. In your UI list, where the query is rendered, you can append another item to the list while the mutation `isPending`:
+
+[//]: # 'ExampleUI2'
+
+```tsx
+<ul>
+  {todoQuery.items.map((todo) => (
+    <li key={todo.id}>{todo.text}</li>
+  ))}
+  {isPending && <li style={{ opacity: 0.5 }}>{variables}</li>}
+</ul>
+```
+
+[//]: # 'ExampleUI2'
+
+We're rendering a temporary item with a different `opacity` as long as the mutation is pending. Once it completes, the item will automatically no longer be rendered. Given that the refetch succeeded, we should see the item as a "normal item" in our list.
+
+If the mutation errors, the item will also disappear. But we could continue to show it, if we want, by checking for the `isError` state of the mutation. `variables` are _not_ cleared when the mutation errors, so we can still access them, maybe even show a retry button:
+
+[//]: # 'ExampleUI3'
+
+```tsx
+{
+  isError && (
+    <li style={{ color: 'red' }}>
+      {variables}
+      <button onClick={() => mutate(variables)}>Retry</button>
+    </li>
+  )
+}
+```
+
+[//]: # 'ExampleUI3'
+
+### If the mutation and the query don't live in the same component
+
+This approach works very well if the mutation and the query live in the same component. However, you also get access to all mutations in other components via the dedicated `useMutationState` hook. It is best combined with a `mutationKey`:
+
+[//]: # 'ExampleUI4'
+
+```tsx
+// somewhere in your app
+const { mutate } = useMutation({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  mutationKey: ['addTodo'],
+})
+
+// access variables somewhere else
+const variables = useMutationState<string>({
+  filters: { mutationKey: ['addTodo'], status: 'pending' },
+  select: (mutation) => mutation.state.variables,
+})
+```
+
+[//]: # 'ExampleUI4'
+
+`variables` will be an `Array`, because there might be multiple mutations running at the same time. If we need a unique key for the items, we can also select `mutation.state.submittedAt`. This will even make displaying concurrent optimistic updates a breeze.
+
+## Via the cache
+
+When you optimistically update your state before performing a mutation, there is a chance that the mutation will fail. In most of these failure cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could represent some type of server issue that won't make it possible to refetch. In this event, you can instead choose to roll back your update.
+
+To do this, `useMutation`'s `onMutate` handler option allows you to return a value that will later be passed to both `onError` and `onSettled` handlers as the last argument. In most cases, it is most useful to pass a rollback function.
+
+### Updating a list of todos when adding a new todo
+
+[//]: # 'Example'
+
+```tsx
+const queryClient = useQueryClient()
+
+useMutation({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Snapshot the previous value
+    const previousTodos = context.client.getQueryData(['todos'])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos'], (old) => [...old, newTodo])
+
+    // Return a result with the snapshotted value
+    return { previousTodos }
+  },
+  // If the mutation fails,
+  // use the result returned from onMutate to roll back
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(['todos'], onMutateResult.previousTodos)
+  },
+  // Always refetch after error or success:
+  onSettled: (data, error, variables, onMutateResult, context) =>
+    context.client.invalidateQueries({ queryKey: ['todos'] }),
+})
+```
+
+[//]: # 'Example'
+
+### Updating a single todo
+
+[//]: # 'Example2'
+
+```tsx
+useMutation({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos', newTodo.id] })
+
+    // Snapshot the previous value
+    const previousTodo = context.client.getQueryData(['todos', newTodo.id])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos', newTodo.id], newTodo)
+
+    // Return a result with the previous and new todo
+    return { previousTodo, newTodo }
+  },
+  // If the mutation fails, use the result we returned above
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(
+      ['todos', onMutateResult.newTodo.id],
+      onMutateResult.previousTodo,
+    )
+  },
+  // Always refetch after error or success:
+  onSettled: (newTodo, error, variables, onMutateResult, context) =>
+    context.client.invalidateQueries({ queryKey: ['todos', newTodo.id] }),
+})
+```
+
+[//]: # 'Example2'
+
+You can also use the `onSettled` function in place of the separate `onError` and `onSuccess` handlers if you wish:
+
+[//]: # 'Example3'
+
+```tsx
+useMutation({
+  mutationFn: updateTodo,
+  // ...
+  onSettled: async (newTodo, error, variables, onMutateResult, context) => {
+    if (error) {
+      // do something
+    }
+  },
+})
+```
+
+[//]: # 'Example3'
+
+## When to use what
+
+If you only have one place where the optimistic result should be shown, using `variables` and updating the UI directly is the approach that requires less code and is generally easier to reason about. For example, you don't need to handle rollbacks at all.
+
+However, if you have multiple places on the screen that would require to know about the update, manipulating the cache directly will take care of this for you automatically.
+
+[//]: # 'Materials'
+
+## Further reading
+
+Have a look at the guide by TkDodo on [Concurrent Optimistic Updates](https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/paginated-queries.md b/mintlify/query/framework/react/guides/paginated-queries.md
new file mode 100644
index 000000000..258d744c7
--- /dev/null
+++ b/mintlify/query/framework/react/guides/paginated-queries.md
@@ -0,0 +1,93 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+---
+
+Rendering paginated data is a very common UI pattern and in TanStack Query, it "just works" by including the page information in the query key:
+
+[//]: # 'Example'
+
+```tsx
+const result = useQuery({
+  queryKey: ['projects', page],
+  queryFn: () => fetchProjects(page),
+})
+```
+
+[//]: # 'Example'
+
+However, if you run this simple example, you might notice something strange:
+
+**The UI jumps in and out of the `success` and `pending` states because each new page is treated like a brand new query.**
+
+This experience is not optimal and unfortunately is how many tools today insist on working. But not TanStack Query! As you may have guessed, TanStack Query comes with an awesome feature called `placeholderData` that allows us to get around this.
+
+## Better Paginated Queries with `placeholderData`
+
+Consider the following example where we would ideally want to increment a pageIndex (or cursor) for a query. If we were to use `useQuery`, **it would still technically work fine**, but the UI would jump in and out of the `success` and `pending` states as different queries are created and destroyed for each page or cursor. By setting `placeholderData` to `(previousData) => previousData` or `keepPreviousData` function exported from TanStack Query, we get a few new things:
+
+- **The data from the last successful fetch is available while new data is being requested, even though the query key has changed**.
+- When the new data arrives, the previous `data` is seamlessly swapped to show the new data.
+- `isPlaceholderData` is made available to know what data the query is currently providing you
+
+[//]: # 'Example2'
+
+```tsx
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import React from 'react'
+
+function Todos() {
+  const [page, setPage] = React.useState(0)
+
+  const fetchProjects = (page = 0) =>
+    fetch('/api/projects?page=' + page).then((res) => res.json())
+
+  const { isPending, isError, error, data, isFetching, isPlaceholderData } =
+    useQuery({
+      queryKey: ['projects', page],
+      queryFn: () => fetchProjects(page),
+      placeholderData: keepPreviousData,
+    })
+
+  return (
+    <div>
+      {isPending ? (
+        <div>Loading...</div>
+      ) : isError ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        <div>
+          {data.projects.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        </div>
+      )}
+      <span>Current Page: {page + 1}</span>
+      <button
+        onClick={() => setPage((old) => Math.max(old - 1, 0))}
+        disabled={page === 0}
+      >
+        Previous Page
+      </button>
+      <button
+        onClick={() => {
+          if (!isPlaceholderData && data.hasMore) {
+            setPage((old) => old + 1)
+          }
+        }}
+        // Disable the Next Page button until we know a next page is available
+        disabled={isPlaceholderData || !data?.hasMore}
+      >
+        Next Page
+      </button>
+      {isFetching ? <span> Loading...</span> : null}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
+
+## Lagging Infinite Query results with `placeholderData`
+
+While not as common, the `placeholderData` option also works flawlessly with the `useInfiniteQuery` hook, so you can seamlessly allow your users to continue to see cached data while infinite query keys change over time.
diff --git a/mintlify/query/framework/react/guides/parallel-queries.md b/mintlify/query/framework/react/guides/parallel-queries.md
new file mode 100644
index 000000000..d9f4c3408
--- /dev/null
+++ b/mintlify/query/framework/react/guides/parallel-queries.md
@@ -0,0 +1,63 @@
+---
+id: parallel-queries
+title: Parallel Queries
+---
+
+"Parallel" queries are queries that are executed in parallel, or at the same time so as to maximize fetching concurrency.
+
+## Manual Parallel Queries
+
+When the number of parallel queries does not change, there is **no extra effort** to use parallel queries. Just use any number of TanStack Query's `useQuery` and `useInfiniteQuery` hooks side-by-side!
+
+[//]: # 'Example'
+
+```tsx
+function App () {
+  // The following queries will execute in parallel
+  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
+  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
+  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
+  ...
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Info'
+
+> When using React Query in suspense mode, this pattern of parallelism does not work, since the first query would throw a promise internally and would suspend the component before the other queries run. To get around this, you'll either need to use the `useSuspenseQueries` hook (which is suggested) or orchestrate your own parallelism with separate components for each `useSuspenseQuery` instance.
+
+[//]: # 'Info'
+
+## Dynamic Parallel Queries with `useQueries`
+
+[//]: # 'DynamicParallelIntro'
+
+If the number of queries you need to execute is changing from render to render, you cannot use manual querying since that would violate the rules of hooks. Instead, TanStack Query provides a `useQueries` hook, which you can use to dynamically execute as many queries in parallel as you'd like.
+
+[//]: # 'DynamicParallelIntro'
+[//]: # 'DynamicParallelDescription'
+
+`useQueries` accepts an **options object** with a **queries key** whose value is an **array of query objects**. It returns an **array of query results**:
+
+[//]: # 'DynamicParallelDescription'
+[//]: # 'Example2'
+
+```tsx
+function App({ users }) {
+  const userQueries = useQueries({
+    queries: users.map((user) => {
+      return {
+        queryKey: ['user', user.id],
+        queryFn: () => fetchUserById(user.id),
+      }
+    }),
+  })
+}
+```
+
+[//]: # 'Example2'
+[//]: # 'TypeScriptSelect'
+
+> When using TypeScript, an inline `select` written on a query object passed to `useQueries` can't infer its `data` argument from that same object's `queryFn` — it falls back to `unknown`. Annotate the `select` parameter explicitly, or define the query with the [`queryOptions`](/query/framework/react/reference/queryOptions) helper, to keep type inference. See [this known limitation](https://github.com/TanStack/query/issues/6556).
+
+[//]: # 'TypeScriptSelect'
diff --git a/mintlify/query/framework/react/guides/placeholder-query-data.md b/mintlify/query/framework/react/guides/placeholder-query-data.md
new file mode 100644
index 000000000..936d89ae7
--- /dev/null
+++ b/mintlify/query/framework/react/guides/placeholder-query-data.md
@@ -0,0 +1,101 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+---
+
+## What is placeholder data?
+
+Placeholder data allows a query to behave as if it already has data, similar to the `initialData` option, but **the data is not persisted to the cache**. This comes in handy for situations where you have enough partial (or fake) data to render the query successfully while the actual data is fetched in the background.
+
+> Example: An individual blog post query could pull "preview" data from a parent list of blog posts that only include title and a small snippet of the post body. You would not want to persist this partial data to the query result of the individual query, but it is useful for showing the content layout as quickly as possible while the actual query finishes to fetch the entire object.
+
+There are a few ways to supply placeholder data for a query to the cache before you need it:
+
+- Declaratively:
+  - Provide `placeholderData` to a query to prepopulate its cache if empty
+- Imperatively:
+  - [Prefetch or fetch the data using `queryClient` and the `placeholderData` option](/query/framework/react/guides/prefetching)
+
+When we use `placeholderData`, our Query will not be in a `pending` state - it will start out as being in `success` state, because we have `data` to display - even if that data is just "placeholder" data. To distinguish it from "real" data, we will also have the `isPlaceholderData` flag set to `true` on the Query result.
+
+## Placeholder Data as a Value
+
+[//]: # 'ExampleValue'
+
+```tsx
+function Todos() {
+  const result = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    placeholderData: placeholderTodos,
+  })
+}
+```
+
+[//]: # 'ExampleValue'
+[//]: # 'Memoization'
+
+### Placeholder Data Memoization
+
+If the process for accessing a query's placeholder data is intensive or just not something you want to perform on every render, you can memoize the value:
+
+```tsx
+function Todos() {
+  const placeholderData = useMemo(() => generateFakeTodos(), [])
+  const result = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    placeholderData,
+  })
+}
+```
+
+[//]: # 'Memoization'
+
+## Placeholder Data as a Function
+
+`placeholderData` can also be a function, where you can get access to the data and Query meta information of a "previous" successful Query. This is useful for situations where you want to use the data from one query as the placeholder data for another query. When the QueryKey changes, e.g. from `['todos', 1]` to `['todos', 2]`, we can keep displaying "old" data instead of having to show a loading spinner while data is _transitioning_ from one Query to the next. For more information, see [Paginated Queries](/query/framework/react/guides/paginated-queries).
+
+[//]: # 'ExampleFunction'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos', id],
+  queryFn: () => fetch(`/todos/${id}`),
+  placeholderData: (previousData, previousQuery) => previousData,
+})
+```
+
+[//]: # 'ExampleFunction'
+
+### Placeholder Data from Cache
+
+In some circumstances, you may be able to provide the placeholder data for a query from the cached result of another. A good example of this would be searching the cached data from a blog post list query for a preview version of the post, then using that as the placeholder data for your individual post query:
+
+[//]: # 'ExampleCache'
+
+```tsx
+function BlogPost({ blogPostId }) {
+  const queryClient = useQueryClient()
+  const result = useQuery({
+    queryKey: ['blogPost', blogPostId],
+    queryFn: () => fetch(`/blogPosts/${blogPostId}`),
+    placeholderData: () => {
+      // Use the smaller/preview version of the blogPost from the 'blogPosts'
+      // query as the placeholder data for this blogPost query
+      return queryClient
+        .getQueryData(['blogPosts'])
+        ?.find((d) => d.id === blogPostId)
+    },
+  })
+}
+```
+
+[//]: # 'ExampleCache'
+[//]: # 'Materials'
+
+## Further reading
+
+For a comparison between `Placeholder Data` and `Initial Data`, see the [article by TkDodo](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/polling.md b/mintlify/query/framework/react/guides/polling.md
new file mode 100644
index 000000000..16ee9b4e7
--- /dev/null
+++ b/mintlify/query/framework/react/guides/polling.md
@@ -0,0 +1,109 @@
+---
+id: polling
+title: Polling
+---
+
+`refetchInterval` makes a query refetch on a timer. Set it to a number in milliseconds and the query runs every N ms while there's at least one active observer:
+
+[//]: # 'Example1'
+
+```tsx
+useQuery({
+  queryKey: ['prices'],
+  queryFn: fetchPrices,
+  refetchInterval: 5_000, // every 5 seconds
+})
+```
+
+[//]: # 'Example1'
+
+Polling is independent of `staleTime`. A query can be fresh and still poll on schedule; see [Important Defaults](/query/framework/react/guides/important-defaults) for how `staleTime` interacts with other refetch behaviors. `refetchInterval` fires on its own clock regardless of freshness.
+
+## Adapting the interval to query state
+
+Pass a function instead of a number to compute the interval from the current query. The function receives the `Query` object and should return a number in ms or `false` to stop polling:
+
+[//]: # 'Example2'
+
+```tsx
+useQuery({
+  queryKey: ['job', jobId],
+  queryFn: () => fetchJobStatus(jobId),
+  refetchInterval: (query) => {
+    // Stop polling once the job finishes
+    if (query.state.data?.status === 'complete') return false
+    return 2_000
+  },
+})
+```
+
+[//]: # 'Example2'
+
+Returning `false` clears the interval timer. If the query result changes so the function would return a positive number again, polling resumes automatically.
+
+## Background polling
+
+By default, polling pauses when the browser tab loses focus. For dashboards or any interface where data needs to stay current even while the user is in another tab, disable that behavior:
+
+[//]: # 'Example3'
+
+```tsx
+useQuery({
+  queryKey: ['portfolio'],
+  queryFn: fetchPortfolio,
+  refetchInterval: 30_000,
+  refetchIntervalInBackground: true,
+})
+```
+
+[//]: # 'Example3'
+
+## Pausing polling
+
+Pass a function to `refetchInterval` and close over component state to control when polling runs:
+
+[//]: # 'Example4'
+
+```tsx
+useQuery({
+  queryKey: ['prices', tokenAddress],
+  queryFn: () => fetchPrice(tokenAddress),
+  refetchInterval: () => {
+    if (!tokenAddress || isPaused) return false
+    return 15_000
+  },
+})
+```
+
+[//]: # 'Example4'
+
+## Polling with offline support
+
+TanStack Query detects connectivity by listening to the browser's `online` and `offline` events. In environments where those events don't fire reliably (Electron, some embedded WebViews), set `networkMode: 'always'` to skip the connectivity check:
+
+[//]: # 'Example5'
+
+```tsx
+useQuery({
+  queryKey: ['chainStatus'],
+  queryFn: fetchChainStatus,
+  refetchInterval: 10_000,
+  networkMode: 'always',
+})
+```
+
+[//]: # 'Example5'
+
+For more on network modes, see [Network Mode](/query/framework/react/guides/network-mode).
+
+## Note on deduplication
+
+Each `QueryObserver` (each component using `useQuery` with `refetchInterval`) runs its own timer. Two components subscribed to the same key with `refetchInterval: 5000` each fire their timer every 5 seconds. What gets deduplicated is concurrent in-flight fetches: if two timers fire at the same time, only one network request goes out. The timers are observer-level; the deduplication is query-level.
+
+[//]: # 'ReactNative'
+
+## Non-browser environments
+
+For non-browser runtimes like React Native, the standard `online`/`offline` and focus events aren't available. The [React Native guide](/query/framework/react/react-native) covers how to connect `focusManager` and `onlineManager` to native app state APIs.
+
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/react/guides/prefetching.md b/mintlify/query/framework/react/guides/prefetching.md
new file mode 100644
index 000000000..ff59b8d17
--- /dev/null
+++ b/mintlify/query/framework/react/guides/prefetching.md
@@ -0,0 +1,438 @@
+---
+id: prefetching
+title: Prefetching & Router Integration
+---
+
+When you know or suspect that a certain piece of data will be needed, you can use prefetching to populate the cache with that data ahead of time, leading to a faster experience.
+
+There are a few different prefetching patterns:
+
+1. In event handlers
+2. In components
+3. Via router integration
+4. During Server Rendering (another form of router integration)
+
+In this guide, we'll take a look at the first three, while the fourth will be covered in depth in the [Server Rendering & Hydration guide](/query/framework/react/guides/ssr) and the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+One specific use of prefetching is to avoid Request Waterfalls, for an in-depth background and explanation of those, see the [Performance & Request Waterfalls guide](/query/framework/react/guides/request-waterfalls).
+
+## prefetchQuery & prefetchInfiniteQuery
+
+Before jumping into the different specific prefetch patterns, let's look at the `prefetchQuery` and `prefetchInfiniteQuery` functions. First a few basics:
+
+- Out of the box, these functions use the default `staleTime` configured for the `queryClient` to determine whether existing data in the cache is fresh or needs to be fetched again
+- You can also pass a specific `staleTime` like this: `prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })`
+  - This `staleTime` is only used for the prefetch, you still need to set it for any `useQuery` call as well
+  - If you want to ignore `staleTime` and instead always return data if it's available in the cache, you can use the `ensureQueryData` function.
+  - Tip: If you are prefetching on the server, set a default `staleTime` higher than `0` for that `queryClient` to avoid having to pass in a specific `staleTime` to each prefetch call
+- If no instances of `useQuery` appear for a prefetched query, it will be deleted and garbage collected after the time specified in `gcTime`
+- These functions return `Promise<void>` and thus never return query data. If that's something you need, use `fetchQuery`/`fetchInfiniteQuery` instead.
+- The prefetch functions never throw errors because they usually try to fetch again in a `useQuery` which is a nice graceful fallback. If you need to catch errors, use `fetchQuery`/`fetchInfiniteQuery` instead.
+
+This is how you use `prefetchQuery`:
+
+[//]: # 'ExamplePrefetchQuery'
+
+```tsx
+const prefetchTodos = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+}
+```
+
+[//]: # 'ExamplePrefetchQuery'
+
+Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option, in which case you also have to provide a `getNextPageParam` function:
+
+[//]: # 'ExamplePrefetchInfiniteQuery'
+
+```tsx
+const prefetchProjects = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    pages: 3, // prefetch the first 3 pages
+  })
+}
+```
+
+[//]: # 'ExamplePrefetchInfiniteQuery'
+
+Next, let's look at how you can use these and other ways to prefetch in different situations.
+
+## Prefetch in event handlers
+
+A straightforward form of prefetching is doing it when the user interacts with something. In this example we'll use `queryClient.prefetchQuery` to start a prefetch on `onMouseEnter` or `onFocus`.
+
+[//]: # 'ExampleEventHandler'
+
+```tsx
+function ShowDetailsButton() {
+  const queryClient = useQueryClient()
+
+  const prefetch = () => {
+    queryClient.prefetchQuery({
+      queryKey: ['details'],
+      queryFn: getDetailsData,
+      // Prefetch only fires when data is older than the staleTime,
+      // so in a case like this you definitely want to set one
+      staleTime: 60000,
+    })
+  }
+
+  return (
+    <button onMouseEnter={prefetch} onFocus={prefetch} onClick={...}>
+      Show Details
+    </button>
+  )
+}
+```
+
+[//]: # 'ExampleEventHandler'
+
+## Prefetch in components
+
+Prefetching during the component lifecycle is useful when we know some child or descendant will need a particular piece of data, but we can't render that until some other query has finished loading. Let's borrow an example from the Request Waterfall guide to explain:
+
+[//]: # 'ExampleComponent'
+
+```tsx
+function Article({ id }) {
+  const { data: articleData, isPending } = useQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
+  })
+
+  if (isPending) {
+    return 'Loading article...'
+  }
+
+  return (
+    <>
+      <ArticleHeader articleData={articleData} />
+      <ArticleBody articleData={articleData} />
+      <Comments id={id} />
+    </>
+  )
+}
+
+function Comments({ id }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleComponent'
+
+This results in a request waterfall looking like this:
+
+```
+1. |> getArticleById()
+2.   |> getArticleCommentsById()
+```
+
+As mentioned in that guide, one way to flatten this waterfall and improve performance is to hoist the `getArticleCommentsById` query to the parent and pass down the result as a prop, but what if this is not feasible or desirable, for example when the components are unrelated and have multiple levels between them?
+
+In that case, we can instead prefetch the query in the parent. The simplest way to do this is to use a query but ignore the result:
+
+[//]: # 'ExampleParentComponent'
+
+```tsx
+function Article({ id }) {
+  const { data: articleData, isPending } = useQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
+  })
+
+  // Prefetch
+  useQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+    // Optional optimization to avoid rerenders when this query changes:
+    notifyOnChangeProps: [],
+  })
+
+  if (isPending) {
+    return 'Loading article...'
+  }
+
+  return (
+    <>
+      <ArticleHeader articleData={articleData} />
+      <ArticleBody articleData={articleData} />
+      <Comments id={id} />
+    </>
+  )
+}
+
+function Comments({ id }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleParentComponent'
+
+This starts fetching `'article-comments'` immediately and flattens the waterfall:
+
+```
+1. |> getArticleById()
+1. |> getArticleCommentsById()
+```
+
+[//]: # 'Suspense'
+
+If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](/query/framework/react/reference/usePrefetchQuery) or the [`usePrefetchInfiniteQuery`](/query/framework/react/reference/usePrefetchInfiniteQuery) hooks available in the library.
+
+You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
+
+```tsx
+function ArticleLayout({ id }) {
+  usePrefetchQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+
+  return (
+    <Suspense fallback="Loading article">
+      <Article id={id} />
+    </Suspense>
+  )
+}
+
+function Article({ id }) {
+  const { data: articleData, isPending } = useSuspenseQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
+  })
+
+  ...
+}
+```
+
+Another way is to prefetch inside of the query function. This makes sense if you know that every time an article is fetched it's very likely comments will also be needed. For this, we'll use `queryClient.prefetchQuery`:
+
+```tsx
+const queryClient = useQueryClient()
+const { data: articleData, isPending } = useQuery({
+  queryKey: ['article', id],
+  queryFn: (...args) => {
+    queryClient.prefetchQuery({
+      queryKey: ['article-comments', id],
+      queryFn: getArticleCommentsById,
+    })
+
+    return getArticleById(...args)
+  },
+})
+```
+
+Prefetching in an effect also works, but note that if you are using `useSuspenseQuery` in the same component, this effect wont run until _after_ the query finishes which might not be what you want.
+
+```tsx
+const queryClient = useQueryClient()
+
+useEffect(() => {
+  queryClient.prefetchQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+}, [queryClient, id])
+```
+
+To recap, if you want to prefetch a query during the component lifecycle, there are a few different ways to do it, pick the one that suits your situation best:
+
+- Prefetch before a suspense boundary using `usePrefetchQuery` or `usePrefetchInfiniteQuery` hooks
+- Use `useQuery` or `useSuspenseQueries` and ignore the result
+- Prefetch inside the query function
+- Prefetch in an effect
+
+Let's look at a slightly more advanced case next.
+
+[//]: # 'Suspense'
+
+### Dependent Queries & Code Splitting
+
+Sometimes we want to prefetch conditionally, based on the result of another fetch. Consider this example borrowed from the [Performance & Request Waterfalls guide](/query/framework/react/guides/request-waterfalls):
+
+[//]: # 'ExampleConditionally1'
+
+```tsx
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+const GraphFeedItem = React.lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally1'
+
+As noted over in that guide, this example leads to the following double request waterfall:
+
+```
+1. |> getFeed()
+2.   |> JS for <GraphFeedItem>
+3.     |> getGraphDataById()
+```
+
+If we can not restructure our API so `getFeed()` also returns the `getGraphDataById()` data when necessary, there is no way to get rid of the `getFeed->getGraphDataById` waterfall, but by leveraging conditional prefetching, we can at least load the code and data in parallel. Just like described above, there are multiple ways to do this, but for this example, we'll do it in the query function:
+
+[//]: # 'ExampleConditionally2'
+
+```tsx
+function Feed() {
+  const queryClient = useQueryClient()
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: async (...args) => {
+      const feed = await getFeed(...args)
+
+      for (const feedItem of feed) {
+        if (feedItem.type === 'GRAPH') {
+          queryClient.prefetchQuery({
+            queryKey: ['graph', feedItem.id],
+            queryFn: getGraphDataById,
+          })
+        }
+      }
+
+      return feed
+    }
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally2'
+
+This would load the code and data in parallel:
+
+```
+1. |> getFeed()
+2.   |> JS for <GraphFeedItem>
+2.   |> getGraphDataById()
+```
+
+There is a tradeoff however, in that the code for `getGraphDataById` is now included in the parent bundle instead of in `JS for <GraphFeedItem>` so you'll need to determine what's the best performance tradeoff on a case by case basis. If `GraphFeedItem` are likely, it's probably worth to include the code in the parent. If they are exceedingly rare, it's probably not.
+
+[//]: # 'Router'
+
+## Router Integration
+
+Because data fetching in the component tree itself can easily lead to request waterfalls and the different fixes for that can be cumbersome as they accumulate throughout the application, an attractive way to do prefetching is integrating it at the router level.
+
+In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](/query/framework/react/guides/ssr).
+
+For now, let's focus on the client side case and look at an example of how you can make this work with [TanStack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](/router/framework/react/examples/basic-react-query-file-based) over in the [TanStack Router docs](https://tanstack.com/router/latest/docs).
+
+When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet.
+
+```tsx
+const queryClient = new QueryClient()
+const routerContext = new RouterContext()
+const rootRoute = routerContext.createRootRoute({
+  component: () => { ... }
+})
+
+const articleRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: 'article',
+  beforeLoad: () => {
+    return {
+      articleQueryOptions: { queryKey: ['article'], queryFn: fetchArticle },
+      commentsQueryOptions: { queryKey: ['comments'], queryFn: fetchComments },
+    }
+  },
+  loader: async ({
+    context: { queryClient },
+    routeContext: { articleQueryOptions, commentsQueryOptions },
+  }) => {
+    // Fetch comments asap, but don't block
+    queryClient.prefetchQuery(commentsQueryOptions)
+
+    // Don't render the route at all until article has been fetched
+    await queryClient.prefetchQuery(articleQueryOptions)
+  },
+  component: ({ useRouteContext }) => {
+    const { articleQueryOptions, commentsQueryOptions } = useRouteContext()
+    const articleQuery = useQuery(articleQueryOptions)
+    const commentsQuery = useQuery(commentsQueryOptions)
+
+    return (
+      ...
+    )
+  },
+  errorComponent: () => 'Oh crap!',
+})
+```
+
+Integration with other routers is also possible, see the [react-router](/query/framework/react/examples/react-router) for another demonstration.
+
+[//]: # 'Router'
+
+## Manually Priming a Query
+
+If you already have the data for your query synchronously available, you don't need to prefetch it. You can just use the [Query Client's `setQueryData` method](/query/reference/QueryClient#queryclientsetquerydata) to directly add or update a query's cached result by key.
+
+[//]: # 'ExampleManualPriming'
+
+```tsx
+queryClient.setQueryData(['todos'], todos)
+```
+
+[//]: # 'ExampleManualPriming'
+[//]: # 'Materials'
+
+## Further reading
+
+For a deep-dive on how to get data into your Query Cache before you fetch, see the [article Seeding the Query Cache by TkDodo](https://tkdodo.eu/blog/seeding-the-query-cache).
+
+Integrating with Server Side routers and frameworks is very similar to what we just saw, with the addition that the data has to be passed from the server to the client to be hydrated into the cache there. To learn how, continue on to the [Server Rendering & Hydration guide](/query/framework/react/guides/ssr).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/queries.md b/mintlify/query/framework/react/guides/queries.md
new file mode 100644
index 000000000..cf63b51b4
--- /dev/null
+++ b/mintlify/query/framework/react/guides/queries.md
@@ -0,0 +1,149 @@
+---
+id: queries
+title: Queries
+---
+
+## Query Basics
+
+A query is a declarative dependency on an asynchronous source of data that is tied to a **unique key**. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using [Mutations](/query/framework/react/guides/mutations) instead.
+
+[//]: # 'SubscribeDescription'
+
+To subscribe to a query in your components or custom hooks, call the `useQuery` hook with at least:
+
+[//]: # 'SubscribeDescription'
+
+- A **unique key for the query**
+- A function that returns a promise that:
+  - Resolves the data, or
+  - Throws an error
+
+[//]: # 'Example'
+
+```tsx
+import { useQuery } from '@tanstack/react-query'
+
+function App() {
+  const info = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
+}
+```
+
+[//]: # 'Example'
+
+The **unique key** you provide is used internally for refetching, caching, and sharing your queries throughout your application.
+
+The query result returned by `useQuery` contains all of the information about the query that you'll need for templating and any other usage of the data:
+
+[//]: # 'Example2'
+
+```tsx
+const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
+```
+
+[//]: # 'Example2'
+
+The `result` object contains a few very important states you'll need to be aware of to be productive. A query can only be in one of the following states at any given moment:
+
+- `isPending` or `status === 'pending'` - The query has no data yet
+- `isError` or `status === 'error'` - The query encountered an error
+- `isSuccess` or `status === 'success'` - The query was successful and data is available
+
+Beyond those primary states, more information is available depending on the state of the query:
+
+- `error` - If the query is in an `isError` state, the error is available via the `error` property.
+- `data` - If the query is in an `isSuccess` state, the data is available via the `data` property.
+- `isFetching` - In any state, if the query is fetching at any time (including background refetching) `isFetching` will be `true`.
+
+For **most** queries, it's usually sufficient to check for the `isPending` state, then the `isError` state, then finally, assume that the data is available and render the successful state:
+
+[//]: # 'Example3'
+
+```tsx
+function Todos() {
+  const { isPending, isError, data, error } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  })
+
+  if (isPending) {
+    return <span>Loading...</span>
+  }
+
+  if (isError) {
+    return <span>Error: {error.message}</span>
+  }
+
+  // We can assume by this point that `isSuccess === true`
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+[//]: # 'Example3'
+
+If booleans aren't your thing, you can always use the `status` state as well:
+
+[//]: # 'Example4'
+
+```tsx
+function Todos() {
+  const { status, data, error } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  })
+
+  if (status === 'pending') {
+    return <span>Loading...</span>
+  }
+
+  if (status === 'error') {
+    return <span>Error: {error.message}</span>
+  }
+
+  // also status === 'success', but "else" logic works, too
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+[//]: # 'Example4'
+
+TypeScript will also narrow the type of `data` correctly if you've checked for `pending` and `error` before accessing it.
+
+### FetchStatus
+
+In addition to the `status` field, you will also get an additional `fetchStatus` property with the following options:
+
+- `fetchStatus === 'fetching'` - The query is currently fetching.
+- `fetchStatus === 'paused'` - The query wanted to fetch, but it is paused. Read more about this in the [Network Mode](/query/framework/react/guides/network-mode) guide.
+- `fetchStatus === 'idle'` - The query is not doing anything at the moment.
+
+### Why two different states?
+
+Background refetches and stale-while-revalidate logic make all combinations for `status` and `fetchStatus` possible. For example:
+
+- a query in `success` status will usually be in `idle` fetchStatus, but it could also be in `fetching` if a background refetch is happening.
+- a query that mounts and has no data will usually be in `pending` status and `fetching` fetchStatus, but it could also be `paused` if there is no network connection.
+
+So keep in mind that a query can be in `pending` state without actually fetching data. As a rule of thumb:
+
+- The `status` gives information about the `data`: Do we have any or not?
+- The `fetchStatus` gives information about the `queryFn`: Is it running or not?
+
+[//]: # 'Materials'
+
+## Further Reading
+
+For an alternative way of performing status checks, have a look at [this article by TkDodo](https://tkdodo.eu/blog/status-checks-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/query-cancellation.md b/mintlify/query/framework/react/guides/query-cancellation.md
new file mode 100644
index 000000000..77041b103
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-cancellation.md
@@ -0,0 +1,215 @@
+---
+id: query-cancellation
+title: Query Cancellation
+---
+
+TanStack Query provides each query function with an [`AbortSignal` instance](https://developer.mozilla.org/docs/Web/API/AbortSignal). When a query becomes out-of-date or inactive, this `signal` will become aborted. This means that all queries are cancellable, and you can respond to the cancellation inside your query function if desired. The best part about this is that it allows you to continue to use normal async/await syntax while getting all the benefits of automatic cancellation.
+
+The `AbortController` API is available in [most runtime environments](https://developer.mozilla.org/docs/Web/API/AbortController#browser_compatibility), but if your runtime environment does not support it, you will need to provide a polyfill. There are [several available](https://www.npmjs.com/search?q=abortcontroller%20polyfill).
+
+## Default behavior
+
+By default, queries that unmount or become unused before their promises are resolved are _not_ cancelled. This means that after the promise has resolved, the resulting data will be available in the cache. This is helpful if you've started receiving a query, but then unmount the component before it finishes. If you mount the component again and the query has not been garbage collected yet, data will be available.
+
+However, if you consume the `AbortSignal`, the Promise will be cancelled (e.g. aborting the fetch) and therefore, also the Query must be cancelled. Cancelling the query will result in its state being _reverted_ to its previous state.
+
+## Using `fetch`
+
+[//]: # 'Example'
+
+```tsx
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const todosResponse = await fetch('/todos', {
+      // Pass the signal to one fetch
+      signal,
+    })
+    const todos = await todosResponse.json()
+
+    const todoDetails = todos.map(async ({ details }) => {
+      const response = await fetch(details, {
+        // Or pass it to several
+        signal,
+      })
+      return response.json()
+    })
+
+    return Promise.all(todoDetails)
+  },
+})
+```
+
+[//]: # 'Example'
+
+## Using `axios` [v0.22.0+](https://github.com/axios/axios/releases/tag/v0.22.0)
+
+[//]: # 'Example2'
+
+```tsx
+import axios from 'axios'
+
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) =>
+    axios.get('/todos', {
+      // Pass the signal to `axios`
+      signal,
+    }),
+})
+```
+
+[//]: # 'Example2'
+
+### Using `axios` with version lower than v0.22.0
+
+[//]: # 'Example3'
+
+```tsx
+import axios from 'axios'
+
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    // Create a new CancelToken source for this request
+    const CancelToken = axios.CancelToken
+    const source = CancelToken.source()
+
+    const promise = axios.get('/todos', {
+      // Pass the source token to your request
+      cancelToken: source.token,
+    })
+
+    // Cancel the request if TanStack Query signals to abort
+    signal?.addEventListener('abort', () => {
+      source.cancel('Query was cancelled by TanStack Query')
+    })
+
+    return promise
+  },
+})
+```
+
+[//]: # 'Example3'
+
+## Using `XMLHttpRequest`
+
+[//]: # 'Example4'
+
+```tsx
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    return new Promise((resolve, reject) => {
+      var oReq = new XMLHttpRequest()
+      oReq.addEventListener('load', () => {
+        resolve(JSON.parse(oReq.responseText))
+      })
+      signal?.addEventListener('abort', () => {
+        oReq.abort()
+        reject()
+      })
+      oReq.open('GET', '/todos')
+      oReq.send()
+    })
+  },
+})
+```
+
+[//]: # 'Example4'
+
+## Using `graphql-request`
+
+An `AbortSignal` can be set in the client `request` method.
+
+[//]: # 'Example5'
+
+```tsx
+const client = new GraphQLClient(endpoint)
+
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    client.request({ document: query, signal })
+  },
+})
+```
+
+[//]: # 'Example5'
+
+## Using `graphql-request` with version lower than v4.0.0
+
+An `AbortSignal` can be set in the `GraphQLClient` constructor.
+
+[//]: # 'Example6'
+
+```tsx
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    const client = new GraphQLClient(endpoint, {
+      signal,
+    })
+    return client.request(query, variables)
+  },
+})
+```
+
+[//]: # 'Example6'
+
+## Manual Cancellation
+
+You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `queryClient.cancelQueries({ queryKey })`, which will cancel the query and revert it back to its previous state. If you have consumed the `signal` passed to the query function, TanStack Query will additionally also cancel the Promise.
+
+[//]: # 'Example7'
+
+```tsx
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const resp = await fetch('/todos', { signal })
+    return resp.json()
+  },
+})
+
+const queryClient = useQueryClient()
+
+return (
+  <button
+    onClick={(e) => {
+      e.preventDefault()
+      queryClient.cancelQueries({ queryKey: ['todos'] })
+    }}
+  >
+    Cancel
+  </button>
+)
+```
+
+[//]: # 'Example7'
+
+## `Cancel Options`
+
+Cancel options are used to control the behavior of query cancellation operations.
+
+```tsx
+// Cancel specific queries silently
+await queryClient.cancelQueries({ queryKey: ['posts'] }, { silent: true })
+```
+
+A cancel options object supports the following properties:
+
+- `silent?: boolean`
+  - When set to `true`, suppresses propagation of `CancelledError` to observers (e.g., `onError` callbacks) and related notifications, and returns the retry promise instead of rejecting.
+  - Defaults to `false`
+- `revert?: boolean`
+  - When set to `true`, restores the query’s state (data and status) from immediately before the in-flight fetch, sets `fetchStatus` back to `idle`, and only throws if there was no prior data.
+  - Defaults to `true`
+
+## Limitations
+
+[//]: # 'Limitations'
+
+Cancellation does not work when working with `Suspense` hooks: `useSuspenseQuery`, `useSuspenseQueries` and `useSuspenseInfiniteQuery`.
+
+[//]: # 'Limitations'
diff --git a/mintlify/query/framework/react/guides/query-functions.md b/mintlify/query/framework/react/guides/query-functions.md
new file mode 100644
index 000000000..416d71c30
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-functions.md
@@ -0,0 +1,119 @@
+---
+id: query-functions
+title: Query Functions
+---
+
+A query function can be literally any function that **returns a promise**. The promise that is returned should either **resolve the data** or **throw an error**.
+
+On success, the resolved value may be anything **except `undefined`**. Queries that resolve to `undefined` will be [treated as failed](/query/framework/react/guides/migrating-to-react-query-4#undefined-is-an-illegal-cache-value-for-successful-queries). To store "nothing" as a successful result in the query cache, resolve `null` instead.
+
+All of the following are valid query function configurations:
+
+[//]: # 'Example'
+
+```tsx
+useQuery({ queryKey: ['todos'], queryFn: fetchAllTodos })
+useQuery({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
+useQuery({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    const data = await fetchTodoById(todoId)
+    return data
+  },
+})
+useQuery({
+  queryKey: ['todos', todoId],
+  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
+})
+```
+
+[//]: # 'Example'
+
+## Handling and Throwing Errors
+
+For TanStack Query to determine a query has errored, the query function **must throw** or return a **rejected Promise**. Any error that is thrown in the query function will be persisted on the `error` state of the query.
+
+[//]: # 'Example2'
+
+```tsx
+const { error } = useQuery({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    if (somethingGoesWrong) {
+      throw new Error('Oh no!')
+    }
+    if (somethingElseGoesWrong) {
+      return Promise.reject(new Error('Oh no!'))
+    }
+
+    return data
+  },
+})
+```
+
+[//]: # 'Example2'
+
+## Usage with `fetch` and other clients that do not throw by default
+
+While most utilities like `axios` or `graphql-request` automatically throw errors for unsuccessful HTTP calls, some utilities like `fetch` do not throw errors by default. If that's the case, you'll need to throw them on your own. Here is a simple way to do that with the popular `fetch` API:
+
+[//]: # 'Example3'
+
+```tsx
+useQuery({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    const response = await fetch('/todos/' + todoId)
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+    return response.json()
+  },
+})
+```
+
+[//]: # 'Example3'
+
+## Query Function Variables
+
+Query keys are not just for uniquely identifying the data you are fetching, but are also conveniently passed into your query function as part of the QueryFunctionContext. While not always necessary, this makes it possible to extract your query functions if needed:
+
+[//]: # 'Example4'
+
+```tsx
+function Todos({ status, page }) {
+  const result = useQuery({
+    queryKey: ['todos', { status, page }],
+    queryFn: fetchTodoList,
+  })
+}
+
+// Access the key, status and page variables in your query function!
+function fetchTodoList({ queryKey }) {
+  const [_key, { status, page }] = queryKey
+  return new Promise()
+}
+```
+
+[//]: # 'Example4'
+
+### QueryFunctionContext
+
+The `QueryFunctionContext` is the object passed to each query function. It consists of:
+
+- `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+- `client: QueryClient`: [QueryClient](/query/reference/QueryClient)
+- `signal?: AbortSignal`
+  - [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) instance provided by TanStack Query
+  - Can be used for [Query Cancellation](/query/framework/react/guides/query-cancellation)
+- `meta: Record<string, unknown> | undefined`
+  - an optional field you can fill with additional information about your query
+
+Additionally, [Infinite Queries](/query/framework/react/guides/infinite-queries) get the following options passed:
+
+- `pageParam: TPageParam`
+  - the page parameter used to fetch the current page
+- `direction: 'forward' | 'backward'`
+  - **deprecated**
+  - the direction of the current page fetch
+  - To get access to the direction of the current page fetch, please add a direction to `pageParam` from `getNextPageParam` and `getPreviousPageParam`.
diff --git a/mintlify/query/framework/react/guides/query-invalidation.md b/mintlify/query/framework/react/guides/query-invalidation.md
new file mode 100644
index 000000000..5841aeed4
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-invalidation.md
@@ -0,0 +1,133 @@
+---
+id: query-invalidation
+title: Query Invalidation
+---
+
+Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the `QueryClient` has an `invalidateQueries` method that lets you intelligently mark queries as stale and potentially refetch them too!
+
+[//]: # 'Example'
+
+```tsx
+// Invalidate every query in the cache
+queryClient.invalidateQueries()
+// Invalidate every query with a key that starts with `todos`
+queryClient.invalidateQueries({ queryKey: ['todos'] })
+```
+
+[//]: # 'Example'
+
+> Note: Where other libraries that use normalized caches would attempt to update local queries with the new data either imperatively or via schema inference, TanStack Query gives you the tools to avoid the manual labor that comes with maintaining normalized caches and instead prescribes **targeted invalidation, background-refetching and ultimately atomic updates**.
+
+When a query is invalidated with `invalidateQueries`, two things happen:
+
+- It is marked as stale. This stale state overrides any `staleTime` configurations being used in `useQuery` or related hooks
+- If the query is currently being rendered via `useQuery` or related hooks, it will also be refetched in the background
+
+## Query Matching with `invalidateQueries`
+
+When using APIs like `invalidateQueries` and `removeQueries` (and others that support partial query matching), you can match multiple queries by their prefix, or get really specific and match an exact query. For information on the types of filters you can use, please see [Query Filters](/query/framework/react/guides/filters#query-filters).
+
+In this example, we can use the `todos` prefix to invalidate any queries that start with `todos` in their query key:
+
+[//]: # 'Example2'
+
+```tsx
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+// Get QueryClient from the context
+const queryClient = useQueryClient()
+
+queryClient.invalidateQueries({ queryKey: ['todos'] })
+
+// Both queries below will be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
+const todoListQuery = useQuery({
+  queryKey: ['todos', { page: 1 }],
+  queryFn: fetchTodoList,
+})
+```
+
+[//]: # 'Example2'
+
+You can even invalidate queries with specific variables by passing a more specific query key to the `invalidateQueries` method:
+
+[//]: # 'Example3'
+
+```tsx
+queryClient.invalidateQueries({
+  queryKey: ['todos', { type: 'done' }],
+})
+
+// The query below will be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos', { type: 'done' }],
+  queryFn: fetchTodoList,
+})
+
+// However, the following query below will NOT be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
+```
+
+[//]: # 'Example3'
+
+The `invalidateQueries` API is very flexible, so even if you want to **only** invalidate `todos` queries that don't have any more variables or subkeys, you can pass an `exact: true` option to the `invalidateQueries` method:
+
+[//]: # 'Example4'
+
+```tsx
+queryClient.invalidateQueries({
+  queryKey: ['todos'],
+  exact: true,
+})
+
+// The query below will be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
+
+// However, the following query below will NOT be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos', { type: 'done' }],
+  queryFn: fetchTodoList,
+})
+```
+
+[//]: # 'Example4'
+
+If you find yourself wanting **even more** granularity, you can pass a predicate function to the `invalidateQueries` method. This function will receive each `Query` instance from the query cache and allow you to return `true` or `false` for whether you want to invalidate that query:
+
+[//]: # 'Example5'
+
+```tsx
+queryClient.invalidateQueries({
+  predicate: (query) =>
+    query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
+})
+
+// The query below will be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos', { version: 20 }],
+  queryFn: fetchTodoList,
+})
+
+// The query below will be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos', { version: 10 }],
+  queryFn: fetchTodoList,
+})
+
+// However, the following query below will NOT be invalidated
+const todoListQuery = useQuery({
+  queryKey: ['todos', { version: 5 }],
+  queryFn: fetchTodoList,
+})
+```
+
+[//]: # 'Example5'
diff --git a/mintlify/query/framework/react/guides/query-keys.md b/mintlify/query/framework/react/guides/query-keys.md
new file mode 100644
index 000000000..f792e88a3
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-keys.md
@@ -0,0 +1,103 @@
+---
+id: query-keys
+title: Query Keys
+---
+
+At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects. As long as the query key is serializable using `JSON.stringify`, and **unique to the query's data**, you can use it!
+
+## Simple Query Keys
+
+The simplest form of a key is an array with constants values. This format is useful for:
+
+- Generic List/Index resources
+- Non-hierarchical resources
+
+[//]: # 'Example'
+
+```tsx
+// A list of todos
+useQuery({ queryKey: ['todos'], ... })
+
+// Something else, whatever!
+useQuery({ queryKey: ['something', 'special'], ... })
+```
+
+[//]: # 'Example'
+
+## Array Keys with variables
+
+When a query needs more information to uniquely describe its data, you can use an array with a string and any number of serializable objects to describe it. This is useful for:
+
+- Hierarchical or nested resources
+  - It's common to pass an ID, index, or other primitive to uniquely identify the item
+- Queries with additional parameters
+  - It's common to pass an object of additional options
+
+[//]: # 'Example2'
+
+```tsx
+// An individual todo
+useQuery({ queryKey: ['todo', 5], ... })
+
+// An individual todo in a "preview" format
+useQuery({ queryKey: ['todo', 5, { preview: true }], ...})
+
+// A list of todos that are "done"
+useQuery({ queryKey: ['todos', { type: 'done' }], ... })
+```
+
+[//]: # 'Example2'
+
+## Query Keys are hashed deterministically!
+
+This means that no matter the order of keys in objects, all of the following queries are considered equal:
+
+[//]: # 'Example3'
+
+```tsx
+useQuery({ queryKey: ['todos', { status, page }], ... })
+useQuery({ queryKey: ['todos', { page, status }], ...})
+useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })
+```
+
+[//]: # 'Example3'
+
+The following query keys, however, are not equal. Array item order matters!
+
+[//]: # 'Example4'
+
+```tsx
+useQuery({ queryKey: ['todos', status, page], ... })
+useQuery({ queryKey: ['todos', page, status], ...})
+useQuery({ queryKey: ['todos', undefined, page, status], ...})
+```
+
+[//]: # 'Example4'
+
+## If your query function depends on a variable, include it in your query key
+
+Since query keys uniquely describe the data they are fetching, they should include any variables you use in your query function that **change**. For example:
+
+[//]: # 'Example5'
+
+```tsx
+function Todos({ todoId }) {
+  const result = useQuery({
+    queryKey: ['todos', todoId],
+    queryFn: () => fetchTodoById(todoId),
+  })
+}
+```
+
+[//]: # 'Example5'
+
+Note that query keys act as dependencies for your query functions. Adding dependent variables to your query key will ensure that queries are cached independently, and that any time a variable changes, _queries will be refetched automatically_ (depending on your `staleTime` settings). See the [exhaustive-deps](/query/eslint/exhaustive-deps) section for more information and examples.
+
+[//]: # 'Materials'
+
+## Further reading
+
+For tips on organizing Query Keys in larger applications, have a look at [Effective React Query Keys](https://tkdodo.eu/blog/effective-react-query-keys) and check the [Query Key Factory Package](https://github.com/lukemorales/query-key-factory) from
+the [Community Resources](/query/community-resources).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/guides/query-options.md b/mintlify/query/framework/react/guides/query-options.md
new file mode 100644
index 000000000..01215dba3
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-options.md
@@ -0,0 +1,52 @@
+---
+id: query-options
+title: Query Options
+---
+
+One of the best ways to share `queryKey` and `queryFn` between multiple places, yet keep them co-located to one another, is to use the `queryOptions` helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it [with TypeScript](/query/framework/react/typescript#typing-query-options). You can define all possible options for a query in one place, and you'll also get type inference and type safety for all of them.
+
+[//]: # 'Example1'
+
+```ts
+import { queryOptions } from '@tanstack/react-query'
+
+function groupOptions(id: number) {
+  return queryOptions({
+    queryKey: ['groups', id],
+    queryFn: () => fetchGroups(id),
+    staleTime: 5 * 1000,
+  })
+}
+
+// usage:
+
+useQuery(groupOptions(1))
+useSuspenseQuery(groupOptions(5))
+useQueries({
+  queries: [groupOptions(1), groupOptions(2)],
+})
+queryClient.prefetchQuery(groupOptions(23))
+queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
+```
+
+[//]: # 'Example1'
+
+For Infinite Queries, a separate [`infiniteQueryOptions`](/query/framework/react/reference/infiniteQueryOptions) helper is available.
+
+[//]: # 'SelectDescription'
+
+You can still override some options at the component level. A very common and useful pattern is to create per-component [`select`](/query/framework/react/guides/render-optimizations#select) functions:
+
+[//]: # 'SelectDescription'
+[//]: # 'Example2'
+
+```ts
+// Type inference still works, so query.data will be the return type of select instead of queryFn
+
+const query = useQuery({
+  ...groupOptions(1),
+  select: (data) => data.groupName,
+})
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/react/guides/query-retries.md b/mintlify/query/framework/react/guides/query-retries.md
new file mode 100644
index 000000000..08e2fbab2
--- /dev/null
+++ b/mintlify/query/framework/react/guides/query-retries.md
@@ -0,0 +1,105 @@
+---
+id: query-retries
+title: Query Retries
+---
+
+When a `useQuery` query fails (the query function throws an error), TanStack Query will automatically retry the query if that query's request has not reached the max number of consecutive retries (defaults to `3`) or a function is provided to determine if a retry is allowed.
+
+You can configure retries both on a global level and an individual query level.
+
+- Setting `retry = false` will disable retries.
+- Setting `retry = 6` will retry failing requests 6 times before showing the final error thrown by the function.
+- Setting `retry = true` will infinitely retry failing requests.
+- Setting `retry = (failureCount, error) => ...` allows for custom logic based on why the request failed. Note that `failureCount` starts at `0` for the first retry attempt.
+
+[//]: # 'Info'
+
+> On the server, retries default to `0` to make server rendering as fast as possible.
+
+[//]: # 'Info'
+[//]: # 'Example'
+
+```tsx
+import { useQuery } from '@tanstack/react-query'
+
+// Make a specific query retry a certain number of times
+const result = useQuery({
+  queryKey: ['todos', 1],
+  queryFn: fetchTodoListPage,
+  retry: 10, // Will retry failed requests 10 times before displaying an error
+})
+```
+
+[//]: # 'Example'
+
+> Info: Contents of the `error` property will be part of `failureReason` response property of `useQuery` until the last retry attempt. So in above example any error contents will be part of `failureReason` property for first 9 retry attempts (Overall 10 attempts) and finally they will be part of `error` after last attempt if error persists after all retry attempts.
+
+## Retry Delay
+
+By default, retries in TanStack Query do not happen immediately after a request fails. As is standard, a back-off delay is gradually applied to each retry attempt.
+
+The default `retryDelay` is set to double (starting at `1000`ms) with each attempt, but not exceed 30 seconds:
+
+[//]: # 'Example2'
+
+```tsx
+// Configure for all queries
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+    },
+  },
+})
+
+function App() {
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
+}
+```
+
+[//]: # 'Example2'
+
+Though it is not recommended, you can obviously override the `retryDelay` function/integer in both the Provider and individual query options. If set to an integer instead of a function the delay will always be the same amount of time:
+
+[//]: # 'Example3'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+  retryDelay: 1000, // Will always wait 1000ms to retry, regardless of how many retries
+})
+```
+
+[//]: # 'Example3'
+
+## Background Retry Behavior
+
+When using `refetchInterval` with `refetchIntervalInBackground: true`, retries will pause when the browser tab is inactive. This happens because retries respect the same focus behavior as regular refetches.
+
+If you need continuous retries in the background, consider disabling retries and implementing a custom refetch strategy:
+
+[//]: # 'Example4'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  refetchInterval: (query) => {
+    // Refetch more frequently when in error state
+    return query.state.status === 'error' ? 5000 : 30000
+  },
+  refetchIntervalInBackground: true,
+  retry: false, // Disable built-in retries
+})
+```
+
+[//]: # 'Example4'
+
+This approach lets you control retry timing manually while keeping refetches active in the background.
diff --git a/mintlify/query/framework/react/guides/render-optimizations.md b/mintlify/query/framework/react/guides/render-optimizations.md
new file mode 100644
index 000000000..ce17c57e2
--- /dev/null
+++ b/mintlify/query/framework/react/guides/render-optimizations.md
@@ -0,0 +1,76 @@
+---
+id: render-optimizations
+title: Render Optimizations
+---
+
+React Query applies a couple of optimizations automatically to ensure that your components only re-render when they actually need to. This is done by the following means:
+
+## structural sharing
+
+React Query uses a technique called "structural sharing" to ensure that as many references as possible will be kept intact between re-renders. If data is fetched over the network, usually, you'll get a completely new reference by json parsing the response. However, React Query will keep the original reference if _nothing_ changed in the data. If a subset changed, React Query will keep the unchanged parts and only replace the changed parts.
+
+> Note: This optimization only works if the `queryFn` returns JSON compatible data. You can turn it off by setting `structuralSharing: false` globally or on a per-query basis, or you can implement your own structural sharing by passing a function to it.
+
+### referential identity
+
+The top level object returned from `useQuery`, `useInfiniteQuery`, `useMutation` and the Array returned from `useQueries` is **not referentially stable**. It will be a new reference on every render. However, the `data` properties returned from these hooks will be as stable as possible.
+
+## tracked properties
+
+React Query will only trigger a re-render if one of the properties returned from `useQuery` is actually "used". This is done by using [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This avoids a lot of unnecessary re-renders, e.g. because properties like `isFetching` or `isStale` might change often, but are not used in the component.
+
+You can customize this feature by setting `notifyOnChangeProps` manually globally or on a per-query basis. If you want to turn that feature off, you can set `notifyOnChangeProps: 'all'`.
+
+> Note: The get trap of a proxy is invoked by accessing a property, either via destructuring or by accessing it directly. If you use object rest destructuring, you will disable this optimization. We have a [lint rule](/query/eslint/no-rest-destructuring) to guard against this pitfall.
+
+## select
+
+You can use the `select` option to select a subset of the data that your component should subscribe to. This is useful for highly optimized data transformations or to avoid unnecessary re-renders.
+
+```js
+export const useTodos = (select) => {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    select,
+  })
+}
+
+export const useTodoCount = () => {
+  return useTodos((data) => data.length)
+}
+```
+
+A component using the `useTodoCount` custom hook will only re-render if the length of the todos changes. It will **not** re-render if e.g. the name of a todo changed.
+
+> Note: `select` operates on successfully cached data and is not the appropriate place to throw errors. The source of truth for errors is the `queryFn`, and a `select` function that returns an error results in `data` being `undefined` and `isSuccess` being `true`. We recommend handling errors in the `queryFn` if you wish to have a query fail on incorrect data, or outside of the query hook if you have a error case not related to caching.
+
+### memoization
+
+The `select` function will only re-run if:
+
+- the `select` function itself changed referentially
+- `data` changed
+
+This means that an inlined `select` function, as shown above, will run on every render. To avoid this, you can wrap the `select` function in `useCallback`, or extract it to a stable function reference if it doesn't have any dependencies:
+
+```js
+// wrapped in useCallback
+export const useTodoCount = () => {
+  return useTodos(useCallback((data) => data.length, []))
+}
+```
+
+```js
+// extracted to a stable function reference
+const selectTodoCount = (data) => data.length
+
+export const useTodoCount = () => {
+  return useTodos(selectTodoCount)
+}
+```
+
+## Further Reading
+
+For an in-depth guide about these topics, read [React Query Render Optimizations](https://tkdodo.eu/blog/react-query-render-optimizations) from
+the TkDodo. To learn how to best optimize the `select` option, read [React Query Selectors, Supercharged](https://tkdodo.eu/blog/react-query-selectors-supercharged)
diff --git a/mintlify/query/framework/react/guides/request-waterfalls.md b/mintlify/query/framework/react/guides/request-waterfalls.md
new file mode 100644
index 000000000..d9b071a0e
--- /dev/null
+++ b/mintlify/query/framework/react/guides/request-waterfalls.md
@@ -0,0 +1,386 @@
+---
+id: request-waterfalls
+title: Performance & Request Waterfalls
+---
+
+Application performance is a broad and complex area and while React Query can't make your APIs faster, there are still things to be mindful about in how you use React Query to ensure the best performance.
+
+The biggest performance footgun when using React Query, or indeed any data fetching library that lets you fetch data inside of components, is request waterfalls. The rest of this page will explain what they are, how you can spot them and how you can restructure your application or APIs to avoid them.
+
+The [Prefetching & Router Integration guide](/query/framework/react/guides/prefetching) builds on this and teaches you how to prefetch data ahead of time when it's not possible or feasible to restructure your application or APIs.
+
+The [Server Rendering & Hydration guide](/query/framework/react/guides/ssr) teaches you how to prefetch data on the server and pass that data down to the client so you don't have to fetch it again.
+
+[//]: # 'AdvancedSSRLink'
+
+The [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr) further teaches you how to apply these patterns to Server Components and Streaming Server Rendering.
+
+[//]: # 'AdvancedSSRLink'
+
+## What is a Request Waterfall?
+
+A request waterfall is what happens when a request for a resource (code, css, images, data) does not start until _after_ another request for a resource has finished.
+
+Consider a web page. Before you can load things like the CSS, JS etc, the browser first needs to load the markup. This is a request waterfall.
+
+```
+1. |-> Markup
+2.   |-> CSS
+2.   |-> JS
+2.   |-> Image
+```
+
+If you fetch your CSS inside a JS file, you now have a double waterfall:
+
+```
+1. |-> Markup
+2.   |-> JS
+3.     |-> CSS
+```
+
+If that CSS uses a background image, it's a triple waterfall:
+
+```
+1. |-> Markup
+2.   |-> JS
+3.     |-> CSS
+4.       |-> Image
+```
+
+The best way to spot and analyze your request waterfalls is usually by opening your browsers devtools "Network" tab.
+
+Each waterfall represents at least one roundtrip to the server, unless the resource is locally cached (in practice, some of these waterfalls might represent more than one roundtrip because the browser needs to establish a connection which requires some back and forth, but let's ignore that here). Because of this, the negative effects of request waterfalls are highly dependent on the users latency. Consider the example of the triple waterfall, which actually represents 4 server roundtrips. With 250ms latency, which is not uncommon on 3g networks or in bad network conditions, we end up with a total time of 4\*250=1000ms **only counting latency**. If we were able to flatten that to the first example with only 2 roundtrips, we get 500ms instead, possibly loading that background image in half the time!
+
+## Request Waterfalls & React Query
+
+Now let's consider React Query. We'll focus on the case without Server Rendering first. Before we can even start making a query, we need to load the JS, so before we can show that data on the screen, we have a double waterfall:
+
+```
+1. |-> Markup
+2.   |-> JS
+3.     |-> Query
+```
+
+With this as a basis, let's look at a few different patterns that can lead to Request Waterfalls in React Query, and how to avoid them.
+
+- Single Component Waterfalls / Serial Queries
+- Nested Component Waterfalls
+- Code Splitting
+
+### Single Component Waterfalls / Serial Queries
+
+When a single component first fetches one query, and then another, that's a request waterfall. This can happen when the second query is a [Dependent Query](/query/framework/react/guides/dependent-queries), that is, it depends on data from the first query when fetching:
+
+[//]: # 'DependentExample'
+
+```tsx
+// Get the user
+const { data: user } = useQuery({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+})
+
+const userId = user?.id
+
+// Then get the user's projects
+const {
+  status,
+  fetchStatus,
+  data: projects,
+} = useQuery({
+  queryKey: ['projects', userId],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the userId exists
+  enabled: !!userId,
+})
+```
+
+[//]: # 'DependentExample'
+
+While not always feasible, for optimal performance it's better to restructure your API so you can fetch both of these in a single query. In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall.
+
+[//]: # 'ServerComponentsNote1'
+
+> Another way to mitigate dependent queries without restructuring your API is to move the waterfall to the server where latency is lower. This is the idea behind Server Components which are covered in the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+[//]: # 'ServerComponentsNote1'
+[//]: # 'SuspenseSerial'
+
+Another example of serial queries is when you use React Query with Suspense:
+
+```tsx
+function App () {
+  // The following queries will execute in serial, causing separate roundtrips to the server:
+  const usersQuery = useSuspenseQuery({ queryKey: ['users'], queryFn: fetchUsers })
+  const teamsQuery = useSuspenseQuery({ queryKey: ['teams'], queryFn: fetchTeams })
+  const projectsQuery = useSuspenseQuery({ queryKey: ['projects'], queryFn: fetchProjects })
+
+  // Note that since the queries above suspend rendering, no data
+  // gets rendered until all of the queries finished
+  ...
+}
+```
+
+Note that with regular `useQuery` these would happen in parallel.
+
+Luckily, this is easy to fix, by always using the hook `useSuspenseQueries` when you have multiple suspenseful queries in a component.
+
+```tsx
+const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
+  queries: [
+    { queryKey: ['users'], queryFn: fetchUsers },
+    { queryKey: ['teams'], queryFn: fetchTeams },
+    { queryKey: ['projects'], queryFn: fetchProjects },
+  ],
+})
+```
+
+[//]: # 'SuspenseSerial'
+
+### Nested Component Waterfalls
+
+[//]: # 'NestedIntro'
+
+Nested Component Waterfalls is when both a parent and a child component contains queries, and the parent does not render the child until its query is done. This can happen both with `useQuery` and `useSuspenseQuery`.
+
+[//]: # 'NestedIntro'
+
+If the child renders conditionally based on the data in the parent, or if the child relies on some part of the result being passed down as a prop from the parent to make its query, we have a _dependent_ nested component waterfall.
+
+Let's first look at an example where the child is **not** dependent on the parent.
+
+[//]: # 'NestedExample'
+
+```tsx
+function Article({ id }) {
+  const { data: articleData, isPending } = useQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
+  })
+
+  if (isPending) {
+    return 'Loading article...'
+  }
+
+  return (
+    <>
+      <ArticleHeader articleData={articleData} />
+      <ArticleBody articleData={articleData} />
+      <Comments id={id} />
+    </>
+  )
+
+}
+
+function Comments({ id }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'NestedExample'
+
+Note that while `<Comments>` takes a prop `id` from the parent, that id is already available when the `<Article>` renders so there is no reason we could not fetch the comments at the same time as the article. In real world applications, the child might be nested far below the parent and these kinds of waterfalls are often trickier to spot and fix, but for our example, one way to flatten the waterfall would be to hoist the comments query to the parent instead:
+
+[//]: # 'NestedHoistedExample'
+
+```tsx
+function Article({ id }) {
+  const { data: articleData, isPending: articlePending } = useQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
+  })
+
+  const { data: commentsData, isPending: commentsPending } = useQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+
+  if (articlePending) {
+    return 'Loading article...'
+  }
+
+  return (
+    <>
+      <ArticleHeader articleData={articleData} />
+      <ArticleBody articleData={articleData} />
+      {commentsPending ? (
+        'Loading comments...'
+      ) : (
+        <Comments commentsData={commentsData} />
+      )}
+    </>
+  )
+}
+```
+
+[//]: # 'NestedHoistedExample'
+[//]: # 'NestedHoistedOutro'
+
+The two queries will now fetch in parallel. Note that if you are using suspense, you'd want to combine these two queries into a single `useSuspenseQueries` instead.
+
+[//]: # 'NestedHoistedOutro'
+
+Another way to flatten this waterfall would be to prefetch the comments in the `<Article>` component, or prefetch both of these queries at the router level on page load or page navigation, read more about this in the [Prefetching & Router Integration guide](/query/framework/react/guides/prefetching).
+
+Next, let's look at a _Dependent Nested Component Waterfall_.
+
+[//]: # 'DependentNestedExample'
+
+```tsx
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'DependentNestedExample'
+
+The second query `getGraphDataById` is dependent on its parent in two different ways. First of all, it doesn't ever happen unless the `feedItem` is a graph, and second, it needs an `id` from the parent.
+
+```
+1. |> getFeed()
+2.   |> getGraphDataById()
+```
+
+[//]: # 'ServerComponentsNote2'
+
+In this example, we can't trivially flatten the waterfall by just hoisting the query to the parent, or even adding prefetching. Just like the dependent query example at the beginning of this guide, one option is to refactor our API to include the graph data in the `getFeed` query. Another more advanced solution is to leverage Server Components to move the waterfall to the server where latency is lower (read more about this in the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr)) but note that this can be a very big architectural change.
+
+[//]: # 'ServerComponentsNote2'
+
+You can have good performance even with a few query waterfalls here and there, just know they are a common performance concern and be mindful about them. An especially insidious version is when Code Splitting is involved, let's take a look at this next.
+
+### Code Splitting
+
+Splitting an applications JS-code into smaller chunks and only loading the necessary parts is usually a critical step in achieving good performance. It does have a downside however, in that it often introduces request waterfalls. When that code split code also has a query inside it, this problem is worsened further.
+
+Consider this a slightly modified version of the Feed example.
+
+[//]: # 'LazyExample'
+
+```tsx
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+const GraphFeedItem = React.lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'LazyExample'
+
+This example has a double waterfall, looking like this:
+
+```
+1. |> getFeed()
+2.   |> JS for <GraphFeedItem>
+3.     |> getGraphDataById()
+```
+
+But that's just looking at the code from the example, if we consider what the first page load of this page looks like, we actually have to complete 5 round trips to the server before we can render the graph!
+
+```
+1. |> Markup
+2.   |> JS for <Feed>
+3.     |> getFeed()
+4.       |> JS for <GraphFeedItem>
+5.         |> getGraphDataById()
+```
+
+Note that this looks a bit different when server rendering, we will explore that further in the [Server Rendering & Hydration guide](/query/framework/react/guides/ssr). Also note that it's not uncommon for the route that contains `<Feed>` to also be code split, which could add yet another hop.
+
+In the code split case, it might actually help to hoist the `getGraphDataById` query to the `<Feed>` component and make it conditional, or add a conditional prefetch. That query could then be fetched in parallel with the code, turning the example part into this:
+
+```
+1. |> getFeed()
+2.   |> getGraphDataById()
+2.   |> JS for <GraphFeedItem>
+```
+
+This is very much a tradeoff however. You are now including the data fetching code for `getGraphDataById` in the same bundle as `<Feed>`, so evaluate what is best for your case. Read more about how to do this in the [Prefetching & Router Integration guide](/query/framework/react/guides/prefetching).
+
+[//]: # 'ServerComponentsNote3'
+
+> The tradeoff between:
+>
+> - Include all data fetching code in the main bundle, even if we seldom use it
+> - Put the data fetching code in the code split bundle, but with a request waterfall
+>
+> is not great and has been one of the motivations for Server Components. With Server Components, it's possible to avoid both, read more about how this applies to React Query in the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+[//]: # 'ServerComponentsNote3'
+
+## Summary and takeaways
+
+Request Waterfalls are a very common and complex performance concern with many tradeoffs. There are many ways to accidentally introduce them into your application:
+
+- Adding a query to a child, not realizing a parent already has a query
+- Adding a query to a parent, not realizing a child already has a query
+- Moving a component with descendants that has a query to a new parent with an ancestor that has a query
+- Etc..
+
+Because of this accidental complexity, it pays off to be mindful of waterfalls and regularly examine your application looking for them (a good way is to examine the Network tab every now and then!). You don't necessarily have to flatten them all to have good performance, but keep an eye out for the high impact ones.
+
+In the next guide, we'll look at more ways to flatten waterfalls, by leveraging [Prefetching & Router Integration](/query/framework/react/guides/prefetching).
diff --git a/mintlify/query/framework/react/guides/scroll-restoration.md b/mintlify/query/framework/react/guides/scroll-restoration.md
new file mode 100644
index 000000000..47c3b6b07
--- /dev/null
+++ b/mintlify/query/framework/react/guides/scroll-restoration.md
@@ -0,0 +1,10 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+---
+
+Traditionally, when you navigate to a previously visited page on a web browser, you would find that the page would be scrolled to the exact position where you were before you navigated away from that page. This is called **scroll restoration** and has been in a bit of a regression since web applications have started moving towards client side data fetching. With TanStack Query however, that's no longer the case.
+
+TanStack Query doesn’t implement scroll restoration by itself, but it removes one of the biggest causes of broken restoration in SPA’s: refetch-induced UI resets. By keeping previously fetched data in cache (and optionally using `placeholderData`), navigation back to a page can render instantly with stable layout, making scroll restoration reliable when handled by the router (e.g. React Router’s ScrollRestoration, TanStack Router’s scroll restoration, or a small custom history-based solution).
+
+Out of the box, "scroll restoration" for all queries (including paginated and infinite queries) Just Works™️ in TanStack Query. The reason for this is that query results are cached and able to be retrieved synchronously when a query is rendered. As long as your queries are being cached long enough (the default time is 5 minutes) and have not been garbage collected, scroll restoration will work out of the box all the time.
diff --git a/mintlify/query/framework/react/guides/ssr.md b/mintlify/query/framework/react/guides/ssr.md
new file mode 100644
index 000000000..26350371f
--- /dev/null
+++ b/mintlify/query/framework/react/guides/ssr.md
@@ -0,0 +1,561 @@
+---
+id: ssr
+title: Server Rendering & Hydration
+---
+
+In this guide you'll learn how to use React Query with server rendering.
+
+See the guide on [Prefetching & Router Integration](/query/framework/react/guides/prefetching) for some background. You might also want to check out the [Performance & Request Waterfalls guide](/query/framework/react/guides/request-waterfalls) before that.
+
+For deeper examples on hydration + prefetching (including code splitting), see the [Dependent Queries & Code Splitting](/query/framework/react/guides/prefetching#dependent-queries-code-splitting) section.
+
+For advanced server rendering patterns, such as streaming, Server Components and the new Next.js app router, see the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+If you just want to see some code, you can skip ahead to the [Full Next.js pages router example](#full-nextjs-pages-router-example) or the [Full Remix example](#full-remix-example) below.
+
+## Server Rendering & React Query
+
+So what is server rendering anyway? The rest of this guide will assume you are familiar with the concept, but let's spend some time to look at how it relates to React Query. Server rendering is the act of generating the initial html on the server, so that the user has some content to look at as soon as the page loads. This can happen on demand when a page is requested (SSR). It can also happen ahead of time either because a previous request was cached, or at build time (SSG).
+
+If you've read the [Performance & Request Waterfalls guide](/query/framework/react/guides/request-waterfalls), you might remember this:
+
+```
+1. |-> Markup (without content)
+2.   |-> JS
+3.     |-> Query
+```
+
+With a client rendered application, these are the minimum 3 server roundtrips you will need to make before getting any content on the screen for the user. One way of viewing server rendering is that it turns the above into this:
+
+```
+1. |-> Markup (with content AND initial data)
+2.   |-> JS
+```
+
+As soon as **1.** is complete, the user can see the content and when **2.** finishes, the page is interactive and clickable. Because the markup also contains the initial data we need, step **3.** does not need to run on the client at all, at least until you want to revalidate the data for some reason.
+
+This is all from the clients perspective. On the server, we need to **prefetch** that data before we generate/render the markup, we need to **dehydrate** that data into a serializable format we can embed in the markup, and on the client we need to **hydrate** that data into a React Query cache so we can avoid doing a new fetch on the client.
+
+Read on to learn how to implement these three steps with React Query.
+
+## A quick note on Suspense
+
+This guide uses the regular `useQuery` API. While we don't necessarily recommend it, it is possible to replace this with `useSuspenseQuery` instead **as long as you always prefetch all your queries**. The upside is that you get to use `<Suspense>` for loading states on the client.
+
+If you do forget to prefetch a query when you are using `useSuspenseQuery`, the consequences will depend on the framework you are using. In some cases, the data will Suspend and get fetched on the server but never be hydrated to the client, where it will fetch again. In these cases you will get a markup hydration mismatch, because the server and the client tried to render different things.
+
+## Initial setup
+
+The first steps of using React Query is always to create a `queryClient` and wrap the application in a `<QueryClientProvider>`. When doing server rendering, it's important to create the `queryClient` instance **inside of your app**, in React state (an instance ref works fine too). **This ensures that data is not shared between different users and requests**, while still only creating the `queryClient` once per component lifecycle.
+
+Next.js pages router:
+
+```tsx
+// _app.tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// NEVER DO THIS:
+// const queryClient = new QueryClient()
+//
+// Creating the queryClient at the file root level makes the cache shared
+// between all requests and means _all_ data gets passed to _all_ users.
+// Besides being bad for performance, this also leaks any sensitive data.
+
+export default function MyApp({ Component, pageProps }) {
+  // Instead do this, which ensures each request has its own cache:
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+    </QueryClientProvider>
+  )
+}
+```
+
+Remix:
+
+```tsx
+// app/root.tsx
+import { Outlet } from '@remix-run/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function MyApp() {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet />
+    </QueryClientProvider>
+  )
+}
+```
+
+## Get started fast with `initialData`
+
+The quickest way to get started is to not involve React Query at all when it comes to prefetching and not use the `dehydrate`/`hydrate` APIs. What you do instead is passing the raw data in as the `initialData` option to `useQuery`. Let's look at an example using Next.js pages router, using `getServerSideProps`.
+
+```tsx
+export async function getServerSideProps() {
+  const posts = await getPosts()
+  return { props: { posts } }
+}
+
+function Posts(props) {
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+    initialData: props.posts,
+  })
+
+  // ...
+}
+```
+
+This also works with `getStaticProps` or even the older `getInitialProps` and the same pattern can be applied in any other framework that has equivalent functions. This is what the same example looks like with Remix:
+
+```tsx
+export async function loader() {
+  const posts = await getPosts()
+  return json({ posts })
+}
+
+function Posts() {
+  const { posts } = useLoaderData<typeof loader>()
+
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+    initialData: posts,
+  })
+
+  // ...
+}
+```
+
+The setup is minimal and this can be a quick solution for some cases, but there are a **few tradeoffs to consider** when compared to the full approach:
+
+- If you are calling `useQuery` in a component deeper down in the tree you need to pass the `initialData` down to that point
+- If you are calling `useQuery` with the same query in multiple locations, passing `initialData` to only one of them can be brittle and break when your app changes since. If you remove or move the component that has the `useQuery` with `initialData`, the more deeply nested `useQuery` might no longer have any data. Passing `initialData` to **all** queries that needs it can also be cumbersome.
+- There is no way to know at what time the query was fetched on the server, so `dataUpdatedAt` and determining if the query needs refetching is based on when the page loaded instead
+- If there is already data in the cache for a query, `initialData` will never overwrite this data, **even if the new data is fresher than the old one**.
+  - To understand why this is especially bad, consider the `getServerSideProps` example above. If you navigate back and forth to a page several times, `getServerSideProps` would get called each time and fetch new data, but because we are using the `initialData` option, the client cache and data would never be updated.
+
+Setting up the full hydration solution is straightforward and does not have these drawbacks, this will be the focus for the rest of the documentation.
+
+## Using the Hydration APIs
+
+With just a little more setup, you can use a `queryClient` to prefetch queries during a preload phase, pass a serialized version of that `queryClient` to the rendering part of the app and reuse it there. This avoids the drawbacks above. Feel free to skip ahead for full Next.js pages router and Remix examples, but at a general level these are the extra steps:
+
+- In the framework loader function, create a `const queryClient = new QueryClient(options)`
+- In the loader function, do `await queryClient.prefetchQuery(...)` for each query you want to prefetch
+  - You want to use `await Promise.all(...)` to fetch the queries in parallel when possible
+  - It's fine to have queries that aren't prefetched. These wont be server rendered, instead they will be fetched on the client after the application is interactive. This can be great for content that are shown only after user interaction, or is far down on the page to avoid blocking more critical content.
+- From the loader, return `dehydrate(queryClient)`, note that the exact syntax to return this differs between frameworks
+- Wrap your tree with `<HydrationBoundary state={dehydratedState}>` where `dehydratedState` comes from the framework loader. How you get `dehydratedState` also differs between frameworks.
+  - This can be done for each route, or at the top of the application to avoid boilerplate, see examples
+
+> An interesting detail is that there are actually _three_ `queryClient`s involved. The framework loaders are a form of "preloading" phase that happens before rendering, and this phase has its own `queryClient` that does the prefetching. The dehydrated result of this phase gets passed to **both** the server rendering process **and** the client rendering process which each has its own `queryClient`. This ensures they both start with the same data so they can return the same markup.
+
+> Server Components are another form of "preloading" phase, that can also "preload" (pre-render) parts of a React component tree. Read more in the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+### Full Next.js pages router example
+
+> For app router documentation, see the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+Initial setup:
+
+```tsx
+// _app.tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function MyApp({ Component, pageProps }) {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+    </QueryClientProvider>
+  )
+}
+```
+
+In each route:
+
+```tsx
+// pages/posts.tsx
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+  useQuery,
+} from '@tanstack/react-query'
+
+// This could also be getServerSideProps
+export async function getStaticProps() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  }
+}
+
+function Posts() {
+  // This useQuery could just as well happen in some deeper child to
+  // the <PostsRoute>, data will be available immediately either way
+  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
+
+  // This query was not prefetched on the server and will not start
+  // fetching until on the client, both patterns are fine to mix
+  const { data: commentsData } = useQuery({
+    queryKey: ['posts-comments'],
+    queryFn: getComments,
+  })
+
+  // ...
+}
+
+export default function PostsRoute({ dehydratedState }) {
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+### Full Remix example
+
+Initial setup:
+
+```tsx
+// app/root.tsx
+import { Outlet } from '@remix-run/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function MyApp() {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet />
+    </QueryClientProvider>
+  )
+}
+```
+
+In each route, note that it's fine to do this in nested routes too:
+
+```tsx
+// app/routes/posts.tsx
+import { json } from '@remix-run/node'
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+  useQuery,
+} from '@tanstack/react-query'
+
+export async function loader() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+  })
+
+  return json({ dehydratedState: dehydrate(queryClient) })
+}
+
+function Posts() {
+  // This useQuery could just as well happen in some deeper child to
+  // the <PostsRoute>, data will be available immediately either way
+  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
+
+  // This query was not prefetched on the server and will not start
+  // fetching until on the client, both patterns are fine to mix
+  const { data: commentsData } = useQuery({
+    queryKey: ['posts-comments'],
+    queryFn: getComments,
+  })
+
+  // ...
+}
+
+export default function PostsRoute() {
+  const { dehydratedState } = useLoaderData<typeof loader>()
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+## Optional - Remove boilerplate
+
+Having this part in every route might seem like a lot of boilerplate:
+
+```tsx
+export default function PostsRoute({ dehydratedState }) {
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Posts />
+    </HydrationBoundary>
+  )
+}
+```
+
+While there is nothing wrong with this approach, if you want to get rid of this boilerplate, here's how you can modify your setup in Next.js:
+
+```tsx
+// _app.tsx
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+export default function MyApp({ Component, pageProps }) {
+  const [queryClient] = React.useState(() => new QueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={pageProps.dehydratedState}>
+        <Component {...pageProps} />
+      </HydrationBoundary>
+    </QueryClientProvider>
+  )
+}
+
+// pages/posts.tsx
+// Remove PostsRoute with the HydrationBoundary and instead export Posts directly:
+export default function Posts() { ... }
+```
+
+With Remix, this is a little bit more involved, we recommend checking out the [use-dehydrated-state](https://github.com/maplegrove-io/use-dehydrated-state) package.
+
+## Prefetching dependent queries
+
+Over in the Prefetching guide we learned how to [prefetch dependent queries](/query/framework/react/guides/prefetching#dependent-queries-code-splitting), but how do we do this in framework loaders? Consider the following code, taken from the [Dependent Queries guide](/query/framework/react/guides/dependent-queries):
+
+```tsx
+// Get the user
+const { data: user } = useQuery({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+})
+
+const userId = user?.id
+
+// Then get the user's projects
+const {
+  status,
+  fetchStatus,
+  data: projects,
+} = useQuery({
+  queryKey: ['projects', userId],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the userId exists
+  enabled: !!userId,
+})
+```
+
+How would we prefetch this so it can be server rendered? Here's an example:
+
+```tsx
+// For Remix, rename this to loader instead
+export async function getServerSideProps() {
+  const queryClient = new QueryClient()
+
+  const user = await queryClient.fetchQuery({
+    queryKey: ['user', email],
+    queryFn: getUserByEmail,
+  })
+
+  if (user?.userId) {
+    await queryClient.prefetchQuery({
+      queryKey: ['projects', userId],
+      queryFn: getProjectsByUser,
+    })
+  }
+
+  // For Remix:
+  // return json({ dehydratedState: dehydrate(queryClient) })
+  return { props: { dehydratedState: dehydrate(queryClient) } }
+}
+```
+
+This can get more complex of course, but since these loader functions are just JavaScript, you can use the full power of the language to build your logic. Make sure you prefetch all queries that you want to be server rendered.
+
+## Error handling
+
+React Query defaults to a graceful degradation strategy. This means:
+
+- `queryClient.prefetchQuery(...)` never throws errors
+- `dehydrate(...)` only includes successful queries, not failed ones
+
+This will lead to any failed queries being retried on the client and that the server rendered output will include loading states instead of the full content.
+
+While a good default, sometimes this is not what you want. When critical content is missing, you might want to respond with a 404 or 500 status code depending on the situation. For these cases, use `queryClient.fetchQuery(...)` instead, which will throw errors when it fails, letting you handle things in a suitable way.
+
+```tsx
+let result
+
+try {
+  result = await queryClient.fetchQuery(...)
+} catch (error) {
+  // Handle the error, refer to your framework documentation
+}
+
+// You might also want to check and handle any invalid `result` here
+```
+
+If you for some reason want to include failed queries in the dehydrated state to avoid retries, you can use the option `shouldDehydrateQuery` to override the default function and implement your own logic:
+
+```tsx
+dehydrate(queryClient, {
+  shouldDehydrateQuery: (query) => {
+    // This will include all queries, including failed ones,
+    // but you can also implement your own logic by inspecting `query`
+    return true
+  },
+})
+```
+
+## Serialization
+
+When doing `return { props: { dehydratedState: dehydrate(queryClient) } }` in Next.js, or `return json({ dehydratedState: dehydrate(queryClient) })` in Remix, what happens is that the `dehydratedState` representation of the `queryClient` is serialized by the framework so it can be embedded into the markup and transported to the client.
+
+By default, these frameworks only support returning things that are safely serializable/parsable, and therefore do not support `undefined`, `Error`, `Date`, `Map`, `Set`, `BigInt`, `Infinity`, `NaN`, `-0`, regular expressions etc. This also means that you can not return any of these things from your queries. If returning these values is something you want, check out [superjson](https://github.com/blitz-js/superjson) or similar packages.
+
+If you are using a custom SSR setup, you need to take care of this step yourself. Your first instinct might be to use `JSON.stringify(dehydratedState)`, but because this doesn't escape things like `<script>alert('Oh no..')</script>` by default, this can easily lead to **XSS-vulnerabilities** in your application. [superjson](https://github.com/blitz-js/superjson) also **does not** escape values and is unsafe to use by itself in a custom SSR setup (unless you add an extra step for escaping the output). Instead we recommend using a library like [Serialize JavaScript](https://github.com/yahoo/serialize-javascript) or [devalue](https://github.com/Rich-Harris/devalue) which are both safe against XSS injections out of the box.
+
+## A note about request waterfalls
+
+In the [Performance & Request Waterfalls guide](/query/framework/react/guides/request-waterfalls) we mentioned we would revisit how server rendering changes one of the more complex nested waterfalls. Check back for the [specific code example](/query/framework/react/guides/request-waterfalls#code-splitting), but as a refresher, we have a code split `<GraphFeedItem>` component inside a `<Feed>` component. This only renders if the feed contains a graph item and both of these components fetches their own data. With client rendering, this leads to the following request waterfall:
+
+```
+1. |> Markup (without content)
+2.   |> JS for <Feed>
+3.     |> getFeed()
+4.       |> JS for <GraphFeedItem>
+5.         |> getGraphDataById()
+```
+
+The nice thing about server rendering is that we can turn the above into:
+
+```
+1. |> Markup (with content AND initial data)
+2.   |> JS for <Feed>
+2.   |> JS for <GraphFeedItem>
+```
+
+Note that the queries are no longer fetched on the client, instead their data was included in the markup. The reason we can now load the JS in parallel is that since `<GraphFeedItem>` was rendered on the server we know that we are going to need this JS on the client as well and can insert a script-tag for this chunk in the markup. On the server, we would still have this request waterfall:
+
+```
+1. |> getFeed()
+2.   |> getGraphDataById()
+```
+
+We simply can not know before we have fetched the feed if we also need to fetch graph data, they are dependent queries. Because this happens on the server where latency is generally both lower and more stable, this often isn't such a big deal.
+
+Amazing, we've mostly flattened our waterfalls! There's a catch though. Let's call this page the `/feed` page, and let's pretend we also have another page like `/posts`. If we type in `www.example.com/feed` directly in the url bar and hit enter, we get all these great server rendering benefits, BUT, if we instead type in `www.example.com/posts` and then **click a link** to `/feed`, we're back to this:
+
+```
+1. |> JS for <Feed>
+2.   |> getFeed()
+3.     |> JS for <GraphFeedItem>
+4.       |> getGraphDataById()
+```
+
+This is because with SPA's, server rendering only works for the initial page load, not for any subsequent navigation.
+
+Modern frameworks often try to solve this by fetching the initial code and data in parallel, so if you were using Next.js or Remix with the prefetching patterns we outlined in this guide, including how to prefetch dependent queries, it would actually look like this instead:
+
+```
+1. |> JS for <Feed>
+1. |> getFeed() + getGraphDataById()
+2.   |> JS for <GraphFeedItem>
+```
+
+This is much better, but if we want to improve this further we can flatten this to a single roundtrip with Server Components. Learn how in the [Advanced Server Rendering guide](/query/framework/react/guides/advanced-ssr).
+
+## Tips, Tricks and Caveats
+
+### Staleness is measured from when the query was fetched on the server
+
+A query is considered stale depending on when it was `dataUpdatedAt`. A caveat here is that the server needs to have the correct time for this to work properly, but UTC time is used, so timezones do not factor into this.
+
+Because `staleTime` defaults to `0`, queries will be refetched in the background on page load by default. You might want to use a higher `staleTime` to avoid this double fetching, especially if you don't cache your markup.
+
+This refetching of stale queries is a perfect match when caching markup in a CDN! You can set the cache time of the page itself decently high to avoid having to re-render pages on the server, but configure the `staleTime` of the queries lower to make sure data is refetched in the background as soon as a user visits the page. Maybe you want to cache the pages for a week, but refetch the data automatically on page load if it's older than a day?
+
+### High memory consumption on server
+
+In case you are creating the `QueryClient` for every request, React Query creates the isolated cache for this client, which is preserved in memory for the `gcTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
+
+On the server, `gcTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `gcTime` then you will be responsible for clearing the cache early.
+
+Avoid setting `gcTime` to `0` as it may result in a hydration error. This occurs because the [Hydration Boundary](/query/framework/react/reference/hydration#hydrationboundary) places necessary data into the cache for rendering, but if the garbage collector removes the data before the rendering completes, issues may arise. If you require a shorter `gcTime`, we recommend setting it to `2 * 1000` to allow sufficient time for the app to reference the data.
+
+To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](/query/reference/QueryClient#queryclientclear) after the request is handled and dehydrated state has been sent to the client.
+
+Alternatively, you can set a smaller `gcTime`.
+
+### Caveat for Next.js rewrites
+
+There's a catch if you're using [Next.js' rewrites feature](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites) together with [Automatic Static Optimization](https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization) or `getStaticProps`: It will cause a second hydration by React Query. That's because [Next.js needs to ensure that they parse the rewrites](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites#rewrite-parameters) on the client and collect any params after hydration so that they can be provided in `router.query`.
+
+The result is missing referential equality for all the hydration data, which for example triggers wherever your data is used as props of components or in the dependency array of `useEffect`s/`useMemo`s.
diff --git a/mintlify/query/framework/react/guides/suspense.md b/mintlify/query/framework/react/guides/suspense.md
new file mode 100644
index 000000000..d52388c98
--- /dev/null
+++ b/mintlify/query/framework/react/guides/suspense.md
@@ -0,0 +1,228 @@
+---
+id: suspense
+title: Suspense
+---
+
+React Query can also be used with React's Suspense for Data Fetching APIs. For this, we have dedicated hooks:
+
+- [useSuspenseQuery](/query/framework/react/reference/useSuspenseQuery)
+- [useSuspenseInfiniteQuery](/query/framework/react/reference/useSuspenseInfiniteQuery)
+- [useSuspenseQueries](/query/framework/react/reference/useSuspenseQueries)
+- Additionally, you can use the `useQuery().promise` and `React.use()` (Experimental)
+
+When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](/query/framework/react/examples/suspense) for more information on how to set up suspense mode.
+
+If you want mutations to propagate errors to the nearest error boundary (similar to queries), you can set the `throwOnError` option to `true` as well.
+
+Enabling suspense mode for a query:
+
+```tsx
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+const { data } = useSuspenseQuery({ queryKey, queryFn })
+```
+
+This works nicely in TypeScript, because `data` is guaranteed to be defined (as errors and loading states are handled by Suspense- and ErrorBoundaries).
+
+On the flip side, you therefore can't conditionally enable / disable the Query. This generally shouldn't be necessary for dependent Queries because with suspense, all your Queries inside one component are fetched in serial.
+
+`placeholderData` also doesn't exist for this Query. To prevent the UI from being replaced by a fallback during an update, wrap your updates that change the QueryKey into [startTransition](https://react.dev/reference/react/Suspense#preventing-unwanted-fallbacks).
+
+### throwOnError default
+
+Not all errors are thrown to the nearest Error Boundary per default - we're only throwing errors if there is no other data to show. That means if a Query ever successfully got data in the cache, the component will render, even if data is `stale`. Thus, the default for `throwOnError` is:
+
+```
+throwOnError: (error, query) => typeof query.state.data === 'undefined'
+```
+
+Since you can't change `throwOnError` (because it would allow for `data` to become potentially `undefined`), you have to throw errors manually if you want all errors to be handled by Error Boundaries:
+
+```tsx
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+const { data, error, isFetching } = useSuspenseQuery({ queryKey, queryFn })
+
+if (error && !isFetching) {
+  throw error
+}
+
+// continue rendering data
+```
+
+## Resetting Error Boundaries
+
+Whether you are using **suspense** or **throwOnError** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred.
+
+Query errors can be reset with the `QueryErrorResetBoundary` component or with the `useQueryErrorResetBoundary` hook.
+
+When using the component it will reset any query errors within the boundaries of the component:
+
+```tsx
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+const App = () => (
+  <QueryErrorResetBoundary>
+    {({ reset }) => (
+      <ErrorBoundary
+        onReset={reset}
+        fallbackRender={({ resetErrorBoundary }) => (
+          <div>
+            There was an error!
+            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>
+    )}
+  </QueryErrorResetBoundary>
+)
+```
+
+When using the hook it will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
+
+```tsx
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+const App = () => {
+  const { reset } = useQueryErrorResetBoundary()
+  return (
+    <ErrorBoundary
+      onReset={reset}
+      fallbackRender={({ resetErrorBoundary }) => (
+        <div>
+          There was an error!
+          <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+        </div>
+      )}
+    >
+      <Page />
+    </ErrorBoundary>
+  )
+}
+```
+
+## Fetch-on-render vs Render-as-you-fetch
+
+Out of the box, React Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](/query/framework/react/guides/prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components.
+
+## Suspense on the Server with streaming
+
+If you are using `NextJs`, you can use our **experimental** integration for Suspense on the Server: `@tanstack/react-query-next-experimental`. This package will allow you to fetch data on the server (in a client component) by just calling `useSuspenseQuery` in your component. Results will then be streamed from the server to the client as SuspenseBoundaries resolve.
+
+To achieve this, wrap your app in the `ReactQueryStreamedHydration` component:
+
+```tsx
+// app/providers.tsx
+'use client'
+
+import {
+  environmentManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import * as React from 'react'
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+  if (environmentManager.isServer()) {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
+
+export function Providers(props: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryStreamedHydration>
+        {props.children}
+      </ReactQueryStreamedHydration>
+    </QueryClientProvider>
+  )
+}
+```
+
+For more information, check out the [NextJs Suspense Streaming Example](/query/framework/react/examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](/query/framework/react/guides/advanced-ssr) guide.
+
+## Using `useQuery().promise` and `React.use()` (Experimental)
+
+> To enable this feature, you need to set the `experimental_prefetchInRender` option to `true` when creating your `QueryClient`
+
+**Example code:**
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      experimental_prefetchInRender: true,
+    },
+  },
+})
+```
+
+**Usage:**
+
+```tsx
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { fetchTodos, type Todo } from './api'
+
+function TodoList({ query }: { query: UseQueryResult<Todo[]> }) {
+  const data = React.use(query.promise)
+
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+export function App() {
+  const query = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+
+  return (
+    <>
+      <h1>Todos</h1>
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <TodoList query={query} />
+      </React.Suspense>
+    </>
+  )
+}
+```
+
+For a more complete example, see [suspense example on GitHub](https://github.com/TanStack/query/tree/main/examples/react/suspense).
+
+For a Next.js streaming example, see [nextjs-suspense-streaming example on GitHub](https://github.com/TanStack/query/tree/main/examples/react/nextjs-suspense-streaming).
diff --git a/mintlify/query/framework/react/guides/testing.md b/mintlify/query/framework/react/guides/testing.md
new file mode 100644
index 000000000..8228cb1b0
--- /dev/null
+++ b/mintlify/query/framework/react/guides/testing.md
@@ -0,0 +1,170 @@
+---
+id: testing
+title: Testing
+---
+
+React Query works by means of hooks - either the ones we offer or custom ones that wrap around them.
+
+With React 17 or earlier, writing unit tests for these custom hooks can be done by means of the [React Hooks Testing Library](https://react-hooks-testing-library.com/) library.
+
+Install this by running:
+
+```sh
+npm install @testing-library/react-hooks react-test-renderer --save-dev
+```
+
+(The `react-test-renderer` library is needed as a peer dependency of `@testing-library/react-hooks`, and needs to correspond to the version of React that you are using.)
+
+_Note_: when using React 18 or later, `renderHook` is available directly through the `@testing-library/react` package, and `@testing-library/react-hooks` is no longer required.
+
+## Our First Test
+
+Once installed, a simple test can be written. Given the following custom hook:
+
+```tsx
+export function useCustomHook() {
+  return useQuery({ queryKey: ['customHook'], queryFn: () => 'Hello' })
+}
+```
+
+We can write a test for this as follows:
+
+```tsx
+import { renderHook, waitFor } from '@testing-library/react'
+
+const queryClient = new QueryClient()
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const { result } = renderHook(() => useCustomHook(), { wrapper })
+
+await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+expect(result.current.data).toEqual('Hello')
+```
+
+Note that we provide a custom wrapper that builds the `QueryClient` and `QueryClientProvider`. This helps to ensure that our test is completely isolated from any other tests.
+
+It is possible to write this wrapper only once, but if so we need to ensure that the `QueryClient` gets cleared before every test, and that tests don't run in parallel otherwise one test will influence the results of others.
+
+## Turn off retries
+
+The library defaults to three retries with exponential backoff, which means that your tests are likely to timeout if you want to test an erroneous query. The easiest way to turn retries off is via the QueryClientProvider. Let's extend the above example:
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // ✅ turns retries off
+      retry: false,
+    },
+  },
+})
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+```
+
+This will set the defaults for all queries in the component tree to "no retries". It is important to know that this will only work if your actual useQuery has no explicit retries set. If you have a query that wants 5 retries, this will still take precedence, because defaults are only taken as a fallback.
+
+## Set gcTime to Infinity with Jest
+
+If you use Jest, you can set the `gcTime` to `Infinity` to prevent "Jest did not exit one second after the test run completed" error message. This is the default behavior on the server, and is only necessary to set if you are explicitly setting a `gcTime`.
+
+## Testing Network Calls
+
+The primary use for React Query is to cache network requests, so it's important that we can test our code is making the correct network requests in the first place.
+
+There are plenty of ways that these can be tested, but for this example we are going to use [nock](https://www.npmjs.com/package/nock).
+
+Given the following custom hook:
+
+```tsx
+function useFetchData() {
+  return useQuery({
+    queryKey: ['fetchData'],
+    queryFn: () => request('/api/data'),
+  })
+}
+```
+
+We can write a test for this as follows:
+
+```tsx
+const queryClient = new QueryClient()
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const expectation = nock('http://example.com').get('/api/data').reply(200, {
+  answer: 42,
+})
+
+const { result } = renderHook(() => useFetchData(), { wrapper })
+
+await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+expect(result.current.data).toEqual({ answer: 42 })
+```
+
+Here we are making use of `waitFor` and waiting until the query status indicates that the request has succeeded. This way we know that our hook has finished and should have the correct data. _Note_: when using React 18, the semantics of `waitFor` have changed as noted above.
+
+## Testing Load More / Infinite Scroll
+
+First we need to mock our API response
+
+```tsx
+function generateMockedResponse(page) {
+  return {
+    page: page,
+    items: [...]
+  }
+}
+```
+
+Then, our `nock` configuration needs to differentiate responses based on the page, and we'll be using `uri` to do this.
+`uri`'s value here will be something like `"/?page=1` or `/?page=2`
+
+```tsx
+const expectation = nock('http://example.com')
+  .persist()
+  .query(true)
+  .get('/api/data')
+  .reply(200, (uri) => {
+    const url = new URL(`http://example.com${uri}`)
+    const { page } = Object.fromEntries(url.searchParams)
+    return generateMockedResponse(page)
+  })
+```
+
+(Notice the `.persist()`, because we'll be calling from this endpoint multiple times)
+
+Now we can safely run our tests, the trick here is to await for the data assertion to pass:
+
+```tsx
+const { result } = renderHook(() => useInfiniteQueryCustomHook(), {
+  wrapper,
+})
+
+await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+expect(result.current.data.pages).toStrictEqual(generateMockedResponse(1))
+
+result.current.fetchNextPage()
+
+await waitFor(() =>
+  expect(result.current.data.pages).toStrictEqual([
+    ...generateMockedResponse(1),
+    ...generateMockedResponse(2),
+  ]),
+)
+
+expectation.done()
+```
+
+_Note_: when using React 18, the semantics of `waitFor` have changed as noted above.
+
+## Further reading
+
+For additional tips and an alternative setup using `mock-service-worker`, have a look at [this article by TkDodo on Testing React Query](https://tkdodo.eu/blog/testing-react-query).
diff --git a/mintlify/query/framework/react/guides/updates-from-mutation-responses.md b/mintlify/query/framework/react/guides/updates-from-mutation-responses.md
new file mode 100644
index 000000000..c794033fa
--- /dev/null
+++ b/mintlify/query/framework/react/guides/updates-from-mutation-responses.md
@@ -0,0 +1,84 @@
+---
+id: updates-from-mutation-responses
+title: Updates from Mutation Responses
+---
+
+When dealing with mutations that **update** objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the [Query Client's `setQueryData`](/query/reference/QueryClient#queryclientsetquerydata) method:
+
+[//]: # 'Example'
+
+```tsx
+const queryClient = useQueryClient()
+
+const mutation = useMutation({
+  mutationFn: editTodo,
+  onSuccess: (data) => {
+    queryClient.setQueryData(['todo', { id: 5 }], data)
+  },
+})
+
+mutation.mutate({
+  id: 5,
+  name: 'Do the laundry',
+})
+
+// The query below will be updated with the response from the
+// successful mutation
+const { status, data, error } = useQuery({
+  queryKey: ['todo', { id: 5 }],
+  queryFn: fetchTodoById,
+})
+```
+
+[//]: # 'Example'
+
+You might want to tie the `onSuccess` logic into a reusable mutation, for that you can
+create a custom hook like this:
+
+[//]: # 'Example2'
+
+```tsx
+const useMutateTodo = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: editTodo,
+    // Notice the second argument is the variables object that the `mutate` function receives
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(['todo', { id: variables.id }], data)
+    },
+  })
+}
+```
+
+[//]: # 'Example2'
+
+## Immutability
+
+Updates via `setQueryData` must be performed in an _immutable_ way. **DO NOT** attempt to write directly to the cache by mutating data (that you retrieved from the cache) in place. It might work at first but can lead to subtle bugs along the way.
+
+[//]: # 'Example3'
+
+```tsx
+queryClient.setQueryData(['posts', { id }], (oldData) => {
+  if (oldData) {
+    // ❌ do not try this
+    oldData.title = 'my new post title'
+  }
+  return oldData
+})
+
+queryClient.setQueryData(
+  ['posts', { id }],
+  // ✅ this is the way
+  (oldData) =>
+    oldData
+      ? {
+          ...oldData,
+          title: 'my new post title',
+        }
+      : oldData,
+)
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/react/guides/window-focus-refetching.md b/mintlify/query/framework/react/guides/window-focus-refetching.md
new file mode 100644
index 000000000..b2a4cbd3e
--- /dev/null
+++ b/mintlify/query/framework/react/guides/window-focus-refetching.md
@@ -0,0 +1,105 @@
+---
+id: window-focus-refetching
+title: Window Focus Refetching
+---
+
+If a user leaves your application and returns and the query data is stale, **TanStack Query automatically requests fresh data for you in the background**. You can disable this globally or per-query using the `refetchOnWindowFocus` option:
+
+#### Disabling Globally
+
+[//]: # 'Example'
+
+```tsx
+//
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false, // default: true
+    },
+  },
+})
+
+function App() {
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
+}
+```
+
+[//]: # 'Example'
+
+#### Disabling Per-Query
+
+[//]: # 'Example2'
+
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  refetchOnWindowFocus: false,
+})
+```
+
+[//]: # 'Example2'
+
+## Custom Window Focus Event
+
+In rare circumstances, you may want to manage your own window focus events that trigger TanStack Query to revalidate. To do this, TanStack Query provides a `focusManager.setEventListener` function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling `focusManager.setEventListener`, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:
+
+[//]: # 'Example3'
+
+```tsx
+focusManager.setEventListener((handleFocus) => {
+  // Listen to visibilitychange
+  if (typeof window !== 'undefined' && window.addEventListener) {
+    const visibilitychangeHandler = () => {
+      handleFocus(document.visibilityState === 'visible')
+    }
+    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
+    return () => {
+      // Be sure to unsubscribe if a new handler is set
+      window.removeEventListener('visibilitychange', visibilitychangeHandler)
+    }
+  }
+})
+```
+
+[//]: # 'Example3'
+[//]: # 'ReactNative'
+
+## Managing Focus in React Native
+
+Instead of event listeners on `window`, React Native provides focus information through the [`AppState` module](https://reactnative.dev/docs/appstate#app-states). You can use the `AppState` "change" event to trigger an update when the app state changes to "active":
+
+```tsx
+import { AppState } from 'react-native'
+import { focusManager } from '@tanstack/react-query'
+
+function onAppStateChange(status: AppStateStatus) {
+  if (Platform.OS !== 'web') {
+    focusManager.setFocused(status === 'active')
+  }
+}
+
+useEffect(() => {
+  const subscription = AppState.addEventListener('change', onAppStateChange)
+
+  return () => subscription.remove()
+}, [])
+```
+
+[//]: # 'ReactNative'
+
+## Managing focus state
+
+[//]: # 'Example4'
+
+```tsx
+import { focusManager } from '@tanstack/react-query'
+
+// Override the default focus state
+focusManager.setFocused(true)
+
+// Fallback to the default focus check
+focusManager.setFocused(undefined)
+```
+
+[//]: # 'Example4'
diff --git a/mintlify/query/framework/react/installation.md b/mintlify/query/framework/react/installation.md
new file mode 100644
index 000000000..43b7b48f1
--- /dev/null
+++ b/mintlify/query/framework/react/installation.md
@@ -0,0 +1,105 @@
+---
+id: installation
+title: Installation
+---
+
+You can install React Query via [NPM](https://npmjs.com/),
+or a good ol' `<script>` via
+[ESM.sh](https://esm.sh/).
+
+### NPM
+
+```bash
+npm i @tanstack/react-query
+```
+
+or
+
+```bash
+pnpm add @tanstack/react-query
+```
+
+or
+
+```bash
+yarn add @tanstack/react-query
+```
+
+or
+
+```bash
+bun add @tanstack/react-query
+```
+
+or
+
+```bash
+deno add @tanstack/react-query
+```
+
+[//]: # 'Compatibility'
+
+React Query is compatible with React v18+ and works with ReactDOM and React Native.
+
+> Wanna give it a spin before you download? Try out the [simple](/query/framework/react/examples/simple) or [basic](/query/framework/react/examples/basic) examples!
+
+[//]: # 'Compatibility'
+
+### CDN
+
+If you're not using a module bundler or package manager, you can also use this library via an ESM-compatible CDN such as [ESM.sh](https://esm.sh/). Simply add a `<script type="module">` tag to the bottom of your HTML file:
+
+[//]: # 'CDNExample'
+
+```html
+<script type="module">
+  import React from 'https://esm.sh/react@18.2.0'
+  import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
+  import { QueryClient } from 'https://esm.sh/@tanstack/react-query'
+</script>
+```
+
+> You can find instructions on how to use React without JSX [here](https://react.dev/reference/react/createElement#creating-an-element-without-jsx).
+
+[//]: # 'CDNExample'
+
+### Requirements
+
+React Query is optimized for modern browsers. It is compatible with the following browsers config
+
+```
+Chrome >= 91
+Firefox >= 90
+Edge >= 91
+Safari >= 15
+iOS >= 15
+Opera >= 77
+```
+
+> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves.
+
+### Recommendations
+
+It is recommended to also use our [ESLint Plugin Query](/query/eslint/eslint-plugin-query) to help you catch bugs and inconsistencies while you code. You can install it via:
+
+```bash
+npm i -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+pnpm add -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+yarn add -D @tanstack/eslint-plugin-query
+```
+
+or
+
+```bash
+bun add -D @tanstack/eslint-plugin-query
+```
diff --git a/mintlify/query/framework/react/overview.md b/mintlify/query/framework/react/overview.md
new file mode 100644
index 000000000..ea7c32c1d
--- /dev/null
+++ b/mintlify/query/framework/react/overview.md
@@ -0,0 +1,102 @@
+---
+id: overview
+title: Overview
+---
+
+TanStack Query (formerly known as React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.
+
+## Motivation
+
+Most core web frameworks **do not** come with an opinionated way of fetching or updating data in a holistic way. Because of this developers end up building either meta-frameworks which encapsulate strict opinions about data-fetching, or they invent their own ways of fetching data. This usually means cobbling together component-based state and side-effects, or using more general purpose state management libraries to store and provide asynchronous data throughout their apps.
+
+While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
+
+- Is persisted remotely in a location you may not control or own
+- Requires asynchronous APIs for fetching and updating
+- Implies shared ownership and can be changed by other people without your knowledge
+- Can potentially become "out of date" in your applications if you're not careful
+
+Once you grasp the nature of server state in your application, **even more challenges will arise** as you go, for example:
+
+- Caching... (possibly the hardest thing to do in programming)
+- Deduping multiple requests for the same data into a single request
+- Updating "out of date" data in the background
+- Knowing when data is "out of date"
+- Reflecting updates to data as quickly as possible
+- Performance optimizations like pagination and lazy loading data
+- Managing memory and garbage collection of server state
+- Memoizing query results with structural sharing
+
+If you're not overwhelmed by that list, then that must mean that you've probably solved all of your server state problems already and deserve an award. However, if you are like a vast majority of people, you either have yet to tackle all or most of these challenges and we're only scratching the surface!
+
+TanStack Query is hands down one of the _best_ libraries for managing server state. It works amazingly well **out-of-the-box, with zero-config, and can be customized** to your liking as your application grows.
+
+TanStack Query allows you to defeat and overcome the tricky challenges and hurdles of _server state_ and control your app data before it starts to control you.
+
+On a more technical note, TanStack Query will likely:
+
+- Help you remove **many** lines of complicated and misunderstood code from your application and replace with just a handful of lines of TanStack Query logic
+- Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
+- Have a direct impact on your end-users by making your application feel faster and more responsive than ever before
+- Potentially help you save on bandwidth and increase memory performance
+
+[//]: # 'Example'
+
+## Enough talk, show me some code already!
+
+In the example below, you can see TanStack Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
+
+[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/react/simple)
+
+```tsx
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+
+function Example() {
+  const { isPending, error, data } = useQuery({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
+        res.json(),
+      ),
+  })
+
+  if (isPending) return 'Loading...'
+
+  if (error) return 'An error has occurred: ' + error.message
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.description}</p>
+      <strong>👀 {data.subscribers_count}</strong>{' '}
+      <strong>✨ {data.stargazers_count}</strong>{' '}
+      <strong>🍴 {data.forks_count}</strong>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Materials'
+
+## You talked me into it, so what now?
+
+- Consider taking the official [TanStack Query Course](https://query.gg?s=tanstack) (or buying it for your whole team!)
+- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](/query/framework/react/installation) and [API Reference](/query/framework/react/reference/useQuery)
+- See the Article [Why You Want React Query](https://tkdodo.eu/blog/why-you-want-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/plugins/broadcastQueryClient.md b/mintlify/query/framework/react/plugins/broadcastQueryClient.md
new file mode 100644
index 000000000..46b0306c9
--- /dev/null
+++ b/mintlify/query/framework/react/plugins/broadcastQueryClient.md
@@ -0,0 +1,61 @@
+---
+id: broadcastQueryClient
+title: broadcastQueryClient (Experimental)
+---
+
+> VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.
+
+`broadcastQueryClient` is a utility for broadcasting and syncing the state of your queryClient between browser tabs/windows with the same origin.
+
+## Installation
+
+This utility comes as a separate package and is available under the `'@tanstack/query-broadcast-client-experimental'` import.
+
+## Usage
+
+Import the `broadcastQueryClient` function, and pass it your `QueryClient` instance, and optionally, set a `broadcastChannel`.
+
+```tsx
+import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'
+
+const queryClient = new QueryClient()
+
+broadcastQueryClient({
+  queryClient,
+  broadcastChannel: 'my-app',
+})
+```
+
+## API
+
+### `broadcastQueryClient`
+
+Pass this function a `QueryClient` instance and optionally, a `broadcastChannel`.
+
+```tsx
+broadcastQueryClient({ queryClient, broadcastChannel })
+```
+
+### `Options`
+
+An object of options:
+
+```tsx
+interface BroadcastQueryClientOptions {
+  /** The QueryClient to sync */
+  queryClient: QueryClient
+  /** This is the unique channel name that will be used
+   * to communicate between tabs and windows */
+  broadcastChannel?: string
+  /** Options for the BroadcastChannel API */
+  options?: BroadcastChannelOptions
+}
+```
+
+The default options are:
+
+```tsx
+{
+  broadcastChannel = 'tanstack-query',
+}
+```
diff --git a/mintlify/query/framework/react/plugins/createAsyncStoragePersister.md b/mintlify/query/framework/react/plugins/createAsyncStoragePersister.md
new file mode 100644
index 000000000..c489a41b9
--- /dev/null
+++ b/mintlify/query/framework/react/plugins/createAsyncStoragePersister.md
@@ -0,0 +1,120 @@
+---
+id: createAsyncStoragePersister
+title: createAsyncStoragePersister
+---
+
+## Installation
+
+This utility comes as a separate package and is available under the `'@tanstack/query-async-storage-persister'` import.
+
+```bash
+npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
+```
+
+## Usage
+
+- Import the `createAsyncStoragePersister` function
+- Create a new asyncStoragePersister
+  - you can pass any `storage` to it that adheres to the `AsyncStorage` interface - the example below uses the async-storage from React Native.
+  - storages that read and write synchronously, like `window.localstorage`, also adhere to the `AsyncStorage` interface and can therefore also be used with `createAsyncStoragePersister`.
+- Wrap your app by using [`PersistQueryClientProvider`](/query/framework/react/plugins/persistQueryClient#persistqueryclientprovider) component.
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { QueryClient } from '@tanstack/react-query'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+const asyncStoragePersister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+})
+
+const Root = () => (
+  <PersistQueryClientProvider
+    client={queryClient}
+    persistOptions={{ persister: asyncStoragePersister }}
+  >
+    <App />
+  </PersistQueryClientProvider>
+)
+
+export default Root
+```
+
+## Retries
+
+Retries work the same as for a [SyncStoragePersister](/query/framework/react/plugins/createSyncStoragePersister), except that they can also be asynchronous. You can also use all the predefined retry handlers.
+
+## API
+
+### `createAsyncStoragePersister`
+
+Call this function to create an asyncStoragePersister that you can use later with `persistQueryClient`.
+
+```tsx
+createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)
+```
+
+### `Options`
+
+```tsx
+interface CreateAsyncStoragePersisterOptions {
+  /** The storage client used for setting an retrieving items from cache */
+  storage: AsyncStorage | undefined | null
+  /** The key to use when storing the cache to localStorage */
+  key?: string
+  /** To avoid localStorage spamming,
+   * pass a time in ms to throttle saving the cache to disk */
+  throttleTime?: number
+  /** How to serialize the data to storage */
+  serialize?: (client: PersistedClient) => string
+  /** How to deserialize the data from storage */
+  deserialize?: (cachedString: string) => PersistedClient
+  /** How to retry persistence on error **/
+  retry?: AsyncPersistRetryer
+}
+
+interface AsyncStorage<TStorageValue = string> {
+  getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
+  setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
+  removeItem: (key: string) => MaybePromise<void>
+  entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
+}
+```
+
+The default options are:
+
+```tsx
+{
+  key = `REACT_QUERY_OFFLINE_CACHE`,
+  throttleTime = 1000,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+}
+```
diff --git a/mintlify/query/framework/react/plugins/createPersister.md b/mintlify/query/framework/react/plugins/createPersister.md
new file mode 100644
index 000000000..0b59b216c
--- /dev/null
+++ b/mintlify/query/framework/react/plugins/createPersister.md
@@ -0,0 +1,218 @@
+---
+id: createPersister
+title: experimental_createQueryPersister
+---
+
+## Installation
+
+This utility comes as a separate package and is available under the `'@tanstack/query-persist-client-core'` import.
+
+```bash
+npm install @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+pnpm add @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+yarn add @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+bun add @tanstack/query-persist-client-core
+```
+
+> Note: This util is also included in the `@tanstack/react-query-persist-client` package, so you do not need to install it separately if you are using that package.
+
+## Usage
+
+- Import the `experimental_createQueryPersister` function
+- Create a new `experimental_createQueryPersister`
+  - you can pass any `storage` to it that adheres to the `AsyncStorage` interface - the example below uses the async-storage from React Native.
+- Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
+  - If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
+  - If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted.
+- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310
+
+This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run.
+
+Garbage collecting a Query from memory **does not** affect the persisted data. That means Queries can be kept in memory for a shorter period of time to be more **memory efficient**. If they are used the next time, they will just be restored from the persistent storage again.
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { QueryClient } from '@tanstack/react-query'
+import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
+
+const persister = experimental_createQueryPersister({
+  storage: AsyncStorage,
+  maxAge: 1000 * 60 * 60 * 12, // 12 hours
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 30, // 30 seconds
+      persister: persister.persisterFn,
+    },
+  },
+})
+```
+
+### Adapted defaults
+
+The `createPersister` plugin technically wraps the `queryFn`, so it doesn't restore if the `queryFn` doesn't run. In that way, it acts as a caching layer between the Query and the network. Thus, the `networkMode` defaults to `'offlineFirst'` when a persister is used, so that restoring from the persistent storage can also happen even if there is no network connection.
+
+## Additional utilities
+
+Invoking `experimental_createQueryPersister` returns additional utilities in addition to `persisterFn` for easier implementation of userland functionalities.
+
+### `persistQueryByKey(queryKey: QueryKey, queryClient: QueryClient): Promise<void>`
+
+This function will persist `Query` to storage and key defined when creating persister.  
+This utility might be used along `setQueryData` to persist optimistic update to storage without waiting for invalidation.
+
+```tsx
+const persister = experimental_createQueryPersister({
+  storage: AsyncStorage,
+  maxAge: 1000 * 60 * 60 * 12, // 12 hours
+})
+
+const queryClient = useQueryClient()
+
+useMutation({
+  mutationFn: updateTodo,
+  onMutate: async (newTodo) => {
+    ...
+    // Optimistically update to the new value
+    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
+    // And persist it to storage
+    persister.persistQueryByKey(['todos'], queryClient)
+    ...
+  },
+})
+```
+
+### `retrieveQuery<T>(queryHash: string): Promise<T | undefined>`
+
+This function would attempt to retrieve persisted query by `queryHash`.  
+If `query` is `expired`, `busted` or `malformed` it would be removed from the storage instead, and `undefined` would be returned.
+
+### `persisterGc(): Promise<void>`
+
+This function can be used to sporadically clean up stoage from `expired`, `busted` or `malformed` entries.
+
+For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.  
+For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
+
+### `restoreQueries(queryClient: QueryClient, filters): Promise<void>`
+
+This function can be used to restore queries that are currently stored by persister.  
+For example when your app is starting up in offline mode, or you want all or only specific data from previous session to be immediately available without intermediate `loading` state.
+
+The filter object supports the following properties:
+
+- `queryKey?: QueryKey`
+  - Set this property to define a query key to match on.
+- `exact?: boolean`
+  - If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed.
+
+For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.  
+For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
+
+### `removeQueries(filters): Promise<void>`
+
+When using `queryClient.removeQueries`, the data remains in the persister and needs to be removed separately.
+This function can be used to remove queries that are currently stored by persister.
+
+The filter object supports the following properties:
+
+- `queryKey?: QueryKey`
+  - Set this property to define a query key to match on.
+- `exact?: boolean`
+  - If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed.
+
+For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.  
+For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
+
+## API
+
+### `experimental_createQueryPersister`
+
+```tsx
+experimental_createQueryPersister(options: StoragePersisterOptions)
+```
+
+#### `Options`
+
+```tsx
+export interface StoragePersisterOptions {
+  /** The storage client used for setting and retrieving items from cache.
+   * For SSR pass in `undefined`.
+   */
+  storage: AsyncStorage | Storage | undefined | null
+  /**
+   * How to serialize the data to storage.
+   * @default `JSON.stringify`
+   */
+  serialize?: (persistedQuery: PersistedQuery) => string
+  /**
+   * How to deserialize the data from storage.
+   * @default `JSON.parse`
+   */
+  deserialize?: (cachedString: string) => PersistedQuery
+  /**
+   * A unique string that can be used to forcefully invalidate existing caches,
+   * if they do not share the same buster string
+   */
+  buster?: string
+  /**
+   * The max-allowed age of the cache in milliseconds.
+   * If a persisted cache is found that is older than this
+   * time, it will be discarded
+   * @default 24 hours
+   */
+  maxAge?: number
+  /**
+   * Prefix to be used for storage key.
+   * Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
+   */
+  prefix?: string
+  /**
+   * If set to `true`, the query will refetch on successful query restoration if the data is stale.
+   * If set to `false`, the query will not refetch on successful query restoration.
+   * If set to `'always'`, the query will always refetch on successful query restoration.
+   * Defaults to `true`.
+   */
+  refetchOnRestore?: boolean | 'always'
+  /**
+   * Filters to narrow down which Queries should be persisted.
+   */
+  filters?: QueryFilters
+}
+
+interface AsyncStorage<TStorageValue = string> {
+  getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
+  setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
+  removeItem: (key: string) => MaybePromise<void>
+  entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
+}
+```
+
+The default options are:
+
+```tsx
+{
+  prefix = 'tanstack-query',
+  maxAge = 1000 * 60 * 60 * 24,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+  refetchOnRestore = true,
+}
+```
diff --git a/mintlify/query/framework/react/plugins/createSyncStoragePersister.md b/mintlify/query/framework/react/plugins/createSyncStoragePersister.md
new file mode 100644
index 000000000..4b42c5b76
--- /dev/null
+++ b/mintlify/query/framework/react/plugins/createSyncStoragePersister.md
@@ -0,0 +1,160 @@
+---
+id: createSyncStoragePersister
+title: createSyncStoragePersister
+---
+
+## Deprecated
+
+This plugin is deprecated and will be removed in the next major version.
+You can simply use ['@tanstack/query-async-storage-persister'](/query/framework/react/plugins/createAsyncStoragePersister) instead.
+
+## Installation
+
+This utility comes as a separate package and is available under the `'@tanstack/query-sync-storage-persister'` import.
+
+```bash
+npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
+```
+
+or
+
+```bash
+bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
+```
+
+## Usage
+
+- Import the `createSyncStoragePersister` function
+- Create a new syncStoragePersister
+- Pass it to the [`persistQueryClient`](/query/framework/react/plugins/persistQueryClient) function
+
+```tsx
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+const localStoragePersister = createSyncStoragePersister({
+  storage: window.localStorage,
+})
+// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })
+
+persistQueryClient({
+  queryClient,
+  persister: localStoragePersister,
+})
+```
+
+## Retries
+
+Persistence can fail, e.g. if the size exceeds the available space on the storage. Errors can be handled gracefully by providing a `retry` function to the persister.
+
+The retry function receives the `persistedClient` it tried to save, as well as the `error` and the `errorCount` as input. It is expected to return a _new_ `PersistedClient`, with which it tries to persist again. If _undefined_ is returned, there will be no further attempt to persist.
+
+```tsx
+export type PersistRetryer = (props: {
+  persistedClient: PersistedClient
+  error: Error
+  errorCount: number
+}) => PersistedClient | undefined
+```
+
+### Predefined strategies
+
+Per default, no retry will occur. You can use one of the predefined strategies to handle retries. They can be imported `from '@tanstack/react-query-persist-client'`:
+
+- `removeOldestQuery`
+  - will return a new `PersistedClient` with the oldest query removed.
+
+```tsx
+const localStoragePersister = createSyncStoragePersister({
+  storage: window.localStorage,
+  retry: removeOldestQuery,
+})
+```
+
+## API
+
+### `createSyncStoragePersister`
+
+Call this function to create a syncStoragePersister that you can use later with `persistQueryClient`.
+
+```tsx
+createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)
+```
+
+### `Options`
+
+```tsx
+interface CreateSyncStoragePersisterOptions {
+  /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
+  storage: Storage | undefined | null
+  /** The key to use when storing the cache */
+  key?: string
+  /** To avoid spamming,
+   * pass a time in ms to throttle saving the cache to disk */
+  throttleTime?: number
+  /** How to serialize the data to storage */
+  serialize?: (client: PersistedClient) => string
+  /** How to deserialize the data from storage */
+  deserialize?: (cachedString: string) => PersistedClient
+  /** How to retry persistence on error **/
+  retry?: PersistRetryer
+}
+```
+
+The default options are:
+
+```tsx
+{
+  key = `REACT_QUERY_OFFLINE_CACHE`,
+  throttleTime = 1000,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+}
+```
+
+#### `serialize` and `deserialize` options
+
+There is a limit to the amount of data which can be stored in `localStorage`.
+If you need to store more data in `localStorage`, you can override the `serialize` and `deserialize` functions to compress and decompress the data using a library like [lz-string](https://github.com/pieroxy/lz-string/).
+
+```tsx
+import { QueryClient } from '@tanstack/react-query'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+import { compress, decompress } from 'lz-string'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: Infinity } },
+})
+
+persistQueryClient({
+  queryClient: queryClient,
+  persister: createSyncStoragePersister({
+    storage: window.localStorage,
+    serialize: (data) => compress(JSON.stringify(data)),
+    deserialize: (data) => JSON.parse(decompress(data)),
+  }),
+  maxAge: Infinity,
+})
+```
diff --git a/mintlify/query/framework/react/plugins/persistQueryClient.md b/mintlify/query/framework/react/plugins/persistQueryClient.md
new file mode 100644
index 000000000..3f53fbb9e
--- /dev/null
+++ b/mintlify/query/framework/react/plugins/persistQueryClient.md
@@ -0,0 +1,292 @@
+---
+id: persistQueryClient
+title: persistQueryClient
+---
+
+This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different **persisters** can be used to store your client and cache to many different storage layers.
+
+## Build Persisters
+
+- [createSyncStoragePersister](/query/framework/react/plugins/createSyncStoragePersister)
+- [createAsyncStoragePersister](/query/framework/react/plugins/createAsyncStoragePersister)
+- [create a custom persister](#persisters)
+
+## How It Works
+
+**IMPORTANT** - for persist to work properly, you probably want to pass `QueryClient` a `gcTime` value to override the default during hydration (as shown above).
+
+If it is not set when creating the `QueryClient` instance, it will default to `300000` (5 minutes) for hydration, and the stored cache will be discarded after 5 minutes of inactivity. This is the default garbage collection behavior.
+
+It should be set as the same value or higher than persistQueryClient's `maxAge` option. E.g. if `maxAge` is 24 hours (the default) then `gcTime` should be 24 hours or higher. If lower than `maxAge`, garbage collection will kick in and discard the stored cache earlier than expected.
+
+You can also pass it `Infinity` to disable garbage collection behavior entirely.
+
+Due to a JavaScript limitation, the maximum allowed `gcTime` is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](/query/reference/timeoutManager#timeoutmanagersettimeoutprovider).
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+```
+
+### Cache Busting
+
+Sometimes you may make changes to your application or data that immediately invalidate any and all cached data. If and when this happens, you can pass a `buster` string option. If the cache that is found does not also have that buster string, it will be discarded. The following several functions accept this option:
+
+```tsx
+persistQueryClient({ queryClient, persister, buster: buildHash })
+persistQueryClientSave({ queryClient, persister, buster: buildHash })
+persistQueryClientRestore({ queryClient, persister, buster: buildHash })
+```
+
+### Removal
+
+If data is found to be any of the following:
+
+1. expired (see `maxAge`)
+2. busted (see `buster`)
+3. error (ex: `throws ...`)
+4. empty (ex: `undefined`)
+
+the persister `removeClient()` is called and the cache is immediately discarded.
+
+## API
+
+### `persistQueryClientSave`
+
+- Your query/mutation are [`dehydrated`](/query/framework/react/reference/hydration#dehydrate) and stored by the persister you provided.
+- `createSyncStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes. Review their documentation to see how to customize their throttle timing.
+
+You can use this to explicitly persist the cache at the moment(s) you choose.
+
+```tsx
+persistQueryClientSave({
+  queryClient,
+  persister,
+  buster = '',
+  dehydrateOptions = undefined,
+})
+```
+
+### `persistQueryClientSubscribe`
+
+Runs `persistQueryClientSave` whenever the cache changes for your `queryClient`. For example: you might initiate the `subscribe` when a user logs-in and checks "Remember me".
+
+- It returns an `unsubscribe` function which you can use to discontinue the monitor; ending the updates to the persisted cache.
+- If you want to erase the persisted cache after the `unsubscribe`, you can send a new `buster` to `persistQueryClientRestore` which will trigger the persister's `removeClient` function and discard the persisted cache.
+
+```tsx
+persistQueryClientSubscribe({
+  queryClient,
+  persister,
+  buster = '',
+  dehydrateOptions = undefined,
+})
+```
+
+### `persistQueryClientRestore`
+
+- Attempts to [`hydrate`](/query/framework/react/reference/hydration#hydrate) a previously persisted dehydrated query/mutation cache from the persister back into the query cache of the passed query client.
+- If a cache is found that is older than the `maxAge` (which by default is 24 hours), it will be discarded. This timing can be customized as you see fit.
+
+You can use this to restore the cache at moment(s) you choose.
+
+```tsx
+persistQueryClientRestore({
+  queryClient,
+  persister,
+  maxAge = 1000 * 60 * 60 * 24, // 24 hours
+  buster = '',
+  hydrateOptions = undefined,
+})
+```
+
+### `persistQueryClient`
+
+Takes the following actions:
+
+1. Immediately restores any persisted cache ([see `persistQueryClientRestore`](#persistqueryclientrestore))
+2. Subscribes to the query cache and returns the `unsubscribe` function ([see `persistQueryClientSubscribe`](#persistqueryclientsubscribe)).
+
+This functionality is preserved from version 3.x.
+
+```tsx
+persistQueryClient({
+  queryClient,
+  persister,
+  maxAge = 1000 * 60 * 60 * 24, // 24 hours
+  buster = '',
+  hydrateOptions = undefined,
+  dehydrateOptions = undefined,
+})
+```
+
+### `Options`
+
+All options available are as follows:
+
+```tsx
+interface PersistQueryClientOptions {
+  /** The QueryClient to persist */
+  queryClient: QueryClient
+  /** The Persister interface for storing and restoring the cache
+   * to/from a persisted location */
+  persister: Persister
+  /** The max-allowed age of the cache in milliseconds.
+   * If a persisted cache is found that is older than this
+   * time, it will be **silently** discarded
+   * (defaults to 24 hours) */
+  maxAge?: number
+  /** A unique string that can be used to forcefully
+   * invalidate existing caches if they do not share the same buster string */
+  buster?: string
+  /** The options passed to the hydrate function
+   * Not used on `persistQueryClientSave` or `persistQueryClientSubscribe` */
+  hydrateOptions?: HydrateOptions
+  /** The options passed to the dehydrate function
+   * Not used on `persistQueryClientRestore` */
+  dehydrateOptions?: DehydrateOptions
+}
+```
+
+There are actually three interfaces available:
+
+- `PersistedQueryClientSaveOptions` is used for `persistQueryClientSave` and `persistQueryClientSubscribe` (doesn't use `hydrateOptions`).
+- `PersistedQueryClientRestoreOptions` is used for `persistQueryClientRestore` (doesn't use `dehydrateOptions`).
+- `PersistQueryClientOptions` is used for `persistQueryClient`
+
+## Usage with React
+
+[persistQueryClient](#persistQueryClient) will try to restore the cache and automatically subscribes to further changes, thus syncing your client to the provided storage.
+
+However, restoring is asynchronous, because all persisters are async by nature, which means that if you render your App while you are restoring, you might get into race conditions if a query mounts and fetches at the same time.
+
+Further, if you subscribe to changes outside of the React component lifecycle, you have no way of unsubscribing:
+
+```tsx
+// 🚨 never unsubscribes from syncing
+persistQueryClient({
+  queryClient,
+  persister: localStoragePersister,
+})
+
+// 🚨 happens at the same time as restoring
+ReactDOM.createRoot(rootElement).render(<App />)
+```
+
+### PersistQueryClientProvider
+
+For this use-case, you can use the `PersistQueryClientProvider`. It will make sure to subscribe / unsubscribe correctly according to the React component lifecycle, and it will also make sure that queries will not start fetching while we are still restoring. Queries will still render though, they will just be put into `fetchingState: 'idle'` until data has been restored. Then, they will refetch unless the restored data is _fresh_ enough, and _initialData_ will also be respected. It can be used _instead of_ the normal [QueryClientProvider](/query/framework/react/reference/QueryClientProvider):
+
+```tsx
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+const persister = createAsyncStoragePersister({
+  storage: window.localStorage,
+})
+
+ReactDOM.createRoot(rootElement).render(
+  <PersistQueryClientProvider
+    client={queryClient}
+    persistOptions={{ persister }}
+  >
+    <App />
+  </PersistQueryClientProvider>,
+)
+```
+
+#### Props
+
+`PersistQueryClientProvider` takes the same props as [QueryClientProvider](/query/framework/react/reference/QueryClientProvider), and additionally:
+
+- `persistOptions: PersistQueryClientOptions`
+  - all [options](#options) you can pass to [persistQueryClient](#persistqueryclient) minus the QueryClient itself
+- `onSuccess?: () => Promise<unknown> | unknown`
+  - optional
+  - will be called when the initial restore is finished
+  - can be used to [resumePausedMutations](/query/reference/QueryClient#queryclientresumepausedmutations)
+  - if a Promise is returned, it will be awaited; restoring is seen as ongoing until then
+- `onError?: () => Promise<unknown> | unknown`
+  - optional
+  - will be called when an error is thrown during restoration
+  - if a Promise is returned, it will be awaited
+
+### useIsRestoring
+
+If you are using the `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid race conditions between the restore and mounting queries.
+
+## Persisters
+
+### Persisters Interface
+
+Persisters have the following interfaces:
+
+```tsx
+export interface Persister {
+  persistClient(persistClient: PersistedClient): Promisable<void>
+  restoreClient(): Promisable<PersistedClient | undefined>
+  removeClient(): Promisable<void>
+}
+```
+
+Persisted Client entries have the following interface:
+
+```tsx
+export interface PersistedClient {
+  timestamp: number
+  buster: string
+  clientState: DehydratedState
+}
+```
+
+You can import these (to build a persister):
+
+```tsx
+import {
+  PersistedClient,
+  Persister,
+} from '@tanstack/react-query-persist-client'
+```
+
+### Building A Persister
+
+You can persist however you like. Here is an example of how to build an [Indexed DB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) persister. Compared to `Web Storage API`, Indexed DB is faster, stores more than 5MB, and doesn't require serialization. That means it can readily store Javascript native types, such as `Date` and `File`.
+
+```tsx
+import { get, set, del } from 'idb-keyval'
+import {
+  PersistedClient,
+  Persister,
+} from '@tanstack/react-query-persist-client'
+
+/**
+ * Creates an Indexed DB persister
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+ */
+export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      await set(idbValidKey, client)
+    },
+    restoreClient: async () => {
+      return await get<PersistedClient>(idbValidKey)
+    },
+    removeClient: async () => {
+      await del(idbValidKey)
+    },
+  } satisfies Persister
+}
+```
diff --git a/mintlify/query/framework/react/quick-start.md b/mintlify/query/framework/react/quick-start.md
new file mode 100644
index 000000000..f5c8ee0fc
--- /dev/null
+++ b/mintlify/query/framework/react/quick-start.md
@@ -0,0 +1,81 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+This code snippet very briefly illustrates the 3 core concepts of React Query:
+
+- [Queries](/query/framework/react/guides/queries)
+- [Mutations](/query/framework/react/guides/mutations)
+- [Query Invalidation](/query/framework/react/guides/query-invalidation)
+
+[//]: # 'Example'
+
+If you're looking for a fully functioning example, please have a look at our [simple StackBlitz example](/query/framework/react/examples/simple)
+
+```tsx
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import { getTodos, postTodo } from '../my-api'
+
+// Create a client
+const queryClient = new QueryClient()
+
+function App() {
+  return (
+    // Provide the client to your App
+    <QueryClientProvider client={queryClient}>
+      <Todos />
+    </QueryClientProvider>
+  )
+}
+
+function Todos() {
+  // Access the client
+  const queryClient = useQueryClient()
+
+  // Queries
+  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
+
+  // Mutations
+  const mutation = useMutation({
+    mutationFn: postTodo,
+    onSuccess: () => {
+      // Invalidate and refetch
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+
+  return (
+    <div>
+      <ul>
+        {query.data?.map((todo) => (
+          <li key={todo.id}>{todo.title}</li>
+        ))}
+      </ul>
+
+      <button
+        onClick={() => {
+          mutation.mutate({
+            id: Date.now(),
+            title: 'Do Laundry',
+          })
+        }}
+      >
+        Add Todo
+      </button>
+    </div>
+  )
+}
+
+render(<App />, document.getElementById('root'))
+```
+
+[//]: # 'Example'
+
+These three concepts make up most of the core functionality of React Query. The next sections of the documentation will go over each of these core concepts in great detail.
diff --git a/mintlify/query/framework/react/react-native.md b/mintlify/query/framework/react/react-native.md
new file mode 100644
index 000000000..17f3d2ea1
--- /dev/null
+++ b/mintlify/query/framework/react/react-native.md
@@ -0,0 +1,147 @@
+---
+id: react-native
+title: React Native
+---
+
+React Query is designed to work out of the box with React Native.
+
+## DevTools Support
+
+There are several options available for React Native DevTools integration:
+
+1. **Native macOS App**: A 3rd party app for debugging React Query in any js-based application:
+   https://github.com/LovesWorking/rn-better-dev-tools
+
+2. **Flipper Plugin**: A 3rd party plugin for Flipper users:
+   https://github.com/bgaleotti/react-query-native-devtools
+
+3. **Reactotron Plugin**: A 3rd party plugin for Reactotron users:
+   https://github.com/hsndmr/reactotron-react-query
+
+## Online status management
+
+React Query already supports auto refetch on reconnect in web browser.
+To add this behavior in React Native you have to use React Query `onlineManager` as in the example below:
+
+```tsx
+import NetInfo from '@react-native-community/netinfo'
+import { onlineManager } from '@tanstack/react-query'
+
+onlineManager.setEventListener((setOnline) => {
+  return NetInfo.addEventListener((state) => {
+    setOnline(!!state.isConnected)
+  })
+})
+```
+
+or
+
+```tsx
+import { onlineManager } from '@tanstack/react-query'
+import * as Network from 'expo-network'
+
+onlineManager.setEventListener((setOnline) => {
+  let initialised = false
+
+  const eventSubscription = Network.addNetworkStateListener((state) => {
+    initialised = true
+    setOnline(!!state.isConnected)
+  })
+
+  Network.getNetworkStateAsync()
+    .then((state) => {
+      if (!initialised) {
+        setOnline(!!state.isConnected)
+      }
+    })
+    .catch(() => {
+      // getNetworkStateAsync can reject on some platforms/SDK versions
+    })
+
+  return eventSubscription.remove
+})
+```
+
+## Refetch on App focus
+
+Instead of event listeners on `window`, React Native provides focus information through the [`AppState` module](https://reactnative.dev/docs/appstate#app-states). You can use the `AppState` "change" event to trigger an update when the app state changes to "active":
+
+```tsx
+import { useEffect } from 'react'
+import { AppState, Platform } from 'react-native'
+import type { AppStateStatus } from 'react-native'
+import { focusManager } from '@tanstack/react-query'
+
+function onAppStateChange(status: AppStateStatus) {
+  if (Platform.OS !== 'web') {
+    focusManager.setFocused(status === 'active')
+  }
+}
+
+useEffect(() => {
+  const subscription = AppState.addEventListener('change', onAppStateChange)
+
+  return () => subscription.remove()
+}, [])
+```
+
+## Refresh on Screen focus
+
+In some situations, you may want to refetch the query when a React Native Screen is focused again.
+This custom hook will refetch **all active stale queries** when the screen is focused again.
+
+```tsx
+import React from 'react'
+import { useFocusEffect } from '@react-navigation/native'
+import { useQueryClient } from '@tanstack/react-query'
+
+export function useRefreshOnFocus() {
+  const queryClient = useQueryClient()
+  const firstTimeRef = React.useRef(true)
+
+  useFocusEffect(
+    React.useCallback(() => {
+      if (firstTimeRef.current) {
+        firstTimeRef.current = false
+        return
+      }
+
+      // refetch all stale active queries
+      queryClient.refetchQueries({
+        queryKey: ['posts'],
+        stale: true,
+        type: 'active',
+      })
+    }, [queryClient]),
+  )
+}
+```
+
+In the above code, the first focus (when the screen is initially mounted) is skipped because `useFocusEffect` calls our callback on mount in addition to screen focus.
+
+## Disable queries on out of focus screens
+
+If you don’t want certain queries to remain “live” while a screen is out of focus, you can use the subscribed prop on useQuery. This prop lets you control whether a query stays subscribed to updates. Combined with React Navigation’s useIsFocused, it allows you to seamlessly unsubscribe from queries when a screen isn’t in focus:
+
+Example usage:
+
+```tsx
+import React from 'react'
+import { useIsFocused } from '@react-navigation/native'
+import { useQuery } from '@tanstack/react-query'
+import { Text } from 'react-native'
+
+function MyComponent() {
+  const isFocused = useIsFocused()
+
+  const { dataUpdatedAt } = useQuery({
+    queryKey: ['key'],
+    queryFn: () => fetch(...),
+    subscribed: isFocused,
+  })
+
+  return <Text>DataUpdatedAt: {dataUpdatedAt}</Text>
+}
+```
+
+When subscribed is false, the query unsubscribes from updates and won’t trigger re-renders or fetch new data for that screen. Once it becomes true again (e.g., when the screen regains focus), the query re-subscribes and stays up to date.
diff --git a/mintlify/query/framework/react/reference/QueryClientProvider.md b/mintlify/query/framework/react/reference/QueryClientProvider.md
new file mode 100644
index 000000000..08d6d9ec3
--- /dev/null
+++ b/mintlify/query/framework/react/reference/QueryClientProvider.md
@@ -0,0 +1,22 @@
+---
+id: QueryClientProvider
+title: QueryClientProvider
+---
+
+Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application:
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
+}
+```
+
+**Options**
+
+- `client: QueryClient`
+  - **Required**
+  - the QueryClient instance to provide
diff --git a/mintlify/query/framework/react/reference/QueryErrorResetBoundary.md b/mintlify/query/framework/react/reference/QueryErrorResetBoundary.md
new file mode 100644
index 000000000..d1182bab5
--- /dev/null
+++ b/mintlify/query/framework/react/reference/QueryErrorResetBoundary.md
@@ -0,0 +1,29 @@
+---
+id: QueryErrorResetBoundary
+title: QueryErrorResetBoundary
+---
+
+When using **suspense** or **throwOnError** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
+
+```tsx
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+const App = () => (
+  <QueryErrorResetBoundary>
+    {({ reset }) => (
+      <ErrorBoundary
+        onReset={reset}
+        fallbackRender={({ resetErrorBoundary }) => (
+          <div>
+            There was an error!
+            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>
+    )}
+  </QueryErrorResetBoundary>
+)
+```
diff --git a/mintlify/query/framework/react/reference/hydration.md b/mintlify/query/framework/react/reference/hydration.md
new file mode 100644
index 000000000..6f2a3346a
--- /dev/null
+++ b/mintlify/query/framework/react/reference/hydration.md
@@ -0,0 +1,128 @@
+---
+id: hydration
+title: hydration
+---
+
+## `dehydrate`
+
+`dehydrate` creates a frozen representation of a `cache` that can later be hydrated with `HydrationBoundary` or `hydrate`. This is useful for passing prefetched queries from server to client or persisting queries to localStorage or other persistent locations. It only includes currently successful queries by default.
+
+```tsx
+import { dehydrate } from '@tanstack/react-query'
+
+const dehydratedState = dehydrate(queryClient, {
+  shouldDehydrateQuery,
+  shouldDehydrateMutation,
+})
+```
+
+**Options**
+
+- `client: QueryClient`
+  - **Required**
+  - The `queryClient` that should be dehydrated
+- `options: DehydrateOptions`
+  - Optional
+  - `shouldDehydrateMutation: (mutation: Mutation) => boolean`
+    - Optional
+    - Whether to dehydrate mutations.
+    - The function is called for each mutation in the cache
+      - Return `true` to include this mutation in dehydration, or `false` otherwise
+    - Defaults to only including paused mutations
+    - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateMutation` as part of the return statement
+  - `shouldDehydrateQuery: (query: Query) => boolean`
+    - Optional
+    - Whether to dehydrate queries.
+    - The function is called for each query in the cache
+      - Return `true` to include this query in dehydration, or `false` otherwise
+    - Defaults to only including successful queries
+    - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateQuery` as part of the return statement
+  - `serializeData?: (data: any) => any` A function to transform (serialize) data during dehydration.
+  - `shouldRedactErrors?: (error: unknown) => boolean`
+    - Optional
+    - Whether to redact errors from the server during dehydration.
+    - The function is called for each error in the cache
+      - Return `true` to redact this error, or `false` otherwise
+    - Defaults to redacting all errors
+
+**Returns**
+
+- `dehydratedState: DehydratedState`
+  - This includes everything that is needed to hydrate the `queryClient` at a later point
+  - You **should not** rely on the exact format of this response, it is not part of the public API and can change at any time
+  - This result is not in serialized form, you need to do that yourself if desired
+
+### Limitations
+
+Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery`, e.g.:
+
+```tsx
+// server
+const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // to also include Errors
+const serializedState = mySerialize(state) // transform Error instances to objects
+
+// client
+const state = myDeserialize(serializedState) // transform objects back to Error instances
+hydrate(client, state)
+```
+
+## `hydrate`
+
+`hydrate` adds a previously dehydrated state into a `cache`.
+
+```tsx
+import { hydrate } from '@tanstack/react-query'
+
+hydrate(queryClient, dehydratedState, options)
+```
+
+**Options**
+
+- `client: QueryClient`
+  - **Required**
+  - The `queryClient` to hydrate the state into
+- `dehydratedState: DehydratedState`
+  - **Required**
+  - The state to hydrate into the client
+- `options: HydrateOptions`
+  - Optional
+  - `defaultOptions: DefaultOptions`
+    - Optional
+    - `mutations: MutationOptions` The default mutation options to use for the hydrated mutations.
+    - `queries: QueryOptions` The default query options to use for the hydrated queries.
+    - `deserializeData?: (data: any) => any` A function to transform (deserialize) data before it is put into the cache.
+  - `queryClient?: QueryClient`
+    - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+### Limitations
+
+If the queries you're trying to hydrate already exist in the queryCache, `hydrate` will only overwrite them if the data is newer than the data present in the cache. Otherwise, it will **not** get applied.
+
+[//]: # 'HydrationBoundary'
+
+## `HydrationBoundary`
+
+`HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on update timestamp.
+
+```tsx
+import { HydrationBoundary } from '@tanstack/react-query'
+
+function App() {
+  return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>
+}
+```
+
+> Note: Only `queries` can be dehydrated with an `HydrationBoundary`.
+
+**Options**
+
+- `state: DehydratedState`
+  - The state to hydrate
+- `options: HydrateOptions`
+  - Optional
+  - `defaultOptions: QueryOptions`
+    - The default query options to use for the hydrated queries.
+  - `queryClient?: QueryClient`
+    - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+[//]: # 'HydrationBoundary'
diff --git a/mintlify/query/framework/react/reference/infiniteQueryOptions.md b/mintlify/query/framework/react/reference/infiniteQueryOptions.md
new file mode 100644
index 000000000..ecd6740b6
--- /dev/null
+++ b/mintlify/query/framework/react/reference/infiniteQueryOptions.md
@@ -0,0 +1,21 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+---
+
+```tsx
+infiniteQueryOptions({
+  queryKey,
+  ...options,
+})
+```
+
+**Options**
+
+You can generally pass everything to `infiniteQueryOptions` that you can also pass to [`useInfiniteQuery`](/query/framework/react/reference/useInfiniteQuery). Some options will have no effect when then forwarded to a function like `queryClient.prefetchInfiniteQuery`, but TypeScript will still be fine with those excess properties.
+
+- `queryKey: QueryKey`
+  - **Required**
+  - The query key to generate options for.
+
+See [useInfiniteQuery](/query/framework/react/reference/useInfiniteQuery) for more information.
diff --git a/mintlify/query/framework/react/reference/mutationOptions.md b/mintlify/query/framework/react/reference/mutationOptions.md
new file mode 100644
index 000000000..c15630b14
--- /dev/null
+++ b/mintlify/query/framework/react/reference/mutationOptions.md
@@ -0,0 +1,15 @@
+---
+id: mutationOptions
+title: mutationOptions
+---
+
+```tsx
+mutationOptions({
+  mutationFn,
+  ...options,
+})
+```
+
+**Options**
+
+You can generally pass everything to `mutationOptions` that you can also pass to [`useMutation`](/query/framework/react/reference/useMutation).
diff --git a/mintlify/query/framework/react/reference/queryOptions.md b/mintlify/query/framework/react/reference/queryOptions.md
new file mode 100644
index 000000000..ad9375b03
--- /dev/null
+++ b/mintlify/query/framework/react/reference/queryOptions.md
@@ -0,0 +1,32 @@
+---
+id: queryOptions
+title: queryOptions
+---
+
+```tsx
+queryOptions({
+  queryKey,
+  ...options,
+})
+```
+
+**Options**
+
+You can generally pass everything to `queryOptions` that you can also pass to [`useQuery`](/query/framework/react/reference/useQuery). Some options will have no effect when then forwarded to a function like `queryClient.prefetchQuery`, but TypeScript will still be fine with those excess properties.
+
+- `queryKey: QueryKey`
+  - **Required**
+  - The query key to generate options for.
+- `experimental_prefetchInRender?: boolean`
+  - Optional
+  - Defaults to `false`
+  - When set to `true`, queries will be prefetched during render, which can be useful for certain optimization scenarios
+  - Needs to be turned on for the experimental `useQuery().promise` functionality
+
+[//]: # 'Materials'
+
+## Further reading
+
+To learn more about `QueryOptions`, have a look at [this article by TkDodo The Query Options API](https://tkdodo.eu/blog/the-query-options-api).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/react/reference/useInfiniteQuery.md b/mintlify/query/framework/react/reference/useInfiniteQuery.md
new file mode 100644
index 000000000..a55c8750a
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useInfiniteQuery.md
@@ -0,0 +1,94 @@
+---
+id: useInfiniteQuery
+title: useInfiniteQuery
+---
+
+```tsx
+const {
+  fetchNextPage,
+  fetchPreviousPage,
+  hasNextPage,
+  hasPreviousPage,
+  isFetchingNextPage,
+  isFetchingPreviousPage,
+  promise,
+  ...result
+} = useInfiniteQuery({
+  queryKey,
+  queryFn: ({ pageParam }) => fetchPage(pageParam),
+  initialPageParam: 1,
+  ...options,
+  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
+    lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
+    firstPage.prevCursor,
+})
+```
+
+**Options**
+
+The options for `useInfiniteQuery` are identical to the [`useQuery` hook](/query/framework/react/reference/useQuery) with the addition of the following:
+
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+  - **Required, but only if no default query function has been defined** [`defaultQueryFn`](/query/framework/react/guides/default-query-function)
+  - The function that the query will use to request data.
+  - Receives a [QueryFunctionContext](/query/framework/react/guides/query-functions#queryfunctioncontext)
+  - Must return a promise that will either resolve data or throw an error.
+- `initialPageParam: TPageParam`
+  - **Required**
+  - The default page param to use when fetching the first page.
+- `getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null`
+  - **Required**
+  - When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.
+  - It should return a **single variable** that will be passed as the last optional parameter to your query function.
+  - Return `undefined` or `null` to indicate there is no next page available.
+- `getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null`
+  - When new data is received for this query, this function receives both the first page of the infinite list of data and the full array of all pages, as well as pageParam information.
+  - It should return a **single variable** that will be passed as the last optional parameter to your query function.
+  - Return `undefined` or `null`to indicate there is no previous page available.
+- `maxPages: number | undefined`
+  - The maximum number of pages to store in the infinite query data.
+  - When the maximum number of pages is reached, fetching a new page will result in the removal of either the first or last page from the pages array, depending on the specified direction.
+  - If `undefined` or equals `0`, the number of pages is unlimited
+  - Default value is `undefined`
+  - `getNextPageParam` and `getPreviousPageParam` must be properly defined if `maxPages` value is greater than `0` to allow fetching a page in both directions when needed.
+
+**Returns**
+
+The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](/query/framework/react/reference/useQuery), with the addition of the following properties and a small difference in `isRefetching` and `isRefetchError`:
+
+- `data.pages: TData[]`
+  - Array containing all pages.
+- `data.pageParams: unknown[]`
+  - Array containing all page params.
+- `isFetchingNextPage: boolean`
+  - Will be `true` while fetching the next page with `fetchNextPage`.
+- `isFetchingPreviousPage: boolean`
+  - Will be `true` while fetching the previous page with `fetchPreviousPage`.
+- `fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>`
+  - This function allows you to fetch the next "page" of results.
+  - `options.cancelRefetch: boolean` if set to `true`, calling `fetchNextPage` repeatedly will invoke `queryFn` every time, whether the previous
+    invocation has resolved or not. Also, the result from previous invocations will be ignored. If set to `false`, calling `fetchNextPage`
+    repeatedly won't have any effect until the first invocation has resolved. Default is `true`.
+- `fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>`
+  - This function allows you to fetch the previous "page" of results.
+  - `options.cancelRefetch: boolean` same as for `fetchNextPage`.
+- `hasNextPage: boolean`
+  - Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
+- `hasPreviousPage: boolean`
+  - Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
+- `isFetchNextPageError: boolean`
+  - Will be `true` if the query failed while fetching the next page.
+- `isFetchPreviousPageError: boolean`
+  - Will be `true` if the query failed while fetching the previous page.
+- `isRefetching: boolean`
+  - Will be `true` whenever a background refetch is in-flight, which _does not_ include initial `pending` or fetching of next or previous page
+  - Is the same as `isFetching && !isPending && !isFetchingNextPage && !isFetchingPreviousPage`
+- `isRefetchError: boolean`
+  - Will be `true` if the query failed while refetching a page.
+- `promise: Promise<TData>`
+  - A stable promise that resolves to the query result.
+  - This can be used with `React.use()` to fetch data
+  - Requires the `experimental_prefetchInRender` feature flag to be enabled on the `QueryClient`.
+
+Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behaviour, resulting in outdated data. Make sure to call these functions only in response to user actions, or add conditions like `hasNextPage && !isFetching`.
diff --git a/mintlify/query/framework/react/reference/useIsFetching.md b/mintlify/query/framework/react/reference/useIsFetching.md
new file mode 100644
index 000000000..8f7009000
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useIsFetching.md
@@ -0,0 +1,25 @@
+---
+id: useIsFetching
+title: useIsFetching
+---
+
+`useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or fetching in the background (useful for app-wide loading indicators).
+
+```tsx
+import { useIsFetching } from '@tanstack/react-query'
+// How many queries are fetching?
+const isFetching = useIsFetching()
+// How many queries matching the posts prefix are fetching?
+const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+**Returns**
+
+- `isFetching: number`
+  - Will be the `number` of the queries that your application is currently loading or fetching in the background.
diff --git a/mintlify/query/framework/react/reference/useIsMutating.md b/mintlify/query/framework/react/reference/useIsMutating.md
new file mode 100644
index 000000000..c6f0b96d6
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useIsMutating.md
@@ -0,0 +1,25 @@
+---
+id: useIsMutating
+title: useIsMutating
+---
+
+`useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching (useful for app-wide loading indicators).
+
+```tsx
+import { useIsMutating } from '@tanstack/react-query'
+// How many mutations are fetching?
+const isMutating = useIsMutating()
+// How many mutations matching the posts prefix are fetching?
+const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+```
+
+**Options**
+
+- `filters?: MutationFilters`: [Mutation Filters](/query/framework/react/guides/filters#mutation-filters)
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+**Returns**
+
+- `isMutating: number`
+  - Will be the `number` of the mutations that your application is currently fetching.
diff --git a/mintlify/query/framework/react/reference/useMutation.md b/mintlify/query/framework/react/reference/useMutation.md
new file mode 100644
index 000000000..0ea94791b
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useMutation.md
@@ -0,0 +1,161 @@
+---
+id: useMutation
+title: useMutation
+---
+
+```tsx
+const {
+  data,
+  error,
+  isError,
+  isIdle,
+  isPending,
+  isPaused,
+  isSuccess,
+  failureCount,
+  failureReason,
+  mutate,
+  mutateAsync,
+  reset,
+  status,
+  submittedAt,
+  variables,
+} = useMutation(
+  {
+    mutationFn,
+    gcTime,
+    meta,
+    mutationKey,
+    networkMode,
+    onError,
+    onMutate,
+    onSettled,
+    onSuccess,
+    retry,
+    retryDelay,
+    scope,
+    throwOnError,
+  },
+  queryClient,
+)
+
+mutate(variables, {
+  onError,
+  onSettled,
+  onSuccess,
+})
+```
+
+**Parameter1 (Options)**
+
+- `mutationFn: (variables: TVariables, context: MutationFunctionContext) => Promise<TData>`
+  - **Required, but only if no default mutation function has been defined**
+  - A function that performs an asynchronous task and returns a promise.
+  - `variables` is an object that `mutate` will pass to your `mutationFn`
+  - `context` is an object that `mutate` will pass to your `mutationFn`. Contains reference to `QueryClient`, `mutationKey` and optional `meta` object.
+- `gcTime: number | Infinity`
+  - The time in milliseconds that unused/inactive cache data remains in memory. When a mutation's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different cache times are specified, the longest one will be used.
+  - If set to `Infinity`, will disable garbage collection
+  - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](/query/reference/timeoutManager#timeoutmanagersettimeoutprovider).
+- `mutationKey: unknown[]`
+  - Optional
+  - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults`.
+- `networkMode: 'online' | 'always' | 'offlineFirst'`
+  - Optional
+  - defaults to `'online'`
+  - see [Network Mode](/query/framework/react/guides/network-mode) for more information.
+- `onMutate: (variables: TVariables, context: MutationFunctionContext) => Promise<TOnMutateResult | void> | TOnMutateResult | void`
+  - Optional
+  - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive
+  - Useful to perform optimistic updates to a resource in hopes that the mutation succeeds
+  - The value returned from this function will be passed to both the `onError` and `onSettled` functions in the event of a mutation failure and can be useful for rolling back optimistic updates.
+- `onSuccess: (data: TData, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will fire when the mutation is successful and will be passed the mutation's result.
+  - If a promise is returned, it will be awaited and resolved before proceeding
+- `onError: (err: TError, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will fire if the mutation encounters an error and will be passed the error.
+  - If a promise is returned, it will be awaited and resolved before proceeding
+- `onSettled: (data: TData, error: TError, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error
+  - If a promise is returned, it will be awaited and resolved before proceeding
+- `retry: boolean | number | (failureCount: number, error: TError) => boolean`
+  - Defaults to `0`.
+  - If `false`, failed mutations will not retry.
+  - If `true`, failed mutations will retry infinitely.
+  - If set to an `number`, e.g. `3`, failed mutations will retry until the failed mutations count meets that number.
+- `retryDelay: number | (retryAttempt: number, error: TError) => number`
+  - This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds.
+  - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff.
+  - A function like `attempt => attempt * 1000` applies linear backoff.
+- `scope: { id: string }`
+  - Optional
+  - Defaults to a unique id (so that all mutations run in parallel)
+  - Mutations with the same scope id will run in serial
+- `throwOnError: undefined | boolean | (error: TError) => boolean`
+  - Set this to `true` if you want mutation errors to be thrown in the render phase and propagate to the nearest error boundary
+  - Set this to `false` to disable the behavior of throwing errors to the error boundary.
+  - If set to a function, it will be passed the error and should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`)
+- `meta: Record<string, unknown>`
+  - Optional
+  - If set, stores additional information on the mutation cache entry that can be used as needed. It will be accessible wherever the `mutation` is available (eg. `onError`, `onSuccess` functions of the `MutationCache`).
+
+**Parameter2 (QueryClient)**
+
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+**Returns**
+
+- `mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void`
+  - The mutation function you can call with variables to trigger the mutation and optionally hooks on additional callback options.
+  - `variables: TVariables`
+    - Optional
+    - The variables object to pass to the `mutationFn`.
+  - `onSuccess: (data: TData, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => void`
+    - Optional
+    - This function will fire when the mutation is successful and will be passed the mutation's result.
+    - Void function, the returned value will be ignored
+  - `onError: (err: TError, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => void`
+    - Optional
+    - This function will fire if the mutation encounters an error and will be passed the error.
+    - Void function, the returned value will be ignored
+  - `onSettled: (data: TData | undefined, error: TError | null, variables: TVariables, onMutateResult: TOnMutateResult | undefined, context: MutationFunctionContext) => void`
+    - Optional
+    - This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error
+    - Void function, the returned value will be ignored
+  - If you make multiple requests, `onSuccess` will fire only after the latest call you've made.
+- `mutateAsync: (variables: TVariables, { onSuccess, onSettled, onError }) => Promise<TData>`
+  - Similar to `mutate` but returns a promise which can be awaited.
+- `status: MutationStatus`
+  - Will be:
+    - `idle` initial status prior to the mutation function executing.
+    - `pending` if the mutation is currently executing.
+    - `error` if the last mutation attempt resulted in an error.
+    - `success` if the last mutation attempt was successful.
+- `isIdle`, `isPending`, `isSuccess`, `isError`: boolean variables derived from `status`
+- `isPaused: boolean`
+  - will be `true` if the mutation has been `paused`
+  - see [Network Mode](/query/framework/react/guides/network-mode) for more information.
+- `data: undefined | unknown`
+  - Defaults to `undefined`
+  - The last successfully resolved data for the mutation.
+- `error: null | TError`
+  - The error object for the query, if an error was encountered.
+- `reset: () => void`
+  - A function to clean the mutation internal state (i.e., it resets the mutation to its initial state).
+- `failureCount: number`
+  - The failure count for the mutation.
+  - Incremented every time the mutation fails.
+  - Reset to `0` when the mutation succeeds.
+- `failureReason: null | TError`
+  - The failure reason for the mutation retry.
+  - Reset to `null` when the mutation succeeds.
+- `submittedAt: number`
+  - The timestamp for when the mutation was submitted.
+  - Defaults to `0`.
+- `variables: undefined | TVariables`
+  - The `variables` object passed to the `mutationFn`.
+  - Defaults to `undefined`.
diff --git a/mintlify/query/framework/react/reference/useMutationState.md b/mintlify/query/framework/react/reference/useMutationState.md
new file mode 100644
index 000000000..65d9e2276
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useMutationState.md
@@ -0,0 +1,81 @@
+---
+id: useMutationState
+title: useMutationState
+---
+
+`useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass `filters` to it to narrow down your mutations, and `select` to transform the mutation state.
+
+**Example 1: Get all variables of all running mutations**
+
+```tsx
+import { useMutationState } from '@tanstack/react-query'
+
+const variables = useMutationState({
+  filters: { status: 'pending' },
+  select: (mutation) => mutation.state.variables,
+})
+```
+
+**Example 2: Get all data for specific mutations via the `mutationKey`**
+
+```tsx
+import { useMutation, useMutationState } from '@tanstack/react-query'
+
+const mutationKey = ['posts']
+
+// Some mutation that we want to get the state for
+const mutation = useMutation({
+  mutationKey,
+  mutationFn: (newPost) => {
+    return axios.post('/posts', newPost)
+  },
+})
+
+const data = useMutationState({
+  // this mutation key needs to match the mutation key of the given mutation (see above)
+  filters: { mutationKey },
+  select: (mutation) => mutation.state.data,
+})
+```
+
+**Example 3: Access the latest mutation data via the `mutationKey`**.
+Each invocation of `mutate` adds a new entry to the mutation cache for `gcTime` milliseconds.
+
+To access the latest invocation, you can check for the last item that `useMutationState` returns.
+
+```tsx
+import { useMutation, useMutationState } from '@tanstack/react-query'
+
+const mutationKey = ['posts']
+
+// Some mutation that we want to get the state for
+const mutation = useMutation({
+  mutationKey,
+  mutationFn: (newPost) => {
+    return axios.post('/posts', newPost)
+  },
+})
+
+const data = useMutationState({
+  // this mutation key needs to match the mutation key of the given mutation (see above)
+  filters: { mutationKey },
+  select: (mutation) => mutation.state.data,
+})
+
+// Latest mutation data
+const latest = data[data.length - 1]
+```
+
+**Options**
+
+- `options`
+  - `filters?: MutationFilters`: [Mutation Filters](/query/framework/react/guides/filters#mutation-filters)
+  - `select?: (mutation: Mutation) => TResult`
+    - Use this to transform the mutation state.
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+**Returns**
+
+- `Array<TResult>`
+  - Will be an Array of whatever `select` returns for each matching mutation.
diff --git a/mintlify/query/framework/react/reference/usePrefetchInfiniteQuery.md b/mintlify/query/framework/react/reference/usePrefetchInfiniteQuery.md
new file mode 100644
index 000000000..039ee9692
--- /dev/null
+++ b/mintlify/query/framework/react/reference/usePrefetchInfiniteQuery.md
@@ -0,0 +1,33 @@
+---
+id: usePrefetchInfiniteQuery
+title: usePrefetchInfiniteQuery
+---
+
+```tsx
+usePrefetchInfiniteQuery(options)
+```
+
+**Options**
+
+You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](/query/reference/QueryClient#queryclientprefetchinfinitequery). Remember that some of them are required as below:
+
+- `queryKey: QueryKey`
+  - **Required**
+  - The query key to prefetch during render
+
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+  - **Required, but only if no default query function has been defined** See [Default Query Function](/query/framework/react/guides/default-query-function) for more information.
+
+- `initialPageParam: TPageParam`
+  - **Required**
+  - The default page param to use when fetching the first page.
+
+- `getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null`
+  - **Required**
+  - When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.
+  - It should return a **single variable** that will be passed as the last optional parameter to your query function.
+  - Return `undefined` or `null` to indicate there is no next page available.
+
+- **Returns**
+
+The `usePrefetchInfiniteQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseInfiniteQuery`](/query/framework/react/reference/useSuspenseInfiniteQuery)
diff --git a/mintlify/query/framework/react/reference/usePrefetchQuery.md b/mintlify/query/framework/react/reference/usePrefetchQuery.md
new file mode 100644
index 000000000..bc42b8e85
--- /dev/null
+++ b/mintlify/query/framework/react/reference/usePrefetchQuery.md
@@ -0,0 +1,23 @@
+---
+id: usePrefetchQuery
+title: usePrefetchQuery
+---
+
+```tsx
+usePrefetchQuery(options)
+```
+
+**Options**
+
+You can pass everything to `usePrefetchQuery` that you can pass to [`queryClient.prefetchQuery`](/query/reference/QueryClient#queryclientprefetchquery). Remember that some of them are required as below:
+
+- `queryKey: QueryKey`
+  - **Required**
+  - The query key to prefetch during render
+
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+  - **Required, but only if no default query function has been defined** See [Default Query Function](/query/framework/react/guides/default-query-function) for more information.
+
+**Returns**
+
+The `usePrefetchQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseQuery`](/query/framework/react/reference/useSuspenseQuery).
diff --git a/mintlify/query/framework/react/reference/useQueries.md b/mintlify/query/framework/react/reference/useQueries.md
new file mode 100644
index 000000000..798fa1c99
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useQueries.md
@@ -0,0 +1,145 @@
+---
+id: useQueries
+title: useQueries
+---
+
+The `useQueries` hook can be used to fetch a variable number of queries:
+
+```tsx
+const ids = [1, 2, 3]
+const results = useQueries({
+  queries: ids.map((id) => ({
+    queryKey: ['post', id],
+    queryFn: () => fetchPost(id),
+    staleTime: Infinity,
+  })),
+})
+```
+
+**Options**
+
+The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`useQuery` hook](/query/framework/react/reference/useQuery) (excluding the `queryClient` option - because the `QueryClient` can be passed in on the top level).
+
+- `queryClient?: QueryClient`
+  - Use this to provide a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `combine?: (result: UseQueriesResults) => TCombinedResult`
+  - Use this to combine the results of the queries into a single value.
+
+> Having the same query key more than once in the array of query objects may cause some data to be shared between queries. To avoid this, consider de-duplicating the queries and map the results back to the desired structure.
+
+**placeholderData**
+
+The `placeholderData` option exists for `useQueries` as well, but it doesn't get information passed from previously rendered Queries like `useQuery` does, because the input to `useQueries` can be a different number of Queries on each render.
+
+**Returns**
+
+The `useQueries` hook returns an array with all the query results. The order returned is the same as the input order.
+
+## Combine
+
+If you want to combine `data` (or other Query information) from the results into a single value, you can use the `combine` option. The result will be structurally shared to be as referentially stable as possible.
+
+```tsx
+const ids = [1, 2, 3]
+const combinedQueries = useQueries({
+  queries: ids.map((id) => ({
+    queryKey: ['post', id],
+    queryFn: () => fetchPost(id),
+  })),
+  combine: (results) => {
+    return {
+      data: results.map((result) => result.data),
+      pending: results.some((result) => result.isPending),
+    }
+  },
+})
+```
+
+In the above example, `combinedQueries` will be an object with a `data` and a `pending` property. Note that all other properties of the Query results will be lost.
+
+### Memoization
+
+The `combine` function will only re-run if:
+
+- the `combine` function itself changed referentially
+- any of the query results changed
+
+This means that an inlined `combine` function, as shown above, will run on every render. To avoid this, you can wrap the `combine` function in `useCallback`, or extract it to a stable function reference if it doesn't have any dependencies.
+
+## TypeScript: typing the `select` option
+
+Unlike `useQuery`, `useQueries` cannot infer the `data` argument of an _inline_ `select` from its sibling `queryFn`. Because `useQueries` infers the type of the whole `queries` array at once, the `select` parameter of a query object written inline cannot be contextually typed from that same object's `queryFn`, so it falls back to `unknown`. This is a [known TypeScript limitation](https://github.com/TanStack/query/issues/6556).
+
+```tsx
+useQueries({
+  queries: [
+    {
+      queryKey: ['post', 1],
+      queryFn: () => fetchPost(1),
+      // ❌ `data` is `unknown` here
+      select: (data) => data.title,
+    },
+  ],
+})
+```
+
+There are two supported workarounds:
+
+1. Annotate the `select` parameter explicitly:
+
+```tsx
+useQueries({
+  queries: [
+    {
+      queryKey: ['post', 1],
+      queryFn: () => fetchPost(1),
+      // ✅ `data` is `Post`
+      select: (data: Post) => data.title,
+    },
+  ],
+})
+```
+
+2. Define the query with the [`queryOptions`](/query/framework/react/reference/queryOptions) helper, which resolves its types in a single object _before_ it reaches `useQueries`:
+
+```tsx
+const postOptions = (id: number) =>
+  queryOptions({
+    queryKey: ['post', id],
+    queryFn: () => fetchPost(id),
+    // ✅ `data` is `Post`
+    select: (data) => data.title,
+  })
+
+useQueries({ queries: [postOptions(1), postOptions(2)] })
+```
+
+The same limitation applies when you spread a `queryOptions` result to override its `select` inline — the overriding `select` still falls back to `unknown`:
+
+```tsx
+useQueries({
+  queries: [
+    {
+      ...postOptions(1),
+      // ❌ `data` is `unknown` here
+      select: (data) => data.title,
+    },
+  ],
+})
+```
+
+Wrap the spread in `queryOptions` again so the override is resolved before it reaches `useQueries`:
+
+```tsx
+useQueries({
+  queries: [
+    queryOptions({
+      ...postOptions(1),
+      // ✅ `data` is `Post`
+      select: (data) => data.title,
+    }),
+  ],
+})
+```
+
+The same applies to [`useSuspenseQueries`](/query/framework/react/reference/useSuspenseQueries).
diff --git a/mintlify/query/framework/react/reference/useQuery.md b/mintlify/query/framework/react/reference/useQuery.md
new file mode 100644
index 000000000..7f50a5710
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useQuery.md
@@ -0,0 +1,260 @@
+---
+id: useQuery
+title: useQuery
+---
+
+```tsx
+const {
+  data,
+  dataUpdatedAt,
+  error,
+  errorUpdatedAt,
+  failureCount,
+  failureReason,
+  fetchStatus,
+  isError,
+  isFetched,
+  isFetchedAfterMount,
+  isFetching,
+  isInitialLoading,
+  isLoading,
+  isLoadingError,
+  isPaused,
+  isPending,
+  isPlaceholderData,
+  isRefetchError,
+  isRefetching,
+  isStale,
+  isSuccess,
+  isEnabled,
+  promise,
+  refetch,
+  status,
+} = useQuery(
+  {
+    queryKey,
+    queryFn,
+    gcTime,
+    enabled,
+    networkMode,
+    initialData,
+    initialDataUpdatedAt,
+    meta,
+    notifyOnChangeProps,
+    placeholderData,
+    queryKeyHashFn,
+    refetchInterval,
+    refetchIntervalInBackground,
+    refetchOnMount,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+    retry,
+    retryOnMount,
+    retryDelay,
+    select,
+    staleTime,
+    structuralSharing,
+    subscribed,
+    throwOnError,
+  },
+  queryClient,
+)
+```
+
+**Parameter1 (Options)**
+
+- `queryKey: unknown[]`
+  - **Required**
+  - The query key to use for this query.
+  - The query key will be hashed into a stable hash. See [Query Keys](/query/framework/react/guides/query-keys) for more information.
+  - The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+  - **Required, but only if no default query function has been defined** See [Default Query Function](/query/framework/react/guides/default-query-function) for more information.
+  - The function that the query will use to request data.
+  - Receives a [QueryFunctionContext](/query/framework/react/guides/query-functions#queryfunctioncontext)
+  - Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`.
+- `enabled: boolean | (query: Query) => boolean`
+  - Set this to `false` to disable this query from automatically running.
+  - Can be used for [Dependent Queries](/query/framework/react/guides/dependent-queries).
+- `networkMode: 'online' | 'always' | 'offlineFirst'`
+  - optional
+  - defaults to `'online'`
+  - see [Network Mode](/query/framework/react/guides/network-mode) for more information.
+- `retry: boolean | number | (failureCount: number, error: TError) => boolean`
+  - If `false`, failed queries will not retry by default.
+  - If `true`, failed queries will retry infinitely.
+  - If set to a `number`, e.g. `3`, failed queries will retry until the failed query count meets that number.
+  - If set to a function, it will be called with `failureCount` (starting at `0` for the first retry) and `error` to determine if a retry should be attempted.
+  - defaults to `3` on the client and `0` on the server
+- `retryOnMount: boolean | (query: Query) => boolean`
+  - If set to `false`, the query will not be retried on mount if it contains an error and has no data. Defaults to `true`.
+  - If set to a function, the function will be executed with the query to compute the value.
+- `retryDelay: number | (retryAttempt: number, error: TError) => number`
+  - This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds.
+  - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff.
+  - A function like `attempt => attempt * 1000` applies linear backoff.
+- `staleTime: number | 'static' | ((query: Query) => number | 'static')`
+  - Optional
+  - Defaults to `0`
+  - The time in milliseconds after which data is considered stale. This value only applies to the hook it is defined on.
+  - If set to `Infinity`, the data will not be considered stale unless manually invalidated
+  - If set to a function, the function will be executed with the query to compute a `staleTime`.
+  - If set to `'static'`, the data will never be considered stale
+- `gcTime: number | Infinity`
+  - Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR
+  - The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.
+  - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](/query/reference/timeoutManager#timeoutmanagersettimeoutprovider).
+  - If set to `Infinity`, will disable garbage collection
+- `queryKeyHashFn: (queryKey: QueryKey) => string`
+  - Optional
+  - If specified, this function is used to hash the `queryKey` to a string.
+- `refetchInterval: number | false | ((query: Query) => number | false | undefined)`
+  - Optional
+  - If set to a number, all queries will continuously refetch at this frequency in milliseconds
+  - If set to a function, the function will be executed with the query to compute a frequency
+- `refetchIntervalInBackground: boolean`
+  - Optional
+  - If set to `true`, queries that are set to continuously refetch with a `refetchInterval` will continue to refetch while their tab/window is in the background
+- `refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")`
+  - Optional
+  - Defaults to `true`
+  - If set to `true`, the query will refetch on mount if the data is stale.
+  - If set to `false`, the query will not refetch on mount.
+  - If set to `"always"`, the query will always refetch on mount (except when `staleTime: 'static'` is used).
+  - If set to a function, the function will be executed with the query to compute the value
+- `refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")`
+  - Optional
+  - Defaults to `true`
+  - If set to `true`, the query will refetch on window focus if the data is stale.
+  - If set to `false`, the query will not refetch on window focus.
+  - If set to `"always"`, the query will always refetch on window focus (except when `staleTime: 'static'` is used).
+  - If set to a function, the function will be executed with the query to compute the value
+- `refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")`
+  - Optional
+  - Defaults to `true`
+  - If set to `true`, the query will refetch on reconnect if the data is stale.
+  - If set to `false`, the query will not refetch on reconnect.
+  - If set to `"always"`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used).
+  - If set to a function, the function will be executed with the query to compute the value
+- `notifyOnChangeProps: string[] | "all" | (() => string[] | "all" | undefined)`
+  - Optional
+  - If set, the component will only re-render if any of the listed properties change.
+  - If set to `['data', 'error']` for example, the component will only re-render when the `data` or `error` properties change.
+  - If set to `"all"`, the component will opt-out of smart tracking and re-render whenever a query is updated.
+  - If set to a function, the function will be executed to compute the list of properties.
+  - By default, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.
+- `select: (data: TData) => unknown`
+  - Optional
+  - This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache.
+  - The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, wrap the function in `useCallback`.
+- `initialData: TData | () => TData`
+  - Optional
+  - If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet)
+  - If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initialData
+  - Initial data is considered stale by default unless a `staleTime` has been set.
+  - `initialData` **is persisted** to the cache
+- `initialDataUpdatedAt: number | (() => number | undefined)`
+  - Optional
+  - If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.
+- `placeholderData: TData | (previousValue: TData | undefined, previousQuery: Query | undefined) => TData`
+  - Optional
+  - If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `pending` state.
+  - `placeholderData` is **not persisted** to the cache
+  - If you provide a function for `placeholderData`, as a first argument you will receive previously watched query data if available, and the second argument will be the complete previousQuery instance.
+- `structuralSharing: boolean | (oldData: unknown | undefined, newData: unknown) => unknown`
+  - Optional
+  - Defaults to `true`
+  - If set to `false`, structural sharing between query results will be disabled.
+  - If set to a function, the old and new data values will be passed through this function, which should combine them into resolved data for the query. This way, you can retain references from the old data to improve performance even when that data contains non-serializable values.
+- `subscribed: boolean`
+  - Optional
+  - Defaults to `true`
+  - If set to `false`, this instance of `useQuery` will not be subscribed to the cache. This means it won't trigger the `queryFn` on its own, and it won't receive updates if data gets into cache by other means.
+- `throwOnError: undefined | boolean | (error: TError, query: Query) => boolean`
+  - Set this to `true` if you want errors to be thrown in the render phase and propagate to the nearest error boundary
+  - Set this to `false` to disable `suspense`'s default behavior of throwing errors to the error boundary.
+  - If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`)
+- `meta: Record<string, unknown>`
+  - Optional
+  - If set, stores additional information on the query cache entry that can be used as needed. It will be accessible wherever the `query` is available, and is also part of the `QueryFunctionContext` provided to the `queryFn`.
+
+**Parameter2 (QueryClient)**
+
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+**Returns**
+
+- `status: QueryStatus`
+  - Will be:
+    - `pending` if there's no cached data and no query attempt was finished yet.
+    - `error` if the query attempt resulted in an error. The corresponding `error` property has the error received from the attempted fetch
+    - `success` if the query has received a response with no errors and is ready to display its data. The corresponding `data` property on the query is the data received from the successful fetch or if the query's `enabled` property is set to `false` and has not been fetched yet `data` is the first `initialData` supplied to the query on initialization.
+- `isPending: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- `isSuccess: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- `isError: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- `isLoadingError: boolean`
+  - Will be `true` if the query failed while fetching for the first time.
+- `isRefetchError: boolean`
+  - Will be `true` if the query failed while refetching.
+- `data: TData`
+  - Defaults to `undefined`.
+  - The last successfully resolved data for the query.
+- `dataUpdatedAt: number`
+  - The timestamp for when the query most recently returned the `status` as `"success"`.
+- `error: null | TError`
+  - Defaults to `null`
+  - The error object for the query, if an error was thrown.
+- `errorUpdatedAt: number`
+  - The timestamp for when the query most recently returned the `status` as `"error"`.
+- `isStale: boolean`
+  - Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
+- `isPlaceholderData: boolean`
+  - Will be `true` if the data shown is the placeholder data.
+- `isFetched: boolean`
+  - Will be `true` if the query has been fetched.
+- `isFetchedAfterMount: boolean`
+  - Will be `true` if the query has been fetched after the component mounted.
+  - This property can be used to not show any previously cached data.
+- `fetchStatus: FetchStatus`
+  - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetches.
+  - `paused`: The query wanted to fetch, but has been `paused`.
+  - `idle`: The query is not fetching.
+  - see [Network Mode](/query/framework/react/guides/network-mode) for more information.
+- `isFetching: boolean`
+  - A derived boolean from the `fetchStatus` variable above, provided for convenience.
+- `isPaused: boolean`
+  - A derived boolean from the `fetchStatus` variable above, provided for convenience.
+- `isRefetching: boolean`
+  - Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`
+  - Is the same as `isFetching && !isPending`
+- `isLoading: boolean`
+  - Is `true` whenever the first fetch for a query is in-flight
+  - Is the same as `isFetching && isPending`
+- `isInitialLoading: boolean`
+  - **deprecated**
+  - An alias for `isLoading`, will be removed in the next major version.
+- `isEnabled: boolean`
+  - Is `true` if this query observer is enabled, `false` otherwise.
+- `failureCount: number`
+  - The failure count for the query.
+  - Incremented every time the query fails.
+  - Reset to `0` when the query succeeds.
+- `failureReason: null | TError`
+  - The failure reason for the query retry.
+  - Reset to `null` when the query succeeds.
+- `errorUpdateCount: number`
+  - The sum of all errors.
+- `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
+  - A function to manually refetch the query.
+  - If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
+  - `cancelRefetch?: boolean`
+    - Defaults to `true`
+      - Per default, a currently running request will be cancelled before a new request is made
+    - When set to `false`, no refetch will be made if there is already a request running.
+- `promise: Promise<TData>`
+  - A stable promise that will be resolved with the data of the query.
+  - Requires the `experimental_prefetchInRender` feature flag to be enabled on the `QueryClient`.
diff --git a/mintlify/query/framework/react/reference/useQueryClient.md b/mintlify/query/framework/react/reference/useQueryClient.md
new file mode 100644
index 000000000..4fb04c1bf
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useQueryClient.md
@@ -0,0 +1,17 @@
+---
+id: useQueryClient
+title: useQueryClient
+---
+
+The `useQueryClient` hook returns the current `QueryClient` instance.
+
+```tsx
+import { useQueryClient } from '@tanstack/react-query'
+
+const queryClient = useQueryClient(queryClient?: QueryClient)
+```
+
+**Options**
+
+- `queryClient?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
diff --git a/mintlify/query/framework/react/reference/useQueryErrorResetBoundary.md b/mintlify/query/framework/react/reference/useQueryErrorResetBoundary.md
new file mode 100644
index 000000000..9c970678b
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useQueryErrorResetBoundary.md
@@ -0,0 +1,28 @@
+---
+id: useQueryErrorResetBoundary
+title: useQueryErrorResetBoundary
+---
+
+This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
+
+```tsx
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+const App = () => {
+  const { reset } = useQueryErrorResetBoundary()
+  return (
+    <ErrorBoundary
+      onReset={reset}
+      fallbackRender={({ resetErrorBoundary }) => (
+        <div>
+          There was an error!
+          <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+        </div>
+      )}
+    >
+      <Page />
+    </ErrorBoundary>
+  )
+}
+```
diff --git a/mintlify/query/framework/react/reference/useSuspenseInfiniteQuery.md b/mintlify/query/framework/react/reference/useSuspenseInfiniteQuery.md
new file mode 100644
index 000000000..1c98497ff
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useSuspenseInfiniteQuery.md
@@ -0,0 +1,30 @@
+---
+id: useSuspenseInfiniteQuery
+title: useSuspenseInfiniteQuery
+---
+
+```tsx
+const result = useSuspenseInfiniteQuery(options)
+```
+
+**Options**
+
+The same as for [useInfiniteQuery](/query/framework/react/reference/useInfiniteQuery), except for:
+
+- `suspense`
+- `throwOnError`
+- `enabled`
+- `placeholderData`
+
+**Returns**
+
+Same object as [useInfiniteQuery](/query/framework/react/reference/useInfiniteQuery), except that:
+
+- `data` is guaranteed to be defined
+- `isPlaceholderData` is missing
+- `status` is either `success` or `error`
+  - the derived flags are set accordingly.
+
+**Caveat**
+
+[Cancellation](/query/framework/react/guides/query-cancellation) does not work.
diff --git a/mintlify/query/framework/react/reference/useSuspenseQueries.md b/mintlify/query/framework/react/reference/useSuspenseQueries.md
new file mode 100644
index 000000000..7f7a50e73
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useSuspenseQueries.md
@@ -0,0 +1,34 @@
+---
+id: useSuspenseQueries
+title: useSuspenseQueries
+---
+
+```tsx
+const result = useSuspenseQueries(options)
+```
+
+**Options**
+
+The same as for [useQueries](/query/framework/react/reference/useQueries), except that each `query` can't have:
+
+- `suspense`
+- `throwOnError`
+- `enabled`
+- `placeholderData`
+
+> The [`select` typing caveat](/query/framework/react/reference/useQueries#typescript-typing-the-select-option) for `useQueries` applies here as well: annotate the `select` parameter or use the [`queryOptions`](/query/framework/react/reference/queryOptions) helper to keep type inference.
+
+**Returns**
+
+Same structure as [useQueries](/query/framework/react/reference/useQueries), except that for each `query`:
+
+- `data` is guaranteed to be defined
+- `isPlaceholderData` is missing
+- `status` is either `success` or `error`
+  - the derived flags are set accordingly.
+
+**Caveats**
+
+Keep in mind that the component will only re-mount after **all queries** have finished loading. Hence, if a query has gone stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid this, make sure to set a high enough `staleTime`.
+
+[Cancellation](/query/framework/react/guides/query-cancellation) does not work.
diff --git a/mintlify/query/framework/react/reference/useSuspenseQuery.md b/mintlify/query/framework/react/reference/useSuspenseQuery.md
new file mode 100644
index 000000000..1630b5f34
--- /dev/null
+++ b/mintlify/query/framework/react/reference/useSuspenseQuery.md
@@ -0,0 +1,29 @@
+---
+id: useSuspenseQuery
+title: useSuspenseQuery
+---
+
+```tsx
+const result = useSuspenseQuery(options)
+```
+
+**Options**
+
+The same as for [useQuery](/query/framework/react/reference/useQuery), except for:
+
+- `throwOnError`
+- `enabled`
+- `placeholderData`
+
+**Returns**
+
+Same object as [useQuery](/query/framework/react/reference/useQuery), except that:
+
+- `data` is guaranteed to be defined
+- `isPlaceholderData` is missing
+- `status` is either `success` or `error`
+  - the derived flags are set accordingly.
+
+**Caveat**
+
+[Cancellation](/query/framework/react/guides/query-cancellation) does not work.
diff --git a/mintlify/query/framework/react/typescript.md b/mintlify/query/framework/react/typescript.md
new file mode 100644
index 000000000..11f9d3767
--- /dev/null
+++ b/mintlify/query/framework/react/typescript.md
@@ -0,0 +1,280 @@
+---
+id: typescript
+title: TypeScript
+---
+
+React Query is now written in **TypeScript** to make sure the library and your projects are type-safe!
+
+Things to keep in mind:
+
+- TanStack Query follows [DefinitelyTyped's support window](https://github.com/DefinitelyTyped/DefinitelyTyped#support-window) and supports TypeScript versions released within the last 2 years. At the moment, that means TypeScript **5.4** and newer.
+- Changes to types in this repository are considered **non-breaking** and are usually released as **patch** semver changes (otherwise every type enhancement would be a major version!).
+- It is **highly recommended that you lock your react-query package version to a specific patch release and upgrade with the expectation that types may be fixed or upgraded between any release**
+- The non-type-related public API of React Query still follows semver very strictly.
+
+## Type Inference
+
+Types in React Query generally flow through very well so that you don't have to provide type annotations for yourself
+
+[//]: # 'TypeInference1'
+
+```tsx
+const { data } = useQuery({
+  //    ^? const data: number | undefined
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+})
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSqDkIAEa4qAXQA0cFQEo5APjgAFciGAYAdLVQQANgDd0KgKxmzXgB6ILgw8IA9AH5eIA)
+
+[//]: # 'TypeInference1'
+[//]: # 'TypeInference2'
+
+```tsx
+const { data } = useQuery({
+  //      ^? const data: string | undefined
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+  select: (data) => data.toString(),
+})
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSox0IqgF0ANHBUBKOQD44ABXIhgGAHS1UEADYA3dCoCsxw0gwu6EwAXHASUuZhknT2MBAAyjBQwIIA5iaExrwA9Nlw+QUAegD8vEA)
+
+[//]: # 'TypeInference2'
+
+This works best if your `queryFn` has a well-defined returned type. Keep in mind that most data fetching libraries return `any` per default, so make sure to extract it to a properly typed function:
+
+[//]: # 'TypeInference3'
+
+```tsx
+const fetchGroups = (): Promise<Group[]> =>
+  axios.get('/groups').then((response) => response.data)
+
+const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const data: Group[] | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBInd1EeigY2Lh4gfFUxX6lVIkANKQe3nGlvTwFBXAHhwB6APxwA65wI3RmW0lwAD4o5kboJMDm6Ea8QA)
+
+[//]: # 'TypeInference3'
+
+## Type Narrowing
+
+React Query uses a [discriminated union type](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for the query result, discriminated by the `status` field and the derived status boolean flags. This will allow you to check for e.g. `success` status to make `data` defined:
+
+[//]: # 'TypeNarrowing'
+
+```tsx
+const { data, isSuccess } = useQuery({
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+})
+
+if (isSuccess) {
+  data
+  //  ^? const data: number
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0ANHGCoAysgYN0qVETgBeFBmy48ACgDaVGGphUAurMMBKbQD44ABXIh56AHS1UEADYAbuiGAKx2dry8wCRwhvJKKmqoDgi8cBlwElK8APS5GQB6APy8hLxAA)
+
+[//]: # 'TypeNarrowing'
+
+## Typing the error field
+
+The type for error defaults to `Error`, because that is what most users expect.
+
+[//]: # 'TypingError'
+
+```tsx
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: Error
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoUJFhx6AD2ARUpcpSqLlqCZKkw8YdHADi5ZGDgBeRHGAATAFxxGyEACNcRKVNYRm8CToMKwAFmYQFqo2ABQAlM4ACurAGAA8ERYA2gC6AHzWBVoqAHQA5sExVJxl5mA6cSUwoeiMMTyokMzGVgUdXRgl9vQMcT6SfgG2uORQRNYoGNi4eDFZVLWR9VQ5ADSkwWGZ9WOSnJxwl1cAegD8QA)
+
+[//]: # 'TypingError'
+
+If you want to throw a custom error, or something that isn't an `Error` at all, you can specify the type of the error field:
+
+[//]: # 'TypingError2'
+
+```tsx
+const { error } = useQuery<Group[], string>(['groups'], fetchGroups)
+//      ^? const error: string | null
+```
+
+[//]: # 'TypingError2'
+
+However, this has the drawback that type inference for all other generics of `useQuery` will not work anymore. It is generally not considered a good practice to throw something that isn't an `Error`, so if you have a subclass like `AxiosError` you can use _type narrowing_ to make the error field more specific:
+
+[//]: # 'TypingError3'
+
+```tsx
+import axios from 'axios'
+
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: Error | null
+
+if (axios.isAxiosError(error)) {
+  error
+  // ^? const error: AxiosError
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoUJFhx6AD2ARUpcpSqLlqCZKkw8YdHADi5ZGDgBeRHGAATAFxxGyEACNcRKVNYRm8CToMKwAFmYQFqo2ABQAlM4ACurAGAA8ERYA2gC6AHzWBVoqAHQA5sExVJxl5mA6cSUwoeiMMTyokMzGVgUdXRgl9vQMcT6SfgG2uORQRNYoGNi4eDFIIisA0uh4zllUtZH1VDkANHAb+ABijM5BIeF1qoRjkpyccJ9fAHoA-OPAEhwGLFVAlVIAQSUKgAolBZjEZtA4nFEFJPkioOi4O84H8pIQgA)
+
+[//]: # 'TypingError3'
+
+### Registering a global Error
+
+TanStack Query v5 allows for a way to set a global Error type for everything, without having to specify generics on call-sides, by amending the `Register` interface. This will make sure inference still works, but the error field will be of the specified type. If you want to enforce that call-sides must do explicit type-narrowing, set `defaultError` to `unknown`:
+
+[//]: # 'RegisterErrorType'
+
+```tsx
+import '@tanstack/react-query'
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    // Use unknown so call sites must narrow explicitly.
+    defaultError: unknown
+  }
+}
+
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: unknown | null
+```
+
+[//]: # 'RegisterErrorType'
+[//]: # 'TypingMeta'
+
+## Typing meta
+
+### Registering global Meta
+
+Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](/query/framework/react/reference/useQuery) and [mutations](/query/framework/react/reference/useMutation) stays consistent and is type-safe. Note that the registered type must extend `Record<string, unknown>` so that `meta` remains an object.
+
+```ts
+import '@tanstack/react-query'
+
+interface MyMeta extends Record<string, unknown> {
+  // Your meta type definition.
+}
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryMeta: MyMeta
+    mutationMeta: MyMeta
+  }
+}
+```
+
+[//]: # 'TypingMeta'
+[//]: # 'TypingQueryAndMutationKeys'
+
+## Typing query and mutation keys
+
+### Registering the query and mutation key types
+
+Also similarly to registering a [global error type](#registering-a-global-error), you can also register a global `QueryKey` and `MutationKey` type. This allows you to provide more structure to your keys, that matches your application's hierarchy, and have them be typed across all of the library's surface area. Note that the registered type must extend the `Array` type, so that your keys remain an array.
+
+```ts
+import '@tanstack/react-query'
+
+type QueryKey = ['dashboard' | 'marketing', ...ReadonlyArray<unknown>]
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryKey: QueryKey
+    mutationKey: QueryKey
+  }
+}
+```
+
+[//]: # 'TypingQueryAndMutationKeys'
+[//]: # 'TypingQueryOptions'
+
+## Typing Query Options
+
+If you inline query options into `useQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `useQuery` and e.g. `prefetchQuery`. In that case, you'd lose type inference. To get it back, you can use the `queryOptions` helper:
+
+```ts
+import { queryOptions } from '@tanstack/react-query'
+
+function groupOptions() {
+  return queryOptions({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+    staleTime: 5 * 1000,
+  })
+}
+
+useQuery(groupOptions())
+queryClient.prefetchQuery(groupOptions())
+```
+
+Further, the `queryKey` returned from `queryOptions` knows about the `queryFn` associated with it, and we can leverage that type information to make functions like `queryClient.getQueryData` aware of those types as well:
+
+```ts
+function groupOptions() {
+  return queryOptions({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+    staleTime: 5 * 1000,
+  })
+}
+
+const data = queryClient.getQueryData(groupOptions().queryKey)
+//     ^? const data: Group[] | undefined
+```
+
+Without `queryOptions`, the type of `data` would be `unknown`, unless we'd pass a generic to it:
+
+```ts
+const data = queryClient.getQueryData<Group[]>(['groups'])
+```
+
+Note that type inference via `queryOptions` does _not_ work for `queryClient.getQueriesData`, because it returns an array of tuples with heterogeneous, `unknown` data. If you are sure of the type of data that your query will return, specify it explicitly:
+
+```ts
+const entries = queryClient.getQueriesData<Group[]>(groupOptions().queryKey)
+//     ^? const entries: Array<[QueryKey, Group[] | undefined]>
+```
+
+## Typing Mutation Options
+
+Similarly to `queryOptions`, you can use `mutationOptions` to extract mutation options into a separate function:
+
+```ts
+function groupMutationOptions() {
+  return mutationOptions({
+    mutationKey: ['addGroup'],
+    mutationFn: addGroup,
+  })
+}
+
+useMutation({
+  ...groupMutationOptions(),
+  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['groups'] }),
+})
+useIsMutating(groupMutationOptions())
+queryClient.isMutating(groupMutationOptions())
+```
+
+[//]: # 'TypingQueryOptions'
+
+## Typesafe disabling of queries using `skipToken`
+
+If you are using TypeScript, you can use the `skipToken` to disable a query. This is useful when you want to disable a query based on a condition, but you still want to keep the query to be type safe.
+Read more about it in the [Disabling Queries](/query/framework/react/guides/disabling-queries) guide.
+
+[//]: # 'Materials'
+
+## Further Reading
+
+For tips and tricks around type inference, see the article [React Query and TypeScript](https://tkdodo.eu/blog/react-query-and-type-script). To find out how to get the best possible type-safety, you can read [Type-safe React Query](https://tkdodo.eu/blog/type-safe-react-query). [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) outlines how type inference works with the `queryOptions` helper function.
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/solid/devtools.md b/mintlify/query/framework/solid/devtools.md
new file mode 100644
index 000000000..9f5f0945c
--- /dev/null
+++ b/mintlify/query/framework/solid/devtools.md
@@ -0,0 +1,139 @@
+---
+id: devtools
+title: Devtools
+---
+
+Wave your hands in the air and shout hooray because Solid Query comes with dedicated devtools! 🥳
+
+When you begin your Solid Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Solid Query and will likely save you hours of debugging if you find yourself in a pinch!
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+## Install and Import the Devtools
+
+The devtools are a separate package that you need to install:
+
+```bash
+npm i @tanstack/solid-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/solid-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/solid-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/solid-query-devtools
+```
+
+You can import the devtools like this:
+
+```tsx
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+```
+
+By default, Solid Query Devtools are only included in bundles when `isServer === true` ([`isServer`](https://github.com/solidjs/solid/blob/a72d393a07b22f9b7496e5eb93712188ccce0d28/packages/solid/web/src/index.ts#L37) comes from the `solid-js/web` package), so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Solid app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <SolidQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`
+  - The position of the TanStack logo to open and close the devtools panel
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the Solid Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Embedded Mode
+
+Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
+
+Place the following code as high in your Solid app as you can. The closer it is to the root of the page, the better it will work!
+
+```tsx
+import { createSignal, Show } from 'solid-js'
+import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
+
+function App() {
+  const [isOpen, setIsOpen] = createSignal(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <button
+        onClick={() => setIsOpen(!isOpen())}
+      >{`${isOpen() ? 'Close' : 'Open'} the devtools panel`}</button>
+      <Show when={isOpen()}>
+        <SolidQueryDevtoolsPanel onClose={() => setIsOpen(false)} />
+      </Show>
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `style?: JSX.CSSProperties`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => void`
+  - Callback function that is called when the devtools panel is closed
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
diff --git a/mintlify/query/framework/solid/examples/astro.md b/mintlify/query/framework/solid/examples/astro.md
new file mode 100644
index 000000000..9b596b218
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/astro.md
@@ -0,0 +1,12 @@
+---
+title: "Astro"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/astro)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/astro)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/basic-graphql-request.md b/mintlify/query/framework/solid/examples/basic-graphql-request.md
new file mode 100644
index 000000000..17caa951a
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/basic-graphql-request.md
@@ -0,0 +1,12 @@
+---
+title: "Basic w/ GraphQL-Request"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/basic-graphql-request)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/basic-graphql-request)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/basic.md b/mintlify/query/framework/solid/examples/basic.md
new file mode 100644
index 000000000..133b700b9
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/default-query-function.md b/mintlify/query/framework/solid/examples/default-query-function.md
new file mode 100644
index 000000000..ce3087a09
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/default-query-function.md
@@ -0,0 +1,12 @@
+---
+title: "Default Query Function"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/default-query-function)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/default-query-function)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/offline.md b/mintlify/query/framework/solid/examples/offline.md
new file mode 100644
index 000000000..11067422b
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/offline.md
@@ -0,0 +1,12 @@
+---
+title: "Offline Queries and Mutations"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/offline)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/offline)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/simple.md b/mintlify/query/framework/solid/examples/simple.md
new file mode 100644
index 000000000..0431ceb00
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/examples/solid-start-streaming.md b/mintlify/query/framework/solid/examples/solid-start-streaming.md
new file mode 100644
index 000000000..f235cc3c6
--- /dev/null
+++ b/mintlify/query/framework/solid/examples/solid-start-streaming.md
@@ -0,0 +1,12 @@
+---
+title: "Solid Start"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/solid/examples/solid-start-streaming)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/solid/solid-start-streaming)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/solid/guides/advanced-ssr.md b/mintlify/query/framework/solid/guides/advanced-ssr.md
new file mode 100644
index 000000000..b8e9abd13
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/advanced-ssr.md
@@ -0,0 +1,6 @@
+---
+id: advanced-ssr
+title: Advanced Server Rendering
+---
+
+Will come soon
diff --git a/mintlify/query/framework/solid/guides/background-fetching-indicators.md b/mintlify/query/framework/solid/guides/background-fetching-indicators.md
new file mode 100644
index 000000000..1aa37cfaa
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/background-fetching-indicators.md
@@ -0,0 +1,57 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+replace: { 'hook': 'function' }
+---
+
+[//]: # 'Example'
+
+```tsx
+import { Switch, Match, Show, For } from 'solid-js'
+
+function Todos() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  }))
+
+  return (
+    <Switch>
+      <Match when={todosQuery.isPending}>
+        <span>Loading...</span>
+      </Match>
+      <Match when={todosQuery.isError}>
+        <span>Error: {todosQuery.error.message}</span>
+      </Match>
+      <Match when={todosQuery.isSuccess}>
+        <Show when={todosQuery.isFetching}>
+          <div>Refreshing...</div>
+        </Show>
+        <div>
+          <For each={todosQuery.data}>{(todo) => <Todo todo={todo} />}</For>
+        </div>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+import { useIsFetching } from '@tanstack/solid-query'
+
+function GlobalLoadingIndicator() {
+  const isFetching = useIsFetching()
+
+  return (
+    <Show when={isFetching()}>
+      <div>Queries are fetching in the background...</div>
+    </Show>
+  )
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/caching.md b/mintlify/query/framework/solid/guides/caching.md
new file mode 100644
index 000000000..712da98b3
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/caching.md
@@ -0,0 +1,10 @@
+---
+id: caching
+title: Caching Examples
+ref: docs/framework/react/guides/caching.md
+replace:
+  {
+    'useQuery[(][{] queryKey': 'useQuery(() => ({ queryKey',
+    'fetchTodos [}][)]': 'fetchTodos }))',
+  }
+---
diff --git a/mintlify/query/framework/solid/guides/default-query-function.md b/mintlify/query/framework/solid/guides/default-query-function.md
new file mode 100644
index 000000000..9d9efa4fe
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/default-query-function.md
@@ -0,0 +1,53 @@
+---
+id: default-query-function
+title: Default Query Function
+ref: docs/framework/react/guides/default-query-function.md
+---
+
+[//]: # 'Example'
+
+```tsx
+// Define a default query function that will receive the query key
+const defaultQueryFn = async ({ queryKey }) => {
+  const { data } = await axios.get(
+    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
+  )
+  return data
+}
+
+// provide the default query function to your app with defaultOptions
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+})
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <YourApp />
+    </QueryClientProvider>
+  )
+}
+
+// All you have to do now is pass a key!
+function Posts() {
+  const postsQuery = useQuery(() => ({ queryKey: ['/posts'] }))
+
+  // ...
+}
+
+// You can even leave out the queryFn and just go straight into options
+function Post(props) {
+  const postQuery = useQuery(() => ({
+    queryKey: [`/posts/${props.postId}`],
+    enabled: !!props.postId,
+  }))
+
+  // ...
+}
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/solid/guides/dependent-queries.md b/mintlify/query/framework/solid/guides/dependent-queries.md
new file mode 100644
index 000000000..8a646e4aa
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/dependent-queries.md
@@ -0,0 +1,51 @@
+---
+id: dependent-queries
+title: Dependent Queries
+ref: docs/framework/react/guides/dependent-queries.md
+---
+
+[//]: # 'Example'
+
+```tsx
+// Get the user
+const userQuery = useQuery(() => ({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+}))
+
+const userId = () => userQuery.data?.id
+
+// Then get the user's projects
+const projectsQuery = useQuery(() => ({
+  queryKey: ['projects', userId()],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the userId exists
+  enabled: !!userId(),
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+// Get the users ids
+const usersQuery = useQuery(() => ({
+  queryKey: ['users'],
+  queryFn: getUsersData,
+  select: (users) => users.map((user) => user.id),
+}))
+
+// Then get the users messages
+const usersMessages = useQueries(() => ({
+  queries: usersQuery.data
+    ? usersQuery.data.map((id) => {
+        return {
+          queryKey: ['messages', id],
+          queryFn: () => getMessagesByUsers(id),
+        }
+      })
+    : [], // if usersQuery.data is undefined, an empty array will be returned
+}))
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/disabling-queries.md b/mintlify/query/framework/solid/guides/disabling-queries.md
new file mode 100644
index 000000000..ab7398014
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/disabling-queries.md
@@ -0,0 +1,102 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+ref: docs/framework/react/guides/disabling-queries.md
+---
+
+[//]: # 'Example'
+
+```tsx
+import { Switch, Match, Show, For } from 'solid-js'
+
+function Todos() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+    enabled: false,
+  }))
+
+  return (
+    <div>
+      <button onClick={() => todosQuery.refetch()}>Fetch Todos</button>
+
+      <Switch>
+        <Match when={todosQuery.data}>
+          <ul>
+            <For each={todosQuery.data}>{(todo) => <li>{todo.title}</li>}</For>
+          </ul>
+        </Match>
+        <Match when={todosQuery.isError}>
+          <span>Error: {todosQuery.error.message}</span>
+        </Match>
+        <Match when={todosQuery.isLoading}>
+          <span>Loading...</span>
+        </Match>
+        <Match when={true}>
+          <span>Not ready ...</span>
+        </Match>
+      </Switch>
+
+      <div>{todosQuery.isFetching ? 'Fetching...' : null}</div>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+import { createSignal } from 'solid-js'
+
+function Todos() {
+  const [filter, setFilter] = createSignal('')
+
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos', filter()],
+    queryFn: () => fetchTodos(filter()),
+    // ⬇️ disabled as long as the filter is empty
+    enabled: !!filter(),
+  }))
+
+  return (
+    <div>
+      {/* 🚀 applying the filter will enable and execute the query */}
+      <FiltersForm onApply={setFilter} />
+      <Show when={todosQuery.data}>
+        <TodosTable data={todosQuery.data} />
+      </Show>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+import { createSignal } from 'solid-js'
+import { skipToken, useQuery } from '@tanstack/solid-query'
+
+function Todos() {
+  const [filter, setFilter] = createSignal<string | undefined>()
+
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos', filter()],
+    // ⬇️ disabled as long as the filter is undefined or empty
+    queryFn: filter() ? () => fetchTodos(filter()!) : skipToken,
+  }))
+
+  return (
+    <div>
+      {/* 🚀 applying the filter will enable and execute the query */}
+      <FiltersForm onApply={setFilter} />
+      <Show when={todosQuery.data}>
+        <TodosTable data={todosQuery.data} />
+      </Show>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/solid/guides/does-this-replace-client-state.md b/mintlify/query/framework/solid/guides/does-this-replace-client-state.md
new file mode 100644
index 000000000..c35d765f8
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/does-this-replace-client-state.md
@@ -0,0 +1,6 @@
+---
+id: does-this-replace-client-state
+title: Does TanStack Query replace global state managers?
+ref: docs/framework/react/guides/does-this-replace-client-state.md
+replace: { 'hook': 'function' }
+---
diff --git a/mintlify/query/framework/solid/guides/filters.md b/mintlify/query/framework/solid/guides/filters.md
new file mode 100644
index 000000000..870da98c2
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/filters.md
@@ -0,0 +1,5 @@
+---
+id: filters
+title: Filters
+ref: docs/framework/react/guides/filters.md
+---
diff --git a/mintlify/query/framework/solid/guides/important-defaults.md b/mintlify/query/framework/solid/guides/important-defaults.md
new file mode 100644
index 000000000..1c7d7bf6b
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/important-defaults.md
@@ -0,0 +1,13 @@
+---
+id: important-defaults
+title: Important Defaults
+ref: docs/framework/react/guides/important-defaults.md
+---
+
+[//]: # 'StructuralSharing'
+
+- Query results by default are **structurally shared to detect if data has actually changed** and if not, **the data reference remains unchanged** to better help with value stabilization. If this concept sounds foreign, then don't worry about it! 99.9% of the time you will not need to disable this and it makes your app more performant at zero cost to you.
+
+[//]: # 'StructuralSharing'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/solid/guides/infinite-queries.md b/mintlify/query/framework/solid/guides/infinite-queries.md
new file mode 100644
index 000000000..c6205f20d
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/infinite-queries.md
@@ -0,0 +1,140 @@
+---
+id: infinite-queries
+title: Infinite Queries
+ref: docs/framework/react/guides/infinite-queries.md
+---
+
+[//]: # 'Example'
+
+```tsx
+import { Switch, Match, For, Show } from 'solid-js'
+import { useInfiniteQuery } from '@tanstack/solid-query'
+
+function Projects() {
+  const fetchProjects = async ({ pageParam }) => {
+    const res = await fetch('/api/projects?cursor=' + pageParam)
+    return res.json()
+  }
+
+  const projectsQuery = useInfiniteQuery(() => ({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  }))
+
+  return (
+    <Switch>
+      <Match when={projectsQuery.isPending}>
+        <p>Loading...</p>
+      </Match>
+      <Match when={projectsQuery.isError}>
+        <p>Error: {projectsQuery.error.message}</p>
+      </Match>
+      <Match when={projectsQuery.isSuccess}>
+        <For each={projectsQuery.data.pages}>
+          {(group) => (
+            <For each={group.data}>{(project) => <p>{project.name}</p>}</For>
+          )}
+        </For>
+        <div>
+          <button
+            onClick={() => projectsQuery.fetchNextPage()}
+            disabled={!projectsQuery.hasNextPage || projectsQuery.isFetching}
+          >
+            {projectsQuery.isFetchingNextPage
+              ? 'Loading more...'
+              : projectsQuery.hasNextPage
+                ? 'Load More'
+                : 'Nothing more to load'}
+          </button>
+        </div>
+        <Show
+          when={projectsQuery.isFetching && !projectsQuery.isFetchingNextPage}
+        >
+          <div>Fetching...</div>
+        </Show>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example1'
+
+```jsx
+<List
+  onEndReached={() =>
+    projectsQuery.hasNextPage &&
+    !projectsQuery.isFetching &&
+    projectsQuery.fetchNextPage()
+  }
+/>
+```
+
+[//]: # 'Example1'
+[//]: # 'Example3'
+
+```tsx
+useInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+useInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  select: (data) => ({
+    pages: [...data.pages].reverse(),
+    pageParams: [...data.pageParams].reverse(),
+  }),
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example8'
+
+```tsx
+useInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, pages) => firstPage.prevCursor,
+  maxPages: 3,
+}))
+```
+
+[//]: # 'Example8'
+[//]: # 'Example9'
+
+```tsx
+return useInfiniteQuery(() => ({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    if (lastPage.length === 0) {
+      return undefined
+    }
+    return lastPageParam + 1
+  },
+  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
+    if (firstPageParam <= 1) {
+      return undefined
+    }
+    return firstPageParam - 1
+  },
+}))
+```
+
+[//]: # 'Example9'
diff --git a/mintlify/query/framework/solid/guides/initial-query-data.md b/mintlify/query/framework/solid/guides/initial-query-data.md
new file mode 100644
index 000000000..4aeb0fd28
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/initial-query-data.md
@@ -0,0 +1,127 @@
+---
+id: initial-query-data
+title: Initial Query Data
+ref: docs/framework/react/guides/initial-query-data.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+  }
+---
+
+[//]: # 'Example'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+// Will show initialTodos immediately, but also immediately refetch todos after mount
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+  staleTime: 1000,
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: initialTodos,
+  staleTime: 60 * 1000, // 1 minute
+  // This could be 10 seconds ago or 10 minutes ago
+  initialDataUpdatedAt: initialTodosUpdatedTimestamp, // eg. 1608412420052
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  initialData: () => getExpensiveTodos(),
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Example6'
+
+```tsx
+const todoQuery = useQuery(() => ({
+  queryKey: ['todo', todoId],
+  queryFn: () => fetch('/todos'),
+  initialData: () => {
+    // Use a todo from the 'todos' query as the initial data for this todo query
+    return queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId)
+  },
+}))
+```
+
+[//]: # 'Example6'
+[//]: # 'Example7'
+
+```tsx
+const todoQuery = useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: () => fetch(`/todos/${todoId}`),
+  initialData: () =>
+    queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId),
+  initialDataUpdatedAt: () =>
+    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
+}))
+```
+
+[//]: # 'Example7'
+[//]: # 'Example8'
+
+```tsx
+const todoQuery = useQuery(() => ({
+  queryKey: ['todo', todoId],
+  queryFn: () => fetch(`/todos/${todoId}`),
+  initialData: () => {
+    // Get the query state
+    const state = queryClient.getQueryState(['todos'])
+
+    // If the query exists and has data that is no older than 10 seconds...
+    if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {
+      // return the individual todo
+      return state.data.find((d) => d.id === todoId)
+    }
+
+    // Otherwise, return undefined and let it fetch from a hard loading state!
+  },
+}))
+```
+
+[//]: # 'Example8'
diff --git a/mintlify/query/framework/solid/guides/invalidations-from-mutations.md b/mintlify/query/framework/solid/guides/invalidations-from-mutations.md
new file mode 100644
index 000000000..ae3278703
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/invalidations-from-mutations.md
@@ -0,0 +1,16 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+ref: docs/framework/react/guides/invalidations-from-mutations.md
+replace:
+  {
+    'React': 'Solid',
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+    'hook': 'function',
+  }
+---
diff --git a/mintlify/query/framework/solid/guides/mutations.md b/mintlify/query/framework/solid/guides/mutations.md
new file mode 100644
index 000000000..8b6c22fbc
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/mutations.md
@@ -0,0 +1,300 @@
+---
+id: mutations
+title: Mutations
+ref: docs/framework/react/guides/mutations.md
+replace: { 'hook': 'function' }
+---
+
+[//]: # 'Example'
+
+```tsx
+import { Switch, Match, Show } from 'solid-js'
+
+function App() {
+  const mutation = useMutation(() => ({
+    mutationFn: (newTodo) => {
+      return axios.post('/todos', newTodo)
+    },
+  }))
+
+  return (
+    <div>
+      <Switch>
+        <Match when={mutation.isPending}>Adding todo...</Match>
+        <Match when={true}>
+          <Show when={mutation.isError}>
+            <div>An error occurred: {mutation.error.message}</div>
+          </Show>
+
+          <Show when={mutation.isSuccess}>
+            <div>Todo added!</div>
+          </Show>
+
+          <button
+            onClick={() => {
+              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
+            }}
+          >
+            Create Todo
+          </button>
+        </Match>
+      </Switch>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Info1'
+[//]: # 'Info1'
+[//]: # 'Example2'
+
+```tsx
+const CreateTodo = () => {
+  const mutation = useMutation(() => ({
+    mutationFn: (formData) => {
+      return fetch('/api', formData)
+    },
+  }))
+  const onSubmit = (event) => {
+    event.preventDefault()
+    mutation.mutate(new FormData(event.target))
+  }
+
+  return <form onSubmit={onSubmit}>...</form>
+}
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+import { createSignal, Show } from 'solid-js'
+
+const CreateTodo = () => {
+  const [title, setTitle] = createSignal('')
+  const mutation = useMutation(() => ({ mutationFn: createTodo }))
+
+  const onCreateTodo = (e) => {
+    e.preventDefault()
+    mutation.mutate({ title: title() })
+  }
+
+  return (
+    <form onSubmit={onCreateTodo}>
+      <Show when={mutation.error}>
+        <h5 onClick={() => mutation.reset()}>{mutation.error}</h5>
+      </Show>
+      <input
+        type="text"
+        value={title()}
+        onInput={(e) => setTitle(e.currentTarget.value)}
+      />
+      <br />
+      <button type="submit">Create Todo</button>
+    </form>
+  )
+}
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+useMutation(() => ({
+  mutationFn: addTodo,
+  onMutate: (variables, context) => {
+    // A mutation is about to happen!
+
+    // Optionally return a result containing data to use when for example rolling back
+    return { id: 1 }
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // An error happened!
+    console.log(`rolling back optimistic update with id ${onMutateResult.id}`)
+  },
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Boom baby!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // Error or success... doesn't matter!
+  },
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```tsx
+useMutation(() => ({
+  mutationFn: addTodo,
+  onSuccess: async () => {
+    console.log("I'm first!")
+  },
+  onSettled: async () => {
+    console.log("I'm second!")
+  },
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Example6'
+
+```tsx
+useMutation(() => ({
+  mutationFn: addTodo,
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire first
+  },
+}))
+
+mutate(todo, {
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+  onSettled: (data, error, variables, onMutateResult, context) => {
+    // I will fire second!
+  },
+})
+```
+
+[//]: # 'Example6'
+[//]: # 'Example7'
+
+```tsx
+useMutation(() => ({
+  mutationFn: addTodo,
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Will be called 3 times
+  },
+}))
+
+const todos = ['Todo 1', 'Todo 2', 'Todo 3']
+todos.forEach((todo) => {
+  mutate(todo, {
+    onSuccess: (data, variables, onMutateResult, context) => {
+      // Will execute only once, for the last mutation (Todo 3),
+      // regardless which mutation resolves first
+    },
+  })
+})
+```
+
+[//]: # 'Example7'
+[//]: # 'Example8'
+
+```tsx
+const mutation = useMutation(() => ({ mutationFn: addTodo }))
+
+try {
+  const todo = await mutation.mutateAsync(todo)
+  console.log(todo)
+} catch (error) {
+  console.error(error)
+} finally {
+  console.log('done')
+}
+```
+
+[//]: # 'Example8'
+[//]: # 'Example9'
+
+```tsx
+const mutation = useMutation(() => ({
+  mutationFn: addTodo,
+  retry: 3,
+}))
+```
+
+[//]: # 'Example9'
+[//]: # 'Example10'
+
+```tsx
+const queryClient = new QueryClient()
+
+// Define the "addTodo" mutation
+queryClient.setMutationDefaults(['addTodo'], {
+  mutationFn: addTodo,
+  onMutate: async (variables, context) => {
+    // Cancel current queries for the todos list
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Create optimistic todo
+    const optimisticTodo = { id: uuid(), title: variables.title }
+
+    // Add optimistic todo to todos list
+    context.client.setQueryData(['todos'], (old) => [...old, optimisticTodo])
+
+    // Return a result with the optimistic todo
+    return { optimisticTodo }
+  },
+  onSuccess: (result, variables, onMutateResult, context) => {
+    // Replace optimistic todo in the todos list with the result
+    context.client.setQueryData(['todos'], (old) =>
+      old.map((todo) =>
+        todo.id === onMutateResult.optimisticTodo.id ? result : todo,
+      ),
+    )
+  },
+  onError: (error, variables, onMutateResult, context) => {
+    // Remove optimistic todo from the todos list
+    context.client.setQueryData(['todos'], (old) =>
+      old.filter((todo) => todo.id !== onMutateResult.optimisticTodo.id),
+    )
+  },
+  retry: 3,
+})
+
+// Start mutation in some component:
+const mutation = useMutation(() => ({ mutationKey: ['addTodo'] }))
+mutation.mutate({ title: 'title' })
+
+// If the mutation has been paused because the device is for example offline,
+// Then the paused mutation can be dehydrated when the application quits:
+const state = dehydrate(queryClient)
+
+// The mutation can then be hydrated again when the application is started:
+hydrate(queryClient, state)
+
+// Resume the paused mutations:
+queryClient.resumePausedMutations()
+```
+
+[//]: # 'Example10'
+[//]: # 'PersistOfflineIntro'
+
+### Persisting Offline mutations
+
+If you persist offline mutations with the `persistQueryClient` plugin, mutations cannot be resumed when the page is reloaded unless you provide a default mutation function.
+
+[//]: # 'PersistOfflineIntro'
+[//]: # 'OfflineExampleLink'
+[//]: # 'OfflineExampleLink'
+[//]: # 'ExampleScopes'
+
+```tsx
+const mutation = useMutation(() => ({
+  mutationFn: addTodo,
+  scope: {
+    id: 'todo',
+  },
+}))
+```
+
+[//]: # 'ExampleScopes'
+[//]: # 'Materials'
+
+## Further reading
+
+For more information about mutations, have a look at [TkDodo's article on Mastering Mutations in TanStack Query](https://tkdodo.eu/blog/mastering-mutations-in-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/solid/guides/network-mode.md b/mintlify/query/framework/solid/guides/network-mode.md
new file mode 100644
index 000000000..e773e73ff
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/network-mode.md
@@ -0,0 +1,5 @@
+---
+id: network-mode
+title: Network Mode
+ref: docs/framework/react/guides/network-mode.md
+---
diff --git a/mintlify/query/framework/solid/guides/optimistic-updates.md b/mintlify/query/framework/solid/guides/optimistic-updates.md
new file mode 100644
index 000000000..9b8a28b8d
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/optimistic-updates.md
@@ -0,0 +1,146 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+ref: docs/framework/react/guides/optimistic-updates.md
+replace: { 'React Query': 'Solid Query', 'hook': 'function' }
+---
+
+[//]: # 'ExampleUI1'
+
+```tsx
+const addTodoMutation = useMutation(() => ({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  // make sure to _return_ the Promise from the query invalidation
+  // so that the mutation stays in `pending` state until the refetch is finished
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+}))
+```
+
+[//]: # 'ExampleUI1'
+[//]: # 'ExampleUI2'
+
+```tsx
+<ul>
+  <For each={todoQuery.data}>{(todo) => <li>{todo.text}</li>}</For>
+  <Show when={addTodoMutation.isPending}>
+    <li style={{ opacity: 0.5 }}>{addTodoMutation.variables}</li>
+  </Show>
+</ul>
+```
+
+[//]: # 'ExampleUI2'
+[//]: # 'ExampleUI3'
+
+```tsx
+<Show when={addTodoMutation.isError}>
+  <li style={{ color: 'red' }}>
+    {addTodoMutation.variables}
+    <button onClick={() => addTodoMutation.mutate(addTodoMutation.variables)}>
+      Retry
+    </button>
+  </li>
+</Show>
+```
+
+[//]: # 'ExampleUI3'
+[//]: # 'ExampleUI4'
+
+```tsx
+// somewhere in your app
+const mutation = useMutation(() => ({
+  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
+  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  mutationKey: ['addTodo'],
+}))
+
+// access variables somewhere else
+const variables = useMutationState(() => ({
+  filters: { mutationKey: ['addTodo'], status: 'pending' },
+  select: (mutation) => mutation.state.variables,
+}))
+```
+
+[//]: # 'ExampleUI4'
+[//]: # 'Example'
+
+```tsx
+const queryClient = useQueryClient()
+
+useMutation(() => ({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos'] })
+
+    // Snapshot the previous value
+    const previousTodos = context.client.getQueryData(['todos'])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos'], (old) => [...old, newTodo])
+
+    // Return a result with the snapshotted value
+    return { previousTodos }
+  },
+  // If the mutation fails,
+  // use the result returned from onMutate to roll back
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(['todos'], onMutateResult.previousTodos)
+  },
+  // Always refetch after error or success:
+  onSettled: (data, error, variables, onMutateResult, context) =>
+    context.client.invalidateQueries({ queryKey: ['todos'] }),
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+useMutation(() => ({
+  mutationFn: updateTodo,
+  // When mutate is called:
+  onMutate: async (newTodo, context) => {
+    // Cancel any outgoing refetches
+    // (so they don't overwrite our optimistic update)
+    await context.client.cancelQueries({ queryKey: ['todos', newTodo.id] })
+
+    // Snapshot the previous value
+    const previousTodo = context.client.getQueryData(['todos', newTodo.id])
+
+    // Optimistically update to the new value
+    context.client.setQueryData(['todos', newTodo.id], newTodo)
+
+    // Return a result with the previous and new todo
+    return { previousTodo, newTodo }
+  },
+  // If the mutation fails, use the result we returned above
+  onError: (err, newTodo, onMutateResult, context) => {
+    context.client.setQueryData(
+      ['todos', onMutateResult.newTodo.id],
+      onMutateResult.previousTodo,
+    )
+  },
+  // Always refetch after error or success:
+  onSettled: (newTodo, error, variables, onMutateResult, context) =>
+    context.client.invalidateQueries({ queryKey: ['todos', newTodo.id] }),
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+useMutation(() => ({
+  mutationFn: updateTodo,
+  // ...
+  onSettled: async (newTodo, error, variables, onMutateResult, context) => {
+    if (error) {
+      // do something
+    }
+  },
+}))
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/solid/guides/paginated-queries.md b/mintlify/query/framework/solid/guides/paginated-queries.md
new file mode 100644
index 000000000..5a15013e1
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/paginated-queries.md
@@ -0,0 +1,81 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+ref: docs/framework/react/guides/paginated-queries.md
+replace: { 'hook': 'function' }
+---
+
+[//]: # 'Example'
+
+```tsx
+const projectsQuery = useQuery(() => ({
+  queryKey: ['projects', page()],
+  queryFn: () => fetchProjects(page()),
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+import { createSignal, Switch, Match, Show, For } from 'solid-js'
+import { keepPreviousData, useQuery } from '@tanstack/solid-query'
+
+function Todos() {
+  const [page, setPage] = createSignal(0)
+
+  const fetchProjects = (page = 0) =>
+    fetch('/api/projects?page=' + page).then((res) => res.json())
+
+  const projectsQuery = useQuery(() => ({
+    queryKey: ['projects', page()],
+    queryFn: () => fetchProjects(page()),
+    placeholderData: keepPreviousData,
+  }))
+
+  return (
+    <div>
+      <Switch>
+        <Match when={projectsQuery.isPending}>
+          <div>Loading...</div>
+        </Match>
+        <Match when={projectsQuery.isError}>
+          <div>Error: {projectsQuery.error.message}</div>
+        </Match>
+        <Match when={projectsQuery.isSuccess}>
+          <div>
+            <For each={projectsQuery.data.projects}>
+              {(project) => <p>{project.name}</p>}
+            </For>
+          </div>
+        </Match>
+      </Switch>
+      <span>Current Page: {page() + 1}</span>
+      <button
+        onClick={() => setPage((old) => Math.max(old - 1, 0))}
+        disabled={page() === 0}
+      >
+        Previous Page
+      </button>
+      <button
+        onClick={() => {
+          if (!projectsQuery.isPlaceholderData && projectsQuery.data?.hasMore) {
+            setPage((old) => old + 1)
+          }
+        }}
+        // Disable the Next Page button until we know a next page is available
+        disabled={
+          projectsQuery.isPlaceholderData || !projectsQuery.data?.hasMore
+        }
+      >
+        Next Page
+      </button>
+      <Show when={projectsQuery.isFetching}>
+        <span> Loading...</span>
+      </Show>
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/parallel-queries.md b/mintlify/query/framework/solid/guides/parallel-queries.md
new file mode 100644
index 000000000..e7481a8f6
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/parallel-queries.md
@@ -0,0 +1,57 @@
+---
+id: parallel-queries
+title: Parallel Queries
+ref: docs/framework/react/guides/parallel-queries.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+    'hooks': 'functions',
+  }
+---
+
+[//]: # 'Example'
+
+```tsx
+function App () {
+  // The following queries will execute in parallel
+  const usersQuery = useQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
+  const teamsQuery = useQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
+  const projectsQuery = useQuery(() => ({ queryKey: ['projects'], queryFn: fetchProjects }))
+  ...
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Info'
+[//]: # 'Info'
+[//]: # 'DynamicParallelIntro'
+
+If the number of queries you need to execute changes, you cannot use manual querying since that would break reactivity. Instead, TanStack Query provides a `useQueries` function, which you can use to dynamically execute as many queries in parallel as you'd like.
+
+[//]: # 'DynamicParallelIntro'
+[//]: # 'DynamicParallelDescription'
+
+`useQueries` accepts an **accessor that returns an options object** with a **queries key** whose value is an **array of query objects**. It returns an **array of query results**:
+
+[//]: # 'DynamicParallelDescription'
+[//]: # 'Example2'
+
+```tsx
+function App(props) {
+  const userQueries = useQueries(() => ({
+    queries: props.users.map((user) => {
+      return {
+        queryKey: ['user', user.id],
+        queryFn: () => fetchUserById(user.id),
+      }
+    }),
+  }))
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/placeholder-query-data.md b/mintlify/query/framework/solid/guides/placeholder-query-data.md
new file mode 100644
index 000000000..7249f4109
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/placeholder-query-data.md
@@ -0,0 +1,68 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+ref: docs/framework/react/guides/placeholder-query-data.md
+---
+
+[//]: # 'ExampleValue'
+
+```tsx
+function Todos() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    placeholderData: placeholderTodos,
+  }))
+}
+```
+
+[//]: # 'ExampleValue'
+[//]: # 'Memoization'
+
+### Placeholder Data Memoization
+
+If the process for accessing a query's placeholder data is intensive or just not something you want to perform on every render, you can memoize the value:
+
+```tsx
+function Todos() {
+  const placeholderData = createMemo(() => generateFakeTodos())
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/todos'),
+    placeholderData: placeholderData(),
+  }))
+}
+```
+
+[//]: # 'Memoization'
+[//]: # 'ExampleFunction'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos', id],
+  queryFn: () => fetch(`/todos/${id}`),
+  placeholderData: (previousData, previousQuery) => previousData,
+}))
+```
+
+[//]: # 'ExampleFunction'
+[//]: # 'ExampleCache'
+
+```tsx
+function BlogPost(props) {
+  const queryClient = useQueryClient()
+  const blogPostQuery = useQuery(() => ({
+    queryKey: ['blogPost', props.blogPostId],
+    queryFn: () => fetch(`/blogPosts/${props.blogPostId}`),
+    placeholderData: () => {
+      // Use the smaller/preview version of the blogPost from the 'blogPosts'
+      // query as the placeholder data for this blogPost query
+      return queryClient
+        .getQueryData(['blogPosts'])
+        ?.find((d) => d.id === props.blogPostId)
+    },
+  }))
+}
+```
+
+[//]: # 'ExampleCache'
diff --git a/mintlify/query/framework/solid/guides/polling.md b/mintlify/query/framework/solid/guides/polling.md
new file mode 100644
index 000000000..9410627eb
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/polling.md
@@ -0,0 +1,73 @@
+---
+id: polling
+title: Polling
+ref: docs/framework/react/guides/polling.md
+replace: { '@tanstack/react-query': '@tanstack/solid-query' }
+---
+
+[//]: # 'Example1'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['prices'],
+  queryFn: fetchPrices,
+  refetchInterval: 5_000, // every 5 seconds
+}))
+```
+
+[//]: # 'Example1'
+[//]: # 'Example2'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['job', jobId],
+  queryFn: () => fetchJobStatus(jobId),
+  refetchInterval: (query) => {
+    // Stop polling once the job finishes
+    if (query.state.data?.status === 'complete') return false
+    return 2_000
+  },
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['portfolio'],
+  queryFn: fetchPortfolio,
+  refetchInterval: 30_000,
+  refetchIntervalInBackground: true,
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['prices', tokenAddress],
+  queryFn: () => fetchPrice(tokenAddress),
+  refetchInterval: () => {
+    if (!tokenAddress || isPaused) return false
+    return 15_000
+  },
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['chainStatus'],
+  queryFn: fetchChainStatus,
+  refetchInterval: 10_000,
+  networkMode: 'always',
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/solid/guides/prefetching.md b/mintlify/query/framework/solid/guides/prefetching.md
new file mode 100644
index 000000000..150607cdd
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/prefetching.md
@@ -0,0 +1,257 @@
+---
+id: prefetching
+title: Prefetching & Router Integration
+ref: docs/framework/react/guides/prefetching.md
+---
+
+[//]: # 'ExampleComponent'
+
+```tsx
+import { Switch, Match } from 'solid-js'
+
+function Article(props) {
+  const articleQuery = useQuery(() => ({
+    queryKey: ['article', props.id],
+    queryFn: getArticleById,
+  }))
+
+  return (
+    <Switch>
+      <Match when={articleQuery.isPending}>
+        Loading article...
+      </Match>
+      <Match when={articleQuery.isSuccess}>
+        <ArticleHeader articleData={articleQuery.data} />
+        <ArticleBody articleData={articleQuery.data} />
+        <Comments id={props.id} />
+      </Match>
+    </Switch>
+  )
+}
+
+function Comments(props) {
+  const commentsQuery = useQuery(() => ({
+    queryKey: ['article-comments', props.id],
+    queryFn: getArticleCommentsById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'ExampleComponent'
+[//]: # 'ExampleParentComponent'
+
+```tsx
+import { Switch, Match } from 'solid-js'
+
+function Article(props) {
+  const articleQuery = useQuery(() => ({
+    queryKey: ['article', props.id],
+    queryFn: getArticleById,
+  }))
+
+  // Prefetch
+  useQuery(() => ({
+    queryKey: ['article-comments', props.id],
+    queryFn: getArticleCommentsById,
+    // Optional optimization to avoid rerenders when this query changes:
+    notifyOnChangeProps: [],
+  }))
+
+  return (
+    <Switch>
+      <Match when={articleQuery.isPending}>
+        Loading article...
+      </Match>
+      <Match when={articleQuery.isSuccess}>
+        <ArticleHeader articleData={articleQuery.data} />
+        <ArticleBody articleData={articleQuery.data} />
+        <Comments id={props.id} />
+      </Match>
+    </Switch>
+  )
+}
+
+function Comments(props) {
+  const commentsQuery = useQuery(() => ({
+    queryKey: ['article-comments', props.id],
+    queryFn: getArticleCommentsById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'ExampleParentComponent'
+[//]: # 'Suspense'
+
+Another way is to prefetch inside of the query function. This makes sense if you know that every time an article is fetched it's very likely comments will also be needed. For this, we'll use `queryClient.prefetchQuery`:
+
+```tsx
+const queryClient = useQueryClient()
+const articleQuery = useQuery(() => ({
+  queryKey: ['article', id],
+  queryFn: (...args) => {
+    queryClient.prefetchQuery({
+      queryKey: ['article-comments', id],
+      queryFn: getArticleCommentsById,
+    })
+
+    return getArticleById(...args)
+  },
+}))
+```
+
+Prefetching in an effect also works:
+
+```tsx
+import { createEffect } from 'solid-js'
+
+const queryClient = useQueryClient()
+
+createEffect(() => {
+  queryClient.prefetchQuery({
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
+  })
+})
+```
+
+To recap, if you want to prefetch a query during the component lifecycle, there are a few different ways to do it, pick the one that suits your situation best:
+
+- Use `useQuery` and ignore the result
+- Prefetch inside the query function
+- Prefetch in an effect
+
+Let's look at a slightly more advanced case next.
+
+[//]: # 'Suspense'
+[//]: # 'ExampleConditionally1'
+
+```tsx
+import { lazy, Switch, Match, For } from 'solid-js'
+
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const feedQuery = useQuery(() => ({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  }))
+
+  return (
+    <Switch>
+      <Match when={feedQuery.isPending}>
+        Loading feed...
+      </Match>
+      <Match when={feedQuery.isSuccess}>
+        <For each={feedQuery.data}>
+          {(feedItem) => {
+            if (feedItem.type === 'GRAPH') {
+              return <GraphFeedItem feedItem={feedItem} />
+            }
+            return <StandardFeedItem feedItem={feedItem} />
+          }}
+        </For>
+      </Match>
+    </Switch>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem(props) {
+  const graphQuery = useQuery(() => ({
+    queryKey: ['graph', props.feedItem.id],
+    queryFn: getGraphDataById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally1'
+[//]: # 'ExampleConditionally2'
+
+```tsx
+function Feed() {
+  const queryClient = useQueryClient()
+  const feedQuery = useQuery(() => ({
+    queryKey: ['feed'],
+    queryFn: async (...args) => {
+      const feed = await getFeed(...args)
+
+      for (const feedItem of feed) {
+        if (feedItem.type === 'GRAPH') {
+          queryClient.prefetchQuery({
+            queryKey: ['graph', feedItem.id],
+            queryFn: getGraphDataById,
+          })
+        }
+      }
+
+      return feed
+    }
+  }))
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally2'
+[//]: # 'Router'
+
+## Router Integration
+
+Because data fetching in the component tree itself can easily lead to request waterfalls and the different fixes for that can be cumbersome as they accumulate throughout the application, an attractive way to do prefetching is integrating it at the router level.
+
+In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](/query/framework/solid/guides/ssr).
+
+For now, let's focus on the client side case and look at an example of how you can make this work with [TanStack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full Solid Query example](/router/framework/solid/examples/basic-solid-query-file-based) over in the [TanStack Router docs](https://tanstack.com/router/latest/docs).
+
+When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet.
+
+```tsx
+const queryClient = new QueryClient()
+const routerContext = new RouterContext()
+const rootRoute = routerContext.createRootRoute({
+  component: () => { ... }
+})
+
+const articleRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: 'article',
+  beforeLoad: () => {
+    return {
+      articleQueryOptions: { queryKey: ['article'], queryFn: fetchArticle },
+      commentsQueryOptions: { queryKey: ['comments'], queryFn: fetchComments },
+    }
+  },
+  loader: async ({
+    context: { queryClient },
+    routeContext: { articleQueryOptions, commentsQueryOptions },
+  }) => {
+    // Fetch comments asap, but don't block
+    queryClient.prefetchQuery(commentsQueryOptions)
+
+    // Don't render the route at all until article has been fetched
+    await queryClient.prefetchQuery(articleQueryOptions)
+  },
+  component: ({ useRouteContext }) => {
+    const { articleQueryOptions, commentsQueryOptions } = useRouteContext()
+    const articleQuery = useQuery(() => articleQueryOptions)
+    const commentsQuery = useQuery(() => commentsQueryOptions)
+
+    return (
+      ...
+    )
+  },
+  errorComponent: () => 'Oh crap!',
+})
+```
+
+Integration with other routers is also possible.
+
+[//]: # 'Router'
diff --git a/mintlify/query/framework/solid/guides/queries.md b/mintlify/query/framework/solid/guides/queries.md
new file mode 100644
index 000000000..05cb39a36
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/queries.md
@@ -0,0 +1,97 @@
+---
+id: queries
+title: Queries
+ref: docs/framework/react/guides/queries.md
+---
+
+[//]: # 'SubscribeDescription'
+
+To subscribe to a query in your components, call the `useQuery` function with at least:
+[//]: # 'SubscribeDescription'
+
+[//]: # 'Example'
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+function App() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  }))
+}
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+import { Switch, Match, For } from 'solid-js'
+
+function Todos() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  }))
+
+  return (
+    <Switch>
+      <Match when={todosQuery.isPending}>
+        <span>Loading...</span>
+      </Match>
+      <Match when={todosQuery.isError}>
+        <span>Error: {todosQuery.error.message}</span>
+      </Match>
+      <Match when={todosQuery.isSuccess}>
+        <ul>
+          <For each={todosQuery.data}>{(todo) => <li>{todo.title}</li>}</For>
+        </ul>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+import { Switch, Match, For } from 'solid-js'
+
+function Todos() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodoList,
+  }))
+
+  return (
+    <Switch>
+      <Match when={todosQuery.status === 'pending'}>
+        <span>Loading...</span>
+      </Match>
+      <Match when={todosQuery.status === 'error'}>
+        <span>Error: {todosQuery.error.message}</span>
+      </Match>
+      <Match when={todosQuery.status === 'success'}>
+        <ul>
+          <For each={todosQuery.data}>{(todo) => <li>{todo.title}</li>}</For>
+        </ul>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+[//]: # 'Example4'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/solid/guides/query-cancellation.md b/mintlify/query/framework/solid/guides/query-cancellation.md
new file mode 100644
index 000000000..f9284813c
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-cancellation.md
@@ -0,0 +1,165 @@
+---
+id: query-cancellation
+title: Query Cancellation
+ref: docs/framework/react/guides/query-cancellation.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+  }
+---
+
+[//]: # 'Example'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const todosResponse = await fetch('/todos', {
+      // Pass the signal to one fetch
+      signal,
+    })
+    const todos = await todosResponse.json()
+
+    const todoDetails = todos.map(async ({ details }) => {
+      const response = await fetch(details, {
+        // Or pass it to several
+        signal,
+      })
+      return response.json()
+    })
+
+    return Promise.all(todoDetails)
+  },
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+import axios from 'axios'
+
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) =>
+    axios.get('/todos', {
+      // Pass the signal to `axios`
+      signal,
+    }),
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+import axios from 'axios'
+
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    // Create a new CancelToken source for this request
+    const CancelToken = axios.CancelToken
+    const source = CancelToken.source()
+
+    const promise = axios.get('/todos', {
+      // Pass the source token to your request
+      cancelToken: source.token,
+    })
+
+    // Cancel the request if TanStack Query signals to abort
+    signal?.addEventListener('abort', () => {
+      source.cancel('Query was cancelled by TanStack Query')
+    })
+
+    return promise
+  },
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    return new Promise((resolve, reject) => {
+      var oReq = new XMLHttpRequest()
+      oReq.addEventListener('load', () => {
+        resolve(JSON.parse(oReq.responseText))
+      })
+      signal?.addEventListener('abort', () => {
+        oReq.abort()
+        reject()
+      })
+      oReq.open('GET', '/todos')
+      oReq.send()
+    })
+  },
+}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```tsx
+const client = new GraphQLClient(endpoint)
+
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    client.request({ document: query, signal })
+  },
+}))
+```
+
+[//]: # 'Example5'
+[//]: # 'Example6'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: ({ signal }) => {
+    const client = new GraphQLClient(endpoint, {
+      signal,
+    })
+    return client.request(query, variables)
+  },
+}))
+```
+
+[//]: # 'Example6'
+[//]: # 'Example7'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const resp = await fetch('/todos', { signal })
+    return resp.json()
+  },
+}))
+
+const queryClient = useQueryClient()
+
+return (
+  <button
+    onClick={(e) => {
+      e.preventDefault()
+      queryClient.cancelQueries({ queryKey: ['todos'] })
+    }}
+  >
+    Cancel
+  </button>
+)
+```
+
+[//]: # 'Example7'
+[//]: # 'Limitations'
+[//]: # 'Limitations'
diff --git a/mintlify/query/framework/solid/guides/query-functions.md b/mintlify/query/framework/solid/guides/query-functions.md
new file mode 100644
index 000000000..f612f0a94
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-functions.md
@@ -0,0 +1,81 @@
+---
+id: query-functions
+title: Query Functions
+ref: docs/framework/react/guides/query-functions.md
+---
+
+[//]: # 'Example'
+
+```tsx
+useQuery(() => ({ queryKey: ['todos'], queryFn: fetchAllTodos }))
+useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: () => fetchTodoById(todoId),
+}))
+useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    const data = await fetchTodoById(todoId)
+    return data
+  },
+}))
+useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+const todosQuery = useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    if (somethingGoesWrong) {
+      throw new Error('Oh no!')
+    }
+    if (somethingElseGoesWrong) {
+      return Promise.reject(new Error('Oh no!'))
+    }
+
+    return data
+  },
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['todos', todoId],
+  queryFn: async () => {
+    const response = await fetch('/todos/' + todoId)
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+    return response.json()
+  },
+}))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+function Todos(props) {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos', { status: props.status, page: props.page }],
+    queryFn: fetchTodoList,
+  }))
+}
+
+// Access the key, status and page variables in your query function!
+function fetchTodoList({ queryKey }) {
+  const [_key, { status, page }] = queryKey
+  return new Promise()
+}
+```
+
+[//]: # 'Example4'
diff --git a/mintlify/query/framework/solid/guides/query-invalidation.md b/mintlify/query/framework/solid/guides/query-invalidation.md
new file mode 100644
index 000000000..a6c7e1e90
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-invalidation.md
@@ -0,0 +1,15 @@
+---
+id: query-invalidation
+title: Query Invalidation
+ref: docs/framework/react/guides/query-invalidation.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+    'hooks': 'functions',
+  }
+---
diff --git a/mintlify/query/framework/solid/guides/query-keys.md b/mintlify/query/framework/solid/guides/query-keys.md
new file mode 100644
index 000000000..6bf37900f
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-keys.md
@@ -0,0 +1,71 @@
+---
+id: query-keys
+title: Query Keys
+ref: docs/framework/react/guides/query-keys.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+    'React Query Keys': 'TanStack Query Keys',
+  }
+---
+
+[//]: # 'Example'
+
+```tsx
+// A list of todos
+useQuery(() => ({ queryKey: ['todos'], ... }))
+
+// Something else, whatever!
+useQuery(() => ({ queryKey: ['something', 'special'], ... }))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+// An individual todo
+useQuery(() => ({ queryKey: ['todo', 5], ... }))
+
+// An individual todo in a "preview" format
+useQuery(() => ({ queryKey: ['todo', 5, { preview: true }], ...}))
+
+// A list of todos that are "done"
+useQuery(() => ({ queryKey: ['todos', { type: 'done' }], ... }))
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```tsx
+useQuery(() => ({ queryKey: ['todos', { status, page }], ... }))
+useQuery(() => ({ queryKey: ['todos', { page, status }], ...}))
+useQuery(() => ({ queryKey: ['todos', { page, status, other: undefined }], ... }))
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```tsx
+useQuery(() => ({ queryKey: ['todos', status, page], ... }))
+useQuery(() => ({ queryKey: ['todos', page, status], ...}))
+useQuery(() => ({ queryKey: ['todos', undefined, page, status], ...}))
+```
+
+[//]: # 'Example4'
+[//]: # 'Example5'
+
+```tsx
+function Todos(props) {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos', props.todoId],
+    queryFn: () => fetchTodoById(props.todoId),
+  }))
+}
+```
+
+[//]: # 'Example5'
diff --git a/mintlify/query/framework/solid/guides/query-options.md b/mintlify/query/framework/solid/guides/query-options.md
new file mode 100644
index 000000000..d5a625962
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-options.md
@@ -0,0 +1,56 @@
+---
+id: query-options
+title: Query Options
+ref: docs/framework/react/guides/query-options.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+  }
+---
+
+[//]: # 'Example1'
+
+```ts
+import { queryOptions } from '@tanstack/solid-query'
+
+function groupOptions(id: number) {
+  return queryOptions({
+    queryKey: ['groups', id],
+    queryFn: () => fetchGroups(id),
+    staleTime: 5 * 1000,
+  })
+}
+
+// usage:
+
+useQuery(() => groupOptions(1))
+useQueries(() => ({
+  queries: [groupOptions(1), groupOptions(2)],
+}))
+queryClient.prefetchQuery(groupOptions(23))
+queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
+```
+
+[//]: # 'Example1'
+[//]: # 'SelectDescription'
+
+You can still override some options at the component level. A very common and useful pattern is to create per-component `select` functions:
+
+[//]: # 'SelectDescription'
+[//]: # 'Example2'
+
+```ts
+// Type inference still works, so query.data will be the return type of select instead of queryFn
+
+const groupQuery = useQuery(() => ({
+  ...groupOptions(1),
+  select: (data) => data.groupName,
+}))
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/query-retries.md b/mintlify/query/framework/solid/guides/query-retries.md
new file mode 100644
index 000000000..9f7d89d32
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/query-retries.md
@@ -0,0 +1,14 @@
+---
+id: query-retries
+title: Query Retries
+ref: docs/framework/react/guides/query-retries.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+    'useQuery[(]': 'useQuery(() => ',
+    'useQueries[(]': 'useQueries(() => ',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+  }
+---
diff --git a/mintlify/query/framework/solid/guides/request-waterfalls.md b/mintlify/query/framework/solid/guides/request-waterfalls.md
new file mode 100644
index 000000000..fe3298a74
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/request-waterfalls.md
@@ -0,0 +1,209 @@
+---
+id: request-waterfalls
+title: Performance & Request Waterfalls
+ref: docs/framework/react/guides/request-waterfalls.md
+replace: { 'React Query': 'Solid Query' }
+---
+
+[//]: # 'AdvancedSSRLink'
+[//]: # 'AdvancedSSRLink'
+[//]: # 'DependentExample'
+
+```tsx
+// Get the user
+const userQuery = useQuery(() => ({
+  queryKey: ['user', email],
+  queryFn: getUserByEmail,
+}))
+
+const userId = () => userQuery.data?.id
+
+// Then get the user's projects
+const projectsQuery = useQuery(() => ({
+  queryKey: ['projects', userId()],
+  queryFn: getProjectsByUser,
+  // The query will not execute until the userId exists
+  enabled: !!userId(),
+}))
+```
+
+[//]: # 'DependentExample'
+[//]: # 'ServerComponentsNote1'
+[//]: # 'ServerComponentsNote1'
+[//]: # 'SuspenseSerial'
+[//]: # 'SuspenseSerial'
+[//]: # 'NestedIntro'
+
+Nested Component Waterfalls is when both a parent and a child component contains queries, and the parent does not render the child until its query is done.
+
+[//]: # 'NestedIntro'
+[//]: # 'NestedExample'
+
+```tsx
+import { Switch, Match } from 'solid-js'
+
+function Article(props) {
+  const articleQuery = useQuery(() => ({
+    queryKey: ['article', props.id],
+    queryFn: getArticleById,
+  }))
+
+  return (
+    <Switch>
+      <Match when={articleQuery.isPending}>
+        Loading article...
+      </Match>
+      <Match when={articleQuery.isSuccess}>
+        <ArticleHeader articleData={articleQuery.data} />
+        <ArticleBody articleData={articleQuery.data} />
+        <Comments id={props.id} />
+      </Match>
+    </Switch>
+  )
+}
+
+function Comments(props) {
+  const commentsQuery = useQuery(() => ({
+    queryKey: ['article-comments', props.id],
+    queryFn: getArticleCommentsById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'NestedExample'
+[//]: # 'NestedHoistedExample'
+
+```tsx
+import { Switch, Match, Show } from 'solid-js'
+
+function Article(props) {
+  const articleQuery = useQuery(() => ({
+    queryKey: ['article', props.id],
+    queryFn: getArticleById,
+  }))
+
+  const commentsQuery = useQuery(() => ({
+    queryKey: ['article-comments', props.id],
+    queryFn: getArticleCommentsById,
+  }))
+
+  return (
+    <Switch>
+      <Match when={articleQuery.isPending}>Loading article...</Match>
+      <Match when={articleQuery.isSuccess}>
+        <ArticleHeader articleData={articleQuery.data} />
+        <ArticleBody articleData={articleQuery.data} />
+        <Switch>
+          <Match when={commentsQuery.isPending}>Loading comments...</Match>
+          <Match when={commentsQuery.isSuccess}>
+            <Comments commentsData={commentsQuery.data} />
+          </Match>
+        </Switch>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+[//]: # 'NestedHoistedExample'
+[//]: # 'NestedHoistedOutro'
+
+The two queries will now fetch in parallel.
+
+[//]: # 'NestedHoistedOutro'
+[//]: # 'DependentNestedExample'
+
+```tsx
+import { Switch, Match, For } from 'solid-js'
+
+function Feed() {
+  const feedQuery = useQuery(() => ({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  }))
+
+  return (
+    <Switch>
+      <Match when={feedQuery.isPending}>
+        Loading feed...
+      </Match>
+      <Match when={feedQuery.isSuccess}>
+        <For each={feedQuery.data}>
+          {(feedItem) => {
+            if (feedItem.type === 'GRAPH') {
+              return <GraphFeedItem feedItem={feedItem} />
+            }
+            return <StandardFeedItem feedItem={feedItem} />
+          }}
+        </For>
+      </Match>
+    </Switch>
+  )
+}
+
+function GraphFeedItem(props) {
+  const graphQuery = useQuery(() => ({
+    queryKey: ['graph', props.feedItem.id],
+    queryFn: getGraphDataById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'DependentNestedExample'
+[//]: # 'ServerComponentsNote2'
+
+In this example, we can't trivially flatten the waterfall by just hoisting the query to the parent, or even adding prefetching. Just like the dependent query example at the beginning of this guide, one option is to refactor our API to include the graph data in the `getFeed` query.
+
+[//]: # 'ServerComponentsNote2'
+[//]: # 'LazyExample'
+
+```tsx
+import { lazy, Switch, Match, For } from 'solid-js'
+
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const feedQuery = useQuery(() => ({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  }))
+
+  return (
+    <Switch>
+      <Match when={feedQuery.isPending}>
+        Loading feed...
+      </Match>
+      <Match when={feedQuery.isSuccess}>
+        <For each={feedQuery.data}>
+          {(feedItem) => {
+            if (feedItem.type === 'GRAPH') {
+              return <GraphFeedItem feedItem={feedItem} />
+            }
+            return <StandardFeedItem feedItem={feedItem} />
+          }}
+        </For>
+      </Match>
+    </Switch>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem(props) {
+  const graphQuery = useQuery(() => ({
+    queryKey: ['graph', props.feedItem.id],
+    queryFn: getGraphDataById,
+  }))
+
+  ...
+}
+```
+
+[//]: # 'LazyExample'
+[//]: # 'ServerComponentsNote3'
+[//]: # 'ServerComponentsNote3'
diff --git a/mintlify/query/framework/solid/guides/scroll-restoration.md b/mintlify/query/framework/solid/guides/scroll-restoration.md
new file mode 100644
index 000000000..55ceb296f
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/scroll-restoration.md
@@ -0,0 +1,6 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+ref: docs/framework/react/guides/scroll-restoration.md
+replace: { 'React Router’s ScrollRestoration, ': '' }
+---
diff --git a/mintlify/query/framework/solid/guides/ssr.md b/mintlify/query/framework/solid/guides/ssr.md
new file mode 100644
index 000000000..f8f8eb43c
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/ssr.md
@@ -0,0 +1,6 @@
+---
+id: ssr
+title: SSR
+---
+
+Will come soon
diff --git a/mintlify/query/framework/solid/guides/suspense.md b/mintlify/query/framework/solid/guides/suspense.md
new file mode 100644
index 000000000..61e11ad38
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/suspense.md
@@ -0,0 +1,41 @@
+---
+id: suspense
+title: Suspense
+---
+
+Solid Query can also be used with Solid's [Suspense](https://docs.solidjs.com/reference/components/suspense) API's.
+
+To do that you need to wrap your suspendable component with `Suspense` component provided by Solid
+
+```tsx
+import { Suspense } from 'solid-js'
+;<Suspense fallback={<LoadingSpinner />}>
+  <SuspendableComponent />
+</Suspense>
+```
+
+You can use async `suspense` function that is provided by `solid-query`.
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+const todoFetcher = async () =>
+  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
+    response.json(),
+  )
+
+function SuspendableComponent() {
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: todoFetcher,
+  }))
+
+  // Accessing todosQuery.data directly inside a <Suspense> boundary
+  // automatically triggers suspension until data is ready
+  return <div>Data: {JSON.stringify(todosQuery.data)}</div>
+}
+```
+
+## Fetch-on-render vs Render-as-you-fetch
+
+Out of the box, Solid Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](/query/framework/solid/guides/prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components.
diff --git a/mintlify/query/framework/solid/guides/testing.md b/mintlify/query/framework/solid/guides/testing.md
new file mode 100644
index 000000000..38d58cc3c
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/testing.md
@@ -0,0 +1,4 @@
+---
+id: testing
+title: Testing
+---
diff --git a/mintlify/query/framework/solid/guides/updates-from-mutation-responses.md b/mintlify/query/framework/solid/guides/updates-from-mutation-responses.md
new file mode 100644
index 000000000..ffa1fb5c7
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/updates-from-mutation-responses.md
@@ -0,0 +1,50 @@
+---
+id: updates-from-mutation-responses
+title: Updates from Mutation Responses
+ref: docs/framework/react/guides/updates-from-mutation-responses.md
+replace: { 'hook': 'function' }
+---
+
+[//]: # 'Example'
+
+```tsx
+const queryClient = useQueryClient()
+
+const mutation = useMutation(() => ({
+  mutationFn: editTodo,
+  onSuccess: (data) => {
+    queryClient.setQueryData(['todo', { id: 5 }], data)
+  },
+}))
+
+mutation.mutate({
+  id: 5,
+  name: 'Do the laundry',
+})
+
+// The query below will be updated with the response from the
+// successful mutation
+const todoQuery = useQuery(() => ({
+  queryKey: ['todo', { id: 5 }],
+  queryFn: fetchTodoById,
+}))
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+const useMutateTodo = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(() => ({
+    mutationFn: editTodo,
+    // Notice the second argument is the variables object that the `mutate` function receives
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(['todo', { id: variables.id }], data)
+    },
+  }))
+}
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/solid/guides/window-focus-refetching.md b/mintlify/query/framework/solid/guides/window-focus-refetching.md
new file mode 100644
index 000000000..eaec584ee
--- /dev/null
+++ b/mintlify/query/framework/solid/guides/window-focus-refetching.md
@@ -0,0 +1,20 @@
+---
+id: window-focus-refetching
+title: Window Focus Refetching
+ref: docs/framework/react/guides/window-focus-refetching.md
+replace: { '@tanstack/react-query': '@tanstack/solid-query' }
+---
+
+[//]: # 'Example2'
+
+```tsx
+useQuery(() => ({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  refetchOnWindowFocus: false,
+}))
+```
+
+[//]: # 'Example2'
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/solid/installation.md b/mintlify/query/framework/solid/installation.md
new file mode 100644
index 000000000..4cc797946
--- /dev/null
+++ b/mintlify/query/framework/solid/installation.md
@@ -0,0 +1,59 @@
+---
+id: installation
+title: Installation
+---
+
+You can install Solid Query via [NPM](https://npmjs.com/),
+or a good ol' `<script>` via
+[ESM.sh](https://esm.sh/).
+
+### NPM
+
+```bash
+npm i @tanstack/solid-query
+```
+
+or
+
+```bash
+pnpm add @tanstack/solid-query
+```
+
+or
+
+```bash
+yarn add @tanstack/solid-query
+```
+
+or
+
+```bash
+bun add @tanstack/solid-query
+```
+
+> Wanna give it a spin before you download? Try out the [simple](/query/framework/solid/examples/simple) or [basic](/query/framework/solid/examples/basic) examples!
+
+### CDN
+
+If you're not using a module bundler or package manager, you can also use this library via an ESM-compatible CDN such as [ESM.sh](https://esm.sh/). Simply add a `<script type="module">` tag to the bottom of your HTML file:
+
+```html
+<script type="module">
+  import { QueryClient } from 'https://esm.sh/@tanstack/solid-query'
+</script>
+```
+
+### Requirements
+
+Solid Query is optimized for modern browsers. It is compatible with the following browsers config
+
+```
+Chrome >= 91
+Firefox >= 90
+Edge >= 91
+Safari >= 15
+iOS >= 15
+Opera >= 77
+```
+
+> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves.
diff --git a/mintlify/query/framework/solid/overview.md b/mintlify/query/framework/solid/overview.md
new file mode 100644
index 000000000..e7b10d488
--- /dev/null
+++ b/mintlify/query/framework/solid/overview.md
@@ -0,0 +1,138 @@
+---
+id: overview
+title: Overview
+---
+
+Solid Query is the official SolidJS adapter of TanStack Query that makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.
+
+## Motivation
+
+SolidJS has been gaining popularity as a fast, reactive, and declarative library for building user interfaces. It comes packed with a lot of features out of the box. Primitives like `createSignal`, `createStore` are great for managing client state. And, unlike other UI libraries, SolidJS has strong opinions about managing asynchronous data. The `createResource` API is a great primitive for handling server state in SolidJS apps. A `resource` is a special kind of signal that can be used to trigger `Suspense` boundaries when the data is in a loading state.
+
+```tsx
+import { createResource, ErrorBoundary, Suspense } from 'solid-js'
+import { render } from 'solid-js/web'
+
+function App() {
+  const [repository] = createResource(async () => {
+    const result = await fetch('https://api.github.com/repos/TanStack/query')
+    if (!result.ok) throw new Error('Failed to fetch data')
+    return result.json()
+  })
+
+  return (
+    <div>
+      <div>Static Content</div>
+      {/* An error while fetching will be caught by the ErrorBoundary */}
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        {/* Suspense will trigger a loading state while the data is being fetched */}
+        <Suspense fallback={<div>Loading...</div>}>
+          <div>{repository()?.updated_at}</div>
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
+```
+
+This is amazing! In a few lines of code, you can fetch data from an API and handle loading and error states. But, as your application grows in complexity, you will need more features to manage server state effectively. This is because **server state is totally different from client state**. For starters, server state:
+
+- Is persisted remotely in a location you do not control or own
+- Requires asynchronous APIs for fetching and updating
+- Implies shared ownership and can be changed by other people without your knowledge
+- Can potentially become "out of date" in your applications if you're not careful
+
+Once you grasp the nature of server state in your application, **even more challenges will arise** as you go, for example:
+
+- Caching... (possibly the hardest thing to do in programming)
+- Deduping multiple requests for the same data into a single request
+- Updating "out of date" data in the background
+- Knowing when data is "out of date"
+- Reflecting updates to data as quickly as possible
+- Performance optimizations like pagination and lazy loading data
+- Managing memory and garbage collection of server state
+- Memoizing query results with structural sharing
+
+This is where **Solid Query** comes in. The library wraps around `createResource` and provides a set of hooks and utilities to manage server state effectively. It works amazingly well **out-of-the-box, with zero-config, and can be customized** to your liking as your application grows.
+
+On a more technical note, Solid Query will likely:
+
+- Help you remove **many** lines of complicated and misunderstood code from your application and replace with just a handful of lines of Solid Query logic.
+- Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
+- Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
+- Potentially help you save on bandwidth and increase memory performance
+
+## Enough talk, show me some code already!
+
+In the example below, you can see Solid Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
+
+```tsx
+import { ErrorBoundary, Suspense } from 'solid-js'
+import {
+  useQuery,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/solid-query'
+
+function App() {
+  const repositoryQuery = useQuery(() => ({
+    queryKey: ['TanStack Query'],
+    queryFn: async () => {
+      const result = await fetch('https://api.github.com/repos/TanStack/query')
+      if (!result.ok) throw new Error('Failed to fetch data')
+      return result.json()
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    throwOnError: true, // Throw an error if the query fails
+  }))
+
+  return (
+    <div>
+      <div>Static Content</div>
+      {/* An error while fetching will be caught by the ErrorBoundary */}
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        {/* Suspense will trigger a loading state while the data is being fetched */}
+        <Suspense fallback={<div>Loading...</div>}>
+          {/* 
+            The `data` property on a query is a SolidJS resource  
+            so it will work with Suspense and transitions out of the box! 
+          */}
+          <div>{repositoryQuery.data?.updated_at}</div>
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+const client = new QueryClient()
+
+render(
+  () => (
+    <QueryClientProvider client={client}>
+      <App />
+    </QueryClientProvider>
+  ),
+  root!,
+)
+```
+
+## Well, that seems like more lines of code to do the same thing?
+
+Yes it is! But, these few lines of code unlock a whole new world of possibilities. In the example above, your query is cached for 5 minutes, meaning that if a new component mounts anywhere in your app that uses the same query within 5 minutes, it will not re-fetch the data but instead use the cached data. This is just one of the many features that Solid Query provides out of the box. Some other features include:
+
+- **Automatic Refetching**: Queries automatically refetch in the background when they become "stale" (out of date according to the `staleTime` option)
+- **Automatic Caching**: Queries are cached by default and shared across your application
+- **Request Deduplication**: Multiple components can share the same query and make one request
+- **Automatic Garbage Collection**: Queries are garbage collected when they are no longer needed
+- **Window Focus Refetching**: Queries automatically refetch when the application comes back into focus
+- **Pagination**: Built-in support for pagination
+- **Request Cancellation**: Automatically cancels outdated or unwanted requests
+- **Polling/Realtime**: It's easy to add polling or realtime updates to your queries with a simple `refetchInterval` option
+- **SSR Support**: Solid Query works great with server-side rendering
+- **Optimistic Updates**: Easily update your cache with optimistic updates
+- **And much more...**
diff --git a/mintlify/query/framework/solid/plugins/broadcastQueryClient.md b/mintlify/query/framework/solid/plugins/broadcastQueryClient.md
new file mode 100644
index 000000000..32cb1e50c
--- /dev/null
+++ b/mintlify/query/framework/solid/plugins/broadcastQueryClient.md
@@ -0,0 +1,5 @@
+---
+id: broadcastQueryClient
+title: broadcastQueryClient (Experimental)
+ref: docs/framework/react/plugins/broadcastQueryClient.md
+---
diff --git a/mintlify/query/framework/solid/plugins/createPersister.md b/mintlify/query/framework/solid/plugins/createPersister.md
new file mode 100644
index 000000000..d207c0aa5
--- /dev/null
+++ b/mintlify/query/framework/solid/plugins/createPersister.md
@@ -0,0 +1,6 @@
+---
+id: createPersister
+title: experimental_createPersister
+ref: docs/framework/react/plugins/createPersister.md
+replace: { 'react-query': 'solid-query' }
+---
diff --git a/mintlify/query/framework/solid/quick-start.md b/mintlify/query/framework/solid/quick-start.md
new file mode 100644
index 000000000..5053d9a58
--- /dev/null
+++ b/mintlify/query/framework/solid/quick-start.md
@@ -0,0 +1,217 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+The `@tanstack/solid-query` package provides a 1st-class API for using TanStack Query with SolidJS.
+
+## Example
+
+```tsx
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/solid-query'
+import { Switch, Match, For } from 'solid-js'
+
+const queryClient = new QueryClient()
+
+function Example() {
+  const query = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  }))
+
+  return (
+    <div>
+      <Switch>
+        <Match when={query.isPending}>
+          <p>Loading...</p>
+        </Match>
+        <Match when={query.isError}>
+          <p>Error: {query.error.message}</p>
+        </Match>
+        <Match when={query.isSuccess}>
+          <For each={query.data}>{(todo) => <p>{todo.title}</p>}</For>
+        </Match>
+      </Switch>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+```
+
+## Important Differences between Solid Query & React Query
+
+Solid Query offers an API similar to React Query, but there are some key differences to be mindful of.
+
+- Arguments to `solid-query` primitives (like `useQuery`, `useMutation`, `useIsFetching`) are functions, so that they can be tracked in a reactive scope.
+
+```tsx
+// ❌ react version
+useQuery({
+  queryKey: ['todos', todo],
+  queryFn: fetchTodos,
+})
+
+// ✅ solid version
+useQuery(() => ({
+  queryKey: ['todos', todo],
+  queryFn: fetchTodos,
+}))
+```
+
+- Suspense works for queries out of the box if you access the query data inside a `<Suspense>` boundary.
+
+```tsx
+import { For, Suspense } from 'solid-js'
+
+function Example() {
+  const query = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  }))
+  return (
+    <div>
+      {/* ✅ Will trigger loading fallback, data accessed in a suspense boundary. */}
+      <Suspense fallback={'Loading...'}>
+        <For each={query.data}>{(todo) => <div>{todo.title}</div>}</For>
+      </Suspense>
+      {/* ❌ Will not trigger loading fallback, data not accessed in a suspense boundary. */}
+      <For each={query.data}>{(todo) => <div>{todo.title}</div>}</For>
+    </div>
+  )
+}
+```
+
+- Solid Query primitives do not support destructuring. The return value from these functions is a store, and their properties are only tracked in a reactive context.
+
+```tsx
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/solid-query'
+import { Match, Switch } from 'solid-js'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+
+function Example() {
+  // ❌ react version -- supports destructing outside reactive context
+  // const { isPending, error, data } = useQuery({
+  //   queryKey: ['repoData'],
+  //   queryFn: () =>
+  //     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
+  //       (res) => res.json()
+  //     ),
+  // })
+
+  // ✅ solid version -- does not support destructuring outside reactive context
+  const query = useQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
+        (res) => res.json(),
+      ),
+  }))
+
+  // ✅ access query properties in JSX reactive context
+  return (
+    <Switch>
+      <Match when={query.isPending}>Loading...</Match>
+      <Match when={query.isError}>Error: {query.error.message}</Match>
+      <Match when={query.isSuccess}>
+        <div>
+          <h1>{query.data.name}</h1>
+          <p>{query.data.description}</p>
+          <strong>👀 {query.data.subscribers_count}</strong>{' '}
+          <strong>✨ {query.data.stargazers_count}</strong>{' '}
+          <strong>🍴 {query.data.forks_count}</strong>
+        </div>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+- Signals and store values can be passed in directly to function arguments. Solid Query will update the query `store` automatically.
+
+```tsx
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/solid-query'
+import { createSignal, For } from 'solid-js'
+
+const queryClient = new QueryClient()
+
+function Example() {
+  const [enabled, setEnabled] = createSignal(false)
+  const [todo, setTodo] = createSignal(0)
+
+  // ✅ passing a signal directly is safe and observers update
+  // automatically when the value of a signal changes
+  const todosQuery = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    enabled: enabled(),
+  }))
+
+  const todoDetailsQuery = useQuery(() => ({
+    queryKey: ['todo', todo()],
+    queryFn: fetchTodo,
+    enabled: todo() > 0,
+  }))
+
+  return (
+    <div>
+      <Switch>
+        <Match when={todosQuery.isPending}>
+          <p>Loading...</p>
+        </Match>
+        <Match when={todosQuery.isError}>
+          <p>Error: {todosQuery.error.message}</p>
+        </Match>
+        <Match when={todosQuery.isSuccess}>
+          <For each={todosQuery.data}>
+            {(todo) => (
+              <button onClick={() => setTodo(todo.id)}>{todo.title}</button>
+            )}
+          </For>
+        </Match>
+      </Switch>
+      <button onClick={() => setEnabled(!enabled())}>Toggle enabled</button>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+```
+
+- Errors can be caught and reset using SolidJS' native `ErrorBoundary` component.
+  Set `throwOnError` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary`
+
+- Since Property tracking is handled through Solid's fine grained reactivity, options like `notifyOnChangeProps` are not needed
diff --git a/mintlify/query/framework/solid/reference/hydration.md b/mintlify/query/framework/solid/reference/hydration.md
new file mode 100644
index 000000000..77b37b1c8
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/hydration.md
@@ -0,0 +1,9 @@
+---
+id: hydration
+title: hydration
+ref: docs/framework/react/reference/hydration.md
+replace: { '@tanstack/react-query': '@tanstack/solid-query' }
+---
+
+[//]: # 'HydrationBoundary'
+[//]: # 'HydrationBoundary'
diff --git a/mintlify/query/framework/solid/reference/infiniteQueryOptions.md b/mintlify/query/framework/solid/reference/infiniteQueryOptions.md
new file mode 100644
index 000000000..fa4b38aae
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/infiniteQueryOptions.md
@@ -0,0 +1,5 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+ref: docs/framework/react/reference/infiniteQueryOptions.md
+---
diff --git a/mintlify/query/framework/solid/reference/mutationOptions.md b/mintlify/query/framework/solid/reference/mutationOptions.md
new file mode 100644
index 000000000..b34296ad5
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/mutationOptions.md
@@ -0,0 +1,5 @@
+---
+id: mutationOptions
+title: mutationOptions
+ref: docs/framework/react/reference/mutationOptions.md
+---
diff --git a/mintlify/query/framework/solid/reference/queryOptions.md b/mintlify/query/framework/solid/reference/queryOptions.md
new file mode 100644
index 000000000..401cf8d10
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/queryOptions.md
@@ -0,0 +1,5 @@
+---
+id: queryOptions
+title: queryOptions
+ref: docs/framework/react/reference/queryOptions.md
+---
diff --git a/mintlify/query/framework/solid/reference/useInfiniteQuery.md b/mintlify/query/framework/solid/reference/useInfiniteQuery.md
new file mode 100644
index 000000000..48f042521
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useInfiniteQuery.md
@@ -0,0 +1,11 @@
+---
+id: useInfiniteQuery
+title: useInfiniteQuery
+ref: docs/framework/react/reference/useInfiniteQuery.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useInfiniteQuery[(]': 'useInfiniteQuery(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+  }
+---
diff --git a/mintlify/query/framework/solid/reference/useIsFetching.md b/mintlify/query/framework/solid/reference/useIsFetching.md
new file mode 100644
index 000000000..ba7ffeb35
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useIsFetching.md
@@ -0,0 +1,6 @@
+---
+id: useIsFetching
+title: useIsFetching
+ref: docs/framework/react/reference/useIsFetching.md
+replace: { '@tanstack/react-query': '@tanstack/solid-query' }
+---
diff --git a/mintlify/query/framework/solid/reference/useIsMutating.md b/mintlify/query/framework/solid/reference/useIsMutating.md
new file mode 100644
index 000000000..42c3e3fa2
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useIsMutating.md
@@ -0,0 +1,6 @@
+---
+id: useIsMutating
+title: useIsMutating
+ref: docs/framework/react/reference/useIsMutating.md
+replace: { '@tanstack/react-query': '@tanstack/solid-query' }
+---
diff --git a/mintlify/query/framework/solid/reference/useMutation.md b/mintlify/query/framework/solid/reference/useMutation.md
new file mode 100644
index 000000000..c91bac8d6
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useMutation.md
@@ -0,0 +1,11 @@
+---
+id: useMutation
+title: useMutation
+ref: docs/framework/react/reference/useMutation.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+  }
+---
diff --git a/mintlify/query/framework/solid/reference/useMutationState.md b/mintlify/query/framework/solid/reference/useMutationState.md
new file mode 100644
index 000000000..57775a882
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useMutationState.md
@@ -0,0 +1,11 @@
+---
+id: useMutationState
+title: useMutationState
+ref: docs/framework/react/reference/useMutationState.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useMutationState[(]': 'useMutationState(() => ',
+    'useMutation[(]': 'useMutation(() => ',
+  }
+---
diff --git a/mintlify/query/framework/solid/reference/useQueries.md b/mintlify/query/framework/solid/reference/useQueries.md
new file mode 100644
index 000000000..4233cfeef
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useQueries.md
@@ -0,0 +1,10 @@
+---
+id: useQueries
+title: useQueries
+ref: docs/framework/react/reference/useQueries.md
+replace:
+  {
+    '@tanstack/react-query': '@tanstack/solid-query',
+    'useQueries[(]': 'useQueries(() => ',
+  }
+---
diff --git a/mintlify/query/framework/solid/reference/useQuery.md b/mintlify/query/framework/solid/reference/useQuery.md
new file mode 100644
index 000000000..dc6eb3c1c
--- /dev/null
+++ b/mintlify/query/framework/solid/reference/useQuery.md
@@ -0,0 +1,374 @@
+---
+id: useQuery
+title: useQuery
+---
+
+```tsx
+const {
+  data,
+  dataUpdatedAt,
+  error,
+  errorUpdatedAt,
+  failureCount,
+  failureReason,
+  fetchStatus,
+  isError,
+  isFetched,
+  isFetchedAfterMount,
+  isFetching,
+  isInitialLoading,
+  isLoading,
+  isLoadingError,
+  isPaused,
+  isPending,
+  isPlaceholderData,
+  isRefetchError,
+  isRefetching,
+  isStale,
+  isSuccess,
+  refetch,
+  status,
+} = useQuery(
+  () => ({
+    queryKey,
+    queryFn,
+    enabled,
+    select,
+    placeholderData,
+    deferStream,
+    reconcile,
+    gcTime,
+    networkMode,
+    initialData,
+    initialDataUpdatedAt,
+    meta,
+    queryKeyHashFn,
+    refetchInterval,
+    refetchIntervalInBackground,
+    refetchOnMount,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+    retry,
+    retryOnMount,
+    retryDelay,
+    staleTime,
+    throwOnError,
+  }),
+  () => queryClient,
+)
+```
+
+## Usage example
+
+Here are some examples of how to use the `useQuery` primitive in Solid Query.
+
+### Basic
+
+The most basic usage of `useQuery` is to create a query that fetches data from an API.
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+function App() {
+  const todos = useQuery(() => ({
+    queryKey: 'todos',
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      if (!response.ok) {
+        throw new Error('Failed to fetch todos')
+      }
+      return response.json()
+    },
+  }))
+
+  return (
+    <div>
+      <Show when={todos.isError}>
+        <div>Error: {todos.error.message}</div>
+      </Show>
+      <Show when={todos.isLoading}>
+        <div>Loading...</div>
+      </Show>
+      <Show when={todos.isSuccess}>
+        <div>
+          <div>Todos:</div>
+          <ul>
+            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
+          </ul>
+        </div>
+      </Show>
+    </div>
+  )
+}
+```
+
+### Reactive Options
+
+The reason why `useQuery` accepts a function that returns an object is to allow for reactive options. This is useful when query options depend on other values/signals that might change over time. Solid Query can track the passed function in a reactive scope and re-run it whenever the dependencies change.
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+function App() {
+  const [filter, setFilter] = createSignal('all')
+
+  const todos = useQuery(() => ({
+    queryKey: ['todos', filter()],
+    queryFn: async () => {
+      const response = await fetch(`/api/todos?filter=${filter()}`)
+      if (!response.ok) {
+        throw new Error('Failed to fetch todos')
+      }
+      return response.json()
+    },
+  }))
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => setFilter('all')}>All</button>
+        <button onClick={() => setFilter('active')}>Active</button>
+        <button onClick={() => setFilter('completed')}>Completed</button>
+      </div>
+      <Show when={todos.isError}>
+        <div>Error: {todos.error.message}</div>
+      </Show>
+      <Show when={todos.isLoading}>
+        <div>Loading...</div>
+      </Show>
+      <Show when={todos.isSuccess}>
+        <div>
+          <div>Todos:</div>
+          <ul>
+            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
+          </ul>
+        </div>
+      </Show>
+    </div>
+  )
+}
+```
+
+### Usage with `Suspense`
+
+`useQuery` supports triggering SolidJS `Suspense` and `ErrorBoundary` components when the query is in a pending or error state. This allows you to easily handle loading and error states in your components.
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+function App() {
+  const todos = useQuery(() => ({
+    queryKey: 'todos',
+    queryFn: async () => {
+      const response = await fetch('/api/todos')
+      if (!response.ok) {
+        throw new Error('Failed to fetch todos')
+      }
+      return response.json()
+    },
+    throwOnError: true,
+  }))
+
+  return (
+    <ErrorBoundary fallback={<div>Error: {todos.error.message}</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <div>
+          <div>Todos:</div>
+          <ul>
+            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
+          </ul>
+        </div>
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+## `useQuery` Parameters
+
+- ### Query Options - `Accessor<QueryOptions>`
+  - ##### `queryKey: unknown[]`
+    - **Required**
+    - The query key to use for this query.
+    - The query key will be hashed into a stable hash. See [Query Keys](/query/framework/solid/guides/query-keys) for more information.
+    - The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
+  - ##### `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+    - **Required, but only if no default query function has been defined** See [Default Query Function](/query/framework/solid/guides/default-query-function) for more information.
+    - The function that the query will use to request data.
+    - Receives a [QueryFunctionContext](/query/framework/solid/guides/query-functions#queryfunctioncontext)
+    - Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`.
+  - ##### `enabled: boolean`
+    - Set this to `false` to disable this query from automatically running.
+    - Can be used for [Dependent Queries](/query/framework/solid/guides/dependent-queries) for more information.
+  - ##### `select: (data: TData) => unknown`
+    - Optional
+    - This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache.
+    - The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, wrap the function in `useCallback`.
+  - ##### `placeholderData: TData | (previousValue: TData | undefined; previousQuery: Query | undefined,) => TData`
+    - Optional
+    - If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `pending` state.
+    - `placeholderData` is **not persisted** to the cache
+    - If you provide a function for `placeholderData`, as a first argument you will receive previously watched query data if available, and the second argument will be the complete previousQuery instance.
+  - ##### `deferStream: boolean`
+    - Optional
+    - Defaults to `false`
+    - Only applicable while rendering queries on the server with streaming.
+    - Set `deferStream` to `true` to wait for the query to resolve on the server before flushing the stream.
+    - This can be useful to avoid sending a loading state to the client before the query has resolved.
+  - ##### `reconcile: false | string | ((oldData: TData | undefined, newData: TData) => TData)`
+    - Optional
+    - Defaults to `false`
+    - Set this to a string to enable reconciliation between query results based on the string key.
+    - Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom reconciliation logic.
+  - ##### `gcTime: number | Infinity`
+    - Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR
+    - The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.
+    - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](/query/reference/timeoutManager#timeoutmanagersettimeoutprovider).
+    - If set to `Infinity`, will disable garbage collection
+  - ##### `networkMode: 'online' | 'always' | 'offlineFirst'`
+    - optional
+    - defaults to `'online'`
+    - see [Network Mode](/query/framework/solid/guides/network-mode) for more information.
+  - ##### `initialData: TData | () => TData`
+    - Optional
+    - If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet)
+    - If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initialData
+    - Initial data is considered stale by default unless a `staleTime` has been set.
+    - `initialData` **is persisted** to the cache
+  - ##### `initialDataUpdatedAt: number | (() => number | undefined)`
+    - Optional
+    - If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.
+  - ##### `meta: Record<string, unknown>`
+    - Optional
+    - If set, stores additional information on the query cache entry that can be used as needed. It will be accessible wherever the `query` is available, and is also part of the `QueryFunctionContext` provided to the `queryFn`.
+  - ##### `queryKeyHashFn: (queryKey: QueryKey) => string`
+    - Optional
+    - If specified, this function is used to hash the `queryKey` to a string.
+  - ##### `refetchInterval: number | false | ((query: Query) => number | false | undefined)`
+    - Optional
+    - If set to a number, all queries will continuously refetch at this frequency in milliseconds
+    - If set to a function, the function will be executed with the query to compute a frequency
+  - ##### `refetchIntervalInBackground: boolean`
+    - Optional
+    - If set to `true`, queries that are set to continuously refetch with a `refetchInterval` will continue to refetch while their tab/window is in the background
+  - ##### `refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")`
+    - Optional
+    - Defaults to `true`
+    - If set to `true`, the query will refetch on mount if the data is stale.
+    - If set to `false`, the query will not refetch on mount.
+    - If set to `"always"`, the query will always refetch on mount.
+    - If set to a function, the function will be executed with the query to compute the value
+  - ##### `refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")`
+    - Optional
+    - Defaults to `true`
+    - If set to `true`, the query will refetch on window focus if the data is stale.
+    - If set to `false`, the query will not refetch on window focus.
+    - If set to `"always"`, the query will always refetch on window focus.
+    - If set to a function, the function will be executed with the query to compute the value
+  - ##### `refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")`
+    - Optional
+    - Defaults to `true`
+    - If set to `true`, the query will refetch on reconnect if the data is stale.
+    - If set to `false`, the query will not refetch on reconnect.
+    - If set to `"always"`, the query will always refetch on reconnect.
+    - If set to a function, the function will be executed with the query to compute the value
+  - ##### `retry: boolean | number | (failureCount: number, error: TError) => boolean`
+    - If `false`, failed queries will not retry by default.
+    - If `true`, failed queries will retry infinitely.
+    - If set to a `number`, e.g. `3`, failed queries will retry until the failed query count meets that number.
+    - defaults to `3` on the client and `0` on the server
+  - ##### `retryOnMount: boolean | (query: Query) => boolean`
+    - If set to `false`, the query will not be retried on mount if it contains an error and has no data. Defaults to `true`.
+    - If set to a function, the function will be executed with the query to compute the value.
+  - ##### `retryDelay: number | (retryAttempt: number, error: TError) => number`
+    - This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds.
+    - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff.
+    - A function like `attempt => attempt * 1000` applies linear backoff.
+  - ##### `staleTime: number | Infinity`
+    - Optional
+    - Defaults to `0`
+    - The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.
+    - If set to `Infinity`, the data will never be considered stale
+  - ##### `throwOnError: undefined | boolean | (error: TError, query: Query) => boolean`
+    - Set this to `true` if you want errors to be thrown in the render phase and propagate to the nearest error boundary
+    - Set this to `false` to disable `suspense`'s default behavior of throwing errors to the error boundary.
+    - If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`)
+
+- ### Query Client - `Accessor<QueryClient>`
+  - Optional
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+
+## `useQuery` Return Value - `Store<QueryResult<TData, TError>>`
+
+`useQuery` returns a SolidJS store with the following properties:
+
+- ##### `status: QueryStatus`
+  - Will be:
+    - `pending` if there's no cached data and no query attempt was finished yet.
+    - `error` if the query attempt resulted in an error. The corresponding `error` property has the error received from the attempted fetch
+    - `success` if the query has received a response with no errors and is ready to display its data. The corresponding `data` property on the query is the data received from the successful fetch or if the query's `enabled` property is set to `false` and has not been fetched yet `data` is the first `initialData` supplied to the query on initialization.
+- ##### `isPending: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- ##### `isSuccess: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- ##### `isError: boolean`
+  - A derived boolean from the `status` variable above, provided for convenience.
+- ##### `isLoadingError: boolean`
+  - Will be `true` if the query failed while fetching for the first time.
+- ##### `isRefetchError: boolean`
+  - Will be `true` if the query failed while refetching.
+- ##### `data: Resource<TData>`
+  - Defaults to `undefined`.
+  - The last successfully resolved data for the query.
+  - **Important**: The `data` property is a SolidJS resource. This means that if the data is accessed underneath a `<Suspense>` component,
+    it will trigger the Suspense boundary if the data is not available yet.
+- ##### `dataUpdatedAt: number`
+  - The timestamp for when the query most recently returned the `status` as `"success"`.
+- ##### `error: null | TError`
+  - Defaults to `null`
+  - The error object for the query, if an error was thrown.
+- ##### `errorUpdatedAt: number`
+  - The timestamp for when the query most recently returned the `status` as `"error"`.
+- ##### `isStale: boolean`
+  - Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
+- ##### `isPlaceholderData: boolean`
+  - Will be `true` if the data shown is the placeholder data.
+- ##### `isFetched: boolean`
+  - Will be `true` if the query has been fetched.
+- ##### `isFetchedAfterMount: boolean`
+  - Will be `true` if the query has been fetched after the component mounted.
+  - This property can be used to not show any previously cached data.
+- ##### `fetchStatus: FetchStatus`
+  - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetches.
+  - `paused`: The query wanted to fetch, but has been `paused`.
+  - `idle`: The query is not fetching.
+  - see [Network Mode](/query/framework/solid/guides/network-mode) for more information.
+- ##### `isFetching: boolean`
+  - A derived boolean from the `fetchStatus` variable above, provided for convenience.
+- ##### `isPaused: boolean`
+  - A derived boolean from the `fetchStatus` variable above, provided for convenience.
+- ##### `isRefetching: boolean`
+  - Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`
+  - Is the same as `isFetching && !isPending`
+- ##### `isLoading: boolean`
+  - Is `true` whenever the first fetch for a query is in-flight
+  - Is the same as `isFetching && isPending`
+- ##### `isInitialLoading: boolean`
+  - **deprecated**
+  - An alias for `isLoading`, will be removed in the next major version.
+- ##### `failureCount: number`
+  - The failure count for the query.
+  - Incremented every time the query fails.
+  - Reset to `0` when the query succeeds.
+- ##### `failureReason: null | TError`
+  - The failure reason for the query retry.
+  - Reset to `null` when the query succeeds.
+- ##### `errorUpdateCount: number`
+  - The sum of all errors.
+- ##### `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
+  - A function to manually refetch the query.
+  - If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
+  - `cancelRefetch?: boolean`
+    - Defaults to `true`
+      - Per default, a currently running request will be cancelled before a new request is made
+    - When set to `false`, no refetch will be made if there is already a request running.
diff --git a/mintlify/query/framework/solid/typescript.md b/mintlify/query/framework/solid/typescript.md
new file mode 100644
index 000000000..0ca10d665
--- /dev/null
+++ b/mintlify/query/framework/solid/typescript.md
@@ -0,0 +1,218 @@
+---
+id: typescript
+title: TypeScript
+---
+
+Solid Query is written in **TypeScript** to make sure the library and your projects are type-safe!
+
+Things to keep in mind:
+
+- TanStack Query follows [DefinitelyTyped's support window](https://github.com/DefinitelyTyped/DefinitelyTyped#support-window) and supports TypeScript versions released within the last 2 years. At the moment, that means TypeScript **5.4** and newer.
+- Changes to types in this repository are considered **non-breaking** and are usually released as **patch** semver changes (otherwise every type enhancement would be a major version!).
+- It is **highly recommended that you lock your solid-query package version to a specific patch release and upgrade with the expectation that types may be fixed or upgraded between any release**
+- The non-type-related public API of Solid Query still follows semver very strictly.
+
+## Type Inference
+
+Types in Solid Query generally flow through very well so that you don't have to provide type annotations for yourself
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+const query = useQuery(() => ({
+  queryKey: ['number'],
+  queryFn: () => Promise.resolve(5),
+}))
+
+query.data
+//    ^? (property) data: number | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUPOQR28SYRIBeFOiy4pRABQGAlHA0A+OAYTy4duGuIBpNEQBccANp0WeEACNCOgBdABo4W3tHIgAxFg8TM0sABWoQYDY0ADp0fgEANzQDAFZjeVJjMoU5aKzhLAx5Hh57OAA9AH55brkgA)
+
+```tsx
+import { useQuery } from '@tanstack/solid-query'
+
+const query = useQuery(() => ({
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+  select: (data) => data.toString(),
+}))
+
+query.data
+//    ^? (property) data: string | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUPOQR28SYRIBeFOiy4pRABQGAlHA0A+OAYTy4duGuIBpNEQBccANp1sHOgF0AGjhbe0ciADEWDxMzSwAFahBgNjQAOnR+AQA3NAMAVmNA0LtUgTRkGBjhLAxTCzga5jSYCABlGChgFgBzE2K5UmNjeXlwtKaMeR4eezgAPQB+UYU5IA)
+
+This works best if your `queryFn` has a well-defined returned type. Keep in mind that most data fetching libraries return `any` per default, so make sure to extract it to a properly typed function:
+
+```tsx
+const fetchGroups = (): Promise<Group[]> =>
+  axios.get('/groups').then((response) => response.data)
+
+const query = useQuery(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+query.data
+//    ^? (property) data: Group[] | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?ssl=11&ssc=4&pln=6&pc=1#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUKEiw4GAB7AIbStVp01GtrLnyYRMGjgBxanjBwAvIjgiAXHBZ4QAI0Jl585Ah2eAo0GGQAC2sIWy1HAAoASjcABR1gNjQAHmjbAG0AXQA+BxL9TQA6AHMw+LoeKpswQ0SKmAi0Fnj0Nkh2C3sSnr7MiuEsDET-OUDguElCEkdUTGx8Rfik0rh4hHk4A-mpIgBpNCI3PLpGmOa6AoAaOH3DheIAMRY3UPCoprYHvJSIkpsY5G8iGMJvIeDxDnAAHoAfmm8iAA)
+
+## Type Narrowing
+
+Solid Query uses a [discriminated union type](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for the query result, discriminated by the `status` field and the derived status boolean flags. This will allow you to check for e.g. `success` status to make `data` defined:
+
+```tsx
+const query = useQuery(() => ({
+  queryKey: ['number'],
+  queryFn: () => Promise.resolve(5),
+}))
+
+if (query.isSuccess) {
+  const data = query.data
+  //     ^? const data: number
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUKEixEKdFjQBRChTTJ45KjXr8hYgFZtZc+cgjt4kwiQC8qzNnxOAFF4CUcZwA+OC8EeTg4R2IAaTQiAC44AG06FjwQACNCOgBdABpwyKkiADEWRL8A4IAFahBgNjQAOnQTADc0LwBWXwK5Ul9feXlgChCooiaGgGU8ZGQ0NjZ-MLkIiNt7OGEsDACipyad5kKInh51iIA9AH55UmHrOSA)
+
+## Typing the error field
+
+The type for error defaults to `Error`, because that is what most users expect.
+
+```tsx
+const query = useQuery(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+query.error
+//    ^? (property) error: Error | null
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUKEiw4GAB7AIbStVp01GtrLnyYRMGjgBxanjBwAvIjgiAXHBZ4QAI0Jl585Ah2eAo0GGQAC2sIWy1HAAoASjcABR1gNjQAHmjbAG0AXQA+BxL9TQA6AHMw+LoeKpswQ0SKmAi0Fnj0Nkh2C3sSnr7MiuEsDET-OUDguElCEkdUTGx8Rfik0rh4hHk4A-mpIgBpNCI3PLpGmOa6AoAaOH3DheIAMRY3UPCoprYHvJSIkpsY5G8iBVCNQoPIeDxDnAAHoAfmm8iAA)
+
+If you want to throw a custom error, or something that isn't an `Error` at all, you can specify the type of the error field:
+
+```tsx
+const query = useQuery<Group[], string>(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+query.error
+//    ^? (property) error: string | null
+```
+
+However, this has the drawback that type inference for all other generics of `useQuery` will not work anymore. It is generally not considered a good practice to throw something that isn't an `Error`, so if you have a subclass like `AxiosError` you can use _type narrowing_ to make the error field more specific:
+
+```tsx
+import axios from 'axios'
+
+const query = useQuery(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+query.error
+//    ^? (property) error: Error | null
+
+if (axios.isAxiosError(query.error)) {
+  query.error
+  //    ^? (property) error: AxiosError
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUKEiw4GAB7AIbStVp01GtrLnyYRMGjgBxanjBwAvIjgiAXHBZ4QAI0Jl585Ah2eAo0GGQAC2sIWy1HAAoASjcABR1gNjQAHmjbAG0AXQA+BxL9TQA6AHMw+LoeKpswQ0SKmAi0Fnj0Nkh2C3sSnr7MiuEsDET-OUDguElCEkdUTGx8Rfik0rh4hHk4A-mpIgBpNCI3PLpGmOa6AoAaOH3DheIAMRY3UPCoprYHvJSIkpsY5G8iBVCNQoPIeDxDnAAHoAfmmwAoO3KbAqGQAgupNABRKAw+IQqGk6AgxAvA4U6HQOlweGI1FA+RAA)
+
+[//]: # 'RegisterErrorType'
+
+```tsx
+import '@tanstack/solid-query'
+
+declare module '@tanstack/solid-query' {
+  interface Register {
+    // Use unknown so call sites must narrow explicitly.
+    defaultError: unknown
+  }
+}
+
+const query = useQuery(() => ({
+  queryKey: ['groups'],
+  queryFn: fetchGroups,
+}))
+
+query.error
+//    ^? (property) error: unknown | null
+```
+
+[//]: # 'RegisterErrorType'
+
+## Registering global `Meta`
+
+Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](/query/framework/solid/reference/useQuery) and [mutations](/query/framework/solid/reference/useMutation) stays consistent and is type-safe. Note that the registered type must extend `Record<string, unknown>` so that `meta` remains an object.
+
+```ts
+import '@tanstack/solid-query'
+
+interface MyMeta extends Record<string, unknown> {
+  // Your meta type definition.
+}
+
+declare module '@tanstack/solid-query' {
+  interface Register {
+    queryMeta: MyMeta
+    mutationMeta: MyMeta
+  }
+}
+```
+
+## Typing Query Options
+
+If you inline query options into `useQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `useQuery` and e.g. `prefetchQuery`. In that case, you'd lose type inference. To get it back, you can use `queryOptions` helper:
+
+```ts
+import { queryOptions } from '@tanstack/solid-query'
+
+function groupOptions() {
+  return queryOptions({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+    staleTime: 5 * 1000,
+  })
+}
+
+useQuery(groupOptions)
+queryClient.prefetchQuery(groupOptions())
+```
+
+Further, the `queryKey` returned from `queryOptions` knows about the `queryFn` associated with it, and we can leverage that type information to make functions like `queryClient.getQueryData` aware of those types as well:
+
+```ts
+function groupOptions() {
+  return queryOptions({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+    staleTime: 5 * 1000,
+  })
+}
+
+const data = queryClient.getQueryData(groupOptions().queryKey)
+//    ^? const data: Group[] | undefined
+```
+
+Without `queryOptions`, the type of `data` would be `unknown`, unless we'd pass a generic to it:
+
+```ts
+const data = queryClient.getQueryData<Group[]>(['groups'])
+```
+
+## Typesafe disabling of queries using `skipToken`
+
+If you are using TypeScript, you can use the `skipToken` to disable a query. This is useful when you want to disable a query based on a condition, but you still want to keep the query to be type safe.
+
+Read more about it in the [Disabling Queries](/query/framework/solid/guides/disabling-queries) guide.
diff --git a/mintlify/query/framework/svelte/devtools.md b/mintlify/query/framework/svelte/devtools.md
new file mode 100644
index 000000000..e0465a5fa
--- /dev/null
+++ b/mintlify/query/framework/svelte/devtools.md
@@ -0,0 +1,81 @@
+---
+id: devtools
+title: Devtools
+---
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+## Install and Import the Devtools
+
+The devtools are a separate package that you need to install:
+
+```bash
+npm i @tanstack/svelte-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/svelte-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/svelte-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/svelte-query-devtools
+```
+
+You can import the devtools like this:
+
+```ts
+import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+```
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Svelte app as you can. The closer it is to the root of the page, the better it will work!
+
+```ts
+<script>
+  import { QueryClientProvider } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+</script>
+
+<QueryClientProvider client={queryClient}>
+  {/* The rest of your application */}
+  <SvelteQueryDevtools />
+</QueryClientProvider>
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`
+  - The position of the TanStack logo to open and close the devtools panel
+  - If `relative`, the button is placed in the location that you render the devtools.
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the Svelte Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
diff --git a/mintlify/query/framework/svelte/examples/auto-refetching.md b/mintlify/query/framework/svelte/examples/auto-refetching.md
new file mode 100644
index 000000000..d3f3909e5
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/auto-refetching.md
@@ -0,0 +1,12 @@
+---
+title: "Auto Refetching / Polling / Realtime"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/auto-refetching)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/auto-refetching)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/basic.md b/mintlify/query/framework/svelte/examples/basic.md
new file mode 100644
index 000000000..29f1e2986
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/load-more-infinite-scroll.md b/mintlify/query/framework/svelte/examples/load-more-infinite-scroll.md
new file mode 100644
index 000000000..1d6b6efd7
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/load-more-infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Queries"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/load-more-infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/load-more-infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/optimistic-updates.md b/mintlify/query/framework/svelte/examples/optimistic-updates.md
new file mode 100644
index 000000000..ecbe3d6bf
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/optimistic-updates.md
@@ -0,0 +1,12 @@
+---
+title: "Optimistic Updates"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/optimistic-updates)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/optimistic-updates)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/playground.md b/mintlify/query/framework/svelte/examples/playground.md
new file mode 100644
index 000000000..6ef006f51
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/playground.md
@@ -0,0 +1,12 @@
+---
+title: "Playground"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/playground)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/playground)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/simple.md b/mintlify/query/framework/svelte/examples/simple.md
new file mode 100644
index 000000000..46ca824ad
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/ssr.md b/mintlify/query/framework/svelte/examples/ssr.md
new file mode 100644
index 000000000..8270b7fff
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/ssr.md
@@ -0,0 +1,12 @@
+---
+title: "SSR"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/ssr)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/ssr)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/examples/star-wars.md b/mintlify/query/framework/svelte/examples/star-wars.md
new file mode 100644
index 000000000..ecb0e3602
--- /dev/null
+++ b/mintlify/query/framework/svelte/examples/star-wars.md
@@ -0,0 +1,12 @@
+---
+title: "Star Wars"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/svelte/examples/star-wars)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/svelte/star-wars)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/svelte/installation.md b/mintlify/query/framework/svelte/installation.md
new file mode 100644
index 000000000..c9e253c45
--- /dev/null
+++ b/mintlify/query/framework/svelte/installation.md
@@ -0,0 +1,32 @@
+---
+id: installation
+title: Installation
+---
+
+You can install Svelte Query via [NPM](https://npmjs.com).
+
+### NPM
+
+```bash
+npm i @tanstack/svelte-query
+```
+
+or
+
+```bash
+pnpm add @tanstack/svelte-query
+```
+
+or
+
+```bash
+yarn add @tanstack/svelte-query
+```
+
+or
+
+```bash
+bun add @tanstack/svelte-query
+```
+
+> Wanna give it a spin before you download? Try out the [basic](/query/framework/svelte/examples/basic) example!
diff --git a/mintlify/query/framework/svelte/migrate-from-v5-to-v6.md b/mintlify/query/framework/svelte/migrate-from-v5-to-v6.md
new file mode 100644
index 000000000..7d9e412be
--- /dev/null
+++ b/mintlify/query/framework/svelte/migrate-from-v5-to-v6.md
@@ -0,0 +1,76 @@
+While Svelte v5 has legacy compatibility with the stores syntax from Svelte v3/v4, it has been somewhat buggy and unreliable for this adapter. The `@tanstack/svelte-query` v6 adapter fully migrates to the runes syntax, which relies on signals. This rewrite should also simplify the code required to ensure your query inputs remain reactive.
+
+## Installation
+
+Please ensure your project has [Svelte v5.25.0](https://github.com/sveltejs/svelte/releases/tag/svelte%405.25.0) or newer.
+
+Run `pnpm add @tanstack/svelte-query@latest` (or your package manager's equivalent).
+
+> Note that `@tanstack/svelte-query` v6 depends on `@tanstack/query-core` v5.
+
+## Function Inputs
+
+Like the Angular and Solid adapters, most functions for the Svelte adapter now require options to be provided as a "thunk" (`() => options`) to provide reactivity. TypeScript will be your friend here and warn you if you're missing this notation.
+
+```ts
+- const query = createQuery({  // [!code --]
++ const query = createQuery(() => ({ // [!code ++]
+    queryKey: ['todos'],
+    queryFn: () => fetchTodos(),
+- }) // [!code --]
++ })) // [!code ++]
+```
+
+## Accessing Properties
+
+Given the adapter no longer uses stores, it is no longer necessary to prefix with `$`.
+
+```svelte
+- {#if $todos.isSuccess} // [!code --]
++ {#if todos.isSuccess} // [!code ++]
+    <ul>
+-     {#each $todos.data.items as item} // [!code --]
++     {#each todos.data.items as item} // [!code ++]
+        <li>{item}</li>
+      {/each}
+    </ul>
+  {/if}
+```
+
+## Reactivity
+
+You previously needed to do some funky things with stores to achieve reactivity for inputs. This is no longer the case! You don't even need to wrap your query in a `$derived`.
+
+```ts
+- const intervalMs = writable(1000) // [!code --]
++ let intervalMs = $state(1000) // [!code ++]
+
+- const query = createQuery(derived(intervalMs, ($intervalMs) => ({ // [!code --]
++ const query = createQuery(() => ({ // [!code ++]
+    queryKey: ['refetch'],
+    queryFn: async () => await fetch('/api/data').then((r) => r.json()),
+-   refetchInterval: $intervalMs, // [!code --]
++   refetchInterval: intervalMs, // [!code ++]
+- }))) // [!code --]
++ })) // [!code ++]
+```
+
+## Disabling Legacy Mode
+
+If your component has any stores, it might not properly switch to runes mode. You can ensure your application is using runes in two ways:
+
+### On a per-file basis
+
+In each `.svelte` file, once you have migrated to runes, add `<svelte:options runes={true} />`. This is better for large applications requiring gradual migration.
+
+### On an project-wide basis
+
+In your `svelte.config.js`, add the following to config:
+
+```json
+  compilerOptions: {
+    runes: true,
+  },
+```
+
+This can be added once you've 100% eradicated stores syntax from your app.
diff --git a/mintlify/query/framework/svelte/overview.md b/mintlify/query/framework/svelte/overview.md
new file mode 100644
index 000000000..65c7d6e26
--- /dev/null
+++ b/mintlify/query/framework/svelte/overview.md
@@ -0,0 +1,77 @@
+---
+id: overview
+title: Overview
+---
+
+The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte.
+
+> Migrating from stores to the runes syntax? See the [migration guide](/query/framework/svelte/migrate-from-v5-to-v6).
+
+## Example
+
+Include the QueryClientProvider near the root of your project:
+
+```svelte
+<script lang="ts">
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+  import Example from './lib/Example.svelte'
+
+  const queryClient = new QueryClient()
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <Example />
+</QueryClientProvider>
+```
+
+Then call any function (e.g. createQuery) from any component:
+
+```svelte
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+
+  const query = createQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetchTodos(),
+  }))
+</script>
+
+<div>
+  {#if query.isPending}
+    <p>Loading...</p>
+  {:else if query.isError}
+    <p>Error: {query.error.message}</p>
+  {:else if query.isSuccess}
+    {#each query.data as todo}
+      <p>{todo.title}</p>
+    {/each}
+  {/if}
+</div>
+```
+
+## SvelteKit
+
+If you are using SvelteKit, please have a look at [SSR & SvelteKit](/query/framework/svelte/ssr).
+
+## Available Functions
+
+Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier.
+
+- `createQuery`
+- `createQueries`
+- `createInfiniteQuery`
+- `createMutation`
+- `useQueryClient`
+- `useIsFetching`
+- `useIsMutating`
+- `useMutationState`
+- `useIsRestoring`
+- `useHydrate`
+- `<QueryClientProvider>`
+- `<HydrationBoundary>`
+
+## Important Differences between Svelte Query & React Query
+
+Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
+
+- The arguments to the `create*` functions must be wrapped in a function to preserve reactivity.
diff --git a/mintlify/query/framework/svelte/reference/functions/createInfiniteQuery.md b/mintlify/query/framework/svelte/reference/functions/createInfiniteQuery.md
new file mode 100644
index 000000000..3bfa8ec79
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/createInfiniteQuery.md
@@ -0,0 +1,48 @@
+---
+id: createInfiniteQuery
+title: createInfiniteQuery
+---
+
+# Function: createInfiniteQuery()
+
+```ts
+function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): CreateInfiniteQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/createInfiniteQuery.ts:16](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createInfiniteQuery.ts#L16)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### options
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;[`CreateInfiniteQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>
+
+### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+## Returns
+
+[`CreateInfiniteQueryResult`](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult)\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/createMutation.md b/mintlify/query/framework/svelte/reference/functions/createMutation.md
new file mode 100644
index 000000000..9193db3a3
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/createMutation.md
@@ -0,0 +1,48 @@
+---
+id: createMutation
+title: createMutation
+---
+
+# Function: createMutation()
+
+```ts
+function createMutation<TData, TError, TVariables, TContext>(options, queryClient?): CreateMutationResult<TData, TError, TVariables, TContext>;
+```
+
+Defined in: [packages/svelte-query/src/createMutation.svelte.ts:17](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createMutation.svelte.ts#L17)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `Error`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TContext
+
+`TContext` = `unknown`
+
+## Parameters
+
+### options
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;[`CreateMutationOptions`](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TContext`\>\>
+
+A function that returns mutation options
+
+### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+Custom query client which overrides provider
+
+## Returns
+
+[`CreateMutationResult`](/query/framework/svelte/reference/type-aliases/CreateMutationResult)\&lt;`TData`, `TError`, `TVariables`, `TContext`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/createQueries.md b/mintlify/query/framework/svelte/reference/functions/createQueries.md
new file mode 100644
index 000000000..8edb5b92f
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/createQueries.md
@@ -0,0 +1,40 @@
+---
+id: createQueries
+title: createQueries
+---
+
+# Function: createQueries()
+
+```ts
+function createQueries<T, TCombinedResult>(createQueriesOptions, queryClient?): TCombinedResult;
+```
+
+Defined in: [packages/svelte-query/src/createQueries.svelte.ts:189](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQueries.svelte.ts#L189)
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TCombinedResult
+
+`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetCreateQueryResult`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryResult`\&lt;`Head`\>, `GetCreateQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryResult`\&lt;`Head`\>, `GetCreateQueryResult`\&lt;`Head`\>, `GetCreateQueryResult`\&lt;`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\&#123; \[K in string \| number \| symbol\]: GetCreateQueryResult\&lt;Tails\[K\&lt;(...)\>\]\> \&#125;\[\]\] : \&#123; \[K in string \| number \| symbol\]: GetCreateQueryResult\&lt;T\[K\&lt;K\>\]\> \&#125;
+
+## Parameters
+
+### createQueriesOptions
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;\&#123;
+  `combine?`: (`result`) => `TCombinedResult`;
+  `queries`:   \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\&lt;`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\&lt;...\>, `GetCreateQueryOptionsForCreateQueries`\&lt;...\>\] : \[`...(...)[]`\] *extends* \[..., `...(...)[]`\] ? ... *extends* ... ? ... : ... : ... *extends* ... ? ... : ... : readonly `unknown`[] *extends* `T` ? `T` : `T` *extends* `CreateQueryOptionsForCreateQueries`\&lt;..., ..., ..., ...\>[] ? `CreateQueryOptionsForCreateQueries`\&lt;..., ..., ..., ...\>[] : `CreateQueryOptionsForCreateQueries`\&lt;..., ..., ..., ...\>[]\]
+     \| readonly \[\&#123; \[K in string \| number \| symbol\]: GetCreateQueryOptionsForCreateQueries\&lt;T\[K\&lt;K\>\]\> \&#125;\];
+\&#125;\>
+
+### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+## Returns
+
+`TCombinedResult`
diff --git a/mintlify/query/framework/svelte/reference/functions/createQuery.md b/mintlify/query/framework/svelte/reference/functions/createQuery.md
new file mode 100644
index 000000000..61be828d2
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/createQuery.md
@@ -0,0 +1,126 @@
+---
+id: createQuery
+title: createQuery
+---
+
+# Function: createQuery()
+
+## Call Signature
+
+```ts
+function createQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): CreateQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/createQuery.ts:15](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQuery.ts#L15)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;[`UndefinedInitialDataOptions`](/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\>
+
+#### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+### Returns
+
+[`CreateQueryResult`](/query/framework/svelte/reference/type-aliases/CreateQueryResult)\&lt;`TData`, `TError`\>
+
+## Call Signature
+
+```ts
+function createQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): DefinedCreateQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/createQuery.ts:27](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQuery.ts#L27)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;[`DefinedInitialDataOptions`](/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\>
+
+#### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+### Returns
+
+[`DefinedCreateQueryResult`](/query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult)\&lt;`TData`, `TError`\>
+
+## Call Signature
+
+```ts
+function createQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): CreateQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/createQuery.ts:39](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQuery.ts#L39)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;[`CreateQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\>
+
+#### queryClient?
+
+[`Accessor`](/query/framework/svelte/reference/type-aliases/Accessor)\&lt;`QueryClient`\>
+
+### Returns
+
+[`CreateQueryResult`](/query/framework/svelte/reference/type-aliases/CreateQueryResult)\&lt;`TData`, `TError`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/getIsRestoringContext.md b/mintlify/query/framework/svelte/reference/functions/getIsRestoringContext.md
new file mode 100644
index 000000000..9823fd09a
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/getIsRestoringContext.md
@@ -0,0 +1,18 @@
+---
+id: getIsRestoringContext
+title: getIsRestoringContext
+---
+
+# Function: getIsRestoringContext()
+
+```ts
+function getIsRestoringContext(): Box<boolean>;
+```
+
+Defined in: [packages/svelte-query/src/context.ts:27](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/context.ts#L27)
+
+Retrieves a `isRestoring` from Svelte's context
+
+## Returns
+
+`Box`\&lt;`boolean`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/getQueryClientContext.md b/mintlify/query/framework/svelte/reference/functions/getQueryClientContext.md
new file mode 100644
index 000000000..cce636135
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/getQueryClientContext.md
@@ -0,0 +1,18 @@
+---
+id: getQueryClientContext
+title: getQueryClientContext
+---
+
+# Function: getQueryClientContext()
+
+```ts
+function getQueryClientContext(): QueryClient;
+```
+
+Defined in: [packages/svelte-query/src/context.ts:8](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/context.ts#L8)
+
+Retrieves a Client from Svelte's context
+
+## Returns
+
+`QueryClient`
diff --git a/mintlify/query/framework/svelte/reference/functions/infiniteQueryOptions.md b/mintlify/query/framework/svelte/reference/functions/infiniteQueryOptions.md
new file mode 100644
index 000000000..1b00e8924
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/infiniteQueryOptions.md
@@ -0,0 +1,44 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+---
+
+# Function: infiniteQueryOptions()
+
+```ts
+function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
+```
+
+Defined in: [packages/svelte-query/src/infiniteQueryOptions.ts:4](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/infiniteQueryOptions.ts#L4)
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData`
+
+### TError
+
+`TError` = `Error`
+
+### TData
+
+`TData` = `InfiniteData`\&lt;`TQueryFnData`, `unknown`\>
+
+### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### TPageParam
+
+`TPageParam` = `unknown`
+
+## Parameters
+
+### options
+
+[`CreateInfiniteQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
+
+## Returns
+
+[`CreateInfiniteQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/mutationOptions.md b/mintlify/query/framework/svelte/reference/functions/mutationOptions.md
new file mode 100644
index 000000000..25925fb4f
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/mutationOptions.md
@@ -0,0 +1,78 @@
+---
+id: mutationOptions
+title: mutationOptions
+---
+
+# Function: mutationOptions()
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>
+```
+
+Defined in: [packages/svelte-query/src/mutationOptions.ts](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/mutationOptions.ts)
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`WithRequired`\&lt;[`CreateMutationOptions`](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `'mutationKey'`\>
+
+### Returns
+
+`WithRequired`\&lt;[`CreateMutationOptions`](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `'mutationKey'`\>
+
+## Call Signature
+
+```ts
+function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): Omit<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>
+```
+
+Defined in: [packages/svelte-query/src/mutationOptions.ts](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/mutationOptions.ts)
+
+### Type Parameters
+
+#### TData
+
+`TData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TVariables
+
+`TVariables` = `void`
+
+#### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+### Parameters
+
+#### options
+
+`Omit`\&lt;[`CreateMutationOptions`](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `'mutationKey'`\>
+
+### Returns
+
+`Omit`\&lt;[`CreateMutationOptions`](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `'mutationKey'`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/queryOptions.md b/mintlify/query/framework/svelte/reference/functions/queryOptions.md
new file mode 100644
index 000000000..b477273fe
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/queryOptions.md
@@ -0,0 +1,78 @@
+---
+id: queryOptions
+title: queryOptions
+---
+
+# Function: queryOptions()
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & object;
+```
+
+Defined in: [packages/svelte-query/src/queryOptions.ts:30](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/queryOptions.ts#L30)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`DefinedInitialDataOptions`](/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### Returns
+
+[`CreateQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object`
+
+## Call Signature
+
+```ts
+function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & object;
+```
+
+Defined in: [packages/svelte-query/src/queryOptions.ts:41](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/queryOptions.ts#L41)
+
+### Type Parameters
+
+#### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+#### TError
+
+`TError` = `Error`
+
+#### TData
+
+`TData` = `TQueryFnData`
+
+#### TQueryKey
+
+`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
+
+### Parameters
+
+#### options
+
+[`UndefinedInitialDataOptions`](/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
+
+### Returns
+
+[`CreateQueryOptions`](/query/framework/svelte/reference/type-aliases/CreateQueryOptions)\&lt;`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object`
diff --git a/mintlify/query/framework/svelte/reference/functions/setIsRestoringContext.md b/mintlify/query/framework/svelte/reference/functions/setIsRestoringContext.md
new file mode 100644
index 000000000..9c9db848a
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/setIsRestoringContext.md
@@ -0,0 +1,24 @@
+---
+id: setIsRestoringContext
+title: setIsRestoringContext
+---
+
+# Function: setIsRestoringContext()
+
+```ts
+function setIsRestoringContext(isRestoring): void;
+```
+
+Defined in: [packages/svelte-query/src/context.ts:39](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/context.ts#L39)
+
+Sets a `isRestoring` on Svelte's context
+
+## Parameters
+
+### isRestoring
+
+`Box`\&lt;`boolean`\>
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/svelte/reference/functions/setQueryClientContext.md b/mintlify/query/framework/svelte/reference/functions/setQueryClientContext.md
new file mode 100644
index 000000000..62aa5d279
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/setQueryClientContext.md
@@ -0,0 +1,24 @@
+---
+id: setQueryClientContext
+title: setQueryClientContext
+---
+
+# Function: setQueryClientContext()
+
+```ts
+function setQueryClientContext(client): void;
+```
+
+Defined in: [packages/svelte-query/src/context.ts:20](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/context.ts#L20)
+
+Sets a QueryClient on Svelte's context
+
+## Parameters
+
+### client
+
+`QueryClient`
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/svelte/reference/functions/useHydrate.md b/mintlify/query/framework/svelte/reference/functions/useHydrate.md
new file mode 100644
index 000000000..5bf174cf2
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useHydrate.md
@@ -0,0 +1,33 @@
+---
+id: useHydrate
+title: useHydrate
+---
+
+# Function: useHydrate()
+
+```ts
+function useHydrate(
+   state?, 
+   options?, 
+   queryClient?): void;
+```
+
+Defined in: [packages/svelte-query/src/useHydrate.ts:5](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useHydrate.ts#L5)
+
+## Parameters
+
+### state?
+
+`unknown`
+
+### options?
+
+`HydrateOptions`
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/svelte/reference/functions/useIsFetching.md b/mintlify/query/framework/svelte/reference/functions/useIsFetching.md
new file mode 100644
index 000000000..93a09b228
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useIsFetching.md
@@ -0,0 +1,26 @@
+---
+id: useIsFetching
+title: useIsFetching
+---
+
+# Function: useIsFetching()
+
+```ts
+function useIsFetching(filters?, queryClient?): ReactiveValue<number>;
+```
+
+Defined in: [packages/svelte-query/src/useIsFetching.svelte.ts:5](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useIsFetching.svelte.ts#L5)
+
+## Parameters
+
+### filters?
+
+`QueryFilters`\&lt;readonly `unknown`[]\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`ReactiveValue`\&lt;`number`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/useIsMutating.md b/mintlify/query/framework/svelte/reference/functions/useIsMutating.md
new file mode 100644
index 000000000..c0a89f5c4
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useIsMutating.md
@@ -0,0 +1,26 @@
+---
+id: useIsMutating
+title: useIsMutating
+---
+
+# Function: useIsMutating()
+
+```ts
+function useIsMutating(filters?, queryClient?): ReactiveValue<number>;
+```
+
+Defined in: [packages/svelte-query/src/useIsMutating.svelte.ts:5](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useIsMutating.svelte.ts#L5)
+
+## Parameters
+
+### filters?
+
+`MutationFilters`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`ReactiveValue`\&lt;`number`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/useIsRestoring.md b/mintlify/query/framework/svelte/reference/functions/useIsRestoring.md
new file mode 100644
index 000000000..67ab27096
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useIsRestoring.md
@@ -0,0 +1,16 @@
+---
+id: useIsRestoring
+title: useIsRestoring
+---
+
+# Function: useIsRestoring()
+
+```ts
+function useIsRestoring(): Box<boolean>;
+```
+
+Defined in: [packages/svelte-query/src/useIsRestoring.ts:4](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useIsRestoring.ts#L4)
+
+## Returns
+
+`Box`\&lt;`boolean`\>
diff --git a/mintlify/query/framework/svelte/reference/functions/useMutationState.md b/mintlify/query/framework/svelte/reference/functions/useMutationState.md
new file mode 100644
index 000000000..8fb976338
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useMutationState.md
@@ -0,0 +1,32 @@
+---
+id: useMutationState
+title: useMutationState
+---
+
+# Function: useMutationState()
+
+```ts
+function useMutationState<TResult>(options, queryClient?): TResult[];
+```
+
+Defined in: [packages/svelte-query/src/useMutationState.svelte.ts:22](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useMutationState.svelte.ts#L22)
+
+## Type Parameters
+
+### TResult
+
+`TResult` = `MutationState`\&lt;`unknown`, `Error`, `unknown`, `unknown`\>
+
+## Parameters
+
+### options
+
+[`MutationStateOptions`](/query/framework/svelte/reference/type-aliases/MutationStateOptions)\&lt;`TResult`\> = `{}`
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`TResult`[]
diff --git a/mintlify/query/framework/svelte/reference/functions/useQueryClient.md b/mintlify/query/framework/svelte/reference/functions/useQueryClient.md
new file mode 100644
index 000000000..ca6db104c
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/functions/useQueryClient.md
@@ -0,0 +1,22 @@
+---
+id: useQueryClient
+title: useQueryClient
+---
+
+# Function: useQueryClient()
+
+```ts
+function useQueryClient(queryClient?): QueryClient;
+```
+
+Defined in: [packages/svelte-query/src/useQueryClient.ts:4](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/useQueryClient.ts#L4)
+
+## Parameters
+
+### queryClient?
+
+`QueryClient`
+
+## Returns
+
+`QueryClient`
diff --git a/mintlify/query/framework/svelte/reference/index.md b/mintlify/query/framework/svelte/reference/index.md
new file mode 100644
index 000000000..849cce500
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/index.md
@@ -0,0 +1,59 @@
+---
+id: "@tanstack/svelte-query"
+title: "@tanstack/svelte-query"
+---
+
+# @tanstack/svelte-query
+
+## Type Aliases
+
+- [Accessor](/query/framework/svelte/reference/type-aliases/Accessor)
+- [CreateBaseMutationResult](/query/framework/svelte/reference/type-aliases/CreateBaseMutationResult)
+- [CreateBaseQueryOptions](/query/framework/svelte/reference/type-aliases/CreateBaseQueryOptions)
+- [CreateBaseQueryResult](/query/framework/svelte/reference/type-aliases/CreateBaseQueryResult)
+- [CreateInfiniteQueryOptions](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions)
+- [CreateInfiniteQueryResult](/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult)
+- [CreateMutateAsyncFunction](/query/framework/svelte/reference/type-aliases/CreateMutateAsyncFunction)
+- [CreateMutateFunction](/query/framework/svelte/reference/type-aliases/CreateMutateFunction)
+- [CreateMutationOptions](/query/framework/svelte/reference/type-aliases/CreateMutationOptions)
+- [CreateMutationResult](/query/framework/svelte/reference/type-aliases/CreateMutationResult)
+- [CreateQueryOptions](/query/framework/svelte/reference/type-aliases/CreateQueryOptions)
+- [CreateQueryResult](/query/framework/svelte/reference/type-aliases/CreateQueryResult)
+- [DefinedCreateBaseQueryResult](/query/framework/svelte/reference/type-aliases/DefinedCreateBaseQueryResult)
+- [DefinedCreateQueryResult](/query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult)
+- [DefinedInitialDataOptions](/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions)
+- [HydrationBoundary](/query/framework/svelte/reference/type-aliases/HydrationBoundary)
+- [MutationStateOptions](/query/framework/svelte/reference/type-aliases/MutationStateOptions)
+- [QueriesOptions](/query/framework/svelte/reference/type-aliases/QueriesOptions)
+- [QueriesResults](/query/framework/svelte/reference/type-aliases/QueriesResults)
+- [QueryClientProviderProps](/query/framework/svelte/reference/type-aliases/QueryClientProviderProps)
+- [UndefinedInitialDataOptions](/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions)
+
+## Variables
+
+- [HydrationBoundary](/query/framework/svelte/reference/variables/HydrationBoundary)
+
+## Functions
+
+- [createInfiniteQuery](/query/framework/svelte/reference/functions/createInfiniteQuery)
+- [createMutation](/query/framework/svelte/reference/functions/createMutation)
+- [createQueries](/query/framework/svelte/reference/functions/createQueries)
+- [createQuery](/query/framework/svelte/reference/functions/createQuery)
+- [getIsRestoringContext](/query/framework/svelte/reference/functions/getIsRestoringContext)
+- [getQueryClientContext](/query/framework/svelte/reference/functions/getQueryClientContext)
+- [infiniteQueryOptions](/query/framework/svelte/reference/functions/infiniteQueryOptions)
+- [queryOptions](/query/framework/svelte/reference/functions/queryOptions)
+- [setIsRestoringContext](/query/framework/svelte/reference/functions/setIsRestoringContext)
+- [setQueryClientContext](/query/framework/svelte/reference/functions/setQueryClientContext)
+- [useHydrate](/query/framework/svelte/reference/functions/useHydrate)
+- [useIsFetching](/query/framework/svelte/reference/functions/useIsFetching)
+- [useIsMutating](/query/framework/svelte/reference/functions/useIsMutating)
+- [useIsRestoring](/query/framework/svelte/reference/functions/useIsRestoring)
+- [useMutationState](/query/framework/svelte/reference/functions/useMutationState)
+- [useQueryClient](/query/framework/svelte/reference/functions/useQueryClient)
+
+## References
+
+### QueryClientProvider
+
+Renames and re-exports [HydrationBoundary](/query/framework/svelte/reference/variables/HydrationBoundary)
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/Accessor.md b/mintlify/query/framework/svelte/reference/type-aliases/Accessor.md
new file mode 100644
index 000000000..629da006b
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/Accessor.md
@@ -0,0 +1,22 @@
+---
+id: Accessor
+title: Accessor
+---
+
+# Type Alias: Accessor()\&lt;T\>
+
+```ts
+type Accessor<T> = () => T;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:21](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L21)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Returns
+
+`T`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseMutationResult.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseMutationResult.md
new file mode 100644
index 000000000..afc14cf23
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseMutationResult.md
@@ -0,0 +1,40 @@
+---
+id: CreateBaseMutationResult
+title: CreateBaseMutationResult
+---
+
+# Type Alias: CreateBaseMutationResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateBaseMutationResult<TData, TError, TVariables, TOnMutateResult> = Override<MutationObserverResult<TData, TError, TVariables, TOnMutateResult>, {
+  mutate: CreateMutateFunction<TData, TError, TVariables, TOnMutateResult>;
+}> & object;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:114](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L114)
+
+## Type Declaration
+
+### mutateAsync
+
+```ts
+mutateAsync: CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryOptions.md
new file mode 100644
index 000000000..ae52a29fe
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryOptions.md
@@ -0,0 +1,36 @@
+---
+id: CreateBaseQueryOptions
+title: CreateBaseQueryOptions
+---
+
+# Type Alias: CreateBaseQueryOptions\&lt;TQueryFnData, TError, TData, TQueryData, TQueryKey\>
+
+```ts
+type CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> = QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:24](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L24)
+
+Options for createBaseQuery
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryData
+
+`TQueryData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryResult.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryResult.md
new file mode 100644
index 000000000..0edb3e6da
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateBaseQueryResult.md
@@ -0,0 +1,24 @@
+---
+id: CreateBaseQueryResult
+title: CreateBaseQueryResult
+---
+
+# Type Alias: CreateBaseQueryResult\&lt;TData, TError\>
+
+```ts
+type CreateBaseQueryResult<TData, TError> = QueryObserverResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:33](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L33)
+
+Result from createBaseQuery
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions.md
new file mode 100644
index 000000000..11c76083a
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryOptions.md
@@ -0,0 +1,36 @@
+---
+id: CreateInfiniteQueryOptions
+title: CreateInfiniteQueryOptions
+---
+
+# Type Alias: CreateInfiniteQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam\>
+
+```ts
+type CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> = InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:53](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L53)
+
+Options for createInfiniteQuery
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
+
+### TPageParam
+
+`TPageParam` = `unknown`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult.md
new file mode 100644
index 000000000..3eca31cb3
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateInfiniteQueryResult.md
@@ -0,0 +1,24 @@
+---
+id: CreateInfiniteQueryResult
+title: CreateInfiniteQueryResult
+---
+
+# Type Alias: CreateInfiniteQueryResult\&lt;TData, TError\>
+
+```ts
+type CreateInfiniteQueryResult<TData, TError> = InfiniteQueryObserverResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:68](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L68)
+
+Result from createInfiniteQuery
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateAsyncFunction.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateAsyncFunction.md
new file mode 100644
index 000000000..8f49a22f0
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateAsyncFunction.md
@@ -0,0 +1,30 @@
+---
+id: CreateMutateAsyncFunction
+title: CreateMutateAsyncFunction
+---
+
+# Type Alias: CreateMutateAsyncFunction\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutateAsyncFunction<TData, TError, TVariables, TOnMutateResult> = MutateFunction<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:107](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L107)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateFunction.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateFunction.md
new file mode 100644
index 000000000..cfb3ed8b2
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutateFunction.md
@@ -0,0 +1,40 @@
+---
+id: CreateMutateFunction
+title: CreateMutateFunction
+---
+
+# Type Alias: CreateMutateFunction()\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutateFunction<TData, TError, TVariables, TOnMutateResult> = (...args) => void;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:96](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L96)
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
+
+## Parameters
+
+### args
+
+...`Parameters`\&lt;`MutateFunction`\&lt;`TData`, `TError`, `TVariables`, `TOnMutateResult`\>\>
+
+## Returns
+
+`void`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationOptions.md
new file mode 100644
index 000000000..444bed784
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationOptions.md
@@ -0,0 +1,32 @@
+---
+id: CreateMutationOptions
+title: CreateMutationOptions
+---
+
+# Type Alias: CreateMutationOptions\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutationOptions<TData, TError, TVariables, TOnMutateResult> = OmitKeyof<MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>, "_defaulted">;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:86](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L86)
+
+Options for createMutation
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `void`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationResult.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationResult.md
new file mode 100644
index 000000000..820c8b8ce
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateMutationResult.md
@@ -0,0 +1,32 @@
+---
+id: CreateMutationResult
+title: CreateMutationResult
+---
+
+# Type Alias: CreateMutationResult\&lt;TData, TError, TVariables, TOnMutateResult\>
+
+```ts
+type CreateMutationResult<TData, TError, TVariables, TOnMutateResult> = CreateBaseMutationResult<TData, TError, TVariables, TOnMutateResult>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:132](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L132)
+
+Result from createMutation
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TVariables
+
+`TVariables` = `unknown`
+
+### TOnMutateResult
+
+`TOnMutateResult` = `unknown`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryOptions.md
new file mode 100644
index 000000000..3e1753d68
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryOptions.md
@@ -0,0 +1,32 @@
+---
+id: CreateQueryOptions
+title: CreateQueryOptions
+---
+
+# Type Alias: CreateQueryOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> = CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:39](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L39)
+
+Options for createQuery
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryResult.md b/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryResult.md
new file mode 100644
index 000000000..ad3b18d2e
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/CreateQueryResult.md
@@ -0,0 +1,24 @@
+---
+id: CreateQueryResult
+title: CreateQueryResult
+---
+
+# Type Alias: CreateQueryResult\&lt;TData, TError\>
+
+```ts
+type CreateQueryResult<TData, TError> = CreateBaseQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:47](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L47)
+
+Result from createQuery
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateBaseQueryResult.md b/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateBaseQueryResult.md
new file mode 100644
index 000000000..37ec0e674
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateBaseQueryResult.md
@@ -0,0 +1,24 @@
+---
+id: DefinedCreateBaseQueryResult
+title: DefinedCreateBaseQueryResult
+---
+
+# Type Alias: DefinedCreateBaseQueryResult\&lt;TData, TError\>
+
+```ts
+type DefinedCreateBaseQueryResult<TData, TError> = DefinedQueryObserverResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:74](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L74)
+
+Options for createBaseQuery with initialData
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult.md b/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult.md
new file mode 100644
index 000000000..14908d180
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/DefinedCreateQueryResult.md
@@ -0,0 +1,24 @@
+---
+id: DefinedCreateQueryResult
+title: DefinedCreateQueryResult
+---
+
+# Type Alias: DefinedCreateQueryResult\&lt;TData, TError\>
+
+```ts
+type DefinedCreateQueryResult<TData, TError> = DefinedCreateBaseQueryResult<TData, TError>;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:80](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L80)
+
+Options for createQuery with initialData
+
+## Type Parameters
+
+### TData
+
+`TData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions.md
new file mode 100644
index 000000000..8514bf930
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/DefinedInitialDataOptions.md
@@ -0,0 +1,40 @@
+---
+id: DefinedInitialDataOptions
+title: DefinedInitialDataOptions
+---
+
+# Type Alias: DefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object;
+```
+
+Defined in: [packages/svelte-query/src/queryOptions.ts:19](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/queryOptions.ts#L19)
+
+## Type Declaration
+
+### initialData
+
+```ts
+initialData: 
+  | NonUndefinedGuard<TQueryFnData>
+| () => NonUndefinedGuard<TQueryFnData>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/HydrationBoundary.md b/mintlify/query/framework/svelte/reference/type-aliases/HydrationBoundary.md
new file mode 100644
index 000000000..397f1e190
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/HydrationBoundary.md
@@ -0,0 +1,12 @@
+---
+id: HydrationBoundary
+title: HydrationBoundary
+---
+
+# Type Alias: HydrationBoundary
+
+```ts
+type HydrationBoundary = SvelteComponent;
+```
+
+Defined in: node\_modules/.pnpm/svelte@5.39.3/node\_modules/svelte/types/index.d.ts:3092
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/MutationStateOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/MutationStateOptions.md
new file mode 100644
index 000000000..6963b3a84
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/MutationStateOptions.md
@@ -0,0 +1,50 @@
+---
+id: MutationStateOptions
+title: MutationStateOptions
+---
+
+# Type Alias: MutationStateOptions\&lt;TResult\>
+
+```ts
+type MutationStateOptions<TResult> = object;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:140](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L140)
+
+Options for useMutationState
+
+## Type Parameters
+
+### TResult
+
+`TResult` = `MutationState`
+
+## Properties
+
+### filters?
+
+```ts
+optional filters: MutationFilters;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:141](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L141)
+
+***
+
+### select()?
+
+```ts
+optional select: (mutation) => TResult;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:142](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L142)
+
+#### Parameters
+
+##### mutation
+
+`Mutation`\&lt;`unknown`, `DefaultError`, `unknown`, `unknown`\>
+
+#### Returns
+
+`TResult`
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/QueriesOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/QueriesOptions.md
new file mode 100644
index 000000000..5a7187e9f
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/QueriesOptions.md
@@ -0,0 +1,28 @@
+---
+id: QueriesOptions
+title: QueriesOptions
+---
+
+# Type Alias: QueriesOptions\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesOptions<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? CreateQueryOptionsForCreateQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryOptionsForCreateQueries<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesOptions<[...Tails], [...TResults, GetCreateQueryOptionsForCreateQueries<Head>], [...TDepth, 1]> : ReadonlyArray<unknown> extends T ? T : T extends CreateQueryOptionsForCreateQueries<infer TQueryFnData, infer TError, infer TData, infer TQueryKey>[] ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>[] : CreateQueryOptionsForCreateQueries[];
+```
+
+Defined in: [packages/svelte-query/src/createQueries.svelte.ts:129](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQueries.svelte.ts#L129)
+
+QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/QueriesResults.md b/mintlify/query/framework/svelte/reference/type-aliases/QueriesResults.md
new file mode 100644
index 000000000..24abb72b8
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/QueriesResults.md
@@ -0,0 +1,28 @@
+---
+id: QueriesResults
+title: QueriesResults
+---
+
+# Type Alias: QueriesResults\&lt;T, TResults, TDepth\>
+
+```ts
+type QueriesResults<T, TResults, TDepth> = TDepth["length"] extends MAXIMUM_DEPTH ? CreateQueryResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryResult<Head>] : T extends [infer Head, ...(infer Tails)] ? QueriesResults<[...Tails], [...TResults, GetCreateQueryResult<Head>], [...TDepth, 1]> : { [K in keyof T]: GetCreateQueryResult<T[K]> };
+```
+
+Defined in: [packages/svelte-query/src/createQueries.svelte.ts:171](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/createQueries.svelte.ts#L171)
+
+QueriesResults reducer recursively maps type param to results
+
+## Type Parameters
+
+### T
+
+`T` *extends* `any`[]
+
+### TResults
+
+`TResults` *extends* `any`[] = \[\]
+
+### TDepth
+
+`TDepth` *extends* `ReadonlyArray`\&lt;`number`\> = \[\]
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/QueryClientProviderProps.md b/mintlify/query/framework/svelte/reference/type-aliases/QueryClientProviderProps.md
new file mode 100644
index 000000000..a1b44be75
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/QueryClientProviderProps.md
@@ -0,0 +1,32 @@
+---
+id: QueryClientProviderProps
+title: QueryClientProviderProps
+---
+
+# Type Alias: QueryClientProviderProps
+
+```ts
+type QueryClientProviderProps = object;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:147](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L147)
+
+## Properties
+
+### children
+
+```ts
+children: Snippet;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:149](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L149)
+
+***
+
+### client
+
+```ts
+client: QueryClient;
+```
+
+Defined in: [packages/svelte-query/src/types.ts:148](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/types.ts#L148)
diff --git a/mintlify/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions.md b/mintlify/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions.md
new file mode 100644
index 000000000..4076baae6
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/type-aliases/UndefinedInitialDataOptions.md
@@ -0,0 +1,38 @@
+---
+id: UndefinedInitialDataOptions
+title: UndefinedInitialDataOptions
+---
+
+# Type Alias: UndefinedInitialDataOptions\&lt;TQueryFnData, TError, TData, TQueryKey\>
+
+```ts
+type UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object;
+```
+
+Defined in: [packages/svelte-query/src/queryOptions.ts:10](https://github.com/TanStack/query/blob/main/packages/svelte-query/src/queryOptions.ts#L10)
+
+## Type Declaration
+
+### initialData?
+
+```ts
+optional initialData: InitialDataFunction<NonUndefinedGuard<TQueryFnData>>;
+```
+
+## Type Parameters
+
+### TQueryFnData
+
+`TQueryFnData` = `unknown`
+
+### TError
+
+`TError` = `DefaultError`
+
+### TData
+
+`TData` = `TQueryFnData`
+
+### TQueryKey
+
+`TQueryKey` *extends* `QueryKey` = `QueryKey`
diff --git a/mintlify/query/framework/svelte/reference/variables/HydrationBoundary.md b/mintlify/query/framework/svelte/reference/variables/HydrationBoundary.md
new file mode 100644
index 000000000..f66eeefaf
--- /dev/null
+++ b/mintlify/query/framework/svelte/reference/variables/HydrationBoundary.md
@@ -0,0 +1,12 @@
+---
+id: HydrationBoundary
+title: HydrationBoundary
+---
+
+# Variable: HydrationBoundary
+
+```ts
+const HydrationBoundary: LegacyComponentType;
+```
+
+Defined in: node\_modules/.pnpm/svelte@5.39.3/node\_modules/svelte/types/index.d.ts:3092
diff --git a/mintlify/query/framework/svelte/ssr.md b/mintlify/query/framework/svelte/ssr.md
new file mode 100644
index 000000000..37ffca763
--- /dev/null
+++ b/mintlify/query/framework/svelte/ssr.md
@@ -0,0 +1,154 @@
+---
+id: overview
+title: SSR and SvelteKit
+---
+
+## Setup
+
+SvelteKit defaults to rendering routes with SSR. Because of this, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client.
+
+The recommended way to achieve this is to use the `browser` module from SvelteKit in your `QueryClient` object. This will not disable `queryClient.prefetchQuery()`, which is used in one of the solutions below.
+
+**src/routes/+layout.svelte**
+
+```svelte
+<script lang="ts">
+  import { browser } from '$app/environment'
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  })
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <slot />
+</QueryClientProvider>
+```
+
+## Prefetching data
+
+Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit.
+
+If you wish to view the ideal SSR setup, please have a look at the [SSR example](/query/framework/svelte/examples/ssr).
+
+### Using `initialData`
+
+Together with SvelteKit's [`load`](https://kit.svelte.dev/docs/load), you can pass the data loaded server-side into `createQuery`'s' `initialData` option:
+
+**src/routes/+page.ts**
+
+```ts
+export async function load() {
+  const posts = await getPosts()
+  return { posts }
+}
+```
+
+**src/routes/+page.svelte**
+
+```svelte
+<script>
+  import { createQuery } from '@tanstack/svelte-query'
+  import type { PageData } from './$types'
+
+  export let data: PageData
+
+  const query = createQuery(() => ({
+    queryKey: ['posts'],
+    queryFn: getPosts,
+    initialData: data.posts,
+  }))
+</script>
+```
+
+Pros:
+
+- This setup is minimal and this can be a quick solution for some cases
+- Works with both `+page.ts`/`+layout.ts` and `+page.server.ts`/`+layout.server.ts` load functions
+
+Cons:
+
+- If you are calling `createQuery` in a component deeper down in the tree you need to pass the `initialData` down to that point
+- If you are calling `createQuery` with the same query in multiple locations, you need to pass `initialData` to all of them
+- There is no way to know at what time the query was fetched on the server, so `dataUpdatedAt` and determining if the query needs refetching is based on when the page loaded instead
+
+### Using `prefetchQuery`
+
+Svelte Query supports prefetching queries on the server. Using this setup below, you can fetch data and pass it into QueryClientProvider before it is sent to the user's browser. Therefore, this data is already available in the cache, and no initial fetch occurs client-side.
+
+**src/routes/+layout.ts**
+
+```ts
+import { browser } from '$app/environment'
+import { QueryClient } from '@tanstack/svelte-query'
+
+export async function load() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  })
+
+  return { queryClient }
+}
+```
+
+**src/routes/+layout.svelte**
+
+```svelte
+<script lang="ts">
+  import { QueryClientProvider } from '@tanstack/svelte-query'
+  import type { LayoutData } from './$types'
+
+  export let data: LayoutData
+</script>
+
+<QueryClientProvider client={data.queryClient}>
+  <slot />
+</QueryClientProvider>
+```
+
+**src/routes/+page.ts**
+
+```ts
+export async function load({ parent, fetch }) {
+  const { queryClient } = await parent()
+
+  // You need to use the SvelteKit fetch function here
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: async () => (await fetch('/api/posts')).json(),
+  })
+}
+```
+
+**src/routes/+page.svelte**
+
+```svelte
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+
+  // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
+  const query = createQuery(() => ({
+    queryKey: ['posts'],
+    queryFn: async () => (await fetch('/api/posts')).json(),
+  }))
+</script>
+```
+
+Pros:
+
+- Server-loaded data can be accessed anywhere without prop-drilling
+- No initial fetch occurs client-side once the page is rendered, as the query cache retains all information about the query was made including `dataUpdatedAt`
+
+Cons:
+
+- Requires more files for initial setup
+- Will not work with `+page.server.ts`/`+layout.server.ts` load functions (however, APIs which are used with TanStack Query need to be fully exposed to the browser anyway)
diff --git a/mintlify/query/framework/vue/devtools.md b/mintlify/query/framework/vue/devtools.md
new file mode 100644
index 000000000..cbba672f9
--- /dev/null
+++ b/mintlify/query/framework/vue/devtools.md
@@ -0,0 +1,145 @@
+---
+id: devtools
+title: Devtools
+---
+
+Wave your hands in the air and shout hooray because Vue Query comes with dedicated devtools! 🥳
+
+When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
+
+> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
+>
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
+
+## Component based Devtools (Vue 3)
+
+You can directly integrate the devtools component into your page using a dedicated package.
+Component-based devtools use a framework-agnostic implementation and are always up-to-date.
+
+The devtools component is a separate package that you need to install:
+
+```bash
+npm i @tanstack/vue-query-devtools
+```
+
+or
+
+```bash
+pnpm add @tanstack/vue-query-devtools
+```
+
+or
+
+```bash
+yarn add @tanstack/vue-query-devtools
+```
+
+or
+
+```bash
+bun add @tanstack/vue-query-devtools
+```
+
+By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
+
+```vue
+<script setup>
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+</script>
+
+<template>
+  <h1>The app!</h1>
+  <VueQueryDevtools />
+</template>
+```
+
+### Options
+
+- `initialIsOpen: boolean`
+  - Set this `true` if you want the dev tools to default to being open.
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
+  - Defaults to `bottom-right`.
+  - The position of the TanStack logo to open and close the devtools panel.
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`.
+  - The position of the Vue Query devtools panel.
+- `client?: QueryClient`
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. The initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Embedded Mode
+
+Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
+
+Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <h1>The app!</h1>
+  <button @click="isOpen = !isOpen">
+    {{ isOpen ? 'Close' : 'Open' }} the devtools panel
+  </button>
+  <VueQueryDevtoolsPanel v-if="isOpen" :onClose="() => (isOpen = false)" />
+</template>
+```
+
+### Options
+
+- `style?: Partial<CSSStyleDeclaration>`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => void`
+  - Callback function that is called when the devtools panel is closed
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: "light" | "dark" | "system"`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.
+
+## Traditional Devtools
+
+Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events.
+Devtool code will be treeshaken from production bundles by default.
+
+To make it work, you only need to enable it in the plugin options:
+
+```ts
+app.use(VueQueryPlugin, {
+  enableDevtoolsV6Plugin: true,
+})
+```
+
+Both v6 and v7 versions of devtools are supported.
diff --git a/mintlify/query/framework/vue/examples/2.6-basic.md b/mintlify/query/framework/vue/examples/2.6-basic.md
new file mode 100644
index 000000000..b54ccfb2e
--- /dev/null
+++ b/mintlify/query/framework/vue/examples/2.6-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Vue 2.6"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/vue/examples/2.6-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/vue/2.6-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/vue/examples/2.7-basic.md b/mintlify/query/framework/vue/examples/2.7-basic.md
new file mode 100644
index 000000000..03ad33274
--- /dev/null
+++ b/mintlify/query/framework/vue/examples/2.7-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Vue 2.7"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/vue/examples/2.7-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/vue/2.7-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/vue/examples/basic.md b/mintlify/query/framework/vue/examples/basic.md
new file mode 100644
index 000000000..f7ba1b973
--- /dev/null
+++ b/mintlify/query/framework/vue/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/vue/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/vue/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/vue/examples/nuxt3.md b/mintlify/query/framework/vue/examples/nuxt3.md
new file mode 100644
index 000000000..16072184f
--- /dev/null
+++ b/mintlify/query/framework/vue/examples/nuxt3.md
@@ -0,0 +1,12 @@
+---
+title: "Nuxt 3"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/vue/examples/nuxt3)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/vue/nuxt3)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/vue/examples/persister.md b/mintlify/query/framework/vue/examples/persister.md
new file mode 100644
index 000000000..74e9a5b49
--- /dev/null
+++ b/mintlify/query/framework/vue/examples/persister.md
@@ -0,0 +1,12 @@
+---
+title: "Persister"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/query/latest/docs/framework/vue/examples/persister)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb/examples/vue/persister)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/query/framework/vue/graphql.md b/mintlify/query/framework/vue/graphql.md
new file mode 100644
index 000000000..3b4d5e6a5
--- /dev/null
+++ b/mintlify/query/framework/vue/graphql.md
@@ -0,0 +1,9 @@
+---
+id: graphql
+title: GraphQL
+ref: docs/framework/react/graphql.md
+replace: { 'React': 'Vue', 'react-query': 'vue-query' }
+---
+
+[//]: # 'Codegen'
+[//]: # 'Codegen'
diff --git a/mintlify/query/framework/vue/guides/background-fetching-indicators.md b/mintlify/query/framework/vue/guides/background-fetching-indicators.md
new file mode 100644
index 000000000..2837364f4
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/background-fetching-indicators.md
@@ -0,0 +1,45 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+---
+
+[//]: # 'Example'
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const { isPending, isFetching, isError, data, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: getTodos,
+})
+</script>
+
+<template>
+  <div v-if="isFetching">Refreshing...</div>
+  <span v-if="isPending">Loading...</span>
+  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <!-- We can assume by this point that `isSuccess === true` -->
+  <ul v-else-if="data">
+    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
+  </ul>
+</template>
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```vue
+<script setup>
+import { useIsFetching } from '@tanstack/vue-query'
+
+const isFetching = useIsFetching()
+</script>
+
+<template>
+  <div v-if="isFetching">Queries are fetching in the background...</div>
+</template>
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/caching.md b/mintlify/query/framework/vue/guides/caching.md
new file mode 100644
index 000000000..de22679eb
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/caching.md
@@ -0,0 +1,5 @@
+---
+id: caching
+title: Caching Examples
+ref: docs/framework/react/guides/caching.md
+---
diff --git a/mintlify/query/framework/vue/guides/custom-client.md b/mintlify/query/framework/vue/guides/custom-client.md
new file mode 100644
index 000000000..dc60fc649
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/custom-client.md
@@ -0,0 +1,72 @@
+---
+id: custom-client
+title: Custom Client
+---
+
+### Custom client
+
+Vue Query allows providing custom `QueryClient` for Vue context.
+
+It might be handy when you need to create `QueryClient` beforehand to integrate it with other libraries that do not have access to the Vue context.
+
+For this reason, `VueQueryPlugin` accepts either `QueryClientConfig` or `QueryClient` as a plugin options.
+
+If You provide `QueryClientConfig`, `QueryClient` instance will be created internally and provided to Vue context.
+
+```tsx
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: { queries: { staleTime: 3600 } },
+  },
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+```tsx
+const myClient = new QueryClient(queryClientConfig)
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClient: myClient,
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+### Custom context key
+
+You can also customize the key under which `QueryClient` will be accessible in Vue context. This can be useful is you want to avoid name clashing between multiple apps on the same page with Vue2.
+
+It works both with default, and custom `QueryClient`
+
+```tsx
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClientKey: 'Foo',
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+```tsx
+const myClient = new QueryClient(queryClientConfig)
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClient: myClient,
+  queryClientKey: 'Foo',
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+To use the custom client key, You have to provide it as a query options
+
+```js
+useQuery({
+  queryKey: ['query1'],
+  queryFn: fetcher,
+  queryClientKey: 'foo',
+})
+```
+
+Internally custom key will be combined with default query key as a suffix. But user do not have to worry about it.
+
+```tsx
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClientKey: 'Foo',
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo
+```
diff --git a/mintlify/query/framework/vue/guides/default-query-function.md b/mintlify/query/framework/vue/guides/default-query-function.md
new file mode 100644
index 000000000..c777569d1
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/default-query-function.md
@@ -0,0 +1,32 @@
+---
+id: default-query-function
+title: Default Query Function
+ref: docs/framework/react/guides/default-query-function.md
+---
+
+[//]: # 'Example'
+
+```tsx
+// Define a default query function that will receive the query key
+const defaultQueryFn = async ({ queryKey }) => {
+  const { data } = await axios.get(
+    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
+  )
+  return data
+}
+
+// provide the default query function to your app with defaultOptions
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: { queries: { queryFn: defaultQueryFn } },
+  },
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+
+// All you have to do now is pass a key!
+const { status, data, error, isFetching } = useQuery({
+  queryKey: [`/posts/${postId}`],
+})
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/vue/guides/dependent-queries.md b/mintlify/query/framework/vue/guides/dependent-queries.md
new file mode 100644
index 000000000..db536073e
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/dependent-queries.md
@@ -0,0 +1,55 @@
+---
+id: dependent-queries
+title: Dependent Queries
+ref: docs/framework/react/guides/dependent-queries.md
+---
+
+[//]: # 'Example'
+
+```js
+// Get the user
+const { data: user } = useQuery({
+  queryKey: ['user', email],
+  queryFn: () => getUserByEmail(email.value),
+})
+
+const userId = computed(() => user.value?.id)
+const enabled = computed(() => !!user.value?.id)
+
+// Then get the user's projects
+const { isIdle, data: projects } = useQuery({
+  queryKey: ['projects', userId],
+  queryFn: () => getProjectsByUser(userId.value),
+  enabled, // The query will not execute until `enabled == true`
+})
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```tsx
+// Get the users ids
+const { data: userIds } = useQuery({
+  queryKey: ['users'],
+  queryFn: getUsersData,
+  select: (users) => users.map((user) => user.id),
+})
+
+const queries = computed(() => {
+  return userIds.value.length
+    ? userIds.value.map((id) => {
+        return {
+          queryKey: ['messages', id],
+          queryFn: () => getMessagesByUsers(id),
+        }
+      })
+    : []
+})
+
+// Then get the users messages
+const usersMessages = useQueries({
+  queries, // if userIds.value is undefined or has no items, an empty array will be returned
+})
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/disabling-queries.md b/mintlify/query/framework/vue/guides/disabling-queries.md
new file mode 100644
index 000000000..50ee2fd77
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/disabling-queries.md
@@ -0,0 +1,79 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+ref: docs/framework/react/guides/disabling-queries.md
+---
+
+[//]: # 'Example'
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+  enabled: false,
+})
+</script>
+
+<template>
+  <button @click="refetch()">Fetch Todos</button>
+  <span v-if="isLoading">Loading...</span>
+  <span v-else-if="isError">Error: {{ error?.message }}</span>
+  <div v-else-if="data">
+    <span v-if="isFetching">Fetching...</span>
+    <ul>
+      <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
+    </ul>
+  </div>
+  <span v-else>Not ready...</span>
+</template>
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const filter = ref('')
+const isEnabled = computed(() => !!filter.value)
+const { data } = useQuery({
+  queryKey: ['todos', filter],
+  queryFn: () => fetchTodos(filter),
+  // ⬇️ disabled as long as the filter is empty
+  enabled: isEnabled,
+})
+</script>
+
+<template>
+  <span v-if="data">Filter was set and data is here!</span>
+</template>
+```
+
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```vue
+<script setup>
+import { useQuery, skipToken } from '@tanstack/vue-query'
+
+const filter = ref('')
+const queryFn = computed(() =>
+  !!filter.value ? () => fetchTodos(filter) : skipToken,
+)
+const { data } = useQuery({
+  queryKey: ['todos', filter],
+  // ⬇️ disabled as long as the filter is undefined or empty
+  queryFn: queryFn,
+})
+</script>
+
+<template>
+  <span v-if="data">Filter was set and data is here!</span>
+</template>
+```
+
+[//]: # 'Example3'
diff --git a/mintlify/query/framework/vue/guides/does-this-replace-client-state.md b/mintlify/query/framework/vue/guides/does-this-replace-client-state.md
new file mode 100644
index 000000000..7e790beea
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/does-this-replace-client-state.md
@@ -0,0 +1,6 @@
+---
+id: does-this-replace-client-state
+title: Does Vue Query replace Vuex, Pinia or other global state managers?
+ref: docs/framework/react/guides/does-this-replace-client-state.md
+replace: { 'Redux, MobX': 'Vuex, Pinia' }
+---
diff --git a/mintlify/query/framework/vue/guides/filters.md b/mintlify/query/framework/vue/guides/filters.md
new file mode 100644
index 000000000..870da98c2
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/filters.md
@@ -0,0 +1,5 @@
+---
+id: filters
+title: Filters
+ref: docs/framework/react/guides/filters.md
+---
diff --git a/mintlify/query/framework/vue/guides/important-defaults.md b/mintlify/query/framework/vue/guides/important-defaults.md
new file mode 100644
index 000000000..21cd18142
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/important-defaults.md
@@ -0,0 +1,8 @@
+---
+id: important-defaults
+title: Important Defaults
+ref: docs/framework/react/guides/important-defaults.md
+---
+
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/guides/infinite-queries.md b/mintlify/query/framework/vue/guides/infinite-queries.md
new file mode 100644
index 000000000..1c7e8b702
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/infinite-queries.md
@@ -0,0 +1,57 @@
+---
+id: infinite-queries
+title: Infinite Queries
+ref: docs/framework/react/guides/infinite-queries.md
+---
+
+[//]: # 'Example'
+
+```vue
+<script setup>
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+const fetchProjects = async ({ pageParam }) => {
+  const res = await fetch('/api/projects?cursor=' + pageParam)
+  return res.json()
+}
+
+const {
+  data,
+  error,
+  fetchNextPage,
+  hasNextPage,
+  isFetching,
+  isFetchingNextPage,
+  isPending,
+  isError,
+} = useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+  initialPageParam: 0,
+  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+})
+</script>
+
+<template>
+  <span v-if="isPending">Loading...</span>
+  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <div v-else-if="data">
+    <span v-if="isFetching && !isFetchingNextPage">Fetching...</span>
+    <ul v-for="(group, index) in data.pages" :key="index">
+      <li v-for="project in group.projects" :key="project.id">
+        {{ project.name }}
+      </li>
+    </ul>
+    <button
+      @click="() => fetchNextPage()"
+      :disabled="!hasNextPage || isFetchingNextPage"
+    >
+      <span v-if="isFetchingNextPage">Loading more...</span>
+      <span v-else-if="hasNextPage">Load More</span>
+      <span v-else>Nothing more to load</span>
+    </button>
+  </div>
+</template>
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/vue/guides/initial-query-data.md b/mintlify/query/framework/vue/guides/initial-query-data.md
new file mode 100644
index 000000000..e14c064ec
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/initial-query-data.md
@@ -0,0 +1,8 @@
+---
+id: initial-query-data
+title: Initial Query Data
+ref: docs/framework/react/guides/initial-query-data.md
+---
+
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/guides/invalidations-from-mutations.md b/mintlify/query/framework/vue/guides/invalidations-from-mutations.md
new file mode 100644
index 000000000..9632d1749
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/invalidations-from-mutations.md
@@ -0,0 +1,24 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+ref: docs/framework/react/guides/invalidations-from-mutations.md
+---
+
+[//]: # 'Example2'
+
+```tsx
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+
+const queryClient = useQueryClient()
+
+// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
+const mutation = useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+    queryClient.invalidateQueries({ queryKey: ['reminders'] })
+  },
+})
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/migrating-to-v5.md b/mintlify/query/framework/vue/guides/migrating-to-v5.md
new file mode 100644
index 000000000..ab15ce4ec
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/migrating-to-v5.md
@@ -0,0 +1,41 @@
+---
+id: migrating-to-tanstack-query-5
+title: Migrating to TanStack Query v5
+ref: docs/framework/react/guides/migrating-to-v5.md
+---
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+
+## Vue Query Breaking Changes
+
+### `useQueries` composable returns `ref` instead of `reactive`
+
+To fix compatibility with Vue 2, `useQueries` composable now returns `queries` array wrapped in `ref`.
+Previously `reactive` was returned which led to multiple problems:
+
+- User could spread return value loosing reactivity.
+- `readonly` wrapper used for return value was breaking Vue 2 reactivity detection mechanism. This was a silent issue in Vue 2.6, but appeared as error in Vue 2.7.
+- Vue 2 does not support arrays as a root value of `reactive`.
+
+With this change all of those issues are fixed.
+
+Also this aligns `useQueries` with other composables which return all of the values as `refs`.
+
+### Vue v3.3 is now required
+
+To be able to provide new features following Vue releases, we now require Vue 3 to be at least in v3.3 version.
+Requirements for Vue 2.x remain unchanged.
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+[//]: # 'FrameworkSpecificNewFeatures'
+
+### Ability to run `vue-query` composables in `injectionContext`
+
+Previously `vue-query` composables could be run only within `setup` function of the component.  
+We had an escape hatch in place to allow those hooks to be run anywhere if user would provide `queryClient` as a composable option.
+
+Now you can use `vue-query` composables in any function that supports `injectionContext`. Ex. router navigation guards.
+When using this new feature, make sure that `vue-query` composable is running within `effectScope`. Otherwise it might lead to memory leaks.
+We have added `dev-only` warnings to inform users about potential misusage.
+
+[//]: # 'FrameworkSpecificNewFeatures'
diff --git a/mintlify/query/framework/vue/guides/mutations.md b/mintlify/query/framework/vue/guides/mutations.md
new file mode 100644
index 000000000..6ff0e00fc
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/mutations.md
@@ -0,0 +1,97 @@
+---
+id: mutations
+title: Mutations
+ref: docs/framework/react/guides/mutations.md
+---
+
+[//]: # 'Example'
+
+```vue
+<script setup>
+import { useMutation } from '@tanstack/vue-query'
+
+const { isPending, isError, error, isSuccess, mutate } = useMutation({
+  mutationFn: (newTodo) => axios.post('/todos', newTodo),
+})
+
+function addTodo() {
+  mutate({ id: new Date(), title: 'Do Laundry' })
+}
+</script>
+
+<template>
+  <span v-if="isPending">Adding todo...</span>
+  <span v-else-if="isError">An error occurred: {{ error.message }}</span>
+  <span v-else-if="isSuccess">Todo added!</span>
+  <button @click="addTodo">Create Todo</button>
+</template>
+```
+
+[//]: # 'Example'
+[//]: # 'Info1'
+[//]: # 'Info1'
+[//]: # 'Example2'
+[//]: # 'Example2'
+[//]: # 'Example3'
+
+```vue
+<script>
+import { useMutation } from '@tanstack/vue-query'
+
+const { error, mutate, reset } = useMutation({
+  mutationFn: (newTodo) => axios.post('/todos', newTodo),
+})
+
+function addTodo() {
+  mutate({ id: new Date(), title: 'Do Laundry' })
+}
+</script>
+
+<template>
+  <span v-else-if="error">
+    <span>An error occurred: {{ error.message }}</span>
+    <button @click="reset">Reset error</button>
+  </span>
+  <button @click="addTodo">Create Todo</button>
+</template>
+```
+
+[//]: # 'Example3'
+[//]: # 'Example11'
+
+```js
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+// we need a default mutation function so that paused mutations can resume after a page reload
+queryClient.setMutationDefaults({
+  mutationKey: ['todos'],
+  mutationFn: ({ id, data }) => {
+    return api.updateTodo(id, data)
+  },
+})
+
+const vueQueryOptions: VueQueryPluginOptions = {
+  queryClient: client,
+  clientPersister: (queryClient) => {
+    return persistQueryClient({
+      queryClient,
+      persister: createAsyncStoragePersister({ storage: localStorage }),
+    })
+  },
+  clientPersisterOnSuccess: (queryClient) => {
+    queryClient.resumePausedMutations()
+  },
+}
+
+createApp(App).use(VueQueryPlugin, vueQueryOptions).mount('#app')
+```
+
+[//]: # 'Example11'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/guides/network-mode.md b/mintlify/query/framework/vue/guides/network-mode.md
new file mode 100644
index 000000000..e773e73ff
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/network-mode.md
@@ -0,0 +1,5 @@
+---
+id: network-mode
+title: Network Mode
+ref: docs/framework/react/guides/network-mode.md
+---
diff --git a/mintlify/query/framework/vue/guides/optimistic-updates.md b/mintlify/query/framework/vue/guides/optimistic-updates.md
new file mode 100644
index 000000000..be3d9cf54
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/optimistic-updates.md
@@ -0,0 +1,6 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+ref: docs/framework/react/guides/optimistic-updates.md
+replace: { 'React': 'Vue' }
+---
diff --git a/mintlify/query/framework/vue/guides/paginated-queries.md b/mintlify/query/framework/vue/guides/paginated-queries.md
new file mode 100644
index 000000000..5b2347c25
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/paginated-queries.md
@@ -0,0 +1,53 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+ref: docs/framework/react/guides/paginated-queries.md
+---
+
+[//]: # 'Example2'
+
+```vue
+<script setup lang="ts">
+import { ref, Ref } from 'vue'
+import { useQuery, keepPreviousData } from '@tanstack/vue-query'
+
+const fetcher = (page: Ref<number>) =>
+  fetch(
+    `https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
+  ).then((response) => response.json())
+
+const page = ref(1)
+const { isPending, isError, data, error, isFetching, isPlaceholderData } =
+  useQuery({
+    queryKey: ['projects', page],
+    queryFn: () => fetcher(page),
+    placeholderData: keepPreviousData,
+  })
+const prevPage = () => {
+  page.value = Math.max(page.value - 1, 1)
+}
+const nextPage = () => {
+  if (!isPlaceholderData.value) {
+    page.value = page.value + 1
+  }
+}
+</script>
+
+<template>
+  <h1>Posts</h1>
+  <p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>
+  <button @click="prevPage">Prev Page</button>
+  <button @click="nextPage">Next Page</button>
+  <div v-if="isPending">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <ul>
+      <li v-for="item in data" :key="item.id">
+        {{ item.title }}
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/parallel-queries.md b/mintlify/query/framework/vue/guides/parallel-queries.md
new file mode 100644
index 000000000..4942c9d7d
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/parallel-queries.md
@@ -0,0 +1,38 @@
+---
+id: parallel-queries
+title: Parallel Queries
+ref: docs/framework/react/guides/parallel-queries.md
+---
+
+[//]: # 'Example'
+
+```vue
+<script setup lang="ts">
+// The following queries will execute in parallel
+const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
+const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
+const projectsQuery = useQuery({
+  queryKey: ['projects'],
+  queryFn: fetchProjects,
+})
+</script>
+```
+
+[//]: # 'Example'
+[//]: # 'Info'
+[//]: # 'Info'
+[//]: # 'Example2'
+
+```js
+const users = computed(...)
+const queries = computed(() => users.value.map(user => {
+    return {
+      queryKey: ['user', user.id],
+      queryFn: () => fetchUserById(user.id),
+    }
+  })
+);
+const userQueries = useQueries({queries: queries})
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/placeholder-query-data.md b/mintlify/query/framework/vue/guides/placeholder-query-data.md
new file mode 100644
index 000000000..c2a4aa66d
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/placeholder-query-data.md
@@ -0,0 +1,38 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+ref: docs/framework/react/guides/placeholder-query-data.md
+---
+
+[//]: # 'ExampleValue'
+
+```tsx
+const result = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/todos'),
+  placeholderData: placeholderTodos,
+})
+```
+
+[//]: # 'ExampleValue'
+[//]: # 'Memoization'
+[//]: # 'Memoization'
+[//]: # 'ExampleCache'
+
+```tsx
+const result = useQuery({
+  queryKey: ['blogPost', blogPostId],
+  queryFn: () => fetch(`/blogPosts/${blogPostId}`),
+  placeholderData: () => {
+    // Use the smaller/preview version of the blogPost from the 'blogPosts'
+    // query as the placeholder data for this blogPost query
+    return queryClient
+      .getQueryData(['blogPosts'])
+      ?.find((d) => d.id === blogPostId)
+  },
+})
+```
+
+[//]: # 'ExampleCache'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/guides/polling.md b/mintlify/query/framework/vue/guides/polling.md
new file mode 100644
index 000000000..1f096cd00
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/polling.md
@@ -0,0 +1,9 @@
+---
+id: polling
+title: Polling
+ref: docs/framework/react/guides/polling.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
+
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/vue/guides/prefetching.md b/mintlify/query/framework/vue/guides/prefetching.md
new file mode 100644
index 000000000..394643487
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/prefetching.md
@@ -0,0 +1,47 @@
+---
+id: prefetching
+title: Prefetching
+---
+
+If you're lucky enough, you may know enough about what your users will do to be able to prefetch the data they need before it's needed! If this is the case, you can use the `prefetchQuery` method to prefetch the results of a query to be placed into the cache:
+
+[//]: # 'ExamplePrefetching'
+
+```tsx
+const prefetchTodos = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+}
+```
+
+[//]: # 'ExamplePrefetching'
+
+- If **fresh** data for this query is already in the cache, the data will not be fetched
+- If a `staleTime` is passed eg. `prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })` and the data is older than the specified `staleTime`, the query will be fetched
+- If no instances of `useQuery` appear for a prefetched query, it will be deleted and garbage collected after the time specified in `gcTime`.
+
+## Prefetching Infinite Queries
+
+Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option, in which case you also have to provide a `getNextPageParam` function:
+
+[//]: # 'ExampleInfiniteQuery'
+
+```tsx
+const prefetchProjects = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    pages: 3, // prefetch the first 3 pages
+  })
+}
+```
+
+[//]: # 'ExampleInfiniteQuery'
+
+The above code will try to prefetch 3 pages in order, and `getNextPageParam` will be executed for each page to determine the next page to prefetch. If `getNextPageParam` returns `undefined`, the prefetching will stop.
diff --git a/mintlify/query/framework/vue/guides/queries.md b/mintlify/query/framework/vue/guides/queries.md
new file mode 100644
index 000000000..2b0f45f29
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/queries.md
@@ -0,0 +1,63 @@
+---
+id: queries
+title: Queries
+ref: docs/framework/react/guides/queries.md
+---
+
+[//]: # 'Example'
+
+```ts
+import { useQuery } from '@tanstack/vue-query'
+
+const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
+```
+
+[//]: # 'Example'
+[//]: # 'Example3'
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const { isPending, isError, data, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
+</script>
+
+<template>
+  <span v-if="isPending">Loading...</span>
+  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <!-- We can assume by this point that `isSuccess === true` -->
+  <ul v-else-if="data">
+    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
+  </ul>
+</template>
+```
+
+[//]: # 'Example3'
+[//]: # 'Example4'
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const { status, data, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
+</script>
+
+<template>
+  <span v-if="status === 'pending'">Loading...</span>
+  <span v-else-if="status === 'error'">Error: {{ error.message }}</span>
+  <!-- also status === 'success', but "else" logic works, too -->
+  <ul v-else-if="data">
+    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
+  </ul>
+</template>
+```
+
+[//]: # 'Example4'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/guides/query-cancellation.md b/mintlify/query/framework/vue/guides/query-cancellation.md
new file mode 100644
index 000000000..48009932c
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-cancellation.md
@@ -0,0 +1,25 @@
+---
+id: query-cancellation
+title: Query Cancellation
+ref: docs/framework/react/guides/query-cancellation.md
+---
+
+[//]: # 'Example7'
+
+```ts
+const query = useQuery({
+  queryKey: ['todos'],
+  queryFn: async ({ signal }) => {
+    const resp = await fetch('/todos', { signal })
+    return resp.json()
+  },
+})
+
+const queryClient = useQueryClient()
+
+function onButtonClick() {
+  queryClient.cancelQueries({ queryKey: ['todos'] })
+}
+```
+
+[//]: # 'Example7'
diff --git a/mintlify/query/framework/vue/guides/query-functions.md b/mintlify/query/framework/vue/guides/query-functions.md
new file mode 100644
index 000000000..c0a3d963a
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-functions.md
@@ -0,0 +1,22 @@
+---
+id: query-functions
+title: Query Functions
+ref: docs/framework/react/guides/query-functions.md
+---
+
+[//]: # 'Example4'
+
+```js
+const result = useQuery({
+  queryKey: ['todos', { status, page }],
+  queryFn: fetchTodoList,
+})
+
+// Access the key, status and page variables in your query function!
+function fetchTodoList({ queryKey }) {
+  const [_key, { status, page }] = queryKey
+  return new Promise()
+}
+```
+
+[//]: # 'Example4'
diff --git a/mintlify/query/framework/vue/guides/query-invalidation.md b/mintlify/query/framework/vue/guides/query-invalidation.md
new file mode 100644
index 000000000..0228310d4
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-invalidation.md
@@ -0,0 +1,6 @@
+---
+id: query-invalidation
+title: Query Invalidation
+ref: docs/framework/react/guides/query-invalidation.md
+replace: { 'react-query': 'vue-query' }
+---
diff --git a/mintlify/query/framework/vue/guides/query-keys.md b/mintlify/query/framework/vue/guides/query-keys.md
new file mode 100644
index 000000000..8ab250d2a
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-keys.md
@@ -0,0 +1,21 @@
+---
+id: query-keys
+title: Query Keys
+ref: docs/framework/react/guides/query-keys.md
+---
+
+[//]: # 'Example5'
+
+```ts
+import type { Ref } from 'vue'
+
+function useTodos(todoId: Ref<string>) {
+  const queryKey = ['todos', todoId]
+  return useQuery({
+    queryKey,
+    queryFn: () => fetchTodoById(todoId.value),
+  })
+}
+```
+
+[//]: # 'Example5'
diff --git a/mintlify/query/framework/vue/guides/query-options.md b/mintlify/query/framework/vue/guides/query-options.md
new file mode 100644
index 000000000..f2bb35eac
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-options.md
@@ -0,0 +1,6 @@
+---
+id: query-options
+title: Query Options
+ref: docs/framework/react/guides/query-options.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/guides/query-retries.md b/mintlify/query/framework/vue/guides/query-retries.md
new file mode 100644
index 000000000..33163b5e3
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/query-retries.md
@@ -0,0 +1,39 @@
+---
+id: query-retries
+title: Query Retries
+ref: docs/framework/react/guides/query-retries.md
+replace: { 'Provider': 'Plugin' }
+---
+
+[//]: # 'Example'
+
+```tsx
+import { useQuery } from '@tanstack/vue-query'
+
+// Make a specific query retry a certain number of times
+const result = useQuery({
+  queryKey: ['todos', 1],
+  queryFn: fetchTodoListPage,
+  retry: 10, // Will retry failed requests 10 times before displaying an error
+})
+```
+
+[//]: # 'Example'
+[//]: # 'Example2'
+
+```ts
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+const vueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      },
+    },
+  },
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+[//]: # 'Example2'
diff --git a/mintlify/query/framework/vue/guides/scroll-restoration.md b/mintlify/query/framework/vue/guides/scroll-restoration.md
new file mode 100644
index 000000000..cb66c4b46
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/scroll-restoration.md
@@ -0,0 +1,5 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+ref: docs/framework/react/guides/scroll-restoration.md
+---
diff --git a/mintlify/query/framework/vue/guides/ssr.md b/mintlify/query/framework/vue/guides/ssr.md
new file mode 100644
index 000000000..ce6820d44
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/ssr.md
@@ -0,0 +1,258 @@
+---
+id: ssr
+title: SSR
+---
+
+Vue Query supports prefetching multiple queries on the server and then _dehydrating_ those queries to the queryClient. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, Vue Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
+
+## Using Nuxt.js
+
+### Nuxt 3
+
+First create `vue-query.ts` file in your `plugins` directory with the following content:
+
+```ts
+import type {
+  DehydratedState,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query'
+import {
+  VueQueryPlugin,
+  QueryClient,
+  hydrate,
+  dehydrate,
+} from '@tanstack/vue-query'
+// Nuxt 3 app aliases
+import { defineNuxtPlugin, useState } from '#imports'
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 5000 } },
+  })
+  const options: VueQueryPluginOptions = { queryClient }
+
+  nuxt.vueApp.use(VueQueryPlugin, options)
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (import.meta.client) {
+    hydrate(queryClient, vueQueryState.value)
+  }
+})
+```
+
+Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
+
+- Prefetch all the queries that you need with `queryClient.prefetchQuery` or `suspense`
+
+```ts
+export default defineComponent({
+  setup() {
+    const { data, suspense } = useQuery({
+      queryKey: ['test'],
+      queryFn: fetcher,
+    })
+
+    onServerPrefetch(async () => {
+      await suspense()
+    })
+
+    return { data }
+  },
+})
+```
+
+### Nuxt 2
+
+First create `vue-query.js` file in your `plugins` directory with the following content:
+
+```js
+import Vue from 'vue'
+import { VueQueryPlugin, QueryClient, hydrate } from '@tanstack/vue-query'
+
+export default (context) => {
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 5000 } },
+  })
+
+  if (process.server) {
+    context.ssrContext.VueQuery = queryClient
+  }
+
+  if (process.client) {
+    Vue.use(VueQueryPlugin, { queryClient })
+
+    if (context.nuxtState && context.nuxtState.vueQueryState) {
+      hydrate(queryClient, context.nuxtState.vueQueryState)
+    }
+  }
+}
+```
+
+Add this plugin to your `nuxt.config.js`
+
+```js
+module.exports = {
+  ...
+  plugins: ['~/plugins/vue-query.js'],
+}
+```
+
+Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
+
+- Use `useContext` to get nuxt context
+- Use `useQueryClient` to get server-side instance of `queryClient`
+- Prefetch all the queries that you need with `queryClient.prefetchQuery` or `suspense`
+- Dehydrate `queryClient` to the `nuxtContext`
+
+```vue
+// pages/todos.vue
+<template>
+  <div>
+    <button @click="refetch">Refetch</button>
+    <p>{{ data }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onServerPrefetch,
+  useContext,
+} from '@nuxtjs/composition-api'
+import { useQuery, useQueryClient, dehydrate } from '@tanstack/vue-query'
+
+export default defineComponent({
+  setup() {
+    // Get QueryClient either from SSR context, or Vue context
+    const { ssrContext } = useContext()
+    // Make sure to provide `queryClient` as a second parameter to `useQuery` calls
+    const queryClient =
+      (ssrContext != null && ssrContext.VueQuery) || useQueryClient()
+
+    // This will be prefetched and sent from the server
+    const { data, refetch, suspense } = useQuery(
+      {
+        queryKey: ['todos'],
+        queryFn: getTodos,
+      },
+      queryClient,
+    )
+    // This won't be prefetched, it will start fetching on client side
+    const { data2 } = useQuery(
+      {
+        queryKey: 'todos2',
+        queryFn: getTodos,
+      },
+      queryClient,
+    )
+
+    onServerPrefetch(async () => {
+      await suspense()
+      ssrContext.nuxt.vueQueryState = dehydrate(queryClient)
+    })
+
+    return {
+      refetch,
+      data,
+    }
+  },
+})
+</script>
+```
+
+As demonstrated, it's fine to prefetch some queries and let others fetch on the queryClient. This means you can control what content server renders or not by adding or removing `prefetchQuery` or `suspense` for a specific query.
+
+## Using Vite SSR
+
+Sync VueQuery client state with [vite-ssr](https://github.com/frandiox/vite-ssr) in order to serialize it in the DOM:
+
+```js
+// main.js (entry point)
+import App from './App.vue'
+import viteSSR from 'vite-ssr/vue'
+import {
+  QueryClient,
+  VueQueryPlugin,
+  hydrate,
+  dehydrate,
+} from '@tanstack/vue-query'
+
+export default viteSSR(App, { routes: [] }, ({ app, initialState }) => {
+  // -- This is Vite SSR main hook, which is called once per request
+
+  // Create a fresh VueQuery client
+  const queryClient = new QueryClient()
+
+  // Sync initialState with the client state
+  if (import.meta.env.SSR) {
+    // Indicate how to access and serialize VueQuery state during SSR
+    initialState.vueQueryState = { toJSON: () => dehydrate(queryClient) }
+  } else {
+    // Reuse the existing state in the browser
+    hydrate(queryClient, initialState.vueQueryState)
+  }
+
+  // Mount and provide the client to the app components
+  app.use(VueQueryPlugin, { queryClient })
+})
+```
+
+Then, call VueQuery from any component using Vue's `onServerPrefetch`:
+
+```html
+<!-- MyComponent.vue -->
+<template>
+  <div>
+    <button @click="refetch">Refetch</button>
+    <p>{{ data }}</p>
+  </div>
+</template>
+
+<script setup>
+  import { useQuery } from '@tanstack/vue-query'
+  import { onServerPrefetch } from 'vue'
+
+  // This will be prefetched and sent from the server
+  const { refetch, data, suspense } = useQuery({
+    queryKey: ['todos'],
+    queryFn: getTodos,
+  })
+
+  onServerPrefetch(suspense)
+</script>
+```
+
+## Tips, Tricks and Caveats
+
+### Only successful queries are included in dehydration
+
+Any query with an error is automatically excluded from dehydration. This means that the default behavior is to pretend these queries were never loaded on the server, usually showing a loading state instead, and retrying the queries on the queryClient. This happens regardless of error.
+
+Sometimes this behavior is not desirable, maybe you want to render an error page with a correct status code instead on certain errors or queries. In those cases, use `fetchQuery` and catch any errors to handle those manually.
+
+### Staleness is measured from when the query was fetched on the server
+
+A query is considered stale depending on when it was `dataUpdatedAt`. A caveat here is that the server needs to have the correct time for this to work properly, but UTC time is used, so timezones do not factor into this.
+
+Because `staleTime` defaults to `0`, queries will be refetched in the background on page load by default. You might want to use a higher `staleTime` to avoid this double fetching, especially if you don't cache your markup.
+
+This refetching of stale queries is a perfect match when caching markup in a CDN! You can set the cache time of the page itself decently high to avoid having to re-render pages on the server, but configure the `staleTime` of the queries lower to make sure data is refetched in the background as soon as a user visits the page. Maybe you want to cache the pages for a week, but refetch the data automatically on page load if it's older than a day?
+
+### High memory consumption on server
+
+In case you are creating the `QueryClient` for every request, Vue Query creates the isolated cache for this client, which is preserved in memory for the `gcTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
+
+On the server, `gcTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `gcTime` then you will be responsible for clearing the cache early.
+
+To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](/query/reference/QueryClient#queryclientclear) after the request is handled and dehydrated state has been sent to the client.
+
+Alternatively, you can set a smaller `gcTime`.
diff --git a/mintlify/query/framework/vue/guides/suspense.md b/mintlify/query/framework/vue/guides/suspense.md
new file mode 100644
index 000000000..92c2aa0da
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/suspense.md
@@ -0,0 +1,54 @@
+---
+id: suspense
+title: Suspense (experimental)
+---
+
+> NOTE: Suspense mode for Vue Query is experimental, same as Vue's Suspense itself. These APIs WILL change and should not be used in production unless you lock both your Vue and Vue Query versions to patch-level versions that are compatible with each other.
+
+Vue Query can also be used with Vue's new [Suspense](https://vuejs.org/guide/built-ins/suspense.html) API's.
+
+To do that you need to wrap your suspendable component with `Suspense` component provided by Vue
+
+```vue
+<script setup>
+import SuspendableComponent from './SuspendableComponent.vue'
+</script>
+
+<template>
+  <Suspense>
+    <template #default>
+      <SuspendableComponent />
+    </template>
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+And change your `setup` function in suspendable component to be `async`. Then you can use async `suspense` function that is provided by `vue-query`.
+
+```vue
+<script>
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+
+const todoFetcher = async () =>
+  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
+    response.json(),
+  )
+export default defineComponent({
+  name: 'SuspendableComponent',
+  async setup() {
+    const { data, suspense } = useQuery(['todos'], todoFetcher)
+    await suspense()
+
+    return { data }
+  },
+})
+</script>
+```
+
+## Fetch-on-render vs Render-as-you-fetch
+
+Out of the box, Vue Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](/query/framework/vue/guides/prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components.
diff --git a/mintlify/query/framework/vue/guides/testing.md b/mintlify/query/framework/vue/guides/testing.md
new file mode 100644
index 000000000..38d58cc3c
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/testing.md
@@ -0,0 +1,4 @@
+---
+id: testing
+title: Testing
+---
diff --git a/mintlify/query/framework/vue/guides/updates-from-mutation-responses.md b/mintlify/query/framework/vue/guides/updates-from-mutation-responses.md
new file mode 100644
index 000000000..c41819be9
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/updates-from-mutation-responses.md
@@ -0,0 +1,5 @@
+---
+id: updates-from-mutation-responses
+title: Updates from Mutation Responses
+ref: docs/framework/react/guides/updates-from-mutation-responses.md
+---
diff --git a/mintlify/query/framework/vue/guides/window-focus-refetching.md b/mintlify/query/framework/vue/guides/window-focus-refetching.md
new file mode 100644
index 000000000..3d275cfa0
--- /dev/null
+++ b/mintlify/query/framework/vue/guides/window-focus-refetching.md
@@ -0,0 +1,25 @@
+---
+id: window-focus-refetching
+title: Window Focus Refetching
+ref: docs/framework/react/guides/window-focus-refetching.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
+
+[//]: # 'Example'
+
+```js
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  },
+}
+app.use(VueQueryPlugin, vueQueryPluginOptions)
+```
+
+[//]: # 'Example'
+[//]: # 'ReactNative'
+[//]: # 'ReactNative'
diff --git a/mintlify/query/framework/vue/installation.md b/mintlify/query/framework/vue/installation.md
new file mode 100644
index 000000000..88c866699
--- /dev/null
+++ b/mintlify/query/framework/vue/installation.md
@@ -0,0 +1,67 @@
+---
+id: installation
+title: Installation
+---
+
+You can install Vue Query via [NPM](https://npmjs.com).
+
+### NPM
+
+```bash
+npm i @tanstack/vue-query
+```
+
+or
+
+```bash
+pnpm add @tanstack/vue-query
+```
+
+or
+
+```bash
+yarn add @tanstack/vue-query
+```
+
+or
+
+```bash
+bun add @tanstack/vue-query
+```
+
+> Wanna give it a spin before you download? Try out the [basic](/query/framework/vue/examples/basic) example!
+
+Vue Query is compatible with Vue 2.x and 3.x
+
+> If you are using Vue 2.6, make sure to also setup [@vue/composition-api](https://github.com/vuejs/composition-api)
+
+### Vue Query Initialization
+
+Before using Vue Query, you need to initialize it using `VueQueryPlugin`
+
+```tsx
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+app.use(VueQueryPlugin)
+```
+
+### Use of Composition API with `<script setup>`
+
+All examples in our documentation use [`<script setup>`](https://staging.vuejs.org/api/sfc-script-setup.html) syntax.
+
+Vue 2 users can also use that syntax using [this plugin](https://github.com/antfu/unplugin-vue2-script-setup). Please check the plugin documentation for installation details.
+
+If you are not a fan of `<script setup>` syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under `setup()` function and returning the values used in the template.
+
+```vue
+<script setup>
+import { useQuery } from '@tanstack/vue-query'
+
+const { isPending, isFetching, isError, data, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: getTodos,
+})
+</script>
+
+<template>...</template>
+```
diff --git a/mintlify/query/framework/vue/overview.md b/mintlify/query/framework/vue/overview.md
new file mode 100644
index 000000000..cd4b7922a
--- /dev/null
+++ b/mintlify/query/framework/vue/overview.md
@@ -0,0 +1,16 @@
+---
+id: overview
+title: Overview
+ref: docs/framework/react/overview.md
+replace: { 'React': 'Vue', 'react-query': 'vue-query' }
+---
+
+[//]: # 'Example'
+[//]: # 'Example'
+[//]: # 'Materials'
+
+## You talked me into it, so what now?
+
+- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](/query/framework/vue/installation) and [API Reference](/query/framework/vue/reference/useQuery)
+
+[//]: # 'Materials'
diff --git a/mintlify/query/framework/vue/plugins/broadcastQueryClient.md b/mintlify/query/framework/vue/plugins/broadcastQueryClient.md
new file mode 100644
index 000000000..32cb1e50c
--- /dev/null
+++ b/mintlify/query/framework/vue/plugins/broadcastQueryClient.md
@@ -0,0 +1,5 @@
+---
+id: broadcastQueryClient
+title: broadcastQueryClient (Experimental)
+ref: docs/framework/react/plugins/broadcastQueryClient.md
+---
diff --git a/mintlify/query/framework/vue/plugins/createPersister.md b/mintlify/query/framework/vue/plugins/createPersister.md
new file mode 100644
index 000000000..49e1f669b
--- /dev/null
+++ b/mintlify/query/framework/vue/plugins/createPersister.md
@@ -0,0 +1,200 @@
+---
+id: createPersister
+title: experimental_createQueryPersister
+---
+
+## Installation
+
+This utility comes as a separate package and is available under the `'@tanstack/query-persist-client-core'` import.
+
+```bash
+npm install @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+pnpm add @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+yarn add @tanstack/query-persist-client-core
+```
+
+or
+
+```bash
+bun add @tanstack/query-persist-client-core
+```
+
+## Usage
+
+- Import the `experimental_createQueryPersister` function
+- Create a new `experimental_createQueryPersister`
+  - you can pass any `storage` to it that adheres to the `AsyncStorage` interface
+- Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
+  - If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
+  - If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted.
+- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310
+
+This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run.
+
+Garbage collecting a Query from memory **does not** affect the persisted data. That means Queries can be kept in memory for a shorter period of time to be more **memory efficient**. If they are used the next time, they will just be restored from the persistent storage again.
+
+```tsx
+import { QueryClient } from '@tanstack/vue-query'
+import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
+
+const persister = experimental_createQueryPersister({
+  storage: AsyncStorage,
+  maxAge: 1000 * 60 * 60 * 12, // 12 hours
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 30, // 30 seconds
+      persister: persister.persisterFn,
+    },
+  },
+})
+```
+
+### Adapted defaults
+
+The `createPersister` plugin technically wraps the `queryFn`, so it doesn't restore if the `queryFn` doesn't run. In that way, it acts as a caching layer between the Query and the network. Thus, the `networkMode` defaults to `'offlineFirst'` when a persister is used, so that restoring from the persistent storage can also happen even if there is no network connection.
+
+## Additional utilities
+
+Invoking `experimental_createQueryPersister` returns additional utilities in addition to `persisterFn` for easier implementation of userland functionalities.
+
+### `persistQueryByKey(queryKey: QueryKey, queryClient: QueryClient): Promise<void>`
+
+This function will persist `Query` to storage and key defined when creating persister.  
+This utility might be used along `setQueryData` to persist optimistic update to storage without waiting for invalidation.
+
+```tsx
+const persister = experimental_createQueryPersister({
+  storage: AsyncStorage,
+  maxAge: 1000 * 60 * 60 * 12, // 12 hours
+})
+
+const queryClient = useQueryClient()
+
+useMutation({
+  mutationFn: updateTodo,
+  onMutate: async (newTodo) => {
+    ...
+    // Optimistically update to the new value
+    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
+    // And persist it to storage
+    persister.persistQueryByKey(['todos'], queryClient)
+    ...
+  },
+})
+```
+
+### `retrieveQuery<T>(queryHash: string): Promise<T | undefined>`
+
+This function would attempt to retrieve persisted query by `queryHash`.  
+If `query` is `expired`, `busted` or `malformed` it would be removed from the storage instead, and `undefined` would be returned.
+
+### `persisterGc(): Promise<void>`
+
+This function can be used to sporadically clean up stoage from `expired`, `busted` or `malformed` entries.
+
+For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.  
+For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
+
+### `restoreQueries(queryClient: QueryClient, filters): Promise<void>`
+
+This function can be used to restore queries that are currently stored by persister.  
+For example when your app is starting up in offline mode, or you want all or only specific data from previous session to be immediately available without intermediate `loading` state.
+
+The filter object supports the following properties:
+
+- `queryKey?: QueryKey`
+  - Set this property to define a query key to match on.
+- `exact?: boolean`
+  - If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed.
+
+For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.  
+For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
+
+## API
+
+### `experimental_createQueryPersister`
+
+```tsx
+experimental_createQueryPersister(options: StoragePersisterOptions)
+```
+
+#### `Options`
+
+```tsx
+export interface StoragePersisterOptions {
+  /** The storage client used for setting and retrieving items from cache.
+   * For SSR pass in `undefined`.
+   */
+  storage: AsyncStorage | Storage | undefined | null
+  /**
+   * How to serialize the data to storage.
+   * @default `JSON.stringify`
+   */
+  serialize?: (persistedQuery: PersistedQuery) => string
+  /**
+   * How to deserialize the data from storage.
+   * @default `JSON.parse`
+   */
+  deserialize?: (cachedString: string) => PersistedQuery
+  /**
+   * A unique string that can be used to forcefully invalidate existing caches,
+   * if they do not share the same buster string
+   */
+  buster?: string
+  /**
+   * The max-allowed age of the cache in milliseconds.
+   * If a persisted cache is found that is older than this
+   * time, it will be discarded
+   * @default 24 hours
+   */
+  maxAge?: number
+  /**
+   * Prefix to be used for storage key.
+   * Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
+   */
+  prefix?: string
+  /**
+   * If set to `true`, the query will refetch on successful query restoration if the data is stale.
+   * If set to `false`, the query will not refetch on successful query restoration.
+   * If set to `'always'`, the query will always refetch on successful query restoration.
+   * Defaults to `true`.
+   */
+  refetchOnRestore?: boolean | 'always'
+  /**
+   * Filters to narrow down which Queries should be persisted.
+   */
+  filters?: QueryFilters
+}
+
+interface AsyncStorage<TStorageValue = string> {
+  getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
+  setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
+  removeItem: (key: string) => MaybePromise<void>
+  entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
+}
+```
+
+The default options are:
+
+```tsx
+{
+  prefix = 'tanstack-query',
+  maxAge = 1000 * 60 * 60 * 24,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+  refetchOnRestore = true,
+}
+```
diff --git a/mintlify/query/framework/vue/quick-start.md b/mintlify/query/framework/vue/quick-start.md
new file mode 100644
index 000000000..5a4def0c6
--- /dev/null
+++ b/mintlify/query/framework/vue/quick-start.md
@@ -0,0 +1,53 @@
+---
+id: quick-start
+title: Quick Start
+ref: docs/framework/react/quick-start.md
+replace: { 'React': 'Vue', 'react-query': 'vue-query' }
+---
+
+[//]: # 'Example'
+
+If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](/query/framework/vue/examples/basic)
+
+```vue
+<script setup>
+import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'
+
+// Access QueryClient instance
+const queryClient = useQueryClient()
+
+// Query
+const { isPending, isError, data, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: getTodos,
+})
+
+// Mutation
+const mutation = useMutation({
+  mutationFn: postTodo,
+  onSuccess: () => {
+    // Invalidate and refetch
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+
+function onButtonClick() {
+  mutation.mutate({
+    id: Date.now(),
+    title: 'Do Laundry',
+  })
+}
+</script>
+
+<template>
+  <span v-if="isPending">Loading...</span>
+  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <!-- We can assume by this point that `isSuccess === true` -->
+  <ul v-else>
+    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
+  </ul>
+  <button @click="onButtonClick">Add Todo</button>
+</template>
+```
+
+[//]: # 'Example'
diff --git a/mintlify/query/framework/vue/reactivity.md b/mintlify/query/framework/vue/reactivity.md
new file mode 100644
index 000000000..2c0ba72a5
--- /dev/null
+++ b/mintlify/query/framework/vue/reactivity.md
@@ -0,0 +1,173 @@
+---
+id: reactivity
+title: Reactivity
+---
+
+Vue uses the [the signals paradigm](https://vuejs.org/guide/extras/reactivity-in-depth.html#connection-to-signals) to handle and track reactivity. A key feature of
+this system is the reactive system only triggers updates on specifically watched reactive properties. A consequence of this is you also need to ensure that the queries are updated when values they consume are updated.
+
+# Keeping Queries Reactive
+
+When creating a composable for a query your first choice may be to write it like so:
+
+```ts
+export function useUserProjects(userId: string) {
+  return useQuery(
+    queryKey: ['userProjects', userId],
+    queryFn: () => api.fetchUserProjects(userId),
+  );
+}
+```
+
+We might consume this composable like so:
+
+```ts
+// Reactive user ID ref.
+const userId = ref('1')
+// Fetches the user 1's projects.
+const { data: projects } = useUserProjects(userId.value)
+
+const onChangeUser = (newUserId: string) => {
+  // Edits the userId, but the query will not re-fetch.
+  userId.value = newUserId
+}
+```
+
+This code will not work as intended. This is because we are extracting the value from the userId ref directly. Vue-query is not tracking the `userId` `ref` so it has no way of knowing when the value changes.
+
+Luckily, the fix for this is trivial. The value must be made trackable in the query key. We can Just accept the `ref` directly in the composable and place it in the query key:
+
+```ts
+export function useUserProjects(userId: Ref<string>) {
+  return useQuery(
+    queryKey: ['userProjects', userId],
+    queryFn: () => api.fetchUserProjects(userId.value),
+  );
+}
+```
+
+Now the query will re-fetch when the `userId` changes.
+
+```ts
+const onChangeUser = (newUserId: string) => {
+  // Query refetches data with new user ID!
+  userId.value = newUserId
+}
+```
+
+In vue query any reactive properties within a query key are tracked for changes automatically. This allows vue-query to refetch data whenever the
+parameters for a given request change.
+
+## Accounting for Non-Reactive Queries
+
+While far less likely, sometimes passing non-reactive variables is intentional. For example, some entities only need to be fetched once and don't need tracking or we invalidate a mutation a query options object after a mutation.
+If we use our custom composable defined above the usage in this case feels a bit off:
+
+```ts
+const { data: projects } = useUserProjects(ref('1'))
+```
+
+We have to create an intermediate `ref` just to make the parameter type-compatible. We can do better here. Let's instead update our composable to accept both plain values and reactive values:
+
+```ts
+export function useUserProjects(userId: MaybeRef<string>) {
+  return useQuery(
+    queryKey: ['userProjects', userId],
+    queryFn: () => api.fetchUserProjects(toValue(userId)),
+  );
+}
+```
+
+Now we can use the composable with both plain values and refs:
+
+```ts
+// Fetches the user 1's projects, userId is not expected to change.
+const { data: projects } = useUserProjects('1')
+
+// Fetches the user 1's projects, queries will react to changes on userId.
+const userId = ref('1')
+
+// Make some changes to userId...
+
+// Query re-fetches based on any changes to userId.
+const { data: projects } = useUserProjects(userId)
+```
+
+## Using Derived State inside Queries
+
+It's quite common to derive some new reactive state from another source of reactive state. Commonly, this problem manifests in situations where you deal with component props. Let's assume our `userId` is a prop passed to a component:
+
+```vue
+<script setup lang="ts">
+const props = defineProps<{
+  userId: string
+}>()
+</script>
+```
+
+You may be tempted to use the prop directly in the query like so:
+
+```ts
+// Won't react to changes in props.userId.
+const { data: projects } = useUserProjects(props.userId)
+```
+
+However, similar to the first example, this is not reactive. Property access on `reactive` variables causes reactivity to be lost. We can fix this by making this derived state reactive via a `computed`:
+
+```ts
+const userId = computed(() => props.userId)
+
+// Reacts to changes in props.userId.
+const { data: projects } = useUserProjects(userId)
+```
+
+This works as expected, however, this solution isn't always the most optimal. Aside from the introduction of an intermediate variable, we also create a memoized value that is somewhat unnecessary. For trivial cases of simple property access `computed` is an optimization with no real benefit. In these cases a more appropriate solution is to use [reactive getters](https://blog.vuejs.org/posts/vue-3-3#better-getter-support-with-toref-and-tovalue). Reactive getters are simply functions that return a value based on some reactive state, similar to how `computed` works. Unlike `computed`, reactive getters do not memoize their values so it makes it a good candidate for simple property access.
+
+Let's once again refactor our composable, but this time we'll have it accept a `ref`, plain value, or a reactive getter:
+
+```ts
+export function useUserProjects(userId: MaybeRefOrGetter<string>) {
+  ...
+}
+```
+
+Let's adjust our usage and now use a reactive getter:
+
+```ts
+// Reacts to changes in props.userId. No `computed` needed!
+const { data: projects } = useUserProjects(() => props.userId)
+```
+
+This gives us a terse syntax and the reactivity we need without any unneeded memoization overhead.
+
+## Other tracked Query Options
+
+Above, we only touched one query option that tracks reactive dependencies. However, in addition to `queryKey`, `enabled` also allows
+the use of reactive values. This comes in handy in situations where you want to control the fetching of a query based on some derived state:
+
+```ts
+export function useUserProjects(userId: MaybeRef<string>) {
+  return useQuery(
+    queryKey: ['userProjects', userId],
+    queryFn: () => api.fetchUserProjects(toValue(userId)),
+    enabled: () => userId.value === activeUserId.value,
+  );
+}
+```
+
+More details on this option can be found on the [useQuery reference](/query/framework/vue/reference/useQuery) page.
+
+## Immutability
+
+Results from `useQuery` are always immutable. This is necessary for performance and caching purposes. If you need to mutate a value returned from `useQuery`, you must create a copy of the data.
+
+One implication of this design is that passing values from `useQuery` to a two-way binding such as `v-model` will not work. You must create a mutable copy of the data before attempting to update it in place.
+
+# Key Takeaways
+
+- `enabled` and `queryKey` are the two query options that can accept reactive values.
+- Pass query option that accept all three types of values in Vue: refs, plain values, and reactive getters.
+- If you expect a query to react to changes based on the values it consumes, ensure that the values are reactive. (i.e. pass in refs directly to the query, or use reactive getters)
+- If you don't need a query to be reactive pass in a plain value.
+- For trivial derived state such as property access consider using a reactive getter in place of a `computed`.
+- Results from `useQuery` are always immutable.
diff --git a/mintlify/query/framework/vue/reference/hydration.md b/mintlify/query/framework/vue/reference/hydration.md
new file mode 100644
index 000000000..f4955994b
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/hydration.md
@@ -0,0 +1,9 @@
+---
+id: hydration
+title: hydration
+ref: docs/framework/react/reference/hydration.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
+
+[//]: # 'HydrationBoundary'
+[//]: # 'HydrationBoundary'
diff --git a/mintlify/query/framework/vue/reference/infiniteQueryOptions.md b/mintlify/query/framework/vue/reference/infiniteQueryOptions.md
new file mode 100644
index 000000000..fa4b38aae
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/infiniteQueryOptions.md
@@ -0,0 +1,5 @@
+---
+id: infiniteQueryOptions
+title: infiniteQueryOptions
+ref: docs/framework/react/reference/infiniteQueryOptions.md
+---
diff --git a/mintlify/query/framework/vue/reference/mutationOptions.md b/mintlify/query/framework/vue/reference/mutationOptions.md
new file mode 100644
index 000000000..b34296ad5
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/mutationOptions.md
@@ -0,0 +1,5 @@
+---
+id: mutationOptions
+title: mutationOptions
+ref: docs/framework/react/reference/mutationOptions.md
+---
diff --git a/mintlify/query/framework/vue/reference/queryOptions.md b/mintlify/query/framework/vue/reference/queryOptions.md
new file mode 100644
index 000000000..401cf8d10
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/queryOptions.md
@@ -0,0 +1,5 @@
+---
+id: queryOptions
+title: queryOptions
+ref: docs/framework/react/reference/queryOptions.md
+---
diff --git a/mintlify/query/framework/vue/reference/useInfiniteQuery.md b/mintlify/query/framework/vue/reference/useInfiniteQuery.md
new file mode 100644
index 000000000..b0f2ab2fb
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useInfiniteQuery.md
@@ -0,0 +1,6 @@
+---
+id: useInfiniteQuery
+title: useInfiniteQuery
+ref: docs/framework/react/reference/useInfiniteQuery.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useIsFetching.md b/mintlify/query/framework/vue/reference/useIsFetching.md
new file mode 100644
index 000000000..aa1ecd221
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useIsFetching.md
@@ -0,0 +1,6 @@
+---
+id: useIsFetching
+title: useIsFetching
+ref: docs/framework/react/reference/useIsFetching.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useIsMutating.md b/mintlify/query/framework/vue/reference/useIsMutating.md
new file mode 100644
index 000000000..d05d7ef67
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useIsMutating.md
@@ -0,0 +1,6 @@
+---
+id: useIsMutating
+title: useIsMutating
+ref: docs/framework/react/reference/useIsMutating.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useMutation.md b/mintlify/query/framework/vue/reference/useMutation.md
new file mode 100644
index 000000000..ee5b243c2
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useMutation.md
@@ -0,0 +1,6 @@
+---
+id: useMutation
+title: useMutation
+ref: docs/framework/react/reference/useMutation.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useMutationState.md b/mintlify/query/framework/vue/reference/useMutationState.md
new file mode 100644
index 000000000..82c0028f8
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useMutationState.md
@@ -0,0 +1,6 @@
+---
+id: useMutationState
+title: useMutationState
+ref: docs/framework/react/reference/useMutationState.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/usePrefetchInfiniteQuery.md b/mintlify/query/framework/vue/reference/usePrefetchInfiniteQuery.md
new file mode 100644
index 000000000..c7af728d3
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/usePrefetchInfiniteQuery.md
@@ -0,0 +1,6 @@
+---
+id: usePrefetchInfiniteQuery
+title: usePrefetchInfiniteQuery
+ref: docs/framework/react/reference/usePrefetchInfiniteQuery.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/usePrefetchQuery.md b/mintlify/query/framework/vue/reference/usePrefetchQuery.md
new file mode 100644
index 000000000..e518a62ef
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/usePrefetchQuery.md
@@ -0,0 +1,6 @@
+---
+id: usePrefetchQuery
+title: usePrefetchQuery
+ref: docs/framework/react/reference/usePrefetchQuery.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useQueries.md b/mintlify/query/framework/vue/reference/useQueries.md
new file mode 100644
index 000000000..a5cb5ad64
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useQueries.md
@@ -0,0 +1,6 @@
+---
+id: useQueries
+title: useQueries
+ref: docs/framework/react/reference/useQueries.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useQuery.md b/mintlify/query/framework/vue/reference/useQuery.md
new file mode 100644
index 000000000..151370c65
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useQuery.md
@@ -0,0 +1,6 @@
+---
+id: useQuery
+title: useQuery
+ref: docs/framework/react/reference/useQuery.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/reference/useQueryClient.md b/mintlify/query/framework/vue/reference/useQueryClient.md
new file mode 100644
index 000000000..9ed6be043
--- /dev/null
+++ b/mintlify/query/framework/vue/reference/useQueryClient.md
@@ -0,0 +1,6 @@
+---
+id: useQueryClient
+title: useQueryClient
+ref: docs/framework/react/reference/useQueryClient.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
+---
diff --git a/mintlify/query/framework/vue/typescript.md b/mintlify/query/framework/vue/typescript.md
new file mode 100644
index 000000000..7cf70dbc4
--- /dev/null
+++ b/mintlify/query/framework/vue/typescript.md
@@ -0,0 +1,113 @@
+---
+id: typescript
+title: TypeScript
+ref: docs/framework/react/typescript.md
+replace:
+  {
+    'React': 'Vue',
+    '@tanstack/react-query': '@tanstack/vue-query',
+    'react-query package version': 'vue-query package version',
+  }
+---
+
+[//]: # 'TypeInference1'
+
+```tsx
+const { data } = useQuery({
+  //    ^? const data: Ref<number> | Ref<undefined>
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+})
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAglw4nTocMA9APwG4Q7QGl0eAFxwA2lRjoWVALoAaa1t8ADFGFx0ASjUAPjgABXIQYAwAOigvCAAbbnQdAFYIgPFCCKA)
+
+[//]: # 'TypeInference1'
+[//]: # 'TypeInference2'
+
+```tsx
+const { data } = useQuery({
+  //      ^? const data: Ref<string> | Ref<undefined>
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+  select: (data) => data.toString(),
+})
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAglw4nTodNwAegH4DcIdoDS6PAC44AbSox0LKgF0ANDZ2+ABijK46AJRqAHxwAArkIMAYAHRQ3hAANtzoOgCskYHihhhZ6KwwEYoM0apxNfSpMBAAyjBQwIwA5lHFhJFAA)
+
+[//]: # 'TypeInference2'
+[//]: # 'TypeInference3'
+
+```tsx
+const fetchGroups = (): Promise<Group[]> =>
+  axios.get('/groups').then((response) => response.data)
+
+const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const data: Ref<Group[]> | Ref<undefined>
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APksciThZBSUAOgBzQKiqTnLTMC0Y0phg9EYoqKh0VEhmdBj8uC6e3wxS23oGGK9xHz9rCYYiSxQMbFw8KKQhDYBpdDxHDKo68IaqLIAaOB38ADFGRwCg0PrlQmnxTk4i37gAPQA-EA)
+
+[//]: # 'TypeInference3'
+[//]: # 'TypeNarrowing'
+
+```tsx
+const { data, isSuccess } = reactive(
+  useQuery({
+    queryKey: ['test'],
+    queryFn: () => Promise.resolve(5),
+  }),
+)
+
+if (isSuccess) {
+  data
+  // ^? const data: number
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEixEcKOnqsYwbuiKlylKr3RUA3BImsIzeEgAm9BgBo4wVAGVkrVulSp1AXjkKlK9AAUaFjCeAEA2lQwbjBUALq2AQCUcJ4AfHAACpr26AB08qgQADaqAQCsSVWGkiRwAfZOLm6oKQgScJ1wlgwSnJydAHoA-BKEEkA)
+
+[//]: # 'TypeNarrowing'
+[//]: # 'TypingError'
+
+```tsx
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: Ref<unknown>
+
+if (error.value instanceof Error) {
+  error.value
+  //     ^? const error: Error
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoUJFhx6AD2ARUpcpSqLlqCZKkw8YdHADi5ZGDgBeRHGAATAFxxGyEACNcRKVNYRm8CToMKwAFmYQFqo2ABQAlM4ACurAGAA8ERYA2gC6AHzWBVoqAHQA5sExVJxl5mA6cSUwoeiMMTyokMzGVgUdXRgl9vQMcT6SfgG2uORQRNYoGNi4eDFIIisA0uh4zllUtZH1VDkANHAb+ABijM5BIeF1qoRjkpyccJ9fAHoA-OPAEhwGLFVAlVIAQSUKgAolBZjEZtA4nFEFJPkioOi4O84H8pIQgA)
+
+[//]: # 'TypingError'
+[//]: # 'TypingError2'
+[//]: # 'TypingError2'
+[//]: # 'TypingError3'
+[//]: # 'TypingError3'
+[//]: # 'RegisterErrorType'
+
+```tsx
+import '@tanstack/vue-query'
+
+declare module '@tanstack/vue-query' {
+  interface Register {
+    // Use unknown so call sites must narrow explicitly.
+    defaultError: unknown
+  }
+}
+
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: unknown | null
+```
+
+[//]: # 'RegisterErrorType'
+[//]: # 'TypingMeta'
+[//]: # 'TypingMeta'
+[//]: # 'TypingQueryOptions'
+[//]: # 'TypingQueryOptions'
+[//]: # 'Materials'
+[//]: # 'Materials'
diff --git a/mintlify/query/index.mdx b/mintlify/query/index.mdx
new file mode 100644
index 000000000..127901321
--- /dev/null
+++ b/mintlify/query/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Query"
+description: "Asynchronous state management and data fetching. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Asynchronous state management and data fetching.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/query/reference/QueryClient">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/query">
+    Visit the canonical TanStack Query website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/query">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/query/reference/InfiniteQueryObserver.md b/mintlify/query/reference/InfiniteQueryObserver.md
new file mode 100644
index 000000000..051dacacd
--- /dev/null
+++ b/mintlify/query/reference/InfiniteQueryObserver.md
@@ -0,0 +1,26 @@
+---
+id: InfiniteQueryObserver
+title: InfiniteQueryObserver
+---
+
+## `InfiniteQueryObserver`
+
+The `InfiniteQueryObserver` can be used to observe and switch between infinite queries.
+
+```tsx
+const observer = new InfiniteQueryObserver(queryClient, {
+  queryKey: ['posts'],
+  queryFn: fetchPosts,
+  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
+})
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+**Options**
+
+The options for the `InfiniteQueryObserver` are exactly the same as those of [`useInfiniteQuery`](/query/framework/react/reference/useInfiniteQuery).
diff --git a/mintlify/query/reference/MutationCache.md b/mintlify/query/reference/MutationCache.md
new file mode 100644
index 000000000..4df1e68a1
--- /dev/null
+++ b/mintlify/query/reference/MutationCache.md
@@ -0,0 +1,98 @@
+---
+id: MutationCache
+title: MutationCache
+---
+
+The `MutationCache` is the storage for mutations.
+
+**Normally, you will not interact with the MutationCache directly and instead use the `QueryClient`.**
+
+```tsx
+import { MutationCache } from '@tanstack/react-query'
+
+const mutationCache = new MutationCache({
+  onError: (error) => {
+    console.log(error)
+  },
+  onSuccess: (data) => {
+    console.log(data)
+  },
+})
+```
+
+Its available methods are:
+
+- [`getAll`](#mutationcachegetall)
+- [`subscribe`](#mutationcachesubscribe)
+- [`clear`](#mutationcacheclear)
+
+**Options**
+
+- `onError?: (error: unknown, variables: unknown, onMutateResult: unknown, mutation: Mutation, mutationFnContext: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will be called if some mutation encounters an error.
+  - If you return a Promise from it, it will be awaited
+- `onSuccess?: (data: unknown, variables: unknown, onMutateResult: unknown, mutation: Mutation, mutationFnContext: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will be called if some mutation is successful.
+  - If you return a Promise from it, it will be awaited
+- `onSettled?: (data: unknown | undefined, error: unknown | null, variables: unknown, onMutateResult: unknown, mutation: Mutation, mutationFnContext: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will be called if some mutation is settled (either successful or errored).
+  - If you return a Promise from it, it will be awaited
+- `onMutate?: (variables: unknown, mutation: Mutation, mutationFnContext: MutationFunctionContext) => Promise<unknown> | unknown`
+  - Optional
+  - This function will be called before some mutation executes.
+  - If you return a Promise from it, it will be awaited
+
+## Global callbacks
+
+The `onError`, `onSuccess`, `onSettled` and `onMutate` callbacks on the MutationCache can be used to handle these events on a global level. They are different to `defaultOptions` provided to the QueryClient because:
+
+- `defaultOptions` can be overridden by each Mutation - the global callbacks will **always** be called.
+- `onMutate` does not allow returning a result.
+
+## `mutationCache.getAll`
+
+`getAll` returns all mutations within the cache.
+
+> Note: This is not typically needed for most applications, but can come in handy when needing more information about a mutation in rare scenarios
+
+```tsx
+const mutations = mutationCache.getAll()
+```
+
+**Returns**
+
+- `Mutation[]`
+  - Mutation instances from the cache
+
+## `mutationCache.subscribe`
+
+The `subscribe` method can be used to subscribe to the mutation cache as a whole and be informed of safe/known updates to the cache like mutation states changing or mutations being updated, added or removed.
+
+```tsx
+const callback = (event) => {
+  console.log(event.type, event.mutation)
+}
+
+const unsubscribe = mutationCache.subscribe(callback)
+```
+
+**Options**
+
+- `callback: (mutation?: MutationCacheNotifyEvent) => void`
+  - This function will be called with the mutation cache any time it is updated.
+
+**Returns**
+
+- `unsubscribe: Function => void`
+  - This function will unsubscribe the callback from the mutation cache.
+
+## `mutationCache.clear`
+
+The `clear` method can be used to clear the cache entirely and start fresh.
+
+```tsx
+mutationCache.clear()
+```
diff --git a/mintlify/query/reference/QueriesObserver.md b/mintlify/query/reference/QueriesObserver.md
new file mode 100644
index 000000000..f7a35d288
--- /dev/null
+++ b/mintlify/query/reference/QueriesObserver.md
@@ -0,0 +1,24 @@
+---
+id: QueriesObserver
+title: QueriesObserver
+---
+
+## `QueriesObserver`
+
+The `QueriesObserver` can be used to observe multiple queries.
+
+```tsx
+const observer = new QueriesObserver(queryClient, [
+  { queryKey: ['post', 1], queryFn: fetchPost },
+  { queryKey: ['post', 2], queryFn: fetchPost },
+])
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+**Options**
+
+The options for the `QueriesObserver` are exactly the same as those of [`useQueries`](/query/framework/react/reference/useQueries).
diff --git a/mintlify/query/reference/QueryCache.md b/mintlify/query/reference/QueryCache.md
new file mode 100644
index 000000000..3129798b9
--- /dev/null
+++ b/mintlify/query/reference/QueryCache.md
@@ -0,0 +1,123 @@
+---
+id: QueryCache
+title: QueryCache
+---
+
+The `QueryCache` is the storage mechanism for TanStack Query. It stores all the data, meta information and state of queries it contains.
+
+**Normally, you will not interact with the QueryCache directly and instead use the `QueryClient` for a specific cache.**
+
+```tsx
+import { QueryCache } from '@tanstack/react-query'
+
+const queryCache = new QueryCache({
+  onError: (error) => {
+    console.log(error)
+  },
+  onSuccess: (data) => {
+    console.log(data)
+  },
+  onSettled: (data, error) => {
+    console.log(data, error)
+  },
+})
+
+const query = queryCache.find({ queryKey: ['posts'] })
+```
+
+Its available methods are:
+
+- [`queryCache.find`](#querycachefind)
+- [`queryCache.findAll`](#querycachefindall)
+- [`queryCache.subscribe`](#querycachesubscribe)
+- [`queryCache.clear`](#querycacheclear)
+- [Further reading](#further-reading)
+
+**Options**
+
+- `onError?: (error: unknown, query: Query) => void`
+  - Optional
+  - This function will be called if some query encounters an error.
+- `onSuccess?: (data: unknown, query: Query) => void`
+  - Optional
+  - This function will be called if some query is successful.
+- `onSettled?: (data: unknown | undefined, error: unknown | null, query: Query) => void`
+  - Optional
+  - This function will be called if some query is settled (either successful or errored).
+
+## `queryCache.find`
+
+`find` is a slightly more advanced synchronous method that can be used to get an existing query instance from the cache. This instance not only contains **all** the state for the query, but all of the instances, and underlying guts of the query as well. If the query does not exist, `undefined` will be returned.
+
+> Note: This is not typically needed for most applications, but can come in handy when needing more information about a query in rare scenarios (eg. Looking at the query.state.dataUpdatedAt timestamp to decide whether a query is fresh enough to be used as an initial value)
+
+```tsx
+const query = queryCache.find({ queryKey })
+```
+
+**Options**
+
+- `filters: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+  - `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+
+**Returns**
+
+- `Query`
+  - The query instance from the cache
+
+## `queryCache.findAll`
+
+`findAll` is even more advanced synchronous method that can be used to get existing query instances from the cache that partially match query key. If queries do not exist, empty array will be returned.
+
+> Note: This is not typically needed for most applications, but can come in handy when needing more information about a query in rare scenarios
+
+```tsx
+const queries = queryCache.findAll({ queryKey })
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+
+**Returns**
+
+- `Query[]`
+  - Query instances from the cache
+
+## `queryCache.subscribe`
+
+The `subscribe` method can be used to subscribe to the query cache as a whole and be informed of safe/known updates to the cache like query states changing or queries being updated, added or removed
+
+```tsx
+const callback = (event) => {
+  console.log(event.type, event.query)
+}
+
+const unsubscribe = queryCache.subscribe(callback)
+```
+
+**Options**
+
+- `callback: (event: QueryCacheNotifyEvent) => void`
+  - This function will be called with the query cache any time it is updated via its tracked update mechanisms (eg, `query.setState`, `queryClient.removeQueries`, etc). Out of scope mutations to the cache are not encouraged and will not fire subscription callbacks
+
+**Returns**
+
+- `unsubscribe: Function => void`
+  - This function will unsubscribe the callback from the query cache.
+
+## `queryCache.clear`
+
+The `clear` method can be used to clear the cache entirely and start fresh.
+
+```tsx
+queryCache.clear()
+```
+
+[//]: # 'Materials'
+
+## Further reading
+
+To get a better understanding how the QueryCache works internally, have a look at [the Inside React Query article by TkDodo](https://tkdodo.eu/blog/inside-react-query).
+
+[//]: # 'Materials'
diff --git a/mintlify/query/reference/QueryClient.md b/mintlify/query/reference/QueryClient.md
new file mode 100644
index 000000000..2f8335d7e
--- /dev/null
+++ b/mintlify/query/reference/QueryClient.md
@@ -0,0 +1,626 @@
+---
+id: QueryClient
+title: QueryClient
+---
+
+## `QueryClient`
+
+The `QueryClient` can be used to interact with a cache:
+
+```tsx
+import { QueryClient } from '@tanstack/react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+    },
+  },
+})
+
+await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts })
+```
+
+Its available methods are:
+
+- [`queryClient.fetchQuery`](#queryclientfetchquery)
+- [`queryClient.fetchInfiniteQuery`](#queryclientfetchinfinitequery)
+- [`queryClient.prefetchQuery`](#queryclientprefetchquery)
+- [`queryClient.prefetchInfiniteQuery`](#queryclientprefetchinfinitequery)
+- [`queryClient.getQueryData`](#queryclientgetquerydata)
+- [`queryClient.ensureQueryData`](#queryclientensurequerydata)
+- [`queryClient.ensureInfiniteQueryData`](#queryclientensureinfinitequerydata)
+- [`queryClient.getQueriesData`](#queryclientgetqueriesdata)
+- [`queryClient.setQueryData`](#queryclientsetquerydata)
+- [`queryClient.getQueryState`](#queryclientgetquerystate)
+- [`queryClient.setQueriesData`](#queryclientsetqueriesdata)
+- [`queryClient.invalidateQueries`](#queryclientinvalidatequeries)
+- [`queryClient.refetchQueries`](#queryclientrefetchqueries)
+- [`queryClient.cancelQueries`](#queryclientcancelqueries)
+- [`queryClient.removeQueries`](#queryclientremovequeries)
+- [`queryClient.resetQueries`](#queryclientresetqueries)
+- [`queryClient.isFetching`](#queryclientisfetching)
+- [`queryClient.isMutating`](#queryclientismutating)
+- [`queryClient.getDefaultOptions`](#queryclientgetdefaultoptions)
+- [`queryClient.setDefaultOptions`](#queryclientsetdefaultoptions)
+- [`queryClient.getQueryDefaults`](#queryclientgetquerydefaults)
+- [`queryClient.setQueryDefaults`](#queryclientsetquerydefaults)
+- [`queryClient.getMutationDefaults`](#queryclientgetmutationdefaults)
+- [`queryClient.setMutationDefaults`](#queryclientsetmutationdefaults)
+- [`queryClient.getQueryCache`](#queryclientgetquerycache)
+- [`queryClient.getMutationCache`](#queryclientgetmutationcache)
+- [`queryClient.clear`](#queryclientclear)
+- [`queryClient.resumePausedMutations`](#queryclientresumepausedmutations)
+
+**Options**
+
+- `queryCache?: QueryCache`
+  - Optional
+  - The query cache this client is connected to.
+- `mutationCache?: MutationCache`
+  - Optional
+  - The mutation cache this client is connected to.
+- `defaultOptions?: DefaultOptions`
+  - Optional
+  - Define defaults for all queries and mutations using this queryClient.
+  - You can also define defaults to be used for [hydration](/query/framework/react/reference/hydration)
+
+## `queryClient.fetchQuery`
+
+`fetchQuery` is an asynchronous method that can be used to fetch and cache a query. It will either resolve with the data or throw with the error. Use the `prefetchQuery` method if you just want to fetch a query without needing the result.
+
+If the query exists and the data is not invalidated or older than the given `staleTime`, then the data from the cache will be returned. Otherwise it will try to fetch the latest data.
+
+```tsx
+try {
+  const data = await queryClient.fetchQuery({ queryKey, queryFn })
+} catch (error) {
+  console.log(error)
+}
+```
+
+Specify a `staleTime` to only fetch when the data is older than a certain amount of time:
+
+```tsx
+try {
+  const data = await queryClient.fetchQuery({
+    queryKey,
+    queryFn,
+    staleTime: 10000,
+  })
+} catch (error) {
+  console.log(error)
+}
+```
+
+**Options**
+
+The options for `fetchQuery` are exactly the same as those of [`useQuery`](/query/framework/react/reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/TanStack/query/blob/7cd2d192e6da3df0b08e334ea1cf04cd70478827/packages/query-core/src/types.ts#L119) for more clarity.
+
+**Returns**
+
+- `Promise<TData>`
+
+## `queryClient.fetchInfiniteQuery`
+
+`fetchInfiniteQuery` is similar to `fetchQuery` but can be used to fetch and cache an infinite query.
+
+```tsx
+try {
+  const data = await queryClient.fetchInfiniteQuery({ queryKey, queryFn })
+  console.log(data.pages)
+} catch (error) {
+  console.log(error)
+}
+```
+
+**Options**
+
+The options for `fetchInfiniteQuery` are exactly the same as those of [`fetchQuery`](#queryclientfetchquery).
+
+**Returns**
+
+- `Promise<InfiniteData<TData, TPageParam>>`
+
+## `queryClient.prefetchQuery`
+
+`prefetchQuery` is an asynchronous method that can be used to prefetch a query before it is needed or rendered with `useQuery` and friends. The method works the same as `fetchQuery` except that it will not throw or return any data.
+
+```tsx
+await queryClient.prefetchQuery({ queryKey, queryFn })
+```
+
+You can even use it with a default queryFn in your config!
+
+```tsx
+await queryClient.prefetchQuery({ queryKey })
+```
+
+**Options**
+
+The options for `prefetchQuery` are exactly the same as those of [`fetchQuery`](#queryclientfetchquery).
+
+**Returns**
+
+- `Promise<void>`
+  - A promise is returned that will either immediately resolve if no fetch is needed or after the query has been executed. It will not return any data or throw any errors.
+
+## `queryClient.prefetchInfiniteQuery`
+
+`prefetchInfiniteQuery` is similar to `prefetchQuery` but can be used to prefetch and cache an infinite query.
+
+```tsx
+await queryClient.prefetchInfiniteQuery({ queryKey, queryFn })
+```
+
+**Options**
+
+The options for `prefetchInfiniteQuery` are exactly the same as those of [`fetchQuery`](#queryclientfetchquery).
+
+**Returns**
+
+- `Promise<void>`
+  - A promise is returned that will either immediately resolve if no fetch is needed or after the query has been executed. It will not return any data or throw any errors.
+
+## `queryClient.getQueryData`
+
+`getQueryData` is a synchronous function that can be used to get an existing query's cached data. If the query does not exist, `undefined` will be returned.
+
+```tsx
+const data = queryClient.getQueryData(queryKey)
+```
+
+**Options**
+
+- `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+
+**Returns**
+
+- `data: TQueryFnData | undefined`
+  - The data for the cached query, or `undefined` if the query does not exist.
+
+## `queryClient.ensureQueryData`
+
+`ensureQueryData` is an asynchronous function that can be used to get an existing query's cached data. If the query does not exist, `queryClient.fetchQuery` will be called and its results returned.
+
+```tsx
+const data = await queryClient.ensureQueryData({ queryKey, queryFn })
+```
+
+**Options**
+
+- the same options as [`fetchQuery`](#queryclientfetchquery)
+- `revalidateIfStale: boolean`
+  - Optional
+  - Defaults to `false`
+  - If set to `true`, stale data will be refetched in the background, but cached data will be returned immediately.
+
+**Returns**
+
+- `Promise<TData>`
+
+## `queryClient.ensureInfiniteQueryData`
+
+`ensureInfiniteQueryData` is an asynchronous function that can be used to get an existing infinite query's cached data. If the query does not exist, `queryClient.fetchInfiniteQuery` will be called and its results returned.
+
+```tsx
+const data = await queryClient.ensureInfiniteQueryData({
+  queryKey,
+  queryFn,
+  initialPageParam,
+  getNextPageParam,
+})
+```
+
+**Options**
+
+- the same options as [`fetchInfiniteQuery`](#queryclientfetchinfinitequery)
+- `revalidateIfStale: boolean`
+  - Optional
+  - Defaults to `false`
+  - If set to `true`, stale data will be refetched in the background, but cached data will be returned immediately.
+
+**Returns**
+
+- `Promise<InfiniteData<TData, TPageParam>>`
+
+## `queryClient.getQueriesData`
+
+`getQueriesData` is a synchronous function that can be used to get the cached data of multiple queries. Only queries that match the passed queryKey or queryFilter will be returned. If there are no matching queries, an empty array will be returned.
+
+```tsx
+const data = queryClient.getQueriesData(filters)
+```
+
+**Options**
+
+- `filters: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+  - if a filter is passed, the data with queryKeys matching the filter will be returned
+
+**Returns**
+
+- `[queryKey: QueryKey, data: TQueryFnData | undefined][]`
+  - An array of tuples for the matched query keys, or `[]` if there are no matches. The tuples are the query key and its associated data.
+
+**Caveats**
+
+Because the returned data in each tuple can be of varying structures (i.e. using a filter to return "active" queries can return different data types), the `TData` generic defaults to `unknown`. If you provide a more specific type to `TData` it is assumed that you are certain each tuple's data entry is all the same type.
+
+This distinction is more a "convenience" for ts devs that know which structure will be returned.
+
+## `queryClient.setQueryData`
+
+`setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook within the default `gcTime`, the query will be garbage collected. If the default `gcTime` has not been configured, it defaults to 5 minutes.** To update multiple queries at once and match query keys partially, you need to use [`queryClient.setQueriesData`](#queryclientsetqueriesdata) instead.
+
+> The difference between using `setQueryData` and `fetchQuery` is that `setQueryData` is sync and assumes that you already synchronously have the data available. If you need to fetch the data asynchronously, it's suggested that you either refetch the query key or use `fetchQuery` to handle the asynchronous fetch.
+
+```tsx
+queryClient.setQueryData(queryKey, updater)
+```
+
+**Options**
+
+- `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+- `updater: TQueryFnData | undefined | ((oldData: TQueryFnData | undefined) => TQueryFnData | undefined)`
+  - If non-function is passed, the data will be updated to this value
+  - If a function is passed, it will receive the old data value and be expected to return a new one.
+
+**Using an updater value**
+
+```tsx
+setQueryData(queryKey, newData)
+```
+
+If the value is `undefined`, the query data is not updated.
+
+**Using an updater function**
+
+For convenience in syntax, you can also pass an updater function which receives the current data value and returns the new one:
+
+```tsx
+setQueryData(queryKey, (oldData) => newData)
+```
+
+If the updater function returns `undefined`, the query data will not be updated. If the updater function receives `undefined` as input, you can return `undefined` to bail out of the update and thus _not_ create a new cache entry.
+
+**Immutability**
+
+Updates via `setQueryData` must be performed in an _immutable_ way. **DO NOT** attempt to write directly to the cache by mutating `oldData` or data that you retrieved via `getQueryData` in place.
+
+## `queryClient.getQueryState`
+
+`getQueryState` is a synchronous function that can be used to get an existing query's state. If the query does not exist, `undefined` will be returned.
+
+```tsx
+const state = queryClient.getQueryState(queryKey)
+console.log(state.dataUpdatedAt)
+```
+
+**Options**
+
+- `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+
+## `queryClient.setQueriesData`
+
+`setQueriesData` is a synchronous function that can be used to immediately update cached data of multiple queries by using filter function or partially matching the query key. Only queries that match the passed queryKey or queryFilter will be updated - no new cache entries will be created. Under the hood, [`setQueryData`](#queryclientsetquerydata) is called for each existing query.
+
+```tsx
+queryClient.setQueriesData(filters, updater)
+```
+
+**Options**
+
+- `filters: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+  - if a filter is passed, queryKeys matching the filter will be updated
+- `updater: TQueryFnData | (oldData: TQueryFnData | undefined) => TQueryFnData`
+  - the [setQueryData](#queryclientsetquerydata) updater function or new data, will be called for each matching queryKey
+
+## `queryClient.invalidateQueries`
+
+The `invalidateQueries` method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. By default, all matching queries are immediately marked as invalid and active queries are refetched in the background.
+
+- If you **do not want active queries to refetch**, and simply be marked as invalid, you can use the `refetchType: 'none'` option.
+- If you **want inactive queries to refetch** as well, use the `refetchType: 'all'` option
+- For refetching, [queryClient.refetchQueries](#queryclientrefetchqueries) is called.
+
+```tsx
+await queryClient.invalidateQueries(
+  {
+    queryKey: ['posts'],
+    exact,
+    refetchType: 'active',
+  },
+  { throwOnError, cancelRefetch },
+)
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+  - `queryKey?: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+  - `refetchType?: 'active' | 'inactive' | 'all' | 'none'`
+    - Defaults to `'active'`
+    - When set to `active`, only queries that match the refetch predicate and are actively being rendered via `useQuery` and friends will be refetched in the background.
+    - When set to `inactive`, only queries that match the refetch predicate and are NOT actively being rendered via `useQuery` and friends will be refetched in the background.
+    - When set to `all`, all queries that match the refetch predicate will be refetched in the background.
+    - When set to `none`, no queries will be refetched, and those that match the refetch predicate will be marked as invalid only.
+- `options?: InvalidateOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - `cancelRefetch?: boolean`
+    - Defaults to `true`
+      - Per default, a currently running request will be cancelled before a new request is made
+    - When set to `false`, no refetch will be made if there is already a request running.
+
+**Notes**
+
+- Unlike [`refetchQueries`](#queryclientrefetchqueries), `invalidateQueries` marks matching queries as invalidated and then refetches `active` queries (unless otherwise specified with the `refetchType` option).
+- Unlike [`removeQueries`](#queryclientremovequeries), `invalidateQueries` keeps matching queries in the cache.
+
+## `queryClient.refetchQueries`
+
+The `refetchQueries` method can be used to refetch queries based on certain conditions.
+
+Examples:
+
+```tsx
+// refetch all queries:
+await queryClient.refetchQueries()
+
+// refetch all stale queries:
+await queryClient.refetchQueries({ stale: true })
+
+// refetch all active queries partially matching a query key:
+await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
+
+// refetch all active queries exactly matching a query key:
+await queryClient.refetchQueries({
+  queryKey: ['posts', 1],
+  type: 'active',
+  exact: true,
+})
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+- `options?: RefetchOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - `cancelRefetch?: boolean`
+    - Defaults to `true`
+      - Per default, a currently running request will be cancelled before a new request is made
+    - When set to `false`, no refetch will be made if there is already a request running.
+
+**Returns**
+
+This function returns a promise that will resolve when all of the queries are done being refetched. By default, it **will not** throw an error if any of those queries refetches fail, but this can be configured by setting the `throwOnError` option to `true`
+
+**Notes**
+
+- Queries that are "disabled" because they only have disabled Observers will never be refetched.
+- Queries that are "static" because they only have Observers with a Static StaleTime will never be refetched.
+- Unlike [`invalidateQueries`](#queryclientinvalidatequeries), `refetchQueries` refetches all matching queries.
+
+## `queryClient.cancelQueries`
+
+The `cancelQueries` method can be used to cancel outgoing queries based on their query keys or any other functionally accessible property/state of the query.
+
+This is most useful when performing optimistic updates since you will likely need to cancel any outgoing query refetches so they don't clobber your optimistic update when they resolve.
+
+```tsx
+await queryClient.cancelQueries(
+  { queryKey: ['posts'], exact: true },
+  { silent: true },
+)
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+- `cancelOptions?: CancelOptions`: [Cancel Options](/query/framework/react/guides/query-cancellation#cancel-options)
+
+**Returns**
+
+This method does not return anything
+
+## `queryClient.removeQueries`
+
+The `removeQueries` method can be used to remove queries from the cache based on their query keys or any other functionally accessible property/state of the query.
+
+```tsx
+queryClient.removeQueries({ queryKey, exact: true })
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+
+**Returns**
+
+This method does not return anything
+
+**Notes**
+
+- Unlike [`invalidateQueries`](#queryclientinvalidatequeries) or [`refetchQueries`](#queryclientrefetchqueries), `removeQueries` removes matching queries from the cache instead of refetching them.
+
+## `queryClient.resetQueries`
+
+The `resetQueries` method can be used to reset queries in the cache to their
+initial state based on their query keys or any other functionally accessible
+property/state of the query.
+
+This will notify subscribers &mdash; unlike `clear`, which removes all
+subscribers &mdash; and reset the query to its pre-loaded state &mdash; unlike
+`invalidateQueries`. If a query has `initialData`, the query's data will be
+reset to that. If a query is active, it will be refetched.
+
+```tsx
+queryClient.resetQueries({ queryKey, exact: true })
+```
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+- `options?: ResetOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - `cancelRefetch?: boolean`
+    - Defaults to `true`
+      - Per default, a currently running request will be cancelled before a new request is made
+    - When set to `false`, no refetch will be made if there is already a request running.
+
+**Returns**
+
+This method returns a promise that resolves when all active queries have been refetched.
+
+## `queryClient.isFetching`
+
+This `isFetching` method returns an `integer` representing how many queries, if any, in the cache are currently fetching (including background-fetching, loading new pages, or loading more infinite query results)
+
+```tsx
+if (queryClient.isFetching()) {
+  console.log('At least one query is fetching!')
+}
+```
+
+TanStack Query also exports a handy [`useIsFetching`](/query/framework/react/reference/useIsFetching) hook that will let you subscribe to this state in your components without creating a manual subscription to the query cache.
+
+**Options**
+
+- `filters?: QueryFilters`: [Query Filters](/query/framework/react/guides/filters#query-filters)
+
+**Returns**
+
+This method returns the number of fetching queries.
+
+## `queryClient.isMutating`
+
+This `isMutating` method returns an `integer` representing how many mutations, if any, in the cache are currently fetching.
+
+```tsx
+if (queryClient.isMutating()) {
+  console.log('At least one mutation is fetching!')
+}
+```
+
+TanStack Query also exports a handy [`useIsMutating`](/query/framework/react/reference/useIsMutating) hook that will let you subscribe to this state in your components without creating a manual subscription to the mutation cache.
+
+**Options**
+
+- `filters: MutationFilters`: [Mutation Filters](/query/framework/react/guides/filters#mutation-filters)
+
+**Returns**
+
+This method returns the number of fetching mutations.
+
+## `queryClient.getDefaultOptions`
+
+The `getDefaultOptions` method returns the default options which have been set when creating the client or with `setDefaultOptions`.
+
+```tsx
+const defaultOptions = queryClient.getDefaultOptions()
+```
+
+## `queryClient.setDefaultOptions`
+
+The `setDefaultOptions` method can be used to dynamically set the default options for this queryClient. Previously defined default options will be overwritten.
+
+```tsx
+queryClient.setDefaultOptions({
+  queries: {
+    staleTime: Infinity,
+  },
+})
+```
+
+## `queryClient.getQueryDefaults`
+
+The `getQueryDefaults` method returns the default options which have been set for specific queries:
+
+```tsx
+const defaultOptions = queryClient.getQueryDefaults(['posts'])
+```
+
+> Note that if several query defaults match the given query key, they will be merged together based on the order of registration.
+> See [`setQueryDefaults`](#queryclientsetquerydefaults).
+
+## `queryClient.setQueryDefaults`
+
+`setQueryDefaults` can be used to set default options for specific queries:
+
+```tsx
+queryClient.setQueryDefaults(['posts'], { queryFn: fetchPosts })
+
+function Component() {
+  const { data } = useQuery({ queryKey: ['posts'] })
+}
+```
+
+**Options**
+
+- `queryKey: QueryKey`: [Query Keys](/query/framework/react/guides/query-keys)
+- `options: QueryOptions`
+
+> As stated in [`getQueryDefaults`](#queryclientgetquerydefaults), the order of registration of query defaults does matter.
+> Since the matching defaults are merged by `getQueryDefaults`, the registration should be made in the following order: from the **most generic key** to the **least generic one** .
+> This way, more specific defaults will override more generic defaults.
+
+## `queryClient.getMutationDefaults`
+
+The `getMutationDefaults` method returns the default options which have been set for specific mutations:
+
+```tsx
+const defaultOptions = queryClient.getMutationDefaults(['addPost'])
+```
+
+## `queryClient.setMutationDefaults`
+
+`setMutationDefaults` can be used to set default options for specific mutations:
+
+```tsx
+queryClient.setMutationDefaults(['addPost'], { mutationFn: addPost })
+
+function Component() {
+  const { data } = useMutation({ mutationKey: ['addPost'] })
+}
+```
+
+**Options**
+
+- `mutationKey: unknown[]`
+- `options: MutationOptions`
+
+> Similar to [`setQueryDefaults`](#queryclientsetquerydefaults), the order of registration does matter here.
+
+## `queryClient.getQueryCache`
+
+The `getQueryCache` method returns the query cache this client is connected to.
+
+```tsx
+const queryCache = queryClient.getQueryCache()
+```
+
+## `queryClient.getMutationCache`
+
+The `getMutationCache` method returns the mutation cache this client is connected to.
+
+```tsx
+const mutationCache = queryClient.getMutationCache()
+```
+
+## `queryClient.clear`
+
+The `clear` method clears all connected caches.
+
+```tsx
+queryClient.clear()
+```
+
+## `queryClient.resumePausedMutations`
+
+Can be used to resume mutations that have been paused because there was no network connection.
+
+```tsx
+queryClient.resumePausedMutations()
+```
diff --git a/mintlify/query/reference/QueryClient|QueryClient.md b/mintlify/query/reference/QueryClient|QueryClient.md
new file mode 100644
index 000000000..d444175ce
--- /dev/null
+++ b/mintlify/query/reference/QueryClient|QueryClient.md
@@ -0,0 +1,9 @@
+---
+title: "QueryClient|QueryClient"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient)
+- [Browse the pinned upstream repository](https://github.com/TanStack/query/tree/bb68fa0aa1478640884007ecd989a9e48db253eb)
diff --git a/mintlify/query/reference/QueryObserver.md b/mintlify/query/reference/QueryObserver.md
new file mode 100644
index 000000000..21064cb51
--- /dev/null
+++ b/mintlify/query/reference/QueryObserver.md
@@ -0,0 +1,19 @@
+---
+id: QueryObserver
+title: QueryObserver
+---
+
+The `QueryObserver` can be used to observe and switch between queries.
+
+```tsx
+const observer = new QueryObserver(queryClient, { queryKey: ['posts'] })
+
+const unsubscribe = observer.subscribe((result) => {
+  console.log(result)
+  unsubscribe()
+})
+```
+
+**Options**
+
+The options for the `QueryObserver` are exactly the same as those of [`useQuery`](/query/framework/react/reference/useQuery).
diff --git a/mintlify/query/reference/environmentManager.md b/mintlify/query/reference/environmentManager.md
new file mode 100644
index 000000000..2295a7646
--- /dev/null
+++ b/mintlify/query/reference/environmentManager.md
@@ -0,0 +1,50 @@
+---
+id: EnvironmentManager
+title: environmentManager
+---
+
+The `environmentManager` manages how TanStack Query detects whether the current runtime should be treated as server-side.
+
+By default, it uses the same server detection as the exported `isServer` utility from query-core.
+
+Use this manager to override server detection globally for runtimes that are not traditional browser/server environments (for example, extension workers).
+
+Its available methods are:
+
+- [`isServer`](#environmentmanagerisserver)
+- [`setIsServer`](#environmentmanagersetisserver)
+
+## `environmentManager.isServer`
+
+Returns whether the current runtime is treated as a server environment.
+
+```tsx
+import { environmentManager } from '@tanstack/react-query'
+
+const server = environmentManager.isServer()
+```
+
+## `environmentManager.setIsServer`
+
+Overrides the server check globally.
+
+```tsx
+import { environmentManager } from '@tanstack/react-query'
+
+// Override
+environmentManager.setIsServer(() => {
+  return typeof window === 'undefined' && !('chrome' in globalThis)
+})
+```
+
+**Options**
+
+- `isServerValue: () => boolean`
+
+To restore the default behavior, set the function back to query-core's `isServer` utility:
+
+```tsx
+import { environmentManager, isServer } from '@tanstack/react-query'
+
+environmentManager.setIsServer(() => isServer)
+```
diff --git a/mintlify/query/reference/focusManager.md b/mintlify/query/reference/focusManager.md
new file mode 100644
index 000000000..9e4c9ee87
--- /dev/null
+++ b/mintlify/query/reference/focusManager.md
@@ -0,0 +1,76 @@
+---
+id: FocusManager
+title: FocusManager
+---
+
+The `FocusManager` manages the focus state within TanStack Query.
+
+It can be used to change the default event listeners or to manually change the focus state.
+
+Its available methods are:
+
+- [`setEventListener`](#focusmanagerseteventlistener)
+- [`subscribe`](#focusmanagersubscribe)
+- [`setFocused`](#focusmanagersetfocused)
+- [`isFocused`](#focusmanagerisfocused)
+
+## `focusManager.setEventListener`
+
+`setEventListener` can be used to set a custom event listener:
+
+```tsx
+import { focusManager } from '@tanstack/react-query'
+
+focusManager.setEventListener((handleFocus) => {
+  // Listen to visibilitychange
+  if (typeof window !== 'undefined' && window.addEventListener) {
+    window.addEventListener('visibilitychange', handleFocus, false)
+  }
+
+  return () => {
+    // Be sure to unsubscribe if a new handler is set
+    window.removeEventListener('visibilitychange', handleFocus)
+  }
+})
+```
+
+## `focusManager.subscribe`
+
+`subscribe` can be used to subscribe to changes in the visibility state. It returns an unsubscribe function:
+
+```tsx
+import { focusManager } from '@tanstack/react-query'
+
+const unsubscribe = focusManager.subscribe((isVisible) => {
+  console.log('isVisible', isVisible)
+})
+```
+
+## `focusManager.setFocused`
+
+`setFocused` can be used to manually set the focus state. Set `undefined` to fall back to the default focus check.
+
+```tsx
+import { focusManager } from '@tanstack/react-query'
+
+// Set focused
+focusManager.setFocused(true)
+
+// Set unfocused
+focusManager.setFocused(false)
+
+// Fallback to the default focus check
+focusManager.setFocused(undefined)
+```
+
+**Options**
+
+- `focused: boolean | undefined`
+
+## `focusManager.isFocused`
+
+`isFocused` can be used to get the current focus state.
+
+```tsx
+const isFocused = focusManager.isFocused()
+```
diff --git a/mintlify/query/reference/notifyManager.md b/mintlify/query/reference/notifyManager.md
new file mode 100644
index 000000000..bfafdb75a
--- /dev/null
+++ b/mintlify/query/reference/notifyManager.md
@@ -0,0 +1,93 @@
+---
+id: NotifyManager
+title: NotifyManager
+---
+
+The `notifyManager` handles scheduling and batching callbacks in TanStack Query.
+
+It exposes the following methods:
+
+- [batch](#notifymanagerbatch)
+- [batchCalls](#notifymanagerbatchcalls)
+- [schedule](#notifymanagerschedule)
+- [setNotifyFunction](#notifymanagersetnotifyfunction)
+- [setBatchNotifyFunction](#notifymanagersetbatchnotifyfunction)
+- [setScheduler](#notifymanagersetscheduler)
+
+## `notifyManager.batch`
+
+`batch` can be used to batch all updates scheduled inside the passed callback.
+This is mainly used internally to optimize queryClient updating.
+
+```ts
+function batch<T>(callback: () => T): T
+```
+
+## `notifyManager.batchCalls`
+
+`batchCalls` is a higher-order function that takes a callback and wraps it.
+All calls to the wrapped function schedule the callback to be run on the next batch.
+
+```ts
+type BatchCallsCallback<T extends Array<unknown>> = (...args: T) => void
+
+function batchCalls<T extends Array<unknown>>(
+  callback: BatchCallsCallback<T>,
+): BatchCallsCallback<T>
+```
+
+## `notifyManager.schedule`
+
+`schedule` schedules a function to be run on the next batch. By default, the batch is run
+with a setTimeout, but this can be configured.
+
+```ts
+function schedule(callback: () => void): void
+```
+
+## `notifyManager.setNotifyFunction`
+
+`setNotifyFunction` overrides the notify function. This function is passed the
+callback when it should be executed. The default notifyFunction just calls it.
+
+This can be used to for example wrap notifications with `React.act` while running tests:
+
+```ts
+import { notifyManager } from '@tanstack/react-query'
+import { act } from 'react-dom/test-utils'
+
+notifyManager.setNotifyFunction(act)
+```
+
+## `notifyManager.setBatchNotifyFunction`
+
+`setBatchNotifyFunction` sets the function to use for batched updates
+
+If your framework supports a custom batching function, you can let TanStack Query know about it by calling notifyManager.setBatchNotifyFunction.
+
+For example, this is how the batch function is set in solid-query:
+
+```ts
+import { notifyManager } from '@tanstack/query-core'
+import { batch } from 'solid-js'
+
+notifyManager.setBatchNotifyFunction(batch)
+```
+
+## `notifyManager.setScheduler`
+
+`setScheduler` configures a custom callback that should schedules when the next
+batch runs. The default behaviour is `setTimeout(callback, 0)`.
+
+```ts
+import { notifyManager } from '@tanstack/react-query'
+
+// Schedule batches in the next microtask
+notifyManager.setScheduler(queueMicrotask)
+
+// Schedule batches before the next frame is rendered
+notifyManager.setScheduler(requestAnimationFrame)
+
+// Schedule batches some time in the future
+notifyManager.setScheduler((cb) => setTimeout(cb, 10))
+```
diff --git a/mintlify/query/reference/onlineManager.md b/mintlify/query/reference/onlineManager.md
new file mode 100644
index 000000000..efc4f560a
--- /dev/null
+++ b/mintlify/query/reference/onlineManager.md
@@ -0,0 +1,74 @@
+---
+id: OnlineManager
+title: OnlineManager
+---
+
+The `OnlineManager` manages the online state within TanStack Query. It can be used to change the default event listeners or to manually change the online state.
+
+> Per default, the `onlineManager` assumes an active network connection, and listens to the `online` and `offline` events on the `window` object to detect changes.
+
+> In previous versions, `navigator.onLine` was used to determine the network status. However, it doesn't work well in Chromium based browsers. There are [a lot of issues](https://bugs.chromium.org/p/chromium/issues/list?q=navigator.online) around false negatives, which lead to Queries being wrongfully marked as `offline`.
+
+> To circumvent this, we now always start with `online: true` and only listen to `online` and `offline` events to update the status.
+
+> This should reduce the likelihood of false negatives, however, it might mean false positives for offline apps that load via serviceWorkers, which can work even without an internet connection.
+
+Its available methods are:
+
+- [`setEventListener`](#onlinemanagerseteventlistener)
+- [`subscribe`](#onlinemanagersubscribe)
+- [`setOnline`](#onlinemanagersetonline)
+- [`isOnline`](#onlinemanagerisonline)
+
+## `onlineManager.setEventListener`
+
+`setEventListener` can be used to set a custom event listener:
+
+```tsx
+import NetInfo from '@react-native-community/netinfo'
+import { onlineManager } from '@tanstack/react-query'
+
+onlineManager.setEventListener((setOnline) => {
+  return NetInfo.addEventListener((state) => {
+    setOnline(!!state.isConnected)
+  })
+})
+```
+
+## `onlineManager.subscribe`
+
+`subscribe` can be used to subscribe to changes in the online state. It returns an unsubscribe function:
+
+```tsx
+import { onlineManager } from '@tanstack/react-query'
+
+const unsubscribe = onlineManager.subscribe((isOnline) => {
+  console.log('isOnline', isOnline)
+})
+```
+
+## `onlineManager.setOnline`
+
+`setOnline` can be used to manually set the online state.
+
+```tsx
+import { onlineManager } from '@tanstack/react-query'
+
+// Set to online
+onlineManager.setOnline(true)
+
+// Set to offline
+onlineManager.setOnline(false)
+```
+
+**Options**
+
+- `online: boolean`
+
+## `onlineManager.isOnline`
+
+`isOnline` can be used to get the current online state.
+
+```tsx
+const isOnline = onlineManager.isOnline()
+```
diff --git a/mintlify/query/reference/streamedQuery.md b/mintlify/query/reference/streamedQuery.md
new file mode 100644
index 000000000..0198188fb
--- /dev/null
+++ b/mintlify/query/reference/streamedQuery.md
@@ -0,0 +1,45 @@
+---
+id: streamedQuery
+title: streamedQuery
+---
+
+`streamedQuery` is a helper function to create a query function that streams data from an [AsyncIterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator). Data will be an Array of all the chunks received. The query will be in a `pending` state until the first chunk of data is received, but will go to `success` after that. The query will stay in fetchStatus `fetching` until the stream ends.
+
+To see `streamedQuery` in action, take a look at our chat example in the [examples/react/chat directory on GitHub](https://github.com/TanStack/query/tree/main/examples/react/chat).
+
+```tsx
+import { experimental_streamedQuery as streamedQuery } from '@tanstack/react-query'
+
+const query = queryOptions({
+  queryKey: ['data'],
+  queryFn: streamedQuery({
+    streamFn: fetchDataInChunks,
+  }),
+})
+```
+
+> Note: `streamedQuery` is currently marked as `experimental` because we want to gather feedback from the community. If you've tried out the API and have feedback for us, please provide it in this [GitHub discussion](https://github.com/TanStack/query/discussions/9065).
+
+**Options**
+
+- `streamFn: (context: QueryFunctionContext) => Promise<AsyncIterable<TData>>`
+  - **Required**
+  - The function that returns a Promise of an AsyncIterable with data to stream in.
+  - Receives a [QueryFunctionContext](/query/framework/react/guides/query-functions#queryfunctioncontext)
+- `refetchMode?: 'append' | 'reset' | 'replace'`
+  - Optional
+  - Defines how refetches are handled.
+  - Defaults to `'reset'`
+  - When set to `'reset'`, the query will erase all data and go back into `pending` state.
+  - When set to `'append'`, data will be appended to existing data.
+  - When set to `'replace'`, all data will be written to the cache once the stream ends.
+- `reducer?: (accumulator: TData, chunk: TQueryFnData) => TData`
+  - Optional
+  - Reduces streamed chunks (`TQueryFnData`) into the final data shape (`TData`).
+  - Default: appends each chunk to the end of the accumulator when `TData` is an array.
+  - If `TData` is not an array, you must provide a custom `reducer`.
+- `initialValue?: TData = TQueryFnData`
+  - Optional
+  - Defines the initial data to be used while the first chunk is being fetched, and it is also returned when the stream yields no values.
+  - It is mandatory when custom `reducer` is provided.
+  - Defaults to an empty array.
diff --git a/mintlify/query/reference/timeoutManager.md b/mintlify/query/reference/timeoutManager.md
new file mode 100644
index 000000000..4ce710484
--- /dev/null
+++ b/mintlify/query/reference/timeoutManager.md
@@ -0,0 +1,119 @@
+---
+id: TimeoutManager
+title: TimeoutManager
+---
+
+The `TimeoutManager` handles `setTimeout` and `setInterval` timers in TanStack Query.
+
+TanStack Query uses timers to implement features like query `staleTime` and `gcTime`, as well as retries, throttling, and debouncing.
+
+By default, TimeoutManager uses the global `setTimeout` and `setInterval`, but it can be configured to use custom implementations instead.
+
+Its available methods are:
+
+- [`timeoutManager.setTimeoutProvider`](#timeoutmanagersettimeoutprovider)
+  - [`TimeoutProvider`](#timeoutprovider)
+- [`timeoutManager.setTimeout`](#timeoutmanagersettimeout)
+- [`timeoutManager.clearTimeout`](#timeoutmanagercleartimeout)
+- [`timeoutManager.setInterval`](#timeoutmanagersetinterval)
+- [`timeoutManager.clearInterval`](#timeoutmanagerclearinterval)
+
+## `timeoutManager.setTimeoutProvider`
+
+`setTimeoutProvider` can be used to set a custom implementation of the `setTimeout`, `clearTimeout`, `setInterval`, `clearInterval` functions, called a `TimeoutProvider`.
+
+This may be useful if you notice event loop performance issues with thousands of queries. A custom TimeoutProvider could also support timer delays longer than the global `setTimeout` maximum delay value of about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout#maximum_delay_value).
+
+It is important to call `setTimeoutProvider` before creating a QueryClient or queries, so that the same provider is used consistently for all timers in the application, since different TimeoutProviders cannot cancel each others' timers.
+
+```tsx
+import { timeoutManager, QueryClient } from '@tanstack/react-query'
+import { CustomTimeoutProvider } from './CustomTimeoutProvider'
+
+timeoutManager.setTimeoutProvider(new CustomTimeoutProvider())
+
+export const queryClient = new QueryClient()
+```
+
+### `TimeoutProvider`
+
+Timers are very performance sensitive. Short term timers (such as those with delays less than 5 seconds) tend to be latency sensitive, where long-term timers may benefit more from [timer coalescing](https://en.wikipedia.org/wiki/Timer_coalescing) - batching timers with similar deadlines together - using a data structure like a [hierarchical time wheel](https://www.npmjs.com/package/timer-wheel).
+
+The `TimeoutProvider` type requires that implementations handle timer ID objects that can be converted to `number` via [Symbol.toPrimitive][toPrimitive] because runtimes like NodeJS return [objects][nodejs-timeout] from their global `setTimeout` and `setInterval` functions. TimeoutProvider implementations are free to coerce timer IDs to number internally, or to return their own custom object type that implements `{ [Symbol.toPrimitive]: () => number }`.
+
+[nodejs-timeout]: https://nodejs.org/api/timers.html#class-timeout
+[toPrimitive]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+
+```tsx
+type ManagedTimerId = number | { [Symbol.toPrimitive]: () => number }
+
+type TimeoutProvider<TTimerId extends ManagedTimerId = ManagedTimerId> = {
+  readonly setTimeout: (callback: TimeoutCallback, delay: number) => TTimerId
+  readonly clearTimeout: (timeoutId: TTimerId | undefined) => void
+
+  readonly setInterval: (callback: TimeoutCallback, delay: number) => TTimerId
+  readonly clearInterval: (intervalId: TTimerId | undefined) => void
+}
+```
+
+## `timeoutManager.setTimeout`
+
+`setTimeout(callback, delayMs)` schedules a callback to run after approximately `delay` milliseconds, like the global [setTimeout function](https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout).The callback can be canceled with `timeoutManager.clearTimeout`.
+
+It returns a timer ID, which may be a number or an object that can be coerced to a number via [Symbol.toPrimitive][toPrimitive].
+
+```tsx
+import { timeoutManager } from '@tanstack/react-query'
+
+const timeoutId = timeoutManager.setTimeout(
+  () => console.log('ran at:', new Date()),
+  1000,
+)
+
+const timeoutIdNumber: number = Number(timeoutId)
+```
+
+## `timeoutManager.clearTimeout`
+
+`clearTimeout(timerId)` cancels a timeout callback scheduled with `setTimeout`, like the global [clearTimeout function](https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout). It should be called with a timer ID returned by `timeoutManager.setTimeout`.
+
+```tsx
+import { timeoutManager } from '@tanstack/react-query'
+
+const timeoutId = timeoutManager.setTimeout(
+  () => console.log('ran at:', new Date()),
+  1000,
+)
+
+timeoutManager.clearTimeout(timeoutId)
+```
+
+## `timeoutManager.setInterval`
+
+`setInterval(callback, intervalMs)` schedules a callback to be called approximately every `intervalMs`, like the global [setInterval function](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval).
+
+Like `setTimeout`, it returns a timer ID, which may be a number or an object that can be coerced to a number via [Symbol.toPrimitive](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive).
+
+```tsx
+import { timeoutManager } from '@tanstack/react-query'
+
+const intervalId = timeoutManager.setInterval(
+  () => console.log('ran at:', new Date()),
+  1000,
+)
+```
+
+## `timeoutManager.clearInterval`
+
+`clearInterval(intervalId)` can be used to cancel an interval, like the global [clearInterval function](https://developer.mozilla.org/en-US/docs/Web/API/Window/clearInterval). It should be called with an interval ID returned by `timeoutManager.setInterval`.
+
+```tsx
+import { timeoutManager } from '@tanstack/react-query'
+
+const intervalId = timeoutManager.setInterval(
+  () => console.log('ran at:', new Date()),
+  1000,
+)
+
+timeoutManager.clearInterval(intervalId)
+```
diff --git a/mintlify/ranger/concepts.md b/mintlify/ranger/concepts.md
new file mode 100644
index 000000000..63ecc9abf
--- /dev/null
+++ b/mintlify/ranger/concepts.md
@@ -0,0 +1,26 @@
+---
+name: Concepts
+route: /concepts
+---
+
+# Concepts
+
+## Ranger is a "headless" UI library
+
+Ranger is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements. You are in charge of utilizing the state and callbacks of the hooks provided by this library to render your own table markup. [Read this article to understand why Ranger is built this way](https://www.merrickchristensen.com/articles/headless-user-interface-components/). If you don't want to, then here's a quick rundown anyway:
+
+- Separation of Concerns - Not that superficial kind you read about all the time. The real kind. Ranger as a library honestly has no business being in charge of your UI. The look, feel, and overall experience of your table is what makes your app or product great. The less Ranger gets in the way of that, the better!
+- Maintenance - By removing the massive (and seemingly endless) API surface area required to support every UI use-case, Ranger can remain small, easy-to-use and simple to update/maintain.
+- Extensibility - UI presents countless edge cases for a library simply because it's a creative medium, and one where every developer does things differently. By not dictating UI concerns, Ranger empowers the developer to design and extend the UI based on their unique use-case.
+
+## The Ranger instance
+
+At the heart of every Ranger is the `Ranger` class. This class will provide everything you'll ever need to build a ranger and interact with its state. This includes, but is not limited to:
+
+- Value Range
+- Snap Interpolation
+- Ticks (labels) generation
+
+After reading about Ranger's concepts, you should:
+
+- [Check Out Some Examples](/ranger/framework/react/examples/basic)
diff --git a/mintlify/ranger/faq.md b/mintlify/ranger/faq.md
new file mode 100644
index 000000000..7fb6b4b5f
--- /dev/null
+++ b/mintlify/ranger/faq.md
@@ -0,0 +1,10 @@
+---
+name: FAQ
+route: /faq
+---
+
+# FAQ
+
+Below are some of the most frequently asked questions on how to use the React Ranger API to solve various table challenges you may encounter
+
+&lt;hr/>
diff --git a/mintlify/ranger/framework/react/api/basic.md b/mintlify/ranger/framework/react/api/basic.md
new file mode 100644
index 000000000..528559994
--- /dev/null
+++ b/mintlify/ranger/framework/react/api/basic.md
@@ -0,0 +1,85 @@
+---
+name: Basic
+route: /api/basic
+menu: API
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [basic](/ranger/framework/react/examples/basic)
+
+The API below described how to use the **basic** features.
+
+## Options
+
+### values
+
+```tsx
+values: ReadonlyArray<number>
+```
+
+**Required** The current value (or values) for the range.
+
+### min
+
+```tsx
+min: number
+```
+
+**Required** The minimum limit for the range.
+
+### max
+
+```tsx
+max: number
+```
+
+**Required** The maximum limit for the range.
+
+### stepSize
+
+```ts
+stepSize: number
+```
+
+**Required** The distance between selectable steps.
+
+### onChange
+
+```ts
+onChange: (instance: Ranger<TTrackElement>) => void
+```
+
+A function that is called when the handle is released.
+
+## API
+
+### handles
+
+```tsx
+handles: ReadonlyArray<{
+  value: number
+  isActive: boolean
+  onKeyDownHandler(event): function
+  onMouseDownHandler(event): function
+  onTouchStart(event): function
+}>
+```
+
+Handles to be rendered. Each `handle` has the following props:
+
+- `value: number` - The current value for the handle.
+- `isActive: boolean` - Denotes if the handle is currently being dragged.
+- `onKeyDownHandler(event): func`
+- `onMouseDownHandler(event): func`
+- `onTouchStart(event): func`
+
+### activeHandleIndex
+
+```tsx
+activeHandleIndex: null | number
+```
+
+The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.
diff --git a/mintlify/ranger/framework/react/api/custom-steps.md b/mintlify/ranger/framework/react/api/custom-steps.md
new file mode 100644
index 000000000..e24e220dd
--- /dev/null
+++ b/mintlify/ranger/framework/react/api/custom-steps.md
@@ -0,0 +1,46 @@
+---
+name: Custom Steps
+route: /api/custom-steps
+menu: API
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [custom-steps](/ranger/framework/react/examples/custom-steps)
+
+The API below described how to use the **custom-steps** features.
+
+## Options
+
+### steps
+
+```ts
+steps: Array<number>
+```
+
+An array of custom steps to use. This will override `stepSize`
+
+### ticks
+
+```ts
+ticks: Array<number>
+```
+
+An array of custom ticks to use. This will override `tickSize`
+
+## API
+
+### getTicks
+
+```tsx
+getTicks: () =>
+  ReadonlyArray<{ value: number; key: number; percentage: number }>
+```
+
+Ticks to be rendered. Each `tick` has the following props:
+
+- `value: number` - The tick number to be displayed
+- `key: number` - The key of a tick
+- `percentage: number` - Percentage value of where tick should be placed on ranger
diff --git a/mintlify/ranger/framework/react/api/custom-styles.md b/mintlify/ranger/framework/react/api/custom-styles.md
new file mode 100644
index 000000000..d0f05a1b7
--- /dev/null
+++ b/mintlify/ranger/framework/react/api/custom-styles.md
@@ -0,0 +1,26 @@
+---
+name: Custom Styles
+route: /api/custom-styles
+menu: API
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [custom-styles](/ranger/framework/react/examples/custom-styles)
+
+The API below described how to use the **custom-steps** features.
+
+## API
+
+### getSegments
+
+```tsx
+getSegments: () => ReadonlyArray<{ left: number; width: number }>
+```
+
+Segments to be rendered. Each `segment` has the following props:
+
+- `left: number` - Percentage value of where segment should start on ranger
+- `width: number` - Percentage value of segment width
diff --git a/mintlify/ranger/framework/react/api/logarithmic-interpolator.md b/mintlify/ranger/framework/react/api/logarithmic-interpolator.md
new file mode 100644
index 000000000..91de89143
--- /dev/null
+++ b/mintlify/ranger/framework/react/api/logarithmic-interpolator.md
@@ -0,0 +1,31 @@
+---
+name: Logarithmic Interpolator
+route: /api/logarithmic-interpolator
+menu: API
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [logarithmic-interpolator](/ranger/framework/react/examples/logarithmic-interpolator)
+
+The API below described how to use the **logarithmic-interpolator** features.
+
+## Options
+
+By default, `react-ranger` uses linear interpolation between data points, but allows you to easily customize it to use your own interpolation functions by passing an object that implements the following interface.
+
+### interpolator
+
+```tsx
+interpolator: {
+    getPercentageForValue: (val: number, min: number, max: number): number;
+    getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number;
+}
+```
+
+The Interpolator to use. Defaults to the bundled linear-scale interpolator
+
+- `getPercentageForValue` - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right.
+- `getValueForClientX`- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value.
diff --git a/mintlify/ranger/framework/react/api/update-on-drag.md b/mintlify/ranger/framework/react/api/update-on-drag.md
new file mode 100644
index 000000000..1ccd5f9b2
--- /dev/null
+++ b/mintlify/ranger/framework/react/api/update-on-drag.md
@@ -0,0 +1,23 @@
+---
+name: Update On Drag
+route: /api/update-on-drag
+menu: API
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [update-on-drag](/ranger/framework/react/examples/update-on-drag)
+
+The API below described how to use the **update-on-drag** features.
+
+## Options
+
+### onDrag
+
+```ts
+onDrag: (instance: Ranger<TTrackElement>) => void
+```
+
+A function that is called when a handled is dragged
diff --git a/mintlify/ranger/framework/react/examples/basic.md b/mintlify/ranger/framework/react/examples/basic.md
new file mode 100644
index 000000000..c8db54354
--- /dev/null
+++ b/mintlify/ranger/framework/react/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ranger/latest/docs/framework/react/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/examples/react/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ranger/framework/react/examples/custom-steps.md b/mintlify/ranger/framework/react/examples/custom-steps.md
new file mode 100644
index 000000000..935375a84
--- /dev/null
+++ b/mintlify/ranger/framework/react/examples/custom-steps.md
@@ -0,0 +1,12 @@
+---
+title: "Custom Steps"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ranger/latest/docs/framework/react/examples/custom-steps)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/examples/react/custom-steps)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ranger/framework/react/examples/custom-styles.md b/mintlify/ranger/framework/react/examples/custom-styles.md
new file mode 100644
index 000000000..5115536dc
--- /dev/null
+++ b/mintlify/ranger/framework/react/examples/custom-styles.md
@@ -0,0 +1,12 @@
+---
+title: "Custom Styles"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ranger/latest/docs/framework/react/examples/custom-styles)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/examples/react/custom-styles)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ranger/framework/react/examples/logarithmic-interpolator.md b/mintlify/ranger/framework/react/examples/logarithmic-interpolator.md
new file mode 100644
index 000000000..178d3fb77
--- /dev/null
+++ b/mintlify/ranger/framework/react/examples/logarithmic-interpolator.md
@@ -0,0 +1,12 @@
+---
+title: "Logarithmic Interpolator"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ranger/latest/docs/framework/react/examples/logarithmic-interpolator)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/examples/react/logarithmic-interpolator)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ranger/framework/react/examples/update-on-drag.md b/mintlify/ranger/framework/react/examples/update-on-drag.md
new file mode 100644
index 000000000..ce41c0722
--- /dev/null
+++ b/mintlify/ranger/framework/react/examples/update-on-drag.md
@@ -0,0 +1,12 @@
+---
+title: "Update on Drag"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/ranger/latest/docs/framework/react/examples/update-on-drag)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/ranger/tree/fef45175e2f30c1d0e2749649f73f2a460acdf6d/examples/react/update-on-drag)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/ranger/framework/react/react-ranger.md b/mintlify/ranger/framework/react/react-ranger.md
new file mode 100644
index 000000000..1d5673973
--- /dev/null
+++ b/mintlify/ranger/framework/react/react-ranger.md
@@ -0,0 +1,9 @@
+---
+title: React Ranger
+---
+
+You can install TanStack Ranger with any [NPM](https://npmjs.com) package manager.
+
+```sh
+npm install @tanstack/react-ranger
+```
diff --git a/mintlify/ranger/index.mdx b/mintlify/ranger/index.mdx
new file mode 100644
index 000000000..b84bab552
--- /dev/null
+++ b/mintlify/ranger/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Ranger"
+description: "Headless range and multi-range slider utilities. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Headless range and multi-range slider utilities.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/ranger/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/ranger">
+    Visit the canonical TanStack Ranger website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/ranger">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/ranger/installation.md b/mintlify/ranger/installation.md
new file mode 100644
index 000000000..891cd299a
--- /dev/null
+++ b/mintlify/ranger/installation.md
@@ -0,0 +1,13 @@
+---
+title: Installation
+---
+
+You can install TanStack Ranger with any [NPM](https://npmjs.com) package manager.
+
+Depending on your framework of choice, install one of the following packages:
+
+- [React](/ranger/framework/react/react-ranger)
+- Solid (coming soon!)
+- Vue (coming soon!)
+- Svelte (coming soon!)
+- Angular (coming soon!)
diff --git a/mintlify/ranger/overview.md b/mintlify/ranger/overview.md
new file mode 100644
index 000000000..d73d02f70
--- /dev/null
+++ b/mintlify/ranger/overview.md
@@ -0,0 +1,15 @@
+---
+title: Overview
+---
+
+Feature Rich and Lightweight Headless utility, which means out of the box, it doesn't render or supply any actual UI elements. Some of its features include:
+
+- 100% Typesafe
+- Lightweight (10kb)
+- Easy to maintain
+- Extensible
+- Not dictating UI
+
+## Let's go!
+
+Enough overview, there's so much more to do with TanStack Ranger. Hit that next button and let's get started!
diff --git a/mintlify/ranger/quick-start.md b/mintlify/ranger/quick-start.md
new file mode 100644
index 000000000..49b7c0ece
--- /dev/null
+++ b/mintlify/ranger/quick-start.md
@@ -0,0 +1,111 @@
+---
+title: Quick Start
+---
+
+If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Ranger. We'll use React for this example, but the same principles apply to other frameworks.
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useRanger, Ranger } from '@tanstack/react-ranger'
+
+function App() {
+  const rangerRef = React.useRef<HTMLDivElement>(null)
+  const [values, setValues] = React.useState<ReadonlyArray<number>>([
+    10, 15, 50,
+  ])
+
+  const rangerInstance = useRanger<HTMLDivElement>({
+    getRangerElement: () => rangerRef.current,
+    values,
+    min: 0,
+    max: 100,
+    stepSize: 5,
+    onChange: (instance: Ranger<HTMLDivElement>) =>
+      setValues(instance.sortedValues),
+  })
+
+  return (
+    <div className="App" style={{ padding: 10 }}>
+      <h1>Basic Range</h1>
+      <span>Active Index: {rangerInstance.activeHandleIndex}</span>
+      <br />
+      <br />
+      <div
+        ref={rangerRef}
+        style={{
+          position: 'relative',
+          userSelect: 'none',
+          height: '4px',
+          background: '#ddd',
+          boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
+          borderRadius: '2px',
+        }}
+      >
+        {rangerInstance
+          .handles()
+          .map(
+            (
+              {
+                value,
+                onKeyDownHandler,
+                onMouseDownHandler,
+                onTouchStart,
+                isActive,
+              },
+              i,
+            ) => (
+              <button
+                key={i}
+                onKeyDown={onKeyDownHandler}
+                onMouseDown={onMouseDownHandler}
+                onTouchStart={onTouchStart}
+                role="slider"
+                aria-valuemin={rangerInstance.options.min}
+                aria-valuemax={rangerInstance.options.max}
+                aria-valuenow={value}
+                style={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: `${rangerInstance.getPercentageForValue(value)}%`,
+                  zIndex: isActive ? '1' : '0',
+                  transform: 'translate(-50%, -50%)',
+                  width: '14px',
+                  height: '14px',
+                  outline: 'none',
+                  borderRadius: '100%',
+                  background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
+                  border: 'solid 1px #888',
+                }}
+              />
+            ),
+          )}
+      </div>
+      <br />
+      <br />
+      <br />
+      <pre
+        style={{
+          display: 'inline-block',
+          textAlign: 'left',
+        }}
+      >
+        <code>
+          {JSON.stringify({
+            values,
+          })}
+        </code>
+      </pre>
+    </div>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+```
+
+If you skipped this example or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Ranger! Let's move on.
diff --git a/mintlify/router/api/file-based-routing.md b/mintlify/router/api/file-based-routing.md
new file mode 100644
index 000000000..ad3e07fad
--- /dev/null
+++ b/mintlify/router/api/file-based-routing.md
@@ -0,0 +1,271 @@
+---
+title: File-Based Routing API Reference
+---
+
+TanStack Router's file-based routing is quite flexible and can be configured to suit your project's needs.
+
+## Configuration options
+
+The following options are available for configuring the file-based routing:
+
+- [`routesDirectory` (required)](#routesdirectory-required)
+- [`generatedRouteTree` (required)](#generatedroutetree-required)
+- [`virtualRouteConfig`](#virtualrouteconfig)
+- [`routeFilePrefix`](#routefileprefix)
+- [`routeFileIgnorePrefix`](#routefileignoreprefix)
+- [`routeFileIgnorePattern`](#routefileignorepattern)
+- [`indexToken`](#indextoken)
+- [`routeToken`](#routetoken)
+- [`quoteStyle`](#quotestyle)
+- [`semicolons`](#semicolons)
+- [`autoCodeSplitting`](#autocodesplitting)
+- [`disableTypes`](#disabletypes)
+- [`addExtensions`](#addextensions)
+- [`disableLogging`](#disablelogging)
+- [`routeTreeFileHeader`](#routetreefileheader)
+- [`routeTreeFileFooter`](#routetreefilefooter)
+- [`enableRouteTreeFormatting`](#enableroutetreeformatting)
+- [`tmpDir`](#tmpdir)
+
+> [!WARNING]
+> Do not set the `routeFilePrefix`, `routeFileIgnorePrefix`, or `routeFileIgnorePattern` options, to match any of the tokens used in the **File Naming Conventions** guide, or you may run into unexpected behavior.
+
+### `routesDirectory` (required)
+
+This is the path to the directory where the route files are located, relative to the cwd (current working directory).
+
+By default, the value is set to the following and cannot be set to an empty `string` or `undefined`.
+
+```txt
+./src/routes
+```
+
+### `generatedRouteTree` (required)
+
+This is the path to the file where the generated route tree will be saved, relative to the cwd (current working directory).
+
+By default, the value is set to the following and cannot be set to an empty `string` or `undefined`.
+
+```txt
+./src/routeTree.gen.ts
+```
+
+If the [`disableTypes`](#disabletypes) is set to `true`, the generated route tree will be saved with the `.js` extension instead of `.ts`.
+
+### `virtualRouteConfig`
+
+This option is used to configure the Virtual File Routes feature. See the "Virtual File Routes" guide for more information.
+
+By default, this value is set to `undefined`.
+
+### `routeFilePrefix`
+
+This option is used to identify route files in the route directory. This means that only files that start with this prefix will be considered for routing.
+
+By default, this value is set to `` and as such all files in the route directory will be considered for routing.
+
+### `routeFileIgnorePrefix`
+
+This option is used to ignore specific files and directories in the route directory. This can be useful if you want to "opt-in" certain files or directories that you do not want to be considered for routing.
+
+By default, this value is set to `-`.
+
+When using this option, it allows you have structures like this where it let's you co-located related files that are not route files:
+
+```txt
+src/routes
+├── posts
+│   ├── -components  // Ignored
+│   │   ├── Post.tsx
+│   ├── index.tsx
+│   ├── route.tsx
+```
+
+### `routeFileIgnorePattern`
+
+This option is used to ignore specific files and directories in the route directory. It can be used in regular expression format. For example, `.((css|const).ts)|test-page` will ignore files / directories with names containing `.css.ts`, `.const.ts` or `test-page`.
+
+By default, this value is set to `undefined`.
+
+### `routeToken`
+
+As mentioned in the Routing Concepts guide, a layout route is rendered at the specified path, and the child routes are rendered within the layout route. The `routeToken` is used to identify the layout route file in the route directory.
+
+By default, this value is set to `route`.
+
+> 🧠 the following filenames would equal the same runtime URL:
+
+```txt
+src/routes/posts.tsx -> /posts
+src/routes/posts.route.tsx -> /posts
+src/routes/posts/route.tsx -> /posts
+```
+
+#### Using regex patterns for `routeToken`
+
+You can use a regular expression pattern instead of a literal string to match multiple layout route naming conventions. This is useful when you want more flexibility in your file naming.
+
+**In `tsr.config.json`** (JSON config), use an object with `regex` and optional `flags` properties:
+
+```json
+{
+  "routeToken": { "regex": "[a-z]+-layout", "flags": "i" }
+}
+```
+
+**In code** (inline config), you can use a native `RegExp`:
+
+```ts
+{
+  routeToken: /[a-z]+-layout/i
+}
+```
+
+With the regex pattern `[a-z]+-layout`, filenames like `dashboard.main-layout.tsx`, `posts.protected-layout.tsx`, or `admin.settings-layout.tsx` would all be recognized as layout routes.
+
+> [!NOTE]
+> The regex is matched against the **entire** final segment of the route path. For example, with `routeToken: { "regex": "[a-z]+-layout" }`:
+>
+> - `dashboard.main-layout.tsx` matches (`main-layout` is the full segment)
+> - `dashboard.my-layout-extra.tsx` does NOT match (the segment is `my-layout-extra`, not just `my-layout`)
+
+### `indexToken`
+
+As mentioned in the Routing Concepts guide, an index route is a route that is matched when the URL path is exactly the same as the parent route. The `indexToken` is used to identify the index route file in the route directory.
+
+By default, this value is set to `index`.
+
+> 🧠 the following filenames would equal the same runtime URL:
+
+```txt
+src/routes/posts.index.tsx -> /posts/
+src/routes/posts/index.tsx -> /posts/
+```
+
+#### Using regex patterns for `indexToken`
+
+Similar to `routeToken`, you can use a regular expression pattern for `indexToken` to match multiple index route naming conventions.
+
+**In `tsr.config.json`** (JSON config):
+
+```json
+{
+  "indexToken": { "regex": "[a-z]+-page" }
+}
+```
+
+**In code** (inline config):
+
+```ts
+{
+  indexToken: /[a-z]+-page/
+}
+```
+
+With the regex pattern `[a-z]+-page`, filenames like `home-page.tsx`, `posts.list-page.tsx`, or `dashboard.overview-page.tsx` would all be recognized as index routes.
+
+#### Escaping regex tokens
+
+When using regex tokens, you can still escape a segment to prevent it from being treated as a token by wrapping it in square brackets. For example, if your `indexToken` is `{ "regex": "[a-z]+-page" }` and you want a literal route segment called `home-page`, name your file `[home-page].tsx`.
+
+### `quoteStyle`
+
+When your generated route tree is generated and when you first create a new route, those files will be formatted with the quote style you specify here.
+
+By default, this value is set to `single`.
+
+> [!TIP]
+> You should ignore the path of your generated route tree file from your linter and formatter to avoid conflicts.
+
+### `semicolons`
+
+When your generated route tree is generated and when you first create a new route, those files will be formatted with semicolons if this option is set to `true`.
+
+By default, this value is set to `false`.
+
+> [!TIP]
+> You should ignore the path of your generated route tree file from your linter and formatter to avoid conflicts.
+
+### `autoCodeSplitting`
+
+This feature is only available if you are using the TanStack Router Bundler Plugin.
+
+This option is used to enable automatic code-splitting for non-critical route configuration items. See the "Automatic Code-Splitting" guide for more information.
+
+By default, this value is set to `false`.
+
+> [!IMPORTANT]
+> The next major release of TanStack Router (i.e. v2), will have this value defaulted to `true`.
+
+### `disableTypes`
+
+This option is used to disable generating types for the route tree.
+
+If set to `true`, the generated route tree will not include any types and will be written as a `.js` file instead of a `.ts` file.
+
+By default, this value is set to `false`.
+
+### `addExtensions`
+
+- Type: `boolean | string`
+- Default: `false`
+
+This option controls file extensions on import paths in the generated route tree.
+
+- `false` — Extensions are stripped from import paths (e.g. `'./routes/posts'`)
+- `true` — The original file extensions are kept (e.g. `'./routes/posts.tsx'`)
+- `string` — The original extension is replaced with the provided one (e.g. `'js'` produces `'./routes/posts.js'`)
+
+Passing a string is useful when your project uses ESM, since Node.js ESM requires `.js` extensions for imports even when the source files are `.ts` or `.tsx`.
+
+```ts
+// Example: replace .tsx/.ts extensions with .js in generated imports
+TanStackRouterVite({
+  addExtensions: 'js',
+})
+```
+
+### `disableLogging`
+
+This option turns off the console logging for the route generation process.
+
+By default, this value is set to `false`.
+
+### `routeTreeFileHeader`
+
+This option let's you prepend content to the start of the generated route tree file.
+
+By default, this value is set to:
+
+```json
+[
+  "/* eslint-disable */",
+  "// @ts-nocheck",
+  "// noinspection JSUnusedGlobalSymbols"
+]
+```
+
+### `routeTreeFileFooter`
+
+This option let's you append content to the end of the generated route tree file.
+
+By default, this value is set to:
+
+```json
+[]
+```
+
+### `enableRouteTreeFormatting`
+
+This option turns on the formatting function on the generated route tree file, which can be time-consuming for large projects.
+
+By default, this value is set to `true`.
+
+### `tmpDir`
+
+Atomic file writes (route files and the generated route tree file) are implemented by creating a temporary file first and then renaming it to their actual location.
+
+This config option allows to configure the path of the temp directory that will be used for creating those temporary files.
+If it is a relative path, it will be resolved to the current working directory.
+If this value is not set, `process.env.TSR_TMP_DIR` will be used.
+If `process.env.TSR_TMP_DIR` is not set, it will default to `.tanstack/tmp` relative to the current working directory.
diff --git a/mintlify/router/api/router.md b/mintlify/router/api/router.md
new file mode 100644
index 000000000..336897fef
--- /dev/null
+++ b/mintlify/router/api/router.md
@@ -0,0 +1,89 @@
+---
+id: router
+title: Router API
+---
+
+- Functions
+  - [`createFileRoute`](/router/api/router/createFileRouteFunction)
+  - [`createLazyFileRoute`](/router/api/router/createLazyFileRouteFunction)
+  - [`createRootRoute`](/router/api/router/createRootRouteFunction)
+  - [`createRootRouteWithContext`](/router/api/router/createRootRouteWithContextFunction)
+  - [`createRoute`](/router/api/router/createRouteFunction)
+  - [`createLazyRoute`](/router/api/router/createLazyRouteFunction)
+  - [`createRouteMask`](/router/api/router/createRouteMaskFunction)
+  - [`createRouter`](/router/api/router/createRouterFunction)
+  - [`defer`](/router/api/router/deferFunction)
+  - [`getRouteApi`](/router/api/router/getRouteApiFunction)
+  - [`isNotFound`](/router/api/router/isNotFoundFunction)
+  - [`isRedirect`](/router/api/router/isRedirectFunction)
+  - [`lazyRouteComponent`](/router/api/router/lazyRouteComponentFunction)
+  - [`linkOptions`](/router/api/router/linkOptions)
+  - [`notFound`](/router/api/router/notFoundFunction)
+  - [`redirect`](/router/api/router/redirectFunction)
+  - [`retainSearchParams`](/router/api/router/retainSearchParamsFunction)
+  - [`stripSearchParams`](/router/api/router/stripSearchParamsFunction)
+- Components
+  - [`<Await>`](/router/api/router/awaitComponent)
+  - [`<CatchBoundary>`](/router/api/router/catchBoundaryComponent)
+  - [`<CatchNotFound>`](/router/api/router/catchNotFoundComponent)
+  - [`<ClientOnly>`](/router/api/router/clientOnlyComponent)
+  - [`<DefaultGlobalNotFound>`](/router/api/router/defaultGlobalNotFoundComponent)
+  - [`<ErrorComponent>`](/router/api/router/errorComponentComponent)
+  - [`<Link>`](/router/api/router/linkComponent)
+  - [`<MatchRoute>`](/router/api/router/matchRouteComponent)
+  - [`<Navigate>`](/router/api/router/navigateComponent)
+  - [`<NotFoundComponent>`](/router/api/router/notFoundComponentComponent)
+  - [`<Outlet>`](/router/api/router/outletComponent)
+- Hooks
+  - [`useAwaited`](/router/api/router/useAwaitedHook)
+  - [`useBlocker`](/router/api/router/useBlockerHook)
+  - [`useCanGoBack`](/router/api/router/useCanGoBack)
+  - [`useChildMatches`](/router/api/router/useChildMatchesHook)
+  - [`useLinkProps`](/router/api/router/useLinkPropsHook)
+  - [`useLoaderData`](/router/api/router/useLoaderDataHook)
+  - [`useLoaderDeps`](/router/api/router/useLoaderDepsHook)
+  - [`useLocation`](/router/api/router/useLocationHook)
+  - [`useMatch`](/router/api/router/useMatchHook)
+  - [`useMatchRoute`](/router/api/router/useMatchRouteHook)
+  - [`useMatches`](/router/api/router/useMatchesHook)
+  - [`useNavigate`](/router/api/router/useNavigateHook)
+  - [`useParentMatches`](/router/api/router/useParentMatchesHook)
+  - [`useParams`](/router/api/router/useParamsHook)
+  - [`useRouteContext`](/router/api/router/useRouteContextHook)
+  - [`useRouter`](/router/api/router/useRouterHook)
+  - [`useRouterState`](/router/api/router/useRouterStateHook)
+  - [`useSearch`](/router/api/router/useSearchHook)
+- Types
+  - [`ActiveLinkOptions Type`](/router/api/router/ActiveLinkOptionsType)
+  - [`AsyncRouteComponent Type`](/router/api/router/AsyncRouteComponentType)
+  - [`HistoryState Interface`](/router/api/router/historyStateInterface)
+  - [`LinkOptions Type`](/router/api/router/LinkOptionsType)
+  - [`LinkProps Type`](/router/api/router/LinkPropsType)
+  - [`MatchRouteOptions Type`](/router/api/router/MatchRouteOptionsType)
+  - [`NavigateOptions Type`](/router/api/router/NavigateOptionsType)
+  - [`NotFoundError Type`](/router/api/router/NotFoundErrorType)
+  - [`ParsedHistoryState Type`](/router/api/router/ParsedHistoryStateType)
+  - [`ParsedLocation Type`](/router/api/router/ParsedLocationType)
+  - [`Redirect Type`](/router/api/router/RedirectType)
+  - [`Register Type`](/router/api/router/RegisterType)
+  - [`Route Type`](/router/api/router/RouteType)
+  - [`RouteApi Type`](/router/api/router/RouteApiType)
+  - [`RouteMask Type`](/router/api/router/RouteMaskType)
+  - [`RouteMatch Type`](/router/api/router/RouteMatchType)
+  - [`RouteOptions Type`](/router/api/router/RouteOptionsType)
+  - [`Router Type`](/router/api/router/RouterType)
+  - [`RouterEvents Type`](/router/api/router/RouterEventsType)
+  - [`RouterOptions Type`](/router/api/router/RouterOptionsType)
+  - [`RouterState Type`](/router/api/router/RouterStateType)
+  - [`ToMaskOptions Type`](/router/api/router/ToMaskOptionsType)
+  - [`ToOptions Type`](/router/api/router/ToOptionsType)
+  - [`UseMatchRouteOptions Type`](/router/api/router/UseMatchRouteOptionsType)
+  - [`ViewTransitionOptions Type`](/router/api/router/ViewTransitionOptionsType)
+- ⚠️ Deprecated
+  - [`FileRoute Class`](/router/api/router/FileRouteClass)
+  - [`Route Class`](/router/api/router/RouteClass)
+  - [`Router Class`](/router/api/router/RouterClass)
+  - [`RouteApi Class`](/router/api/router/RouteApiClass)
+  - [`RootRoute Class`](/router/api/router/RootRouteClass)
+  - [`NotFoundRoute Class`](/router/api/router/NotFoundRouteClass)
+  - [`rootRouteWithContext Function`](/router/api/router/rootRouteWithContextFunction)
diff --git a/mintlify/router/api/router/ActiveLinkOptionsType.md b/mintlify/router/api/router/ActiveLinkOptionsType.md
new file mode 100644
index 000000000..b27cba408
--- /dev/null
+++ b/mintlify/router/api/router/ActiveLinkOptionsType.md
@@ -0,0 +1,33 @@
+---
+id: ActiveLinkOptionsType
+title: ActiveLinkOptions type
+---
+
+The `ActiveLinkOptions` type extends the [`LinkOptions`](/router/api/router/LinkOptionsType) type and contains additional options that can be used to describe how a link should be styled when it is active.
+
+```tsx
+type ActiveLinkOptions = LinkOptions & {
+  activeProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  inactiveProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+}
+```
+
+## ActiveLinkOptions properties
+
+The `ActiveLinkOptions` object accepts/contains the following properties:
+
+### `activeProps`
+
+- `React.AnchorHTMLAttributes<HTMLAnchorElement>`
+- Optional
+- The props that will be applied to the anchor element when the link is active
+
+### `inactiveProps`
+
+- Type: `React.AnchorHTMLAttributes<HTMLAnchorElement>`
+- Optional
+- The props that will be applied to the anchor element when the link is inactive
diff --git a/mintlify/router/api/router/AsyncRouteComponentType.md b/mintlify/router/api/router/AsyncRouteComponentType.md
new file mode 100644
index 000000000..23e163046
--- /dev/null
+++ b/mintlify/router/api/router/AsyncRouteComponentType.md
@@ -0,0 +1,12 @@
+---
+id: AsyncRouteComponentType
+title: AsyncRouteComponent type
+---
+
+The `AsyncRouteComponent` type is used to describe a code-split route component that can be preloaded using a `component.preload()` method.
+
+```tsx
+type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+  preload?: () => Promise<void>
+}
+```
diff --git a/mintlify/router/api/router/FileRouteClass.md b/mintlify/router/api/router/FileRouteClass.md
new file mode 100644
index 000000000..057577e7a
--- /dev/null
+++ b/mintlify/router/api/router/FileRouteClass.md
@@ -0,0 +1,63 @@
+---
+id: FileRouteClass
+title: FileRoute class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`createFileRoute`](/router/api/router/createFileRouteFunction) function instead.
+
+The `FileRoute` class is a factory that can be used to create a file-based route instance. This route instance can then be used to automatically generate a route tree with the `tsr generate` and `tsr watch` commands.
+
+## `FileRoute` constructor
+
+The `FileRoute` constructor accepts a single argument: the `path` of the file that the route will be generated for.
+
+### Constructor options
+
+- Type: `string` literal
+- Required, but **automatically inserted and updated by the `tsr generate` and `tsr watch` commands**.
+- The full path of the file that the route will be generated from.
+
+### Constructor returns
+
+- An instance of the `FileRoute` class that can be used to create a route.
+
+## `FileRoute` methods
+
+The `FileRoute` class implements the following method(s):
+
+### `.createRoute` method
+
+The `createRoute` method is a method that can be used to configure the file route instance. It accepts a single argument: the `options` that will be used to configure the file route instance.
+
+#### .createRoute options
+
+- Type: `Omit<RouteOptions, 'getParentRoute' | 'path' | 'id'>`
+- [`RouteOptions`](/router/api/router/RouteOptionsType)
+- Optional
+- The same options that are available to the `Route` class, but with the `getParentRoute`, `path`, and `id` options omitted since they are unnecessary for file-based routing.
+
+#### .createRoute returns
+
+A [`Route`](/router/api/router/RouteType) instance that can be used to configure the route to be inserted into the route-tree.
+
+> ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier.
+
+### Examples
+
+```tsx
+import { FileRoute } from '@tanstack/react-router'
+
+export const Route = new FileRoute('/').createRoute({
+  loader: () => {
+    return 'Hello World'
+  },
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = Route.useLoaderData()
+  return <div>{data}</div>
+}
+```
diff --git a/mintlify/router/api/router/LinkOptionsType.md b/mintlify/router/api/router/LinkOptionsType.md
new file mode 100644
index 000000000..89568e3cf
--- /dev/null
+++ b/mintlify/router/api/router/LinkOptionsType.md
@@ -0,0 +1,51 @@
+---
+id: LinkOptionsType
+title: LinkOptions type
+---
+
+The `LinkOptions` type extends the [`NavigateOptions`](/router/api/router/NavigateOptionsType) type and contains additional options that can be used by TanStack Router when handling actual anchor element attributes.
+
+```tsx
+type LinkOptions = NavigateOptions & {
+  target?: HTMLAnchorElement['target']
+  activeOptions?: ActiveOptions
+  preload?: false | 'intent'
+  preloadDelay?: number
+  disabled?: boolean
+}
+```
+
+## LinkOptions properties
+
+The `LinkOptions` object accepts/contains the following properties:
+
+### `target`
+
+- Type: `HTMLAnchorElement['target']`
+- Optional
+- The standard anchor tag target attribute
+
+### `activeOptions`
+
+- Type: `ActiveOptions`
+- Optional
+- The options that will be used to determine if the link is active
+
+### `preload`
+
+- Type: `false | 'intent' | 'viewport' | 'render'`
+- Optional
+- If set, the link's preloading strategy will be set to this value.
+- See the [Preloading guide](/router/guide/preloading) for more information.
+
+### `preloadDelay`
+
+- Type: `number`
+- Optional
+- Delay intent preloading by this many milliseconds. If the intent exits before this delay, the preload will be cancelled.
+
+### `disabled`
+
+- Type: `boolean`
+- Optional
+- If true, will render the link without the href attribute
diff --git a/mintlify/router/api/router/LinkPropsType.md b/mintlify/router/api/router/LinkPropsType.md
new file mode 100644
index 000000000..a69895bbd
--- /dev/null
+++ b/mintlify/router/api/router/LinkPropsType.md
@@ -0,0 +1,26 @@
+---
+id: LinkPropsType
+title: LinkProps type
+---
+
+The `LinkProps` type extends the [`ActiveLinkOptions`](/router/api/router/ActiveLinkOptionsType) and `React.AnchorHTMLAttributes<HTMLAnchorElement>` types and contains additional props specific to the `Link` component.
+
+```tsx
+type LinkProps = ActiveLinkOptions &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    children?:
+      | React.ReactNode
+      | ((state: { isActive: boolean }) => React.ReactNode)
+  }
+```
+
+## LinkProps properties
+
+- All of the props from [`ActiveLinkOptions`](/router/api/router/ActiveLinkOptionsType)
+- All of the props from `React.AnchorHTMLAttributes<HTMLAnchorElement>`
+
+#### `children`
+
+- Type: `React.ReactNode | ((state: { isActive: boolean }) => React.ReactNode)`
+- Optional
+- The children that will be rendered inside of the anchor element. If a function is provided, it will be called with an object that contains the `isActive` boolean value that can be used to determine if the link is active.
diff --git a/mintlify/router/api/router/MatchRouteOptionsType.md b/mintlify/router/api/router/MatchRouteOptionsType.md
new file mode 100644
index 000000000..3ec757d42
--- /dev/null
+++ b/mintlify/router/api/router/MatchRouteOptionsType.md
@@ -0,0 +1,44 @@
+---
+id: MatchRouteOptionsType
+title: MatchRouteOptions type
+---
+
+The `MatchRouteOptions` type is used to describe the options that can be used when matching a route.
+
+```tsx
+interface MatchRouteOptions {
+  pending?: boolean
+  caseSensitive?: boolean /* @deprecated */
+  includeSearch?: boolean
+  fuzzy?: boolean
+}
+```
+
+## MatchRouteOptions properties
+
+The `MatchRouteOptions` type has the following properties:
+
+### `pending` property
+
+- Type: `boolean`
+- Optional
+- If `true`, will match against pending location instead of the current location
+
+### ~~`caseSensitive`~~ property (deprecated)
+
+- Type: `boolean`
+- Optional
+- If `true`, will match against the current location with case sensitivity
+- Declare case sensitivity in the route definition instead, or globally for all routes using the `caseSensitive` option on the router
+
+### `includeSearch` property
+
+- Type: `boolean`
+- Optional
+- If `true`, will match against the current location's search params using a deep inclusive check. e.g. `{ a: 1 }` will match for a current location of `{ a: 1, b: 2 }`
+
+### `fuzzy` property
+
+- Type: `boolean`
+- Optional
+- If `true`, will match against the current location using a fuzzy match. e.g. `/posts` will match for a current location of `/posts/123`
diff --git a/mintlify/router/api/router/NavigateOptionsType.md b/mintlify/router/api/router/NavigateOptionsType.md
new file mode 100644
index 000000000..9ebd58206
--- /dev/null
+++ b/mintlify/router/api/router/NavigateOptionsType.md
@@ -0,0 +1,78 @@
+---
+id: NavigateOptionsType
+title: NavigateOptions type
+---
+
+The `NavigateOptions` type is used to describe the options that can be used when describing a navigation action in TanStack Router.
+
+```tsx
+type NavigateOptions = ToOptions & {
+  replace?: boolean
+  resetScroll?: boolean
+  hashScrollIntoView?: boolean | ScrollIntoViewOptions
+  viewTransition?: boolean | ViewTransitionOptions
+  ignoreBlocker?: boolean
+  reloadDocument?: boolean
+  href?: string
+}
+```
+
+## NavigateOptions properties
+
+The `NavigateOptions` object accepts the following properties:
+
+### `replace`
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`.
+- If `true`, the location will be committed to the browser history using `history.replace` instead of `history.push`.
+
+### `resetScroll`
+
+- Type: `boolean`
+- Optional
+- Defaults to `true` so that the scroll position will be reset to 0,0 after the location is committed to the browser history.
+- If `false`, the scroll position will not be reset to 0,0 after the location is committed to history.
+
+### `hashScrollIntoView`
+
+- Type: `boolean | ScrollIntoViewOptions`
+- Optional
+- Defaults to `true` so the element with an id matching the hash will be scrolled into view after the location is committed to history.
+- If `false`, the element with an id matching the hash will not be scrolled into view after the location is committed to history.
+- If an object is provided, it will be passed to the `scrollIntoView` method as options.
+- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for more information on `ScrollIntoViewOptions`.
+
+### `viewTransition`
+
+- Type: `boolean | ViewTransitionOptions`
+- Optional
+- Defaults to `false`.
+- If `true`, navigation will be called using `document.startViewTransition()`.
+- If [`ViewTransitionOptions`](/router/api/router/ViewTransitionOptionsType), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
+- If the browser does not support this api, this option will be ignored.
+- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
+- See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types
+
+### `ignoreBlocker`
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`.
+- If `true`, navigation will ignore any blockers that might prevent it.
+
+### `reloadDocument`
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`.
+- If `true`, navigation to a route inside of router will trigger a full page load instead of the traditional SPA navigation.
+
+### `href`
+
+- Type: `string`
+- Optional
+- This can be used instead of `to` to navigate to a fully built href, e.g. pointing to an external target.
+
+- [`ToOptions`](/router/api/router/ToOptionsType)
diff --git a/mintlify/router/api/router/NotFoundErrorType.md b/mintlify/router/api/router/NotFoundErrorType.md
new file mode 100644
index 000000000..1f4fbe4c7
--- /dev/null
+++ b/mintlify/router/api/router/NotFoundErrorType.md
@@ -0,0 +1,50 @@
+---
+id: NotFoundErrorType
+title: NotFoundError
+---
+
+The `NotFoundError` type is used to represent a not-found error in TanStack Router.
+
+```tsx
+export type NotFoundError = {
+  global?: boolean
+  data?: any
+  throw?: boolean
+  routeId?: string
+  headers?: HeadersInit
+}
+```
+
+## NotFoundError properties
+
+The `NotFoundError` object accepts/contains the following properties:
+
+### `global` property (⚠️ deprecated, use `routeId: rootRouteId` instead)
+
+- Type: `boolean`
+- Optional - `default: false`
+- If true, the not-found error will be handled by the `notFoundComponent` of the root route instead of bubbling up from the route that threw it. This has the same behavior as importing the root route and calling `RootRoute.notFound()`.
+
+### `data` property
+
+- Type: `any`
+- Optional
+- Custom data that is passed into `notFoundComponent` when the not-found error is handled
+
+### `throw` property
+
+- Type: `boolean`
+- Optional - `default: false`
+- If provided, will throw the not-found object instead of returning it. This can be useful in places where `throwing` in a function might cause it to have a return type of `never`. In that case, you can use `notFound({ throw: true })` to throw the not-found object instead of returning it.
+
+### `routeId` property
+
+- Type: `string`
+- Optional
+- The ID of the route that will attempt to handle the not-found error. If the route does not have a `notFoundComponent`, the error will bubble up to the parent route (and be handled by the root route if necessary). By default, TanStack Router will attempt to handle the not-found error with the route that threw it.
+
+### `headers` property
+
+- Type: `HeadersInit`
+- Optional
+- HTTP headers to be included when the not-found error is handled on the server side.
diff --git a/mintlify/router/api/router/NotFoundRouteClass.md b/mintlify/router/api/router/NotFoundRouteClass.md
new file mode 100644
index 000000000..55fc48d8e
--- /dev/null
+++ b/mintlify/router/api/router/NotFoundRouteClass.md
@@ -0,0 +1,53 @@
+---
+id: NotFoundRouteClass
+title: NotFoundRoute class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the `notFoundComponent` route option that is present during route configuration.
+> See the [Not Found Errors guide](/router/guide/not-found-errors) for more information.
+
+The `NotFoundRoute` class extends the `Route` class and can be used to create a not found route instance. A not found route instance can be passed to the `routerOptions.notFoundRoute` option to configure a default not-found/404 route for every branch of the route tree.
+
+## Constructor options
+
+The `NotFoundRoute` constructor accepts an object as its only argument.
+
+- Type:
+
+```tsx
+Omit<
+  RouteOptions,
+  | 'path'
+  | 'id'
+  | 'getParentRoute'
+  | 'caseSensitive'
+  | 'parseParams'
+  | 'stringifyParams'
+>
+```
+
+- [RouteOptions](/router/api/router/RouteOptionsType)
+- Required
+- The options that will be used to configure the not found route instance.
+
+## Examples
+
+```tsx
+import { NotFoundRoute, createRouter } from '@tanstack/react-router'
+import { Route as rootRoute } from './routes/__root'
+import { routeTree } from './routeTree.gen'
+
+const notFoundRoute = new NotFoundRoute({
+  getParentRoute: () => rootRoute,
+  component: () => <div>Not found!!!</div>,
+})
+
+const router = createRouter({
+  routeTree,
+  notFoundRoute,
+})
+
+// ... other code
+```
diff --git a/mintlify/router/api/router/ParsedHistoryStateType.md b/mintlify/router/api/router/ParsedHistoryStateType.md
new file mode 100644
index 000000000..bbc398e7a
--- /dev/null
+++ b/mintlify/router/api/router/ParsedHistoryStateType.md
@@ -0,0 +1,14 @@
+---
+id: ParsedHistoryStateType
+title: ParsedHistoryState type
+---
+
+The `ParsedHistoryState` type represents a parsed state object. Additionally to `HistoryState`, it contains the index and the unique key of the route.
+
+```tsx
+export type ParsedHistoryState = HistoryState & {
+  key?: string // TODO: Remove in v2 - use __TSR_key instead
+  __TSR_key?: string
+  __TSR_index: number
+}
+```
diff --git a/mintlify/router/api/router/ParsedLocationType.md b/mintlify/router/api/router/ParsedLocationType.md
new file mode 100644
index 000000000..321aa97a7
--- /dev/null
+++ b/mintlify/router/api/router/ParsedLocationType.md
@@ -0,0 +1,19 @@
+---
+id: ParsedLocationType
+title: ParsedLocation type
+---
+
+The `ParsedLocation` type represents a parsed location in TanStack Router. It contains a lot of useful information about the current location, including the pathname, search params, hash, location state, and route masking information.
+
+```tsx
+interface ParsedLocation {
+  href: string
+  pathname: string
+  search: TFullSearchSchema
+  searchStr: string
+  state: ParsedHistoryState
+  hash: string
+  maskedLocation?: ParsedLocation
+  unmaskOnReload?: boolean
+}
+```
diff --git a/mintlify/router/api/router/RedirectType.md b/mintlify/router/api/router/RedirectType.md
new file mode 100644
index 000000000..a0bc47458
--- /dev/null
+++ b/mintlify/router/api/router/RedirectType.md
@@ -0,0 +1,47 @@
+---
+id: RedirectType
+title: Redirect type
+---
+
+The `Redirect` type is used to represent a redirect action in TanStack Router.
+
+```tsx
+export type Redirect = {
+  statusCode?: number
+  throw?: any
+  headers?: HeadersInit
+} & NavigateOptions
+```
+
+- [`NavigateOptions`](/router/api/router/NavigateOptionsType)
+
+## Redirect properties
+
+The `Redirect` object accepts/contains the following properties:
+
+### `statusCode` property
+
+- Type: `number`
+- Optional
+- The HTTP status code to use when redirecting
+
+### `throw` property
+
+- Type: `any`
+- Optional
+- If provided, will throw the redirect object instead of returning it. This can be useful in places where `throwing` in a function might cause it to have a return type of `never`. In that case, you can use `redirect({ throw: true })` to throw the redirect object instead of returning it.
+
+### `headers` property
+
+- Type: `HeadersInit`
+- Optional
+- The HTTP headers to use when redirecting.
+
+### Navigation Properties
+
+Since `Redirect` extends `NavigateOptions`, it also supports navigation properties:
+
+- **`to`**: Use for internal application routes (e.g., `/dashboard`, `../profile`)
+- **`href`**: Use for external URLs (e.g., `https://example.com`, `https://authprovider.com`)
+
+> **Important**: For external URLs, always use the `href` property instead of `to`. The `to` property is designed for internal navigation within your application.
diff --git a/mintlify/router/api/router/RegisterType.md b/mintlify/router/api/router/RegisterType.md
new file mode 100644
index 000000000..cf7ce2441
--- /dev/null
+++ b/mintlify/router/api/router/RegisterType.md
@@ -0,0 +1,28 @@
+---
+id: RegisterType
+title: Register type
+---
+
+This type is used to register a route tree with a router instance. Doing so unlocks the full type safety of TanStack Router, including top-level exports from the `@tanstack/react-router` package.
+
+```tsx
+export type Register = {
+  // router: [Your router type here]
+}
+```
+
+To register a route tree with a router instance, use declaration merging to add the type of your router instance to the Register interface under the `router` property:
+
+## Examples
+
+```tsx
+const router = createRouter({
+  // ...
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
diff --git a/mintlify/router/api/router/RootRouteClass.md b/mintlify/router/api/router/RootRouteClass.md
new file mode 100644
index 000000000..b5b9983db
--- /dev/null
+++ b/mintlify/router/api/router/RootRouteClass.md
@@ -0,0 +1,58 @@
+---
+id: RootRouteClass
+title: RootRoute class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`createRootRoute`](/router/api/router/createRootRouteFunction) function instead.
+
+The `RootRoute` class extends the `Route` class and can be used to create a root route instance. A root route instance can then be used to create a route tree.
+
+## `RootRoute` constructor
+
+The `RootRoute` constructor accepts an object as its only argument.
+
+### Constructor options
+
+The options that will be used to configure the root route instance.
+
+- Type:
+
+```tsx
+Omit<
+  RouteOptions,
+  | 'path'
+  | 'id'
+  | 'getParentRoute'
+  | 'caseSensitive'
+  | 'parseParams'
+  | 'stringifyParams'
+>
+```
+
+- [`RouteOptions`](/router/api/router/RouteOptionsType)
+- Optional
+
+## Constructor returns
+
+A new [`Route`](/router/api/router/RouteType) instance.
+
+## Examples
+
+```tsx
+import { RootRoute, createRouter, Outlet } from '@tanstack/react-router'
+
+const rootRoute = new RootRoute({
+  component: () => <Outlet />,
+  // ... root route options
+})
+
+const routeTree = rootRoute.addChildren([
+  // ... other routes
+])
+
+const router = createRouter({
+  routeTree,
+})
+```
diff --git a/mintlify/router/api/router/RouteApiClass.md b/mintlify/router/api/router/RouteApiClass.md
new file mode 100644
index 000000000..f733c1876
--- /dev/null
+++ b/mintlify/router/api/router/RouteApiClass.md
@@ -0,0 +1,37 @@
+---
+id: RouteApiClass
+title: RouteApi class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`getRouteApi`](/router/api/router/getRouteApiFunction) function instead.
+
+The `RouteApi` class provides type-safe version of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types.
+
+## Constructor options
+
+The `RouteApi` constructor accepts a single argument: the `options` that will be used to configure the `RouteApi` instance.
+
+### `opts.routeId` option
+
+- Type: `string`
+- Required
+- The route ID to which the `RouteApi` instance will be bound
+
+## Constructor returns
+
+- An instance of the [`RouteApi`](/router/api/router/RouteApiType) that is pre-bound to the route ID that it was called with.
+
+## Examples
+
+```tsx
+import { RouteApi } from '@tanstack/react-router'
+
+const routeApi = new RouteApi({ id: '/posts' })
+
+export function PostsPage() {
+  const posts = routeApi.useLoaderData()
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/RouteApiType.md b/mintlify/router/api/router/RouteApiType.md
new file mode 100644
index 000000000..c58c52a44
--- /dev/null
+++ b/mintlify/router/api/router/RouteApiType.md
@@ -0,0 +1,183 @@
+---
+id: RouteApiType
+title: RouteApi Type
+---
+
+The `RouteApi` describes an instance that provides type-safe versions of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types.
+
+## `RouteApi` properties and methods
+
+The `RouteApi` has the following properties and methods:
+
+### `useMatch` method
+
+```tsx
+  useMatch<TSelected = TAllContext>(opts?: {
+    select?: (match: TAllContext) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useMatch`](/router/api/router/useMatchHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: RouteMatch) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useMatch`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+  - `opts.structuralSharing`
+    - Optional
+    - `boolean`
+    - Configures whether structural sharing is enabled for the value returned by `select`.
+    - See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `RouteMatch` object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`.
+
+### `useRouteContext` method
+
+```tsx
+  useRouteContext<TSelected = TAllContext>(opts?: {
+    select?: (search: TAllContext) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useRouteContext`](/router/api/router/useRouteContextHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: RouteContext) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useRouteContext`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `RouteContext` object or a loosened version of the `RouteContext` object if `opts.strict` is `false`.
+
+### `useSearch` method
+
+```tsx
+  useSearch<TSelected = TFullSearchSchema>(opts?: {
+    select?: (search: TFullSearchSchema) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useSearch`](/router/api/router/useSearchHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: TFullSearchSchema) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useSearch`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+  - `opts.structuralSharing`
+    - Optional
+    - `boolean`
+    - Configures whether structural sharing is enabled for the value returned by `select`.
+    - See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `TFullSearchSchema` object or a loosened version of the `TFullSearchSchema` object if `opts.strict` is `false`.
+
+### `useParams` method
+
+```tsx
+  useParams<TSelected = TAllParams>(opts?: {
+    select?: (params: TAllParams) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useParams`](/router/api/router/useParamsHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: TAllParams) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useParams`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+  - `opts.structuralSharing`
+    - Optional
+    - `boolean`
+    - Configures whether structural sharing is enabled for the value returned by `select`.
+    - See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `TAllParams` object or a loosened version of the `TAllParams` object if `opts.strict` is `false`.
+
+### `useLoaderData` method
+
+```tsx
+  useLoaderData<TSelected = TLoaderData>(opts?: {
+    select?: (search: TLoaderData) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useLoaderData`](/router/api/router/useLoaderDataHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: TLoaderData) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useLoaderData`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+  - `opts.structuralSharing`
+    - Optional
+    - `boolean`
+    - Configures whether structural sharing is enabled for the value returned by `select`.
+    - See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `TLoaderData` object or a loosened version of the `TLoaderData` object if `opts.strict` is `false`.
+
+### `useLoaderDeps` method
+
+```tsx
+  useLoaderDeps<TSelected = TLoaderDeps>(opts?: {
+    select?: (search: TLoaderDeps) => TSelected
+  }): TSelected
+```
+
+- A type-safe version of the [`useLoaderDeps`](/router/api/router/useLoaderDepsHook) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- Options
+  - `opts.select`
+    - Optional
+    - `(match: TLoaderDeps) => TSelected`
+    - If supplied, this function will be called with the route match and the return value will be returned from `useLoaderDeps`.
+  - `opts.structuralSharing`
+    - Optional
+    - `boolean`
+    - Configures whether structural sharing is enabled for the value returned by `select`.
+    - See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+- Returns
+  - If a `select` function is provided, the return value of the `select` function.
+  - If no `select` function is provided, the `TLoaderDeps` object.
+
+### `useNavigate` method
+
+```tsx
+  useNavigate(): // navigate function
+```
+
+- A type-safe version of [`useNavigate`](/router/api/router/useNavigateHook) that is pre-bound to the route ID that the `RouteApi` instance was created with.
+
+### `redirect` method
+
+```tsx
+  redirect(opts?: RedirectOptions): Redirect
+```
+
+- A type-safe version of the [`redirect`](/router/api/router/redirectFunction) function that is pre-bound to the route ID that the `RouteApi` instance was created with.
+- The `from` parameter is automatically set to the route ID, enabling type-safe relative redirects.
+- Options
+  - All options from [`redirect`](/router/api/router/redirectFunction) except `from`, which is automatically provided.
+- Returns
+  - A `Redirect` object that can be thrown from `beforeLoad` or `loader` callbacks.
+
+#### Example
+
+```tsx
+import { getRouteApi } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/dashboard/settings')
+
+export const Route = createFileRoute('/dashboard/settings')({
+  beforeLoad: ({ context }) => {
+    if (!context.user) {
+      // Type-safe redirect - 'from' is automatically '/dashboard/settings'
+      throw routeApi.redirect({
+        to: '../login', // Relative path to sibling route
+      })
+    }
+  },
+})
+```
diff --git a/mintlify/router/api/router/RouteClass.md b/mintlify/router/api/router/RouteClass.md
new file mode 100644
index 000000000..a66b8eb74
--- /dev/null
+++ b/mintlify/router/api/router/RouteClass.md
@@ -0,0 +1,45 @@
+---
+id: RouteClass
+title: Route class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`createRoute`](/router/api/router/createRouteFunction) function instead.
+
+The `Route` class implements the `RouteApi` class and can be used to create route instances. A route instance can then be used to create a route tree.
+
+## `Route` constructor
+
+The `Route` constructor accepts an object as its only argument.
+
+### Constructor options
+
+- Type: [`RouteOptions`](/router/api/router/RouteOptionsType)
+- Required
+- The options that will be used to configure the route instance
+
+### Constructor returns
+
+A new [`Route`](/router/api/router/RouteType) instance.
+
+## Examples
+
+```tsx
+import { Route } from '@tanstack/react-router'
+import { rootRoute } from './__root'
+
+const indexRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  loader: () => {
+    return 'Hello World'
+  },
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = indexRoute.useLoaderData()
+  return <div>{data}</div>
+}
+```
diff --git a/mintlify/router/api/router/RouteMaskType.md b/mintlify/router/api/router/RouteMaskType.md
new file mode 100644
index 000000000..768151eb1
--- /dev/null
+++ b/mintlify/router/api/router/RouteMaskType.md
@@ -0,0 +1,28 @@
+---
+id: RouteMaskType
+title: RouteMask type
+---
+
+The `RouteMask` type extends the [`ToOptions`](/router/api/router/ToOptionsType) type and has other the necessary properties to create a route mask.
+
+## RouteMask properties
+
+The `RouteMask` type accepts an object with the following properties:
+
+### `...ToOptions`
+
+- Type: [`ToOptions`](/router/api/router/ToOptionsType)
+- Required
+- The options that will be used to configure the route mask
+
+### `options.routeTree`
+
+- Type: `TRouteTree`
+- Required
+- The route tree that this route mask will support
+
+### `options.unmaskOnReload`
+
+- Type: `boolean`
+- Optional
+- If `true`, the route mask will be removed when the page is reloaded
diff --git a/mintlify/router/api/router/RouteMatchType.md b/mintlify/router/api/router/RouteMatchType.md
new file mode 100644
index 000000000..251c2c031
--- /dev/null
+++ b/mintlify/router/api/router/RouteMatchType.md
@@ -0,0 +1,29 @@
+---
+id: RouteMatchType
+title: RouteMatch type
+---
+
+The `RouteMatch` type represents a route match in TanStack Router.
+
+```tsx
+interface RouteMatch {
+  id: string
+  routeId: string
+  pathname: string
+  params: Route['allParams']
+  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
+  isFetching: false | 'beforeLoad' | 'loader'
+  showPending: boolean
+  error: unknown
+  paramsError: unknown
+  searchError: unknown
+  updatedAt: number
+  loaderData?: Route['loaderData']
+  context: Route['allContext']
+  search: Route['fullSearchSchema']
+  fetchedAt: number
+  abortController: AbortController
+  cause: 'enter' | 'stay'
+  ssr?: boolean | 'data-only'
+}
+```
diff --git a/mintlify/router/api/router/RouteOptionsType.md b/mintlify/router/api/router/RouteOptionsType.md
new file mode 100644
index 000000000..2cdd24b7c
--- /dev/null
+++ b/mintlify/router/api/router/RouteOptionsType.md
@@ -0,0 +1,387 @@
+---
+id: RouteOptionsType
+title: RouteOptions type
+---
+
+The `RouteOptions` type is used to describe the options that can be used when creating a route.
+
+## RouteOptions properties
+
+The `RouteOptions` type accepts an object with the following properties:
+
+### `getParentRoute` method
+
+- Type: `() => TParentRoute`
+- Required
+- A function that returns the parent route of the route being created. This is required to provide full type safety to child route configurations and to ensure that the route tree is built correctly.
+
+### `path` property
+
+- Type: `string`
+- Required, unless an `id` is provided to configure the route as a pathless layout route
+- The path segment that will be used to match the route.
+
+### `id` property
+
+- Type: `string`
+- Optional, but required if a `path` is not provided
+- The unique identifier for the route if it is to be configured as a pathless layout route. If provided, the route will not match against the location pathname and its routes will be flattened into its parent route for matching.
+
+### `component` property
+
+- Type: `RouteComponent` or `LazyRouteComponent`
+- Optional - Defaults to `<Outlet />`
+- The content to be rendered when the route is matched.
+
+### `errorComponent` property
+
+- Type: `RouteComponent` or `LazyRouteComponent`
+- Optional - Defaults to `routerOptions.defaultErrorComponent`
+- The content to be rendered when the route encounters an error.
+
+### `pendingComponent` property
+
+- Type: `RouteComponent` or `LazyRouteComponent`
+- Optional - Defaults to `routerOptions.defaultPendingComponent`
+- The content to be rendered if and when the route is pending and has reached its pendingMs threshold.
+
+### `notFoundComponent` property
+
+- Type: `NotFoundRouteComponent` or `LazyRouteComponent`
+- Optional - Defaults to `routerOptions.defaultNotFoundComponent`
+- The content to be rendered when the route is not found.
+
+### `validateSearch` method
+
+- Type: `(rawSearchParams: unknown) => TSearchSchema`
+- Optional
+- A function that will be called when this route is matched and passed the raw search params from the current location and return valid parsed search params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function does not throw, its return value will be used as the route's search params and the return type will be inferred into the rest of the router.
+- Optionally, the parameter type can be tagged with the `SearchSchemaInput` type like this: `(searchParams: TSearchSchemaInput & SearchSchemaInput) => TSearchSchema`. If this tag is present, `TSearchSchemaInput` will be used to type the `search` property of `<Link />` and `navigate()` **instead of** `TSearchSchema`. The difference between `TSearchSchemaInput` and `TSearchSchema` can be useful, for example, to express optional search parameters.
+
+### `search.middlewares` property
+
+- Type: `(({search: TSearchSchema, next: (newSearch: TSearchSchema) => TSearchSchema}) => TSearchSchema)[]`
+- Optional
+- Search middlewares are functions that transform the search parameters when generating new links for a route or its descendants.
+- A search middleware is passed in the current search (if it is the first middleware to run) or is invoked by the previous middleware calling `next`.
+
+### `parseParams` method (⚠️ deprecated, use `params.parse` instead)
+
+- Type: `(rawParams: Record<string, string>) => TParams`
+- Optional
+- A function that will be called when this route is matched and passed the raw params from the current location and return valid parsed params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function does not throw, its return value will be used as the route's params and the return type will be inferred into the rest of the router.
+
+### `stringifyParams` method (⚠️ deprecated, use `params.stringify` instead)
+
+- Type: `(params: TParams) => Record<string, string>`
+- Required if `parseParams` is provided
+- A function that will be called when this route's parsed params are being used to build a location. This function should return a valid object of `Record<string, string>` mapping.
+
+### `params.parse` method
+
+- Type: `(rawParams: Record<string, string>) => TParams | false`
+- Optional
+- A function that will be called when this route is matched and passed the raw params from the current location and return valid parsed params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function returns parsed params, its return value will be used as the route's params and the return type will be inferred into the rest of the router.
+- Experimental: returning `false` during incoming route matching skips this route and allows matching to continue to another candidate route.
+
+### `params.priority` property
+
+- Type: `number`
+- Optional
+- Defaults to `0`
+- Controls the matching order when multiple route candidates with `params.parse` can match the same URL segment. Higher numbers are tried first. If a higher-priority route's `params.parse` returns `false`, matching continues to the next candidate.
+- This only affects competing candidates that use `params.parse`; normal route specificity still applies, so static routes continue to match before dynamic, optional, or wildcard routes.
+
+### `params.stringify` method
+
+- Type: `(params: TParams) => Record<string, string>`
+- A function that will be called when this route's parsed params are being used to build a location. This function should return a valid object of `Record<string, string>` mapping.
+
+### `beforeLoad` method
+
+- Type:
+
+```tsx
+type beforeLoad = (
+  opts: RouteMatch & {
+    search: TFullSearchSchema
+    abortController: AbortController
+    preload: boolean
+    params: TAllParams
+    context: TParentContext
+    location: ParsedLocation
+    navigate: NavigateFn<AnyRoute> // @deprecated
+    buildLocation: BuildLocationFn<AnyRoute>
+    cause: 'enter' | 'stay'
+  },
+) => Promise<TRouteContext> | TRouteContext | void
+```
+
+- Optional
+- [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail.
+- If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render.
+- If this function returns a `TRouteContext` object, that object will be merged into the route's context and be made available in the `loader` and other related route components/methods.
+- It's common to use this function to check if a user is authenticated and redirect them to a login page if they are not. To do this, you can either return or throw a `redirect` object from this function.
+
+> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](/router/api/router/redirectFunction).
+
+### `loader` method
+
+- Type:
+
+```tsx
+type loaderFn = (
+  opts: RouteMatch & {
+    abortController: AbortController
+    cause: 'preload' | 'enter' | 'stay'
+    context: TAllContext
+    deps: TLoaderDeps
+    location: ParsedLocation
+    params: TAllParams
+    preload: boolean
+    parentMatchPromise: Promise<MakeRouteMatchFromRoute<TParentRoute>>
+    navigate: NavigateFn<AnyRoute> // @deprecated
+    route: AnyRoute
+  },
+) => Promise<TLoaderData> | TLoaderData | void
+
+type loader =
+  | loaderFn
+  | {
+      handler: loaderFn
+      staleReloadMode?: 'background' | 'blocking'
+    }
+```
+
+- Optional
+- [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- This async function is called when a route is matched and passed the route's match object. If an error is thrown here, the route will be put into an error state and the error will be thrown during render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail.
+- If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render.
+- If this function returns a `TLoaderData` object, that object will be stored on the route match until the route match is no longer active. It can be accessed using the `useLoaderData` hook in any component that is a child of the route match before another `<Outlet />` is rendered.
+- Deps must be returned by your `loaderDeps` function in order to appear.
+- Use the object form to configure loader-specific behavior like `staleReloadMode`.
+- `staleReloadMode: 'background'` preserves stale-while-revalidate behavior for stale successful matches.
+- `staleReloadMode: 'blocking'` waits for the stale loader reload to complete before continuing.
+
+> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](/router/api/router/redirectFunction).
+
+### `loaderDeps` method
+
+- Type:
+
+```tsx
+type loaderDeps = (opts: { search: TFullSearchSchema }) => Record<string, any>
+```
+
+- Optional
+- A function that will be called before this route is matched to provide additional unique identification to the route match and serve as a dependency tracker for when the match should be reloaded. It should return any serializable value that can uniquely identify the route match from navigation to navigation.
+- By default, path params are already used to uniquely identify a route match, so it's unnecessary to return these here.
+- If your route match relies on search params for unique identification, it's required that you return them here so they can be made available in the `loader`'s `deps` argument.
+
+### `staleTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultStaleTime`, which defaults to `0`
+- The amount of time in milliseconds that a route match's loader data will be considered fresh. If a route match is matched again within this time frame, its loader data will not be reloaded.
+
+### `preloadStaleTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultPreloadStaleTime`, which defaults to `30_000` ms (30 seconds)
+- The amount of time in milliseconds that a route match's loader data will be considered fresh when preloading. If a route match is preloaded again within this time frame, its loader data will not be reloaded. If a route match is loaded (for navigation) within this time frame, the normal `staleTime` is used instead.
+
+### `gcTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultGcTime`, which defaults to 30 minutes.
+- The amount of time in milliseconds that a route match's loader data will be kept in memory after a preload or it is no longer in use.
+
+### `shouldReload` property
+
+- Type: `boolean | ((args: LoaderArgs) => boolean)`
+- Optional
+- If `false` or returns `false`, the route match's loader data will not be reloaded on subsequent matches.
+- If `true` or returns `true`, the route match's loader data will be reloaded on subsequent matches.
+- If `undefined` or returns `undefined`, the route match's loader data will adhere to the default stale-while-revalidate behavior.
+
+### `caseSensitive` property
+
+- Type: `boolean`
+- Optional
+- If `true`, this route will be matched as case-sensitive.
+
+### `wrapInSuspense` property
+
+- Type: `boolean`
+- Optional
+- If `true`, this route will be forcefully wrapped in a suspense boundary, regardless if a reason is found to do so from inspecting its provided components.
+
+### `pendingMs` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultPendingMs`, which defaults to `1000`
+- The threshold in milliseconds that a route must be pending before its `pendingComponent` is shown.
+
+### `pendingMinMs` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultPendingMinMs` which defaults to `500`
+- The minimum amount of time in milliseconds that the pending component will be shown for if it is shown. This is useful to prevent the pending component from flashing on the screen for a split second.
+
+### `preloadMaxAge` property
+
+- Type: `number`
+- Optional
+- Defaults to `30_000` ms (30 seconds)
+- The maximum amount of time in milliseconds that a route's preloaded route data will be cached for. If a route is not matched within this time frame, its loader data will be discarded.
+
+### `preSearchFilters` property (⚠️ deprecated, use `search.middlewares` instead)
+
+- Type: `((search: TFullSearchSchema) => TFullSearchSchema)[]`
+- Optional
+- An array of functions that will be called when generating any new links to this route or its grandchildren.
+- Each function will be called with the current search params and should return a new search params object that will be used to generate the link.
+- It has a `pre` prefix because it is called before the user-provided function that is passed to `navigate`/`Link` etc has a chance to modify the search params.
+
+### `postSearchFilters` property (⚠️ deprecated, use `search.middlewares` instead)
+
+- Type: `((search: TFullSearchSchema) => TFullSearchSchema)[]`
+- Optional
+- An array of functions that will be called when generating any new links to this route or its grandchildren.
+- Each function will be called with the current search params and should return a new search params object that will be used to generate the link.
+- It has a `post` prefix because it is called after the user-provided function that is passed to `navigate`/`Link` etc has modified the search params.
+
+### `onError` property
+
+- Type: `(error: any) => void`
+- Optional
+- A function that will be called when an error is thrown during a navigation or preload event.
+- If this function throws a [`redirect`](/router/api/router/redirectFunction), then the router will process and apply the redirect immediately.
+
+### `onEnter` property
+
+- Type: `(match: RouteMatch) => void`
+- Optional
+- A function that will be called when a route is matched and loaded after not being matched in the previous location.
+
+### `onStay` property
+
+- Type: `(match: RouteMatch) => void`
+- Optional
+- A function that will be called when a route is matched and loaded after being matched in the previous location.
+
+### `onLeave` property
+
+- Type: `(match: RouteMatch) => void`
+- Optional
+- A function that will be called when a route is no longer matched after being matched in the previous location.
+
+### `onCatch` property
+
+- Type: `(error: Error, errorInfo: ErrorInfo) => void`
+- Optional - Defaults to `routerOptions.defaultOnCatch`
+- A function that will be called when errors are caught when the route encounters an error.
+
+### `remountDeps` method
+
+- Type:
+
+```tsx
+type remountDeps = (opts: RemountDepsOptions) => any
+
+interface RemountDepsOptions<
+  in out TRouteId,
+  in out TFullSearchSchema,
+  in out TAllParams,
+  in out TLoaderDeps,
+> {
+  routeId: TRouteId
+  search: TFullSearchSchema
+  params: TAllParams
+  loaderDeps: TLoaderDeps
+}
+```
+
+- Optional
+- A function that will be called to determine whether a route component shall be remounted after navigation. If this function returns a different value than previously, it will remount.
+- The return value needs to be JSON serializable.
+- By default, a route component will not be remounted if it stays active after a navigation.
+
+Example:
+If you want to configure to remount a route component upon `params` change, use:
+
+```tsx
+remountDeps: ({ params }) => params
+```
+
+### `headers` method
+
+- Type:
+
+```tsx
+type headers = (opts: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) => Promise<Record<string, string>> | Record<string, string>
+```
+
+- Optional
+- Allows you to specify custom HTTP headers to be sent when this route is rendered during SSR. The function receives the current match context and should return a plain object of header name/value pairs.
+
+### `head` method
+
+- Type:
+
+```tsx
+type head = (ctx: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) =>
+  | Promise<{
+      links?: RouteMatch['links']
+      scripts?: RouteMatch['headScripts']
+      meta?: RouteMatch['meta']
+      styles?: RouteMatch['styles']
+    }>
+  | {
+      links?: RouteMatch['links']
+      scripts?: RouteMatch['headScripts']
+      meta?: RouteMatch['meta']
+      styles?: RouteMatch['styles']
+    }
+```
+
+- Optional
+- Returns additional elements to inject into the document `<head>` for this route. Use it to add route-level SEO metadata, preload links, inline styles, or custom scripts.
+
+### `scripts` method
+
+- Type:
+
+```tsx
+type scripts = (ctx: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) => Promise<RouteMatch['scripts']> | RouteMatch['scripts']
+```
+
+- Optional
+- A shorthand helper to return only `<script>` elements. Equivalent to returning the `scripts` field from the `head` method.
+
+### `codeSplitGroupings` property
+
+- Type: `Array<Array<'loader' | 'component' | 'pendingComponent' | 'notFoundComponent' | 'errorComponent'>>`
+- Optional
+- Fine-grained control over how the router groups lazy-loaded pieces of a route into chunks. Each inner array represents a group of assets that will be placed into the same bundle during code-splitting.
diff --git a/mintlify/router/api/router/RouteType.md b/mintlify/router/api/router/RouteType.md
new file mode 100644
index 000000000..4d66debbc
--- /dev/null
+++ b/mintlify/router/api/router/RouteType.md
@@ -0,0 +1,55 @@
+---
+id: RouteType
+title: Route type
+---
+
+The `Route` type is used to describe a route instance.
+
+## `Route` properties and methods
+
+An instance of the `Route` has the following properties and methods:
+
+### `.addChildren` method
+
+- Type: `(children: Route[]) => this`
+- Adds child routes to the route instance and returns the route instance (but with updated types to reflect the new children).
+
+### `.update` method
+
+- Type: `(options: Partial<UpdatableRouteOptions>) => this`
+- Updates the route instance with new options and returns the route instance (but with updated types to reflect the new options).
+- In some circumstances, it can be useful to update a route instance's options after it has been created to avoid circular type references.
+- ...`RouteApi` methods
+
+### `.lazy` method
+
+- Type: `(lazyImporter: () => Promise<Partial<UpdatableRouteOptions>>) => this`
+- Updates the route instance with a new lazy importer which will be resolved lazily when loading the route. This can be useful for code splitting.
+
+### `.redirect` method
+
+- Type: `(opts?: RedirectOptions) => Redirect`
+- A type-safe version of the [`redirect`](/router/api/router/redirectFunction) function that is pre-bound to the route's path.
+- The `from` parameter is automatically set to the route's `fullPath`, enabling type-safe relative redirects.
+- See [`RouteApi.redirect`](/router/api/router/RouteApiType#redirect-method) for more details.
+
+#### Example
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard/settings')({
+  beforeLoad: ({ context }) => {
+    if (!context.user) {
+      // Type-safe redirect - 'from' is automatically '/dashboard/settings'
+      throw Route.redirect({
+        to: '../login', // Relative path to sibling route
+      })
+    }
+  },
+})
+```
+
+### ...`RouteApi` methods
+
+- All of the methods from [`RouteApi`](/router/api/router/RouteApiType) are available.
diff --git a/mintlify/router/api/router/RouterClass.md b/mintlify/router/api/router/RouterClass.md
new file mode 100644
index 000000000..58b72ad18
--- /dev/null
+++ b/mintlify/router/api/router/RouterClass.md
@@ -0,0 +1,40 @@
+---
+id: RouterClass
+title: Router Class
+---
+
+> [!CAUTION]
+> This class has been deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`createRouter`](/router/api/router/createRouterFunction) function instead.
+
+The `Router` class is used to instantiate a new router instance.
+
+## `Router` constructor
+
+The `Router` constructor accepts a single argument: the `options` that will be used to configure the router instance.
+
+### Constructor options
+
+- Type: [`RouterOptions`](/router/api/router/RouterOptionsType)
+- Required
+- The options that will be used to configure the router instance.
+
+### Constructor returns
+
+- An instance of the [`Router`](/router/api/router/RouterType).
+
+## Examples
+
+```tsx
+import { Router, RouterProvider } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = new Router({
+  routeTree,
+  defaultPreload: 'intent',
+})
+
+export default function App() {
+  return <RouterProvider router={router} />
+}
+```
diff --git a/mintlify/router/api/router/RouterEventsType.md b/mintlify/router/api/router/RouterEventsType.md
new file mode 100644
index 000000000..49ca990a3
--- /dev/null
+++ b/mintlify/router/api/router/RouterEventsType.md
@@ -0,0 +1,110 @@
+---
+id: RouterEventsType
+title: RouterEvents type
+---
+
+The `RouterEvents` type contains all of the events that the router can emit. Each top-level key of this type, represents the name of an event that the router can emit. The values of the keys are the event payloads.
+
+```tsx
+type RouterEvents = {
+  onBeforeNavigate: {
+    type: 'onBeforeNavigate'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+  onBeforeLoad: {
+    type: 'onBeforeLoad'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+  onLoad: {
+    type: 'onLoad'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+  onResolved: {
+    type: 'onResolved'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+  onBeforeRouteMount: {
+    type: 'onBeforeRouteMount'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+  onInjectedHtml: {
+    type: 'onInjectedHtml'
+  }
+  onRendered: {
+    type: 'onRendered'
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }
+}
+```
+
+## RouterEvents properties
+
+Once an event is emitted, the following properties will be present on the event payload.
+
+### `type` property
+
+- Type: `onBeforeNavigate | onBeforeLoad | onLoad | onBeforeRouteMount | onResolved | onRendered | onInjectedHtml`
+- The type of the event
+- This is useful for discriminating between events in a listener function.
+
+### `fromLocation` property
+
+- Type: [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- The location that the router is transitioning from.
+
+### `toLocation` property
+
+- Type: [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- The location that the router is transitioning to.
+
+### `pathChanged` property
+
+- Type: `boolean`
+- `true` if the path has changed between the `fromLocation` and `toLocation`.
+
+### `hrefChanged` property
+
+- Type: `boolean`
+- `true` if the href has changed between the `fromLocation` and `toLocation`.
+
+### `hashChanged` property
+
+- Type: `boolean`
+- `true` if the hash has changed between the `fromLocation` and `toLocation`.
+
+## Example
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({ routeTree })
+
+const unsub = router.subscribe('onResolved', (evt) => {
+  // ...
+})
+```
diff --git a/mintlify/router/api/router/RouterOptionsType.md b/mintlify/router/api/router/RouterOptionsType.md
new file mode 100644
index 000000000..bd6804b32
--- /dev/null
+++ b/mintlify/router/api/router/RouterOptionsType.md
@@ -0,0 +1,413 @@
+---
+id: RouterOptions
+title: RouterOptions
+---
+
+The `RouterOptions` type contains all of the options that can be used to configure a router instance.
+
+## RouterOptions properties
+
+The `RouterOptions` type accepts an object with the following properties and methods:
+
+### `routeTree` property
+
+- Type: `AnyRoute`
+- Required
+- The route tree that will be used to configure the router instance.
+
+### `history` property
+
+- Type: `RouterHistory`
+- Optional
+- The history object that will be used to manage the browser history. If not provided, a new `createBrowserHistory` instance will be created and used.
+
+### `stringifySearch` method
+
+- Type: `(search: Record<string, any>) => string`
+- Optional
+- A function that will be used to stringify search params when generating links.
+- Defaults to `defaultStringifySearch`.
+
+### `parseSearch` method
+
+- Type: `(search: string) => Record<string, any>`
+- Optional
+- A function that will be used to parse search params when parsing the current location.
+- Defaults to `defaultParseSearch`.
+
+### `search.strict` property
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`
+- Configures how unknown search params (= not returned by any `validateSearch`) are treated.
+- If `false`, unknown search params will be kept.
+- If `true`, unknown search params will be removed.
+
+### `defaultPreload` property
+
+- Type: `undefined | false | 'intent' | 'viewport' | 'render'`
+- Optional
+- Defaults to `false`
+- If `false`, routes will not be preloaded by default in any way.
+- If `'intent'`, routes will be preloaded by default when the user hovers over a link or a `touchstart` event is detected on a `<Link>`.
+- If `'viewport'`, routes will be preloaded by default when they are within the viewport of the browser.
+- If `'render'`, routes will be preloaded by default as soon as they are rendered in the DOM.
+
+### `defaultPreloadDelay` property
+
+- Type: `number`
+- Optional
+- Defaults to `50`
+- The delay in milliseconds that a route must be hovered over or touched before it is preloaded.
+
+### `defaultComponent` property
+
+- Type: `RouteComponent`
+- Optional
+- Defaults to `Outlet`
+- The default `component` a route should use if no component is provided.
+
+### `defaultErrorComponent` property
+
+- Type: `RouteComponent`
+- Optional
+- Defaults to `ErrorComponent`
+- The default `errorComponent` a route should use if no error component is provided.
+
+### `defaultNotFoundComponent` property
+
+- Type: `NotFoundRouteComponent`
+- Optional
+- Defaults to `NotFound`
+- The default `notFoundComponent` a route should use if no notFound component is provided.
+
+### `defaultPendingComponent` property
+
+- Type: `RouteComponent`
+- Optional
+- The default `pendingComponent` a route should use if no pending component is provided.
+
+### `defaultPendingMs` property
+
+- Type: `number`
+- Optional
+- Defaults to `1000`
+- The default `pendingMs` a route should use if no pendingMs is provided.
+
+### `defaultPendingMinMs` property
+
+- Type: `number`
+- Optional
+- Defaults to `500`
+- The default `pendingMinMs` a route should use if no pendingMinMs is provided.
+
+### `defaultStaleTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `0`
+- The default `staleTime` a route should use if no staleTime is provided.
+
+### `defaultStaleReloadMode` property
+
+- Type: `'background' | 'blocking'`
+- Optional
+- Defaults to `'background'`
+- Controls how stale successful loader data is revalidated by default.
+- `'background'` preserves stale-while-revalidate behavior.
+- `'blocking'` waits for the stale loader reload to finish before navigation resolves.
+
+### `defaultPreloadStaleTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `30_000` ms (30 seconds)
+- The default `preloadStaleTime` a route should use if no preloadStaleTime is provided.
+
+### `defaultPreloadGcTime` property
+
+- Type: `number`
+- Optional
+- Defaults to `routerOptions.defaultGcTime`, which defaults to 30 minutes.
+- The default `preloadGcTime` a route should use if no preloadGcTime is provided.
+
+### `defaultGcTime` property
+
+- Type: `number`
+- Optional
+- Defaults to 30 minutes.
+- The default `gcTime` a route should use if no gcTime is provided.
+
+### `defaultOnCatch` property
+
+- Type: `(error: Error, errorInfo: ErrorInfo) => void`
+- Optional
+- The default `onCatch` handler for errors caught by the Router ErrorBoundary
+
+### `disableGlobalCatchBoundary` property
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`
+- When `true`, disables the global catch boundary that normally wraps all route matches. This allows unhandled errors to bubble up to top-level error handlers in the browser.
+- Useful for testing tools, error reporting services, and debugging scenarios.
+
+### `protocolAllowlist` property
+
+- Type: `Array<string>`
+- Optional
+- Defaults to `DEFAULT_PROTOCOL_ALLOWLIST` which includes:
+  - Web navigation: `http:`, `https:`
+  - Common browser-safe actions: `mailto:`, `tel:`
+- An array of URL protocols that are allowed in links, redirects, and navigation. Absolute URLs with protocols not in this list are rejected to prevent security vulnerabilities like XSS attacks.
+- This check is applied across router navigation APIs, including:
+  - `<Link to="...">`
+  - `navigate({ to: ... })` and `navigate({ href: ... })`
+  - `redirect({ to: ... })` and `redirect({ href: ... })`
+- Protocol entries must match `URL.protocol` format (lowercase with a trailing `:`), for example `blob:` or `data:`. If you configure `protocolAllowlist: ['blob']` (without `:`), links using `blob:` will still be blocked.
+
+**Example**
+
+```tsx
+import {
+  createRouter,
+  DEFAULT_PROTOCOL_ALLOWLIST,
+} from '@tanstack/react-router'
+
+// Use a custom allowlist (replaces the default)
+const router = createRouter({
+  routeTree,
+  protocolAllowlist: ['https:', 'mailto:'],
+})
+
+// Or extend the default allowlist
+const router = createRouter({
+  routeTree,
+  protocolAllowlist: [...DEFAULT_PROTOCOL_ALLOWLIST, 'ftp:'],
+})
+```
+
+### `defaultViewTransition` property
+
+- Type: `boolean | ViewTransitionOptions`
+- Optional
+- If `true`, route navigations will be called using `document.startViewTransition()`.
+- If [`ViewTransitionOptions`](/router/api/router/ViewTransitionOptionsType), route navigations will be called using `document.startViewTransition({update, types})`
+  where `types` will be the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types,
+  the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
+- If the browser does not support this api, this option will be ignored.
+- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
+- See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types
+
+### `defaultHashScrollIntoView` property
+
+- Type: `boolean | ScrollIntoViewOptions`
+- Optional
+- Defaults to `true` so the element with an id matching the hash will be scrolled into view after the location is committed to history.
+- If `false`, the element with an id matching the hash will not be scrolled into view after the location is committed to history.
+- If an object is provided, it will be passed to the `scrollIntoView` method as options.
+- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for more information on `ScrollIntoViewOptions`.
+
+### `caseSensitive` property
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`
+- If `true`, all routes will be matched as case-sensitive.
+
+### `basepath` property
+
+- Type: `string`
+- Optional
+- Defaults to `/`
+- The basepath for the entire router. This is useful for mounting a router instance at a subpath.
+
+### `rewrite` property
+
+- Type: `LocationRewrite`
+- Optional
+- Configures bidirectional URL transformation between the browser URL and the router's internal URL.
+- See the [URL Rewrites guide](/router/guide/url-rewrites) for detailed usage and patterns.
+
+The `LocationRewrite` type has the following shape:
+
+```tsx
+type LocationRewrite = {
+  input?: LocationRewriteFunction
+  output?: LocationRewriteFunction
+}
+
+type LocationRewriteFunction = (opts: { url: URL }) => undefined | string | URL
+```
+
+- `input`: Transforms the URL before the router interprets it (browser → router)
+- `output`: Transforms the URL before it's written to browser history (router → browser)
+
+**Example**
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      // Strip locale prefix: /en/about → /about
+      if (url.pathname.startsWith('/en')) {
+        url.pathname = url.pathname.replace(/^\/en/, '') || '/'
+      }
+      return url
+    },
+    output: ({ url }) => {
+      // Add locale prefix: /about → /en/about
+      url.pathname = `/en${url.pathname === '/' ? '' : url.pathname}`
+      return url
+    },
+  },
+})
+```
+
+When both `basepath` and `rewrite` are configured, they are automatically composed. The basepath rewrite runs first on input (stripping the basepath) and last on output (adding it back).
+
+### `context` property
+
+- Type: `any`
+- Optional or required if the root route was created with [`createRootRouteWithContext()`](/router/api/router/createRootRouteWithContextFunction).
+- The root context that will be provided to all routes in the route tree. This can be used to provide a context to all routes in the tree without having to provide it to each route individually.
+
+### `dehydrate` method
+
+- Type: `() => TDehydrated`
+- Optional
+- A function that will be called when the router is dehydrated. The return value of this function will be serialized and stored in the router's dehydrated state.
+
+### `hydrate` method
+
+- Type: `(dehydrated: TDehydrated) => void`
+- Optional
+- A function that will be called when the router is hydrated. The return value of this function will be serialized and stored in the router's dehydrated state.
+
+### `routeMasks` property
+
+- Type: `RouteMask[]`
+- Optional
+- An array of route masks that will be used to mask routes in the route tree. Route masking is when you display a route at a different path than the one it is configured to match, like a modal popup that when shared will unmask to the modal's content instead of the modal's context.
+
+### `unmaskOnReload` property
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`
+- If `true`, route masks will, by default, be removed when the page is reloaded. This can be overridden on a per-mask basis by setting `unmaskOnReload` on the mask, or on a per-navigation basis by setting `mask.unmaskOnReload` in [`NavigateOptions`](/router/api/router/NavigateOptionsType).
+
+### `Wrap` property
+
+- Type: `React.Component`
+- Optional
+- A component that will be used to wrap the entire router. This is useful for providing a context to the entire router. Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
+
+**Example**
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  Wrap: ({ children }) => {
+    return <MyContext.Provider value={myContext}>{children}</MyContext>
+  },
+})
+```
+
+### `InnerWrap` property
+
+- Type: `React.Component`
+- Optional
+- A component that will be used to wrap the inner contents of the router. This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks. Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
+
+**Example**
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  InnerWrap: ({ children }) => {
+    const routerState = useRouterState()
+
+    return (
+      <MyContext.Provider value={myContext}>
+        {children}
+      </MyContext>
+    )
+  },
+})
+```
+
+### `notFoundMode` property
+
+- Type: `'root' | 'fuzzy'`
+- Optional
+- Defaults to `'fuzzy'`
+- This property controls how TanStack Router will handle scenarios where it cannot find a route to match the current location. See the [Not Found Errors guide](/router/guide/not-found-errors) for more information.
+
+### `notFoundRoute` property
+
+- **Deprecated**
+- Type: `NotFoundRoute`
+- Optional
+- A route that will be used as the default not found route for every branch of the route tree. This can be overridden on a per-branch basis by providing a not found route to the `NotFoundRoute` option on the root route of the branch.
+
+### `trailingSlash` property
+
+- Type: `'always' | 'never' | 'preserve'`
+- Optional
+- Defaults to `never`
+- Configures how trailing slashes are treated. `'always'` will add a trailing slash if not present, `'never'` will remove the trailing slash if present and `'preserve'` will not modify the trailing slash.
+
+### `pathParamsAllowedCharacters` property
+
+- Type: `Array<';' | ':' | '@' | '&' | '=' | '+' | '$' | ','>`
+- Optional
+- Configures which URI characters are allowed in path params that would ordinarily be escaped by encodeURIComponent.
+
+### `defaultStructuralSharing` property
+
+- Type: `boolean`
+- Optional
+- Defaults to `false`
+- Configures whether structural sharing is enabled by default for fine-grained selectors.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+### `defaultRemountDeps` property
+
+- Type:
+
+```tsx
+type defaultRemountDeps = (opts: RemountDepsOptions) => any
+
+interface RemountDepsOptions<
+  in out TRouteId,
+  in out TFullSearchSchema,
+  in out TAllParams,
+  in out TLoaderDeps,
+> {
+  routeId: TRouteId
+  search: TFullSearchSchema
+  params: TAllParams
+  loaderDeps: TLoaderDeps
+}
+```
+
+- Optional
+- A default function that will be called to determine whether a route component shall be remounted after navigation. If this function returns a different value than previously, it will remount.
+- The return value needs to be JSON serializable.
+- By default, a route component will not be remounted if it stays active after a navigation
+
+Example:  
+If you want to configure to remount all route components upon `params` change, use:
+
+```tsx
+remountDeps: ({ params }) => params
+```
diff --git a/mintlify/router/api/router/RouterStateType.md b/mintlify/router/api/router/RouterStateType.md
new file mode 100644
index 000000000..75969e0c0
--- /dev/null
+++ b/mintlify/router/api/router/RouterStateType.md
@@ -0,0 +1,51 @@
+---
+id: RouterStateType
+title: RouterState type
+---
+
+The `RouterState` type represents shape of the internal state of the router. The Router's internal state is useful, if you need to access certain internals of the router, such as any pending matches, is the router in its loading state, etc.
+
+```tsx
+type RouterState = {
+  status: 'pending' | 'idle'
+  isLoading: boolean
+  isTransitioning: boolean
+  matches: Array<RouteMatch>
+  location: ParsedLocation
+  resolvedLocation: ParsedLocation
+}
+```
+
+## RouterState properties
+
+The `RouterState` type contains all of the properties that are available on the router state.
+
+### `status` property
+
+- Type: `'pending' | 'idle'`
+- The current status of the router. If the router is pending, it means that it is currently loading a route or the router is still transitioning to the new route.
+
+### `isLoading` property
+
+- Type: `boolean`
+- `true` if the router is currently loading a route or waiting for a route to finish loading.
+
+### `isTransitioning` property
+
+- Type: `boolean`
+- `true` if the router is currently transitioning to a new route.
+
+### `matches` property
+
+- Type: [`Array<RouteMatch>`](/router/api/router/RouteMatchType)
+- An array of all of the route matches that have been resolved and are currently active.
+
+### `location` property
+
+- Type: [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- The latest location that the router has parsed from the browser history. This location may not be resolved and loaded yet.
+
+### `resolvedLocation` property
+
+- Type: [`ParsedLocation`](/router/api/router/ParsedLocationType)
+- The location that the router has resolved and loaded.
diff --git a/mintlify/router/api/router/RouterType.md b/mintlify/router/api/router/RouterType.md
new file mode 100644
index 000000000..1631c5ad7
--- /dev/null
+++ b/mintlify/router/api/router/RouterType.md
@@ -0,0 +1,225 @@
+---
+id: RouterType
+title: Router type
+---
+
+The `Router` type is used to describe a router instance.
+
+## `Router` properties and methods
+
+An instance of the `Router` has the following properties and methods:
+
+### `.update` method
+
+- Type: `(newOptions: RouterOptions) => void`
+- Updates the router instance with new options.
+
+### `state` property
+
+- Type: [`RouterState`](/router/api/router/RouterStateType)
+- The current state of the router.
+
+> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](/router/api/router/useRouterStateHook) hook.**
+
+### `.subscribe` method
+
+- Type: `(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void`
+- Subscribes to a [`RouterEvent`](/router/api/router/RouterEventsType).
+- Returns a function that can be used to unsubscribe from the event.
+- The listener will be called with the event payload whenever that event is emitted.
+- See the [Router Events guide](/router/guide/router-events) for lifecycle ordering and usage patterns.
+
+### `.matchRoutes` method
+
+- Type: `(pathname: string, locationSearch?: Record<string, any>, opts?: { throwOnError?: boolean; }) => RouteMatch[]`
+- Matches a pathname and search params against the router's route tree and returns an array of route matches.
+- If `opts.throwOnError` is `true`, any errors that occur during the matching process will be thrown (in addition to being returned in the route match's `error` property).
+
+### `.cancelMatch` method
+
+- Type: `(matchId: string) => void`
+- Cancels a route match that is currently pending by calling `match.abortController.abort()`.
+
+### `.cancelMatches` method
+
+- Type: `() => void`
+- Cancels all route matches that are currently pending by calling `match.abortController.abort()` on each one.
+
+### `.buildLocation` method
+
+Builds a new parsed location object that can be used later to navigate to a new location.
+
+- Type: `(opts: BuildNextOptions) => ParsedLocation`
+- Properties
+  - `from`
+    - Type: `string`
+    - Optional
+    - The path to navigate from. If not provided, the current path will be used.
+  - `to`
+    - Type: `string | number | null`
+    - Optional
+    - The path to navigate to. If `null`, the current path will be used.
+  - `params`
+    - Type: `true | Updater<unknown>`
+    - Optional
+    - If `true`, the current params will be used. If a function is provided, it will be called with the current params and the return value will be used.
+  - `search`
+    - Type: `true | Updater<unknown>`
+    - Optional
+    - If `true`, the current search params will be used. If a function is provided, it will be called with the current search params and the return value will be used.
+  - `hash`
+    - Type: `true | Updater<string>`
+    - Optional
+    - If `true`, the current hash will be used. If a function is provided, it will be called with the current hash and the return value will be used.
+  - `state`
+    - Type: `true | NonNullableUpdater<ParsedHistoryState, HistoryState>`
+    - Optional
+    - If `true`, the current state will be used. If a function is provided, it will be called with the current state and the return value will be used.
+  - `mask`
+    - Type: `object`
+    - Optional
+    - Contains all of the same BuildNextOptions, with the addition of `unmaskOnReload`.
+    - `unmaskOnReload`
+      - Type: `boolean`
+      - Optional
+      - If `true`, the route mask will be removed when the page is reloaded. This can be overridden on a per-navigation basis by setting `mask.unmaskOnReload` in [`NavigateOptions`](/router/api/router/NavigateOptionsType).
+
+### `.commitLocation` method
+
+Commits a new location object to the browser history.
+
+- Type
+  ```tsx
+  type commitLocation = (
+    location: ParsedLocation & {
+      replace?: boolean
+      resetScroll?: boolean
+      hashScrollIntoView?: boolean | ScrollIntoViewOptions
+      ignoreBlocker?: boolean
+    },
+  ) => Promise<void>
+  ```
+- Properties
+  - `location`
+    - Type: [`ParsedLocation`](/router/api/router/ParsedLocationType)
+    - Required
+    - The location to commit to the browser history.
+  - `replace`
+    - Type: `boolean`
+    - Optional
+    - Defaults to `false`.
+    - If `true`, the location will be committed to the browser history using `history.replace` instead of `history.push`.
+  - `resetScroll`
+    - Type: `boolean`
+    - Optional
+    - Defaults to `true` so that the scroll position will be reset to 0,0 after the location is committed to the browser history.
+    - If `false`, the scroll position will not be reset to 0,0 after the location is committed to history.
+  - `hashScrollIntoView`
+    - Type: `boolean | ScrollIntoViewOptions`
+    - Optional
+    - Defaults to `true` so the element with an id matching the hash will be scrolled into view after the location is committed to history.
+    - If `false`, the element with an id matching the hash will not be scrolled into view after the location is committed to history.
+    - If an object is provided, it will be passed to the `scrollIntoView` method as options.
+    - See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for more information on `ScrollIntoViewOptions`.
+  - `ignoreBlocker`
+    - Type: `boolean`
+    - Optional
+    - Defaults to `false`.
+    - If `true`, navigation will ignore any blockers that might prevent it.
+
+### `.navigate` method
+
+Navigates to a new location.
+
+- Type
+  ```tsx
+  type navigate = (options: NavigateOptions) => Promise<void>
+  ```
+
+### `.invalidate` method
+
+Invalidates route matches by forcing their `beforeLoad` and `load` functions to be called again.
+
+- Type: `(opts?: {filter?: (d: MakeRouteMatchUnion<TRouter>) => boolean, sync?: boolean, forcePending?: boolean }) => Promise<void>`
+- This is useful any time your loader data might be out of date or stale. For example, if you have a route that displays a list of posts, and you have a loader function that fetches the list of posts from an API, you might want to invalidate the route matches for that route any time a new post is created so that the list of posts is always up-to-date.
+- if `filter` is not supplied, all matches will be invalidated
+- if `filter` is supplied, only matches for which `filter` returns `true` will be invalidated.
+- if `sync` is true, the promise returned by this function will only resolve once all loaders have finished.
+- if `forcePending` is true, the invalidated matches will be put into `'pending'` state regardless whether they are in `'error'` state or not.
+- You might also want to invalidate the Router if you imperatively `reset` the router's `CatchBoundary` to trigger loaders again.
+
+### `.clearCache` method
+
+Remove cached route matches.
+
+- Type: `(opts?: {filter?: (d: MakeRouteMatchUnion<TRouter>) => boolean}) => void`
+- if `filter` is not supplied, all cached matches will be removed
+- if `filter` is supplied, only matches for which `filter` returns `true` will be removed.
+
+### `.load` method
+
+Loads all of the currently matched route matches and resolves when they are all loaded and ready to be rendered.
+
+> ⚠️⚠️⚠️ **`router.load()` respects `route.staleTime`: fresh matches stay fresh, but stale matches are revalidated even if their loader key did not change. If you need to forcefully reload all active matches regardless of freshness, use `router.invalidate()` instead.**
+
+- Type: `(opts?: {sync?: boolean}) => Promise<void>`
+- if `sync` is true, the promise returned by this function will only resolve once all loaders have finished.
+- The most common use case for this method is to call it when doing SSR to ensure that all of the critical data for the current route is loaded before attempting to stream or render the application to the client.
+
+### `.preloadRoute` method
+
+Preloads all of the matches that match the provided `NavigateOptions`.
+
+> ⚠️⚠️⚠️ **Preloaded route matches are not stored long-term in the router state. They are only stored until the next attempted navigation action.**
+
+- Type: `(opts?: NavigateOptions) => Promise<RouteMatch[]>`
+- Properties
+  - `opts`
+    - Type: `NavigateOptions`
+    - Optional, defaults to the current location.
+    - The options that will be used to determine which route matches to preload.
+- Returns
+  - A promise that resolves with an array of all of the route matches that were preloaded.
+
+### `.loadRouteChunk` method
+
+Loads the JS chunk of the route.
+
+- Type: `(route: AnyRoute) => Promise<void>`
+
+### `.matchRoute` method
+
+Matches a pathname and search params against the router's route tree and returns a route match's params or false if no match was found.
+
+- Type: `(dest: ToOptions, matchOpts?: MatchRouteOptions) => RouteMatch['params'] | false`
+- Properties
+  - `dest`
+    - Type: `ToOptions`
+    - Required
+    - The destination to match against.
+  - `matchOpts`
+    - Type: `MatchRouteOptions`
+    - Optional
+    - Options that will be used to match the destination.
+- Returns
+  - A route match's params if a match was found.
+  - `false` if no match was found.
+
+### `.dehydrate` method
+
+Dehydrates the router's critical state into a serializable object that can be sent to the client in an initial request.
+
+- Type: `() => DehydratedRouter`
+- Returns
+  - A serializable object that contains the router's critical state.
+
+### `.hydrate` method
+
+Hydrates the router's critical state from a serializable object that was sent from the server in an initial request.
+
+- Type: `(dehydrated: DehydratedRouter) => void`
+- Properties
+  - `dehydrated`
+    - Type: `DehydratedRouter`
+    - Required
+    - The dehydrated router state that was sent from the server.
diff --git a/mintlify/router/api/router/ToMaskOptionsType.md b/mintlify/router/api/router/ToMaskOptionsType.md
new file mode 100644
index 000000000..8850cb78e
--- /dev/null
+++ b/mintlify/router/api/router/ToMaskOptionsType.md
@@ -0,0 +1,20 @@
+---
+id: ToMaskOptionsType
+title: ToMaskOptions type
+---
+
+The `ToMaskOptions` type includes the same destination fields as [`ToOptions`](/router/api/router/ToOptionsType), excluding `mask`, and adds options specific to route masking.
+
+```tsx
+type ToMaskOptions = {
+  from?: ValidRoutePath | string
+  to?: ValidRoutePath | string
+  hash?: true | string | ((prev?: string) => string)
+  state?: true | HistoryState | ((prev: HistoryState) => HistoryState)
+} & SearchParamOptions &
+  PathParamOptions & {
+    unmaskOnReload?: boolean
+  }
+```
+
+- [`ToOptions`](/router/api/router/ToOptionsType)
diff --git a/mintlify/router/api/router/ToOptionsType.md b/mintlify/router/api/router/ToOptionsType.md
new file mode 100644
index 000000000..909d2bbe2
--- /dev/null
+++ b/mintlify/router/api/router/ToOptionsType.md
@@ -0,0 +1,32 @@
+---
+id: ToOptionsType
+title: ToOptions type
+---
+
+The `ToOptions` type contains several properties that can be used to describe a router destination, including `mask` for route masking.
+
+```tsx
+type ToOptions = {
+  from?: ValidRoutePath | string
+  to?: ValidRoutePath | string
+  hash?: true | string | ((prev?: string) => string)
+  state?: true | HistoryState | ((prev: HistoryState) => HistoryState)
+} & SearchParamOptions &
+  PathParamOptions &
+  MaskOptions
+
+type SearchParamOptions = {
+  search?: true | TToSearch | ((prev: TFromSearch) => TToSearch)
+}
+
+type PathParamOptions = {
+  params?:
+    | true
+    | Record<string, TPathParam>
+    | ((prev: TFromParams) => TToParams)
+}
+
+type MaskOptions = {
+  mask?: ToMaskOptions<TRouter, TMaskFrom, TMaskTo>
+}
+```
diff --git a/mintlify/router/api/router/UseMatchRouteOptionsType.md b/mintlify/router/api/router/UseMatchRouteOptionsType.md
new file mode 100644
index 000000000..783b87481
--- /dev/null
+++ b/mintlify/router/api/router/UseMatchRouteOptionsType.md
@@ -0,0 +1,13 @@
+---
+id: UseMatchRouteOptionsType
+title: UseMatchRouteOptions type
+---
+
+The `UseMatchRouteOptions` type extends the [`ToOptions`](/router/api/router/ToOptionsType) type and describes additional options available when using the [`useMatchRoute`](/router/api/router/useMatchRouteHook) hook.
+
+```tsx
+export type UseMatchRouteOptions = ToOptions & MatchRouteOptions
+```
+
+- [`ToOptions`](/router/api/router/ToOptionsType)
+- [`MatchRouteOptions`](/router/api/router/MatchRouteOptionsType)
diff --git a/mintlify/router/api/router/ViewTransitionOptionsType.md b/mintlify/router/api/router/ViewTransitionOptionsType.md
new file mode 100644
index 000000000..efead03b8
--- /dev/null
+++ b/mintlify/router/api/router/ViewTransitionOptionsType.md
@@ -0,0 +1,41 @@
+---
+id: ViewTransitionOptionsType
+title: ViewTransitionOptions type
+---
+
+The `ViewTransitionOptions` type is used to define a
+[viewTransition type](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types).
+
+```tsx
+interface ViewTransitionOptions {
+  types:
+    | Array<string>
+    | ((locationChangeInfo: {
+        fromLocation?: ParsedLocation
+        toLocation: ParsedLocation
+        pathChanged: boolean
+        hrefChanged: boolean
+        hashChanged: boolean
+      }) => Array<string> | false)
+}
+```
+
+## ViewTransitionOptions properties
+
+The `ViewTransitionOptions` type accepts an object with a single property:
+
+### `types` property
+
+- Type: `Array&lt;string&gt; | ((locationChangeInfo: &#123;
+  fromLocation?: ParsedLocation
+  toLocation: ParsedLocation
+  pathChanged: boolean
+  hrefChanged: boolean
+  hashChanged: boolean
+&#125;) => (Array&lt;string&gt; | false))`
+- Required
+- Either one of:
+  - An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
+  - A function that accepts `locationChangeInfo` object and returns either:
+    - An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
+    - or `false` to skip the view transition
diff --git a/mintlify/router/api/router/awaitComponent.md b/mintlify/router/api/router/awaitComponent.md
new file mode 100644
index 000000000..ed1d67e1e
--- /dev/null
+++ b/mintlify/router/api/router/awaitComponent.md
@@ -0,0 +1,46 @@
+---
+id: awaitComponent
+title: Await component
+---
+
+The `Await` component is a component that suspends until the provided promise is resolved or rejected.
+This is only necessary for React 18.
+If you are using React 19, you can use the `use()` hook instead.
+
+## Await props
+
+The `Await` component accepts the following props:
+
+### `props.promise` prop
+
+- Type: `Promise<T>`
+- Required
+- The promise to await.
+
+### `props.children` prop
+
+- Type: `(result: T) => React.ReactNode`
+- Required
+- A function that will be called with the resolved value of the promise.
+
+## Await returns
+
+- Throws an error if the promise is rejected.
+- Suspends (throws a promise) if the promise is pending.
+- Returns the resolved value of a deferred promise if the promise is resolved using `props.children` as the render function.
+
+## Examples
+
+```tsx
+import { Await } from '@tanstack/react-router'
+
+function Component() {
+  const { deferredPromise } = route.useLoaderData()
+
+  return (
+    <Await promise={deferredPromise}>
+      {(data) => <div>{JSON.stringify(data)}</div>}
+    </Await>
+  )
+}
+```
diff --git a/mintlify/router/api/router/catchBoundaryComponent.md b/mintlify/router/api/router/catchBoundaryComponent.md
new file mode 100644
index 000000000..3497ff3f3
--- /dev/null
+++ b/mintlify/router/api/router/catchBoundaryComponent.md
@@ -0,0 +1,56 @@
+---
+id: catchBoundaryComponent
+title: CatchBoundary component
+---
+
+The `CatchBoundary` component is a component that catches errors thrown by its children, renders an error component and optionally calls the `onCatch` callback. It also accepts a `getResetKey` function that can be used to declaratively reset the component's state when the key changes.
+
+## CatchBoundary props
+
+The `CatchBoundary` component accepts the following props:
+
+### `props.getResetKey` prop
+
+- Type: `() => string`
+- Required
+- A function that returns a string that will be used to reset the component's state when the key changes.
+
+### `props.children` prop
+
+- Type: `React.ReactNode`
+- Required
+- The component's children to render when there is no error
+
+### `props.errorComponent` prop
+
+- Type: `React.ReactNode`
+- Optional - [`default: ErrorComponent`](/router/api/router/errorComponentComponent)
+- The component to render when there is an error.
+
+### `props.onCatch` prop
+
+- Type: `(error: any) => void`
+- Optional
+- A callback that will be called with the error that was thrown by the component's children.
+
+## CatchBoundary returns
+
+- Returns the component's children if there is no error.
+- Returns the `errorComponent` if there is an error.
+
+## Examples
+
+```tsx
+import { CatchBoundary } from '@tanstack/react-router'
+
+function Component() {
+  return (
+    <CatchBoundary
+      getResetKey={() => 'reset'}
+      onCatch={(error) => console.error(error)}
+    >
+      <div>My Component</div>
+    </CatchBoundary>
+  )
+}
+```
diff --git a/mintlify/router/api/router/catchNotFoundComponent.md b/mintlify/router/api/router/catchNotFoundComponent.md
new file mode 100644
index 000000000..60757e2e0
--- /dev/null
+++ b/mintlify/router/api/router/catchNotFoundComponent.md
@@ -0,0 +1,49 @@
+---
+id: catchNotFoundComponent
+title: CatchNotFound Component
+---
+
+The `CatchNotFound` component is a component that catches not-found errors thrown by its children, renders a fallback component and optionally calls the `onCatch` callback. It resets when the pathname changes.
+
+## CatchNotFound props
+
+The `CatchNotFound` component accepts the following props:
+
+### `props.children` prop
+
+- Type: `React.ReactNode`
+- Required
+- The component's children to render when there is no error
+
+### `props.fallback` prop
+
+- Type: `(error: NotFoundError) => React.ReactElement`
+- Optional
+- The component to render when there is an error
+
+### `props.onCatch` prop
+
+- Type: `(error: any) => void`
+- Optional
+- A callback that will be called with the error that was thrown by the component's children
+
+## CatchNotFound returns
+
+- Returns the component's children if there is no error.
+- Returns the `fallback` if there is an error.
+
+## Examples
+
+```tsx
+import { CatchNotFound } from '@tanstack/react-router'
+
+function Component() {
+  return (
+    <CatchNotFound
+      fallback={(error) => <p>Not found error! {JSON.stringify(error)}</p>}
+    >
+      <ComponentThatMightThrowANotFoundError />
+    </CatchNotFound>
+  )
+}
+```
diff --git a/mintlify/router/api/router/clientOnlyComponent.md b/mintlify/router/api/router/clientOnlyComponent.md
new file mode 100644
index 000000000..8e12528ee
--- /dev/null
+++ b/mintlify/router/api/router/clientOnlyComponent.md
@@ -0,0 +1,50 @@
+---
+id: clientOnlyComponent
+title: ClientOnly Component
+---
+
+The `ClientOnly` component is used to render a component only in the client, without breaking the server-side rendering due to hydration errors. It accepts a `fallback` prop that will be rendered if the JS is not yet loaded in the client.
+
+## Props
+
+The `ClientOnly` component accepts the following props:
+
+### `props.fallback` prop
+
+The fallback component to render if the JS is not yet loaded in the client.
+
+### `props.children` prop
+
+The component to render if the JS is loaded in the client.
+
+## Returns
+
+- Returns the component's children if the JS is loaded in the client.
+- Returns the `fallback` component if the JS is not yet loaded in the client.
+
+## Examples
+
+```tsx
+// src/routes/dashboard.tsx
+import { ClientOnly, createFileRoute } from '@tanstack/react-router'
+import {
+  Charts,
+  FallbackCharts,
+} from './charts-that-break-server-side-rendering'
+
+export const Route = createFileRoute('/dashboard')({
+  component: Dashboard,
+  // ... other route options
+})
+
+function Dashboard() {
+  return (
+    <div>
+      <p>Dashboard</p>
+      <ClientOnly fallback={<FallbackCharts />}>
+        <Charts />
+      </ClientOnly>
+    </div>
+  )
+}
+```
diff --git a/mintlify/router/api/router/createFileRouteFunction.md b/mintlify/router/api/router/createFileRouteFunction.md
new file mode 100644
index 000000000..69f749205
--- /dev/null
+++ b/mintlify/router/api/router/createFileRouteFunction.md
@@ -0,0 +1,40 @@
+---
+id: createFileRouteFunction
+title: createFileRoute function
+---
+
+The `createFileRoute` function is a factory that can be used to create a file-based route instance. This route instance can then be used to automatically generate a route tree with the `tsr generate` and `tsr watch` commands.
+
+## createFileRoute options
+
+The `createFileRoute` function accepts a single argument of type `string` that represents the `path` of the file that the route will be generated from.
+
+### `path` option
+
+- Type: `string` literal
+- Required, but **automatically inserted and updated by the `tsr generate` and `tsr watch` commands**
+- The full path of the file that the route will be generated from
+
+## createFileRoute returns
+
+A new function that accepts a single argument of type [`RouteOptions`](/router/api/router/RouteOptionsType) that will be used to configure the file [`Route`](/router/api/router/RouteType) instance.
+
+> ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier.
+
+## Examples
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  loader: () => {
+    return 'Hello World'
+  },
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = Route.useLoaderData()
+  return <div>{data}</div>
+}
+```
diff --git a/mintlify/router/api/router/createLazyFileRouteFunction.md b/mintlify/router/api/router/createLazyFileRouteFunction.md
new file mode 100644
index 000000000..9170cea76
--- /dev/null
+++ b/mintlify/router/api/router/createLazyFileRouteFunction.md
@@ -0,0 +1,48 @@
+---
+id: createLazyFileRouteFunction
+title: createLazyFileRoute function
+---
+
+The `createLazyFileRoute` function is used for creating a partial file-based route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](/router/guide/code-splitting#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`.
+
+## createLazyFileRoute options
+
+The `createLazyFileRoute` function accepts a single argument of type `string` that represents the `path` of the file that the route will be generated from.
+
+### `path`
+
+- Type: `string`
+- Required, but **automatically inserted and updated by the `tsr generate` and `tsr watch` commands**
+- The full path of the file that the route will be generated from.
+
+### createLazyFileRoute returns
+
+A new function that accepts a single argument of partial of the type [`RouteOptions`](/router/api/router/RouteOptionsType) that will be used to configure the file [`Route`](/router/api/router/RouteType) instance.
+
+- Type:
+
+```tsx
+Pick<
+  RouteOptions,
+  'component' | 'pendingComponent' | 'errorComponent' | 'notFoundComponent'
+>
+```
+
+- [`RouteOptions`](/router/api/router/RouteOptionsType)
+
+> ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier.
+
+### Examples
+
+```tsx
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/')({
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = Route.useLoaderData()
+  return <div>{data}</div>
+}
+```
diff --git a/mintlify/router/api/router/createLazyRouteFunction.md b/mintlify/router/api/router/createLazyRouteFunction.md
new file mode 100644
index 000000000..15f5ebcf7
--- /dev/null
+++ b/mintlify/router/api/router/createLazyRouteFunction.md
@@ -0,0 +1,71 @@
+---
+id: createLazyRouteFunction
+title: createLazyRoute function
+---
+
+The `createLazyRoute` function is used for creating a partial code-based route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](/router/guide/code-splitting#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`.
+
+## createLazyRoute options
+
+The `createLazyRoute` function accepts a single argument of type `string` that represents the `id` of the route.
+
+### `id`
+
+- Type: `string`
+- Required
+- The route id of the route.
+
+### createLazyRoute returns
+
+A new function that accepts a single argument of partial of the type [`RouteOptions`](/router/api/router/RouteOptionsType) that will be used to configure the file [`Route`](/router/api/router/RouteType) instance.
+
+- Type:
+
+```tsx
+Pick<
+  RouteOptions,
+  'component' | 'pendingComponent' | 'errorComponent' | 'notFoundComponent'
+>
+```
+
+- [`RouteOptions`](/router/api/router/RouteOptionsType)
+
+> ⚠️ Note: This route instance must be manually lazily loaded against its critical route instance using the `lazy` method returned by the `createRoute` function.
+
+### Examples
+
+```tsx
+// src/route-pages/index.tsx
+import { createLazyRoute } from '@tanstack/react-router'
+
+export const Route = createLazyRoute('/')({
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = Route.useLoaderData()
+  return <div>{data}</div>
+}
+
+// src/routeTree.tsx
+import {
+  createRootRouteWithContext,
+  createRoute,
+  Outlet,
+} from '@tanstack/react-router'
+
+interface MyRouterContext {
+  foo: string
+}
+
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+}).lazy(() => import('./route-pages/index').then((d) => d.Route))
+
+export const routeTree = rootRoute.addChildren([indexRoute])
+```
diff --git a/mintlify/router/api/router/createRootRouteFunction.md b/mintlify/router/api/router/createRootRouteFunction.md
new file mode 100644
index 000000000..ab29f93ce
--- /dev/null
+++ b/mintlify/router/api/router/createRootRouteFunction.md
@@ -0,0 +1,50 @@
+---
+id: createRootRouteFunction
+title: createRootRoute function
+---
+
+The `createRootRoute` function returns a new root route instance. A root route instance can then be used to create a route-tree.
+
+## createRootRoute options
+
+The options that will be used to configure the root route instance.
+
+- Type:
+
+```tsx
+Omit<
+  RouteOptions,
+  | 'path'
+  | 'id'
+  | 'getParentRoute'
+  | 'caseSensitive'
+  | 'parseParams'
+  | 'stringifyParams'
+>
+```
+
+- [`RouteOptions`](/router/api/router/RouteOptionsType)
+- Optional
+
+## createRootRoute returns
+
+A new [`Route`](/router/api/router/RouteType) instance.
+
+## Examples
+
+```tsx
+import { createRootRoute, createRouter, Outlet } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: () => <Outlet />,
+  // ... root route options
+})
+
+const routeTree = rootRoute.addChildren([
+  // ... other routes
+])
+
+const router = createRouter({
+  routeTree,
+})
+```
diff --git a/mintlify/router/api/router/createRootRouteWithContextFunction.md b/mintlify/router/api/router/createRootRouteWithContextFunction.md
new file mode 100644
index 000000000..87ce8dfce
--- /dev/null
+++ b/mintlify/router/api/router/createRootRouteWithContextFunction.md
@@ -0,0 +1,53 @@
+---
+id: createRootRouteWithContextFunction
+title: createRootRouteWithContext function
+---
+
+The `createRootRouteWithContext` function is a helper function that can be used to create a root route instance that requires a context type to be fulfilled when the router is created.
+
+## createRootRouteWithContext generics
+
+The `createRootRouteWithContext` function accepts a single generic argument:
+
+### `TRouterContext` generic
+
+- Type: `TRouterContext`
+- Optional, **but recommended**.
+- The context type that will be required to be fulfilled when the router is created
+
+## createRootRouteWithContext returns
+
+- A factory function that can be used to create a new [`createRootRoute`](/router/api/router/createRootRouteFunction) instance.
+- It accepts a single argument, the same as the [`createRootRoute`](/router/api/router/createRootRouteFunction) function.
+
+## Examples
+
+```tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/react-router'
+import { QueryClient } from '@tanstack/react-query'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+  // ... root route options
+})
+
+const routeTree = rootRoute.addChildren([
+  // ... other routes
+])
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+  },
+})
+```
diff --git a/mintlify/router/api/router/createRouteFunction.md b/mintlify/router/api/router/createRouteFunction.md
new file mode 100644
index 000000000..4cbdccf1e
--- /dev/null
+++ b/mintlify/router/api/router/createRouteFunction.md
@@ -0,0 +1,37 @@
+---
+id: createRouteFunction
+title: createRoute function
+---
+
+The `createRoute` function implements returns a [`Route`](/router/api/router/RouteType) instance. A route instance can then be passed to a root route's children to create a route tree, which is then passed to the router.
+
+## createRoute options
+
+- Type: [`RouteOptions`](/router/api/router/RouteOptionsType)
+- Required
+- The options that will be used to configure the route instance
+
+## createRoute returns
+
+A new [`Route`](/router/api/router/RouteType) instance.
+
+## Examples
+
+```tsx
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from './__root'
+
+const Route = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  loader: () => {
+    return 'Hello World'
+  },
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  const data = Route.useLoaderData()
+  return <div>{data}</div>
+}
+```
diff --git a/mintlify/router/api/router/createRouteMaskFunction.md b/mintlify/router/api/router/createRouteMaskFunction.md
new file mode 100644
index 000000000..e6d371ab4
--- /dev/null
+++ b/mintlify/router/api/router/createRouteMaskFunction.md
@@ -0,0 +1,35 @@
+---
+id: createRouteMaskFunction
+title: createRouteMask function
+---
+
+The `createRouteMask` function is a helper function that can be used to create a route mask configuration that can be passed to the `RouterOptions.routeMasks` option.
+
+## createRouteMask options
+
+- Type: [`RouteMask`](/router/api/router/RouteMaskType)
+- Required
+- The options that will be used to configure the route mask
+
+## createRouteMask returns
+
+- A object with the type signature of [`RouteMask`](/router/api/router/RouteMaskType) that can be passed to the `RouterOptions.routeMasks` option.
+
+## Examples
+
+```tsx
+import { createRouteMask, createRouter } from '@tanstack/react-router'
+
+const photoModalToPhotoMask = createRouteMask({
+  routeTree,
+  from: '/photos/$photoId/modal',
+  to: '/photos/$photoId',
+  params: true,
+})
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  routeMasks: [photoModalToPhotoMask],
+})
+```
diff --git a/mintlify/router/api/router/createRouterFunction.md b/mintlify/router/api/router/createRouterFunction.md
new file mode 100644
index 000000000..64e2dcca1
--- /dev/null
+++ b/mintlify/router/api/router/createRouterFunction.md
@@ -0,0 +1,32 @@
+---
+id: createRouterFunction
+title: createRouter function
+---
+
+The `createRouter` function accepts a [`RouterOptions`](/router/api/router/RouterOptionsType) object and creates a new [`Router`](/router/api/router/RouterClass) instance.
+
+## createRouter options
+
+- Type: [`RouterOptions`](/router/api/router/RouterOptionsType)
+- Required
+- The options that will be used to configure the router instance.
+
+## createRouter returns
+
+- An instance of the [`Router`](/router/api/router/RouterType).
+
+## Examples
+
+```tsx
+import { createRouter, RouterProvider } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+})
+
+export default function App() {
+  return <RouterProvider router={router} />
+}
+```
diff --git a/mintlify/router/api/router/defaultGlobalNotFoundComponent.md b/mintlify/router/api/router/defaultGlobalNotFoundComponent.md
new file mode 100644
index 000000000..62daae9af
--- /dev/null
+++ b/mintlify/router/api/router/defaultGlobalNotFoundComponent.md
@@ -0,0 +1,12 @@
+---
+id: defaultGlobalNotFoundComponent
+title: DefaultGlobalNotFound component
+---
+
+The `DefaultGlobalNotFound` component is a component that renders "Not Found" on the root route when there is no other route that matches and a `notFoundComponent` is not provided.
+
+## DefaultGlobalNotFound returns
+
+```tsx
+<p>Not Found</p>
+```
diff --git a/mintlify/router/api/router/deferFunction.md b/mintlify/router/api/router/deferFunction.md
new file mode 100644
index 000000000..dcd2be7c2
--- /dev/null
+++ b/mintlify/router/api/router/deferFunction.md
@@ -0,0 +1,49 @@
+---
+id: deferFunction
+title: defer function
+---
+
+> [!CAUTION]
+> You don't need to call `defer` manually anymore, Promises are handled automatically now.
+
+The `defer` function wraps a promise with a deferred state object that can be used to inspect the promise's state. This deferred promise can then be passed to the [`useAwaited`](/router/api/router/useAwaitedHook) hook or the [`<Await>`](/router/api/router/awaitComponent) component for suspending until the promise is resolved or rejected.
+
+The `defer` function accepts a single argument, the `promise` to wrap with a deferred state object.
+
+## defer options
+
+- Type: `Promise<T>`
+- Required
+- The promise to wrap with a deferred state object.
+
+## defer returns
+
+- A promise that can be passed to the [`useAwaited`](/router/api/router/useAwaitedHook) hook or the [`<Await>`](/router/api/router/awaitComponent) component.
+
+## Examples
+
+```tsx
+import { defer } from '@tanstack/react-router'
+
+const route = createRoute({
+  loader: () => {
+    const deferredPromise = defer(fetch('/api/data'))
+    return { deferredPromise }
+  },
+  component: MyComponent,
+})
+
+function MyComponent() {
+  const { deferredPromise } = Route.useLoaderData()
+
+  const data = useAwaited({ promise: deferredPromise })
+
+  // or
+
+  return (
+    <Await promise={deferredPromise}>
+      {(data) => <div>{JSON.stringify(data)}</div>}
+    </Await>
+  )
+}
+```
diff --git a/mintlify/router/api/router/errorComponentComponent.md b/mintlify/router/api/router/errorComponentComponent.md
new file mode 100644
index 000000000..04399f124
--- /dev/null
+++ b/mintlify/router/api/router/errorComponentComponent.md
@@ -0,0 +1,32 @@
+---
+id: errorComponentComponent
+title: ErrorComponent component
+---
+
+The `ErrorComponent` component is a component that renders an error message and optionally the error's message.
+
+## ErrorComponent props
+
+The `ErrorComponent` component accepts the following props:
+
+### `props.error` prop
+
+- Type: `TError` (defaults to `Error`)
+- The error that was thrown by the component's children
+
+### `props.info` prop
+
+- Type: `{ componentStack: string }`
+- Optional
+- Additional information about where the error was thrown, such as the React component stack trace.
+
+### `props.reset` prop
+
+- Type: `() => void`
+- A function to programmatically reset the error state
+
+## ErrorComponent returns
+
+- Returns a formatted error message with the error's message if it exists.
+- The error message can be toggled by clicking the "Show Error" button.
+- By default, the error message will be shown in development.
diff --git a/mintlify/router/api/router/getRouteApiFunction.md b/mintlify/router/api/router/getRouteApiFunction.md
new file mode 100644
index 000000000..5e8b50dc9
--- /dev/null
+++ b/mintlify/router/api/router/getRouteApiFunction.md
@@ -0,0 +1,33 @@
+---
+id: getRouteApiFunction
+title: getRouteApi function
+---
+
+The `getRouteApi` function provides type-safe version of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types.
+
+## getRouteApi options
+
+The `getRouteApi` function accepts a single argument, a `routeId` string literal.
+
+### `routeId` option
+
+- Type: `string`
+- Required
+- The route ID to which the [`RouteApi`](/router/api/router/RouteApiClass) instance will be bound
+
+## getRouteApi returns
+
+- An instance of the [`RouteApi`](/router/api/router/RouteApiType) that is pre-bound to the route ID that the `getRouteApi` function was called with.
+
+## Examples
+
+```tsx
+import { getRouteApi } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/posts')
+
+export function PostsPage() {
+  const posts = routeApi.useLoaderData()
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/historyStateInterface.md b/mintlify/router/api/router/historyStateInterface.md
new file mode 100644
index 000000000..d3c0be8e1
--- /dev/null
+++ b/mintlify/router/api/router/historyStateInterface.md
@@ -0,0 +1,20 @@
+---
+id: historyStateInterface
+title: HistoryState interface
+---
+
+The `HistoryState` interface is an interface exported by the `history` package that describes the shape of the state object that can be used in conjunction with the `history` package and the `window.location` API.
+
+You can extend this interface to add additional properties to the state object across your application.
+
+```tsx
+// src/main.tsx
+declare module '@tanstack/react-router' {
+  // ...
+
+  interface HistoryState {
+    additionalRequiredProperty: number
+    additionalProperty?: string
+  }
+}
+```
diff --git a/mintlify/router/api/router/isNotFoundFunction.md b/mintlify/router/api/router/isNotFoundFunction.md
new file mode 100644
index 000000000..61db04c03
--- /dev/null
+++ b/mintlify/router/api/router/isNotFoundFunction.md
@@ -0,0 +1,34 @@
+---
+id: isNotFoundFunction
+title: isNotFound function
+---
+
+The `isNotFound` function can be used to determine if an object is a [`NotFoundError`](/router/api/router/NotFoundErrorType) object.
+
+## isNotFound options
+
+The `isNotFound` function accepts a single argument, an `input`.
+
+### `input` option
+
+- Type: `unknown`
+- Required
+- An object to check if it is a [`NotFoundError`](/router/api/router/NotFoundErrorType).
+
+## isNotFound returns
+
+- Type: `boolean`
+- `true` if the object is a [`NotFoundError`](/router/api/router/NotFoundErrorType).
+- `false` if the object is not a [`NotFoundError`](/router/api/router/NotFoundErrorType).
+
+## Examples
+
+```tsx
+import { isNotFound } from '@tanstack/react-router'
+
+function somewhere(obj: unknown) {
+  if (isNotFound(obj)) {
+    // ...
+  }
+}
+```
diff --git a/mintlify/router/api/router/isRedirectFunction.md b/mintlify/router/api/router/isRedirectFunction.md
new file mode 100644
index 000000000..13e8ccde7
--- /dev/null
+++ b/mintlify/router/api/router/isRedirectFunction.md
@@ -0,0 +1,34 @@
+---
+id: isRedirectFunction
+title: isRedirect function
+---
+
+The `isRedirect` function can be used to determine if an object is a redirect object.
+
+## isRedirect options
+
+The `isRedirect` function accepts a single argument, an `input`.
+
+#### `input`
+
+- Type: `unknown`
+- Required
+- An object to check if it is a redirect object
+
+## isRedirect returns
+
+- Type: `boolean`
+- `true` if the object is a redirect object
+- `false` if the object is not a redirect object
+
+## Examples
+
+```tsx
+import { isRedirect } from '@tanstack/react-router'
+
+function somewhere(obj: unknown) {
+  if (isRedirect(obj)) {
+    // ...
+  }
+}
+```
diff --git a/mintlify/router/api/router/lazyRouteComponentFunction.md b/mintlify/router/api/router/lazyRouteComponentFunction.md
new file mode 100644
index 000000000..751db4423
--- /dev/null
+++ b/mintlify/router/api/router/lazyRouteComponentFunction.md
@@ -0,0 +1,50 @@
+---
+id: lazyRouteComponentFunction
+title: lazyRouteComponent function
+---
+
+> [!IMPORTANT]
+> If you are using file-based routing, it's recommended to use the `createLazyFileRoute` function instead.
+
+The `lazyRouteComponent` function can be used to create a one-off code-split route component that can be preloaded using a `component.preload()` method.
+
+## lazyRouteComponent options
+
+The `lazyRouteComponent` function accepts two arguments:
+
+### `importer` option
+
+- Type: `() => Promise<T>`
+- Required
+- A function that returns a promise that resolves to an object that contains the component to be loaded.
+
+### `exportName` option
+
+- Type: `string`
+- Optional
+- The name of the component to be loaded from the imported object. Defaults to `'default'`.
+
+## lazyRouteComponent returns
+
+- A `React.lazy` component that can be preloaded using a `component.preload()` method.
+
+## Examples
+
+```tsx
+import { lazyRouteComponent } from '@tanstack/react-router'
+
+const route = createRoute({
+  path: '/posts/$postId',
+  component: lazyRouteComponent(() => import('./Post')), // default export
+})
+
+// or
+
+const route = createRoute({
+  path: '/posts/$postId',
+  component: lazyRouteComponent(
+    () => import('./Post'),
+    'PostByIdPageComponent', // named export
+  ),
+})
+```
diff --git a/mintlify/router/api/router/linkComponent.md b/mintlify/router/api/router/linkComponent.md
new file mode 100644
index 000000000..216e5a08e
--- /dev/null
+++ b/mintlify/router/api/router/linkComponent.md
@@ -0,0 +1,55 @@
+---
+id: linkComponent
+title: Link component
+---
+
+The `Link` component is a component that can be used to create a link that can be used to navigate to a new location. This includes changes to the pathname, search params, hash, and location state.
+
+## Link props
+
+The `Link` component accepts the following props:
+
+### `...props`
+
+- Type: `LinkProps & React.RefAttributes<HTMLAnchorElement>`
+- [`LinkProps`](/router/api/router/LinkPropsType)
+
+## Link returns
+
+An anchor element that can be used to navigate to a new location.
+
+## Examples
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+function Component() {
+  return (
+    <Link
+      to="/somewhere/$somewhereId"
+      params={{ somewhereId: 'baz' }}
+      search={(prev) => ({ ...prev, foo: 'bar' })}
+    >
+      Click me
+    </Link>
+  )
+}
+```
+
+By default, param values with characters such as `@` will be encoded in the URL:
+
+```tsx
+// url path will be `/%40foo`
+<Link to="/$username" params={{ username: '@foo' }} />
+```
+
+To opt-out, update the [pathParamsAllowedCharacters](/router/api/router/RouterOptionsType#pathparamsallowedcharacters-property) config on the router
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  routeTree,
+  pathParamsAllowedCharacters: ['@'],
+})
+```
diff --git a/mintlify/router/api/router/linkOptions.md b/mintlify/router/api/router/linkOptions.md
new file mode 100644
index 000000000..b8a2909cf
--- /dev/null
+++ b/mintlify/router/api/router/linkOptions.md
@@ -0,0 +1,38 @@
+---
+id: linkOptions
+title: Link options
+---
+
+`linkOptions` is a function which type checks an object literal with the intention of being used for `Link`, `navigate` or `redirect`
+
+## linkOptions props
+
+The `linkOptions` accepts the following option:
+
+### `...props`
+
+- Type: `LinkProps & React.RefAttributes<HTMLAnchorElement>`
+- [`LinkProps`](/router/api/router/LinkPropsType)
+
+## `linkOptions` returns
+
+An object literal with the exact type inferred from the input
+
+## Examples
+
+```tsx
+const userLinkOptions = linkOptions({
+  to: '/dashboard/users/user',
+  search: {
+    usersView: {
+      sortBy: 'email',
+      filterBy: 'filter',
+    },
+    userId: 0,
+  },
+})
+
+function DashboardComponent() {
+  return <Link {...userLinkOptions} />
+}
+```
diff --git a/mintlify/router/api/router/matchRouteComponent.md b/mintlify/router/api/router/matchRouteComponent.md
new file mode 100644
index 000000000..c5fa41787
--- /dev/null
+++ b/mintlify/router/api/router/matchRouteComponent.md
@@ -0,0 +1,42 @@
+---
+id: matchRouteComponent
+title: MatchRoute component
+---
+
+A component version of the `useMatchRoute` hook. It accepts the same options as the `useMatchRoute` with additional props to aid in conditional rendering.
+
+## MatchRoute props
+
+The `MatchRoute` component accepts the same options as the `useMatchRoute` hook with additional props to aid in conditional rendering.
+
+### `...props` prop
+
+- Type: [`UseMatchRouteOptions`](/router/api/router/UseMatchRouteOptionsType)
+
+### `children` prop
+
+- Optional
+- `React.ReactNode`
+  - The component that will be rendered if the route is matched.
+- `((params: TParams | false) => React.ReactNode)`
+  - A function that will be called with the matched route's params or `false` if no route was matched. This can be useful for components that need to always render, but render different props based on a route match or not.
+
+## MatchRoute returns
+
+Either the `children` prop or the return value of the `children` function.
+
+## Examples
+
+```tsx
+import { MatchRoute } from '@tanstack/react-router'
+
+function Component() {
+  return (
+    <div>
+      <MatchRoute to="/posts/$postId" params={{ postId: '123' }} pending>
+        {(match) => <Spinner show={!!match} wait="delay-50" />}
+      </MatchRoute>
+    </div>
+  )
+}
+```
diff --git a/mintlify/router/api/router/navigateComponent.md b/mintlify/router/api/router/navigateComponent.md
new file mode 100644
index 000000000..e7df8b536
--- /dev/null
+++ b/mintlify/router/api/router/navigateComponent.md
@@ -0,0 +1,18 @@
+---
+id: navigateComponent
+title: Navigate component
+---
+
+The `Navigate` component is a component that can be used to navigate to a new location when rendered. This includes changes to the pathname, search params, hash, and location state. The underlying navigation will happen inside of a `useEffect` hook when successfully rendered.
+
+## Navigate props
+
+The `Navigate` component accepts the following props:
+
+### `...options`
+
+- Type: [`NavigateOptions`](/router/api/router/NavigateOptionsType)
+
+## Navigate returns
+
+- `null`
diff --git a/mintlify/router/api/router/notFoundComponentComponent.md b/mintlify/router/api/router/notFoundComponentComponent.md
new file mode 100644
index 000000000..63b9f93ae
--- /dev/null
+++ b/mintlify/router/api/router/notFoundComponentComponent.md
@@ -0,0 +1,36 @@
+---
+id: notFoundComponentComponent
+title: NotFoundComponent component
+---
+
+The `NotFoundComponent` component is a component that renders when a not-found error occurs in a route.
+
+## NotFoundComponent props
+
+The `NotFoundComponent` component accepts the following props:
+
+### `props.data` prop
+
+- Type: `unknown`
+- Optional
+- Custom data that is passed to the `notFoundComponent` when the not-found error is handled
+- This data comes from the `data` property of the `NotFoundError` object
+
+### `props.isNotFound` prop
+
+- Type: `boolean`
+- Required
+- A boolean value indicating whether the current state is a not-found error state
+- This value is always `true`
+
+### `props.routeId` prop
+
+- Type: `RouteIds<RegisteredRouter['routeTree']>`
+- Required
+- The ID of the route that is attempting to handle the not-found error
+- Must be one of the valid route IDs from the router's route tree
+
+## NotFoundComponent returns
+
+- Returns appropriate UI for not-found error situations
+- Typically includes a "page not found" message along with links to go home or navigate to previous pages
diff --git a/mintlify/router/api/router/notFoundFunction.md b/mintlify/router/api/router/notFoundFunction.md
new file mode 100644
index 000000000..7ba2d299b
--- /dev/null
+++ b/mintlify/router/api/router/notFoundFunction.md
@@ -0,0 +1,40 @@
+---
+id: notFoundFunction
+title: notFound function
+---
+
+The `notFound` function returns a new `NotFoundError` object that can be either returned or thrown from places like a Route's `beforeLoad` or `loader` callbacks to trigger the `notFoundComponent`.
+
+## notFound options
+
+The `notFound` function accepts a single optional argument, the `options` to create the not-found error object.
+
+- Type: [`Partial<NotFoundError>`](/router/api/router/NotFoundErrorType)
+- Optional
+
+## notFound returns
+
+- If the `throw` property is `true` in the `options` object, the `NotFoundError` object will be thrown from within the function call.
+- If the `throw` property is `false | undefined` in the `options` object, the `NotFoundError` object will be returned.
+
+## Examples
+
+```tsx
+import { notFound, createFileRoute, rootRouteId } from '@tanstack/react-router'
+
+const Route = new createFileRoute('/posts/$postId')({
+  // throwing a not-found object
+  loader: ({ context: { post } }) => {
+    if (!post) {
+      throw notFound()
+    }
+  },
+  // or if you want to show a not-found on the whole page
+  loader: ({ context: { team } }) => {
+    if (!team) {
+      throw notFound({ routeId: rootRouteId })
+    }
+  },
+  // ... other route options
+})
+```
diff --git a/mintlify/router/api/router/outletComponent.md b/mintlify/router/api/router/outletComponent.md
new file mode 100644
index 000000000..7b067fbf5
--- /dev/null
+++ b/mintlify/router/api/router/outletComponent.md
@@ -0,0 +1,15 @@
+---
+id: outletComponent
+title: Outlet component
+---
+
+The `Outlet` component is a component that can be used to render the next child route of a parent route.
+
+## Outlet props
+
+The `Outlet` component does not accept any props.
+
+## Outlet returns
+
+- If matched, the child route match's `component`/`errorComponent`/`pendingComponent`/`notFoundComponent`.
+- If not matched, `null`.
diff --git a/mintlify/router/api/router/redirectFunction.md b/mintlify/router/api/router/redirectFunction.md
new file mode 100644
index 000000000..e2f914f19
--- /dev/null
+++ b/mintlify/router/api/router/redirectFunction.md
@@ -0,0 +1,111 @@
+---
+id: redirectFunction
+title: redirect function
+---
+
+The `redirect` function returns a new `Redirect` object that can be either returned or thrown from places like a Route's `beforeLoad` or `loader` callbacks to trigger _redirect_ to a new location.
+
+## redirect options
+
+The `redirect` function accepts a single argument, the `options` to determine the redirect behavior.
+
+- Type: [`Redirect`](/router/api/router/RedirectType)
+- Required
+
+## redirect returns
+
+- If the `throw` property is `true` in the `options` object, the `Redirect` object will be thrown from within the function call.
+- If the `throw` property is `false | undefined` in the `options` object, the `Redirect` object will be returned.
+
+## Examples
+
+### Using the standalone `redirect` function
+
+```tsx
+import { redirect } from '@tanstack/react-router'
+
+const route = createRoute({
+  // throwing an internal redirect object using 'to' property
+  loader: () => {
+    if (!user) {
+      throw redirect({
+        to: '/login',
+      })
+    }
+  },
+  // throwing an external redirect object using 'href' property
+  loader: () => {
+    if (needsExternalAuth) {
+      throw redirect({
+        href: 'https://authprovider.com/login',
+      })
+    }
+  },
+  // or forcing `redirect` to throw itself
+  loader: () => {
+    if (!user) {
+      redirect({
+        to: '/login',
+        throw: true,
+      })
+    }
+  },
+  // ... other route options
+})
+```
+
+### Using Route.redirect (File-Based Routes)
+
+When using file-based routing with `createFileRoute`, you can use the `Route.redirect` method directly. This method automatically sets the `from` parameter based on the route's path, enabling type-safe relative redirects without manually specifying the origin route:
+
+```tsx
+// In routes/dashboard/settings.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard/settings')({
+  beforeLoad: ({ context }) => {
+    if (!context.user) {
+      // Relative redirect - automatically knows we're redirecting from '/dashboard/settings'
+      throw Route.redirect({
+        to: '../login', // Redirects to '/dashboard/login'
+      })
+    }
+  },
+  loader: () => {
+    // Also works in loader
+    if (needsMigration) {
+      throw Route.redirect({
+        to: './migrate', // Redirects to '/dashboard/settings/migrate'
+      })
+    }
+  },
+})
+```
+
+### Using getRouteApi().redirect
+
+For accessing the redirect method outside of the route definition file, you can use `getRouteApi`:
+
+```tsx
+import { getRouteApi } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/dashboard/settings')
+
+// In a beforeLoad or loader callback
+function checkAuth() {
+  if (!user) {
+    // Type-safe redirect with automatic 'from' parameter
+    throw routeApi.redirect({
+      to: '../login',
+    })
+  }
+}
+```
+
+### Benefits of Route-Bound Redirect
+
+Using `Route.redirect` or `getRouteApi().redirect` instead of the standalone `redirect` function offers several advantages:
+
+1. **No need to specify `from`**: The route path is automatically used as the origin
+2. **Type-safe relative paths**: TypeScript validates that relative paths like `../sibling` or `./child` resolve to valid routes
+3. **Refactoring-friendly**: If the route path changes, the redirect origin updates automatically
diff --git a/mintlify/router/api/router/retainSearchParamsFunction.md b/mintlify/router/api/router/retainSearchParamsFunction.md
new file mode 100644
index 000000000..18600fd34
--- /dev/null
+++ b/mintlify/router/api/router/retainSearchParamsFunction.md
@@ -0,0 +1,48 @@
+---
+id: retainSearchParams
+title: Search middleware to retain search params
+---
+
+`retainSearchParams` is a search middleware that allows to keep search params.
+
+## retainSearchParams props
+
+The `retainSearchParams` either accepts `true` or a list of keys of those search params that shall be retained.
+If `true` is passed in, all search params will be retained.
+
+## Examples
+
+```tsx
+import { z } from 'zod'
+import { createRootRoute, retainSearchParams } from '@tanstack/react-router'
+
+const searchSchema = z.object({
+  rootValue: z.string().optional(),
+})
+
+export const Route = createRootRoute({
+  // Use the schema directly for Zod v4
+  validateSearch: searchSchema,
+  search: {
+    middlewares: [retainSearchParams(['rootValue'])],
+  },
+})
+```
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, retainSearchParams } from '@tanstack/react-router'
+
+const searchSchema = z.object({
+  one: z.string().optional(),
+  two: z.string().optional(),
+})
+
+export const Route = createFileRoute('/')({
+  // Use the schema directly for Zod v4
+  validateSearch: searchSchema,
+  search: {
+    middlewares: [retainSearchParams(true)],
+  },
+})
+```
diff --git a/mintlify/router/api/router/rootRouteWithContextFunction.md b/mintlify/router/api/router/rootRouteWithContextFunction.md
new file mode 100644
index 000000000..d6189b7cc
--- /dev/null
+++ b/mintlify/router/api/router/rootRouteWithContextFunction.md
@@ -0,0 +1,54 @@
+---
+id: rootRouteWithContextFunction
+title: rootRouteWithContext function
+---
+
+> [!CAUTION]
+> This function is deprecated and will be removed in the next major version of TanStack Router.
+> Please use the [`createRootRouteWithContext`](/router/api/router/createRootRouteWithContextFunction) function instead.
+
+The `rootRouteWithContext` function is a helper function that can be used to create a root route instance that requires a context type to be fulfilled when the router is created.
+
+## rootRouteWithContext generics
+
+The `rootRouteWithContext` function accepts a single generic argument:
+
+### `TRouterContext` generic
+
+- Type: `TRouterContext`
+- Optional, **but recommended**.
+- The context type that will be required to be fulfilled when the router is created
+
+## rootRouteWithContext returns
+
+- A factory function that can be used to create a new [`createRootRoute`](/router/api/router/createRootRouteFunction) instance.
+- It accepts a single argument, the same as the [`createRootRoute`](/router/api/router/createRootRouteFunction) function.
+
+## Examples
+
+```tsx
+import { rootRouteWithContext, createRouter } from '@tanstack/react-router'
+import { QueryClient } from '@tanstack/react-query'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+const rootRoute = rootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+  // ... root route options
+})
+
+const routeTree = rootRoute.addChildren([
+  // ... other routes
+])
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+  },
+})
+```
diff --git a/mintlify/router/api/router/stripSearchParamsFunction.md b/mintlify/router/api/router/stripSearchParamsFunction.md
new file mode 100644
index 000000000..08164c39b
--- /dev/null
+++ b/mintlify/router/api/router/stripSearchParamsFunction.md
@@ -0,0 +1,78 @@
+---
+id: stripSearchParams
+title: Search middleware to strip search params
+---
+
+`stripSearchParams` is a search middleware that allows to remove search params.
+
+## stripSearchParams props
+
+`stripSearchParams` accepts one of the following inputs:
+
+- `true`: if the search schema has no required params, `true` can be used to strip all search params
+- a list of keys of those search params that shall be removed; only keys of optional search params are allowed.
+- an object that conforms to the partial input search schema. The search params are compared against the values of this object; if the value is deeply equal, it will be removed. This is especially useful to strip out default search params.
+
+## Examples
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+
+const defaultValues = {
+  one: 'abc',
+  two: 'xyz',
+}
+
+const searchSchema = z.object({
+  one: z.string().default(defaultValues.one),
+  two: z.string().default(defaultValues.two),
+})
+
+export const Route = createFileRoute('/')({
+  // for Zod v4, use the schema directly
+  validateSearch: searchSchema,
+  search: {
+    // strip default values
+    middlewares: [stripSearchParams(defaultValues)],
+  },
+})
+```
+
+```tsx
+import { z } from 'zod'
+import { createRootRoute, stripSearchParams } from '@tanstack/react-router'
+
+const searchSchema = z.object({
+  hello: z.string().default('world'),
+  requiredParam: z.string(),
+})
+
+export const Route = createRootRoute({
+  // for Zod v4, use the schema directly
+  validateSearch: searchSchema,
+  search: {
+    // always remove `hello`
+    middlewares: [stripSearchParams(['hello'])],
+  },
+})
+```
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+
+const searchSchema = z.object({
+  one: z.string().default('abc'),
+  two: z.string().default('xyz'),
+})
+
+export const Route = createFileRoute('/')({
+  // for Zod v4, use the schema directly
+  validateSearch: searchSchema,
+  search: {
+    // remove all search params
+    middlewares: [stripSearchParams(true)],
+  },
+})
+```
diff --git a/mintlify/router/api/router/useAwaitedHook.md b/mintlify/router/api/router/useAwaitedHook.md
new file mode 100644
index 000000000..0641de866
--- /dev/null
+++ b/mintlify/router/api/router/useAwaitedHook.md
@@ -0,0 +1,35 @@
+---
+id: useAwaitedHook
+title: useAwaited hook
+---
+
+The `useAwaited` method is a hook that suspends until the provided promise is resolved or rejected.
+
+## useAwaited options
+
+The `useAwaited` hook accepts a single argument, an `options` object.
+
+### `options.promise` option
+
+- Type: `Promise<T>`
+- Required
+- The deferred promise to await.
+
+## useAwaited returns
+
+- Throws an error if the promise is rejected.
+- Suspends (throws a promise) if the promise is pending.
+- Returns the resolved value of a deferred promise if the promise is resolved.
+
+## Examples
+
+```tsx
+import { useAwaited } from '@tanstack/react-router'
+
+function Component() {
+  const { deferredPromise } = route.useLoaderData()
+
+  const data = useAwaited({ promise: myDeferredPromise })
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useBlockerHook.md b/mintlify/router/api/router/useBlockerHook.md
new file mode 100644
index 000000000..b87b7648c
--- /dev/null
+++ b/mintlify/router/api/router/useBlockerHook.md
@@ -0,0 +1,213 @@
+---
+id: useBlockerHook
+title: useBlocker hook
+---
+
+The `useBlocker` method is a hook that [blocks navigation](/router/guide/navigation-blocking) when a condition is met.
+
+> ⚠️ The following new `useBlocker` API is currently _experimental_.
+
+## useBlocker options
+
+The `useBlocker` hook accepts a single _required_ argument, an option object:
+
+### `options.shouldBlockFn` option
+
+- Required
+- Type: `ShouldBlockFn`
+- This function should return a `boolean` or a `Promise<boolean>` that tells the blocker if it should block the current navigation
+- The function has the argument of type `ShouldBlockFnArgs` passed to it, which tells you information about the current and next route and the action performed
+- Think of this function as telling the router if it should block the navigation, so returning `true` mean that it should block the navigation and `false` meaning that it should be allowed
+
+```ts
+type ShouldBlockFnLocation<...> = {
+  routeId: TRouteId
+  fullPath: TFullPath
+  pathname: string
+  params: TAllParams
+  search: TFullSearchSchema
+}
+
+type ShouldBlockFnArgs = {
+  current: ShouldBlockFnLocation
+  next: ShouldBlockFnLocation
+  action: HistoryAction
+}
+```
+
+### `options.disabled` option
+
+- Optional - defaults to `false`
+- Type: `boolean`
+- Specifies if the blocker should be entirely disabled or not
+
+### `options.enableBeforeUnload` option
+
+- Optional - defaults to `true`
+- Type: `boolean | (() => boolean)`
+- Tell the blocker to sometimes or always block the browser `beforeUnload` event or not
+
+### `options.withResolver` option
+
+- Optional - defaults to `false`
+- Type: `boolean`
+- Specify if the resolver returned by the hook should be used or whether your `shouldBlockFn` function itself resolves the blocking
+
+### `options.blockerFn` option (⚠️ deprecated)
+
+- Optional
+- Type: `BlockerFn`
+- The function that returns a `boolean` or `Promise<boolean>` indicating whether to allow navigation.
+
+### `options.condition` option (⚠️ deprecated)
+
+- Optional - defaults to `true`
+- Type: `boolean`
+- A navigation attempt is blocked when this condition is `true`.
+
+## useBlocker returns
+
+An object with the controls to allow manual blocking and unblocking of navigation.
+
+- `status` - A string literal that can be either `'blocked'` or `'idle'`
+- `next` - When status is `blocked`, a type narrrowable object that contains information about the next location
+- `current` - When status is `blocked`, a type narrrowable object that contains information about the current location
+- `action` - When status is `blocked`, a `HistoryAction` string that shows the action that triggered the navigation
+- `proceed` - When status is `blocked`, a function that allows navigation to continue
+- `reset` - When status is `blocked`, a function that cancels navigation (`status` will be reset to `'idle'`)
+
+or
+
+`void` when `withResolver` is `false`
+
+## Examples
+
+Two common use cases for the `useBlocker` hook are:
+
+### Basic usage
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    shouldBlockFn: () => formIsDirty,
+  })
+
+  // ...
+}
+```
+
+### Custom UI
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  const { proceed, reset, status, next } = useBlocker({
+    shouldBlockFn: () => formIsDirty,
+    withResolver: true,
+  })
+
+  // ...
+
+  return (
+    <>
+      {/* ... */}
+      {status === 'blocked' && (
+        <div>
+          <p>You are navigating to {next.pathname}</p>
+          <p>Are you sure you want to leave?</p>
+          <button onClick={proceed}>Yes</button>
+          <button onClick={reset}>No</button>
+        </div>
+      )}
+    </>
+}
+```
+
+### Conditional blocking
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ next }) => {
+      return !next.pathname.includes('step/')
+    },
+    withResolver: true,
+  })
+
+  // ...
+
+  return (
+    <>
+      {/* ... */}
+      {status === 'blocked' && (
+        <div>
+          <p>Are you sure you want to leave?</p>
+          <button onClick={proceed}>Yes</button>
+          <button onClick={reset}>No</button>
+        </div>
+      )}
+    </>
+  )
+}
+```
+
+### Without resolver
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    shouldBlockFn: ({ next }) => {
+      if (next.pathname.includes('step/')) {
+        return false
+      }
+
+      const shouldLeave = confirm('Are you sure you want to leave?')
+      return !shouldLeave
+    },
+  })
+
+  // ...
+}
+```
+
+### Type narrowing
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  // block going from editor-1 to /foo/123?hello=world
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ current, next }) => {
+      if (
+        current.routeId === '/editor-1' &&
+        next.fullPath === '/foo/$id' &&
+        next.params.id === '123' &&
+        next.search.hello === 'world'
+      ) {
+        return true
+      }
+      return false
+    },
+    enableBeforeUnload: false,
+    withResolver: true,
+  })
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useCanGoBack.md b/mintlify/router/api/router/useCanGoBack.md
new file mode 100644
index 000000000..ff10868f7
--- /dev/null
+++ b/mintlify/router/api/router/useCanGoBack.md
@@ -0,0 +1,40 @@
+---
+id: useCanGoBack
+title: useCanGoBack hook
+---
+
+The `useCanGoBack` hook returns a boolean representing if the router history can safely go back without exiting the application.
+
+> ⚠️ The following new `useCanGoBack` API is currently _experimental_.
+
+## useCanGoBack returns
+
+- If the router history is not at index `0`, `true`.
+- If the router history is at index `0`, `false`.
+
+## Limitations
+
+The router history index is reset after a navigation with [`reloadDocument`](/router/api/router/NavigateOptionsType#reloaddocument) set as `true`. This causes the router history to consider the new location as the initial one and will cause `useCanGoBack` to return `false`.
+
+## Examples
+
+### Showing a back button
+
+```tsx
+import { useRouter, useCanGoBack } from '@tanstack/react-router'
+
+function Component() {
+  const router = useRouter()
+  const canGoBack = useCanGoBack()
+
+  return (
+    <div>
+      {canGoBack ? (
+        <button onClick={() => router.history.back()}>Go back</button>
+      ) : null}
+
+      {/* ... */}
+    </div>
+  )
+}
+```
diff --git a/mintlify/router/api/router/useChildMatchesHook.md b/mintlify/router/api/router/useChildMatchesHook.md
new file mode 100644
index 000000000..6a7a179a2
--- /dev/null
+++ b/mintlify/router/api/router/useChildMatchesHook.md
@@ -0,0 +1,42 @@
+---
+id: useChildMatchesHook
+title: useChildMatches hook
+---
+
+The `useChildMatches` hook returns all of the child [`RouteMatch`](/router/api/router/RouteMatchType) objects from the closest match down to the leaf-most match. **It does not include the current match, which can be obtained using the `useMatch` hook.**
+
+> [!IMPORTANT]
+> If the router has pending matches and they are showing their pending component fallbacks, pending matches are used instead of active matches.
+
+## useChildMatches options
+
+The `useChildMatches` hook accepts a single _optional_ argument, an `options` object.
+
+### `opts.select` option
+
+- Optional
+- `(matches: RouteMatch[]) => TSelected`
+- If supplied, this function will be called with the route matches and the return value will be returned from `useChildMatches`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useChildMatches returns
+
+- If a `select` function is provided, the return value of the `select` function.
+- If no `select` function is provided, an array of [`RouteMatch`](/router/api/router/RouteMatchType) objects.
+
+## Examples
+
+```tsx
+import { useChildMatches } from '@tanstack/react-router'
+
+function Component() {
+  const childMatches = useChildMatches()
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useLinkPropsHook.md b/mintlify/router/api/router/useLinkPropsHook.md
new file mode 100644
index 000000000..35856a299
--- /dev/null
+++ b/mintlify/router/api/router/useLinkPropsHook.md
@@ -0,0 +1,21 @@
+---
+id: useLinkPropsHook
+title: useLinkProps hook
+---
+
+The `useLinkProps` hook that takes an object as its argument and returns a `React.AnchorHTMLAttributes<HTMLAnchorElement>` props object. These props can then be safely applied to an anchor element to create a link that can be used to navigate to the new location. This includes changes to the pathname, search params, hash, and location state.
+
+## useLinkProps options
+
+```tsx
+type UseLinkPropsOptions = ActiveLinkOptions &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+```
+
+- [`ActiveLinkOptions`](/router/api/router/ActiveLinkOptionsType)
+- The `useLinkProps` options are used to build a [`LinkProps`](/router/api/router/LinkPropsType) object.
+- It also extends the `React.AnchorHTMLAttributes<HTMLAnchorElement>` type, so that any additional props that are passed to the `useLinkProps` hook will be merged with the [`LinkProps`](/router/api/router/LinkPropsType) object.
+
+## useLinkProps returns
+
+- A `React.AnchorHTMLAttributes<HTMLAnchorElement>` object that can be applied to an anchor element to create a link that can be used to navigate to the new location
diff --git a/mintlify/router/api/router/useLoaderDataHook.md b/mintlify/router/api/router/useLoaderDataHook.md
new file mode 100644
index 000000000..6bcaf0722
--- /dev/null
+++ b/mintlify/router/api/router/useLoaderDataHook.md
@@ -0,0 +1,54 @@
+---
+id: useLoaderDataHook
+title: useLoaderData hook
+---
+
+The `useLoaderData` hook returns the loader data from the closest [`RouteMatch`](/router/api/router/RouteMatchType) in the component tree.
+
+## useLoaderData options
+
+The `useLoaderData` hook accepts an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- The route id of the closest parent match
+- Optional, but recommended for full type safety.
+- If `opts.strict` is `true`, TypeScript will warn for this option if it is not provided.
+- If `opts.strict` is `false`, TypeScript will provide loosened types for the returned loader data.
+
+### `opts.strict` option
+
+- Type: `boolean`
+- Optional - `default: true`
+- If `false`, the `opts.from` option will be ignored and types will be loosened to reflect the shared types of all possible loader data.
+
+### `opts.select` option
+
+- Optional
+- `(loaderData: TLoaderData) => TSelected`
+- If supplied, this function will be called with the loader data and the return value will be returned from `useLoaderData`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useLoaderData returns
+
+- If a `select` function is provided, the return value of the `select` function.
+- If no `select` function is provided, the loader data or a loosened version of the loader data if `opts.strict` is `false`.
+
+## Examples
+
+```tsx
+import { useLoaderData } from '@tanstack/react-router'
+
+function Component() {
+  const loaderData = useLoaderData({ from: '/posts/$postId' })
+  //     ^? { postId: string, body: string, ... }
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useLoaderDepsHook.md b/mintlify/router/api/router/useLoaderDepsHook.md
new file mode 100644
index 000000000..4ffbce670
--- /dev/null
+++ b/mintlify/router/api/router/useLoaderDepsHook.md
@@ -0,0 +1,58 @@
+---
+id: useLoaderDepsHook
+title: useLoaderDeps hook
+---
+
+The `useLoaderDeps` hook is a hook that returns an object with the dependencies that are used to trigger the `loader` for a given route.
+
+## useLoaderDepsHook options
+
+The `useLoaderDepsHook` hook accepts an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- Required
+- The RouteID or path to get the loader dependencies from.
+
+### `opts.select` option
+
+- Type: `(deps: TLoaderDeps) => TSelected`
+- Optional
+- If supplied, this function will be called with the loader dependencies object and the return value will be returned from `useLoaderDeps`.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useLoaderDeps returns
+
+- An object of the loader dependencies or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useLoaderDeps } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/posts/$postId')
+
+function Component() {
+  const deps = useLoaderDeps({ from: '/posts/$postId' })
+
+  // OR
+
+  const routeDeps = routeApi.useLoaderDeps()
+
+  // OR
+
+  const postId = useLoaderDeps({
+    from: '/posts',
+    select: (deps) => deps.view,
+  })
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useLocationHook.md b/mintlify/router/api/router/useLocationHook.md
new file mode 100644
index 000000000..e5f87ec95
--- /dev/null
+++ b/mintlify/router/api/router/useLocationHook.md
@@ -0,0 +1,40 @@
+---
+id: useLocationHook
+title: useLocation hook
+---
+
+The `useLocation` method is a hook that returns the current [`location`](/router/api/router/ParsedLocationType) object. This hook is useful for when you want to perform some side effect whenever the current location changes.
+
+## useLocation options
+
+The `useLocation` hook accepts an optional `options` object.
+
+### `opts.select` option
+
+- Type: `(state: ParsedLocationType) => TSelected`
+- Optional
+- If supplied, this function will be called with the [`location`](/router/api/router/ParsedLocationType) object and the return value will be returned from `useLocation`.
+
+## useLocation returns
+
+- The current [`location`](/router/api/router/ParsedLocationType) object or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useLocation } from '@tanstack/react-router'
+
+function Component() {
+  const location = useLocation()
+  //    ^ ParsedLocation
+
+  // OR
+
+  const pathname = useLocation({
+    select: (location) => location.pathname,
+  })
+  //    ^ string
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useMatchHook.md b/mintlify/router/api/router/useMatchHook.md
new file mode 100644
index 000000000..c75eb49e1
--- /dev/null
+++ b/mintlify/router/api/router/useMatchHook.md
@@ -0,0 +1,93 @@
+---
+id: useMatchHook
+title: useMatch hook
+---
+
+The `useMatch` hook returns a [`RouteMatch`](/router/api/router/RouteMatchType) in the component tree. The raw route match contains all of the information about a route match in the router and also powers many other hooks under the hood like `useParams`, `useLoaderData`, `useRouteContext`, and `useSearch`.
+
+## useMatch options
+
+The `useMatch` hook accepts a single argument, an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- The route id of a match
+- Optional, but recommended for full type safety.
+- If `opts.strict` is `true`, `from` is required and TypeScript will warn for this option if it is not provided.
+- If `opts.strict` is `false`, `from` must not be set and TypeScript will provided loosened types for the returned [`RouteMatch`](/router/api/router/RouteMatchType).
+
+### `opts.strict` option
+
+- Type: `boolean`
+- Optional
+- `default: true`
+- If `false`, the `opts.from` must not be set and types will be loosened to `Partial<RouteMatch>` to reflect the shared types of all matches.
+
+### `opts.select` option
+
+- Optional
+- `(match: RouteMatch) => TSelected`
+- If supplied, this function will be called with the route match and the return value will be returned from `useMatch`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+### `opts.shouldThrow` option
+
+- Type: `boolean`
+- Optional
+- `default: true`
+- If `false`,`useMatch` will not throw an invariant exception in case a match was not found in the currently rendered matches; in this case, it will return `undefined`.
+
+## useMatch returns
+
+- If a `select` function is provided, the return value of the `select` function.
+- If no `select` function is provided, the [`RouteMatch`](/router/api/router/RouteMatchType) object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`.
+
+## Examples
+
+### Accessing a route match
+
+```tsx
+import { useMatch } from '@tanstack/react-router'
+
+function Component() {
+  const match = useMatch({ from: '/posts/$postId' })
+  //     ^? strict match for RouteMatch
+  // ...
+}
+```
+
+### Accessing the root route's match
+
+```tsx
+import {
+  useMatch,
+  rootRouteId, // <<<< use this token!
+} from '@tanstack/react-router'
+
+function Component() {
+  const match = useMatch({ from: rootRouteId })
+  //     ^? strict match for RouteMatch
+  // ...
+}
+```
+
+### Checking if a specific route is currently rendered
+
+```tsx
+import { useMatch } from '@tanstack/react-router'
+
+function Component() {
+  const match = useMatch({ from: '/posts', shouldThrow: false })
+  //     ^? RouteMatch | undefined
+  if (match !== undefined) {
+    // ...
+  }
+}
+```
diff --git a/mintlify/router/api/router/useMatchRouteHook.md b/mintlify/router/api/router/useMatchRouteHook.md
new file mode 100644
index 000000000..630b4d907
--- /dev/null
+++ b/mintlify/router/api/router/useMatchRouteHook.md
@@ -0,0 +1,116 @@
+---
+id: useMatchRouteHook
+title: useMatchRoute hook
+---
+
+The `useMatchRoute` hook is a hook that returns a `matchRoute` function that can be used to match a route against either the current or pending location.
+
+## useMatchRoute returns
+
+- A `matchRoute` function that can be used to match a route against either the current or pending location.
+
+## matchRoute function
+
+The `matchRoute` function is a function that can be used to match a route against either the current or pending location.
+
+### matchRoute function options
+
+The `matchRoute` function accepts a single argument, an `options` object.
+
+- Type: [`UseMatchRouteOptions`](/router/api/router/UseMatchRouteOptionsType)
+
+### matchRoute function returns
+
+- The matched route's params or `false` if no route was matched
+
+## Examples
+
+```tsx
+import { useMatchRoute } from '@tanstack/react-router'
+
+// Current location: /posts/123
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({ to: '/posts/$postId' })
+  //    ^ { postId: '123' }
+}
+
+// Current location: /posts/123
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({ to: '/posts' })
+  //    ^ false
+}
+
+// Current location: /posts/123
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({ to: '/posts', fuzzy: true })
+  //    ^ {}
+}
+
+// Current location: /posts
+// Pending location: /posts/123
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({ to: '/posts/$postId', pending: true })
+  //    ^ { postId: '123' }
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({ to: '/posts/$postId/foo/$fooId' })
+  //    ^ { postId: '123', fooId: '456' }
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({
+    to: '/posts/$postId/foo/$fooId',
+    params: { postId: '123' },
+  })
+  //    ^ { postId: '123', fooId: '456' }
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({
+    to: '/posts/$postId/foo/$fooId',
+    params: { postId: '789' },
+  })
+  //    ^ false
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({
+    to: '/posts/$postId/foo/$fooId',
+    params: { fooId: '456' },
+  })
+  //    ^ { postId: '123', fooId: '456' }
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({
+    to: '/posts/$postId/foo/$fooId',
+    params: { postId: '123', fooId: '456' },
+  })
+  //    ^ { postId: '123', fooId: '456' }
+}
+
+// Current location: /posts/123/foo/456
+function Component() {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute({
+    to: '/posts/$postId/foo/$fooId',
+    params: { postId: '789', fooId: '456' },
+  })
+  //    ^ false
+}
+```
diff --git a/mintlify/router/api/router/useMatchesHook.md b/mintlify/router/api/router/useMatchesHook.md
new file mode 100644
index 000000000..794592ebb
--- /dev/null
+++ b/mintlify/router/api/router/useMatchesHook.md
@@ -0,0 +1,43 @@
+---
+id: useMatchesHook
+title: useMatches hook
+---
+
+The `useMatches` hook returns all of the [`RouteMatch`](/router/api/router/RouteMatchType) objects from the router **regardless of its callers position in the React component tree**.
+
+> [!TIP]
+> If you only want the parent or child matches, then you can use the [`useParentMatches`](/router/api/router/useParentMatchesHook) or the [`useChildMatches`](/router/api/router/useChildMatchesHook) based on the selection you need.
+
+## useMatches options
+
+The `useMatches` hook accepts a single _optional_ argument, an `options` object.
+
+### `opts.select` option
+
+- Optional
+- `(matches: RouteMatch[]) => TSelected`
+- If supplied, this function will be called with the route matches and the return value will be returned from `useMatches`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useMatches returns
+
+- If a `select` function is provided, the return value of the `select` function.
+- If no `select` function is provided, an array of [`RouteMatch`](/router/api/router/RouteMatchType) objects.
+
+## Examples
+
+```tsx
+import { useMatches } from '@tanstack/react-router'
+
+function Component() {
+  const matches = useMatches()
+  //     ^? [RouteMatch, RouteMatch, ...]
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useNavigateHook.md b/mintlify/router/api/router/useNavigateHook.md
new file mode 100644
index 000000000..1b93296f5
--- /dev/null
+++ b/mintlify/router/api/router/useNavigateHook.md
@@ -0,0 +1,93 @@
+---
+id: useNavigateHook
+title: useNavigate hook
+---
+
+The `useNavigate` hook is a hook that returns a `navigate` function that can be used to navigate to a new location. This includes changes to the pathname, search params, hash, and location state.
+
+## useNavigate options
+
+The `useNavigate` hook accepts a single argument, an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- Optional
+- Description: The location to navigate from. This is useful when you want to navigate to a new location from a specific location, rather than the current location.
+
+## useNavigate returns
+
+- A `navigate` function that can be used to navigate to a new location.
+
+## navigate function
+
+The `navigate` function is a function that can be used to navigate to a new location.
+
+### navigate function options
+
+The `navigate` function accepts a single argument, an `options` object.
+
+- Type: [`NavigateOptions`](/router/api/router/NavigateOptionsType)
+
+### navigate function returns
+
+- A `Promise` that resolves when the navigation is complete
+
+## Examples
+
+```tsx
+import { useNavigate } from '@tanstack/react-router'
+
+function PostsPage() {
+  const navigate = useNavigate({ from: '/posts' })
+  const handleClick = () => navigate({ search: { page: 2 } })
+  // ...
+}
+
+function Component() {
+  const navigate = useNavigate()
+  return (
+    <div>
+      <button
+        onClick={() =>
+          navigate({
+            to: '/posts',
+          })
+        }
+      >
+        Posts
+      </button>
+      <button
+        onClick={() =>
+          navigate({
+            to: '/posts',
+            search: { page: 2 },
+          })
+        }
+      >
+        Posts (Page 2)
+      </button>
+      <button
+        onClick={() =>
+          navigate({
+            to: '/posts',
+            hash: 'my-hash',
+          })
+        }
+      >
+        Posts (Hash)
+      </button>
+      <button
+        onClick={() =>
+          navigate({
+            to: '/posts',
+            state: { from: 'home' },
+          })
+        }
+      >
+        Posts (State)
+      </button>
+    </div>
+  )
+}
+```
diff --git a/mintlify/router/api/router/useParamsHook.md b/mintlify/router/api/router/useParamsHook.md
new file mode 100644
index 000000000..907f85984
--- /dev/null
+++ b/mintlify/router/api/router/useParamsHook.md
@@ -0,0 +1,69 @@
+---
+id: useParamsHook
+title: useParams hook
+---
+
+The `useParams` method returns all of the path parameters that were parsed for the closest match and all of its parent matches.
+
+## useParams options
+
+The `useParams` hook accepts an optional `options` object.
+
+### `opts.strict` option
+
+- Type: `boolean`
+- Optional - `default: true`
+- If `false`, the `opts.from` option will be ignored and types will be loosened to `Partial<AllParams>` to reflect the shared types of all params.
+
+### `opts.shouldThrow` option
+
+- Type: `boolean`
+- Optional
+- `default: true`
+- If `false`,`useParams` will not throw an invariant exception in case a match was not found in the currently rendered matches; in this case, it will return `undefined`.
+
+### `opts.select` option
+
+- Optional
+- `(params: AllParams) => TSelected`
+- If supplied, this function will be called with the params object and the return value will be returned from `useParams`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useParams returns
+
+- An object of the match's and parent match path params or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useParams } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/posts/$postId')
+
+function Component() {
+  const params = useParams({ from: '/posts/$postId' })
+
+  // OR
+
+  const routeParams = routeApi.useParams()
+
+  // OR
+
+  const postId = useParams({
+    from: '/posts/$postId',
+    select: (params) => params.postId,
+  })
+
+  // OR
+
+  const looseParams = useParams({ strict: false })
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useParentMatchesHook.md b/mintlify/router/api/router/useParentMatchesHook.md
new file mode 100644
index 000000000..a010d2838
--- /dev/null
+++ b/mintlify/router/api/router/useParentMatchesHook.md
@@ -0,0 +1,42 @@
+---
+id: useParentMatchesHook
+title: useParentMatches hook
+---
+
+The `useParentMatches` hook returns all of the parent [`RouteMatch`](/router/api/router/RouteMatchType) objects from the root down to the immediate parent of the current match in context. **It does not include the current match, which can be obtained using the `useMatch` hook.**
+
+> [!IMPORTANT]
+> If the router has pending matches and they are showing their pending component fallbacks, pending matches are used instead of active matches.
+
+## useParentMatches options
+
+The `useParentMatches` hook accepts an optional `options` object.
+
+### `opts.select` option
+
+- Optional
+- `(matches: RouteMatch[]) => TSelected`
+- If supplied, this function will be called with the route matches and the return value will be returned from `useParentMatches`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useParentMatches returns
+
+- If a `select` function is provided, the return value of the `select` function.
+- If no `select` function is provided, an array of [`RouteMatch`](/router/api/router/RouteMatchType) objects.
+
+## Examples
+
+```tsx
+import { useParentMatches } from '@tanstack/react-router'
+
+function Component() {
+  const parentMatches = useParentMatches()
+  //    ^ [RouteMatch, RouteMatch, ...]
+}
+```
diff --git a/mintlify/router/api/router/useRouteContextHook.md b/mintlify/router/api/router/useRouteContextHook.md
new file mode 100644
index 000000000..bf2651d63
--- /dev/null
+++ b/mintlify/router/api/router/useRouteContextHook.md
@@ -0,0 +1,47 @@
+---
+id: useRouteContextHook
+title: useRouteContext hook
+---
+
+The `useRouteContext` method is a hook that returns the current context for the current route. This hook is useful for accessing the current route context in a component.
+
+## useRouteContext options
+
+The `useRouteContext` hook accepts an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- Required
+- The RouteID to match the route context from.
+
+### `opts.select` option
+
+- Type: `(context: RouteContext) => TSelected`
+- Optional
+- If supplied, this function will be called with the route context object and the return value will be returned from `useRouteContext`.
+
+## useRouteContext returns
+
+- The current context for the current route or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useRouteContext } from '@tanstack/react-router'
+
+function Component() {
+  const context = useRouteContext({ from: '/posts/$postId' })
+  //    ^ RouteContext
+
+  // OR
+
+  const selected = useRouteContext({
+    from: '/posts/$postId',
+    select: (context) => context.postId,
+  })
+  //    ^ string
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useRouterHook.md b/mintlify/router/api/router/useRouterHook.md
new file mode 100644
index 000000000..8ff3c46b4
--- /dev/null
+++ b/mintlify/router/api/router/useRouterHook.md
@@ -0,0 +1,25 @@
+---
+id: useRouterHook
+title: useRouter hook
+---
+
+The `useRouter` method is a hook that returns the current instance of [`Router`](/router/api/router/RouterType) from context. This hook is useful for accessing the router instance in a component.
+
+## useRouter returns
+
+- The current [`Router`](/router/api/router/RouterType) instance.
+
+> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](/router/api/router/useRouterStateHook) hook.**
+
+## Examples
+
+```tsx
+import { useRouter } from '@tanstack/react-router'
+
+function Component() {
+  const router = useRouter()
+  //    ^ Router
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useRouterStateHook.md b/mintlify/router/api/router/useRouterStateHook.md
new file mode 100644
index 000000000..5be717995
--- /dev/null
+++ b/mintlify/router/api/router/useRouterStateHook.md
@@ -0,0 +1,50 @@
+---
+id: useRouterStateHook
+title: useRouterState hook
+---
+
+The `useRouterState` method is a hook that returns the current internal state of the router. This hook is useful for accessing the current state of the router in a component.
+
+> [!TIP]
+> If you want to access the current location or the current matches, you should try out the [`useLocation`](/router/api/router/useLocationHook) and [`useMatches`](/router/api/router/useMatchesHook) hooks first. These hooks are designed to be more performant, more ergonomic and easier to use than accessing the router state directly.
+
+## useRouterState options
+
+The `useRouterState` hook accepts an optional `options` object.
+
+### `opts.select` option
+
+- Type: `(state: RouterState) => TSelected`
+- Optional
+- If supplied, this function will be called with the [`RouterState`](/router/api/router/RouterStateType) object and the return value will be returned from `useRouterState`.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+## useRouterState returns
+
+- The current [`RouterState`](/router/api/router/RouterStateType) object or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useRouterState } from '@tanstack/react-router'
+
+function Component() {
+  const state = useRouterState()
+  //    ^ RouterState
+
+  // OR
+
+  const selected = useRouterState({
+    select: (state) => state.location,
+  })
+  //    ^ ParsedLocation
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/useSearchHook.md b/mintlify/router/api/router/useSearchHook.md
new file mode 100644
index 000000000..347b86ccb
--- /dev/null
+++ b/mintlify/router/api/router/useSearchHook.md
@@ -0,0 +1,73 @@
+---
+id: useSearchHook
+title: useSearch hook
+---
+
+The `useSearch` method is a hook that returns the current search query parameters as an object for the current location. This hook is useful for accessing the current search string and query parameters in a component.
+
+## useSearch options
+
+The `useSearch` hook accepts an `options` object.
+
+### `opts.from` option
+
+- Type: `string`
+- Required
+- The RouteID to match the search query parameters from.
+
+### `opts.shouldThrow` option
+
+- Type: `boolean`
+- Optional
+- `default: true`
+- If `false`,`useSearch` will not throw an invariant exception in case a match was not found in the currently rendered matches; in this case, it will return `undefined`.
+
+### `opts.select` option
+
+- Type: `(search: SelectedSearchSchema) => TSelected`
+- Optional
+- If supplied, this function will be called with the search object and the return value will be returned from `useSearch`.
+
+### `opts.structuralSharing` option
+
+- Type: `boolean`
+- Optional
+- Configures whether structural sharing is enabled for the value returned by `select`.
+- See the [Render Optimizations guide](/router/guide/render-optimizations) for more information.
+
+### `opts.strict` option
+
+- Type: `boolean`
+- Optional - `default: true`
+- If `false`, the `opts.from` option will be ignored and types will be loosened to `Partial<FullSearchSchema>` to reflect the shared types of all search query parameters.
+
+## useSearch returns
+
+- If `opts.from` is provided, an object of the search query parameters for the current location or `TSelected` if a `select` function is provided.
+- If `opts.strict` is `false`, an object of the search query parameters for the current location or `TSelected` if a `select` function is provided.
+
+## Examples
+
+```tsx
+import { useSearch } from '@tanstack/react-router'
+
+function Component() {
+  const search = useSearch({ from: '/posts/$postId' })
+  //    ^ FullSearchSchema
+
+  // OR
+
+  const selected = useSearch({
+    from: '/posts/$postId',
+    select: (search) => search.postView,
+  })
+  //    ^ string
+
+  // OR
+
+  const looseSearch = useSearch({ strict: false })
+  //    ^ Partial<FullSearchSchema>
+
+  // ...
+}
+```
diff --git a/mintlify/router/api/router/valibotValidator.md b/mintlify/router/api/router/valibotValidator.md
new file mode 100644
index 000000000..d77b14c3b
--- /dev/null
+++ b/mintlify/router/api/router/valibotValidator.md
@@ -0,0 +1,9 @@
+---
+title: "ValibotValidator"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/router/latest/docs/api/router/valibotValidator)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/router/api/router/zodValidator.md b/mintlify/router/api/router/zodValidator.md
new file mode 100644
index 000000000..7e93e8d0e
--- /dev/null
+++ b/mintlify/router/api/router/zodValidator.md
@@ -0,0 +1,9 @@
+---
+title: "ZodValidator"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/router/latest/docs/api/router/zodValidator)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/router/assets/reading-writing-file-devjokes-1.png b/mintlify/router/assets/reading-writing-file-devjokes-1.png
new file mode 100644
index 000000000..59e14aa6c
Binary files /dev/null and b/mintlify/router/assets/reading-writing-file-devjokes-1.png differ
diff --git a/mintlify/router/assets/reading-writing-file-devjokes-2.png b/mintlify/router/assets/reading-writing-file-devjokes-2.png
new file mode 100644
index 000000000..502361c11
Binary files /dev/null and b/mintlify/router/assets/reading-writing-file-devjokes-2.png differ
diff --git a/mintlify/router/assets/reading-writing-file-setup.png b/mintlify/router/assets/reading-writing-file-setup.png
new file mode 100644
index 000000000..e7ea340b3
Binary files /dev/null and b/mintlify/router/assets/reading-writing-file-setup.png differ
diff --git a/mintlify/router/assets/search-serialization-deserialization-idempotency.jpg b/mintlify/router/assets/search-serialization-deserialization-idempotency.jpg
new file mode 100644
index 000000000..fecb54516
Binary files /dev/null and b/mintlify/router/assets/search-serialization-deserialization-idempotency.jpg differ
diff --git a/mintlify/router/comparison.md b/mintlify/router/comparison.md
new file mode 100644
index 000000000..afa30974a
--- /dev/null
+++ b/mintlify/router/comparison.md
@@ -0,0 +1,110 @@
+---
+title: Comparison
+toc: false
+---
+
+Choosing a routing solution? This side‑by‑side comparison highlights key features, trade‑offs, and common use cases to help you quickly evaluate how each option fits your project’s needs.
+
+While we aim to provide an accurate and fair comparison, please note that this table may not capture every nuance or recent update of each library. We recommend reviewing the official documentation and trying out each solution to make the most informed decision for your specific use case.
+
+If you find any discrepancies or have suggestions for improvement, please don't hesitate to contribute via the "Edit this page on GitHub" link at the bottom of this page or open an issue in the [TanStack Router GitHub repository](https://github.com/TanStack/router).
+
+Feature/Capability Key:
+
+- ✅ 1st-class, built-in, and ready to use with no added configuration or code
+- 🟡 Partial Support (on a scale of 5)
+- 🟠 Supported via addon/community package
+- 🔶 Possible, but requires custom code/implementation/casting
+- 🛑 Not officially supported
+
+
+
+# React
+
+## Comparison | TanStack Router & TanStack Start vs Next.js vs React Router / Remix
+
+|                                                | TanStack Router / Start                          | React Router DOM [_(Website)_][router]                | Next.JS [_(Website)_][nextjs]                         |
+| ---------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | ----------------------------------------------------- |
+| Github Repo / Stars                            | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-router]][gh-router]                        | [![][stars-nextjs]][gh-nextjs]                        |
+| Bundle Size                                    | [![][bp-tanstack-router]][bpl-tanstack-router]   | [![][bp-router]][bpl-router]                          | ❓                                                    |
+| History, Memory & Hash Routers                 | ✅                                               | ✅                                                    | 🛑                                                    |
+| Nested / Layout Routes                         | ✅                                               | ✅                                                    | 🟡                                                    |
+| Suspense-like Route Transitions                | ✅                                               | ✅                                                    | ✅                                                    |
+| Typesafe Routes                                | ✅                                               | 🟡 (1/5)                                              | 🟡                                                    |
+| Code-based Routes                              | ✅                                               | ✅                                                    | 🛑                                                    |
+| File-based Routes                              | ✅                                               | ✅                                                    | ✅                                                    |
+| Virtual/Programmatic File-based Routes         | ✅                                               | ✅                                                    | 🛑                                                    |
+| Router Loaders                                 | ✅                                               | ✅                                                    | ✅                                                    |
+| SWR Loader Caching                             | ✅                                               | 🛑                                                    | ✅                                                    |
+| Route Prefetching                              | ✅                                               | ✅                                                    | ✅                                                    |
+| Auto Route Prefetching                         | ✅                                               | ✅                                                    | ✅                                                    |
+| Route Prefetching Delay                        | ✅                                               | 🔶                                                    | 🛑                                                    |
+| Path Params                                    | ✅                                               | ✅                                                    | ✅                                                    |
+| Typesafe Path Params                           | ✅                                               | ✅                                                    | 🛑                                                    |
+| Typesafe Route Context                         | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Path Param Validation                          | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Custom Path Param Parsing/Serialization        | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Ranked Routes                                  | ✅                                               | ✅                                                    | ✅                                                    |
+| Active Link Customization                      | ✅                                               | ✅                                                    | ✅                                                    |
+| Optimistic UI                                  | ✅                                               | ✅                                                    | 🔶                                                    |
+| Typesafe Absolute + Relative Navigation        | ✅                                               | 🟡 (1/5 via `buildHref` util)                         | 🟠 (IDE plugin)                                       |
+| Route Mount/Transition/Unmount Events          | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Devtools                                       | ✅                                               | 🟠                                                    | 🛑                                                    |
+| Basic Search Params                            | ✅                                               | ✅                                                    | ✅                                                    |
+| Search Param Hooks                             | ✅                                               | ✅                                                    | ✅                                                    |
+| `<Link/>`/`useNavigate` Search Param API       | ✅                                               | 🟡 (search-string only via the `to`/`search` options) | 🟡 (search-string only via the `to`/`search` options) |
+| JSON Search Params                             | ✅                                               | 🔶                                                    | 🔶                                                    |
+| TypeSafe Search Params                         | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Search Param Schema Validation                 | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Search Param Immutability + Structural Sharing | ✅                                               | 🔶                                                    | 🛑                                                    |
+| Custom Search Param parsing/serialization      | ✅                                               | 🔶                                                    | 🛑                                                    |
+| Search Param Middleware                        | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Suspense Route Elements                        | ✅                                               | ✅                                                    | ✅                                                    |
+| Route Error Elements                           | ✅                                               | ✅                                                    | ✅                                                    |
+| Route Pending Elements                         | ✅                                               | ✅                                                    | ✅                                                    |
+| `<Block>`/`useBlocker`                         | ✅                                               | 🔶 (no hard reloads or cross-origin navigation)       | 🛑                                                    |
+| Deferred Primitives                            | ✅                                               | ✅                                                    | ✅                                                    |
+| Navigation Scroll Restoration                  | ✅                                               | ✅                                                    | ❓                                                    |
+| ElementScroll Restoration                      | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Async Scroll Restoration                       | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Router Invalidation                            | ✅                                               | ✅                                                    | ✅                                                    |
+| Runtime Route Manipulation (Fog of War)        | 🛑                                               | ✅                                                    | ✅                                                    |
+| Parallel Routes                                | 🛑                                               | 🛑                                                    | ✅                                                    |
+| --                                             | --                                               | --                                                    | --                                                    |
+| **Full Stack**                                 | --                                               | --                                                    | --                                                    |
+| SSR                                            | ✅                                               | ✅                                                    | ✅                                                    |
+| Streaming SSR                                  | ✅                                               | ✅                                                    | ✅                                                    |
+| Generic RPCs                                   | ✅                                               | 🛑                                                    | 🛑                                                    |
+| Generic RPC Middleware                         | ✅                                               | 🛑                                                    | 🛑                                                    |
+| React Server Functions                         | ✅                                               | 🛑                                                    | ✅                                                    |
+| React Server Function Middleware               | ✅                                               | 🛑                                                    | 🛑                                                    |
+| API Routes                                     | ✅                                               | ✅                                                    | ✅                                                    |
+| API Middleware                                 | ✅                                               | ✅                                                    | ✅                                                    |
+| React Server Components                        | 🟡 (Experimental)                                | 🟡 (Experimental)                                     | ✅                                                    |
+| `<Form>` API                                   | 🛑                                               | ✅                                                    | ✅                                                    |
+
+[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router
+[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router
+[gh-tanstack-router]: https://github.com/tanstack/router
+[stars-tanstack-router]: https://img.shields.io/github/stars/tanstack/router?label=%F0%9F%8C%9F
+[_]: _
+[router]: https://github.com/remix-run/react-router
+[bp-router]: https://badgen.net/bundlephobia/minzip/react-router
+[gh-router]: https://github.com/remix-run/react-router
+[stars-router]: https://img.shields.io/github/stars/remix-run/react-router?label=%F0%9F%8C%9F
+[bpl-router]: https://bundlephobia.com/result?p=react-router
+[bpl-history]: https://bundlephobia.com/result?p=history
+[_]: _
+[nextjs]: https://nextjs.org/docs/routing/introduction
+[bp-nextjs]: https://badgen.net/bundlephobia/minzip/next.js?label=All
+[gh-nextjs]: https://github.com/vercel/next.js
+[stars-nextjs]: https://img.shields.io/github/stars/vercel/next.js?label=%F0%9F%8C%9F
+[bpl-nextjs]: https://bundlephobia.com/result?p=next
+
+# Solid
+
+---
+
+We don't have a comparison table for Solid just yet. If you're interested in helping us create one, please reach out in the [TanStack Discord](https://tanstack.com/discord) or open a PR with your proposed comparison!
+
+
diff --git a/mintlify/router/decisions-on-dx.md b/mintlify/router/decisions-on-dx.md
new file mode 100644
index 000000000..7c47b9a63
--- /dev/null
+++ b/mintlify/router/decisions-on-dx.md
@@ -0,0 +1,240 @@
+---
+title: Decisions on Developer Experience
+---
+
+When people first start using TanStack Router, they often have a lot of questions that revolve around the following themes:
+
+> Why do I have to do things this way?
+
+> Why is it done this way? and not that way?
+
+> I'm used to doing it this way, why should I change?
+
+And they are all valid questions. For the most part, people are used to using routing libraries that are very similar to each other. They all have a similar API, similar concepts, and similar ways of doing things.
+
+But TanStack Router is different. It's not your average routing library. It's not your average state management library. It's not your average anything.
+
+> [!TIP]
+> The examples in this guide use React for components and code snippets, but the same principles apply to Solid. The only difference is in the syntax and API of the framework, but the underlying concepts and design decisions are the same.
+
+## TanStack Router's origin story
+
+It's important to remember that TanStack Router's origins stem from [Nozzle.io](https://nozzle.io?utm_source=tanstack)'s need for a client-side routing solution that offered a first-in-class _URL Search Parameters_ experience without compromising on the **_type-safety_** that was required to power its complex dashboards.
+
+And so, from TanStack Router's very inception, every facet of its design was meticulously thought out to ensure that its type-safety and developer experience were second to none.
+
+## How does TanStack Router achieve this?
+
+> TypeScript! TypeScript! TypeScript!
+
+Every aspect of TanStack Router is designed to be as type-safe as possible, and this is achieved by leveraging TypeScript's type system to its fullest extent. This involves using some very advanced and complex types, type inference, and other features to ensure that the developer experience is as smooth as possible.
+
+But to achieve this, we had to make some decisions that deviate from the norms in the routing world.
+
+1. [**Route configuration boilerplate?**](#why-is-the-routers-configuration-done-this-way): You have to define your routes in a way that allows TypeScript to infer the types of your routes as much as possible.
+2. [**TypeScript module declaration for the router?**](#declaring-the-router-instance-for-type-inference): You have to pass the `Router` instance to the rest of your application using TypeScript's module declaration.
+3. [**Why push for file-based routing over code-based?**](#why-is-file-based-routing-the-preferred-way-to-define-routes): We push for file-based routing as the preferred way to define your routes.
+
+> TLDR; All the design decisions in the developer experience of using TanStack Router are made so that you can have a best-in-class type-safety experience without compromising on the control, flexibility, and maintainability of your route configurations.
+
+## Why is the Router's configuration done this way?
+
+When you want to leverage the TypeScript's inference features to its fullest, you'll quickly realize that _Generics_ are your best friend. And so, TanStack Router uses Generics everywhere to ensure that the types of your routes are inferred as much as possible.
+
+This means that you have to define your routes in a way that allows TypeScript to infer the types of your routes as much as possible.
+
+> Can I use JSX to define my routes?
+
+Using JSX for defining your routes is **out of the question**, as TypeScript will not be able to infer the route configuration types of your router.
+
+```tsx
+// ⛔️ This is not possible
+function App() {
+  return (
+    <Router>
+      <Route path="/posts" component={PostsPage} />
+      <Route path="/posts/$postId" component={PostIdPage} />
+      {/* ... */}
+    </Router>
+    // ^? TypeScript cannot infer the routes in this configuration
+  )
+}
+```
+
+And since this would mean that you'd have to manually type the `to` prop of the `<Link>` component and wouldn't catch any errors until runtime, it's not a viable option.
+
+> Maybe I could define my routes as a tree of nested objects?
+
+```tsx
+// ⛔️ This file will just keep growing and growing...
+const router = createRouter({
+  routes: {
+    posts: {
+      component: PostsPage, // /posts
+      children: {
+        $postId: {
+          component: PostIdPage, // /posts/$postId
+        },
+      },
+    },
+    // ...
+  },
+})
+```
+
+At first glance, this seems like a good idea. It's easy to visualize the entire route hierarchy in one go. But this approach has a couple of big downsides that make it not ideal for large applications:
+
+- **It's not very scalable**: As your application grows, the tree will grow and become harder to manage. And since it's all defined in one file, it can become very hard to maintain.
+- **It's not great for code-splitting**: You'd have to manually code-split each component and then pass it into the `component` property of the route, further complicating the route configuration with an ever-growing route configuration file.
+
+This only gets worse as you begin to use more features of the router, such as nested context, loaders, search param validation, etc.
+
+> So, what's the best way to define my routes?
+
+What we found to be the best way to define your routes is to abstract the definition of the route configuration outside of the route-tree. Then stitch together your route configurations into a single cohesive route-tree that is then passed into the `createRouter` function.
+
+You can read more about [code-based routing](/router/routing/code-based-routing) to see how to define your routes in this way.
+
+> [!TIP]
+> Finding Code-based routing to be a bit too cumbersome? See why [file-based routing](#why-is-file-based-routing-the-preferred-way-to-define-routes) is the preferred way to define your routes.
+
+## Declaring the Router instance for type inference
+
+> Why do I have to declare the `Router`?
+
+> This declaration stuff is way too complicated for me...
+
+Once you've constructed your routes into a tree and passed it into your Router instance (using `createRouter`) with all the generics working correctly, you then need to somehow pass this information to the rest of your application.
+
+There were two approaches we considered for this:
+
+1. **Imports**: You could import the `Router` instance from the file where you created it and use it directly in your components.
+
+```tsx
+import { router } from '@/src/app'
+export const PostsIdLink = () => {
+  return (
+    <Link<typeof router> to="/posts/$postId" params={{ postId: '123' }}>
+      Go to post 123
+    </Link>
+  )
+}
+```
+
+A downside to this approach is that you'd have to import the entire `Router` instance into every file where you want to use it. This can lead to increased bundle sizes and can be cumbersome to manage, and only get worse as your application grows and you use more features of the router.
+
+2. **Module declaration**: You can use TypeScript's module declaration to declare the `Router` instance as a module that can be used for type inference anywhere in your application without having to import it.
+
+You'll do this once in your application.
+
+```tsx
+// src/app.tsx
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
+
+And then you can benefit from its auto-complete anywhere in your app without having to import it.
+
+```tsx
+export const PostsIdLink = () => {
+  return (
+    <Link
+      to="/posts/$postId"
+      // ^? TypeScript will auto-complete this for you
+      params={{ postId: '123' }} // and this too!
+    >
+      Go to post 123
+    </Link>
+  )
+}
+```
+
+We went with **module declaration**, as it is what we found to be the most scalable and maintainable approach with the least amount of overhead and boilerplate.
+
+## Why is file-based routing the preferred way to define routes?
+
+> Why are the docs pushing for file-based routing?
+
+> I'm used to defining my routes in a single file, why should I change?
+
+Something you'll notice (quite soon) in the TanStack Router documentation is that we push for **file-based routing** as the preferred method for defining your routes. This is because we've found that file-based routing is the most scalable and maintainable way to define your routes.
+
+> [!TIP]
+> Before you continue, it's important you have a good understanding of [code-based routing](/router/routing/code-based-routing) and [file-based routing](/router/routing/file-based-routing).
+
+As mentioned in the beginning, TanStack Router was designed for complex applications that require a high degree of type-safety and maintainability. And to achieve this, the configuration of the router has been done in a precise way that allows TypeScript to infer the types of your routes as much as possible.
+
+A key difference in the set-up of a _basic_ application with TanStack Router, is that your route configurations require a function to be provided to `getParentRoute`, that returns the parent route of the current route.
+
+```tsx
+import { createRoute } from '@tanstack/react-router'
+import { postsRoute } from './postsRoute'
+
+export const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+```
+
+At this stage, this is done so the definition of `postsIndexRoute` can be aware of its location in the route tree and so that it can correctly infer the types of the `context`, `path params`, `search params` returned by the parent route. Incorrectly defining the `getParentRoute` function means that the properties of the parent route will not be correctly inferred by the child route.
+
+As such, this is a critical part of the route configuration and a point of failure if not done correctly.
+
+But this is only one part of setting up a basic application. TanStack Router requires all the routes (including the root route) to be stitched into a **_route-tree_** so that it may be passed into the `createRouter` function before declaring the `Router` instance on the module for type inference. This is another critical part of the route configuration and a point of failure if not done correctly.
+
+> 🤯 If this route-tree were in its own file for an application with ~40-50 routes, it can easily grow up to 700+ lines.
+
+```tsx
+const routeTree = rootRoute.addChildren([
+  postsRoute.addChildren([postsIndexRoute, postsIdRoute]),
+])
+```
+
+This complexity only increases as you begin to use more features of the router, such as nested context, loaders, search param validation, etc. As such, it no longer becomes feasible to define your routes in a single file. And so, users end up building their own _semi consistent_ way of defining their routes across multiple files. This can lead to inconsistencies and errors in the route configuration.
+
+Finally, comes the issue of code-splitting. As your application grows, you'll want to code-split your components to reduce the initial bundle size of your application. This can be a bit of a headache to manage when you're defining your routes in a single file or even across multiple files.
+
+```tsx
+import { createRoute, lazyRouteComponent } from '@tanstack/react-router'
+import { postsRoute } from './postsRoute'
+
+export const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+  component: lazyRouteComponent(() => import('../page-components/posts/index')),
+})
+```
+
+All of this boilerplate, no matter how essential for providing a best-in-class type-inference experience, can be a bit overwhelming and can lead to inconsistencies and errors in the route configuration.
+
+... and this example configuration is just for rendering a single codes-split route. Imagine having to do this for 40-50 routes. Now remember that you still haven't touched the `context`, `loaders`, `search param validation`, and other features of the router 🤕.
+
+> So, why's file-based routing the preferred way?
+
+TanStack Router's file-based routing is designed to solve all of these issues. It allows you to define your routes in a predictable way that is easy to manage and maintain, and is scalable as your application grows.
+
+The file-based routing approach is powered by the TanStack Router Bundler Plugin. It performs 3 essential tasks that solve the pain points in route configuration when using code-based routing:
+
+1. **Route configuration boilerplate**: It generates the boilerplate for your route configurations.
+2. **Route tree stitching**: It stitches together your route configurations into a single cohesive route-tree. Also in the background, it correctly updates the route configurations to define the `getParentRoute` function match the routes with their parent routes.
+3. **Code-splitting**: It automatically code-splits your route content components and updates the route configurations with the correct component. Additionally, at runtime, it ensures that the correct component is loaded when the route is visited.
+
+Let's take a look at how the route configuration for the previous example would look like with file-based routing.
+
+```tsx
+// src/routes/posts/index.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/')({
+  component: () => 'Posts index component goes here!!!',
+})
+```
+
+That's it! No need to worry about defining the `getParentRoute` function, stitching together the route-tree, or code-splitting your components. The TanStack Router Bundler Plugin handles all of this for you.
+
+At no point does the TanStack Router Bundler Plugin take away your control over your route configurations. It's designed to be as flexible as possible, allowing you to define your routes in a way that suits your application whilst reducing the boilerplate and complexity of the route configuration.
+
+Check out the guides for [file-based routing](/router/routing/file-based-routing) and [code-splitting](/router/guide/code-splitting) for a more in-depth explanation of how they work in TanStack Router.
diff --git a/mintlify/router/devtools.md b/mintlify/router/devtools.md
new file mode 100644
index 000000000..934d9c523
--- /dev/null
+++ b/mintlify/router/devtools.md
@@ -0,0 +1,324 @@
+---
+title: Devtools
+---
+
+> Link, take this sword... I mean Devtools!... to help you on your way!
+
+Wave your hands in the air and shout hooray because TanStack Router comes with dedicated devtools! 🥳
+
+When you begin your TanStack Router journey, you'll want these devtools by your side. They help visualize all of the inner workings of TanStack Router and will likely save you hours of debugging if you find yourself in a pinch!
+
+## Installation
+
+The devtools are a separate package that you need to install:
+
+
+
+react: @tanstack/react-router-devtools
+solid: @tanstack/solid-router-devtools
+
+
+
+## Import the Devtools
+
+
+
+# React
+
+```tsx
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+```
+
+# Solid
+
+```tsx
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+```
+
+
+
+## Using Devtools in production
+
+The Devtools, if imported as `TanStackRouterDevtools` will not be shown in production. If you want to have devtools in an environment with `process.env.NODE_ENV === 'production'`, use instead `TanStackRouterDevtoolsInProd`, which has all the same options:
+
+
+
+# React
+
+```tsx
+import { TanStackRouterDevtoolsInProd } from '@tanstack/react-router-devtools'
+```
+
+# Solid
+
+```tsx
+import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
+```
+
+
+
+## Using the Devtools in the root route
+
+The easiest way for the devtools to work is to render them inside of your root route (or any other route). This will automatically connect the devtools to the router instance.
+
+
+
+# React
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Outlet } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+
+
+
+
+## Manually passing the Router Instance
+
+If rendering the devtools inside of the `RouterProvider` isn't your cup of tea, a `router` prop for the devtools accepts the same `router` instance you pass to the `Router` component. This makes it possible to place the devtools anywhere on the page, not just inside the provider:
+
+
+
+# React
+
+```tsx
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtools router={router} />
+    </>
+  )
+}
+```
+
+# Solid
+
+```tsx
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtools router={router} />
+    </>
+  )
+}
+```
+
+
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your app as you can. The closer it is to the root of the page, the better it will work!
+
+
+
+# React
+
+```tsx
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtools initialIsOpen={false} />
+    </>
+  )
+}
+```
+
+# Solid
+
+```tsx
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtools initialIsOpen={false} />
+    </>
+  )
+}
+```
+
+
+
+### Devtools Options
+
+- `router: Router`
+  - The router instance to connect to.
+- `initialIsOpen: Boolean`
+  - Set this `true` if you want the devtools to default to being open.
+- `panelProps: PropsObject`
+  - Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.
+- `closeButtonProps: PropsObject`
+  - Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
+- `toggleButtonProps: PropsObject`
+  - Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
+- `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+  - Defaults to `bottom-left`.
+  - The position of the TanStack Router logo to open and close the devtools panel.
+- `shadowDOMTarget?: ShadowRoot`
+  - Specifies a Shadow DOM target for the devtools.
+  - By default, devtool styles are applied to the `<head>` tag of the main document (light DOM). When a `shadowDOMTarget` is provided, styles will be applied within this Shadow DOM instead.
+- `containerElement?: string | any`
+  - Use this to render the devtools inside a different type of container element for ally purposes.
+  - Any string which corresponds to a valid intrinsic JSX element is allowed.
+  - Defaults to 'footer'.
+
+## Fixed Mode
+
+To control the position of the devtools, import the `TanStackRouterDevtoolsPanel`:
+
+
+
+# React
+
+```tsx
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+```
+
+# Solid
+
+```tsx
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+```
+
+
+
+It can then be attached to provided shadow DOM target:
+
+
+
+# React
+
+```tsx
+<TanStackRouterDevtoolsPanel
+  shadowDOMTarget={shadowContainer}
+  router={router}
+/>
+```
+
+# Solid
+
+```tsx
+<TanStackRouterDevtoolsPanel
+  shadowDOMTarget={shadowContainer}
+  router={router}
+/>
+```
+
+
+
+Click [here](/router/framework/react/examples/basic-devtools-panel) to see a live example of this in StackBlitz.
+
+## Embedded Mode
+
+Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
+
+
+
+# React
+
+```tsx
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtoolsPanel
+        router={router}
+        style={styles}
+        className={className}
+      />
+    </>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+
+function App() {
+  return (
+    <>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtoolsPanel
+        router={router}
+        style={styles}
+        class={className}
+      />
+    </>
+  )
+}
+```
+
+
+
+### DevtoolsPanel Options
+
+- `router: Router`
+  - The router instance to connect to.
+
+
+
+# React
+
+- `style?: StyleObject`
+  - The standard React style object used to style a component with inline styles.
+- `className?: string`
+  - The standard React className property used to style a component with classes.
+
+# Solid
+
+- `style?: StyleObject`
+  - The standard Solid style object used to style a component with inline styles.
+- `class?: string`
+  - The standard Solid class property used to style a component with classes.
+
+
+
+- `isOpen?: boolean`
+  - A boolean variable indicating whether the panel is open or closed.
+- `setIsOpen?: (isOpen: boolean) => void`
+  - A function that toggles the open and close state of the panel.
+- `handleDragStart?: (e: any) => void`
+  - Handles the opening and closing the devtools panel.
+- `shadowDOMTarget?: ShadowRoot`
+  - Specifies a Shadow DOM target for the devtools.
+  - By default, devtool styles are applied to the `<head>` tag of the main document (light DOM). When a `shadowDOMTarget` is provided, styles will be applied within this Shadow DOM instead.
diff --git a/mintlify/router/eslint/create-route-property-order.md b/mintlify/router/eslint/create-route-property-order.md
new file mode 100644
index 000000000..98f5842a3
--- /dev/null
+++ b/mintlify/router/eslint/create-route-property-order.md
@@ -0,0 +1,113 @@
+---
+id: create-route-property-order
+title: Ensure correct order of inference sensitive properties for createRoute functions
+---
+
+For the following functions, the property order of the passed in object matters due to type inference:
+
+- `createRoute`
+- `createFileRoute`
+- `createRootRoute`
+- `createRootRouteWithContext`
+
+The correct property order is as follows
+
+- `params`, `validateSearch`
+- `loaderDeps`, `search.middlewares`, `ssr`
+- `context`
+- `beforeLoad`
+- `loader`
+- `onEnter`, `onStay`, `onLeave`, `head`, `scripts`, `headers`, `remountDeps`
+
+All other properties are insensitive to the order as they do not depend on type inference.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+
+
+# React
+
+
+
+```tsx title="src/routes/path.tsx"
+/* eslint "@tanstack/router/create-route-property-order": "warn" */
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/path')({
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
+  },
+  beforeLoad: () => ({ hello: 'world' }),
+})
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/path.tsx"
+/* eslint "@tanstack/router/create-route-property-order": "warn" */
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/path')({
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
+  },
+  beforeLoad: () => ({ hello: 'world' }),
+})
+```
+
+
+
+
+
+Examples of **correct** code for this rule:
+
+
+
+# React
+
+
+
+```tsx title="src/routes/path.tsx"
+/* eslint "@tanstack/router/create-route-property-order": "warn" */
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/path')({
+  beforeLoad: () => ({ hello: 'world' }),
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
+  },
+})
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/path.tsx"
+/* eslint "@tanstack/router/create-route-property-order": "warn" */
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/path')({
+  beforeLoad: () => ({ hello: 'world' }),
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
+  },
+})
+```
+
+
+
+
+
+## Attributes
+
+- [x] ✅ Recommended
+- [x] 🔧 Fixable
diff --git a/mintlify/router/eslint/eslint-plugin-router.md b/mintlify/router/eslint/eslint-plugin-router.md
new file mode 100644
index 000000000..d5563b922
--- /dev/null
+++ b/mintlify/router/eslint/eslint-plugin-router.md
@@ -0,0 +1,130 @@
+---
+id: eslint-plugin-router
+title: ESLint Plugin Router
+---
+
+TanStack Router comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes.
+
+## Installation
+
+The plugin is a separate package that you need to install:
+
+
+
+react: @tanstack/eslint-plugin-router
+solid: @tanstack/eslint-plugin-router
+
+
+
+## Flat Config (`eslint.config.js`)
+
+The release of ESLint 9.0 introduced a new way to configure ESLint using a flat config format. This new format is more flexible and allows you to configure ESLint in a more granular way than the legacy `.eslintrc` format. The TanStack Router ESLint Plugin supports this new format and provides a recommended config that you can use to enable all of the recommended rules for the plugin
+.
+
+### Recommended Flat Config setup
+
+To enable all of the recommended rules for our plugin, add the following config:
+
+
+
+```js title="eslint.config.js"
+import pluginRouter from '@tanstack/eslint-plugin-router'
+
+export default [
+  ...pluginRouter.configs['flat/recommended'],
+  // Any other config...
+]
+```
+
+
+
+### Custom Flat Config setup
+
+Alternatively, you can load the plugin and configure only the rules you want to use:
+
+
+
+```js title="eslint.config.js"
+import pluginRouter from '@tanstack/eslint-plugin-router'
+
+export default [
+  {
+    plugins: {
+      '@tanstack/router': pluginRouter,
+    },
+    rules: {
+      '@tanstack/router/create-route-property-order': 'error',
+    },
+  },
+  // Any other config...
+]
+```
+
+
+
+## Legacy Config (`.eslintrc`)
+
+Prior to the ESLint 9.0 release, the most common way of configuring EsLint was using a `.eslintrc` file. The TanStack Router ESLint Plugin still supports this configuration method.
+
+### Recommended Legacy Config setup
+
+To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-router/recommended` in extends:
+
+```json
+{
+  "extends": ["plugin:@tanstack/eslint-plugin-router/recommended"]
+}
+```
+
+### Custom Legacy Config setup
+
+Alternatively, add `@tanstack/eslint-plugin-router` to the plugins section, and configure the rules you want to use:
+
+```json
+{
+  "plugins": ["@tanstack/eslint-plugin-router"],
+  "rules": {
+    "@tanstack/router/create-route-property-order": "error"
+  }
+}
+```
+
+## Rules
+
+The following rules are available in the TanStack Router ESLint Plugin:
+
+- [@tanstack/router/create-route-property-order](/router/eslint/create-route-property-order)
+
+## Conflicts with other ESLint plugins
+
+If you have other ESLint plugins installed, they may rules that conflict with this plugin. If so, you'll need to make some tweaks to allow these plugins to work together.
+
+### `typescript-eslint`
+
+The [`@typescript-eslint/only-throw-error`](https://typescript-eslint.io/rules/only-throw-error/) rule, enabled by default in the `recommended-type-checked` and `strict-type-checked` rulesets, disallows the throwing of non-Error values as exceptions, which is considered a good practice.
+
+To ensure it does not conflict with TanStack Router, you should allow `redirect` and `notFound` as throwable objects.
+
+```json
+{
+  "rules": {
+    "@typescript-eslint/only-throw-error": [
+      "error",
+      {
+        "allow": [
+          {
+            "from": "package",
+            "package": "@tanstack/router-core",
+            "name": "Redirect"
+          },
+          {
+            "from": "package",
+            "package": "@tanstack/router-core",
+            "name": "NotFoundError"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
diff --git a/mintlify/router/faq.md b/mintlify/router/faq.md
new file mode 100644
index 000000000..19942c988
--- /dev/null
+++ b/mintlify/router/faq.md
@@ -0,0 +1,101 @@
+---
+title: Frequently Asked Questions
+---
+
+Welcome to the TanStack Router FAQ! Here you'll find answers to common questions about the TanStack Router. If you have a question that isn't answered here, please feel free to ask in the [TanStack Discord](https://tlinz.com/discord).
+
+## Why should you choose TanStack Router over another router?
+
+To answer this question, it's important to view the other options in the space. There are many alternatives to choose from, but only a couple that are widely adopted and actively maintained:
+
+- **Next.js** - Widely regarded as the leading framework for starting new React projects. Its design focuses on performance, development workflows, and cutting-edge technology. The framework's APIs and abstractions, while powerful, can sometimes present as non-standard. Rapid growth and industry adoption have resulted in a feature-rich experience, sometimes leading to a steeper learning curve and increased overhead.
+- **Remix / React Router** - Based on the historically successful React Router, Remix delivers a powerful developer and user experience. Its API and architectural vision are firmly rooted in web standards such as Request/Response, with an emphasis on adaptability across various JavaScript environments. Many of its APIs and abstractions are well-designed and have influenced more than a few of TanStack Router's APIs. However, its rigid design, the integration of type safety as an add-on, and sometimes strict adherence to platform APIs can present limitations for some developers.
+
+These frameworks and routers have their strengths, but they also come with trade-offs that may not align with every project's needs. TanStack Router aims to strike a balance by offering routing APIs designed to improve the developer experience without sacrificing flexibility or performance.
+
+## Is TanStack Router a framework?
+
+TanStack Router itself is not a "framework" in the traditional sense, since it doesn't address a few other common full-stack concerns. However, TanStack Router has been designed to be upgradable to a full-stack framework when used in conjunction with other tools that address bundling, deployments, and server-side-specific functionality. This is why we are currently developing [TanStack Start](https://tanstack.com/start), a full-stack framework that is built on top of TanStack Router and Vite.
+For a deeper dive on the history of TanStack Router, feel free to read [TanStack Router's History](/router/decisions-on-dx#tanstack-routers-origin-story).
+
+## Should I commit my `routeTree.gen.ts` file into git?
+
+Yes! Although the route tree file (i.e., `routeTree.gen.ts`) is generated by TanStack Router, it is essentially part of your application’s runtime, not a build artifact. The route tree file is a critical part of your application’s source code, and it is used by TanStack Router to build your application’s routes at runtime.
+
+You should commit this file into git so that other developers can use it to build your application.
+
+## Can I conditionally render the Root Route component?
+
+No, the root route is always rendered as it is the entry point of your application.
+If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](/router/routing/routing-concepts#layout-routes) or a [Pathless Layout Route](/router/routing/routing-concepts#pathless-layout-routes) to conditionally render the content.
+
+You can restrict access to these routes using a conditional check in the `beforeLoad` function of the route.
+
+<details>
+<summary>What does this look like?</summary>
+
+
+
+# React
+
+```tsx
+// src/routes/_pathless-layout.tsx
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { isAuthenticated } from '../utils/auth'
+
+export const Route = createFileRoute('/_pathless-layout', {
+  beforeLoad: async () => {
+    // Check if the user is authenticated
+    const authed = await isAuthenticated()
+    if (!authed) {
+      // Redirect the user to the login page
+      return '/login'
+    }
+  },
+  component: PathlessLayoutRouteComponent,
+  // ...
+})
+
+function PathlessLayoutRouteComponent() {
+  return (
+    <div>
+      <h1>You are authed</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx
+// src/routes/_pathless-layout.tsx
+import { createFileRoute, Outlet } from '@tanstack/solid-router'
+import { isAuthenticated } from '../utils/auth'
+
+export const Route = createFileRoute('/_pathless-layout', {
+  beforeLoad: async () => {
+    // Check if the user is authenticated
+    const authed = await isAuthenticated()
+    if (!authed) {
+      // Redirect the user to the login page
+      return '/login'
+    }
+  },
+  component: PathlessLayoutRouteComponent,
+  // ...
+})
+
+function PathlessLayoutRouteComponent() {
+  return (
+    <div>
+      <h1>You are authed</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+
+
+</details>
diff --git a/mintlify/router/framework/react/examples/authenticated-routes.md b/mintlify/router/framework/react/examples/authenticated-routes.md
new file mode 100644
index 000000000..703917eed
--- /dev/null
+++ b/mintlify/router/framework/react/examples/authenticated-routes.md
@@ -0,0 +1,12 @@
+---
+title: "Authenticated Routes"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/authenticated-routes)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic-devtools-panel.md b/mintlify/router/framework/react/examples/basic-devtools-panel.md
new file mode 100644
index 000000000..27dcf75fe
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-devtools-panel.md
@@ -0,0 +1,9 @@
+---
+title: "Basic Devtools Panel"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-devtools-panel)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/router/framework/react/examples/basic-file-based.md b/mintlify/router/framework/react/examples/basic-file-based.md
new file mode 100644
index 000000000..451a00d35
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic-react-query-file-based.md b/mintlify/router/framework/react/examples/basic-react-query-file-based.md
new file mode 100644
index 000000000..91e63303d
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-react-query-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + React Query (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic-react-query-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic-react-query.md b/mintlify/router/framework/react/examples/basic-react-query.md
new file mode 100644
index 000000000..e0ac6c5cf
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-react-query.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + React Query (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic-react-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic-ssr-file-based.md b/mintlify/router/framework/react/examples/basic-ssr-file-based.md
new file mode 100644
index 000000000..67d56dc5a
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-ssr-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + SSR (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-ssr-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic-ssr-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic-ssr-streaming-file-based.md b/mintlify/router/framework/react/examples/basic-ssr-streaming-file-based.md
new file mode 100644
index 000000000..6db70c1b1
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic-ssr-streaming-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + SSR Streaming (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic-ssr-streaming-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic-ssr-streaming-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/basic.md b/mintlify/router/framework/react/examples/basic.md
new file mode 100644
index 000000000..ac75cdbcb
--- /dev/null
+++ b/mintlify/router/framework/react/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/deferred-data.md b/mintlify/router/framework/react/examples/deferred-data.md
new file mode 100644
index 000000000..d0d580d21
--- /dev/null
+++ b/mintlify/router/framework/react/examples/deferred-data.md
@@ -0,0 +1,12 @@
+---
+title: "Deferred Data"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/deferred-data)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/deferred-data)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/kitchen-sink-file-based.md b/mintlify/router/framework/react/examples/kitchen-sink-file-based.md
new file mode 100644
index 000000000..85f9f21ad
--- /dev/null
+++ b/mintlify/router/framework/react/examples/kitchen-sink-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/kitchen-sink-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/kitchen-sink-react-query-file-based.md b/mintlify/router/framework/react/examples/kitchen-sink-react-query-file-based.md
new file mode 100644
index 000000000..0cff64b7a
--- /dev/null
+++ b/mintlify/router/framework/react/examples/kitchen-sink-react-query-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink + React Query (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/kitchen-sink-react-query-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/kitchen-sink-react-query.md b/mintlify/router/framework/react/examples/kitchen-sink-react-query.md
new file mode 100644
index 000000000..c784a9b42
--- /dev/null
+++ b/mintlify/router/framework/react/examples/kitchen-sink-react-query.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink + React Query (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/kitchen-sink-react-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/kitchen-sink.md b/mintlify/router/framework/react/examples/kitchen-sink.md
new file mode 100644
index 000000000..12f41c848
--- /dev/null
+++ b/mintlify/router/framework/react/examples/kitchen-sink.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/kitchen-sink)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/location-masking.md b/mintlify/router/framework/react/examples/location-masking.md
new file mode 100644
index 000000000..039106ede
--- /dev/null
+++ b/mintlify/router/framework/react/examples/location-masking.md
@@ -0,0 +1,12 @@
+---
+title: "Location Masking"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/location-masking)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/location-masking)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/navigation-blocking.md b/mintlify/router/framework/react/examples/navigation-blocking.md
new file mode 100644
index 000000000..88f18cb80
--- /dev/null
+++ b/mintlify/router/framework/react/examples/navigation-blocking.md
@@ -0,0 +1,12 @@
+---
+title: "Navigation Blocking"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/navigation-blocking)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/navigation-blocking)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/quickstart-file-based.md b/mintlify/router/framework/react/examples/quickstart-file-based.md
new file mode 100644
index 000000000..dd00b38d5
--- /dev/null
+++ b/mintlify/router/framework/react/examples/quickstart-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Quickstart (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/quickstart-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/quickstart-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/quickstart.md b/mintlify/router/framework/react/examples/quickstart.md
new file mode 100644
index 000000000..5edd8f163
--- /dev/null
+++ b/mintlify/router/framework/react/examples/quickstart.md
@@ -0,0 +1,12 @@
+---
+title: "Quickstart (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/quickstart)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/quickstart)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/router-monorepo-react-query.md b/mintlify/router/framework/react/examples/router-monorepo-react-query.md
new file mode 100644
index 000000000..a5db29d37
--- /dev/null
+++ b/mintlify/router/framework/react/examples/router-monorepo-react-query.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo with React Query"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/router-monorepo-react-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/router-monorepo-react-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/router-monorepo-simple-lazy.md b/mintlify/router/framework/react/examples/router-monorepo-simple-lazy.md
new file mode 100644
index 000000000..d22a02fbd
--- /dev/null
+++ b/mintlify/router/framework/react/examples/router-monorepo-simple-lazy.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo basic (with lazy loading)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/router-monorepo-simple-lazy)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/router-monorepo-simple-lazy)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/router-monorepo-simple.md b/mintlify/router/framework/react/examples/router-monorepo-simple.md
new file mode 100644
index 000000000..e517d7756
--- /dev/null
+++ b/mintlify/router/framework/react/examples/router-monorepo-simple.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/router-monorepo-simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/router-monorepo-simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/scroll-restoration.md b/mintlify/router/framework/react/examples/scroll-restoration.md
new file mode 100644
index 000000000..a0223eae2
--- /dev/null
+++ b/mintlify/router/framework/react/examples/scroll-restoration.md
@@ -0,0 +1,12 @@
+---
+title: "Scroll Restoration"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/scroll-restoration)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/scroll-restoration)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/view-transitions.md b/mintlify/router/framework/react/examples/view-transitions.md
new file mode 100644
index 000000000..ad07d6e6d
--- /dev/null
+++ b/mintlify/router/framework/react/examples/view-transitions.md
@@ -0,0 +1,12 @@
+---
+title: "View Transitions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/view-transitions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/view-transitions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/with-framer-motion.md b/mintlify/router/framework/react/examples/with-framer-motion.md
new file mode 100644
index 000000000..3fd38a336
--- /dev/null
+++ b/mintlify/router/framework/react/examples/with-framer-motion.md
@@ -0,0 +1,12 @@
+---
+title: "Framer Motion"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/with-framer-motion)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/with-framer-motion)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/with-trpc-react-query.md b/mintlify/router/framework/react/examples/with-trpc-react-query.md
new file mode 100644
index 000000000..60b84ea27
--- /dev/null
+++ b/mintlify/router/framework/react/examples/with-trpc-react-query.md
@@ -0,0 +1,12 @@
+---
+title: "With tRPC + React Query"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/with-trpc-react-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/with-trpc-react-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/react/examples/with-trpc.md b/mintlify/router/framework/react/examples/with-trpc.md
new file mode 100644
index 000000000..3982a0213
--- /dev/null
+++ b/mintlify/router/framework/react/examples/with-trpc.md
@@ -0,0 +1,12 @@
+---
+title: "With tRPC"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/react/examples/with-trpc)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/with-trpc)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/authenticated-routes.md b/mintlify/router/framework/solid/examples/authenticated-routes.md
new file mode 100644
index 000000000..f9c04ff8a
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/authenticated-routes.md
@@ -0,0 +1,12 @@
+---
+title: "Authenticated Routes"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/authenticated-routes)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/authenticated-routes)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic-file-based.md b/mintlify/router/framework/solid/examples/basic-file-based.md
new file mode 100644
index 000000000..32f1445f4
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/basic-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic-solid-query-file-based.md b/mintlify/router/framework/solid/examples/basic-solid-query-file-based.md
new file mode 100644
index 000000000..a62d0e1c4
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic-solid-query-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Solid Query (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-solid-query-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/basic-solid-query-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic-solid-query.md b/mintlify/router/framework/solid/examples/basic-solid-query.md
new file mode 100644
index 000000000..cdaa458ec
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic-solid-query.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Solid Query (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-solid-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/basic-solid-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic-ssr-file-based.md b/mintlify/router/framework/solid/examples/basic-ssr-file-based.md
new file mode 100644
index 000000000..a95968582
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic-ssr-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + SSR (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-ssr-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/basic-ssr-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic-ssr-streaming-file-based.md b/mintlify/router/framework/solid/examples/basic-ssr-streaming-file-based.md
new file mode 100644
index 000000000..6f4739680
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic-ssr-streaming-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + SSR Streaming (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-ssr-streaming-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/basic-ssr-streaming-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/basic.md b/mintlify/router/framework/solid/examples/basic.md
new file mode 100644
index 000000000..fdec92aff
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/basic.md
@@ -0,0 +1,9 @@
+---
+title: "Basic"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/basic)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/router/framework/solid/examples/deferred-data.md b/mintlify/router/framework/solid/examples/deferred-data.md
new file mode 100644
index 000000000..e08a95cae
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/deferred-data.md
@@ -0,0 +1,12 @@
+---
+title: "Deferred Data"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/deferred-data)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/deferred-data)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/kitchen-sink-file-based.md b/mintlify/router/framework/solid/examples/kitchen-sink-file-based.md
new file mode 100644
index 000000000..a8f14074e
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/kitchen-sink-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/kitchen-sink-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/kitchen-sink-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/kitchen-sink-solid-query-file-based.md b/mintlify/router/framework/solid/examples/kitchen-sink-solid-query-file-based.md
new file mode 100644
index 000000000..77e7b8d07
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/kitchen-sink-solid-query-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink + Solid Query (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/kitchen-sink-solid-query-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/kitchen-sink-solid-query-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/kitchen-sink-solid-query.md b/mintlify/router/framework/solid/examples/kitchen-sink-solid-query.md
new file mode 100644
index 000000000..d6dbe8e15
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/kitchen-sink-solid-query.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink + Solid Query (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/kitchen-sink-solid-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/kitchen-sink-solid-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/kitchen-sink.md b/mintlify/router/framework/solid/examples/kitchen-sink.md
new file mode 100644
index 000000000..ec5afb9f1
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/kitchen-sink.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/kitchen-sink)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/kitchen-sink)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/location-masking.md b/mintlify/router/framework/solid/examples/location-masking.md
new file mode 100644
index 000000000..0d8d942e7
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/location-masking.md
@@ -0,0 +1,12 @@
+---
+title: "Location Masking"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/location-masking)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/location-masking)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/navigation-blocking.md b/mintlify/router/framework/solid/examples/navigation-blocking.md
new file mode 100644
index 000000000..e51c2b11e
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/navigation-blocking.md
@@ -0,0 +1,12 @@
+---
+title: "Navigation Blocking"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/navigation-blocking)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/navigation-blocking)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/quickstart-file-based.md b/mintlify/router/framework/solid/examples/quickstart-file-based.md
new file mode 100644
index 000000000..7bb7b1aab
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/quickstart-file-based.md
@@ -0,0 +1,12 @@
+---
+title: "Quickstart (file-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/quickstart-file-based)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/quickstart-file-based)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/quickstart.md b/mintlify/router/framework/solid/examples/quickstart.md
new file mode 100644
index 000000000..40f2dfdce
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/quickstart.md
@@ -0,0 +1,12 @@
+---
+title: "Quickstart (code-based)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/quickstart)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/quickstart)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/router-monorepo-simple-lazy.md b/mintlify/router/framework/solid/examples/router-monorepo-simple-lazy.md
new file mode 100644
index 000000000..0626d6fb0
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/router-monorepo-simple-lazy.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo basic (with lazy loading)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/router-monorepo-simple-lazy)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/router-monorepo-simple-lazy)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/router-monorepo-simple.md b/mintlify/router/framework/solid/examples/router-monorepo-simple.md
new file mode 100644
index 000000000..7e6d32d4d
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/router-monorepo-simple.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/router-monorepo-simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/router-monorepo-simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/router-monorepo-solid-query.md b/mintlify/router/framework/solid/examples/router-monorepo-solid-query.md
new file mode 100644
index 000000000..0ffaef019
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/router-monorepo-solid-query.md
@@ -0,0 +1,12 @@
+---
+title: "Monorepo with Solid Query"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/router-monorepo-solid-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/router-monorepo-solid-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/scroll-restoration.md b/mintlify/router/framework/solid/examples/scroll-restoration.md
new file mode 100644
index 000000000..b5288f0d2
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/scroll-restoration.md
@@ -0,0 +1,12 @@
+---
+title: "Scroll Restoration"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/scroll-restoration)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/scroll-restoration)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/view-transitions.md b/mintlify/router/framework/solid/examples/view-transitions.md
new file mode 100644
index 000000000..0c7ac1a97
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/view-transitions.md
@@ -0,0 +1,12 @@
+---
+title: "View Transitions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/view-transitions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/view-transitions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/with-framer-motion.md b/mintlify/router/framework/solid/examples/with-framer-motion.md
new file mode 100644
index 000000000..b8d838ceb
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/with-framer-motion.md
@@ -0,0 +1,12 @@
+---
+title: "Framer Motion"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/with-framer-motion)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/with-framer-motion)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/framework/solid/examples/with-trpc.md b/mintlify/router/framework/solid/examples/with-trpc.md
new file mode 100644
index 000000000..108ac261c
--- /dev/null
+++ b/mintlify/router/framework/solid/examples/with-trpc.md
@@ -0,0 +1,12 @@
+---
+title: "With tRPC"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/router/latest/docs/framework/solid/examples/with-trpc)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/with-trpc)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/router/guide/authenticated-routes.md b/mintlify/router/guide/authenticated-routes.md
new file mode 100644
index 000000000..34f0ebc55
--- /dev/null
+++ b/mintlify/router/guide/authenticated-routes.md
@@ -0,0 +1,340 @@
+---
+id: authenticated-routes
+title: Authenticated Routes
+---
+
+Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them.
+
+> **A route guard is not a data authorization boundary.** This guide shows how to gate a route's UI behind `beforeLoad`. Any server function, server route, or API endpoint that returns private data must authorize the request itself, because it can be requested independently of the route that calls it. See [Authentication Server Primitives](../../start/framework/react/guide/authentication-server-primitives) in the Start docs.
+
+## The `route.beforeLoad` Option
+
+The `route.beforeLoad` option allows you to specify a function that will be called before a route is loaded. It receives all of the same arguments that the `route.loader` function does. This is a great place to check if a user is authenticated, and redirect them to a login page if they are not.
+
+The `beforeLoad` function runs in relative order to these other route loading functions:
+
+- Route Matching (Top-Down)
+  - `route.params.parse`
+  - `route.validateSearch`
+- Route Loading (including Preloading)
+  - **`route.beforeLoad`**
+  - `route.onError`
+- Route Loading (Parallel)
+  - `route.component.preload?`
+  - `route.load`
+
+**It's important to know that the `beforeLoad` function for a route is called _before any of its child routes' `beforeLoad` functions_.** It is essentially a middleware function for the route and all of its children.
+
+**If you throw an error in `beforeLoad`, none of its children will attempt to load**.
+
+## Redirecting
+
+While not required, some authentication flows require redirecting to a login page. To do this, you can **throw a `redirect()`** from `beforeLoad`:
+
+```tsx
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    if (!isAuthenticated()) {
+      throw redirect({
+        to: '/login',
+        search: {
+          // Use the current location to power a redirect after login
+          // (Do not use `router.state.resolvedLocation` as it can
+          // potentially lag behind the actual current location)
+          redirect: location.href,
+        },
+      })
+    }
+  },
+})
+```
+
+> [!TIP]
+> The `redirect()` function takes all of the same options as the `navigate` function, so you can pass options like `replace: true` if you want to replace the current history entry instead of adding a new one.
+
+### Handling Auth Check Failures
+
+If your authentication check can throw errors (network failures, token validation, etc.), wrap it in try/catch:
+
+
+
+# React
+
+```tsx
+import { createFileRoute, redirect, isRedirect } from '@tanstack/react-router'
+
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    try {
+      const user = await verifySession() // might throw on network error
+      if (!user) {
+        throw redirect({
+          to: '/login',
+          search: { redirect: location.href },
+        })
+      }
+      return { user }
+    } catch (error) {
+      // Re-throw redirects (they're intentional, not errors)
+      if (isRedirect(error)) throw error
+
+      // Auth check failed (network error, etc.) - redirect to login
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.href },
+      })
+    }
+  },
+})
+```
+
+# Solid
+
+```tsx
+import { createFileRoute, redirect, isRedirect } from '@tanstack/solid-router'
+
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    try {
+      const user = await verifySession() // might throw on network error
+      if (!user) {
+        throw redirect({
+          to: '/login',
+          search: { redirect: location.href },
+        })
+      }
+      return { user }
+    } catch (error) {
+      // Re-throw redirects (they're intentional, not errors)
+      if (isRedirect(error)) throw error
+
+      // Auth check failed (network error, etc.) - redirect to login
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.href },
+      })
+    }
+  },
+})
+```
+
+
+
+The [`isRedirect()`](/router/api/router/isRedirectFunction) helper distinguishes between actual errors and intentional redirects.
+
+Once you have authenticated a user, it's also common practice to redirect them back to the page they were trying to access. To do this, you can utilize the `redirect` search param that we added in our original redirect. Since we'll be replacing the entire URL with what it was, `router.history.push` is better suited for this than `router.navigate`:
+
+```tsx
+router.history.push(search.redirect)
+```
+
+## Non-Redirected Authentication
+
+Some applications choose to not redirect users to a login page, and instead keep the user on the same page and show a login form that either replaces the main content or hides it via a modal. This is also possible with TanStack Router by simply short circuiting rendering the `<Outlet />` that would normally render the child routes:
+
+```tsx
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute('/_authenticated')({
+  component: () => {
+    if (!isAuthenticated()) {
+      return <Login />
+    }
+
+    return <Outlet />
+  },
+})
+```
+
+This keeps the user on the same page, but still allows you to render a login form. Once the user is authenticated, you can simply render the `<Outlet />` and the child routes will be rendered.
+
+## Authentication using React context/hooks
+
+If your authentication flow relies on interactions with React context and/or hooks, you'll need to pass down your authentication state to TanStack Router using `router.context` option.
+
+> [!IMPORTANT]
+> React hooks are not meant to be consumed outside of React components. If you need to use a hook outside of a React component, you need to extract the returned state from the hook in a component that wraps your `<RouterProvider />` and then pass the returned value down to TanStack Router.
+
+We'll cover the `router.context` options in-detail in the [Router Context](/router/guide/router-context) section.
+
+Here's an example that uses React context and hooks for protecting authenticated routes in TanStack Router. See the entire working setup in the [Authenticated Routes example](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes).
+
+
+
+# React
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/react-router'
+
+interface MyRouterContext {
+  // The ReturnType of your useAuth hook or the value of your AuthContext
+  auth: AuthState
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+})
+```
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    // auth will initially be undefined
+    // We'll be passing down the auth state from within a React component
+    auth: undefined!,
+  },
+})
+```
+
+```tsx title="src/App.tsx"
+import { RouterProvider } from '@tanstack/react-router'
+
+import { AuthProvider, useAuth } from './auth'
+
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useAuth()
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <InnerApp />
+    </AuthProvider>
+  )
+}
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  // The ReturnType of your useAuth hook or the value of your AuthContext
+  auth: AuthState
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+})
+```
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    // auth will initially be undefined
+    // We'll be passing down the auth state from within a React component
+    auth: undefined!,
+  },
+})
+```
+
+```tsx title="src/App.tsx"
+import { RouterProvider } from '@tanstack/solid-router'
+
+import { AuthProvider, useAuth } from './auth'
+
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useAuth()
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <InnerApp />
+    </AuthProvider>
+  )
+}
+```
+
+
+
+
+
+Then in the authenticated route, you can check the auth state using the `beforeLoad` function, and **throw a `redirect()`** to your **Login route** if the user is not signed-in.
+
+
+
+# React
+
+```tsx title="src/routes/dashboard.route.tsx"
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated) {
+      throw redirect({
+        to: '/login',
+        search: {
+          redirect: location.href,
+        },
+      })
+    }
+  },
+})
+```
+
+# Solid
+
+```tsx title="src/routes/dashboard.route.tsx"
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/dashboard')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated()) {
+      throw redirect({
+        to: '/login',
+        search: {
+          redirect: location.href,
+        },
+      })
+    }
+  },
+})
+```
+
+
+
+You can _optionally_, also use the [Non-Redirected Authentication](#non-redirected-authentication) approach to show a login form instead of calling a **redirect**.
+
+This approach can also be used in conjunction with Pathless or Layout Route to protect all routes under their parent route.
+
+## Related How-To Guides
+
+For detailed, step-by-step implementation guides, see:
+
+- [How to Set Up Basic Authentication](/router/how-to/setup-authentication) - Complete setup with React Context and protected routes
+- [How to Integrate Authentication Providers](/router/how-to/setup-auth-providers) - Use Auth0, Clerk, or Supabase
+- [How to Set Up Role-Based Access Control](/router/how-to/setup-rbac) - Implement permissions and role-based routing
+
+## Examples
+
+Working authentication examples are available in the repository:
+
+- [Basic Authentication Example](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes) - Simple authentication with context
+- [Firebase Authentication](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes-firebase) - Firebase Auth integration
+- [TanStack Start Auth Examples](https://github.com/TanStack/router/tree/main/examples/react) - Various auth implementations with TanStack Start
diff --git a/mintlify/router/guide/automatic-code-splitting.md b/mintlify/router/guide/automatic-code-splitting.md
new file mode 100644
index 000000000..4612c298c
--- /dev/null
+++ b/mintlify/router/guide/automatic-code-splitting.md
@@ -0,0 +1,226 @@
+---
+title: Automatic Code Splitting
+---
+
+The automatic code splitting feature in TanStack Router allows you to optimize your application's bundle size by lazily loading route components and their associated data. This is particularly useful for large applications where you want to minimize the initial load time by only loading the necessary code for the current route.
+
+To turn this feature on, simply set the `autoCodeSplitting` option to `true` in your bundler plugin configuration. This enables the router to automatically handle code splitting for your routes without requiring any additional setup.
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true, // Enable automatic code splitting
+    }),
+  ],
+})
+```
+
+But that's just the beginning! TanStack Router's automatic code splitting is not only easy to enable, but it also provides powerful customization options to tailor how your routes are split into chunks. This allows you to optimize your application's performance based on your specific needs and usage patterns.
+
+## How does it work?
+
+TanStack Router's automatic code splitting works by transforming your route files both during 'development' and at 'build' time. It rewrites the route definitions to use lazy-loading wrappers for components and loaders, which allows the bundler to group these properties into separate chunks.
+
+> [!TIP]
+> A **chunk** is a file that contains a portion of your application's code, which can be loaded on demand. This helps reduce the initial load time of your application by only loading the code that is needed for the current route.
+
+So when your application loads, it doesn't include all the code for every route. Instead, it only includes the code for the routes that are initially needed. As users navigate through your application, additional chunks are loaded on demand.
+
+This happens seamlessly, without requiring you to manually split your code or manage lazy loading. The TanStack Router bundler plugin takes care of everything, ensuring that your routes are optimized for performance right out of the box.
+
+### The transformation process
+
+When you enable automatic code splitting, the bundler plugin does this by using static code analysis look at your the code in your route files to transform them into optimized outputs.
+
+This transformation process produces two key outputs when each of your route files are processed:
+
+1. **Reference File**: The bundler plugin takes your original route file (e.g., `posts.route.tsx`) and modifies the values for properties like `component` or `pendingComponent` to use special lazy-loading wrappers that'll fetch the actual code later. These wrappers point to a "virtual" file that the bundler will resolve later on.
+2. **Virtual File**: When the bundler sees a request for one of these virtual files (e.g., `posts.route.tsx?tsr-split=component`), it intercepts it to generate a new, minimal on-the-fly file that _only_ contains the code for the requested properties (e.g., just the `PostsComponent`).
+
+This process ensures that your original code remains clean and readable, while the actual bundled output is optimized for initial bundle size.
+
+### What gets code split?
+
+The decision of what to split into separate chunks is crucial for optimizing your application's performance. TanStack Router uses a concept called "**Split Groupings**" to determine how different parts of your route should be bundled together.
+
+Split groupings are arrays of properties that tell TanStack Router how to bundle different parts of your route together. Each grouping is an list of property names that you want to bundle together into a single lazy-loaded chunk.
+
+The available properties to split are:
+
+- `component`
+- `errorComponent`
+- `pendingComponent`
+- `notFoundComponent`
+- `loader`
+
+By default, TanStack Router uses the following split groupings:
+
+```sh
+[
+  ['component'],
+  ['errorComponent'],
+  ['notFoundComponent']
+]
+```
+
+This means that it creates three separate lazy-loaded chunks for each route. Resulting in:
+
+- One for the main component
+- One for the error component
+- And one for the not-found component.
+
+### Rules of Splitting
+
+For automatic code splitting to work, there are some rules in-place to make sure that this process can reliably and predictably happen.
+
+#### Do not export route properties
+
+Route properties like `component`, `loader`, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split.
+
+```tsx
+export const Route = createRoute('/posts')({
+  // ...
+  notFoundComponent: PostsNotFoundComponent,
+})
+
+// ❌ Do NOT do this!
+// Exporting the notFoundComponent will prevent it from being code-split
+// and will be included in the main bundle.
+export function PostsNotFoundComponent() {
+  // ❌
+  // ...
+}
+
+function PostsNotFoundComponent() {
+  // ✅
+  // ...
+}
+```
+
+**That's it!** There are no other restrictions. You can use any other JavaScript or TypeScript features in your route files as you normally would. If you run into any issues, please [open an issue](https://github.com/tanstack/router/issues) on GitHub.
+
+## Granular control
+
+For most applications, the default behavior of using `autoCodeSplitting: true` is sufficient. However, TanStack Router provides several options to customize how your routes are split into chunks, allowing you to optimize for specific use cases or performance needs.
+
+### Global code splitting behavior (`defaultBehavior`)
+
+You can change how TanStack Router splits your routes by changing the `defaultBehavior` option in your bundler plugin configuration. This allows you to define how different properties of your routes should be bundled together.
+
+For example, to bundle all UI-related components into a single chunk, you could configure it like this:
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true,
+      codeSplittingOptions: {
+        defaultBehavior: [
+          [
+            'component',
+            'pendingComponent',
+            'errorComponent',
+            'notFoundComponent',
+          ], // Bundle all UI components together
+        ],
+      },
+    }),
+  ],
+})
+```
+
+### Advanced programmatic control (`splitBehavior`)
+
+For complex rulesets, you can use the `splitBehavior` function in your vite config to programmatically define how routes should be split into chunks based on their `routeId`. This function allows you to implement custom logic for grouping properties together, giving you fine-grained control over the code splitting behavior.
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true,
+      codeSplittingOptions: {
+        splitBehavior: ({ routeId }) => {
+          // For all routes under /posts, bundle the loader and component together
+          if (routeId.startsWith('/posts')) {
+            return [['loader', 'component']]
+          }
+          // All other routes will use the `defaultBehavior`
+        },
+      },
+    }),
+  ],
+})
+```
+
+### Per-route overrides (`codeSplitGroupings`)
+
+For ultimate control, you can override the global configuration directly inside a route file by adding a `codeSplitGroupings` property. This is useful for routes that have unique optimization needs.
+
+```tsx title="src/routes/posts.route.tsx"
+import { loadPostsData } from './-heavy-posts-utils'
+
+export const Route = createFileRoute('/posts')({
+  // For this specific route, bundle the loader and component together.
+  codeSplitGroupings: [['loader', 'component']],
+  loader: () => loadPostsData(),
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  // ...
+}
+```
+
+This will create a single chunk that includes both the `loader` and the `component` for this specific route, overriding both the default behavior and any programmatic split behavior defined in your bundler config.
+
+### Configuration order matters
+
+This guide has so far describe three different ways to configure how TanStack Router splits your routes into chunks.
+
+To make sure that the different configurations do not conflict with each other, TanStack Router uses the following order of precedence:
+
+1. **Per-route overrides**: The `codeSplitGroupings` property inside a route file takes the highest precedence. This allows you to define specific split groupings for individual routes.
+2. **Programmatic split behavior**: The `splitBehavior` function in your bundler config allows you to define custom logic for how routes should be split based on their `routeId`.
+3. **Default behavior**: The `defaultBehavior` option in your bundler config serves as the fallback for any routes that do not have specific overrides or custom logic defined. This is the base configuration that applies to all routes unless overridden.
+
+### Splitting the Data Loader
+
+The `loader` function is responsible for fetching data needed by the route. By default, it is bundled with into your "reference file" and loaded in the initial bundle. However, you can also split the `loader` into its own chunk if you want to optimize further.
+
+> [!CAUTION]
+> Moving the `loader` into its own chunk is a **performance trade-off**. It introduces an additional trip to the server before the data can be fetched, which can lead to slower initial page loads. This is because the `loader` **must** be fetched and executed before the route can render its component.
+> Therefore, we recommend keeping the `loader` in the initial bundle unless you have a specific reason to split it.
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true,
+      codeSplittingOptions: {
+        defaultBehavior: [
+          ['loader'], // The loader will be in its own chunk
+          ['component'],
+          // ... other component groupings
+        ],
+      },
+    }),
+  ],
+})
+```
+
+We highly discourage splitting the `loader` unless you have a specific use case that requires it. In most cases, not splitting off the `loader` and keep it in the main bundle is the best choice for performance.
diff --git a/mintlify/router/guide/code-splitting.md b/mintlify/router/guide/code-splitting.md
new file mode 100644
index 000000000..6e120acc2
--- /dev/null
+++ b/mintlify/router/guide/code-splitting.md
@@ -0,0 +1,472 @@
+---
+title: Code Splitting
+---
+
+Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application.
+
+- Reduces the amount of code that needs to be loaded on initial page load
+- Code is loaded on-demand when it is needed
+- Results in more chunks that are smaller in size that can be cached more easily by the browser.
+
+## How does TanStack Router split code?
+
+TanStack Router separates code into two categories:
+
+- **Critical Route Configuration** - The code that is required to render the current route and kick off the data loading process as early as possible.
+  - Path Parsing/Serialization
+  - Search Param Validation
+  - Loaders, Before Load
+  - Route Context
+  - Static Data
+  - Links
+  - Scripts
+  - Styles
+  - All other route configuration not listed below
+
+- **Non-Critical/Lazy Route Configuration** - The code that is not required to match the route, and can be loaded on-demand.
+  - Route Component
+  - Error Component
+  - Pending Component
+  - Not-found Component
+
+> 🧠 **Why is the loader not split?**
+>
+> - The loader is already an asynchronous boundary, so you pay double to both get the chunk _and_ wait for the loader to execute.
+> - Categorically, it is less likely to contribute to a large bundle size than a component.
+> - The loader is one of the most important preloadable assets for a route, especially if you're using a default preload intent, like hovering over a link, so it's important for the loader to be available without any additional async overhead.
+>
+>   Knowing the disadvantages of splitting the loader, if you still want to go ahead with it, head over to the [Data Loader Splitting](#data-loader-splitting) section.
+
+## Encapsulating a route's files into a directory
+
+Since TanStack Router's file-based routing system is designed to support both flat and nested file structures, it's possible to encapsulate a route's files into a single directory without any additional configuration.
+
+To encapsulate a route's files into a directory, move the route file itself into a `.route` file within a directory with the same name as the route file.
+
+For example, if you have a route file named `posts.tsx`, you would create a new directory named `posts` and move the `posts.tsx` file into that directory, renaming it to `route.tsx`.
+
+**Before**
+
+- `posts.tsx`
+
+**After**
+
+- `posts`
+  - `route.tsx`
+
+## Approaches to code splitting
+
+TanStack Router supports multiple approaches to code splitting. If you are using code-based routing, skip to the [Code-Based Splitting](#code-based-splitting) section.
+
+When you are using file-based routing, you can use the following approaches to code splitting:
+
+- [Using automatic code-splitting ✨](#using-automatic-code-splitting)
+- [Using the `.lazy.tsx` suffix](#using-the-lazytsx-suffix)
+- [Using Virtual Routes](#using-virtual-routes)
+
+## Using automatic code-splitting✨
+
+This is the easiest and most powerful way to code split your route files.
+
+When using the `autoCodeSplitting` feature, TanStack Router will automatically code split your route files based on the non-critical route configuration mentioned above.
+
+> [!IMPORTANT]
+> The automatic code-splitting feature is **ONLY** available when you are using file-based routing with one of our [supported bundlers](/router/routing/file-based-routing#getting-started-with-file-based-routing).
+> This will **NOT** work if you are **only** using the CLI (`@tanstack/router-cli`).
+
+To enable automatic code-splitting, you just need to add the following to the configuration of your TanStack Router Bundler Plugin:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      // ...
+      autoCodeSplitting: true,
+    }),
+    react(), // Make sure to add this plugin after the TanStack Router Bundler plugin
+  ],
+})
+```
+
+That's it! TanStack Router will automatically code-split all your route files by their critical and non-critical route configurations.
+
+If you want more control over the code-splitting process, head over to the [Automatic Code Splitting](/router/guide/automatic-code-splitting) guide to learn more about the options available.
+
+## Using the `.lazy.tsx` suffix
+
+If you are not able to use the automatic code-splitting feature, you can still code-split your route files using the `.lazy.tsx` suffix. It is **as easy as moving your code into a separate file with a `.lazy.tsx` suffix** and using the `createLazyFileRoute` function instead of `createFileRoute`.
+
+> [!IMPORTANT]
+> The `__root.tsx` route file, using either `createRootRoute` or `createRootRouteWithContext`, does not support code splitting, since it's always rendered regardless of the current route.
+
+These are the only options that `createLazyFileRoute` supports:
+
+| Export Name         | Description                                                           |
+| ------------------- | --------------------------------------------------------------------- |
+| `component`         | The component to render for the route.                                |
+| `errorComponent`    | The component to render when an error occurs while loading the route. |
+| `pendingComponent`  | The component to render while the route is loading.                   |
+| `notFoundComponent` | The component to render if a not-found error gets thrown.             |
+
+### Example code splitting with `.lazy.tsx`
+
+When you are using `.lazy.tsx` you can split your route into two files to enable code splitting:
+
+**Before (Single File)**
+
+
+
+# React
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+
+
+**After (Split into two files)**
+
+This file would contain the critical route configuration:
+
+
+
+# React
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+})
+```
+
+# Solid
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+})
+```
+
+
+
+With the non-critical route configuration going into the file with the `.lazy.tsx` suffix:
+
+
+
+# React
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+
+
+## Using Virtual Routes
+
+You might run into a situation where you end up splitting out everything from a route file, leaving it empty! In this case, simply **delete the route file entirely**! A virtual route will automatically be generated for you to serve as an anchor for your code split files. This virtual route will live directly in the generated route tree file.
+
+**Before (Virtual Routes)**
+
+
+
+# React
+
+
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  // Hello?
+})
+```
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  // Hello?
+})
+```
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+
+
+
+
+**After (Virtual Routes)**
+
+
+
+# React
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+```
+
+
+
+Tada! 🎉
+
+## Code-Based Splitting
+
+If you are using code-based routing, you can still code-split your routes using the `Route.lazy()` method and the `createLazyRoute` function. You'll need to split your route configuration into two parts:
+
+Create a lazy route using the `createLazyRoute` function.
+
+```tsx title="src/posts.lazy.tsx"
+export const Route = createLazyRoute('/posts')({
+  component: MyComponent,
+})
+
+function MyComponent() {
+  return <div>My Component</div>
+}
+```
+
+Then, call the `.lazy` method on the route definition in your `app.tsx` to import the lazy/code-split route with the non-critical route configuration.
+
+```tsx title="src/app.tsx"
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/posts',
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+```
+
+## Data Loader Splitting
+
+**Be warned!!!** Splitting a route loader is a dangerous game.
+
+It can be a powerful tool to reduce bundle size, but it comes with a cost as mentioned in the [How does TanStack Router split code?](#how-does-tanstack-router-split-code) section.
+
+You can code split your data loading logic using the Route's `loader` option. While this process makes it difficult to maintain type-safety with the parameters passed to your loader, you can always use the generic `LoaderContext` type to get you most of the way there:
+
+
+
+# React
+
+```tsx
+import { lazyFn } from '@tanstack/react-router'
+
+const route = createRoute({
+  path: '/my-route',
+  component: MyComponent,
+  loader: lazyFn(() => import('./loader'), 'loader'),
+})
+
+// In another file...a
+export const loader = async (context: LoaderContext) => {
+  /// ...
+}
+```
+
+# Solid
+
+```tsx
+import { lazyFn } from '@tanstack/solid-router'
+
+const route = createRoute({
+  path: '/my-route',
+  component: MyComponent,
+  loader: lazyFn(() => import('./loader'), 'loader'),
+})
+
+// In another file...a
+export const loader = async (context: LoaderContext) => {
+  /// ...
+}
+```
+
+
+
+If you are using file-based routing, you'll only be able to split your `loader` if you are using [Automatic Code Splitting](#using-automatic-code-splitting) with customized bundling options.
+
+## Manually accessing Route APIs in other files with the `getRouteApi` helper
+
+As you might have guessed, placing your component code in a separate file than your route can make it difficult to consume the route itself. To help with this, TanStack Router exports a handy `getRouteApi` function that you can use to access a route's type-safe APIs in a file without importing the route itself.
+
+
+
+# React
+
+
+
+```tsx title="src/my-route.tsx"
+import { createRoute } from '@tanstack/react-router'
+import { MyComponent } from './MyComponent'
+
+const route = createRoute({
+  path: '/my-route',
+  loader: () => ({
+    foo: 'bar',
+  }),
+  component: MyComponent,
+})
+```
+
+```tsx title="src/MyComponent.tsx"
+import { getRouteApi } from '@tanstack/react-router'
+
+const route = getRouteApi('/my-route')
+
+export function MyComponent() {
+  const loaderData = route.useLoaderData()
+  //    ^? { foo: string }
+
+  return <div>...</div>
+}
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/my-route.tsx"
+import { createRoute } from '@tanstack/solid-router'
+import { MyComponent } from './MyComponent'
+
+const route = createRoute({
+  path: '/my-route',
+  loader: () => ({
+    foo: 'bar',
+  }),
+  component: MyComponent,
+})
+```
+
+```tsx title="src/MyComponent.tsx"
+import { getRouteApi } from '@tanstack/solid-router'
+
+const route = getRouteApi('/my-route')
+
+export function MyComponent() {
+  const loaderData = route.useLoaderData()
+  //    ^? { foo: string }
+
+  return <div>...</div>
+}
+```
+
+
+
+
+
+The `getRouteApi` function is useful for accessing other type-safe APIs:
+
+- `useLoaderData`
+- `useLoaderDeps`
+- `useMatch`
+- `useParams`
+- `useRouteContext`
+- `useSearch`
diff --git a/mintlify/router/guide/creating-a-router.md b/mintlify/router/guide/creating-a-router.md
new file mode 100644
index 000000000..5fadd997a
--- /dev/null
+++ b/mintlify/router/guide/creating-a-router.md
@@ -0,0 +1,109 @@
+---
+title: Creating a Router
+---
+
+## The `createRouter` function
+
+When you're ready to start using your router, you'll need to create a new `Router` instance. The router instance is the core brains of TanStack Router and is responsible for managing the route tree, matching routes, and coordinating navigations and route transitions. It also serves as a place to configure router-wide settings.
+
+
+
+# React
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+})
+```
+
+# Solid
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+})
+```
+
+
+
+## Route Tree
+
+You'll probably notice quickly that the `Router` constructor requires a `routeTree` option. This is the route tree that the router will use to match routes and render components.
+
+Whether you used [file-based routing](/router/routing/file-based-routing) or [code-based routing](/router/routing/code-based-routing), you'll need to pass your route tree to the `createRouter` function:
+
+### Filesystem Route Tree
+
+If you used our recommended file-based routing, then it's likely your generated route tree file was created at the default `src/routeTree.gen.ts` location. If you used a custom location, then you'll need to import your route tree from that location.
+
+```tsx
+import { routeTree } from './routeTree.gen'
+```
+
+### Code-Based Route Tree
+
+If you used code-based routing, then you likely created your route tree manually using the root route's `addChildren` method:
+
+```tsx
+const routeTree = rootRoute.addChildren([
+  // ...
+])
+```
+
+## Router Type Safety
+
+> [!IMPORTANT]
+> DO NOT SKIP THIS SECTION! ⚠️
+
+TanStack Router provides amazing support for TypeScript, even for things you wouldn't expect like bare imports straight from the library! To make this possible, you must register your router's types using TypeScripts' [Declaration Merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) feature. This is done by extending the `Register` interface on `@tanstack/react-router` with a `router` property that has the type of your `router` instance:
+
+
+
+# React
+
+```tsx title="src/router.tsx"
+declare module '@tanstack/react-router' {
+  interface Register {
+    // This infers the type of our router and registers it across your entire project
+    router: typeof router
+  }
+}
+```
+
+# Solid
+
+```tsx title="src/router.tsx"
+declare module '@tanstack/solid-router' {
+  interface Register {
+    // This infers the type of our router and registers it across your entire project
+    router: typeof router
+  }
+}
+```
+
+
+
+With your router registered, you'll now get type-safety across your entire project for anything related to routing.
+
+## 404 Not Found Route
+
+As promised in earlier guides, we'll now cover the `notFoundRoute` option. This option is used to configure a route that will render when no other suitable match is found. This is useful for rendering a 404 page or redirecting to a default route.
+
+If you are using either file-based or code-based routing, then you'll need to add a `notFoundComponent` key to `createRootRoute`:
+
+```tsx
+export const Route = createRootRoute({
+  component: () => (
+    // ...
+  ),
+  notFoundComponent: () => <div>404 Not Found</div>,
+});
+```
+
+## Other Options
+
+There are many other options that can be passed to the `Router` constructor. You can find a full list of them in the [API Reference](/router/api/router/RouterOptionsType).
diff --git a/mintlify/router/guide/custom-link.md b/mintlify/router/guide/custom-link.md
new file mode 100644
index 000000000..552930058
--- /dev/null
+++ b/mintlify/router/guide/custom-link.md
@@ -0,0 +1,329 @@
+---
+title: Custom Link
+---
+
+While repeating yourself can be acceptable in many situations, you might find that you do it too often. At times, you may want to create cross-cutting components with additional behavior or styles. You might also consider using third-party libraries in combination with TanStack Router's type safety.
+
+## `createLink` for cross-cutting concerns
+
+`createLink` creates a custom `Link` component with the same type parameters as `Link`. This means you can create your own component which provides the same type safety and typescript performance as `Link`.
+
+### Basic example
+
+If you want to create a basic custom link component, you can do so with the following:
+
+
+
+# React
+
+```tsx
+import * as React from 'react'
+import { createLink, LinkComponent } from '@tanstack/react-router'
+
+interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  // Add any additional props you want to pass to the anchor element
+}
+
+const BasicLinkComponent = React.forwardRef<HTMLAnchorElement, BasicLinkProps>(
+  (props, ref) => {
+    return (
+      <a ref={ref} {...props} className={'block px-3 py-2 text-blue-700'} />
+    )
+  },
+)
+
+const CreatedLinkComponent = createLink(BasicLinkComponent)
+
+export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}
+```
+
+# Solid
+
+```tsx
+import * as Solid from 'solid-js'
+import { createLink, LinkComponent } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+type BasicLinkProps = Solid.JSX.IntrinsicElements['a'] & {
+  // Add any additional props you want to pass to the anchor element
+}
+
+const BasicLinkComponent: Solid.Component<BasicLinkProps> = (props) => (
+  <a {...props} class="block px-3 py-2 text-red-700">
+    {props.children}
+  </a>
+)
+
+const CreatedLinkComponent = createLink(BasicLinkComponent)
+
+export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}
+```
+
+
+
+You can then use your newly created `Link` component as any other `Link`
+
+```tsx
+<CustomLink to={'/dashboard/invoices/$invoiceId'} params={{ invoiceId: 0 }} />
+```
+
+## `createLink` with third party libraries
+
+Here are some examples of how you can use `createLink` with third-party libraries.
+
+
+
+# React
+
+### React Aria Components example
+
+React Aria Components v1.11.0 and later works with TanStack Router's `preload (intent)` prop. Use `createLink` to wrap each React Aria component that you use as a link.
+
+
+
+```tsx title="RACLink.tsx"
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, MenuItem } from 'react-aria-components'
+
+export const Link = createLink(RACLink)
+export const MenuItemLink = createLink(MenuItem)
+```
+
+```tsx title="CustomRACLink.tsx"
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, type LinkProps } from 'react-aria-components'
+
+interface MyLinkProps extends LinkProps {
+  // your props
+}
+
+function MyLink(props: MyLinkProps) {
+  return (
+    <RACLink
+      {...props}
+      style={({ isHovered }) => ({
+        color: isHovered ? 'red' : 'blue',
+      })}
+    />
+  )
+}
+
+export const Link = createLink(MyLink)
+```
+
+
+
+To use React Aria's render props, including the `className`, `style`, and `children` functions, create a wrapper component and pass that to `createLink`.
+
+
+
+
+
+# React
+
+### Chakra UI example
+
+```tsx title="ChakraLinkComponent.tsx"
+import * as React from 'react'
+import { createLink, LinkComponent } from '@tanstack/react-router'
+import { Link } from '@chakra-ui/react'
+
+interface ChakraLinkProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof Link>,
+  'href'
+> {
+  // Add any additional props you want to pass to the link
+}
+
+const ChakraLinkComponent = React.forwardRef<
+  HTMLAnchorElement,
+  ChakraLinkProps
+>((props, ref) => {
+  return <Link ref={ref} {...props} />
+})
+
+const CreatedLinkComponent = createLink(ChakraLinkComponent)
+
+export const CustomLink: LinkComponent<typeof ChakraLinkComponent> = (
+  props,
+) => {
+  return (
+    <CreatedLinkComponent
+      textDecoration={'underline'}
+      _hover={{ textDecoration: 'none' }}
+      _focus={{ textDecoration: 'none' }}
+      preload={'intent'}
+      {...props}
+    />
+  )
+}
+```
+
+
+
+
+
+# React
+
+### MUI example
+
+There is an [example](https://github.com/TanStack/router/tree/main/examples/react/start-material-ui) available which uses these patterns.
+
+#### `Link`
+
+If the MUI `Link` should simply behave like the router `Link`, it can be just wrapped with `createLink`:
+
+
+
+```tsx title="CustomLink.tsx"
+import { createLink } from '@tanstack/react-router'
+import { Link } from '@mui/material'
+
+export const CustomLink = createLink(Link)
+```
+
+
+
+If the `Link` should be customized this approach can be used:
+
+
+
+```tsx title="CustomLink.tsx"
+import React from 'react'
+import { createLink } from '@tanstack/react-router'
+import { Link } from '@mui/material'
+import type { LinkProps } from '@mui/material'
+import type { LinkComponent } from '@tanstack/react-router'
+
+interface MUILinkProps extends LinkProps {
+  // Add any additional props you want to pass to the Link
+}
+
+const MUILinkComponent = React.forwardRef<HTMLAnchorElement, MUILinkProps>(
+  (props, ref) => <Link ref={ref} {...props} />,
+)
+
+const CreatedLinkComponent = createLink(MUILinkComponent)
+
+export const CustomLink: LinkComponent<typeof MUILinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}
+
+// Can also be styled
+```
+
+
+
+#### `Button`
+
+If a `Button` should be used as a router `Link`, the `component` should be set as `a`:
+
+
+
+```tsx title="CustomButtonLink.tsx"
+import React from 'react'
+import { createLink } from '@tanstack/react-router'
+import { Button } from '@mui/material'
+import type { ButtonProps } from '@mui/material'
+import type { LinkComponent } from '@tanstack/react-router'
+
+interface MUIButtonLinkProps extends ButtonProps<'a'> {
+  // Add any additional props you want to pass to the Button
+}
+
+const MUIButtonLinkComponent = React.forwardRef<
+  HTMLAnchorElement,
+  MUIButtonLinkProps
+>((props, ref) => <Button ref={ref} component="a" {...props} />)
+
+const CreatedButtonLinkComponent = createLink(MUIButtonLinkComponent)
+
+export const CustomButtonLink: LinkComponent<typeof MUIButtonLinkComponent> = (
+  props,
+) => {
+  return <CreatedButtonLinkComponent preload={'intent'} {...props} />
+}
+```
+
+
+
+#### Usage with `styled`
+
+Any of these MUI approaches can then be used with `styled`:
+
+
+
+```tsx title="StyledCustomLink.tsx"
+import { css, styled } from '@mui/material'
+import { CustomLink } from './CustomLink'
+
+const StyledCustomLink = styled(CustomLink)(
+  ({ theme }) => css`
+    color: ${theme.palette.common.white};
+  `,
+)
+```
+
+
+
+
+
+
+
+# React
+
+### Mantine example
+
+
+
+```tsx title="CustomLink.tsx"
+import * as React from 'react'
+import { createLink, LinkComponent } from '@tanstack/react-router'
+import { Anchor, AnchorProps } from '@mantine/core'
+
+interface MantineAnchorProps extends Omit<AnchorProps, 'href'> {
+  // Add any additional props you want to pass to the anchor
+}
+
+const MantineLinkComponent = React.forwardRef<
+  HTMLAnchorElement,
+  MantineAnchorProps
+>((props, ref) => {
+  return <Anchor ref={ref} {...props} />
+})
+
+const CreatedLinkComponent = createLink(MantineLinkComponent)
+
+export const CustomLink: LinkComponent<typeof MantineLinkComponent> = (
+  props,
+) => {
+  return <CreatedLinkComponent preload="intent" {...props} />
+}
+```
+
+
+
+
+
+
+
+# Solid
+
+### Some Library example
+
+
+
+```tsx title="UntitledLink.tsx"
+// TODO: Add this example.
+```
+
+
+
+
diff --git a/mintlify/router/guide/custom-search-param-serialization.md b/mintlify/router/guide/custom-search-param-serialization.md
new file mode 100644
index 000000000..8e5084487
--- /dev/null
+++ b/mintlify/router/guide/custom-search-param-serialization.md
@@ -0,0 +1,383 @@
+---
+title: Custom Search Param Serialization
+---
+
+By default, TanStack Router parses and serializes your URL Search Params automatically using `JSON.stringify` and `JSON.parse`. This process involves escaping and unescaping the search string, which is a common practice for URL search params, in addition to the serialization and deserialization of the search object.
+
+For instance, using the default configuration, if you have the following search object:
+
+```tsx
+const search = {
+  page: 1,
+  sort: 'asc',
+  filters: { author: 'tanner', min_words: 800 },
+}
+```
+
+It would be serialized and escaped into the following search string:
+
+```txt
+?page=1&sort=asc&filters=%7B%22author%22%3A%22tanner%22%2C%22min_words%22%3A800%7D
+```
+
+We can implement the default behavior with the following code:
+
+
+
+# React
+
+```tsx
+import {
+  createRouter,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(JSON.parse),
+  stringifySearch: stringifySearchWith(JSON.stringify),
+})
+```
+
+# Solid
+
+```tsx
+import {
+  createRouter,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(JSON.parse),
+  stringifySearch: stringifySearchWith(JSON.stringify),
+})
+```
+
+
+
+However, this default behavior may not be suitable for all use cases. For example, you may want to use a different serialization format, such as base64 encoding, or you may want to use a purpose-built serialization/deserialization library, like [query-string](https://github.com/sindresorhus/query-string), [JSURL2](https://github.com/wmertens/jsurl2), or [Zipson](https://jgranstrom.github.io/zipson/).
+
+This can be achieved by providing your own serialization and deserialization functions to the `parseSearch` and `stringifySearch` options in the [`Router`](/router/api/router/RouterOptionsType#stringifysearch-method) configuration. When doing this, you can utilize TanStack Router's built-in helper functions, `parseSearchWith` and `stringifySearchWith`, to simplify the process.
+
+> [!TIP]
+> An important aspect of serialization and deserialization, is that you are able to get the same object back after deserialization. This is important because if the serialization and deserialization process is not done correctly, you may lose some information. For example, if you are using a library that does not support nested objects, you may lose the nested object when deserializing the search string.
+
+![Diagram showing idempotent nature of URL search param serialization and deserialization](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/search-serialization-deserialization-idempotency.jpg)
+
+Here are some examples of how you can customize the search param serialization in TanStack Router:
+
+## Using Base64
+
+It's common to base64 encode your search params to achieve maximum compatibility across browsers and URL unfurlers, etc. This can be done with the following code:
+
+
+
+# React
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/react-router'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(JSON.stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+```
+
+# Solid
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(JSON.stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+```
+
+
+
+> [⚠️ Why does this snippet not use atob/btoa?](#safe-binary-encodingdecoding)
+
+So, if we were to turn the previous object into a search string using this configuration, it would look like this:
+
+```txt
+?page=1&sort=asc&filters=eyJhdXRob3IiOiJ0YW5uZXIiLCJtaW5fd29yZHMiOjgwMH0%3D
+```
+
+> [!WARNING]
+> If you are serializing user input into Base64, you run the risk of causing a collision with the URL deserialization. This can lead to unexpected behavior, such as the URL not being parsed correctly or being interpreted as a different value. To avoid this, you should encode the search params using a safe binary encoding/decoding method (see below).
+
+## Using the query-string library
+
+The [query-string](https://github.com/sindresorhus/query-string) library is a popular for being able to reliably parse and stringify query strings. You can use it to customize the serialization format of your search params. This can be done with the following code:
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+import qs from 'query-string'
+
+const router = createRouter({
+  // ...
+  stringifySearch: stringifySearchWith((value) =>
+    qs.stringify(value, {
+      // ...options
+    }),
+  ),
+  parseSearch: parseSearchWith((value) =>
+    qs.parse(value, {
+      // ...options
+    }),
+  ),
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+import qs from 'query-string'
+
+const router = createRouter({
+  // ...
+  stringifySearch: stringifySearchWith((value) =>
+    qs.stringify(value, {
+      // ...options
+    }),
+  ),
+  parseSearch: parseSearchWith((value) =>
+    qs.parse(value, {
+      // ...options
+    }),
+  ),
+})
+```
+
+
+
+So, if we were to turn the previous object into a search string using this configuration, it would look like this:
+
+```txt
+?page=1&sort=asc&filters=author%3Dtanner%26min_words%3D800
+```
+
+## Using the JSURL2 library
+
+[JSURL2](https://github.com/wmertens/jsurl2) is a non-standard library that can compress URLs while still maintaining readability. This can be done with the following code:
+
+
+
+# React
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/react-router'
+import { parse, stringify } from 'jsurl2'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(parse),
+  stringifySearch: stringifySearchWith(stringify),
+})
+```
+
+# Solid
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+import { parse, stringify } from 'jsurl2'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(parse),
+  stringifySearch: stringifySearchWith(stringify),
+})
+```
+
+
+
+So, if we were to turn the previous object into a search string using this configuration, it would look like this:
+
+```txt
+?page=1&sort=asc&filters=(author~tanner~min*_words~800)~
+```
+
+## Using the Zipson library
+
+[Zipson](https://jgranstrom.github.io/zipson/) is a very user-friendly and performant JSON compression library (both in runtime performance and the resulting compression performance). To compress your search params with it (which requires escaping/unescaping and base64 encoding/decoding them as well), you can use the following code:
+
+
+
+# React
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/react-router'
+import { stringify, parse } from 'zipson'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+```
+
+# Solid
+
+```tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+import { stringify, parse } from 'zipson'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+```
+
+
+
+> [⚠️ Why does this snippet not use atob/btoa?](#safe-binary-encodingdecoding)
+
+So, if we were to turn the previous object into a search string using this configuration, it would look like this:
+
+```txt
+?page=1&sort=asc&filters=JTdCJUMyJUE4YXV0aG9yJUMyJUE4JUMyJUE4dGFubmVyJUMyJUE4JUMyJUE4bWluX3dvcmRzJUMyJUE4JUMyJUEyQ3UlN0Q%3D
+```
+
+&lt;hr&gt;
+
+## Safe Binary Encoding/Decoding
+
+In the browser, the `atob` and `btoa` functions are not guaranteed to work properly with non-UTF8 characters. We recommend using these encoding/decoding utilities instead:
+
+To encode from a string to a binary string:
+
+```ts
+export function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+```
+
+To decode from a binary string to a string:
+
+```ts
+export function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+```
diff --git a/mintlify/router/guide/data-loading.md b/mintlify/router/guide/data-loading.md
new file mode 100644
index 000000000..5bbf704b4
--- /dev/null
+++ b/mintlify/router/guide/data-loading.md
@@ -0,0 +1,644 @@
+---
+id: data-loading
+title: Data Loading
+---
+
+Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early as possible, in parallel. The router is the best place to coordinate these async dependencies as it's usually the only place in your app that knows where users are headed before content is rendered.
+
+You may be familiar with `getServerSideProps` from Next.js or `loader`s from Remix/React-Router. TanStack Router has similar functionality to preload/load assets on a per-route basis in parallel allowing it to render as quickly as possible as it fetches via suspense.
+
+Beyond these normal expectations of a router, TanStack Router goes above and beyond and provides **built-in SWR Caching**, a long-term in-memory caching layer for route loaders. This means that you can use TanStack Router to both preload data for your routes so they load instantaneously or temporarily cache route data for previously visited routes to use again later.
+
+## The route loading lifecycle
+
+Every time a URL/history update is detected, the router executes the following sequence:
+
+- Route Matching (Top-Down)
+  - `route.params.parse`
+  - `route.validateSearch`
+- Route Pre-Loading (Serial)
+  - `route.beforeLoad`
+  - `route.onError`
+    - `route.errorComponent` / `parentRoute.errorComponent` / `router.defaultErrorComponent`
+- Route Loading (Parallel)
+  - `route.component.preload?`
+  - `route.loader`
+    - `route.pendingComponent` (Optional)
+    - `route.component`
+  - `route.onError`
+    - `route.errorComponent` / `parentRoute.errorComponent` / `router.defaultErrorComponent`
+
+## To Router Cache or not to Router Cache?
+
+There is a high possibility that TanStack's router cache will be a good fit for most smaller to medium size applications, but it's important to understand the tradeoffs of using it vs a more robust caching solution like TanStack Query:
+
+TanStack Router Cache Pros:
+
+- Built-in, easy to use, no extra dependencies
+- Handles deduping, preloading, loading, stale-while-revalidate, background refetching on a per-route basis
+- Coarse invalidation (invalidate all routes and cache at once)
+- Automatic garbage collection
+- Works great for apps that share little data between routes
+- "Just works" for SSR
+
+TanStack Router Cache Cons:
+
+- No persistence adapters/model
+- No shared caching/deduping between routes
+- No built-in mutation APIs (a basic `useMutation` hook is provided in many examples that may be sufficient for many use cases)
+- No built-in cache-level optimistic update APIs (you can still use ephemeral state from something like a `useMutation` hook to achieve this at the component level)
+
+> [!TIP]
+> If you know right away that you'd like to or need to use something more robust like TanStack Query, skip to the [External Data Loading](/router/guide/external-data-loading) guide.
+
+## Using the Router Cache
+
+The router cache is built-in and is as easy as returning data from any route's `loader` function. Let's learn how!
+
+## Route `loader`s
+
+Route `loader` functions are called when a route match is loaded. They are called with a single parameter which is an object containing many helpful properties. We'll go over those in a bit, but first, let's look at the two supported `loader` forms:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+})
+```
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: {
+    handler: () => fetchPosts(),
+  },
+})
+```
+
+Use the object form when you want to configure loader-specific behavior such as `staleReloadMode`.
+
+## `loader` Parameters
+
+The `loader` function receives a single object with the following properties:
+
+- `abortController` - The route's abortController. Its signal is cancelled when the route is unloaded or when the Route is no longer relevant and the current invocation of the `loader` function becomes outdated.
+- `cause` - The cause of the current route match. Can be either one of the following:
+  - `enter` - When the route is matched and loaded after not being matched in the previous location.
+  - `preload` - When the route is being preloaded.
+  - `stay` - When the route is matched and loaded after being matched in the previous location.
+- `context` - The route's context object, which is a merged union of:
+  - Parent route context
+  - This route's context as provided by the `beforeLoad` option
+- `deps` - The object value returned from the `Route.loaderDeps` function. If `Route.loaderDeps` is not defined, an empty object will be provided instead.
+- `location` - The current location
+- `params` - The route's path params
+- `parentMatchPromise` - `Promise<RouteMatch>` (`undefined` for the root route)
+- `preload` - Boolean which is `true` when the route is being preloaded instead of loaded
+- `route` - The route itself
+
+Using these parameters, we can do a lot of cool things, but first, let's take a look at how we can control it and when the `loader` function is called.
+
+## Consuming data from `loader`s
+
+To consume data from a `loader`, use the `useLoaderData` hook defined on your Route object.
+
+```tsx
+const posts = Route.useLoaderData()
+```
+
+If you don't have ready access to your route object (i.e. you're deep in the component tree for the current route), you can use `getRouteApi` to access the same hook (as well as the other hooks on the Route object). This should be preferred over importing the Route object, which is likely to create circular dependencies.
+
+
+
+# React
+
+```tsx
+import { getRouteApi } from '@tanstack/react-router'
+
+// in your component
+
+const routeApi = getRouteApi('/posts')
+const data = routeApi.useLoaderData()
+```
+
+# Solid
+
+```tsx
+import { getRouteApi } from '@tanstack/solid-router'
+
+// in your component
+
+const routeApi = getRouteApi('/posts')
+const data = routeApi.useLoaderData()
+```
+
+
+
+## Dependency-based Stale-While-Revalidate Caching
+
+TanStack Router provides a built-in Stale-While-Revalidate caching layer for route loaders that is keyed on the dependencies of a route:
+
+- The route's fully parsed pathname
+  - e.g. `/posts/1` vs `/posts/2`
+- Any additional dependencies provided by the `loaderDeps` option
+  - e.g. `loaderDeps: ({ search: { pageIndex, pageSize } }) => ({ pageIndex, pageSize })`
+
+Using these dependencies as keys, TanStack Router will cache the data returned from a route's `loader` function and use it to fulfill subsequent requests for the same route match. This means that if a route's data is already in the cache, it will be returned immediately, then **potentially** be refetched in the background depending on the "freshness" of the data.
+
+### Key options
+
+To control router dependencies and "freshness", TanStack Router provides a plethora of options to control the keying and caching behavior of your route loaders. Let's take a look at them in the order that you are most likely to use them:
+
+- `routeOptions.loaderDeps`
+  - A function that supplies you the search params for a router and returns an object of dependencies for use in your `loader` function. When these deps changed from navigation to navigation, it will cause the route to reload regardless of `staleTime`s. The deps are compared using a deep equality check.
+- `routeOptions.staleTime`
+- `routerOptions.defaultStaleTime`
+  - The number of milliseconds that a route's data should be considered fresh when attempting to load.
+- `routeOptions.preloadStaleTime`
+- `routerOptions.defaultPreloadStaleTime`
+  - The number of milliseconds that a route's data should be considered fresh attempting to preload.
+- `routeOptions.gcTime`
+- `routerOptions.defaultGcTime`
+  - The number of milliseconds that a route's data should be kept in the cache before being garbage collected.
+- `routeOptions.shouldReload`
+  - A function that receives the same `beforeLoad` and `loaderContext` parameters and returns a boolean indicating if the route should reload. This offers one more level of control over when a route should reload beyond `staleTime` and `loaderDeps` and can be used to implement patterns similar to Remix's `shouldLoad` option.
+- `routeOptions.loader.staleReloadMode`
+- `routerOptions.defaultStaleReloadMode`
+  - Controls what happens when a matched route already has stale successful data. Use `'background'` for stale-while-revalidate, or `'blocking'` to wait for the stale loader reload to finish before continuing.
+
+### ⚠️ Some Important Defaults
+
+- By default, the `staleTime` is set to `0`, meaning that the route's data is immediately considered stale. Stale matches are reloaded in the background when the route is entered again, when its loader key changes (path params used by the route or `loaderDeps`), or when `router.load()` is called explicitly.
+- By default, a previously preloaded route is considered fresh for **30 seconds**. This means if a route is preloaded, then preloaded again within 30 seconds, the second preload will be ignored. This prevents unnecessary preloads from happening too frequently. **When a route is loaded normally, the standard `staleTime` is used.**
+- By default, the `gcTime` is set to **30 minutes**, meaning that any route data that has not been accessed in 30 minutes will be garbage collected and removed from the cache.
+- By default, `staleReloadMode` is `'background'`, so stale successful matches keep rendering with their existing `loaderData` while the loader revalidates in the background.
+- `router.invalidate()` will force all active routes to reload their loaders immediately and mark every cached route's data as stale.
+
+### Using `loaderDeps` to access search params
+
+Imagine a `/posts` route supports some pagination via search params `offset` and `limit`. For the cache to uniquely store this data, we need to access these search params via the `loaderDeps` function. By explicitly identifying them, each route match for `/posts` with different `offset` and `limit` won't get mixed up!
+
+Once we have these deps in place, the route will always reload when the deps change.
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loaderDeps: ({ search: { offset, limit } }) => ({ offset, limit }),
+  loader: ({ deps: { offset, limit } }) =>
+    fetchPosts({
+      offset,
+      limit,
+    }),
+})
+```
+
+> [!WARNING]
+> **Only include dependencies you actually use in the loader.**
+>
+> A common mistake is returning the entire `search` object:
+>
+> ```tsx
+> // ❌ Don't do this - causes unnecessary cache invalidation
+> loaderDeps: (&#123; search &#125;) => search,
+> loader: (&#123; deps &#125;) => fetchPosts(&#123; page: deps.page &#125;), // only uses page!
+> ```
+>
+> This causes the route to reload whenever ANY search param changes, even params not used in the loader (like `viewMode` or `sortDirection`). Instead, extract only what you need:
+>
+> ```tsx
+> // ✅ Do this - only reload when used params change
+> loaderDeps: (&#123; search &#125;) => (&#123;
+>   page: search.page,
+>   limit: search.limit,
+> &#125;),
+> loader: (&#123; deps &#125;) => fetchPosts(deps),
+> ```
+
+### Using `staleTime` to control how long data is considered fresh
+
+By default, `staleTime` for navigations is set to `0`ms (and 30 seconds for preloads) which means that the route's data will always be considered stale. When a stale route is entered again, its loader key changes, or `router.load()` is called explicitly, the route will reload in the background.
+
+**This is a good default for most use cases, but you may find that some route data is more static or potentially expensive to load.** In these cases, you can use the `staleTime` option to control how long the route's data is considered fresh for navigations. Let's take a look at an example:
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  // Consider the route's data fresh for 10 seconds
+  staleTime: 10_000,
+})
+```
+
+By passing `10_000` to the `staleTime` option, we are telling the router to consider the route's data fresh for 10 seconds. This means that if the user navigates to `/posts` from `/about` within 10 seconds of the last loader result, the route's data will not be reloaded. If the user then navigates to `/posts` from `/about` after 10 seconds, the route's data will be reloaded **in the background**.
+
+## Choosing background vs blocking stale reloads
+
+By default, stale successful matches use stale-while-revalidate behavior. That means the router can render with the existing `loaderData` immediately and then refresh it in the background.
+
+If you want a specific loader to wait for a stale reload to finish before continuing, use the object form and set `staleReloadMode: 'blocking'`:
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: {
+    handler: () => fetchPosts(),
+    staleReloadMode: 'blocking',
+  },
+})
+```
+
+You can also change the default for the entire router:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  defaultStaleReloadMode: 'blocking',
+})
+```
+
+Use `'background'` when showing stale data during revalidation is acceptable. Use `'blocking'` when you want stale matches to behave more like a fresh load and wait for the new loader result.
+
+## Turning off automatic stale reloads
+
+To disable automatic stale reloads for a route, set the `staleTime` option to `Infinity`:
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  staleTime: Infinity,
+})
+```
+
+You can even turn this off for all routes by setting the `defaultStaleTime` option on the router:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  defaultStaleTime: Infinity,
+})
+```
+
+This differs from `staleReloadMode: 'blocking'`:
+
+- `staleTime: Infinity` prevents the route from becoming stale in the first place
+- `staleReloadMode: 'blocking'` still allows stale reloads, but waits for them instead of doing them in the background
+
+## Using `shouldReload` and `gcTime` to opt-out of caching
+
+Similar to Remix's default functionality, you may want to configure a route to only load on entry or when critical loader deps change. You can do this by using the `gcTime` option combined with the `shouldReload` option, which accepts either a `boolean` or a function that receives the same `beforeLoad` and `loaderContext` parameters and returns a boolean indicating if the route should reload.
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loaderDeps: ({ search: { offset, limit } }) => ({ offset, limit }),
+  loader: ({ deps }) => fetchPosts(deps),
+  // Do not cache this route's data after it's unloaded
+  gcTime: 0,
+  // Only reload the route when the user navigates to it or when deps change
+  shouldReload: false,
+})
+```
+
+### Opting out of caching while still preloading
+
+Even though you may opt-out of short-term caching for your route data, you can still get the benefits of preloading! With the above configuration, preloading will still "just work" with the default `preloadGcTime`. This means that if a route is preloaded, then navigated to, the route's data will be considered fresh and will not be reloaded.
+
+To opt out of preloading, don't turn it on via the `routerOptions.defaultPreload` or `routeOptions.preload` options.
+
+## Passing all loader events to an external cache
+
+We break down this use case in the [External Data Loading](/router/guide/external-data-loading) page, but if you'd like to use an external cache like TanStack Query, you can do so by passing all loader events to your external cache. As long as you are using the defaults, the only change you'll need to make is to set the `defaultPreloadStaleTime` option on the router to `0`:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  defaultPreloadStaleTime: 0,
+})
+```
+
+This will ensure that every preload, load, and reload event will trigger your `loader` functions, which can then be handled and deduped by your external cache.
+
+## Using Router Context
+
+The `context` argument passed to the `loader` function is an object containing a merged union of:
+
+- Parent route context
+- This route's context as provided by the `beforeLoad` option
+
+Starting at the very top of the router, you can pass an initial context to the router via the `context` option. This context will be available to all routes in the router and get copied and extended by each route as they are matched. This happens by passing a context to a route via the `beforeLoad` option. This context will be available to all the route's child routes. The resulting context will be available to the route's `loader` function.
+
+In this example, we'll create a function in our route context to fetch posts, then use it in our `loader` function.
+
+> 🧠 Context is a powerful tool for dependency injection. You can use it to inject services, hooks, and other objects into your router and routes. You can also additively pass data down the route tree at every route using a route's `beforeLoad` option.
+
+- `/utils/fetchPosts.tsx`
+
+```tsx
+export const fetchPosts = async () => {
+  const res = await fetch(`/api/posts?page=${pageIndex}`)
+  if (!res.ok) throw new Error('Failed to fetch posts')
+  return res.json()
+}
+```
+
+- `/routes/__root.tsx`
+
+
+
+# React
+
+```tsx
+import { createRootRouteWithContext } from '@tanstack/react-router'
+
+// Create a root route using the createRootRouteWithContext<{...}>() function and pass it whatever types you would like to be available in your router context.
+export const Route = createRootRouteWithContext<{
+  fetchPosts: typeof fetchPosts
+}>()() // NOTE: the double call is on purpose, since createRootRouteWithContext is a factory ;)
+```
+
+# Solid
+
+```tsx
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+// Create a root route using the createRootRouteWithContext<{...}>() function and pass it whatever types you would like to be available in your router context.
+export const Route = createRootRouteWithContext<{
+  fetchPosts: typeof fetchPosts
+}>()() // NOTE: the double call is on purpose, since createRootRouteWithContext is a factory ;)
+```
+
+
+
+- `/routes/posts.tsx`
+
+```tsx
+// Notice how our postsRoute references context to get our fetchPosts function
+// This can be a powerful tool for dependency injection across your router
+// and routes.
+export const Route = createFileRoute('/posts')({
+  loader: ({ context: { fetchPosts } }) => fetchPosts(),
+})
+```
+
+- `/router.tsx`
+
+```tsx
+import { routeTree } from './routeTree.gen'
+
+// Use your routerContext to create a new router
+// This will require that you fullfil the type requirements of the routerContext
+const router = createRouter({
+  routeTree,
+  context: {
+    // Supply the fetchPosts function to the router context
+    fetchPosts,
+  },
+})
+```
+
+## Using Path Params
+
+To use path params in your `loader` function, access them via the `params` property on the function's parameters. Here's an example:
+
+```tsx
+// src/routes/posts.$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: ({ params: { postId } }) => fetchPostById(postId),
+})
+```
+
+## Using Route Context
+
+Passing down global context to your router is great, but what if you want to provide context that is specific to a route? This is where the `beforeLoad` option comes in. The `beforeLoad` option is a function that runs right before attempting to load a route and receives the same parameters as `loader`. Beyond its ability to redirect potential matches, block loader requests, etc, it can also return an object that will be merged into the route's context. Let's take a look at an example where we inject some data into our route context via the `beforeLoad` option:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  // Pass the fetchPosts function to the route context
+  beforeLoad: () => ({
+    fetchPosts: () => console.info('foo'),
+  }),
+  loader: ({ context: { fetchPosts } }) => {
+    fetchPosts() // 'foo'
+
+    // ...
+  },
+})
+```
+
+## Using Search Params in Loaders
+
+> ❓ But wait Tanner... where the heck are my search params?!
+
+You might be here wondering why `search` isn't directly available in the `loader` function's parameters. We've purposefully designed it this way to help you succeed. Let's take a look at why:
+
+- Search Parameters being used in a loader function are a very good indicator that those search params should also be used to uniquely identify the data being loaded. For example, you may have a route that uses a search param like `pageIndex` that uniquely identifies the data held inside of the route match. Or, imagine a `/users/user` route that uses the search param `userId` to identify a specific user in your application, you might model your url like this: `/users/user?userId=123`. This means that your `user` route would need some extra help to identify a specific user.
+- Directly accessing search params in a loader function can lead to bugs in caching and preloading where the data being loaded is not unique to the current URL pathname and search params. For example, you might ask your `/posts` route to preload page 2's results, but without the distinction of pages in your route configuration, you will end up fetching, storing and displaying page 2's data on your `/posts` or `?page=1` screen instead of it preloading in the background!
+- Placing a threshold between search parameters and the loader function allows the router to understand your dependencies and reactivity.
+
+```tsx
+// /routes/users.user.tsx
+export const Route = createFileRoute('/users/user')({
+  validateSearch: (search) =>
+    search as {
+      userId: string
+    },
+  loaderDeps: ({ search: { userId } }) => ({
+    userId,
+  }),
+  loader: async ({ deps: { userId } }) => getUser(userId),
+})
+```
+
+### Accessing Search Params via `routeOptions.loaderDeps`
+
+```tsx
+// /routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  // Use zod to validate and parse the search params
+  validateSearch: z.object({
+    offset: z.number().int().nonnegative().catch(0),
+  }),
+  // Pass the offset to your loader deps via the loaderDeps function
+  loaderDeps: ({ search: { offset } }) => ({ offset }),
+  // Use the offset from context in the loader function
+  loader: async ({ deps: { offset } }) =>
+    fetchPosts({
+      offset,
+    }),
+})
+```
+
+## Using the Abort Signal
+
+The `abortController` property of the `loader` function is an [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). Its signal is cancelled when the route is unloaded or when the `loader` call becomes outdated. This is useful for cancelling network requests when the route is unloaded or when the route's params change. Here is an example using it with a fetch call:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: ({ abortController }) =>
+    fetchPosts({
+      // Pass this to an underlying fetch call or anything that supports signals
+      signal: abortController.signal,
+    }),
+})
+```
+
+## Using the `preload` flag
+
+The `preload` property of the `loader` function is a boolean which is `true` when the route is being preloaded instead of loaded. Some data loading libraries may handle preloading differently than a standard fetch, so you may want to pass `preload` to your data loading library, or use it to execute the appropriate data loading logic:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: async ({ preload }) =>
+    fetchPosts({
+      maxAge: preload ? 10_000 : 0, // Preloads should hang around a bit longer
+    }),
+})
+```
+
+## Handling Slow Loaders
+
+Ideally most route loaders can resolve their data within a short moment, removing the need to render a placeholder spinner and simply rely on suspense to render the next route when it's completely ready. When critical data that is required to render a route's component is slow though, you have 2 options:
+
+- Split up your fast and slow data into separate promises and `defer` the slow data until after the fast data is loaded (see the [Deferred Data Loading](/router/guide/deferred-data-loading) guide).
+- Show a pending component after an optimistic suspense threshold until all of the data is ready (See below).
+
+## Showing a pending component
+
+**By default, TanStack Router will show a pending component for loaders that take longer than 1 second to resolve.** This is an optimistic threshold that can be configured via:
+
+- `routeOptions.pendingMs` or
+- `routerOptions.defaultPendingMs`
+
+When the pending time threshold is exceeded, the router will render the `pendingComponent` option of the route, if configured.
+
+## Avoiding Pending Component Flash
+
+If you're using a pending component, the last thing you want is for your pending time threshold to be met, then have your data resolve immediately after, resulting in a jarring flash of your pending component. To avoid this, **TanStack Router by default will show your pending component for at least 500ms**. This is an optimistic threshold that can be configured via:
+
+- `routeOptions.pendingMinMs` or
+- `routerOptions.defaultPendingMinMs`
+
+## Handling Errors
+
+TanStack Router provides a few ways to handle errors that occur during the route loading lifecycle. Let's take a look at them.
+
+### Handling Errors with `routeOptions.onError`
+
+The `routeOptions.onError` option is a function that is called when an error occurs during the route loading.
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  onError: ({ error }) => {
+    // Log the error
+    console.error(error)
+  },
+})
+```
+
+### Handling Errors with `routeOptions.onCatch`
+
+The `routeOptions.onCatch` option is a function that is called whenever an error was caught by the router's CatchBoundary.
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  onCatch: ({ error, errorInfo }) => {
+    // Log the error
+    console.error(error)
+  },
+})
+```
+
+### Handling Errors with `routeOptions.errorComponent`
+
+The `routeOptions.errorComponent` option is a component that is rendered when an error occurs during the route loading or rendering lifecycle. It is rendered with the following props:
+
+- `error` - The error that occurred
+- `reset` - A function to reset the internal `CatchBoundary`
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  errorComponent: ({ error }) => {
+    // Render an error message
+    return <div>{error.message}</div>
+  },
+})
+```
+
+The `reset` function can be used to allow the user to retry rendering the error boundaries normal children:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  errorComponent: ({ error, reset }) => {
+    return (
+      <div>
+        {error.message}
+        <button
+          onClick={() => {
+            // Reset the router error boundary
+            reset()
+          }}
+        >
+          retry
+        </button>
+      </div>
+    )
+  },
+})
+```
+
+If the error was the result of a route load, you should instead call `router.invalidate()`, which will coordinate both a router reload and an error boundary reset:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  errorComponent: ({ error, reset }) => {
+    const router = useRouter()
+
+    return (
+      <div>
+        {error.message}
+        <button
+          onClick={() => {
+            // Invalidate the route to reload the loader, which will also reset the error boundary
+            router.invalidate()
+          }}
+        >
+          retry
+        </button>
+      </div>
+    )
+  },
+})
+```
+
+### Using the default `ErrorComponent`
+
+TanStack Router provides a default `ErrorComponent` that is rendered when an error occurs during the route loading or rendering lifecycle. If you choose to override your routes' error components, it's still wise to always fall back to rendering any uncaught errors with the default `ErrorComponent`:
+
+```tsx
+// src/routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  errorComponent: ({ error }) => {
+    if (error instanceof MyCustomError) {
+      // Render a custom error message
+      return <div>{error.message}</div>
+    }
+
+    // Fallback to the default ErrorComponent
+    return <ErrorComponent error={error} />
+  },
+})
+```
diff --git a/mintlify/router/guide/data-mutations.md b/mintlify/router/guide/data-mutations.md
new file mode 100644
index 000000000..ee8b22981
--- /dev/null
+++ b/mintlify/router/guide/data-mutations.md
@@ -0,0 +1,142 @@
+---
+title: Data Mutations
+---
+
+Since TanStack router does not store or cache data, it's role in data mutation is slim to none outside of reacting to potential URL side-effects from external mutation events. That said, we've compiled a list of mutation-related features you might find useful and libraries that implement them.
+
+Look for and use mutation utilities that support:
+
+- Handling and caching submission state
+- Providing both local and global optimistic UI support
+- Built-in hooks to wire up invalidation (or automatically support it)
+- Handling multiple in-flight mutations at once
+- Organizing mutation state as a globally accessible resource
+- Submission state history and garbage collection
+
+Some suggested libraries:
+
+- [TanStack Query](/query/framework/react/guides/mutations)
+- [SWR](https://swr.vercel.app/)
+- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
+- [urql](https://formidable.com/open-source/urql/)
+- [Relay](https://relay.dev/)
+- [Apollo](https://www.apollographql.com/docs/react/)
+
+Or, even...
+
+- [Zustand](https://zustand-demo.pmnd.rs/)
+- [Jotai](https://jotai.org/)
+- [Recoil](https://recoiljs.org/)
+- [Redux](https://redux.js.org/)
+
+Similar to data fetching, mutation state isn't a one-size-fits-all solution, so you'll need to pick a solution that fits your needs and your team's needs. We recommend trying out a few different solutions and seeing what works best for you.
+
+> ⚠️ Still here? Submission state is an interesting topic when it comes to persistence. Do you keep every mutation around forever? How do you know when to get rid of it? What if the user navigates away from the screen and then back? Let's dig in!
+
+## Invalidating TanStack Router after a mutation
+
+TanStack Router comes with short-term caching built-in. So even though we're not storing any data after a route match is unmounted, there is a high probability that if any mutations are made related to the data stored in the Router, the current route matches' data could become stale.
+
+When mutations related to loader data are made, we can use `router.invalidate` to force the router to reload all of the current route matches:
+
+```tsx
+const router = useRouter()
+
+const addTodo = async (todo: Todo) => {
+  try {
+    await api.addTodo()
+    router.invalidate()
+  } catch {
+    //
+  }
+}
+```
+
+Invalidating all of the current route matches happens in the background, so existing data will continue to be served until the new data is ready, just as if you were navigating to a new route.
+
+If you want to await the invalidation until all loaders have finished, pass `{sync: true}` into `router.invalidate`:
+
+```tsx
+const router = useRouter()
+
+const addTodo = async (todo: Todo) => {
+  try {
+    await api.addTodo()
+    await router.invalidate({ sync: true })
+  } catch {
+    //
+  }
+}
+```
+
+## Long-term mutation State
+
+Regardless of the mutation library used, mutations often create state related to their submission. While most mutations are set-and-forget, some mutation states are more long-lived, either to support optimistic UI or to provide feedback to the user about the status of their submissions. Most state managers will correctly keep this submission state around and expose it to make it possible to show UI elements like loading spinners, success messages, error messages, etc.
+
+Let's consider the following interactions:
+
+- User navigates to the `/posts/123/edit` screen to edit a post
+- User edits the `123` post and upon success, sees a success message below the editor that the post was updated
+- User navigates to the `/posts` screen
+- User navigates back to the `/posts/123/edit` screen again
+
+Without notifying your mutation management library about the route change, it's possible that your submission state could still be around and your user would still see the **"Post updated successfully"** message when they return to the previous screen. This is not ideal. Obviously, our intent wasn't to keep this mutation state around forever, right?!
+
+## Using mutation keys
+
+Hopefully and hypothetically, the easiest way is for your mutation library to support a keying mechanism that will allow your mutations's state to be reset when the key changes:
+
+```tsx
+const routeApi = getRouteApi('/room/$roomId/chat')
+
+function ChatRoom() {
+  const { roomId } = routeApi.useParams()
+
+  const sendMessageMutation = useCoolMutation({
+    fn: sendMessage,
+    // Clear the mutation state when the roomId changes
+    // including any submission state
+    key: ['sendMessage', roomId],
+  })
+
+  // Fire off a bunch of messages
+  const test = () => {
+    sendMessageMutation.mutate({ roomId, message: 'Hello!' })
+    sendMessageMutation.mutate({ roomId, message: 'How are you?' })
+    sendMessageMutation.mutate({ roomId, message: 'Goodbye!' })
+  }
+
+  return (
+    <>
+      {sendMessageMutation.submissions.map((submission) => {
+        return (
+          <div>
+            <div>{submission.status}</div>
+            <div>{submission.message}</div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+```
+
+## Using the `router.subscribe` method
+
+See the [Router Events guide](/router/guide/router-events) for a more complete walkthrough of the available events and when to use them.
+
+For libraries that don't have a keying mechanism, we'll likely need to manually reset the mutation state when the user navigates away from the screen. To solve this, we can use TanStack Router's `invalidate` and `subscribe` method to clear mutation states when the user is no longer in need of them.
+
+The `router.subscribe` method is a function that subscribes a callback to various router events. The event in particular that we'll use here is the `onResolved` event. It's important to understand that this event is fired when the location path is _changed (not just reloaded) and has finally resolved_.
+
+This is a great place to reset your old mutation states. Here's an example:
+
+```tsx
+const router = createRouter()
+const coolMutationCache = createCoolMutationCache()
+
+const unsubscribeFn = router.subscribe('onResolved', () => {
+  // Reset mutation states when the route changes
+  coolMutationCache.clear()
+})
+```
diff --git a/mintlify/router/guide/deferred-data-loading.md b/mintlify/router/guide/deferred-data-loading.md
new file mode 100644
index 000000000..ea7dff980
--- /dev/null
+++ b/mintlify/router/guide/deferred-data-loading.md
@@ -0,0 +1,228 @@
+---
+id: deferred-data-loading
+title: Deferred Data Loading
+---
+
+TanStack Router is designed to run loaders in parallel and wait for all of them to resolve before rendering the next route. This is great most of the time, but occasionally, you may want to show the user something sooner while the rest of the data loads in the background.
+
+Deferred data loading is a pattern that allows the router to render the next location's critical data/markup while slower, non-critical route data is resolved in the background. This process works on both the client and server (via streaming) and is a great way to improve the perceived performance of your application.
+
+If you are using a library like [TanStack Query](https://tanstack.com/query) or any other data fetching library, then deferred data loading works a bit differently. Skip ahead to the [Deferred Data Loading with External Libraries](#deferred-data-loading-with-external-libraries) section for more information.
+
+## Deferred Data Loading with `Await`
+
+To defer slow or non-critical data, return an **unawaited/unresolved** promise anywhere in your loader response:
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute, defer } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async () => {
+    // Fetch some slower data, but do not await it
+    const slowDataPromise = fetchSlowData()
+
+    // Fetch and await some data that resolves quickly
+    const fastData = await fetchFastData()
+
+    return {
+      fastData,
+      deferredSlowData: slowDataPromise,
+    }
+  },
+})
+```
+
+As soon as any awaited promises are resolved, the next route will begin rendering while the deferred promises continue to resolve.
+
+In the component, deferred promises can be resolved and utilized using the `Await` component:
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute, Await } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // ...
+  component: PostIdComponent,
+})
+
+function PostIdComponent() {
+  const { deferredSlowData, fastData } = Route.useLoaderData()
+
+  // do something with fastData
+
+  return (
+    <Await promise={deferredSlowData} fallback={<div>Loading...</div>}>
+      {(data) => {
+        return <div>{data}</div>
+      }}
+    </Await>
+  )
+}
+```
+
+> [!TIP]
+> If your component is code-split, you can use the [getRouteApi function](/router/guide/code-splitting#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useLoaderData()` hook.
+
+The `Await` component resolves the promise by triggering the nearest suspense boundary until it is resolved, after which it renders the component's `children` as a function with the resolved data.
+
+If the promise is rejected, the `Await` component will throw the serialized error, which can be caught by the nearest error boundary.
+
+
+
+# React
+
+> [!TIP]
+> In React 19, you can use the `use()` hook instead of `Await`
+
+
+
+## Deferred Data Loading with External libraries
+
+When your strategy for fetching information for the route relies on [External Data Loading](/router/guide/external-data-loading) with an external library like [TanStack Query](https://tanstack.com/query), deferred data loading works a bit differently, as the library handles the data fetching and caching for you outside of TanStack Router.
+
+So, instead of using `defer` and `Await`, you'll instead want to use the Route's `loader` to kick off the data fetching and then use the library's hooks to access the data in your components.
+
+
+
+# React
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ context: { queryClient } }) => {
+    // Kick off the fetching of some slower data, but do not await it
+    queryClient.prefetchQuery(slowDataOptions())
+
+    // Fetch and await some data that resolves quickly
+    await queryClient.ensureQueryData(fastDataOptions())
+  },
+})
+```
+
+# Solid
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ context: { queryClient } }) => {
+    // Kick off the fetching of some slower data, but do not await it
+    queryClient.prefetchQuery(slowDataOptions())
+
+    // Fetch and await some data that resolves quickly
+    await queryClient.ensureQueryData(fastDataOptions())
+  },
+})
+```
+
+
+
+Then in your component, you can use the library's hooks to access the data:
+
+
+
+# React
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // ...
+  component: PostIdComponent,
+})
+
+function PostIdComponent() {
+  const fastData = useSuspenseQuery(fastDataOptions())
+
+  // do something with fastData
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SlowDataComponent />
+    </Suspense>
+  )
+}
+
+function SlowDataComponent() {
+  const data = useSuspenseQuery(slowDataOptions())
+
+  return <div>{data}</div>
+}
+```
+
+# Solid
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+import { useSuspenseQuery } from '@tanstack/solid-query'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // ...
+  component: PostIdComponent,
+})
+
+function PostIdComponent() {
+  const fastData = useSuspenseQuery(fastDataOptions())
+
+  // do something with fastData
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SlowDataComponent />
+    </Suspense>
+  )
+}
+
+function SlowDataComponent() {
+  const data = useSuspenseQuery(slowDataOptions())
+
+  return <div>{data()}</div>
+}
+```
+
+
+
+## Caching and Invalidation
+
+Streamed promises follow the same lifecycle as the loader data they are associated with. They can even be preloaded!
+
+
+
+# React
+
+## SSR & Streaming Deferred Data
+
+**Streaming requires a server that supports it and for TanStack Router to be configured to use it properly.**
+
+Please read the entire [Streaming SSR Guide](/router/guide/ssr#streaming-ssr) for step by step instructions on how to set up your server for streaming.
+
+## SSR Streaming Lifecycle
+
+The following is a high-level overview of how deferred data streaming works with TanStack Router:
+
+- Server
+  - Promises are marked and tracked as they are returned from route loaders
+  - All loaders resolve and any deferred promises are serialized and embedded into the html
+  - The route begins to render
+  - Deferred promises rendered with the `<Await>` component trigger suspense boundaries, allowing the server to stream html up to that point
+- Client
+  - The client receives the initial html from the server
+  - `<Await>` components suspend with placeholder promises while they wait for their data to resolve on the server
+- Server
+  - As deferred promises resolve, their results (or errors) are serialized and streamed to the client via an inline script tag
+  - The resolved `<Await>` components and their suspense boundaries are resolved and their resulting HTML is streamed to the client along with their dehydrated data
+- Client
+  - The suspended placeholder promises within `<Await>` are resolved with the streamed data/error responses and either render the result or throw the error to the nearest error boundary
+
+
diff --git a/mintlify/router/guide/document-head-management.md b/mintlify/router/guide/document-head-management.md
new file mode 100644
index 000000000..f57289c74
--- /dev/null
+++ b/mintlify/router/guide/document-head-management.md
@@ -0,0 +1,332 @@
+---
+title: Document Head Management
+---
+
+Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack applications that use Start and for single-page applications that use TanStack Router. It provides:
+
+- Automatic deduping of `title` and `meta` tags
+- Automatic loading/unloading of tags based on route visibility
+- A composable way to merge `title` and `meta` tags from nested routes
+
+For full-stack applications that use Start, and even for single-page applications that use TanStack Router, managing the document head is a crucial part of any application for the following reasons:
+
+- SEO
+- Social media sharing
+- Analytics
+- CSS and JS loading/unloading
+
+To manage the document head, it's required that you render both the `<HeadContent />` and `<Scripts />` components and use the `routeOptions.head` property to manage the head of a route, which returns an object with `title`, `meta`, `links`, `styles`, and `scripts` properties.
+
+## Managing the Document Head
+
+```tsx
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        name: 'description',
+        content: 'My App is a web application',
+      },
+      {
+        title: 'My App',
+      },
+    ],
+    links: [
+      {
+        rel: 'icon',
+        href: '/favicon.ico',
+      },
+    ],
+    styles: [
+      {
+        media: 'all and (max-width: 500px)',
+        children: `p {
+                  color: blue;
+                  background-color: yellow;
+                }`,
+      },
+    ],
+    scripts: [
+      {
+        src: 'https://www.google-analytics.com/analytics.js',
+      },
+    ],
+  }),
+})
+```
+
+### Deduping
+
+Out of the box, TanStack Router will dedupe `title` and `meta` tags, preferring the **last** occurrence of each tag found in nested routes.
+
+- `title` tags defined in nested routes will override a `title` tag defined in a parent route (but you can compose them together, which is covered in a future section of this guide)
+- `meta` tags with the same `name` or `property` will be overridden by the last occurrence of that tag found in nested routes
+
+### `<HeadContent />`
+
+The `<HeadContent />` component is **required** to render the head, title, meta, link, and head-related script tags of a document.
+
+It should be **rendered either in the `<head>` tag of your root layout or as high up in the component tree as possible** if your application doesn't or can't manage the `<head>` tag.
+
+For manifest-managed assets, you can also set `crossorigin` values on emitted
+script preload and stylesheet links:
+
+```tsx
+<HeadContent assetCrossOrigin="anonymous" />
+
+<HeadContent
+  assetCrossOrigin={{
+    script: 'anonymous',
+    stylesheet: 'use-credentials',
+  }}
+/>
+```
+
+`assetCrossOrigin` only applies to manifest-managed asset links emitted by Start.
+If you also set `crossOrigin` via `transformAssets` (either the object shorthand
+or a callback return value), `assetCrossOrigin` wins.
+
+### Start/Full-Stack Applications
+
+
+
+# React
+
+```tsx
+import { HeadContent } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+      </body>
+    </html>
+  ),
+})
+```
+
+# Solid
+
+```tsx
+import { HeadContent } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+      </body>
+    </html>
+  ),
+})
+```
+
+
+
+### Single-Page Applications
+
+First, remove the `<title>` tag from the index.html if you have set any.
+
+
+
+# React
+
+```tsx
+import { HeadContent } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <HeadContent />
+      <Outlet />
+    </>
+  ),
+})
+```
+
+# Solid
+
+```tsx
+import { HeadContent } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <HeadContent />
+      <Outlet />
+    </>
+  ),
+})
+```
+
+
+
+## Managing Body Scripts
+
+In addition to scripts that can be rendered in the `<head>` tag, you can also render scripts in the `<body>` tag using the `routeOptions.scripts` property. This is useful for loading scripts (even inline scripts) that require the DOM to be loaded, but before the main entry point of your application (which includes hydration if you're using Start or a full-stack implementation of TanStack Router).
+
+To do this, you must:
+
+- Use the `scripts` property of the `routeOptions` object
+- [Render the `<Scripts />` component](#scripts)
+
+```tsx
+export const Route = createRootRoute({
+  scripts: () => [
+    {
+      children: 'console.log("Hello, world!")',
+    },
+  ],
+})
+```
+
+### `<Scripts />`
+
+The `<Scripts />` component is **required** to render the body scripts of a document. It should be rendered either in the `<body>` tag of your root layout or as high up in the component tree as possible if your application doesn't or can't manage the `<body>` tag.
+
+### Example
+
+
+
+# React
+
+```tsx
+import { createRootRoute, Scripts } from '@tanstack/react-router'
+export const Route = createFileRoute('/')({
+  component: () => (
+    <html>
+      <head />
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  ),
+})
+```
+
+# Solid
+
+```tsx
+import { createFileRoute, Scripts } from '@tanstack/solid-router'
+export const Route = createRootRoute('/')({
+  component: () => (
+    <html>
+      <head />
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  ),
+})
+```
+
+
+
+## Inline Scripts with ScriptOnce
+
+For scripts that must run before React hydrates (like theme detection), use `ScriptOnce`. This is particularly useful for avoiding flash of unstyled content (FOUC) or theme flicker.
+
+
+
+# React
+
+```tsx
+import { ScriptOnce } from '@tanstack/react-router'
+
+const themeScript = `(function() {
+  try {
+    const theme = localStorage.getItem('theme') || 'auto';
+    const resolved = theme === 'auto'
+      ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme;
+    document.documentElement.classList.add(resolved);
+  } catch (e) {}
+})();`
+
+function ThemeProvider({ children }) {
+  return (
+    <>
+      <ScriptOnce children={themeScript} />
+      {children}
+    </>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { ScriptOnce } from '@tanstack/solid-router'
+
+const themeScript = `(function() {
+  try {
+    const theme = localStorage.getItem('theme') || 'auto';
+    const resolved = theme === 'auto'
+      ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme;
+    document.documentElement.classList.add(resolved);
+  } catch (e) {}
+})();`
+
+function ThemeProvider({ children }) {
+  return (
+    <>
+      <ScriptOnce children={themeScript} />
+      {children}
+    </>
+  )
+}
+```
+
+
+
+### How ScriptOnce Works
+
+1. During SSR, renders a `<script>` tag with the provided code
+2. The script executes immediately when the browser parses the HTML (before React hydrates)
+3. After execution, the script removes itself from the DOM
+4. On client-side navigation, nothing is rendered (prevents duplicate execution)
+
+
+
+# React
+
+### Preventing Hydration Warnings
+
+If your script modifies the DOM before hydration (like adding a class to `<html>`), use `suppressHydrationWarning` to prevent React warnings:
+
+```tsx
+export const Route = createRootRoute({
+  component: () => (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <ThemeProvider>
+          <Outlet />
+        </ThemeProvider>
+        <Scripts />
+      </body>
+    </html>
+  ),
+})
+```
+
+
+
+### Common Use Cases
+
+- **Theme/dark mode detection** - Apply theme class before hydration to prevent flash
+- **Feature detection** - Check browser capabilities before rendering
+- **Analytics initialization** - Initialize tracking before user interaction
+- **Critical path setup** - Any JavaScript that must run before hydration
diff --git a/mintlify/router/guide/external-data-loading.md b/mintlify/router/guide/external-data-loading.md
new file mode 100644
index 000000000..0bfff1867
--- /dev/null
+++ b/mintlify/router/guide/external-data-loading.md
@@ -0,0 +1,188 @@
+---
+id: external-data-loading
+title: External Data Loading
+---
+
+> [!IMPORTANT]
+> This guide is geared towards external state management libraries and their integration with TanStack Router for data fetching, ssr, hydration/dehydration and streaming. If you haven't read the standard [Data Loading](/router/guide/data-loading) guide, please do so first.
+
+## To **Store** or to **Coordinate**?
+
+While Router is very capable of storing and managing most data needs out of the box, sometimes you just might want something more robust!
+
+Router is designed to be a perfect **coordinator** for external data fetching and caching libraries. This means that you can use any data fetching/caching library you want, and the router will coordinate the loading of your data in a way that aligns with your users' navigation and expectations of freshness.
+
+## What data fetching libraries are supported?
+
+Any data fetching library that supports asynchronous promises can be used with TanStack Router. This includes:
+
+- [TanStack Query](/query/framework/react/overview)
+- [SWR](https://swr.vercel.app/)
+- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
+- [urql](https://formidable.com/open-source/urql/)
+- [Relay](https://relay.dev/)
+- [Apollo](https://www.apollographql.com/docs/react/)
+
+Or, even...
+
+- [Zustand](https://zustand-demo.pmnd.rs/)
+- [Jotai](https://jotai.org/)
+- [Recoil](https://recoiljs.org/)
+- [Redux](https://redux.js.org/)
+
+Literally any library that **can return a promise and read/write data** can be integrated.
+
+## Using Loaders to ensure data is loaded
+
+The easiest way to integrate external caching/data library into Router is to use `route.loader`s to ensure that the data required inside of a route has been loaded and is ready to be displayed.
+
+> ⚠️ BUT WHY? It's very important to preload your critical render data in the loader for a few reasons:
+>
+> - No "flash of loading" states
+> - No waterfall data fetching, caused by component based fetching
+> - Better for SEO. If your data is available at render time, it will be indexed by search engines.
+
+Here is a naive illustration (don't do this) of using a Route's `loader` option to seed the cache for some data:
+
+```tsx
+// src/routes/posts.tsx
+let postsCache = []
+
+export const Route = createFileRoute('/posts')({
+  loader: async () => {
+    postsCache = await fetchPosts()
+  },
+  component: () => {
+    return (
+      <div>
+        {postsCache.map((post) => (
+          <Post key={post.id} post={post} />
+        ))}
+      </div>
+    )
+  },
+})
+```
+
+This example is **obviously flawed**, but illustrates the point that you can use a route's `loader` option to seed your cache with data. Let's take a look at a more realistic example using TanStack Query.
+
+- Replace `fetchPosts` with your preferred data fetching library's prefetching API
+- Replace `postsCache` with your preferred data fetching library's read-or-fetch API or hook
+
+## A more realistic example using TanStack Query
+
+Let's take a look at a more realistic example using TanStack Query.
+
+```tsx
+// src/routes/posts.tsx
+const postsQueryOptions = queryOptions({
+  queryKey: ['posts'],
+  queryFn: () => fetchPosts(),
+})
+
+export const Route = createFileRoute('/posts')({
+  // Use the `loader` option to ensure that the data is loaded
+  loader: () => queryClient.ensureQueryData(postsQueryOptions),
+  component: () => {
+    // Read the data from the cache and subscribe to updates
+    const {
+      data: { posts },
+    } = useSuspenseQuery(postsQueryOptions)
+
+    return (
+      <div>
+        {posts.map((post) => (
+          <Post key={post.id} post={post} />
+        ))}
+      </div>
+    )
+  },
+})
+```
+
+### Error handling with TanStack Query
+
+When an error occurs while using `suspense` with `TanStack Query`, you need to let queries know that you want to try again when re-rendering. This can be done by using the `reset` function provided by the `useQueryErrorResetBoundary` hook. You can invoke this function in an effect as soon as the error component mounts. This will make sure that the query is reset and will try to fetch data again when the route component is rendered again. This will also cover cases where users navigate away from the route instead of clicking the `retry` button.
+
+```tsx
+export const Route = createFileRoute('/')({
+  loader: () => queryClient.ensureQueryData(postsQueryOptions),
+  errorComponent: ({ error, reset }) => {
+    const router = useRouter()
+    const queryErrorResetBoundary = useQueryErrorResetBoundary()
+
+    useEffect(() => {
+      // Reset the query error boundary
+      queryErrorResetBoundary.reset()
+    }, [queryErrorResetBoundary])
+
+    return (
+      <div>
+        {error.message}
+        <button
+          onClick={() => {
+            // Invalidate the route to reload the loader, and reset any router error boundaries
+            router.invalidate()
+          }}
+        >
+          retry
+        </button>
+      </div>
+    )
+  },
+})
+```
+
+## SSR Dehydration/Hydration
+
+Tools that are able can integrate with TanStack Router's convenient Dehydration/Hydration APIs to shuttle dehydrated data between the server and client and rehydrate it where needed. Let's go over how to do this with both 3rd party critical data and 3rd party deferred data.
+
+## Critical Dehydration/Hydration
+
+**For critical data needed for the first render/paint**, TanStack Router supports **`dehydrate` and `hydrate`** options when configuring the `Router`. These callbacks are functions that are automatically called on the server and client when the router dehydrates and hydrates normally and allow you to augment the dehydrated data with your own data.
+
+The `dehydrate` function can return any serializable JSON data which will get merged and injected into the dehydrated payload that is sent to the client.
+
+For example, let's dehydrate and hydrate a TanStack Query `QueryClient` so that our data we fetched on the server will be available for hydration on the client.
+
+```tsx
+// src/router.tsx
+
+export function createRouter() {
+  // Make sure you create your loader client or similar data
+  // stores inside of your `createRouter` function. This ensures
+  // that your data stores are unique to each request and
+  // always present on both server and client.
+  const queryClient = new QueryClient()
+
+  return createRouter({
+    routeTree,
+    // Optionally provide your loaderClient to the router context for
+    // convenience (you can provide anything you want to the router
+    // context!)
+    context: {
+      queryClient,
+    },
+    // On the server, dehydrate the loader client so the router
+    // can serialize it and send it to the client for us
+    dehydrate: () => {
+      return {
+        queryClientState: dehydrate(queryClient),
+      }
+    },
+    // On the client, hydrate the loader client with the data
+    // we dehydrated on the server
+    hydrate: (dehydrated) => {
+      hydrate(queryClient, dehydrated.queryClientState)
+    },
+    // Optionally, we can use `Wrap` to wrap our router in the loader client provider
+    Wrap: ({ children }) => {
+      return (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      )
+    },
+  })
+}
+```
diff --git a/mintlify/router/guide/history-types.md b/mintlify/router/guide/history-types.md
new file mode 100644
index 000000000..94361967f
--- /dev/null
+++ b/mintlify/router/guide/history-types.md
@@ -0,0 +1,107 @@
+---
+title: History Types
+---
+
+While it's not required to know the `@tanstack/history` API itself to use TanStack Router, it's a good idea to understand how it works. Under the hood, TanStack Router requires and uses a `history` abstraction to manage the routing history.
+
+If you don't create a history instance, a browser-oriented instance of this API is created for you when the router is initialized. If you need a special history API type, You can use the `@tanstack/history` package to create your own:
+
+- `createBrowserHistory`: The default history type.
+- `createHashHistory`: A history type that uses a hash to track history.
+- `createMemoryHistory`: A history type that keeps the history in memory.
+
+Once you have a history instance, you can pass it to the `Router` constructor:
+
+
+
+# React
+
+```ts
+import { createMemoryHistory, createRouter } from '@tanstack/react-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+```
+
+# Solid
+
+```ts
+import { createMemoryHistory, createRouter } from '@tanstack/solid-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+```
+
+
+
+## Browser Routing
+
+The `createBrowserHistory` is the default history type. It uses the browser's history API to manage the browser history.
+
+## Hash Routing
+
+Hash routing can be helpful if your server doesn't support rewrites to index.html for HTTP requests (among other environments that don't have a server).
+
+
+
+# React
+
+```ts
+import { createHashHistory, createRouter } from '@tanstack/react-router'
+
+const hashHistory = createHashHistory()
+
+const router = createRouter({ routeTree, history: hashHistory })
+```
+
+# Solid
+
+```ts
+import { createHashHistory, createRouter } from '@tanstack/solid-router'
+
+const hashHistory = createHashHistory()
+
+const router = createRouter({ routeTree, history: hashHistory })
+```
+
+
+
+## Memory Routing
+
+Memory routing is useful in environments that are not a browser or when you do not want components to interact with the URL.
+
+
+
+# React
+
+```ts
+import { createMemoryHistory, createRouter } from '@tanstack/react-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+```
+
+# Solid
+
+```ts
+import { createMemoryHistory, createRouter } from '@tanstack/solid-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+```
+
+
+
+Refer to the [SSR Guide](/router/guide/ssr#automatic-server-history) for usage on the server for server-side rendering.
diff --git a/mintlify/router/guide/internationalization-i18n.md b/mintlify/router/guide/internationalization-i18n.md
new file mode 100644
index 000000000..14ac072eb
--- /dev/null
+++ b/mintlify/router/guide/internationalization-i18n.md
@@ -0,0 +1,250 @@
+---
+title: Internationalization (i18n)
+---
+
+TanStack Router provides flexible and highly customizable primitives that can be composed to support common internationalization (i18n) routing patterns, such as **optional path parameters**, **route rewriting**, and **type-safe params**. This enables clean, SEO-friendly URLs, flexible locale handling, and seamless integration with i18n libraries.
+
+This guide covers:
+
+- Prefix-based and optional-locale routing
+- Advanced routing patterns for i18n
+- Language navigation and switching
+- SEO considerations
+- Type safety
+- Integration patterns with i18n libraries (Paraglide)
+
+---
+
+## i18n with Optional Path Parameters
+
+This pattern relies exclusively on TanStack Router features. It is suitable when:
+
+- You want full control over translations
+- You already manage translations manually
+- You do not need automatic locale detection
+
+Optional path parameters are ideal for implementing locale-aware routing without duplicating routes.
+
+```
+/{-$locale}/about
+```
+
+This single route matches:
+
+- `/about` (default locale)
+- `/en/about`
+- `/fr/about`
+- `/es/about`
+
+### Prefix-based i18n
+
+```tsx
+// Route: /{-$locale}/about
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  const { locale } = Route.useParams()
+  const currentLocale = locale || 'en'
+
+  const content = {
+    en: { title: 'About Us' },
+    fr: { title: 'À Propos' },
+    es: { title: 'Acerca de' },
+  }
+
+  return <h1>{content[currentLocale].title}</h1>
+}
+```
+
+### Complex Routing Patterns
+
+```tsx
+// Route: /{-$locale}/blog/{-$category}/$slug
+export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({
+  beforeLoad: ({ params }) => {
+    const locale = params.locale || 'en'
+    const validLocales = ['en', 'fr', 'es', 'de']
+
+    if (params.locale && !validLocales.includes(params.locale)) {
+      throw new Error('Invalid locale')
+    }
+
+    return { locale }
+  },
+})
+```
+
+### Language Switching
+
+```tsx
+<Link
+  to="/{-$locale}/blog/{-$category}/$slug"
+  params={(prev) => ({
+    ...prev,
+    locale: prev.locale === 'en' ? undefined : 'fr',
+  })}
+>
+  Français
+</Link>
+```
+
+### Type-safe Locales
+
+```ts
+type Locale = 'en' | 'fr' | 'es' | 'de'
+
+function isLocale(value?: string): value is Locale {
+  return ['en', 'fr', 'es', 'de'].includes(value as Locale)
+}
+```
+
+---
+
+## i18n Library Integration Patterns
+
+TanStack Router is **library-agnostic**. You can integrate any i18n solution by mapping locale state to routing behavior.
+
+Below is a recommended pattern using **Paraglide**.
+
+---
+
+## Client-side i18n with a Library (TanStack Router)
+
+This pattern combines TanStack Router with a client-side i18n library. It is suitable when:
+
+- You want type-safe translations
+- You want localized URLs
+- You do not need server-side rendering
+
+### TanStack Router + Paraglide (Client-only)
+
+Paraglide provides type-safe translations, locale detection, and URL localization that pair naturally with TanStack Router.
+
+**GitHub example:**
+[https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide)
+
+### Project Setup
+
+```bash
+npx @inlang/paraglide-js@latest init
+```
+
+```ts
+import { paraglideVitePlugin } from '@inlang/paraglide-js'
+
+paraglideVitePlugin({
+  project: './project.inlang',
+  outdir: './app/paraglide',
+})
+```
+
+### URL Localization via Router Rewrite
+
+The router's `rewrite` option enables bidirectional URL transformation, perfect for locale prefixes. For comprehensive documentation on URL rewrites including advanced patterns, see the [URL Rewrites guide](/router/guide/url-rewrites).
+
+```ts
+import { deLocalizeUrl, localizeUrl } from './paraglide/runtime'
+
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },
+})
+```
+
+---
+
+## Server-side i18n (TanStack Start)
+
+This pattern integrates i18n at the routing and server layers. It is suitable when:
+
+- You use TanStack Start
+- You need SSR or streaming
+- You want locale-aware redirects and metadata
+
+### TanStack Start + Paraglide
+
+**GitHub example:**
+[https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide)
+
+### Server Middleware (SSR)
+
+```ts
+import { paraglideMiddleware } from './paraglide/server'
+
+export default {
+  fetch(req: Request) {
+    return paraglideMiddleware(req, () => handler.fetch(req))
+  },
+}
+```
+
+### HTML Language Attribute
+
+```tsx
+import { getLocale } from '../paraglide/runtime'
+;<html lang={getLocale()} />
+```
+
+---
+
+## Offline-safe Redirects
+
+For offline or client-only environments:
+
+```ts
+import { shouldRedirect } from '../paraglide/runtime'
+
+beforeLoad: async () => {
+  const decision = await shouldRedirect({ url: window.location.href })
+  if (decision.redirectUrl) {
+    throw redirect({ href: decision.redirectUrl.href })
+  }
+}
+```
+
+---
+
+## Type-safe Translated Pathnames
+
+To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree.
+
+```ts
+import { FileRoutesByTo } from '../routeTree.gen'
+import { Locale } from '@/paraglide/runtime'
+```
+
+This guarantees:
+
+- No missing translations
+- Full type safety
+- Compiler feedback for routing mistakes
+
+---
+
+## Prerendering Localized Routes
+
+```ts
+import { localizeHref } from './paraglide/runtime'
+
+export const prerenderRoutes = ['/', '/about'].map((path) => ({
+  path: localizeHref(path),
+  prerender: { enabled: true },
+}))
+```
+
+---
+
+## Additional i18n Integration Patterns
+
+### Intlayer (TanStack Start integration)
+
+[https://intlayer.org/doc/environment/tanstack-start](https://intlayer.org/doc/environment/tanstack-start)
+
+### use-intl (TanStack Start integration)
+
+[https://nikuscs.com/blog/13-tanstackstart-i18n/](https://nikuscs.com/blog/13-tanstackstart-i18n/)
diff --git a/mintlify/router/guide/link-options.md b/mintlify/router/guide/link-options.md
new file mode 100644
index 000000000..b1551b18d
--- /dev/null
+++ b/mintlify/router/guide/link-options.md
@@ -0,0 +1,117 @@
+---
+title: Link Options
+---
+
+You may want to reuse options that are intended to be passed to `Link`, `redirect` or `navigate`. In which case you may decide an object literal is a good way to represent options passed to `Link`.
+
+```tsx
+const dashboardLinkOptions = {
+  to: '/dashboard',
+  search: { search: '' },
+}
+
+function DashboardComponent() {
+  return <Link {...dashboardLinkOptions} />
+}
+```
+
+There are a few problems here. `dashboardLinkOptions.to` is inferred as `string` which by default will resolve to every route when passed to `Link`, `navigate` or `redirect` (this particular issue could be fixed by `as const`). The other issue here is we do not know `dashboardLinkOptions` even passes the type checker until it is spread into `Link`. We could very easily create incorrect navigation options and only when the options are spread into `Link` do we know there is a type error.
+
+### Using `linkOptions` function to create re-usable options
+
+`linkOptions` is a function which type checks an object literal and returns the inferred input as is. This provides type safety on options exactly like `Link` before it is used allowing for easier maintenance and re-usability. Our above example using `linkOptions` looks like this:
+
+```tsx
+const dashboardLinkOptions = linkOptions({
+  to: '/dashboard',
+  search: { search: '' },
+})
+
+function DashboardComponent() {
+  return <Link {...dashboardLinkOptions} />
+}
+```
+
+This allows eager type checking of `dashboardLinkOptions` which can then be re-used anywhere
+
+```tsx
+const dashboardLinkOptions = linkOptions({
+  to: '/dashboard',
+  search: { search: '' },
+})
+
+export const Route = createFileRoute('/dashboard')({
+  component: DashboardComponent,
+  validateSearch: (input) => ({ search: input.search }),
+  beforeLoad: () => {
+    // can used in redirect
+    throw redirect(dashboardLinkOptions)
+  },
+})
+
+function DashboardComponent() {
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      {/** can be used in navigate */}
+      <button onClick={() => navigate(dashboardLinkOptions)} />
+
+      {/** can be used in Link */}
+      <Link {...dashboardLinkOptions} />
+    </div>
+  )
+}
+```
+
+### An array of `linkOptions`
+
+When creating navigation you might loop over an array to construct a navigation bar. In which case `linkOptions` can be used to type check an array of object literals which are intended for `Link` props
+
+```tsx
+const options = linkOptions([
+  {
+    to: '/dashboard',
+    label: 'Summary',
+    activeOptions: { exact: true },
+  },
+  {
+    to: '/dashboard/invoices',
+    label: 'Invoices',
+  },
+  {
+    to: '/dashboard/users',
+    label: 'Users',
+  },
+])
+
+function DashboardComponent() {
+  return (
+    <>
+      <div className="flex items-center border-b">
+        <h2 className="text-xl p-2">Dashboard</h2>
+      </div>
+
+      <div className="flex flex-wrap divide-x">
+        {options.map((option) => {
+          return (
+            <Link
+              {...option}
+              key={option.to}
+              activeProps={{ className: `font-bold` }}
+              className="p-2"
+            >
+              {option.label}
+            </Link>
+          )
+        })}
+      </div>
+      <hr />
+
+      <Outlet />
+    </>
+  )
+}
+```
+
+The input of `linkOptions` is inferred and returned, as shown with the use of `label` as this does not exist on `Link` props
diff --git a/mintlify/router/guide/navigation-blocking.md b/mintlify/router/guide/navigation-blocking.md
new file mode 100644
index 000000000..e5e056192
--- /dev/null
+++ b/mintlify/router/guide/navigation-blocking.md
@@ -0,0 +1,467 @@
+---
+title: Navigation Blocking
+---
+
+Navigation blocking is a way to prevent navigation from happening. This is typical if a user attempts to navigate while they:
+
+- Have unsaved changes
+- Are in the middle of a form
+- Are in the middle of a payment
+
+In these situations, a prompt or custom UI should be shown to the user to confirm they want to navigate away.
+
+- If the user confirms, navigation will continue as normal
+- If the user cancels, all pending navigations will be blocked
+
+## How does navigation blocking work?
+
+Navigation blocking adds one or more layers of "blockers" to the entire underlying history API. If any blockers are present, navigation will be paused via one of the following ways:
+
+- Custom UI
+  - If the navigation is triggered by something we control at the router level, we can allow you to perform any task or show any UI you'd like to the user to confirm the action. Each blocker's `blocker` function will be asynchronously and sequentially executed. If any blocker function resolves or returns `true`, the navigation will be allowed and all other blockers will continue to do the same until all blockers have been allowed to proceed. If any single blocker resolves or returns `false`, the navigation will be canceled and the rest of the `blocker` functions will be ignored.
+- The `onbeforeunload` event
+  - For page events that we cannot control directly, we rely on the browser's `onbeforeunload` event. If the user attempts to close the tab or window, refresh, or "unload" the page assets in any way, the browser's generic "Are you sure you want to leave?" dialog will be shown. If the user confirms, all blockers will be bypassed and the page will unload. If the user cancels, the unload will be cancelled, and the page will remain as is.
+
+## How do I use navigation blocking?
+
+There are 2 ways to use navigation blocking:
+
+- Hook/logical-based blocking
+- Component-based blocking
+
+## Hook/logical-based blocking
+
+Let's imagine we want to prevent navigation if a form is dirty. We can do this by using the `useBlocker` hook:
+
+
+
+# React
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty) return false
+
+      const shouldLeave = confirm('Are you sure you want to leave?')
+      return !shouldLeave
+    },
+  })
+
+  // ...
+}
+```
+
+# Solid
+
+```tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty()) return false
+
+      const shouldLeave = confirm('Are you sure you want to leave?')
+      return !shouldLeave
+    },
+  })
+
+  // ...
+}
+```
+
+
+
+`shouldBlockFn` gives you type safe access to the `current` and `next` location:
+
+
+
+# React
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  // always block going from /foo to /bar/123?hello=world
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ current, next }) => {
+      return (
+        current.routeId === '/foo' &&
+        next.fullPath === '/bar/$id' &&
+        next.params.id === 123 &&
+        next.search.hello === 'world'
+      )
+    },
+    withResolver: true,
+  })
+
+  // ...
+}
+```
+
+# Solid
+
+```tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  // always block going from /foo to /bar/123?hello=world
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ current, next }) => {
+      return (
+        current.routeId === '/foo' &&
+        next.fullPath === '/bar/$id' &&
+        next.params.id === 123 &&
+        next.search.hello === 'world'
+      )
+    },
+    withResolver: true,
+  })
+
+  // ...
+}
+```
+
+
+
+Note that even if `shouldBlockFn` returns `false`, the browser's `beforeunload` event may still be triggered on page reloads or tab closing. To gain control over this, you can use the `enableBeforeUnload` option to conditionally register the `beforeunload` handler:
+
+
+
+# React
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    {/* ... */}
+    enableBeforeUnload: formIsDirty, // or () => formIsDirty
+  })
+
+  // ...
+}
+```
+
+# Solid
+
+```tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    {/* ... */}
+    enableBeforeUnload: formIsDirty(),
+  })
+
+  // ...
+}
+```
+
+
+
+You can find more information about the `useBlocker` hook in the [API reference](/router/api/router/useBlockerHook).
+
+## Component-based blocking
+
+In addition to logical/hook based blocking, you can use the `Block` component to achieve similar results:
+
+
+
+# React
+
+```tsx
+import { Block } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  return (
+    <Block
+      shouldBlockFn={() => {
+        if (!formIsDirty) return false
+
+        const shouldLeave = confirm('Are you sure you want to leave?')
+        return !shouldLeave
+      }}
+      enableBeforeUnload={formIsDirty}
+    />
+  )
+
+  // OR
+
+  return (
+    <Block
+      shouldBlockFn={() => formIsDirty}
+      enableBeforeUnload={formIsDirty}
+      withResolver
+    >
+      {({ status, proceed, reset }) => <>{/* ... */}</>}
+    </Block>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { Block } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  return (
+    <Block
+      shouldBlockFn={() => {
+        if (!formIsDirty()) return false
+
+        const shouldLeave = confirm('Are you sure you want to leave?')
+        return !shouldLeave
+      }}
+    />
+  )
+
+  // OR
+
+  return (
+    <Block shouldBlockFn={() => !formIsDirty} withResolver>
+      {({ status, proceed, reset }) => <>{/* ... */}</>}
+    </Block>
+  )
+}
+```
+
+
+
+## How can I show a custom UI?
+
+In most cases, using `window.confirm` in the `shouldBlockFn` function with `withResolver: false` in the hook is enough since it will clearly show the user that the navigation is being blocked and resolve the blocking based on their response.
+
+However, in some situations, you might want to show a custom UI that is intentionally less disruptive and more integrated with your app's design.
+
+**Note:** The return value of `shouldBlockFn` does not resolve the blocking if `withResolver` is `true`.
+
+### Hook/logical-based custom UI with resolver
+
+
+
+# React
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: () => formIsDirty,
+    withResolver: true,
+  })
+
+  // ...
+
+  return (
+    <>
+      {/* ... */}
+      {status === 'blocked' && (
+        <div>
+          <p>Are you sure you want to leave?</p>
+          <button onClick={proceed}>Yes</button>
+          <button onClick={reset}>No</button>
+        </div>
+      )}
+    </>
+}
+```
+
+# Solid
+
+```tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: () => formIsDirty(),
+    withResolver: true,
+  })
+
+  // ...
+
+  return (
+    <>
+      {/* ... */}
+      {status === 'blocked' && (
+        <div>
+          <p>Are you sure you want to leave?</p>
+          <button onClick={proceed}>Yes</button>
+          <button onClick={reset}>No</button>
+        </div>
+      )}
+    </>
+}
+```
+
+
+
+### Hook/logical-based custom UI without resolver
+
+
+
+# React
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty) {
+        return false
+      }
+
+      const shouldBlock = new Promise<boolean>((resolve) => {
+        // Using a modal manager of your choice
+        modals.open({
+          title: 'Are you sure you want to leave?',
+          children: (
+            <SaveBlocker
+              confirm={() => {
+                modals.closeAll()
+                resolve(false)
+              }}
+              reject={() => {
+                modals.closeAll()
+                resolve(true)
+              }}
+            />
+          ),
+          onClose: () => resolve(true),
+        })
+      })
+      return shouldBlock
+    },
+  })
+
+  // ...
+}
+```
+
+# Solid
+
+```tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty()) {
+        return false
+      }
+
+      const shouldBlock = new Promise<boolean>((resolve) => {
+        // Using a modal manager of your choice
+        modals.open({
+          title: 'Are you sure you want to leave?',
+          children: (
+            <SaveBlocker
+              confirm={() => {
+                modals.closeAll()
+                resolve(false)
+              }}
+              reject={() => {
+                modals.closeAll()
+                resolve(true)
+              }}
+            />
+          ),
+          onClose: () => resolve(true),
+        })
+      })
+      return shouldBlock
+    },
+  })
+
+  // ...
+}
+```
+
+
+
+### Component-based custom UI
+
+Similarly to the hook, the `Block` component returns the same state and functions as render props:
+
+
+
+# React
+
+```tsx
+import { Block } from '@tanstack/react-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  return (
+    <Block shouldBlockFn={() => formIsDirty} withResolver>
+      {({ status, proceed, reset }) => (
+        <>
+          {/* ... */}
+          {status === 'blocked' && (
+            <div>
+              <p>Are you sure you want to leave?</p>
+              <button onClick={proceed}>Yes</button>
+              <button onClick={reset}>No</button>
+            </div>
+          )}
+        </>
+      )}
+    </Block>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { Block } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  return (
+    <Block shouldBlockFn={() => formIsDirty()} withResolver>
+      {({ status, proceed, reset }) => (
+        <>
+          {/* ... */}
+          {status === 'blocked' && (
+            <div>
+              <p>Are you sure you want to leave?</p>
+              <button onClick={proceed}>Yes</button>
+              <button onClick={reset}>No</button>
+            </div>
+          )}
+        </>
+      )}
+    </Block>
+  )
+}
+```
+
+
diff --git a/mintlify/router/guide/navigation.md b/mintlify/router/guide/navigation.md
new file mode 100644
index 000000000..260c9b397
--- /dev/null
+++ b/mintlify/router/guide/navigation.md
@@ -0,0 +1,845 @@
+---
+title: Navigation
+---
+
+## Everything is Relative
+
+Believe it or not, every navigation within an app is **relative**, even if you aren't using explicit relative path syntax (`../../somewhere`). Any time a link is clicked or an imperative navigation call is made, you will always have an **origin** path and a **destination** path which means you are navigating **from** one route **to** another route.
+
+TanStack Router keeps this constant concept of relative navigation in mind for every navigation, so you'll constantly see two properties in the API:
+
+- `from` - The origin route path
+- `to` - The destination route path
+
+> ⚠️ If a `from` route path isn't provided the router will assume you are navigating from the root `/` route and only auto-complete absolute paths. After all, you need to know where you are from in order to know where you're going 😉.
+
+## Shared Navigation API
+
+Every navigation and route matching API in TanStack Router uses the same core interface with minor differences depending on the API. This means that you can learn navigation and route matching once and use the same syntax and concepts across the library.
+
+### `ToOptions` Interface
+
+This is the core `ToOptions` interface that is used in every navigation and route matching API:
+
+```ts
+type ToOptions<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TTo extends string = '',
+> = {
+  // `from` is an optional route ID or path. If it is not supplied, only absolute paths will be auto-completed and type-safe. It's common to supply the route.fullPath of the origin route you are rendering from for convenience. If you don't know the origin route, leave this empty and work with absolute paths or unsafe relative paths.
+  from?: string
+  // `to` can be an absolute route path or a relative path from the `from` option to a valid route path. ⚠️ Do not interpolate path params, hash or search params into the `to` options. Use the `params`, `search`, and `hash` options instead.
+  to: string
+  // `params` is either an object of path params to interpolate into the `to` option or a function that supplies the previous params and allows you to return new ones. This is the only way to interpolate dynamic parameters into the final URL. Depending on the `from` and `to` route, you may need to supply none, some or all of the path params. TypeScript will notify you of the required params if there are any.
+  params:
+    | Record<string, unknown>
+    | ((prevParams: Record<string, unknown>) => Record<string, unknown>)
+  // `search` is either an object of query params or a function that supplies the previous search and allows you to return new ones. Depending on the `from` and `to` route, you may need to supply none, some or all of the query params. TypeScript will notify you of the required search params if there are any.
+  search:
+    | Record<string, unknown>
+    | ((prevSearch: Record<string, unknown>) => Record<string, unknown>)
+  // `hash` is either a string or a function that supplies the previous hash and allows you to return a new one.
+  hash?: string | ((prevHash: string) => string)
+  // `state` is either an object of state or a function that supplies the previous state and allows you to return a new one. State is stored in the history API and can be useful for passing data between routes that you do not want to permanently store in URL search params.
+  state?:
+    | Record<string, any>
+    | ((prevState: Record<string, unknown>) => Record<string, unknown>)
+  // `mask` is another navigation object used to mask the URL shown in the browser for this navigation.
+  mask?: ToMaskOptions<TRouteTree>
+}
+
+type ToMaskOptions<TRouteTree extends AnyRoute = AnyRoute> = {
+  // `from`, `to`, `params`, `search`, `hash`, and `state` behave the same as in `ToOptions`.
+  // `mask` itself is not allowed inside `ToMaskOptions`.
+  from?: string
+  to: string
+  params:
+    | Record<string, unknown>
+    | ((prevParams: Record<string, unknown>) => Record<string, unknown>)
+  search:
+    | Record<string, unknown>
+    | ((prevSearch: Record<string, unknown>) => Record<string, unknown>)
+  hash?: string | ((prevHash: string) => string)
+  state?:
+    | Record<string, any>
+    | ((prevState: Record<string, unknown>) => Record<string, unknown>)
+  // If true, the URL will unmask on page reload.
+  unmaskOnReload?: boolean
+}
+```
+
+> 🧠 Every route object has a `to` property, which can be used as the `to` for any navigation or route matching API. Where possible, this will allow you to avoid plain strings and use type-safe route references instead:
+
+```tsx
+import { Route as aboutRoute } from './routes/about.tsx'
+
+function Comp() {
+  return <Link to={aboutRoute.to}>About</Link>
+}
+```
+
+### `NavigateOptions` Interface
+
+This is the core `NavigateOptions` interface that extends `ToOptions`. Any API that is actually performing a navigation will use this interface:
+
+```ts
+export type NavigateOptions<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TTo extends string = '',
+> = ToOptions<TRouteTree, TFrom, TTo> & {
+  // `replace` is a boolean that determines whether the navigation should replace the current history entry or push a new one.
+  replace?: boolean
+  // `resetScroll` is a boolean that determines whether scroll position will be reset to 0,0 after the location is committed to browser history.
+  resetScroll?: boolean
+  // `hashScrollIntoView` is a boolean or object that determines whether an id matching the hash will be scrolled into view after the location is committed to history.
+  hashScrollIntoView?: boolean | ScrollIntoViewOptions
+  // `viewTransition` is either a boolean or function that determines if and how the browser will call document.startViewTransition() when navigating.
+  viewTransition?: boolean | ViewTransitionOptions
+  // `ignoreBlocker` is a boolean that determines if navigation should ignore any blockers that might prevent it.
+  ignoreBlocker?: boolean
+  // `reloadDocument` is a boolean that determines if navigation to a route inside of router will trigger a full page load instead of the traditional SPA navigation.
+  reloadDocument?: boolean
+  // `href` is a string that can be used in place of `to` to navigate to a full built href, e.g. pointing to an external target.
+  href?: string
+}
+```
+
+`NavigateOptions` includes all `ToOptions` fields, including `mask`.
+
+### `LinkOptions` Interface
+
+Anywhere an actual `<a>` tag the `LinkOptions` interface which extends `NavigateOptions` will be available:
+
+```tsx
+export type LinkOptions<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TTo extends string = '',
+> = NavigateOptions<TRouteTree, TFrom, TTo> & {
+  // The standard anchor tag target attribute
+  target?: HTMLAnchorElement['target']
+  // Defaults to `{ exact: false, includeHash: false }`
+  activeOptions?: {
+    exact?: boolean
+    includeHash?: boolean
+    includeSearch?: boolean
+    explicitUndefined?: boolean
+  }
+  // If set, will preload the linked route on hover and cache it for this many milliseconds in hopes that the user will eventually navigate there.
+  preload?: false | 'intent'
+  // Delay intent preloading by this many milliseconds. If the intent exits before this delay, the preload will be cancelled.
+  preloadDelay?: number
+  // If true, will render the link without the href attribute
+  disabled?: boolean
+}
+```
+
+Since `LinkOptions` extends `NavigateOptions`, it also supports `mask`.
+
+## Navigation API
+
+With relative navigation and all of the interfaces in mind now, let's talk about the different flavors of navigation API at your disposal:
+
+- The `<Link>` component
+  - Generates an actual `<a>` tag with a valid `href` which can be click or even cmd/ctrl + clicked to open in a new tab
+- The `useNavigate()` hook
+  - When possible, `Link` component should be used for navigation, but sometimes you need to navigate imperatively as a result of a side-effect. `useNavigate` returns a function that can be called to perform an immediate client-side navigation.
+- The `<Navigate>` component
+  - Renders nothing and performs an immediate client-side navigation.
+- The `Router.navigate()` method
+  - This is the most powerful navigation API in TanStack Router. Similar to `useNavigate`, it imperatively navigates, but is available everywhere you have access to your router.
+
+⚠️ None of these APIs are a replacement for server-side redirects. If you need to redirect a user immediately from one route to another before mounting your application, use a server-side redirect instead of a client-side navigation.
+
+## `<Link>` Component
+
+The `Link` component is the most common way to navigate within an app. It renders an actual `<a>` tag with a valid `href` attribute which can be clicked or even cmd/ctrl + clicked to open in a new tab. It also supports any normal `<a>` attributes including `target` to open links in new windows, etc.
+
+In addition to the [`LinkOptions`](#linkoptions-interface) interface, the `Link` component also supports the following props:
+
+```tsx
+export type LinkProps<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> | string = string,
+  TTo extends string = '',
+> = LinkOptions<RegisteredRouter['routeTree'], TFrom, TTo> & {
+  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  activeProps?:
+    | FrameworkHTMLAnchorTagAttributes
+    | (() => FrameworkHTMLAnchorAttributes)
+  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  inactiveProps?:
+    | FrameworkHTMLAnchorAttributes
+    | (() => FrameworkHTMLAnchorAttributes)
+}
+```
+
+### Absolute Links
+
+Let's make a simple static link!
+
+
+
+# React
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+const link = <Link to="/about">About</Link>
+```
+
+# Solid
+
+```tsx
+import { Link } from '@tanstack/solid-router'
+
+const link = <Link to="/about">About</Link>
+```
+
+
+
+### Dynamic Links
+
+Dynamic links are links that have dynamic segments in them. For example, a link to a blog post might look like this:
+
+```tsx
+const link = (
+  <Link
+    to="/blog/post/$postId"
+    params={{
+      postId: 'my-first-blog-post',
+    }}
+  >
+    Blog Post
+  </Link>
+)
+```
+
+Keep in mind that normally dynamic segment params are `string` values, but they can also be any other type that you parse them to in your route options. Either way, the type will be checked at compile time to ensure that you are passing the correct type.
+
+### Relative Links
+
+By default, all links are absolute unless a `from` route path is provided. This means that the above link will always navigate to the `/about` route regardless of what route you are currently on.
+
+Relative links can be combined with a `from` route path. If a from route path isn't provided, relative paths default to the current active location.
+
+> [!NOTE]
+> Keep in mind that when calling useNavigate as a method on the route, for example `Route.useNavigate`, then the `from` location is predefined to be the route it's called on.
+>
+> Another common pitfall is when using this in a pathless layout route, since the pathless layout route does not have an actual path, the `from` location is regarded as the parent of the pathless layout route. Hence relative routing will be resolved from this parent.
+
+```tsx
+const postIdRoute = createRoute({
+  path: '/blog/post/$postId',
+})
+
+const link = (
+  <Link from={postIdRoute.fullPath} to="../categories">
+    Categories
+  </Link>
+)
+```
+
+As seen above, it's common to provide the `route.fullPath` as the `from` route path. This is because the `route.fullPath` is a reference that will update if you refactor your application. However, sometimes it's not possible to import the route directly, in which case it's fine to provide the route path directly as a string. It will still get type-checked as per usual!
+
+### Special relative paths: `"."` and `".."`
+
+Quite often you might want to reload the current location or another `from` path, for example, to rerun the loaders on the current and/or parent routes, or maybe navigate back to a parent route. This can be achieved by specifying a `to` route path of `"."` which will reload the current location or provided `from` path.
+
+Another common need is to navigate one route back relative to the current location or another path. By specifying a `to` route path of `".."` navigation will be resolved to the first parent route preceding the current location.
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  return (
+    <div>
+      <Link to=".">Reload the current route of /posts/$postId</Link>
+      <Link to="..">Navigate back to /posts</Link>
+      // the below are all equivalent
+      <Link to="/posts">Navigate back to /posts</Link>
+      <Link from="/posts" to=".">
+        Navigate back to /posts
+      </Link>
+      // the below are all equivalent
+      <Link to="/">Navigate to root</Link>
+      <Link from="/posts" to="..">
+        Navigate to root
+      </Link>
+    </div>
+  )
+}
+```
+
+### Search Param Links
+
+Search params are a great way to provide additional context to a route. For example, you might want to provide a search query to a search page:
+
+```tsx
+const link = (
+  <Link
+    to="/search"
+    search={{
+      query: 'tanstack',
+    }}
+  >
+    Search
+  </Link>
+)
+```
+
+It's also common to want to update a single search param without supplying any other information about the existing route. For example, you might want to update the page number of a search result:
+
+```tsx
+const link = (
+  <Link
+    to="."
+    search={(prev) => ({
+      ...prev,
+      page: prev.page + 1,
+    })}
+  >
+    Next Page
+  </Link>
+)
+```
+
+### Search Param Type Safety
+
+Search params are a highly dynamic state management mechanism, so it's important to ensure that you are passing the correct types to your search params. We'll see in a later section in detail how to validate and ensure search params typesafety, among other great features!
+
+### Hash Links
+
+Hash links are a great way to link to a specific section of a page. For example, you might want to link to a specific section of a blog post:
+
+```tsx
+const link = (
+  <Link
+    to="/blog/post/$postId"
+    params={{
+      postId: 'my-first-blog-post',
+    }}
+    hash="section-1"
+  >
+    Section 1
+  </Link>
+)
+```
+
+> ⚠️ When directly navigating to a URL with a hash fragment, the fragment is only available on the client; the browser does not send the fragment to the server as part of the request URL.
+>
+> This means that if you are using a server-side rendering approach, the hash fragment will not be available on the server-side, and hydration mismatches can occur when using the hash for rendering markup.
+>
+> Examples of this would be:
+>
+> - returning the hash value in the markup,
+> - conditional rendering based on the hash value, or
+> - setting the Link as active based on the hash value.
+
+### Navigating with Optional Parameters
+
+Optional path parameters provide flexible navigation patterns where you can include or omit parameters as needed. Optional parameters use the `{-$paramName}` syntax and offer fine-grained control over URL structure.
+
+#### Parameter Inheritance vs Removal
+
+When navigating with optional parameters, you have two main strategies:
+
+**Inheriting Current Parameters**
+Use `params: {}` to inherit all current route parameters:
+
+```tsx
+// Inherits current route parameters
+<Link to="/posts/{-$category}" params={{}}>
+  All Posts
+</Link>
+```
+
+**Removing Parameters**  
+Set parameters to `undefined` to explicitly remove them:
+
+```tsx
+// Removes the category parameter
+<Link to="/posts/{-$category}" params={{ category: undefined }}>
+  All Posts
+</Link>
+```
+
+#### Basic Optional Parameter Navigation
+
+```tsx
+// Navigate with optional parameter
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 'tech' }}
+>
+  Tech Posts
+</Link>
+
+// Navigate without optional parameter
+<Link
+  to="/posts/{-$category}"
+  params={{ category: undefined }}
+>
+  All Posts
+</Link>
+
+// Navigate using parameter inheritance
+<Link
+  to="/posts/{-$category}"
+  params={{}}
+>
+  Current Category
+</Link>
+```
+
+#### Function-Style Parameter Updates
+
+Function-style parameter updates are particularly useful with optional parameters:
+
+```tsx
+// Remove a parameter using function syntax
+<Link
+  to="/posts/{-$category}"
+  params={(prev) => ({ ...prev, category: undefined })}
+>
+  Clear Category
+</Link>
+
+// Update a parameter while keeping others
+<Link
+  to="/articles/{-$category}/{-$slug}"
+  params={(prev) => ({ ...prev, category: 'news' })}
+>
+  News Articles
+</Link>
+
+// Conditionally set parameters
+<Link
+  to="/posts/{-$category}"
+  params={(prev) => ({
+    ...prev,
+    category: someCondition ? 'tech' : undefined
+  })}
+>
+  Conditional Category
+</Link>
+```
+
+#### Multiple Optional Parameters
+
+When working with multiple optional parameters, you can mix and match which ones to include:
+
+```tsx
+// Navigate with some optional parameters
+<Link
+  to="/posts/{-$category}/{-$slug}"
+  params={{ category: 'tech', slug: undefined }}
+>
+  Tech Posts
+</Link>
+
+// Remove all optional parameters
+<Link
+  to="/posts/{-$category}/{-$slug}"
+  params={{ category: undefined, slug: undefined }}
+>
+  All Posts
+</Link>
+
+// Set multiple parameters
+<Link
+  to="/posts/{-$category}/{-$slug}"
+  params={{ category: 'tech', slug: 'react-tips' }}
+>
+  Specific Post
+</Link>
+```
+
+#### Mixed Required and Optional Parameters
+
+Optional parameters work seamlessly with required parameters:
+
+```tsx
+// Required 'id', optional 'tab'
+<Link
+  to="/users/$id/{-$tab}"
+  params={{ id: '123', tab: 'settings' }}
+>
+  User Settings
+</Link>
+
+// Remove optional parameter while keeping required
+<Link
+  to="/users/$id/{-$tab}"
+  params={{ id: '123', tab: undefined }}
+>
+  User Profile
+</Link>
+
+// Use function style with mixed parameters
+<Link
+  to="/users/$id/{-$tab}"
+  params={(prev) => ({ ...prev, tab: 'notifications' })}
+>
+  User Notifications
+</Link>
+```
+
+#### Advanced Optional Parameter Patterns
+
+**Prefix and Suffix Parameters**
+Optional parameters with prefix/suffix work with navigation:
+
+```tsx
+// Navigate to file with optional name
+<Link
+  to="/files/prefix{-$name}.txt"
+  params={{ name: 'document' }}
+>
+  Document File
+</Link>
+
+// Navigate to file without optional name
+<Link
+  to="/files/prefix{-$name}.txt"
+  params={{ name: undefined }}
+>
+  Default File
+</Link>
+```
+
+**All Optional Parameters**
+Routes where all parameters are optional:
+
+```tsx
+// Navigate to specific date
+<Link
+  to="/{-$year}/{-$month}/{-$day}"
+  params={{ year: '2023', month: '12', day: '25' }}
+>
+  Christmas 2023
+</Link>
+
+// Navigate to partial date
+<Link
+  to="/{-$year}/{-$month}/{-$day}"
+  params={{ year: '2023', month: '12', day: undefined }}
+>
+  December 2023
+</Link>
+
+// Navigate to root with all parameters removed
+<Link
+  to="/{-$year}/{-$month}/{-$day}"
+  params={{ year: undefined, month: undefined, day: undefined }}
+>
+  Home
+</Link>
+```
+
+#### Navigation with Search Params and Optional Parameters
+
+Optional parameters work great in combination with search params:
+
+```tsx
+// Combine optional path params with search params
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 'tech' }}
+  search={{ page: 1, sort: 'newest' }}
+>
+  Tech Posts - Page 1
+</Link>
+
+// Remove path param but keep search params
+<Link
+  to="/posts/{-$category}"
+  params={{ category: undefined }}
+  search={(prev) => prev}
+>
+  All Posts - Same Filters
+</Link>
+```
+
+#### Imperative Navigation with Optional Parameters
+
+All the same patterns work with imperative navigation:
+
+```tsx
+function Component() {
+  const navigate = useNavigate()
+
+  const clearFilters = () => {
+    navigate({
+      to: '/posts/{-$category}/{-$tag}',
+      params: { category: undefined, tag: undefined },
+    })
+  }
+
+  const setCategory = (category: string) => {
+    navigate({
+      to: '/posts/{-$category}/{-$tag}',
+      params: (prev) => ({ ...prev, category }),
+    })
+  }
+
+  const applyFilters = (category?: string, tag?: string) => {
+    navigate({
+      to: '/posts/{-$category}/{-$tag}',
+      params: { category, tag },
+    })
+  }
+}
+```
+
+### Active & Inactive Props
+
+The `Link` component supports two additional props: `activeProps` and `inactiveProps`. These props are functions that return additional props for the `active` and `inactive` states of the link. All props other than styles and classes passed here will override the original props passed to `Link`. Any styles or classes passed are merged together.
+
+Here's an example:
+
+```tsx
+const link = (
+  <Link
+    to="/blog/post/$postId"
+    params={{
+      postId: 'my-first-blog-post',
+    }}
+    activeProps={{
+      style: {
+        fontWeight: 'bold',
+      },
+    }}
+  >
+    Section 1
+  </Link>
+)
+```
+
+### The `data-status` attribute
+
+In addition to the `activeProps` and `inactiveProps` props, the `Link` component also adds a `data-status` attribute to the rendered element when it is in an active state. This attribute will be `active` or `undefined` depending on the current state of the link. This can come in handy if you prefer to use data-attributes to style your links instead of props.
+
+### Active Options
+
+The `Link` component comes with an `activeOptions` property that offers a few options of determining if a link is active or not. The following interface describes those options:
+
+```tsx
+export interface ActiveOptions {
+  // If true, the link will be active if the current route matches the `to` route path exactly (no children routes)
+  // Defaults to `false`
+  exact?: boolean
+  // If true, the link will only be active if the current URL hash matches the `hash` prop
+  // Defaults to `false`
+  includeHash?: boolean // Defaults to false
+  // If true, the link will only be active if the current URL search params inclusively match the `search` prop
+  // Defaults to `true`
+  includeSearch?: boolean
+  // This modifies the `includeSearch` behavior.
+  // If true,  properties in `search` that are explicitly `undefined` must NOT be present in the current URL search params for the link to be active.
+  // defaults to `false`
+  explicitUndefined?: boolean
+}
+```
+
+By default, it will check if the resulting **pathname** is a prefix of the current route. If any search params are provided, it will check that they _inclusively_ match those in the current location. Hashes are not checked by default.
+
+For example, if you are on the `/blog/post/my-first-blog-post` route, the following links will be active:
+
+```tsx
+const link1 = (
+  <Link to="/blog/post/$postId" params={{ postId: 'my-first-blog-post' }}>
+    Blog Post
+  </Link>
+)
+const link2 = <Link to="/blog/post">Blog Post</Link>
+const link3 = <Link to="/blog">Blog Post</Link>
+```
+
+However, the following links will not be active:
+
+```tsx
+const link4 = (
+  <Link to="/blog/post/$postId" params={{ postId: 'my-second-blog-post' }}>
+    Blog Post
+  </Link>
+)
+```
+
+It's common for some links to only be active if they are an exact match. A good example of this would be a link to the home page. In scenarios like these, you can pass the `exact: true` option:
+
+```tsx
+const link = (
+  <Link to="/" activeOptions={{ exact: true }}>
+    Home
+  </Link>
+)
+```
+
+This will ensure that the link is not active when you are a child route.
+
+A few more options to be aware of:
+
+- If you want to include the hash in your matching, you can pass the `includeHash: true` option
+- If you do **not** want to include the search params in your matching, you can pass the `includeSearch: false` option
+
+### Passing `isActive` to children
+
+The `Link` component accepts a function for its children, allowing you to propagate its `isActive` property to children. For example, you could style a child component based on whether the parent link is active:
+
+```tsx
+const link = (
+  <Link to="/blog/post">
+    {({ isActive }) => {
+      return (
+        <>
+          <span>My Blog Post</span>
+          <icon className={isActive ? 'active' : 'inactive'} />
+        </>
+      )
+    }}
+  </Link>
+)
+```
+
+### Link Preloading
+
+The `Link` component supports automatically preloading routes on intent (hovering or touchstart for now). This can be configured as a default in the router options (which we'll talk more about soon) or by passing a `preload='intent'` prop to the `Link` component. Here's an example:
+
+```tsx
+const link = (
+  <Link to="/blog/post/$postId" preload="intent">
+    Blog Post
+  </Link>
+)
+```
+
+With preloading enabled and relatively quick asynchronous route dependencies (if any), this simple trick can increase the perceived performance of your application with very little effort.
+
+What's even better is that by using a cache-first library like `@tanstack/query`, preloaded routes will stick around and be ready for a stale-while-revalidate experience if the user decides to navigate to the route later on.
+
+### Link Preloading Delay
+
+Along with preloading is a configurable delay which determines how long a user must hover over a link to trigger the intent-based preloading. The default delay is 50 milliseconds, but you can change this by passing a `preloadDelay` prop to the `Link` component with the number of milliseconds you'd like to wait:
+
+```tsx
+const link = (
+  <Link to="/blog/post/$postId" preload="intent" preloadDelay={100}>
+    Blog Post
+  </Link>
+)
+```
+
+## `useNavigate`
+
+> ⚠️ Because of the `Link` component's built-in affordances around `href`, cmd/ctrl + click-ability, and active/inactive capabilities, it's recommended to use the `Link` component instead of `useNavigate` for anything the user can interact with (e.g. links, buttons). However, there are some cases where `useNavigate` is necessary to handle side-effect navigations (e.g. a successful async action that results in a navigation).
+
+The `useNavigate` hook returns a `navigate` function that can be called to imperatively navigate. It's a great way to navigate to a route from a side-effect (e.g. a successful async action). Here's an example:
+
+```tsx
+function Component() {
+  const navigate = useNavigate({ from: '/posts/$postId' })
+
+  const handleSubmit = async (e: FrameworkFormEvent) => {
+    e.preventDefault()
+
+    const response = await fetch('/posts', {
+      method: 'POST',
+      body: JSON.stringify({ title: 'My First Post' }),
+    })
+
+    const { id: postId } = await response.json()
+
+    if (response.ok) {
+      navigate({ to: '/posts/$postId', params: { postId } })
+    }
+  }
+}
+```
+
+> 🧠 As shown above, you can pass the `from` option to specify the route to navigate from in the hook call. While this is also possible to pass in the resulting `navigate` function each time you call it, it's recommended to pass it here to reduce on potential error and also not type as much!
+
+### `navigate` Options
+
+The `navigate` function returned by `useNavigate` accepts the [`NavigateOptions` interface](#navigateoptions-interface)
+
+## `Navigate` Component
+
+Occasionally, you may find yourself needing to navigate immediately when a component mounts. Your first instinct might be to reach for `useNavigate` and an immediate side-effect (e.g. useEffect), but this is unnecessary. Instead, you can render the `Navigate` component to achieve the same result:
+
+```tsx
+function Component() {
+  return <Navigate to="/posts/$postId" params={{ postId: 'my-first-post' }} />
+}
+```
+
+Think of the `Navigate` component as a way to navigate to a route immediately when a component mounts. It's a great way to handle client-only redirects. It is _definitely not_ a substitute for handling server-aware redirects responsibly on the server.
+
+## `router.navigate`
+
+The `router.navigate` method is the same as the `navigate` function returned by `useNavigate` and accepts the same [`NavigateOptions` interface](#navigateoptions-interface). Unlike the `useNavigate` hook, it is available anywhere your `router` instance is available and is thus a great way to navigate imperatively from anywhere in your application, including outside of your framework.
+
+## `useMatchRoute` and `<MatchRoute>`
+
+The `useMatchRoute` hook and `<MatchRoute>` component are the same thing, but the hook is a bit more flexible. They both accept the standard navigation `ToOptions` interface either as options or props and return `true/false` if that route is currently matched. It also has a handy `pending` option that will return `true` if the route is currently pending (e.g. a route is currently transitioning to that route). This can be extremely useful for showing optimistic UI around where a user is navigating:
+
+```tsx
+function Component() {
+  return (
+    <div>
+      <Link to="/users">
+        Users
+        <MatchRoute to="/users" pending>
+          <Spinner />
+        </MatchRoute>
+      </Link>
+    </div>
+  )
+}
+```
+
+The component version `<MatchRoute>` can also be used with a function as children to render something when the route is matched:
+
+```tsx
+function Component() {
+  return (
+    <div>
+      <Link to="/users">
+        Users
+        <MatchRoute to="/users" pending>
+          {(match) => {
+            return <Spinner show={match} />
+          }}
+        </MatchRoute>
+      </Link>
+    </div>
+  )
+}
+```
+
+The hook version `useMatchRoute` returns a function that can be called programmatically to check if a route is matched:
+
+```tsx
+function Component() {
+  const matchRoute = useMatchRoute()
+
+  useEffect(() => {
+    if (matchRoute({ to: '/users', pending: true })) {
+      console.info('The /users route is matched and pending')
+    }
+  })
+
+  return (
+    <div>
+      <Link to="/users">Users</Link>
+    </div>
+  )
+}
+```
+
+---
+
+Phew! That's a lot of navigating! That said, hopefully you're feeling pretty good about getting around your application now. Let's move on!
diff --git a/mintlify/router/guide/not-found-errors.md b/mintlify/router/guide/not-found-errors.md
new file mode 100644
index 000000000..ffcea498d
--- /dev/null
+++ b/mintlify/router/guide/not-found-errors.md
@@ -0,0 +1,306 @@
+---
+title: Not Found Errors
+---
+
+> ⚠️ This page covers the newer `notFound` function and `notFoundComponent` API for handling not found errors. The `NotFoundRoute` route is deprecated and will be removed in a future release. See [Migrating from `NotFoundRoute`](#migrating-from-notfoundroute) for more information.
+
+## Overview
+
+There are 2 uses for not-found errors in TanStack Router:
+
+- **Non-matching route paths**: When a path does not match any known route matching pattern **OR** when it partially matches a route, but with extra path segments
+  - The **router** will automatically throw a not-found error when a path does not match any known route matching pattern
+  - If the router's `notFoundMode` is set to `fuzzy`, the nearest matching route with a `notFoundComponent` will handle the error. If the router's `notFoundMode` is set to `root`, the root route will handle the error.
+  - Examples:
+    - Attempting to access `/users` when there is no `/users` route
+    - Attempting to access `/posts/1/edit` when the route tree only handles `/posts/$postId`
+- **Missing resources**: When a resource cannot be found, such as a post with a given ID or any asynchronous data that is not available or does not exist
+  - **You, the developer** must throw a not-found error when a resource cannot be found. This can be done in the `beforeLoad` or `loader` functions using the `notFound` utility.
+  - Will be handled by the nearest matching route with a `notFoundComponent` (when `notFound` is called within `loader`) or the root route.
+  - Examples:
+    - Attempting to access `/posts/1` when the post with ID 1 does not exist
+    - Attempting to access `/docs/path/to/document` when the document does not exist
+
+Under the hood, both of these cases are implemented using the same `notFound` function and `notFoundComponent` API.
+
+## The `notFoundMode` option
+
+When TanStack Router encounters a **pathname** that doesn't match any known route pattern **OR** partially matches a route pattern but with extra trailing pathname segments, it will automatically throw a not-found error.
+
+Depending on the `notFoundMode` option, the router will handle these automatic errors differently:
+
+- ["fuzzy" mode](#notfoundmode-fuzzy) (default): The router will intelligently find the closest matching suitable route and display the `notFoundComponent`.
+- ["root" mode](#notfoundmode-root): All not-found errors will be handled by the root route's `notFoundComponent`, regardless of the nearest matching route.
+
+### `notFoundMode: 'fuzzy'`
+
+By default, the router's `notFoundMode` is set to `fuzzy`, which indicates that if a pathname doesn't match any known route, the router will attempt to use the closest matching route with a configured `notFoundComponent`.
+
+> **❓ Why is this the default?** Fuzzy matching to preserve as much parent layout as possible for the user gives them more context to navigate to a useful location based on where they thought they would arrive.
+
+The nearest suitable route is found using the following criteria:
+
+- The route must have a `notFoundComponent` configured or the router must have a `defaultNotFoundComponent` configured
+
+For example, consider the following route tree:
+
+- `__root__` (has a `notFoundComponent` configured)
+  - `posts` (has a `notFoundComponent` configured)
+    - `$postId` (has a `notFoundComponent` configured)
+
+If provided the path of `/posts/1/edit`, the following component structure will be rendered:
+
+- `<Root>`
+  - `<Posts>`
+    - `<Post>`
+      - `<Post.notFoundComponent>`
+
+The `notFoundComponent` of the `$postId` route will be rendered because it is the **nearest matching route with a `notFoundComponent` configured**.
+
+### `notFoundMode: 'root'`
+
+When `notFoundMode` is set to `root`, all not-found errors will be handled by the root route's `notFoundComponent` instead of bubbling up from the nearest fuzzy-matched route.
+
+For example, consider the following route tree:
+
+- `__root__` (has a `notFoundComponent` configured)
+  - `posts` (has a `notFoundComponent` configured)
+    - `$postId` (has a `notFoundComponent` configured)
+
+If provided the path of `/posts/1/edit`, the following component structure will be rendered:
+
+- `<Root>`
+  - `<Root.notFoundComponent>`
+
+The `notFoundComponent` of the `__root__` route will be rendered because the `notFoundMode` is set to `root`.
+
+## Configuring a route's `notFoundComponent`
+
+To handle both types of not-found errors, you can attach a `notFoundComponent` to a route. This component will be rendered when a not-found error is thrown.
+
+For example, configuring a `notFoundComponent` for a `/settings` route to handle non-existing settings pages:
+
+```tsx
+export const Route = createFileRoute('/settings')({
+  component: () => {
+    return (
+      <div>
+        <p>Settings page</p>
+        <Outlet />
+      </div>
+    )
+  },
+  notFoundComponent: () => {
+    return <p>This setting page doesn't exist!</p>
+  },
+})
+```
+
+Or configuring a `notFoundComponent` for a `/posts/$postId` route to handle posts that don't exist:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => {
+    const post = await getPost(postId)
+    if (!post) throw notFound()
+    return { post }
+  },
+  component: ({ post }) => {
+    return (
+      <div>
+        <h1>{post.title}</h1>
+        <p>{post.body}</p>
+      </div>
+    )
+  },
+  notFoundComponent: () => {
+    return <p>Post not found!</p>
+  },
+})
+```
+
+## Default Router-Wide Not Found Handling
+
+You may want to provide a default not-found component for every route in your app with child routes.
+
+> Why only routes with children? **Leaf-node routes (routes without children) will never render an `Outlet` and therefore are not able to handle not-found errors.**
+
+To do this, pass a `defaultNotFoundComponent` to the `createRouter` function:
+
+```tsx
+const router = createRouter({
+  defaultNotFoundComponent: () => {
+    return (
+      <div>
+        <p>Not found!</p>
+        <Link to="/">Go home</Link>
+      </div>
+    )
+  },
+})
+```
+
+## Throwing your own `notFound` errors
+
+You can manually throw not-found errors in loader methods and components using the `notFound` function. This is useful when you need to signal that a resource cannot be found.
+
+The `notFound` function works in a similar fashion to the `redirect` function. To cause a not-found error, you can **throw a `notFound()`**.
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => {
+    // Returns `null` if the post doesn't exist
+    const post = await getPost(postId)
+    if (!post) {
+      throw notFound()
+      // Alternatively, you can make the notFound function throw:
+      // notFound({ throw: true })
+    }
+    // Post is guaranteed to be defined here because we threw an error
+    return { post }
+  },
+})
+```
+
+The not-found error above will be handled by the same route or nearest parent route that has either a `notFoundComponent` route option or the `defaultNotFoundComponent` router option configured.
+
+If neither the route nor any suitable parent route is found to handle the error, the root route will handle it using TanStack Router's **extremely basic (and purposefully undesirable)** default not-found component that simply renders `<p>Not Found</p>`. It's highly recommended to either attach at least one `notFoundComponent` to the root route or configure a router-wide `defaultNotFoundComponent` to handle not-found errors.
+
+> ⚠️ When you throw `notFound()` in `beforeLoad`, TanStack Router resolves it the same way as other not-found errors:
+>
+> - If you pass `routeId`, that route (or the nearest valid ancestor boundary) handles it.
+> - If you don't pass `routeId`, the nearest route/ancestor with a `notFoundComponent` handles it (based on the router's mode and matching rules).
+> - If no suitable boundary is found, handling falls back to the root/default not-found behavior.
+>
+> For `beforeLoad`-thrown not-found errors, TanStack Router still runs required parent loaders so the selected not-found boundary can render with the loader data it depends on.
+
+## Specifying Which Routes Handle Not Found Errors
+
+Sometimes you may want to trigger a not-found on a specific parent route and bypass the normal not-found component propagation. To do this, pass in a route id to the `route` option in the `notFound` function.
+
+```tsx
+// _pathlessLayout.tsx
+export const Route = createFileRoute('/_pathlessLayout')({
+  // This will render
+  notFoundComponent: () => {
+    return <p>Not found (in _pathlessLayout)</p>
+  },
+  component: () => {
+    return (
+      <div>
+        <p>This is a pathless layout route!</p>
+        <Outlet />
+      </div>
+    )
+  },
+})
+
+// _pathlessLayout/route-a.tsx
+export const Route = createFileRoute('/_pathless/route-a')({
+  loader: async () => {
+    // This will make LayoutRoute handle the not-found error
+    throw notFound({ routeId: '/_pathlessLayout' })
+    //                      ^^^^^^^^^ This will autocomplete from the registered router
+  },
+  // This WILL NOT render
+  notFoundComponent: () => {
+    return <p>Not found (in _pathlessLayout/route-a)</p>
+  },
+})
+```
+
+### Manually targeting the root route
+
+You can also target the root route by passing the exported `rootRouteId` variable to the `notFound` function's `route` property:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => {
+    const post = await getPost(postId)
+    if (!post) throw notFound({ routeId: rootRouteId })
+    return { post }
+  },
+})
+```
+
+### Throwing Not Found Errors in Components
+
+You can also throw not-found errors in components. However, **it is recommended to throw not-found errors in loader methods instead of components in order to correctly type loader data and prevent flickering.**
+
+TanStack Router exposes a `CatchNotFound` component similar to `CatchBoundary` that can be used to catch not-found errors in components and display UI accordingly.
+
+### Data Loading Inside `notFoundComponent`
+
+`notFoundComponent` is a special case when it comes to data loading. **`SomeRoute.useLoaderData` may not be defined depending on which route you are trying to access and where the not-found error gets thrown**. However, `Route.useParams`, `Route.useSearch`, `Route.useRouteContext`, etc. will return a defined value.
+
+**If you need to pass incomplete loader data to `notFoundComponent`,** pass the data via the `data` option in the `notFound` function and validate it in `notFoundComponent`.
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => {
+    const post = await getPost(postId)
+    if (!post)
+      throw notFound({
+        // Forward some data to the notFoundComponent
+        // data: someIncompleteLoaderData
+      })
+    return { post }
+  },
+  // `data: unknown` is passed to the component via the `data` option when calling `notFound`
+  notFoundComponent: ({ data }) => {
+    // ❌ useLoaderData is not valid here: const { post } = Route.useLoaderData()
+
+    // ✅:
+    const { postId } = Route.useParams()
+    const search = Route.useSearch()
+    const context = Route.useRouteContext()
+
+    return <p>Post with id {postId} not found!</p>
+  },
+})
+```
+
+## Usage With SSR
+
+See [SSR guide](/router/guide/ssr) for more information.
+
+## Migrating from `NotFoundRoute`
+
+The `NotFoundRoute` API is deprecated in favor of `notFoundComponent`. The `NotFoundRoute` API will be removed in a future release.
+
+**The `notFound` function and `notFoundComponent` will not work when using `NotFoundRoute`.**
+
+The main differences are:
+
+- `NotFoundRoute` is a route that requires an `<Outlet>` on its parent route to render. `notFoundComponent` is a component that can be attached to any route.
+- When using `NotFoundRoute`, you can't use layouts. `notFoundComponent` can be used with layouts.
+- When using `notFoundComponent`, path matching is strict. This means that if you have a route at `/post/$postId`, a not-found error will be thrown if you try to access `/post/1/2/3`. With `NotFoundRoute`, `/post/1/2/3` would match the `NotFoundRoute` and only render it if there is an `<Outlet>`.
+
+To migrate from `NotFoundRoute` to `notFoundComponent`, you'll just need to make a few changes:
+
+```tsx title='src/router.tsx'
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen.'
+- import { notFoundRoute } from './notFoundRoute'  // [!code --]
+
+export const router = createRouter({
+  routeTree,
+- notFoundRoute // [!code --]
+})
+
+// routes/__root.tsx
+import { createRootRoute } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  // ...
++ notFoundComponent: () => {  // [!code ++]
++   return <p>Not found!</p>  // [!code ++]
++ } // [!code ++]
+})
+```
+
+Important changes:
+
+- A `notFoundComponent` is added to the root route for global not-found handling.
+  - You can also add a `notFoundComponent` to any other route in your route tree to handle not-found errors for that specific route.
+- The `notFoundComponent` does not support rendering an `<Outlet>`.
diff --git a/mintlify/router/guide/outlets.md b/mintlify/router/guide/outlets.md
new file mode 100644
index 000000000..527f28047
--- /dev/null
+++ b/mintlify/router/guide/outlets.md
@@ -0,0 +1,56 @@
+---
+title: Outlets
+---
+
+Nested routing means that routes can be nested within other routes, including the way they render. So how do we tell our routes where to render this nested content?
+
+## The `Outlet` Component
+
+The `Outlet` component is used to render the next potentially matching child route. `<Outlet />` doesn't take any props and can be rendered anywhere within a route's component tree. If there is no matching child route, `<Outlet />` will render `null`.
+
+> [!TIP]
+> If a route's `component` is left undefined, it will render an `<Outlet />` automatically.
+
+A great example is configuring the root route of your application. Let's give our root route a component that renders a title, then an `<Outlet />` for our top-level routes to render.
+
+
+
+# React
+
+```tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <Outlet /> {/* This is where child routes will render */}
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { createRootRoute, Outlet } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <Outlet /> {/* This is where child routes will render */}
+    </div>
+  )
+}
+```
+
+
diff --git a/mintlify/router/guide/parallel-routes.md b/mintlify/router/guide/parallel-routes.md
new file mode 100644
index 000000000..0975c93c6
--- /dev/null
+++ b/mintlify/router/guide/parallel-routes.md
@@ -0,0 +1,5 @@
+---
+title: Parallel Routes
+---
+
+We haven't covered this yet. Stay tuned!
diff --git a/mintlify/router/guide/path-params.md b/mintlify/router/guide/path-params.md
new file mode 100644
index 000000000..e6d3f070f
--- /dev/null
+++ b/mintlify/router/guide/path-params.md
@@ -0,0 +1,1404 @@
+---
+title: Path Params
+---
+
+Path params are used to match a single segment (the text until the next `/`) and provide its value back to you as a **named** variable. They are defined by using the `$` character prefix in the path, followed by the key variable to assign it to. The following are valid path param paths:
+
+- `$postId`
+- `$name`
+- `$teamId`
+- `about/$name`
+- `team/$teamId`
+- `blog/$postId`
+
+Because path param routes only match to the next `/`, child routes can be created to continue expressing hierarchy:
+
+Let's create a post route file that uses a path param to match the post ID:
+
+
+
+# React
+
+```tsx title="src/routes/posts.$postId.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+})
+```
+
+# Solid
+
+```tsx title="src/routes/posts.$postId.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+})
+```
+
+
+
+## Path Params can be used by child routes
+
+Once a path param has been parsed, it is available to all child routes. This means that if we define a child route to our `postRoute`, we can use the `postId` variable from the URL in the child route's path!
+
+## Path Params in Loaders
+
+Path params are passed to the loader as a `params` object. The keys of this object are the names of the path params, and the values are the values that were parsed out of the actual URL path. For example, if we were to visit the `/blog/123` URL, the `params` object would be `{ postId: '123' }`:
+
+```tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+})
+```
+
+The `params` object is also passed to the `beforeLoad` option:
+
+```tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  beforeLoad: async ({ params }) => {
+    // do something with params.postId
+  },
+})
+```
+
+## Path Params in Components
+
+If we add a component to our `postRoute`, we can access the `postId` variable from the URL by using the route's `useParams` hook:
+
+
+
+# React
+
+```tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const { postId } = Route.useParams()
+  return <div>Post {postId}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const params = Route.useParams()
+  return <div>Post {params().postId}</div>
+}
+```
+
+
+
+> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](/router/guide/code-splitting#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useParams()` hook.
+
+## Path Params outside of Routes
+
+You can also use the globally exported `useParams` hook to access any parsed path params from any component in your app. You'll need to pass the `strict: false` option to `useParams`, denoting that you want to access the params from an ambiguous location:
+
+
+
+# React
+
+```tsx title="src/components/PostComponent.tsx"
+function PostComponent() {
+  const { postId } = useParams({ strict: false })
+  return <div>Post {postId}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/components/PostComponent.tsx"
+function PostComponent() {
+  const params = useParams({ strict: false })
+  return <div>Post {params().postId}</div>
+}
+```
+
+
+
+## Prioritizing Parsed Path Param Routes
+
+When multiple dynamic, optional, or wildcard routes can match the same URL, routes with `params.parse` are tried before equivalent routes without it. If multiple matching candidates use `params.parse`, you can use `params.priority` to control which candidate is tried first.
+
+Higher `params.priority` values are tried first. The default priority is `0`, and if a higher-priority route's `params.parse` returns `false`, matching continues to the next candidate route.
+
+```tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  params: {
+    priority: 10,
+    parse: ({ postId }) => {
+      if (!/^\d+$/.test(postId)) return false
+      return { postId: Number(postId) }
+    },
+    stringify: ({ postId }) => ({ postId: String(postId) }),
+  },
+})
+```
+
+With a fallback `/posts/$slug` route, `/posts/123` can match the parsed numeric route first, while `/posts/hello-world` can fall through to the slug route when `params.parse` returns `false`.
+
+`params.priority` only affects competing candidates that use `params.parse`. It does not override normal route specificity, so static routes still match before dynamic, optional, or wildcard routes.
+
+## Navigating with Path Params
+
+When navigating to a route with path params, TypeScript will require you to pass the params either as an object or as a function that returns an object of params.
+
+Let's see what an object style looks like:
+
+```tsx
+function Component() {
+  return (
+    <Link to="/blog/$postId" params={{ postId: '123' }}>
+      Post 123
+    </Link>
+  )
+}
+```
+
+And here's what a function style looks like:
+
+```tsx
+function Component() {
+  return (
+    <Link to="/blog/$postId" params={(prev) => ({ ...prev, postId: '123' })}>
+      Post 123
+    </Link>
+  )
+}
+```
+
+Notice that the function style is useful when you need to persist params that are already in the URL for other routes. This is because the function style will receive the current params as an argument, allowing you to modify them as needed and return the final params object.
+
+## Prefixes and Suffixes for Path Params
+
+You can also use **prefixes** and **suffixes** with path params to create more complex routing patterns. This allows you to match specific URL structures while still capturing the dynamic segments.
+
+When using either prefixes or suffixes, you can define them by wrapping the path param in curly braces `{}` and placing the prefix or suffix before or after the variable name.
+
+### Defining Prefixes
+
+Prefixes are defined by placing the prefix text outside the curly braces before the variable name. For example, if you want to match a URL that starts with `post-` followed by a post ID, you can define it like this:
+
+
+
+# React
+
+```tsx title="src/routes/posts/post-{$postId}.tsx"
+export const Route = createFileRoute('/posts/post-{$postId}')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const { postId } = Route.useParams()
+  // postId will be the value after 'post-'
+  return <div>Post ID: {postId}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts/post-{$postId}.tsx"
+export const Route = createFileRoute('/posts/post-{$postId}')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const params = Route.useParams()
+  // postId will be the value after 'post-'
+  return <div>Post ID: {params().postId}</div>
+}
+```
+
+
+
+You can even combines prefixes with wildcard routes to create more complex patterns:
+
+
+
+# React
+
+```tsx title="src/routes/on-disk/storage-{$postId}/$.tsx"
+export const Route = createFileRoute('/on-disk/storage-{$postId}/$')({
+  component: StorageComponent,
+})
+
+function StorageComponent() {
+  const { _splat } = Route.useParams()
+  // _splat, will be value after 'storage-'
+  // i.e. my-drive/documents/foo.txt
+  return <div>Storage Location: /{_splat}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/on-disk/storage-{$postId}/$.tsx"
+export const Route = createFileRoute('/on-disk/storage-{$postId}/$')({
+  component: StorageComponent,
+})
+
+function StorageComponent() {
+  const params = Route.useParams()
+  // _splat, will be value after 'storage-'
+  // i.e. my-drive/documents/foo.txt
+  return <div>Storage Location: /{params()._splat}</div>
+}
+```
+
+
+
+### Defining Suffixes
+
+Suffixes are defined by placing the suffix text outside the curly braces after the variable name. For example, if you want to match a URL a filename that ends with `txt`, you can define it like this:
+
+
+
+# React
+
+```tsx title="src/routes/files/{$fileName}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$fileName}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const { fileName } = Route.useParams()
+  // fileName will be the value before 'txt'
+  return <div>File Name: {fileName}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/files/{$fileName}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$fileName}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  // fileName will be the value before 'txt'
+  return <div>File Name: {params().fileName}</div>
+}
+```
+
+
+
+You can also combine suffixes with wildcards for more complex routing patterns:
+
+
+
+# React
+
+```tsx title="src/routes/files/{$}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const { _splat } = Route.useParams()
+  // _splat will be the value before '.txt'
+  return <div>File Splat: {_splat}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/files/{$}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  // _splat will be the value before '.txt'
+  return <div>File Splat: {params()._splat}</div>
+}
+```
+
+
+
+### Combining Prefixes and Suffixes
+
+You can combine both prefixes and suffixes to create very specific routing patterns. For example, if you want to match a URL that starts with `user-` and ends with `.json`, you can define it like this:
+
+
+
+# React
+
+```tsx title="src/routes/users/user-{$userId}[.]json.tsx"
+export const Route = createFileRoute('/users/user-{$userId}.json')({
+  component: UserComponent,
+})
+
+function UserComponent() {
+  const { userId } = Route.useParams()
+  // userId will be the value between 'user-' and '.json'
+  return <div>User ID: {userId}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/users/user-{$userId}[.]json.tsx"
+export const Route = createFileRoute('/users/user-{$userId}.json')({
+  component: UserComponent,
+})
+
+function UserComponent() {
+  const params = Route.useParams()
+  // userId will be the value between 'user-' and '.json'
+  return <div>User ID: {params().userId}</div>
+}
+```
+
+
+
+Similar to the previous examples, you can also use wildcards with prefixes and suffixes. Go wild!
+
+## Optional Path Parameters
+
+Optional path parameters allow you to define route segments that may or may not be present in the URL. They use the `{-$paramName}` syntax and provide flexible routing patterns where certain parameters are optional.
+
+### Defining Optional Parameters
+
+Optional path parameters are defined using curly braces with a dash prefix: `{-$paramName}`
+
+```tsx
+// Single optional parameter
+// src/routes/posts/{-$category}.tsx
+export const Route = createFileRoute('/posts/{-$category}')({
+  component: PostsComponent,
+})
+
+// Multiple optional parameters
+// src/routes/posts/{-$category}/{-$slug}.tsx
+export const Route = createFileRoute('/posts/{-$category}/{-$slug}')({
+  component: PostComponent,
+})
+
+// Mixed required and optional parameters
+// src/routes/users/$id/{-$tab}.tsx
+export const Route = createFileRoute('/users/$id/{-$tab}')({
+  component: UserComponent,
+})
+```
+
+### How Optional Parameters Work
+
+Optional parameters create flexible URL patterns:
+
+- `/posts/{-$category}` matches both `/posts` and `/posts/tech`
+- `/posts/{-$category}/{-$slug}` matches `/posts`, `/posts/tech`, and `/posts/tech/hello-world`
+- `/users/$id/{-$tab}` matches `/users/123` and `/users/123/settings`
+
+When an optional parameter is not present in the URL, its value will be `undefined` in your route handlers and components.
+
+### Accessing Optional Parameters
+
+Optional parameters work exactly like regular parameters in your components, but their values may be `undefined`:
+
+
+
+# React
+
+```tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  const { category } = Route.useParams()
+
+  return <div>{category ? `Posts in ${category}` : 'All Posts'}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  const params = Route.useParams()
+
+  return (
+    <div>
+      {params().category ? `Posts in ${params().category}` : 'All Posts'}
+    </div>
+  )
+}
+```
+
+
+
+### Optional Parameters in Loaders
+
+Optional parameters are available in loaders and may be `undefined`:
+
+```tsx
+export const Route = createFileRoute('/posts/{-$category}')({
+  loader: async ({ params }) => {
+    // params.category might be undefined
+    return fetchPosts({ category: params.category })
+  },
+})
+```
+
+### Optional Parameters in beforeLoad
+
+Optional parameters work in `beforeLoad` handlers as well:
+
+```tsx
+export const Route = createFileRoute('/posts/{-$category}')({
+  beforeLoad: async ({ params }) => {
+    if (params.category) {
+      // Validate category exists
+      await validateCategory(params.category)
+    }
+  },
+})
+```
+
+### Advanced Optional Parameter Patterns
+
+#### With Prefix and Suffix
+
+Optional parameters support prefix and suffix patterns:
+
+
+
+# React
+
+```tsx title="src/routes/files/prefix{-$name}[.]txt.tsx"
+// Route: /files/prefix{-$name}.txt
+// Matches: /files/prefix.txt and /files/prefixdocument.txt
+export const Route = createFileRoute('/files/prefix{-$name}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const { name } = Route.useParams()
+  return <div>File: {name || 'default'}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/files/prefix{-$name}[.]txt.tsx"
+// Route: /files/prefix{-$name}.txt
+// Matches: /files/prefix.txt and /files/prefixdocument.txt
+export const Route = createFileRoute('/files/prefix{-$name}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  return <div>File: {params().name || 'default'}</div>
+}
+```
+
+
+
+#### All Optional Parameters
+
+You can create routes where all parameters are optional:
+
+
+
+# React
+
+```tsx title="src/routes/{-$year}/{-$month}/{-$day}.tsx"
+// Route: /{-$year}/{-$month}/{-$day}
+// Matches: /, /2023, /2023/12, /2023/12/25
+export const Route = createFileRoute('/{-$year}/{-$month}/{-$day}')({
+  component: DateComponent,
+})
+
+function DateComponent() {
+  const { year, month, day } = Route.useParams()
+
+  if (!year) return <div>Select a year</div>
+  if (!month) return <div>Year: {year}</div>
+  if (!day)
+    return (
+      <div>
+        Month: {year}/{month}
+      </div>
+    )
+
+  return (
+    <div>
+      Date: {year}/{month}/{day}
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/{-$year}/{-$month}/{-$day}.tsx"
+// Route: /{-$year}/{-$month}/{-$day}
+// Matches: /, /2023, /2023/12, /2023/12/25
+export const Route = createFileRoute('/{-$year}/{-$month}/{-$day}')({
+  component: DateComponent,
+})
+
+function DateComponent() {
+  const params = Route.useParams()
+
+  if (!params().year) return <div>Select a year</div>
+  if (!params().month) return <div>Year: {params().year}</div>
+  if (!params().day)
+    return (
+      <div>
+        Month: {params().year}/{params().month}
+      </div>
+    )
+
+  return (
+    <div>
+      Date: {params().year}/{params().month}/{params().day}
+    </div>
+  )
+}
+```
+
+
+
+#### Optional Parameters with Wildcards
+
+Optional parameters can be combined with wildcards for complex routing patterns:
+
+
+
+# React
+
+```tsx title="src/routes/docs/{-$version}/$.tsx"
+// Route: /docs/{-$version}/$
+// Matches: /docs/extra/path, /docs/v2/extra/path
+export const Route = createFileRoute('/docs/{-$version}/$')({
+  component: DocsComponent,
+})
+
+function DocsComponent() {
+  const { version } = Route.useParams()
+  const { _splat } = Route.useParams()
+
+  return (
+    <div>
+      Version: {version || 'latest'}
+      Path: {_splat}
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/docs/{-$version}/$.tsx"
+// Route: /docs/{-$version}/$
+// Matches: /docs/extra/path, /docs/v2/extra/path
+export const Route = createFileRoute('/docs/{-$version}/$')({
+  component: DocsComponent,
+})
+
+function DocsComponent() {
+  const params = Route.useParams()
+
+  return (
+    <div>
+      Version: {params().version || 'latest'}
+      Path: {params()._splat}
+    </div>
+  )
+}
+```
+
+
+
+### Navigating with Optional Parameters
+
+When navigating to routes with optional parameters, you have fine-grained control over which parameters to include:
+
+```tsx
+function Navigation() {
+  return (
+    <div>
+      {/* Navigate with optional parameter */}
+      <Link to="/posts/{-$category}" params={{ category: 'tech' }}>
+        Tech Posts
+      </Link>
+
+      {/* Navigate without optional parameter */}
+      <Link to="/posts/{-$category}" params={{ category: undefined }}>
+        All Posts
+      </Link>
+
+      {/* Navigate with multiple optional parameters */}
+      <Link
+        to="/posts/{-$category}/{-$slug}"
+        params={{ category: 'tech', slug: 'react-tips' }}
+      >
+        Specific Post
+      </Link>
+    </div>
+  )
+}
+```
+
+### Type Safety with Optional Parameters
+
+TypeScript provides full type safety for optional parameters:
+
+
+
+# React
+
+```tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  // TypeScript knows category might be undefined
+  const { category } = Route.useParams() // category: string | undefined
+
+  // Safe navigation
+  const categoryUpper = category?.toUpperCase()
+
+  return <div>{categoryUpper || 'All Categories'}</div>
+}
+
+// Navigation is type-safe and flexible
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 'tech' }} // ✅ Valid - string
+>
+  Tech Posts
+</Link>
+
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 123 }} // ✅ Valid - number (auto-stringified)
+>
+  Category 123
+</Link>
+```
+
+# Solid
+
+```tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  // TypeScript knows category might be undefined
+  const params = Route.useParams() // category: string | undefined
+
+  // Safe navigation
+  const categoryUpper = params().category?.toUpperCase()
+
+  return <div>{categoryUpper || 'All Categories'}</div>
+}
+
+// Navigation is type-safe and flexible
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 'tech' }} // ✅ Valid - string
+>
+  Tech Posts
+</Link>
+
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 123 }} // ✅ Valid - number (auto-stringified)
+>
+  Category 123
+</Link>
+```
+
+
+
+## Internationalization (i18n) with Optional Path Parameters
+
+Optional path parameters are excellent for implementing internationalization (i18n) routing patterns. You can use prefix patterns to handle multiple languages while maintaining clean, SEO-friendly URLs.
+
+### Prefix-based i18n
+
+Use optional language prefixes to support URLs like `/en/about`, `/fr/about`, or just `/about` (default language):
+
+
+
+# React
+
+```tsx title="src/routes/{-$locale}/about.tsx"
+// Route: /{-$locale}/about
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  const { locale } = Route.useParams()
+  const currentLocale = locale || 'en' // Default to English
+
+  const content = {
+    en: { title: 'About Us', description: 'Learn more about our company.' },
+    fr: {
+      title: 'À Propos',
+      description: 'En savoir plus sur notre entreprise.',
+    },
+    es: {
+      title: 'Acerca de',
+      description: 'Conoce más sobre nuestra empresa.',
+    },
+  }
+
+  return (
+    <div>
+      <h1>{content[currentLocale]?.title}</h1>
+      <p>{content[currentLocale]?.description}</p>
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/{-$locale}/about.tsx"
+// Route: /{-$locale}/about
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  const params = Route.useParams()
+  const currentLocale = params().locale || 'en' // Default to English
+
+  const content = {
+    en: { title: 'About Us', description: 'Learn more about our company.' },
+    fr: {
+      title: 'À Propos',
+      description: 'En savoir plus sur notre entreprise.',
+    },
+    es: {
+      title: 'Acerca de',
+      description: 'Conoce más sobre nuestra empresa.',
+    },
+  }
+
+  return (
+    <div>
+      <h1>{content[currentLocale]?.title}</h1>
+      <p>{content[currentLocale]?.description}</p>
+    </div>
+  )
+}
+```
+
+
+
+This pattern matches:
+
+- `/about` (default locale)
+- `/en/about` (explicit English)
+- `/fr/about` (French)
+- `/es/about` (Spanish)
+
+### Complex i18n Patterns
+
+Combine optional parameters for more sophisticated i18n routing:
+
+
+
+# React
+
+```tsx title="src/routes/{-$locale}/blog/{-$category}/$slug.tsx"
+// Route: /{-$locale}/blog/{-$category}/$slug
+export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({
+  beforeLoad: async ({ params }) => {
+    const locale = params.locale || 'en'
+    const category = params.category
+
+    // Validate locale and category
+    const validLocales = ['en', 'fr', 'es', 'de']
+    if (locale && !validLocales.includes(locale)) {
+      throw new Error('Invalid locale')
+    }
+
+    return { locale, category }
+  },
+  loader: async ({ params, context }) => {
+    const { locale } = context
+    const { slug, category } = params
+
+    return fetchBlogPost({ slug, category, locale })
+  },
+  component: BlogPostComponent,
+})
+
+function BlogPostComponent() {
+  const { locale, category, slug } = Route.useParams()
+  const data = Route.useLoaderData()
+
+  return (
+    <article>
+      <h1>{data.title}</h1>
+      <p>
+        Category: {category || 'All'} | Language: {locale || 'en'}
+      </p>
+      <div>{data.content}</div>
+    </article>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/{-$locale}/blog/{-$category}/$slug.tsx"
+// Route: /{-$locale}/blog/{-$category}/$slug
+export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({
+  beforeLoad: async ({ params }) => {
+    const locale = params.locale || 'en'
+    const category = params.category
+
+    // Validate locale and category
+    const validLocales = ['en', 'fr', 'es', 'de']
+    if (locale && !validLocales.includes(locale)) {
+      throw new Error('Invalid locale')
+    }
+
+    return { locale, category }
+  },
+  loader: async ({ params, context }) => {
+    const { locale } = context
+    const { slug, category } = params
+
+    return fetchBlogPost({ slug, category, locale })
+  },
+  component: BlogPostComponent,
+})
+
+function BlogPostComponent() {
+  const params = Route.useParams()
+  const data = Route.useLoaderData()
+
+  return (
+    <article>
+      <h1>{data.title}</h1>
+      <p>
+        Category: {params().category || 'All'} | Language:{' '}
+        {params().locale || 'en'}
+      </p>
+      <div>{data.content}</div>
+    </article>
+  )
+}
+```
+
+
+
+This supports URLs like:
+
+- `/blog/tech/my-post` (default locale, tech category)
+- `/fr/blog/my-post` (French, no category)
+- `/en/blog/tech/my-post` (explicit English, tech category)
+- `/es/blog/tecnologia/mi-post` (Spanish, Spanish category)
+
+### Language Navigation
+
+Create language switchers using optional i18n parameters with function-style params:
+
+
+
+# React
+
+```tsx title="src/components/LanguageSwitcher.tsx"
+function LanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'fr', name: 'Français' },
+    { code: 'es', name: 'Español' },
+  ]
+
+  return (
+    <div className="language-switcher">
+      {languages.map(({ code, name }) => (
+        <Link
+          key={code}
+          to="/{-$locale}/blog/{-$category}/$slug"
+          params={(prev) => ({
+            ...prev,
+            locale: code === 'en' ? undefined : code, // Remove 'en' for clean URLs
+          })}
+          className={currentParams.locale === code ? 'active' : ''}
+        >
+          {name}
+        </Link>
+      ))}
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/components/LanguageSwitcher.tsx"
+function LanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'fr', name: 'Français' },
+    { code: 'es', name: 'Español' },
+  ]
+
+  return (
+    <div class="language-switcher">
+      {languages.map(({ code, name }) => (
+        <Link
+          to="/{-$locale}/blog/{-$category}/$slug"
+          params={(prev) => ({
+            ...prev,
+            locale: code === 'en' ? undefined : code, // Remove 'en' for clean URLs
+          })}
+          class={currentParams().locale === code ? 'active' : ''}
+        >
+          {name}
+        </Link>
+      ))}
+    </div>
+  )
+}
+```
+
+
+
+You can also create more sophisticated language switching logic:
+
+
+
+# React
+
+```tsx
+function AdvancedLanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const handleLanguageChange = (newLocale: string) => {
+    return (prev: any) => {
+      // Preserve all existing params but update locale
+      const updatedParams = { ...prev }
+
+      if (newLocale === 'en') {
+        // Remove locale for clean English URLs
+        delete updatedParams.locale
+      } else {
+        updatedParams.locale = newLocale
+      }
+
+      return updatedParams
+    }
+  }
+
+  return (
+    <div className="language-switcher">
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('fr')}
+      >
+        Français
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('es')}
+      >
+        Español
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('en')}
+      >
+        English
+      </Link>
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx
+function AdvancedLanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const handleLanguageChange = (newLocale: string) => {
+    return (prev: any) => {
+      // Preserve all existing params but update locale
+      const updatedParams = { ...prev }
+
+      if (newLocale === 'en') {
+        // Remove locale for clean English URLs
+        delete updatedParams.locale
+      } else {
+        updatedParams.locale = newLocale
+      }
+
+      return updatedParams
+    }
+  }
+
+  return (
+    <div class="language-switcher">
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('fr')}
+      >
+        Français
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('es')}
+      >
+        Español
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('en')}
+      >
+        English
+      </Link>
+    </div>
+  )
+}
+```
+
+
+
+### Advanced i18n with Optional Parameters
+
+Organize i18n routes using optional parameters for flexible locale handling:
+
+
+
+# React
+
+```tsx
+// Route structure:
+// routes/
+//   {-$locale}/
+//     index.tsx        // /, /en, /fr
+//     about.tsx        // /about, /en/about, /fr/about
+//     blog/
+//       index.tsx      // /blog, /en/blog, /fr/blog
+//       $slug.tsx      // /blog/post, /en/blog/post, /fr/blog/post
+
+// routes/{-$locale}/index.tsx
+export const Route = createFileRoute('/{-$locale}/')({
+  component: HomeComponent,
+})
+
+function HomeComponent() {
+  const { locale } = Route.useParams()
+  const isRTL = ['ar', 'he', 'fa'].includes(locale || '')
+
+  return (
+    <div dir={isRTL ? 'rtl' : 'ltr'}>
+      <h1>Welcome ({locale || 'en'})</h1>
+      {/* Localized content */}
+    </div>
+  )
+}
+
+// routes/{-$locale}/about.tsx
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+```
+
+# Solid
+
+```tsx
+// Route structure:
+// routes/
+//   {-$locale}/
+//     index.tsx        // /, /en, /fr
+//     about.tsx        // /about, /en/about, /fr/about
+//     blog/
+//       index.tsx      // /blog, /en/blog, /fr/blog
+//       $slug.tsx      // /blog/post, /en/blog/post, /fr/blog/post
+
+// routes/{-$locale}/index.tsx
+export const Route = createFileRoute('/{-$locale}/')({
+  component: HomeComponent,
+})
+
+function HomeComponent() {
+  const params = Route.useParams()
+  const isRTL = ['ar', 'he', 'fa'].includes(params().locale || '')
+
+  return (
+    <div dir={isRTL ? 'rtl' : 'ltr'}>
+      <h1>Welcome ({params().locale || 'en'})</h1>
+      {/* Localized content */}
+    </div>
+  )
+}
+
+// routes/{-$locale}/about.tsx
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+```
+
+
+
+### SEO and Canonical URLs
+
+Handle SEO for i18n routes properly:
+
+
+
+# React
+
+```tsx title="src/routes/{-$locale}/products/$id.tsx"
+export const Route = createFileRoute('/{-$locale}/products/$id')({
+  component: ProductComponent,
+  head: ({ params, loaderData }) => {
+    const locale = params.locale || 'en'
+    const product = loaderData
+
+    return {
+      title: product.title[locale] || product.title.en,
+      meta: [
+        {
+          name: 'description',
+          content: product.description[locale] || product.description.en,
+        },
+        {
+          property: 'og:locale',
+          content: locale,
+        },
+      ],
+      links: [
+        // Canonical URL (always use default locale format)
+        {
+          rel: 'canonical',
+          href: `https://example.com/products/${params.id}`,
+        },
+        // Alternate language versions
+        {
+          rel: 'alternate',
+          hreflang: 'en',
+          href: `https://example.com/products/${params.id}`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'fr',
+          href: `https://example.com/fr/products/${params.id}`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'es',
+          href: `https://example.com/es/products/${params.id}`,
+        },
+      ],
+    }
+  },
+})
+```
+
+# Solid
+
+```tsx title="src/routes/{-$locale}/products/$id.tsx"
+export const Route = createFileRoute('/{-$locale}/products/$id')({
+  component: ProductComponent,
+  head: ({ params, loaderData }) => {
+    const locale = params.locale || 'en'
+    const product = loaderData
+
+    return {
+      title: product.title[locale] || product.title.en,
+      meta: [
+        {
+          name: 'description',
+          content: product.description[locale] || product.description.en,
+        },
+        {
+          property: 'og:locale',
+          content: locale,
+        },
+      ],
+      links: [
+        // Canonical URL (always use default locale format)
+        {
+          rel: 'canonical',
+          href: `https://example.com/products/${params.id}`,
+        },
+        // Alternate language versions
+        {
+          rel: 'alternate',
+          hreflang: 'en',
+          href: `https://example.com/products/${params.id}`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'fr',
+          href: `https://example.com/fr/products/${params.id}`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'es',
+          href: `https://example.com/es/products/${params.id}`,
+        },
+      ],
+    }
+  },
+})
+```
+
+
+
+### Type Safety for i18n
+
+Ensure type safety for your i18n implementations:
+
+
+
+# React
+
+```tsx title="src/routes/{-$locale}/shop/{-$category}.tsx"
+// Define supported locales
+type Locale = 'en' | 'fr' | 'es' | 'de'
+
+// Type-safe locale validation
+function validateLocale(locale: string | undefined): locale is Locale {
+  return ['en', 'fr', 'es', 'de'].includes(locale as Locale)
+}
+
+export const Route = createFileRoute('/{-$locale}/shop/{-$category}')({
+  beforeLoad: async ({ params }) => {
+    const { locale } = params
+
+    // Type-safe locale validation
+    if (locale && !validateLocale(locale)) {
+      throw redirect({
+        to: '/shop/{-$category}',
+        params: { category: params.category },
+      })
+    }
+
+    return {
+      locale: (locale as Locale) || 'en',
+      isDefaultLocale: !locale || locale === 'en',
+    }
+  },
+  component: ShopComponent,
+})
+
+function ShopComponent() {
+  const { locale, category } = Route.useParams()
+  const { isDefaultLocale } = Route.useRouteContext()
+
+  // TypeScript knows locale is Locale | undefined
+  // and we have validated it in beforeLoad
+
+  return (
+    <div>
+      <h1>Shop {category ? `- ${category}` : ''}</h1>
+      <p>Language: {locale || 'en'}</p>
+      {!isDefaultLocale && (
+        <Link to="/shop/{-$category}" params={{ category }}>
+          View in English
+        </Link>
+      )}
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/{-$locale}/shop/{-$category}.tsx"
+// Define supported locales
+type Locale = 'en' | 'fr' | 'es' | 'de'
+
+// Type-safe locale validation
+function validateLocale(locale: string | undefined): locale is Locale {
+  return ['en', 'fr', 'es', 'de'].includes(locale as Locale)
+}
+
+export const Route = createFileRoute('/{-$locale}/shop/{-$category}')({
+  beforeLoad: async ({ params }) => {
+    const { locale } = params
+
+    // Type-safe locale validation
+    if (locale && !validateLocale(locale)) {
+      throw redirect({
+        to: '/shop/{-$category}',
+        params: { category: params.category },
+      })
+    }
+
+    return {
+      locale: (locale as Locale) || 'en',
+      isDefaultLocale: !locale || locale === 'en',
+    }
+  },
+  component: ShopComponent,
+})
+
+function ShopComponent() {
+  const params = Route.useParams()
+  const routeContext = Route.useRouteContext()
+
+  // TypeScript knows locale is Locale | undefined
+  // and we have validated it in beforeLoad
+
+  return (
+    <div>
+      <h1>Shop {params().category ? `- ${params().category}` : ''}</h1>
+      <p>Language: {params().locale || 'en'}</p>
+      {!routeContext().isDefaultLocale && (
+        <Link to="/shop/{-$category}" params={{ category: params().category }}>
+          View in English
+        </Link>
+      )}
+    </div>
+  )
+}
+```
+
+
+
+Optional path parameters provide a powerful and flexible foundation for implementing internationalization in your TanStack Router applications. Whether you prefer prefix-based or combined approaches, you can create clean, SEO-friendly URLs while maintaining excellent developer experience and type safety.
+
+## Allowed Characters
+
+By default, path params are escaped with `encodeURIComponent`. If you want to allow other valid URI characters (e.g. `@` or `+`), you can specify that in your [RouterOptions](/router/api/router/RouterOptionsType#pathparamsallowedcharacters-property).
+
+Example usage:
+
+```tsx
+const router = createRouter({
+  // ...
+  pathParamsAllowedCharacters: ['@'],
+})
+```
+
+The following is the list of accepted allowed characters:
+
+- `;`
+- `:`
+- `@`
+- `&`
+- `=`
+- `+`
+- `$`
+- `,`
diff --git a/mintlify/router/guide/preloading.md b/mintlify/router/guide/preloading.md
new file mode 100644
index 000000000..aa7d0de0e
--- /dev/null
+++ b/mintlify/router/guide/preloading.md
@@ -0,0 +1,285 @@
+---
+title: Preloading
+---
+
+Preloading in TanStack Router is a way to load a route before the user actually navigates to it. This is useful for routes that are likely to be visited by the user next. For example, if you have a list of posts and the user is likely to click on one of them, you can preload the post route so that it's ready to go when the user clicks on it.
+
+## Supported Preloading Strategies
+
+- Intent
+  - Preloading by **"intent"** works by using hover and touch start events on `<Link>` components to preload the dependencies for the destination route.
+  - This strategy is useful for preloading routes that the user is likely to visit next.
+- Viewport Visibility
+  - Preloading by **"viewport**" works by using the Intersection Observer API to preload the dependencies for the destination route when the `<Link>` component is in the viewport.
+  - This strategy is useful for preloading routes that are below the fold or off-screen.
+- Render
+  - Preloading by **"render"** works by preloading the dependencies for the destination route as soon as the `<Link>` component is rendered in the DOM.
+  - This strategy is useful for preloading routes that are always needed.
+
+## How long does preloaded data stay in memory?
+
+Preloaded route matches are temporarily cached in memory with a few important caveats:
+
+- **Unused preloaded data is removed after 30 seconds by default.** This can be configured by setting the `defaultPreloadMaxAge` option on your router.
+- **Obviously, when a route is loaded, its preloaded version is promoted to the router's normal pending matches state.**
+
+If you need more control over preloading, caching and/or garbage collection of preloaded data, you should use an external caching library like [TanStack Query](https://tanstack.com/query).
+
+The simplest way to preload routes for your application is to set the `defaultPreload` option to `intent` for your entire router:
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  defaultPreload: 'intent',
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreload: 'intent',
+})
+```
+
+
+
+This will turn on `intent` preloading by default for all `<Link>` components in your application. You can also set the `preload` prop on individual `<Link>` components to override the default behavior.
+
+## Preload Delay
+
+By default, preloading will start after **50ms** of the user hovering or touching a `<Link>` component. You can change this delay by setting the `defaultPreloadDelay` option on your router:
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadDelay: 100,
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadDelay: 100,
+})
+```
+
+
+
+You can also set the `preloadDelay` prop on individual `<Link>` components to override the default behavior on a per-link basis.
+
+## Built-in Preloading & `preloadStaleTime`
+
+If you're using the built-in loaders, you can control how long preloaded data is considered fresh until another preload is triggered by setting either `routerOptions.defaultPreloadStaleTime` or `routeOptions.preloadStaleTime` to a number of milliseconds. **By default, preloaded data is considered fresh for 30 seconds.**.
+
+To change this, you can set the `defaultPreloadStaleTime` option on your router:
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 10_000,
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 10_000,
+})
+```
+
+
+
+Or, you can use the `routeOptions.preloadStaleTime` option on individual routes:
+
+```tsx
+// src/routes/posts.$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => fetchPost(params.postId),
+  // Preload the route again if the preload cache is older than 10 seconds
+  preloadStaleTime: 10_000,
+})
+```
+
+## Preloading with External Libraries
+
+When integrating external caching libraries like React Query, which have their own mechanisms for determining stale data, you may want to override the default preloading and stale-while-revalidate logic of TanStack Router. These libraries often use options like staleTime to control the freshness of data.
+
+To customize the preloading behavior in TanStack Router and fully leverage your external library's caching strategy, you can bypass the built-in caching by setting routerOptions.defaultPreloadStaleTime or routeOptions.preloadStaleTime to 0. This ensures that all preloads are marked as stale internally, and loaders are always invoked, allowing your external library, such as React Query, to manage data loading and caching.
+
+For example:
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 0,
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 0,
+})
+```
+
+
+
+This would then allow you, for instance, to use an option like React Query's `staleTime` to control the freshness of your preloads.
+
+## Preloading Manually
+
+If you need to manually preload a route, you can use the router's `preloadRoute` method. It accepts a standard TanStack `NavigateOptions` object and returns a promise that resolves when the route is preloaded.
+
+
+
+# React
+
+```tsx
+function Component() {
+  const router = useRouter()
+
+  useEffect(() => {
+    async function preload() {
+      try {
+        const matches = await router.preloadRoute({
+          to: postRoute,
+          params: { id: 1 },
+        })
+      } catch (err) {
+        // Failed to preload route
+      }
+    }
+
+    preload()
+  }, [router])
+
+  return <div />
+}
+```
+
+# Solid
+
+```tsx
+function Component() {
+  const router = useRouter()
+
+  createEffect(() => {
+    async function preload() {
+      try {
+        const matches = await router.preloadRoute({
+          to: postRoute,
+          params: { id: 1 },
+        })
+      } catch (err) {
+        // Failed to preload route
+      }
+    }
+
+    preload()
+  })
+
+  return <div />
+}
+```
+
+
+
+If you need to preload only the JS chunk of a route, you can use the router's `loadRouteChunk` method. It accepts a route object and returns a promise that resolves when the route chunk is loaded.
+
+
+
+# React
+
+```tsx
+function Component() {
+  const router = useRouter()
+
+  useEffect(() => {
+    async function preloadRouteChunks() {
+      try {
+        const postsRoute = router.routesByPath['/posts']
+        await Promise.all([
+          router.loadRouteChunk(router.routesByPath['/']),
+          router.loadRouteChunk(postsRoute),
+          router.loadRouteChunk(postsRoute.parentRoute),
+        ])
+      } catch (err) {
+        // Failed to preload route chunk
+      }
+    }
+
+    preloadRouteChunks()
+  }, [router])
+
+  return <div />
+}
+```
+
+# Solid
+
+```tsx
+function Component() {
+  const router = useRouter()
+
+  createEffect(() => {
+    async function preloadRouteChunks() {
+      try {
+        const postsRoute = router.routesByPath['/posts']
+        await Promise.all([
+          router.loadRouteChunk(router.routesByPath['/']),
+          router.loadRouteChunk(postsRoute),
+          router.loadRouteChunk(postsRoute.parentRoute),
+        ])
+      } catch (err) {
+        // Failed to preload route chunk
+      }
+    }
+
+    preloadRouteChunks()
+  })
+
+  return <div />
+}
+```
+
+
diff --git a/mintlify/router/guide/render-optimizations.md b/mintlify/router/guide/render-optimizations.md
new file mode 100644
index 000000000..a01d6b4de
--- /dev/null
+++ b/mintlify/router/guide/render-optimizations.md
@@ -0,0 +1,88 @@
+---
+title: Render Optimizations
+---
+
+TanStack Router includes several optimizations to ensure your components only re-render when necessary. These optimizations include:
+
+## structural sharing
+
+TanStack Router uses a technique called "structural sharing" to preserve as many references as possible between re-renders, which is particularly useful for state stored in the URL, such as search parameters.
+
+For example, consider a `details` route with two search parameters, `foo` and `bar`, accessed like this:
+
+```tsx
+const search = Route.useSearch()
+```
+
+When only `bar` is changed by navigating from `/details?foo=f1&bar=b1` to `/details?foo=f1&bar=b2`, `search.foo` will be referentially stable and only `search.bar` will be replaced.
+
+## fine-grained selectors
+
+You can access and subscribe to the router state using various hooks like `useRouterState`, `useSearch`, and others. If you only want a specific component to re-render when a particular subset of the router state such as a subset of the search parameters changes, you can use partial subscriptions with the `select` property.
+
+```tsx
+// component won't re-render when `bar` changes
+const foo = Route.useSearch({ select: ({ foo }) => foo })
+```
+
+### structural sharing with fine-grained selectors
+
+The `select` function can perform various calculations on the router state, allowing you to return different types of values, such as objects. For example:
+
+```tsx
+const result = Route.useSearch({
+  select: (search) => {
+    return {
+      foo: search.foo,
+      hello: `hello ${search.foo}`,
+    }
+  },
+})
+```
+
+Although this works, it will cause your component to re-render each time, since `select` is now returning a new object each time it’s called.
+
+You can avoid this re-rendering issue by using "structural sharing" as described above. By default, structural sharing is turned off to maintain backward compatibility, but this may change in v2.
+
+To enable structural sharing for fine grained selectors, you have two options:
+
+#### Enable it by default in the router options:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  defaultStructuralSharing: true,
+})
+```
+
+#### Enable it per hook usage as shown here:
+
+```tsx
+const result = Route.useSearch({
+  select: (search) => {
+    return {
+      foo: search.foo,
+      hello: `hello ${search.foo}`,
+    }
+  },
+  structuralSharing: true,
+})
+```
+
+> [!IMPORTANT]
+> Structural sharing only works with JSON-compatible data. This means you cannot use `select` to return items like class instances if structural sharing is enabled.
+
+In line with TanStack Router's type-safe design, TypeScript will raise an error if you attempt the following:
+
+```tsx
+const result = Route.useSearch({
+  select: (search) => {
+    return {
+      date: new Date(),
+    }
+  },
+  structuralSharing: true,
+})
+```
+
+If structural sharing is enabled by default in the router options, you can prevent this error by setting `structuralSharing: false`.
diff --git a/mintlify/router/guide/route-masking.md b/mintlify/router/guide/route-masking.md
new file mode 100644
index 000000000..02f7e4c03
--- /dev/null
+++ b/mintlify/router/guide/route-masking.md
@@ -0,0 +1,164 @@
+---
+title: Route Masking
+---
+
+Route masking is a way to mask the actual URL of a route that gets persisted to the browser's history and URL bar. This is useful for scenarios where you want to show a different URL than the one that is actually being navigated to and then falling back to the displayed URL when it is shared and (optionally) when the page is reloaded. Here's a few examples:
+
+- Navigating to a modal route like `/photo/5/modal`, but masking the actual URL as `/photos/5`
+- Navigating to a modal route like `/post/5/comments`, but masking the actual URL as `/posts/5`
+- Navigating to a route with the search param `?showLogin=true`, but masking the URL to _not_ contain the search param
+- Navigating to a route with the search param `?modal=settings`, but masking the URL as `/settings'
+
+Each of these scenarios can be achieved with route masking and even extended to support more advanced patterns like [parallel routes](/router/guide/parallel-routes).
+
+## How does route masking work?
+
+> [!IMPORTANT]
+> You **do not** need to understand how route masking works in order to use it. This section is for those who are curious about how it works under the hood. Skip to [How do I use route masking?](#how-do-i-use-route-masking) to learn how to use it!.
+
+Route masking utilizes the `location.state` API to store the desired runtime location inside of the location that will get written to the URL. It stores this runtime location under the `__tempLocation` state property:
+
+```tsx
+const location = {
+  pathname: '/photos/5',
+  search: '',
+  hash: '',
+  state: {
+    key: 'wesdfs',
+    __tempKey: 'sadfasd',
+    __tempLocation: {
+      pathname: '/photo/5/modal',
+      search: '',
+      hash: '',
+      state: {},
+    },
+  },
+}
+```
+
+When the router parses a location from history with the `location.state.__tempLocation` property, it will use that location instead of the one that was parsed from the URL. This allows you to navigate to a route like `/photos/5` and have the router actually navigate to `/photo/5/modal` instead. When this happens, the history location is saved back into the `location.maskedLocation` property, just in case we need to know what the **actual URL** is. One example of where this is used is in the Devtools where we detect if a route is masked and show the actual URL instead of the masked one!
+
+Remember, you don't need to worry about any of this. It's all handled for you automatically under the hood!
+
+## How do I use route masking?
+
+Route masking is a simple API that can be used in 2 ways:
+
+- Imperatively via the `mask` option available on the `<Link>` and `navigate()` APIs
+- Declaratively via the Router's `routeMasks` option
+
+When using either route masking APIs, the `mask` option accepts the same navigation object that the `<Link>` and `navigate()` APIs accept. This means you can use the same `to`, `replace`, `state`, and `search` options that you're already familiar with. The only difference is that the `mask` option will be used to mask the URL of the route being navigated to.
+
+> 🧠 The mask option is also **type-safe**! This means that if you're using TypeScript, you'll get type errors if you try to pass an invalid navigation object to the `mask` option. Booyah!
+
+### Imperative route masking
+
+The `<Link>` and `navigate()` APIs both accept a `mask` option that can be used to mask the URL of the route being navigated to. Here's an example of using it with the `<Link>` component:
+
+```tsx
+<Link
+  to="/photos/$photoId/modal"
+  params={{ photoId: 5 }}
+  mask={{
+    to: '/photos/$photoId',
+    params: {
+      photoId: 5,
+    },
+  }}
+>
+  Open Photo
+</Link>
+```
+
+And here's an example of using it with the `navigate()` API:
+
+```tsx
+const navigate = useNavigate()
+
+function onOpenPhoto() {
+  navigate({
+    to: '/photos/$photoId/modal',
+    params: { photoId: 5 },
+    mask: {
+      to: '/photos/$photoId',
+      params: {
+        photoId: 5,
+      },
+    },
+  })
+}
+```
+
+### Declarative route masking
+
+In addition to the imperative API, you can also use the Router's `routeMasks` option to declaratively mask routes. Instead of needing to pass the `mask` option to every `<Link>` or `navigate()` call, you can instead create a route mask on the Router to mask routes that match a certain pattern. Here's an example of the same route mask from above, but using the `routeMasks` option instead:
+
+
+
+# React
+
+```tsx
+import { createRouteMask } from '@tanstack/react-router'
+
+const photoModalToPhotoMask = createRouteMask({
+  routeTree,
+  from: '/photos/$photoId/modal',
+  to: '/photos/$photoId',
+  params: (prev) => ({
+    photoId: prev.photoId,
+  }),
+})
+
+const router = createRouter({
+  routeTree,
+  routeMasks: [photoModalToPhotoMask],
+})
+```
+
+# Solid
+
+```tsx
+import { createRouteMask } from '@tanstack/solid-router'
+
+const photoModalToPhotoMask = createRouteMask({
+  routeTree,
+  from: '/photos/$photoId/modal',
+  to: '/photos/$photoId',
+  params: (prev) => ({
+    photoId: prev.photoId,
+  }),
+})
+
+const router = createRouter({
+  routeTree,
+  routeMasks: [photoModalToPhotoMask],
+})
+```
+
+
+
+When creating a route mask, you'll need to pass 1 argument with at least:
+
+- `routeTree` - The route tree that the route mask will be applied to
+- `from` - The route ID that the route mask will be applied to
+- `...navigateOptions` - The standard `to`, `search`, `params`, `replace`, etc options that the `<Link>` and `navigate()` APIs accept
+
+> 🧠 The `createRouteMask` option is also **type-safe**! This means that if you're using TypeScript, you'll get type errors if you try to pass an invalid route mask to the `routeMasks` option.
+
+## Unmasking when sharing the URL
+
+URLs are automatically unmasked when they are shared since as soon as a URL is detached from your browsers local history stack, the URL masking data is no longer available. Essentially, as soon as you copy and paste a URL out of your history, its masking data is lost... after all, that's the point of masking a URL!
+
+## Local Unmasking Defaults
+
+**By default, URLs are not unmasked when the page is reloaded locally**. Masking data is stored in the `location.state` property of the history location, so as long as the history location is still in memory in your history stack, the masking data will be available and the URL will continue to be masked.
+
+## Unmasking on page reload
+
+**As stated above, URLs are not unmasked when the page is reloaded by default**.
+
+If you want to unmask a URL locally when the page is reloaded, you have 3 options, each overriding the previous one in priority if passed:
+
+- Set the Router's default `unmaskOnReload` option to `true`
+- Return the `unmaskOnReload: true` option from the masking function when creating a route mask with `createRouteMask()`
+- Pass the `unmaskOnReload: true` option to the `<Link`> component or `navigate()` API
diff --git a/mintlify/router/guide/router-context.md b/mintlify/router/guide/router-context.md
new file mode 100644
index 000000000..57221f361
--- /dev/null
+++ b/mintlify/router/guide/router-context.md
@@ -0,0 +1,546 @@
+---
+title: Router Context
+---
+
+TanStack Router's router context is a very powerful tool that can be used for dependency injection among many other things. Aptly named, the router context is passed through the router and down through each matching route. At each route in the hierarchy, the context can be modified or added to. Here's a few ways you might use the router context practically:
+
+- Dependency Injection
+  - You can supply dependencies (e.g. a loader function, a data fetching client, a mutation service) which the route and all child routes can access and use without importing or creating directly.
+- Breadcrumbs
+  - While the main context object for each route is merged as it descends, each route's unique context is also stored making it possible to attach breadcrumbs or methods to each route's context.
+- Dynamic meta tag management
+  - You can attach meta tags to each route's context and then use a meta tag manager to dynamically update the meta tags on the page as the user navigates the site.
+
+These are just suggested uses of the router context. You can use it for whatever you want!
+
+## Typed Router Context
+
+Like everything else, the root router context is strictly typed. This type can be augmented via any route's `beforeLoad` option as it is merged down the route match tree. To constrain the type of the root router context, you must use the `createRootRouteWithContext<YourContextTypeHere>()(routeOptions)` function to create a new router context instead of the `createRootRoute()` function to create your root route. Here's an example:
+
+
+
+# React
+
+```tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/react-router'
+
+interface MyRouterContext {
+  user: User
+}
+
+// Use the routerContext to create your root route
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const routeTree = rootRoute.addChildren([
+  // ...
+])
+
+// Use the routerContext to create your router
+const router = createRouter({
+  routeTree,
+})
+```
+
+# Solid
+
+```tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  user: User
+}
+
+// Use the routerContext to create your root route
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const routeTree = rootRoute.addChildren([
+  // ...
+])
+
+// Use the routerContext to create your router
+const router = createRouter({
+  routeTree,
+})
+```
+
+
+
+> [!TIP]
+> `MyRouterContext` only needs to contain content that will be passed directly to `createRouter` below. All other context added in `beforeLoad` will be inferred.
+
+## Passing the initial Router Context
+
+The router context is passed to the router at instantiation time. You can pass the initial router context to the router via the `context` option:
+
+> [!TIP]
+> If your context has any required properties, you will see a TypeScript error if you don't pass them in the initial router context. If all of your context properties are optional, you will not see a TypeScript error and passing the context will be optional. If you don't pass a router context, it defaults to `{}`.
+
+
+
+# React
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+// Use the routerContext you created to create your router
+const router = createRouter({
+  routeTree,
+  context: {
+    user: {
+      id: '123',
+      name: 'John Doe',
+    },
+  },
+})
+```
+
+# Solid
+
+```tsx
+import { createRouter } from '@tanstack/solid-router'
+
+// Use the routerContext you created to create your router
+const router = createRouter({
+  routeTree,
+  context: {
+    user: {
+      id: '123',
+      name: 'John Doe',
+    },
+  },
+})
+```
+
+
+
+### Invalidating the Router Context
+
+If you need to invalidate the context state you are passing into the router, you can call the `invalidate` method to tell the router to recompute the context. This is useful when you need to update the context state and have the router recompute the context for all routes.
+
+
+
+# React
+
+```tsx
+function useAuth() {
+  const router = useRouter()
+  const [user, setUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user)
+      router.invalidate()
+    })
+
+    return unsubscribe
+  }, [])
+
+  return user
+}
+```
+
+# Solid
+
+```tsx
+function useAuth() {
+  const router = useRouter()
+  const [user, setUser] = createSignal<User | null>(null)
+
+  createEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user)
+      router.invalidate()
+    })
+
+    return unsubscribe
+  }, [])
+
+  return user()
+}
+```
+
+
+
+## Using the Router Context
+
+Once you have defined the router context type, you can use it in your route definitions:
+
+```tsx
+// src/routes/todos.tsx
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  loader: ({ context }) => fetchTodosByUserId(context.user.id),
+})
+```
+
+You can even inject data fetching and mutation implementations themselves! In fact, this is highly recommended 😜
+
+Let's try this with a simple function to fetch some todos:
+
+```tsx
+const fetchTodosByUserId = async ({ userId }) => {
+  const response = await fetch(`/api/todos?userId=${userId}`)
+  const data = await response.json()
+  return data
+}
+
+const router = createRouter({
+  routeTree: rootRoute,
+  context: {
+    userId: '123',
+    fetchTodosByUserId,
+  },
+})
+```
+
+Then, in your route:
+
+```tsx
+// src/routes/todos.tsx
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  loader: ({ context }) => context.fetchTodosByUserId(context.userId),
+})
+```
+
+### How about an external data fetching library?
+
+
+
+# React
+
+```tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/react-router'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree: rootRoute,
+  context: {
+    queryClient,
+  },
+})
+```
+
+# Solid
+
+```tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree: rootRoute,
+  context: {
+    queryClient,
+  },
+})
+```
+
+
+
+Then, in your route:
+
+```tsx
+// src/routes/todos.tsx
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData({
+      queryKey: ['todos', { userId: user.id }],
+      queryFn: fetchTodos,
+    })
+  },
+})
+```
+
+
+
+# React
+
+## How about using React Context/Hooks?
+
+When trying to use React Context or Hooks in your route's `beforeLoad` or `loader` functions, it's important to remember React's [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). You can't use hooks in a non-React function, so you can't use hooks in your `beforeLoad` or `loader` functions.
+
+So, how do we use React Context or Hooks in our route's `beforeLoad` or `loader` functions? We can use the router context to pass down the React Context or Hooks to our route's `beforeLoad` or `loader` functions.
+
+Let's look at the setup for an example, where we pass down a `useNetworkStrength` hook to our route's `loader` function:
+
+
+
+```tsx title="src/routes/__root.tsx"
+// First, make sure the context for the root route is typed
+import { createRootRouteWithContext } from '@tanstack/react-router'
+import { useNetworkStrength } from '@/hooks/useNetworkStrength'
+
+interface MyRouterContext {
+  networkStrength: ReturnType<typeof useNetworkStrength>
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+```
+
+
+
+In this example, we'd instantiate the hook before rendering the router using the `<RouterProvider />`. This way, the hook would be called in React-land, therefore adhering to the Rules of Hooks.
+
+
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    networkStrength: undefined!, // We'll set this in React-land
+  },
+})
+```
+
+
+
+Then, we can call the `useNetworkStrength` hook in our `App` component and pass the returned value into the router context via the `<RouterProvider />`:
+
+
+
+```tsx title="src/main.tsx"
+import { RouterProvider } from '@tanstack/react-router'
+import { router } from './router'
+
+import { useNetworkStrength } from '@/hooks/useNetworkStrength'
+
+function App() {
+  const networkStrength = useNetworkStrength()
+  // Inject the returned value from the hook into the router context
+  return <RouterProvider router={router} context={{ networkStrength }} />
+}
+
+// ...
+```
+
+
+
+So, now in our route's `loader` function, we can access the `networkStrength` hook from the router context:
+
+
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  component: Posts,
+  loader: ({ context }) => {
+    if (context.networkStrength === 'STRONG') {
+      // Do something
+    }
+  },
+})
+```
+
+
+
+
+
+## Modifying the Router Context
+
+The router context is passed down the route tree and is merged at each route. This means that you can modify the context at each route and the modifications will be available to all child routes. Here's an example:
+
+
+
+# React
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/react-router'
+
+interface MyRouterContext {
+  foo: boolean
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+```
+
+
+
+
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  context: {
+    foo: true,
+  },
+})
+```
+
+
+
+
+
+```tsx title="src/routes/todos.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  beforeLoad: () => {
+    return {
+      bar: true,
+    }
+  },
+  loader: ({ context }) => {
+    context.foo // true
+    context.bar // true
+  },
+})
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  foo: boolean
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+```
+
+
+
+
+
+```tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  context: {
+    foo: true,
+  },
+})
+```
+
+
+
+
+
+```tsx title="src/routes/todos.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  beforeLoad: () => {
+    return {
+      bar: true,
+    }
+  },
+  loader: ({ context }) => {
+    context.foo // true
+    context.bar // true
+  },
+})
+```
+
+
+
+
+
+## Processing Accumulated Route Context
+
+Context, especially the isolated route `context` objects, make it trivial to accumulate and process the route context objects for all matched routes. Here's an example where we use all of the matched route contexts to generate a breadcrumb trail:
+
+```tsx title="src/routes/__root.tsx"
+export const Route = createRootRoute({
+  component: () => {
+    const matches = useRouterState({ select: (s) => s.matches })
+
+    const breadcrumbs = matches
+      .filter((match) => match.context.getTitle)
+      .map(({ pathname, context }) => {
+        return {
+          title: context.getTitle(),
+          path: pathname,
+        }
+      })
+
+    // ...
+  },
+})
+```
+
+Using that same route context, we could also generate a title tag for our page's `<head>`:
+
+```tsx title="src/routes/__root.tsx"
+export const Route = createRootRoute({
+  component: () => {
+    const matches = useRouterState({ select: (s) => s.matches })
+
+    const matchWithTitle = [...matches]
+      .reverse()
+      .find((d) => d.context.getTitle)
+
+    const title = matchWithTitle?.context.getTitle() || 'My App'
+
+    return (
+      <html>
+        <head>
+          <title>{title}</title>
+        </head>
+        <body>{/* ... */}</body>
+      </html>
+    )
+  },
+})
+```
diff --git a/mintlify/router/guide/router-events.md b/mintlify/router/guide/router-events.md
new file mode 100644
index 000000000..a1c601aad
--- /dev/null
+++ b/mintlify/router/guide/router-events.md
@@ -0,0 +1,129 @@
+---
+title: Router Events
+---
+
+TanStack Router exposes router lifecycle events through `router.subscribe`. This is useful for imperative side effects like analytics, resetting external state, or running DOM-dependent logic after navigation.
+
+## Basic usage
+
+`router.subscribe` takes an event name and a listener, then returns an unsubscribe function:
+
+```tsx
+const unsubscribe = router.subscribe('onResolved', (event) => {
+  console.info('Navigation finished:', event.toLocation.href)
+})
+
+// Later, clean up the listener
+unsubscribe()
+```
+
+## When to use it
+
+`router.subscribe` is best for imperative integrations that need to observe navigation without driving rendering:
+
+- Analytics and pageview tracking
+- Resetting external caches or mutation state
+- Logging navigation timing and transitions
+- Running DOM-dependent logic after routes render
+
+If you need reactive UI updates, prefer framework hooks like `useRouterState`, `useSearch`, and `useParams` instead of subscribing manually.
+
+## Available events
+
+TanStack Router emits these lifecycle events:
+
+- `onBeforeNavigate` - right before a navigation begins
+- `onBeforeLoad` - before route loading starts
+- `onLoad` - after the next location has committed and route matches have loaded
+- `onBeforeRouteMount` - after loading finishes, just before route components mount
+- `onResolved` - after the navigation has fully resolved
+- `onRendered` - after the route has rendered
+
+For the full event payload types, see the [`RouterEvents` type](/router/api/router/RouterEventsType).
+
+## Typical event flow
+
+For a normal navigation, the events usually flow like this:
+
+1. `onBeforeNavigate`
+2. `onBeforeLoad`
+3. `onLoad`
+4. `onBeforeRouteMount`
+5. `onResolved`
+6. `onRendered`
+
+You usually do not need every event. A good rule of thumb is:
+
+- Use `onBeforeNavigate` or `onBeforeLoad` to observe navigation start
+- Use `onResolved` for analytics and cleanup after navigation finishes
+- Use `onRendered` for DOM-dependent work
+
+## Event payload
+
+Navigation events receive location change metadata describing what changed:
+
+```tsx
+const unsubscribe = router.subscribe('onBeforeNavigate', (event) => {
+  console.info({
+    from: event.fromLocation?.href,
+    to: event.toLocation.href,
+    pathChanged: event.pathChanged,
+    hrefChanged: event.hrefChanged,
+    hashChanged: event.hashChanged,
+  })
+})
+```
+
+A few useful details:
+
+- `fromLocation` can be `undefined` on the initial load
+- `pathChanged` tells you whether the pathname changed
+- `hrefChanged` includes pathname, search, and hash changes
+- `hashChanged` is useful for distinguishing hash-only navigations
+
+## Common patterns
+
+### Track pageviews
+
+`onResolved` is a good default for analytics because it fires after navigation finishes:
+
+```tsx
+const unsubscribe = router.subscribe('onResolved', ({ toLocation }) => {
+  analytics.track('page_view', {
+    path: toLocation.pathname,
+    href: toLocation.href,
+  })
+})
+```
+
+### Clear external mutation state
+
+If you use a mutation library without keyed mutation state, clear it after navigation:
+
+```tsx
+const unsubscribe = router.subscribe('onResolved', ({ pathChanged }) => {
+  if (pathChanged) {
+    mutationCache.clear()
+  }
+})
+```
+
+### Run DOM-dependent logic
+
+Use `onRendered` when your side effect depends on the new route content already being in the DOM:
+
+```tsx
+const unsubscribe = router.subscribe('onRendered', ({ toLocation }) => {
+  focusPageHeading(toLocation.pathname)
+})
+```
+
+## Unsubscribing in components
+
+If you subscribe from a component or framework effect, always return the unsubscribe function from your cleanup so the listener is removed when the component unmounts.
+
+## Related APIs
+
+- [`Router` type](/router/api/router/RouterType)
+- [`RouterEvents` type](/router/api/router/RouterEventsType)
+- [Data Mutations](/router/guide/data-mutations)
diff --git a/mintlify/router/guide/scroll-restoration.md b/mintlify/router/guide/scroll-restoration.md
new file mode 100644
index 000000000..93ff6c851
--- /dev/null
+++ b/mintlify/router/guide/scroll-restoration.md
@@ -0,0 +1,232 @@
+---
+id: scroll-restoration
+title: Scroll Restoration
+---
+
+## Hash/Top-of-Page Scrolling
+
+Out of the box, TanStack Router supports both **hash scrolling** and **top-of-page scrolling** without any additional configuration.
+
+## Scroll-to-top & Nested Scrollable Areas
+
+By default, scroll-to-top mimics the behavior of the browser, which means only the `window` itself is scrolled to the top after successful navigation. For many apps however, it's common for the main scrollable area to be a nested div or similar because of advanced layouts. If you would like TanStack Router to also scroll these main scrollable areas for you, you can add selectors to target them using the `routerOptions.scrollToTopSelectors`:
+
+```tsx
+const router = createRouter({
+  scrollToTopSelectors: ['#main-scrollable-area'],
+})
+```
+
+For complex selectors that cannot be simply resolved using `document.querySelector(selector)`, you can pass functions that return HTML elements to `routerOptions.scrollToTopSelectors`:
+
+```tsx
+const selector = () =>
+  document
+    .querySelector('#shadowRootParent')
+    ?.shadowRoot?.querySelector('#main-scrollable-area')
+
+const router = createRouter({
+  scrollToTopSelectors: [selector],
+})
+```
+
+These selectors are handled **in addition to `window`** which cannot be disabled currently.
+
+## Scroll Restoration
+
+Scroll restoration is the process of restoring the scroll position of a page when the user navigates back to it. This is normally a built-in feature for standard HTML based websites, but can be difficult to replicate for SPA applications because:
+
+- SPAs typically use the `history.pushState` API for navigation, so the browser doesn't know to restore the scroll position natively
+- SPAs sometimes render content asynchronously, so the browser doesn't know the height of the page until after it's rendered
+- SPAs can sometimes use nested scrollable containers to force specific layouts and features.
+
+Not only that, but it's very common for applications to have multiple scrollable areas within an app, not just the body. For example, a chat application might have a scrollable sidebar and a scrollable chat area. In this case, you would want to restore the scroll position of both areas independently.
+
+To alleviate this problem, TanStack Router provides a scroll restoration component and hook that handle the process of monitoring, caching and restoring scroll positions for you.
+
+It does this by:
+
+- Monitoring the DOM for scroll events
+- Registering scrollable areas with the scroll restoration cache
+- Listening to the proper router events to know when to cache and restore scroll positions
+- Storing scroll positions for each scrollable area in the cache (including `window` and `body`)
+- Restoring scroll positions after successful navigations before DOM paint
+
+That may sound like a lot, but for you, it's as simple as this:
+
+```tsx
+const router = createRouter({
+  scrollRestoration: true,
+})
+```
+
+> [!NOTE]
+> The `<ScrollRestoration />` component still works, but has been deprecated.
+
+## Custom Cache Keys
+
+Falling in behind Remix's own Scroll Restoration APIs, you can also customize the key used to cache scroll positions for a given scrollable area using the `getKey` option. This could be used, for example, to force the same scroll position to be used regardless of the users browser history.
+
+The `getKey` option receives the relevant `Location` state from TanStack Router and expects you to return a string to uniquely identify the scrollable measurements for that state.
+
+The default `getKey` is `(location) => location.state.__TSR_key!`, where `__TSR_key` is the unique key generated for each entry in the history.
+
+> Older versions, prior to `v1.121.34`, used `state.key` as the default key, but this has been deprecated in favor of `state.__TSR_key`. For now, `location.state.key` will still be available for compatibility, but it will be removed in the next major version.
+
+## Examples
+
+You could sync scrolling to the pathname:
+
+```tsx
+const router = createRouter({
+  getScrollRestorationKey: (location) => location.pathname,
+})
+```
+
+You can conditionally sync only some paths, then use the key for the rest:
+
+```tsx
+const router = createRouter({
+  getScrollRestorationKey: (location) => {
+    const paths = ['/', '/chat']
+    return paths.includes(location.pathname)
+      ? location.pathname
+      : location.state.__TSR_key!
+  },
+})
+```
+
+## Preventing Scroll Restoration
+
+Sometimes you may want to prevent scroll restoration from happening. To do this you can utilize the `resetScroll` option available on the following APIs:
+
+- `<Link resetScroll={false}>`
+- `navigate({ resetScroll: false })`
+- `redirect({ resetScroll: false })`
+
+When `resetScroll` is set to `false`, the scroll position for the next navigation will not be restored (if navigating to an existing history event in the stack) or reset to the top (if it's a new history event in the stack).
+
+## Manual Scroll Restoration
+
+Most of the time, you won't need to do anything special to get scroll restoration to work. However, there are some cases where you may need to manually control scroll restoration. The most common example is **virtualized lists**.
+
+To manually control scroll restoration for virtualized lists within the whole browser window:
+
+```tsx
+function Component() {
+  const scrollEntry = useElementScrollRestoration({
+    getElement: () => window,
+  })
+
+  // Let's use TanStack Virtual to virtualize some content!
+  const virtualizer = useWindowVirtualizer({
+    count: 10000,
+    estimateSize: () => 100,
+    // We pass the scrollY from the scroll restoration entry to the virtualizer
+    // as the initial offset
+    initialOffset: scrollEntry?.scrollY,
+  })
+
+  return (
+    <div>
+      {virtualizer.getVirtualItems().map(item => (
+        ...
+      ))}
+    </div>
+  )
+}
+```
+
+To manually control scroll restoration for a specific element, you can use the `useElementScrollRestoration` hook and the `data-scroll-restoration-id` DOM attribute:
+
+
+
+# React
+
+```tsx
+function Component() {
+  // We need a unique ID for manual scroll restoration on a specific element
+  // It should be as unique as possible for this element across your app
+  const scrollRestorationId = 'myVirtualizedContent'
+
+  // We use that ID to get the scroll entry for this element
+  const scrollEntry = useElementScrollRestoration({
+    id: scrollRestorationId,
+  })
+
+  // Let's use TanStack Virtual to virtualize some content!
+  const virtualizerParentRef = React.useRef<HTMLDivElement>(null)
+  const virtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => virtualizerParentRef.current,
+    estimateSize: () => 100,
+    // We pass the scrollY from the scroll restoration entry to the virtualizer
+    // as the initial offset
+    initialOffset: scrollEntry?.scrollY,
+  })
+
+  return (
+    <div
+      ref={virtualizerParentRef}
+      // We pass the scroll restoration ID to the element
+      // as a custom attribute that will get picked up by the
+      // scroll restoration watcher
+      data-scroll-restoration-id={scrollRestorationId}
+      className="flex-1 border rounded-lg overflow-auto relative"
+    >
+      ...
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx
+function Component() {
+  // We need a unique ID for manual scroll restoration on a specific element
+  // It should be as unique as possible for this element across your app
+  const scrollRestorationId = 'myVirtualizedContent'
+
+  // We use that ID to get the scroll entry for this element
+  const scrollEntry = useElementScrollRestoration({
+    id: scrollRestorationId,
+  })
+
+  // Let's use TanStack Virtual to virtualize some content!
+  let virtualizerParentRef: any
+  const virtualizer = createVirtualizer({
+    count: 10000,
+    getScrollElement: () => virtualizerParentRef,
+    estimateSize: () => 100,
+    // We pass the scrollY from the scroll restoration entry to the virtualizer
+    // as the initial offset
+    initialOffset: scrollEntry?.scrollY,
+  })
+
+  return (
+    <div
+      ref={virtualizerParentRef}
+      // We pass the scroll restoration ID to the element
+      // as a custom attribute that will get picked up by the
+      // scroll restoration watcher
+      data-scroll-restoration-id={scrollRestorationId}
+      class="flex-1 border rounded-lg overflow-auto relative"
+    >
+      ...
+    </div>
+  )
+}
+```
+
+
+
+## Scroll Behavior
+
+To control the scroll behavior when navigating between pages, you can use the `scrollRestorationBehavior` option. This allows you to make the transition between pages instant instead of a smooth scroll. The global configuration of scroll restoration behavior has the same options as those supported by the browser, which are `smooth`, `instant`, and `auto` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#behavior) for more information).
+
+```tsx
+const router = createRouter({
+  scrollRestorationBehavior: 'instant',
+})
+```
diff --git a/mintlify/router/guide/search-params.md b/mintlify/router/guide/search-params.md
new file mode 100644
index 000000000..bdfc4eeb1
--- /dev/null
+++ b/mintlify/router/guide/search-params.md
@@ -0,0 +1,774 @@
+---
+title: Search Params
+---
+
+Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications.
+
+> 🧠 If you are on a really old browser, like IE11, you may need to use a polyfill for `URLSearchParams`.
+
+## Why not just use `URLSearchParams`?
+
+We get it, you've been hearing a lot of "use the platform" lately and for the most part, we agree. However, we also believe it's important to recognize where the platform falls short for more advanced use-cases and we believe `URLSearchParams` is one of these circumstances.
+
+Traditional Search Param APIs usually assume a few things:
+
+- Search params are always strings
+- They are _mostly_ flat
+- Serializing and deserializing using `URLSearchParams` is good enough (Spoiler alert: it's not.)
+- Search params modifications are tightly coupled with the URL's pathname and must be updated together, even if the pathname is not changing.
+
+Reality is very different from these assumptions though.
+
+- Search params represent application state, so inevitably, we will expect them to have the same DX associated with other state managers. This means having the capability of distinguishing between primitive value types and efficiently storing and manipulating complex data structures like nested arrays and objects.
+- There are many ways to serialize and deserialize state with different tradeoffs. You should be able to choose the best one for your application or at the very least get a better default than `URLSearchParams`.
+- Immutability & Structural Sharing. Every time you stringify and parse url search params, referential integrity and object identity is lost because each new parse creates a brand new data structure with a unique memory reference. If not properly managed over its lifetime, this constant serialization and parsing can result in unexpected and undesirable performance issues, especially in frameworks like React that choose to track reactivity via immutability or in Solid that normally relies on reconciliation to detect changes from deserialized data sources.
+- Search params, while an important part of the URL, do frequently change independently of the URL's pathname. For example, a user may want to change the page number of a paginated list without touching the URL's pathname.
+
+## Search Params, the "OG" State Manager
+
+You've probably seen search params like `?page=3` or `?filter-name=tanner` in the URL. There is no question that this is truly **a form of global state** living inside of the URL. It's valuable to store specific pieces of state in the URL because:
+
+- Users should be able to:
+  - Cmd/Ctrl + Click to open a link in a new tab and reliably see the state they expected
+  - Bookmark and share links from your application with others with assurances that they will see exactly the state as when the link was copied.
+  - Refresh your app or navigate back and forth between pages without losing their state
+- Developers should be able to easily:
+  - Add, remove or modify state in the URL with the same great DX as other state managers
+  - Easily validate search params coming from the URL in a format and type that is safe for their application to consume
+  - Read and write to search params without having to worry about the underlying serialization format
+
+## JSON-first Search Params
+
+To achieve the above, the first step built in to TanStack Router is a powerful search param parser that automatically converts the search string of your URL to structured JSON. This means that you can store any JSON-serializable data structure in your search params and it will be parsed and serialized as JSON. This is a huge improvement over `URLSearchParams` which has limited support for array-like structures and nested data.
+
+For example, navigating to the following route:
+
+```tsx
+const link = (
+  <Link
+    to="/shop"
+    search={{
+      pageIndex: 3,
+      includeCategories: ['electronics', 'gifts'],
+      sortBy: 'price',
+      desc: true,
+    }}
+  />
+)
+```
+
+Will result in the following URL:
+
+```
+/shop?pageIndex=3&includeCategories=%5B%22electronics%22%2C%22gifts%22%5D&sortBy=price&desc=true
+```
+
+When this URL is parsed, the search params will be accurately converted back to the following JSON:
+
+```json
+{
+  "pageIndex": 3,
+  "includeCategories": ["electronics", "gifts"],
+  "sortBy": "price",
+  "desc": true
+}
+```
+
+If you noticed, there are a few things going on here:
+
+- The first level of the search params is flat and string based, just like `URLSearchParams`.
+- First level values that are not strings are accurately preserved as actual numbers and booleans.
+- Nested data structures are automatically converted to URL-safe JSON strings
+
+> 🧠 It's common for other tools to assume that search params are always flat and string-based which is why we've chosen to keep things URLSearchParam compliant at the first level. This ultimately means that even though TanStack Router is managing your nested search params as JSON, other tools will still be able to write to the URL and read first-level params normally.
+
+## Validating and Typing Search Params
+
+Despite TanStack Router being able to parse search params into reliable JSON, they ultimately still came from **a user-facing raw-text input**. Similar to other serialization boundaries, this means that before you consume search params, they should be validated into a format that your application can trust and rely on.
+
+### Enter Validation + TypeScript!
+
+TanStack Router provides convenient APIs for validating and typing search params. This all starts with the `Route`'s `validateSearch` option:
+
+```tsx title="src/routes/shop/products.tsx"
+type ProductSearchSortOptions = 'newest' | 'oldest' | 'price'
+
+type ProductSearch = {
+  page: number
+  filter: string
+  sort: ProductSearchSortOptions
+}
+
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: (search: Record<string, unknown>): ProductSearch => {
+    // validate and parse the search params into a typed state
+    return {
+      page: Number(search?.page ?? 1),
+      filter: (search.filter as string) || '',
+      sort: (search.sort as ProductSearchSortOptions) || 'newest',
+    }
+  },
+})
+```
+
+In the above example, we're validating the search params of the `Route` and returning a typed `ProductSearch` object. This typed object is then made available to this route's other options **and any child routes, too!**
+
+### Validating Search Params
+
+The `validateSearch` option is a function that is provided the JSON parsed (but non-validated) search params as a `Record<string, unknown>` and returns a typed object of your choice. It's usually best to provide sensible fallbacks for malformed or unexpected search params so your users' experience stays non-interrupted.
+
+Here's an example:
+
+```tsx title="src/routes/shop/products.tsx"
+type ProductSearchSortOptions = 'newest' | 'oldest' | 'price'
+
+type ProductSearch = {
+  page: number
+  filter: string
+  sort: ProductSearchSortOptions
+}
+
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: (search: Record<string, unknown>): ProductSearch => {
+    // validate and parse the search params into a typed state
+    return {
+      page: Number(search?.page ?? 1),
+      filter: (search.filter as string) || '',
+      sort: (search.sort as ProductSearchSortOptions) || 'newest',
+    }
+  },
+})
+```
+
+Here's an example using the [Zod](https://zod.dev/) library (but feel free to use any validation library you want) to both validate and type the search params in a single step:
+
+```tsx title="src/routes/shop/products.tsx"
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().catch(1),
+  filter: z.string().catch(''),
+  sort: z.enum(['newest', 'oldest', 'price']).catch('newest'),
+})
+
+type ProductSearch = z.infer<typeof productSearchSchema>
+
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: (search) => productSearchSchema.parse(search),
+})
+```
+
+Because `validateSearch` also accepts an object with the `parse` property, this can be shortened to:
+
+```tsx
+validateSearch: productSearchSchema
+```
+
+In the above example, we used Zod's `.catch()` modifier instead of `.default()` to avoid showing an error to the user because we firmly believe that if a search parameter is malformed, you probably don't want to halt the user's experience through the app to show a big fat error message. That said, there may be times that you **do want to show an error message**. In that case, you can use `.default()` instead of `.catch()`.
+
+The underlying mechanics why this works relies on the `validateSearch` function throwing an error. If an error is thrown, the route's `onError` option will be triggered (and `error.routerCode` will be set to `VALIDATE_SEARCH` and the `errorComponent` will be rendered instead of the route's `component` where you can handle the search param error however you'd like.
+
+#### Adapters
+
+When using a library like [Zod](https://zod.dev/) to validate search params you might want to `transform` search params before committing the search params to the URL. A common `zod` `transform` is `default` for example.
+
+```tsx
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  filter: z.string().default(''),
+  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: productSearchSchema,
+})
+```
+
+It might be surprising that when you try to navigate to this route, `search` is required. The following `Link` will type error as `search` is missing.
+
+```tsx
+<Link to="/shop/products" />
+```
+
+For validation libraries we recommend using adapters which infer the correct `input` and `output` types.
+
+### Zod
+
+An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct `input` type and `output` type.
+
+For Zod v3:
+
+```tsx
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  filter: z.string().default(''),
+  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: zodValidator(productSearchSchema),
+})
+```
+
+With Zod v4, you should directly use the schema in `validateSearch`:
+
+```tsx
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  filter: z.string().default(''),
+  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  // With Zod v4, we can use the schema without the adapter
+  validateSearch: productSearchSchema,
+})
+```
+
+The important part here is the following use of `Link` no longer requires `search` params:
+
+```tsx
+<Link to="/shop/products" />
+```
+
+In Zod v3, the use of `catch` here overrides the types and makes `page`, `filter` and `sort` `unknown` causing type loss. We have handled this case by providing a `fallback` generic function which retains the types but provides a `fallback` value when validation fails:
+
+```tsx
+import { fallback, zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: fallback(z.number(), 1).default(1),
+  filter: fallback(z.string(), '').default(''),
+  sort: fallback(z.enum(['newest', 'oldest', 'price']), 'newest').default(
+    'newest',
+  ),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: zodValidator(productSearchSchema),
+})
+```
+
+Therefore when navigating to this route, `search` is optional and retains the correct types.
+
+In Zod v4, schemas may use `catch` instead of the fallback and will retain type inference throughout.
+
+While not recommended, it is also possible to configure `input` and `output` type in case the `output` type is more accurate than the `input` type:
+
+```tsx
+const productSearchSchema = z.object({
+  page: fallback(z.number(), 1).default(1),
+  filter: fallback(z.string(), '').default(''),
+  sort: fallback(z.enum(['newest', 'oldest', 'price']), 'newest').default(
+    'newest',
+  ),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: zodValidator({
+    schema: productSearchSchema,
+    input: 'output',
+    output: 'input',
+  }),
+})
+```
+
+This provides flexibility in which type you want to infer for navigation and which types you want to infer for reading search params.
+
+### Valibot
+
+> [!WARNING]
+> Router expects the valibot 1.0 package to be installed.
+
+When using [Valibot](https://valibot.dev/) an adapter is not needed to ensure the correct `input` and `output` types are used for navigation and reading search params. This is because `valibot` implements [Standard Schema](https://github.com/standard-schema/standard-schema)
+
+```tsx
+import * as v from 'valibot'
+
+const productSearchSchema = v.object({
+  page: v.optional(v.fallback(v.number(), 1), 1),
+  filter: v.optional(v.fallback(v.string(), ''), ''),
+  sort: v.optional(
+    v.fallback(v.picklist(['newest', 'oldest', 'price']), 'newest'),
+    'newest',
+  ),
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: productSearchSchema,
+})
+```
+
+### Arktype
+
+> [!WARNING]
+> Router expects the arktype 2.0-rc package to be installed.
+
+When using [ArkType](https://arktype.io/) an adapter is not needed to ensure the correct `input` and `output` types are used for navigation and reading search params. This is because [ArkType](https://arktype.io/) implements [Standard Schema](https://github.com/standard-schema/standard-schema)
+
+```tsx
+import { type } from 'arktype'
+
+const productSearchSchema = type({
+  page: 'number = 1',
+  filter: 'string = ""',
+  sort: '"newest" | "oldest" | "price" = "newest"',
+})
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: productSearchSchema,
+})
+```
+
+### Effect/Schema
+
+When using [Effect/Schema](https://effect.website/docs/schema/introduction/) an adapter is not needed to ensure the correct `input` and `output` types are used for navigation and reading search params. This is because [Effect/Schema](https://effect.website/docs/schema/standard-schema/) implements [Standard Schema](https://github.com/standard-schema/standard-schema)
+
+```tsx
+import { Schema as S } from 'effect'
+
+const productSearchSchema = S.standardSchemaV1(
+  S.Struct({
+    page: S.NumberFromString.pipe(
+      S.optional,
+      S.withDefaults({
+        constructor: () => 1,
+        decoding: () => 1,
+      }),
+    ),
+    filter: S.String.pipe(
+      S.optional,
+      S.withDefaults({
+        constructor: () => '',
+        decoding: () => '',
+      }),
+    ),
+    sort: S.Literal('newest', 'oldest', 'price').pipe(
+      S.optional,
+      S.withDefaults({
+        constructor: () => 'newest' as const,
+        decoding: () => 'newest' as const,
+      }),
+    ),
+  }),
+)
+
+export const Route = createFileRoute('/shop/products/')({
+  validateSearch: productSearchSchema,
+})
+```
+
+## Reading Search Params
+
+Once your search params have been validated and typed, you're finally ready to start reading and writing to them. There are a few ways to do this in TanStack Router, so let's check them out.
+
+### Using Search Params in Loaders
+
+Please read the [Search Params in Loaders](/router/guide/data-loading#using-loaderdeps-to-access-search-params) section for more information about how to read search params in loaders with the `loaderDeps` option.
+
+### Search Params are inherited from Parent Routes
+
+The search parameters and types of parents are merged as you go down the route tree, so child routes also have access to their parent's search params:
+
+
+
+```tsx title="src/routes/shop/products.tsx"
+const productSearchSchema = z.object({
+  page: z.number().catch(1),
+  filter: z.string().catch(''),
+  sort: z.enum(['newest', 'oldest', 'price']).catch('newest'),
+})
+
+type ProductSearch = z.infer<typeof productSearchSchema>
+
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: productSearchSchema,
+})
+```
+
+```tsx title="src/routes/shop/products/$productId.tsx"
+export const Route = createFileRoute('/shop/products/$productId')({
+  beforeLoad: ({ search }) => {
+    search
+    // ^? ProductSearch ✅
+  },
+})
+```
+
+
+
+### Search Params in Components
+
+You can access your route's validated search params in your route's `component` via the `useSearch` hook.
+
+```tsx title="src/routes/shop/products.tsx"
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: productSearchSchema,
+})
+
+const ProductList = () => {
+  const { page, filter, sort } = Route.useSearch()
+
+  return <div>...</div>
+}
+```
+
+> [!TIP]
+> If your component is code-split, you can use the [getRouteApi function](/router/guide/code-splitting#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useSearch()` hook.
+
+### Search Params outside of Route Components
+
+You can access your route's validated search params anywhere in your app using the `useSearch` hook. By passing the `from` id/path of your origin route, you'll get even better type safety:
+
+```tsx
+// src/routes/shop.products.tsx
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: productSearchSchema,
+  // ...
+})
+
+// Somewhere else...
+
+// src/components/product-list-sidebar.tsx
+const routeApi = getRouteApi('/shop/products')
+
+const ProductList = () => {
+  const routeSearch = routeApi.useSearch()
+
+  // OR
+
+  const { page, filter, sort } = useSearch({
+    from: Route.fullPath,
+  })
+
+  return <div>...</div>
+}
+```
+
+Or, you can loosen up the type-safety and get an optional `search` object by passing `strict: false`:
+
+```tsx
+function ProductList() {
+  const search = useSearch({
+    strict: false,
+  })
+  // {
+  //   page: number | undefined
+  //   filter: string | undefined
+  //   sort: 'newest' | 'oldest' | 'price' | undefined
+  // }
+
+  return <div>...</div>
+}
+```
+
+## Writing Search Params
+
+Now that you've learned how to read your route's search params, you'll be happy to know that you've already seen the primary APIs to modify and update them. Let's remind ourselves a bit
+
+### `<Link search />`
+
+The best way to update search params is to use the `search` prop on the `<Link />` component.
+
+If the search for the current page shall be updated and the `from` prop is specified, the `to` prop can be omitted.
+Here's an example:
+
+```tsx title="src/routes/shop/products.tsx"
+export const Route = createFileRoute('/shop/products')({
+  validateSearch: productSearchSchema,
+})
+
+const ProductList = () => {
+  return (
+    <div>
+      <Link from={Route.fullPath} search={(prev) => ({ page: prev.page + 1 })}>
+        Next Page
+      </Link>
+    </div>
+  )
+}
+```
+
+If you want to update the search params in a generic component that is rendered on multiple routes, specifying `from` can be challenging.
+
+In this scenario you can set `to="."` which will give you access to loosely typed search params.
+Here is an example that illustrates this:
+
+```tsx
+// `page` is a search param that is defined in the __root route and hence available on all routes.
+const PageSelector = () => {
+  return (
+    <div>
+      <Link to="." search={(prev) => ({ ...prev, page: prev.page + 1 })}>
+        Next Page
+      </Link>
+    </div>
+  )
+}
+```
+
+If the generic component is only rendered in a specific subtree of the route tree, you can specify that subtree using `from`. Here you can omit `to='.'` if you want.
+
+```tsx
+// `page` is a search param that is defined in the /posts route and hence available on all of its child routes.
+const PageSelector = () => {
+  return (
+    <div>
+      <Link
+        from="/posts"
+        to="."
+        search={(prev) => ({ ...prev, page: prev.page + 1 })}
+      >
+        Next Page
+      </Link>
+    </div>
+  )
+```
+
+### `useNavigate(), navigate({ search })`
+
+The `navigate` function also accepts a `search` option that works the same way as the `search` prop on `<Link />`:
+
+```tsx title="src/routes/shop/products.tsx"
+export const Route = createFileRoute('/shop/products/$productId')({
+  validateSearch: productSearchSchema,
+})
+
+const ProductList = () => {
+  const navigate = useNavigate({ from: Route.fullPath })
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          navigate({
+            search: (prev) => ({ page: prev.page + 1 }),
+          })
+        }}
+      >
+        Next Page
+      </button>
+    </div>
+  )
+}
+```
+
+### `router.navigate({ search })`
+
+The `router.navigate` function works exactly the same way as the `useNavigate`/`navigate` hook/function above.
+
+### `<Navigate search />`
+
+The `<Navigate search />` component works exactly the same way as the `useNavigate`/`navigate` hook/function above, but accepts its options as props instead of a function argument.
+
+## Transforming search with search middlewares
+
+When link hrefs are built, by default the only thing that matters for the query string part is the `search` property of a `<Link>`.
+
+TanStack Router provides a way to manipulate search params before the href is generated via **search middlewares**.
+Search middlewares are functions that transform the search parameters when generating new links for a route or its descendants.
+They are also executed upon navigation after search validation to allow manipulation of the query string.
+
+The following example shows how to make sure that for **every** link that is being built, the `rootValue` search param is added _if_ it is part of the current search params. If a link specifies `rootValue` inside `search`, then that value is used for building the link.
+
+```tsx
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const searchSchema = z.object({
+  rootValue: z.string().optional(),
+})
+
+export const Route = createRootRoute({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    middlewares: [
+      ({ search, next }) => {
+        const result = next(search)
+        return {
+          rootValue: search.rootValue,
+          ...result,
+        }
+      },
+    ],
+  },
+})
+```
+
+Since this specific use case is quite common, TanStack Router provides a generic implementation to retain search params via `retainSearchParams`:
+
+
+
+# React
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, retainSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const searchSchema = z.object({
+  rootValue: z.string().optional(),
+})
+
+export const Route = createRootRoute({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    middlewares: [retainSearchParams(['rootValue'])],
+  },
+})
+```
+
+# Solid
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, retainSearchParams } from '@tanstack/solid-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const searchSchema = z.object({
+  rootValue: z.string().optional(),
+})
+
+export const Route = createRootRoute({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    middlewares: [retainSearchParams(['rootValue'])],
+  },
+})
+```
+
+
+
+Another common use case is to strip out search params from links if their default value is set. TanStack Router provides a generic implementation for this use case via `stripSearchParams`:
+
+
+
+# React
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = {
+  one: 'abc',
+  two: 'xyz',
+}
+
+const searchSchema = z.object({
+  one: z.string().default(defaultValues.one),
+  two: z.string().default(defaultValues.two),
+})
+
+export const Route = createFileRoute('/hello')({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    // strip default values
+    middlewares: [stripSearchParams(defaultValues)],
+  },
+})
+```
+
+# Solid
+
+```tsx
+import { z } from 'zod'
+import { createFileRoute, stripSearchParams } from '@tanstack/solid-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = {
+  one: 'abc',
+  two: 'xyz',
+}
+
+const searchSchema = z.object({
+  one: z.string().default(defaultValues.one),
+  two: z.string().default(defaultValues.two),
+})
+
+export const Route = createFileRoute('/hello')({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    // strip default values
+    middlewares: [stripSearchParams(defaultValues)],
+  },
+})
+```
+
+
+
+Multiple middlewares can be chained. The following example shows how to combine both `retainSearchParams` and `stripSearchParams`.
+
+
+
+# React
+
+```tsx
+import {
+  Link,
+  createFileRoute,
+  retainSearchParams,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = ['foo', 'bar']
+
+export const Route = createFileRoute('/search')({
+  validateSearch: zodValidator(
+    z.object({
+      retainMe: z.string().optional(),
+      arrayWithDefaults: z.string().array().default(defaultValues),
+      required: z.string(),
+    }),
+  ),
+  search: {
+    middlewares: [
+      retainSearchParams(['retainMe']),
+      stripSearchParams({ arrayWithDefaults: defaultValues }),
+    ],
+  },
+})
+```
+
+# Solid
+
+```tsx
+import {
+  Link,
+  createFileRoute,
+  retainSearchParams,
+  stripSearchParams,
+} from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = ['foo', 'bar']
+
+export const Route = createFileRoute('/search')({
+  validateSearch: zodValidator(
+    z.object({
+      retainMe: z.string().optional(),
+      arrayWithDefaults: z.string().array().default(defaultValues),
+      required: z.string(),
+    }),
+  ),
+  search: {
+    middlewares: [
+      retainSearchParams(['retainMe']),
+      stripSearchParams({ arrayWithDefaults: defaultValues }),
+    ],
+  },
+})
+```
+
+
diff --git a/mintlify/router/guide/ssr.md b/mintlify/router/guide/ssr.md
new file mode 100644
index 000000000..b3a01119d
--- /dev/null
+++ b/mintlify/router/guide/ssr.md
@@ -0,0 +1,370 @@
+---
+id: ssr
+title: SSR
+---
+
+> [!WARNING]
+> While every effort has been made to separate these APIs from changes to Tanstack Start, there are underlying shared implementations internally. Therefore these can be subject to change and should be regarded as experimental until Start reaches stable status.
+
+Server Side Rendering (SSR) is the process of rendering a component on the server and sending the HTML markup to the client. The client then hydrates the markup into a fully interactive component.
+
+> **TanStack Router is not Next.js, Remix, or React Router DOM.** When generating routes or components, do **not** use `src/pages/`, `app/layout.tsx`, `_app/index.tsx`, `getServerSideProps`, `getStaticProps`, Remix-style `loader`/`action` exports, or imports from `react-router-dom` or `next/`. TanStack uses `src/routes/` with `createFileRoute`, `Link`/`useNavigate`/`redirect` from `@tanstack/react-router`, and (for Start) `createServerFn` from `@tanstack/<framework>-start`. Wrong-framework code typically fails to build or produces conflicting `/` routes at runtime.
+
+There are usually two different flavors of SSR to be considered:
+
+- Non-streaming SSR
+  - The entire page is rendered on the server and sent to the client in one single HTML request, including the serialized data the application needs to hydrate on the client.
+- Streaming SSR
+  - The critical first paint of the page is rendered on the server and sent to the client in one single HTML request, including the serialized data the application needs to hydrate on the client
+  - The rest of the page is then streamed to the client as it is rendered on the server.
+
+This guide will explain how to implement both flavors of SSR with TanStack Router!
+
+## Non-Streaming SSR
+
+Non-Streaming server-side rendering is the classic process of rendering the markup for your entire application page on the server and sending the completed HTML markup (and data) to the client. The client then hydrates the markup into a fully interactive application again.
+
+To implement non-streaming SSR with TanStack Router, you will need the following utilities:
+
+
+
+# React
+
+- `RouterClient` from `@tanstack/react-router`
+  - e.g. `<RouterClient router={router} />`
+  - Rendering this component in your client entry will render your application and also automatically implement the `Wrap` component option on `Router`
+- And, either:
+  - `defaultRenderHandler` from `@tanstack/react-router`
+    - This will render your application in your server entry and also automatically handle application-level hydration/dehydration and also automatically implement the RouterServer component.
+      or:
+  - `renderRouterToString` from `@tanstack/react-router`
+    - This differs from defaultRenderHandler in that it allows you to manually specify the `Wrap` component option on `Router` together with any other providers you may need to wrap it with.
+  - `RouterServer` from `@tanstack/react-router`
+    - This implements the `Wrap` component option on `Router`
+
+# Solid
+
+- `RouterClient` from `@tanstack/solid-router`
+  - e.g. `<RouterClient router={router} />`
+  - Rendering this component in your client entry will render your application and also automatically implement the `Wrap` component option on `Router`
+- And, either:
+  - `defaultRenderHandler` from `@tanstack/solid-router`
+    - This will render your application in your server entry and also automatically handle application-level hydration/dehydration and also automatically implement the RouterServer component.
+      or:
+  - `renderRouterToString` from `@tanstack/solid-router`
+    - This differs from defaultRenderHandler in that it allows you to manually specify the `Wrap` component option on `Router` together with any other providers you may need to wrap it with.
+  - `RouterServer` from `@tanstack/solid-router`
+    - This implements the `Wrap` component option on `Router`
+
+
+
+### Automatic Server History
+
+On the client, Router defaults to using an instance of `createBrowserHistory`, which is the preferred type of history to use on the client. On the server, however, you will want to use an instance of `createMemoryHistory` instead. This is because `createBrowserHistory` uses the `window` object, which does not exist on the server. This is handled automatically for you in the RouterServer component.
+
+### Automatic Loader Dehydration/Hydration
+
+Resolved loader data fetched by routes is automatically dehydrated and rehydrated by TanStack Router so long as you complete the standard SSR steps outlined in this guide.
+
+⚠️ If you are using deferred data streaming, you will also need to ensure that you have implemented the [SSR Streaming & Stream Transform](#streaming-ssr) pattern near the end of this guide.
+
+For more information on how to utilize data loading, see the [Data Loading](/router/guide/data-loading) guide.
+
+### Router Creation
+
+Since your router will exist both on the server and the client, it's important that you create your router in a way that is consistent between both of these environments. The easiest way to do this is to expose a `createRouter` function in a shared file that can be imported and called by both your server and client entry files.
+
+
+
+# React
+
+```tsx title='src/router.tsx'
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  return createTanstackRouter({ routeTree })
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+```
+
+# Solid
+
+```tsx title='src/router.tsx'
+import { createRouter as createTanstackRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  return createTanstackRouter({ routeTree })
+}
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+```
+
+
+
+### Rendering the Application on the Server
+
+Now that you have a router instance that has loaded all the critical data for the current URL, you can render your application on the server:
+
+using `defaultRenderHandler`
+
+
+
+# React
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultRenderHandler,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultRenderHandler)
+}
+```
+
+# Solid
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultRenderHandler,
+} from '@tanstack/solid-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultRenderHandler)
+}
+```
+
+
+
+using `renderRouterToString`
+
+
+
+# React
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  renderRouterToString,
+  RouterServer,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToString({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  renderRouterToString,
+  RouterServer,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToString({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+}
+```
+
+
+
+NOTE: The createRequestHandler method requires a web api standard Request object, while the handler method will return a web api standard Response promise.
+
+Should you be using a server framework like Express that uses its own Request and Response objects you would need to convert from the one to the other. Please have a look at the examples for how such an implementation might look like.
+
+## Rendering the Application on the Client
+
+On the client, things are much simpler.
+
+- Create your router instance
+- Render your application using the `<RouterClient />` component
+
+
+
+# React
+
+```tsx title="src/entry-client.tsx"
+import { hydrateRoot } from 'react-dom/client'
+import { RouterClient } from '@tanstack/react-router/ssr/client'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document, <RouterClient router={router} />)
+```
+
+# Solid
+
+```tsx title="src/entry-client.tsx"
+import { hydrate } from 'solid-js/web'
+import { RouterClient } from '@tanstack/solid-router/ssr/client'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrate(() => <RouterClient router={router} />, document.body)
+```
+
+
+
+With this setup, your application will be rendered on the server and then hydrated on the client!
+
+## Streaming SSR
+
+Streaming SSR is the most modern flavor of SSR and is the process of continuously and incrementally sending HTML markup to the client as it is rendered on the server. This is slightly different from traditional SSR in concept because beyond being able to dehydrate and rehydrate a critical first paint, markup and data with lower priority or slower response times can be streamed to the client after the initial render, but in the same request.
+
+This pattern can be useful for pages that have slow or high-latency data fetching requirements. For example, if you have a page that needs to fetch data from a third-party API, you can stream the critical initial markup and data to the client and then stream the less-critical third-party data to the client as it is resolved.
+
+> [!NOTE]
+> This streaming pattern is all automatic as long as you are using either `defaultStreamHandler` or `renderRouterToStream`.
+
+using `defaultStreamHandler`
+
+
+
+# React
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultStreamHandler)
+}
+```
+
+# Solid
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultStreamHandler,
+} from '@tanstack/solid-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultStreamHandler)
+}
+```
+
+
+
+using `renderRouterToStream`
+
+
+
+# React
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  renderRouterToStream,
+  RouterServer,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToStream({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  renderRouterToStream,
+  RouterServer,
+} from '@tanstack/solid-router/ssr/server'
+import { createRouter } from './router'
+
+export function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToStream({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+}
+```
+
+
+
+## Streaming Dehydration/Hydration
+
+Streaming dehydration/hydration is an advanced pattern that goes beyond markup and allows you to dehydrate and stream any supporting data from the server to the client and rehydrate it on arrival. This is useful for applications that may need to further use/manage the underlying data that was used to render the initial markup on the server.
+
+## Data Serialization
+
+When using SSR, data passed between the server and the client must be serialized before it is sent across network-boundaries. TanStack Router handles this serialization using a very lightweight serializer that supports common data types beyond JSON.stringify/JSON.parse.
+
+Out of the box, the following types are supported:
+
+- `undefined`
+- `Date`
+- `Error`
+- `FormData`
+
+If you feel that there are other types that should be supported by default, please open an issue on the TanStack Router repository.
+
+If you are using more complex data types like `Map`, `Set`, `BigInt`, etc, you may need to use a custom serializer to ensure that your type-definitions are accurate and your data is correctly serialized and deserialized. We are currently working on both a more robust serializer and a way to customize the serializer for your application. Open an issue if you are interested in helping out!
diff --git a/mintlify/router/guide/static-route-data.md b/mintlify/router/guide/static-route-data.md
new file mode 100644
index 000000000..63f3bdc14
--- /dev/null
+++ b/mintlify/router/guide/static-route-data.md
@@ -0,0 +1,286 @@
+---
+title: Static Route Data
+---
+
+When creating routes, you can optionally specify a `staticData` property in the route's options. This object can literally contain anything you want as long as it's synchronously available when you create your route.
+
+In addition to being able to access this data from the route itself, you can also access it from any match under the `match.staticData` property.
+
+## Example
+
+
+
+# React
+
+
+
+```tsx title='src/routes/posts.tsx'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  staticData: {
+    customData: 'Hello!',
+  },
+})
+```
+
+
+
+You can then access this data anywhere you have access to your routes, including matches that can be mapped back to their routes.
+
+
+
+```tsx title='src/routes/__root.tsx'
+import { createRootRoute } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => {
+    const matches = useMatches()
+
+    return (
+      <div>
+        {matches.map((match) => {
+          return <div key={match.id}>{match.staticData.customData}</div>
+        })}
+      </div>
+    )
+  },
+})
+```
+
+
+
+# Solid
+
+
+
+```tsx title='src/routes/posts.tsx'
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  staticData: {
+    customData: 'Hello!',
+  },
+})
+```
+
+
+
+You can then access this data anywhere you have access to your routes, including matches that can be mapped back to their routes.
+
+
+
+```tsx title='src/routes/__root.tsx'
+import { createRootRoute, useMatches } from '@tanstack/solid-router'
+import { For } from 'solid-js'
+
+export const Route = createRootRoute({
+  component: () => {
+    const matches = useMatches()
+
+    return (
+      <div>
+        <For each={matches()}>
+          {(match) => <div>{match.staticData.customData}</div>}
+        </For>
+      </div>
+    )
+  },
+})
+```
+
+
+
+
+
+## Enforcing Static Data
+
+If you want to enforce that a route has static data, you can use declaration merging to add a type to the route's static option:
+
+
+
+# React
+
+```tsx
+declare module '@tanstack/react-router' {
+  interface StaticDataRouteOption {
+    customData: string
+  }
+}
+```
+
+# Solid
+
+```tsx
+declare module '@tanstack/solid-router' {
+  interface StaticDataRouteOption {
+    customData: string
+  }
+}
+```
+
+
+
+Now, if you try to create a route without the `customData` property, you'll get a type error:
+
+```tsx
+export const Route = createFileRoute('/posts')({
+  staticData: {
+    // Property 'customData' is missing in type '{ customData: number; }' but required in type 'StaticDataRouteOption'.ts(2741)
+  },
+})
+```
+
+## Optional Static Data
+
+If you want to make static data optional, simply add a `?` to the property:
+
+
+
+# React
+
+```tsx
+declare module '@tanstack/react-router' {
+  interface StaticDataRouteOption {
+    customData?: string
+  }
+}
+```
+
+# Solid
+
+```tsx
+declare module '@tanstack/solid-router' {
+  interface StaticDataRouteOption {
+    customData?: string
+  }
+}
+```
+
+
+
+As long as there are any required properties on the `StaticDataRouteOption`, you'll be required to pass in an object.
+
+## Common Patterns
+
+### Controlling Layout Visibility
+
+Use staticData to control which routes show or hide layout elements:
+
+
+
+```tsx title='src/routes/admin/route.tsx'
+export const Route = createFileRoute('/admin')({
+  staticData: { showNavbar: false },
+  component: AdminLayout,
+})
+```
+
+
+
+
+
+```tsx
+// routes/__root.tsx
+function RootComponent() {
+  const showNavbar = useMatches({
+    select: (matches) =>
+      !matches.some((m) => m.staticData?.showNavbar === false),
+  })
+
+  return showNavbar ? (
+    <Navbar>
+      <Outlet />
+    </Navbar>
+  ) : (
+    <Outlet />
+  )
+}
+```
+
+
+
+### Route Titles for Breadcrumbs
+
+
+
+# React
+
+
+
+```tsx title='src/routes/posts/$postId.tsx'
+export const Route = createFileRoute('/posts/$postId')({
+  staticData: {
+    getTitle: () => 'Post Details',
+  },
+})
+```
+
+
+
+
+
+```tsx title='src/components/Breadcrumbs.tsx'
+function Breadcrumbs() {
+  const matches = useMatches()
+
+  return (
+    <nav>
+      {matches
+        .filter((m) => m.staticData?.getTitle)
+        .map((m) => (
+          <span key={m.id}>{m.staticData.getTitle()}</span>
+        ))}
+    </nav>
+  )
+}
+```
+
+
+
+# Solid
+
+
+
+```tsx title='src/routes/posts/$postId.tsx'
+export const Route = createFileRoute('/posts/$postId')({
+  staticData: {
+    getTitle: () => 'Post Details',
+  },
+})
+```
+
+
+
+
+
+```tsx title='src/components/Breadcrumbs.tsx'
+import { useMatches } from '@tanstack/solid-router'
+import { For } from 'solid-js'
+
+function Breadcrumbs() {
+  const matches = useMatches()
+
+  return (
+    <nav>
+      <For each={matches().filter((m) => m.staticData?.getTitle)}>
+        {(m) => <span>{m.staticData.getTitle()}</span>}
+      </For>
+    </nav>
+  )
+}
+```
+
+
+
+
+
+### When to Use staticData vs Context
+
+| staticData                             | context                         |
+| -------------------------------------- | ------------------------------- |
+| Synchronous, defined at route creation | Can be async (via `beforeLoad`) |
+| Available before loading starts        | Can depend on params/search     |
+| Same for all instances of a route      | Passed down to child routes     |
+
+Use staticData for static route metadata. Use context for dynamic data or auth state that varies per request.
diff --git a/mintlify/router/guide/tanstack-start.md b/mintlify/router/guide/tanstack-start.md
new file mode 100644
index 000000000..cbfa66772
--- /dev/null
+++ b/mintlify/router/guide/tanstack-start.md
@@ -0,0 +1,8 @@
+---
+title: "TanStack Start"
+description: "Compatibility target retained for an upstream cross-product link."
+---
+
+This compatibility page preserves a cross-product link used by the upstream documentation.
+
+[Continue to TanStack Start](/start)
diff --git a/mintlify/router/guide/type-safety.md b/mintlify/router/guide/type-safety.md
new file mode 100644
index 000000000..8ceb8ddef
--- /dev/null
+++ b/mintlify/router/guide/type-safety.md
@@ -0,0 +1,307 @@
+---
+title: Type Safety
+---
+
+TanStack Router is built to be as type-safe as possible within the limits of the TypeScript compiler and runtime. This means that it's not only written in TypeScript, but that it also **fully infers the types it's provided and tenaciously pipes them through the entire routing experience**.
+
+Ultimately, this means that you write **less types as a developer** and have **more confidence in your code** as it evolves.
+
+## Route Definitions
+
+### File-based Routing
+
+Routes are hierarchical, and so are their definitions. If you're using file-based routing, much of the type-safety is already taken care of for you.
+
+### Code-based Routing
+
+If you're using the `Route` class directly, you'll need to be aware of how to ensure your routes are typed properly using the `Route`'s `getParentRoute` option. This is because child routes need to be aware of **all** of their parent routes types. Without this, those precious search params you parsed out of your _layout_ and _pathless layout_ routes, 3 levels up, would be lost to the JS void.
+
+So, don't forget to pass the parent route to your child routes!
+
+```tsx
+const parentRoute = createRoute({
+  getParentRoute: () => parentRoute,
+})
+```
+
+## Exported Hooks, Components, and Utilities
+
+For the types of your router to work with top-level exports like `Link`, `useNavigate`, `useParams`, etc. they must permeate the TypeScript module boundary and be registered right into the library. To do this, we use declaration merging on the exported `Register` interface.
+
+
+
+# React
+
+```ts
+const router = createRouter({
+  // ...
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
+
+# Solid
+
+```ts
+const router = createRouter({
+  // ...
+})
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
+
+
+
+By registering your router with the module, you can now use the exported hooks, components, and utilities with your router's exact types.
+
+## Fixing the Component Context Problem
+
+Component context is a wonderful tool in React and other frameworks for providing dependencies to components. However, if that context is changing types as it moves throughout your component hierarchy, it becomes impossible for TypeScript to know how to infer those changes. To get around this, context-based hooks and components require that you give them a hint on how and where they are being used.
+
+```tsx
+export const Route = createFileRoute('/posts')({
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  // Each route has type-safe versions of most of the built-in hooks from TanStack Router
+  const params = Route.useParams()
+  const search = Route.useSearch()
+
+  // Some hooks require context from the *entire* router, not just the current route. To achieve type-safety here,
+  // we must pass the `from` param to tell the hook our relative position in the route hierarchy.
+  const navigate = useNavigate({ from: Route.fullPath })
+  // ... etc
+}
+```
+
+Every hook and component that requires a context hint will have a `from` param where you can pass the ID or path of the route you are rendering within.
+
+> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](/router/guide/code-splitting#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to pass in the `Route.fullPath` to get access to the typed `useParams()` and `useSearch()` hooks.
+
+### What if I don't know the route? What if it's a shared component?
+
+The `from` property is optional, which means if you don't pass it, you'll get the router's best guess on what types will be available. Usually, that means you'll get a union of all of the types of all of the routes in the router.
+
+### What if I pass the wrong `from` path?
+
+It's technically possible to pass a `from` that satisfies TypeScript, but may not match the actual route you are rendering within at runtime. In this case, each hook and component that supports `from` will detect if your expectations don't match the actual route you are rendering within, and will throw a runtime error.
+
+### What if I don't know the route, or it's a shared component, and I can't pass `from`?
+
+If you are rendering a component that is shared across multiple routes, or you are rendering a component that is not within a route, you can pass `strict: false` instead of a `from` option. This will not only silence the runtime error, but will also give you relaxed, but accurate types for the potential hook you are calling. A good example of this is calling `useSearch` from a shared component:
+
+```tsx
+function MyComponent() {
+  const search = useSearch({ strict: false })
+}
+```
+
+In this case, the `search` variable will be typed as a union of all possible search params from all routes in the router.
+
+## Router Context
+
+Router context is so extremely useful as it's the ultimate hierarchical dependency injection. You can supply context to the router and to each and every route it renders. As you build up this context, TanStack Router will merge it down with the hierarchy of routes, so that each route has access to the context of all of its parents.
+
+The `createRootRouteWithContext` factory creates a new router with the instantiated type, which then creates a requirement for you to fulfill the same type contract to your router, and will also ensure that your context is properly typed throughout the entire route tree.
+
+```tsx
+const rootRoute = createRootRouteWithContext<{ whateverYouWant: true }>()({
+  component: App,
+})
+
+const routeTree = rootRoute.addChildren([
+  // ... all child routes will have access to `whateverYouWant` in their context
+])
+
+const router = createRouter({
+  routeTree,
+  context: {
+    // This will be required to be passed now
+    whateverYouWant: true,
+  },
+})
+```
+
+## Performance Recommendations
+
+As your application scales, TypeScript check times will naturally increase. There are a few things to keep in mind when your application scales to keep your TS check times down.
+
+### Only infer types you need
+
+A great pattern with client side data caches (TanStack Query, etc.) is to prefetch data. For example with TanStack Query you might have a route which calls `queryClient.ensureQueryData` in a `loader`.
+
+```tsx
+export const Route = createFileRoute('/posts/$postId/deep')({
+  loader: ({ context: { queryClient }, params: { postId } }) =>
+    queryClient.ensureQueryData(postQueryOptions(postId)),
+  component: PostDeepComponent,
+})
+
+function PostDeepComponent() {
+  const params = Route.useParams()
+  const data = useSuspenseQuery(postQueryOptions(params.postId))
+
+  return <></>
+}
+```
+
+This may look fine and for small route trees and you may not notice any TS performance issues. However in this case TS has to infer the loader's return type, despite it never being used in your route. If the loader data is a complex type with many routes that prefetch in this manner, it can slow down editor performance. In this case, the change is quite simple and let typescript infer Promise&lt;void&gt;.
+
+```tsx
+export const Route = createFileRoute('/posts/$postId/deep')({
+  loader: async ({ context: { queryClient }, params: { postId } }) => {
+    await queryClient.ensureQueryData(postQueryOptions(postId))
+  },
+  component: PostDeepComponent,
+})
+
+function PostDeepComponent() {
+  const params = Route.useParams()
+  const data = useSuspenseQuery(postQueryOptions(params.postId))
+
+  return <></>
+}
+```
+
+This way the loader data is never inferred and it moves the inference out of the route tree to the first time you use `useSuspenseQuery`.
+
+### Narrow to relevant routes as much as you possibly can
+
+Consider the following usage of `Link`
+
+```tsx
+<Link to=".." search={{ page: 0 }} />
+<Link to="." search={{ page: 0 }} />
+```
+
+**These examples are bad for TS performance**. That's because `search` resolves to a union of all `search` params for all routes and TS has to check whatever you pass to the `search` prop against this potentially big union. As your application grows, this check time will increase linearly to number of routes and search params. We have done our best to optimize for this case (TypeScript will typically do this work once and cache it) but the initial check against this large union is expensive. This also applies to `params` and other API's such as `useSearch`, `useParams`, `useNavigate` etc.
+
+Instead you should try to narrow to relevant routes with `from` or `to`.
+
+```tsx
+<Link from={Route.fullPath} to=".." search={{page: 0}} />
+<Link from="/posts" to=".." search={{page: 0}} />
+```
+
+Remember you can always pass a union to `to` or `from` to narrow the routes you're interested in.
+
+```tsx
+const from: '/posts/$postId/deep' | '/posts/' = '/posts/'
+<Link from={from} to='..' />
+```
+
+You can also pass branches to `from` to only resolve `search` or `params` to be from any descendants of that branch:
+
+```tsx
+const from = '/posts'
+<Link from={from} to='..' />
+```
+
+`/posts` could be a branch with many descendants which share the same `search` or `params`
+
+### Consider using the object syntax of `addChildren`
+
+It's typical of routes to have `params` `search`, `loaders` or `context` that can even reference external dependencies which are also heavy on TS inference. For such applications, using objects for creating the route tree can be more performant than tuples.
+
+`createChildren` also can accept an object. For large route trees with complex routes and external libraries, objects can be much faster for TS to type check as opposed to large tuples. The performance gains depend on your project, what external dependencies you have and how the types for those libraries are written
+
+```tsx
+const routeTree = rootRoute.addChildren({
+  postsRoute: postsRoute.addChildren({ postRoute, postsIndexRoute }),
+  indexRoute,
+})
+```
+
+Note this syntax is more verbose but has better TS performance. With file based routing, the route tree is generated for you so a verbose route tree is not a concern
+
+### Avoid internal types without narrowing
+
+It's common you might want to re-use types exposed. For example you might be tempted to use `LinkProps` like so
+
+```tsx
+const props: LinkProps = {
+  to: '/posts/',
+}
+
+return (
+  <Link {...props}>
+)
+```
+
+**This is VERY bad for TS Performance**. The problem here is `LinkProps` has no type arguments and is therefore an extremely large type. It includes `search` which is a union of all `search` params, it contains `params` which is a union of all `params`. When merging this object with `Link` it will do a structural comparison of this huge type.
+
+Instead you can use `as const satisfies` to infer a precise type and not `LinkProps` directly to avoid the huge check
+
+```tsx
+const props = {
+  to: '/posts/',
+} as const satisfies LinkProps
+
+return (
+  <Link {...props}>
+)
+```
+
+As `props` is not of type `LinkProps` and therefore this check is cheaper because the type is much more precise. You can also improve type checking further by narrowing `LinkProps`
+
+```tsx
+const props = {
+  to: '/posts/',
+} as const satisfies LinkProps<RegisteredRouter, string '/posts/'>
+
+return (
+  <Link {...props}>
+)
+```
+
+This is even faster as we're checking against the narrowed `LinkProps` type.
+
+You can also use this to narrow the type of `LinkProps` to a specific type to be used as a prop or parameter to a function
+
+```tsx
+export const myLinkProps = [
+  {
+    to: '/posts',
+  },
+  {
+    to: '/posts/$postId',
+    params: { postId: 'postId' },
+  },
+] as const satisfies ReadonlyArray<LinkProps>
+
+export type MyLinkProps = (typeof myLinkProps)[number]
+
+const MyComponent = (props: { linkProps: MyLinkProps }) => {
+  return <Link {...props.linkProps} />
+}
+```
+
+This is faster than using `LinkProps` directly in a component because `MyLinkProps` is a much more precise type
+
+Another solution is not to use `LinkProps` and to provide inversion of control to render a `Link` component narrowed to a specific route. Render props are a good method of inverting control to the user of a component
+
+```tsx
+export interface MyComponentProps {
+  readonly renderLink: () => React.ReactNode
+}
+
+const MyComponent = (props: MyComponentProps) => {
+  return <div>{props.renderLink()}</div>
+}
+
+const Page = () => {
+  return <MyComponent renderLink={() => <Link to="/absolute" />} />
+}
+```
+
+This particular example is very fast as we've inverted control of where we're navigating to the user of the component. The `Link` is narrowed to the exact route
+we want to navigate to
diff --git a/mintlify/router/guide/type-utilities.md b/mintlify/router/guide/type-utilities.md
new file mode 100644
index 000000000..04a26b1d7
--- /dev/null
+++ b/mintlify/router/guide/type-utilities.md
@@ -0,0 +1,344 @@
+---
+id: type-utilities
+title: Type Utilities
+---
+
+Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the intension to be used externally. These types provide the same type safe experience from TanStack Router's runtime concepts on the type level, with flexibility of where to provide type checking
+
+## Type checking Link options with `ValidateLinkOptions`
+
+`ValidateLinkOptions` type checks object literal types to ensure they conform to `Link` options at inference sites. For example, you may have a generic `HeadingLink` component which accepts a `title` prop along with `linkOptions`, the idea being this component can be re-used for any navigation.
+
+
+
+# React
+
+```tsx
+export interface HeaderLinkProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+> {
+  title: string
+  linkOptions: ValidateLinkOptions<TRouter, TOptions>
+}
+
+export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
+  props: HeaderLinkProps<TRouter, TOptions>,
+): React.ReactNode
+export function HeadingLink(props: HeaderLinkProps): React.ReactNode {
+  return (
+    <>
+      <h1>{props.title}</h1>
+      <Link {...props.linkOptions} />
+    </>
+  )
+}
+```
+
+# Solid
+
+```tsx
+export interface HeaderLinkProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+> {
+  title: string
+  linkOptions: ValidateLinkOptions<TRouter, TOptions>
+}
+
+export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
+  props: HeaderLinkProps<TRouter, TOptions>,
+): Solid.JSX.Element
+export function HeadingLink(props: HeaderLinkProps): Solid.JSX.Element {
+  return (
+    <>
+      <h1>{props.title}</h1>
+      <Link {...props.linkOptions} />
+    </>
+  )
+}
+```
+
+
+
+A more permissive overload of `HeadingLink` is used to avoid type assertions you would otherwise have to do with the generic signature. Using a looser signature without type parameters is an easy way to avoid type assertions in the implementation of `HeadingLink`
+
+All type parameters for utilities are optional but for the best TypeScript performance `TRouter` should always be specified for the public facing signature. And `TOptions` should always be used at inference sites like `HeadingLink` to infer the `linkOptions` to correctly narrow `params` and `search`
+
+The result of this is that `linkOptions` in the following is completely type-safe
+
+```tsx
+<HeadingLink title="Posts" linkOptions={{ to: '/posts' }} />
+<HeadingLink title="Post" linkOptions={{ to: '/posts/$postId', params: {postId: 'postId'} }} />
+```
+
+## Type checking an array of Link options with `ValidateLinkOptionsArray`
+
+All navigation type utilities have an array variant. `ValidateLinkOptionsArray` enables type checking of an array of `Link` options. For example, you might have a generic `Menu` component where each item is a `Link`.
+
+
+
+# React
+
+```tsx
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+> {
+  items: ValidateLinkOptionsArray<TRouter, TItems>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+>(props: MenuProps<TRouter, TItems>): React.ReactNode
+export function Menu(props: MenuProps): React.ReactNode {
+  return (
+    <ul>
+      {props.items.map((item) => (
+        <li>
+          <Link {...item} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+# Solid
+
+```tsx
+import { For } from 'solid-js'
+
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+> {
+  items: ValidateLinkOptionsArray<TRouter, TItems>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+>(props: MenuProps<TRouter, TItems>): Solid.JSX.Element
+export function Menu(props: MenuProps): Solid.JSX.Element {
+  return (
+    <ul>
+      <For each={props.items}>
+        {(item) => (
+          <li>
+            <Link {...item} />
+          </li>
+        )}
+      </For>
+    </ul>
+  )
+}
+```
+
+
+
+This of course allows the following `items` prop to be completely type-safe
+
+```tsx
+<Menu
+  items={[
+    { to: '/posts' },
+    { to: '/posts/$postId', params: { postId: 'postId' } },
+  ]}
+/>
+```
+
+It is also possible to fix `from` for each `Link` options in the array. This would allow all `Menu` items to navigate relative to `from`. Additional type checking of `from` can be provided by the `ValidateFromPath` utility
+
+
+
+# React
+
+```ts
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+  TFrom extends string = string,
+> {
+  from: ValidateFromPath<TRouter, TFrom>
+  items: ValidateLinkOptionsArray<TRouter, TItems, TFrom>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+  TFrom extends string = string,
+>(props: MenuProps<TRouter, TItems, TFrom>): React.ReactNode
+export function Menu(props: MenuProps): React.ReactNode {
+  return (
+    <ul>
+      {props.items.map((item) => (
+        <li>
+          <Link {...item} from={props.from} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+# Solid
+
+```ts
+import { For } from 'solid-js'
+
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+  TFrom extends string = string,
+> {
+  from: ValidateFromPath<TRouter, TFrom>
+  items: ValidateLinkOptionsArray<TRouter, TItems, TFrom>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+  TFrom extends string = string,
+>(props: MenuProps<TRouter, TItems, TFrom>): Solid.JSX.Element
+export function Menu(props: MenuProps): Solid.JSX.Element {
+  return (
+    <ul>
+      <For each={props.items}>
+        {(item) => (
+          <li>
+            <Link {...item} from={props.from} />
+          </li>
+        )}
+      </For>
+    </ul>
+  )
+}
+```
+
+
+
+`ValidateLinkOptionsArray` allows you to fix `from` by providing an extra type parameter. The result is a type safe array of `Link` options providing navigation relative to `from`
+
+```tsx
+<Menu
+  from="/posts"
+  items={[{ to: '.' }, { to: './$postId', params: { postId: 'postId' } }]}
+/>
+```
+
+## Type checking redirect options with `ValidateRedirectOptions`
+
+`ValidateRedirectOptions` type checks object literal types to ensure they conform to redirect options at inference sites. For example, you may need a generic `fetchOrRedirect` function which accepts a `url` along with `redirectOptions`, the idea being this function will redirect when the `fetch` fails.
+
+```tsx
+export async function fetchOrRedirect<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions,
+>(
+  url: string,
+  redirectOptions: ValidateRedirectOptions<TRouter, TOptions>,
+): Promise<unknown>
+export async function fetchOrRedirect(
+  url: string,
+  redirectOptions: ValidateRedirectOptions,
+): Promise<unknown> {
+  const response = await fetch(url)
+
+  if (!response.ok && response.status === 401) {
+    throw redirect(redirectOptions)
+  }
+
+  return await response.json()
+}
+```
+
+The result is that `redirectOptions` passed to `fetchOrRedirect` is completely type-safe
+
+```tsx
+fetchOrRedirect('http://example.com/', { to: '/login' })
+```
+
+## Type checking navigate options with `ValidateNavigateOptions`
+
+`ValidateNavigateOptions` type checks object literal types to ensure they conform to navigate options at inference sites. For example, you may want to write a custom hook to enable/disable navigation.
+
+
+
+# React
+
+```tsx
+export interface UseConditionalNavigateResult {
+  enable: () => void
+  disable: () => void
+  navigate: () => void
+}
+
+export function useConditionalNavigate<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions,
+>(
+  navigateOptions: ValidateNavigateOptions<TRouter, TOptions>,
+): UseConditionalNavigateResult
+export function useConditionalNavigate(
+  navigateOptions: ValidateNavigateOptions,
+): UseConditionalNavigateResult {
+  const [enabled, setEnabled] = useState(false)
+  const navigate = useNavigate()
+  return {
+    enable: () => setEnabled(true),
+    disable: () => setEnabled(false),
+    navigate: () => {
+      if (enabled) {
+        navigate(navigateOptions)
+      }
+    },
+  }
+}
+```
+
+# Solid
+
+```tsx
+import { createSignal } from 'solid-js'
+
+export interface UseConditionalNavigateResult {
+  enable: () => void
+  disable: () => void
+  navigate: () => void
+}
+
+export function useConditionalNavigate<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+>(
+  navigateOptions: ValidateNavigateOptions<TRouter, TOptions>,
+): UseConditionalNavigateResult
+export function useConditionalNavigate(
+  navigateOptions: ValidateNavigateOptions,
+): UseConditionalNavigateResult {
+  const [enabled, setEnabled] = createSignal(false)
+  const navigate = useNavigate()
+  return {
+    enable: () => setEnabled(true),
+    disable: () => setEnabled(false),
+    navigate: () => {
+      if (enabled()) {
+        navigate(navigateOptions)
+      }
+    },
+  }
+}
+```
+
+
+
+The result of this is that `navigateOptions` passed to `useConditionalNavigate` is completely type-safe and we can enable/disable navigation based on react state
+
+```tsx
+const { enable, disable, navigate } = useConditionalNavigate({
+  to: '/posts/$postId',
+  params: { postId: 'postId' },
+})
+```
diff --git a/mintlify/router/guide/url-rewrites.md b/mintlify/router/guide/url-rewrites.md
new file mode 100644
index 000000000..f90fbe407
--- /dev/null
+++ b/mintlify/router/guide/url-rewrites.md
@@ -0,0 +1,496 @@
+---
+title: URL Rewrites
+---
+
+URL rewrites allow you to transform URLs bidirectionally between what the browser displays and what the router interprets internally. This powerful feature enables patterns like locale prefixes, subdomain routing, legacy URL migration, and multi-tenant applications without duplicating routes or complicating your route tree.
+
+## When to Use URL Rewrites
+
+URL rewrites are useful when you need to:
+
+- **i18n locale prefixes**: Display `/en/about` in the browser but route to `/about` internally
+- **Subdomain routing**: Route `admin.example.com/users` to `/admin/users` internally
+- **Legacy URL migration**: Support old URLs like `/old-path` that map to new routes
+- **Multi-tenant applications**: Route `tenant1.example.com` to tenant-specific routes
+- **Custom URL schemes**: Transform any URL pattern to match your route structure
+
+## How URL Rewrites Work
+
+URL rewrites operate in two directions:
+
+1. **Input rewrite**: Transforms the URL **from the browser** before the router interprets it
+2. **Output rewrite**: Transforms the URL **from the router** before it's written to the browser
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         Browser URL Bar                         │
+│                        /en/about?q=test                         │
+└─────────────────────────┬───────────────────────────────────────┘
+                          │
+                          ▼ input rewrite
+┌─────────────────────────────────────────────────────────────────┐
+│                      Router Internal URL                        │
+│                        /about?q=test                            │
+│                                                                 │
+│                    (matches routes, runs loaders)               │
+└─────────────────────────┬───────────────────────────────────────┘
+                          │
+                          ▼ output rewrite
+┌─────────────────────────────────────────────────────────────────┐
+│                         Browser URL Bar                         │
+│                        /en/about?q=test                         │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+The router exposes two href properties on the location object:
+
+- `location.href` - The internal URL (after input rewrite)
+- `location.publicHref` - The external URL displayed in the browser (after output rewrite)
+
+## Basic Usage
+
+Configure rewrites when creating your router:
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      // Transform browser URL → router internal URL
+      // Return the modified URL, a new URL, or undefined to skip
+      return url
+    },
+    output: ({ url }) => {
+      // Transform router internal URL → browser URL
+      // Return the modified URL, a new URL, or undefined to skip
+      return url
+    },
+  },
+})
+```
+
+The `input` and `output` functions receive a `URL` object and can:
+
+- Mutate and return the same `url` object
+- Return a new `URL` instance
+- Return a full href string (will be parsed into a URL)
+- Return `undefined` to skip the rewrite
+
+## Common Patterns
+
+### Pattern 1: i18n Locale Prefix
+
+Strip locale prefixes on input and add them back on output:
+
+```tsx
+const locales = ['en', 'fr', 'es', 'de']
+const defaultLocale = 'en'
+
+// Get current locale (from cookie, localStorage, or detection)
+function getLocale() {
+  return localStorage.getItem('locale') || defaultLocale
+}
+
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      // Check if pathname starts with a locale prefix
+      const segments = url.pathname.split('/').filter(Boolean)
+      const firstSegment = segments[0]
+
+      if (firstSegment && locales.includes(firstSegment)) {
+        // Strip the locale prefix: /en/about → /about
+        url.pathname = '/' + segments.slice(1).join('/') || '/'
+      }
+      return url
+    },
+    output: ({ url }) => {
+      const locale = getLocale()
+      // Add locale prefix: /about → /en/about
+      if (locale !== defaultLocale || true) {
+        // Always prefix, or conditionally skip default locale
+        url.pathname = `/${locale}${url.pathname === '/' ? '' : url.pathname}`
+      }
+      return url
+    },
+  },
+})
+```
+
+For production i18n, consider using a library like Paraglide that provides `localizeUrl` and `deLocalizeUrl` functions. See the [Internationalization guide](/router/guide/internationalization-i18n) for integration details.
+
+### Pattern 2: Subdomain to Path Routing
+
+Route subdomain requests to path-based routes:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      const subdomain = url.hostname.split('.')[0]
+
+      // admin.example.com/users → /admin/users
+      if (subdomain === 'admin') {
+        url.pathname = '/admin' + url.pathname
+      }
+      // api.example.com/v1/users → /api/v1/users
+      else if (subdomain === 'api') {
+        url.pathname = '/api' + url.pathname
+      }
+
+      return url
+    },
+    output: ({ url }) => {
+      // Reverse the transformation for link generation
+      if (url.pathname.startsWith('/admin')) {
+        url.hostname = 'admin.example.com'
+        url.pathname = url.pathname.replace(/^\/admin/, '') || '/'
+      } else if (url.pathname.startsWith('/api')) {
+        url.hostname = 'api.example.com'
+        url.pathname = url.pathname.replace(/^\/api/, '') || '/'
+      }
+      return url
+    },
+  },
+})
+```
+
+### Pattern 3: Legacy URL Migration
+
+Support old URLs while maintaining new route structure:
+
+```tsx
+const legacyPaths: Record<string, string> = {
+  '/old-about': '/about',
+  '/old-contact': '/contact',
+  '/blog-posts': '/blog',
+  '/user-profile': '/account/profile',
+}
+
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      const newPath = legacyPaths[url.pathname]
+      if (newPath) {
+        url.pathname = newPath
+      }
+      return url
+    },
+    // No output rewrite needed - new URLs will be used going forward
+  },
+})
+```
+
+### Pattern 4: Multi-tenant Routing
+
+Route tenant-specific domains to a unified route structure:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      // Extract tenant from subdomain: acme.app.com → acme
+      const parts = url.hostname.split('.')
+      if (parts.length >= 3) {
+        const tenant = parts[0]
+        // Inject tenant into the path: /dashboard → /tenant/acme/dashboard
+        url.pathname = `/tenant/${tenant}${url.pathname}`
+      }
+      return url
+    },
+    output: ({ url }) => {
+      // Extract tenant from path and move to subdomain
+      const match = url.pathname.match(/^\/tenant\/([^/]+)(.*)$/)
+      if (match) {
+        const [, tenant, rest] = match
+        url.hostname = `${tenant}.app.com`
+        url.pathname = rest || '/'
+      }
+      return url
+    },
+  },
+})
+```
+
+### Pattern 5: Search Parameter Transformation
+
+Transform search parameters during rewrites:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => {
+      // Convert legacy search param format
+      // ?filter_status=active → ?status=active
+      const filterStatus = url.searchParams.get('filter_status')
+      if (filterStatus) {
+        url.searchParams.delete('filter_status')
+        url.searchParams.set('status', filterStatus)
+      }
+      return url
+    },
+    output: ({ url }) => {
+      // Optionally transform back for external display
+      return url
+    },
+  },
+})
+```
+
+## Composing Multiple Rewrites
+
+When you need multiple independent rewrite transformations, use `composeRewrites` to combine them:
+
+```tsx
+import { composeRewrites } from '@tanstack/react-router'
+
+const localeRewrite = {
+  input: ({ url }) => {
+    // Strip locale prefix
+    const match = url.pathname.match(/^\/(en|fr|es)(\/.*)$/)
+    if (match) {
+      url.pathname = match[2] || '/'
+    }
+    return url
+  },
+  output: ({ url }) => {
+    // Add locale prefix
+    url.pathname = `/en${url.pathname === '/' ? '' : url.pathname}`
+    return url
+  },
+}
+
+const legacyRewrite = {
+  input: ({ url }) => {
+    if (url.pathname === '/old-page') {
+      url.pathname = '/new-page'
+    }
+    return url
+  },
+}
+
+const router = createRouter({
+  routeTree,
+  rewrite: composeRewrites([localeRewrite, legacyRewrite]),
+})
+```
+
+**Order of operations:**
+
+- **Input rewrites**: Execute in order (first to last)
+- **Output rewrites**: Execute in reverse order (last to first)
+
+This ensures that composed rewrites "unwrap" correctly. In the example above:
+
+- Input: locale strips `/en`, then legacy redirects `/old-page`
+- Output: legacy runs first (no-op), then locale adds `/en` back
+
+## Interaction with Basepath
+
+When you configure a `basepath`, the router internally implements it as a rewrite. If you also provide a custom `rewrite`, they are automatically composed together:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  basepath: '/app',
+  rewrite: {
+    input: ({ url }) => {
+      // This runs AFTER basepath is stripped
+      // Browser: /app/en/about → After basepath: /en/about → Your rewrite: /about
+      return url
+    },
+    output: ({ url }) => {
+      // This runs BEFORE basepath is added
+      // Your rewrite: /about → After your rewrite: /en/about → Basepath adds: /app/en/about
+      return url
+    },
+  },
+})
+```
+
+The composition order ensures:
+
+1. **Input**: Basepath stripped first, then your rewrite runs
+2. **Output**: Your rewrite runs first, then basepath added
+
+## Working with Links and Navigation
+
+### Link Component
+
+The `<Link>` component automatically applies output rewrites when generating `href` attributes:
+
+```tsx
+// With locale rewrite configured (adds /en prefix)
+<Link to="/about">About</Link>
+// Renders: <a href="/en/about">About</a>
+```
+
+### Programmatic Navigation
+
+Programmatic navigation via `navigate()` or `router.navigate()` also respects rewrites:
+
+```tsx
+const navigate = useNavigate()
+
+// Navigates to /about internally, displays /en/about in browser
+navigate({ to: '/about' })
+```
+
+### Hard Links for Cross-Origin Rewrites
+
+When an output rewrite changes the origin (hostname), the `<Link>` component automatically renders a standard anchor tag instead of using client-side navigation:
+
+```tsx
+// Rewrite that changes hostname for /admin paths
+const router = createRouter({
+  routeTree,
+  rewrite: {
+    output: ({ url }) => {
+      if (url.pathname.startsWith('/admin')) {
+        url.hostname = 'admin.example.com'
+        url.pathname = url.pathname.replace(/^\/admin/, '') || '/'
+      }
+      return url
+    },
+  },
+})
+
+// This link will be a hard navigation (full page load)
+<Link to="/admin/dashboard">Admin Dashboard</Link>
+// Renders: <a href="https://admin.example.com/dashboard">Admin Dashboard</a>
+```
+
+## The publicHref Property
+
+The router's location object includes a `publicHref` property that contains the external URL (after output rewrite):
+
+```tsx
+function MyComponent() {
+  const location = useLocation()
+
+  // Internal URL used for routing
+  console.log(location.href) // "/about"
+
+  // External URL shown in browser
+  console.log(location.publicHref) // "/en/about"
+
+  return (
+    <div>
+      {/* Use publicHref for sharing, canonical URLs, etc. */}
+      <ShareButton url={window.location.origin + location.publicHref} />
+    </div>
+  )
+}
+```
+
+Use `publicHref` when you need the actual browser URL for:
+
+- Social sharing
+- Canonical URLs
+- Analytics tracking
+- Copying links to clipboard
+
+## Server-side Considerations
+
+URL rewrites apply on both client and server. When using TanStack Start:
+
+### Server Middleware
+
+Rewrites are applied when parsing incoming requests:
+
+```tsx
+// router.tsx
+export const router = createRouter({
+  routeTree,
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },
+})
+```
+
+The server handler will use the same rewrite configuration to parse incoming URLs and generate responses with the correct external URLs.
+
+### SSR Hydration
+
+The router ensures that the server-rendered HTML and client hydration use consistent URLs. The `publicHref` is serialized during SSR so the client can hydrate with the correct external URL.
+
+## API Reference
+
+### `rewrite` option
+
+- Type: [`LocationRewrite`](#locationrewrite-type)
+- Optional
+- Configures bidirectional URL transformation between browser and router.
+
+### LocationRewrite type
+
+```tsx
+type LocationRewrite = {
+  /**
+   * Transform the URL before the router interprets it.
+   * Called when reading from browser history.
+   */
+  input?: LocationRewriteFunction
+
+  /**
+   * Transform the URL before it's written to browser history.
+   * Called when generating links and committing navigation.
+   */
+  output?: LocationRewriteFunction
+}
+```
+
+### LocationRewriteFunction type
+
+```tsx
+type LocationRewriteFunction = (opts: { url: URL }) => undefined | string | URL
+```
+
+**Parameters:**
+
+- `url`: A `URL` object representing the current URL
+
+**Returns:**
+
+- `URL`: The transformed URL object (can be the same mutated object or a new instance)
+- `string`: A full href string that will be parsed into a URL
+- `undefined`: Skip the rewrite, use the original URL
+
+### composeRewrites function
+
+```tsx
+import { composeRewrites } from '@tanstack/react-router'
+
+function composeRewrites(rewrites: Array<LocationRewrite>): LocationRewrite
+```
+
+Combines multiple rewrite pairs into a single rewrite. Input rewrites execute in order, output rewrites execute in reverse order.
+
+**Example:**
+
+```tsx
+const composedRewrite = composeRewrites([
+  { input: rewrite1Input, output: rewrite1Output },
+  { input: rewrite2Input, output: rewrite2Output },
+])
+
+// Input execution order: rewrite1Input → rewrite2Input
+// Output execution order: rewrite2Output → rewrite1Output
+```
+
+## Examples
+
+Complete working examples are available in the TanStack Router repository:
+
+- [React + Paraglide (Client-side i18n)](https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide)
+- [React + TanStack Start + Paraglide (SSR i18n)](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide)
+- [Solid + Paraglide (Client-side i18n)](https://github.com/TanStack/router/tree/main/examples/solid/i18n-paraglide)
+- [Solid + TanStack Start + Paraglide (SSR i18n)](https://github.com/TanStack/router/tree/main/examples/solid/start-i18n-paraglide)
diff --git a/mintlify/router/how-to/arrays-objects-dates-search-params.md b/mintlify/router/how-to/arrays-objects-dates-search-params.md
new file mode 100644
index 000000000..d5d84bd6b
--- /dev/null
+++ b/mintlify/router/how-to/arrays-objects-dates-search-params.md
@@ -0,0 +1,768 @@
+---
+title: Work with Arrays, Objects, and Dates in Search Parameters
+---
+
+Learn to handle arrays, objects, dates, and nested data structures in search parameters while maintaining type safety and URL compatibility.
+
+## Quick Start
+
+Complex search parameters go beyond simple strings and numbers. TanStack Router's JSON-first approach makes it easy to handle arrays, objects, dates, and nested structures:
+
+```tsx
+// Example of complex search parameters
+const complexSearch = {
+  tags: ['typescript', 'react', 'router'], // Array
+  filters: {
+    // Nested object
+    category: 'web',
+    minRating: 4.5,
+    active: true,
+  },
+  dateRange: {
+    // Date objects
+    start: new Date('2024-01-01'),
+    end: new Date('2024-12-31'),
+  },
+  pagination: {
+    // Nested pagination
+    page: 1,
+    size: 20,
+    sort: { field: 'name', direction: 'asc' },
+  },
+}
+```
+
+## Working with Arrays
+
+Arrays are commonly used for filters, tags, categories, and multi-select options.
+
+### Basic Array Validation
+
+```tsx
+// routes/products.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  categories: z.array(z.string()).default([]),
+  tags: z.array(z.string()).optional(),
+  priceRange: z.array(z.number()).length(2).optional(), // [min, max]
+})
+
+export const Route = createFileRoute('/products')({
+  validateSearch: searchSchema,
+  component: ProductsComponent,
+})
+
+function ProductsComponent() {
+  const { categories, tags, priceRange } = Route.useSearch()
+
+  return (
+    <div>
+      <h2>Active Categories: {categories.join(', ')}</h2>
+      {tags && <p>Tags: {tags.join(', ')}</p>}
+      {priceRange && (
+        <p>
+          Price: ${priceRange[0]} - ${priceRange[1]}
+        </p>
+      )}
+    </div>
+  )
+}
+```
+
+### Navigating with Arrays
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+function FilterControls() {
+  return (
+    <div>
+      {/* Add to existing array */}
+      <Link
+        to="/products"
+        search={(prev) => ({
+          ...prev,
+          categories: [...(prev.categories || []), 'electronics'],
+        })}
+      >
+        Add Electronics
+      </Link>
+
+      {/* Replace entire array */}
+      <Link to="/products" search={{ categories: ['books', 'music'] }}>
+        Books & Music Only
+      </Link>
+
+      {/* Remove from array */}
+      <Link
+        to="/products"
+        search={(prev) => ({
+          ...prev,
+          categories:
+            prev.categories?.filter((cat) => cat !== 'electronics') || [],
+        })}
+      >
+        Remove Electronics
+      </Link>
+
+      {/* Clear array */}
+      <Link to="/products" search={(prev) => ({ ...prev, categories: [] })}>
+        Clear All
+      </Link>
+    </div>
+  )
+}
+```
+
+### Advanced Array Patterns
+
+```tsx
+// routes/search.tsx
+const advancedArraySchema = z.object({
+  // Array of objects
+  filters: z
+    .array(
+      z.object({
+        field: z.string(),
+        operator: z.enum(['eq', 'gt', 'lt', 'contains']),
+        value: z.union([z.string(), z.number(), z.boolean()]),
+      }),
+    )
+    .default([]),
+
+  // Array with constraints
+  selectedIds: z.array(z.string().uuid()).max(10).default([]),
+
+  // Array with transformation
+  sortFields: z
+    .array(z.string())
+    .transform((arr) =>
+      arr.filter((field) => ['name', 'date', 'price'].includes(field)),
+    )
+    .default(['name']),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: advancedArraySchema,
+  component: SearchComponent,
+})
+```
+
+## Working with Objects
+
+Objects are useful for grouped parameters, complex filters, and nested configurations.
+
+### Basic Object Validation
+
+```tsx
+// routes/dashboard.tsx
+const dashboardSchema = z.object({
+  view: z
+    .object({
+      layout: z.enum(['grid', 'list', 'cards']).default('grid'),
+      columns: z.number().min(1).max(6).default(3),
+      showDetails: z.boolean().default(false),
+    })
+    .prefault({}),
+
+  filters: z
+    .object({
+      status: z.enum(['active', 'inactive', 'pending']).optional(),
+      dateCreated: z
+        .object({
+          after: z.string().optional(),
+          before: z.string().optional(),
+        })
+        .optional(),
+      metadata: z.record(z.string(), z.string()).optional(), // Dynamic object keys
+    })
+    .prefault({}),
+})
+
+export const Route = createFileRoute('/dashboard')({
+  validateSearch: dashboardSchema,
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const { view, filters } = Route.useSearch()
+
+  return (
+    <div>
+      <div className={`layout-${view.layout} columns-${view.columns}`}>
+        {/* Render based on complex object state */}
+      </div>
+
+      {filters.status && <p>Status: {filters.status}</p>}
+      {filters.dateCreated?.after && (
+        <p>Created after: {filters.dateCreated.after}</p>
+      )}
+    </div>
+  )
+}
+```
+
+### Navigating with Objects
+
+```tsx
+function ViewControls() {
+  return (
+    <div>
+      {/* Update nested object property */}
+      <Link
+        to="/dashboard"
+        search={(prev) => ({
+          ...prev,
+          view: {
+            ...prev.view,
+            layout: 'list',
+          },
+        })}
+      >
+        List View
+      </Link>
+
+      {/* Update multiple nested properties */}
+      <Link
+        to="/dashboard"
+        search={(prev) => ({
+          ...prev,
+          view: {
+            ...prev.view,
+            layout: 'grid',
+            columns: 4,
+            showDetails: true,
+          },
+        })}
+      >
+        4-Column Grid with Details
+      </Link>
+
+      {/* Deep merge with library for complex updates */}
+      <Link
+        to="/dashboard"
+        search={(prev) =>
+          merge(prev, {
+            filters: {
+              dateCreated: { after: '2024-01-01' },
+            },
+          })
+        }
+      >
+        Filter Recent Items
+      </Link>
+    </div>
+  )
+}
+
+// For deep merging, use a well-tested library:
+
+// Option 1: Lodash (most popular, full-featured)
+// npm install lodash-es
+// import { merge } from 'lodash-es'
+
+// Option 2: deepmerge (lightweight, focused)
+// npm install deepmerge
+// import merge from 'deepmerge'
+
+// Option 3: Ramda (functional programming style)
+// npm install ramda
+// import { mergeDeepRight as merge } from 'ramda'
+
+// Example with deepmerge (recommended for most cases):
+import merge from 'deepmerge'
+
+// Handles arrays intelligently - combines by default
+const result = merge(
+  { filters: { tags: ['react'] } },
+  { filters: { tags: ['typescript'] } },
+)
+// Result: { filters: { tags: ['react', 'typescript'] } }
+
+// Override array merging behavior if needed
+const overwriteResult = merge(
+  { filters: { tags: ['react'] } },
+  { filters: { tags: ['typescript'] } },
+  { arrayMerge: (dest, source) => source }, // Overwrite instead of combine
+)
+// Result: { filters: { tags: ['typescript'] } }
+```
+
+## Working with Dates
+
+Dates require special handling for URL serialization and validation.
+
+### Date Validation and Serialization
+
+```tsx
+// routes/events.tsx
+const eventSchema = z.object({
+  // ISO string dates
+  startDate: z.string().datetime().optional(),
+  endDate: z.string().datetime().optional(),
+
+  // Date range as object
+  dateRange: z
+    .object({
+      start: z.string().datetime(),
+      end: z.string().datetime(),
+    })
+    .optional(),
+
+  // Transform string to Date object
+  selectedDate: z
+    .string()
+    .datetime()
+    .transform((str) => new Date(str))
+    .optional(),
+
+  // Relative dates
+  timeFilter: z.enum(['today', 'week', 'month', 'year']).default('week'),
+})
+
+export const Route = createFileRoute('/events')({
+  validateSearch: eventSchema,
+  component: EventsComponent,
+})
+
+function EventsComponent() {
+  const search = Route.useSearch()
+
+  // Convert string dates back to Date objects for display
+  const startDate = search.startDate ? new Date(search.startDate) : null
+  const endDate = search.endDate ? new Date(search.endDate) : null
+
+  return (
+    <div>
+      {startDate && <p>Events from: {startDate.toLocaleDateString()}</p>}
+      {search.selectedDate && (
+        <p>Selected: {search.selectedDate.toLocaleDateString()}</p>
+      )}
+    </div>
+  )
+}
+```
+
+### Date Navigation Patterns
+
+```tsx
+function DateControls() {
+  const navigate = useNavigate()
+
+  const setDateRange = (start: Date, end: Date) => {
+    navigate({
+      to: '/events',
+      search: (prev) => ({
+        ...prev,
+        dateRange: {
+          start: start.toISOString(),
+          end: end.toISOString(),
+        },
+      }),
+    })
+  }
+
+  const setRelativeDate = (period: string) => {
+    const now = new Date()
+    let start: Date
+
+    switch (period) {
+      case 'today':
+        start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        break
+      case 'week':
+        start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+        break
+      case 'month':
+        start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
+        break
+      default:
+        start = now
+    }
+
+    setDateRange(start, now)
+  }
+
+  return (
+    <div>
+      <button onClick={() => setRelativeDate('today')}>Today</button>
+      <button onClick={() => setRelativeDate('week')}>Past Week</button>
+      <button onClick={() => setRelativeDate('month')}>Past Month</button>
+
+      {/* Date picker integration */}
+      <input
+        type="date"
+        onChange={(e) => {
+          const date = new Date(e.target.value)
+          navigate({
+            to: '/events',
+            search: (prev) => ({
+              ...prev,
+              selectedDate: date.toISOString(),
+            }),
+          })
+        }}
+      />
+    </div>
+  )
+}
+```
+
+## Nested Data Structures
+
+Complex applications often need deeply nested search parameters.
+
+### Complex Nested Schema
+
+```tsx
+// routes/analytics.tsx
+const analyticsSchema = z.object({
+  dashboard: z
+    .object({
+      widgets: z
+        .array(
+          z.object({
+            id: z.string(),
+            type: z.enum(['chart', 'table', 'metric']),
+            config: z.object({
+              title: z.string(),
+              dataSource: z.string(),
+              filters: z.array(
+                z.object({
+                  field: z.string(),
+                  operator: z.string(),
+                  value: z.any(),
+                }),
+              ),
+              visualization: z
+                .object({
+                  chartType: z.enum(['line', 'bar', 'pie']).optional(),
+                  colors: z.array(z.string()).optional(),
+                  axes: z
+                    .object({
+                      x: z.string(),
+                      y: z.array(z.string()),
+                    })
+                    .optional(),
+                })
+                .optional(),
+            }),
+          }),
+        )
+        .default([]),
+
+      layout: z
+        .object({
+          columns: z.number().min(1).max(12).default(2),
+          gap: z.number().default(16),
+          responsive: z.boolean().default(true),
+        })
+        .prefault({}),
+
+      timeRange: z
+        .object({
+          preset: z.enum(['1h', '24h', '7d', '30d', 'custom']).default('24h'),
+          custom: z
+            .object({
+              start: z.string().datetime(),
+              end: z.string().datetime(),
+            })
+            .optional(),
+        })
+        .prefault({}),
+    })
+    .prefault({}),
+})
+
+export const Route = createFileRoute('/analytics')({
+  validateSearch: analyticsSchema,
+  component: AnalyticsComponent,
+})
+```
+
+### Managing Complex State Updates
+
+```tsx
+function AnalyticsControls() {
+  const search = Route.useSearch()
+  const navigate = useNavigate()
+
+  // Helper to update nested widget config
+  const updateWidgetConfig = (widgetId: string, configUpdate: any) => {
+    navigate({
+      to: '/analytics',
+      search: (prev) => ({
+        ...prev,
+        dashboard: {
+          ...prev.dashboard,
+          widgets: prev.dashboard.widgets.map((widget) =>
+            widget.id === widgetId
+              ? {
+                  ...widget,
+                  config: { ...widget.config, ...configUpdate },
+                }
+              : widget,
+          ),
+        },
+      }),
+    })
+  }
+
+  // Helper to add new widget
+  const addWidget = (widget: any) => {
+    navigate({
+      to: '/analytics',
+      search: (prev) => ({
+        ...prev,
+        dashboard: {
+          ...prev.dashboard,
+          widgets: [...prev.dashboard.widgets, widget],
+        },
+      }),
+    })
+  }
+
+  // Helper to update layout
+  const updateLayout = (layoutUpdate: any) => {
+    navigate({
+      to: '/analytics',
+      search: (prev) => ({
+        ...prev,
+        dashboard: {
+          ...prev.dashboard,
+          layout: { ...prev.dashboard.layout, ...layoutUpdate },
+        },
+      }),
+    })
+  }
+
+  return (
+    <div>
+      <button onClick={() => updateLayout({ columns: 3 })}>3 Columns</button>
+
+      <button
+        onClick={() =>
+          addWidget({
+            id: Date.now().toString(),
+            type: 'chart',
+            config: {
+              title: 'New Chart',
+              dataSource: 'default',
+              filters: [],
+            },
+          })
+        }
+      >
+        Add Chart Widget
+      </button>
+    </div>
+  )
+}
+```
+
+## Performance Optimization
+
+### Selective Updates with Selectors
+
+```tsx
+// Only re-render when specific nested values change
+function WidgetComponent({ widgetId }: { widgetId: string }) {
+  // Use selector to avoid unnecessary re-renders
+  const widget = Route.useSearch({
+    select: (search) => search.dashboard.widgets.find((w) => w.id === widgetId),
+  })
+
+  const layout = Route.useSearch({
+    select: (search) => search.dashboard.layout,
+  })
+
+  if (!widget) return null
+
+  return (
+    <div
+      style={{
+        gridColumn: `span ${Math.ceil(12 / layout.columns)}`,
+      }}
+    >
+      <h3>{widget.config.title}</h3>
+      {/* Widget content */}
+    </div>
+  )
+}
+```
+
+### Memoization for Complex Transforms
+
+```tsx
+import { useMemo } from 'react'
+
+function ComplexDataComponent() {
+  const search = Route.useSearch()
+
+  // Memoize expensive transformations
+  const processedData = useMemo(() => {
+    return search.dashboard.widgets
+      .filter((widget) => widget.type === 'chart')
+      .map((widget) => ({
+        ...widget,
+        computedMetrics: expensiveCalculation(widget.config),
+      }))
+  }, [search.dashboard.widgets])
+
+  return (
+    <div>
+      {processedData.map((widget) => (
+        <ComplexChart key={widget.id} data={widget} />
+      ))}
+    </div>
+  )
+}
+```
+
+## Production Checklist
+
+- [ ] **Array bounds validation** - Use `.min()`, `.max()`, `.length()` constraints
+- [ ] **Date format consistency** - Stick to ISO strings for URL compatibility
+- [ ] **Object depth limits** - Avoid excessively nested structures for URL length
+- [ ] **Performance testing** - Test with large arrays/objects in search params
+- [ ] **URL length limits** - Most browsers limit URLs to ~2000 characters
+- [ ] **Fallback values** - Provide sensible defaults for all complex types
+- [ ] **Type safety** - Ensure schemas match your component expectations
+- [ ] **Serialization testing** - Verify round-trip serialization works correctly
+
+## Common Problems
+
+### Problem: Array Parameters Not Updating
+
+**Symptoms:** Link clicks don't update array search parameters.
+
+**Cause:** Directly mutating arrays instead of creating new ones.
+
+**Solution:** Always create new arrays when updating:
+
+```tsx
+// ❌ Wrong - mutates existing array
+search={(prev) => {
+  prev.categories.push('new-item')
+  return prev
+}}
+
+// ✅ Correct - creates new array
+search={(prev) => ({
+  ...prev,
+  categories: [...prev.categories, 'new-item']
+})}
+```
+
+### Problem: Dates Not Serializing Correctly
+
+**Symptoms:** Date objects become `[object Object]` in URL.
+
+**Cause:** Attempting to serialize Date objects directly.
+
+**Solution:** Convert dates to ISO strings:
+
+```tsx
+// ❌ Wrong - Date objects don't serialize
+search={{
+  startDate: new Date() // Becomes "[object Object]"
+}}
+
+// ✅ Correct - Use ISO strings
+search={{
+  startDate: new Date().toISOString()
+}}
+```
+
+### Problem: Deep Object Updates Not Working
+
+**Symptoms:** Nested object properties don't update as expected.
+
+**Cause:** Shallow merging doesn't update nested properties.
+
+**Solution:** Use proper deep merging or spread operators:
+
+```tsx
+// ❌ Wrong - shallow merge loses nested properties
+search={(prev) => ({
+  ...prev,
+  filters: { category: 'new' } // Loses other filter properties
+})}
+
+// ✅ Correct - preserve nested properties
+search={(prev) => ({
+  ...prev,
+  filters: {
+    ...prev.filters,
+    category: 'new'
+  }
+})}
+```
+
+### Problem: URL Too Long Error
+
+**Symptoms:** Browser errors with very complex search parameters.
+
+**Cause:** Exceeding browser URL length limits (~2000 characters).
+
+**Solutions:**
+
+1. **Simplify data structures** - Remove unnecessary nesting
+2. **Use compression** - Implement custom serialization
+3. **Store in session** - Keep complex state in sessionStorage with URL key
+4. **Pagination** - Break large arrays into pages
+
+```tsx
+// Option 3: Session storage approach
+const sessionKey = Route.useSearch({ select: (s) => s.sessionKey })
+const complexData = useMemo(() => {
+  if (sessionKey) {
+    return JSON.parse(sessionStorage.getItem(sessionKey) || '{}')
+  }
+  return {}
+}, [sessionKey])
+```
+
+### Problem: Performance Issues with Large Objects
+
+**Symptoms:** Slow navigation and re-renders with complex search parameters.
+
+**Cause:** Large objects causing expensive serialization and comparison operations.
+
+**Solutions:**
+
+1. **Use selectors** to limit re-renders
+2. **Memoize expensive calculations**
+3. **Consider alternatives** like context or state management
+
+```tsx
+// Use selector to minimize re-renders
+const onlyNeededData = Route.useSearch({
+  select: (search) => ({
+    currentPage: search.pagination.page,
+    pageSize: search.pagination.size,
+  }),
+})
+```
+
+## Common Next Steps
+
+
+
+
+
+
+## Related Resources
+
+- [Search Params Guide](/router/guide/search-params) - Core concepts and JSON-first approach
+- [Zod Documentation](https://zod.dev/) - Schema validation library
+- [MDN Date.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - Date serialization reference
+- [URLSearchParams Limits](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) - Browser URL length limits
+
+**Deep Merging Libraries:**
+
+- [deepmerge](https://www.npmjs.com/package/deepmerge) - Lightweight, focused deep merging utility
+- [Lodash merge](https://lodash.com/docs#merge) - Full-featured utility library with deep merging
+- [Ramda mergeDeepRight](https://ramdajs.com/docs/#mergeDeepRight) - Functional programming approach
diff --git a/mintlify/router/how-to/debug-router-issues.md b/mintlify/router/how-to/debug-router-issues.md
new file mode 100644
index 000000000..620cde5ac
--- /dev/null
+++ b/mintlify/router/how-to/debug-router-issues.md
@@ -0,0 +1,766 @@
+---
+title: How to Debug Common Router Issues
+---
+
+This guide covers debugging common TanStack Router problems, from route matching failures to navigation issues and performance problems.
+
+## Quick Start
+
+Use TanStack Router DevTools for real-time debugging, add strategic console logging, and follow systematic troubleshooting patterns to identify and resolve router issues quickly.
+
+---
+
+## Essential Debugging Tools
+
+### 1. TanStack Router DevTools
+
+Install and configure the DevTools for the best debugging experience:
+
+```bash
+npm install @tanstack/router-devtools
+```
+
+```tsx
+// src/App.tsx
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+function App() {
+  return (
+    <div>
+      <RouterProvider router={router} />
+      {/* Only shows in development */}
+      <TanStackRouterDevtools router={router} />
+    </div>
+  )
+}
+```
+
+**DevTools Features:**
+
+- **Route Tree Visualization** - See your entire route structure
+- **Current Route State** - Inspect active route data, params, and search
+- **Navigation History** - Track navigation events and timing
+- **Route Matching** - See which routes match current URL
+- **Performance Metrics** - Monitor route load times and re-renders
+
+### 2. Debug Mode Configuration
+
+Enable debug mode for detailed console logging:
+
+```tsx
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  context: {
+    // your context
+  },
+  // Enable debug mode
+  debug: true,
+})
+```
+
+### 3. Browser DevTools Setup
+
+**Add router to global scope for debugging:**
+
+```tsx
+// In development only
+if (import.meta.env.DEV) {
+  window.router = router
+}
+
+// Console debugging commands:
+// router.state - current router state
+// router.navigate() - programmatic navigation
+// router.history - navigation history
+```
+
+---
+
+## Route Matching Issues
+
+### Problem: Route Not Found (404)
+
+**Symptoms:**
+
+- Route exists but shows 404 or "Not Found"
+- Console shows route matching failures
+
+**Debugging Steps:**
+
+1. **Check Route Path Definition**
+
+```tsx
+// ❌ Common mistake - missing leading slash
+const route = createRoute({
+  path: 'about', // Should be '/about'
+  // ...
+})
+
+// ✅ Correct
+const route = createRoute({
+  path: '/about',
+  // ...
+})
+```
+
+2. **Verify Route Tree Structure**
+
+```tsx
+// Debug route tree in console
+console.log('Route tree:', router.routeTree)
+console.log('All routes:', router.routesById)
+```
+
+3. **Check Parent Route Configuration**
+
+```tsx
+// Ensure parent route is properly defined
+const childRoute = createRoute({
+  getParentRoute: () => parentRoute, // Must return correct parent
+  path: '/child',
+  // ...
+})
+```
+
+### Problem: Route Parameters Not Working
+
+**Symptoms:**
+
+- `useParams()` returns undefined or wrong values
+- Route params not being parsed correctly
+
+**Debugging Steps:**
+
+1. **Verify Parameter Syntax**
+
+```tsx
+// ❌ Wrong parameter syntax
+path: '/users/{id}' // Should use $
+
+// ✅ Correct parameter syntax
+path: '/users/$userId'
+```
+
+2. **Check Parameter Parsing**
+
+```tsx
+const route = createRoute({
+  path: '/users/$userId',
+  // Add parameter validation/parsing
+  params: {
+    parse: (params) => ({
+      userId: Number(params.userId), // Convert to number
+    }),
+    stringify: (params) => ({
+      userId: String(params.userId), // Convert back to string
+    }),
+  },
+  component: () => {
+    const { userId } = Route.useParams()
+    console.log('User ID:', userId, typeof userId) // Debug output
+    return <div>User {userId}</div>
+  },
+})
+```
+
+3. **Debug Current URL and Params**
+
+```tsx
+function DebugParams() {
+  const location = useLocation()
+  const params = Route.useParams()
+
+  console.log('Current pathname:', location.pathname)
+  console.log('Parsed params:', params)
+
+  return null // Just for debugging
+}
+```
+
+---
+
+## Navigation Issues
+
+### Problem: Navigation Not Working
+
+**Symptoms:**
+
+- Links don't navigate
+- Programmatic navigation fails silently
+- Browser URL doesn't update
+
+**Debugging Steps:**
+
+1. **Check Link Configuration**
+
+```tsx
+// ❌ Common mistakes
+<Link to="about">About</Link> // Missing leading slash
+<Link href="/about">About</Link> // Wrong prop (href instead of to)
+
+// ✅ Correct
+<Link to="/about">About</Link>
+```
+
+2. **Debug Navigation Calls**
+
+```tsx
+function NavigationDebug() {
+  const navigate = useNavigate()
+
+  const handleNavigate = () => {
+    console.log('Attempting navigation...')
+    navigate({
+      to: '/dashboard',
+      search: { tab: 'settings' },
+    })
+      .then(() => console.log('Navigation successful'))
+      .catch((err) => console.error('Navigation failed:', err))
+  }
+
+  return <button onClick={handleNavigate}>Navigate</button>
+}
+```
+
+3. **Check Router Context**
+
+```tsx
+// Ensure component is inside RouterProvider
+function ComponentWithNavigation() {
+  const router = useRouter() // Will throw error if outside provider
+  console.log('Router state:', router.state)
+
+  return <div>...</div>
+}
+```
+
+### Problem: Navigation Redirects Unexpectedly
+
+**Symptoms:**
+
+- Navigating to one route but ending up somewhere else
+- Infinite redirect loops
+
+**Debugging Steps:**
+
+1. **Check Route Guards**
+
+```tsx
+const route = createRoute({
+  path: '/dashboard',
+  beforeLoad: ({ context, location }) => {
+    console.log('Before load - location:', location.pathname)
+    console.log('Auth state:', context.auth)
+
+    if (!context.auth.isAuthenticated) {
+      console.log('Redirecting to login...')
+      throw redirect({ to: '/login' })
+    }
+  },
+  // ...
+})
+```
+
+2. **Debug Redirect Chains**
+
+```tsx
+// Add to router configuration
+const router = createRouter({
+  routeTree,
+  context: {
+    /* ... */
+  },
+  // Log all navigation events
+  onNavigate: ({ location, type }) => {
+    console.log(`Navigation (${type}):`, location.pathname)
+  },
+})
+```
+
+---
+
+## Data Loading Problems
+
+### Problem: Route Data Not Loading
+
+**Symptoms:**
+
+- `useLoaderData()` returns undefined
+- Loading states not working correctly
+- Data not refreshing
+
+**Debugging Steps:**
+
+1. **Check Loader Implementation**
+
+```tsx
+const route = createRoute({
+  path: '/posts',
+  loader: async ({ params, context }) => {
+    console.log('Loader called with params:', params)
+
+    try {
+      const data = await fetchPosts()
+      console.log('Loader data:', data)
+      return data
+    } catch (error) {
+      console.error('Loader error:', error)
+      throw error
+    }
+  },
+  component: () => {
+    const data = Route.useLoaderData()
+    console.log('Component data:', data)
+
+    return <div>{/* render data */}</div>
+  },
+})
+```
+
+2. **Debug Loading States**
+
+```tsx
+function DataLoadingDebug() {
+  const location = useLocation()
+
+  console.log('Route status:', {
+    isLoading: location.isLoading,
+    isTransitioning: location.isTransitioning,
+  })
+
+  return null
+}
+```
+
+3. **Check Loader Dependencies**
+
+```tsx
+const route = createRoute({
+  path: '/posts/$postId',
+  loader: async ({ params }) => {
+    // Loader will re-run when params change
+    console.log('Loading post:', params.postId)
+    return fetchPost(params.postId)
+  },
+  // Add dependencies for explicit re-loading
+  loaderDeps: ({ search }) => ({
+    refresh: search.refresh,
+  }),
+})
+```
+
+---
+
+## Search Parameters Issues
+
+### Problem: Search Params Not Updating
+
+**Symptoms:**
+
+- URL search params don't update
+- `useSearch()` returns stale data
+- Search validation errors
+
+**Debugging Steps:**
+
+1. **Check Search Validation Schema**
+
+```tsx
+const route = createRoute({
+  path: '/search',
+  validateSearch: (search) => {
+    console.log('Raw search params:', search)
+
+    const validated = {
+      q: (search.q as string) || '',
+      page: Number(search.page) || 1,
+    }
+
+    console.log('Validated search params:', validated)
+    return validated
+  },
+  component: () => {
+    const search = Route.useSearch()
+    console.log('Component search:', search)
+
+    return <div>Query: {search.q}</div>
+  },
+})
+```
+
+2. **Debug Search Navigation**
+
+```tsx
+function SearchDebug() {
+  const navigate = useNavigate()
+  const currentSearch = Route.useSearch()
+
+  const updateSearch = (newSearch: any) => {
+    console.log('Current search:', currentSearch)
+    console.log('New search:', newSearch)
+
+    navigate({
+      to: '.',
+      search: (prev) => {
+        const updated = { ...prev, ...newSearch }
+        console.log('Final search:', updated)
+        return updated
+      },
+    })
+  }
+
+  return (
+    <button onClick={() => updateSearch({ q: 'test' })}>Update Search</button>
+  )
+}
+```
+
+---
+
+## Performance Issues
+
+### Problem: Excessive Re-renders
+
+**Symptoms:**
+
+- Components re-rendering too often
+- Performance lag during navigation
+- Memory usage increasing
+
+**Debugging Steps:**
+
+1. **Use React DevTools Profiler**
+
+```tsx
+// Wrap your app for profiling
+import { Profiler } from 'react'
+
+function App() {
+  return (
+    <Profiler
+      id="Router"
+      onRender={(id, phase, actualDuration) => {
+        console.log(`${id} ${phase} took ${actualDuration}ms`)
+      }}
+    >
+      <RouterProvider router={router} />
+    </Profiler>
+  )
+}
+```
+
+2. **Optimize Route Subscriptions**
+
+```tsx
+// ❌ Subscribes to all search params
+function MyComponent() {
+  const search = Route.useSearch()
+  return <div>{search.someSpecificField}</div>
+}
+
+// ✅ Subscribe only to specific field
+function MyComponent() {
+  const someSpecificField = Route.useSearch({
+    select: (search) => search.someSpecificField,
+  })
+  return <div>{someSpecificField}</div>
+}
+```
+
+3. **Monitor Route State Changes**
+
+```tsx
+// Add to router configuration
+const router = createRouter({
+  routeTree,
+  context: {
+    /* ... */
+  },
+  onUpdate: (router) => {
+    console.log('Router state updated:', {
+      pathname: router.state.location.pathname,
+      isLoading: router.state.isLoading,
+      matches: router.state.matches.length,
+    })
+  },
+})
+```
+
+### Problem: Memory Leaks
+
+**Symptoms:**
+
+- Memory usage constantly increasing
+- Browser becomes slow over time
+- Route components not cleaning up
+
+**Debugging Steps:**
+
+1. **Check Component Cleanup**
+
+```tsx
+function MyComponent() {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    const subscription = someService.subscribe(setData)
+
+    // ✅ Always clean up subscriptions
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [])
+
+  return <div>{data}</div>
+}
+```
+
+2. **Monitor Route Unmounting**
+
+```tsx
+function DebuggableComponent() {
+  useEffect(() => {
+    console.log('Component mounted')
+
+    return () => {
+      console.log('Component unmounted')
+    }
+  }, [])
+
+  return <div>Content</div>
+}
+```
+
+---
+
+## TypeScript Issues
+
+### Problem: Type Errors with Router
+
+**Symptoms:**
+
+- TypeScript errors in route definitions
+- Type inference not working
+- Parameter types incorrect
+
+**Debugging Steps:**
+
+1. **Check Route Tree Type Registration**
+
+```tsx
+// Ensure this declaration exists
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
+
+2. **Debug Route Type Generation**
+
+```bash
+# Check if route types are being generated
+ls src/routeTree.gen.ts
+
+# Regenerate route types if needed
+npx @tanstack/router-cli generate
+```
+
+3. **Use Type Assertions for Debugging**
+
+```tsx
+function TypeDebugComponent() {
+  const params = Route.useParams()
+  const search = Route.useSearch()
+
+  // Add type assertions to check what TypeScript infers
+  console.log('Params type:', params as any)
+  console.log('Search type:', search as any)
+
+  return null
+}
+```
+
+---
+
+## Systematic Debugging Process
+
+### 1. Information Gathering
+
+When debugging any router issue, start by collecting this information:
+
+```tsx
+function RouterDebugInfo() {
+  const router = useRouter()
+  const location = useLocation()
+
+  useEffect(() => {
+    console.group('🐛 Router Debug Info')
+    console.log('Current pathname:', location.pathname)
+    console.log('Search params:', location.search)
+    console.log('Router state:', router.state)
+    console.log('Active matches:', router.state.matches)
+    console.log('Route tree:', router.routeTree)
+    console.groupEnd()
+  }, [location.pathname])
+
+  return null
+}
+
+// Add to your app during debugging
+;<RouterDebugInfo />
+```
+
+### 2. Isolation Testing
+
+Create minimal reproduction:
+
+```tsx
+// Minimal route for testing
+const testRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/debug',
+  component: () => {
+    console.log('Test route rendered')
+    return <div>Debug Route</div>
+  },
+})
+
+// Add to route tree temporarily
+const routeTree = rootRoute.addChildren([
+  // ... other routes
+  testRoute, // Add test route
+])
+```
+
+### 3. Step-by-Step Debugging
+
+1. **Verify basic setup** - Router provider, route tree structure
+2. **Check route definitions** - Paths, parent routes, configuration
+3. **Test navigation** - Links, programmatic navigation
+4. **Validate data flow** - Loaders, search params, context
+5. **Monitor performance** - Re-renders, memory usage
+
+---
+
+## Browser Debugging Tips
+
+### Console Commands
+
+```js
+// In browser console (when router is on window)
+
+// Current router state
+router.state
+
+// Navigate programmatically
+router.navigate({ to: '/some-path' })
+
+// Get route by path
+router.getRoute('/users/$userId')
+
+// Check if route exists
+router.buildLocation({ to: '/some-path' })
+
+// View all registered routes
+Object.keys(router.routesById)
+```
+
+### Network Tab
+
+Monitor these requests when debugging:
+
+- **Route code chunks** - Check if lazy routes are loading
+- **Loader data requests** - Verify API calls from loaders
+- **Failed requests** - Look for 404s or failed API calls
+
+### React DevTools
+
+1. **Components Tab** - Find router components and inspect props
+2. **Profiler Tab** - Identify performance bottlenecks
+3. **Search for components** - Find specific route components quickly
+
+---
+
+## Common Error Messages
+
+### "Route not found"
+
+- Check route path spelling and case sensitivity
+- Verify route is added to route tree
+- Ensure parent routes are properly configured
+
+### "Cannot read property 'useParams' of undefined"
+
+- Component is likely outside RouterProvider
+- Route might not be properly registered
+- Check if using correct Route object
+
+### "Invalid search params"
+
+- Check validateSearch schema
+- Verify search param types match schema
+- Look for required vs optional parameters
+
+### "Navigation was interrupted"
+
+- Usually caused by redirect in beforeLoad
+- Check for redirect loops
+- Verify authentication logic
+
+---
+
+## Performance Monitoring
+
+### Enable Performance Tracking
+
+```tsx
+const router = createRouter({
+  routeTree,
+  context: {
+    /* ... */
+  },
+  onUpdate: (router) => {
+    performance.mark('router-update')
+  },
+  onLoad: (router) => {
+    performance.mark('router-load')
+    performance.measure('router-load-time', 'router-update', 'router-load')
+  },
+})
+```
+
+### Monitor Route Loading Times
+
+```tsx
+const route = createRoute({
+  path: '/slow-route',
+  loader: async () => {
+    const start = performance.now()
+    const data = await fetchData()
+    const end = performance.now()
+
+    console.log(`Loader took ${end - start}ms`)
+    return data
+  },
+})
+```
+
+---
+
+## Common Next Steps
+
+After debugging router issues, you might want to:
+
+- [How to Set Up Testing](/router/how-to/setup-testing) - Add tests to prevent regressions
+- [How to Deploy to Production](/router/how-to/deploy-to-production) - Ensure issues don't occur in production
+
+
+
+
+## Related Resources
+
+- [TanStack Router DevTools](https://github.com/TanStack/router/tree/main/packages/router-devtools) - Official debugging tools
+- [React DevTools](https://react.dev/learn/react-developer-tools) - React-specific debugging
+- [Router Core Documentation](/router/overview) - Understanding router internals
diff --git a/mintlify/router/how-to/deploy-to-production.md b/mintlify/router/how-to/deploy-to-production.md
new file mode 100644
index 000000000..037095ab0
--- /dev/null
+++ b/mintlify/router/how-to/deploy-to-production.md
@@ -0,0 +1,446 @@
+---
+title: How to Deploy TanStack Router to Production
+---
+
+This guide covers deploying TanStack Router applications to popular hosting platforms.
+
+## Quick Start
+
+Single Page Applications (SPAs) need special server configuration to handle client-side routing. Configure your hosting platform to serve `index.html` for all routes, allowing TanStack Router to handle navigation.
+
+---
+
+## Netlify Deployment
+
+### 1. Create `_redirects` File
+
+Create a `public/_redirects` file (or `_redirects` in your build output):
+
+```
+/*    /index.html   200
+```
+
+### 2. Alternative: `netlify.toml`
+
+Create a `netlify.toml` file in your project root:
+
+```toml
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[build]
+  publish = "dist"
+  command = "npm run build"
+```
+
+### 3. For TanStack Start (SSR)
+
+```toml
+[build]
+  publish = ".output/public"
+  command = "npm run build"
+
+[functions]
+  directory = ".output/server"
+
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/server"
+  status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+```
+
+---
+
+## Cloudflare Pages
+
+### 1. Create `_redirects` File
+
+Create a `public/_redirects` file:
+
+```
+/*    /index.html   200
+```
+
+### 2. Alternative: `_routes.json`
+
+Create a `public/_routes.json` file for more control:
+
+```json
+{
+  "version": 1,
+  "include": ["/*"],
+  "exclude": ["/api/*"]
+}
+```
+
+### 3. For TanStack Start (SSR)
+
+Create `functions/_middleware.ts` for SSR support:
+
+```ts
+export const onRequest: PagesFunction = async (context) => {
+  // Handle SSR requests
+  return await handleSSR(context)
+}
+```
+
+### 4. Deploy via Git
+
+1. Connect your GitHub repository to Cloudflare Pages
+2. Set build settings:
+   - **Build command:** `npm run build`
+   - **Build output directory:** `dist`
+   - **Root directory:** (leave empty)
+
+### 5. Deploy via Wrangler CLI
+
+```bash
+# Install Wrangler
+npm install -g wrangler
+
+# Deploy
+wrangler pages publish dist --project-name=my-app
+```
+
+---
+
+## Vercel Deployment
+
+### 1. Create `vercel.json`
+
+Create a `vercel.json` file in your project root:
+
+```json
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
+```
+
+### 2. For TanStack Start (SSR) Applications
+
+If using TanStack Start with SSR, use this configuration instead:
+
+```json
+{
+  "functions": {
+    "app/server.ts": {
+      "runtime": "nodejs18.x"
+    }
+  },
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "/api/server"
+    }
+  ]
+}
+```
+
+### 3. Build Configuration
+
+Ensure your `package.json` has the correct build script:
+
+```json
+{
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+### 4. Deploy
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel
+```
+
+---
+
+## GitHub Pages
+
+### 1. Create `404.html`
+
+GitHub Pages requires a `404.html` file that duplicates `index.html`:
+
+```bash
+# After building
+cp dist/index.html dist/404.html
+```
+
+### 2. Update `vite.config.js`
+
+```js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  base: '/your-repo-name/', // Replace with your repository name
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    react(),
+  ],
+  build: {
+    outDir: 'dist',
+  },
+})
+```
+
+### 3. GitHub Actions Workflow
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Create 404.html
+        run: cp dist/index.html dist/404.html
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+```
+
+---
+
+## Firebase Hosting
+
+### 1. Create `firebase.json`
+
+```json
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
+```
+
+### 2. Deploy
+
+```bash
+# Install Firebase CLI
+npm install -g firebase-tools
+
+# Login and initialize
+firebase login
+firebase init hosting
+
+# Build and deploy
+npm run build
+firebase deploy
+```
+
+---
+
+## Apache Server
+
+Create a `.htaccess` file in your build output directory:
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
+
+---
+
+## Nginx
+
+Add this configuration to your Nginx server block:
+
+```nginx
+server {
+  listen 80;
+  server_name your-domain.com;
+  root /path/to/your/dist;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  # Optional: Cache static assets
+  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+    expires 1y;
+    add_header Cache-Control "public, immutable";
+  }
+}
+```
+
+---
+
+## Docker Deployment
+
+### 1. Create `Dockerfile`
+
+```dockerfile
+# Build stage
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+### 2. Create `nginx.conf`
+
+```nginx
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+
+### 3. Build and Run
+
+```bash
+docker build -t my-tanstack-app .
+docker run -p 80:80 my-tanstack-app
+```
+
+---
+
+## Production Checklist
+
+Before deploying, ensure you have:
+
+- [ ] Created hosting platform configuration file
+- [ ] Set correct base path if deploying to subdirectory
+- [ ] Configured environment variables with `VITE_` prefix
+- [ ] Tested all routes by direct URL access
+- [ ] Verified static assets load correctly
+
+---
+
+## Common Problems
+
+### 404 Errors on Page Refresh
+
+**Problem:** Routes work when navigating within the app, but refreshing the page shows 404.
+
+**Cause:** The server looks for files like `/about/index.html` which don't exist in SPAs.
+
+**Solution:** Add the configuration files shown above for your hosting platform.
+
+### App Works Locally But Breaks When Deployed
+
+**Problem:** App works in development but shows errors in production.
+
+**Solutions:**
+
+- **Subdirectory deployment:** Configure base path in `vite.config.js`:
+  ```js
+  export default defineConfig({
+    base: '/my-app/', // Match your deployment path
+  })
+  ```
+- **Build output mismatch:** Ensure build directory matches hosting config:
+  ```js
+  export default defineConfig({
+    build: {
+      outDir: 'dist', // Must match hosting platform setting
+    },
+  })
+  ```
+- **Environment variables:** Prefix with `VITE_` and rebuild:
+  ```bash
+  # .env
+  VITE_API_URL=https://api.example.com
+  ```
+
+### Assets Not Loading (CSS/JS 404s)
+
+**Problem:** App loads but styling is broken or JavaScript fails to load.
+
+**Solutions:**
+
+- Check build output directory in hosting configuration
+- Verify public path configuration in Vite
+- Ensure static file serving is properly configured
+
+---
+
+## Common Next Steps
+
+After deployment, you might want to:
+
+- [How to Set Up Basic Authentication](/router/how-to/setup-authentication) - Secure your application with auth
+- [Migrate from React Router v7](/router/how-to/migrate-from-react-router) - Complete migration guide if you're coming from React Router
+- [How to Set Up Server-Side Rendering (SSR)](/router/how-to/setup-ssr)
+
+
+
+
+## Related Resources
+
+- [Deployment Examples](https://github.com/TanStack/router/tree/main/examples) - Official examples
diff --git a/mintlify/router/how-to/drafts/build-search-filtering-systems.draft.md b/mintlify/router/how-to/drafts/build-search-filtering-systems.draft.md
new file mode 100644
index 000000000..42deded85
--- /dev/null
+++ b/mintlify/router/how-to/drafts/build-search-filtering-systems.draft.md
@@ -0,0 +1,192 @@
+# DRAFT: Build Search-Based Filtering Systems
+
+**Final Destination:** `docs/router/how-to/build-search-filtering-systems.md`  
+**Progressive Series Position:** Specialized Use Cases - Guide #9  
+**Depends On:** `setup-basic-search-params.md`, `navigate-with-search-params.md`, `validate-search-params.md`  
+**Status:** Ready for implementation - comprehensive UI patterns available
+
+---
+
+## Content Staged from navigate-with-search-params.md
+
+### Search Result Navigation
+
+Handle search result navigation with query preservation:
+
+```tsx
+import { Link, useSearch } from '@tanstack/react-router'
+
+function SearchResults() {
+  const search = useSearch({ from: '/search' })
+
+  return (
+    <div>
+      {/* Preserve search query, change view */}
+      <nav>
+        <Link search={(prev) => ({ ...prev, view: 'grid' })}>Grid View</Link>
+        <Link search={(prev) => ({ ...prev, view: 'list' })}>List View</Link>
+      </nav>
+
+      {/* Pagination with query preservation */}
+      <div>
+        {search.page > 1 && (
+          <Link search={(prev) => ({ ...prev, page: prev.page - 1 })}>
+            Previous
+          </Link>
+        )}
+
+        <Link search={(prev) => ({ ...prev, page: (prev.page || 1) + 1 })}>
+          Next
+        </Link>
+      </div>
+
+      {/* Related searches */}
+      <div>
+        Related searches:
+        {['laptops gaming', 'laptops business', 'laptops student'].map(
+          (suggestion) => (
+            <Link
+              key={suggestion}
+              search={(prev) => ({ ...prev, query: suggestion, page: 1 })}
+            >
+              {suggestion}
+            </Link>
+          ),
+        )}
+      </div>
+    </div>
+  )
+}
+```
+
+### Filter Navigation
+
+Build filtering interfaces with search parameter navigation:
+
+```tsx
+import { Link, useSearch } from '@tanstack/react-router'
+
+const categories = ['electronics', 'clothing', 'books', 'home']
+const sortOptions = [
+  { value: 'relevance', label: 'Relevance' },
+  { value: 'price-asc', label: 'Price: Low to High' },
+  { value: 'price-desc', label: 'Price: High to Low' },
+  { value: 'rating', label: 'Customer Rating' },
+]
+
+function FilterNavigation() {
+  const search = useSearch({ from: '/products' })
+
+  return (
+    <aside>
+      {/* Category filters */}
+      <div>
+        <h3>Categories</h3>
+        {categories.map((category) => (
+          <Link
+            key={category}
+            search={(prev) => ({
+              ...prev,
+              category: prev.category === category ? undefined : category,
+              page: 1,
+            })}
+            className={search.category === category ? 'active' : ''}
+          >
+            {category}
+          </Link>
+        ))}
+      </div>
+
+      {/* Sort options */}
+      <div>
+        <h3>Sort By</h3>
+        {sortOptions.map((option) => (
+          <Link
+            key={option.value}
+            search={(prev) => ({ ...prev, sort: option.value, page: 1 })}
+            className={search.sort === option.value ? 'active' : ''}
+          >
+            {option.label}
+          </Link>
+        ))}
+      </div>
+
+      {/* Clear all filters */}
+      <Link
+        search={(prev) => {
+          const { category, sort, minPrice, maxPrice, ...rest } = prev
+          return rest
+        }}
+      >
+        Clear All Filters
+      </Link>
+    </aside>
+  )
+}
+```
+
+### Programmatic Search Controls
+
+Navigate programmatically with search parameter updates:
+
+```tsx
+import { useNavigate } from '@tanstack/react-router'
+
+function SearchControls() {
+  const navigate = useNavigate()
+
+  const handleSortChange = (sortBy: string) => {
+    navigate({
+      search: (prev) => ({ ...prev, sort: sortBy, page: 1 }),
+    })
+  }
+
+  const handleClearFilters = () => {
+    navigate({
+      search: (prev) => {
+        const { category, minPrice, maxPrice, ...rest } = prev
+        return rest
+      },
+    })
+  }
+
+  return (
+    <div>
+      <select onChange={(e) => handleSortChange(e.target.value)}>
+        <option value="relevance">Sort by Relevance</option>
+        <option value="price-asc">Price: Low to High</option>
+        <option value="price-desc">Price: High to Low</option>
+      </select>
+
+      <button onClick={handleClearFilters}>Clear Filters</button>
+    </div>
+  )
+}
+```
+
+---
+
+## Implementation Notes
+
+### Additional Content Needed:
+
+- [ ] Complete e-commerce filtering example
+- [ ] Advanced filter combinations (price ranges, multi-select)
+- [ ] Filter state persistence and sharing
+- [ ] Search result highlighting and sorting
+- [ ] Infinite scroll pagination patterns
+- [ ] Filter URL state management best practices
+- [ ] Accessibility considerations for filter UIs
+- [ ] Mobile-responsive filter patterns
+
+### Cross-References to Add:
+
+- Link to `setup-basic-search-params.md` for foundation
+- Link to `navigate-with-search-params.md` for navigation patterns
+- Link to `validate-search-params.md` for filter validation
+- Forward link to `search-params-with-data-loading.md` for data integration
+
+### README Update Required:
+
+- [ ] Mark guide as completed in progressive series
+- [ ] Uncomment "Common Next Steps" in related guides
diff --git a/mintlify/router/how-to/drafts/index.md b/mintlify/router/how-to/drafts/index.md
new file mode 100644
index 000000000..5c00005ad
--- /dev/null
+++ b/mintlify/router/how-to/drafts/index.md
@@ -0,0 +1,64 @@
+# How-To Guide Drafts
+
+This directory contains draft content for upcoming how-to guides in the Progressive Search Parameters Series. Each draft file contains:
+
+- **Metadata** about the final destination and dependencies
+- **Staged content** extracted from other guides to avoid scope creep
+- **Implementation notes** for future development
+- **Cross-reference planning** for proper guide linking
+
+## File Naming Convention
+
+- `{guide-name}.draft.md` - Draft content for upcoming guides
+- Clear metadata header with destination path and status
+
+## Current Drafts
+
+### ⏳ Ready for Implementation (Substantial Content Available)
+
+1. **`validate-search-params.draft.md`**
+   - **Destination:** `validate-search-params.md`
+   - **Position:** Intermediate Level - Guide #3
+   - **Content:** Schema validation, type safety, error handling
+
+2. **`build-search-filtering-systems.draft.md`**
+   - **Destination:** `build-search-filtering-systems.md`
+   - **Position:** Specialized Use Cases - Guide #9
+   - **Content:** Complete filtering UIs, search results, pagination
+
+3. **`search-params-in-forms.draft.md`**
+   - **Destination:** `search-params-in-forms.md`
+   - **Position:** Specialized Use Cases - Guide #10
+   - **Content:** Form synchronization, state management
+
+4. **`optimize-search-param-performance.draft.md`**
+   - **Destination:** `optimize-search-param-performance.md`
+   - **Position:** Advanced Level - Guide #7
+   - **Content:** Performance optimization, memoization patterns
+
+## Implementation Workflow
+
+When implementing a guide from a draft:
+
+1. **Copy the staged content** to the final destination
+2. **Expand with additional examples** specific to the guide's focus
+3. **Add comprehensive troubleshooting** for the domain
+4. **Update cross-references** in related guides
+5. **Update the main README** to mark guide as completed
+6. **Delete the draft file** once fully implemented
+
+## Benefits of This System
+
+- **Prevents scope creep** in individual guides
+- **Preserves valuable content** during refactoring
+- **Enables focused guide development**
+- **Maintains clear progression** through the series
+- **Facilitates parallel development** of multiple guides
+
+## Content Sources
+
+Most staged content originates from:
+
+- `navigate-with-search-params.md` - Content moved to maintain focus
+- Implementation planning sessions
+- User feedback and common questions
diff --git a/mintlify/router/how-to/drafts/optimize-search-param-performance.draft.md b/mintlify/router/how-to/drafts/optimize-search-param-performance.draft.md
new file mode 100644
index 000000000..ad0257d3f
--- /dev/null
+++ b/mintlify/router/how-to/drafts/optimize-search-param-performance.draft.md
@@ -0,0 +1,90 @@
+# DRAFT: Optimize Search Parameter Performance
+
+**Final Destination:** `docs/router/how-to/optimize-search-param-performance.md`  
+**Progressive Series Position:** Advanced Level (Power User Patterns) - Guide #7  
+**Depends On:** `setup-basic-search-params.md`, `navigate-with-search-params.md`  
+**Status:** Ready for implementation - performance patterns available
+
+---
+
+## Content Staged from navigate-with-search-params.md
+
+### Performance Issues with Functional Updates
+
+**Problem:** Complex functional updates cause unnecessary re-renders.
+
+```tsx
+// ❌ Wrong - complex computation in render
+<Link search={(prev) => {
+  // Expensive computation on every render
+  const result = expensiveCalculation(prev)
+  return { ...prev, computed: result }
+}}>
+  Update
+</Link>
+
+// ✅ Correct - memoize or use callback
+const updateSearch = useCallback((prev) => {
+  const result = expensiveCalculation(prev)
+  return { ...prev, computed: result }
+}, [])
+
+<Link search={updateSearch}>Update</Link>
+```
+
+### Navigation During Render
+
+**Problem:** Calling navigate during component render causes infinite loops.
+
+```tsx
+function ProblematicComponent() {
+  const navigate = useNavigate()
+
+  // ❌ Wrong - navigate during render
+  if (someCondition) {
+    navigate({ search: { redirect: true } })
+  }
+
+  return <div>Content</div>
+}
+
+function FixedComponent() {
+  const navigate = useNavigate()
+
+  // ✅ Correct - navigate in effect
+  useEffect(() => {
+    if (someCondition) {
+      navigate({ search: { redirect: true } })
+    }
+  }, [someCondition, navigate])
+
+  return <div>Content</div>
+}
+```
+
+---
+
+## Implementation Notes
+
+### Additional Content Needed:
+
+- [ ] Search parameter selectors to prevent unnecessary re-renders
+- [ ] Debouncing search input updates
+- [ ] Memoization strategies for expensive search computations
+- [ ] React.memo usage with search parameters
+- [ ] useMemo patterns for derived search state
+- [ ] Search parameter batching techniques
+- [ ] Performance monitoring and profiling search params
+- [ ] Bundle size optimization strategies
+
+### Cross-References to Add:
+
+- Link to `setup-basic-search-params.md` for foundation
+- Link to `navigate-with-search-params.md` for navigation patterns
+- Link to `search-params-in-forms.md` for debouncing forms
+- Forward link to `debug-search-param-issues.md` for debugging performance
+
+### README Update Required:
+
+- [ ] Mark guide as completed in progressive series
+- [ ] Uncomment "Common Next Steps" in related guides
diff --git a/mintlify/router/how-to/drafts/search-params-in-forms.draft.md b/mintlify/router/how-to/drafts/search-params-in-forms.draft.md
new file mode 100644
index 000000000..5deeb290c
--- /dev/null
+++ b/mintlify/router/how-to/drafts/search-params-in-forms.draft.md
@@ -0,0 +1,157 @@
+# DRAFT: Handle Search Parameters in Forms
+
+**Final Destination:** `docs/router/how-to/search-params-in-forms.md`  
+**Progressive Series Position:** Specialized Use Cases - Guide #10  
+**Depends On:** `setup-basic-search-params.md`, `navigate-with-search-params.md`, `validate-search-params.md`  
+**Status:** Ready for implementation - form synchronization patterns available
+
+---
+
+## Content Staged from navigate-with-search-params.md
+
+### Navigation with State Synchronization
+
+Keep component state in sync with URL search parameters:
+
+```tsx
+import { useState, useEffect } from 'react'
+import { useNavigate, useSearch } from '@tanstack/react-router'
+
+function SynchronizedForm() {
+  const navigate = useNavigate()
+  const search = useSearch({ from: '/products' })
+
+  // Local state synced with URL
+  const [localFilters, setLocalFilters] = useState({
+    minPrice: search.minPrice || 0,
+    maxPrice: search.maxPrice || 1000,
+    inStock: search.inStock || false,
+  })
+
+  // Update local state when URL changes
+  useEffect(() => {
+    setLocalFilters({
+      minPrice: search.minPrice || 0,
+      maxPrice: search.maxPrice || 1000,
+      inStock: search.inStock || false,
+    })
+  }, [search.minPrice, search.maxPrice, search.inStock])
+
+  const applyFilters = () => {
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        ...localFilters,
+        page: 1, // Reset pagination
+      }),
+    })
+  }
+
+  const resetFilters = () => {
+    const defaultFilters = { minPrice: 0, maxPrice: 1000, inStock: false }
+    setLocalFilters(defaultFilters)
+
+    navigate({
+      search: (prev) => {
+        const { minPrice, maxPrice, inStock, ...rest } = prev
+        return rest
+      },
+    })
+  }
+
+  return (
+    <div>
+      <label>
+        Min Price:
+        <input
+          type="number"
+          value={localFilters.minPrice}
+          onChange={(e) =>
+            setLocalFilters((prev) => ({
+              ...prev,
+              minPrice: parseInt(e.target.value) || 0,
+            }))
+          }
+        />
+      </label>
+
+      <label>
+        Max Price:
+        <input
+          type="number"
+          value={localFilters.maxPrice}
+          onChange={(e) =>
+            setLocalFilters((prev) => ({
+              ...prev,
+              maxPrice: parseInt(e.target.value) || 1000,
+            }))
+          }
+        />
+      </label>
+
+      <label>
+        <input
+          type="checkbox"
+          checked={localFilters.inStock}
+          onChange={(e) =>
+            setLocalFilters((prev) => ({
+              ...prev,
+              inStock: e.target.checked,
+            }))
+          }
+        />
+        In Stock Only
+      </label>
+
+      <button onClick={applyFilters}>Apply Filters</button>
+      <button onClick={resetFilters}>Reset</button>
+    </div>
+  )
+}
+```
+
+### Form with Search Parameter Validation
+
+```tsx
+const handleFormSubmit = (formData: FormData) => {
+  const query = formData.get('query') as string
+  const page = parseInt(formData.get('page') as string) || 1
+
+  safeNavigate({ query, page })
+}
+
+return (
+  <form action={handleFormSubmit}>
+    <input name="query" placeholder="Search..." required />
+    <input name="page" type="number" defaultValue="1" />
+    <button type="submit">Search</button>
+  </form>
+)
+```
+
+---
+
+## Implementation Notes
+
+### Additional Content Needed:
+
+- [ ] Uncontrolled form patterns with search params
+- [ ] Controlled form patterns with real-time updates
+- [ ] Form library integration (React Hook Form, Formik)
+- [ ] Debounced form updates to URL
+- [ ] Form reset and default value handling
+- [ ] Multi-step form with URL state
+- [ ] File upload forms with search state
+- [ ] Form validation error handling with URL feedback
+
+### Cross-References to Add:
+
+- Link to `setup-basic-search-params.md` for foundation
+- Link to `navigate-with-search-params.md` for navigation patterns
+- Link to `validate-search-params.md` for form validation
+- Forward link to `optimize-search-param-performance.md` for debouncing
+
+### README Update Required:
+
+- [ ] Mark guide as completed in progressive series
+- [ ] Uncomment "Common Next Steps" in related guides
diff --git a/mintlify/router/how-to/index.md b/mintlify/router/how-to/index.md
new file mode 100644
index 000000000..1b430e519
--- /dev/null
+++ b/mintlify/router/how-to/index.md
@@ -0,0 +1,82 @@
+# How-To Guides
+
+This directory contains focused, step-by-step instructions for common TanStack Router tasks. Each guide is designed to be:
+
+- **Task-focused**: Covers one specific goal from start to finish
+- **Self-contained**: All necessary steps included, no prerequisites assumed
+- **Copy-paste ready**: Working code examples you can use immediately
+- **Problem-solving oriented**: Addresses real-world scenarios and common issues
+
+## Available Guides
+
+- [Install TanStack Router](/router/how-to/install) - Basic installation steps
+- [Use Environment Variables](/router/how-to/use-environment-variables) - Configure and use environment variables across different bundlers
+- [Deploy to Production](/router/how-to/deploy-to-production) - Deploy your app to hosting platforms
+- [Set Up Server-Side Rendering (SSR)](/router/how-to/setup-ssr) - Implement SSR with TanStack Router
+- [Migrate from React Router v7](/router/how-to/migrate-from-react-router) - Complete migration guide from React Router v7
+
+### Authentication
+
+- [Set Up Basic Authentication](/router/how-to/setup-authentication) - Implement basic auth with React Context
+- [Integrate Authentication Providers](/router/how-to/setup-auth-providers) - Use Auth0, Clerk, or Supabase
+- [Set Up Role-Based Access Control](/router/how-to/setup-rbac) - Add permission-based routing
+
+### Testing & Debugging
+
+- [Set Up Testing with Code-Based Routing](/router/how-to/setup-testing) - Comprehensive testing setup for manually defined routes
+- [Test File-Based Routing](/router/how-to/test-file-based-routing) - Specific patterns for testing file-based routing applications
+- [Debug Router Issues](/router/how-to/debug-router-issues) - Troubleshoot common routing problems and performance issues
+
+### UI Library Integration
+
+- [Integrate with Shadcn/ui](/router/how-to/integrate-shadcn-ui) - Set up Shadcn/ui components with animations and styling
+- [Integrate with Material-UI (MUI)](/router/how-to/integrate-material-ui) - Configure MUI components with proper theming and TypeScript
+- [Integrate with Framer Motion](/router/how-to/integrate-framer-motion) - Add smooth animations and transitions to your routes
+- [Integrate with Chakra UI](/router/how-to/integrate-chakra-ui) - Build responsive, accessible UIs with Chakra UI components
+
+### Search Parameters & URL State (Progressive Series)
+
+**Foundation Level (Start Here):**
+
+- [x] [Set Up Basic Search Parameters](/router/how-to/setup-basic-search-params) - Create type-safe search validation and reading
+- [x] [Navigate with Search Parameters](/router/how-to/navigate-with-search-params) - Update and manage search params with Links and navigation
+
+**Intermediate Level (Common Patterns):**
+
+- [x] [Validate Search Parameters with Schemas](/router/how-to/validate-search-params) - Use schema validation libraries for robust validation and type safety
+- [x] [Work with Arrays, Objects, and Dates](/router/how-to/arrays-objects-dates-search-params) - Handle arrays, objects, dates, and nested data structures
+- [x] [Share Search Parameters Across Routes](/router/how-to/share-search-params-across-routes) - Inherit and manage search params across route hierarchies
+
+**Advanced Level (Power User Patterns):**
+
+- [ ] Build Advanced Search Parameter Middleware - Create custom middleware for search param processing
+- [ ] Optimize Search Parameter Performance - Minimize re-renders and improve performance with selectors
+- [ ] Customize Search Parameter Serialization - Implement custom serialization for compression and compatibility
+
+**Specialized Use Cases:**
+
+- [ ] Build Search-Based Filtering Systems - Create complex filtering UIs with URL state
+- [ ] Handle Search Parameters in Forms - Synchronize form state with URL search parameters
+- [ ] Debug Search Parameter Issues - Troubleshoot common search param problems and performance issues
+- [ ] Use Search Parameters with Data Loading - Integrate search params with loaders and data fetching
+
+## Using These Guides
+
+Each guide follows a consistent structure:
+
+1. **Quick Start** - Brief overview of what you'll accomplish
+2. **Step-by-step instructions** - Platform-specific or scenario-specific guidance
+3. **Production checklist** - Verification steps (where applicable)
+4. **Common problems** - Troubleshooting for typical issues
+5. **Common next steps** - Optional related tasks you might want to tackle
+
+## Contributing
+
+When adding new how-to guides:
+
+1. Focus on a single, well-defined task
+2. Use clear headings and numbered steps
+3. Include complete, working code examples
+4. Address the most frequent problems at the end
+5. Comment out "Common next steps" links until those guides are created
+6. In "Related Resources", link to specific relevant resources, not generic documentation
diff --git a/mintlify/router/how-to/install.md b/mintlify/router/how-to/install.md
new file mode 100644
index 000000000..f325e0b50
--- /dev/null
+++ b/mintlify/router/how-to/install.md
@@ -0,0 +1,47 @@
+---
+title: How to Install TanStack Router
+---
+
+## Prerequisites
+
+- React 18.x.x or 19.x.x
+- ReactDOM 18.x.x or 19.x.x with `createRoot` support
+- TypeScript 5.3.x or higher (recommended)
+
+## Installation Steps
+
+1. **Install the package**
+
+   Choose your package manager:
+
+   ```sh
+   npm install @tanstack/react-router
+   ```
+
+   ```sh
+   pnpm add @tanstack/react-router
+   ```
+
+   ```sh
+   yarn add @tanstack/react-router
+   ```
+
+   ```sh
+   bun add @tanstack/react-router
+   ```
+
+   ```sh
+   deno add npm:@tanstack/react-router
+   ```
+
+2. **Verify installation**
+
+   Check that the package appears in your `package.json`:
+
+   ```json
+   {
+     "dependencies": {
+       "@tanstack/react-router": "^x.x.x"
+     }
+   }
+   ```
diff --git a/mintlify/router/how-to/integrate-chakra-ui.md b/mintlify/router/how-to/integrate-chakra-ui.md
new file mode 100644
index 000000000..28113bca2
--- /dev/null
+++ b/mintlify/router/how-to/integrate-chakra-ui.md
@@ -0,0 +1,823 @@
+---
+title: How to Integrate TanStack Router with Chakra UI
+---
+
+This guide covers setting up Chakra UI with TanStack Router, including theme configuration and creating responsive, accessible components.
+
+## Quick Start
+
+**Time Required:** 30-40 minutes  
+**Difficulty:** Beginner to Intermediate  
+**Prerequisites:** Existing TanStack Router project
+
+### What You'll Accomplish
+
+- Install and configure Chakra UI with TanStack Router
+- Set up theme provider and custom theming
+- Create type-safe router-compatible Chakra components
+- Implement responsive navigation patterns
+- Build accessible UI components with router integration
+
+---
+
+## Installation and Setup
+
+### Step 1: Install Chakra UI Dependencies
+
+```bash
+npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
+```
+
+### Step 2: Set Up Chakra Provider
+
+```tsx
+// src/components/chakra-provider.tsx
+import { ChakraProvider, extendTheme, type ThemeConfig } from '@chakra-ui/react'
+import { ReactNode } from 'react'
+
+// Extend the theme with custom colors and configurations
+const config: ThemeConfig = {
+  initialColorMode: 'light',
+  useSystemColorMode: true,
+}
+
+const theme = extendTheme({
+  config,
+  colors: {
+    brand: {
+      50: '#e3f2fd',
+      100: '#bbdefb',
+      200: '#90caf9',
+      300: '#64b5f6',
+      400: '#42a5f5',
+      500: '#2196f3',
+      600: '#1e88e5',
+      700: '#1976d2',
+      800: '#1565c0',
+      900: '#0d47a1',
+    },
+  },
+  fonts: {
+    heading: 'Inter, sans-serif',
+    body: 'Inter, sans-serif',
+  },
+  components: {
+    Button: {
+      defaultProps: {
+        colorScheme: 'brand',
+      },
+    },
+    Link: {
+      baseStyle: {
+        _hover: {
+          textDecoration: 'none',
+        },
+      },
+    },
+  },
+})
+
+interface ChakraAppProviderProps {
+  children: ReactNode
+}
+
+export function ChakraAppProvider({ children }: ChakraAppProviderProps) {
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>
+}
+```
+
+### Step 3: Update Root Route
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { ChakraAppProvider } from '@/components/chakra-provider'
+
+export const Route = createRootRoute({
+  component: () => (
+    <ChakraAppProvider>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </ChakraAppProvider>
+  ),
+})
+```
+
+---
+
+## Creating Router-Compatible Components
+
+### Step 1: Create Router-Compatible Chakra Components
+
+```tsx
+// src/components/ui/chakra-router-link.tsx
+import { createLink } from '@tanstack/react-router'
+import { Link as ChakraLink, Button, IconButton } from '@chakra-ui/react'
+import { forwardRef } from 'react'
+
+// Router-compatible Chakra Link
+export const RouterLink = createLink(
+  forwardRef<HTMLAnchorElement, any>((props, ref) => {
+    return <ChakraLink ref={ref} {...props} />
+  }),
+)
+
+// Router-compatible Chakra Button
+export const RouterButton = createLink(
+  forwardRef<HTMLButtonElement, any>((props, ref) => {
+    return <Button ref={ref} as="button" {...props} />
+  }),
+)
+
+// Router-compatible Chakra IconButton
+export const RouterIconButton = createLink(
+  forwardRef<HTMLButtonElement, any>((props, ref) => {
+    return <IconButton ref={ref} as="button" {...props} />
+  }),
+)
+```
+
+### Step 2: Create Navigation Components
+
+```tsx
+// src/components/navigation/chakra-nav.tsx
+import { useMatchRoute } from '@tanstack/react-router'
+import {
+  Box,
+  Flex,
+  HStack,
+  IconButton,
+  useDisclosure,
+  useColorModeValue,
+  Stack,
+  Collapse,
+} from '@chakra-ui/react'
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
+import { RouterLink } from '@/components/ui/chakra-router-link'
+
+interface NavItem {
+  label: string
+  to: string
+  exact?: boolean
+}
+
+interface ChakraNavProps {
+  items: NavItem[]
+  brand?: string
+  brandTo?: string
+}
+
+export function ChakraNav({
+  items,
+  brand = 'Logo',
+  brandTo = '/',
+}: ChakraNavProps) {
+  const { isOpen, onToggle } = useDisclosure()
+  const matchRoute = useMatchRoute()
+
+  return (
+    <Box>
+      <Flex
+        bg={useColorModeValue('white', 'gray.800')}
+        color={useColorModeValue('gray.600', 'white')}
+        minH="60px"
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        borderBottom={1}
+        borderStyle="solid"
+        borderColor={useColorModeValue('gray.200', 'gray.900')}
+        align="center"
+      >
+        <Flex
+          flex={{ base: 1, md: 'auto' }}
+          ml={{ base: -2 }}
+          display={{ base: 'flex', md: 'none' }}
+        >
+          <IconButton
+            onClick={onToggle}
+            icon={
+              isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
+            }
+            variant="ghost"
+            aria-label="Toggle Navigation"
+          />
+        </Flex>
+
+        <Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
+          <RouterLink
+            to={brandTo}
+            fontFamily="heading"
+            fontWeight="bold"
+            fontSize="xl"
+            color={useColorModeValue('gray.800', 'white')}
+          >
+            {brand}
+          </RouterLink>
+
+          <Flex display={{ base: 'none', md: 'flex' }} ml={10}>
+            <DesktopNav items={items} />
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Collapse in={isOpen} animateOpacity>
+        <MobileNav items={items} />
+      </Collapse>
+    </Box>
+  )
+}
+
+function DesktopNav({ items }: { items: NavItem[] }) {
+  const matchRoute = useMatchRoute()
+  const linkColor = useColorModeValue('gray.600', 'gray.200')
+  const linkHoverColor = useColorModeValue('gray.800', 'white')
+
+  return (
+    <HStack spacing={4}>
+      {items.map((item) => {
+        const isActive = matchRoute({ to: item.to, fuzzy: !item.exact })
+
+        return (
+          <RouterLink
+            key={item.to}
+            to={item.to}
+            p={2}
+            fontSize="sm"
+            fontWeight={isActive ? 'bold' : 'medium'}
+            color={isActive ? 'brand.500' : linkColor}
+            _hover={{
+              textDecoration: 'none',
+              color: linkHoverColor,
+            }}
+          >
+            {item.label}
+          </RouterLink>
+        )
+      })}
+    </HStack>
+  )
+}
+
+function MobileNav({ items }: { items: NavItem[] }) {
+  const matchRoute = useMatchRoute()
+
+  return (
+    <Stack
+      bg={useColorModeValue('white', 'gray.800')}
+      p={4}
+      display={{ md: 'none' }}
+    >
+      {items.map((item) => {
+        const isActive = matchRoute({ to: item.to, fuzzy: !item.exact })
+
+        return (
+          <RouterLink
+            key={item.to}
+            to={item.to}
+            py={2}
+            fontWeight={isActive ? 'bold' : 'medium'}
+            color={
+              isActive ? 'brand.500' : useColorModeValue('gray.600', 'gray.200')
+            }
+            _hover={{
+              textDecoration: 'none',
+            }}
+          >
+            {item.label}
+          </RouterLink>
+        )
+      })}
+    </Stack>
+  )
+}
+```
+
+### Step 3: Create Breadcrumb Navigation
+
+```tsx
+// src/components/navigation/chakra-breadcrumb.tsx
+import { useRouter } from '@tanstack/react-router'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from '@chakra-ui/react'
+import { ChevronRightIcon } from '@chakra-ui/icons'
+import { RouterLink } from '@/components/ui/chakra-router-link'
+
+interface BreadcrumbConfig {
+  [key: string]: string
+}
+
+interface ChakraBreadcrumbProps {
+  config?: BreadcrumbConfig
+  separator?: React.ReactElement
+}
+
+export function ChakraBreadcrumb({
+  config = {},
+  separator = <ChevronRightIcon color="gray.500" />,
+}: ChakraBreadcrumbProps) {
+  const router = useRouter()
+  const pathSegments = router.state.location.pathname.split('/').filter(Boolean)
+
+  if (pathSegments.length === 0) return null
+
+  const breadcrumbItems = pathSegments.map((segment, index) => {
+    const path = '/' + pathSegments.slice(0, index + 1).join('/')
+    const label =
+      config[segment] || segment.charAt(0).toUpperCase() + segment.slice(1)
+    const isLast = index === pathSegments.length - 1
+
+    return {
+      path,
+      label,
+      isLast,
+    }
+  })
+
+  return (
+    <Breadcrumb spacing="8px" separator={separator}>
+      <BreadcrumbItem>
+        <BreadcrumbLink as={RouterLink} to="/">
+          Home
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      {breadcrumbItems.map(({ path, label, isLast }) => (
+        <BreadcrumbItem key={path} isCurrentPage={isLast}>
+          <BreadcrumbLink
+            as={isLast ? 'span' : RouterLink}
+            to={isLast ? undefined : path}
+            color={isLast ? 'gray.500' : undefined}
+          >
+            {label}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  )
+}
+```
+
+---
+
+## Responsive Design Patterns
+
+### Step 1: Create Responsive Layout Component
+
+```tsx
+// src/components/layout/chakra-layout.tsx
+import { ReactNode } from 'react'
+import {
+  Box,
+  Container,
+  Flex,
+  useColorModeValue,
+  VStack,
+  useBreakpointValue,
+} from '@chakra-ui/react'
+import { ChakraNav } from '@/components/navigation/chakra-nav'
+import { ChakraBreadcrumb } from '@/components/navigation/chakra-breadcrumb'
+
+interface ChakraLayoutProps {
+  children: ReactNode
+  showBreadcrumb?: boolean
+  maxWidth?: string
+}
+
+const navItems = [
+  { label: 'Home', to: '/', exact: true },
+  { label: 'Posts', to: '/posts' },
+  { label: 'About', to: '/about' },
+  { label: 'Contact', to: '/contact' },
+]
+
+export function ChakraLayout({
+  children,
+  showBreadcrumb = true,
+  maxWidth = 'container.xl',
+}: ChakraLayoutProps) {
+  const containerPadding = useBreakpointValue({ base: 4, md: 6 })
+
+  return (
+    <Box minH="100vh" bg={useColorModeValue('gray.50', 'gray.900')}>
+      <ChakraNav items={navItems} brand="My App" />
+
+      <Container maxW={maxWidth} py={containerPadding}>
+        {showBreadcrumb && (
+          <Box mb={6}>
+            <ChakraBreadcrumb />
+          </Box>
+        )}
+
+        <Box>{children}</Box>
+      </Container>
+    </Box>
+  )
+}
+```
+
+### Step 2: Create Responsive Card Grid
+
+```tsx
+// src/components/ui/chakra-card-grid.tsx
+import { ReactNode } from 'react'
+import { SimpleGrid, Box, useBreakpointValue } from '@chakra-ui/react'
+
+interface ChakraCardGridProps {
+  children: ReactNode
+  minChildWidth?: string
+  spacing?: number
+}
+
+export function ChakraCardGrid({
+  children,
+  minChildWidth = '300px',
+  spacing = 6,
+}: ChakraCardGridProps) {
+  const columns = useBreakpointValue({
+    base: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+  })
+
+  return (
+    <SimpleGrid
+      columns={columns}
+      spacing={spacing}
+      minChildWidth={minChildWidth}
+    >
+      {children}
+    </SimpleGrid>
+  )
+}
+```
+
+---
+
+## Complete Usage Examples
+
+### Step 1: Posts List Page
+
+```tsx
+// src/routes/posts/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Text,
+  Badge,
+  VStack,
+  HStack,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { ChakraLayout } from '@/components/layout/chakra-layout'
+import { ChakraCardGrid } from '@/components/ui/chakra-card-grid'
+import { RouterLink, RouterButton } from '@/components/ui/chakra-router-link'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsPage,
+})
+
+function PostsPage() {
+  const posts = [
+    {
+      id: '1',
+      title: 'Getting Started with TanStack Router',
+      excerpt: 'Learn how to build type-safe routing in React applications.',
+      category: 'Tutorial',
+      readTime: '5 min read',
+    },
+    {
+      id: '2',
+      title: 'Chakra UI Best Practices',
+      excerpt: 'Tips and tricks for building beautiful UIs with Chakra UI.',
+      category: 'Design',
+      readTime: '8 min read',
+    },
+  ]
+
+  return (
+    <ChakraLayout>
+      <VStack spacing={8} align="stretch">
+        <Box>
+          <Heading size="xl" mb={4}>
+            Blog Posts
+          </Heading>
+          <Text color={useColorModeValue('gray.600', 'gray.400')}>
+            Discover our latest articles and tutorials
+          </Text>
+        </Box>
+
+        <Box>
+          <RouterButton colorScheme="brand" mb={6}>
+            Create New Post
+          </RouterButton>
+
+          <ChakraCardGrid>
+            {posts.map((post) => (
+              <PostCard key={post.id} post={post} />
+            ))}
+          </ChakraCardGrid>
+        </Box>
+      </VStack>
+    </ChakraLayout>
+  )
+}
+
+function PostCard({ post }: { post: any }) {
+  const cardBg = useColorModeValue('white', 'gray.800')
+  const cardBorder = useColorModeValue('gray.200', 'gray.700')
+
+  return (
+    <Card
+      bg={cardBg}
+      borderColor={cardBorder}
+      borderWidth="1px"
+      _hover={{
+        shadow: 'lg',
+        transform: 'translateY(-2px)',
+        transition: 'all 0.2s',
+      }}
+    >
+      <CardHeader pb={3}>
+        <HStack justify="space-between" align="start">
+          <Badge colorScheme="brand" variant="subtle">
+            {post.category}
+          </Badge>
+          <Text fontSize="sm" color="gray.500">
+            {post.readTime}
+          </Text>
+        </HStack>
+      </CardHeader>
+
+      <CardBody pt={0}>
+        <VStack align="start" spacing={3}>
+          <RouterLink to="/posts/$postId" params={{ postId: post.id }}>
+            <Heading size="md" _hover={{ color: 'brand.500' }}>
+              {post.title}
+            </Heading>
+          </RouterLink>
+
+          <Text color={useColorModeValue('gray.600', 'gray.400')}>
+            {post.excerpt}
+          </Text>
+
+          <RouterButton
+            to="/posts/$postId"
+            params={{ postId: post.id }}
+            variant="ghost"
+            colorScheme="brand"
+            size="sm"
+            alignSelf="flex-start"
+          >
+            Read More →
+          </RouterButton>
+        </VStack>
+      </CardBody>
+    </Card>
+  )
+}
+```
+
+### Step 2: Post Detail Page
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  Box,
+  Heading,
+  Text,
+  VStack,
+  HStack,
+  Button,
+  useColorModeValue,
+  Divider,
+  Tag,
+  TagLabel,
+} from '@chakra-ui/react'
+import { ArrowBackIcon, EditIcon, DeleteIcon } from '@chakra-ui/icons'
+import { ChakraLayout } from '@/components/layout/chakra-layout'
+import { RouterButton, RouterLink } from '@/components/ui/chakra-router-link'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostPage,
+})
+
+function PostPage() {
+  const { postId } = Route.useParams()
+  const textColor = useColorModeValue('gray.600', 'gray.300')
+
+  return (
+    <ChakraLayout>
+      <VStack spacing={8} align="stretch">
+        {/* Back Navigation */}
+        <Box>
+          <RouterLink
+            to="/posts"
+            color="brand.500"
+            _hover={{ textDecoration: 'none' }}
+          >
+            <HStack spacing={2}>
+              <ArrowBackIcon />
+              <Text>Back to Posts</Text>
+            </HStack>
+          </RouterLink>
+        </Box>
+
+        {/* Post Header */}
+        <VStack spacing={4} align="start">
+          <Heading size="2xl">Understanding TanStack Router</Heading>
+
+          <HStack spacing={3}>
+            <Tag colorScheme="brand">
+              <TagLabel>Tutorial</TagLabel>
+            </Tag>
+            <Text color={textColor}>March 15, 2024</Text>
+            <Text color={textColor}>•</Text>
+            <Text color={textColor}>5 min read</Text>
+          </HStack>
+
+          <Divider />
+        </VStack>
+
+        {/* Post Content */}
+        <Box>
+          <VStack spacing={4} align="start">
+            <Text color={textColor} lineHeight="tall">
+              This is the detailed content of post {postId}. In this
+              comprehensive guide, we'll explore how to integrate TanStack
+              Router with Chakra UI to create beautiful, accessible, and
+              responsive web applications.
+            </Text>
+
+            <Text color={textColor} lineHeight="tall">
+              Chakra UI provides a simple, modular, and accessible component
+              library that gives you the building blocks you need to build React
+              applications with speed.
+            </Text>
+          </VStack>
+        </Box>
+
+        {/* Action Buttons */}
+        <HStack spacing={4}>
+          <RouterButton
+            to="/posts/$postId/edit"
+            params={{ postId }}
+            leftIcon={<EditIcon />}
+            colorScheme="brand"
+            variant="outline"
+          >
+            Edit Post
+          </RouterButton>
+
+          <Button leftIcon={<DeleteIcon />} colorScheme="red" variant="outline">
+            Delete Post
+          </Button>
+        </HStack>
+      </VStack>
+    </ChakraLayout>
+  )
+}
+```
+
+---
+
+## Common Problems
+
+### Theme Provider Issues
+
+**Problem:** Chakra theme not applying correctly across routes.
+
+**Solution:** Ensure ChakraProvider wraps the entire app at the root level:
+
+```tsx
+// ❌ Don't put provider inside individual routes
+export const Route = createFileRoute('/some-route')({
+  component: () => (
+    <ChakraProvider>
+      <SomeComponent />
+    </ChakraProvider>
+  ),
+})
+
+// ✅ Put provider at root level
+export const Route = createRootRoute({
+  component: () => (
+    <ChakraProvider>
+      <Outlet />
+    </ChakraProvider>
+  ),
+})
+```
+
+### TypeScript Errors with Router Integration
+
+**Problem:** TypeScript errors when using Chakra components with TanStack Router.
+
+**Solution:** Use proper typing with `createLink`:
+
+```tsx
+import { createLink } from '@tanstack/react-router'
+import { Button, type ButtonProps } from '@chakra-ui/react'
+import { forwardRef } from 'react'
+
+// Properly typed router button
+export const RouterButton = createLink(
+  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    return <Button ref={ref} as="button" {...props} />
+  }),
+)
+```
+
+### Color Mode Persistence
+
+**Problem:** Color mode doesn't persist across route changes.
+
+**Solution:** Set up proper color mode manager:
+
+```tsx
+import { ColorModeScript } from '@chakra-ui/react'
+
+// Add to your index.html head
+;<ColorModeScript initialColorMode={theme.config.initialColorMode} />
+
+// Or use localStorage manager
+import { localStorageManager } from '@chakra-ui/react'
+;<ChakraProvider theme={theme} colorModeManager={localStorageManager}>
+  {children}
+</ChakraProvider>
+```
+
+### Responsive Design Issues
+
+**Problem:** Responsive breakpoints not working correctly.
+
+**Solution:** Use Chakra's responsive utilities properly:
+
+```tsx
+// ✅ Use breakpoint values correctly
+const columns = useBreakpointValue({
+  base: 1,
+  md: 2,
+  lg: 3,
+  xl: 4,
+})
+
+// ✅ Or use responsive props
+<Box
+  display={{ base: 'block', md: 'flex' }}
+  flexDirection={{ base: 'column', md: 'row' }}
+>
+```
+
+---
+
+## Production Checklist
+
+Before deploying your Chakra UI + TanStack Router app:
+
+### Functionality
+
+- [ ] All router-compatible components work correctly
+- [ ] Navigation states properly reflected
+- [ ] Theme persists across route changes
+- [ ] TypeScript compilation successful
+
+### Accessibility
+
+- [ ] Keyboard navigation working
+- [ ] Screen reader compatibility tested
+- [ ] Color contrast meets WCAG standards
+- [ ] Focus management working properly
+
+### Performance
+
+- [ ] Bundle size optimized
+- [ ] Color mode switching performant
+- [ ] No unnecessary re-renders
+- [ ] Images and icons optimized
+
+### Responsiveness
+
+- [ ] Works on mobile devices
+- [ ] Tablet layouts functional
+- [ ] Desktop experience optimal
+- [ ] Breakpoints working correctly
+
+---
+
+## Related Resources
+
+- [Chakra UI Documentation](https://chakra-ui.com/getting-started) - Complete component library guide
+- [Chakra UI Recipes](https://chakra-ui.com/community/recipes) - Common patterns and recipes
+- [TanStack Router createLink API](/router/api/router#createlink) - API documentation for component integration
+- [Emotion CSS-in-JS](https://emotion.sh/docs/introduction) - Styling library used by Chakra UI
diff --git a/mintlify/router/how-to/integrate-framer-motion.md b/mintlify/router/how-to/integrate-framer-motion.md
new file mode 100644
index 000000000..83088273f
--- /dev/null
+++ b/mintlify/router/how-to/integrate-framer-motion.md
@@ -0,0 +1,777 @@
+---
+title: How to Integrate TanStack Router with Framer Motion
+---
+
+This guide covers setting up Framer Motion with TanStack Router for smooth route transitions and navigation animations.
+
+## Quick Start
+
+**Time Required:** 30-45 minutes  
+**Difficulty:** Intermediate  
+**Prerequisites:** Existing TanStack Router project
+
+### What You'll Accomplish
+
+- Install and configure Framer Motion with TanStack Router
+- Create smooth route transition animations
+- Implement animated navigation components
+- Set up layout animations and shared elements
+- Handle complex animation sequences
+
+---
+
+## Installation and Setup
+
+### Step 1: Install Framer Motion
+
+```bash
+npm install framer-motion
+```
+
+### Step 2: Verify Version Compatibility
+
+Ensure you're using compatible versions:
+
+```json
+{
+  "dependencies": {
+    "@tanstack/react-router": "^1.0.0",
+    "framer-motion": "^11.0.0",
+    "react": "^18.0.0"
+  }
+}
+```
+
+---
+
+## Route Transition Animations
+
+### Step 1: Create Animated Route Wrapper
+
+```tsx
+// src/components/animated-route.tsx
+import { motion, type MotionProps, type Variants } from 'framer-motion'
+import { ReactNode } from 'react'
+
+interface AnimatedRouteProps extends MotionProps {
+  children: ReactNode
+  variant?: 'fade' | 'slide' | 'scale' | 'slideUp'
+}
+
+const routeVariants: Record<string, Variants> = {
+  fade: {
+    initial: { opacity: 0 },
+    in: { opacity: 1 },
+    out: { opacity: 0 },
+  },
+  slide: {
+    initial: { opacity: 0, x: -20 },
+    in: { opacity: 1, x: 0 },
+    out: { opacity: 0, x: 20 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    in: { opacity: 1, scale: 1 },
+    out: { opacity: 0, scale: 1.05 },
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 20 },
+    in: { opacity: 1, y: 0 },
+    out: { opacity: 0, y: -20 },
+  },
+}
+
+const pageTransition = {
+  type: 'tween',
+  ease: 'anticipate',
+  duration: 0.3,
+}
+
+export function AnimatedRoute({
+  children,
+  variant = 'fade',
+  ...motionProps
+}: AnimatedRouteProps) {
+  return (
+    <motion.div
+      initial="initial"
+      animate="in"
+      exit="out"
+      variants={routeVariants[variant]}
+      transition={pageTransition}
+      {...motionProps}
+    >
+      {children}
+    </motion.div>
+  )
+}
+```
+
+### Step 2: Set Up Route Animation Container
+
+```tsx
+// src/components/route-animation-container.tsx
+import { useRouter } from '@tanstack/react-router'
+import { AnimatePresence } from 'framer-motion'
+import { ReactNode } from 'react'
+
+interface RouteAnimationContainerProps {
+  children: ReactNode
+}
+
+export function RouteAnimationContainer({
+  children,
+}: RouteAnimationContainerProps) {
+  const router = useRouter()
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <div key={router.state.location.pathname}>{children}</div>
+    </AnimatePresence>
+  )
+}
+```
+
+### Step 3: Update Root Route for Animations
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { RouteAnimationContainer } from '@/components/route-animation-container'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <RouteAnimationContainer>
+        <Outlet />
+      </RouteAnimationContainer>
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+### Step 4: Use Animations in Routes
+
+```tsx
+// src/routes/posts/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
+import { AnimatedRoute } from '@/components/animated-route'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsPage,
+})
+
+function PostsPage() {
+  return (
+    <AnimatedRoute variant="slide">
+      <div className="container mx-auto p-4">
+        <motion.h1
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="text-3xl font-bold mb-6"
+        >
+          Posts
+        </motion.h1>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className="grid gap-4"
+        >
+          {/* Post cards with staggered animations */}
+          {posts.map((post, index) => (
+            <motion.div
+              key={post.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 + index * 0.1 }}
+              className="border rounded-lg p-4"
+            >
+              <h2 className="text-xl font-semibold">{post.title}</h2>
+              <p className="text-gray-600">{post.excerpt}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </AnimatedRoute>
+  )
+}
+```
+
+---
+
+## Animated Navigation Components
+
+### Step 1: Create Animated Tab Navigation
+
+```tsx
+// src/components/navigation/animated-tabs.tsx
+import { Link, useMatchRoute } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
+
+interface TabItem {
+  to: string
+  label: string
+  exact?: boolean
+}
+
+interface AnimatedTabsProps {
+  items: TabItem[]
+  className?: string
+}
+
+export function AnimatedTabs({ items, className }: AnimatedTabsProps) {
+  const matchRoute = useMatchRoute()
+
+  return (
+    <nav className={`flex space-x-1 p-2 bg-gray-100 rounded-lg ${className}`}>
+      {items.map((item) => {
+        const isActive = matchRoute({ to: item.to, fuzzy: !item.exact })
+
+        return (
+          <Link
+            key={item.to}
+            to={item.to}
+            className={`relative px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+              isActive ? 'text-blue-600' : 'text-gray-600 hover:text-gray-900'
+            }`}
+          >
+            {isActive && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute inset-0 bg-white rounded-md shadow-sm"
+                initial={false}
+                transition={{
+                  type: 'spring',
+                  bounce: 0.2,
+                  duration: 0.6,
+                }}
+              />
+            )}
+            <span className="relative z-10">{item.label}</span>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
+```
+
+### Step 2: Create Sliding Mobile Menu
+
+```tsx
+// src/components/navigation/animated-mobile-menu.tsx
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface MenuItem {
+  to: string
+  label: string
+  icon?: React.ReactNode
+}
+
+interface AnimatedMobileMenuProps {
+  items: MenuItem[]
+  trigger: React.ReactNode
+}
+
+export function AnimatedMobileMenu({
+  items,
+  trigger,
+}: AnimatedMobileMenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const menuVariants = {
+    closed: {
+      opacity: 0,
+      x: '-100%',
+      transition: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 40,
+      },
+    },
+    open: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 40,
+      },
+    },
+  }
+
+  const itemVariants = {
+    closed: { opacity: 0, x: -20 },
+    open: { opacity: 1, x: 0 },
+  }
+
+  return (
+    <>
+      {/* Trigger */}
+      <button onClick={() => setIsOpen(!isOpen)}>{trigger}</button>
+
+      {/* Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black bg-opacity-50 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Menu */}
+      <motion.nav
+        initial="closed"
+        animate={isOpen ? 'open' : 'closed'}
+        variants={menuVariants}
+        className="fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50"
+      >
+        <div className="p-4">
+          <motion.div
+            initial="closed"
+            animate={isOpen ? 'open' : 'closed'}
+            transition={{ staggerChildren: 0.1, delayChildren: 0.2 }}
+            className="space-y-2"
+          >
+            {items.map((item) => (
+              <motion.div key={item.to} variants={itemVariants}>
+                <Link
+                  to={item.to}
+                  className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition-colors"
+                  onClick={() => setIsOpen(false)}
+                >
+                  {item.icon}
+                  <span className="text-gray-700">{item.label}</span>
+                </Link>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </motion.nav>
+    </>
+  )
+}
+```
+
+### Step 3: Create Floating Action Button with Animations
+
+```tsx
+// src/components/navigation/animated-fab.tsx
+import { Link } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
+import { Plus } from 'lucide-react'
+
+interface AnimatedFabProps {
+  to: string
+  label?: string
+  icon?: React.ReactNode
+  className?: string
+}
+
+export function AnimatedFab({
+  to,
+  label = 'Add',
+  icon = <Plus className="w-6 h-6" />,
+  className = '',
+}: AnimatedFabProps) {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.95 }}
+      className={`fixed bottom-6 right-6 ${className}`}
+    >
+      <Link
+        to={to}
+        className="flex items-center space-x-2 bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-colors"
+      >
+        <motion.div
+          initial={{ rotate: 0 }}
+          whileHover={{ rotate: 90 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          {icon}
+        </motion.div>
+        <span className="font-medium">{label}</span>
+      </Link>
+    </motion.div>
+  )
+}
+```
+
+---
+
+## Advanced Animation Patterns
+
+### Step 1: Shared Element Transitions
+
+```tsx
+// src/components/animations/shared-element.tsx
+import { motion } from 'framer-motion'
+import { ReactNode } from 'react'
+
+interface SharedElementProps {
+  layoutId: string
+  children: ReactNode
+  className?: string
+}
+
+export function SharedElement({
+  layoutId,
+  children,
+  className,
+}: SharedElementProps) {
+  return (
+    <motion.div
+      layoutId={layoutId}
+      className={className}
+      transition={{
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// Usage in post list
+function PostCard({ post }: { post: Post }) {
+  return (
+    <Link to="/posts/$postId" params={{ postId: post.id }}>
+      <SharedElement layoutId={`post-${post.id}`}>
+        <div className="border rounded-lg p-4">
+          <h2 className="text-xl font-semibold">{post.title}</h2>
+          <p className="text-gray-600">{post.excerpt}</p>
+        </div>
+      </SharedElement>
+    </Link>
+  )
+}
+
+// Usage in post detail
+function PostDetail({ post }: { post: Post }) {
+  return (
+    <SharedElement layoutId={`post-${post.id}`}>
+      <div className="border rounded-lg p-6">
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+        <div className="prose mt-4">{post.content}</div>
+      </div>
+    </SharedElement>
+  )
+}
+```
+
+### Step 2: Route-Based Animation Variants
+
+```tsx
+// src/components/animations/route-variants.tsx
+import { motion } from 'framer-motion'
+import { useRouter } from '@tanstack/react-router'
+import { ReactNode } from 'react'
+
+interface RouteVariantsProps {
+  children: ReactNode
+}
+
+export function RouteVariants({ children }: RouteVariantsProps) {
+  const router = useRouter()
+  const currentPath = router.state.location.pathname
+
+  // Different animations based on route depth
+  const getVariants = (path: string) => {
+    const depth = path.split('/').length - 1
+
+    if (depth === 1) {
+      // Top-level routes slide from right
+      return {
+        initial: { opacity: 0, x: 100 },
+        in: { opacity: 1, x: 0 },
+        out: { opacity: 0, x: -100 },
+      }
+    } else if (depth === 2) {
+      // Sub-routes slide up
+      return {
+        initial: { opacity: 0, y: 50 },
+        in: { opacity: 1, y: 0 },
+        out: { opacity: 0, y: -50 },
+      }
+    } else {
+      // Deep routes fade
+      return {
+        initial: { opacity: 0 },
+        in: { opacity: 1 },
+        out: { opacity: 0 },
+      }
+    }
+  }
+
+  return (
+    <motion.div
+      key={currentPath}
+      initial="initial"
+      animate="in"
+      exit="out"
+      variants={getVariants(currentPath)}
+      transition={{
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+```
+
+### Step 3: Loading Animations
+
+```tsx
+// src/components/animations/loading-animation.tsx
+import { motion } from 'framer-motion'
+
+export function LoadingAnimation() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <motion.div
+        className="flex space-x-2"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        {[0, 1, 2].map((index) => (
+          <motion.div
+            key={index}
+            className="w-3 h-3 bg-blue-600 rounded-full"
+            animate={{
+              scale: [1, 1.2, 1],
+              opacity: [1, 0.8, 1],
+            }}
+            transition={{
+              duration: 1,
+              repeat: Infinity,
+              delay: index * 0.2,
+            }}
+          />
+        ))}
+      </motion.div>
+    </div>
+  )
+}
+
+// Usage in routes with loading states
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostPage,
+  pendingComponent: LoadingAnimation,
+})
+```
+
+---
+
+## Complete Example
+
+### App with Full Animation Integration
+
+```tsx
+// src/routes/posts/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
+import { AnimatedRoute } from '@/components/animated-route'
+import { AnimatedTabs } from '@/components/navigation/animated-tabs'
+import { AnimatedFab } from '@/components/navigation/animated-fab'
+import { SharedElement } from '@/components/animations/shared-element'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsPage,
+})
+
+const tabItems = [
+  { to: '/posts', label: 'All Posts', exact: true },
+  { to: '/posts/published', label: 'Published' },
+  { to: '/posts/drafts', label: 'Drafts' },
+]
+
+function PostsPage() {
+  const posts = [
+    { id: '1', title: 'First Post', excerpt: 'This is the first post' },
+    { id: '2', title: 'Second Post', excerpt: 'This is the second post' },
+  ]
+
+  return (
+    <AnimatedRoute variant="slide">
+      <div className="container mx-auto p-4">
+        {/* Animated header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="mb-6"
+        >
+          <h1 className="text-3xl font-bold mb-4">Posts</h1>
+          <AnimatedTabs items={tabItems} />
+        </motion.div>
+
+        {/* Animated post grid */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className="grid gap-4"
+        >
+          {posts.map((post, index) => (
+            <motion.div
+              key={post.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 + index * 0.1 }}
+              whileHover={{ y: -2 }}
+              className="cursor-pointer"
+            >
+              <SharedElement layoutId={`post-${post.id}`}>
+                <div className="border rounded-lg p-4 hover:shadow-lg transition-shadow">
+                  <h2 className="text-xl font-semibold">{post.title}</h2>
+                  <p className="text-gray-600">{post.excerpt}</p>
+                </div>
+              </SharedElement>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Floating action button */}
+        <AnimatedFab to="/posts/new" label="New Post" />
+      </div>
+    </AnimatedRoute>
+  )
+}
+```
+
+---
+
+## Common Problems
+
+### Animations Not Triggering
+
+**Problem:** Route animations don't work or appear choppy.
+
+**Solutions:**
+
+1. **Ensure proper key for AnimatePresence:**
+
+   ```tsx
+   <AnimatePresence mode="wait">
+     <motion.div key={router.state.location.pathname}>
+       <Outlet />
+     </motion.div>
+   </AnimatePresence>
+   ```
+
+2. **Use layout animations correctly:**
+
+   ```tsx
+   // ❌ This might cause layout shifts
+   <motion.div animate={{ x: 100 }}>
+
+   // ✅ Use layout for changing layouts
+   <motion.div layout>
+   ```
+
+### Performance Issues
+
+**Problem:** Animations cause performance problems or jank.
+
+**Solutions:**
+
+1. **Prefer transform and opacity animations:**
+
+   ```tsx
+   // ✅ GPU-accelerated properties
+   const variants = {
+     initial: { opacity: 0, scale: 0.95 },
+     in: { opacity: 1, scale: 1 },
+   }
+
+   // ❌ Avoid animating layout properties
+   const badVariants = {
+     initial: { width: 0, height: 0 },
+     in: { width: 'auto', height: 'auto' },
+   }
+   ```
+
+2. **Use will-change CSS property sparingly:**
+   ```tsx
+   <motion.div style={{ willChange: 'transform' }} animate={{ x: 100 }} />
+   ```
+
+### Layout Shift Issues
+
+**Problem:** Shared element transitions cause layout shifts.
+
+**Solution:** Use layout animations and proper positioning:
+
+```tsx
+<motion.div
+  layout
+  layoutId="shared-element"
+  style={{ position: 'relative' }}
+  transition={{
+    layout: { duration: 0.3 },
+  }}
+>
+  {children}
+</motion.div>
+```
+
+---
+
+## Production Checklist
+
+Before deploying your animated TanStack Router app:
+
+### Performance
+
+- [ ] Animations use GPU-accelerated properties (transform, opacity)
+- [ ] No unnecessary will-change CSS properties
+- [ ] Complex animations are conditional on user preferences
+- [ ] Frame rate stays above 60fps on target devices
+
+### User Experience
+
+- [ ] Animations respect user's motion preferences
+- [ ] Loading states have appropriate animations
+- [ ] Navigation feels responsive and smooth
+- [ ] Animations enhance rather than distract from content
+
+### Accessibility
+
+- [ ] Respect prefers-reduced-motion media query
+- [ ] Animations don't interfere with screen readers
+- [ ] Focus management works during transitions
+- [ ] Essential content isn't hidden behind animations
+
+### Technical
+
+- [ ] Bundle size impact acceptable
+- [ ] No animation-related console errors
+- [ ] Smooth transitions on slower devices
+- [ ] Proper cleanup of animation effects
+
+---
+
+## Related Resources
+
+- [Framer Motion Documentation](https://www.framer.com/motion/) - Complete animation library guide
+- [React Transition Group Migration](https://www.framer.com/motion/migrate-from-react-transition-group/) - Migration guide from other animation libraries
+- [Animation Performance](https://web.dev/animations-guide/) - Web performance guide for animations
diff --git a/mintlify/router/how-to/integrate-material-ui.md b/mintlify/router/how-to/integrate-material-ui.md
new file mode 100644
index 000000000..39dec0af2
--- /dev/null
+++ b/mintlify/router/how-to/integrate-material-ui.md
@@ -0,0 +1,717 @@
+---
+title: How to Integrate TanStack Router with Material-UI (MUI)
+---
+
+This guide covers setting up Material-UI with TanStack Router, including proper TypeScript integration and component composition patterns.
+
+## Quick Start
+
+**Time Required:** 45-60 minutes  
+**Difficulty:** Intermediate  
+**Prerequisites:** Existing TanStack Router project
+
+### What You'll Accomplish
+
+- Install and configure Material-UI with TanStack Router
+- Set up proper theme provider integration
+- Create type-safe router-compatible MUI components
+- Implement navigation with active state indicators
+- Resolve common TypeScript and styling issues
+
+---
+
+## Installation and Setup
+
+### Step 1: Install Material-UI Dependencies
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
+```
+
+**Optional: Add date picker support**
+
+```bash
+npm install @mui/x-date-pickers dayjs
+```
+
+### Step 2: Set Up Theme Provider
+
+Create a theme provider that works with TanStack Router:
+
+```tsx
+// src/components/theme-provider.tsx
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ReactNode } from 'react'
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#1976d2',
+    },
+    secondary: {
+      main: '#dc004e',
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  },
+  components: {
+    // Customize components for router integration
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none', // More modern button styling
+        },
+      },
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          textDecoration: 'none',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        },
+      },
+    },
+  },
+})
+
+interface MuiThemeProviderProps {
+  children: ReactNode
+}
+
+export function MuiThemeProvider({ children }: MuiThemeProviderProps) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+### Step 3: Update Root Route
+
+Wrap your application with the MUI theme provider:
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { MuiThemeProvider } from '@/components/theme-provider'
+
+export const Route = createRootRoute({
+  component: () => (
+    <MuiThemeProvider>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </MuiThemeProvider>
+  ),
+})
+```
+
+---
+
+## Creating Router-Compatible MUI Components
+
+### Step 1: Create Typed MUI Link Component
+
+MUI Link components require special handling for TanStack Router's type system:
+
+```tsx
+// src/components/ui/mui-router-link.tsx
+import { createLink } from '@tanstack/react-router'
+import { Link as MuiLink, type LinkProps } from '@mui/material/Link'
+import { forwardRef } from 'react'
+
+// Create a router-compatible MUI Link with full type safety
+export const RouterLink = createLink(
+  forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+    return <MuiLink ref={ref} {...props} />
+  }),
+)
+```
+
+### Step 2: Create Typed MUI Button Component
+
+```tsx
+// src/components/ui/mui-router-button.tsx
+import { createLink } from '@tanstack/react-router'
+import { Button, type ButtonProps } from '@mui/material/Button'
+import { forwardRef } from 'react'
+
+// Create a router-compatible MUI Button
+export const RouterButton = createLink(
+  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    return <Button ref={ref} component="button" {...props} />
+  }),
+)
+```
+
+### Step 3: Create Advanced Navigation Components
+
+```tsx
+// src/components/ui/mui-router-fab.tsx
+import { createLink } from '@tanstack/react-router'
+import { Fab, type FabProps } from '@mui/material/Fab'
+import { forwardRef } from 'react'
+
+// Router-compatible Floating Action Button
+export const RouterFab = createLink(
+  forwardRef<HTMLButtonElement, FabProps>((props, ref) => {
+    return <Fab ref={ref} {...props} />
+  }),
+)
+```
+
+---
+
+## Implementing Navigation with Active States
+
+### Step 1: Create Navigation Tabs with Active States
+
+```tsx
+// src/components/navigation/mui-nav-tabs.tsx
+import { useMatchRoute } from '@tanstack/react-router'
+import { Tabs, Tab, type TabsProps } from '@mui/material'
+import { RouterLink } from '@/components/ui/mui-router-link'
+
+interface NavTab {
+  label: string
+  to: string
+  value: string
+  icon?: React.ReactNode
+}
+
+interface MuiNavTabsProps extends Omit<TabsProps, 'value' | 'onChange'> {
+  tabs: NavTab[]
+}
+
+export function MuiNavTabs({ tabs, ...tabsProps }: MuiNavTabsProps) {
+  const matchRoute = useMatchRoute()
+
+  // Find active tab based on current route
+  const activeTab =
+    tabs.find((tab) => matchRoute({ to: tab.to, fuzzy: true }))?.value || false
+
+  return (
+    <Tabs value={activeTab} {...tabsProps}>
+      {tabs.map((tab) => (
+        <Tab
+          key={tab.value}
+          label={tab.label}
+          value={tab.value}
+          icon={tab.icon}
+          component={RouterLink}
+          to={tab.to}
+          sx={{
+            '&.Mui-selected': {
+              fontWeight: 'bold',
+            },
+          }}
+        />
+      ))}
+    </Tabs>
+  )
+}
+```
+
+### Step 2: Create Navigation Drawer
+
+```tsx
+// src/components/navigation/mui-nav-drawer.tsx
+import { useMatchRoute } from '@tanstack/react-router'
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  Box,
+  type DrawerProps,
+} from '@mui/material'
+import { RouterLink } from '@/components/ui/mui-router-link'
+
+interface DrawerItem {
+  label: string
+  to: string
+  icon?: React.ReactNode
+}
+
+interface MuiNavDrawerProps extends Omit<DrawerProps, 'children'> {
+  items: DrawerItem[]
+  title?: string
+}
+
+export function MuiNavDrawer({
+  items,
+  title,
+  ...drawerProps
+}: MuiNavDrawerProps) {
+  const matchRoute = useMatchRoute()
+
+  return (
+    <Drawer {...drawerProps}>
+      <Box sx={{ width: 250 }} role="presentation">
+        {title && (
+          <Typography
+            variant="h6"
+            sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}
+          >
+            {title}
+          </Typography>
+        )}
+
+        <List>
+          {items.map((item) => {
+            const isActive = matchRoute({ to: item.to, fuzzy: true })
+
+            return (
+              <ListItem key={item.to} disablePadding>
+                <ListItemButton
+                  component={RouterLink}
+                  to={item.to}
+                  selected={isActive}
+                  sx={{
+                    '&.Mui-selected': {
+                      backgroundColor: 'primary.main',
+                      color: 'primary.contrastText',
+                      '&:hover': {
+                        backgroundColor: 'primary.dark',
+                      },
+                    },
+                  }}
+                >
+                  {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            )
+          })}
+        </List>
+      </Box>
+    </Drawer>
+  )
+}
+```
+
+### Step 3: Create App Bar with Navigation
+
+```tsx
+// src/components/navigation/mui-app-bar.tsx
+import { useState } from 'react'
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Menu,
+  MenuItem,
+  Box,
+} from '@mui/material'
+import { Menu as MenuIcon, AccountCircle } from '@mui/icons-material'
+import { RouterButton, RouterLink } from '@/components/ui/mui-router-link'
+import { MuiNavDrawer } from './mui-nav-drawer'
+
+interface AppBarItem {
+  label: string
+  to: string
+  icon?: React.ReactNode
+}
+
+interface MuiAppBarProps {
+  title: string
+  navigationItems: AppBarItem[]
+  userMenuItems?: AppBarItem[]
+}
+
+export function MuiAppBar({
+  title,
+  navigationItems,
+  userMenuItems,
+}: MuiAppBarProps) {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null)
+
+  const handleUserMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setUserMenuAnchor(event.currentTarget)
+  }
+
+  const handleUserMenuClose = () => {
+    setUserMenuAnchor(null)
+  }
+
+  return (
+    <>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={() => setDrawerOpen(true)}
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            <RouterLink to="/" color="inherit" underline="none">
+              {title}
+            </RouterLink>
+          </Typography>
+
+          {/* Desktop Navigation */}
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, mr: 2 }}>
+            {navigationItems.map((item) => (
+              <RouterButton
+                key={item.to}
+                to={item.to}
+                color="inherit"
+                startIcon={item.icon}
+                sx={{ ml: 1 }}
+              >
+                {item.label}
+              </RouterButton>
+            ))}
+          </Box>
+
+          {/* User Menu */}
+          {userMenuItems && (
+            <>
+              <IconButton color="inherit" onClick={handleUserMenuClick}>
+                <AccountCircle />
+              </IconButton>
+              <Menu
+                anchorEl={userMenuAnchor}
+                open={Boolean(userMenuAnchor)}
+                onClose={handleUserMenuClose}
+              >
+                {userMenuItems.map((item) => (
+                  <MenuItem
+                    key={item.to}
+                    component={RouterLink}
+                    to={item.to}
+                    onClick={handleUserMenuClose}
+                  >
+                    {item.label}
+                  </MenuItem>
+                ))}
+              </Menu>
+            </>
+          )}
+        </Toolbar>
+      </AppBar>
+
+      {/* Mobile Navigation Drawer */}
+      <MuiNavDrawer
+        items={navigationItems}
+        title="Navigation"
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+      />
+    </>
+  )
+}
+```
+
+---
+
+## Usage Examples
+
+### Complete Page Example
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  Container,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  CardActions,
+  Chip,
+  Stack,
+} from '@mui/material'
+import { Edit, Delete, ArrowBack } from '@mui/icons-material'
+import { RouterButton, RouterLink } from '@/components/ui/mui-router-link'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostPage,
+})
+
+function PostPage() {
+  const { postId } = Route.useParams()
+
+  return (
+    <Container maxWidth="md" sx={{ py: 4 }}>
+      {/* Breadcrumb Navigation */}
+      <Box sx={{ mb: 3 }}>
+        <RouterLink
+          to="/posts"
+          color="primary"
+          sx={{ display: 'flex', alignItems: 'center', mb: 2 }}
+        >
+          <ArrowBack sx={{ mr: 1 }} />
+          Back to Posts
+        </RouterLink>
+      </Box>
+
+      {/* Post Content */}
+      <Card>
+        <CardContent>
+          <Typography variant="h4" component="h1" gutterBottom>
+            Post {postId}
+          </Typography>
+
+          <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
+            <Chip label="React" color="primary" size="small" />
+            <Chip label="TypeScript" color="secondary" size="small" />
+          </Stack>
+
+          <Typography variant="body1" paragraph>
+            This is the content of post {postId}. It demonstrates how
+            Material-UI components work seamlessly with TanStack Router.
+          </Typography>
+        </CardContent>
+
+        <CardActions>
+          <RouterButton
+            to="/posts/$postId/edit"
+            params={{ postId }}
+            variant="contained"
+            startIcon={<Edit />}
+            size="small"
+          >
+            Edit Post
+          </RouterButton>
+
+          <RouterButton
+            to="/posts/$postId/delete"
+            params={{ postId }}
+            variant="outlined"
+            color="error"
+            startIcon={<Delete />}
+            size="small"
+          >
+            Delete Post
+          </RouterButton>
+        </CardActions>
+      </Card>
+    </Container>
+  )
+}
+```
+
+### Layout with Navigation
+
+```tsx
+// src/routes/_layout.tsx
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { Box } from '@mui/material'
+import { Home, Article, Info, Contact } from '@mui/icons-material'
+import { MuiAppBar } from '@/components/navigation/mui-app-bar'
+
+export const Route = createFileRoute('/_layout')({
+  component: LayoutComponent,
+})
+
+const navigationItems = [
+  { label: 'Home', to: '/', icon: <Home /> },
+  { label: 'Posts', to: '/posts', icon: <Article /> },
+  { label: 'About', to: '/about', icon: <Info /> },
+  { label: 'Contact', to: '/contact', icon: <Contact /> },
+]
+
+const userMenuItems = [
+  { label: 'Profile', to: '/profile' },
+  { label: 'Settings', to: '/settings' },
+  { label: 'Logout', to: '/logout' },
+]
+
+function LayoutComponent() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <MuiAppBar
+        title="My App"
+        navigationItems={navigationItems}
+        userMenuItems={userMenuItems}
+      />
+
+      <Box component="main" sx={{ mt: 2 }}>
+        <Outlet />
+      </Box>
+    </Box>
+  )
+}
+```
+
+---
+
+## Common Problems
+
+### TypeScript Errors with Component Props
+
+**Problem:** TypeScript errors when using MUI components with TanStack Router props.
+
+**Solution:** Always use `createLink` for proper typing:
+
+```tsx
+// ❌ This will cause TypeScript errors
+const BadButton = (props: any) => <Button {...props} />
+
+// ✅ This provides full type safety
+export const RouterButton = createLink(
+  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    return <Button ref={ref} component="button" {...props} />
+  }),
+)
+```
+
+### Styling Conflicts
+
+**Problem:** MUI styles conflict with other libraries or custom styles.
+
+**Solutions:**
+
+1. **Use MUI's emotion cache:**
+
+   ```tsx
+   import { CacheProvider } from '@emotion/react'
+   import createCache from '@emotion/cache'
+
+   const cache = createCache({
+     key: 'mui',
+     prepend: true,
+   })
+
+   export function App() {
+     return (
+       <CacheProvider value={cache}>
+         <MuiThemeProvider>{/* Your app */}</MuiThemeProvider>
+       </CacheProvider>
+     )
+   }
+   ```
+
+2. **Increase CSS specificity:**
+   ```tsx
+   const StyledButton = styled(Button)(({ theme }) => ({
+     '&.router-active': {
+       backgroundColor: theme.palette.primary.main,
+       color: theme.palette.primary.contrastText,
+     },
+   }))
+   ```
+
+### Theme Not Applied Correctly
+
+**Problem:** MUI theme changes don't apply to router-created components.
+
+**Solution:** Ensure theme provider wraps the entire app:
+
+```tsx
+// ❌ Theme provider inside routes won't work for navigation
+export const Route = createFileRoute('/some-route')({
+  component: () => (
+    <ThemeProvider theme={theme}>
+      <SomeComponent />
+    </ThemeProvider>
+  ),
+})
+
+// ✅ Theme provider at root level
+export const Route = createRootRoute({
+  component: () => (
+    <ThemeProvider theme={theme}>
+      <Outlet />
+    </ThemeProvider>
+  ),
+})
+```
+
+### Performance Issues with Large Apps
+
+**Problem:** Bundle size or runtime performance issues.
+
+**Solutions:**
+
+1. **Use tree shaking:**
+
+   ```tsx
+   // ✅ Import only what you need
+   import Button from '@mui/material/Button'
+   import TextField from '@mui/material/TextField'
+
+   // ❌ Avoid importing everything
+   import { Button, TextField } from '@mui/material'
+   ```
+
+2. **Use dynamic imports for heavy components:**
+
+   ```tsx
+   import { lazy, Suspense } from 'react'
+   import { CircularProgress } from '@mui/material'
+
+   const DataGrid = lazy(() =>
+     import('@mui/x-data-grid').then((module) => ({
+       default: module.DataGrid,
+     })),
+   )
+
+   function MyComponent() {
+     return (
+       <Suspense fallback={<CircularProgress />}>
+         <DataGrid {...props} />
+       </Suspense>
+     )
+   }
+   ```
+
+---
+
+## Production Checklist
+
+Before deploying your MUI + TanStack Router app:
+
+### Functionality
+
+- [ ] All navigation components work with router state
+- [ ] Active states properly reflected in tabs and navigation
+- [ ] TypeScript compilation successful
+- [ ] All MUI components render correctly
+
+### Performance
+
+- [ ] Bundle size optimized with tree shaking
+- [ ] Emotion CSS-in-JS performance acceptable
+- [ ] No unnecessary re-renders on route changes
+- [ ] Large components code-split appropriately
+
+### Styling
+
+- [ ] Theme consistency across all routes
+- [ ] CSS conflicts resolved
+- [ ] Responsive design working properly
+- [ ] Dark mode integration (if applicable)
+
+### Accessibility
+
+- [ ] Keyboard navigation working
+- [ ] Screen reader compatibility maintained
+- [ ] Focus management across route transitions
+- [ ] ARIA labels and roles properly set
+
+---
+
+## Related Resources
+
+- [Material-UI with TypeScript](https://mui.com/material-ui/guides/typescript/) - Official MUI TypeScript guide
+- [MUI Theming](https://mui.com/material-ui/customization/theming/) - Complete theming documentation
+- [TanStack Router createLink API](/router/api/router#createlink) - API documentation for component integration
+- [Emotion CSS-in-JS](https://emotion.sh/docs/introduction) - Styling library used by MUI
diff --git a/mintlify/router/how-to/integrate-shadcn-ui.md b/mintlify/router/how-to/integrate-shadcn-ui.md
new file mode 100644
index 000000000..13a4fe5b9
--- /dev/null
+++ b/mintlify/router/how-to/integrate-shadcn-ui.md
@@ -0,0 +1,517 @@
+---
+title: How to Integrate TanStack Router with Shadcn/ui
+---
+
+This guide covers setting up Shadcn/ui with TanStack Router, including solutions for common animation and compatibility issues.
+
+## Quick Start
+
+**Time Required:** 30-45 minutes  
+**Difficulty:** Intermediate  
+**Prerequisites:** Existing TanStack Router project
+
+### What You'll Accomplish
+
+- Install and configure Shadcn/ui with TanStack Router
+- Fix animation issues with modals, sheets, and dialogs
+- Create type-safe navigation components
+- Set up proper styling integration
+- Resolve common compatibility problems
+
+---
+
+## Installation and Setup
+
+### Step 1: Install Shadcn/ui
+
+**Option 1: New project with TanStack Router template**
+
+```bash
+npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
+```
+
+**Option 2: Add to existing TanStack Router project**
+
+```bash
+npx shadcn@latest init
+```
+
+### Step 2: Configure components.json
+
+Create or update your `components.json` for TanStack Router compatibility:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+### Step 3: Add Essential Components
+
+Install the most commonly used components:
+
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add navigation-menu
+npx shadcn@latest add sheet
+npx shadcn@latest add dialog
+```
+
+---
+
+## Fixing Animation Issues
+
+### Step 1: Set Up Proper DOM Structure
+
+Update your root route to support portals and animations:
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      {/* Main content wrapper */}
+      <div id="root-content">
+        <Outlet />
+      </div>
+
+      {/* Portal root for overlays */}
+      <div id="portal-root"></div>
+
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+### Step 2: Create Router-Compatible Sheet Component
+
+Shadcn/ui Sheet components can have animation issues. Create a wrapper:
+
+```tsx
+// src/components/ui/router-sheet.tsx
+import * as React from 'react'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+
+interface RouterSheetProps {
+  children: React.ReactNode
+  trigger: React.ReactNode
+  title: string
+  description?: string
+  onOpenChange?: (open: boolean) => void
+}
+
+export function RouterSheet({
+  children,
+  trigger,
+  title,
+  description,
+  onOpenChange,
+}: RouterSheetProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen)
+    onOpenChange?.(newOpen)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetTrigger asChild>{trigger}</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          {description && <SheetDescription>{description}</SheetDescription>}
+        </SheetHeader>
+        <div className="mt-4">{children}</div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+```
+
+### Step 3: Create Router-Compatible Dialog Component
+
+```tsx
+// src/components/ui/router-dialog.tsx
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+
+interface RouterDialogProps {
+  children: React.ReactNode
+  trigger: React.ReactNode
+  title: string
+  description?: string
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function RouterDialog({
+  children,
+  trigger,
+  title,
+  description,
+  open: controlledOpen,
+  onOpenChange,
+}: RouterDialogProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+
+  const open = controlledOpen ?? internalOpen
+  const setOpen = onOpenChange ?? setInternalOpen
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div className="mt-4">{children}</div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+---
+
+## Creating Navigation Components
+
+### Step 1: Router-Compatible Navigation Menu
+
+```tsx
+// src/components/navigation/main-nav.tsx
+import { Link, useMatchRoute } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu'
+
+interface NavItem {
+  to: string
+  label: string
+  exact?: boolean
+}
+
+interface MainNavProps {
+  items: NavItem[]
+  className?: string
+}
+
+export function MainNav({ items, className }: MainNavProps) {
+  const matchRoute = useMatchRoute()
+
+  return (
+    <NavigationMenu className={className}>
+      <NavigationMenuList>
+        {items.map((item) => {
+          const isActive = matchRoute({ to: item.to, fuzzy: !item.exact })
+
+          return (
+            <NavigationMenuItem key={item.to}>
+              <Link
+                to={item.to}
+                className={cn(
+                  navigationMenuTriggerStyle(),
+                  isActive && 'bg-accent text-accent-foreground font-medium',
+                )}
+              >
+                {item.label}
+              </Link>
+            </NavigationMenuItem>
+          )
+        })}
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+```
+
+### Step 2: Create Router-Compatible Button Links
+
+```tsx
+// src/components/ui/router-button.tsx
+import { createLink } from '@tanstack/react-router'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { forwardRef } from 'react'
+
+// Create a router-compatible Button
+export const RouterButton = createLink(
+  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    return <Button ref={ref} {...props} />
+  }),
+)
+```
+
+### Step 3: Usage Example
+
+```tsx
+// src/routes/posts/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { MainNav } from '@/components/navigation/main-nav'
+import { RouterButton } from '@/components/ui/router-button'
+import { RouterSheet } from '@/components/ui/router-sheet'
+import { Button } from '@/components/ui/button'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsPage,
+})
+
+const navItems = [
+  { to: '/', label: 'Home' },
+  { to: '/posts', label: 'Posts', exact: true },
+  { to: '/about', label: 'About' },
+]
+
+function PostsPage() {
+  return (
+    <div className="container mx-auto p-4">
+      {/* Navigation with active states */}
+      <MainNav items={navItems} className="mb-8" />
+
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold">Posts</h1>
+
+        {/* Router-compatible button */}
+        <RouterButton to="/posts/new" variant="default">
+          Create Post
+        </RouterButton>
+      </div>
+
+      {/* Sheet with proper animations */}
+      <RouterSheet
+        trigger={<Button variant="outline">Open Menu</Button>}
+        title="Navigation Menu"
+        description="Navigate through your posts"
+      >
+        <div className="space-y-4">
+          <p>This sheet animates correctly with TanStack Router!</p>
+          <RouterButton to="/posts/new" variant="default" className="w-full">
+            Create New Post
+          </RouterButton>
+        </div>
+      </RouterSheet>
+    </div>
+  )
+}
+```
+
+---
+
+## Common Problems
+
+### Animation Components Not Working
+
+**Problem:** Sheet, Dialog, or other animated components don't animate properly.
+
+**Solutions:**
+
+1. **Ensure proper portal setup:**
+
+   ```tsx
+   // Add to your index.html or root component
+   <div id="portal-root"></div>
+   ```
+
+2. **Check CSS imports order:**
+
+   ```css
+   /* Make sure this comes before your custom styles */
+   @import 'tailwindcss/base';
+   @import 'tailwindcss/components';
+   @import 'tailwindcss/utilities';
+   ```
+
+3. **Use controlled components for complex animations:**
+
+   ```tsx
+   const [open, setOpen] = useState(false)
+
+   // Controlled instead of uncontrolled
+   <Sheet open={open} onOpenChange={setOpen}>
+   ```
+
+### TypeScript Errors with Router Integration
+
+**Problem:** TypeScript errors when using Shadcn/ui components with TanStack Router.
+
+**Solution:** Use `createLink` for proper typing:
+
+```tsx
+import { createLink } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+// This provides full type safety
+export const RouterButton = createLink(Button)
+```
+
+### Styling Conflicts
+
+**Problem:** Shadcn/ui styles conflict with router or custom styles.
+
+**Solutions:**
+
+1. **Use CSS layers:**
+
+   ```css
+   @layer base, components, utilities;
+
+   @layer base {
+     /* Shadcn/ui base styles */
+   }
+
+   @layer components {
+     /* Your component styles */
+   }
+   ```
+
+2. **Increase specificity for router-specific styles:**
+   ```tsx
+   <Button className="router-active:bg-primary router-active:text-primary-foreground">
+     Active Button
+   </Button>
+   ```
+
+### Dark Mode Integration
+
+**Problem:** Dark mode doesn't work properly with route changes.
+
+**Solution:** Set up theme provider correctly:
+
+```tsx
+// src/components/theme-provider.tsx
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'dark' | 'light' | 'system'
+
+interface ThemeProviderProps {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+const ThemeProviderContext = createContext<{
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}>({
+  theme: 'system',
+  setTheme: () => null,
+})
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'ui-theme',
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove('light', 'dark')
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+        .matches
+        ? 'dark'
+        : 'light'
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider')
+  return context
+}
+```
+
+---
+
+## Production Checklist
+
+Before deploying your Shadcn/ui + TanStack Router app:
+
+### Styling
+
+- [ ] All Shadcn/ui components render correctly
+- [ ] Animations work properly on route changes
+- [ ] Dark mode integration working (if applicable)
+- [ ] CSS conflicts resolved
+- [ ] Responsive design tested
+
+### Functionality
+
+- [ ] Navigation components work with router state
+- [ ] Active states properly reflected
+- [ ] TypeScript compilation successful
+- [ ] All sheets, dialogs, and modals animate correctly
+
+### Performance
+
+- [ ] Bundle size optimized (tree shaking working)
+- [ ] CSS-in-JS not causing performance issues
+- [ ] Animation performance acceptable on slower devices
+
+---
+
+## Related Resources
+
+- [Shadcn/ui TanStack Router Installation](https://ui.shadcn.com/docs/installation/tanstack-router) - Official integration guide
+- [TanStack Router createLink API](/router/api/router#createlink) - API documentation for component integration
+- [Shadcn/ui Components](https://ui.shadcn.com/docs/components) - Complete component documentation
diff --git a/mintlify/router/how-to/migrate-from-react-router.md b/mintlify/router/how-to/migrate-from-react-router.md
new file mode 100644
index 000000000..f7955313c
--- /dev/null
+++ b/mintlify/router/how-to/migrate-from-react-router.md
@@ -0,0 +1,744 @@
+---
+title: How to Migrate from React Router v7
+---
+
+This guide provides a step-by-step process to migrate your application from React Router v7 to TanStack Router. We'll cover the complete migration process from removing React Router dependencies to implementing TanStack Router's type-safe routing patterns.
+
+## Quick Start
+
+**Time Required:** 2-4 hours depending on app complexity  
+**Difficulty:** Intermediate  
+**Prerequisites:** Basic React knowledge, existing React Router v7 app
+
+### What You'll Accomplish
+
+- Remove React Router v7 dependencies and components
+- Install and configure TanStack Router
+- Convert route definitions to file-based routing
+- Update navigation components and hooks
+- Implement type-safe routing patterns
+- Handle search params and dynamic routes
+- Migrate from React Router v7's new features to TanStack Router equivalents
+
+---
+
+## Complete Migration Process
+
+### Step 1: Prepare for Migration
+
+Before making any changes, prepare your environment and codebase:
+
+**1.1 Create a backup branch**
+
+```bash
+git checkout -b migrate-to-tanstack-router
+git push -u origin migrate-to-tanstack-router
+```
+
+**1.2 Install TanStack Router (keep React Router temporarily)**
+
+```bash
+# Install TanStack Router
+npm install @tanstack/react-router
+
+# Install development dependencies
+npm install -D @tanstack/router-plugin @tanstack/react-router-devtools
+```
+
+**1.3 Set up the router plugin for your bundler**
+
+For **Vite** users, update your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter(), // Add this before react plugin
+    react(),
+  ],
+})
+```
+
+For **other bundlers**, see our [bundler configuration guides](/router/routing/routing-concepts).
+
+### Step 2: Create TanStack Router Configuration
+
+**2.1 Create router configuration file**
+
+Create `tsr.config.json` in your project root:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "quoteStyle": "single"
+}
+```
+
+**2.2 Create routes directory**
+
+```bash
+mkdir src/routes
+```
+
+### Step 3: Convert Your React Router v7 Structure
+
+**3.1 Identify your current React Router v7 setup**
+
+React Router v7 introduced several new patterns. Look for:
+
+- `createBrowserRouter` with new data APIs
+- Framework mode configurations
+- Server-side rendering setup
+- New `loader` and `action` functions
+- `defer` usage (simplified in v7)
+- Type-safe routing features
+
+**3.2 Create root route**
+
+Create `src/routes/__root.tsx`:
+
+```typescript
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      {/* Your existing layout/navbar content */}
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+**3.3 Create index route**
+
+Create `src/routes/index.tsx` for your home page:
+
+```typescript
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}
+```
+
+**3.4 Convert React Router v7 loaders**
+
+React Router v7 simplified loader patterns. Here's how to migrate them:
+
+**React Router v7:**
+
+```typescript
+// app/routes/posts.tsx
+export async function loader() {
+  const posts = await fetchPosts()
+  return { posts } // v7 removed need for json() wrapper
+}
+
+export default function Posts() {
+  const { posts } = useLoaderData()
+  return <div>{/* render posts */}</div>
+}
+```
+
+**TanStack Router equivalent:**
+Create `src/routes/posts.tsx`:
+
+```typescript
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  loader: async () => {
+    const posts = await fetchPosts()
+    return { posts }
+  },
+  component: Posts,
+})
+
+function Posts() {
+  const { posts } = Route.useLoaderData()
+  return <div>{/* render posts */}</div>
+}
+```
+
+**3.5 Convert dynamic routes**
+
+**React Router v7:**
+
+```typescript
+// app/routes/posts.$postId.tsx
+export async function loader({ params }) {
+  const post = await fetchPost(params.postId)
+  return { post }
+}
+
+export default function Post() {
+  const { post } = useLoaderData()
+  return <div>{post.title}</div>
+}
+```
+
+**TanStack Router equivalent:**
+Create `src/routes/posts/$postId.tsx`:
+
+```typescript
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  component: Post,
+})
+
+function Post() {
+  const { post } = Route.useLoaderData()
+  const { postId } = Route.useParams()
+  return <div>{post.title}</div>
+}
+```
+
+**3.6 Convert React Router v7 actions**
+
+**React Router v7:**
+
+```typescript
+export async function action({ request, params }) {
+  const formData = await request.formData()
+  const result = await updatePost(params.postId, formData)
+  return { success: true }
+}
+```
+
+**TanStack Router equivalent:**
+
+```typescript
+export const Route = createFileRoute('/posts/$postId/edit')({
+  component: EditPost,
+  // Actions are typically handled differently in TanStack Router
+  // Use mutations or form libraries like React Hook Form
+})
+
+function EditPost() {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (formData) => {
+    const result = await updatePost(params.postId, formData)
+    navigate({ to: '/posts/$postId', params: { postId } })
+  }
+
+  return <form onSubmit={handleSubmit}>{/* form */}</form>
+}
+```
+
+### Step 4: Handle React Router v7 Framework Features
+
+**4.1 Server-Side Rendering Migration**
+
+React Router v7 introduced framework mode with SSR. If you're using this:
+
+**React Router v7 Framework Mode:**
+
+```typescript
+// react-router.config.ts
+export default {
+  ssr: true,
+  prerender: ['/'],
+}
+```
+
+**TanStack Router approach:**
+
+TanStack Router has built-in SSR capabilities. Set up your router for SSR:
+
+```typescript
+// src/router.tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  context: {
+    // Add any SSR context here
+  },
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+export { router }
+```
+
+For server-side rendering, use TanStack Router's built-in SSR APIs:
+
+```typescript
+// server.tsx
+import { createMemoryHistory } from '@tanstack/react-router'
+import { StartServer } from '@tanstack/start/server'
+
+export async function render(url: string) {
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: [url] }),
+  })
+
+  await router.load()
+
+  return (
+    <StartServer router={router} />
+  )
+}
+```
+
+**4.2 Code Splitting Migration**
+
+React Router v7 improved code splitting. TanStack Router handles this via lazy routes:
+
+**React Router v7:**
+
+```typescript
+const LazyComponent = lazy(() => import('./LazyComponent'))
+```
+
+**TanStack Router:**
+
+```typescript
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/lazy-route')({
+  component: LazyComponent,
+})
+
+function LazyComponent() {
+  return <div>Lazy loaded!</div>
+}
+```
+
+### Step 5: Update Navigation Components
+
+**5.1 Update Link components**
+
+**React Router v7:**
+
+```typescript
+import { Link } from 'react-router'
+
+<Link to="/posts/123">View Post</Link>
+<Link to="/posts" state={{ from: 'home' }}>Posts</Link>
+```
+
+**TanStack Router:**
+
+```typescript
+import { Link } from '@tanstack/react-router'
+
+<Link to="/posts/$postId" params={{ postId: '123' }}>View Post</Link>
+<Link to="/posts" state={{ from: 'home' }}>Posts</Link>
+```
+
+**5.2 Update navigation hooks**
+
+**React Router v7:**
+
+```typescript
+import { useNavigate } from 'react-router'
+
+function Component() {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate('/posts/123')
+  }
+}
+```
+
+**TanStack Router:**
+
+```typescript
+import { useNavigate } from '@tanstack/react-router'
+
+function Component() {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate({ to: '/posts/$postId', params: { postId: '123' } })
+  }
+}
+```
+
+### Step 6: Handle React Router v7 Specific Features
+
+**6.1 Migrate simplified `defer` usage**
+
+React Router v7 simplified defer by removing the wrapper function:
+
+**React Router v7:**
+
+```typescript
+export async function loader() {
+  return {
+    data: fetchData(), // Promise directly returned
+  }
+}
+```
+
+**TanStack Router:**
+
+TanStack Router uses a different approach for deferred data. Use loading states:
+
+```typescript
+export const Route = createFileRoute('/deferred')({
+  loader: async () => {
+    const data = await fetchData()
+    return { data }
+  },
+  pendingComponent: () => <div>Loading...</div>,
+  component: DeferredComponent,
+})
+```
+
+**6.2 Handle React Router v7's enhanced type safety**
+
+React Router v7 improved type inference. TanStack Router provides even better type safety:
+
+```typescript
+// TanStack Router automatically infers types
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    // params.postId is automatically typed as string
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  component: Post,
+})
+
+function Post() {
+  // post is automatically typed based on loader return
+  const { post } = Route.useLoaderData()
+  // postId is automatically typed as string
+  const { postId } = Route.useParams()
+}
+```
+
+### Step 7: Update Your Main Router Setup
+
+**7.1 Replace React Router v7 router creation**
+
+**Before (React Router v7):**
+
+```typescript
+import { createBrowserRouter, RouterProvider } from 'react-router'
+
+const router = createBrowserRouter([
+  // Your route definitions
+])
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
+```
+
+**After (TanStack Router):**
+
+```typescript
+import { RouterProvider } from '@tanstack/react-router'
+import { router } from './router'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
+```
+
+### Step 8: Handle Search Parameters
+
+**8.1 React Router v7 to TanStack Router search params**
+
+**React Router v7:**
+
+```typescript
+import { useSearchParams } from 'react-router'
+
+function Component() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const page = searchParams.get('page') || '1'
+
+  const updatePage = (newPage) => {
+    setSearchParams({ page: newPage })
+  }
+}
+```
+
+**TanStack Router:**
+
+```typescript
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  page: z.number().catch(1),
+  filter: z.string().optional(),
+})
+
+export const Route = createFileRoute('/posts')({
+  validateSearch: searchSchema,
+  component: Posts,
+})
+
+function Posts() {
+  const navigate = useNavigate({ from: '/posts' })
+  const { page, filter } = Route.useSearch()
+
+  const updatePage = (newPage: number) => {
+    navigate({ search: (prev) => ({ ...prev, page: newPage }) })
+  }
+}
+```
+
+### Step 9: Remove React Router Dependencies
+
+Only after everything is working with TanStack Router:
+
+**9.1 Remove React Router v7**
+
+```bash
+npm uninstall react-router
+```
+
+**9.2 Clean up unused imports**
+
+Search your codebase for any remaining React Router imports:
+
+```bash
+# Find remaining React Router imports
+grep -r "react-router" src/
+```
+
+Remove any remaining imports and replace with TanStack Router equivalents.
+
+### Step 10: Add Advanced Type Safety
+
+**10.1 Configure strict TypeScript**
+
+Update your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true
+  }
+}
+```
+
+**10.2 Add search parameter validation**
+
+For routes with search parameters, add validation schemas:
+
+```typescript
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const postsSearchSchema = z.object({
+  page: z.number().min(1).catch(1),
+  search: z.string().optional(),
+  category: z.enum(['tech', 'business', 'lifestyle']).optional(),
+})
+
+export const Route = createFileRoute('/posts')({
+  validateSearch: postsSearchSchema,
+  component: Posts,
+})
+```
+
+---
+
+## Production Checklist
+
+Before deploying your migrated application:
+
+### Router Configuration
+
+- [ ] Router instance created and properly exported
+- [ ] Route tree generated successfully
+- [ ] TypeScript declarations registered
+- [ ] All route files follow naming conventions
+
+### Route Migration
+
+- [ ] All React Router v7 routes converted to file-based routing
+- [ ] Dynamic routes updated with proper parameter syntax
+- [ ] Nested routes maintain hierarchy
+- [ ] Index routes created where needed
+- [ ] Layout routes preserve component structure
+
+### Feature Migration
+
+- [ ] All React Router v7 loaders converted
+- [ ] Actions migrated to appropriate patterns
+- [ ] Server-side rendering configured (if applicable)
+- [ ] Code splitting implemented
+- [ ] Type safety enhanced
+
+### Navigation Updates
+
+- [ ] All Link components updated to TanStack Router
+- [ ] useNavigate hooks replaced and tested
+- [ ] Navigation parameters properly typed
+- [ ] Search parameter validation implemented
+
+### Code Cleanup
+
+- [ ] React Router v7 dependencies removed
+- [ ] Unused imports cleaned up
+- [ ] No React Router references remain
+- [ ] TypeScript compilation successful
+- [ ] All tests passing
+
+### Testing
+
+- [ ] All routes accessible and rendering correctly
+- [ ] Navigation between routes working
+- [ ] Back/forward browser buttons functional
+- [ ] Search parameters persisting correctly
+- [ ] Dynamic routes with parameters working
+- [ ] Nested route layouts displaying properly
+- [ ] Framework features (SSR, code splitting) working if applicable
+
+---
+
+## Common Problems
+
+### Error: "Cannot use useNavigate outside of context"
+
+**Problem:** You have remaining React Router imports that conflict with TanStack Router.
+
+**Solution:**
+
+1. Search for all React Router imports:
+   ```bash
+   grep -r "react-router" src/
+   ```
+2. Replace all imports with TanStack Router equivalents
+3. Ensure React Router is completely uninstalled
+
+### TypeScript Errors: Route Parameters
+
+**Problem:** TypeScript showing errors about route parameters not being typed correctly.
+
+**Solution:**
+
+1. Ensure your router is registered in the TypeScript module declaration:
+   ```typescript
+   declare module '@tanstack/react-router' {
+     interface Register {
+       router: typeof router
+     }
+   }
+   ```
+2. Check that your route files export the Route correctly
+3. Verify parameter names match between route definition and usage
+
+### React Router v7 Framework Features Not Working
+
+**Problem:** Missing SSR or code splitting functionality after migration.
+
+**Solution:**
+
+1. TanStack Router has built-in SSR capabilities - use TanStack Start for full-stack applications
+2. Use TanStack Router's lazy routes for code splitting
+3. Configure SSR using TanStack Router's native APIs
+4. Follow the [SSR setup guide](/router/how-to/setup-ssr) for detailed instructions
+
+### Routes Not Matching
+
+**Problem:** Routes not rendering or 404 errors for valid routes.
+
+**Solution:**
+
+1. Check file naming follows TanStack Router conventions:
+   - Dynamic routes: `$paramName.tsx`
+   - Index routes: `index.tsx`
+   - Nested routes: proper directory structure
+2. Verify route tree generation is working
+3. Check that the router plugin is properly configured
+
+### React Router v7 Simplified APIs Not Translating
+
+**Problem:** v7's simplified `defer` or other features don't have direct equivalents.
+
+**Solution:**
+
+1. Use TanStack Router's pending states for loading UX
+2. Implement data fetching patterns that fit TanStack Router's architecture
+3. Leverage TanStack Router's superior type safety for better DX
+
+---
+
+## React Router v7 vs TanStack Router Feature Comparison
+
+| Feature            | React Router v7     | TanStack Router              |
+| ------------------ | ------------------- | ---------------------------- |
+| Type Safety        | Good                | Excellent                    |
+| File-based Routing | Framework mode only | Built-in                     |
+| Search Params      | Basic               | Validated with schemas       |
+| Code Splitting     | Good                | Excellent with lazy routes   |
+| SSR                | Framework mode      | Built-in with TanStack Start |
+| Bundle Size        | Larger              | Smaller                      |
+| Learning Curve     | Moderate            | Moderate                     |
+| Community          | Large               | Growing                      |
+
+---
+
+## Common Next Steps
+
+After successfully migrating to TanStack Router, consider these enhancements:
+
+### Advanced Features to Explore
+
+- **Route-based code splitting** - Improve performance with lazy loading
+- **Search parameter validation** - Type-safe URL state management
+- **Route preloading** - Enhance perceived performance
+- **Route masking** - Advanced URL management
+- **Integration with TanStack Query** - Powerful data fetching
+
+---
+
+## Related Resources
+
+- [TanStack Router Documentation](https://tanstack.com/router) - Complete API reference
+- [File-Based Routing Guide](/router/routing/file-based-routing) - Detailed routing concepts
+- [Navigation Guide](/router/guide/navigation) - Complete navigation patterns
+- [Search Parameters Guide](/router/guide/search-params) - Advanced search param usage
+- [Type Safety Guide](/router/guide/type-safety) - TypeScript integration details
+- [React Router v7 Changelog](https://reactrouter.com/start/changelog) - What changed in v7
diff --git a/mintlify/router/how-to/navigate-with-search-params.md b/mintlify/router/how-to/navigate-with-search-params.md
new file mode 100644
index 000000000..635689a05
--- /dev/null
+++ b/mintlify/router/how-to/navigate-with-search-params.md
@@ -0,0 +1,344 @@
+---
+title: How to Navigate with Search Parameters
+---
+
+This guide covers updating and managing search parameters during navigation using TanStack Router's Link components and programmatic navigation methods.
+
+**Prerequisites:** [Set Up Basic Search Parameters](/router/how-to/setup-basic-search-params) - Foundation concepts for reading and validating search params.
+
+## Quick Start
+
+Configure navigation that updates search parameters while preserving existing state:
+
+```tsx
+import { Link, useNavigate } from '@tanstack/react-router'
+
+// Link with search parameter updates
+;<Link to="/search" search={(prev) => ({ ...prev, query: 'new search' })}>
+  Search for "new search"
+</Link>
+
+// Programmatic navigation
+const navigate = useNavigate()
+navigate({
+  to: '/search',
+  search: (prev) => ({ ...prev, page: 1 }),
+})
+```
+
+## Navigation Methods
+
+### Using Link Components
+
+#### Basic Search Parameter Updates
+
+Replace all search parameters:
+
+```tsx
+import { Link } from '@tanstack/router'
+
+function SearchForm() {
+  return (
+    <div>
+      {/* Replace all search params */}
+      <Link to="/products" search={{ category: 'electronics', page: 1 }}>
+        Electronics
+      </Link>
+
+      {/* Navigate to same route with new search */}
+      <Link search={{ sort: 'price-asc' }}>Sort by Price</Link>
+    </div>
+  )
+}
+```
+
+#### Functional Search Parameter Updates
+
+Merge with existing search parameters:
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+function Pagination() {
+  return (
+    <div>
+      {/* Preserve existing search, update page */}
+      <Link search={(prev) => ({ ...prev, page: (prev.page || 1) + 1 })}>
+        Next Page
+      </Link>
+
+      {/* Toggle filter while keeping other params */}
+      <Link
+        search={(prev) => ({
+          ...prev,
+          inStock: !prev.inStock,
+        })}
+      >
+        Toggle In Stock
+      </Link>
+
+      {/* Remove a search parameter */}
+      <Link
+        search={(prev) => {
+          const { category, ...rest } = prev
+          return rest
+        }}
+      >
+        Clear Category Filter
+      </Link>
+    </div>
+  )
+}
+```
+
+#### Preserving All Search Parameters
+
+Use `search={true}` to keep all current search parameters when navigating:
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+function Navigation() {
+  return (
+    <nav>
+      {/* Keep all search params when changing routes */}
+      <Link to="/products" search={true}>
+        View Products (Keep Filters)
+      </Link>
+
+      {/* Equivalent functional approach */}
+      <Link to="/products" search={(prev) => prev}>
+        View Products (Functional)
+      </Link>
+    </nav>
+  )
+}
+```
+
+#### Navigation with Route Changes
+
+Navigate to different routes with search parameters:
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+function Navigation() {
+  return (
+    <nav>
+      {/* Navigate to different route with search */}
+      <Link to="/search" search={{ query: 'laptops', category: 'electronics' }}>
+        Search Laptops
+      </Link>
+
+      {/* Inherit current search params to new route */}
+      <Link
+        to="/products"
+        search={true} // Shorthand to carry over all search params
+      >
+        View Products
+      </Link>
+
+      {/* Transform search params for new route */}
+      <Link
+        to="/advanced-search"
+        search={(prev) => ({
+          q: prev.query, // Rename parameter
+          filters: {
+            category: prev.category,
+            inStock: prev.inStock,
+          },
+        })}
+      >
+        Advanced Search
+      </Link>
+    </nav>
+  )
+}
+```
+
+### Programmatic Navigation
+
+#### Using useNavigate Hook
+
+Navigate programmatically with search parameter updates:
+
+```tsx
+import { useNavigate } from '@tanstack/react-router'
+
+function SearchControls() {
+  const navigate = useNavigate()
+
+  const handleSortChange = (sortBy: string) => {
+    navigate({
+      search: (prev) => ({ ...prev, sort: sortBy, page: 1 }),
+    })
+  }
+
+  const handleClearFilters = () => {
+    navigate({
+      search: (prev) => {
+        const { category, minPrice, maxPrice, ...rest } = prev
+        return rest
+      },
+    })
+  }
+
+  const handleSearch = (query: string) => {
+    navigate({
+      to: '/search',
+      search: { query, page: 1 },
+    })
+  }
+
+  return (
+    <div>
+      <select onChange={(e) => handleSortChange(e.target.value)}>
+        <option value="relevance">Sort by Relevance</option>
+        <option value="price-asc">Price: Low to High</option>
+        <option value="price-desc">Price: High to Low</option>
+      </select>
+
+      <button onClick={handleClearFilters}>Clear Filters</button>
+
+      <button onClick={() => handleSearch('latest products')}>
+        Search Latest
+      </button>
+    </div>
+  )
+}
+```
+
+#### Navigation with Router Instance
+
+Use the router directly only in non-React contexts where `useNavigate` or `Link` aren't available:
+
+```tsx
+import { router } from './router' // Your router instance
+
+// ✅ Appropriate use case: Utility function outside React components
+export function navigateFromUtility(searchParams: Record<string, any>) {
+  router.navigate({
+    search: (prev) => ({ ...prev, ...searchParams }),
+  })
+}
+
+// ✅ Appropriate use case: Event handlers in non-React code
+class ApiService {
+  onAuthError() {
+    // Navigate to login when auth fails
+    router.navigate({
+      to: '/login',
+      search: { redirect: window.location.pathname },
+    })
+  }
+}
+
+// ✅ Appropriate use case: Global error handler
+window.addEventListener('unhandledrejection', (event) => {
+  if (event.reason.status === 401) {
+    router.navigate({
+      to: '/login',
+      search: { error: 'session-expired' },
+    })
+  }
+})
+```
+
+**⚠️ In React components, prefer `useNavigate` instead:**
+
+```tsx
+// ❌ Avoid in React components
+function Component() {
+  const router = useRouter()
+
+  const handleClick = () => {
+    router.navigate({ search: { filter: 'active' } })
+  }
+
+  return <button onClick={handleClick}>Filter</button>
+}
+
+// ✅ Use useNavigate in React components
+function Component() {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate({ search: { filter: 'active' } })
+  }
+
+  return <button onClick={handleClick}>Filter</button>
+}
+```
+
+## Advanced Navigation Patterns
+
+### Conditional Navigation
+
+Navigate automatically when certain conditions are met:
+
+```tsx
+import { useEffect } from 'react'
+import { useNavigate, useSearch } from '@tanstack/react-router'
+
+function ConditionalNavigation() {
+  const navigate = useNavigate()
+  const search = useSearch({ from: '/products' })
+
+  // Auto-reset page when search query changes
+  useEffect(() => {
+    if (search.query && search.page > 1) {
+      navigate({
+        search: (prev) => ({ ...prev, page: 1 }),
+      })
+    }
+  }, [search.query, search.page, navigate])
+
+  return <div>Page resets automatically when search changes</div>
+}
+```
+
+## Common Patterns
+
+## Common Problems
+
+### Search Parameters Not Updating
+
+**Problem:** Link navigation doesn't update search parameters.
+
+```tsx
+// ❌ Wrong - no search prop
+<Link to="/products">Electronics</Link>
+
+// ✅ Correct - with search parameters
+<Link to="/products" search={{ category: 'electronics' }}>
+  Electronics
+</Link>
+```
+
+### Losing Existing Search Parameters
+
+**Problem:** New navigation replaces all search parameters instead of updating specific ones.
+
+```tsx
+// ❌ Wrong - replaces all search params
+<Link search={{ page: 2 }}>Next Page</Link>
+
+// ✅ Correct - preserves existing search params
+<Link search={(prev) => ({ ...prev, page: 2 })}>
+  Next Page
+</Link>
+```
+
+## Common Next Steps
+
+After mastering navigation with search parameters, you might want to:
+
+- [Validate Search Parameters with Schemas](/router/how-to/validate-search-params) - Add robust validation with Zod, Valibot, or ArkType
+- [Work with Arrays, Objects, and Dates](/router/how-to/arrays-objects-dates-search-params) - Handle arrays, objects, dates, and nested data structures
+
+
+
+
+## Related Resources
+
+- [TanStack Router Search Params Guide](/router/guide/search-params) - Official documentation
diff --git a/mintlify/router/how-to/setup-auth-providers.md b/mintlify/router/how-to/setup-auth-providers.md
new file mode 100644
index 000000000..05dc61066
--- /dev/null
+++ b/mintlify/router/how-to/setup-auth-providers.md
@@ -0,0 +1,632 @@
+---
+title: How to Set Up Authentication Providers
+---
+
+This guide covers integrating popular authentication services (Auth0, Clerk, Supabase) with TanStack Router.
+
+## Quick Start
+
+Choose an authentication provider, install their SDK, wrap your router with their context, and adapt their auth state to work with TanStack Router's context system.
+
+---
+
+## Auth0 Integration
+
+### 1. Install Auth0
+
+```bash
+npm install @auth0/auth0-react
+```
+
+### 2. Set Up Environment Variables
+
+Add to your `.env` file:
+
+```env
+VITE_AUTH0_DOMAIN=your-auth0-domain.auth0.com
+VITE_AUTH0_CLIENT_ID=your_auth0_client_id
+```
+
+### 3. Create Auth0 Wrapper
+
+Create `src/auth/auth0.tsx`:
+
+```tsx
+import { Auth0Provider, useAuth0 } from '@auth0/auth0-react'
+import { createContext, useContext } from 'react'
+
+interface Auth0ContextType {
+  isAuthenticated: boolean
+  user: any
+  login: () => void
+  logout: () => void
+  isLoading: boolean
+}
+
+const Auth0Context = createContext<Auth0ContextType | undefined>(undefined)
+
+export function Auth0Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Auth0Provider
+      domain={import.meta.env.VITE_AUTH0_DOMAIN}
+      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+      }}
+    >
+      <Auth0ContextProvider>{children}</Auth0ContextProvider>
+    </Auth0Provider>
+  )
+}
+
+function Auth0ContextProvider({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, user, loginWithRedirect, logout, isLoading } =
+    useAuth0()
+
+  const contextValue = {
+    isAuthenticated,
+    user,
+    login: loginWithRedirect,
+    logout: () =>
+      logout({ logoutParams: { returnTo: window.location.origin } }),
+    isLoading,
+  }
+
+  return (
+    <Auth0Context.Provider value={contextValue}>
+      {children}
+    </Auth0Context.Provider>
+  )
+}
+
+export function useAuth0Context() {
+  const context = useContext(Auth0Context)
+  if (context === undefined) {
+    throw new Error('useAuth0Context must be used within Auth0Wrapper')
+  }
+  return context
+}
+```
+
+### 4. Update App Configuration
+
+Update `src/App.tsx`:
+
+```tsx
+import { RouterProvider } from '@tanstack/react-router'
+import { Auth0Wrapper, useAuth0Context } from './auth/auth0'
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useAuth0Context()
+
+  if (auth.isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        Loading...
+      </div>
+    )
+  }
+
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <Auth0Wrapper>
+      <InnerApp />
+    </Auth0Wrapper>
+  )
+}
+
+export default App
+```
+
+### 5. Create Protected Routes
+
+Create `src/routes/_authenticated.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated) {
+      // Auth0 handles login redirects, so just trigger login
+      context.auth.login()
+      return
+    }
+  },
+  component: () => <Outlet />,
+})
+```
+
+---
+
+## Clerk Integration
+
+### 1. Install Clerk
+
+```bash
+npm install @clerk/clerk-react
+```
+
+### 2. Set Up Environment Variables
+
+Add to your `.env` file:
+
+```env
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key
+```
+
+### 3. Create Clerk Wrapper
+
+Create `src/auth/clerk.tsx`:
+
+```tsx
+import { ClerkProvider, useUser, useAuth } from '@clerk/clerk-react'
+
+export function ClerkWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
+      {children}
+    </ClerkProvider>
+  )
+}
+
+export function useClerkAuth() {
+  const { isSignedIn, isLoaded } = useAuth()
+  const { user } = useUser()
+
+  return {
+    isAuthenticated: isSignedIn,
+    user: user
+      ? {
+          id: user.id,
+          username:
+            user.username || user.primaryEmailAddress?.emailAddress || '',
+          email: user.primaryEmailAddress?.emailAddress || '',
+        }
+      : null,
+    isLoading: !isLoaded,
+    login: () => {
+      // Clerk handles login through components
+      window.location.href = '/sign-in'
+    },
+    logout: () => {
+      // Clerk handles logout through components
+      window.location.href = '/sign-out'
+    },
+  }
+}
+```
+
+### 4. Create Clerk Auth Routes
+
+Create `src/routes/sign-in.tsx`:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn } from '@clerk/clerk-react'
+
+export const Route = createFileRoute('/sign-in')({
+  component: () => (
+    <div className="flex items-center justify-center min-h-screen">
+      <SignIn redirectUrl="/dashboard" signUpUrl="/sign-up" />
+    </div>
+  ),
+})
+```
+
+Create `src/routes/sign-up.tsx`:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { SignUp } from '@clerk/clerk-react'
+
+export const Route = createFileRoute('/sign-up')({
+  component: () => (
+    <div className="flex items-center justify-center min-h-screen">
+      <SignUp redirectUrl="/dashboard" signInUrl="/sign-in" />
+    </div>
+  ),
+})
+```
+
+### 5. Update App Configuration
+
+Update `src/App.tsx`:
+
+```tsx
+import { RouterProvider } from '@tanstack/react-router'
+import { ClerkWrapper, useClerkAuth } from './auth/clerk'
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useClerkAuth()
+
+  if (auth.isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        Loading...
+      </div>
+    )
+  }
+
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <ClerkWrapper>
+      <InnerApp />
+    </ClerkWrapper>
+  )
+}
+
+export default App
+```
+
+### 6. Create Protected Routes
+
+Create `src/routes/_authenticated.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated) {
+      throw redirect({
+        to: '/sign-in',
+        search: {
+          redirect: location.href,
+        },
+      })
+    }
+  },
+  component: () => <Outlet />,
+})
+```
+
+---
+
+## Supabase Integration
+
+### 1. Install Supabase
+
+```bash
+npm install @supabase/supabase-js
+```
+
+### 2. Set Up Environment Variables
+
+Add to your `.env` file:
+
+```env
+VITE_SUPABASE_URL=https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+```
+
+### 3. Create Supabase Client
+
+Create `src/auth/supabase.tsx`:
+
+```tsx
+import { createClient } from '@supabase/supabase-js'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+const supabase = createClient(
+  import.meta.env.VITE_SUPABASE_URL,
+  import.meta.env.VITE_SUPABASE_ANON_KEY,
+)
+
+interface SupabaseAuthState {
+  isAuthenticated: boolean
+  user: any
+  login: (email: string, password: string) => Promise<void>
+  logout: () => Promise<void>
+  isLoading: boolean
+}
+
+const SupabaseAuthContext = createContext<SupabaseAuthState | undefined>(
+  undefined,
+)
+
+export function SupabaseAuthProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [user, setUser] = useState(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null)
+      setIsAuthenticated(!!session?.user)
+      setIsLoading(false)
+    })
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null)
+      setIsAuthenticated(!!session?.user)
+      setIsLoading(false)
+    })
+
+    return () => subscription.unsubscribe()
+  }, [])
+
+  const login = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    })
+    if (error) throw error
+  }
+
+  const logout = async () => {
+    const { error } = await supabase.auth.signOut()
+    if (error) throw error
+  }
+
+  return (
+    <SupabaseAuthContext.Provider
+      value={{
+        isAuthenticated,
+        user,
+        login,
+        logout,
+        isLoading,
+      }}
+    >
+      {children}
+    </SupabaseAuthContext.Provider>
+  )
+}
+
+export function useSupabaseAuth() {
+  const context = useContext(SupabaseAuthContext)
+  if (context === undefined) {
+    throw new Error('useSupabaseAuth must be used within SupabaseAuthProvider')
+  }
+  return context
+}
+```
+
+### 4. Create Login Component
+
+Create `src/routes/login.tsx`:
+
+```tsx
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/login')({
+  validateSearch: (search) => ({
+    redirect: (search.redirect as string) || '/dashboard',
+  }),
+  beforeLoad: ({ context, search }) => {
+    if (context.auth.isAuthenticated) {
+      throw redirect({ to: search.redirect })
+    }
+  },
+  component: LoginComponent,
+})
+
+function LoginComponent() {
+  const { auth } = Route.useRouteContext()
+  const { redirect } = Route.useSearch()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      await auth.login(email, password)
+      // Supabase auth will automatically update context
+      window.location.href = redirect
+    } catch (err: any) {
+      setError(err.message || 'Login failed')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <form
+        onSubmit={handleSubmit}
+        className="max-w-md w-full space-y-4 p-6 border rounded-lg"
+      >
+        <h1 className="text-2xl font-bold text-center">Sign In</h1>
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            {error}
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium mb-1">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
+        >
+          {isLoading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+### 5. Update App Configuration
+
+Update `src/App.tsx`:
+
+```tsx
+import { RouterProvider } from '@tanstack/react-router'
+import { SupabaseAuthProvider, useSupabaseAuth } from './auth/supabase'
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useSupabaseAuth()
+
+  if (auth.isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        Loading...
+      </div>
+    )
+  }
+
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <SupabaseAuthProvider>
+      <InnerApp />
+    </SupabaseAuthProvider>
+  )
+}
+
+export default App
+```
+
+---
+
+## Provider Comparison
+
+| Feature                 | Auth0    | Clerk     | Supabase |
+| ----------------------- | -------- | --------- | -------- |
+| **Setup Complexity**    | Medium   | Low       | Medium   |
+| **UI Components**       | Basic    | Excellent | None     |
+| **Customization**       | High     | Medium    | High     |
+| **Pricing**             | Freemium | Freemium  | Freemium |
+| **Social Login**        | ✅       | ✅        | ✅       |
+| **Enterprise Features** | ✅       | ✅        | ✅       |
+| **Database Included**   | ❌       | ❌        | ✅       |
+
+### When to Choose Each:
+
+- **Auth0**: Complex enterprise requirements, extensive customization
+- **Clerk**: Quick setup with beautiful UI components
+- **Supabase**: Full-stack solution with database and real-time features
+
+---
+
+## Common Problems
+
+### Provider Context Not Available
+
+**Problem:** Auth context is undefined in components.
+
+**Solution:** Ensure the provider wrapper is above `RouterProvider`:
+
+```tsx
+// ✅ Correct order
+<AuthProvider>
+  <InnerApp>
+    <RouterProvider />
+  </InnerApp>
+</AuthProvider>
+
+// ❌ Wrong order
+<RouterProvider>
+  <AuthProvider />
+</RouterProvider>
+```
+
+### Infinite Loading States
+
+**Problem:** App stuck on loading screen.
+
+**Solution:** Check if auth provider properly sets `isLoading` to `false`:
+
+```tsx
+// Add timeout fallback
+useEffect(() => {
+  const timeout = setTimeout(() => {
+    if (isLoading) {
+      setIsLoading(false)
+    }
+  }, 5000)
+  return () => clearTimeout(timeout)
+}, [isLoading])
+```
+
+### Redirect Loops with Auth0
+
+**Problem:** Continuous redirects between login and protected routes.
+
+**Solution:** Handle Auth0's automatic redirects properly:
+
+```tsx
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: ({ context }) => {
+    if (!context.auth.isAuthenticated && !context.auth.isLoading) {
+      context.auth.login()
+      // Don't throw redirect, let Auth0 handle it
+      return
+    }
+  },
+  component: () => <Outlet />,
+})
+```
+
+---
+
+## Common Next Steps
+
+After integrating authentication providers, you might want to:
+
+- [How to Set Up Role-Based Access Control](/router/how-to/setup-rbac) - Add permission-based routing
+- [How to Set Up Basic Authentication](/router/how-to/setup-authentication) - Custom auth implementation
+
+
+
+
+## Related Resources
+
+- [Auth0 React SDK](https://auth0.com/docs/libraries/auth0-react) - Official Auth0 documentation
+- [Clerk React SDK](https://clerk.com/docs/references/react/overview) - Official Clerk documentation
+- [Supabase Auth](https://supabase.com/docs/guides/auth) - Official Supabase auth guide
diff --git a/mintlify/router/how-to/setup-authentication.md b/mintlify/router/how-to/setup-authentication.md
new file mode 100644
index 000000000..cef393d3d
--- /dev/null
+++ b/mintlify/router/how-to/setup-authentication.md
@@ -0,0 +1,483 @@
+---
+title: How to Set Up Basic Authentication and Protected Routes
+---
+
+This guide covers implementing basic authentication patterns and protecting routes in TanStack Router applications.
+
+## Quick Start
+
+Set up authentication by creating a context-aware router, implementing auth state management, and using `beforeLoad` for route protection. This guide focuses on the core authentication setup using React Context.
+
+---
+
+## Create Authentication Context
+
+Create `src/auth.tsx`:
+
+```tsx
+import React, { createContext, useContext, useState, useEffect } from 'react'
+
+interface User {
+  id: string
+  username: string
+  email: string
+}
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: User | null
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthState | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Restore auth state on app load
+  useEffect(() => {
+    const token = localStorage.getItem('auth-token')
+    if (token) {
+      // Validate token with your API
+      fetch('/api/validate-token', {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then((response) => response.json())
+        .then((userData) => {
+          if (userData.valid) {
+            setUser(userData.user)
+            setIsAuthenticated(true)
+          } else {
+            localStorage.removeItem('auth-token')
+          }
+        })
+        .catch(() => {
+          localStorage.removeItem('auth-token')
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    } else {
+      setIsLoading(false)
+    }
+  }, [])
+
+  // Show loading state while checking auth
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        Loading...
+      </div>
+    )
+  }
+
+  const login = async (username: string, password: string) => {
+    // Replace with your authentication logic
+    const response = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    })
+
+    if (response.ok) {
+      const userData = await response.json()
+      setUser(userData)
+      setIsAuthenticated(true)
+      // Store token for persistence
+      localStorage.setItem('auth-token', userData.token)
+    } else {
+      throw new Error('Authentication failed')
+    }
+  }
+
+  const logout = () => {
+    setUser(null)
+    setIsAuthenticated(false)
+    localStorage.removeItem('auth-token')
+  }
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+```
+
+---
+
+## Configure Router Context
+
+### 1. Set Up Router Context
+
+Update `src/routes/__root.tsx`:
+
+```tsx
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: { id: string; username: string; email: string } | null
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+}
+
+interface MyRouterContext {
+  auth: AuthState
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => (
+    <div>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </div>
+  ),
+})
+```
+
+### 2. Configure Router
+
+Update `src/router.tsx`:
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    // auth will be passed down from App component
+    auth: undefined!,
+  },
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+```
+
+### 3. Connect App with Authentication
+
+Update `src/App.tsx`:
+
+```tsx
+import { RouterProvider } from '@tanstack/react-router'
+import { AuthProvider, useAuth } from './auth'
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useAuth()
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <InnerApp />
+    </AuthProvider>
+  )
+}
+
+export default App
+```
+
+---
+
+## Create Protected Routes
+
+### 1. Create Authentication Layout Route
+
+Create `src/routes/_authenticated.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated) {
+      throw redirect({
+        to: '/login',
+        search: {
+          // Save current location for redirect after login
+          redirect: location.href,
+        },
+      })
+    }
+  },
+  component: () => <Outlet />,
+})
+```
+
+### 2. Create Login Route
+
+Create `src/routes/login.tsx`:
+
+```tsx
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/login')({
+  validateSearch: (search) => ({
+    redirect: (search.redirect as string) || '/',
+  }),
+  beforeLoad: ({ context, search }) => {
+    // Redirect if already authenticated
+    if (context.auth.isAuthenticated) {
+      throw redirect({ to: search.redirect })
+    }
+  },
+  component: LoginComponent,
+})
+
+function LoginComponent() {
+  const { auth } = Route.useRouteContext()
+  const { redirect } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      await auth.login(username, password)
+      // Navigate to the redirect URL using router navigation
+      navigate({ to: redirect })
+    } catch (err) {
+      setError('Invalid username or password')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <form
+        onSubmit={handleSubmit}
+        className="max-w-md w-full space-y-4 p-6 border rounded-lg"
+      >
+        <h1 className="text-2xl font-bold text-center">Sign In</h1>
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            {error}
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium mb-1">
+            Username
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium mb-1">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isLoading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+### 3. Create Protected Dashboard
+
+Create `src/routes/_authenticated/dashboard.tsx`:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const { auth } = Route.useRouteContext()
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <button
+          onClick={auth.logout}
+          className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
+        >
+          Sign Out
+        </button>
+      </div>
+
+      <div className="bg-white p-6 rounded-lg shadow">
+        <h2 className="text-xl font-semibold mb-2">Welcome back!</h2>
+        <p className="text-gray-600">
+          Hello, <strong>{auth.user?.username}</strong>! You are successfully
+          authenticated.
+        </p>
+        <p className="text-sm text-gray-500 mt-2">Email: {auth.user?.email}</p>
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Add Authentication Persistence
+
+Update your `AuthProvider` to restore authentication state on page refresh:
+
+```tsx
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Restore auth state on app load
+  useEffect(() => {
+    const token = localStorage.getItem('auth-token')
+    if (token) {
+      // Validate token with your API
+      fetch('/api/validate-token', {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then((response) => response.json())
+        .then((userData) => {
+          if (userData.valid) {
+            setUser(userData.user)
+            setIsAuthenticated(true)
+          } else {
+            localStorage.removeItem('auth-token')
+          }
+        })
+        .catch(() => {
+          localStorage.removeItem('auth-token')
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    } else {
+      setIsLoading(false)
+    }
+  }, [])
+
+  // Show loading state while checking auth
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        Loading...
+      </div>
+    )
+  }
+
+  // ... rest of the provider logic
+}
+```
+
+---
+
+## Production Checklist
+
+Before deploying authentication, ensure you have:
+
+- [ ] Secured API endpoints with proper authentication middleware
+- [ ] Set up HTTPS in production (required for secure cookies)
+- [ ] Configured environment variables for API endpoints
+- [ ] Implemented proper token validation and refresh
+- [ ] Added CSRF protection for form-based authentication
+- [ ] Tested authentication flows (login, logout, persistence)
+- [ ] Added proper error handling for network failures
+- [ ] Implemented loading states for auth operations
+
+---
+
+## Common Problems
+
+### Authentication Context Not Available
+
+**Problem:** `useAuth must be used within an AuthProvider` error.
+
+**Solution:** Ensure `AuthProvider` wraps your entire app and `RouterProvider` is inside it.
+
+### User Logged Out on Page Refresh
+
+**Problem:** Authentication state resets when page refreshes.
+
+**Solution:** Add token persistence as shown in the persistence section above.
+
+### Protected Route Flashing Before Redirect
+
+**Problem:** Protected content briefly shows before redirecting to login.
+
+**Solution:** Use `beforeLoad` instead of component-level auth checks:
+
+```tsx
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  beforeLoad: ({ context }) => {
+    if (!context.auth.isAuthenticated) {
+      throw redirect({ to: '/login' })
+    }
+  },
+  component: DashboardComponent,
+})
+```
+
+---
+
+## Common Next Steps
+
+After setting up basic authentication, you might want to:
+
+- [How to Integrate Authentication Providers](/router/how-to/setup-auth-providers) - Use Auth0, Clerk, or Supabase
+- [How to Set Up Role-Based Access Control](/router/how-to/setup-rbac) - Add permission-based routing
+
+
+
+
+## Related Resources
+
+- [Authenticated Routes Guide](/router/guide/authenticated-routes) - Detailed conceptual guide
+- [Router Context Guide](/router/guide/router-context) - Understanding context in TanStack Router
+- [Authentication Examples](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes) - Complete working examples
diff --git a/mintlify/router/how-to/setup-basic-search-params.md b/mintlify/router/how-to/setup-basic-search-params.md
new file mode 100644
index 000000000..8acaae413
--- /dev/null
+++ b/mintlify/router/how-to/setup-basic-search-params.md
@@ -0,0 +1,433 @@
+---
+title: How to Set Up Basic Search Parameters
+---
+
+Learn how to add type-safe, production-ready search parameters to your TanStack Router routes using schema validation. This guide covers the fundamentals of search parameter validation, reading values, and handling different data types with any standard schema-compliant validation library.
+
+## Quick Start
+
+Set up search parameters with schema validation (recommended for production):
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1).catch(1),
+  category: z.string().default('all').catch('all'),
+  showSale: z.boolean().default(false).catch(false),
+})
+
+export const Route = createFileRoute('/products')({
+  validateSearch: productSearchSchema,
+  component: ProductsPage,
+})
+
+function ProductsPage() {
+  const { page, category, showSale } = Route.useSearch()
+
+  return (
+    <div>
+      <h1>Products</h1>
+      <p>Page: {page}</p>
+      <p>Category: {category}</p>
+      <p>Show Sale Items: {showSale ? 'Yes' : 'No'}</p>
+    </div>
+  )
+}
+```
+
+## Why Use Schema Validation for Search Parameters?
+
+**Production Benefits:**
+
+- **Type Safety**: Automatic TypeScript inference
+- **Runtime Validation**: Catches invalid URL parameters gracefully
+- **Default Values**: Fallback handling for missing parameters
+- **Error Handling**: Built-in validation error management
+- **Maintainability**: Clear, declarative schema definitions
+
+## Validation Library Setup
+
+TanStack Router supports any standard schema-compliant validation library. This guide focuses on Zod for examples, but you can use any validation library.
+
+Using Zod v4:
+
+```tsx
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  page: z.number().default(1),
+  category: z.string().default('all').catch('all'),
+})
+
+export const Route = createFileRoute('/products')({
+  validateSearch: searchSchema,
+  component: ProductsPage,
+})
+```
+
+For Zod v3:
+
+```bash
+npm install zod @tanstack/zod-adapter
+```
+
+```tsx
+import { zodValidator, fallback } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  page: fallback(z.number(), 1).default(1),
+  category: fallback(z.string(), 'all').default('all'),
+})
+
+export const Route = createFileRoute('/products')({
+  validateSearch: zodValidator(searchSchema),
+  component: ProductsPage,
+})
+```
+
+**For detailed validation library comparisons and advanced validation patterns, see:** [Validate Search Parameters with Schemas](/router/how-to/validate-search-params)
+
+## Step-by-Step Setup with Zod
+
+The rest of this guide uses Zod v4 for examples, but the patterns apply to any validation library.
+
+### Step 1: Define Your Search Schema
+
+Start by identifying what search parameters your route needs:
+
+```tsx
+import { z } from 'zod'
+
+const shopSearchSchema = z.object({
+  // Pagination
+  page: z.number().default(1),
+  limit: z.number().default(20),
+
+  // Filtering
+  category: z.string().default('all'),
+  minPrice: z.number().default(0),
+  maxPrice: z.number().default(1000),
+
+  // Settings
+  sort: z.enum(['name', 'price', 'date']).default('name'),
+  ascending: z.boolean().default(true),
+
+  // Optional parameters
+  searchTerm: z.string().optional(),
+  showOnlyInStock: z.boolean().default(false),
+})
+
+type ShopSearch = z.infer<typeof shopSearchSchema>
+```
+
+### Step 2: Add Schema Validation to Route
+
+Connect your schema to the route:
+
+```tsx
+export const Route = createFileRoute('/shop')({
+  validateSearch: shopSearchSchema,
+  component: ShopPage,
+})
+```
+
+### Step 3: Read Search Parameters in Components
+
+Use the route's `useSearch()` hook to access validated and typed search parameters:
+
+```tsx
+function ShopPage() {
+  const searchParams = Route.useSearch()
+
+  // All properties are fully type-safe and validated
+  const {
+    page,
+    limit,
+    category,
+    sort,
+    ascending,
+    searchTerm,
+    showOnlyInStock,
+  } = searchParams
+
+  return (
+    <div>
+      <h1>Shop - Page {page}</h1>
+      <div>Category: {category}</div>
+      <div>
+        Sort: {sort} ({ascending ? 'ascending' : 'descending'})
+      </div>
+      <div>Items per page: {limit}</div>
+      <div>In stock only: {showOnlyInStock ? 'Yes' : 'No'}</div>
+      {searchTerm && <div>Search: "{searchTerm}"</div>}
+    </div>
+  )
+}
+```
+
+## Common Search Parameter Patterns
+
+### Pagination with Constraints
+
+```tsx
+const paginationSchema = z.object({
+  page: z.number().min(1).default(1),
+  limit: z.number().min(10).max(100).default(20),
+})
+
+export const Route = createFileRoute('/posts')({
+  validateSearch: paginationSchema,
+  component: PostsPage,
+})
+
+function PostsPage() {
+  const { page, limit } = Route.useSearch()
+
+  // Calculate offset for API calls
+  const offset = (page - 1) * limit
+
+  return (
+    <div>
+      <h1>Posts (Page {page})</h1>
+      <p>Showing {limit} posts per page</p>
+      <p>Offset: {offset}</p>
+      {/* Render posts... */}
+    </div>
+  )
+}
+```
+
+### Enum Validation with Defaults
+
+```tsx
+const catalogSchema = z.object({
+  sort: z.enum(['name', 'date', 'price']).default('name'),
+  category: z.enum(['electronics', 'clothing', 'books', 'all']).default('all'),
+  ascending: z.boolean().default(true),
+})
+
+export const Route = createFileRoute('/catalog')({
+  validateSearch: catalogSchema,
+  component: CatalogPage,
+})
+```
+
+### Complex Data Types
+
+```tsx
+const dashboardSchema = z.object({
+  // Numbers with validation
+  userId: z.number().positive().default(1),
+  refreshInterval: z.number().min(1000).max(60000).default(5000),
+
+  // Strings with validation
+  theme: z.enum(['light', 'dark']).default('light'),
+  timezone: z.string().optional(),
+
+  // Arrays with validation
+  selectedIds: z.number().array().default([]),
+  tags: z.string().array().default([]),
+
+  // Objects with validation
+  filters: z
+    .object({
+      status: z.enum(['active', 'inactive']).optional(),
+      type: z.string().optional(),
+    })
+    .prefault({}),
+})
+```
+
+### Date and Advanced Types
+
+```tsx
+const reportSchema = z.object({
+  startDate: z.string().pipe(z.coerce.date()).optional(),
+  endDate: z.string().pipe(z.coerce.date()).optional(),
+  format: z.enum(['pdf', 'csv', 'excel']).default('pdf').catch('pdf'),
+  includeCharts: z.boolean().default(true),
+})
+```
+
+## Reading Search Parameters Outside Components
+
+### Using getRouteApi
+
+For code-split components or separate files:
+
+```tsx
+// components/ProductFilters.tsx
+import { getRouteApi } from '@tanstack/react-router'
+
+const routeApi = getRouteApi('/products')
+
+export function ProductFilters() {
+  const { category, sort, showSale } = routeApi.useSearch()
+
+  return (
+    <div>
+      <select value={category}>
+        <option value="all">All Categories</option>
+        <option value="electronics">Electronics</option>
+        <option value="clothing">Clothing</option>
+      </select>
+      {/* More filters... */}
+    </div>
+  )
+}
+```
+
+### Using useSearch with from
+
+```tsx
+import { useSearch } from '@tanstack/react-router'
+
+function GenericSearchDisplay() {
+  const search = useSearch({ from: '/products' })
+
+  return <div>Current filters: {JSON.stringify(search, null, 2)}</div>
+}
+```
+
+## Manual Validation (Understanding the Primitives)
+
+While schema validation is recommended for production, understanding manual validation helps you understand how search parameters work under the hood:
+
+```tsx
+// Educational example - use schema validation for production
+export const Route = createFileRoute('/example')({
+  validateSearch: (search: Record<string, unknown>) => ({
+    // Numbers need coercion from URL strings
+    page: Number(search.page) || 1,
+
+    // Strings can be cast with defaults
+    category: (search.category as string) || 'all',
+
+    // Booleans: TanStack Router auto-converts "true"/"false" to booleans
+    showSale: Boolean(search.showSale),
+
+    // Arrays need JSON parsing validation
+    selectedIds: Array.isArray(search.selectedIds)
+      ? search.selectedIds.map(Number).filter(Boolean)
+      : [],
+  }),
+  component: ExamplePage,
+})
+```
+
+## Production Checklist
+
+- [x] **Use schema validation** with a validation library for type safety and runtime validation
+- [x] **Add fallback values** for graceful error handling
+- [x] **Set default values** for optional parameters
+- [x] **Validate constraints** using your validation library's built-in validators
+- [x] **Handle optional parameters** appropriately
+- [x] **Type inference** works automatically with proper schema setup
+- [x] **Error boundaries** are configured to handle validation failures
+
+## Common Problems
+
+### Problem: Search Parameters Cause TypeScript Errors
+
+**Cause:** Missing or incorrect schema definition.
+
+**Solution:** Ensure your schema covers all search parameters and use proper types:
+
+```tsx
+// ❌ Missing schema or incorrect types
+export const Route = createFileRoute('/page')({
+  component: MyPage,
+})
+
+// ✅ Complete schema with proper validation
+const searchSchema = z.object({
+  page: z.number().default(1).catch(1),
+  category: z.string().default('all').catch('all'),
+})
+
+export const Route = createFileRoute('/page')({
+  validateSearch: searchSchema,
+  component: MyPage,
+})
+```
+
+### Problem: Invalid URL Parameters Break the App
+
+**Cause:** Not using fallback handling for error cases.
+
+**Solution:** Use fallback values to provide safe defaults:
+
+```tsx
+// ❌ No fallback handling
+const schema = z.object({
+  page: z.number().default(1), // Will throw on invalid input
+})
+
+// ✅ Graceful fallback handling
+const schema = z.object({
+  page: z.number().default(1).catch(1), // Safe fallback to 1
+})
+```
+
+### Problem: Optional Parameters Are Required by TypeScript
+
+**Cause:** Using `.default()` makes parameters required in navigation.
+
+**Solution:** Use `.optional()` for truly optional parameters:
+
+```tsx
+const schema = z.object({
+  // Required with default (navigation can omit, but always present in component)
+  page: z.number().default(1).catch(1),
+
+  // Truly optional (can be undefined in component)
+  searchTerm: z.string().optional(),
+})
+```
+
+### Problem: Complex Objects Not Validating
+
+**Cause:** Nested objects need explicit schema definition.
+
+**Solution:** Define complete nested schemas:
+
+```tsx
+const schema = z.object({
+  filters: z
+    .object({
+      status: z.enum(['active', 'inactive']).optional(),
+      tags: z.string().array().optional(),
+      dateRange: z
+        .object({
+          start: z.string().pipe(z.coerce.date()),
+          end: z.string().pipe(z.coerce.date()),
+        })
+        .optional(),
+    })
+    .prefault({})
+    .catch({}),
+})
+```
+
+## Common Next Steps
+
+After setting up basic search parameters, you might want to:
+
+- [Validate Search Parameters with Schemas](/router/how-to/validate-search-params) - Add robust validation with Zod, Valibot, or ArkType
+- [Navigate with Search Parameters](/router/how-to/navigate-with-search-params) - Learn to update search params with Links and navigation
+- [Work with Arrays, Objects, and Dates](/router/how-to/arrays-objects-dates-search-params) - Handle arrays, objects, dates, and nested data structures
+
+## Related Resources
+
+- **Validation Libraries:**
+  - [Zod Documentation](https://zod.dev/) - Complete validation library reference
+  - [Valibot Documentation](https://valibot.dev/) - Lightweight validation library
+  - [Yup Documentation](https://github.com/jquense/yup) - Object schema validation
+- **TanStack Router:**
+  - [TanStack Zod Adapter](/router/api/router/zodValidator) - Official Zod adapter
+  - [TanStack Valibot Adapter](/router/api/router/valibotValidator) - Official Valibot adapter
+  - [Search Parameters Guide](/router/guide/search-params) - Comprehensive search parameters documentation
+  - [Type Safety Guide](/router/guide/type-safety) - Understanding TanStack Router's type safety
diff --git a/mintlify/router/how-to/setup-rbac.md b/mintlify/router/how-to/setup-rbac.md
new file mode 100644
index 000000000..7f9030212
--- /dev/null
+++ b/mintlify/router/how-to/setup-rbac.md
@@ -0,0 +1,736 @@
+---
+title: How to Set Up Role-Based Access Control
+---
+
+This guide covers implementing role-based access control (RBAC) and permission-based routing in TanStack Router applications.
+
+## Quick Start
+
+Extend your authentication context to include roles and permissions, create role-protected layout routes, and use `beforeLoad` to check user permissions before rendering routes.
+
+---
+
+## Extend Authentication Context
+
+### 1. Add Roles to User Type
+
+Update your authentication context to include roles:
+
+```tsx
+// src/auth.tsx
+import React, { createContext, useContext, useState } from 'react'
+
+interface User {
+  id: string
+  username: string
+  email: string
+  roles: string[]
+  permissions: string[]
+}
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: User | null
+  hasRole: (role: string) => boolean
+  hasAnyRole: (roles: string[]) => boolean
+  hasPermission: (permission: string) => boolean
+  hasAnyPermission: (permissions: string[]) => boolean
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthState | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  const hasRole = (role: string) => {
+    return user?.roles.includes(role) ?? false
+  }
+
+  const hasAnyRole = (roles: string[]) => {
+    return roles.some((role) => user?.roles.includes(role)) ?? false
+  }
+
+  const hasPermission = (permission: string) => {
+    return user?.permissions.includes(permission) ?? false
+  }
+
+  const hasAnyPermission = (permissions: string[]) => {
+    return (
+      permissions.some((permission) =>
+        user?.permissions.includes(permission),
+      ) ?? false
+    )
+  }
+
+  const login = async (username: string, password: string) => {
+    const response = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    })
+
+    if (response.ok) {
+      const userData = await response.json()
+      setUser(userData)
+      setIsAuthenticated(true)
+    } else {
+      throw new Error('Authentication failed')
+    }
+  }
+
+  const logout = () => {
+    setUser(null)
+    setIsAuthenticated(false)
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        isAuthenticated,
+        user,
+        hasRole,
+        hasAnyRole,
+        hasPermission,
+        hasAnyPermission,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+```
+
+### 2. Update Router Context Types
+
+Update `src/routes/__root.tsx`:
+
+```tsx
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: {
+    id: string
+    username: string
+    email: string
+    roles: string[]
+    permissions: string[]
+  } | null
+  hasRole: (role: string) => boolean
+  hasAnyRole: (roles: string[]) => boolean
+  hasPermission: (permission: string) => boolean
+  hasAnyPermission: (permissions: string[]) => boolean
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+}
+
+interface MyRouterContext {
+  auth: AuthState
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => (
+    <div>
+      <Outlet />
+    </div>
+  ),
+})
+```
+
+---
+
+## Create Role-Protected Routes
+
+### 1. Admin-Only Routes
+
+Create `src/routes/_authenticated/_admin.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/_admin')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.hasRole('admin')) {
+      throw redirect({
+        to: '/unauthorized',
+        search: {
+          redirect: location.href,
+        },
+      })
+    }
+  },
+  component: AdminLayout,
+})
+
+function AdminLayout() {
+  return (
+    <div>
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        <strong>Admin Area:</strong> You have administrative privileges.
+      </div>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+### 2. Multiple Role Access
+
+Create `src/routes/_authenticated/_moderator.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/_moderator')({
+  beforeLoad: ({ context, location }) => {
+    const allowedRoles = ['admin', 'moderator']
+    if (!context.auth.hasAnyRole(allowedRoles)) {
+      throw redirect({
+        to: '/unauthorized',
+        search: {
+          redirect: location.href,
+          reason: 'insufficient_role',
+        },
+      })
+    }
+  },
+  component: ModeratorLayout,
+})
+
+function ModeratorLayout() {
+  const { auth } = Route.useRouteContext()
+
+  return (
+    <div>
+      <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
+        <strong>Moderator Area:</strong> Role: {auth.user?.roles.join(', ')}
+      </div>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+### 3. Permission-Based Routes
+
+Create `src/routes/_authenticated/_users.tsx`:
+
+```tsx
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/_users')({
+  beforeLoad: ({ context, location }) => {
+    const requiredPermissions = ['users:read', 'users:write']
+    if (!context.auth.hasAnyPermission(requiredPermissions)) {
+      throw redirect({
+        to: '/unauthorized',
+        search: {
+          redirect: location.href,
+          reason: 'insufficient_permissions',
+        },
+      })
+    }
+  },
+  component: () => <Outlet />,
+})
+```
+
+---
+
+## Create Specific Protected Pages
+
+### 1. Admin Dashboard
+
+Create `src/routes/_authenticated/_admin/dashboard.tsx`:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/_admin/dashboard')({
+  component: AdminDashboard,
+})
+
+function AdminDashboard() {
+  const { auth } = Route.useRouteContext()
+
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-2">User Management</h2>
+          <p className="text-gray-600">Manage all users in the system</p>
+          <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+            View Users
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-2">System Settings</h2>
+          <p className="text-gray-600">Configure system-wide settings</p>
+          <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
+            Open Settings
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-2">Reports</h2>
+          <p className="text-gray-600">View system reports and analytics</p>
+          <button className="mt-4 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
+            View Reports
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-8 bg-gray-100 p-4 rounded">
+        <h3 className="font-semibold">Your Info:</h3>
+        <p>Username: {auth.user?.username}</p>
+        <p>Roles: {auth.user?.roles.join(', ')}</p>
+        <p>Permissions: {auth.user?.permissions.join(', ')}</p>
+      </div>
+    </div>
+  )
+}
+```
+
+### 2. User Management Page
+
+Create `src/routes/_authenticated/_users/manage.tsx`:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/_users/manage')({
+  beforeLoad: ({ context }) => {
+    // Additional permission check at the page level
+    if (!context.auth.hasPermission('users:write')) {
+      throw new Error('You need write permissions to manage users')
+    }
+  },
+  component: UserManagement,
+})
+
+function UserManagement() {
+  const { auth } = Route.useRouteContext()
+
+  const canEdit = auth.hasPermission('users:write')
+  const canDelete = auth.hasPermission('users:delete')
+
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold mb-6">User Management</h1>
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <table className="min-w-full">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Name
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Email
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Role
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            <tr>
+              <td className="px-6 py-4 whitespace-nowrap">John Doe</td>
+              <td className="px-6 py-4 whitespace-nowrap">john@example.com</td>
+              <td className="px-6 py-4 whitespace-nowrap">
+                <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+                  User
+                </span>
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm">
+                {canEdit && (
+                  <button className="text-blue-600 hover:text-blue-900 mr-4">
+                    Edit
+                  </button>
+                )}
+                {canDelete && (
+                  <button className="text-red-600 hover:text-red-900">
+                    Delete
+                  </button>
+                )}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-6 p-4 bg-blue-50 rounded">
+        <h3 className="font-semibold text-blue-800">Your Permissions:</h3>
+        <ul className="text-blue-700 text-sm">
+          {auth.user?.permissions.map((permission) => (
+            <li key={permission}>✓ {permission}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Create Unauthorized Page
+
+Create `src/routes/unauthorized.tsx`:
+
+```tsx
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/unauthorized')({
+  validateSearch: (search) => ({
+    redirect: (search.redirect as string) || '/dashboard',
+    reason: (search.reason as string) || 'insufficient_permissions',
+  }),
+  component: UnauthorizedPage,
+})
+
+function UnauthorizedPage() {
+  const { redirect, reason } = Route.useSearch()
+  const { auth } = Route.useRouteContext()
+
+  const reasonMessages = {
+    insufficient_role: 'You do not have the required role to access this page.',
+    insufficient_permissions:
+      'You do not have the required permissions to access this page.',
+    default: 'You are not authorized to access this page.',
+  }
+
+  const message =
+    reasonMessages[reason as keyof typeof reasonMessages] ||
+    reasonMessages.default
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
+        <div className="mb-6">
+          <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
+            <svg
+              className="w-8 h-8 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h1>
+        <p className="text-gray-600 mb-6">{message}</p>
+
+        <div className="mb-6 text-sm text-gray-500">
+          <p>
+            <strong>Your roles:</strong> {auth.user?.roles.join(', ') || 'None'}
+          </p>
+          <p>
+            <strong>Your permissions:</strong>{' '}
+            {auth.user?.permissions.join(', ') || 'None'}
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Link
+            to="/dashboard"
+            className="block w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors"
+          >
+            Go to Dashboard
+          </Link>
+
+          <Link
+            to={redirect}
+            className="block w-full bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 transition-colors"
+          >
+            Try Again
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Component-Level Permission Checks
+
+### 1. Conditional Rendering Hook
+
+Create `src/hooks/usePermissions.ts`:
+
+```tsx
+import { useRouter } from '@tanstack/react-router'
+
+export function usePermissions() {
+  const router = useRouter()
+  const auth = router.options.context.auth
+
+  return {
+    hasRole: auth.hasRole,
+    hasAnyRole: auth.hasAnyRole,
+    hasPermission: auth.hasPermission,
+    hasAnyPermission: auth.hasAnyPermission,
+    user: auth.user,
+  }
+}
+```
+
+### 2. Permission Guard Component
+
+Create `src/components/PermissionGuard.tsx`:
+
+```tsx
+interface PermissionGuardProps {
+  children: React.ReactNode
+  roles?: string[]
+  permissions?: string[]
+  requireAll?: boolean
+  fallback?: React.ReactNode
+}
+
+export function PermissionGuard({
+  children,
+  roles = [],
+  permissions = [],
+  requireAll = false,
+  fallback = null,
+}: PermissionGuardProps) {
+  const { hasAnyRole, hasAnyPermission, hasRole, hasPermission } =
+    usePermissions()
+
+  const hasRequiredRoles =
+    roles.length === 0 ||
+    (requireAll ? roles.every((role) => hasRole(role)) : hasAnyRole(roles))
+
+  const hasRequiredPermissions =
+    permissions.length === 0 ||
+    (requireAll
+      ? permissions.every((permission) => hasPermission(permission))
+      : hasAnyPermission(permissions))
+
+  if (hasRequiredRoles && hasRequiredPermissions) {
+    return <>{children}</>
+  }
+
+  return <>{fallback}</>
+}
+```
+
+### 3. Using Permission Guards
+
+```tsx
+import { PermissionGuard } from '../components/PermissionGuard'
+
+function SomeComponent() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+
+      <PermissionGuard roles={['admin']}>
+        <button className="bg-red-600 text-white px-4 py-2 rounded">
+          Admin Only Button
+        </button>
+      </PermissionGuard>
+
+      <PermissionGuard
+        permissions={['users:write']}
+        fallback={<p className="text-gray-500">You cannot edit users</p>}
+      >
+        <button className="bg-blue-600 text-white px-4 py-2 rounded">
+          Edit Users
+        </button>
+      </PermissionGuard>
+
+      <PermissionGuard
+        roles={['admin', 'moderator']}
+        permissions={['content:moderate']}
+        requireAll={true}
+      >
+        <button className="bg-yellow-600 text-white px-4 py-2 rounded">
+          Moderate Content (Admin/Mod + Permission)
+        </button>
+      </PermissionGuard>
+    </div>
+  )
+}
+```
+
+---
+
+## Advanced Permission Patterns
+
+### 1. Resource-Based Permissions
+
+```tsx
+// Check if user can edit a specific resource
+function canEditResource(auth: AuthState, resourceId: string, ownerId: string) {
+  // Admin can edit anything
+  if (auth.hasRole('admin')) return true
+
+  // Owner can edit their own resources
+  if (auth.user?.id === ownerId && auth.hasPermission('resource:edit:own'))
+    return true
+
+  // Moderators can edit with permission
+  if (auth.hasRole('moderator') && auth.hasPermission('resource:edit:any'))
+    return true
+
+  return false
+}
+
+// Usage in component
+function ResourceEditor({ resource }) {
+  const { auth } = Route.useRouteContext()
+
+  if (!canEditResource(auth, resource.id, resource.ownerId)) {
+    return <div>You cannot edit this resource</div>
+  }
+
+  return <EditForm resource={resource} />
+}
+```
+
+### 2. Time-Based Permissions
+
+```tsx
+function hasTimeBasedPermission(auth: AuthState, permission: string) {
+  const userPermissions = auth.user?.permissions || []
+  const hasPermission = userPermissions.includes(permission)
+
+  // Check if permission has time restrictions
+  const timeRestricted = userPermissions.find((p) =>
+    p.startsWith(`${permission}:time:`),
+  )
+
+  if (timeRestricted) {
+    const [, , startHour, endHour] = timeRestricted.split(':')
+    const currentHour = new Date().getHours()
+    return (
+      currentHour >= parseInt(startHour) && currentHour <= parseInt(endHour)
+    )
+  }
+
+  return hasPermission
+}
+```
+
+---
+
+## Common Problems
+
+### Role/Permission Data Not Loading
+
+**Problem:** User roles/permissions are undefined in routes.
+
+**Solution:** Ensure your authentication API returns complete user data:
+
+```tsx
+const login = async (username: string, password: string) => {
+  const response = await fetch('/api/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username, password }),
+  })
+
+  if (response.ok) {
+    const userData = await response.json()
+    // Ensure userData includes roles and permissions
+    console.log('User data:', userData) // Debug log
+    setUser(userData)
+    setIsAuthenticated(true)
+  }
+}
+```
+
+### Permission Checks Too Restrictive
+
+**Problem:** Users locked out of areas they should access.
+
+**Solution:** Use hierarchical permissions and role inheritance:
+
+```tsx
+const roleHierarchy = {
+  admin: ['admin', 'moderator', 'user'],
+  moderator: ['moderator', 'user'],
+  user: ['user'],
+}
+
+const hasRole = (requiredRole: string) => {
+  const userRoles = user?.roles || []
+  return userRoles.some((userRole) =>
+    roleHierarchy[userRole]?.includes(requiredRole),
+  )
+}
+```
+
+### Performance Issues with Many Permission Checks
+
+**Problem:** Too many permission checks slowing down renders.
+
+**Solution:** Memoize permission computations:
+
+```tsx
+import { useMemo } from 'react'
+
+function usePermissions() {
+  const { auth } = Route.useRouteContext()
+
+  const permissions = useMemo(
+    () => ({
+      canEditUsers: auth.hasPermission('users:write'),
+      canDeleteUsers: auth.hasPermission('users:delete'),
+      isAdmin: auth.hasRole('admin'),
+      isModerator: auth.hasAnyRole(['admin', 'moderator']),
+    }),
+    [auth.user?.roles, auth.user?.permissions],
+  )
+
+  return permissions
+}
+```
+
+---
+
+## Common Next Steps
+
+After setting up RBAC, you might want to:
+
+- [How to Set Up Basic Authentication](/router/how-to/setup-authentication) - Core auth implementation
+- [How to Integrate Authentication Providers](/router/how-to/setup-auth-providers) - Use external auth services
+
+
+
+
+## Related Resources
+
+- [Authenticated Routes Guide](/router/guide/authenticated-routes) - Core authentication concepts
+- [Router Context Guide](/router/guide/router-context) - Understanding router context
+- [RBAC Best Practices](https://auth0.com/docs/manage-users/access-control/rbac) - General RBAC principles
diff --git a/mintlify/router/how-to/setup-ssr.md b/mintlify/router/how-to/setup-ssr.md
new file mode 100644
index 000000000..f7d478e70
--- /dev/null
+++ b/mintlify/router/how-to/setup-ssr.md
@@ -0,0 +1,553 @@
+---
+title: How to Set Up Server-Side Rendering (SSR)
+---
+
+> [!IMPORTANT]
+> **[TanStack Start](/start/framework/react/overview) is the recommended way to set up SSR** - it provides SSR, streaming, and deployment with zero configuration.
+
+> Use the manual setup below only if you need to integrate with an existing server.
+
+## Quick Start with TanStack Start
+
+```bash
+npx create-tsrouter-app@latest my-app --template start
+cd my-app
+npm run dev
+```
+
+## Manual SSR Setup
+
+### 1. Install Dependencies
+
+```bash
+npm install express compression
+npm install --save-dev @types/express
+```
+
+### 2. Create Shared Router Configuration
+
+```tsx
+// src/router.tsx
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  return createTanstackRouter({
+    routeTree,
+    context: {
+      head: '', // For server-side head injection
+    },
+    defaultPreload: 'intent',
+  })
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+```
+
+### 3. Set Up Server Entry Point
+
+```tsx
+// src/entry-server.tsx
+import { pipeline } from 'node:stream/promises'
+import {
+  RouterServer,
+  createRequestHandler,
+  renderRouterToString,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+import type express from 'express'
+
+export async function render({
+  req,
+  res,
+  head = '',
+}: {
+  head?: string
+  req: express.Request
+  res: express.Response
+}) {
+  // Convert Express request to Web API Request
+  const url = new URL(req.originalUrl || req.url, 'https://localhost:3000').href
+
+  const request = new Request(url, {
+    method: req.method,
+    headers: (() => {
+      const headers = new Headers()
+      for (const [key, value] of Object.entries(req.headers)) {
+        headers.set(key, value as any)
+      }
+      return headers
+    })(),
+  })
+
+  // Create request handler
+  const handler = createRequestHandler({
+    request,
+    createRouter: () => {
+      const router = createRouter()
+
+      // Inject server context (like head tags from Vite)
+      router.update({
+        context: {
+          ...router.options.context,
+          head: head,
+        },
+      })
+      return router
+    },
+  })
+
+  // Render to string (non-streaming)
+  const response = await handler(({ responseHeaders, router }) =>
+    renderRouterToString({
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+
+  // Convert Web API Response back to Express response
+  res.statusMessage = response.statusText
+  res.status(response.status)
+
+  response.headers.forEach((value, name) => {
+    res.setHeader(name, value)
+  })
+
+  // Stream response body
+  return pipeline(response.body as any, res)
+}
+```
+
+### 4. Set Up Client Entry Point
+
+```tsx
+// src/entry-client.tsx
+import { hydrateRoot } from 'react-dom/client'
+import { RouterClient } from '@tanstack/react-router/ssr/client'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document, <RouterClient router={router} />)
+```
+
+### 5. Configure Vite for SSR
+
+```ts
+// vite.config.ts
+import path from 'node:path'
+import url from 'node:url'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+const __filename = url.fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default defineConfig(({ isSsrBuild }) => ({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true,
+    }),
+    react(),
+  ],
+  build: isSsrBuild
+    ? {
+        // SSR build configuration
+        ssr: true,
+        outDir: 'dist/server',
+        emitAssets: true,
+        copyPublicDir: false,
+        rolldownOptions: {
+          input: path.resolve(__dirname, 'src/entry-server.tsx'),
+          output: {
+            entryFileNames: '[name].js',
+            chunkFileNames: 'assets/[name]-[hash].js',
+            assetFileNames: 'assets/[name]-[hash][extname]',
+          },
+        },
+      }
+    : {
+        // Client build configuration
+        outDir: 'dist/client',
+        emitAssets: true,
+        copyPublicDir: true,
+        rolldownOptions: {
+          input: path.resolve(__dirname, 'src/entry-client.tsx'),
+          output: {
+            entryFileNames: '[name].js',
+            chunkFileNames: 'assets/[name]-[hash].js',
+            assetFileNames: 'assets/[name]-[hash][extname]',
+          },
+        },
+      },
+}))
+```
+
+### 6. Update Root Route for HTML Structure
+
+```tsx
+// src/routes/__root.tsx
+import {
+  HeadContent,
+  Outlet,
+  createRootRouteWithContext,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+interface RouterContext {
+  head: string
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  head: () => ({
+    links: [
+      { rel: 'icon', href: '/favicon.ico' },
+      { rel: 'apple-touch-icon', href: '/logo192.png' },
+      { rel: 'manifest', href: '/manifest.json' },
+    ],
+    meta: [
+      {
+        charSet: 'UTF-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1.0',
+      },
+      {
+        title: 'TanStack Router SSR App',
+      },
+    ],
+    scripts: [
+      // Development scripts
+      ...(!import.meta.env.PROD
+        ? [
+            {
+              type: 'module',
+              children: `import RefreshRuntime from "/@react-refresh"
+                RefreshRuntime.injectIntoGlobalHook(window)
+                window.$RefreshReg$ = () => {}
+                window.$RefreshSig$ = () => (type) => type
+                window.__vite_plugin_react_preamble_installed__ = true`,
+            },
+            {
+              type: 'module',
+              src: '/@vite/client',
+            },
+          ]
+        : []),
+      // Entry script
+      {
+        type: 'module',
+        src: import.meta.env.PROD
+          ? '/entry-client.js'
+          : '/src/entry-client.tsx',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </body>
+    </html>
+  )
+}
+```
+
+### 7. Create Express Server
+
+```js
+// server.js
+import path from 'node:path'
+import express from 'express'
+import compression from 'compression'
+
+const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
+
+export async function createServer(
+  root = process.cwd(),
+  isProd = process.env.NODE_ENV === 'production',
+  hmrPort = process.env.VITE_DEV_SERVER_PORT,
+) {
+  const app = express()
+
+  let vite
+  if (!isProd) {
+    // Development mode with Vite middleware
+    vite = await (
+      await import('vite')
+    ).createServer({
+      root,
+      logLevel: isTest ? 'error' : 'info',
+      server: {
+        middlewareMode: true,
+        watch: {
+          usePolling: true,
+          interval: 100,
+        },
+        hmr: {
+          port: hmrPort,
+        },
+      },
+      appType: 'custom',
+    })
+    app.use(vite.middlewares)
+  } else {
+    // Production mode
+    app.use(compression())
+    app.use(express.static('./dist/client'))
+  }
+
+  app.use('*', async (req, res) => {
+    try {
+      const url = req.originalUrl
+
+      // Check for static assets
+      if (path.extname(url) !== '') {
+        console.warn(`${url} is not a valid router path`)
+        res.status(404).end(`${url} is not a valid router path`)
+        return
+      }
+
+      // Extract head content from Vite in development
+      let viteHead = ''
+      if (!isProd) {
+        const transformedHtml = await vite.transformIndexHtml(
+          url,
+          `<html><head></head><body></body></html>`,
+        )
+        viteHead = transformedHtml.substring(
+          transformedHtml.indexOf('<head>') + 6,
+          transformedHtml.indexOf('</head>'),
+        )
+      }
+
+      // Load server entry
+      const entry = await (async () => {
+        if (!isProd) {
+          return vite.ssrLoadModule('/src/entry-server.tsx')
+        } else {
+          return import('./dist/server/entry-server.js')
+        }
+      })()
+
+      console.info('Rendering:', url)
+      await entry.render({ req, res, head: viteHead })
+    } catch (e) {
+      !isProd && vite.ssrFixStacktrace(e)
+      console.error(e.stack)
+      res.status(500).end(e.stack)
+    }
+  })
+
+  return { app, vite }
+}
+
+if (!isTest) {
+  createServer().then(({ app }) =>
+    app.listen(3000, () => {
+      console.info('Server running at http://localhost:3000')
+    }),
+  )
+}
+```
+
+### 8. Update Package Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build",
+    "build:server": "vite build --ssr",
+    "start": "NODE_ENV=production node server.js"
+  }
+}
+```
+
+## Streaming SSR
+
+For better performance, enable streaming SSR by replacing `renderRouterToString` with `renderRouterToStream`:
+
+```tsx
+// src/entry-server.tsx
+import { renderRouterToStream } from '@tanstack/react-router/ssr/server'
+
+// Replace renderRouterToString with:
+const response = await handler(({ request, responseHeaders, router }) =>
+  renderRouterToStream({
+    request,
+    responseHeaders,
+    router,
+    children: <RouterServer router={router} />,
+  }),
+)
+```
+
+### Streaming Vite Configuration
+
+For streaming SSR, update your Vite config:
+
+```ts
+// vite.config.ts
+export default defineConfig(({ isSsrBuild }) => ({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true,
+      enableStreaming: true, // Enable streaming support
+    }),
+    react(),
+  ],
+  // ... rest of config
+  ssr: {
+    optimizeDeps: {
+      include: ['@tanstack/react-router/ssr/server'],
+    },
+  },
+}))
+```
+
+## Common Problems
+
+> [!TIP]
+> **Most of these problems are automatically solved by [TanStack Start](/start/framework/react/overview).** The issues below are primarily relevant for manual SSR setups.
+
+### React Import Errors
+
+**Problem:** `ReferenceError: React is not defined` during SSR
+
+**Solution:** Ensure React is properly imported in components:
+
+```tsx
+// In your route components
+import React from 'react' // Add explicit import
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div>Hello World</div>, // React is now available
+})
+```
+
+### Hydration Mismatches
+
+**Problem:** Client HTML doesn't match server HTML
+
+**Solution:** Ensure consistent rendering between server and client:
+
+```tsx
+// Use useIsomorphicLayoutEffect for browser-only effects
+import { useLayoutEffect, useEffect } from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+function MyComponent() {
+  useIsomorphicLayoutEffect(() => {
+    // Browser-only code that won't cause hydration mismatches
+  }, [])
+}
+```
+
+### Bun Runtime Issues
+
+**Problem:** `Cannot find module "react-dom/server"` with Bun
+
+**Solution:** Use Node.js compatibility or create Bun-specific builds:
+
+```json
+{
+  "scripts": {
+    "build:bun": "bun build --target=bun --outdir=dist/bun src/entry-server.tsx"
+  }
+}
+```
+
+### Module Resolution Errors
+
+**Problem:** SSR modules not resolving correctly
+
+**Solution:** Configure Vite SSR externals:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  ssr: {
+    noExternal: [
+      // Packages that need to be bundled for SSR
+      '@tanstack/react-router',
+    ],
+    external: [
+      // Packages that should remain external
+      'express',
+    ],
+  },
+})
+```
+
+### Streaming Configuration Issues
+
+**Problem:** Streaming SSR not working with existing Vite setup
+
+**Solution:** Ensure proper streaming configuration:
+
+```ts
+// vite.config.ts - Additional streaming config
+export default defineConfig({
+  define: {
+    'process.env.STREAMING_SSR': JSON.stringify(true),
+  },
+  optimizeDeps: {
+    include: ['@tanstack/react-router/ssr/server'],
+  },
+})
+```
+
+### Build Output Issues
+
+**Problem:** Server build missing assets or incorrect paths
+
+**Solution:** Verify build configuration:
+
+```ts
+// vite.config.ts
+const ssrConfig = {
+  ssr: true,
+  outDir: 'dist/server',
+  ssrEmitAssets: true, // Important for asset handling
+  copyPublicDir: false,
+  rolldownOptions: {
+    input: path.resolve(__dirname, 'src/entry-server.tsx'),
+    external: ['express', 'compression'], // External deps
+  },
+}
+```
+
+## Related Resources
+
+- [TanStack Start](/start/framework/react/overview) - **Recommended full-stack React framework with SSR**
+- [SSR Guide (Detailed)](/router/guide/ssr) - Comprehensive SSR concepts, utilities, and theory
+- [Data Loading](/router/guide/data-loading) - SSR-compatible data loading patterns
+
+## Common Next Steps
+
+- [Deploy to Production](/router/how-to/deploy-to-production) - Deploy your SSR app
+- [Setup Authentication](/router/how-to/setup-authentication) - Add auth to SSR routes
+- [Debug Router Issues](/router/how-to/debug-router-issues) - Troubleshoot SSR-specific routing problems
+
+
+
diff --git a/mintlify/router/how-to/setup-testing.md b/mintlify/router/how-to/setup-testing.md
new file mode 100644
index 000000000..22e171c36
--- /dev/null
+++ b/mintlify/router/how-to/setup-testing.md
@@ -0,0 +1,973 @@
+# How to Set Up Testing with Code-Based Routing
+
+This guide covers setting up comprehensive testing for TanStack Router applications that use code-based routing, including unit tests, integration tests, and end-to-end testing strategies.
+
+## Quick Start
+
+Set up testing by configuring your test framework (Vitest/Jest), creating router test utilities, and implementing patterns for testing navigation, route components, and data loading with manually defined routes.
+
+> **Using File-Based Routing?** See [How to Test File-Based Routing](/router/how-to/test-file-based-routing) for patterns specific to file-based routing applications.
+
+---
+
+## Configure Test Framework
+
+### 1. Install Dependencies
+
+For **Vitest** (recommended):
+
+```bash
+npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom
+```
+
+For **Jest**:
+
+```bash
+npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom
+```
+
+### 2. Configure Vitest
+
+Create `vitest.config.ts`:
+
+```ts
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    typecheck: { enabled: true },
+    watch: false,
+  },
+})
+```
+
+### 3. Create Test Setup
+
+Create `src/test/setup.ts`:
+
+```ts
+import '@testing-library/jest-dom/vitest'
+
+// @ts-expect-error
+global.IS_REACT_ACT_ENVIRONMENT = true
+```
+
+---
+
+## Code-Based Router Testing Patterns
+
+The following patterns are specifically designed for applications using code-based routing where you manually create routes with `createRoute()` and build route trees programmatically.
+
+### 1. TanStack Router Internal Pattern (Recommended)
+
+The TanStack Router team uses this pattern internally for testing router components:
+
+```tsx
+import { beforeEach, afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import {
+  RouterProvider,
+  createBrowserHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import type { RouterHistory } from '@tanstack/react-router'
+
+let history: RouterHistory
+
+beforeEach(() => {
+  history = createBrowserHistory()
+  expect(window.location.pathname).toBe('/')
+})
+
+afterEach(() => {
+  history.destroy()
+  window.history.replaceState(null, 'root', '/')
+  vi.clearAllMocks()
+  vi.resetAllMocks()
+  cleanup()
+})
+
+describe('Router Component Testing', () => {
+  test('should render route component', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <h1>IndexTitle</h1>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree, history })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('IndexTitle')).toBeInTheDocument()
+  })
+})
+```
+
+### 2. Alternative: Router Test Utilities (For Simpler Cases)
+
+Create `src/test/router-utils.tsx`:
+
+```tsx
+import React from 'react'
+import { render, RenderOptions } from '@testing-library/react'
+import {
+  createRouter,
+  createRootRoute,
+  createRoute,
+  RouterProvider,
+  Outlet,
+} from '@tanstack/react-router'
+import { createMemoryHistory } from '@tanstack/react-router'
+
+// Create a root route for testing
+const rootRoute = createRootRoute({
+  component: () => <Outlet />,
+})
+
+// Test router factory
+export function createTestRouter(routes: any[], initialLocation = '/') {
+  const routeTree = rootRoute.addChildren(routes)
+
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: [initialLocation],
+    }),
+  })
+
+  return router
+}
+
+// Wrapper component for testing
+interface RouterWrapperProps {
+  children: React.ReactNode
+  router: any
+}
+
+function RouterWrapper({ children, router }: RouterWrapperProps) {
+  return <RouterProvider router={router}>{children}</RouterProvider>
+}
+
+// Custom render function with router
+interface RenderWithRouterOptions extends Omit<RenderOptions, 'wrapper'> {
+  router?: any
+  initialLocation?: string
+  routes?: any[]
+}
+
+export function renderWithRouter(
+  ui: React.ReactElement,
+  {
+    router,
+    initialLocation = '/',
+    routes = [],
+    ...renderOptions
+  }: RenderWithRouterOptions = {},
+) {
+  if (!router && routes.length > 0) {
+    router = createTestRouter(routes, initialLocation)
+  }
+
+  if (!router) {
+    throw new Error(
+      'Router is required. Provide either a router or routes array.',
+    )
+  }
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return <RouterWrapper router={router}>{children}</RouterWrapper>
+  }
+
+  return {
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+    router,
+  }
+}
+```
+
+### 2. Mock Route Factory
+
+Create `src/test/mock-routes.tsx`:
+
+```tsx
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from './router-utils'
+
+export const createMockRoute = (
+  path: string,
+  component: React.ComponentType,
+  options: any = {},
+) => {
+  return createRoute({
+    getParentRoute: () => rootRoute,
+    path,
+    component,
+    ...options,
+  })
+}
+
+// Common test components
+export function TestComponent({ title = 'Test' }: { title?: string }) {
+  return <div data-testid="test-component">{title}</div>
+}
+
+export function LoadingComponent() {
+  return <div data-testid="loading">Loading...</div>
+}
+
+export function ErrorComponent({ error }: { error: Error }) {
+  return <div data-testid="error">Error: {error.message}</div>
+}
+```
+
+---
+
+## Test Code-Based Route Components
+
+### 1. Basic Component Testing
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { createRoute } from '@tanstack/react-router'
+import {
+  renderWithRouter,
+  rootRoute,
+  TestComponent,
+} from '../test/router-utils'
+
+describe('Code-Based Route Component Testing', () => {
+  it('should render route component', () => {
+    const testRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: TestComponent,
+    })
+
+    renderWithRouter(<div />, {
+      routes: [testRoute],
+      initialLocation: '/',
+    })
+
+    expect(screen.getByTestId('test-component')).toBeInTheDocument()
+  })
+
+  it('should render component with props from route context', () => {
+    function ComponentWithContext() {
+      const { title } = Route.useLoaderData()
+      return <div data-testid="context-component">{title}</div>
+    }
+
+    const contextRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/context',
+      component: ComponentWithContext,
+      loader: () => ({ title: 'From Context' }),
+    })
+
+    renderWithRouter(<div />, {
+      routes: [contextRoute],
+      initialLocation: '/context',
+    })
+
+    expect(screen.getByText('From Context')).toBeInTheDocument()
+  })
+})
+```
+
+### 2. Testing Route Parameters
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { createRoute } from '@tanstack/react-router'
+import { renderWithRouter, rootRoute } from '../test/router-utils'
+
+describe('Route Parameters', () => {
+  it('should handle route params correctly', () => {
+    function UserProfile() {
+      const { userId } = Route.useParams()
+      return <div data-testid="user-profile">User: {userId}</div>
+    }
+
+    const userRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users/$userId',
+      component: UserProfile,
+    })
+
+    renderWithRouter(<div />, {
+      routes: [userRoute],
+      initialLocation: '/users/123',
+    })
+
+    expect(screen.getByText('User: 123')).toBeInTheDocument()
+  })
+
+  it('should handle search params correctly', () => {
+    function SearchPage() {
+      const { q, page } = Route.useSearch()
+      return (
+        <div data-testid="search-results">
+          Query: {q}, Page: {page}
+        </div>
+      )
+    }
+
+    const searchRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/search',
+      component: SearchPage,
+      validateSearch: (search) => ({
+        q: (search.q as string) || '',
+        page: Number(search.page) || 1,
+      }),
+    })
+
+    renderWithRouter(<div />, {
+      routes: [searchRoute],
+      initialLocation: '/search?q=react&page=2',
+    })
+
+    expect(screen.getByText('Query: react, Page: 2')).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Test Navigation
+
+### 1. Testing Link Components
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Link, createRoute } from '@tanstack/react-router'
+import {
+  renderWithRouter,
+  rootRoute,
+  TestComponent,
+} from '../test/router-utils'
+
+describe('Code-Based Route Navigation', () => {
+  it('should navigate when link is clicked', async () => {
+    const user = userEvent.setup()
+
+    function HomePage() {
+      return (
+        <div>
+          <h1>Home</h1>
+          <Link to="/about" data-testid="about-link">
+            About
+          </Link>
+        </div>
+      )
+    }
+
+    function AboutPage() {
+      return <h1>About Page</h1>
+    }
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: HomePage,
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: AboutPage,
+    })
+
+    const { router } = renderWithRouter(<div />, {
+      routes: [homeRoute, aboutRoute],
+      initialLocation: '/',
+    })
+
+    // Initial state
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(router.state.location.pathname).toBe('/')
+
+    // Click link
+    await user.click(screen.getByTestId('about-link'))
+
+    // Check navigation
+    expect(screen.getByText('About Page')).toBeInTheDocument()
+    expect(router.state.location.pathname).toBe('/about')
+  })
+
+  it('should navigate programmatically', async () => {
+    function NavigationTest() {
+      const navigate = Route.useNavigate()
+
+      const handleNavigate = () => {
+        navigate({ to: '/dashboard', search: { tab: 'settings' } })
+      }
+
+      return (
+        <div>
+          <h1>Navigation Test</h1>
+          <button onClick={handleNavigate} data-testid="navigate-btn">
+            Go to Dashboard
+          </button>
+        </div>
+      )
+    }
+
+    const testRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: NavigationTest,
+    })
+
+    const dashboardRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/dashboard',
+      component: () => <h1>Dashboard</h1>,
+      validateSearch: (search) => ({
+        tab: (search.tab as string) || 'general',
+      }),
+    })
+
+    const { router } = renderWithRouter(<div />, {
+      routes: [testRoute, dashboardRoute],
+      initialLocation: '/',
+    })
+
+    await userEvent.click(screen.getByTestId('navigate-btn'))
+
+    expect(router.state.location.pathname).toBe('/dashboard')
+    expect(router.state.location.search).toEqual({ tab: 'settings' })
+  })
+})
+```
+
+### 2. Testing Route Guards
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { createRoute, redirect } from '@tanstack/react-router'
+import { renderWithRouter, rootRoute } from '../test/router-utils'
+
+describe('Code-Based Route Guards', () => {
+  it('should redirect unauthenticated users', () => {
+    const mockAuth = { isAuthenticated: false }
+
+    function ProtectedPage() {
+      return <h1>Protected Content</h1>
+    }
+
+    function LoginPage() {
+      return <h1>Login Required</h1>
+    }
+
+    const protectedRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/protected',
+      component: ProtectedPage,
+      beforeLoad: ({ context }) => {
+        if (!mockAuth.isAuthenticated) {
+          throw redirect({ to: '/login' })
+        }
+      },
+    })
+
+    const loginRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/login',
+      component: LoginPage,
+    })
+
+    renderWithRouter(<div />, {
+      routes: [protectedRoute, loginRoute],
+      initialLocation: '/protected',
+    })
+
+    // Should redirect to login
+    expect(screen.getByText('Login Required')).toBeInTheDocument()
+  })
+
+  it('should allow authenticated users', () => {
+    const mockAuth = { isAuthenticated: true }
+
+    function ProtectedPage() {
+      return <h1>Protected Content</h1>
+    }
+
+    const protectedRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/protected',
+      component: ProtectedPage,
+      beforeLoad: ({ context }) => {
+        if (!mockAuth.isAuthenticated) {
+          throw redirect({ to: '/login' })
+        }
+      },
+    })
+
+    renderWithRouter(<div />, {
+      routes: [protectedRoute],
+      initialLocation: '/protected',
+    })
+
+    expect(screen.getByText('Protected Content')).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Test Data Loading
+
+### 1. Testing Loaders
+
+```tsx
+import { describe, it, expect, vi } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { createRoute } from '@tanstack/react-router'
+import { renderWithRouter, rootRoute } from '../test/router-utils'
+
+describe('Code-Based Route Data Loading', () => {
+  it('should load and display data from loader', async () => {
+    const mockFetchUser = vi.fn().mockResolvedValue({
+      id: 1,
+      name: 'John Doe',
+      email: 'john@example.com',
+    })
+
+    function UserProfile() {
+      const user = Route.useLoaderData()
+      return (
+        <div data-testid="user-profile">
+          <h1>{user.name}</h1>
+          <p>{user.email}</p>
+        </div>
+      )
+    }
+
+    const userRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users/$userId',
+      component: UserProfile,
+      loader: ({ params }) => mockFetchUser(params.userId),
+    })
+
+    renderWithRouter(<div />, {
+      routes: [userRoute],
+      initialLocation: '/users/1',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
+      expect(screen.getByText('john@example.com')).toBeInTheDocument()
+    })
+
+    expect(mockFetchUser).toHaveBeenCalledWith('1')
+  })
+
+  it('should handle loader errors', async () => {
+    const mockFetchUser = vi.fn().mockRejectedValue(new Error('User not found'))
+
+    function UserProfile() {
+      const user = Route.useLoaderData()
+      return <div>{user.name}</div>
+    }
+
+    function ErrorComponent({ error }: { error: Error }) {
+      return <div data-testid="error">Error: {error.message}</div>
+    }
+
+    const userRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users/$userId',
+      component: UserProfile,
+      loader: ({ params }) => mockFetchUser(params.userId),
+      errorComponent: ErrorComponent,
+    })
+
+    renderWithRouter(<div />, {
+      routes: [userRoute],
+      initialLocation: '/users/1',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error')).toBeInTheDocument()
+      expect(screen.getByText('Error: User not found')).toBeInTheDocument()
+    })
+  })
+})
+```
+
+### 2. Testing with React Query
+
+```tsx
+import { describe, it, expect, vi } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createRoute } from '@tanstack/react-router'
+import { renderWithRouter, rootRoute } from '../test/router-utils'
+
+describe('React Query Integration', () => {
+  it('should work with React Query', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+
+    const mockFetchPosts = vi.fn().mockResolvedValue([
+      { id: 1, title: 'Post 1' },
+      { id: 2, title: 'Post 2' },
+    ])
+
+    function PostsList() {
+      const posts = Route.useLoaderData()
+      return (
+        <div data-testid="posts-list">
+          {posts.map((post: any) => (
+            <div key={post.id}>{post.title}</div>
+          ))}
+        </div>
+      )
+    }
+
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: PostsList,
+      loader: ({ context: { queryClient } }) =>
+        queryClient.ensureQueryData({
+          queryKey: ['posts'],
+          queryFn: mockFetchPosts,
+        }),
+    })
+
+    function TestWrapper({ children }: { children: React.ReactNode }) {
+      return (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      )
+    }
+
+    renderWithRouter(<div />, {
+      routes: [postsRoute],
+      initialLocation: '/posts',
+      wrapper: TestWrapper,
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Post 1')).toBeInTheDocument()
+      expect(screen.getByText('Post 2')).toBeInTheDocument()
+    })
+  })
+})
+```
+
+---
+
+## Test with Context
+
+### 1. Testing Router Context
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import {
+  createRootRouteWithContext,
+  createRoute,
+  Outlet,
+} from '@tanstack/react-router'
+
+interface RouterContext {
+  auth: {
+    user: { id: string; name: string } | null
+    isAuthenticated: boolean
+  }
+}
+
+describe('Code-Based Router Context', () => {
+  it('should provide context to routes', () => {
+    const rootRouteWithContext = createRootRouteWithContext<RouterContext>()({
+      component: () => <Outlet />,
+    })
+
+    function UserDashboard() {
+      const { auth } = Route.useRouteContext()
+      return (
+        <div data-testid="dashboard">
+          Welcome, {auth.user?.name || 'Guest'}!
+        </div>
+      )
+    }
+
+    const dashboardRoute = createRoute({
+      getParentRoute: () => rootRouteWithContext,
+      path: '/dashboard',
+      component: UserDashboard,
+    })
+
+    const mockContext = {
+      auth: {
+        user: { id: '1', name: 'John Doe' },
+        isAuthenticated: true,
+      },
+    }
+
+    const router = createRouter({
+      routeTree: rootRouteWithContext.addChildren([dashboardRoute]),
+      context: mockContext,
+      history: createMemoryHistory({
+        initialEntries: ['/dashboard'],
+      }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(screen.getByText('Welcome, John Doe!')).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## E2E Testing with Playwright
+
+### 1. Playwright Configuration
+
+Create `playwright.config.ts`:
+
+```ts
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})
+```
+
+### 2. E2E Test Example
+
+Create `e2e/navigation.spec.ts`:
+
+```ts
+import { test, expect } from '@playwright/test'
+
+test.describe('Code-Based Router Navigation', () => {
+  test('should navigate between pages', async ({ page }) => {
+    await page.goto('/')
+
+    // Check home page
+    await expect(page.locator('h1')).toContainText('Home')
+
+    // Navigate to about page
+    await page.click('text=About')
+    await expect(page).toHaveURL('/about')
+    await expect(page.locator('h1')).toContainText('About')
+
+    // Use browser back button
+    await page.goBack()
+    await expect(page).toHaveURL('/')
+    await expect(page.locator('h1')).toContainText('Home')
+  })
+
+  test('should handle search parameters', async ({ page }) => {
+    await page.goto('/search?q=react')
+
+    await expect(page.locator('[data-testid="search-input"]')).toHaveValue(
+      'react',
+    )
+    await expect(page).toHaveURL('/search?q=react')
+
+    // Update search
+    await page.fill('[data-testid="search-input"]', 'vue')
+    await page.press('[data-testid="search-input"]', 'Enter')
+
+    await expect(page).toHaveURL('/search?q=vue')
+  })
+
+  test('should handle authentication flow', async ({ page }) => {
+    // Try to access protected route
+    await page.goto('/dashboard')
+
+    // Should redirect to login
+    await expect(page).toHaveURL('/login')
+
+    // Login
+    await page.fill('[data-testid="username"]', 'testuser')
+    await page.fill('[data-testid="password"]', 'password')
+    await page.click('[data-testid="login-btn"]')
+
+    // Should redirect back to dashboard
+    await expect(page).toHaveURL('/dashboard')
+    await expect(page.locator('h1')).toContainText('Dashboard')
+  })
+})
+```
+
+---
+
+## Code-Based Routing Testing Best Practices
+
+### 1. Test Organization
+
+```
+src/
+├── components/
+│   ├── Header.tsx
+│   └── Header.test.tsx
+├── routes/
+│   ├── posts.tsx     # Code-based route definitions
+│   ├── posts.test.tsx
+│   └── index.tsx
+├── test/
+│   ├── setup.ts
+│   ├── router-utils.tsx  # Code-based router utilities
+│   └── mock-routes.tsx   # Manual route factories
+└── __tests__/
+    ├── integration/
+    └── e2e/
+```
+
+### 2. Common Patterns
+
+```tsx
+// Mock external dependencies for code-based routes
+vi.mock('../api/users', () => ({
+  fetchUser: vi.fn(),
+  updateUser: vi.fn(),
+}))
+
+// Test utility for common code-based route setups
+export function createAuthenticatedRouter(user = mockUser) {
+  // Manually create routes for testing
+  const protectedRoutes = [
+    createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/dashboard',
+      component: DashboardComponent,
+    }),
+  ]
+
+  return createTestRouter(protectedRoutes, {
+    context: {
+      auth: { user, isAuthenticated: true },
+    },
+  })
+}
+
+// Group related tests
+describe('User Management', () => {
+  describe('when authenticated', () => {
+    it('should show user dashboard', () => {
+      // Test implementation
+    })
+  })
+
+  describe('when not authenticated', () => {
+    it('should redirect to login', () => {
+      // Test implementation
+    })
+  })
+})
+```
+
+---
+
+## Common Problems
+
+### Test Environment Issues
+
+**Problem:** Tests fail with "window is not defined" errors.
+
+**Solution:** Ensure jsdom environment is configured:
+
+```ts
+// vitest.config.ts
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+  },
+})
+```
+
+### Router Context Missing
+
+**Problem:** Components can't access router context in tests.
+
+**Solution:** Use the custom render function with router:
+
+```tsx
+// ✅ Correct
+renderWithRouter(<Component />, { routes, initialLocation })
+
+// ❌ Wrong
+render(<Component />)
+```
+
+### Async Data Loading
+
+**Problem:** Tests fail because they don't wait for data loading.
+
+**Solution:** Use proper async testing patterns:
+
+```tsx
+await waitFor(() => {
+  expect(screen.getByText('Loaded Data')).toBeInTheDocument()
+})
+```
+
+---
+
+## Common Next Steps
+
+After setting up code-based routing testing, you might want to:
+
+- [How to Test File-Based Routing](/router/how-to/test-file-based-routing) - Specific patterns for file-based routing apps
+- [How to Set Up Basic Authentication](/router/how-to/setup-authentication) - Test authentication flows
+- [How to Debug Common Router Issues](/router/how-to/debug-router-issues) - Debug test failures
+
+
+
+
+## Related Resources
+
+- [Code-Based Routing Guide](/router/routing/code-based-routing) - Understanding code-based routing
+- [Vitest Documentation](https://vitest.dev/) - Testing framework
+- [Testing Library React](https://testing-library.com/docs/react-testing-library/intro/) - Component testing utilities
+- [Playwright Documentation](https://playwright.dev/) - E2E testing framework
+- [TanStack Router Examples](https://github.com/TanStack/router/tree/main/examples) - Example test setups
diff --git a/mintlify/router/how-to/share-search-params-across-routes.md b/mintlify/router/how-to/share-search-params-across-routes.md
new file mode 100644
index 000000000..dad11de0f
--- /dev/null
+++ b/mintlify/router/how-to/share-search-params-across-routes.md
@@ -0,0 +1,235 @@
+---
+title: Share Search Parameters Across Routes
+---
+
+# How to Share Search Parameters Across Routes
+
+Search parameters automatically inherit from parent routes in TanStack Router. When a parent route validates search parameters, child routes can access them via `Route.useSearch()` alongside their own parameters.
+
+## How Parameter Inheritance Works
+
+TanStack Router automatically merges search parameters from parent routes with child route parameters. This happens through the route hierarchy:
+
+1. **Parent route** validates shared parameters with `validateSearch`
+2. **Child routes** automatically inherit those validated parameters
+3. **`Route.useSearch()`** returns both local and inherited parameters
+
+## Global Parameters via Root Route
+
+Share parameters across your entire application by validating them in the root route:
+
+```tsx
+// routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const globalSearchSchema = z.object({
+  theme: z.enum(['light', 'dark']).default('light'),
+  lang: z.enum(['en', 'es', 'fr']).default('en'),
+  debug: z.boolean().default(false),
+})
+
+export const Route = createRootRoute({
+  validateSearch: globalSearchSchema,
+  component: RootComponent,
+})
+
+function RootComponent() {
+  const { theme, lang, debug } = Route.useSearch()
+
+  return (
+    <div className={`app theme-${theme} lang-${lang}`}>
+      {debug && <DebugPanel />}
+      <Outlet />
+    </div>
+  )
+}
+```
+
+```tsx
+// routes/products/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  category: z.string().default('all'),
+})
+
+export const Route = createFileRoute('/products/')({
+  validateSearch: productSearchSchema,
+  component: ProductsPage,
+})
+
+function ProductsPage() {
+  // Contains both local (page, category) AND inherited (theme, lang, debug) parameters
+  const search = Route.useSearch()
+
+  return (
+    <div>
+      <h1>Products (Theme: {search.theme})</h1>
+      <p>Page: {search.page}</p>
+      <p>Category: {search.category}</p>
+    </div>
+  )
+}
+```
+
+## Section-Specific Parameters via Layout Routes
+
+Share parameters within a section of your app using layout routes:
+
+```tsx
+// routes/_authenticated.tsx
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const authSearchSchema = z.object({
+  impersonate: z.string().optional(),
+  sidebar: z.boolean().default(true),
+  notifications: z.boolean().default(true),
+})
+
+export const Route = createFileRoute('/_authenticated')({
+  validateSearch: authSearchSchema,
+  component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+  const search = Route.useSearch()
+
+  return (
+    <div className="authenticated-layout">
+      {search.sidebar && <Sidebar />}
+      <main className="main-content">
+        {search.notifications && <NotificationBar />}
+        <Outlet />
+      </main>
+      {search.impersonate && <ImpersonationBanner user={search.impersonate} />}
+    </div>
+  )
+}
+```
+
+```tsx
+// routes/_authenticated/dashboard.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  // Contains inherited auth parameters (impersonate, sidebar, notifications)
+  const search = Route.useSearch()
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      {search.impersonate && (
+        <Alert>Currently impersonating: {search.impersonate}</Alert>
+      )}
+      <DashboardContent />
+    </div>
+  )
+}
+```
+
+## Common Use Cases
+
+**Global Application Settings:**
+
+- Theme, language, timezone
+- Debug flags, feature toggles
+- Analytics tracking (UTM parameters)
+
+**Section-Specific State:**
+
+- Authentication context (user role, impersonation)
+- Layout preferences (sidebar, density)
+- Workspace or organization context
+
+**Persistent UI State:**
+
+- Modal visibility, drawer state
+- Filter presets, view modes
+- Accessibility preferences
+
+## Common Problems
+
+### Problem: Parameters Not Inheriting
+
+**Cause**: Parent route not validating the shared parameters.
+
+```tsx
+// ❌ Root route missing validateSearch
+export const Route = createRootRoute({
+  component: RootComponent, // No validateSearch
+})
+
+// Child route can't access theme parameter
+function ProductsPage() {
+  const search = Route.useSearch() // No theme available
+}
+```
+
+**Solution**: Add `validateSearch` to the parent route:
+
+```tsx
+// ✅ Root route validates shared parameters
+export const Route = createRootRoute({
+  validateSearch: globalSearchSchema,
+  component: RootComponent,
+})
+```
+
+### Problem: Navigation Loses Shared Parameters
+
+**Cause**: Not preserving inherited parameters during navigation.
+
+```tsx
+// ❌ Navigation overwrites all search parameters
+router.navigate({
+  to: '/products',
+  search: { page: 1 }, // Loses theme, lang, etc.
+})
+```
+
+**Solution**: Preserve existing parameters with function syntax:
+
+```tsx
+// ✅ Preserve existing parameters
+router.navigate({
+  to: '/products',
+  search: (prev) => ({ ...prev, page: 1 }),
+})
+```
+
+### Problem: Type Errors with Inherited Parameters
+
+**Cause**: Child route schema doesn't account for inherited parameters.
+
+```tsx
+// ❌ TypeScript error: Property 'theme' doesn't exist
+const search = Route.useSearch()
+console.log(search.theme) // Type error
+```
+
+**Solution**: TypeScript automatically infers inherited types when using `validateSearch`. No additional typing needed - the inheritance works automatically.
+
+## Production Checklist
+
+- [ ] **Clear ownership**: Document which route validates which shared parameters
+- [ ] **Avoid conflicts**: Use distinct parameter names across route levels
+- [ ] **Preserve on navigation**: Use function syntax to maintain inherited parameters
+- [ ] **Minimal URLs**: Only include essential shared parameters
+- [ ] **Graceful defaults**: Provide fallback values for all shared parameters
+
+
+
+
+## Related Resources
+
+- [Set Up Basic Search Parameters](/router/how-to/setup-basic-search-params) - Learn search parameter fundamentals
+- [Navigate with Search Parameters](/router/how-to/navigate-with-search-params) - Navigate while preserving search state
+- [Validate Search Parameters with Schemas](/router/how-to/validate-search-params) - Add type safety to shared parameters
diff --git a/mintlify/router/how-to/test-file-based-routing.md b/mintlify/router/how-to/test-file-based-routing.md
new file mode 100644
index 000000000..e98d81ea4
--- /dev/null
+++ b/mintlify/router/how-to/test-file-based-routing.md
@@ -0,0 +1,952 @@
+---
+title: How to Test Router with File-Based Routing
+---
+
+This guide covers testing TanStack Router applications that use file-based routing, including testing route generation, file-based route components, and file-based routing patterns.
+
+## Quick Start
+
+Test file-based routing by setting up route mocking utilities, testing generated route trees, and implementing patterns specific to file-based route structures and conventions.
+
+---
+
+## Understanding File-Based Routing Testing
+
+File-based routing testing differs from code-based routing testing in several key ways:
+
+- **Generated Route Trees**: Routes are automatically generated from filesystem structure
+- **File Conventions**: Routes follow specific file naming conventions (`index.tsx`, `route.tsx`, `$param.tsx`)
+- **Route Discovery**: Routes are discovered through filesystem scanning rather than explicit imports
+- **Type Generation**: Route types are automatically generated and need special testing considerations
+
+---
+
+## Setting Up File-Based Route Testing
+
+### 1. Install Test Dependencies
+
+For file-based routing testing, you'll need the same base dependencies as regular router testing:
+
+```bash
+npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom
+```
+
+### 2. Configure Test Environment
+
+Create `vitest.config.ts` with file-based routing support:
+
+```ts
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      // Configure for test environment
+      routesDirectory: './src/routes',
+      generatedRouteTree: './src/routeTree.gen.ts',
+      disableLogging: true,
+    }),
+    react(),
+  ],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    typecheck: { enabled: true },
+    watch: false,
+    // Ensure route tree is generated before tests
+    globals: true,
+  },
+})
+```
+
+### 3. Create Route Testing Utilities
+
+Create `src/test/file-route-utils.tsx`:
+
+```tsx
+import React from 'react'
+import { render, RenderOptions } from '@testing-library/react'
+import {
+  createRouter,
+  RouterProvider,
+  createMemoryHistory,
+} from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from '../routeTree.gen'
+
+// Create test router with generated route tree
+export function createTestRouterFromFiles(initialLocation = '/') {
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: [initialLocation],
+    }),
+    context: {
+      // Add any required context for your routes
+    },
+  })
+
+  return router
+}
+
+// Custom render function for file-based routes
+interface RenderWithFileRoutesOptions extends Omit<RenderOptions, 'wrapper'> {
+  initialLocation?: string
+  routerContext?: any
+}
+
+export function renderWithFileRoutes(
+  ui: React.ReactElement,
+  {
+    initialLocation = '/',
+    routerContext = {},
+    ...renderOptions
+  }: RenderWithFileRoutesOptions = {},
+) {
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: [initialLocation],
+    }),
+    context: routerContext,
+  })
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return <RouterProvider router={router}>{children}</RouterProvider>
+  }
+
+  return {
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+    router,
+  }
+}
+
+// Helper to test specific file routes
+export function createMockFileRoute(
+  path: string,
+  component: React.ComponentType,
+) {
+  // This is useful for isolated testing when you don't want to use the full route tree
+  return {
+    path,
+    component,
+    // Add other common route properties as needed
+  }
+}
+```
+
+---
+
+## Testing File-Based Route Structure
+
+### 1. Test Route Tree Generation
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { routeTree } from '../routeTree.gen'
+
+describe('Generated Route Tree', () => {
+  it('should generate route tree from file structure', () => {
+    // Test that route tree exists and has expected structure
+    expect(routeTree).toBeDefined()
+    expect(routeTree.children).toBeDefined()
+  })
+
+  it('should include all expected routes', () => {
+    // Get all route paths from the generated tree
+    const getAllRoutePaths = (tree: any, paths: string[] = []): string[] => {
+      if (tree.path) {
+        paths.push(tree.path)
+      }
+      if (tree.children) {
+        tree.children.forEach((child: any) => {
+          getAllRoutePaths(child, paths)
+        })
+      }
+      return paths
+    }
+
+    const routePaths = getAllRoutePaths(routeTree)
+
+    // Test that expected routes are present
+    expect(routePaths).toContain('/')
+    expect(routePaths).toContain('/about')
+    // Add assertions for your specific routes
+  })
+
+  it('should have correct route hierarchy', () => {
+    // Test parent-child relationships
+    const homeRoute = routeTree.children?.find(
+      (child: any) => child.path === '/',
+    )
+    expect(homeRoute).toBeDefined()
+
+    // Test for specific route structure based on your file organization
+    // For example, if you have /posts/$postId routes:
+    // const postsRoute = routeTree.children?.find((child: any) => child.path === '/posts')
+    // expect(postsRoute?.children).toBeDefined()
+  })
+})
+```
+
+### 2. Test File Route Conventions
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File Route Conventions', () => {
+  it('should render index route at root path', () => {
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/',
+    })
+
+    // Test that the index route component renders
+    // This depends on what your src/routes/index.tsx exports
+    expect(screen.getByText('Welcome Home!')).toBeInTheDocument()
+  })
+
+  it('should handle route parameters from filename', () => {
+    // If you have a route like src/routes/posts/$postId.tsx
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts/123',
+    })
+
+    // Test that parameter is correctly parsed from file-based route
+    expect(screen.getByText(/Post.*123/)).toBeInTheDocument()
+  })
+
+  it('should handle nested routes from directory structure', () => {
+    // If you have src/routes/dashboard/settings.tsx
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/dashboard/settings',
+    })
+
+    expect(screen.getByText(/Settings/)).toBeInTheDocument()
+  })
+
+  it('should handle layout routes', () => {
+    // If you have src/routes/_layout.tsx
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/some-nested-route',
+    })
+
+    // Test that layout is rendered for nested routes
+    expect(screen.getByTestId('layout-header')).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Testing File-Based Route Components
+
+### 1. Test Individual Route Files
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { createFileRoute } from '@tanstack/react-router'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('Individual Route Components', () => {
+  it('should test about route component', () => {
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/about',
+    })
+
+    expect(screen.getByText('About')).toBeInTheDocument()
+  })
+
+  it('should test route with loader data', () => {
+    // For a route like src/routes/posts/index.tsx with loader
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts',
+    })
+
+    // Wait for loader data to load
+    expect(screen.getByText(/Posts List/)).toBeInTheDocument()
+  })
+
+  it('should test route with search params validation', () => {
+    // For a route with validateSearch in src/routes/search.tsx
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/search?q=react&page=1',
+    })
+
+    expect(screen.getByDisplayValue('react')).toBeInTheDocument()
+  })
+})
+```
+
+### 2. Test Route-Specific Hooks
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('Route-Specific Hooks', () => {
+  it('should test useParams in parameterized route', () => {
+    // Create a test component that uses Route.useParams()
+    function TestComponent() {
+      // This would be available in the actual route component
+      const params = Route.useParams()
+      return <div data-testid="param-value">{params.postId}</div>
+    }
+
+    renderWithFileRoutes(<TestComponent />, {
+      initialLocation: '/posts/abc123',
+    })
+
+    expect(screen.getByTestId('param-value')).toHaveTextContent('abc123')
+  })
+
+  it('should test useLoaderData in route with loader', () => {
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts/123',
+    })
+
+    // Test that loader data is available in the component
+    expect(screen.getByText(/Post Title/)).toBeInTheDocument()
+  })
+
+  it('should test useSearch in route with search validation', () => {
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/search?q=typescript&sort=date',
+    })
+
+    // Test that search params are correctly parsed
+    expect(screen.getByDisplayValue('typescript')).toBeInTheDocument()
+    expect(screen.getByText(/sorted by date/)).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Testing Route Navigation with File-Based Routes
+
+### 1. Test Link Navigation
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File-Based Route Navigation', () => {
+  it('should navigate between file-based routes', async () => {
+    const user = userEvent.setup()
+
+    const { router } = renderWithFileRoutes(<div />, {
+      initialLocation: '/',
+    })
+
+    // Initial state - should be on home route
+    expect(screen.getByText('Welcome Home!')).toBeInTheDocument()
+    expect(router.state.location.pathname).toBe('/')
+
+    // Click navigation link
+    await user.click(screen.getByRole('link', { name: /about/i }))
+
+    // Should navigate to about route
+    expect(screen.getByText('About')).toBeInTheDocument()
+    expect(router.state.location.pathname).toBe('/about')
+  })
+
+  it('should handle dynamic route navigation', async () => {
+    const user = userEvent.setup()
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts',
+    })
+
+    // Click on a post link (assuming your posts route renders links)
+    await user.click(screen.getByRole('link', { name: /View Post 1/i }))
+
+    // Should navigate to dynamic post route
+    expect(screen.getByText(/Post 1 Details/)).toBeInTheDocument()
+  })
+
+  it('should handle nested route navigation', async () => {
+    const user = userEvent.setup()
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/dashboard',
+    })
+
+    // Navigate to nested route
+    await user.click(screen.getByRole('link', { name: /settings/i }))
+
+    expect(screen.getByText(/Dashboard Settings/)).toBeInTheDocument()
+  })
+})
+```
+
+### 2. Test Programmatic Navigation
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('Programmatic Navigation', () => {
+  it('should programmatically navigate between file routes', async () => {
+    const user = userEvent.setup()
+
+    const { router } = renderWithFileRoutes(<div />, {
+      initialLocation: '/',
+    })
+
+    // Trigger programmatic navigation (button in your component)
+    await user.click(screen.getByRole('button', { name: /Go to Posts/i }))
+
+    expect(router.state.location.pathname).toBe('/posts')
+  })
+
+  it('should navigate with search params', async () => {
+    const user = userEvent.setup()
+
+    const { router } = renderWithFileRoutes(<div />, {
+      initialLocation: '/search',
+    })
+
+    // Trigger search with params
+    await user.type(screen.getByRole('textbox'), 'test query')
+    await user.click(screen.getByRole('button', { name: /search/i }))
+
+    expect(router.state.location.search).toMatchObject({
+      q: 'test query',
+    })
+  })
+})
+```
+
+---
+
+## Testing File-Based Route Guards and Loaders
+
+### 1. Test Route Guards
+
+```tsx
+import { describe, it, expect, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File-Based Route Guards', () => {
+  it('should redirect unauthenticated users from protected routes', () => {
+    // Mock unauthenticated state
+    const mockAuth = { isAuthenticated: false, user: null }
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/dashboard',
+      routerContext: { auth: mockAuth },
+    })
+
+    // Should redirect to login (based on your beforeLoad implementation)
+    expect(screen.getByText(/Please log in/)).toBeInTheDocument()
+  })
+
+  it('should allow authenticated users to access protected routes', () => {
+    const mockAuth = {
+      isAuthenticated: true,
+      user: { id: '1', name: 'John' },
+    }
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/dashboard',
+      routerContext: { auth: mockAuth },
+    })
+
+    expect(screen.getByText(/Welcome to Dashboard/)).toBeInTheDocument()
+  })
+})
+```
+
+### 2. Test Route Loaders
+
+```tsx
+import { describe, it, expect, vi } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File-Based Route Loaders', () => {
+  it('should load data for route with loader', async () => {
+    // Mock the API function used in your route loader
+    const mockFetchPost = vi.fn().mockResolvedValue({
+      id: '123',
+      title: 'Test Post',
+      content: 'Test content',
+    })
+
+    // If your route loader uses a global API function, mock it
+    vi.mock('../api/posts', () => ({
+      fetchPost: mockFetchPost,
+    }))
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts/123',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Post')).toBeInTheDocument()
+    })
+
+    expect(mockFetchPost).toHaveBeenCalledWith('123')
+  })
+
+  it('should handle loader errors', async () => {
+    const mockFetchPost = vi.fn().mockRejectedValue(new Error('Post not found'))
+
+    vi.mock('../api/posts', () => ({
+      fetchPost: mockFetchPost,
+    }))
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts/invalid',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error.*Post not found/)).toBeInTheDocument()
+    })
+  })
+})
+```
+
+---
+
+## Testing File Route Validation
+
+### 1. Test Search Parameter Validation
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File Route Validation', () => {
+  it('should validate search parameters', () => {
+    // Test with valid search params
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/search?q=react&page=1&sort=date',
+    })
+
+    expect(screen.getByDisplayValue('react')).toBeInTheDocument()
+    expect(screen.getByText(/Page 1/)).toBeInTheDocument()
+  })
+
+  it('should handle invalid search parameters', () => {
+    // Test with invalid search params (e.g., invalid page number)
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/search?page=invalid&sort=unknown',
+    })
+
+    // Should fall back to defaults based on your validation schema
+    expect(screen.getByText(/Page 1/)).toBeInTheDocument() // default page
+  })
+
+  it('should validate route parameters', () => {
+    // Test with valid route param
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts/123',
+    })
+
+    expect(screen.getByText(/Post 123/)).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Testing File Route Error Boundaries
+
+### 1. Test Route-Level Error Handling
+
+```tsx
+import { describe, it, expect, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('File Route Error Handling', () => {
+  it('should handle component errors with error boundary', () => {
+    // Mock console.error to avoid noise in test output
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    // Force an error in a route component
+    vi.mock('../routes/error-prone.tsx', () => ({
+      Route: {
+        component: () => {
+          throw new Error('Test error')
+        },
+      },
+    }))
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/error-prone',
+    })
+
+    expect(screen.getByText(/Something went wrong/)).toBeInTheDocument()
+
+    consoleSpy.mockRestore()
+  })
+
+  it('should handle loader errors with error component', async () => {
+    const mockFailingLoader = vi
+      .fn()
+      .mockRejectedValue(new Error('Load failed'))
+
+    vi.mock('../api/data', () => ({
+      loadData: mockFailingLoader,
+    }))
+
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/data-route',
+    })
+
+    expect(screen.getByText(/Failed to load data/)).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Testing with Generated Route Types
+
+### 1. Test Type Safety
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { useNavigate } from '@tanstack/react-router'
+import { renderWithFileRoutes } from '../test/file-route-utils'
+
+describe('Generated Route Types', () => {
+  it('should provide type-safe navigation', () => {
+    function TestComponent() {
+      const navigate = useNavigate()
+
+      const handleNavigate = () => {
+        // This should be type-safe based on your generated routes
+        navigate({
+          to: '/posts/$postId',
+          params: { postId: '123' },
+          search: { tab: 'comments' },
+        })
+      }
+
+      return (
+        <button onClick={handleNavigate} data-testid="navigate-btn">
+          Navigate
+        </button>
+      )
+    }
+
+    const { router } = renderWithFileRoutes(<TestComponent />, {
+      initialLocation: '/',
+    })
+
+    // Test the navigation works correctly
+    const button = screen.getByTestId('navigate-btn')
+    fireEvent.click(button)
+
+    expect(router.state.location.pathname).toBe('/posts/123')
+    expect(router.state.location.search).toEqual({ tab: 'comments' })
+  })
+})
+```
+
+---
+
+## Testing Route Tree Changes
+
+### 1. Test Route Generation During Development
+
+```tsx
+import { describe, it, expect } from 'vitest'
+import { routeTree } from '../routeTree.gen'
+
+describe('Route Tree Development', () => {
+  it('should regenerate routes when files change', () => {
+    // This test ensures your route tree is properly generated
+    // You can add specific assertions based on your file structure
+
+    expect(routeTree).toBeDefined()
+    expect(typeof routeTree.children).toBe('object')
+
+    // Test specific routes exist
+    const routes = getAllRouteIds(routeTree)
+    expect(routes).toContain('/')
+    expect(routes).toContain('/about')
+    // Add assertions for your specific routes
+  })
+
+  // Helper function to get all route IDs from tree
+  function getAllRouteIds(tree: any, ids: string[] = []): string[] {
+    if (tree.id) {
+      ids.push(tree.id)
+    }
+    if (tree.children) {
+      Object.values(tree.children).forEach((child: any) => {
+        getAllRouteIds(child, ids)
+      })
+    }
+    return ids
+  }
+})
+```
+
+---
+
+## E2E Testing for File-Based Routes
+
+### 1. Playwright Configuration for File-Based Routes
+
+Create `e2e/file-routing.spec.ts`:
+
+```ts
+import { test, expect } from '@playwright/test'
+
+test.describe('File-Based Route E2E', () => {
+  test('should navigate through file-based route structure', async ({
+    page,
+  }) => {
+    await page.goto('/')
+
+    // Test home route (from src/routes/index.tsx)
+    await expect(page.locator('h3')).toContainText('Welcome Home!')
+
+    // Navigate to about route (from src/routes/about.tsx)
+    await page.click('text=About')
+    await expect(page).toHaveURL('/about')
+    await expect(page.locator('h3')).toContainText('About')
+
+    // Test browser navigation
+    await page.goBack()
+    await expect(page).toHaveURL('/')
+  })
+
+  test('should handle dynamic routes from file structure', async ({ page }) => {
+    await page.goto('/posts')
+
+    // Click on a dynamic post link (from src/routes/posts/$postId.tsx)
+    await page.click('[data-testid="post-link-1"]')
+    await expect(page).toHaveURL('/posts/1')
+    await expect(page.locator('h1')).toContainText('Post 1')
+  })
+
+  test('should handle nested routes', async ({ page }) => {
+    await page.goto('/dashboard')
+
+    // Navigate to nested route (from src/routes/dashboard/settings.tsx)
+    await page.click('text=Settings')
+    await expect(page).toHaveURL('/dashboard/settings')
+    await expect(page.locator('h2')).toContainText('Settings')
+  })
+})
+```
+
+---
+
+## Common File-Based Routing Testing Patterns
+
+### 1. Mock Route Files for Testing
+
+```tsx
+// src/test/mock-file-routes.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+// Mock individual route for isolated testing
+export const createMockFileRoute = (
+  path: string,
+  component: React.ComponentType,
+  options: any = {},
+) => {
+  return createFileRoute(path)({
+    component,
+    ...options,
+  })
+}
+
+// Common test route components
+export const TestHomeRoute = createMockFileRoute('/', () => (
+  <div data-testid="home">Home Page</div>
+))
+
+export const TestAboutRoute = createMockFileRoute('/about', () => (
+  <div data-testid="about">About Page</div>
+))
+
+export const TestDynamicRoute = createMockFileRoute('/posts/$postId', () => {
+  const { postId } = Route.useParams()
+  return <div data-testid="post">Post {postId}</div>
+})
+```
+
+### 2. Test Route Discovery
+
+```tsx
+import { describe, it, expect } from 'vitest'
+
+describe('Route Discovery', () => {
+  it('should discover all routes from file structure', () => {
+    // Test that your route tree includes all expected routes
+    // This helps catch when routes are accidentally not being generated
+
+    const expectedRoutes = [
+      '/',
+      '/about',
+      '/posts',
+      '/posts/$postId',
+      '/dashboard',
+      '/dashboard/settings',
+    ]
+
+    expectedRoutes.forEach((routePath) => {
+      const routeExists = checkRouteExists(routeTree, routePath)
+      expect(routeExists).toBe(true)
+    })
+  })
+})
+
+function checkRouteExists(tree: any, path: string): boolean {
+  // Implementation to check if route exists in tree
+  // This depends on your route tree structure
+  return true // Simplified
+}
+```
+
+---
+
+## Best Practices for File-Based Route Testing
+
+### 1. Test Organization
+
+```
+src/
+├── routes/
+│   ├── __root.tsx
+│   ├── index.tsx
+│   ├── about.tsx
+│   ├── posts/
+│   │   ├── index.tsx
+│   │   └── $postId.tsx
+├── test/
+│   ├── setup.ts
+│   ├── file-route-utils.tsx
+│   └── routes/
+│       ├── index.test.tsx
+│       ├── about.test.tsx
+│       └── posts/
+│           ├── index.test.tsx
+│           └── $postId.test.tsx
+```
+
+### 2. Common Test Patterns
+
+```tsx
+// Test file for each route file
+describe('Posts Route (/posts)', () => {
+  it('should render posts list', () => {
+    renderWithFileRoutes(<div />, {
+      initialLocation: '/posts',
+    })
+
+    expect(screen.getByText(/Posts/)).toBeInTheDocument()
+  })
+
+  it('should handle loading state', () => {
+    // Test pending state for route with loader
+  })
+
+  it('should handle error state', () => {
+    // Test error handling for route
+  })
+})
+
+// Test route groups
+describe('Dashboard Routes', () => {
+  describe('/dashboard', () => {
+    // Dashboard index tests
+  })
+
+  describe('/dashboard/settings', () => {
+    // Settings route tests
+  })
+})
+```
+
+---
+
+## Troubleshooting File-Based Route Testing
+
+### Common Issues
+
+**Problem**: Route tree not found in tests
+
+```bash
+Error: Cannot find module '../routeTree.gen'
+```
+
+**Solution**: Ensure route tree generation in test setup:
+
+```ts
+// vitest.config.ts
+export default defineConfig({
+  plugins: [
+    tanstackRouter(), // Ensure this runs before tests
+    react(),
+  ],
+  test: {
+    setupFiles: ['./src/test/setup.ts'],
+  },
+})
+```
+
+**Problem**: Routes not updating in tests after file changes
+
+**Solution**: Clear module cache in test setup:
+
+```ts
+// src/test/setup.ts
+beforeEach(() => {
+  vi.clearAllMocks()
+  // Clear route tree cache if needed
+  delete require.cache[require.resolve('../routeTree.gen')]
+})
+```
+
+**Problem**: Type errors in tests with generated routes
+
+**Solution**: Ensure proper TypeScript configuration:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*", "src/routeTree.gen.ts"]
+}
+```
+
+---
+
+## Next Steps
+
+After setting up file-based route testing, you might want to:
+
+- [How to Set Up Testing with Code-Based Routing](/router/how-to/setup-testing) - Testing patterns for manually defined routes
+- [How to Debug Router Issues](/router/how-to/debug-router-issues) - Debug file-based routing issues
+- [File-Based Routing Guide](/router/routing/file-based-routing) - Learn more about file-based routing
+
+## Related Resources
+
+- [TanStack Router File-Based Routing](/router/routing/file-based-routing) - Complete file-based routing guide
+- [File Naming Conventions](/router/routing/file-naming-conventions) - Understanding file structure
+- [Testing Library](https://testing-library.com/) - Component testing utilities
+- [Vitest](https://vitest.dev/) - Testing framework documentation
diff --git a/mintlify/router/how-to/use-environment-variables.md b/mintlify/router/how-to/use-environment-variables.md
new file mode 100644
index 000000000..ea7d0192e
--- /dev/null
+++ b/mintlify/router/how-to/use-environment-variables.md
@@ -0,0 +1,689 @@
+---
+title: How to Use Environment Variables
+---
+
+Learn how to configure and use environment variables in your TanStack Router application for API endpoints, feature flags, and build configuration across different bundlers.
+
+## Quick Start
+
+Environment variables in TanStack Router are primarily used for client-side configuration and must follow bundler-specific naming conventions for security.
+
+```bash
+# .env
+VITE_API_URL=https://api.example.com
+VITE_ENABLE_DEVTOOLS=true
+```
+
+```typescript
+// Route configuration
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  loader: async () => {
+    const apiUrl = import.meta.env.VITE_API_URL
+    const response = await fetch(`${apiUrl}/posts`)
+    return response.json()
+  },
+  component: PostsList,
+})
+```
+
+## Environment Variable Access Patterns
+
+### Vite-Based Projects (Most Common)
+
+With Vite, environment variables must be prefixed with `VITE_` to be accessible in client code:
+
+```typescript
+// Route loaders
+export const Route = createFileRoute('/dashboard')({
+  loader: async () => {
+    const apiUrl = import.meta.env.VITE_API_URL        // ✅ Works
+    const apiKey = import.meta.env.VITE_PUBLIC_API_KEY // ✅ Works
+
+    // This would be undefined (security feature):
+    // const secret = import.meta.env.SECRET_KEY        // ❌ Undefined
+
+    return fetchDashboardData(apiUrl, apiKey)
+  },
+})
+
+// Components
+export function ApiStatus() {
+  const isDev = import.meta.env.DEV           // ✅ Built-in Vite variable
+  const isProd = import.meta.env.PROD         // ✅ Built-in Vite variable
+  const mode = import.meta.env.MODE           // ✅ development/production
+
+  return (
+    <div>
+      Environment: {mode}
+      {isDev && <DevToolsPanel />}
+    </div>
+  )
+}
+```
+
+### Webpack-Based Projects
+
+Configure webpack's DefinePlugin to inject environment variables. **Note:** Webpack doesn't support `import.meta.env` by default, so use `process.env` patterns:
+
+```typescript
+// webpack.config.js
+const webpack = require('webpack')
+
+module.exports = {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.API_URL': JSON.stringify(process.env.API_URL),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.ENABLE_FEATURE': JSON.stringify(process.env.ENABLE_FEATURE),
+    }),
+  ],
+}
+
+// Usage in routes
+export const Route = createFileRoute('/api-data')({
+  loader: async () => {
+    const response = await fetch(`${process.env.API_URL}/data`)
+    return response.json()
+  },
+  component: () => {
+    const enableFeature = process.env.ENABLE_FEATURE === 'true'
+    return enableFeature ? <NewFeature /> : <OldFeature />
+  },
+})
+```
+
+### Rspack-Based Projects
+
+Rspack uses the `PUBLIC_` prefix convention. **Note:** `import.meta.env` support depends on your Rspack configuration and runtime - you may need to configure `builtins.define` properly:
+
+```bash
+# .env
+PUBLIC_API_URL=https://api.example.com
+PUBLIC_FEATURE_FLAG=true
+```
+
+```typescript
+// Route usage
+export const Route = createFileRoute('/features')({
+  loader: async () => {
+    const apiUrl = import.meta.env.PUBLIC_API_URL
+    return fetch(`${apiUrl}/features`).then(r => r.json())
+  },
+  component: () => {
+    const enableFeature = import.meta.env.PUBLIC_FEATURE_FLAG === 'true'
+    return enableFeature ? <NewFeature /> : <OldFeature />
+  },
+})
+```
+
+### ESBuild Projects
+
+Configure defines manually:
+
+```typescript
+// build script
+import { build } from 'esbuild'
+
+await build({
+  entryPoints: ['src/main.tsx'],
+  define: {
+    'process.env.NODE_ENV': '"production"',
+    'process.env.API_URL': `"${process.env.API_URL}"`,
+  },
+})
+```
+
+## Common Patterns
+
+### API Configuration in Route Loaders
+
+```typescript
+// src/routes/posts/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+const fetchPosts = async () => {
+  const baseUrl = import.meta.env.VITE_API_URL
+  const apiKey = import.meta.env.VITE_API_KEY
+
+  const response = await fetch(`${baseUrl}/posts`, {
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+    },
+  })
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch posts')
+  }
+
+  return response.json()
+}
+
+export const Route = createFileRoute('/posts/')({
+  loader: fetchPosts,
+  errorComponent: ({ error }) => (
+    <div>Error loading posts: {error.message}</div>
+  ),
+})
+```
+
+### Environment-Based Route Configuration
+
+```typescript
+// src/routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      {/* Only show devtools in development */}
+      {import.meta.env.DEV && <TanStackRouterDevtools />}
+    </>
+  ),
+})
+```
+
+### Feature Flags in Routes
+
+```typescript
+// src/lib/features.ts
+export const features = {
+  enableNewDashboard: import.meta.env.VITE_ENABLE_NEW_DASHBOARD === 'true',
+  enableAnalytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
+  debugMode: import.meta.env.DEV,
+}
+
+// src/routes/dashboard/index.tsx
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { features } from '../../lib/features'
+
+export const Route = createFileRoute('/dashboard/')({
+  beforeLoad: () => {
+    // Redirect to old dashboard if new one is disabled
+    if (!features.enableNewDashboard) {
+      throw redirect({ to: '/dashboard/legacy' })
+    }
+  },
+  component: NewDashboard,
+})
+```
+
+### Authentication Configuration
+
+```typescript
+// src/lib/auth.ts
+export const authConfig = {
+  domain: import.meta.env.VITE_AUTH0_DOMAIN,
+  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+  redirectUri: `${window.location.origin}/callback`,
+}
+
+// src/routes/_authenticated.tsx
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { authConfig } from '../lib/auth'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    const isAuthenticated = await checkAuthStatus()
+
+    if (!isAuthenticated) {
+      // Redirect to auth provider
+      const authUrl = `https://${authConfig.domain}/authorize?client_id=${authConfig.clientId}&redirect_uri=${authConfig.redirectUri}`
+      window.location.href = authUrl
+      return
+    }
+  },
+})
+```
+
+### Search Params with Environment Config
+
+```typescript
+// src/routes/search.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  q: z.string().optional(),
+  category: z.string().optional(),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: searchSchema,
+  loader: async ({ search }) => {
+    const apiUrl = import.meta.env.VITE_SEARCH_API_URL
+    const params = new URLSearchParams({
+      q: search.q || '',
+      category: search.category || 'all',
+      api_key: import.meta.env.VITE_SEARCH_API_KEY,
+    })
+
+    const response = await fetch(`${apiUrl}/search?${params}`)
+    return response.json()
+  },
+})
+```
+
+## Environment File Setup
+
+### File Hierarchy (Vite)
+
+Vite loads environment files in this order:
+
+```
+.env.local          # Local overrides (add to .gitignore)
+.env.production     # Production-specific
+.env.development    # Development-specific
+.env                # Default (commit to git)
+```
+
+### Example Configuration
+
+**.env** (committed to repository):
+
+```bash
+# API Configuration
+VITE_API_URL=https://api.example.com
+VITE_API_VERSION=v1
+
+# Feature Flags
+VITE_ENABLE_NEW_UI=false
+VITE_ENABLE_ANALYTICS=true
+
+# Auth Configuration (public keys only)
+VITE_AUTH0_DOMAIN=your-domain.auth0.com
+VITE_AUTH0_CLIENT_ID=your-client-id
+
+# Build Configuration
+VITE_APP_NAME=TanStack Router App
+VITE_APP_VERSION=1.0.0
+```
+
+**.env.local** (add to .gitignore):
+
+```bash
+# Development overrides
+VITE_API_URL=http://localhost:3001
+VITE_ENABLE_NEW_UI=true
+VITE_DEBUG_MODE=true
+```
+
+**.env.production**:
+
+```bash
+# Production-specific
+VITE_API_URL=https://api.prod.example.com
+VITE_ENABLE_ANALYTICS=true
+VITE_ENABLE_NEW_UI=true
+```
+
+## Type Safety
+
+### Vite TypeScript Declarations
+
+Create `src/vite-env.d.ts`:
+
+```typescript
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  // API Configuration
+  readonly VITE_API_URL: string
+  readonly VITE_API_VERSION: string
+  readonly VITE_API_KEY?: string
+
+  // Feature Flags
+  readonly VITE_ENABLE_NEW_UI: string
+  readonly VITE_ENABLE_ANALYTICS: string
+  readonly VITE_DEBUG_MODE?: string
+
+  // Authentication
+  readonly VITE_AUTH0_DOMAIN: string
+  readonly VITE_AUTH0_CLIENT_ID: string
+
+  // App Configuration
+  readonly VITE_APP_NAME: string
+  readonly VITE_APP_VERSION: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+```
+
+### Runtime Validation
+
+Use Zod to validate environment variables at startup with fallbacks and optional values:
+
+```typescript
+// src/config/env.ts
+import { z } from 'zod'
+
+const envSchema = z.object({
+  // Required variables
+  VITE_API_URL: z.string().url(),
+  VITE_AUTH0_DOMAIN: z.string(),
+  VITE_AUTH0_CLIENT_ID: z.string(),
+  VITE_APP_NAME: z.string(),
+
+  // Optional with defaults
+  VITE_API_VERSION: z.string().default('v1'),
+  VITE_ENABLE_NEW_UI: z.string().default('false'),
+  VITE_ENABLE_ANALYTICS: z.string().default('true'),
+
+  // Optional variables
+  VITE_DEBUG_MODE: z.string().optional(),
+  VITE_SENTRY_DSN: z.string().optional(),
+})
+
+// Validate at app startup with fallbacks
+export const env = envSchema.parse({
+  ...import.meta.env,
+  // Provide fallbacks for missing optional values
+  VITE_API_VERSION: import.meta.env.VITE_API_VERSION || 'v1',
+  VITE_ENABLE_NEW_UI: import.meta.env.VITE_ENABLE_NEW_UI || 'false',
+  VITE_ENABLE_ANALYTICS: import.meta.env.VITE_ENABLE_ANALYTICS || 'true',
+})
+
+// Typed helper functions
+export const isFeatureEnabled = (flag: keyof typeof env) => {
+  return env[flag] === 'true'
+}
+
+// Type-safe boolean conversion
+export const getBooleanEnv = (
+  value: string | undefined,
+  defaultValue = false,
+): boolean => {
+  if (value === undefined) return defaultValue
+  return value === 'true'
+}
+```
+
+### Usage with Type Safety
+
+```typescript
+// src/routes/api-data.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { env, isFeatureEnabled } from '../config/env'
+
+export const Route = createFileRoute('/api-data')({
+  loader: async () => {
+    // TypeScript knows these are strings and exist
+    const response = await fetch(`${env.VITE_API_URL}/${env.VITE_API_VERSION}/data`)
+    return response.json()
+  },
+  component: () => {
+    return (
+      <div>
+        <h1>{env.VITE_APP_NAME}</h1>
+        {isFeatureEnabled('VITE_ENABLE_NEW_UI') && <NewUIComponent />}
+      </div>
+    )
+  },
+})
+```
+
+## Bundler-Specific Configuration
+
+### Vite Configuration
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    // tanstackRouter generates route tree and enables file-based routing
+    tanstackRouter(),
+  ],
+  // Environment variables are handled automatically
+  // Custom environment variable handling:
+  define: {
+    // Global constants (these become available as global variables)
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
+})
+```
+
+### Webpack Configuration
+
+```typescript
+// webpack.config.js
+const { TanStackRouterWebpack } = require('@tanstack/router-webpack-plugin')
+const webpack = require('webpack')
+
+module.exports = {
+  plugins: [
+    // TanStackRouterWebpack generates route tree and enables file-based routing
+    new TanStackRouterWebpack(),
+    new webpack.DefinePlugin({
+      // Inject environment variables (use process.env for Webpack)
+      'process.env.API_URL': JSON.stringify(process.env.API_URL),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.ENABLE_FEATURE': JSON.stringify(process.env.ENABLE_FEATURE),
+    }),
+  ],
+}
+```
+
+### Rspack Configuration
+
+```typescript
+// rspack.config.js
+const { TanStackRouterRspack } = require('@tanstack/router-rspack-plugin')
+
+module.exports = {
+  plugins: [
+    // TanStackRouterRspack generates route tree and enables file-based routing
+    new TanStackRouterRspack(),
+  ],
+  // Rspack automatically handles PUBLIC_ prefixed variables for import.meta.env
+  // Custom handling for additional variables:
+  builtins: {
+    define: {
+      // Define additional variables (these become global replacements)
+      'process.env.API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
+      __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
+    },
+  },
+}
+```
+
+## Production Checklist
+
+- [ ] All client-exposed variables use appropriate prefix (`VITE_`, `PUBLIC_`, etc.)
+- [ ] No sensitive data (API secrets, private keys) in environment variables
+- [ ] `.env.local` is in `.gitignore`
+- [ ] Production environment variables are configured on hosting platform
+- [ ] Required environment variables are validated at build time
+- [ ] TypeScript declarations are up to date
+- [ ] Feature flags are properly configured for production
+- [ ] API URLs point to production endpoints
+
+## Common Problems
+
+### Environment Variable is Undefined
+
+**Problem**: `import.meta.env.MY_VARIABLE` returns `undefined`
+
+**Solutions**:
+
+1. **Add correct prefix**: Use `VITE_` for Vite, `PUBLIC_` for Rspack.
+   Vite's default prefix may be changed in the config:
+   ```ts
+   // vite.config.ts
+   export const config = {
+     // ...rest of your config
+     envPrefix: 'MYPREFIX_', // this means `MYPREFIX_MY_VARIABLE` is the new correct way
+   }
+   ```
+2. **Restart development server** after adding new variables
+3. **Check file location**: `.env` file must be in project root
+4. **Verify bundler configuration**: Ensure variables are properly injected
+5. **Verify variable**:
+
+- **In dev**: is in correct `.env` file or environment
+- **For prod**: is in correct `.env` file or current environment **_at bundle time_**. That's right, `VITE_`/`PUBLIC_`-prefixed variables are replaced in a macro-like fashion at bundle time, and will _never_ be read at runtime on your server. This is a common mistake, so make sure this is not your case.
+
+**Example**:
+
+```bash
+# ❌ Won't work (no prefix)
+API_KEY=abc123
+
+# ✅ Works with Vite
+VITE_API_KEY=abc123
+
+# ✅ Works with Rspack
+PUBLIC_API_KEY=abc123
+
+# ❌ Won't bundle the variable (assuming it is not set in the environment of the build)
+npm run build
+
+# ✅ Works with Vite and will bundle the variable for production
+VITE_API_KEY=abc123 npm run build
+
+# ✅ Works with Rspack and will bundle the variable for production
+PUBLIC_API_KEY=abc123 npm run build
+```
+
+### Runtime Client Environment Variables at Runtime in Production
+
+**Problem**: If `VITE_`/`PUBLIC_` variables are replaced at bundle time only, how to make runtime variables available on the client ?
+
+**Solutions**:
+
+Pass variables from the server down to the client:
+
+1. Add your variable to the correct `env.` file
+2. Create an endpoint on your server to read the value from the client
+
+**Example**:
+
+You may use your prefered backend framework/libray, but here it is using Tanstack Start server functions:
+
+```tsx
+const getRuntimeVar = createServerFn({ method: 'GET' }).handler(() => {
+  return process.env.MY_RUNTIME_VAR // notice `process.env` on the server, and no `VITE_`/`PUBLIC_` prefix
+})
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    const foo = await getRuntimeVar()
+    return { foo }
+  },
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { foo } = Route.useLoaderData()
+  // ... use your variable however you want
+}
+```
+
+### Variable Not Updating
+
+**Problem**: Environment variable changes aren't reflected in app
+
+**Solutions**:
+
+1. **Restart development server** - Required for new variables
+2. **Check file hierarchy** - `.env.local` overrides `.env`
+3. **Clear browser cache** - Hard refresh (Ctrl+Shift+R)
+4. **Verify correct file** - Make sure you're editing the right `.env` file
+
+### TypeScript Errors
+
+**Problem**: `Property 'VITE_MY_VAR' does not exist on type 'ImportMetaEnv'`
+
+**Solution**: Add declaration to `src/vite-env.d.ts`:
+
+```typescript
+interface ImportMetaEnv {
+  readonly VITE_MY_VAR: string
+}
+```
+
+### Build Errors
+
+**Problem**: Missing environment variables during build
+
+**Solutions**:
+
+1. **Configure CI/CD**: Set variables in build environment
+2. **Add validation**: Check required variables at build time
+3. **Use .env files**: Ensure production `.env` files exist
+4. **Check bundler config**: Verify environment variable injection
+
+### Security Issues
+
+**Problem**: Accidentally exposing sensitive data
+
+**Solutions**:
+
+1. **Never use secrets in client variables** - They're visible in browser
+2. **Use server-side proxies** for sensitive API calls
+3. **Audit bundle** - Check built files for leaked secrets
+4. **Follow naming conventions** - Only prefixed variables are exposed
+
+### Runtime vs Build-time Confusion
+
+**Problem**: Variables not available at runtime
+
+**Solutions**:
+
+1. **Understand static replacement** - Variables are replaced at build time
+2. **Use server-side for dynamic values** - Use APIs for runtime configuration
+3. **Validate at startup** - Check all required variables exist
+
+### Environment Variables are Always Strings
+
+**Problem**: Unexpected behavior when comparing boolean or numeric values
+
+**Solutions**:
+
+1. **Always compare as strings**: Use `=== 'true'` not `=== true`
+2. **Convert explicitly**: Use `parseInt()`, `parseFloat()`, or `Boolean()`
+3. **Use helper functions**: Create typed conversion utilities
+
+**Example**:
+
+```typescript
+// ❌ Won't work as expected
+const isEnabled = import.meta.env.VITE_FEATURE_ENABLED // This is a string!
+if (isEnabled) {
+  /* Always true if variable exists */
+}
+
+// ✅ Correct string comparison
+const isEnabled = import.meta.env.VITE_FEATURE_ENABLED === 'true'
+
+// ✅ Safe numeric conversion
+const port = parseInt(import.meta.env.VITE_PORT || '3000', 10)
+
+// ✅ Helper function approach
+const getBooleanEnv = (value: string | undefined, defaultValue = false) => {
+  if (value === undefined) return defaultValue
+  return value.toLowerCase() === 'true'
+}
+```
+
+## Common Next Steps
+
+
+
+
+
+## Related Resources
+
+- [TanStack Router File-Based Routing](/router/routing/file-based-routing) - Learn about route configuration
+- [Vite Environment Variables](https://vitejs.dev/guide/env-and-mode.html) - Official Vite documentation
+- [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/) - Webpack environment configuration
diff --git a/mintlify/router/how-to/validate-search-params.md b/mintlify/router/how-to/validate-search-params.md
new file mode 100644
index 000000000..f9eff87c6
--- /dev/null
+++ b/mintlify/router/how-to/validate-search-params.md
@@ -0,0 +1,658 @@
+---
+title: Validate Search Parameters with Schemas
+---
+
+Learn how to add robust schema validation to your search parameters using popular validation libraries like Zod, Valibot, and ArkType. This guide covers validation setup, error handling, type safety, and common validation patterns for production applications.
+
+**Prerequisites:** [Set Up Basic Search Parameters](/router/how-to/setup-basic-search-params) - Foundation concepts for reading and working with search params.
+
+## Quick Start
+
+Add robust validation with custom error messages, complex types, and production-ready error handling:
+
+```tsx
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { z } from 'zod'
+
+const productSearchSchema = z.object({
+  query: z.string().min(1, 'Search query required'),
+  category: z.enum(['electronics', 'clothing', 'books', 'home']).optional(),
+  minPrice: z.number().min(0, 'Price cannot be negative').default(0),
+  maxPrice: z.number().min(0, 'Price cannot be negative').default(1000),
+  inStock: z.boolean().default(true),
+  tags: z.array(z.string()).optional(),
+  dateRange: z
+    .object({
+      start: z.string().datetime().optional(),
+      end: z.string().datetime().optional(),
+    })
+    .optional(),
+})
+
+export const Route = createFileRoute('/products')({
+  validateSearch: productSearchSchema,
+  errorComponent: ({ error }) => {
+    const router = useRouter()
+    return (
+      <div className="error">
+        <h2>Invalid Search Parameters</h2>
+        <p>{error.message}</p>
+        <button
+          onClick={() => router.navigate({ to: '/products', search: {} })}
+        >
+          Reset Search
+        </button>
+      </div>
+    )
+  },
+  component: ProductsPage,
+})
+
+function ProductsPage() {
+  // All search params are validated, type-safe, and have fallback values applied
+  const { query, category, minPrice, maxPrice, inStock, tags, dateRange } =
+    Route.useSearch()
+
+  return (
+    <div>
+      <h1>Products</h1>
+      <p>Search: {query}</p>
+      <p>Category: {category || 'All'}</p>
+      <p>
+        Price Range: ${minPrice} - ${maxPrice}
+      </p>
+      <p>In Stock Only: {inStock ? 'Yes' : 'No'}</p>
+      {tags && <p>Tags: {tags.join(', ')}</p>}
+      {dateRange && (
+        <p>
+          Date Range: {dateRange.start} to {dateRange.end}
+        </p>
+      )}
+    </div>
+  )
+}
+```
+
+## Validation Library Options
+
+TanStack Router supports multiple validation libraries through adapters:
+
+### Zod (Recommended)
+
+Most popular with excellent TypeScript integration. For Zod v3, use `@tanstack/zod-adapter` for validation:
+
+```tsx
+import { zodValidator, fallback } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  query: z.string().min(1).max(100),
+  page: fallback(z.number().int().positive(), 1),
+  sortBy: z.enum(['name', 'date', 'relevance']).optional(),
+  filters: z.array(z.string()).optional(),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: zodValidator(searchSchema),
+  component: SearchPage,
+})
+```
+
+For Zod v4, the adapter is no longer necessary:
+
+```tsx
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  query: z.string().min(1).max(100),
+  page: z.number().int().positive().default(1),
+  sortBy: z.enum(['name', 'date', 'relevance']).optional(),
+  filters: z.array(z.string()).optional(),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: searchSchema,
+  component: SearchPage,
+})
+```
+
+### Valibot
+
+Lightweight alternative with modular design:
+
+```tsx
+import { valibotValidator } from '@tanstack/valibot-adapter'
+import * as v from 'valibot'
+
+const searchSchema = v.object({
+  query: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
+  page: v.fallback(v.pipe(v.number(), v.integer(), v.minValue(1)), 1),
+  sortBy: v.optional(v.picklist(['name', 'date', 'relevance'])),
+  filters: v.optional(v.array(v.string())),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: valibotValidator(searchSchema),
+  component: SearchPage,
+})
+```
+
+### ArkType
+
+TypeScript-first with runtime validation:
+
+```tsx
+import { type } from 'arktype'
+
+const searchSchema = type({
+  query: 'string>0&<=100',
+  page: 'number>0 = 1',
+  'sortBy?': "'name'|'date'|'relevance'",
+  'filters?': 'string[]',
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: searchSchema,
+  component: SearchPage,
+})
+```
+
+### Custom Validation Function
+
+For complete control, implement your own validation logic:
+
+```tsx
+export const Route = createFileRoute('/search')({
+  validateSearch: (search: Record<string, unknown>) => {
+    // Custom validation with detailed error handling
+    const result = {
+      page: 1,
+      query: '',
+      category: 'all',
+    }
+
+    // Validate page number
+    const pageNum = Number(search.page)
+    if (isNaN(pageNum) || pageNum < 1) {
+      throw new Error('Page must be a positive number')
+    }
+    result.page = pageNum
+
+    // Validate query string
+    if (typeof search.query === 'string' && search.query.length > 0) {
+      if (search.query.length > 100) {
+        throw new Error('Search query too long (max 100 characters)')
+      }
+      result.query = search.query
+    }
+
+    // Validate category
+    const validCategories = ['electronics', 'clothing', 'books', 'all']
+    if (
+      typeof search.category === 'string' &&
+      validCategories.includes(search.category)
+    ) {
+      result.category = search.category
+    }
+
+    return result
+  },
+  component: SearchPage,
+})
+```
+
+## Common Validation Patterns
+
+### Required vs Optional Parameters
+
+Control which search parameters are mandatory:
+
+```tsx
+const validationSchema = z.object({
+  // Required - will throw validation error if missing or invalid
+  userId: z.number().int().positive(),
+  action: z.enum(['view', 'edit', 'delete']),
+
+  // Optional - can be undefined
+  sortBy: z.string().optional(),
+
+  // Optional with fallback - provides default if missing/invalid
+  page: fallback(z.number().int().positive(), 1),
+  limit: fallback(z.number().int().min(1).max(100), 20),
+})
+```
+
+### Complex Data Types
+
+Handle arrays, objects, and custom types:
+
+```tsx
+const advancedSchema = z.object({
+  // Array of strings
+  tags: z.array(z.string()).optional(),
+
+  // Array of numbers
+  categoryIds: z.array(z.number().int()).optional(),
+
+  // Date validation
+  startDate: z.string().datetime().optional(),
+  endDate: z.string().datetime().optional(),
+
+  // Custom validation
+  email: z.string().email().optional(),
+
+  // Refined validation with custom logic
+  priceRange: z
+    .object({
+      min: z.number().min(0),
+      max: z.number().min(0),
+    })
+    .refine((data) => data.max >= data.min, {
+      message: 'Max price must be greater than or equal to min price',
+    })
+    .optional(),
+})
+```
+
+### Input Transformation
+
+Transform and sanitize input values during validation:
+
+```tsx
+const transformSchema = z.object({
+  // Transform string to number
+  page: z
+    .string()
+    .transform((val) => parseInt(val, 10))
+    .pipe(z.number().int().positive()),
+
+  // Transform and validate email
+  email: z.string().toLowerCase().trim().pipe(z.string().email()).optional(),
+
+  // Transform comma-separated string to array
+  tags: z
+    .string()
+    .transform((val) => (val ? val.split(',').map((tag) => tag.trim()) : []))
+    .pipe(z.array(z.string().min(1)))
+    .optional(),
+})
+```
+
+## Error Handling Strategies
+
+### Basic Error Handling
+
+Handle validation errors through route error components:
+
+```tsx
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  query: z.string().min(1, 'Search query is required'),
+  page: z.number().int().positive('Page must be a positive number'),
+})
+
+export const Route = createFileRoute('/search')({
+  validateSearch: zodValidator(searchSchema),
+  errorComponent: ({ error }) => {
+    const router = useRouter()
+
+    return (
+      <div className="error">
+        <h2>Invalid Search Parameters</h2>
+        <p>{error.message}</p>
+        <button onClick={() => router.navigate({ to: '/search', search: {} })}>
+          Reset Search
+        </button>
+        <button
+          onClick={() =>
+            router.navigate({ to: '/search', search: { query: '', page: 1 } })
+          }
+        >
+          Start Over
+        </button>
+      </div>
+    )
+  },
+  component: SearchPage,
+})
+
+function SearchPage() {
+  // Only called when validation succeeds
+  const search = Route.useSearch()
+  // ... rest of component
+}
+```
+
+### Custom Error Messages
+
+Provide user-friendly validation messages:
+
+```tsx
+const userFriendlySchema = z.object({
+  query: z
+    .string()
+    .min(2, 'Search query must be at least 2 characters')
+    .max(100, 'Search query cannot exceed 100 characters'),
+
+  page: fallback(
+    z
+      .number()
+      .int('Page must be a whole number')
+      .positive('Page must be greater than 0'),
+    1,
+  ),
+
+  category: z
+    .enum(['electronics', 'clothing', 'books'], {
+      errorMap: () => ({ message: 'Please select a valid category' }),
+    })
+    .optional(),
+})
+```
+
+### Validation Error Recovery
+
+Implement fallback behavior for invalid parameters:
+
+```tsx
+const resilientSchema = z.object({
+  // Use .catch() to provide fallback values on validation failure
+  page: z.number().int().positive().catch(1),
+
+  // Use .default() for missing values, .catch() for invalid values
+  sortBy: z
+    .enum(['name', 'date', 'relevance'])
+    .default('relevance')
+    .catch('relevance'),
+
+  // Custom recovery logic
+  dateRange: z
+    .object({
+      start: z.string().datetime(),
+      end: z.string().datetime(),
+    })
+    .catch({
+      start: new Date().toISOString(),
+      end: new Date().toISOString(),
+    })
+    .optional(),
+})
+```
+
+## Advanced Validation Techniques
+
+### Conditional Validation
+
+Apply different validation rules based on other parameters:
+
+```tsx
+const conditionalSchema = z
+  .object({
+    searchType: z.enum(['basic', 'advanced']),
+    query: z.string().min(1),
+  })
+  .and(
+    z.discriminatedUnion('searchType', [
+      z.object({
+        searchType: z.literal('basic'),
+        // Basic search requires only query
+      }),
+      z.object({
+        searchType: z.literal('advanced'),
+        // Advanced search requires additional fields
+        category: z.string().min(1),
+        minPrice: z.number().min(0),
+        maxPrice: z.number().min(0),
+      }),
+    ]),
+  )
+```
+
+### Schema Composition
+
+Combine and extend schemas for reusability:
+
+```tsx
+// Base pagination schema
+const paginationSchema = z.object({
+  page: fallback(z.number().int().positive(), 1),
+  limit: fallback(z.number().int().min(1).max(100), 20),
+})
+
+// Base filter schema
+const filterSchema = z.object({
+  sortBy: z.enum(['name', 'date', 'relevance']).optional(),
+  sortOrder: z.enum(['asc', 'desc']).optional(),
+})
+
+// Compose schemas for different routes
+const productSearchSchema = paginationSchema.extend({
+  category: z.string().optional(),
+  inStock: fallback(z.boolean(), true),
+})
+
+const userSearchSchema = paginationSchema.merge(filterSchema).extend({
+  role: z.enum(['admin', 'user', 'moderator']).optional(),
+  isActive: fallback(z.boolean(), true),
+})
+```
+
+### Performance Optimization
+
+Optimize validation for better performance:
+
+```tsx
+// Pre-compile schemas for better performance
+const compiledSchema = zodValidator(
+  z.object({
+    query: z.string().min(1),
+    page: fallback(z.number().int().positive(), 1),
+  }),
+)
+
+export const Route = createFileRoute('/search')({
+  validateSearch: compiledSchema,
+  component: SearchPage,
+})
+
+// Use selective validation for expensive operations
+function SearchPage() {
+  // Only validate specific fields when needed
+  const search = Route.useSearch({
+    select: (search) => ({
+      query: search.query,
+      page: search.page,
+    }),
+  })
+
+  return <div>Search Results</div>
+}
+```
+
+## Testing Search Parameter Validation
+
+Focus on testing validation behavior specific to your schemas:
+
+```tsx
+import { render, screen, waitFor } from '@testing-library/react'
+import {
+  createRouter,
+  createMemoryHistory,
+  RouterProvider,
+} from '@tanstack/react-router'
+
+describe('Search Validation Behavior', () => {
+  it('should show error component when validation fails', async () => {
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/search?page=invalid&query='],
+      }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Invalid Search Parameters')).toBeInTheDocument()
+    })
+  })
+
+  it('should apply fallback values correctly', async () => {
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/search?query=laptops'], // page missing
+      }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Page: 1')).toBeInTheDocument() // Fallback applied
+    })
+  })
+})
+```
+
+**For comprehensive route testing patterns, see:** [Set Up Testing](/router/how-to/setup-testing) and [Test File-Based Routing](/router/how-to/test-file-based-routing)
+
+## Common Problems
+
+### Problem: Validation errors break the entire route
+
+**Symptoms:** Page fails to load when URL contains invalid search parameters.
+
+**Solution:** Use fallback values and error boundaries:
+
+```tsx
+// ❌ Wrong - will throw error and break route
+const strictSchema = z.object({
+  page: z.number().int().positive(), // No fallback
+})
+
+// ✅ Correct - provides fallback for invalid values
+const resilientSchema = z.object({
+  page: fallback(z.number().int().positive(), 1),
+})
+
+// ✅ Alternative - use errorComponent on route
+export const Route = createFileRoute('/search')({
+  validateSearch: resilientSchema,
+  errorComponent: ({ error }) => <SearchError error={error} />,
+  component: SearchPage,
+})
+
+function SearchPage() {
+  // Only called when validation succeeds
+  const search = Route.useSearch()
+  return <SearchResults search={search} />
+}
+```
+
+### Problem: TypeScript errors with optional search parameters
+
+**Symptoms:** TypeScript complains about potentially undefined values.
+
+**Solution:** Use proper optional handling or fallback values:
+
+```tsx
+// ❌ Wrong - category might be undefined
+function FilterBar() {
+  const { category } = Route.useSearch()
+  return <span>{category.toUpperCase()}</span> // TypeScript error
+}
+
+// ✅ Correct - handle optional values
+function FilterBar() {
+  const { category } = Route.useSearch()
+  return <span>{category?.toUpperCase() || 'All Categories'}</span>
+}
+
+// ✅ Better - use fallback in schema
+const schema = z.object({
+  category: fallback(z.string(), 'all'),
+})
+```
+
+### Problem: Search parameter arrays not parsing correctly
+
+**Symptoms:** Array values appear as strings instead of arrays.
+
+**Solution:** Ensure proper array parsing in your schema:
+
+```tsx
+// ❌ Wrong - doesn't handle URL array format
+const badSchema = z.object({
+  tags: z.array(z.string()).optional(),
+})
+
+// ✅ Correct - parse comma-separated values or multiple params
+const goodSchema = z.object({
+  tags: z
+    .union([
+      z.array(z.string()), // Multiple ?tags=a&tags=b
+      z.string().transform((val) => val.split(',')), // Single ?tags=a,b,c
+    ])
+    .optional(),
+})
+
+// ✅ Alternative - custom preprocessing
+const preprocessedSchema = z.preprocess((val) => {
+  if (typeof val === 'string') return val.split(',')
+  return val
+}, z.array(z.string()).optional())
+```
+
+### Problem: Schema validation is too slow
+
+**Symptoms:** Noticeable delay when navigating with complex search parameters.
+
+**Solution:** Optimize schema complexity and use selective parsing:
+
+```tsx
+// ❌ Slow - complex validation on every navigation
+const complexSchema = z.object({
+  query: z.string().refine(async (val) => await validateQuery(val)),
+  // ... many complex validations
+})
+
+// ✅ Fast - simplified validation with lazy refinement
+const optimizedSchema = z.object({
+  query: z.string().min(1), // Basic validation only
+  // ... other simple validations
+})
+
+// Perform complex validation separately in component
+function SearchPage() {
+  const search = Route.useSearch()
+
+  // Complex validation only when needed
+  const [complexValidation, setComplexValidation] = useState(null)
+
+  useEffect(() => {
+    validateComplexRules(search).then(setComplexValidation)
+  }, [search])
+
+  return <SearchResults search={search} validation={complexValidation} />
+}
+```
+
+## Common Next Steps
+
+After setting up schema validation, you might want to:
+
+- [Work with Arrays, Objects, and Dates](/router/how-to/arrays-objects-dates-search-params) - Handle arrays, objects, dates, and nested data structures
+
+
+
+
+## Related Resources
+
+- [TanStack Zod Adapter Documentation](/router/guide/search-params#zod-adapter)
+- [TanStack Valibot Adapter Documentation](/router/guide/search-params#valibot-adapter)
+- [Zod Documentation](https://zod.dev/) - Schema validation library
+- [Valibot Documentation](https://valibot.dev/) - Lightweight validation library
+- [ArkType Documentation](https://arktype.io/) - TypeScript-first validation
diff --git a/mintlify/router/index.mdx b/mintlify/router/index.mdx
new file mode 100644
index 000000000..a78b22c9c
--- /dev/null
+++ b/mintlify/router/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Router"
+description: "Type-safe routing for React and Solid applications. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Type-safe routing for React and Solid applications.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/router/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/router">
+    Visit the canonical TanStack Router website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/router">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/router/installation/manual.md b/mintlify/router/installation/manual.md
new file mode 100644
index 000000000..5a59e2f3a
--- /dev/null
+++ b/mintlify/router/installation/manual.md
@@ -0,0 +1,387 @@
+---
+title: Manual Setup
+---
+
+To set up TanStack Router manually in a React project, follow the steps below. This gives you a bare minimum setup to get going with TanStack Router using both file-based route generation and code-based route configuration:
+
+## Using File-Based Route Generation
+
+#### Install TanStack Router, Vite Plugin, and the Router Devtools
+
+Install the necessary core dependencies:
+
+
+
+react: @tanstack/react-router @tanstack/react-router-devtools
+solid: @tanstack/solid-router @tanstack/solid-router-devtools
+
+
+
+Install the necessary development dependencies:
+
+
+
+react: @tanstack/router-plugin
+solid: @tanstack/router-plugin
+
+
+
+#### Configure the Vite Plugin
+
+```tsx
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    react(),
+    // ...,
+  ],
+})
+```
+
+> [!TIP]
+> If you are not using Vite, or any of the supported bundlers, you can check out the [TanStack Router CLI](/router/installation/with-router-cli) guide for more info.
+
+Create the following files:
+
+- `src/routes/__root.tsx` (with two '`_`' characters)
+- `src/routes/index.tsx`
+- `src/routes/about.tsx`
+- `src/main.tsx`
+
+
+
+# React
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+const RootLayout = () => (
+  <>
+    <div className="p-2 flex gap-2">
+      <Link to="/" className="[&.active]:font-bold">
+        Home
+      </Link>{' '}
+      <Link to="/about" className="[&.active]:font-bold">
+        About
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+)
+
+export const Route = createRootRoute({ component: RootLayout })
+```
+
+```tsx title="src/routes/index.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}
+```
+
+```tsx title="src/routes/about.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+
+function About() {
+  return <div className="p-2">Hello from About!</div>
+}
+```
+
+```tsx title="src/main.tsx"
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}
+```
+
+
+
+# Solid
+
+
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+const RootLayout = () => (
+  <>
+    <div class="p-2 flex gap-2">
+      <Link to="/" class="[&.active]:font-bold">
+        Home
+      </Link>{' '}
+      <Link to="/about" class="[&.active]:font-bold">
+        About
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+)
+
+export const Route = createRootRoute({ component: RootLayout })
+```
+
+```tsx title="src/routes/index.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <div class="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}
+```
+
+```tsx title="src/routes/about.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+
+function About() {
+  return <div class="p-2">Hello from About!</div>
+}
+```
+
+```tsx title="src/main.tsx"
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+
+render(() => <RouterProvider router={router} />, rootElement)
+```
+
+
+
+
+
+Regardless of whether you are using the `@tanstack/router-plugin` package and running the `npm run dev`/`npm run build` scripts, or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the route tree file will be generated at `src/routeTree.gen.ts`.
+
+If you are working with this pattern you should change the `id` of the root `<div>` on your `index.html` file to `<div id='root'></div>`
+
+## Using Code-Based Route Configuration
+
+> [!IMPORTANT]
+> The following example shows how to configure routes using code, and for simplicity's sake is in a single file for this demo. While code-based generation allows you to declare many routes and even the router instance in a single file, we recommend splitting your routes into separate files for better organization and performance as your application grows.
+
+
+
+# React
+
+```tsx
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  Outlet,
+  RouterProvider,
+  Link,
+  createRouter,
+  createRoute,
+  createRootRoute,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{' '}
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: function Index() {
+    return (
+      <div className="p-2">
+        <h3>Welcome Home!</h3>
+      </div>
+    )
+  },
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: function About() {
+    return <div className="p-2">Hello from About!</div>
+  },
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}
+```
+
+# Solid
+
+```tsx
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import {
+  Outlet,
+  RouterProvider,
+  Link,
+  createRouter,
+  createRoute,
+  createRootRoute,
+} from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <div class="p-2 flex gap-2">
+        <Link to="/" class="[&.active]:font-bold">
+          Home
+        </Link>{' '}
+        <Link to="/about" class="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: function Index() {
+    return (
+      <div class="p-2">
+        <h3>Welcome Home!</h3>
+      </div>
+    )
+  },
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: function About() {
+    return <div class="p-2">Hello from About!</div>
+  },
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+render(() => <RouterProvider router={router} />, rootElement)
+```
+
+
+
+If you glossed over these examples or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.
diff --git a/mintlify/router/installation/migrate-from-react-location.md b/mintlify/router/installation/migrate-from-react-location.md
new file mode 100644
index 000000000..c2bfcf2a9
--- /dev/null
+++ b/mintlify/router/installation/migrate-from-react-location.md
@@ -0,0 +1,267 @@
+---
+title: Migration from React Location
+---
+
+Before you begin your journey in migrating from React Location, it's important that you have a good understanding of the [Routing Concepts](/router/routing/routing-concepts) and [Design Decisions](/router/decisions-on-dx) used by TanStack Router.
+
+## Differences between React Location and TanStack Router
+
+React Location and TanStack Router share much of same design decisions concepts, but there are some key differences that you should be aware of.
+
+- React Location uses _generics_ to infer types for routes, while TanStack Router uses _module declaration merging_ to infer types.
+- Route configuration in React Location is done using a single array of route definitions, while in TanStack Router, route configuration is done using a tree of route definitions starting with the [root route](/router/routing/routing-concepts#the-root-route).
+- [File-based routing](/router/routing/file-based-routing) is the recommended way to define routes in TanStack Router, while React Location only allows you to define routes in a single file using a code-based approach.
+  - TanStack Router does support a [code-based approach](/router/routing/code-based-routing) to defining routes, but it is not recommended for most use cases. You can read more about why, over here: [why is file-based routing the preferred way to define routes?](/router/decisions-on-dx#why-is-file-based-routing-the-preferred-way-to-define-routes)
+
+## Migration guide
+
+In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).
+
+> [!TIP]
+> To use a code-based approach for defining your routes, you can read the [code-based Routing](/router/routing/code-based-routing) guide.
+
+### Step 1: Swap over to TanStack Router's dependencies
+
+First, we need to install the dependencies for TanStack Router. For detailed installation instructions, see our [How to Install TanStack Router](/router/how-to/install) guide.
+
+```sh
+npm install @tanstack/react-router @tanstack/router-devtools
+```
+
+And remove the React Location dependencies.
+
+```sh
+npm uninstall @tanstack/react-location @tanstack/react-location-devtools
+```
+
+### Step 2: Use the file-based routing watcher
+
+If your project uses Vite (or one of the supported bundlers), you can use the TanStack Router plugin to watch for changes in your routes files and automatically update the routes configuration.
+
+Installation of the Vite plugin:
+
+```sh
+npm install -D @tanstack/router-plugin
+```
+
+And add it to your `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  // ...
+  plugins: [tanstackRouter(), react()],
+})
+```
+
+However, if your application does not use Vite, you use one of our other [supported bundlers](/router/routing/file-based-routing#getting-started-with-file-based-routing), or you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.
+
+### Step 3: Add the file-based configuration file to your project
+
+Create a `tsr.config.json` file in the root of your project with the following content:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts"
+}
+```
+
+You can find the full list of options for the `tsr.config.json` file in the [File-Based Routing](/router/routing/file-based-routing) guide.
+
+### Step 4: Create the routes directory
+
+Create a `routes` directory in the `src` directory of your project.
+
+```sh
+mkdir src/routes
+```
+
+### Step 5: Create the root route file
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet, Link } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+  component: () => {
+    return (
+      <>
+        <div>
+          <Link to="/" activeOptions={{ exact: true }}>
+            Home
+          </Link>
+          <Link to="/posts">Posts</Link>
+        </div>
+        <hr />
+        <Outlet />
+        <TanStackRouterDevtools />
+      </>
+    )
+  },
+})
+```
+
+### Step 6: Create the index route file
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+```
+
+> You will need to move any related components and logic needed for the index route from the `src/index.tsx` file to the `src/routes/index.tsx` file.
+
+### Step 7: Create the posts route file
+
+```tsx
+// src/routes/posts.tsx
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  component: Posts,
+  loader: async () => {
+    const posts = await fetchPosts()
+    return {
+      posts,
+    }
+  },
+})
+
+function Posts() {
+  const { posts } = Route.useLoaderData()
+  return (
+    <div>
+      <nav>
+        {posts.map((post) => (
+          <Link
+            key={post.id}
+            to={`/posts/$postId`}
+            params={{ postId: post.id }}
+          >
+            {post.title}
+          </Link>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+> You will need to move any related components and logic needed for the posts route from the `src/index.tsx` file to the `src/routes/posts.tsx` file.
+
+### Step 8: Create the posts index route file
+
+```tsx
+// src/routes/posts.index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndex,
+})
+```
+
+> You will need to move any related components and logic needed for the posts index route from the `src/index.tsx` file to the `src/routes/posts.index.tsx` file.
+
+### Step 9: Create the posts id route file
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostsId,
+  loader: async ({ params: { postId } }) => {
+    const post = await fetchPost(postId)
+    return {
+      post,
+    }
+  },
+})
+
+function PostsId() {
+  const { post } = Route.useLoaderData()
+  // ...
+}
+```
+
+> You will need to move any related components and logic needed for the posts id route from the `src/index.tsx` file to the `src/routes/posts.$postId.tsx` file.
+
+### Step 10: Generate the route tree
+
+If you are using one of the supported bundlers, the route tree will be generated automatically when you run the dev script.
+
+If you are not using one of the supported bundlers, you can generate the route tree by running the following command:
+
+```sh
+npx tsr generate
+```
+
+### Step 11: Update the main entry file to render the Router
+
+Once you've generated the route-tree, you can then update the `src/index.tsx` file to create the router instance and render it.
+
+```tsx
+// src/index.tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createRouter, RouterProvider } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const domElementId = 'root' // Assuming you have a root element with the id 'root'
+
+// Render the app
+const rootElement = document.getElementById(domElementId)
+if (!rootElement) {
+  throw new Error(`Element with id ${domElementId} not found`)
+}
+
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
+```
+
+### Finished!
+
+You should now have successfully migrated your application from React Location to TanStack Router using file-based routing.
+
+React Location also has a few more features that you might be using in your application. Here are some guides to help you migrate those features:
+
+- [Search params](/router/guide/search-params)
+- [Data loading](/router/guide/data-loading)
+- [History types](/router/guide/history-types)
+- [Wildcard / Splat / Catch-all routes](/router/routing/routing-concepts#splat--catch-all-routes)
+- [Authenticated routes](/router/guide/authenticated-routes)
+
+TanStack Router also has a few more features that you might want to explore:
+
+- [Router Context](/router/guide/router-context)
+- [Preloading](/router/guide/preloading)
+- [Pathless Layout Routes](/router/routing/routing-concepts#pathless-layout-routes)
+- [Route masking](/router/guide/route-masking)
+- [SSR](/router/guide/ssr)
+- ... and more!
+
+If you are facing any issues or have any questions, feel free to ask for help in the TanStack Discord.
diff --git a/mintlify/router/installation/migrate-from-react-router.md b/mintlify/router/installation/migrate-from-react-router.md
new file mode 100644
index 000000000..a5e942000
--- /dev/null
+++ b/mintlify/router/installation/migrate-from-react-router.md
@@ -0,0 +1,34 @@
+---
+title: Migration from React Router Checklist
+toc: false
+---
+
+**_If your UI is blank, open the console, and you will probably have some errors that read something along the lines of `cannot use 'useNavigate' outside of context` . This means there are React Router api’s that are still imported and referenced that you need to find and remove. The easiest way to make sure you find all React Router imports is to uninstall `react-router-dom` and then you should get typescript errors in your files. Then you will know what to change to a `@tanstack/react-router` import._**
+
+Here is the [example repo](https://github.com/Benanna2019/SickFitsForEveryone/tree/migrate-to-tanstack/router/React-Router)
+
+- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](/router/how-to/install))
+- [ ] **Optional:** Uninstall React Router to get TypeScript errors on imports.
+  - At this point I don’t know if you can do a gradual migration, but it seems likely you could have multiple router providers, not desirable.
+  - The api’s between React Router and TanStack Router are very similar and could most likely be handled in a sprint cycle or two if that is your companies way of doing things.
+- [ ] Create Routes for each existing React Router route we have
+- [ ] Create root route
+- [ ] Create router instance
+- [ ] Add global module in main.tsx
+- [ ] Remove any React Router (`createBrowserRouter` or `BrowserRouter`), `Routes`, and `Route` Components from main.tsx
+- [ ] **Optional:** Refactor `render` function for custom setup/providers - The repo referenced above has an example - This was necessary in the case of Supertokens. Supertoken has a specific setup with React Router and a different setup with all other React implementations
+- [ ] Set RouterProvider and pass it the router as the prop
+- [ ] Replace all instances of React Router `Link` component with `@tanstack/react-router` `Link` component
+  - [ ] Add `to` prop with literal path
+  - [ ] Add `params` prop, where necessary with params like so `params={{ orderId: order.id }}`
+- [ ] Replace all instances of React Router `useNavigate` hook with `@tanstack/react-router` `useNavigate` hook
+  - [ ] Set `to` property and `params` property where needed
+- [ ] Replace any React Router `Outlet`'s with the `@tanstack/react-router` equivalent
+- [ ] If you are using `useSearchParams` hook from React Router, move the search params default value to the validateSearch property on a Route definition.
+  - [ ] Instead of using the `useSearchParams` hook, use `@tanstack/react-router` `Link`'s search property to update the search params state
+  - [ ] To read search params you can do something like the following
+    - `const { page } = useSearch({ from: productPage.fullPath })`
+- [ ] If using React Router’s `useParams` hook, update the import to be from `@tanstack/react-router` and set the `from` property to the literal path name where you want to read the params object from
+  - So say we have a route with the path name `orders/$orderid`.
+  - In the `useParams` hook we would set up our hook like so: `const params = useParams({ from: "/orders/$orderId" })`
+  - Then wherever we wanted to access the order id we would get it off of the params object `params.orderId`
diff --git a/mintlify/router/installation/with-esbuild.md b/mintlify/router/installation/with-esbuild.md
new file mode 100644
index 000000000..eccdc4608
--- /dev/null
+++ b/mintlify/router/installation/with-esbuild.md
@@ -0,0 +1,121 @@
+---
+title: Installation with Esbuild
+---
+
+To use file-based routing with **Esbuild**, you'll need to install the `@tanstack/router-plugin` package.
+
+
+
+react: @tanstack/router-plugin
+solid: @tanstack/router-plugin
+
+
+
+Once installed, you'll need to add the plugin to your configuration.
+
+
+
+# React
+
+```ts title="esbuild.config.js"
+import { tanstackRouter } from '@tanstack/router-plugin/esbuild'
+
+export default {
+  // ...
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+  ],
+}
+```
+
+Or, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based) and get started.
+
+# Solid
+
+```ts title="build.js"
+import * as esbuild from 'esbuild'
+import { solidPlugin } from 'esbuild-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/esbuild'
+
+const isDev = process.argv.includes('--dev')
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/main.tsx'],
+  outfile: 'dist/main.js',
+  minify: !isDev,
+  bundle: true,
+  format: 'esm',
+  target: ['esnext'],
+  sourcemap: true,
+  plugins: [
+    solidPlugin(),
+    tanstackRouter({ target: 'solid', autoCodeSplitting: true }),
+  ],
+})
+
+if (isDev) {
+  await ctx.watch()
+  const { host, port } = await ctx.serve({ servedir: '.', port: 3005 })
+  console.log(`Server running at http://${host || 'localhost'}:${port}`)
+} else {
+  await ctx.rebuild()
+  await ctx.dispose()
+}
+```
+
+Or, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-esbuild-file-based) and get started.
+
+
+
+Now that you've added the plugin to your Esbuild configuration, you're all set to start using file-based routing with TanStack Router.
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router Plugin with Esbuild for File-based routing, it comes with some sane defaults that should work for most projects:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single"
+}
+```
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
+
+You can find all the available configuration options in the [File-based Routing API Reference](/router/api/file-based-routing).
diff --git a/mintlify/router/installation/with-router-cli.md b/mintlify/router/installation/with-router-cli.md
new file mode 100644
index 000000000..df38e1391
--- /dev/null
+++ b/mintlify/router/installation/with-router-cli.md
@@ -0,0 +1,141 @@
+---
+title: Installation with Router CLI
+---
+
+> [!WARNING]
+> You should only use the TanStack Router CLI if you are not using a supported bundler. The CLI only supports the generation of the route tree file and does not provide any other features.
+
+To use file-based routing with the TanStack Router CLI, you'll need to install the `@tanstack/router-cli` package.
+
+
+
+react: @tanstack/router-cli
+solid: @tanstack/router-cli
+
+
+
+Once installed, you'll need to amend your scripts in your `package.json` for the CLI to `watch` and `generate` files.
+
+```json
+{
+  "scripts": {
+    "generate-routes": "tsr generate",
+    "watch-routes": "tsr watch",
+    "build": "npm run generate-routes && ...",
+    "dev": "npm run watch-routes && ..."
+  }
+}
+```
+
+
+
+# Solid
+
+If you are using TypeScript, you should also add the following options to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}
+```
+
+With that, you're all set to start using file-based routing with TanStack Router.
+
+
+
+[//]: # 'AfterScripts'
+[//]: # 'AfterScripts'
+
+You shouldn't forget to _ignore_ the generated route tree file. Head over to the [Ignoring the generated route tree file](#ignoring-the-generated-route-tree-file) section to learn more.
+
+With the CLI installed, the following commands are made available via the `tsr` command
+
+## Using the `generate` command
+
+Generates the routes for a project based on the provided configuration.
+
+```sh
+tsr generate
+```
+
+## Using the `watch` command
+
+Continuously watches the specified directories and regenerates routes as needed.
+
+**Usage:**
+
+```sh
+tsr watch
+```
+
+With file-based routing enabled, whenever you start your application in development mode, TanStack Router will watch your configured `routesDirectory` and generate your route tree whenever a file is added, removed, or changed.
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router CLI for File-based routing, it comes with some sane defaults that should work for most projects:
+
+
+
+# React
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single",
+  "target": "react"
+}
+```
+
+# Solid
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single",
+  "target": "solid"
+}
+```
+
+
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by creating a `tsr.config.json` file in the root of your project directory.
+
+You can find all the available configuration options in the [File-based Routing API Reference](/router/api/file-based-routing).
diff --git a/mintlify/router/installation/with-rspack.md b/mintlify/router/installation/with-rspack.md
new file mode 100644
index 000000000..426ea35b4
--- /dev/null
+++ b/mintlify/router/installation/with-rspack.md
@@ -0,0 +1,117 @@
+---
+title: Installation with Rspack
+---
+
+To use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the `@tanstack/router-plugin` package.
+
+
+
+react: @tanstack/router-plugin
+solid: @tanstack/router-plugin
+
+
+
+Once installed, you'll need to add the plugin to your configuration.
+
+
+
+# React
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  tools: {
+    rspack: {
+      plugins: [
+        tanstackRouter({
+          target: 'react',
+          autoCodeSplitting: true,
+        }),
+      ],
+    },
+  },
+})
+```
+
+Or, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-rspack-file-based) and get started.
+
+# Solid
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+  ],
+  tools: {
+    rspack: {
+      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],
+    },
+  },
+})
+```
+
+Or, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-rspack-file-based) and get started.
+
+
+
+Now that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single"
+}
+```
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
+
+You can find all the available configuration options in the [File-based Routing API Reference](/router/api/file-based-routing).
diff --git a/mintlify/router/installation/with-vite.md b/mintlify/router/installation/with-vite.md
new file mode 100644
index 000000000..fd512d684
--- /dev/null
+++ b/mintlify/router/installation/with-vite.md
@@ -0,0 +1,113 @@
+---
+title: Installation with Vite
+---
+
+To use file-based routing with **Vite**, you'll need to install the `@tanstack/router-plugin` package.
+
+
+
+react: @tanstack/router-plugin
+solid: @tanstack/router-plugin
+
+
+
+Once installed, you'll need to add the plugin to your Vite configuration.
+
+
+
+# React
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    react(),
+    // ...
+  ],
+})
+```
+
+Or, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based) and get started.
+
+# Solid
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: 'solid',
+      autoCodeSplitting: true,
+    }),
+    solid(),
+    // ...
+  ],
+})
+```
+
+Or, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-file-based) and get started.
+
+
+
+Now that you've added the plugin to your Vite configuration, you're all set to start using file-based routing with TanStack Router.
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router Plugin with Vite for File-based routing, it comes with some sane defaults that should work for most projects:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single"
+}
+```
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
+
+You can find all the available configuration options in the [File-based Routing API Reference](/router/api/file-based-routing).
diff --git a/mintlify/router/installation/with-webpack.md b/mintlify/router/installation/with-webpack.md
new file mode 100644
index 000000000..2c2cd89df
--- /dev/null
+++ b/mintlify/router/installation/with-webpack.md
@@ -0,0 +1,113 @@
+---
+title: Installation with Webpack
+---
+
+To use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.
+
+
+
+react: @tanstack/router-plugin
+solid: @tanstack/router-plugin
+
+
+
+Once installed, you'll need to add the plugin to your configuration.
+
+
+
+# React
+
+```ts title="webpack.config.ts"
+import { tanstackRouter } from '@tanstack/router-plugin/webpack'
+
+export default {
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+  ],
+}
+```
+
+Or, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-webpack-file-based) and get started.
+
+# Solid
+
+```ts title="webpack.config.ts"
+import { tanstackRouter } from '@tanstack/router-plugin/webpack'
+
+export default {
+  plugins: [
+    tanstackRouter({
+      target: 'solid',
+      autoCodeSplitting: true,
+    }),
+  ],
+}
+```
+
+And in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:
+
+```tsx
+// .babelrc
+
+{
+  "presets": ["babel-preset-solid", "@babel/preset-typescript"]
+}
+
+```
+
+Or, for a full webpack.config.js, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-webpack-file-based) and get started.
+
+
+
+Now that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single"
+}
+```
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
+
+You can find all the available configuration options in the [File-based Routing API Reference](/router/api/file-based-routing).
diff --git a/mintlify/router/integrations/query.md b/mintlify/router/integrations/query.md
new file mode 100644
index 000000000..3a06410bb
--- /dev/null
+++ b/mintlify/router/integrations/query.md
@@ -0,0 +1,218 @@
+---
+id: query
+title: TanStack Query Integration
+---
+
+> [!IMPORTANT]
+> This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard [External Data Loading](/router/guide/external-data-loading) guide, start there.
+
+## What you get
+
+- **Automatic SSR dehydration/hydration** of your `QueryClient`
+- **Streaming of queries** that resolve during initial server render to the client
+- **Redirect handling** for `redirect()` thrown from queries/mutations
+- Optional **provider wrapping** with `QueryClientProvider`
+
+## Installation
+
+The TanStack query integration is a separate package that you need to install:
+
+
+
+react: @tanstack/react-router-ssr-query
+solid: @tanstack/solid-router-ssr-query
+
+
+
+## Setup
+
+Create your router and wire up the integration. Ensure a fresh `QueryClient` is created per request in SSR environments.
+
+
+
+# React
+
+```tsx title="src/router.tsx"
+import { QueryClient } from '@tanstack/react-query'
+import { createRouter } from '@tanstack/react-router'
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const queryClient = new QueryClient()
+  const router = createRouter({
+    routeTree,
+    // optionally expose the QueryClient via router context
+    context: { queryClient },
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+  })
+
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+    // optional:
+    // handleRedirects: true,
+    // wrapQueryClient: true,
+  })
+
+  return router
+}
+```
+
+
+
+By default, the integration wraps your router with a `QueryClientProvider`. If you already provide your own provider, pass `wrapQueryClient: false` and keep your custom wrapper.
+
+You can also pass `dehydrateOptions` and `hydrateOptions` to customize how TanStack Query serializes SSR payloads and restores them on the client.
+
+```tsx
+setupRouterSsrQueryIntegration({
+  router,
+  queryClient,
+  dehydrateOptions: {
+    shouldDehydrateQuery: (query) => query.meta?.ssr !== false,
+  },
+  hydrateOptions: {
+    defaultOptions: {
+      queries: {
+        gcTime: 60_000,
+      },
+    },
+  },
+})
+```
+
+Common uses for these options:
+
+- Set `hydrateOptions.defaultOptions.queries.gcTime` to control how long hydrated SSR queries stay in the client cache before garbage collection.
+- Set `dehydrateOptions.shouldDehydrateQuery` to exclude queries you do not want serialized into the HTML payload.
+- Set `dehydrateOptions.serializeData` and `hydrateOptions.defaultOptions.deserializeData` when your SSR payload needs custom serialization.
+
+```tsx title="src/router.tsx"
+import { QueryClient } from '@tanstack/react-query'
+import { createRouter } from '@tanstack/react-router'
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const queryClient = new QueryClient()
+
+  const router = createRouter({
+    routeTree,
+    context: { queryClient },
+  })
+
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+    hydrateOptions: {
+      defaultOptions: {
+        queries: {
+          gcTime: 5 * 60 * 1000,
+        },
+      },
+    },
+  })
+
+  return router
+}
+```
+
+## SSR behavior and streaming
+
+- During server render, the integration dehydrates initial queries and streams any subsequent queries that resolve while rendering.
+- On the client, the integration hydrates the initial state, then incrementally hydrates streamed queries.
+- Queries from `useSuspenseQuery` or loader prefetches participate in SSR/streaming. Plain `useQuery` does not execute on the server.
+
+## Use in routes
+
+### Using useSuspenseQuery vs useQuery
+
+- `useSuspenseQuery`: runs on the server during SSR when its data is required and will be streamed to the client as it resolves.
+- `useQuery`: does not execute on the server; it will fetch on the client after hydration. Use this for data that is not required for SSR.
+
+
+
+# React
+
+```tsx
+// Suspense: executes on server and streams
+const { data } = useSuspenseQuery(postsQuery)
+
+// Non-suspense: executes only on client
+const { data, isLoading } = useQuery(postsQuery)
+```
+
+
+
+### Preload with a loader and read with a hook
+
+Preload critical data in the route `loader` to avoid waterfalls and loading flashes, then read it in the component. The integration ensures server-fetched data is dehydrated and streamed to the client during SSR.
+
+
+
+# React
+
+```tsx title="src/routes/posts.tsx"
+import { queryOptions, useSuspenseQuery, useQuery } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
+
+const postsQuery = queryOptions({
+  queryKey: ['posts'],
+  queryFn: () => fetch('/api/posts').then((r) => r.json()),
+})
+
+export const Route = createFileRoute('/posts')({
+  // Ensure the data is in the cache before render
+  loader: ({ context }) => context.queryClient.ensureQueryData(postsQuery),
+  component: PostsPage,
+})
+
+function PostsPage() {
+  // Prefer suspense for best SSR + streaming behavior
+  const { data } = useSuspenseQuery(postsQuery)
+  return <div>{data.map((p: any) => p.title).join(', ')}</div>
+}
+```
+
+
+
+### Prefetching and streaming
+
+You can also prefetch with `fetchQuery` or `ensureQueryData` in a loader without consuming the data in a component. If you return the promise directly from the loader, it will be awaited and thus block the SSR request until the query finishes. If you don't await the promise nor return it, the query will be started on the server and will be streamed to the client without blocking the SSR request.
+
+
+
+# React
+
+```tsx title="src/routes/users.$id.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+import { queryOptions, useQuery } from '@tanstack/react-query'
+
+const userQuery = (id: string) =>
+  queryOptions({
+    queryKey: ['user', id],
+    queryFn: () => fetch(`/api/users/${id}`).then((r) => r.json()),
+  })
+
+export const Route = createFileRoute('/user/$id')({
+  loader: ({ params }) => {
+    // do not await this nor return the promise, just kick off the query to stream it to the client
+    context.queryClient.fetchQuery(userQuery(params.id))
+  },
+})
+```
+
+
+
+## Redirect handling
+
+If a query or mutation throws a `redirect(...)`, the integration intercepts it on the client and performs a router navigation.
+
+- Enabled by default
+- Disable with `handleRedirects: false` if you need custom handling
+
+## Works with TanStack Start
+
+TanStack Start uses TanStack Router under the hood. The same setup applies, and the integration will stream query results during SSR automatically.
diff --git a/mintlify/router/overview.md b/mintlify/router/overview.md
new file mode 100644
index 000000000..a208c7b03
--- /dev/null
+++ b/mintlify/router/overview.md
@@ -0,0 +1,141 @@
+---
+title: Overview
+---
+
+**TanStack Router is a router for building React and Solid applications**. Some of its features include:
+
+- 100% inferred TypeScript support
+- Typesafe navigation
+- Nested Routing and layout routes (with pathless layouts)
+- Built-in Route Loaders w/ SWR Caching
+- Designed for client-side data caches (TanStack Query, SWR, etc.)
+- Automatic route prefetching
+- Asynchronous route elements and error boundaries
+- File-based Route Generation
+- Typesafe JSON-first Search Params state management APIs
+- Path and Search Parameter Schema Validation
+- Search Param Navigation APIs
+- Custom Search Param parser/serializer support
+- Search param middleware
+- Route matching/loading middleware
+
+To get started quickly, head to the next page. For a more lengthy explanation, buckle up while I bring you up to speed!
+
+## "A Fork in the Route"
+
+Using a router to build applications is widely regarded as a must-have and is usually one of the first choices you’ll make in your tech stack.
+
+## Why TanStack Router?
+
+TanStack Router delivers on the same fundamental expectations as other routers that you’ve come to expect:
+
+- Nested routes, layout routes, grouped routes
+- File-based Routing
+- Parallel data loading
+- Prefetching
+- URL Path Params
+- Error Boundaries and Handling
+- SSR
+- Route Masking
+
+And it also delivers some new features that raise the bar:
+
+- 100% inferred TypeScript support
+- Typesafe navigation
+- Built-in SWR Caching for loaders
+- Designed for client-side data caches (TanStack Query, SWR, etc.)
+- Typesafe JSON-first Search Params state management APIs
+- Path and Search Parameter Schema Validation
+- Search Parameter Navigation APIs
+- Custom Search Param parser/serializer support
+- Search param middleware
+- Inherited Route Context
+- Mixed file-based and code-based routing
+
+Let’s dive into some of the more important ones in more detail!
+
+## 100% Inferred TypeScript Support
+
+Everything these days is written “in Typescript” or at the very least offers type definitions that are veneered over runtime functionality, but too few packages in the ecosystem actually design their APIs with TypeScript in mind. So while I’m pleased that your router is auto-completing your option fields and catching a few property/method typos here and there, there is much more to be had.
+
+- TanStack Router is fully aware of all of your routes and their configuration at any given point in your code. This includes the path, path params, search params, context, and any other configuration you’ve provided. Ultimately this means that you can navigate to any route in your app with 100% type safety and confidence that your link or navigate call will succeed.
+- TanStack Router provides lossless type-inference. It uses countless generic type parameters to enforce and propagate any type information you give it throughout the rest of its API and ultimately your app. No other router offers this level of type safety and developer confidence.
+
+What does all of that mean for you?
+
+- Faster feature development with auto-completion and type hints
+- Safer and faster refactors
+- Confidence that your code will work as expected
+
+## 1st Class Search Parameters
+
+Search parameters are often an afterthought, treated like a black box of strings (or string) that you can parse and update, but not much else. Existing solutions are **not** type-safe either, adding to the caution that is required to deal with them. Even the most "modern" frameworks and routers leave it up to you to figure out how to manage this state. Sometimes they'll parse the search string into an object for you, or sometimes you're left to do it yourself with `URLSearchParams`.
+
+Let's step back and remember that **search params are the most powerful state manager in your entire application.** They are global, serializable, bookmarkable, and shareable making them the perfect place to store any kind of state that needs to survive a page refresh or a social share.
+
+To live up to that responsibility, search parameters are a first-class citizen in TanStack Router. While still based on standard URLSearchParams, TanStack Router uses a powerful parser/serializer to manage deeper and more complex data structures in your search params, all while keeping them type-safe and easy to work with.
+
+**It's like having `useState` right in the URL!**
+
+Search parameters are:
+
+- Automatically parsed and serialized as JSON
+- Validated and typed
+- Inherited from parent routes
+- Accessible in loaders, components, and hooks
+- Easily modified with the useSearch hook, Link, navigate, and router.navigate APIs
+- Customizable with a custom search filters and middleware
+- Subscribed via fine-grained search param selectors for efficient re-renders
+
+Once you start using TanStack Router's search parameters, you'll wonder how you ever lived without them.
+
+## Built-In Caching and Friendly Data Loading
+
+Data loading is a critical part of any application and while most existing routers offer some form of critical data loading APIs, they often fall short when it comes to caching and data lifecycle management. Existing solutions suffer from a few common problems:
+
+- No caching at all. Data is always fresh, but your users are left waiting for frequently accessed data to load over and over again.
+- Overly-aggressive caching. Data is cached for too long, leading to stale data and a poor user experience.
+- Blunt invalidation strategies and APIs. Data may be invalidated too often, leading to unnecessary network requests and wasted resources, or you may not have any fine-grained control over when data is invalidated at all.
+
+TanStack Router solves these problems with a two-prong approach to caching and data loading:
+
+### Built-in Cache
+
+TanStack Router provides a light-weight built-in caching layer that works seamlessly with the Router. This caching layer is loosely based on TanStack Query, but with fewer features and a much smaller API surface area. Like TanStack Query, sane but powerful defaults guarantee that your data is cached for reuse, invalidated when necessary, and garbage collected when not in use. It also provides a simple API for invalidating the cache manually when needed.
+
+### Flexible & Powerful Data Lifecycle APIs
+
+TanStack Router is designed with a flexible and powerful data loading API that more easily integrates with existing data fetching libraries like TanStack Query, SWR, Apollo, Relay, or even your own custom data fetching solution. Configurable APIs like `context`, `beforeLoad`, `loaderDeps` and `loader` work in unison to make it easy to define declarative data dependencies, prefetch data, and manage the lifecycle of an external data source with ease.
+
+## Inherited Route Context
+
+TanStack Router's router and route context is a powerful feature that allows you to define context that is specific to a route which is then inherited by all child routes. Even the router and root routes themselves can provide context. Context can be built up both synchronously and asynchronously, and can be used to share data, configuration, or even functions between routes and route configurations. This is especially useful for scenarios like:
+
+- Authentication and Authorization
+- Hybrid SSR/CSR data fetching and preloading
+- Theming
+- Singletons and global utilities
+- Curried or partial application across preloading, loading, and rendering stages
+
+Also, what would route context be if it weren't type-safe? TanStack Router's route context is fully type-safe and inferred at zero cost to you.
+
+## File-based and/or Code-Based Routing
+
+TanStack Router supports both file-based and code-based routing at the same time. This flexibility allows you to choose the approach that best fits your project's needs.
+
+TanStack Router's file-based routing approach is uniquely user-facing. Route configuration is generated for you either by the Vite plugin or TanStack Router CLI, leaving the usage of said generated code up to you! This means that you're always in total control of your routes and router, even if you use file-based routing.
+
+## Acknowledgements
+
+TanStack Router builds on concepts and patterns popularized by many other OSS projects, including:
+
+- [TRPC](https://trpc.io/)
+- [Remix](https://remix.run)
+- [Chicane](https://swan-io.github.io/chicane/)
+- [Next.js](https://nextjs.org)
+
+We acknowledge the investment, risk and research that went into their development, but are excited to push the bar they have set even higher.
+
+## Let's go!
+
+Enough overview, there's so much more to do with TanStack Router. Hit that next button and let's get started!
diff --git a/mintlify/router/quick-start.md b/mintlify/router/quick-start.md
new file mode 100644
index 000000000..2c267bbcf
--- /dev/null
+++ b/mintlify/router/quick-start.md
@@ -0,0 +1,133 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+## Impatient?
+
+The fastest way to get started with TanStack Router is to scaffold a new project. Just run:
+
+
+
+react: @tanstack/cli create --router-only
+solid: @tanstack/cli create --router-only --framework solid
+
+
+
+The CLI will guide you through a short series of prompts to customize your setup, including options for:
+
+- File-based or code-based route configuration
+- TypeScript support
+- Tailwind CSS integration
+- Toolchain setup
+- Git initialization
+
+Once complete, a new project will be generated with TanStack Router installed and ready to use.
+
+> [!TIP]
+> For full details on available options and templates, visit the [`@tanstack/cli` documentation](https://github.com/TanStack/cli).
+
+## Routing Options
+
+TanStack Router supports both file-based and code-based route configurations. You can specify your preference during the CLI setup, or use these commands directly:
+
+### File-Based Route Generation
+
+The file-based approach is the recommended option for most projects. It automatically creates routes based on your file structure, giving you the best mix of performance, simplicity, and developer experience.
+
+For more details, see the [file-based routing documentation](/router/routing/file-based-routing) or
+
+
+
+# React
+
+[explore the live example](/router/framework/react/examples/basic-file-based)
+
+# Solid
+
+[explore the live example](/router/framework/solid/examples/basic-file-based)
+
+
+
+### Code-Based Route Configuration
+
+If you prefer to define routes programmatically, you can use the code-based route configuration. This approach gives you full control over routing logic.
+
+For more details, see the [code-based routing documentation](/router/routing/code-based-routing) or
+
+
+
+# React
+
+[explore the live example](/router/framework/react/examples/basic)
+
+# Solid
+
+[explore the live example](/router/framework/solid/examples/basic)
+
+
+
+With either approach, navigate to your project directory and start the development server.
+
+## Existing Project
+
+If you have an existing React project and want to add TanStack Router to it, you can install it manually.
+
+### Requirements
+
+Before installing TanStack Router, please ensure your project meets the following requirements:
+
+
+
+# React
+
+- `react` v18 or later with `createRoot` support.
+- `react-dom` v18 or later.
+
+# Solid
+
+- `solid-js` v1.x.x
+
+
+
+> [!NOTE]
+> Using TypeScript (`v5.3.x or higher`) is recommended for the best development experience, though not strictly required. We aim to support the last 5 minor versions of TypeScript, but using the latest version will help avoid potential issues.
+
+TanStack Router is currently only compatible with React (with ReactDOM) and Solid. If you're interested in contributing to support other frameworks, such as React Native, Angular, or Vue, please reach out to us on [Discord](https://tlinz.com/discord).
+
+### Installation
+
+To install TanStack Router in your project, run the following command using your preferred package manager:
+
+
+
+react: @tanstack/react-router
+solid: @tanstack/solid-router
+
+
+
+Once installed, you can verify the installation by checking your `package.json` file for the dependency.
+
+
+
+# React
+
+```json
+{
+  "dependencies": {
+    "@tanstack/react-router": "^x.x.x"
+  }
+}
+```
+
+# Solid
+
+```json
+{
+  "dependencies": {
+    "@tanstack/solid-router": "^x.x.x"
+  }
+}
+```
+
+
diff --git a/mintlify/router/routing/code-based-routing.md b/mintlify/router/routing/code-based-routing.md
new file mode 100644
index 000000000..cd17ca094
--- /dev/null
+++ b/mintlify/router/routing/code-based-routing.md
@@ -0,0 +1,536 @@
+---
+title: Code-Based Routing
+---
+
+> [!TIP]
+> Code-based routing is not recommended for most applications. It is recommended to use [File-Based Routing](/router/routing/file-based-routing) instead.
+
+## ⚠️ Before You Start
+
+- If you're using [File-Based Routing](/router/routing/file-based-routing), **skip this guide**.
+- If you still insist on using code-based routing, you must read the [Routing Concepts](/router/routing/routing-concepts) guide first, as it also covers core concepts of the router.
+
+## Route Trees
+
+Code-based routing is no different from file-based routing in that it uses the same route tree concept to organize, match and compose matching routes into a component tree. The only difference is that instead of using the filesystem to organize your routes, you use code.
+
+Let's consider the same route tree from the [Route Trees & Nesting](/router/routing/route-trees#route-trees) guide, and convert it to code-based routing:
+
+Here is the file-based version:
+
+```
+routes/
+├── __root.tsx
+├── index.tsx
+├── about.tsx
+├── posts/
+│   ├── index.tsx
+│   ├── $postId.tsx
+├── posts.$postId.edit.tsx
+├── settings/
+│   ├── profile.tsx
+│   ├── notifications.tsx
+├── _pathlessLayout.tsx
+├── _pathlessLayout/
+│   ├── route-a.tsx
+├── ├── route-b.tsx
+├── files/
+│   ├── $.tsx
+```
+
+And here is a summarized code-based version:
+
+
+
+# React
+
+```tsx
+import { createRootRoute, createRoute } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute()
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'about',
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+})
+
+const postEditorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts/$postId/edit',
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'settings',
+})
+
+const profileRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'profile',
+})
+
+const notificationsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'notifications',
+})
+
+const pathlessLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'pathlessLayout',
+})
+
+const pathlessLayoutARoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-a',
+})
+
+const pathlessLayoutBRoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-b',
+})
+
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'files/$',
+})
+```
+
+# Solid
+
+```tsx
+import { createRootRoute, createRoute } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute()
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'about',
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+})
+
+const postEditorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts/$postId/edit',
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'settings',
+})
+
+const profileRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'profile',
+})
+
+const notificationsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'notifications',
+})
+
+const pathlessLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'pathlessLayout',
+})
+
+const pathlessLayoutARoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-a',
+})
+
+const pathlessLayoutBRoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-b',
+})
+
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'files/$',
+})
+```
+
+
+
+## Anatomy of a Route
+
+All other routes other than the root route are configured using the `createRoute` function:
+
+```tsx
+const route = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/posts',
+  component: PostsComponent,
+})
+```
+
+The `getParentRoute` option is a function that returns the parent route of the route you're creating.
+
+**❓❓❓ "Wait, you're making me pass the parent route for every route I make?"**
+
+Absolutely! The reason for passing the parent route has **everything to do with the magical type safety** of TanStack Router. Without the parent route, TypeScript would have no idea what types to supply your route with!
+
+> [!IMPORTANT]
+> For every route that's **NOT** the **Root Route** or a **Pathless Layout Route**, a `path` option is required. This is the path that will be matched against the URL pathname to determine if the route is a match.
+
+When configuring route `path` option on a route, it ignores leading and trailing slashes (this does not include "index" route paths `/`). You can include them if you want, but they will be normalized internally by TanStack Router. Here is a table of valid paths and what they will be normalized to:
+
+| Path     | Normalized Path |
+| -------- | --------------- |
+| `/`      | `/`             |
+| `/about` | `about`         |
+| `about/` | `about`         |
+| `about`  | `about`         |
+| `$`      | `$`             |
+| `/$`     | `$`             |
+| `/$/`    | `$`             |
+
+## Manually building the route tree
+
+When building a route tree in code, it's not enough to define the parent route of each route. You must also construct the final route tree by adding each route to its parent route's `children` array. This is because the route tree is not built automatically for you like it is in file-based routing.
+
+```tsx
+/* prettier-ignore */
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  aboutRoute,
+  postsRoute.addChildren([
+    postsIndexRoute,
+    postRoute,
+  ]),
+  postEditorRoute,
+  settingsRoute.addChildren([
+    profileRoute,
+    notificationsRoute,
+  ]),
+  pathlessLayoutRoute.addChildren([
+    pathlessLayoutARoute,
+    pathlessLayoutBRoute,
+  ]),
+  filesRoute.addChildren([
+    fileRoute,
+  ]),
+])
+/* prettier-ignore-end */
+```
+
+But before you can go ahead and build the route tree, you need to understand how the Routing Concepts for Code-Based Routing work.
+
+## Routing Concepts for Code-Based Routing
+
+Believe it or not, file-based routing is really a superset of code-based routing and uses the filesystem and a bit of code-generation abstraction on top of it to generate this structure you see above automatically.
+
+We're going to assume you've read the [Routing Concepts](/router/routing/routing-concepts) guide and are familiar with each of these main concepts:
+
+- The Root Route
+- Basic Routes
+- Index Routes
+- Dynamic Route Segments
+- Splat / Catch-All Routes
+- Layout Routes
+- Pathless Routes
+- Non-Nested Routes
+
+Now, let's take a look at how to create each of these route types in code.
+
+## The Root Route
+
+Creating a root route in code-based routing is thankfully the same as doing so in file-based routing. Call the `createRootRoute()` function.
+
+Unlike file-based routing however, you do not need to export the root route if you don't want to. It's certainly not recommended to build an entire route tree and application in a single file (although you can and we do this in the examples to demonstrate routing concepts in brevity).
+
+
+
+# React
+
+```tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+const rootRoute = createRootRouteWithContext<MyRouterContext>()
+```
+
+# Solid
+
+```tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+const rootRoute = createRootRouteWithContext<MyRouterContext>()
+```
+
+
+
+To learn more about Context in TanStack Router, see the [Router Context](/router/guide/router-context) guide.
+
+## Basic Routes
+
+To create a basic route, simply provide a normal `path` string to the `createRoute` function:
+
+```tsx
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'about',
+})
+```
+
+See, it's that simple! The `aboutRoute` will match the URL `/about`.
+
+## Index Routes
+
+Unlike file-based routing, which uses the `index` filename to denote an index route, code-based routing uses a single slash `/` to denote an index route. For example, the `posts.index.tsx` file from our example route tree above would be represented in code-based routing like this:
+
+```tsx
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  // Notice the single slash `/` here
+  path: '/',
+})
+```
+
+So, the `postsIndexRoute` will match the URL `/posts/` (or `/posts`).
+
+## Dynamic Route Segments
+
+Dynamic route segments work exactly the same in code-based routing as they do in file-based routing. Simply prefix a segment of the path with a `$` and it will be captured into the `params` object of the route's `loader` or `component`:
+
+```tsx
+const postIdRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+  // In a loader
+  loader: ({ params }) => fetchPost(params.postId),
+  // Or in a component
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const { postId } = postIdRoute.useParams()
+  return <div>Post ID: {postId}</div>
+}
+```
+
+> [!TIP]
+> If your component is code-split, you can use the [getRouteApi function](/router/guide/code-splitting#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `postIdRoute` configuration to get access to the typed `useParams()` hook.
+
+## Splat / Catch-All Routes
+
+As expected, splat/catch-all routes also work the same in code-based routing as they do in file-based routing. Simply prefix a segment of the path with a `$` and it will be captured into the `params` object under the `_splat` key:
+
+```tsx
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'files',
+})
+
+const fileRoute = createRoute({
+  getParentRoute: () => filesRoute,
+  path: '$',
+})
+```
+
+For the URL `/documents/hello-world`, the `params` object will look like this:
+
+```js
+{
+  '_splat': 'documents/hello-world'
+}
+```
+
+## Layout Routes
+
+Layout routes are routes that wrap their children in a layout component. In code-based routing, you can create a layout route by simply nesting a route under another route:
+
+```tsx
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+  component: PostsLayoutComponent, // The layout component
+})
+
+function PostsLayoutComponent() {
+  return (
+    <div>
+      <h1>Posts</h1>
+      <Outlet />
+    </div>
+  )
+}
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+
+const postsCreateRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: 'create',
+})
+
+const routeTree = rootRoute.addChildren([
+  // The postsRoute is the layout route
+  // Its children will be nested under the PostsLayoutComponent
+  postsRoute.addChildren([postsIndexRoute, postsCreateRoute]),
+])
+```
+
+Now, both the `postsIndexRoute` and `postsCreateRoute` will render their contents inside of the `PostsLayoutComponent`:
+
+```tsx
+// URL: /posts
+<PostsLayoutComponent>
+  <PostsIndexComponent />
+</PostsLayoutComponent>
+
+// URL: /posts/create
+<PostsLayoutComponent>
+  <PostsCreateComponent />
+</PostsLayoutComponent>
+```
+
+## Pathless Layout Routes
+
+In file-based routing a pathless layout route is prefixed with a `_`, but in code-based routing, this is simply a route with an `id` instead of a `path` option. This is because code-based routing does not use the filesystem to organize routes, so there is no need to prefix a route with a `_` to denote that it has no path.
+
+```tsx
+const pathlessLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'pathlessLayout',
+  component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+  return (
+    <div>
+      <h1>Pathless Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+
+const pathlessLayoutARoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-a',
+})
+
+const pathlessLayoutBRoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-b',
+})
+
+const routeTree = rootRoute.addChildren([
+  // The pathless layout route has no path, only an id
+  // So its children will be nested under the pathless layout route
+  pathlessLayoutRoute.addChildren([pathlessLayoutARoute, pathlessLayoutBRoute]),
+])
+```
+
+Now both `/route-a` and `/route-b` will render their contents inside of the `PathlessLayoutComponent`:
+
+```tsx
+// URL: /route-a
+<PathlessLayoutComponent>
+  <RouteAComponent />
+</PathlessLayoutComponent>
+
+// URL: /route-b
+<PathlessLayoutComponent>
+  <RouteBComponent />
+</PathlessLayoutComponent>
+```
+
+## Non-Nested Routes
+
+Building non-nested routes in code-based routing does not require using a trailing `_` in the path, but does require you to build your route and route tree with the right paths and nesting. Let's consider the route tree where we want the post editor to **not** be nested under the posts route:
+
+- `/posts_/$postId/edit`
+- `/posts`
+  - `$postId`
+
+To do this we need to build a separate route for the post editor and include the entire path in the `path` option from the root of where we want the route to be nested (in this case, the root):
+
+```tsx
+// The posts editor route is nested under the root route
+const postEditorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  // The path includes the entire path we need to match
+  path: 'posts/$postId/edit',
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+})
+
+const routeTree = rootRoute.addChildren([
+  // The post editor route is nested under the root route
+  postEditorRoute,
+  postsRoute.addChildren([postRoute]),
+])
+```
diff --git a/mintlify/router/routing/file-based-routing.md b/mintlify/router/routing/file-based-routing.md
new file mode 100644
index 000000000..04db307ec
--- /dev/null
+++ b/mintlify/router/routing/file-based-routing.md
@@ -0,0 +1,134 @@
+---
+title: File-Based Routing
+---
+
+Most of the TanStack Router documentation is written for file-based routing and is intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. While file-based routing is the preferred and recommended way to configure TanStack Router, you can also use [code-based routing](/router/routing/code-based-routing) if you prefer.
+
+## What is File-Based Routing?
+
+File-based routing is a way to configure your routes using the filesystem. Instead of defining your route structure via code, you can define your routes using a series of files and directories that represent the route hierarchy of your application. This brings a number of benefits:
+
+- **Simplicity**: File-based routing is visually intuitive and easy to understand for both new and experienced developers.
+- **Organization**: Routes are organized in a way that mirrors the URL structure of your application.
+- **Scalability**: As your application grows, file-based routing makes it easy to add new routes and maintain existing ones.
+- **Code-Splitting**: File-based routing allows TanStack Router to automatically code-split your routes for better performance.
+- **Type-Safety**: File-based routing raises the ceiling on type-safety by generating managing type linkages for your routes, which can otherwise be a tedious process via code-based routing.
+- **Consistency**: File-based routing enforces a consistent structure for your routes, making it easier to maintain and update your application and move from one project to another.
+
+## `/`s or `.`s?
+
+While directories have long been used to represent route hierarchy, file-based routing introduces an additional concept of using the `.` character in the file-name to denote a route nesting. This allows you to avoid creating directories for few deeply nested routes and continue to use directories for wider route hierarchies. Let's take a look at some examples!
+
+## Directory Routes
+
+Directories can be used to denote route hierarchy, which can be useful for organizing multiple routes into logical groups and also cutting down on the filename length for large groups of deeply nested routes.
+
+See the example below:
+
+| Filename                | Route Path                | Component Output                  |
+| ----------------------- | ------------------------- | --------------------------------- |
+| ʦ `__root.tsx`          |                           | `<Root>`                          |
+| ʦ `index.tsx`           | `/` (exact)               | `<Root><RootIndex>`               |
+| ʦ `about.tsx`           | `/about`                  | `<Root><About>`                   |
+| ʦ `posts.tsx`           | `/posts`                  | `<Root><Posts>`                   |
+| 📂 `posts`              |                           |                                   |
+| ┄ ʦ `index.tsx`         | `/posts` (exact)          | `<Root><Posts><PostsIndex>`       |
+| ┄ ʦ `$postId.tsx`       | `/posts/$postId`          | `<Root><Posts><Post>`             |
+| 📂 `posts_`             |                           |                                   |
+| ┄ 📂 `$postId`          |                           |                                   |
+| ┄ ┄ ʦ `edit.tsx`        | `/posts/$postId/edit`     | `<Root><EditPost>`                |
+| ʦ `settings.tsx`        | `/settings`               | `<Root><Settings>`                |
+| 📂 `settings`           |                           | `<Root><Settings>`                |
+| ┄ ʦ `profile.tsx`       | `/settings/profile`       | `<Root><Settings><Profile>`       |
+| ┄ ʦ `notifications.tsx` | `/settings/notifications` | `<Root><Settings><Notifications>` |
+| ʦ `_pathlessLayout.tsx` |                           | `<Root><PathlessLayout>`          |
+| 📂 `_pathlessLayout`    |                           |                                   |
+| ┄ ʦ `route-a.tsx`       | `/route-a`                | `<Root><PathlessLayout><RouteA>`  |
+| ┄ ʦ `route-b.tsx`       | `/route-b`                | `<Root><PathlessLayout><RouteB>`  |
+| 📂 `files`              |                           |                                   |
+| ┄ ʦ `$.tsx`             | `/files/$`                | `<Root><Files>`                   |
+| 📂 `account`            |                           |                                   |
+| ┄ ʦ `route.tsx`         | `/account`                | `<Root><Account>`                 |
+| ┄ ʦ `overview.tsx`      | `/account/overview`       | `<Root><Account><Overview>`       |
+
+## Flat Routes
+
+Flat routing gives you the ability to use `.`s to denote route nesting levels.
+
+This can be useful when you have a large number of uniquely deeply nested routes and want to avoid creating directories for each one:
+
+See the example below:
+
+| Filename                        | Route Path                | Component Output                  |
+| ------------------------------- | ------------------------- | --------------------------------- |
+| ʦ `__root.tsx`                  |                           | `<Root>`                          |
+| ʦ `index.tsx`                   | `/` (exact)               | `<Root><RootIndex>`               |
+| ʦ `about.tsx`                   | `/about`                  | `<Root><About>`                   |
+| ʦ `posts.tsx`                   | `/posts`                  | `<Root><Posts>`                   |
+| ʦ `posts.index.tsx`             | `/posts` (exact)          | `<Root><Posts><PostsIndex>`       |
+| ʦ `posts.$postId.tsx`           | `/posts/$postId`          | `<Root><Posts><Post>`             |
+| ʦ `posts_.$postId.edit.tsx`     | `/posts/$postId/edit`     | `<Root><EditPost>`                |
+| ʦ `settings.tsx`                | `/settings`               | `<Root><Settings>`                |
+| ʦ `settings.profile.tsx`        | `/settings/profile`       | `<Root><Settings><Profile>`       |
+| ʦ `settings.notifications.tsx`  | `/settings/notifications` | `<Root><Settings><Notifications>` |
+| ʦ `_pathlessLayout.tsx`         |                           | `<Root><PathlessLayout>`          |
+| ʦ `_pathlessLayout.route-a.tsx` | `/route-a`                | `<Root><PathlessLayout><RouteA>`  |
+| ʦ `_pathlessLayout.route-b.tsx` | `/route-b`                | `<Root><PathlessLayout><RouteB>`  |
+| ʦ `files.$.tsx`                 | `/files/$`                | `<Root><Files>`                   |
+| ʦ `account.tsx`                 | `/account`                | `<Root><Account>`                 |
+| ʦ `account.overview.tsx`        | `/account/overview`       | `<Root><Account><Overview>`       |
+
+## Mixed Flat and Directory Routes
+
+It's extremely likely that a 100% directory or flat route structure won't be the best fit for your project, which is why TanStack Router allows you to mix both flat and directory routes together to create a route tree that uses the best of both worlds where it makes sense:
+
+See the example below:
+
+| Filename                       | Route Path                | Component Output                  |
+| ------------------------------ | ------------------------- | --------------------------------- |
+| ʦ `__root.tsx`                 |                           | `<Root>`                          |
+| ʦ `index.tsx`                  | `/` (exact)               | `<Root><RootIndex>`               |
+| ʦ `about.tsx`                  | `/about`                  | `<Root><About>`                   |
+| ʦ `posts.tsx`                  | `/posts`                  | `<Root><Posts>`                   |
+| 📂 `posts`                     |                           |                                   |
+| ┄ ʦ `index.tsx`                | `/posts` (exact)          | `<Root><Posts><PostsIndex>`       |
+| ┄ ʦ `$postId.tsx`              | `/posts/$postId`          | `<Root><Posts><Post>`             |
+| ┄ ʦ `$postId.edit.tsx`         | `/posts/$postId/edit`     | `<Root><Posts><Post><EditPost>`   |
+| ʦ `settings.tsx`               | `/settings`               | `<Root><Settings>`                |
+| ʦ `settings.profile.tsx`       | `/settings/profile`       | `<Root><Settings><Profile>`       |
+| ʦ `settings.notifications.tsx` | `/settings/notifications` | `<Root><Settings><Notifications>` |
+| ʦ `account.tsx`                | `/account`                | `<Root><Account>`                 |
+| ʦ `account.overview.tsx`       | `/account/overview`       | `<Root><Account><Overview>`       |
+
+Both flat and directory routes can be mixed together to create a route tree that uses the best of both worlds where it makes sense.
+
+> [!TIP]
+> If you find that the default file-based routing structure doesn't fit your needs, you can always use [Virtual File Routes](/router/routing/virtual-file-routes) to control the source of your routes whilst still getting the awesome performance benefits of file-based routing.
+
+## Getting started with File-Based Routing
+
+To get started with file-based routing, you'll need to configure your project's bundler to use the TanStack Router Plugin or the TanStack Router CLI.
+
+To enable file-based routing, you'll need to be using React with a supported bundler. See if your bundler is listed in the configuration guides below.
+
+
+
+# React
+
+- [Installation with Vite](/router/installation/with-vite)
+- [Installation with Rspack/Rsbuild](/router/installation/with-rspack)
+- [Installation with Webpack](/router/installation/with-webpack)
+- [Installation with Esbuild](/router/installation/with-esbuild)
+
+# Solid
+
+- [Installation with Vite](/router/installation/with-vite)
+- [Installation with Rspack/Rsbuild](/router/installation/with-rspack)
+- [Installation with Webpack](/router/installation/with-webpack)
+- [Installation with Esbuild](/router/installation/with-esbuild)
+
+
+
+When using TanStack Router's file-based routing through one of the supported bundlers, our plugin will **automatically generate your route configuration through your bundler's dev and build processes**. It is the easiest way to use TanStack Router's route generation features.
+
+If your bundler is not yet supported, you can reach out to us on Discord or GitHub to let us know.
diff --git a/mintlify/router/routing/file-naming-conventions.md b/mintlify/router/routing/file-naming-conventions.md
new file mode 100644
index 000000000..d43a9eecc
--- /dev/null
+++ b/mintlify/router/routing/file-naming-conventions.md
@@ -0,0 +1,43 @@
+---
+title: File Naming Conventions
+---
+
+File-based routing requires that you follow a few simple file naming conventions to ensure that your routes are generated correctly. The concepts these conventions enable are covered in detail in the [Route Trees & Nesting](/router/routing/route-trees) guide.
+
+| Feature                            | Description                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`__root.tsx`**                   | The root route file must be named `__root.tsx` and must be placed in the root of the configured `routesDirectory`.                                                                                                                                                                                                                                                                                                   |
+| **`.` Separator**                  | Routes can use the `.` character to denote a nested route. For example, `blog.post` will be generated as a child of `blog`.                                                                                                                                                                                                                                                                                          |
+| **`$` Token**                      | Route segments with the `$` token are parameterized and will extract the value from the URL pathname as a route `param`.                                                                                                                                                                                                                                                                                             |
+| **`_` Prefix**                     | Route segments with the `_` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname.                                                                                                                                                                                                                                                         |
+| **`_` Suffix**                     | Route segments with the `_` suffix exclude the route from being nested under any parent routes.                                                                                                                                                                                                                                                                                                                      |
+| **`-` Prefix**                     | Files and folders with the `-` prefix are excluded from the route tree. They will not be added to the `routeTree.gen.ts` file and can be used to colocate logic in route folders.                                                                                                                                                                                                                                    |
+| **`(folder)` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path.                                                                                                                                                                                                                                                                               |
+| **`[x]` Escaping**                 | Square brackets escape special characters in filenames that would otherwise have routing meaning. For example, `script[.]js.tsx` becomes `/script.js` and `api[.]v1.tsx` becomes `/api.v1`.                                                                                                                                                                                                                          |
+| **`index` Token**                  | Route segments ending with the `index` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the `indexToken` configuration option (supports both strings and regex patterns), see [options](/router/api/file-based-routing#indextoken).                                                                                   |
+| **`.route.tsx` File Type**         | When using directories to organise routes, the `route` suffix can be used to create a route file at the directory's path. For example, `blog.post.route.tsx` or `blog/post/route.tsx` can be used as the route file for the `/blog/post` route. This can be configured via the `routeToken` configuration option (supports both strings and regex patterns), see [options](/router/api/file-based-routing#routetoken). |
+
+> **💡 Remember:** The file-naming conventions for your project could be affected by what [options](/router/api/file-based-routing) are configured.
+
+## Dynamic Path Params
+
+Dynamic path params can be used in both flat and directory routes to create routes that can match a dynamic segment of the URL path. Dynamic path params are denoted by the `$` character in the filename:
+
+| Filename              | Route Path       | Component Output      |
+| --------------------- | ---------------- | --------------------- |
+| ...                   | ...              | ...                   |
+| ʦ `posts.$postId.tsx` | `/posts/$postId` | `<Root><Posts><Post>` |
+
+We'll learn more about dynamic path params in the [Path Params](/router/guide/path-params) guide.
+
+## Pathless Routes
+
+Pathless routes wrap child routes with either logic or a component without requiring a URL path. Non-path routes are denoted by the `_` character in the filename:
+
+| Filename       | Route Path | Component Output |
+| -------------- | ---------- | ---------------- |
+| ʦ `_app.tsx`   |            |                  |
+| ʦ `_app.a.tsx` | /a         | `<Root><App><A>` |
+| ʦ `_app.b.tsx` | /b         | `<Root><App><B>` |
+
+To learn more about pathless routes, see the [Routing Concepts - Pathless Routes](/router/routing/routing-concepts#pathless-layout-routes) guide.
diff --git a/mintlify/router/routing/route-matching.md b/mintlify/router/routing/route-matching.md
new file mode 100644
index 000000000..3c40de642
--- /dev/null
+++ b/mintlify/router/routing/route-matching.md
@@ -0,0 +1,93 @@
+---
+title: Route Matching
+---
+
+Route matching follows a consistent and predictable pattern. This guide will explain how route trees are matched.
+
+When TanStack Router processes your route tree, all of your routes are automatically sorted to match the most specific routes first. This means that regardless of the order your route tree is defined, routes will always be sorted in this order:
+
+- Index Route
+- Static Routes (most specific to least specific)
+- Dynamic Routes (longest to shortest)
+- Splat/Wildcard Routes
+
+Consider the following pseudo route tree:
+
+```
+Root
+  - blog
+    - $postId
+    - /
+    - new
+  - /
+  - *
+  - about
+  - about/us
+```
+
+After sorting, this route tree will become:
+
+```
+Root
+  - /
+  - about/us
+  - about
+  - blog
+    - /
+    - new
+    - $postId
+  - *
+```
+
+This final order represents the order in which routes will be matched based on specificity.
+
+Using that route tree, let's follow the matching process for a few different URLs:
+
+- `/blog`
+  ```
+  Root
+    ❌ /
+    ❌ about/us
+    ❌ about
+    ⏩ blog
+      ✅ /
+      - new
+      - $postId
+    - *
+  ```
+- `/blog/my-post`
+  ```
+  Root
+    ❌ /
+    ❌ about/us
+    ❌ about
+    ⏩ blog
+      ❌ /
+      ❌ new
+      ✅ $postId
+    - *
+  ```
+- `/`
+  ```
+  Root
+    ✅ /
+    - about/us
+    - about
+    - blog
+      - /
+      - new
+      - $postId
+    - *
+  ```
+- `/not-a-route`
+  ```
+  Root
+    ❌ /
+    ❌ about/us
+    ❌ about
+    ❌ blog
+      - /
+      - new
+      - $postId
+    ✅ *
+  ```
diff --git a/mintlify/router/routing/route-trees.md b/mintlify/router/routing/route-trees.md
new file mode 100644
index 000000000..a92a2cfac
--- /dev/null
+++ b/mintlify/router/routing/route-trees.md
@@ -0,0 +1,67 @@
+---
+title: Route Trees
+---
+
+TanStack Router uses a nested route tree to match up the URL with the correct component tree to render.
+
+To build a route tree, TanStack Router supports:
+
+- [File-Based Routing](/router/routing/file-based-routing)
+- [Code-Based Routing](/router/routing/code-based-routing)
+
+Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reason, **file-based routing is the preferred and recommended way** to configure TanStack Router. Most of the documentation is written from the perspective of file-based routing.
+
+## Route Trees
+
+Nested routing is a powerful concept that allows you to use a URL to render a nested component tree. For example, given the URL of `/blog/posts/123`, you could create a route hierarchy that looks like this:
+
+```tsx
+├── blog
+│   ├── posts
+│   │   ├── $postId
+```
+
+And render a component tree that looks like this:
+
+```tsx
+<Blog>
+  <Posts>
+    <Post postId="123" />
+  </Posts>
+</Blog>
+```
+
+Let's take that concept and expand it out to a larger site structure, but with file-names now:
+
+```
+/routes
+├── __root.tsx
+├── index.tsx
+├── about.tsx
+├── posts/
+│   ├── index.tsx
+│   ├── $postId.tsx
+├── posts.$postId.edit.tsx
+├── settings/
+│   ├── profile.tsx
+│   ├── notifications.tsx
+├── _pathlessLayout/
+│   ├── route-a.tsx
+├── ├── route-b.tsx
+├── files/
+│   ├── $.tsx
+```
+
+The above is a valid route tree configuration that can be used with TanStack Router! There's a lot of power and convention to unpack with file-based routing, so let's break it down a bit.
+
+## Route Tree Configuration
+
+Route trees can be configured using a few different ways:
+
+- [Flat Routes](/router/routing/file-based-routing#flat-routes)
+- [Directories](/router/routing/file-based-routing#directory-routes)
+- [Mixed Flat Routes and Directories](/router/routing/file-based-routing#mixed-flat-and-directory-routes)
+- [Virtual File Routes](/router/routing/virtual-file-routes)
+- [Code-Based Routes](/router/routing/code-based-routing)
+
+Please be sure to check out the full documentation links above for each type of route tree, or just proceed to the next section to get started with file-based routing.
diff --git a/mintlify/router/routing/routing-concepts.md b/mintlify/router/routing/routing-concepts.md
new file mode 100644
index 000000000..d10f8f1ad
--- /dev/null
+++ b/mintlify/router/routing/routing-concepts.md
@@ -0,0 +1,656 @@
+---
+title: Routing Concepts
+---
+
+TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease.
+
+Each of these concepts is useful and powerful, and we'll dive into each of them in the following sections.
+
+## Anatomy of a Route
+
+All other routes, other than the [Root Route](#the-root-route), are configured using the `createFileRoute` function, which provides type safety when using file-based routing:
+
+
+
+# React
+
+```tsx title="src/routes/index.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: PostsComponent,
+})
+```
+
+# Solid
+
+```tsx title="src/routes/index.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+  component: PostsComponent,
+})
+```
+
+
+
+The `createFileRoute` function takes a single argument, the file-route's path as a string.
+
+**❓❓❓ "Wait, you're making me pass the path of the route file to `createFileRoute`?"**
+
+Yes! But don't worry, this path is **automatically written and managed by the router for you via the TanStack Router Bundler Plugin or Router CLI.** So, as you create new routes, move routes around or rename routes, the path will be updated for you automatically.
+
+The reason for this pathname has everything to do with the magical type safety of TanStack Router. Without this pathname, TypeScript would have no idea what file we're in! (We wish TypeScript had a built-in for this, but they don't yet 🤷‍♂️)
+
+## The Root Route
+
+The root route is the top-most route in the entire tree and encapsulates all other routes as children.
+
+- It has no path
+- It is **always** matched
+- Its `component` is **always** rendered
+
+Even though it doesn't have a path, the root route has access to all of the same functionality as other routes including:
+
+- components
+- loaders
+- search param validation
+- etc.
+
+To create a root route, call the `createRootRoute()` function and export it as the `Route` variable in your route file:
+
+
+
+# React
+
+```tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/react-router'
+
+export const Route = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+export const Route = createRootRouteWithContext<MyRouterContext>()
+```
+
+# Solid
+
+```tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/solid-router'
+
+export const Route = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+export const Route = createRootRouteWithContext<MyRouterContext>()
+```
+
+
+
+To learn more about Context in TanStack Router, see the [Router Context](/router/guide/router-context) guide.
+
+## Basic Routes
+
+Basic routes match a specific path, for example `/about`, `/settings`, `/settings/notifications` are all basic routes, as they match the path exactly.
+
+Let's take a look at an `/about` route:
+
+
+
+# React
+
+```tsx title="src/routes/about.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  return <div>About</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/about.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  return <div>About</div>
+}
+```
+
+
+
+Basic routes are simple and straightforward. They match the path exactly and render the provided component.
+
+## Index Routes
+
+Index routes specifically target their parent route when it is **matched exactly and no child route is matched**.
+
+Let's take a look at an index route for a `/posts` URL:
+
+
+
+# React
+
+```tsx title="src/routes/posts.index.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+// Note the trailing slash, which is used to target index routes
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Please select a post!</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.index.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+// Note the trailing slash, which is used to target index routes
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Please select a post!</div>
+}
+```
+
+
+
+This route will be matched when the URL is `/posts` exactly.
+
+## Dynamic Route Segments
+
+Route path segments that start with a `$` followed by a label are dynamic and capture that section of the URL into the `params` object for use in your application. For example, a pathname of `/posts/123` would match the `/posts/$postId` route, and the `params` object would be `{ postId: '123' }`.
+
+These params are then usable in your route's configuration and components! Let's look at a `posts.$postId.tsx` route:
+
+
+
+# React
+
+```tsx title="src/routes/posts/$postId.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // In a loader
+  loader: ({ params }) => fetchPost(params.postId),
+  // Or in a component
+  component: PostComponent,
+})
+
+function PostComponent() {
+  // In a component!
+  const { postId } = Route.useParams()
+  return <div>Post ID: {postId}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // In a loader
+  loader: ({ params }) => fetchPost(params.postId),
+  // Or in a component
+  component: PostComponent,
+})
+
+function PostComponent() {
+  // In a component!
+  const { postId } = Route.useParams()
+  return <div>Post ID: {postId()}</div>
+}
+```
+
+
+
+> 🧠 Dynamic segments work at **each** segment of the path. For example, you could have a route with the path of `/posts/$postId/$revisionId` and each `$` segment would be captured into the `params` object.
+
+## Splat / Catch-All Routes
+
+A route with a path of only `$` is called a "splat" route because it _always_ captures _any_ remaining section of the URL pathname from the `$` to the end. The captured pathname is then available in the `params` object under the special `_splat` property.
+
+For example, a route targeting the `files/$` path is a splat route. If the URL pathname is `/files/documents/hello-world`, the `params` object would contain `documents/hello-world` under the special `_splat` property:
+
+```js
+{
+  '_splat': 'documents/hello-world'
+}
+```
+
+> ⚠️ In v1 of the router, splat routes are also denoted with a `*` instead of a `_splat` key for backwards compatibility. This will be removed in v2.
+
+> 🧠 Why use `$`? Thanks to tools like Remix, we know that despite `*`s being the most common character to represent a wildcard, they do not play nice with filenames or CLI tools, so just like them, we decided to use `$` instead.
+
+## Optional Path Parameters
+
+Optional path parameters allow you to define route segments that may or may not be present in the URL. They use the `{-$paramName}` syntax and provide flexible routing patterns where certain parameters are optional.
+
+
+
+# React
+
+```tsx title="src/routes/posts.{-$category}.tsx"
+// The `-$category` segment is optional, so this route matches both `/posts` and `/posts/tech`
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/{-$category}')({
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  const { category } = Route.useParams()
+
+  return <div>{category ? `Posts in ${category}` : 'All Posts'}</div>
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.{-$category}.tsx"
+// The `-$category` segment is optional, so this route matches both `/posts` and `/posts/tech`
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/{-$category}')({
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  const { category } = Route.useParams()
+
+  return <div>{category ? `Posts in ${category()}` : 'All Posts'}</div>
+}
+```
+
+
+
+This route will match both `/posts` (category is `undefined`) and `/posts/tech` (category is `"tech"`).
+
+You can also define multiple optional parameters in a single route:
+
+
+
+# React
+
+```tsx title="src/routes/posts.{-$category}.${-$slug}.tsx"
+// The `-$category` segment is optional, so this route matches both `/posts` and `/posts/tech`
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/{-$category}/{-$slug}')({
+  component: PostsComponent,
+})
+```
+
+# Solid
+
+```tsx title="src/routes/posts.{-$category}.${-$slug}.tsx"
+// The `-$category` segment is optional, so this route matches both `/posts` and `/posts/tech`
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/{-$category}/{-$slug}')({
+  component: PostsComponent,
+})
+```
+
+
+
+This route matches `/posts`, `/posts/tech`, and `/posts/tech/hello-world`.
+
+> 🧠 Routes with optional parameters are ranked lower in priority than exact matches, ensuring that more specific routes like `/posts/featured` are matched before `/posts/{-$category}`.
+
+## Layout Routes
+
+Layout routes are used to wrap child routes with additional components and logic. They are useful for:
+
+- Wrapping child routes with a layout component
+- Enforcing a `loader` requirement before displaying any child routes
+- Validating and providing search params to child routes
+- Providing fallbacks for error components or pending elements to child routes
+- Providing shared context to all child routes
+- And more!
+
+Let's take a look at an example layout route called `app.tsx`:
+
+```
+routes/
+├── app.tsx
+├── app.dashboard.tsx
+├── app.settings.tsx
+```
+
+In the tree above, `app.tsx` is a layout route that wraps two child routes, `app.dashboard.tsx` and `app.settings.tsx`.
+
+This tree structure is used to wrap the child routes with a layout component:
+
+
+
+# React
+
+```tsx title="src/routes/app.tsx"
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/app')({
+  component: AppLayoutComponent,
+})
+
+function AppLayoutComponent() {
+  return (
+    <div>
+      <h1>App Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/app.tsx"
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/app')({
+  component: AppLayoutComponent,
+})
+
+function AppLayoutComponent() {
+  return (
+    <div>
+      <h1>App Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+
+
+The following table shows which component(s) will be rendered based on the URL:
+
+| URL Path         | Component                |
+| ---------------- | ------------------------ |
+| `/app`           | `<AppLayout>`            |
+| `/app/dashboard` | `<AppLayout><Dashboard>` |
+| `/app/settings`  | `<AppLayout><Settings>`  |
+
+Since TanStack Router supports mixed flat and directory routes, you can also express your application's routing using layout routes within directories:
+
+```
+routes/
+├── app/
+│   ├── route.tsx
+│   ├── dashboard.tsx
+│   ├── settings.tsx
+```
+
+In this nested tree, the `app/route.tsx` file is a configuration for the layout route that wraps two child routes, `app/dashboard.tsx` and `app/settings.tsx`.
+
+Layout Routes also let you enforce component and loader logic for Dynamic Route Segments:
+
+```
+routes/
+├── app/users/
+│   ├── $userId/
+|   |   ├── route.tsx
+|   |   ├── index.tsx
+|   |   ├── edit.tsx
+```
+
+## Pathless Layout Routes
+
+Like [Layout Routes](#layout-routes), Pathless Layout Routes are used to wrap child routes with additional components and logic. However, pathless layout routes do not require a matching `path` in the URL and are used to wrap child routes with additional components and logic without requiring a matching `path` in the URL.
+
+Pathless Layout Routes are prefixed with an underscore (`_`) to denote that they are "pathless".
+
+> 🧠 The part of the path after the `_` prefix is used as the route's ID and is required because every route must be uniquely identifiable, especially when using TypeScript so as to avoid type errors and accomplish autocomplete effectively.
+
+Let's take a look at an example route called `_pathlessLayout.tsx`:
+
+```
+
+routes/
+├── _pathlessLayout.tsx
+├── _pathlessLayout.a.tsx
+├── _pathlessLayout.b.tsx
+
+```
+
+In the tree above, `_pathlessLayout.tsx` is a pathless layout route that wraps two child routes, `_pathlessLayout.a.tsx` and `_pathlessLayout.b.tsx`.
+
+The `_pathlessLayout.tsx` route is used to wrap the child routes with a Pathless layout component:
+
+
+
+# React
+
+```tsx title="src/routes/_pathlessLayout.tsx"
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_pathlessLayout')({
+  component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+  return (
+    <div>
+      <h1>Pathless layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/_pathlessLayout.tsx"
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_pathlessLayout')({
+  component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+  return (
+    <div>
+      <h1>Pathless layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
+
+
+
+The following table shows which component will be rendered based on the URL:
+
+| URL Path | Component             |
+| -------- | --------------------- |
+| `/`      | `<Index>`             |
+| `/a`     | `<PathlessLayout><A>` |
+| `/b`     | `<PathlessLayout><B>` |
+
+Since TanStack Router supports mixed flat and directory routes, you can also express your application's routing using pathless layout routes within directories:
+
+```
+routes/
+├── _pathlessLayout/
+│   ├── route.tsx
+│   ├── a.tsx
+│   ├── b.tsx
+```
+
+However, unlike Layout Routes, since Pathless Layout Routes do not match based on URL path segments, this means that these routes do not support [Dynamic Route Segments](#dynamic-route-segments) as part of their path and therefore cannot be matched in the URL.
+
+This means that you cannot do this:
+
+```
+routes/
+├── _$postId/ ❌
+│   ├── ...
+```
+
+Rather, you'd have to do this:
+
+```
+routes/
+├── $postId/
+├── _postPathlessLayout/ ✅
+│   ├── ...
+```
+
+## Non-Nested Routes
+
+Non-nested routes can be created by suffixing a parent file route segment with a `_` and are used to **un-nest** a route from its parents and render its own component tree.
+
+Consider the following flat route tree:
+
+```
+routes/
+├── posts.tsx
+├── posts.$postId.tsx
+├── posts_.$postId.edit.tsx
+```
+
+The following table shows which component will be rendered based on the URL:
+
+| URL Path          | Component                    |
+| ----------------- | ---------------------------- |
+| `/posts`          | `<Posts>`                    |
+| `/posts/123`      | `<Posts><Post postId="123">` |
+| `/posts/123/edit` | `<PostEditor postId="123">`  |
+
+- The `posts.$postId.tsx` route is nested as normal under the `posts.tsx` route and will render `<Posts><Post>`.
+- The `posts_.$postId.edit.tsx` route **does not share** the same `posts` prefix as the other routes and therefore will be treated as if it is a top-level route and will render `<PostEditor>`.
+
+## Excluding Files and Folders from Routes
+
+Files and folders can be excluded from route generation with a `-` prefix attached to the file name. This gives you the ability to colocate logic in the route directories.
+
+Consider the following route tree:
+
+```
+routes/
+├── posts.tsx
+├── -posts-table.tsx // 👈🏼 ignored
+├── -components/ // 👈🏼 ignored
+│   ├── header.tsx // 👈🏼 ignored
+│   ├── footer.tsx // 👈🏼 ignored
+│   ├── ...
+```
+
+We can import from the excluded files into our posts route
+
+
+
+# React
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/react-router'
+import { PostsTable } from './-posts-table'
+import { PostsHeader } from './-components/header'
+import { PostsFooter } from './-components/footer'
+
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div>
+      <PostsHeader />
+      <PostsTable posts={posts} />
+      <PostsFooter />
+    </div>
+  )
+}
+```
+
+# Solid
+
+```tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { PostsTable } from './-posts-table'
+import { PostsHeader } from './-components/header'
+import { PostsFooter } from './-components/footer'
+
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div>
+      <PostsHeader />
+      <PostsTable posts={posts} />
+      <PostsFooter />
+    </div>
+  )
+}
+```
+
+
+
+The excluded files will not be added to `routeTree.gen.ts`.
+
+## Pathless Route Group Directories
+
+Pathless route group directories use `()` as a way to group routes files together regardless of their path. They are purely organizational and do not affect the route tree or component tree in any way.
+
+```
+routes/
+├── index.tsx
+├── (app)/
+│   ├── dashboard.tsx
+│   ├── settings.tsx
+│   ├── users.tsx
+├── (auth)/
+│   ├── login.tsx
+│   ├── register.tsx
+```
+
+In the example above, the `app` and `auth` directories are purely organizational and do not affect the route tree or component tree in any way. They are used to group related routes together for easier navigation and organization.
+
+The following table shows which component will be rendered based on the URL:
+
+| URL Path     | Component     |
+| ------------ | ------------- |
+| `/`          | `<Index>`     |
+| `/dashboard` | `<Dashboard>` |
+| `/settings`  | `<Settings>`  |
+| `/users`     | `<Users>`     |
+| `/login`     | `<Login>`     |
+| `/register`  | `<Register>`  |
+
+As you can see, the `app` and `auth` directories are purely organizational and do not affect the route tree or component tree in any way.
diff --git a/mintlify/router/routing/virtual-file-routes.md b/mintlify/router/routing/virtual-file-routes.md
new file mode 100644
index 000000000..5e47f8b14
--- /dev/null
+++ b/mintlify/router/routing/virtual-file-routes.md
@@ -0,0 +1,464 @@
+---
+id: virtual-file-routes
+title: Virtual File Routes
+---
+
+> We'd like to thank the Remix team for [pioneering the concept of virtual file routes](https://www.youtube.com/watch?v=fjTX8hQTlEc&t=730s). We've taken inspiration from their work and adapted it to work with TanStack Router's existing file-based route-tree generation.
+
+Virtual file routes are a powerful concept that allows you to build a route tree programmatically using code that references real files in your project. This can be useful if:
+
+- You have an existing route organization that you want to keep.
+- You want to customize the location of your route files.
+- You want to completely override TanStack Router's file-based route generation and build your own convention.
+
+Here's a quick example of using virtual file routes to map a route tree to a set of real files in your project:
+
+```tsx
+// routes.ts
+import {
+  rootRoute,
+  route,
+  index,
+  layout,
+  physical,
+} from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  index('index.tsx'),
+  layout('pathlessLayout.tsx', [
+    route('/dashboard', 'app/dashboard.tsx', [
+      index('app/dashboard-index.tsx'),
+      route('/invoices', 'app/dashboard-invoices.tsx', [
+        index('app/invoices-index.tsx'),
+        route('$id', 'app/invoice-detail.tsx'),
+      ]),
+    ]),
+    physical('/posts', 'posts'),
+  ]),
+])
+```
+
+## Configuration
+
+Virtual file routes can be configured either via:
+
+- The `TanStackRouter` plugin for Vite/Rspack/Webpack
+- The `tsr.config.json` file for the TanStack Router CLI
+
+## Configuration via the TanStackRouter Plugin
+
+If you're using the `TanStackRouter` plugin for Vite/Rspack/Webpack, you can configure virtual file routes by passing the path of your routes file to the `virtualRoutesConfig` option when setting up the plugin:
+
+
+
+# React
+
+```tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      virtualRouteConfig: './routes.ts',
+    }),
+    react(),
+  ],
+})
+```
+
+# Solid
+
+```tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: 'solid',
+      virtualRouteConfig: './routes.ts',
+    }),
+    solid(),
+  ],
+})
+```
+
+
+
+Or, you choose to define the virtual routes directly in the configuration:
+
+```tsx
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import { rootRoute } from '@tanstack/virtual-file-routes'
+
+const routes = rootRoute('root.tsx', [
+  // ... the rest of your virtual route tree
+])
+
+export default defineConfig({
+  plugins: [tanstackRouter({ virtualRouteConfig: routes }), react()],
+})
+```
+
+
+
+# React
+
+```tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+const routes = rootRoute('root.tsx', [
+  // ... the rest of your virtual route tree
+])
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({ virtualRouteConfig: routes, target: 'react' }),
+    react(),
+  ],
+})
+```
+
+# Solid
+
+```tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+const routes = rootRoute('root.tsx', [
+  // ... the rest of your virtual route tree
+])
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({ virtualRouteConfig: routes, target: 'solid' }),
+    solid(),
+  ],
+})
+```
+
+
+
+## Creating Virtual File Routes
+
+To create virtual file routes, you'll need to import the `@tanstack/virtual-file-routes` package. This package provides a set of functions that allow you to create virtual routes that reference real files in your project. A few utility functions are exported from the package:
+
+- `rootRoute` - Creates a virtual root route.
+- `route` - Creates a virtual route.
+- `index` - Creates a virtual index route.
+- `layout` - Creates a virtual pathless layout route.
+- `physical` - Creates a physical virtual route (more on this later).
+
+## Virtual Root Route
+
+The `rootRoute` function is used to create a virtual root route. It takes a file name and an array of children routes. Here's an example of a virtual root route:
+
+```tsx
+// routes.ts
+import { rootRoute } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  // ... children routes
+])
+```
+
+## Virtual Route
+
+The `route` function is used to create a virtual route. It takes a path, a file name, and an array of children routes. Here's an example of a virtual route:
+
+```tsx
+// routes.ts
+import { route } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  route('/about', 'about.tsx', [
+    // ... children routes
+  ]),
+])
+```
+
+Because `route` receives an explicit URL path, leading and trailing underscores are treated literally. Use `layout` to create pathless layout routes.
+
+You can also define a virtual route without a file name. This allows to set a common path prefix for its children:
+
+```tsx
+// routes.ts
+import { route } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  route('/hello', [
+    route('/world', 'world.tsx'), // full path will be "/hello/world"
+    route('/universe', 'universe.tsx'), // full path will be "/hello/universe"
+  ]),
+])
+```
+
+## Virtual Index Route
+
+The `index` function is used to create a virtual index route. It takes a file name. Here's an example of a virtual index route:
+
+```tsx
+import { index } from '@tanstack/virtual-file-routes'
+
+const routes = rootRoute('root.tsx', [index('index.tsx')])
+```
+
+## Virtual Pathless Route
+
+The `layout` function is used to create a virtual pathless route. It takes a file name, an array of children routes, and an optional pathless ID. Here's an example of a virtual pathless route:
+
+```tsx
+// routes.ts
+import { layout } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  layout('pathlessLayout.tsx', [
+    // ... children routes
+  ]),
+])
+```
+
+You can also specify a pathless ID to give the route a unique identifier that is different from the filename:
+
+```tsx
+// routes.ts
+import { layout } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+  layout('my-pathless-layout-id', 'pathlessLayout.tsx', [
+    // ... children routes
+  ]),
+])
+```
+
+## Physical Virtual Routes
+
+Physical virtual routes are a way to "mount" a directory of good ol' TanStack Router File Based routing convention under a specific URL path. This can be useful if you are using virtual routes to customize a small portion of your route tree high up in the hierarchy, but want to use the standard file-based routing convention for sub-routes and directories.
+
+Consider the following file structure:
+
+```
+/routes
+├── root.tsx
+├── index.tsx
+├── pathlessLayout.tsx
+├── app
+│   ├── dashboard.tsx
+│   ├── dashboard-index.tsx
+│   ├── dashboard-invoices.tsx
+│   ├── invoices-index.tsx
+│   ├── invoice-detail.tsx
+└── posts
+    ├── index.tsx
+    ├── $postId.tsx
+    ├── $postId.edit.tsx
+    ├── comments/
+    │   ├── index.tsx
+    │   ├── $commentId.tsx
+    └── likes/
+        ├── index.tsx
+        ├── $likeId.tsx
+```
+
+Let's use virtual routes to customize our route tree for everything but `posts`, then use physical virtual routes to mount the `posts` directory under the `/posts` path:
+
+```tsx
+// routes.ts
+export const routes = rootRoute('root.tsx', [
+  // Set up your virtual routes as normal
+  index('index.tsx'),
+  layout('pathlessLayout.tsx', [
+    route('/dashboard', 'app/dashboard.tsx', [
+      index('app/dashboard-index.tsx'),
+      route('/invoices', 'app/dashboard-invoices.tsx', [
+        index('app/invoices-index.tsx'),
+        route('$id', 'app/invoice-detail.tsx'),
+      ]),
+    ]),
+    // Mount the `posts` directory under the `/posts` path
+    physical('/posts', 'posts'),
+  ]),
+])
+```
+
+### Merging Physical Routes at Current Level
+
+You can also use `physical` with an empty path prefix (or a single argument) to merge routes from a physical directory directly at the current level, without adding a path prefix. This is useful when you want to organize your routes into separate directories but have them appear at the same URL level.
+
+Consider the following file structure:
+
+```
+/routes
+├── __root.tsx
+├── about.tsx
+└── features
+    ├── index.tsx
+    └── contact.tsx
+```
+
+You can merge the `features` directory routes at the root level:
+
+```tsx
+// routes.ts
+import { physical, rootRoute, route } from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('__root.tsx', [
+  route('/about', 'about.tsx'),
+  // Merge features/ routes at root level (no path prefix)
+  physical('features'),
+  // Or equivalently: physical('', 'features')
+])
+```
+
+This will produce the following routes:
+
+- `/about` - from `about.tsx`
+- `/` - from `features/index.tsx`
+- `/contact` - from `features/contact.tsx`
+
+> **Note:** When merging at the same level, ensure there are no conflicting route paths between your virtual routes and the physical directory routes. If a conflict occurs (e.g., both have an `/about` route), the generator will throw an error.
+
+## Virtual Routes inside of TanStack Router File Based routing
+
+The previous section showed you how you can use TanStack Router's File Based routing convention inside of a virtual route configuration.
+However, the opposite is possible as well.  
+You can configure the main part of your app's route tree using TanStack Router's File Based routing convention and opt into virtual route configuration for specific subtrees.
+
+Consider the following file structure:
+
+```
+/routes
+├── __root.tsx
+├── foo
+│   ├── bar
+│   │   ├── __virtual.ts
+│   │   ├── details.tsx
+│   │   ├── home.tsx
+│   │   └── route.ts
+│   └── bar.tsx
+└── index.tsx
+```
+
+Let's look at the `bar` directory which contains a special file named `__virtual.ts`. This file instructs the generator to switch over to virtual file route configuration for this directory (and its child directories).
+
+`__virtual.ts` configures the virtual routes for that particular subtree of the route tree. It uses the same API as explained above, with the only difference being that no `rootRoute` is defined for that subtree:
+
+```tsx
+// routes/foo/bar/__virtual.ts
+import {
+  defineVirtualSubtreeConfig,
+  index,
+  route,
+} from '@tanstack/virtual-file-routes'
+
+export default defineVirtualSubtreeConfig([
+  index('home.tsx'),
+  route('$id', 'details.tsx'),
+])
+```
+
+The helper function `defineVirtualSubtreeConfig` is closely modeled after vite's `defineConfig` and allows you to define a subtree configuration via a default export. The default export can either be
+
+- a subtree config object
+- a function returning a subtree config object
+- an async function returning a subtree config object
+
+## Inception
+
+You can mix and match TanStack Router's File Based routing convention and virtual route configuration however you like.  
+Let's go deeper!  
+Check out the following example that starts off using File Based routing convention, switches over to virtual route configuration for `/posts`, switches back to File Based routing convention for `/posts/lets-go` only to switch over to virtual route configuration again for `/posts/lets-go/deeper`.
+
+```
+├── __root.tsx
+├── index.tsx
+├── posts
+│   ├── __virtual.ts
+│   ├── details.tsx
+│   ├── home.tsx
+│   └── lets-go
+│       ├── deeper
+│       │   ├── __virtual.ts
+│       │   └── home.tsx
+│       └── index.tsx
+└── posts.tsx
+```
+
+## Configuration via the TanStack Router CLI
+
+If you're using the TanStack Router CLI, you can configure virtual file routes by defining the path to your routes file in the `tsr.config.json` file:
+
+```json
+// tsr.config.json
+{
+  "virtualRouteConfig": "./routes.ts"
+}
+```
+
+Or you can define the virtual routes directly in the configuration, while much less common allows you to configure them via the TanStack Router CLI by adding a `virtualRouteConfig` object to your `tsr.config.json` file and defining your virtual routes and passing the resulting JSON that is generated by calling the actual `rootRoute`/`route`/`index`/etc functions from the `@tanstack/virtual-file-routes` package:
+
+```json
+// tsr.config.json
+{
+  "virtualRouteConfig": {
+    "type": "root",
+    "file": "root.tsx",
+    "children": [
+      {
+        "type": "index",
+        "file": "home.tsx"
+      },
+      {
+        "type": "route",
+        "file": "posts/posts.tsx",
+        "path": "/posts",
+        "children": [
+          {
+            "type": "index",
+            "file": "posts/posts-home.tsx"
+          },
+          {
+            "type": "route",
+            "file": "posts/posts-detail.tsx",
+            "path": "$postId"
+          }
+        ]
+      },
+      {
+        "type": "layout",
+        "id": "first",
+        "file": "layout/first-pathless-layout.tsx",
+        "children": [
+          {
+            "type": "layout",
+            "id": "second",
+            "file": "layout/second-pathless-layout.tsx",
+            "children": [
+              {
+                "type": "route",
+                "file": "a.tsx",
+                "path": "/route-a"
+              },
+              {
+                "type": "route",
+                "file": "b.tsx",
+                "path": "/route-b"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+```
diff --git a/mintlify/start/eslint/eslint-plugin-start.md b/mintlify/start/eslint/eslint-plugin-start.md
new file mode 100644
index 000000000..e8fc0e922
--- /dev/null
+++ b/mintlify/start/eslint/eslint-plugin-start.md
@@ -0,0 +1,107 @@
+---
+id: eslint-plugin-start
+title: ESLint Plugin Start
+---
+
+TanStack Start comes with its own ESLint plugin. This plugin is used to enforce best practices and help you avoid common mistakes when working with Server Components and server/client boundaries.
+
+## Installation
+
+The plugin is a separate package that you need to install:
+
+```sh
+npm install -D @tanstack/eslint-plugin-start
+```
+
+or
+
+```sh
+pnpm add -D @tanstack/eslint-plugin-start
+```
+
+or
+
+```sh
+yarn add -D @tanstack/eslint-plugin-start
+```
+
+or
+
+```sh
+bun add -D @tanstack/eslint-plugin-start
+```
+
+## Flat Config (`eslint.config.js`)
+
+The release of ESLint 9.0 introduced a new way to configure ESLint using a flat config format. The TanStack Start ESLint Plugin supports this format and provides a recommended config you can use to enable all recommended rules.
+
+### Recommended Flat Config setup
+
+To enable all recommended rules:
+
+```js
+// eslint.config.js
+import pluginStart from '@tanstack/eslint-plugin-start'
+
+export default [
+  pluginStart.configs['flat/recommended'],
+  // Any other config...
+]
+```
+
+### Custom Flat Config setup
+
+Alternatively, load the plugin and configure only the rules you want:
+
+```js
+// eslint.config.js
+import pluginStart from '@tanstack/eslint-plugin-start'
+
+export default [
+  {
+    plugins: {
+      '@tanstack/start': pluginStart,
+    },
+    rules: {
+      '@tanstack/start/no-client-code-in-server-component': 'error',
+      '@tanstack/start/no-async-client-component': 'error',
+    },
+  },
+  // Any other config...
+]
+```
+
+## Legacy Config (`.eslintrc`)
+
+Prior to ESLint 9.0, the most common way to configure ESLint was using a `.eslintrc` file. The TanStack Start ESLint plugin still supports this configuration method.
+
+### Recommended Legacy Config setup
+
+To enable all recommended rules, add `plugin:@tanstack/eslint-plugin-start/recommended` in `extends`:
+
+```json
+{
+  "extends": ["plugin:@tanstack/eslint-plugin-start/recommended"]
+}
+```
+
+### Custom Legacy Config setup
+
+Alternatively, add `@tanstack/eslint-plugin-start` to `plugins` and configure the rules you want:
+
+```json
+{
+  "plugins": ["@tanstack/eslint-plugin-start"],
+  "rules": {
+    "@tanstack/start/no-client-code-in-server-component": "error",
+    "@tanstack/start/no-async-client-component": "error"
+  }
+}
+```
+
+## Rules
+
+The following rules are available in the TanStack Start ESLint plugin:
+
+- [@tanstack/start/no-client-code-in-server-component](/start/eslint/no-client-code-in-server-component)
+- [@tanstack/start/no-async-client-component](/start/eslint/no-async-client-component)
diff --git a/mintlify/start/eslint/no-async-client-component.md b/mintlify/start/eslint/no-async-client-component.md
new file mode 100644
index 000000000..b2007d31e
--- /dev/null
+++ b/mintlify/start/eslint/no-async-client-component.md
@@ -0,0 +1,69 @@
+---
+id: no-async-client-component
+title: Disallow async components in client context
+---
+
+Async React components are only valid within React Server Components.
+
+In TanStack Start, that means async components must only be used in server-component context, for example:
+
+- rendered by `renderServerComponent(<AsyncComp />)`
+- rendered inside a `createCompositeComponent((props) => <AsyncComp />)` callback
+
+This rule helps you catch async components that have become "client" (directly or transitively), which would otherwise crash at runtime.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/start/no-async-client-component": "error" */
+
+import { createFileRoute } from '@tanstack/react-router'
+
+export async function Page() {
+  return <div />
+}
+
+export const Route = createFileRoute(undefined)({
+  component: Page,
+})
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/start/no-async-client-component": "error" */
+
+import { createFileRoute } from '@tanstack/react-router'
+
+export function Page() {
+  return <div />
+}
+
+export const Route = createFileRoute(undefined)({
+  component: Page,
+})
+```
+
+```tsx
+/* eslint "@tanstack/start/no-async-client-component": "error" */
+
+import { createCompositeComponent } from '@tanstack/react-start/rsc'
+
+export const ServerPage = createCompositeComponent(async () => {
+  const message = await Promise.resolve('hello')
+  return <div>{message}</div>
+})
+```
+
+## Reporting location
+
+This rule can report in two ways:
+
+- **Usage-site**: if a component becomes client due to being referenced by route options, the error should be reported at the route option usage.
+- **Definition-site**: if a component is client due to `'use client'` or being rendered by a client component, the error is reported at the component definition.
+
+## Attributes
+
+- [x] ✅ Recommended
diff --git a/mintlify/start/eslint/no-client-code-in-server-component.md b/mintlify/start/eslint/no-client-code-in-server-component.md
new file mode 100644
index 000000000..8f93590cc
--- /dev/null
+++ b/mintlify/start/eslint/no-client-code-in-server-component.md
@@ -0,0 +1,64 @@
+---
+id: no-client-code-in-server-component
+title: Disallow client-only code in server components
+---
+
+TanStack Start defines React Server Component boundaries via RSC helpers like `renderServerComponent()` and `createCompositeComponent()`.
+
+- `renderServerComponent(<Element />)` is a server boundary around the element.
+- `createCompositeComponent((props) => <Element />)` is a server boundary around the callback.
+
+Inside these boundaries (and anything rendered from them, unless it crosses a `'use client'` boundary) you must not use client-only code.
+
+This rule detects common client-only patterns in server components:
+
+- React client hooks (eg `useState`, `useEffect`)
+- browser-only globals (eg `window`, `document`)
+- React event handlers (`onClick`, etc.)
+- function props (non-serializable across the server/client boundary)
+- class components
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */
+
+import { createCompositeComponent } from '@tanstack/react-start/rsc'
+import { useState } from 'react'
+
+export const Server = createCompositeComponent(() => {
+  const [count] = useState(0)
+  return <div>{count}</div>
+})
+```
+
+```tsx
+/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */
+
+import { createCompositeComponent } from '@tanstack/react-start/rsc'
+
+export const Server = createCompositeComponent(() => {
+  return <div>{window.location.href}</div>
+})
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */
+
+import { renderServerComponent } from '@tanstack/react-start/rsc'
+
+export const Server = renderServerComponent(
+  (async () => {
+    const msg = await Promise.resolve('ok')
+    return <div>{msg}</div>
+  })(),
+)
+```
+
+## Attributes
+
+- [x] ✅ Recommended
diff --git a/mintlify/start/framework/react/build-from-scratch.md b/mintlify/start/framework/react/build-from-scratch.md
new file mode 100644
index 000000000..24f461d3e
--- /dev/null
+++ b/mintlify/start/framework/react/build-from-scratch.md
@@ -0,0 +1,327 @@
+---
+id: build-from-scratch
+title: Build a Project from Scratch
+---
+
+> [!NOTE]
+> If you already created a project with the CLI or by cloning an example from the [Getting Started](/start/framework/react/getting-started) guide, you can skip this guide and move on to the [Routing](/start/framework/react/guide/routing) guide.
+
+_So you want to build a TanStack Start project from scratch?_
+
+This guide will help you build a **very** basic TanStack Start web application. Together, we will use TanStack Start to:
+
+- Serve an index page
+- Display a counter
+- Increment the counter on the server and client
+
+[Here is what that will look like](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/start-counter)
+
+Let's create a new project directory and initialize it.
+
+```shell
+mkdir myApp
+cd myApp
+npm init -y
+```
+
+> [!NOTE]
+> We use `npm` in all of these examples, but you can use your package manager of choice instead.
+
+## TypeScript Configuration
+
+We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.json` file with at least the following settings:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true
+  }
+}
+```
+
+> [!NOTE]
+> Enabling `verbatimModuleSyntax` can result in server bundles leaking into client bundles. It is recommended to keep this option disabled.
+
+## Install Dependencies
+
+TanStack Start is powered by [TanStack Router](https://tanstack.com/router) and supports [Vite](https://vite.dev/) or [Rsbuild](https://rsbuild.dev/) as the build tool.
+
+To install Start and Router, run:
+
+```shell
+npm i @tanstack/react-start @tanstack/react-router
+```
+
+You'll also need React:
+
+```shell
+npm i react react-dom
+```
+
+Install the build tool and React integration you want to use:
+
+
+
+# Vite
+
+```shell
+npm i -D vite @vitejs/plugin-react
+```
+
+# Rsbuild
+
+```shell
+npm i -D @rsbuild/core @rsbuild/plugin-react
+```
+
+
+
+If you use Vite, you can also use `@vitejs/plugin-react-swc` instead of `@vitejs/plugin-react`.
+
+and some TypeScript:
+
+```shell
+npm i -D typescript @types/react @types/react-dom @types/node
+```
+
+## Update Configuration Files
+
+We'll then update our `package.json` to use your build tool's CLI and set `"type": "module"`:
+
+
+
+# Vite
+
+```json
+{
+  // ...
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build"
+  }
+}
+```
+
+# Rsbuild
+
+```json
+{
+  // ...
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  }
+}
+```
+
+
+
+Then configure TanStack Start's build tool plugin:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    tsconfigPaths: true,
+  },
+  plugins: [
+    tanstackStart(),
+    // react's vite plugin must come after start's vite plugin
+    viteReact(),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [pluginReact(), tanstackStart()],
+})
+```
+
+
+
+## Add the Basic Templating
+
+There are 2 required files for TanStack Start usage:
+
+1. The router configuration
+2. The root of your application
+
+Once configuration is done, we'll have a file tree that looks like the following:
+
+```
+.
+├── src/
+│   ├── routes/
+│   │   └── `__root.tsx`
+│   ├── `router.tsx`
+│   ├── `routeTree.gen.ts`
+├── `vite.config.ts` or `rsbuild.config.ts`
+├── `package.json`
+└── `tsconfig.json`
+```
+
+## The Router Configuration
+
+This is the file that will dictate the behavior of TanStack Router used within Start. Here, you can configure everything
+from the default [preloading functionality](/router/guide/preloading) to [caching staleness](/router/guide/data-loading).
+
+> [!NOTE]
+> You won't have a `routeTree.gen.ts` file yet. This file will be generated when you run TanStack Start for the first time.
+
+```tsx
+// src/router.tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+```
+
+## The Root of Your Application
+
+Finally, we need to create the root of our application. This is the entry point for all other routes. The code in this file will wrap all other routes in the application.
+
+```tsx
+// src/routes/__root.tsx
+import type { ReactNode } from 'react'
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+## Writing Your First Route
+
+Now that we have the basic templating setup, we can write our first route. This is done by creating a new file in the `src/routes` directory.
+
+```tsx
+// src/routes/index.tsx
+import * as fs from 'node:fs'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+
+const filePath = 'count.txt'
+
+async function readCount() {
+  return parseInt(
+    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
+  )
+}
+
+const getCount = createServerFn({
+  method: 'GET',
+}).handler(() => {
+  return readCount()
+})
+
+const updateCount = createServerFn({ method: 'POST' })
+  .validator((d: number) => d)
+  .handler(async ({ data }) => {
+    const count = await readCount()
+    await fs.promises.writeFile(filePath, `${count + data}`)
+  })
+
+export const Route = createFileRoute('/')({
+  component: Home,
+  loader: async () => await getCount(),
+})
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        updateCount({ data: 1 }).then(() => {
+          router.invalidate()
+        })
+      }}
+    >
+      Add 1 to {state}?
+    </button>
+  )
+}
+```
+
+That's it! 🤯 You've now set up a TanStack Start project and written your first route. 🎉
+
+You can now run `npm run dev` to start your server and navigate to `http://localhost:3000` to see your route in action.
+
+You want to deploy your application? Check out the [hosting guide](/start/framework/react/guide/hosting).
diff --git a/mintlify/start/framework/react/comparison.md b/mintlify/start/framework/react/comparison.md
new file mode 100644
index 000000000..f881ae9b6
--- /dev/null
+++ b/mintlify/start/framework/react/comparison.md
@@ -0,0 +1,338 @@
+---
+title: Comparison | TanStack Start vs Next.js vs React Router
+toc: false
+---
+
+Choosing a full-stack React framework? This comparison focuses on the **full-stack framework features** that distinguish TanStack Start from Next.js and React Router (v7 Framework Mode).
+
+> **🚨 IMPORTANT: Looking for routing features?**
+>
+> TanStack Start is built on **TanStack Router**, which provides industry-leading type-safe routing capabilities. For a comprehensive comparison of routing features (nested routes, search params, type safety, loaders, etc.), please see:
+>
+> ### [📖 TanStack Router Comparison vs React Router / Next.js →](/router/comparison)
+>
+> That comparison covers all the routing features in detail. This page focuses specifically on **full-stack framework capabilities** like SSR, server functions, middleware, deployment, and more.
+
+While we aim to provide an accurate and fair comparison, please note that this table may not capture every nuance or recent update of each framework. We recommend reviewing the official documentation and trying out each solution to make the most informed decision for your specific use case.
+
+If you find any discrepancies or have suggestions for improvement, please don't hesitate to contribute via the "Edit this page on GitHub" link at the bottom of this page or open an issue in the [TanStack Router GitHub repository](https://github.com/TanStack/router).
+
+Feature/Capability Key:
+
+- ✅ 1st-class, built-in, and ready to use with no added configuration or code
+- 🟡 Partial Support (rated 1-5 where noted)
+- 🟠 Supported via addon/community package
+- 🔶 Possible, but requires custom code/implementation/casting
+- 🛑 Not officially supported
+
+|                                                                   | TanStack Start                                   | Next.js [_(Website)_][nextjs]                 | React Router [_(Website)_][react-router]   |
+| ----------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | ------------------------------------------ |
+| Github Repo / Stars                                               | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-nextjs]][gh-nextjs]                | [![][stars-react-router]][gh-react-router] |
+| Bundle Size                                                       | [![][bp-tanstack-router]][bpl-tanstack-router]   | ❓                                            | ❓                                         |
+| --                                                                | --                                               | --                                            | --                                         |
+| **Routing Features** [_(See Full Comparison)_][router-comparison] | ✅ Built on TanStack Router                      | ✅ File-based App Router                      | ✅ File-based Nested Routes                |
+| --                                                                | --                                               | --                                            | --                                         |
+| **Full-Stack Features**                                           | --                                               | --                                            | --                                         |
+| SSR                                                               | ✅                                               | ✅                                            | ✅                                         |
+| Streaming SSR                                                     | ✅                                               | ✅                                            | ✅                                         |
+| Selective SSR (per-route)                                         | ✅                                               | 🔶                                            | 🔶                                         |
+| SPA Mode                                                          | ✅                                               | 🔶 (via "use client")                         | ✅                                         |
+| Built-in Client-Side SWR Caching                                  | ✅ (via TanStack Router)                         | 🔶 (fetch cache only)                         | 🛑                                         |
+| Data Fetching Library Integration                                 | ✅ (Official TanStack Query, Apollo, etc.)       | 🔶 (manual integration)                       | 🔶 (manual integration)                    |
+| Static Prerendering (SSG)                                         | ✅                                               | ✅                                            | ✅                                         |
+| Incremental Static Regeneration (ISR)                             | ✅ (via Cache-Control headers)                   | ✅ (Proprietary)                              | ✅ (via Cache-Control headers)             |
+| React Server Components                                           | 🟡 (Experimental)                                | ✅                                            | 🟡 (Experimental)                          |
+| Server Functions                                                  | ✅ (RPC-based)                                   | ✅ (Server Actions)                           | ✅ (Actions)                               |
+| Server Function Client Middleware                                 | ✅                                               | 🛑                                            | 🛑                                         |
+| Server Function Server Middleware                                 | ✅                                               | 🛑                                            | ✅                                         |
+| Request Middleware (All Routes)                                   | ✅                                               | ✅                                            | ✅                                         |
+| Server Function Input Validation                                  | ✅                                               | 🔶 (manual)                                   | 🔶 (manual)                                |
+| API Routes / Server Routes / Resource Routes                      | ✅                                               | ✅                                            | ✅                                         |
+| `<Form>` API                                                      | 🛑                                               | 🟠 (via React 19 useActionState)              | ✅                                         |
+| --                                                                | --                                               | --                                            | --                                         |
+| **Developer Experience**                                          | --                                               | --                                            | --                                         |
+| Devtools                                                          | ✅                                               | 🛑                                            | 🟠 (3rd party)                             |
+| CLI Tooling                                                       | ✅                                               | ✅                                            | ✅                                         |
+| Dev Server Startup Speed                                          | ✅ (Fast)                                        | 🛑 (Slow)                                     | ✅ (Fast)                                  |
+| HMR Speed                                                         | ✅ (Fast, Vite or Rsbuild)                       | 🛑 (Slow, Webpack/Turbopack)                  | ✅ (Fast, Vite)                            |
+| Dev Navigation Speed                                              | ✅                                               | 🟡                                            | ✅                                         |
+| Dev Resource Usage (CPU/RAM)                                      | ✅ (Lightweight)                                 | 🛑 (Heavy)                                    | ✅ (Lightweight)                           |
+| TypeScript Support                                                | ✅                                               | ✅                                            | ✅                                         |
+| Type-First Architecture                                           | ✅                                               | 🛑                                            | 🛑                                         |
+| --                                                                | --                                               | --                                            | --                                         |
+| **Deployment & Hosting**                                          | --                                               | --                                            | --                                         |
+| Deployment Flexibility                                            | ✅ (Vite and Rsbuild builds)                     | 🟡 (Optimized for Vercel, possible elsewhere) | ✅ (Multiple adapters)                     |
+| Edge Runtime Support                                              | ✅                                               | ✅                                            | ✅                                         |
+| Serverless Support                                                | ✅                                               | ✅                                            | ✅                                         |
+| Node.js Support                                                   | ✅                                               | ✅                                            | ✅                                         |
+| Docker Support                                                    | ✅                                               | ✅                                            | ✅                                         |
+| Static Export                                                     | ✅                                               | ✅                                            | ✅                                         |
+| Official Cloudflare Support                                       | ✅                                               | 🟡                                            | ✅                                         |
+| Official Netlify Support                                          | ✅                                               | 🟡                                            | ✅                                         |
+| Official Vercel Support                                           | ✅ (via Nitro)                                   | ✅                                            | ✅                                         |
+
+---
+
+> **⚠️ Remember:** For detailed comparisons of **routing features** (type safety, search params, loaders, navigation, etc.), see the [**TanStack Router Comparison**][router-comparison]. This page focuses on full-stack framework capabilities.
+
+---
+
+## Key Philosophical Differences
+
+### TanStack Start
+
+**Philosophy**: Maximum developer freedom with best-in-class type safety.
+
+- **Router-First**: Built on TanStack Router (see [full routing comparison][router-comparison])
+- **Deployment Agnostic**: Built on Vite and Rsbuild integrations, deploy without vendor lock-in
+- **Composable Middleware**: Middleware system works at both the request level AND individual server function level (both client & server)
+- **Selective SSR**: Fine-grained control over SSR behavior per route (full SSR, data-only, or client-only)
+- **Developer Control**: Explicit, composable patterns over convention-based magic
+- **Type Safety First**: End-to-end compile-time safety for server functions, loaders, and routing
+
+### Next.js
+
+**Philosophy**: Production-ready with optimal defaults, best with Vercel.
+
+- **RSC-First**: Deep integration with React Server Components as the primary paradigm
+- **Vercel-Optimized**: Best performance and DX on Vercel's infrastructure
+- **Convention over Configuration**: Opinionated structure with file-system routing conventions
+- **Automatic Optimizations**: Many performance optimizations happen automatically
+- **Production Grade**: Battle-tested at massive scale
+
+### React Router (v7 Framework Mode)
+
+**Philosophy**: Web fundamentals with progressive enhancement.
+
+- **Web Standards**: Embraces web platform primitives (fetch, FormData, Headers)
+- **Progressive Enhancement**: Works without JavaScript by default
+- **Nested Routes**: First-class support for nested routing and data loading
+- **Action-Based**: Form submissions via actions follow web standards
+- **Framework Evolution**: Successor to Remix, with Vite-based architecture
+
+## When to Choose Each Framework
+
+### Choose TanStack Start if you:
+
+- Want the absolute best type safety for routing (see [Router Comparison][router-comparison])
+- Need deployment flexibility without vendor lock-in (works with Vite and Rsbuild builds)
+- Prefer composable, explicit patterns over convention
+- Want fine-grained control over SSR behavior (selective SSR per route)
+- Need composable middleware that works at both request and server function levels
+- Are building a complex application that benefits from TanStack Router's advanced features
+- Already use TanStack Query or other TanStack libraries
+
+### Choose Next.js if you:
+
+- Want to use React Server Components today with full ecosystem support
+- Are deploying to Vercel or want a Vercel-optimized experience
+- Prefer convention over configuration for faster initial development
+- Want automatic image optimization and font loading
+
+### Choose React Router if you:
+
+- Prioritize progressive enhancement
+- Want your app to work without JavaScript
+- Prefer action-based mutations following web conventions
+
+## Feature Deep Dives
+
+### Built-in Client-Side Caching
+
+**TanStack Start** includes powerful built-in SWR (stale-while-revalidate) caching through TanStack Router:
+
+- **Out-of-the-box performance** - Loader data is automatically cached and revalidated
+- **Fine-grained control** - Configure `staleTime`, `gcTime`, and revalidation per route
+- **Structural sharing** - Efficient updates that only re-render what changed
+- **Official integrations** - Turn-key support for TanStack Query, Apollo, and other data fetching libraries
+- **More performant** - Optimized for the user experience with instant navigation and background updates
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => fetchPost(params.postId),
+  staleTime: 10_000, // Consider fresh for 10 seconds
+  gcTime: 5 * 60_000, // Keep in memory for 5 minutes
+})
+```
+
+For advanced scenarios, TanStack Start integrates seamlessly with TanStack Query:
+
+```tsx
+import { queryOptions } from '@tanstack/react-query'
+
+const postQueryOptions = (postId: string) =>
+  queryOptions({
+    queryKey: ['post', postId],
+    queryFn: () => fetchPost(postId),
+  })
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: ({ context, params }) =>
+    context.queryClient.ensureQueryData(postQueryOptions(params.postId)),
+})
+
+function Post() {
+  const { postId } = Route.useParams()
+  const { data } = useQuery(postQueryOptions(postId))
+  // Automatically uses cached data from loader
+}
+```
+
+**Next.js** has basic fetch caching but lacks fine-grained control and requires manual integration with libraries like React Query.
+
+**React Router** doesn't have built-in client-side caching - you need to manually integrate a caching solution.
+
+### Server Functions vs Server Actions
+
+**TanStack Start Server Functions**:
+
+```tsx
+export const getTodos = createServerFn({ method: 'GET' })
+  .validator(zodValidator(z.object({ userId: z.string() })))
+  .middleware([authMiddleware])
+  .handler(async ({ data, context }) => {
+    // Fully typed data and context
+    return db.todos.findMany({ where: { userId: data.userId } })
+  })
+
+// Call from anywhere with full type safety
+const todos = await getTodos({ data: { userId: '123' } })
+```
+
+**Next.js Server Actions**:
+
+```tsx
+'use server'
+export async function getTodos(userId: string) {
+  // Runs on server, called from client
+  return db.todos.findMany({ where: { userId } })
+}
+
+// Call from client component
+const todos = await getTodos('123')
+```
+
+Key differences:
+
+- Start's server functions support both client and server middleware
+- Start has built-in input validation
+- Start's approach is more explicit about the client/server boundary
+- Start's server functions support both GET and POST methods (configurable via the `method` option, defaults to GET), while Next.js Server Actions only support POST.
+- Next.js Server Actions integrate more seamlessly with forms
+
+### Middleware Architecture
+
+**TanStack Start** has two types of middleware:
+
+1. **Request Middleware**: Runs for all requests (SSR, API routes, server functions)
+2. **Server Function Middleware**: Runs specifically for server functions, supports both client-side and server-side execution
+
+This composability allows for:
+
+```tsx
+const authMiddleware = createMiddleware({ type: 'function' })
+  .client(async ({ next }) => {
+    // Run auth checks on client
+    return next({
+      headers: { Authorization: `Bearer ${getToken()}` },
+    })
+  })
+  .server(async ({ next }) => {
+    // Validate auth on server
+    return next({ context: { user: await getUser() } })
+  })
+```
+
+**Next.js** has a single middleware.ts file that runs on the Edge Runtime for all requests. It cannot access server-only resources like databases and has limitations compared to the Node.js runtime.
+
+### Deployment Flexibility
+
+**TanStack Start** leverages modern build tool ecosystems:
+
+- Deploy to Cloudflare Workers, Netlify, Vercel, Railway, Fly.io, AWS, etc.
+- Use Nitro for universal deployment support
+- No vendor-specific features or lock-in
+- Same codebase works everywhere
+
+**Next.js** is optimized for Vercel:
+
+- Many features work best or only on Vercel (ISR, Image Optimization, Middleware)
+- Self-hosting requires more configuration
+- Deployment to other platforms may have limitations
+
+## React Server Components (RSC)
+
+**Current Status**:
+
+- **Next.js**: Full production support with extensive ecosystem
+- **TanStack Start**: Experimental support available
+- **React Router**: Experimental support available
+
+TanStack Start's RSC implementation takes a client-led composition approach: server components are treated as data that the client can fetch, cache, and compose. See the [Server Components guide](/start/framework/react/guide/server-components) for details.
+
+## Performance Considerations
+
+### Production Performance
+
+All three frameworks are capable of achieving excellent production performance and top Lighthouse scores. The differences come down to optimization strategies:
+
+- **TanStack Start**: Optimized bundler builds, SWR caching reduces server load, lightweight runtime
+- **Next.js**: Automatic code splitting, image optimization, and built-in performance features
+- **React Router**: Web standards-based caching and optimization
+
+### Development Performance
+
+This is where the frameworks differ significantly:
+
+**TanStack Start & React Router:**
+
+- ⚡ **Instant dev server startup** - Vite and Rsbuild start quickly
+- ⚡ **Lightning-fast HMR** - Changes reflect instantly without page refresh
+- ⚡ **Fast dev navigation** - Full-speed routing during development
+- ⚡ **Lightweight resource usage** - Minimal CPU and RAM consumption
+- ⚡ **High dev throughput** - Handle many concurrent requests efficiently
+
+**Next.js:**
+
+- 🐌 **Slow dev server startup** - Can take many seconds to start, especially on larger projects
+- 🐌 **Slow HMR** - Hot reloading is noticeably sluggish even with Turbopack
+- 🐌 **Throttled dev navigation** - Navigation is artificially slowed during development
+- 🐌 **Heavy resource usage** - Significant CPU and RAM consumption during development
+
+**Why This Matters:**
+
+Development performance directly impacts developer productivity. Faster feedback loops mean:
+
+- More iterations per hour
+- Better flow state and focus
+- Lower machine requirements
+- Reduced frustration during development
+- Faster CI/CD pipelines for development builds
+
+While Next.js's production performance is excellent, the development experience can be notably slower, especially on larger codebases or less powerful machines.
+
+## Community and Ecosystem
+
+- **Next.js**: Largest community, most third-party integrations, extensive learning resources
+- **React Router**: One of the oldest and most widely used React libraries, strong community, excellent documentation
+- **TanStack Start**: Growing community, part of TanStack ecosystem, excellent Discord support
+
+## Maturity
+
+- **Next.js**: Production-ready, used by thousands of companies, proven at scale
+- **React Router**: Production-ready, powers millions of apps, v7 Framework Mode is the evolution of Remix
+- **TanStack Start**: Release Candidate stage, feature-complete, rapidly stabilizing toward v1
+
+[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router
+[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router
+[gh-tanstack-router]: https://github.com/tanstack/router
+[stars-tanstack-router]: https://img.shields.io/github/stars/tanstack/router?label=%F0%9F%8C%9F
+[router-comparison]: /router/latest/docs/framework/react/comparison
+[_]: _
+[nextjs]: https://nextjs.org/
+[gh-nextjs]: https://github.com/vercel/next.js
+[stars-nextjs]: https://img.shields.io/github/stars/vercel/next.js?label=%F0%9F%8C%9F
+[_]: _
+[react-router]: https://reactrouter.com/
+[gh-react-router]: https://github.com/remix-run/react-router
+[stars-react-router]: https://img.shields.io/github/stars/remix-run/react-router?label=%F0%9F%8C%9F
diff --git a/mintlify/start/framework/react/examples/start-basic-auth.md b/mintlify/start/framework/react/examples/start-basic-auth.md
new file mode 100644
index 000000000..77b5985b5
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic-auth.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + DIY Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-auth)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic-auth)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-basic-authjs.md b/mintlify/start/framework/react/examples/start-basic-authjs.md
new file mode 100644
index 000000000..40458aa74
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic-authjs.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Auth.js"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-authjs)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic-authjs)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-basic-cloudflare.md b/mintlify/start/framework/react/examples/start-basic-cloudflare.md
new file mode 100644
index 000000000..058ca5eb7
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic-cloudflare.md
@@ -0,0 +1,12 @@
+---
+title: "Cloudflare Vite Plugin"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-cloudflare)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic-cloudflare)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-basic-react-query.md b/mintlify/start/framework/react/examples/start-basic-react-query.md
new file mode 100644
index 000000000..c1047f6e2
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic-react-query.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + React Query"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic-react-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-basic-static.md b/mintlify/start/framework/react/examples/start-basic-static.md
new file mode 100644
index 000000000..b61567222
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic-static.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Static rendering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-static)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic-static)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-basic.md b/mintlify/start/framework/react/examples/start-basic.md
new file mode 100644
index 000000000..6c339cc52
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-clerk-basic.md b/mintlify/start/framework/react/examples/start-clerk-basic.md
new file mode 100644
index 000000000..f1be2e2c5
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-clerk-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Clerk Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-clerk-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-clerk-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-convex-trellaux.md b/mintlify/start/framework/react/examples/start-convex-trellaux.md
new file mode 100644
index 000000000..1951c8307
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-convex-trellaux.md
@@ -0,0 +1,12 @@
+---
+title: "Trellaux + Convex"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-convex-trellaux)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-convex-trellaux)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-material-ui.md b/mintlify/start/framework/react/examples/start-material-ui.md
new file mode 100644
index 000000000..18fa9881f
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-material-ui.md
@@ -0,0 +1,12 @@
+---
+title: "Material UI"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-material-ui)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-material-ui)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-supabase-basic.md b/mintlify/start/framework/react/examples/start-supabase-basic.md
new file mode 100644
index 000000000..3d27c83a9
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-supabase-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Supabase Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-supabase-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-supabase-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-trellaux.md b/mintlify/start/framework/react/examples/start-trellaux.md
new file mode 100644
index 000000000..1d6a09ef9
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-trellaux.md
@@ -0,0 +1,12 @@
+---
+title: "Trellaux"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-trellaux)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-trellaux)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/examples/start-workos.md b/mintlify/start/framework/react/examples/start-workos.md
new file mode 100644
index 000000000..a5f1453ba
--- /dev/null
+++ b/mintlify/start/framework/react/examples/start-workos.md
@@ -0,0 +1,12 @@
+---
+title: "WorkOS"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/examples/start-workos)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/react/start-workos)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/react/getting-started.md b/mintlify/start/framework/react/getting-started.md
new file mode 100644
index 000000000..0a7416c24
--- /dev/null
+++ b/mintlify/start/framework/react/getting-started.md
@@ -0,0 +1,95 @@
+---
+id: getting-started
+title: Getting Started
+redirect_from:
+  - /framework/react/quick-start
+---
+
+## Start a new project
+
+### Use TanStack Builder
+
+The best way to get started with TanStack Start is [TanStack Builder](https://tanstack.com/builder). It's the AI-first setup flow and the easiest way to get to a working project fast.
+
+### Use the CLI
+
+If you'd rather scaffold locally or want a backup path, use the TanStack CLI:
+
+```bash
+npx @tanstack/cli@latest create
+```
+
+You'll be prompted to choose your package manager and optional add-ons like Tailwind CSS and ESLint.
+
+### Start from an example
+
+If you'd rather begin from a working codebase, clone one of the official examples.
+
+To start with the [Basic](https://github.com/TanStack/router/tree/main/examples/react/start-basic) example:
+
+```bash
+npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
+cd start-basic
+npm install
+npm run dev
+```
+
+To use a different example, replace `start-basic` with one of the slugs below.
+
+#### Examples
+
+- [Basic](https://github.com/TanStack/router/tree/main/examples/react/start-basic) (`start-basic`)
+- [Basic + Auth](https://github.com/TanStack/router/tree/main/examples/react/start-basic-auth) (`start-basic-auth`)
+- [Counter](https://github.com/TanStack/router/tree/main/examples/react/start-counter) (`start-counter`)
+- [Basic + React Query](https://github.com/TanStack/router/tree/main/examples/react/start-basic-react-query) (`start-basic-react-query`)
+- [Clerk Auth](https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic) (`start-clerk-basic`)
+- [Convex + Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-convex-trellaux) (`start-convex-trellaux`)
+- [Supabase](https://github.com/TanStack/router/tree/main/examples/react/start-supabase-basic) (`start-supabase-basic`)
+- [Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-trellaux) (`start-trellaux`)
+- [WorkOS](https://github.com/TanStack/router/tree/main/examples/react/start-workos) (`start-workos`)
+- [Material UI](https://github.com/TanStack/router/tree/main/examples/react/start-material-ui) (`start-material-ui`)
+
+Each example page also includes a StackBlitz preview so you can inspect it before cloning.
+
+To clone a different example manually, replace `EXAMPLE_SLUG` below with the slug you want to use:
+
+```bash
+npx gitpick TanStack/router/tree/main/examples/react/EXAMPLE_SLUG my-new-project
+cd my-new-project
+npm install
+npm run dev
+```
+
+If you want to clone and deploy quickly, use the **Deploy to Netlify** button on an example's page.
+
+### Build from scratch
+
+If you want to wire everything up by hand, follow [Build a project from scratch](/start/framework/react/build-from-scratch).
+
+## Migrate an existing project from another framework
+
+- If you want to learn Start from a clean slate first, use one of the new-project options above.
+- Refer to a migration guide for your specific framework:
+  - [Next.js](/start/framework/react/migrate-from-next-js)
+  - Remix 2 / React Router 7 "Framework Mode" (coming soon!)
+
+## Next Steps
+
+Once you've created, cloned, or deployed a project, continue to the [Routing](/start/framework/react/guide/routing) guide.
+
+## Other Router Examples
+
+If you want Router-focused examples that are not Start-specific, these are useful references:
+
+- [Quickstart (file-based)](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based)
+- [Basic (file-based)](https://github.com/TanStack/router/tree/main/examples/react/basic-file-based)
+- [Kitchen Sink (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-file-based)
+- [Kitchen Sink + React Query (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based)
+- [Location Masking](https://github.com/TanStack/router/tree/main/examples/react/location-masking)
+- [Authenticated Routes](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes)
+- [Scroll Restoration](https://github.com/TanStack/router/tree/main/examples/react/scroll-restoration)
+- [Deferred Data](https://github.com/TanStack/router/tree/main/examples/react/deferred-data)
+- [Navigation Blocking](https://github.com/TanStack/router/tree/main/examples/react/navigation-blocking)
+- [View Transitions](https://github.com/TanStack/router/tree/main/examples/react/view-transitions)
+- [With tRPC](https://github.com/TanStack/router/tree/main/examples/react/with-trpc)
+- [With tRPC + React Query](https://github.com/TanStack/router/tree/main/examples/react/with-trpc-react-query)
diff --git a/mintlify/start/framework/react/guide/authentication-overview.md b/mintlify/start/framework/react/guide/authentication-overview.md
new file mode 100644
index 000000000..18549c6ac
--- /dev/null
+++ b/mintlify/start/framework/react/guide/authentication-overview.md
@@ -0,0 +1,243 @@
+---
+id: authentication-overview
+title: Authentication
+---
+
+## Authentication vs Authorization
+
+- **Authentication**: Who is this user? (Login/logout, identity verification)
+- **Authorization**: What can this user do? (Permissions, roles, access control)
+
+## Architecture Overview
+
+### Full-Stack Authentication Model
+
+**Server-Side (Secure)**
+
+- Session storage and validation
+- User credential verification
+- Database operations
+- Token generation/verification
+- Protected API endpoints
+
+**Client-Side (Public)**
+
+- Authentication state management
+- Route protection logic
+- Login/logout user interface
+- Redirect handling
+
+**Isomorphic (Both)**
+
+- Route loaders checking auth state
+- Shared validation logic
+- User profile data access
+
+### Session Management Patterns
+
+**HTTP-Only Cookies (Recommended)**
+
+- Most secure approach - not accessible via JavaScript
+- Automatic browser handling
+- Built-in CSRF protection with `sameSite`
+- Best for traditional web applications
+
+**JWT Tokens**
+
+- Stateless authentication
+- Good for API-first applications
+- Requires careful handling to avoid XSS vulnerabilities
+- Consider refresh token rotation
+
+**Server-Side Sessions**
+
+- Centralized session control
+- Easy to revoke sessions
+- Requires session storage (database, Redis)
+- Good for applications requiring immediate session control
+
+### Route Protection Architecture
+
+**Layout Route Pattern (Recommended)**
+
+- Protect entire route subtrees with parent layout routes
+- Centralized authentication logic
+- Automatic protection for all child routes
+- Clean separation of authenticated vs public routes
+
+**Component-Level Protection**
+
+- Conditional rendering within components
+- More granular control over UI states
+- Good for mixed public/private content on same route
+- Requires careful handling to prevent layout shifts
+
+**Data/API Protection (Security Boundary)**
+
+- Authorize every server function, server route, or API endpoint that reads or writes private data
+- Reject unauthorized requests even if no protected route was loaded first
+- Treat route guards as UX and navigation control, not as the data boundary
+
+### State Management Patterns
+
+**Server-Driven State (Recommended)**
+
+- Authentication state sourced from server on each request
+- Always up-to-date with server state
+- Works seamlessly with SSR
+- Best security - server is source of truth
+
+**Context-Based State**
+
+- Client-side authentication state management
+- Good for third-party auth providers (Auth0, Firebase)
+- Requires careful synchronization with server state
+- Consider for highly interactive client-first applications
+
+**Hybrid Approach**
+
+- Initial state from server, client-side updates
+- Balance between security and UX
+- Periodic server-side validation
+
+## Authentication Options
+
+### 🏢 Partner Solutions
+
+- **[WorkOS](https://workos.com)**
+- **[Clerk](https://clerk.dev)**
+
+### 🛠️ DIY Authentication
+
+Build your own authentication system using TanStack Start's server functions and session management. Start with the [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives) guide — it covers session cookies (`HttpOnly`/`Secure`/`SameSite`/`__Host-`), session lookup as middleware, OAuth `state` + PKCE, password-reset enumeration defense, CSRF, rate limiting, and session rotation, with the WRONG/CORRECT patterns that catch the common mistakes.
+
+- **Full Control**: Complete customization over authentication flow
+- **Server Primitives**: Sessions, OAuth, CSRF, rate limiting — see [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives)
+- **Session Management**: HTTP-only cookies via `setResponseHeader`, read with `getRequestHeader`
+- **Type Safety**: End-to-end type safety for authentication state
+
+### 🌐 Other Excellent Options
+
+**Open Source & Community Solutions:**
+
+- **[Better Auth](https://www.better-auth.com/)** - Modern, TypeScript-first authentication library
+- **[Auth.js](https://authjs.dev/)** (formerly NextAuth.js) - Popular authentication library for React
+
+**Hosted Services:**
+
+- **[Supabase Auth](https://supabase.com/auth)** - Open source Firebase alternative with built-in auth
+- **[Auth0](https://auth0.com/)** - Established authentication platform with extensive features
+- **[Firebase Auth](https://firebase.google.com/docs/auth)** - Google's authentication service
+
+## Partner Solutions
+
+### WorkOS - Enterprise Authentication
+
+<a href="https://workos.com/" alt="WorkOS Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/workos-white.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/workos-black.svg" width="280" />
+    <img alt="WorkOS logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/workos-black.svg" width="280" />
+  </picture>
+</a>
+
+- **Single Sign-On (SSO)** - SAML, OIDC, and OAuth integrations
+- **Directory Sync** - SCIM provisioning with Active Directory and Google Workspace
+- **Multi-factor Authentication** - Enterprise-grade security options
+- **Compliance Ready** - SOC 2, GDPR, and CCPA compliant
+
+[Visit WorkOS →](https://workos.com/) | [View example →](https://github.com/TanStack/router/tree/main/examples/react/start-workos)
+
+### Clerk - Complete Authentication Platform
+
+<a href="https://go.clerk.com/wOwHtuJ" alt="Clerk Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/clerk-logo-dark.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/clerk-logo-light.svg" width="280" />
+    <img alt="Clerk logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/clerk-logo-light.svg" width="280" />
+  </picture>
+</a>
+
+- **Ready-to-use UI Components** - Sign-in, sign-up, user profile, and organization management
+- **Social Logins** - Google, GitHub, Discord, and 20+ providers
+- **Multi-factor Authentication** - SMS, TOTP, and backup codes
+- **Organizations & Teams** - Built-in support for team-based applications
+
+[Visit Clerk →](https://go.clerk.com/wOwHtuJ) | [Sign up free →](https://go.clerk.com/PrSDXti) | [View example →](https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic)
+
+## Examples
+
+**Partner Solutions:**
+
+- [Clerk Integration](https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic)
+- [WorkOS Integration](https://github.com/TanStack/router/tree/main/examples/react/start-workos)
+
+**DIY Implementations:**
+
+- [Basic Auth with Prisma](https://github.com/TanStack/router/tree/main/examples/react/start-basic-auth)
+- [Supabase Auth](https://github.com/TanStack/router/tree/main/examples/react/start-supabase-basic)
+
+**Client-Side Examples:**
+
+- [Basic Authentication](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes)
+- [Firebase Auth](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes-firebase)
+
+## Architecture Decision Guide
+
+### Choosing an Authentication Approach
+
+**Partner Solutions:**
+
+- Focus on your core business logic
+- Enterprise features (SSO, compliance)
+- Managed security and updates
+- Pre-built UI components
+
+**OSS Solutions:**
+
+- Community-driven development
+- Specific customizations
+- Self-hosted solutions
+- Avoid vendor lock-in
+
+**DIY Implementation:**
+
+- Complete control over the auth flow
+- Custom security requirements
+- Specific business logic needs
+- Full ownership of authentication data
+
+### Production Auth Checklist
+
+- Use HTTPS in production and set a strong session secret.
+- Store sessions in `HttpOnly`, `Secure`, `SameSite` cookies. Do not store session tokens in `localStorage` or `sessionStorage`.
+- Enforce auth in every server function, server route, or API endpoint that reads or writes private user, tenant, or account data. Use `beforeLoad` for page UX, not as the data boundary.
+- Use `.validator()` on every server function that accepts input.
+- Hash passwords with bcrypt, scrypt, or Argon2. For missing users, verify against a dummy hash and return the same login/reset message.
+- Rate limit login, registration, and password-reset endpoints.
+- Use CSRF or same-origin protections for non-GET server functions and server routes.
+- Log authentication events and monitor failures.
+- Test direct unauthenticated calls to protected server functions; they should reject before returning data.
+
+## Next Steps
+
+- **Partner solutions** → [Clerk](https://go.clerk.com/wOwHtuJ) or [WorkOS](https://workos.com/)
+- **DIY implementation** → [Authentication Guide](/start/framework/react/guide/authentication)
+- **Examples** → [Working implementations](https://github.com/TanStack/router/tree/main/examples/react)
+
+## Resources
+
+**Implementation Guides:**
+
+- [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives) — sessions, cookies, OAuth, CSRF, rate limiting (the server half)
+- [Authentication Patterns](/start/framework/react/guide/authentication)
+- [Router Authentication Guide](/router/guide/authenticated-routes)
+
+**Foundation Concepts:**
+
+- [Execution Model](/start/framework/react/guide/execution-model)
+- [Server Functions](/start/framework/react/guide/server-functions)
+
+**Step-by-Step Tutorials:**
+
+- [Router How-to Guides](/router/how-to/index#authentication)
diff --git a/mintlify/start/framework/react/guide/authentication-server-primitives.md b/mintlify/start/framework/react/guide/authentication-server-primitives.md
new file mode 100644
index 000000000..63c2fd737
--- /dev/null
+++ b/mintlify/start/framework/react/guide/authentication-server-primitives.md
@@ -0,0 +1,356 @@
+---
+id: authentication-server-primitives
+title: Authentication Server Primitives
+---
+
+This guide covers the **server-side primitives** for building authentication in TanStack Start: session cookies, session lookup, OAuth, password-reset hardening, CSRF, and rate limiting. It pairs with the [routing-side guide](../../../../router/guide/authenticated-routes) (`_authenticated` layout, `beforeLoad`, redirects, RBAC).
+
+If you can use a managed solution like [Clerk](https://go.clerk.com/wOwHtuJ) or [WorkOS](https://workos.com/), prefer that — they handle most of what this guide describes. Read on if you're rolling your own.
+
+## Protect Data First
+
+Authentication has a data/API boundary and a route/UI layer. The data boundary is the security boundary: every server function, server route, or API endpoint that reads or writes private data must authorize the request before returning data or mutating state.
+
+- **Data/API boundary** (this guide): issue and verify session cookies, exchange OAuth codes, hash and verify passwords, rate-limit credential endpoints, defeat user enumeration, and authorize private data access.
+- **Route/UI layer** (`router-core/auth-and-guards`): redirect unauthenticated users away from screens they cannot use, gate UI on roles/permissions, surface a login form, and avoid triggering requests that would fail anyway.
+
+> **A route guard is not a data authorization boundary.** Server functions and server routes are API endpoints; they are reachable independently of the route that calls them. Auth must be enforced in the handler or middleware for the endpoint that touches private data. `beforeLoad` is for route UX.
+
+## Session Cookies
+
+The default session storage is an HTTP-only cookie. The cookie can hold:
+
+- An **opaque session ID** that the server looks up in a database (recommended — easy to revoke).
+- A **signed/encrypted token** that carries the session payload itself (stateless, but revocation is harder).
+
+Whichever you choose, the cookie flags matter:
+
+```ts
+// src/server/session.ts
+import {
+  getRequestHeader,
+  setResponseHeader,
+} from '@tanstack/react-start/server'
+
+const SESSION_COOKIE = '__Host-session'
+const ONE_DAY = 60 * 60 * 24
+
+export function setSessionCookie(token: string) {
+  setResponseHeader(
+    'Set-Cookie',
+    [
+      `${SESSION_COOKIE}=${token}`,
+      `HttpOnly`,
+      `Secure`,
+      `SameSite=Lax`,
+      `Path=/`,
+      `Max-Age=${ONE_DAY}`,
+    ].join('; '),
+  )
+}
+
+export function clearSessionCookie() {
+  setResponseHeader(
+    'Set-Cookie',
+    `${SESSION_COOKIE}=; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=0`,
+  )
+}
+
+export function readSessionToken(): string | null {
+  const header = getRequestHeader('cookie')
+  if (!header) return null
+  for (const part of header.split(/;\s*/)) {
+    // Split only on the FIRST '=' — signed/base64 values often contain '='.
+    const eq = part.indexOf('=')
+    if (eq === -1) continue
+    if (part.slice(0, eq) === SESSION_COOKIE) return part.slice(eq + 1)
+  }
+  return null
+}
+```
+
+| Flag             | Why                                                                                                                                                          |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `HttpOnly`       | JavaScript can't read the cookie. An XSS bug can't exfiltrate the session.                                                                                   |
+| `Secure`         | HTTPS only. Required when using the `__Host-` prefix.                                                                                                        |
+| `SameSite=Lax`   | Sent on top-level navigations; blocks most cross-site CSRF on POST. Use `Strict` for higher-risk apps where loss of cross-site GET navigation is acceptable. |
+| `__Host-` prefix | Binds the cookie to the exact origin. No `Domain` attribute, `Path=/`, `Secure` required. Defeats subdomain-takeover session fixation.                       |
+| `Path=/`         | Required by `__Host-`.                                                                                                                                       |
+| `Max-Age`        | Bounded lifetime. Pair with server-side rotation.                                                                                                            |
+
+## Session Lookup as Middleware
+
+Centralize session loading in middleware so every protected handler sees a typed session:
+
+```ts
+// src/server/auth-middleware.ts
+import { createMiddleware } from '@tanstack/react-start'
+import { readSessionToken } from './session'
+
+export const authMiddleware = createMiddleware({ type: 'function' }).server(
+  async ({ next }) => {
+    const token = readSessionToken()
+    const session = token ? await db.sessions.findValid(token) : null
+    if (!session) throw new Error('Unauthorized')
+    return next({ context: { session } })
+  },
+)
+```
+
+Attach to every protected server function:
+
+```ts
+import { createServerFn } from '@tanstack/react-start'
+import { authMiddleware } from '~/server/auth-middleware'
+
+export const getMyOrders = createServerFn({ method: 'GET' })
+  .middleware([authMiddleware])
+  .handler(async ({ context }) => {
+    return db.orders.findMany({ where: { userId: context.session.userId } })
+  })
+```
+
+## Login
+
+```ts
+// src/server/login.functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { z } from 'zod'
+import { setSessionCookie } from './session'
+
+export const login = createServerFn({ method: 'POST' })
+  .validator(z.object({ email: z.string().email(), password: z.string() }))
+  .handler(async ({ data }) => {
+    const user = await db.users.findByEmail(data.email)
+    // Always run verifyPasswordHash — even when the user doesn't exist —
+    // so the user-not-found branch takes the same time as wrong-password.
+    // DUMMY_PASSWORD_HASH is a hash of any throwaway password computed once
+    // at startup with the same algorithm/cost as real password hashes.
+    const hashToCheck = user?.passwordHash ?? DUMMY_PASSWORD_HASH
+    const passwordMatches = await verifyPasswordHash(hashToCheck, data.password)
+    const ok = user != null && passwordMatches
+    if (!ok) throw new Error('Invalid email or password')
+
+    // Rotate: destroy any existing session, then issue fresh.
+    await db.sessions.revokeAllForUser(user.id)
+    const token = await db.sessions.create({ userId: user.id })
+    setSessionCookie(token)
+    return { ok: true }
+  })
+```
+
+The `Invalid email or password` message is identical for "user not found" and "wrong password". The dummy-hash technique above also makes the timing identical: without it, the no-user branch returns instantly while the wrong-password branch spends ~100ms on the hash compare, leaking account existence over the wire.
+
+## Logout
+
+```ts
+import { createServerFn } from '@tanstack/react-start'
+import { authMiddleware } from '~/server/auth-middleware'
+import { clearSessionCookie } from '~/server/session'
+
+export const logout = createServerFn({ method: 'POST' })
+  .middleware([authMiddleware])
+  .handler(async ({ context }) => {
+    await db.sessions.revoke(context.session.id)
+    clearSessionCookie()
+    return { ok: true }
+  })
+```
+
+## OAuth: state + PKCE
+
+For OAuth authorization-code flow:
+
+- Generate a one-time random `state` parameter — prevents CSRF on the callback.
+- Generate a PKCE `code_verifier`/`code_challenge` pair — defends against authorization-code interception.
+- Store both in a short-lived signed cookie keyed to this exact attempt.
+
+```ts
+// src/server/oauth.functions.ts
+import { createServerFn } from '@tanstack/react-start'
+import { redirect } from '@tanstack/react-router'
+import { setResponseHeader } from '@tanstack/react-start/server'
+import crypto from 'node:crypto'
+
+const OAUTH_STATE_COOKIE = '__Host-oauth'
+
+function base64url(buf: Buffer) {
+  return buf
+    .toString('base64')
+    .replace(/=/g, '')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+}
+
+export const startOAuth = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    const state = base64url(crypto.randomBytes(32))
+    const verifier = base64url(crypto.randomBytes(32))
+    const challenge = base64url(
+      crypto.createHash('sha256').update(verifier).digest(),
+    )
+
+    setResponseHeader(
+      'Set-Cookie',
+      `${OAUTH_STATE_COOKIE}=${signed({ state, verifier })}; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=600`,
+    )
+
+    throw redirect({
+      href:
+        `https://provider.example/authorize` +
+        `?response_type=code` +
+        `&client_id=${process.env.OAUTH_CLIENT_ID}` +
+        `&redirect_uri=${encodeURIComponent(process.env.OAUTH_REDIRECT_URI!)}` +
+        `&state=${state}` +
+        `&code_challenge=${challenge}` +
+        `&code_challenge_method=S256`,
+    })
+  },
+)
+```
+
+In the callback handler:
+
+1. Read the cookie, verify its signature, and extract `state` + `verifier`.
+2. Compare cookie-state to the `state` query param. If they don't match, abort.
+3. Exchange the authorization code for an access token, sending `code_verifier` along with it.
+4. Fetch the user profile, find/create the local user record, issue a session.
+5. Clear the OAuth cookie.
+
+If any of those checks fail, the request did not originate from your `startOAuth` and must be rejected.
+
+## Password Reset: defeat user enumeration
+
+The reset endpoint must NOT tell the caller whether a given email is registered. Returning 200 vs 404 — or even different copy — leaks user existence to anyone who can hit the endpoint.
+
+```ts
+import { createServerFn } from '@tanstack/react-start'
+import { z } from 'zod'
+
+export const requestPasswordReset = createServerFn({ method: 'POST' })
+  .validator(z.object({ email: z.string().email() }))
+  .handler(async ({ data }) => {
+    const user = await db.users.findByEmail(data.email)
+    if (user) {
+      const token = await db.passwordResets.issue(user.id)
+      await sendResetEmail(user.email, token)
+    }
+    // Same response, same body, regardless of existence.
+    return { ok: true }
+  })
+```
+
+Do NOT:
+
+- Return 200 if exists, 404 if not.
+- Vary the message ("we sent you a link" vs "no account found").
+- Skip the work when the user doesn't exist (timing leak — measurable from the wire).
+
+## CSRF for non-GET RPCs
+
+`SameSite=Lax` on the session cookie blocks most cross-site CSRF for POST/PUT/DELETE. Two cases need explicit defense:
+
+1. **GET-that-mutates** — never. Use POST/PUT/DELETE for any mutation.
+2. **POST from a sibling subdomain** — `SameSite=Lax` does not block this; verify the `Origin` header matches your app.
+
+```ts
+import { createMiddleware } from '@tanstack/react-start'
+import { getRequest } from '@tanstack/react-start/server'
+
+export const csrfMiddleware = createMiddleware().server(async ({ next }) => {
+  const request = getRequest()
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
+    const origin = request.headers.get('origin')
+    // Compare the FULL origin (scheme + host + port) — host alone lets
+    // http://example.com pass a check meant for https://example.com.
+    if (!origin || new URL(origin).origin !== process.env.APP_ORIGIN) {
+      throw new Error('Origin check failed')
+    }
+  }
+  return next()
+})
+```
+
+Attach this in `src/start.ts` global `requestMiddleware` so it runs on every non-GET request, including server routes and SSR.
+
+## Rate Limiting Auth Endpoints
+
+A login endpoint without rate limiting is a credential-stuffing target. Limit per IP (and per-account if you can identify the user) with a sliding window or token bucket.
+
+```ts
+import { createMiddleware } from '@tanstack/react-start'
+import { getRequest } from '@tanstack/react-start/server'
+
+function rateLimitMiddleware(opts: {
+  key: string
+  max: number
+  windowMs: number
+}) {
+  return createMiddleware().server(async ({ next }) => {
+    const request = getRequest()
+    const ip =
+      request.headers.get('cf-connecting-ip') ??
+      request.headers.get('x-forwarded-for')?.split(',')[0] ??
+      'unknown'
+    const allowed = await rateLimiter.consume(
+      `rl:${opts.key}:${ip}`,
+      opts.max,
+      opts.windowMs,
+    )
+    if (!allowed) throw new Error('Too many requests')
+    return next()
+  })
+}
+
+export const login = createServerFn({ method: 'POST' }).middleware([
+  rateLimitMiddleware({ key: 'login', max: 5, windowMs: 60_000 }),
+])
+// ...
+```
+
+## Session Rotation
+
+Whenever the user's privileges change — login, logout, password change, role grant — destroy the old session and issue a new one. This neutralizes session-fixation attacks where an attacker plants their own session ID in the victim's browser before the privilege change.
+
+```ts
+// On login: revoke any pre-login session, create fresh.
+await db.sessions.revokeAllForUser(user.id)
+const token = await db.sessions.create({ userId: user.id })
+setSessionCookie(token)
+
+// On password change / role grant:
+await db.sessions.revokeAllForUser(user.id)
+const token = await db.sessions.create({ userId: user.id })
+setSessionCookie(token)
+```
+
+## Read Cookies and Env Per Request, Not at Module Scope
+
+Module-scope reads are wrong on two axes:
+
+- **Security:** they can be inlined into the client bundle.
+- **Correctness on edge runtimes:** Cloudflare Workers (and others) inject env at request time. Module-level reads run before any request exists and evaluate to `undefined` even on the server.
+
+```ts
+// ❌ Wrong
+const SESSION_SECRET = process.env.SESSION_SECRET
+export function signSession(payload) {
+  return sign(payload, SESSION_SECRET)
+}
+
+// ✅ Right
+export function signSession(payload) {
+  return sign(payload, process.env.SESSION_SECRET)
+}
+```
+
+See [Execution Model: Module-Level `process.env` Reads](/start/framework/react/guide/execution-model#module-level-processenv-reads) for the full rule.
+
+## See Also
+
+- [Authentication Overview](/start/framework/react/guide/authentication-overview) — choosing between partner solutions, OSS libraries, and DIY.
+- [Authenticated Routes (Router)](../../../../router/guide/authenticated-routes) — the routing-side guide.
+- [Server Functions](/start/framework/react/guide/server-functions) — the RPC primitive that auth lives inside.
+- [Middleware](/start/framework/react/guide/middleware) — composing `authMiddleware`.
+- [OWASP Cheat Sheets — Authentication](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html), [Session Management](https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html), [CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
+- [MDN — Set-Cookie](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie).
diff --git a/mintlify/start/framework/react/guide/authentication.md b/mintlify/start/framework/react/guide/authentication.md
new file mode 100644
index 000000000..921c72125
--- /dev/null
+++ b/mintlify/start/framework/react/guide/authentication.md
@@ -0,0 +1,610 @@
+---
+id: authentication
+title: Authentication
+---
+
+This guide covers authentication patterns and shows how to implement your own authentication system with TanStack Start.
+
+> **📋 Before You Start:** Check our [Authentication Overview](/start/framework/react/guide/authentication-overview) for all available options including partner solutions and hosted services.
+
+## Authentication Approaches
+
+You have several options for authentication in your TanStack Start application:
+
+**Hosted Solutions:**
+
+1. **[Clerk](https://clerk.dev)** - Complete authentication platform with UI components
+2. **[WorkOS](https://workos.com)** - Enterprise-focused with SSO and compliance features
+3. **[Better Auth](https://www.better-auth.com/)** - Open-source TypeScript library
+4. **[Auth.js](https://authjs.dev/)** - Open-source library supporting 80+ OAuth providers
+
+**DIY Implementation Benefits:**
+
+- **Full Control**: Complete customization over authentication flow
+- **No Vendor Lock-in**: Own your authentication logic and user data
+- **Custom Requirements**: Implement specific business logic or compliance needs
+- **Cost Control**: No per-user pricing or usage limits
+
+Authentication involves many considerations including password security, session management, rate limiting, CSRF protection, and various attack vectors.
+
+## Core Concepts
+
+### Authentication vs Authorization
+
+- **Authentication**: Who is this user? (Login/logout)
+- **Authorization**: What can this user do? (Permissions/roles)
+
+TanStack Start provides the tools for both through server functions, sessions, and route protection.
+
+> Protect the data/API boundary first. Any server function, server route, or other API endpoint that returns or mutates private data must authorize the request itself. `beforeLoad` is useful for route UX: it keeps users out of screens they cannot use and avoids triggering work that would fail anyway. It is not the security boundary for the data. See [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives) for the server-side pattern.
+
+## Essential Building Blocks
+
+### 1. Server Functions for Authentication
+
+Server functions handle sensitive authentication logic securely on the server:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { redirect } from '@tanstack/react-router'
+
+// Login server function
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string; password: string }) => data)
+  .handler(async ({ data }) => {
+    // Verify credentials (replace with your auth logic)
+    const user = await authenticateUser(data.email, data.password)
+
+    if (!user) {
+      return { error: 'Invalid credentials' }
+    }
+
+    // Create session
+    const session = await useAppSession()
+    await session.update({
+      userId: user.id,
+      email: user.email,
+    })
+
+    // Redirect to protected area
+    throw redirect({ to: '/dashboard' })
+  })
+
+// Logout server function
+export const logoutFn = createServerFn({ method: 'POST' }).handler(async () => {
+  const session = await useAppSession()
+  await session.clear()
+  throw redirect({ to: '/' })
+})
+
+// Get current user
+export const getCurrentUserFn = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    const session = await useAppSession()
+    const userId = session.data.userId
+
+    if (!userId) {
+      return null
+    }
+
+    return await getUserById(userId)
+  },
+)
+```
+
+### 2. Session Management
+
+TanStack Start provides secure HTTP-only cookie sessions:
+
+```tsx
+// utils/session.ts
+import { useSession } from '@tanstack/react-start/server'
+
+type SessionData = {
+  userId?: string
+  email?: string
+  role?: string
+}
+
+export function useAppSession() {
+  return useSession<SessionData>({
+    // Session configuration
+    name: 'app-session',
+    password: process.env.SESSION_SECRET!, // At least 32 characters
+    // Optional: customize cookie settings
+    cookie: {
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      httpOnly: true,
+    },
+  })
+}
+```
+
+### 3. Authentication Context
+
+Share authentication state across your application:
+
+```tsx
+// contexts/auth.tsx
+import { createContext, useContext, ReactNode } from 'react'
+import { useServerFn } from '@tanstack/react-start'
+import { getCurrentUserFn } from '../server/auth'
+
+type User = {
+  id: string
+  email: string
+  role: string
+}
+
+type AuthContextType = {
+  user: User | null
+  isLoading: boolean
+  refetch: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const { data: user, isLoading, refetch } = useServerFn(getCurrentUserFn)
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, refetch }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+```
+
+### 4. Route Protection
+
+Protect routes using `beforeLoad`:
+
+```tsx
+// routes/_authed.tsx - Layout route for protected pages
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { getCurrentUserFn } from '../server/auth'
+
+export const Route = createFileRoute('/_authed')({
+  beforeLoad: async ({ location }) => {
+    const user = await getCurrentUserFn()
+
+    if (!user) {
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.href },
+      })
+    }
+
+    // Pass user to child routes
+    return { user }
+  },
+})
+```
+
+```tsx
+// routes/_authed/dashboard.tsx - Protected route
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authed/dashboard')({
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const { user } = Route.useRouteContext()
+
+  return (
+    <div>
+      <h1>Welcome, {user.email}!</h1>
+      {/* Dashboard content */}
+    </div>
+  )
+}
+```
+
+## Implementation Patterns
+
+### Basic Email/Password Authentication
+
+```tsx
+// server/auth.ts
+import bcrypt from 'bcryptjs'
+import { createServerFn } from '@tanstack/react-start'
+
+// User registration
+export const registerFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string; password: string; name: string }) => data)
+  .handler(async ({ data }) => {
+    // Check if user exists
+    const existingUser = await getUserByEmail(data.email)
+    if (existingUser) {
+      return { error: 'User already exists' }
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(data.password, 12)
+
+    // Create user
+    const user = await createUser({
+      email: data.email,
+      password: hashedPassword,
+      name: data.name,
+    })
+
+    // Create session
+    const session = await useAppSession()
+    await session.update({ userId: user.id })
+
+    return { success: true, user: { id: user.id, email: user.email } }
+  })
+
+async function authenticateUser(email: string, password: string) {
+  const user = await getUserByEmail(email)
+  if (!user) return null
+
+  const isValid = await bcrypt.compare(password, user.password)
+  return isValid ? user : null
+}
+```
+
+### Role-Based Access Control (RBAC)
+
+```tsx
+// utils/auth.ts
+export const roles = {
+  USER: 'user',
+  ADMIN: 'admin',
+  MODERATOR: 'moderator',
+} as const
+
+type Role = (typeof roles)[keyof typeof roles]
+
+export function hasPermission(userRole: Role, requiredRole: Role): boolean {
+  const hierarchy = {
+    [roles.USER]: 0,
+    [roles.MODERATOR]: 1,
+    [roles.ADMIN]: 2,
+  }
+
+  return hierarchy[userRole] >= hierarchy[requiredRole]
+}
+
+// Protected route with role check
+export const Route = createFileRoute('/_authed/admin/')({
+  beforeLoad: async ({ context }) => {
+    if (!hasPermission(context.user.role, roles.ADMIN)) {
+      throw redirect({ to: '/unauthorized' })
+    }
+  },
+})
+```
+
+### Social Authentication Integration
+
+```tsx
+// Example with OAuth providers
+export const authProviders = {
+  google: {
+    clientId: process.env.GOOGLE_CLIENT_ID!,
+    redirectUri: `${process.env.APP_URL}/auth/google/callback`,
+  },
+  github: {
+    clientId: process.env.GITHUB_CLIENT_ID!,
+    redirectUri: `${process.env.APP_URL}/auth/github/callback`,
+  },
+}
+
+export const initiateOAuthFn = createServerFn({ method: 'POST' })
+  .validator((data: { provider: 'google' | 'github' }) => data)
+  .handler(async ({ data }) => {
+    const provider = authProviders[data.provider]
+    const state = generateRandomState()
+
+    // Store state in session for CSRF protection
+    const session = await useAppSession()
+    await session.update({ oauthState: state })
+
+    // Generate OAuth URL
+    const authUrl = generateOAuthUrl(provider, state)
+
+    throw redirect({ href: authUrl })
+  })
+```
+
+### Password Reset Flow
+
+```tsx
+// Password reset request
+export const requestPasswordResetFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string }) => data)
+  .handler(async ({ data }) => {
+    const user = await getUserByEmail(data.email)
+    if (!user) {
+      // Don't reveal if email exists
+      return { success: true }
+    }
+
+    const token = generateSecureToken()
+    const expires = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
+
+    await savePasswordResetToken(user.id, token, expires)
+    await sendPasswordResetEmail(user.email, token)
+
+    return { success: true }
+  })
+
+// Password reset confirmation
+export const resetPasswordFn = createServerFn({ method: 'POST' })
+  .validator((data: { token: string; newPassword: string }) => data)
+  .handler(async ({ data }) => {
+    const resetToken = await getPasswordResetToken(data.token)
+
+    if (!resetToken || resetToken.expires < new Date()) {
+      return { error: 'Invalid or expired token' }
+    }
+
+    const hashedPassword = await bcrypt.hash(data.newPassword, 12)
+    await updateUserPassword(resetToken.userId, hashedPassword)
+    await deletePasswordResetToken(data.token)
+
+    return { success: true }
+  })
+```
+
+## Security Best Practices
+
+### 1. Password Security
+
+```tsx
+// Use strong hashing (bcrypt, scrypt, or argon2)
+import bcrypt from 'bcryptjs'
+
+const saltRounds = 12 // Adjust based on your security needs
+const hashedPassword = await bcrypt.hash(password, saltRounds)
+```
+
+### 2. Session Security
+
+```tsx
+// Use secure session configuration
+export function useAppSession() {
+  return useSession({
+    name: 'app-session',
+    password: process.env.SESSION_SECRET!, // 32+ characters
+    cookie: {
+      secure: process.env.NODE_ENV === 'production', // HTTPS only in production
+      sameSite: 'lax', // CSRF protection
+      httpOnly: true, // XSS protection
+      maxAge: 7 * 24 * 60 * 60, // 7 days
+    },
+  })
+}
+```
+
+### 3. Rate Limiting
+
+```tsx
+// Simple in-memory rate limiting (use Redis in production)
+const loginAttempts = new Map<string, { count: number; resetTime: number }>()
+
+export const rateLimitLogin = (ip: string): boolean => {
+  const now = Date.now()
+  const attempts = loginAttempts.get(ip)
+
+  if (!attempts || now > attempts.resetTime) {
+    loginAttempts.set(ip, { count: 1, resetTime: now + 15 * 60 * 1000 }) // 15 min
+    return true
+  }
+
+  if (attempts.count >= 5) {
+    return false // Too many attempts
+  }
+
+  attempts.count++
+  return true
+}
+```
+
+### 4. Input Validation
+
+```tsx
+import { z } from 'zod'
+
+const loginSchema = z.object({
+  email: z.string().email().max(255),
+  password: z.string().min(8).max(100),
+})
+
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator((data) => loginSchema.parse(data))
+  .handler(async ({ data }) => {
+    // data is now validated
+  })
+```
+
+## Testing Authentication
+
+### Unit Testing Server Functions
+
+```tsx
+// __tests__/auth.test.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import { loginFn } from '../server/auth'
+
+describe('Authentication', () => {
+  beforeEach(async () => {
+    await setupTestDatabase()
+  })
+
+  it('should login with valid credentials', async () => {
+    const result = await loginFn({
+      data: { email: 'test@example.com', password: 'password123' },
+    })
+
+    expect(result.error).toBeUndefined()
+    expect(result.user).toBeDefined()
+  })
+
+  it('should reject invalid credentials', async () => {
+    const result = await loginFn({
+      data: { email: 'test@example.com', password: 'wrongpassword' },
+    })
+
+    expect(result.error).toBe('Invalid credentials')
+  })
+})
+```
+
+### Integration Testing
+
+```tsx
+// __tests__/auth-flow.test.tsx
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { RouterProvider, createMemoryHistory } from '@tanstack/react-router'
+import { router } from '../router'
+
+describe('Authentication Flow', () => {
+  it('should redirect to login when accessing protected route', async () => {
+    const history = createMemoryHistory()
+    history.push('/dashboard') // Protected route
+
+    render(<RouterProvider router={router} history={history} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Login')).toBeInTheDocument()
+    })
+  })
+})
+```
+
+## Common Patterns
+
+### Loading States
+
+```tsx
+function LoginForm() {
+  const [isLoading, setIsLoading] = useState(false)
+  const loginMutation = useServerFn(loginFn)
+
+  const handleSubmit = async (data: LoginData) => {
+    setIsLoading(true)
+    try {
+      await loginMutation.mutate(data)
+    } catch (error) {
+      // Handle error
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Form fields */}
+      <button disabled={isLoading}>
+        {isLoading ? 'Logging in...' : 'Login'}
+      </button>
+    </form>
+  )
+}
+```
+
+### Remember Me Functionality
+
+```tsx
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator(
+    (data: { email: string; password: string; rememberMe?: boolean }) => data,
+  )
+  .handler(async ({ data }) => {
+    const user = await authenticateUser(data.email, data.password)
+    if (!user) return { error: 'Invalid credentials' }
+
+    const session = await useAppSession()
+    await session.update(
+      { userId: user.id },
+      {
+        // Extend session if remember me is checked
+        maxAge: data.rememberMe ? 30 * 24 * 60 * 60 : undefined, // 30 days vs session
+      },
+    )
+
+    return { success: true }
+  })
+```
+
+## Working Examples
+
+Study these implementations to understand different authentication patterns:
+
+- **[Basic Auth with Prisma](https://github.com/TanStack/router/tree/main/examples/react/start-basic-auth)** - Complete DIY implementation with database and sessions
+- **[Supabase Integration](https://github.com/TanStack/router/tree/main/examples/react/start-supabase-basic)** - Third-party service integration example
+- **[Client-side Context Auth](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes)** - Client-only authentication patterns
+
+## Migration from Other Solutions
+
+### From Client-Side Auth
+
+If you're migrating from client-side authentication (localStorage, context only):
+
+1. Move authentication logic to server functions
+2. Replace localStorage with server sessions
+3. Update route protection to use `beforeLoad`
+4. Add proper security headers and CSRF protection
+
+### From Other Frameworks
+
+- **Next.js**: Replace API routes with server functions, migrate NextAuth sessions
+- **Remix**: Convert loaders/actions to server functions, adapt session patterns
+- **SvelteKit**: Move form actions to server functions, update route protection
+
+## Production Considerations
+
+When choosing your authentication approach, consider these factors:
+
+### Hosted vs DIY Comparison
+
+**Hosted Solutions (Clerk, WorkOS, Better Auth):**
+
+- Pre-built security measures and regular updates
+- UI components and user management features
+- Compliance certifications and audit trails
+- Support and documentation
+- Per-user or subscription pricing
+
+**DIY Implementation:**
+
+- Complete control over implementation and data
+- No ongoing subscription costs
+- Custom business logic and workflows
+- Responsibility for security updates and monitoring
+- Need to handle edge cases and attack vectors
+
+### Security Considerations
+
+Authentication systems need to handle various security aspects:
+
+- Password hashing and timing attack prevention
+- Session management and fixation protection
+- CSRF and XSS protection
+- Rate limiting and brute force prevention
+- OAuth flow security
+- Compliance requirements (GDPR, CCPA, etc.)
+
+## Next Steps
+
+When implementing authentication, consider:
+
+- **Security Review**: Review your implementation for security best practices
+- **Performance**: Add caching for user lookups and session validation
+- **Monitoring**: Add logging and monitoring for authentication events
+- **Compliance**: Ensure compliance with relevant regulations if storing personal data
+
+For other authentication approaches, check the [Authentication Overview](/start/framework/react/guide/authentication-overview). For specific integration help, explore our [working examples](https://github.com/TanStack/router/tree/main/examples/react).
diff --git a/mintlify/start/framework/react/guide/cdn-asset-urls.md b/mintlify/start/framework/react/guide/cdn-asset-urls.md
new file mode 100644
index 000000000..3ad09d829
--- /dev/null
+++ b/mintlify/start/framework/react/guide/cdn-asset-urls.md
@@ -0,0 +1,441 @@
+---
+id: cdn-asset-urls
+title: CDN Asset URLs
+---
+
+# CDN Asset URLs
+
+> **Experimental:** `transformAssets` is experimental and subject to change.
+
+Use this guide when you need TanStack Start to rewrite manifest-managed asset URLs at runtime. The most common use case is serving JavaScript and CSS from a CDN whose origin is known only when the server starts, or varies per request.
+
+This guide is about asset URL rewriting. For choosing CSS import patterns and configuring CSS inlining, see the [CSS Styling guide](/start/framework/react/guide/css-styling).
+
+## What `transformAssets` Rewrites
+
+The `transformAssets` option on `createStartHandler` rewrites URLs that Start manages in its SSR manifest:
+
+- JavaScript preload links (`<link rel="modulepreload">` for module output, or `<link rel="preload" as="script">` for IIFE output)
+- `<link rel="stylesheet">` tags for manifest-managed CSS
+- The client entry script URL
+- `url(...)` and `@import` URLs inside [inlined CSS](/start/framework/react/guide/css-styling#inline-route-css-in-production) when CSS URL templates are enabled
+
+It does not rewrite every URL in your app. In particular, it does not rewrite arbitrary route `head().links` entries, including CSS imported with `?url` and returned from route `head()` functions. See [What This Does Not Rewrite](#what-this-does-not-rewrite) for the main exclusions.
+
+## Use a Static CDN Prefix
+
+Pass a string when every Start-managed asset should receive the same URL prefix.
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  transformAssets: process.env.CDN_ORIGIN || '',
+})
+
+export default createServerEntry({ fetch: handler })
+```
+
+If `CDN_ORIGIN` is `https://cdn.example.com` and an asset URL is `/assets/index-abc123.js`, Start renders `https://cdn.example.com/assets/index-abc123.js`.
+
+When the string is empty or not set, URLs are left unchanged.
+
+## Add Cross-Origin Attributes
+
+Use the object shorthand when you also need to set `crossOrigin` on manifest-managed `<link>` tags.
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  transformAssets: {
+    prefix: process.env.CDN_ORIGIN || '',
+    crossOrigin: 'anonymous',
+  },
+})
+
+export default createServerEntry({ fetch: handler })
+```
+
+`crossOrigin` accepts either one value for all supported link kinds, or a per-kind record that matches the `HeadContent assetCrossOrigin` shape.
+
+```tsx
+transformAssets: {
+  prefix: 'https://cdn.example.com',
+  crossOrigin: {
+    script: 'anonymous',
+    stylesheet: 'use-credentials',
+  },
+}
+```
+
+Kinds not listed in the per-kind record receive no `crossOrigin` attribute. The string shorthand and object shorthand are cached by default.
+
+You can also set cross-origin behavior from your app shell with `HeadContent`:
+
+```tsx
+<HeadContent assetCrossOrigin="anonymous" />
+```
+
+or:
+
+```tsx
+<HeadContent
+  assetCrossOrigin={{
+    script: 'anonymous',
+    stylesheet: 'use-credentials',
+  }}
+/>
+```
+
+If both `transformAssets` and `assetCrossOrigin` set a cross-origin value, `assetCrossOrigin` overrides the value from `transformAssets`. `assetCrossOrigin` only applies to manifest-managed script and stylesheet links, not arbitrary links returned from route `head()` functions.
+
+## Use a Callback for Per-Asset Logic
+
+Pass a callback when the output depends on the asset kind or URL. The callback returns a string, `{ href, crossOrigin? }`, or a `Promise` of either.
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  transformAssets: (asset) => {
+    const href = `https://cdn.example.com${asset.url}`
+
+    if (asset.kind === 'script') {
+      return {
+        href,
+        crossOrigin: 'anonymous',
+      }
+    }
+
+    return { href }
+  },
+})
+
+export default createServerEntry({ fetch: handler })
+```
+
+The `kind` field tells you which asset URL is being transformed.
+
+| `kind`         | Description                                    |
+| -------------- | ---------------------------------------------- |
+| `'script'`     | JavaScript preload or client entry script URL  |
+| `'stylesheet'` | Manifest-managed CSS stylesheet URL            |
+| `'css-url'`    | `url(...)` or `@import` URL inside inlined CSS |
+
+For `kind === 'css-url'`, the context also includes `stylesheetHref`, which is the manifest stylesheet href whose CSS content is being inlined.
+
+`crossOrigin` applies to manifest-managed script and stylesheet tags. For CSS-internal URLs, returning `{ href }` is equivalent to returning a string.
+
+By default, callback results are cached after the first request in production. Use the object form with `cache: false` only when the transform depends on per-request data.
+
+## Handle Per-Request CDN Selection
+
+Use the object form with `cache: false` when the CDN origin depends on the current request, such as a request header, tenant, or region.
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+  getRequest,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  transformAssets: {
+    transform: ({ kind, url }) => {
+      const region = getRequest().headers.get('x-region') || 'us'
+      const cdnBase =
+        region === 'eu'
+          ? 'https://cdn-eu.example.com'
+          : 'https://cdn-us.example.com'
+
+      if (kind === 'script') {
+        return {
+          href: `${cdnBase}${url}`,
+          crossOrigin: 'anonymous',
+        }
+      }
+
+      return { href: `${cdnBase}${url}` }
+    },
+    cache: false,
+  },
+})
+
+export default createServerEntry({ fetch: handler })
+```
+
+The object form accepts these properties:
+
+| Property          | Type                                                                                                                            | Description                                                                                                                   |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `transform`       | `string \| (asset) => string \| { href, crossOrigin? } \| Promise<...>`                                                         | A string prefix or callback, same as the shorthand forms above.                                                               |
+| `createTransform` | `(ctx: { warmup: true } \| { warmup: false; request: Request }) => (asset) => string \| { href, crossOrigin? } \| Promise<...>` | Async factory that runs once per manifest computation and returns a per-asset transform. Mutually exclusive with `transform`. |
+| `cache`           | `boolean`                                                                                                                       | Whether to cache the transformed manifest. Defaults to `true`.                                                                |
+| `warmup`          | `boolean`                                                                                                                       | When `true`, warms up the cached manifest on server startup in production. Defaults to `false`.                               |
+
+Use `createTransform` when you need to do async work once per manifest computation, then transform many URLs with the result.
+
+```ts
+transformAssets: {
+  cache: false,
+  async createTransform(ctx) {
+    if (ctx.warmup) {
+      return ({ url }) => ({ href: url })
+    }
+
+    const region = ctx.request.headers.get('x-region') || 'us'
+    const cdnBase = await fetchCdnBaseForRegion(region)
+
+    return (asset) => {
+      if (asset.kind === 'script') {
+        return {
+          href: `${cdnBase}${asset.url}`,
+          crossOrigin: 'anonymous',
+        }
+      }
+
+      return { href: `${cdnBase}${asset.url}` }
+    }
+  },
+}
+```
+
+For a static CDN prefix, prefer the string or object shorthand. They are simpler and use the default cached manifest.
+
+## Transform URLs Inside Inlined CSS
+
+When Start's [CSS inlining](/start/framework/react/guide/css-styling#inline-route-css-in-production) is enabled, Start can also run `transformAssets` for URLs inside the inlined CSS content. This covers relative and root-relative `url(...)` and `@import` values, such as fonts and background images.
+
+Because Start does not parse CSS at runtime, this requires opting into build-time CSS URL templates:
+
+```ts
+tanstackStart({
+  server: {
+    build: {
+      inlineCss: {
+        enabled: true,
+        transformAssets: true,
+      },
+    },
+  },
+})
+```
+
+Passing `inlineCss: true` still inlines route CSS, but it does not emit the template metadata needed for runtime CSS URL transforms.
+
+Relative CSS URLs are resolved against the emitted stylesheet href before your transform runs.
+
+```css
+/* emitted stylesheet href: /assets/dashboard.css */
+.card {
+  background-image: url('./dot.svg');
+}
+```
+
+Your callback receives `/assets/dot.svg` with `kind: 'css-url'`. For example, you can serve JavaScript and CSS files from one CDN origin, and font or image URLs referenced inside inlined CSS from another origin.
+
+```tsx
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  transformAssets: (asset) => {
+    if (asset.kind === 'css-url') {
+      return `https://static-assets.example.com${asset.url}`
+    }
+
+    return `https://cdn.example.com${asset.url}`
+  },
+})
+```
+
+When `asset.kind === 'css-url'`, the URL came from inside an inlined CSS file, such as a `url(...)` or `@import` reference. The callback context also includes `stylesheetHref`, which identifies the generated stylesheet that contained that URL. Use it when the transform needs to vary based on the source stylesheet.
+
+```tsx
+transformAssets: (asset) => {
+  if (asset.kind === 'css-url') {
+    const cdnBase = asset.stylesheetHref.includes('/admin-')
+      ? 'https://admin-cdn.example.com'
+      : 'https://cdn.example.com'
+
+    return `${cdnBase}${asset.url}`
+  }
+
+  return `https://cdn.example.com${asset.url}`
+}
+```
+
+Absolute URLs, protocol-relative URLs, data URLs, and hash references inside CSS are left unchanged and are not passed to `transformAssets`. If CSS URL templates were not enabled for the build, URLs inside inlined CSS are left unchanged at runtime.
+
+## Choose When URL Rewrites Are Cached
+
+In most apps, the CDN URL is the same for every request. Keep the default caching behavior for that case. Start computes the transformed manifest once in production, then reuses it for later requests.
+
+Only turn caching off when the result can change per request, such as choosing a CDN by region, tenant, header, or cookie.
+
+| Form                                 | Default cache | Behavior                                                    |
+| ------------------------------------ | ------------- | ----------------------------------------------------------- |
+| String prefix                        | `true`        | Computed once, cached in production.                        |
+| Object shorthand                     | `true`        | Computed once, cached in production.                        |
+| Callback                             | `true`        | Runs once on first request, cached in production.           |
+| Object with `cache: true` or omitted | `true`        | Same as above.                                              |
+| Object with `cache: false`           | `false`       | Deep-clones the base manifest and transforms every request. |
+
+Use `cache: false` only when the transform depends on per-request data. For static CDN prefixes, the default `cache: true` is faster and simpler.
+
+If you want to avoid doing the first cached rewrite during the first user request, set `warmup: true`. Start will compute the transformed manifest in the background when the server starts.
+
+```ts
+transformAssets: {
+  transform: process.env.CDN_ORIGIN || '',
+  cache: true,
+  warmup: true,
+}
+```
+
+Warmup has no effect in development mode or when `cache: false`.
+
+> **Note:** In development mode (`TSS_DEV_SERVER`), caching is always skipped regardless of the `cache` setting, so you always get fresh manifests.
+
+## Keep Client Navigation Chunks on the CDN
+
+`transformAssets` rewrites the URLs in the SSR HTML: script preload hints, stylesheet links, and the client entry script. This means the browser's initial page load can fetch those assets from the CDN.
+
+When users navigate client-side, TanStack Router lazy-loads route chunks using `import()` calls with paths baked in by the bundler. Configure your bundler so those async chunk URLs resolve relative to the client entry script that `transformAssets` rewrites to the CDN.
+
+
+
+# Vite
+
+With Vite's default `base: '/'`, lazy route chunk paths are absolute, such as `/assets/about-abc123.js`, and resolve against the app server origin instead of the CDN.
+
+For Vite builds, set `base: ''` so Vite generates relative import paths for client-side chunks.
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: '',
+  // ... plugins, etc.
+})
+```
+
+With `base: ''`, the client entry script can be loaded from the CDN by `transformAssets`, and relative `import()` calls resolve against that same CDN origin. This keeps lazy-loaded route chunks on the CDN during client-side navigation.
+
+Using an empty string rather than `'./'` is important. Both produce relative client-side imports, but `base: ''` preserves the root-relative paths in the SSR manifest so `transformAssets` can prepend the CDN origin correctly.
+
+| `base` setting  | SSR assets on initial load    | Client-side navigation chunks |
+| --------------- | ----------------------------- | ----------------------------- |
+| `'/'` (default) | CDN through `transformAssets` | App server                    |
+| `''`            | CDN through `transformAssets` | CDN, relative to entry module |
+
+Use `base: ''` whenever you use `transformAssets` with Vite and want initial-load assets and client-navigation chunks served from the same CDN.
+
+# Rsbuild
+
+For Rsbuild builds, set `output.assetPrefix` to `'auto'` so Rspack derives async chunk URLs from the loaded client entry script.
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'auto',
+  },
+  // ... plugins, etc.
+})
+```
+
+With `assetPrefix: 'auto'`, the client entry script can be loaded from the CDN by `transformAssets`, and async route chunks resolve relative to that entry script during client-side navigation.
+
+
+
+## What This Does Not Rewrite
+
+`transformAssets` rewrites Start manifest-managed assets and, when CSS URL templates are enabled, URLs inside CSS that Start inlines into the HTML.
+
+It does not rewrite arbitrary links returned from route `head()` functions:
+
+```tsx
+import { createRootRoute } from '@tanstack/react-router'
+import appCss from '../styles/app.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+})
+```
+
+If this stylesheet must use a CDN URL, use a bundler-level option or build-time configuration for that URL. If you want Start to manage the generated stylesheet URL, import the CSS as a side effect or CSS module instead. See [Choose a CSS Pattern](/start/framework/react/guide/css-styling#choose-a-css-pattern).
+
+`transformAssets` also does not rewrite asset URLs imported directly in your components:
+
+```tsx
+// This import resolves to a URL at build time by your bundler.
+import logo from './logo.svg'
+
+function Header() {
+  return <img src={logo} /> // This URL is not affected by transformAssets.
+}
+```
+
+For these asset imports, use the URL controls provided by your bundler.
+
+
+
+# Vite
+
+For Vite builds, use Vite's `experimental.renderBuiltUrl` in your `vite.config.ts`.
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  experimental: {
+    renderBuiltUrl(filename, { hostType }) {
+      if (hostType === 'js') {
+        return { relative: true }
+      }
+
+      return `https://cdn.example.com/${filename}`
+    },
+  },
+})
+```
+
+# Rsbuild
+
+For Rsbuild builds where the CDN origin is known at build time, use `output.assetPrefix` in your `rsbuild.config.ts`.
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://cdn.example.com/',
+  },
+})
+```
+
+
diff --git a/mintlify/start/framework/react/guide/client-entry-point.md b/mintlify/start/framework/react/guide/client-entry-point.md
new file mode 100644
index 000000000..02d0ecd42
--- /dev/null
+++ b/mintlify/start/framework/react/guide/client-entry-point.md
@@ -0,0 +1,73 @@
+---
+id: client-entry-point
+title: Client Entry Point
+---
+
+# Client Entry Point
+
+> [!NOTE]
+> The client entry point is **optional** out of the box. If not provided, TanStack Start will automatically handle the client entry point for you using the below as a default.
+
+Getting our html to the client is only half the battle. Once there, we need to hydrate our client-side JavaScript once the route resolves to the client. We do this by hydrating the root of our application with the `StartClient` component:
+
+```tsx
+// src/client.tsx
+import { StartClient } from '@tanstack/react-start/client'
+import { StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+hydrateRoot(
+  document,
+  <StrictMode>
+    <StartClient />
+  </StrictMode>,
+)
+```
+
+This enables us to kick off client-side routing once the user's initial server request has fulfilled.
+
+## Error Handling
+
+You can wrap your client entry point with error boundaries to handle client-side errors gracefully:
+
+```tsx
+// src/client.tsx
+import { StartClient } from '@tanstack/react-start/client'
+import { StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { ErrorBoundary } from './components/ErrorBoundary'
+
+hydrateRoot(
+  document,
+  <StrictMode>
+    <ErrorBoundary>
+      <StartClient />
+    </ErrorBoundary>
+  </StrictMode>,
+)
+```
+
+## Development vs Production
+
+You may want different behavior in development vs production:
+
+```tsx
+// src/client.tsx
+import { StartClient } from '@tanstack/react-start/client'
+import { StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+const App = (
+  <>
+    {import.meta.env.DEV && <div>Development Mode</div>}
+    <StartClient />
+  </>
+)
+
+hydrateRoot(
+  document,
+  import.meta.env.DEV ? <StrictMode>{App}</StrictMode> : App,
+)
+```
+
+The client entry point gives you full control over how your application initializes on the client side while working seamlessly with TanStack Start's server-side rendering.
diff --git a/mintlify/start/framework/react/guide/code-execution-patterns.md b/mintlify/start/framework/react/guide/code-execution-patterns.md
new file mode 100644
index 000000000..504e40e59
--- /dev/null
+++ b/mintlify/start/framework/react/guide/code-execution-patterns.md
@@ -0,0 +1,146 @@
+---
+id: code-execution-patterns
+title: Code Execution Patterns
+---
+
+This guide covers patterns for controlling where code runs in your TanStack Start application - server-only, client-only, or isomorphic (both environments). For foundational concepts, see the [Execution Model](/start/framework/react/guide/execution-model) guide.
+
+## Quick Start
+
+Set up execution boundaries in your TanStack Start application:
+
+```tsx
+import {
+  createServerFn,
+  createServerOnlyFn,
+  createClientOnlyFn,
+  createIsomorphicFn,
+} from '@tanstack/react-start'
+
+// Server function (RPC call)
+const getUsers = createServerFn().handler(async () => {
+  return await db.users.findMany()
+})
+
+// Server-only utility (crashes on client)
+const getSecret = createServerOnlyFn(() => process.env.API_SECRET)
+
+// Client-only utility (crashes on server)
+const saveToStorage = createClientOnlyFn((data: any) => {
+  localStorage.setItem('data', JSON.stringify(data))
+})
+
+// Different implementations per environment
+const logger = createIsomorphicFn()
+  .server((msg) => console.log(`[SERVER]: ${msg}`))
+  .client((msg) => console.log(`[CLIENT]: ${msg}`))
+```
+
+## Implementation Patterns
+
+### Progressive Enhancement
+
+```tsx
+// Component works without JS, enhanced with JS
+function SearchForm() {
+  const [query, setQuery] = useState('')
+
+  return (
+    <form action="/search" method="get">
+      <input
+        name="q"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <ClientOnly fallback={<button type="submit">Search</button>}>
+        <SearchButton onSearch={() => search(query)} />
+      </ClientOnly>
+    </form>
+  )
+}
+```
+
+### Environment-Aware Storage
+
+```tsx
+const storage = createIsomorphicFn()
+  .server((key: string) => {
+    // Server: File-based cache
+    const fs = require('node:fs')
+    return JSON.parse(fs.readFileSync('.cache', 'utf-8'))[key]
+  })
+  .client((key: string) => {
+    // Client: localStorage
+    return JSON.parse(localStorage.getItem(key) || 'null')
+  })
+```
+
+## Common Problems
+
+### Environment Variable Exposure
+
+```tsx
+// ❌ Exposes to client bundle
+const apiKey = process.env.SECRET_KEY
+
+// ✅ Server-only access
+const apiKey = createServerOnlyFn(() => process.env.SECRET_KEY)
+```
+
+### Incorrect Loader Assumptions
+
+```tsx
+// ❌ Assuming loader is server-only
+export const Route = createFileRoute('/users')({
+  loader: () => {
+    // This runs on BOTH server and client!
+    const secret = process.env.SECRET // Exposed to client
+    return fetch(`/api/users?key=${secret}`)
+  },
+})
+
+// ✅ Use server function for server-only operations
+const getUsersSecurely = createServerFn().handler(() => {
+  const secret = process.env.SECRET // Server-only
+  return fetch(`/api/users?key=${secret}`)
+})
+
+export const Route = createFileRoute('/users')({
+  loader: () => getUsersSecurely(), // Isomorphic call to server function
+})
+```
+
+### Hydration Mismatches
+
+```tsx
+// ❌ Different content server vs client
+function CurrentTime() {
+  return <div>{new Date().toLocaleString()}</div>
+}
+
+// ✅ Consistent rendering
+function CurrentTime() {
+  const [time, setTime] = useState<string>()
+
+  useEffect(() => {
+    setTime(new Date().toLocaleString())
+  }, [])
+
+  return <div>{time || 'Loading...'}</div>
+}
+```
+
+## Production Checklist
+
+- [ ] **Bundle Analysis**: Verify server-only code isn't in client bundle
+- [ ] **Environment Variables**: Ensure secrets use `createServerOnlyFn()` or `createServerFn()`
+- [ ] **Loader Logic**: Remember loaders are isomorphic, not server-only
+- [ ] **ClientOnly Fallbacks**: Provide appropriate fallbacks to prevent layout shift
+- [ ] **Error Boundaries**: Handle server/client execution errors gracefully
+
+## Related Resources
+
+- [Execution Model](/start/framework/react/guide/execution-model) - Core concepts and architectural patterns
+- [Server Functions](/start/framework/react/guide/server-functions) - Deep dive into server function patterns
+- [Environment Variables](/start/framework/react/guide/environment-variables) - Secure environment variable handling
+- [Middleware](/start/framework/react/guide/middleware) - Server function middleware patterns
diff --git a/mintlify/start/framework/react/guide/css-styling.md b/mintlify/start/framework/react/guide/css-styling.md
new file mode 100644
index 000000000..08a97af58
--- /dev/null
+++ b/mintlify/start/framework/react/guide/css-styling.md
@@ -0,0 +1,256 @@
+---
+id: css-styling
+title: CSS Styling
+---
+
+TanStack Start supports the CSS patterns your bundler supports, and adds SSR-aware route asset discovery on top.
+
+Use this guide to choose how to import CSS in a React Start app, and how to configure production CSS behavior such as SSR stylesheet links, Early Hints, and CSS inlining.
+
+## Choose a CSS Pattern
+
+Start handles CSS differently depending on how you import it.
+
+| Pattern                                  | Use it when                                           | SSR behavior                                          | Production features                                 |
+| ---------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+| `import css from './app.css?url'`        | You want to put a stylesheet URL in route `head()`    | Rendered from `head().links`                          | Dynamic Early Hints                                 |
+| `import './global.css'`                  | You want global CSS attached to a route chunk         | Discovered from the Start manifest for matched routes | Static Early Hints, `transformAssets`, CSS inlining |
+| `import styles from './card.module.css'` | You want scoped class names attached to a route chunk | Discovered from the Start manifest for matched routes | Static Early Hints, `transformAssets`, CSS inlining |
+
+Use `?url` when the stylesheet is part of your route head output. Use side-effect CSS imports or CSS modules when you want Start to treat the generated stylesheet as a route asset.
+
+## Use `?url` for Explicit Stylesheet Links
+
+Import CSS with `?url` when you want the bundler to return the emitted stylesheet URL and you want to render the `<link rel="stylesheet">` yourself.
+
+```tsx
+// src/routes/__root.tsx
+/// <reference types="vite/client" />
+import { createRootRoute } from '@tanstack/react-router'
+import appCss from '../styles/app.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+})
+```
+
+This pattern is useful for explicit global stylesheets, especially when you already want the stylesheet to be part of route `head()` output. The CSS file is emitted by the bundler, and `HeadContent` places the stylesheet link in the final document.
+
+`?url` stylesheet links are route head output, not Start manifest-managed stylesheet assets. Because of that:
+
+- They are discovered when route `head()` runs.
+- They can appear in the `dynamic` Early Hints phase as route `head().links` entries.
+- They are not rewritten by Start's runtime [`transformAssets`](/start/framework/react/guide/cdn-asset-urls) option.
+- They are not inlined by Start CSS inlining.
+
+Use this pattern when explicit control of the route head is more important than Start's manifest-managed CSS features.
+
+## Use Side-Effect Imports for Global Route CSS
+
+Import CSS without assigning it when you want global selectors, global class names, or CSS custom properties to be bundled with a route or component module.
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import '../styles/global.css'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return <div className="global-container">Global CSS</div>
+}
+```
+
+The class names remain global. Start discovers the generated CSS asset from the client build and attaches it to the matching route manifest entry. During SSR, `HeadContent` renders stylesheet links for the matched route tree, so the page is styled before hydration.
+
+Where you import the CSS controls when it is loaded:
+
+- Import in the root route or app shell to apply it to every page.
+- Import in a layout route to apply it to that layout and its child routes.
+- Import in a leaf route to load it only when that route is matched.
+- Import from a component loaded with `import()` or `React.lazy` only when the CSS is not needed for the initial route render.
+
+CSS imported from an async component loads with that async chunk. It is not part of Start's static route manifest for the initial route match, so `HeadContent` does not render it as an initial SSR stylesheet link, and it is not available for static Early Hints or CSS inlining.
+
+Side-effect CSS imports are a good fit for app-wide CSS resets, design tokens, global utility classes, and route-level global styles.
+
+## Use CSS Modules for Scoped Route CSS
+
+CSS modules work like side-effect CSS imports from Start's route asset discovery perspective, but the class names are scoped by the bundler.
+
+```tsx
+// src/routes/modules.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import styles from '../styles/card.module.css'
+
+export const Route = createFileRoute('/modules')({
+  component: Modules,
+})
+
+function Modules() {
+  return <div className={styles.card}>Scoped CSS module</div>
+}
+```
+
+The generated stylesheet is discovered from the route chunk graph, linked during SSR for matched routes, and loaded during client navigation when the route chunk loads.
+
+Use CSS modules for route-local or component-local styling when you want scoped class names and Start-managed stylesheet assets.
+
+## Know When CSS Is Discovered
+
+The import pattern you choose controls when Start can see the stylesheet.
+
+CSS from side-effect imports and CSS modules is discovered at build time. Start inspects the client build output, records CSS emitted for route chunks, and uses that manifest during SSR. Because Start already knows about these stylesheets before route loaders run, they can be sent in the `static` Early Hints phase as `rel=preload; as=style` links.
+
+CSS imported with `?url` is different. Start sees that stylesheet only when route `head()` returns the link, which happens after `router.load()`. These links can still be sent as Early Hints, but only in the `dynamic` phase with other supported route `head().links` entries.
+
+Use this rule of thumb:
+
+- Use side-effect imports or CSS modules when you want Start to discover route CSS as early as possible.
+- Use `?url` when you want explicit route `head()` control and are comfortable with later discovery.
+- Use `allLinks` in the `dynamic` phase when you want one combined Early Hints response with both static manifest assets and dynamic head links.
+- If CSS inlining is enabled, inlined manifest-managed stylesheet assets are skipped by static Early Hints because they are embedded in the HTML.
+
+See the [Early Hints guide](/start/framework/react/guide/early-hints) for the callback and response header APIs.
+
+## Inline Route CSS in Production
+
+> **Experimental:** CSS inlining is experimental and subject to change.
+
+CSS inlining embeds Start manifest-managed route CSS directly into the server-rendered HTML response for production builds. This can improve the first render by avoiding blocking stylesheet requests for the CSS needed by the initial route match.
+
+Enable it with `server.build.inlineCss` in the Start plugin options. Passing `true` is shorthand for `{ enabled: true, transformAssets: false }`.
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      server: {
+        build: {
+          inlineCss: true,
+        },
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      server: {
+        build: {
+          inlineCss: true,
+        },
+      },
+    }),
+  ],
+})
+```
+
+
+
+This option only affects production builds. Development mode keeps using Start's normal development CSS handling.
+
+CSS inlining applies to CSS discovered from side-effect imports and CSS modules, because those stylesheets are Start manifest assets. It does not inline CSS imported with `?url` and returned from `head().links`, because those links are dynamic route head output rather than manifest-managed stylesheet assets.
+
+When CSS inlining is enabled, Start still emits CSS files in the client build. It only changes the SSR document: stylesheet links managed by the Start manifest are replaced with a single inline `<style>` tag for the matched routes. The inline style is preserved during hydration to avoid duplicate stylesheet links and hydration mismatches.
+
+### Control Inlining at Runtime
+
+You can control inlining per request in your server entry. This only affects builds created with `server.build.inlineCss` enabled.
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+  inlineCss: ({ request }) => request.headers.get('x-inline-css') !== 'false',
+})
+
+export default createServerEntry({ fetch: handler })
+```
+
+For custom runtime wrappers, `handler(request, { inlineCss })` overrides the handler-level `inlineCss` setting for that request.
+
+```tsx
+export default createServerEntry({
+  fetch(request) {
+    return handler(request, {
+      inlineCss: request.headers.get('x-inline-css') !== 'false',
+    })
+  },
+})
+```
+
+### URL Rebasing
+
+If an inlined stylesheet contains relative `url(...)` or `@import` references, Start rebases them relative to the emitted CSS asset URL before embedding the CSS.
+
+For example, when the generated stylesheet is served from `/_build/assets/dashboard.css`:
+
+```css
+.card {
+  background-image: url('./dot.svg');
+}
+```
+
+Start embeds it as:
+
+```css
+.card {
+  background-image: url(/_build/assets/dot.svg);
+}
+```
+
+Root-relative URLs are left unchanged at build time. Absolute URLs, protocol-relative URLs, data URLs, and hash references are also left unchanged.
+
+If you need to rewrite CSS-internal URLs at runtime, such as prepending a CDN origin to fonts or background images, opt into CSS URL templates with `server.build.inlineCss: { enabled: true, transformAssets: true }`. See [Transform URLs Inside Inlined CSS](/start/framework/react/guide/cdn-asset-urls#transform-urls-inside-inlined-css) for the detailed `transformAssets` behavior.
+
+### Tradeoffs
+
+CSS inlining is useful when the matched route CSS is small enough that putting it in the HTML is cheaper than an extra stylesheet request. It can be less effective when your initial route loads a large global stylesheet that would otherwise be cached as a separate file.
+
+Consider these tradeoffs before enabling it:
+
+- The HTML response becomes larger.
+- First-load CSS can no longer be cached independently from the HTML response.
+- Strict Content Security Policy setups must allow the inline style. Configure `ssr.nonce` on the router so `HeadContent` can apply the nonce to rendered `<style>` tags, including inlined CSS.
+- CSS files are still emitted for client navigation and browser caching after the initial response.
+
+Use CSS inlining when the reduced request overhead is worth the larger HTML response for your deployment and route structure.
+
+## Configure Production CSS Behavior
+
+Use these options together based on what you need in production.
+
+| Need                                      | Use                                                  |
+| ----------------------------------------- | ---------------------------------------------------- |
+| Explicit stylesheet links in route head   | `?url` imports returned from `head().links`          |
+| SSR links for route CSS                   | Side-effect imports or CSS modules                   |
+| Earliest CSS Early Hints                  | Side-effect imports or CSS modules with static hints |
+| Redirect-safe stylesheet Early Hints      | `?url` imports with dynamic hints                    |
+| Fewer blocking CSS requests on first load | `server.build.inlineCss`                             |
+| Runtime CDN rewriting for Start assets    | [`transformAssets`](/start/framework/react/guide/cdn-asset-urls)                |
diff --git a/mintlify/start/framework/react/guide/databases.md b/mintlify/start/framework/react/guide/databases.md
new file mode 100644
index 000000000..07c695b46
--- /dev/null
+++ b/mintlify/start/framework/react/guide/databases.md
@@ -0,0 +1,108 @@
+---
+id: databases
+title: Databases
+---
+
+Databases are at the core of any dynamic application, providing the necessary infrastructure to store, retrieve, and manage data. TanStack Start makes it easy to integrate with a variety of databases, offering a flexible approach to managing your application's data layer.
+
+## What should I use?
+
+TanStack Start is **designed to work with any database provider**, so if you already have a preferred database system, you can integrate it with TanStack Start using the provided full-stack APIs. Whether you're working with SQL, NoSQL, or other types of databases, TanStack Start can handle your needs.
+
+## How simple is it to use a database with TanStack Start?
+
+Using a database with TanStack Start is as simple as calling into your database's adapter/client/driver/service from a TanStack Start server function or server route.
+
+Here's an abstract example of how you might connect with a database and read/write to it:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+const db = createMyDatabaseClient()
+
+export const getUser = createServerFn().handler(async ({ context }) => {
+  const user = await db.getUser(context.userId)
+  return user
+})
+
+export const createUser = createServerFn({ method: 'POST' }).handler(
+  async ({ data }) => {
+    const user = await db.createUser(data)
+    return user
+  },
+)
+```
+
+This is obviously contrived, but it demonstrates that you can use literally any database provider with TanStack Start as long as you can call into it from a server function or server route.
+
+## Recommended Database Providers
+
+While TanStack Start is designed to work with any database provider, we highly recommend considering one of our vetted partner database providers [Neon](https://neon.tech?utm_source=tanstack) or [Convex](https://convex.dev?utm_source=tanstack). They have been vetted by TanStack to match our quality, openness, and performance standards and are both excellent choices for your database needs.
+
+## What is Neon?
+
+<a href="https://neon.tech?utm_source=tanstack" alt="Neon Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/neon-dark.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/neon-light.svg" width="280" />
+    <img alt="Neon logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/neon-light.svg" width="280" />
+  </picture>
+</a>
+
+Neon is a fully managed serverless PostgreSQL with a generous free tier. It separates storage and compute to offer autoscaling, branching, and bottomless storage. With Neon, you get all the power and reliability of PostgreSQL combined with modern cloud capabilities, making it perfect for TanStack Start applications.
+
+Key features that make Neon stand out:
+
+- Serverless PostgreSQL that scales automatically
+- Database branching for development and testing
+- Built-in connection pooling
+- Point-in-time restore
+- Web-based SQL editor
+- Bottomless storage
+  <br />
+  <br />
+- To learn more about Neon, visit the [Neon website](https://neon.tech?utm_source=tanstack)
+- To sign up, visit the [Neon dashboard](https://console.neon.tech/signup?utm_source=tanstack)
+
+## What is Convex?
+
+<a href="https://convex.dev?utm_source=tanstack" alt="Convex Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/convex-white.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/convex-color.svg" width="280" />
+    <img alt="Convex logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/convex-color.svg" width="280" />
+  </picture>
+</a>
+
+Convex is a powerful, serverless database platform that simplifies the process of managing your application's data. With Convex, you can build full-stack applications without the need to manually manage database servers or write complex queries. Convex provides a real-time, scalable, and transactional data backend that seamlessly integrates with TanStack Start, making it an excellent choice for modern web applications.
+
+Convex's declarative data model and automatic conflict resolution ensure that your application remains consistent and responsive, even at scale. It's designed to be developer-friendly, with a focus on simplicity and productivity.
+
+- To learn more about Convex, visit the [Convex website](https://convex.dev?utm_source=tanstack)
+- To sign up, visit the [Convex dashboard](https://dashboard.convex.dev/signup?utm_source=tanstack)
+
+## What is Prisma Postgres?
+
+<a href="https://www.prisma.io?utm_source=tanstack&via=tanstack" alt="Prisma Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/prisma-dark.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/prisma-light.svg" width="280" />
+    <img alt="Prisma logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/prisma-light.svg" width="280" />
+  </picture>
+</a>
+
+Instant Postgres, Zero Setup: Get a production-ready Postgres database in seconds, then dive straight back into code. We handle connections, scaling, and turning knobs so your flow never breaks. Blends perfectly with TanStack Start.
+
+- Edge-optimized: Local region routing means lower latency and fewer hops. Even complex queries are one fast round trip.
+- Fits your stack: Works with your frameworks, libraries, and tools for a smooth DX.
+- Web UI: A hosted interface to inspect, manage, and query data with your team.
+- Auto-scaling: Grows from zero to millions of users without cold starts or manual tuning.
+- Unikernel isolation: Each DB runs as its own unikernel for security, speed, and efficiency.
+  <br />
+  <br />
+- To learn more about Prisma Postgres, visit the [Prisma website](https://www.prisma.io?utm_source=tanstack&via=tanstack)
+- To sign up, visit the [Prisma Console](https://console.prisma.io/sign-up?utm_source=tanstack&via=tanstack)
+
+## Documentation & APIs
+
+Documentation for integrating different databases with TanStack Start is coming soon! In the meantime, keep an eye on our examples and guide to learn how to fully leverage your data layer across your TanStack Start application.
diff --git a/mintlify/start/framework/react/guide/deferred-hydration.md b/mintlify/start/framework/react/guide/deferred-hydration.md
new file mode 100644
index 000000000..1dc4760fa
--- /dev/null
+++ b/mintlify/start/framework/react/guide/deferred-hydration.md
@@ -0,0 +1,745 @@
+---
+id: deferred-hydration
+title: Deferred Hydration
+---
+
+> Deferred hydration is experimental
+
+On an initial page load, TanStack Start server-renders your page so the browser
+can show useful HTML quickly. Hydration is the client-side work that turns that
+initial HTML document into an interactive app. It loads and executes JavaScript,
+runs components, attaches event handlers, and reconnects the existing DOM to
+React.
+
+Deferred hydration applies to this initial document hydration work. After the
+app is already running, subsequent client-side navigations render through the
+client app; there is no initial server HTML for TanStack Start to preserve.
+
+By default, TanStack Start hydrates the full document. That is usually the
+simplest and safest behavior, but large pages can spend meaningful startup time
+loading JavaScript and hydrating parts of the page that the user may not need
+right away.
+
+Deferred hydration lets you mark selected parts of a page as "not interactive
+yet". The server HTML remains in the document, but TanStack Start waits to
+hydrate that boundary until a strategy says it is time. By default, the compiler
+also moves the boundary children into a separate JavaScript chunk so the browser
+can delay loading that code too.
+
+Use deferred hydration when a part of the page should be visible, styled, and
+indexable immediately, but does not need to be interactive immediately.
+
+## Add A Deferred Boundary
+
+Use `Hydrate` with a strategy from `@tanstack/react-start/hydration`:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+
+export function ProductPage() {
+  return (
+    <Hydrate when={visible({ rootMargin: '400px' })}>
+      <Reviews />
+    </Hydrate>
+  )
+}
+```
+
+On the initial server response, `Reviews` is still rendered to HTML. During the
+initial client hydration pass, that HTML is preserved but the `Reviews` React
+tree does not hydrate yet. When the boundary comes within `400px` of the
+viewport, TanStack Start loads the deferred child chunk and hydrates the
+boundary.
+
+`Hydrate` only preserves server HTML that exists in the initial document. If the
+same boundary first mounts later, for example after client-side navigation,
+there is no server HTML to preserve, so it renders normally on the client.
+
+## Choose What To Defer
+
+The right boundary depends on your page, your product priorities, and real user
+behavior. TanStack Start cannot know which parts of your page are safe to delay.
+
+Good candidates are usually SSR content that is not needed for immediate
+interaction:
+
+- Below-the-fold reviews, comments, product details, related content, or long
+  marketing sections.
+- Rich widgets such as maps, charts, carousels, video players, editors, or
+  embeds.
+- Panels that are activated by intent, such as filters, preview panes, or
+  contextual tools.
+- UI that only matters for a matching media query.
+- Static server-rendered content that should not hydrate on the initial
+  document.
+
+Poor candidates are parts of the page users may need immediately:
+
+- Primary navigation, route chrome, search boxes, and account controls.
+- Above-the-fold forms, add-to-cart buttons, checkout actions, or consent
+  controls.
+- The interactive part of the LCP or hero area when users may click it
+  immediately.
+- Accessibility-critical controls that must be keyboard-ready as soon as the
+  page appears.
+- Components whose props, context, or shared state are expected to update
+  immediately after app startup.
+
+Measure each boundary. A useful boundary reduces startup JavaScript or hydration
+work without making expected interactions feel late.
+
+## Comparison To Astro Islands
+
+Astro starts static and asks "what should come alive?" Each answer is an
+isolated framework root dropped into HTML. Islands are independent runtimes
+sharing a DOM.
+
+TanStack Start starts fully interactive and asks "what can wait?" The whole
+document hydrates as one React tree by default; `Hydrate` boundaries are gates
+inside that tree. Context, state, and events flow through normally, and
+hydration is parent-first.
+
+Same trigger vocabulary, different substrate: Astro composes runtimes, Start
+schedules one. That is why Start gets `interaction()`, `condition()`, and intent
+bubbling, and why Astro gets multi-framework.
+
+## Comparison To React Selective Hydration
+
+React's selective hydration controls the order in which server-rendered
+boundaries hydrate. Deferred hydration controls whether and when each
+boundary hydrates at all.
+
+When React hydrates a streaming SSR page, every server-rendered
+`<Suspense>` boundary will eventually hydrate. Selective hydration just
+decides the order: each boundary hydrates as soon as its code arrives,
+and React jumps a boundary to the front of the queue if the user clicks
+inside it. The work is fixed by what the server rendered; React
+schedules it to feel responsive.
+
+Deferred hydration changes what is in the queue in the first place. A
+`Hydrate` boundary names a condition — `visible()`, `idle()`,
+`interaction()`, `media()`, `condition()`, or `never()` — and the
+boundary stays as static server HTML until that condition fires. By
+default the child JavaScript also moves into a separate chunk that the
+browser does not download until the boundary is about to hydrate. If the
+condition never fires, the boundary never hydrates and its code is never
+fetched.
+
+The two compose. A `Hydrate` boundary decides whether and when React
+starts hydrating a subtree; once it opens, anything inside it (including
+`<Suspense>` boundaries) flows back into React's normal hydration
+scheduler. Use `<Suspense>` when hydration must happen and you want React
+to prioritize it well. Use `Hydrate` when hydration might not need to
+happen at all.
+
+## The Three Decisions
+
+Each `Hydrate` boundary has three performance decisions:
+
+| Decision    | Option     | What it controls                                                   |
+| ----------- | ---------- | ------------------------------------------------------------------ |
+| Hydration   | `when`     | When the preserved server HTML becomes interactive.                |
+| Code split  | `split`    | Whether the children move into a generated deferred child chunk.   |
+| Preparation | `prefetch` | Whether work starts before the `when` strategy hydrates the child. |
+
+### `when`: decide when the boundary hydrates
+
+`when` is required. Pass a strategy object for the common case:
+
+```tsx
+<Hydrate when={visible()}>
+  <Reviews />
+</Hydrate>
+```
+
+Pass a function when the decision needs browser-only information:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { interaction, visible } from '@tanstack/react-start/hydration'
+
+export function RecommendationsBoundary() {
+  return (
+    <Hydrate
+      when={() =>
+        navigator.connection?.saveData
+          ? interaction({ events: 'click' })
+          : visible()
+      }
+    >
+      <Recommendations />
+    </Hydrate>
+  )
+}
+```
+
+The function form is evaluated only on the client and must synchronously return
+a strategy. Use `never()` when you intentionally want the initial server HTML to
+stay static.
+
+### `split`: decide whether to create a separate child chunk
+
+By default, `Hydrate` splits the children into a generated child chunk:
+
+```tsx
+<Hydrate when={visible()}>
+  <HeavyWidget />
+</Hydrate>
+```
+
+This delays both hydration work and child JavaScript loading.
+
+Set `split={false}` when the child code is small or already needed elsewhere,
+and you only want to delay hydration work:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { idle } from '@tanstack/react-start/hydration'
+
+export function SmallWidgetBoundary() {
+  return (
+    <Hydrate when={idle()} split={false}>
+      <SmallWidget />
+    </Hydrate>
+  )
+}
+```
+
+### `prefetch`: decide whether to start loading before hydration
+
+`prefetch` starts loading before the boundary hydrates. It has two forms:
+
+| Form                | Example                             | Use it for                                                     |
+| ------------------- | ----------------------------------- | -------------------------------------------------------------- |
+| Prefetch strategy   | `prefetch={idle()}`                 | Preloading the generated child chunk before hydration.         |
+| Procedural prefetch | `prefetch={async (ctx) => { ... }}` | Preloading the child chunk plus data or other async resources. |
+
+Both forms start work early, but they do not change when the boundary becomes
+interactive. That is still controlled by `when`.
+
+A prefetch strategy is the small, declarative form:
+
+```tsx
+import { idle, interaction, visible } from '@tanstack/react-start/hydration'
+
+<Hydrate when={interaction()} prefetch={idle()}>
+  <ProductRecommendations />
+</Hydrate>
+
+<Hydrate
+  when={interaction()}
+  prefetch={visible({ rootMargin: '1200px' })}
+>
+  <RelatedProducts />
+</Hydrate>
+```
+
+Strategy-form `prefetch` downloads the generated child chunk before the boundary
+hydrates. This can make the later hydration trigger feel faster, because the
+browser may already have the chunk by the time `when` resolves. Generated child
+chunks only exist when `split` is enabled, so TypeScript rejects strategy-form
+`prefetch` when `split={false}`.
+
+Use procedural prefetch when you need custom work:
+
+```tsx
+import { useQueryClient } from '@tanstack/react-query'
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+
+function DeferredReviews() {
+  const queryClient = useQueryClient()
+
+  return (
+    <Hydrate
+      when={visible()}
+      prefetch={async ({ preload }) => {
+        await preload()
+        await queryClient.prefetchQuery(reviewsQueryOptions)
+      }}
+    >
+      <Reviews />
+    </Hydrate>
+  )
+}
+```
+
+Procedural prefetch also works with `split={false}`. In that case, `preload()`
+is a resolved no-op, but the function can still prepare data or other
+resources.
+
+## Common Recipes
+
+### Hydrate below-the-fold SSR content
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+
+export function ProductPage() {
+  return (
+    <>
+      <ProductHero />
+      <BuyBox />
+
+      <Hydrate when={visible({ rootMargin: '800px' })}>
+        <Reviews />
+      </Hydrate>
+    </>
+  )
+}
+```
+
+Use a positive `rootMargin` when the boundary should hydrate before it actually
+enters the viewport.
+
+### Download the child chunk before it is needed
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { idle, visible } from '@tanstack/react-start/hydration'
+
+export function ReviewsBoundary() {
+  return (
+    <Hydrate when={visible({ rootMargin: '200px' })} prefetch={idle()}>
+      <Reviews />
+    </Hydrate>
+  )
+}
+```
+
+This keeps the boundary non-interactive until it is close to the viewport, but
+starts loading the child chunk during idle time.
+
+### Keep a widget cold until user intent
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { interaction, visible } from '@tanstack/react-start/hydration'
+
+export function RecommendationsBoundary() {
+  return (
+    <Hydrate
+      when={interaction({ events: ['focusin', 'click'] })}
+      prefetch={visible({ rootMargin: '1200px' })}
+    >
+      <RecommendationCarousel />
+    </Hydrate>
+  )
+}
+```
+
+This is useful for expensive controls that are visible or nearby, but only
+matter when the user reaches for them.
+
+### Delay hydration without code splitting
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { idle } from '@tanstack/react-start/hydration'
+
+export function BadgeBoundary() {
+  return (
+    <Hydrate when={idle()} split={false}>
+      <SmallPersonalizedBadge />
+    </Hydrate>
+  )
+}
+```
+
+Use this when the JavaScript is already part of the startup bundle or when a
+separate child chunk would not be worth it.
+
+### Keep initial SSR HTML static
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { never } from '@tanstack/react-start/hydration'
+
+export function MarketingPage() {
+  return (
+    <Hydrate when={never()}>
+      <StaticTrustBadges />
+    </Hydrate>
+  )
+}
+```
+
+`never()` preserves the existing server HTML and does not hydrate the boundary
+during initial document hydration. If the same boundary mounts later during
+client-side navigation, it renders normally because there is no initial server
+HTML to preserve. `never()` cannot be used as a prefetch strategy.
+
+### Reuse Hydrate props
+
+Use `HydrateOptions` for reusable objects that you spread into `Hydrate`:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import type { HydrateOptions } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+
+const belowFoldProps = {
+  when: () => visible({ rootMargin: '800px' }),
+} satisfies HydrateOptions
+
+export function Page() {
+  return (
+    <Hydrate
+      {...belowFoldProps}
+      prefetch={async ({ preload }) => {
+        await preload()
+      }}
+    >
+      <Widget />
+    </Hydrate>
+  )
+}
+```
+
+Inline `when` and `prefetch` functions are supported. You do not need to wrap
+them in `useCallback`; TanStack Start keeps the latest callback internally and
+does not re-register hydration listeners just because a function identity
+changed. If the meaning of a boundary changes, use a normal React `key` to
+create a new boundary.
+
+## Hydrate Props Reference
+
+`Hydrate` accepts these props:
+
+| Prop         | Type                                                     | Notes                                                                                                                                                     |
+| ------------ | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `when`       | `HydrationStrategy \| () => HydrationStrategy`           | Required. Controls when the boundary hydrates. Function form is client-only and synchronous.                                                              |
+| `prefetch`   | `HydrationPrefetchStrategy \| HydrationPrefetchFunction` | Optional. Strategy form preloads the split child chunk. Function form can preload chunks, data, or other resources, and can be used with `split={false}`. |
+| `split`      | `boolean`                                                | Defaults to `true`. Set literal `false` to disable compiler extraction and only defer hydration work.                                                     |
+| `fallback`   | `ReactNode`                                              | Client-only loading UI for boundaries that mount after the app has already hydrated and then suspend on the child chunk or child `Suspense`.              |
+| `onHydrated` | `() => void`                                             | Fires once after the boundary has hydrated on the client.                                                                                                 |
+
+## Strategy Reference
+
+Import strategies from `@tanstack/react-start/hydration`.
+
+| Strategy        | Behavior                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------ |
+| `load()`        | Hydrates as soon as the app hydrates.                                                      |
+| `idle()`        | Hydrates in `requestIdleCallback`, or after `timeout` when idle callbacks are unavailable. |
+| `visible()`     | Hydrates when the boundary marker enters the viewport.                                     |
+| `media()`       | Hydrates when the media query matches.                                                     |
+| `interaction()` | Hydrates on configured interaction intent events.                                          |
+| `condition()`   | Hydrates once the condition is truthy.                                                     |
+| `never()`       | Never hydrates the initial server-rendered boundary.                                       |
+
+Strategy options:
+
+| Strategy      | Options                                                                                 |
+| ------------- | --------------------------------------------------------------------------------------- |
+| `idle`        | `{ timeout?: number }`, defaults to `2000`.                                             |
+| `visible`     | `{ rootMargin?: string; threshold?: number \| Array<number> }`, default margin `600px`. |
+| `media`       | Query string, for example `media('(min-width: 800px)')`.                                |
+| `interaction` | `{ events?: supported event or readonly array of supported events }`.                   |
+| `condition`   | Boolean or boolean-returning function.                                                  |
+
+Supported interaction events are `auxclick`, `click`, `contextmenu`,
+`dblclick`, `focusin`, `keydown`, `keyup`, `mousedown`, `mouseenter`,
+`mouseover`, `mouseup`, `pointerdown`, `pointerenter`, `pointerover`, and
+`pointerup`.
+
+The default `interaction()` event list is `pointerenter`, `focusin`,
+`pointerdown`, and `click`. Use `events` when a boundary should listen to a
+different event or a smaller set:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { interaction } from '@tanstack/react-start/hydration'
+
+<Hydrate when={interaction({ events: 'dblclick' })}>
+  <PreviewEditor />
+</Hydrate>
+
+<Hydrate when={interaction({ events: ['contextmenu', 'dblclick'] })}>
+  <ContextMenuEditor />
+</Hydrate>
+```
+
+After a `condition()` boundary hydrates, it stays hydrated even if the condition
+later becomes false:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { condition } from '@tanstack/react-start/hydration'
+
+export function CartRecommendationsBoundary() {
+  return (
+    <Hydrate when={condition(isCartOpen)}>
+      <CartRecommendations />
+    </Hydrate>
+  )
+}
+```
+
+## Prefetch Reference
+
+Procedural prefetch receives a context object:
+
+| Property            | Meaning                                                                                 |
+| ------------------- | --------------------------------------------------------------------------------------- |
+| `preload()`         | Loads the compiler-generated child chunk. It resolves immediately when `split={false}`. |
+| `waitFor(strategy)` | Waits for a prefetch strategy, the hydration trigger, or abort.                         |
+| `signal`            | `AbortSignal` for cancelable async work such as `fetch`.                                |
+| `element`           | Boundary marker element for custom observers or DOM measurements.                       |
+
+`waitFor(strategy)` resolves with:
+
+| Result       | Meaning                                                             |
+| ------------ | ------------------------------------------------------------------- |
+| `'prefetch'` | The supplied prefetch strategy resolved normally.                   |
+| `'hydrate'`  | The boundary's hydration trigger fired first. Do required work now. |
+| `'abort'`    | The boundary unmounted or the prefetch lifecycle was abandoned.     |
+
+The promise returned from procedural prefetch is meaningful. Awaited work blocks
+hydration if the `when` strategy resolves before the prefetch function
+finishes:
+
+```tsx
+<Hydrate
+  when={visible()}
+  prefetch={async ({ preload }) => {
+    await preload()
+  }}
+>
+  <Widget />
+</Hydrate>
+```
+
+Fire-and-forget work does not block hydration:
+
+```tsx
+<Hydrate
+  when={visible()}
+  prefetch={({ preload }) => {
+    void preload()
+  }}
+>
+  <Widget />
+</Hydrate>
+```
+
+Use this distinction deliberately. Await when the resource is required for the
+first hydrated render. Fire and forget when the resource is only a helpful
+head start.
+
+## Fallbacks
+
+`fallback` is not the placeholder for the initial server-rendered HTML. On the
+initial page load, TanStack Start keeps the existing server HTML in place until
+the boundary hydrates:
+
+```tsx
+<Hydrate when={visible()} fallback={<ReviewsSkeleton />}>
+  <Reviews />
+</Hydrate>
+```
+
+In that example, if `Reviews` was present in the initial HTML document, users
+see the server-rendered reviews. They do not see `ReviewsSkeleton` while the
+boundary is waiting for `visible()`.
+
+`fallback` is used when the boundary first appears after the app is already
+running and there is no existing server HTML for that boundary. Common examples
+include client-side navigation, conditionally showing a panel, or opening a tab
+whose contents were not in the initial document. In those cases, the boundary
+renders on the client, and `fallback` can show while the generated child chunk
+or a child `Suspense` is still loading.
+
+With `never()`, initial server HTML remains static and `fallback` is not used.
+
+The compiler removes statically visible `fallback` props from the server bundle.
+Prefer passing `fallback` directly, in an inline object spread, or through a
+single-use `const` object spread so server builds can strip that UI.
+
+## Correctness And Updates
+
+Deferred hydration is a performance hint for React's initial hydration work.
+React may hydrate a deferred boundary earlier than its strategy would normally
+allow if state, props, context, or store updates outside the boundary require
+React to reconcile inside it before the gate opens. This preserves correctness
+and avoids showing stale server HTML after the surrounding app has changed.
+
+`never()` is the exception for initial document hydration. Treat it as
+intentionally static SSR HTML. Do not rely on parent updates to make a `never()`
+boundary interactive. If the same boundary mounts later during client-side
+navigation, it renders normally.
+
+## Nested Boundaries
+
+Nested boundaries hydrate parent-first. A child boundary can only hydrate after
+its ancestor boundaries have hydrated. That means non-interaction child
+strategies such as `visible`, `media`, `idle`, or `condition` cannot run while
+their parent boundary is still dehydrated.
+
+For example, a product page might defer the whole reviews section until it is
+near the viewport, while keeping heavier review tools cold until the user
+interacts with them:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+import { interaction, visible } from '@tanstack/react-start/hydration'
+
+export function ProductPage() {
+  return (
+    <>
+      <ProductHero />
+      <BuyBox />
+
+      <Hydrate when={visible({ rootMargin: '600px' })}>
+        <section aria-labelledby="reviews-heading">
+          <h2 id="reviews-heading">Reviews</h2>
+          <ReviewsSummary />
+          <ReviewsList />
+
+          <Hydrate when={interaction({ events: ['focusin', 'click'] })}>
+            <ReviewFilters />
+          </Hydrate>
+
+          <Hydrate when={interaction({ events: 'click' })}>
+            <WriteReviewForm />
+          </Hydrate>
+        </section>
+      </Hydrate>
+    </>
+  )
+}
+```
+
+In this example, scrolling near the reviews hydrates the parent first. Only
+after that can the nested interaction boundaries hydrate from focus or click.
+
+Interaction intent can also resolve an unresolved ancestor chain when the
+ancestor is itself waiting for interaction:
+
+```tsx
+<Hydrate when={interaction({ events: ['focusin', 'click'] })}>
+  <section aria-label="Review tools">
+    <ReviewSortSummary />
+
+    <Hydrate when={interaction({ events: 'click' })}>
+      <WriteReviewForm />
+    </Hydrate>
+  </section>
+</Hydrate>
+```
+
+If the first meaningful intent is a click inside `WriteReviewForm`, TanStack
+Start hydrates the unresolved parent chain and then redispatches a same-type
+event for the target boundary. Native listener payload details such as pointer
+coordinates are not guaranteed to be preserved. A `never()` ancestor still wins
+during initial hydration, so descendants under it remain non-interactive.
+
+## Preloading And CSS
+
+Transformed `Hydrate` JavaScript chunks are not modulepreloaded with the route.
+Without `prefetch`, the child chunk loads when the split boundary is ready to
+render. If that import suspends during client-side navigation or another
+client-only mount, the boundary's `fallback` is shown.
+
+CSS used by split, deferred, and `never()` boundaries is linked in the SSR HTML
+for the matched route. It is not deferred with the generated child JavaScript
+chunk, because the server-rendered HTML may need those styles before any
+JavaScript runs. This is route-level asset linking: if a route module contains a
+deferred boundary that imports CSS, that stylesheet can be linked for the route
+even when that boundary is hidden behind conditional rendering and does not
+appear in a particular response.
+
+## Extraction Limits
+
+Compiler-backed `Hydrate` splitting works by moving the boundary's children into
+a generated virtual module and rendering them through a lazy component. That
+gives TanStack Start a separate child chunk to load later, but it also means the
+compiler must be able to move the JSX safely.
+
+Keep the component you want to split directly inside `Hydrate`. If you hide it
+behind opaque `children` props, the compiler cannot statically extract those
+children into a generated child chunk at the usage site.
+
+The split boundary must use a statically imported `Hydrate` component from
+`@tanstack/react-start`. Renaming that import is supported:
+
+```tsx
+import { Hydrate as Deferred } from '@tanstack/react-start'
+
+export function ProductPage() {
+  return (
+    <Deferred when={visible()}>
+      <Reviews />
+    </Deferred>
+  )
+}
+```
+
+Assigning `Hydrate` to another component variable is not analyzed for splitting:
+
+```tsx
+import { Hydrate } from '@tanstack/react-start'
+
+const Deferred = Hydrate
+
+<Deferred when={visible()}>
+  <Reviews />
+</Deferred>
+```
+
+Render the imported `Hydrate` tag directly, use an import rename, or set
+`split={false}` when you need component indirection.
+
+Use the literal prop `split={false}` to opt out of extraction. Dynamic values
+such as `split={shouldSplit}` cannot be used to opt out at compile time.
+
+These patterns cannot be split:
+
+| Pattern                                  | Why it is rejected                                                                 | What to do instead                                                                   |
+| ---------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| Function-as-children                     | The compiler cannot move a render function and preserve the expected call pattern. | Use `split={false}` or move the rendered UI into a child component.                  |
+| Hook calls directly inside extracted JSX | Moving that JSX would move where the hook executes.                                | Move the hook call into a component inside the boundary, then render that component. |
+| `this` captures                          | Extracted function components cannot safely preserve class instance context.       | Wrap the UI in a function component or use `split={false}`.                          |
+| `super` captures                         | Extracted function components cannot preserve superclass access.                   | Wrap the UI in a function component or use `split={false}`.                          |
+
+This fails because `useThing()` would be moved into the generated component:
+
+```tsx
+<Hydrate when={idle()}>
+  <p>{useThing()}</p>
+</Hydrate>
+```
+
+Move the hook into a component instead:
+
+```tsx
+function ThingText() {
+  const thing = useThing()
+  return <p>{thing}</p>
+}
+
+export function ProductPage() {
+  return (
+    <Hydrate when={idle()}>
+      <ThingText />
+    </Hydrate>
+  )
+}
+```
+
+Values captured from the surrounding component can be passed into the generated
+child component, but keep the boundary simple. If extraction starts forcing
+complicated data flow, prefer a named child component and put the logic there.
+
+`fallback` stripping is intentionally conservative. The server build can strip
+directly passed fallback UI, inline object-spread fallback UI, and single-use
+`const` object-spread fallback UI. If fallback props are hidden behind dynamic
+spreads or shared objects, the compiler may keep them.
+
+You can extract reusable `when` and `prefetch` helpers today, but avoid hiding
+split boundaries behind plain wrapper components if you need child code
+splitting. A wrapper can defer hydration at runtime, but the compiler cannot
+reliably move call-site children into a separate chunk through arbitrary
+component indirection.
diff --git a/mintlify/start/framework/react/guide/early-hints.md b/mintlify/start/framework/react/guide/early-hints.md
new file mode 100644
index 000000000..418566acb
--- /dev/null
+++ b/mintlify/start/framework/react/guide/early-hints.md
@@ -0,0 +1,286 @@
+---
+id: early-hints
+title: Early Hints
+---
+
+# Early Hints
+
+> **Experimental:** Early Hints are experimental and subject to change.
+
+HTTP `103 Early Hints` lets your server tell the browser about important resources before the final HTML response is ready. TanStack Start can collect route assets and route `head().links`, then call your server entry so your runtime can send `103` responses.
+
+Start does not send Early Hints automatically. Each deployment platform exposes a different API for writing informational responses, so your server entry decides how to send them.
+
+## Choose How to Send Hints
+
+Most apps should choose one of these patterns.
+
+| Goal                              | Use                                             | Tradeoff                                    |
+| --------------------------------- | ----------------------------------------------- | ------------------------------------------- |
+| Send hints as early as possible   | `phase === 'static'` with `links`               | May send hints for a request that redirects |
+| Send only redirect-safe hints     | `phase === 'dynamic'` with `allLinks`           | Runs later, after route loading completes   |
+| Let a CDN generate Early Hints    | `responseLinkHeader`                            | Only safe for public, cache-stable links    |
+| Support runtimes without HTTP 103 | `responseLinkHeader` as a preload hint fallback | Does not hide server think time like `103`  |
+
+Browsers generally process only the first `103` response for a navigation. Write at most one Early Hints response per request.
+
+## Send Early Hints From Your Server Entry
+
+Add `onEarlyHints` in `src/server.ts`, then pass the serialized `links` to your runtime's Early Hints API.
+
+This example sends the earliest static hints:
+
+```tsx
+// src/server.ts
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request, {
+      onEarlyHints: ({ phase, links }) => {
+        if (phase !== 'static' || !links.length) return
+
+        // Send `links` with your runtime-specific 103 API.
+      },
+    })
+  },
+})
+```
+
+Start can call `onEarlyHints` more than once for a request. `links` only contains values that were not emitted in an earlier phase. `allLinks` contains all deduped values collected so far.
+
+## Choose When to Send Hints
+
+`onEarlyHints` can run in two phases.
+
+| Phase     | When it runs                                                  | What it contains                                                                                            |
+| --------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `static`  | After route matching, before the router loads the route       | Manifest-managed assets for the matched routes                                                              |
+| `dynamic` | After `router.load()` completes, unless the request redirects | Supported links returned by route `head()` functions, or an empty array when all hints were already emitted |
+
+Use `static` when you want the browser to start loading known route assets as soon as possible. Static hints can run before route `beforeLoad` functions, so they may be sent for a request that later redirects.
+
+Use `dynamic` when hints must be redirect-safe or loader-aware. If you want one `103` response that includes both static route assets and dynamic route `head()` links, wait for `dynamic` and send `allLinks`.
+
+```tsx
+onEarlyHints: ({ phase, allLinks }) => {
+  if (phase !== 'dynamic' || !allLinks.length) return
+
+  // Send one redirect-safe 103 with static and dynamic links.
+  // Use `allLinks` with your runtime-specific 103 API.
+}
+```
+
+The `dynamic` phase can run with empty `links`, so it can also be used as a post-load signal.
+
+## Add Dynamic Hints From Route Head
+
+Dynamic Early Hints come from supported route `head().links` entries after loaders have run.
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => getPost(params.postId),
+  head: ({ loaderData }) => ({
+    links: [
+      {
+        rel: 'preload',
+        href: loaderData.heroImageUrl,
+        as: 'image',
+      },
+    ],
+  }),
+})
+```
+
+The `dynamic` phase is skipped when `router.load()` produces a redirect.
+
+Route `head().links` entries with `rel: 'stylesheet'` are converted to `rel=preload; as=style` for Early Hints. This includes stylesheets you import with `?url` and return from route `head()`. See [CSS Styling](/start/framework/react/guide/css-styling#know-when-css-is-discovered) for how CSS import patterns affect when Start discovers stylesheets.
+
+## Use Response Link Headers as a Fallback
+
+You can also attach collected hints to the final HTML response's HTTP `Link` header.
+
+A response `Link` header does not hide server think time like a `103` response does, but the browser receives it before parsing the HTML body, so it can still start supported preloads and preconnects earlier than it would from HTML alone.
+
+Response `Link` headers are most useful when:
+
+- Your runtime cannot write `103` responses.
+- Your CDN can generate Early Hints from response `Link` headers.
+
+Start does not add response `Link` headers automatically. It cannot know whether those headers will be used only by the browser for the current response, stored by a shared cache, or replayed later as CDN-generated Early Hints.
+
+This example appends all collected static and dynamic links to non-redirect HTML responses:
+
+```tsx
+// src/server.ts
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request, {
+      responseLinkHeader: true,
+    })
+  },
+})
+```
+
+## Filter Links Before Sending Them to a CDN
+
+Some CDNs can read response `Link` headers, cache them, and emit their own `103` responses for later requests. For example, [Cloudflare Early Hints](https://developers.cloudflare.com/cache/advanced-configuration/early-hints/) can use `Link` headers from HTML responses.
+
+Only let a shared cache or CDN replay links that are public and cache-stable for the response's cache boundary.
+
+Good links to include are:
+
+- Static route JavaScript and CSS assets.
+- Public font, image, style, or fetch preloads with stable URLs.
+- Public preconnect origins.
+
+Avoid or filter links when they are:
+
+- Authenticated, private, or user-specific.
+- Signed, expiring, or otherwise short-lived.
+- Derived from cookies, headers, query strings, A/B tests, or user data, unless the cache key varies on the same inputs.
+- Unsafe to replay before your app authorizes the request.
+
+Cloudflare documents several important caveats: its Early Hints cache ignores query strings, it can emit cached hints before reaching your origin or Worker, and it only generates hints from selected final response status codes and `Link` relations.
+
+Because of those cache semantics, use response `Link` headers only when every emitted static or dynamic link is public and cache-stable for the request URI. Use `responseLinkHeader.filter` to remove links that are not safe for your cache boundary.
+
+For example, this keeps only static manifest assets:
+
+```tsx
+handler.fetch(request, {
+  responseLinkHeader: {
+    filter: ({ phase }) => phase === 'static',
+  },
+})
+```
+
+## How CDN Asset Rewrites Affect Hints
+
+Static Early Hints are collected from the final Start manifest resolved for the request. This means they follow the result of [`transformAssets`](/start/framework/react/guide/cdn-asset-urls):
+
+- CDN URL rewrites are reflected in Early Hints.
+- `crossOrigin` returned from `transformAssets` is reflected in Early Hints.
+- JavaScript hints follow the client output format: `modulepreload` for module output, or `preload; as=script` for IIFE output.
+- Per-request transforms with `cache: false` are reflected in Early Hints for that request.
+- Inlined CSS assets are skipped when Start's [CSS inlining](/start/framework/react/guide/css-styling#inline-route-css-in-production) build option inlines them into the HTML.
+
+## Event Shape
+
+The callback receives an `EarlyHintsEvent`:
+
+```ts
+type EarlyHintsEvent = {
+  phase: 'static' | 'dynamic'
+  hints: ReadonlyArray<EarlyHint>
+  links: Array<string>
+  allHints: ReadonlyArray<EarlyHint>
+  allLinks: Array<string>
+}
+```
+
+`hints` is the structured form for the current phase. `links` is the serialized HTTP `Link` header form for the current phase. Both are deduped across phases, contain only new values, and are index-aligned.
+
+`allHints` and `allLinks` contain all deduped values collected so far for the request. They are also index-aligned, and are useful when you want to write one combined `103` response during the `dynamic` phase.
+
+The `responseLinkHeader.filter` callback receives entries with this shape:
+
+```ts
+type ResponseLinkHeaderEntry = {
+  phase: 'static' | 'dynamic'
+  hint: EarlyHint
+  link: string
+}
+```
+
+## Supported Links
+
+Start emits Early Hints for link relations that map cleanly to HTTP `Link` headers:
+
+- `preload`
+- `modulepreload`
+- `preconnect`
+- `dns-prefetch`
+
+Start serializes these attributes when present:
+
+- `href`
+- `rel`
+- `as`
+- `crossOrigin`
+- `type`
+- `integrity`
+- `referrerPolicy`
+- `fetchPriority`
+
+Other head tags, inline styles, route scripts, and metadata are not converted into Early Hints.
+
+HTML Early Hints processing does not apply `media`, `imageSrcSet`, or `imageSizes` until the final document exists, so Start does not serialize those attributes into `103` links.
+
+## Runtime Example: Node
+
+If your runtime exposes Node's `ServerResponse`, call `writeEarlyHints` with `links`. This example sends the earliest `static` hints:
+
+```tsx
+// src/server.ts
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+import type { ServerResponse } from 'node:http'
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request, {
+      onEarlyHints: ({ phase, links }) => {
+        if (phase !== 'static' || !links.length) return
+
+        const response = getNodeResponseSomehow(request) as
+          | ServerResponse
+          | undefined
+
+        response?.writeEarlyHints({ link: links })
+      },
+    })
+  },
+})
+```
+
+Replace `getNodeResponseSomehow` with the API your adapter exposes.
+
+## Runtime Example: srvx / Nitro on Node
+
+Nitro uses [srvx](https://srvx.h3.dev/) under the hood for Node deployments. srvx exposes the native Node response on the request runtime context. This example waits for `dynamic` to send one redirect-safe response with both static and dynamic links:
+
+```tsx
+// src/server.ts
+import handler from '@tanstack/react-start/server-entry'
+import type { ServerRequest } from 'srvx'
+
+export default {
+  fetch(request: Request) {
+    const serverRequest = request as ServerRequest
+
+    return handler.fetch(request, {
+      onEarlyHints: ({ phase, allLinks }) => {
+        if (phase !== 'dynamic') return
+
+        const response = serverRequest.runtime?.node?.res
+
+        if (response?.writeEarlyHints && allLinks.length) {
+          response.writeEarlyHints({ link: allLinks })
+        }
+      },
+    })
+  },
+}
+```
+
+## Limitations
+
+- Early Hints are skipped in the Start dev server.
+- Start only mutates the response `Link` header when `responseLinkHeader` is enabled.
+- Browsers generally process only the first `103` response for a navigation.
+- Static hints can be sent before `beforeLoad` redirects are known.
+- The runtime or proxy in front of your app must support HTTP `103` responses.
diff --git a/mintlify/start/framework/react/guide/environment-functions.md b/mintlify/start/framework/react/guide/environment-functions.md
new file mode 100644
index 000000000..f472a3a26
--- /dev/null
+++ b/mintlify/start/framework/react/guide/environment-functions.md
@@ -0,0 +1,123 @@
+---
+id: environment-functions
+title: Environment Functions
+---
+
+## What Are Environment Functions?
+
+Environment functions are utilities designed to define and control function execution based on the runtime environment—whether the code is running on the client or the server. These utilities help ensure that environment-specific logic is executed safely and intentionally, preventing runtime errors and improving maintainability in fullstack or isomorphic applications.
+
+Start provides three core environment functions:
+
+- `createIsomorphicFn`: Compose a single function that adapts to both client and server environments.
+- `createServerOnlyFn`: Create a function that can only run on the server.
+- `createClientOnlyFn`: Create a function that can only run on the client.
+
+---
+
+## Isomorphic Functions
+
+Use `createIsomorphicFn()` to define functions that behave differently depending on whether they are called on the client or the server. This is useful for safely sharing logic across environments while delegating environment-specific behavior to appropriate handlers.
+
+### Complete Implementation
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+const getEnv = createIsomorphicFn()
+  .server(() => 'server')
+  .client(() => 'client')
+
+const env = getEnv()
+// ℹ️ On the **server**, it returns `'server'`.
+// ℹ️ On the **client**, it returns `'client'`.
+```
+
+### Partial Implementation (Server)
+
+Here is an example of `createIsomorphicFn()` with only server implementation:
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+const serverImplementationOnly = createIsomorphicFn().server(() => 'server')
+
+const server = serverImplementationOnly()
+// ℹ️ On the **server**, it returns `'server'`.
+// ℹ️ On the **client**, it is no-op (returns `undefined`)
+```
+
+### Partial Implementation (Client)
+
+Here is an example of `createIsomorphicFn()` with only client implementation:
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+const clientImplementationOnly = createIsomorphicFn().client(() => 'client')
+
+const client = clientImplementationOnly()
+// ℹ️ On the **server**, it is no-op (returns `undefined`)
+// ℹ️ On the **client**, it returns `'client'`.
+```
+
+### No Implementation
+
+Here is an example of `createIsomorphicFn()` without any environment specific implementation:
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+const noImplementation = createIsomorphicFn()
+
+const noop = noImplementation()
+// ℹ️ On both **client** and **server**, it is no-op (returns `undefined`)
+```
+
+#### What is a no-op?
+
+A no-op (short for "no operation") is a function that does nothing when executed - it simply returns `undefined` without performing any operations.
+
+```tsx
+// basic no-op implementation
+function noop() {}
+```
+
+---
+
+## `env`Only Functions
+
+The `createServerOnlyFn` and `createClientOnlyFn` helpers enforce strict environment-bound execution. They ensure the returned function is only callable in the correct runtime context. If misused, they throw descriptive runtime errors to prevent unintentional logic execution.
+
+### `createServerOnlyFn`
+
+```tsx
+import { createServerOnlyFn } from '@tanstack/react-start'
+
+const foo = createServerOnlyFn(() => 'bar')
+
+foo() // ✅ On server: returns "bar"
+// ❌ On client: throws "createServerOnlyFn() functions can only be called on the server!"
+```
+
+### `createClientOnlyFn`
+
+```tsx
+import { createClientOnlyFn } from '@tanstack/react-start'
+
+const foo = createClientOnlyFn(() => 'bar')
+
+foo() // ✅ On client: returns "bar"
+// ❌ On server: throws "createClientOnlyFn() functions can only be called on the client!"
+```
+
+> [!NOTE]
+> These functions are useful for API access, filesystem reads, using browser APIs, or other operations that are invalid or insecure outside their intended environment.
+
+## Tree Shaking
+
+Environment functions are tree-shaken based on the environment for each bundle produced.
+
+Functions created using `createIsomorphicFn()` are tree-shaken. All codes inside `.client()` are not included in server bundle, and vice-versa.
+
+On the server, functions created using `createClientOnlyFn()` are replaced with a function that throws an `Error` on the server. The reverse is true for `createServerOnlyFn` functions on the client.
diff --git a/mintlify/start/framework/react/guide/environment-variables.md b/mintlify/start/framework/react/guide/environment-variables.md
new file mode 100644
index 000000000..33b2b4dd1
--- /dev/null
+++ b/mintlify/start/framework/react/guide/environment-variables.md
@@ -0,0 +1,699 @@
+---
+id: environment-variables
+title: Environment Variables
+---
+
+Learn how to securely configure and use environment variables in your TanStack Start application across different contexts (server functions, client code, and build processes).
+
+> **Read env per-request, not at module scope.** On Cloudflare Workers and other edge SSR runtimes, env vars are injected at request time — module-level `process.env.X` reads run before the env exists and evaluate to `undefined` even on the server. Always read `process.env` inside `.handler()`, middleware `.server()`, server-route handlers, or other per-request callbacks. Reading at module scope also risks inlining secrets into the client bundle. (On Cloudflare Workers specifically, the canonical way to read env from anywhere — including module scope — is the [`cloudflare:workers` env binding](https://developers.cloudflare.com/workers/configuration/environment-variables/).)
+
+## Quick Start
+
+TanStack Start automatically loads `.env` files and makes variables available in both server and client contexts with proper security boundaries. Server code can read unprefixed variables from `process.env`; client code can only read variables exposed by your build tool's public prefix.
+
+
+
+# Vite
+
+```bash
+# .env
+DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
+VITE_APP_NAME=My TanStack Start App
+```
+
+```typescript
+// Server function - can access any environment variable
+const getUser = createServerFn().handler(async () => {
+  const db = await connect(process.env.DATABASE_URL) // ✅ Server-only
+  return db.user.findFirst()
+})
+
+// Client component - only VITE_ prefixed variables
+export function AppHeader() {
+  return <h1>{import.meta.env.VITE_APP_NAME}</h1> // ✅ Client-safe
+}
+```
+
+# Rsbuild
+
+```bash
+# .env
+DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
+PUBLIC_APP_NAME=My TanStack Start App
+```
+
+```typescript
+// Server function - can access any environment variable
+const getUser = createServerFn().handler(async () => {
+  const db = await connect(process.env.DATABASE_URL) // ✅ Server-only
+  return db.user.findFirst()
+})
+
+// Client component - only PUBLIC_ prefixed variables by default
+export function AppHeader() {
+  return <h1>{import.meta.env.PUBLIC_APP_NAME}</h1> // ✅ Client-safe
+}
+```
+
+
+
+## Environment Variable Contexts
+
+### Server-Side Context (Server Functions & API Routes)
+
+Server functions can access **any** environment variable using `process.env`:
+
+```typescript
+import { createServerFn } from '@tanstack/react-start'
+
+// Database connection (server-only)
+const connectToDatabase = createServerFn().handler(async () => {
+  const connectionString = process.env.DATABASE_URL // No prefix needed
+  const apiKey = process.env.EXTERNAL_API_SECRET // Stays on server
+
+  // These variables are never exposed to the client
+  return await database.connect(connectionString)
+})
+
+// Authentication (server-only)
+const authenticateUser = createServerFn()
+  .validator(z.object({ token: z.string() }))
+  .handler(async ({ data }) => {
+    const jwtSecret = process.env.JWT_SECRET // Server-only
+    return jwt.verify(data.token, jwtSecret)
+  })
+```
+
+### Client-Side Context (Components & Client Code)
+
+Client code can only access variables with your build tool's public prefix.
+
+
+
+# Vite
+
+Vite exposes variables with the `VITE_` prefix:
+
+```typescript
+// Client configuration
+export function ApiProvider({ children }: { children: React.ReactNode }) {
+  const apiUrl = import.meta.env.VITE_API_URL     // ✅ Public
+  const apiKey = import.meta.env.VITE_PUBLIC_KEY  // ✅ Public
+
+  // This would be undefined (security feature):
+  // const secret = import.meta.env.DATABASE_URL   // ❌ Undefined
+
+  return (
+    <ApiContext.Provider value={{ apiUrl, apiKey }}>
+      {children}
+    </ApiContext.Provider>
+  )
+}
+
+// Feature flags
+export function FeatureGatedComponent() {
+  const enableNewFeature = import.meta.env.VITE_ENABLE_NEW_FEATURE === 'true'
+
+  if (!enableNewFeature) return null
+
+  return <NewFeature />
+}
+```
+
+# Rsbuild
+
+Rsbuild exposes variables with the `PUBLIC_` prefix by default:
+
+```typescript
+// Client configuration
+export function ApiProvider({ children }: { children: React.ReactNode }) {
+  const apiUrl = import.meta.env.PUBLIC_API_URL // ✅ Public
+  const apiKey = import.meta.env.PUBLIC_KEY // ✅ Public
+
+  // This would be undefined (security feature):
+  // const secret = import.meta.env.DATABASE_URL // ❌ Undefined
+
+  return (
+    <ApiContext.Provider value={{ apiUrl, apiKey }}>
+      {children}
+    </ApiContext.Provider>
+  )
+}
+
+// Feature flags
+export function FeatureGatedComponent() {
+  const enableNewFeature = import.meta.env.PUBLIC_ENABLE_NEW_FEATURE === 'true'
+
+  if (!enableNewFeature) return null
+
+  return <NewFeature />
+}
+```
+
+
+
+## Environment File Setup
+
+### File Hierarchy (Loaded in Order)
+
+TanStack Start automatically loads environment files in this order:
+
+```
+.env.local          # Local overrides (add to .gitignore)
+.env.production     # Production-specific variables
+.env.development    # Development-specific variables
+.env                # Default variables (commit to git)
+```
+
+### Example Setup
+
+**.env** (committed to repository):
+
+```bash
+# Public configuration (Vite uses VITE_; Rsbuild uses PUBLIC_ by default)
+VITE_APP_NAME=My TanStack Start App
+VITE_API_URL=https://api.example.com
+VITE_SENTRY_DSN=https://...
+PUBLIC_APP_NAME=My TanStack Start App
+PUBLIC_API_URL=https://api.example.com
+PUBLIC_SENTRY_DSN=https://...
+
+# Server configuration templates
+DATABASE_URL=postgresql://localhost:5432/myapp_dev
+REDIS_URL=redis://localhost:6379
+```
+
+**.env.local** (add to .gitignore):
+
+```bash
+# Override for local development
+DATABASE_URL=postgresql://user:password@localhost:5432/myapp_local
+STRIPE_SECRET_KEY=sk_test_...
+JWT_SECRET=your-local-secret
+```
+
+**.env.production**:
+
+```bash
+# Production overrides
+VITE_API_URL=https://api.myapp.com
+PUBLIC_API_URL=https://api.myapp.com
+DATABASE_POOL_SIZE=20
+```
+
+## Common Patterns
+
+### Database Configuration
+
+```typescript
+// src/lib/database.ts
+import { createServerFn } from '@tanstack/react-start'
+
+const getDatabaseConnection = createServerFn().handler(async () => {
+  const config = {
+    url: process.env.DATABASE_URL,
+    maxConnections: parseInt(process.env.DB_MAX_CONNECTIONS || '10'),
+    ssl: process.env.NODE_ENV === 'production',
+  }
+
+  return createConnection(config)
+})
+```
+
+### Authentication Provider Setup
+
+```typescript
+// src/lib/auth.ts (Server)
+export const authConfig = {
+  secret: process.env.AUTH_SECRET,
+  providers: {
+    auth0: {
+      domain: process.env.AUTH0_DOMAIN,
+      clientId: process.env.AUTH0_CLIENT_ID,
+      clientSecret: process.env.AUTH0_CLIENT_SECRET, // Server-only
+    }
+  }
+}
+
+// src/components/AuthProvider.tsx (Client)
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <Auth0Provider
+      domain={import.meta.env.VITE_AUTH0_DOMAIN}
+      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
+      // No client secret here - it stays on the server
+    >
+      {children}
+    </Auth0Provider>
+  )
+}
+```
+
+### External API Integration
+
+```typescript
+// src/lib/external-api.ts
+import { createServerFn } from '@tanstack/react-start'
+
+// Server-side API calls (can use secret keys)
+const fetchUserData = createServerFn()
+  .validator(z.object({ userId: z.string() }))
+  .handler(async ({ data }) => {
+    const response = await fetch(
+      `${process.env.EXTERNAL_API_URL}/users/${data.userId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.EXTERNAL_API_SECRET}`,
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    return response.json()
+  })
+
+// Client-side API calls (public endpoints only)
+export function usePublicData() {
+  const apiUrl = import.meta.env.VITE_PUBLIC_API_URL
+
+  return useQuery({
+    queryKey: ['public-data'],
+    queryFn: () => fetch(`${apiUrl}/public/stats`).then((r) => r.json()),
+  })
+}
+```
+
+### Feature Flags and Configuration
+
+```typescript
+// src/config/features.ts
+export const featureFlags = {
+  enableNewDashboard: import.meta.env.VITE_ENABLE_NEW_DASHBOARD === 'true',
+  enableAnalytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
+  debugMode: import.meta.env.VITE_DEBUG_MODE === 'true',
+}
+
+// Usage in components
+export function Dashboard() {
+  if (featureFlags.enableNewDashboard) {
+    return <NewDashboard />
+  }
+
+  return <LegacyDashboard />
+}
+```
+
+## Type Safety
+
+### TypeScript Declarations
+
+Create `src/env.d.ts` to add type safety:
+
+
+
+# Vite
+
+```typescript
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  // Client-side environment variables
+  readonly VITE_APP_NAME: string
+  readonly VITE_API_URL: string
+  readonly VITE_AUTH0_DOMAIN: string
+  readonly VITE_AUTH0_CLIENT_ID: string
+  readonly VITE_SENTRY_DSN?: string
+  readonly VITE_ENABLE_NEW_DASHBOARD?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+// Server-side environment variables
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      readonly DATABASE_URL: string
+      readonly REDIS_URL: string
+      readonly JWT_SECRET: string
+      readonly AUTH0_CLIENT_SECRET: string
+      readonly STRIPE_SECRET_KEY: string
+      readonly NODE_ENV: 'development' | 'production' | 'test'
+    }
+  }
+}
+
+export {}
+```
+
+# Rsbuild
+
+```typescript
+/// <reference types="@rsbuild/core/types" />
+
+interface ImportMetaEnv {
+  // Client-side environment variables
+  readonly PUBLIC_APP_NAME: string
+  readonly PUBLIC_API_URL: string
+  readonly PUBLIC_AUTH0_DOMAIN: string
+  readonly PUBLIC_AUTH0_CLIENT_ID: string
+  readonly PUBLIC_SENTRY_DSN?: string
+  readonly PUBLIC_ENABLE_NEW_DASHBOARD?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+// Server-side environment variables
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      readonly DATABASE_URL: string
+      readonly REDIS_URL: string
+      readonly JWT_SECRET: string
+      readonly AUTH0_CLIENT_SECRET: string
+      readonly STRIPE_SECRET_KEY: string
+      readonly NODE_ENV: 'development' | 'production' | 'test'
+    }
+  }
+}
+
+export {}
+```
+
+
+
+### Runtime Validation
+
+Use Zod for runtime validation of environment variables:
+
+```typescript
+// src/config/env.ts
+import { z } from 'zod'
+
+const envSchema = z.object({
+  DATABASE_URL: z.string().url(),
+  JWT_SECRET: z.string().min(32),
+  NODE_ENV: z.enum(['development', 'production', 'test']),
+})
+
+const clientEnvSchema = z.object({
+  VITE_APP_NAME: z.string(),
+  VITE_API_URL: z.string().url(),
+  VITE_AUTH0_DOMAIN: z.string(),
+  VITE_AUTH0_CLIENT_ID: z.string(),
+})
+
+// Validate server environment
+// NOTE: Module-level parse runs at module load. Fine for Node.js;
+// on Cloudflare Workers (and other edge runtimes) `process.env` is
+// empty at module load, so wrap this in a function and call it
+// inside `.handler()` instead:
+//
+//   export const getServerEnv = () => envSchema.parse(process.env)
+//
+// Then read `getServerEnv()` per-request from server functions/middleware.
+export const serverEnv = envSchema.parse(process.env)
+
+// Validate client environment (build-time, always safe)
+export const clientEnv = clientEnvSchema.parse(import.meta.env)
+```
+
+## Security Best Practices
+
+### 1. Never Expose Secrets to Client
+
+```typescript
+// ❌ WRONG - Secret exposed to client bundle
+const config = {
+  apiKey: import.meta.env.VITE_SECRET_API_KEY, // This will be in your JS bundle!
+}
+
+// ✅ CORRECT - Keep secrets on server
+const getApiData = createServerFn().handler(async () => {
+  const response = await fetch(apiUrl, {
+    headers: { Authorization: `Bearer ${process.env.SECRET_API_KEY}` },
+  })
+  return response.json()
+})
+```
+
+### 2. Use Appropriate Prefixes
+
+```bash
+# ✅ Server-only (no prefix)
+DATABASE_URL=postgresql://...
+JWT_SECRET=super-secret-key
+STRIPE_SECRET_KEY=sk_live_...
+
+# ✅ Client-safe (Vite uses VITE_; Rsbuild uses PUBLIC_ by default)
+VITE_APP_NAME=My App
+VITE_API_URL=https://api.example.com
+VITE_SENTRY_DSN=https://...
+PUBLIC_APP_NAME=My App
+PUBLIC_API_URL=https://api.example.com
+PUBLIC_SENTRY_DSN=https://...
+```
+
+### 3. Validate Required Variables
+
+```typescript
+// src/config/validation.ts
+const requiredServerEnv = ['DATABASE_URL', 'JWT_SECRET'] as const
+
+const requiredClientEnv = ['VITE_APP_NAME', 'VITE_API_URL'] as const // Use PUBLIC_ names for Rsbuild
+
+// Validate on server startup
+for (const key of requiredServerEnv) {
+  if (!process.env[key]) {
+    throw new Error(`Missing required environment variable: ${key}`)
+  }
+}
+
+// Validate client environment at build time
+for (const key of requiredClientEnv) {
+  if (!import.meta.env[key]) {
+    throw new Error(`Missing required environment variable: ${key}`)
+  }
+}
+```
+
+## Production Checklist
+
+- [ ] All sensitive variables are server-only (no `VITE_` or `PUBLIC_` prefix)
+- [ ] Client variables use your build tool's public prefix (`VITE_` for Vite, `PUBLIC_` for Rsbuild)
+- [ ] `.env.local` is in `.gitignore`
+- [ ] Production environment variables are configured on hosting platform
+- [ ] Required environment variables are validated at startup
+- [ ] No hardcoded secrets in source code
+- [ ] Database URLs use connection pooling in production
+- [ ] API keys are rotated regularly
+
+## Common Problems
+
+### Environment Variable is Undefined
+
+**Problem**: `import.meta.env.MY_VARIABLE` returns `undefined`
+
+**Solutions**:
+
+1. **Add correct prefix**: Use your build tool's public prefix (e.g. `VITE_MY_VARIABLE` for Vite or `PUBLIC_MY_VARIABLE` for Rsbuild)
+2. **Restart development server** after adding new variables
+3. **Check file location**: `.env` file must be in project root
+4. **Verify build tool configuration**: Ensure variables are properly injected
+
+**Example**:
+
+```bash
+# ❌ Won't work in client code
+API_KEY=abc123
+
+# ✅ Works in client code
+VITE_API_KEY=abc123
+
+# ❌ Won't bundle the variable (assuming it is not set in the environment of the build)
+npm run build
+
+# ✅ Works in client code and will bundle the variable for production
+VITE_API_KEY=abc123 npm run build
+```
+
+### Runtime Client Environment Variables in Production
+
+**Problem**: If public client variables are replaced at bundle time only, how to make runtime variables available on the client?
+
+**Solutions**:
+
+Pass variables from the server down to the client:
+
+```tsx
+const getRuntimeVar = createServerFn({ method: 'GET' }).handler(() => {
+  return process.env.MY_RUNTIME_VAR // notice `process.env` on the server, and no public prefix
+})
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    const foo = await getRuntimeVar()
+    return { foo }
+  },
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { foo } = Route.useLoaderData()
+  // ... use your variable however you want
+}
+```
+
+### Variable Not Updating
+
+**Problem**: Environment variable changes aren't reflected
+
+**Solutions**:
+
+1. Restart development server
+2. Check if you're modifying the correct `.env` file
+3. Verify file hierarchy (`.env.local` overrides `.env`)
+
+### TypeScript Errors
+
+**Problem**: `Property 'VITE_MY_VAR' does not exist on type 'ImportMetaEnv'` or `Property 'PUBLIC_MY_VAR' does not exist on type 'ImportMetaEnv'`
+
+**Solution**: Add to `src/env.d.ts`:
+
+```typescript
+interface ImportMetaEnv {
+  readonly VITE_MY_VAR: string
+  readonly PUBLIC_MY_VAR: string
+}
+```
+
+### Security: Secret Exposed to Client
+
+**Problem**: Sensitive data appearing in client bundle
+
+**Solutions**:
+
+1. Remove `VITE_` or `PUBLIC_` prefix from sensitive variables
+2. Move sensitive operations to server functions
+3. Use build tools to verify no secrets in client bundle
+
+### Build Errors in Production
+
+**Problem**: Missing environment variables in production build
+
+**Solutions**:
+
+1. Configure variables on hosting platform
+2. Validate required variables at build time
+3. Use deployment-specific `.env` files
+
+## Server Build Configuration
+
+### Static `NODE_ENV` Replacement
+
+By default, TanStack Start statically replaces `process.env.NODE_ENV` in **server builds** at build time. This enables dead code elimination (tree-shaking) for development-only code paths in your server bundle.
+
+**Why this matters:** Vite automatically replaces `process.env.NODE_ENV` in client builds, but server builds run in Node.js where `process.env` is a real runtime object. Without static replacement, code like this would remain in your production server bundle:
+
+```typescript
+if (process.env.NODE_ENV === 'development') {
+  // This code would NOT be eliminated without static replacement
+  enableDevTools()
+  logDebugInfo()
+}
+```
+
+With static replacement enabled (the default), the build tool sees `"production" === 'development'` and eliminates the entire block.
+
+### Configuring Static Replacement
+
+The replacement is controlled by the `server.build.staticNodeEnv` option:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      server: {
+        build: {
+          // Replace process.env.NODE_ENV at build time (default: true)
+          staticNodeEnv: true,
+        },
+      },
+    }),
+    viteReact(),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    tanstackStart({
+      server: {
+        build: {
+          // Replace process.env.NODE_ENV at build time (default: true)
+          staticNodeEnv: true,
+        },
+      },
+    }),
+  ],
+})
+```
+
+
+
+The replacement value is determined in this order:
+
+1. `process.env.NODE_ENV` at build time (if set)
+2. The build tool's `mode` (e.g., from `--mode staging`)
+3. `"production"` (fallback)
+
+### When to Disable Static Replacement
+
+Set `staticNodeEnv: false` if you need `NODE_ENV` to remain dynamic at runtime:
+
+```ts
+tanstackStart({
+  server: {
+    build: {
+      staticNodeEnv: false, // Keep NODE_ENV dynamic at runtime
+    },
+  },
+})
+```
+
+Common reasons to disable:
+
+- **Same build, multiple environments**: Deploying one build artifact to staging and production
+- **Runtime environment detection**: Code that must check the actual runtime environment
+- **Testing production builds locally**: Running production builds with `NODE_ENV=development`
+
+> **Note:** Disabling static replacement means development-only code paths will remain in your production bundle and be evaluated at runtime.
+
+> **Important:** If you disable `staticNodeEnv`, you **must** set `NODE_ENV=production` at runtime when running your server in production. Without this, React (and possibly other libraries) will run in development mode, which is significantly slower and includes extra warnings and checks not intended for production use.
+
+## Related Resources
+
+- [Code Execution Patterns](/start/framework/react/guide/code-execution-patterns) - Learn about server vs client code execution
+- [Server Functions](/start/framework/react/guide/server-functions) - Learn more about server-side code
+- [Hosting](/start/framework/react/guide/hosting) - Platform-specific environment variable configuration
+- [Vite Environment Variables](https://vitejs.dev/guide/env-and-mode.html) - Official Vite documentation
+- [Rsbuild Environment Variables](https://rsbuild.dev/guide/advanced/env-vars) - Official Rsbuild documentation
diff --git a/mintlify/start/framework/react/guide/error-boundaries.md b/mintlify/start/framework/react/guide/error-boundaries.md
new file mode 100644
index 000000000..d8049c6ca
--- /dev/null
+++ b/mintlify/start/framework/react/guide/error-boundaries.md
@@ -0,0 +1,53 @@
+---
+id: error-boundaries
+title: Error Boundaries
+---
+
+## Error Boundaries (React Start)
+
+TanStack Start uses TanStack Router's route-level error boundaries.
+
+- Set a default for all routes via the router
+- Override per-route with `errorComponent`
+
+### Configure a default
+
+```tsx
+// src/router.tsx
+import { createRouter, ErrorComponent } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    // Shown when an error bubbles to the router
+    defaultErrorComponent: ({ error, reset }) => (
+      <ErrorComponent error={error} />
+    ),
+  })
+  return router
+}
+```
+
+### Per-route override
+
+```tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute, ErrorComponent } from '@tanstack/react-router'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+
+function PostError({ error, reset }: ErrorComponentProps) {
+  return <ErrorComponent error={error} />
+}
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+  errorComponent: PostError,
+})
+```
+
+Notes:
+
+- `ErrorComponent` is a simple built-in UI you can replace.
+- Call `reset()` to retry rendering the route after fixing state.
+- Use `beforeLoad`/`loader` to throw errors that will be caught.
diff --git a/mintlify/start/framework/react/guide/execution-model.md b/mintlify/start/framework/react/guide/execution-model.md
new file mode 100644
index 000000000..0348e6630
--- /dev/null
+++ b/mintlify/start/framework/react/guide/execution-model.md
@@ -0,0 +1,367 @@
+---
+id: execution-model
+title: Execution Model
+---
+
+Understanding where code runs is fundamental to building TanStack Start applications. This guide explains TanStack Start's execution model and how to control where your code executes.
+
+## Core Principle: Isomorphic by Default
+
+**All code in TanStack Start is isomorphic by default** - it runs and is included in both server and client bundles unless explicitly constrained.
+
+```tsx
+// ✅ This runs on BOTH server and client
+function formatPrice(price: number) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(price)
+}
+
+// ✅ Route loaders are ISOMORPHIC
+export const Route = createFileRoute('/products')({
+  loader: async () => {
+    // This runs on server during SSR AND on client during navigation
+    const response = await fetch('/api/products')
+    return response.json()
+  },
+})
+```
+
+> **Critical Understanding**: Route `loader`s are isomorphic - they run on both server and client, not just the server.
+
+## The Execution Boundary
+
+TanStack Start applications run in two environments:
+
+### Server Environment
+
+- **Node.js runtime** with access to file system, databases, environment variables
+- **During SSR** - Initial page renders on server
+- **API requests** - Server functions execute server-side
+- **Build time** - Static generation and pre-rendering
+
+### Client Environment
+
+- **Browser runtime** with access to DOM, localStorage, user interactions
+- **After hydration** - Client takes over after initial server render
+- **Navigation** - Route loaders run client-side during navigation
+- **User interactions** - Event handlers, form submissions, etc.
+
+## Execution Control APIs
+
+### Server-Only Execution
+
+| API                      | Use Case                  | Client Behavior           |
+| ------------------------ | ------------------------- | ------------------------- |
+| `createServerFn()`       | RPC calls, data mutations | Network request to server |
+| `createServerOnlyFn(fn)` | Utility functions         | Throws error              |
+
+```tsx
+import { createServerFn, createServerOnlyFn } from '@tanstack/react-start'
+
+// RPC: Server execution, callable from client
+const updateUser = createServerFn({ method: 'POST' })
+  .validator((data: UserData) => data)
+  .handler(async ({ data }) => {
+    // Only runs on server, but client can call it
+    return await db.users.update(data)
+  })
+
+// Utility: Server-only, client crashes if called
+const getEnvVar = createServerOnlyFn(() => process.env.DATABASE_URL)
+```
+
+### Client-Only Execution
+
+| API                      | Use Case                        | Server Behavior  |
+| ------------------------ | ------------------------------- | ---------------- |
+| `createClientOnlyFn(fn)` | Browser utilities               | Throws error     |
+| `<ClientOnly>`           | Components needing browser APIs | Renders fallback |
+
+```tsx
+import { createClientOnlyFn } from '@tanstack/react-start'
+import { ClientOnly } from '@tanstack/react-router'
+
+// Utility: Client-only, server crashes if called
+const saveToStorage = createClientOnlyFn((key: string, value: any) => {
+  localStorage.setItem(key, JSON.stringify(value))
+})
+
+// Component: Only renders children after hydration
+function Analytics() {
+  return (
+    <ClientOnly fallback={null}>
+      <GoogleAnalyticsScript />
+    </ClientOnly>
+  )
+}
+```
+
+#### useHydrated Hook
+
+For more granular control over hydration-dependent behavior, use the `useHydrated` hook. It returns a boolean indicating whether the client has been hydrated:
+
+```tsx
+import { useHydrated } from '@tanstack/react-router'
+
+function TimeZoneDisplay() {
+  const hydrated = useHydrated()
+  const timeZone = hydrated
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : 'UTC'
+
+  return <div>Your timezone: {timeZone}</div>
+}
+```
+
+**Behavior:**
+
+- **During SSR**: Always returns `false`
+- **First client render**: Returns `false`
+- **After hydration**: Returns `true` (and stays `true` for all subsequent renders)
+
+This is useful when you need to conditionally render content based on client-side data (like browser timezone, locale, or localStorage) while providing a sensible fallback for server rendering.
+
+### Environment-Specific Implementations
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+// Different implementation per environment
+const getDeviceInfo = createIsomorphicFn()
+  .server(() => ({ type: 'server', platform: process.platform }))
+  .client(() => ({ type: 'client', userAgent: navigator.userAgent }))
+```
+
+## Architectural Patterns
+
+### Progressive Enhancement
+
+Build components that work without JavaScript and enhance with client-side functionality:
+
+```tsx
+function SearchForm() {
+  const [query, setQuery] = useState('')
+
+  return (
+    <form action="/search" method="get">
+      <input
+        name="q"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <ClientOnly fallback={<button type="submit">Search</button>}>
+        <SearchButton onSearch={() => search(query)} />
+      </ClientOnly>
+    </form>
+  )
+}
+```
+
+### Environment-Aware Storage
+
+```tsx
+const storage = createIsomorphicFn()
+  .server((key: string) => {
+    // Server: File-based cache
+    const fs = require('node:fs')
+    return JSON.parse(fs.readFileSync('.cache', 'utf-8'))[key]
+  })
+  .client((key: string) => {
+    // Client: localStorage
+    return JSON.parse(localStorage.getItem(key) || 'null')
+  })
+```
+
+### RPC vs Direct Function Calls
+
+Understanding when to use server functions vs server-only functions:
+
+```tsx
+// createServerFn: RPC pattern - server execution, client callable
+const fetchUser = createServerFn().handler(async () => await db.users.find())
+
+// Usage from client component:
+const user = await fetchUser() // ✅ Network request
+
+// createServerOnlyFn: Crashes if called from client
+const getSecret = createServerOnlyFn(() => process.env.SECRET)
+
+// Usage from client:
+const secret = getSecret() // ❌ Throws error
+```
+
+## Common Anti-Patterns
+
+### Module-Level `process.env` Reads
+
+Reading `process.env` at module scope is wrong for **two** reasons, not one:
+
+1. **Security:** the value can be inlined into the client bundle.
+2. **Runtime correctness:** on Cloudflare Workers and other edge SSR runtimes, env is injected per-request. Module-level code runs at module load, before the env exists, so the read evaluates to `undefined` even on the server.
+
+```tsx
+// ❌ Leaks to client AND is undefined under Worker SSR
+const apiKey = process.env.SECRET_KEY
+
+// ✅ Wrap in a server-only function — read happens per call, on the server
+const apiKey = createServerOnlyFn(() => process.env.SECRET_KEY)
+
+// ✅ Or read directly inside `.handler()` / middleware `.server()` / server-route handlers
+const fetchData = createServerFn().handler(async () => {
+  const apiKey = process.env.SECRET_KEY
+  // ...
+})
+```
+
+### Incorrect Loader Assumptions
+
+```tsx
+// ❌ Assuming loader is server-only
+export const Route = createFileRoute('/users')({
+  loader: () => {
+    // This runs on BOTH server and client!
+    const secret = process.env.SECRET // Exposed to client
+    return fetch(`/api/users?key=${secret}`)
+  },
+})
+
+// ✅ Use server function for server-only operations
+const getUsersSecurely = createServerFn().handler(() => {
+  const secret = process.env.SECRET // Server-only
+  return fetch(`/api/users?key=${secret}`)
+})
+
+export const Route = createFileRoute('/users')({
+  loader: () => getUsersSecurely(), // Isomorphic call to server function
+})
+```
+
+### Hydration Mismatches
+
+```tsx
+// ❌ Different content server vs client
+function CurrentTime() {
+  return <div>{new Date().toLocaleString()}</div>
+}
+
+// ✅ Consistent rendering
+function CurrentTime() {
+  const [time, setTime] = useState<string>()
+
+  useEffect(() => {
+    setTime(new Date().toLocaleString())
+  }, [])
+
+  return <div>{time || 'Loading...'}</div>
+}
+```
+
+## Manual vs API-Driven Environment Detection
+
+```tsx
+// Manual: You handle the logic
+function logMessage(msg: string) {
+  if (typeof window === 'undefined') {
+    console.log(`[SERVER]: ${msg}`)
+  } else {
+    console.log(`[CLIENT]: ${msg}`)
+  }
+}
+
+// API: Framework handles it
+const logMessage = createIsomorphicFn()
+  .server((msg) => console.log(`[SERVER]: ${msg}`))
+  .client((msg) => console.log(`[CLIENT]: ${msg}`))
+```
+
+## Marking Whole Files Server- or Client-Only
+
+The `.server.*` and `.client.*` filename suffixes opt a file into Start's import protection automatically. When you can't or don't want to rename the file, achieve the same effect with a side-effect import at the top:
+
+```ts
+// src/lib/secrets.ts (filename can't be *.server.ts)
+import '@tanstack/react-start/server-only'
+
+export function getApiKey() {
+  return process.env.API_KEY
+}
+```
+
+```ts
+// src/lib/storage.ts
+import '@tanstack/react-start/client-only'
+
+export function savePreferences(prefs: Record<string, string>) {
+  localStorage.setItem('prefs', JSON.stringify(prefs))
+}
+```
+
+Both markers in the same file is an error. Type-only imports are ignored. See the [Import Protection guide](/start/framework/react/guide/import-protection) for the full reference, including dev vs build behavior, configuring deny rules, and reading violation traces.
+
+## Architecture Decision Framework
+
+**Choose Server-Only when:**
+
+- Accessing sensitive data (environment variables, secrets)
+- File system operations
+- Database connections
+- External API keys
+
+**Choose Client-Only when:**
+
+- DOM manipulation
+- Browser APIs (localStorage, geolocation)
+- User interaction handling
+- Analytics/tracking
+
+**Choose Isomorphic when:**
+
+- Data formatting/transformation
+- Business logic
+- Shared utilities
+- Route loaders (they're isomorphic by nature)
+
+## Security Considerations
+
+### Bundle Analysis
+
+Always verify server-only code isn't included in client bundles:
+
+```bash
+# Analyze client bundle
+npm run build
+# Check dist/client for any server-only imports
+```
+
+### Environment Variable Strategy
+
+- **Client-exposed**: Use `VITE_` prefix for client-accessible variables
+- **Server-only**: Access via `createServerOnlyFn()` or `createServerFn()`
+- **Never expose**: Database URLs, API keys, secrets
+
+### Error Boundaries
+
+Handle server/client execution errors gracefully:
+
+```tsx
+function ErrorBoundary({ children }: { children: React.ReactNode }) {
+  return (
+    <ErrorBoundaryComponent
+      fallback={<div>Something went wrong</div>}
+      onError={(error) => {
+        if (typeof window === 'undefined') {
+          console.error('[SERVER ERROR]:', error)
+        } else {
+          console.error('[CLIENT ERROR]:', error)
+        }
+      }}
+    >
+      {children}
+    </ErrorBoundaryComponent>
+  )
+}
+```
+
+Understanding TanStack Start's execution model is crucial for building secure, performant, and maintainable applications. The isomorphic-by-default approach provides flexibility while the execution control APIs give you precise control when needed.
diff --git a/mintlify/start/framework/react/guide/geo.md b/mintlify/start/framework/react/guide/geo.md
new file mode 100644
index 000000000..e4deae966
--- /dev/null
+++ b/mintlify/start/framework/react/guide/geo.md
@@ -0,0 +1,365 @@
+---
+id: geo
+title: Generative Engine Optimization (GEO)
+redirect_from:
+  - /framework/react/guide/llmo
+---
+
+> [!NOTE]
+> Looking for traditional search engine optimization? See the [SEO guide](/start/framework/react/guide/seo).
+
+## What is GEO?
+
+**Generative Engine Optimization (GEO)** is the practice of structuring your content and data so that AI systems—like ChatGPT, Claude, Perplexity, and other LLM-powered tools—can accurately understand, cite, and recommend your content.
+
+While traditional SEO focuses on ranking in search engine results pages, GEO focuses on being accurately represented in AI-generated responses. As more users get information through AI assistants rather than traditional search, this is becoming increasingly important.
+
+## How GEO Differs from SEO
+
+| Aspect             | SEO                         | GEO                                  |
+| ------------------ | --------------------------- | ------------------------------------ |
+| **Goal**           | Rank in search results      | Be cited/recommended by AI           |
+| **Audience**       | Search engine crawlers      | LLM training & retrieval systems     |
+| **Key signals**    | Links, keywords, page speed | Structured data, clarity, authority  |
+| **Content format** | Optimized for snippets      | Optimized for extraction & synthesis |
+
+The good news: many GEO best practices overlap with SEO. Clear structure, authoritative content, and good metadata help both.
+
+## What TanStack Start Provides
+
+TanStack Start's features that support GEO:
+
+- **Server-Side Rendering** - Ensures AI crawlers see fully rendered content
+- **Structured Data** - JSON-LD support for machine-readable content
+- **Document Head Management** - Meta tags that AI systems can parse
+- **Server Routes** - Create machine-readable endpoints (APIs, feeds)
+
+## Structured Data for AI
+
+Structured data using schema.org vocabulary helps AI systems understand your content's meaning and context. This is perhaps the most important GEO technique.
+
+### Article Schema
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  head: ({ loaderData }) => ({
+    meta: [{ title: loaderData.post.title }],
+    scripts: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'Article',
+          headline: loaderData.post.title,
+          description: loaderData.post.excerpt,
+          image: loaderData.post.coverImage,
+          author: {
+            '@type': 'Person',
+            name: loaderData.post.author.name,
+            url: loaderData.post.author.url,
+          },
+          publisher: {
+            '@type': 'Organization',
+            name: 'My Company',
+            logo: {
+              '@type': 'ImageObject',
+              url: 'https://myapp.com/logo.png',
+            },
+          },
+          datePublished: loaderData.post.publishedAt,
+          dateModified: loaderData.post.updatedAt,
+        }),
+      },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+### Product Schema
+
+For e-commerce, product schema helps AI assistants provide accurate product information:
+
+```tsx
+export const Route = createFileRoute('/products/$productId')({
+  loader: async ({ params }) => {
+    const product = await fetchProduct(params.productId)
+    return { product }
+  },
+  head: ({ loaderData }) => ({
+    meta: [{ title: loaderData.product.name }],
+    scripts: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'Product',
+          name: loaderData.product.name,
+          description: loaderData.product.description,
+          image: loaderData.product.images,
+          brand: {
+            '@type': 'Brand',
+            name: loaderData.product.brand,
+          },
+          offers: {
+            '@type': 'Offer',
+            price: loaderData.product.price,
+            priceCurrency: 'USD',
+            availability: loaderData.product.inStock
+              ? 'https://schema.org/InStock'
+              : 'https://schema.org/OutOfStock',
+          },
+          aggregateRating: loaderData.product.rating
+            ? {
+                '@type': 'AggregateRating',
+                ratingValue: loaderData.product.rating,
+                reviewCount: loaderData.product.reviewCount,
+              }
+            : undefined,
+        }),
+      },
+    ],
+  }),
+  component: ProductPage,
+})
+```
+
+### Organization and Website Schema
+
+Add organization schema to your root route for site-wide context:
+
+```tsx
+// src/routes/__root.tsx
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    ],
+    scripts: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'WebSite',
+          name: 'My App',
+          url: 'https://myapp.com',
+          publisher: {
+            '@type': 'Organization',
+            name: 'My Company',
+            url: 'https://myapp.com',
+            logo: 'https://myapp.com/logo.png',
+            sameAs: [
+              'https://twitter.com/mycompany',
+              'https://github.com/mycompany',
+            ],
+          },
+        }),
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+```
+
+### FAQ Schema
+
+FAQ schema is particularly effective for GEO—AI systems often extract Q&A pairs:
+
+```tsx
+export const Route = createFileRoute('/faq')({
+  loader: async () => {
+    const faqs = await fetchFAQs()
+    return { faqs }
+  },
+  head: ({ loaderData }) => ({
+    meta: [{ title: 'Frequently Asked Questions' }],
+    scripts: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'FAQPage',
+          mainEntity: loaderData.faqs.map((faq) => ({
+            '@type': 'Question',
+            name: faq.question,
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: faq.answer,
+            },
+          })),
+        }),
+      },
+    ],
+  }),
+  component: FAQPage,
+})
+```
+
+## Machine-Readable Endpoints
+
+Create API endpoints that AI systems and developers can consume directly:
+
+```ts
+// src/routes/api/products.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/products')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        const url = new URL(request.url)
+        const category = url.searchParams.get('category')
+
+        const products = await fetchProducts({ category })
+
+        return Response.json({
+          '@context': 'https://schema.org',
+          '@type': 'ItemList',
+          itemListElement: products.map((product, index) => ({
+            '@type': 'ListItem',
+            position: index + 1,
+            item: {
+              '@type': 'Product',
+              name: product.name,
+              description: product.description,
+              url: `https://myapp.com/products/${product.id}`,
+            },
+          })),
+        })
+      },
+    },
+  },
+})
+```
+
+## Content Best Practices
+
+Beyond technical implementation, content structure matters for GEO:
+
+### Clear, Factual Statements
+
+AI systems extract factual claims. Make your key information explicit:
+
+```tsx
+// Good: Clear, extractable facts
+function ProductDetails({ product }) {
+  return (
+    <article>
+      <h1>{product.name}</h1>
+      <p>
+        {product.name} is a {product.category} made by {product.brand}. It costs
+        ${product.price} and is available in {product.colors.join(', ')}.
+      </p>
+    </article>
+  )
+}
+```
+
+### Hierarchical Structure
+
+Use proper heading hierarchy—AI systems use this to understand content organization:
+
+```tsx
+function DocumentationPage() {
+  return (
+    <article>
+      <h1>Getting Started with TanStack Start</h1>
+
+      <section>
+        <h2>Installation</h2>
+        <p>Install TanStack Start using npm...</p>
+
+        <h3>Prerequisites</h3>
+        <p>You'll need Node.js 18 or later...</p>
+      </section>
+
+      <section>
+        <h2>Configuration</h2>
+        <p>Configure your app in your build tool config...</p>
+      </section>
+    </article>
+  )
+}
+```
+
+### Authoritative Attribution
+
+Include author information and sources—AI systems consider authority signals:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  head: ({ loaderData }) => ({
+    meta: [
+      { title: loaderData.post.title },
+      { name: 'author', content: loaderData.post.author.name },
+      {
+        property: 'article:author',
+        content: loaderData.post.author.profileUrl,
+      },
+      {
+        property: 'article:published_time',
+        content: loaderData.post.publishedAt,
+      },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+## llms.txt
+
+Some sites are adopting a `llms.txt` file (similar to `robots.txt`) to provide guidance to AI systems:
+
+```ts
+// src/routes/llms[.]txt.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/llms.txt')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const content = `# My App
+
+> My App is a platform for building modern web applications.
+
+## Documentation
+- Getting Started: https://myapp.com/docs/getting-started
+- API Reference: https://myapp.com/docs/api
+
+## Key Facts
+- Built with TanStack Start
+- Supports React and Solid
+- Full TypeScript support
+
+## Contact
+- Website: https://myapp.com
+- GitHub: https://github.com/mycompany/myapp
+`
+
+        return new Response(content, {
+          headers: {
+            'Content-Type': 'text/plain',
+          },
+        })
+      },
+    },
+  },
+})
+```
+
+## Monitoring AI Citations
+
+Unlike traditional SEO with established analytics, GEO monitoring is still evolving. Consider:
+
+- **Test with AI assistants** - Ask ChatGPT, Claude, and Perplexity about your product/content
+- **Monitor brand mentions** - Track how AI systems describe your offerings
+- **Validate structured data** - Use [Google's Rich Results Test](https://search.google.com/test/rich-results) and [Schema.org Validator](https://validator.schema.org/)
+- **Check AI search engines** - Monitor presence in Perplexity, Bing Chat, and Google AI Overviews
diff --git a/mintlify/start/framework/react/guide/hosting.md b/mintlify/start/framework/react/guide/hosting.md
new file mode 100644
index 000000000..4f94891a3
--- /dev/null
+++ b/mintlify/start/framework/react/guide/hosting.md
@@ -0,0 +1,482 @@
+---
+id: hosting
+title: Hosting
+---
+
+Hosting is the process of deploying your application to the internet so that users can access it. This is a critical part of any web development project, ensuring your application is available to the world. TanStack Start supports Vite and Rsbuild, giving you flexible build outputs for different hosting providers and runtimes.
+
+## What should I use?
+
+TanStack Start is **designed to work with any hosting provider**, so if you already have a hosting provider in mind, you can deploy your application there using the full-stack APIs provided by TanStack Start.
+
+However, since hosting is one of the most crucial aspects of your application's performance, reliability, and scalability, we recommend using one of our **Official Hosting Partners**: [Cloudflare](https://www.cloudflare.com?utm_source=tanstack), [Netlify](https://www.netlify.com?utm_source=tanstack), or [Railway](https://railway.com?utm_source=tanstack).
+
+## Deployment
+
+Once you've chosen a deployment target, you can follow the deployment guidelines below to deploy your TanStack Start application to the hosting provider of your choice:
+
+- [`cloudflare-workers`](#cloudflare-workers--official-partner): Deploy to Cloudflare Workers
+- [`netlify`](#netlify--official-partner): Deploy to Netlify
+- [`railway`](#railway--official-partner): Deploy to Railway
+- [`nitro`](#nitro): Deploy using Nitro
+- [`vercel`](#vercel): Deploy to Vercel
+- [`node-server`](#nodejs--docker): Deploy to a Node.js server
+- [`bun`](#bun): Deploy to a Bun server
+- [`appwrite-sites`](#appwrite-sites): Deploy to Appwrite Sites
+- ... and more to come!
+
+### Cloudflare Workers ⭐ _Official Partner_
+
+<a href="https://www.cloudflare.com?utm_source=tanstack" alt="Cloudflare Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/cloudflare-white.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/cloudflare-black.svg" width="280" />
+    <img alt="Cloudflare logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/cloudflare-black.svg" width="280" />
+  </picture>
+</a>
+
+When deploying to Cloudflare Workers, you'll need to complete a few extra steps before your users can start using your app.
+The official Cloudflare Workers setup currently uses Vite through `@cloudflare/vite-plugin`.
+
+1. Install `@cloudflare/vite-plugin` and `wrangler`
+
+```bash
+pnpm add -D @cloudflare/vite-plugin wrangler
+```
+
+2. Add the Cloudflare plugin to your `vite.config.ts` file
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { cloudflare } from '@cloudflare/vite-plugin'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    cloudflare({ viteEnvironment: { name: 'ssr' } }),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+```
+
+3. Add a `wrangler.jsonc` config file
+
+```json
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "tanstack-start-app",
+  "compatibility_date": "2025-09-02",
+  "compatibility_flags": ["nodejs_compat"],
+  "main": "@tanstack/react-start/server-entry"
+}
+```
+
+4. Modify the scripts in your `package.json` file
+
+```json
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    // ============ 👇 remove this line ============
+    "start": "node .output/server/index.mjs",
+    // ============ 👇 add these lines ============
+    "preview": "vite preview",
+    "deploy": "npm run build && wrangler deploy",
+    "cf-typegen": "wrangler types"
+  }
+}
+```
+
+5. Login with Wrangler to authenticate with your Cloudflare account.
+
+```bash
+npx wrangler login
+```
+
+or if using pnpm:
+
+```bash
+pnpm dlx wrangler login
+```
+
+To check current user use `wrangler whoami`.
+
+6. Deploy
+
+```bash
+pnpm run deploy
+```
+
+Deploy your application to Cloudflare Workers using their one-click deployment process, and you're ready to go!
+
+A full TanStack Start example for Cloudflare Workers is available [here](https://github.com/TanStack/router/tree/main/examples/react/start-basic-cloudflare).
+
+### Netlify ⭐ _Official Partner_
+
+<a href="https://www.netlify.com?utm_source=tanstack" alt="Netlify Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/netlify-dark.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/netlify-light.svg" width="280" />
+    <img alt="Netlify logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/netlify-light.svg" width="280" />
+  </picture>
+</a>
+
+The official Netlify setup currently uses Vite through [`@netlify/vite-plugin-tanstack-start`](https://www.npmjs.com/package/@netlify/vite-plugin-tanstack-start), which configures your build for Netlify deployment and provides full Netlify production platform emulation in local dev:
+
+```bash
+npm install --save-dev @netlify/vite-plugin-tanstack-start
+# or...
+pnpm add --save-dev @netlify/vite-plugin-tanstack-start
+# or yarn, bun, etc.
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import netlify from '@netlify/vite-plugin-tanstack-start' // ← add this
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart(),
+    netlify(), // ← add this (anywhere in the array is fine)
+    viteReact(),
+  ],
+})
+```
+
+Finally, use [Netlify CLI](https://developers.netlify.com/cli/) to deploy your app:
+
+```bash
+npx netlify deploy
+```
+
+If this is a new Netlify project, you'll be prompted to initialize it and build settings will be automatically configured for you.
+
+For more detailed documentation, check out the full [TanStack Start on Netlify
+docs](https://docs.netlify.com/build/frameworks/framework-setup-guides/tanstack-start/).
+
+#### Manual configuration
+
+Alternatively, if you prefer manual configuration, you can add a `netlify.toml` file to your project root:
+
+```toml
+[build]
+  command = "vite build"
+  publish = "dist/client"
+[dev]
+  command = "vite dev"
+  port = 3000
+```
+
+Or you can set the above settings directly [in the Netlify
+app](https://docs.netlify.com/build/configure-builds/overview/#build-settings).
+
+#### Other deployment methods
+
+Netlify also supports other deployment methods, such as [continuous deployment from a git repo
+hosted on GitHub, GitLab, or
+others](https://docs.netlify.com/start/quickstarts/deploy-from-repository/), [starting from a
+template](https://docs.netlify.com/start/quickstarts/deploy-from-template/), [deploying or
+importing from an AI code generation
+tool](https://docs.netlify.com/start/quickstarts/deploy-from-ai-code-generation-tool/), and
+[more](https://docs.netlify.com/deploy/create-deploys/).
+
+### Railway ⭐ _Official Partner_
+
+<a href="https://railway.com?utm_source=tanstack" alt="Railway Logo">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-white.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-black.svg" width="280" />
+    <img alt="Railway logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" width="280" />
+  </picture>
+</a>
+
+Railway provides instant deployments with zero configuration. Follow the [`Nitro`](#nitro) deployment instructions, then deploy to Railway:
+
+1. Push your code to a GitHub repository
+
+2. Connect your repository to Railway at [railway.com](https://railway.com?utm_source=tanstack)
+
+3. Railway will automatically detect your build settings and deploy your application
+
+Railway automatically provides:
+
+- **Automatic deployments** on every push to your repository
+- **Built-in databases** (Postgres, MySQL, Redis, MongoDB)
+- **Preview environments** for pull requests
+- **Automatic HTTPS** and custom domains
+
+For more details, see [Railway's documentation](https://docs.railway.com).
+
+### Nitro
+
+[Nitro](https://nitro.build/) is an agnostic layer that allows you to deploy TanStack Start applications to [a wide range of hostings](https://nitro.build/deploy).
+
+**⚠️ The [`nitro/vite`](https://nitro.build/) plugin natively integrates with Vite Environments API as the underlying build tool for TanStack Start. It is still under active development and receives regular updates. Please report any issues you encounter with reproduction so they can be investigated.**
+
+1. Install `nitro`:
+
+```bash
+npm install nitro
+```
+
+2. Add the `nitro/vite` plugin to your `vite.config.ts` file:
+
+```tsx
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+import { nitro } from 'nitro/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [tanstackStart(), nitro(), viteReact()],
+})
+```
+
+#### Performance Tip: FastResponse
+
+If you're deploying to Node.js with Nitro (which uses [srvx](https://srvx.h3.dev/) under the hood), you can get a ~5% throughput improvement by replacing the global `Response` constructor with srvx's optimized `FastResponse`.
+
+First, install srvx:
+
+```bash
+npm install srvx
+```
+
+Then add this to your server entry point (`src/server.ts`):
+
+```ts
+import { FastResponse } from 'srvx'
+globalThis.Response = FastResponse
+```
+
+This works because srvx's `FastResponse` includes an optimized `_toNodeResponse()` path that avoids the overhead of the standard Web `Response` to Node.js conversion. This optimization only applies to Node.js deployments using Nitro/h3/srvx.
+
+### Vercel
+
+Follow the [`Nitro`](#nitro) deployment instructions.
+Deploy your application to Vercel using their one-click deployment process, and you're ready to go!
+
+### Node.js / Docker
+
+Use the Node.js deployment shape that matches your build tool.
+
+
+
+# Vite
+
+Follow the [`Nitro`](#nitro) deployment instructions. Use the `node` command to start your application from the server from the build output files.
+
+Ensure `build` and `start` npm scripts are present in your `package.json` file:
+
+```json
+    "build": "vite build",
+    "start": "node .output/server/index.mjs"
+```
+
+# Rsbuild
+
+An Rsbuild production build emits client assets in `dist/client` and a server bundle in `dist/server/index.js`. The server bundle exports a fetch-style Start server entry:
+
+```ts
+type ServerEntry = {
+  fetch(request: Request): Response | Promise<Response>
+}
+```
+
+To run it on Node.js, serve `dist/client` as static assets and forward all other requests to the server entry's `fetch` handler. `srvx` is one way to do that:
+
+```sh
+npm install srvx
+```
+
+```json
+    "build": "rsbuild build",
+    "start": "srvx --prod -s dist/client dist/server/index.js"
+```
+
+Express or any other custom Node.js server works too, as long as it serves the client assets and calls the server entry's `fetch` handler for dynamic requests.
+
+If your server entry is emitted as `dist/server/server.js`, use that path instead of `dist/server/index.js`.
+
+
+
+Then you can run the following command to build your application:
+
+```sh
+npm run build
+```
+
+You can start your application by running:
+
+```sh
+npm run start
+```
+
+### Bun
+
+> [!IMPORTANT]
+> Currently, the Bun specific deployment guidelines only work with React 19. If you are using React 18, please refer to the [Node.js](#nodejs--docker) deployment guidelines.
+
+Make sure that your `react` and `react-dom` packages are set to version 19.0.0 or higher in your `package.json` file. If not, run the following command to upgrade the packages:
+
+```sh
+bun install react@19 react-dom@19
+```
+
+For Vite builds, follow the [`Nitro`](#nitro) deployment instructions.
+Depending on how you invoke the build, you might need to set the `'bun'` preset in the Nitro configuration:
+
+```ts
+// vite.config.ts
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+import { nitro } from 'nitro/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [tanstackStart(), nitro({ preset: 'bun' }), viteReact()],
+})
+```
+
+#### Production Server with Bun
+
+Alternatively, you can use a custom server implementation that leverages Bun's native APIs.
+
+We provide a reference implementation that demonstrates one approach to building a production-ready Bun server. This example uses Bun-native functions for optimal performance and includes features like intelligent asset preloading and memory management.
+
+**This is a starting point - feel free to adapt it to your needs or simplify it for your use case.**
+
+**What this example demonstrates:**
+
+- Serving static assets using Bun's native file handling
+- Hybrid loading strategy (preload small files, serve large files on-demand)
+- Optional features like ETag support and Gzip compression
+- Production-ready caching headers
+
+**Quick Setup:**
+
+1. Copy the [`server.ts`](https://github.com/tanstack/router/blob/main/examples/react/start-bun/server.ts) file from the example repository to your project root (or use it as inspiration for your own implementation)
+
+2. Build your application:
+
+   ```sh
+   bun run build
+   ```
+
+3. Start the server:
+
+   ```sh
+   bun run server.ts
+   ```
+
+**Configuration (Optional):**
+
+The reference server implementation includes several optional configuration options via environment variables. You can use these as-is, modify them, or remove features you don't need:
+
+```sh
+# Basic usage - just works out of the box
+bun run server.ts
+
+# Common configurations
+PORT=8080 bun run server.ts  # Custom port
+ASSET_PRELOAD_VERBOSE_LOGGING=true bun run server.ts  # See what's happening
+```
+
+**Available Environment Variables:**
+
+| Variable                         | Description                                        | Default                                                                       |
+| -------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `PORT`                           | Server port                                        | `3000`                                                                        |
+| `ASSET_PRELOAD_MAX_SIZE`         | Maximum file size to preload into memory (bytes)   | `5242880` (5MB)                                                               |
+| `ASSET_PRELOAD_INCLUDE_PATTERNS` | Comma-separated glob patterns for files to include | All files                                                                     |
+| `ASSET_PRELOAD_EXCLUDE_PATTERNS` | Comma-separated glob patterns for files to exclude | None                                                                          |
+| `ASSET_PRELOAD_VERBOSE_LOGGING`  | Enable detailed logging                            | `false`                                                                       |
+| `ASSET_PRELOAD_ENABLE_ETAG`      | Enable ETag generation                             | `true`                                                                        |
+| `ASSET_PRELOAD_ENABLE_GZIP`      | Enable Gzip compression                            | `true`                                                                        |
+| `ASSET_PRELOAD_GZIP_MIN_SIZE`    | Minimum file size for Gzip (bytes)                 | `1024` (1KB)                                                                  |
+| `ASSET_PRELOAD_GZIP_MIME_TYPES`  | MIME types eligible for Gzip                       | `text/,application/javascript,application/json,application/xml,image/svg+xml` |
+
+<details>
+<summary>Advanced configuration examples</summary>
+
+```sh
+# Optimize for minimal memory usage
+ASSET_PRELOAD_MAX_SIZE=1048576 bun run server.ts
+
+# Preload only critical assets
+ASSET_PRELOAD_INCLUDE_PATTERNS="*.js,*.css" \
+ASSET_PRELOAD_EXCLUDE_PATTERNS="*.map,vendor-*" \
+bun run server.ts
+
+# Disable optional features
+ASSET_PRELOAD_ENABLE_ETAG=false \
+ASSET_PRELOAD_ENABLE_GZIP=false \
+bun run server.ts
+
+# Custom Gzip configuration
+ASSET_PRELOAD_GZIP_MIN_SIZE=2048 \
+ASSET_PRELOAD_GZIP_MIME_TYPES="text/,application/javascript,application/json" \
+bun run server.ts
+```
+
+</details>
+
+**Example Output:**
+
+```txt
+📦 Loading static assets from ./dist/client...
+   Max preload size: 5.00 MB
+
+📁 Preloaded into memory:
+   /assets/index-a1b2c3d4.js           45.23 kB │ gzip:  15.83 kB
+   /assets/index-e5f6g7h8.css           12.45 kB │ gzip:   4.36 kB
+
+💾 Served on-demand:
+   /assets/vendor-i9j0k1l2.js          245.67 kB │ gzip:  86.98 kB
+
+✅ Preloaded 2 files (57.68 KB) into memory
+🚀 Server running at http://localhost:3000
+```
+
+For a complete working example, check out the [TanStack Start + Bun example](https://github.com/TanStack/router/tree/main/examples/react/start-bun) in this repository.
+
+### Appwrite Sites
+
+When deploying to [Appwrite Sites](https://appwrite.io/products/sites), you'll need to complete a few steps:
+
+1. **Create a TanStack Start app** (or use an existing one)
+
+```bash
+npx @tanstack/cli@latest create
+```
+
+2. **Push your project to a GitHub repository**
+
+Create a [GitHub repository](https://github.com/new) and push your code.
+
+3. **Create an Appwrite project**
+
+Head to [Appwrite Cloud](https://cloud.appwrite.io) and sign up if you haven't already, then create your first project.
+
+4. **Deploy your site**
+
+In your Appwrite project, navigate to the **Sites** page from the sidebar. Click on the **Create site**, select **Connect a repository**, connect your GitHub account and select your repository.
+
+1. Select the **production branch** and **root directory**
+2. Verify **TanStack Start** is selected as the framework
+3. Confirm the build settings:
+   - **Install command:** `npm install`
+   - **Build command:** `npm run build`
+   - **Output directory:** `./dist` (if you're using Nitro v2 or v3, this should be `./.output`)
+
+4. Add any required **environment variables**
+5. Click **Deploy**
+
+After successful deployment, click the **Visit site** button to see your deployed application.
diff --git a/mintlify/start/framework/react/guide/hydration-errors.md b/mintlify/start/framework/react/guide/hydration-errors.md
new file mode 100644
index 000000000..562c24de0
--- /dev/null
+++ b/mintlify/start/framework/react/guide/hydration-errors.md
@@ -0,0 +1,136 @@
+---
+id: hydration-errors
+title: Hydration Errors
+---
+
+### Why it happens
+
+- **Mismatch**: Server HTML differs from client render during hydration
+- **Common causes**: `Intl` (locale/time zone), `Date.now()`, random IDs, responsive-only logic, feature flags, user prefs
+
+### Strategy 1 — Make server and client match
+
+- **Pick a deterministic locale/time zone on the server** and use the same on the client
+- **Source of truth**: cookie (preferred) or `Accept-Language` header
+- **Compute once on the server** and hydrate as initial state
+
+```tsx
+// src/start.ts
+import { createStart, createMiddleware } from '@tanstack/react-start'
+import {
+  getRequestHeader,
+  getCookie,
+  setCookie,
+} from '@tanstack/react-start/server'
+
+const localeTzMiddleware = createMiddleware().server(async ({ next }) => {
+  const header = getRequestHeader('accept-language')
+  const headerLocale = header?.split(',')[0] || 'en-US'
+  const cookieLocale = getCookie('locale')
+  const cookieTz = getCookie('tz') // set by client later (see Strategy 2)
+
+  const locale = cookieLocale || headerLocale
+  const timeZone = cookieTz || 'UTC' // deterministic until client sends tz
+
+  // Persist locale for subsequent requests (optional)
+  setCookie('locale', locale, { path: '/', maxAge: 60 * 60 * 24 * 365 })
+
+  return next({ context: { locale, timeZone } })
+})
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [localeTzMiddleware],
+}))
+```
+
+```tsx
+// src/routes/index.tsx (example)
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { getCookie } from '@tanstack/react-start/server'
+
+export const getServerNow = createServerFn().handler(async () => {
+  const locale = getCookie('locale') || 'en-US'
+  const timeZone = getCookie('tz') || 'UTC'
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone,
+  }).format(new Date())
+})
+
+export const Route = createFileRoute('/')({
+  loader: () => getServerNow(),
+  component: () => {
+    const serverNow = Route.useLoaderData() as string
+    return <time dateTime={serverNow}>{serverNow}</time>
+  },
+})
+```
+
+### Strategy 2 — Let the client tell you its environment
+
+- On first visit, set a cookie with the client time zone; SSR uses `UTC` until then
+- Do this without risking mismatches
+
+```tsx
+import * as React from 'react'
+import { ClientOnly } from '@tanstack/react-router'
+
+function SetTimeZoneCookie() {
+  React.useEffect(() => {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+    document.cookie = `tz=${tz}; path=/; max-age=31536000`
+  }, [])
+  return null
+}
+
+export function AppBoot() {
+  return (
+    <ClientOnly fallback={null}>
+      <SetTimeZoneCookie />
+    </ClientOnly>
+  )
+}
+```
+
+### Strategy 3 — Make it client-only
+
+- Wrap unstable UI in `<ClientOnly>` to avoid SSR and mismatches
+
+```tsx
+import { ClientOnly } from '@tanstack/react-router'
+;<ClientOnly fallback={<span>—</span>}>
+  <RelativeTime ts={someTs} />
+</ClientOnly>
+```
+
+### Strategy 4 — Disable or limit SSR for the route
+
+- Use Selective SSR to avoid rendering the component on the server
+
+```tsx
+export const Route = createFileRoute('/unstable')({
+  ssr: 'data-only', // or false
+  component: () => <ExpensiveViz />,
+})
+```
+
+### Strategy 5 — Last resort suppression
+
+- For small, known-different nodes, you can use React’s `suppressHydrationWarning`
+
+```tsx
+<time suppressHydrationWarning>{new Date().toLocaleString()}</time>
+```
+
+### Checklist
+
+- **Deterministic inputs**: locale, time zone, feature flags
+- **Prefer cookies** for client context; fallback to `Accept-Language`
+- **Use `<ClientOnly>`** for inherently dynamic UI
+- **Use Selective SSR** when server HTML cannot be stable
+- **Avoid blind suppression**; use `suppressHydrationWarning` sparingly
+
+See also: [Execution Model](/start/framework/react/guide/execution-model), [Code Execution Patterns](/start/framework/react/guide/code-execution-patterns), [Selective SSR](/start/framework/react/guide/selective-ssr), [Server Functions](/start/framework/react/guide/server-functions)
diff --git a/mintlify/start/framework/react/guide/import-protection.md b/mintlify/start/framework/react/guide/import-protection.md
new file mode 100644
index 000000000..ca790cbb3
--- /dev/null
+++ b/mintlify/start/framework/react/guide/import-protection.md
@@ -0,0 +1,571 @@
+---
+id: import-protection
+title: Import Protection
+---
+
+> **Experimental:** Import protection is experimental and subject to change.
+
+Import protection prevents server-only code from leaking into client bundles and client-only code from leaking into server bundles. It runs inside TanStack Start and is enabled by default.
+
+## How It Works
+
+TanStack Start builds your application for two environments: **client** and **server**. Some code should only run in one environment. Import protection checks every import in your source files during development and build, and either blocks or mocks imports that cross environment boundaries.
+
+There are two ways an import can be denied:
+
+- **File patterns** match on the resolved file path. By default, `*.server.*` files are denied in the client environment and `*.client.*` files are denied in the server environment.
+- **Specifier patterns** match on the raw import string. By default, `@tanstack/react-start/server` is denied in the client environment.
+
+## Default Rules
+
+Import protection is enabled out of the box with these defaults:
+
+| Setting            | Default                                         |
+| ------------------ | ----------------------------------------------- |
+| `behavior` (dev)   | `'mock'` -- warn and replace with a mock module |
+| `behavior` (build) | `'error'` -- fail the build                     |
+| `log`              | `'once'` -- deduplicate repeated violations     |
+| Scope              | Files inside Start's `srcDirectory`             |
+
+**Client environment denials:**
+
+- Files matching `**/*.server.*`
+- The specifier `@tanstack/react-start/server`
+- Excluded from file checks: `**/node_modules/**`
+
+**Server environment denials:**
+
+- Files matching `**/*.client.*`
+- Excluded from file checks: `**/node_modules/**`
+
+By default, files inside `node_modules` are excluded from resolved-target deny checks via the `excludeFiles` option. This prevents false positives from third-party packages whose resolved filenames contain `.client.` or `.server.`. If you need to check third-party files, set `excludeFiles: []` on the relevant environment — see [Configuring Deny Rules](#configuring-deny-rules).
+
+These defaults mean you can use the `.server.ts` / `.client.ts` naming convention to restrict files to a single environment without any configuration. To also deny entire directories (e.g. `server/` or `client/`), add them via `files` in your [deny rules configuration](#configuring-deny-rules) — for example `files: ['**/*.server.*', '**/server/**']` for the client environment.
+
+## Type-Only Imports
+
+Type-only imports and re-exports are ignored by import protection because they are erased from the runtime bundle and cannot leak environment-specific code.
+
+```ts
+import type { User } from './db.server'
+import { type RequestHandler } from '@tanstack/react-start/server'
+
+export type { User } from './db.server'
+```
+
+Mixed imports still count when they include at least one runtime value. Split the type and value imports if only the type is safe to cross the environment boundary.
+
+```ts
+// This is still checked because `getUsers` is a runtime value.
+import { type User, getUsers } from './db.server'
+```
+
+## File Markers
+
+You can explicitly mark a module as server-only or client-only by adding a side-effect import at the top of the file:
+
+```ts
+// src/lib/secrets.ts
+import '@tanstack/react-start/server-only'
+
+export const API_KEY = process.env.API_KEY
+```
+
+```ts
+// src/lib/local-storage.ts
+import '@tanstack/react-start/client-only'
+
+export function savePreferences(prefs: Record<string, string>) {
+  localStorage.setItem('prefs', JSON.stringify(prefs))
+}
+```
+
+When the plugin sees a marker import, it records the file as restricted. If that file is later imported from the wrong environment, the import is denied. Both markers in the same file is always an error.
+
+Markers are useful when a file doesn't follow the `.server.*` / `.client.*` naming convention but still contains environment-specific code.
+
+## Behavior Modes
+
+The `behavior` option controls what happens when a violation is detected:
+
+- **`'error'`** -- The build fails with a detailed error message. This is the default for production builds.
+- **`'mock'`** -- The import is replaced with a mock module that returns safe proxy values. A warning is logged but the build continues. This is the default during development.
+
+Mock mode is useful during development because it lets you keep working even when your import graph has violations. The mock module returns a recursive Proxy, so any property access or function call on a mocked import returns another mock instead of crashing.
+
+You can override the defaults:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      importProtection: {
+        // Always error, even in dev
+        behavior: 'error',
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      importProtection: {
+        // Always error, even in dev
+        behavior: 'error',
+      },
+    }),
+  ],
+})
+```
+
+
+
+Or set different behaviors per mode:
+
+```ts
+importProtection: {
+  behavior: {
+    dev: 'mock',
+    build: 'error',
+  },
+}
+```
+
+## Configuring Deny Rules
+
+You can add your own deny rules on top of the defaults. Rules are specified per environment using glob patterns (via [picomatch](https://github.com/micromatch/picomatch)) or regular expressions.
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      importProtection: {
+        client: {
+          // Block specific npm packages from the client bundle
+          specifiers: ['@prisma/client', 'bcrypt'],
+          // Block files in a custom directory
+          files: ['**/db/**'],
+        },
+        server: {
+          // Block browser-only libraries from the server
+          specifiers: ['localforage'],
+        },
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      importProtection: {
+        client: {
+          // Block specific npm packages from the client bundle
+          specifiers: ['@prisma/client', 'bcrypt'],
+          // Block files in a custom directory
+          files: ['**/db/**'],
+        },
+        server: {
+          // Block browser-only libraries from the server
+          specifiers: ['localforage'],
+        },
+      },
+    }),
+  ],
+})
+```
+
+
+
+### Checking third-party packages
+
+By default, resolved files inside `node_modules` are excluded from resolved-target deny checks (file-pattern and marker checks). This avoids false positives from packages that happen to use `.client.` or `.server.` in their distribution filenames. If you want to re-enable checking for a specific environment, set `excludeFiles` to an empty array:
+
+```ts
+importProtection: {
+  server: {
+    // Re-enable file-pattern checking for node_modules in the server environment
+    excludeFiles: [],
+  },
+}
+```
+
+When you provide `excludeFiles`, it **fully replaces** the default (`['**/node_modules/**']`). To exclude additional paths while still skipping `node_modules`, include both:
+
+```ts
+importProtection: {
+  client: {
+    excludeFiles: ['**/node_modules/**', '**/vendor/**'],
+  },
+}
+```
+
+## Scoping and Exclusions
+
+By default, import protection only checks files inside Start's `srcDirectory`. You can change the scope with `include`, `exclude`, and `ignoreImporters`:
+
+```ts
+importProtection: {
+  // Only check files matching these patterns
+  include: ['src/**'],
+  // Skip checking these files
+  exclude: ['src/generated/**'],
+  // Ignore violations when these files are the importer
+  ignoreImporters: ['**/*.test.ts', '**/*.spec.ts'],
+}
+```
+
+## Reading Violation Traces
+
+When a violation is detected, the plugin shows a diagnostic message with the full import chain that led to the violation, a code snippet highlighting the offending line, and actionable suggestions.
+
+### Server-only code in the client
+
+This example shows a `*.server.*` file being imported transitively in the client environment:
+
+```text
+[import-protection] Import denied in client environment
+
+  Denied by file pattern: **/*.server.*
+  Importer: src/features/auth/session.ts:5:27
+  Import: "../db/queries.server"
+  Resolved: src/db/queries.server.ts
+
+  Trace:
+    1. src/routes/index.tsx:2:34 (entry) (import "../features/auth/session")
+    2. src/features/auth/session.ts:5:27 (import "../db/queries.server")
+
+  Code:
+     3 | import { logger } from '../utils/logger'
+     4 |
+  >  5 | import { getUsers } from '../db/queries.server'
+       |                           ^
+     6 |
+     7 | export function loadAuth() {
+
+  src/features/auth/session.ts:5:27
+
+  Suggestions:
+    - Wrap in createServerFn().handler(() => ...) to make it callable from the client via RPC
+    - Wrap in createServerOnlyFn(() => ...) if it should not be callable from the client
+    - Use createIsomorphicFn().client(() => ...).server(() => ...) for environment-specific implementations
+    - Split the file so client-safe exports are separate
+```
+
+### Client-only code on the server
+
+This example shows a `*.client.*` file imported in the SSR environment. Because the code snippet contains JSX, the `<ClientOnly>` suggestion is shown first:
+
+```text
+[import-protection] Import denied in server environment
+
+  Denied by file pattern: **/*.client.*
+  Importer: src/components/dashboard.tsx:3:30
+  Import: "./browser-widget.client"
+  Resolved: src/components/browser-widget.client.tsx
+
+  Trace:
+    1. src/routes/dashboard.tsx:1:32 (entry) (import "../components/dashboard")
+    2. src/components/dashboard.tsx:3:30 (import "./browser-widget.client")
+
+  Code:
+     1 | import { BrowserWidget } from './browser-widget.client'
+     2 |
+  >  3 | export function Dashboard() { return <BrowserWidget /> }
+       |                              ^
+     4 |
+
+  src/components/dashboard.tsx:3:30
+
+  Suggestions:
+    - Wrap in <ClientOnly fallback={...}>...</ClientOnly> to render only after hydration
+    - Wrap in createClientOnlyFn(() => ...) if it should only run in the browser
+    - Use createIsomorphicFn().client(() => ...).server(() => ...) for environment-specific implementations
+    - Split the file so server-safe exports are separate
+```
+
+### How to read the output
+
+Each violation message has these sections:
+
+| Section                          | Description                                                                                                                                                      |
+| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Header**                       | Environment type where the violation occurred (`"client"` or `"server"`)                                                                                         |
+| **Denied by**                    | The rule that matched: file pattern, specifier pattern, or marker                                                                                                |
+| **Importer / Import / Resolved** | The importing file (with `file:line:col`), the raw import string, and the resolved target path                                                                   |
+| **Trace**                        | The full import chain from the entry point to the denied import. Each step shows `file:line:col` and the import specifier used. Step 1 is always the entry point |
+| **Code**                         | A source code snippet with a `>` marker on the offending line and a `^` caret pointing to the exact column                                                       |
+| **Suggestions**                  | Actionable steps to fix the violation, tailored to the direction (server-in-client vs client-in-server)                                                          |
+
+The trace reads top-to-bottom, from the entry point to the denied module. This helps you find where the chain starts so you can restructure your code.
+
+## Common Pitfall: Why Some Imports Stay Alive
+
+It can look like Start "should have removed that server-only import". The important detail is that this is handled by the Start compiler:
+
+1. The compiler rewrites environment-specific _implementations_ for the current target (client or server).
+2. As part of that compilation, it prunes code and removes imports that become unused after the rewrite.
+
+In practice, when the compiler replaces a `createServerFn()` handler with a client RPC stub, it can also remove server-only imports that were only used by the removed implementation.
+
+Example (client build):
+
+```ts
+import { getUsers } from './db/queries.server'
+import { createServerFn } from '@tanstack/react-start'
+
+export const fetchUsers = createServerFn().handler(async () => {
+  return getUsers()
+})
+```
+
+Conceptually, the client build output becomes something like (simplified):
+
+```ts
+import { createClientRpc } from '@tanstack/react-start/client-rpc'
+import { createServerFn } from '@tanstack/react-start'
+
+// Compiler replaces the handler with a client RPC stub.
+// (The id is generated by the compiler; treat it as an opaque identifier.)
+export const fetchUsers = TanStackStart.createServerFn({
+  method: 'GET',
+}).handler(createClientRpc('sha256:deadbeef...'))
+
+// The server-only import is removed by the compiler.
+```
+
+If the import "leaks" into code that survives compilation, it stays live and import protection will still flag it:
+
+```ts
+import { getUsers } from './db/queries.server'
+import { createServerFn } from '@tanstack/react-start'
+
+// This is fine -- the server implementation is removed for the client build
+export const fetchUsers = createServerFn().handler(async () => {
+  return getUsers()
+})
+
+// This keeps the import alive in the client build
+export function leakyHelper() {
+  return getUsers() // referenced outside server boundary
+}
+```
+
+When this happens, you have a few options depending on what you want `leakyHelper` to be:
+
+Option A: split the file so client code cannot accidentally import the leak
+
+```ts
+// src/users.server.ts
+import { getUsers } from './db/queries.server'
+import { createServerFn } from '@tanstack/react-start'
+
+// Safe to import from client code (compiler rewrites the handler)
+export const fetchUsers = createServerFn().handler(async () => {
+  return getUsers()
+})
+```
+
+```ts
+// src/users-leaky.server.ts
+import { getUsers } from './db/queries.server'
+
+// Server-only helper; do not import this from client code
+export function leakyHelper() {
+  return getUsers()
+}
+```
+
+Option B: keep it in the same file, but wrap the helper in `createServerOnlyFn`
+
+This is useful when the helper should exist, but must never run on the client. Make sure the server-only import is only referenced inside the `createServerOnlyFn(() => ...)` callback:
+
+```ts
+import { createServerOnlyFn } from '@tanstack/react-start'
+import { getUsers } from './db/queries.server'
+
+export const leakyHelper = createServerOnlyFn(() => {
+  return getUsers()
+})
+```
+
+On the client, the compiler output is effectively:
+
+```ts
+export const leakyHelper = () => {
+  throw new Error(
+    'createServerOnlyFn() functions can only be called on the server!',
+  )
+}
+```
+
+Notice that the `createServerOnlyFn` import is gone, and the server-only `getUsers` import is also gone because it is no longer referenced after compilation.
+
+The same idea applies to `createIsomorphicFn()`: the compiler removes the non-target implementation and prunes anything that becomes unused.
+
+If you see an import-protection violation for a file you expected to be "compiled away", check whether the import is referenced outside a compiler-recognized environment boundary (or is otherwise kept live by surviving code).
+
+## False Positives: Dev vs Build
+
+In **build mode**, import protection defers violation checks until after tree-shaking. If an import is eliminated from the final bundle, no violation is reported. Build-time violations are definitive: if the build flags it, the import truly survived.
+
+In **dev mode**, tree-shaking may be incomplete or unavailable, so import protection can report false positives for imports that would later be compiled away.
+
+If a warning appears in dev but not build, that usually means the unsafe edge existed before tree-shaking but did not survive the final bundle. Even so, prefer changing the import structure so that edge does not exist in the first place.
+
+## Mixed Barrels and Split Entry Points
+
+Barrels are not inherently a false positive. The risky pattern is a barrel that mixes safe exports with environment-restricted ones from the same entry point.
+
+Depending on what survives after compilation and tree-shaking, that can show up as either a real violation or a dev-only false positive. The safer structure is to split safe and restricted exports into separate entry points.
+
+For example, avoid mixed barrels like this:
+
+```ts
+// src/lib/index.ts
+export { fetchUsers } from './fetchUsers'
+export { getDb } from './db.server'
+```
+
+```ts
+// src/routes/users.tsx
+import { fetchUsers } from '../lib'
+```
+
+Even if the client only uses `fetchUsers`, that import path still goes through a module that re-exports `getDb`.
+
+Prefer splitting safe and server-only exports into separate entry points:
+
+```ts
+// src/lib/index.ts
+export { fetchUsers } from './fetchUsers'
+```
+
+```ts
+// src/lib/server.ts
+export { getDb } from './db.server'
+```
+
+```ts
+// src/routes/users.tsx
+import { fetchUsers } from '../lib'
+```
+
+```ts
+// src/server/worker.ts
+import { getDb } from '../lib/server'
+```
+
+The same applies to marker-protected files (`import '@tanstack/react-start/server-only'`). If a marked file is re-exported through a mixed barrel but never consumed by client code, production may suppress the warning after tree-shaking, but the better fix is still to avoid exposing that server-only edge to client-reachable code at all.
+
+## The `onViolation` Callback
+
+You can hook into violations for custom reporting or to override the verdict:
+
+```ts
+importProtection: {
+  onViolation: async (info) => {
+    // info.env -- environment name (e.g. 'client', 'ssr', ...)
+    // info.envType -- 'client' or 'server'
+    // info.type -- 'specifier', 'file', or 'marker'
+    // info.specifier -- the raw import string
+    // info.importer -- absolute path of the importing file
+    // info.resolved -- absolute path of the resolved target (if available)
+    // info.trace -- array of { file, line?, column?, specifier? } objects
+    // info.snippet -- { lines, highlightLine, location } with the source code snippet (if available)
+
+    // Return false (or Promise<false>) to allow this specific import (override the denial)
+    if (info.specifier === 'some-special-case') {
+      return false
+    }
+  },
+}
+```
+
+## Disabling Import Protection
+
+To disable import protection entirely:
+
+```ts
+importProtection: {
+  enabled: false,
+}
+```
+
+## Full Configuration Reference
+
+```ts
+interface ImportProtectionOptions {
+  enabled?: boolean
+  behavior?:
+    | 'error'
+    | 'mock'
+    | { dev?: 'error' | 'mock'; build?: 'error' | 'mock' }
+  log?: 'once' | 'always'
+  include?: Array<string | RegExp>
+  exclude?: Array<string | RegExp>
+  ignoreImporters?: Array<string | RegExp>
+  maxTraceDepth?: number
+  client?: {
+    specifiers?: Array<string | RegExp>
+    files?: Array<string | RegExp>
+    excludeFiles?: Array<string | RegExp>
+  }
+  server?: {
+    specifiers?: Array<string | RegExp>
+    files?: Array<string | RegExp>
+    excludeFiles?: Array<string | RegExp>
+  }
+  onViolation?: (
+    info: ViolationInfo,
+  ) => boolean | void | Promise<boolean | void>
+}
+```
+
+| Option                | Type                 | Default                           | Description                                                                                                                                                           |
+| --------------------- | -------------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`             | `boolean`            | `true`                            | Set to `false` to disable the plugin                                                                                                                                  |
+| `behavior`            | `string \| object`   | `{ dev: 'mock', build: 'error' }` | What to do on violation                                                                                                                                               |
+| `log`                 | `'once' \| 'always'` | `'once'`                          | Whether to deduplicate repeated violations                                                                                                                            |
+| `include`             | `Pattern[]`          | Start's `srcDirectory`            | Only check importers matching these patterns                                                                                                                          |
+| `exclude`             | `Pattern[]`          | `[]`                              | Skip importers matching these patterns                                                                                                                                |
+| `ignoreImporters`     | `Pattern[]`          | `[]`                              | Ignore violations from these importers                                                                                                                                |
+| `maxTraceDepth`       | `number`             | `20`                              | Maximum depth for import traces                                                                                                                                       |
+| `client`              | `object`             | See defaults above                | Additional deny rules for the client environment                                                                                                                      |
+| `client.specifiers`   | `Pattern[]`          | Framework server specifiers       | Specifier patterns denied in the client environment (additive with defaults)                                                                                          |
+| `client.files`        | `Pattern[]`          | `['**/*.server.*']`               | File patterns denied in the client environment (replaces defaults)                                                                                                    |
+| `client.excludeFiles` | `Pattern[]`          | `['**/node_modules/**']`          | Resolved files matching these patterns skip resolved-target checks (file-pattern + marker) (replaces defaults)                                                        |
+| `server`              | `object`             | See defaults above                | Additional deny rules for the server environment                                                                                                                      |
+| `server.specifiers`   | `Pattern[]`          | `[]`                              | Specifier patterns denied in the server environment (replaces defaults; defaults for `server.specifiers` are `[]`, so unlike `client.specifiers` this isn't additive) |
+| `server.files`        | `Pattern[]`          | `['**/*.client.*']`               | File patterns denied in the server environment (replaces defaults)                                                                                                    |
+| `server.excludeFiles` | `Pattern[]`          | `['**/node_modules/**']`          | Resolved files matching these patterns skip resolved-target checks (file-pattern + marker) (replaces defaults)                                                        |
+| `onViolation`         | `function`           | `undefined`                       | Callback invoked on every violation                                                                                                                                   |
diff --git a/mintlify/start/framework/react/guide/isr.md b/mintlify/start/framework/react/guide/isr.md
new file mode 100644
index 000000000..19c14f50c
--- /dev/null
+++ b/mintlify/start/framework/react/guide/isr.md
@@ -0,0 +1,496 @@
+---
+id: isr
+title: Incremental Static Regeneration (ISR)
+---
+
+Incremental Static Regeneration (ISR) allows you to serve statically generated content from a CDN while periodically regenerating it in the background. This gives you the performance benefits of static sites with the freshness of dynamic content.
+
+## How ISR Works in TanStack Start
+
+TanStack Start's approach to ISR is flexible and leverages standard HTTP cache headers that work with any CDN. Unlike framework-specific ISR implementations, this approach gives you full control over caching behavior at both the page and data level.
+
+The core concept is simple:
+
+1. **Static Prerendering**: Pages are generated at build time
+2. **CDN Caching**: Cache headers control how long CDNs cache the HTML
+3. **Revalidation**: After the cache expires, the next request triggers regeneration
+4. **Stale-While-Revalidate**: Serve stale content while fetching fresh data in the background
+
+## Cache Header Strategies
+
+### Time-Based Revalidation
+
+The most common ISR pattern uses the `Cache-Control` header with `max-age` and `s-maxage` directives:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        routes: ['/blog', '/blog/posts/*'],
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    tanstackStart({
+      prerender: {
+        routes: ['/blog', '/blog/posts/*'],
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+
+
+```tsx
+// routes/blog/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/blog/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  headers: () => ({
+    // Cache at CDN for 1 hour, allow stale content for up to 1 day
+    'Cache-Control':
+      'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400',
+  }),
+})
+
+export default function BlogPost() {
+  const { post } = Route.useLoaderData()
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div>{post.content}</div>
+    </article>
+  )
+}
+```
+
+### Understanding Cache-Control Directives
+
+- **`public`**: Response can be cached by any cache (CDN, browser, etc.)
+- **`max-age=3600`**: Content is fresh for 3600 seconds (1 hour)
+- **`s-maxage=3600`**: Overrides max-age for shared caches (CDNs)
+- **`stale-while-revalidate=86400`**: Serve stale content while revalidating in background for up to 24 hours
+- **`immutable`**: Content never changes (use for hash-based assets)
+
+## ISR with Server Functions
+
+Server functions can also set cache headers for dynamic data endpoints:
+
+```tsx
+// routes/api/products/$productId.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/products/$productId')({
+  server: {
+    handlers: {
+      GET: async ({ params, request }) => {
+        const product = await db.products.findById(params.productId)
+
+        return Response.json(
+          { product },
+          {
+            headers: {
+              'Cache-Control':
+                'public, max-age=300, stale-while-revalidate=600',
+              'CDN-Cache-Control': 'max-age=3600', // Cloudflare-specific
+            },
+          },
+        )
+      },
+    },
+  },
+})
+```
+
+### Using Middleware for Cache Headers
+
+For API routes, you can use middleware to set cache headers:
+
+```tsx
+// routes/api/products/$productId.ts
+import { createFileRoute } from '@tanstack/react-router'
+import { createMiddleware } from '@tanstack/react-start'
+
+const cacheMiddleware = createMiddleware().server(async ({ next }) => {
+  const result = await next()
+
+  // Add cache headers to the response
+  result.response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, stale-while-revalidate=86400',
+  )
+
+  return result
+})
+
+export const Route = createFileRoute('/api/products/$productId')({
+  server: {
+    middleware: [cacheMiddleware],
+    handlers: {
+      GET: async ({ params }) => {
+        const product = await db.products.findById(params.productId)
+        return Response.json({ product })
+      },
+    },
+  },
+})
+```
+
+For page routes, it's simpler to use the `headers` property directly:
+
+```tsx
+// routes/blog/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/blog/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  headers: () => ({
+    'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',
+  }),
+})
+```
+
+## On-Demand Revalidation
+
+While time-based revalidation works well for most cases, you may need to invalidate specific pages immediately (e.g., when content is updated):
+
+```tsx
+// routes/api/revalidate.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/api/revalidate')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { path, secret } = await request.json()
+
+        // Verify secret token
+        if (secret !== process.env.REVALIDATE_SECRET) {
+          return Response.json({ error: 'Invalid token' }, { status: 401 })
+        }
+
+        // Trigger CDN purge via your CDN's API
+        await fetch(
+          `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
+          {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${CF_API_TOKEN}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              files: [`https://yoursite.com${path}`],
+            }),
+          },
+        )
+
+        return Response.json({ revalidated: true })
+      },
+    },
+  },
+})
+```
+
+## CDN-Specific Configuration
+
+### Cloudflare Workers
+
+Cloudflare respects standard `Cache-Control` headers and provides additional control:
+
+```tsx
+export const Route = createFileRoute('/products/$id')({
+  headers: () => ({
+    'Cache-Control': 'public, max-age=3600',
+    // Cloudflare-specific header for finer control
+    'CDN-Cache-Control': 'max-age=7200',
+  }),
+})
+```
+
+### Netlify
+
+Netlify uses `Cache-Control` headers and also supports `_headers` files:
+
+```plaintext
+# public/_headers
+/blog/*
+  Cache-Control: public, max-age=3600, stale-while-revalidate=86400
+
+/api/*
+  Cache-Control: public, max-age=300
+```
+
+### Vercel
+
+When deploying to Vercel, use their Edge Network cache headers:
+
+```tsx
+export const Route = createFileRoute('/posts/$id')({
+  headers: () => ({
+    'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+  }),
+})
+```
+
+## Combining ISR with Client-Side Caching
+
+TanStack Router's built-in cache control works alongside CDN caching:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+  // CDN caching (via headers)
+  headers: () => ({
+    'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',
+  }),
+  // Client-side caching (via TanStack Router)
+  staleTime: 60_000, // Consider data fresh for 60 seconds on client
+  gcTime: 5 * 60_000, // Keep in memory for 5 minutes
+})
+```
+
+This creates a multi-tier caching strategy:
+
+1. **CDN Edge**: 1 hour cache, stale-while-revalidate for 24 hours
+2. **Client**: 60 seconds of fresh data, 5 minutes in memory
+
+## Common ISR Patterns
+
+### Blog Posts
+
+```tsx
+export const Route = createFileRoute('/blog/$slug')({
+  loader: async ({ params }) => fetchPost(params.slug),
+  headers: () => ({
+    // Cache for 1 hour, allow stale for 7 days
+    'Cache-Control': 'public, max-age=3600, stale-while-revalidate=604800',
+  }),
+  staleTime: 5 * 60_000, // 5 minutes client-side
+})
+```
+
+### E-commerce Product Pages
+
+```tsx
+export const Route = createFileRoute('/products/$id')({
+  loader: async ({ params }) => fetchProduct(params.id),
+  headers: () => ({
+    // Shorter cache due to inventory changes
+    'Cache-Control': 'public, max-age=300, stale-while-revalidate=3600',
+  }),
+  staleTime: 30_000, // 30 seconds client-side
+})
+```
+
+### Marketing Landing Pages
+
+```tsx
+export const Route = createFileRoute('/landing/$campaign')({
+  loader: async ({ params }) => fetchCampaign(params.campaign),
+  headers: () => ({
+    // Long cache for stable content
+    'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800',
+  }),
+  staleTime: 60 * 60_000, // 1 hour client-side
+})
+```
+
+### User-Specific Pages
+
+```tsx
+export const Route = createFileRoute('/dashboard')({
+  loader: async () => fetchUserData(),
+  headers: () => ({
+    // Private cache, no CDN caching
+    'Cache-Control': 'private, max-age=60',
+  }),
+  staleTime: 30_000,
+})
+```
+
+## Best Practices
+
+### 1. Start Conservative
+
+Begin with shorter cache times and increase as you understand your content update patterns:
+
+```tsx
+// Start here
+'Cache-Control': 'public, max-age=300, stale-while-revalidate=600'
+
+// Then move to
+'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400'
+```
+
+### 2. Use ETags for Validation
+
+ETags help CDNs efficiently revalidate content:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+import crypto from 'crypto'
+
+const etagMiddleware = createMiddleware().server(async ({ next }) => {
+  const result = await next()
+
+  // Generate ETag from response content
+  const etag = crypto
+    .createHash('md5')
+    .update(JSON.stringify(result.data))
+    .digest('hex')
+
+  result.response.headers.set('ETag', `"${etag}"`)
+
+  return result
+})
+```
+
+### 3. Vary Cache by Query Parameters
+
+When content varies by query params, include them in cache keys:
+
+```tsx
+export const Route = createFileRoute('/search')({
+  headers: () => ({
+    'Cache-Control': 'public, max-age=300',
+    Vary: 'Accept, Accept-Encoding',
+  }),
+})
+```
+
+### 4. Monitor Cache Hit Rates
+
+Track CDN performance to optimize cache times:
+
+```tsx
+const cacheMonitoringMiddleware = createMiddleware().server(
+  async ({ next }) => {
+    const result = await next()
+
+    // Log cache status (from CDN headers)
+    console.log('Cache Status:', result.response.headers.get('cf-cache-status'))
+
+    return result
+  },
+)
+```
+
+### 5. Combine with Static Prerendering
+
+Prerender at build time for instant first load, then use ISR for updates:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        routes: ['/blog', '/blog/posts/*'],
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    tanstackStart({
+      prerender: {
+        routes: ['/blog', '/blog/posts/*'],
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+
+
+## Debugging ISR
+
+### Check Cache Headers
+
+Use browser DevTools or curl to inspect cache headers:
+
+```bash
+curl -I https://yoursite.com/blog/my-post
+
+# Look for:
+# Cache-Control: public, max-age=3600, stale-while-revalidate=86400
+# Age: 1234 (time in cache)
+# X-Cache: HIT (from CDN)
+```
+
+### Test Revalidation
+
+Force cache misses to test regeneration:
+
+```bash
+# Cloudflare: Bypass cache
+curl -H "Cache-Control: no-cache" https://yoursite.com/page
+
+# Or use CDN-specific cache purge APIs
+```
+
+### Monitor Performance
+
+Track key metrics:
+
+- **Cache Hit Rate**: Percentage of requests served from cache
+- **Revalidation Time**: Time to regenerate stale content
+- **Time to First Byte (TTFB)**: Should be low for cached content
+
+## Related Resources
+
+- [Static Prerendering](/start/framework/react/guide/static-prerendering) - Build-time page generation
+- [Hosting](/start/framework/react/guide/hosting) - CDN deployment configurations
+- [Server Functions](/start/framework/react/guide/server-functions) - Creating dynamic data endpoints
+- [Data Loading](../../../../router/guide/data-loading) - Client-side cache control
+- [Middleware](/start/framework/react/guide/middleware) - Request/response customization
diff --git a/mintlify/start/framework/react/guide/middleware.md b/mintlify/start/framework/react/guide/middleware.md
new file mode 100644
index 000000000..b757207d0
--- /dev/null
+++ b/mintlify/start/framework/react/guide/middleware.md
@@ -0,0 +1,896 @@
+---
+id: middleware
+title: Middleware
+---
+
+## What is Middleware?
+
+Middleware allows you to customize the behavior of both server routes like GET/POST/etc (including requests to SSR your application) and server functions created with `createServerFn`. Middleware is composable and can even depend on other middleware to create a chain of operations that are executed hierarchically and in order.
+
+### What kinds of things can I do with Middleware?
+
+- **Authentication**: Verify a user's identity before executing a server function.
+- **Authorization**: Check if a user has the necessary permissions to execute a server function.
+- **Logging**: Log requests, responses, and errors.
+- **CSP**: Configure Content Security Policy and other security measures.
+- **Observability**: Collect metrics, traces, and logs.
+- **Provide Context**: Attach data to the request object for use in other middleware or server functions.
+- **Error Handling**: Handle errors in a consistent way.
+- And many more! The possibilities are up to you!
+
+## Middleware Types
+
+There are two types of middleware: **request middleware** and **server function middleware**.
+
+- **Request middleware** is used to customize the behavior of any server request that passes through it, including server functions.
+- **Server function middleware** is used to customize the behavior of server functions specifically.
+
+> [!NOTE]
+> Server function middleware is a subset of request middleware that has extra functionality specifically for server functions like being able to validate input data or perform client-side logic both before and after the server function is executed.
+
+### Key Differences
+
+| Feature           | Request Middleware               | Server Function Middleware |
+| ----------------- | -------------------------------- | -------------------------- |
+| Scope             | All server requests              | Server functions only      |
+| Methods           | `.server()`                      | `.client()`, `.server()`   |
+| Input Validation  | No                               | Yes (`.validator()`)       |
+| Client-side Logic | No                               | Yes                        |
+| Dependencies      | Can depend on request middleware | Can depend on both types   |
+
+> [!NOTE]
+> Request middleware cannot depend on server function middleware, but server function middleware can depend on request middleware.
+
+## Core Concepts
+
+### Middleware Composition
+
+All middleware is composable, which means that one middleware can depend on another middleware.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(() => {
+  //...
+})
+
+const authMiddleware = createMiddleware()
+  .middleware([loggingMiddleware])
+  .server(() => {
+    //...
+  })
+```
+
+### Progressing the Middleware Chain
+
+Middleware is next-able, which means that you must call the `next` function in the `.server` method (and/or `.client` method if you are creating a server function middleware) to execute the next middleware in the chain. This allows you to:
+
+- Short circuit the middleware chain and return early
+- Pass data to the next middleware
+- Access the result of the next middleware
+- Pass context to the wrapping middleware
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(async ({ next }) => {
+  const result = await next() // <-- This will execute the next middleware in the chain
+  return result
+})
+```
+
+## Request Middleware
+
+Request middleware is used to customize the behavior of any server request that passes through it, including server routes, SSR and server functions.
+
+To create a request middleware, call the `createMiddleware` function. You may call this function with the `type` property set to 'request', but this is the default value so you can omit it if you'd like.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(() => {
+  //...
+})
+```
+
+### Available Methods
+
+Request middleware has the following methods:
+
+- `middleware`: Add a middleware to the chain.
+- `server`: Define server-side logic that the middleware will execute before any nested middleware and ultimately a server function, and also provide the result to the next middleware.
+
+### The `.server` method
+
+The `.server` method is used to define server-side logic that the middleware will execute before any nested middleware, and also provide the result to the next middleware. It receives the `next` method and other things like context and the request object:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(
+  ({ next, context, request }) => {
+    return next()
+  },
+)
+```
+
+To quickly visualize this handshake, here is a diagram:
+
+```mermaid
+sequenceDiagram
+  HTTP ->> Middleware.server: Request
+  Middleware.server ->> Middleware.server: next()
+  Middleware.server ->> ServerFn: payload
+  ServerFn ->> Middleware.server: result
+  Middleware.server ->> Middleware.server: return
+  Middleware.server ->> HTTP: Response
+
+  box Server
+  participant Middleware.server
+  participant ServerFn
+  end
+```
+
+### Using Request Middleware with Server Routes
+
+You can use request middleware with server routes in two ways:
+
+#### All Server Route Methods
+
+To have a server route use middleware for all methods, pass a middleware array to the `middleware` property of the method builder object.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(() => {
+  //...
+})
+
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [loggingMiddleware],
+    handlers: {
+      GET: () => {
+        //...
+      },
+      POST: () => {
+        //...
+      },
+    },
+  },
+})
+```
+
+#### Specific Server Route Methods
+
+You can pass middleware to specific server route methods by using the `createHandlers` utility and passing a middleware array to the `middleware` property of the method object.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware().server(() => {
+  //...
+})
+
+export const Route = createFileRoute('/foo')({
+  server: {
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: {
+          middleware: [loggingMiddleware],
+          handler: () => {
+            //...
+          },
+        },
+      }),
+  },
+})
+```
+
+## Server Function Middleware
+
+Server function middleware is a **subset** of request middleware that has extra functionality specifically for server functions like being able to validate input data or perform client-side logic both before and after the server function is executed.
+
+To create a server function middleware, call the `createMiddleware` function with the `type` property set to 'function'.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware({ type: 'function' })
+  .client(() => {
+    //...
+  })
+  .server(() => {
+    //...
+  })
+```
+
+### Available Methods
+
+Server function middleware has the following methods:
+
+- `middleware`: Add a middleware to the chain.
+- `validator`: Modify the data object before it is passed to this middleware and any nested middleware and eventually the server function.
+- `client`: Define client-side logic that the middleware will execute on the client before (and after) the server function calls into the server to execute the function.
+- `server`: Define server-side logic that the middleware will execute on the server before (and after) the server function is executed.
+
+> [!NOTE]
+> If you are (hopefully) using TypeScript, the order of these methods is enforced by the type system to ensure maximum inference and type safety.
+
+### The `.client` method
+
+The `.client` method is used to define client-side logic that the middleware will wrap the execution and result of the RPC call to the server.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const loggingMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next, context }) => {
+    const result = await next() // <-- This will execute the next middleware in the chain and eventually, the RPC to the server
+    return result
+  },
+)
+```
+
+### The `.validator` method
+
+The `validator` method is used to modify the data object before it is passed to this middleware, nested middleware, and ultimately the server function. This method should receive a function that takes the data object and returns a validated (and optionally modified) data object. It's common to use a validation library like `zod` to do this.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+const mySchema = z.object({
+  workspaceId: z.string(),
+})
+
+const workspaceMiddleware = createMiddleware({ type: 'function' })
+  .validator(zodValidator(mySchema))
+  .server(({ next, data }) => {
+    console.log('Workspace ID:', data.workspaceId)
+    return next()
+  })
+```
+
+### Using Server Function Middleware
+
+To have a middleware wrap a specific server function, you can pass a middleware array to the `middleware` property of the `createServerFn` function.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { loggingMiddleware } from './middleware'
+
+const fn = createServerFn()
+  .middleware([loggingMiddleware])
+  .handler(async () => {
+    //...
+  })
+```
+
+To quickly visualize this handshake, here is a diagram:
+
+```mermaid
+sequenceDiagram
+  ServerFn (client) ->> Middleware.client: payload
+  Middleware.client ->> Middleware.client: next()
+  Middleware.client ->> Middleware.server: Request
+  Middleware.server ->> Middleware.server: next()
+  Middleware.server ->> ServerFn: payload
+  ServerFn ->> Middleware.server: result
+  Middleware.server ->> Middleware.server: return
+  Middleware.server ->> Middleware.client: Response
+  Middleware.client ->> Middleware.client: return
+  Middleware.client ->> ServerFn (client): result
+
+  box Client
+  participant ServerFn (client)
+  participant Middleware.client
+  end
+
+  box Server
+  participant Middleware.server
+  participant ServerFn
+  end
+```
+
+## Context Management
+
+### Providing Context via `next`
+
+The `next` function can be optionally called with an object that has a `context` property with an object value. Whatever properties you pass to this `context` value will be merged into the parent `context` and provided to the next middleware.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const awesomeMiddleware = createMiddleware({ type: 'function' }).server(
+  ({ next }) => {
+    return next({
+      context: {
+        isAwesome: Math.random() > 0.5,
+      },
+    })
+  },
+)
+
+const loggingMiddleware = createMiddleware({ type: 'function' })
+  .middleware([awesomeMiddleware])
+  .server(async ({ next, context }) => {
+    console.log('Is awesome?', context.isAwesome)
+    return next()
+  })
+```
+
+### Sending Client Context to the Server
+
+**Client context is NOT sent to the server by default since this could end up unintentionally sending large payloads to the server.** If you need to send client context to the server, you must call the `next` function with a `sendContext` property and object to transmit any data to the server. Any properties passed to `sendContext` will be merged, serialized and sent to the server along with the data and will be available on the normal context object of any nested server middleware.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const requestLogger = createMiddleware({ type: 'function' })
+  .client(async ({ next, context }) => {
+    return next({
+      sendContext: {
+        // Send the workspace ID to the server
+        workspaceId: context.workspaceId,
+      },
+    })
+  })
+  .server(async ({ next, data, context }) => {
+    // Woah! We have the workspace ID from the client!
+    console.log('Workspace ID:', context.workspaceId)
+    return next()
+  })
+```
+
+#### Client-Sent Context Security
+
+You may have noticed that in the example above while client-sent context is type-safe, it is not required to be validated at runtime. If you pass dynamic user-generated data via context, that could pose a security concern, so **if you are sending dynamic data from the client to the server via context, you should validate it in the server-side middleware before using it.**
+
+> **Shape validation is not authorization.** A parsed UUID/number is a _well-formed_ identifier, not an _authorized_ one. If the value is going to be used as a query key, filter, or path parameter — anything that selects which row(s) get read or written — you must also verify the session principal has access to it. Otherwise a logged-in user can rewrite the value in their own request and walk other tenants' data.
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+import { z } from 'zod'
+
+const requestLogger = createMiddleware({ type: 'function' })
+  .client(async ({ next, context }) => {
+    return next({
+      sendContext: {
+        workspaceId: context.workspaceId,
+      },
+    })
+  })
+  .middleware([authMiddleware]) // session loaded server-side, NOT from sendContext
+  .server(async ({ next, context }) => {
+    // 1. Validate shape
+    const workspaceId = z.string().uuid().parse(context.workspaceId)
+    // 2. Validate access — does this session principal have membership?
+    const member = await db.memberships.find({
+      userId: context.session.userId,
+      workspaceId,
+    })
+    if (!member) throw new Error('Not a member of this workspace')
+    // 3. Now safe to use as a query key.
+    return next({ context: { workspaceId } })
+  })
+```
+
+Always derive the session itself from a server-trusted source (a cookie + DB lookup in `authMiddleware`), never from `sendContext`. Anything the client can send, the client can lie about.
+
+### Sending Server Context to the Client
+
+Similar to sending client context to the server, you can also send server context to the client by calling the `next` function with a `sendContext` property and object to transmit any data to the client. Any properties passed to `sendContext` will be merged, serialized and sent to the client along with the response and will be available on the normal context object of any nested client middleware. The returned object of calling `next` in `client` contains the context sent from server to the client and is type-safe.
+
+> [!WARNING]
+> The return type of `next` in `client` can only be inferred from middleware known in the current middleware chain. Therefore the most accurate return type of `next` is in middleware at the end of the middleware chain
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const serverTimer = createMiddleware({ type: 'function' }).server(
+  async ({ next }) => {
+    return next({
+      sendContext: {
+        // Send the current time to the client
+        timeFromServer: new Date(),
+      },
+    })
+  },
+)
+
+const requestLogger = createMiddleware({ type: 'function' })
+  .middleware([serverTimer])
+  .client(async ({ next }) => {
+    const result = await next()
+    // Woah! We have the time from the server!
+    console.log('Time from the server:', result.context.timeFromServer)
+
+    return result
+  })
+```
+
+## Global Middleware
+
+Global middleware runs automatically for every request in your application. This is useful for functionality like authentication, logging, and monitoring that should apply to all requests.
+
+> [!NOTE]
+> The `src/start.ts` file is not included in the default TanStack Start template. You'll need to create this file when you want to configure global middleware or other Start-level options.
+
+### Global Request Middleware
+
+To have a middleware run for **every request handled by Start**, create a `src/start.ts` file and use the `createStart` function to return your middleware configuration:
+
+```tsx
+// src/start.ts
+import { createStart, createMiddleware } from '@tanstack/react-start'
+
+const myGlobalMiddleware = createMiddleware().server(() => {
+  //...
+})
+
+export const startInstance = createStart(() => {
+  return {
+    requestMiddleware: [myGlobalMiddleware],
+  }
+})
+```
+
+> [!NOTE]
+> Global **request** middleware runs before **every request, including server routes, SSR and server functions**.
+
+### CSRF Middleware
+
+Server functions are same-origin RPC endpoints and should be protected from cross-site requests. If your app does not define `src/start.ts`, TanStack Start installs its CSRF middleware automatically for server functions.
+
+If you define a custom `src/start.ts`, add `createCsrfMiddleware()` explicitly:
+
+```tsx
+// src/start.ts
+import { createStart, createCsrfMiddleware } from '@tanstack/react-start'
+
+const csrfMiddleware = createCsrfMiddleware({
+  filter: (ctx) => ctx.handlerType === 'serverFn',
+})
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [csrfMiddleware],
+}))
+```
+
+By default, `Origin` and `Referer` checks compare against the incoming request URL origin. If your deployment needs to allow a different public origin, configure it on the CSRF middleware with `createCsrfMiddleware({ origin: 'https://app.example.com' })`.
+
+By default, `createCsrfMiddleware()` validates every request handled by the middleware. Use `filter: (ctx) => ctx.handlerType === 'serverFn'` when installing it globally for server function protection. It verifies same-origin browser request metadata with `Sec-Fetch-Site`, `Origin`, or `Referer` headers and rejects requests that cannot be proven same-origin.
+
+You can also use the same middleware to protect any other route.
+
+```tsx
+export const Route = createFileRoute('/api/foo')({
+  server: {
+    middleware: [createCsrfMiddleware()],
+    handlers: { GET: () => {...} }
+  }
+})
+```
+
+If you define `src/start.ts` without the CSRF middleware, Start shows a development warning for server function requests. If you intentionally handle CSRF another way, disable the warning:
+
+```tsx
+// vite.config.ts or rsbuild.config.ts
+tanstackStart({
+  serverFns: {
+    disableCsrfMiddlewareWarning: true,
+  },
+})
+```
+
+### Global Server Function Middleware
+
+To have a middleware run for **every server function in your application**, add it to the `functionMiddleware` array in your `src/start.ts` file:
+
+```tsx
+// src/start.ts
+import { createStart } from '@tanstack/react-start'
+import { loggingMiddleware } from './middleware'
+
+export const startInstance = createStart(() => {
+  return {
+    functionMiddleware: [loggingMiddleware],
+  }
+})
+```
+
+### Middleware Execution Order
+
+Middleware is executed dependency-first, starting with global middleware, followed by server function middleware. The following example will log in this order:
+
+- `globalMiddleware1`
+- `globalMiddleware2`
+- `a`
+- `b`
+- `c`
+- `d`
+- `fn`
+
+```tsx
+import { createMiddleware, createServerFn } from '@tanstack/react-start'
+
+const globalMiddleware1 = createMiddleware({ type: 'function' }).server(
+  async ({ next }) => {
+    console.log('globalMiddleware1')
+    return next()
+  },
+)
+
+const globalMiddleware2 = createMiddleware({ type: 'function' }).server(
+  async ({ next }) => {
+    console.log('globalMiddleware2')
+    return next()
+  },
+)
+
+const a = createMiddleware({ type: 'function' }).server(async ({ next }) => {
+  console.log('a')
+  return next()
+})
+
+const b = createMiddleware({ type: 'function' })
+  .middleware([a])
+  .server(async ({ next }) => {
+    console.log('b')
+    return next()
+  })
+
+const c = createMiddleware({ type: 'function' })
+  .middleware()
+  .server(async ({ next }) => {
+    console.log('c')
+    return next()
+  })
+
+const d = createMiddleware({ type: 'function' })
+  .middleware([b, c])
+  .server(async () => {
+    console.log('d')
+  })
+
+const fn = createServerFn()
+  .middleware([d])
+  .server(async () => {
+    console.log('fn')
+  })
+```
+
+## Request and Response Modification
+
+### Reading/Modifying the Server Response
+
+Middleware that uses the `server` method executes in the same context as server functions, so you can follow the exact same [Server Function Context Utilities](/start/framework/react/guide/server-functions#server-function-context) to read and modify anything about the request headers, status codes, etc.
+
+### Modifying the Client Request
+
+Middleware that uses the `client` method executes in a **completely different client-side context** than server functions, so you can't use the same utilities to read and modify the request. However, you can still modify the request by returning additional properties when calling the `next` function.
+
+#### Setting Custom Headers
+
+You can add headers to the outgoing request by passing a `headers` object to `next`:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+import { getToken } from 'my-auth-library'
+
+const authMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    return next({
+      headers: {
+        Authorization: `Bearer ${getToken()}`,
+      },
+    })
+  },
+)
+```
+
+#### Header Merging Across Middleware
+
+When multiple middlewares set headers, they are **merged together**. Later middlewares can add new headers or override headers set by earlier middlewares:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const firstMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    return next({
+      headers: {
+        'X-Request-ID': '12345',
+        'X-Source': 'first-middleware',
+      },
+    })
+  },
+)
+
+const secondMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    return next({
+      headers: {
+        'X-Timestamp': Date.now().toString(),
+        'X-Source': 'second-middleware', // Overrides first middleware
+      },
+    })
+  },
+)
+
+// Final headers will include:
+// - X-Request-ID: '12345' (from first)
+// - X-Timestamp: '<timestamp>' (from second)
+// - X-Source: 'second-middleware' (second overrides first)
+```
+
+You can also set headers directly at the call site:
+
+```tsx
+await myServerFn({
+  data: { name: 'John' },
+  headers: {
+    'X-Custom-Header': 'call-site-value',
+  },
+})
+```
+
+**Header precedence (all headers are merged, later values override earlier):**
+
+1. Earlier middleware headers
+2. Later middleware headers (override earlier)
+3. Call-site headers (override all middleware headers)
+
+#### Custom Fetch Implementation
+
+For advanced use cases, you can provide a custom `fetch` implementation to control how server function requests are made. This is useful for:
+
+- Adding request interceptors or retry logic
+- Using a custom HTTP client
+- Testing and mocking
+- Adding telemetry or monitoring
+
+**Via Client Middleware:**
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+import type { CustomFetch } from '@tanstack/react-start'
+
+const customFetchMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    const customFetch: CustomFetch = async (url, init) => {
+      console.log('Request starting:', url)
+      const start = Date.now()
+
+      const response = await fetch(url, init)
+
+      console.log('Request completed in', Date.now() - start, 'ms')
+      return response
+    }
+
+    return next({ fetch: customFetch })
+  },
+)
+```
+
+**Directly at Call Site:**
+
+```tsx
+import type { CustomFetch } from '@tanstack/react-start'
+
+const myFetch: CustomFetch = async (url, init) => {
+  // Add custom logic here
+  return fetch(url, init)
+}
+
+await myServerFn({
+  data: { name: 'John' },
+  fetch: myFetch,
+})
+```
+
+#### Fetch Override Precedence
+
+When custom fetch implementations are provided at multiple levels, the following precedence applies (highest to lowest priority):
+
+| Priority    | Source             | Description                                          |
+| ----------- | ------------------ | ---------------------------------------------------- |
+| 1 (highest) | Call site          | `serverFn({ fetch: customFetch })`                   |
+| 2           | Later middleware   | Last middleware in chain that provides `fetch`       |
+| 3           | Earlier middleware | First middleware in chain that provides `fetch`      |
+| 4           | createStart        | `createStart({ serverFns: { fetch: customFetch } })` |
+| 5 (lowest)  | Default            | Global `fetch` function                              |
+
+**Key principle:** The call site always wins. This allows you to override middleware behavior for specific calls when needed.
+
+```tsx
+import { createMiddleware, createServerFn } from '@tanstack/react-start'
+import type { CustomFetch } from '@tanstack/react-start'
+
+// Middleware sets a fetch that adds logging
+const loggingMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    const loggingFetch: CustomFetch = async (url, init) => {
+      console.log('Middleware fetch:', url)
+      return fetch(url, init)
+    }
+    return next({ fetch: loggingFetch })
+  },
+)
+
+const myServerFn = createServerFn()
+  .middleware([loggingMiddleware])
+  .handler(async () => {
+    return { message: 'Hello' }
+  })
+
+// Uses middleware's loggingFetch
+await myServerFn()
+
+// Override with custom fetch for this specific call
+const testFetch: CustomFetch = async (url, init) => {
+  console.log('Test fetch:', url)
+  return fetch(url, init)
+}
+await myServerFn({ fetch: testFetch }) // Uses testFetch, NOT loggingFetch
+```
+
+**Chained Middleware Example:**
+
+When multiple middlewares provide fetch, the last one wins:
+
+```tsx
+import { createMiddleware, createServerFn } from '@tanstack/react-start'
+import type { CustomFetch } from '@tanstack/react-start'
+
+const firstMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    const firstFetch: CustomFetch = (url, init) => {
+      const headers = new Headers(init?.headers)
+      headers.set('X-From', 'first-middleware')
+      return fetch(url, { ...init, headers })
+    }
+    return next({ fetch: firstFetch })
+  },
+)
+
+const secondMiddleware = createMiddleware({ type: 'function' }).client(
+  async ({ next }) => {
+    const secondFetch: CustomFetch = (url, init) => {
+      const headers = new Headers(init?.headers)
+      headers.set('X-From', 'second-middleware')
+      return fetch(url, { ...init, headers })
+    }
+    return next({ fetch: secondFetch })
+  },
+)
+
+const myServerFn = createServerFn()
+  .middleware([firstMiddleware, secondMiddleware])
+  .handler(async () => {
+    // Request will have X-From: 'second-middleware'
+    // because secondMiddleware's fetch overrides firstMiddleware's fetch
+    return { message: 'Hello' }
+  })
+```
+
+**Global Fetch via createStart:**
+
+You can set a default custom fetch for all server functions in your application by providing `serverFns.fetch` in `createStart`. This is useful for adding global request interceptors, retry logic, or telemetry:
+
+```tsx
+// src/start.ts
+import { createStart } from '@tanstack/react-start'
+import type { CustomFetch } from '@tanstack/react-start'
+
+const globalFetch: CustomFetch = async (url, init) => {
+  console.log('Global fetch:', url)
+  // Add retry logic, telemetry, etc.
+  return fetch(url, init)
+}
+
+export const startInstance = createStart(() => {
+  return {
+    serverFns: {
+      fetch: globalFetch,
+    },
+  }
+})
+```
+
+This global fetch has lower priority than middleware and call-site fetch, so you can still override it for specific server functions or calls when needed.
+
+> [!NOTE]
+> Custom fetch only applies on the client side. During SSR, server functions are called directly without going through fetch.
+
+## Environment and Performance
+
+### Environment Tree Shaking
+
+Middleware functionality is tree-shaken based on the environment for each bundle produced.
+
+- On the server, nothing is tree-shaken, so all code used in middleware will be included in the server bundle.
+- On the client, all server-specific code is removed from the client bundle. This means any code used in the `server` method is always removed from the client bundle. `data` validation code will also be removed.
+
+## Middleware Factories
+
+Static middlewares are created once and reused across routes. A middleware factory wraps that creation in a function, allowing it to accept parameters and behave differently depending on the caller's needs. Authorization is a common use case.
+
+**Authentication (Static Base Middleware) Example:**
+
+This middleware validates the session and injects it into `context` for downstream middlewares.
+
+> **Attach `authMiddleware` to every `createServerFn` that needs auth.** Server functions are API endpoints, so protect the endpoint that reads or mutates private data. A route `beforeLoad` guard improves route UX, but it is not the data boundary. See [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives).
+
+```tsx
+// middleware.ts
+import { createMiddleware } from '@tanstack/react-start'
+import { auth } from './my-auth'
+
+export const authMiddleware = createMiddleware().server(
+  async ({ next, request }) => {
+    const session = await auth.getSession({ headers: request.headers })
+
+    if (!session) {
+      throw new Error('Unauthorized')
+    }
+
+    return await next({
+      context: { session },
+    })
+  },
+)
+```
+
+**Authorization (Middleware Factory) Example:**
+
+The middleware validates access based on the dynamic `permissions` parameter, composing with `authMiddleware` so `context.session` is already available.
+
+```tsx
+// middleware.ts
+import { createMiddleware } from '@tanstack/react-start'
+import { auth } from './my-auth'
+
+export const authMiddleware = createMiddleware().server(
+  async ({ next, request }) => {
+    // ... (implementation from authentication example above)
+  },
+)
+
+type Permissions = Record<string, string[]>
+
+export function authorizationMiddleware(permissions: Permissions) {
+  return createMiddleware({ type: 'function' })
+    .middleware([authMiddleware])
+    .server(async ({ next, context }) => {
+      const granted = await auth.hasPermission(context.session, permissions)
+
+      if (!granted) {
+        throw new Error('Forbidden')
+      }
+
+      return await next()
+    })
+}
+```
+
+**Usage in a Server Function:**
+
+Access requirements are defined per server function, without duplicating any middleware logic.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { authorizationMiddleware } from './middleware'
+
+export const getClients = createServerFn()
+  .middleware([
+    authorizationMiddleware({
+      client: ['read'],
+    }),
+  ])
+  .handler(async ({ context }) => {
+    return { message: 'The user can read clients.' }
+  })
+```
diff --git a/mintlify/start/framework/react/guide/observability.md b/mintlify/start/framework/react/guide/observability.md
new file mode 100644
index 000000000..c9459ad26
--- /dev/null
+++ b/mintlify/start/framework/react/guide/observability.md
@@ -0,0 +1,777 @@
+---
+id: observability
+title: Observability
+---
+
+Observability is a critical aspect of modern web development, enabling you to monitor, trace, and debug your application's performance and errors. TanStack Start provides built-in patterns for observability and integrates seamlessly with external tools to give you comprehensive insights into your application.
+
+## Partner Solution: Sentry
+
+<a href="https://sentry.io?utm_source=tanstack" alt='Sentry Logo'>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-light.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-dark.svg" width="280" />
+    <img alt="Sentry logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-light.svg" width="280" />
+  </picture>
+</a>
+
+For comprehensive observability, we recommend [Sentry](https://sentry.io?utm_source=tanstack) - our trusted partner for error tracking and performance monitoring. Sentry provides:
+
+- **Real-time Error Tracking** - Catch and debug errors across your entire stack
+- **Performance Monitoring** - Track slow transactions and optimize bottlenecks
+- **Release Health** - Monitor deployments and track error rates over time
+- **User Impact Analysis** - Understand how errors affect your users
+- **TanStack Start Integration** - Works seamlessly with server functions and client code
+
+**Quick Setup:**
+
+```tsx
+// Client-side (app.tsx)
+import * as Sentry from '@sentry/react'
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  environment: import.meta.env.NODE_ENV,
+})
+
+// Server functions
+import * as Sentry from '@sentry/node'
+
+const serverFn = createServerFn().handler(async () => {
+  try {
+    return await riskyOperation()
+  } catch (error) {
+    Sentry.captureException(error)
+    throw error
+  }
+})
+```
+
+[Get started with Sentry →](https://sentry.io/signup?utm_source=tanstack) | [View integration example →](https://github.com/TanStack/router/tree/main/e2e/react-router/sentry-integration)
+
+## Built-in Observability Patterns
+
+TanStack Start's architecture provides several opportunities for built-in observability without external dependencies:
+
+### Server Function Logging
+
+Add logging to your server functions to track execution, performance, and errors:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+const getUser = createServerFn({ method: 'GET' })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    const startTime = Date.now()
+
+    try {
+      console.log(`[SERVER] Fetching user ${id}`)
+
+      const user = await db.users.findUnique({ where: { id } })
+
+      if (!user) {
+        console.log(`[SERVER] User ${id} not found`)
+        throw new Error('User not found')
+      }
+
+      const duration = Date.now() - startTime
+      console.log(`[SERVER] User ${id} fetched in ${duration}ms`)
+
+      return user
+    } catch (error) {
+      const duration = Date.now() - startTime
+      console.error(
+        `[SERVER] Error fetching user ${id} after ${duration}ms:`,
+        error,
+      )
+      throw error
+    }
+  })
+```
+
+### Request/Response Middleware
+
+Create middleware to log all requests and responses:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const requestLogger = createMiddleware().server(async ({ request, next }) => {
+  const startTime = Date.now()
+  const timestamp = new Date().toISOString()
+
+  console.log(`[${timestamp}] ${request.method} ${request.url} - Starting`)
+
+  try {
+    const result = await next()
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[${timestamp}] ${request.method} ${request.url} - ${result.response.status} (${duration}ms)`,
+    )
+
+    return result
+  } catch (error) {
+    const duration = Date.now() - startTime
+    console.error(
+      `[${timestamp}] ${request.method} ${request.url} - Error (${duration}ms):`,
+      error,
+    )
+    throw error
+  }
+})
+
+// Apply to all server routes
+export const Route = createFileRoute('/api/users')({
+  server: {
+    middleware: [requestLogger],
+    handlers: {
+      GET: async () => {
+        return Response.json({ users: await getUsers() })
+      },
+    },
+  },
+})
+```
+
+### Route Performance Monitoring
+
+Track route loading performance on both client and server:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard')({
+  loader: async ({ context }) => {
+    const startTime = Date.now()
+
+    try {
+      const data = await loadDashboardData()
+      const duration = Date.now() - startTime
+
+      // Log server-side performance
+      if (typeof window === 'undefined') {
+        console.log(`[SSR] Dashboard loaded in ${duration}ms`)
+      }
+
+      return data
+    } catch (error) {
+      const duration = Date.now() - startTime
+      console.error(`[LOADER] Dashboard error after ${duration}ms:`, error)
+      throw error
+    }
+  },
+  component: Dashboard,
+})
+
+function Dashboard() {
+  const data = Route.useLoaderData()
+
+  // Track client-side render time
+  React.useEffect(() => {
+    const renderTime = performance.now()
+    console.log(`[CLIENT] Dashboard rendered in ${renderTime}ms`)
+  }, [])
+
+  return <div>Dashboard content</div>
+}
+```
+
+### Health Check Endpoints
+
+Create server routes for health monitoring:
+
+```tsx
+// routes/health.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/health')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const checks = {
+          status: 'healthy',
+          timestamp: new Date().toISOString(),
+          uptime: process.uptime(),
+          memory: process.memoryUsage(),
+          database: await checkDatabase(),
+          version: process.env.npm_package_version,
+        }
+
+        return Response.json(checks)
+      },
+    },
+  },
+})
+
+async function checkDatabase() {
+  try {
+    await db.raw('SELECT 1')
+    return { status: 'connected', latency: 0 }
+  } catch (error) {
+    return { status: 'error', error: error.message }
+  }
+}
+```
+
+### Error Boundaries
+
+Implement comprehensive error handling:
+
+```tsx
+// Client-side error boundary
+import { ErrorBoundary } from 'react-error-boundary'
+
+function ErrorFallback({ error, resetErrorBoundary }: any) {
+  // Log client errors
+  console.error('[CLIENT ERROR]:', error)
+
+  // Could also send to external service
+  // sendErrorToService(error)
+
+  return (
+    <div role="alert">
+      <h2>Something went wrong</h2>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Router />
+    </ErrorBoundary>
+  )
+}
+
+// Server function error handling
+const riskyOperation = createServerFn().handler(async () => {
+  try {
+    return await performOperation()
+  } catch (error) {
+    // Log server errors with context
+    console.error('[SERVER ERROR]:', {
+      error: error.message,
+      stack: error.stack,
+      timestamp: new Date().toISOString(),
+      // Add request context if available
+    })
+
+    // Return user-friendly error
+    throw new Error('Operation failed. Please try again.')
+  }
+})
+```
+
+### Performance Metrics Collection
+
+Collect and expose basic performance metrics:
+
+```tsx
+// utils/metrics.ts
+class MetricsCollector {
+  private metrics = new Map<string, number[]>()
+
+  recordTiming(name: string, duration: number) {
+    if (!this.metrics.has(name)) {
+      this.metrics.set(name, [])
+    }
+    this.metrics.get(name)!.push(duration)
+  }
+
+  getStats(name: string) {
+    const timings = this.metrics.get(name) || []
+    if (timings.length === 0) return null
+
+    const sorted = timings.sort((a, b) => a - b)
+    return {
+      count: timings.length,
+      avg: timings.reduce((a, b) => a + b, 0) / timings.length,
+      p50: sorted[Math.floor(sorted.length * 0.5)],
+      p95: sorted[Math.floor(sorted.length * 0.95)],
+      min: sorted[0],
+      max: sorted[sorted.length - 1],
+    }
+  }
+
+  getAllStats() {
+    const stats: Record<string, any> = {}
+    for (const [name] of this.metrics) {
+      stats[name] = this.getStats(name)
+    }
+    return stats
+  }
+}
+
+export const metrics = new MetricsCollector()
+
+// Metrics endpoint
+// routes/metrics.ts
+export const Route = createFileRoute('/metrics')({
+  server: {
+    handlers: {
+      GET: async () => {
+        return Response.json({
+          system: {
+            uptime: process.uptime(),
+            memory: process.memoryUsage(),
+            timestamp: new Date().toISOString(),
+          },
+          application: metrics.getAllStats(),
+        })
+      },
+    },
+  },
+})
+```
+
+### Debug Headers for Development
+
+Add helpful debug information to responses:
+
+```tsx
+import { createMiddleware } from '@tanstack/react-start'
+
+const debugMiddleware = createMiddleware().server(async ({ next }) => {
+  const result = await next()
+
+  if (process.env.NODE_ENV === 'development') {
+    result.response.headers.set('X-Debug-Timestamp', new Date().toISOString())
+    result.response.headers.set('X-Debug-Node-Version', process.version)
+    result.response.headers.set('X-Debug-Uptime', process.uptime().toString())
+  }
+
+  return result
+})
+```
+
+### Environment-Specific Logging
+
+Configure different logging strategies for development vs production:
+
+```tsx
+// utils/logger.ts
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error'
+
+const logger = createIsomorphicFn()
+  .server((level: LogLevel, message: string, data?: any) => {
+    const timestamp = new Date().toISOString()
+
+    if (process.env.NODE_ENV === 'development') {
+      // Development: Detailed console logging
+      console[level](`[${timestamp}] [${level.toUpperCase()}]`, message, data)
+    } else {
+      // Production: Structured JSON logging
+      console.log(
+        JSON.stringify({
+          timestamp,
+          level,
+          message,
+          data,
+          service: 'tanstack-start',
+          environment: process.env.NODE_ENV,
+        }),
+      )
+    }
+  })
+  .client((level: LogLevel, message: string, data?: any) => {
+    if (process.env.NODE_ENV === 'development') {
+      console[level](`[CLIENT] [${level.toUpperCase()}]`, message, data)
+    } else {
+      // Production: Send to analytics service
+      // analytics.track('client_log', { level, message, data })
+    }
+  })
+
+// Usage anywhere in your app
+export { logger }
+
+// Example usage
+const fetchUserData = createServerFn().handler(async ({ data: userId }) => {
+  logger('info', 'Fetching user data', { userId })
+
+  try {
+    const user = await db.users.findUnique({ where: { id: userId } })
+    logger('info', 'User data fetched successfully', { userId })
+    return user
+  } catch (error) {
+    logger('error', 'Failed to fetch user data', {
+      userId,
+      error: error.message,
+    })
+    throw error
+  }
+})
+```
+
+### Simple Error Reporting
+
+Basic error reporting without external dependencies:
+
+```tsx
+// utils/error-reporter.ts
+const errorStore = new Map<
+  string,
+  { count: number; lastSeen: Date; error: any }
+>()
+
+export function reportError(error: Error, context?: any) {
+  const key = `${error.name}:${error.message}`
+  const existing = errorStore.get(key)
+
+  if (existing) {
+    existing.count++
+    existing.lastSeen = new Date()
+  } else {
+    errorStore.set(key, {
+      count: 1,
+      lastSeen: new Date(),
+      error: {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        context,
+      },
+    })
+  }
+
+  // Log immediately
+  console.error('[ERROR REPORTED]:', {
+    error: error.message,
+    count: existing ? existing.count : 1,
+    context,
+  })
+}
+
+// Error reporting endpoint
+// routes/errors.ts
+export const Route = createFileRoute('/admin/errors')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const errors = Array.from(errorStore.entries()).map(([key, data]) => ({
+          id: key,
+          ...data,
+        }))
+
+        return Response.json({ errors })
+      },
+    },
+  },
+})
+```
+
+## External Observability Tools
+
+While TanStack Start provides built-in observability patterns, external tools offer more comprehensive monitoring:
+
+### Other Popular Tools
+
+**Application Performance Monitoring:**
+
+- **[DataDog](https://www.datadoghq.com/)** - Full-stack monitoring with APM
+- **[New Relic](https://newrelic.com/)** - Performance monitoring and alerting
+- **[Honeycomb](https://honeycomb.io/)** - Observability for complex systems
+
+**Error Tracking:**
+
+- **[Bugsnag](https://bugsnag.com/)** - Error monitoring with deployment tracking
+- **[Rollbar](https://rollbar.com/)** - Real-time error alerting
+
+**Analytics & User Behavior:**
+
+- **[PostHog](https://posthog.com/)** - Product analytics with error tracking
+- **[Mixpanel](https://mixpanel.com/)** - Event tracking and user analytics
+
+### New Relic Integration
+
+[New Relic](https://newrelic.com/) is a popular application performance monitoring tool. Here's how to integrate it with TanStack Start.
+
+#### SSR
+
+To enable New Relic for server-side rendering, you will need to do the following:
+
+Create a new integration on New Relic of type `Node`. You will be given a license key that we will use below.
+
+```js
+// newrelic.js - New Relic agent configuration
+exports.config = {
+  app_name: ['YourTanStackApp'], // Your application name in New Relic
+  license_key: 'YOUR_NEW_RELIC_LICENSE_KEY', // Your New Relic license key
+  agent_enabled: true,
+  distributed_tracing: { enabled: true },
+  span_events: { enabled: true },
+  transaction_events: { enabled: true },
+  // Additional default settings
+}
+```
+
+```tsx
+// server.tsx
+import newrelic from 'newrelic' // Make sure this is the first import
+import {
+  createStartHandler,
+  defaultStreamHandler,
+  defineHandlerCallback,
+} from '@tanstack/react-start/server'
+import type { ServerEntry } from '@tanstack/react-start/server-entry'
+
+const customHandler = defineHandlerCallback(async (ctx) => {
+  // We do this so that transactions are grouped under the route ID instead of unique URLs
+  const matches = ctx.router?.state?.matches ?? []
+  const leaf = matches[matches.length - 1]
+  const routeId = leaf?.routeId ?? new URL(ctx.request.url).pathname
+
+  newrelic.setControllerName(routeId, ctx.request.method ?? 'GET')
+  newrelic.addCustomAttributes({
+    'route.id': routeId,
+    'http.method': ctx.request.method,
+    'http.path': new URL(ctx.request.url).pathname,
+    // Any other custom attributes you want to add
+  })
+
+  return defaultStreamHandler(ctx)
+})
+
+export default {
+  fetch(request) {
+    const handler = createStartHandler(customHandler)
+    return handler(request)
+  },
+} satisfies ServerEntry
+```
+
+```bash
+node -r newrelic .output/server/index.mjs
+```
+
+#### Server Functions and Server Routes
+
+If you want to add monitoring for server functions and server routes, you will need to follow the steps above, and then add the following:
+
+```ts
+// newrelic-middleware.ts
+import newrelic from 'newrelic'
+import { createMiddleware } from '@tanstack/react-start'
+
+export const nrTransactionMiddleware = createMiddleware().server(
+  async ({ request, next }) => {
+    const reqPath = new URL(request.url).pathname
+    newrelic.setControllerName(reqPath, request.method ?? 'GET')
+    return await next()
+  },
+)
+```
+
+```ts
+// start.ts
+import { createStart } from '@tanstack/react-start'
+import { nrTransactionMiddleware } from './newrelic-middleware'
+
+export const startInstance = createStart(() => {
+  return {
+    requestMiddleware: [nrTransactionMiddleware],
+  }
+})
+```
+
+#### SPA & Browser
+
+Create a new integration on New Relic of type `React`.
+
+After you set it up, you will have to add the integration script that New Relic provides you with to your root route.
+
+```tsx
+// __root.tsx
+export const Route = createRootRoute({
+  head: () => ({
+    scripts: [
+      {
+        id: 'new-relic',
+
+        // either copy/paste your New Relic integration script here
+        children: `...`,
+
+        // or you can create it in your public folder and then reference it here
+        src: '/newrelic.js',
+      },
+    ],
+  }),
+})
+```
+
+### OpenTelemetry Integration (Experimental)
+
+[OpenTelemetry](https://opentelemetry.io/) is the industry standard for observability. Here's an experimental approach to integrate it with TanStack Start:
+
+```tsx
+// instrumentation.ts - Initialize before your app
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'tanstack-start-app',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '1.0.0',
+  }),
+  instrumentations: [getNodeAutoInstrumentations()],
+})
+
+// Initialize BEFORE importing your app
+sdk.start()
+```
+
+```tsx
+// Server function tracing
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('tanstack-start')
+
+const getUserWithTracing = createServerFn({ method: 'GET' })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    return tracer.startActiveSpan('get-user', async (span) => {
+      span.setAttributes({
+        'user.id': id,
+        operation: 'database.query',
+      })
+
+      try {
+        const user = await db.users.findUnique({ where: { id } })
+        span.setStatus({ code: SpanStatusCode.OK })
+        return user
+      } catch (error) {
+        span.recordException(error)
+        span.setStatus({
+          code: SpanStatusCode.ERROR,
+          message: error.message,
+        })
+        throw error
+      } finally {
+        span.end()
+      }
+    })
+  })
+```
+
+```tsx
+// Middleware for automatic tracing
+import { createMiddleware } from '@tanstack/react-start'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('tanstack-start')
+
+const tracingMiddleware = createMiddleware().server(
+  async ({ next, request }) => {
+    const url = new URL(request.url)
+
+    return tracer.startActiveSpan(
+      `${request.method} ${url.pathname}`,
+      async (span) => {
+        span.setAttributes({
+          'http.method': request.method,
+          'http.url': request.url,
+          'http.route': url.pathname,
+        })
+
+        try {
+          const result = await next()
+          span.setAttribute('http.status_code', result.response.status)
+          span.setStatus({ code: SpanStatusCode.OK })
+          return result
+        } catch (error) {
+          span.recordException(error)
+          span.setStatus({
+            code: SpanStatusCode.ERROR,
+            message: error.message,
+          })
+          throw error
+        } finally {
+          span.end()
+        }
+      },
+    )
+  },
+)
+```
+
+> **Note**: The above OpenTelemetry integration is experimental and requires manual setup. We're exploring first-class OpenTelemetry support that would provide automatic instrumentation for server functions, middleware, and route loaders.
+
+### Quick Integration Pattern
+
+Most observability tools follow a similar integration pattern with TanStack Start:
+
+```tsx
+// Initialize in app entry point
+import { initObservabilityTool } from 'your-tool'
+
+initObservabilityTool({
+  dsn: import.meta.env.VITE_TOOL_DSN,
+  environment: import.meta.env.NODE_ENV,
+})
+
+// Server function middleware
+const observabilityMiddleware = createMiddleware().handler(async ({ next }) => {
+  return yourTool.withTracing('server-function', async () => {
+    try {
+      return await next()
+    } catch (error) {
+      yourTool.captureException(error)
+      throw error
+    }
+  })
+})
+```
+
+## Best Practices
+
+### Development vs Production
+
+```tsx
+// Different strategies per environment
+const observabilityConfig = {
+  development: {
+    logLevel: 'debug',
+    enableTracing: true,
+    enableMetrics: false, // Too noisy in dev
+  },
+  production: {
+    logLevel: 'warn',
+    enableTracing: true,
+    enableMetrics: true,
+    enableAlerting: true,
+  },
+}
+```
+
+### Performance Monitoring Checklist
+
+- [ ] **Server Function Performance**: Track execution times
+- [ ] **Route Loading Times**: Monitor loader performance
+- [ ] **Database Query Performance**: Log slow queries
+- [ ] **External API Latency**: Monitor third-party service calls
+- [ ] **Memory Usage**: Track memory consumption patterns
+- [ ] **Error Rates**: Monitor error frequency and types
+
+### Security Considerations
+
+- Never log sensitive data (passwords, tokens, PII)
+- Use structured logging for better parsing
+- Implement log rotation in production
+- Consider compliance requirements (GDPR, CCPA)
+
+## Future OpenTelemetry Support
+
+Direct OpenTelemetry support is coming to TanStack Start, which will provide automatic instrumentation for server functions, middleware, and route loaders without the manual setup shown above.
+
+## Resources
+
+- **[Sentry Documentation](https://docs.sentry.io/)**
+- **[OpenTelemetry Documentation](https://opentelemetry.io/docs/)** - Industry standard observability
+- **[Working Example](https://github.com/TanStack/router/tree/main/examples/react/start-basic)** - See observability patterns in action
diff --git a/mintlify/start/framework/react/guide/path-aliases.md b/mintlify/start/framework/react/guide/path-aliases.md
new file mode 100644
index 000000000..bd2827e37
--- /dev/null
+++ b/mintlify/start/framework/react/guide/path-aliases.md
@@ -0,0 +1,98 @@
+---
+id: path-aliases
+title: Path Aliases
+---
+
+Path aliases are a useful feature of TypeScript that allows you to define a shortcut for a path that could be distant in your project's directory structure. This can help you avoid long relative imports in your code and make it easier to refactor your project's structure. This is especially useful for avoiding long relative imports in your code.
+
+By default, TanStack Start does not include path aliases. However, you can easily add them to your project by updating your `tsconfig.json` file in the root of your project and adding the following configuration:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}
+```
+
+In this example, we've defined the path alias `~/*` that maps to the `./src/*` directory. This means that you can now import files from the `src` directory using the `~` prefix.
+
+After updating your `tsconfig.json` file, configure your build tool so it resolves the same path aliases.
+
+
+
+# Vite
+
+## Vite 8
+
+Vite 8+ has [built-in support for path aliases](https://vite.dev/config/shared-options#resolve-tsconfigpaths), which is disabled by default. To enable it, simply add the following configuration to your `vite.config.ts` file:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    // This enables built-in support for path aliases defined in tsconfig.json
+    tsconfigPaths: true,
+  },
+})
+```
+
+## Vite 7 and earlier
+
+For Vite 7 and earlier, install the `vite-tsconfig-paths` plugin to enable path aliases in your TanStack Start project. You can do this by running the following command:
+
+```sh
+npm install -D vite-tsconfig-paths
+```
+
+Now, you'll need to update your `vite.config.ts` file to include the following:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+Rsbuild reads the `paths` field from `tsconfig.json` by default. No extra config is needed when your aliases live in the root `tsconfig.json`.
+
+If you use a custom tsconfig file, point Rsbuild at it with `source.tsconfigPath`:
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+
+export default defineConfig({
+  source: {
+    tsconfigPath: './tsconfig.custom.json',
+  },
+})
+```
+
+
+
+Once this configuration has completed, you'll now be able to import files using the path alias like so:
+
+```ts
+// app/routes/posts/$postId/edit.tsx
+import { Input } from '~/components/ui/input'
+
+// instead of
+
+import { Input } from '../../../components/ui/input'
+```
diff --git a/mintlify/start/framework/react/guide/rendering-markdown.md b/mintlify/start/framework/react/guide/rendering-markdown.md
new file mode 100644
index 000000000..4258d6f4f
--- /dev/null
+++ b/mintlify/start/framework/react/guide/rendering-markdown.md
@@ -0,0 +1,503 @@
+---
+id: rendering-markdown
+title: Rendering Markdown
+---
+
+This guide covers two methods for importing and rendering markdown content in your TanStack Start application:
+
+1. **Static markdown** with `content-collections` for build-time loading (e.g., blog posts)
+2. **Dynamic markdown** fetched at runtime from GitHub or any remote source
+
+Both methods share a common rendering pipeline using the `unified` ecosystem.
+
+## Setting Up the Markdown Processor
+
+Both approaches use the same markdown-to-HTML processing pipeline. First, install the required dependencies:
+
+```bash
+npm install unified remark-parse remark-gfm remark-rehype rehype-raw rehype-slug rehype-autolink-headings rehype-stringify shiki html-react-parser gray-matter
+```
+
+Create a markdown processor utility:
+
+```tsx
+// src/utils/markdown.ts
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import remarkRehype from 'remark-rehype'
+import rehypeRaw from 'rehype-raw'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypeStringify from 'rehype-stringify'
+
+export type MarkdownHeading = {
+  id: string
+  text: string
+  level: number
+}
+
+export type MarkdownResult = {
+  markup: string
+  headings: Array<MarkdownHeading>
+}
+
+export async function renderMarkdown(content: string): Promise<MarkdownResult> {
+  const headings: Array<MarkdownHeading> = []
+
+  const result = await unified()
+    .use(remarkParse) // Parse markdown
+    .use(remarkGfm) // Support GitHub Flavored Markdown
+    .use(remarkRehype, { allowDangerousHtml: true }) // Convert to HTML AST
+    .use(rehypeRaw) // Process raw HTML in markdown
+    .use(rehypeSlug) // Add IDs to headings
+    .use(rehypeAutolinkHeadings, {
+      behavior: 'wrap',
+      properties: { className: ['anchor'] },
+    })
+    .use(() => (tree) => {
+      // Extract headings for table of contents
+      const { visit } = require('unist-util-visit')
+      const { toString } = require('hast-util-to-string')
+
+      visit(tree, 'element', (node: any) => {
+        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.tagName)) {
+          headings.push({
+            id: node.properties?.id || '',
+            text: toString(node),
+            level: parseInt(node.tagName.charAt(1), 10),
+          })
+        }
+      })
+    })
+    .use(rehypeStringify) // Serialize to HTML string
+    .process(content)
+
+  return {
+    markup: String(result),
+    headings,
+  }
+}
+```
+
+## Creating a Markdown Component
+
+Create a React component that renders the processed HTML with custom element handling:
+
+```tsx
+// src/components/Markdown.tsx
+import parse, { type HTMLReactParserOptions, Element } from 'html-react-parser'
+import { renderMarkdown, type MarkdownResult } from '~/utils/markdown'
+
+type MarkdownProps = {
+  content: string
+  className?: string
+}
+
+export function Markdown({ content, className }: MarkdownProps) {
+  const [result, setResult] = useState<MarkdownResult | null>(null)
+
+  useEffect(() => {
+    renderMarkdown(content).then(setResult)
+  }, [content])
+
+  if (!result) {
+    return <div className={className}>Loading...</div>
+  }
+
+  const options: HTMLReactParserOptions = {
+    replace: (domNode) => {
+      if (domNode instanceof Element) {
+        // Customize rendering of specific elements
+        if (domNode.name === 'a') {
+          // Handle links
+          const href = domNode.attribs.href
+          if (href?.startsWith('/')) {
+            // Internal link - use your router's Link component
+            return (
+              <Link to={href}>{domToReact(domNode.children, options)}</Link>
+            )
+          }
+        }
+
+        if (domNode.name === 'img') {
+          // Add lazy loading to images
+          return (
+            <img
+              {...domNode.attribs}
+              loading="lazy"
+              className="rounded-lg shadow-md"
+            />
+          )
+        }
+      }
+    },
+  }
+
+  return <div className={className}>{parse(result.markup, options)}</div>
+}
+```
+
+## Method 1: Static Markdown with content-collections
+
+The `content-collections` package is ideal for static content like blog posts that are included in your repository. It processes markdown files at build time and provides type-safe access to the content.
+
+### Installation
+
+```bash
+npm install @content-collections/core @content-collections/vite
+```
+
+### Configuration
+
+Create a `content-collections.ts` file in your project root:
+
+```tsx
+// content-collections.ts
+import { defineCollection, defineConfig } from '@content-collections/core'
+import matter from 'gray-matter'
+
+function extractFrontMatter(content: string) {
+  const { data, content: body, excerpt } = matter(content, { excerpt: true })
+  return { data, body, excerpt: excerpt || '' }
+}
+
+const posts = defineCollection({
+  name: 'posts',
+  directory: './src/blog', // Directory containing your .md files
+  include: '*.md',
+  schema: (z) => ({
+    title: z.string(),
+    published: z.string().date(),
+    description: z.string().optional(),
+    authors: z.string().array(),
+  }),
+  transform: ({ content, ...post }) => {
+    const frontMatter = extractFrontMatter(content)
+
+    // Extract header image (first image in the document)
+    const headerImageMatch = content.match(/!\[([^\]]*)\]\(([^)]+)\)/)
+    const headerImage = headerImageMatch ? headerImageMatch[2] : undefined
+
+    return {
+      ...post,
+      slug: post._meta.path,
+      excerpt: frontMatter.excerpt,
+      description: frontMatter.data.description,
+      headerImage,
+      content: frontMatter.body,
+    }
+  },
+})
+
+export default defineConfig({
+  collections: [posts],
+})
+```
+
+### Vite Integration
+
+Add the content-collections plugin to your Vite config:
+
+```tsx
+// app.config.ts
+import { defineConfig } from '@tanstack/react-start/config'
+import contentCollections from '@content-collections/vite'
+
+export default defineConfig({
+  vite: {
+    plugins: [contentCollections()],
+  },
+})
+```
+
+### Creating Blog Posts
+
+Create markdown files in your designated directory:
+
+````markdown
+## <!-- src/blog/hello-world.md -->
+
+title: Hello World
+published: 2024-01-15
+authors:
+
+- Jane Doe
+  description: My first blog post
+
+---
+
+![Hero Image](/images/hero.jpg)
+
+Welcome to my blog! This is my first post.
+
+## Getting Started
+
+Here's some content with **bold** and _italic_ text.
+
+```javascript
+console.log('Hello, world!')
+```
+````
+
+### Using the Collection
+
+Access your posts through the generated collection:
+
+```tsx
+// src/routes/blog.index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { allPosts } from 'content-collections'
+
+export const Route = createFileRoute('/blog/')({
+  component: BlogIndex,
+})
+
+function BlogIndex() {
+  // Posts are sorted by published date
+  const sortedPosts = allPosts.sort(
+    (a, b) => new Date(b.published).getTime() - new Date(a.published).getTime(),
+  )
+
+  return (
+    <div>
+      <h1>Blog</h1>
+      <ul>
+        {sortedPosts.map((post) => (
+          <li key={post.slug}>
+            <Link to="/blog/$slug" params={{ slug: post.slug }}>
+              <h2>{post.title}</h2>
+              <p>{post.excerpt}</p>
+              <span>{post.published}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+### Rendering a Single Post
+
+```tsx
+// src/routes/blog.$slug.tsx
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { allPosts } from 'content-collections'
+import { Markdown } from '~/components/Markdown'
+
+export const Route = createFileRoute('/blog/$slug')({
+  loader: ({ params }) => {
+    const post = allPosts.find((p) => p.slug === params.slug)
+    if (!post) {
+      throw notFound()
+    }
+    return post
+  },
+  component: BlogPost,
+})
+
+function BlogPost() {
+  const post = Route.useLoaderData()
+
+  return (
+    <article>
+      <header>
+        <h1>{post.title}</h1>
+        <p>
+          By {post.authors.join(', ')} on {post.published}
+        </p>
+      </header>
+      <Markdown content={post.content} className="prose" />
+    </article>
+  )
+}
+```
+
+## Method 2: Dynamic Markdown from Remote Sources
+
+For content stored externally (like GitHub repositories), you can fetch and render markdown dynamically using server functions.
+
+### Creating a Fetch Utility
+
+```tsx
+// src/utils/docs.server.ts
+import { createServerFn } from '@tanstack/react-start'
+import matter from 'gray-matter'
+
+type FetchDocsParams = {
+  repo: string // e.g., 'tanstack/router'
+  branch: string // e.g., 'main'
+  filePath: string // e.g., 'docs/guide/getting-started.md'
+}
+
+export const fetchDocs = createServerFn({ method: 'GET' })
+  .validator((params: FetchDocsParams) => params)
+  .handler(async ({ data: { repo, branch, filePath } }) => {
+    const url = `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
+
+    const response = await fetch(url, {
+      headers: {
+        // Add GitHub token for private repos or higher rate limits
+        // Authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch: ${response.status}`)
+    }
+
+    const rawContent = await response.text()
+    const { data: frontmatter, content } = matter(rawContent)
+
+    return {
+      frontmatter,
+      content,
+      filePath,
+    }
+  })
+```
+
+### Adding Cache Headers
+
+For production, add appropriate cache headers:
+
+```tsx
+export const fetchDocs = createServerFn({ method: 'GET' })
+  .validator((params: FetchDocsParams) => params)
+  .handler(async ({ data: { repo, branch, filePath }, context }) => {
+    // Set cache headers for CDN caching
+    context.response.headers.set(
+      'Cache-Control',
+      'public, max-age=0, must-revalidate',
+    )
+    context.response.headers.set(
+      'CDN-Cache-Control',
+      'max-age=300, stale-while-revalidate=300',
+    )
+
+    // ... fetch logic
+  })
+```
+
+### Using Dynamic Markdown in Routes
+
+```tsx
+// src/routes/docs.$path.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { fetchDocs } from '~/utils/docs.server'
+import { Markdown } from '~/components/Markdown'
+
+export const Route = createFileRoute('/docs/$path')({
+  loader: async ({ params }) => {
+    return fetchDocs({
+      data: {
+        repo: 'your-org/your-repo',
+        branch: 'main',
+        filePath: `docs/${params.path}.md`,
+      },
+    })
+  },
+  component: DocsPage,
+})
+
+function DocsPage() {
+  const { frontmatter, content } = Route.useLoaderData()
+
+  return (
+    <article>
+      <h1>{frontmatter.title}</h1>
+      <Markdown content={content} className="prose" />
+    </article>
+  )
+}
+```
+
+### Fetching Directory Contents
+
+To build navigation from a GitHub directory:
+
+```tsx
+// src/utils/docs.server.ts
+type GitHubContent = {
+  name: string
+  path: string
+  type: 'file' | 'dir'
+}
+
+export const fetchRepoContents = createServerFn({ method: 'GET' })
+  .validator((params: { repo: string; branch: string; path: string }) => params)
+  .handler(async ({ data: { repo, branch, path } }) => {
+    const url = `https://api.github.com/repos/${repo}/contents/${path}?ref=${branch}`
+
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        // Authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch contents: ${response.status}`)
+    }
+
+    const contents: Array<GitHubContent> = await response.json()
+
+    return contents
+      .filter((item) => item.type === 'file' && item.name.endsWith('.md'))
+      .map((item) => ({
+        name: item.name.replace('.md', ''),
+        path: item.path,
+      }))
+  })
+```
+
+## Adding Syntax Highlighting with Shiki
+
+For code blocks with syntax highlighting, integrate Shiki into your markdown processor:
+
+```tsx
+// src/utils/markdown.ts
+import { codeToHtml } from 'shiki'
+
+// Process code blocks after parsing
+export async function highlightCode(
+  code: string,
+  language: string,
+): Promise<string> {
+  return codeToHtml(code, {
+    lang: language,
+    themes: {
+      light: 'github-light',
+      dark: 'tokyo-night',
+    },
+  })
+}
+```
+
+Then handle code blocks in your Markdown component:
+
+```tsx
+// In your Markdown component's replace function
+if (domNode.name === 'pre') {
+  const codeElement = domNode.children.find(
+    (child) => child instanceof Element && child.name === 'code',
+  )
+  if (codeElement) {
+    const className = codeElement.attribs.class || ''
+    const language = className.replace('language-', '') || 'text'
+    const code = getText(codeElement)
+
+    return <CodeBlock code={code} language={language} />
+  }
+}
+```
+
+## Summary
+
+| Approach            | Best For                                  | Pros                                           | Cons                                      |
+| ------------------- | ----------------------------------------- | ---------------------------------------------- | ----------------------------------------- |
+| content-collections | Blog posts, static docs bundled with app  | Type-safe, build-time processing, fast runtime | Requires rebuild for content updates      |
+| Dynamic fetching    | External docs, frequently updated content | Always fresh, no rebuild needed                | Runtime overhead, requires error handling |
+
+Choose the approach that best fits your content update frequency and deployment workflow. For hybrid scenarios, you can use both methods in the same application.
diff --git a/mintlify/start/framework/react/guide/routing.md b/mintlify/start/framework/react/guide/routing.md
new file mode 100644
index 000000000..0edc1091e
--- /dev/null
+++ b/mintlify/start/framework/react/guide/routing.md
@@ -0,0 +1,233 @@
+---
+id: routing
+title: Routing
+---
+
+TanStack Start is built on top of TanStack Router, so all of the features of TanStack Router are available to you.
+
+> [!NOTE]
+> We highly recommend reading the [TanStack Router documentation](/router/overview) to learn more about the features and capabilities of TanStack Router. What you learn here is more of a high-level overview of TanStack Router and how it works in Start.
+
+## The Router
+
+The `router.tsx` file is the file that will dictate the behavior of TanStack Router used within Start. It's located in the `src` directory of your project.
+
+```
+src/
+├── router.tsx
+```
+
+Here, you can configure everything from the default [preloading functionality](/router/guide/preloading) to [caching staleness](/router/guide/data-loading).
+
+```tsx
+// src/router.tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+// You must export a getRouter function that
+// returns a new router instance each time
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+```
+
+## File-Based Routing
+
+Start uses TanStack Router's file-based routing approach to ensure proper code-splitting and advanced type-safety.
+
+You can find your routes in the `src/routes` directory.
+
+```
+src/
+├── routes <-- This is where you put your routes
+│   ├── __root.tsx
+│   ├── index.tsx
+│   ├── about.tsx
+│   ├── posts.tsx
+│   ├── posts/$postId.tsx
+```
+
+## The Root Route
+
+The root route is the top-most route in the entire tree and encapsulates all other routes as children. It's found in the `src/routes/__root.tsx` file and must be named `__root.tsx`.
+
+```
+src/
+├── routes
+│   ├── __root.tsx <-- The root route
+```
+
+- It has no path and is **always** matched
+- Its `component` is **always** rendered
+- This is where you render your document shell, e.g. `<html>`, `<body>`, etc.
+- Because it is **always rendered**, it is the perfect place to construct your application shell and take care of any global logic
+
+```tsx
+// src/routes/__root.tsx
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+Notice the `Scripts` component at the bottom of the `<body>` tag. This is used to load all of the client-side JavaScript for the application and should always be included for proper functionality.
+
+## The HeadContent Component
+
+The `HeadContent` component is used to render the head, title, meta, link, and head-related script tags of the document.
+
+It should be **rendered in the `<head>` tag of your root route's layout.**
+
+## The Outlet Component
+
+The `Outlet` component is used to render the next potentially matching child route. `<Outlet />` doesn't take any props and can be rendered anywhere within a route's component tree. If there is no matching child route, `<Outlet />` will render `null`.
+
+## The Scripts Component
+
+The `Scripts` component is used to render the body scripts of the document.
+
+It should be **rendered in the `<body>` tag of your root route's layout.**
+
+## Route Tree Generation
+
+You may notice a `routeTree.gen.ts` file in your project.
+
+```
+src/
+├── routeTree.gen.ts <-- The generated route tree file
+```
+
+This file is automatically generated when you run TanStack Start (via `npm run dev` or `npm run start`). This file contains the generated route tree and a handful of TS utilities that make TanStack Start's type-safety extremely fast and fully inferred.
+
+## Nested Routing
+
+TanStack Router uses nested routing to match the URL with the correct component tree to render.
+
+For example, given the following routes:
+
+```
+routes/
+├── __root.tsx <-- Renders the <Root> component
+├── posts.tsx <-- Renders the <Posts> component
+├── posts.$postId.tsx <-- Renders the <Post> component
+```
+
+And the URL: `/posts/123`
+
+The component tree would look like this:
+
+```
+<Root>
+  <Posts>
+    <Post />
+  </Posts>
+</Root>
+```
+
+## Types of Routes
+
+There are a few different types of routes that you can create in your project.
+
+- Index Routes - Matched when the URL is exactly the same as the route's path
+- Dynamic/Wildcard/Splat Routes - Dynamically capture part or all of the URL path into a variable to use in your application
+
+There are also a few different utility route types that you can use to group and organize your routes
+
+- Pathless Layout Routes (Apply layout or logic to a group of routes without nesting them in a path)
+- Non-Nested Routes (Un-nest a route from its parents and render its own component tree)
+- Grouped Routes (Group routes together in a directory simply for organization, without affecting the path hierarchy)
+
+## Route Tree Configuration
+
+The route tree is configured in the `src/routes` directory.
+
+## Creating File Routes
+
+To create a route, create a new file that corresponds to the path of the route you want to create. For example:
+
+| Path             | Filename            | Type           |
+| ---------------- | ------------------- | -------------- |
+| `/`              | `index.tsx`         | Index Route    |
+| `/about`         | `about.tsx`         | Static Route   |
+|                  | `posts.tsx`         | "Layout" Route |
+| `/posts/`        | `posts/index.tsx`   | Index Route    |
+| `/posts/:postId` | `posts/$postId.tsx` | Dynamic Route  |
+| `/rest/*`        | `rest/$.tsx`        | Wildcard Route |
+
+## Defining Routes
+
+To define a route, use the `createFileRoute` function to export the route as the `Route` variable.
+
+For example, to handle the `/posts/:postId` route, you would create a file named `posts/$postId.tsx` here:
+
+```
+src/
+├── routes
+│   ├── posts/$postId.tsx
+```
+
+Then, define the route like this:
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+```
+
+> [!NOTE]
+> The path string passed to `createFileRoute` is **automatically written and managed by the router for you via the TanStack Router Bundler Plugin or Router CLI.** So, as you create new routes, move routes around or rename routes, the path will be updated for you automatically.
+
+## This is just the "start"
+
+This has been just a high-level overview of how to configure routes using TanStack Router. For more detailed information, please refer to the [TanStack Router documentation](/router/routing/file-based-routing).
diff --git a/mintlify/start/framework/react/guide/selective-ssr.md b/mintlify/start/framework/react/guide/selective-ssr.md
new file mode 100644
index 000000000..af818b916
--- /dev/null
+++ b/mintlify/start/framework/react/guide/selective-ssr.md
@@ -0,0 +1,228 @@
+---
+id: selective-ssr
+title: Selective Server-Side Rendering (SSR)
+---
+
+## What is Selective SSR?
+
+In TanStack Start, routes matching the initial request are rendered on the server by default. This means `beforeLoad` and `loader` are executed on the server, followed by rendering the route components. The resulting HTML is sent to the client, which hydrates the markup into a fully interactive application.
+
+However, there are cases where you might want to disable SSR for certain routes or all routes, such as:
+
+- When `beforeLoad` or `loader` requires browser-only APIs (e.g., `localStorage`).
+- When the route component depends on browser-only APIs (e.g., `canvas`).
+
+TanStack Start's Selective SSR feature lets you configure:
+
+- Which routes should execute `beforeLoad` or `loader` on the server.
+- Which route components should be rendered on the server.
+
+## How does this compare to SPA mode?
+
+TanStack Start's [SPA mode](/start/framework/react/guide/spa-mode) completely disables server-side execution of `beforeLoad` and `loader`, as well as server-side rendering of route components. Selective SSR allows you to configure server-side handling on a per-route basis, either statically or dynamically.
+
+## Configuration
+
+You can control how a route is handled during the initial server request using the `ssr` property. If this property is not set, it defaults to `true`. You can change this default using the `defaultSsr` option in `createStart`:
+
+```tsx
+// src/start.ts
+import { createStart } from '@tanstack/react-start'
+
+export const startInstance = createStart(() => ({
+  // Disable SSR by default
+  defaultSsr: false,
+}))
+```
+
+### `ssr: true`
+
+This is the default behavior unless otherwise configured. On the initial request, it will:
+
+- Run `beforeLoad` on the server and send the resulting context to the client.
+- Run `loader` on the server and send the loader data to the client.
+- Render the component on the server and send the HTML markup to the client.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: true,
+  beforeLoad: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  loader: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  component: () => <div>This component is rendered on the server</div>,
+})
+```
+
+### `ssr: false`
+
+This disables server-side:
+
+- Execution of the route's `beforeLoad` and `loader`.
+- Rendering of the route component.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: false,
+  beforeLoad: () => {
+    console.log('Executes on the client during hydration')
+  },
+  loader: () => {
+    console.log('Executes on the client during hydration')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+### `ssr: 'data-only'`
+
+This hybrid option will:
+
+- Run `beforeLoad` on the server and send the resulting context to the client.
+- Run `loader` on the server and send the loader data to the client.
+- Disable server-side rendering of the route component.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: 'data-only',
+  beforeLoad: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  loader: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+### Functional Form
+
+For more flexibility, you can use the functional form of the `ssr` property to decide at runtime whether to SSR a route:
+
+```tsx
+// src/routes/docs/$docType/$docId.tsx
+export const Route = createFileRoute('/docs/$docType/$docId')({
+  validateSearch: z.object({ details: z.boolean().optional() }),
+  ssr: ({ params, search }) => {
+    if (params.status === 'success' && params.value.docType === 'sheet') {
+      return false
+    }
+    if (search.status === 'success' && search.value.details) {
+      return 'data-only'
+    }
+  },
+  beforeLoad: () => {
+    console.log('Executes on the server depending on the result of ssr()')
+  },
+  loader: () => {
+    console.log('Executes on the server depending on the result of ssr()')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+The `ssr` function runs only on the server during the initial request and is stripped from the client bundle.
+
+`search` and `params` are passed in after validation as a discriminated union:
+
+```tsx
+params:
+    | { status: 'success'; value: Expand<ResolveAllParamsFromParent<TParentRoute, TParams>> }
+    | { status: 'error'; error: unknown }
+search:
+    | { status: 'success'; value: Expand<ResolveFullSearchSchema<TParentRoute, TSearchValidator>> }
+    | { status: 'error'; error: unknown }
+```
+
+If validation fails, `status` will be `error` and `error` will contain the failure details. Otherwise, `status` will be `success` and `value` will contain the validated data.
+
+### Inheritance
+
+At runtime, a child route inherits the Selective SSR configuration of its parent. However, the inherited value can only be changed to be more restrictive (i.e. `true` to `data-only` or `false` and `data-only` to `false`). For example:
+
+```tsx
+root { ssr: undefined }
+  posts { ssr: false }
+     $postId { ssr: true }
+```
+
+- `root` defaults to `ssr: true`.
+- `posts` explicitly sets `ssr: false`, so neither `beforeLoad` nor `loader` will run on the server, and the route component won't be rendered on the server.
+- `$postId` sets `ssr: true`, but inherits `ssr: false` from its parent. Because the inherited value can only be changed to be more restrictive, `ssr: true` has no effect and the inherited `ssr: false` will remain.
+
+Another example:
+
+```tsx
+root { ssr: undefined }
+  posts { ssr: 'data-only' }
+     $postId { ssr: true }
+       details { ssr: false }
+```
+
+- `root` defaults to `ssr: true`.
+- `posts` sets `ssr: 'data-only'`, so `beforeLoad` and `loader` run on the server, but the route component isn't rendered on the server.
+- `$postId` sets `ssr: true`, but inherits `ssr: 'data-only'` from its parent.
+- `details` sets `ssr: false`, so neither `beforeLoad` nor `loader` will run on the server, and the route component won't be rendered on the server. Here the inherited value is changed to be more restrictive, and therefore, the `ssr: false` will override the inherited value.
+
+## Fallback Rendering
+
+For the first route with `ssr: false` or `ssr: 'data-only'`, the server will render the route's `pendingComponent` as a fallback. If `pendingComponent` isn't configured, the `defaultPendingComponent` will be rendered. If neither is configured, no fallback will be rendered.
+
+On the client during hydration, this fallback will be displayed for at least `minPendingMs` (or `defaultPendingMinMs` if not configured), even if the route doesn't have `beforeLoad` or `loader` defined.
+
+## How to disable SSR of the root route?
+
+You can disable server side rendering of the root route component, however the `<html>` shell still needs to be rendered on the server. This shell is configured via the `shellComponent` property and takes a single property `children`. The `shellComponent` is always SSRed and is wrapping around the root `component`, the root `errorComponent` or the root `notFound` component respectively.
+
+A minimal setup of a root route with disabled SSR for the route component looks like this:
+
+```tsx
+import * as React from 'react'
+
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  shellComponent: RootShell,
+  component: RootComponent,
+  errorComponent: () => <div>Error</div>,
+  notFoundComponent: () => <div>Not found</div>,
+  ssr: false, // or `defaultSsr: false` on the router
+})
+
+function RootShell({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+function RootComponent() {
+  return (
+    <div>
+      <h1>This component will be rendered on the client</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
diff --git a/mintlify/start/framework/react/guide/seo.md b/mintlify/start/framework/react/guide/seo.md
new file mode 100644
index 000000000..e415c298a
--- /dev/null
+++ b/mintlify/start/framework/react/guide/seo.md
@@ -0,0 +1,420 @@
+---
+id: seo
+title: SEO
+---
+
+> [!NOTE]
+> Looking to optimize for AI assistants and LLMs? See the [Generative Engine Optimization (GEO) guide](/start/framework/react/guide/geo).
+
+## What is SEO, really?
+
+SEO (Search Engine Optimization) is often misunderstood as simply "showing up on Google" or a checkbox that a library can magically provide. In reality, SEO is a broad discipline focused on delivering valuable content that people need and making it easy for them to find.
+
+**Technical SEO** is a subset of SEO that developers interact with most directly. It involves using tools and APIs that satisfy the technical requirements of search engines, crawlers, rankers, and even LLMs. When someone says a framework has "good SEO support," they typically mean it provides the tools to make this process straightforward.
+
+TanStack Start provides comprehensive technical SEO capabilities, but you still need to put in the work to use them effectively.
+
+## What TanStack Start Provides
+
+TanStack Start gives you the building blocks for technical SEO:
+
+- **Server-Side Rendering (SSR)** - Ensures crawlers receive fully rendered HTML
+- **Static Prerendering** - Pre-generates pages for optimal performance and crawlability
+- **Document Head Management** - Full control over meta tags, titles, and structured data
+- **Performance** - Fast load times through code-splitting, streaming, and optimized builds
+
+## Document Head Management
+
+The `head` property on routes is your primary tool for SEO. It allows you to set page titles, meta descriptions, Open Graph tags, and more.
+
+### Basic Meta Tags
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  head: () => ({
+    meta: [
+      { title: 'My App - Home' },
+      {
+        name: 'description',
+        content: 'Welcome to My App, a platform for...',
+      },
+    ],
+  }),
+  component: HomePage,
+})
+```
+
+### Dynamic Meta Tags
+
+Use loader data to generate dynamic meta tags for content pages:
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      { title: loaderData.post.title },
+      { name: 'description', content: loaderData.post.excerpt },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+### Open Graph and Social Sharing
+
+Open Graph tags control how your pages appear when shared on social media:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      { title: loaderData.post.title },
+      { name: 'description', content: loaderData.post.excerpt },
+      // Open Graph
+      { property: 'og:title', content: loaderData.post.title },
+      { property: 'og:description', content: loaderData.post.excerpt },
+      { property: 'og:image', content: loaderData.post.coverImage },
+      { property: 'og:type', content: 'article' },
+      // Twitter Card
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: loaderData.post.title },
+      { name: 'twitter:description', content: loaderData.post.excerpt },
+      { name: 'twitter:image', content: loaderData.post.coverImage },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+### Canonical URLs
+
+Canonical URLs help prevent duplicate content issues:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  head: ({ params }) => ({
+    links: [
+      {
+        rel: 'canonical',
+        href: `https://myapp.com/posts/${params.postId}`,
+      },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+## Structured Data (JSON-LD)
+
+Structured data helps search engines understand your content and can enable rich results in search:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  head: ({ loaderData }) => ({
+    meta: [{ title: loaderData.post.title }],
+    scripts: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'Article',
+          headline: loaderData.post.title,
+          description: loaderData.post.excerpt,
+          image: loaderData.post.coverImage,
+          author: {
+            '@type': 'Person',
+            name: loaderData.post.author.name,
+          },
+          datePublished: loaderData.post.publishedAt,
+        }),
+      },
+    ],
+  }),
+  component: PostPage,
+})
+```
+
+## Server-Side Rendering
+
+SSR is enabled by default in TanStack Start. This ensures that search engine crawlers receive fully rendered HTML content, which is critical for SEO.
+
+```tsx
+// SSR is automatic - your pages are rendered on the server
+export const Route = createFileRoute('/about')({
+  component: AboutPage,
+})
+```
+
+For routes that don't need SSR, you can disable it selectively. However, be aware this may impact SEO for those pages:
+
+```tsx
+// Only disable SSR for pages that don't need SEO
+export const Route = createFileRoute('/dashboard')({
+  ssr: false, // Dashboard doesn't need to be indexed
+  component: DashboardPage,
+})
+```
+
+See the [Selective SSR guide](/start/framework/react/guide/selective-ssr) for more details.
+
+## Static Prerendering
+
+For content that doesn't change frequently, static prerendering generates HTML at build time for optimal performance:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        enabled: true,
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        enabled: true,
+        crawlLinks: true,
+      },
+    }),
+  ],
+})
+```
+
+
+
+Prerendered pages load faster and are easily crawlable. See the [Static Prerendering guide](/start/framework/react/guide/static-prerendering) for configuration options.
+
+## Sitemaps
+
+### Built-in Sitemap Generation
+
+TanStack Start can automatically generate a sitemap when you enable prerendering with link crawling:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        enabled: true,
+        crawlLinks: true, // Discovers all linkable pages
+      },
+      sitemap: {
+        enabled: true,
+        host: 'https://myapp.com',
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        enabled: true,
+        crawlLinks: true, // Discovers all linkable pages
+      },
+      sitemap: {
+        enabled: true,
+        host: 'https://myapp.com',
+      },
+    }),
+  ],
+})
+```
+
+
+
+The sitemap is generated at build time by crawling all discoverable pages from your routes. This is the recommended approach for static or mostly-static sites.
+
+### Static Sitemap
+
+For simple sites, you can also place a static `sitemap.xml` file in your `public` directory:
+
+```xml
+<!-- public/sitemap.xml -->
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://myapp.com/</loc>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://myapp.com/about</loc>
+    <changefreq>monthly</changefreq>
+  </url>
+</urlset>
+```
+
+This approach works well when your site structure is known and doesn't change often.
+
+### Dynamic Sitemap
+
+For sites with dynamic content that can't be discovered at build time, you can create a dynamic sitemap using a [server route](/start/framework/react/guide/server-routes). Consider caching this at your CDN for performance:
+
+```ts
+// src/routes/sitemap[.]xml.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/sitemap.xml')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const posts = await fetchAllPosts()
+
+        const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://myapp.com/</loc>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  ${posts
+    .map(
+      (post) => `
+  <url>
+    <loc>https://myapp.com/posts/${post.id}</loc>
+    <lastmod>${post.updatedAt}</lastmod>
+    <changefreq>weekly</changefreq>
+  </url>`,
+    )
+    .join('')}
+</urlset>`
+
+        return new Response(sitemap, {
+          headers: {
+            'Content-Type': 'application/xml',
+          },
+        })
+      },
+    },
+  },
+})
+```
+
+## robots.txt
+
+### Static robots.txt
+
+The simplest approach is to place a static `robots.txt` file in your `public` directory:
+
+```txt
+// public/robots.txt
+User-agent: *
+Allow: /
+
+Sitemap: https://myapp.com/sitemap.xml
+```
+
+This file will be served automatically at `/robots.txt`. This is the most common approach for most sites.
+
+### Dynamic robots.txt
+
+For more complex scenarios (e.g., different rules per environment), you can create a robots.txt file using a [server route](/start/framework/react/guide/server-routes):
+
+```ts
+// src/routes/robots[.]txt.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/robots.txt')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const robots = `User-agent: *
+Allow: /
+
+Sitemap: https://myapp.com/sitemap.xml`
+
+        return new Response(robots, {
+          headers: {
+            'Content-Type': 'text/plain',
+          },
+        })
+      },
+    },
+  },
+})
+```
+
+## Best Practices
+
+### Performance Matters
+
+Page speed is a ranking factor. TanStack Start helps with:
+
+- **Automatic code-splitting** - Only load the JavaScript needed for each page
+- **Streaming SSR** - Start sending HTML to the browser immediately
+- **Preloading** - Prefetch routes before users navigate to them
+
+### Content is King
+
+Technical SEO is just one piece of the puzzle. The most important factors are:
+
+- **Quality content** - Create content that provides value to users
+- **Clear site structure** - Organize your routes logically
+- **Descriptive URLs** - Use meaningful path segments (`/posts/my-great-article` vs `/posts/123`)
+- **Internal linking** - Help users and crawlers discover your content
+
+### Test Your Implementation
+
+Use these tools to verify your SEO implementation:
+
+- [Google Search Console](https://search.google.com/search-console) - Monitor indexing and search performance
+- [Google Rich Results Test](https://search.google.com/test/rich-results) - Validate structured data
+- [Open Graph Debugger](https://developers.facebook.com/tools/debug/) - Preview social sharing cards
+- Browser DevTools - Inspect rendered HTML and meta tags
+
+### Track Your Rankings
+
+To monitor your SEO performance over time, we recommend [Nozzle.io](https://nozzle.io?utm_source=tanstack). Nozzle provides enterprise-grade rank tracking that lets you monitor unlimited keywords, track SERP features, and analyze your visibility against competitors. Unlike traditional rank trackers, Nozzle stores the entire SERP for every query, giving you complete data to understand how your pages perform in search results.
diff --git a/mintlify/start/framework/react/guide/server-components.md b/mintlify/start/framework/react/guide/server-components.md
new file mode 100644
index 000000000..2d7a15aee
--- /dev/null
+++ b/mintlify/start/framework/react/guide/server-components.md
@@ -0,0 +1,1132 @@
+---
+id: server-components
+title: Server Components
+---
+
+> [!WARNING]
+> Server Components are experimental! The API may see refinements.
+
+Server Components let you render React components on the server and stream them to the client. Heavy dependencies stay out of your bundle, data fetching lives in the component, and sensitive logic never reaches the browser.
+
+## Setup
+
+**Server Components are not enabled by default.** Complete these three steps first:
+
+### 1. Install Build Tool-Specific RSC Dependencies
+
+
+
+# Vite
+
+```bash
+npm install -D @vitejs/plugin-rsc
+# or
+pnpm add -D @vitejs/plugin-rsc
+# or
+yarn add -D @vitejs/plugin-rsc
+# or
+bun add -D @vitejs/plugin-rsc
+```
+
+# Rsbuild
+
+Rsbuild does not need a separate RSC plugin. Make sure your Rsbuild React dependencies are installed:
+
+```bash
+npm install -D @rsbuild/core @rsbuild/plugin-react
+```
+
+
+
+### 2. Configure Your Build Tool
+
+Update your build tool config to enable RSC in the TanStack Start plugin:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import rsc from '@vitejs/plugin-rsc'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      rsc: {
+        enabled: true,
+      },
+    }),
+    rsc(),
+    viteReact(),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginReact({ splitChunks: false }),
+    tanstackStart({
+      rsc: {
+        enabled: true,
+      },
+    }),
+  ],
+})
+```
+
+
+
+**Requirements:** React 19+, Vite 7+ or Rsbuild 2+
+
+## Quick Start
+
+In TanStack Start, you typically create server-rendered UI in a server function, then return it through a route `loader`.
+
+There are two high-level RSC helpers:
+
+- `renderServerComponent(<Element />)` returns a **renderable value** you can inline like `{Renderable}`.
+- `createCompositeComponent((props) => <Element />)` returns a **composite source** rendered via `<CompositeComponent src={...} />` (supports slots).
+
+### Renderable (no slots)
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { renderServerComponent } from '@tanstack/react-start/rsc'
+
+function Greeting() {
+  return <h1>Hello from RSC</h1>
+}
+
+const getGreeting = createServerFn().handler(async () => {
+  const Renderable = await renderServerComponent(<Greeting />)
+  return { Renderable }
+})
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    const { Renderable } = await getGreeting()
+    return { Greeting: Renderable }
+  },
+  component: HomePage,
+})
+
+function HomePage() {
+  const { Greeting } = Route.useLoaderData()
+  return <>{Greeting}</>
+}
+```
+
+### Composite (slots)
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import {
+  CompositeComponent,
+  createCompositeComponent,
+} from '@tanstack/react-start/rsc'
+
+const getCard = createServerFn().handler(async () => {
+  const src = await createCompositeComponent(
+    (props: { children?: React.ReactNode }) => (
+      <div className="card">
+        <h2>Server-rendered header</h2>
+        <div>{props.children}</div>
+      </div>
+    ),
+  )
+
+  return { src }
+})
+
+export const Route = createFileRoute('/')({
+  loader: async () => ({
+    Card: await getCard(),
+  }),
+  component: HomePage,
+})
+
+function HomePage() {
+  const { Card } = Route.useLoaderData()
+
+  return (
+    <CompositeComponent src={Card.src}>
+      <Counter />
+    </CompositeComponent>
+  )
+}
+```
+
+## Why Server Components?
+
+- **Smaller bundles.** Markdown parsers, syntax highlighters, and heavy libraries run on the server. Only rendered HTML reaches the client.
+- **Colocated data fetching.** Fetch data directly in the component that needs it.
+- **Secure by default.** API keys, database queries, and business logic never appear in the client bundle.
+- **Progressive streaming.** UI streams to the browser as it renders. Users see content immediately.
+
+## Passing Props and Composition
+
+Renderable values returned from `renderServerComponent` do not support slots.
+
+To accept client-provided props ("slots"), use `createCompositeComponent` and render it with `<CompositeComponent src={...} />`.
+
+Slots are declared on the server component props. There are three types of slots:
+
+| Slot Type       | Use Case                                          | Server Can Pass Data? |
+| --------------- | ------------------------------------------------- | --------------------- |
+| `children`      | Simple composition                                | No                    |
+| Render props    | Server passes data to client-rendered content     | Yes                   |
+| Component props | Pass reusable components that receive server data | Yes                   |
+
+### Children Slots
+
+Pass client components as children. Simple and familiar, but the server cannot pass data to them:
+
+```tsx
+import {
+  CompositeComponent,
+  createCompositeComponent,
+} from '@tanstack/react-start/rsc'
+
+const getCard = createServerFn().handler(async () => {
+  const src = await createCompositeComponent(
+    (props: { children?: React.ReactNode }) => (
+      <div className="card">
+        <h2>Server-rendered header</h2>
+        <div>{props.children}</div>
+      </div>
+    ),
+  )
+
+  return { src }
+})
+
+function MyPage() {
+  const { src } = Route.useLoaderData()
+
+  return (
+    <CompositeComponent src={src}>
+      {/* Client components with full interactivity */}
+      <Counter />
+      <button onClick={() => alert('Clicked!')}>Click me</button>
+    </CompositeComponent>
+  )
+}
+```
+
+### Render Props
+
+Use render props when the server needs to pass data to client-rendered content:
+
+```tsx
+import {
+  CompositeComponent,
+  createCompositeComponent,
+} from '@tanstack/react-start/rsc'
+
+const getPost = createServerFn()
+  .validator(z.object({ postId: z.string() }))
+  .handler(async ({ data }) => {
+    const post = await db.posts.findById(data.postId)
+
+    const src = await createCompositeComponent(
+      (props: {
+        children?: React.ReactNode
+        renderActions?: (data: {
+          postId: string
+          authorId: string
+        }) => React.ReactNode
+      }) => (
+        <article>
+          <h1>{post.title}</h1>
+          <p>{post.body}</p>
+          <footer>
+            {props.renderActions?.({
+              postId: post.id,
+              authorId: post.authorId,
+            })}
+          </footer>
+          {props.children}
+        </article>
+      ),
+    )
+
+    return { src }
+  })
+
+function PostPage() {
+  const { src } = Route.useLoaderData()
+
+  return (
+    <CompositeComponent
+      src={src}
+      renderActions={({ postId, authorId }) => (
+        <PostActions postId={postId} authorId={authorId} />
+      )}
+    >
+      <Comments />
+    </CompositeComponent>
+  )
+}
+```
+
+### Component Props
+
+Pass React components as props. On the client, the passed in props will be rendered with data supplied by the server:
+
+```tsx
+import {
+  CompositeComponent,
+  createCompositeComponent,
+} from '@tanstack/react-start/rsc'
+
+const getProductCard = createServerFn()
+  .validator(z.object({ productId: z.string() }))
+  .handler(async ({ data }) => {
+    const product = await db.products.findById(data.productId)
+
+    const src = await createCompositeComponent(
+      ({
+        AddToCart,
+      }: {
+        AddToCart: React.ComponentType<{ productId: string; price: number }>
+      }) => (
+        <div className="product-card">
+          <h2>{product.name}</h2>
+          <p>${product.price}</p>
+          <AddToCart productId={product.id} price={product.price} />
+        </div>
+      ),
+    )
+
+    return { src }
+  })
+
+// Client component with interactivity
+function AddToCartButton({
+  productId,
+  price,
+}: {
+  productId: string
+  price: number
+}) {
+  const [added, setAdded] = React.useState(false)
+
+  return (
+    <button onClick={() => setAdded(true)}>
+      {added ? '✓ Added!' : `Add to Cart - $${price}`}
+    </button>
+  )
+}
+
+function ProductPage() {
+  const { src } = Route.useLoaderData()
+
+  return <CompositeComponent src={src} AddToCart={AddToCartButton} />
+}
+```
+
+Component props are useful when:
+
+- You want to pass reusable client components
+- The component needs its own state or event handlers
+- You prefer component composition over render prop callbacks
+
+All three slot types can be combined. `createCompositeComponent` provides full type safety for slot props.
+
+## Caching
+
+Server components work with TanStack Router's built-in caching. The cache key is the route path plus params:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => ({
+    Post: await getPost({ data: { postId: params.postId } }),
+  }),
+  component: PostPage,
+})
+```
+
+Navigate to `/posts/abc`, then `/posts/xyz`, then back to `/posts/abc` - the cached component renders instantly.
+
+Control freshness with `staleTime`:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  staleTime: 10_000, // Fresh for 10 seconds
+  loader: async ({ params }) => ({
+    Post: await getPost({ data: { postId: params.postId } }),
+  }),
+  component: PostPage,
+})
+```
+
+For cache keys beyond route params, use `loaderDeps`:
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loaderDeps: ({ search }) => ({ tab: search.tab }),
+  loader: async ({ params, deps }) => ({
+    Post: await getPost({ data: { postId: params.postId, tab: deps.tab } }),
+  }),
+  component: PostPage,
+})
+```
+
+### TanStack Query
+
+For fine-grained control, use TanStack Query:
+
+```tsx
+import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query'
+
+const postQueryOptions = (postId: string) => ({
+  queryKey: ['post', postId],
+  structuralSharing: false, // Required - RSC values must not be merged
+  queryFn: () => getPost({ data: { postId } }),
+  staleTime: 5 * 60 * 1000,
+})
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ context, params }) => {
+    // Prefetch during SSR - data reused on client without refetch
+    await context.queryClient.ensureQueryData(postQueryOptions(params.postId))
+  },
+  component: PostPage,
+})
+
+function PostPage() {
+  const { postId } = Route.useParams()
+  const queryClient = useQueryClient()
+
+  const { data } = useSuspenseQuery(postQueryOptions(postId))
+
+  const handleRefresh = () => {
+    // Manually refetch the RSC
+    queryClient.refetchQueries({ queryKey: ['post', postId] })
+  }
+
+  return <CompositeComponent src={data.src} />
+}
+```
+
+> [!IMPORTANT]
+> Always set `structuralSharing: false` when caching server components with React Query. Without this, React Query may attempt to merge RSC values between fetches, which can cause errors.
+
+### Invalidation
+
+To refetch a server component after data changes, use `router.invalidate()`:
+
+```tsx
+import { useRouter } from '@tanstack/react-router'
+
+function PostPage() {
+  const router = useRouter()
+  const { Post } = Route.useLoaderData()
+
+  const handleUpdate = async () => {
+    await updatePost({ data: { ... } })
+    // Refetch the route's loader, including the RSC
+    router.invalidate()
+  }
+
+  return (
+    <CompositeComponent
+      src={Post.src}
+      renderActions={() => (
+        <button onClick={handleUpdate}>Update Post</button>
+      )}
+    />
+  )
+}
+```
+
+This pattern is useful when server functions mutate data that the RSC displays. After the mutation completes, `router.invalidate()` triggers the loader to run again, fetching a fresh server component with updated data.
+
+## Combining with Selective SSR
+
+Server Components pair with [Selective SSR](/start/framework/react/guide/selective-ssr) when you need server-rendered content but client-only rendering for the route component itself.
+
+### Example: `ssr: 'data-only'`
+
+The server fetches the RSC, but the route component renders on the client:
+
+```tsx
+export const Route = createFileRoute('/dashboard')({
+  ssr: 'data-only',
+  loader: async () => ({
+    Dashboard: await getDashboard(),
+  }),
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { Dashboard } = Route.useLoaderData()
+  const [width, setWidth] = React.useState(0)
+
+  React.useEffect(() => {
+    setWidth(window.innerWidth) // Browser API
+  }, [])
+
+  return (
+    <Dashboard
+      renderChart={({ data }) => <ResponsiveChart data={data} width={width} />}
+    />
+  )
+}
+```
+
+This is useful when:
+
+- The server component fetches data and renders static content
+- The route component needs `window`, `localStorage`, or other browser APIs
+- You want the server component data ready before the client renders
+
+### Example: `ssr: false`
+
+Both loader and component run on the client:
+
+```tsx
+export const Route = createFileRoute('/canvas')({
+  ssr: false,
+  loader: async () => {
+    const savedState = localStorage.getItem('canvas-state')
+    return { Tools: await getDrawingTools({ data: { savedState } }) }
+  },
+  component: CanvasPage,
+})
+```
+
+Use this when the loader itself requires browser APIs.
+
+## Advanced Patterns
+
+### Multiple Server Components in Parallel
+
+When a page needs several independent server components, fetch them in parallel using `Promise.all`. Each component renders independently with its own data.
+
+**When to use:** Components from separate data sources with no shared dependencies. Maximizes concurrency when each component has independent fetch logic.
+
+```tsx
+const getArticleA = createServerFn().handler(async () => {
+  const article = await db.articles.findById('a')
+  return renderServerComponent(<Article data={article} />)
+})
+
+const getArticleB = createServerFn().handler(async () => {
+  const article = await db.articles.findById('b')
+  return renderServerComponent(<Article data={article} />)
+})
+
+const getSidebar = createServerFn().handler(async () => {
+  const trending = await db.articles.getTrending()
+  return renderServerComponent(<Sidebar items={trending} />)
+})
+
+export const Route = createFileRoute('/news')({
+  loader: async () => {
+    const [ArticleA, ArticleB, Sidebar] = await Promise.all([
+      getArticleA(),
+      getArticleB(),
+      getSidebar(),
+    ])
+    return { ArticleA, ArticleB, Sidebar }
+  },
+  component: NewsPage,
+})
+
+function NewsPage() {
+  const { ArticleA, ArticleB, Sidebar } = Route.useLoaderData()
+
+  return (
+    <div className="grid">
+      <main>
+        {ArticleA}
+        {ArticleB}
+      </main>
+      <aside>{Sidebar}</aside>
+    </div>
+  )
+}
+```
+
+Each server function executes concurrently. The page renders when all complete.
+
+### Bundling Multiple Components
+
+Return multiple server components from a single server function when they share data or should be fetched together. This reduces network round trips.
+
+**When to use:** Components that share fetched data, need a single cache key, or should invalidate together. Reduces database queries and network round trips.
+
+#### Using Promise.all
+
+Create multiple `renderServerComponent` or `createCompositeComponent` calls and return them as an object:
+
+```tsx
+const getPageLayout = createServerFn().handler(async () => {
+  // Fetch shared data once
+  const user = await db.users.getCurrent()
+  const config = await db.config.get()
+
+  // Create multiple components that share this data
+  const [Header, Content, Footer] = await Promise.all([
+    renderServerComponent(
+      <header>
+        <Logo />
+        <nav>
+          {config.navItems.map((item) => (
+            <NavLink key={item.id} {...item} />
+          ))}
+        </nav>
+        <UserMenu name={user.name} />
+      </header>,
+    ),
+    renderServerComponent(
+      <main>
+        <h1>Welcome, {user.name}</h1>
+        <Dashboard stats={user.stats} />
+      </main>,
+    ),
+    renderServerComponent(
+      <footer>
+        <span>{config.copyright}</span>
+        {config.footerLinks.map((link) => (
+          <a key={link.id} href={link.url}>
+            {link.label}
+          </a>
+        ))}
+      </footer>,
+    ),
+  ])
+
+  return { Header, Content, Footer }
+})
+
+export const Route = createFileRoute('/dashboard')({
+  loader: async () => await getPageLayout(),
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { Header, Content, Footer } = Route.useLoaderData()
+
+  return (
+    <>
+      {Header}
+      {Content}
+      {Footer}
+    </>
+  )
+}
+```
+
+#### Using Nested Structures
+
+Alternatively, return a nested object structure from a single server function.
+
+- Use `renderServerComponent` when you just need renderables (no slots).
+- Use `createCompositeComponent` when you want each part to accept slots.
+
+```tsx
+const getPageLayout = createServerFn().handler(async () => {
+  const user = await db.users.getCurrent()
+  const config = await db.config.get()
+
+  const [Header, Content, Footer] = await Promise.all([
+    createCompositeComponent((props: { children?: React.ReactNode }) => (
+      <header>
+        <Logo />
+        <nav>
+          {config.navItems.map((item) => (
+            <NavLink key={item.id} {...item} />
+          ))}
+        </nav>
+        <UserMenu name={user.name} />
+        {props.children}
+      </header>
+    )),
+    createCompositeComponent(
+      (props: { renderActions?: () => React.ReactNode }) => (
+        <main>
+          <h1>Welcome, {user.name}</h1>
+          <Dashboard stats={user.stats} />
+          {props.renderActions?.()}
+        </main>
+      ),
+    ),
+    createCompositeComponent(() => (
+      <footer>
+        <span>{config.copyright}</span>
+        {config.footerLinks.map((link) => (
+          <a key={link.id} href={link.url}>
+            {link.label}
+          </a>
+        ))}
+      </footer>
+    )),
+  ])
+
+  return { Header, Content, Footer }
+})
+
+export const Route = createFileRoute('/dashboard')({
+  loader: async () => ({
+    Layout: await getPageLayout(),
+  }),
+  component: DashboardPage,
+})
+```
+
+Render nested composites using dot notation:
+
+```tsx
+import { CompositeComponent } from '@tanstack/react-start/rsc'
+
+function DashboardPage() {
+  const { Layout } = Route.useLoaderData()
+
+  return (
+    <>
+      <CompositeComponent src={Layout.Header}>
+        <button onClick={() => setMenuOpen(true)}>Menu</button>
+      </CompositeComponent>
+      <CompositeComponent
+        src={Layout.Content}
+        renderActions={() => <ActionButtons />}
+      />
+      <CompositeComponent src={Layout.Footer} />
+    </>
+  )
+}
+```
+
+Or destructure them from the loader data:
+
+```tsx
+import { CompositeComponent } from '@tanstack/react-start/rsc'
+
+function DashboardPage() {
+  const { Header, Content, Footer } = Route.useLoaderData().Layout
+
+  return (
+    <>
+      <CompositeComponent src={Header}>
+        <button onClick={() => setMenuOpen(true)}>Menu</button>
+      </CompositeComponent>
+      <CompositeComponent
+        src={Content}
+        renderActions={() => <ActionButtons />}
+      />
+      <CompositeComponent src={Footer} />
+    </>
+  )
+}
+```
+
+Each nested component receives its own slot props independently. The `children` passed to `<CompositeComponent src={Header}>` only affects that component, not the others.
+
+All three components share the same user and config data from a single database query.
+
+### Deferred Component Loading
+
+Return promises for server components instead of awaiting them. The client uses `React.use()` with `Suspense` to render each component as it resolves.
+
+**When to use:** Components with varying data latencies where faster results should render before slower ones complete. Avoids blocking on the slowest query.
+
+```tsx
+import { Suspense, use } from 'react'
+
+const getDashboardBundle = createServerFn().handler(() => ({
+  // Fast - resolves in ~100ms
+  QuickStats: (async () => {
+    const stats = await cache.getStats() // Fast cache hit
+    return renderServerComponent(<StatsCard data={stats} />)
+  })(),
+
+  // Medium - resolves in ~500ms
+  RecentActivity: (async () => {
+    const activity = await db.activity.getRecent()
+    return renderServerComponent(<ActivityFeed items={activity} />)
+  })(),
+
+  // Slow - resolves in ~2000ms
+  Analytics: (async () => {
+    const data = await analytics.computeMetrics() // Expensive query
+    return renderServerComponent(<AnalyticsChart data={data} />)
+  })(),
+}))
+
+export const Route = createFileRoute('/dashboard')({
+  loader: () => getDashboardBundle(),
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { QuickStats, RecentActivity, Analytics } = Route.useLoaderData()
+
+  return (
+    <div>
+      <Suspense fallback={<Skeleton />}>
+        <Deferred promise={QuickStats} />
+      </Suspense>
+
+      <Suspense fallback={<Skeleton />}>
+        <Deferred promise={RecentActivity} />
+      </Suspense>
+
+      <Suspense fallback={<Skeleton />}>
+        <Deferred promise={Analytics} />
+      </Suspense>
+    </div>
+  )
+}
+
+function Deferred({ promise }: { promise: Promise<unknown> }) {
+  const Renderable = use(promise)
+  return <>{Renderable}</>
+}
+```
+
+QuickStats appears first, RecentActivity follows, then Analytics loads last. Users see progressive content instead of waiting for everything.
+
+### Suspense Inside Server Components
+
+Use React's `Suspense` directly inside server components to stream parts of the component as they become ready.
+
+**When to use:** A single server component with multiple async child components that should stream independently. Keeps related UI in one component while allowing progressive rendering.
+
+```tsx
+async function SlowMetric({ label, delay }: { label: string; delay: number }) {
+  await new Promise((resolve) => setTimeout(resolve, delay))
+  const value = await db.metrics.get(label)
+
+  return (
+    <div className="metric">
+      <span>{label}</span>
+      <span>{value.toLocaleString()}</span>
+    </div>
+  )
+}
+
+const getAnalyticsDashboard = createServerFn().handler(() =>
+  renderServerComponent(
+    <div className="dashboard">
+      <h1>Analytics</h1>
+
+      <div className="metrics-grid">
+        <Suspense fallback={<MetricSkeleton label="Active Users" />}>
+          <SlowMetric label="Active Users" delay={500} />
+        </Suspense>
+
+        <Suspense fallback={<MetricSkeleton label="Revenue" />}>
+          <SlowMetric label="Revenue" delay={1500} />
+        </Suspense>
+
+        <Suspense fallback={<MetricSkeleton label="Conversion" />}>
+          <SlowMetric label="Conversion" delay={2500} />
+        </Suspense>
+      </div>
+    </div>,
+  ),
+)
+```
+
+Each metric streams independently. The dashboard shell appears immediately, then metrics pop in as their data loads.
+
+### Streaming with Async Generators
+
+Use async generators to stream server components one at a time. The client receives and renders each component as it's yielded.
+
+**When to use:** Unbounded or large result sets where items should render incrementally. Useful when processing time per item varies or total count is unknown upfront.
+
+```tsx
+import {
+  CompositeComponent,
+  createCompositeComponent,
+} from '@tanstack/react-start/rsc'
+
+const streamNotifications = createServerFn().handler(async function* () {
+  // Yield initial batch immediately
+  const recent = await db.notifications.getRecent(3)
+  for (const notification of recent) {
+    yield await createCompositeComponent<{
+      renderActions?: (data: { id: string }) => React.ReactNode
+    }>((props) => (
+      <div className="notification">
+        <h3>{notification.title}</h3>
+        <p>{notification.message}</p>
+        {props.renderActions?.({ id: notification.id })}
+      </div>
+    ))
+  }
+
+  // Stream older notifications with delays
+  const older = await db.notifications.getOlder(5)
+  for (const notification of older) {
+    await new Promise((resolve) => setTimeout(resolve, 300))
+    yield await createCompositeComponent<{
+      renderActions?: (data: { id: string }) => React.ReactNode
+    }>((props) => (
+      <div className="notification">
+        <h3>{notification.title}</h3>
+        <p>{notification.message}</p>
+        {props.renderActions?.({ id: notification.id })}
+      </div>
+    ))
+  }
+})
+
+export const Route = createFileRoute('/notifications')({
+  component: NotificationsPage,
+})
+
+function NotificationsPage() {
+  const [notifications, setNotifications] = React.useState<Array<unknown>>([])
+  const [isStreaming, setIsStreaming] = React.useState(false)
+
+  const startStreaming = React.useCallback(async () => {
+    setNotifications([])
+    setIsStreaming(true)
+
+    const stream = await streamNotifications()
+    for await (const notification of stream) {
+      setNotifications((prev) => [...prev, notification])
+    }
+
+    setIsStreaming(false)
+  }, [])
+
+  return (
+    <div>
+      <button onClick={startStreaming} disabled={isStreaming}>
+        {isStreaming ? 'Streaming...' : 'Load Notifications'}
+      </button>
+
+      {notifications.map((notificationSrc, i) => (
+        <CompositeComponent
+          key={i}
+          src={notificationSrc}
+          renderActions={({ id }) => (
+            <button onClick={() => markAsRead(id)}>Mark read</button>
+          )}
+        />
+      ))}
+    </div>
+  )
+}
+```
+
+Notifications appear one by one. The first three show immediately, then more stream in. Each supports client interactivity through render props.
+
+## Error Handling
+
+Errors in Server Components—whether during data fetching or rendering—propagate to the client.
+
+### Route Level Errors
+
+If a Server Component fails to load in the `loader`, the route's `errorComponent` renders:
+
+```tsx
+export const Route = createFileRoute('/')({
+  loader: async () => ({
+    // If this fails, the errorComponent renders
+    Greeting: await getGreeting(),
+  }),
+  errorComponent: ({ error }) => <div>Failed to load: {error.message}</div>,
+  component: HomePage,
+})
+```
+
+### Component Level Errors
+
+To isolate errors (e.g., preventing a single failing widget from crashing the page), you must use **[Deferred Loading](#deferred-component-loading)**.
+
+By returning a Promise from the loader instead of awaiting it, the Route Component renders immediately. If the Promise later rejects, the `ErrorBoundary` inside your component catches it.
+
+```tsx
+// 1. Loader returns a Promise (don't await!)
+export const Route = createFileRoute('/dashboard')({
+  loader: () => ({
+    // If this fails, only the specific ErrorBoundary below catches it
+    WidgetPromise: getWidget(),
+  }),
+  component: DashboardPage,
+})
+
+// 2. Component handles the potential failure
+function DashboardPage() {
+  const { WidgetPromise } = Route.useLoaderData()
+
+  return (
+    <ErrorBoundary fallback={<div>Widget unavailable</div>}>
+      <React.Suspense fallback={<Skeleton />}>
+        <Deferred promise={WidgetPromise} />
+      </React.Suspense>
+    </ErrorBoundary>
+  )
+}
+```
+
+## Tips
+
+### Using `React.cache`
+
+`React.cache` works inside server components for request-scoped memoization. This is useful when multiple components need the same expensive computation:
+
+```tsx
+import { cache } from 'react'
+
+const getUser = cache(async (userId: string) => {
+  return db.users.findById(userId)
+})
+
+// Both components share the same cached result within a single request
+async function UserHeader() {
+  const user = await getUser('123') // Fetches from DB
+  return <h1>{user.name}</h1>
+}
+
+async function UserSidebar() {
+  const user = await getUser('123') // Returns cached result
+  return <aside>{user.bio}</aside>
+}
+```
+
+### Router Links in Server Components
+
+TanStack Router's `Link` component works inside server components. The link is serialized and hydrates on the client for client-side navigation:
+
+```tsx
+import { Link } from '@tanstack/react-router'
+
+const getNavigation = createServerFn().handler(async () => {
+  const pages = await db.pages.list()
+
+  return renderServerComponent(
+    <nav>
+      {pages.map((page) => (
+        <Link key={page.id} to="/pages/$pageId" params={{ pageId: page.id }}>
+          {page.title}
+        </Link>
+      ))}
+    </nav>,
+  )
+})
+```
+
+### CSS in Server Components
+
+CSS Modules and global CSS imports work in server components. Styles are extracted and sent to the client:
+
+```tsx
+import styles from './Card.module.css'
+
+const getCard = createServerFn().handler(async () => {
+  return renderServerComponent(
+    <div className={styles.card}>
+      <h2 className={styles.title}>Server Rendered</h2>
+    </div>,
+  )
+})
+```
+
+## Rules and Limitations
+
+### Slots are opaque on the server
+
+The server cannot inspect slot content. `React.Children.map()` and `cloneElement()` won't work on `props.children`:
+
+```tsx
+// Won't work - children is a placeholder on the server
+createCompositeComponent((props: { children?: React.ReactNode }) => (
+  <div>
+    {React.Children.map(props.children, (child) =>
+      React.cloneElement(child, { extra: 'prop' }),
+    )}
+  </div>
+))
+
+// Do this instead - use render props
+createCompositeComponent<{
+  renderItem?: (data: { extra: string }) => React.ReactNode
+}>((props) => <div>{props.renderItem?.({ extra: 'prop' })}</div>)
+```
+
+### Render prop arguments must be serializable
+
+Arguments passed to slots via render props and or components travel through React's Flight protocol. Use serializable values only: strings, numbers, booleans, null, plain objects, and arrays.
+
+## How It Works
+
+When a server component accesses slot props, it accesses a proxy:
+
+- Reading `props.children` creates a placeholder for "whatever children the caller provides"
+- Calling `props.renderFn(args)` creates a placeholder that records `args`
+
+TanStack Start sends a React Flight stream with these placeholders. On the client, placeholders are replaced with the actual props you passed when rendering.
+
+## Current Status
+
+Server Components are experimental in TanStack Start and will remain so into early v1.
+
+**Serialization:** Uses React's native Flight protocol. TanStack Start's custom serialization isn't available in server components yet. Primitives, Dates, and React elements work. Custom serialization coming in a future release.
+
+**API:** The RSC helper APIs may see refinements.
+
+Questions? [Open an issue](https://github.com/tanstack/router/issues) or join the [Discord](https://tlinz.com/discord).
+
+## Low-Level Flight Stream APIs
+
+For advanced use cases (custom streaming protocols, API route integration, external RSC-aware systems), TanStack Start exposes low-level Flight stream APIs. For most cases, prefer the high-level helpers which handle caching, streaming, and (for composites) slots automatically.
+
+Import from `@tanstack/react-start/rsc`:
+
+| Function                   | Available in          | Description                                        |
+| -------------------------- | --------------------- | -------------------------------------------------- |
+| `renderToReadableStream`   | server functions only | Renders React elements to a Flight stream          |
+| `createFromFetch`          | Client                | Decodes a Flight stream from a `Promise<Response>` |
+| `createFromReadableStream` | Client/SSR            | Decodes a Flight stream from a `ReadableStream`    |
+
+`createFromFetch` is a convenience wrapper around `createFromReadableStream` that accepts a fetch promise directly and extracts the body stream internally.
+
+### Example
+
+```tsx
+// src/routes/api/rsc.ts - API route with Flight stream
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { createServerFn } from '@tanstack/react-start'
+import { renderToReadableStream } from '@tanstack/react-start/rsc'
+
+const getFlightStream = createServerFn({ method: 'GET' }).handler(async () => {
+  return renderToReadableStream(<div>Server Rendered Content</div>)
+})
+
+export const APIRoute = createAPIFileRoute('/api/rsc')({
+  GET: async () => {
+    const stream = await getFlightStream()
+    return new Response(stream, {
+      headers: { 'Content-Type': 'text/x-component' },
+    })
+  },
+})
+```
+
+```tsx
+// Client: fetch and decode the Flight stream
+import { createFromFetch } from '@tanstack/react-start/rsc'
+
+async function fetchRSC() {
+  return createFromFetch(fetch('/api/rsc'))
+}
+```
diff --git a/mintlify/start/framework/react/guide/server-entry-point.md b/mintlify/start/framework/react/guide/server-entry-point.md
new file mode 100644
index 000000000..5acc8ee55
--- /dev/null
+++ b/mintlify/start/framework/react/guide/server-entry-point.md
@@ -0,0 +1,106 @@
+---
+id: server-entry-point
+title: Server Entry Point
+---
+
+# Server Entry Point
+
+> [!NOTE]
+> The server entry point is **optional** out of the box. If not provided, TanStack Start will automatically handle the server entry point for you using the below as a default.
+
+The Server Entry Point supports the universal fetch handler format, commonly used by [Cloudflare Workers](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/) and other WinterCG-compatible runtimes.
+
+To ensure interoperability, the default export must conform to our `ServerEntry` interface:
+
+```ts
+export default {
+  fetch(req: Request, opts?: RequestOptions): Response | Promise<Response> {
+    // ...
+  },
+}
+```
+
+TanStack Start exposes a wrapper to make creation type-safe. This is done in the `src/server.ts` file.
+
+```tsx
+// src/server.ts
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request)
+  },
+})
+```
+
+Whether we are statically generating our app or serving it dynamically, the `server.ts` file is the entry point for doing all SSR-related work as well as for handling server routes and server function requests.
+
+## Custom Server Handlers
+
+You can create custom server handlers to modify how your application is rendered:
+
+```tsx
+// src/server.ts
+import {
+  createStartHandler,
+  defaultStreamHandler,
+  defineHandlerCallback,
+} from '@tanstack/react-start/server'
+import { createServerEntry } from '@tanstack/react-start/server-entry'
+
+const customHandler = defineHandlerCallback((ctx) => {
+  // add custom logic here
+  return defaultStreamHandler(ctx)
+})
+
+const fetch = createStartHandler(customHandler)
+
+export default createServerEntry({
+  fetch,
+})
+```
+
+## Request context
+
+When your server needs to pass additional, typed data into request handlers (for example, authenticated user info, a database connection, or per-request flags), register a request context type via TypeScript module augmentation. The registered context is delivered as the second argument to the server `fetch` handler and is available throughout the server-side middleware chain — including global middleware, request/function middleware, server routes, server functions, and the router itself.
+
+To add types for your request context, augment the `Register` interface from `@tanstack/react-router` with a `server.requestContext` property. The runtime `context` you pass to `handler.fetch` will then match that type. Example:
+
+```tsx
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+
+type MyRequestContext = {
+  hello: string
+  foo: number
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    server: {
+      requestContext: MyRequestContext
+    }
+  }
+}
+
+export default createServerEntry({
+  async fetch(request) {
+    return handler.fetch(request, { context: { hello: 'world', foo: 123 } })
+  },
+})
+```
+
+## Server Configuration
+
+The server entry point is where you can configure server-specific behavior:
+
+- Request/response middleware
+- Custom error handling
+- Authentication logic
+- Database connections
+- Logging and monitoring
+
+This flexibility allows you to customize how your TanStack Start application handles server-side rendering while maintaining the framework's conventions.
+
+## Cloudflare Workers
+
+When deploying to Cloudflare Workers, you can extend `server.ts` to handle additional Workers features like queues, scheduled events, and Durable Objects. For a comprehensive guide, see the [Cloudflare Workers documentation for TanStack Start](https://developers.cloudflare.com/workers/framework-guides/web-apps/tanstack-start/#custom-entrypoints).
diff --git a/mintlify/start/framework/react/guide/server-functions.md b/mintlify/start/framework/react/guide/server-functions.md
new file mode 100644
index 000000000..3856de9d7
--- /dev/null
+++ b/mintlify/start/framework/react/guide/server-functions.md
@@ -0,0 +1,484 @@
+---
+id: server-functions
+title: Server Functions
+---
+
+## What are Server Functions?
+
+Server functions let you define server-only logic that can be called from anywhere in your application - loaders, components, hooks, or other server functions. They run on the server but can be invoked from client code seamlessly.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+export const getServerTime = createServerFn().handler(async () => {
+  // This runs only on the server
+  return new Date().toISOString()
+})
+
+// Call from anywhere - components, loaders, hooks, etc.
+const time = await getServerTime()
+```
+
+Server functions provide server capabilities (database access, environment variables, file system) while maintaining type safety across the network boundary.
+
+> [!NOTE]
+> Server functions are meant to be called by your TanStack Start application. They are easy to use from your app code, and Start handles serialization across the client/server boundary. If you need an endpoint that can be called from outside your Start app, use [server routes](/start/framework/react/guide/server-routes) instead.
+
+## Same-Origin Requests
+
+Server functions are same-origin RPC endpoints for your application. Browser requests to server functions should come from the same origin, verified with Fetch Metadata (`Sec-Fetch-Site`), `Origin`, or `Referer` headers. Use server routes for public APIs or endpoints that intentionally support cross-origin requests.
+
+TanStack Start provides `createCsrfMiddleware()` to protect server functions from cross-site requests. If your app does not define `src/start.ts`, Start installs this middleware automatically for server functions. If you define `src/start.ts`, add the middleware explicitly:
+
+```tsx
+// src/start.ts
+import { createStart, createCsrfMiddleware } from '@tanstack/react-start'
+
+const csrfMiddleware = createCsrfMiddleware({
+  filter: (ctx) => ctx.handlerType === 'serverFn',
+})
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [csrfMiddleware],
+}))
+```
+
+By default, `Origin` and `Referer` checks compare against the incoming request URL origin. If your deployment needs to allow a different public origin, configure it on the CSRF middleware with `createCsrfMiddleware({ origin: 'https://app.example.com' })`.
+
+> [!TIP]
+> Requests without any of these headers (`Sec-Fetch-Site`, `Origin`, or `Referer`) are rejected by default. If your deployment strips these headers and you have another layer that guarantees same-origin server function requests, you can opt in with `createCsrfMiddleware({ filter: (ctx) => ctx.handlerType === 'serverFn', allowRequestsWithoutOriginCheck: true })`.
+
+## Basic Usage
+
+Server functions are created with `createServerFn()` and can specify HTTP method:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+// GET request (default)
+export const getData = createServerFn().handler(async () => {
+  return { message: 'Hello from server!' }
+})
+
+// POST request
+export const saveData = createServerFn({ method: 'POST' }).handler(async () => {
+  // Server-only logic
+  return { success: true }
+})
+```
+
+## Where to Call Server Functions
+
+Call server functions from:
+
+- **Route loaders** - Perfect for data fetching
+- **Components** - Use with `useServerFn()` hook
+- **Other server functions** - Compose server logic
+- **Event handlers** - Handle form submissions, clicks, etc.
+
+```tsx
+// In a route loader
+export const Route = createFileRoute('/posts')({
+  loader: () => getServerPosts(),
+})
+
+// In a component
+function PostList() {
+  const getPosts = useServerFn(getServerPosts)
+
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+}
+```
+
+## File Organization
+
+For larger applications, consider organizing server-side code into separate files. Here's one approach:
+
+```
+src/utils/
+├── users.functions.ts   # Server function wrappers (createServerFn)
+├── users.server.ts      # Server-only helpers (DB queries, internal logic)
+└── schemas.ts           # Shared validation schemas (client-safe)
+```
+
+- **`.functions.ts`** - Export `createServerFn` wrappers, safe to import anywhere
+- **`.server.ts`** - Server-only code, only imported inside server function handlers
+- **`.ts`** (no suffix) - Client-safe code (types, schemas, constants)
+
+### Example
+
+```tsx
+// users.server.ts - Server-only helpers
+import { db } from '~/db'
+
+export async function findUserById(id: string) {
+  return db.query.users.findFirst({ where: eq(users.id, id) })
+}
+```
+
+```tsx
+// users.functions.ts - Server functions
+import { createServerFn } from '@tanstack/react-start'
+import { findUserById } from './users.server'
+
+export const getUser = createServerFn({ method: 'GET' })
+  .validator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    return findUserById(data.id)
+  })
+```
+
+### Static Imports Are Safe
+
+Server functions can be statically imported in any file, including client components:
+
+```tsx
+// ✅ Safe - build process handles environment shaking
+import { getUser } from '~/utils/users.functions'
+
+function UserProfile({ id }) {
+  const { data } = useQuery({
+    queryKey: ['user', id],
+    queryFn: () => getUser({ data: { id } }),
+  })
+}
+```
+
+The build process replaces server function implementations with RPC stubs in client bundles. The actual server code never reaches the browser.
+
+> [!WARNING]
+> Avoid dynamic imports for server functions:
+>
+> ```tsx
+> // ❌ Can cause bundler issues
+> const &#123; getUser &#125; = await import('~/utils/users.functions')
+> ```
+
+## Parameters & Validation
+
+Server functions accept a single `data` parameter. Since they cross the network boundary, validation ensures type safety and runtime correctness.
+
+### Basic Parameters
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+export const greetUser = createServerFn({ method: 'GET' })
+  .validator((data: { name: string }) => data)
+  .handler(async ({ data }) => {
+    return `Hello, ${data.name}!`
+  })
+
+await greetUser({ data: { name: 'John' } })
+```
+
+### Validation with Zod
+
+For robust validation, use schema libraries like Zod:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { z } from 'zod'
+
+const UserSchema = z.object({
+  name: z.string().min(1),
+  age: z.number().min(0),
+})
+
+export const createUser = createServerFn({ method: 'POST' })
+  .validator(UserSchema)
+  .handler(async ({ data }) => {
+    // data is fully typed and validated
+    return `Created user: ${data.name}, age ${data.age}`
+  })
+```
+
+### Form Data
+
+Handle form submissions with FormData:
+
+```tsx
+export const submitForm = createServerFn({ method: 'POST' })
+  .validator((data) => {
+    if (!(data instanceof FormData)) {
+      throw new Error('Expected FormData')
+    }
+
+    return {
+      name: data.get('name')?.toString() || '',
+      email: data.get('email')?.toString() || '',
+    }
+  })
+  .handler(async ({ data }) => {
+    // Process form data
+    return { success: true }
+  })
+```
+
+### Serialization Type Checking
+
+Server function inputs and outputs cross the network boundary, so TypeScript checks that they are serializable:
+
+- Validator input types must be serializable. `FormData` is also allowed for `POST` server functions.
+- Handler return types must be serializable. `Response` objects are allowed.
+
+This default behavior is called `strict` mode. If you intentionally need to opt out of these type-level serialization checks, pass the `strict` option to `createServerFn`:
+
+```tsx
+// Disable input and output serialization type checks
+export const looseServerFn = createServerFn({ strict: false })
+  .validator((data: { value: unknown }) => data)
+  .handler(async ({ data }) => {
+    return data.value
+  })
+
+// Disable only input serialization type checks
+export const looseInputServerFn = createServerFn({
+  strict: { input: false },
+})
+  .validator((data: { value: unknown }) => data)
+  .handler(async () => {
+    return { ok: true }
+  })
+
+// Disable only output serialization type checks
+export const looseOutputServerFn = createServerFn({
+  strict: { output: false },
+}).handler(async () => {
+  return getCustomSerializedValue()
+})
+```
+
+> [!WARNING]
+> `strict: false` only relaxes TypeScript's serialization checks. Values still need to be handled correctly by the runtime serialization layer when they are sent between the client and server. Prefer the default `strict: true` unless you know why the default serializability rules are too restrictive for a specific server function.
+
+## Error Handling & Redirects
+
+Server functions can throw errors, redirects, and not-found responses that are handled automatically when called from route lifecycles or components using `useServerFn()`.
+
+### Basic Errors
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+export const riskyFunction = createServerFn().handler(async () => {
+  if (Math.random() > 0.5) {
+    throw new Error('Something went wrong!')
+  }
+  return { success: true }
+})
+
+// Errors are serialized to the client
+try {
+  await riskyFunction()
+} catch (error) {
+  console.log(error.message) // "Something went wrong!"
+}
+```
+
+### Redirects
+
+Use redirects for authentication, navigation, etc:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { redirect } from '@tanstack/react-router'
+
+export const requireAuth = createServerFn().handler(async () => {
+  const user = await getCurrentUser()
+
+  if (!user) {
+    throw redirect({ to: '/login' })
+  }
+
+  return user
+})
+```
+
+### Not Found
+
+Throw not-found errors for missing resources:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { notFound } from '@tanstack/react-router'
+
+export const getPost = createServerFn()
+  .validator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    const post = await db.findPost(data.id)
+
+    if (!post) {
+      throw notFound()
+    }
+
+    return post
+  })
+```
+
+## Advanced Topics
+
+For more advanced server function patterns and features, see these dedicated guides:
+
+### Server Context & Request Handling
+
+Access request headers, cookies, and customize responses:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import {
+  getRequest,
+  getRequestHeader,
+  setResponseHeaders,
+  setResponseStatus,
+} from '@tanstack/react-start/server'
+
+// Public, non-personalized data — safe to cache shared across users.
+export const getPublicData = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    setResponseHeaders(
+      new Headers({
+        // 'public' is correct ONLY when the response does not depend on identity.
+        // For anything tied to a session/user/tenant, see the authenticated example below.
+        'Cache-Control': 'public, max-age=300',
+        'CDN-Cache-Control': 'max-age=3600, stale-while-revalidate=600',
+      }),
+    )
+    setResponseStatus(200)
+    return fetchPublicData()
+  },
+)
+```
+
+> **Cache-Control safety:** `public` tells every CDN/proxy between you and the user that the response can be served to anyone. If the handler reads a session, cookie, or auth header — or branches on identity at all — using `public` will cache one user's response and replay it to the next user (cross-tenant data leak). For authenticated responses, use `private`:
+
+```tsx
+// Authenticated data — must NOT be 'public'.
+export const getMyOrders = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    const session = await requireSession()
+    setResponseHeaders(
+      new Headers({
+        // 'private' = only the user-agent may cache. Vary by Cookie/Authorization
+        // so any intermediary that does cache keys by identity, not URL alone.
+        'Cache-Control': 'private, max-age=60',
+        Vary: 'Cookie, Authorization',
+      }),
+    )
+    return db.orders.findMany({ where: { userId: session.userId } })
+  },
+)
+
+// For sensitive data, opt out entirely:
+// setResponseHeaders(new Headers({ 'Cache-Control': 'no-store' }))
+```
+
+Available utilities:
+
+- `getRequest()` - Access the full Request object
+- `getRequestHeader(name)` - Read a specific request header
+- `setResponseHeader(name, value)` - Set a single response header
+- `setResponseHeaders(headers)` - Set multiple response headers via Headers object
+- `setResponseStatus(code)` - Set the HTTP status code
+
+### Streaming
+
+Stream typed data from server functions to the client. See the [Streaming Data from Server Functions guide](/start/framework/react/guide/streaming-data-from-server-functions).
+
+### Raw Responses
+
+Return `Response` objects binary data, or custom content types.
+
+### Progressive Enhancement
+
+Use server functions without JavaScript by leveraging the `.url` property with HTML forms.
+
+### Middleware
+
+Compose server functions with middleware for authentication, logging, and shared logic. See the [Middleware guide](/start/framework/react/guide/middleware).
+
+> **Protect data in the endpoint that serves it.** Server functions are API endpoints reachable independently of whichever route renders the calling UI. Apply `authMiddleware` or an equivalent in-handler check to every server function that reads or writes private data. `beforeLoad` is useful route UX, but it is not the data boundary. See [Authentication Server Primitives](/start/framework/react/guide/authentication-server-primitives).
+
+### Static Server Functions
+
+Cache server function results at build time for static generation. See [Static Server Functions](/start/framework/react/guide/static-server-functions).
+
+### Server Components
+
+Server functions can return Server Components - server-rendered React components that the client can compose. See [Server Components](/start/framework/react/guide/server-components).
+
+### Request Cancellation
+
+Handle request cancellation with `AbortSignal` for long-running operations.
+
+### Function ID generation for production build
+
+Server functions are addressed by a generated, stable function ID under the hood. These IDs are embedded into the client/SSR builds and used by the server to locate and import the correct module at runtime.
+
+By default, IDs are SHA256 hashes of the same seed to keep bundles compact and avoid leaking file paths.
+If two server functions end up with the same ID (including when using a custom generator), the system de-duplicates by appending an incrementing suffix like `_1`, `_2`, etc.
+
+Customization:
+
+You can customize function ID generation for the production build by providing a `generateFunctionId` function when configuring the TanStack Start build tool plugin.
+
+Prefer deterministic inputs (filename + functionName) so IDs remain stable between builds.
+
+Please note that this customization is **experimental** and subject to change.
+
+Example:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      serverFns: {
+        generateFunctionId: ({ filename, functionName }) => {
+          return crypto
+            .createHash('sha1')
+            .update(`${filename}--${functionName}`)
+            .digest('hex')
+        },
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      serverFns: {
+        generateFunctionId: ({ filename, functionName }) => {
+          return crypto
+            .createHash('sha1')
+            .update(`${filename}--${functionName}`)
+            .digest('hex')
+        },
+      },
+    }),
+  ],
+})
+```
+
+
+
+---
+
+> **Note**: Server functions use a compilation process that extracts server code from client bundles while maintaining seamless calling patterns. On the client, calls become `fetch` requests to the server.
diff --git a/mintlify/start/framework/react/guide/server-routes.md b/mintlify/start/framework/react/guide/server-routes.md
new file mode 100644
index 000000000..89106a080
--- /dev/null
+++ b/mintlify/start/framework/react/guide/server-routes.md
@@ -0,0 +1,444 @@
+---
+id: server-routes
+title: Server Routes
+---
+
+Server routes are a powerful feature of TanStack Start that allow you to create server-side endpoints in your application and are useful for handling raw HTTP requests, form submissions, user authentication, and much more.
+
+Server routes can be defined in your `./src/routes` directory of your project **right alongside your TanStack Router routes** and are automatically handled by the TanStack Start server.
+
+Here's what a simple server route looks like:
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response('Hello, World!')
+      },
+    },
+  },
+})
+```
+
+> [!NOTE]
+> Server routes are meant for HTTP endpoints that need to be called from outside your TanStack Start application. If you only need to call server-side logic from within your Start app and want Start to handle serialization for you, use [server functions](/start/framework/react/guide/server-functions) instead.
+
+## Server Routes and App Routes
+
+Because server routes can be defined in the same directory as your app routes, you can even use the same file for both!
+
+```tsx
+// routes/hello.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        return new Response(JSON.stringify({ message: `Hello, ${body.name}!` }))
+      },
+    },
+  },
+  component: HelloComponent,
+})
+
+function HelloComponent() {
+  const [reply, setReply] = useState('')
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          fetch('/hello', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ name: 'Tanner' }),
+          })
+            .then((res) => res.json())
+            .then((data) => setReply(data.message))
+        }}
+      >
+        Say Hello
+      </button>
+    </div>
+  )
+}
+```
+
+## File Route Conventions
+
+Server routes in TanStack Start follow the same file-based routing conventions as TanStack Router. This means that each file in your `routes` directory with a `server` property in the `createFileRoute` call will be treated as an API route. Here are a few examples:
+
+- `/routes/users.ts` will create an API route at `/users`
+- `/routes/users.index.ts` will **also** create an API route at `/users` (but will error if duplicate methods are defined)
+- `/routes/users/$id.ts` will create an API route at `/users/$id`
+- `/routes/users/$id/posts.ts` will create an API route at `/users/$id/posts`
+- `/routes/users.$id.posts.ts` will create an API route at `/users/$id/posts`
+- `/routes/api/file/$.ts` will create an API route at `/api/file/$`
+- `/routes/my-script[.]js.ts` will create an API route at `/my-script.js`
+
+## Unique Route Paths
+
+Each route can only have a single handler file associated with it. So, if you have a file named `routes/users.ts` which'd equal the request path of `/users`, you cannot have other files that'd also resolve to the same route. For example, the following files would all resolve to the same route and would error:
+
+- `/routes/users.index.ts`
+- `/routes/users.ts`
+- `/routes/users/index.ts`
+
+## Escaped Matching
+
+Just as with normal routes, server routes can match on escaped characters. For example, a file named `routes/users[.]json.ts` will create an API route at `/users.json`.
+
+## Pathless Layout Routes and Break-out Routes
+
+Because of the unified routing system, pathless layout routes and break-out routes are supported for similar functionality around server route middleware.
+
+- Pathless layout routes can be used to add middleware to a group of routes
+- Break-out routes can be used to "break out" of parent middleware
+
+## Nested Directories vs File-names
+
+In the examples above, you may have noticed that the file naming conventions are flexible and allow you to mix and match directories and file names. This is intentional and allows you to organize your Server routes in a way that makes sense for your application. You can read more about this in the [TanStack Router File-based Routing Guide](/router/routing/file-based-routing).
+
+## Handling Server Route Requests
+
+Server route requests are handled by Start automatically by default or by Start's `createStartHandler` in your custom `src/server.ts` entry point file.
+
+The start handler is responsible for matching an incoming request to a server route and executing the appropriate middleware and handler.
+
+If you need to customize the server handler, you can do so by creating a custom handler and then passing the event to the start handler. See [The Server Entry Point](/start/framework/react/guide/server-entry-point).
+
+## Defining a Server Route
+
+Server routes are created by adding a `server` property to your `createFileRoute` call. The `server` property contains:
+
+- `handlers` - Either an object mapping HTTP methods to handler functions, or a function that receives `createHandlers` for more advanced use cases
+- `middleware` - Optional route-level middleware array that applies to all handlers
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response('Hello, World! from ' + request.url)
+      },
+    },
+  },
+})
+```
+
+## Defining Server Route Handlers
+
+You can define handlers in two ways:
+
+- **Simple handlers**: Provide handler functions directly in a handlers object
+- **Handlers with middleware**: Use the `createHandlers` function to define handlers with middleware
+
+### Simple handlers
+
+For simple use cases, you can provide handler functions directly in a handlers object.
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response('Hello, World! from ' + request.url)
+      },
+    },
+  },
+})
+```
+
+### Adding middleware to specific handlers
+
+For more complex use cases, you can add middleware to specific handlers. This requires using the `createHandlers` function:
+
+```tsx
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: {
+          middleware: [loggerMiddleware],
+          handler: async ({ request }) => {
+            return new Response('Hello, World! from ' + request.url)
+          },
+        },
+      }),
+  },
+})
+```
+
+### Adding middleware to all handlers
+
+You can also add middleware that applies to all handlers in a route by using the `middleware` property at the server level:
+
+```tsx
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    middleware: [authMiddleware, loggerMiddleware], // Applies to all handlers
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response('Hello, World! from ' + request.url)
+      },
+      POST: async ({ request }) => {
+        const body = await request.json()
+        return new Response(`Hello, ${body.name}!`)
+      },
+    },
+  },
+})
+```
+
+### Combining route-level and handler-specific middleware
+
+You can combine both approaches - route-level middleware will run first, followed by handler-specific middleware:
+
+```tsx
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    middleware: [authMiddleware], // Runs first for all handlers
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: async ({ request }) => {
+          return new Response('Hello, World!')
+        },
+        POST: {
+          middleware: [validationMiddleware], // Runs after authMiddleware, only for POST
+          handler: async ({ request }) => {
+            const body = await request.json()
+            return new Response(`Hello, ${body.name}!`)
+          },
+        },
+      }),
+  },
+})
+```
+
+## Handler Context
+
+Each HTTP method handler receives an object with the following properties:
+
+- `request`: The incoming request object. You can read more about the `Request` object in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Request).
+- `params`: An object containing the dynamic path parameters of the route. For example, if the route path is `/users/$id`, and the request is made to `/users/123`, then `params` will be `{ id: '123' }`. We'll cover dynamic path parameters and wildcard parameters later in this guide.
+- `context`: An object containing the context of the request. This is useful for passing data between middleware.
+
+Once you've processed the request, you can return a `Response` object or `Promise<Response>` or even use any of the helpers from `@tanstack/react-start` to manipulate the response.
+
+## Dynamic Path Params
+
+Server routes support dynamic path parameters in the same way as TanStack Router. For example, a file named `routes/users/$id.ts` will create an API route at `/users/$id` that accepts a dynamic `id` parameter.
+
+```ts
+// routes/users/$id.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/users/$id')({
+  server: {
+    handlers: {
+      GET: async ({ params }) => {
+        const { id } = params
+        return new Response(`User ID: ${id}`)
+      },
+    },
+  },
+})
+
+// Visit /users/123 to see the response
+// User ID: 123
+```
+
+You can also have multiple dynamic path parameters in a single route. For example, a file named `routes/users/$id/posts/$postId.ts` will create an API route at `/users/$id/posts/$postId` that accepts two dynamic parameters.
+
+```ts
+// routes/users/$id/posts/$postId.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/users/$id/posts/$postId')({
+  server: {
+    handlers: {
+      GET: async ({ params }) => {
+        const { id, postId } = params
+        return new Response(`User ID: ${id}, Post ID: ${postId}`)
+      },
+    },
+  },
+})
+
+// Visit /users/123/posts/456 to see the response
+// User ID: 123, Post ID: 456
+```
+
+## Wildcard/Splat Param
+
+Server routes also support wildcard parameters at the end of the path, which are denoted by a `$` followed by nothing. For example, a file named `routes/file/$.ts` will create an API route at `/file/$` that accepts a wildcard parameter.
+
+```ts
+// routes/file/$.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/file/$')({
+  server: {
+    handlers: {
+      GET: async ({ params }) => {
+        const { _splat } = params
+        return new Response(`File: ${_splat}`)
+      },
+    },
+  },
+})
+
+// Visit /file/hello.txt to see the response
+// File: hello.txt
+```
+
+## Handling requests with a body
+
+To handle POST requests, you can add a `POST` handler to the route object. The handler will receive the request object as the first argument, and you can access the request body using the `request.json()` method.
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        return new Response(`Hello, ${body.name}!`)
+      },
+    },
+  },
+})
+
+// Send a POST request to /hello with a JSON body like { "name": "Tanner" }
+// Hello, Tanner!
+```
+
+This also applies to other HTTP methods like `PUT`, `PATCH`, and `DELETE`. You can add handlers for these methods in the route object and access the request body using the appropriate method.
+
+It's important to remember that the `request.json()` method returns a `Promise` that resolves to the parsed JSON body of the request. You need to `await` the result to access the body.
+
+This is a common pattern for handling POST requests in Server routes/ You can also use other methods like `request.text()` or `request.formData()` to access the body of the request.
+
+## Responding with JSON
+
+When returning JSON using a Response object, this is a common pattern:
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response(JSON.stringify({ message: 'Hello, World!' }), {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+      },
+    },
+  },
+})
+
+// Visit /hello to see the response
+// {"message":"Hello, World!"}
+```
+
+## Using the `Response.json` helper function
+
+Or you can use the [`Response.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static) helper function to automatically set the `Content-Type` header to `application/json` and serialize the JSON object for you.
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return Response.json({ message: 'Hello, World!' })
+      },
+    },
+  },
+})
+
+// Visit /hello to see the response
+// {"message":"Hello, World!"}
+```
+
+## Responding with a status code
+
+You can set the status code of the response by passing it as a property of the second argument to the `Response` constructor
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request, params }) => {
+        const user = await findUser(params.id)
+        if (!user) {
+          return new Response('User not found', {
+            status: 404,
+          })
+        }
+        return Response.json(user)
+      },
+    },
+  },
+})
+```
+
+In this example, we're returning a `404` status code if the user is not found. You can set any valid HTTP status code using this method.
+
+## Setting headers in the response
+
+Sometimes you may need to set headers in the response. You can do this by passing an object as the second argument to the `Response` constructor.
+
+```ts
+// routes/hello.ts
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/hello')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        return new Response('Hello, World!', {
+          headers: {
+            'Content-Type': 'text/plain',
+          },
+        })
+      },
+    },
+  },
+})
+// Visit /hello to see the response
+// Hello, World!
+```
diff --git a/mintlify/start/framework/react/guide/spa-mode.md b/mintlify/start/framework/react/guide/spa-mode.md
new file mode 100644
index 000000000..ae6d1ae88
--- /dev/null
+++ b/mintlify/start/framework/react/guide/spa-mode.md
@@ -0,0 +1,249 @@
+---
+id: spa-mode
+title: SPA mode
+---
+
+## What the heck is SPA mode?
+
+For applications that do not require SSR for either SEO, crawlers, or performance reasons, it may be desirable to ship static HTML to your users containing the "shell" of your application (or even prerendered HTML for specific routes) that contain the necessary `html`, `head`, and `body` tags to bootstrap your application only on the client.
+
+## Why use Start without SSR?
+
+**No SSR doesn't mean giving up server-side features!** SPA modes actually pair very nicely with server-side features like server functions and/or server routes or even other external APIs. It **simply means that the initial document will not contain the fully rendered HTML of your application until it has been rendered on the client using JavaScript**.
+
+## Benefits of SPA mode
+
+- **Easier to deploy** - A CDN that can serve static assets is all you need.
+- **Cheaper** to host - CDNs are cheap compared to Lambda functions or long-running processes.
+- **Client-side Only is simpler** - No SSR means less to go wrong with hydration, rendering, and routing.
+
+## Caveats of SPA mode
+
+- **Slower time to full content** - Time to full content is longer since all JS must download and execute before anything below the shell can be rendered.
+- **Less SEO friendly** - Robots, crawlers and link unfurlers _may_ have a harder time indexing your application unless they are configured to execute JS and your application can render within a reasonable amount of time.
+
+## How does it work?
+
+After enabling the SPA mode, running a Start build will have an additional prerendering step afterwards to generate the shell. This is done by:
+
+- **Prerendering** your application's **root route only**
+- Where your application would normally render your matched routes, your router's configured **pending fallback component is rendered instead**.
+- The resulting HTML is stored to a static HTML page called `/_shell.html` (configurable)
+- Default rewrites are configured to redirect all 404 requests to the SPA mode shell
+
+> [!NOTE]
+> Other routes may also be prerendered and it is recommended to prerender as much as you can in SPA mode, but this is not required for SPA mode to work.
+
+## Configuring SPA mode
+
+To configure SPA mode, there are a few options you can add to your Start plugin's options:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        enabled: true,
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        enabled: true,
+      },
+    }),
+  ],
+})
+```
+
+
+
+## Use Necessary Redirects
+
+Deploying a purely client-side SPA to a host or CDN often requires the use of redirects to ensure that urls are properly rewritten to the SPA shell. The goal of any deployment should include these priorities in this order:
+
+1. Ensure that static assets will always be served if they exist, e.g. /about.html. This is usually the default behavior for most CDNs
+2. (Optional) Allow-list specific subpaths to be routed through to any dynamic server handlers, e.g. /api/\*\* (More on this below)
+3. Ensure that all 404 requests are rewritten to the SPA shell, e.g. a catch-all redirect to /\_shell.html (or if you have configured your shell output path to be something custom, use that instead)
+
+## Basic Redirects Example
+
+Let's use Netlify's `_redirects` file to rewrite all 404 requests to the SPA shell.
+
+```
+# Catch all other 404 requests and rewrite them to the SPA shell
+/* /_shell.html 200
+```
+
+## Allowing Server Functions and Server Routes
+
+Again, using Netlify's `_redirects` file, we can allow-list specific subpaths to be routed through to the server.
+
+```
+# Allow requests to /_serverFn/* to be routed through to the server (If you have configured your server function base path to be something other than /_serverFn, use that instead)
+/_serverFn/* /_serverFn/:splat 200
+
+# Allow any requests to /api/* to be routed through to the server (Server routes can be created at any path, so you must ensure that any server routes you want to use are under this path, or simply add additional redirects for each server route base you want to expose)
+/api/* /api/:splat 200
+
+# Catch all other 404 requests and rewrite them to the SPA shell
+/* /_shell.html 200
+```
+
+## Shell Mask Path
+
+The default pathname used to generate the SPA shell is `/`. We call this the **shell mask path**. Since matched routes are not included, the pathname used to generate the shell is mostly irrelevant, but it's still configurable.
+
+> [!NOTE]
+> It's recommended to keep the default value of `/` as the shell mask path.
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        maskPath: '/app',
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        maskPath: '/app',
+      },
+    }),
+  ],
+})
+```
+
+
+
+## Prerendering Options
+
+The prerender option is used to configure the prerendering behavior of the SPA shell, and accepts the same prerender options as found in our prerendering guide.
+
+**By default, the following `prerender` options are set:**
+
+- `outputPath`: `/_shell.html`
+- `crawlLinks`: `false`
+- `retryCount`: `0`
+
+This means that by default, the shell will not be crawled for links to follow for additional prerendering, and will not retry prerendering fails.
+
+You can always override these options by providing your own prerender options:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        prerender: {
+          outputPath: '/custom-shell',
+          crawlLinks: true,
+          retryCount: 3,
+        },
+      },
+    }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      spa: {
+        prerender: {
+          outputPath: '/custom-shell',
+          crawlLinks: true,
+          retryCount: 3,
+        },
+      },
+    }),
+  ],
+})
+```
+
+
+
+## Customized rendering in SPA mode
+
+Customizing the HTML output of the SPA shell can be useful if you want to:
+
+- Provide generic head tags for SPA routes
+- Provide a custom pending fallback component
+- Change literally anything about the shell's HTML, CSS, and JS
+
+To make this process simple, an `isShell()` function can be found on the `router` instance:
+
+```tsx
+// src/routes/root.tsx
+export default function Root() {
+  const isShell = useRouter().isShell()
+
+  if (isShell) console.log('Rendering the shell!')
+}
+```
+
+You can use this boolean to conditionally render different UI based on whether the current route is a shell or not, but keep in mind that after hydrating the shell, the router will immediately navigate to the first route and `isShell()` will return `false`. **This could produce flashes of unstyled content if not handled properly.**
+
+## Dynamic Data in your Shell
+
+Since the shell is prerendered using the SSR build of your application, any `loader`s, or server-specific functionality defined on your **Root Route** will run during the prerendering process and the data will be included in the shell.
+
+This means that you can use dynamic data in your shell by using a `loader` or server-specific functionality.
+
+```tsx
+// src/routes/__root.tsx
+
+export const RootRoute = createRootRoute({
+  loader: async () => {
+    return {
+      name: 'Tanner',
+    }
+  },
+  component: Root,
+})
+
+export default function Root() {
+  const { name } = useLoaderData()
+
+  return (
+    <html>
+      <body>
+        <h1>Hello, {name}!</h1>
+        <Outlet />
+      </body>
+    </html>
+  )
+}
+```
diff --git a/mintlify/start/framework/react/guide/static-prerendering.md b/mintlify/start/framework/react/guide/static-prerendering.md
new file mode 100644
index 000000000..5be65fcd5
--- /dev/null
+++ b/mintlify/start/framework/react/guide/static-prerendering.md
@@ -0,0 +1,154 @@
+---
+id: static-prerendering
+title: Static Prerendering
+---
+
+Static prerendering is the process of generating static HTML files for your application. This can be useful for either improving the performance of your application, as it allows you to serve pre-rendered HTML files to users without having to generate them on the fly or for deploying static sites to platforms that do not support server-side rendering.
+
+## Prerendering
+
+TanStack Start can prerender your application to static HTML files, which can then be served to users without having to generate them on the fly. To prerender your application, you can add the `prerender` option to your `tanstackStart` configuration:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        // Switch to true to enable prerendering
+        enabled: false,
+
+        // Disable if you need pages to be at `/page.html` instead of `/page/index.html`
+        autoSubfolderIndex: true,
+
+        // If disabled, only the root path or the paths defined in the pages config will be prerendered
+        autoStaticPathsDiscovery: true,
+
+        // How many prerender jobs to run at once
+        concurrency: 14,
+
+        // Whether to extract links from the HTML and prerender them also
+        crawlLinks: true,
+
+        // Filter function takes the page object and returns whether it should prerender
+        filter: ({ path }) => !path.startsWith('/do-not-render-me'),
+
+        // Number of times to retry a failed prerender job
+        retryCount: 2,
+
+        // Delay between retries in milliseconds
+        retryDelay: 1000,
+
+        // Maximum number of redirects to follow during prerendering
+        maxRedirects: 5,
+
+        // Fail if an error occurs during prerendering
+        failOnError: true,
+
+        // Callback when page is successfully rendered
+        onSuccess: ({ page }) => {
+          console.log(`Rendered ${page.path}!`)
+        },
+      },
+      // Optional configuration for specific pages
+      // Note: When autoStaticPathsDiscovery is enabled (default), discovered static
+      // routes will be merged with the pages specified below
+      pages: [
+        {
+          path: '/my-page',
+          prerender: { enabled: true, outputPath: '/my-page/index.html' },
+        },
+      ],
+    }),
+    viteReact(),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    tanstackStart({
+      prerender: {
+        // Switch to true to enable prerendering
+        enabled: false,
+
+        // Disable if you need pages to be at `/page.html` instead of `/page/index.html`
+        autoSubfolderIndex: true,
+
+        // If disabled, only the root path or the paths defined in the pages config will be prerendered
+        autoStaticPathsDiscovery: true,
+
+        // How many prerender jobs to run at once
+        concurrency: 14,
+
+        // Whether to extract links from the HTML and prerender them also
+        crawlLinks: true,
+
+        // Filter function takes the page object and returns whether it should prerender
+        filter: ({ path }) => !path.startsWith('/do-not-render-me'),
+
+        // Number of times to retry a failed prerender job
+        retryCount: 2,
+
+        // Delay between retries in milliseconds
+        retryDelay: 1000,
+
+        // Maximum number of redirects to follow during prerendering
+        maxRedirects: 5,
+
+        // Fail if an error occurs during prerendering
+        failOnError: true,
+
+        // Callback when page is successfully rendered
+        onSuccess: ({ page }) => {
+          console.log(`Rendered ${page.path}!`)
+        },
+      },
+      // Optional configuration for specific pages
+      // Note: When autoStaticPathsDiscovery is enabled (default), discovered static
+      // routes will be merged with the pages specified below
+      pages: [
+        {
+          path: '/my-page',
+          prerender: { enabled: true, outputPath: '/my-page/index.html' },
+        },
+      ],
+    }),
+  ],
+})
+```
+
+
+
+## Automatic Static Route Discovery
+
+All static paths will be automatically discovered and seamlessly merged with the specified `pages` config
+
+Routes are excluded from automatic discovery in the following cases:
+
+- Routes with path parameters (e.g., `/users/$userId`) since they require specific parameter values
+- Layout routes (prefixed with `_`) since they don't render standalone pages
+- Routes without components (e.g., API routes)
+
+Note: Dynamic routes can still be prerendered if they are linked from other pages when `crawlLinks` is enabled.
+
+## Crawling Links
+
+When `crawlLinks` is enabled (default: `true`), TanStack Start will extract links from prerendered pages and prerender those linked pages as well.
+
+For example, if `/` contains a link to `/posts`, then `/posts` will also be automatically prerendered.
diff --git a/mintlify/start/framework/react/guide/static-server-functions.md b/mintlify/start/framework/react/guide/static-server-functions.md
new file mode 100644
index 000000000..8f86238bd
--- /dev/null
+++ b/mintlify/start/framework/react/guide/static-server-functions.md
@@ -0,0 +1,35 @@
+---
+id: static-server-functions
+title: Static Server Functions
+---
+
+> [!WARNING]
+> Static Server Functions are experimental!
+
+## What are Static Server Functions?
+
+Static server functions are server functions that are executed at build time and cached as static assets when using prerendering/static-generation. They can be set to "static" mode by applying the `staticFunctionMiddleware` middleware to `createServerFn`:
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { staticFunctionMiddleware } from '@tanstack/start-static-server-functions'
+
+const myServerFn = createServerFn({ method: 'GET' })
+  .middleware([staticFunctionMiddleware])
+  .handler(async () => {
+    return 'Hello, world!'
+  })
+```
+
+Ensure that `staticFunctionMiddleware` is the final middleware!
+
+This pattern goes as follows:
+
+- Build-time
+  - During build-time prerendering, a server function with `staticFunctionMiddleware` is executed
+  - The result is cached with your build output as a static JSON file under a derived key (function ID + params/payload hash)
+  - The result is returned as normal during prerendering/static-generation and used to prerender the page
+- Runtime
+  - Initially, the prerendered page's html is served and the server function data is embedded in the html
+  - When the client mounts, the embedded server function data is hydrated
+  - For future client-side invocations, the server function is replaced with a fetch call to the static JSON file
diff --git a/mintlify/start/framework/react/guide/streaming-data-from-server-functions.md b/mintlify/start/framework/react/guide/streaming-data-from-server-functions.md
new file mode 100644
index 000000000..474452e88
--- /dev/null
+++ b/mintlify/start/framework/react/guide/streaming-data-from-server-functions.md
@@ -0,0 +1,97 @@
+---
+title: Streaming Data from Server Functions
+---
+
+Streaming data from the server has become very popular thanks to the rise of AI apps. Luckily, it's a pretty easy task with TanStack Start, and what's even better: the streamed data is typed!
+
+The two most popular ways of streaming data from server functions are using `ReadableStream`-s or async generators.
+
+You can see how to implement both in the [Streaming Data From Server Functions example](https://github.com/TanStack/router/tree/main/examples/react/start-streaming-data-from-server-functions).
+
+## Typed Readable Streams
+
+Here's an example for a server function that streams an array of messages to the client in a type-safe manner:
+
+```ts
+type Message = {
+  content: string
+}
+
+/**
+  This server function returns a `ReadableStream`
+  that streams `Message` chunks to the client.
+*/
+const streamingResponseFn = createServerFn().handler(async () => {
+  // These are the messages that you want to send as chunks to the client
+  const messages: Message[] = generateMessages()
+
+  // This `ReadableStream` is typed, so each
+  // will be of type `Message`.
+  const stream = new ReadableStream<Message>({
+    async start(controller) {
+      for (const message of messages) {
+        // Send the message
+        controller.enqueue(message)
+      }
+      controller.close()
+    },
+  })
+
+  return stream
+})
+```
+
+When you consume this stream from the client, the streamed chunks will be properly typed:
+
+```ts
+const [message, setMessage] = useState('')
+
+const getTypedReadableStreamResponse = useCallback(async () => {
+  const response = await streamingResponseFn()
+
+  if (!response) {
+    return
+  }
+
+  const reader = response.getReader()
+  let done = false
+  while (!done) {
+    const { value, done: doneReading } = await reader.read()
+    done = doneReading
+    if (value) {
+      // Notice how we know the value of `chunk` (`Message | undefined`)
+      // here, because it's coming from the typed `ReadableStream`
+      const chunk = value.content
+      setMessage((prev) => prev + chunk)
+    }
+  }
+}, [])
+```
+
+## Async Generators in Server Functions
+
+A much cleaner approach with the same results is to use an async generator function:
+
+```ts
+const streamingWithAnAsyncGeneratorFn = createServerFn().handler(
+  async function* () {
+    const messages: Message[] = generateMessages()
+    for (const msg of messages) {
+      await sleep(500)
+      // The streamed chunks are still typed as `Message`
+      yield msg
+    }
+  },
+)
+```
+
+The client side code will also be leaner:
+
+```ts
+const getResponseFromTheAsyncGenerator = useCallback(async () => {
+  for await (const msg of await streamingWithAnAsyncGeneratorFn()) {
+    const chunk = msg.content
+    setMessages((prev) => prev + chunk)
+  }
+}, [])
+```
diff --git a/mintlify/start/framework/react/guide/tailwind-integration.md b/mintlify/start/framework/react/guide/tailwind-integration.md
new file mode 100644
index 000000000..7f141c96f
--- /dev/null
+++ b/mintlify/start/framework/react/guide/tailwind-integration.md
@@ -0,0 +1,207 @@
+---
+id: tailwind-integration
+title: Tailwind CSS Integration
+---
+
+_So you want to use Tailwind CSS in your TanStack Start project?_
+
+This guide will help you use Tailwind CSS in your TanStack Start project.
+
+## Tailwind CSS Version 4 (Latest)
+
+The latest version of Tailwind CSS is 4. And it has some configuration changes that majorly differ from Tailwind CSS Version 3. It's **easier and recommended** to set up Tailwind CSS Version 4 in a TanStack Start project with either Vite or Rsbuild.
+
+### Install Tailwind CSS
+
+Install Tailwind CSS and the integration for your build tool.
+
+
+
+# Vite
+
+```shell
+npm install tailwindcss @tailwindcss/vite
+```
+
+# Rsbuild
+
+```shell
+npm install tailwindcss @tailwindcss/postcss postcss
+```
+
+
+
+### Configure Tailwind CSS
+
+Add Tailwind CSS to your build tool configuration.
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import tsConfigPaths from 'vite-tsconfig-paths'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import tailwindcss from '@tailwindcss/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [tsConfigPaths(), tanstackStart(), viteReact(), tailwindcss()],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [pluginReact(), tanstackStart()],
+})
+```
+
+```js title="postcss.config.mjs"
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+
+
+
+### Import Tailwind in your CSS file
+
+You need to create a CSS file to configure Tailwind CSS instead of the configuration file in version 4. You can do this by creating a `src/styles/app.css` file or name it whatever you want.
+
+```css
+/* src/styles/app.css */
+@import 'tailwindcss' source('../');
+```
+
+## Import the CSS file in your `__root.tsx` file
+
+Import the CSS file in your `__root.tsx` file.
+
+
+
+# Vite
+
+Use the `?url` query and make sure to add the **triple slash** directive to the top of the file.
+
+```tsx
+// src/routes/__root.tsx
+/// <reference types="vite/client" />
+// other imports...
+
+import appCss from '../styles/app.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      // your meta tags and site config
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+    // other head config
+  }),
+  component: RootComponent,
+})
+```
+
+# Rsbuild
+
+Use a side-effect import so Start can discover the generated stylesheet as a route asset.
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute } from '@tanstack/react-router'
+import '../styles/app.css'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      // your meta tags and site config
+    ],
+    // other head config
+  }),
+  component: RootComponent,
+})
+```
+
+
+
+## Use Tailwind CSS anywhere in your project
+
+You can now use Tailwind CSS anywhere in your project.
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return <div className="bg-red-500 text-white p-4">Hello World</div>
+}
+```
+
+That's it! You can now use Tailwind CSS anywhere in your project 🎉.
+
+## Tailwind CSS Version 3 (Legacy)
+
+If you are want to use Tailwind CSS Version 3, you can use the following steps.
+
+### Install Tailwind CSS
+
+Install Tailwind CSS and it's peer dependencies.
+
+```shell
+npm install -D tailwindcss@3 postcss autoprefixer
+```
+
+Then generate the Tailwind and PostCSS configuration files.
+
+```shell
+npx tailwindcss init -p
+```
+
+### Configure your template paths
+
+Add the paths to all of your template files in the `tailwind.config.js` file.
+
+```js
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### Add the Tailwind directives to your CSS file
+
+Add the `@tailwind` directives for each of Tailwind's layers to your `src/styles/app.css` file.
+
+```css
+/* src/styles/app.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+> [!NOTE]
+> Jump to [Import the CSS file in your `__root.tsx` file](#import-the-css-file-in-your-__roottsx-file) to see how to import the CSS file in your `__root.tsx` file.
diff --git a/mintlify/start/framework/react/migrate-from-next-js.md b/mintlify/start/framework/react/migrate-from-next-js.md
new file mode 100644
index 000000000..e155da231
--- /dev/null
+++ b/mintlify/start/framework/react/migrate-from-next-js.md
@@ -0,0 +1,510 @@
+---
+id: migrate-from-next-js
+title: Migrate from Next.js
+---
+
+This guide provides a step-by-step process to migrate a project from the Next.js App Router to **TanStack Start**. We respect the powerful features of Next.js and aim to make this transition as smooth as possible.
+
+## Step-by-Step (Basics)
+
+This step-by-step guide provides an overview of how to migrate your Next.js App Router project to TanStack Start. The goal is to help you understand the basic steps involved in the migration process so you can adapt them to your specific project needs.
+
+### Prerequisites
+
+Before we begin, this guide assumes your project structure looks like this:
+
+```txt
+├── next.config.ts
+├── package.json
+├── postcss.config.mjs
+├── public
+│   ├── file.svg
+│   ├── globe.svg
+│   ├── next.svg
+│   ├── vercel.svg
+│   └── window.svg
+├── README.md
+├── src
+│   └── app
+│       ├── favicon.ico
+│       ├── globals.css
+│       ├── layout.tsx
+│       └── page.tsx
+└── tsconfig.json
+```
+
+Alternatively, you can follow along by cloning the following [starter template](https://github.com/nrjdalal/awesome-templates/tree/main/next.js-apps/next.js-start):
+
+```sh
+npx gitpick nrjdalal/awesome-templates/tree/main/next.js-apps/next.js-start next.js-start-er
+```
+
+This structure is a basic Next.js application using the App Router, which we will migrate to TanStack Start.
+
+### 1. Remove Next.js
+
+First, uninstall Next.js and remove related configuration files:
+
+```sh
+npm uninstall @tailwindcss/postcss next
+rm postcss.config.* next.config.*
+```
+
+### 2. Install Required Dependencies
+
+TanStack Start leverages TanStack Router and supports [Vite](https://vite.dev) or [Rsbuild](https://rsbuild.dev/) as the build tool. The Vite setup below includes [Nitro](https://nitro.build/) as a deployment plugin.
+
+
+
+# Vite
+
+```sh
+npm i @tanstack/react-router @tanstack/react-start nitro vite @vitejs/plugin-react
+```
+
+# Rsbuild
+
+```sh
+npm i @tanstack/react-router @tanstack/react-start @rsbuild/core @rsbuild/plugin-react
+```
+
+
+
+For Tailwind CSS, install the build tool integration you want to use:
+
+
+
+# Vite
+
+```sh
+npm i -D @tailwindcss/vite tailwindcss
+```
+
+# Rsbuild
+
+```sh
+npm i -D @tailwindcss/postcss tailwindcss
+```
+
+
+
+### 3. Update Project Configuration
+
+Now that you've installed the necessary dependencies, update your project configuration files to work with TanStack Start.
+
+
+
+# Vite
+
+```json
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs"
+  }
+}
+```
+
+# Rsbuild
+
+```json
+{
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  }
+}
+```
+
+
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { nitro } from 'nitro/vite'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    // Enables Vite to resolve imports using path aliases.
+    tsconfigPaths: true,
+  },
+  plugins: [
+    tailwindcss(),
+    tanstackStart({
+      srcDirectory: 'src', // This is the default
+      router: {
+        // Specifies the directory TanStack Router uses for your routes.
+        routesDirectory: 'app', // Defaults to "routes", relative to srcDirectory
+      },
+    }),
+    viteReact(),
+    nitro(),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    pluginReact(),
+    tanstackStart({
+      srcDirectory: 'src', // This is the default
+      router: {
+        // Specifies the directory TanStack Router uses for your routes.
+        routesDirectory: 'app', // Defaults to "routes", relative to srcDirectory
+      },
+    }),
+  ],
+})
+```
+
+```js title="postcss.config.mjs"
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+
+
+
+By default, `routesDirectory` is set to `routes`. To maintain consistency with Next.js App Router conventions, you can set it to `app` instead.
+
+### 4. Adapt the Root Layout
+
+> TanStack Start uses a routing approach similar to Remix, with some changes to support nested structures and special features using tokens. Learn more about it at [Routing Concepts](/router/routing/routing-concepts) guide.
+
+Instead of `layout.tsx`, create a file named `__root.tsx` in the `src/app` directory. This file will serve as the root layout for your application.
+
+- `src/app/layout.tsx` to `src/app/__root.tsx`
+
+```tsx
+- import type { Metadata } from "next" // [!code --]
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from "@tanstack/react-router"
+import appCss from "./globals.css?url"
+
+- export const metadata: Metadata = { // [!code --]
+-   title: "Create Next App", // [!code --]
+-   description: "Generated by create next app", // [!code --]
+- } // [!code --]
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      { title: "TanStack Start Starter" }
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  component: RootLayout,
+})
+
+- export default function RootLayout({ // [!code --]
+-   children, // [!code --]
+- }: Readonly<{ // [!code --]
+-   children: React.ReactNode // [!code --]
+- }>) { // [!code --]
+-   return ( // [!code --]
+-     <html lang="en"> // [!code --]
+-       <body>{children}</body> // [!code --]
+-     </html> // [!code --]
+-   ) // [!code --]
+- } // [!code --]
+function RootLayout() {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+### 5. Adapt the Home Page
+
+Instead of `page.tsx`, create an `index.tsx` file for the `/` route.
+
+- `src/app/page.tsx` to `src/app/index.tsx`
+
+```tsx
++ import { createFileRoute } from '@tanstack/react-router' // [!code ++]
+
+- export default function Home() { // [!code --]
++ export const Route = createFileRoute('/')({ // [!code ++]
++   component: Home, // [!code ++]
++ }) // [!code ++]
+
++ function Home() { // [!code ++]
+  return (
+    <main className="min-h-dvh w-screen flex items-center justify-center flex-col gap-y-4 p-4">
+      <img
+        className="max-w-sm w-full"
+        src="https://raw.githubusercontent.com/TanStack/tanstack.com/main/public/images/logos/splash-dark.png"
+        alt="TanStack Logo"
+      />
+      <h1>
+        <span className="line-through">Next.js</span> TanStack Start
+      </h1>
+      <a
+        className="bg-foreground text-background rounded-full px-4 py-1 hover:opacity-90"
+        href="https://tanstack.com/start/latest"
+        target="_blank"
+      >
+        Docs
+      </a>
+    </main>
+  )
+}
+```
+
+### 6. Are we migrated yet?
+
+Before you can run the development server, you need to create a file that will define the behavior of TanStack Router within TanStack Start.
+
+- `src/router.tsx`
+
+```tsx
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+```
+
+> 🧠 Here you can configure everything from the default [preloading functionality](/router/guide/preloading) to [caching staleness](/router/guide/data-loading).
+
+Don't worry if you see some TypeScript errors at this point; the next step will resolve them.
+
+### 7. Verify the Migration
+
+Run the development server:
+
+```sh
+npm run dev
+```
+
+Then, visit `http://localhost:3000`. You should see the TanStack Start welcome page with its logo and a documentation link.
+
+> If you encounter issues, review the steps above and ensure that file names and paths match exactly. For a reference implementation, see the [post-migration repository](https://github.com/nrjdalal/next-to-start).
+
+## Next Steps (Advanced)
+
+Now that you have migrated the basic structure of your Next.js application to TanStack Start, you can explore more advanced features and concepts.
+
+### Routing Concepts
+
+| Route Example                  | Next.js                            | TanStack Start            |
+| ------------------------------ | ---------------------------------- | ------------------------- |
+| Root Layout                    | `src/app/layout.tsx`               | `src/app/__root.tsx`      |
+| `/` (Home Page)                | `src/app/page.tsx`                 | `src/app/index.tsx`       |
+| `/posts` (Static Route)        | `src/app/posts/page.tsx`           | `src/app/posts.tsx`       |
+| `/posts/[slug]` (Dynamic)      | `src/app/posts/[slug]/page.tsx`    | `src/app/posts/$slug.tsx` |
+| `/posts/[...slug]` (Catch-All) | `src/app/posts/[...slug]/page.tsx` | `src/app/posts/$.tsx`     |
+| `/api/endpoint` (API Route)    | `src/app/api/endpoint/route.ts`    | `src/app/api/endpoint.ts` |
+
+Learn more about the [Routing Concepts](/router/routing/routing-concepts).
+
+### Dynamic and Catch-All Routes
+
+Retrieving dynamic route parameters in TanStack Start is straightforward.
+
+```tsx
+- export default async function Page({ // [!code --]
+-   params, // [!code --]
+- }: { // [!code --]
+-   params: Promise<{ slug: string }> // [!code --]
+- }) { // [!code --]
++ export const Route = createFileRoute('/app/posts/$slug')({ // [!code ++]
++   component: Page, // [!code ++]
++ }) // [!code ++]
+
++ function Page() { // [!code ++]
+-   const { slug } = await params // [!code --]
++   const { slug } = Route.useParams() // [!code ++]
+  return <div>My Post: {slug}</div>
+}
+```
+
+> Note: If you've made a catch-all route (like `src/app/posts/$.tsx`), you can access the parameters via `const { _splat } = Route.useParams()`.
+
+Similarly, you can access `searchParams` using `const { page, filter, sort } = Route.useSearch()`.
+
+Learn more about the [Dynamic and Catch-All Routes](/router/routing/routing-concepts#dynamic-route-segments).
+
+### Links
+
+```tsx
+- import Link from "next/link" // [!code --]
++ import { Link } from "@tanstack/react-router" // [!code ++]
+
+function Component() {
+-   return <Link href="/dashboard">Dashboard</Link> // [!code --]
++   return <Link to="/dashboard">Dashboard</Link> // [!code ++]
+}
+```
+
+Learn more about the [Links](/router/guide/navigation#link-component).
+
+### Images
+
+Next.js uses the `next/image` component for optimized images. In TanStack Start, you can use the package called [Unpic](https://unpic.pics/) for similar functionality
+and almost a drop-in replacement.
+
+```tsx
+import Image from 'next/image' // [!code --]
+import { Image } from '@unpic/react' // [!code ++]
+function Component() {
+  return (
+    <Image
+      src="/path/to/image.jpg"
+      alt="Description"
+      width="600" // [!code --]
+      height="400" // [!code --]
+      width={600} // [!code ++]
+      height={400} // [!code ++]
+    />
+  )
+}
+```
+
+### Server ~Actions~ Functions
+
+```tsx
+- 'use server' // [!code --]
++ import { createServerFn } from "@tanstack/react-start" // [!code ++]
+
+- export const create = async () => { // [!code --]
++ export const create = createServerFn().handler(async () => { // [!code ++]
+  return true
+- } // [!code --]
++ }) // [!code ++]
+```
+
+Learn more about the [Server Functions](/start/framework/react/guide/server-functions).
+
+### Server Routes ~Handlers~
+
+```ts
+- export async function GET() { // [!code --]
++ export const Route = createFileRoute('/api/hello')({ // [!code ++]
++  server: { // [!code ++]
++     handlers: { // [!code ++]
++       GET: async () => { // [!code ++]
++         return Response.json("Hello, World!")
++       } // [!code ++]
++    } // [!code ++]
++  } // [!code ++]
++ }) // [!code ++]
+```
+
+Learn more about the [Server Routes](/start/framework/react/guide/server-routes).
+
+### Fonts
+
+```tsx
+- import { Inter } from "next/font/google" // [!code --]
+
+- const inter = Inter({ // [!code --]
+-   subsets: ["latin"], // [!code --]
+-   display: "swap", // [!code --]
+- }) // [!code --]
+
+- export default function Page() { // [!code --]
+-   return <p className={inter.className}>Font Sans</p> // [!code --]
+- } // [!code --]
+```
+
+Instead of `next/font`, use Tailwind CSS’s CSS-first approach. Install fonts (for example, from [Fontsource](https://github.com/fontsource/fontsource)):
+
+```sh
+npm i -D @fontsource-variable/dm-sans @fontsource-variable/jetbrains-mono
+```
+
+Add the following to `src/app/globals.css`:
+
+```css
+@import 'tailwindcss' source('../');
+
+@import '@fontsource-variable/dm-sans'; /* [!code ++] */
+@import '@fontsource-variable/jetbrains-mono'; /* [!code ++] */
+
+@theme inline {
+  --font-sans: 'DM Sans Variable', sans-serif; /* [!code ++] */
+  --font-mono: 'JetBrains Mono Variable', monospace; /* [!code ++] */
+  /* ... */
+}
+
+/* ... */
+```
+
+### Fetching Data
+
+```tsx
+- export default async function Page() { // [!code --]
++ export const Route = createFileRoute('/')({ // [!code ++]
++   component: Page, // [!code ++]
++   loader: async () => { // [!code ++]
++     const res = await fetch('https://api.vercel.app/blog') // [!code ++]
++     return res.json() // [!code ++]
++   }, // [!code ++]
++ }) // [!code ++]
+
++ function Page() { // [!code ++]
+-   const data = await fetch('https://api.vercel.app/blog') // [!code --]
+-   const posts = await data.json() // [!code --]
++   const posts = Route.useLoaderData() // [!code ++]
+
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
diff --git a/mintlify/start/framework/react/overview.md b/mintlify/start/framework/react/overview.md
new file mode 100644
index 000000000..455e8900a
--- /dev/null
+++ b/mintlify/start/framework/react/overview.md
@@ -0,0 +1,47 @@
+---
+id: overview
+title: TanStack Start Overview
+---
+
+> [!NOTE]
+> TanStack Start is currently in the **Release Candidate** stage! This means it is considered feature-complete and its API is considered stable.
+> **This does not mean it is bug-free or without issues, which is why we invite you to try it out and provide feedback!**
+> The road to v1 will likely be a quick one, so don't wait too long to try it out!
+
+TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, client/server builds, and more. With [Vite](https://vite.dev/) and [Rsbuild](https://rsbuild.dev/) support, it's ready to develop and deploy to the hosting provider or runtime you want.
+
+## Dependencies
+
+TanStack Start is built on two key technologies:
+
+- **[TanStack Router](https://tanstack.com/router)**: A type-safe router for building web applications with advanced features like nested routing, search params, and data loading
+- **[Vite](https://vite.dev/) or [Rsbuild](https://rsbuild.dev/)**: Modern build tools that provide fast development with hot module replacement and optimized production builds
+
+## Should I use TanStack Start or just TanStack Router?
+
+90% of any framework usually comes down to the router, and TanStack Start is no different. **TanStack Start relies 100% on TanStack Router for its routing system.** In addition to TanStack Router's amazing features, Start enables even more powerful features:
+
+- **Full-document SSR** - Server-side rendering for better performance and SEO
+- **Streaming** - Progressive page loading for improved user experience
+- **Server Routes & API Routes** - Build backend endpoints alongside your frontend
+- **Server Functions** - Type-safe RPCs between client and server
+- **Middleware & Context** - Powerful request/response handling and data injection
+- **Full-Stack Builds** - Optimized builds for both client and server code
+- **Universal Deployment** - Deploy to hosting providers and runtimes with Vite or Rsbuild builds
+- **End-to-End Type Safety** - Full TypeScript support across the entire stack
+
+That said, if you **know with certainty** that you will not need any of the above features, then you may want to consider using TanStack Router alone, which is still a powerful and type-safe SPA routing upgrade over other routers and frameworks.
+
+## Are there limitations?
+
+TanStack Start provides the same capability as other full-stack frameworks like Next.js, Remix, etc, with even more features and a more powerful developer experience. React Server Components are available as an experimental feature - see the [Server Components guide](/start/framework/react/guide/server-components) for details.
+
+## How is TanStack Start funded?
+
+TanStack is 100% open source, free to use, and always will be. It is built and maintained by an extremely talented and dedicated community of developers and software engineers. TanStack.com (also open source) is owned by TanStack LLC, a privately held company, 100% bootstrapped and self-funded. We are not venture-backed and have never sought investors. To support the development of TanStack Start and other TanStack libraries, TanStack.com partners with [these amazing companies](https://tanstack.com/partners?status=active&libraries=%5B%22start%22%5D) who offer both financial support and resources to help us continue to build the best possible developer experience for the web community:
+
+<iframe src="https://tanstack.com/partners-embed" style="aspect-ratio: 1/2; width: 100%;"></iframe>
+
+## Ready to get started?
+
+Go to the next page to learn how to install TanStack Start and create your first app!
diff --git a/mintlify/start/framework/react/server-functions.md b/mintlify/start/framework/react/server-functions.md
new file mode 100644
index 000000000..5a3197603
--- /dev/null
+++ b/mintlify/start/framework/react/server-functions.md
@@ -0,0 +1,9 @@
+---
+title: "Server Functions"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/start/latest/docs/framework/react/server-functions)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/start/framework/react/start-vs-nextjs.md b/mintlify/start/framework/react/start-vs-nextjs.md
new file mode 100644
index 000000000..062bc5006
--- /dev/null
+++ b/mintlify/start/framework/react/start-vs-nextjs.md
@@ -0,0 +1,286 @@
+---
+id: start-vs-nextjs
+title: TanStack Start vs Next.js
+---
+
+Choosing between TanStack Start and Next.js isn't just about features - it's about understanding what each framework optimizes for and how those decisions cascade through your entire development experience.
+
+This page explains the fundamental differences, addresses common misconceptions, and helps you make an informed decision. For a feature-by-feature matrix, see the [full comparison table](/start/framework/react/comparison). Ready to switch? See the [migration guide](/start/framework/react/migrate-from-next-js).
+
+**A note on benchmarks:** If someone quotes performance numbers comparing Start and Next without methodology, app complexity, hosting details, and configuration specifics - those numbers are meaningless. Comparisons must assume best practices on both sides. You can't give Next the benefit of optimized usage while assuming Start users misconfigure things.
+
+## Two Different Visions of React
+
+Both frameworks want to help you build great React applications. But they start from different assumptions about what "great" means.
+
+### Next.js: The Platform Play
+
+Next.js optimizes for **Vercel's vision of the web**: server-first rendering, tight platform integration, and automatic optimizations that work best on their infrastructure.
+
+The core bet: most web content is static or near-static. Server Components should be the default. Interactivity is the exception you opt into. The framework should make decisions for you, and those decisions should be optimized for their infrastructure.
+
+This works well if:
+
+- You're deploying to Vercel and want tight platform integration
+- Your app is content-heavy with islands of interactivity
+- You want the framework to make architectural decisions for you
+
+### TanStack Start: The Developer-First Play
+
+TanStack Start optimizes for **developer control and correctness**: type safety everywhere, explicit over implicit, composable primitives, and deployment freedom.
+
+The core bet: developers know their apps better than frameworks do. Server rendering is an optimization you opt into where it makes sense. The framework should give you powerful primitives and get out of your way.
+
+This works well if:
+
+- You want your deployment target to be a decision you make, not one the framework makes for you
+- Your app is highly interactive
+- You value type safety and explicit control
+- You want to understand exactly what your code is doing
+
+## The Mental Model Gap
+
+This is the most important difference to understand. Everything else flows from it.
+
+### Both SSR - Different Defaults for Interactivity
+
+Let's be clear: both frameworks SSR by default, and both support static generation and React Server Components. The difference isn't capability - it's how you access those capabilities and how much control you have.
+
+**Next.js** defaults to Server Components. Every component is a Server Component unless you add `"use client"`. Server Components can't use state, effects, or event handlers - so the path to interactivity requires understanding the framework's implicit boundaries, caching layers, and serialization rules.
+
+**TanStack Start** defaults to interactive components (traditional React). Your components SSR and hydrate, ready for state and event handlers out of the box. You opt into Server Components where they provide value - for heavy static content, keeping secrets server-side, or reducing bundle size.
+
+Both approaches get you to the same destination. The question is: which direction feels like swimming upstream for _your_ app?
+
+Consider:
+
+- If most of your components need state, effects, or event handlers, Next's defaults mean constant `"use client"` annotations and thinking about serialization boundaries
+- If most of your content is static, Start lets you explicitly opt those components into server-only rendering - with clearer control over caching and hydration
+- Either way, Start gives you more granular control over _how_ things render, not just _where_
+
+### Implicit vs Explicit
+
+Both frameworks handle the fundamentals - code splitting, caching, SSR, static optimization. The difference is visibility and predictability. **Next.js** layers implicit behaviors: multi-layer server-side caching with a history of breaking changes and community frustration, data fetching conventions tied to file structure, optimizations that require understanding the framework's internals to override.
+
+**TanStack Start** is explicit without being verbose. Loader functions, cache configuration, middleware chains - they're visible in your code, not hidden behind conventions. This doesn't mean more code; it means the code you write maps directly to what happens at runtime.
+
+## Architecture Deep Dive
+
+### The Build Pipeline
+
+**Next.js** uses a custom build system (historically Webpack, now Turbopack). It's tightly integrated with their architecture, which enables optimizations but limits flexibility. Turbopack has improved dev speed, but it's still no match for Vite or Rsbuild.
+
+**TanStack Start** supports Vite and Rsbuild. This means:
+
+- Faster dev server startup
+- Faster HMR
+- Access to modern plugin ecosystems
+- Standard tooling that transfers to other projects
+
+### The Runtime
+
+**Next.js** ships a substantial runtime to support Server Components, server-side caching, automatic optimizations, and the App Router's conventions. This runtime has real weight.
+
+**TanStack Start** ships a minimal runtime. The router is powerful but lean. Server functions are thin RPC wrappers. There's no framework magic layer between you and React.
+
+Bundle size isn't everything, but it's the baseline everything else builds on. Start's architecture is designed to minimize runtime overhead - even with RSC support, the runtime stays lean. Much of Next's bundle weight is architectural tax, not feature weight.
+
+### The Type System
+
+**Next.js** has TypeScript support. **TanStack Start** is built around TypeScript.
+
+The difference matters:
+
+- In Next.js, the boundary between client and server creates type gaps. Server Actions can receive data that doesn't match what TypeScript expects. You need runtime validation to be safe.
+- In Start, server functions have end-to-end type safety. Input validation, return types, middleware context, route parameters - all checked at compile time.
+
+In the age of AI-assisted development, end-to-end type safety should be non-negotiable. Types aren't just "nice for DX" - they're correctness guarantees that prevent production errors.
+
+## Routing
+
+This is where TanStack shines brightest. TanStack Router (which powers Start) is the most powerful, type-safe router in any framework.
+
+**Features Next.js doesn't have:**
+
+- **Typesafe search params** - Define, validate, and parse search params with full type inference. Next gives you `?foo=bar` as strings; Start gives you validated, typed objects
+- **Search param validation & middleware** - Transform and validate search params at the route level
+- **Typesafe path params** - Path params are inferred and validated, not just `string | string[]`
+- **Typesafe route context** - Pass typed context down through nested routes
+- **Path param validation & custom parsing** - Parse `/users/123` as a number, validate it exists
+- **Route mount/transition/unmount events** - Hook into the route lifecycle
+- **Code-based routes** - Define routes in code when file-based doesn't fit
+- **Built-in devtools** - Inspect router state, cache, and pending navigations
+- **Element scroll restoration** - Restore scroll position for specific elements, not just the page
+- **Navigation blocking** - `useBlocker` for unsaved changes warnings
+
+**Type safety that actually works:**
+
+- Route paths are fully typed - typos are compile errors
+- Links validate their destinations - no broken links in production
+- Loaders know their route context - no guessing what data is available
+- Search params are typed end-to-end - from URL to component
+
+Next.js has file-based routing that works, but the type safety is superficial (an IDE plugin for link hints) compared to TanStack Router's compile-time guarantees.
+
+**First-class integrations:**
+
+TanStack Router was designed from the ground up for isomorphism and hydration. This makes it the foundation for first-class integrations with TanStack Query and other data-fetching libraries. In Next, you wire up Query manually; in Start, it's a supported pattern with official integrations.
+
+See the [full router comparison](/router/comparison) for the complete feature matrix.
+
+## The Caching Question
+
+Caching is where the philosophical differences become most visible.
+
+### Next.js: Implicit and Server-Side
+
+Next.js caches aggressively by default (or did - they've changed this multiple times). The caching happens in layers:
+
+- Request memoization
+- Data cache
+- Full route cache
+- Router cache
+
+Each layer has its own invalidation semantics. The system has been rewritten multiple times with community criticism for being unpredictable. Next 15 simplified the defaults, but the fundamental complexity of server-side RSC stream caching remains.
+
+When people talk about "component caching," they're referring to caching serialized RSC streams on the server. This is more complicated than most realize:
+
+- You're caching text streams with complex invalidation semantics
+- This happens in lambda-style environments with their own constraints
+- Granular invalidation requires explicit tagging setup
+- Cache misses cascade through the component tree in ways that aren't always predictable
+
+**Ask anyone claiming server-side component caching is special:** "How do you invalidate a cached RSC stream when a data dependency changes?" Most can't answer clearly.
+
+### TanStack Start: RSCs Are Just Data
+
+Start treats Server Component output the same as any other data flowing through your app. There's no special "component cache" with its own semantics - RSC payloads are data, and you cache data however you want:
+
+- **TanStack Router** - Built-in SWR-style caching with `staleTime` and `gcTime`
+- **TanStack Query** - Full-featured async state management
+- **CDN caching** - Standard HTTP cache headers at the edge
+- **Redis, database, whatever** - It's just data; use your existing infrastructure
+
+```tsx
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => fetchPost(params.postId),
+  staleTime: 10_000, // Fresh for 10 seconds
+  gcTime: 5 * 60_000, // Keep in memory for 5 minutes
+})
+```
+
+This is the same SWR pattern TanStack Query has battle-tested across millions of applications. No new mental model. No framework-specific caching semantics to learn. No chasing ghosts.
+
+The caching layers are well-understood and compose naturally:
+
+- Client-side SWR caching (built into the router)
+- CDN caching at the edge (standard HTTP semantics)
+- Server-side caching where you want it (explicit, opt-in)
+
+You already know how to cache data. Start doesn't make you learn a new way.
+
+### The Bottom Line on RSCs
+
+Start has full RSC support with feature parity to Next.js. The difference is mental model and cognitive overhead.
+
+In Next, RSCs are the paradigm - you build around them, think about them constantly, manage their boundaries everywhere. In Start, RSCs are just another data primitive. Fetch them, cache them, compose them - using patterns you already know from TanStack Query and Router.
+
+We call our approach **Composite Components** - server-produced React components that the client can fetch, cache, stream, and assemble. The client owns composition; the server ships UI pieces. No new mental model. No framework-specific caching semantics. Just data flowing through tools you already understand.
+
+For the full deep-dive, see [Composite Components: Server Components with Client-Led Composition](https://tanstack.com/blog/composite-components).
+
+## Server Functions vs Server Actions
+
+Both frameworks let you call server code from the client. The approaches differ significantly.
+
+### Next.js Server Actions
+
+```tsx
+'use server'
+
+export async function createPost(formData: FormData) {
+  const title = formData.get('title')
+  // No compile-time type safety on inputs
+  return db.posts.create({ title })
+}
+```
+
+Server Actions integrate with forms and transitions. They're convenient for simple cases but provide limited type safety at the boundary.
+
+### TanStack Server Functions
+
+```tsx
+export const createPost = createServerFn({ method: 'POST' })
+  .validator(z.object({ title: z.string().min(1) }))
+  .middleware([authMiddleware])
+  .handler(async ({ data, context }) => {
+    // data is typed and validated
+    // context comes from middleware, also typed
+    return db.posts.create({ title: data.title })
+  })
+```
+
+Server functions give you:
+
+- **Input validation** - Define schemas, get runtime validation and compile-time types
+- **Middleware** - Composable, works on both client and server
+- **Full type inference** - From input to output to error handling
+- **Explicit RPC** - Clear mental model of what's happening
+
+**Security note:** Start's architecture doesn't parse Flight data on the server - payloads flow one direction (server to client). Recent React security advisories around RSC serialization vulnerabilities don't apply to Start's model.
+
+## Where Next.js Has the Advantage
+
+Next.js has been around longer. That's not a technical advantage, but it creates real ecosystem effects:
+
+**More content** - More tutorials, more Stack Overflow answers, more blog posts, more example repos. When you Google a problem, you're more likely to find a Next-specific answer.
+
+**Mindshare** - Next is the default recommendation in many circles. That means more developers have used it, which means more content, which reinforces the cycle.
+
+**Vercel integration** - Next.js is built by Vercel, so new Vercel platform features often ship with Next.js support first. That said, Start works great on Vercel too - you're not giving up preview deployments or edge functions by choosing Start. You're just not locked into Vercel as the only first-class option.
+
+**Built-in image/font optimization** - Start supports image optimization via pluggable solutions (like [Unpic](https://unpic.pics/)), but it's not built-in. Whether "built-in" is better than "pluggable" depends on whether you want the framework making that choice for you.
+
+None of these are technical superiority - they're ecosystem and business model advantages. On the technical merits, we're confident in Start's approach.
+
+## What Start Does Better
+
+With RSC support, the question isn't "what does Start lack?" - it's: **"Why give up Start's router, type safety, caching design, and simpler mental model for Next's API design?"**
+
+**Type safety** - End-to-end, not bolted on. This prevents bugs and enables confident refactoring.
+
+**Routing** - The most powerful, type-safe router in any framework. Search params, path params, loaders, middleware - all fully typed.
+
+**Caching model** - Explicit SWR primitives you already understand if you've used TanStack Query. No implicit layers to debug.
+
+**Dev experience** - Vite and Rsbuild are fast. Instant startup, fast HMR, lower resource usage. This compounds over a workday - and even more so when AI agents are iterating on your code in tight loops.
+
+**Deployment as a feature** - Start treats deployment flexibility as a first-class feature. Cloudflare, Netlify, AWS, Fly, Railway, your own servers - they're all equally supported. Your app works the same everywhere because it's built on standards, not platform-specific optimizations. This means you can:
+
+- Choose hosting based on price, performance, or proximity to your users
+- Switch providers without rewriting deployment logic
+- Run the same code in development, staging, and production across different platforms
+- Avoid accumulating platform-specific patterns that create friction later
+
+**Middleware** - Composable middleware that works at both the request level AND the server function level, on both client and server.
+
+**Debugging** - Predictable execution. When something breaks, you can trace it. No abstraction layers hiding behavior.
+
+## Summary
+
+| Aspect               | TanStack Start                       | Next.js                               |
+| -------------------- | ------------------------------------ | ------------------------------------- |
+| **Philosophy**       | Developer control, explicit patterns | Platform integration, conventions     |
+| **Components**       | Interactive by default, opt into RSC | Server Components by default          |
+| **Type safety**      | End-to-end, compile-time             | TypeScript support with boundary gaps |
+| **Server functions** | Typed, validated, middleware support | Untyped boundary, no middleware       |
+| **Caching**          | Explicit SWR primitives              | Multi-layer implicit caching          |
+| **Build tool**       | Vite or Rsbuild                      | Turbopack/Webpack                     |
+| **Deployment**       | Equal support everywhere             | Optimized for Vercel                  |
+| **Routing**          | Best-in-class type safety            | File-based, basic types               |
+| **RSC**              | Supported                            | Supported                             |
+| **Maturity**         | 2+ years, approaching 1.0            | 8+ years, historically unstable APIs  |
+
+---
+
+> **Ready to try Start?** See the [Getting Started guide](/start/framework/react/getting-started) or [migrate from Next.js](/start/framework/react/migrate-from-next-js).
diff --git a/mintlify/start/framework/react/tutorial/fetching-external-api.md b/mintlify/start/framework/react/tutorial/fetching-external-api.md
new file mode 100644
index 000000000..ec1ea71ea
--- /dev/null
+++ b/mintlify/start/framework/react/tutorial/fetching-external-api.md
@@ -0,0 +1,314 @@
+---
+id: fetching-external-api
+title: Calling an external API using TanStack Start
+---
+
+This guide demonstrates how to integrate external API calls into your TanStack Start application using route loaders. We will use TMDB API to fetch popular movies using TanStack Start and understand how to fetch data in a TanStack Start app.
+
+The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/tanstack-start-movies).
+
+## What You'll Learn
+
+1. Setting up external API integration with TanStack Start
+1. Implementing route loaders for server-side data fetching
+1. Building responsive UI components with fetched data
+1. Handling loading states and error management
+
+## Prerequisites
+
+- Basic knowledge of React and TypeScript
+- Node.js (v18+) and `pnpm` installed on your machine
+- A TMDB API key (free at [themoviedb.org](https://www.themoviedb.org))
+
+## Nice to know
+
+- [TanStack Router](/router/routing/routing-concepts)
+
+## Setting up a TanStack Start Project
+
+First, let's create a new TanStack Start project:
+
+```bash
+pnpx create-start-app movie-discovery
+cd movie-discovery
+```
+
+When this script runs, it will ask you a few setup questions. You can either pick choices that work for you or just press enter to accept the defaults.
+
+Optionally, you can pass in a `--add-on` flag to get options such as Shadcn, Clerk, Convex, TanStack Query, etc.
+
+Once setup is complete, install dependencies and start the development server:
+
+```bash
+pnpm i
+pnpm dev
+```
+
+## Understanding the Project Structure
+
+At this point, the project structure should look like this:
+
+```text
+/movie-discovery
+├── src/
+│   ├── routes/
+│   │   ├── __root.tsx                    # Root layout
+│   │   ├── index.tsx                     # Home page
+│   │   └── fetch-movies.tsx              # Movie fetching route
+│   ├── types/
+│   │   └── movie.ts                      # Movie type definitions
+│   ├── router.tsx                        # Router configuration
+│   ├── routeTree.gen.ts                  # Generated route tree
+│   └── styles.css                        # Global styles
+├── public/                               # Static assets
+├── vite.config.ts or rsbuild.config.ts    # TanStack Start configuration
+├── package.json                          # Project dependencies
+└── tsconfig.json                         # TypeScript configuration
+
+```
+
+Once your project is set up, you can access your app at `localhost:3000`. You should see the default TanStack Start welcome page.
+
+## Step 1: Setup a `.env` file with TMDB_AUTH_TOKEN
+
+To fetch movies from the TMDB API, you need an authentication token. You can get this for free at themoviedb.org.
+
+First, let's set up environment variables for our API key. Create a `.env` file in your project root:
+
+```bash
+touch .env
+
+```
+
+Add your TMDB API token to this file:
+
+```dotenv
+TMDB_AUTH_TOKEN=your_bearer_token_here
+```
+
+_Important_: Make sure to add `.env` to your `.gitignore` file to keep your API keys secure.
+
+## Step 2: Defining Data Types
+
+Let's create TypeScript interfaces for our movie data. Create a new file at `src/types/movie.ts`:
+
+```ts
+// src/types/movie.ts
+export interface Movie {
+  id: number
+  title: string
+  overview: string
+  poster_path: string | null
+  backdrop_path: string | null
+  release_date: string
+  vote_average: number
+  popularity: number
+}
+
+export interface TMDBResponse {
+  page: number
+  results: Movie[]
+  total_pages: number
+  total_results: number
+}
+```
+
+## Step 3: Creating the Route with API Fetch Function
+
+To call the TMDB API, we're going to create a server function that fetches data on the server. This approach keeps our API credentials secure by never exposing them to the client.
+Let's create our route that fetches data from the TMDB API. Create a new file at `src/routes/fetch-movies.tsx`:
+
+```typescript
+// src/routes/fetch-movies.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import type { Movie, TMDBResponse } from '../types/movie'
+import { createServerFn } from '@tanstack/react-start'
+
+const API_URL =
+  'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'
+
+const fetchPopularMovies = createServerFn().handler(
+  async (): Promise<TMDBResponse> => {
+    const response = await fetch(API_URL, {
+      headers: {
+        accept: 'application/json',
+        Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch movies: ${response.statusText}`)
+    }
+
+    return response.json()
+  },
+)
+
+export const Route = createFileRoute('/fetch-movies')({
+  component: MoviesPage,
+  loader: async (): Promise<{ movies: Movie[]; error: string | null }> => {
+    try {
+      const moviesData = await fetchPopularMovies()
+      return { movies: moviesData.results, error: null }
+    } catch (error) {
+      console.error('Error fetching movies:', error)
+      return { movies: [], error: 'Failed to load movies' }
+    }
+  },
+})
+```
+
+_What's happening here:_
+
+- `createServerFn()` creates a server-only function that runs exclusively on the server, ensuring our `TMDB_AUTH_TOKEN` environment variable never gets exposed to the client. The server function makes an authenticated request to the TMDB API and returns the parsed JSON response.
+- The route loader runs on the server when a user visits /fetch-movies, calling our server function before the page renders
+- Error handling ensures the component always receives valid data structure - either the movies or an empty array with an error message
+- This pattern provides server-side rendering, automatic type safety, and secure API credential handling out of the box.
+
+## Step 4: Building the Movie Components
+
+Now let's create the components that will display our movie data. Add these components to the same `fetch-movies.tsx` file:
+
+```tsx
+// MovieCard component
+const MovieCard = ({ movie }: { movie: Movie }) => {
+  return (
+    <div
+      className="bg-white/10 border border-white/20 rounded-lg overflow-hidden backdrop-blur-sm shadow-md hover:shadow-xl transition-all duration-300 hover:scale-105"
+      aria-label={`Movie: ${movie.title}`}
+      role="group"
+    >
+      {movie.poster_path && (
+        <img
+          src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
+          alt={movie.title}
+          className="w-full h-64 object-cover"
+        />
+      )}
+      <div className="p-4">
+        <MovieDetails movie={movie} />
+      </div>
+    </div>
+  )
+}
+
+// MovieDetails component
+const MovieDetails = ({ movie }: { movie: Movie }) => {
+  return (
+    <>
+      <h3 className="text-lg font-semibold mb-2 line-clamp-2">{movie.title}</h3>
+      <p className="text-sm text-gray-300 mb-3 line-clamp-3 h-10">
+        {movie.overview}
+      </p>
+      <div className="flex justify-between items-center text-xs text-gray-400">
+        <span>{movie.release_date}</span>
+        <span className="flex items-center">
+          ⭐️ {movie.vote_average.toFixed(1)}
+        </span>
+      </div>
+    </>
+  )
+}
+```
+
+## Step 5: Creating the MoviesPage Component
+
+Finally, let's create the main component that consumes the loader data:
+
+```tsx
+// MoviesPage component
+const MoviesPage = () => {
+  const { movies, error } = Route.useLoaderData()
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen p-4 text-white"
+      style={{
+        backgroundColor: '#000',
+        backgroundImage:
+          'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
+      }}
+      role="main"
+      aria-label="Popular Movies Section"
+    >
+      <div className="w-full max-w-6xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-3xl mb-6 font-bold text-center">Popular Movies</h1>
+
+        {error && (
+          <div
+            className="text-red-400 text-center mb-4 p-4 bg-red-900/20 rounded-lg"
+            role="alert"
+          >
+            {error}
+          </div>
+        )}
+
+        {movies.length > 0 ? (
+          <div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+            aria-label="Movie List"
+          >
+            {movies.slice(0, 12).map((movie) => (
+              <MovieCard key={movie.id} movie={movie} />
+            ))}
+          </div>
+        ) : (
+          !error && (
+            <div className="text-center text-gray-400" role="status">
+              Loading movies...
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  )
+}
+```
+
+### Understanding How It All Works Together
+
+```mermaid
+sequenceDiagram
+    autonumber
+    actor U as User
+    participant R as Router (TanStack Start)
+    participant L as Route Loader (/fetch-movies)
+    participant A as External API (TMDB)
+    participant V as MoviesPage (UI)
+
+    U->>R: Navigate to /fetch-movies
+    R->>L: Invoke loader (server-side)
+    L->>A: GET /movie/popular\nAuthorization: Bearer <TOKEN>
+    A-->>L: JSON TMDBResponse
+    alt response.ok
+        L-->>R: { movies, error: null }
+        R->>V: Render SSR with movies
+        V-->>U: HTML with movie grid
+    else non-ok / error
+        L-->>R: { movies: [], error: "Failed to load movies" }
+        R->>V: Render SSR with error alert
+        V-->>U: HTML with error state
+    end
+
+    note over L,V: Loader validates response.ok,\nreturns data or error for initial render
+```
+
+Let's break down how the different parts of our application work together:
+
+1. Route loader: When a user visits `/fetch-movies`, the loader function runs on the server
+2. API call: The loader calls `fetchPopularMovies()` which makes an HTTP request to TMDB
+3. Server-Side rendering: The data is fetched on the server reducing the load on the client side
+4. Component rendering: The `MoviesPage` component receives the data via `Route.useLoaderData()`
+5. Rendering UI: The movie cards are rendered with the fetched data
+
+## Step 6: Testing Your Application
+
+Now you can test your application by visiting [http://localhost:3000/fetch-movies](http://localhost:3000/fetch-movies). If everything is set up correctly, you should see a grid of popular movies with their posters, titles, and ratings. Your app should look like this:
+
+![Netflix style movie setup](https://res.cloudinary.com/dubc3wnbv/image/upload/v1756512946/Screenshot_2025-08-29_at_5.14.26_PM_iiex7o.png)
+
+## Conclusion
+
+You've successfully built a movie discovery app that integrates with an external API using TanStack Start. This tutorial demonstrated how to use route loaders for server-side data fetching and building UI components with external data.
+
+While fetching data at build time in TanStack Start is perfect for static content like blog posts or product pages, it's not ideal for interactive apps. If you need features like real-time updates, caching, or infinite scrolling, you'll want to use [TanStack Query](/query) on the client side instead. TanStack Query makes it easy to handle dynamic data with built-in caching, background updates, and smooth user interactions. By using TanStack Start for static content and TanStack Query for interactive features, you get fast loading pages plus all the modern functionality users expect.
diff --git a/mintlify/start/framework/react/tutorial/reading-writing-file.md b/mintlify/start/framework/react/tutorial/reading-writing-file.md
new file mode 100644
index 000000000..607596a74
--- /dev/null
+++ b/mintlify/start/framework/react/tutorial/reading-writing-file.md
@@ -0,0 +1,586 @@
+---
+id: reading-and-writing-file
+title: Building a Full Stack DevJokes App with TanStack Start
+---
+
+This tutorial will guide you through building a complete full-stack application using TanStack Start. You'll create a DevJokes app where users can view and add developer-themed jokes, demonstrating key concepts of TanStack Start including server functions, file-based data storage, and React components.
+
+Here's a demo of the app in action:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/zd0rtKbtlgU?si=7W1Peoo0W0WvZmAd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/devjokes).
+
+## What You'll Learn
+
+1. Setting up a TanStack Start project
+2. Implementing server functions
+3. Reading and writing data to files
+4. Building a complete UI with React components
+5. Using TanStack Router for data fetching and navigation
+
+## Prerequisites
+
+- Basic knowledge of React and TypeScript.
+- Node.js and `pnpm` installed on your machine
+
+## Nice to know
+
+- [Server Side Rendering (SSR)](/router/guide/ssr)
+- [TanStack Router concepts](/router/routing/routing-concepts)
+- [React Query concepts](/query/framework/react/overview)
+
+## Setting up a TanStack Start Project
+
+First, let's create a new TanStack Start project:
+
+```bash
+pnpx @tanstack/cli@latest create devjokes
+cd devjokes
+```
+
+When this script runs, it will ask you a few setup questions. You can either pick choices that work for you or just press enter to accept the defaults.
+
+Optionally, you can pass in a `--add-on` flag to get options such as Shadcn, Clerk, Convex, TanStack Query, etc.
+
+Once setup is complete, install dependencies and start the development server:
+
+```bash
+pnpm i
+pnpm dev
+```
+
+For this project, we'll need the `uuid` package:
+
+```bash
+# Install uuid for generating unique IDs
+pnpm add uuid
+```
+
+## Understanding the project structure
+
+At this point, the project structure should look like this -
+
+```
+/devjokes
+├── src/
+│   ├── routes/
+│   │   ├── demo/                         # Demo routes
+│   │   ├── __root.tsx                    # Root layout
+│   │   └── index.tsx                     # Home page
+│   ├── components/                       # React components
+│   ├── data/                             # Data files
+│   ├── router.tsx                        # Router configuration
+│   ├── routeTree.gen.ts                  # Generated route tree
+│   └── styles.css                        # Global styles
+├── public/                               # Static assets
+├── vite.config.ts or rsbuild.config.ts   # TanStack Start configuration
+├── package.json                          # Project dependencies
+└── tsconfig.json                         # TypeScript configuration
+```
+
+This structure might seem overwhelming at first, but here are the key files you need to focus on:
+
+1. `src/router.tsx` - Sets up routing for your application
+2. `src/routes/__root.tsx` - The root layout component where you can add global styles and components
+3. `src/routes/index.tsx` - Your home page
+
+Once your project is set up, you can access your app at `localhost:3000`. You should see the default TanStack Start welcome page.
+
+At this point, your app will look like this:
+
+![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
+
+## Step 1: Reading Data From a File
+
+Let's start by creating a file-based storage system for our jokes.
+
+### Step 1.1: Create a JSON File with Jokes
+
+Let's set up a list of jokes that we can use to render on the page. Create a `jokes.json` file within `src/data`:
+
+```bash
+touch src/data/jokes.json
+```
+
+Now, let's add some sample jokes to this file:
+
+```json
+[
+  {
+    "id": "1",
+    "question": "Why don't keyboards sleep?",
+    "answer": "Because they have two shifts"
+  },
+  {
+    "id": "2",
+    "question": "Are you a RESTful API?",
+    "answer": "Because you GET my attention, PUT some love, POST the cutest smile, and DELETE my bad day"
+  },
+  {
+    "id": "3",
+    "question": "I used to know a joke about Java",
+    "answer": "But I ran out of memory."
+  },
+  {
+    "id": "4",
+    "question": "Why do Front-End Developers eat lunch alone?",
+    "answer": "Because, they don't know how to join tables."
+  },
+  {
+    "id": "5",
+    "question": "I am declaring a war.",
+    "answer": "var war;"
+  }
+]
+```
+
+### Step 1.2: Create Types for Our Data
+
+Let's create a file to define our data types. Create a new file at `src/types/index.ts`:
+
+```typescript
+// src/types/index.ts
+export interface Joke {
+  id: string
+  question: string
+  answer: string
+}
+
+export type JokesData = Joke[]
+```
+
+### Step 1.3: Create Server Functions to Read the File
+
+Let's create a new file `src/serverActions/jokesActions.ts` to create a server function to perform a read-write operation. We will be creating a server function using [`createServerFn`](/start/framework/react/server-functions).
+
+```tsx
+// src/serverActions/jokesActions.ts
+import { createServerFn } from '@tanstack/react-start'
+import * as fs from 'node:fs'
+import type { JokesData } from '../types'
+
+const JOKES_FILE = 'src/data/jokes.json'
+
+export const getJokes = createServerFn({ method: 'GET' }).handler(async () => {
+  const jokes = await fs.promises.readFile(JOKES_FILE, 'utf-8')
+  return JSON.parse(jokes) as JokesData
+})
+```
+
+In this code, we are using `createServerFn` to create a server function that reads the jokes from the JSON file. The `handler` function is where we are using the `fs` module to read the file.
+
+### Step 1.4: Consume Server Function on the Client Side
+
+Now to consume this server function, we can simply call it in our code using TanStack Router which already comes with TanStack Start!
+
+Now let's create a new component `JokesList` to render the jokes on the page with a little Tailwind styling sprinkle.
+
+```tsx
+// src/components/JokesList.tsx
+import { Joke } from '../types'
+
+interface JokesListProps {
+  jokes: Joke[]
+}
+
+export function JokesList({ jokes }: JokesListProps) {
+  if (!jokes || jokes.length === 0) {
+    return <p className="text-gray-500 italic">No jokes found. Add some!</p>
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Jokes Collection</h2>
+      {jokes.map((joke) => (
+        <div
+          key={joke.id}
+          className="bg-white p-4 rounded-lg shadow-md border border-gray-200"
+        >
+          <p className="font-bold text-lg mb-2">{joke.question}</p>
+          <p className="text-gray-700">{joke.answer}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+Now let's call our server function inside `index.tsx` using TanStack Router which already comes with TanStack Start!
+
+```jsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { getJokes } from './serverActions/jokesActions'
+import { JokesList } from './JokesList'
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    // Load jokes data when the route is accessed
+    return getJokes()
+  },
+  component: App,
+})
+
+const App = () => {
+  const jokes = Route.useLoaderData() || []
+
+  return (
+    <div className="max-w-2xl mx-auto py-12 px-4 space-y-6">
+      <h1 className="text-4xl font-bold text-center mb-10">DevJokes</h1>
+      <JokesList jokes={jokes} />
+    </div>
+  )
+}
+```
+
+When the page loads, `jokes` will have data from the `jokes.json` file already!
+
+With a little Tailwind styling, the app should look like this:
+
+![DevJoke App with 5 DevJokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-1.png)
+
+## Step 2: Writing Data to a File
+
+So far, we have been able to read from the file successfully! We can use the same approach to write to the `jokes.json` file using `createServerFunction`.
+
+### Step 2.1: Create Server Function to Write to the File
+
+It's time to modify the `jokes.json` file so that we can add new jokes to it. Let's create another server function but this time with a `POST` method to write to the same file.
+
+```tsx
+// src/serverActions/jokesActions.ts
+import { createServerFn } from '@tanstack/react-start'
+import * as fs from 'node:fs'
+import { v4 as uuidv4 } from 'uuid' // Add this import
+import type { Joke, JokesData } from '../types'
+
+const JOKES_FILE = 'src/data/jokes.json'
+
+export const getJokes = createServerFn({ method: 'GET' }).handler(async () => {
+  const jokes = await fs.promises.readFile(JOKES_FILE, 'utf-8')
+  return JSON.parse(jokes) as JokesData
+})
+
+// Add this new server function
+export const addJoke = createServerFn({ method: 'POST' })
+  .validator((data: { question: string; answer: string }) => {
+    // Validate input data
+    if (!data.question || !data.question.trim()) {
+      throw new Error('Joke question is required')
+    }
+    if (!data.answer || !data.answer.trim()) {
+      throw new Error('Joke answer is required')
+    }
+    return data
+  })
+  .handler(async ({ data }) => {
+    try {
+      // Read the existing jokes from the file
+      const jokesData = await getJokes()
+
+      // Create a new joke with a unique ID
+      const newJoke: Joke = {
+        id: uuidv4(),
+        question: data.question,
+        answer: data.answer,
+      }
+
+      // Add the new joke to the list
+      const updatedJokes = [...jokesData, newJoke]
+
+      // Write the updated jokes back to the file
+      await fs.promises.writeFile(
+        JOKES_FILE,
+        JSON.stringify(updatedJokes, null, 2),
+        'utf-8',
+      )
+
+      return newJoke
+    } catch (error) {
+      console.error('Failed to add joke:', error)
+      throw new Error('Failed to add joke')
+    }
+  })
+```
+
+In this code:
+
+- We are using `createServerFn` to create server functions that run on the server but can be called from the client. This server function is used to write data to the file.
+- We are going to first use `validator` to validate the input data. This is a good practice to ensure that the data we are receiving is in the correct format.
+- We are going to perform the actual write operation in the `handler` function.
+- `getJokes` reads the jokes from our JSON file.
+- `addJoke` validates the input data and adds a new joke to our file.
+- We're using `uuidv4()` to generate unique IDs for our jokes.
+
+### Step 2.2: Adding a Form to Add Jokes to our JSON File
+
+Now, let's modify our home page to display jokes and provide a form to add new ones. Let's create a new component called `JokeForm.jsx` and add the following form to it:
+
+```tsx
+// src/components/JokeForm.tsx
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+import { addJoke } from '../serverActions/jokesActions'
+
+export function JokeForm() {
+  const router = useRouter()
+  const [question, setQuestion] = useState('')
+  const [answer, setAnswer] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  return (
+    <form onSubmit={handleSubmit} className="mb-8">
+      {error && (
+        <div className="bg-red-100 text-red-700 p-2 rounded mb-4">{error}</div>
+      )}
+
+      <div className="flex flex-col sm:flex-row gap-4 mb-8">
+        <input
+          id="question"
+          type="text"
+          placeholder="Enter joke question"
+          className="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          required
+        />
+
+        <input
+          id="answer"
+          type="text"
+          placeholder="Enter joke answer"
+          className="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1 py-4"
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          required
+        />
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-medium rounded disabled:opacity-50 px-4"
+        >
+          {isSubmitting ? 'Adding...' : 'Add Joke'}
+        </button>
+      </div>
+    </form>
+  )
+}
+```
+
+### Step 2.3: Wire Up the Form to the Server Function
+
+Now, let's wire the form up to our `addJoke` server function in the `handleSubmit` function. Calling a server action is simple! It's just a function call.
+
+```tsx
+//JokeForm.tsx
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+import { addJoke } from '../serverActions/jokesActions'
+
+export function JokeForm() {
+  const router = useRouter()
+  const [question, setQuestion] = useState('')
+  const [answer, setAnswer] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async () => {
+    if (!question || !answer || isSubmitting) return
+    try {
+      setIsSubmitting(true)
+      await addJoke({
+        data: { question, answer },
+      })
+
+      // Clear form
+      setQuestion('')
+      setAnswer('')
+
+      // Refresh data
+      router.invalidate()
+    } catch (error) {
+      console.error('Failed to add joke:', error)
+      setError('Failed to add joke')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="mb-8">
+      {error && (
+        <div className="bg-red-100 text-red-700 p-2 rounded mb-4">{error}</div>
+      )}
+      <div className="flex flex-col sm:flex-row gap-4 mb-8">
+        <input
+          id="question"
+          type="text"
+          placeholder="Enter joke question"
+          className="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          required
+        />
+        <input
+          id="answer"
+          type="text"
+          placeholder="Enter joke answer"
+          className="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1 py-4"
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          required
+        />
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-medium rounded disabled:opacity-50 px-4"
+        >
+          {isSubmitting ? 'Adding...' : 'Add Joke'}
+        </button>
+      </div>
+    </form>
+  )
+}
+```
+
+With this, our UI should look like this:
+![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.png)
+
+## Understanding How It All Works Together
+
+Let's break down how the different parts of our application work together:
+
+1. **Server Functions**: These run on the server and handle data operations
+   - `getJokes`: Reads the jokes from our JSON file
+   - `addJoke`: Adds a new joke to our JSON file
+
+2. **TanStack Router**: Handles routing and data loading
+   - The loader function fetches jokes data when the route is accessed
+   - `useLoaderData` makes this data available in our component
+   - `router.invalidate()` refreshes the data when we add a new joke
+
+3. **React Components**: Build the UI of our application
+   - `JokesList`: Displays the list of jokes
+   - `JokeForm`: Provides a form for adding new jokes
+
+4. **File-Based Storage**: Stores our jokes in a JSON file
+   - Reading and writing are handled by Node.js `fs` module
+   - Data is persisted between server restarts
+
+## How Data Flows Through the Application
+
+### Data Flow
+
+```mermaid
+sequenceDiagram
+autonumber
+actor User
+participant UI as Browser (HomePage + Form)
+participant Loader as Route Loader (loader)
+participant Server
+participant Store as jokes.json
+
+%% Visiting the Home Page
+User ->> UI: Visit /
+UI ->> Loader: loader() calls getJokes()
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: jokes data
+Server -->> Loader: jokes[]
+Loader -->> UI: useLoaderData() → jokes[]
+
+%% Adding a New Joke
+User ->> UI: Fill form and submit
+UI ->> Server: handleSubmit → addJoke(newJoke)
+Server ->> Store: Read jokes.json
+Server ->> Store: Write updated jokes.json
+Server -->> UI: addJoke() resolved
+UI ->> Loader: router.invalidate() (re-run loader)
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: updated jokes[]
+Server -->> Loader: updated jokes[]
+Loader -->> UI: useLoaderData() → updated jokes[]
+```
+
+When a user visits the home page:
+
+1. The `loader` function in the route calls `getJokes()` server function
+2. The server reads `jokes.json` and returns the jokes data
+3. This data is passed to the `HomePage` component through `useLoaderData()`
+4. The `HomePage` component passes the data to the `JokesList` component
+
+When a user adds a new joke:
+
+1. They fill out the form and submit it
+2. The `handleSubmit` function calls the `addJoke()` server function
+3. The server reads the current jokes, adds the new joke, and writes the updated data back to `jokes.json`
+4. After the operation completes, we call `router.invalidate()` to refresh the data
+5. This triggers the loader again, fetching the updated jokes
+6. The UI updates to show the new joke in the list
+
+Here's a demo of the app in action:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/zd0rtKbtlgU?si=7W1Peoo0W0WvZmAd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Common Issues and Debugging
+
+Here are some common issues you might encounter when building your TanStack Start application and how to resolve them:
+
+### Server Functions Not Working
+
+If your server functions aren't working as expected:
+
+1. Check that you're using the correct HTTP method (`GET`, `POST`, etc.)
+2. Ensure file paths are correct and accessible to the server
+3. Check the server console for error messages
+4. Make sure you're not using client-only APIs in server functions
+
+### Route Data Not Loading
+
+If route data isn't loading properly:
+
+1. Verify that your loader function is properly implemented
+2. Check that you're using `useLoaderData()` correctly
+3. Look for errors in the browser console
+4. Make sure your server function is working correctly
+
+### Form Submission Issues
+
+If form submissions aren't working:
+
+1. Check for validation errors in your server function
+2. Verify that form event prevention (`e.preventDefault()`) is working
+3. Make sure state updates are happening correctly
+4. Look for network errors in the browser's Developer Tools
+
+### File Reading/Writing Issues
+
+When working with file-based storage:
+
+1. Ensure file paths are correct
+2. Check file permissions
+3. Make sure you're handling async operations properly with `await`
+4. Add proper error handling for file operations
+
+## Conclusion
+
+Congratulations! You've built a full-stack DevJokes app using TanStack Start. In this tutorial, you've learned:
+
+- How to set up a TanStack Start project
+- How to implement server functions for data operations
+- How to read and write data to files
+- How to build React components for your UI
+- How to use TanStack Router for routing and data fetching
+
+This simple application demonstrates the power of TanStack Start for building full-stack applications with a minimal amount of code. You can extend this app by adding features like:
+
+- Joke categories
+- Ability to edit and delete jokes
+- User authentication
+- Voting for favorite jokes
+
+The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/devjokes).
diff --git a/mintlify/start/framework/solid/build-from-scratch.md b/mintlify/start/framework/solid/build-from-scratch.md
new file mode 100644
index 000000000..a7f770eaa
--- /dev/null
+++ b/mintlify/start/framework/solid/build-from-scratch.md
@@ -0,0 +1,332 @@
+---
+id: build-from-scratch
+title: Build a Project from Scratch
+---
+
+> [!NOTE]
+> If you already created a project with the CLI or by cloning an example from the [Getting Started](/start/framework/solid/getting-started) guide, you can skip this guide and move on to the [Routing](/start/framework/solid/guide/routing) guide.
+
+_So you want to build a TanStack Start project from scratch?_
+
+This guide will help you build a **very** basic TanStack Start web application. Together, we will use TanStack Start to:
+
+- Serve an index page
+- Display a counter
+- Increment the counter on the server and client
+
+Let's create a new project directory and initialize it.
+
+```shell
+mkdir myApp
+cd myApp
+npm init -y
+```
+
+> [!NOTE]
+> We use `npm` in all of these examples, but you can use your package manager of choice instead.
+
+## TypeScript Configuration
+
+We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.json` file with at least the following settings:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true
+  }
+}
+```
+
+> [!NOTE]
+> Enabling `verbatimModuleSyntax` can result in server bundles leaking into client bundles. It is recommended to keep this option disabled.
+
+## Install Dependencies
+
+TanStack Start is powered by [TanStack Router](https://tanstack.com/router) and supports [Vite](https://vite.dev/) or [Rsbuild](https://rsbuild.dev/) as the build tool.
+
+To install Start and Router, run:
+
+```shell
+npm i @tanstack/solid-start @tanstack/solid-router
+```
+
+You'll also need SolidJS:
+
+```shell
+npm i solid-js
+```
+
+Install the build tool and Solid integration you want to use:
+
+
+
+# Vite
+
+```shell
+npm i -D vite vite-plugin-solid
+```
+
+# Rsbuild
+
+```shell
+npm i -D @rsbuild/core @rsbuild/plugin-babel @rsbuild/plugin-solid
+```
+
+
+
+and some TypeScript:
+
+```shell
+npm i -D typescript @types/node
+```
+
+## Update Configuration Files
+
+We'll then update our `package.json` to use your build tool's CLI and set `"type": "module"`:
+
+
+
+# Vite
+
+```json
+{
+  // ...
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build"
+  }
+}
+```
+
+# Rsbuild
+
+```json
+{
+  // ...
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  }
+}
+```
+
+
+
+Then configure TanStack Start's build tool plugin:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
+import viteSolid from 'vite-plugin-solid'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    tsconfigPaths: true,
+  },
+  plugins: [
+    tanstackStart(),
+    // solid's vite plugin must come after start's vite plugin
+    viteSolid({ ssr: true }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { tanstackStart } from '@tanstack/solid-start/plugin/rsbuild'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+    tanstackStart(),
+  ],
+})
+```
+
+
+
+## Add the Basic Templating
+
+There are 2 required files for TanStack Start usage:
+
+1. The router configuration
+2. The root of your application
+
+Once configuration is done, we'll have a file tree that looks like the following:
+
+```
+.
+├── src/
+│   ├── routes/
+│   │   └── `__root.tsx`
+│   ├── `router.tsx`
+│   ├── `routeTree.gen.ts`
+├── `vite.config.ts` or `rsbuild.config.ts`
+├── `package.json`
+└── `tsconfig.json`
+```
+
+## The Router Configuration
+
+This is the file that will dictate the behavior of TanStack Router used within Start. Here, you can configure everything
+from the default [preloading functionality](/router/guide/preloading) to [caching staleness](/router/guide/data-loading).
+
+> [!NOTE]
+> You won't have a `routeTree.gen.ts` file yet. This file will be generated when you run TanStack Start for the first time.
+
+```tsx
+// src/router.tsx
+import { createRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+```
+
+## The Root of Your Application
+
+Finally, we need to create the root of our application. This is the entry point for all other routes. The code in this file will wrap all other routes in the application.
+
+```tsx
+// src/routes/__root.tsx
+import * as Solid from 'solid-js'
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/solid-router'
+import { HydrationScript } from 'solid-js/web'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
+  return (
+    <html>
+      <head>
+        <HydrationScript />
+      </head>
+      <body>
+        <HeadContent />
+        <Solid.Suspense>{children}</Solid.Suspense>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+## Writing Your First Route
+
+Now that we have the basic templating setup, we can write our first route. This is done by creating a new file in the `src/routes` directory.
+
+```tsx
+import * as fs from 'node:fs'
+import { createFileRoute, useRouter } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+const filePath = 'count.txt'
+
+async function readCount() {
+  return parseInt(
+    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
+  )
+}
+
+const getCount = createServerFn({
+  method: 'GET',
+}).handler(() => {
+  return readCount()
+})
+
+const updateCount = createServerFn({ method: 'POST' })
+  .validator((d: number) => d)
+  .handler(async ({ data }) => {
+    const count = await readCount()
+    await fs.promises.writeFile(filePath, `${count + data}`)
+  })
+
+export const Route = createFileRoute('/')({
+  component: Home,
+  loader: async () => await getCount(),
+})
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        updateCount({ data: 1 }).then(() => {
+          router.invalidate()
+        })
+      }}
+    >
+      Add 1 to {state()}?
+    </button>
+  )
+}
+```
+
+That's it! 🤯 You've now set up a TanStack Start project and written your first route. 🎉
+
+You can now run `npm run dev` to start your server and navigate to `http://localhost:3000` to see your route in action.
+
+You want to deploy your application? Check out the [hosting guide](/start/framework/solid/guide/hosting).
diff --git a/mintlify/start/framework/solid/examples/start-basic-auth.md b/mintlify/start/framework/solid/examples/start-basic-auth.md
new file mode 100644
index 000000000..8bd3219ea
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-auth.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + DIY Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-auth)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-auth)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-authjs.md b/mintlify/start/framework/solid/examples/start-basic-authjs.md
new file mode 100644
index 000000000..b65a55a2e
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-authjs.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Auth.js"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-authjs)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-authjs)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-cloudflare.md b/mintlify/start/framework/solid/examples/start-basic-cloudflare.md
new file mode 100644
index 000000000..c8c6ff8b5
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-cloudflare.md
@@ -0,0 +1,12 @@
+---
+title: "Cloudflare Vite Plugin"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-cloudflare)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-cloudflare)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-netlify.md b/mintlify/start/framework/solid/examples/start-basic-netlify.md
new file mode 100644
index 000000000..9f7293742
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-netlify.md
@@ -0,0 +1,12 @@
+---
+title: "Netlify Vite Plugin"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-netlify)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-netlify)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-nitro.md b/mintlify/start/framework/solid/examples/start-basic-nitro.md
new file mode 100644
index 000000000..d1da3b96e
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-nitro.md
@@ -0,0 +1,12 @@
+---
+title: "Nitro Vite Plugin"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-nitro)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-nitro)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-solid-query.md b/mintlify/start/framework/solid/examples/start-basic-solid-query.md
new file mode 100644
index 000000000..d64f4cb8c
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-solid-query.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Solid Query"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-solid-query)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-solid-query)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic-static.md b/mintlify/start/framework/solid/examples/start-basic-static.md
new file mode 100644
index 000000000..d5aa3a6aa
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic-static.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Static rendering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-static)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic-static)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-basic.md b/mintlify/start/framework/solid/examples/start-basic.md
new file mode 100644
index 000000000..988db29e8
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-convex-better-auth.md b/mintlify/start/framework/solid/examples/start-convex-better-auth.md
new file mode 100644
index 000000000..82a24532a
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-convex-better-auth.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Convex + Better Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-convex-better-auth)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-convex-better-auth)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/examples/start-supabase-basic.md b/mintlify/start/framework/solid/examples/start-supabase-basic.md
new file mode 100644
index 000000000..8e2e64159
--- /dev/null
+++ b/mintlify/start/framework/solid/examples/start-supabase-basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic + Supabase Auth"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/examples/start-supabase-basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4/examples/solid/start-supabase-basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/start/framework/solid/getting-started.md b/mintlify/start/framework/solid/getting-started.md
new file mode 100644
index 000000000..81413e76d
--- /dev/null
+++ b/mintlify/start/framework/solid/getting-started.md
@@ -0,0 +1,65 @@
+---
+id: getting-started
+title: Getting Started
+redirect_from:
+  - /framework/solid/quick-start
+---
+
+## Start a new project
+
+### Use TanStack Builder
+
+The best way to get started with TanStack Start is [TanStack Builder](https://tanstack.com/builder). It's the AI-first setup flow and the easiest way to get to a working project fast.
+
+### Use the CLI
+
+If you'd rather scaffold locally or want a backup path, use the TanStack CLI:
+
+```bash
+npx @tanstack/cli@latest create --framework solid
+```
+
+You'll be prompted to choose your package manager and optional add-ons like Tailwind CSS and ESLint.
+
+### Start from an example
+
+If you'd rather begin from a working codebase, clone one of the official examples.
+
+To start with the [Basic](https://github.com/TanStack/router/tree/main/examples/solid/start-basic) example:
+
+```bash
+npx gitpick TanStack/router/tree/main/examples/solid/start-basic start-basic
+cd start-basic
+npm install
+npm run dev
+```
+
+To use a different example, replace `start-basic` with one of the slugs below.
+
+#### Examples
+
+- [Bare](https://github.com/TanStack/router/tree/main/examples/solid/start-bare) (`start-bare`)
+- [Basic](https://github.com/TanStack/router/tree/main/examples/solid/start-basic) (`start-basic`)
+- [Basic Static](https://github.com/TanStack/router/tree/main/examples/solid/start-basic-static) (`start-basic-static`)
+- [Counter](https://github.com/TanStack/router/tree/main/examples/solid/start-counter) (`start-counter`)
+
+Each example page also includes a StackBlitz preview so you can inspect it before cloning.
+
+To clone a different example manually, replace `EXAMPLE_SLUG` below with the slug you want to use:
+
+```bash
+npx gitpick TanStack/router/tree/main/examples/solid/EXAMPLE_SLUG my-new-project
+cd my-new-project
+npm install
+npm run dev
+```
+
+If you want to clone and deploy quickly, use the **Deploy to Netlify** button on an example's page.
+
+### Build from scratch
+
+If you want to wire everything up by hand, follow [Build a project from scratch](/start/framework/solid/build-from-scratch).
+
+## Next Steps
+
+Once you've created, cloned, or deployed a project, continue to the [Routing](/start/framework/solid/guide/routing) guide.
diff --git a/mintlify/start/framework/solid/guide/authentication-overview.md b/mintlify/start/framework/solid/guide/authentication-overview.md
new file mode 100644
index 000000000..74de1163a
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/authentication-overview.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/guide/authentication-overview.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    'React': 'SolidJS',
+    'react-router': 'solid-router',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/authentication-server-primitives.md b/mintlify/start/framework/solid/guide/authentication-server-primitives.md
new file mode 100644
index 000000000..54cad5e08
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/authentication-server-primitives.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/guide/authentication-server-primitives.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '@tanstack/react-router': '@tanstack/solid-router',
+    'React': 'SolidJS',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/authentication.md b/mintlify/start/framework/solid/guide/authentication.md
new file mode 100644
index 000000000..da0c3a285
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/authentication.md
@@ -0,0 +1,602 @@
+---
+id: authentication
+title: Authentication
+---
+
+This guide covers authentication patterns and shows how to implement your own authentication system with TanStack Start.
+
+> **📋 Before You Start:** Check our [Authentication Overview](/start/framework/solid/guide/authentication-overview) for all available options including partner solutions and hosted services.
+
+## Authentication Approaches
+
+You have several options for authentication in your TanStack Start application:
+
+**Hosted Solutions:**
+
+1. **[Clerk](https://clerk.dev)** - Complete authentication platform with UI components
+2. **[WorkOS](https://workos.com)** - Enterprise-focused with SSO and compliance features
+3. **[Better Auth](https://www.better-auth.com/)** - Open-source TypeScript library
+4. **[Auth.js](https://authjs.dev/)** - Open-source library supporting 80+ OAuth providers
+
+**DIY Implementation Benefits:**
+
+- **Full Control**: Complete customization over authentication flow
+- **No Vendor Lock-in**: Own your authentication logic and user data
+- **Custom Requirements**: Implement specific business logic or compliance needs
+- **Cost Control**: No per-user pricing or usage limits
+
+Authentication involves many considerations including password security, session management, rate limiting, CSRF protection, and various attack vectors.
+
+## Core Concepts
+
+### Authentication vs Authorization
+
+- **Authentication**: Who is this user? (Login/logout)
+- **Authorization**: What can this user do? (Permissions/roles)
+
+TanStack Start provides the tools for both through server functions, sessions, and route protection.
+
+> Protect the data/API boundary first. Any server function, server route, or other API endpoint that returns or mutates private data must authorize the request itself. `beforeLoad` is useful for route UX: it keeps users out of screens they cannot use and avoids triggering work that would fail anyway. It is not the security boundary for the data. See [Authentication Server Primitives](/start/framework/solid/guide/authentication-server-primitives) for the server-side pattern.
+
+## Essential Building Blocks
+
+### 1. Server Functions for Authentication
+
+Server functions handle sensitive authentication logic securely on the server:
+
+```tsx
+import { createServerFn } from '@tanstack/solid-start'
+import { redirect } from '@tanstack/solid-router'
+
+// Login server function
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string; password: string }) => data)
+  .handler(async ({ data }) => {
+    // Verify credentials (replace with your auth logic)
+    const user = await authenticateUser(data.email, data.password)
+
+    if (!user) {
+      return { error: 'Invalid credentials' }
+    }
+
+    // Create session
+    const session = await useAppSession()
+    await session.update({
+      userId: user.id,
+      email: user.email,
+    })
+
+    // Redirect to protected area
+    throw redirect({ to: '/dashboard' })
+  })
+
+// Logout server function
+export const logoutFn = createServerFn({ method: 'POST' }).handler(async () => {
+  const session = await useAppSession()
+  await session.clear()
+  throw redirect({ to: '/' })
+})
+
+// Get current user
+export const getCurrentUserFn = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    const session = await useAppSession()
+    const userId = session.get('userId')
+
+    if (!userId) {
+      return null
+    }
+
+    return await getUserById(userId)
+  },
+)
+```
+
+### 2. Session Management
+
+TanStack Start provides secure HTTP-only cookie sessions:
+
+```tsx
+// utils/session.ts
+import { useSession } from '@tanstack/solid-start/server'
+
+type SessionData = {
+  userId?: string
+  email?: string
+  role?: string
+}
+
+export function useAppSession() {
+  return useSession<SessionData>({
+    // Session configuration
+    name: 'app-session',
+    password: process.env.SESSION_SECRET!, // At least 32 characters
+    // Optional: customize cookie settings
+    cookie: {
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      httpOnly: true,
+    },
+  })
+}
+```
+
+### 3. Authentication Context
+
+Share authentication state across your application:
+
+```tsx
+// contexts/auth.tsx
+import { createContext, useContext } from 'solid-js'
+import { useServerFn } from '@tanstack/solid-start'
+import { getCurrentUserFn } from '../server/auth'
+
+type User = {
+  id: string
+  email: string
+  role: string
+}
+
+type AuthContextType = {
+  user: User | null
+  isLoading: boolean
+  refetch: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider(props) {
+  const { data: user, isLoading, refetch } = useServerFn(getCurrentUserFn)
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, refetch }}>
+      {props.children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+```
+
+### 4. Route Protection
+
+Protect routes using `beforeLoad`:
+
+```tsx
+// routes/_authed.tsx - Layout route for protected pages
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+import { getCurrentUserFn } from '../server/auth'
+
+export const Route = createFileRoute('/_authed')({
+  beforeLoad: async ({ location }) => {
+    const user = await getCurrentUserFn()
+
+    if (!user) {
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.href },
+      })
+    }
+
+    // Pass user to child routes
+    return { user }
+  },
+})
+```
+
+```tsx
+// routes/_authed/dashboard.tsx - Protected route
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_authed/dashboard')({
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const context = Route.useRouteContext()
+
+  return (
+    <div>
+      <h1>Welcome, {context().user.email}!</h1>
+      {/* Dashboard content */}
+    </div>
+  )
+}
+```
+
+## Implementation Patterns
+
+### Basic Email/Password Authentication
+
+```tsx
+// server/auth.ts
+import bcrypt from 'bcryptjs'
+import { createServerFn } from '@tanstack/solid-start'
+
+// User registration
+export const registerFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string; password: string; name: string }) => data)
+  .handler(async ({ data }) => {
+    // Check if user exists
+    const existingUser = await getUserByEmail(data.email)
+    if (existingUser) {
+      return { error: 'User already exists' }
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(data.password, 12)
+
+    // Create user
+    const user = await createUser({
+      email: data.email,
+      password: hashedPassword,
+      name: data.name,
+    })
+
+    // Create session
+    const session = await useAppSession()
+    await session.update({ userId: user.id })
+
+    return { success: true, user: { id: user.id, email: user.email } }
+  })
+
+async function authenticateUser(email: string, password: string) {
+  const user = await getUserByEmail(email)
+  if (!user) return null
+
+  const isValid = await bcrypt.compare(password, user.password)
+  return isValid ? user : null
+}
+```
+
+### Role-Based Access Control (RBAC)
+
+```tsx
+// utils/auth.ts
+export const roles = {
+  USER: 'user',
+  ADMIN: 'admin',
+  MODERATOR: 'moderator',
+} as const
+
+type Role = (typeof roles)[keyof typeof roles]
+
+export function hasPermission(userRole: Role, requiredRole: Role): boolean {
+  const hierarchy = {
+    [roles.USER]: 0,
+    [roles.MODERATOR]: 1,
+    [roles.ADMIN]: 2,
+  }
+
+  return hierarchy[userRole] >= hierarchy[requiredRole]
+}
+
+// Protected route with role check
+export const Route = createFileRoute('/_authed/admin/')({
+  beforeLoad: async ({ context }) => {
+    if (!hasPermission(context.user.role, roles.ADMIN)) {
+      throw redirect({ to: '/unauthorized' })
+    }
+  },
+})
+```
+
+### Social Authentication Integration
+
+```tsx
+// Example with OAuth providers
+export const authProviders = {
+  google: {
+    clientId: process.env.GOOGLE_CLIENT_ID!,
+    redirectUri: `${process.env.APP_URL}/auth/google/callback`,
+  },
+  github: {
+    clientId: process.env.GITHUB_CLIENT_ID!,
+    redirectUri: `${process.env.APP_URL}/auth/github/callback`,
+  },
+}
+
+export const initiateOAuthFn = createServerFn({ method: 'POST' })
+  .validator((data: { provider: 'google' | 'github' }) => data)
+  .handler(async ({ data }) => {
+    const provider = authProviders[data.provider]
+    const state = generateRandomState()
+
+    // Store state in session for CSRF protection
+    const session = await useAppSession()
+    await session.update({ oauthState: state })
+
+    // Generate OAuth URL
+    const authUrl = generateOAuthUrl(provider, state)
+
+    throw redirect({ href: authUrl })
+  })
+```
+
+### Password Reset Flow
+
+```tsx
+// Password reset request
+export const requestPasswordResetFn = createServerFn({ method: 'POST' })
+  .validator((data: { email: string }) => data)
+  .handler(async ({ data }) => {
+    const user = await getUserByEmail(data.email)
+    if (!user) {
+      // Don't reveal if email exists
+      return { success: true }
+    }
+
+    const token = generateSecureToken()
+    const expires = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
+
+    await savePasswordResetToken(user.id, token, expires)
+    await sendPasswordResetEmail(user.email, token)
+
+    return { success: true }
+  })
+
+// Password reset confirmation
+export const resetPasswordFn = createServerFn({ method: 'POST' })
+  .validator((data: { token: string; newPassword: string }) => data)
+  .handler(async ({ data }) => {
+    const resetToken = await getPasswordResetToken(data.token)
+
+    if (!resetToken || resetToken.expires < new Date()) {
+      return { error: 'Invalid or expired token' }
+    }
+
+    const hashedPassword = await bcrypt.hash(data.newPassword, 12)
+    await updateUserPassword(resetToken.userId, hashedPassword)
+    await deletePasswordResetToken(data.token)
+
+    return { success: true }
+  })
+```
+
+## Security Best Practices
+
+### 1. Password Security
+
+```tsx
+// Use strong hashing (bcrypt, scrypt, or argon2)
+import bcrypt from 'bcryptjs'
+
+const saltRounds = 12 // Adjust based on your security needs
+const hashedPassword = await bcrypt.hash(password, saltRounds)
+```
+
+### 2. Session Security
+
+```tsx
+// Use secure session configuration
+export function useAppSession() {
+  return useSession({
+    name: 'app-session',
+    password: process.env.SESSION_SECRET!, // 32+ characters
+    cookie: {
+      secure: process.env.NODE_ENV === 'production', // HTTPS only in production
+      sameSite: 'lax', // CSRF protection
+      httpOnly: true, // XSS protection
+      maxAge: 7 * 24 * 60 * 60, // 7 days
+    },
+  })
+}
+```
+
+### 3. Rate Limiting
+
+```tsx
+// Simple in-memory rate limiting (use Redis in production)
+const loginAttempts = new Map<string, { count: number; resetTime: number }>()
+
+export const rateLimitLogin = (ip: string): boolean => {
+  const now = Date.now()
+  const attempts = loginAttempts.get(ip)
+
+  if (!attempts || now > attempts.resetTime) {
+    loginAttempts.set(ip, { count: 1, resetTime: now + 15 * 60 * 1000 }) // 15 min
+    return true
+  }
+
+  if (attempts.count >= 5) {
+    return false // Too many attempts
+  }
+
+  attempts.count++
+  return true
+}
+```
+
+### 4. Input Validation
+
+```tsx
+import { z } from 'zod'
+
+const loginSchema = z.object({
+  email: z.string().email().max(255),
+  password: z.string().min(8).max(100),
+})
+
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator((data) => loginSchema.parse(data))
+  .handler(async ({ data }) => {
+    // data is now validated
+  })
+```
+
+## Testing Authentication
+
+### Unit Testing Server Functions
+
+```tsx
+// __tests__/auth.test.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import { loginFn } from '../server/auth'
+
+describe('Authentication', () => {
+  beforeEach(async () => {
+    await setupTestDatabase()
+  })
+
+  it('should login with valid credentials', async () => {
+    const result = await loginFn({
+      data: { email: 'test@example.com', password: 'password123' },
+    })
+
+    expect(result.error).toBeUndefined()
+    expect(result.user).toBeDefined()
+  })
+
+  it('should reject invalid credentials', async () => {
+    const result = await loginFn({
+      data: { email: 'test@example.com', password: 'wrongpassword' },
+    })
+
+    expect(result.error).toBe('Invalid credentials')
+  })
+})
+```
+
+### Integration Testing
+
+```tsx
+// __tests__/auth-flow.test.tsx
+import { render, screen, fireEvent, waitFor } from '@solidjs/testing-library'
+import { RouterProvider, createMemoryHistory } from '@tanstack/solid-router'
+import { router } from '../router'
+
+describe('Authentication Flow', () => {
+  it('should redirect to login when accessing protected route', async () => {
+    const history = createMemoryHistory()
+    history.push('/dashboard') // Protected route
+
+    render(<RouterProvider router={router} history={history} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Login')).toBeInTheDocument()
+    })
+  })
+})
+```
+
+## Common Patterns
+
+### Loading States
+
+```tsx
+function LoginForm() {
+  const [isLoading, setIsLoading] = createSignal(false)
+  const loginMutation = useServerFn(loginFn)
+
+  const handleSubmit = async (data: LoginData) => {
+    setIsLoading(true)
+    try {
+      await loginMutation.mutate(data)
+    } catch (error) {
+      // Handle error
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Form fields */}
+      <button disabled={isLoading()}>
+        {isLoading() ? 'Logging in...' : 'Login'}
+      </button>
+    </form>
+  )
+}
+```
+
+### Remember Me Functionality
+
+```tsx
+export const loginFn = createServerFn({ method: 'POST' })
+  .validator(
+    (data: { email: string; password: string; rememberMe?: boolean }) => data,
+  )
+  .handler(async ({ data }) => {
+    const user = await authenticateUser(data.email, data.password)
+    if (!user) return { error: 'Invalid credentials' }
+
+    const session = await useAppSession()
+    await session.update(
+      { userId: user.id },
+      {
+        // Extend session if remember me is checked
+        maxAge: data.rememberMe ? 30 * 24 * 60 * 60 : undefined, // 30 days vs session
+      },
+    )
+
+    return { success: true }
+  })
+```
+
+## Migration from Other Solutions
+
+### From Client-Side Auth
+
+If you're migrating from client-side authentication (localStorage, context only):
+
+1. Move authentication logic to server functions
+2. Replace localStorage with server sessions
+3. Update route protection to use `beforeLoad`
+4. Add proper security headers and CSRF protection
+
+### From Other Frameworks
+
+- **Next.js**: Replace API routes with server functions, migrate NextAuth sessions
+- **Remix**: Convert loaders/actions to server functions, adapt session patterns
+- **SvelteKit**: Move form actions to server functions, update route protection
+
+## Production Considerations
+
+When choosing your authentication approach, consider these factors:
+
+### Hosted vs DIY Comparison
+
+**Hosted Solutions (Clerk, WorkOS, Better Auth):**
+
+- Pre-built security measures and regular updates
+- UI components and user management features
+- Compliance certifications and audit trails
+- Support and documentation
+- Per-user or subscription pricing
+
+**DIY Implementation:**
+
+- Complete control over implementation and data
+- No ongoing subscription costs
+- Custom business logic and workflows
+- Responsibility for security updates and monitoring
+- Need to handle edge cases and attack vectors
+
+### Security Considerations
+
+Authentication systems need to handle various security aspects:
+
+- Password hashing and timing attack prevention
+- Session management and fixation protection
+- CSRF and XSS protection
+- Rate limiting and brute force prevention
+- OAuth flow security
+- Compliance requirements (GDPR, CCPA, etc.)
+
+## Next Steps
+
+When implementing authentication, consider:
+
+- **Security Review**: Review your implementation for security best practices
+- **Performance**: Add caching for user lookups and session validation
+- **Monitoring**: Add logging and monitoring for authentication events
+- **Compliance**: Ensure compliance with relevant regulations if storing personal data
+
+For other authentication approaches, check the [Authentication Overview](/start/framework/solid/guide/authentication-overview). For specific integration help, see the [How-to Guides](/router/how-to/index#authentication) or explore our [working examples](https://github.com/TanStack/router/tree/main/examples/solid).
diff --git a/mintlify/start/framework/solid/guide/client-entry-point.md b/mintlify/start/framework/solid/guide/client-entry-point.md
new file mode 100644
index 000000000..b73408e8e
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/client-entry-point.md
@@ -0,0 +1,64 @@
+---
+id: client-entry-point
+title: Client Entry Point
+---
+
+# Client Entry Point
+
+> [!NOTE]
+> The client entry point is **optional** out of the box. If not provided, TanStack Start will automatically handle the client entry point for you using the below as a default.
+
+Getting our html to the client is only half the battle. Once there, we need to hydrate our client-side JavaScript once the route resolves to the client. We do this by hydrating the root of our application with the `StartClient` component:
+
+```tsx
+// src/client.tsx
+import { hydrate } from 'solid-js/web'
+import { StartClient, hydrateStart } from '@tanstack/solid-start/client'
+
+hydrateStart().then((router) => {
+  hydrate(() => <StartClient router={router} />, document)
+})
+```
+
+This enables us to kick off client-side routing once the user's initial server request has fulfilled.
+
+## Error Handling
+
+You can wrap your client entry point with error boundaries to handle client-side errors gracefully:
+
+```tsx
+// src/client.tsx
+import { StartClient } from '@tanstack/solid-start/client'
+import { hydrate } from 'solid-js/web'
+import { ErrorBoundary } from './components/ErrorBoundary'
+
+hydrate(
+  () => (
+    <ErrorBoundary>
+      <StartClient />
+    </ErrorBoundary>
+  ),
+  document.body,
+)
+```
+
+## Development vs Production
+
+You may want different behavior in development vs production:
+
+```tsx
+// src/client.tsx
+import { StartClient } from '@tanstack/solid-start/client'
+import { hydrate } from 'solid-js/web'
+
+const App = (
+  <>
+    {import.meta.env.DEV && <div>Development Mode</div>}
+    <StartClient />
+  </>
+)
+
+hydrate(() => <App />, document.body)
+```
+
+The client entry point gives you full control over how your application initializes on the client side while working seamlessly with TanStack Start's server-side rendering.
diff --git a/mintlify/start/framework/solid/guide/code-execution-patterns.md b/mintlify/start/framework/solid/guide/code-execution-patterns.md
new file mode 100644
index 000000000..87ff5b115
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/code-execution-patterns.md
@@ -0,0 +1,146 @@
+---
+id: code-execution-patterns
+title: Code Execution Patterns
+---
+
+This guide covers patterns for controlling where code runs in your TanStack Start application - server-only, client-only, or isomorphic (both environments). For foundational concepts, see the [Execution Model](/start/framework/solid/guide/execution-model) guide.
+
+## Quick Start
+
+Set up execution boundaries in your TanStack Start application:
+
+```tsx
+import {
+  createServerFn,
+  createServerOnlyFn,
+  createClientOnlyFn,
+  createIsomorphicFn,
+} from '@tanstack/solid-start'
+
+// Server function (RPC call)
+const getUsers = createServerFn().handler(async () => {
+  return await db.users.findMany()
+})
+
+// Server-only utility (crashes on client)
+const getSecret = createServerOnlyFn(() => process.env.API_SECRET)
+
+// Client-only utility (crashes on server)
+const saveToStorage = createClientOnlyFn((data: any) => {
+  localStorage.setItem('data', JSON.stringify(data))
+})
+
+// Different implementations per environment
+const logger = createIsomorphicFn()
+  .server((msg) => console.log(`[SERVER]: ${msg}`))
+  .client((msg) => console.log(`[CLIENT]: ${msg}`))
+```
+
+## Implementation Patterns
+
+### Progressive Enhancement
+
+```tsx
+// Component works without JS, enhanced with JS
+function SearchForm() {
+  const [query, setQuery] = createSignal('')
+
+  return (
+    <form action="/search" method="get">
+      <input
+        name="q"
+        value={query()}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <ClientOnly fallback={<button type="submit">Search</button>}>
+        <SearchButton onSearch={() => search(query())} />
+      </ClientOnly>
+    </form>
+  )
+}
+```
+
+### Environment-Aware Storage
+
+```tsx
+const storage = createIsomorphicFn()
+  .server((key: string) => {
+    // Server: File-based cache
+    const fs = require('node:fs')
+    return JSON.parse(fs.readFileSync('.cache', 'utf-8'))[key]
+  })
+  .client((key: string) => {
+    // Client: localStorage
+    return JSON.parse(localStorage.getItem(key) || 'null')
+  })
+```
+
+## Common Problems
+
+### Environment Variable Exposure
+
+```tsx
+// ❌ Exposes to client bundle
+const apiKey = process.env.SECRET_KEY
+
+// ✅ Server-only access
+const apiKey = createServerOnlyFn(() => process.env.SECRET_KEY)
+```
+
+### Incorrect Loader Assumptions
+
+```tsx
+// ❌ Assuming loader is server-only
+export const Route = createFileRoute('/users')({
+  loader: () => {
+    // This runs on BOTH server and client!
+    const secret = process.env.SECRET // Exposed to client
+    return fetch(`/api/users?key=${secret}`)
+  },
+})
+
+// ✅ Use server function for server-only operations
+const getUsersSecurely = createServerFn().handler(() => {
+  const secret = process.env.SECRET // Server-only
+  return fetch(`/api/users?key=${secret}`)
+})
+
+export const Route = createFileRoute('/users')({
+  loader: () => getUsersSecurely(), // Isomorphic call to server function
+})
+```
+
+### Hydration Mismatches
+
+```tsx
+// ❌ Different content server vs client
+function CurrentTime() {
+  return <div>{new Date().toLocaleString()}</div>
+}
+
+// ✅ Consistent rendering
+function CurrentTime() {
+  const [time, setTime] = createSignal<string>()
+
+  createEffect(() => {
+    setTime(new Date().toLocaleString())
+  })
+
+  return <div>{time() || 'Loading...'}</div>
+}
+```
+
+## Production Checklist
+
+- [ ] **Bundle Analysis**: Verify server-only code isn't in client bundle
+- [ ] **Environment Variables**: Ensure secrets use `createServerOnlyFn()` or `createServerFn()`
+- [ ] **Loader Logic**: Remember loaders are isomorphic, not server-only
+- [ ] **ClientOnly Fallbacks**: Provide appropriate fallbacks to prevent layout shift
+- [ ] **Error Boundaries**: Handle server/client execution errors gracefully
+
+## Related Resources
+
+- [Execution Model](/start/framework/solid/guide/execution-model) - Core concepts and architectural patterns
+- [Server Functions](/start/framework/solid/guide/server-functions) - Deep dive into server function patterns
+- [Environment Variables](/start/framework/solid/guide/environment-variables) - Secure environment variable handling
+- [Middleware](/start/framework/solid/guide/middleware) - Server function middleware patterns
diff --git a/mintlify/start/framework/solid/guide/css-styling.md b/mintlify/start/framework/solid/guide/css-styling.md
new file mode 100644
index 000000000..141664e41
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/css-styling.md
@@ -0,0 +1,4 @@
+---
+ref: docs/start/framework/react/guide/css-styling.md
+replace: { '@tanstack/react-start': '@tanstack/solid-start' }
+---
diff --git a/mintlify/start/framework/solid/guide/databases.md b/mintlify/start/framework/solid/guide/databases.md
new file mode 100644
index 000000000..70e212d51
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/databases.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/databases.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/deferred-hydration.md b/mintlify/start/framework/solid/guide/deferred-hydration.md
new file mode 100644
index 000000000..dd6e71e93
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/deferred-hydration.md
@@ -0,0 +1,17 @@
+---
+ref: docs/start/framework/react/guide/deferred-hydration.md
+replace:
+  '@tanstack/react-start': '@tanstack/solid-start'
+  'React handlers': 'Solid handlers'
+  'one React tree': 'one Solid tree'
+  'Comparison To React Selective Hydration': 'Comparison To Solid Streaming Hydration'
+  "React's selective hydration controls the order in which server-rendered boundaries hydrate. Deferred hydration controls whether and when each boundary hydrates at all.": "Solid's streaming hydration controls the order in which server-rendered boundaries hydrate. Deferred hydration controls whether and when each boundary hydrates at all."
+  'When React hydrates a streaming SSR page, every server-rendered `<Suspense>` boundary will eventually hydrate. Selective hydration just decides the order: each boundary hydrates as soon as its code arrives, and React jumps a boundary to the front of the queue if the user clicks inside it. The work is fixed by what the server rendered; React schedules it to feel responsive.': 'When Solid hydrates a streaming SSR page, every server-rendered `<Suspense>` boundary will eventually hydrate. Streaming hydration just decides the order: each boundary hydrates as its resources resolve and stream from the server. The work is fixed by what the server rendered; Solid streams it to feel responsive.'
+  "The two compose. A `Hydrate` boundary decides whether and when React starts hydrating a subtree; once it opens, anything inside it (including `<Suspense>` boundaries) flows back into React's normal hydration scheduler. Use `<Suspense>` when hydration must happen and you want React to prioritize it well. Use `Hydrate` when hydration might not need to happen at all.": "The two compose. A `Hydrate` boundary decides whether and when Solid starts hydrating a subtree; once it opens, anything inside it (including `<Suspense>` boundaries) flows back into Solid's normal hydration scheduler. Use `<Suspense>` when hydration must happen and you want Solid to prioritize it well. Use `Hydrate` when hydration might not need to happen at all."
+  'ReactNode': 'JSX.Element'
+  "Deferred hydration is a performance hint for React's initial hydration work. React may hydrate a deferred boundary earlier than its strategy would normally allow if state, props, context, or store updates outside the boundary require React to reconcile inside it before the gate opens. This preserves correctness and avoids showing stale server HTML after the surrounding app has changed.": "Deferred hydration is a performance hint for Solid's initial hydration work. Once a boundary gate opens, TanStack Start clears the preserved server DOM inside the marker and mounts the live Solid subtree in its place."
+  'Hook calls directly inside extracted JSX': 'Render-time `use*` calls directly inside extracted JSX'
+  'Moving that JSX would move where the hook executes.': 'Moving that JSX would move where the call executes.'
+  'Move the hook call into a component inside the boundary, then render that component.': 'Move the call into a component inside the boundary, then render that component.'
+  'Move the hook into a component instead:': 'Move the call into a component instead:'
+---
diff --git a/mintlify/start/framework/solid/guide/early-hints.md b/mintlify/start/framework/solid/guide/early-hints.md
new file mode 100644
index 000000000..979c72d27
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/early-hints.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/early-hints.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/environment-functions.md b/mintlify/start/framework/solid/guide/environment-functions.md
new file mode 100644
index 000000000..d08e95a93
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/environment-functions.md
@@ -0,0 +1,4 @@
+---
+ref: docs/start/framework/react/guide/environment-functions.md
+replace: { 'react': 'solid' }
+---
diff --git a/mintlify/start/framework/solid/guide/environment-variables.md b/mintlify/start/framework/solid/guide/environment-variables.md
new file mode 100644
index 000000000..6a7f763d1
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/environment-variables.md
@@ -0,0 +1,20 @@
+---
+ref: docs/start/framework/react/guide/environment-variables.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '@tanstack/react-router': '@tanstack/solid-router',
+    'React.ReactNode': 'any',
+    'export function ApiProvider({ children }: { children: React.ReactNode }) {': 'export function ApiProvider(props) {',
+    'export function AuthProvider({ children }: { children: React.ReactNode }) {': 'export function AuthProvider(props) {',
+    '{children}': '{props.children}',
+    '@tanstack/react-start/plugin/vite': '@tanstack/solid-start/plugin/vite',
+    '@tanstack/react-start/plugin/rsbuild': '@tanstack/solid-start/plugin/rsbuild',
+    '@vitejs/plugin-react': 'vite-plugin-solid',
+    'viteReact()': 'viteSolid({ ssr: true })',
+    'viteReact': 'viteSolid',
+    "import { pluginReact } from '@rsbuild/plugin-react'": "import { pluginBabel } from '@rsbuild/plugin-babel'\nimport { pluginSolid } from '@rsbuild/plugin-solid'",
+    'pluginReact(),': "pluginBabel({\n      include: /\\.(?:jsx|tsx)$/,
+      }),\n    pluginSolid(),",
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/error-boundaries.md b/mintlify/start/framework/solid/guide/error-boundaries.md
new file mode 100644
index 000000000..8c07185c2
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/error-boundaries.md
@@ -0,0 +1,8 @@
+---
+ref: docs/start/framework/react/guide/error-boundaries.md
+replace:
+  {
+    '@tanstack/react-router': '@tanstack/solid-router',
+    'React Start': 'Solid Start',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/execution-model.md b/mintlify/start/framework/solid/guide/execution-model.md
new file mode 100644
index 000000000..f6076667b
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/execution-model.md
@@ -0,0 +1,331 @@
+---
+id: execution-model
+title: Execution Model
+---
+
+Understanding where code runs is fundamental to building TanStack Start applications. This guide explains TanStack Start's execution model and how to control where your code executes.
+
+## Core Principle: Isomorphic by Default
+
+**All code in TanStack Start is isomorphic by default** - it runs and is included in both server and client bundles unless explicitly constrained.
+
+```tsx
+// ✅ This runs on BOTH server and client
+function formatPrice(price: number) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(price)
+}
+
+// ✅ Route loaders are ISOMORPHIC
+export const Route = createFileRoute('/products')({
+  loader: async () => {
+    // This runs on server during SSR AND on client during navigation
+    const response = await fetch('/api/products')
+    return response.json()
+  },
+})
+```
+
+> **Critical Understanding**: Route `loader`s are isomorphic - they run on both server and client, not just the server.
+
+## The Execution Boundary
+
+TanStack Start applications run in two environments:
+
+### Server Environment
+
+- **Node.js runtime** with access to file system, databases, environment variables
+- **During SSR** - Initial page renders on server
+- **API requests** - Server functions execute server-side
+- **Build time** - Static generation and pre-rendering
+
+### Client Environment
+
+- **Browser runtime** with access to DOM, localStorage, user interactions
+- **After hydration** - Client takes over after initial server render
+- **Navigation** - Route loaders run client-side during navigation
+- **User interactions** - Event handlers, form submissions, etc.
+
+## Execution Control APIs
+
+### Server-Only Execution
+
+| API                      | Use Case                  | Client Behavior           |
+| ------------------------ | ------------------------- | ------------------------- |
+| `createServerFn()`       | RPC calls, data mutations | Network request to server |
+| `createServerOnlyFn(fn)` | Utility functions         | Throws error              |
+
+```tsx
+import { createServerFn, createServerOnlyFn } from '@tanstack/solid-start'
+
+// RPC: Server execution, callable from client
+const updateUser = createServerFn({ method: 'POST' })
+  .validator((data: UserData) => data)
+  .handler(async ({ data }) => {
+    // Only runs on server, but client can call it
+    return await db.users.update(data)
+  })
+
+// Utility: Server-only, client crashes if called
+const getEnvVar = createServerOnlyFn(() => process.env.DATABASE_URL)
+```
+
+### Client-Only Execution
+
+| API                      | Use Case                        | Server Behavior  |
+| ------------------------ | ------------------------------- | ---------------- |
+| `createClientOnlyFn(fn)` | Browser utilities               | Throws error     |
+| `<ClientOnly>`           | Components needing browser APIs | Renders fallback |
+
+```tsx
+import { createClientOnlyFn } from '@tanstack/solid-start'
+import { ClientOnly } from '@tanstack/solid-router'
+
+// Utility: Client-only, server crashes if called
+const saveToStorage = createClientOnlyFn((key: string, value: any) => {
+  localStorage.setItem(key, JSON.stringify(value))
+})
+
+// Component: Only renders children after hydration
+function Analytics() {
+  return (
+    <ClientOnly fallback={null}>
+      <GoogleAnalyticsScript />
+    </ClientOnly>
+  )
+}
+```
+
+#### useHydrated Hook
+
+For more granular control over hydration-dependent behavior, use the `useHydrated` hook. It returns an accessor (signal) indicating whether the client has been hydrated:
+
+```tsx
+import { useHydrated } from '@tanstack/solid-router'
+
+function TimeZoneDisplay() {
+  const hydrated = useHydrated()
+  const timeZone = () =>
+    hydrated() ? Intl.DateTimeFormat().resolvedOptions().timeZone : 'UTC'
+
+  return <div>Your timezone: {timeZone()}</div>
+}
+```
+
+**Behavior:**
+
+- **During SSR**: Always returns `false`
+- **First client render**: Returns `false`
+- **After hydration**: Returns `true` (and stays `true` for all subsequent renders)
+
+This is useful when you need to conditionally render content based on client-side data (like browser timezone, locale, or localStorage) while providing a sensible fallback for server rendering.
+
+### Environment-Specific Implementations
+
+```tsx
+import { createIsomorphicFn } from '@tanstack/solid-start'
+
+// Different implementation per environment
+const getDeviceInfo = createIsomorphicFn()
+  .server(() => ({ type: 'server', platform: process.platform }))
+  .client(() => ({ type: 'client', userAgent: navigator.userAgent }))
+```
+
+## Architectural Patterns
+
+### Progressive Enhancement
+
+Build components that work without JavaScript and enhance with client-side functionality:
+
+```tsx
+function SearchForm() {
+  const [query, setQuery] = createSignal('')
+
+  return (
+    <form action="/search" method="get">
+      <input
+        name="q"
+        value={query()}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <ClientOnly fallback={<button type="submit">Search</button>}>
+        <SearchButton onSearch={() => search(query())} />
+      </ClientOnly>
+    </form>
+  )
+}
+```
+
+### Environment-Aware Storage
+
+```tsx
+const storage = createIsomorphicFn()
+  .server((key: string) => {
+    // Server: File-based cache
+    const fs = require('node:fs')
+    return JSON.parse(fs.readFileSync('.cache', 'utf-8'))[key]
+  })
+  .client((key: string) => {
+    // Client: localStorage
+    return JSON.parse(localStorage.getItem(key) || 'null')
+  })
+```
+
+### RPC vs Direct Function Calls
+
+Understanding when to use server functions vs server-only functions:
+
+```tsx
+// createServerFn: RPC pattern - server execution, client callable
+const fetchUser = createServerFn().handler(async () => await db.users.find())
+
+// Usage from client component:
+const user = await fetchUser() // ✅ Network request
+
+// createServerOnlyFn: Crashes if called from client
+const getSecret = createServerOnlyFn(() => process.env.SECRET)
+
+// Usage from client:
+const secret = getSecret() // ❌ Throws error
+```
+
+## Common Anti-Patterns
+
+### Environment Variable Exposure
+
+```tsx
+// ❌ Exposes to client bundle
+const apiKey = process.env.SECRET_KEY
+
+// ✅ Server-only access
+const apiKey = createServerOnlyFn(() => process.env.SECRET_KEY)
+```
+
+### Incorrect Loader Assumptions
+
+```tsx
+// ❌ Assuming loader is server-only
+export const Route = createFileRoute('/users')({
+  loader: () => {
+    // This runs on BOTH server and client!
+    const secret = process.env.SECRET // Exposed to client
+    return fetch(`/api/users?key=${secret}`)
+  },
+})
+
+// ✅ Use server function for server-only operations
+const getUsersSecurely = createServerFn().handler(() => {
+  const secret = process.env.SECRET // Server-only
+  return fetch(`/api/users?key=${secret}`)
+})
+
+export const Route = createFileRoute('/users')({
+  loader: () => getUsersSecurely(), // Isomorphic call to server function
+})
+```
+
+### Hydration Mismatches
+
+```tsx
+// ❌ Different content server vs client
+function CurrentTime() {
+  return <div>{new Date().toLocaleString()}</div>
+}
+
+// ✅ Consistent rendering
+function CurrentTime() {
+  const [time, setTime] = createSignal<string>()
+
+  createEffect(() => {
+    setTime(new Date().toLocaleString())
+  })
+
+  return <div>{time() || 'Loading...'}</div>
+}
+```
+
+## Manual vs API-Driven Environment Detection
+
+```tsx
+// Manual: You handle the logic
+function logMessage(msg: string) {
+  if (typeof window === 'undefined') {
+    console.log(`[SERVER]: ${msg}`)
+  } else {
+    console.log(`[CLIENT]: ${msg}`)
+  }
+}
+
+// API: Framework handles it
+const logMessage = createIsomorphicFn()
+  .server((msg) => console.log(`[SERVER]: ${msg}`))
+  .client((msg) => console.log(`[CLIENT]: ${msg}`))
+```
+
+## Architecture Decision Framework
+
+**Choose Server-Only when:**
+
+- Accessing sensitive data (environment variables, secrets)
+- File system operations
+- Database connections
+- External API keys
+
+**Choose Client-Only when:**
+
+- DOM manipulation
+- Browser APIs (localStorage, geolocation)
+- User interaction handling
+- Analytics/tracking
+
+**Choose Isomorphic when:**
+
+- Data formatting/transformation
+- Business logic
+- Shared utilities
+- Route loaders (they're isomorphic by nature)
+
+## Security Considerations
+
+### Bundle Analysis
+
+Always verify server-only code isn't included in client bundles:
+
+```bash
+# Analyze client bundle
+npm run build
+# Check dist/client for any server-only imports
+```
+
+### Environment Variable Strategy
+
+- **Client-exposed**: Use `VITE_` prefix for client-accessible variables
+- **Server-only**: Access via `createServerOnlyFn()` or `createServerFn()`
+- **Never expose**: Database URLs, API keys, secrets
+
+### Error Boundaries
+
+Handle server/client execution errors gracefully:
+
+```tsx
+function ErrorBoundary(props) {
+  return (
+    <ErrorBoundaryComponent
+      fallback={<div>Something went wrong</div>}
+      onError={(error) => {
+        if (typeof window === 'undefined') {
+          console.error('[SERVER ERROR]:', error)
+        } else {
+          console.error('[CLIENT ERROR]:', error)
+        }
+      }}
+    >
+      {props.children}
+    </ErrorBoundaryComponent>
+  )
+}
+```
+
+Understanding TanStack Start's execution model is crucial for building secure, performant, and maintainable applications. The isomorphic-by-default approach provides flexibility while the execution control APIs give you precise control when needed.
diff --git a/mintlify/start/framework/solid/guide/geo.md b/mintlify/start/framework/solid/guide/geo.md
new file mode 100644
index 000000000..09919b2b9
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/geo.md
@@ -0,0 +1,10 @@
+---
+ref: docs/start/framework/react/guide/geo.md
+redirect_from:
+  - /framework/solid/guide/llmo
+replace:
+  {
+    '@tanstack/react-router': '@tanstack/solid-router',
+    '/framework/react/': '/framework/solid/',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/hosting.md b/mintlify/start/framework/solid/guide/hosting.md
new file mode 100644
index 000000000..23f1d35cf
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/hosting.md
@@ -0,0 +1,16 @@
+---
+ref: docs/start/framework/react/guide/hosting.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '@vitejs/plugin-react': 'vite-plugin-solid',
+    'viteReact()': 'viteSolid({ ssr: true })',
+    'viteReact': 'viteSolid',
+    'examples/react/start-basic-cloudflare': 'examples/solid/start-basic-cloudflare',
+    'examples/react/start-bun': 'examples/solid/start-bun',
+    'React 19': 'Solid 1.x',
+    'React 18': 'an older Solid version',
+    '`react` and `react-dom` packages are set to version 19.0.0 or higher': '`solid-js` package is set to a supported version',
+    'bun install react@19 react-dom@19': 'bun install solid-js@latest',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/hydration-errors.md b/mintlify/start/framework/solid/guide/hydration-errors.md
new file mode 100644
index 000000000..c435d591f
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/hydration-errors.md
@@ -0,0 +1,129 @@
+---
+id: hydration-errors
+title: Hydration Errors
+---
+
+### Why it happens
+
+- **Mismatch**: Server HTML differs from client render during hydration
+- **Common causes**: `Intl` (locale/time zone), `Date.now()`, random IDs, responsive-only logic, feature flags, user prefs
+
+### Strategy 1 — Make server and client match
+
+- **Pick a deterministic locale/time zone on the server** and use the same on the client
+- **Source of truth**: cookie (preferred) or `Accept-Language` header
+- **Compute once on the server** and hydrate as initial state
+
+```tsx
+// src/start.ts
+import { createStart, createMiddleware } from '@tanstack/solid-start'
+import {
+  getRequestHeader,
+  getCookie,
+  setCookie,
+} from '@tanstack/solid-start/server'
+
+const localeTzMiddleware = createMiddleware().server(async ({ next }) => {
+  const header = getRequestHeader('accept-language')
+  const headerLocale = header?.split(',')[0] || 'en-US'
+  const cookieLocale = getCookie('locale')
+  const cookieTz = getCookie('tz') // set by client later (see Strategy 2)
+
+  const locale = cookieLocale || headerLocale
+  const timeZone = cookieTz || 'UTC'
+
+  setCookie('locale', locale, { path: '/', maxAge: 60 * 60 * 24 * 365 })
+
+  return next({ context: { locale, timeZone } })
+})
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [localeTzMiddleware],
+}))
+```
+
+```tsx
+// src/routes/index.tsx (example)
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+import { getCookie } from '@tanstack/solid-start/server'
+
+export const getServerNow = createServerFn().handler(async () => {
+  const locale = getCookie('locale') || 'en-US'
+  const timeZone = getCookie('tz') || 'UTC'
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone,
+  }).format(new Date())
+})
+
+export const Route = createFileRoute('/')({
+  loader: () => getServerNow(),
+  component: () => {
+    const serverNow = Route.useLoaderData() as string
+    return <time dateTime={serverNow}>{serverNow}</time>
+  },
+})
+```
+
+### Strategy 2 — Let the client tell you its environment
+
+- On first visit, set a cookie with the client time zone; SSR uses `UTC` until then
+
+```tsx
+import { ClientOnly } from '@tanstack/solid-router'
+
+function SetTimeZoneCookie() {
+  if (typeof window !== 'undefined') {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+    document.cookie = `tz=${tz}; path=/; max-age=31536000`
+  }
+  return null
+}
+
+;<ClientOnly fallback={null}>
+  <SetTimeZoneCookie />
+</ClientOnly>
+```
+
+### Strategy 3 — Make it client-only
+
+- Use `<ClientOnly>` or Solid’s `<NoHydration>` to avoid SSR/hydration
+
+```tsx
+import { ClientOnly } from '@tanstack/solid-router'
+import { NoHydration } from 'solid-js/web'
+
+<ClientOnly fallback={<span>—</span>}>
+  <RelativeTime ts={someTs} />
+</ClientOnly>
+
+<NoHydration>
+  <time>{new Date().toLocaleString()}</time>
+</NoHydration>
+```
+
+### Strategy 4 — Disable or limit SSR for the route
+
+- Use Selective SSR to avoid rendering the component on the server
+
+```tsx
+export const Route = createFileRoute('/unstable')({
+  ssr: 'data-only', // or false
+  component: () => <ExpensiveViz />,
+})
+```
+
+### Strategy 5 — Last resort suppression
+
+- Prefer the tools above; avoid mismatches instead of hiding them
+
+### Checklist
+
+- **Deterministic inputs**: locale, time zone, feature flags
+- **Prefer cookies** for client context; fallback to `Accept-Language`
+- **Use `<ClientOnly>`/`<NoHydration>`** for inherently dynamic UI
+- **Use Selective SSR** when server HTML cannot be stable
+
+See also: [Execution Model](/start/framework/solid/guide/execution-model), [Code Execution Patterns](/start/framework/solid/guide/code-execution-patterns), [Selective SSR](/start/framework/solid/guide/selective-ssr), [Server Functions](/start/framework/solid/guide/server-functions)
diff --git a/mintlify/start/framework/solid/guide/import-protection.md b/mintlify/start/framework/solid/guide/import-protection.md
new file mode 100644
index 000000000..50c687f0e
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/import-protection.md
@@ -0,0 +1,4 @@
+---
+ref: docs/start/framework/react/guide/import-protection.md
+replace: { 'react': 'solid' }
+---
diff --git a/mintlify/start/framework/solid/guide/middleware.md b/mintlify/start/framework/solid/guide/middleware.md
new file mode 100644
index 000000000..8c411e9fb
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/middleware.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/middleware.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/observability.md b/mintlify/start/framework/solid/guide/observability.md
new file mode 100644
index 000000000..b3e6eac00
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/observability.md
@@ -0,0 +1,660 @@
+---
+id: observability
+title: Observability
+---
+
+Observability is a critical aspect of modern web development, enabling you to monitor, trace, and debug your application's performance and errors. TanStack Start provides built-in patterns for observability and integrates seamlessly with external tools to give you comprehensive insights into your application.
+
+## Partner Solution: Sentry
+
+<a href="https://sentry.io?utm_source=tanstack" alt='Sentry Logo'>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-light.svg" width="280" />
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-dark.svg" width="280" />
+    <img alt="Sentry logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/sentry-wordmark-light.svg" width="280" />
+  </picture>
+</a>
+
+For comprehensive observability, we recommend [Sentry](https://sentry.io?utm_source=tanstack) - our trusted partner for error tracking and performance monitoring. Sentry provides:
+
+- **Real-time Error Tracking** - Catch and debug errors across your entire stack
+- **Performance Monitoring** - Track slow transactions and optimize bottlenecks
+- **Release Health** - Monitor deployments and track error rates over time
+- **User Impact Analysis** - Understand how errors affect your users
+- **TanStack Start Integration** - Works seamlessly with server functions and client code
+
+**Quick Setup:**
+
+```tsx
+// Client-side (app.tsx)
+import * as Sentry from '@sentry/solid'
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  environment: import.meta.env.NODE_ENV,
+})
+
+// Server functions
+import * as Sentry from '@sentry/node'
+
+const serverFn = createServerFn().handler(async () => {
+  try {
+    return await riskyOperation()
+  } catch (error) {
+    Sentry.captureException(error)
+    throw error
+  }
+})
+```
+
+[Get started with Sentry →](https://sentry.io/signup?utm_source=tanstack) | [View integration example →](https://github.com/TanStack/router/tree/main/e2e/solid-router/sentry-integration)
+
+## Built-in Observability Patterns
+
+TanStack Start's architecture provides several opportunities for built-in observability without external dependencies:
+
+### Server Function Logging
+
+Add logging to your server functions to track execution, performance, and errors:
+
+```tsx
+import { createServerFn } from '@tanstack/solid-start'
+
+const getUser = createServerFn({ method: 'GET' })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    const startTime = Date.now()
+
+    try {
+      console.log(`[SERVER] Fetching user ${id}`)
+
+      const user = await db.users.findUnique({ where: { id } })
+
+      if (!user) {
+        console.log(`[SERVER] User ${id} not found`)
+        throw new Error('User not found')
+      }
+
+      const duration = Date.now() - startTime
+      console.log(`[SERVER] User ${id} fetched in ${duration}ms`)
+
+      return user
+    } catch (error) {
+      const duration = Date.now() - startTime
+      console.error(
+        `[SERVER] Error fetching user ${id} after ${duration}ms:`,
+        error,
+      )
+      throw error
+    }
+  })
+```
+
+### Request/Response Middleware
+
+Create middleware to log all requests and responses:
+
+```tsx
+import { createMiddleware } from '@tanstack/solid-start'
+
+const requestLogger = createMiddleware().handler(async ({ next }) => {
+  const startTime = Date.now()
+  const timestamp = new Date().toISOString()
+
+  console.log(`[${timestamp}] ${request.method} ${request.url} - Starting`)
+
+  try {
+    const response = await next()
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[${timestamp}] ${request.method} ${request.url} - ${response.status} (${duration}ms)`,
+    )
+
+    return response
+  } catch (error) {
+    const duration = Date.now() - startTime
+    console.error(
+      `[${timestamp}] ${request.method} ${request.url} - Error (${duration}ms):`,
+      error,
+    )
+    throw error
+  }
+})
+
+// Apply to all server routes
+export const Route = createFileRoute('/api/users')({
+  server: {
+    middleware: [requestLogger],
+    handlers: {
+      GET: async () => {
+        return Response.json({ users: await getUsers() })
+      },
+    },
+  },
+})
+```
+
+### Route Performance Monitoring
+
+Track route loading performance on both client and server:
+
+```tsx
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/dashboard')({
+  loader: async ({ context }) => {
+    const startTime = Date.now()
+
+    try {
+      const data = await loadDashboardData()
+      const duration = Date.now() - startTime
+
+      // Log server-side performance
+      if (typeof window === 'undefined') {
+        console.log(`[SSR] Dashboard loaded in ${duration}ms`)
+      }
+
+      return data
+    } catch (error) {
+      const duration = Date.now() - startTime
+      console.error(`[LOADER] Dashboard error after ${duration}ms:`, error)
+      throw error
+    }
+  },
+  component: Dashboard,
+})
+
+function Dashboard() {
+  const data = Route.useLoaderData()
+
+  // Track client-side render time
+  Solid.createEffect(() => {
+    const renderTime = performance.now()
+    console.log(`[CLIENT] Dashboard rendered in ${renderTime}ms`)
+  })
+
+  return <div>Dashboard content</div>
+}
+```
+
+### Health Check Endpoints
+
+Create server routes for health monitoring:
+
+```tsx
+// routes/health.ts
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/health')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const checks = {
+          status: 'healthy',
+          timestamp: new Date().toISOString(),
+          uptime: process.uptime(),
+          memory: process.memoryUsage(),
+          database: await checkDatabase(),
+          version: process.env.npm_package_version,
+        }
+
+        return Response.json(checks)
+      },
+    },
+  },
+})
+
+async function checkDatabase() {
+  try {
+    await db.raw('SELECT 1')
+    return { status: 'connected', latency: 0 }
+  } catch (error) {
+    return { status: 'error', error: error.message }
+  }
+}
+```
+
+### Error Boundaries
+
+Implement comprehensive error handling:
+
+```tsx
+// Client-side error boundary
+import { ErrorBoundary } from 'solid-error-boundary'
+
+function ErrorFallback({ error, resetErrorBoundary }: any) {
+  // Log client errors
+  console.error('[CLIENT ERROR]:', error)
+
+  // Could also send to external service
+  // sendErrorToService(error)
+
+  return (
+    <div role="alert">
+      <h2>Something went wrong</h2>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Router />
+    </ErrorBoundary>
+  )
+}
+
+// Server function error handling
+const riskyOperation = createServerFn().handler(async () => {
+  try {
+    return await performOperation()
+  } catch (error) {
+    // Log server errors with context
+    console.error('[SERVER ERROR]:', {
+      error: error.message,
+      stack: error.stack,
+      timestamp: new Date().toISOString(),
+      // Add request context if available
+    })
+
+    // Return user-friendly error
+    throw new Error('Operation failed. Please try again.')
+  }
+})
+```
+
+### Performance Metrics Collection
+
+Collect and expose basic performance metrics:
+
+```tsx
+// utils/metrics.ts
+class MetricsCollector {
+  private metrics = new Map<string, number[]>()
+
+  recordTiming(name: string, duration: number) {
+    if (!this.metrics.has(name)) {
+      this.metrics.set(name, [])
+    }
+    this.metrics.get(name)!.push(duration)
+  }
+
+  getStats(name: string) {
+    const timings = this.metrics.get(name) || []
+    if (timings.length === 0) return null
+
+    const sorted = timings.sort((a, b) => a - b)
+    return {
+      count: timings.length,
+      avg: timings.reduce((a, b) => a + b, 0) / timings.length,
+      p50: sorted[Math.floor(sorted.length * 0.5)],
+      p95: sorted[Math.floor(sorted.length * 0.95)],
+      min: sorted[0],
+      max: sorted[sorted.length - 1],
+    }
+  }
+
+  getAllStats() {
+    const stats: Record<string, any> = {}
+    for (const [name] of this.metrics) {
+      stats[name] = this.getStats(name)
+    }
+    return stats
+  }
+}
+
+export const metrics = new MetricsCollector()
+
+// Metrics endpoint
+// routes/metrics.ts
+export const Route = createFileRoute('/metrics')({
+  server: {
+    handlers: {
+      GET: async () => {
+        return Response.json({
+          system: {
+            uptime: process.uptime(),
+            memory: process.memoryUsage(),
+            timestamp: new Date().toISOString(),
+          },
+          application: metrics.getAllStats(),
+        })
+      },
+    },
+  },
+})
+```
+
+### Debug Headers for Development
+
+Add helpful debug information to responses:
+
+```tsx
+import { createMiddleware } from '@tanstack/solid-start'
+
+const debugMiddleware = createMiddleware().handler(async ({ next }) => {
+  const response = await next()
+
+  if (process.env.NODE_ENV === 'development') {
+    response.headers.set('X-Debug-Timestamp', new Date().toISOString())
+    response.headers.set('X-Debug-Node-Version', process.version)
+    response.headers.set('X-Debug-Uptime', process.uptime().toString())
+  }
+
+  return response
+})
+```
+
+### Environment-Specific Logging
+
+Configure different logging strategies for development vs production:
+
+```tsx
+// utils/logger.ts
+import { createIsomorphicFn } from '@tanstack/solid-start'
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error'
+
+const logger = createIsomorphicFn()
+  .server((level: LogLevel, message: string, data?: any) => {
+    const timestamp = new Date().toISOString()
+
+    if (process.env.NODE_ENV === 'development') {
+      // Development: Detailed console logging
+      console[level](`[${timestamp}] [${level.toUpperCase()}]`, message, data)
+    } else {
+      // Production: Structured JSON logging
+      console.log(
+        JSON.stringify({
+          timestamp,
+          level,
+          message,
+          data,
+          service: 'tanstack-start',
+          environment: process.env.NODE_ENV,
+        }),
+      )
+    }
+  })
+  .client((level: LogLevel, message: string, data?: any) => {
+    if (process.env.NODE_ENV === 'development') {
+      console[level](`[CLIENT] [${level.toUpperCase()}]`, message, data)
+    } else {
+      // Production: Send to analytics service
+      // analytics.track('client_log', { level, message, data })
+    }
+  })
+
+// Usage anywhere in your app
+export { logger }
+
+// Example usage
+const fetchUserData = createServerFn().handler(async ({ data: userId }) => {
+  logger('info', 'Fetching user data', { userId })
+
+  try {
+    const user = await db.users.findUnique({ where: { id: userId } })
+    logger('info', 'User data fetched successfully', { userId })
+    return user
+  } catch (error) {
+    logger('error', 'Failed to fetch user data', {
+      userId,
+      error: error.message,
+    })
+    throw error
+  }
+})
+```
+
+### Simple Error Reporting
+
+Basic error reporting without external dependencies:
+
+```tsx
+// utils/error-reporter.ts
+const errorStore = new Map<
+  string,
+  { count: number; lastSeen: Date; error: any }
+>()
+
+export function reportError(error: Error, context?: any) {
+  const key = `${error.name}:${error.message}`
+  const existing = errorStore.get(key)
+
+  if (existing) {
+    existing.count++
+    existing.lastSeen = new Date()
+  } else {
+    errorStore.set(key, {
+      count: 1,
+      lastSeen: new Date(),
+      error: {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        context,
+      },
+    })
+  }
+
+  // Log immediately
+  console.error('[ERROR REPORTED]:', {
+    error: error.message,
+    count: existing ? existing.count : 1,
+    context,
+  })
+}
+
+// Error reporting endpoint
+// routes/errors.ts
+export const Route = createFileRoute('/admin/errors')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const errors = Array.from(errorStore.entries()).map(([key, data]) => ({
+          id: key,
+          ...data,
+        }))
+
+        return Response.json({ errors })
+      },
+    },
+  },
+})
+```
+
+## External Observability Tools
+
+While TanStack Start provides built-in observability patterns, external tools offer more comprehensive monitoring:
+
+### Other Popular Tools
+
+**Application Performance Monitoring:**
+
+- **[DataDog](https://www.datadoghq.com/)** - Full-stack monitoring with APM
+- **[New Relic](https://newrelic.com/)** - Performance monitoring and alerting
+- **[Honeycomb](https://honeycomb.io/)** - Observability for complex systems
+
+**Error Tracking:**
+
+- **[Bugsnag](https://bugsnag.com/)** - Error monitoring with deployment tracking
+- **[Rollbar](https://rollbar.com/)** - Real-time error alerting
+
+**Analytics & User Behavior:**
+
+- **[PostHog](https://posthog.com/)** - Product analytics with error tracking
+- **[Mixpanel](https://mixpanel.com/)** - Event tracking and user analytics
+
+### OpenTelemetry Integration (Experimental)
+
+[OpenTelemetry](https://opentelemetry.io/) is the industry standard for observability. Here's an experimental approach to integrate it with TanStack Start:
+
+```tsx
+// instrumentation.ts - Initialize before your app
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'tanstack-start-app',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '1.0.0',
+  }),
+  instrumentations: [getNodeAutoInstrumentations()],
+})
+
+// Initialize BEFORE importing your app
+sdk.start()
+```
+
+```tsx
+// Server function tracing
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('tanstack-start')
+
+const getUserWithTracing = createServerFn({ method: 'GET' })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    return tracer.startActiveSpan('get-user', async (span) => {
+      span.setAttributes({
+        'user.id': id,
+        operation: 'database.query',
+      })
+
+      try {
+        const user = await db.users.findUnique({ where: { id } })
+        span.setStatus({ code: SpanStatusCode.OK })
+        return user
+      } catch (error) {
+        span.recordException(error)
+        span.setStatus({
+          code: SpanStatusCode.ERROR,
+          message: error.message,
+        })
+        throw error
+      } finally {
+        span.end()
+      }
+    })
+  })
+```
+
+```tsx
+// Middleware for automatic tracing
+import { createMiddleware } from '@tanstack/solid-start'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+const tracer = trace.getTracer('tanstack-start')
+
+const tracingMiddleware = createMiddleware().handler(
+  async ({ next, request }) => {
+    const url = new URL(request.url)
+
+    return tracer.startActiveSpan(
+      `${request.method} ${url.pathname}`,
+      async (span) => {
+        span.setAttributes({
+          'http.method': request.method,
+          'http.url': request.url,
+          'http.route': url.pathname,
+        })
+
+        try {
+          const response = await next()
+          span.setAttribute('http.status_code', response.status)
+          span.setStatus({ code: SpanStatusCode.OK })
+          return response
+        } catch (error) {
+          span.recordException(error)
+          span.setStatus({
+            code: SpanStatusCode.ERROR,
+            message: error.message,
+          })
+          throw error
+        } finally {
+          span.end()
+        }
+      },
+    )
+  },
+)
+```
+
+> **Note**: The above OpenTelemetry integration is experimental and requires manual setup. We're exploring first-class OpenTelemetry support that would provide automatic instrumentation for server functions, middleware, and route loaders.
+
+### Quick Integration Pattern
+
+Most observability tools follow a similar integration pattern with TanStack Start:
+
+```tsx
+// Initialize in app entry point
+import { initObservabilityTool } from 'your-tool'
+
+initObservabilityTool({
+  dsn: import.meta.env.VITE_TOOL_DSN,
+  environment: import.meta.env.NODE_ENV,
+})
+
+// Server function middleware
+const observabilityMiddleware = createMiddleware().handler(async ({ next }) => {
+  return yourTool.withTracing('server-function', async () => {
+    try {
+      return await next()
+    } catch (error) {
+      yourTool.captureException(error)
+      throw error
+    }
+  })
+})
+```
+
+## Best Practices
+
+### Development vs Production
+
+```tsx
+// Different strategies per environment
+const observabilityConfig = {
+  development: {
+    logLevel: 'debug',
+    enableTracing: true,
+    enableMetrics: false, // Too noisy in dev
+  },
+  production: {
+    logLevel: 'warn',
+    enableTracing: true,
+    enableMetrics: true,
+    enableAlerting: true,
+  },
+}
+```
+
+### Performance Monitoring Checklist
+
+- [ ] **Server Function Performance**: Track execution times
+- [ ] **Route Loading Times**: Monitor loader performance
+- [ ] **Database Query Performance**: Log slow queries
+- [ ] **External API Latency**: Monitor third-party service calls
+- [ ] **Memory Usage**: Track memory consumption patterns
+- [ ] **Error Rates**: Monitor error frequency and types
+
+### Security Considerations
+
+- Never log sensitive data (passwords, tokens, PII)
+- Use structured logging for better parsing
+- Implement log rotation in production
+- Consider compliance requirements (GDPR, CCPA)
+
+## Future OpenTelemetry Support
+
+Direct OpenTelemetry support is coming to TanStack Start, which will provide automatic instrumentation for server functions, middleware, and route loaders without the manual setup shown above.
+
+## Resources
+
+- **[Sentry Documentation](https://docs.sentry.io/)**
+- **[OpenTelemetry Documentation](https://opentelemetry.io/docs/)** - Industry standard observability
+- **[Working Example](https://github.com/TanStack/router/tree/main/examples/solid/start-basic)** - See observability patterns in action
diff --git a/mintlify/start/framework/solid/guide/path-aliases.md b/mintlify/start/framework/solid/guide/path-aliases.md
new file mode 100644
index 000000000..3c7864d18
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/path-aliases.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/path-aliases.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/reading-writing-file.md b/mintlify/start/framework/solid/guide/reading-writing-file.md
new file mode 100644
index 000000000..5aa48d818
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/reading-writing-file.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/reading-writing-file.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/routing.md b/mintlify/start/framework/solid/guide/routing.md
new file mode 100644
index 000000000..8381eb386
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/routing.md
@@ -0,0 +1,229 @@
+---
+id: routing
+title: Routing
+---
+
+TanStack Start is built on top of TanStack Router, so all of the features of TanStack Router are available to you.
+
+> [!NOTE]
+> We highly recommend reading the [TanStack Router documentation](/router/overview) to learn more about the features and capabilities of TanStack Router. What you learn here is more of a high-level overview of TanStack Router and how it works in Start.
+
+## The Router
+
+The `router.tsx` file is the file that will dictate the behavior of TanStack Router used within Start. It's located in the `src` directory of your project.
+
+```
+src/
+├── router.tsx
+```
+
+Here, you can configure everything from the default [preloading functionality](/router/guide/preloading) to [caching staleness](/router/guide/data-loading).
+
+```tsx
+// src/router.tsx
+import { createRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+
+// You must export a getRouter function that
+// returns a new router instance each time
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+```
+
+## File-Based Routing
+
+Start uses TanStack Router's file-based routing approach to ensure proper code-splitting and advanced type-safety.
+
+You can find your routes in the `src/routes` directory.
+
+```
+src/
+├── routes <-- This is where you put your routes
+│   ├── __root.tsx
+│   ├── index.tsx
+│   ├── about.tsx
+│   ├── posts.tsx
+│   ├── posts/$postId.tsx
+```
+
+## The Root Route
+
+The root route is the top-most route in the entire tree and encapsulates all other routes as children. It's found in the `src/routes/__root.tsx` file and must be named `__root.tsx`.
+
+```
+src/
+├── routes
+│   ├── __root.tsx <-- The root route
+```
+
+- It has no path and is **always** matched
+- Its `component` is **always** rendered
+- This is where you render your document shell, e.g. `<html>`, `<body>`, etc.
+- Because it is **always rendered**, it is the perfect place to construct your application shell and take care of any global logic
+
+```tsx
+// src/routes/__root.tsx
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/solid-router'
+import type { solidNode } from 'solid'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
+  return (
+    <>
+      <HeadContent />
+      {children}
+      <Scripts />
+    </>
+  )
+}
+```
+
+Notice the `Scripts` component at the bottom. This is used to load all of the client-side JavaScript for the application and should always be included for proper functionality.
+
+## The HeadContent Component
+
+The `HeadContent` component is used to render the head, title, meta, link, and head-related script tags of the document.
+
+It should be **rendered in the `<head>` tag of your root route's layout.**
+
+## The Outlet Component
+
+The `Outlet` component is used to render the next potentially matching child route. `<Outlet />` doesn't take any props and can be rendered anywhere within a route's component tree. If there is no matching child route, `<Outlet />` will render `null`.
+
+## The Scripts Component
+
+The `Scripts` component is used to render the body scripts of the document.
+
+It should be **rendered in the `<body>` tag of your root route's layout.**
+
+## Route Tree Generation
+
+You may notice a `routeTree.gen.ts` file in your project.
+
+```
+src/
+├── routeTree.gen.ts <-- The generated route tree file
+```
+
+This file is automatically generated when you run TanStack Start (via `npm run dev` or `npm run start`). This file contains the generated route tree and a handful of TS utilities that make TanStack Start's type-safety extremely fast and fully inferred.
+
+## Nested Routing
+
+TanStack Router uses nested routing to match the URL with the correct component tree to render.
+
+For example, given the following routes:
+
+```
+routes/
+├── __root.tsx <-- Renders the <Root> component
+├── posts.tsx <-- Renders the <Posts> component
+├── posts.$postId.tsx <-- Renders the <Post> component
+```
+
+And the URL: `/posts/123`
+
+The component tree would look like this:
+
+```
+<Root>
+  <Posts>
+    <Post />
+  </Posts>
+</Root>
+```
+
+## Types of Routes
+
+There are a few different types of routes that you can create in your project.
+
+- Index Routes - Matched when the URL is exactly the same as the route's path
+- Dynamic/Wildcard/Splat Routes - Dynamically capture part or all of the URL path into a variable to use in your application
+
+There are also a few different utility route types that you can use to group and organize your routes
+
+- Pathless Layout Routes (Apply layout or logic to a group of routes without nesting them in a path)
+- Non-Nested Routes (Un-nest a route from its parents and render its own component tree)
+- Grouped Routes (Group routes together in a directory simply for organization, without affecting the path hierarchy)
+
+## Route Tree Configuration
+
+The route tree is configured in the `src/routes` directory.
+
+## Creating File Routes
+
+To create a route, create a new file that corresponds to the path of the route you want to create. For example:
+
+| Path             | Filename            | Type           |
+| ---------------- | ------------------- | -------------- |
+| `/`              | `index.tsx`         | Index Route    |
+| `/about`         | `about.tsx`         | Static Route   |
+|                  | `posts.tsx`         | "Layout" Route |
+| `/posts/`        | `posts/index.tsx`   | Index Route    |
+| `/posts/:postId` | `posts/$postId.tsx` | Dynamic Route  |
+| `/rest/*`        | `rest/$.tsx`        | Wildcard Route |
+
+## Defining Routes
+
+To define a route, use the `createFileRoute` function to export the route as the `Route` variable.
+
+For example, to handle the `/posts/:postId` route, you would create a file named `posts/$postId.tsx` here:
+
+```
+src/
+├── routes
+│   ├── posts/$postId.tsx
+```
+
+Then, define the route like this:
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+```
+
+> [!NOTE]
+> The path string passed to `createFileRoute` is **automatically written and managed by the router for you via the TanStack Router Bundler Plugin or Router CLI.** So, as you create new routes, move routes around or rename routes, the path will be updated for you automatically.
+
+## This is just the "start"
+
+This has been just a high-level overview of how to configure routes using TanStack Router. For more detailed information, please refer to the [TanStack Router documentation](/router/routing/file-based-routing).
diff --git a/mintlify/start/framework/solid/guide/selective-ssr.md b/mintlify/start/framework/solid/guide/selective-ssr.md
new file mode 100644
index 000000000..af0ea188b
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/selective-ssr.md
@@ -0,0 +1,222 @@
+---
+id: selective-ssr
+title: Selective Server-Side Rendering (SSR)
+---
+
+## What is Selective SSR?
+
+In TanStack Start, routes matching the initial request are rendered on the server by default. This means `beforeLoad` and `loader` are executed on the server, followed by rendering the route components. The resulting HTML is sent to the client, which hydrates the markup into a fully interactive application.
+
+However, there are cases where you might want to disable SSR for certain routes or all routes, such as:
+
+- When `beforeLoad` or `loader` requires browser-only APIs (e.g., `localStorage`).
+- When the route component depends on browser-only APIs (e.g., `canvas`).
+
+TanStack Start's Selective SSR feature lets you configure:
+
+- Which routes should execute `beforeLoad` or `loader` on the server.
+- Which route components should be rendered on the server.
+
+## How does this compare to SPA mode?
+
+TanStack Start's [SPA mode](/start/framework/solid/guide/spa-mode) completely disables server-side execution of `beforeLoad` and `loader`, as well as server-side rendering of route components. Selective SSR allows you to configure server-side handling on a per-route basis, either statically or dynamically.
+
+## Configuration
+
+You can control how a route is handled during the initial server request using the `ssr` property. If this property is not set, it defaults to `true`. You can change this default using the `defaultSsr` option in `createStart`:
+
+```tsx
+// src/start.ts
+import { createStart } from '@tanstack/solid-start'
+
+export const startInstance = createStart(() => ({
+  // Disable SSR by default
+  defaultSsr: false,
+}))
+```
+
+### `ssr: true`
+
+This is the default behavior unless otherwise configured. On the initial request, it will:
+
+- Run `beforeLoad` on the server and send the resulting context to the client.
+- Run `loader` on the server and send the loader data to the client.
+- Render the component on the server and send the HTML markup to the client.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: true,
+  beforeLoad: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  loader: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  component: () => <div>This component is rendered on the server</div>,
+})
+```
+
+### `ssr: false`
+
+This disables server-side:
+
+- Execution of the route's `beforeLoad` and `loader`.
+- Rendering of the route component.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: false,
+  beforeLoad: () => {
+    console.log('Executes on the client during hydration')
+  },
+  loader: () => {
+    console.log('Executes on the client during hydration')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+### `ssr: 'data-only'`
+
+This hybrid option will:
+
+- Run `beforeLoad` on the server and send the resulting context to the client.
+- Run `loader` on the server and send the loader data to the client.
+- Disable server-side rendering of the route component.
+
+```tsx
+// src/routes/posts/$postId.tsx
+export const Route = createFileRoute('/posts/$postId')({
+  ssr: 'data-only',
+  beforeLoad: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  loader: () => {
+    console.log('Executes on the server during the initial request')
+    console.log('Executes on the client for subsequent navigation')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+### Functional Form
+
+For more flexibility, you can use the functional form of the `ssr` property to decide at runtime whether to SSR a route:
+
+```tsx
+// src/routes/docs/$docType/$docId.tsx
+export const Route = createFileRoute('/docs/$docType/$docId')({
+  validateSearch: z.object({ details: z.boolean().optional() }),
+  ssr: ({ params, search }) => {
+    if (params.status === 'success' && params.value.docType === 'sheet') {
+      return false
+    }
+    if (search.status === 'success' && search.value.details) {
+      return 'data-only'
+    }
+  },
+  beforeLoad: () => {
+    console.log('Executes on the server depending on the result of ssr()')
+  },
+  loader: () => {
+    console.log('Executes on the server depending on the result of ssr()')
+  },
+  component: () => <div>This component is rendered on the client</div>,
+})
+```
+
+The `ssr` function runs only on the server during the initial request and is stripped from the client bundle.
+
+`search` and `params` are passed in after validation as a discriminated union:
+
+```tsx
+params:
+    | { status: 'success'; value: Expand<ResolveAllParamsFromParent<TParentRoute, TParams>> }
+    | { status: 'error'; error: unknown }
+search:
+    | { status: 'success'; value: Expand<ResolveFullSearchSchema<TParentRoute, TSearchValidator>> }
+    | { status: 'error'; error: unknown }
+```
+
+If validation fails, `status` will be `error` and `error` will contain the failure details. Otherwise, `status` will be `success` and `value` will contain the validated data.
+
+### Inheritance
+
+At runtime, a child route inherits the Selective SSR configuration of its parent. However, the inherited value can only be changed to be more restrictive (i.e. `true` to `data-only` or `false` and `data-only` to `false`). For example:
+
+```tsx
+root { ssr: undefined }
+  posts { ssr: false }
+     $postId { ssr: true }
+```
+
+- `root` defaults to `ssr: true`.
+- `posts` explicitly sets `ssr: false`, so neither `beforeLoad` nor `loader` will run on the server, and the route component won't be rendered on the server.
+- `$postId` sets `ssr: true`, but inherits `ssr: false` from its parent. Because the inherited value can only be changed to be more restrictive, `ssr: true` has no effect and the inherited `ssr: false` will remain.
+
+Another example:
+
+```tsx
+root { ssr: undefined }
+  posts { ssr: 'data-only' }
+     $postId { ssr: true }
+       details { ssr: false }
+```
+
+- `root` defaults to `ssr: true`.
+- `posts` sets `ssr: 'data-only'`, so `beforeLoad` and `loader` run on the server, but the route component isn't rendered on the server.
+- `$postId` sets `ssr: true`, but inherits `ssr: 'data-only'` from its parent.
+- `details` sets `ssr: false`, so neither `beforeLoad` nor `loader` will run on the server, and the route component won't be rendered on the server. Here the inherited value is changed to be more restrictive, and therefore, the `ssr: false` will override the inherited value.
+
+## Fallback Rendering
+
+For the first route with `ssr: false` or `ssr: 'data-only'`, the server will render the route's `pendingComponent` as a fallback. If `pendingComponent` isn't configured, the `defaultPendingComponent` will be rendered. If neither is configured, no fallback will be rendered.
+
+On the client during hydration, this fallback will be displayed for at least `minPendingMs` (or `defaultPendingMinMs` if not configured), even if the route doesn't have `beforeLoad` or `loader` defined.
+
+## How to disable SSR of the root route?
+
+You can disable server side rendering of the root route component, however the `<html>` shell still needs to be rendered on the server. This shell is configured via the `shellComponent` property and takes a single property `children`. The `shellComponent` is always SSRed and is wrapping around the root `component`, the root `errorComponent` or the root `notFound` component respectively.
+
+A minimal setup of a root route with disabled SSR for the route component looks like this:
+
+```tsx
+import * as Solid from 'solid-js'
+
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  shellComponent: RootShell,
+  component: RootComponent,
+  errorComponent: () => <div>Error</div>,
+  notFoundComponent: () => <div>Not found</div>,
+  ssr: false, // or `defaultSsr: false` on the router
+})
+
+function RootShell(props) {
+  return (
+    <HeadContent />
+    {props.children}
+    <Scripts />
+  )
+}
+
+function RootComponent() {
+  return (
+    <div>
+      <h1>This component will be rendered on the client</h1>
+      <Outlet />
+    </div>
+  )
+}
+```
diff --git a/mintlify/start/framework/solid/guide/seo.md b/mintlify/start/framework/solid/guide/seo.md
new file mode 100644
index 000000000..abc1a356b
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/seo.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/guide/seo.md
+replace:
+  {
+    '@tanstack/react-router': '@tanstack/solid-router',
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '/framework/react/': '/framework/solid/',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/server-entry-point.md b/mintlify/start/framework/solid/guide/server-entry-point.md
new file mode 100644
index 000000000..80c226eaa
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/server-entry-point.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/guide/server-entry-point.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '@tanstack/react-router': '@tanstack/solid-router',
+    'React': 'SolidJS',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/server-functions.md b/mintlify/start/framework/solid/guide/server-functions.md
new file mode 100644
index 000000000..35d8fb58a
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/server-functions.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/guide/server-functions.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    'React': 'SolidJS',
+    '@tanstack/react-router': '@tanstack/solid-router',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/server-routes.md b/mintlify/start/framework/solid/guide/server-routes.md
new file mode 100644
index 000000000..c1d3ca2fb
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/server-routes.md
@@ -0,0 +1,10 @@
+---
+ref: docs/start/framework/react/guide/server-routes.md
+replace:
+  {
+    '@tanstack/react-router': '@tanstack/solid-router',
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '/framework/react/': '/framework/solid/',
+    'useState': 'createSignal',
+  }
+---
diff --git a/mintlify/start/framework/solid/guide/spa-mode.md b/mintlify/start/framework/solid/guide/spa-mode.md
new file mode 100644
index 000000000..c18e9b4eb
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/spa-mode.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/spa-mode.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/static-prerendering.md b/mintlify/start/framework/solid/guide/static-prerendering.md
new file mode 100644
index 000000000..669bc797e
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/static-prerendering.md
@@ -0,0 +1,158 @@
+---
+id: static-prerendering
+title: Static Prerendering
+---
+
+Static prerendering is the process of generating static HTML files for your application. This can be useful for either improving the performance of your application, as it allows you to serve pre-rendered HTML files to users without having to generate them on the fly or for deploying static sites to platforms that do not support server-side rendering.
+
+## Prerendering
+
+TanStack Start can prerender your application to static HTML files, which can then be served to users without having to generate them on the fly. To prerender your application, you can add the `prerender` option to your `tanstackStart` configuration:
+
+
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
+import viteSolid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [
+    tanstackStart({
+      prerender: {
+        // Enable prerendering
+        enabled: true,
+
+        // Enable if you need pages to be at `/page/index.html` instead of `/page.html`
+        autoSubfolderIndex: true,
+
+        // If disabled, only the root path or the paths defined in the pages config will be prerendered
+        autoStaticPathsDiscovery: true,
+
+        // How many prerender jobs to run at once
+        concurrency: 14,
+
+        // Whether to extract links from the HTML and prerender them also
+        crawlLinks: true,
+
+        // Filter function takes the page object and returns whether it should prerender
+        filter: ({ path }) => !path.startsWith('/do-not-render-me'),
+
+        // Number of times to retry a failed prerender job
+        retryCount: 2,
+
+        // Delay between retries in milliseconds
+        retryDelay: 1000,
+
+        // Maximum number of redirects to follow during prerendering
+        maxRedirects: 5,
+
+        // Fail if an error occurs during prerendering
+        failOnError: true,
+
+        // Callback when page is successfully rendered
+        onSuccess: ({ page }) => {
+          console.log(`Rendered ${page.path}!`)
+        },
+      },
+      // Optional configuration for specific pages
+      // Note: When autoStaticPathsDiscovery is enabled (default), discovered static
+      // routes will be merged with the pages specified below
+      pages: [
+        {
+          path: '/my-page',
+          prerender: { enabled: true, outputPath: '/my-page/index.html' },
+        },
+      ],
+    }),
+    viteSolid({ ssr: true }),
+  ],
+})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { tanstackStart } from '@tanstack/solid-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+    tanstackStart({
+      prerender: {
+        // Enable prerendering
+        enabled: true,
+
+        // Enable if you need pages to be at `/page/index.html` instead of `/page.html`
+        autoSubfolderIndex: true,
+
+        // If disabled, only the root path or the paths defined in the pages config will be prerendered
+        autoStaticPathsDiscovery: true,
+
+        // How many prerender jobs to run at once
+        concurrency: 14,
+
+        // Whether to extract links from the HTML and prerender them also
+        crawlLinks: true,
+
+        // Filter function takes the page object and returns whether it should prerender
+        filter: ({ path }) => !path.startsWith('/do-not-render-me'),
+
+        // Number of times to retry a failed prerender job
+        retryCount: 2,
+
+        // Delay between retries in milliseconds
+        retryDelay: 1000,
+
+        // Maximum number of redirects to follow during prerendering
+        maxRedirects: 5,
+
+        // Fail if an error occurs during prerendering
+        failOnError: true,
+
+        // Callback when page is successfully rendered
+        onSuccess: ({ page }) => {
+          console.log(`Rendered ${page.path}!`)
+        },
+      },
+      // Optional configuration for specific pages
+      // Note: When autoStaticPathsDiscovery is enabled (default), discovered static
+      // routes will be merged with the pages specified below
+      pages: [
+        {
+          path: '/my-page',
+          prerender: { enabled: true, outputPath: '/my-page/index.html' },
+        },
+      ],
+    }),
+  ],
+})
+```
+
+
+
+## Automatic Static Route Discovery
+
+All static paths will be automatically discovered and seamlessly merged with the specified `pages` config
+
+Routes are excluded from automatic discovery in the following cases:
+
+- Routes with path parameters (e.g., `/users/$userId`) since they require specific parameter values
+- Layout routes (prefixed with `_`) since they don't render standalone pages
+- Routes without components (e.g., API routes)
+
+Note: Dynamic routes can still be prerendered if they are linked from other pages when `crawlLinks` is enabled.
+
+## Crawling Links
+
+When `crawlLinks` is enabled (default: `true`), TanStack Start will extract links from prerendered pages and prerender those linked pages as well.
+
+For example, if `/` contains a link to `/posts`, then `/posts` will also be automatically prerendered.
diff --git a/mintlify/start/framework/solid/guide/static-server-functions.md b/mintlify/start/framework/solid/guide/static-server-functions.md
new file mode 100644
index 000000000..c9207e898
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/static-server-functions.md
@@ -0,0 +1,5 @@
+---
+ref: docs/start/framework/react/guide/static-server-functions.md
+replace:
+  { '@tanstack/react-start': '@tanstack/solid-start', 'React': 'SolidJS' }
+---
diff --git a/mintlify/start/framework/solid/guide/tailwind-integration.md b/mintlify/start/framework/solid/guide/tailwind-integration.md
new file mode 100644
index 000000000..adb733a50
--- /dev/null
+++ b/mintlify/start/framework/solid/guide/tailwind-integration.md
@@ -0,0 +1,14 @@
+---
+ref: docs/start/framework/react/guide/tailwind-integration.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '@tanstack/react-router': '@tanstack/solid-router',
+    '@vitejs/plugin-react': 'vite-plugin-solid',
+    'viteReact()': 'viteSolid({ ssr: true })',
+    'viteReact': 'viteSolid',
+    "import { pluginReact } from '@rsbuild/plugin-react'": "import { pluginBabel } from '@rsbuild/plugin-babel'\nimport { pluginSolid } from '@rsbuild/plugin-solid'",
+    'pluginReact(),': "pluginBabel({\n      include: /\\.(?:jsx|tsx)$/,
+      }),\n    pluginSolid(),",
+  }
+---
diff --git a/mintlify/start/framework/solid/overview.md b/mintlify/start/framework/solid/overview.md
new file mode 100644
index 000000000..76b10d013
--- /dev/null
+++ b/mintlify/start/framework/solid/overview.md
@@ -0,0 +1,9 @@
+---
+ref: docs/start/framework/react/overview.md
+replace:
+  {
+    '@tanstack/react-start': '@tanstack/solid-start',
+    'React': 'SolidJS',
+    'react-router': 'solid-router',
+  }
+---
diff --git a/mintlify/start/framework/solid/server-functions.md b/mintlify/start/framework/solid/server-functions.md
new file mode 100644
index 000000000..264ae6d9c
--- /dev/null
+++ b/mintlify/start/framework/solid/server-functions.md
@@ -0,0 +1,9 @@
+---
+title: "Server Functions"
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](https://tanstack.com/start/latest/docs/framework/solid/server-functions)
+- [Browse the pinned upstream repository](https://github.com/TanStack/router/tree/a3e24c35a58d9ac149a05d6321f68aa5d541b6b4)
diff --git a/mintlify/start/framework/solid/tutorial/fetching-external-api.md b/mintlify/start/framework/solid/tutorial/fetching-external-api.md
new file mode 100644
index 000000000..ad776ae17
--- /dev/null
+++ b/mintlify/start/framework/solid/tutorial/fetching-external-api.md
@@ -0,0 +1,12 @@
+---
+ref: docs/start/framework/react/tutorial/fetching-external-api.md
+replace:
+  {
+    '@tanstack/react-router': '@tanstack/solid-router',
+    '@tanstack/react-start': '@tanstack/solid-start',
+    '/framework/react/': '/framework/solid/',
+    'className': 'class',
+    'React': 'Solid',
+    'react': 'solid',
+  }
+---
diff --git a/mintlify/start/framework/solid/tutorial/reading-writing-file.md b/mintlify/start/framework/solid/tutorial/reading-writing-file.md
new file mode 100644
index 000000000..cb9d288c6
--- /dev/null
+++ b/mintlify/start/framework/solid/tutorial/reading-writing-file.md
@@ -0,0 +1,586 @@
+---
+id: reading-and-writing-file
+title: Building a Full Stack DevJokes App with TanStack Start
+---
+
+This tutorial will guide you through building a complete full-stack application using TanStack Start. You'll create a DevJokes app where users can view and add developer-themed jokes, demonstrating key concepts of TanStack Start including server functions, file-based data storage, and Solid components.
+
+Here's a demo of the app in action:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/zd0rtKbtlgU?si=7W1Peoo0W0WvZmAd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/devjokes).
+
+## What You'll Learn
+
+1. Setting up a TanStack Start project
+2. Implementing server functions
+3. Reading and writing data to files
+4. Building a complete UI with Solid components
+5. Using TanStack Router for data fetching and navigation
+
+## Prerequisites
+
+- Basic knowledge of Solid and TypeScript.
+- Node.js and `pnpm` installed on your machine
+
+## Nice to know
+
+- [Server Side Rendering (SSR)](/router/guide/ssr)
+- [TanStack Router concepts](/router/routing/routing-concepts)
+- [Solid Query concepts](/query/framework/solid/overview)
+
+## Setting up a TanStack Start Project
+
+First, let's create a new TanStack Start project:
+
+```bash
+pnpx @tanstack/cli@latest create --framework solid devjokes
+cd devjokes
+```
+
+When this script runs, it will ask you a few setup questions. You can either pick choices that work for you or just press enter to accept the defaults.
+
+Optionally, you can pass in a `--add-on` flag to get options such as Shadcn, Clerk, Convex, TanStack Query, etc.
+
+Once setup is complete, install dependencies and start the development server:
+
+```bash
+pnpm i
+pnpm dev
+```
+
+For this project, we'll need the `uuid` package:
+
+```bash
+# Install uuid for generating unique IDs
+pnpm add uuid
+```
+
+## Understanding the project structure
+
+At this point, the project structure should look like this -
+
+```
+/devjokes
+├── src/
+│   ├── routes/
+│   │   ├── demo/                         # Demo routes
+│   │   ├── __root.tsx                    # Root layout
+│   │   └── index.tsx                     # Home page
+│   ├── components/                       # Solid components
+│   ├── data/                             # Data files
+│   ├── router.tsx                        # Router configuration
+│   ├── routeTree.gen.ts                  # Generated route tree
+│   └── styles.css                        # Global styles
+├── public/                               # Static assets
+├── vite.config.ts or rsbuild.config.ts   # TanStack Start configuration
+├── package.json                          # Project dependencies
+└── tsconfig.json                         # TypeScript configuration
+```
+
+This structure might seem overwhelming at first, but here are the key files you need to focus on:
+
+1. `src/router.tsx` - Sets up routing for your application
+2. `src/routes/__root.tsx` - The root layout component where you can add global styles and components
+3. `src/routes/index.tsx` - Your home page
+
+Once your project is set up, you can access your app at `localhost:3000`. You should see the default TanStack Start welcome page.
+
+At this point, your app will look like this:
+
+![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
+
+## Step 1: Reading Data From a File
+
+Let's start by creating a file-based storage system for our jokes.
+
+### Step 1.1: Create a JSON File with Jokes
+
+Let's set up a list of jokes that we can use to render on the page. Create a `jokes.json` file within `src/data`:
+
+```bash
+touch src/data/jokes.json
+```
+
+Now, let's add some sample jokes to this file:
+
+```json
+[
+  {
+    "id": "1",
+    "question": "Why don't keyboards sleep?",
+    "answer": "Because they have two shifts"
+  },
+  {
+    "id": "2",
+    "question": "Are you a RESTful API?",
+    "answer": "Because you GET my attention, PUT some love, POST the cutest smile, and DELETE my bad day"
+  },
+  {
+    "id": "3",
+    "question": "I used to know a joke about Java",
+    "answer": "But I ran out of memory."
+  },
+  {
+    "id": "4",
+    "question": "Why do Front-End Developers eat lunch alone?",
+    "answer": "Because, they don't know how to join tables."
+  },
+  {
+    "id": "5",
+    "question": "I am declaring a war.",
+    "answer": "var war;"
+  }
+]
+```
+
+### Step 1.2: Create Types for Our Data
+
+Let's create a file to define our data types. Create a new file at `src/types/index.ts`:
+
+```typescript
+// src/types/index.ts
+export interface Joke {
+  id: string
+  question: string
+  answer: string
+}
+
+export type JokesData = Joke[]
+```
+
+### Step 1.3: Create Server Functions to Read the File
+
+Let's create a new file `src/serverActions/jokesActions.ts` to create a server function to perform a read-write operation. We will be creating a server function using [`createServerFn`](/start/framework/solid/server-functions).
+
+```tsx
+// src/serverActions/jokesActions.ts
+import { createServerFn } from '@tanstack/solid-start'
+import * as fs from 'node:fs'
+import type { JokesData } from '../types'
+
+const JOKES_FILE = 'src/data/jokes.json'
+
+export const getJokes = createServerFn({ method: 'GET' }).handler(async () => {
+  const jokes = await fs.promises.readFile(JOKES_FILE, 'utf-8')
+  return JSON.parse(jokes) as JokesData
+})
+```
+
+In this code, we are using `createServerFn` to create a server function that reads the jokes from the JSON file. The `handler` function is where we are using the `fs` module to read the file.
+
+### Step 1.4: Consume Server Function on the Client Side
+
+Now to consume this server function, we can simply call it in our code using TanStack Router which already comes with TanStack Start!
+
+Now let's create a new component `JokesList` to render the jokes on the page with a little Tailwind styling sprinkle.
+
+```tsx
+// src/components/JokesList.tsx
+import { Joke } from '../types'
+
+interface JokesListProps {
+  jokes: Joke[]
+}
+
+export function JokesList({ jokes }: JokesListProps) {
+  if (!jokes || jokes.length === 0) {
+    return <p class="text-gray-500 italic">No jokes found. Add some!</p>
+  }
+
+  return (
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">Jokes Collection</h2>
+      {jokes.map((joke) => (
+        <div
+          key={joke.id}
+          class="bg-white p-4 rounded-lg shadow-md border border-gray-200"
+        >
+          <p class="font-bold text-lg mb-2">{joke.question}</p>
+          <p class="text-gray-700">{joke.answer}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+Now let's call our server function inside `index.tsx` using TanStack Router which already comes with TanStack Start!
+
+```jsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+import { getJokes } from './serverActions/jokesActions'
+import { JokesList } from './JokesList'
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    // Load jokes data when the route is accessed
+    return getJokes()
+  },
+  component: App,
+})
+
+const App = () => {
+  const jokes = Route.useLoaderData() || []
+
+  return (
+    <div class="max-w-2xl mx-auto py-12 px-4 space-y-6">
+      <h1 class="text-4xl font-bold text-center mb-10">DevJokes</h1>
+      <JokesList jokes={jokes} />
+    </div>
+  )
+}
+```
+
+When the page loads, `jokes` will have data from the `jokes.json` file already!
+
+With a little Tailwind styling, the app should look like this:
+
+![DevJoke App with 5 DevJokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-1.png)
+
+## Step 2: Writing Data to a File
+
+So far, we have been able to read from the file successfully! We can use the same approach to write to the `jokes.json` file using `createServerFunction`.
+
+### Step 2.1: Create Server Function to Write to the File
+
+It's time to modify the `jokes.json` file so that we can add new jokes to it. Let's create another server function but this time with a `POST` method to write to the same file.
+
+```tsx
+// src/serverActions/jokesActions.ts
+import { createServerFn } from '@tanstack/solid-start'
+import * as fs from 'node:fs'
+import { v4 as uuidv4 } from 'uuid' // Add this import
+import type { Joke, JokesData } from '../types'
+
+const JOKES_FILE = 'src/data/jokes.json'
+
+export const getJokes = createServerFn({ method: 'GET' }).handler(async () => {
+  const jokes = await fs.promises.readFile(JOKES_FILE, 'utf-8')
+  return JSON.parse(jokes) as JokesData
+})
+
+// Add this new server function
+export const addJoke = createServerFn({ method: 'POST' })
+  .validator((data: { question: string; answer: string }) => {
+    // Validate input data
+    if (!data.question || !data.question.trim()) {
+      throw new Error('Joke question is required')
+    }
+    if (!data.answer || !data.answer.trim()) {
+      throw new Error('Joke answer is required')
+    }
+    return data
+  })
+  .handler(async ({ data }) => {
+    try {
+      // Read the existing jokes from the file
+      const jokesData = await getJokes()
+
+      // Create a new joke with a unique ID
+      const newJoke: Joke = {
+        id: uuidv4(),
+        question: data.question,
+        answer: data.answer,
+      }
+
+      // Add the new joke to the list
+      const updatedJokes = [...jokesData, newJoke]
+
+      // Write the updated jokes back to the file
+      await fs.promises.writeFile(
+        JOKES_FILE,
+        JSON.stringify(updatedJokes, null, 2),
+        'utf-8',
+      )
+
+      return newJoke
+    } catch (error) {
+      console.error('Failed to add joke:', error)
+      throw new Error('Failed to add joke')
+    }
+  })
+```
+
+In this code:
+
+- We are using `createServerFn` to create server functions that run on the server but can be called from the client. This server function is used to write data to the file.
+- We are going to first use `validator` to validate the input data. This is a good practice to ensure that the data we are receiving is in the correct format.
+- We are going to perform the actual write operation in the `handler` function.
+- `getJokes` reads the jokes from our JSON file.
+- `addJoke` validates the input data and adds a new joke to our file.
+- We're using `uuidv4()` to generate unique IDs for our jokes.
+
+### Step 2.2: Adding a Form to Add Jokes to our JSON File
+
+Now, let's modify our home page to display jokes and provide a form to add new ones. Let's create a new component called `JokeForm.jsx` and add the following form to it:
+
+```tsx
+// src/components/JokeForm.tsx
+import { createSignal } from 'solid'
+import { useRouter } from '@tanstack/solid-router'
+import { addJoke } from '../serverActions/jokesActions'
+
+export function JokeForm() {
+  const router = useRouter()
+  const [question, setQuestion] = createSignal('')
+  const [answer, setAnswer] = createSignal('')
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+
+  return (
+    <form onSubmit={handleSubmit} class="mb-8">
+      {error && (
+        <div class="bg-red-100 text-red-700 p-2 rounded mb-4">{error}</div>
+      )}
+
+      <div class="flex flex-col sm:flex-row gap-4 mb-8">
+        <input
+          id="question"
+          type="text"
+          placeholder="Enter joke question"
+          class="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1"
+          value={question()}
+          onChange={(e) => setQuestion(e.target.value)}
+          required
+        />
+
+        <input
+          id="answer"
+          type="text"
+          placeholder="Enter joke answer"
+          class="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1 py-4"
+          value={answer()}
+          onChange={(e) => setAnswer(e.target.value)}
+          required
+        />
+
+        <button
+          type="submit"
+          disabled={isSubmitting()}
+          class="bg-blue-500 hover:bg-blue-600 text-white font-medium rounded disabled:opacity-50 px-4"
+        >
+          {isSubmitting() ? 'Adding...' : 'Add Joke'}
+        </button>
+      </div>
+    </form>
+  )
+}
+```
+
+### Step 2.3: Wire Up the Form to the Server Function
+
+Now, let's wire the form up to our `addJoke` server function in the `handleSubmit` function. Calling a server action is simple! It's just a function call.
+
+```tsx
+//JokeForm.tsx
+import { createSignal } from 'solid'
+import { useRouter } from '@tanstack/solid-router'
+import { addJoke } from '../serverActions/jokesActions'
+
+export function JokeForm() {
+  const router = useRouter()
+  const [question, setQuestion] = createSignal('')
+  const [answer, setAnswer] = createSignal('')
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+
+  const handleSubmit = async () => {
+    if (!question() || !answer() || isSubmitting()) return
+    try {
+      setIsSubmitting(true)
+      await addJoke({
+        data: { question(), answer() },
+      })
+
+      // Clear form
+      setQuestion('')
+      setAnswer('')
+
+      // Refresh data
+      router.invalidate()
+    } catch (error) {
+      console.error('Failed to add joke:', error)
+      setError('Failed to add joke')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} class="mb-8">
+      {error && (
+        <div class="bg-red-100 text-red-700 p-2 rounded mb-4">{error}</div>
+      )}
+      <div class="flex flex-col sm:flex-row gap-4 mb-8">
+        <input
+          id="question"
+          type="text"
+          placeholder="Enter joke question"
+          class="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1"
+          value={question()}
+          onChange={(e) => setQuestion(e.target.value)}
+          required
+        />
+        <input
+          id="answer"
+          type="text"
+          placeholder="Enter joke answer"
+          class="w-full p-2 border rounded focus:ring focus:ring-blue-300 flex-1 py-4"
+          value={answer()}
+          onChange={(e) => setAnswer(e.target.value)}
+          required
+        />
+        <button
+          type="submit"
+          disabled={isSubmitting()}
+          class="bg-blue-500 hover:bg-blue-600 text-white font-medium rounded disabled:opacity-50 px-4"
+        >
+          {isSubmitting() ? 'Adding...' : 'Add Joke'}
+        </button>
+      </div>
+    </form>
+  )
+}
+```
+
+With this, our UI should look like this:
+![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.png)
+
+## Understanding How It All Works Together
+
+Let's break down how the different parts of our application work together:
+
+1. **Server Functions**: These run on the server and handle data operations
+   - `getJokes`: Reads the jokes from our JSON file
+   - `addJoke`: Adds a new joke to our JSON file
+
+2. **TanStack Router**: Handles routing and data loading
+   - The loader function fetches jokes data when the route is accessed
+   - `useLoaderData` makes this data available in our component
+   - `router.invalidate()` refreshes the data when we add a new joke
+
+3. **Solid Components**: Build the UI of our application
+   - `JokesList`: Displays the list of jokes
+   - `JokeForm`: Provides a form for adding new jokes
+
+4. **File-Based Storage**: Stores our jokes in a JSON file
+   - Reading and writing are handled by Node.js `fs` module
+   - Data is persisted between server restarts
+
+## How Data Flows Through the Application
+
+### Data Flow
+
+```mermaid
+sequenceDiagram
+autonumber
+actor User
+participant UI as Browser (HomePage + Form)
+participant Loader as Route Loader (loader)
+participant Server
+participant Store as jokes.json
+
+%% Visiting the Home Page
+User ->> UI: Visit /
+UI ->> Loader: loader() calls getJokes()
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: jokes data
+Server -->> Loader: jokes[]
+Loader -->> UI: useLoaderData() → jokes[]
+
+%% Adding a New Joke
+User ->> UI: Fill form and submit
+UI ->> Server: handleSubmit → addJoke(newJoke)
+Server ->> Store: Read jokes.json
+Server ->> Store: Write updated jokes.json
+Server -->> UI: addJoke() resolved
+UI ->> Loader: router.invalidate() (re-run loader)
+Loader ->> Server: getJokes()
+Server ->> Store: Read jokes.json
+Store -->> Server: updated jokes[]
+Server -->> Loader: updated jokes[]
+Loader -->> UI: useLoaderData() → updated jokes[]
+```
+
+When a user visits the home page:
+
+1. The `loader` function in the route calls `getJokes()` server function
+2. The server reads `jokes.json` and returns the jokes data
+3. This data is passed to the `HomePage` component through `useLoaderData()`
+4. The `HomePage` component passes the data to the `JokesList` component
+
+When a user adds a new joke:
+
+1. They fill out the form and submit it
+2. The `handleSubmit` function calls the `addJoke()` server function
+3. The server reads the current jokes, adds the new joke, and writes the updated data back to `jokes.json`
+4. After the operation completes, we call `router.invalidate()` to refresh the data
+5. This triggers the loader again, fetching the updated jokes
+6. The UI updates to show the new joke in the list
+
+Here's a demo of the app in action:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/zd0rtKbtlgU?si=7W1Peoo0W0WvZmAd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Common Issues and Debugging
+
+Here are some common issues you might encounter when building your TanStack Start application and how to resolve them:
+
+### Server Functions Not Working
+
+If your server functions aren't working as expected:
+
+1. Check that you're using the correct HTTP method (`GET`, `POST`, etc.)
+2. Ensure file paths are correct and accessible to the server
+3. Check the server console for error messages
+4. Make sure you're not using client-only APIs in server functions
+
+### Route Data Not Loading
+
+If route data isn't loading properly:
+
+1. Verify that your loader function is properly implemented
+2. Check that you're using `useLoaderData()` correctly
+3. Look for errors in the browser console
+4. Make sure your server function is working correctly
+
+### Form Submission Issues
+
+If form submissions aren't working:
+
+1. Check for validation errors in your server function
+2. Verify that form event prevention (`e.preventDefault()`) is working
+3. Make sure state updates are happening correctly
+4. Look for network errors in the browser's Developer Tools
+
+### File Reading/Writing Issues
+
+When working with file-based storage:
+
+1. Ensure file paths are correct
+2. Check file permissions
+3. Make sure you're handling async operations properly with `await`
+4. Add proper error handling for file operations
+
+## Conclusion
+
+Congratulations! You've built a full-stack DevJokes app using TanStack Start. In this tutorial, you've learned:
+
+- How to set up a TanStack Start project
+- How to implement server functions for data operations
+- How to read and write data to files
+- How to build Solid components for your UI
+- How to use TanStack Router for routing and data fetching
+
+This simple application demonstrates the power of TanStack Start for building full-stack applications with a minimal amount of code. You can extend this app by adding features like:
+
+- Joke categories
+- Ability to edit and delete jokes
+- User authentication
+- Voting for favorite jokes
+
+The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/devjokes).
diff --git a/mintlify/start/index.mdx b/mintlify/start/index.mdx
new file mode 100644
index 000000000..d1c8f8216
--- /dev/null
+++ b/mintlify/start/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Start"
+description: "Full-stack framework powered by TanStack Router. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Full-stack framework powered by TanStack Router.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="https://tanstack.com/start">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/start">
+    Visit the canonical TanStack Start website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/router">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/store/framework/angular/examples/atoms.md b/mintlify/store/framework/angular/examples/atoms.md
new file mode 100644
index 000000000..e2678109a
--- /dev/null
+++ b/mintlify/store/framework/angular/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/angular/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/examples/simple.md b/mintlify/store/framework/angular/examples/simple.md
new file mode 100644
index 000000000..5ceaf476b
--- /dev/null
+++ b/mintlify/store/framework/angular/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/angular/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/examples/store-actions.md b/mintlify/store/framework/angular/examples/store-actions.md
new file mode 100644
index 000000000..312310366
--- /dev/null
+++ b/mintlify/store/framework/angular/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/angular/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/examples/store-context.md b/mintlify/store/framework/angular/examples/store-context.md
new file mode 100644
index 000000000..3308d63e8
--- /dev/null
+++ b/mintlify/store/framework/angular/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/angular/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/examples/stores.md b/mintlify/store/framework/angular/examples/stores.md
new file mode 100644
index 000000000..e3acdf9da
--- /dev/null
+++ b/mintlify/store/framework/angular/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/angular/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/quick-start.md b/mintlify/store/framework/angular/quick-start.md
new file mode 100644
index 000000000..89e4847cc
--- /dev/null
+++ b/mintlify/store/framework/angular/quick-start.md
@@ -0,0 +1,90 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic angular app example to get started with the TanStack angular-store.
+
+**app.component.ts**
+```angular-ts
+import { Component } from '@angular/core'
+import { DisplayComponent } from './display.component'
+import { IncrementComponent } from './increment.component'
+
+@Component({
+selector: 'app-root',
+imports: [DisplayComponent, IncrementComponent],
+template: `
+<h1>How many of your friends like cats or dogs?</h1>
+<p>
+  Press one of the buttons to add a counter of how many of your friends like
+  cats or dogs
+</p>
+<app-increment animal="dogs" />
+<app-display animal="dogs" />
+<app-increment animal="cats" />
+<app-display animal="cats" />
+`,
+})
+export class AppComponent {}
+
+```
+
+**store.ts**
+```typescript
+import { createStore } from '@tanstack/angular-store';
+
+// You can instantiate the store outside of Angular components too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+});
+
+export function updateState(animal: 'dogs' | 'cats') {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+}
+```
+
+**display.component.ts**
+```angular-ts
+import { injectSelector } from '@tanstack/angular-store';
+import { store } from './store';
+
+@Component({
+    selector: 'app-display',
+    template: `
+        <!-- This will only re-render when animal changes. If an unrelated store property changes, it won't re-render -->
+        <div>{{ animal() }}: {{ count() }}</div>
+    `,
+    standalone: true
+})
+export class Display {
+    animal = input.required<string>();
+    count = injectSelector(store, (state) => state[this.animal()]);
+}
+```
+
+**increment.component.ts**
+```angular-ts
+import { injectStore } from '@tanstack/angular-store';
+import { store, updateState } from './store';
+
+@Component({
+    selector: 'app-increment',
+    template: `
+        <button (click)="updateState(animal())">My Friend Likes {{ animal() }}</button>
+    `,
+    standalone: true
+})
+export class Increment {
+    animal = input.required<string>();
+    updateState = updateState;
+}
+```
+
+`injectStore` remains available as a deprecated alias to `injectSelector`.
diff --git a/mintlify/store/framework/angular/reference/functions/createStoreContext.md b/mintlify/store/framework/angular/reference/functions/createStoreContext.md
new file mode 100644
index 000000000..80836b43c
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/createStoreContext.md
@@ -0,0 +1,94 @@
+---
+id: createStoreContext
+title: createStoreContext
+---
+
+# Function: createStoreContext()
+
+```ts
+function createStoreContext<TValue>(): object;
+```
+
+Defined in: [packages/angular-store/src/createStoreContext.ts:48](https://github.com/TanStack/store/blob/main/packages/angular-store/src/createStoreContext.ts#L48)
+
+Creates a typed Angular dependency-injection context for sharing a bundle of
+atoms and stores with a component subtree.
+
+The returned `provideStoreContext` function accepts a factory that creates the
+context value. Using a factory (rather than a static value) ensures each
+component instance — and each SSR request — receives its own state, avoiding
+cross-request pollution.
+
+Consumers call `injectStoreContext()` inside an injection context (typically a
+constructor or field initializer) to retrieve the contextual atoms and stores,
+then compose them with existing hooks like [injectSelector](/store/framework/angular/reference/functions/injectSelector),
+[injectSelector](/store/framework/angular/reference/functions/injectSelector), and [injectAtom](/store/framework/angular/reference/functions/injectAtom).
+
+## Type Parameters
+
+### TValue
+
+`TValue` *extends* `object`
+
+## Returns
+
+`object`
+
+### injectStoreContext()
+
+```ts
+injectStoreContext: () => TValue;
+```
+
+#### Returns
+
+`TValue`
+
+### provideStoreContext()
+
+```ts
+provideStoreContext: (factory) => Provider;
+```
+
+#### Parameters
+
+##### factory
+
+() => `TValue`
+
+#### Returns
+
+`Provider`
+
+## Example
+
+```ts
+const { provideStoreContext, injectStoreContext } = createStoreContext<{
+  countAtom: Atom<number>
+  totalsStore: Store<{ count: number }>
+}>()
+
+// Parent component provides the context
+@Component({
+  providers: [
+    provideStoreContext(() => ({
+      countAtom: createAtom(0),
+      totalsStore: new Store({ count: 0 }),
+    })),
+  ],
+  template: `<child-cmp />`,
+})
+class ParentComponent {}
+
+// Child component consumes the context
+@Component({ template: `{{ count() }}` })
+class ChildComponent {
+  private ctx = injectStoreContext()
+  count = injectSelector(this.ctx.countAtom)
+}
+```
+
+## Throws
+
+When `injectStoreContext()` is called without a matching
+  `provideStoreContext()` in a parent component's providers.
diff --git a/mintlify/store/framework/angular/reference/functions/injectAtom.md b/mintlify/store/framework/angular/reference/functions/injectAtom.md
new file mode 100644
index 000000000..b57f7cc69
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectAtom.md
@@ -0,0 +1,48 @@
+---
+id: injectAtom
+title: injectAtom
+---
+
+# Function: injectAtom()
+
+```ts
+function injectAtom<TValue>(atom, options?): WritableAtomSignal<TValue>;
+```
+
+Defined in: [packages/angular-store/src/injectAtom.ts:44](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L44)
+
+Returns a [WritableAtomSignal](/store/framework/angular/reference/interfaces/WritableAtomSignal) that reads the current atom value when
+called and exposes a `.set` method for updates.
+
+Use this when a component needs to both read and update the same writable
+atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`InjectSelectorOptions`](/store/framework/angular/reference/interfaces/InjectSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+[`WritableAtomSignal`](/store/framework/angular/reference/interfaces/WritableAtomSignal)\&lt;`TValue`\>
+
+## Example
+
+```ts
+readonly count = injectAtom(countAtom)
+
+increment() {
+  this.count.set((prev) => prev + 1)
+}
+```
diff --git a/mintlify/store/framework/angular/reference/functions/injectSelector.md b/mintlify/store/framework/angular/reference/functions/injectSelector.md
new file mode 100644
index 000000000..dfc1e40b8
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectSelector.md
@@ -0,0 +1,58 @@
+---
+id: injectSelector
+title: injectSelector
+---
+
+# Function: injectSelector()
+
+```ts
+function injectSelector<TState, TSelected>(
+   source, 
+   selector, 
+options?): Signal<TSelected>;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:93](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L93)
+
+Selects a slice of state from an atom or store and returns it as an Angular
+signal.
+
+This is the primary Angular read hook for TanStack Store.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### source
+
+[`SelectionSource`](/store/framework/angular/reference/type-aliases/SelectionSource)\&lt;`TState`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`InjectSelectorOptions`](/store/framework/angular/reference/interfaces/InjectSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+`Signal`\&lt;`TSelected`\>
+
+## Examples
+
+```ts
+readonly count = injectSelector(counterStore, (state) => state.count)
+```
+
+```ts
+readonly doubled = injectSelector(countAtom, (value) => value * 2)
+```
diff --git a/mintlify/store/framework/angular/reference/functions/injectSetValue.md b/mintlify/store/framework/angular/reference/functions/injectSetValue.md
new file mode 100644
index 000000000..ec8d0d73f
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "injectSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/reference/functions/injectSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/reference/functions/injectStore-1.md b/mintlify/store/framework/angular/reference/functions/injectStore-1.md
new file mode 100644
index 000000000..9cfa07f17
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectStore-1.md
@@ -0,0 +1,55 @@
+---
+id: injectStore
+title: injectStore
+---
+
+# ~~Function: injectStore()~~
+
+```ts
+function injectStore<TState, TSelected>(
+   store, 
+   selector?, 
+options?): Signal<TSelected>;
+```
+
+Defined in: [packages/angular-store/src/injectStore.ts:20](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectStore.ts#L20)
+
+Deprecated alias for [injectSelector](/store/framework/angular/reference/functions/injectSelector).
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+[`SelectionSource`](/store/framework/angular/reference/type-aliases/SelectionSource)\&lt;`TState`\>
+
+### selector?
+
+(`state`) => `TSelected`
+
+### options?
+
+`CompatibilityInjectStoreOptions`\&lt;`TSelected`\>
+
+## Returns
+
+`Signal`\&lt;`TSelected`\>
+
+## Example
+
+```ts
+readonly count = injectStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `injectSelector` instead.
diff --git a/mintlify/store/framework/angular/reference/functions/injectStore.md b/mintlify/store/framework/angular/reference/functions/injectStore.md
new file mode 100644
index 000000000..cd17ffc7a
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectStore.md
@@ -0,0 +1,65 @@
+---
+id: _injectStore
+title: _injectStore
+---
+
+# Function: \_injectStore()
+
+```ts
+function _injectStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [Signal<TSelected>, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [packages/angular-store/src/\_injectStore.ts:24](https://github.com/TanStack/store/blob/main/packages/angular-store/src/_injectStore.ts#L24)
+
+Experimental combined read+write injection function for stores, mirroring
+injectAtom's pattern.
+
+Returns `[signal, actions]` when the store has an actions factory, or
+`[signal, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`InjectSelectorOptions`](/store/framework/angular/reference/interfaces/InjectSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[`Signal`\&lt;`TSelected`\>, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```ts
+// Store with actions
+readonly result = _injectStore(petStore, (s) => s.cats)
+// result[0] is Signal<number>, result[1] is actions
+
+// Store without actions
+readonly result = _injectStore(plainStore, (s) => s)
+// result[0] is Signal<number>, result[1] is setState
+```
diff --git a/mintlify/store/framework/angular/reference/functions/injectStoreActions.md b/mintlify/store/framework/angular/reference/functions/injectStoreActions.md
new file mode 100644
index 000000000..d106dd5b2
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/functions/injectStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "injectStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/angular/reference/functions/injectStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/angular/reference/index.md b/mintlify/store/framework/angular/reference/index.md
new file mode 100644
index 000000000..e6039bcd5
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/index.md
@@ -0,0 +1,23 @@
+---
+id: "@tanstack/angular-store"
+title: "@tanstack/angular-store"
+---
+
+# @tanstack/angular-store
+
+## Interfaces
+
+- [InjectSelectorOptions](/store/framework/angular/reference/interfaces/InjectSelectorOptions)
+- [WritableAtomSignal](/store/framework/angular/reference/interfaces/WritableAtomSignal)
+
+## Type Aliases
+
+- [SelectionSource](/store/framework/angular/reference/type-aliases/SelectionSource)
+
+## Functions
+
+- [\_injectStore](/store/framework/angular/reference/functions/injectStore)
+- [createStoreContext](/store/framework/angular/reference/functions/createStoreContext)
+- [injectAtom](/store/framework/angular/reference/functions/injectAtom)
+- [injectSelector](/store/framework/angular/reference/functions/injectSelector)
+- [~~injectStore~~](/store/framework/angular/reference/functions/injectStore-1)
diff --git a/mintlify/store/framework/angular/reference/interfaces/InjectSelectorOptions.md b/mintlify/store/framework/angular/reference/interfaces/InjectSelectorOptions.md
new file mode 100644
index 000000000..63202b8c0
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/interfaces/InjectSelectorOptions.md
@@ -0,0 +1,70 @@
+---
+id: InjectSelectorOptions
+title: InjectSelectorOptions
+---
+
+# Interface: InjectSelectorOptions\&lt;TSelected\>
+
+Defined in: [packages/angular-store/src/injectSelector.ts:11](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L11)
+
+## Extends
+
+- `Omit`\&lt;`CreateSignalOptions`\&lt;`TSelected`\>, `"equal"`\>
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:15](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L15)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
+
+***
+
+### debugName?
+
+```ts
+optional debugName: string;
+```
+
+Defined in: node\_modules/.pnpm/@angular+core@21.2.8\_@angular+compiler@21.2.8\_rxjs@7.8.2\_zone.js@0.16.1/node\_modules/@angular/core/types/\_chrome\_dev\_tools\_performance-chunk.d.ts:54
+
+A debug name for the signal. Used in Angular DevTools to identify the signal.
+
+#### Inherited from
+
+```ts
+Omit.debugName
+```
+
+***
+
+### injector?
+
+```ts
+optional injector: Injector;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:16](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L16)
diff --git a/mintlify/store/framework/angular/reference/interfaces/WritableAtomSignal.md b/mintlify/store/framework/angular/reference/interfaces/WritableAtomSignal.md
new file mode 100644
index 000000000..6b8c3f7e5
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/interfaces/WritableAtomSignal.md
@@ -0,0 +1,54 @@
+---
+id: WritableAtomSignal
+title: WritableAtomSignal
+---
+
+# Interface: WritableAtomSignal()\&lt;T\>
+
+Defined in: [packages/angular-store/src/injectAtom.ts:21](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L21)
+
+A callable signal that reads the current atom value when invoked and
+exposes a `.set` method matching the atom's native setter contract.
+
+This is the Angular-idiomatic return type for [injectAtom](/store/framework/angular/reference/functions/injectAtom). It can
+be used as a class property and called directly in templates.
+
+## Example
+
+```ts
+readonly count = injectAtom(countAtom)
+
+// read in template: {{ count() }}
+// write in class:   this.count.set(5)
+//                   this.count.set(prev => prev + 1)
+```
+
+## Type Parameters
+
+### T
+
+`T`
+
+```ts
+WritableAtomSignal(): T;
+```
+
+Defined in: [packages/angular-store/src/injectAtom.ts:23](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L23)
+
+Read the current value.
+
+## Returns
+
+`T`
+
+## Properties
+
+### set
+
+```ts
+set: (fn) => void & (value) => void;
+```
+
+Defined in: [packages/angular-store/src/injectAtom.ts:25](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L25)
+
+Set the atom value (accepts a direct value or an updater function).
diff --git a/mintlify/store/framework/angular/reference/type-aliases/SelectionSource.md b/mintlify/store/framework/angular/reference/type-aliases/SelectionSource.md
new file mode 100644
index 000000000..3d2ff387a
--- /dev/null
+++ b/mintlify/store/framework/angular/reference/type-aliases/SelectionSource.md
@@ -0,0 +1,62 @@
+---
+id: SelectionSource
+title: SelectionSource
+---
+
+# Type Alias: SelectionSource\&lt;T\>
+
+```ts
+type SelectionSource<T> = object;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:19](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L19)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:20](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L20)
+
+#### Returns
+
+`T`
+
+***
+
+### subscribe()
+
+```ts
+subscribe: (listener) => object;
+```
+
+Defined in: [packages/angular-store/src/injectSelector.ts:21](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L21)
+
+#### Parameters
+
+##### listener
+
+(`value`) => `void`
+
+#### Returns
+
+`object`
+
+##### unsubscribe()
+
+```ts
+unsubscribe: () => void;
+```
+
+###### Returns
+
+`void`
diff --git a/mintlify/store/framework/lit/examples/simple.md b/mintlify/store/framework/lit/examples/simple.md
new file mode 100644
index 000000000..1be71e16f
--- /dev/null
+++ b/mintlify/store/framework/lit/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/lit/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/lit/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/lit/quick-start.md b/mintlify/store/framework/lit/quick-start.md
new file mode 100644
index 000000000..c2f6167fe
--- /dev/null
+++ b/mintlify/store/framework/lit/quick-start.md
@@ -0,0 +1,109 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic Lit app example to get started with TanStack `lit-store`.
+
+You can use `TanStackStoreSelector` in two ways:
+
+- Trigger rerenders when a selected slice changes
+- Access the selected value directly through `.value`
+
+```ts
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { TanStackStoreSelector, createStore } from '@tanstack/lit-store'
+
+// You can instantiate a Store outside of Lit components too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+})
+
+type Animal = 'dogs' | 'cats'
+
+const updateState = (animal: Animal) => {
+  store.setState((state) => ({
+    ...state,
+    [animal]: state[animal] + 1,
+  }))
+}
+
+@customElement('animal-display')
+export class AnimalDisplay extends LitElement {
+  @property({ type: String }) animal: Animal = 'dogs'
+
+  // Subscribes only to `state[animal]`
+  counter = new TanStackStoreSelector(
+    this,
+    () => store,
+    (state) => state[this.animal],
+  )
+
+  render() {
+    return html`
+      <div>
+        <p>
+          Using selector.value:
+          ${this.counter.value}
+        </p>
+
+        <p>
+          Reading directly from store.state:
+          ${store.state[this.animal]}
+        </p>
+      </div>
+    `
+  }
+}
+
+@customElement('animal-increment')
+export class AnimalIncrement extends LitElement {
+  @property({ type: String }) animal: Animal = 'dogs'
+
+  render() {
+    return html`
+      <button @click=${() => updateState(this.animal)}>
+        My Friend Likes ${this.animal}
+      </button>
+    `
+  }
+}
+
+@customElement('tanstack-store-demo')
+export class TanStackStoreDemo extends LitElement {
+  render() {
+    return html`
+      <div>
+        <h1>How many of your friends like cats or dogs?</h1>
+
+        <p>
+          Press one of the buttons to increment how many of your friends
+          like cats or dogs.
+        </p>
+
+        <animal-increment animal="dogs"></animal-increment>
+        <animal-display animal="dogs"></animal-display>
+
+        <animal-increment animal="cats"></animal-increment>
+        <animal-display animal="cats"></animal-display>
+      </div>
+    `
+  }
+}
+```
+
+`selector.value` returns the latest selected value and only updates when
+that specific selection changes.
+
+Reading from `store.state` accesses the full store state directly. The
+component still rerenders because the selector subscription is active,
+but the rendered value itself comes from the store.
+
+Then mount the root element in your HTML:
+
+```html
+<tanstack-store-demo></tanstack-store-demo>
+<script type="module" src="/src/index.ts"></script>
+```
diff --git a/mintlify/store/framework/lit/reference/classes/TanStackStoreAtom.md b/mintlify/store/framework/lit/reference/classes/TanStackStoreAtom.md
new file mode 100644
index 000000000..b95879ace
--- /dev/null
+++ b/mintlify/store/framework/lit/reference/classes/TanStackStoreAtom.md
@@ -0,0 +1,12 @@
+---
+title: "TanStackStoreAtom"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/lit/reference/classes/TanStackStoreAtom)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/lit/reference/classes/TanStackStoreSelector.md b/mintlify/store/framework/lit/reference/classes/TanStackStoreSelector.md
new file mode 100644
index 000000000..8393841c5
--- /dev/null
+++ b/mintlify/store/framework/lit/reference/classes/TanStackStoreSelector.md
@@ -0,0 +1,12 @@
+---
+title: "TanStackStoreSelector"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/lit/reference/classes/TanStackStoreSelector)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/lit/reference/index.md b/mintlify/store/framework/lit/reference/index.md
new file mode 100644
index 000000000..7e18aef56
--- /dev/null
+++ b/mintlify/store/framework/lit/reference/index.md
@@ -0,0 +1,12 @@
+---
+title: "Lit Reactive Controllers"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/lit/reference/index)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/lit/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/lit/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..6c6045bb5
--- /dev/null
+++ b/mintlify/store/framework/lit/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,12 @@
+---
+title: "UseSelectorOptions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/lit/reference/interfaces/UseSelectorOptions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/examples/atoms.md b/mintlify/store/framework/preact/examples/atoms.md
new file mode 100644
index 000000000..0d149184e
--- /dev/null
+++ b/mintlify/store/framework/preact/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/preact/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/examples/simple.md b/mintlify/store/framework/preact/examples/simple.md
new file mode 100644
index 000000000..ea8b5a757
--- /dev/null
+++ b/mintlify/store/framework/preact/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/preact/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/examples/store-actions.md b/mintlify/store/framework/preact/examples/store-actions.md
new file mode 100644
index 000000000..ac954db82
--- /dev/null
+++ b/mintlify/store/framework/preact/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/preact/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/examples/store-context.md b/mintlify/store/framework/preact/examples/store-context.md
new file mode 100644
index 000000000..2255d5ede
--- /dev/null
+++ b/mintlify/store/framework/preact/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/preact/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/examples/stores.md b/mintlify/store/framework/preact/examples/stores.md
new file mode 100644
index 000000000..53de73b1b
--- /dev/null
+++ b/mintlify/store/framework/preact/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/preact/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/quick-start.md b/mintlify/store/framework/preact/quick-start.md
new file mode 100644
index 000000000..a09c6ea02
--- /dev/null
+++ b/mintlify/store/framework/preact/quick-start.md
@@ -0,0 +1,56 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic preact app example to get started with the TanStack preact-store.
+
+```tsx
+import { render } from "preact";
+import { createStore, useSelector } from "@tanstack/preact-store";
+
+// You can instantiate the store outside of Preact components too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+});
+
+// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render
+
+const Display = ({ animal }) => {
+  const count = useSelector(store, (state) => state[animal]);
+  return <div>{`${animal}: ${count}`}</div>;
+};
+
+const updateState = (animal) => {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+};
+const Increment = ({ animal }) => (
+  <button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
+);
+
+function App() {
+  return (
+    <div>
+      <h1>How many of your friends like cats or dogs?</h1>
+      <p>
+        Press one of the buttons to add a counter of how many of your friends
+        like cats or dogs
+      </p>
+      <Increment animal="dogs" />
+      <Display animal="dogs" />
+      <Increment animal="cats" />
+      <Display animal="cats" />
+    </div>
+  );
+}
+
+render(<App />, document.getElementById("root"));
+```
+
+`useStore` remains available as a deprecated alias to `useSelector`.
diff --git a/mintlify/store/framework/preact/reference/functions/createStoreContext.md b/mintlify/store/framework/preact/reference/functions/createStoreContext.md
new file mode 100644
index 000000000..d317e1f47
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/createStoreContext.md
@@ -0,0 +1,95 @@
+---
+id: createStoreContext
+title: createStoreContext
+---
+
+# Function: createStoreContext()
+
+```ts
+function createStoreContext<TValue>(): object;
+```
+
+Defined in: [preact-store/src/createStoreContext.tsx:44](https://github.com/TanStack/store/blob/main/packages/preact-store/src/createStoreContext.tsx#L44)
+
+Creates a typed Preact context for sharing a bundle of atoms and stores with
+a subtree.
+
+The returned `StoreProvider` only transports the provided object through
+Preact context. Consumers destructure the contextual atoms and stores, then
+compose them with the existing hooks like [useSelector](/store/framework/preact/reference/functions/useSelector) and
+[useAtom](/store/framework/preact/reference/functions/useAtom).
+
+The object shape is preserved exactly, so keyed atoms and stores remain fully
+typed when read back with `useStoreContext()`.
+
+## Type Parameters
+
+### TValue
+
+`TValue` *extends* `object`
+
+## Returns
+
+`object`
+
+### StoreProvider()
+
+```ts
+StoreProvider: (__namedParameters) => Element;
+```
+
+#### Parameters
+
+##### \_\_namedParameters
+
+###### children?
+
+`ComponentChildren`
+
+###### value
+
+`TValue`
+
+#### Returns
+
+`Element`
+
+### useStoreContext()
+
+```ts
+useStoreContext: () => TValue;
+```
+
+#### Returns
+
+`TValue`
+
+## Example
+
+```tsx
+const { StoreProvider, useStoreContext } = createStoreContext<{
+  countAtom: Atom<number>
+  totalsStore: Store<{ count: number }>
+}>()
+
+function CountButton() {
+  const { countAtom, totalsStore } = useStoreContext()
+  const count = useSelector(countAtom)
+  const total = useSelector(totalsStore, (state) => state.count)
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))
+      }
+    >
+      {count} / {total}
+    </button>
+  )
+}
+```
+
+## Throws
+
+When `useStoreContext()` is called outside the matching `StoreProvider`.
diff --git a/mintlify/store/framework/preact/reference/functions/useAtom.md b/mintlify/store/framework/preact/reference/functions/useAtom.md
new file mode 100644
index 000000000..be01bb1c2
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useAtom.md
@@ -0,0 +1,49 @@
+---
+id: useAtom
+title: useAtom
+---
+
+# Function: useAtom()
+
+```ts
+function useAtom<TValue>(atom, options?): [TValue, (fn) => void & (value) => void];
+```
+
+Defined in: [preact-store/src/useAtom.ts:22](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useAtom.ts#L22)
+
+Returns the current atom value together with a stable setter.
+
+Use this when a component needs to both read and update the same writable
+atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/preact/reference/interfaces/UseSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+\[`TValue`, (`fn`) => `void` & (`value`) => `void`\]
+
+## Example
+
+```tsx
+const [count, setCount] = useAtom(countAtom)
+
+return (
+  <button type="button" onClick={() => setCount((prev) => prev + 1)}>
+    {count}
+  </button>
+)
+```
diff --git a/mintlify/store/framework/preact/reference/functions/useCreateAtom.md b/mintlify/store/framework/preact/reference/functions/useCreateAtom.md
new file mode 100644
index 000000000..b6afd0508
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useCreateAtom.md
@@ -0,0 +1,104 @@
+---
+id: useCreateAtom
+title: useCreateAtom
+---
+
+# Function: useCreateAtom()
+
+## Call Signature
+
+```ts
+function useCreateAtom<T>(getValue, options?): ReadonlyAtom<T>;
+```
+
+Defined in: [preact-store/src/useCreateAtom.ts:27](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useCreateAtom.ts#L27)
+
+Creates a stable atom instance for the lifetime of the component.
+
+Pass an initial value to create a writable atom, or a getter function to
+create a readonly derived atom. This mirrors createAtom, but only
+creates the atom once per component mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+#### options?
+
+`AtomOptions`\&lt;`T`\>
+
+### Returns
+
+`ReadonlyAtom`\&lt;`T`\>
+
+### Example
+
+```tsx
+function Counter() {
+  const countAtom = useCreateAtom(0)
+  const [count, setCount] = useAtom(countAtom)
+
+  return (
+    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
+      {count}
+    </button>
+  )
+}
+```
+
+## Call Signature
+
+```ts
+function useCreateAtom<T>(initialValue, options?): Atom<T>;
+```
+
+Defined in: [preact-store/src/useCreateAtom.ts:31](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useCreateAtom.ts#L31)
+
+Creates a stable atom instance for the lifetime of the component.
+
+Pass an initial value to create a writable atom, or a getter function to
+create a readonly derived atom. This mirrors createAtom, but only
+creates the atom once per component mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+#### options?
+
+`AtomOptions`\&lt;`T`\>
+
+### Returns
+
+`Atom`\&lt;`T`\>
+
+### Example
+
+```tsx
+function Counter() {
+  const countAtom = useCreateAtom(0)
+  const [count, setCount] = useAtom(countAtom)
+
+  return (
+    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
+      {count}
+    </button>
+  )
+}
+```
diff --git a/mintlify/store/framework/preact/reference/functions/useCreateStore.md b/mintlify/store/framework/preact/reference/functions/useCreateStore.md
new file mode 100644
index 000000000..cb169ddbc
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useCreateStore.md
@@ -0,0 +1,161 @@
+---
+id: useCreateStore
+title: useCreateStore
+---
+
+# Function: useCreateStore()
+
+## Call Signature
+
+```ts
+function useCreateStore<T>(getValue): ReadonlyStore<T>;
+```
+
+Defined in: [preact-store/src/useCreateStore.ts:38](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useCreateStore.ts#L38)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This mirrors createStore, but only
+creates the store once per component mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+### Returns
+
+`ReadonlyStore`\&lt;`T`\>
+
+### Example
+
+```tsx
+function Counter() {
+  const counterStore = useCreateStore({ count: 0 })
+  const count = useSelector(counterStore, (state) => state.count)
+  const setState = useSetValue(counterStore)
+
+  return (
+    <button
+      type="button"
+      onClick={() => setState((state) => ({ ...state, count: state.count + 1 }))}
+    >
+      {count}
+    </button>
+  )
+}
+```
+
+## Call Signature
+
+```ts
+function useCreateStore<T>(initialValue): Store<T>;
+```
+
+Defined in: [preact-store/src/useCreateStore.ts:41](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useCreateStore.ts#L41)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This mirrors createStore, but only
+creates the store once per component mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+### Returns
+
+`Store`\&lt;`T`\>
+
+### Example
+
+```tsx
+function Counter() {
+  const counterStore = useCreateStore({ count: 0 })
+  const count = useSelector(counterStore, (state) => state.count)
+  const setState = useSetValue(counterStore)
+
+  return (
+    <button
+      type="button"
+      onClick={() => setState((state) => ({ ...state, count: state.count + 1 }))}
+    >
+      {count}
+    </button>
+  )
+}
+```
+
+## Call Signature
+
+```ts
+function useCreateStore<T, TActions>(initialValue, actions): Store<T, TActions>;
+```
+
+Defined in: [preact-store/src/useCreateStore.ts:42](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useCreateStore.ts#L42)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This mirrors createStore, but only
+creates the store once per component mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+#### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### Parameters
+
+#### initialValue
+
+`NonFunction`\&lt;`T`\>
+
+#### actions
+
+`StoreActionsFactory`\&lt;`T`, `TActions`\>
+
+### Returns
+
+`Store`\&lt;`T`, `TActions`\>
+
+### Example
+
+```tsx
+function Counter() {
+  const counterStore = useCreateStore({ count: 0 })
+  const count = useSelector(counterStore, (state) => state.count)
+  const setState = useSetValue(counterStore)
+
+  return (
+    <button
+      type="button"
+      onClick={() => setState((state) => ({ ...state, count: state.count + 1 }))}
+    >
+      {count}
+    </button>
+  )
+}
+```
diff --git a/mintlify/store/framework/preact/reference/functions/useSelector.md b/mintlify/store/framework/preact/reference/functions/useSelector.md
new file mode 100644
index 000000000..0a9e54db5
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useSelector.md
@@ -0,0 +1,60 @@
+---
+id: useSelector
+title: useSelector
+---
+
+# Function: useSelector()
+
+```ts
+function useSelector<TSource, TSelected>(
+   source, 
+   selector, 
+   options?): TSelected;
+```
+
+Defined in: [preact-store/src/useSelector.ts:128](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useSelector.ts#L128)
+
+Selects a slice of state from an atom or store and subscribes the component
+to that selection.
+
+This is the primary Preact read hook for TanStack Store. Use it when a
+component only needs part of a source value, or omit the selector to
+subscribe to the whole value.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+`SelectionSource`\&lt;`TSource`\>
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/preact/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+`TSelected`
+
+## Examples
+
+```tsx
+const count = useSelector(counterStore, (state) => state.count)
+```
+
+```tsx
+const value = useSelector(countAtom)
+```
diff --git a/mintlify/store/framework/preact/reference/functions/useSetValue.md b/mintlify/store/framework/preact/reference/functions/useSetValue.md
new file mode 100644
index 000000000..0053b45e5
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "useSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/reference/functions/useSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/reference/functions/useStore-1.md b/mintlify/store/framework/preact/reference/functions/useStore-1.md
new file mode 100644
index 000000000..a2429ca1c
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useStore-1.md
@@ -0,0 +1,61 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Function: useStore()~~
+
+```ts
+function useStore<TSource, TSelected>(
+   source, 
+   selector, 
+   compare?): TSelected;
+```
+
+Defined in: [preact-store/src/useStore.ts:13](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useStore.ts#L13)
+
+Deprecated alias for [useSelector](/store/framework/preact/reference/functions/useSelector).
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`TSelected`
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/store/framework/preact/reference/functions/useStore.md b/mintlify/store/framework/preact/reference/functions/useStore.md
new file mode 100644
index 000000000..14935e413
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useStore.md
@@ -0,0 +1,64 @@
+---
+id: _useStore
+title: _useStore
+---
+
+# Function: \_useStore()
+
+```ts
+function _useStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [TSelected, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [preact-store/src/\_useStore.ts:24](https://github.com/TanStack/store/blob/main/packages/preact-store/src/_useStore.ts#L24)
+
+Experimental combined read+write hook for stores, mirroring useAtom's tuple
+pattern.
+
+Returns `[selected, actions]` when the store has an actions factory, or
+`[selected, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/preact/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[`TSelected`, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```tsx
+// Store with actions
+const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)
+
+// Store without actions
+const [count, setState] = _useStore(plainStore, (s) => s)
+setState((prev) => prev + 1)
+```
diff --git a/mintlify/store/framework/preact/reference/functions/useStoreActions.md b/mintlify/store/framework/preact/reference/functions/useStoreActions.md
new file mode 100644
index 000000000..530adb4cc
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/functions/useStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "useStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/preact/reference/functions/useStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/preact/reference/index.md b/mintlify/store/framework/preact/reference/index.md
new file mode 100644
index 000000000..f4f5f1adb
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/index.md
@@ -0,0 +1,20 @@
+---
+id: "@tanstack/preact-store"
+title: "@tanstack/preact-store"
+---
+
+# @tanstack/preact-store
+
+## Interfaces
+
+- [UseSelectorOptions](/store/framework/preact/reference/interfaces/UseSelectorOptions)
+
+## Functions
+
+- [\_useStore](/store/framework/preact/reference/functions/useStore)
+- [createStoreContext](/store/framework/preact/reference/functions/createStoreContext)
+- [useAtom](/store/framework/preact/reference/functions/useAtom)
+- [useCreateAtom](/store/framework/preact/reference/functions/useCreateAtom)
+- [useCreateStore](/store/framework/preact/reference/functions/useCreateStore)
+- [useSelector](/store/framework/preact/reference/functions/useSelector)
+- [~~useStore~~](/store/framework/preact/reference/functions/useStore-1)
diff --git a/mintlify/store/framework/preact/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/preact/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..296a943cf
--- /dev/null
+++ b/mintlify/store/framework/preact/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,38 @@
+---
+id: UseSelectorOptions
+title: UseSelectorOptions
+---
+
+# Interface: UseSelectorOptions\&lt;TSelected\>
+
+Defined in: [preact-store/src/useSelector.ts:9](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useSelector.ts#L9)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [preact-store/src/useSelector.ts:10](https://github.com/TanStack/store/blob/main/packages/preact-store/src/useSelector.ts#L10)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/framework/react/examples/atoms.md b/mintlify/store/framework/react/examples/atoms.md
new file mode 100644
index 000000000..e893b98a5
--- /dev/null
+++ b/mintlify/store/framework/react/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/react/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/examples/simple.md b/mintlify/store/framework/react/examples/simple.md
new file mode 100644
index 000000000..062afb3af
--- /dev/null
+++ b/mintlify/store/framework/react/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/react/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/examples/store-actions.md b/mintlify/store/framework/react/examples/store-actions.md
new file mode 100644
index 000000000..7c671c32b
--- /dev/null
+++ b/mintlify/store/framework/react/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/react/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/examples/store-context.md b/mintlify/store/framework/react/examples/store-context.md
new file mode 100644
index 000000000..a29e65b30
--- /dev/null
+++ b/mintlify/store/framework/react/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/react/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/examples/stores.md b/mintlify/store/framework/react/examples/stores.md
new file mode 100644
index 000000000..2e44710af
--- /dev/null
+++ b/mintlify/store/framework/react/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/react/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/quick-start.md b/mintlify/store/framework/react/quick-start.md
new file mode 100644
index 000000000..9162d4ad2
--- /dev/null
+++ b/mintlify/store/framework/react/quick-start.md
@@ -0,0 +1,59 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic react app example to get started with the TanStack react-store.
+
+```tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createStore, useSelector } from "@tanstack/react-store";
+
+// You can instantiate the store outside of React components too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+});
+
+// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render
+
+const Display = ({ animal }) => {
+  const count = useSelector(store, (state) => state[animal]);
+  return <div>{`${animal}: ${count}`}</div>;
+};
+
+const updateState = (animal) => {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+};
+const Increment = ({ animal }) => (
+  <button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
+);
+
+function App() {
+  return (
+    <div>
+      <h1>How many of your friends like cats or dogs?</h1>
+      <p>
+        Press one of the buttons to add a counter of how many of your friends
+        like cats or dogs
+      </p>
+      <Increment animal="dogs" />
+      <Display animal="dogs" />
+      <Increment animal="cats" />
+      <Display animal="cats" />
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
+
+```
+
+`useStore` remains available as a deprecated alias to `useSelector`.
diff --git a/mintlify/store/framework/react/reference/functions/createStoreContext.md b/mintlify/store/framework/react/reference/functions/createStoreContext.md
new file mode 100644
index 000000000..c86087c11
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/createStoreContext.md
@@ -0,0 +1,86 @@
+---
+id: createStoreContext
+title: createStoreContext
+---
+
+# Function: createStoreContext()
+
+```ts
+function createStoreContext<TValue>(): object;
+```
+
+Defined in: [packages/react-store/src/createStoreContext.tsx:40](https://github.com/TanStack/store/blob/main/packages/react-store/src/createStoreContext.tsx#L40)
+
+Creates a typed React context for sharing a bundle of atoms and stores with a subtree.
+
+The returned `StoreProvider` only transports the provided object through
+React context. Consumers destructure the contextual atoms and stores, then
+compose them with the existing hooks like [useSelector](/store/framework/react/reference/functions/useSelector),
+[useSelector](/store/framework/react/reference/functions/useSelector) and [useAtom](/store/framework/react/reference/functions/useAtom).
+
+The object shape is preserved exactly, so keyed atoms and stores remain fully
+typed when read back with `useStoreContext()`.
+
+## Type Parameters
+
+### TValue
+
+`TValue` *extends* `object`
+
+## Returns
+
+`object`
+
+### StoreProvider()
+
+```ts
+StoreProvider: (props) => ReactElement;
+```
+
+#### Parameters
+
+##### props
+
+`object` & `object`
+
+#### Returns
+
+`ReactElement`
+
+### useStoreContext()
+
+```ts
+useStoreContext: () => TValue;
+```
+
+#### Returns
+
+`TValue`
+
+## Example
+
+```tsx
+const { StoreProvider, useStoreContext } = createStoreContext<{
+  countAtom: Atom<number>
+  totalsStore: Store<{ count: number }>
+}>()
+
+function CountButton() {
+  const { countAtom, totalsStore } = useStoreContext()
+  const count = useSelector(countAtom)
+  const total = useSelector(totalsStore, (state) => state.count)
+
+  return (
+    <button
+      type="button"
+      onClick={() => totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))}
+    >
+      {count} / {total}
+    </button>
+  )
+}
+```
+
+## Throws
+
+When `useStoreContext()` is called outside the matching `StoreProvider`.
diff --git a/mintlify/store/framework/react/reference/functions/useAtom.md b/mintlify/store/framework/react/reference/functions/useAtom.md
new file mode 100644
index 000000000..1b92862f8
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useAtom.md
@@ -0,0 +1,43 @@
+---
+id: useAtom
+title: useAtom
+---
+
+# Function: useAtom()
+
+```ts
+function useAtom<TValue>(atom, options?): [TValue, (fn) => void & (value) => void];
+```
+
+Defined in: [packages/react-store/src/useAtom.ts:16](https://github.com/TanStack/store/blob/main/packages/react-store/src/useAtom.ts#L16)
+
+Returns the current atom value together with a stable setter.
+
+This is the writable-atom convenience hook for components that need to both
+read and update the same atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/react/reference/interfaces/UseSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+\[`TValue`, (`fn`) => `void` & (`value`) => `void`\]
+
+## Example
+
+```tsx
+const [count, setCount] = useAtom(countAtom)
+```
diff --git a/mintlify/store/framework/react/reference/functions/useCreateAtom.md b/mintlify/store/framework/react/reference/functions/useCreateAtom.md
new file mode 100644
index 000000000..6085d55d3
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useCreateAtom.md
@@ -0,0 +1,86 @@
+---
+id: useCreateAtom
+title: useCreateAtom
+---
+
+# Function: useCreateAtom()
+
+## Call Signature
+
+```ts
+function useCreateAtom<T>(getValue, options?): ReadonlyAtom<T>;
+```
+
+Defined in: [packages/react-store/src/useCreateAtom.ts:17](https://github.com/TanStack/store/blob/main/packages/react-store/src/useCreateAtom.ts#L17)
+
+Creates a stable atom instance for the lifetime of the component.
+
+Pass an initial value to create a writable atom, or a getter function to
+create a readonly derived atom. This hook mirrors the overloads from
+createAtom, but ensures the atom is only created once per mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+#### options?
+
+`AtomOptions`\&lt;`T`\>
+
+### Returns
+
+`ReadonlyAtom`\&lt;`T`\>
+
+### Example
+
+```tsx
+const countAtom = useCreateAtom(0)
+```
+
+## Call Signature
+
+```ts
+function useCreateAtom<T>(initialValue, options?): Atom<T>;
+```
+
+Defined in: [packages/react-store/src/useCreateAtom.ts:21](https://github.com/TanStack/store/blob/main/packages/react-store/src/useCreateAtom.ts#L21)
+
+Creates a stable atom instance for the lifetime of the component.
+
+Pass an initial value to create a writable atom, or a getter function to
+create a readonly derived atom. This hook mirrors the overloads from
+createAtom, but ensures the atom is only created once per mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+#### options?
+
+`AtomOptions`\&lt;`T`\>
+
+### Returns
+
+`Atom`\&lt;`T`\>
+
+### Example
+
+```tsx
+const countAtom = useCreateAtom(0)
+```
diff --git a/mintlify/store/framework/react/reference/functions/useCreateStore.md b/mintlify/store/framework/react/reference/functions/useCreateStore.md
new file mode 100644
index 000000000..25d8810cb
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useCreateStore.md
@@ -0,0 +1,122 @@
+---
+id: useCreateStore
+title: useCreateStore
+---
+
+# Function: useCreateStore()
+
+## Call Signature
+
+```ts
+function useCreateStore<T>(getValue): ReadonlyStore<T>;
+```
+
+Defined in: [packages/react-store/src/useCreateStore.ts:24](https://github.com/TanStack/store/blob/main/packages/react-store/src/useCreateStore.ts#L24)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This hook mirrors the overloads from
+createStore, but ensures the store is only created once per mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+### Returns
+
+`ReadonlyStore`\&lt;`T`\>
+
+### Example
+
+```tsx
+const counterStore = useCreateStore({ count: 0 })
+```
+
+## Call Signature
+
+```ts
+function useCreateStore<T>(initialValue): Store<T>;
+```
+
+Defined in: [packages/react-store/src/useCreateStore.ts:27](https://github.com/TanStack/store/blob/main/packages/react-store/src/useCreateStore.ts#L27)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This hook mirrors the overloads from
+createStore, but ensures the store is only created once per mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+### Returns
+
+`Store`\&lt;`T`\>
+
+### Example
+
+```tsx
+const counterStore = useCreateStore({ count: 0 })
+```
+
+## Call Signature
+
+```ts
+function useCreateStore<T, TActions>(initialValue, actions): Store<T, TActions>;
+```
+
+Defined in: [packages/react-store/src/useCreateStore.ts:28](https://github.com/TanStack/store/blob/main/packages/react-store/src/useCreateStore.ts#L28)
+
+Creates a stable store instance for the lifetime of the component.
+
+Pass an initial value to create a writable store, or a getter function to
+create a readonly derived store. This hook mirrors the overloads from
+createStore, but ensures the store is only created once per mount.
+
+### Type Parameters
+
+#### T
+
+`T`
+
+#### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### Parameters
+
+#### initialValue
+
+`NonFunction`\&lt;`T`\>
+
+#### actions
+
+`StoreActionsFactory`\&lt;`T`, `TActions`\>
+
+### Returns
+
+`Store`\&lt;`T`, `TActions`\>
+
+### Example
+
+```tsx
+const counterStore = useCreateStore({ count: 0 })
+```
diff --git a/mintlify/store/framework/react/reference/functions/useSelector.md b/mintlify/store/framework/react/reference/functions/useSelector.md
new file mode 100644
index 000000000..9b8903ef9
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useSelector.md
@@ -0,0 +1,62 @@
+---
+id: useSelector
+title: useSelector
+---
+
+# Function: useSelector()
+
+```ts
+function useSelector<TSource, TSelected>(
+   source, 
+   selector, 
+   options?): TSelected;
+```
+
+Defined in: [packages/react-store/src/useSelector.ts:43](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L43)
+
+Selects a slice of state from an atom or store and subscribes the component
+to that selection.
+
+This is the primary React read hook for TanStack Store. It works with any
+source that exposes `get()` and `subscribe()`, including atoms, readonly
+atoms, stores, and readonly stores.
+
+Omit the selector to subscribe to the whole value.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+`SelectionSource`\&lt;`TSource`\>
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/react/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+`TSelected`
+
+## Examples
+
+```tsx
+const count = useSelector(counterStore, (state) => state.count)
+```
+
+```tsx
+const value = useSelector(countAtom)
+```
diff --git a/mintlify/store/framework/react/reference/functions/useSetValue.md b/mintlify/store/framework/react/reference/functions/useSetValue.md
new file mode 100644
index 000000000..ce0661125
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "useSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/reference/functions/useSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/reference/functions/useStore-1.md b/mintlify/store/framework/react/reference/functions/useStore-1.md
new file mode 100644
index 000000000..563a79eba
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useStore-1.md
@@ -0,0 +1,61 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Function: useStore()~~
+
+```ts
+function useStore<TSource, TSelected>(
+   source, 
+   selector, 
+   compare?): TSelected;
+```
+
+Defined in: [packages/react-store/src/useStore.ts:13](https://github.com/TanStack/store/blob/main/packages/react-store/src/useStore.ts#L13)
+
+Deprecated alias for [useSelector](/store/framework/react/reference/functions/useSelector).
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`TSelected`
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/store/framework/react/reference/functions/useStore.md b/mintlify/store/framework/react/reference/functions/useStore.md
new file mode 100644
index 000000000..c50ecf88f
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useStore.md
@@ -0,0 +1,64 @@
+---
+id: _useStore
+title: _useStore
+---
+
+# Function: \_useStore()
+
+```ts
+function _useStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [TSelected, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [packages/react-store/src/\_useStore.ts:24](https://github.com/TanStack/store/blob/main/packages/react-store/src/_useStore.ts#L24)
+
+Experimental combined read+write hook for stores, mirroring useAtom's tuple
+pattern.
+
+Returns `[selected, actions]` when the store has an actions factory, or
+`[selected, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/react/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[`TSelected`, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```tsx
+// Store with actions
+const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)
+
+// Store without actions
+const [count, setState] = _useStore(plainStore, (s) => s)
+setState((prev) => prev + 1)
+```
diff --git a/mintlify/store/framework/react/reference/functions/useStoreActions.md b/mintlify/store/framework/react/reference/functions/useStoreActions.md
new file mode 100644
index 000000000..a500b8e07
--- /dev/null
+++ b/mintlify/store/framework/react/reference/functions/useStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "useStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/react/reference/functions/useStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/react/reference/index.md b/mintlify/store/framework/react/reference/index.md
new file mode 100644
index 000000000..f551dd626
--- /dev/null
+++ b/mintlify/store/framework/react/reference/index.md
@@ -0,0 +1,20 @@
+---
+id: "@tanstack/react-store"
+title: "@tanstack/react-store"
+---
+
+# @tanstack/react-store
+
+## Interfaces
+
+- [UseSelectorOptions](/store/framework/react/reference/interfaces/UseSelectorOptions)
+
+## Functions
+
+- [\_useStore](/store/framework/react/reference/functions/useStore)
+- [createStoreContext](/store/framework/react/reference/functions/createStoreContext)
+- [useAtom](/store/framework/react/reference/functions/useAtom)
+- [useCreateAtom](/store/framework/react/reference/functions/useCreateAtom)
+- [useCreateStore](/store/framework/react/reference/functions/useCreateStore)
+- [useSelector](/store/framework/react/reference/functions/useSelector)
+- [~~useStore~~](/store/framework/react/reference/functions/useStore-1)
diff --git a/mintlify/store/framework/react/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/react/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..9e485bdf4
--- /dev/null
+++ b/mintlify/store/framework/react/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,38 @@
+---
+id: UseSelectorOptions
+title: UseSelectorOptions
+---
+
+# Interface: UseSelectorOptions\&lt;TSelected\>
+
+Defined in: [packages/react-store/src/useSelector.ts:4](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L4)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [packages/react-store/src/useSelector.ts:5](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L5)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/framework/solid/examples/atoms.md b/mintlify/store/framework/solid/examples/atoms.md
new file mode 100644
index 000000000..b780a37bb
--- /dev/null
+++ b/mintlify/store/framework/solid/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/solid/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/examples/simple.md b/mintlify/store/framework/solid/examples/simple.md
new file mode 100644
index 000000000..203462df1
--- /dev/null
+++ b/mintlify/store/framework/solid/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/solid/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/examples/store-actions.md b/mintlify/store/framework/solid/examples/store-actions.md
new file mode 100644
index 000000000..5f1bf60ee
--- /dev/null
+++ b/mintlify/store/framework/solid/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/solid/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/examples/store-context.md b/mintlify/store/framework/solid/examples/store-context.md
new file mode 100644
index 000000000..6434f15e0
--- /dev/null
+++ b/mintlify/store/framework/solid/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/solid/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/examples/stores.md b/mintlify/store/framework/solid/examples/stores.md
new file mode 100644
index 000000000..3018bfaf0
--- /dev/null
+++ b/mintlify/store/framework/solid/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/solid/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/quick-start.md b/mintlify/store/framework/solid/quick-start.md
new file mode 100644
index 000000000..19f63861c
--- /dev/null
+++ b/mintlify/store/framework/solid/quick-start.md
@@ -0,0 +1,62 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic Solid app example to get started with the TanStack Solid-store.
+
+```jsx
+import { createStore, useSelector } from '@tanstack/solid-store';
+
+// You can instantiate the store outside of Solid components too!
+export const store = createStore({
+  cats: 0,
+  dogs: 0
+})
+
+export const Display = (props) => {
+  const count = useSelector(store, (state) => state[props.animals]);
+  return (
+    <span>
+      {props.animals}: {count()}
+      </span>
+    );
+}
+
+export const Button = (props) => {
+  return (
+    <button
+      onClick={() => {
+        store.setState((state) => {
+          return {
+            ...state,
+            [props.animals]: state[props.animals] + 1
+          }
+        })
+      }}
+    >
+      Increment
+    </button>
+  )
+}
+
+const App = () => {
+  return (
+    <div>
+    <h1>How many of your friends like cats or dogs?</h1>
+    <p>
+      Press one of the buttons to add a counter of how many of your friends
+      like cats or dogs
+      </p>
+      <Button animals="dogs" />
+      <Display animals="dogs" />
+      <Button animals="cats" />
+      <Display animals="cats" />
+  </div>
+  );
+};
+
+export default App;
+```
+
+`useStore` remains available as a deprecated alias to `useSelector`.
diff --git a/mintlify/store/framework/solid/reference/functions/createStoreContext.md b/mintlify/store/framework/solid/reference/functions/createStoreContext.md
new file mode 100644
index 000000000..74cac7bd6
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/createStoreContext.md
@@ -0,0 +1,91 @@
+---
+id: createStoreContext
+title: createStoreContext
+---
+
+# Function: createStoreContext()
+
+```ts
+function createStoreContext<TValue>(): object;
+```
+
+Defined in: [solid-store/src/createStoreContext.tsx:43](https://github.com/TanStack/store/blob/main/packages/solid-store/src/createStoreContext.tsx#L43)
+
+Creates a typed Solid context for sharing a bundle of atoms and stores with a
+subtree.
+
+The returned `StoreProvider` only transports the provided object through
+Solid context. Consumers destructure the contextual atoms and stores, then
+compose them with the existing hooks like [useSelector](/store/framework/solid/reference/functions/useSelector) and
+[useAtom](/store/framework/solid/reference/functions/useAtom).
+
+The object shape is preserved exactly, so keyed atoms and stores remain fully
+typed when read back with `useStoreContext()`.
+
+## Type Parameters
+
+### TValue
+
+`TValue` *extends* `object`
+
+## Returns
+
+`object`
+
+### StoreProvider()
+
+```ts
+StoreProvider: (props) => Element;
+```
+
+#### Parameters
+
+##### props
+
+`ParentProps`\&lt;\&#123;
+  `value`: `TValue`;
+\&#125;\>
+
+#### Returns
+
+`Element`
+
+### useStoreContext()
+
+```ts
+useStoreContext: () => TValue;
+```
+
+#### Returns
+
+`TValue`
+
+## Example
+
+```tsx
+const { StoreProvider, useStoreContext } = createStoreContext<{
+  countAtom: Atom<number>
+  totalsStore: Store<{ count: number }>
+}>()
+
+function CountButton() {
+  const { countAtom, totalsStore } = useStoreContext()
+  const count = useSelector(countAtom)
+  const total = useSelector(totalsStore, (state) => state.count)
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))
+      }
+    >
+      {count()} / {total()}
+    </button>
+  )
+}
+```
+
+## Throws
+
+When `useStoreContext()` is called outside the matching `StoreProvider`.
diff --git a/mintlify/store/framework/solid/reference/functions/useAtom.md b/mintlify/store/framework/solid/reference/functions/useAtom.md
new file mode 100644
index 000000000..c545dde58
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useAtom.md
@@ -0,0 +1,49 @@
+---
+id: useAtom
+title: useAtom
+---
+
+# Function: useAtom()
+
+```ts
+function useAtom<TValue>(atom, options?): [Accessor<TValue>, (fn) => void & (value) => void];
+```
+
+Defined in: [solid-store/src/useAtom.ts:23](https://github.com/TanStack/store/blob/main/packages/solid-store/src/useAtom.ts#L23)
+
+Returns the current atom accessor together with a setter.
+
+Use this when a component needs to both read and update the same writable
+atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/solid/reference/interfaces/UseSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+\[`Accessor`\&lt;`TValue`\>, (`fn`) => `void` & (`value`) => `void`\]
+
+## Example
+
+```tsx
+const [count, setCount] = useAtom(countAtom)
+
+return (
+  <button type="button" onClick={() => setCount((prev) => prev + 1)}>
+    {count()}
+  </button>
+)
+```
diff --git a/mintlify/store/framework/solid/reference/functions/useSelector.md b/mintlify/store/framework/solid/reference/functions/useSelector.md
new file mode 100644
index 000000000..dd6d16dc4
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useSelector.md
@@ -0,0 +1,63 @@
+---
+id: useSelector
+title: useSelector
+---
+
+# Function: useSelector()
+
+```ts
+function useSelector<TSource, TSelected>(
+   source, 
+   selector, 
+options?): Accessor<TSelected>;
+```
+
+Defined in: [solid-store/src/useSelector.ts:40](https://github.com/TanStack/store/blob/main/packages/solid-store/src/useSelector.ts#L40)
+
+Selects a slice of state from an atom or store and subscribes the component
+to that selection.
+
+This is the primary Solid read hook for TanStack Store. It returns a Solid
+accessor so consumers can read the selected value reactively.
+
+Omit the selector to subscribe to the whole value.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+`SelectionSource`\&lt;`TSource`\>
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/solid/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+`Accessor`\&lt;`TSelected`\>
+
+## Examples
+
+```tsx
+const count = useSelector(counterStore, (state) => state.count)
+
+return <p>{count()}</p>
+```
+
+```tsx
+const value = useSelector(countAtom)
+```
diff --git a/mintlify/store/framework/solid/reference/functions/useSetValue.md b/mintlify/store/framework/solid/reference/functions/useSetValue.md
new file mode 100644
index 000000000..d10a780c7
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "useSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/reference/functions/useSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/reference/functions/useStore-1.md b/mintlify/store/framework/solid/reference/functions/useStore-1.md
new file mode 100644
index 000000000..4d840a5d1
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useStore-1.md
@@ -0,0 +1,61 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Function: useStore()~~
+
+```ts
+function useStore<TSource, TSelected>(
+   source, 
+   selector, 
+compare?): Accessor<TSelected>;
+```
+
+Defined in: [solid-store/src/useStore.ts:14](https://github.com/TanStack/store/blob/main/packages/solid-store/src/useStore.ts#L14)
+
+Deprecated alias for [useSelector](/store/framework/solid/reference/functions/useSelector).
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`Accessor`\&lt;`TSelected`\>
+
+## Example
+
+```tsx
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/store/framework/solid/reference/functions/useStore.md b/mintlify/store/framework/solid/reference/functions/useStore.md
new file mode 100644
index 000000000..2c3753987
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useStore.md
@@ -0,0 +1,64 @@
+---
+id: _useStore
+title: _useStore
+---
+
+# Function: \_useStore()
+
+```ts
+function _useStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [Accessor<TSelected>, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [solid-store/src/\_useStore.ts:23](https://github.com/TanStack/store/blob/main/packages/solid-store/src/_useStore.ts#L23)
+
+Experimental combined read+write hook for stores, mirroring useAtom's tuple
+pattern.
+
+Returns `[selected, actions]` when the store has an actions factory, or
+`[selected, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/solid/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[`Accessor`\&lt;`TSelected`\>, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```tsx
+// Store with actions
+const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)
+
+// Store without actions
+const [count, setState] = _useStore(plainStore, (s) => s)
+setState((prev) => prev + 1)
+```
diff --git a/mintlify/store/framework/solid/reference/functions/useStoreActions.md b/mintlify/store/framework/solid/reference/functions/useStoreActions.md
new file mode 100644
index 000000000..e5f630a60
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/functions/useStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "useStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/solid/reference/functions/useStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/solid/reference/index.md b/mintlify/store/framework/solid/reference/index.md
new file mode 100644
index 000000000..66ef4ef24
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/index.md
@@ -0,0 +1,18 @@
+---
+id: "@tanstack/solid-store"
+title: "@tanstack/solid-store"
+---
+
+# @tanstack/solid-store
+
+## Interfaces
+
+- [UseSelectorOptions](/store/framework/solid/reference/interfaces/UseSelectorOptions)
+
+## Functions
+
+- [\_useStore](/store/framework/solid/reference/functions/useStore)
+- [createStoreContext](/store/framework/solid/reference/functions/createStoreContext)
+- [useAtom](/store/framework/solid/reference/functions/useAtom)
+- [useSelector](/store/framework/solid/reference/functions/useSelector)
+- [~~useStore~~](/store/framework/solid/reference/functions/useStore-1)
diff --git a/mintlify/store/framework/solid/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/solid/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..e027fd3dd
--- /dev/null
+++ b/mintlify/store/framework/solid/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,38 @@
+---
+id: UseSelectorOptions
+title: UseSelectorOptions
+---
+
+# Interface: UseSelectorOptions\&lt;TSelected\>
+
+Defined in: [solid-store/src/useSelector.ts:4](https://github.com/TanStack/store/blob/main/packages/solid-store/src/useSelector.ts#L4)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [solid-store/src/useSelector.ts:5](https://github.com/TanStack/store/blob/main/packages/solid-store/src/useSelector.ts#L5)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/framework/svelte/examples/atoms.md b/mintlify/store/framework/svelte/examples/atoms.md
new file mode 100644
index 000000000..45077f397
--- /dev/null
+++ b/mintlify/store/framework/svelte/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/svelte/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/examples/simple.md b/mintlify/store/framework/svelte/examples/simple.md
new file mode 100644
index 000000000..11b39e796
--- /dev/null
+++ b/mintlify/store/framework/svelte/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/svelte/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/examples/store-actions.md b/mintlify/store/framework/svelte/examples/store-actions.md
new file mode 100644
index 000000000..3aed3aa33
--- /dev/null
+++ b/mintlify/store/framework/svelte/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/svelte/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/examples/store-context.md b/mintlify/store/framework/svelte/examples/store-context.md
new file mode 100644
index 000000000..c11ed68e0
--- /dev/null
+++ b/mintlify/store/framework/svelte/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/svelte/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/examples/stores.md b/mintlify/store/framework/svelte/examples/stores.md
new file mode 100644
index 000000000..639a3354d
--- /dev/null
+++ b/mintlify/store/framework/svelte/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/svelte/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/quick-start.md b/mintlify/store/framework/svelte/quick-start.md
new file mode 100644
index 000000000..5fe7d5027
--- /dev/null
+++ b/mintlify/store/framework/svelte/quick-start.md
@@ -0,0 +1,70 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic Svelte app example to get started with the TanStack svelte-store.
+
+**store.ts**
+```ts
+import { createStore } from '@tanstack/svelte-store';
+
+// You can instantiate the store outside of Svelte files too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+});
+
+export function updateState(animal: 'cats' | 'dogs') {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+}
+```
+
+**App.svelte**
+```html
+<script lang="ts">
+	import Increment from "./Increment.svelte";
+	import Display from "./Display.svelte";
+</script>
+
+
+<h1>How many of your friends like cats or dogs?</h1>
+<p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
+<Increment animal="dogs" />
+<Display animal="dogs" />
+<Increment animal="cats" />
+<Display animal="cats" />
+```
+
+
+**Display.svelte**
+```html
+<script lang="ts">
+    import { useSelector } from '@tanstack/svelte-store';
+    import { store } from './store';
+    
+    const {animal}: { animal: 'cats' | 'dogs' } = $props()
+    const count = useSelector(store, (state) => state[animal]);
+</script>
+    
+<!-- This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render -->
+<div>{ animal }: { count.current }</div>
+```
+
+`useStore` remains available as a deprecated alias to `useSelector`.
+
+**Increment.svelte**
+```html
+<script lang="ts">
+    import { updateState } from './store';
+    
+    const { animal }: { animal: 'cats' | 'dogs' } = $props()
+</script>
+    
+<button onclick={() => updateState(animal)}>My Friend Likes { animal }</button>
+```
diff --git a/mintlify/store/framework/svelte/reference/functions/useAtom.md b/mintlify/store/framework/svelte/reference/functions/useAtom.md
new file mode 100644
index 000000000..001fa8e30
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useAtom.md
@@ -0,0 +1,49 @@
+---
+id: useAtom
+title: useAtom
+---
+
+# Function: useAtom()
+
+```ts
+function useAtom<TValue>(atom, options?): [{
+  current: TValue;
+}, (fn) => void & (value) => void];
+```
+
+Defined in: [svelte-store/src/useAtom.ts:18](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/useAtom.ts#L18)
+
+Returns the current atom holder together with a setter.
+
+Use this when a component needs to both read and update the same writable
+atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/svelte/reference/interfaces/UseSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+\[\&#123;
+  `current`: `TValue`;
+\&#125;, (`fn`) => `void` & (`value`) => `void`\]
+
+## Example
+
+```ts
+const [count, setCount] = useAtom(countAtom)
+setCount((prev) => prev + 1)
+console.log(count.current)
+```
diff --git a/mintlify/store/framework/svelte/reference/functions/useSelector.md b/mintlify/store/framework/svelte/reference/functions/useSelector.md
new file mode 100644
index 000000000..e82366e10
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useSelector.md
@@ -0,0 +1,65 @@
+---
+id: useSelector
+title: useSelector
+---
+
+# Function: useSelector()
+
+```ts
+function useSelector<TState, TSelected>(
+   source, 
+   selector, 
+   options): object;
+```
+
+Defined in: [svelte-store/src/useSelector.svelte.ts:28](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/useSelector.svelte.ts#L28)
+
+Selects a slice of state from an atom or store and exposes it through a
+rune-friendly holder object.
+
+Read the selected value from `.current`.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### source
+
+`Atom`\&lt;`TState`\> | `ReadonlyAtom`\&lt;`TState`\> | `Store`\&lt;`TState`, `any`\> | `ReadonlyStore`\&lt;`TState`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options
+
+[`UseSelectorOptions`](/store/framework/svelte/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\> = `{}`
+
+## Returns
+
+`object`
+
+### current
+
+```ts
+readonly current: TSelected;
+```
+
+## Examples
+
+```ts
+const count = useSelector(counterStore, (state) => state.count)
+console.log(count.current)
+```
+
+```ts
+const doubled = useSelector(countAtom, (value) => value * 2)
+```
diff --git a/mintlify/store/framework/svelte/reference/functions/useSetValue.md b/mintlify/store/framework/svelte/reference/functions/useSetValue.md
new file mode 100644
index 000000000..ccdc0bdf7
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "useSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/reference/functions/useSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/reference/functions/useStore-1.md b/mintlify/store/framework/svelte/reference/functions/useStore-1.md
new file mode 100644
index 000000000..8a335b6cd
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useStore-1.md
@@ -0,0 +1,62 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Function: useStore()~~
+
+```ts
+function useStore<TState, TSelected>(
+   source, 
+   selector, 
+   compare?): object;
+```
+
+Defined in: [svelte-store/src/useStore.ts:15](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/useStore.ts#L15)
+
+Deprecated alias for [useSelector](/store/framework/svelte/reference/functions/useSelector).
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### source
+
+`Atom`\&lt;`TState`\> | `ReadonlyAtom`\&lt;`TState`\> | `Store`\&lt;`TState`, `any`\> | `ReadonlyStore`\&lt;`TState`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`object`
+
+### ~~current~~
+
+```ts
+readonly current: TSelected;
+```
+
+## Example
+
+```ts
+const count = useStore(counterStore, (state) => state.count)
+console.log(count.current)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/store/framework/svelte/reference/functions/useStore.md b/mintlify/store/framework/svelte/reference/functions/useStore.md
new file mode 100644
index 000000000..f34ac3566
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useStore.md
@@ -0,0 +1,67 @@
+---
+id: _useStore
+title: _useStore
+---
+
+# Function: \_useStore()
+
+```ts
+function _useStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [{
+  current: TSelected;
+}, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [svelte-store/src/\_useStore.ts:21](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/_useStore.ts#L21)
+
+Experimental combined read+write hook for stores, mirroring useAtom's tuple
+pattern.
+
+Returns `[selected, actions]` when the store has an actions factory, or
+`[selected, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/svelte/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[\&#123;
+  `current`: `TSelected`;
+\&#125;, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```ts
+// Store with actions
+const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)
+
+// Store without actions
+const [count, setState] = _useStore(plainStore, (s) => s)
+```
diff --git a/mintlify/store/framework/svelte/reference/functions/useStoreActions.md b/mintlify/store/framework/svelte/reference/functions/useStoreActions.md
new file mode 100644
index 000000000..9cd6fddef
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/functions/useStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "useStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/svelte/reference/functions/useStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/svelte/reference/index.md b/mintlify/store/framework/svelte/reference/index.md
new file mode 100644
index 000000000..8d85c221d
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/index.md
@@ -0,0 +1,17 @@
+---
+id: "@tanstack/svelte-store"
+title: "@tanstack/svelte-store"
+---
+
+# @tanstack/svelte-store
+
+## Interfaces
+
+- [UseSelectorOptions](/store/framework/svelte/reference/interfaces/UseSelectorOptions)
+
+## Functions
+
+- [\_useStore](/store/framework/svelte/reference/functions/useStore)
+- [useAtom](/store/framework/svelte/reference/functions/useAtom)
+- [useSelector](/store/framework/svelte/reference/functions/useSelector)
+- [~~useStore~~](/store/framework/svelte/reference/functions/useStore-1)
diff --git a/mintlify/store/framework/svelte/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/svelte/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..74193e16e
--- /dev/null
+++ b/mintlify/store/framework/svelte/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,38 @@
+---
+id: UseSelectorOptions
+title: UseSelectorOptions
+---
+
+# Interface: UseSelectorOptions\&lt;TSelected\>
+
+Defined in: [svelte-store/src/useSelector.svelte.ts:3](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/useSelector.svelte.ts#L3)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [svelte-store/src/useSelector.svelte.ts:4](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/useSelector.svelte.ts#L4)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/framework/vue/examples/atoms.md b/mintlify/store/framework/vue/examples/atoms.md
new file mode 100644
index 000000000..44197e634
--- /dev/null
+++ b/mintlify/store/framework/vue/examples/atoms.md
@@ -0,0 +1,12 @@
+---
+title: "Atoms"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/examples/atoms)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/vue/atoms)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/examples/simple.md b/mintlify/store/framework/vue/examples/simple.md
new file mode 100644
index 000000000..390445732
--- /dev/null
+++ b/mintlify/store/framework/vue/examples/simple.md
@@ -0,0 +1,12 @@
+---
+title: "Simple"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/examples/simple)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/vue/simple)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/examples/store-actions.md b/mintlify/store/framework/vue/examples/store-actions.md
new file mode 100644
index 000000000..98356cc80
--- /dev/null
+++ b/mintlify/store/framework/vue/examples/store-actions.md
@@ -0,0 +1,12 @@
+---
+title: "Store Actions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/examples/store-actions)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/vue/store-actions)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/examples/store-context.md b/mintlify/store/framework/vue/examples/store-context.md
new file mode 100644
index 000000000..cd53fb058
--- /dev/null
+++ b/mintlify/store/framework/vue/examples/store-context.md
@@ -0,0 +1,12 @@
+---
+title: "Store Context"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/examples/store-context)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/vue/store-context)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/examples/stores.md b/mintlify/store/framework/vue/examples/stores.md
new file mode 100644
index 000000000..d4586dc2c
--- /dev/null
+++ b/mintlify/store/framework/vue/examples/stores.md
@@ -0,0 +1,12 @@
+---
+title: "Stores"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/examples/stores)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe/examples/vue/stores)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/quick-start.md b/mintlify/store/framework/vue/quick-start.md
new file mode 100644
index 000000000..7ecdee49d
--- /dev/null
+++ b/mintlify/store/framework/vue/quick-start.md
@@ -0,0 +1,74 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+The basic vue app example to get started with the TanStack vue-store.
+
+**App.vue**
+```vue
+<script setup>
+import Increment from './Increment.vue';
+import Display from './Display.vue';
+</script>
+
+<template>
+  <h1>How many of your friends like cats or dogs?</h1>
+  <p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
+  <Increment animal="dogs" />
+  <Display animal="dogs" />
+  <Increment animal="cats" />
+  <Display animal="cats" />
+</template>
+```
+
+**store.js**
+```js
+import { createStore } from '@tanstack/vue-store';
+
+// You can instantiate the store outside of Vue components too!
+export const store = createStore({
+  dogs: 0,
+  cats: 0,
+});
+
+export function updateState(animal) {
+  store.setState((state) => {
+    return {
+      ...state,
+      [animal]: state[animal] + 1,
+    };
+  });
+}
+```
+
+**Display.vue**
+```vue
+<script setup>
+import { useSelector } from '@tanstack/vue-store';
+import { store } from './store';
+
+const props = defineProps({ animal: String });
+const count = useSelector(store, (state) => state[props.animal]);
+</script>
+
+<!-- This will only re-render when `state[props.animal]` changes. If an unrelated store property changes, it won't re-render -->
+<template>
+  <div>{{ animal }}: {{ count }}</div>
+</template>
+```
+
+`useStore` remains available as a deprecated alias to `useSelector`.
+
+**Increment.vue**
+```vue
+<script setup>
+import { store, updateState } from './store';
+
+const props = defineProps({ animal: String });
+</script>
+
+<template>
+  <button @click="updateState(animal)">My Friend Likes {{ animal }}</button>
+</template>
+```
diff --git a/mintlify/store/framework/vue/reference/functions/useAtom.md b/mintlify/store/framework/vue/reference/functions/useAtom.md
new file mode 100644
index 000000000..21b310377
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useAtom.md
@@ -0,0 +1,46 @@
+---
+id: useAtom
+title: useAtom
+---
+
+# Function: useAtom()
+
+```ts
+function useAtom<TValue>(atom, options?): [Readonly<Ref<TValue, TValue>>, (fn) => void & (value) => void];
+```
+
+Defined in: [vue-store/src/useAtom.ts:20](https://github.com/TanStack/store/blob/main/packages/vue-store/src/useAtom.ts#L20)
+
+Returns the current atom ref together with a setter.
+
+Use this when a component needs to both read and update the same writable
+atom.
+
+## Type Parameters
+
+### TValue
+
+`TValue`
+
+## Parameters
+
+### atom
+
+`Atom`\&lt;`TValue`\>
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/vue/reference/interfaces/UseSelectorOptions)\&lt;`TValue`\>
+
+## Returns
+
+\[`Readonly`\&lt;`Ref`\&lt;`TValue`, `TValue`\>\>, (`fn`) => `void` & (`value`) => `void`\]
+
+## Example
+
+```ts
+const [count, setCount] = useAtom(countAtom)
+
+setCount((prev) => prev + 1)
+console.log(count.value)
+```
diff --git a/mintlify/store/framework/vue/reference/functions/useSelector.md b/mintlify/store/framework/vue/reference/functions/useSelector.md
new file mode 100644
index 000000000..6bd9e0c9b
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useSelector.md
@@ -0,0 +1,62 @@
+---
+id: useSelector
+title: useSelector
+---
+
+# Function: useSelector()
+
+```ts
+function useSelector<TSource, TSelected>(
+   source, 
+   selector, 
+options?): Readonly<Ref<TSelected>>;
+```
+
+Defined in: [vue-store/src/useSelector.ts:39](https://github.com/TanStack/store/blob/main/packages/vue-store/src/useSelector.ts#L39)
+
+Selects a slice of state from an atom or store and subscribes the component
+to that selection.
+
+This is the primary Vue read hook for TanStack Store. It returns a readonly
+ref containing the selected value.
+
+Omit the selector to subscribe to the whole value.
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+`SelectionSource`\&lt;`TSource`\>
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/vue/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+`Readonly`\&lt;`Ref`\&lt;`TSelected`\>\>
+
+## Examples
+
+```ts
+const count = useSelector(counterStore, (state) => state.count)
+console.log(count.value)
+```
+
+```ts
+const value = useSelector(countAtom)
+```
diff --git a/mintlify/store/framework/vue/reference/functions/useSetValue.md b/mintlify/store/framework/vue/reference/functions/useSetValue.md
new file mode 100644
index 000000000..a69583439
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useSetValue.md
@@ -0,0 +1,12 @@
+---
+title: "useSetValue"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/reference/functions/useSetValue)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/reference/functions/useStore-1.md b/mintlify/store/framework/vue/reference/functions/useStore-1.md
new file mode 100644
index 000000000..ec9dbc5e3
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useStore-1.md
@@ -0,0 +1,61 @@
+---
+id: useStore
+title: useStore
+---
+
+# ~~Function: useStore()~~
+
+```ts
+function useStore<TSource, TSelected>(
+   source, 
+   selector, 
+compare?): Readonly<Ref<TSelected>>;
+```
+
+Defined in: [vue-store/src/useStore.ts:14](https://github.com/TanStack/store/blob/main/packages/vue-store/src/useStore.ts#L14)
+
+Deprecated alias for [useSelector](/store/framework/vue/reference/functions/useSelector).
+
+## Type Parameters
+
+### TSource
+
+`TSource`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TSource`\>
+
+## Parameters
+
+### source
+
+#### get
+
+() => `TSource`
+
+#### subscribe
+
+(`listener`) => `object`
+
+### selector
+
+(`snapshot`) => `TSelected`
+
+### compare?
+
+(`a`, `b`) => `boolean`
+
+## Returns
+
+`Readonly`\&lt;`Ref`\&lt;`TSelected`\>\>
+
+## Example
+
+```ts
+const count = useStore(counterStore, (state) => state.count)
+```
+
+## Deprecated
+
+Use `useSelector` instead.
diff --git a/mintlify/store/framework/vue/reference/functions/useStore.md b/mintlify/store/framework/vue/reference/functions/useStore.md
new file mode 100644
index 000000000..327f3cb1d
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useStore.md
@@ -0,0 +1,65 @@
+---
+id: _useStore
+title: _useStore
+---
+
+# Function: \_useStore()
+
+```ts
+function _useStore<TState, TActions, TSelected>(
+   store, 
+   selector, 
+   options?): [Readonly<Ref<TSelected, TSelected>>, [TActions] extends [never] ? (updater) => void : TActions];
+```
+
+Defined in: [vue-store/src/\_useStore.ts:24](https://github.com/TanStack/store/blob/main/packages/vue-store/src/_useStore.ts#L24)
+
+Experimental combined read+write hook for stores, mirroring useAtom's tuple
+pattern.
+
+Returns `[selected, actions]` when the store has an actions factory, or
+`[selected, setState]` for plain stores.
+
+## Type Parameters
+
+### TState
+
+`TState`
+
+### TActions
+
+`TActions` *extends* `StoreActionMap`
+
+### TSelected
+
+`TSelected` = `NoInfer`\&lt;`TState`\>
+
+## Parameters
+
+### store
+
+`Store`\&lt;`TState`, `TActions`\>
+
+### selector
+
+(`state`) => `TSelected`
+
+### options?
+
+[`UseSelectorOptions`](/store/framework/vue/reference/interfaces/UseSelectorOptions)\&lt;`TSelected`\>
+
+## Returns
+
+\[`Readonly`\&lt;`Ref`\&lt;`TSelected`, `TSelected`\>\>, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+
+## Example
+
+```ts
+// Store with actions
+const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)
+console.log(cats.value)
+
+// Store without actions
+const [count, setState] = _useStore(plainStore, (s) => s)
+setState((prev) => prev + 1)
+```
diff --git a/mintlify/store/framework/vue/reference/functions/useStoreActions.md b/mintlify/store/framework/vue/reference/functions/useStoreActions.md
new file mode 100644
index 000000000..bf201aa04
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/functions/useStoreActions.md
@@ -0,0 +1,12 @@
+---
+title: "useStoreActions"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/framework/vue/reference/functions/useStoreActions)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/framework/vue/reference/index.md b/mintlify/store/framework/vue/reference/index.md
new file mode 100644
index 000000000..69f8f857b
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/index.md
@@ -0,0 +1,17 @@
+---
+id: "@tanstack/vue-store"
+title: "@tanstack/vue-store"
+---
+
+# @tanstack/vue-store
+
+## Interfaces
+
+- [UseSelectorOptions](/store/framework/vue/reference/interfaces/UseSelectorOptions)
+
+## Functions
+
+- [\_useStore](/store/framework/vue/reference/functions/useStore)
+- [useAtom](/store/framework/vue/reference/functions/useAtom)
+- [useSelector](/store/framework/vue/reference/functions/useSelector)
+- [~~useStore~~](/store/framework/vue/reference/functions/useStore-1)
diff --git a/mintlify/store/framework/vue/reference/interfaces/UseSelectorOptions.md b/mintlify/store/framework/vue/reference/interfaces/UseSelectorOptions.md
new file mode 100644
index 000000000..909254829
--- /dev/null
+++ b/mintlify/store/framework/vue/reference/interfaces/UseSelectorOptions.md
@@ -0,0 +1,38 @@
+---
+id: UseSelectorOptions
+title: UseSelectorOptions
+---
+
+# Interface: UseSelectorOptions\&lt;TSelected\>
+
+Defined in: [vue-store/src/useSelector.ts:4](https://github.com/TanStack/store/blob/main/packages/vue-store/src/useSelector.ts#L4)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (a, b) => boolean;
+```
+
+Defined in: [vue-store/src/useSelector.ts:5](https://github.com/TanStack/store/blob/main/packages/vue-store/src/useSelector.ts#L5)
+
+#### Parameters
+
+##### a
+
+`TSelected`
+
+##### b
+
+`TSelected`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/index.mdx b/mintlify/store/index.mdx
new file mode 100644
index 000000000..ebb55f2b7
--- /dev/null
+++ b/mintlify/store/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Store"
+description: "Framework-agnostic reactive data store. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Framework-agnostic reactive data store.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/store/overview">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/store">
+    Visit the canonical TanStack Store website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/store">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/store/installation.md b/mintlify/store/installation.md
new file mode 100644
index 000000000..b6fb6a30d
--- /dev/null
+++ b/mintlify/store/installation.md
@@ -0,0 +1,62 @@
+---
+title: Installation
+id: installation
+---
+
+You can install TanStack Store with any [NPM](https://npmjs.com) package manager.
+
+## React
+
+```sh
+npm install @tanstack/react-store
+```
+
+TanStack Store is compatible with React v16.8+ and is currently only compatible with ReactDOM only. If you would like to contribute to the React Native adapter, please reach out to us on [Discord](https://tlinz.com/discord).
+
+## Preact
+
+```sh
+npm install @tanstack/preact-store
+```
+
+TanStack Store is compatible with Preact 10+.
+
+## Vue
+
+```sh
+npm install @tanstack/vue-store
+```
+
+TanStack Store is compatible with Vue 2 and 3.
+
+## Angular
+
+```sh
+npm install @tanstack/angular-store
+```
+
+TanStack Store is compatible with Angular 19+
+
+## SolidJS
+
+```sh
+npm install @tanstack/solid-store
+```
+
+TanStack Store is compatible with Solid and SolidStart.
+
+## Svelte
+
+```sh
+npm install @tanstack/svelte-store
+```
+
+TanStack Store is compatible with Svelte 5.
+
+## Lit
+
+```sh
+npm install @tanstack/lit-store
+```
+
+TanStack Store is compatible with Lit 3.
diff --git a/mintlify/store/overview.md b/mintlify/store/overview.md
new file mode 100644
index 000000000..c9e4a291b
--- /dev/null
+++ b/mintlify/store/overview.md
@@ -0,0 +1,8 @@
+---
+title: Overview
+id: overview
+---
+
+TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, Svelte and Lit.
+
+TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application.
diff --git a/mintlify/store/quick-start.md b/mintlify/store/quick-start.md
new file mode 100644
index 000000000..39f8273ad
--- /dev/null
+++ b/mintlify/store/quick-start.md
@@ -0,0 +1,94 @@
+---
+title: Quick Start
+id: quick-start
+---
+
+TanStack Store is, first and foremost, a framework-agnostic signals implementation.
+
+It can be used with any of our framework adapters, but can also be used in vanilla JavaScript or TypeScript. It's currently used to power many of our library's internals.
+
+## Store
+
+You'll start by creating a new store instance, which is a wrapper around your data:
+
+```typescript
+import { createStore } from '@tanstack/store';
+
+const countStore = createStore(0);
+
+console.log(countStore.state); // 0
+countStore.setState(() => 1);
+console.log(countStore.state); // 1
+```
+
+This `Store` can then be used to track updates to your data:
+
+```typescript
+const {unsubscribe} = countStore.subscribe(() => {
+  console.log('The count is now:', countStore.state);
+});
+
+// Later, to cleanup
+unsubscribe();
+```
+
+### Batch Updates
+
+You can batch updates to a store by using the `batch` function:
+
+```typescript
+import { batch } from '@tanstack/store';
+
+// countStore.subscribers will only trigger once at the end with the final state
+batch(() => {
+  countStore.setState(() => 1);
+  countStore.setState(() => 2);
+});
+```
+
+## Derived Stores
+
+You can create derived stores that automatically update when their dependencies change:
+
+```typescript
+const count = createStore(0);
+
+const double = createStore(() => count.state * 2);
+
+console.log(double.state); // 0
+count.setState(() => 5);
+console.log(double.state); // 10
+```
+
+### Previous Derived Value
+
+You can access the previous value of a derived computation by using the `prev` argument passed to the function:
+
+```typescript
+const count = createStore(1);
+
+const sum = createStore<number>((prev) => {
+  return count.state + (prev ?? 0);
+});
+
+console.log(sum.state); // 1
+count.setState(() => 2);
+console.log(sum.state); // 3
+```
+
+## Subscriptions
+
+You can subscribe to store changes to perform side effects:
+
+```typescript
+const count = createStore(0);
+
+const {unsubscribe} = count.subscribe((state) => {
+  console.log('The count is now:', state);
+});
+
+count.setState(() => 5); // Logs: "The count is now: 5"
+
+// Later, to cleanup
+unsubscribe();
+```
diff --git a/mintlify/store/reference/classes/ReadonlyStore.md b/mintlify/store/reference/classes/ReadonlyStore.md
new file mode 100644
index 000000000..f6f272650
--- /dev/null
+++ b/mintlify/store/reference/classes/ReadonlyStore.md
@@ -0,0 +1,124 @@
+---
+id: ReadonlyStore
+title: ReadonlyStore
+---
+
+# Class: ReadonlyStore\&lt;T\>
+
+Defined in: [store.ts:59](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L59)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Implements
+
+- `Omit`\&lt;[`Store`](/store/reference/classes/Store)\&lt;`T`\>, `"setState"` \| `"actions"`\>
+
+## Constructors
+
+### Constructor
+
+```ts
+new ReadonlyStore<T>(getValue): ReadonlyStore<T>;
+```
+
+Defined in: [store.ts:64](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L64)
+
+#### Parameters
+
+##### getValue
+
+(`prev?`) => `T`
+
+#### Returns
+
+`ReadonlyStore`\&lt;`T`\>
+
+### Constructor
+
+```ts
+new ReadonlyStore<T>(initialValue): ReadonlyStore<T>;
+```
+
+Defined in: [store.ts:65](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L65)
+
+#### Parameters
+
+##### initialValue
+
+`T`
+
+#### Returns
+
+`ReadonlyStore`\&lt;`T`\>
+
+## Accessors
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): T;
+```
+
+Defined in: [store.ts:73](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L73)
+
+##### Returns
+
+`T`
+
+#### Implementation of
+
+```ts
+Omit.state
+```
+
+## Methods
+
+### get()
+
+```ts
+get(): T;
+```
+
+Defined in: [store.ts:76](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L76)
+
+#### Returns
+
+`T`
+
+#### Implementation of
+
+```ts
+Omit.get
+```
+
+***
+
+### subscribe()
+
+```ts
+subscribe(observerOrFn): Subscription;
+```
+
+Defined in: [store.ts:79](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L79)
+
+#### Parameters
+
+##### observerOrFn
+
+[`Observer`](/store/reference/type-aliases/Observer)\&lt;`T`\> | (`value`) => `void`
+
+#### Returns
+
+[`Subscription`](/store/reference/interfaces/Subscription)
+
+#### Implementation of
+
+```ts
+Omit.subscribe
+```
diff --git a/mintlify/store/reference/classes/Store.md b/mintlify/store/reference/classes/Store.md
new file mode 100644
index 000000000..2910ffcdb
--- /dev/null
+++ b/mintlify/store/reference/classes/Store.md
@@ -0,0 +1,158 @@
+---
+id: Store
+title: Store
+---
+
+# Class: Store\&lt;T, TActions\>
+
+Defined in: [store.ts:15](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L15)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### TActions
+
+`TActions` *extends* [`StoreActionMap`](/store/reference/type-aliases/StoreActionMap) = `never`
+
+## Constructors
+
+### Constructor
+
+```ts
+new Store<T, TActions>(getValue): Store<T, TActions>;
+```
+
+Defined in: [store.ts:18](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L18)
+
+#### Parameters
+
+##### getValue
+
+(`prev?`) => `T`
+
+#### Returns
+
+`Store`\&lt;`T`, `TActions`\>
+
+### Constructor
+
+```ts
+new Store<T, TActions>(initialValue): Store<T, TActions>;
+```
+
+Defined in: [store.ts:19](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L19)
+
+#### Parameters
+
+##### initialValue
+
+`T`
+
+#### Returns
+
+`Store`\&lt;`T`, `TActions`\>
+
+### Constructor
+
+```ts
+new Store<T, TActions>(initialValue, actionsFactory): Store<T, TActions>;
+```
+
+Defined in: [store.ts:20](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L20)
+
+#### Parameters
+
+##### initialValue
+
+`NonFunction`\&lt;`T`\>
+
+##### actionsFactory
+
+[`StoreActionsFactory`](/store/reference/type-aliases/StoreActionsFactory)\&lt;`T`, `TActions`\>
+
+#### Returns
+
+`Store`\&lt;`T`, `TActions`\>
+
+## Properties
+
+### actions
+
+```ts
+readonly actions: TActions;
+```
+
+Defined in: [store.ts:17](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L17)
+
+## Accessors
+
+### state
+
+#### Get Signature
+
+```ts
+get state(): T;
+```
+
+Defined in: [store.ts:46](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L46)
+
+##### Returns
+
+`T`
+
+## Methods
+
+### get()
+
+```ts
+get(): T;
+```
+
+Defined in: [store.ts:49](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L49)
+
+#### Returns
+
+`T`
+
+***
+
+### setState()
+
+```ts
+setState(updater): void;
+```
+
+Defined in: [store.ts:43](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L43)
+
+#### Parameters
+
+##### updater
+
+(`prev`) => `T`
+
+#### Returns
+
+`void`
+
+***
+
+### subscribe()
+
+```ts
+subscribe(observerOrFn): Subscription;
+```
+
+Defined in: [store.ts:52](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L52)
+
+#### Parameters
+
+##### observerOrFn
+
+[`Observer`](/store/reference/type-aliases/Observer)\&lt;`T`\> | (`value`) => `void`
+
+#### Returns
+
+[`Subscription`](/store/reference/interfaces/Subscription)
diff --git a/mintlify/store/reference/functions/batch.md b/mintlify/store/reference/functions/batch.md
new file mode 100644
index 000000000..b77cfeb99
--- /dev/null
+++ b/mintlify/store/reference/functions/batch.md
@@ -0,0 +1,22 @@
+---
+id: batch
+title: batch
+---
+
+# Function: batch()
+
+```ts
+function batch(fn): void;
+```
+
+Defined in: [atom.ts:62](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L62)
+
+## Parameters
+
+### fn
+
+() => `void`
+
+## Returns
+
+`void`
diff --git a/mintlify/store/reference/functions/createAsyncAtom.md b/mintlify/store/reference/functions/createAsyncAtom.md
new file mode 100644
index 000000000..5eec3099d
--- /dev/null
+++ b/mintlify/store/reference/functions/createAsyncAtom.md
@@ -0,0 +1,32 @@
+---
+id: createAsyncAtom
+title: createAsyncAtom
+---
+
+# Function: createAsyncAtom()
+
+```ts
+function createAsyncAtom<T>(getValue, options?): ReadonlyAtom<AsyncAtomState<T, unknown>>;
+```
+
+Defined in: [atom.ts:100](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L100)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### getValue
+
+() => `Promise`\&lt;`T`\>
+
+### options?
+
+[`AtomOptions`](/store/reference/interfaces/AtomOptions)\&lt;`AsyncAtomState`\&lt;`T`, `unknown`\>\>
+
+## Returns
+
+[`ReadonlyAtom`](/store/reference/interfaces/ReadonlyAtom)\&lt;`AsyncAtomState`\&lt;`T`, `unknown`\>\>
diff --git a/mintlify/store/reference/functions/createAtom.md b/mintlify/store/reference/functions/createAtom.md
new file mode 100644
index 000000000..4a72cf8ca
--- /dev/null
+++ b/mintlify/store/reference/functions/createAtom.md
@@ -0,0 +1,62 @@
+---
+id: createAtom
+title: createAtom
+---
+
+# Function: createAtom()
+
+## Call Signature
+
+```ts
+function createAtom<T>(getValue, options?): ReadonlyAtom<T>;
+```
+
+Defined in: [atom.ts:138](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L138)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+#### options?
+
+[`AtomOptions`](/store/reference/interfaces/AtomOptions)\&lt;`T`\>
+
+### Returns
+
+[`ReadonlyAtom`](/store/reference/interfaces/ReadonlyAtom)\&lt;`T`\>
+
+## Call Signature
+
+```ts
+function createAtom<T>(initialValue, options?): Atom<T>;
+```
+
+Defined in: [atom.ts:142](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L142)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+#### options?
+
+[`AtomOptions`](/store/reference/interfaces/AtomOptions)\&lt;`T`\>
+
+### Returns
+
+[`Atom`](/store/reference/interfaces/Atom)\&lt;`T`\>
diff --git a/mintlify/store/reference/functions/createStore.md b/mintlify/store/reference/functions/createStore.md
new file mode 100644
index 000000000..7b24f4086
--- /dev/null
+++ b/mintlify/store/reference/functions/createStore.md
@@ -0,0 +1,86 @@
+---
+id: createStore
+title: createStore
+---
+
+# Function: createStore()
+
+## Call Signature
+
+```ts
+function createStore<T>(getValue): ReadonlyStore<T>;
+```
+
+Defined in: [store.ts:86](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L86)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### getValue
+
+(`prev?`) => `T`
+
+### Returns
+
+[`ReadonlyStore`](/store/reference/classes/ReadonlyStore)\&lt;`T`\>
+
+## Call Signature
+
+```ts
+function createStore<T>(initialValue): Store<T>;
+```
+
+Defined in: [store.ts:89](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L89)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+### Parameters
+
+#### initialValue
+
+`T`
+
+### Returns
+
+[`Store`](/store/reference/classes/Store)\&lt;`T`\>
+
+## Call Signature
+
+```ts
+function createStore<T, TActions>(initialValue, actions): Store<T, TActions>;
+```
+
+Defined in: [store.ts:90](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L90)
+
+### Type Parameters
+
+#### T
+
+`T`
+
+#### TActions
+
+`TActions` *extends* [`StoreActionMap`](/store/reference/type-aliases/StoreActionMap)
+
+### Parameters
+
+#### initialValue
+
+`NonFunction`\&lt;`T`\>
+
+#### actions
+
+[`StoreActionsFactory`](/store/reference/type-aliases/StoreActionsFactory)\&lt;`T`, `TActions`\>
+
+### Returns
+
+[`Store`](/store/reference/classes/Store)\&lt;`T`, `TActions`\>
diff --git a/mintlify/store/reference/functions/flush.md b/mintlify/store/reference/functions/flush.md
new file mode 100644
index 000000000..af4df285c
--- /dev/null
+++ b/mintlify/store/reference/functions/flush.md
@@ -0,0 +1,16 @@
+---
+id: flush
+title: flush
+---
+
+# Function: flush()
+
+```ts
+function flush(): void;
+```
+
+Defined in: [atom.ts:81](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L81)
+
+## Returns
+
+`void`
diff --git a/mintlify/store/reference/functions/shallow.md b/mintlify/store/reference/functions/shallow.md
new file mode 100644
index 000000000..fb3b313a7
--- /dev/null
+++ b/mintlify/store/reference/functions/shallow.md
@@ -0,0 +1,32 @@
+---
+id: shallow
+title: shallow
+---
+
+# Function: shallow()
+
+```ts
+function shallow<T>(objA, objB): boolean;
+```
+
+Defined in: [shallow.ts:1](https://github.com/TanStack/store/blob/main/packages/store/src/shallow.ts#L1)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### objA
+
+`T`
+
+### objB
+
+`T`
+
+## Returns
+
+`boolean`
diff --git a/mintlify/store/reference/functions/toObserver.md b/mintlify/store/reference/functions/toObserver.md
new file mode 100644
index 000000000..5cda73182
--- /dev/null
+++ b/mintlify/store/reference/functions/toObserver.md
@@ -0,0 +1,39 @@
+---
+id: toObserver
+title: toObserver
+---
+
+# Function: toObserver()
+
+```ts
+function toObserver<T>(
+   nextHandler?, 
+   errorHandler?, 
+completionHandler?): Observer<T>;
+```
+
+Defined in: [atom.ts:12](https://github.com/TanStack/store/blob/main/packages/store/src/atom.ts#L12)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### nextHandler?
+
+[`Observer`](/store/reference/type-aliases/Observer)\&lt;`T`\> | (`value`) => `void`
+
+### errorHandler?
+
+(`error`) => `void`
+
+### completionHandler?
+
+() => `void`
+
+## Returns
+
+[`Observer`](/store/reference/type-aliases/Observer)\&lt;`T`\>
diff --git a/mintlify/store/reference/index.md b/mintlify/store/reference/index.md
new file mode 100644
index 000000000..38ad04ce0
--- /dev/null
+++ b/mintlify/store/reference/index.md
@@ -0,0 +1,43 @@
+---
+id: "@tanstack/store"
+title: "@tanstack/store"
+---
+
+# @tanstack/store
+
+## Classes
+
+- [ReadonlyStore](/store/reference/classes/ReadonlyStore)
+- [Store](/store/reference/classes/Store)
+
+## Interfaces
+
+- [Atom](/store/reference/interfaces/Atom)
+- [AtomOptions](/store/reference/interfaces/AtomOptions)
+- [BaseAtom](/store/reference/interfaces/BaseAtom)
+- [InternalBaseAtom](/store/reference/interfaces/InternalBaseAtom)
+- [InternalReadonlyAtom](/store/reference/interfaces/InternalReadonlyAtom)
+- [InteropSubscribable](/store/reference/interfaces/InteropSubscribable)
+- [Readable](/store/reference/interfaces/Readable)
+- [ReadonlyAtom](/store/reference/interfaces/ReadonlyAtom)
+- [Subscribable](/store/reference/interfaces/Subscribable)
+- [Subscription](/store/reference/interfaces/Subscription)
+
+## Type Aliases
+
+- [AnyAtom](/store/reference/type-aliases/AnyAtom)
+- [Observer](/store/reference/type-aliases/Observer)
+- [Selection](/store/reference/type-aliases/Selection)
+- [StoreAction](/store/reference/type-aliases/StoreAction)
+- [StoreActionMap](/store/reference/type-aliases/StoreActionMap)
+- [StoreActionsFactory](/store/reference/type-aliases/StoreActionsFactory)
+
+## Functions
+
+- [batch](/store/reference/functions/batch)
+- [createAsyncAtom](/store/reference/functions/createAsyncAtom)
+- [createAtom](/store/reference/functions/createAtom)
+- [createStore](/store/reference/functions/createStore)
+- [flush](/store/reference/functions/flush)
+- [shallow](/store/reference/functions/shallow)
+- [toObserver](/store/reference/functions/toObserver)
diff --git a/mintlify/store/reference/interfaces/Atom.md b/mintlify/store/reference/interfaces/Atom.md
new file mode 100644
index 000000000..03849de99
--- /dev/null
+++ b/mintlify/store/reference/interfaces/Atom.md
@@ -0,0 +1,62 @@
+---
+id: Atom
+title: Atom
+---
+
+# Interface: Atom\&lt;T\>
+
+Defined in: [types.ts:42](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L42)
+
+## Extends
+
+- [`BaseAtom`](/store/reference/interfaces/BaseAtom)\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`BaseAtom`](/store/reference/interfaces/BaseAtom).[`get`](/store/reference/interfaces/BaseAtom#get)
+
+***
+
+### set
+
+```ts
+set: (fn) => void & (value) => void;
+```
+
+Defined in: [types.ts:44](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L44)
+
+Sets the value of the atom using a function.
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`BaseAtom`](/store/reference/interfaces/BaseAtom).[`subscribe`](/store/reference/interfaces/BaseAtom#subscribe)
diff --git a/mintlify/store/reference/interfaces/AtomOptions.md b/mintlify/store/reference/interfaces/AtomOptions.md
new file mode 100644
index 000000000..9dc06b9bc
--- /dev/null
+++ b/mintlify/store/reference/interfaces/AtomOptions.md
@@ -0,0 +1,38 @@
+---
+id: AtomOptions
+title: AtomOptions
+---
+
+# Interface: AtomOptions\&lt;T\>
+
+Defined in: [types.ts:47](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L47)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### compare()?
+
+```ts
+optional compare: (prev, next) => boolean;
+```
+
+Defined in: [types.ts:48](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L48)
+
+#### Parameters
+
+##### prev
+
+`T`
+
+##### next
+
+`T`
+
+#### Returns
+
+`boolean`
diff --git a/mintlify/store/reference/interfaces/BaseAtom.md b/mintlify/store/reference/interfaces/BaseAtom.md
new file mode 100644
index 000000000..63726209c
--- /dev/null
+++ b/mintlify/store/reference/interfaces/BaseAtom.md
@@ -0,0 +1,55 @@
+---
+id: BaseAtom
+title: BaseAtom
+---
+
+# Interface: BaseAtom\&lt;T\>
+
+Defined in: [types.ts:33](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L33)
+
+## Extends
+
+- [`Subscribable`](/store/reference/interfaces/Subscribable)\&lt;`T`\>.[`Readable`](/store/reference/interfaces/Readable)\&lt;`T`\>
+
+## Extended by
+
+- [`Atom`](/store/reference/interfaces/Atom)
+- [`ReadonlyAtom`](/store/reference/interfaces/ReadonlyAtom)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`Readable`](/store/reference/interfaces/Readable).[`get`](/store/reference/interfaces/Readable#get)
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`Subscribable`](/store/reference/interfaces/Subscribable).[`subscribe`](/store/reference/interfaces/Subscribable#subscribe)
diff --git a/mintlify/store/reference/interfaces/InternalBaseAtom.md b/mintlify/store/reference/interfaces/InternalBaseAtom.md
new file mode 100644
index 000000000..6614db52a
--- /dev/null
+++ b/mintlify/store/reference/interfaces/InternalBaseAtom.md
@@ -0,0 +1,88 @@
+---
+id: InternalBaseAtom
+title: InternalBaseAtom
+---
+
+# Interface: InternalBaseAtom\&lt;T\>
+
+Defined in: [types.ts:35](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L35)
+
+## Extends
+
+- [`Subscribable`](/store/reference/interfaces/Subscribable)\&lt;`T`\>.[`Readable`](/store/reference/interfaces/Readable)\&lt;`T`\>
+
+## Extended by
+
+- [`InternalReadonlyAtom`](/store/reference/interfaces/InternalReadonlyAtom)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### \_snapshot
+
+```ts
+_snapshot: T;
+```
+
+Defined in: [types.ts:37](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L37)
+
+**`Internal`**
+
+***
+
+### \_update()
+
+```ts
+_update: (getValue?) => boolean;
+```
+
+Defined in: [types.ts:39](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L39)
+
+**`Internal`**
+
+#### Parameters
+
+##### getValue?
+
+`T` | (`snapshot`) => `T`
+
+#### Returns
+
+`boolean`
+
+***
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`Readable`](/store/reference/interfaces/Readable).[`get`](/store/reference/interfaces/Readable#get)
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`Subscribable`](/store/reference/interfaces/Subscribable).[`subscribe`](/store/reference/interfaces/Subscribable#subscribe)
diff --git a/mintlify/store/reference/interfaces/InternalReadonlyAtom.md b/mintlify/store/reference/interfaces/InternalReadonlyAtom.md
new file mode 100644
index 000000000..73a2c5037
--- /dev/null
+++ b/mintlify/store/reference/interfaces/InternalReadonlyAtom.md
@@ -0,0 +1,172 @@
+---
+id: InternalReadonlyAtom
+title: InternalReadonlyAtom
+---
+
+# Interface: InternalReadonlyAtom\&lt;T\>
+
+Defined in: [types.ts:53](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L53)
+
+## Extends
+
+- [`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom)\&lt;`T`\>.`ReactiveNode`
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### \_snapshot
+
+```ts
+_snapshot: T;
+```
+
+Defined in: [types.ts:37](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L37)
+
+**`Internal`**
+
+#### Inherited from
+
+[`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom).[`_snapshot`](/store/reference/interfaces/InternalBaseAtom#_snapshot)
+
+***
+
+### \_update()
+
+```ts
+_update: (getValue?) => boolean;
+```
+
+Defined in: [types.ts:39](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L39)
+
+**`Internal`**
+
+#### Parameters
+
+##### getValue?
+
+`T` | (`snapshot`) => `T`
+
+#### Returns
+
+`boolean`
+
+#### Inherited from
+
+[`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom).[`_update`](/store/reference/interfaces/InternalBaseAtom#_update)
+
+***
+
+### deps?
+
+```ts
+optional deps: Link;
+```
+
+Defined in: [alien.ts:6](https://github.com/TanStack/store/blob/main/packages/store/src/alien.ts#L6)
+
+#### Inherited from
+
+```ts
+ReactiveNode.deps
+```
+
+***
+
+### depsTail?
+
+```ts
+optional depsTail: Link;
+```
+
+Defined in: [alien.ts:7](https://github.com/TanStack/store/blob/main/packages/store/src/alien.ts#L7)
+
+#### Inherited from
+
+```ts
+ReactiveNode.depsTail
+```
+
+***
+
+### flags
+
+```ts
+flags: ReactiveFlags;
+```
+
+Defined in: [alien.ts:10](https://github.com/TanStack/store/blob/main/packages/store/src/alien.ts#L10)
+
+#### Inherited from
+
+```ts
+ReactiveNode.flags
+```
+
+***
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom).[`get`](/store/reference/interfaces/InternalBaseAtom#get)
+
+***
+
+### subs?
+
+```ts
+optional subs: Link;
+```
+
+Defined in: [alien.ts:8](https://github.com/TanStack/store/blob/main/packages/store/src/alien.ts#L8)
+
+#### Inherited from
+
+```ts
+ReactiveNode.subs
+```
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom).[`subscribe`](/store/reference/interfaces/InternalBaseAtom#subscribe)
+
+***
+
+### subsTail?
+
+```ts
+optional subsTail: Link;
+```
+
+Defined in: [alien.ts:9](https://github.com/TanStack/store/blob/main/packages/store/src/alien.ts#L9)
+
+#### Inherited from
+
+```ts
+ReactiveNode.subsTail
+```
diff --git a/mintlify/store/reference/interfaces/InteropSubscribable.md b/mintlify/store/reference/interfaces/InteropSubscribable.md
new file mode 100644
index 000000000..e5cb4f25a
--- /dev/null
+++ b/mintlify/store/reference/interfaces/InteropSubscribable.md
@@ -0,0 +1,38 @@
+---
+id: InteropSubscribable
+title: InteropSubscribable
+---
+
+# Interface: InteropSubscribable\&lt;T\>
+
+Defined in: [types.ts:5](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L5)
+
+## Extended by
+
+- [`Subscribable`](/store/reference/interfaces/Subscribable)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### subscribe()
+
+```ts
+subscribe: (observer) => Subscription;
+```
+
+Defined in: [types.ts:6](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L6)
+
+#### Parameters
+
+##### observer
+
+[`Observer`](/store/reference/type-aliases/Observer)\&lt;`T`\>
+
+#### Returns
+
+[`Subscription`](/store/reference/interfaces/Subscription)
diff --git a/mintlify/store/reference/interfaces/Readable.md b/mintlify/store/reference/interfaces/Readable.md
new file mode 100644
index 000000000..9787e7430
--- /dev/null
+++ b/mintlify/store/reference/interfaces/Readable.md
@@ -0,0 +1,51 @@
+---
+id: Readable
+title: Readable
+---
+
+# Interface: Readable\&lt;T\>
+
+Defined in: [types.ts:29](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L29)
+
+## Extends
+
+- [`Subscribable`](/store/reference/interfaces/Subscribable)\&lt;`T`\>
+
+## Extended by
+
+- [`BaseAtom`](/store/reference/interfaces/BaseAtom)
+- [`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`Subscribable`](/store/reference/interfaces/Subscribable).[`subscribe`](/store/reference/interfaces/Subscribable#subscribe)
diff --git a/mintlify/store/reference/interfaces/ReadonlyAtom.md b/mintlify/store/reference/interfaces/ReadonlyAtom.md
new file mode 100644
index 000000000..3bc2405b2
--- /dev/null
+++ b/mintlify/store/reference/interfaces/ReadonlyAtom.md
@@ -0,0 +1,60 @@
+---
+id: ReadonlyAtom
+title: ReadonlyAtom
+---
+
+# Interface: ReadonlyAtom\&lt;T\>
+
+Defined in: [types.ts:67](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L67)
+
+An atom that is read-only and cannot be set.
+
+## Example
+
+```ts
+const atom = createAtom(() => 42);
+// @ts-expect-error - Cannot set a readonly atom
+atom.set(43);
+```
+
+## Extends
+
+- [`BaseAtom`](/store/reference/interfaces/BaseAtom)\&lt;`T`\>
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### get()
+
+```ts
+get: () => T;
+```
+
+Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)
+
+#### Returns
+
+`T`
+
+#### Inherited from
+
+[`BaseAtom`](/store/reference/interfaces/BaseAtom).[`get`](/store/reference/interfaces/BaseAtom#get)
+
+***
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Inherited from
+
+[`BaseAtom`](/store/reference/interfaces/BaseAtom).[`subscribe`](/store/reference/interfaces/BaseAtom#subscribe)
diff --git a/mintlify/store/reference/interfaces/StoreActionsApi.md b/mintlify/store/reference/interfaces/StoreActionsApi.md
new file mode 100644
index 000000000..3244c384d
--- /dev/null
+++ b/mintlify/store/reference/interfaces/StoreActionsApi.md
@@ -0,0 +1,12 @@
+---
+title: "StoreActionsApi"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/store/latest/docs/reference/interfaces/StoreActionsApi)
+- [Browse the pinned upstream repository for the generated source.](https://github.com/TanStack/store/tree/78e3f862196a904d51d6bf484e7bb5ecc65cd8fe)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/store/reference/interfaces/Subscribable.md b/mintlify/store/reference/interfaces/Subscribable.md
new file mode 100644
index 000000000..29bece6a2
--- /dev/null
+++ b/mintlify/store/reference/interfaces/Subscribable.md
@@ -0,0 +1,38 @@
+---
+id: Subscribable
+title: Subscribable
+---
+
+# Interface: Subscribable\&lt;T\>
+
+Defined in: [types.ts:20](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L20)
+
+## Extends
+
+- [`InteropSubscribable`](/store/reference/interfaces/InteropSubscribable)\&lt;`T`\>
+
+## Extended by
+
+- [`Readable`](/store/reference/interfaces/Readable)
+- [`BaseAtom`](/store/reference/interfaces/BaseAtom)
+- [`InternalBaseAtom`](/store/reference/interfaces/InternalBaseAtom)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### subscribe
+
+```ts
+subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
+```
+
+Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)
+
+#### Overrides
+
+[`InteropSubscribable`](/store/reference/interfaces/InteropSubscribable).[`subscribe`](/store/reference/interfaces/InteropSubscribable#subscribe)
diff --git a/mintlify/store/reference/interfaces/Subscription.md b/mintlify/store/reference/interfaces/Subscription.md
new file mode 100644
index 000000000..5ddc5fba7
--- /dev/null
+++ b/mintlify/store/reference/interfaces/Subscription.md
@@ -0,0 +1,22 @@
+---
+id: Subscription
+title: Subscription
+---
+
+# Interface: Subscription
+
+Defined in: [types.ts:16](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L16)
+
+## Properties
+
+### unsubscribe()
+
+```ts
+unsubscribe: () => void;
+```
+
+Defined in: [types.ts:17](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L17)
+
+#### Returns
+
+`void`
diff --git a/mintlify/store/reference/type-aliases/AnyAtom.md b/mintlify/store/reference/type-aliases/AnyAtom.md
new file mode 100644
index 000000000..d41e125c3
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/AnyAtom.md
@@ -0,0 +1,12 @@
+---
+id: AnyAtom
+title: AnyAtom
+---
+
+# Type Alias: AnyAtom
+
+```ts
+type AnyAtom = BaseAtom<any>;
+```
+
+Defined in: [types.ts:51](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L51)
diff --git a/mintlify/store/reference/type-aliases/Observer.md b/mintlify/store/reference/type-aliases/Observer.md
new file mode 100644
index 000000000..d7463c617
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/Observer.md
@@ -0,0 +1,72 @@
+---
+id: Observer
+title: Observer
+---
+
+# Type Alias: Observer\&lt;T\>
+
+```ts
+type Observer<T> = object;
+```
+
+Defined in: [types.ts:10](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L10)
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Properties
+
+### complete()?
+
+```ts
+optional complete: () => void;
+```
+
+Defined in: [types.ts:13](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L13)
+
+#### Returns
+
+`void`
+
+***
+
+### error()?
+
+```ts
+optional error: (err) => void;
+```
+
+Defined in: [types.ts:12](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L12)
+
+#### Parameters
+
+##### err
+
+`unknown`
+
+#### Returns
+
+`void`
+
+***
+
+### next()?
+
+```ts
+optional next: (value) => void;
+```
+
+Defined in: [types.ts:11](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L11)
+
+#### Parameters
+
+##### value
+
+`T`
+
+#### Returns
+
+`void`
diff --git a/mintlify/store/reference/type-aliases/Selection.md b/mintlify/store/reference/type-aliases/Selection.md
new file mode 100644
index 000000000..f3fa3d362
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/Selection.md
@@ -0,0 +1,18 @@
+---
+id: Selection
+title: Selection
+---
+
+# Type Alias: Selection\&lt;TSelected\>
+
+```ts
+type Selection<TSelected> = Readable<TSelected>;
+```
+
+Defined in: [types.ts:3](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L3)
+
+## Type Parameters
+
+### TSelected
+
+`TSelected`
diff --git a/mintlify/store/reference/type-aliases/StoreAction.md b/mintlify/store/reference/type-aliases/StoreAction.md
new file mode 100644
index 000000000..1e839025a
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/StoreAction.md
@@ -0,0 +1,22 @@
+---
+id: StoreAction
+title: StoreAction
+---
+
+# Type Alias: StoreAction()
+
+```ts
+type StoreAction = (...args) => any;
+```
+
+Defined in: [store.ts:4](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L4)
+
+## Parameters
+
+### args
+
+...`any`[]
+
+## Returns
+
+`any`
diff --git a/mintlify/store/reference/type-aliases/StoreActionMap.md b/mintlify/store/reference/type-aliases/StoreActionMap.md
new file mode 100644
index 000000000..5191c5f56
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/StoreActionMap.md
@@ -0,0 +1,12 @@
+---
+id: StoreActionMap
+title: StoreActionMap
+---
+
+# Type Alias: StoreActionMap
+
+```ts
+type StoreActionMap = Record<string, StoreAction>;
+```
+
+Defined in: [store.ts:6](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L6)
diff --git a/mintlify/store/reference/type-aliases/StoreActionsFactory.md b/mintlify/store/reference/type-aliases/StoreActionsFactory.md
new file mode 100644
index 000000000..d160ec7c0
--- /dev/null
+++ b/mintlify/store/reference/type-aliases/StoreActionsFactory.md
@@ -0,0 +1,38 @@
+---
+id: StoreActionsFactory
+title: StoreActionsFactory
+---
+
+# Type Alias: StoreActionsFactory()\&lt;T, TActions\>
+
+```ts
+type StoreActionsFactory<T, TActions> = (store) => TActions;
+```
+
+Defined in: [store.ts:8](https://github.com/TanStack/store/blob/main/packages/store/src/store.ts#L8)
+
+## Type Parameters
+
+### T
+
+`T`
+
+### TActions
+
+`TActions` *extends* [`StoreActionMap`](/store/reference/type-aliases/StoreActionMap)
+
+## Parameters
+
+### store
+
+#### get
+
+[`Store`](/store/reference/classes/Store)\&lt;`T`\>\[`"get"`\]
+
+#### setState
+
+[`Store`](/store/reference/classes/Store)\&lt;`T`\>\[`"setState"`\]
+
+## Returns
+
+`TActions`
diff --git a/mintlify/table/api/core/cell.md b/mintlify/table/api/core/cell.md
new file mode 100644
index 000000000..de51a95c0
--- /dev/null
+++ b/mintlify/table/api/core/cell.md
@@ -0,0 +1,68 @@
+---
+title: Cell APIs
+---
+
+These are **core** options and API properties for all cells. More options and API properties are available for other [table features](/table/guide/features).
+
+## Cell API
+
+All cell objects have the following properties:
+
+### `id`
+
+```tsx
+id: string
+```
+
+The unique ID for the cell across the entire table.
+
+### `getValue`
+
+```tsx
+getValue: () => any
+```
+
+Returns the value for the cell, accessed via the associated column's accessor key or accessor function.
+
+### `renderValue`
+
+```tsx
+renderValue: () => any
+```
+
+Renders the value for a cell the same as `getValue`, but will return the `renderFallbackValue` if no value is found.
+
+### `row`
+
+```tsx
+row: Row<TData>
+```
+
+The associated Row object for the cell.
+
+### `column`
+
+```tsx
+column: Column<TData>
+```
+
+The associated Column object for the cell.
+
+### `getContext`
+
+```tsx
+getContext: () => {
+  table: Table<TData>
+  column: Column<TData, TValue>
+  row: Row<TData>
+  cell: Cell<TData, TValue>
+  getValue: <TTValue = TValue,>() => TTValue
+  renderValue: <TTValue = TValue,>() => TTValue | null
+}
+```
+
+Returns the rendering context (or props) for cell-based components like cells and aggregated cells. Use these props with your framework's `flexRender` utility to render these using the template of your choice:
+
+```tsx
+flexRender(cell.column.columnDef.cell, cell.getContext())
+```
diff --git a/mintlify/table/api/core/column-def.md b/mintlify/table/api/core/column-def.md
new file mode 100644
index 000000000..3522e9da6
--- /dev/null
+++ b/mintlify/table/api/core/column-def.md
@@ -0,0 +1,107 @@
+---
+title: ColumnDef APIs
+---
+
+Column definitions are plain objects with the following options:
+
+## Options
+
+### `id`
+
+```tsx
+id: string
+```
+
+The unique identifier for the column.
+
+> 🧠 A column ID is optional when:
+>
+> - An accessor column is created with an object key accessor
+> - The column header is defined as a string
+
+### `accessorKey`
+
+```tsx
+accessorKey?: string & typeof TData
+```
+
+The key of the row object to use when extracting the value for the column.
+
+### `accessorFn`
+
+```tsx
+accessorFn?: (originalRow: TData, index: number) => any
+```
+
+The accessor function to use when extracting the value for the column from each row.
+
+### `columns`
+
+```tsx
+columns?: ColumnDef<TData>[]
+```
+
+The child column defs to include in a group column.
+
+### `header`
+
+```tsx
+header?:
+  | string
+  | ((props: {
+      table: Table<TData>
+      header: Header<TData>
+      column: Column<TData>
+    }) => unknown)
+```
+
+The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).
+
+### `footer`
+
+```tsx
+footer?:
+  | string
+  | ((props: {
+      table: Table<TData>
+      header: Header<TData>
+      column: Column<TData>
+    }) => unknown)
+```
+
+The footer to display for the column. If a function is passed, it will be passed a props object for the footer and should return the rendered footer value (the exact type depends on the adapter being used).
+
+### `cell`
+
+```tsx
+cell?:
+  | string
+  | ((props: {
+      table: Table<TData>
+      row: Row<TData>
+      column: Column<TData>
+      cell: Cell<TData>
+      getValue: () => any
+      renderValue: () => any
+    }) => unknown)
+```
+
+The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).
+
+### `meta`
+
+```tsx
+meta?: ColumnMeta // This interface is extensible via declaration merging. See below!
+```
+
+The meta data to be associated with the column. We can access it anywhere when the column is available via `column.columnDef.meta`. This type is global to all tables and can be extended like so:
+
+```tsx
+import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    foo: string
+  }
+}
+```
diff --git a/mintlify/table/api/core/column.md b/mintlify/table/api/core/column.md
new file mode 100644
index 000000000..c738e4eba
--- /dev/null
+++ b/mintlify/table/api/core/column.md
@@ -0,0 +1,77 @@
+---
+title: Column APIs
+---
+
+These are **core** options and API properties for all columns. More options and API properties are available for other [table features](/table/guide/features).
+
+## Column API
+
+All column objects have the following properties:
+
+### `id`
+
+```tsx
+id: string
+```
+
+The resolved unique identifier for the column resolved in this priority:
+
+- A manual `id` property from the column def
+- The accessor key from the column def
+- The header string from the column def
+
+### `depth`
+
+```tsx
+depth: number
+```
+
+The depth of the column (if grouped) relative to the root column def array.
+
+### `accessorFn`
+
+```tsx
+accessorFn?: AccessorFn<TData>
+```
+
+The resolved accessor function to use when extracting the value for the column from each row. Will only be defined if the column def has a valid accessor key or function defined.
+
+### `columnDef`
+
+```tsx
+columnDef: ColumnDef<TData>
+```
+
+The original column def used to create the column.
+
+### `columns`
+
+```tsx
+type columns = ColumnDef<TData>[]
+```
+
+The child column (if the column is a group column). Will be an empty array if the column is not a group column.
+
+### `parent`
+
+```tsx
+parent?: Column<TData>
+```
+
+The parent column for this column. Will be undefined if this is a root column.
+
+### `getFlatColumns`
+
+```tsx
+type getFlatColumns = () => Column<TData>[]
+```
+
+Returns the flattened array of this column and all child/grand-child columns for this column.
+
+### `getLeafColumns`
+
+```tsx
+type getLeafColumns = () => Column<TData>[]
+```
+
+Returns an array of all leaf-node columns for this column. If a column has no children, it is considered the only leaf-node column.
diff --git a/mintlify/table/api/core/header-group.md b/mintlify/table/api/core/header-group.md
new file mode 100644
index 000000000..0adb70dba
--- /dev/null
+++ b/mintlify/table/api/core/header-group.md
@@ -0,0 +1,33 @@
+---
+title: HeaderGroup APIs
+---
+
+These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](/table/guide/features).
+
+## Header Group API
+
+All header group objects have the following properties:
+
+### `id`
+
+```tsx
+id: string
+```
+
+The unique identifier for the header group.
+
+### `depth`
+
+```tsx
+depth: number
+```
+
+The depth of the header group, zero-indexed based.
+
+### `headers`
+
+```tsx
+type headers = Header<TData>[]
+```
+
+An array of [Header](/table/api/core/header) objects that belong to this header group
diff --git a/mintlify/table/api/core/header.md b/mintlify/table/api/core/header.md
new file mode 100644
index 000000000..974dc74dc
--- /dev/null
+++ b/mintlify/table/api/core/header.md
@@ -0,0 +1,243 @@
+---
+title: Header APIs
+---
+
+These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](/table/guide/features).
+
+## Header API
+
+All header objects have the following properties:
+
+### `id`
+
+```tsx
+id: string
+```
+
+The unique identifier for the header.
+
+### `index`
+
+```tsx
+index: number
+```
+
+The index for the header within the header group.
+
+### `depth`
+
+```tsx
+depth: number
+```
+
+The depth of the header, zero-indexed based.
+
+### `column`
+
+```tsx
+column: Column<TData>
+```
+
+The header's associated [Column](/table/api/core/column) object
+
+### `headerGroup`
+
+```tsx
+headerGroup: HeaderGroup<TData>
+```
+
+The header's associated [HeaderGroup](/table/api/core/header-group) object
+
+### `subHeaders`
+
+```tsx
+type subHeaders = Header<TData>[]
+```
+
+The header's hierarchical sub/child headers. Will be empty if the header's associated column is a leaf-column.
+
+### `colSpan`
+
+```tsx
+colSpan: number
+```
+
+The col-span for the header.
+
+### `rowSpan`
+
+```tsx
+rowSpan: number
+```
+
+The row-span for the header.
+
+### `getLeafHeaders`
+
+```tsx
+type getLeafHeaders = () => Header<TData>[]
+```
+
+Returns the leaf headers hierarchically nested under this header.
+
+### `isPlaceholder`
+
+```tsx
+isPlaceholder: boolean
+```
+
+A boolean denoting if the header is a placeholder header
+
+### `placeholderId`
+
+```tsx
+placeholderId?: string
+```
+
+If the header is a placeholder header, this will be a unique header ID that does not conflict with any other headers across the table
+
+### `getContext`
+
+```tsx
+getContext: () => {
+  table: Table<TData>
+  header: Header<TData, TValue>
+  column: Column<TData, TValue>
+}
+```
+
+Returns the rendering context (or props) for column-based components like headers, footers and filters. Use these props with your framework's `flexRender` utility to render these using the template of your choice:
+
+```tsx
+flexRender(header.column.columnDef.header, header.getContext())
+```
+
+## Table API
+
+### `getHeaderGroups`
+
+```tsx
+type getHeaderGroups = () => HeaderGroup<TData>[]
+```
+
+Returns all header groups for the table.
+
+### `getLeftHeaderGroups`
+
+```tsx
+type getLeftHeaderGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the header groups for the left pinned columns.
+
+### `getCenterHeaderGroups`
+
+```tsx
+type getCenterHeaderGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the header groups for columns that are not pinned.
+
+### `getRightHeaderGroups`
+
+```tsx
+type getRightHeaderGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the header groups for the right pinned columns.
+
+### `getFooterGroups`
+
+```tsx
+type getFooterGroups = () => HeaderGroup<TData>[]
+```
+
+Returns all footer groups for the table.
+
+### `getLeftFooterGroups`
+
+```tsx
+type getLeftFooterGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the footer groups for the left pinned columns.
+
+### `getCenterFooterGroups`
+
+```tsx
+type getCenterFooterGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the footer groups for columns that are not pinned.
+
+### `getRightFooterGroups`
+
+```tsx
+type getRightFooterGroups = () => HeaderGroup<TData>[]
+```
+
+If pinning, returns the footer groups for the right pinned columns.
+
+### `getFlatHeaders`
+
+```tsx
+type getFlatHeaders = () => Header<TData, unknown>[]
+```
+
+Returns headers for all columns in the table, including parent headers.
+
+### `getLeftFlatHeaders`
+
+```tsx
+type getLeftFlatHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all left pinned columns in the table, including parent headers.
+
+### `getCenterFlatHeaders`
+
+```tsx
+type getCenterFlatHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all columns that are not pinned, including parent headers.
+
+### `getRightFlatHeaders`
+
+```tsx
+type getRightFlatHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all right pinned columns in the table, including parent headers.
+
+### `getLeafHeaders`
+
+```tsx
+type getLeafHeaders = () => Header<TData, unknown>[]
+```
+
+Returns headers for all leaf columns in the table, (not including parent headers).
+
+### `getLeftLeafHeaders`
+
+```tsx
+type getLeftLeafHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all left pinned leaf columns in the table, (not including parent headers).
+
+### `getCenterLeafHeaders`
+
+```tsx
+type getCenterLeafHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all columns that are not pinned, (not including parent headers).
+
+### `getRightLeafHeaders`
+
+```tsx
+type getRightLeafHeaders = () => Header<TData, unknown>[]
+```
+
+If pinning, returns headers for all right pinned leaf columns in the table, (not including parent headers).
diff --git a/mintlify/table/api/core/row.md b/mintlify/table/api/core/row.md
new file mode 100644
index 000000000..aeedd0dd5
--- /dev/null
+++ b/mintlify/table/api/core/row.md
@@ -0,0 +1,123 @@
+---
+title: Row APIs
+---
+
+These are **core** options and API properties for all rows. More options and API properties are available for other [table features](/table/guide/features).
+
+## Row API
+
+All row objects have the following properties:
+
+### `id`
+
+```tsx
+id: string
+```
+
+The resolved unique identifier for the row resolved via the `options.getRowId` option. Defaults to the row's index (or relative index if it is a subRow)
+
+### `depth`
+
+```tsx
+depth: number
+```
+
+The depth of the row (if nested or grouped) relative to the root row array.
+
+### `index`
+
+```tsx
+index: number
+```
+
+The index of the row within its parent array (or the root data array)
+
+### `original`
+
+```tsx
+original: TData
+```
+
+The original row object provided to the table.
+
+> 🧠 If the row is a grouped row, the original row object will be the first original in the group.
+
+### `parentId`
+
+```tsx
+parentId?: string
+```
+
+If nested, this row's parent row id.
+
+### `getValue`
+
+```tsx
+getValue: (columnId: string) => TValue
+```
+
+Returns the value from the row for a given columnId
+
+### `renderValue`
+
+```tsx
+renderValue: (columnId: string) => TValue
+```
+
+Renders the value from the row for a given columnId, but will return the `renderFallbackValue` if no value is found.
+
+### `getUniqueValues`
+
+```tsx
+getUniqueValues: (columnId: string) => TValue[]
+```
+
+Returns a unique array of values from the row for a given columnId.
+
+### `subRows`
+
+```tsx
+type subRows = Row<TData>[]
+```
+
+An array of subRows for the row as returned and created by the `options.getSubRows` option.
+
+### `getParentRow`
+
+```tsx
+type getParentRow = () => Row<TData> | undefined
+```
+
+Returns the parent row for the row, if it exists.
+
+### `getParentRows`
+
+```tsx
+type getParentRows = () => Row<TData>[]
+```
+
+Returns the parent rows for the row, all the way up to a root row.
+
+### `getLeafRows`
+
+```tsx
+type getLeafRows = () => Row<TData>[]
+```
+
+Returns the leaf rows for the row, not including any parent rows.
+
+### `originalSubRows`
+
+```tsx
+originalSubRows?: TData[]
+```
+
+An array of the original subRows as returned by the `options.getSubRows` option.
+
+### `getAllCells`
+
+```tsx
+type getAllCells = () => Cell<TData>[]
+```
+
+Returns all of the [Cells](/table/api/core/cell) for the row.
diff --git a/mintlify/table/api/core/table.md b/mintlify/table/api/core/table.md
new file mode 100644
index 000000000..19bca773f
--- /dev/null
+++ b/mintlify/table/api/core/table.md
@@ -0,0 +1,385 @@
+---
+title: Table APIs
+---
+
+## `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable`
+
+```tsx
+type useReactTable = <TData extends AnyData>(
+  options: TableOptions<TData>
+) => Table<TData>
+```
+
+These functions are used to create a table. Which one you use depends on which framework adapter you are using.
+
+## Options
+
+These are **core** options and API properties for the table. More options and API properties are available for other [table features](/table/guide/features).
+
+### `data`
+
+```tsx
+data: TData[]
+```
+
+The data for the table to display. This array should match the type you provided to `table.setRowType<...>`, but in theory could be an array of anything. It's common for each item in the array to be an object of key/values but this is not required. Columns can access this data via string/index or a functional accessor to return anything they want.
+
+When the `data` option changes reference (compared via `Object.is`), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
+
+> 🧠 Make sure your `data` option is only changing when you want the table to reprocess. Providing an inline `[]` or constructing the data array as a new object every time you want to render the table will result in a _lot_ of unnecessary re-processing. This can easily go unnoticed in smaller tables, but you will likely notice it in larger tables.
+
+### `columns`
+
+```tsx
+type columns = ColumnDef<TData>[]
+```
+
+The array of column defs to use for the table. See the [Column Def Guide](/table/guide/column-defs) for more information on creating column definitions.
+
+### `defaultColumn`
+
+```tsx
+defaultColumn?: Partial<ColumnDef<TData>>
+```
+
+Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc. All column definitions passed to `options.columns` are merged with this default column definition to produce the final column definitions.
+
+### `initialState`
+
+```tsx
+initialState?: Partial<
+  VisibilityTableState &
+  ColumnOrderTableState &
+  ColumnPinningTableState &
+  FiltersTableState &
+  SortingTableState &
+  ExpandedTableState &
+  GroupingTableState &
+  ColumnSizingTableState &
+  PaginationTableState &
+  RowSelectionTableState
+>
+```
+
+Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.
+
+> 🧠 Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
+
+### `autoResetAll`
+
+```tsx
+autoResetAll?: boolean
+```
+
+Set this option to override any of the `autoReset...` feature options.
+
+### `meta`
+
+```tsx
+meta?: TableMeta // This interface is extensible via declaration merging. See below!
+```
+
+You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta` This type is global to all tables and can be extended like so:
+
+```tsx
+declare module '@tanstack/table-core' {
+  interface TableMeta<TData extends RowData> {
+    foo: string
+  }
+}
+```
+
+> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data](https://github.com/TanStack/table/tree/main/examples/react/editable-data) example.
+
+### `state`
+
+```tsx
+state?: Partial<
+  VisibilityTableState &
+  ColumnOrderTableState &
+  ColumnPinningTableState &
+  FiltersTableState &
+  SortingTableState &
+  ExpandedTableState &
+  GroupingTableState &
+  ColumnSizingTableState &
+  PaginationTableState &
+  RowSelectionTableState
+>
+```
+
+The `state` option can be used to optionally _control_ part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the `onStateChange` option.
+
+### `onStateChange`
+
+```tsx
+onStateChange: (updater: Updater<TableState>) => void
+```
+
+The `onStateChange` option can be used to optionally listen to state changes within the table. If you provide this options, you will be responsible for controlling and updating the table state yourself. You can provide the state back to the table with the `state` option.
+
+### `debugAll`
+
+> ⚠️ Debugging is only available in development mode.
+
+```tsx
+debugAll?: boolean
+```
+
+Set this option to true to output all debugging information to the console.
+
+### `debugTable`
+
+> ⚠️ Debugging is only available in development mode.
+
+```tsx
+debugTable?: boolean
+```
+
+Set this option to true to output table debugging information to the console.
+
+### `debugHeaders`
+
+> ⚠️ Debugging is only available in development mode.
+
+```tsx
+debugHeaders?: boolean
+```
+
+Set this option to true to output header debugging information to the console.
+
+### `debugColumns`
+
+> ⚠️ Debugging is only available in development mode.
+
+```tsx
+debugColumns?: boolean
+```
+
+Set this option to true to output column debugging information to the console.
+
+### `debugRows`
+
+> ⚠️ Debugging is only available in development mode.
+
+```tsx
+debugRows?: boolean
+```
+
+Set this option to true to output row debugging information to the console.
+
+### `_features`
+
+```tsx
+_features?: TableFeature[]
+```
+
+An array of extra features that you can add to the table instance.
+
+### `render`
+
+> ⚠️ This option is only necessary if you are implementing a table adapter.
+
+```tsx
+type render = <TProps>(template: Renderable<TProps>, props: TProps) => any
+```
+
+The `render` option provides a renderer implementation for the table. This implementation is used to turn a table's various column header and cell templates into a result that is supported by the user's framework.
+
+### `mergeOptions`
+
+> ⚠️ This option is only necessary if you are implementing a table adapter.
+
+```tsx
+type mergeOptions = <T>(defaultOptions: T, options: Partial<T>) => T
+```
+
+This option is used to optionally implement the merging of table options. Some framework like solid-js use proxies to track reactivity and usage, so merging reactive objects needs to be handled carefully. This option inverts control of this process to the adapter.
+
+### `getCoreRowModel`
+
+```tsx
+getCoreRowModel: (table: Table<TData>) => () => RowModel<TData>
+```
+
+This required option is a factory for a function that computes and returns the core row model for the table. It is called **once** per table and should return a **new function** which will calculate and return the row model for the table.
+
+A default implementation is provided via any table adapter's `{ getCoreRowModel }` export.
+
+### `getSubRows`
+
+```tsx
+getSubRows?: (
+  originalRow: TData,
+  index: number
+) => undefined | TData[]
+```
+
+This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
+
+### `getRowId`
+
+```tsx
+getRowId?: (
+  originalRow: TData,
+  index: number,
+  parent?: Row<TData>
+) => string
+```
+
+This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+
+## Table API
+
+These properties and methods are available on the table object:
+
+### `initialState`
+
+```tsx
+initialState: VisibilityTableState &
+  ColumnOrderTableState &
+  ColumnPinningTableState &
+  FiltersTableState &
+  SortingTableState &
+  ExpandedTableState &
+  GroupingTableState &
+  ColumnSizingTableState &
+  PaginationTableState &
+  RowSelectionTableState
+```
+
+This is the resolved initial state of the table.
+
+### `reset`
+
+```tsx
+reset: () => void
+```
+
+Call this function to reset the table state to the initial state.
+
+### `getState`
+
+```tsx
+getState: () => TableState
+```
+
+Call this function to get the table's current state. It's recommended to use this function and its state, especially when managing the table state manually. It is the exact same state used internally by the table for every feature and function it provides.
+
+> 🧠 The state returned by this function is the shallow-merged result of the automatically-managed internal table-state and any manually-managed state passed via `options.state`.
+
+### `setState`
+
+```tsx
+setState: (updater: Updater<TableState>) => void
+```
+
+Call this function to update the table state. It's recommended you pass an updater function in the form of `(prevState) => newState` to update the state, but a direct object can also be passed.
+
+> 🧠 If `options.onStateChange` is provided, it will be triggered by this function with the new state.
+
+### `options`
+
+```tsx
+options: TableOptions<TData>
+```
+
+A read-only reference to the table's current options.
+
+> ⚠️ This property is generally used internally or by adapters. It can be updated by passing new options to your table. This is different per adapter. For adapters themselves, table options must be updated via the `setOptions` function.
+
+### `setOptions`
+
+```tsx
+setOptions: (newOptions: Updater<TableOptions<TData>>) => void
+```
+
+> ⚠️ This function is generally used by adapters to update the table options. It can be used to update the table options directly, but it is generally not recommended to bypass your adapters strategy for updating table options.
+
+### `getCoreRowModel`
+
+```tsx
+getCoreRowModel: () => {
+  rows: Row<TData>[],
+  flatRows: Row<TData>[],
+  rowsById: Record<string, Row<TData>>,
+}
+```
+
+Returns the core row model before any processing has been applied.
+
+### `getRowModel`
+
+```tsx
+getRowModel: () => {
+  rows: Row<TData>[],
+  flatRows: Row<TData>[],
+  rowsById: Record<string, Row<TData>>,
+}
+```
+
+Returns the final model after all processing from other used features has been applied.
+
+### `getAllColumns`
+
+```tsx
+type getAllColumns = () => Column<TData>[]
+```
+
+Returns all columns in the table in their normalized and nested hierarchy, mirrored from the column defs passed to the table.
+
+### `getAllFlatColumns`
+
+```tsx
+type getAllFlatColumns = () => Column<TData>[]
+```
+
+Returns all columns in the table flattened to a single level. This includes parent column objects throughout the hierarchy.
+
+### `getAllLeafColumns`
+
+```tsx
+type getAllLeafColumns = () => Column<TData>[]
+```
+
+Returns all leaf-node columns in the table flattened to a single level. This does not include parent columns.
+
+### `getColumn`
+
+```tsx
+type getColumn = (id: string) => Column<TData> | undefined
+```
+
+Returns a single column by its ID.
+
+### `getHeaderGroups`
+
+```tsx
+type getHeaderGroups = () => HeaderGroup<TData>[]
+```
+
+Returns the header groups for the table.
+
+### `getFooterGroups`
+
+```tsx
+type getFooterGroups = () => HeaderGroup<TData>[]
+```
+
+Returns the footer groups for the table.
+
+### `getFlatHeaders`
+
+```tsx
+type getFlatHeaders = () => Header<TData>[]
+```
+
+Returns a flattened array of Header objects for the table, including parent headers.
+
+### `getLeafHeaders`
+
+```tsx
+type getLeafHeaders = () => Header<TData>[]
+```
+
+Returns a flattened array of leaf-node Header objects for the table.
diff --git a/mintlify/table/api/features/column-faceting.md b/mintlify/table/api/features/column-faceting.md
new file mode 100644
index 000000000..2a951da44
--- /dev/null
+++ b/mintlify/table/api/features/column-faceting.md
@@ -0,0 +1,46 @@
+---
+title: Column Faceting APIs
+id: column-faceting
+---
+
+## Column API
+
+### `getFacetedRowModel`
+
+```tsx
+type getFacetedRowModel = () => RowModel<TData>
+```
+
+> ⚠️ Requires that you pass a valid `getFacetedRowModel` function to `options.facetedRowModel`. A default implementation is provided via the exported `getFacetedRowModel` function.
+
+Returns the row model with all other column filters applied, excluding its own filter. Useful for displaying faceted result counts.
+
+### `getFacetedUniqueValues`
+
+```tsx
+getFacetedUniqueValues: () => Map<any, number>
+```
+
+> ⚠️ Requires that you pass a valid `getFacetedUniqueValues` function to `options.getFacetedUniqueValues`. A default implementation is provided via the exported `getFacetedUniqueValues` function.
+
+A function that **computes and returns** a `Map` of unique values and their occurrences derived from `column.getFacetedRowModel`. Useful for displaying faceted result values.
+
+### `getFacetedMinMaxValues`
+
+```tsx
+getFacetedMinMaxValues: () => Map<any, number>
+```
+
+> ⚠️ Requires that you pass a valid `getFacetedMinMaxValues` function to `options.getFacetedMinMaxValues`. A default implementation is provided via the exported `getFacetedMinMaxValues` function.
+
+A function that **computes and returns** a min/max tuple derived from `column.getFacetedRowModel`. Useful for displaying faceted result values.
+
+## Table Options
+
+### `getColumnFacetedRowModel`
+
+```tsx
+getColumnFacetedRowModel: (columnId: string) => RowModel<TData>
+```
+
+Returns the faceted row model for a given columnId.
diff --git a/mintlify/table/api/features/column-filtering.md b/mintlify/table/api/features/column-filtering.md
new file mode 100644
index 000000000..b32d4f314
--- /dev/null
+++ b/mintlify/table/api/features/column-filtering.md
@@ -0,0 +1,396 @@
+---
+title: Column Filtering APIs
+id: column-filtering
+---
+
+## Can-Filter
+
+The ability for a column to be **column** filtered is determined by the following:
+
+- The column was defined with a valid `accessorKey`/`accessorFn`.
+- `column.enableColumnFilter` is not set to `false`
+- `options.enableColumnFilters` is not set to `false`
+- `options.enableFilters` is not set to `false`
+
+## State
+
+Filter state is stored on the table using the following shape:
+
+```tsx
+export interface ColumnFiltersTableState {
+  columnFilters: ColumnFiltersState
+}
+
+export type ColumnFiltersState = ColumnFilter[]
+
+export interface ColumnFilter {
+  id: string
+  value: unknown
+}
+```
+
+## Filter Functions
+
+The following filter functions are built-in to the table core:
+
+- `includesString`
+  - Case-insensitive string inclusion
+- `includesStringSensitive`
+  - Case-sensitive string inclusion
+- `equalsString`
+  - Case-insensitive string equality
+- `equalsStringSensitive`
+  - Case-sensitive string equality
+- `arrIncludes`
+  - Item inclusion within an array
+- `arrIncludesAll`
+  - All items included in an array
+- `arrIncludesSome`
+  - Some items included in an array
+- `equals`
+  - Object/referential equality `Object.is`/`===`
+- `weakEquals`
+  - Weak object/referential equality `==`
+- `inNumberRange`
+  - Number range inclusion
+
+Every filter function receives:
+
+- The row to filter
+- The columnId to use to retrieve the row's value
+- The filter value
+
+and should return `true` if the row should be included in the filtered rows, and `false` if it should be removed.
+
+This is the type signature for every filter function:
+
+```tsx
+export type FilterFn<TData extends AnyData> = {
+  (
+    row: Row<TData>,
+    columnId: string,
+    filterValue: any,
+    addMeta: (meta: any) => void
+  ): boolean
+  resolveFilterValue?: TransformFilterValueFn<TData>
+  autoRemove?: ColumnFilterAutoRemoveTestFn<TData>
+  addMeta?: (meta?: any) => void
+}
+
+export type TransformFilterValueFn<TData extends AnyData> = (
+  value: any,
+  column?: Column<TData>
+) => unknown
+
+export type ColumnFilterAutoRemoveTestFn<TData extends AnyData> = (
+  value: any,
+  column?: Column<TData>
+) => boolean
+
+export type CustomFilterFns<TData extends AnyData> = Record<
+  string,
+  FilterFn<TData>
+>
+```
+
+### `filterFn.resolveFilterValue`
+
+This optional "hanging" method on any given `filterFn` allows the filter function to transform/sanitize/format the filter value before it is passed to the filter function.
+
+### `filterFn.autoRemove`
+
+This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.
+
+#### Using Filter Functions
+
+Filter functions can be used/referenced/defined by passing the following to `columnDefinition.filterFn`:
+
+- A `string` that references a built-in filter function
+- A function directly provided to the `columnDefinition.filterFn` option
+
+The final list of filter functions available for the `columnDef.filterFn` option use the following type:
+
+```tsx
+export type FilterFnOption<TData extends AnyData> =
+  | 'auto'
+  | BuiltInFilterFn
+  | FilterFn<TData>
+```
+
+#### Filter Meta
+
+Filtering data can often expose additional information about the data that can be used to aid other future operations on the same data. A good example of this concept is a ranking-system like that of [`match-sorter`](https://github.com/kentcdodds/match-sorter) that simultaneously ranks, filters and sorts data. While utilities like `match-sorter` make a lot of sense for single-dimensional filter+sort tasks, the decoupled filtering/sorting architecture of building a table makes them very difficult and slow to use.
+
+To make a ranking/filtering/sorting system work with tables, `filterFn`s can optionally mark results with a **filter meta** value that can be used later to sort/group/etc the data to your liking. This is done by calling the `addMeta` function supplied to your custom `filterFn`.
+
+Below is an example using our own `match-sorter-utils` package (a utility fork of `match-sorter`) to rank, filter, and sort the data
+
+```tsx
+import { sortingFns } from '@tanstack/react-table'
+
+import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
+
+const fuzzyFilter = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the ranking info
+  addMeta(itemRank)
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const fuzzySort = (rowA, rowB, columnId) => {
+  let dir = 0
+
+  // Only sort by rank if the column has ranking information
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId]!,
+      rowB.columnFiltersMeta[columnId]!
+    )
+  }
+
+  // Provide an alphanumeric fallback for when the item ranks are equal
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+}
+```
+
+## Column Def Options
+
+### `filterFn`
+
+```tsx
+filterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns
+```
+
+The filter function to use with this column.
+
+Options:
+
+- A `string` referencing a [built-in filter function](#filter-functions))
+- A [custom filter function](#filter-functions)
+
+### `enableColumnFilter`
+
+```tsx
+enableColumnFilter?: boolean
+```
+
+Enables/disables the **column** filter for this column.
+
+## Column API
+
+### `getCanFilter`
+
+```tsx
+getCanFilter: () => boolean
+```
+
+Returns whether or not the column can be **column** filtered.
+
+### `getFilterIndex`
+
+```tsx
+getFilterIndex: () => number
+```
+
+Returns the index (including `-1`) of the column filter in the table's `state.columnFilters` array.
+
+### `getIsFiltered`
+
+```tsx
+getIsFiltered: () => boolean
+```
+
+Returns whether or not the column is currently filtered.
+
+### `getFilterValue`
+
+```tsx
+getFilterValue: () => unknown
+```
+
+Returns the current filter value of the column.
+
+### `setFilterValue`
+
+```tsx
+setFilterValue: (updater: Updater<any>) => void
+```
+
+A function that sets the current filter value for the column. You can pass it a value or an updater function for immutability-safe operations on existing values.
+
+### `getAutoFilterFn`
+
+```tsx
+getAutoFilterFn: (columnId: string) => FilterFn<TData> | undefined
+```
+
+Returns an automatically calculated filter function for the column based off of the columns first known value.
+
+### `getFilterFn`
+
+```tsx
+getFilterFn: (columnId: string) => FilterFn<TData> | undefined
+```
+
+Returns the filter function (either user-defined or automatic, depending on configuration) for the columnId specified.
+
+## Row API
+
+### `columnFilters`
+
+```tsx
+columnFilters: Record<string, boolean>
+```
+
+The column filters map for the row. This object tracks whether a row is passing/failing specific filters by their column ID.
+
+### `columnFiltersMeta`
+
+```tsx
+columnFiltersMeta: Record<string, any>
+```
+
+The column filters meta map for the row. This object tracks any filter meta for a row as optionally provided during the filtering process.
+
+## Table Options
+
+### `filterFns`
+
+```tsx
+filterFns?: Record<string, FilterFn>
+```
+
+This option allows you to define custom filter functions that can be referenced in a column's `filterFn` option by their key.
+Example:
+
+```tsx
+declare module '@tanstack/[adapter]-table' {
+  interface FilterFns {
+    myCustomFilter: FilterFn<unknown>
+  }
+}
+
+const column = columnHelper.data('key', {
+  filterFn: 'myCustomFilter',
+})
+
+const table = useReactTable({
+  columns: [column],
+  filterFns: {
+    myCustomFilter: (rows, columnIds, filterValue) => {
+      // return the filtered rows
+    },
+  },
+})
+```
+
+### `filterFromLeafRows`
+
+```tsx
+filterFromLeafRows?: boolean
+```
+
+By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included).
+
+### `maxLeafRowFilterDepth`
+
+```tsx
+maxLeafRowFilterDepth?: number
+```
+
+By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+
+This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter.
+
+### `enableFilters`
+
+```tsx
+enableFilters?: boolean
+```
+
+Enables/disables all filters for the table.
+
+### `manualFiltering`
+
+```tsx
+manualFiltering?: boolean
+```
+
+Disables the `getFilteredRowModel` from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
+
+### `onColumnFiltersChange`
+
+```tsx
+onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.columnFilters` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### `enableColumnFilters`
+
+```tsx
+enableColumnFilters?: boolean
+```
+
+Enables/disables **all** column filters for the table.
+
+### `getFilteredRowModel`
+
+```tsx
+getFilteredRowModel?: (
+  table: Table<TData>
+) => () => RowModel<TData>
+```
+
+If provided, this function is called **once** per table and should return a **new function** which will calculate and return the row model for the table when it's filtered.
+
+- For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model.
+- For client-side filtering, this function is required. A default implementation is provided via any table adapter's `{ getFilteredRowModel }` export.
+
+Example:
+
+```tsx
+import { getFilteredRowModel } from '@tanstack/[adapter]-table'
+
+
+  getFilteredRowModel: getFilteredRowModel(),
+})
+```
+
+## Table API
+
+### `setColumnFilters`
+
+```tsx
+setColumnFilters: (updater: Updater<ColumnFiltersState>) => void
+```
+
+Sets or updates the `state.columnFilters` state.
+
+### `resetColumnFilters`
+
+```tsx
+resetColumnFilters: (defaultState?: boolean) => void
+```
+
+Resets the **columnFilters** state to `initialState.columnFilters`, or `true` can be passed to force a default blank state reset to `[]`.
+
+### `getPreFilteredRowModel`
+
+```tsx
+getPreFilteredRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table before any **column** filtering has been applied.
+
+### `getFilteredRowModel`
+
+```tsx
+getFilteredRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table after **column** filtering has been applied.
diff --git a/mintlify/table/api/features/column-ordering.md b/mintlify/table/api/features/column-ordering.md
new file mode 100644
index 000000000..37bfb9533
--- /dev/null
+++ b/mintlify/table/api/features/column-ordering.md
@@ -0,0 +1,70 @@
+---
+title: Column Ordering APIs
+id: column-ordering
+---
+
+## State
+
+Column ordering state is stored on the table using the following shape:
+
+```tsx
+export type ColumnOrderTableState = {
+  columnOrder: ColumnOrderState
+}
+
+export type ColumnOrderState = string[]
+```
+
+## Table Options
+
+### `onColumnOrderChange`
+
+```tsx
+onColumnOrderChange?: OnChangeFn<ColumnOrderState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.columnOrder` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+## Table API
+
+### `setColumnOrder`
+
+```tsx
+setColumnOrder: (updater: Updater<ColumnOrderState>) => void
+```
+
+Sets or updates the `state.columnOrder` state.
+
+### `resetColumnOrder`
+
+```tsx
+resetColumnOrder: (defaultState?: boolean) => void
+```
+
+Resets the **columnOrder** state to `initialState.columnOrder`, or `true` can be passed to force a default blank state reset to `[]`.
+
+## Column API
+
+### `getIndex`
+
+```tsx
+getIndex: (position?: ColumnPinningPosition) => number
+```
+
+Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table.
+
+### `getIsFirstColumn`
+
+```tsx
+getIsFirstColumn: (position?: ColumnPinningPosition) => boolean
+```
+
+Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table.
+
+### `getIsLastColumn`
+
+```tsx
+getIsLastColumn: (position?: ColumnPinningPosition) => boolean
+```
+
+Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table.
\ No newline at end of file
diff --git a/mintlify/table/api/features/column-pinning.md b/mintlify/table/api/features/column-pinning.md
new file mode 100644
index 000000000..a312b3382
--- /dev/null
+++ b/mintlify/table/api/features/column-pinning.md
@@ -0,0 +1,266 @@
+---
+title: Column Pinning APIs
+id: column-pinning
+---
+
+## Can-Pin
+
+The ability for a column to be **pinned** is determined by the following:
+
+- `options.enablePinning` is not set to `false`
+- `options.enableColumnPinning` is not set to `false`
+- `columnDefinition.enablePinning` is not set to `false`
+
+## State
+
+Pinning state is stored on the table using the following shape:
+
+```tsx
+export type ColumnPinningPosition = false | 'left' | 'right'
+
+export type ColumnPinningState = {
+  left?: string[]
+  right?: string[]
+}
+
+
+export type ColumnPinningTableState = {
+  columnPinning: ColumnPinningState
+}
+```
+
+## Table Options
+
+### `enableColumnPinning`
+
+```tsx
+enableColumnPinning?: boolean
+```
+
+Enables/disables column pinning for all columns in the table.
+
+### `onColumnPinningChange`
+
+```tsx
+onColumnPinningChange?: OnChangeFn<ColumnPinningState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.columnPinning` changes. This overrides the default internal state management, so you will also need to supply `state.columnPinning` from your own managed state.
+
+## Column Def Options
+
+### `enablePinning`
+
+```tsx
+enablePinning?: boolean
+```
+
+Enables/disables pinning for the column.
+
+## Table API
+
+### `setColumnPinning`
+
+```tsx
+setColumnPinning: (updater: Updater<ColumnPinningState>) => void
+```
+
+Sets or updates the `state.columnPinning` state.
+
+### `resetColumnPinning`
+
+```tsx
+resetColumnPinning: (defaultState?: boolean) => void
+```
+
+Resets the **columnPinning** state to `initialState.columnPinning`, or `true` can be passed to force a default blank state reset to `{ left: [], right: [], }`.
+
+### `getIsSomeColumnsPinned`
+
+```tsx
+getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean
+```
+
+Returns whether or not any columns are pinned. Optionally specify to only check for pinned columns in either the `left` or `right` position.
+
+_Note: Does not account for column visibility_
+
+### `getLeftHeaderGroups`
+
+```tsx
+getLeftHeaderGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the left pinned header groups for the table.
+
+### `getCenterHeaderGroups`
+
+```tsx
+getCenterHeaderGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the unpinned/center header groups for the table.
+
+### `getRightHeaderGroups`
+
+```tsx
+getRightHeaderGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the right pinned header groups for the table.
+
+### `getLeftFooterGroups`
+
+```tsx
+getLeftFooterGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the left pinned footer groups for the table.
+
+### `getCenterFooterGroups`
+
+```tsx
+getCenterFooterGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the unpinned/center footer groups for the table.
+
+### `getRightFooterGroups`
+
+```tsx
+getRightFooterGroups: () => HeaderGroup<TData>[]
+```
+
+Returns the right pinned footer groups for the table.
+
+### `getLeftFlatHeaders`
+
+```tsx
+getLeftFlatHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of left pinned headers for the table, including parent headers.
+
+### `getCenterFlatHeaders`
+
+```tsx
+getCenterFlatHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of unpinned/center headers for the table, including parent headers.
+
+### `getRightFlatHeaders`
+
+```tsx
+getRightFlatHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of right pinned headers for the table, including parent headers.
+
+### `getLeftLeafHeaders`
+
+```tsx
+getLeftLeafHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of leaf-node left pinned headers for the table.
+
+### `getCenterLeafHeaders`
+
+```tsx
+getCenterLeafHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of leaf-node unpinned/center headers for the table.
+
+### `getRightLeafHeaders`
+
+```tsx
+getRightLeafHeaders: () => Header<TData>[]
+```
+
+Returns a flat array of leaf-node right pinned headers for the table.
+
+### `getLeftLeafColumns`
+
+```tsx
+getLeftLeafColumns: () => Column<TData>[]
+```
+
+Returns all left pinned leaf columns.
+
+### `getRightLeafColumns`
+
+```tsx
+getRightLeafColumns: () => Column<TData>[]
+```
+
+Returns all right pinned leaf columns.
+
+### `getCenterLeafColumns`
+
+```tsx
+getCenterLeafColumns: () => Column<TData>[]
+```
+
+Returns all center pinned (unpinned) leaf columns.
+
+## Column API
+
+### `getCanPin`
+
+```tsx
+getCanPin: () => boolean
+```
+
+Returns whether or not the column can be pinned.
+
+### `getPinnedIndex`
+
+```tsx
+getPinnedIndex: () => number
+```
+
+Returns the numeric pinned index of the column within a pinned column group.
+
+### `getIsPinned`
+
+```tsx
+getIsPinned: () => ColumnPinningPosition
+```
+
+Returns the pinned position of the column. (`'left'`, `'right'` or `false`)
+
+### `pin`
+
+```tsx
+pin: (position: ColumnPinningPosition) => void
+```
+
+Pins a column to the `'left'` or `'right'`, or unpins the column to the center if `false` is passed.
+
+## Row API
+
+### `getLeftVisibleCells`
+
+```tsx
+getLeftVisibleCells: () => Cell<TData>[]
+```
+
+Returns all left pinned leaf cells in the row.
+
+### `getRightVisibleCells`
+
+```tsx
+getRightVisibleCells: () => Cell<TData>[]
+```
+
+Returns all right pinned leaf cells in the row.
+
+### `getCenterVisibleCells`
+
+```tsx
+getCenterVisibleCells: () => Cell<TData>[]
+```
+
+Returns all center pinned (unpinned) leaf cells in the row.
diff --git a/mintlify/table/api/features/column-sizing.md b/mintlify/table/api/features/column-sizing.md
new file mode 100644
index 000000000..0bf7631be
--- /dev/null
+++ b/mintlify/table/api/features/column-sizing.md
@@ -0,0 +1,253 @@
+---
+title: Column Sizing APIs
+id: column-sizing
+---
+
+## State
+
+Column sizing state is stored on the table using the following shape:
+
+```tsx
+export type ColumnSizingTableState = {
+  columnSizing: ColumnSizing
+  columnSizingInfo: ColumnSizingInfoState
+}
+
+export type ColumnSizing = Record<string, number>
+
+export type ColumnSizingInfoState = {
+  startOffset: null | number
+  startSize: null | number
+  deltaOffset: null | number
+  deltaPercentage: null | number
+  isResizingColumn: false | string
+  columnSizingStart: [string, number][]
+}
+```
+
+## Column Def Options
+
+### `enableResizing`
+
+```tsx
+enableResizing?: boolean
+```
+
+Enables or disables column resizing for the column.
+
+### `size`
+
+```tsx
+size?: number
+```
+
+The desired size for the column
+
+### `minSize`
+
+```tsx
+minSize?: number
+```
+
+The minimum allowed size for the column
+
+### `maxSize`
+
+```tsx
+maxSize?: number
+```
+
+The maximum allowed size for the column
+
+## Column API
+
+### `getSize`
+
+```tsx
+getSize: () => number
+```
+
+Returns the current size of the column
+
+### `getStart`
+
+```tsx
+getStart: (position?: ColumnPinningPosition) => number
+```
+
+Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all preceding columns.
+
+Useful for sticky or absolute positioning of columns. (e.g. `left` or `transform`)
+
+### `getAfter`
+
+```tsx
+getAfter: (position?: ColumnPinningPosition) => number
+```
+
+Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all succeeding columns.
+
+Useful for sticky or absolute positioning of columns. (e.g. `right` or `transform`)
+
+### `getCanResize`
+
+```tsx
+getCanResize: () => boolean
+```
+
+Returns `true` if the column can be resized.
+
+### `getIsResizing`
+
+```tsx
+getIsResizing: () => boolean
+```
+
+Returns `true` if the column is currently being resized.
+
+### `resetSize`
+
+```tsx
+resetSize: () => void
+```
+
+Resets the column size to its initial size.
+
+## Header API
+
+### `getSize`
+
+```tsx
+getSize: () => number
+```
+
+Returns the size for the header, calculated by summing the size of all leaf-columns that belong to it.
+
+### `getStart`
+
+```tsx
+getStart: (position?: ColumnPinningPosition) => number
+```
+
+Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers.
+
+### `getResizeHandler`
+
+```tsx
+getResizeHandler: () => (event: unknown) => void
+```
+
+Returns an event handler function that can be used to resize the header. It can be used as an:
+
+- `onMouseDown` handler
+- `onTouchStart` handler
+
+The dragging and release events are automatically handled for you.
+
+## Table Options
+
+### `enableColumnResizing`
+
+```tsx
+enableColumnResizing?: boolean
+```
+
+Enables/disables column resizing for \*all columns\*\*.
+
+### `columnResizeMode`
+
+```tsx
+columnResizeMode?: 'onChange' | 'onEnd'
+```
+
+Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
+
+### `columnResizeDirection`
+
+```tsx
+columnResizeDirection?: 'ltr' | 'rtl'
+```
+
+Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.
+
+### `onColumnSizingChange`
+
+```tsx
+onColumnSizingChange?: OnChangeFn<ColumnSizingState>
+```
+
+This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the `state.columnSizing` table option.
+
+### `onColumnSizingInfoChange`
+
+```tsx
+onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>
+```
+
+This optional function will be called when the columnSizingInfo state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the `state.columnSizingInfo` table option.
+
+## Table API
+
+### `setColumnSizing`
+
+```tsx
+setColumnSizing: (updater: Updater<ColumnSizingState>) => void
+```
+
+Sets the column sizing state using an updater function or a value. This will trigger the underlying `onColumnSizingChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.
+
+### `setColumnSizingInfo`
+
+```tsx
+setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
+```
+
+Sets the column sizing info state using an updater function or a value. This will trigger the underlying `onColumnSizingInfoChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.
+
+### `resetColumnSizing`
+
+```tsx
+resetColumnSizing: (defaultState?: boolean) => void
+```
+
+Resets column sizing to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.
+
+### `resetHeaderSizeInfo`
+
+```tsx
+resetHeaderSizeInfo: (defaultState?: boolean) => void
+```
+
+Resets column sizing info to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.
+
+### `getTotalSize`
+
+```tsx
+getTotalSize: () => number
+```
+
+Returns the total size of the table by calculating the sum of the sizes of all leaf-columns.
+
+### `getLeftTotalSize`
+
+```tsx
+getLeftTotalSize: () => number
+```
+
+If pinning, returns the total size of the left portion of the table by calculating the sum of the sizes of all left leaf-columns.
+
+### `getCenterTotalSize`
+
+```tsx
+getCenterTotalSize: () => number
+```
+
+If pinning, returns the total size of the center portion of the table by calculating the sum of the sizes of all unpinned/center leaf-columns.
+
+### `getRightTotalSize`
+
+```tsx
+getRightTotalSize: () => number
+```
+
+If pinning, returns the total size of the right portion of the table by calculating the sum of the sizes of all right leaf-columns.
diff --git a/mintlify/table/api/features/column-visibility.md b/mintlify/table/api/features/column-visibility.md
new file mode 100644
index 000000000..e1280e7c0
--- /dev/null
+++ b/mintlify/table/api/features/column-visibility.md
@@ -0,0 +1,178 @@
+---
+title: Column Visibility APIs
+id: column-visibility
+---
+
+## State
+
+Column visibility state is stored on the table using the following shape:
+
+```tsx
+export type VisibilityState = Record<string, boolean>
+
+export type VisibilityTableState = {
+  columnVisibility: VisibilityState
+}
+```
+
+## Column Def Options
+
+### `enableHiding`
+
+```tsx
+enableHiding?: boolean
+```
+
+Enables/disables hiding the column
+
+## Column API
+
+### `getCanHide`
+
+```tsx
+getCanHide: () => boolean
+```
+
+Returns whether the column can be hidden
+
+### `getIsVisible`
+
+```tsx
+getIsVisible: () => boolean
+```
+
+Returns whether the column is visible
+
+### `toggleVisibility`
+
+```tsx
+toggleVisibility: (value?: boolean) => void
+```
+
+Toggles the column visibility
+
+### `getToggleVisibilityHandler`
+
+```tsx
+getToggleVisibilityHandler: () => (event: unknown) => void
+```
+
+Returns a function that can be used to toggle the column visibility. This function can be used to bind to an event handler to a checkbox.
+
+## Table Options
+
+### `onColumnVisibilityChange`
+
+```tsx
+onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.columnVisibility` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### `enableHiding`
+
+```tsx
+enableHiding?: boolean
+```
+
+Enables/disables hiding of columns.
+
+## Table API
+
+### `getVisibleFlatColumns`
+
+```tsx
+getVisibleFlatColumns: () => Column<TData>[]
+```
+
+Returns a flat array of columns that are visible, including parent columns.
+
+### `getVisibleLeafColumns`
+
+```tsx
+getVisibleLeafColumns: () => Column<TData>[]
+```
+
+Returns a flat array of leaf-node columns that are visible.
+
+### `getLeftVisibleLeafColumns`
+
+```tsx
+getLeftVisibleLeafColumns: () => Column<TData>[]
+```
+
+If column pinning, returns a flat array of leaf-node columns that are visible in the left portion of the table.
+
+### `getRightVisibleLeafColumns`
+
+```tsx
+getRightVisibleLeafColumns: () => Column<TData>[]
+```
+
+If column pinning, returns a flat array of leaf-node columns that are visible in the right portion of the table.
+
+### `getCenterVisibleLeafColumns`
+
+```tsx
+getCenterVisibleLeafColumns: () => Column<TData>[]
+```
+
+If column pinning, returns a flat array of leaf-node columns that are visible in the unpinned/center portion of the table.
+
+### `setColumnVisibility`
+
+```tsx
+setColumnVisibility: (updater: Updater<VisibilityState>) => void
+```
+
+Updates the column visibility state via an updater function or value
+
+### `resetColumnVisibility`
+
+```tsx
+resetColumnVisibility: (defaultState?: boolean) => void
+```
+
+Resets the column visibility state to the initial state. If `defaultState` is provided, the state will be reset to `{}`
+
+### `toggleAllColumnsVisible`
+
+```tsx
+toggleAllColumnsVisible: (value?: boolean) => void
+```
+
+Toggles the visibility of all columns
+
+### `getIsAllColumnsVisible`
+
+```tsx
+getIsAllColumnsVisible: () => boolean
+```
+
+Returns whether all columns are visible
+
+### `getIsSomeColumnsVisible`
+
+```tsx
+getIsSomeColumnsVisible: () => boolean
+```
+
+Returns whether some columns are visible
+
+### `getToggleAllColumnsVisibilityHandler`
+
+```tsx
+getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)
+```
+
+Returns a handler for toggling the visibility of all columns, meant to be bound to a `input[type=checkbox]` element.
+
+## Row API
+
+### `getVisibleCells`
+
+```tsx
+getVisibleCells: () => Cell<TData>[]
+```
+
+Returns an array of cells that account for column visibility for the row.
\ No newline at end of file
diff --git a/mintlify/table/api/features/expanding.md b/mintlify/table/api/features/expanding.md
new file mode 100644
index 000000000..af7ab0db4
--- /dev/null
+++ b/mintlify/table/api/features/expanding.md
@@ -0,0 +1,208 @@
+---
+title: Expanding APIs
+id: expanding
+---
+
+## State
+
+Expanding state is stored on the table using the following shape:
+
+```tsx
+export type ExpandedState = true | Record<string, boolean>
+
+export type ExpandedTableState = {
+  expanded: ExpandedState
+}
+```
+
+## Row API
+
+### `toggleExpanded`
+
+```tsx
+toggleExpanded: (expanded?: boolean) => void
+```
+
+Toggles the expanded state (or sets it if `expanded` is provided) for the row.
+
+### `getIsExpanded`
+
+```tsx
+getIsExpanded: () => boolean
+```
+
+Returns whether the row is expanded.
+
+### `getIsAllParentsExpanded`
+
+```tsx
+getIsAllParentsExpanded: () => boolean
+```
+
+Returns whether all parent rows of the row are expanded.
+
+### `getCanExpand`
+
+```tsx
+getCanExpand: () => boolean
+```
+
+Returns whether the row can be expanded.
+
+### `getToggleExpandedHandler`
+
+```tsx
+getToggleExpandedHandler: () => () => void
+```
+
+Returns a function that can be used to toggle the expanded state of the row. This function can be used to bind to an event handler to a button.
+
+## Table Options
+
+### `manualExpanding`
+
+```tsx
+manualExpanding?: boolean
+```
+
+Enables manual row expansion. If this is set to `true`, `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
+
+### `onExpandedChange`
+
+```tsx
+onExpandedChange?: OnChangeFn<ExpandedState>
+```
+
+This function is called when the `expanded` table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the `tableOptions.state.expanded` option.
+
+### `autoResetExpanded`
+
+```tsx
+autoResetExpanded?: boolean
+```
+
+Enable this setting to automatically reset the expanded state of the table when expanding state changes.
+
+### `enableExpanding`
+
+```tsx
+enableExpanding?: boolean
+```
+
+Enable/disable expanding for all rows.
+
+### `getExpandedRowModel`
+
+```tsx
+getExpandedRowModel?: (table: Table<TData>) => () => RowModel<TData>
+```
+
+This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own.
+
+### `getIsRowExpanded`
+
+```tsx
+getIsRowExpanded?: (row: Row<TData>) => boolean
+```
+
+If provided, allows you to override the default behavior of determining whether a row is currently expanded.
+
+### `getRowCanExpand`
+
+```tsx
+getRowCanExpand?: (row: Row<TData>) => boolean
+```
+
+If provided, allows you to override the default behavior of determining whether a row can be expanded.
+
+### `paginateExpandedRows`
+
+```tsx
+paginateExpandedRows?: boolean
+```
+
+If `true` expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages).
+
+If `false` expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
+
+## Table API
+
+### `setExpanded`
+
+```tsx
+setExpanded: (updater: Updater<ExpandedState>) => void
+```
+
+Updates the expanded state of the table via an update function or value
+
+### `toggleAllRowsExpanded`
+
+```tsx
+toggleAllRowsExpanded: (expanded?: boolean) => void
+```
+
+Toggles the expanded state for all rows. Optionally, provide a value to set the expanded state to.
+
+### `resetExpanded`
+
+```tsx
+resetExpanded: (defaultState?: boolean) => void
+```
+
+Reset the expanded state of the table to the initial state. If `defaultState` is provided, the expanded state will be reset to `{}`
+
+### `getCanSomeRowsExpand`
+
+```tsx
+getCanSomeRowsExpand: () => boolean
+```
+
+Returns whether there are any rows that can be expanded.
+
+### `getToggleAllRowsExpandedHandler`
+
+```tsx
+getToggleAllRowsExpandedHandler: () => (event: unknown) => void
+```
+
+Returns a handler that can be used to toggle the expanded state of all rows. This handler is meant to be used with an `input[type=checkbox]` element.
+
+### `getIsSomeRowsExpanded`
+
+```tsx
+getIsSomeRowsExpanded: () => boolean
+```
+
+Returns whether there are any rows that are currently expanded.
+
+### `getIsAllRowsExpanded`
+
+```tsx
+getIsAllRowsExpanded: () => boolean
+```
+
+Returns whether all rows are currently expanded.
+
+### `getExpandedDepth`
+
+```tsx
+getExpandedDepth: () => number
+```
+
+Returns the maximum depth of the expanded rows.
+
+### `getExpandedRowModel`
+
+```tsx
+getExpandedRowModel: () => RowModel<TData>
+```
+
+Returns the row model after expansion has been applied.
+
+### `getPreExpandedRowModel`
+
+```tsx
+getPreExpandedRowModel: () => RowModel<TData>
+```
+
+Returns the row model before expansion has been applied.
diff --git a/mintlify/table/api/features/filters.md b/mintlify/table/api/features/filters.md
new file mode 100644
index 000000000..cc476f8d1
--- /dev/null
+++ b/mintlify/table/api/features/filters.md
@@ -0,0 +1,13 @@
+---
+title: Filter APIs
+id: filters
+---
+
+
+
+The Filtering API docs are now split into multiple API doc pages:
+
+- [Column Faceting](/table/guide/column-faceting)
+- [Global Faceting](/table/guide/global-faceting)
+- [Column Filtering](/table/guide/column-filtering)
+- [Global Filtering](/table/guide/global-filtering)
\ No newline at end of file
diff --git a/mintlify/table/api/features/global-faceting.md b/mintlify/table/api/features/global-faceting.md
new file mode 100644
index 000000000..820df889f
--- /dev/null
+++ b/mintlify/table/api/features/global-faceting.md
@@ -0,0 +1,30 @@
+---
+title: Global Faceting APIs
+id: global-faceting
+---
+
+## Table API
+
+### `getGlobalFacetedRowModel`
+
+```tsx
+getGlobalFacetedRowModel: () => RowModel<TData>
+```
+
+Returns the faceted row model for the global filter.
+
+### `getGlobalFacetedUniqueValues`
+
+```tsx
+getGlobalFacetedUniqueValues: () => Map<any, number>
+```
+
+Returns the faceted unique values for the global filter.
+
+### `getGlobalFacetedMinMaxValues`
+
+```tsx
+getGlobalFacetedMinMaxValues: () => [number, number]
+```
+
+Returns the faceted min and max values for the global filter.
diff --git a/mintlify/table/api/features/global-filtering.md b/mintlify/table/api/features/global-filtering.md
new file mode 100644
index 000000000..75980edc2
--- /dev/null
+++ b/mintlify/table/api/features/global-filtering.md
@@ -0,0 +1,291 @@
+---
+title: Global Filtering APIs
+id: global-filtering
+---
+
+## Can-Filter
+
+The ability for a column to be **globally** filtered is determined by the following:
+
+- The column was defined a valid `accessorKey`/`accessorFn`.
+- If provided, `options.getColumnCanGlobalFilter` returns `true` for the given column. If it is not provided, the column is assumed to be globally filterable if the value in the first row is a `string` or `number` type.
+- `column.enableColumnFilter` is not set to `false`
+- `options.enableColumnFilters` is not set to `false`
+- `options.enableFilters` is not set to `false`
+
+## State
+
+Filter state is stored on the table using the following shape:
+
+```tsx
+export interface GlobalFilterTableState {
+  globalFilter: any
+}
+```
+
+## Filter Functions
+
+You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering](/table/guide/column-filtering) to learn more about filter functions.
+
+#### Using Filter Functions
+
+Filter functions can be used/referenced/defined by passing the following to `options.globalFilterFn`:
+
+- A `string` that references a built-in filter function
+- A function directly provided to the `options.globalFilterFn` option
+
+The final list of filter functions available for the `tableOptions.globalFilterFn` options use the following type:
+
+```tsx
+export type FilterFnOption<TData extends AnyData> =
+  | 'auto'
+  | BuiltInFilterFn
+  | FilterFn<TData>
+```
+
+#### Filter Meta
+
+Filtering data can often expose additional information about the data that can be used to aid other future operations on the same data. A good example of this concept is a ranking-system like that of [`match-sorter`](https://github.com/kentcdodds/match-sorter) that simultaneously ranks, filters and sorts data. While utilities like `match-sorter` make a lot of sense for single-dimensional filter+sort tasks, the decoupled filtering/sorting architecture of building a table makes them very difficult and slow to use.
+
+To make a ranking/filtering/sorting system work with tables, `filterFn`s can optionally mark results with a **filter meta** value that can be used later to sort/group/etc the data to your liking. This is done by calling the `addMeta` function supplied to your custom `filterFn`.
+
+Below is an example using our own `match-sorter-utils` package (a utility fork of `match-sorter`) to rank, filter, and sort the data
+
+```tsx
+import { sortingFns } from '@tanstack/[adapter]-table'
+
+import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
+
+const fuzzyFilter = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the ranking info
+  addMeta(itemRank)
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const fuzzySort = (rowA, rowB, columnId) => {
+  let dir = 0
+
+  // Only sort by rank if the column has ranking information
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId]!,
+      rowB.columnFiltersMeta[columnId]!
+    )
+  }
+
+  // Provide an alphanumeric fallback for when the item ranks are equal
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+}
+```
+
+## Column Def Options
+
+### `enableGlobalFilter`
+
+```tsx
+enableGlobalFilter?: boolean
+```
+
+Enables/disables the **global** filter for this column.
+
+## Column API
+
+### `getCanGlobalFilter`
+
+```tsx
+getCanGlobalFilter: () => boolean
+```
+
+Returns whether or not the column can be **globally** filtered.  Set to `false` to disable a column from being scanned during global filtering.
+
+## Row API
+
+### `columnFiltersMeta`
+
+```tsx
+columnFiltersMeta: Record<string, any>
+```
+
+The column filters meta map for the row. This object tracks any filter meta for a row as optionally provided during the filtering process.
+
+## Table Options
+
+### `filterFns`
+
+```tsx
+filterFns?: Record<string, FilterFn>
+```
+
+This option allows you to define custom filter functions that can be referenced in a column's `filterFn` option by their key.
+Example:
+
+```tsx
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    myCustomFilter: FilterFn<unknown>
+  }
+}
+
+const column = columnHelper.data('key', {
+  filterFn: 'myCustomFilter',
+})
+
+const table = useReactTable({
+  columns: [column],
+  filterFns: {
+    myCustomFilter: (rows, columnIds, filterValue) => {
+      // return the filtered rows
+    },
+  },
+})
+```
+
+### `filterFromLeafRows`
+
+```tsx
+filterFromLeafRows?: boolean
+```
+
+By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included).
+
+### `maxLeafRowFilterDepth`
+
+```tsx
+maxLeafRowFilterDepth?: number
+```
+
+By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+
+This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter.
+
+### `enableFilters`
+
+```tsx
+enableFilters?: boolean
+```
+
+Enables/disables all filters for the table.
+
+### `manualFiltering`
+
+```tsx
+manualFiltering?: boolean
+```
+
+Disables the `getFilteredRowModel` from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
+
+### `getFilteredRowModel`
+
+```tsx
+getFilteredRowModel?: (
+  table: Table<TData>
+) => () => RowModel<TData>
+```
+
+If provided, this function is called **once** per table and should return a **new function** which will calculate and return the row model for the table when it's filtered.
+
+- For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model.
+- For client-side filtering, this function is required. A default implementation is provided via any table adapter's `{ getFilteredRowModel }` export.
+
+Example:
+
+```tsx
+import { getFilteredRowModel } from '@tanstack/[adapter]-table'
+
+  getFilteredRowModel: getFilteredRowModel(),
+})
+```
+
+### `globalFilterFn`
+
+```tsx
+globalFilterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns
+```
+
+The filter function to use for global filtering.
+
+Options:
+
+- A `string` referencing a [built-in filter function](#filter-functions))
+- A `string` that references a custom filter functions provided via the `tableOptions.filterFns` option
+- A [custom filter function](#filter-functions)
+
+### `onGlobalFilterChange`
+
+```tsx
+onGlobalFilterChange?: OnChangeFn<GlobalFilterState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.globalFilter` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### `enableGlobalFilter`
+
+```tsx
+enableGlobalFilter?: boolean
+```
+
+Enables/disables the global filter for the table.
+
+### `getColumnCanGlobalFilter`
+
+```tsx
+getColumnCanGlobalFilter?: (column: Column<TData>) => boolean
+```
+
+If provided, this function will be called with the column and should return `true` or `false` to indicate whether this column should be used for global filtering.
+This is useful if the column can contain data that is not `string` or `number` (i.e. `undefined`).
+
+## Table API
+
+### `getPreFilteredRowModel`
+
+```tsx
+getPreFilteredRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table before any **column** filtering has been applied.
+
+### `getFilteredRowModel`
+
+```tsx
+getFilteredRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table after **column** filtering has been applied.
+
+### `setGlobalFilter`
+
+```tsx
+setGlobalFilter: (updater: Updater<any>) => void
+```
+
+Sets or updates the `state.globalFilter` state.
+
+### `resetGlobalFilter`
+
+```tsx
+resetGlobalFilter: (defaultState?: boolean) => void
+```
+
+Resets the **globalFilter** state to `initialState.globalFilter`, or `true` can be passed to force a default blank state reset to `undefined`.
+
+### `getGlobalAutoFilterFn`
+
+```tsx
+getGlobalAutoFilterFn: (columnId: string) => FilterFn<TData> | undefined
+```
+
+Currently, this function returns the built-in `includesString` filter function. In future releases, it may return more dynamic filter functions based on the nature of the data provided.
+
+### `getGlobalFilterFn`
+
+```tsx
+getGlobalFilterFn: (columnId: string) => FilterFn<TData> | undefined
+```
+
+Returns the global filter function (either user-defined or automatic, depending on configuration) for the table.
diff --git a/mintlify/table/api/features/grouping.md b/mintlify/table/api/features/grouping.md
new file mode 100644
index 000000000..b9c21631f
--- /dev/null
+++ b/mintlify/table/api/features/grouping.md
@@ -0,0 +1,353 @@
+---
+title: Grouping APIs
+id: grouping
+---
+
+## State
+
+Grouping state is stored on the table using the following shape:
+
+```tsx
+export type GroupingState = string[]
+
+export type GroupingTableState = {
+  grouping: GroupingState
+}
+```
+
+## Aggregation Functions
+
+The following aggregation functions are built-in to the table core:
+
+- `sum`
+  - Sums the values of a group of rows
+- `min`
+  - Finds the minimum value of a group of rows
+- `max`
+  - Finds the maximum value of a group of rows
+- `extent`
+  - Finds the minimum and maximum values of a group of rows
+- `mean`
+  - Finds the mean/average value of a group of rows
+- `median`
+  - Finds the median value of a group of rows
+- `unique`
+  - Finds the unique values of a group of rows
+- `uniqueCount`
+  - Finds the number of unique values of a group of rows
+- `count`
+  - Calculates the number of rows in a group
+
+Every grouping function receives:
+
+- A function to retrieve the leaf values of the groups rows
+- A function to retrieve the immediate-child values of the groups rows
+
+and should return a value (usually primitive) to build the aggregated row model.
+
+This is the type signature for every aggregation function:
+
+```tsx
+export type AggregationFn<TData extends AnyData> = (
+  getLeafRows: () => Row<TData>[],
+  getChildRows: () => Row<TData>[]
+) => any
+```
+
+#### Using Aggregation Functions
+
+Aggregation functions can be used/referenced/defined by passing the following to `columnDefinition.aggregationFn`:
+
+- A `string` that references a built-in aggregation function
+- A `string` that references a custom aggregation functions provided via the `tableOptions.aggregationFns` option
+- A function directly provided to the `columnDefinition.aggregationFn` option
+
+The final list of aggregation functions available for the `columnDef.aggregationFn` use the following type:
+
+```tsx
+export type AggregationFnOption<TData extends AnyData> =
+  | 'auto'
+  | keyof AggregationFns
+  | BuiltInAggregationFn
+  | AggregationFn<TData>
+```
+
+## Column Def Options
+
+### `aggregationFn`
+
+```tsx
+aggregationFn?: AggregationFn | keyof AggregationFns | keyof BuiltInAggregationFns
+```
+
+The aggregation function to use with this column.
+
+Options:
+
+- A `string` referencing a [built-in aggregation function](#aggregation-functions))
+- A [custom aggregation function](#aggregation-functions)
+
+### `aggregatedCell`
+
+```tsx
+aggregatedCell?: Renderable<
+  {
+    table: Table<TData>
+    row: Row<TData>
+    column: Column<TData>
+    cell: Cell<TData>
+    getValue: () => any
+    renderValue: () => any
+  }
+>
+```
+
+The cell to display each row for the column if the cell is an aggregate. If a function is passed, it will be passed a props object with the context of the cell and should return the property type for your adapter (the exact type depends on the adapter being used).
+
+### `enableGrouping`
+
+```tsx
+enableGrouping?: boolean
+```
+
+Enables/disables grouping for this column.
+
+### `getGroupingValue`
+
+```tsx
+getGroupingValue?: (row: TData) => any
+```
+
+Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from `accessorKey` / `accessorFn` will be used instead.
+
+## Column API
+
+### `aggregationFn`
+
+```tsx
+aggregationFn?: AggregationFnOption<TData>
+```
+
+The resolved aggregation function for the column.
+
+### `getCanGroup`
+
+```tsx
+getCanGroup: () => boolean
+```
+
+Returns whether or not the column can be grouped.
+
+### `getIsGrouped`
+
+```tsx
+getIsGrouped: () => boolean
+```
+
+Returns whether or not the column is currently grouped.
+
+### `getGroupedIndex`
+
+```tsx
+getGroupedIndex: () => number
+```
+
+Returns the index of the column in the grouping state.
+
+### `toggleGrouping`
+
+```tsx
+toggleGrouping: () => void
+```
+
+Toggles the grouping state of the column.
+
+### `getToggleGroupingHandler`
+
+```tsx
+getToggleGroupingHandler: () => () => void
+```
+
+Returns a function that toggles the grouping state of the column. This is useful for passing to the `onClick` prop of a button.
+
+### `getAutoAggregationFn`
+
+```tsx
+getAutoAggregationFn: () => AggregationFn<TData> | undefined
+```
+
+Returns the automatically inferred aggregation function for the column.
+
+### `getAggregationFn`
+
+```tsx
+getAggregationFn: () => AggregationFn<TData> | undefined
+```
+
+Returns the aggregation function for the column.
+
+## Row API
+
+### `groupingColumnId`
+
+```tsx
+groupingColumnId?: string
+```
+
+If this row is grouped, this is the id of the column that this row is grouped by.
+
+### `groupingValue`
+
+```tsx
+groupingValue?: any
+```
+
+If this row is grouped, this is the unique/shared value for the `groupingColumnId` for all of the rows in this group.
+
+### `getIsGrouped`
+
+```tsx
+getIsGrouped: () => boolean
+```
+
+Returns whether or not the row is currently grouped.
+
+### `getGroupingValue`
+
+```tsx
+getGroupingValue: (columnId: string) => unknown
+```
+
+Returns the grouping value for any row and column (including leaf rows).
+
+## Table Options
+
+### `aggregationFns`
+
+```tsx
+aggregationFns?: Record<string, AggregationFn>
+```
+
+This option allows you to define custom aggregation functions that can be referenced in a column's `aggregationFn` option by their key.
+Example:
+
+```tsx
+declare module '@tanstack/table-core' {
+  interface AggregationFns {
+    myCustomAggregation: AggregationFn<unknown>
+  }
+}
+
+const column = columnHelper.data('key', {
+  aggregationFn: 'myCustomAggregation',
+})
+
+const table = useReactTable({
+  columns: [column],
+  aggregationFns: {
+    myCustomAggregation: (columnId, leafRows, childRows) => {
+      // return the aggregated value
+    },
+  },
+})
+```
+
+### `manualGrouping`
+
+```tsx
+manualGrouping?: boolean
+```
+
+Enables manual grouping. If this option is set to `true`, the table will not automatically group rows using `getGroupedRowModel()` and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
+
+### `onGroupingChange`
+
+```tsx
+onGroupingChange?: OnChangeFn<GroupingState>
+```
+
+If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.grouping` option.
+
+### `enableGrouping`
+
+```tsx
+enableGrouping?: boolean
+```
+
+Enables/disables grouping for all columns.
+
+### `getGroupedRowModel`
+
+```tsx
+getGroupedRowModel?: (table: Table<TData>) => () => RowModel<TData>
+```
+
+Returns the row model after grouping has taken place, but no further.
+
+### `groupedColumnMode`
+
+```tsx
+groupedColumnMode?: false | 'reorder' | 'remove' // default: `reorder`
+```
+
+Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+
+## Table API
+
+### `setGrouping`
+
+```tsx
+setGrouping: (updater: Updater<GroupingState>) => void
+```
+
+Sets or updates the `state.grouping` state.
+
+### `resetGrouping`
+
+```tsx
+resetGrouping: (defaultState?: boolean) => void
+```
+
+Resets the **grouping** state to `initialState.grouping`, or `true` can be passed to force a default blank state reset to `[]`.
+
+### `getPreGroupedRowModel`
+
+```tsx
+getPreGroupedRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table before any grouping has been applied.
+
+### `getGroupedRowModel`
+
+```tsx
+getGroupedRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table after grouping has been applied.
+
+## Cell API
+
+### `getIsAggregated`
+
+```tsx
+getIsAggregated: () => boolean
+```
+
+Returns whether or not the cell is currently aggregated.
+
+### `getIsGrouped`
+
+```tsx
+getIsGrouped: () => boolean
+```
+
+Returns whether or not the cell is currently grouped.
+
+### `getIsPlaceholder`
+
+```tsx
+getIsPlaceholder: () => boolean
+```
+
+Returns whether or not the cell is currently a placeholder.
\ No newline at end of file
diff --git a/mintlify/table/api/features/pagination.md b/mintlify/table/api/features/pagination.md
new file mode 100644
index 000000000..5e80d5a7a
--- /dev/null
+++ b/mintlify/table/api/features/pagination.md
@@ -0,0 +1,207 @@
+---
+title: Pagination APIs
+id: pagination
+---
+
+## State
+
+Pagination state is stored on the table using the following shape:
+
+```tsx
+export type PaginationState = {
+  pageIndex: number
+  pageSize: number
+}
+
+export type PaginationTableState = {
+  pagination: PaginationState
+}
+
+export type PaginationInitialTableState = {
+  pagination?: Partial<PaginationState>
+}
+```
+
+## Table Options
+
+### `manualPagination`
+
+```tsx
+manualPagination?: boolean
+```
+
+Enables manual pagination. If this option is set to `true`, the table will not automatically paginate rows using `getPaginationRowModel()` and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.
+
+### `pageCount`
+
+```tsx
+pageCount?: number
+```
+
+When manually controlling pagination, you can supply a total `pageCount` value to the table if you know it. If you do not know how many pages there are, you can set this to `-1`. Alternatively, you can provide a `rowCount` value and the table will calculate the `pageCount` internally.
+
+### `rowCount`
+
+```tsx
+rowCount?: number
+```
+
+When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. `pageCount` will be calculated internally from `rowCount` and `pageSize`.
+
+### `autoResetPageIndex`
+
+```tsx
+autoResetPageIndex?: boolean
+```
+
+If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc.
+
+> 🧠 Note: This option defaults to `false` if `manualPagination` is set to `true`
+
+### `onPaginationChange`
+
+```tsx
+onPaginationChange?: OnChangeFn<PaginationState>
+```
+
+If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.pagination` option.
+
+### `getPaginationRowModel`
+
+```tsx
+getPaginationRowModel?: (table: Table<TData>) => () => RowModel<TData>
+```
+
+Returns the row model after pagination has taken place, but no further.
+
+Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+
+## Table API
+
+### `setPagination`
+
+```tsx
+setPagination: (updater: Updater<PaginationState>) => void
+```
+
+Sets or updates the `state.pagination` state.
+
+### `resetPagination`
+
+```tsx
+resetPagination: (defaultState?: boolean) => void
+```
+
+Resets the **pagination** state to `initialState.pagination`, or `true` can be passed to force a default blank state reset to `[]`.
+
+### `setPageIndex`
+
+```tsx
+setPageIndex: (updater: Updater<number>) => void
+```
+
+Updates the page index using the provided function or value.
+
+### `resetPageIndex`
+
+```tsx
+resetPageIndex: (defaultState?: boolean) => void
+```
+
+Resets the page index to its initial state. If `defaultState` is `true`, the page index will be reset to `0` regardless of initial state.
+
+### `setPageSize`
+
+```tsx
+setPageSize: (updater: Updater<number>) => void
+```
+
+Updates the page size using the provided function or value.
+
+### `resetPageSize`
+
+```tsx
+resetPageSize: (defaultState?: boolean) => void
+```
+
+Resets the page size to its initial state. If `defaultState` is `true`, the page size will be reset to `10` regardless of initial state.
+
+### `getPageOptions`
+
+```tsx
+getPageOptions: () => number[]
+```
+
+Returns an array of page options (zero-index-based) for the current page size.
+
+### `getCanPreviousPage`
+
+```tsx
+getCanPreviousPage: () => boolean
+```
+
+Returns whether the table can go to the previous page.
+
+### `getCanNextPage`
+
+```tsx
+getCanNextPage: () => boolean
+```
+
+Returns whether the table can go to the next page.
+
+### `previousPage`
+
+```tsx
+previousPage: () => void
+```
+
+Decrements the page index by one, if possible.
+
+### `nextPage`
+
+```tsx
+nextPage: () => void
+```
+
+Increments the page index by one, if possible.
+
+### `firstPage`
+
+```tsx
+firstPage: () => void
+```
+
+Sets the page index to `0`.
+
+### `lastPage`
+
+```tsx
+lastPage: () => void
+```
+
+Sets the page index to the last available page.
+
+### `getPageCount`
+
+```tsx
+getPageCount: () => number
+```
+
+Returns the page count. If manually paginating or controlling the pagination state, this will come directly from the `options.pageCount` table option, otherwise it will be calculated from the table data using the total row count and current page size.
+
+### `getPrePaginationRowModel`
+
+```tsx
+getPrePaginationRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table before any pagination has been applied.
+
+### `getPaginationRowModel`
+
+```tsx
+getPaginationRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table after pagination has been applied.
diff --git a/mintlify/table/api/features/pinning.md b/mintlify/table/api/features/pinning.md
new file mode 100644
index 000000000..a1bcf0ede
--- /dev/null
+++ b/mintlify/table/api/features/pinning.md
@@ -0,0 +1,11 @@
+---
+title: Pinning APIs
+id: pinning
+---
+
+
+
+The pinning apis are now split into multiple api pages:
+
+- [Column Pinning](/table/guide/column-pinning)
+- [Row Pinning](/table/guide/row-pinning)
\ No newline at end of file
diff --git a/mintlify/table/api/features/row-pinning.md b/mintlify/table/api/features/row-pinning.md
new file mode 100644
index 000000000..52e46d562
--- /dev/null
+++ b/mintlify/table/api/features/row-pinning.md
@@ -0,0 +1,138 @@
+---
+title: Row Pinning APIs
+id: row-pinning
+---
+
+## Can-Pin
+
+The ability for a row to be **pinned** is determined by the following:
+
+- `options.enableRowPinning` resolves to `true`
+- `options.enablePinning` is not set to `false`
+
+## State
+
+Pinning state is stored on the table using the following shape:
+
+```tsx
+export type RowPinningPosition = false | 'top' | 'bottom'
+
+export type RowPinningState = {
+  top?: string[]
+  bottom?: string[]
+}
+
+export type RowPinningRowState = {
+  rowPinning: RowPinningState
+}
+```
+
+## Table Options
+
+### `enableRowPinning`
+
+```tsx
+enableRowPinning?: boolean | ((row: Row<TData>) => boolean)
+```
+
+Enables/disables row pinning for all rows in the table.
+
+### `keepPinnedRows`
+
+```tsx
+keepPinnedRows?: boolean
+```
+
+When `false`, pinned rows will not be visible if they are filtered or paginated out of the table. When `true`, pinned rows will always be visible regardless of filtering or pagination. Defaults to `true`.
+
+### `onRowPinningChange`
+
+```tsx
+onRowPinningChange?: OnChangeFn<RowPinningState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.rowPinning` changes. This overrides the default internal state management, so you will also need to supply `state.rowPinning` from your own managed state.
+
+## Table API
+
+### `setRowPinning`
+
+```tsx
+setRowPinning: (updater: Updater<RowPinningState>) => void
+```
+
+Sets or updates the `state.rowPinning` state.
+
+### `resetRowPinning`
+
+```tsx
+resetRowPinning: (defaultState?: boolean) => void
+```
+
+Resets the **rowPinning** state to `initialState.rowPinning`, or `true` can be passed to force a default blank state reset to `{}`.
+
+### `getIsSomeRowsPinned`
+
+```tsx
+getIsSomeRowsPinned: (position?: RowPinningPosition) => boolean
+```
+
+Returns whether or not any rows are pinned. Optionally specify to only check for pinned rows in either the `top` or `bottom` position.
+
+### `getTopRows`
+
+```tsx
+getTopRows: () => Row<TData>[]
+```
+
+Returns all top pinned rows.
+
+### `getBottomRows`
+
+```tsx
+getBottomRows: () => Row<TData>[]
+```
+
+Returns all bottom pinned rows.
+
+### `getCenterRows`
+
+```tsx
+getCenterRows: () => Row<TData>[]
+```
+
+Returns all rows that are not pinned to the top or bottom.
+
+## Row API
+
+### `pin`
+
+```tsx
+pin: (position: RowPinningPosition) => void
+```
+
+Pins a row to the `'top'` or `'bottom'`, or unpins the row to the center if `false` is passed.
+
+### `getCanPin`
+
+```tsx
+getCanPin: () => boolean
+```
+
+Returns whether or not the row can be pinned.
+
+### `getIsPinned`
+
+```tsx
+getIsPinned: () => RowPinningPosition
+```
+
+Returns the pinned position of the row. (`'top'`, `'bottom'` or `false`)
+
+### `getPinnedIndex`
+
+```tsx
+getPinnedIndex: () => number
+```
+
+Returns the numeric pinned index of the row within a pinned row group.
\ No newline at end of file
diff --git a/mintlify/table/api/features/row-selection.md b/mintlify/table/api/features/row-selection.md
new file mode 100644
index 000000000..20f450d57
--- /dev/null
+++ b/mintlify/table/api/features/row-selection.md
@@ -0,0 +1,228 @@
+---
+title: Row Selection APIs
+id: row-selection
+---
+
+## State
+
+Row selection state is stored on the table using the following shape:
+
+```tsx
+export type RowSelectionState = Record<string, boolean>
+
+export type RowSelectionTableState = {
+  rowSelection: RowSelectionState
+}
+```
+
+By default, the row selection state uses the index of each row as the row identifiers. Row selection state can instead be tracked with a custom unique row id by passing in a custom [getRowId](/table/api/core/table#getrowid) function to the the table.
+
+## Table Options
+
+### `enableRowSelection`
+
+```tsx
+enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
+```
+
+- Enables/disables row selection for all rows in the table OR
+- A function that given a row, returns whether to enable/disable row selection for that row
+
+### `enableMultiRowSelection`
+
+```tsx
+enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean)
+```
+
+- Enables/disables multiple row selection for all rows in the table OR
+- A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren
+
+### `enableSubRowSelection`
+
+```tsx
+enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean)
+```
+
+Enables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row.
+
+(Use in combination with expanding or grouping features)
+
+### `onRowSelectionChange`
+
+```tsx
+onRowSelectionChange?: OnChangeFn<RowSelectionState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.rowSelection` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+## Table API
+
+### `getToggleAllRowsSelectedHandler`
+
+```tsx
+getToggleAllRowsSelectedHandler: () => (event: unknown) => void
+```
+
+Returns a handler that can be used to toggle all rows in the table.
+
+### `getToggleAllPageRowsSelectedHandler`
+
+```tsx
+getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
+```
+
+Returns a handler that can be used to toggle all rows on the current page.
+
+### `setRowSelection`
+
+```tsx
+setRowSelection: (updater: Updater<RowSelectionState>) => void
+```
+
+Sets or updates the `state.rowSelection` state.
+
+### `resetRowSelection`
+
+```tsx
+resetRowSelection: (defaultState?: boolean) => void
+```
+
+Resets the **rowSelection** state to the `initialState.rowSelection`, or `true` can be passed to force a default blank state reset to `{}`.
+
+### `getIsAllRowsSelected`
+
+```tsx
+getIsAllRowsSelected: () => boolean
+```
+
+Returns whether or not all rows in the table are selected.
+
+### `getIsAllPageRowsSelected`
+
+```tsx
+getIsAllPageRowsSelected: () => boolean
+```
+
+Returns whether or not all rows on the current page are selected.
+
+### `getIsSomeRowsSelected`
+
+```tsx
+getIsSomeRowsSelected: () => boolean
+```
+
+Returns whether or not any rows in the table are selected.
+
+### `getIsSomePageRowsSelected`
+
+```tsx
+getIsSomePageRowsSelected: () => boolean
+```
+
+Returns whether or not any rows on the current page are selected.
+
+### `toggleAllRowsSelected`
+
+```tsx
+toggleAllRowsSelected: (value: boolean) => void
+```
+
+Selects/deselects all rows in the table.
+
+### `toggleAllPageRowsSelected`
+
+```tsx
+toggleAllPageRowsSelected: (value: boolean) => void
+```
+
+Selects/deselects all rows on the current page.
+
+### `getPreSelectedRowModel`
+
+```tsx
+getPreSelectedRowModel: () => RowModel<TData>
+```
+
+### `getSelectedRowModel`
+
+```tsx
+getSelectedRowModel: () => RowModel<TData>
+```
+
+### `getFilteredSelectedRowModel`
+
+```tsx
+getFilteredSelectedRowModel: () => RowModel<TData>
+```
+
+### `getGroupedSelectedRowModel`
+
+```tsx
+getGroupedSelectedRowModel: () => RowModel<TData>
+```
+
+## Row API
+
+### `getIsSelected`
+
+```tsx
+getIsSelected: () => boolean
+```
+
+Returns whether or not the row is selected.
+
+### `getIsSomeSelected`
+
+```tsx
+getIsSomeSelected: () => boolean
+```
+
+Returns whether or not some of the row's sub rows are selected.
+
+### `getIsAllSubRowsSelected`
+
+```tsx
+getIsAllSubRowsSelected: () => boolean
+```
+
+Returns whether or not all of the row's sub rows are selected.
+
+### `getCanSelect`
+
+```tsx
+getCanSelect: () => boolean
+```
+
+Returns whether or not the row can be selected.
+
+### `getCanMultiSelect`
+
+```tsx
+getCanMultiSelect: () => boolean
+```
+
+Returns whether or not the row can multi-select.
+
+### `getCanSelectSubRows`
+
+```tsx
+getCanSelectSubRows: () => boolean
+```
+
+Returns whether or not the row can select sub rows automatically when the parent row is selected.
+
+### `toggleSelected`
+
+```tsx
+toggleSelected: (value?: boolean) => void
+```
+
+Selects/deselects the row.
+
+### `getToggleSelectedHandler`
+
+```tsx
+getToggleSelectedHandler: () => (event: unknown) => void
+```
+
+Returns a handler that can be used to toggle the row.
diff --git a/mintlify/table/api/features/sorting.md b/mintlify/table/api/features/sorting.md
new file mode 100644
index 000000000..e5b60eea5
--- /dev/null
+++ b/mintlify/table/api/features/sorting.md
@@ -0,0 +1,385 @@
+---
+title: Sorting APIs
+id: sorting
+---
+
+## State
+
+Sorting state is stored on the table using the following shape:
+
+```tsx
+export type SortDirection = 'asc' | 'desc'
+
+export type ColumnSort = {
+  id: string
+  desc: boolean
+}
+
+export type SortingState = ColumnSort[]
+
+export type SortingTableState = {
+  sorting: SortingState
+}
+```
+
+## Sorting Functions
+
+The following sorting functions are built-in to the table core:
+
+- `alphanumeric`
+  - Sorts by mixed alphanumeric values without case-sensitivity. Slower, but more accurate if your strings contain numbers that need to be naturally sorted.
+- `alphanumericCaseSensitive`
+  - Sorts by mixed alphanumeric values with case-sensitivity. Slower, but more accurate if your strings contain numbers that need to be naturally sorted.
+- `text`
+  - Sorts by text/string values without case-sensitivity. Faster, but less accurate if your strings contain numbers that need to be naturally sorted.
+- `textCaseSensitive`
+  - Sorts by text/string values with case-sensitivity. Faster, but less accurate if your strings contain numbers that need to be naturally sorted.
+- `datetime`
+  - Sorts by time, use this if your values are `Date` objects.
+- `basic`
+  - Sorts using a basic/standard `a > b ? 1 : a < b ? -1 : 0` comparison. This is the fastest sorting function, but may not be the most accurate.
+
+Every sorting function receives 2 rows and a column ID and are expected to compare the two rows using the column ID to return `-1`, `0`, or `1` in ascending order. Here's a cheat sheet:
+
+| Return | Ascending Order |
+| ------ | --------------- |
+| `-1`   | `a < b`         |
+| `0`    | `a === b`       |
+| `1`    | `a > b`         |
+
+This is the type signature for every sorting function:
+
+```tsx
+export type SortingFn<TData extends AnyData> = {
+  (rowA: Row<TData>, rowB: Row<TData>, columnId: string): number
+}
+```
+
+#### Using Sorting Functions
+
+Sorting functions can be used/referenced/defined by passing the following to `columnDefinition.sortingFn`:
+
+- A `string` that references a built-in sorting function
+- A `string` that references a custom sorting functions provided via the `tableOptions.sortingFns` option
+- A function directly provided to the `columnDefinition.sortingFn` option
+
+The final list of sorting functions available for the `columnDef.sortingFn` use the following type:
+
+```tsx
+export type SortingFnOption<TData extends AnyData> =
+  | 'auto'
+  | SortingFns
+  | BuiltInSortingFns
+  | SortingFn<TData>
+```
+
+## Column Def Options
+
+### `sortingFn`
+
+```tsx
+sortingFn?: SortingFn | keyof SortingFns | keyof BuiltInSortingFns
+```
+
+The sorting function to use with this column.
+
+Options:
+
+- A `string` referencing a [built-in sorting function](#sorting-functions))
+- A [custom sorting function](#sorting-functions)
+
+### `sortDescFirst`
+
+```tsx
+sortDescFirst?: boolean
+```
+
+Set to `true` for sorting toggles on this column to start in the descending direction.
+
+### `enableSorting`
+
+```tsx
+enableSorting?: boolean
+```
+
+Enables/Disables sorting for this column.
+
+### `enableMultiSort`
+
+```tsx
+enableMultiSort?: boolean
+```
+
+Enables/Disables multi-sorting for this column.
+
+### `invertSorting`
+
+```tsx
+invertSorting?: boolean
+```
+
+Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring
+
+### `sortUndefined`
+
+```tsx
+sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1
+```
+
+- `'first'`
+  - Undefined values will be pushed to the beginning of the list
+- `'last'`
+  - Undefined values will be pushed to the end of the list
+- `false`
+  - Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
+- `-1`
+  - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
+- `1`
+  - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
+
+> NOTE: `'first'` and `'last'` options are new in v8.16.0
+
+## Column API
+
+### `getAutoSortingFn`
+
+```tsx
+getAutoSortingFn: () => SortingFn<TData>
+```
+
+Returns a sorting function automatically inferred based on the columns values.
+
+### `getAutoSortDir`
+
+```tsx
+getAutoSortDir: () => SortDirection
+```
+
+Returns a sort direction automatically inferred based on the columns values.
+
+### `getSortingFn`
+
+```tsx
+getSortingFn: () => SortingFn<TData>
+```
+
+Returns the resolved sorting function to be used for this column
+
+### `getNextSortingOrder`
+
+```tsx
+getNextSortingOrder: () => SortDirection | false
+```
+
+Returns the next sorting order.
+
+### `getCanSort`
+
+```tsx
+getCanSort: () => boolean
+```
+
+Returns whether this column can be sorted.
+
+### `getCanMultiSort`
+
+```tsx
+getCanMultiSort: () => boolean
+```
+
+Returns whether this column can be multi-sorted.
+
+### `getSortIndex`
+
+```tsx
+getSortIndex: () => number
+```
+
+Returns the index position of this column's sorting within the sorting state
+
+### `getIsSorted`
+
+```tsx
+getIsSorted: () => false | SortDirection
+```
+
+Returns whether this column is sorted.
+
+### `getFirstSortDir`
+
+```tsx 
+getFirstSortDir: () => SortDirection
+```
+
+Returns the first direction that should be used when sorting this column.
+
+### `clearSorting`
+
+```tsx
+clearSorting: () => void
+```
+
+Removes this column from the table's sorting state
+
+### `toggleSorting`
+
+```tsx
+toggleSorting: (desc?: boolean, isMulti?: boolean) => void
+```
+
+Toggles this columns sorting state. If `desc` is provided, it will force the sort direction to that value. If `isMulti` is provided, it will additivity multi-sort the column (or toggle it if it is already sorted).
+
+### `getToggleSortingHandler`
+
+```tsx
+getToggleSortingHandler: () => undefined | ((event: unknown) => void)
+```
+
+Returns a function that can be used to toggle this column's sorting state. This is useful for attaching a click handler to the column header.
+
+## Table Options
+
+### `sortingFns`
+
+```tsx
+sortingFns?: Record<string, SortingFn>
+```
+
+This option allows you to define custom sorting functions that can be referenced in a column's `sortingFn` option by their key.
+Example:
+
+```tsx
+declare module '@tanstack/table-core' {
+  interface SortingFns {
+    myCustomSorting: SortingFn<unknown>
+  }
+}
+
+const column = columnHelper.data('key', {
+  sortingFn: 'myCustomSorting',
+})
+
+const table = useReactTable({
+  columns: [column],
+  sortingFns: {
+    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
+      rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
+  },
+})
+```
+
+### `manualSorting`
+
+```tsx
+manualSorting?: boolean
+```
+
+Enables manual sorting for the table. If this is `true`, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting.
+
+### `onSortingChange`
+
+```tsx
+onSortingChange?: OnChangeFn<SortingState>
+```
+
+If provided, this function will be called with an `updaterFn` when `state.sorting` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### `enableSorting`
+
+```tsx
+enableSorting?: boolean
+```
+
+Enables/Disables sorting for the table.
+
+### `enableSortingRemoval`
+
+```tsx
+enableSortingRemoval?: boolean
+```
+
+Enables/Disables the ability to remove sorting for the table.
+- If `true` then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
+- If `false` then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...
+
+### `enableMultiRemove`
+
+```tsx
+enableMultiRemove?: boolean
+```
+
+Enables/disables the ability to remove multi-sorts
+
+### `enableMultiSort`
+
+```tsx
+enableMultiSort?: boolean
+```
+
+Enables/Disables multi-sorting for the table.
+
+### `sortDescFirst`
+
+```tsx
+sortDescFirst?: boolean
+```
+
+If `true`, all sorts will default to descending as their first toggle state.
+
+### `getSortedRowModel`
+
+```tsx
+getSortedRowModel?: (table: Table<TData>) => () => RowModel<TData>
+```
+
+This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported `getSortedRowModel()` from your adapter to your table or implement your own.
+
+### `maxMultiSortColCount`
+
+```tsx
+maxMultiSortColCount?: number
+```
+
+Set a maximum number of columns that can be multi-sorted.
+
+### `isMultiSortEvent`
+
+```tsx
+isMultiSortEvent?: (e: unknown) => boolean
+```
+
+Pass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return `true` if the event should trigger a multi-sort.
+
+## Table API
+
+### `setSorting`
+
+```tsx
+setSorting: (updater: Updater<SortingState>) => void
+```
+
+Sets or updates the `state.sorting` state.
+
+### `resetSorting`
+
+```tsx
+resetSorting: (defaultState?: boolean) => void
+```
+
+Resets the **sorting** state to `initialState.sorting`, or `true` can be passed to force a default blank state reset to `[]`.
+
+### `getPreSortedRowModel`
+
+```tsx
+getPreSortedRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table before any sorting has been applied.
+
+### `getSortedRowModel`
+
+```tsx
+getSortedRowModel: () => RowModel<TData>
+```
+
+Returns the row model for the table after sorting has been applied.
diff --git a/mintlify/table/enterprise/ag-grid.md b/mintlify/table/enterprise/ag-grid.md
new file mode 100644
index 000000000..60c0e4424
--- /dev/null
+++ b/mintlify/table/enterprise/ag-grid.md
@@ -0,0 +1,43 @@
+---
+title: AG Grid - An alternative enterprise data-grid solution
+---
+
+<p>
+  <a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable">
+    &lt;img src="https://blog.ag-grid.com/content/images/2021/02/new-logo-1.png" style=&#123;&#123; width:400 &#125;&#125; /&gt;
+  </a>
+</p>
+
+While we clearly love TanStack Table, we acknowledge that it is not a "batteries" included product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you.
+
+## Why Choose [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable)?
+
+Here are some good reasons to consider AG Grid for your next project:
+
+### Comprehensive Feature Set
+
+AG Grid offers an extensive set of features, making it a versatile and powerful data grid solution. With AG Grid, you get access to a wide range of functionalities that cater to the needs of complex enterprise applications. From advanced sorting, filtering, and grouping capabilities to column pinning, multi-level headers, and tree data structure support, AG Grid provides you with the tools to create dynamic and interactive data grids that meet your application's unique demands.
+
+### High Performance
+
+When it comes to handling large datasets and achieving exceptional performance, AG Grid delivers outstanding results. It employs highly optimized rendering techniques, efficient data updates, and virtualization to ensure smooth scrolling and fast response times, even when dealing with thousands or millions of rows of data. AG Grid's performance optimizations make it an excellent choice for applications that require high-speed data manipulation and visualization.
+
+### Customization and Extensibility
+
+AG Grid is designed to be highly customizable and extensible, allowing you to tailor the grid to your specific needs. It provides a rich set of APIs and events that enable you to integrate custom functionality seamlessly. You can define custom cell renderers, editors, filters, and aggregators to enhance the grid's behavior and appearance. AG Grid also supports a variety of themes, allowing you to match the grid's visual style to your application's design.
+
+### Support for Enterprise Needs
+
+As an enterprise-focused solution, AG Grid caters to the requirements of complex business applications. It offers enterprise-specific features such as row grouping, column pinning, server-side row model, master/detail grids, and rich editing capabilities. AG Grid also integrates well with other enterprise frameworks and libraries, making it a reliable choice for large-scale projects.
+
+### Active Development and Community Support
+
+AG Grid benefits from active development and a thriving community of developers. The team behind AG Grid consistently introduces new features and enhancements, ensuring that the product evolves to meet the changing needs of the industry. The community support is robust, with forums, documentation, and examples readily available to assist you in utilizing the full potential of AG Grid.
+
+## Conclusion
+
+While TanStack Table remains a powerful and flexible option for implementing data grids, we understand that different projects have different requirements. AG Grid offers a compelling enterprise-grade solution that may be particularly suited to your needs. Its comprehensive feature set, high performance, customization options, and focus on enterprise requirements make AG Grid an excellent choice for projects that demand a robust and scalable data grid solution.
+
+We encourage you to explore AG Grid further by visiting their website and trying out their demo. Remember that both TanStack Table and AG Grid have their unique strengths and considerations. We believe in providing options to our users, empowering you to make informed decisions and choose the best fit for your specific use case.
+
+Visit the [AG Grid website](https://www.ag-grid.com).
diff --git a/mintlify/table/faq.md b/mintlify/table/faq.md
new file mode 100644
index 000000000..32bda4631
--- /dev/null
+++ b/mintlify/table/faq.md
@@ -0,0 +1,166 @@
+---
+title: FAQ
+---
+
+## How do I stop infinite rendering loops?
+
+If you are using React, there is a very common pitfall that can cause infinite rendering. If you fail to give your `columns`, `data`, or `state` a stable reference, React will enter an infinite loop of re-rendering upon any change to the table state.
+
+Why does this happen? Is this a bug in TanStack Table? **No**, it is not. *This is fundamentally how React works*, and properly managing your columns, data, and state will prevent this from happening.
+
+TanStack Table is designed to trigger a re-render whenever either the `data` or `columns` that are passed into the table change, or whenever any of the table's state changes.
+
+> Failing to give `columns` or `data` stable references can cause an infinite loop of re-renders.
+
+### Pitfall 1: Creating new columns or data on every render
+
+```js
+export default function MyComponent() {
+  //😵 BAD: This will cause an infinite loop of re-renders because `columns` is redefined as a new array on every render!
+  const columns = [
+    // ...
+  ];
+
+  //😵 BAD: This will cause an infinite loop of re-renders because `data` is redefined as a new array on every render!
+  const data = [
+    // ...
+  ];
+
+  //❌ Columns and data are defined in the same scope as `useReactTable` without a stable reference, will cause infinite loop!
+  const table = useReactTable({
+    columns,
+    data,
+  });
+
+  return <table>...</table>;
+}
+```
+
+### Solution 1: Stable references with useMemo or useState
+
+In React, you can give a "stable" reference to variables by defining them outside/above the component, or by using `useMemo` or `useState`, or by using a 3rd party state management library (like Redux or React Query 😉)
+
+```js
+//✅ OK: Define columns outside of the component
+const columns = [
+  // ...
+];
+
+//✅ OK: Define data outside of the component
+const data = [
+  // ...
+];
+
+// Usually it's more practical to define columns and data inside the component, so use `useMemo` or `useState` to give them stable references
+export default function MyComponent() {
+  //✅ GOOD: This will not cause an infinite loop of re-renders because `columns` is a stable reference
+  const columns = useMemo(() => [
+    // ...
+  ], []);
+
+  //✅ GOOD: This will not cause an infinite loop of re-renders because `data` is a stable reference
+  const [data, setData] = useState(() => [
+    // ...
+  ]);
+
+  // Columns and data are defined in a stable reference, will not cause infinite loop!
+  const table = useReactTable({
+    columns,
+    data,
+  });
+
+  return <table>...</table>;
+}
+```
+
+### Pitfall 2: Mutating columns or data in place
+
+Even if you give your initial `columns` and `data` stable references, you can still run into infinite loops if you mutate them in place. This is a common pitfall that you may not notice that you are doing at first. Something as simple as an inline `data.filter()` can cause an infinite loop if you are not careful.
+
+```js
+export default function MyComponent() {
+  //✅ GOOD
+  const columns = useMemo(() => [
+    // ...
+  ], []);
+
+  //✅ GOOD (React Query provides stable references to data automatically)
+  const { data, isLoading } = useQuery({
+    //...
+  });
+
+  const table = useReactTable({
+    columns,
+    //❌ BAD: This will cause an infinite loop of re-renders because `data` is mutated in place (destroys stable reference)
+    data: data?.filter(d => d.isActive) ?? [],
+  });
+
+  return <table>...</table>;
+}
+```
+
+### Solution 2: Memoize your data transformations
+
+To prevent infinite loops, you should always memoize your data transformations. This can be done with `useMemo` or similar.
+
+```js
+export default function MyComponent() {
+  //✅ GOOD
+  const columns = useMemo(() => [
+    // ...
+  ], []);
+
+  //✅ GOOD
+  const { data, isLoading } = useQuery({
+    //...
+  });
+
+  //✅ GOOD: This will not cause an infinite loop of re-renders because `filteredData` is memoized
+  const filteredData = useMemo(() => data?.filter(d => d.isActive) ?? [], [data]);
+
+  const table = useReactTable({
+    columns,
+    data: filteredData, // stable reference!
+  });
+
+  return <table>...</table>;
+}
+```
+
+### React Forget
+
+When React Forget is released, these problems might be a thing of the past. Or just use Solid.js... 🤓
+
+## How do I stop my table state from automatically resetting when my data changes?
+
+Most plugins use state that _should_ normally reset when the data sources changes, but sometimes you need to suppress that from happening if you are filtering your data externally, or immutably editing your data while looking at it, or simply doing anything external with your data that you don't want to trigger a piece of table state to reset automatically.
+
+For those situations, each plugin provides a way to disable the state from automatically resetting internally when data or other dependencies for a piece of state change. By setting any of them to `false`, you can stop the automatic resets from being triggered.
+
+Here is a React-based example of stopping basically every piece of state from changing as they normally do while we edit the `data` source for a table:
+
+```js
+const [data, setData] = React.useState([])
+const skipPageResetRef = React.useRef()
+
+const updateData = newData => {
+  // When data gets updated with this function, set a flag
+  // to disable all of the auto resetting
+  skipPageResetRef.current = true
+
+  setData(newData)
+}
+
+React.useEffect(() => {
+  // After the table has updated, always remove the flag
+  skipPageResetRef.current = false
+})
+
+useReactTable({
+  ...
+  autoResetPageIndex: !skipPageResetRef.current,
+  autoResetExpanded: !skipPageResetRef.current,
+})
+```
+
+Now, when we update our data, the above table states will not automatically reset!
diff --git a/mintlify/table/framework/angular/angular-table.md b/mintlify/table/framework/angular/angular-table.md
new file mode 100644
index 000000000..d992a7ece
--- /dev/null
+++ b/mintlify/table/framework/angular/angular-table.md
@@ -0,0 +1,313 @@
+---
+title: Angular Table
+---
+
+The `@tanstack/angular-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing
+state the "angular signals" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## Exports
+
+`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
+
+### `createAngularTable`
+
+Accepts an options function or a computed value that returns the table options, and returns a table.
+
+```ts
+import {createAngularTable} from '@tanstack/angular-table'
+
+export class AppComponent {
+  data = signal<Person[]>([])
+
+  table = createAngularTable(() => ({
+    data: this.data(),
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  }))
+}
+
+// ...render your table in template
+
+```
+
+### `FlexRender`
+
+An Angular structural directive for rendering cell/header/footer templates with dynamic values.
+
+FlexRender supports any type of content supported by Angular:
+
+- A string, or a html string via `innerHTML`
+- A [TemplateRef](https://angular.dev/api/core/TemplateRef)
+- A [Component](https://angular.dev/api/core/Component) wrapped into `FlexRenderComponent`
+
+You can just use the `cell.renderValue` or `cell.getValue` APIs to render the cells of your table. However,
+these APIs will only spit out the raw cell values (from accessor functions).
+If you are using the `cell: () => any` column definition options, you will want to use the `FlexRenderDirective` from the adapter.
+
+Cell column definition is **reactive** and runs into an **injection context**, then you can inject services or make use of signals to automatically modify the rendered content.
+
+#### Example
+
+```ts
+@Component({
+  imports: [FlexRenderDirective],
+  //...
+})
+class YourComponent {}
+```
+
+```angular-html
+
+<tbody>
+@for (row of table.getRowModel().rows; track row.id) {
+  <tr>
+    @for (cell of row.getVisibleCells(); track cell.id) {
+      <td>
+        <ng-container
+          *flexRender="
+              cell.column.columnDef.cell;
+              props: cell.getContext();
+              let cell
+            "
+        >
+          <!-- if you want to render a simple string -->
+          {{ cell }}
+          <!-- if you want to render an html string -->
+          <div [innerHTML]="cell"></div>
+        </ng-container>
+      </td>
+    }
+  </tr>
+}
+</tbody>
+```
+
+#### Rendering a Component
+
+To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent` instantiated with
+your `ComponentType, with the ability to include parameters such as inputs, outputs and a custom injector.
+
+```ts
+import {flexRenderComponent} from "./flex-render-component";
+import {ChangeDetectionStrategy, input, output} from "@angular/core";
+
+@Component({
+  template: `
+    ...
+  `,
+  standalone: true,
+  changeDetectionStrategy: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(click)': 'clickEvent.emit($event)'
+  }
+})
+class CustomCell {
+  readonly content = input.required<string>();
+  readonly cellType = input<MyType>();
+
+  // An output that will emit for every cell click
+  readonly clickEvent = output<Event>();
+}
+
+class AppComponent {
+  columns: ColumnDef<unknown>[] = [
+    {
+      id: 'custom-cell',
+      header: () => {
+        const translateService = inject(TranslateService);
+        return translateService.translate('...');
+      },
+      cell: (context) => {
+        return flexRenderComponent(
+          MyCustomComponent,
+          {
+            injector, // Optional injector
+            inputs: {
+              // Mandatory input since we are using `input.required()
+              content: context.row.original.rowProperty,
+              // cellType? - Optional input
+            },
+            outputs: {
+              clickEvent: () => {
+                // Do something
+              }
+            }
+          }
+        )
+      },
+    },
+  ]
+}
+```
+
+Underneath, this utilizes
+the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api.
+Therefore, you should declare your custom inputs using the @Input decorator or input/model signals.
+
+You can still access the table cell context through the `injectFlexRenderContext` function, which returns the context
+value based on the props you pass to the `FlexRenderDirective`.
+
+```ts
+
+@Component({
+  // ...
+})
+class CustomCellComponent {
+  // context of a cell component
+  readonly context = injectFlexRenderContext<CellContext<TData, TValue>>();
+  // context of a header/footer component
+  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
+}
+```
+
+Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type
+to the corresponding column definitions. These column definitions will be provided to the `flexRender` directive along
+with the `context`.
+
+```ts
+class AppComponent {
+  columns: ColumnDef<Person>[] = [
+    {
+      id: 'select',
+      header: () => TableHeadSelectionComponent<Person>,
+      cell: () => TableRowSelectionComponent<Person>,
+    },
+  ]
+}
+```
+
+```angular-html
+<ng-container
+  *flexRender="
+    header.column.columnDef.header;
+    props: header.getContext();
+    let headerCell
+  "
+>
+  {{ headerCell }}
+</ng-container>
+```
+
+Properties of `context` provided in the `flexRender` directive will be accessible to your component.
+You can explicitly define the context properties required by your component.
+In this example, the context provided to flexRender is of type HeaderContext.
+Input signal `table`, which is a property of HeaderContext together with `column` and `header` properties,
+is then defined to be used in the component. If any of the context properties are
+needed in your component, feel free to use them. Please take note that only input signal is supported,
+when defining access to context properties, using this approach.
+
+```angular-ts
+@Component({
+  template: `
+    <input
+      type="checkbox"
+      [checked]="table().getIsAllRowsSelected()"
+      [indeterminate]="table().getIsSomeRowsSelected()"
+      (change)="table().toggleAllRowsSelected()"
+    />
+  `,
+  // ...
+})
+export class TableHeadSelectionComponent<T> {
+  //column = input.required<Column<T, unknown>>()
+  //header = input.required<Header<T, unknown>>()
+  table = input.required<Table<T>>()
+}
+```
+
+#### Rendering a TemplateRef
+
+In order to render a TemplateRef into a specific column header/cell/footer, you can pass the TemplateRef into the column
+definition.
+
+You can access the TemplateRef data via the `$implicit` property, which is valued based on what is passed in the props
+field of flexRender.
+
+In most cases, each TemplateRef will be rendered with the $implicit context valued based on the cell type in this way:
+
+- Header: `HeaderContext<T, ?>`
+- Cell: `CellContext<T, ?>`,
+- Footer: `HeaderContext<T, ?>`
+
+```angular-html
+
+<ng-container
+  *flexRender="
+              cell.column.columnDef.cell;
+              props: cell.getContext();
+              let cell
+            "
+>
+  <!-- if you want to render a simple string -->
+  {{ cell }}
+  <!-- if you want to render an html string -->
+  <div [innerHTML]="cell"></div>
+</ng-container>
+
+<ng-template #myCell let-context>
+  <!-- render something with context -->
+</ng-template>
+```
+
+Full example:
+
+```angular-ts
+import type {
+  CellContext,
+  ColumnDef,
+  HeaderContext,
+} from '@tanstack/angular-table'
+import {Component, TemplateRef, viewChild} from '@angular/core'
+
+@Component({
+  template: `
+    <tbody>
+      @for (row of table.getRowModel().rows; track row.id) {
+        <tr>
+          @for (cell of row.getVisibleCells(); track cell.id) {
+            <td>
+              <ng-container
+                *flexRender="
+                  cell.column.columnDef.cell;
+                  props: cell.getContext(); // Data given to the TemplateRef
+                  let cell
+                "
+              >
+                <!-- if you want to render a simple string -->
+                {{ cell }}
+                <!-- if you want to render an html string -->
+                <div [innerHTML]="cell"></div>
+              </ng-container>
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+
+    <ng-template #customHeader let-context>
+      {{ context.getValue() }}
+    </ng-template>
+    <ng-template #customCell let-context>
+      {{ context.getValue() }}
+    </ng-template>
+  `,
+})
+class AppComponent {
+  customHeader =
+    viewChild.required<TemplateRef<{ $implicit: HeaderContext<any, any> }>>(
+      'customHeader'
+    )
+  customCell =
+    viewChild.required<TemplateRef<{ $implicit: CellContext<any, any> }>>(
+      'customCell'
+    )
+
+  columns: ColumnDef<unknown>[] = [
+    {
+      id: 'customCell',
+      header: () => this.customHeader(),
+      cell: () => this.customCell(),
+    },
+  ]
+}
+```
diff --git a/mintlify/table/framework/angular/examples/basic.md b/mintlify/table/framework/angular/examples/basic.md
new file mode 100644
index 000000000..bdfcd262d
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/column-ordering.md b/mintlify/table/framework/angular/examples/column-ordering.md
new file mode 100644
index 000000000..6ec1f793b
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/column-ordering.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/column-ordering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/column-ordering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/column-pinning-sticky.md b/mintlify/table/framework/angular/examples/column-pinning-sticky.md
new file mode 100644
index 000000000..27eb2e80c
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/column-pinning-sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/column-pinning-sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/column-pinning-sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/column-pinning.md b/mintlify/table/framework/angular/examples/column-pinning.md
new file mode 100644
index 000000000..e5bd98fc3
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/column-pinning.md
@@ -0,0 +1,12 @@
+---
+title: "Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/column-pinning)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/column-pinning)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/column-resizing-performant.md b/mintlify/table/framework/angular/examples/column-resizing-performant.md
new file mode 100644
index 000000000..eef1879c0
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/column-resizing-performant.md
@@ -0,0 +1,12 @@
+---
+title: "Performant Column Resizing"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/column-resizing-performant)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/column-resizing-performant)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/column-visibility.md b/mintlify/table/framework/angular/examples/column-visibility.md
new file mode 100644
index 000000000..8d836aa72
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/column-visibility.md
@@ -0,0 +1,12 @@
+---
+title: "Column Visibility"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/column-visibility)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/column-visibility)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/editable.md b/mintlify/table/framework/angular/examples/editable.md
new file mode 100644
index 000000000..e103fb0de
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/editable.md
@@ -0,0 +1,12 @@
+---
+title: "Editable data"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/editable)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/editable)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/expanding.md b/mintlify/table/framework/angular/examples/expanding.md
new file mode 100644
index 000000000..5ede5f7cc
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/expanding.md
@@ -0,0 +1,12 @@
+---
+title: "Expanding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/expanding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/expanding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/filters.md b/mintlify/table/framework/angular/examples/filters.md
new file mode 100644
index 000000000..982f1de2b
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Column Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/grouping.md b/mintlify/table/framework/angular/examples/grouping.md
new file mode 100644
index 000000000..8955714b3
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/grouping.md
@@ -0,0 +1,12 @@
+---
+title: "Column Grouping"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/grouping)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/grouping)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/row-dnd.md b/mintlify/table/framework/angular/examples/row-dnd.md
new file mode 100644
index 000000000..74b1c3176
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/row-dnd.md
@@ -0,0 +1,12 @@
+---
+title: "Row DnD"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/row-dnd)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/row-dnd)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/row-selection.md b/mintlify/table/framework/angular/examples/row-selection.md
new file mode 100644
index 000000000..0ac321d10
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/row-selection.md
@@ -0,0 +1,12 @@
+---
+title: "Row Selection"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/row-selection)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/row-selection)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/signal-input.md b/mintlify/table/framework/angular/examples/signal-input.md
new file mode 100644
index 000000000..73ea5c846
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/signal-input.md
@@ -0,0 +1,12 @@
+---
+title: "Signal Input"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/signal-input)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/signal-input)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/examples/sub-components.md b/mintlify/table/framework/angular/examples/sub-components.md
new file mode 100644
index 000000000..5aea6ee93
--- /dev/null
+++ b/mintlify/table/framework/angular/examples/sub-components.md
@@ -0,0 +1,12 @@
+---
+title: "Sub Components"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/angular/examples/sub-components)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/angular/sub-components)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/angular/guide/table-state.md b/mintlify/table/framework/angular/guide/table-state.md
new file mode 100644
index 000000000..40c732299
--- /dev/null
+++ b/mintlify/table/framework/angular/guide/table-state.md
@@ -0,0 +1,217 @@
+---
+title: Table State (Angular) Guide
+---
+
+## Table State (Angular) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```ts
+table = createAngularTable(() => ({
+  columns: this.columns,
+  data: this.data(),
+  //...
+}))
+
+someHandler() {
+  console.log(this.table.getState()) //access the entire internal state
+  console.log(this.table.getState().rowSelection) //access just the row selection state
+}
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+table = createAngularTable(() => ({
+  columns: this.columns,
+  data: this.data(),
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+}))
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```ts
+import {signal} from '@angular/core';
+import {SortingState, ColumnFiltersState, PaginationState} from '@tanstack/angular-table'
+import {toObservable} from "@angular/core/rxjs-interop";
+import {combineLatest, switchMap} from 'rxjs';
+
+class TableComponent {
+  readonly columnFilters = signal<ColumnFiltersState>([]) //no default filters
+  readonly sorting = signal<SortingState>([
+    {
+      id: 'age',
+      desc: true, //sort by age in descending order by default
+    }
+  ])
+  readonly pagination = signal<PaginationState>({
+    pageIndex: 0,
+    pageSize: 15
+  })
+
+  //Use our controlled state values to fetch data
+  readonly data$ = combineLatest({
+    filters: toObservable(this.columnFilters),
+    sorting: toObservable(this.sorting),
+    pagination: toObservable(this.pagination)
+  }).pipe(
+    switchMap(({filters, sorting, pagination}) => fetchData(filters, sorting, pagination))
+  )
+  readonly data = toSignal(this.data$);
+
+  readonly table = createAngularTable(() => ({
+    columns: this.columns,
+    data: this.data(),
+    //...
+    state: {
+      columnFilters: this.columnFilters(), //pass controlled state back to the table (overrides internal state)
+      sorting: this.sorting(),
+      pagination: this.pagination(),
+    },
+    onColumnFiltersChange: updater => { //hoist columnFilters state into our own state management
+      updater instanceof Function
+        ? this.columnFilters.update(updater)
+        : this.columnFilters.set(updater)
+    },
+    onSortingChange: updater => {
+      updater instanceof Function
+        ? this.sorting.update(updater)
+        : this.sorting.set(updater)
+    },
+    onPaginationChange: updater => {
+      updater instanceof Function
+        ? this.pagination.update(updater)
+        : this.pagination.set(updater)
+    },
+  }))
+}
+
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use a constructor in a special way as shown below.
+
+```ts
+
+
+class TableComponent {
+  // create an empty table state, we'll override it later
+  readonly state = signal({} as TableState);
+
+  // create a table instance with default state values
+  readonly table = createAngularTable(() => ({
+    columns: this.columns,
+    data: this.data(),
+    // our fully controlled state overrides the internal state
+    state: this.state(),
+    onStateChange: updater => {
+      // any state changes will be pushed up to our own state management
+      this.state.set(
+        updater instanceof Function ? updater(this.state()) : updater
+      )
+    }
+  }))
+
+  constructor() {
+    // set the initial table state
+    this.state.set({
+      // populate the initial state with all of the default state values
+      // from the table instance
+      ...this.table.initialState,
+      pagination: {
+        pageIndex: 0,
+        pageSize: 15, // optionally customize the initial pagination state.
+      },
+    })
+  }
+}
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```ts
+class TableComponent {
+  sorting = signal<SortingState>([])
+
+  table = createAngularTable(() => ({
+    columns: this.columns,
+    data: this.data(),
+    //...
+    state: {
+      sorting: this.sorting(), // required because we are using `onSortingChange`
+    },
+    onSortingChange: updater => { // makes the `state.sorting` controlled
+      updater instanceof Function
+        ? this.sorting.update(updater)
+        : this.sorting.set(updater)
+    }
+  }))
+}
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why you will see the `updater instanceof Function ? this.state.update(updater) : this.state.set(updater)` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value, or the signal will require `signal.update` to be called with the updater instead of `signal.set`.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```ts
+import {createAngularTable, type SortingState} from '@tanstack/angular-table'
+
+class TableComponent {
+  readonly sorting = signal<SortingState>([
+    {
+      id: 'age', // you should get autocomplete for the `id` and `desc` properties
+      desc: true,
+    }
+  ])
+}
+```
diff --git a/mintlify/table/framework/lit/examples/basic.md b/mintlify/table/framework/lit/examples/basic.md
new file mode 100644
index 000000000..c94646a23
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/examples/column-sizing.md b/mintlify/table/framework/lit/examples/column-sizing.md
new file mode 100644
index 000000000..f51220a0d
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/column-sizing.md
@@ -0,0 +1,12 @@
+---
+title: "Column Sizing"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/column-sizing)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/column-sizing)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/examples/filters.md b/mintlify/table/framework/lit/examples/filters.md
new file mode 100644
index 000000000..bb015d426
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/examples/row-selection.md b/mintlify/table/framework/lit/examples/row-selection.md
new file mode 100644
index 000000000..85a44e897
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/row-selection.md
@@ -0,0 +1,12 @@
+---
+title: "Row Selection"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/row-selection)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/row-selection)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/examples/sorting.md b/mintlify/table/framework/lit/examples/sorting.md
new file mode 100644
index 000000000..3bef39bdb
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/examples/virtualized-rows.md b/mintlify/table/framework/lit/examples/virtualized-rows.md
new file mode 100644
index 000000000..edac29600
--- /dev/null
+++ b/mintlify/table/framework/lit/examples/virtualized-rows.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Rows"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/lit/examples/virtualized-rows)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/lit/virtualized-rows)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/lit/guide/table-state.md b/mintlify/table/framework/lit/guide/table-state.md
new file mode 100644
index 000000000..6aee7092d
--- /dev/null
+++ b/mintlify/table/framework/lit/guide/table-state.md
@@ -0,0 +1,193 @@
+---
+title: Table State (Lit) Guide
+---
+
+## Table State (Lit) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```ts
+private tableController = new TableController<Person>(this);
+
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    ...
+  })
+
+  console.log(table.getState()) //access the entire internal state
+  console.log(table.getState().rowSelection) //access just the row selection state
+  // ...
+}
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```ts
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    initialState: {
+      columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+      columnVisibility: {
+        id: false //hide the id column by default
+      },
+      expanded: true, //expand all rows by default
+      sorting: [
+        {
+          id: 'age',
+          desc: true //sort by age in descending order by default
+        }
+      ]
+    },
+  })
+
+  return html`...`;
+}
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```jsx
+import {html} from "lit";
+
+@customElement('my-component')
+class MyComponent extends LitElement {
+  @state()
+  private _sorting: SortingState = []
+
+  render() {
+    const table = this.tableController.table({
+      columns,
+      data,
+      state: {
+        sorting: this._sorting,
+      },
+      onSortingChange: updaterOrValue => {
+        if (typeof updaterOrValue === 'function') {
+          this._sorting = updaterOrValue(this._sorting)
+        } else {
+          this._sorting = updaterOrValue
+        }
+      },
+      getSortedRowModel: getSortedRowModel(),
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`...`
+  }
+}
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```ts
+
+private tableController = new TableController<Person>(this);
+
+@state()
+private _tableState;
+
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  })
+  const state = { ...table.initialState, ...this._tableState };
+  table.setOptions(prev => ({
+    ...prev,
+    state,
+    onStateChange: updater => {
+      this._tableState =
+        updater instanceof Function ? updater(state) : updater //any state changes will be pushed up to our own state management
+    },
+  }))
+
+  return html`...`;
+}
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+@state()
+private _sorting = [];
+//...
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    state: {
+      sorting: this._sorting,
+    },
+    onSortingChange: updaterOrValue => {
+      if (typeof updaterOrValue === 'function') {
+        this._sorting = updaterOrValue(this._sorting)
+      } else {
+        this._sorting = updaterOrValue
+      }
+    },
+    getSortedRowModel: getSortedRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return html`...`;
+}
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why you will see the `updater instanceof Function ? updater(state.value) : updater` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { TableController, type SortingState } from '@tanstack/lit-table'
+//...
+@state()
+private _sorting: SortingState = [
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+]
+```
diff --git a/mintlify/table/framework/lit/lit-table.md b/mintlify/table/framework/lit/lit-table.md
new file mode 100644
index 000000000..8a5c263c9
--- /dev/null
+++ b/mintlify/table/framework/lit/lit-table.md
@@ -0,0 +1,63 @@
+---
+title: Lit Table
+---
+
+The `@tanstack/lit-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "lit" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## Exports
+
+`@tanstack/lit-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
+
+### `TableController`
+
+Is a reactive controller that provides a `table` API that takes an `options` object and returns a table instance.
+
+```ts
+import { TableController } from '@tanstack/lit-table'
+
+@customElement('my-table-element')
+class MyTableElement extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  protected render() {
+    const table = this.tableController.table(options)
+    // ...render your table
+  }
+}
+```
+
+### `flexRender`
+
+A utility function for rendering cell/header/footer templates with dynamic values.
+
+Example:
+
+```jsx
+import { flexRender } from '@tanstack/lit-table'
+//...
+return html`
+<tbody>
+  ${table
+    .getRowModel()
+    .rows.slice(0, 10)
+    .map(
+      row => html`
+        <tr>
+          ${row
+            .getVisibleCells()
+            .map(
+              cell => html`
+                <td>
+                  ${flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  )}
+                </td>
+              `
+            )}
+        </tr>
+      `
+    )}
+</tbody>
+`
+```
diff --git a/mintlify/table/framework/qwik/examples/basic.md b/mintlify/table/framework/qwik/examples/basic.md
new file mode 100644
index 000000000..708b42e27
--- /dev/null
+++ b/mintlify/table/framework/qwik/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/qwik/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/qwik/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/qwik/examples/filters.md b/mintlify/table/framework/qwik/examples/filters.md
new file mode 100644
index 000000000..f26519340
--- /dev/null
+++ b/mintlify/table/framework/qwik/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/qwik/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/qwik/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/qwik/examples/row-selection.md b/mintlify/table/framework/qwik/examples/row-selection.md
new file mode 100644
index 000000000..867a48c93
--- /dev/null
+++ b/mintlify/table/framework/qwik/examples/row-selection.md
@@ -0,0 +1,12 @@
+---
+title: "Row Selection"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/qwik/examples/row-selection)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/qwik/row-selection)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/qwik/examples/sorting.md b/mintlify/table/framework/qwik/examples/sorting.md
new file mode 100644
index 000000000..33deb3018
--- /dev/null
+++ b/mintlify/table/framework/qwik/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/qwik/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/qwik/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/qwik/guide/table-state.md b/mintlify/table/framework/qwik/guide/table-state.md
new file mode 100644
index 000000000..fcc42631c
--- /dev/null
+++ b/mintlify/table/framework/qwik/guide/table-state.md
@@ -0,0 +1,178 @@
+---
+title: Table State (Qwik) Guide
+---
+
+## Table State (Qwik) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```jsx
+const table = useQwikTable({
+  columns,
+  data,
+  //...
+})
+
+console.log(table.getState()) //access the entire internal state
+console.log(table.getState().rowSelection) //access just the row selection state
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+const table = useQwikTable({
+  columns,
+  data,
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+})
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```jsx
+const columnFilters = Qwik.useSignal([]) //no default filters
+const sorting = Qwik.useSignal([{
+  id: 'age',
+  desc: true, //sort by age in descending order by default
+}]) 
+const pagination = Qwik.useSignal({ pageIndex: 0, pageSize: 15 })
+
+//Use our controlled state values to fetch data
+const tableQuery = useQuery({
+  queryKey: ['users', columnFilters.value, sorting.value, pagination.value],
+  queryFn: () => fetchUsers(columnFilters.value, sorting.value, pagination.value),
+  //...
+})
+
+const table = useQwikTable({
+  columns: columns.value,
+  data: tableQuery.data,
+  //...
+  state: {
+    columnFilters: columnFilters.value, //pass controlled state back to the table (overrides internal state)
+    sorting: sorting.value,
+    pagination: pagination.value,
+  },
+  onColumnFiltersChange: updater => {
+    columnFilters.value = updater instanceof Function ? updater(columnFilters.value) : updater //hoist columnFilters state into our own state management
+  },
+  onSortingChange: updater => {
+    sorting.value = updater instanceof Function ? updater(sorting.value) : updater
+  },
+  onPaginationChange: updater => {
+    pagination.value = updater instanceof Function ? updater(pagination.value) : updater
+  },
+})
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```jsx
+//create a table instance with default state values
+const table = useQwikTable({
+  columns,
+  data,
+  //... Note: `state` values are NOT passed in yet
+})
+
+
+const sate = Qwik.useSignal({
+  ...table.initialState, //populate the initial state with all of the default state values from the table instance
+  pagination: {
+    pageIndex: 0,
+    pageSize: 15 //optionally customize the initial pagination state.
+  }
+})
+
+//Use the table.setOptions API to merge our fully controlled state onto the table instance
+table.setOptions(prev => ({
+  ...prev, //preserve any other options that we have set up above
+  state: state.value, //our fully controlled state overrides the internal state
+  onStateChange: updater => {
+    state.value = updater instanceof Function ? updater(state.value) : updater //any state changes will be pushed up to our own state management
+  },
+}))
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+const sorting = Qwik.useSignal([])
+//...
+const table = useQwikTable({
+  columns,
+  data,
+  //...
+  state: {
+    sorting: sorting.value, //required because we are using `onSortingChange`
+  },
+  onSortingChange: updater => {
+    sorting.value = updater instanceof Function ? updater(sorting) : updater //makes the `state.sorting` controlled
+  }, 
+})
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why you will see the `updater instanceof Function ? updater(state.value) : updater` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { useQwikTable, type SortingState } from '@tanstack/qwik-table'
+//...
+const sorting = Qwik.useSignal<SortingState[]>([
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+])
+```
\ No newline at end of file
diff --git a/mintlify/table/framework/qwik/qwik-table.md b/mintlify/table/framework/qwik/qwik-table.md
new file mode 100644
index 000000000..d7e1ade8e
--- /dev/null
+++ b/mintlify/table/framework/qwik/qwik-table.md
@@ -0,0 +1,47 @@
+---
+title: Qwik Table
+---
+
+The `@tanstack/qwik-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "qwik" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## Exports
+
+`@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
+
+### `useQwikTable`
+
+Takes an `options` object and returns a table from a Qwik Store with `NoSerialize`.
+
+```ts
+import { useQwikTable } from '@tanstack/qwik-table'
+
+const table = useQwikTable(options)
+// ...render your table
+
+```
+
+### `flexRender`
+
+A utility function for rendering cell/header/footer templates with dynamic values.
+
+Example:
+
+```jsx
+import { flexRender } from '@tanstack/qwik-table'
+//...
+return (
+  <tbody>
+    {table.getRowModel().rows.map(row => {
+      return (
+        <tr key={row.id}>
+          {row.getVisibleCells().map(cell => (
+            <td key={cell.id}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </td>
+          ))}
+        </tr>
+      )
+    })}
+  </tbody>
+);
+```
diff --git a/mintlify/table/framework/react/examples/basic.md b/mintlify/table/framework/react/examples/basic.md
new file mode 100644
index 000000000..cc7725e3c
--- /dev/null
+++ b/mintlify/table/framework/react/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/bootstrap.md b/mintlify/table/framework/react/examples/bootstrap.md
new file mode 100644
index 000000000..0d3abf5ad
--- /dev/null
+++ b/mintlify/table/framework/react/examples/bootstrap.md
@@ -0,0 +1,12 @@
+---
+title: "React Bootstrap"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/bootstrap)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/bootstrap)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-dnd.md b/mintlify/table/framework/react/examples/column-dnd.md
new file mode 100644
index 000000000..19c65b113
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-dnd.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering (DnD)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-dnd)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-dnd)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-groups.md b/mintlify/table/framework/react/examples/column-groups.md
new file mode 100644
index 000000000..610719819
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-groups.md
@@ -0,0 +1,12 @@
+---
+title: "Header Groups"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-groups)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-groups)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-ordering.md b/mintlify/table/framework/react/examples/column-ordering.md
new file mode 100644
index 000000000..456245c71
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-ordering.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-ordering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-ordering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-pinning-sticky.md b/mintlify/table/framework/react/examples/column-pinning-sticky.md
new file mode 100644
index 000000000..273d7e8af
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-pinning-sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-pinning-sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-pinning.md b/mintlify/table/framework/react/examples/column-pinning.md
new file mode 100644
index 000000000..85b436858
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-pinning.md
@@ -0,0 +1,12 @@
+---
+title: "Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-pinning)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-resizing-performant.md b/mintlify/table/framework/react/examples/column-resizing-performant.md
new file mode 100644
index 000000000..73cfe630b
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-resizing-performant.md
@@ -0,0 +1,12 @@
+---
+title: "Performant Column Resizing"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-resizing-performant)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-sizing.md b/mintlify/table/framework/react/examples/column-sizing.md
new file mode 100644
index 000000000..8ad95f30f
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-sizing.md
@@ -0,0 +1,12 @@
+---
+title: "Column Sizing"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-sizing)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-sizing)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/column-visibility.md b/mintlify/table/framework/react/examples/column-visibility.md
new file mode 100644
index 000000000..3398cd86c
--- /dev/null
+++ b/mintlify/table/framework/react/examples/column-visibility.md
@@ -0,0 +1,12 @@
+---
+title: "Column Visibility"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/column-visibility)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/column-visibility)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/custom-features.md b/mintlify/table/framework/react/examples/custom-features.md
new file mode 100644
index 000000000..70ee61e9e
--- /dev/null
+++ b/mintlify/table/framework/react/examples/custom-features.md
@@ -0,0 +1,12 @@
+---
+title: "Custom Features"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/custom-features)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/custom-features)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/editable-data.md b/mintlify/table/framework/react/examples/editable-data.md
new file mode 100644
index 000000000..31bc3e33a
--- /dev/null
+++ b/mintlify/table/framework/react/examples/editable-data.md
@@ -0,0 +1,12 @@
+---
+title: "Editable Data"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/editable-data)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/editable-data)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/expanding.md b/mintlify/table/framework/react/examples/expanding.md
new file mode 100644
index 000000000..5cffd9f3a
--- /dev/null
+++ b/mintlify/table/framework/react/examples/expanding.md
@@ -0,0 +1,12 @@
+---
+title: "Expanding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/expanding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/expanding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/filters-faceted.md b/mintlify/table/framework/react/examples/filters-faceted.md
new file mode 100644
index 000000000..550995065
--- /dev/null
+++ b/mintlify/table/framework/react/examples/filters-faceted.md
@@ -0,0 +1,12 @@
+---
+title: "Column Filters (Faceted)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/filters-faceted)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/filters-faceted)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/filters-fuzzy.md b/mintlify/table/framework/react/examples/filters-fuzzy.md
new file mode 100644
index 000000000..0125e9d49
--- /dev/null
+++ b/mintlify/table/framework/react/examples/filters-fuzzy.md
@@ -0,0 +1,12 @@
+---
+title: "Fuzzy Search Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/filters-fuzzy)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/filters-fuzzy)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/filters.md b/mintlify/table/framework/react/examples/filters.md
new file mode 100644
index 000000000..1180879fb
--- /dev/null
+++ b/mintlify/table/framework/react/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Column Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/full-width-resizable-table.md b/mintlify/table/framework/react/examples/full-width-resizable-table.md
new file mode 100644
index 000000000..f1c5db804
--- /dev/null
+++ b/mintlify/table/framework/react/examples/full-width-resizable-table.md
@@ -0,0 +1,12 @@
+---
+title: "React Full Width Resizable"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/full-width-resizable-table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/full-width-resizable-table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/full-width-table.md b/mintlify/table/framework/react/examples/full-width-table.md
new file mode 100644
index 000000000..45aafc165
--- /dev/null
+++ b/mintlify/table/framework/react/examples/full-width-table.md
@@ -0,0 +1,12 @@
+---
+title: "React Full Width"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/full-width-table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/full-width-table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/fully-controlled.md b/mintlify/table/framework/react/examples/fully-controlled.md
new file mode 100644
index 000000000..d4cbe8748
--- /dev/null
+++ b/mintlify/table/framework/react/examples/fully-controlled.md
@@ -0,0 +1,12 @@
+---
+title: "Fully Controlled"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/fully-controlled)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/fully-controlled)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/grouping.md b/mintlify/table/framework/react/examples/grouping.md
new file mode 100644
index 000000000..0e87aca91
--- /dev/null
+++ b/mintlify/table/framework/react/examples/grouping.md
@@ -0,0 +1,12 @@
+---
+title: "Grouping"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/grouping)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/grouping)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/kitchen-sink.md b/mintlify/table/framework/react/examples/kitchen-sink.md
new file mode 100644
index 000000000..e8c247787
--- /dev/null
+++ b/mintlify/table/framework/react/examples/kitchen-sink.md
@@ -0,0 +1,12 @@
+---
+title: "Kitchen Sink"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/kitchen-sink)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/material-ui-pagination.md b/mintlify/table/framework/react/examples/material-ui-pagination.md
new file mode 100644
index 000000000..cca50a91f
--- /dev/null
+++ b/mintlify/table/framework/react/examples/material-ui-pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Material UI Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/material-ui-pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/material-ui-pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/pagination-controlled.md b/mintlify/table/framework/react/examples/pagination-controlled.md
new file mode 100644
index 000000000..e42ebfdf8
--- /dev/null
+++ b/mintlify/table/framework/react/examples/pagination-controlled.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination Controlled"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/pagination-controlled)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/pagination-controlled)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/pagination.md b/mintlify/table/framework/react/examples/pagination.md
new file mode 100644
index 000000000..68574bc5c
--- /dev/null
+++ b/mintlify/table/framework/react/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/query-router-search-params.md b/mintlify/table/framework/react/examples/query-router-search-params.md
new file mode 100644
index 000000000..47b513fa6
--- /dev/null
+++ b/mintlify/table/framework/react/examples/query-router-search-params.md
@@ -0,0 +1,12 @@
+---
+title: "Query Router Search Params"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/query-router-search-params)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/query-router-search-params)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/row-dnd.md b/mintlify/table/framework/react/examples/row-dnd.md
new file mode 100644
index 000000000..9ced100d5
--- /dev/null
+++ b/mintlify/table/framework/react/examples/row-dnd.md
@@ -0,0 +1,12 @@
+---
+title: "Row DnD"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/row-dnd)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/row-dnd)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/row-pinning.md b/mintlify/table/framework/react/examples/row-pinning.md
new file mode 100644
index 000000000..cd5e033b3
--- /dev/null
+++ b/mintlify/table/framework/react/examples/row-pinning.md
@@ -0,0 +1,12 @@
+---
+title: "Row Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/row-pinning)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/row-pinning)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/row-selection.md b/mintlify/table/framework/react/examples/row-selection.md
new file mode 100644
index 000000000..229cfa0f0
--- /dev/null
+++ b/mintlify/table/framework/react/examples/row-selection.md
@@ -0,0 +1,12 @@
+---
+title: "Row Selection"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/row-selection)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/row-selection)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/sorting.md b/mintlify/table/framework/react/examples/sorting.md
new file mode 100644
index 000000000..a73e48c1d
--- /dev/null
+++ b/mintlify/table/framework/react/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/sub-components.md b/mintlify/table/framework/react/examples/sub-components.md
new file mode 100644
index 000000000..78563264e
--- /dev/null
+++ b/mintlify/table/framework/react/examples/sub-components.md
@@ -0,0 +1,12 @@
+---
+title: "Sub Components"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/sub-components)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/sub-components)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/virtualized-columns-experimental.md b/mintlify/table/framework/react/examples/virtualized-columns-experimental.md
new file mode 100644
index 000000000..3716c8545
--- /dev/null
+++ b/mintlify/table/framework/react/examples/virtualized-columns-experimental.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Columns (Experimental)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns-experimental)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/virtualized-columns-experimental)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/virtualized-columns.md b/mintlify/table/framework/react/examples/virtualized-columns.md
new file mode 100644
index 000000000..590d125f3
--- /dev/null
+++ b/mintlify/table/framework/react/examples/virtualized-columns.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Columns"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/virtualized-columns)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/virtualized-infinite-scrolling.md b/mintlify/table/framework/react/examples/virtualized-infinite-scrolling.md
new file mode 100644
index 000000000..e0eb71e10
--- /dev/null
+++ b/mintlify/table/framework/react/examples/virtualized-infinite-scrolling.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Infinite Scrolling"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/virtualized-infinite-scrolling)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/virtualized-rows-experimental.md b/mintlify/table/framework/react/examples/virtualized-rows-experimental.md
new file mode 100644
index 000000000..4cec62f06
--- /dev/null
+++ b/mintlify/table/framework/react/examples/virtualized-rows-experimental.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Rows (Experimental)"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-rows-experimental)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/virtualized-rows-experimental)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/examples/virtualized-rows.md b/mintlify/table/framework/react/examples/virtualized-rows.md
new file mode 100644
index 000000000..ac1615b58
--- /dev/null
+++ b/mintlify/table/framework/react/examples/virtualized-rows.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Rows"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-rows)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/react/virtualized-rows)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/react/guide/table-state.md b/mintlify/table/framework/react/guide/table-state.md
new file mode 100644
index 000000000..badaedb5a
--- /dev/null
+++ b/mintlify/table/framework/react/guide/table-state.md
@@ -0,0 +1,204 @@
+---
+title: Table State (React) Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [kitchen sink](/table/framework/react/examples/kitchen-sink)
+- [fully controlled](/table/framework/react/examples/fully-controlled)
+
+## Table State (React) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  //...
+})
+
+console.log(table.getState()) //access the entire internal state
+console.log(table.getState().rowSelection) //access just the row selection state
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+})
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```jsx
+const [columnFilters, setColumnFilters] = React.useState([]) //no default filters
+const [sorting, setSorting] = React.useState([{
+  id: 'age',
+  desc: true, //sort by age in descending order by default
+}]) 
+const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 15 })
+
+//Use our controlled state values to fetch data
+const tableQuery = useQuery({
+  queryKey: ['users', columnFilters, sorting, pagination],
+  queryFn: () => fetchUsers(columnFilters, sorting, pagination),
+  //...
+})
+
+const table = useReactTable({
+  columns,
+  data: tableQuery.data,
+  //...
+  state: {
+    columnFilters, //pass controlled state back to the table (overrides internal state)
+    sorting,
+    pagination
+  },
+  onColumnFiltersChange: setColumnFilters, //hoist columnFilters state into our own state management
+  onSortingChange: setSorting,
+  onPaginationChange: setPagination,
+})
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a react tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```jsx
+//create a table instance with default state values
+const table = useReactTable({
+  columns,
+  data,
+  //... Note: `state` values are NOT passed in yet
+})
+
+
+const [state, setState] = React.useState({
+  ...table.initialState, //populate the initial state with all of the default state values from the table instance
+  pagination: {
+    pageIndex: 0,
+    pageSize: 15 //optionally customize the initial pagination state.
+  }
+})
+
+//Use the table.setOptions API to merge our fully controlled state onto the table instance
+table.setOptions(prev => ({
+  ...prev, //preserve any other options that we have set up above
+  state, //our fully controlled state overrides the internal state
+  onStateChange: setState //any state changes will be pushed up to our own state management
+}))
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+const [sorting, setSorting] = React.useState([])
+//...
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  state: {
+    sorting, //required because we are using `onSortingChange`
+  },
+  onSortingChange: setSorting, //makes the `state.sorting` controlled
+})
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+```jsx
+const [sorting, setSorting] = React.useState([])
+const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 })
+
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  state: {
+    pagination,
+    sorting,
+  }
+  //syntax 1
+  onPaginationChange: (updater) => {
+    setPagination(old => {
+      const newPaginationValue = updater instanceof Function ? updater(old) : updater
+      //do something with the new pagination value
+      //...
+      return newPaginationValue
+    })
+  },
+  //syntax 2
+  onSortingChange: (updater) => {
+    const newSortingValue = updater instanceof Function ? updater(sorting) : updater
+    //do something with the new sorting value
+    //...
+    setSorting(updater) //normal state update
+  }
+})
+```
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { useReactTable, type SortingState } from '@tanstack/react-table'
+//...
+const [sorting, setSorting] = React.useState<SortingState[]>([
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+])
+```
diff --git a/mintlify/table/framework/react/react-table.md b/mintlify/table/framework/react/react-table.md
new file mode 100644
index 000000000..2dd6834c8
--- /dev/null
+++ b/mintlify/table/framework/react/react-table.md
@@ -0,0 +1,19 @@
+---
+title: React Table
+---
+
+The `@tanstack/react-table` adapter is a wrapper around the core table logic. Most of its job is related to managing state the "react" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## `useReactTable`
+
+Takes an `options` object and returns a table.
+
+```tsx
+import { useReactTable } from '@tanstack/react-table'
+
+function App() {
+  const table = useReactTable(options)
+
+  // ...render your table
+}
+```
diff --git a/mintlify/table/framework/solid/examples/basic.md b/mintlify/table/framework/solid/examples/basic.md
new file mode 100644
index 000000000..3d7c6dbd4
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/bootstrap.md b/mintlify/table/framework/solid/examples/bootstrap.md
new file mode 100644
index 000000000..fa24d5c9e
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/bootstrap.md
@@ -0,0 +1,12 @@
+---
+title: "Solid Bootstrap"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/bootstrap)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/bootstrap)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/column-groups.md b/mintlify/table/framework/solid/examples/column-groups.md
new file mode 100644
index 000000000..b438199ad
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/column-groups.md
@@ -0,0 +1,12 @@
+---
+title: "Column Groups"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/column-groups)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/column-groups)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/column-ordering.md b/mintlify/table/framework/solid/examples/column-ordering.md
new file mode 100644
index 000000000..359b07775
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/column-ordering.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/column-ordering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/column-ordering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/column-visibility.md b/mintlify/table/framework/solid/examples/column-visibility.md
new file mode 100644
index 000000000..e80de9bb3
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/column-visibility.md
@@ -0,0 +1,12 @@
+---
+title: "Column Visibility"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/column-visibility)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/column-visibility)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/filters.md b/mintlify/table/framework/solid/examples/filters.md
new file mode 100644
index 000000000..f9053a197
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/examples/sorting.md b/mintlify/table/framework/solid/examples/sorting.md
new file mode 100644
index 000000000..aac424ca2
--- /dev/null
+++ b/mintlify/table/framework/solid/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/solid/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/solid/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/solid/guide/table-state.md b/mintlify/table/framework/solid/guide/table-state.md
new file mode 100644
index 000000000..f5d2f1a62
--- /dev/null
+++ b/mintlify/table/framework/solid/guide/table-state.md
@@ -0,0 +1,221 @@
+---
+title: Table State (Solid) Guide
+---
+
+## Table State (Solid) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```jsx
+const table = createSolidTable({
+  columns,
+  get data() {
+    return data()
+  },
+  //...
+})
+
+console.log(table.getState()) //access the entire internal state
+console.log(table.getState().rowSelection) //access just the row selection state
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+const table = createSolidTable({
+  columns,
+  data,
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+})
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```jsx
+const [columnFilters, setColumnFilters] = createSignal([]) //no default filters
+const [sorting, setSorting] = createSignal([{
+  id: 'age',
+  desc: true, //sort by age in descending order by default
+}]) 
+const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 15 })
+
+//Use our controlled state values to fetch data
+const tableQuery = createQuery({
+  queryKey: ['users', columnFilters, sorting, pagination],
+  queryFn: () => fetchUsers(columnFilters, sorting, pagination),
+  //...
+})
+
+const table = createSolidTable({
+  columns,
+  get data() {
+    return tableQuery.data()
+  },
+  //...
+  state: {
+    get columnFilters() {
+      return columnFilters() //pass controlled state back to the table (overrides internal state)
+    },
+    get sorting() {
+      return sorting()
+    },
+    get pagination() {
+      return pagination()
+    },
+  },
+  onColumnFiltersChange: setColumnFilters, //hoist columnFilters state into our own state management
+  onSortingChange: setSorting,
+  onPaginationChange: setPagination,
+})
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a solid tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```jsx
+//create a table instance with default state values
+const table = createSolidTable({
+  columns,
+  get data() {
+    return data()
+  },
+  //... Note: `state` values are NOT passed in yet
+})
+
+
+const [state, setState] = createSignal({
+  ...table.initialState, //populate the initial state with all of the default state values from the table instance
+  pagination: {
+    pageIndex: 0,
+    pageSize: 15 //optionally customize the initial pagination state.
+  }
+})
+
+//Use the table.setOptions API to merge our fully controlled state onto the table instance
+table.setOptions(prev => ({
+  ...prev, //preserve any other options that we have set up above
+  get state() {
+    return state() //our fully controlled state overrides the internal state
+  },
+  onStateChange: setState //any state changes will be pushed up to our own state management
+}))
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+const [sorting, setSorting] = createSignal([])
+//...
+const table = createSolidTable({
+  columns,
+  data,
+  //...
+  state: {
+    get sorting() {
+      return sorting() //required because we are using `onSortingChange`
+    },
+  },
+  onSortingChange: setSorting, //makes the `state.sorting` controlled
+})
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React (Solid Setters). The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+```jsx
+const [sorting, setSorting] = createSignal([])
+const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 10 })
+
+const table = createSolidTable({
+  get columns() {
+    return columns()
+  },
+  get data() {
+    return data()
+  },
+  //...
+  state: {
+    get pagination() {
+      return pagination()
+    },
+    get sorting() {
+      return sorting()
+    },
+  }
+  //syntax 1
+  onPaginationChange: (updater) => {
+    setPagination(old => {
+      const newPaginationValue = updater instanceof Function ? updater(old) : updater
+      //do something with the new pagination value
+      //...
+      return newPaginationValue
+    })
+  },
+  //syntax 2
+  onSortingChange: (updater) => {
+    const newSortingValue = updater instanceof Function ? updater(sorting) : updater
+    //do something with the new sorting value
+    //...
+    setSorting(updater) //normal state update
+  }
+})
+```
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { createSolidTable, type SortingState } from '@tanstack/solid-table'
+//...
+const [sorting, setSorting] = createSignal<SortingState[]>([
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+])
+```
\ No newline at end of file
diff --git a/mintlify/table/framework/solid/solid-table.md b/mintlify/table/framework/solid/solid-table.md
new file mode 100644
index 000000000..dc5afc392
--- /dev/null
+++ b/mintlify/table/framework/solid/solid-table.md
@@ -0,0 +1,19 @@
+---
+title: Solid Table
+---
+
+The `@tanstack/solid-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "solid" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## `createSolidTable`
+
+Takes an `options` object and returns a table.
+
+```tsx
+import { createSolidTable } from '@tanstack/solid-table'
+
+function App() {
+  const table = createSolidTable(options)
+
+  // ...render your table
+}
+```
diff --git a/mintlify/table/framework/svelte/examples/basic.md b/mintlify/table/framework/svelte/examples/basic.md
new file mode 100644
index 000000000..47c726f67
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/column-groups.md b/mintlify/table/framework/svelte/examples/column-groups.md
new file mode 100644
index 000000000..adad7687e
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/column-groups.md
@@ -0,0 +1,12 @@
+---
+title: "Column Groups"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/column-groups)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/column-groups)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/column-ordering.md b/mintlify/table/framework/svelte/examples/column-ordering.md
new file mode 100644
index 000000000..29dd1056b
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/column-ordering.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/column-ordering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/column-ordering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/column-pinning.md b/mintlify/table/framework/svelte/examples/column-pinning.md
new file mode 100644
index 000000000..30f5f45d7
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/column-pinning.md
@@ -0,0 +1,12 @@
+---
+title: "Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/column-pinning)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/column-pinning)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/column-visibility.md b/mintlify/table/framework/svelte/examples/column-visibility.md
new file mode 100644
index 000000000..bd6babcda
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/column-visibility.md
@@ -0,0 +1,12 @@
+---
+title: "Column Visibility"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/column-visibility)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/column-visibility)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/filtering.md b/mintlify/table/framework/svelte/examples/filtering.md
new file mode 100644
index 000000000..0ee95d3ca
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/filtering.md
@@ -0,0 +1,12 @@
+---
+title: "Filtering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/filtering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/filtering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/examples/sorting.md b/mintlify/table/framework/svelte/examples/sorting.md
new file mode 100644
index 000000000..0acd2b887
--- /dev/null
+++ b/mintlify/table/framework/svelte/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/svelte/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/svelte/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/svelte/guide/table-state.md b/mintlify/table/framework/svelte/guide/table-state.md
new file mode 100644
index 000000000..db8ff045e
--- /dev/null
+++ b/mintlify/table/framework/svelte/guide/table-state.md
@@ -0,0 +1,260 @@
+---
+title: Table State (Svelte) Guide
+---
+
+## Table State (Svelte) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```jsx
+const options = writable({
+  columns,
+  data,
+  //...
+})
+
+const table = createSvelteTable(options)
+
+console.log(table.getState()) //access the entire internal state
+console.log(table.getState().rowSelection) //access just the row selection state
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+const options = writable({
+  columns,
+  data,
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+})
+
+const table = createSvelteTable(options)
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```ts
+let sorting = [
+  {
+    id: 'age',
+    desc: true, //sort by age in descending order by default
+  },
+]
+const setSorting = updater => {
+  if (updater instanceof Function) {
+    sorting = updater(sorting)
+  } else {
+    sorting = updater
+  }
+  options.update(old => ({
+    ...old,
+    state: {
+      ...old.state,
+      sorting,
+    },
+  }))
+}
+
+let columnFilters = [] //no default filters
+const setColumnFilters = updater => {
+  if (updater instanceof Function) {
+    columnFilters = updater(columnFilters)
+  } else {
+    columnFilters = updater
+  }
+  options.update(old => ({
+    ...old,
+    state: {
+      ...old.state,
+      columnFilters,
+    },
+  }))
+}
+
+let pagination = { pageIndex: 0, pageSize: 15 } //default pagination
+const setPagination = updater => {
+  if (updater instanceof Function) {
+    pagination = updater(pagination)
+  } else {
+    pagination = updater
+  }
+  options.update(old => ({
+    ...old,
+    state: {
+      ...old.state,
+      pagination,
+    },
+  }))
+}
+
+//Use our controlled state values to fetch data
+const tableQuery = createQuery({
+  queryKey: ['users', columnFilters, sorting, pagination],
+  queryFn: () => fetchUsers(columnFilters, sorting, pagination),
+  //...
+})
+
+const options = writable({
+  columns,
+  data: tableQuery.data,
+  //...
+  state: {
+    columnFilters, //pass controlled state back to the table (overrides internal state)
+    sorting,
+    pagination
+  },
+  onColumnFiltersChange: setColumnFilters, //hoist columnFilters state into our own state management
+  onSortingChange: setSorting,
+  onPaginationChange: setPagination,
+})
+
+const table = createSvelteTable(options)
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a svelte tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```jsx
+//create a table instance with default state values
+const options = writable({
+  columns,
+  data,
+  //... Note: `state` values are NOT passed in yet
+})
+const table = createSvelteTable(options)
+
+let state = {
+  ...table.initialState, //populate the initial state with all of the default state values from the table instance
+  pagination: {
+    pageIndex: 0,
+    pageSize: 15 //optionally customize the initial pagination state.
+  }
+}
+const setState = updater => {
+  if (updater instanceof Function) {
+    state = updater(state)
+  } else {
+    state = updater
+  }
+  options.update(old => ({
+    ...old,
+    state,
+  }))
+}
+
+//Use the table.setOptions API to merge our fully controlled state onto the table instance
+table.setOptions(prev => ({
+  ...prev, //preserve any other options that we have set up above
+  state, //our fully controlled state overrides the internal state
+  onStateChange: setState //any state changes will be pushed up to our own state management
+}))
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```ts
+let sorting = []
+const setSorting = updater => {
+  if (updater instanceof Function) {
+    sorting = updater(sorting)
+  } else {
+    sorting = updater
+  }
+  options.update(old => ({
+    ...old,
+    state: {
+      ...old.state,
+      sorting,
+    },
+  }))
+}
+//...
+const options = writable({
+  columns,
+  data,
+  //...
+  state: {
+    sorting, //required because we are using `onSortingChange`
+  },
+  onSortingChange: setSorting, //makes the `state.sorting` controlled
+})
+const table = createSvelteTable(options)
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why you see the `if (updater instanceof Function)` check in the `setState` functions in the examples above.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```ts
+import { createSvelteTable, type SortingState, type Updater } from '@tanstack/svelte-table'
+//...
+let sorting: SortingState[] = [
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+]
+const setSorting = (updater: Updater<SortingState>)  => {
+  if (updater instanceof Function) {
+    sorting = updater(sorting)
+  } else {
+    sorting = updater
+  }
+  options.update(old => ({
+    ...old,
+    state: {
+      ...old.state,
+      sorting,
+    },
+  }))
+}
+```
diff --git a/mintlify/table/framework/svelte/svelte-table.md b/mintlify/table/framework/svelte/svelte-table.md
new file mode 100644
index 000000000..412d46ed2
--- /dev/null
+++ b/mintlify/table/framework/svelte/svelte-table.md
@@ -0,0 +1,19 @@
+---
+title: Svelte Table
+---
+
+The `@tanstack/svelte-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "svelte" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## `createSvelteTable`
+
+Takes an `options` object and returns a table.
+
+```svelte
+<script>
+
+import { createSvelteTable } from '@tanstack/svelte-table'
+
+const table = createSvelteTable(options)
+
+</script>
+```
diff --git a/mintlify/table/framework/vanilla/examples/basic.md b/mintlify/table/framework/vanilla/examples/basic.md
new file mode 100644
index 000000000..7eb51ca94
--- /dev/null
+++ b/mintlify/table/framework/vanilla/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vanilla/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vanilla/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vanilla/examples/pagination.md b/mintlify/table/framework/vanilla/examples/pagination.md
new file mode 100644
index 000000000..64f33b44d
--- /dev/null
+++ b/mintlify/table/framework/vanilla/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vanilla/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vanilla/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vanilla/examples/sorting.md b/mintlify/table/framework/vanilla/examples/sorting.md
new file mode 100644
index 000000000..7d2492089
--- /dev/null
+++ b/mintlify/table/framework/vanilla/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vanilla/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vanilla/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vanilla/guide/table-state.md b/mintlify/table/framework/vanilla/guide/table-state.md
new file mode 100644
index 000000000..d43bd1d74
--- /dev/null
+++ b/mintlify/table/framework/vanilla/guide/table-state.md
@@ -0,0 +1,5 @@
+---
+title: Table State (Vanilla JS) Guide
+---
+
+## Table State (Vanilla JS) Guide
diff --git a/mintlify/table/framework/vanilla/table-core.md b/mintlify/table/framework/vanilla/table-core.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/mintlify/table/framework/vue/examples/basic.md b/mintlify/table/framework/vue/examples/basic.md
new file mode 100644
index 000000000..bf362d638
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/basic.md
@@ -0,0 +1,12 @@
+---
+title: "Basic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/basic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/basic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/column-ordering.md b/mintlify/table/framework/vue/examples/column-ordering.md
new file mode 100644
index 000000000..1fbf6468c
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/column-ordering.md
@@ -0,0 +1,12 @@
+---
+title: "Column Ordering"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/column-ordering)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/column-ordering)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/column-pinning.md b/mintlify/table/framework/vue/examples/column-pinning.md
new file mode 100644
index 000000000..c7f5a4d78
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/column-pinning.md
@@ -0,0 +1,12 @@
+---
+title: "Column Pinning"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/column-pinning)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/column-pinning)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/filters.md b/mintlify/table/framework/vue/examples/filters.md
new file mode 100644
index 000000000..d47a624c7
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/filters.md
@@ -0,0 +1,12 @@
+---
+title: "Column Filters"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/filters)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/filters)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/grouping.md b/mintlify/table/framework/vue/examples/grouping.md
new file mode 100644
index 000000000..cd6adc756
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/grouping.md
@@ -0,0 +1,12 @@
+---
+title: "Grouping"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/grouping)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/grouping)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/pagination.md b/mintlify/table/framework/vue/examples/pagination.md
new file mode 100644
index 000000000..5c738df68
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/pagination.md
@@ -0,0 +1,12 @@
+---
+title: "Pagination"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/pagination)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/pagination)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/row-selection.md b/mintlify/table/framework/vue/examples/row-selection.md
new file mode 100644
index 000000000..f91bdcddd
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/row-selection.md
@@ -0,0 +1,12 @@
+---
+title: "Row Selection"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/row-selection)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/row-selection)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/sorting.md b/mintlify/table/framework/vue/examples/sorting.md
new file mode 100644
index 000000000..d28303c32
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/sorting.md
@@ -0,0 +1,12 @@
+---
+title: "Sorting"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/sorting)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/sorting)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/sub-components.md b/mintlify/table/framework/vue/examples/sub-components.md
new file mode 100644
index 000000000..dfc7477cc
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/sub-components.md
@@ -0,0 +1,12 @@
+---
+title: "Sub Components"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/sub-components)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/sub-components)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/examples/virtualized-rows.md b/mintlify/table/framework/vue/examples/virtualized-rows.md
new file mode 100644
index 000000000..0256ca885
--- /dev/null
+++ b/mintlify/table/framework/vue/examples/virtualized-rows.md
@@ -0,0 +1,12 @@
+---
+title: "Virtualized Rows"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/table/latest/docs/framework/vue/examples/virtualized-rows)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/table/tree/d08af367e11c539bb7e18c2472aa761149ef6db6/examples/vue/virtualized-rows)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/table/framework/vue/guide/table-state.md b/mintlify/table/framework/vue/guide/table-state.md
new file mode 100644
index 000000000..aab44cd4f
--- /dev/null
+++ b/mintlify/table/framework/vue/guide/table-state.md
@@ -0,0 +1,248 @@
+---
+title: Table State (Vue) Guide
+---
+
+## Table State (Vue) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```ts
+const table = useVueTable({
+  columns,
+  data: dataRef, // Reactive data support
+  //...
+})
+
+console.log(table.getState()) //access the entire internal state
+console.log(table.getState().rowSelection) //access just the row selection state
+```
+
+### Using Reactive Data
+
+> **New in v8.20.0**
+
+The `useVueTable` hook now supports reactive data. This means you can pass a Vue `ref` or `computed` containing your data to the `data`-option. The table will automatically react to changes in the data.
+
+```ts
+const columns = [
+  { accessor: 'id', Header: 'ID' },
+  { accessor: 'name', Header: 'Name' }
+]
+
+const dataRef = ref([
+  { id: 1, name: 'John' },
+  { id: 2, name: 'Jane' }
+])
+
+const table = useVueTable({
+  columns,
+  data: dataRef, // Pass the reactive data ref
+})
+
+// Later, updating dataRef will automatically update the table
+dataRef.value = [
+  { id: 1, name: 'John' },
+  { id: 2, name: 'Jane' },
+  { id: 3, name: 'Doe' }
+]
+```
+
+> ⚠️ `shallowRef` is used under the hood for performance reasons, meaning that the data is not deeply reactive, only the `.value` is. To update the data you have to mutate the data directly.
+
+```ts
+const dataRef = ref([
+  { id: 1, name: 'John' },
+  { id: 2, name: 'Jane' }
+])
+
+// This will NOT update the table ❌
+dataRef.value.push({ id: 4, name: 'John' })
+
+// This will update the table ✅
+dataRef.value = [
+  ...dataRef.value,
+  { id: 4, name: 'John' }
+]
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```jsx
+const table = useVueTable({
+  columns,
+  data,
+  initialState: {
+    columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+    columnVisibility: {
+      id: false //hide the id column by default
+    },
+    expanded: true, //expand all rows by default
+    sorting: [
+      {
+        id: 'age',
+        desc: true //sort by age in descending order by default
+      }
+    ]
+  },
+  //...
+})
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```ts
+const columnFilters = ref([]) //no default filters
+const sorting = ref([{
+  id: 'age',
+  desc: true, //sort by age in descending order by default
+}])
+const pagination = ref({ pageIndex: 0, pageSize: 15 }
+
+//Use our controlled state values to fetch data
+const tableQuery = useQuery({
+  queryKey: ['users', columnFilters, sorting, pagination],
+  queryFn: () => fetchUsers(columnFilters, sorting, pagination),
+  //...
+})
+
+const table = useVueTable({
+  columns,
+  data: tableQuery.data,
+  //...
+  state: {
+    get columnFilters() {
+      return columnFilters.value
+    },
+    get sorting() {
+      return sorting.value
+    },
+    get pagination() {
+      return pagination.value
+    }
+  },
+  onColumnFiltersChange: updater => {
+    columnFilters.value =
+      updater instanceof Function
+        ? updater(columnFilters.value)
+        : updater
+  },
+  onSortingChange: updater => {
+    sorting.value =
+      updater instanceof Function
+        ? updater(sorting.value)
+        : updater
+  },
+  onPaginationChange: updater => {
+    pagination.value =
+      updater instanceof Function
+        ? updater(pagination.value)
+        : updater
+  },
+})
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a react tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```jsx
+//create a table instance with default state values
+const table = useVueTable({
+  get columns() {
+    return columns.value
+  },
+  data,
+  //... Note: `state` values are NOT passed in yet
+})
+
+const state = ref({
+  ...table.initialState,
+  pagination: {
+    pageIndex: 0,
+    pageSize: 15
+  }
+})
+const setState = updater => {
+  state.value = updater instanceof Function ? updater(state.value) : updater
+}
+
+//Use the table.setOptions API to merge our fully controlled state onto the table instance
+table.setOptions(prev => ({
+  ...prev, //preserve any other options that we have set up above
+  get state() {
+    return state.value
+  },
+  onStateChange: setState //any state changes will be pushed up to our own state management
+}))
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+const sorting = ref([])
+const setSorting = updater => {
+  sorting.value = updater instanceof Function ? updater(sorting.value) : updater
+}
+//...
+const table = useVueTable({
+  columns,
+  data,
+  //...
+  state: {
+    get sorting() {
+      return sorting //required because we are using `onSortingChange`
+    },
+  },
+  onSortingChange: setSorting, //makes the `state.sorting` controlled
+})
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why we have the `updater instanceof Function` check in the `setState` functions above. This check allows us to handle both raw values and callback functions in the same function.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { useVueTable, type SortingState } from '@tanstack/vue-table'
+//...
+const sorting = ref<SortingState[]>([
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+])
+```
diff --git a/mintlify/table/framework/vue/vue-table.md b/mintlify/table/framework/vue/vue-table.md
new file mode 100644
index 000000000..dc1d3d2a9
--- /dev/null
+++ b/mintlify/table/framework/vue/vue-table.md
@@ -0,0 +1,44 @@
+---
+title: Vue Table
+---
+
+The `@tanstack/vue-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "vue" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## Exports
+
+`@tanstack/vue-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
+
+### `useVueTable`
+
+Takes an `options` object and returns a table.
+
+```ts
+import { useVueTable } from '@tanstack/vue-table'
+
+const table = useVueTable(options)
+// ...render your table
+
+```
+
+### `FlexRender`
+
+A Vue component for rendering cell/header/footer templates with dynamic values.
+
+Example:
+
+```vue
+import { FlexRender } from '@tanstack/vue-table'
+
+<template>
+  <tbody>
+    <tr v-for="row in table.getRowModel().rows" :key="row.id">
+      <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+        <FlexRender
+          :render="cell.column.columnDef.cell"
+          :props="cell.getContext()"
+        />
+      </td>
+    </tr>
+  </tbody>
+</template>
+```
diff --git a/mintlify/table/guide/cells.md b/mintlify/table/guide/cells.md
new file mode 100644
index 000000000..fa40708ab
--- /dev/null
+++ b/mintlify/table/guide/cells.md
@@ -0,0 +1,85 @@
+---
+title: Cells Guide
+---
+
+## API
+
+[Cell API](/table/api/core/cell)
+
+## Cells Guide
+
+This quick guide will discuss the different ways you can retrieve and interact with `cell` objects in TanStack Table.
+
+### Where to Get Cells From
+
+Cells come from [Rows](/table/guide/rows). Enough said, right?
+
+There are multiple `row` instance APIs you can use to retrieve the appropriate cells from a row depending on which features you are using. Most commonly, you will use the `row.getAllCells` or `row.getVisibleCells` APIs (if you are using column visibility features), but there are a handful of other similar APIs that you can use.
+
+### Cell Objects
+
+Every cell object can be associated with a `<td>` or similar cell element in your UI. There are a few properties and methods on `cell` objects that you can use to interact with the table state and extract cell values from the table based on the state of the table.
+
+#### Cell IDs
+
+Every cell object has an `id` property that makes it unique within the table instance. Each `cell.id` is constructed simply as a union of its parent row and column IDs separated by an underscore.
+
+```js
+{ id: `${row.id}_${column.id}` }
+```
+
+During grouping or aggregation features, the `cell.id` will have additional string appended to it.
+
+#### Cell Parent Objects
+
+Every cell stores a reference to its parent [row](/table/guide/rows) and [column](/table/guide/columns) objects.
+
+#### Access Cell Values
+
+The recommended way to access data values from a cell is to use either the `cell.getValue` or `cell.renderValue` APIs. Using either of these APIs will cache the results of the accessor functions and keep rendering efficient. The only difference between the two is that `cell.renderValue` will return either the value or the `renderFallbackValue` if the value is undefined, whereas `cell.getValue` will return the value or `undefined` if the value is undefined.
+
+> Note: The `cell.getValue` and `cell.renderValue` APIs are shortcuts `row.getValue` and `row.renderValue` APIs, respectively.
+
+```js
+// Access data from any of the columns
+const firstName = cell.getValue('firstName') // read the cell value from the firstName column
+const renderedLastName = cell.renderValue('lastName') // render the value from the lastName column
+```
+
+#### Access Other Row Data from Any Cell
+
+Since every cell object is associated with its parent row, you can access any data from the original row that you are using in your table using `cell.row.original`.
+
+```js
+// Even if we are in the scope of a different cell, we can still access the original row data
+const firstName = cell.row.original.firstName // { firstName: 'John', lastName: 'Doe' }
+```
+
+### More Cell APIs
+
+Depending on the features that you are using for your table, there are dozens more useful APIs for interacting with cells. See each features' respective API docs or guide for more information.
+
+### Cell Rendering
+
+You can just use the `cell.renderValue` or `cell.getValue` APIs to render the cells of your table. However, these APIs will only spit out the raw cell values (from accessor functions). If you are using the `cell: () => JSX` column definition options, you will want to use the `flexRender` API utility from your adapter.
+
+Using the `flexRender` API will allow the cell to be rendered correctly with any extra markup or JSX and it will call the callback function with the correct parameters.
+
+```jsx
+import { flexRender } from '@tanstack/react-table'
+
+const columns = [
+  {
+    accessorKey: 'fullName',
+    cell: ({ cell, row }) => {
+      return <div><strong>{row.original.firstName}</strong> {row.original.lastName}</div>
+    }
+    //...
+  }
+]
+//...
+<tr>
+  {row.getVisibleCells().map(cell => {
+    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+  })}
+</tr>
diff --git a/mintlify/table/guide/column-defs.md b/mintlify/table/guide/column-defs.md
new file mode 100644
index 000000000..33d385643
--- /dev/null
+++ b/mintlify/table/guide/column-defs.md
@@ -0,0 +1,249 @@
+---
+title: Columns Guide
+---
+
+## API
+
+[Table API](/table/api/core/table)
+
+## Column Definitions Guide
+
+Column defs are the single most important part of building a table. They are responsible for:
+
+- Building the underlying data model that will be used for everything including sorting, filtering, grouping, etc.
+- Formatting the data model into what will be displayed in the table
+- Creating [header groups](/table/api/core/header-group), [headers](/table/api/core/header) and [footers](/table/api/core/column-def#footer)
+- Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.
+
+## Column Def Types
+
+The following "types" of column defs aren't actually TypeScript types, but more so a way to talk about and describe overall categories of column defs:
+
+- `Accessor Columns`
+  - Accessor columns have an underlying data model which means they can be sorted, filtered, grouped, etc.
+- `Display Columns`
+  - Display columns do **not** have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, eg. a row actions button, checkbox, expander, etc.
+- `Grouping Columns`
+  - Group columns do **not** have a data model so they too cannot be sorted, filtered, etc, and are used to group other columns together. It's common to define a header or footer for a column group.
+
+## Column Helpers
+
+While column defs are just plain objects at the end of the day, a `createColumnHelper` function is exposed from the table core which, when called with a row type, returns a utility for creating different column definition types with the highest type-safety possible.
+
+Here's an example of creating and using a column helper:
+
+```tsx
+// Define your row shape
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+// Make some columns!
+const defaultColumns = [
+  // Display Column
+  columnHelper.display({
+    id: 'actions',
+    cell: props => <RowActions row={props.row} />,
+  }),
+  // Grouping Column
+  columnHelper.group({
+    header: 'Name',
+    footer: props => props.column.id,
+    columns: [
+      // Accessor Column
+      columnHelper.accessor('firstName', {
+        cell: info => info.getValue(),
+        footer: props => props.column.id,
+      }),
+      // Accessor Column
+      columnHelper.accessor(row => row.lastName, {
+        id: 'lastName',
+        cell: info => info.getValue(),
+        header: () => <span>Last Name</span>,
+        footer: props => props.column.id,
+      }),
+    ],
+  }),
+  // Grouping Column
+  columnHelper.group({
+    header: 'Info',
+    footer: props => props.column.id,
+    columns: [
+      // Accessor Column
+      columnHelper.accessor('age', {
+        header: () => 'Age',
+        footer: props => props.column.id,
+      }),
+      // Grouping Column
+      columnHelper.group({
+        header: 'More Info',
+        columns: [
+          // Accessor Column
+          columnHelper.accessor('visits', {
+            header: () => <span>Visits</span>,
+            footer: props => props.column.id,
+          }),
+          // Accessor Column
+          columnHelper.accessor('status', {
+            header: 'Status',
+            footer: props => props.column.id,
+          }),
+          // Accessor Column
+          columnHelper.accessor('progress', {
+            header: 'Profile Progress',
+            footer: props => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+]
+```
+
+## Creating Accessor Columns
+
+Data columns are unique in that they must be configured to extract primitive values for each item in your `data` array.
+
+There are 3 ways to do this:
+
+- If your items are `objects`, use an object-key that corresponds to the value you want to extract.
+- If your items are nested `arrays`, use an array index that corresponds to the value you want to extract.
+- Use an accessor function that returns the value you want to extract.
+
+## Object Keys
+
+If each of your items is an object with the following shape:
+
+```tsx
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+```
+
+You could extract the `firstName` value like so:
+
+```tsx
+
+columnHelper.accessor('firstName')
+
+// OR
+
+{
+  accessorKey: 'firstName',
+}
+```
+
+## Array Indices
+
+If each of your items is an array with the following shape:
+
+```tsx
+type Sales = [Date, number]
+```
+
+You could extract the `number` value like so:
+
+```tsx
+columnHelper.accessor(1)
+
+// OR
+
+{
+  accessorKey: 1,
+}
+```
+
+## Accessor Functions
+
+If each of your items is an object with the following shape:
+
+```tsx
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+```
+
+You could extract a computed full-name value like so:
+
+```tsx
+columnHelper.accessor(row => `${row.firstName} ${row.lastName}`, {
+  id: 'fullName',
+})
+
+// OR
+
+{
+  id: 'fullName',
+  accessorFn: row => `${row.firstName} ${row.lastName}`,
+}
+```
+
+> 🧠 Remember, the accessed value is what is used to sort, filter, etc. so you'll want to make sure your accessor function returns a primitive value that can be manipulated in a meaningful way. If you return a non-primitive value like an object or array, you will need the appropriate filter/sort/grouping functions to manipulate them, or even supply your own! 😬
+
+## Unique Column IDs
+
+Columns are uniquely identified with 3 strategies:
+
+- If defining an accessor column with an object key or array index, the same will be used to uniquely identify the column.
+  - Any periods (`.`) in an object key will be replaced by underscores (`_`).
+- If defining an accessor column with an accessor function
+  - The columns `id` property will be used to uniquely identify the column OR
+  - If a primitive `string` header is supplied, that header string will be used to uniquely identify the column
+
+> 🧠 An easy way to remember: If you define a column with an accessor function, either provide a string header or provide a unique `id` property.
+
+## Column Formatting & Rendering
+
+By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. Each implementation is provided relevant information about the cell, header or footer and returns something your framework adapter can render eg. JSX/Components/strings/etc. This will depend on which adapter you are using.
+
+There are a couple of formatters available to you:
+
+- `cell`: Used for formatting cells.
+- `aggregatedCell`: Used for formatting cells when aggregated.
+- `header`: Used for formatting headers.
+- `footer`: Used for formatting footers.
+
+## Cell Formatting
+
+You can provide a custom cell formatter by passing a function to the `cell` property and using the `props.getValue()` function to access your cell's value:
+
+```tsx
+columnHelper.accessor('firstName', {
+  cell: props => <span>{props.getValue().toUpperCase()}</span>,
+})
+```
+
+Cell formatters are also provided the `row` and `table` objects, allowing you to customize the cell formatting beyond just the cell value. The example below provides `firstName` as the accessor, but also displays a prefixed user ID located on the original row object:
+
+```tsx
+columnHelper.accessor('firstName', {
+  cell: props => (
+    <span>{`${props.row.original.id} - ${props.getValue()}`}</span>
+  ),
+})
+```
+
+## Aggregated Cell Formatting
+
+For more info on aggregated cells, see [grouping](/table/guide/grouping).
+
+## Header & Footer Formatting
+
+Headers and footers do not have access to row data, but still use the same concepts for displaying custom content.
diff --git a/mintlify/table/guide/column-faceting.md b/mintlify/table/guide/column-faceting.md
new file mode 100644
index 000000000..0d1261460
--- /dev/null
+++ b/mintlify/table/guide/column-faceting.md
@@ -0,0 +1,89 @@
+---
+title: Column Faceting Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [filters-faceted](/table/framework/react/examples/filters-faceted)
+
+## API
+
+[Column Faceting API](/table/api/features/column-faceting)
+
+## Column Faceting Guide
+
+Column Faceting is a feature that allows you to generate lists of values for a given column from that column's data. For example, a list of unique values in a column can be generated from all rows in that column to be used as search suggestions in an autocomplete filter component. Or, a tuple of minimum and maximum values can be generated from a column of numbers to be used as a range for a range slider filter component.
+
+### Column Faceting Row Models
+
+In order to use any of the column faceting features, you must include the appropriate row models in your table options.
+
+```ts
+//only import the row models you need
+import {
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedMinMaxValues, //depends on getFacetedRowModel
+  getFacetedUniqueValues, //depends on getFacetedRowModel
+}
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFacetedRowModel: getFacetedRowModel(), //if you need a list of values for a column (other faceted row models depend on this one)
+  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
+  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
+  //...
+})
+```
+
+First, you must include the `getFacetedRowModel` row model. This row model will generate a list of values for a given column. If you need a list of unique values, include the `getFacetedUniqueValues` row model. If you need a tuple of minimum and maximum values, include the `getFacetedMinMaxValues` row model.
+
+### Use Faceted Row Models
+
+Once you have included the appropriate row models in your table options, you will be able to use the faceting column instance APIs to access the lists of values generated by the faceted row models.
+
+```ts
+// list of unique values for autocomplete filter
+const autoCompleteSuggestions = 
+ Array.from(column.getFacetedUniqueValues().keys())
+  .sort()
+  .slice(0, 5000);
+```
+
+```ts
+// tuple of min and max values for range filter
+const [min, max] = column.getFacetedMinMaxValues() ?? [0, 1];
+```
+
+### Custom (Server-Side) Faceting
+
+If instead of using the built-in client-side faceting features, you can implement your own faceting logic on the server-side and pass the faceted values to the client-side. You can use the `getFacetedUniqueValues` and `getFacetedMinMaxValues` table options to resolve the faceted values from the server-side.
+
+```ts
+const facetingQuery = useQuery(
+  //...
+)
+
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFacetedRowModel: getFacetedRowModel(),
+  getFacetedUniqueValues: (table, columnId) => {
+    const uniqueValueMap = new Map<string, number>();
+    //...
+    return uniqueValueMap;
+  },
+  getFacetedMinMaxValues: (table, columnId) => {
+    //...
+    return [min, max];
+  },
+  //...
+})
+```
+
+Alternatively, you don't have to put any of your faceting logic through the TanStack Table APIs at all. Just fetch your lists and pass them to your filter components directly.
diff --git a/mintlify/table/guide/column-filtering.md b/mintlify/table/guide/column-filtering.md
new file mode 100644
index 000000000..ba95b9d67
--- /dev/null
+++ b/mintlify/table/guide/column-filtering.md
@@ -0,0 +1,335 @@
+---
+title: Column Filtering Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [filters](/table/framework/react/examples/filters) (includes faceting)
+- [editable-data](/table/framework/react/examples/editable-data)
+- [expanding](/table/framework/react/examples/expanding)
+- [grouping](/table/framework/react/examples/grouping)
+- [pagination](/table/framework/react/examples/pagination)
+- [row-selection](/table/framework/react/examples/row-selection)
+
+## API
+
+[Column Filtering API](/table/api/features/column-filtering)
+
+## Column Filtering Guide
+
+Filtering comes in 2 flavors: Column Filtering and Global Filtering.
+
+This guide will focus on column filtering, which is a filter that is applied to a single column's accessor value.
+
+TanStack table supports both both client-side and manual server-side filtering. This guide will go over how to implement and customize both, and help you decide which one is best for your use-case.
+
+### Client-Side vs Server-Side Filtering
+
+If you have a large dataset, you may not want to load all of that data into the client's browser in order to filter it. In this case, you will most likely want to implement server-side filtering, sorting, pagination, etc. 
+
+However, as also discussed in the [Pagination Guide](/table/guide/pagination#should-you-use-client-side-pagination), a lot of developers underestimate how many rows can be loaded client-side without a performance hit. The TanStack table examples are often tested to handle up to 100,000 rows or more with decent performance for client-side filtering, sorting, pagination, and grouping. This doesn't necessarily that your app will be able to handle that many rows, but if your table is only going to have a few thousand rows at most, you might be able to take advantage of the client-side filtering, sorting, pagination, and grouping that TanStack table provides.
+
+> TanStack Table can handle thousands of client-side rows with good performance. Don't rule out client-side filtering, pagination, sorting, etc. without some thought first.
+
+Every use-case is different and will depend on the complexity of the table, how many columns you have, how large every piece of data is, etc. The main bottlenecks to pay attention to are:
+
+1. Can your server query all of the data in a reasonable amount of time (and cost)?
+2. What is the total size of the fetch? (This might not scale as badly as you think if you don't have many columns.)
+3. Is the client's browser using too much memory if all of the data is loaded at once?
+
+If you're not sure, you can always start with client-side filtering and pagination and then switch to server-side strategies in the future as your data grows.
+
+### Manual Server-Side Filtering
+
+If you have decided that you need to implement server-side filtering instead of using the built-in client-side filtering, here's how you do that.
+
+No `getFilteredRowModel` table option is needed for manual server-side filtering. Instead, the `data` that you pass to the table should already be filtered. However, if you have passed a `getFilteredRowModel` table option, you can tell the table to skip it by setting the `manualFiltering` option to `true`.
+
+```jsx
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  // getFilteredRowModel: getFilteredRowModel(), // not needed for manual server-side filtering
+  manualFiltering: true,
+})
+```
+
+> **Note:** When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When is `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is.
+
+### Client-Side Filtering
+
+If you are using the built-in client-side filtering features, first you need to pass in a `getFilteredRowModel` function to the table options. This function will be called whenever the table needs to filter the data. You can either import the default `getFilteredRowModel` function from TanStack Table or create your own.
+
+```jsx
+import { useReactTable, getFilteredRowModel } from '@tanstack/react-table'
+//...
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(), // needed for client-side filtering
+})
+```
+
+### Column Filter State
+
+Whether or not you use client-side or server-side filtering, you can take advantage of the built-in column filter state management that TanStack Table provides. There are many table and column APIs to mutate and interact with the filter state and retrieving the column filter state.
+
+The column filtering state is defined as an array of objects with the following shape:
+
+```ts
+interface ColumnFilter {
+  id: string
+  value: unknown
+}
+type ColumnFiltersState = ColumnFilter[]
+```
+
+Since the column filter state is an array of objects, you can have multiple column filters applied at once.
+
+#### Accessing Column Filter State
+
+You can access the column filter state from the table instance just like any other table state using the `table.getState()` API.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  //...
+})
+
+console.log(table.getState().columnFilters) // access the column filters state from the table instance
+```
+
+However, if you need to access the column filter state before the table is initialized, you can "control" the column filter state like down below.
+
+### Controlled Column Filter State
+
+If you need easy access to the column filter state, you can control/manage the column filter state in your own state management with the `state.columnFilters` and `onColumnFiltersChange` table options.
+
+```tsx
+const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) // can set initial column filter state here
+//...
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  state: {
+    columnFilters,
+  },
+  onColumnFiltersChange: setColumnFilters,
+})
+```
+
+#### Initial Column Filter State
+
+If you do not need to control the column filter state in your own state management or scope, but you still want to set an initial column filter state, you can use the `initialState` table option instead of `state`.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  initialState: {
+    columnFilters: [
+      {
+        id: 'name',
+        value: 'John', // filter the name column by 'John' by default
+      },
+    ],
+  },
+})
+```
+
+> **NOTE**: Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the initialized state in the `state.columnFilters` will override the `initialState.columnFilters`.
+
+### FilterFns
+
+Each column can have its own unique filtering logic. Choose from any of the filter functions that are provided by TanStack Table, or create your own.
+
+By default there are 10 built-in filter functions to choose from:
+
+- `includesString` - Case-insensitive string inclusion
+- `includesStringSensitive` - Case-sensitive string inclusion
+- `equalsString` - Case-insensitive string equality
+- `equalsStringSensitive` - Case-sensitive string equality
+- `arrIncludes` - Item inclusion within an array
+- `arrIncludesAll` - All items included in an array
+- `arrIncludesSome` - Some items included in an array
+- `equals` - Object/referential equality `Object.is`/`===`
+- `weakEquals` - Weak object/referential equality `==`
+- `inNumberRange` - Number range inclusion
+
+You can also define your own custom filter functions either as the `filterFn` column option, or as a global filter function using the `filterFns` table option.
+
+#### Custom Filter Functions
+
+> **Note:** These filter functions only run during client-side filtering.
+
+When defining a custom filter function in either the `filterFn` column option or the `filterFns` table option, it should have the following signature:
+
+```ts
+const myCustomFilterFn: FilterFn = (row: Row, columnId: string, filterValue: any, addMeta: (meta: any) => void) => boolean
+```
+
+Every filter function receives:
+
+- The row to filter
+- The columnId to use to retrieve the row's value
+- The filter value
+
+and should return `true` if the row should be included in the filtered rows, and `false` if it should be removed.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Name',
+    accessorKey: 'name',
+    filterFn: 'includesString', // use built-in filter function
+  },
+  {
+    header: () => 'Age',
+    accessorKey: 'age',
+    filterFn: 'inNumberRange',
+  },
+  {
+    header: () => 'Birthday',
+    accessorKey: 'birthday',
+    filterFn: 'myCustomFilterFn', // use custom global filter function
+  },
+  {
+    header: () => 'Profile',
+    accessorKey: 'profile',
+    // use custom filter function directly
+    filterFn: (row, columnId, filterValue) => {
+      return // true or false based on your custom logic
+    },
+  }
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  filterFns: { //add a custom sorting function
+    myCustomFilterFn: (row, columnId, filterValue) => { //defined inline here
+      return // true or false based on your custom logic
+    },
+    startsWith: startsWithFilterFn, // defined elsewhere
+  },
+})
+```
+
+##### Customize Filter Function Behavior
+
+You can attach a few other properties to filter functions to customize their behavior:
+
+- `filterFn.resolveFilterValue` - This optional "hanging" method on any given `filterFn` allows the filter function to transform/sanitize/format the filter value before it is passed to the filter function.
+
+- `filterFn.autoRemove` - This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.
+
+```tsx
+const startsWithFilterFn = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: number | string, //resolveFilterValue will transform this to a string
+) =>
+  row
+    .getValue<number | string>(columnId)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue); // toString, toLowerCase, and trim the filter value in `resolveFilterValue`
+
+// remove the filter value from filter state if it is falsy (empty string in this case)
+startsWithFilterFn.autoRemove = (val: any) => !val; 
+
+// transform/sanitize/format the filter value before it is passed to the filter function
+startsWithFilterFn.resolveFilterValue = (val: any) => val.toString().toLowerCase().trim(); 
+```
+
+### Customize Column Filtering
+
+There are a lot of table and column options that you can use to further customize the column filtering behavior.
+
+#### Disable Column Filtering
+
+By default, column filtering is enabled for all columns. You can disable the column filtering for all columns or for specific columns by using the `enableColumnFilters` table option or the `enableColumnFilter` column option. You can also turn off both column and global filtering by setting the `enableFilters` table option to `false`.
+
+Disabling column filtering for a column will cause the `column.getCanFilter` API to return `false` for that column.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Id',
+    accessorKey: 'id',
+    enableColumnFilter: false, // disable column filtering for this column
+  },
+  //...
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  enableColumnFilters: false, // disable column filtering for all columns
+})
+```
+
+#### Filtering Sub-Rows (Expanding)
+
+There are a few additional table options to customize the behavior of column filtering when using features like expanding, grouping, and aggregation.
+
+##### Filter From Leaf Rows
+
+By default, filtering is done from parent rows down, so if a parent row is filtered out, all of its child sub-rows will be filtered out as well. Depending on your use-case, this may be the desired behavior if you only want the user to be searching through the top-level rows, and not the sub-rows. This is also the most performant option.
+
+However, if you want to allow sub-rows to be filtered and searched through, regardless of whether the parent row is filtered out, you can set the `filterFromLeafRows` table option to `true`. Setting this option to `true` will cause filtering to be done from leaf rows up, which means parent rows will be included so long as one of their child or grand-child rows is also included.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  filterFromLeafRows: true, // filter and search through sub-rows
+})
+```
+
+##### Max Leaf Row Filter Depth
+
+By default, filtering is done for all rows in a tree, no matter if they are root level parent rows or the child leaf rows of a parent row. Setting the `maxLeafRowFilterDepth` table option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+
+Use `maxLeafRowFilterDepth: 0` if you want to preserve a parent row's sub-rows from being filtered out while the parent row is passing the filter.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  maxLeafRowFilterDepth: 0, // only filter root level parent rows out
+})
+```
+
+### Column Filter APIs
+
+There are a lot of Column and Table APIs that you can use to interact with the column filter state and hook up to your UI components. Here is a list of the available APIs and their most common use-cases:
+
+- `table.setColumnFilters` - Overwrite the entire column filter state with a new state
+- `table.resetColumnFilters` - Useful for a "clear all/reset filters" button
+
+- **`column.getFilterValue`** - Useful for getting the default initial filter value for an input, or even directly providing the filter value to a filter input
+- **`column.setFilterValue`** - Useful for connecting filter inputs to their `onChange` or `onBlur` handlers
+
+- `column.getCanFilter` - Useful for disabling/enabling filter inputs
+- `column.getIsFiltered` - Useful for displaying a visual indicator that a column is currently being filtered
+- `column.getFilterIndex` - Useful for displaying in what order the current filter is being applied
+
+- `column.getAutoFilterFn` - 
+- `column.getFilterFn` - Useful for displaying which filter mode or function is currently being used
\ No newline at end of file
diff --git a/mintlify/table/guide/column-ordering.md b/mintlify/table/guide/column-ordering.md
new file mode 100644
index 000000000..6d2a4c60b
--- /dev/null
+++ b/mintlify/table/guide/column-ordering.md
@@ -0,0 +1,111 @@
+---
+title: Column Ordering Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [column-ordering](/table/framework/react/examples/column-ordering)
+- [column-dnd](/table/framework/react/examples/column-dnd)
+
+## API
+
+[Column Ordering API](/table/api/features/column-ordering)
+
+## Column Ordering Guide
+
+By default, columns are ordered in the order they are defined in the `columns` array. However, you can manually specify the column order using the `columnOrder` state. Other features like column pinning and grouping can also affect the column order.
+
+### What Affects Column Order
+
+There are 3 table features that can reorder columns, which happen in the following order:
+
+1. [Column Pinning](/table/guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
+2. Manual **Column Ordering** - A manually specified column order is applied.
+3. [Grouping](/table/guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.
+
+> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning.
+
+### Column Order State
+
+If you don't provide a `columnOrder` state, TanStack Table will just use the order of the columns in the `columns` array. However, you can provide an array of string column ids to the `columnOrder` state to specify the order of the columns.
+
+#### Default Column Order
+
+If all you need to do is specify the initial column order, you can just specify the `columnOrder` state in the `initialState` table option.
+
+```jsx
+const table = useReactTable({
+  //...
+  initialState: {
+    columnOrder: ['columnId1', 'columnId2', 'columnId3'],
+  }
+  //...
+});
+```
+
+> **Note:** If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both.
+
+#### Managing Column Order State
+
+If you need to dynamically change the column order, or set the column order after the table has been initialized, you can manage the `columnOrder` state just like any other table state.
+
+```jsx
+const [columnOrder, setColumnOrder] = useState<string[]>(['columnId1', 'columnId2', 'columnId3']); //optionally initialize the column order
+//...
+const table = useReactTable({
+  //...
+  state: {
+    columnOrder,
+    //...
+  }
+  onColumnOrderChange: setColumnOrder,
+  //...
+});
+```
+
+### Reordering Columns
+
+If the table has UI that allows the user to reorder columns, you can set up the logic something like this:
+
+```tsx
+const [columnOrder, setColumnOrder] = useState<string[]>(columns.map(c => c.id));
+
+//depending on your dnd solution of choice, you may or may not need state like this
+const [movingColumnId, setMovingColumnId] = useState<string | null>(null);
+const [targetColumnId, setTargetColumnId] = useState<string | null>(null);
+
+//util function to splice and reorder the columnOrder array
+const reorderColumn = <TData extends RowData>(
+  movingColumnId: Column<TData>,
+  targetColumnId: Column<TData>,
+): string[] => {
+  const newColumnOrder = [...columnOrder];
+  newColumnOrder.splice(
+    newColumnOrder.indexOf(targetColumnId),
+    0,
+    newColumnOrder.splice(newColumnOrder.indexOf(movingColumnId), 1)[0],
+  );
+  setColumnOrder(newColumnOrder);
+};
+
+const handleDragEnd = (e: DragEvent) => {
+  if(!movingColumnId || !targetColumnId) return;
+  setColumnOrder(reorderColumn(movingColumnId, targetColumnId));
+};
+
+//use your dnd solution of choice
+```
+
+#### Drag and Drop Column Reordering Suggestions (React)
+
+There are undoubtedly many ways to implement drag and drop features along-side TanStack Table. Here are a few suggestions in order for you to not have a bad time:
+
+1. Do NOT try to use [`"react-dnd"`](https://react-dnd.github.io/react-dnd/docs/overview) _if you are using React 18 or newer_. React DnD was an important library for its time, but it now does not get updated very often, and it has incompatibilities with React 18, especially in React Strict Mode. It is still possible to get it to work, but there are newer alternatives that have better compatibility and are more actively maintained. React DnD's Provider may also interfere and conflict with any other DnD solutions you may want to try in your app.
+
+2. Use [`"@dnd-kit/core"`](https://dndkit.com/). DnD Kit is a modern, modular and lightweight drag and drop library that is highly compatible with the modern React ecosystem, and it works well with semantic `<table>` markup. Both of the official TanStack DnD examples, [Column DnD](/table/framework/react/examples/column-dnd) and [Row DnD](/table/framework/react/examples/row-dnd), now use DnD Kit.
+
+3. Consider other DnD libraries like [`"react-beautiful-dnd"`](https://github.com/atlassian/react-beautiful-dnd), but be aware of their potentially large bundle sizes, maintenance status, and compatibility with `<table>` markup.
+
+4. Consider using native browser events and state management to implement lightweight drag and drop features. However, be aware that this approach may not be best for mobile users if you do not go the extra mile to implement proper touch events. [Material React Table V2](https://www.material-react-table.com/docs/examples/column-ordering) is an example of a library that implements TanStack Table with only browser drag and drop events such as `onDragStart`, `onDragEnd`, `onDragEnter` and no other dependencies. Browse its source code to see how it is done.
diff --git a/mintlify/table/guide/column-pinning.md b/mintlify/table/guide/column-pinning.md
new file mode 100644
index 000000000..327ed0c7e
--- /dev/null
+++ b/mintlify/table/guide/column-pinning.md
@@ -0,0 +1,92 @@
+---
+title: Column Pinning Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [column-pinning](/table/framework/react/examples/column-pinning)
+- [sticky-column-pinning](/table/framework/react/examples/column-pinning-sticky)
+
+ ### Other Examples
+ 
+- [Svelte column-pinning](/table/framework/svelte/examples/column-pinning)
+- [Vue column-pinning](/table/framework/vue/examples/column-pinning)
+
+## API
+
+[Column Pinning API](/table/api/features/column-pinning)
+
+## Column Pinning Guide
+
+TanStack Table offers state and APIs helpful for implementing column pinning features in your table UI. You can implement column pinning in multiple ways. You can either split pinned columns into their own separate tables, or you can keep all columns in the same table, but use the pinning state to order the columns correctly and use sticky CSS to pin the columns to the left or right.
+
+### How Column Pinning Affects Column Order
+
+There are 3 table features that can reorder columns, which happen in the following order:
+
+1. **Column Pinning** - If pinning, columns are split into left, center (unpinned), and right pinned columns.
+2. Manual [Column Ordering](/table/guide/column-ordering) - A manually specified column order is applied.
+3. [Grouping](/table/guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.
+
+The only way to change the order of the pinned columns is in the `columnPinning.left` and `columnPinning.right` state itself. `columnOrder` state will only affect the order of the unpinned ("center") columns.
+
+### Column Pinning State
+
+Managing the `columnPinning` state is optional, and usually not necessary unless you are adding persistent state features. TanStack Table will already keep track of the column pinning state for you. Manage the `columnPinning` state just like any other table state if you need to.
+
+```jsx
+const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
+  left: [],
+  right: [],
+});
+//...
+const table = useReactTable({
+  //...
+  state: {
+    columnPinning,
+    //...
+  }
+  onColumnPinningChange: setColumnPinning,
+  //...
+});
+```
+
+### Pin Columns by Default
+
+A very common use case is to pin some columns by default. You can do this by either initializing the `columnPinning` state with the pinned columnIds, or by using the `initialState` table option
+
+```jsx
+const table = useReactTable({
+  //...
+  initialState: {
+    columnPinning: {
+      left: ['expand-column'],
+      right: ['actions-column'],
+    },
+    //...
+  }
+  //...
+});
+```
+
+### Useful Column Pinning APIs
+
+> Note: Some of these APIs are new in v8.12.0
+
+There are a handful of useful Column API methods to help you implement column pinning features:
+
+- [`column.getCanPin`](/table/api/features/column-pinning#getcanpin): Use to determine if a column can be pinned.
+- [`column.pin`](/table/api/features/column-pinning#pin): Use to pin a column to the left or right. Or use to unpin a column.
+- [`column.getIsPinned`](/table/api/features/column-pinning#getispinned): Use to determine where a column is pinned.
+- [`column.getStart`](/table/api/features/column-pinning#getstart): Use to provide the correct `left` CSS value for a pinned column.
+- [`column.getAfter`](/table/api/features/column-pinning#getafter): Use to provide the correct `right` CSS value for a pinned column.
+- [`column.getIsLastColumn`](/table/api/features/column-pinning#getislastcolumn): Use to determine if a column is the last column in its pinned group. Useful for adding a box-shadow
+- [`column.getIsFirstColumn`](/table/api/features/column-pinning#getisfirstcolumn): Use to determine if a column is the first column in its pinned group. Useful for adding a box-shadow
+
+### Split Table Column Pinning
+
+If you are just using sticky CSS to pin columns, you can for the most part, just render the table as you normally would with the `table.getHeaderGroups` and `row.getVisibleCells` methods.
+
+However, if you are splitting up pinned columns into their own separate tables, you can make use of the `table.getLeftHeaderGroups`, `table.getCenterHeaderGroups`, `table.getRightHeaderGroups`, `row.getLeftVisibleCells`, `row.getCenterVisibleCells`, and `row.getRightVisibleCells` methods to only render the columns that are relevant to the current table.
diff --git a/mintlify/table/guide/column-sizing.md b/mintlify/table/guide/column-sizing.md
new file mode 100644
index 000000000..1392b6107
--- /dev/null
+++ b/mintlify/table/guide/column-sizing.md
@@ -0,0 +1,177 @@
+---
+title: Column Sizing Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [column-sizing](/table/framework/react/examples/column-sizing)
+- [column-resizing-performant](/table/framework/react/examples/column-resizing-performant)
+
+## API
+
+[Column Sizing API](/table/api/features/column-sizing)
+
+## Column Sizing Guide
+
+The column sizing feature allows you to optionally specify the width of each column including min and max widths. It also allows you and your users the ability to dynamically change the width of all columns at will, eg. by dragging the column headers.
+
+### Column Widths
+
+Columns by default are given the following measurement options:
+
+```tsx
+export const defaultColumnSizing = {
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER,
+}
+```
+
+These defaults can be overridden by both `tableOptions.defaultColumn` and individual column defs, in that order.
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'col1',
+    size: 270, //set column size for this column
+  },
+  //...
+]
+
+const table = useReactTable({
+  //override default column sizing
+  defaultColumn: {
+    size: 200, //starting column size
+    minSize: 50, //enforced during column resizing
+    maxSize: 500, //enforced during column resizing
+  },
+})
+```
+
+The column "sizes" are stored in the table state as numbers, and are usually interpreted as pixel unit values, but you can hook up these column sizing values to your css styles however you see fit.
+
+As a headless utility, table logic for column sizing is really only a collection of states that you can apply to your own layouts how you see fit (our example above implements 2 styles of this logic). You can apply these width measurements in a variety of ways:
+
+- semantic `table` elements or any elements being displayed in a table css mode
+- `div/span` elements or any elements being displayed in a non-table css mode
+  - Block level elements with strict widths
+  - Absolutely positioned elements with strict widths
+  - Flexbox positioned elements with loose widths
+  - Grid positioned elements with loose widths
+- Really any layout mechanism that can interpolate cell widths into a table structure.
+
+Each of these approaches has its own tradeoffs and limitations which are usually opinions held by a UI/component library or design system, luckily not you 😉.
+
+### Column Resizing
+
+TanStack Table provides built-in column resizing state and APIs that allow you to easily implement column resizing in your table UI with a variety of options for UX and performance.
+
+#### Enable Column Resizing
+
+By default, the `column.getCanResize()` API will return `true` by default for all columns, but you can either disable column resizing for all columns with the `enableColumnResizing` table option, or disable column resizing on a per-column basis with the `enableResizing` column option.
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'id',
+    enableResizing: false, //disable resizing for just this column
+    size: 200, //starting column size
+  },
+  //...
+]
+```
+
+#### Column Resize Mode
+
+By default, the column resize mode is set to `"onEnd"`. This means that the `column.getSize()` API will not return the new column size until the user has finished resizing (dragging) the column. Usually a small UI indicator will be displayed while the user is resizing the column.
+
+In React TanStack Table adapter, where achieving 60 fps column resizing renders can be difficult, depending on the complexity of your table or web page, the `"onEnd"` column resize mode can be a good default option to avoid stuttering or lagging while the user resizes columns. That is not to say that you cannot achieve 60 fps column resizing renders while using TanStack React Table, but you may have to do some extra memoization or other performance optimizations in order to achieve this.
+
+> Advanced column resizing performance tips will be discussed [down below](#advanced-column-resizing-performance).
+
+If you want to change the column resize mode to `"onChange"` for immediate column resizing renders, you can do so with the `columnResizeMode` table option.
+
+```tsx
+const table = useReactTable({
+  //...
+  columnResizeMode: 'onChange', //change column resize mode to "onChange"
+})
+```
+
+#### Column Resize Direction
+
+By default, TanStack Table assumes that the table markup is laid out in a left-to-right direction. For right-to-left layouts, you may need to change the column resize direction to `"rtl"`.
+
+```tsx
+const table = useReactTable({
+  //...
+  columnResizeDirection: 'rtl', //change column resize direction to "rtl" for certain locales
+})
+```
+
+#### Connect Column Resizing APIs to UI
+
+There are a few really handy APIs that you can use to hook up your column resizing drag interactions to your UI.
+
+##### Column Size APIs
+
+To apply the size of a column to the column head cells, data cells, or footer cells, you can use the following APIs:
+
+```ts
+header.getSize()
+column.getSize()
+cell.column.getSize()
+```
+
+How you apply these size styles to your markup is up to you, but it is pretty common to use either CSS variables or inline styles to apply the column sizes.
+
+```tsx
+<th
+  key={header.id}
+  colSpan={header.colSpan}
+  style={{ width: `${header.getSize()}px` }}
+>
+```
+
+Though, as discussed in the [advanced column resizing performance section](#advanced-column-resizing-performance), you may want to consider using CSS variables to apply column sizes to your markup.
+
+##### Column Resize APIs
+
+TanStack Table provides a pre-built event handler to make your drag interactions easy to implement. These event handlers are just convenience functions that call other internal APIs to update the column sizing state and re-render the table. Use `header.getResizeHandler()` to connect to your column resize drag interactions, for both mouse and touch events.
+
+```tsx
+<ColumnResizeHandle
+  onMouseDown={header.getResizeHandler()} //for desktop
+  onTouchStart={header.getResizeHandler()} //for mobile
+/>
+```
+
+##### Column Resize Indicator with ColumnSizingInfoState
+
+TanStack Table keeps track of an state object called `columnSizingInfo` that you can use to render a column resize indicator UI.
+
+```jsx
+<ColumnResizeIndicator
+  style={{
+    transform: header.column.getIsResizing()
+      ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
+      : '',
+  }}
+/>
+```
+
+#### Advanced Column Resizing Performance
+
+If you are creating large or complex tables (and using React 😉), you may find that if you do not add proper memoization to your render logic, your users may experience degraded performance while resizing columns.
+
+We have created a [performant column resizing example](/table/framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind:
+
+1. Don't use `column.getSize()` on every header and every data cell. Instead, calculate all column widths once upfront, **memoized**!
+2. Memoize your Table Body while resizing is in progress.
+3. Use CSS variables to communicate column widths to your table cells.
+
+If you follow these steps, you should see significant performance improvements while resizing columns.
+
+If you are not using React, and are using the Svelte, Vue, or Solid adapters instead, you may not need to worry about this as much, but similar principles apply.
diff --git a/mintlify/table/guide/column-visibility.md b/mintlify/table/guide/column-visibility.md
new file mode 100644
index 000000000..ad7adf522
--- /dev/null
+++ b/mintlify/table/guide/column-visibility.md
@@ -0,0 +1,131 @@
+---
+title: Column Visibility Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [column-visibility](/table/framework/react/examples/column-visibility)
+- [column-ordering](/table/framework/react/examples/column-ordering)
+- [sticky-column-pinning](/table/framework/react/examples/column-pinning-sticky)
+
+### Other Examples
+
+- [SolidJS column-visibility](/table/framework/solid/examples/column-visibility)
+- [Svelte column-visibility](/table/framework/svelte/examples/column-visibility)
+
+## API
+
+[Column Visibility API](/table/api/features/column-visibility)
+
+## Column Visibility Guide
+
+The column visibility feature allows table columns to be hidden or shown dynamically. In previous versions of react-table, this feature was a static property on a column, but in v8, there is a dedicated `columnVisibility` state and APIs for managing column visibility dynamically.
+
+### Column Visibility State
+
+The `columnVisibility` state is a map of column IDs to boolean values. A column will be hidden if its ID is present in the map and the value is `false`. If the column ID is not present in the map, or the value is `true`, the column will be shown.
+
+```jsx
+const [columnVisibility, setColumnVisibility] = useState({
+  columnId1: true,
+  columnId2: false, //hide this column by default
+  columnId3: true,
+});
+
+const table = useReactTable({
+  //...
+  state: {
+    columnVisibility,
+    //...
+  },
+  onColumnVisibilityChange: setColumnVisibility,
+});
+```
+
+Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option.
+
+> **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other.
+
+```jsx
+const table = useReactTable({
+  //...
+  initialState: {
+    columnVisibility: {
+      columnId1: true,
+      columnId2: false, //hide this column by default
+      columnId3: true,
+    },
+    //...
+  },
+});
+```
+
+### Disable Hiding Columns
+
+By default, all columns can be hidden or shown. If you want to prevent certain columns from being hidden, you set the `enableHiding` column option to `false` for those columns.
+
+```jsx
+const columns = [
+  {
+    header: 'ID',
+    accessorKey: 'id',
+    enableHiding: false, // disable hiding for this column
+  },
+  {
+    header: 'Name',
+    accessor: 'name', // can be hidden
+  },
+];
+```
+
+### Column Visibility Toggle APIs
+
+There are several column API methods that are useful for rendering column visibility toggles in the UI.
+
+- `column.getCanHide` - Useful for disabling the visibility toggle for a column that has `enableHiding` set to `false`.
+- `column.getIsVisible` - Useful for setting the initial state of the visibility toggle.
+- `column.toggleVisibility` - Useful for toggling the visibility of a column.
+- `column.getToggleVisibilityHandler` - Shortcut for hooking up the `column.toggleVisibility` method to a UI event handler.
+
+```jsx
+{table.getAllColumns().map((column) => (
+  <label key={column.id}>
+    <input
+      checked={column.getIsVisible()}
+      disabled={!column.getCanHide()}
+      onChange={column.getToggleVisibilityHandler()}
+      type="checkbox"
+    />
+    {column.columnDef.header}
+  </label>
+))}
+```
+
+### Column Visibility Aware Table APIs
+
+When you render your header, body, and footer cells, there are a lot of API options available. You may see APIs like `table.getAllLeafColumns` and `row.getAllCells`, but if you use these APIs, they will not take column visibility into account. Instead, you need to use the "visible" variants of these APIs, such as `table.getVisibleLeafColumns` and `row.getVisibleCells`.
+
+```jsx
+<table>
+  <thead>
+    <tr>
+      {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
+        //
+      ))}
+    </tr>
+  </thead>
+  <tbody>
+    {table.getRowModel().rows.map((row) => (
+      <tr key={row.id}>
+        {row.getVisibleCells().map((cell) => ( // takes column visibility into account
+          //
+        ))}
+      </tr>
+    ))}
+  </tbody>
+</table>
+```
+
+If you are using the Header Group APIs, they will already take column visibility into account.
diff --git a/mintlify/table/guide/columns.md b/mintlify/table/guide/columns.md
new file mode 100644
index 000000000..4ddd79556
--- /dev/null
+++ b/mintlify/table/guide/columns.md
@@ -0,0 +1,72 @@
+---
+title: Columns Guide
+---
+
+## API
+
+[Column API](/table/api/core/column)
+
+## Columns Guide
+
+> Note: This guide is about the actual `column` objects that are generated within the table instance and NOT about setting up the [column definitions](/table/guide/column-defs) for your table.
+
+This quick guide will discuss the different ways you can retrieve and interact with `column` objects in TanStack Table.
+
+### Where to Get Columns From
+
+You can find the `column` objects in many places. They are often attached
+
+#### Header and Cell Objects
+
+Before you reach for one of the `table` instance APIs, consider if you actually need to retrieve either [headers](/table/guide/headers) or [cells](/table/guide/cells) instead of `columns`. If you are rending out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the `header` and `cell` objects will contain references to these `column` objects from which they can derive the necessary information to render their UI.
+
+```js
+const column = cell.column; // get column from cell
+const column = header.column; // get column from header
+```
+
+#### Column Table Instance APIs
+
+There are dozens of `table` instance APIs you can use to retrieve columns from the table instance. Which APIs you will use will depend entirely on which features you are using in your table and your use-case.
+
+##### Get Column
+
+If you need to just get a single column by its ID, you can use the `table.getColumn` API.
+
+```js
+const column = table.getColumn('firstName');
+```
+
+##### Get Columns
+
+The simplest column API is `table.getAllColumns`, which will return a list of all columns in the table. There are dozens of other column APIs that are affected by other features and the state of the table that come alongside this API though. `table.getAllFlatColumns`, `table.getAllLeafColumns`, `getCenterLeafColumns`, `table.getLeftVisibleLeafColumns` are just some examples of other column APIs that you might use in tandem with the column visibility or column pinning features.
+
+### Column Objects
+
+Column objects are not actually meant to be used to render out the table UI directly, so they are not associated 1-to-1 with any `<th>` or `<td>` elements in your table, but they contain a lot of useful properties and methods that you can use to interact with the table state.
+
+#### Column IDs
+
+Every column must have a unique `id` defined in their associated [Column Definition](/table/guide/column-defs). Usually, you define this `id` yourself, or it is derived from the `accessorKey` or `header` properties in the column definition.
+
+#### ColumnDef
+
+A reference to the original `columnDef` object that was used to created the column is always available on the column object.
+
+#### Nested Grouped Columns Properties
+
+There are a few properties on `column` objects that are only useful if the column is part of a nested or grouped column structure. These properties include:
+
+- `columns`: An array of child columns that belong to a group column.
+- `depth`: The header group "row index" that the column group belongs to.
+- `parent`: The parent column of the column. If the column is a top-level column, this will be `undefined`.
+
+### More Column APIs
+
+There are dozens of Column APIs that you can use to interact with the table state and extract cell values from the table based on the state of the table. See each features column API documentation for more information.
+
+### Column Rendering
+
+Don't necessarily use `column` objects to render `headers` or `cells` directly. Instead, use the [`header`](/table/guide/headers) and [`cell`](/table/guide/cells) objects, as discussed above.
+
+But if you are just rendering a list of columns somewhere else in your UI for something like a column visibility menu or something similar, you can just map over a columns array and render out the UI as you normally would.
diff --git a/mintlify/table/guide/custom-features.md b/mintlify/table/guide/custom-features.md
new file mode 100644
index 000000000..e6b1ec261
--- /dev/null
+++ b/mintlify/table/guide/custom-features.md
@@ -0,0 +1,285 @@
+---
+title: Custom Features Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [custom-features](/table/framework/react/examples/custom-features)
+
+## Custom Features Guide
+
+In this guide, we'll cover how to extend TanStack Table with custom features, and along the way, we'll learn more about how the TanStack Table v8 codebase is structured and how it works.
+
+### TanStack Table Strives to be Lean
+
+TanStack Table has a core set of features that are built into the library such as sorting, filtering, pagination, etc. We've received a lot of requests and sometimes even some well thought out PRs to add even more features to the library. While we are always open to improving the library, we also want to make sure that TanStack Table remains a lean library that does not include too much bloat and code that is unlikely to be used in most use cases. Not every PR can, or should, be accepted into the core library, even if it does solve a real problem. This can be frustrating to developers where TanStack Table solves 90% of their use case, but they need a little bit more control. 
+
+TanStack Table has always been built in a way that allows it to be highly extensible (at least since v7). The `table` instance that is returned from whichever framework adapter that you are using (`useReactTable`, `useVueTable`, etc) is a plain JavaScript object that can have extra properties or APIs added to it. It has always been possible to use composition to add custom logic, state, and APIs to the table instance. Libraries like [Material React Table](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_TableInstance.ts) have simply created custom wrapper hooks around the `useReactTable` hook to extend the table instance with custom functionality.
+
+However, starting in version 8.14.0, TanStack Table has exposed a new `_features` table option that allows you to more tightly and cleanly integrate custom code into the table instance in exactly the same way that the built-in table features are already integrated.
+
+> TanStack Table v8.14.0 introduced a new `_features` option that allows you to add custom features to the table instance.
+
+With this new tighter integration, you can easily add more complex custom features to your tables, and possibly even package them up and share them with the community. We'll see how this evolves over time. In a future v9 release, we may even lower the bundle size of TanStack Table by making all features opt-in, but that is still being explored.
+
+### How TanStack Table Features Work
+
+TanStack Table's source code is arguably somewhat simple (at least we think so). All code for each feature is split up into its own object/file with instantiation methods to create initial state, default table and column options, and API methods that can be added to the `table`, `header`, `column`, `row`, and `cell` instances.
+
+All of the functionality of a feature object can be described with the `TableFeature` type that is exported from TanStack Table. This type is a TypeScript interface that describes the shape of a feature object needed to create a feature.
+
+```ts
+export interface TableFeature<TData extends RowData = any> {
+  createCell?: (
+    cell: Cell<TData, unknown>,
+    column: Column<TData>,
+    row: Row<TData>,
+    table: Table<TData>
+  ) => void
+  createColumn?: (column: Column<TData, unknown>, table: Table<TData>) => void
+  createHeader?: (header: Header<TData, unknown>, table: Table<TData>) => void
+  createRow?: (row: Row<TData>, table: Table<TData>) => void
+  createTable?: (table: Table<TData>) => void
+  getDefaultColumnDef?: () => Partial<ColumnDef<TData, unknown>>
+  getDefaultOptions?: (
+    table: Table<TData>
+  ) => Partial<TableOptionsResolved<TData>>
+  getInitialState?: (initialState?: InitialTableState) => Partial<TableState>
+}
+```
+
+This might be a bit confusing, so let's break down what each of these methods do:
+
+#### Default Options and Initial State
+
+<br />
+
+##### getDefaultOptions
+
+The `getDefaultOptions` method in a table feature is responsible for setting the default table options for that feature. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `getDefaultOptions` method sets the default `columnResizeMode` option with a default value of `"onEnd"`.
+
+<br />
+
+##### getDefaultColumnDef
+
+The `getDefaultColumnDef` method in a table feature is responsible for setting the default column options for that feature. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `getDefaultColumnDef` method sets the default `sortUndefined` column option with a default value of `1`.
+
+<br />
+
+##### getInitialState
+
+The `getInitialState` method in a table feature is responsible for setting the default state for that feature. For example, in the [Pagination](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowPagination.ts) feature, the `getInitialState` method sets the default `pageSize` state with a value of `10` and the default `pageIndex` state with a value of `0`.
+
+#### API Creators
+
+<br />
+
+##### createTable
+
+The `createTable` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `createTable` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `RowSelection` feature.
+
+<br />
+
+##### createHeader
+
+The `createHeader` method in a table feature is responsible for adding methods to the `header` instance. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `createHeader` method adds many header instance API methods such as `getStart`, and many others. So then, when you call `header.getStart()`, you are calling a method that was added to the header instance by the `ColumnSizing` feature.
+
+<br />
+
+##### createColumn
+
+The `createColumn` method in a table feature is responsible for adding methods to the `column` instance. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `createColumn` method adds many column instance API methods such as `getNextSortingOrder`, `toggleSorting`, etc. So then, when you call `column.toggleSorting()`, you are calling a method that was added to the column instance by the `RowSorting` feature.
+
+<br />
+
+##### createRow
+
+The `createRow` method in a table feature is responsible for adding methods to the `row` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `createRow` method adds many row instance API methods such as `toggleSelected`, `getIsSelected`, etc. So then, when you call `row.toggleSelected()`, you are calling a method that was added to the row instance by the `RowSelection` feature.
+
+<br />
+
+##### createCell
+
+The `createCell` method in a table feature is responsible for adding methods to the `cell` instance. For example, in the [Column Grouping](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnGrouping.ts) feature, the `createCell` method adds many cell instance API methods such as `getIsGrouped`, `getIsAggregated`, etc. So then, when you call `cell.getIsGrouped()`, you are calling a method that was added to the cell instance by the `ColumnGrouping` feature.
+
+### Adding a Custom Feature
+
+Let's walk through making a custom table feature for a hypothetical use case. Let's say we want to add a feature to the table instance that allows the user to change the "density" (padding of cells) of the table. 
+
+Check out the full [custom-features](/table/framework/react/examples/custom-features) example to see the full implementation, but here's an in-depth look at the steps to create a custom feature.
+
+#### Step 1: Set up TypeScript Types
+
+Assuming you want the same full type-safety that the built-in features in TanStack Table have, let's set up all of the TypeScript types for our new feature. We'll create types for new table options, state, and table instance API methods.
+
+These types are following the naming convention used internally within TanStack Table, but you can name them whatever you want. We are not adding these types to TanStack Table yet, but we'll do that in the next step.
+
+```ts
+// define types for our new feature's custom state
+export type DensityState = 'sm' | 'md' | 'lg'
+export interface DensityTableState {
+  density: DensityState
+}
+
+// define types for our new feature's table options
+export interface DensityOptions {
+  enableDensity?: boolean
+  onDensityChange?: OnChangeFn<DensityState>
+}
+
+// Define types for our new feature's table APIs
+export interface DensityInstance {
+  setDensity: (updater: Updater<DensityState>) => void
+  toggleDensity: (value?: DensityState) => void
+}
+```
+
+#### Step 2: Use Declaration Merging to Add New Types to TanStack Table
+
+We can tell TypeScript to modify the exported types from TanStack Table to include our new feature's types. This is called "declaration merging" and it's a powerful feature of TypeScript. This way, we should not have to use any TypeScript hacks such as `as unknown as CustomTable` or `// @ts-ignore` in our new feature's code or in our application code.
+
+```ts
+// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
+declare module '@tanstack/react-table' { // or whatever framework adapter you are using
+  //merge our new feature's state with the existing table state
+  interface TableState extends DensityTableState {}
+  //merge our new feature's options with the existing table options
+  interface TableOptionsResolved<TData extends RowData>
+    extends DensityOptions {}
+  //merge our new feature's instance APIs with the existing table instance APIs
+  interface Table<TData extends RowData> extends DensityInstance {}
+  // if you need to add cell instance APIs...
+  // interface Cell<TData extends RowData, TValue> extends DensityCell
+  // if you need to add row instance APIs...
+  // interface Row<TData extends RowData> extends DensityRow
+  // if you need to add column instance APIs...
+  // interface Column<TData extends RowData, TValue> extends DensityColumn
+  // if you need to add header instance APIs...
+  // interface Header<TData extends RowData, TValue> extends DensityHeader
+
+  // Note: declaration merging on `ColumnDef` is not possible because it is a complex type, not an interface.
+  // But you can still use declaration merging on `ColumnDef.meta`
+}
+```
+
+Once we do this correctly, we should have no TypeScript errors when we try to both create our new feature's code and use it in our application.
+
+##### Caveats of Using Declaration Merging
+
+One caveat of using declaration merging is that it will affect the TanStack Table types for every table across your codebase. This is not a problem if you plan on loading the same feature set for every table in your application, but it could be a problem if some of your tables load extra features and some do not. Alternatively, you can just make a bunch of custom types that extend off of the TanStack Table types with your new features added. This is what [Material React Table](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/types.ts) does in order to avoid affecting the types of vanilla TanStack Table tables, but it's a bit more tedious, and requires a lot of type casting at certain points.
+
+#### Step 3: Create the Feature Object
+
+With all of that TypeScript setup out of the way, we can now create the feature object for our new feature. This is where we define all of the methods that will be added to the table instance.
+
+Use the `TableFeature` type to ensure that you are creating the feature object correctly. If the TypeScript types are set up correctly, you should have no TypeScript errors when you create the feature object with the new state, options, and instance APIs.
+
+```ts
+export const DensityFeature: TableFeature<any> = { //Use the TableFeature type!!
+  // define the new feature's initial state
+  getInitialState: (state): DensityTableState => {
+    return {
+      density: 'md',
+      ...state,
+    }
+  },
+
+  // define the new feature's default options
+  getDefaultOptions: <TData extends RowData>(
+    table: Table<TData>
+  ): DensityOptions => {
+    return {
+      enableDensity: true,
+      onDensityChange: makeStateUpdater('density', table),
+    } as DensityOptions
+  },
+  // if you need to add a default column definition...
+  // getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
+  //   return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
+  // },
+
+  // define the new feature's table instance methods
+  createTable: <TData extends RowData>(table: Table<TData>): void => {
+    table.setDensity = updater => {
+      const safeUpdater: Updater<DensityState> = old => {
+        let newState = functionalUpdate(updater, old)
+        return newState
+      }
+      return table.options.onDensityChange?.(safeUpdater)
+    }
+    table.toggleDensity = value => {
+      table.setDensity(old => {
+        if (value) return value
+        return old === 'lg' ? 'md' : old === 'md' ? 'sm' : 'lg' //cycle through the 3 options
+      })
+    }
+  },
+
+  // if you need to add row instance APIs...
+  // createRow: <TData extends RowData>(row, table): void => {},
+  // if you need to add cell instance APIs...
+  // createCell: <TData extends RowData>(cell, column, row, table): void => {},
+  // if you need to add column instance APIs...
+  // createColumn: <TData extends RowData>(column, table): void => {},
+  // if you need to add header instance APIs...
+  // createHeader: <TData extends RowData>(header, table): void => {},
+}
+```
+
+#### Step 4: Add the Feature to the Table
+
+Now that we have our feature object, we can add it to the table instance by passing it to the `_features` option when we create the table instance.
+
+```ts
+const table = useReactTable({
+  _features: [DensityFeature], //pass the new feature to merge with all of the built-in features under the hood
+  columns,
+  data,
+  //..
+})
+```
+
+#### Step 5: Use the Feature in Your Application
+
+Now that the feature is added to the table instance, you can use the new instance APIs options, and state in your application.
+
+```tsx
+const table = useReactTable({
+  _features: [DensityFeature], //pass our custom feature to the table to be instantiated upon creation
+  columns,
+  data,
+  //...
+  state: {
+    density, //passing the density state to the table, TS is still happy :)
+  },
+  onDensityChange: setDensity, //using the new onDensityChange option, TS is still happy :)
+})
+//...
+const { density } = table.getState()
+return(
+  <td
+    key={cell.id}
+    style={{
+      //using our new feature in the code
+      padding:
+        density === 'sm'
+          ? '4px'
+          : density === 'md'
+            ? '8px'
+            : '16px',
+      transition: 'padding 0.2s',
+    }}
+  >
+    {flexRender(
+      cell.column.columnDef.cell,
+      cell.getContext()
+    )}
+  </td>
+)
+```
+
+#### Do We Have to Do It This Way?
+
+This is just a new way to integrate custom code along-side the built-in features in TanStack Table. In our example up above, we could have just as easily stored the `density` state in a `React.useState`, defined our own `toggleDensity` handler wherever, and just used it in our code separately from the table instance. Building table features along-side TanStack Table instead of deeply integrating them into the table instance is still a perfectly valid way to build custom features. Depending on your use case, this may or may not be the cleanest way to extend TanStack Table with custom features.
diff --git a/mintlify/table/guide/data.md b/mintlify/table/guide/data.md
new file mode 100644
index 000000000..033b1db9d
--- /dev/null
+++ b/mintlify/table/guide/data.md
@@ -0,0 +1,250 @@
+---
+title: Data Guide
+---
+
+## Data Guide
+
+Tables start with your data. Your column definitions and rows will depend on the shape of your data. TanStack Table has some TypeScript features that will help you create the rest of your table code with a great type-safe experience. If you set up your data and types correctly, TanStack Table will be able to infer the shape of your data and enforce that your column definitions are made correctly.
+
+### TypeScript
+
+TypeScript is NOT required to use the TanStack Table packages... ***BUT*** TanStack Table is written and organized in such a way that makes the awesome TypeScript experience that you get feel like it is one of the main selling points of the library. If you are not using TypeScript, you will be missing out on a lot of great autocompletion and type-checking features that will both speed up your development time and reduce the number of bugs in your code.
+
+#### TypeScript Generics
+
+Having a basic understanding of what TypeScript Generics are and how they work will help you understand this guide better, but it should be easy enough to pick up as you go. The official [TypeScript Generics Docs](https://www.typescriptlang.org/docs/handbook/2/generics.html) may be helpful for those not yet familiar with TypeScript.
+
+### Defining Data Types
+
+`data` is an array of objects that will be turned into the rows of your table. Each object in the array represents a row of data (under normal circumstances). If you are using TypeScript, we usually define a type for the shape of our data. This type is used as a generic type for all of the other table, column, row, and cell instances. This Generic is usually referred to as `TData` throughout the rest of the TanStack Table types and APIs.
+
+For example, if we have a table that displays a list of users in an array like this:
+
+```json
+[
+  {
+    "firstName": "Tanner",
+    "lastName": "Linsley",
+    "age": 33,
+    "visits": 100,
+    "progress": 50,
+    "status": "Married"
+  },
+  {
+    "firstName": "Kevin",
+    "lastName": "Vandy",
+    "age": 27,
+    "visits": 200,
+    "progress": 100,
+    "status": "Single"
+  }
+]
+```
+
+Then we can define a User (TData) type like this:
+
+```ts
+//TData
+type User = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: string
+}
+```
+
+We can then define our `data` array with this type, and then TanStack Table will be able to intelligently infer lots of types for us later on in our columns, rows, cells, etc. This is because the `data` type is literally defined as the `TData` generic type. Whatever you pass to the `data` table option will become the `TData` type for the rest of the table instance. Just make sure your column definitions use the same `TData` type as the `data` type when you define them later.
+
+```ts
+//note: data needs a "stable" reference in order to prevent infinite re-renders
+const data: User[] = []
+//or
+const [data, setData] = React.useState<User[]>([])
+//or
+const data = ref<User[]>([]) //vue
+//etc...
+```
+
+#### Deep Keyed Data
+
+If your data is not a nice flat array of objects, that's okay! Once you get around to defining your columns, there are strategies for accessing deeply nested data in your accessors.
+
+If your `data` looks something like this:
+
+```json
+[
+  {
+    "name": {
+      "first": "Tanner",
+      "last": "Linsley"
+    },
+    "info": {
+      "age": 33,
+      "visits": 100,
+    }
+  },
+  {
+    "name": {
+      "first": "Kevin",
+      "last": "Vandy"
+    },
+    "info": {
+      "age": 27,
+      "visits": 200,
+    }
+  }
+]
+```
+
+You can define a type like this:
+
+```ts
+type User = {
+  name: {
+    first: string
+    last: string
+  }
+  info: {
+    age: number
+    visits: number
+  }
+}
+```
+
+And you will be able to access the data in your column definitions with either dot notation in an accessorKey or simply by using an accessorFn.
+
+```ts
+const columns = [
+  {
+    header: 'First Name',
+    accessorKey: 'name.first',
+  },
+  {
+    header: 'Last Name',
+    accessorKey: 'name.last',
+  },
+  {
+    header: 'Age',
+    accessorFn: row => row.info.age, 
+  },
+  //...
+]
+```
+
+This is discussed in more detail in the [Column Def Guide](/table/guide/column-defs).
+
+> NOTE: The "keys" in your json data can usually be anything, but any periods in the keys will be interpreted as a deep key and will cause errors.
+
+#### Nested Sub-Row Data
+
+If you are using expanding features, it can be common to have nested sub-rows in your data. This results in a recursive type that is a bit different.
+
+So if your data looks like this:
+
+```json
+[
+  {
+    "firstName": "Tanner",
+    "lastName": "Linsley",
+    "subRows": [
+      {
+        "firstName": "Kevin",
+        "lastName": "Vandy",
+      },
+      {
+        "firstName": "John",
+        "lastName": "Doe",
+        "subRows": [
+          //...
+        ]
+      }
+    ]
+  },
+  {
+    "firstName": "Jane",
+    "lastName": "Doe",
+  }
+]
+```
+
+You can define a type like this:
+
+```ts
+type User = {
+  firstName: string
+  lastName: string
+  subRows?: User[] //does not have to be called "subRows", can be called anything
+}
+```
+
+Where `subRows` is an optional array of `User` objects. This is discussed in more detail in the [Expanding Guide](/table/guide/expanding).
+
+### Give Data a "Stable" Reference
+
+The `data` array that you pass to the table instance ***MUST*** have a "stable" reference in order to prevent bugs that cause infinite re-renders (especially in React).
+
+This will depend on which framework adapter you are using, but in React, you should often use `React.useState`, `React.useMemo`, or similar to ensure that both the `data` and `columns` table options have stable references.
+
+```tsx
+const fallbackData = []
+
+export default function MyComponent() {
+  //✅ GOOD: This will not cause an infinite loop of re-renders because `columns` is a stable reference
+  const columns = useMemo(() => [
+    // ...
+  ], []);
+
+  //✅ GOOD: This will not cause an infinite loop of re-renders because `data` is a stable reference
+  const [data, setData] = useState(() => [
+    // ...
+  ]);
+
+  // Columns and data are defined in a stable reference, will not cause infinite loop!
+  const table = useReactTable({
+    columns,
+    data ?? fallbackData, //also good to use a fallback array that is defined outside of the component (stable reference)
+  });
+
+  return <table>...</table>;
+}
+```
+
+`React.useState` and `React.useMemo` are not the only ways to give your data a stable reference. You can also define your data outside of the component or use a 3rd party state management library like Redux, Zustand, or TanStack Query.
+
+The main thing to avoid is defining the `data` array inside the same scope as the `useReactTable` call. That will cause the `data` array to be redefined on every render, which will cause an infinite loop of re-renders.
+
+```tsx
+export default function MyComponent() {
+  //😵 BAD: This will cause an infinite loop of re-renders because `columns` is redefined as a new array on every render!
+  const columns = [
+    // ...
+  ];
+
+  //😵 BAD: This will cause an infinite loop of re-renders because `data` is redefined as a new array on every render!
+  const data = [
+    // ...
+  ];
+
+  //❌ Columns and data are defined in the same scope as `useReactTable` without a stable reference, will cause infinite loop!
+  const table = useReactTable({
+    columns,
+    data ?? [], //❌ Also bad because the fallback array is re-created on every render
+  });
+
+  return <table>...</table>;
+}
+```
+
+### How TanStack Table Transforms Data
+
+Later, in other parts of these docs, you will see how TanStack Table processes the `data` that you pass to the table and generates the row and cell objects that are used to create the table. The `data` that you pass to the table is never mutated by TanStack Table, but the actual values in the rows and cells may be transformed by the accessors in your column definitions, or by other features performed by [row models](/table/guide/row-models) like grouping or aggregation.
+
+### How Much Data Can TanStack Table Handle?
+
+Believe it or not, TanStack Table was actually built to scale up to handle potentially hundreds of thousands of rows of data in the client. This is obviously not always possible, depending on the size of each column's data and the number of columns. However, the sorting, filtering, pagination, and grouping features are all built with performance in mind for large datasets.
+
+The default mindset of a developer building a data grid is to implement server-side pagination, sorting, and filtering for large datasets. This is still usually a good idea, but a lot of developers underestimate how much data can actually be handled in the client with modern browsers and the right optimizations. If your table will never have more than a few thousand rows, you can probably take advantage of the client-side features in TanStack Table instead of implementing them yourself on the server. Before committing to letting TanStack Table's client-side features handle your large dataset, you should test it with your actual data to see if it performs well enough for your needs, of course.
+
+This is discussed in more detail in the [Pagination Guide](/table/guide/pagination#should-you-use-client-side-pagination).
diff --git a/mintlify/table/guide/expanding.md b/mintlify/table/guide/expanding.md
new file mode 100644
index 000000000..dd6e3d065
--- /dev/null
+++ b/mintlify/table/guide/expanding.md
@@ -0,0 +1,229 @@
+---
+title: Expanding Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [expanding](/table/framework/react/examples/expanding)
+- [grouping](/table/framework/react/examples/grouping)
+- [sub-components](/table/framework/react/examples/sub-components)
+
+## API
+
+[Expanding API](/table/api/features/expanding)
+
+## Expanding Feature Guide
+
+Expanding is a feature that allows you to show and hide additional rows of data related to a specific row. This can be useful in cases where you have hierarchical data and you want to allow users to drill down into the data from a higher level. Or it can be useful for showing additional information related to a row.
+
+### Different use cases for Expanding Features
+
+There are multiple use cases for expanding features in TanStack Table that will be discussed below.
+
+1. Expanding sub-rows (child rows, aggregate rows, etc.)
+2. Expanding custom UI (detail panels, sub-tables, etc.)
+
+### Enable Client-Side Expanding
+
+To use the client-side expanding features, you need to define the getExpandedRowModel function in your table options. This function is responsible for returning the expanded row model.
+
+```ts
+const table = useReactTable({
+  // other options...
+  getExpandedRowModel: getExpandedRowModel(),
+})
+```
+
+Expanded data can either contain table rows or any other data you want to display. We will discuss how to handle both cases in this guide.
+
+### Table rows as expanded data
+
+Expanded rows are essentially child rows that inherit the same column structure as their parent rows. If your data object already includes these expanded rows data, you can utilize the `getSubRows` function to specify these child rows. However, if your data object does not contain the expanded rows data, they can be treated as custom expanded data, which is discussed in next section.
+
+For example, if you have a data object like this:
+
+```ts
+type Person = {
+  id: number
+  name: string
+  age: number
+  children?: Person[] | undefined
+}
+
+const data: Person[] =  [
+  { id: 1, 
+  name: 'John', 
+  age: 30, 
+  children: [
+      { id: 2, name: 'Jane', age: 5 },
+      { id: 5, name: 'Jim', age: 10 }
+    ] 
+  },
+  { id: 3,
+   name: 'Doe', 
+   age: 40, 
+    children: [
+      { id: 4, name: 'Alice', age: 10 }
+    ] 
+  },
+]
+```
+
+Then you can use the getSubRows function to return the children array in each row as expanded rows. The table instance will now understand where to look for the sub rows on each row.
+
+```ts
+const table = useReactTable({
+  // other options...
+  getSubRows: (row) => row.children, // return the children array as sub-rows
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+})
+```
+
+> **Note:** You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported.
+
+### Custom Expanding UI
+
+In some cases, you may wish to show extra details or information, which may or may not be part of your table data object, such as expanded data for rows. This kind of expanding row UI has gone by many names over the years including "expandable rows", "detail panels", "sub-components", etc.
+
+By default, the `row.getCanExpand()` row instance API will return false unless it finds `subRows` on a row. This can be overridden by implementing your own `getRowCanExpand` function in the table instance options.
+
+```ts
+//...
+const table = useReactTable({
+  // other options...
+  getRowCanExpand: (row) => true, // Add your logic to determine if a row can be expanded. True means all rows include expanded data
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+})
+//...
+<tbody>
+  {table.getRowModel().rows.map((row) => (
+    <React.Fragment key={row.id}>
+     {/* Normal row UI */}
+      <tr>
+        {row.getVisibleCells().map((cell) => (
+          <td key={cell.id}>
+            <FlexRender
+              render={cell.column.columnDef.cell}
+              props={cell.getContext()}
+            />
+          </td>
+        ))}
+      </tr>
+      {/* If the row is expanded, render the expanded UI as a separate row with a single cell that spans the width of the table */}
+      {row.getIsExpanded() && (
+        <tr>
+          <td colSpan={row.getAllCells().length}> // The number of columns you wish to span for the expanded data if it is not a row that shares the same columns as the parent row
+            // Your custom UI goes here
+          </td>
+        </tr>
+      )}
+    </React.Fragment>
+  ))}
+</tbody>
+//...
+```
+
+### Expanded rows state
+
+If you need to control the expanded state of the rows in your table, you can do so by using the expanded state and the `onExpandedChange` option. This allows you to manage the expanded state according to your requirements.
+
+```ts
+const [expanded, setExpanded] = useState<ExpandedState>({})
+
+const table = useReactTable({
+  // other options...
+  state: {
+    expanded: expanded, // must pass expanded state back to the table
+  },
+  onExpandedChange: setExpanded
+})
+```
+
+The ExpandedState type is defined as follows:
+
+```ts
+type ExpandedState = true | Record<string, boolean>
+```
+
+If the ExpandedState is true, it means all rows are expanded. If it's a record, only the rows with IDs present as keys in the record and have their value set to true are expanded.  For example, if the expanded state is &#123; row1: true, row2: false &#125;, it means the row with ID row1 is expanded and the row with ID row2 is not expanded. This state is used by the table to determine which rows are expanded and should display their subRows, if any.
+
+### UI toggling handler for expanded rows
+
+TanStack table will not add a toggling handler UI for expanded data to your table. You should manually add it within each row's UI to allow users to expand and collapse the row. For example, you can add a button UI within the columns definition.
+
+```ts
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+  {
+    header: 'Children',
+    cell: ({ row }) => {
+      return row.getCanExpand() ?
+        <button
+          onClick={row.getToggleExpandedHandler()}
+          style={{ cursor: 'pointer' }}
+        >
+        {row.getIsExpanded() ? '👇' : '👉'}
+        </button>
+       : '';
+    },
+  },
+]
+```
+
+### Filtering Expanded Rows
+
+By default, the filtering process starts from the parent rows and moves downwards. This means if a parent row is excluded by the filter, all its child rows will also be excluded. However, you can change this behavior by using the `filterFromLeafRows` option. When this option is enabled, the filtering process starts from the leaf (child) rows and moves upwards. This ensures that a parent row will be included in the filtered results as long as at least one of its child or grandchild rows meets the filter criteria. Additionally, you can control how deep into the child hierarchy the filter process goes by using the `maxLeafRowFilterDepth` option. This option allows you to specify the maximum depth of child rows that the filter should consider.
+
+```ts
+//...
+const table = useReactTable({
+  // other options...
+  getSubRows: row => row.subRows,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  filterFromLeafRows: true, // search through the expanded rows
+  maxLeafRowFilterDepth: 1, // limit the depth of the expanded rows that are searched
+})
+```
+
+### Paginating Expanded Rows
+
+By default, expanded rows are paginated along with the rest of the table (which means expanded rows may span multiple pages). If you want to disable this behavior (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size) you can use the `paginateExpandedRows` option.
+
+```ts
+const table = useReactTable({
+  // other options...
+  paginateExpandedRows: false,
+})
+```
+
+### Pinning Expanded Rows
+
+Pinning expanded rows works the same way as pinning regular rows. You can pin expanded rows to the top or bottom of the table. Please refer to the [Pinning Guide](/table/guide/pinning) for more information on row pinning.
+
+### Sorting Expanded Rows
+
+By default, expanded rows are sorted along with the rest of the table.
+
+### Manual Expanding (server-side)
+
+If you are doing server-side expansion, you can enable manual row expansion by setting the manualExpanding option to true. This means that the `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model.
+
+```ts
+const table = useReactTable({
+  // other options...
+  manualExpanding: true,
+})
+```
diff --git a/mintlify/table/guide/features.md b/mintlify/table/guide/features.md
new file mode 100644
index 000000000..61b146f59
--- /dev/null
+++ b/mintlify/table/guide/features.md
@@ -0,0 +1,21 @@
+---
+title: Features Guide
+---
+
+TanStack Table comes with many features, each with their own associated options and API:
+
+- [Column Ordering](/table/guide/column-ordering)
+- [Column Pinning](/table/guide/column-pinning)
+- [Column Sizing](/table/guide/column-sizing)
+- [Column Visibility](/table/guide/column-visibility)
+- [Expanding](/table/guide/expanding)
+- [Column Faceting](/table/guide/column-faceting)
+- [Column Filtering](/table/guide/column-filtering)
+- [Global Faceting](/table/guide/global-faceting)
+- [Global Filtering](/table/guide/global-filtering)
+- [Grouping](/table/guide/grouping)
+- [Pagination](/table/guide/pagination)
+- [Row Pinning](/table/guide/row-pinning)
+- [Row Selection](/table/guide/row-selection)
+- [Sorting](/table/guide/sorting)
+- [Virtualization](/table/guide/virtualization)
\ No newline at end of file
diff --git a/mintlify/table/guide/filters.md b/mintlify/table/guide/filters.md
new file mode 100644
index 000000000..57adb9f9b
--- /dev/null
+++ b/mintlify/table/guide/filters.md
@@ -0,0 +1,11 @@
+---
+title: Filters Guide
+---
+
+
+
+The filter guides are now split into multiple guides:
+
+- [Column Filtering](/table/guide/column-filtering)
+- [Global Filtering](/table/guide/global-filtering)
+- [Fuzzy Filtering](/table/guide/fuzzy-filtering)
diff --git a/mintlify/table/guide/fuzzy-filtering.md b/mintlify/table/guide/fuzzy-filtering.md
new file mode 100644
index 000000000..bbca89a00
--- /dev/null
+++ b/mintlify/table/guide/fuzzy-filtering.md
@@ -0,0 +1,124 @@
+---
+title: Fuzzy Filtering Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [filters-fuzzy](/table/framework/react/examples/filters-fuzzy)
+
+## API
+
+[Filters API](/table/api/features/filters)
+
+## Fuzzy Filtering Guide
+
+Fuzzy filtering is a technique that allows you to filter data based on approximate matches. This can be useful when you want to search for data that is similar to a given value, rather than an exact match.
+
+You can implement a client side fuzzy filtering by defining a custom filter function. This function should take in the row, columnId, and filter value, and return a boolean indicating whether the row should be included in the filtered data.
+
+Fuzzy filtering is mostly used with global filtering, but you can also apply it to individual columns. We will discuss how to implement fuzzy filtering for both cases.
+
+> **Note:** You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering.
+> TanStack Match Sorter Utils is a fork of [match-sorter](https://github.com/kentcdodds/match-sorter) by Kent C. Dodds. It was forked in order to work better with TanStack Table's row by row filtering approach.
+
+Using the match-sorter libraries is optional, but the TanStack Match Sorter Utils library provides a great way to both fuzzy filter and sort by the rank information it returns, so that rows can be sorted by their closest matches to the search query.
+
+### Defining a Custom Fuzzy Filter Function
+
+Here's an example of a custom fuzzy filter function:
+
+```typescript
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { FilterFn } from '@tanstack/table';
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({ itemRank })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+```
+
+In this function, we're using the rankItem function from the @tanstack/match-sorter-utils library to rank the item. We then store the ranking information in the meta data of the row, and return whether the item passed the ranking criteria.
+
+### Using Fuzzy Filtering with Global Filtering
+
+To use fuzzy filtering with global filtering, you can specify the fuzzy filter function in the globalFilterFn option of the table instance:
+
+```typescript
+const table = useReactTable({ // or your framework's equivalent function
+    columns,
+    data,
+    filterFns: {
+      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
+    },
+    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(), //client side filtering
+    getSortedRowModel: getSortedRowModel(), //client side sorting needed if you want to use sorting too.
+})
+```
+
+### Using Fuzzy Filtering with Column Filtering
+
+To use fuzzy filtering with column filtering, you should first define the fuzzy filter function in the filterFns option of the table instance. You can then specify the fuzzy filter function in the filterFn option of the column definition:
+
+```typescript
+const column = [
+  {
+    accessorFn: row => `${row.firstName} ${row.lastName}`,
+    id: 'fullName',
+    header: 'Full Name',
+    cell: info => info.getValue(),
+    filterFn: 'fuzzy', //using our custom fuzzy filter function
+  },
+  // other columns...
+];
+```
+
+In this example, we're applying the fuzzy filter to a column that combines the firstName and lastName fields of the data.
+
+#### Sorting with Fuzzy Filtering
+
+When using fuzzy filtering with column filtering, you might also want to sort the data based on the ranking information. You can do this by defining a custom sorting function:
+
+```typescript
+import { compareItems } from '@tanstack/match-sorter-utils'
+import { sortingFns } from '@tanstack/table'
+
+const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
+  let dir = 0
+
+  // Only sort by rank if the column has ranking information
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId]?.itemRank!,
+      rowB.columnFiltersMeta[columnId]?.itemRank!
+    )
+  }
+
+  // Provide an alphanumeric fallback for when the item ranks are equal
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+}
+```
+
+In this function, we're comparing the ranking information of the two rows. If the ranks are equal, we fall back to alphanumeric sorting.
+
+You can then specify this sorting function in the sortFn option of the column definition:
+
+```typescript
+{
+  accessorFn: row => `${row.firstName} ${row.lastName}`,
+  id: 'fullName',
+  header: 'Full Name',
+  cell: info => info.getValue(),
+  filterFn: 'fuzzy', //using our custom fuzzy filter function
+  sortFn: 'fuzzySort', //using our custom fuzzy sort function
+}
+```
diff --git a/mintlify/table/guide/global-faceting.md b/mintlify/table/guide/global-faceting.md
new file mode 100644
index 000000000..64d0f2c97
--- /dev/null
+++ b/mintlify/table/guide/global-faceting.md
@@ -0,0 +1,79 @@
+---
+title: Global Faceting Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [filters-faceted](/table/framework/react/examples/filters)
+
+## API
+
+[Global Faceting API](/table/api/features/global-faceting)
+
+## Global Faceting Guide
+
+Global Faceting allows you to generate lists of values for all columns from the table's data. For example, a list of unique values in a table can be generated from all rows in all columns to be used as search suggestions in an autocomplete filter component. Or, a tuple of minimum and maximum values can be generated from a table of numbers to be used as a range for a range slider filter component.
+
+### Global Faceting Row Models
+
+In order to use any of the global faceting features, you must include the appropriate row models in your table options.
+
+```ts
+//only import the row models you need
+import {
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedMinMaxValues, //depends on getFacetedRowModel
+  getFacetedUniqueValues, //depends on getFacetedRowModel
+} from '@tanstack/react-table'
+//...
+const table = useReactTable({
+  // other options...
+  getCoreRowModel: getCoreRowModel(),
+  getFacetedRowModel: getFacetedRowModel(), //Faceting model for client-side faceting (other faceting methods depend on this model)
+  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
+  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
+  //...
+})
+```
+
+### Use Global Faceted Row Models
+
+Once you have included the appropriate row models in your table options, you will be able to use the faceting table instance APIs to access the lists of values generated by the faceted row models.
+
+```ts
+// list of unique values for autocomplete filter
+const autoCompleteSuggestions =
+ Array.from(table.getGlobalFacetedUniqueValues().keys())
+  .sort()
+  .slice(0, 5000);
+```
+
+```ts
+// tuple of min and max values for range filter
+const [min, max] = table.getGlobalFacetedMinMaxValues() ?? [0, 1];
+```
+
+### Custom Global (Server-Side) Faceting
+
+If instead of using the built-in client-side faceting features, you can implement your own faceting logic on the server-side and pass the faceted values to the client-side. You can use the getGlobalFacetedUniqueValues and getGlobalFacetedMinMaxValues table options to resolve the faceted values from the server-side.
+
+```ts
+const facetingQuery = useQuery(
+  'faceting',
+  async () => {
+    const response = await fetch('/api/faceting');
+    return response.json();
+  },
+  {
+    onSuccess: (data) => {
+      table.getGlobalFacetedUniqueValues = () => data.uniqueValues;
+      table.getGlobalFacetedMinMaxValues = () => data.minMaxValues;
+    },
+  }
+);
+```
+
+In this example, we use the `useQuery` hook from `react-query` to fetch faceting data from the server. Once the data is fetched, we set the `getGlobalFacetedUniqueValues` and `getGlobalFacetedMinMaxValues` table options to return the faceted values from the server response. This will allow the table to use the server-side faceting data for generating autocomplete suggestions and range filters.
diff --git a/mintlify/table/guide/global-filtering.md b/mintlify/table/guide/global-filtering.md
new file mode 100644
index 000000000..e1c6bcd1f
--- /dev/null
+++ b/mintlify/table/guide/global-filtering.md
@@ -0,0 +1,198 @@
+---
+title: Global Filtering Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [filters](/table/framework/react/examples/filters)
+- [filters-fuzzy](/table/framework/react/examples/filters-fuzzy)
+
+## API
+
+[Global Filtering API](/table/api/features/global-filtering)
+
+## Global Filtering Guide
+
+Filtering comes in 2 flavors: Column Filtering and Global Filtering.
+
+This guide will focus on global filtering, which is a filter that is applied across all columns.
+
+### Client-Side vs Server-Side Filtering
+
+If you have a large dataset, you may not want to load all of that data into the client's browser in order to filter it. In this case, you will most likely want to implement server-side filtering, sorting, pagination, etc.
+
+However, as also discussed in the [Pagination Guide](/table/guide/pagination#should-you-use-client-side-pagination), a lot of developers underestimate how many rows can be loaded client-side without a performance hit. The TanStack table examples are often tested to handle up to 100,000 rows or more with decent performance for client-side filtering, sorting, pagination, and grouping. This doesn't necessarily mean that your app will be able to handle that many rows, but if your table is only going to have a few thousand rows at most, you might be able to take advantage of the client-side filtering, sorting, pagination, and grouping that TanStack table provides.
+
+> TanStack Table can handle thousands of client-side rows with good performance. Don't rule out client-side filtering, pagination, sorting, etc. without some thought first.
+
+Every use-case is different and will depend on the complexity of the table, how many columns you have, how large every piece of data is, etc. The main bottlenecks to pay attention to are:
+
+1. Can your server query all of the data in a reasonable amount of time (and cost)?
+2. What is the total size of the fetch? (This might not scale as badly as you think if you don't have many columns.)
+3. Is the client's browser using too much memory if all of the data is loaded at once?
+
+If you're not sure, you can always start with client-side filtering and pagination and then switch to server-side strategies in the future as your data grows.
+
+### Manual Server-Side Global Filtering
+
+If you have decided that you need to implement server-side global filtering instead of using the built-in client-side global filtering, here's how you do that.
+
+No `getFilteredRowModel` table option is needed for manual server-side global filtering. Instead, the `data` that you pass to the table should already be filtered. However, if you have passed a `getFilteredRowModel` table option, you can tell the table to skip it by setting the `manualFiltering` option to `true`.
+
+```jsx
+const table = useReactTable({
+  data,
+  columns,
+  // getFilteredRowModel: getFilteredRowModel(), // not needed for manual server-side global filtering
+  manualFiltering: true,
+})
+```
+
+Note: When using manual global filtering, many of the options that are discussed in the rest of this guide will have no effect. When manualFiltering is set to true, the table instance will not apply any global filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the data that you pass to it as-is.
+
+### Client-Side Global Filtering
+
+If you are using the built-in client-side global filtering, first you need to pass in a getFilteredRowModel function to the table options.
+
+```jsx
+import { useReactTable, getFilteredRowModel } from '@tanstack/react-table'
+//...
+const table = useReactTable({
+  // other options...
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(), // needed for client-side global filtering
+})
+```
+
+### Global Filter Function
+
+The globalFilterFn option allows you to specify the filter function that will be used for global filtering. The filter function can be a string that references a built-in filter function, a string that references a custom filter function provided via the tableOptions.filterFns option, or a custom filter function.
+
+```jsx
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  globalFilterFn: 'text' // built-in filter function
+})
+```
+
+By default there are 10 built-in filter functions to choose from:
+
+- includesString - Case-insensitive string inclusion
+- includesStringSensitive - Case-sensitive string inclusion
+- equalsString - Case-insensitive string equality
+- equalsStringSensitive - Case-sensitive string equality
+- arrIncludes - Item inclusion within an array
+- arrIncludesAll - All items included in an array
+- arrIncludesSome - Some items included in an array
+- equals - Object/referential equality Object.is/===
+- weakEquals - Weak object/referential equality ==
+- inNumberRange - Number range inclusion
+
+You can also define your own custom filter functions either as the globalFilterFn table option.
+
+### Global Filter State
+
+The global filter state is stored in the table's internal state and can be accessed via the table.getState().globalFilter property. If you want to persist the global filter state outside of the table, you can use the onGlobalFilterChange option to provide a callback function that will be called whenever the global filter state changes.
+
+```jsx
+const [globalFilter, setGlobalFilter] = useState<any>([])
+
+const table = useReactTable({
+  // other options...
+  state: {
+    globalFilter,
+  },
+  onGlobalFilterChange: setGlobalFilter
+})
+```
+
+The global filtering state is defined as an object with the following shape:
+
+```jsx
+interface GlobalFilter {
+  globalFilter: any
+}
+```
+
+### Adding global filter input to UI
+
+TanStack table will not add a global filter input UI to your table. You should manually add it to your UI to allow users to filter the table. For example, you can add an input UI above the table to allow users to enter a search term.
+
+```jsx
+return (
+  <div>
+    <input
+      value=""
+      onChange={e => table.setGlobalFilter(String(e.target.value))}
+      placeholder="Search..."
+    />
+  </div>
+)
+```
+
+### Custom Global Filter Function
+
+If you want to use a custom global filter function, you can define the function and pass it to the globalFilterFn option.
+
+> **Note:** It is often a popular idea to use fuzzy filtering functions for global filtering. This is discussed in the [Fuzzy Filtering Guide](/table/guide/fuzzy-filtering).
+
+```jsx
+const customFilterFn = (rows, columnId, filterValue) => {
+  // custom filter logic
+}
+
+const table = useReactTable({
+  // other options...
+  globalFilterFn: customFilterFn
+})
+```
+
+### Initial Global Filter State
+
+If you want to set an initial global filter state when the table is initialized, you can pass the global filter state as part of the table initialState option.
+
+However, you can also just specify the initial global filter state in the state.globalFilter option.
+
+```jsx
+const [globalFilter, setGlobalFilter] = useState("search term") //recommended to initialize globalFilter state here
+
+const table = useReactTable({
+  // other options...
+  initialState: {
+    globalFilter: 'search term', // if not managing globalFilter state, set initial state here
+  }
+  state: {
+    globalFilter, // pass our managed globalFilter state to the table
+  }
+})
+```
+
+> NOTE: Do not use both initialState.globalFilter and state.globalFilter at the same time, as the initialized state in the state.globalFilter will override the initialState.globalFilter.
+
+### Disable Global Filtering
+
+By default, global filtering is enabled for all columns. You can disable the global filtering for all columns by using the enableGlobalFilter table option. You can also turn off both column and global filtering by setting the enableFilters table option to false.
+
+Disabling global filtering will cause the column.getCanGlobalFilter API to return false for that column.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Id',
+    accessorKey: 'id',
+    enableGlobalFilter: false, // disable global filtering for this column
+  },
+  //...
+]
+//...
+const table = useReactTable({
+  // other options...
+  columns,
+  enableGlobalFilter: false, // disable global filtering for all columns
+})
+```
diff --git a/mintlify/table/guide/grouping.md b/mintlify/table/guide/grouping.md
new file mode 100644
index 000000000..5fc2bbc53
--- /dev/null
+++ b/mintlify/table/guide/grouping.md
@@ -0,0 +1,147 @@
+---
+title: Grouping Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [grouping](/table/framework/react/examples/grouping)
+
+## API
+
+[Grouping API](/table/api/features/grouping)
+
+## Grouping Guide
+
+There are 3 table features that can reorder columns, which happen in the following order:
+
+1. [Column Pinning](/table/guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
+2. Manual [Column Ordering](/table/guide/column-ordering) - A manually specified column order is applied.
+3. **Grouping** - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.
+
+Grouping in TanStack table is a feature that applies to columns and allows you to categorize and organize the table rows based on specific columns. This can be useful in cases where you have a large amount of data and you want to group them together based on certain criteria.
+
+To use the grouping feature, you will need to use the grouped row model. This model is responsible for grouping the rows based on the grouping state.
+
+```tsx
+import { getGroupedRowModel } from '@tanstack/react-table'
+
+const table = useReactTable({
+  // other options...
+  getGroupedRowModel: getGroupedRowModel(),
+})
+```
+
+When grouping state is active, the table will add matching rows as subRows to the grouped row. The grouped row will be added to the table rows at the same index as the first matching row. The matching rows will be removed from the table rows.
+To allow the user to expand and collapse the grouped rows, you can use the expanding feature.
+
+```tsx
+import { getGroupedRowModel, getExpandedRowModel} from '@tanstack/react-table'
+
+const table = useReactTable({
+  // other options...
+  getGroupedRowModel: getGroupedRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+})
+```
+
+### Grouping state
+
+The grouping state is an array of strings, where each string is the ID of a column to group by. The order of the strings in the array determines the order of the grouping. For example, if the grouping state is ['column1', 'column2'], then the table will first group by column1, and then within each group, it will group by column2. You can control the grouping state using the setGrouping function:
+
+```tsx
+table.setGrouping(['column1', 'column2']);
+```
+
+You can also reset the grouping state to its initial state using the resetGrouping function:
+
+```tsx
+table.resetGrouping();
+```
+
+By default, when a column is grouped, it is moved to the start of the table. You can control this behavior using the groupedColumnMode option. If you set it to 'reorder', then the grouped columns will be moved to the start of the table. If you set it to 'remove', then the grouped columns will be removed from the table. If you set it to false, then the grouped columns will not be moved or removed.
+
+```tsx
+const table = useReactTable({
+  // other options...
+  groupedColumnMode: 'reorder',
+})
+```
+
+### Aggregations
+
+When rows are grouped, you can aggregate the data in the grouped rows by columns using the aggregationFn option. This is a string that is the ID of the aggregation function. You can define the aggregation functions using the aggregationFns option.
+
+```tsx
+const column = columnHelper.accessor('key', {
+  aggregationFn: 'sum',
+})
+```
+
+In the above example, the sum aggregation function will be used to aggregate the data in the grouped rows.
+By default, numeric columns will use the sum aggregation function, and non-numeric columns will use the count aggregation function. You can override this behavior by specifying the aggregationFn option in the column definition.
+
+There are several built-in aggregation functions that you can use:
+
+- sum - Sums the values in the grouped rows.
+- count - Counts the number of rows in the grouped rows.
+- min - Finds the minimum value in the grouped rows.
+- max - Finds the maximum value in the grouped rows.
+- extent - Finds the extent (min and max) of the values in the grouped rows.
+- mean - Finds the mean of the values in the grouped rows.
+- median - Finds the median of the values in the grouped rows.
+- unique - Returns an array of unique values in the grouped rows.
+- uniqueCount - Counts the number of unique values in the grouped rows.
+
+#### Custom Aggregations
+
+When rows are grouped, you can aggregate the data in the grouped rows using the aggregationFns option. This is a record where the keys are the IDs of the aggregation functions, and the values are the aggregation functions themselves. You can then reference these aggregation functions in a column's aggregationFn option.
+
+```tsx
+const table = useReactTable({
+  // other options...
+  aggregationFns: {
+    myCustomAggregation: (columnId, leafRows, childRows) => {
+      // return the aggregated value
+    },
+  },
+})
+```
+
+In the above example, myCustomAggregation is a custom aggregation function that takes the column ID, the leaf rows, and the child rows, and returns the aggregated value. You can then use this aggregation function in a column's aggregationFn option:
+
+```tsx
+const column = columnHelper.accessor('key', {
+  aggregationFn: 'myCustomAggregation',
+})
+```
+
+### Manual Grouping
+
+If you are doing server-side grouping and aggregation, you can enable manual grouping using the manualGrouping option. When this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table.
+
+```tsx
+const table = useReactTable({
+  // other options...
+  manualGrouping: true,
+})
+```
+
+> **Note:** There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work.
+
+### Grouping Change Handler
+
+If you want to manage the grouping state yourself, you can use the onGroupingChange option. This option is a function that is called when the grouping state changes. You can pass the managed state back to the table via the tableOptions.state.grouping option.
+
+```tsx
+const [grouping, setGrouping] = useState<string[]>([])
+
+const table = useReactTable({
+  // other options...
+  state: {
+    grouping: grouping,
+  },
+  onGroupingChange: setGrouping
+})
+```
diff --git a/mintlify/table/guide/header-groups.md b/mintlify/table/guide/header-groups.md
new file mode 100644
index 000000000..1d0e40de6
--- /dev/null
+++ b/mintlify/table/guide/header-groups.md
@@ -0,0 +1,49 @@
+---
+title: Header Groups Guide
+---
+
+## API
+
+[Header Group API](/table/api/core/header-group)
+
+## Header Groups Guide
+
+This quick guide will discuss the different ways you can retrieve and interact with header group objects in TanStack Table.
+
+### What are Header Groups?
+
+Header Groups are simply "rows" of headers. Don't let the name confuse you, it's just that simple. The large majority of tables will only have one row of headers (a single header group), but if you define your column structure with nested columns as with the [Column Groups example](/table/framework/react/examples/column-groups), you can have multiple rows of headers (multiple header groups).
+
+### Where to Get Header Groups From
+
+There are multiple `table` instance APIs you can use to retrieve header groups from the table instance. `table.getHeaderGroups` is the most common API to use, but depending on the features that you are using, you may need to use other APIs, such as `table.get[Left/Center/Right]HeaderGroups` if you are using column pinning features.
+
+### Header Group Objects
+
+Header Group objects are similar to [Row](/table/guide/rows) objects, though simpler since there is not as much going on in header rows as there are in the body rows.
+
+By default, header groups only have three properties:
+
+- `id`: The unique identifier for the header group that is generated from its depth (index). This is useful as a key for React components.
+- `depth`: The depth of the header group, zero-indexed based. Think of this as the row index amongst all header rows.
+- `headers`: An array of [Header](/table/guide/headers) cell objects that belong to this header group (row).
+
+### Access Header Cells
+
+To render the header cells in a header group, you just map over the `headers` array from the header group object.
+
+```jsx
+<thead>
+  {table.getHeaderGroups().map(headerGroup => {
+    return (
+      <tr key={headerGroup.id}>
+        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
+          <th key={header.id} colSpan={header.colSpan}>
+            {/* */}
+          </th>
+        ))}
+      </tr>
+    )
+  })}
+</thead>
+```
diff --git a/mintlify/table/guide/headers.md b/mintlify/table/guide/headers.md
new file mode 100644
index 000000000..1d753c2af
--- /dev/null
+++ b/mintlify/table/guide/headers.md
@@ -0,0 +1,84 @@
+---
+title: Headers Guide
+---
+
+## API
+
+[Header API](/table/api/core/header)
+
+## Headers Guide
+
+This quick guide will discuss the different ways you can retrieve and interact with `header` objects in TanStack Table.
+
+Headers are the equivalent of cells, but meant for the `<thead>` section of the table instead of the `<tbody>` section.
+
+### Where to Get Headers From
+
+Headers come from [Header Groups](/table/guide/header-groups), which are the equivalent of rows, but meant for the `<thead>` section of the table instead of the `<tbody>` section.
+
+#### HeaderGroup Headers
+
+If you are in a header group, the headers are stored as an array in the `headerGroup.headers` property. Usually you will just map over this array to render your headers.
+
+```jsx
+<thead>
+  {table.getHeaderGroups().map(headerGroup => {
+    return (
+      <tr key={headerGroup.id}>
+        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
+          <th key={header.id} colSpan={header.colSpan}>
+            {/* */}
+          </th>
+        ))}
+      </tr>
+    )
+  })}
+</thead>
+```
+
+#### Header Table Instance APIs
+
+There are multiple `table` instance APIs that you can use to retrieve a list of headers depending on the features that you are using. The most common API you might use is `table.getFlatHeaders`, which will return a flat list of all headers in the table, but there are at least a dozen other headers that are useful in tandem with the column visibility and column pinning features. APIs like `table.getLeftLeafHeaders` or `table.getRightFlatHeaders` could be useful depending on your use case.
+
+### Header Objects
+
+Header objects are similar to [Cell](/table/guide/cells) objects, but meant for the `<thead>` section of the table instead of the `<tbody>` section. Every header object can be associated with a `<th>` or similar cell element in your UI. There are a few properties and methods on `header` objects that you can use to interact with the table state and extract cell values from the table based on the state of the table.
+
+#### Header IDs
+
+Every header object has an `id` property that makes it unique within the table instance. Usually you only need this `id` as a unique identifier for React keys or if you are following the [performant column resizing example](/table/framework/react/examples/column-resizing-performant).
+
+For simple headers with no advanced nested or grouped headers logic, the `header.id` will be the same as it's parent `column.id`. However, if the header is part group column or a placeholder cell, it will have a more complicated id that is constructed from the header family, depth/header row index, column id, and header group id.
+
+#### Nested Grouped Headers Properties
+
+There are a few properties on `header` objects that are only useful if the header is part of a nested or grouped header structure. These properties include:
+
+- `colspan`: The number of columns that the header should span. This is useful for rendering the `colSpan` attribute on the `<th>` element.
+- `rowSpan`: The number of rows that the header should span. This is useful for rendering the `rowSpan` attribute on the `<th>` element. (Currently not implemented in default TanStack Table)
+- `depth`: The header group "row index" that the header group belongs to.
+- `isPlaceholder`: A boolean flag that is true if the header is a placeholder header. Placeholder headers are used to fill in the gaps when a column is hidden or when a column is part of a group column.
+- `placeholderId`: The unique identifier for the placeholder header.
+- `subHeaders`: The array of sub/child headers that belong to this header. Will be empty if the header is a leaf header.
+
+> Note: `header.index` refers to its index within the header group (row of headers), i.e. its position from left to right. It is not the same as `header.depth`, which refers to the header group "row index".
+
+#### Header Parent Objects
+
+Every header stores a reference to its parent [column](/table/guide/columns) object and its parent [header group](/table/guide/header-groups) object.
+
+### More Header APIs
+
+Headers have a few more useful APIs attached to them that are useful for interacting with the table state. Most of them relate to the Column sizing and resizing features. See the [Column Sizing Guide](/table/guide/column-sizing) for more information.
+
+### Header Rendering
+
+Since the `header` column option you defined can be either a string, jsx, or a function returning either of those, the best way to render the headers is to use the `flexRender` utility from your adapter, which will handle all of those cases for you.
+
+```jsx
+{headerGroup.headers.map(header => (
+  <th key={header.id} colSpan={header.colSpan}>
+    {/* Handles all possible header column def scenarios for `header` */}
+    {flexRender(header.column.columnDef.header, header.getContext())}
+  </th>
+))}
diff --git a/mintlify/table/guide/migrating.md b/mintlify/table/guide/migrating.md
new file mode 100644
index 000000000..1aae1c911
--- /dev/null
+++ b/mintlify/table/guide/migrating.md
@@ -0,0 +1,195 @@
+---
+title: Migrating to V8 Guide
+---
+
+## Migrating to V8
+
+TanStack Table V8 was a major rewrite of React Table v7 from the ground up in TypeScript. The overall structure/organization of your markup and CSS will largely remain the same, but many of the APIs have been renamed or replaced.
+
+### Notable Changes
+
+- Full rewrite to TypeScript with types included in the base package
+- Removal of plugin system to favor more inversion of control
+- Vastly larger and improved API (and new features like pinning)
+- Better controlled state management
+- Better support for server-side operations
+- Complete (but optional) data pipeline control
+- Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future
+- New Dev Tools
+
+### Install the new Version
+
+The new version of TanStack Table is published under the `@tanstack` scope. Install the new package using your favorite package manager:
+
+```bash
+npm uninstall react-table @types/react-table
+npm install @tanstack/react-table
+```
+
+```tsx
+- import { useTable } from 'react-table' // [!code --]
++ import { useReactTable } from '@tanstack/react-table' // [!code ++]
+```
+
+Types are now included in the base package, so you can remove the `@types/react-table` package.
+
+> If you want, you can keep the old `react-table` packages installed so that you can gradually migrate your code. You should be able to use both packages side-by-side for separate tables without any issues.
+
+### Update Table Options
+
+- Rename `useTable` to `useReactTable`
+- The old hook and plugin systems have been removed, but they have replaced with tree-shakable row model imports for each feature.
+
+```tsx
+- import { useTable, usePagination, useSortBy } from 'react-table'; // [!code --]
++ import { // [!code ++]
++   useReactTable, // [!code ++]
++   getCoreRowModel, // [!code ++]
++   getPaginationRowModel, // [!code ++]
++   getSortedRowModel // [!code ++]
++ } from '@tanstack/react-table'; // [!code ++]
+
+// ...
+
+-   const tableInstance = useTable( // [!code --]
+-     { columns,  data }, // [!code --]
+-     useSortBy, // [!code --]
+-     usePagination, //order of hooks used to matter // [!code --]
+-     // etc. // [!code --]
+-   ); // [!code --]
++   const tableInstance = useReactTable({ // [!code ++]
++     columns, // [!code ++]
++     data, // [!code ++]
++     getCoreRowModel: getCoreRowModel(), // [!code ++]
++     getPaginationRowModel: getPaginationRowModel(), // [!code ++]
++     getSortedRowModel: getSortedRowModel(), //order doesn't matter anymore! // [!code ++]
++     // etc. // [!code ++]
++   }); // [!code ++]
+```
+
+- All `disable*` table options were renamed to `enable*` table options. (e.g. `disableSortBy` is now `enableSorting`, `disableGroupBy` is now `enableGrouping`, etc.)
+- ...
+
+### Update column definitions
+
+- accessor was renamed to either `accessorKey` or `accessorFn` (depending on whether you are using a string or function)
+- width, minWidth, maxWidth were renamed to size, minSize, maxSize
+- Optionally, you can use the new `createColumnHelper` function around each column definition for better TypeScript hints. (You can still just use an array of column definitions if you prefer.)
+  - The first parameter is the accessor function or accessor string.
+  - The second parameter is an object of column options.
+
+```tsx
+const columns = [
+-  { // [!code --]
+-    accessor: 'firstName', // [!code --]
+-    Header: 'First Name', // [!code --]
+-  }, // [!code --]
+-  { // [!code --]
+-    accessor: row => row.lastName, // [!code --]
+-    Header: () => <span>Last Name</span>, // [!code --]
+-  }, // [!code --]
+
+// Best TypeScript experience, especially when using `cell.getValue()` later on
++  columnHelper.accessor('firstName', { //accessorKey // [!code ++]
++    header: 'First Name', // [!code ++]
++  }), // [!code ++]
++  columnHelper.accessor(row => row.lastName, { //accessorFn // [!code ++]
++    header: () => <span>Last Name</span>, // [!code ++]
++  }), // [!code ++]
+
+// OR (if you prefer)
++ { // [!code ++]
++   accessorKey: 'firstName', // [!code ++]
++   header: 'First Name', // [!code ++]
++ }, // [!code ++]
++ { // [!code ++]
++   accessorFn: row => row.lastName, // [!code ++]
++   header: () => <span>Last Name</span>, // [!code ++]
++ }, // [!code ++]
+]
+```
+
+> Note: If defining columns inside a component, you should still try to give the column definitions a stable identity. This will help with performance and prevent unnecessary re-renders. Store the column definitions in either a `useMemo` or `useState` hook.
+
+- Column Option Name Changes
+
+  - `Header` was renamed to `header`
+  - `Cell` was renamed to `cell` (The cell render function has also changed. See below)
+  - `Footer` was renamed to `footer`
+  - All `disable*` column options were renamed to `enable*` column options. (e.g. `disableSortBy` is now `enableSorting`, `disableGroupBy` is now `enableGrouping`, etc.)
+  - `sortType` `sortingFn`
+  - ...
+
+- Changes to custom cell renderers
+
+  - `value` was renamed `getValue` (Throughout the upgrade, instead of providing the value directly, a function `getValue` is exposed for evaluating the value. This change aims to improve performance by evaluating the value only when `getValue()` is called and then caching it.)
+  - `cell: { isGrouped, isPlaceholder, isAggregated }` is now `cell: { getIsGrouped, getIsPlaceholder, getIsAggregated }`
+  - `column`: The base level props are now RT-specific. Values that you added to the object when defining it are now one level deeper in `columnDef`.
+  - `table`: Props passed into the `useTable` hook now appear under `options`.
+
+### Migrate Table Markup
+
+- Use `flexRender()` instead of `cell.render('Cell')` or `column.render('Header')`, etc.
+- `getHeaderProps`, `getFooterProps`, `getCellProps`, `getRowProps`, etc. have all been _deprecated_.
+  - TanStack Table does not provide any default `style` or accessibility attributes like `role` anymore. These are still important for you to get right, but it had to be removed in order to support being framework-agnostic.
+  - You will need to define `onClick` handlers manually, but there are new `get*Handler` helpers to keep this simple.
+  - You will need to define the `key` props manually
+  - You will need to define the `colSpan` prop manually if using features that require it (grouped headers, aggregation, etc.)
+
+```tsx
+- <th {...header.getHeaderProps()}>{cell.render('Header')}</th> // [!code --]
++ <th colSpan={header.colSpan} key={column.id}> // [!code ++]
++   {flexRender( // [!code ++]
++     header.column.columnDef.header, // [!code ++]
++     header.getContext() // [!code ++]
++   )} // [!code ++]
++ </th> // [!code ++]
+```
+
+```tsx
+- <td {...cell.getCellProps()}>{cell.render('Cell')}</td> // [!code --]
++ <td key={cell.id}> // [!code ++]
++   {flexRender( // [!code ++]
++     cell.column.columnDef.cell, // [!code ++]
++     cell.getContext() // [!code ++]
++   )} // [!code ++]
++ </td> // [!code ++]
+```
+
+```tsx
+// in column definitions in this case
+- Header: ({ getToggleAllRowsSelectedProps }) => ( // [!code --]
+-   <input type="checkbox" {...getToggleAllRowsSelectedProps()} /> // [!code --]
+- ), // [!code --]
+- Cell: ({ row }) => ( // [!code --]
+-   <input type="checkbox" {...row.getToggleRowSelectedProps()} /> // [!code --]
+- ), // [!code --]
++ header: ({ table }) => ( // [!code ++]
++   <Checkbox // [!code ++]
++     checked={table.getIsAllRowsSelected()} // [!code ++]
++     indeterminate={table.getIsSomeRowsSelected()} // [!code ++]
++     onChange={table.getToggleAllRowsSelectedHandler()} // [!code ++]
++   /> // [!code ++]
++ ), // [!code ++]
++ cell: ({ row }) => ( // [!code ++]
++   <Checkbox // [!code ++]
++     checked={row.getIsSelected()} // [!code ++]
++     disabled={!row.getCanSelect()} // [!code ++]
++     indeterminate={row.getIsSomeSelected()} // [!code ++]
++     onChange={row.getToggleSelectedHandler()} // [!code ++]
++   /> // [!code ++]
++ ), // [!code ++]
+```
+
+### Other Changes
+
+- custom `filterTypes` (now called `filterFns`) have a new function signature as it only returns a boolean for whether the row should be included or not.
+
+```tsx
+- (rows: Row[], id: string, filterValue: any) => Row[] // [!code --]
++ (row: Row, id: string, filterValue: any) => boolean // [!code ++]
+```
+
+- ...
+
+> This guide is a work in progress. Please consider contributing to it if you have time!
diff --git a/mintlify/table/guide/pagination.md b/mintlify/table/guide/pagination.md
new file mode 100644
index 000000000..ff492f6f4
--- /dev/null
+++ b/mintlify/table/guide/pagination.md
@@ -0,0 +1,222 @@
+---
+title: Pagination Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [pagination](/table/framework/react/examples/pagination)
+- [pagination-controlled (React Query)](/table/framework/react/examples/pagination-controlled)
+- [editable-data](/table/framework/react/examples/editable-data)
+- [expanding](/table/framework/react/examples/expanding)
+- [filters](/table/framework/react/examples/filters)
+- [fully-controlled](/table/framework/react/examples/fully-controlled)
+- [row-selection](/table/framework/react/examples/row-selection)
+
+## API
+
+[Pagination API](/table/api/features/pagination)
+
+## Pagination Guide
+
+TanStack Table has great support for both client-side and server-side pagination. This guide will walk you through the different ways to implement pagination in your table.
+
+### Client-Side Pagination
+
+Using client-side pagination means that the `data` that you fetch will contain ***ALL*** of the rows for the table, and the table instance will handle pagination logic in the front-end.
+
+#### Should You Use Client-Side Pagination?
+
+Client-side pagination is usually the simplest way to implement pagination when using TanStack Table, but it might not be practical for very large datasets.
+
+However, a lot of people underestimate just how much data can be handled client-side. If your table will only ever have a few thousand rows or less, client-side pagination can still be a viable option. TanStack Table is designed to scale up to 10s of thousands of rows with decent performance for pagination, filtering, sorting, and grouping. The [official pagination example](/table/framework/react/examples/pagination) loads 100,000 rows and still performs well, albeit with only handful of columns.
+
+Every use-case is different and will depend on the complexity of the table, how many columns you have, how large every piece of data is, etc. The main bottlenecks to pay attention to are:
+
+1. Can your server query all of the data in a reasonable amount of time (and cost)?
+2. What is the total size of the fetch? (This might not scale as badly as you think if you don't have many columns.)
+3. Is the client's browser using too much memory if all of the data is loaded at once?
+
+If you're not sure, you can always start with client-side pagination and then switch to server-side pagination in the future as your data grows.
+
+#### Should You Use Virtualization Instead?
+
+Alternatively, instead of paginating the data, you can render all rows of a large dataset on the same page, but only use the browser's resources to render the rows that are visible in the viewport. This strategy is often called "virtualization" or "windowing". TanStack offers a virtualization library called [TanStack Virtual](https://tanstack.com/virtual/latest) that can work well with TanStack Table. The UI/UX of both virtualization and pagination have their own trade-offs, so see which one works best for your use-case.
+
+#### Pagination Row Model
+
+If you want to take advantage of the built-in client-side pagination in TanStack Table, you first need to pass in the pagination row model.
+
+```jsx
+import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(), //load client-side pagination code
+});
+```
+
+### Manual Server-Side Pagination
+
+If you decide that you need to use server-side pagination, here is how you can implement it.
+
+No pagination row model is needed for server-side pagination, but if you have provided it for other tables that do need it in a shared component, you can still turn off the client-side pagination by setting the `manualPagination` option to `true`. Setting the `manualPagination` option to `true` will tell the table instance to use the `table.getPrePaginationRowModel` row model under the hood, and it will make the table instance assume that the `data` that you pass in is already paginated.
+
+#### Page Count and Row Count
+
+The table instance will have no way of knowing how many rows/pages there are in total in your back-end unless you tell it. Provide either the `rowCount` or `pageCount` table option to let the table instance know how many pages there are in total. If you provide a `rowCount`, the table instance will calculate the `pageCount` internally from `rowCount` and `pageSize`. Otherwise, you can directly provide the `pageCount` if you already have it. If you don't know the page count, you can just pass in `-1` for the `pageCount`, but the `getCanNextPage` and `getCanPreviousPage` row model functions will always return `true` in this case.
+
+```jsx
+import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  // getPaginationRowModel: getPaginationRowModel(), //not needed for server-side pagination
+  manualPagination: true, //turn off client-side pagination
+  rowCount: dataQuery.data?.rowCount, //pass in the total row count so the table knows how many pages there are (pageCount calculated internally if not provided)
+  // pageCount: dataQuery.data?.pageCount, //alternatively directly pass in pageCount instead of rowCount
+});
+```
+
+> **Note**: Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated.
+
+### Pagination State
+
+Whether or not you are using client-side or manual server-side pagination, you can use the built-in `pagination` state and APIs.
+
+The `pagination` state is an object that contains the following properties:
+
+- `pageIndex`: The current page index (zero-based).
+- `pageSize`: The current page size.
+
+You can manage the `pagination` state just like any other state in the table instance.
+
+```jsx
+import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
+//...
+const [pagination, setPagination] = useState({
+  pageIndex: 0, //initial page index
+  pageSize: 10, //default page size
+});
+
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  onPaginationChange: setPagination, //update the pagination state when internal APIs mutate the pagination state
+  state: {
+    //...
+    pagination,
+  },
+});
+```
+
+Alternatively, if you have no need for managing the `pagination` state in your own scope, but you need to set different initial values for the `pageIndex` and `pageSize`, you can use the `initialState` option.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageIndex: 2, //custom initial page index
+      pageSize: 25, //custom default page size
+    },
+  },
+});
+```
+
+> **Note**: Do NOT pass the `pagination` state to both the `state` and `initialState` options. `state` will overwrite `initialState`. Only use one or the other.
+
+### Pagination Options
+
+Besides the `manualPagination`, `pageCount`, and `rowCount` options which are useful for manual server-side pagination (and discussed [above](#manual-server-side-pagination)), there is one other table option that is useful to understand.
+
+#### Auto Reset Page Index
+
+By default, `pageIndex` is reset to `0` when page-altering state changes occur, such as when the `data` is updated, filters change, grouping changes, etc. This behavior is automatically disabled when `manualPagination` is true but it can be overridden by explicitly assigning a boolean value to the `autoResetPageIndex` table option.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  autoResetPageIndex: false, //turn off auto reset of pageIndex
+});
+```
+
+Be aware, however, that if you turn off `autoResetPageIndex`, you may need to add some logic to handle resetting the `pageIndex` yourself to avoid showing empty pages.
+
+### Pagination APIs
+
+There are several pagination table instance APIs that are useful for hooking up your pagination UI components.
+
+#### Pagination Button APIs
+
+- `getCanPreviousPage`: Useful for disabling the "previous page" button when on the first page.
+- `getCanNextPage`: Useful for disabling the "next page" button when there are no more pages.
+- `previousPage`: Useful for going to the previous page. (Button click handler)
+- `nextPage`: Useful for going to the next page. (Button click handler)
+- `firstPage`: Useful for going to the first page. (Button click handler)
+- `lastPage`: Useful for going to the last page. (Button click handler)
+- `setPageIndex`: Useful for a "go to page" input.
+- `resetPageIndex`: Useful for resetting the table state to the original page index.
+- `setPageSize`: Useful for a "page size" input/select.
+- `resetPageSize`: Useful for resetting the table state to the original page size.
+- `setPagination`: Useful for setting all of the pagination state at once.
+- `resetPagination`: Useful for resetting the table state to the original pagination state.
+
+> **Note**: Some of these APIs are new in `v8.13.0`.
+
+```jsx
+<Button
+  onClick={() => table.firstPage()}
+  disabled={!table.getCanPreviousPage()}
+>
+  {'<<'}
+</Button>
+<Button
+  onClick={() => table.previousPage()}
+  disabled={!table.getCanPreviousPage()}
+>
+  {'<'}
+</Button>
+<Button
+  onClick={() => table.nextPage()}
+  disabled={!table.getCanNextPage()}
+>
+  {'>'}
+</Button>
+<Button
+  onClick={() => table.lastPage()}
+  disabled={!table.getCanNextPage()}
+>
+  {'>>'}
+</Button>
+<select
+  value={table.getState().pagination.pageSize}
+  onChange={e => {
+    table.setPageSize(Number(e.target.value))
+  }}
+>
+  {[10, 20, 30, 40, 50].map(pageSize => (
+    <option key={pageSize} value={pageSize}>
+      {pageSize}
+    </option>
+  ))}
+</select>
+```
+
+#### Pagination Info APIs
+
+- `getPageCount`: Useful for showing the total number of pages.
+- `getRowCount`: Useful for showing the total number of rows.
diff --git a/mintlify/table/guide/pinning.md b/mintlify/table/guide/pinning.md
new file mode 100644
index 000000000..2b892c481
--- /dev/null
+++ b/mintlify/table/guide/pinning.md
@@ -0,0 +1,10 @@
+---
+title: Pinning Guide
+---
+
+
+
+Pinning is split into 2 different feature guides:
+
+- [Column Pinning](/table/guide/column-pinning)
+- [Row Pinning](/table/guide/row-pinning)
\ No newline at end of file
diff --git a/mintlify/table/guide/row-models.md b/mintlify/table/guide/row-models.md
new file mode 100644
index 000000000..7d5ec717a
--- /dev/null
+++ b/mintlify/table/guide/row-models.md
@@ -0,0 +1,122 @@
+---
+title: Row Models Guide
+---
+
+## Row Models Guide
+
+If you take a look at the most basic example of TanStack Table, you'll see a code snippet like this:
+
+```ts
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
+
+function Component() {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(), //row model
+  })
+}
+```
+
+What is this `getCoreRowModel` function? And why do you have to import it from TanStack Table only to just pass it back to itself?
+
+Well, the answer is that TanStack Table is a modular library. Not all code for every single feature is included in the createTable functions/hooks by default. You only need to import and include the code that you will need to correctly generate rows based on the features you want to use.
+
+### What are Row Models?
+
+Row models run under the hood of TanStack Table to transform your original data in useful ways that are needed for data grid features like filtering, sorting, grouping, expanding, and pagination. The rows that get generated and render on screen won't necessarily be a 1:1 mapping of the original data that you passed to the table. They may be sorted, filtered, paginated, etc.
+
+### Import Row Models
+
+You should only import the row models that you need. Here are all of the row models that are available:
+
+```ts
+//only import the row models you need
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+}
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  getFacetedMinMaxValues: getFacetedMinMaxValues(),
+  getFacetedRowModel: getFacetedRowModel(),
+  getFacetedUniqueValues: getFacetedUniqueValues(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getGroupedRowModel: getGroupedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+})
+```
+
+### Customize/Fork Row Models
+
+You don't have to use the exact row models that are provided by TanStack Table. If you need some advanced customization for certain row models, feel free to copy the [source code](https://github.com/TanStack/table/tree/main/packages/table-core/src/utils) for the row model you want to customize and modify it to your needs.
+
+### Using Row Models
+
+Once your table instance has been created, you can access all of the row models that you may need directly from the table instance. There are even more derived row models available apart from the ones that you may have imported.
+
+For normal rendering use cases, you will probably only need to use the `table.getRowModel()` method, as this row model will use all/any of the other row models depending on which features you have enabled or disabled. All of the other row models are available for you to "dig into" some of the underlying data transformations that are happening in the table.
+
+### Available Row Models on Table Instance
+
+- **`getRowModel`** - This is the main row model that you should use for rendering your table rows markup. It will use all of the other row models to generate the final row model that you will use to render your table rows.
+
+- `getCoreRowModel` - returns a basic row model that is just a 1:1 mapping of the original data passed to the table.
+
+- `getFilteredRowModel` - returns a row model that accounts for column filtering and global filtering.
+- `getPreFilteredRowModel` - returns a row model before column filtering and global filtering are applied.
+
+- `getGroupedRowModel` - returns a row model that applies grouping and aggregation to the data and creates sub-rows.
+- `getPreGroupedRowModel` - returns a row model before grouping and aggregation are applied.
+
+- `getSortedRowModel` - returns a row model that has had sorting applied to it.
+- `getPreSortedRowModel` - returns a row model before sorting is applied (rows are in original order).
+
+- `getExpandedRowModel` - returns a row model that accounts for expanded/hidden sub-rows.
+- `getPreExpandedRowModel` - returns a row model that only includes root level rows with no expanded sub-rows included. Still includes sorting.
+
+- `getPaginationRowModel` - returns a row model that only includes the rows that should be displayed on the current page based on the pagination state.
+- `getPrePaginationRowModel` - returns a row model without pagination applied (includes all rows).
+
+- `getSelectedRowModel` - returns a row model of all selected rows (but only based on the data that was passed to the table). Runs after getCoreRowModel.
+- `getPreSelectedRowModel` - returns a row model before row selection is applied (Just returns getCoreRowModel).
+- `getGroupedSelectedRowModel` - returns a row model of selected rows after grouping. Runs after getSortedRowModel, which runs after getGroupedRowModel, which runs after getFilteredRowModel.
+- `getFilteredSelectedRowModel` - returns a row model of selected rows after column filtering and global filtering. Runs after getFilteredRowModel.
+
+### The Order of Row Model Execution
+
+Knowing how TanStack Table processes rows internally can help you gain a better understanding of what is happening under the hood, and help you debug any issues you may encounter.
+
+Internally, this is the order in which each of the row models are applied to the data, if their respective features are enabled:
+
+`getCoreRowModel` -> `getFilteredRowModel` -> `getGroupedRowModel` -> `getSortedRowModel` -> `getExpandedRowModel` -> `getPaginationRowModel` -> `getRowModel`
+
+If in any case the respective feature is disabled or turned off with a `"manual*"` table option, the `getPre*RowModel` will be used instead in that step of the process.
+
+As you can see above, first the data is filtered, then grouped, then sorted, then expanded, and then finally paginated as the final step.
+
+### Row Model Data Structure
+
+Each row model will provide you the rows in 3 different useful formats:
+
+1. `rows` - An array of rows.
+2. `flatRows` - An array of rows, but all sub-rows are flattened into the top level.
+3. `rowsById` - An object of rows, where each row is keyed by its `id`. This is useful for quickly looking up rows by their `id` with better performance.
+
+```ts
+console.log(table.getRowModel().rows) // array of rows
+console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level
+console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id`
+```
\ No newline at end of file
diff --git a/mintlify/table/guide/row-pinning.md b/mintlify/table/guide/row-pinning.md
new file mode 100644
index 000000000..aca7c8c29
--- /dev/null
+++ b/mintlify/table/guide/row-pinning.md
@@ -0,0 +1,20 @@
+---
+title: Row Pinning Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [row-pinning](/table/framework/react/examples/row-pinning)
+
+## API
+
+[Row Pinning API](/table/api/features/row-pinning)
+
+## Row Pinning Guide
+
+There are 2 table features that can reorder rows, which happen in the following order:
+
+1. **Row Pinning** - If pinning, rows are split into top, center (unpinned), and bottom pinned rows.
+2. [Sorting](/table/guide/sorting)
diff --git a/mintlify/table/guide/row-selection.md b/mintlify/table/guide/row-selection.md
new file mode 100644
index 000000000..d624d21fd
--- /dev/null
+++ b/mintlify/table/guide/row-selection.md
@@ -0,0 +1,184 @@
+---
+title: Row Selection Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [React row-selection](/table/framework/react/examples/row-selection)
+- [Vue row-selection](/table/framework/vue/examples/row-selection)
+- [React expanding](/table/framework/react/examples/expanding)
+
+## API
+
+[Row Selection API](/table/api/features/row-selection)
+
+## Row Selection Guide
+
+The row selection feature keeps track of which rows are selected and allows you to toggle the selection of rows in a myriad of ways. Let's take a look at some common use cases.
+
+### Access Row Selection State
+
+The table instance already manages the row selection state for you (though as seen down below, it may be more convenient to manage the row selection state in your own scope). You can access the internal row selection state or the selected rows from a few APIs.
+
+- `getState().rowSelection` - returns the internal row selection state
+- `getSelectedRowModel()` - returns selected rows
+- `getFilteredSelectedRowModel()` - returns selected rows after filtering
+- `getGroupedSelectedRowModel()` - returns selected rows after grouping and sorting
+
+```ts
+console.log(table.getState().rowSelection) //get the row selection state - { 1: true, 2: false, etc... }
+console.log(table.getSelectedRowModel().rows) //get full client-side selected rows
+console.log(table.getFilteredSelectedRowModel().rows) //get filtered client-side selected rows
+console.log(table.getGroupedSelectedRowModel().rows) //get grouped client-side selected rows
+```
+
+> Note: If you are using `manualPagination`, be aware that the `getSelectedRowModel` API will only return selected rows on the current page because table row models can only generate rows based on the `data` that is passed in. Row selection state, however, can contain row ids that are not present in the `data` array just fine.
+
+### Manage Row Selection State
+
+Even though the table instance will already manage the row selection state for you, it is usually more convenient to manage the state yourself in order to have easy access to the selected row ids that you can use to make API calls or other actions.
+
+Use the `onRowSelectionChange` table option to hoist up the row selection state to your own scope. Then pass the row selection state back to the table instance using in the `state` table option.
+
+```ts
+const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) //manage your own row selection state
+
+const table = useReactTable({
+  //...
+  onRowSelectionChange: setRowSelection, //hoist up the row selection state to your own scope
+  state: {
+    rowSelection, //pass the row selection state back to the table instance
+  },
+})
+```
+
+### Useful Row Ids
+
+By default, the row id for each row is simply the `row.index`. If you are using row selection features, you most likely want to use a more useful row identifier, since the row selection state is keyed by row id. You can use the `getRowId` table option to specify a function that returns a unique row id for each row.
+
+```ts
+const table = useReactTable({
+  //...
+  getRowId: row => row.uuid, //use the row's uuid from your database as the row id
+})
+```
+
+Now as rows are selected, the row selection state will look something like this:
+
+```json
+{
+  "13e79140-62a8-4f9c-b087-5da737903b76": true,
+  "f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
+  //...
+}
+```
+
+instead of this:
+
+```json
+{
+  "0": true,
+  "1": false
+  //...
+}
+```
+
+### Enable Row Selection Conditionally
+
+Row selection is enabled by default for all rows. To either enable row selection conditionally for certain rows or disable row selection for all rows, you can use the `enableRowSelection` table option which accepts either a boolean or a function for more granular control.
+
+```ts
+const table = useReactTable({
+  //...
+  enableRowSelection: row => row.original.age > 18, //only enable row selection for adults
+})
+```
+
+To enforce whether a row is selectable or not in your UI, you can use the `row.getCanSelect()` API for your checkboxes or other selection UI.
+
+### Single Row Selection
+
+By default, the table allows multiple rows to be selected at once. If, however, you only want to allow a single row to be selected at once, you can set the `enableMultiRowSelection` table option to `false` to disable multi-row selection, or pass in a function to disable multi-row selection conditionally for a row's sub-rows.
+
+This is useful for making tables that have radio buttons instead of checkboxes.
+
+```ts
+const table = useReactTable({
+  //...
+  enableMultiRowSelection: false, //only allow a single row to be selected at once
+  // enableMultiRowSelection: row => row.original.age > 18, //only allow a single row to be selected at once for adults
+})
+```
+
+### Sub-Row Selection
+
+By default, selecting a parent row will select all of its sub-rows. If you want to disable auto sub-row selection, you can set the `enableSubRowSelection` table option to `false` to disable sub-row selection, or pass in a function to disable sub-row selection conditionally for a row's sub-rows.
+
+```ts
+const table = useReactTable({
+  //...
+  enableSubRowSelection: false, //disable sub-row selection
+  // enableSubRowSelection: row => row.original.age > 18, //disable sub-row selection for adults
+})
+```
+
+### Render Row Selection UI
+
+TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI.
+
+#### Connect Row Selection APIs to Checkbox Inputs
+
+TanStack Table provides some handler functions that you can connect directly to your checkbox inputs to make it easy to toggle row selection. These function automatically call other internal APIs to update the row selection state and re-render the table.
+
+Use the `row.getToggleSelectedHandler()` API to connect to your checkbox inputs to toggle the selection of a row.
+
+Use the `table.getToggleAllRowsSelectedHandler()` or `table.getToggleAllPageRowsSelectedHandler` APIs to connect to your "select all" checkbox input to toggle the selection of all rows.
+
+If you need more granular control over these function handlers, you can always just use the `row.toggleSelected()` or `table.toggleAllRowsSelected()` APIs directly. Or you can even just call the `table.setRowSelection()` API to directly set the row selection state just as you would with any other state updater. These handler functions are just a convenience.
+
+```tsx
+const columns = [
+  {
+    id: 'select-col',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onChange={row.getToggleSelectedHandler()}
+      />
+    ),
+  },
+  //... more column definitions...
+]
+```
+
+#### Connect Row Selection APIs to UI
+
+If you want a simpler row selection UI, you can just hook up click events to the row itself. The `row.getToggleSelectedHandler()` API is also useful for this use case.
+
+```tsx
+<tbody>
+  {table.getRowModel().rows.map(row => {
+    return (
+      <tr
+        key={row.id}
+        className={row.getIsSelected() ? 'selected' : null}
+        onClick={row.getToggleSelectedHandler()}
+      >
+        {row.getVisibleCells().map(cell => {
+          return <td key={cell.id}>{/* */}</td>
+        })}
+      </tr>
+    )
+  })}
+</tbody>
+```
diff --git a/mintlify/table/guide/rows.md b/mintlify/table/guide/rows.md
new file mode 100644
index 000000000..5f71e2e45
--- /dev/null
+++ b/mintlify/table/guide/rows.md
@@ -0,0 +1,97 @@
+---
+title: Rows Guide
+---
+
+## API
+
+[Row API](/table/api/core/row)
+
+## Rows Guide
+
+This quick guide will discuss the different ways you can retrieve and interact with row objects in TanStack Table.
+
+### Where to Get Rows From
+
+There are multiple `table` instance APIs you can use to retrieve rows from the table instance.
+
+#### table.getRow
+
+If you need to access a specific row by its `id`, you can use the `table.getRow` table instance API.
+
+```js
+const row = table.getRow(rowId)
+```
+
+#### Row Models
+
+The `table` instance generates `row` objects and stores them in useful arrays called ["Row Models"](/table/guide/row-models). This is discussed in much more detail in the [Row Models Guide](/table/guide/row-models), but here are the most common ways you may access the row models.
+
+##### Render Rows
+
+```jsx
+<tbody>
+  {table.getRowModel().rows.map(row => (
+    <tr key={row.id}>
+     {/* ... */}
+    </tr>
+  ))}
+</tbody>
+```
+
+##### Get Selected Rows
+
+```js
+const selectedRows = table.getSelectedRowModel().rows
+```
+
+### Row Objects
+
+Every row object contains row data and many APIs to either interact with the table state or extract cells from the row based on the state of the table.
+
+#### Row IDs
+
+Every row object has an `id` property that makes it unique within the table instance. By default the `row.id` is the same as the `row.index` that is created in the row model. However, it can be useful to override each row's `id` with a unique identifier from the row's data. You can use the `getRowId` table option to do this.
+
+```js
+const table = useReactTable({
+  columns,
+  data,
+  getRowId: originalRow => originalRow.uuid, //override the row.id with the uuid from the original row's data
+})
+```
+
+> Note: In some features like grouping and expanding, the `row.id` will have additional string appended to it.
+
+#### Access Row Values
+
+The recommended way to access data values from a row is to use either the `row.getValue` or `row.renderValue` APIs. Using either of these APIs will cache the results of the accessor functions and keep rendering efficient. The only difference between the two is that `row.renderValue` will return either the value or the `renderFallbackValue` if the value is undefined, whereas `row.getValue` will return the value or `undefined` if the value is undefined.
+
+```js
+// Access data from any of the columns
+const firstName = row.getValue('firstName') // read the row value from the firstName column
+const renderedLastName = row.renderValue('lastName') // render the value from the lastName column
+```
+
+> Note: `cell.getValue` and `cell.renderValue` are shortcuts for the `row.getValue` and `row.renderValue` APIs, respectively.
+
+#### Access Original Row Data
+
+For every row object, you can access the original corresponding `data` that was passed to the table instance via the `row.original` property. None of the data in the `row.original` will have been modified by the accessors in your column definitions, so if you were doing any sort of data transformations in your accessors, those will not be reflected in the `row.original` object.
+
+```js
+// Access any data from the original row
+const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }
+```
+
+### Sub Rows
+
+If you are using either grouping or expanding features, your rows may contain sub-rows or parent row references. This is discussed in much more detail in the [Expanding Guide](/table/guide/expanding), but here is a quick overview of useful properties and methods for working with sub-rows.
+
+- `row.subRows`: An array of sub-rows for the row.
+- `row.depth`: The depth of the row (if nested or grouped) relative to the root row array. 0 for root level rows, 1 for child rows, 2 for grandchild rows, etc.
+- `row.parentId`: The unique ID of the parent row for the row (The row that contains this row in its subRows array).
+- `row.getParentRow`: Returns the parent row for the row, if it exists.
+
+### More Row APIs
+
+Depending on the features that you are using for your table, there are dozens more useful APIs for interacting with rows. See each features' respective API docs or guide for more information.
diff --git a/mintlify/table/guide/sorting.md b/mintlify/table/guide/sorting.md
new file mode 100644
index 000000000..34df2b7f8
--- /dev/null
+++ b/mintlify/table/guide/sorting.md
@@ -0,0 +1,415 @@
+---
+title: Sorting Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [sorting](/table/framework/react/examples/sorting)
+- [filters](/table/framework/react/examples/filters)
+
+## API
+
+[Sorting API](/table/api/features/sorting)
+
+## Sorting Guide
+
+TanStack Table provides solutions for just about any sorting use-case you might have. This guide will walk you through the various options that you can use to customize the built-in client-side sorting functionality, as well as how to opt out of client-side sorting in favor of manual server-side sorting.
+
+### Sorting State
+
+The sorting state is defined as an array of objects with the following shape:
+
+```tsx
+type ColumnSort = {
+  id: string
+  desc: boolean
+}
+type SortingState = ColumnSort[]
+```
+
+Since the sorting state is an array, it is possible to sort by multiple columns at once. Read more about the multi-sorting customizations down [below](#multi-sorting).
+
+#### Accessing Sorting State
+
+You can access the sorting state directly from the table instance just like any other state using the `table.getState()` API.
+
+```tsx
+const table = useReactTable({
+  columns,
+  data,
+  //...
+})
+
+console.log(table.getState().sorting) // access the sorting state from the table instance
+```
+
+However, if you need to access the sorting state before the table is initialized, you can "control" the sorting state like down below.
+
+#### Controlled Sorting State
+
+If you need easy access to the sorting state, you can control/manage the sorting state in your own state management with the `state.sorting` and `onSortingChange` table options.
+
+```tsx
+const [sorting, setSorting] = useState<SortingState>([]) // can set initial sorting state here
+//...
+// use sorting state to fetch data from your server or something...
+//...
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  state: {
+    sorting,
+  },
+  onSortingChange: setSorting,
+})
+```
+
+#### Initial Sorting State
+
+If you do not need to control the sorting state in your own state management or scope, but you still want to set an initial sorting state, you can use the `initialState` table option instead of `state`.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  //...
+  initialState: {
+    sorting: [
+      {
+        id: 'name',
+        desc: true, // sort by name in descending order by default
+      },
+    ],
+  },
+})
+```
+
+> **NOTE**: Do not use both `initialState.sorting` and `state.sorting` at the same time, as the initialized state in the `state.sorting` will override the `initialState.sorting`.
+
+### Client-Side vs Server-Side Sorting
+
+Whether or not you should use client-side or server-side sorting depends entirely on whether you are also using client-side or server-side pagination or filtering. Be consistent, because using client-side sorting with server-side pagination or filtering will only sort the data that is currently loaded, and not the entire dataset.
+
+### Manual Server-Side Sorting
+
+If you plan to just use your own server-side sorting in your back-end logic, you do not need to provide a sorted row model. But if you have provided a sorting row model, but you want to disable it, you can use the `manualSorting` table option.
+
+```jsx
+const [sorting, setSorting] = useState<SortingState>([])
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  //getSortedRowModel: getSortedRowModel(), //not needed for manual sorting
+  manualSorting: true, //use pre-sorted row model instead of sorted row model
+  state: {
+    sorting,
+  },
+  onSortingChange: setSorting,
+})
+```
+
+> **NOTE**: When `manualSorting` is set to `true`, the table will assume that the data that you provide is already sorted, and will not apply any sorting to it.
+
+### Client-Side Sorting
+
+To implement client-side sorting, first you have to provide a sorting row model to the table. You can import the `getSortedRowModel` function from TanStack Table, and it will be used to transform your rows into sorted rows.
+
+```jsx
+import { useReactTable } from '@tanstack/react-table'
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(), //provide a sorting row model
+})
+```
+
+### Sorting Fns
+
+The default sorting function for all columns is inferred from the data type of the column. However, it can be useful to define the exact sorting function that you want to use for a specific column, especially if any of your data is nullable or not a standard data type.
+
+You can determine a custom sorting function on a per-column basis using the `sortingFn` column option.
+
+By default, there are 6 built-in sorting functions to choose from:
+
+- `alphanumeric` - Sorts by mixed alphanumeric values without case-sensitivity. Slower, but more accurate if your strings contain numbers that need to be naturally sorted.
+- `alphanumericCaseSensitive` - Sorts by mixed alphanumeric values with case-sensitivity. Slower, but more accurate if your strings contain numbers that need to be naturally sorted.
+- `text` - Sorts by text/string values without case-sensitivity. Faster, but less accurate if your strings contain numbers that need to be naturally sorted.
+- `textCaseSensitive` - Sorts by text/string values with case-sensitivity. Faster, but less accurate if your strings contain numbers that need to be naturally sorted.
+- `datetime` - Sorts by time, use this if your values are `Date` objects.
+- `basic` - Sorts using a basic/standard `a > b ? 1 : a < b ? -1 : 0` comparison. This is the fastest sorting function, but may not be the most accurate.
+
+You can also define your own custom sorting functions either as the `sortingFn` column option, or as a global sorting function using the `sortingFns` table option.
+
+#### Custom Sorting Functions
+
+When defining a custom sorting function in either the `sortingFns` table option or as a `sortingFn` column option, it should have the following signature:
+
+```tsx
+//optionally use the SortingFn to infer the parameter types
+const myCustomSortingFn: SortingFn<TData> = (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => {
+  return //-1, 0, or 1 - access any row data using rowA.original and rowB.original
+}
+```
+
+> Note: The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take of that logic. `sortingFn` functions only need to provide a consistent comparison.
+
+Every sorting function receives 2 rows and a column ID and are expected to compare the two rows using the column ID to return `-1`, `0`, or `1` in ascending order. Here's a cheat sheet:
+
+| Return | Ascending Order |
+| ------ | --------------- |
+| `-1`   | `a < b`         |
+| `0`    | `a === b`       |
+| `1`    | `a > b`         |
+
+```jsx
+const columns = [
+  {
+    header: () => 'Name',
+    accessorKey: 'name',
+    sortingFn: 'alphanumeric', // use built-in sorting function by name
+  },
+  {
+    header: () => 'Age',
+    accessorKey: 'age',
+    sortingFn: 'myCustomSortingFn', // use custom global sorting function
+  },
+  {
+    header: () => 'Birthday',
+    accessorKey: 'birthday',
+    sortingFn: 'datetime', // recommended for date columns
+  },
+  {
+    header: () => 'Profile',
+    accessorKey: 'profile',
+    // use custom sorting function directly
+    sortingFn: (rowA, rowB, columnId) => {
+      return rowA.original.someProperty - rowB.original.someProperty
+    },
+  }
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  sortingFns: { //add a custom sorting function
+    myCustomSortingFn: (rowA, rowB, columnId) => {
+      return rowA.original[columnId] > rowB.original[columnId] ? 1 : rowA.original[columnId] < rowB.original[columnId] ? -1 : 0
+    },
+  },
+})
+```
+
+### Customize Sorting
+
+There are a lot of table and column options that you can use to further customize the sorting UX and behavior.
+
+#### Disable Sorting
+
+You can disable sorting for either a specific column or the entire table using the `enableSorting` column option or table option.
+
+```jsx
+const columns = [
+  {
+    header: () => 'ID',
+    accessorKey: 'id',
+    enableSorting: false, // disable sorting for this column
+  },
+  {
+    header: () => 'Name',
+    accessorKey: 'name',
+  },
+  //...
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  enableSorting: false, // disable sorting for the entire table
+})
+```
+
+#### Sorting Direction
+
+By default, the first sorting direction when cycling through the sorting for a column using the `toggleSorting` APIs is ascending for string columns and descending for number columns. You can change this behavior with the `sortDescFirst` column option or table option.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Name',
+    accessorKey: 'name',
+    sortDescFirst: true, //sort by name in descending order first (default is ascending for string columns)
+  },
+  {
+    header: () => 'Age',
+    accessorKey: 'age',
+    sortDescFirst: false, //sort by age in ascending order first (default is descending for number columns)
+  },
+  //...
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  sortDescFirst: true, //sort by all columns in descending order first (default is ascending for string columns and descending for number columns)
+})
+```
+
+> **NOTE**: You may want to explicitly set the `sortDescFirst` column option on any columns that have nullable values. The table may not be able to properly determine if a column is a number or a string if it contains nullable values.
+
+#### Invert Sorting
+
+Inverting sorting is not the same as changing the default sorting direction. If `invertSorting` column option is `true` for a column, then the "desc/asc" sorting states will still cycle like normal, but the actual sorting of the rows will be inverted. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Rank',
+    accessorKey: 'rank',
+    invertSorting: true, // invert the sorting for this column. 1st -> 2nd -> 3rd -> ... even if "desc" sorting is applied
+  },
+  //...
+]
+```
+
+#### Sort Undefined Values
+
+Any undefined values will be sorted to the beginning or end of the list based on the `sortUndefined` column option or table option. You can customize this behavior for your specific use-case.
+
+In not specified, the default value for `sortUndefined` is `1`, and undefined values will be sorted with lower priority (descending), if ascending, undefined will appear on the end of the list.
+
+- `'first'` - Undefined values will be pushed to the beginning of the list
+- `'last'` - Undefined values will be pushed to the end of the list
+- `false` - Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
+- `-1` - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
+- `1` - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
+
+> NOTE: `'first'` and `'last'` options are new in v8.16.0
+
+```jsx
+const columns = [
+  {
+    header: () => 'Rank',
+    accessorKey: 'rank',
+    sortUndefined: -1, // 'first' | 'last' | 1 | -1 | false
+  },
+]
+```
+
+#### Sorting Removal
+
+By default, the ability to remove sorting while cycling through the sorting states for a column is enabled. You can disable this behavior using the `enableSortingRemoval` table option. This behavior is useful if you want to ensure that at least one column is always sorted.
+
+The default behavior when using either the `getToggleSortingHandler` or `toggleSorting` APIs is to cycle through the sorting states like this:
+
+`'none' -> 'desc' -> 'asc' -> 'none' -> 'desc' -> 'asc' -> ...`
+
+If you disable sorting removal, the behavior will be like this:
+
+`'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...`
+
+Once a column is sorted and `enableSortingRemoval` is `false`, toggling the sorting on that column will never remove the sorting. However, if the user sorts by another column and it is not a multi-sort event, then the sorting will be removed from the previous column and just applied to the new column.
+
+> Set `enableSortingRemoval` to `false` if you want to ensure that at least one column is always sorted.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  enableSortingRemoval: false, // disable the ability to remove sorting on columns (always none -> asc -> desc -> asc)
+})
+```
+
+#### Multi-Sorting
+
+Sorting by multiple columns at once is enabled by default if using the `column.getToggleSortingHandler` API. If the user holds the `Shift` key while clicking on a column header, the table will sort by that column in addition to the columns that are already sorted. If you use the `column.toggleSorting` API, you have to manually pass in whether or not to use multi-sorting. (`column.toggleSorting(desc, multi)`).
+
+##### Disable Multi-Sorting
+
+You can disable multi-sorting for either a specific column or the entire table using the `enableMultiSort` column option or table option. Disabling multi-sorting for a specific column will replace all existing sorting with the new column's sorting.
+
+```jsx
+const columns = [
+  {
+    header: () => 'Created At',
+    accessorKey: 'createdAt',
+    enableMultiSort: false, // always sort by just this column if sorting by this column
+  },
+  //...
+]
+//...
+const table = useReactTable({
+  columns,
+  data,
+  enableMultiSort: false, // disable multi-sorting for the entire table
+})
+```
+
+##### Customize Multi-Sorting Trigger
+
+By default, the `Shift` key is used to trigger multi-sorting. You can change this behavior with the `isMultiSortEvent` table option. You can even specify that all sorting events should trigger multi-sorting by returning `true` from the custom function.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  isMultiSortEvent: (e) => true, // normal click triggers multi-sorting
+  //or
+  isMultiSortEvent: (e) => e.ctrlKey || e.shiftKey, // also use the `Ctrl` key to trigger multi-sorting
+})
+```
+
+##### Multi-Sorting Limit
+
+By default, there is no limit to the number of columns that can be sorted at once. You can set a limit using the `maxMultiSortColCount` table option.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  maxMultiSortColCount: 3, // only allow 3 columns to be sorted at once
+})
+```
+
+##### Multi-Sorting Removal
+
+By default, the ability to remove multi-sorts is enabled. You can disable this behavior using the `enableMultiRemove` table option.
+
+```jsx
+const table = useReactTable({
+  columns,
+  data,
+  enableMultiRemove: false, // disable the ability to remove multi-sorts
+})
+```
+
+### Sorting APIs
+
+There are a lot of sorting related APIs that you can use to hook up to your UI or other logic. Here is a list of all of the sorting APIs and some of their use-cases.
+
+- `table.setSorting` - Set the sorting state directly.
+- `table.resetSorting` - Reset the sorting state to the initial state or clear it.
+
+- `column.getCanSort` - Useful for enabling/disabling the sorting UI for a column.
+- `column.getIsSorted` - Useful for showing a visual sorting indicator for a column.
+
+- `column.getToggleSortingHandler` - Useful for hooking up the sorting UI for a column. Add to a sort arrow (icon button), menu item, or simply the entire column header cell. This handler will call `column.toggleSorting` with the correct parameters.
+- `column.toggleSorting` - Useful for hooking up the sorting UI for a column. If using instead of `column.getToggleSortingHandler`, you have to manually pass in whether or not to use multi-sorting. (`column.toggleSorting(desc, multi)`)
+- `column.clearSorting` - Useful for a "clear sorting" button or menu item for a specific column.
+
+- `column.getNextSortingOrder` - Useful for showing which direction the column will sort by next. (asc/desc/clear in a tooltip/menu item/aria-label or something)
+- `column.getFirstSortDir` - Useful for showing which direction the column will sort by first. (asc/desc in a tooltip/menu item/aria-label or something)
+- `column.getAutoSortDir` - Determines whether the first sorting direction will be ascending or descending for a column.
+- `column.getAutoSortingFn` - Used internally to find the default sorting function for a column if none is specified.
+- `column.getSortingFn` - Returns the exact sorting function being used for a column.
+
+- `column.getCanMultiSort` - Useful for enabling/disabling the multi-sorting UI for a column.
+- `column.getSortIndex` - Useful for showing a badge or indicator of the column's sort order in a multi-sort scenario. i.e. whether or not it is the first, second, third, etc. column to be sorted.
diff --git a/mintlify/table/guide/tables.md b/mintlify/table/guide/tables.md
new file mode 100644
index 000000000..6daed0637
--- /dev/null
+++ b/mintlify/table/guide/tables.md
@@ -0,0 +1,129 @@
+---
+title: Table Instance Guide
+---
+
+## API
+
+[Table API](/table/api/core/table)
+
+## Table Instance Guide
+
+TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `<table>` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `createSolidTable`, `createSvelteTable`, `useQwikTable`, `useVueTable`).
+
+### Creating a Table Instance
+
+To create a table instance, 2 `options` are required: `columns` and `data`. There are dozens of other table options to configure features and behavior, but these 2 are required.
+
+#### Defining Data
+
+`data` is an array of objects that will be turned into the rows of your table. Each object in the array represents a row of data (under normal circumstances). If you are using TypeScript, we usually define a type for the shape of our data. This type is used as a generic type for all of the other table, column, row, and cell instances. This type is usually referred to as `TData`.
+
+For example, if we have a table that displays a list of users in an array like this:
+
+```json
+[
+  {
+    "firstName": "Tanner",
+    "lastName": "Linsley",
+    "age": 33,
+    "visits": 100,
+    "progress": 50,
+    "status": "Married"
+  },
+  {
+    "firstName": "Kevin",
+    "lastName": "Vandy",
+    "age": 27,
+    "visits": 200,
+    "progress": 100,
+    "status": "Single"
+  }
+]
+```
+
+Then we can define a User (TData) type like this:
+
+```ts
+//TData
+type User = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: string
+}
+```
+
+We can then define our `data` array with this type, and then TanStack Table will be able to intelligently infer lots of types for us later on in our columns, rows, cells, etc.
+
+```ts
+//note: data needs a "stable" reference in order to prevent infinite re-renders
+const data: User[] = []
+//or
+const [data, setData] = React.useState<User[]>([])
+//or
+const data = ref<User[]>([])
+//etc...
+```
+
+> Note: `data` needs a "stable" reference (especially in React) in order to prevent infinite re-renders. This is why we recommend using `React.useState` or `React.useMemo`, or defining your data outside of the same react component that creates the table instance, or using a library like TanStack Query to manage your data state.
+
+#### Defining Columns
+
+Column definitions are covered in detail in the next section in the [Column Def Guide](/table/guide/column-defs). We'll note here, however, that when you define the type of your columns, you should use the same `TData` type that you used for you data.
+
+```ts
+const columns: ColumnDef<User>[] = [] //Pass User type as the generic TData type
+//or
+const columnHelper = createColumnHelper<User>() //Pass User type as the generic TData type
+```
+
+The column definitions are where we will tell TanStack Table how each column should access and/or transform row data with either an `accessorKey` or `accessorFn`. See the [Column Def Guide](/table/guide/column-defs) for more info.
+
+#### Creating the Table Instance
+
+With our `columns` and `data` defined, we can now create our basic table instance.
+
+```ts
+//vanilla js
+const table = createTable({ columns, data })
+
+//react
+const table = useReactTable({ columns, data })
+
+//solid
+const table = createSolidTable({ columns, data })
+
+//svelte
+const table = createSvelteTable({ columns, data })
+
+//vue
+const table = useVueTable({ columns, data })
+```
+
+So what's in the `table` instance? Let's take a look at what interactions we can have with the table instance.
+
+### Table State
+
+The table instance contains all of the table state, which can be accessed via the `table.getState()` API. Each table feature registers various states in the table state. For example, the row selection feature registers `rowSelection` state, the pagination feature registers `pagination` state, etc.
+
+Each feature will also have corresponding state setter APIs and state resetter APIs on the table instance. For example, the row selection feature will have a `setRowSelection` API and a `resetRowSelection`.
+
+```ts
+table.getState().rowSelection //read the row selection state
+table.setRowSelection((old) => ({...old})) //set the row selection state
+table.resetRowSelection() //reset the row selection state
+```
+
+### Table APIs
+
+There are dozens of table APIs created by each feature to help you either read or mutate the table state in different ways.
+
+API reference docs for the core table instance and all other feature APIs can be found throughout the API docs.
+
+For example, you can find the core table instance API docs here: [Table API](/table/api/core/table#table-api)
+
+### Table Row Models
+
+There is a special set of table instance APIs for reading rows out of the table instance called row models. TanStack Table has advanced features where the rows that are generated may be very different than the array of `data` that you originally passed in. To learn more about the different row models that you can pass in as a table option, see the [Row Models Guide](/table/guide/row-models).
diff --git a/mintlify/table/guide/virtualization.md b/mintlify/table/guide/virtualization.md
new file mode 100644
index 000000000..3422ac669
--- /dev/null
+++ b/mintlify/table/guide/virtualization.md
@@ -0,0 +1,16 @@
+---
+title: Virtualization Guide
+---
+
+## Examples
+
+Want to skip to the implementation? Check out these examples:
+
+- [virtualized-columns](/table/framework/react/examples/virtualized-columns)
+- [virtualized-rows (dynamic row height)](/table/framework/react/examples/virtualized-rows)
+- [virtualized-rows (fixed row height)](/table/framework/react/examples/virtualized-rows)
+- [virtualized-infinite-scrolling](/table/framework/react/examples/virtualized-infinite-scrolling)
+
+## Virtualization Guide
+
+The TanStack Table packages do not come with any virtualization APIs or features built-in, but TanStack Table can easily work with other virtualization libraries like [react-window](https://www.npmjs.com/package/react-window) or TanStack's own [TanStack Virtual](https://tanstack.com/virtual/v3). This guide will show some strategies for using TanStack Table with TanStack Virtual.
diff --git a/mintlify/table/index.mdx b/mintlify/table/index.mdx
new file mode 100644
index 000000000..0ae8aa4c4
--- /dev/null
+++ b/mintlify/table/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Table"
+description: "Headless UI for tables and data grids. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Headless UI for tables and data grids.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/table/introduction">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/table">
+    Visit the canonical TanStack Table website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/table">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/table/installation.md b/mintlify/table/installation.md
new file mode 100644
index 000000000..27c2e9a5e
--- /dev/null
+++ b/mintlify/table/installation.md
@@ -0,0 +1,81 @@
+---
+title: Installation
+---
+
+Before we dig in to the API, let's get you set up!
+
+Install your table adapter as a dependency using your favorite npm package manager.
+
+_Only install ONE of the following packages:_
+
+## React Table
+
+```bash
+npm install @tanstack/react-table
+```
+
+The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19.
+
+> NOTE: Even though the react adapter works with React 19, it may not work with the new React Compiler that's coming out along-side React 19. This may be fixed in future TanStack Table updates.
+
+## Vue Table
+
+```bash
+npm install @tanstack/vue-table
+```
+
+The `@tanstack/vue-table` package works with Vue 3.
+
+## Solid Table
+
+```bash
+npm install @tanstack/solid-table
+```
+
+The `@tanstack/solid-table` package works with Solid-JS 1
+
+## Svelte Table
+
+```bash
+npm install @tanstack/svelte-table
+```
+
+The `@tanstack/svelte-table` package works with Svelte 3 and Svelte 4.
+
+> NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the `@tanstack/table-core` package and using a custom adapter from the community. See this [PR](https://github.com/TanStack/table/pull/5403) for inspiration.
+
+## Qwik Table
+
+```bash
+npm install @tanstack/qwik-table
+```
+
+The `@tanstack/qwik-table` package works with Qwik 1.
+
+> NOTE: There will be a "breaking change" release in the near future to support Qwik 2. This will be released as a minor version bump, but will be documented. Qwik 2 itself will have no breaking changes, but its name on the npm registry will change, and require different peer dependencies.
+
+> NOTE: The current qwik adapter only works with CSR. More improvements may not be available until a future table version.
+
+## Angular Table
+
+```bash
+npm install @tanstack/angular-table
+```
+
+The `@tanstack/angular-table` package works with Angular 17. The Angular adapter uses a new Angular Signal implementation.
+
+## Lit Table
+
+```bash
+npm install @tanstack/lit-table
+```
+
+The `@tanstack/lit-table` package works with Lit 3.
+
+## Table Core (no framework)
+
+```bash
+npm install @tanstack/table-core
+```
+
+Don't see your favorite framework (or favorite version of your framework) listed? You can always just use the `@tanstack/table-core` package and build your own adapter in your own codebase. Usually, only a thin wrapper is needed to manage state and rendering for your specific framework. Browse the [source code](https://github.com/TanStack/table/tree/main/packages) of all of the other adapters to see how they work.
diff --git a/mintlify/table/introduction.md b/mintlify/table/introduction.md
new file mode 100644
index 000000000..5b320f57e
--- /dev/null
+++ b/mintlify/table/introduction.md
@@ -0,0 +1,69 @@
+---
+title: Introduction
+---
+
+TanStack Table is a **Headless UI** library for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Qwik, and Svelte.
+
+## What is "headless" UI?
+
+**Headless UI** is a term for libraries and utilities that provide the logic, state, processing and API for UI elements and interactions, but **do not provide markup, styles, or pre-built implementations**. Scratching your head yet? 😉 Headless UI has a few main goals:
+
+The hardest parts of building complex UIs usually revolve around state, events, side-effects, data computation/management. By removing these concerns from the markup, styles and implementation details, our logic and components can be more modular and reusable.
+
+Building UI is a very branded and custom experience, even if that means choosing a design system or adhering to a design spec. To support this custom experience, component-based UI libraries need to support a massive (and seemingly endless) API surface around markup and style customization. Headless UI libraries decouple your logic from your UI
+
+When you use a headless UI library, the complex task of **data-processing, state-management, and business logic** are handled for you, leaving you to worry about higher-cardinality decisions that differ across implementations and use cases.
+
+> Want to dive deeper? [Read more about Headless UI](https://www.merrickchristensen.com/articles/headless-user-interface-components/).
+
+## Component-based libraries vs Headless libraries
+
+In the ecosystem of table/datagrid libraries, there are two main categories:
+
+- Component-based table libraries
+- Headless table libraries
+
+### Which kind of table library should I use?
+
+Each approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.
+
+### Component-based Table Libraries
+
+Component-based table libraries will typically supply you with a feature-rich drop-in solution and ready-to-use components/markup complete with styles/theming. [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable) is a great example of this type of table library.
+
+**Pros:**
+
+- Ship with ready-to-use markup/styles
+- Little setup required
+- Turn-key experience
+
+**Cons:**
+
+- Less control over markup
+- Custom styles are typically theme-based
+- Larger bundle-sizes
+- Highly coupled to framework adapters and platforms
+
+**If you want a ready-to-use table and design/bundle-size are not hard requirements**, then you should consider using a component-based table library.
+
+There are a lot of component-based table libraries out there, but we believe [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable) is the gold standard and is by far our favorite grid-sibling (don't tell the others 🤫).
+
+### Headless Table Libraries
+
+Headless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.
+
+**Pros:**
+
+- Full control over markup and styles
+- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc)
+- Smaller bundle-sizes
+- Portable. Run anywhere JS runs!
+
+**Cons:**
+
+- More setup required
+- No markup, styles or themes provided
+
+**If you want a lighter-weight table or full control over the design**, then you should consider using a headless table library.
+
+There are very few headless table libraries out there and obviously, **TanStack Table** is our favorite!
diff --git a/mintlify/table/overview.md b/mintlify/table/overview.md
new file mode 100644
index 000000000..833f75004
--- /dev/null
+++ b/mintlify/table/overview.md
@@ -0,0 +1,36 @@
+---
+title: Overview
+---
+
+TanStack Table's core is **framework agnostic**, which means its API is the same regardless of the framework you're using. Adapters are provided to make working with the table core easier depending on your framework. See the Adapters menu for available adapters.
+
+## Typescript
+
+While TanStack Table is written in [TypeScript](https://www.typescriptlang.org/), using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase)
+
+## Headless
+
+As it was mentioned extensively in the [Intro](/table/introduction) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native!
+
+## Core Objects and Types
+
+The table core uses the following abstractions, commonly exposed by adapters:
+
+- Column Defs
+  - Objects used to configure a column and its data model, display templates, and more
+- Table
+  - The core table object containing both state and API
+- Table Data
+  - The core data array you provide the table
+- Columns
+  - Each column mirrors its respective column def and also provides column-specific APIs
+- Rows
+  - Each row mirrors its respective row data and provides row-specific APIs
+- Header Groups
+  - Header groups are computed slices of nested header levels, each containing a group of headers
+- Headers
+  - Each header is either directly associated with or derived from its column def and provides header-specific APIs
+- Cells
+  - Each cell mirrors its respective row-column intersection and provides cell-specific APIs
+
+There are even more structures that pertain to specific features like filtering, sorting, grouping, etc, which you can find in the [features](/table/guide/features) section.
diff --git a/mintlify/table/vanilla.md b/mintlify/table/vanilla.md
new file mode 100644
index 000000000..5f2262e52
--- /dev/null
+++ b/mintlify/table/vanilla.md
@@ -0,0 +1,15 @@
+---
+title: Vanilla TS/JS
+---
+
+The `@tanstack/table-core` library contains the core logic for TanStack Table. If you are using a non-standard framework or don't have access to a framework, you can use the core library directly via TypeScript or JavaScript.
+
+## `createTable`
+
+Takes an `options` object and returns a table.
+
+```tsx
+import { createTable } from '@tanstack/table-core'
+
+const table = createTable(options)
+```
diff --git a/mintlify/virtual/api/virtual-item.md b/mintlify/virtual/api/virtual-item.md
new file mode 100644
index 000000000..35bbd5970
--- /dev/null
+++ b/mintlify/virtual/api/virtual-item.md
@@ -0,0 +1,66 @@
+---
+title: VirtualItem
+---
+
+The `VirtualItem` object represents a single item returned by the virtualizer. It contains information you need to render the item in the coordinate space within your virtualizer's scrollElement and other helpful properties/functions.
+
+```tsx
+export interface VirtualItem {
+  key: string | number | bigint
+  index: number
+  start: number
+  end: number
+  size: number
+}
+```
+
+The following properties and methods are available on each VirtualItem object:
+
+### `key`
+
+```tsx
+key: string | number | bigint
+```
+
+The unique key for the item. By default this is the item index, but should be configured via the `getItemKey` Virtualizer option.
+
+### `index`
+
+```tsx
+index: number
+```
+
+The index of the item.
+
+### `start`
+
+```tsx
+start: number
+```
+
+The starting pixel offset for the item. This is usually mapped to a css property or transform like `top/left` or `translateX/translateY`.
+
+### `end`
+
+```tsx
+end: number
+```
+
+The ending pixel offset for the item. This value is not necessary for most layouts, but can be helpful so we've provided it anyway.
+
+### `size`
+
+```tsx
+size: number
+```
+
+The size of the item. This is usually mapped to a css property like `width/height`. Before an item is measured with the `VirtualItem.measureElement` method, this will be the estimated size returned from your `estimateSize` virtualizer option. After an item is measured (if you choose to measure it at all), this value will be the number returned by your `measureElement` virtualizer option (which by default is configured to measure elements with `getBoundingClientRect()`).
+
+### `lane`
+
+```tsx
+lane: number
+```
+
+The lane index of the item. Items are assigned to the shortest lane. Lane assignments are cached immediately based on the size estimated by `estimateSize` by default; set `laneAssignmentMode: 'measured'` to base assignments on measured sizes instead.
+In regular lists it will always be set to `0` but becomes useful for masonry layouts (see variable examples for more details).
\ No newline at end of file
diff --git a/mintlify/virtual/api/virtualizer.md b/mintlify/virtual/api/virtualizer.md
new file mode 100644
index 000000000..adb7a3a88
--- /dev/null
+++ b/mintlify/virtual/api/virtualizer.md
@@ -0,0 +1,601 @@
+---
+title: Virtualizer
+---
+
+The `Virtualizer` class is the core of TanStack Virtual. Virtualizer instances are usually created for you by your framework adapter, but you do receive the virtualizer directly.
+
+```tsx
+export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
+  constructor(options: VirtualizerOptions<TScrollElement, TItemElement>)
+}
+```
+
+## Required Options
+
+### `count`
+
+```tsx
+count: number
+```
+
+The total number of items to virtualize.
+
+### `getScrollElement`
+
+```tsx
+getScrollElement: () => TScrollElement
+```
+
+A function that returns the scrollable element for the virtualizer. It may return null if the element is not available yet.
+
+### `estimateSize`
+
+```tsx
+estimateSize: (index: number) => number
+```
+
+> 🧠 If you are dynamically measuring your elements, it's recommended to estimate the largest possible size (width/height, within comfort) of your items. This will help the virtualizer calculate more accurate initial positions.
+
+This function is passed the index of each item and should return the actual size (or estimated size if you will be dynamically measuring items with `virtualItem.measureElement`) for each item. This measurement should return either the width or height depending on the orientation of your virtualizer.
+
+## Optional Options
+
+### `enabled`
+
+```tsx
+enabled?: boolean
+```
+
+Set to `false` to disable scrollElement observers and reset the virtualizer's state
+
+### `debug`
+
+```tsx
+debug?: boolean
+```
+
+Set to `true` to enable debug logs
+
+### `initialRect`
+
+```tsx
+initialRect?: Rect
+```
+
+The initial `Rect` of the scrollElement. This is mostly useful if you need to run the virtualizer in an SSR environment, otherwise the initialRect will be calculated on mount by the `observeElementRect` implementation.
+
+### `onChange`
+
+```tsx
+onChange?: (instance: Virtualizer<TScrollElement, TItemElement>, sync: boolean) => void
+```
+
+A callback function that fires when the virtualizer's internal state changes. It's passed the virtualizer instance and the sync parameter.
+
+The sync parameter indicates whether scrolling is currently in progress. It is `true` when scrolling is ongoing, and `false` when scrolling has stopped or other actions (such as resizing) are being performed.
+
+### `overscan`
+
+```tsx
+overscan?: number
+```
+
+The number of items to render above and below the visible area. Increasing this number will increase the amount of time it takes to render the virtualizer, but might decrease the likelihood of seeing slow-rendering blank items at the top and bottom of the virtualizer when scrolling. The default value is `1`.
+
+### `horizontal`
+
+```tsx
+horizontal?: boolean
+```
+
+Set this to `true` if your virtualizer is oriented horizontally.
+
+### `paddingStart`
+
+```tsx
+paddingStart?: number
+```
+
+The padding to apply to the start of the virtualizer in pixels.
+
+### `paddingEnd`
+
+```tsx
+paddingEnd?: number
+```
+
+The padding to apply to the end of the virtualizer in pixels.
+
+### `scrollPaddingStart`
+
+```tsx
+scrollPaddingStart?: number
+```
+
+The padding to apply to the start of the virtualizer in pixels when scrolling to an element.
+
+### `scrollPaddingEnd`
+
+```tsx
+scrollPaddingEnd?: number
+```
+
+The padding to apply to the end of the virtualizer in pixels when scrolling to an element.
+
+### `initialOffset`
+
+```tsx
+initialOffset?: number | (() => number)
+```
+
+The position where the list is scrolled to on render. This is useful if you are rendering the virtualizer in a SSR environment or are conditionally rendering the virtualizer.
+
+### `getItemKey`
+
+```tsx
+getItemKey?: (index: number) => Key
+```
+
+This function is passed the index of each item and should return a unique key for that item. The default functionality of this function is to return the index of the item, but you should override this when possible to return a unique identifier for each item across the entire set.
+
+**Note:** The virtualizer automatically invalidates its measurement cache when measurement-affecting options change, ensuring `getTotalSize()` and other measurements return fresh values. While the virtualizer intelligently tracks which options actually affect measurements, it's still better to memoize `getItemKey` (e.g., using `useCallback` in React) to avoid unnecessary recalculations.
+
+### `rangeExtractor`
+
+```tsx
+rangeExtractor?: (range: Range) => number[]
+```
+
+This function receives visible range indexes and should return array of indexes to render. This is useful if you need to add or remove items from the virtualizer manually regardless of the visible range, eg. rendering sticky items, headers, footers, etc. The default range extractor implementation will return the visible range indexes and is exported as `defaultRangeExtractor`.
+
+### `scrollToFn`
+
+```tsx
+scrollToFn?: (
+  offset: number,
+  options: { adjustments?: number; behavior?: 'auto' | 'smooth' },
+  instance: Virtualizer<TScrollElement, TItemElement>,
+) => void
+```
+
+An optional function that (if provided) should implement the scrolling behavior for your scrollElement. It will be called with the following arguments: 
+
+- An `offset` (in pixels) to scroll towards.
+- An object indicating whether there was a difference between the estimated size and actual size (`adjustments`) and/or whether scrolling was called with a smooth animation (`behaviour`).
+- The virtualizer instance itself. 
+
+Note that built-in scroll implementations are exported as `elementScroll` and `windowScroll`, which are automatically configured by the framework adapter functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+### `observeElementRect`
+
+```tsx
+observeElementRect: (
+  instance: Virtualizer<TScrollElement, TItemElement>,
+  cb: (rect: Rect) => void,
+) => void | (() => void)
+```
+
+An optional function that if provided is called when the scrollElement changes and should implement the initial measurement and continuous monitoring of the scrollElement's `Rect` (an object with `width` and `height`). It's called with the instance (which also gives you access to the scrollElement via `instance.scrollElement`. Built-in implementations are exported as `observeElementRect` and `observeWindowRect` which are automatically configured for you by your framework adapter's exported functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+### `observeElementOffset`
+
+```tsx
+observeElementOffset: (
+    instance: Virtualizer<TScrollElement, TItemElement>,
+    cb: (offset: number) => void,
+  ) => void | (() => void)
+```
+
+An optional function that if provided is called when the scrollElement changes and should implement the initial measurement and continuous monitoring of the scrollElement's scroll offset (a number). It's called with the instance (which also gives you access to the scrollElement via `instance.scrollElement`. Built-in implementations are exported as `observeElementOffset` and `observeWindowOffset` which are automatically configured for you by your framework adapter's exported functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+### `measureElement`
+
+```tsx
+measureElement?: (
+  element: TItemElement,
+  entry: ResizeObserverEntry | undefined,
+  instance: Virtualizer<TScrollElement, TItemElement>,
+) => number
+```
+
+This optional function is called when the virtualizer needs to dynamically measure the size (width or height) of an item.
+
+> 🧠 You can use `instance.options.horizontal` to determine if the width or height of the item should be measured.
+
+### `scrollMargin`
+
+```tsx
+scrollMargin?: number
+```
+
+With this option, you can specify where the scroll offset should originate. Typically, this value represents the space between the beginning of the scrolling element and the start of the list. This is especially useful in common scenarios such as when you have a header preceding a window virtualizer or when multiple virtualizers are utilized within a single scrolling element. If you are using absolute positioning of elements, you should take into account the `scrollMargin` in your CSS transform:
+```tsx
+transform: `translateY(${
+   virtualRow.start - rowVirtualizer.options.scrollMargin
+}px)` 
+``` 
+To dynamically measure value for `scrollMargin` you can use `getBoundingClientRect()` or ResizeObserver. This is helpful in scenarios when items above your virtual list might change their height.   
+
+### `gap`
+
+```tsx
+gap?: number
+```
+
+This option allows you to set the spacing between items in the virtualized list. It's particularly useful for maintaining a consistent visual separation between items without having to manually adjust each item's margin or padding. The value is specified in pixels.
+
+### `lanes`
+
+```tsx
+lanes: number
+```
+
+The number of lanes the list is divided into (aka columns for vertical lists and rows for horizontal lists). Items are assigned to the lane with the shortest total size. By default, lane assignments are cached immediately based on `estimateSize` to prevent items from jumping between lanes (see `laneAssignmentMode` below to change this behavior).
+
+### `laneAssignmentMode`
+
+```tsx
+laneAssignmentMode?: 'estimate' | 'measured'
+```
+
+**Default**: `'estimate'`
+
+Controls when lane assignments are cached in a masonry layout.
+
+- `'estimate'` (default): lane assignments are cached immediately based on `estimateSize`. This keeps items from jumping between lanes, but assignments may be suboptimal when the estimate is inaccurate.
+- `'measured'`: lane caching is deferred until items are measured via `measureElement`, so assignments reflect actual measured sizes. After the initial measurement, lanes are cached and remain stable.
+
+### `anchorTo`
+
+```tsx
+anchorTo?: 'start' | 'end'
+```
+
+**Default:** `'start'`
+
+Controls which side of the scrollable content should be treated as the stable anchor when list data changes. The default `'start'` preserves TanStack Virtual's existing top/left anchored behavior.
+
+Set `anchorTo: 'end'` for chat, logs, and reverse/inverted feeds. In end-anchored mode, the virtualizer keeps the current visible item stable when older items are prepended, and keeps an end-pinned viewport pinned when the last item grows during streaming output. See the [Chat guide](/virtual/chat) for the full pattern.
+
+For prepend stability, use a stable `getItemKey` based on each item's persistent id. Index keys cannot distinguish prepends from appends after items shift.
+
+### `followOnAppend`
+
+```tsx
+followOnAppend?: boolean | 'auto' | 'smooth' | 'instant'
+```
+
+**Default:** `false`
+
+When used with `anchorTo: 'end'`, controls whether the virtualizer scrolls to the end after new items are appended. The follow only happens if the viewport was already at the end before the append; users who have scrolled up to read history are not pulled down.
+
+Passing `true` is equivalent to `'auto'`. Passing a scroll behavior uses that behavior for the follow.
+
+This option does not follow prepends. It only follows appended output, and only when the viewport was already within `scrollEndThreshold` of the end before the append.
+
+### `scrollEndThreshold`
+
+```tsx
+scrollEndThreshold?: number
+```
+
+**Default:** `1`
+
+The pixel threshold used by `isAtEnd()` and `followOnAppend` to decide whether the viewport is close enough to the end to count as pinned.
+
+### `isScrollingResetDelay`
+
+```tsx
+isScrollingResetDelay: number
+```
+
+This option allows you to specify the duration to wait after the last scroll event before resetting the isScrolling instance property. The default value is 150 milliseconds. 
+
+The implementation of this option is driven by the need for a reliable mechanism to handle scrolling behavior across different browsers. Until all browsers uniformly support the scrollEnd event.
+
+### `useScrollendEvent`
+
+```tsx
+useScrollendEvent: boolean
+```
+
+Determines whether to use the native scrollend event to detect when scrolling has stopped. If set to false, a debounced fallback is used to reset the isScrolling instance property after isScrollingResetDelay milliseconds. The default value is `false`. 
+
+The implementation of this option is driven by the need for a reliable mechanism to handle scrolling behavior across different browsers. Until all browsers uniformly support the scrollEnd event.
+
+### `isRtl`
+
+```tsx
+isRtl: boolean
+```
+
+Whether to invert horizontal scrolling to support right-to-left language locales.
+
+### `initialMeasurementsCache`
+
+```tsx
+initialMeasurementsCache: Array<VirtualItem>
+```
+
+**Default:** `[]`
+
+A previously-captured snapshot of measured item sizes (from `takeSnapshot()`) to seed the virtualizer with on mount. Useful for restoring scroll position after navigation: persist the result of `takeSnapshot()` (plus the current `scrollOffset`) in your route state, then pass them back as `initialMeasurementsCache` and `initialOffset` to land users at the same position without re-measuring everything from scratch.
+
+Items not present in the cache fall back to `estimateSize`; items present have their measured `size` restored. The cache is consumed only once, on the first `getMeasurements()` call after mount.
+
+### `useAnimationFrameWithResizeObserver`
+
+```tsx
+useAnimationFrameWithResizeObserver: boolean
+```
+
+**Default:** `false`
+
+When enabled, defers ResizeObserver measurement processing to the next animation frame using `requestAnimationFrame`.
+
+**Important:** This option typically **should not be enabled** in most cases. ResizeObserver callbacks already execute at an optimal time in the browser's rendering pipeline (after layout, before paint), and the measurements provided in the callback are pre-computed by the browser without causing additional reflows.
+
+**Potential use cases:**
+- If you're performing heavy DOM mutations in response to size changes and want to batch them with the next render cycle
+- As a workaround for the "ResizeObserver loop completed with undelivered notifications" error (though this usually indicates a deeper issue that should be fixed)
+
+**Tradeoffs:**
+- **Adds ~16ms delay:** Measurements are deferred to the next frame, which can cause visual artifacts, stale measurements, or slower time-to-interactive
+- **No batching benefit:** ResizeObserver already batches multiple element resizes into a single callback
+- **Defeats optimization:** The browser has already computed the measurements synchronously; deferring them provides no performance benefit for reading values
+
+Only enable this option if you have a specific reason and have measured that it improves your use case.
+
+### `useCachedMeasurements`
+
+```tsx
+useCachedMeasurements?: boolean
+```
+
+**Default:** `false`
+
+When enabled, the default `measureElement` implementation skips DOM measurement and returns the previously cached size for each item (falling back to `estimateSize` if no cached size exists).
+
+This is useful when the virtualized list is temporarily hidden (e.g. via `display: none` on a parent element). Without this option, the ResizeObserver fires with size `0` for all items when hidden, resetting all measurements. When the list becomes visible again, items may need to be re-measured, which can cause layout shifts.
+
+**Usage:** Toggle this option to `true` before hiding the list and back to `false` when showing it. The ResizeObserver remains attached, so real measurements resume automatically when the flag is turned off and elements become visible again.
+
+> ⚠️ This option only affects the default `measureElement`. If you provide a custom `measureElement`, you are responsible for handling this case yourself.
+
+## Virtualizer Instance
+
+The following properties and methods are available on the virtualizer instance:
+
+### `options`
+
+```tsx
+options: readonly Required<VirtualizerOptions<TScrollElement, TItemElement>>
+```
+
+The current options for the virtualizer. This property is updated via your framework adapter and is read-only.
+
+### `scrollElement`
+
+```tsx
+scrollElement: readonly TScrollElement | null
+```
+
+The current scrollElement for the virtualizer. This property is updated via your framework adapter and is read-only.
+
+### `getVirtualItems`
+
+```tsx
+type getVirtualItems = () => VirtualItem[]
+```
+
+Returns the virtual items for the current state of the virtualizer.
+
+### `getVirtualIndexes`
+
+```tsx
+type getVirtualIndexes = () => number[]
+```
+
+Returns the virtual row indexes for the current state of the virtualizer.
+
+### `scrollToOffset`
+
+```tsx
+scrollToOffset: (
+  toOffset: number,
+  options?: {
+    align?: 'start' | 'center' | 'end' | 'auto',
+    behavior?: 'auto' | 'smooth'
+  }
+) => void
+```
+
+Scrolls the virtualizer to the pixel offset provided. You can optionally pass an alignment mode to anchor the scroll to a specific part of the scrollElement.
+
+### `scrollToIndex`
+
+```tsx
+scrollToIndex: (
+  index: number,
+  options?: {
+    align?: 'start' | 'center' | 'end' | 'auto',
+    behavior?: 'auto' | 'smooth'
+  }
+) => void
+```
+
+Scrolls the virtualizer to the items of the index provided. You can optionally pass an alignment mode to anchor the scroll to a specific part of the scrollElement.
+
+> 🧠 During smooth scrolling, the virtualizer only measures items within a buffer range around the scroll target. Items far from the target are skipped to prevent their size changes from shifting the target position and breaking the smooth animation.
+>
+> Because of this, the preferred layout strategy for smooth scrolling is **block translation** — translate the entire rendered block using the first item's `start` offset, rather than positioning each item independently with absolute positioning. This ensures items stay correctly positioned relative to each other even when some measurements are skipped.
+
+### `scrollBy`
+
+```tsx
+scrollBy: (
+  delta: number,
+  options?: {
+    behavior?: 'auto' | 'smooth'
+  }
+) => void
+```
+
+Scrolls the virtualizer by the specified number of pixels relative to the current scroll position.
+
+### `scrollToEnd`
+
+```tsx
+scrollToEnd: (
+  options?: {
+    behavior?: 'auto' | 'smooth' | 'instant'
+  }
+) => void
+```
+
+Scrolls the virtualizer to the end of the content. For vertical lists this is the bottom; for horizontal lists this is the right edge.
+
+This is useful for "Jump to latest" controls in chat and log views.
+
+### `getDistanceFromEnd`
+
+```tsx
+getDistanceFromEnd: () => number
+```
+
+Returns the current pixel distance from the end of the virtualized content.
+
+For a vertical list, this is the distance from the bottom.
+
+### `isAtEnd`
+
+```tsx
+isAtEnd: (threshold?: number) => boolean
+```
+
+Returns whether the viewport is within `threshold` pixels of the end. If no threshold is provided, `scrollEndThreshold` is used.
+
+Use this to decide whether to show "Jump to latest" UI or whether incoming output should be treated as pinned.
+
+### `getTotalSize`
+
+```tsx
+getTotalSize: () => number
+```
+
+Returns the total size in pixels for the virtualized items. This measurement will incrementally change if you choose to dynamically measure your elements as they are rendered.
+
+### `measure`
+
+```tsx
+measure: () => void
+```
+
+Resets any prev item measurements.
+
+### `takeSnapshot`
+
+```tsx
+takeSnapshot: () => Array<VirtualItem>
+```
+
+Returns a snapshot of currently-measured items as plain `VirtualItem`
+objects, suitable for round-tripping through state storage and feeding
+back as `initialMeasurementsCache` on remount. Pair with the current
+`scrollOffset` to restore exact scroll position after navigation.
+
+Only items the consumer has actually rendered (and thus measured) appear
+in the snapshot; unmeasured items will fall back to `estimateSize` on
+restore. Returns an empty array if no items have been measured.
+
+```tsx
+// Capture state on unmount
+const snapshot = virtualizer.takeSnapshot()
+const offset = virtualizer.scrollOffset
+sessionStorage.setItem('myList', JSON.stringify({ snapshot, offset }))
+
+// Restore on remount
+const saved = JSON.parse(sessionStorage.getItem('myList') ?? 'null')
+useVirtualizer({
+  count: items.length,
+  estimateSize: () => 50,
+  getScrollElement: () => parentRef.current,
+  initialMeasurementsCache: saved?.snapshot,
+  initialOffset: saved?.offset,
+})
+```
+
+### `measureElement`
+
+```tsx
+measureElement: (el: TItemElement | null) => void
+```
+
+Measures the element using your configured `measureElement` virtualizer option. You are responsible for calling this in your virtualizer markup when the component is rendered (eg. using something like React's ref callback prop) also adding `data-index`
+
+```tsx
+ <div
+  key={virtualRow.key}
+  data-index={virtualRow.index}
+  ref={virtualizer.measureElement}
+  style={...}
+>...</div>
+```
+
+By default the `measureElement` virtualizer option is configured to measure elements with `getBoundingClientRect()`.
+
+### `resizeItem`
+
+```tsx
+resizeItem: (index: number, size: number) => void
+```
+
+Change the virtualized item's size manually. Use this function to manually set the size calculated for this index. Useful in occations when using some custom morphing transition and you know the morphed item's size beforehand.
+
+You can also use this method with a throttled ResizeObserver instead of `Virtualizer.measureElement` to reduce re-rendering.
+
+> ⚠️ Please be aware that manually changing the size of an item when using `Virtualizer.measureElement` to monitor that item, will result in unpredictable behaviour as the `Virtualizer.measureElement` is also changing the size. However you can use one of resizeItem or measureElement in the same virtualizer instance but on different item indexes.
+
+### `scrollRect`
+
+```tsx
+scrollRect: Rect
+```
+
+Current `Rect` of the scroll element.
+
+### `shouldAdjustScrollPositionOnItemSizeChange`
+
+```tsx
+shouldAdjustScrollPositionOnItemSizeChange: undefined | ((item: VirtualItem, delta: number, instance: Virtualizer<TScrollElement, TItemElement>) => boolean)
+```
+
+Provides fine-grained control over the scroll-position adjustment that fires when an above-viewport item's measured size differs from its estimated size. By default the virtualizer applies this correction only when the user is **not** scrolling backward, which avoids the well-known "items jump while scrolling up" jank. Supply this callback only if you want to override that default — for example, to apply corrections during backward scroll, or to skip them in additional scenarios.
+
+The callback receives the resized `item`, the size `delta`, and the `instance`; return `true` to apply the scroll adjustment, `false` to skip it.
+
+On iOS WebKit, scroll-position writes are deferred regardless of this callback while a finger is on screen, during momentum-scroll, and during elastic-overscroll bounce. The cumulative delta is flushed in a single write once the scroll settles, preserving iOS's native momentum physics.
+
+### `isScrolling`
+
+```tsx
+isScrolling: boolean
+```
+
+Boolean flag indicating if list is currently being scrolled.
+
+### `scrollDirection`
+
+```tsx
+scrollDirection: 'forward' | 'backward' | null
+```
+
+This option indicates the direction of scrolling, with possible values being 'forward' for scrolling downwards and 'backward' for scrolling upwards. The value is set to null when there is no active scrolling.
+
+### `scrollOffset`
+
+```tsx
+scrollOffset: number
+```
+
+This option represents the current scroll position along the scrolling axis. It is measured in pixels from the starting point of the scrollable area.
diff --git a/mintlify/virtual/chat.md b/mintlify/virtual/chat.md
new file mode 100644
index 000000000..120d98db4
--- /dev/null
+++ b/mintlify/virtual/chat.md
@@ -0,0 +1,145 @@
+---
+title: Chat
+---
+
+Chat, AI streams, logs, and other reverse feeds have a different scrolling contract than a standard top-anchored list. New output usually appears at the end, older history is prepended at the start, and the viewport should only follow new output when the user is already reading the latest item.
+
+TanStack Virtual supports this with end anchoring:
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: messages.length,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 72,
+  getItemKey: (index) => messages[index]!.id,
+  anchorTo: 'end',
+  followOnAppend: true,
+  scrollEndThreshold: 80,
+  overscan: 6,
+})
+```
+
+See the full [React chat example](/virtual/framework/react/examples/chat).
+
+## Behaviors
+
+### Start at the latest message
+
+Use `scrollToEnd()` once the scroll element is mounted.
+
+```tsx
+React.useLayoutEffect(() => {
+  virtualizer.scrollToEnd()
+}, [virtualizer])
+```
+
+For server-rendered or restored screens, you can also use `initialOffset` and `initialMeasurementsCache`, but most chat screens start by imperatively scrolling to the latest item after mount.
+
+### Keep older-history prepends stable
+
+When the user scrolls near the top, load older messages and prepend them to the array. With `anchorTo: 'end'`, TanStack Virtual captures the visible item before the data changes, finds the same keyed item after the prepend, and adjusts the scroll offset so the message stays in the same visual position.
+
+```tsx
+setMessages((current) => [...olderMessages, ...current])
+```
+
+Stable keys are required for this to work:
+
+```tsx
+getItemKey: (index) => messages[index]!.id
+```
+
+Do not use index keys for chat history. After a prepend, every existing message shifts to a new index, so index keys cannot identify the same message across the update.
+
+### Follow appended output only when pinned
+
+Set `followOnAppend` to keep the viewport pinned to the end when a new message arrives and the user was already at the end.
+
+```tsx
+followOnAppend: true
+```
+
+If the user has scrolled up to read history, appended messages do not pull them away. `scrollEndThreshold` controls how close to the end counts as pinned.
+
+```tsx
+scrollEndThreshold: 80
+```
+
+Use a scroll behavior when you want the follow to animate:
+
+```tsx
+followOnAppend: 'smooth'
+```
+
+### Keep streaming output pinned
+
+Streaming chat responses usually grow the last item many times. In end-anchored mode, if the viewport is pinned to the end before the measured size changes, the virtualizer adjusts by the size delta and keeps the bottom stuck to the latest output.
+
+This works with the normal dynamic measurement pattern:
+
+```tsx
+{virtualizer.getVirtualItems().map((virtualItem) => (
+  <div
+    key={virtualItem.key}
+    ref={virtualizer.measureElement}
+    data-index={virtualItem.index}
+    style={{
+      position: 'absolute',
+      transform: `translateY(${virtualItem.start}px)`,
+      width: '100%',
+    }}
+  >
+    <Message message={messages[virtualItem.index]!} />
+  </div>
+))}
+```
+
+## Recommended Pattern
+
+Use a normal scroll container and normal item order. You do not need `flex-direction: column-reverse`, inverted transforms, or manual `scrollTop += delta` prepend compensation.
+
+```tsx
+<div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
+  <div
+    style={{
+      height: virtualizer.getTotalSize(),
+      position: 'relative',
+      width: '100%',
+    }}
+  >
+    {virtualizer.getVirtualItems().map((virtualItem) => (
+      <div
+        key={virtualItem.key}
+        ref={virtualizer.measureElement}
+        data-index={virtualItem.index}
+        style={{
+          position: 'absolute',
+          transform: `translateY(${virtualItem.start}px)`,
+          width: '100%',
+        }}
+      >
+        <Message message={messages[virtualItem.index]!} />
+      </div>
+    ))}
+  </div>
+</div>
+```
+
+## Production Checklist
+
+- Use stable message ids with `getItemKey`.
+- Give the scroll element a fixed height and `overflow: auto`.
+- Call `measureElement` for dynamic message heights.
+- Use `anchorTo: 'end'` for prepend stability and streaming bottom growth.
+- Use `followOnAppend` when new output should follow only from the latest position.
+- Use `isAtEnd()` to show "Jump to latest" UI when the user is reading history.
+- Keep network loading state outside the virtualizer; prepend or append data normally.
+
+## API Reference
+
+- [`anchorTo`](/virtual/api/virtualizer#anchorto)
+- [`followOnAppend`](/virtual/api/virtualizer#followonappend)
+- [`scrollEndThreshold`](/virtual/api/virtualizer#scrollendthreshold)
+- [`scrollToEnd`](/virtual/api/virtualizer#scrolltoend)
+- [`getDistanceFromEnd`](/virtual/api/virtualizer#getdistancefromend)
+- [`isAtEnd`](/virtual/api/virtualizer#isatend)
diff --git a/mintlify/virtual/framework/angular/angular-virtual.md b/mintlify/virtual/framework/angular/angular-virtual.md
new file mode 100644
index 000000000..5ed696a34
--- /dev/null
+++ b/mintlify/virtual/framework/angular/angular-virtual.md
@@ -0,0 +1,48 @@
+---
+title: Angular Virtual
+---
+
+The `@tanstack/angular-virtual` adapter is a wrapper around the core virtual logic.
+
+Angular Virtual supports Angular 19 and newer. In practice, the adapter is intended to support Angular LTS releases and newer.
+
+## `injectVirtualizer`
+
+```ts
+function injectVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    Omit<VirtualizerOptions<TScrollElement, TItemElement>, 'getScrollElement'>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  > & { scrollElement: ElementRef<TScrollElement> | TScrollElement | undefined },
+): AngularVirtualizer<TScrollElement, TItemElement>
+```
+
+This function returns an `AngularVirtualizer` instance configured to work with an HTML element as the scrollElement.
+The returned `AngularVirtualizer` mirrors the core `Virtualizer`, but adapter-managed state is exposed through Angular signals. This includes:
+
+- `getTotalSize`
+- `getVirtualItems`
+- `isScrolling`
+- `options`
+- `range`
+- `scrollDirection`
+- `scrollElement`
+- `scrollOffset`
+- `scrollRect`
+- `measurementsCache`
+
+## `injectWindowVirtualizer`
+
+```ts
+function injectWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): AngularVirtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `AngularVirtualizer` instance configured to work with the window as the scrollElement.
diff --git a/mintlify/virtual/framework/angular/examples/dynamic.md b/mintlify/virtual/framework/angular/examples/dynamic.md
new file mode 100644
index 000000000..9ad9a7b6d
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/fixed.md b/mintlify/virtual/framework/angular/examples/fixed.md
new file mode 100644
index 000000000..8ca646980
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/infinite-scroll.md b/mintlify/virtual/framework/angular/examples/infinite-scroll.md
new file mode 100644
index 000000000..ef561a662
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/padding.md b/mintlify/virtual/framework/angular/examples/padding.md
new file mode 100644
index 000000000..6e97d54a6
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/padding.md
@@ -0,0 +1,12 @@
+---
+title: "Padding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/padding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/padding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/smooth-scroll.md b/mintlify/virtual/framework/angular/examples/smooth-scroll.md
new file mode 100644
index 000000000..ee4ceb656
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/smooth-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Smooth Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/smooth-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/smooth-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/sticky.md b/mintlify/virtual/framework/angular/examples/sticky.md
new file mode 100644
index 000000000..3ac300272
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/table.md b/mintlify/virtual/framework/angular/examples/table.md
new file mode 100644
index 000000000..a38f43086
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/table.md
@@ -0,0 +1,12 @@
+---
+title: "Table"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/variable.md b/mintlify/virtual/framework/angular/examples/variable.md
new file mode 100644
index 000000000..d2bdcc0a6
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/variable.md
@@ -0,0 +1,12 @@
+---
+title: "Variable"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/variable)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/variable)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/angular/examples/window.md b/mintlify/virtual/framework/angular/examples/window.md
new file mode 100644
index 000000000..ca4109969
--- /dev/null
+++ b/mintlify/virtual/framework/angular/examples/window.md
@@ -0,0 +1,12 @@
+---
+title: "Window"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/angular/examples/window)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/angular/window)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/lit/examples/dynamic.md b/mintlify/virtual/framework/lit/examples/dynamic.md
new file mode 100644
index 000000000..618f12cf4
--- /dev/null
+++ b/mintlify/virtual/framework/lit/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/lit/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/lit/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/lit/examples/fixed.md b/mintlify/virtual/framework/lit/examples/fixed.md
new file mode 100644
index 000000000..02c28abb0
--- /dev/null
+++ b/mintlify/virtual/framework/lit/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/lit/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/lit/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/lit/lit-virtual.md b/mintlify/virtual/framework/lit/lit-virtual.md
new file mode 100644
index 000000000..8700490a4
--- /dev/null
+++ b/mintlify/virtual/framework/lit/lit-virtual.md
@@ -0,0 +1,36 @@
+---
+title: Lit Virtual
+---
+
+The `@tanstack/lit-virtual` adapter is a wrapper around the core virtual logic.
+
+## `createVirtualizer`
+
+```tsx
+
+private virtualizerController = new VirtualizerController<TScrollElement, TItemElement = unknown>(
+    options: PartialKeys< VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+)
+```
+
+This class stands for a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+This will create a Lit Controller which can be accessed in the element render method.
+
+```tsx
+render() {
+    const virtualizer = this.virtualizerController.getVirtualizer();
+    const virtualItems = virtualizer.getVirtualItems();
+} 
+)
+```
+
+## `createWindowVirtualizer`
+
+```tsx
+private windowVirtualizerController = new WindowVirtualizerController<TItemElement = unknown>(
+    options: PartialKeys< VirtualizerOptions<TItemElement>,
+    'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+```
+
+This class stands of window-based `Virtualizer` instance configured to work with an HTML element as the scrollElement.
diff --git a/mintlify/virtual/framework/marko/examples/dynamic.md b/mintlify/virtual/framework/marko/examples/dynamic.md
new file mode 100644
index 000000000..e47400e63
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/fixed.md b/mintlify/virtual/framework/marko/examples/fixed.md
new file mode 100644
index 000000000..8b6866fa9
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/grid.md b/mintlify/virtual/framework/marko/examples/grid.md
new file mode 100644
index 000000000..2d5cbdc8a
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/grid.md
@@ -0,0 +1,12 @@
+---
+title: "Grid"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/grid)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/grid)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/infinite-scroll.md b/mintlify/virtual/framework/marko/examples/infinite-scroll.md
new file mode 100644
index 000000000..199c5a754
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/smooth-scroll.md b/mintlify/virtual/framework/marko/examples/smooth-scroll.md
new file mode 100644
index 000000000..22f79b4a2
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/smooth-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Smooth Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/smooth-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/smooth-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/variable.md b/mintlify/virtual/framework/marko/examples/variable.md
new file mode 100644
index 000000000..094d02471
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/variable.md
@@ -0,0 +1,12 @@
+---
+title: "Variable"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/variable)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/variable)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/examples/window.md b/mintlify/virtual/framework/marko/examples/window.md
new file mode 100644
index 000000000..15538cbcd
--- /dev/null
+++ b/mintlify/virtual/framework/marko/examples/window.md
@@ -0,0 +1,12 @@
+---
+title: "Window"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/marko/examples/window)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/marko/window)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/marko/marko-virtual.md b/mintlify/virtual/framework/marko/marko-virtual.md
new file mode 100644
index 000000000..e6cf29ccc
--- /dev/null
+++ b/mintlify/virtual/framework/marko/marko-virtual.md
@@ -0,0 +1,248 @@
+# Marko Virtual
+
+`@tanstack/marko-virtual` is the Marko 6 adapter for TanStack Virtual. It provides
+row, column, and grid virtualisation via two auto-discovered Marko tags:
+
+- **`<virtualizer>`** — element-based scrolling (rows, columns, grids)
+- **`<window-virtualizer>`** — full-page/window scrolling
+
+Tags are discovered automatically by the Marko compiler when the package is
+installed. No imports are needed in your `.marko` files.
+
+## Installation
+
+```sh
+npm install @tanstack/marko-virtual
+```
+
+## Row virtualisation
+
+```marko
+<let/mounted = false/>
+<lifecycle onMount() { mounted = true }/>
+
+<if=mounted>
+  <div/scrollEl
+    style="height: 400px; width: 400px; overflow-y: auto; position: relative;"
+  >
+    <virtualizer|{ virtualItems, totalSize }|
+      count=10000
+      estimateSize=() => 35
+      getScrollElement=scrollEl
+    >
+      <div style=`height: ${totalSize}px; width: 100%; position: relative`>
+        <for|item| of=virtualItems>
+          <div
+            style=`
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: ${item.size}px;
+              transform: translateY(${item.start}px);
+            `
+          >
+            Row ${item.index}
+          </div>
+        </for>
+      </div>
+    </virtualizer>
+  </div>
+</if>
+```
+
+## Column virtualisation
+
+Same tag, `horizontal=true`:
+
+```marko
+<div/scrollEl
+  style="width: 400px; height: 100px; overflow-x: auto; position: relative;"
+>
+  <virtualizer|{ virtualItems, totalSize }|
+    count=10000
+    estimateSize=() => 100
+    horizontal=true
+    getScrollElement=scrollEl
+  >
+    <div style=`width: ${totalSize}px; height: 100%; position: relative`>
+      <for|item| of=virtualItems>
+        <div
+          style=`
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: ${item.size}px;
+            transform: translateX(${item.start}px);
+          `
+        >
+          Column ${item.index}
+        </div>
+      </for>
+    </div>
+  </virtualizer>
+</div>
+```
+
+## Grid virtualisation
+
+Compose two `<virtualizer>` tags — one for rows, one for columns — sharing the
+same scroll element:
+
+```marko
+<div/scrollEl
+  style="height: 500px; width: 500px; overflow: auto; position: relative;"
+>
+  <virtualizer|{ virtualItems: rowItems, totalSize: rowTotal }|
+    count=10000
+    estimateSize=() => 35
+    getScrollElement=scrollEl
+  >
+    <virtualizer|{ virtualItems: colItems, totalSize: colTotal }|
+      count=200
+      estimateSize=() => 100
+      horizontal=true
+      getScrollElement=scrollEl
+    >
+      <div style=`height: ${rowTotal}px; width: ${colTotal}px; position: relative`>
+        <for|row| of=rowItems>
+          <for|col| of=colItems>
+            <div
+              style=`
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: ${col.size}px;
+                height: ${row.size}px;
+                transform: translateX(${col.start}px) translateY(${row.start}px);
+              `
+            >
+              Cell ${row.index}, ${col.index}
+            </div>
+          </for>
+        </for>
+      </div>
+    </virtualizer>
+  </virtualizer>
+</div>
+```
+
+## Window virtualisation
+
+Use `<window-virtualizer>` when the entire page scrolls rather than a container:
+
+```marko
+<window-virtualizer|{ virtualItems, totalSize }|
+  count=10000
+  estimateSize=() => 35
+>
+  <div style=`height: ${totalSize}px; position: relative`>
+    <for|item| of=virtualItems>
+      <div
+        style=`
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: ${item.size}px;
+          transform: translateY(${item.start}px);
+        `
+      >
+        Row ${item.index}
+      </div>
+    </for>
+  </div>
+</window-virtualizer>
+```
+
+## Dynamic / variable item sizes
+
+For items with unknown heights, use `measureElement` as an effect-driven ref
+to measure each element after render:
+
+```marko
+<div/scrollEl style="height: 400px; overflow-y: auto">
+  <virtualizer|{ virtualItems, totalSize, measureElement }|
+    count=data.length
+    estimateSize=() => 50
+    getScrollElement=scrollEl
+  >
+    <div style=`height: ${totalSize}px; position: relative`>
+      <for|item| of=virtualItems>
+        <div/el
+          data-index=item.index
+          style=`position: absolute; top: 0; width: 100%; transform: translateY(${item.start}px)`>
+          <effect() {
+            // measureElement reads the actual rendered height and updates the virtualizer
+            if (el() && measureElement) measureElement(el())
+          }/>
+          ${data[item.index].text}
+        </div>
+      </for>
+    </div>
+  </virtualizer>
+</div>
+```
+
+## Tag variable reference
+
+Both tags expose the same tag variable shape:
+
+| Property | Type | Description |
+|---|---|---|
+| `virtualItems` | `VirtualItem[]` | The currently visible virtual items |
+| `totalSize` | `number` | Total scrollable size in px — set as the inner container's `height` (or `width` for columns) |
+| `measureElement` | `(el: Element \| null) => void` | Ref callback for dynamic item sizing |
+| `scrollToIndex` | `(index: number, options?: ScrollToOptions) => void` | Imperatively scroll to an item by index |
+| `scrollToOffset` | `(offset: number, options?: ScrollToOptions) => void` | Imperatively scroll to a pixel offset |
+
+## `<virtualizer>` input reference
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `count` | `number` | required | Number of items |
+| `getScrollElement` | `() => Element \| null` | required | Returns the scroll container |
+| `estimateSize` | `(index: number) => number` | `() => 50` | Estimated item size in px |
+| `overscan` | `number` | `5` | Items to render beyond the visible area |
+| `horizontal` | `boolean` | `false` | Virtualise horizontally (columns) |
+| `paddingStart` | `number` | — | Padding before first item |
+| `paddingEnd` | `number` | — | Padding after last item |
+| `scrollPaddingStart` | `number` | — | Scroll padding for `scrollToIndex` |
+| `scrollPaddingEnd` | `number` | — | Scroll padding for `scrollToIndex` |
+| `gap` | `number` | — | Gap between items in px |
+| `lanes` | `number` | `1` | Lanes for masonry layouts |
+| `initialOffset` | `number \| (() => number)` | — | Initial scroll offset |
+
+## `<window-virtualizer>` input reference
+
+Same as `<virtualizer>` except `getScrollElement`, `horizontal`, and
+`initialOffset` are not accepted. The scroll element is always `window`,
+scrolling is always vertical, and the initial offset is read from
+`window.scrollY` automatically.
+
+## SSR note
+
+`<virtualizer>` and `<window-virtualizer>` are client-only tags. The
+`<lifecycle>` tag inside them never runs during SSR, so the tag variable
+will be empty (`virtualItems: []`, `totalSize: 0`) on the server.
+
+Wrap the tag in `<if=mounted>` (where `mounted` is set by `<lifecycle onMount>`) to
+ensure the scroll container exists in the DOM before the virtualizer attaches:
+
+```marko
+<let/mounted = false/>
+<lifecycle onMount() { mounted = true }/>
+
+<if=mounted>
+  <div/scrollEl style="height: 400px; overflow-y: auto">
+    <virtualizer|{ virtualItems, totalSize }|
+      count=10000
+      estimateSize=() => 35
+      getScrollElement=scrollEl
+    >
+      ...
+    </virtualizer>
+  </div>
+</if>
+```
diff --git a/mintlify/virtual/framework/react/examples/chat.md b/mintlify/virtual/framework/react/examples/chat.md
new file mode 100644
index 000000000..d92433019
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/chat.md
@@ -0,0 +1,12 @@
+---
+title: "Chat"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/chat)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/chat)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/dynamic.md b/mintlify/virtual/framework/react/examples/dynamic.md
new file mode 100644
index 000000000..54bc5705a
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/fixed.md b/mintlify/virtual/framework/react/examples/fixed.md
new file mode 100644
index 000000000..a5a9d1f12
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/infinite-scroll.md b/mintlify/virtual/framework/react/examples/infinite-scroll.md
new file mode 100644
index 000000000..f25576abf
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/padding.md b/mintlify/virtual/framework/react/examples/padding.md
new file mode 100644
index 000000000..0ad87b2c7
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/padding.md
@@ -0,0 +1,12 @@
+---
+title: "Padding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/padding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/padding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/pretext.md b/mintlify/virtual/framework/react/examples/pretext.md
new file mode 100644
index 000000000..f1242eaa9
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/pretext.md
@@ -0,0 +1,12 @@
+---
+title: "Pretext"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/pretext)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/pretext)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/scroll-padding.md b/mintlify/virtual/framework/react/examples/scroll-padding.md
new file mode 100644
index 000000000..3d794c57f
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/scroll-padding.md
@@ -0,0 +1,12 @@
+---
+title: "Scroll Padding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/scroll-padding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/scroll-padding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/smooth-scroll.md b/mintlify/virtual/framework/react/examples/smooth-scroll.md
new file mode 100644
index 000000000..c43f1ea6c
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/smooth-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Smooth Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/smooth-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/smooth-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/sticky.md b/mintlify/virtual/framework/react/examples/sticky.md
new file mode 100644
index 000000000..cee80829d
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/table.md b/mintlify/virtual/framework/react/examples/table.md
new file mode 100644
index 000000000..7a2204218
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/table.md
@@ -0,0 +1,12 @@
+---
+title: "Table"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/variable.md b/mintlify/virtual/framework/react/examples/variable.md
new file mode 100644
index 000000000..153962db8
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/variable.md
@@ -0,0 +1,12 @@
+---
+title: "Variable"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/variable)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/variable)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/examples/window.md b/mintlify/virtual/framework/react/examples/window.md
new file mode 100644
index 000000000..61b8c4bf1
--- /dev/null
+++ b/mintlify/virtual/framework/react/examples/window.md
@@ -0,0 +1,12 @@
+---
+title: "Window"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/react/examples/window)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/react/window)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/react/react-virtual.md b/mintlify/virtual/framework/react/react-virtual.md
new file mode 100644
index 000000000..02d544e05
--- /dev/null
+++ b/mintlify/virtual/framework/react/react-virtual.md
@@ -0,0 +1,147 @@
+---
+title: React Virtual
+---
+
+The `@tanstack/react-virtual` adapter is a wrapper around the core virtual logic.
+
+## `useVirtualizer`
+
+```tsx
+function useVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    ReactVirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement>
+```
+
+This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+
+## `useWindowVirtualizer`
+
+```tsx
+function useWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    ReactVirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement.
+
+## React-Specific Options
+
+### `useFlushSync`
+
+```tsx
+type ReactVirtualizerOptions<TScrollElement, TItemElement> = 
+  VirtualizerOptions<TScrollElement, TItemElement> & {
+    useFlushSync?: boolean
+  }
+```
+
+Both `useVirtualizer` and `useWindowVirtualizer` accept a `useFlushSync` option that controls whether React's `flushSync` is used for synchronous updates.
+
+- **Type**: `boolean`
+- **Default**: `true`
+- **Description**: When `true`, the virtualizer will use `flushSync` from `react-dom` to ensure synchronous rendering during scroll events. This provides the most accurate scrolling behavior but may impact performance in some scenarios.
+
+#### When to disable `useFlushSync`
+
+You may want to set `useFlushSync: false` in the following scenarios:
+
+- **React 19 compatibility**: In React 19, you may see the following console warning when scrolling:
+  ```
+  flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
+  ```
+  Setting `useFlushSync: false` will eliminate this warning by allowing React to batch updates naturally.
+- **Performance optimization**: If you experience performance issues with rapid scrolling on lower-end devices
+- **Testing environments**: When running tests that don't require synchronous DOM updates
+- **Non-critical lists**: When slight visual delays during scrolling are acceptable for better overall performance
+
+#### Example
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 50,
+  useFlushSync: false, // Disable synchronous updates
+})
+```
+
+### `directDomUpdates`
+
+- **Type**: `boolean`
+- **Default**: `false`
+- **Description**: Skip React re-renders for scroll-only updates. When enabled, the virtualizer writes item positions (`top`/`left` or `transform`) and the container size (`height`/`width`) directly to the DOM, and only re-renders when the visible index range or `isScrolling` changes.
+
+#### Requirements when enabled
+
+- Item elements must be `position: absolute`; in `'transform'` mode they must also be anchored with `top: 0` / `left: 0`.
+- Item elements must **not** set the main-axis position in their style — the virtualizer owns `top` / `left` in `'position'` mode and `transform` in `'transform'` mode.
+- The inner size container must receive `virtualizer.containerRef` and must **not** set `height` / `width` in its style.
+- For multi-lane layouts (grids / masonry), the cross-axis position (e.g. `left: ${(item.lane * 100) / lanes}%`) is stable per item and must still be set in your JSX — only the main axis is automated.
+
+> ⚠️ This flag is intended to be set once at mount. Toggling it (or `directDomUpdatesMode`) at runtime can leave stale inline styles on items and the container.
+
+> **Note:** If you omit `containerRef`, the virtualizer makes no direct DOM writes — it writes neither item positions nor the container size. You're then responsible for positioning items and sizing the container yourself (e.g. in `onChange`), while still benefiting from the skipped re-renders.
+
+#### Example
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 50,
+  directDomUpdates: true,
+})
+
+return (
+  <div ref={parentRef} style={{ overflow: 'auto', height: 400 }}>
+    {/* The inner container must use virtualizer.containerRef and not set height */}
+    <div ref={virtualizer.containerRef} style={{ position: 'relative' }}>
+      {virtualizer.getVirtualItems().map((item) => (
+        <div
+          key={item.key}
+          ref={virtualizer.measureElement}
+          data-index={item.index}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            // Do NOT set top/left/transform — the virtualizer handles it
+          }}
+        >
+          Row {item.index}
+        </div>
+      ))}
+    </div>
+  </div>
+)
+```
+
+### `directDomUpdatesMode`
+
+- **Type**: `'position' | 'transform'`
+- **Default**: `'transform'`
+- **Description**: Controls how `directDomUpdates` positions item elements.
+  - `'transform'` (default): writes `transform: translate3d(...)`. Promotes items to their own compositor layer — usually smoother on long lists, but creates a stacking context and can interfere with `position: fixed` descendants. Item elements must be anchored with `position: absolute`, `top: 0`, and `left: 0`.
+  - `'position'`: writes `top` / `left`. Item elements must be `position: absolute`.
+
+#### Example
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 50,
+  directDomUpdates: true,
+  directDomUpdatesMode: 'position', // Use top/left instead of transform
+})
+```
diff --git a/mintlify/virtual/framework/solid/solid-virtual.md b/mintlify/virtual/framework/solid/solid-virtual.md
new file mode 100644
index 000000000..f1fb08b75
--- /dev/null
+++ b/mintlify/virtual/framework/solid/solid-virtual.md
@@ -0,0 +1,34 @@
+---
+title: Solid Virtual
+---
+
+The `@tanstack/solid-virtual` adapter is a wrapper around the core virtual logic.
+
+## `createVirtualizer`
+
+```tsx
+function createVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement>
+```
+
+This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+
+## `createWindowVirtualizer`
+
+```tsx
+function createWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement.
diff --git a/mintlify/virtual/framework/svelte/examples/dynamic.md b/mintlify/virtual/framework/svelte/examples/dynamic.md
new file mode 100644
index 000000000..b7e5a7905
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/examples/fixed.md b/mintlify/virtual/framework/svelte/examples/fixed.md
new file mode 100644
index 000000000..0a48ab1c7
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/examples/infinite-scroll.md b/mintlify/virtual/framework/svelte/examples/infinite-scroll.md
new file mode 100644
index 000000000..14b9899b2
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/examples/smooth-scroll.md b/mintlify/virtual/framework/svelte/examples/smooth-scroll.md
new file mode 100644
index 000000000..6259285d9
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/smooth-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Smooth Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/smooth-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/smooth-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/examples/sticky.md b/mintlify/virtual/framework/svelte/examples/sticky.md
new file mode 100644
index 000000000..ffd737a83
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/examples/table.md b/mintlify/virtual/framework/svelte/examples/table.md
new file mode 100644
index 000000000..3e1611eeb
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/examples/table.md
@@ -0,0 +1,12 @@
+---
+title: "Table"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/svelte/examples/table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/svelte/table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/svelte/svelte-virtual.md b/mintlify/virtual/framework/svelte/svelte-virtual.md
new file mode 100644
index 000000000..0715e93d4
--- /dev/null
+++ b/mintlify/virtual/framework/svelte/svelte-virtual.md
@@ -0,0 +1,34 @@
+---
+title: Svelte Virtual
+---
+
+The `@tanstack/svelte-virtual` adapter is a wrapper around the core virtual logic.
+
+## `createVirtualizer`
+
+```tsx
+function createVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement>
+```
+
+This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+
+## `createWindowVirtualizer`
+
+```tsx
+function createWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement.
diff --git a/mintlify/virtual/framework/vue/examples/dynamic.md b/mintlify/virtual/framework/vue/examples/dynamic.md
new file mode 100644
index 000000000..d47784849
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/dynamic.md
@@ -0,0 +1,12 @@
+---
+title: "Dynamic"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/dynamic)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/dynamic)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/fixed.md b/mintlify/virtual/framework/vue/examples/fixed.md
new file mode 100644
index 000000000..290744133
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/fixed.md
@@ -0,0 +1,12 @@
+---
+title: "Fixed"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/fixed)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/fixed)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/infinite-scroll.md b/mintlify/virtual/framework/vue/examples/infinite-scroll.md
new file mode 100644
index 000000000..5c9e18c36
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/infinite-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Infinite Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/infinite-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/infinite-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/padding.md b/mintlify/virtual/framework/vue/examples/padding.md
new file mode 100644
index 000000000..735febc98
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/padding.md
@@ -0,0 +1,12 @@
+---
+title: "Padding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/padding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/padding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/scroll-padding.md b/mintlify/virtual/framework/vue/examples/scroll-padding.md
new file mode 100644
index 000000000..75566a018
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/scroll-padding.md
@@ -0,0 +1,12 @@
+---
+title: "Scroll Padding"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/scroll-padding)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/scroll-padding)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/smooth-scroll.md b/mintlify/virtual/framework/vue/examples/smooth-scroll.md
new file mode 100644
index 000000000..45d0720a5
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/smooth-scroll.md
@@ -0,0 +1,12 @@
+---
+title: "Smooth Scroll"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/smooth-scroll)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/smooth-scroll)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/sticky.md b/mintlify/virtual/framework/vue/examples/sticky.md
new file mode 100644
index 000000000..dd97d24fb
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/sticky.md
@@ -0,0 +1,12 @@
+---
+title: "Sticky"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/sticky)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/sticky)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/table.md b/mintlify/virtual/framework/vue/examples/table.md
new file mode 100644
index 000000000..3487d53ae
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/table.md
@@ -0,0 +1,12 @@
+---
+title: "Table"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/table)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/table)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/examples/variable.md b/mintlify/virtual/framework/vue/examples/variable.md
new file mode 100644
index 000000000..aea2fe5a2
--- /dev/null
+++ b/mintlify/virtual/framework/vue/examples/variable.md
@@ -0,0 +1,12 @@
+---
+title: "Variable"
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable)
+- [Browse the complete example source at the pinned upstream commit.](https://github.com/TanStack/virtual/tree/850947a42dc322ac1dd0328a15ed344763932b60/examples/vue/variable)
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
diff --git a/mintlify/virtual/framework/vue/vue-virtual.md b/mintlify/virtual/framework/vue/vue-virtual.md
new file mode 100644
index 000000000..ab0275925
--- /dev/null
+++ b/mintlify/virtual/framework/vue/vue-virtual.md
@@ -0,0 +1,34 @@
+---
+title: Vue Virtual
+---
+
+The `@tanstack/vue-virtual` adapter is a wrapper around the core virtual logic.
+
+## `useVirtualizer`
+
+```tsx
+function useVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement>
+```
+
+This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+
+## `useWindowVirtualizer`
+
+```tsx
+function useWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement.
diff --git a/mintlify/virtual/index.mdx b/mintlify/virtual/index.mdx
new file mode 100644
index 000000000..d9ef01c12
--- /dev/null
+++ b/mintlify/virtual/index.mdx
@@ -0,0 +1,21 @@
+---
+title: "TanStack Virtual"
+description: "Headless UI for virtualizing large element lists. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+Headless UI for virtualizing large element lists.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="/virtual/introduction">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/virtual">
+    Visit the canonical TanStack Virtual website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/virtual">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
diff --git a/mintlify/virtual/installation.md b/mintlify/virtual/installation.md
new file mode 100644
index 000000000..1b49d7c62
--- /dev/null
+++ b/mintlify/virtual/installation.md
@@ -0,0 +1,49 @@
+---
+title: Installation
+---
+
+Before we dig in to the API, let's get you set up!
+
+Install your TanStack Virtual adapter as a dependency using your favorite npm package manager
+
+## React Virtual
+
+```bash
+npm install @tanstack/react-virtual
+```
+
+## Solid Virtual
+
+```bash
+npm install @tanstack/solid-virtual
+```
+
+## Svelte Virtual
+
+```bash
+npm install @tanstack/svelte-virtual
+```
+
+## Vue Virtual
+
+```bash
+npm install @tanstack/vue-virtual
+```
+
+## Lit Virtual
+
+```bash
+npm install @tanstack/lit-virtual
+```
+
+## Angular Virtual
+
+```bash
+npm install @tanstack/angular-virtual
+```
+
+## Virtual Core (no framework)
+
+```bash
+npm install @tanstack/virtual-core
+```
diff --git a/mintlify/virtual/introduction.md b/mintlify/virtual/introduction.md
new file mode 100644
index 000000000..df2d2cb9d
--- /dev/null
+++ b/mintlify/virtual/introduction.md
@@ -0,0 +1,70 @@
+---
+title: Introduction
+---
+
+TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte, Solid, Lit, and Angular. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation.
+
+## The Virtualizer
+
+At the heart of TanStack Virtual is the `Virtualizer`. Virtualizers can be oriented on either the vertical (default) or horizontal axes which makes it possible to achieve vertical, horizontal and even grid-like virtualization by combining the two axis configurations together.
+
+For chat, AI streams, logs, and other reverse feeds, see the [Chat guide](/virtual/chat).
+
+Here is just a quick example of what it looks like to virtualize a long list within a div using TanStack Virtual in React:
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+function App() {
+  // The scrollable element for your list
+  const parentRef = React.useRef(null)
+
+  // The virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  })
+
+  return (
+    <>
+      {/* The scrollable element for your list */}
+      <div
+        ref={parentRef}
+        style={{
+          height: `400px`,
+          overflow: 'auto', // Make it scroll!
+        }}
+      >
+        {/* The large inner element to hold all of the items */}
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {/* Only the visible items in the virtualizer, manually positioned to be in view */}
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => (
+            <div
+              key={virtualItem.key}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              Row {virtualItem.index}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
+```
+
+Let's dig into some more examples!
diff --git a/mintlify/virtual/pretext.md b/mintlify/virtual/pretext.md
new file mode 100644
index 000000000..baaa5e4b7
--- /dev/null
+++ b/mintlify/virtual/pretext.md
@@ -0,0 +1,116 @@
+---
+title: Text Measurement with Pretext
+---
+
+[Pretext](https://github.com/chenglou/pretext) is a text measurement and layout library from Cheng Lou. TanStack Virtual still owns scrolling, range calculation, item positioning, and scroll-to behavior; Pretext can own the text-height estimate for rows whose height is mostly determined by wrapped text.
+
+This is useful for chat logs, AI streams, activity feeds, comments, changelogs, notifications, and other text-heavy timelines where DOM measurement creates visible correction work.
+
+## When to use it
+
+Use Pretext when each virtual row's height can be derived from:
+
+- Text content
+- The exact canvas font string used by the rendered text
+- The available content width
+- The rendered line-height
+- Matching whitespace, word-break, and letter-spacing settings
+
+Do not make Pretext responsible for rows whose height depends on images, embeds, block markdown, loaded components, or arbitrary CSS layout. For those rows, use `measureElement`, call `resizeItem` when the extra content resolves, or split the text-only and non-text portions into separate sizing paths.
+
+## Install
+
+```sh
+npm install @chenglou/pretext
+```
+
+## Basic pattern
+
+Cache `prepare()` by text and text-style inputs. Run `layout()` for the current width. When the width, font, line-height, or text options change, reset Virtual's measurements so offsets are recalculated from the new estimates.
+
+```tsx
+import { clearCache, layout, prepare } from '@chenglou/pretext'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+const font = '14px Arial'
+const lineHeight = 20
+const preparedCache = new Map<string, ReturnType<typeof prepare>>()
+
+function getPrepared(row: { id: string; text: string }) {
+  const key = `${row.id}:${font}:${row.text}`
+  const cached = preparedCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const prepared = prepare(row.text, font, {
+    whiteSpace: 'pre-wrap',
+    letterSpacing: 0,
+  })
+  preparedCache.set(key, prepared)
+  return prepared
+}
+
+function estimateRowHeight(row: { id: string; text: string }, contentWidth: number) {
+  const text = layout(getPrepared(row), contentWidth, lineHeight)
+  const textHeight = Math.max(lineHeight, text.height)
+
+  return textHeight + 24
+}
+
+function Messages({ rows }: { rows: Array<{ id: string; text: string }> }) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const [width, setWidth] = React.useState(640)
+
+  React.useLayoutEffect(() => {
+    const element = parentRef.current
+
+    if (!element) {
+      return
+    }
+
+    const update = () => setWidth(element.clientWidth)
+    const observer = new ResizeObserver(update)
+
+    update()
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [])
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getItemKey: (index) => rows[index]!.id,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => estimateRowHeight(rows[index]!, width - 32),
+  })
+
+  React.useLayoutEffect(() => {
+    virtualizer.measure()
+  }, [virtualizer, width])
+
+  React.useEffect(() => {
+    document.fonts.ready.then(() => {
+      preparedCache.clear()
+      clearCache()
+      virtualizer.measure()
+    })
+  }, [virtualizer])
+
+  return <div ref={parentRef}>{/* render virtual rows */}</div>
+}
+```
+
+## Robustness checklist
+
+- Match CSS and Pretext inputs exactly. `font`, `line-height`, `letter-spacing`, `white-space`, and `word-break` must agree with the rendered row.
+- Prefer named fonts. System font aliases can map differently between CSS and canvas, especially on macOS.
+- Wait for fonts before trusting cached measurements. After `document.fonts.ready`, clear your prepared-text cache, call Pretext's `clearCache()`, and call `virtualizer.measure()`.
+- Rerun `layout()`, not `prepare()`, on resize. `prepare()` is the expensive per-text setup; `layout()` is the cheap width-dependent path.
+- Clamp empty text if your UI renders empty rows as one line. Pretext returns zero height for an empty string.
+- Use one sizing owner per row. Do not call `measureElement` for the same row that you also size with `resizeItem` or Pretext estimates unless you deliberately want DOM measurement to override the text estimate.
+- Keep a fallback for unsupported runtimes. Pretext currently needs `Intl.Segmenter` and Canvas 2D text measurement.
+- Use `resizeItem(index, size)` when you know a row's final size outside render, such as after markdown preprocessing, image metadata loading, or a controlled expand/collapse transition.
+
+See the React Pretext example for a complete chat-style implementation: [React Pretext](/virtual/framework/react/examples/pretext).
diff --git a/scripts/port-to-mintlify.mjs b/scripts/port-to-mintlify.mjs
new file mode 100644
index 000000000..c6b4bb538
--- /dev/null
+++ b/scripts/port-to-mintlify.mjs
@@ -0,0 +1,946 @@
+#!/usr/bin/env node
+
+import { cp, mkdir, readFile, readdir, rm, stat, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+
+const scriptDirectory = path.dirname(fileURLToPath(import.meta.url))
+const repositoryRoot = path.resolve(scriptDirectory, '..')
+const sourceRoot = path.resolve(
+  process.env.TANSTACK_SOURCE_ROOT ?? path.join(repositoryRoot, '..', 'upstreams'),
+)
+const outputRoot = path.join(repositoryRoot, 'mintlify')
+
+const products = [
+  {
+    id: 'start',
+    name: 'TanStack Start',
+    description: 'Full-stack framework powered by TanStack Router',
+    repository: 'router',
+    docsRoot: 'docs/start',
+    commit: 'a3e24c35a58d9ac149a05d6321f68aa5d541b6b4',
+  },
+  {
+    id: 'router',
+    name: 'TanStack Router',
+    description: 'Type-safe routing for React and Solid applications',
+    repository: 'router',
+    docsRoot: 'docs/router',
+    commit: 'a3e24c35a58d9ac149a05d6321f68aa5d541b6b4',
+  },
+  {
+    id: 'query',
+    name: 'TanStack Query',
+    description: 'Asynchronous state management and data fetching',
+    repository: 'query',
+    docsRoot: 'docs',
+    commit: 'bb68fa0aa1478640884007ecd989a9e48db253eb',
+  },
+  {
+    id: 'table',
+    name: 'TanStack Table',
+    description: 'Headless UI for tables and data grids',
+    repository: 'table',
+    docsRoot: 'docs',
+    commit: 'd08af367e11c539bb7e18c2472aa761149ef6db6',
+  },
+  {
+    id: 'form',
+    name: 'TanStack Form',
+    description: 'Type-safe form state management',
+    repository: 'form',
+    docsRoot: 'docs',
+    commit: '6a73479f2c2659550a6c8b456e3e139bf0d2142e',
+  },
+  {
+    id: 'db',
+    name: 'TanStack DB',
+    description: 'Reactive client store for sync-first applications',
+    repository: 'db',
+    docsRoot: 'docs',
+    commit: '18ba740bcbab78f5ae1c31c784ed42d1dae5ba38',
+  },
+  {
+    id: 'ai',
+    name: 'TanStack AI',
+    description: 'Type-safe, provider-agnostic AI SDK',
+    repository: 'ai',
+    docsRoot: 'docs',
+    commit: 'e3de949575eac8301c0449afa3a91ef450e9580b',
+  },
+  {
+    id: 'intent',
+    name: 'TanStack Intent',
+    description: 'Agent skills and package intent',
+    repository: 'intent',
+    docsRoot: 'docs',
+    commit: '6039a2629c2505de8715746b33be93b2518ad40b',
+  },
+  {
+    id: 'virtual',
+    name: 'TanStack Virtual',
+    description: 'Headless UI for virtualizing large element lists',
+    repository: 'virtual',
+    docsRoot: 'docs',
+    commit: '850947a42dc322ac1dd0328a15ed344763932b60',
+  },
+  {
+    id: 'pacer',
+    name: 'TanStack Pacer',
+    description: 'Debouncing, throttling, rate limiting, and queuing',
+    repository: 'pacer',
+    docsRoot: 'docs',
+    commit: 'cac705b14f7b246ef95e0287dc7745684fb40867',
+  },
+  {
+    id: 'hotkeys',
+    name: 'TanStack Hotkeys',
+    description: 'Type-safe keyboard shortcut management',
+    repository: 'hotkeys',
+    docsRoot: 'docs',
+    commit: '6adcc3a1b0a28350eb421f6aeebcf0f94d177817',
+  },
+  {
+    id: 'store',
+    name: 'TanStack Store',
+    description: 'Framework-agnostic reactive data store',
+    repository: 'store',
+    docsRoot: 'docs',
+    commit: '78e3f862196a904d51d6bf484e7bb5ecc65cd8fe',
+  },
+  {
+    id: 'ranger',
+    name: 'TanStack Ranger',
+    description: 'Headless range and multi-range slider utilities',
+    repository: 'ranger',
+    docsRoot: 'docs',
+    commit: 'fef45175e2f30c1d0e2749649f73f2a460acdf6d',
+  },
+  {
+    id: 'config',
+    name: 'TanStack Config',
+    description: 'Shared conventions and tooling for TypeScript packages',
+    repository: 'config',
+    docsRoot: 'docs',
+    commit: '695e782edc39b6907f79e51f4d56dc15af97df60',
+  },
+  {
+    id: 'devtools',
+    name: 'TanStack Devtools',
+    description: 'Unified development tools for the TanStack ecosystem',
+    repository: 'devtools',
+    docsRoot: 'docs',
+    commit: '92f69d014a981518915064593adc7bb4ffb71f3a',
+  },
+  {
+    id: 'cli',
+    name: 'TanStack CLI',
+    description: 'Project creation, add-ons, and ecosystem tooling',
+    repository: 'cli',
+    docsRoot: 'docs',
+    commit: '12c31dfb429ec057af9ddc5f85f492b0b0b22979',
+  },
+]
+
+const productIds = products.map((product) => product.id).join('|')
+const absoluteLatestDocsPattern = new RegExp(
+  `https?://(?:www\\.)?tanstack\\.com/(${productIds})/latest/docs/`,
+  'gi',
+)
+const rootLatestDocsPattern = new RegExp(
+  `(?<=\\()/(?:docs/)?(${productIds})/latest/docs/`,
+  'gi',
+)
+
+function rewriteInternalLinks(markdown) {
+  const rewritten = markdown
+    .replace(absoluteLatestDocsPattern, '/$1/')
+    .replace(rootLatestDocsPattern, '/$1/')
+    .replace(/\/router\/framework\/(?:react|solid)\/(?!examples\/)/gi, '/router/')
+    .replace(
+      /\/query\/(react|preact|solid|vue|svelte|angular|lit)\//gi,
+      '/query/framework/$1/',
+    )
+    .replace(/\/query\/latest(?=([#?\s)]|$))/gi, '/query')
+    .replace(/\/README(?:\.mdx?)?(?=([#?\s)]|$))/gi, '/index')
+    .replace(
+      '/router/routing/file-based-routing#s-or-s',
+      '/router/routing/file-based-routing',
+    )
+    .replace(/<(https?:\/\/[^>]+)>/g, (_match, url) =>
+      url.replaceAll('(', '%28').replaceAll(')', '%29'),
+    )
+  return rewritten.replace(
+    /(\]\()([^)\s]+?)\.(?:md|mdx)((?:[?#][^)\s]*)?)(\))/gi,
+    (match, prefix, target, suffix, closing) => {
+      if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(target)) return match
+      return `${prefix}${target}${suffix}${closing}`
+    },
+  )
+}
+
+function absolutizeMarkdownLinks(markdown, currentFile, productOutput, productId) {
+  return markdown.replace(
+    /(\]\()([^)\s]+)(\))/g,
+    (match, prefix, rawTarget, closing) => {
+      const target = rawTarget.replace(/^<|>$/g, '')
+      if (
+        !target ||
+        target.startsWith('#') ||
+        target.startsWith('/') ||
+        /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(target)
+      ) {
+        return match
+      }
+
+      const suffixIndex = target.search(/[?#]/)
+      const targetPath = suffixIndex === -1 ? target : target.slice(0, suffixIndex)
+      const suffix = suffixIndex === -1 ? '' : target.slice(suffixIndex)
+      let decodedTarget
+      try {
+        decodedTarget = decodeURIComponent(targetPath)
+      } catch {
+        return match
+      }
+      const resolved = path.resolve(path.dirname(currentFile), decodedTarget)
+      const relative = path.relative(productOutput, resolved)
+      if (relative.startsWith('..') || path.isAbsolute(relative)) return match
+
+      let urlPath = relative.replaceAll('\\', '/').replace(/\.(?:md|mdx)$/i, '')
+      urlPath = urlPath.replace(/(^|\/)README$/i, '$1index')
+      return `${prefix}/${productId}/${urlPath}${suffix}${closing}`
+    },
+  )
+}
+
+const supportedHtmlTags = new Set([
+  'a',
+  'blockquote',
+  'br',
+  'code',
+  'details',
+  'div',
+  'em',
+  'figcaption',
+  'figure',
+  'iframe',
+  'img',
+  'kbd',
+  'li',
+  'ol',
+  'p',
+  'picture',
+  'pre',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'th',
+  'thead',
+  'tr',
+  'ul',
+  'video',
+])
+
+function escapeHtml(value) {
+  return value.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+}
+
+function sanitizeTextSegment(segment) {
+  const withSafeTags = segment.replace(
+    /<\/?([A-Za-z][A-Za-z0-9.-]*)(?:\s[^<>]*?)?>/g,
+    (tag, tagName) => {
+      const normalizedTagName = tagName.toLowerCase()
+      if (!supportedHtmlTags.has(normalizedTagName) || tag.includes('{')) {
+        return escapeHtml(tag)
+      }
+      if (/^<(?:br|img|source)\b/i.test(tag) && !/\/\s*>$/.test(tag)) {
+        return tag.replace(/>$/, ' />')
+      }
+      return tag
+    },
+  )
+  const supportedTagPattern = [...supportedHtmlTags].join('|')
+  return withSafeTags
+    .replace(new RegExp(`<(?!/?(?:${supportedTagPattern})\\b)`, 'gi'), '&lt;')
+    .replaceAll('{', '&#123;')
+    .replaceAll('}', '&#125;')
+}
+
+function sanitizeLineOutsideInlineCode(line) {
+  return line
+    .split(/(`[^`]*`)/g)
+    .map((segment, index) => (index % 2 === 1 ? segment : sanitizeTextSegment(segment)))
+    .join('')
+}
+
+function sanitizeForMintlify(markdown) {
+  const lines = markdown.split('\n')
+  const sanitized = []
+  let fenceMarker
+  let inHtmlComment = false
+  let inFrontmatter = lines[0]?.trim() === '---'
+
+  for (const [lineIndex, originalLine] of lines.entries()) {
+    if (inFrontmatter) {
+      sanitized.push(originalLine)
+      if (lineIndex > 0 && originalLine.trim() === '---') inFrontmatter = false
+      continue
+    }
+
+    const fenceMatch = originalLine.match(/^\s*(`{3,}|~{3,})/)
+    if (fenceMatch) {
+      const marker = fenceMatch[1][0]
+      if (!fenceMarker) fenceMarker = marker
+      else if (fenceMarker === marker) fenceMarker = undefined
+      sanitized.push(originalLine)
+      continue
+    }
+
+    if (fenceMarker) {
+      sanitized.push(originalLine)
+      continue
+    }
+
+    let line = originalLine
+    if (inHtmlComment) {
+      const commentEnd = line.indexOf('-->')
+      if (commentEnd === -1) continue
+      line = line.slice(commentEnd + 3)
+      inHtmlComment = false
+    }
+
+    while (line.includes('<!--')) {
+      const commentStart = line.indexOf('<!--')
+      const commentEnd = line.indexOf('-->', commentStart + 4)
+      if (commentEnd === -1) {
+        line = line.slice(0, commentStart)
+        inHtmlComment = true
+        break
+      }
+      line = `${line.slice(0, commentStart)}${line.slice(commentEnd + 3)}`
+    }
+
+    sanitized.push(sanitizeLineOutsideInlineCode(line))
+  }
+
+  return sanitized.join('\n')
+}
+
+async function walk(directory) {
+  const entries = await readdir(directory, { withFileTypes: true })
+  const files = []
+
+  for (const entry of entries) {
+    const entryPath = path.join(directory, entry.name)
+    if (entry.isDirectory()) {
+      files.push(...(await walk(entryPath)))
+    } else if (entry.isFile()) {
+      files.push(entryPath)
+    }
+  }
+
+  return files
+}
+
+function withoutMarkdownExtension(filePath) {
+  return filePath.replace(/\.(?:md|mdx)$/i, '')
+}
+
+function titleFromPath(value) {
+  return value
+    .split(/[/-]/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+function isExternalTarget(target) {
+  return /^(?:https?:)?\/\//i.test(target)
+}
+
+function normalizeTarget(target) {
+  const [targetWithoutHash] = target.split('#')
+  return targetWithoutHash.replace(/^\.\//, '').replace(/^\//, '').replace(/\/$/, '')
+}
+
+async function pathExists(candidate) {
+  try {
+    await stat(candidate)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function resolvePage(sourceDocs, product, target) {
+  if (target === '..' || target === './framework') {
+    return `${product.id}/index`
+  }
+  if (isExternalTarget(target)) return undefined
+
+  const normalized = normalizeTarget(target)
+  const candidates = [
+    `${normalized}.md`,
+    `${normalized}.mdx`,
+    path.join(normalized, 'index.md'),
+    path.join(normalized, 'index.mdx'),
+  ]
+
+  for (const candidate of candidates) {
+    if (await pathExists(path.join(sourceDocs, candidate))) {
+      return `${product.id}/${withoutMarkdownExtension(candidate)}`.replaceAll('\\', '/')
+    }
+  }
+
+  return undefined
+}
+
+async function copyDocumentation(sourceDocs, productOutput, product) {
+  await cp(sourceDocs, productOutput, {
+    recursive: true,
+    filter: (source) => path.basename(source) !== 'config.json',
+  })
+
+  const copiedFiles = await walk(productOutput)
+  for (const copiedFile of copiedFiles) {
+    if (!/\.(?:md|mdx)$/i.test(copiedFile)) continue
+    const markdown = await readFile(copiedFile, 'utf8')
+    const rewritten = sanitizeForMintlify(
+      absolutizeMarkdownLinks(
+        rewriteInternalLinks(markdown),
+        copiedFile,
+        productOutput,
+        product.id,
+      ),
+    )
+    const isReadme = /^readme\.(?:md|mdx)$/i.test(path.basename(copiedFile))
+    const destination = isReadme
+      ? path.join(path.dirname(copiedFile), `index${path.extname(copiedFile)}`)
+      : copiedFile
+    await writeFile(destination, rewritten)
+    if (isReadme) await rm(copiedFile)
+  }
+}
+
+async function createFallbackPage({
+  product,
+  repositoryRoot,
+  productOutput,
+  target,
+  label,
+}) {
+  const normalized = normalizeTarget(target)
+  const destination = path.join(productOutput, `${normalized}.md`)
+  await mkdir(path.dirname(destination), { recursive: true })
+
+  const exampleMatch = normalized.match(/^framework\/([^/]+)\/examples\/(.+)$/)
+  let sourceLink = `https://github.com/TanStack/${product.repository}/tree/${product.commit}`
+  let sourceDescription = 'Browse the pinned upstream repository for the generated source.'
+
+  if (exampleMatch) {
+    const [, framework, exampleName] = exampleMatch
+    const exampleDirectory = path.join(repositoryRoot, 'examples', framework, exampleName)
+    if (await pathExists(exampleDirectory)) {
+      sourceLink = `https://github.com/TanStack/${product.repository}/tree/${product.commit}/examples/${framework}/${exampleName}`
+      sourceDescription = 'Browse the complete example source at the pinned upstream commit.'
+    }
+  }
+
+  const canonicalUrl = `https://tanstack.com/${product.id}/latest/docs/${normalized}`
+  const markdown = `---
+title: ${JSON.stringify(label)}
+description: "Canonical upstream page for content generated dynamically by TanStack.com."
+---
+
+This page is generated dynamically by the official TanStack site and does not exist as a standalone Markdown file in the upstream documentation directory.
+
+- [Open the canonical page on TanStack.com](${canonicalUrl})
+- [${sourceDescription}](${sourceLink})
+
+> [!NOTE]
+> The links above are pinned wherever the upstream source is available. This port keeps the navigation target instead of silently dropping dynamically generated content.
+`
+  await writeFile(destination, markdown)
+  return `${product.id}/${normalized}`
+}
+
+function relativeMarkdownTargets(markdown) {
+  const targets = []
+  const linkPattern = /\[[^\]]*\]\(([^)\s]+)(?:\s+["'][^)]*)?\)/g
+  for (const match of markdown.matchAll(linkPattern)) {
+    const target = match[1].replace(/^<|>$/g, '')
+    if (
+      !target ||
+      target.startsWith('#') ||
+      /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(target)
+    ) {
+      continue
+    }
+    targets.push(target)
+  }
+  return targets
+}
+
+async function resolveExistingLinkTarget(basePath) {
+  const extension = path.extname(basePath).toLowerCase()
+  const candidates = extension
+    ? [basePath]
+    : [
+        `${basePath}.md`,
+        `${basePath}.mdx`,
+        path.join(basePath, 'index.md'),
+        path.join(basePath, 'index.mdx'),
+      ]
+  for (const candidate of candidates) {
+    if (await pathExists(candidate)) return candidate
+  }
+  return undefined
+}
+
+async function repairMissingMarkdownLinks(product, productOutput) {
+  const markdownFiles = (await walk(productOutput)).filter((file) =>
+    /\.(?:md|mdx)$/i.test(file),
+  )
+  const generated = new Set()
+
+  for (const markdownFile of markdownFiles) {
+    const markdown = await readFile(markdownFile, 'utf8')
+    for (const rawTarget of relativeMarkdownTargets(markdown)) {
+      const targetPath = rawTarget.split(/[?#]/)[0]
+      if (!targetPath) continue
+
+      const decodedTarget = decodeURIComponent(targetPath)
+      const basePath = decodedTarget.startsWith('/')
+        ? path.join(outputRoot, decodedTarget.replace(/^\/+/, ''))
+        : path.resolve(path.dirname(markdownFile), decodedTarget)
+      const relativeToProduct = path.relative(productOutput, basePath)
+      if (relativeToProduct.startsWith('..') || path.isAbsolute(relativeToProduct)) {
+        continue
+      }
+
+      if (await resolveExistingLinkTarget(basePath)) continue
+
+      const extension = path.extname(basePath).toLowerCase()
+      if (extension && extension !== '.md' && extension !== '.mdx') continue
+
+      const destination = extension ? basePath : `${basePath}.md`
+      if (generated.has(destination)) continue
+      generated.add(destination)
+      await mkdir(path.dirname(destination), { recursive: true })
+
+      const sourceRelativePath = path
+        .relative(productOutput, destination)
+        .replaceAll('\\', '/')
+        .replace(/\.(?:md|mdx)$/i, '')
+      const title = titleFromPath(path.basename(sourceRelativePath)) || 'Generated reference'
+      const canonicalUrl = `https://tanstack.com/${product.id}/latest/docs/${sourceRelativePath}`
+      await writeFile(
+        destination,
+        `---
+title: ${JSON.stringify(title)}
+description: "Link target generated to preserve an upstream documentation reference."
+---
+
+This target is referenced by upstream documentation but is not stored as a standalone Markdown file in the pinned source snapshot.
+
+- [Open the canonical location on TanStack.com](${canonicalUrl})
+- [Browse the pinned upstream repository](https://github.com/TanStack/${product.repository}/tree/${product.commit})
+`,
+      )
+    }
+  }
+
+  return generated.size
+}
+
+async function createCompatibilityPages() {
+  const pages = [
+    {
+      productId: 'query',
+      target: 'query/framework/react/guides/error-handling.md',
+      title: 'Error handling',
+      href: 'https://tanstack.com/query/latest/docs/framework/react/guides/error-handling',
+    },
+    {
+      productId: 'router',
+      target: 'router/guide/tanstack-start.md',
+      title: 'TanStack Start',
+      href: '/start',
+    },
+  ]
+
+  for (const page of pages) {
+    const destination = path.join(outputRoot, page.target)
+    await mkdir(path.dirname(destination), { recursive: true })
+    await writeFile(
+      destination,
+      `---
+title: ${JSON.stringify(page.title)}
+description: "Compatibility target retained for an upstream cross-product link."
+---
+
+This compatibility page preserves a cross-product link used by the upstream documentation.
+
+[Continue to ${page.title}](${page.href})
+`,
+    )
+  }
+
+  return pages
+}
+
+async function buildNavigation(
+  product,
+  repositoryRoot,
+  sourceDocs,
+  productOutput,
+  config,
+) {
+  const included = new Set([`${product.id}/index`])
+  const missing = []
+  const groups = []
+
+  const addChildren = async (children, pages) => {
+    for (const child of children ?? []) {
+      let resolved = await resolvePage(sourceDocs, product, child.to)
+      if (!resolved && !isExternalTarget(child.to)) {
+        resolved = await createFallbackPage({
+          product,
+          repositoryRoot,
+          productOutput,
+          target: child.to,
+          label: child.label,
+        })
+        missing.push(child.to)
+      }
+      if (!resolved) {
+        continue
+      }
+      if (included.has(resolved)) continue
+      included.add(resolved)
+      pages.push(resolved)
+    }
+  }
+
+  for (const section of config.sections ?? []) {
+    const pages = []
+    await addChildren(section.children, pages)
+
+    for (const framework of section.frameworks ?? []) {
+      const frameworkPages = []
+      await addChildren(framework.children, frameworkPages)
+      if (frameworkPages.length > 0) {
+        pages.push({
+          group: titleFromPath(framework.label),
+          expanded: false,
+          pages: frameworkPages,
+        })
+      }
+    }
+
+    if (pages.length > 0) {
+      groups.push({
+        group: section.label,
+        pages,
+      })
+    }
+  }
+
+  const sourceFiles = (await walk(sourceDocs))
+    .filter((file) => /\.(?:md|mdx)$/i.test(file))
+    .map((file) => path.relative(sourceDocs, file).replaceAll('\\', '/'))
+
+  const additionalByDirectory = new Map()
+  for (const sourceFile of sourceFiles) {
+    const sourcePage = /^readme\.(?:md|mdx)$/i.test(path.basename(sourceFile))
+      ? path.join(path.dirname(sourceFile), 'index').replaceAll('\\', '/')
+      : withoutMarkdownExtension(sourceFile)
+    const page = `${product.id}/${sourcePage}`
+    if (included.has(page)) continue
+    included.add(page)
+
+    const [directory = 'Other'] = sourceFile.split('/')
+    const bucketName = sourceFile.includes('/') ? titleFromPath(directory) : 'Other'
+    const bucket = additionalByDirectory.get(bucketName) ?? []
+    bucket.push(page)
+    additionalByDirectory.set(bucketName, bucket)
+  }
+
+  if (additionalByDirectory.size > 0) {
+    const additionalPages = [...additionalByDirectory.entries()]
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([group, pages]) => ({
+        group,
+        expanded: false,
+        pages: pages.sort(),
+      }))
+    groups.push({ group: 'Additional source pages', pages: additionalPages })
+  }
+
+  return {
+    groups,
+    missing: [...new Set(missing)].sort(),
+    pageCount: sourceFiles.length,
+    generatedPageCount: missing.length,
+    navigationCount: included.size - 1,
+  }
+}
+
+function productLanding(product, groups) {
+  const firstPage = groups
+    .flatMap((group) => group.pages)
+    .find((page) => typeof page === 'string')
+  const startHref = firstPage ? `/${firstPage}` : `https://tanstack.com/${product.id}`
+
+  return `---
+title: "${product.name}"
+description: "${product.description}. Community-maintained Mintlify port of the official TanStack documentation."
+---
+
+${product.description}.
+
+<CardGroup cols={2}>
+  <Card title="Browse the documentation" icon="book-open" href="${startHref}">
+    Open the first section in this documentation set.
+  </Card>
+  <Card title="Official TanStack site" icon="arrow-up-right-from-square" href="https://tanstack.com/${product.id}">
+    Visit the canonical ${product.name} website.
+  </Card>
+  <Card title="Source repository" icon="github" href="https://github.com/TanStack/${product.repository}">
+    View the original source and report upstream issues.
+  </Card>
+  <Card title="Port provenance" icon="code-branch" href="/attribution">
+    Review source commits, licenses, and migration notes.
+  </Card>
+</CardGroup>
+`
+}
+
+function siteLanding() {
+  const cards = products
+    .map(
+      (product) => `  <Card title="${product.name}" href="/${product.id}" icon="book-open">
+    ${product.description}.
+  </Card>`,
+    )
+    .join('\n')
+
+  return `---
+title: "TanStack Documentation"
+description: "A community Mintlify port of the current TanStack documentation."
+---
+
+This is a community-maintained Mintlify port of the current documentation published at [tanstack.com](https://tanstack.com/). It is not an official TanStack deployment. Content is preserved from the upstream open-source repositories and linked back to its canonical source.
+
+<Warning>
+  For authoritative and most up-to-date information, use the official [TanStack documentation](https://tanstack.com/).
+</Warning>
+
+<CardGroup cols={2}>
+${cards}
+</CardGroup>
+`
+}
+
+function attributionPage(results) {
+  const rows = products
+    .map(
+      (product) =>
+        `| ${product.name} | [TanStack/${product.repository}](https://github.com/TanStack/${product.repository}/tree/${product.commit}/${product.docsRoot}) | \`${product.commit.slice(0, 12)}\` | MIT |`,
+    )
+    .join('\n')
+  const totals = results.reduce(
+    (summary, result) => ({
+      pages: summary.pages + result.pageCount,
+      generated: summary.generated + result.generatedPageCount,
+      linked: summary.linked + result.linkTargetPageCount,
+      navigation: summary.navigation + result.navigationCount,
+      missing: summary.missing + result.missing.length,
+    }),
+    { pages: 0, generated: 0, linked: 0, navigation: 0, missing: 0 },
+  )
+
+  return `---
+title: "Attribution and provenance"
+description: "Source repositories, pinned commits, licenses, and scope for this TanStack documentation port."
+---
+
+This repository is a community port and is not affiliated with or endorsed by TanStack. The documentation content remains attributable to the TanStack contributors. Each source repository includes an MIT license; verbatim copies of those licenses are stored in the \`licenses\` directory of this Mintlify project.
+
+| Product | Canonical source | Pinned commit | License |
+| --- | --- | --- | --- |
+${rows}
+
+## Migration scope
+
+- ${totals.pages.toLocaleString('en-US')} Markdown/MDX source pages copied from the current \`main\` branches.
+- ${totals.generated.toLocaleString('en-US')} link pages generated for examples and API references that TanStack.com builds dynamically rather than storing as standalone Markdown.
+- ${totals.linked.toLocaleString('en-US')} additional link-target pages generated to preserve cross-references emitted by upstream API documentation generators.
+- ${totals.navigation.toLocaleString('en-US')} pages represented in the Mintlify navigation.
+- Assets under each product's documentation directory copied with their relative paths intact.
+- Current documentation only. Historical version branches remain available on the [official TanStack site](https://tanstack.com/).
+- ${totals.missing.toLocaleString('en-US')} upstream navigation targets were preserved as generated link pages and are recorded in \`migration-report.json\`.
+
+## Content fidelity
+
+TanStack's GitHub-flavored Markdown is retained as plain Markdown wherever possible. Internal links to current TanStack docs are rewritten to this Mintlify site's product paths. TanStack-specific comment directives remain in the source; their enclosed content is preserved even where Mintlify renders it as ordinary sequential Markdown instead of the original interactive widget.
+`
+}
+
+async function main() {
+  await rm(outputRoot, { recursive: true, force: true })
+  await mkdir(path.join(outputRoot, 'licenses'), { recursive: true })
+
+  const productNavigations = []
+  const results = []
+  const copiedLicenses = new Set()
+
+  for (const product of products) {
+    const repositoryRoot = path.join(sourceRoot, product.repository)
+    const sourceDocs = path.join(repositoryRoot, product.docsRoot)
+    const configPath = path.join(sourceDocs, 'config.json')
+    const config = JSON.parse(await readFile(configPath, 'utf8'))
+    const productOutput = path.join(outputRoot, product.id)
+
+    await copyDocumentation(sourceDocs, productOutput, product)
+    const navigation = await buildNavigation(
+      product,
+      repositoryRoot,
+      sourceDocs,
+      productOutput,
+      config,
+    )
+    await writeFile(
+      path.join(productOutput, 'index.mdx'),
+      productLanding(product, navigation.groups),
+    )
+    const linkTargetPageCount = await repairMissingMarkdownLinks(
+      product,
+      productOutput,
+    )
+
+    if (!copiedLicenses.has(product.repository)) {
+      await cp(
+        path.join(repositoryRoot, 'LICENSE'),
+        path.join(outputRoot, 'licenses', `${product.repository}.txt`),
+      )
+      copiedLicenses.add(product.repository)
+    }
+
+    productNavigations.push({
+      product: product.name,
+      description: product.description,
+      groups: [
+        { group: 'Overview', pages: [`${product.id}/index`] },
+        ...navigation.groups,
+      ],
+    })
+    results.push({ ...product, ...navigation, linkTargetPageCount })
+  }
+
+  const compatibilityPages = await createCompatibilityPages()
+  for (const page of compatibilityPages) {
+    const result = results.find((entry) => entry.id === page.productId)
+    if (result) result.linkTargetPageCount += 1
+  }
+
+  await writeFile(path.join(outputRoot, 'index.mdx'), siteLanding())
+  await writeFile(path.join(outputRoot, 'attribution.mdx'), attributionPage(results))
+
+  const docsJson = {
+    $schema: 'https://mintlify.com/docs.json',
+    theme: 'mint',
+    name: 'TanStack Documentation',
+    description:
+      'A community Mintlify port of the current open-source TanStack documentation.',
+    colors: {
+      primary: '#0EA5E9',
+      light: '#38BDF8',
+      dark: '#0369A1',
+    },
+    icons: { library: 'lucide' },
+    appearance: { default: 'system' },
+    styling: { eyebrows: 'breadcrumbs', codeblocks: 'system' },
+    interaction: { drilldown: false },
+    navigation: {
+      global: {
+        anchors: [
+          { anchor: 'Official TanStack site', href: 'https://tanstack.com', icon: 'external-link' },
+          { anchor: 'GitHub fork', href: 'https://github.com/raunakdoesdev/tanstack.com', icon: 'github' },
+        ],
+      },
+      products: [
+        {
+          product: 'Ecosystem overview',
+          description: 'Port scope, product index, and source attribution',
+          groups: [
+            { group: 'Overview', pages: ['index', 'attribution'] },
+          ],
+        },
+        ...productNavigations,
+      ],
+    },
+    navbar: {
+      links: [
+        { label: 'Official docs', href: 'https://tanstack.com' },
+        { label: 'GitHub', href: 'https://github.com/raunakdoesdev/tanstack.com' },
+      ],
+    },
+    footer: {
+      socials: {
+        github: 'https://github.com/TanStack',
+        x: 'https://x.com/tan_stack',
+      },
+    },
+    seo: { indexing: 'navigable' },
+    errors: {
+      404: {
+        redirect: false,
+        title: 'Page not found',
+        description: 'Try the product switcher or visit the canonical TanStack documentation.',
+      },
+    },
+  }
+
+  await writeFile(
+    path.join(outputRoot, 'docs.json'),
+    `${JSON.stringify(docsJson, null, 2)}\n`,
+  )
+  await writeFile(
+    path.join(outputRoot, 'migration-report.json'),
+    `${JSON.stringify(
+      {
+        generatedAt: new Date().toISOString(),
+        sourceRoot: path.relative(repositoryRoot, sourceRoot) || '.',
+        products: results.map((result) => ({
+          id: result.id,
+          repository: `TanStack/${result.repository}`,
+          docsRoot: result.docsRoot,
+          commit: result.commit,
+          pageCount: result.pageCount,
+          navigationCount: result.navigationCount,
+          generatedPageCount: result.generatedPageCount,
+          linkTargetPageCount: result.linkTargetPageCount,
+          generatedNavigationTargets: result.missing,
+        })),
+      },
+      null,
+      2,
+    )}\n`,
+  )
+
+  const pageTotal = results.reduce((sum, result) => sum + result.pageCount, 0)
+  const unresolvedTotal = results.reduce((sum, result) => sum + result.missing.length, 0)
+  process.stdout.write(
+    `Generated ${pageTotal} source pages for ${results.length} products plus ${unresolvedTotal} navigation-preserving link pages.\n`,
+  )
+}
+
+await main()